{"version":3,"file":"static/js/ProductCategoryList.8d2b5659.js","mappings":"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","sources":["components/CallToAction/CallToActionLoader.tsx","components/ProductCategoryList/ProductCategoryList.styled.ts","components/ProductCategoryList/ProductCategoryList.tsx"],"sourcesContent":["import loadable, { DefaultComponent } from \"@loadable/component\";\nimport React, { ReactElement } from \"react\";\n\nimport CallToActionProps from \"./CallToActionProps\";\n\nconst CallToAction = loadable(\n    (): Promise<DefaultComponent<CallToActionProps>> =>\n        import(/* webpackChunkName: \"CallToAction\" */ \"./CallToAction\"),\n);\nconst CallToActionLoader = (props: CallToActionProps): ReactElement => (\n    <CallToAction {...props} />\n);\nexport default CallToActionLoader;\n","import { styled } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport { default as NavLink } from \"components/Link\";\nimport { Container as GridContainer } from \"style/components/Page\";\nimport {\n    styleBodyM,\n    styleBodyLAlt,\n    styleHeadingXL,\n} from \"style/components/Typography\";\nimport { columnGap, GUTTER } from \"style/grid\";\nimport { topPadOffset } from \"style/headerOffsets\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const Container = styled(GridContainer)`\n    ${columnGap};\n    display: grid;\n    flex-flow: column;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    justify-content: flex-start;\n    position: relative;\n\n    ${MQ.FROM_M} {\n        grid-template-columns: repeat(12, [col-start] 1fr);\n    }\n`;\n\nexport const Header = styled.div.attrs<{\n    $headerVisible: boolean;\n}>(() => ({}))`\n    display: grid;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    grid-column: col-start 1 / span 4;\n    place-self: start\n        ${theme(\"displayOption\", {\n            Left: \"flex-start\",\n            Right: \"flex-end\",\n        })};\n\n    ${MQ.FROM_M} {\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 1 / span 8\",\n            Right: \"col-start 5 / span 8\",\n        })};\n    }\n\n    ${MQ.FROM_L} {\n        ${columnGap};\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 1 / span 5\",\n            Right: \"col-start 8 / span 5\",\n        })};\n        position: sticky;\n        top: 4.375rem;\n        ${topPadOffset};\n    }\n    ${MQ.FROM_XL} {\n        column-gap: ${GUTTER.XL};\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 1 / span 6\",\n            Right: \"col-start 7 / span 6\",\n        })};\n        display: grid;\n        grid-template-columns: repeat(6, [col-start] 1fr);\n    }\n`;\n\nexport const Heading = styled.h2`\n    ${styleHeadingXL};\n    grid-column: ${theme(\"displayOption\", {\n        Left: \"col-start 1 / span 3\",\n        Right: \"col-start 2 / span 3\",\n    })};\n    margin-top: 0;\n    text-align: ${theme(\"displayOption\", {\n        Left: \"left\",\n        Right: \"right\",\n    })};\n\n    &:only-child {\n        margin-bottom: 0;\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: col-start 1 / span 4;\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 1 / span 6;\n    }\n`;\n\nexport const Introduction = styled.p`\n    grid-column: col-start 1 / span 4;\n    ${styleBodyLAlt};\n    margin-bottom: 1.625rem;\n    margin-top: 0;\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 1 / span 5;\n    }\n`;\n\nexport const CallToActions = styled.div`\n    ${columnGap};\n    display: grid;\n    grid-column: 1 / span 4;\n    grid-template-columns: repeat(4, 1fr);\n    justify-content: flex-start;\n    margin-top: 2.1875rem;\n    row-gap: 2.625rem;\n\n    ${MQ.FROM_M} {\n        grid-column: 1 / span 12;\n        row-gap: 3.9375rem;\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: ${theme(\"displayOption\", {\n                Left: \"6\",\n                Right: \"1\",\n            })} / span 7;\n        grid-row: 1;\n        margin-top: 3.9375rem;\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: ${theme(\"displayOption\", {\n                Left: \"7\",\n                Right: \"1\",\n            })} / span 6;\n        grid-row: 1;\n        margin-top: 7rem;\n        row-gap: 5.25rem;\n    }\n`;\n\nexport const CallToActionContainer = styled.div`\n    grid-column: auto / span 4;\n\n    ${MQ.FROM_M} {\n        grid-column: auto / span 2;\n    }\n`;\nexport const borderColor = theme(\"contentTheme\", {\n    black: \"var(--color-black-o30)\",\n    cyan: \"var(--color-cyan-l60-o30)\",\n    blue: \"var(--color-blue-o30)\",\n    coral: \"var(--color-coral-o30)\",\n    image: \"var(--color-white-o30)\",\n});\n\nexport const Link = styled(NavLink)`\n    ${styleBodyM}\n    display: block;\n    grid-column: 1 / span 4;\n    margin-top: 0.875rem;\n    width: 100%;\n\n    span {\n        border-bottom-color: ${borderColor};\n    }\n\n    &:hover {\n        span {\n            border-bottom-color: currentcolor;\n        }\n    }\n\n    svg {\n        margin-left: 0.875rem;\n    }\n`;\n","import React, { ReactElement } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport CallToAction from \"components/CallToAction\";\nimport Icon from \"components/Icon\";\nimport Section from \"components/Section\";\nimport { useHeaderVisible } from \"hooks\";\nimport { addEditAttributes } from \"utils/episerver\";\n\nimport {\n    Container,\n    Header,\n    Heading,\n    Introduction,\n    CallToActions,\n    CallToActionContainer,\n    Link,\n} from \"./ProductCategoryList.styled\";\nimport ProductCategoryListProps from \"./ProductCategoryListProps\";\n\nconst ProductCategoryList = ({\n    identifier,\n    theme = \"blue\",\n    contentTheme = \"cyan\",\n    heading,\n    introduction,\n    displayOption = \"Left\",\n    items,\n    link,\n    anchorName,\n}: ProductCategoryListProps): ReactElement => {\n    const headerVisible = useHeaderVisible();\n    return (\n        <Section theme={theme} id={anchorName} alignItems=\"center\">\n            <ThemeProvider\n                theme={{\n                    theme: theme,\n                    contentTheme: contentTheme,\n                    displayOption: displayOption,\n                }}\n            >\n                <Container key={identifier || `ProductCategoryListContent`}>\n                    {heading && (\n                        <Header $headerVisible={headerVisible}>\n                            <Heading\n                                as=\"h2\"\n                                {...addEditAttributes(\"Heading\")}\n                                dangerouslySetInnerHTML={{ __html: heading }}\n                            />\n                            {introduction && (\n                                <Introduction\n                                    {...addEditAttributes(\"Introduction\")}\n                                    dangerouslySetInnerHTML={{\n                                        __html: introduction || \"\",\n                                    }}\n                                />\n                            )}\n                        </Header>\n                    )}\n                    <CallToActions {...addEditAttributes(\"ProductCategories\")}>\n                        {items?.map((item, index) => {\n                            return (\n                                <CallToActionContainer\n                                    key={`CallToAction${index}`}\n                                >\n                                    <CallToAction\n                                        contentTheme={contentTheme || \"default\"}\n                                        {...item}\n                                    />\n                                </CallToActionContainer>\n                            );\n                        })}\n                        {link?.linkText && (\n                            <Link linkRef={link} hoverSpan={true}>\n                                <span>{link.linkText}</span>\n                                <Icon\n                                    icon=\"longArrowRight28\"\n                                    aria-hidden=\"true\"\n                                />\n                            </Link>\n                        )}\n                    </CallToActions>\n                </Container>\n            </ThemeProvider>\n        </Section>\n    );\n};\n\nexport default React.memo(ProductCategoryList);\n"],"names":["CallToAction","loadable","resolved","chunkName","isReady","props","key","resolve","__webpack_modules__","importAsync","requireAsync","then","requireSync","id","__webpack_require__","CallToActionLoader","_jsx","Container","styled","GridContainer","withConfig","componentId","columnGap","MQ","FROM_M","Header","div","attrs","theme","Left","Right","FROM_L","topPadOffset","FROM_XL","GUTTER","XL","Heading","h2","styleHeadingXL","Introduction","p","styleBodyLAlt","CallToActions","CallToActionContainer","borderColor","black","cyan","blue","coral","image","Link","NavLink","styleBodyM","ProductCategoryList","identifier","contentTheme","heading","introduction","displayOption","items","link","anchorName","headerVisible","useHeaderVisible","Section","alignItems","children","ThemeProvider","_jsxs","$headerVisible","as","addEditAttributes","dangerouslySetInnerHTML","__html","map","item","index","linkText","linkRef","hoverSpan","Icon","icon","React"],"sourceRoot":""}