{"version":3,"file":"static/js/NewsletterSignup.f8b8f284.js","mappings":"6VAUO,MAAMA,GAAYC,EAAAA,EAAAA,QAAOC,EAAAA,IAAcC,WAAA,CAAAC,YAAA,gBAArBH,CAAqB,gKACxCI,EAAAA,GASAC,EAAAA,GAAGC,QAKIC,EAAUP,EAAAA,OAAOQ,GAAGC,OAE9B,MAAS,KAAEP,WAAA,CAAAC,YAAA,gBAFSH,CAET,yRACRU,EAAAA,GAEaC,IAAM,gBAAiB,CAClCC,KAAM,uBACNC,MAAO,yBAIGF,IAAM,gBAAiB,CACjCC,KAAM,OACNC,MAAO,UAGTR,EAAAA,GAAGC,OACcK,IAAM,gBAAiB,CAClCC,KAAM,uBACNC,MAAO,yBAKbR,EAAAA,GAAGS,OAEcH,IAAM,gBAAiB,CAClCC,KAAM,uBACNC,MAAO,yBAKTE,EAAAA,GAIJV,EAAAA,GAAGW,QAECD,EAAAA,IAIGE,EAAMjB,EAAAA,OAAOkB,IAAGhB,WAAA,CAAAC,YAAA,gBAAVH,CAAU,+JAKvBK,EAAAA,GAAGC,OACcK,IAAM,gBAAiB,CAClCC,KAAM,uBACNC,MAAO,yBAIbR,EAAAA,GAAGS,OACcH,IAAM,gBAAiB,CAClCC,KAAM,uBACNC,MAAO,yBAMbR,EAAAA,GAAGW,SAKIG,GAAenB,EAAAA,EAAAA,QAAOoB,EAAAA,IAAMlB,WAAA,CAAAC,YAAA,gBAAbH,CAAa,mEAInCK,EAAAA,GAAGC,QAKIe,GAAarB,EAAAA,EAAAA,QAAOsB,EAAAA,GAAKpB,WAAA,CAAAC,YAAA,gBAAZH,CAAY,iD,qGCxFtC,MAAMuB,EAAmBA,EACrBC,aACAC,aACAd,QAAQ,YACRe,eAAe,QACfC,cAAc,OACdC,gBAAgB,QAChBC,WAEA,MAAMC,GAAcC,EAAAA,EAAAA,MACpB,OACIC,EAAAA,EAAAA,KAACC,EAAAA,EAAO,CACJtB,MAAOA,EAEPuB,GAAIT,EACJU,WAAW,SACXC,iBAAiB,WAAUC,UAE3BL,EAAAA,EAAAA,KAACM,EAAAA,cAAa,CACV3B,MAAO,CACHA,MAAOA,EACPe,aAAcA,EACdC,YAAaA,EACbC,cAAeA,GACjBS,UAEFE,EAAAA,EAAAA,MAACxC,EAAAA,GAAS,CAAAsC,SAAA,EACD,OAAJR,QAAI,IAAJA,OAAI,EAAJA,EAAMW,WACHR,EAAAA,EAAAA,KAACzB,EAAAA,GAAO,CACJkC,eAAgBX,EAAYY,QAC5BC,wBAAyB,CACrBC,OAAQf,EAAKW,YAIpB,OAAJX,QAAI,IAAJA,OAAI,EAAJA,EAAMgB,gBACHN,EAAAA,EAAAA,MAACtB,EAAAA,GAAG,CAAAoB,SAAA,EACK,OAAJR,QAAI,IAAJA,OAAI,EAAJA,EAAMiB,gBACHd,EAAAA,EAAAA,KAACb,EAAAA,GAAY,CAAAkB,SAAER,EAAKiB,gBAExBd,EAAAA,EAAAA,KAACX,EAAAA,GAAU,CACPa,GAAIL,EAAKkB,OACTC,MAAOnB,EAAKgB,aACZI,OAAQpB,EAAKqB,QACbC,eAAgBtB,EAAKuB,YACrB5B,WAAYK,EAAKL,WACjB6B,KAAMxB,EAAKwB,KACX1C,MAAOA,EACPgB,YAAaA,EACb2B,oBAAoB,qBACpBC,sBAAsB,oBACtBC,YAAY,oBAzBZhC,GAAe,yBAb9BA,EA4CC,EAIlB,UAAeiC,EAAAA,KAAWlC,E","sources":["components/NewsletterSignup/NewsletterSignup.styled.ts","components/NewsletterSignup/NewsletterSignup.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Form from \"components/Form\";\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { BodyL, styleHeadingXL } from \"style/components/Typography\";\nimport { columnGap } from \"style/grid\";\nimport { topPadOffset } from \"style/headerOffsets\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const Container = styled(GridContainer)<ContainerProps>`\n    ${columnGap}\n    display: grid;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    position: relative;\n\n    figure {\n        z-index: 1;\n    }\n\n    ${MQ.FROM_M} {\n        grid-template-columns: repeat(12, [col-start] 1fr);\n    }\n`;\n\nexport const Heading = styled.h2.attrs<{\n    $headerVisible: boolean;\n}>(() => ({}))`\n    ${styleHeadingXL};\n    align-self: flex-start;\n    grid-column: ${theme(\"displayOption\", {\n        Left: \"col-start 1 / span 3\",\n        Right: \"col-start 2 / span 3\",\n    })};\n    margin-bottom: 2.625rem;\n    margin-top: 0;\n    text-align: ${theme(\"displayOption\", {\n        Left: \"left\",\n        Right: \"right\",\n    })};\n\n    ${MQ.FROM_M} {\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 1 / span 8\",\n            Right: \"col-start 5 / span 8\",\n        })};\n        margin-bottom: 3.5rem;\n    }\n\n    ${MQ.FROM_L} {\n        display: block;\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 1 / span 6\",\n            Right: \"col-start 7 / span 6\",\n        })};\n        margin-bottom: 1.75rem;\n        position: sticky;\n        top: 3.5rem;\n        ${topPadOffset}\n        transition: top 0.2s ease-in-out;\n    }\n\n    ${MQ.FROM_XL} {\n        top: 4.375rem;\n        ${topPadOffset}\n    }\n`;\n\nexport const Col = styled.div`\n    grid-column: col-start 1 / span 4;\n    grid-row: 2;\n    z-index: 2;\n\n    ${MQ.FROM_M} {\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 5 / span 8\",\n            Right: \"col-start 1 / span 8\",\n        })};\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 7 / span 5\",\n            Right: \"col-start 2 / span 5\",\n        })};\n        grid-row: 1;\n        padding-top: 3.9375rem;\n    }\n\n    ${MQ.FROM_XL} {\n        padding-top: 5.25rem;\n    }\n`;\n\nexport const Introduction = styled(BodyL)`\n    margin-bottom: 2.1875rem;\n    z-index: 2;\n\n    ${MQ.FROM_M} {\n        margin-bottom: 4.375rem;\n    }\n`;\n\nexport const StyledForm = styled(Form)`\n    justify-content: flex-start;\n\n    && {\n        margin-top: 0;\n    }\n`;\n\ninterface ContainerProps {\n    readonly hasImage?: boolean;\n}\n","import React, { ReactElement } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport Section from \"components/Section\";\nimport { useHeader } from \"hooks\";\n\nimport {\n    Heading,\n    Introduction,\n    Container,\n    Col,\n    StyledForm,\n} from \"./NewsletterSignup.styled\";\nimport NewsletterSignupProps from \"./NewsletterSignupProps\";\n\nconst NewsletterSignup = ({\n    identifier,\n    anchorName,\n    theme = \"lightgray\",\n    contentTheme = \"black\",\n    actionTheme = \"cyan\",\n    displayOption = \"Right\",\n    form,\n}: NewsletterSignupProps): ReactElement => {\n    const headerState = useHeader();\n    return (\n        <Section\n            theme={theme}\n            key={identifier}\n            id={anchorName}\n            alignItems=\"center\"\n            editPropertyName=\"FormLink\"\n        >\n            <ThemeProvider\n                theme={{\n                    theme: theme,\n                    contentTheme: contentTheme,\n                    actionTheme: actionTheme,\n                    displayOption: displayOption,\n                }}\n            >\n                <Container key={identifier || `FormSectionContent`}>\n                    {form?.heading && (\n                        <Heading\n                            $headerVisible={headerState.visible}\n                            dangerouslySetInnerHTML={{\n                                __html: form.heading,\n                            }}\n                        />\n                    )}\n                    {form?.formElements && (\n                        <Col>\n                            {form?.introduction && (\n                                <Introduction>{form.introduction}</Introduction>\n                            )}\n                            <StyledForm\n                                id={form.formId}\n                                items={form.formElements}\n                                action={form.postUrl}\n                                spamTrapAction={form.spamTrapUrl}\n                                identifier={form.identifier}\n                                size={form.size}\n                                theme={theme}\n                                actionTheme={actionTheme}\n                                gtmFormStartedEvent=\"newsletter_started\"\n                                gtmFormSubmittedEvent=\"newsletter_signup\"\n                                gtmFormType=\"newsletter\"\n                            />\n                        </Col>\n                    )}\n                </Container>\n            </ThemeProvider>\n        </Section>\n    );\n};\n\nexport default React.memo(NewsletterSignup);\n"],"names":["Container","styled","GridContainer","withConfig","componentId","columnGap","MQ","FROM_M","Heading","h2","attrs","styleHeadingXL","theme","Left","Right","FROM_L","topPadOffset","FROM_XL","Col","div","Introduction","BodyL","StyledForm","Form","NewsletterSignup","identifier","anchorName","contentTheme","actionTheme","displayOption","form","headerState","useHeader","_jsx","Section","id","alignItems","editPropertyName","children","ThemeProvider","_jsxs","heading","$headerVisible","visible","dangerouslySetInnerHTML","__html","formElements","introduction","formId","items","action","postUrl","spamTrapAction","spamTrapUrl","size","gtmFormStartedEvent","gtmFormSubmittedEvent","gtmFormType","React"],"sourceRoot":""}