UNPKG

@jaws/fractals

Version:

A React UI Library by RetailMeNot

github.com/sharkparty/fractals

sharkparty/fractals

1 lines • 157 kB
1
{"version":3,"file":"index.ts","sources":["../src/theme/colors.theme.ts","../src/theme/variables.theme.ts","../src/theme/fonts.theme.ts","../src/theme/sizes.theme.ts","../src/theme/GlobalStyles/Globals.styles.ts","../src/theme/GlobalStyles/Normalize.styles.ts","../src/Avatar/Avatar.component.tsx","../src/List/List.component.tsx","../src/List/Item/Item.component.tsx","../src/AutoComplete/AutoComplete.component.tsx","../src/Button/Button.component.tsx","../src/Badge/Badge.component.tsx","../src/DropDown/DropDown.component.tsx","../src/Grid/Container/Container.component.tsx","../src/Icon/SVGs/Hamburger.svg.tsx","../src/Icon/SVGs/ChevronDown.svg.tsx","../src/Icon/SVGs/ChevronUp.svg.tsx","../src/Icon/SVGs/ChevronRight.svg.tsx","../src/Icon/SVGs/Cart.tsx","../src/Icon/SVGs/Search.tsx","../src/Icon/Icon.component.tsx","../src/Layout/Footer/MobileCTA/MobileCTA.component.tsx","../src/Layout/Footer/FooterSection/FooterSection.component.tsx","../src/Layout/Footer/Footer.component.tsx","../src/Menu/Menu.component.tsx","../src/Menu/Item/Item.component.tsx","../src/Layout/Header/Header.component.tsx","../src/Layout/Page/Page.component.tsx"],"sourcesContent":["export default {\n neutrals: {\n charcoal: {\n base: '#323232',\n light: '#595959',\n dark: '#000000',\n },\n ash: {\n base: '#A6A6A6',\n light: '#D3D3D3',\n dark: '#808080',\n },\n silver: {\n base: '#F1F1F1',\n light: '#FAFAFA',\n dark: '#E7E7E7',\n },\n lavenderWhispers: {\n base: '#F7F5FC',\n light: '#FBFAFF',\n dark: '#F1EEFA',\n },\n white: {\n base: '#FFFFFF',\n },\n },\n main: {\n grapePurchase: {\n base: '#602D6C',\n light: '#91609C',\n dark: '#4B2354',\n },\n rx: {\n base: '#F23466',\n light: '#FF6B9C',\n dark: '#CC2D52',\n },\n genie: {\n base: '#4C18F3',\n light: '#7855D9',\n dark: '#42199A',\n },\n },\n accent: {\n savvyCyan: {\n base: '#0998D6',\n light: '#66CCFF',\n dark: '#0074A6',\n },\n tealBreaker: {\n base: '#00CCCD',\n light: '#00E0D1',\n dark: '#00BDBD',\n },\n },\n secondary: {\n dealEnvy: {\n base: '#14A382',\n light: '#00CDAD',\n dark: '#268068',\n },\n flashPink: {\n base: '#DF206C',\n light: '#E665A1',\n dark: '#B81D5B',\n },\n cyberMango: {\n base: '#EB663D',\n light: '#FA9F5A',\n dark: '#C74E30',\n },\n goldMine: {\n base: '#F5A623',\n light: '#FFC761',\n dark: '#CC861D',\n },\n fireSale: {\n base: '#EA4545',\n light: '#F16667',\n dark: '#CC3B3B',\n },\n },\n alert: {\n error: {\n base: '#CC3B3B',\n },\n success: {\n base: '#268068',\n },\n },\n rx: {\n purple: {\n base: '#A678B5',\n },\n },\n};\n","const baseFontSize = 16;\n\nexport default {\n baseFontSize: 16,\n fontFamily: 'Avenir Next, Segoe UI, Helvetica, Roboto, sans-serif',\n borderRadius: `${baseFontSize / 4}px`,\n};\n","// VARIABLES\nimport variables from './variables.theme';\n\nconst { baseFontSize, fontFamily } = variables;\n\nexport default {\n baseFontSize,\n fontFamily,\n paragraph: {\n base: {\n fontSize: `${baseFontSize}px`,\n lineHeight: `${baseFontSize * 1.5}px`,\n fontWeight: 'normal',\n },\n informational: {\n fontSize: `${baseFontSize * 0.875}px`,\n lineHeight: `${baseFontSize * 1.125}px`,\n fontWeight: 'normal',\n },\n },\n navigation: {\n base: {\n fontSize: `${baseFontSize * .75}px`,\n lineHeight: `${baseFontSize}px`,\n fontWeight: '500',\n },\n menu: {\n fontSize: `${baseFontSize * .875}px`,\n lineHeight: `${baseFontSize}px`,\n small: {\n base: {\n fontSize: `${baseFontSize * 0.75}px`,\n fontWeight: '500',\n },\n active: {\n fontWeight: '700',\n },\n },\n large: {\n base: {\n fontWeight: '600',\n },\n active: {\n fontWeight: '700',\n },\n },\n },\n },\n heading: {\n h4: {\n fontSize: `${baseFontSize * 1.5}px`,\n lineHeight: `${baseFontSize * 2}px`,\n fontWeight: 'normal',\n },\n h3: {\n fontSize: `${baseFontSize * 1.75}px`,\n lineHeight: `${baseFontSize * 2}px`,\n fontWeight: 'normal',\n },\n h2: {\n fontSize: `${baseFontSize * 2}px`,\n lineHeight: `${baseFontSize * 2.5}px`,\n fontWeight: 'normal',\n },\n h1: {\n fontSize: `${baseFontSize * 2.25}px`,\n lineHeight: `${baseFontSize * 2.5}px`,\n fontWeight: 'normal',\n },\n },\n typography: {\n caption: {\n fontSize: `${baseFontSize * 0.75}px`,\n lineHeight: `${baseFontSize}px`,\n fontWeight: '500',\n },\n ui: {\n fontSize: `${baseFontSize * 0.875}px`,\n lineHeight: `${baseFontSize * 1.125}px`,\n fontWeight: 'normal',\n },\n body: {\n fontSize: `${baseFontSize}px`,\n lineHeight: `${baseFontSize * 1.5}px`,\n fontWeight: 'normal',\n },\n subHeading: {\n fontSize: `${baseFontSize * 1.125}px`,\n lineHeight: `${baseFontSize * 1.5}px`,\n fontWeight: 'normal',\n },\n subHeadingLarge: {\n fontSize: `${baseFontSize * 1.25}px`,\n lineHeight: `${baseFontSize * 1.5}px`,\n fontWeight: 'normal',\n },\n header: {\n small: {\n fontSize: `${baseFontSize * 1.5}px`,\n lineHeight: `${baseFontSize * 2}px`,\n fontWeight: 'normal',\n },\n medium: {\n fontSize: `${baseFontSize * 1.75}px`,\n lineHeight: `${baseFontSize * 2}px`,\n fontWeight: 'normal',\n },\n large: {\n fontSize: `${baseFontSize * 2}px`,\n lineHeight: `${baseFontSize * 2.5}px`,\n fontWeight: 'normal',\n },\n extraLarge: {\n fontSize: `${baseFontSize * 2.25}px`,\n lineHeight: `${baseFontSize * 2.5}px`,\n fontWeight: 'normal',\n },\n },\n display: {\n small: {\n fontSize: `${baseFontSize * 2.5}px`,\n lineHeight: `${baseFontSize * 3}px`,\n fontWeight: 'normal',\n },\n medium: {\n fontSize: `${baseFontSize * 3}px`,\n lineHeight: `${baseFontSize * 3.25}px`,\n fontWeight: 'normal',\n },\n large: {\n fontSize: `${baseFontSize * 3.5}px`,\n lineHeight: `${baseFontSize * 4}px`,\n fontWeight: 'normal',\n },\n extraLarge: {\n fontSize: `${baseFontSize * 4}px`,\n lineHeight: `${baseFontSize * 4.5}px`,\n fontWeight: 'normal',\n },\n },\n },\n};\n","// VARIABLES\nimport variables from './variables.theme';\n\nconst { baseFontSize: base } = variables;\n\ninterface Sizes {\n xs: string;\n sm: string;\n md: string;\n lg: string;\n xl: string;\n}\n\nconst sizes: Sizes = {\n xs: `${base / 4}px`,\n sm: `${base / 2}px`,\n md: `${base * 1}px`,\n lg: `${base * 2}px`,\n xl: `${base * 3}px`,\n};\n\nexport default {\n padding: { ...sizes },\n margin: { ...sizes },\n border: {\n radius: {\n base: '3px',\n },\n width: {\n base: '1px',\n },\n style: {\n base: 'solid',\n },\n },\n};\n","// VENDOR\nimport { createGlobalStyle, css } from 'styled-components';\n// THEME\nimport { colors, fonts } from '..';\n\nconst headingRules = (hLevel: string): string => `\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`;\n\nconst typography = css`\n ${[...Object.keys(fonts.heading)].map(headingRules)}\n\n p {\n font-family: ${fonts.fontFamily};\n font-size: ${fonts.paragraph.base.fontSize};\n line-height: ${fonts.paragraph.base.lineHeight};\n font-weight: ${fonts.paragraph.base.fontWeight};\n }\n\n a {\n text-decoration: none;\n color: ${colors.accent.savvyCyan.dark};\n }\n`;\n\nexport const GlobalCSS = createGlobalStyle`\n html {\n color: ${colors.neutrals.charcoal.base};\n font-size: ${fonts.baseFontSize}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 ${typography}\n`;\n","// VENDOR\nimport { createGlobalStyle } from 'styled-components';\n\nexport const NormalizeCSS = createGlobalStyle`\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","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport { rgba } from 'polished';\n// COMPONENTS\n\n// THEME\nimport { colors, fonts } from '../theme';\n\ninterface AvatarProps {\n className?: string;\n // Configuration\n label?: string;\n src?: string | React.ReactElement<any> | React.SFC;\n}\n\n/* tslint:disable max-line-length */\nconst DefaultAvatar: React.SFC = () => (\n <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\">\n <g id=\"Page-1\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n 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\"\n id=\"Combined-Shape\"\n fill=\"#A6A6A6\"\n />\n </g>\n </svg>\n);\n/* tslint:enable max-line-length */\n\nexport const StyledAvatar = styled.div`\n border: solid 0.1875rem ${rgba(colors.neutrals.white.base, .4)};\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: ${fonts.fontFamily};\n font-size: .75rem;\n background-color: ${colors.neutrals.silver.base};\n color: ${colors.neutrals.charcoal.light};\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\nconst DefaultProps: AvatarProps = {\n};\n\nexport const Avatar = ({ className, src, label, ...props }: AvatarProps = DefaultProps): React.ReactElement<any> => (\n <StyledAvatar className={classNames(className)} {...props}>\n <div className=\"inner-border\">\n {/* TODO: handle image src */}\n {label\n ? label.substr(0, 2).toUpperCase()\n : <DefaultAvatar />\n }\n </div>\n </StyledAvatar>\n);\n\nAvatar.defaultProps = DefaultProps;\n\nexport default Avatar;\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n// COMPONENTS\n// THEME\nimport { fonts, colors, sizes } from '../theme';\n\ninterface ListProps {\n className?: string;\n children?: any;\n title?: string;\n hidden?: boolean;\n}\n\nexport const StyledList = styled.div`\n .title {\n margin: 0;\n padding: ${sizes.padding.md};\n font-family: ${fonts.fontFamily};\n font-size: .75rem;\n font-weight: 600;\n color: ${colors.neutrals.ash.dark};\n line-height: .75rem;\n }\n`;\n\nconst DefaultProps: ListProps = {\n};\n\nexport const List: React.SFC<ListProps> = ({\n className,\n children,\n title,\n...props\n}: ListProps = DefaultProps): React.ReactElement<any> => (\n <StyledList className={classNames(className)} {...props}>\n {title && <p className=\"title\">{title}</p>}\n {children}\n </StyledList>\n);\n\nList.defaultProps = DefaultProps;\n\nexport default List;\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n// COMPONENTS\n// THEME\nimport { colors, fonts, sizes, variables } from '../../theme';\n\nexport interface ItemProps {\n children?: any;\n className?: string;\n}\n\nexport const StyledItem = styled.a`\n display: flex;\n border-radius: ${variables.borderRadius};\n padding: ${sizes.padding.sm} ${sizes.padding.md};\n cursor: pointer;\n color: ${colors.neutrals.charcoal.base};\n font-family: ${fonts.fontFamily};\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\nconst DefaultProps: ItemProps = {\n};\n\nexport const Item = ({\n className,\n children,\n ...props\n}: ItemProps = DefaultProps): React.ReactElement<any> => (\n <StyledItem className={classNames(className)} {...props}>\n {children}\n </StyledItem>\n);\n\nItem.defaultProps = DefaultProps;\n\nexport default Item;\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n// COMPONENTS\nimport { List, Item } from '../List';\nimport { Icon } from '../Icon';\n// THEME\nimport { fonts, colors } from '../theme';\n\n// TODO: This should be built from a FormControl Input, but we don't have one yet. =(\n\ninterface AutoCompleteProps {\n dataSource: any[];\n className?: string;\n size?: 'small' | 'large';\n placeholder?: string;\n onSearch?: () => void;\n onSelect?: () => void;\n // onFocus?: () => void;\n // onBlur?: () => void;\n children?: any;\n\n suffix?: React.ReactElement<Icon>; // TODO: consider buttons & other elements\n prefix?: React.ReactElement<Icon>; // TODO: consider buttons & other elements\n}\n\ninterface AutoCompleteState {\n isFocused: boolean;\n}\n\nexport const StyledAutoComplete = styled.div`\n position: relative;\n border: solid 1px ${colors.neutrals.ash.light};\n border-radius: .25rem;\n transition: border-color 500ms;\n display: flex;\n background: ${colors.neutrals.white.base};\n align-items: center;\n\n &:hover {\n border: solid thin ${colors.neutrals.ash.base};\n }\n\n &:active,\n &:focus {\n border: solid thin ${colors.neutrals.ash.dark};\n }\n\n .auto-complete-input {\n flex: 1;\n font-family: ${fonts.fontFamily};\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: ${colors.neutrals.charcoal.light};\n\n padding: ${({ size = 'small' }: AutoCompleteProps) => size === 'large' ? '0.75rem 1rem' : '0.5rem 0.5rem'};\n\n width: ${({ size = 'small' }: AutoCompleteProps) =>\n size === 'large' ? 'calc(100% - 2rem - 2px)' : 'calc(100% - 1rem - 2px)'};\n\n font-size: ${({ size = 'small' }: AutoCompleteProps) => size === 'large' ? '1rem' : '.75rem'};\n }\n\n .auto-complete-results {\n z-index: 2;\n position: absolute;\n top: ${({ size = 'small' }: AutoCompleteProps) => size === 'large' ? 'calc(2.5rem - 2px)' : 'calc(2rem - 2px)'};\n width: 100%;\n background-color: ${colors.neutrals.white.base};\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 ${colors.neutrals.ash.light};\n transition: border-top-color 500ms;\n\n &:hover {\n border-top-color: ${colors.neutrals.ash.base};\n }\n }\n\n .auto-complete-prefix {\n z-index: 1;\n flex: 0 0 1.5rem;\n }\n /* TODO: suffix */\n`;\n\nexport class AutoComplete extends React.Component<AutoCompleteProps> {\n static defaultProps = {\n placeholder: 'Search',\n };\n readonly state: AutoCompleteState = {\n isFocused: false,\n };\n\n render(): React.ReactElement<AutoComplete> {\n const {\n className,\n placeholder,\n children,\n suffix,\n prefix,\n ...props\n } = this.props;\n\n return (\n <StyledAutoComplete className={classNames(className)} {...props}>\n {prefix && React.cloneElement(prefix, {\n className: 'auto-complete-prefix',\n height: 16,\n width: 16,\n color: colors.neutrals.ash.dark,\n })}\n <input\n onFocus={() => this.setState({ ...this.state, isFocused: true })}\n onBlur={() => this.setState({ ...this.state, isFocused: false })}\n placeholder={placeholder}\n className=\"auto-complete-input\"\n name=\"auto-complete\"\n />\n {suffix && React.cloneElement(suffix, { className: 'auto-complete-suffix' })}\n {children}\n {this.state.isFocused && !children &&\n <List title=\"Recent Searches\" className=\"auto-complete-results\">\n {this.props.dataSource.map((item: any) => <Item key={item}>{item}</Item>)}\n </List>\n }\n </StyledAutoComplete>\n );\n }\n}\n\nexport default AutoComplete;\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled, { css, InterpolationValue } from 'styled-components';\nimport { darken } from 'polished';\n// THEME\nimport { colors, fonts, sizes } from '../theme';\n\ninterface ButtonProps {\n children?: any;\n disabled?: boolean;\n showSpinner?: boolean;\n className?: string;\n\n onClick?: () => void;\n variant?: 'primary' | 'secondary' | 'text';\n size?: 'sm' | 'md' | 'lg';\n}\n\ninterface ButtonStylesGroup {\n [key: string]: InterpolationValue[];\n}\n\n// TODO: a11y\n\nconst ButtonColorStyles: ButtonStylesGroup = {\n primary: css`\n border: solid thin ${colors.accent.savvyCyan.base};\n background-color: ${colors.accent.savvyCyan.base};\n color: ${colors.neutrals.white.base};\n\n &:hover {\n background-color: ${darken(0.05, colors.accent.savvyCyan.base)};\n }\n `,\n secondary: css`\n border: solid thin ${colors.accent.savvyCyan.light};\n background-color: ${colors.accent.savvyCyan.light};\n color: ${colors.neutrals.white.base};\n\n &:hover {\n background-color: ${darken(0.1, colors.accent.savvyCyan.light)};\n }\n `,\n text: css`\n border: solid thin ${colors.neutrals.white.base};\n background-color: ${colors.neutrals.white.base};\n color: ${colors.accent.savvyCyan.base};\n\n &:hover {\n color: ${darken(0.25, colors.accent.savvyCyan.base)};\n }\n `,\n};\n\nconst ButtonSizeStyles: ButtonStylesGroup = {\n sm: css`\n padding: ${sizes.padding.xs};\n font-size: ${fonts.baseFontSize * 0.75}px;\n `,\n md: css`\n padding: ${sizes.padding.sm} ${sizes.padding.md};\n font-size: ${fonts.baseFontSize}px;\n `,\n lg: css`\n padding: ${sizes.padding.md};\n font-size: ${fonts.baseFontSize * 1.5}px;\n `,\n};\n\nexport const StyledButton = styled.button`\n\tposition: relative;\n\tmin-width: 2rem;\n\tborder-radius: ${sizes.border.radius.base};\n\tfont-weight: 500;\n\tfont-family: ${fonts.fontFamily};\n\ttext-align: center;\n\tcursor: pointer;\n margin-right: ${sizes.padding.md};\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 ${({ variant = 'primary' }: ButtonProps) => ButtonColorStyles[variant]}\n\n /* Sizes */\n ${({ size = 'md' }: ButtonProps) => ButtonSizeStyles[size]}\n\n /* Disabled State */\n ${({ disabled }: ButtonProps) => disabled && css`\n opacity: .5;\n cursor: not-allowed;\n `}\n\n`;\n\nconst DefaultProps: ButtonProps = {};\n\nexport const Button = ({ className, ...props }: ButtonProps = DefaultProps): React.ReactElement<any> =>\n <StyledButton className={classNames(className)} {...props} />;\n\nButton.defaultProps = DefaultProps;\n\nexport default Button;\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n// COMPONENTS\n// THEME\nimport { fonts, colors, sizes, variables } from '../theme';\n\ninterface BadgeProps {\n count?: string | number;\n className?: string;\n children?: any;\n}\n\nexport const StyledBadge = styled.div`\n position: relative;\n font-family: ${fonts.fontFamily};\n display: inline-block;\n\n .badge {\n position: absolute;\n top: -.5rem;\n right: -.25rem;\n background-color: ${colors.secondary.flashPink.base};\n color: ${colors.neutrals.white.base};\n font-weight: 700;\n font-size: 0.75rem;\n padding: 1px ${sizes.padding.xs};\n border-radius: ${variables.borderRadius};\n }\n`;\n\nconst Badge = ({ className, children, count, ...props }: BadgeProps) => (\n <StyledBadge className={classNames(className)} {...props}>\n {children}\n <div className=\"badge\">{count}</div>\n </StyledBadge>\n);\nexport default Badge;\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport { fromEvent, Subscription } from 'rxjs';\nimport { rgba } from 'polished';\nimport { get } from 'lodash';\n// COMPONENTS\n// THEME\nimport { colors, variables, fonts, sizes } from '../theme';\n\ninterface DropDownProps {\n overlay: React.ReactElement<any> | Array<React.ReactElement<any>> | React.SFC | React.SFC[];\n trigger?: 'hover' | 'click'; // TODO: 'contextMenu';\n className?: string;\n children?: any;\n // Configuration\n ref?: any;\n}\n\ninterface DropDownState {\n isHidden: boolean;\n height?: number;\n width?: number;\n}\n\nexport const StyledDropDown = styled.div`\n font-family: ${fonts.fontFamily};\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: ${(props: any) => `${get(props, 'forwardedRef.current.clientHeight', 16)}px`};\n padding: ${sizes.padding.xs} 0;\n z-index: 1;\n background-color: ${colors.neutrals.white.base};\n box-shadow: 0 .5rem .5rem 0 ${rgba(colors.neutrals.charcoal.dark, 0.12)};\n border-radius: ${variables.borderRadius};\n border: 1px solid ${colors.neutrals.silver.dark};\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\nexport class DropDown extends React.Component<DropDownProps> {\n static defaultProps = {\n trigger: 'hover',\n };\n // State\n state: DropDownState = { isHidden: true };\n // Instance Reference\n private readonly dropDownReference: React.RefObject<DropDown>;\n // Observables\n // private escapeKey$: Subscription;\n // private windowClick$: Subscription;\n // private elementClick$: Subscription;\n private mouseOver$: Subscription;\n private mouseOut$: Subscription;\n\n constructor(props: DropDownProps) {\n super(props);\n this.dropDownReference = React.createRef();\n }\n\n componentDidMount(): void {\n const { current: dropDown }: { current: any } = this.dropDownReference;\n const { clientHeight: height, clientWidth: width } = dropDown;\n this.setState({ ...this.state, height, width });\n /* Events */\n /*\n // Subscribe to all window clicks\n this.windowClick$ = fromEvent(window, 'click')\n .pipe(\n takeWhile(() => {\n return !this.state.isHidden;\n })\n );\n // Subscribe to keyboard escape\n this.escapeKey$ = fromEvent(document, 'keyup')\n .pipe(\n takeWhile(() => !this.state.isHidden),\n filter((keyEvent: KeyboardEvent) => keyEvent.key === 'Escape')\n );\n // Subscribe to element click/tap\n this.elementClick$ = fromEvent(dropDown, 'click');\n */\n\n // If hover is the trigger:\n // Subscribe to element mouseenter\n this.mouseOver$ = fromEvent(dropDown, 'mouseenter')\n .subscribe((a: any) => {\n this.setState({ isHidden: false });\n });\n // Subscribe to element mouseleave\n this.mouseOut$ = fromEvent(dropDown, 'mouseleave')\n .subscribe((a: any) => {\n this.setState({ isHidden: true });\n });\n\n /* Subs */\n // this.windowClick$.subscribe((a: any) => {\n // console.log(1, a, this.dropDownReference);\n // // this.setState({ isHidden: true });\n // });\n // this.elementClick$.subscribe((a: any) => {\n // console.log(2, a, this.dropDownReference);\n // // this.setState({ isHidden: true });\n // });\n\n // const clickEvents$ = zip(this.windowClick$, this.elementClick$)\n // .subscribe((...a) => {\n // console.log(6, a);\n // });\n\n // this.escapeKey$.subscribe((a: any) => {\n // this.setState({ isHidden: true });\n // });\n }\n\n // componentDidUpdate(prevProps: Readonly<DropDownProps>, prevState: Readonly<{}>, snapshot?: any): void {\n //\n // }\n\n componentWillUnmount(): void {\n this.mouseOver$.unsubscribe();\n this.mouseOut$.unsubscribe();\n }\n\n render(): React.ReactElement<DropDown> {\n const { children, className, overlay, ...props } = this.props;\n return (\n <StyledDropDown ref={this.dropDownReference} className={classNames(className)} {...props}>\n {children}\n <div hidden={this.state.isHidden} className={classNames('drop-down-container')}>\n <div className=\"arrow-up\" />\n {overlay}\n </div>\n </StyledDropDown>\n );\n }\n}\n\nexport default DropDown;\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport { Box, BoxProps } from '@rebass/grid';\nimport { fromEvent, Subscription } from 'rxjs';\n// import { debounceTime } from 'rxjs/operators';\nimport { get } from 'lodash';\n\ntype BreakpointSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n\ninterface ContainerProps extends BoxProps {\n children?: any;\n className?: string;\n breakpoint?: BreakpointSize;\n\n whenBreakpoint?: (breakpoint: BreakpointSize) => void;\n}\n\nexport const StyledContainer = styled(Box)`\n max-width: 1140px;\n`;\n\ninterface ContainerState {\n currentBreakpoint: BreakpointSize;\n}\n\nexport class Container extends React.Component<ContainerProps> {\n static defaultProps = {\n breakpoint: 'small',\n };\n readonly state: ContainerState = {\n currentBreakpoint: 'small',\n };\n private windowResize$: Subscription;\n\n componentDidMount(): void {\n this.windowResize$ = fromEvent(window, 'resize')\n // .pipe(debounceTime(150))\n .subscribe(() => this.assignBreakpoint());\n this.assignBreakpoint();\n }\n\n componentWillUnmount(): void {\n this.windowResize$.unsubscribe();\n }\n\n assignBreakpoint(): void {\n const innerWidth: number = get(window || {}, 'innerWidth', 480);\n let currentBreakpoint: BreakpointSize = 'small';\n if (innerWidth <= 480) {\n currentBreakpoint = 'xsmall';\n } else if (innerWidth <= 576) {\n currentBreakpoint = 'small';\n } else if (innerWidth <= 768) {\n currentBreakpoint = 'medium';\n } else if (innerWidth <= 992) {\n currentBreakpoint = 'large';\n } else if (innerWidth <= 1200) {\n currentBreakpoint = 'xlarge';\n } else {\n currentBreakpoint = 'xxlarge';\n }\n\n if (this.state.currentBreakpoint !== currentBreakpoint) {\n this.setState({ ...this.state, currentBreakpoint });\n if (this.props.whenBreakpoint) {\n this.props.whenBreakpoint(currentBreakpoint);\n }\n }\n }\n\n render(): React.ReactElement<Container> {\n const { className, ...props } = this.props;\n return (\n <StyledContainer\n mx=\"auto\"\n className={classNames(className)}\n {...props}\n />\n );\n }\n}\nexport default Container;\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\nimport { IconSVGProps } from '../Icon.component';\n\n\n/* tslint:disable max-line-length */\nexport default ({ color = '#222222', height, width }: IconSVGProps) => (\n <svg width={width ? `${width}px` : '26px'} height={height ? `${height}px` : '20px'} viewBox=\"0 0 26 20\" version=\"1.1\">\n <g id=\"Page-1\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n 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\"\n id=\"Top-Fill\"\n fill={color}\n />\n <path\n 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\"\n id=\"Center-Fill\"\n fill={color}\n />\n <path\n 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\"\n id=\"Bottom-Fill\"\n fill={color}\n />\n </g>\n </svg>\n);\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\nimport { IconSVGProps } from '../Icon.component';\n\n/* tslint:disable max-line-length */\nexport default ({ color = '#222222', height = 10, width = 10 }: IconSVGProps) => (\n <svg transform=\"rotate(90)\" height={height} width={width} fill={color} preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 40 40\">\n <g>\n <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\" />\n </g>\n </svg>\n);\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\nimport { IconSVGProps } from '../Icon.component';\n\n/* tslint:disable max-line-length */\nexport default ({ color = '#222222', height = 8, width = 16 }: IconSVGProps) => (\n <svg transform=\"rotate(270)\" height={height} width={width} fill={color} preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 40 40\">\n <g>\n <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\" />\n </g>\n </svg>\n);\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\nimport { IconSVGProps } from '../Icon.component';\n\n/* tslint:disable max-line-length */\nexport default ({ color = '#222222', height = 10, width = 10 }: IconSVGProps) => (\n <svg height={height} width={width} fill={color} preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 40 40\">\n <g>\n <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\" />\n </g>\n </svg>\n);\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\nimport { IconSVGProps } from '../Icon.component';\n\n/* tslint:disable max-line-length */\nexport default ({ color = '#222222', width, height }: IconSVGProps) => (\n <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\">\n <g id=\"Page-1\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n 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\"\n id=\"Cart\"\n stroke={color}\n strokeWidth=\"0.833333333\"\n fill={color}\n />\n <path\n 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\"\n id=\"Wheel-1\"\n stroke={color}\n strokeWidth=\"0.833333333\"\n fill={color}\n />\n <path\n 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\"\n id=\"Wheel-2\"\n stroke={color}\n strokeWidth=\"0.4\"\n fill={color}\n />\n </g>\n </svg>\n);\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\nimport { IconSVGProps } from '../Icon.component';\n\n/* tslint:disable max-line-length */\nexport default ({ color = '#222222', width, height }: IconSVGProps) => (\n <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\">\n <defs>\n <path\n 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\"\n id=\"search-icon-path\"\n />\n </defs>\n <g id=\"Page-1\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <mask id=\"mask-2\" fill=\"white\">\n <use xlinkHref=\"#search-icon-path\" />\n </mask>\n <use id=\"Fill-1\" fill={color} xlinkHref=\"#search-icon-path\" />\n </g>\n </svg>\n);\n","// REACT\nimport * as React from 'react';\n// VENDOR\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n// COMPONENTS\nimport {\n Hamburger,\n ChevronDown,\n ChevronUp,\n ChevronRight,\n Cart,\n Search\n} from './SVGs';\n// THEME\n\ntype IconTypes = 'hamburger' | 'chevron-down' | 'chevron-up' | 'chevron-right' | 'cart' | 'search';\n\nexport interface IconSVGProps {\n width?: number;\n height?: number;\n color?: string;\n}\n\ninterface IconProps {\n type: IconTypes;\n children?: any;\n className?: string;\n color?: string;\n width?: number;\n height?: number;\n}\n\nexport const StyledIcon = styled.div`\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\nconst DefaultProps: IconProps = {\n type: 'hamburger', // TODO: default icon\n color: '#222',\n};\n\nconst Icons = {\n 'hamburger': Hamburger,\n 'chevron-down': ChevronDown,\n 'chevron-up': ChevronUp,\n 'chevron-right': ChevronRight,\n 'cart': Cart,\n 'search': Search,\n};\n\nexport const Icon = ({\n className,\n type,\n color,\n width,\n height,\n ...props\n}: IconProps = DefaultProps): React.ReactElement<any> => (\n <StyledIcon className={classNames(className)} {...props}>\n {Icons[type]({ color, width, height })}\n </StyledIcon>\n);\n\nIcon.defaultProps = DefaultProps;\n\nexport default Icon;\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\nimport { Icon } from '../../../Icon';\n// VENDOR\nimport styled from 'styled-components';\nimport classNames from 'classnames';\n// STYLES\nimport { fonts, colors } from '../../../theme';\n\nexport const StyledMobileCTAElement = styled.a`\n display: inline-flex;\n font-family: ${fonts.fontFamily};\n font-size: 0.875rem;\n justify-content: center;\n align-content: center;\n color: ${colors.neutrals.charcoal.base};\n cursor: pointer;\n\n .mobile-cta-image {\n min-width: 4rem;\n }\n\n .caret {\n padding: 0 0 0 .5rem;\n }\n\n > div {\n flex: 0 0 auto;\n display: flex;\n justify-content: center;\n flex-direction: column;\n }\n\n p {\n line-height: 1.125rem;\n padding: 0;\n margin: 0 0 0 0.375rem;\n }\n\n strong {\n color: ${colors.accent.savvyCyan.dark};\n }\n`;\n\ninterface MobileCTAProps {\n className?: string;\n href?: string;\n}\n\n/* tslint:disable max-line-length */\nconst MobileCTAImage = () => (\n\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 64 64\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlnsXlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <circle id=\"app-dl-path-1\" cx=\"32\" cy=\"32\" r=\"32\" />\n <polygon id=\"app-dl-path-3\" points=\"3.17682895e-20 0.0666753015 3.17682895e-20 46.3103205 28.8347517 46.3103205 28.8347517 0.0666753015 0 0.0666753015\" />\n <polygon id=\"app-dl-path-5\" points=\"23.5117697 0.21238419 0.246128136 0.21238419 0.246128136 37.0848289 23.5117697 37.0848289 23.5117697 0.21238419\" />\n </defs>\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g id=\"Illustrations-/-Grey-Circle-/-Hand-Holding-Phone\">\n <g id=\"app-dl-asset-0\">\n <g>\n <mask id=\"app-dl-mask-2\" fill=\"white\">\n <use xlinkHref=\"#app-dl-path-1\" />\n </mask>\n <use id=\"app-dl-asset-13\" fill=\"#F1F1F1\" xlinkHref=\"#app-dl-path-1\" />\n <g id=\"phone-and-hand\" mask=\"url(#app-dl-mask-2)\">\n <g transform=\"translate(15.040000, 10.560000)\">\n <g id=\"hand\" strokeWidth=\"1\" fill=\"none\" transform=\"translate(0.000000, 33.868290)\">\n <mask id=\"app-dl-mask-4\" fill=\"white\">\n <use xlinkHref=\"#app-dl-path-3\" />\n </mask>\n <g id=\"app-dl-asset-12\" />\n <path d=\"M28.3268731,6.8442934 C29.3576849,4.58295201 28.5003355,0.179072646 28.5003355,0.179072646 L15.7977333,0.0666753015 L16.7945559,3.35124018 L3.32426559,3.34017516 L4.46407742,14.9194311 L-0.000234408602,46.2893552 L25.4758785,46.3103205 L20.3265075,17.2227031 L20.4571903,15.3323312 C20.856271,14.9753386 27.2315989,9.24715062 28.3268731,6.8442934\" id=\"app-dl-asset-11\" fill=\"#DDAE7C\" mask=\"url(#app-dl-mask-4)\" />\n </g>\n <path d=\"M30.4486812,6.44053652 C32.4804177,5.26531454 34.0480253,6.74336874 34.0480253,6.74336874 C34.8872081,7.58664001 34.8414984,8.8247579 33.8083425,10.1001475 C32.7019339,11.4652219 28.6419769,15.9005493 28.6419769,15.9005493 C27.7934177,16.735085 26.4250575,16.7275142 25.5852887,15.8842429 L24.4109016,14.4195832 C23.5717188,13.576312 23.5787511,12.2164788 24.4273102,11.3825255 C24.4273102,11.3825255 28.7615253,7.41658807 30.4486812,6.44053652\" id=\"app-dl-asset-10\" fill=\"#DDAE7C\" />\n <path d=\"M26.7635435,40.6000113 L8.06945753,40.5848697 C6.81947366,40.5837049 5.79803817,39.5663051 5.79862419,38.324693 L5.82558118,5.98337633 C5.82675323,4.74118185 6.8505328,3.72611153 8.09993065,3.7266939 L26.7946027,3.74241788 C28.0440005,3.74358262 29.066022,4.76040005 29.06485,6.00259453 L29.037893,38.3433289 C29.036721,39.5855233 28.0135274,40.601176 26.7635435,40.6000113\" id=\"app-dl-asset-9\" fill=\"#3F3F3F\" />\n <g id=\"phone\" strokeWidth=\"1\" fill=\"none\" transform=\"translate(5.555484, 0.090850)\">\n <mask id=\"app-dl-mask-6\" fill=\"white\">\n <use xlinkHref=\"#app-dl-path-5\" />\n </mask>\n <g id=\"app-dl-asset-8\" />\n <path d=\"M20.9303441,37.084828 L2.79708065,37.0696864 C1.39297312,37.0685217 0.244956989,35.9259124 0.246129032,34.5305547 L0.273086022,2.74714813 C0.274258065,1.35179043 1.42403226,0.210928266 2.82813978,0.212093006 L20.9614032,0.227234617 C22.3655108,0.228399356 23.5129409,1.37100863 23.5117688,2.76636633 L23.4853978,34.5497729 C23.4842258,35.9451306 22.3344516,37.0859928 20.9303441,37.084828\" id=\"app-dl-asset-7\" fill=\"#1C1C1C\" mask=\"url(#app-dl-mask-6)\" />\n </g>\n <polygon id=\"app-dl-asset-6\" fill=\"#602D6C\" points=\"26.8972222 32.8598145 7.82222222 32.8440905 7.84683513 3.55555556 26.9218351 3.55555556\" />\n <path d=\"M17.4222222,17.2609404 C18.0612822,15.4428 18.6438521,13.7015718 18.9789625,12.6881984 C20.3674513,12.5224017 21.0793651,12.9690914 21.0793651,14.0537538 C21.0793651,15.1115694 20.2139968,16.1578663 18.3801158,16.8878978 C18.0355178,17.0250339 17.7124192,17.1502884 17.4222222,17.2609404 M15.0058249,20.5476333 C14.2963298,22.0562077 13.8581683,22.6918854 13.3000159,22.7811571 C13.047295,22.821585 12.8507937,22.700144 12.8507937,22.3178879 C12.8507937,21.8992152 13.2823186,20.3480107 15.5936508,19.1034761 C15.3590086,19.7214568 15.1528195,20.2352215 15.0058249,20.5476333 M22.6750674,22.0833189 C22.3422476,22.1854811 21.7568311,22.2689413 21.3131303,22.0808719 C20.8940795,21.9032022 20.6328244,21.4739284 20.3104301,20.662136 C20.0338901,19.9660518 19.6167831,18.7713039 19.329641,17.8894224 C22.3879253,16.8007695 23.8222222,15.416379 23.8222222,13.8648934 C23.8222222,12.4198523 22.6303616,11.4682313 19.98459,11.7991881 C18.8142872,11.9456586 17.9578085,12.1058497 17.0512346,12.2801985 C13.6629577,12.9318871 12.392376,14.3800743 12.392376,15.8695984 C12.392376,16.8781995 13.2864924,17.5763812 14.3217943,17.5763812 C15.0277221,17.5763812 15.0953993,17.1882694 14.8865365,17.0333219 C14.4472533,16.7075213 14.1842311,16.3816332 14.1842311,15.8228432 C14.1842311,14.9469045 14.8498707,13.8266153 17.2969399,13.2887996 C17.4550889,13.2540172 17.5901783,13.2241289 17.7106896,13.197474 C17.3048915,14.3318335 16.5843857,16.3331302 15.9291716,18.0565176 C12.1919066,19.537652 11.0222222,21.5660405 11.0222222,22.9739396 C11.0222222,24.025975 11.8589985,24.6310832 12.8472975,24.6310832 C14.353159,24.6310832 15.5379515,23.6328819 16.4864924,21.388196 C16.8531507,20.520647 17.2566517,19.4933438 17.6553816,18.441658 C17.9359857,19.3497573 18.3135997,20.5043045 18.5819229,21.2058071 C18.8540453,21.9174472 19.1008108,22.4284333 19.4708265,22.7936481 C19.9182381,23.2352443 20.4657519,23.4556491 21.1784827,23.4556491 C22.0963656,23.4556491 22.7274598,23.0061002 23.0043531,22.5175741 C23.1817628,22.2046202 22.9644183,21.9945277 22.6750674,22.0833189\" id=\"app-dl-asset-5\" fill=\"#FEFEFE\" />\n <path d=\"M8.1395457,25.5615378 L7.75101344,18.0606166 C7.75277151,16.074736 6.64929301,14.4953495 5.27097043,14.4941848 L4.67498656,14.4936024 C3.29725,14.4924377 2.13868548,16.159762 2.13692742,18.2108679 L1.63705108,25.0210988 C1.51750269,27.1962494 2.21662634,33.0240226 2.21662634,33.0240226 L4.59118548,47.3683697 C4.59118548,47.3683697 10.381078,47.0189479 16.5149651,46.6305073 L16.812078,45.8938097 C19.7380833,36.4105022 10.8282124,27.8712159 8.1395457,25.5615378\" id=\"app-dl-asset-4\" fill=\"#DDAE7C\" />\n <path d=\"M31.8508548,29.3768161 C31.8496828,31.0738413 30.6588871,32.4488161 29.1920753,32.4476514 C27.7246774,32.4464866 26.5368118,31.0697647 26.5379839,29.3721572 C26.5397419,27.675132 27.7299516,26.3001572 29.1967634,26.301322 C30.6641613,26.3024867 31.8520269,27.679791 31.8508548,29.3768161\" id=\"app-dl-asset-3\" fill=\"#DDAE7C\" />\n <path d=\"M31.855836,23.4095654 C31.854664,25.1065906 30.6638683,26.4815654 29.1970565,26.4804006 C27.7296586,26.4792359 26.541793,25.102514 26.5429651,23.4049065 C26.5447231,21.7078813 27.7349328,20.3329065 29.2017446,20.3340713 C30.6691425,20.335236 31.8570081,21.7125402 31.855836,23.4095654\" id=\"app-dl-asset-2\" fill=\"#DDAE7C\" />\n <path d=\"M31.8608758,17.3522221 C31.8597038,19.0492473 30.6689081,20.4242221 29.2020962,20.4230573 C27.7346984,20.4218926 26.5468328,19.0451707 26.5480048,17.3475632 C26.5497629,15.650538 27.7399726,14.2755632 29.2067844,14.2767279 C30.6741823,14.2778927 31.8620478,15.6551969 31.8608758,17.3522221\" id=\"app-dl-asset-1\" fill=\"#DDAE7C\" />\n </g>\n </g>\n </g>\n </g>\n </g>\n </g>\n </svg>\n);\n/* tslint:enable max-line-length */\n\nexport const MobileCTA = ({ href, className }: MobileCTAProps): React.ReactElement<any> => (\n <StyledMobileCTAElement className={classNames(className)} href={href} target=\"_blank\" rel=\"noreferrer nofollow\">\n <MobileCTAImage />\n <div>\n <p>Get Savings on the go!</p>\n <p>\n <strong>Download the App</strong>\n </p>\n </div>\n <Icon\n className=\"caret\"\n width={24}\n height={48}\n color={colors.accent.savvyCyan.dark}\n type=\"chevron-right\"\n />\n </StyledMobileCTAElement>\n);\n\nexport default MobileCTA;\n","// REACT\nimport * as React from 'react';\n// COMPONENTS\n// VENDOR\nimport styled, { css } from 'styled-components';\n// STYLES\nimport { colors } from '../../../theme';\n\nconst reset = css`\n margin: 0;\n padding: 0;\n`;\n\nexport const StyledFooterSectionElement = styled.section`\n width: 110