{"version":3,"file":"static/js/LightBox.74a2c0d7.js","mappings":"4JAKA,MAAMA,GAAQC,EAAAA,EAAAA,SAAS,CAADC,SAAA,GAAAC,SAAAA,GAAA,eAAAC,OAAAA,CAAAC,GAAA,MAAAC,EAAA,KAAAC,QAAAF,GAAA,gBAAAH,SAAAI,MAAAE,EAAAA,EAAAF,EAAA,EAAAG,YAClBA,IACI,wCAAiDC,YAAAA,CAAAL,GAAA,MAAAC,EAAA,KAAAC,QAAAF,GAAA,YAAAH,SAAAI,IAAA,OAAAG,YAAAJ,GAAAM,MAAAT,IAAA,KAAAA,SAAAI,IAAA,EAAAJ,IAAA,EAAAU,WAAAA,CAAAP,GAAA,MAAAQ,EAAA,KAAAN,QAAAF,GAAA,OAAAS,EAAAD,EAAA,EAAAN,OAAAA,GAAA,gBAEnDQ,EAAeV,IAAoCW,EAAAA,EAAAA,KAAChB,EAAK,IAAKK,IACpE,K,yOCRO,MAAMY,EAAiBC,EAAAA,OAAOC,OAAMC,WAAA,CAAAC,YAAA,gBAAbH,CAAa,uKAW9BI,EAAkBJ,EAAAA,OAAOK,IAAGH,WAAA,CAAAC,YAAA,gBAAVH,CAAU,4PAiB5BM,EAAiBN,EAAAA,OAAOK,IAAGH,WAAA,CAAAC,YAAA,gBAAVH,CAAU,gI,eCgDxC,MA9DiBO,EACbC,MACAC,aACAC,SACAC,iBACAC,gBACAC,OACAC,gBACkB,IAADC,EACjB,MAAMC,GAAWC,EAAAA,EAAAA,MACXC,GAAYC,EAAAA,EAAAA,QAA0B,MACtCC,GAAaD,EAAAA,EAAAA,QAAuB,MACpCE,EAAcX,GACdY,EAAAA,EAAAA,IAAe,CACXC,MAAOb,EACPc,QAASC,EAAAA,GAAiBC,MAC1BC,SAAUf,EACVgB,UAAWjB,EACXkB,OAAQ,aAEZC,EAEAC,EAAeA,KAAO,IAADC,EACvBlB,OAAUgB,GACD,OAATZ,QAAS,IAATA,GAAkB,QAATc,EAATd,EAAWe,eAAO,IAAAD,GAAlBA,EAAoBE,QACpBlB,EAAS,CAAEmB,KAAMC,EAAAA,GAAYC,SAAS,GAAQ,EAGrC,IAADC,EAAR5B,IACS,OAATQ,QAAS,IAATA,GAAkB,QAAToB,EAATpB,EAAWe,eAAO,IAAAK,GAAlBA,EAAoBC,YACpBvB,EAAS,CAAEmB,KAAMC,EAAAA,GAAYC,SAAS,KAK1C,OAFAG,EAAAA,EAAAA,IAAkBpB,EAAYW,IAG1BjC,EAAAA,EAAAA,KAACC,EAAc,CACX0C,IAAKvB,EACLvB,GAAK,kBAAiBc,IACtB,aAAW,OAAMiC,UAEjBC,EAAAA,EAAAA,MAAA,OAAKF,IAAKrB,EAAWsB,SAAA,EACjB5C,EAAAA,EAAAA,KAACM,EAAe,CAAAsC,UACZ5C,EAAAA,EAAAA,KAAC8C,EAAAA,EAAM,CAACC,UAAQ,EAACC,KAAK,UAAUC,QAAShB,EAAaW,SACjC,QADiC3B,EAC7C,OAAJF,QAAI,IAAJA,OAAI,EAAJA,EAAMmC,kBAAU,IAAAjC,EAAAA,EAAI,aAG7BjB,EAAAA,EAAAA,KAACQ,EAAc,CAAAoC,UACX5C,EAAAA,EAAAA,KAAChB,EAAAA,EAAK,CACF2B,WAAa,kBAAiBA,IAC9BD,IAAKA,EACLyC,OAAQ5B,EACR6B,UAAU,EACVC,IAAKzC,EACL0C,UAAU,UAIT,C","sources":["components/Image/ImageLoader.tsx","components/LightBox/LightBox.styled.ts","components/LightBox/LightBox.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 } from \"styled-components\";\n\nexport const StyledLightBox = styled.dialog`\n    border: unset;\n    border-radius: 0.25rem;\n    box-shadow: 0 0 28px 0 rgba(0 0 0 / 25%);\n    padding: 0;\n\n    ::backdrop {\n        background-color: var(--color-white-o90, rgba(255 255 255 / 90%));\n    }\n`;\n\nexport const ButtonContainer = styled.div`\n    align-items: flex-start;\n    align-self: stretch;\n    border-bottom: 1px solid var(--line-on-neutral-default);\n    display: flex;\n    gap: 0.625rem;\n    justify-content: flex-end;\n    padding: 0.875rem;\n\n    button {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        padding: 0.4375rem;\n    }\n`;\n\nexport const ImageContainer = styled.div`\n    gap: 0.625rem;\n    padding: 0.875rem;\n\n    img {\n        height: auto;\n        max-height: calc(100vh - 9.1875rem);\n        max-width: calc(100vw - 5rem);\n        width: auto;\n    }\n`;\n","import React, { useRef } from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport Button from \"components/Button\";\nimport Image from \"components/Image\";\nimport { useOnClickOutside } from \"hooks\";\nimport { SET_FREEZE } from \"store/actionTypes\";\nimport generateSrcSet, { commonSourceSets } from \"style/generateSrcSet\";\n\nimport {\n    ButtonContainer,\n    ImageContainer,\n    StyledLightBox,\n} from \"./LightBox.styled\";\nimport { LightBoxProps } from \"./LightBoxProps\";\n\nconst LightBox = ({\n    alt,\n    identifier,\n    imgUrl,\n    uploadedHeight,\n    uploadedWidth,\n    l18n,\n    setImgUrl,\n}: LightBoxProps) => {\n    const dispatch = useDispatch();\n    const dialogRef = useRef<HTMLDialogElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const imageSrcSet = imgUrl\n        ? generateSrcSet({\n              image: imgUrl,\n              content: commonSourceSets.large,\n              maxWidth: uploadedWidth,\n              maxHeight: uploadedHeight,\n              format: \"jpg\",\n          })\n        : undefined;\n\n    const hideLightBox = () => {\n        setImgUrl(undefined);\n        dialogRef?.current?.close();\n        dispatch({ type: SET_FREEZE, payload: false });\n    };\n\n    if (imgUrl) {\n        dialogRef?.current?.showModal();\n        dispatch({ type: SET_FREEZE, payload: true });\n    }\n\n    useOnClickOutside(contentRef, hideLightBox);\n\n    return (\n        <StyledLightBox\n            ref={dialogRef}\n            id={`lightbox-modal-${identifier}`}\n            aria-modal=\"true\"\n        >\n            <div ref={contentRef}>\n                <ButtonContainer>\n                    <Button iconOnly icon=\"close28\" onClick={hideLightBox}>\n                        {l18n?.closeLabel ?? \"Close\"}\n                    </Button>\n                </ButtonContainer>\n                <ImageContainer>\n                    <Image\n                        identifier={`lightbox-image-${identifier}`}\n                        alt={alt}\n                        srcSet={imageSrcSet}\n                        lightbox={false}\n                        url={imgUrl}\n                        lazyload={false}\n                    />\n                </ImageContainer>\n            </div>\n        </StyledLightBox>\n    );\n};\n\nexport default LightBox;\n"],"names":["Image","loadable","resolved","chunkName","isReady","props","key","resolve","__webpack_modules__","importAsync","requireAsync","then","requireSync","id","__webpack_require__","ImageLoader","_jsx","StyledLightBox","styled","dialog","withConfig","componentId","ButtonContainer","div","ImageContainer","LightBox","alt","identifier","imgUrl","uploadedHeight","uploadedWidth","l18n","setImgUrl","_l18n$closeLabel","dispatch","useDispatch","dialogRef","useRef","contentRef","imageSrcSet","generateSrcSet","image","content","commonSourceSets","large","maxWidth","maxHeight","format","undefined","hideLightBox","_dialogRef$current","current","close","type","SET_FREEZE","payload","_dialogRef$current2","showModal","useOnClickOutside","ref","children","_jsxs","Button","iconOnly","icon","onClick","closeLabel","srcSet","lightbox","url","lazyload"],"sourceRoot":""}