{"version":3,"file":"static/js/ImageSection.e7865410.js","mappings":"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","sources":["components/Image/ImageLoader.tsx","components/ImageSection/ImageSection.styled.ts","components/ImageSection/ImageSection.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 { default as DefaultImage } from \"components/Image\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const Image = styled(DefaultImage).attrs<{\n    $centerPosition?: [number, number] | undefined;\n}>(() => ({}))`\n    &.embedded {\n        margin-right: auto;\n        width: auto;\n    }\n\n    &:not(.embedded) {\n        aspect-ratio: 2/3;\n        background-color: var(--color-blue-d10);\n        height: auto;\n        max-height: 50vh;\n        width: 100%;\n\n        ${theme(\"blockInBlock\", {\n            true: css`\n                aspect-ratio: unset;\n                margin-bottom: 2.1875rem;\n                max-height: unset;\n                min-height: unset;\n            `,\n        })}\n\n        ${MQ.FROM_M} {\n            ${theme(\"blockInBlock\", {\n                true: css`\n                    margin-bottom: 3.5rem;\n                `,\n            })}\n        }\n\n        ${MQ.FROM_L} {\n            aspect-ratio: unset;\n            height: 75vh;\n            max-height: 75vh;\n            ${theme(\"isInEditMode\", {\n                true: css`\n                    height: auto;\n                    min-height: 31.25rem;\n                `,\n            })}\n            ${theme(\"blockInBlock\", {\n                true: css`\n                    height: auto;\n                    margin-bottom: 3.5rem;\n                `,\n            })}\n        }\n\n        ${MQ.FROM_XL} {\n            ${theme(\"blockInBlock\", {\n                true: css`\n                    margin-bottom: 4.375rem;\n                `,\n            })}\n        }\n\n        img {\n            height: 100%;\n            object-fit: cover;\n            width: 100%;\n            ${(props) =>\n                props.$centerPosition &&\n                props.$centerPosition.length == 2 &&\n                props.$centerPosition[0] > 0 &&\n                props.$centerPosition[1] > 0 &&\n                css`\n                    object-position: ${props.$centerPosition[0]}%\n                        ${props.$centerPosition[1]}%;\n                `}\n        }\n    }\n`;\n","// Processing commands for ImageSections: https://docs.sixlabors.com/articles/ImageSectionsharp.web/processingcommands.html\n\nimport React, { ReactElement } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport { useIsInEditMode } from \"hooks\";\nimport { BREAKPOINT_NUMBER } from \"style/breakpoints\";\nimport generateSrcSet, {\n    commonSourceSets,\n    noCropLargeSourceSet,\n} from \"style/generateSrcSet\";\n\nimport { Image } from \"./ImageSection.styled\";\nimport ImageSectionProps from \"./ImageSectionProps\";\n\nconst ImageSection = (props: ImageSectionProps): ReactElement => {\n    const isInEditMode = useIsInEditMode();\n    const image = { ...props };\n\n    const centerPosition = image.focalPoint\n        ? (image.focalPoint.split(\"|\").map((num) => Number(num) * 100) as [\n              number,\n              number,\n          ])\n        : undefined;\n\n    if (image.url && !image.srcSet) {\n        if (image.className?.includes(\"embedded\")) {\n            // If the image is embedded and has a certain size we need to generate a srcSet and set fixed image size\n            if (\n                (image.width && image.width > 0) ||\n                (image.height && image.height > 0)\n            ) {\n                image.maxWidth = image.width;\n                image.srcSet = generateSrcSet({\n                    image: image.url,\n                    content: [\n                        {\n                            width: image.width,\n                            height: image.height,\n                        },\n                    ],\n                    maxWidth: image.uploadedWidth,\n                    maxHeight: image.uploadedHeight,\n                });\n            } else {\n                image.srcSet = generateSrcSet({\n                    image: image.url,\n                    focalPoint: image.focalPoint,\n                    content: [\n                        {\n                            width: 900,\n                            breakpoint: BREAKPOINT_NUMBER.L,\n                        },\n                        {\n                            width: 768,\n                        },\n                    ],\n                    maxWidth: image.uploadedWidth,\n                    maxHeight: image.uploadedHeight,\n                });\n            }\n        } else if (image.contentSizes) {\n            image.srcSet = generateSrcSet({\n                image: image.url,\n                focalPoint: image.focalPoint,\n                content: image.contentSizes,\n                maxWidth: image.uploadedWidth,\n                maxHeight: image.uploadedHeight,\n            });\n        } else {\n            image.srcSet = generateSrcSet({\n                image: image.url,\n                focalPoint: image.focalPoint,\n                content: image.keepAspectRatio\n                    ? noCropLargeSourceSet\n                    : commonSourceSets.large,\n                maxWidth: image.uploadedWidth,\n                maxHeight: image.uploadedHeight,\n            });\n        }\n    }\n    return (\n        <ThemeProvider\n            theme={{\n                isInEditMode: isInEditMode,\n            }}\n        >\n            <Image $centerPosition={centerPosition} {...image} />\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(ImageSection);\n"],"names":["Image","loadable","resolved","chunkName","isReady","props","key","resolve","__webpack_modules__","importAsync","requireAsync","then","requireSync","id","__webpack_require__","ImageLoader","_jsx","styled","DefaultImage","attrs","withConfig","componentId","theme","true","css","MQ","FROM_M","FROM_L","FROM_XL","$centerPosition","length","ImageSection","isInEditMode","useIsInEditMode","image","centerPosition","focalPoint","split","map","num","Number","undefined","_image$className","url","srcSet","className","includes","width","height","maxWidth","generateSrcSet","content","uploadedWidth","maxHeight","uploadedHeight","breakpoint","BREAKPOINT_NUMBER","L","contentSizes","keepAspectRatio","noCropLargeSourceSet","commonSourceSets","large","ThemeProvider","children","React"],"sourceRoot":""}