{"version":3,"file":"static/js/SideBySide.f58cd0f9.js","mappings":"gUAQO,MAAMA,GAAYC,EAAAA,EAAAA,QAAOC,EAAAA,IAAcC,WAAA,CAAAC,YAAA,cAArBH,CAAqB,iJACxCI,EAAAA,GAIAC,EAAAA,GAAGC,QAMIC,EAAUP,EAAAA,OAAOQ,GAAEN,WAAA,CAAAC,YAAA,cAATH,CAAS,oNAC1BS,EAAAA,GAKAC,IAAM,gBAAiB,CACrBC,OAAOC,EAAAA,EAAAA,KAAG,yBAKZP,EAAAA,GAAGQ,OAGCH,IAAM,gBAAiB,CACrBC,OAAOC,EAAAA,EAAAA,KAAG,0CAMhBP,EAAAA,GAAGS,QAGCJ,IAAM,gBAAiB,CACrBC,OAAOC,EAAAA,EAAAA,KAAG,0CAOTG,EAAcf,EAAAA,OAAOgB,IAAGd,WAAA,CAAAC,YAAA,cAAVH,CAAU,qHAG/BK,EAAAA,GAAGQ,OACcH,IAAM,gBAAiB,CAClCC,MAAO,yBAIbD,IAAM,gBAAiB,CACrBC,OAAOC,EAAAA,EAAAA,KAAG,gBAKZP,EAAAA,GAAGC,OAEcI,IAAM,gBAAiB,CAClCC,MAAO,uBACPM,KAAM,yBAGZZ,EAAAA,GAAGS,QACcJ,IAAM,gBAAiB,CAClCC,MAAO,uBACPM,KAAM,yBAGZP,IAAM,gBAAiB,CACrBQ,MAAMN,EAAAA,EAAAA,KAAG,4BAQJO,EAAenB,EAAAA,OAAOgB,IAAGd,WAAA,CAAAC,YAAA,cAAVH,CAAU,yGAGhCK,EAAAA,GAAGQ,OACcH,IAAM,gBAAiB,CAClCO,KAAM,yBAIZZ,EAAAA,GAAGC,OACcI,IAAM,gBAAiB,CAClCC,MAAO,uBACPM,KAAM,yBAGZZ,EAAAA,GAAGS,QACcJ,IAAM,gBAAiB,CAClCC,MAAO,uBACPM,KAAM,yBAGZP,IAAM,gBAAiB,CACrBQ,MAAMN,EAAAA,EAAAA,KAAG,4B,eC7FjB,MAAMQ,EAAaA,EACfC,UACAC,gBACAC,gBACAC,aACAC,aACAf,QAAQ,YACRgB,gBAAgB,OAChBC,gBACAC,cACAC,eACAC,mBAEA,MAAMC,GAAeC,EAAAA,EAAAA,KAYrB,OAVAF,EAAe,CACX,CACIG,MAAO,IACPC,WAAYC,EAAAA,GAAkBC,IAElC,CACIH,MAAO,OAKXI,EAAAA,EAAAA,KAACC,EAAAA,cAAa,CACV5B,MAAO,CACHgB,cAAeA,EACfC,cAAeA,EACfY,cAAc,EACdX,YAAaA,EACbC,aAAcA,GAChBW,UAEFH,EAAAA,EAAAA,KAACI,EAAAA,EAAO,CAAC/B,MAAOA,EAAOgC,WAAW,SAAQF,UACtCG,EAAAA,EAAAA,MAAC5C,EAAS,CAAkB6C,GAAInB,EAAWe,SAAA,EACrCT,GAAgBV,KACdgB,EAAAA,EAAAA,KAAC9B,EAAO,KACAsC,EAAAA,EAAAA,IAAkB,WACtBC,wBAAyB,CAAEC,OAAQ1B,GAAW,OAGtDgB,EAAAA,EAAAA,KAACtB,EAAW,CAAAyB,UACRH,EAAAA,EAAAA,KAACW,EAAAA,EAAW,CACRC,MACsB,UAAlBvB,EACMH,EACAD,EAEV4B,kBAAmBC,EAAAA,EACnBrB,aAAcA,OAGtBO,EAAAA,EAAAA,KAAClB,EAAY,CAAAqB,UACTH,EAAAA,EAAAA,KAACW,EAAAA,EAAW,CACRC,MACsB,UAAlBvB,EACMJ,EACAC,EAEV2B,kBAAmBC,EAAAA,EACnBrB,aAAcA,QA1BVN,MA+BR,EAIxB,MAAe4B,EAAAA,KAAWhC,E","sources":["components/SideBySide/SideBySide.styled.ts","components/SideBySide/SideBySide.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { styleHeadingXL } from \"style/components/Typography\";\nimport { columnGap } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const Container = styled(GridContainer)`\n    ${columnGap}\n    display: grid;\n    grid-template-columns: repeat(12, [col-start] 1fr);\n\n    ${MQ.FROM_L} {\n        grid-auto-rows: auto;\n        grid-template-columns: repeat(12, [col-start] 1fr);\n    }\n`;\n\nexport const Heading = styled.h2`\n    ${styleHeadingXL};\n    grid-column: col-start 1 / span 12;\n    margin-bottom: 2.625rem;\n    margin-top: 0;\n\n    ${theme(\"displayOption\", {\n        Right: css`\n            text-align: right;\n        `,\n    })}\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 1 / span 12;\n        margin-bottom: 4.375rem;\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 2 / span 11;\n            `,\n        })}\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 1 / span 8;\n        margin-bottom: 6.125rem;\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 5 / span 8;\n            `,\n        })}\n    }\n`;\n\nexport const LeftSideCol = styled.div`\n    grid-column: col-start 1 / span 12;\n\n    ${MQ.FROM_M} {\n        grid-column: ${theme(\"displayOption\", {\n            Right: \"col-start 5 / span 8\",\n        })};\n    }\n\n    ${theme(\"displayOption\", {\n        Right: css`\n            order: 1;\n        `,\n    })}\n\n    ${MQ.FROM_L} {\n        order: 0;\n        grid-column: ${theme(\"displayOption\", {\n            Right: \"col-start 1 / span 5\",\n            Left: \"col-start 1 / span 7\",\n        })};\n    }\n    ${MQ.FROM_XL} {\n        grid-column: ${theme(\"displayOption\", {\n            Right: \"col-start 1 / span 4\",\n            Left: \"col-start 1 / span 8\",\n        })};\n    }\n    ${theme(\"useFullHeight\", {\n        true: css`\n            > div {\n                height: 100%;\n            }\n        `,\n    })}\n`;\n\nexport const RightSideCol = styled.div`\n    grid-column: col-start 1 / span 12;\n\n    ${MQ.FROM_M} {\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 5 / span 8\",\n        })};\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: ${theme(\"displayOption\", {\n            Right: \"col-start 6 / span 7\",\n            Left: \"col-start 8 / span 5\",\n        })};\n    }\n    ${MQ.FROM_XL} {\n        grid-column: ${theme(\"displayOption\", {\n            Right: \"col-start 5 / span 8\",\n            Left: \"col-start 9 / span 4\",\n        })};\n    }\n    ${theme(\"useFullHeight\", {\n        true: css`\n            > div {\n                height: 100%;\n            }\n        `,\n    })}\n`;\n","import React, { ReactElement } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport ContentArea from \"components/ContentArea\";\nimport Section from \"components/Section\";\nimport useIsInEditMode from \"hooks/useIsInEditMode\";\nimport { BREAKPOINT_NUMBER } from \"style/breakpoints\";\nimport { addEditAttributes } from \"utils/episerver\";\nimport getComponentTypeForContent from \"utils/getComponentTypeForContent\";\n\nimport {\n    Container,\n    Heading,\n    LeftSideCol,\n    RightSideCol,\n} from \"./SideBySide.styled\";\nimport SideBySideProps from \"./SideBySideProps\";\n\nconst SideBySide = ({\n    heading,\n    sideOneBlocks,\n    sideTwoBlocks,\n    identifier,\n    anchorName,\n    theme = \"lightgray\",\n    displayOption = \"Left\",\n    useFullHeight,\n    actionTheme,\n    contentTheme,\n    contentSizes,\n}: SideBySideProps): ReactElement => {\n    const isInEditMode = useIsInEditMode();\n\n    contentSizes = [\n        {\n            width: 486,\n            breakpoint: BREAKPOINT_NUMBER.XL,\n        },\n        {\n            width: 711,\n        },\n    ];\n\n    return (\n        <ThemeProvider\n            theme={{\n                displayOption: displayOption,\n                useFullHeight: useFullHeight,\n                blockInBlock: true,\n                actionTheme: actionTheme,\n                contentTheme: contentTheme,\n            }}\n        >\n            <Section theme={theme} alignItems=\"center\">\n                <Container key={identifier} id={anchorName}>\n                    {(isInEditMode || heading) && (\n                        <Heading\n                            {...addEditAttributes(\"Heading\")}\n                            dangerouslySetInnerHTML={{ __html: heading || \"\" }}\n                        />\n                    )}\n                    <LeftSideCol>\n                        <ContentArea\n                            items={\n                                displayOption === \"Right\"\n                                    ? sideTwoBlocks\n                                    : sideOneBlocks\n                            }\n                            componentSelector={getComponentTypeForContent}\n                            contentSizes={contentSizes}\n                        />\n                    </LeftSideCol>\n                    <RightSideCol>\n                        <ContentArea\n                            items={\n                                displayOption === \"Right\"\n                                    ? sideOneBlocks\n                                    : sideTwoBlocks\n                            }\n                            componentSelector={getComponentTypeForContent}\n                            contentSizes={contentSizes}\n                        />\n                    </RightSideCol>\n                </Container>\n            </Section>\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(SideBySide);\n"],"names":["Container","styled","GridContainer","withConfig","componentId","columnGap","MQ","FROM_L","Heading","h2","styleHeadingXL","theme","Right","css","FROM_M","FROM_XL","LeftSideCol","div","Left","true","RightSideCol","SideBySide","heading","sideOneBlocks","sideTwoBlocks","identifier","anchorName","displayOption","useFullHeight","actionTheme","contentTheme","contentSizes","isInEditMode","useIsInEditMode","width","breakpoint","BREAKPOINT_NUMBER","XL","_jsx","ThemeProvider","blockInBlock","children","Section","alignItems","_jsxs","id","addEditAttributes","dangerouslySetInnerHTML","__html","ContentArea","items","componentSelector","getComponentTypeForContent","React"],"sourceRoot":""}