{"version":3,"file":"static/js/FactBox.b477eeaa.js","mappings":"uUAQA,MAAMA,EAAkBC,IAAM,QAAS,CACnCC,UAAW,gBACXC,KAAM,mBACNC,KAAM,qBAGGC,EAAYC,EAAAA,OAAOC,IAAGC,WAAA,CAAAC,YAAA,eAAVH,CAAU,4KACbN,EAOhBC,IAAM,eAAgB,CACpBS,MAAMC,EAAAA,EAAAA,KAAG,qBAKXC,EAAAA,GAAGC,OAECZ,IAAM,eAAgB,CACpBS,MAAMC,EAAAA,EAAAA,KAAG,qBAMfC,EAAAA,GAAGE,QAECb,IAAM,eAAgB,CACpBS,MAAMC,EAAAA,EAAAA,KAAG,sBAORI,EAAUT,EAAAA,OAAOC,IAAIS,OAG/B,MAAS,KAAER,WAAA,CAAAC,YAAA,eAHSH,CAGT,iGACRW,EAAAA,IAKCC,GACCA,EAAMC,WACNR,EAAAA,EAAAA,KAAG,qLAKyBO,EAAME,WACpB,uBAAyBF,EAAME,WAAa,IAC5C,gCAYTC,GAAkBf,EAAAA,EAAAA,QAAOgB,EAAAA,GAAUd,WAAA,CAAAC,YAAA,eAAjBH,CAAiB,oHAcnCiB,EAAYjB,EAAAA,OAAOC,IAAGC,WAAA,CAAAC,YAAA,eAAVH,CAAU,sDAMtBkB,GAAWlB,EAAAA,EAAAA,QAAOmB,EAAAA,GAAajB,WAAA,CAAAC,YAAA,eAApBH,CAAoB,gIAOlCW,EAAAA,GASJhB,IAAM,QAAS,CACbE,MAAMQ,EAAAA,EAAAA,KAAG,mI,qGCnGjB,MAAMe,EAAUA,EACZC,aACAC,aACAC,YACA5B,QACA6B,UACAC,WACAC,gBACAC,WACAC,OACAC,YAAW,MAEX,MAAMC,GAAeC,EAAAA,EAAAA,KAErBP,EAAUA,IAAYM,EAAe,QAAKE,GAC1CP,EAAWA,IAAaK,EAAe,CAAC,CAAC,QAAKE,GAC9C,MAAMC,GAAeC,EAAAA,EAAAA,YAAWC,EAAAA,cAGhC,OAFKxC,IAAOA,EAASsC,GAAgBA,EAAatC,OAAU,cAGxDyC,EAAAA,EAAAA,KAACC,EAAAA,cAAa,CAAC1C,MAAO,CAAEA,MAAOA,GAAQgC,UACnCW,EAAAA,EAAAA,MAACvC,EAAAA,GAAS,CAAkBwC,GAAIjB,EAAYC,UAAWA,EAAUI,SAAA,CAC5DH,IACGY,EAAAA,EAAAA,KAAC3B,EAAAA,GAAO,CACJI,WAAYe,EACZd,WAAYc,MACRY,EAAAA,EAAAA,IAAkB,WACtBC,wBAAyB,CAAEC,OAAQlB,KAG1CC,IACGW,EAAAA,EAAAA,KAACrB,EAAAA,GAAe,CACZ4B,QAASlB,EACTmB,SAAS,WACTf,SAAUA,MACNW,EAAAA,EAAAA,IAAkB,cAG7Bb,EACAD,GAAiBA,EAAcmB,OAAS,IACrCT,EAAAA,EAAAA,KAACnB,EAAAA,GAAS,CAAAU,SACLD,EAAcoB,KAAI,CAACC,EAAUC,KAC1BZ,EAAAA,EAAAA,KAAClB,EAAAA,GAAQ,IAED6B,GADCA,EAAS1B,YAAe,WAAU2B,WAtB3C3B,IA6BJ,EAIxB,UAAe4B,EAAAA,KAAW7B,E","sources":["components/FactBox/FactBox.styled.ts","components/FactBox/FactBox.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport { default as BaseDocument } from \"components/Document\";\nimport TextBlock from \"components/TextBlock\";\nimport { styleBodyM } from \"style/components/Typography\";\nimport { MQ } from \"style/mediaQueries\";\n\nconst backgroundColor = theme(\"theme\", {\n    lightgray: \"--color-white\",\n    blue: \"--color-cyan-o20\",\n    cyan: \"--color-blue-o15\",\n});\n\nexport const Container = styled.div`\n    background: var(${backgroundColor});\n    border-radius: 0.25rem;\n    display: flex;\n    flex-flow: column wrap;\n    margin: 1.75rem 0;\n    padding: 1.75rem;\n\n    ${theme(\"blockInBlock\", {\n        true: css`\n            margin-top: 0;\n        `,\n    })}\n\n    ${MQ.FROM_M} {\n        margin: 2.1875rem 0;\n        ${theme(\"blockInBlock\", {\n            true: css`\n                margin-top: 0;\n            `,\n        })}\n    }\n\n    ${MQ.FROM_XL} {\n        margin: 2.625rem 0;\n        ${theme(\"blockInBlock\", {\n            true: css`\n                margin-top: 0;\n            `,\n        })}\n    }\n`;\n\nexport const Heading = styled.div.attrs<{\n    $hasIcon?: boolean;\n    $iconColor?: string;\n}>(() => ({}))`\n    ${styleBodyM};\n    font-weight: bold;\n    grid-column: col-start 1 / span 4;\n    margin-bottom: 1.75rem;\n    margin-top: 0;\n    ${(props) =>\n        props.$hasIcon &&\n        css`\n            padding-left: 2.625rem;\n            position: relative;\n\n            &::before {\n                background-color: ${props.$iconColor\n                    ? \"var(--color-traffic-\" + props.$iconColor + \")\"\n                    : \"var(--color-traffic-green)\"};\n                border-radius: 50%;\n                content: \"\";\n                display: block;\n                height: 1.3125rem;\n                inset: 3px;\n                position: absolute;\n                width: 1.3125rem;\n            }\n        `}\n`;\n\nexport const StyledTextBlock = styled(TextBlock)`\n    margin-bottom: 1.75rem;\n\n    div {\n        &:first-child :first-child {\n            margin-top: 0;\n        }\n\n        &:last-child :last-child {\n            margin-bottom: 0;\n        }\n    }\n`;\n\nexport const Documents = styled.div`\n    display: flex;\n    flex-flow: column wrap;\n    gap: 0.875rem;\n`;\n\nexport const Document = styled(BaseDocument)`\n    display: block;\n    min-height: 1.75rem;\n    padding-left: 2.1875rem;\n    position: relative;\n\n    span {\n        ${styleBodyM};\n    }\n\n    svg {\n        left: 0;\n        position: absolute;\n        top: 0;\n    }\n\n    ${theme(\"theme\", {\n        blue: css`\n            color: var(--color-cyan-l60);\n\n            span {\n                border-color: var(--color-cyan-l60-o30);\n            }\n\n            &:hover {\n                span {\n                    border-color: var(--color-cyan-l60);\n                }\n            }\n        `,\n    })}\n`;\n","import React, { ReactElement, useContext } from \"react\";\nimport { ThemeContext, ThemeProvider } from \"styled-components\";\n\nimport useIsInEditMode from \"hooks/useIsInEditMode\";\nimport { addEditAttributes } from \"utils/episerver\";\n\nimport {\n    Container,\n    Heading,\n    StyledTextBlock,\n    Documents,\n    Document,\n} from \"./FactBox.styled\";\nimport FactBoxProps from \"./FactBoxProps\";\n\nconst FactBox = ({\n    identifier,\n    anchorName,\n    className,\n    theme,\n    heading,\n    mainBody,\n    documentLinks,\n    children,\n    icon,\n    lightbox = false,\n}: FactBoxProps): ReactElement => {\n    const isInEditMode = useIsInEditMode();\n\n    heading = heading || (isInEditMode ? \"\" : undefined);\n    mainBody = mainBody || (isInEditMode ? [{}] : undefined);\n    const themeContext = useContext(ThemeContext);\n    if (!theme) theme = (themeContext && themeContext.theme) || \"lightgray\";\n\n    return (\n        <ThemeProvider theme={{ theme: theme }}>\n            <Container key={identifier} id={anchorName} className={className}>\n                {heading && (\n                    <Heading\n                        $hasIcon={!!icon}\n                        $iconColor={icon}\n                        {...addEditAttributes(\"Heading\")}\n                        dangerouslySetInnerHTML={{ __html: heading }}\n                    />\n                )}\n                {mainBody && (\n                    <StyledTextBlock\n                        content={mainBody}\n                        areaName=\"mainBody\"\n                        lightbox={lightbox}\n                        {...addEditAttributes(\"MainBody\")}\n                    />\n                )}\n                {children}\n                {documentLinks && documentLinks.length > 0 && (\n                    <Documents>\n                        {documentLinks.map((document, index) => (\n                            <Document\n                                key={document.identifier || `document${index}`}\n                                {...document}\n                            />\n                        ))}\n                    </Documents>\n                )}\n            </Container>\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(FactBox);\n"],"names":["backgroundColor","theme","lightgray","blue","cyan","Container","styled","div","withConfig","componentId","true","css","MQ","FROM_M","FROM_XL","Heading","attrs","styleBodyM","props","$hasIcon","$iconColor","StyledTextBlock","TextBlock","Documents","Document","BaseDocument","FactBox","identifier","anchorName","className","heading","mainBody","documentLinks","children","icon","lightbox","isInEditMode","useIsInEditMode","undefined","themeContext","useContext","ThemeContext","_jsx","ThemeProvider","_jsxs","id","addEditAttributes","dangerouslySetInnerHTML","__html","content","areaName","length","map","document","index","React"],"sourceRoot":""}