{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/helpers/typography.ts","webpack:///./src/helpers/ssr.ts","webpack:///./src/stories/Components/Misc/SlideReveal.styles.ts","webpack:///./src/hooks/useIntersectionObserver.ts","webpack:///./src/hooks/useInView.ts","webpack:///./img/icons/arrow.svg?d993","webpack:///./src/helpers/global.ts","webpack:///./src/stories/Elements/Forms/CTA/CTA.styles.ts","webpack:///./src/helpers/columns.ts","webpack:///./src/hooks/useMedia.ts","webpack:///./src/stories/Widgets/Products/InteractiveRange/InteractiveRange.styles.ts","webpack:///./src/stories/Components/SimpleCard/SimpleCard.styles.ts","webpack:///./src/stories/Components/SimpleCard/SimpleCard.tsx","webpack:///./src/helpers/utils.ts","webpack:///./src/stories/Widgets/Products/InteractiveRange/InteractiveRange.tsx","webpack:///./src/stories/Components/Misc/SlideReveal.tsx","webpack:///./src/helpers/animation.ts","webpack:///./src/stories/Elements/Forms/CTA/CTAAnchor.tsx","webpack:///./src/helpers/slick.ts","webpack:///./src/helpers/grids.ts"],"names":["Device","from","size","until","H1Styles","css","fonts","helvetica","Tablet","DesktopLarge","H1","styled","h1","H2Styles","H2","h2","H3Styles","H3","h3","H4Styles","H4","h4","PStyles","P","p","PLargeStyles","PSmallStyles","BlockquoteStyles","Typography","Blockquote","blockquote","isSSR","window","document","SlideRevealStyles","Wrapper","div","Element","span","animate","order","delay","animateOnExit","slideUp","animation","easeInOutCubic","useIntersectionObserver","callback","options","observerRef","useRef","rootRef","elementRef","useEffect","current","IntersectionObserver","root","observe","disconnect","useInView","reverse","isEditMode","useState","inView","setInView","entries","isIntersecting","navHeight","navHeightTablet","navHeightMobile","ButtonReset","CTATheme","base","theme","Blue","brand","blue","white","light","dark","White","Black","black","WhiteToBlack","CTAStyles","ButtonElement","button","attrs","type","AnchorElement","a","FullWidth","Content","ContentWide","useMedia","queries","values","defaultValue","mediaQueryLists","map","query","matchMedia","getValue","index","findIndex","mql","matches","value","setValue","handler","forEach","addListener","removeListener","section","Title","columns","TabletLarge","Desktop","Carousel","CarouselWrapper","fadeIn","CarouselOuterWrapper","InteractiveRangeStyles","Grid","grids","Default","ActiveInfo","grey","ActiveInfoTitle","MobileLarge","ActiveInfoSubTitle","ActiveMedia","ActiveMediaImage","img","isVisible","Button","isNext","isActive","SimpleCardStyles","Card","figure","Media","SimpleCard","props","React","createElement","onClick","media","srcSet","ImageTransform","imageUrl","width","url","alt","title","loading","sleep","ms","Promise","resolve","setTimeout","InteractiveRange","slidesToShow","DesktopSmall","activeInfoTitleSize","sliderRef","activeIndex","setActiveIndex","activeCategory","useMemo","categories","threshold","pageContext","isAnimating","setIsAnimating","console","error","settings","arrows","adaptiveHeight","centerMode","swipeToSlide","focusOnSelect","beforeChange","currentSlide","nextSlide","ref","slickPrev","previousAriaLabel","href","ArrowUrl","SlickWrapper","useFlex","Slider","Object","assign","x","i","key","slickNext","nextAriaLabel","SlideReveal","Textfit","mode","max","CTAAnchor","text","buttonText","DesktopXL","children","keyframes","duration","easingFunc","fadeInUp","amount","target","slick","slickTheme","baseFixed","SitePadding","SitePaddingBreakoutLeft","SitePaddingBreakoutRight","SitePaddingBreakout","Fixed"],"mappings":"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","file":"22-48a80885af6f8904e111.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 { fonts } from '@tti/brand-empire';\r\nimport styled, { css } from 'styled-components';\r\nimport { Device, from } from './media';\r\nconst H1Styles = css `\r\n  ${fonts.helvetica['87-condensed-heavy']};\r\n  font-size: 45px;\r\n  line-height: 55px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 63px;\r\n    line-height: 70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 85px;\r\n    line-height: 95px;\r\n  }\r\n`;\r\nconst H1 = styled.h1 `\r\n  ${H1Styles};\r\n`;\r\nconst H2Styles = css `\r\n  ${fonts.helvetica['87-condensed-heavy']};\r\n  font-size: 35px;\r\n  line-height: 45px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 53px;\r\n    line-height: 60px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 72px;\r\n    line-height: 80px;\r\n  }\r\n`;\r\nconst H2 = styled.h2 `\r\n  ${H2Styles};\r\n`;\r\nconst H3Styles = css `\r\n  ${fonts.helvetica['87-condensed-heavy']};\r\n  font-size: 27px;\r\n  line-height: 43px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 43px;\r\n    line-height: 50px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 50px;\r\n    line-height: 61px;\r\n  }\r\n`;\r\nconst H3 = styled.h3 `\r\n  ${H3Styles};\r\n`;\r\nconst H4Styles = css `\r\n  ${fonts.helvetica['87-condensed-heavy']};\r\n  font-size: 18px;\r\n  line-height: 32px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 30px;\r\n    line-height: 37px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 32px;\r\n    line-height: 43px;\r\n  }\r\n`;\r\nconst H4 = styled.h4 `\r\n  ${H4Styles};\r\n`;\r\nconst PStyles = css `\r\n  ${fonts.helvetica['57-condensed']};\r\n  font-size: 16px;\r\n  line-height: 26px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 17px;\r\n    line-height: 27px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 19px;\r\n    line-height: 29px;\r\n  }\r\n`;\r\nconst P = styled.p `\r\n  ${PStyles}\r\n`;\r\nconst PLargeStyles = css `\r\n  ${fonts.helvetica['57-condensed']};\r\n  font-size: 18px;\r\n  line-height: 28px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 20px;\r\n    line-height: 30px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 22px;\r\n    line-height: 32px;\r\n  }\r\n`;\r\nconst PSmallStyles = css `\r\n  ${fonts.helvetica['57-condensed']};\r\n  font-size: 14px;\r\n  line-height: 24px;\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 16px;\r\n    line-height: 26px;\r\n  }\r\n`;\r\nconst BlockquoteStyles = css `\r\n  ${fonts.helvetica['57-condensed']};\r\n  font-style: italic;\r\n  font-size: 18px;\r\n  line-height: 28px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 20px;\r\n    line-height: 30px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 22px;\r\n    line-height: 32px;\r\n  }\r\n`;\r\nconst Blockquote = styled.blockquote `\r\n  ${BlockquoteStyles}\r\n`;\r\nexport const Typography = {\r\n    H1Styles,\r\n    H2Styles,\r\n    H3Styles,\r\n    H4Styles,\r\n    PLargeStyles,\r\n    PStyles,\r\n    PSmallStyles,\r\n    BlockquoteStyles,\r\n    H1,\r\n    H2,\r\n    H3,\r\n    H4,\r\n    P,\r\n    Blockquote,\r\n};\r\n","export const isSSR = !(typeof window != 'undefined' && window.document);\r\n","import animation, { slideUp } from '@helpers/animation';\r\nimport styled from 'styled-components';\r\nconst Wrapper = styled.div `\r\n  overflow: hidden;\r\n`;\r\nconst Element = styled.span `\r\n  ${({ animate, order, delay, animateOnExit }) => slideUp(animate, order, delay, animation.easeInOutCubic, animateOnExit)}\r\n`;\r\nexport const SlideRevealStyles = {\r\n    Wrapper,\r\n    Element,\r\n};\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","export default __webpack_public_path__ + \"5de3f4c4285f1bbe9704068c3ef32f0a.svg\";","import { css } from 'styled-components';\r\nexport default {\r\n    navHeight: 107,\r\n    navHeightTablet: 80,\r\n    navHeightMobile: 59,\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","import { ButtonReset } from '@helpers/global';\r\nimport { brand, fonts } from '@tti/brand-empire';\r\nimport styled, { css } from 'styled-components';\r\nexport var CTATheme;\r\n(function (CTATheme) {\r\n    CTATheme[CTATheme[\"Blue\"] = 0] = \"Blue\";\r\n    CTATheme[CTATheme[\"White\"] = 1] = \"White\";\r\n    CTATheme[CTATheme[\"Black\"] = 2] = \"Black\";\r\n    CTATheme[CTATheme[\"WhiteToBlack\"] = 3] = \"WhiteToBlack\";\r\n})(CTATheme || (CTATheme = {}));\r\nconst base = css `\r\n  padding: 11px 16px;\r\n  ${fonts.helvetica['87-condensed-heavy']};\r\n  font-size: 22px;\r\n  display: inline-block;\r\n\r\n  ${({ theme }) => {\r\n    switch (theme) {\r\n        default:\r\n        case CTATheme.Blue: {\r\n            return css `\r\n          border: 1px solid ${brand.blue.base};\r\n          color: ${brand.white};\r\n          background: ${brand.blue.base};\r\n\r\n          &:hover&:not([disabled]) {\r\n            background: ${brand.blue.light};\r\n          }\r\n\r\n          &:active&:not([disabled]) {\r\n            background: ${brand.blue.dark};\r\n          }\r\n        `;\r\n        }\r\n        case CTATheme.White: {\r\n            return css `\r\n          border: 1px solid transparent;\r\n          color: ${brand.blue.base};\r\n          background: ${brand.white};\r\n\r\n          &:hover&:not([disabled]) {\r\n            background: ${brand.blue.base};\r\n            color: ${brand.white};\r\n          }\r\n\r\n          &:active&:not([disabled]) {\r\n            background: ${brand.blue.dark};\r\n          }\r\n        `;\r\n        }\r\n        case CTATheme.Black: {\r\n            return css `\r\n          border: 1px solid transparent;\r\n          color: ${brand.white};\r\n          background: ${brand.black};\r\n\r\n          &:hover&:not([disabled]) {\r\n            background: ${brand.black};\r\n            color: ${brand.white};\r\n          }\r\n\r\n          &:active&:not([disabled]) {\r\n            background: ${brand.blue.dark};\r\n          }\r\n        `;\r\n        }\r\n        case CTATheme.WhiteToBlack: {\r\n            return css `\r\n          border: 1px solid transparent;\r\n          color: ${brand.blue.base};\r\n          background: ${brand.white};\r\n\r\n          &:hover&:not([disabled]) {\r\n            background: ${brand.black};\r\n            color: ${brand.white};\r\n          }\r\n\r\n          &:active&:not([disabled]) {\r\n            background: ${brand.blue.dark};\r\n          }\r\n        `;\r\n        }\r\n    }\r\n}}\r\n`;\r\nconst ButtonElement = styled.button.attrs({ type: 'button' }) `\r\n  ${ButtonReset};\r\n  ${base};\r\n  max-width: 100%;\r\n  height: 100%;\r\n`;\r\nconst AnchorElement = styled.a `\r\n  ${ButtonReset};\r\n  ${base};\r\n  max-width: 100%;\r\n  height: 100%;\r\n`;\r\nexport const CTAStyles = {\r\n    ButtonElement,\r\n    AnchorElement,\r\n};\r\n","import { css } from 'styled-components';\r\nimport { from, Device } from './media';\r\nconst FullWidth = css `\r\n  grid-column: span 12;\r\n`;\r\nconst Content = css `\r\n  grid-column: span 12;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    grid-column: 3 / span 8;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 4 / span 6;\r\n  }\r\n`;\r\nconst ContentWide = css `\r\n  grid-column: span 12;\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 3 / span 8;\r\n  }\r\n`;\r\nexport default {\r\n    FullWidth,\r\n    Content,\r\n    ContentWide,\r\n};\r\n","import { isSSR } from '@helpers/ssr';\r\nimport { useEffect, useState } from 'react';\r\n/**\r\n * Store a value in state based on the specified media queries.\r\n * @param {Array<string>} queries\r\n * @param {Array<T>} values\r\n * @param {T} defaultValue\r\n */\r\nfunction useMedia(queries, values, defaultValue) {\r\n    // Avoid error with SSR.\r\n    if (isSSR) {\r\n        return defaultValue;\r\n    }\r\n    // Array containing a media query list for each query\r\n    const mediaQueryLists = queries.map((query) => window.matchMedia(query));\r\n    // Function that gets value based on matching media query\r\n    const getValue = () => {\r\n        // Get index of first media query that matches\r\n        const index = mediaQueryLists.findIndex((mql) => mql.matches);\r\n        // Return related value or defaultValue if none\r\n        return typeof values[index] !== 'undefined' ? values[index] : defaultValue;\r\n    };\r\n    // State and setter for matched value\r\n    const [value, setValue] = useState(getValue);\r\n    useEffect(() => {\r\n        // Event listener callback\r\n        // Note: By defining getValue outside of useEffect we ensure that it has ...\r\n        // ... current values of hook args (as this hook callback is created once on mount).\r\n        const handler = () => setValue(getValue);\r\n        // Set a listener for each media query with above handler as callback.\r\n        mediaQueryLists.forEach((mql) => mql.addListener(handler));\r\n        // Remove listeners on cleanup\r\n        return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));\r\n    }, []); // Empty array ensures effect is only run on mount and unmount\r\n    return value;\r\n}\r\nexport default useMedia;\r\n","import animation, { fadeIn, slideUp } from '@helpers/animation';\r\nimport columns from '@helpers/columns';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport grids from '@helpers/grids';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport { Typography } from '@helpers/typography';\r\nimport { brand, fonts } from '@tti/brand-empire';\r\nimport styled, { css } from 'styled-components';\r\nimport { SlideRevealStyles } from '@stories/Components/Misc/SlideReveal.styles';\r\nconst Wrapper = styled.section `\r\n  overflow: hidden;\r\n`;\r\nconst Title = styled.h1 `\r\n  ${columns.ContentWide};\r\n  ${Typography.H3Styles};\r\n  color: ${brand.blue.base};\r\n  text-align: center;\r\n  margin-top: 60px;\r\n  overflow: hidden;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-top: 20px;\r\n\r\n    span {\r\n      ${({ inView }) => slideUp(inView, 1)};\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    margin-top: 40px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    margin-top: 60px;\r\n  }\r\n`;\r\nconst Carousel = styled.div `\r\n  display: block;\r\n  position: relative;\r\n`;\r\nconst CarouselWrapper = styled.div `\r\n  overflow: hidden;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    ${Carousel} {\r\n      ${({ inView }) => fadeIn(inView, 650, 350, animation.easeInOutCubic)};\r\n    }\r\n  }\r\n`;\r\nconst CarouselOuterWrapper = styled.div `\r\n  grid-column: span 12;\r\n  position: relative;\r\n  max-width: 1920px;\r\n  width: 100%;\r\n  margin: 0 auto;\r\n`;\r\nconst Grid = styled.div `\r\n  ${grids.Default};\r\n`;\r\n// Active Item\r\nconst ActiveInfo = styled.div `\r\n  background-color: ${brand.grey[1]};\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  position: relative;\r\n  grid-column: span 12;\r\n\r\n  ${SlideRevealStyles.Wrapper}, ${SlideRevealStyles.Element} {\r\n    width: 100%;\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    position: relative;\r\n    padding: 20px 0px;\r\n\r\n    &:before,\r\n    &:after {\r\n      content: '';\r\n      position: absolute;\r\n      height: 100%;\r\n      width: 100%;\r\n      background: ${brand.grey['1']};\r\n    }\r\n\r\n    &:before {\r\n      right: 100%;\r\n    }\r\n\r\n    &:after {\r\n      left: 100%;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: span 6;\r\n    padding-right: 40px;\r\n\r\n    &:before {\r\n      content: '';\r\n      position: absolute;\r\n      background-color: ${brand.grey['1']};\r\n      top: 0;\r\n      right: 100%;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\nconst ActiveInfoTitle = styled.h3 `\r\n  ${fonts.helvetica['87-condensed-heavy']};\r\n  text-transform: uppercase;\r\n  color: ${brand.blue.base};\r\n  font-size: 35px;\r\n  margin-bottom: 32px;\r\n  overflow: hidden;\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    font-size: 40px;\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 55px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 70px;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    font-size: 85px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 100px;\r\n  }\r\n`;\r\nconst ActiveInfoSubTitle = styled.h2 `\r\n  ${fonts.helvetica['77-condensed-bold']};\r\n  text-transform: uppercase;\r\n  color: ${brand.grey['7']};\r\n  font-size: 18px;\r\n  overflow: hidden;\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    font-size: 24px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 28px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 32px;\r\n  }\r\n`;\r\nconst ActiveMedia = styled.div `\r\n  display: none;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: block;\r\n    grid-column: 8 / span 4;\r\n    height: 0px;\r\n    padding-bottom: 100%;\r\n    position: relative;\r\n  }\r\n`;\r\nconst ActiveMediaImage = styled.img `\r\n  transition: opacity 300ms 400ms ${animation.easeInOutCubic};\r\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    max-width: 300px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n  }\r\n`;\r\nconst Button = styled.button.attrs({ type: 'button' }) `\r\n  ${ButtonReset};\r\n  position: absolute;\r\n  display: none;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: block;\r\n  }\r\n\r\n  ${({ isNext }) => isNext\r\n    ? css `\r\n          right: -40px;\r\n          top: 50%;\r\n          transform: translate(50%, -50%) rotate(180deg);\r\n        `\r\n    : css `\r\n          left: -40px;\r\n          top: 50%;\r\n          transform: translate(-50%, -50%);\r\n        `}\r\n\r\n  svg {\r\n    width: 33px;\r\n    height: 22px;\r\n    stroke: ${brand.blue.base};\r\n\r\n    &:hover {\r\n      stroke: ${brand.grey['7']};\r\n    }\r\n  }\r\n`;\r\nexport const InteractiveRangeStyles = {\r\n    Wrapper,\r\n    Grid,\r\n    Title,\r\n    CarouselWrapper,\r\n    CarouselOuterWrapper,\r\n    Carousel,\r\n    ActiveInfo,\r\n    ActiveInfoTitle,\r\n    ActiveInfoSubTitle,\r\n    ActiveMedia,\r\n    ActiveMediaImage,\r\n    // Controls,\r\n    Button,\r\n};\r\n","import { brand, fonts } from '@tti/brand-empire';\r\nimport styled from 'styled-components';\r\nconst Title = styled.span `\r\n  display: block;\r\n  ${fonts.helvetica['87-condensed-heavy']};\r\n  font-size: 22px;\r\n  color: ${({ isActive }) => (isActive ? brand.blue.base : brand.grey['7'])};\r\n  text-align: center;\r\n  margin-top: auto;\r\n  text-transform: uppercase;\r\n`;\r\nconst Card = styled.figure `\r\n  background-color: ${brand.white};\r\n  padding: 12px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  height: 100%;\r\n  position: relative;\r\n  cursor: pointer;\r\n\r\n  picture {\r\n    display: contents;\r\n  }\r\n\r\n  &:hover ${Title} {\r\n    color: ${brand.blue.base};\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    position: relative;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    height: 50px;\r\n    width: 1px;\r\n    background: ${({ isActive }) => (isActive ? brand.blue.base : 'transparent')};\r\n  }\r\n`;\r\nconst Media = styled.img `\r\n  margin: 0 auto;\r\n  display: block;\r\n  min-height: 160px;\r\n  object-fit: contain;\r\n  margin-top: auto;\r\n`;\r\nexport const SimpleCardStyles = {\r\n    Card,\r\n    Media,\r\n    Title,\r\n};\r\n","import { Device, from } from '@helpers/media';\r\nimport ImageTransform from '@tti/image-transform';\r\nimport React from 'react';\r\nimport { SimpleCardStyles } from './SimpleCard.styles';\r\nconst SimpleCard = (props) => {\r\n    return (React.createElement(SimpleCardStyles.Card, { isActive: props.isActive, onClick: props.onClick },\r\n        React.createElement(\"picture\", null,\r\n            React.createElement(\"source\", { media: from(Device.TabletLarge), srcSet: new ImageTransform(props.imageUrl).width(250).url }),\r\n            React.createElement(SimpleCardStyles.Media, { srcSet: new ImageTransform(props.imageUrl).width(500).url, alt: props.title, loading: \"lazy\" })),\r\n        React.createElement(SimpleCardStyles.Title, { isActive: props.isActive }, props.title)));\r\n};\r\nexport default SimpleCard;\r\n","export function sleep(ms) {\r\n    return new Promise((resolve) => setTimeout(resolve, ms));\r\n}\r\n","import { CTATheme } from '@stories/Elements/Forms/CTA/CTA.styles';\r\nimport CTAAnchor from '@stories/Elements/Forms/CTA/CTAAnchor';\r\nimport React, { useMemo, useRef, useState } from 'react';\r\nimport { InteractiveRangeStyles } from './InteractiveRange.styles';\r\nimport ArrowUrl from '!file-loader!@img/icons/arrow.svg';\r\nimport SimpleCard from '@stories/Components/SimpleCard/SimpleCard';\r\nimport useMedia from '@hooks/useMedia';\r\nimport { Device, from } from '@helpers/media';\r\nimport Slider from 'react-slick';\r\nimport { SlickWrapper } from '@helpers/slick';\r\nimport { Textfit } from 'react-textfit';\r\nimport { useInView } from '@hooks/useInView';\r\nimport SlideReveal from '@stories/Components/Misc/SlideReveal';\r\nimport { sleep } from '@helpers/utils';\r\nimport ImageTransform from '@tti/image-transform';\r\nimport { isSSR } from '@helpers/ssr';\r\nconst InteractiveRange = (props) => {\r\n    const slidesToShow = useMedia([from(Device.DesktopSmall), from(Device.Tablet)], [5, 3], 1);\r\n    const activeInfoTitleSize = useMedia([from(Device.MobileLarge), from(Device.Tablet), from(Device.TabletLarge), from(Device.Desktop), from(Device.DesktopLarge)], [40, 55, 70, 85, 100], 35);\r\n    const sliderRef = useRef(null);\r\n    const [activeIndex, setActiveIndex] = useState(0);\r\n    const activeCategory = useMemo(() => props.categories[activeIndex], [activeIndex]);\r\n    const [elementRef, inView] = useInView({ threshold: 0.3 }, false, props.pageContext.isEditMode);\r\n    const [isAnimating, setIsAnimating] = useState(false);\r\n    if (!activeCategory) {\r\n        console.error('Cannot find active category for the Active Range component');\r\n        return null;\r\n    }\r\n    if (isSSR && !props.pageContext.isEditMode) {\r\n        return null;\r\n    }\r\n    const settings = {\r\n        slidesToShow,\r\n        arrows: false,\r\n        adaptiveHeight: false,\r\n        centerMode: true,\r\n        swipeToSlide: true,\r\n        focusOnSelect: true,\r\n        beforeChange: async (currentSlide, nextSlide) => {\r\n            setIsAnimating(true);\r\n            await sleep(1000);\r\n            setActiveIndex(nextSlide);\r\n            await sleep(200);\r\n            setIsAnimating(false);\r\n        },\r\n    };\r\n    return (React.createElement(InteractiveRangeStyles.Wrapper, { ref: elementRef },\r\n        React.createElement(InteractiveRangeStyles.Grid, null,\r\n            React.createElement(InteractiveRangeStyles.Title, { inView: inView },\r\n                React.createElement(\"span\", null, props.title)),\r\n            React.createElement(InteractiveRangeStyles.CarouselOuterWrapper, null,\r\n                React.createElement(InteractiveRangeStyles.Button, { onClick: () => sliderRef.current?.slickPrev(), \"aria-label\": props.previousAriaLabel, isNext: false },\r\n                    React.createElement(\"svg\", null,\r\n                        React.createElement(\"use\", { href: `${ArrowUrl}#icon` }))),\r\n                React.createElement(InteractiveRangeStyles.CarouselWrapper, { inView: inView },\r\n                    React.createElement(InteractiveRangeStyles.Carousel, null,\r\n                        React.createElement(SlickWrapper, { useFlex: true },\r\n                            React.createElement(Slider, Object.assign({}, settings, { ref: sliderRef }), props.categories.map((x, i) => (React.createElement(SimpleCard, Object.assign({ key: x.title }, x, { isActive: i === activeIndex })))))))),\r\n                React.createElement(InteractiveRangeStyles.Button, { onClick: () => sliderRef.current?.slickNext(), \"aria-label\": props.nextAriaLabel, isNext: true },\r\n                    React.createElement(\"svg\", null,\r\n                        React.createElement(\"use\", { href: `${ArrowUrl}#icon` }))))),\r\n        React.createElement(InteractiveRangeStyles.Grid, null,\r\n            React.createElement(InteractiveRangeStyles.ActiveInfo, null,\r\n                React.createElement(SlideReveal, { order: 1, delay: 0, animate: inView && isAnimating === false },\r\n                    React.createElement(InteractiveRangeStyles.ActiveInfoSubTitle, null, props.title)),\r\n                React.createElement(SlideReveal, { order: 2, delay: 0, animate: inView && isAnimating === false },\r\n                    React.createElement(InteractiveRangeStyles.ActiveInfoTitle, null,\r\n                        React.createElement(Textfit, { mode: \"single\", max: activeInfoTitleSize }, activeCategory.title))),\r\n                React.createElement(SlideReveal, { order: 3, delay: 0, animate: inView && isAnimating === false },\r\n                    React.createElement(CTAAnchor, { text: props.buttonText, href: activeCategory.url, theme: CTATheme.Blue, inView: inView }))),\r\n            React.createElement(InteractiveRangeStyles.ActiveMedia, null,\r\n                React.createElement(\"picture\", null,\r\n                    React.createElement(\"source\", { media: from(Device.DesktopXL), srcSet: new ImageTransform(activeCategory.imageUrl).width(1000).url }),\r\n                    React.createElement(\"source\", { media: from(Device.TabletLarge), srcSet: new ImageTransform(activeCategory.imageUrl).width(640).url }),\r\n                    React.createElement(InteractiveRangeStyles.ActiveMediaImage, { alt: activeCategory.title, loading: \"lazy\", srcSet: new ImageTransform(activeCategory.imageUrl).width(300).url, isVisible: inView && isAnimating === false })))),\r\n        React.createElement(InteractiveRangeStyles.Carousel, null)));\r\n};\r\nexport default InteractiveRange;\r\n","import React from 'react';\r\nimport { SlideRevealStyles } from './SlideReveal.styles';\r\nconst SlideReveal = (props) => {\r\n    return (React.createElement(SlideRevealStyles.Wrapper, null,\r\n        React.createElement(SlideRevealStyles.Element, { animate: props.animate, order: props.order, delay: props.delay, animateOnExit: props.animateOnExit }, props.children)));\r\n};\r\nexport default SlideReveal;\r\n","import { css, keyframes } from 'styled-components';\r\nconst easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)';\r\nexport default {\r\n    easeInOutCubic,\r\n};\r\nconst reset = keyframes `\r\n  100% {\r\n    transform: translate(0%, 0%);\r\n    opacity: 1;\r\n  }\r\n`;\r\nexport function fadeInLeft(amount, duration, delay, easingFunc) {\r\n    return css `\r\n    opacity: 0;\r\n    transform: translateX(-${amount}px);\r\n    animation: ${reset} ${duration}ms ${delay}ms ${easingFunc} forwards;\r\n  `;\r\n}\r\nexport function fadeIn(inView, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n        `}\r\n  `;\r\n}\r\nexport function fadeInUp(inView, amount, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc}, transform ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n          transform: none;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          transform: translateY(${amount}px);\r\n        `}\r\n  `;\r\n}\r\nexport function slideUp(inView, order, delay = 300, easingFunc = easeInOutCubic, animateOnExit = true) {\r\n    if (inView) {\r\n        return css `\r\n      transform: translateY(0%);\r\n      transition: transform 650ms ${delay + order * 100}ms ${easingFunc};\r\n    `;\r\n    }\r\n    else if (animateOnExit) {\r\n        return css `\r\n      transform: translateY(120%);\r\n      transition: transform 650ms ${delay + order * 100}ms ${easingFunc};\r\n    `;\r\n    }\r\n    else {\r\n        return css `\r\n      transform: translateY(120%);\r\n    `;\r\n    }\r\n}\r\nexport function greyscaleImgFade(inView, duration, delay, filterDelay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc}, filter ${duration}ms ${filterDelay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n          filter: grayscale(0);\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          filter: grayscale(1);\r\n        `}\r\n  `;\r\n}\r\n","import React from 'react';\r\nimport { CTAStyles, CTATheme } from './CTA.styles';\r\nimport { Textfit } from 'react-textfit';\r\nconst CTAAnchor = ({ text, href, theme = CTATheme.Blue, target, inView = true }) => {\r\n    return (React.createElement(CTAStyles.AnchorElement, { theme: theme, href: href, target: target }, inView && (React.createElement(Textfit, { mode: \"single\", max: 22 }, text))));\r\n};\r\nexport default CTAAnchor;\r\n","import slick from '!raw-loader!slick-carousel/slick/slick.css';\r\nimport slickTheme from '!raw-loader!slick-carousel/slick/slick-theme.css';\r\nimport styled, { css } from 'styled-components';\r\nexport const SlickWrapper = styled.div `\r\n  ${slick};\r\n  ${slickTheme};\r\n\r\n  ${({ useFlex }) => useFlex\r\n    ? css `\r\n          // fix overflow issue\r\n          width: 100%;\r\n          .slick-track {\r\n            // override slick default float styling\r\n            display: flex !important;\r\n            flex-direction: row;\r\n            align-items: center;\r\n          }\r\n\r\n          .slick-slide {\r\n            align-self: stretch;\r\n            height: auto;\r\n          }\r\n\r\n          .slick-slide > div {\r\n            height: 100%;\r\n          }\r\n        `\r\n    : null}\r\n`;\r\n","import { css } from 'styled-components';\r\nimport { Device, from } from './media';\r\nconst base = css `\r\n  display: grid;\r\n  grid-gap: 16px;\r\n  width: 100%;\r\n  grid-template-columns: repeat(12, 1fr);\r\n`;\r\nconst baseFixed = css `\r\n  display: grid;\r\n  grid-gap: 16px;\r\n  width: 100%;\r\n  // 78px being the width of one column at 375 of the base grid above\r\n  grid-auto-columns: 78px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    // 117px being the width of one column at 1920 of the base grid above\r\n    grid-auto-columns: 117px;\r\n  }\r\n`;\r\nexport const SitePadding = css `\r\n  padding-left: 18px;\r\n  padding-right: 18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    padding-left: 40px;\r\n    padding-right: 40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding-left: 70px;\r\n    padding-right: 70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    padding-left: 130px;\r\n    padding-right: 130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    padding-left: 170px;\r\n    padding-right: 170px;\r\n  }\r\n`;\r\nconst SitePaddingBreakoutLeft = css `\r\n  left: 0;\r\n  right: 0px;\r\n  grid-column: span 12;\r\n  margin-left: -18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    margin-left: -40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-left: -70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    margin-left: -130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    margin-left: -170px;\r\n  }\r\n`;\r\nconst SitePaddingBreakoutRight = css `\r\n  left: 0;\r\n  right: 0px;\r\n  grid-column: span 12;\r\n  margin-right: -18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    margin-right: -40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-right: -70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    margin-right: -130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    margin-right: -170px;\r\n  }\r\n`;\r\nconst SitePaddingBreakout = css `\r\n  left: 0;\r\n  right: 0px;\r\n  grid-column: span 12;\r\n  margin-left: -18px;\r\n  margin-right: -18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    margin-left: -40px;\r\n    margin-right: -40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-left: -70px;\r\n    margin-right: -70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    margin-left: -130px;\r\n    margin-right: -130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    margin-left: -170px;\r\n    margin-right: -170px;\r\n  }\r\n`;\r\nconst Default = css `\r\n  ${base};\r\n  ${SitePadding};\r\n`;\r\nconst Fixed = css `\r\n  ${baseFixed};\r\n`;\r\nexport default {\r\n    Default,\r\n    Fixed,\r\n    SitePaddingBreakout,\r\n    SitePaddingBreakoutLeft,\r\n    SitePaddingBreakoutRight,\r\n    base,\r\n};\r\n"],"sourceRoot":""}