{"version":3,"file":"static/js/FormStep.6bf47704.js","mappings":"yUAeA,MAAMA,EAAcC,IAAM,QAAS,CAC/BC,UAAW,eACXC,UAAW,eACXC,KAAM,mBACNC,KAAM,iBAGJC,EAA4BL,IAAM,QAAS,CAC7CC,UAAW,oBACXC,UAAW,oBACXC,KAAM,mBACNC,KAAM,qBAGJE,EAAgBN,IAAM,QAAS,CACjCE,UAAW,6BACXC,KAAM,0BACNC,KAAM,4BAGJG,EAA4BP,IAAM,QAAS,CAC7CE,UAAW,4BACXC,KAAM,yBACNC,KAAM,2BAGJI,EAAsBR,IAAM,QAAS,CACvCC,UAAW,mBACXC,UAAW,mBACXC,KAAM,uBACNC,KAAM,qBAGJK,EAAkBT,IAAM,QAAS,CACnCC,UAAW,mBACXC,UAAW,mBACXC,KAAM,eACNC,KAAM,qBAGJM,EAAcV,IAAM,QAAS,CAC/BC,UAAW,oBACXC,UAAW,oBACXE,KAAM,mBACND,KAAM,qBAGGQ,EAAaC,EAAAA,OAAOC,OAAMC,WAAA,CAAAC,YAAA,eAAbH,CAAa,0SAEjCI,EAAAA,GAC6BN,EACHA,EAEfX,EAOIS,EAQfR,IAAM,YAAa,CACjBiB,MAAMC,EAAAA,EAAAA,KAAG,qBAEHC,EAAAA,OAKDC,GAAoBR,EAAAA,EAAAA,QAAOS,EAAAA,IAAUP,WAAA,CAAAC,YAAA,eAAjBH,CAAiB,4CAI5CZ,IAAM,YAAa,CACjBsB,OAAOJ,EAAAA,EAAAA,KAAG,0JAIJK,EAAAA,GAAGC,OAKHD,EAAAA,GAAGE,WAOXzB,IAAM,YAAa,CACjBiB,MAAMC,EAAAA,EAAAA,KAAG,kGAKHK,EAAAA,GAAGC,WAOJE,EAAad,EAAAA,OAAOe,IAAGb,WAAA,CAAAC,YAAA,eAAVH,CAAU,mXAC9BgB,EAAAA,GAGsB7B,EAWtBC,IAAM,YAAa,CACjBiB,MAAMC,EAAAA,EAAAA,KAAG,0EAKHK,EAAAA,GAAGC,UAKXxB,IAAM,OAAQ,CACZiB,MAAMC,EAAAA,EAAAA,KAAG,wCACanB,EACLU,GAEjBa,OAAOJ,EAAAA,EAAAA,KAAG,wCACYb,EACLN,KAGnBC,IAAM,SAAU,CACdsB,OAAOJ,EAAAA,EAAAA,KAAG,8DACYb,EACEG,EACPA,KAInBe,EAAAA,GAAGC,OAKHD,EAAAA,GAAGE,QAGCzB,IAAM,YAAa,CACjBiB,MAAMC,EAAAA,EAAAA,KAAG,sBAORW,EAAOjB,EAAAA,OAAOe,IAAGb,WAAA,CAAAC,YAAA,eAAVH,CAAU,qIACxBkB,EAAAA,GAOInB,EAKJX,IAAM,YAAa,CACjBiB,MAAMC,EAAAA,EAAAA,KAAG,qNACwBZ,EAU3BiB,EAAAA,GAAGC,UAMXxB,IAAqB,SAAU,CAC7BiB,MAAMC,EAAAA,EAAAA,KAAG,2BACeX,MAKnBwB,EAAUnB,EAAAA,OAAOe,IAAGb,WAAA,CAAAC,YAAA,eAAVH,CAAU,gJAM3BW,EAAAA,GAAGC,OAKHD,EAAAA,GAAGE,SAMIO,GAAQpB,EAAAA,EAAAA,QAAOqB,EAAAA,GAAKnB,WAAA,CAAAC,YAAA,eAAZH,CAAY,yCAKpBsB,GAAYtB,EAAAA,EAAAA,QAAOuB,EAAAA,GAAOrB,WAAA,CAAAC,YAAA,eAAdH,CAAc,8BAI1BwB,GAAexB,EAAAA,EAAAA,QAAOS,EAAAA,IAAUP,WAAA,CAAAC,YAAA,eAAjBH,CAAiB,sSACvCyB,EAAAA,GACSrC,IAAM,OAAQ,CACrBiB,KAAM,OACNK,MAAO,SAOTC,EAAAA,GAAGC,OAMHD,EAAAA,GAAGE,QAKHzB,IAAM,YAAa,CACjBiB,MAAMC,EAAAA,EAAAA,KAAG,4JAOHK,EAAAA,GAAGC,OAIHD,EAAAA,GAAGE,WAQPzB,IAAM,YAAa,CACjBsB,OAAOJ,EAAAA,EAAAA,KAAG,wJAEJK,EAAAA,GAAGC,OAIHD,EAAAA,GAAGe,OAIHf,EAAAA,GAAGE,WAKXzB,IAAM,YAAa,CACjBiB,MAAMC,EAAAA,EAAAA,KAAG,2C,eChSrB,MAAMqB,EAAWA,EACbC,KACAC,YACAC,YACAC,WACAC,WACAC,OACAC,YACAC,OACAC,SACAC,OACAC,aACAC,aACAC,YACAC,aACAC,eACgC,IAADC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAC/B,MAAMC,GAAeC,EAAAA,EAAAA,MACrBf,EAAOc,GAAgBd,EACvBC,EAASa,GAAgBb,EACzB,MAAOe,EAAQC,IAAWC,EAAAA,EAAAA,UAAkBlB,IACrCmB,EAAYC,IAAkBF,EAAAA,EAAAA,aAE7BvB,GAC6B,mBAAhB,QAAZa,EAAAb,EAAU,UAAE,IAAAa,OAAA,EAAZA,EAAca,YACiB,yBAAhB,QAAZZ,EAAAd,EAAU,UAAE,IAAAc,OAAA,EAAZA,EAAcY,YACc,0BAAhB,QAAZX,EAAAf,EAAU,UAAE,IAAAe,OAAA,EAAZA,EAAcW,cAGnBC,EAAMC,IAAWL,EAAAA,EAAAA,aAClB,QAAEM,IAAYC,EAAAA,EAAAA,MACdC,GAAeC,EAAAA,EAAAA,YAAWC,EAAAA,eAG5BjC,GAC6B,mBAAhB,QAAZgB,EAAAhB,EAAU,UAAE,IAAAgB,OAAA,EAAZA,EAAcU,YACiB,yBAAhB,QAAZT,EAAAjB,EAAU,UAAE,IAAAiB,OAAA,EAAZA,EAAcS,YACc,0BAAhB,QAAZR,EAAAlB,EAAU,UAAE,IAAAkB,OAAA,EAAZA,EAAcQ,YACjBC,GAEDC,EAAQ5B,EAAUkC,SAEtB,MAAMC,EAAwB,OAATnC,QAAS,IAATA,OAAS,EAATA,EACfoC,KAAKC,GAASA,EAAKC,aAAe,KACnCC,OAAOC,SACNlF,EAASyE,GAAgBA,EAAazE,OAAU,YAChDmF,EAAeV,GAAgBA,EAAaU,aAAgB,OAC5DC,EAAiB,CACnBC,aAAa,IAEjBC,EAAAA,EAAAA,YAAU,KACFvB,IAAWhB,GACXiB,EAAQjB,EACZ,GACD,CAACgB,EAAQhB,IAEZ,IAAIwC,EAAY,UAChB,QAAQC,EAAAA,EAAAA,OACJ,IAAK,KACDD,EAAY,UACZ,MACJ,IAAK,IAGL,IAAK,IACDA,EAAY,UACZ,MACJ,QACIA,EAAY,UAEpB,MAAME,EAAUC,IAAWjD,EAAW,CAClC,WAAY4B,EACZtB,KAAMA,EACN4C,QAAS5C,IAYP6C,EARExC,EACON,EAAY,IAAMK,EAAa,GAC5B,OAAJN,QAAI,IAAJA,OAAI,EAAJA,EAAMgD,aAAc,QAChB,OAAJhD,QAAI,IAAJA,OAAI,EAAJA,EAAMiD,eAAgB,QAErB,OAAJjD,QAAI,IAAJA,OAAI,EAAJA,EAAMkD,WAAY,OAKvBC,GAAaC,EAAAA,EAAAA,KAAAC,EAAAA,SAAA,CAAAtD,SAAGA,IAEtB,OAAID,GAEIsD,EAAAA,EAAAA,KAACE,EAAAA,cAAa,CACVnG,MAAO,CACHA,MAAOA,EACPkE,WAAYA,EACZnB,MAAOmB,GAAcH,EACrBd,KAAMA,EACND,QAASkB,GAAclB,EACvBI,UAAWA,GACbR,UAEFwD,EAAAA,EAAAA,MAACvE,EAAI,CAACW,GAAIA,EAAIC,UAAWgD,EAAQ7C,SAAA,CAC5ByB,IACG4B,EAAAA,EAAAA,KAACtF,EAAU,CACP6B,GAAI6B,EAAKgC,WACTC,QAASC,UACLC,EAAMC,iBAEF5B,SACON,EACHM,EACAO,IAGJ/B,EAAWP,EAAU,EAE7B4D,UAAW1D,EACX,gBAAeA,EAAS,QAAU,OAAOJ,UAEzCwD,EAAAA,EAAAA,MAAChF,EAAiB,CAAAwB,SAAA,CACbyB,EAAKsC,aACFV,EAAAA,EAAAA,KAACvE,EAAU,CAAAkB,SAAEyB,EAAKsC,aAErBtC,EAAKuC,MACL3D,IAASG,IACN6C,EAAAA,EAAAA,KAACjE,EAAK,CAAiB6E,KAAMtB,GAAjBA,SAK5Ba,EAAAA,EAAAA,MAAChE,EAAY,CAAAQ,SAAA,CACRoD,GACClD,EAAY,IAAMI,KAChBkD,EAAAA,EAAAA,MAACrE,EAAO,CAAAa,SAAA,CACHE,EAAY,IAAMM,IACf6C,EAAAA,EAAAA,KAAC/D,EAAS,CACN4E,KAAK,QACL3B,YAAaA,EACbmB,QAASC,UACLC,EAAMC,iBAEF5B,SACON,EACHM,EACAO,IAGJ9B,EAASR,EAAY,EAAE,EAE/B4D,UAAW1D,EACX6D,KAAK,YAAWjE,UAEX,OAAJC,QAAI,IAAJA,OAAI,EAAJA,EAAMkE,WAAY,cAGzB7D,IACE+C,EAAAA,EAAAA,KAAC/D,EAAS,CACN4E,KAAK,QACL3B,YAAaA,EACb6B,QAAQ,UACRV,QAASC,UACLC,EAAMC,iBAEF5B,SACON,EACHM,EACAO,IAGJ9B,EAASR,EAAY,EAAE,EAE/B4D,UAAW1D,EACX6D,KAAK,cAAajE,SAEjBgD,gBAU9BK,EAAAA,EAAAA,KAAAC,EAAAA,SAAA,CAAAtD,SAAGA,GAAY,EAG1B,MAAeqE,EAAAA,KAAW1E,E","sources":["components/FormStep/FormStep.styled.ts","components/FormStep/FormStep.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Button from \"components/Button\";\nimport Icon from \"components/Icon\";\nimport { Container } from \"style/components/Page\";\nimport {\n    styleBodyL,\n    styleHeadingL,\n    styleHeadingM,\n} from \"style/components/Typography\";\nimport { columnGap } from \"style/grid\";\nimport { scrollMarginTopPad } from \"style/headerOffsets\";\nimport { MQ } from \"style/mediaQueries\";\n\nconst buttonColor = theme(\"theme\", {\n    undefined: \"--color-blue\",\n    lightgray: \"--color-blue\",\n    blue: \"--color-cyan-l60\",\n    cyan: \"--color-blue\",\n});\n\nconst stepNumberBackgroundColor = theme(\"theme\", {\n    undefined: \"--color-black-195\",\n    lightgray: \"--color-black-l95\",\n    blue: \"--color-blue-d10\",\n    cyan: \"--color-cyan-l80\",\n});\n\nconst circularColor = theme(\"theme\", {\n    lightgray: \"--icon-on-neutral-disabled\",\n    blue: \"--icon-on-blue-disabled\",\n    cyan: \"--icon-on-cyan-disabled\",\n});\n\nconst indicatorBackgroundActive = theme(\"theme\", {\n    lightgray: \"--icon-on-neutral-primary\",\n    blue: \"--icon-on-blue-primary\",\n    cyan: \"--icon-on-cyan-primary\",\n});\n\nconst buttonDisabledColor = theme(\"theme\", {\n    undefined: \"--color-blue-o60\",\n    lightgray: \"--color-blue-o60\",\n    blue: \"--color-cyan-l60-o60\",\n    cyan: \"--color-blue-o60\",\n});\n\nconst stepNumberColor = theme(\"theme\", {\n    undefined: \"--color-cyan-l60\",\n    lightgray: \"--color-cyan-l60\",\n    blue: \"--color-blue\",\n    cyan: \"--color-cyan-l60\",\n});\n\nconst borderColor = theme(\"theme\", {\n    undefined: \"--color-black-o15\",\n    lightgray: \"--color-black-o15\",\n    cyan: \"--color-blue-o15\",\n    blue: \"--color-cyan-o40\",\n});\n\nexport const StepButton = styled.button`\n    all: unset;\n    ${styleHeadingL};\n    border-bottom: 1px solid var(${borderColor});\n    border-top: 1px solid var(${borderColor});\n    box-sizing: border-box;\n    color: var(${buttonColor});\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n\n    &:disabled {\n        color: var(${buttonDisabledColor});\n        cursor: default;\n    }\n\n    &:focus-visible {\n        outline: 7px solid var(--button-focus);\n        outline-offset: 0;\n    }\n    ${theme(\"formGuide\", {\n        true: css`\n            border: none;\n            ${styleHeadingM};\n        `,\n    })}\n`;\n\nexport const StepButtonContent = styled(Container)`\n    align-items: center;\n    display: flex;\n\n    ${theme(\"formGuide\", {\n        false: css`\n            padding-bottom: 0.4375rem;\n            padding-top: 0.4375rem;\n\n            ${MQ.FROM_M} {\n                padding-bottom: 0.875rem;\n                padding-top: 0.875rem;\n            }\n\n            ${MQ.FROM_XL} {\n                padding-bottom: 1.3125rem;\n                padding-top: 1.3125rem;\n            }\n        `,\n    })}\n\n    ${theme(\"formGuide\", {\n        true: css`\n            padding-bottom: 0.875rem;\n            padding-left: 2.625rem;\n            padding-top: 1.75rem;\n\n            ${MQ.FROM_M} {\n                padding-left: 4.375rem;\n            }\n        `,\n    })}\n`;\n\nexport const StepNumber = styled.div`\n    ${styleBodyL};\n    align-items: center;\n    aspect-ratio: 1;\n    border: 1px solid var(${buttonColor});\n    border-radius: 50%;\n    display: inline-flex;\n    font-weight: bold;\n    justify-content: center;\n    margin-right: 0.875rem;\n    transition:\n        color 0.2s ease-in-out,\n        background-color 0.2s ease-in-out;\n    vertical-align: middle;\n    width: 2.625rem;\n    ${theme(\"formGuide\", {\n        true: css`\n            left: -1.3125rem;\n            position: absolute;\n            top: 1.3125rem;\n\n            ${MQ.FROM_M} {\n                left: -1.6875rem;\n            }\n        `,\n    })}\n    ${theme(\"open\", {\n        true: css`\n            background: var(${buttonColor});\n            color: var(${stepNumberColor});\n        `,\n        false: css`\n            background: var(${stepNumberBackgroundColor});\n            color: var(${buttonColor});\n        `,\n    })};\n    ${theme(\"active\", {\n        false: css`\n            background: var(${stepNumberBackgroundColor});\n            border-color: var(${buttonDisabledColor});\n            color: var(${buttonDisabledColor});\n        `,\n    })};\n\n    ${MQ.FROM_M} {\n        margin-right: 1.3125rem;\n        width: 3.5rem;\n    }\n\n    ${MQ.FROM_XL} {\n        margin-right: 1.75rem;\n        width: 4.375rem;\n        ${theme(\"formGuide\", {\n            true: css`\n                width: 3.5rem;\n            `,\n        })}\n    }\n`;\n\nexport const Step = styled.div`\n    ${scrollMarginTopPad}\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &.has-step.closed + .has-step {\n        ${StepButton} {\n            border-top: none;\n        }\n    }\n\n    ${theme(\"formGuide\", {\n        true: css`\n            border-left: 1px solid var(${circularColor});\n            grid-column: col-start 1 / span 12;\n            left: 1.3125rem;\n            margin-bottom: 1.75rem;\n            position: relative;\n\n            &:first-child {\n                margin-top: 7.875rem;\n            }\n\n            ${MQ.FROM_M} {\n                grid-column: col-start 7 / span 6;\n                left: 1.6875rem;\n            }\n        `,\n    })}\n    ${theme(\"formGuide\" && \"active\", {\n        true: css`\n            border-color: var(${indicatorBackgroundActive});\n        `,\n    })}\n`;\n\nexport const Buttons = styled.div`\n    display: flex;\n    flex-direction: row;\n    gap: 0.875rem;\n    margin-top: 3.5rem;\n\n    ${MQ.FROM_M} {\n        gap: 1.3125rem;\n        margin-top: 4.375rem;\n    }\n\n    ${MQ.FROM_XL} {\n        gap: 1.75rem;\n        margin-top: 6.125rem;\n    }\n`;\n\nexport const Check = styled(Icon)`\n    align-self: center;\n    margin-left: auto;\n`;\n\nexport const NavButton = styled(Button)`\n    justify-self: flex-start;\n`;\n\nexport const FormElements = styled(Container)`\n    ${columnGap};\n    display: ${theme(\"open\", {\n        true: \"grid\",\n        false: \"none\",\n    })};\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    padding-bottom: 3.5rem;\n    padding-top: 1.3125rem;\n    width: 100%;\n\n    ${MQ.FROM_M} {\n        grid-template-columns: repeat(12, [col-start] 1fr);\n        padding-bottom: 4.375rem;\n        padding-top: 2.1875rem;\n    }\n\n    ${MQ.FROM_XL} {\n        padding-bottom: 6.125rem;\n        padding-top: 2.625rem;\n    }\n\n    ${theme(\"formGuide\", {\n        true: css`\n            display: block;\n            margin-bottom: 3.5rem;\n            padding-bottom: 0;\n            padding-left: 2.625rem;\n            padding-top: 0;\n\n            ${MQ.FROM_M} {\n                padding-left: 4.375rem;\n            }\n\n            ${MQ.FROM_XL} {\n                padding-bottom: 0;\n                padding-top: 0;\n            }\n        `,\n    })}\n\n    & > div {\n        ${theme(\"formGuide\", {\n            false: css`\n                grid-column: col-start 1 / span 4;\n                ${MQ.FROM_M} {\n                    grid-column: col-start 5 / span 8;\n                }\n\n                ${MQ.FROM_L} {\n                    grid-column: col-start 6 / span 7;\n                }\n\n                ${MQ.FROM_XL} {\n                    grid-column: col-start 6 / span 6;\n                }\n            `,\n        })}\n        ${theme(\"formGuide\", {\n            true: css`\n                grid-column: col-start 1 / span 12;\n            `,\n        })}\n    }\n`;\n","import classNames from \"classnames\";\nimport React, { ReactElement, useContext, useEffect, useState } from \"react\";\nimport { useFormContext } from \"react-hook-form\";\nimport { ThemeContext, ThemeProvider } from \"styled-components\";\n\nimport { useBreakpoint, useIsInEditMode } from \"hooks\";\nimport { PropsWithEpiFormContent } from \"types/Props\";\n\nimport {\n    StepButton,\n    StepButtonContent,\n    FormElements,\n    Step,\n    StepNumber,\n    NavButton,\n    Buttons,\n    Check,\n} from \"./FormStep.styled\";\nimport FormStepProps from \"./FormStepProps\";\n\nconst FormStep = ({\n    id,\n    className,\n    formItems,\n    hasSteps,\n    children,\n    l18n,\n    stepIndex,\n    open,\n    active,\n    done,\n    isLastStep,\n    stepLength,\n    formGuide,\n    toggleStep,\n    openStep,\n}: FormStepProps): ReactElement => {\n    const isInEditMode = useIsInEditMode();\n    open = isInEditMode || open;\n    active = isInEditMode || active;\n    const [isOpen, setOpen] = useState<boolean>(open);\n    const [isFormStep, _setIsFormStep] = useState<boolean>(\n        !!(\n            formItems &&\n            (formItems[0]?.component === \"FormStepBlock\" ||\n                formItems[0]?.component === \"FormResultStepBlock\" ||\n                formItems[0]?.component === \"FormSummaryStepBlock\")\n        ),\n    );\n    const [step, setStep] = useState<PropsWithEpiFormContent>();\n    const { trigger } = useFormContext();\n    const themeContext = useContext(ThemeContext);\n\n    if (\n        formItems &&\n        (formItems[0]?.component === \"FormStepBlock\" ||\n            formItems[0]?.component === \"FormResultStepBlock\" ||\n            formItems[0]?.component === \"FormSummaryStepBlock\") &&\n        !step\n    )\n        setStep(formItems.shift());\n\n    const elementnames = formItems\n        ?.map((item) => item.elementName || \"\")\n        .filter(Boolean);\n    const theme = (themeContext && themeContext.theme) || \"lightgray\";\n    const actionTheme = (themeContext && themeContext.actionTheme) || \"blue\";\n    const triggerOptions = {\n        shouldFocus: true,\n    };\n    useEffect(() => {\n        if (isOpen !== open) {\n            setOpen(open);\n        }\n    }, [isOpen, open]);\n\n    let checkIcon = \"check28\";\n    switch (useBreakpoint()) {\n        case \"XL\":\n            checkIcon = \"check70\";\n            break;\n        case \"L\":\n            checkIcon = \"check56\";\n            break;\n        case \"M\":\n            checkIcon = \"check56\";\n            break;\n        default:\n            checkIcon = \"check42\";\n    }\n    const classes = classNames(className, {\n        \"has-step\": step,\n        open: open,\n        closed: !open,\n    });\n\n    const getNavButtonTextNext = () => {\n        if (formGuide) {\n            return stepIndex + 1 === stepLength - 1\n                ? l18n?.showResult || \"Next\"\n                : l18n?.nextQuestion || \"Next\";\n        }\n        return l18n?.nextStep || \"Next\";\n    };\n\n    const navButtonTextNext = getNavButtonTextNext();\n\n    const childItems = <>{children}</>;\n\n    if (hasSteps)\n        return (\n            <ThemeProvider\n                theme={{\n                    theme: theme,\n                    isFormStep: isFormStep,\n                    open: !isFormStep || isOpen,\n                    done: done,\n                    active: !isFormStep || active,\n                    formGuide: formGuide,\n                }}\n            >\n                <Step id={id} className={classes}>\n                    {step && (\n                        <StepButton\n                            id={step.identifier}\n                            onClick={async (event) => {\n                                event.preventDefault();\n                                if (\n                                    elementnames &&\n                                    (await trigger(\n                                        elementnames,\n                                        triggerOptions,\n                                    ))\n                                )\n                                    toggleStep(stepIndex);\n                            }}\n                            disabled={!active}\n                            aria-disabled={active ? \"false\" : \"true\"}\n                        >\n                            <StepButtonContent>\n                                {step.stepNumber && (\n                                    <StepNumber>{step.stepNumber}</StepNumber>\n                                )}\n                                {step.label}\n                                {done && !formGuide && (\n                                    <Check key={checkIcon} icon={checkIcon} />\n                                )}\n                            </StepButtonContent>\n                        </StepButton>\n                    )}\n                    <FormElements>\n                        {childItems}\n                        {(stepIndex > 0 || !isLastStep) && (\n                            <Buttons>\n                                {stepIndex > 0 && !formGuide && (\n                                    <NavButton\n                                        size=\"large\"\n                                        actionTheme={actionTheme}\n                                        onClick={async (event) => {\n                                            event.preventDefault();\n                                            if (\n                                                elementnames &&\n                                                (await trigger(\n                                                    elementnames,\n                                                    triggerOptions,\n                                                ))\n                                            )\n                                                openStep(stepIndex - 1);\n                                        }}\n                                        disabled={!active}\n                                        icon=\"upwards28\"\n                                    >\n                                        {l18n?.prevStep || \"Previous\"}\n                                    </NavButton>\n                                )}\n                                {!isLastStep && (\n                                    <NavButton\n                                        size=\"large\"\n                                        actionTheme={actionTheme}\n                                        variant=\"primary\"\n                                        onClick={async (event) => {\n                                            event.preventDefault();\n                                            if (\n                                                elementnames &&\n                                                (await trigger(\n                                                    elementnames,\n                                                    triggerOptions,\n                                                ))\n                                            )\n                                                openStep(stepIndex + 1);\n                                        }}\n                                        disabled={!active}\n                                        icon=\"downwards28\"\n                                    >\n                                        {navButtonTextNext}\n                                    </NavButton>\n                                )}\n                            </Buttons>\n                        )}\n                    </FormElements>\n                </Step>\n            </ThemeProvider>\n        );\n\n    return <>{children}</>;\n};\n\nexport default React.memo(FormStep);\n"],"names":["buttonColor","theme","undefined","lightgray","blue","cyan","stepNumberBackgroundColor","circularColor","indicatorBackgroundActive","buttonDisabledColor","stepNumberColor","borderColor","StepButton","styled","button","withConfig","componentId","styleHeadingL","true","css","styleHeadingM","StepButtonContent","Container","false","MQ","FROM_M","FROM_XL","StepNumber","div","styleBodyL","Step","scrollMarginTopPad","Buttons","Check","Icon","NavButton","Button","FormElements","columnGap","FROM_L","FormStep","id","className","formItems","hasSteps","children","l18n","stepIndex","open","active","done","isLastStep","stepLength","formGuide","toggleStep","openStep","_formItems$","_formItems$2","_formItems$3","_formItems$4","_formItems$5","_formItems$6","isInEditMode","useIsInEditMode","isOpen","setOpen","useState","isFormStep","_setIsFormStep","component","step","setStep","trigger","useFormContext","themeContext","useContext","ThemeContext","shift","elementnames","map","item","elementName","filter","Boolean","actionTheme","triggerOptions","shouldFocus","useEffect","checkIcon","useBreakpoint","classes","classNames","closed","navButtonTextNext","showResult","nextQuestion","nextStep","childItems","_jsx","_Fragment","ThemeProvider","_jsxs","identifier","onClick","async","event","preventDefault","disabled","stepNumber","label","icon","size","prevStep","variant","React"],"sourceRoot":""}