{"version":3,"file":"static/js/SideBySideFullBleed.2b8fc436.js","mappings":"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","sources":["components/Image/ImageLoader.tsx","components/SideBySideFullBleed/SideBySideFullBleed.styled.ts","components/SideBySideFullBleed/SideBySideFullBleed.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 Section from \"components/Section\";\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { columnGap, GUTTER } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\n\nconst backgroundColor = theme(\"theme\", {\n    undefined: \"--color-transparent\",\n    default: \"--background-default\",\n    lightgray: \"--background-default\",\n    blue: \"--block-blue-default\",\n    cyan: \"--block-cyan-default\",\n    coral: \"--block-coral-default\",\n});\n\nexport const StyledSection = styled(Section)`\n    --image-width: calc(50vw - (0.5 * var(--grid-column-gutter)));\n\n    align-items: center;\n    position: relative;\n\n    ${MQ.FROM_L} {\n        --image-width: calc(\n            50vw - var(--grid-column-size) - (1.5 * var(--grid-column-gutter)) -\n                (0.5 * 17px) - var(--grid-column-gutter) - var(\n                    --grid-column-size\n                )\n        );\n    }\n`;\n\nexport const Container = styled(GridContainer)`\n    ${columnGap}\n    display: grid;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n\n    ${MQ.FROM_L} {\n        grid-template-columns: repeat(12, [col-start] 1fr);\n    }\n\n    ${theme(\"isInEditMode\", {\n        true: css`\n            min-height: auto;\n\n            ${MQ.FROM_L} {\n                min-height: auto;\n            }\n        `,\n    })}\n`;\n\nexport const BlocksWrapper = styled.div`\n    background-color: var(${backgroundColor});\n    grid-column: col-start 1 / span 4;\n    grid-row: 1;\n\n    ${MQ.FROM_L} {\n        grid-column: col-start 1 / span 8;\n\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 5 / span 8;\n            `,\n        })}\n    }\n`;\n\nexport const ImageWrapper = styled.div`\n    aspect-ratio: 1;\n    display: block;\n    grid-column: col-start 1 / span 4;\n    margin: 0 -${GUTTER.SM} -3.5rem;\n    position: relative;\n\n    ${MQ.FROM_M} {\n        margin: 0 -${GUTTER.MD} -6.125rem;\n    }\n\n    ${MQ.FROM_L} {\n        aspect-ratio: unset;\n        bottom: 0;\n        grid-row: 1 / span 3;\n        margin: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        width: var(--image-width);\n\n        ${theme(\"displayOption\", {\n            Right: css`\n                left: 0;\n                right: auto;\n            `,\n        })}\n    }\n`;\n","import React, { ReactElement } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport ContentArea from \"components/ContentArea\";\nimport Image from \"components/Image\";\nimport useIsInEditMode from \"hooks/useIsInEditMode\";\nimport { BREAKPOINT_NUMBER } from \"style/breakpoints\";\nimport generateSrcSet from \"style/generateSrcSet\";\nimport getComponentTypeForContent from \"utils/getComponentTypeForContent\";\n\nimport {\n    BlocksWrapper,\n    Container,\n    ImageWrapper,\n    StyledSection,\n} from \"./SideBySideFullBleed.styled\";\nimport SideBySideFullBleedProps from \"./SideBySideFullBleedProps\";\n\nconst SideBySideFullBleed = ({\n    identifier,\n    displayOption = \"Left\",\n    theme = \"lightgray\",\n    contentTheme = \"black\",\n    image,\n    blocks,\n    anchorName,\n}: SideBySideFullBleedProps): ReactElement => {\n    const isInEditMode = useIsInEditMode();\n    const headingRight = displayOption === \"Right\";\n\n    if (image && image.url) {\n        image.srcSet = generateSrcSet({\n            image: image.url,\n            focalPoint: image.focalPoint,\n            maxWidth: image.uploadedWidth,\n            maxHeight: image.uploadedHeight,\n            format: \"jpg\",\n            content: [\n                {\n                    width: 2560,\n                    breakpoint: BREAKPOINT_NUMBER.XXXL,\n                },\n                {\n                    width: 1920,\n                    breakpoint: BREAKPOINT_NUMBER.XXL,\n                },\n                {\n                    width: 1680,\n                    breakpoint: BREAKPOINT_NUMBER.XL,\n                },\n                {\n                    width: 1365,\n                    breakpoint: BREAKPOINT_NUMBER.L,\n                },\n                {\n                    width: 992,\n                    breakpoint: BREAKPOINT_NUMBER.M,\n                },\n                {\n                    width: 768,\n                    height: 768,\n                },\n            ],\n        });\n    }\n\n    return (\n        <StyledSection colorTheme={theme} id={anchorName}>\n            <ThemeProvider\n                theme={{\n                    theme: theme,\n                    contentTheme: contentTheme,\n                    displayOption: displayOption,\n                    headingRight: headingRight,\n                    hasImage: !!(image && image.url),\n                    blockInBlock: true,\n                    isInEditMode: isInEditMode,\n                }}\n            >\n                <Container key={identifier || `SideBySideFullBleedContent`}>\n                    {image?.url && (\n                        <ImageWrapper>\n                            <Image {...image} caption=\"\" cover={true} />\n                        </ImageWrapper>\n                    )}\n                    {blocks && (\n                        <BlocksWrapper>\n                            <ContentArea\n                                items={blocks}\n                                componentSelector={getComponentTypeForContent}\n                            />\n                        </BlocksWrapper>\n                    )}\n                </Container>\n            </ThemeProvider>\n        </StyledSection>\n    );\n};\n\nexport default React.memo(SideBySideFullBleed);\n"],"names":["Image","loadable","resolved","chunkName","isReady","props","key","resolve","__webpack_modules__","importAsync","requireAsync","then","requireSync","id","__webpack_require__","ImageLoader","_jsx","backgroundColor","theme","undefined","default","lightgray","blue","cyan","coral","StyledSection","styled","Section","withConfig","componentId","MQ","FROM_L","Container","GridContainer","columnGap","true","css","BlocksWrapper","div","Right","ImageWrapper","GUTTER","SM","FROM_M","MD","SideBySideFullBleed","identifier","displayOption","contentTheme","image","blocks","anchorName","isInEditMode","useIsInEditMode","headingRight","url","srcSet","generateSrcSet","focalPoint","maxWidth","uploadedWidth","maxHeight","uploadedHeight","format","content","width","breakpoint","BREAKPOINT_NUMBER","XXXL","XXL","XL","L","M","height","colorTheme","children","ThemeProvider","hasImage","blockInBlock","_jsxs","caption","cover","ContentArea","items","componentSelector","getComponentTypeForContent","React"],"sourceRoot":""}