{"version":3,"sources":["webpack:///./src/hocs/withMotion.tsx","webpack:///./src/helpers/typography.ts","webpack:///./src/core/api/services/ApiService.ts","webpack:///./src/stories/Widgets/Products/ProductList/ProductList.styles.ts","webpack:///./src/stories/Widgets/Products/ProductList/ProductList.tsx","webpack:///./src/helpers/columns.ts","webpack:///./src/stories/Widgets/Products/SearchResults/SearchResults.styles.ts","webpack:///./src/stories/Components/Misc/Spinner/Spinner.styles.ts","webpack:///./src/stories/Components/Misc/Spinner/Spinner.tsx","webpack:///./src/stories/Widgets/Products/SearchResults/SearchResults.tsx"],"names":["withMotion","WrappedComponent","displayName","name","ComponentWithMotion","props","React","createElement","LazyMotion","features","domAnimation","strict","Object","assign","H1Styles","css","fonts","helvetica","from","Device","Tablet","DesktopLarge","H1","styled","h1","H2Styles","H2","h2","H3Styles","H3","h3","H4Styles","H4","h4","PStyles","P","p","PLargeStyles","PSmallStyles","BlockquoteStyles","Typography","Blockquote","blockquote","ApiService","request","url","this","getUrl","headers","Headers","Accept","isMultipartFormData","delete","requestOptions","method","mode","cache","body","getBody","files","fetch","response","status","Error","statusText","json","data","controller","slug","baseUrl","params","querystring","stringify","formData","FormData","append","JSON","length","index","file","ProductListStyles","Grid","section","grids","Default","brand","grey","TabletLarge","CardStyles","Card","MobileLarge","ProductList","rowItems","useMedia","until","products","map","x","key","imageUrl","FullWidth","Content","ContentWide","Container","HeaderWrapper","div","white","Header","header","columns","BackToHomeAnchor","a","blue","base","Title","AnimatedSpan","m","span","attrs","initial","animate","exit","variants","y","transition","duration","Count","strong","SearchResultsStyles","LoaderWrapper","Results","SpinnerStyles","Spinner","theme","S","setStatus","setResponse","searchTerm","apiResponse","console","error","getResults","href","homeUrl","translations","AnimatePresence","replace","totalCount","toString","product","tag","icon","isTrueBlue","Icon","TrueBlue","None","title","subTitle"],"mappings":"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","file":"SearchResults-2e1241675420ab1a3a12.js","sourcesContent":["import { domAnimation, LazyMotion } from 'framer-motion';\r\nimport React from 'react';\r\nexport function withMotion(WrappedComponent) {\r\n    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n    const ComponentWithMotion = (props) => {\r\n        return (React.createElement(LazyMotion, { features: domAnimation, strict: true },\r\n            React.createElement(WrappedComponent, Object.assign({}, props))));\r\n    };\r\n    ComponentWithMotion.displayName = `withMotion(${displayName})`;\r\n    return ComponentWithMotion;\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","import querystring from 'querystring';\r\nclass ApiService {\r\n    async request(request) {\r\n        // Get the url\r\n        const url = this.getUrl(request);\r\n        // Headers\r\n        const headers = new Headers({\r\n            'Content-Type': 'application/json; charset=utf-8',\r\n            Accept: 'application/json',\r\n        });\r\n        if (request.isMultipartFormData === true) {\r\n            headers.delete('Content-Type');\r\n        }\r\n        // construct a request\r\n        const requestOptions = {\r\n            method: request.method,\r\n            headers,\r\n            mode: 'cors',\r\n            cache: 'default',\r\n            body: this.getBody(request, request.files),\r\n        };\r\n        // await the response\r\n        const response = await fetch(url, requestOptions);\r\n        if (response.status === 500) {\r\n            throw Error(`${response.status}: ${response.statusText}`);\r\n        }\r\n        const data = (await response.json());\r\n        return data;\r\n    }\r\n    getUrl(request) {\r\n        let url = `/api/${request.controller}/${request.slug}`;\r\n        if (request.baseUrl) {\r\n            url = `${request.baseUrl}${url}`;\r\n        }\r\n        if ((request.method === 'GET' || request.method === 'DELETE') && request.params) {\r\n            url += '?';\r\n            url += querystring.stringify({ ...request.params });\r\n        }\r\n        return url;\r\n    }\r\n    getBody(request, files) {\r\n        if (request.method === 'GET') {\r\n            return null;\r\n        }\r\n        if (request.isMultipartFormData === true) {\r\n            const formData = new FormData();\r\n            formData.append('params', JSON.stringify(request.params));\r\n            if (files && files.length > 0) {\r\n                for (let index = 0; index < files.length; index++) {\r\n                    const file = files[index];\r\n                    formData.append(`files-${index}`, file);\r\n                }\r\n            }\r\n            return formData;\r\n        }\r\n        return JSON.stringify(request.params);\r\n    }\r\n}\r\nexport default new ApiService();\r\n","import grids from '@helpers/grids';\r\nimport { Device, from } from '@helpers/media';\r\nimport { CardStyles } from '@stories/Components/Cards/Card/Card.styles';\r\nimport { brand } from '@tti/brand-empire';\r\nimport styled from 'styled-components';\r\nconst Grid = styled.section `\r\n  ${grids.Default};\r\n  background-color: ${brand.grey[1]};\r\n  padding-top: 40px;\r\n  padding-bottom: 40px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding-top: 80px;\r\n    padding-bottom: 80px;\r\n  }\r\n\r\n  ${CardStyles.Card} {\r\n    grid-column: span 12;\r\n\r\n    @media ${from(Device.MobileLarge)} {\r\n      grid-column: span 6;\r\n    }\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      grid-column: span 4;\r\n    }\r\n\r\n    @media ${from(Device.DesktopLarge)} {\r\n      grid-column: span 3;\r\n    }\r\n  }\r\n`;\r\nexport const ProductListStyles = {\r\n    Grid,\r\n};\r\n","import { Device, until } from '@helpers/media';\r\nimport useMedia from '@hooks/useMedia';\r\nimport Card from '@stories/Components/Cards/Card/Card';\r\nimport React from 'react';\r\nimport { ProductListStyles } from './ProductList.styles';\r\nconst ProductList = (props) => {\r\n    const rowItems = useMedia([until(Device.MobileLarge), until(Device.TabletLarge), until(Device.DesktopLarge)], [1, 2, 3], 4);\r\n    return (React.createElement(ProductListStyles.Grid, null, props.products.map((x, index) => (React.createElement(Card, Object.assign({ key: x.imageUrl }, x, { index: index, rowItems: rowItems }))))));\r\n};\r\nexport default ProductList;\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 { brand } from '@tti/brand-empire';\r\nimport { CardStyles } from '@stories/Components/Cards/Card/Card.styles';\r\nimport { Typography } from '@helpers/typography';\r\nimport { until, Device, from } from '@helpers/media';\r\nimport { m } from 'framer-motion';\r\nimport columns from '@helpers/columns';\r\nimport grids from '@helpers/grids';\r\nimport styled from 'styled-components';\r\nconst Container = styled.section `\r\n  background-color: ${brand.grey[1]};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\nconst HeaderWrapper = styled.div `\r\n  background-color: ${brand.white};\r\n  padding: 24px 0;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding: 40px 0;\r\n  }\r\n`;\r\nconst Header = styled.header `\r\n  ${grids.Default};\r\n  gap: 12px;\r\n`;\r\nconst FullWidth = styled.div `\r\n  ${columns.FullWidth};\r\n  display: flex;\r\n`;\r\nconst BackToHomeAnchor = styled.a `\r\n  ${Typography.PLargeStyles};\r\n  color: ${brand.blue.base};\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-self: flex-start;\r\n  grid-column: 1 / span 12;\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst Title = styled.h1 `\r\n  grid-column: 1 / span 12;\r\n\r\n  ${Typography.H3Styles};\r\n  display: grid;\r\n  place-items: center;\r\n  grid-template-columns: 1fr;\r\n  color: ${brand.blue.base};\r\n  text-align: center;\r\n  overflow: hidden;\r\n  height: 2.5em;\r\n`;\r\nconst animatedSpanVariants = {\r\n    initial: {\r\n        y: '2em',\r\n        transition: {\r\n            duration: 0.4,\r\n        },\r\n    },\r\n    animate: {\r\n        y: 0,\r\n        transition: {\r\n            duration: 0.4,\r\n        },\r\n    },\r\n    exit: {\r\n        y: '-2em',\r\n        transition: {\r\n            duration: 0.4,\r\n        },\r\n    },\r\n};\r\nconst AnimatedSpan = styled(m.span).attrs({ initial: 'initial', animate: 'animate', exit: 'exit', variants: animatedSpanVariants }) `\r\n  grid-row-start: 1;\r\n  grid-column-start: 1;\r\n  line-height: 1.3em;\r\n`;\r\nconst Count = styled.strong `\r\n  ${Typography.PLargeStyles};\r\n  display: grid;\r\n  place-items: center;\r\n  grid-column: 1 / span 12;\r\n  text-align: center;\r\n  height: 1.5em;\r\n  overflow: hidden;\r\n`;\r\nconst Content = styled.div `\r\n  grid-column: 1 / span 12;\r\n  min-height: 80px;\r\n`;\r\nconst LoaderWrapper = styled.div `\r\n  grid-column: 1 / span 12;\r\n  padding: 40px 0;\r\n\r\n  display: grid;\r\n  place-items: center;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding: 80px 0;\r\n  }\r\n`;\r\nconst Results = styled.div `\r\n  ${CardStyles.Card} {\r\n    min-height: 250px;\r\n  }\r\n`;\r\nconst SearchResultsStyles = {\r\n    Container,\r\n    HeaderWrapper,\r\n    Header,\r\n    FullWidth,\r\n    BackToHomeAnchor,\r\n    Title,\r\n    AnimatedSpan,\r\n    Count,\r\n    LoaderWrapper,\r\n    Results,\r\n    Content,\r\n};\r\nexport default SearchResultsStyles;\r\n","import { brand } from '@tti/brand-empire';\r\nimport styled from 'styled-components';\r\nconst Spinner = styled.div `\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 50%;\r\n  position: relative;\r\n  animation: rotate 2s linear infinite;\r\n\r\n  --color-main: ${brand.blue.base};\r\n  --color-accent: ${brand.grey[1]};\r\n\r\n  &[data-theme='dark'] {\r\n    --color-main: ${brand.grey[7]};\r\n    --color-accent: ${brand.white};\r\n  }\r\n\r\n  &::before,\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    border-radius: 50%;\r\n    animation: prixClipFix 2s linear infinite;\r\n    border: 5px solid var(--color-main);\r\n  }\r\n\r\n  &::after {\r\n    transform: rotate3d(90, 90, 0, 180deg);\r\n    border-color: var(--color-accent);\r\n  }\r\n\r\n  @keyframes rotate {\r\n    0% {\r\n      transform: rotate(0deg);\r\n    }\r\n    90% {\r\n      opacity: 1;\r\n      transform: rotate(648deg);\r\n    }\r\n    98% {\r\n      opacity: 0;\r\n    }\r\n    100% {\r\n      transform: rotate(720deg) scale(1.2);\r\n      opacity: 0;\r\n    }\r\n  }\r\n\r\n  @keyframes prixClipFix {\r\n    0% {\r\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\r\n    }\r\n    50% {\r\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\r\n    }\r\n    75%,\r\n    100% {\r\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\r\n    }\r\n  }\r\n`;\r\nconst SpinnerStyles = {\r\n    Spinner,\r\n};\r\nexport default SpinnerStyles;\r\n","import * as React from 'react';\r\nimport S from './Spinner.styles';\r\nconst Spinner = ({ theme = 'dark' }) => {\r\n    return React.createElement(S.Spinner, { \"data-theme\": theme });\r\n};\r\nexport default Spinner;\r\n","import { AnimatePresence } from 'framer-motion';\r\nimport { Icon } from '@core/enums';\r\nimport { withMotion } from '@hocs/withMotion';\r\nimport * as React from 'react';\r\nimport ApiService from '@core/api/services/ApiService';\r\nimport ProductList from '../ProductList/ProductList';\r\nimport S from './SearchResults.styles';\r\nimport Spinner from '@stories/Components/Misc/Spinner/Spinner';\r\nconst SearchResults = (props) => {\r\n    const [status, setStatus] = React.useState('loading');\r\n    const [response, setResponse] = React.useState(null);\r\n    React.useEffect(() => {\r\n        setStatus('loading');\r\n        async function getResults() {\r\n            try {\r\n                const apiResponse = await ApiService.request({\r\n                    controller: 'product-search',\r\n                    slug: 'search',\r\n                    method: 'POST',\r\n                    params: {\r\n                        searchTerm: props.searchTerm,\r\n                    },\r\n                });\r\n                setResponse(apiResponse);\r\n                setStatus(apiResponse.products.length > 0 ? 'done' : 'no-results');\r\n            }\r\n            catch (error) {\r\n                setStatus('no-results');\r\n                console.error(error);\r\n            }\r\n        }\r\n        getResults();\r\n    }, []);\r\n    return (React.createElement(S.Container, null,\r\n        React.createElement(S.HeaderWrapper, null,\r\n            React.createElement(S.Header, null,\r\n                React.createElement(S.BackToHomeAnchor, { href: props.homeUrl }, props.translations['custom.backToHome']),\r\n                React.createElement(S.Title, null,\r\n                    React.createElement(AnimatePresence, null,\r\n                        status === 'loading' && (React.createElement(S.AnimatedSpan, { key: \"title-text--loading\" }, props.translations['custom.searchingResultsFor'].replace('[[X]]', `'${props.searchTerm}'`))),\r\n                        status == 'done' && (React.createElement(S.AnimatedSpan, { key: \"title-text--done\" }, props.translations['custom.yourResultsFor'].replace('[[X]]', `'${props.searchTerm}'`))),\r\n                        status == 'no-results' && (React.createElement(S.AnimatedSpan, { key: \"title-text--no-results\" }, props.translations['custom.noResultsFor'].replace('[[X]]', `'${props.searchTerm}'`))))),\r\n                React.createElement(S.Count, null,\r\n                    React.createElement(AnimatePresence, null,\r\n                        status == 'loading' && React.createElement(S.AnimatedSpan, { key: \"count-text--loading\" }, props.translations['custom.pleaseWait']),\r\n                        status == 'done' && (React.createElement(S.AnimatedSpan, { key: \"count-text--done\" }, props.translations['custom.productCount'].replace('[[X]]', response?.totalCount.toString() ?? '0'))),\r\n                        status == 'no-results' && (React.createElement(S.AnimatedSpan, { key: \"count-text--no-results\" }, props.translations['custom.noResultsFor'].replace('[[X]]', props.searchTerm))))))),\r\n        React.createElement(S.Content, null,\r\n            status === 'loading' && (React.createElement(S.LoaderWrapper, null,\r\n                React.createElement(Spinner, { theme: \"light\" }))),\r\n            response && status === 'done' && (React.createElement(S.Results, { key: \"results\" },\r\n                React.createElement(ProductList, { products: response.products.map((product) => ({\r\n                        tag: product.tag ?? '',\r\n                        imageUrl: product.imageUrl,\r\n                        icon: product.isTrueBlue ? Icon.TrueBlue : Icon.None,\r\n                        title: product.title,\r\n                        url: product.url,\r\n                        subTitle: product.subTitle,\r\n                    })) }))))));\r\n};\r\nexport default withMotion(SearchResults);\r\n"],"sourceRoot":""}