{"version":3,"file":"static/js/BusinessAreaLogo.570a55bf.js","mappings":"mPAMO,MAAMA,GAAYC,EAAAA,EAAAA,QAAOC,EAAAA,IAAcC,WAAA,CAAAC,YAAA,eAArBH,CAAqB,uDAMjCI,EAAOJ,EAAAA,OAAOK,IAAGH,WAAA,CAAAC,YAAA,eAAVH,CAAU,gNAOxBM,EAAAA,GAAGC,OAKHD,EAAAA,GAAGE,OAKHF,EAAAA,GAAGG,QAKHC,IAAM,SAAU,CACdC,UAAUC,EAAAA,EAAAA,KAAG,oKAIPN,EAAAA,GAAGC,OAKHD,EAAAA,GAAGE,OAKHF,EAAAA,GAAGG,SAKTI,QAAQD,EAAAA,EAAAA,KAAG,sKAILN,EAAAA,GAAGC,OAKHD,EAAAA,GAAGE,OAKHF,EAAAA,GAAGG,Y,eC5DjB,MAAMK,EAAmBA,EACrBC,aACAC,aACAC,WAEA,MAAOC,EAAYC,IAAiBC,EAAAA,EAAAA,UAAS,CAAEC,MAAO,EAAGC,OAAQ,KAa3D,MAAED,EAAK,OAAEC,GAAWJ,EAe1B,OACIK,EAAAA,EAAAA,KAACC,EAAAA,EAAO,CACJd,MAAM,YACNe,WAAW,SAEXC,GAAIV,EACJW,iBAAiB,OAAMC,UAEvBL,EAAAA,EAAAA,KAACM,EAAAA,cAAa,CAACnB,MAAO,CAAEoB,OArBdC,MACd,GAAKV,GAAUC,EAGf,OAAID,EAAQC,EACD,YAEPD,EAAQC,EACD,WAEJ,QAAQ,EAWqBS,IAAcH,UAC1CL,EAAAA,EAAAA,KAACxB,EAAS,CAEN2B,GAAIX,EAAWa,SAEdX,IACGM,EAAAA,EAAAA,KAACnB,EAAI,CACD4B,OAxCpBC,IAEA,MAAM5B,EAAM4B,EAAMC,OAElBf,EAAc,CACVG,OAAQjB,EAAI8B,cACZd,MAAOhB,EAAI+B,cACb,EAkCkBC,IAAKpB,EAAKqB,IACVC,IAAKtB,EAAKsB,OAPbxB,GAAe,8BANvBA,EAkBC,EAIlB,MAAeyB,EAAAA,KAAW1B,E","sources":["components/BusinessAreaLogo/BusinessAreaLogo.styled.ts","components/BusinessAreaLogo/BusinessAreaLogo.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const Container = styled(GridContainer)`\n    padding-bottom: 0;\n    padding-top: 0;\n    text-align: center;\n`;\n\nexport const Logo = styled.img`\n    height: auto;\n    margin: 3.5rem 0;\n    max-height: 3.5rem;\n    max-width: 100%;\n    width: auto;\n\n    ${MQ.FROM_M} {\n        margin: 4.375rem 0;\n        max-height: 4.375rem;\n    }\n\n    ${MQ.FROM_L} {\n        margin: 5.25rem 0;\n        max-height: 5.25rem;\n    }\n\n    ${MQ.FROM_XL} {\n        margin: 6.5625rem 0;\n        max-height: 6.125rem;\n    }\n\n    ${theme(\"format\", {\n        portrait: css`\n            margin: 1.75rem 0;\n            max-height: 7rem;\n\n            ${MQ.FROM_M} {\n                margin: 2.1875rem 0;\n                max-height: 8.75rem;\n            }\n\n            ${MQ.FROM_L} {\n                margin: 2.625rem 0;\n                max-height: 10.5rem;\n            }\n\n            ${MQ.FROM_XL} {\n                margin: 3.5rem 0;\n                max-height: 12.25rem;\n            }\n        `,\n        square: css`\n            margin: 2.1875rem 0;\n            max-height: 4.375rem;\n\n            ${MQ.FROM_M} {\n                margin: 2.625rem 0;\n                max-height: 6.125rem;\n            }\n\n            ${MQ.FROM_L} {\n                margin: 3.5rem 0;\n                max-height: 7rem;\n            }\n\n            ${MQ.FROM_XL} {\n                margin: 4.375rem 0;\n                max-height: 8.75rem;\n            }\n        `,\n    })}\n`;\n","import React, { ReactElement, useState } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport Section from \"components/Section\";\n\nimport { Logo, Container } from \"./BusinessAreaLogo.styled\";\nimport BusinessAreaLogoProps from \"./BusinessAreaLogoProps\";\n\nconst BusinessAreaLogo = ({\n    identifier,\n    anchorName,\n    logo,\n}: BusinessAreaLogoProps): ReactElement => {\n    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n    const onLogoLoad = (\n        event: React.SyntheticEvent<HTMLImageElement, Event>,\n    ) => {\n        const img = event.target as HTMLImageElement;\n\n        setDimensions({\n            height: img.naturalHeight,\n            width: img.naturalWidth,\n        });\n    };\n\n    const { width, height } = dimensions;\n\n    const getFormat = (): string | undefined => {\n        if (!width || !height) {\n            return undefined;\n        }\n        if (width > height) {\n            return \"landscape\";\n        }\n        if (width < height) {\n            return \"portrait\";\n        }\n        return \"square\";\n    };\n\n    return (\n        <Section\n            theme=\"lightgray\"\n            alignItems=\"center\"\n            key={identifier}\n            id={anchorName}\n            editPropertyName=\"Logo\"\n        >\n            <ThemeProvider theme={{ format: getFormat() }}>\n                <Container\n                    key={identifier || `BusinessAreaLogoContent`}\n                    id={identifier}\n                >\n                    {logo && (\n                        <Logo\n                            onLoad={onLogoLoad}\n                            src={logo.url}\n                            alt={logo.alt}\n                        />\n                    )}\n                </Container>\n            </ThemeProvider>\n        </Section>\n    );\n};\n\nexport default React.memo(BusinessAreaLogo);\n"],"names":["Container","styled","GridContainer","withConfig","componentId","Logo","img","MQ","FROM_M","FROM_L","FROM_XL","theme","portrait","css","square","BusinessAreaLogo","identifier","anchorName","logo","dimensions","setDimensions","useState","width","height","_jsx","Section","alignItems","id","editPropertyName","children","ThemeProvider","format","getFormat","onLoad","event","target","naturalHeight","naturalWidth","src","url","alt","React"],"sourceRoot":""}