{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/helpers/typography.ts","webpack:///./src/helpers/ssr.ts","webpack:///./src/stories/Components/Media/Image/Image.tsx","webpack:///./img/brand/true-blue.svg","webpack:///./src/helpers/icons.tsx","webpack:///./src/hooks/useMedia.ts","webpack:///./src/stories/Widgets/Products/ProductOverview/ProductOverview.styles.ts","webpack:///./src/stories/Widgets/Products/ProductOverview/ProductOverview.tsx","webpack:///./src/helpers/animation.ts","webpack:///./src/helpers/slick.ts","webpack:///./src/helpers/grids.ts","webpack:///./src/core/enums.ts","webpack:///./img/icons/chevron-down.svg","webpack:///./img/icons/arrow-right.svg","webpack:///./img/icons/arrow-left.svg"],"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","defaultSrcSetSizes","MobileSmall","Mobile","Desktop","ActualDesktop","Image","Component","src","srcSetSizes","sizes","alt","role","loading","srcSet","map","x","ImageTransfrom","width","url","join","undefined","React","createElement","getIcon","icon","options","Wrapper","wrapper","Fragment","Icon","None","TrueBlue","height","style","stroke","fill","maxWidth","href","TrueBlueUrl","useMedia","queries","values","defaultValue","mediaQueryLists","query","matchMedia","getValue","index","findIndex","mql","matches","useState","value","setValue","useEffect","handler","forEach","addListener","removeListener","section","TabletLarge","Container","div","grids","Default","CarouselContainer","ImageContainer","img","CarouselImages","CarouselImageContainer","brand","grey","isActive","blue","base","CarouselImage","CarouselDots","CarouselDotWrapper","CarouselDot","Arrows","Arrow","animation","easeInOutCubic","disabled","OverviewContainer","span","Model","Title","black","Subtitle","FeaturesListWrapper","FeaturesList","ul","Feature","li","ReadMoreContainer","showReadMore","ReadMore","Overview","VariantTitle","VariantContainer","VariantDropdownContainer","white","VariantDropdownSelected","VariantDropdownOption","VariantDropdown","active","rgba","LogoContainer","Logo","ButtonContainer","ProductOverviewStyles","ProductOverview","additionalLogos","features","images","model","title","subtitle","variants","translations","slidesToShow","DesktopSmall","setShowReadMore","sliderRef","useRef","mobileSliderRef","activeImageIndex","setActiveImageIndex","dropdownActive","setDropdownActive","activeVariant","setActiveVariant","selectRef","handleClickOutside","event","current","contains","target","addEventListener","removeEventListener","activeImage","settings","arrows","swipeToSlide","focusOnSelect","infinite","dots","s","length","SlickWrapper","useFlex","Slider","Object","assign","ref","image","key","onClick","slickPrev","ArrowLeft","slickNext","ArrowRight","slice","feature","ChevronDown","name","variant","id","imageIndex","slickGoTo","handleVariantSelect","logo","keyframes","fadeIn","inView","duration","delay","easingFunc","fadeInUp","amount","slideUp","order","animateOnExit","slick","slickTheme","baseFixed","SitePadding","SitePaddingBreakoutLeft","SitePaddingBreakoutRight","SitePaddingBreakout","Fixed","MediaType","styles","props","xmlns","viewBox","data-name","d","strokeWidth"],"mappings":"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","file":"23-0051ed3e10020ed17424.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 { Device } from '@helpers/media';\r\nimport React from 'react';\r\nimport ImageTransfrom from '@tti/image-transform';\r\nconst defaultSrcSetSizes = [Device.MobileSmall, Device.Mobile, Device.Tablet, Device.Desktop, Device.DesktopLarge, Device.ActualDesktop];\r\nconst Image = ({ Component, src, srcSetSizes = defaultSrcSetSizes, sizes, alt, role, loading = 'lazy' }) => {\r\n // Generate srcSet from all of the given sizes\r\n const srcSet = srcSetSizes.map((x) => `${new ImageTransfrom(src).width(x).url} ${x}w`).join(', ');\r\n return Component !== undefined ? (React.createElement(Component, { src: src, srcSet: srcSet, sizes: sizes, alt: alt, role: role, loading: loading })) : (React.createElement(\"img\", { src: src, srcSet: srcSet, sizes: sizes, alt: alt, role: role, loading: loading }));\r\n};\r\nexport default Image;\r\n","export default __webpack_public_path__ + \"5f2ac44612accc36ad0b2c8bf3d2119b.svg\";","import { Icon } from '@core/enums';\r\nimport React, { Fragment } from 'react';\r\nimport TrueBlueUrl from '!file-loader!@img/brand/true-blue.svg';\r\nexport function getIcon(icon, options) {\r\n const Wrapper = options?.wrapper === undefined ? Fragment : options.wrapper;\r\n switch (icon) {\r\n default:\r\n case Icon.None:\r\n return null;\r\n case Icon.TrueBlue:\r\n return (React.createElement(Wrapper, null,\r\n React.createElement(\"svg\", { width: options?.width, height: options?.height, style: { stroke: options?.stroke, fill: options?.fill, maxWidth: '100%' } },\r\n React.createElement(\"use\", { href: `${TrueBlueUrl}#icon` }))));\r\n }\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} queries\r\n * @param {Array} 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 from '@helpers/animation';\r\nimport grids from '@helpers/grids';\r\nimport { from, Device } from '@helpers/media';\r\nimport { Typography } from '@helpers/typography';\r\nimport { brand } from '@tti/brand-empire';\r\nimport { fonts } from '@tti/brand-empire';\r\nimport { rgba } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nconst Wrapper = styled.section `\r\n position: relative;\r\n padding: 40px 0;\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n padding: 80px 0;\r\n }\r\n`;\r\nconst Container = styled.div `\r\n ${grids.Default};\r\n grid-auto-flow: dense;\r\n`;\r\nconst CarouselContainer = styled.div `\r\n grid-column: 1 / span 12;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n grid-column: 1 / span 6;\r\n }\r\n`;\r\nconst ImageContainer = styled.div `\r\n max-width: 782px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 50px;\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n height: 628px;\r\n }\r\n`;\r\nconst Image = styled.img ``;\r\nconst CarouselImages = styled.div `\r\n display: none;\r\n\r\n .slick-list {\r\n margin-right: 2px;\r\n }\r\n\r\n .slick-track {\r\n gap: 8px;\r\n }\r\n\r\n .slick-slide > div {\r\n display: flex;\r\n justify-content: flex-end;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n position: relative;\r\n overflow: hidden;\r\n display: block;\r\n }\r\n`;\r\nconst CarouselImageContainer = styled.div `\r\n display: inline-flex !important;\r\n height: 143px;\r\n border: 2px solid ${brand.grey[1]};\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n\r\n ${({ isActive }) => isActive\r\n ? css `\r\n border: 2px solid ${brand.blue.base};\r\n `\r\n : null}\r\n`;\r\nconst CarouselImage = styled.img `\r\n height: 100%;\r\n width: 100%;\r\n object-fit: cover;\r\n`;\r\nconst CarouselDots = styled.div `\r\n width: 120px;\r\n margin: auto;\r\n\r\n .slick-list {\r\n margin-right: 2px;\r\n }\r\n\r\n .slick-track {\r\n gap: 8px;\r\n }\r\n\r\n .slick-slide > div {\r\n display: flex;\r\n justify-content: flex-end;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n display: none;\r\n }\r\n`;\r\nconst CarouselDotWrapper = styled.div ``;\r\nconst CarouselDot = styled.div `\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background-color: ${brand.blue.base};\r\n opacity: 0.5;\r\n margin: 5px auto;\r\n cursor: pointer;\r\n\r\n ${({ isActive }) => isActive\r\n ? css `\r\n opacity: 1;\r\n `\r\n : null}\r\n`;\r\nconst Arrows = styled.div `\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n padding-top: 16px;\r\n padding-right: 3px;\r\n gap: 20px;\r\n`;\r\nconst Arrow = styled.div `\r\n width: 33px;\r\n cursor: pointer;\r\n transition: transform 0.2s ${animation.easeInOutCubic}, opacity 0.2s ${animation.easeInOutCubic};\r\n\r\n &:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n ${({ disabled }) => disabled &&\r\n css `\r\n opacity: 0.5;\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n `}\r\n\r\n svg {\r\n width: 33px;\r\n }\r\n`;\r\nconst OverviewContainer = styled.div `\r\n grid-column: 1 / span 12;\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n grid-column: 8 / span 5;\r\n }\r\n`;\r\nconst Icon = styled.span `\r\n display: inline-flex;\r\n align-items: center;\r\n min-width: 107px;\r\n`;\r\nconst Model = styled.div `\r\n ${Typography.PLargeStyles};\r\n color: ${brand.grey[7]};\r\n`;\r\nconst Title = styled.div `\r\n ${Typography.H4Styles};\r\n color: ${brand.black};\r\n`;\r\nconst Subtitle = styled.div `\r\n ${Typography.PLargeStyles};\r\n color: ${brand.grey[7]};\r\n`;\r\nconst FeaturesListWrapper = styled.div `\r\n margin: 20px 0;\r\n`;\r\nconst FeaturesList = styled.ul `\r\n list-style: none;\r\n`;\r\nconst Feature = styled.li `\r\n position: relative;\r\n ${Typography.PStyles};\r\n color: #778899;\r\n padding-left: 20px;\r\n margin-bottom: 10px;\r\n\r\n &:before {\r\n content: '';\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background-color: ${brand.blue.base};\r\n left: 0px;\r\n top: 10px;\r\n }\r\n`;\r\nconst ReadMoreContainer = styled.div `\r\n ${({ showReadMore }) => showReadMore\r\n ? css `\r\n display: block;\r\n `\r\n : css `\r\n display: none;\r\n `}\r\n`;\r\nconst ReadMore = styled.div `\r\n position: relative;\r\n ${Typography.PStyles};\r\n color: ${brand.blue.base};\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n\r\n svg {\r\n margin-left: 5px;\r\n width: 18px;\r\n height: 9px;\r\n color: ${brand.blue.base};\r\n }\r\n\r\n ${({ showReadMore }) => showReadMore\r\n ? css `\r\n svg {\r\n transform: rotate(-180deg);\r\n }\r\n `\r\n : null}\r\n`;\r\nconst Overview = styled.div `\r\n ${Typography.PStyles};\r\n color: ${brand.black};\r\n`;\r\nconst VariantTitle = styled.div `\r\n ${Typography.PStyles};\r\n ${fonts.helvetica['77-condensed-bold']};\r\n color: ${brand.black};\r\n margin-bottom: 10px;\r\n`;\r\nconst VariantContainer = styled.div `\r\n display: flex;\r\n margin-bottom: 40px;\r\n`;\r\nconst VariantDropdownContainer = styled.div `\r\n display: none;\r\n background-color: ${brand.white};\r\n border: 2px solid ${brand.blue.base};\r\n position: absolute;\r\n top: 100%;\r\n left: -2px;\r\n width: calc(100% + 4px);\r\n z-index: 2;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n`;\r\nconst VariantDropdownSelected = styled.div `\r\n position: relative;\r\n width: 100%;\r\n\r\n svg {\r\n position: absolute;\r\n width: 20px;\r\n right: 20px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n`;\r\nconst VariantDropdownOption = styled.div `\r\n ${fonts.helvetica['57-condensed']};\r\n font-size: 19px;\r\n border-bottom: 1px solid ${brand.grey[7]};\r\n padding: 20px 15px;\r\n`;\r\nconst VariantDropdown = styled.div `\r\n ${fonts.helvetica['57-condensed']};\r\n font-size: 19px;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n height: 65px;\r\n width: 100%;\r\n padding: 10px 15px 9px;\r\n border: 2px solid ${brand.blue.base};\r\n appearance: none;\r\n z-index: 2;\r\n cursor: pointer;\r\n\r\n ${({ active }) => active\r\n ? css `\r\n background-color: ${rgba(brand.blue.base, 0.15)};\r\n ${VariantDropdownContainer} {\r\n display: block;\r\n }\r\n\r\n ${VariantDropdownSelected} {\r\n svg {\r\n transform: translateY(-50%) rotate(-180deg);\r\n }\r\n }\r\n `\r\n : null}\r\n`;\r\nconst LogoContainer = styled.div `\r\n display: flex;\r\n grid-gap: 20px;\r\n margin-bottom: 40px;\r\n`;\r\nconst Logo = styled.img `\r\n max-width: 117px;\r\n`;\r\nconst ButtonContainer = styled.div ``;\r\nexport const ProductOverviewStyles = {\r\n Wrapper,\r\n Container,\r\n CarouselContainer,\r\n ImageContainer,\r\n Image,\r\n CarouselImageContainer,\r\n CarouselImages,\r\n CarouselImage,\r\n CarouselDots,\r\n CarouselDotWrapper,\r\n CarouselDot,\r\n Arrows,\r\n Arrow,\r\n OverviewContainer,\r\n Icon,\r\n Model,\r\n Title,\r\n Subtitle,\r\n FeaturesListWrapper,\r\n FeaturesList,\r\n Feature,\r\n ReadMoreContainer,\r\n ReadMore,\r\n Overview,\r\n VariantContainer,\r\n VariantTitle,\r\n VariantDropdown,\r\n VariantDropdownContainer,\r\n VariantDropdownSelected,\r\n VariantDropdownOption,\r\n LogoContainer,\r\n Logo,\r\n ButtonContainer,\r\n};\r\n","import { getIcon } from '@helpers/icons';\r\nimport { Device, from } from '@helpers/media';\r\nimport { SlickWrapper } from '@helpers/slick';\r\nimport useMedia from '@hooks/useMedia';\r\nimport ArrowLeft from '@img/icons/arrow-left.svg';\r\nimport ArrowRight from '@img/icons/arrow-right.svg';\r\nimport ChevronDown from '@img/icons/chevron-down.svg';\r\nimport Image from '@stories/Components/Media/Image/Image';\r\nimport { brand } from '@tti/brand-empire';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport Slider from 'react-slick';\r\nimport { ProductOverviewStyles as s } from './ProductOverview.styles';\r\nconst ProductOverview = ({ icon, additionalLogos, features, images, model, title, subtitle, variants, translations, }) => {\r\n const slidesToShow = useMedia([from(Device.DesktopLarge), from(Device.DesktopSmall), from(Device.TabletLarge)], [5, 4, 3], 5);\r\n const [showReadMore, setShowReadMore] = useState(false);\r\n const sliderRef = useRef(null);\r\n const mobileSliderRef = useRef(null);\r\n const [activeImageIndex, setActiveImageIndex] = useState(0);\r\n const [dropdownActive, setDropdownActive] = useState(false);\r\n const [activeVariant, setActiveVariant] = useState(variants[0]);\r\n const selectRef = useRef(null);\r\n useEffect(() => {\r\n function handleClickOutside(event) {\r\n if (selectRef.current && !selectRef.current.contains(event.target)) {\r\n setDropdownActive(false);\r\n }\r\n }\r\n document.addEventListener('mousedown', handleClickOutside);\r\n return () => {\r\n document.removeEventListener('mousedown', handleClickOutside);\r\n };\r\n }, [selectRef]);\r\n if (images === undefined) {\r\n return null;\r\n }\r\n const activeImage = images[activeImageIndex];\r\n const settings = {\r\n slidesToShow,\r\n arrows: false,\r\n swipeToSlide: true,\r\n focusOnSelect: false,\r\n infinite: false,\r\n dots: false,\r\n };\r\n const handleNextCarousel = () => {\r\n sliderRef.current?.slickNext();\r\n mobileSliderRef.current?.slickNext();\r\n setActiveImageIndex(activeImageIndex + 1);\r\n };\r\n const handlePrevCarousel = () => {\r\n sliderRef.current?.slickPrev();\r\n mobileSliderRef.current?.slickPrev();\r\n setActiveImageIndex(activeImageIndex - 1);\r\n };\r\n const handleVariantSelect = (variant) => {\r\n setActiveVariant(variant);\r\n const imageIndex = images.findIndex((x) => x.variant === variant.id);\r\n if (imageIndex > -1) {\r\n sliderRef.current?.slickGoTo(imageIndex);\r\n mobileSliderRef.current?.slickGoTo(imageIndex);\r\n setActiveImageIndex(imageIndex);\r\n }\r\n };\r\n return (React.createElement(s.Wrapper, null,\r\n React.createElement(s.Container, null,\r\n React.createElement(s.CarouselContainer, null,\r\n React.createElement(s.ImageContainer, null,\r\n React.createElement(Image, { src: activeImage.url, alt: \"\", sizes: `${from(Device.TabletLarge)} 50vw, 100vw`, Component: s.Image })),\r\n images.length > 1 && (React.createElement(React.Fragment, null,\r\n React.createElement(s.CarouselImages, null,\r\n React.createElement(SlickWrapper, { useFlex: true },\r\n React.createElement(Slider, Object.assign({}, settings, { ref: sliderRef }), images.map((image, index) => (React.createElement(s.CarouselImageContainer, { key: index, isActive: index === activeImageIndex, onClick: () => setActiveImageIndex(index) },\r\n React.createElement(Image, { src: image.url, alt: \"\", sizes: \"200px\", Component: s.CarouselImage, srcSetSizes: [200] }))))))),\r\n React.createElement(s.CarouselDots, null,\r\n React.createElement(SlickWrapper, null,\r\n React.createElement(Slider, Object.assign({}, settings, { ref: mobileSliderRef }), images.map((image, index) => (React.createElement(s.CarouselDotWrapper, { key: `carousel-dot-${index}` },\r\n React.createElement(s.CarouselDot, { isActive: index === activeImageIndex, onClick: () => setActiveImageIndex(index) }))))))))),\r\n images.length > 1 && (images.length > slidesToShow || slidesToShow === 1) && (React.createElement(s.Arrows, null,\r\n React.createElement(s.Arrow, { disabled: activeImageIndex <= 0, onClick: () => handlePrevCarousel() },\r\n React.createElement(ArrowLeft, null)),\r\n React.createElement(s.Arrow, { disabled: activeImageIndex >= images.length - 1, onClick: () => handleNextCarousel() },\r\n React.createElement(ArrowRight, null))))),\r\n React.createElement(s.OverviewContainer, null,\r\n React.createElement(s.Title, null, title),\r\n (model || subtitle) && React.createElement(s.Subtitle, null, model ? (subtitle ? `${model} | ${subtitle}` : model) : subtitle),\r\n React.createElement(s.FeaturesListWrapper, null,\r\n React.createElement(s.FeaturesList, null, features?.slice(0, 10).map((feature, index) => (React.createElement(s.Feature, { key: index }, feature)))),\r\n features && features.slice(10).length > 0 ? (React.createElement(React.Fragment, null,\r\n React.createElement(s.ReadMoreContainer, { showReadMore: showReadMore },\r\n React.createElement(s.FeaturesList, null, features?.slice(10).map((feature, index) => (React.createElement(s.Feature, { key: index }, feature))))),\r\n React.createElement(s.ReadMore, { showReadMore: showReadMore, onClick: () => setShowReadMore(!showReadMore) },\r\n translations['custom.readMore'],\r\n \" \",\r\n React.createElement(ChevronDown, null)))) : null),\r\n variants.length > 1 && (React.createElement(React.Fragment, null,\r\n React.createElement(s.VariantTitle, null, translations['custom.productOverview.selectProductVariation']),\r\n React.createElement(s.VariantContainer, null,\r\n React.createElement(s.VariantDropdown, { ref: selectRef, active: dropdownActive, onClick: () => setDropdownActive(!dropdownActive) },\r\n React.createElement(s.VariantDropdownSelected, null,\r\n activeVariant.name,\r\n \" \",\r\n React.createElement(ChevronDown, null)),\r\n React.createElement(s.VariantDropdownContainer, null, variants.map((variant) => (React.createElement(s.VariantDropdownOption, { key: variant.id, onClick: () => handleVariantSelect(variant) }, variant.name)))))))),\r\n React.createElement(s.LogoContainer, null,\r\n getIcon(icon, { width: 107, height: 62, fill: brand.blue.base, wrapper: s.Icon }),\r\n additionalLogos?.map((logo, index) => (React.createElement(s.Logo, { key: index, src: logo }))))))));\r\n};\r\nexport default ProductOverview;\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 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","export var MediaType;\r\n(function (MediaType) {\r\n MediaType[MediaType[\"Image\"] = 0] = \"Image\";\r\n MediaType[MediaType[\"Video\"] = 1] = \"Video\";\r\n})(MediaType || (MediaType = {}));\r\nexport var Icon;\r\n(function (Icon) {\r\n Icon[Icon[\"None\"] = 0] = \"None\";\r\n Icon[Icon[\"TrueBlue\"] = 1] = \"TrueBlue\";\r\n})(Icon || (Icon = {}));\r\n","import React from \"react\";\nexport default (({\n styles = {},\n ...props\n}) => );","import React from \"react\";\nexport default (({\n styles = {},\n ...props\n}) => );","import React from \"react\";\nexport default (({\n styles = {},\n ...props\n}) => );"],"sourceRoot":""}