roa-mirage/dist/bundle.js

[Live Demo of the Pattern Library](https://mealeyst.github.io/mirage/)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var PropTypes = _interopDefault(require('prop-types'));
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var React = require('react');
var React__default = _interopDefault(React);

var _templateObject = _taggedTemplateLiteral(['\n  text-align: ', ';\n  letter-spacing: ', ';\n  text-transform: ', ';\n\n  color: ', '\n\n  font-family: ', ';\n  font-size: ', ';\n  font-weight: ', ';\n'], ['\n  text-align: ', ';\n  letter-spacing: ', ';\n  text-transform: ', ';\n\n  color: ', '\n\n  font-family: ', ';\n  font-size: ', ';\n  font-weight: ', ';\n']);

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Label = styled__default.label(_templateObject, function (props) {
  return props.alignRight ? 'right' : 'left';
}, function (props) {
  return props.letterSpacing;
}, function (props) {
  return props.lowercase ? 'inherit' : 'uppercase';
}, function (props) {
  return props.theme.colors.navy;
}, function (props) {
  return props.theme.fonts.primaryFont;
}, function (props) {
  return props.fontSize;
}, function (props) {
  return props.fontWeight;
});

Label.propTypes = {
  children: PropTypes.string,
  theme: PropTypes.shape({
    fonts: PropTypes.shape({
      primaryFont: PropTypes.string
    }),
    colors: PropTypes.shape({
      navy: PropTypes.string
    })
  }),
  lowercase: PropTypes.bool
};

Label.defaultProps = {
  letterSpacing: '1px',
  fontSize: '0.875em',
  fontWeight: '500'

  /** @component */
};

var _jsxFileName = '/Users/mealeyst/projects/professional/mirage/src/address/DefaultAddress.js',
    _this = undefined;

var _templateObject$1 = _taggedTemplateLiteral$1(['\n  display: flex;\n  flex-wrap: wrap;\n  ', ' {\n    flex: 0 0 100%;\n  }\n'], ['\n  display: flex;\n  flex-wrap: wrap;\n  ', ' {\n    flex: 0 0 100%;\n  }\n']);

function _taggedTemplateLiteral$1(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var DefaultLabel = function DefaultLabel(_ref) {
  var children = _ref.children;

  return React__default.createElement(
    Label,
    {
      fontSize: '1.25em',
      letterSpacing: 'normal',
      fontWeight: 'normal',
      lowercase: true, __source: {
        fileName: _jsxFileName,
        lineNumber: 9
      },
      __self: _this
    },
    children
  );
};

var StyledDefaultAddress = styled__default.section(_templateObject$1, Label);

var DefaultAddress = function DefaultAddress(_ref2) {
  var _ref2$address = _ref2.address,
      first_name = _ref2$address.first_name,
      last_name = _ref2$address.last_name,
      address1 = _ref2$address.address1,
      address2 = _ref2$address.address2,
      city = _ref2$address.city,
      state = _ref2$address.state,
      zipcode = _ref2$address.zipcode;

  return React__default.createElement(
    StyledDefaultAddress,
    {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 31
      },
      __self: _this
    },
    React__default.createElement(
      DefaultLabel,
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 32
        },
        __self: _this
      },
      first_name,
      ' ',
      last_name
    ),
    React__default.createElement(
      DefaultLabel,
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 33
        },
        __self: _this
      },
      address1
    ),
    address2 && React__default.createElement(
      DefaultLabel,
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 34
        },
        __self: _this
      },
      address2
    ),
    React__default.createElement(
      DefaultLabel,
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 35
        },
        __self: _this
      },
      city,
      ', ',
      state,
      ' ',
      zipcode
    )
  );
};

DefaultAddress.propTypes = {
  address: PropTypes.shape({
    first_name: PropTypes.string,
    last_name: PropTypes.string,
    address1: PropTypes.string,
    address2: PropTypes.string,
    city: PropTypes.string,
    state: PropTypes.string,
    zipcode: PropTypes.string
  })

  /** @component */
};

var _templateObject$2 = _taggedTemplateLiteral$2(['\n  font-family: ', ';\n  text-decoration: none;\n  text-transform: ', '\n  &:hover {\n    pointer: cursor;\n    text-decoration: ', ';\n  }\n'], ['\n  font-family: ', ';\n  text-decoration: none;\n  text-transform: ', '\n  &:hover {\n    pointer: cursor;\n    text-decoration: ', ';\n  }\n']);

function _taggedTemplateLiteral$2(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var BaseLink = styled__default.a(_templateObject$2, function (props) {
  return props.theme.fonts.primaryFont;
}, function (props) {
  return props.uppercase ? 'uppercase' : 'initial';
}, function (props) {
  return props.underline ? 'underline' : 'none';
});

BaseLink.propTypes = {
  theme: PropTypes.shape({
    fonts: PropTypes.shape({
      primaryFont: PropTypes.string.isRequired
    }).isRequired
  }),
  uppercase: PropTypes.bool.isRequired,
  underline: PropTypes.bool.isRequired
};

BaseLink.defaultProps = {
  uppercase: false,
  underline: true

  /** @component */
};

var _templateObject$3 = _taggedTemplateLiteral$3(['\n  color:  ', ';\n  &:active, &:focus, &:hover, &:visited {\n    color: ', ';\n  }\n'], ['\n  color:  ', ';\n  &:active, &:focus, &:hover, &:visited {\n    color: ', ';\n  }\n']);

function _taggedTemplateLiteral$3(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Link = styled__default(BaseLink)(_templateObject$3, function (props) {
  return props.theme.colors.rocketBlue;
}, function (props) {
  return props.theme.colors.rocketBlue;
});

Link.propTypes = {
  theme: PropTypes.shape({
    colors: PropTypes.shape({
      rocketBlue: PropTypes.string
    })
  }).isRequired

  /** @component */
};

var _templateObject$4 = _taggedTemplateLiteral$4(['\n  border-radius: 0.1875em;\n  padding: 1.25em;\n  background-color: ', ';\n  position: relative;\n\n  > ', ' {\n    position: absolute;\n    top: 0.9375em;\n    right: 1.25em;\n  }\n  main {\n    margin-top: 2.5em;\n  }\n'], ['\n  border-radius: 0.1875em;\n  padding: 1.25em;\n  background-color: ', ';\n  position: relative;\n\n  > ', ' {\n    position: absolute;\n    top: 0.9375em;\n    right: 1.25em;\n  }\n  main {\n    margin-top: 2.5em;\n  }\n']);

function _taggedTemplateLiteral$4(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var DefaultSection = styled__default.section(_templateObject$4, function (props) {
  return props.theme.colors.gray[2];
}, Link);

var _templateObject$5 = _taggedTemplateLiteral$5(['\n  grid-template-columns:\n    repeat(', ', 1fr);\n  margin: 0 ', ';\n'], ['\n  grid-template-columns:\n    repeat(', ', 1fr);\n  margin: 0 ', ';\n']),
    _templateObject2 = _taggedTemplateLiteral$5(['\n  grid-template-columns:\n    repeat(', ', 1fr);\n  max-width: 1440px;\n  margin: 0 ', ';\n'], ['\n  grid-template-columns:\n    repeat(', ', 1fr);\n  max-width: 1440px;\n  margin: 0 ', ';\n']),
    _templateObject3 = _taggedTemplateLiteral$5(['\n  grid-gap: ', ';\n  display: grid;\n  grid-auto-flow: row;\n  grid-template-columns:\n    repeat(', ', 1fr);\n  grid-row-gap: 20px;\n  grid-column-gap: ', ';\n  margin: 0 ', ';\n  ', '\n  ', '\n  ', '\n'], ['\n  grid-gap: ', ';\n  display: grid;\n  grid-auto-flow: row;\n  grid-template-columns:\n    repeat(', ', 1fr);\n  grid-row-gap: 20px;\n  grid-column-gap: ', ';\n  margin: 0 ', ';\n  ', '\n  ', '\n  ', '\n']),
    _templateObject4 = _taggedTemplateLiteral$5(['', ''], ['', '']);

function _taggedTemplateLiteral$5(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var TabletGrid = styled.css(_templateObject$5, function (props) {
  return props.theme.grid.columns.tablet;
}, function (props) {
  return props.theme.grid.margins.tablet;
});

var DesktopGrid = styled.css(_templateObject2, function (props) {
  return props.theme.grid.columns.desktop;
}, function (props) {
  return props.theme.grid.margins.desktop;
});

var Grid = styled__default.div(_templateObject3, function (props) {
  return props.theme.grid.gutter;
}, function (props) {
  return props.theme.grid.columns.mobile;
}, function (props) {
  return props.theme.grid.gutter;
}, function (props) {
  return props.theme.grid.margins.mobile;
}, function (props) {
  return props.theme.media.tablet(_templateObject4, TabletGrid);
}, function (props) {
  return props.theme.media.desktop(_templateObject4, DesktopGrid);
}, function (props) {
  return props.debug && '> * {\n      border: 1px dashed #666;\n    }';
});

Grid.propTypes = {
  debug: PropTypes.bool,
  theme: PropTypes.shape({
    media: PropTypes.shape({
      tablet: PropTypes.func,
      desktop: PropTypes.func
    }),
    grid: PropTypes.shape({
      columns: PropTypes.shape({
        mobile: PropTypes.number,
        tablet: PropTypes.number,
        desktop: PropTypes.number
      }),
      gutter: PropTypes.string,
      margins: PropTypes.shape({
        mobile: PropTypes.number,
        tablet: PropTypes.number,
        desktop: PropTypes.number
      })
    })
  })

  /** @component */
};

var _jsxFileName$1 = '/Users/mealeyst/projects/professional/mirage/src/icons/AIcon.base.js',
    _this$1 = undefined;

var _templateObject$6 = _taggedTemplateLiteral$6(['\n  width: ', ';\n'], ['\n  width: ', ';\n']);

function _taggedTemplateLiteral$6(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var AIcon = function AIcon(props) {
  return React__default.createElement(
    'svg',
    Object.assign({ viewBox: '0 0 80 80' }, props, {
      __source: {
        fileName: _jsxFileName$1,
        lineNumber: 7
      },
      __self: _this$1
    }),
    React__default.createElement('path', { d: 'M57.5,64.6V40.1c0-9.4,0.1-14.8-4.7-19.5c-7.2-7-18.5-7-25.6,0c-4.8,4.8-4.8,10.2-4.8,19.5v24.5h7.4V50.3h20.2 v14.4H57.5z M29.9,43.6V40c0-9.8,0.5-12.5,2.8-15.1c3.9-4,10.5-4,14.5,0l0,0C49.6,27.6,50,30.3,50,40v3.5H29.9z', __source: {
        fileName: _jsxFileName$1,
        lineNumber: 8
      },
      __self: _this$1
    })
  );
};

var BaseAIcon = styled__default(AIcon)(_templateObject$6, function (props) {
  return props.width;
});

BaseAIcon.propTypes = {
  width: PropTypes.string.isRequired
};

BaseAIcon.defaultProps = {
  width: '5.7142857143em'

  /** @component */
};

var _templateObject$7 = _taggedTemplateLiteral$7(['\n  fill: ', ';\n'], ['\n  fill: ', ';\n']);

function _taggedTemplateLiteral$7(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var AIcon$1 = styled__default(BaseAIcon)(_templateObject$7, function (props) {
  return props.theme.colors.rocketBlue;
});

AIcon$1.propTypes = {
  theme: PropTypes.shape({
    colors: PropTypes.shape({
      rocketBlue: PropTypes.string
    })
  }).isRequired

  /** @component */
};
// Wrapping the component in a styled tag so that we can refference it in other
// other styled components. See:
// https://www.styled-components.com/docs/advanced#caveat

var _jsxFileName$2 = '/Users/mealeyst/projects/professional/mirage/src/icons/BagIcon.js',
    _this$2 = undefined;

var _templateObject$8 = _taggedTemplateLiteral$8(['\n  width: ', ';\n  > polygon, path {\n    fill: none;\n    stroke: ', ';\n    stroke-linecap:round;\n    stroke-linejoin:round;\n  }\n  > g circle {\n    fill: ', ';\n  }\n  > g text {\n    fill: ', ';\n    font-family: ', ';\n    font-size: 8px;\n    font-weight: 500;\n  }\n'], ['\n  width: ', ';\n  > polygon, path {\n    fill: none;\n    stroke: ', ';\n    stroke-linecap:round;\n    stroke-linejoin:round;\n  }\n  > g circle {\n    fill: ', ';\n  }\n  > g text {\n    fill: ', ';\n    font-family: ', ';\n    font-size: 8px;\n    font-weight: 500;\n  }\n']),
    _templateObject2$1 = _taggedTemplateLiteral$8([''], ['']);

function _taggedTemplateLiteral$8(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var StyledBagIcon = styled__default.svg(_templateObject$8, function (props) {
  return props.width;
}, function (props) {
  return props.theme.colors.rocketBlue;
}, function (props) {
  return props.theme.colors.rocketBlue;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.fonts.primaryFont;
});

var BagIcon = function BagIcon(props) {
  return React__default.createElement(
    StyledBagIcon,
    Object.assign({ version: '1.1', viewBox: '0 0 19 15' }, props, {
      __source: {
        fileName: _jsxFileName$2,
        lineNumber: 26
      },
      __self: _this$2
    }),
    React__default.createElement('polygon', { points: '10.5,12.7 10.6,6.8 0.5,6.8 0.5,12.7 2.6,14.5 8.7,14.5', __source: {
        fileName: _jsxFileName$2,
        lineNumber: 27
      },
      __self: _this$2
    }),
    React__default.createElement('path', { d: 'M3.1,6.4v-1C3.1,4.1,4.2,3,5.5,3s2.4,1.1,2.4,2.4v1H3.1z', __source: {
        fileName: _jsxFileName$2,
        lineNumber: 28
      },
      __self: _this$2
    }),
    props.count && React__default.createElement(
      'g',
      {
        __source: {
          fileName: _jsxFileName$2,
          lineNumber: 30
        },
        __self: _this$2
      },
      React__default.createElement('circle', { cx: '13', cy: '6', r: '6', __source: {
          fileName: _jsxFileName$2,
          lineNumber: 31
        },
        __self: _this$2
      }),
      React__default.createElement(
        'text',
        { x: '12.75', y: '7', alignmentBaseline: 'middle', textAnchor: 'middle', __source: {
            fileName: _jsxFileName$2,
            lineNumber: 32
          },
          __self: _this$2
        },
        props.count
      )
    )
  );
};

BagIcon.propTypes = {
  count: PropTypes.number,
  width: PropTypes.string.isRequired
};

BagIcon.defaultProps = {
  width: '20px'

  /** @component */
};var BagIcon$1 = styled__default(BagIcon)(_templateObject2$1);

// Wrapping the component in a styled tag so that we can refference it in other
// other styled components. See:
// https://www.styled-components.com/docs/advanced#caveat

var _templateObject$9 = _taggedTemplateLiteral$9(['\n  width: 180px;\n  height: 180px;\n  border-radius: 10px;\n  background-color: ', ';\n  border: 1px solid #333;\n'], ['\n  width: 180px;\n  height: 180px;\n  border-radius: 10px;\n  background-color: ', ';\n  border: 1px solid #333;\n']);

function _taggedTemplateLiteral$9(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/** @component */
styled__default.div(_templateObject$9, function (props) {
  return colors$1[props.color];
});

var brandColors = {
  rocketBlue: '#0073D1',
  rocketBlueHover: '#0073EB',
  navy: '#00003C',
  yellow: '#F0FF02',
  yellowHover: '#D8E320',
  lightBlue0: '#EEFCFF',
  lightBlue1: '#BCE1F7',
  lightBlue2: '#76C2F3',
  lightBlue: ['#EEFCFF', '#BCE1F7', '#76C2F3'],
  electricBlue: '#080CF1',
  lightPink: '#FBDDE4',
  pink: '#FEACBE',
  white: '#FFFFFF'
};

var supportingColors = {
  black: '#000000',
  gray0: '#F3F3F3',
  gray1: '#F5F5F5',
  gray2: '#E6E6E6',
  gray3: '#D5D5D5',
  gray4: '#CFCFCF',
  gray: ['#F3F3F3', '#F5F5F5', '#E6E6E6', '#D5D5D5', '#CFCFCF'],
  red: '#FF511C',
  loading: '#BFBFBF'
};

var colors$1 = Object.assign({}, brandColors, supportingColors);

var _templateObject$a = _taggedTemplateLiteral$a(['\n    @media (min-width: ', 'em) {\n      ', '\n    }\n  '], ['\n    @media (min-width: ', 'em) {\n      ', '\n    }\n  ']);

function _taggedTemplateLiteral$a(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var sizes = {
  phone: 320,
  phoneMax: 414,
  tablet: 768,
  tabletMax: 960,
  laptop: 1280,
  desktop: 1440
};

var media = Object.keys(sizes).reduce(function (accumulator, label) {
  // use em in breakpoints to work properly cross-browser and support users
  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
  var emSize = sizes[label] / 16;
  accumulator[label] = function () {
    return styled.css(_templateObject$a, emSize, styled.css.apply(undefined, arguments));
  };
  return accumulator;
}, {});

var _templateObject$b = _taggedTemplateLiteral$b(['\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 400;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 400;\n  font-style: italic;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT-Italic.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 500;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481917384/web/fonts/DINOT-Medium.otf\');\n}\n\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 500;\n  font-style: italic;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481917385/web/fonts/DINOT-MediumItalic.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 800;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT-Bold.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 800;\n  font-style: italic;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT-BoldItalic.otf\');\n}\n\n@font-face {\n  font-family: \'din-cond\';\n  font-weight: 400;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481917384/web/fonts/DINOT-CondMedium.otf\');\n}\n'], ['\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 400;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 400;\n  font-style: italic;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT-Italic.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 500;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481917384/web/fonts/DINOT-Medium.otf\');\n}\n\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 500;\n  font-style: italic;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481917385/web/fonts/DINOT-MediumItalic.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 800;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT-Bold.otf\');\n}\n\n@font-face {\n  font-family: \'ff-din-web\';\n  font-weight: 800;\n  font-style: italic;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481915056/web/fonts/DINOT-BoldItalic.otf\');\n}\n\n@font-face {\n  font-family: \'din-cond\';\n  font-weight: 400;\n\n  src: url(\'https://res.cloudinary.com/roa-canon/raw/upload/v1481917384/web/fonts/DINOT-CondMedium.otf\');\n}\n']);

function _taggedTemplateLiteral$b(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/**
 * Global Fonts
**/
styled.injectGlobal(_templateObject$b);

var fontFamilies = {
  dinCondensed: '"din-cond", "din-condensed-web", Arial, sans-serif',
  dinRegular: '"ff-din-web", Helvetica, Arial, sans-serif',
  caslon: '"adobe-caslon-pro", Helvetica, Arial, serif'
};

var fontFamilies$1 = {
  headerFont: fontFamilies.dinCondensed,
  primaryFont: fontFamilies.dinRegular,
  secondaryFont: fontFamilies.caslon
};

var gridSettings = {
  columns: {
    mobile: 4,
    tablet: 10,
    desktop: 12
  },
  margins: {
    mobile: '3%',
    tablet: '7%',
    desktop: '7%'
  },
  gutter: '10px'
};

var theme = {
  colors: colors$1,
  fonts: fontFamilies$1,
  grid: gridSettings,
  fixedPosition: 'relative',
  media: media
};

var _jsxFileName$3 = '/Users/mealeyst/projects/professional/mirage/src/icons/Checkmark.js',
    _this$3 = undefined;

var _templateObject$c = _taggedTemplateLiteral$c(['\n0% {\n  width: 0;\n  stroke-dashoffset: 15;\n  stroke: transparent;\n}\n50% {\n  width ', ';\n  stroke-dashoffset: 15;\n  stroke: ', ';\n}\n100% {\n  width ', ';\n  transform: scaleX(1);\n  stroke-dashoffset: 0;\n}\n'], ['\n0% {\n  width: 0;\n  stroke-dashoffset: 15;\n  stroke: transparent;\n}\n50% {\n  width ', ';\n  stroke-dashoffset: 15;\n  stroke: ', ';\n}\n100% {\n  width ', ';\n  transform: scaleX(1);\n  stroke-dashoffset: 0;\n}\n']),
    _templateObject2$2 = _taggedTemplateLiteral$c(['\n  ', '\n  fill: none;\n  stroke: ', ';\n  stroke-width: 2;\n  > polyline {\n    stroke-linecap: round;\n    stroke-dasharray: 16;\n    stroke-dashoffset: 0;\n    animation-name: ', ';\n    animation-duration: 0.5s\n  }\n'], ['\n  ', '\n  fill: none;\n  stroke: ', ';\n  stroke-width: 2;\n  > polyline {\n    stroke-linecap: round;\n    stroke-dasharray: 16;\n    stroke-dashoffset: 0;\n    animation-name: ', ';\n    animation-duration: 0.5s\n  }\n']);

function _taggedTemplateLiteral$c(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var UnstyledCheckmark = function UnstyledCheckmark(props) {
  return React__default.createElement(
    'svg',
    Object.assign({}, props, { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 26.5 26.5', __source: {
        fileName: _jsxFileName$3,
        lineNumber: 9
      },
      __self: _this$3
    }),
    React__default.createElement('polyline', { points: '7,14 11,17.7 18.6,9.5', __source: {
        fileName: _jsxFileName$3,
        lineNumber: 10
      },
      __self: _this$3
    })
  );
};

var animateCheckmarkIn = styled.keyframes(_templateObject$c, function (props) {
  return props.width;
}, function (props) {
  return props.stroke;
}, function (props) {
  return props.width;
});

var Checkmark = styled__default(UnstyledCheckmark)(_templateObject2$2, function (props) {
  return props.width ? 'width: ' + props.width + ';' : '';
}, function (props) {
  return props.stroke;
}, animateCheckmarkIn);

Checkmark.propTypes = {
  stroke: PropTypes.string,
  width: PropTypes.string
};

Checkmark.defaultProps = {
  width: '1.571428571428571em',
  stroke: theme.colors.white

  /** @component */
};

var _jsxFileName$4 = '/Users/mealeyst/projects/professional/mirage/src/icons/Chevron.js',
    _this$4 = undefined;

var _templateObject$d = _taggedTemplateLiteral$d(['\n      0% {\n        transform: translateX(0px) ', ';\n      }\n      50% {\n        transform: translateX(', ') ', ';\n      }\n      100% {\n        transform: translateX(0px) ', ';\n      }\n    '], ['\n      0% {\n        transform: translateX(0px) ', ';\n      }\n      50% {\n        transform: translateX(', ') ', ';\n      }\n      100% {\n        transform: translateX(0px) ', ';\n      }\n    ']),
    _templateObject2$3 = _taggedTemplateLiteral$d(['\n      0% {\n        transform: translateY(0px) ', ';\n      }\n      50% {\n        transform: translateY(-2px) ', ';\n      }\n      100% {\n        transform: translateY(0px) ', ';\n      }\n    '], ['\n      0% {\n        transform: translateY(0px) ', ';\n      }\n      50% {\n        transform: translateY(-2px) ', ';\n      }\n      100% {\n        transform: translateY(0px) ', ';\n      }\n    ']),
    _templateObject3$1 = _taggedTemplateLiteral$d(['\n  animation: ', ';}\n'], ['\n  animation: ', ';}\n']),
    _templateObject4$1 = _taggedTemplateLiteral$d(['\n  width: 12px;\n  height: 8px;\n  fill:none;\n  stroke: ', ';\n  stroke-miterlimit:10;\n  stroke-width:5px;\n  ', '\n  cursor: pointer;\n  ', '\n'], ['\n  width: 12px;\n  height: 8px;\n  fill:none;\n  stroke: ', ';\n  stroke-miterlimit:10;\n  stroke-width:5px;\n  ', '\n  cursor: pointer;\n  ', '\n']);

function _taggedTemplateLiteral$d(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var BaseChevron = function BaseChevron(_ref) {
  var animated = _ref.animated,
      down = _ref.down,
      left = _ref.left,
      right = _ref.right,
      up = _ref.up,
      props = _objectWithoutProperties(_ref, ['animated', 'down', 'left', 'right', 'up']);

  return React__default.createElement(
    'svg',
    Object.assign({ viewBox: '0 0 48 24.12' }, props, {
      __source: {
        fileName: _jsxFileName$4,
        lineNumber: 7
      },
      __self: _this$4
    }),
    React__default.createElement('polyline', { points: '1 1 24 22.75 47 1', __source: {
        fileName: _jsxFileName$4,
        lineNumber: 8
      },
      __self: _this$4
    })
  );
};

var pulse = function pulse(props) {
  if (props.left || props.right) {
    return styled.keyframes(_templateObject$d, direction(props), pulseDirection(props), direction(props), direction(props));
  } else {
    return styled.keyframes(_templateObject2$3, direction(props), direction(props), direction(props));
  }
};

var pulseDirection = function pulseDirection(props) {
  if (props.right) {
    return '2px';
  } else if (props.left) {
    return '-2px';
  }
};

var animated = styled.css(_templateObject3$1, function (props) {
  return pulse(props) + ' 0.75s infinite';
});

var direction = function direction(props) {
  if (props.down) {
    return 'rotate(0deg)';
  } else if (props.right) {
    return 'rotate(90deg)';
  } else if (props.left) {
    return 'rotate(-90deg)';
  } else if (props.up) {
    return 'rotate(180deg)';
  }
};

var Chevron = styled__default(BaseChevron)(_templateObject4$1, function (props) {
  return props.theme.colors.rocketBlue;
}, function (props) {
  return 'transform: ' + direction(props) + ';';
}, function (props) {
  return props.animated ? animated : '';
});

var validateDirection = function validateDirection(props, propName, componentName) {
  var directions = ['down', 'left', 'right', 'up'];
  var propDirections = Object.keys(props).filter(function (key) {
    return directions.includes(key);
  });
  if (propDirections.length > 1) {
    return new Error('More than one direction prop was supplied to ' + componentName + ', only use one.');
  } else if (propDirections.length === 0) {
    return new Error('No direction prop was supplied to ' + componentName + ', please select one.');
  }
  //   return new Error(`Both the left and right prop were supplied to ${componentName}, only use one.`)
  // }
};

Chevron.propTypes = {
  animated: PropTypes.bool,
  down: validateDirection,
  left: validateDirection,
  right: validateDirection,
  theme: PropTypes.shape({
    colors: PropTypes.shape({
      rocketBlue: PropTypes.string.isRequired
    })
  }),
  up: validateDirection
};

Chevron.defaultProps = {};

// Wrapping the component in a styled tag so that we can refference it in other
// other styled components. See:
// https://www.styled-components.com/docs/advanced#caveat

var _jsxFileName$5 = '/Users/mealeyst/projects/professional/mirage/src/icons/CircleChevron.base.js',
    _this$5 = undefined;

var _templateObject$e = _taggedTemplateLiteral$e(['\n  width: ', ';\n  polyline {\n    stroke-linecap: round;\n    fill: none;\n  }\n'], ['\n  width: ', ';\n  polyline {\n    stroke-linecap: round;\n    fill: none;\n  }\n']);

function _taggedTemplateLiteral$e(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var CircleChev = function CircleChev(_ref) {
  var left = _ref.left,
      right = _ref.right,
      props = _objectWithoutProperties$1(_ref, ['left', 'right']);

  return React__default.createElement(
    'svg',
    Object.assign({}, props, { viewBox: '0 0 60 60', __source: {
        fileName: _jsxFileName$5,
        lineNumber: 7
      },
      __self: _this$5
    }),
    React__default.createElement('ellipse', { cx: '30', cy: '30', rx: '30', ry: '30', __source: {
        fileName: _jsxFileName$5,
        lineNumber: 8
      },
      __self: _this$5
    }),
    right && React__default.createElement('polyline', { points: '23.5,16.8 36.5,30 23.5,43.2', __source: {
        fileName: _jsxFileName$5,
        lineNumber: 9
      },
      __self: _this$5
    }),
    left && React__default.createElement('polyline', { points: '36.5,43.2 23.5,30 36.5,16.8', __source: {
        fileName: _jsxFileName$5,
        lineNumber: 10
      },
      __self: _this$5
    })
  );
};

var BaseChevron$1 = styled__default(CircleChev)(_templateObject$e, function (props) {
  return props.width;
});

var validateDirection$1 = function validateDirection(props, propName, componentName) {
  if (!props.left && !props.right) {
    return new Error('Either the left or right prop must be supplied to ' + componentName + '.');
  } else if (props.left && props.right) {
    return new Error('Both the left and right prop were supplied to ' + componentName + ', only select one.');
  }
};

CircleChev.propTypes = {
  className: PropTypes.string,
  left: validateDirection$1,
  right: validateDirection$1,
  width: PropTypes.string
};

CircleChev.defaultProps = {
  width: '40px'

  /** @component */
};

var _templateObject$f = _taggedTemplateLiteral$f(['\n  ellipse {\n    fill: ', ';\n  }\n  polyline {\n    stroke: ', ';\n    stroke-width: 4;\n  }\n'], ['\n  ellipse {\n    fill: ', ';\n  }\n  polyline {\n    stroke: ', ';\n    stroke-width: 4;\n  }\n']);

function _taggedTemplateLiteral$f(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var CircleChevron = styled__default(BaseChevron$1)(_templateObject$f, function (props) {
  return props.theme.colors.lightBlue[2];
}, function (props) {
  return props.theme.colors.white;
});

CircleChevron.propTypes = {
  theme: PropTypes.shape({
    colors: PropTypes.shape({
      lightBlue: PropTypes.array,
      white: PropTypes.string
    }).isRequired
  }),
  width: PropTypes.string

  /** @component */
};

var _templateObject$g = _taggedTemplateLiteral$g(['\n  fill: ', ';\n'], ['\n  fill: ', ';\n']);

function _taggedTemplateLiteral$g(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var GrayAIcon = styled__default(BaseAIcon)(_templateObject$g, function (props) {
  return props.theme.colors.gray[2];
});

GrayAIcon.propTypes = {
  theme: PropTypes.shape({
    colors: PropTypes.shape({
      gray: PropTypes.array
    })
  }).isRequired

  /** @component */
};
// Wrapping the component in a styled tag so that we can refference it in other
// other styled components. See:
// https://www.styled-components.com/docs/advanced#caveat

var _jsxFileName$6 = '/Users/mealeyst/projects/professional/mirage/src/icons/Logo.base.js',
    _this$6 = undefined;

var _templateObject$h = _taggedTemplateLiteral$h(['\n  0% {\n    transform: translateY(0px);\n  }\n  25% {\n    transform: translateY(-10px);\n  }\n  50% {\n    transform: translateY(0px);\n  }\n  75% {\n    transform: translateY(10px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n'], ['\n  0% {\n    transform: translateY(0px);\n  }\n  25% {\n    transform: translateY(-10px);\n  }\n  50% {\n    transform: translateY(0px);\n  }\n  75% {\n    transform: translateY(10px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n']),
    _templateObject2$4 = _taggedTemplateLiteral$h(['\n  > * {\n    animation-name: ', ';\n    animation-duration: 3s;\n    animation-iteration-count: infinite;\n    transform-origin: center;\n    &:nth-child(1) {\n      animation-delay: -2.8125s;\n    }\n    &:nth-child(2) {\n      animation-delay: -2.625s;\n    }\n    &:nth-child(3) {\n      animation-delay: -2.4375s;\n    }\n    &:nth-child(4) {\n      animation-delay: -2.25s;\n    }\n    &:nth-child(5) {\n      animation-delay: -2.0625s;\n    }\n    &:nth-child(6) {\n      animation-delay: -1.875s;\n    }\n    &:nth-child(7) {\n      animation-delay: -1.6875s;\n    }\n    &:nth-child(8) {\n      animation-delay: -1.5s;\n    }\n    &:nth-child(9) {\n      animation-delay: -1.3125s;\n    }\n    &:nth-child(10) {\n      animation-delay: -1.125s;\n    }\n    &:nth-child(11) {\n      animation-delay: -0.9375s;\n    }\n    &:nth-child(12) {\n      animation-delay: -0.75s;\n    }\n    &:nth-child(13) {\n      animation-delay: -0.5625s;\n    }\n    &:nth-child(14) {\n      animation-delay: -0.375s;\n    }\n    &:nth-child(15) {\n      animation-delay: -0.1875s;\n    }\n    &:nth-child(16) {\n      animation-delay: 0s;\n    }\n  }\n'], ['\n  > * {\n    animation-name: ', ';\n    animation-duration: 3s;\n    animation-iteration-count: infinite;\n    transform-origin: center;\n    &:nth-child(1) {\n      animation-delay: -2.8125s;\n    }\n    &:nth-child(2) {\n      animation-delay: -2.625s;\n    }\n    &:nth-child(3) {\n      animation-delay: -2.4375s;\n    }\n    &:nth-child(4) {\n      animation-delay: -2.25s;\n    }\n    &:nth-child(5) {\n      animation-delay: -2.0625s;\n    }\n    &:nth-child(6) {\n      animation-delay: -1.875s;\n    }\n    &:nth-child(7) {\n      animation-delay: -1.6875s;\n    }\n    &:nth-child(8) {\n      animation-delay: -1.5s;\n    }\n    &:nth-child(9) {\n      animation-delay: -1.3125s;\n    }\n    &:nth-child(10) {\n      animation-delay: -1.125s;\n    }\n    &:nth-child(11) {\n      animation-delay: -0.9375s;\n    }\n    &:nth-child(12) {\n      animation-delay: -0.75s;\n    }\n    &:nth-child(13) {\n      animation-delay: -0.5625s;\n    }\n    &:nth-child(14) {\n      animation-delay: -0.375s;\n    }\n    &:nth-child(15) {\n      animation-delay: -0.1875s;\n    }\n    &:nth-child(16) {\n      animation-delay: 0s;\n    }\n  }\n']),
    _templateObject3$2 = _taggedTemplateLiteral$h(['\n  width: ', ';\n  ', '\n'], ['\n  width: ', ';\n  ', '\n']);

function _taggedTemplateLiteral$h(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Logo = function Logo(props) {
  return React__default.createElement(
    'svg',
    Object.assign({ viewBox: '0 0 492 60' }, props, {
      __source: {
        fileName: _jsxFileName$6,
        lineNumber: 7
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-r', d: 'M52.6,39.4l-4.1-8.1h-3.6v8.1H42V20.2h7.5c3.6,0,6,2.4,6,5.6c0.1,2.4-1.5,4.5-3.8,5.1l4.4,8.5L52.6,39.4z M49.2,22.8h-4.3v6h4.3c2,0,3.3-1.1,3.3-3C52.5,24,51.2,22.8,49.2,22.8z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 8
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-o', d: 'M78,37.7c-2.8,2.8-7.3,2.8-10.1,0c-1.9-1.9-1.8-4-1.8-7.7c0-3.7,0-5.8,1.8-7.8c2.8-2.8,7.3-2.8,10.1,0 c1.9,1.9,1.8,4,1.8,7.7S79.8,35.8,78,37.7z M75.7,24c-1.6-1.6-4.1-1.6-5.7,0l0,0c-1,1-1.2,2.1-1.2,6s0.2,5,1.2,6 c1.6,1.6,4.1,1.6,5.7,0l0,0c1-1,1.1-2.1,1.1-6S76.7,25.1,75.7,24z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 10
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-c', d: 'M104.1,26.1h-3c-0.1-0.8-0.4-1.5-1-2.1c-1.6-1.6-4.1-1.6-5.7,0l0,0c-1,1-1.2,2.1-1.2,6s0.2,5,1.2,6 c1.6,1.6,4.1,1.6,5.7,0l0,0c0.6-0.6,0.9-1.3,1-2.1h3c-0.2,1.6-0.6,2.8-1.7,3.9c-2.8,2.8-7.3,2.8-10.1,0c-1.9-1.9-1.9-4-1.9-7.7 s0-5.8,1.9-7.7c2.8-2.8,7.3-2.8,10.1,0C103.5,23.4,103.9,24.6,104.1,26.1', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 13
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-k', d: 'M126.5,39.6l-5.4-9.5l-3.2,3.9v5.6h-2.9V20.4h2.9V30l7.9-9.7h3.6l-6.2,7.6l6.9,11.7H126.5z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 16
      },
      __self: _this$6
    }),
    React__default.createElement('polygon', { className: 'letter letter-e', points: '142.9,23.1 152.3,23.1 152.3,20.5 140,20.5 140,20.5 140,39.7 142.6,39.7 152.3,39.7 152.3,37.1 142.9,37.1 142.9,31.4 151.4,31.4 151.4,28.8 142.9,28.8 142.9,28.7', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 17
      },
      __self: _this$6
    }),
    React__default.createElement('polygon', { className: 'letter letter-t', points: '162.3,20.4 162.3,23.1 167.7,23.1 167.7,39.7 170.5,39.7 170.5,23.1 175.8,23.1 175.8,20.4', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 19
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-s', d: 'M191.6,39.8c-2.9,0-5-0.7-6.8-2.6l2-1.9c1.4,1.4,3,1.8,4.9,1.8c2.5,0,4-1.1,4-3c0-0.8-0.2-1.5-0.8-2 c-0.5-0.4-1-0.6-2.1-0.8l-2.3-0.4c-1.4-0.1-2.6-0.7-3.6-1.6c-1-0.9-1.4-2.1-1.4-3.7c0-3.3,2.4-5.6,6.4-5.6c2.6,0,4.3,0.6,6,2.2 l-1.9,1.8c-1.2-1.1-2.6-1.5-4.2-1.5c-2.3,0-3.5,1.3-3.5,3c0,0.7,0.2,1.3,0.7,1.8c0.6,0.5,1.4,0.8,2.2,0.9l2.2,0.3 c1.8,0.3,2.8,0.7,3.6,1.4c1,0.9,1.6,2.3,1.6,4C198.5,37.7,195.6,39.8,191.6,39.8z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 20
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-o', d: 'M234.3,37.7c-2.8,2.8-7.3,2.8-10.1,0c-1.9-1.9-1.9-4-1.9-7.7s0-5.8,1.9-7.7c2.8-2.8,7.3-2.8,10.1,0 c1.9,1.9,1.8,4,1.8,7.7S236.2,35.8,234.3,37.7z M232.1,24c-1.6-1.6-4.1-1.6-5.7,0l0,0c-1,1-1.1,2.1-1.1,6s0.2,5,1.1,6 c1.6,1.6,4.1,1.6,5.7,0l0,0c1-1,1.1-2.1,1.1-6S233,25.1,232.1,24z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 24
      },
      __self: _this$6
    }),
    React__default.createElement('polygon', { className: 'letter letter-f', points: '250.3,31.4 258.8,31.4 258.8,28.7 250.3,28.7 250.3,23.1 259.7,23.1 259.7,20.4 247.4,20.4 247.4,39.7 250.3,39.7', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 27
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-a', d: 'M296.6,39.7V30c0-3.7,0-5.8-1.8-7.7c-2.8-2.8-7.3-2.8-10.1,0c-1.9,1.9-1.9,4-1.9,7.7v9.7h2.9V34h8v5.7 C293.6,39.7,296.6,39.7,296.6,39.7z M285.6,31.4V30c0-3.9,0.2-5,1.1-6c1.6-1.6,4.2-1.6,5.7,0l0,0c1,1,1.1,2.1,1.1,6v1.4H285.6z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 29
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-w', d: 'M322.5,39.7H320l-3.9-13.5l-3.9,13.5h-2.6l-5-19.3h3.1l3.4,13.7l3.9-13.7h2.4l3.9,13.7l3.4-13.7h3.1L322.5,39.7 z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 31
      },
      __self: _this$6
    }),
    React__default.createElement('polygon', { className: 'letter letter-e', points: '340.6,23.1 350,23.1 350,20.4 337.7,20.4 337.7,20.5 337.7,39.7 340.3,39.7 350,39.7 350,37 340.6,37 340.6,31.4 349.1,31.4 349.1,28.7 340.6,28.7 340.6,28.7', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 33
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-s', d: 'M366.4,39.8c-2.9,0-5-0.7-6.8-2.6l2-1.9c1.4,1.4,3,1.8,4.9,1.8c2.5,0,4-1.1,4-3c0-0.8-0.2-1.5-0.8-2 c-0.5-0.4-1-0.6-2.1-0.8l-2.3-0.3c-1.4-0.1-2.6-0.7-3.6-1.6c-1-0.9-1.4-2.1-1.4-3.7c0-3.4,2.4-5.6,6.4-5.6c2.6,0,4.3,0.6,6,2.2 l-1.9,1.8c-1.2-1.1-2.6-1.5-4.2-1.5c-2.3,0-3.5,1.3-3.5,3c0,0.7,0.2,1.3,0.7,1.8c0.6,0.5,1.4,0.8,2.2,0.9l2.2,0.3 c1.8,0.3,2.8,0.7,3.6,1.4c1,0.9,1.6,2.3,1.6,4C373.3,37.7,370.5,39.8,366.4,39.8z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 35
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-o', d: 'M395.7,37.8c-1.4,1.4-3.2,2.1-5.1,2.1c-1.9,0-3.7-0.7-5.1-2c-1.9-1.9-1.9-4-1.9-7.7s0-5.8,1.9-7.7 c1.3-1.4,3.2-2.1,5.1-2.1c1.9,0,3.8,0.7,5.1,2c1.9,1.9,1.8,4,1.8,7.7S397.6,35.9,395.7,37.8z M393.5,24.1c-1.6-1.6-4.2-1.6-5.7,0 l0,0c-1,1-1.1,2.1-1.1,6s0.2,5,1.1,6c1.6,1.6,4.1,1.6,5.7,0l0,0c1-1,1.1-2.1,1.1-6S394.4,25.1,393.5,24.1z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 39
      },
      __self: _this$6
    }),
    React__default.createElement('path', { className: 'letter letter-m', d: 'M422.8,39.7V26.8l-4.4,9.4h-2.2l-4.6-9.4v12.9h-2.9V20.4h2.9l5.6,12l5.5-12h2.9v19.2L422.8,39.7L422.8,39.7z', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 42
      },
      __self: _this$6
    }),
    React__default.createElement('polygon', { className: 'letter letter-e', points: '440.5,23.1 449.9,23.1 449.9,20.4 437.6,20.4 437.6,20.5 437.6,39.7 440.2,39.7 449.9,39.7 449.9,37 440.5,37 440.5,31.4 449,31.4 449,28.7 440.5,28.7 440.5,28.7', __source: {
        fileName: _jsxFileName$6,
        lineNumber: 43
      },
      __self: _this$6
    })
  );
};

var pulse$1 = styled.keyframes(_templateObject$h);

var animated$1 = styled.css(_templateObject2$4, pulse$1);

var BaseLogo = styled__default(Logo)(_templateObject3$2, function (props) {
  return props.width;
}, function (props) {
  return props.animated ? animated$1 : '';
});

Logo.propTypes = {
  width: PropTypes.string

  /** @component */
};
// Wrapping the component in a styled tag so that we can refference it in other
// other styled components. See:
// https://www.styled-components.com/docs/advanced#caveat

var _templateObject$i = _taggedTemplateLiteral$i(['\n  fill: ', ';\n'], ['\n  fill: ', ';\n']);

function _taggedTemplateLiteral$i(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var GrayLogo = styled__default(BaseLogo)(_templateObject$i, function (props) {
  return props.theme.colors.gray[3];
});

GrayLogo.propTypes = {
  width: PropTypes.string

  /** @component */
};
// Wrapping the component in a styled tag so that we can refference it in other
// other styled components. See:
// https://www.styled-components.com/docs/advanced#caveat

var _jsxFileName$7 = '/Users/mealeyst/projects/professional/mirage/src/icons/Hamburger.js',
    _this$7 = undefined;

var _templateObject$j = _taggedTemplateLiteral$j(['\n  0% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -322;\n  }\n'], ['\n  0% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -322;\n  }\n']),
    _templateObject2$5 = _taggedTemplateLiteral$j(['\n  0% {\n    stroke-dashoffset: -322;\n  }\n  100% {\n    stroke-dashoffset: 0;\n  }\n'], ['\n  0% {\n    stroke-dashoffset: -322;\n  }\n  100% {\n    stroke-dashoffset: 0;\n  }\n']),
    _templateObject3$3 = _taggedTemplateLiteral$j(['\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n'], ['\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n']),
    _templateObject4$2 = _taggedTemplateLiteral$j(['\n  100% {\n    opacity: 1;\n  }\n  0% {\n    opacity: 0;\n  }\n'], ['\n  100% {\n    opacity: 1;\n  }\n  0% {\n    opacity: 0;\n  }\n']),
    _templateObject5 = _taggedTemplateLiteral$j(['\n  33.3333333333%, 66.6666666666% {\n    opacity: 0;\n  }\n  0%, 100% {\n    opacity: 1;\n  }\n'], ['\n  33.3333333333%, 66.6666666666% {\n    opacity: 0;\n  }\n  0%, 100% {\n    opacity: 1;\n  }\n']),
    _templateObject6 = _taggedTemplateLiteral$j(['\n  0%, 100% {\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dashoffset: -322;\n  }\n'], ['\n  0%, 100% {\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dashoffset: -322;\n  }\n']),
    _templateObject7 = _taggedTemplateLiteral$j(['\n  .line {\n    stroke-dashoffset: 0;\n  }\n  .hamburger-outerline {\n    animation: ', ' 2s ease-in-out infinite;\n  }\n  .hamburger-innerline {\n    animation: ', ' 2s ease-in-out infinite;\n  }\n'], ['\n  .line {\n    stroke-dashoffset: 0;\n  }\n  .hamburger-outerline {\n    animation: ', ' 2s ease-in-out infinite;\n  }\n  .hamburger-innerline {\n    animation: ', ' 2s ease-in-out infinite;\n  }\n']),
    _templateObject8 = _taggedTemplateLiteral$j(['\n  .line {\n    stroke-dashoffset: 0;\n  }\n  .hamburger-outerline {\n    animation: ', ' 1s ease-in-out;\n  }\n  .hamburger-innerline {\n    animation: ', ' 1s ease-in-out;\n  }\n'], ['\n  .line {\n    stroke-dashoffset: 0;\n  }\n  .hamburger-outerline {\n    animation: ', ' 1s ease-in-out;\n  }\n  .hamburger-innerline {\n    animation: ', ' 1s ease-in-out;\n  }\n']),
    _templateObject9 = _taggedTemplateLiteral$j(['\n  .hamburger-outerline {\n    animation: ', ' 1s ease-in-out;\n    stroke-dashoffset: -322;\n  }\n  .hamburger-innerline {\n    animation: ', ' 1s ease-in-out;\n    stroke-dashoffset: 125;\n  }\n'], ['\n  .hamburger-outerline {\n    animation: ', ' 1s ease-in-out;\n    stroke-dashoffset: -322;\n  }\n  .hamburger-innerline {\n    animation: ', ' 1s ease-in-out;\n    stroke-dashoffset: 125;\n  }\n']),
    _templateObject10 = _taggedTemplateLiteral$j(['\n        stroke: ', ';\n      '], ['\n        stroke: ', ';\n      ']),
    _templateObject11 = _taggedTemplateLiteral$j(['\n          stroke: ', ';\n        '], ['\n          stroke: ', ';\n        ']),
    _templateObject12 = _taggedTemplateLiteral$j(['\n  width: 3em;\n  height: 3em;\n  max-width: 100%;\n  max-height: 100%;\n  cursor: pointer;\n\n.line {\n  fill:none;\n  stroke-linecap:round;\n  stroke-miterlimit:10;\n  stroke-width: 8;\n  ', '\n}\n\n//Closed\n', '\n\n//Open\n', '\n\n//Animated\n', '\n\n\n.hamburger-innerline {\n  stroke-dasharray:125;\n}\n.hamburger-outerline {\n  stroke-dasharray:100 322;\n}\n'], ['\n  width: 3em;\n  height: 3em;\n  max-width: 100%;\n  max-height: 100%;\n  cursor: pointer;\n\n.line {\n  fill:none;\n  stroke-linecap:round;\n  stroke-miterlimit:10;\n  stroke-width: 8;\n  ', '\n}\n\n//Closed\n', '\n\n//Open\n', '\n\n//Animated\n', '\n\n\n.hamburger-innerline {\n  stroke-dasharray:125;\n}\n.hamburger-outerline {\n  stroke-dasharray:100 322;\n}\n']),
    _templateObject13 = _taggedTemplateLiteral$j([''], ['']);

function _taggedTemplateLiteral$j(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var animateToX = styled.keyframes(_templateObject$j);

var animateFromX = styled.keyframes(_templateObject2$5);

var removeCenterLine = styled.keyframes(_templateObject3$3);

var addCenterLine = styled.keyframes(_templateObject4$2);

var animateCenterLine = styled.keyframes(_templateObject5);

var animateX = styled.keyframes(_templateObject6);

var animated$2 = styled.css(_templateObject7, animateX, animateCenterLine);

var closed = styled.css(_templateObject8, animateFromX, addCenterLine);

var open = styled.css(_templateObject9, animateToX, removeCenterLine);

var colorStroke = function colorStroke(strokeColor) {
  switch (strokeColor) {
    default:
      return styled.css(_templateObject10, function (props) {
        return props.theme.colors.rocketBlue;
      });
    case 'white':
      return styled.css(_templateObject10, function (props) {
        return props.theme.colors.white;
      });
    case 'navy':
      return styled.css(_templateObject11, function (props) {
        return props.theme.colors.navy;
      });
  }
};

var StyledHamburger = styled__default.svg(_templateObject12, function (props) {
  return colorStroke(props.strokeColor);
}, function (props) {
  return !props.open && props.open !== undefined && closed;
}, function (props) {
  return props.open && open;
}, function (props) {
  return props.animated && animated$2;
});

StyledHamburger.propTypes = {
  open: PropTypes.bool,
  animated: PropTypes.bool
};

StyledHamburger.defaultProps = {
  strokeColor: 'blue'
};

var topPoints = 'M2,74.21H102c51.54,1.7,72.86-35.69,59.31-58.6S93.4-3.52,\n89.36,69.35L18.64,140.06';
var bottomPoints = 'M2,138.79H102c51.54-1.7,72.86,35.69,59.31,58.6s-67.91,\n19.13-72-53.74L18.64,72.94';

var Hamburger = function Hamburger(props) {
  return React__default.createElement(
    StyledHamburger,
    Object.assign({}, props, {
      xmlns: 'http://www.w3.org/2000/svg',
      viewBox: '0 0 167.29 210.66', __source: {
        fileName: _jsxFileName$7,
        lineNumber: 160
      },
      __self: _this$7
    }),
    React__default.createElement('path', {
      className: 'line hamburger-outerline',
      d: topPoints, __source: {
        fileName: _jsxFileName$7,
        lineNumber: 164
      },
      __self: _this$7
    }),
    React__default.createElement('line', {
      className: 'line hamburger-innerline',
      x1: '2',
      y1: '105.54',
      x2: '102',
      y2: '105.54', __source: {
        fileName: _jsxFileName$7,
        lineNumber: 167
      },
      __self: _this$7
    }),
    React__default.createElement('path', {
      className: 'line hamburger-outerline',
      d: bottomPoints, __source: {
        fileName: _jsxFileName$7,
        lineNumber: 173
      },
      __self: _this$7
    })
  );
};

/** @component */
var Hamburger$1 = styled__default(Hamburger)(_templateObject13);

// Wrapping the component in a styled tag so that we can refference it in other
// other styled components. See:
// https://www.styled-components.com/docs/advanced#caveat

var _templateObject$k = _taggedTemplateLiteral$k(['\n  fill: ', ';\n'], ['\n  fill: ', ';\n']);

function _taggedTemplateLiteral$k(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Logo$1 = styled__default(BaseLogo)(_templateObject$k, function (props) {
  return props.theme.colors.rocketBlue;
});

Logo$1.pro