{"version":3,"file":"static/js/PageGridItem.5f586338.js","mappings":"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","sources":["components/Image/ImageLoader.tsx","components/PageGridItem/PageGridItem.styled.ts","components/PageGridItem/PageGridItem.tsx","components/Watermark/WatermarkLoader.tsx"],"sourcesContent":["import loadable, { DefaultComponent } from \"@loadable/component\";\nimport React, { ReactElement } from \"react\";\n\nimport ImageProps from \"./ImageProps\";\n\nconst Image = loadable(\n    (): Promise<DefaultComponent<ImageProps>> =>\n        import(/* webpackChunkName: \"Image\" */ \"./Image\"),\n);\nconst ImageLoader = (props: ImageProps): ReactElement => <Image {...props} />;\nexport default ImageLoader;\n","import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Icon from \"components/Icon\";\nimport { default as NavLink } from \"components/Link\";\nimport Watermark from \"components/Watermark\";\nimport {\n    styleBodyM,\n    styleHeadingM,\n    styleLabelM,\n} from \"style/components/Typography\";\nimport { columnGap } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\nimport { overlay } from \"style/overlay\";\n\nconst hoverColor = theme(\"theme\", {\n    lightgray: \"--text-on-neutral-link\",\n    blue: \"--text-on-blue-primary-alt\",\n    cyan: \"--text-on-cyan-primary\",\n});\n\nconst headerBorderInitial = theme(\"theme\", {\n    lightgray: \"--color-black-o00\",\n    blue: \"--color-cyan-l60-o00\",\n    cyan: \"--color-blue-o00\",\n});\n\nconst textColor = theme(\"theme\", {\n    lightgray: \"--text-on-neutral-primary\",\n    blue: \"--text-on-blue-primary\",\n    cyan: \"--text-on-cyan-primary\",\n});\n\nconst linkColor = theme(\"theme\", {\n    lightgray: \"--text-on-neutral-secondary\",\n    blue: \"--text-on-blue-secondary\",\n    cyan: \"--text-on-cyan-secondary\",\n});\n\nconst iconColor = theme(\"contentTheme\", {\n    black: \"--icon-decorative-blue\",\n    cyan: \"--icon-decorative-cyan\",\n    blue: \"--icon-decorative-blue\",\n    white: \"--text-on-image-primary\",\n});\n\nexport const Container = styled.div`\n    display: flex;\n    flex-flow: row;\n    justify-content: flex-start;\n    width: 100%;\n`;\n\nexport const ImageWrapper = styled.div`\n    aspect-ratio: 1.5;\n    background: var(--block-blue-default);\n    ${theme(\"useFallbackIcon\", {\n        true: css`\n            &::after {\n                z-index: 2;\n                ${overlay(\"UpLeft\")};\n            }\n        `,\n    })}\n    margin-bottom: 1.75rem;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n\n    figure {\n        inset: 0 0 -1px; /* fix rounding pixels issue */\n        position: absolute;\n\n        img {\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.3s ease-in-out;\n            width: 100%;\n            color: inherit;\n        }\n    }\n\n    ${MQ.FROM_M} {\n        margin-bottom: 2.1875rem;\n    }\n\n    ${MQ.FROM_XL} {\n        margin-bottom: 2.625rem;\n    }\n`;\n\nexport const IconLarge = styled(Icon)`\n    color: var(${iconColor});\n    display: block;\n    margin-bottom: 1.75rem;\n\n    ${MQ.FROM_XL} {\n        margin-bottom: 2.1875rem;\n    }\n`;\n\nexport const Content = styled.div`\n    display: flex;\n    flex-direction: column;\n    row-gap: 0.875rem;\n    width: 100%;\n\n    ${MQ.FROM_M} {\n        row-gap: 1.3125rem;\n    }\n\n    ${MQ.FROM_XL} {\n        row-gap: 1.75rem;\n    }\n`;\n\nexport const Heading = styled.div`\n    ${styleHeadingM};\n\n    span {\n        border-bottom: 1px solid var(${headerBorderInitial});\n        transition: border-color 0.2s ease-in-out;\n    }\n`;\n\nexport const Introduction = styled.div`\n    ${styleBodyM};\n`;\n\nexport const LinkText = styled.div`\n    ${styleLabelM};\n    color: var(${linkColor});\n    margin-right: 0.875rem;\n    transition:\n        margin-right 0.2s ease-in-out,\n        color 0.2s ease-in-out;\n`;\n\nexport const StyledWatermark = styled(Watermark)`\n    pointer-events: none;\n    z-index: 2;\n`;\n\nexport const IconArrow = styled(Icon)`\n    margin-right: 0.875rem;\n    transition: margin-left 0.2s ease-in-out;\n`;\n\nexport const Link = styled(NavLink)`\n    ${columnGap};\n    border-bottom: none;\n    color: var(${textColor});\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &:focus-visible {\n        outline: 7px solid var(--button-focus);\n        outline-offset: 0;\n    }\n\n    &:hover {\n        ${Heading} {\n            span {\n                border-color: currentcolor;\n            }\n        }\n\n        ${ImageWrapper} {\n            img {\n                ${theme(\"isSafari\", {\n                    false: css`\n                        transform: scale(1.04);\n                    `,\n                })};\n            }\n        }\n\n        ${LinkText} {\n            color: var(${hoverColor});\n            margin-right: 0;\n        }\n\n        ${IconArrow} {\n            margin-left: 0.875rem;\n        }\n    }\n`;\n","import React, { ReactElement, useEffect, useState } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport Image from \"components/Image\";\nimport { useBreakpoint } from \"hooks\";\nimport { BREAKPOINT_NUMBER } from \"style/breakpoints\";\nimport generateSrcSet from \"style/generateSrcSet\";\n\nimport {\n    Link,\n    IconArrow,\n    LinkText,\n    Container,\n    Content,\n    Heading,\n    ImageWrapper,\n    IconLarge,\n    Introduction,\n    StyledWatermark,\n} from \"./PageGridItem.styled\";\nimport PageGridItemProps from \"./PageGridItemProps\";\n\nconst PageGridItem = ({\n    heading,\n    className,\n    icon,\n    image,\n    introduction,\n    link,\n    l18n,\n}: PageGridItemProps): ReactElement => {\n    const [isSafari, setIsSafari] = useState<boolean>(false);\n\n    if (image?.caption) delete image.caption;\n    if (image && image.url)\n        image.srcSet = generateSrcSet({\n            image: image.url,\n            focalPoint: image.focalPoint,\n            content: [\n                {\n                    width: 500,\n                    height: Math.ceil(500 / 1.5),\n                    breakpoint: BREAKPOINT_NUMBER.XL,\n                },\n                {\n                    width: 450,\n                    height: Math.ceil(450 / 1.5),\n                    breakpoint: BREAKPOINT_NUMBER.M,\n                },\n                {\n                    width: 768,\n                    height: Math.ceil(768 / 1.5),\n                },\n            ],\n            maxWidth: image.uploadedWidth,\n            maxHeight: image.uploadedHeight,\n            format: \"jpg\",\n        });\n\n    useEffect(() => {\n        typeof navigator !== \"undefined\" &&\n            setIsSafari(\n                navigator.userAgent.indexOf(\"Safari\") !== -1 &&\n                    navigator.userAgent.indexOf(\"Chrome\") === -1,\n            );\n    }, []);\n\n    let iconSize: string;\n    switch (useBreakpoint([\"XL\"])) {\n        case \"XL\":\n            iconSize = \"140\";\n            break;\n        default:\n            iconSize = \"105\";\n    }\n\n    let fallbackIcon: string;\n    switch (useBreakpoint()) {\n        case \"XL\":\n        case \"L\":\n        case \"M\":\n            fallbackIcon = \"link105\";\n            break;\n        default:\n            fallbackIcon = \"link56\";\n    }\n\n    const useFallbackIcon = !image?.url && !icon;\n\n    return (\n        <ThemeProvider\n            theme={{ useFallbackIcon: useFallbackIcon, isSafari: isSafari }}\n        >\n            <Container className={className}>\n                {link && (\n                    <Link\n                        to={link.url}\n                        title={heading}\n                        exact\n                        prefetch={link.prefetch}\n                        gtmClickType={link.gtmClickType || \"PageGriditem\"}\n                    >\n                        {useFallbackIcon ? (\n                            <ImageWrapper>\n                                <StyledWatermark\n                                    key={`Icon-${fallbackIcon || \"\"}`}\n                                    icon={`${fallbackIcon}`}\n                                />\n                            </ImageWrapper>\n                        ) : icon ? (\n                            <IconLarge\n                                key={`IconLarge-${icon}-${iconSize || \"\"}`}\n                                icon={`${icon}${iconSize}`}\n                                aria-hidden=\"true\"\n                            />\n                        ) : (\n                            <ImageWrapper>\n                                <Image {...image} />\n                            </ImageWrapper>\n                        )}\n\n                        <Content>\n                            {heading && (\n                                <Heading>\n                                    <span\n                                        dangerouslySetInnerHTML={{\n                                            __html: heading,\n                                        }}\n                                    />\n                                </Heading>\n                            )}\n\n                            {introduction && (\n                                <Introduction>{introduction}</Introduction>\n                            )}\n                            {link.linkText && (\n                                <LinkText>\n                                    <IconArrow\n                                        icon={\"longArrowRight28\"}\n                                        aria-hidden=\"true\"\n                                    />\n                                    {link.linkText ||\n                                        l18n?.readMore ||\n                                        \"Read more\"}\n                                </LinkText>\n                            )}\n                        </Content>\n                    </Link>\n                )}\n            </Container>\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(PageGridItem);\n","import loadable, { DefaultComponent } from \"@loadable/component\";\nimport React, { ReactElement } from \"react\";\n\nimport WatermarkProps from \"./WatermarkProps\";\n\nconst Watermark = loadable(\n    (): Promise<DefaultComponent<WatermarkProps>> =>\n        import(/* webpackChunkName: \"Watermark\" */ \"./Watermark\"),\n);\nconst WatermarkLoader = (props: WatermarkProps): ReactElement => (\n    <Watermark {...props} />\n);\nexport default WatermarkLoader;\n"],"names":["Image","loadable","resolved","chunkName","isReady","props","key","resolve","__webpack_modules__","importAsync","requireAsync","then","requireSync","id","__webpack_require__","ImageLoader","_jsx","hoverColor","theme","lightgray","blue","cyan","headerBorderInitial","textColor","linkColor","iconColor","black","white","Container","styled","div","withConfig","componentId","ImageWrapper","true","css","overlay","MQ","FROM_M","FROM_XL","IconLarge","Icon","Content","Heading","styleHeadingM","Introduction","styleBodyM","LinkText","styleLabelM","StyledWatermark","Watermark","IconArrow","Link","NavLink","columnGap","false","PageGridItem","heading","className","icon","image","introduction","link","l18n","isSafari","setIsSafari","useState","iconSize","fallbackIcon","caption","url","srcSet","generateSrcSet","focalPoint","content","width","height","Math","ceil","breakpoint","BREAKPOINT_NUMBER","XL","M","maxWidth","uploadedWidth","maxHeight","uploadedHeight","format","useEffect","navigator","userAgent","indexOf","useBreakpoint","useFallbackIcon","ThemeProvider","children","_jsxs","to","title","exact","prefetch","gtmClickType","dangerouslySetInnerHTML","__html","linkText","readMore","React","WatermarkLoader"],"sourceRoot":""}