{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/stories/Components/SectionWrapper/SectionWrapper.styles.ts","webpack:///./src/stories/Components/SectionWrapper/SectionWrapper.tsx","webpack:///./src/hooks/useIntersectionObserver.ts","webpack:///./src/hooks/useInView.ts","webpack:///./src/stories/Components/Global/SiteWide/SiteWide.tsx","webpack:///./src/helpers/cssVar.ts","webpack:///./src/stories/Components/Global/SiteWide/SiteWide.styles.ts","webpack:///./src/stories/Widgets/RichText/RichText.styles.ts","webpack:///./src/helpers/brand.ts","webpack:///./src/helpers/grey.ts","webpack:///./src/helpers/animation.ts","webpack:///./src/stories/Components/Global/Typography/Heading.styles.ts","webpack:///./src/helpers/fonts.ts","webpack:///./src/stories/Components/Global/Typography/Paragraph.styles.ts","webpack:///./src/stories/Components/Buttons/LinkButton/LinkButton.styles.ts","webpack:///./src/stories/Components/Buttons/ButtonShared.styles.ts"],"names":["Device","from","size","until","Container","styled","section","cssVar","setCssVar","TabletLarge","flush","css","themeOption","themes","SiteWide","SectionWrapper","React","children","className","fullWidth","id","innerWidth","otherProps","ref","S","width","displayName","useIntersectionObserver","callback","options","observerRef","useRef","rootRef","elementRef","useEffect","current","IntersectionObserver","root","observe","disconnect","JSON","stringify","useInView","reverse","isEditMode","inView","setInView","useState","entries","isIntersecting","createElement","name","value","SitePadding","SiteWidth","div","DesktopLarge","linkStyles","brand","green","fonts","gotham","regular","burgundy","tableStyles","ParagraphStyles","RegularStyles","contentStyles","HeadingStyles","H1Styles","H2Styles","H3Styles","H4Styles","H5Styles","H6Styles","bold","LinkButtonStyles","Button","isActive","fadeIn","animation","easeInOutCubic","Content","leadParagraph","LargeStyles","black","grey","reduce","previous","hsl","paleGreen","lightGreen","lightBeige","greenGrey","paleBurgundy","lightBurgundy","white","validation","invalid","valid","beige","dark","light","beigeBurgundy","darkBurgundy","whiteBurgundy","threshold","rootMargin","slideInUpInitial","slideInUp","animate","duration","delay","easingFunc","fadeInUp","amount","Tablet","Desktop","Heading","h1","visual","lightItalic","regularItalic","medium","mediumItalic","boldItalic","SmallStyles","Paragraph","p","a","sharedButtonStyles","buttonTheme","bgColor","borderColor","fgColor","rgba","theme","Icon","span","Text"],"mappings":"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","file":"3-74d66af65dcc3d7ef34f.js","sourcesContent":["export var Device;\r\n(function (Device) {\r\n    Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n    Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n    Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n    Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n    Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n    Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n    Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n    Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n    Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n    Device[Device[\"DesktopXL\"] = 2560] = \"DesktopXL\";\r\n})(Device || (Device = {}));\r\nexport function from(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n    return `(max-width: ${size - 1}px)`;\r\n}\r\n","import { themes } from '@helpers/brand';\r\nimport { cssVar, setCssVar } from '@helpers/cssVar';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nimport SiteWide from '../Global/SiteWide/SiteWide';\r\nconst Container = styled.section `\r\n  color: ${cssVar('fgColor')};\r\n  ${setCssVar('sectionMargin', '48px')};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    ${setCssVar('sectionMargin', '96px')};\r\n  }\r\n\r\n  margin-top: ${cssVar('sectionMargin')};\r\n  margin-bottom: ${cssVar('sectionMargin')};\r\n\r\n  ${({ flush }) => flush === 'top' &&\r\n    css `\r\n      margin-top: 0;\r\n    `}\r\n\r\n  ${({ flush }) => flush === 'bottom' &&\r\n    css `\r\n      margin-bottom: 0;\r\n    `}\r\n\r\n  ${({ flush }) => flush === 'both' &&\r\n    css `\r\n      margin-top: 0;\r\n      margin-bottom: 0;\r\n    `}\r\n\r\n  ${({ flush, themeOption }) => themeOption &&\r\n    css `\r\n      ${themes[themeOption]}\r\n\r\n      ${themeOption !== 'light' &&\r\n        css `\r\n        margin-top: 0;\r\n        margin-bottom: 0;\r\n        padding-top: ${cssVar('sectionMargin')};\r\n        padding-bottom: ${cssVar('sectionMargin')};\r\n\r\n        ${() => flush === 'top' &&\r\n            css `\r\n            padding-top: 0;\r\n          `}\r\n\r\n        ${() => flush === 'bottom' &&\r\n            css `\r\n            padding-bottom: 0;\r\n          `}\r\n\r\n        ${() => flush === 'both' &&\r\n            css `\r\n            padding-top: 0;\r\n            padding-bottom: 0;\r\n          `}\r\n      `}\r\n    `}\r\n`;\r\nconst StyledSiteWide = styled(SiteWide) ``;\r\nexport default {\r\n    Container,\r\n    SiteWide: StyledSiteWide,\r\n};\r\n","import * as React from 'react';\r\nimport S from './SectionWrapper.styles';\r\nconst SectionWrapper = React.forwardRef(({ children, className, flush, fullWidth = false, id, innerWidth = 'default', themeOption = 'light', ...otherProps }, ref) => {\r\n    return (React.createElement(S.Container, { ref: ref, id: id, className: className, flush: flush, themeOption: themeOption, ...otherProps }, fullWidth ? children : React.createElement(S.SiteWide, { width: innerWidth }, children)));\r\n});\r\nSectionWrapper.displayName = 'SectionWrapper';\r\nexport default SectionWrapper;\r\n","import { useEffect, useRef } from 'react';\r\n/**\r\n * Use the IntersectionObserver to track visibility of an element in the viewport.\r\n * @param {IntersectionObserverCallback} callback\r\n * @param {IntersectionObserverInit} options\r\n * @returns {UseIntersectionObserverReturn}\r\n */\r\nfunction useIntersectionObserver(callback, options = {}) {\r\n    const observerRef = useRef(null);\r\n    const rootRef = useRef(null);\r\n    const elementRef = useRef(null);\r\n    useEffect(() => {\r\n        if (!elementRef.current) {\r\n            return undefined;\r\n        }\r\n        observerRef.current = new IntersectionObserver(callback, {\r\n            root: rootRef.current,\r\n            ...options,\r\n        });\r\n        observerRef.current.observe(elementRef.current);\r\n        return () => {\r\n            if (observerRef.current === null) {\r\n                return;\r\n            }\r\n            observerRef.current.disconnect();\r\n        };\r\n    }, [JSON.stringify(options)]);\r\n    return { elementRef, observerRef, rootRef };\r\n}\r\nexport default useIntersectionObserver;\r\n","import { useState } from 'react';\r\nimport useIntersectionObserver from './useIntersectionObserver';\r\nexport function useInView(options, reverse = false, isEditMode = false) {\r\n    const [inView, setInView] = useState(false);\r\n    const { elementRef } = useIntersectionObserver((entries) => {\r\n        if (entries[0].isIntersecting) {\r\n            setInView(true);\r\n        }\r\n        else if (reverse === true) {\r\n            setInView(false);\r\n        }\r\n    }, options);\r\n    return [elementRef, isEditMode ? true : inView];\r\n}\r\n","import React from 'react';\r\nimport S from './SiteWide.styles';\r\nconst SiteWide = ({ children, className, width = 'default' }) => {\r\n    return (React.createElement(S.Container, { className: className, width: width }, children));\r\n};\r\nexport default SiteWide;\r\n","const variables = [\r\n    'fgColor',\r\n    'bgColor',\r\n    'bgColorAlt',\r\n    'accentColor',\r\n    'accentColorAlt',\r\n    'siteWidth',\r\n    'sitePadding',\r\n    'sectionMargin',\r\n];\r\nfunction cssVar(name) {\r\n    return `var(--${name})`;\r\n}\r\nfunction setCssVar(name, value) {\r\n    return `--${name}: ${value}`;\r\n}\r\nexport { cssVar, setCssVar };\r\n","import { cssVar, setCssVar } from '@helpers/cssVar';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nexport const SitePadding = 18;\r\nexport const SiteWidth = 1640;\r\nexport const SiteWidthNarrow = 1100;\r\nconst Container = styled.div `\r\n  ${setCssVar('sitePadding', `${SitePadding}px`)};\r\n  ${setCssVar('siteWidth', `${SiteWidth}px`)};\r\n\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  max-width: calc(${cssVar('siteWidth')} + (${cssVar('sitePadding')} * 2));\r\n  padding-left: ${cssVar('sitePadding')};\r\n  padding-right: ${cssVar('sitePadding')};\r\n  width: 100%;\r\n\r\n  ${({ width }) => {\r\n    switch (width) {\r\n        case 'default':\r\n            return css `\r\n          @media ${from(Device.DesktopLarge)} {\r\n          }\r\n        `;\r\n        case 'narrow':\r\n            return css `\r\n          @media ${from(Device.TabletLarge)} {\r\n            ${setCssVar('siteWidth', `${SiteWidthNarrow}px`)};\r\n          }\r\n        `;\r\n    }\r\n}}\r\n`;\r\nexport default {\r\n    Container,\r\n};\r\n","import animation, { fadeIn } from '@helpers/animation';\r\nimport brand from '@helpers/brand';\r\nimport { cssVar } from '@helpers/cssVar';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport LinkButtonStyles from '@stories/Components/Buttons/LinkButton/LinkButton.styles';\r\nimport HeadingStyles from '@stories/Components/Global/Typography/Heading.styles';\r\nimport ParagraphStyles from '@stories/Components/Global/Typography/Paragraph.styles';\r\nimport SectionWrapper from '@stories/Components/SectionWrapper/SectionWrapper';\r\nimport styled, { css } from 'styled-components';\r\nconst linkStyles = css `\r\n  background-color: transparent;\r\n  background-image: linear-gradient(to right, ${brand.green} 0%, ${brand.green} 100%);\r\n  background-repeat: no-repeat;\r\n  background-size: 0% 100%;\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.regular};\r\n  margin: -3px;\r\n  padding: 3px;\r\n  text-decoration: underline;\r\n  text-underline-position: under;\r\n  transition: background-size 0.15s ease-out;\r\n\r\n  [data-theme='whiteBurgundy'] & {\r\n    background-image: linear-gradient(to right, ${brand.burgundy} 0%, ${brand.burgundy} 100%);\r\n  }\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    background-size: 100% 100%;\r\n  }\r\n`;\r\nconst tableStyles = css `\r\n  margin: 0 0 16px;\r\n\r\n  th,\r\n  td {\r\n    border: 1px solid ${cssVar('fgColor')};\r\n    color: ${cssVar('fgColor')};\r\n    ${ParagraphStyles.RegularStyles};\r\n    height: auto !important; // override inline height - no point this being content editable.\r\n    margin: 0;\r\n    padding: 8px 16px;\r\n  }\r\n`;\r\nconst contentStyles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.regular};\r\n\r\n  h1 {\r\n    ${HeadingStyles.H1Styles};\r\n  }\r\n\r\n  h2 {\r\n    ${HeadingStyles.H2Styles};\r\n  }\r\n\r\n  h3 {\r\n    ${HeadingStyles.H3Styles};\r\n  }\r\n\r\n  h4 {\r\n    ${HeadingStyles.H4Styles};\r\n  }\r\n\r\n  h5 {\r\n    ${HeadingStyles.H5Styles};\r\n  }\r\n\r\n  h6 {\r\n    ${HeadingStyles.H6Styles};\r\n  }\r\n\r\n  p {\r\n    ${ParagraphStyles.RegularStyles};\r\n  }\r\n\r\n  strong {\r\n    ${fonts.gotham.bold};\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    display: block;\r\n    ${ParagraphStyles.RegularStyles};\r\n    padding: 0 0 0 40px;\r\n  }\r\n\r\n  ol {\r\n    list-style: decimal;\r\n\r\n    li {\r\n      display: list-item;\r\n    }\r\n  }\r\n\r\n  ul {\r\n    list-style: disc;\r\n\r\n    li {\r\n      display: list-item;\r\n    }\r\n  }\r\n\r\n  a {\r\n    ${linkStyles};\r\n  }\r\n\r\n  > *:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  table {\r\n    ${tableStyles};\r\n  }\r\n\r\n  hr {\r\n    margin: 16px 0;\r\n  }\r\n\r\n  sup {\r\n    position: relative;\r\n    top: -0.5em;\r\n    font-size: 80%;\r\n  }\r\n\r\n  sub {\r\n    position: relative;\r\n    top: 0.5em;\r\n    font-size: 80%;\r\n  }\r\n`;\r\nconst Container = styled(SectionWrapper) `\r\n  ${LinkButtonStyles.Button} {\r\n    margin-top: 48px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    opacity: 0;\r\n\r\n    ${({ isActive }) => isActive &&\r\n    css `\r\n        ${fadeIn(isActive, 375, 0, animation.easeInOutCubic)};\r\n      `}\r\n  }\r\n`;\r\nconst Content = styled.div `\r\n  margin: 0 auto;\r\n  width: 100%;\r\n\r\n  ${contentStyles}\r\n\r\n  ${({ leadParagraph }) => leadParagraph &&\r\n    css `\r\n      p:first-child {\r\n        ${ParagraphStyles.LargeStyles};\r\n      }\r\n    `}\r\n`;\r\nexport default {\r\n    Container,\r\n    Content,\r\n    contentStyles,\r\n    linkStyles,\r\n};\r\n","import { css } from 'styled-components';\r\nimport { setCssVar } from './cssVar';\r\nimport greyscale from './grey';\r\nconst brand = {\r\n    black: '#000000',\r\n    grey: greyscale,\r\n    paleGreen: '#F4FCF3',\r\n    lightGreen: '#EAFAE9',\r\n    lightBeige: '#F0EEE6',\r\n    green: '#3CD52F',\r\n    greenGrey: '#75786D',\r\n    paleBurgundy: '#E9D5D8',\r\n    lightBurgundy: '#CF9EA4',\r\n    burgundy: '#76232F',\r\n    white: '#fff',\r\n    validation: {\r\n        invalid: '#da291c',\r\n        valid: '#008c15',\r\n    },\r\n};\r\nexport const beigeTheme = css `\r\n  ${setCssVar('fgColor', brand.black)};\r\n  ${setCssVar('bgColor', brand.lightBeige)};\r\n  ${setCssVar('bgColorAlt', brand.lightBeige)};\r\n  ${setCssVar('accentColor', brand.green)};\r\n  ${setCssVar('accentColorAlt', brand.green)};\r\n`;\r\nexport const darkTheme = css `\r\n  ${setCssVar('fgColor', brand.white)};\r\n  ${setCssVar('bgColor', brand.black)};\r\n  ${setCssVar('bgColorAlt', brand.black)};\r\n  ${setCssVar('accentColor', brand.green)};\r\n  ${setCssVar('accentColorAlt', brand.green)};\r\n`;\r\nexport const lightTheme = css `\r\n  ${setCssVar('fgColor', brand.black)};\r\n  ${setCssVar('bgColor', brand.white)};\r\n  ${setCssVar('bgColorAlt', brand.white)};\r\n  ${setCssVar('accentColor', brand.green)};\r\n  ${setCssVar('accentColorAlt', brand.green)};\r\n`;\r\nexport const lightGreenTheme = css `\r\n  ${setCssVar('fgColor', brand.black)};\r\n  ${setCssVar('bgColor', brand.lightGreen)};\r\n  ${setCssVar('bgColorAlt', brand.paleGreen)};\r\n  ${setCssVar('accentColor', brand.green)};\r\n  ${setCssVar('accentColorAlt', brand.green)};\r\n`;\r\nexport const beigeBurgundyTheme = css `\r\n  ${setCssVar('fgColor', brand.black)};\r\n  ${setCssVar('bgColor', brand.lightBeige)};\r\n  ${setCssVar('bgColorAlt', brand.lightBeige)};\r\n  ${setCssVar('accentColor', brand.burgundy)};\r\n  ${setCssVar('accentColorAlt', brand.burgundy)};\r\n`;\r\nexport const darkBurgundyTheme = css `\r\n  ${setCssVar('fgColor', brand.white)};\r\n  ${setCssVar('bgColor', brand.black)};\r\n  ${setCssVar('bgColorAlt', brand.black)};\r\n  ${setCssVar('accentColor', brand.lightBurgundy)};\r\n  ${setCssVar('accentColorAlt', brand.lightBurgundy)};\r\n`;\r\nexport const whiteBurgundyTheme = css `\r\n  ${setCssVar('fgColor', brand.black)};\r\n  ${setCssVar('bgColor', brand.white)};\r\n  ${setCssVar('bgColorAlt', brand.white)};\r\n  ${setCssVar('accentColor', brand.burgundy)};\r\n  ${setCssVar('accentColorAlt', brand.burgundy)};\r\n`;\r\nexport const burgundyTheme = css `\r\n  ${setCssVar('fgColor', brand.white)};\r\n  ${setCssVar('bgColor', brand.burgundy)};\r\n  ${setCssVar('bgColorAlt', brand.burgundy)};\r\n  ${setCssVar('accentColor', brand.white)};\r\n  ${setCssVar('accentColorAlt', brand.white)};\r\n`;\r\nexport const themes = {\r\n    beige: beigeTheme,\r\n    dark: darkTheme,\r\n    light: lightTheme,\r\n    lightGreen: lightGreenTheme,\r\n    beigeBurgundy: beigeBurgundyTheme,\r\n    darkBurgundy: darkBurgundyTheme,\r\n    whiteBurgundy: whiteBurgundyTheme,\r\n    burgundy: burgundyTheme,\r\n};\r\nexport default brand;\r\n","import { hsl } from 'polished';\r\nconst greyscaleValues = [44];\r\nconst greyscale = greyscaleValues.reduce((previous, current) => ({\r\n    ...previous,\r\n    [`grey${current}`]: grey(current),\r\n}), {});\r\nfunction grey(value) {\r\n    return hsl(0, 0, value / 100);\r\n}\r\nexport { greyscale as default, grey };\r\n","import { css } from 'styled-components';\r\nexport default {\r\n    inView: {\r\n        threshold: 0.25,\r\n        rootMargin: '0px 0px -35% 0px',\r\n    },\r\n    easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\r\n};\r\nexport const slideInUpInitial = css `\r\n  > span {\r\n    opacity: 0;\r\n    transform: translateY(100%);\r\n  }\r\n`;\r\nexport function slideInUp(animate, duration, delay, easingFunc) {\r\n    return css `\r\n    overflow: hidden;\r\n\r\n    > span {\r\n      display: inline-block;\r\n      transition: transform ${duration}ms ${delay}ms ${easingFunc},\r\n        opacity ${duration}ms ${delay}ms ${easingFunc};\r\n    }\r\n\r\n    ${animate\r\n        ? css `\r\n          > span {\r\n            opacity: 1;\r\n            transform: translateY(0px);\r\n          }\r\n        `\r\n        : css `\r\n          ${slideInUpInitial};\r\n        `}\r\n  `;\r\n}\r\nexport function fadeInUp(animate, amount, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: transform ${duration}ms ${delay}ms ${easingFunc},\r\n      opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${animate\r\n        ? css `\r\n          opacity: 1;\r\n          transform: translateY(0px);\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          transform: translateY(${amount}px);\r\n        `}\r\n  `;\r\n}\r\nexport function fadeIn(animate, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${animate\r\n        ? css `\r\n          opacity: 1;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n        `}\r\n  `;\r\n}\r\n","import { cssVar } from '@helpers/cssVar';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nconst H1Styles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.regular};\r\n  font-size: 35px;\r\n  letter-spacing: normal;\r\n  line-height: 45px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 35px;\r\n    line-height: 45px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 70px;\r\n    line-height: 70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 70px;\r\n    line-height: 70px;\r\n  }\r\n`;\r\nconst H2Styles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.regular};\r\n  font-size: 28px;\r\n  letter-spacing: normal;\r\n  line-height: 28px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 32px;\r\n    line-height: 34px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 50px;\r\n    line-height: 54px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 60px;\r\n    line-height: 64px;\r\n  }\r\n`;\r\nconst H3Styles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.regular};\r\n  font-size: 24px;\r\n  letter-spacing: normal;\r\n  line-height: 26px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 26px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    ${fonts.gotham.regular};\r\n    font-size: 40px;\r\n    line-height: 44px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 50px;\r\n    line-height: 60px;\r\n  }\r\n`;\r\nconst H4Styles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.regular};\r\n  font-size: 21px;\r\n  letter-spacing: normal;\r\n  line-height: 28px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 21px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 24px;\r\n    line-height: 32px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 24px;\r\n    line-height: 32px;\r\n  }\r\n`;\r\nconst H5Styles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.bold};\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  line-height: 18px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 16px;\r\n    line-height: 18px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 18px;\r\n    line-height: 20px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 20px;\r\n    line-height: 28px;\r\n  }\r\n`;\r\nconst H6Styles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.gotham.bold};\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  line-height: 18px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 16px;\r\n    line-height: 18px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 18px;\r\n    line-height: 20px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 20px;\r\n    line-height: 28px;\r\n  }\r\n`;\r\nconst Heading = styled.h1 `\r\n  ${({ visual }) => {\r\n    switch (visual) {\r\n        case 'h1':\r\n            return H1Styles;\r\n        case 'h2':\r\n            return H2Styles;\r\n        case 'h3':\r\n            return H3Styles;\r\n        case 'h4':\r\n            return H4Styles;\r\n        case 'h5':\r\n            return H5Styles;\r\n        case 'h6':\r\n            return H6Styles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n`;\r\nexport default {\r\n    H1Styles,\r\n    H2Styles,\r\n    H3Styles,\r\n    H4Styles,\r\n    H5Styles,\r\n    H6Styles,\r\n    Heading,\r\n};\r\n","import { css } from 'styled-components';\r\nexport default {\r\n    gotham: {\r\n        light: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        lightItalic: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: italic;\r\n      font-weight: 300;\r\n    `,\r\n        regular: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        regularItalic: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: italic;\r\n      font-weight: 400;\r\n    `,\r\n        medium: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n    `,\r\n        mediumItalic: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: italic;\r\n      font-weight: 500;\r\n    `,\r\n        bold: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        boldItalic: css `\r\n      font-family: 'HCo Gotham', sans-serif;\r\n      font-style: italic;\r\n      font-weight: 700;\r\n    `,\r\n    },\r\n};\r\n","import fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\n/**\r\n * 20px / 28px\r\n */\r\nconst LargeStyles = css `\r\n  ${fonts.gotham.regular};\r\n  font-size: 18px;\r\n  letter-spacing: normal;\r\n  line-height: 26px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 18px;\r\n    line-height: 26px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 21px;\r\n    line-height: 32px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n  }\r\n`;\r\n/**\r\n * 18px / 28px\r\n */\r\nconst RegularStyles = css `\r\n  ${fonts.gotham.light};\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  line-height: 26px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 16px;\r\n    line-height: 26px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 18px;\r\n    line-height: 30px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 18px;\r\n    line-height: 30px;\r\n  }\r\n`;\r\n/**\r\n * 16px / 26px\r\n */\r\nconst SmallStyles = css `\r\n  ${fonts.gotham.regular};\r\n  font-size: 14px;\r\n  letter-spacing: normal;\r\n  line-height: 20px;\r\n  margin: 0 0 16px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 14px;\r\n    line-height: 20px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    ${fonts.gotham.bold};\r\n    font-size: 14px;\r\n    line-height: 22px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 16px;\r\n    line-height: 22px;\r\n  }\r\n`;\r\nconst Paragraph = styled.p `\r\n  ${({ size }) => {\r\n    switch (size) {\r\n        case 'large':\r\n            return LargeStyles;\r\n        case 'regular':\r\n            return RegularStyles;\r\n        case 'small':\r\n            return SmallStyles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n`;\r\nexport default {\r\n    Paragraph,\r\n    SmallStyles,\r\n    RegularStyles,\r\n    LargeStyles,\r\n};\r\n","import brand from '@helpers/brand';\r\nimport { rgba } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nimport { buttonTheme, sharedButtonStyles } from '../ButtonShared.styles';\r\nconst Button = styled.a `\r\n  ${sharedButtonStyles};\r\n\r\n  ${({ themeOption }) => themeOption === 'black' &&\r\n    css `\r\n      ${buttonTheme({\r\n        bgColor: brand.black,\r\n        borderColor: brand.black,\r\n        fgColor: brand.white,\r\n    })}\r\n\r\n      &:focus,\r\n      &:hover {\r\n        ${buttonTheme({\r\n        bgColor: brand.white,\r\n        borderColor: brand.black,\r\n        fgColor: brand.black,\r\n    })}\r\n      }\r\n    `}\r\n\r\n  ${({ themeOption }) => themeOption === 'blackOutline' &&\r\n    css `\r\n      ${buttonTheme({\r\n        bgColor: brand.white,\r\n        borderColor: brand.black,\r\n        fgColor: brand.black,\r\n    })}\r\n\r\n      &:focus,\r\n      &:hover {\r\n        ${buttonTheme({\r\n        bgColor: brand.black,\r\n        borderColor: brand.black,\r\n        fgColor: brand.white,\r\n    })}\r\n      }\r\n    `}\r\n\r\n  ${({ themeOption }) => themeOption === 'white' &&\r\n    css `\r\n      ${buttonTheme({\r\n        bgColor: brand.white,\r\n        borderColor: brand.white,\r\n        fgColor: brand.black,\r\n    })}\r\n\r\n      &:focus,\r\n      &:hover {\r\n        ${buttonTheme({\r\n        bgColor: brand.black,\r\n        borderColor: brand.white,\r\n        fgColor: brand.white,\r\n    })}\r\n      }\r\n    `}\r\n\r\n  ${({ themeOption }) => themeOption === 'whiteOutline' &&\r\n    css `\r\n      ${buttonTheme({\r\n        bgColor: rgba(brand.white, 0),\r\n        borderColor: brand.white,\r\n        fgColor: brand.white,\r\n    })}\r\n\r\n      &:focus,\r\n      &:hover {\r\n        ${buttonTheme({\r\n        bgColor: brand.white,\r\n        borderColor: brand.white,\r\n        fgColor: brand.black,\r\n    })}\r\n      }\r\n    `}\r\n`;\r\nexport default {\r\n    Button,\r\n};\r\n","import fonts from '@helpers/fonts';\r\nimport { Device, until } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nexport function buttonTheme(theme) {\r\n    const value = css `\r\n    ${theme.bgColor &&\r\n        css `\r\n      --buttonBgColor: ${theme.bgColor};\r\n    `}\r\n\r\n    ${theme.borderColor &&\r\n        css `\r\n      --buttonBorderColor: ${theme.borderColor};\r\n    `}\r\n\r\n    ${theme.fgColor &&\r\n        css `\r\n      --buttonColor: ${theme.fgColor};\r\n    `}\r\n  `;\r\n    return value;\r\n}\r\nexport const sharedButtonStyles = css `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border: 0;\r\n  background-color: var(--buttonBgColor);\r\n  border: 1px solid var(--buttonBorderColor);\r\n  border-radius: 5px;\r\n  color: var(--buttonColor);\r\n  height: 50px;\r\n  justify-content: flex-start;\r\n  margin: 0;\r\n  outline: none;\r\n  padding: 0 18px;\r\n  place-content: center;\r\n  place-items: center;\r\n  text-decoration: none;\r\n  transition: background-color 0.15s ease-out, background-size 0.15s ease-out,\r\n    border-color 0.15s ease-out, color 0.15s ease-out, opacity 0.15s ease-out,\r\n    transform 0.15s ease-out;\r\n  user-select: none;\r\n  width: auto;\r\n\r\n  &:disabled {\r\n    opacity: 0.5;\r\n  }\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  ${() => Icon} {\r\n    margin-left: 24px;\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    height: 40px;\r\n    padding: 0 12px;\r\n\r\n    ${() => Icon} {\r\n      margin-left: 12px;\r\n    }\r\n  }\r\n`;\r\nexport const Icon = styled.span `\r\n  display: block;\r\n  height: 24px;\r\n  width: 24px;\r\n`;\r\nexport const Text = styled.span `\r\n  color: currentColor;\r\n  ${fonts.gotham.regular};\r\n  font-size: 16px;\r\n  line-height: 21px;\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    font-size: 14px;\r\n    line-height: 18px;\r\n  }\r\n`;\r\n"],"sourceRoot":""}