{"version":3,"file":"static/js/FormSection.de5ed34d.js","mappings":"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","sources":["components/FormSection/FormSection.styled.ts","components/FormSection/FormSection.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Form from \"components/Form\";\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { styleBodyL, styleHeadingXL } from \"style/components/Typography\";\nimport { GUTTER } from \"style/grid\";\nimport { topPadOffset } from \"style/headerOffsets\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const Container = styled(GridContainer)`\n    position: relative;\n\n    ${MQ.FROM_M} {\n        column-gap: ${GUTTER.XL};\n        display: grid;\n        grid-auto-rows: auto;\n        grid-template-areas: \"text form\";\n        grid-template-columns: repeat(12, [col-start] 1fr);\n    }\n`;\n\nexport const MultiStepWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const MultiStepContent = styled(GridContainer)`\n    padding-bottom: 0;\n    position: relative;\n`;\n\nexport const Content = styled.div.attrs<{\n    $headerVisible: boolean;\n}>(() => ({}))`\n    ${MQ.FROM_M} {\n        align-self: flex-start;\n        grid-area: text;\n        grid-column: ${theme(\"displayOption\", {\n            Left: \"col-start 1 / span 6\",\n            Right: \"col-start 7 / span 6\",\n        })};\n        position: sticky;\n        text-align: ${theme(\"displayOption\", {\n            Left: \"left\",\n            Right: \"right\",\n        })};\n        top: 4.375rem;\n        ${topPadOffset};\n    }\n`;\n\nexport const Heading = styled.h2`\n    ${styleHeadingXL};\n    margin-bottom: 1.75rem;\n    margin-top: 0;\n`;\n\nexport const Introduction = styled.div`\n    ${styleBodyL};\n    margin-top: 0;\n`;\n\nexport const StyledForm = styled(Form)`\n    justify-content: flex-start;\n    ${theme(\"isMultiStepForm\", {\n        false: css`\n            ${MQ.FROM_M} {\n                grid-area: form;\n                grid-column: ${theme(\"displayOption\", {\n                    Left: \"col-start 7 / span 6\",\n                    Right: \"col-start 1 / span 6\",\n                })};\n            }\n\n            ${MQ.FROM_XL} {\n                grid-column: ${theme(\"displayOption\", {\n                    Left: \"col-start 7 / span 5\",\n                    Right: \"col-start 2 / span 5\",\n                })};\n            }\n        `,\n    })}\n`;\n","import React, { ReactElement } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport Section from \"components/Section\";\nimport { useHeader, useIsInEditMode, usePageContent } from \"hooks\";\nimport { addEditAttributes } from \"utils/episerver\";\n\nimport {\n    Container,\n    Content,\n    Heading,\n    Introduction,\n    StyledForm,\n    MultiStepContent,\n    MultiStepWrapper,\n} from \"./FormSection.styled\";\nimport FormSectionProps from \"./FormSectionProps\";\n\nconst FormSection = ({\n    formId,\n    identifier,\n    theme = \"lightgray\",\n    contentTheme = \"black\",\n    actionTheme = \"cyan\",\n    heading,\n    introduction,\n    displayOption = \"Left\",\n    formElements,\n    gtmFormType,\n    postUrl,\n    spamTrapUrl,\n    anchorName,\n    l18n,\n    size,\n    formActors,\n}: FormSectionProps): ReactElement => {\n    const isInEditMode = useIsInEditMode();\n    const headerState = useHeader();\n    const pageContent = usePageContent();\n\n    const formGuide = pageContent.component === \"FormGuidePage\";\n\n    const isMultiStepForm =\n        formElements &&\n        formElements.some(\n            (item) =>\n                item.component === \"FormStepBlock\" ||\n                item.component === \"FormResultStepBlock\" ||\n                item.component === \"FormSummaryStepBlock\",\n        );\n\n    // This is a fallback for the LightGrayBlackBlack theme issue with non existing buttons in color black\n    if (\n        theme === \"lightgray\" &&\n        contentTheme === \"black\" &&\n        actionTheme === \"black\"\n    )\n        actionTheme = \"cyan\";\n\n    return (\n        <Section theme={theme} id={anchorName} alignItems=\"center\">\n            <ThemeProvider\n                theme={{\n                    theme: theme,\n                    contentTheme: contentTheme,\n                    displayOption: displayOption,\n                    isMultiStepForm: isMultiStepForm,\n                    formGuide: formGuide || false,\n                }}\n            >\n                {isMultiStepForm ? (\n                    <MultiStepWrapper key={identifier || `FormSectionContent`}>\n                        {formGuide ? (\n                            <Container>\n                                {(isInEditMode || formElements) && (\n                                    <StyledForm\n                                        id={formId}\n                                        items={formElements || []}\n                                        areaName=\"FormElements\"\n                                        action={postUrl}\n                                        identifier={identifier}\n                                        l18n={l18n}\n                                        size={size}\n                                        actionTheme={actionTheme}\n                                        gtmFormType={gtmFormType}\n                                        formGuide={formGuide}\n                                        formGuideHeading={heading}\n                                        formGuideIntroduction={introduction}\n                                    />\n                                )}\n                            </Container>\n                        ) : (\n                            <>\n                                <MultiStepContent>\n                                    {(isInEditMode || heading) && (\n                                        <Heading\n                                            as=\"h2\"\n                                            {...addEditAttributes(\"Title\")}\n                                            dangerouslySetInnerHTML={{\n                                                __html: heading || \"\",\n                                            }}\n                                        />\n                                    )}\n                                    {(isInEditMode || introduction) && (\n                                        <Introduction\n                                            {...addEditAttributes(\n                                                \"Description\",\n                                            )}\n                                        >\n                                            {introduction}\n                                        </Introduction>\n                                    )}\n                                </MultiStepContent>\n                                {(isInEditMode || formElements) && (\n                                    <StyledForm\n                                        id={formId}\n                                        items={formElements || []}\n                                        areaName=\"FormElements\"\n                                        action={postUrl}\n                                        identifier={identifier}\n                                        l18n={l18n}\n                                        size={size}\n                                        actionTheme={actionTheme}\n                                        gtmFormType={gtmFormType}\n                                        formActors={formActors}\n                                    />\n                                )}\n                            </>\n                        )}\n                    </MultiStepWrapper>\n                ) : (\n                    <Container key={identifier || `FormSectionContent`}>\n                        <Content $headerVisible={headerState.visible}>\n                            {(isInEditMode || heading) && (\n                                <Heading\n                                    as=\"h2\"\n                                    {...addEditAttributes(\"Title\")}\n                                    dangerouslySetInnerHTML={{\n                                        __html: heading || \"\",\n                                    }}\n                                />\n                            )}\n                            {(isInEditMode || introduction) && (\n                                <Introduction\n                                    {...addEditAttributes(\"Description\")}\n                                >\n                                    {introduction}\n                                </Introduction>\n                            )}\n                        </Content>\n                        {(isInEditMode || formElements) && (\n                            <StyledForm\n                                id={formId}\n                                items={formElements || []}\n                                areaName=\"FormElements\"\n                                action={postUrl}\n                                spamTrapAction={spamTrapUrl}\n                                identifier={identifier}\n                                actionTheme={actionTheme}\n                                gtmFormType={gtmFormType}\n                                l18n={l18n}\n                                size={size}\n                                formActors={formActors}\n                            />\n                        )}\n                    </Container>\n                )}\n            </ThemeProvider>\n        </Section>\n    );\n};\n\nexport default React.memo(FormSection);\n"],"names":["Container","styled","GridContainer","withConfig","componentId","MQ","FROM_M","GUTTER","XL","MultiStepWrapper","div","MultiStepContent","Content","attrs","theme","Left","Right","topPadOffset","Heading","h2","styleHeadingXL","Introduction","styleBodyL","StyledForm","Form","false","css","FROM_XL","FormSection","formId","identifier","contentTheme","actionTheme","heading","introduction","displayOption","formElements","gtmFormType","postUrl","spamTrapUrl","anchorName","l18n","size","formActors","isInEditMode","useIsInEditMode","headerState","useHeader","formGuide","usePageContent","component","isMultiStepForm","some","item","_jsx","Section","id","alignItems","children","ThemeProvider","items","areaName","action","formGuideHeading","formGuideIntroduction","_jsxs","_Fragment","as","addEditAttributes","dangerouslySetInnerHTML","__html","$headerVisible","visible","spamTrapAction","React"],"sourceRoot":""}