{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/stories/Components/Global/SectionWrapper/SectionWrapper.tsx","webpack:///./src/stories/Components/Global/SiteWide/SiteWide.tsx","webpack:///./src/stories/Components/Global/SectionWrapper/SectionWrapper.styles.ts","webpack:///./src/helpers/global.ts","webpack:///./src/helpers/brand.ts","webpack:///./src/img/icons/chevron-right.svg","webpack:///./src/stories/Widgets/UspBanner/UspBanner.styles.ts","webpack:///./src/stories/Widgets/UspBanner/UspBanner.tsx","webpack:///./src/hooks/useIntersectionObserver.ts","webpack:///./src/hooks/useInView.ts","webpack:///./src/helpers/fonts.ts","webpack:///./src/helpers/cssVar.ts","webpack:///./src/helpers/fluid.ts","webpack:///./node_modules/react-use/esm/misc/util.js","webpack:///./node_modules/react-use/esm/useMedia.js","webpack:///./src/stories/Components/Global/SiteWide/SiteWide.styles.ts","webpack:///./src/helpers/animation.ts"],"names":["Device","from","size","until","between","start","end","SectionWrapper","React","ref","children","className","flush","fullWidth","id","innerWidth","spacing","otherProps","inViewRef","active","useInView","rootMargin","S","ScrollAnchor","Container","r","current","SiteWide","width","displayName","createElement","s","styled","section","setCssVar","TabletLarge","DesktopLarge","props","css","setSpacing","cssVar","div","SectionWrapperStyles","value","type","side","output","navHeight","navHeightMobile","siteWideWidth","siteWideWidthNarrow","siteWideWidthInner","siteWidePadding","siteWidePaddingTablet","siteWidePaddingMobile","ButtonReset","colourWithTransparency","hexValue","hex","replace","bigint","parseInt","brand","black","white","primary","grey","dark","base","light","lightAlt","blue","highlight","steel","grey13","grey20","grey35","grey40","grey44","grey60","grey76","grey80","grey90","grey97","validation","invalid","_path","_extends","Object","assign","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","SvgChevronRight","xmlns","height","d","fill","stroke","strokeWidth","fluid","ItemList","Tablet","DesktopSmall","Item","Arrow","IconWrapper","transition","Icon","img","Copy","Title","h3","fonts","inter","extraBold","Text","p","sofiaPro","regular","span","RatingImage","UspBannerStyles","UspBanner","items","mobileLayout","useMedia","style","map","item","renderItem","as","href","url","alt","loading","src","icon","title","text","SvgArrow","renderLinkableItem","altText","role","undefined","renderNonlinkableItem","trustpilotRatingAltText","trustpilotRatingUrl","renderTrustpilotItem","useIntersectionObserver","callback","options","observerRef","useRef","rootRef","elementRef","useEffect","IntersectionObserver","root","observe","disconnect","reverse","isEditMode","inView","setInView","useState","entries","isIntersecting","medium","semiBold","bold","name","DEFAULT_MIN_VALUE","TabletSmall","DEFAULT_MAX_VALUE","ActualDesktop","min","max","minWidth","maxWidth","minRem","maxRem","minWidthRem","maxWidthRem","slope","yAxisIntersection","clampMin","round","clampVal","clampMax","num","Math","isBrowser","window","query","defaultState","_a","matchMedia","matches","state","setState","mounted","mql","onChange","addListener","removeListener","global","MobileLarge","cubicEaseOut","FadeUpBase","FadeUpActive","shouldAnimate","innerCss","properties","duration","timing","verticalFadeIn","amount","hidden","opacity","y","visible"],"mappings":"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","file":"UspBanner-1d130af8698c8f44a17b.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[\"TabletSmall\"] = 568] = \"TabletSmall\";\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\nexport function between(start, end) {\r\n    return `${from(start)} and ${until(end)}`;\r\n}\r\n","import { useInView } from '@hooks/useInView';\r\nimport * as React from 'react';\r\nimport S from './SectionWrapper.styles';\r\nimport { rootMargin } from '@helpers/animation';\r\nconst SectionWrapper = React.forwardRef(({ children, className, flush = 'none', fullWidth = false, id, innerWidth = 'default', spacing = 'margin', ...otherProps }, ref) => {\r\n    const [inViewRef, active] = useInView({\r\n        rootMargin,\r\n    });\r\n    return (React.createElement(React.Fragment, null,\r\n        id && React.createElement(S.ScrollAnchor, { id: id }),\r\n        React.createElement(S.Container, { ref: (r) => {\r\n                // Handle forwarded ref.\r\n                if (typeof ref === 'function') {\r\n                    ref(r);\r\n                }\r\n                else if (ref) {\r\n                    ref.current = r;\r\n                }\r\n                // Handle internal refs.\r\n                inViewRef.current = r;\r\n            }, className: className, flush: flush, spacing: spacing, \"data-active\": active, ...otherProps }, fullWidth ? children : React.createElement(S.SiteWide, { width: innerWidth }, children))));\r\n});\r\nSectionWrapper.displayName = 'SectionWrapper';\r\nexport default SectionWrapper;\r\n","import React from 'react';\r\nimport s from './SiteWide.styles';\r\nconst SiteWide = ({ children, className, width = 'default', id }) => {\r\n    return (React.createElement(s.Container, { id: id, className: className, width: width }, children));\r\n};\r\nexport default SiteWide;\r\n","import { cssVar, setCssVar } from '@helpers/cssVar';\r\nimport { Device, from } from '@helpers/media';\r\nimport SiteWide from '@stories/Components/Global/SiteWide/SiteWide';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled.section `\r\n  ${setCssVar('sectionMargin', '32px')};\r\n  ${setCssVar('sitePadding', '18px')};\r\n  ${setCssVar('siteWidth', '100%')};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    ${setCssVar('sectionMargin', '64px')};\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    ${setCssVar('sitePadding', '18px')};\r\n    ${setCssVar('siteWidth', '1640px')};\r\n  }\r\n\r\n  ${(props) => css `\r\n    /* Set default spacing. */\r\n    ${setSpacing(cssVar('sectionMargin'), props.spacing, 'both')}\r\n\r\n    /* Override based on flush prop. */\r\n    ${props.flush && setSpacing('0px', props.spacing, props.flush)}\r\n  `}\r\n`;\r\nconst ScrollAnchor = styled.div `\r\n  scroll-margin: calc(var(--headerHeight) + var(--headerReducedOffset) + 32px) 0 0;\r\n`;\r\nconst StyledSiteWide = styled(SiteWide) ``;\r\nconst SectionWrapperStyles = {\r\n    Container,\r\n    SiteWide: StyledSiteWide,\r\n    ScrollAnchor,\r\n};\r\nexport default SectionWrapperStyles;\r\nfunction setSpacing(value, type, side) {\r\n    let output = '';\r\n    if (side === 'none') {\r\n        return;\r\n    }\r\n    if (side === 'both') {\r\n        output = `\r\n      ${type}-top: ${value};\r\n      ${type}-bottom: ${value};\r\n    `;\r\n    }\r\n    else {\r\n        output = `\r\n      ${type}-${side}: ${value};\r\n    `;\r\n    }\r\n    return css `\r\n    ${output}\r\n  `;\r\n}\r\n","import { css } from 'styled-components';\r\nexport default {\r\n    navHeight: 175,\r\n    navHeightMobile: 92,\r\n    siteWideWidth: 1760,\r\n    siteWideWidthNarrow: 1430,\r\n    siteWideWidthInner: 860,\r\n    siteWidePadding: 36,\r\n    siteWidePaddingTablet: 26,\r\n    siteWidePaddingMobile: 15,\r\n};\r\nexport const ButtonReset = css `\r\n  border: none;\r\n  outline: none;\r\n  padding: 0px;\r\n  background: none;\r\n  border-radius: 0px;\r\n`;\r\n","const brand = {\r\n    black: '#191919',\r\n    white: '#FEFFFF',\r\n    primary: {\r\n        grey: {\r\n            dark: '#3B4044',\r\n            base: '#949494',\r\n            light: '#F1F1F1',\r\n            lightAlt: '#F1F3F8',\r\n        },\r\n        blue: { base: '#01346B', light: '#7185BE', highlight: '#3CB5AB', steel: '#227C9D' },\r\n    },\r\n    grey: {\r\n        grey13: '#212121',\r\n        grey20: '#333333',\r\n        grey35: '#595959',\r\n        grey40: '#666666',\r\n        grey44: '#707070',\r\n        grey60: '#999999',\r\n        grey76: '#C2C2C2',\r\n        grey80: '#CCCCCC',\r\n        grey90: '#E5E5E5',\r\n        grey97: '#F7F7F7',\r\n    },\r\n    validation: {\r\n        invalid: '#DA291C',\r\n    },\r\n};\r\nexport default brand;\r\nexport function colourWithTransparency(hexValue, value) {\r\n    const hex = hexValue.replace('#', '');\r\n    const bigint = parseInt(hex, 16);\r\n    const r = (bigint >> 16) & 255;\r\n    const g = (bigint >> 8) & 255;\r\n    const b = bigint & 255;\r\n    const rgbValue = `${r}, ${g}, ${b}`;\r\n    return `rgba(${rgbValue}, ${value})`;\r\n}\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgChevronRight(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: 7.121,\n    height: 11.414\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M.707.707l5 5-5 5\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 2\n  })));\n}\n\nexport default __webpack_public_path__ + \"691bd584ed21f4acc2b536fc7d2dcc86.svg\";\nexport { SvgChevronRight as ReactComponent };","import { transition } from '@helpers/animation';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport SectionWrapper from '@stories/Components/Global/SectionWrapper/SectionWrapper';\r\nimport styled from 'styled-components';\r\nconst Container = styled(SectionWrapper) `\r\n  background-color: ${brand.white};\r\n  padding: ${fluid(8, 10)} 0;\r\n  color: ${brand.black};\r\n  overflow: hidden;\r\n  position: relative;\r\n`;\r\nconst ItemList = styled.div `\r\n  --speed: 20s;\r\n  --count: 5;\r\n  --cardGap: ${fluid(32, 40)};\r\n\r\n  display: flex;\r\n  gap: var(--cardGap);\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    &[data-scroll-active='true'] {\r\n      animation: scrollingMobile var(--speed) linear infinite;\r\n    }\r\n  }\r\n\r\n  @media ${`${from(Device.Tablet)} and ${until(Device.TabletLarge)}`} {\r\n    &[data-scroll-active='true'] {\r\n      animation: scrollingTablet var(--speed) linear infinite;\r\n    }\r\n  }\r\n\r\n  @media ${`${from(Device.TabletLarge)} and ${until(Device.DesktopSmall)}`} {\r\n    &[data-scroll-active-on='tablet-large'][data-scroll-active='true'] {\r\n      animation: scrolling var(--speed) linear infinite;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    justify-content: space-around;\r\n  }\r\n\r\n  &:hover {\r\n    animation-play-state: paused;\r\n  }\r\n\r\n  @keyframes scrollingMobile {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(\r\n        calc(var(--count) * (var(--cardGap) + calc(80% - var(--cardGap))) * -1)\r\n      );\r\n    }\r\n  }\r\n\r\n  @keyframes scrollingTablet {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(\r\n        calc(var(--count) * (var(--cardGap) + calc(50% - var(--cardGap))) * -1)\r\n      );\r\n    }\r\n  }\r\n\r\n  @keyframes scrolling {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(\r\n        calc(var(--count) * (var(--cardGap) + calc(33% - var(--cardGap))) * -1)\r\n      );\r\n    }\r\n  }\r\n`;\r\nconst Item = styled.div `\r\n  --cardWidth: 80%;\r\n\r\n  display: grid;\r\n  align-items: center;\r\n  color: currentColor;\r\n  gap: 3px 12px;\r\n  text-decoration: none;\r\n\r\n  @media ${until(Device.DesktopSmall)} {\r\n    flex: 0 0 calc(var(--cardWidth) - var(--cardGap));\r\n    margin: 0 auto;\r\n  }\r\n\r\n  @media ${`${from(Device.Tablet)} and ${until(Device.TabletLarge)}`} {\r\n    --cardWidth: 50%;\r\n  }\r\n\r\n  @media ${`${from(Device.TabletLarge)} and ${until(Device.DesktopSmall)}`} {\r\n    --cardWidth: 33%;\r\n  }\r\n\r\n  a& {\r\n    &:hover {\r\n      ${() => Arrow} {\r\n        transform: translateX(3px);\r\n      }\r\n    }\r\n  }\r\n\r\n  grid-template-columns: auto 1fr;\r\n`;\r\nconst IconWrapper = styled.div `\r\n  ${transition('transform, opacity')};\r\n  grid-area: 1 / 1 / span 1 / span 1;\r\n  transition-delay: calc(100ms * var(--i));\r\n\r\n  [data-in-view='false'] & {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    width: 30px;\r\n  }\r\n`;\r\nconst Icon = styled.img `\r\n  object-fit: contain;\r\n  object-position: center;\r\n`;\r\nconst Copy = styled.div `\r\n  grid-area: 1 / 2 / span 1 / span 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 3px;\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    gap: 2px;\r\n  }\r\n`;\r\nconst Title = styled.h3 `\r\n  ${transition('transform, opacity')};\r\n  ${fonts.inter.extraBold};\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  font-size: ${fluid(14, 18)};\r\n  line-height: ${fluid(20, 26)};\r\n  text-transform: uppercase;\r\n  transition-delay: calc(250ms * var(--i));\r\n\r\n  [data-in-view='false'] & {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    white-space: nowrap;\r\n  }\r\n`;\r\nconst Text = styled.p `\r\n  ${transition('transform, opacity')};\r\n  ${fonts.sofiaPro.regular};\r\n  font-size: ${fluid(12, 14)};\r\n  line-height: ${fluid(18, 24)};\r\n  transition-delay: calc(300ms * var(--i));\r\n\r\n  [data-in-view='false'] & {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n`;\r\nconst Arrow = styled.span `\r\n  transition: transform 0.2s ease-in-out;\r\n  grid-area: 1 / 3 / span 2 / span 1;\r\n  margin: 0 0 0 8px;\r\n`;\r\nconst RatingImage = styled.img `\r\n  display: inline-block;\r\n  margin-left: 12px;\r\n`;\r\nconst UspBannerStyles = {\r\n    Arrow,\r\n    Container,\r\n    Copy,\r\n    Icon,\r\n    IconWrapper,\r\n    Item,\r\n    ItemList,\r\n    RatingImage,\r\n    Text,\r\n    Title,\r\n};\r\nexport default UspBannerStyles;\r\n","import { ReactComponent as SvgArrow } from '@img/icons/chevron-right.svg';\r\nimport * as React from 'react';\r\nimport S from './UspBanner.styles';\r\nimport { useInView } from '@hooks/useInView';\r\nimport { rootMargin } from '@helpers/animation';\r\nimport { useMedia } from 'react-use';\r\nimport { Device, until } from '@helpers/media';\r\nconst UspBanner = ({ items, ...props }) => {\r\n    const [inViewRef, active] = useInView({\r\n        rootMargin,\r\n    });\r\n    const mobileLayout = useMedia(items.length > 3 ? until(Device.DesktopSmall) : until(Device.TabletLarge));\r\n    return (React.createElement(S.Container, { ref: inViewRef, id: props.id, flush: \"both\" },\r\n        React.createElement(S.ItemList, { \"data-in-view\": active, \"data-scroll-active\": items.length !== 1, \"data-scroll-active-on\": items.length > 3 ? 'tablet-large' : 'tablet', style: {\r\n                '--speed': `${items.length * 3}s`,\r\n                '--count': items.length,\r\n            } },\r\n            items.map((item, i) => renderItem(item, i)),\r\n            mobileLayout && items.length > 1 && items.map((item, i) => renderItem(item, i)))));\r\n    function renderItem(item, i) {\r\n        switch (item.type) {\r\n            case 'linkable':\r\n                return renderLinkableItem(item, i);\r\n            case 'nonlinkable':\r\n                return renderNonlinkableItem(item, i);\r\n            case 'trustpilot':\r\n                return renderTrustpilotItem(item, i);\r\n        }\r\n    }\r\n    function renderLinkableItem(item, i) {\r\n        return (React.createElement(S.Item, { key: item.id, as: \"a\", href: item.url, target: item.target, \"data-type\": item.type, style: { '--i': i + 1 } },\r\n            React.createElement(S.IconWrapper, null,\r\n                React.createElement(S.Icon, { alt: \"\", loading: \"lazy\", src: item.icon, width: \"50\", height: \"40\" })),\r\n            React.createElement(S.Copy, null,\r\n                item.title && React.createElement(S.Title, null, item.title),\r\n                item.text && React.createElement(S.Text, null,\r\n                    item.text,\r\n                    \" \",\r\n                    React.createElement(S.Arrow, { as: SvgArrow })))));\r\n    }\r\n    function renderNonlinkableItem(item, i) {\r\n        return (React.createElement(S.Item, { key: item.id, \"data-type\": item.type, style: { '--i': i + 1 } },\r\n            React.createElement(S.IconWrapper, null,\r\n                React.createElement(S.Icon, { alt: item.altText, loading: \"lazy\", src: item.icon, width: \"60\", height: \"40\", role: !item.altText ? 'presentation' : undefined })),\r\n            React.createElement(S.Copy, null,\r\n                item.title && React.createElement(S.Title, null, item.title),\r\n                item.text && React.createElement(S.Text, null, item.text))));\r\n    }\r\n    function renderTrustpilotItem(item, i) {\r\n        return (React.createElement(S.Item, { key: item.id, \"data-type\": item.type, style: { '--i': i + 1 } },\r\n            React.createElement(S.IconWrapper, null,\r\n                React.createElement(S.Icon, { alt: \"\", loading: \"lazy\", src: item.icon, width: \"60\", height: \"40\" })),\r\n            React.createElement(S.Copy, null,\r\n                React.createElement(S.Title, null,\r\n                    item.title,\r\n                    React.createElement(S.RatingImage, { alt: item.trustpilotRatingAltText, loading: \"lazy\", src: item.trustpilotRatingUrl })),\r\n                item.text && React.createElement(S.Text, null, item.text))));\r\n    }\r\n};\r\nexport default UspBanner;\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    }, [callback, 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 { css } from 'styled-components';\r\nexport default {\r\n    inter: {\r\n        light: css `\r\n      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        regular: css `\r\n      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        medium: css `\r\n      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n    `,\r\n        semiBold: css `\r\n      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n    `,\r\n        bold: css `\r\n      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        extraBold: css `\r\n      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 800;\r\n    `,\r\n    },\r\n    sofiaPro: {\r\n        light: css `\r\n      font-family: 'sofia-pro', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        regular: css `\r\n      font-family: 'sofia-pro', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        medium: css `\r\n      font-family: 'sofia-pro', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n    `,\r\n        semiBold: css `\r\n      font-family: 'sofia-pro', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n    `,\r\n        bold: css `\r\n      font-family: 'sofia-pro', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        black: css `\r\n      font-family: 'sofia-pro', system-ui, -apple-system, BlinkMacSystemFont;\r\n      font-style: normal;\r\n      font-weight: 900;\r\n    `,\r\n    },\r\n};\r\n","const variables = [\r\n    'fgColor',\r\n    'bgColor',\r\n    'accentColor',\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 { Device } from './media';\r\n/**\r\n * Base pixel value for the \"rem\" unit.\r\n */\r\nexport const PIXELS_PER_REM = 16;\r\n/**\r\n * Default pixel value for the min width.\r\n */\r\nexport const DEFAULT_MIN_VALUE = Device.TabletSmall;\r\n/**\r\n * Default pixel value for the max width.\r\n */\r\nexport const DEFAULT_MAX_VALUE = Device.ActualDesktop;\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluid(min, max, minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const minRem = min / PIXELS_PER_REM;\r\n    const maxRem = max / PIXELS_PER_REM;\r\n    const minWidthRem = minWidth / PIXELS_PER_REM;\r\n    const maxWidthRem = maxWidth / PIXELS_PER_REM;\r\n    const slope = (maxRem - minRem) / (maxWidthRem - minWidthRem);\r\n    const yAxisIntersection = -minWidthRem * slope + minRem;\r\n    const clampMin = `${round(minRem)}rem`;\r\n    const clampVal = `${round(yAxisIntersection)}rem + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(maxRem)}rem`;\r\n    return `clamp(${clampMin}, ${clampVal}, ${clampMax})`;\r\n}\r\n/**\r\n * Round to nearest hundredth.\r\n */\r\nfunction round(num) {\r\n    return Math.round(num * 100) / 100;\r\n}\r\n","export var noop = function () { };\nexport function on(obj) {\n    var args = [];\n    for (var _i = 1; _i < arguments.length; _i++) {\n        args[_i - 1] = arguments[_i];\n    }\n    if (obj && obj.addEventListener) {\n        obj.addEventListener.apply(obj, args);\n    }\n}\nexport function off(obj) {\n    var args = [];\n    for (var _i = 1; _i < arguments.length; _i++) {\n        args[_i - 1] = arguments[_i];\n    }\n    if (obj && obj.removeEventListener) {\n        obj.removeEventListener.apply(obj, args);\n    }\n}\nexport var isBrowser = typeof window !== 'undefined';\nexport var isNavigator = typeof navigator !== 'undefined';\n","import { useEffect, useState } from 'react';\nimport { isBrowser } from './misc/util';\nvar useMedia = function (query, defaultState) {\n    if (defaultState === void 0) { defaultState = false; }\n    var _a = useState(isBrowser ? function () { return window.matchMedia(query).matches; } : defaultState), state = _a[0], setState = _a[1];\n    useEffect(function () {\n        var mounted = true;\n        var mql = window.matchMedia(query);\n        var onChange = function () {\n            if (!mounted) {\n                return;\n            }\n            setState(!!mql.matches);\n        };\n        mql.addListener(onChange);\n        setState(mql.matches);\n        return function () {\n            mounted = false;\n            mql.removeListener(onChange);\n        };\n    }, [query]);\n    return state;\n};\nexport default useMedia;\n","import { cssVar, setCssVar } from '@helpers/cssVar';\r\nimport global from '@helpers/global';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled.div `\r\n  ${setCssVar('sitePadding', `${global.siteWidePaddingMobile}px`)};\r\n  ${setCssVar('siteWidth', '100%')};\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  @media ${from(Device.MobileLarge)} {\r\n    ${setCssVar('sitePadding', `${global.siteWidePaddingTablet}px`)};\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    ${setCssVar('sitePadding', `${global.siteWidePadding}px`)};\r\n  }\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            ${setCssVar('siteWidth', `${global.siteWideWidth}px`)};\r\n          }\r\n        `;\r\n        case 'narrow':\r\n            return css `\r\n          @media ${from(Device.DesktopSmall)} {\r\n            ${setCssVar('siteWidth', `${global.siteWideWidthNarrow}px`)};\r\n          }\r\n        `;\r\n        case 'inner':\r\n            return css `\r\n          @media ${from(Device.Tablet)} {\r\n            ${setCssVar('siteWidth', `${global.siteWideWidthInner}px`)};\r\n          }\r\n        `;\r\n    }\r\n}}\r\n`;\r\nexport default {\r\n    Container,\r\n};\r\n","import { css } from 'styled-components';\r\nexport const rootMargin = '0px 0px -20% 0px';\r\nexport const cubicEaseOut = `cubic-bezier(0.215, 0.61, 0.355, 1)`;\r\nexport const FadeUpBase = css `\r\n  opacity: 0;\r\n  transform: translateY(16px);\r\n  transition: opacity var(--a-duration) ${cubicEaseOut}, transform var(--a-duration) ${cubicEaseOut};\r\n  transition-delay: var(--a-delay);\r\n`;\r\nexport const FadeUpActive = css `\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n`;\r\nexport const shouldAnimate = (innerCss) => {\r\n    return css `\r\n    @media (prefers-reduced-motion: no-preference) {\r\n      ${innerCss}\r\n    }\r\n  `;\r\n};\r\nexport const transition = (properties, duration = 0.35, timing = cubicEaseOut) => {\r\n    return shouldAnimate(css `\r\n    transition-duration: ${typeof duration === 'string' ? duration : `${duration}s`};\r\n    transition-property: ${properties};\r\n    transition-timing-function: ${timing};\r\n    will-change: ${properties};\r\n  `);\r\n};\r\nexport const horizontalFadeIn = (amount, duration) => {\r\n    return {\r\n        hidden: {\r\n            opacity: 0,\r\n            x: amount ?? 20,\r\n        },\r\n        visible: {\r\n            opacity: 1,\r\n            x: 0,\r\n            transition: {\r\n                duration: duration ?? 0.35,\r\n            },\r\n        },\r\n    };\r\n};\r\nexport const verticalFadeIn = (amount, duration) => {\r\n    return {\r\n        hidden: {\r\n            opacity: 0,\r\n            y: amount ?? 20,\r\n        },\r\n        visible: {\r\n            opacity: 1,\r\n            y: 0,\r\n            transition: {\r\n                duration: duration ?? 0.35,\r\n            },\r\n        },\r\n    };\r\n};\r\n"],"sourceRoot":""}