@jaws/fractals
Version:
A React UI Library by RetailMeNot
698 lines (665 loc) • 138 kB
text/typescript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var rxjs = require('rxjs');
var lodash = require('lodash');
var grid = require('@rebass/grid');
var polished = require('polished');
var classNames = _interopDefault(require('classnames'));
var React = require('react');
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
var colors = {
neutrals: {
charcoal: {
base: '#323232',
light: '#595959',
dark: '#000000',
},
ash: {
base: '#A6A6A6',
light: '#D3D3D3',
dark: '#808080',
},
silver: {
base: '#F1F1F1',
light: '#FAFAFA',
dark: '#E7E7E7',
},
lavenderWhispers: {
base: '#F7F5FC',
light: '#FBFAFF',
dark: '#F1EEFA',
},
white: {
base: '#FFFFFF',
},
},
main: {
grapePurchase: {
base: '#602D6C',
light: '#91609C',
dark: '#4B2354',
},
rx: {
base: '#F23466',
light: '#FF6B9C',
dark: '#CC2D52',
},
genie: {
base: '#4C18F3',
light: '#7855D9',
dark: '#42199A',
},
},
accent: {
savvyCyan: {
base: '#0998D6',
light: '#66CCFF',
dark: '#0074A6',
},
tealBreaker: {
base: '#00CCCD',
light: '#00E0D1',
dark: '#00BDBD',
},
},
secondary: {
dealEnvy: {
base: '#14A382',
light: '#00CDAD',
dark: '#268068',
},
flashPink: {
base: '#DF206C',
light: '#E665A1',
dark: '#B81D5B',
},
cyberMango: {
base: '#EB663D',
light: '#FA9F5A',
dark: '#C74E30',
},
goldMine: {
base: '#F5A623',
light: '#FFC761',
dark: '#CC861D',
},
fireSale: {
base: '#EA4545',
light: '#F16667',
dark: '#CC3B3B',
},
},
alert: {
error: {
base: '#CC3B3B',
},
success: {
base: '#268068',
},
},
rx: {
purple: {
base: '#A678B5',
},
},
};
var baseFontSize = 16;
var variables = {
baseFontSize: 16,
fontFamily: 'Avenir Next, Segoe UI, Helvetica, Roboto, sans-serif',
borderRadius: baseFontSize / 4 + "px",
};
// VARIABLES
var baseFontSize$1 = variables.baseFontSize, fontFamily = variables.fontFamily;
var fonts = {
baseFontSize: baseFontSize$1,
fontFamily: fontFamily,
paragraph: {
base: {
fontSize: baseFontSize$1 + "px",
lineHeight: baseFontSize$1 * 1.5 + "px",
fontWeight: 'normal',
},
informational: {
fontSize: baseFontSize$1 * 0.875 + "px",
lineHeight: baseFontSize$1 * 1.125 + "px",
fontWeight: 'normal',
},
},
navigation: {
base: {
fontSize: baseFontSize$1 * .75 + "px",
lineHeight: baseFontSize$1 + "px",
fontWeight: '500',
},
menu: {
fontSize: baseFontSize$1 * .875 + "px",
lineHeight: baseFontSize$1 + "px",
small: {
base: {
fontSize: baseFontSize$1 * 0.75 + "px",
fontWeight: '500',
},
active: {
fontWeight: '700',
},
},
large: {
base: {
fontWeight: '600',
},
active: {
fontWeight: '700',
},
},
},
},
heading: {
h4: {
fontSize: baseFontSize$1 * 1.5 + "px",
lineHeight: baseFontSize$1 * 2 + "px",
fontWeight: 'normal',
},
h3: {
fontSize: baseFontSize$1 * 1.75 + "px",
lineHeight: baseFontSize$1 * 2 + "px",
fontWeight: 'normal',
},
h2: {
fontSize: baseFontSize$1 * 2 + "px",
lineHeight: baseFontSize$1 * 2.5 + "px",
fontWeight: 'normal',
},
h1: {
fontSize: baseFontSize$1 * 2.25 + "px",
lineHeight: baseFontSize$1 * 2.5 + "px",
fontWeight: 'normal',
},
},
typography: {
caption: {
fontSize: baseFontSize$1 * 0.75 + "px",
lineHeight: baseFontSize$1 + "px",
fontWeight: '500',
},
ui: {
fontSize: baseFontSize$1 * 0.875 + "px",
lineHeight: baseFontSize$1 * 1.125 + "px",
fontWeight: 'normal',
},
body: {
fontSize: baseFontSize$1 + "px",
lineHeight: baseFontSize$1 * 1.5 + "px",
fontWeight: 'normal',
},
subHeading: {
fontSize: baseFontSize$1 * 1.125 + "px",
lineHeight: baseFontSize$1 * 1.5 + "px",
fontWeight: 'normal',
},
subHeadingLarge: {
fontSize: baseFontSize$1 * 1.25 + "px",
lineHeight: baseFontSize$1 * 1.5 + "px",
fontWeight: 'normal',
},
header: {
small: {
fontSize: baseFontSize$1 * 1.5 + "px",
lineHeight: baseFontSize$1 * 2 + "px",
fontWeight: 'normal',
},
medium: {
fontSize: baseFontSize$1 * 1.75 + "px",
lineHeight: baseFontSize$1 * 2 + "px",
fontWeight: 'normal',
},
large: {
fontSize: baseFontSize$1 * 2 + "px",
lineHeight: baseFontSize$1 * 2.5 + "px",
fontWeight: 'normal',
},
extraLarge: {
fontSize: baseFontSize$1 * 2.25 + "px",
lineHeight: baseFontSize$1 * 2.5 + "px",
fontWeight: 'normal',
},
},
display: {
small: {
fontSize: baseFontSize$1 * 2.5 + "px",
lineHeight: baseFontSize$1 * 3 + "px",
fontWeight: 'normal',
},
medium: {
fontSize: baseFontSize$1 * 3 + "px",
lineHeight: baseFontSize$1 * 3.25 + "px",
fontWeight: 'normal',
},
large: {
fontSize: baseFontSize$1 * 3.5 + "px",
lineHeight: baseFontSize$1 * 4 + "px",
fontWeight: 'normal',
},
extraLarge: {
fontSize: baseFontSize$1 * 4 + "px",
lineHeight: baseFontSize$1 * 4.5 + "px",
fontWeight: 'normal',
},
},
},
};
var base = variables.baseFontSize;
var sizes = {
xs: base / 4 + "px",
sm: base / 2 + "px",
md: base * 1 + "px",
lg: base * 2 + "px",
xl: base * 3 + "px",
};
var sizes$1 = {
padding: __assign({}, sizes),
margin: __assign({}, sizes),
border: {
radius: {
base: '3px',
},
width: {
base: '1px',
},
style: {
base: 'solid',
},
},
};
var headingRules = function (hLevel) { return "\n " + hLevel + " {\n font-weight: " + fonts.heading["" + hLevel].fontWeight + ";\n line-height: " + fonts.heading["" + hLevel].lineHeight + ";\n font-size: " + fonts.heading["" + hLevel].fontSize + ";\n }\n"; };
var typography = styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n\n p {\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n }\n\n a {\n text-decoration: none;\n color: ", ";\n }\n"], ["\n ", "\n\n p {\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n }\n\n a {\n text-decoration: none;\n color: ", ";\n }\n"])), Object.keys(fonts.heading).slice().map(headingRules), fonts.fontFamily, fonts.paragraph.base.fontSize, fonts.paragraph.base.lineHeight, fonts.paragraph.base.fontWeight, colors.accent.savvyCyan.dark);
var GlobalCSS$$1 = styled.createGlobalStyle(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n html {\n color: ", ";\n font-size: ", "px;\n letter-spacing: 0;\n line-height: 1.357142857rem;\n }\n\n body {\n font-family: Avenir Next, Segoe UI, Helvetica, Roboto, sans-serif;\n height: 100vh;\n }\n\n ", "\n"], ["\n html {\n color: ", ";\n font-size: ", "px;\n letter-spacing: 0;\n line-height: 1.357142857rem;\n }\n\n body {\n font-family: Avenir Next, Segoe UI, Helvetica, Roboto, sans-serif;\n height: 100vh;\n }\n\n ", "\n"])), colors.neutrals.charcoal.base, fonts.baseFontSize, typography);
var templateObject_1, templateObject_2;
var NormalizeCSS = styled.createGlobalStyle(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n html {\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n margin: 0;\n }\n\n main {\n display: block;\n }\n\n hr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n }\n\n pre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n }\n\n a {\n background-color: transparent;\n }\n\n abbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n }\n\n b,\n strong {\n font-weight: bolder;\n }\n\n code,\n kbd,\n samp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n }\n\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n img {\n border-style: none;\n }\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n }\n\n\n button,\n input { /* 1 */\n overflow: visible;\n }\n\n button,\n select { /* 1 */\n text-transform: none;\n }\n\n\n button,\n [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button;\n }\n\n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n button:-moz-focusring,\n [type=\"button\"]:-moz-focusring,\n [type=\"reset\"]:-moz-focusring,\n [type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n }\n\n fieldset {\n padding: 0.35em 0.75em 0.625em;\n }\n\n legend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n }\n\n progress {\n vertical-align: baseline;\n }\n\n textarea {\n overflow: auto;\n }\n\n [type=\"checkbox\"],\n [type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n }\n\n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n }\n\n\n [type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n }\n\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n }\n\n details {\n display: block;\n }\n\n summary {\n display: list-item;\n }\n\n template {\n display: none;\n }\n\n /**\n * Add the correct display in IE 10.\n */\n\n [hidden] {\n display: none;\n }\n"], ["\n html {\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n margin: 0;\n }\n\n main {\n display: block;\n }\n\n hr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n }\n\n pre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n }\n\n a {\n background-color: transparent;\n }\n\n abbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n }\n\n b,\n strong {\n font-weight: bolder;\n }\n\n code,\n kbd,\n samp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n }\n\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n img {\n border-style: none;\n }\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n }\n\n\n button,\n input { /* 1 */\n overflow: visible;\n }\n\n button,\n select { /* 1 */\n text-transform: none;\n }\n\n\n button,\n [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button;\n }\n\n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n button:-moz-focusring,\n [type=\"button\"]:-moz-focusring,\n [type=\"reset\"]:-moz-focusring,\n [type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n }\n\n fieldset {\n padding: 0.35em 0.75em 0.625em;\n }\n\n legend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n }\n\n progress {\n vertical-align: baseline;\n }\n\n textarea {\n overflow: auto;\n }\n\n [type=\"checkbox\"],\n [type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n }\n\n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n }\n\n\n [type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n }\n\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n }\n\n details {\n display: block;\n }\n\n summary {\n display: list-item;\n }\n\n template {\n display: none;\n }\n\n /**\n * Add the correct display in IE 10.\n */\n\n [hidden] {\n display: none;\n }\n"])));
var templateObject_1$1;
/* tslint:disable max-line-length */
var DefaultAvatar = function () { return (React.createElement("svg", { width: "36px", height: "36px", viewBox: "0 0 22 22", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
React.createElement("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
React.createElement("path", { d: "M22,20.4267753 C22,21.2958994 21.296,22 20.4285714,22 L1.57142857,22 C0.704,22 0,21.2958994 0,20.4267753 L0,18.950993 C0,15.4242035 2.805,12.5590799 6.25428571,12.5590799 L6.292,12.5590799 L6.292,12.5575082 C7.60728571,13.550793 9.22585714,14.162166 11,14.162166 C12.7741429,14.162166 14.3927143,13.550793 15.708,12.5575082 L15.708,12.5590799 L15.7457143,12.5590799 C19.195,12.5590799 22,15.4242035 22,18.950993 L22,20.4267753 Z M11,0 C14.4712857,0 17.2857143,2.817974 17.2857143,6.29447064 C17.2857143,9.77096728 14.4712857,12.5889413 11,12.5889413 C7.52871429,12.5889413 4.71428571,9.77096728 4.71428571,6.29447064 C4.71428571,2.817974 7.52871429,0 11,0 Z", id: "Combined-Shape", fill: "#A6A6A6" })))); };
/* tslint:enable max-line-length */
var StyledAvatar = styled__default.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n border: solid 0.1875rem ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n height: 2rem;\n width: 2rem;\n border-radius: 50%;\n\n .inner-border {\n flex: 0 0 1.625rem;\n width: 1.625rem;\n height: 1.625rem;\n font-family: ", ";\n font-size: .75rem;\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n overflow: hidden;\n }\n\n svg {\n justify-self: baseline;\n height: 1.5rem;\n margin-bottom: -0.375rem;\n }\n"], ["\n border: solid 0.1875rem ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n height: 2rem;\n width: 2rem;\n border-radius: 50%;\n\n .inner-border {\n flex: 0 0 1.625rem;\n width: 1.625rem;\n height: 1.625rem;\n font-family: ", ";\n font-size: .75rem;\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n overflow: hidden;\n }\n\n svg {\n justify-self: baseline;\n height: 1.5rem;\n margin-bottom: -0.375rem;\n }\n"])), polished.rgba(colors.neutrals.white.base, .4), fonts.fontFamily, colors.neutrals.silver.base, colors.neutrals.charcoal.light);
var DefaultProps = {};
var Avatar = function (_a) {
if (_a === void 0) { _a = DefaultProps; }
var className = _a.className, src = _a.src, label = _a.label, props = __rest(_a, ["className", "src", "label"]);
return (React.createElement(StyledAvatar, __assign({ className: classNames(className) }, props),
React.createElement("div", { className: "inner-border" }, label
? label.substr(0, 2).toUpperCase()
: React.createElement(DefaultAvatar, null))));
};
Avatar.defaultProps = DefaultProps;
var templateObject_1$2;
var StyledList = styled__default.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .title {\n margin: 0;\n padding: ", ";\n font-family: ", ";\n font-size: .75rem;\n font-weight: 600;\n color: ", ";\n line-height: .75rem;\n }\n"], ["\n .title {\n margin: 0;\n padding: ", ";\n font-family: ", ";\n font-size: .75rem;\n font-weight: 600;\n color: ", ";\n line-height: .75rem;\n }\n"])), sizes$1.padding.md, fonts.fontFamily, colors.neutrals.ash.dark);
var DefaultProps$1 = {};
var List = function (_a) {
if (_a === void 0) { _a = DefaultProps$1; }
var className = _a.className, children = _a.children, title = _a.title, props = __rest(_a, ["className", "children", "title"]);
return (React.createElement(StyledList, __assign({ className: classNames(className) }, props),
title && React.createElement("p", { className: "title" }, title),
children));
};
List.defaultProps = DefaultProps$1;
var templateObject_1$3;
var StyledItem = styled__default.a(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n border-radius: ", ";\n padding: ", " ", ";\n cursor: pointer;\n color: ", ";\n font-family: ", ";\n font-weight: normal;\n text-decoration: none;\n line-height: 1.5rem;\n transition: background-color 500ms;\n\n &:hover {\n background-color: rgba(0, 0, 0, .05);\n }\n"], ["\n display: flex;\n border-radius: ", ";\n padding: ", " ", ";\n cursor: pointer;\n color: ", ";\n font-family: ", ";\n font-weight: normal;\n text-decoration: none;\n line-height: 1.5rem;\n transition: background-color 500ms;\n\n &:hover {\n background-color: rgba(0, 0, 0, .05);\n }\n"])), variables.borderRadius, sizes$1.padding.sm, sizes$1.padding.md, colors.neutrals.charcoal.base, fonts.fontFamily);
var DefaultProps$2 = {};
var Item = function (_a) {
if (_a === void 0) { _a = DefaultProps$2; }
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
return (React.createElement(StyledItem, __assign({ className: classNames(className) }, props), children));
};
Item.defaultProps = DefaultProps$2;
var templateObject_1$4;
var StyledAutoComplete = styled__default.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: relative;\n border: solid 1px ", ";\n border-radius: .25rem;\n transition: border-color 500ms;\n display: flex;\n background: ", ";\n align-items: center;\n\n &:hover {\n border: solid thin ", ";\n }\n\n &:active,\n &:focus {\n border: solid thin ", ";\n }\n\n .auto-complete-input {\n flex: 1;\n font-family: ", ";\n font-weight: 500;\n border: none;\n border-radius: .25rem;\n background-color: transparent;\n line-height: 1rem;\n overflow: hidden;\n\n color: ", ";\n\n padding: ", ";\n\n width: ", ";\n\n font-size: ", ";\n }\n\n .auto-complete-results {\n z-index: 2;\n position: absolute;\n top: ", ";\n width: 100%;\n background-color: ", ";\n box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12);\n border-radius: 0 0 .25rem .25rem;\n border-top: solid 1px ", ";\n transition: border-top-color 500ms;\n\n &:hover {\n border-top-color: ", ";\n }\n }\n\n .auto-complete-prefix {\n z-index: 1;\n flex: 0 0 1.5rem;\n }\n /* TODO: suffix */\n"], ["\n position: relative;\n border: solid 1px ", ";\n border-radius: .25rem;\n transition: border-color 500ms;\n display: flex;\n background: ", ";\n align-items: center;\n\n &:hover {\n border: solid thin ", ";\n }\n\n &:active,\n &:focus {\n border: solid thin ", ";\n }\n\n .auto-complete-input {\n flex: 1;\n font-family: ", ";\n font-weight: 500;\n border: none;\n border-radius: .25rem;\n background-color: transparent;\n line-height: 1rem;\n overflow: hidden;\n\n color: ", ";\n\n padding: ", ";\n\n width: ",
";\n\n font-size: ", ";\n }\n\n .auto-complete-results {\n z-index: 2;\n position: absolute;\n top: ", ";\n width: 100%;\n background-color: ", ";\n box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12);\n border-radius: 0 0 .25rem .25rem;\n border-top: solid 1px ", ";\n transition: border-top-color 500ms;\n\n &:hover {\n border-top-color: ", ";\n }\n }\n\n .auto-complete-prefix {\n z-index: 1;\n flex: 0 0 1.5rem;\n }\n /* TODO: suffix */\n"])), colors.neutrals.ash.light, colors.neutrals.white.base, colors.neutrals.ash.base, colors.neutrals.ash.dark, fonts.fontFamily, colors.neutrals.charcoal.light, function (_a) {
var _b = _a.size, size = _b === void 0 ? 'small' : _b;
return size === 'large' ? '0.75rem 1rem' : '0.5rem 0.5rem';
}, function (_a) {
var _b = _a.size, size = _b === void 0 ? 'small' : _b;
return size === 'large' ? 'calc(100% - 2rem - 2px)' : 'calc(100% - 1rem - 2px)';
}, function (_a) {
var _b = _a.size, size = _b === void 0 ? 'small' : _b;
return size === 'large' ? '1rem' : '.75rem';
}, function (_a) {
var _b = _a.size, size = _b === void 0 ? 'small' : _b;
return size === 'large' ? 'calc(2.5rem - 2px)' : 'calc(2rem - 2px)';
}, colors.neutrals.white.base, colors.neutrals.ash.light, colors.neutrals.ash.base);
var AutoComplete = /** @class */ (function (_super) {
__extends(AutoComplete, _super);
function AutoComplete() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isFocused: false,
};
return _this;
}
AutoComplete.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, placeholder = _a.placeholder, children = _a.children, suffix = _a.suffix, prefix = _a.prefix, props = __rest(_a, ["className", "placeholder", "children", "suffix", "prefix"]);
return (React.createElement(StyledAutoComplete, __assign({ className: classNames(className) }, props),
prefix && React.cloneElement(prefix, {
className: 'auto-complete-prefix',
height: 16,
width: 16,
color: colors.neutrals.ash.dark,
}),
React.createElement("input", { onFocus: function () { return _this.setState(__assign({}, _this.state, { isFocused: true })); }, onBlur: function () { return _this.setState(__assign({}, _this.state, { isFocused: false })); }, placeholder: placeholder, className: "auto-complete-input", name: "auto-complete" }),
suffix && React.cloneElement(suffix, { className: 'auto-complete-suffix' }),
children,
this.state.isFocused && !children &&
React.createElement(List, { title: "Recent Searches", className: "auto-complete-results" }, this.props.dataSource.map(function (item) { return React.createElement(Item, { key: item }, item); }))));
};
AutoComplete.defaultProps = {
placeholder: 'Search',
};
return AutoComplete;
}(React.Component));
var templateObject_1$5;
// TODO: a11y
var ButtonColorStyles = {
primary: styled.css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "], ["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), colors.accent.savvyCyan.base, colors.accent.savvyCyan.base, colors.neutrals.white.base, polished.darken(0.05, colors.accent.savvyCyan.base)),
secondary: styled.css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "], ["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), colors.accent.savvyCyan.light, colors.accent.savvyCyan.light, colors.neutrals.white.base, polished.darken(0.1, colors.accent.savvyCyan.light)),
text: styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n "], ["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n "])), colors.neutrals.white.base, colors.neutrals.white.base, colors.accent.savvyCyan.base, polished.darken(0.25, colors.accent.savvyCyan.base)),
};
var ButtonSizeStyles = {
sm: styled.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: ", ";\n font-size: ", "px;\n "], ["\n padding: ", ";\n font-size: ", "px;\n "])), sizes$1.padding.xs, fonts.baseFontSize * 0.75),
md: styled.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", " ", ";\n font-size: ", "px;\n "], ["\n padding: ", " ", ";\n font-size: ", "px;\n "])), sizes$1.padding.sm, sizes$1.padding.md, fonts.baseFontSize),
lg: styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: ", ";\n font-size: ", "px;\n "], ["\n padding: ", ";\n font-size: ", "px;\n "])), sizes$1.padding.md, fonts.baseFontSize * 1.5),
};
var StyledButton = styled__default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\tposition: relative;\n\tmin-width: 2rem;\n\tborder-radius: ", ";\n\tfont-weight: 500;\n\tfont-family: ", ";\n\ttext-align: center;\n\tcursor: pointer;\n margin-right: ", ";\n\n\ttransition: 500ms ease background-color,\n\t 500ms ease border-color,\n 500ms ease color,\n 500ms ease fill;\n\n\t// These properties are deprecated but help make white text on colored backgrounds look more crisp in Chrome and\n\t// Firefox.\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\n /* Variants are color schemes */\n ", "\n\n /* Sizes */\n ", "\n\n /* Disabled State */\n ", "\n\n"], ["\n\tposition: relative;\n\tmin-width: 2rem;\n\tborder-radius: ", ";\n\tfont-weight: 500;\n\tfont-family: ", ";\n\ttext-align: center;\n\tcursor: pointer;\n margin-right: ", ";\n\n\ttransition: 500ms ease background-color,\n\t 500ms ease border-color,\n 500ms ease color,\n 500ms ease fill;\n\n\t// These properties are deprecated but help make white text on colored backgrounds look more crisp in Chrome and\n\t// Firefox.\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\n /* Variants are color schemes */\n ", "\n\n /* Sizes */\n ", "\n\n /* Disabled State */\n ",
"\n\n"])), sizes$1.border.radius.base, fonts.fontFamily, sizes$1.padding.md, function (_a) {
var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
return ButtonColorStyles[variant];
}, function (_a) {
var _b = _a.size, size = _b === void 0 ? 'md' : _b;
return ButtonSizeStyles[size];
}, function (_a) {
var disabled = _a.disabled;
return disabled && styled.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n opacity: .5;\n cursor: not-allowed;\n "], ["\n opacity: .5;\n cursor: not-allowed;\n "])));
});
var DefaultProps$3 = {};
var Button = function (_a) {
if (_a === void 0) { _a = DefaultProps$3; }
var className = _a.className, props = __rest(_a, ["className"]);
return React.createElement(StyledButton, __assign({ className: classNames(className) }, props));
};
Button.defaultProps = DefaultProps$3;
var templateObject_1$6, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
var StyledBadge = styled__default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n font-family: ", ";\n display: inline-block;\n\n .badge {\n position: absolute;\n top: -.5rem;\n right: -.25rem;\n background-color: ", ";\n color: ", ";\n font-weight: 700;\n font-size: 0.75rem;\n padding: 1px ", ";\n border-radius: ", ";\n }\n"], ["\n position: relative;\n font-family: ", ";\n display: inline-block;\n\n .badge {\n position: absolute;\n top: -.5rem;\n right: -.25rem;\n background-color: ", ";\n color: ", ";\n font-weight: 700;\n font-size: 0.75rem;\n padding: 1px ", ";\n border-radius: ", ";\n }\n"])), fonts.fontFamily, colors.secondary.flashPink.base, colors.neutrals.white.base, sizes$1.padding.xs, variables.borderRadius);
var Badge = function (_a) {
var className = _a.className, children = _a.children, count = _a.count, props = __rest(_a, ["className", "children", "count"]);
return (React.createElement(StyledBadge, __assign({ className: classNames(className) }, props),
children,
React.createElement("div", { className: "badge" }, count)));
};
var templateObject_1$7;
var StyledDropDown = styled__default.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n font-family: ", ";\n position: relative;\n cursor: pointer;\n line-height: 1rem;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n .drop-down-container {\n min-width: 10rem;\n position: absolute;\n left: 0;\n top: ", ";\n padding: ", " 0;\n z-index: 1;\n background-color: ", ";\n box-shadow: 0 .5rem .5rem 0 ", ";\n border-radius: ", ";\n border: 1px solid ", ";\n }\n\n .arrow-up {\n position: absolute;\n top: -.4rem;\n left: 1rem;\n width: 0;\n height: 0;\n border-left: .75rem solid transparent;\n border-right: .75rem solid transparent;\n border-bottom: .5rem solid white;\n }\n"], ["\n font-family: ", ";\n position: relative;\n cursor: pointer;\n line-height: 1rem;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n .drop-down-container {\n min-width: 10rem;\n position: absolute;\n left: 0;\n top: ", ";\n padding: ", " 0;\n z-index: 1;\n background-color: ", ";\n box-shadow: 0 .5rem .5rem 0 ", ";\n border-radius: ", ";\n border: 1px solid ", ";\n }\n\n .arrow-up {\n position: absolute;\n top: -.4rem;\n left: 1rem;\n width: 0;\n height: 0;\n border-left: .75rem solid transparent;\n border-right: .75rem solid transparent;\n border-bottom: .5rem solid white;\n }\n"])), fonts.fontFamily, function (props) { return lodash.get(props, 'forwardedRef.current.clientHeight', 16) + "px"; }, sizes$1.padding.xs, colors.neutrals.white.base, polished.rgba(colors.neutrals.charcoal.dark, 0.12), variables.borderRadius, colors.neutrals.silver.dark);
var DropDown = /** @class */ (function (_super) {
__extends(DropDown, _super);
function DropDown(props) {
var _this = _super.call(this, props) || this;
// State
_this.state = { isHidden: true };
_this.dropDownReference = React.createRef();
return _this;
}
DropDown.prototype.componentDidMount = function () {
var _this = this;
var dropDown = this.dropDownReference.current;
var height = dropDown.clientHeight, width = dropDown.clientWidth;
this.setState(__assign({}, this.state, { height: height, width: width }));
/* Events */
/*
// Subscribe to all window clicks
this.windowClick$ = fromEvent(window, 'click')
.pipe(
takeWhile(() => {
return !this.state.isHidden;
})
);
// Subscribe to keyboard escape
this.escapeKey$ = fromEvent(document, 'keyup')
.pipe(
takeWhile(() => !this.state.isHidden),
filter((keyEvent: KeyboardEvent) => keyEvent.key === 'Escape')
);
// Subscribe to element click/tap
this.elementClick$ = fromEvent(dropDown, 'click');
*/
// If hover is the trigger:
// Subscribe to element mouseenter
this.mouseOver$ = rxjs.fromEvent(dropDown, 'mouseenter')
.subscribe(function (a) {
_this.setState({ isHidden: false });
});
// Subscribe to element mouseleave
this.mouseOut$ = rxjs.fromEvent(dropDown, 'mouseleave')
.subscribe(function (a) {
_this.setState({ isHidden: true });
});
/* Subs */
// this.windowClick$.subscribe((a: any) => {
// console.log(1, a, this.dropDownReference);
// // this.setState({ isHidden: true });
// });
// this.elementClick$.subscribe((a: any) => {
// console.log(2, a, this.dropDownReference);
// // this.setState({ isHidden: true });
// });
// const clickEvents$ = zip(this.windowClick$, this.elementClick$)
// .subscribe((...a) => {
// console.log(6, a);
// });
// this.escapeKey$.subscribe((a: any) => {
// this.setState({ isHidden: true });
// });
};
// componentDidUpdate(prevProps: Readonly<DropDownProps>, prevState: Readonly<{}>, snapshot?: any): void {
//
// }
DropDown.prototype.componentWillUnmount = function () {
this.mouseOver$.unsubscribe();
this.mouseOut$.unsubscribe();
};
DropDown.prototype.render = function () {
var _a = this.props, children = _a.children, className = _a.className, overlay = _a.overlay, props = __rest(_a, ["children", "className", "overlay"]);
return (React.createElement(StyledDropDown, __assign({ ref: this.dropDownReference, className: classNames(className) }, props),
children,
React.createElement("div", { hidden: this.state.isHidden, className: classNames('drop-down-container') },
React.createElement("div", { className: "arrow-up" }),
overlay)));
};
DropDown.defaultProps = {
trigger: 'hover',
};
return DropDown;
}(React.Component));
var templateObject_1$8;
var StyledContainer = styled__default(grid.Box)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n max-width: 1140px;\n"], ["\n max-width: 1140px;\n"])));
var Container = /** @class */ (function (_super) {
__extends(Container, _super);
function Container() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
currentBreakpoint: 'small',
};
return _this;
}
Container.prototype.componentDidMount = function () {
var _this = this;
this.windowResize$ = rxjs.fromEvent(window, 'resize')
// .pipe(debounceTime(150))
.subscribe(function () { return _this.assignBreakpoint(); });
this.assignBreakpoint();
};
Container.prototype.componentWillUnmount = function () {
this.windowResize$.unsubscribe();
};
Container.prototype.assignBreakpoint = function () {
var innerWidth = lodash.get(window || {}, 'innerWidth', 480);
var currentBreakpoint = 'small';
if (innerWidth <= 480) {
currentBreakpoint = 'xsmall';
}
else if (innerWidth <= 576) {
currentBreakpoint = 'small';
}
else if (innerWidth <= 768) {
currentBreakpoint = 'medium';
}
else if (innerWidth <= 992) {
currentBreakpoint = 'large';
}
else if (innerWidth <= 1200) {
currentBreakpoint = 'xlarge';
}
else {
currentBreakpoint = 'xxlarge';
}
if (this.state.currentBreakpoint !== currentBreakpoint) {
this.setState(__assign({}, this.state, { currentBreakpoint: currentBreakpoint }));
if (this.props.whenBreakpoint) {
this.props.whenBreakpoint(currentBreakpoint);
}
}
};
Container.prototype.render = function () {
var _a = this.props, className = _a.className, props = __rest(_a, ["className"]);
return (React.createElement(StyledContainer, __assign({ mx: "auto", className: classNames(className) }, props)));
};
Container.defaultProps = {
breakpoint: 'small',
};
return Container;
}(React.Component));
var templateObject_1$9;
// REACT
/* tslint:disable max-line-length */
var Hamburger = (function (_a) {
var _b = _a.color, color = _b === void 0 ? '#222222' : _b, height = _a.height, width = _a.width;
return (React.createElement("svg", { width: width ? width + "px" : '26px', height: height ? height + "px" : '20px', viewBox: "0 0 26 20", version: "1.1" },
React.createElement("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
React.createElement("path", { d: "M1.4625,4 L24.5375,4 C25.345125,4 26,3.105 26,2 C26,0.895 25.345125,0 24.5375,0 L1.4625,0 C0.654875,0 0,0.895 0,2 C0,3.105 0.654875,4 1.4625,4", id: "Top-Fill", fill: color }),
React.createElement("path", { d: "M1.4625,12 L24.5375,12 C25.345125,12 26,11.105 26,10 C26,8.895 25.345125,8 24.5375,8 L1.4625,8 C0.654875,8 0,8.895 0,10 C0,11.105 0.654875,12 1.4625,12", id: "Center-Fill", fill: color }),
React.createElement("path", { d: "M1.4625,20 L24.5375,20 C25.345125,20 26,19.105 26,18 C26,16.895 25.345125,16 24.5375,16 L1.4625,16 C0.654875,16 0,16.895 0,18 C0,19.105 0.654875,20 1.4625,20", id: "Bottom-Fill", fill: color }))));
});
// REACT
/* tslint:disable max-line-length */
var ChevronDown = (function (_a) {
var _b = _a.color, color = _b === void 0 ? '#222222' : _b, _c = _a.height, height = _c === void 0 ? 10 : _c, _d = _a.width, width = _d === void 0 ? 10 : _d;
return (React.createElement("svg", { transform: "rotate(90)", height: height, width: width, fill: color, preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 40 40" },
React.createElement("g", null,
React.createElement("path", { d: "m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z" }))));
});
// REACT
/* tslint:disable max-line-length */
var ChevronUp = (function (_a) {
var _b = _a.color, color = _b === void 0 ? '#222222' : _b, _c = _a.height, height = _c === void 0 ? 8 : _c, _d = _a.width, width = _d === void 0 ? 16 : _d;
return (React.createElement("svg", { transform: "rotate(270)", height: height, width: width, fill: color, preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 40 40" },
React.createElement("g", null,
React.createElement("path", { d: "m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z" }))));
});
// REACT
/* tslint:disable max-line-length */
var ChevronRight = (function (_a) {
var _b = _a.color, color = _b === void 0 ? '#222222' : _b, _c = _a.height, height = _c === void 0 ? 10 : _c, _d = _a.width, width = _d === void 0 ? 10 : _d;
return (React.createElement("svg", { height: height, width: width, fill: color, preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 40 40" },
React.createElement("g", null,
React.createElement("path", { d: "m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z" }))));
});
// REACT
/* tslint:disable max-line-length */
var Cart = (function (_a) {
var _b = _a.color, color = _b === void 0 ? '#222222' : _b, width = _a.width, height = _a.height;
return (React.createElement("svg", { width: width ? width + "px" : '22px', height: height ? height + "px" : '21px', viewBox: "0 0 22 21", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
React.createElement("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
React.createElement("path", { d: "M16,20.5833333 C16.6903559,20.5833333 17.25,20.0236893 17.25,19.3333333 C17.25,18.6429774 16.6903559,18.0833333 16,18.0833333 C15.3096441,18.0833333 14.75,18.6429774 14.75,19.3333333 C14.75,20.0236893 15.3096441,20.5833333 16,20.5833333 Z M16,20.3055556 C15.4630565,20.3055556 15.0277778,19.8702768 15.0277778,19.3333333 C15.0277778,18.7963898 15.4630565,18.3611111 16,18.3611111 C16.5369435,18.3611111 16.9722222,18.7963898 16.9722222,19.3333333 C16.9722222,19.8702768 16.5369435,20.3055556 16,20.3055556 Z", id: "Cart", stroke: color, strokeWidth: "0.833333333", fill: color }),
React.createElement("path", { d: "M9.33333333,20.5833333 C10.0236893,20.5833333 10.5833333,20.0236893 10.5833333,19.3333333 C10.5833333,18.6429774 10.0236893,18.0833333 9.33333333,18.0833333 C8.6429774,18.0833333 8.08333333,18.6429774 8.08333333,19.3333333 C8.08333333,20.0236893 8.6429774,20.5833333 9.33333333,20.5833333 Z M9.33333333,20.3055556 C8.79638983,20.3055556 8.36111111,19.8702768 8.36111111,19.3333333 C8.36111111,18.7963898 8.79638983,18.3611111 9.33333333,18.3611111 C9.87027684,18.3611111 10.3055556,18.7963898 10.3055556,19.3333333 C10.3055556,19.8702768 9.87027684,20.3055556 9.33333333,20.3055556 Z", id: "Wheel-1", stroke: color, strokeWidth: "0.833333333", fill: color }),
React.createElement("path", { d: "M5.15183532,3.22222222 L19.8884603,3.22222222 C20.50211,3.22222222 20.9995714,3.71968361 20.9995714,4.33333333 C20.9995714,4.41446581 20.9906851,4.49535424 20.9730716,4.57455173 L19.2432877,12.3523295 C19.1302443,12.8606162 18.6793819,13.2222222 18.1586764,13.2222222 L6.69029686,13.2222222 L7.0321772,15.4444444 L18.2222222,15.4444444 C18.5290471,15.4444444 18.7777778,15.6931751 18.7777778,16 C18.7777778,16.3068249 18.5290471,16.5555556 18.2222222,16.5555556 L6.55555556,16.5555556 C6.2813494,16.5555556 6.04815518,16.3554938 6.00646017,16.0844762 L3.85671169,2.11111111 L1.55555556,2.11111111 C1.24873069,2.11111111 1,1.86238042 1,1.55555556 C1,1.24873069 1.24873069,1 1.55555556,1 L4.33333333,1 C4.60753949,1 4.8407337,1.20006174 4.88242872,1.47107934 L5.15183532,3.22222222 Z M6.52136168,12.1111111 L18.1586764,12.1111111 L19.8884603,4.33333333 L5.32416274,4.33333333 L6.52136168,12.1111111 Z", id: "Wheel-2", stroke: color, strokeWidth: "0.4", fill: color }))));
});
// REACT
/* tslint:disable max-line-length */
var Search = (function (_a) {
var _b = _a.color, color = _b === void 0 ? '#222222' : _b, width = _a.width, height = _a.height;
return (React.createElement("svg", { width: width ? width + "px" : '24px', height: height ? height + "px" : '24px', viewBox: "0 0 24 24", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
React.createElement("defs", null,
React.createElement("path", { d: "M10.4998359,19.4996953 C5.53641349,19.4996953 1.49997656,15.4632584 1.49997656,10.4998359 C1.49997656,5.53641349 5.53641349,1.49997656 10.4998359,1.49997656 C15.4632584,1.49997656 19.4996953,5.53641349 19.4996953,10.4998359 C19.4996953,15.4632584 15.4632584,19.4996953 10.4998359,19.4996953 M23.7806284,22.720145 L18.4287121,17.3682286 C20.0276871,15.5277574 20.9996719,13.1292949 20.9996719,10.4998359 C20.9996719,4.70092655 16.2987453,0 10.4998359,0 C4.70092655,0 0,4.70092655 0,10.4998359 C0,16.2987453 4.70092655,20.9996719 10.4998359,20.9996719 C13.1292949,20.9996719 15.5277574,20.0276871 17.3682286,18.4287121 L22.720145,23.7806284 C23.0126404,24.0731239 23.489633,24.0731239 23.7806284,23.7806284 C24.0731239,23.489633 24.0731239,23.0126404 23.7806284,22.720145", id: "search-icon-path" })),
React.createElement("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
React.createElement("mask", { id: "mask-2", fill: "white" },
React.createElement("use", { xlinkHref: "#search-icon-path" })),
React.createElement("use", { id: "Fill-1", fill: color, xlinkHref: "#search-icon-path" }))));
});
var StyledIcon = styled__default.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: inline-flex;\n max-width: 1.5rem;\n justify-content: end;\n\n > svg {\n flex: 0 0 1.25rem;\n }\n"], ["\n display: inline-flex;\n max-width: 1.5rem;\n justify-content: end;\n\n > svg {\n flex: 0 0 1.25rem;\n }\n"])));
var DefaultProps$4 = {
type: 'hamburger',
color: '#222',
};
var Icons = {
'hamburger': Hamburger,
'chevron-down': ChevronDown,
'chevron-up': ChevronUp,
'chevron-right': ChevronRight,
'cart': Cart,
'search': Search,
};
var Icon = function (_a) {
if (_a === void 0) { _a = DefaultProps$4; }
var className = _a.className, type = _a.type, color = _a.color, width = _a.width, height = _a.height, props = __rest(_a, ["className", "type", "color", "width", "height"]);
return (React.createElement(StyledIcon, __assign({ className: classNames(className) }, props), Icons[type]({ color: color, width: width, height: height })));
};
Icon.defaultProps = DefaultProps$4;
var templateObject_1$a;
var StyledMobileCTAElement = styled__default.a(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: