@hhgtech/hhg-components 1.28.67 → 1.28.69

package/build/esm/onboardingV2.js

@@ -1,8 +1,72 @@
-import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle as o,useState as a,useRef as i,useEffect as l,useMemo as s,Fragment as m}from"react";import{Box as d,Input as c,Grid as p,Title as u,Container as g,Flex as h,rem as b,Stack as E,AspectRatio as f}from"@mantine/core";import{P as L,c as v,R as y,O as C,d as x,u as w,B as S}from"./index-5408f5a4.js";import"@mantine/dates";import{L as j}from"./index-9e5956c2.js";import"./Subot-4642c5bf.js";import{C as P}from"./index-2e99f941.js";import{T as O}from"./index-d27a0e25.js";import{t as k}from"./theme-3db3c9a8.js";import"./translationsContext-6d2efd65.js";import"string-format";import{useInterval as F,useCounter as B}from"@mantine/hooks";import{M as z,a as N}from"./utils-5b4e60da.js";import{M as T,h as I}from"./utils-b87ec473.js";export{M as MAPPED_LOCALE}from"./utils-b87ec473.js";import{createFormContext as D,yupResolver as A}from"@mantine/form";import Z from"styled-components";import{_,a as q}from"./tslib.es6-266309d1.js";import"./index.styles-94af560f.js";import{H as V}from"./index-24557f2b.js";import"./constants-f7c80032.js";import{L as $}from"./utils-3d2e3f0f.js";import{u as H}from"./useTranslations-df1b3bb8.js";import"./utils-970ce0c0.js";import"./index.styled-14b65c9e.js";import"./index-8c77d7e0.js";import*as U from"yup";import{D as W}from"./index-93e5b4f3.js";import{A as Y}from"./index-45dcd965.js";import{V as R}from"./Visible-ff7d225c.js";import{createPortal as G}from"react-dom";import{I as K}from"./index-13dc1f44.js";import J from"lodash/throttle";import{B as Q}from"./index-3452fed2.js";import{T as X}from"./index-459e0362.js";import{format as ee}from"date-fns";import te from"react-keyed-flatten-children";import"@hhgtech/icons/other";import"dayjs";import"@mantine/carousel";import"classnames";import"./useUniqueId-03fbaecd.js";import"@hhgtech/icons/core";import"date-fns/locale";import"./isProduction-00695d80.js";import"./animation-0340efb3.js";import"./cookieHelper-4f089e3c.js";import"slugify";const ne=t({currentStep:0,setCurrentStep:()=>!1,setMaxStep:()=>!1,nextStep:()=>!1,prevStep:()=>!1,isMarryBaby:!1,siteType:"helloSites",sharedData:{},setSharedData:()=>!1}),[re,oe,ae]=D(),ie=Z(d)`
+import React__default, { createContext, forwardRef, useContext, useImperativeHandle, useState, useRef, useEffect, useMemo, Fragment } from 'react';
+import { Box, Input, Grid, Title, Container, Flex, rem, Stack, AspectRatio } from '@mantine/core';
+import { P as Phone, c as Input$1, R as Radio, O as OTP, d as Checkbox, u as useScreenSize, B as Button } from './index-32e53dac.js';
+import '@mantine/dates';
+import { L as LOCALE_SPECS } from './index-e612be9c.js';
+import './Subot-3289bd8e.js';
+import { C as CommonGAssets } from './index-8858383e.js';
+import { T as Text } from './index-3474401a.js';
+import { t as theme } from './theme-e74db08c.js';
+import './translationsContext-ad3e25de.js';
+import 'string-format';
+import { useInterval, useCounter } from '@mantine/hooks';
+import { M as MediaQueries, a as getPopupWrapperDom } from './utils-2c484c05.js';
+import { M as MAPPED_LOCALE, h as hiddenEmailChar } from './utils-3a2a47d9.js';
+export { M as MAPPED_LOCALE } from './utils-3a2a47d9.js';
+import { createFormContext, yupResolver } from '@mantine/form';
+import styled from 'styled-components';
+import { _ as __rest, a as __awaiter } from './tslib.es6-1b1533a9.js';
+import './index.styles-5add27c5.js';
+import { H as Heading } from './index-34899aa3.js';
+import './constants-b77ffe3d.js';
+import { L as LogoIcon } from './utils-6d7b88da.js';
+import { u as useTranslations } from './useTranslations-4f1db486.js';
+import './utils-70718e9c.js';
+import './index.styled-9c9db9cc.js';
+import './index-12fa4985.js';
+import * as yup from 'yup';
+import { D as DatePicker } from './index-9ea7e838.js';
+import { A as AddressInput } from './index-41bf860a.js';
+import { V as Visible } from './Visible-a3d436dd.js';
+import { createPortal } from 'react-dom';
+import { I as Icon } from './index-cc93e010.js';
+import throttle from 'lodash/throttle';
+import { B as Button$1 } from './index-6ea6484e.js';
+import { T as Text$1 } from './index-7af5242a.js';
+import { format } from 'date-fns';
+import flattenChildren from 'react-keyed-flatten-children';
+import '@hhgtech/icons/other';
+import 'dayjs';
+import '@mantine/carousel';
+import 'classnames';
+import './useUniqueId-3638402f.js';
+import '@hhgtech/icons/core';
+import 'date-fns/locale';
+import './isProduction-0ea904dd.js';
+import './animation-3d5edc39.js';
+import './cookieHelper-d314282c.js';
+import 'slugify';
+
+// define shared context
+const OnboardingContext = createContext({
+    currentStep: 0,
+    setCurrentStep: () => false,
+    setMaxStep: () => false,
+    nextStep: () => false,
+    prevStep: () => false,
+    isMarryBaby: false,
+    siteType: 'helloSites',
+    sharedData: {},
+    setSharedData: () => false,
+});
+
+const [FormProvider, useFormContext, useForm] = createFormContext();
+
+const StyledDynamicForm = styled(Box) `
   .phone-input {
     width: 100%;
     margin-bottom: 32px;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 16px;
     }
     .PhoneInput {
@@ -15,43 +79,194 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
       border-radius: 0 4px 4px 0;
     }
   }
-`,le=t=>{var{inputOrder:n=["phone"],withSimilac:r=!1,customTerms:o="",formContext:a}=t,i=_(t,["inputOrder","withSimilac","customTerms","formContext"]);const{t:l}=H(),s=a||oe(),m={phone:t=>{var{label:n,name:o="phone"}=t,a=_(t,["label","name"]);return e.createElement(c.Wrapper,{className:r?"input-control":"phone-input",withAsterisk:!0,label:n||r?e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},n||l("onboarding.similac.input.phone")):void 0},e.createElement(L,Object.assign({defaultCountry:T[process.env.UNIFY_LOCALE]||"VN"},s.getInputProps(o),a)),e.createElement(c.Error,{size:"md"},s.errors.phone))},full_name:t=>{var{label:n,name:r="name"}=t,o=_(t,["label","name"]);return e.createElement(v,Object.assign({label:e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},n||l("onboarding.formEmail.yourName")),withAsterisk:!0},s.getInputProps(r),o))},email:t=>{var{label:n,name:r="email"}=t,o=_(t,["label","name"]);return e.createElement(v,Object.assign({label:e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},n||l("onboarding.formEmail.yourEmail")),withAsterisk:!0},s.getInputProps(r),o))},dob:t=>{var{label:n,name:r="dob"}=t,o=_(t,["label","name"]);return e.createElement(W,Object.assign({label:e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},n||l("onboarding.formEmail.yourBirthday")),placeholder:"DD/MM/YYYY"},s.getInputProps(r),o))},gender:t=>{var{label:n,name:r="gender"}=t,o=_(t,["label","name"]);return e.createElement(y.Group,Object.assign({className:"radio-group",label:e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},n||l("tools.selectGender"))},s.getInputProps(r),o),e.createElement(y,{value:"0",label:l("onboarding.formEmail.genderMale")}),e.createElement(y,{value:"1",label:l("onboarding.formEmail.genderFemale")}))},otp:({name:t="otp"})=>e.createElement("div",{className:"otp-input"},e.createElement(C,Object.assign({enterKeyHint:void 0,nonce:void 0},s.getInputProps(t))),e.createElement(c.Error,null,s.errors.otp)),password:({label:t,name:n="password"})=>e.createElement(v.Password,Object.assign({label:e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},t||l("onboarding.updatePassword.password")),withAsterisk:!0,rightSection:e.createElement(R,null)},s.getInputProps(n))),confirm_password:({label:t,name:n="confirmPassword"})=>e.createElement(v.Password,Object.assign({label:e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},t||l("onboarding.updatePassword.confirmPassword")),withAsterisk:!0,rightSection:e.createElement(R,null)},s.getInputProps(n))),term:({name:t="term",className:n=""})=>o?e.createElement("div",{style:{marginBottom:16},className:n},e.createElement(x,Object.assign({label:e.createElement(O,{size:"p4",as:"span",sx:{a:{color:"#2d87f3",fontWeight:"bold",letterSpacing:0}}},o)},s.getInputProps(t,{type:"checkbox"}),{error:null})),e.createElement(c.Error,{size:"md"},s.getInputProps("term",{type:"checkbox"}).error)):null,address:t=>{var{label:n,className:r="",name:o="address"}=t,a=_(t,["label","className","name"]);return e.createElement(Y,Object.assign({className:`${r} input-control`,label:e.createElement(O,{size:"s4",weight:"semiBold",as:"span"},n||l("onboarding.similac.input.address"))},s.getInputProps(o),a))}},d=n.map((e=>{var t;const n="string"==typeof e?{inputType:e}:e;return null===(t=m[n.inputType])||void 0===t?void 0:t.call(m,n)}));return e.createElement(ie,Object.assign({},i),d)},se=e=>U.object().shape({phone:U.string().required(e("onboarding.updatePhone.error")).default(""),name:U.string().required(e("onboarding.errorMessage.requiredName")),email:U.string().required(e("onboarding.errorMessage.requiredEmail")).email(e("onboarding.errorMessage.invalidEmail")).default(""),address:U.mixed().required(e("onboarding.similac.address.error")),term:U.bool().oneOf([!0],e("onboarding.similac.term.error"))});var me=n(((t,n)=>{var{inputOrder:a,onSubmit:i,validateSchema:l,defaultValues:s,isActive:m,customTerms:c,customFormTexts:p}=t,u=_(t,["inputOrder","onSubmit","validateSchema","defaultValues","isActive","customTerms","customFormTexts"]);const{nextStep:g,setSharedData:h,sharedData:b}=r(ne),{t:E}=H(),f=ae({initialValues:{term:!1,phone:(null==b?void 0:b.phone)||(null==s?void 0:s.phone)||"",email:(null==b?void 0:b.email)||(null==s?void 0:s.email)||"",name:(null==b?void 0:b.name)||(null==s?void 0:s.name)||""},validate:l||A(se(E))}),L=e=>q(void 0,void 0,void 0,(function*(){try{yield null==i?void 0:i(e),h((t=>Object.assign(Object.assign({},t),{phone:e.phone,email:e.email,name:e.name}))),g()}catch(e){console.error(e)}})),v=e=>{console.log(e)},y=()=>{var e;return null===(e=f.onSubmit(L,v))||void 0===e?void 0:e()};return o(n,(()=>({submitForm:y}))),e.createElement(d,Object.assign({"data-active":m},u),e.createElement(d,{sx:e=>({display:"flex",flexDirection:"column",gap:"16px",[e.fn.largerThan("md")]:{gap:"24px"}})},e.createElement(d,{sx:{textAlign:"center"}},e.createElement(V,{tag:"h4",as:"h2"},null==p?void 0:p.heading),e.createElement(O,{size:"p3"},null==p?void 0:p.description)),e.createElement(re,{form:f},e.createElement("form",{className:"friso-form",style:{width:"100%"},onSubmit:f.onSubmit(L,v)},e.createElement(d,{sx:{".friso-form":{display:"flex",flexWrap:"wrap",gap:"8px",".input-control":{width:"100%",marginBottom:0},".phone-input":{marginBottom:"0 !important",".PhoneInput":{marginBottom:"0 !important"}}}}},e.createElement(le,{inputOrder:a,customTerms:c,className:"friso-form"}))))))}));const de=Z.div`
+`;
+
+const DynamicForm = (_a) => {
+    var { inputOrder = ['phone'], withSimilac = false, customTerms = '', formContext } = _a, rest = __rest(_a, ["inputOrder", "withSimilac", "customTerms", "formContext"]);
+    const { t } = useTranslations();
+    const form = formContext || useFormContext();
+    const Phone$1 = (_a) => {
+        var { label, name = 'phone' } = _a, phoneProps = __rest(_a, ["label", "name"]);
+        return (React__default.createElement(Input.Wrapper, { className: withSimilac ? 'input-control' : 'phone-input', withAsterisk: true, label: label || withSimilac ? (React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.similac.input.phone'))) : undefined },
+            React__default.createElement(Phone, Object.assign({ defaultCountry: MAPPED_LOCALE[process.env.UNIFY_LOCALE] || 'VN' }, form.getInputProps(name), phoneProps)),
+            React__default.createElement(Input.Error, { size: "md" }, form.errors.phone)));
+    };
+    const FullName = (_a) => {
+        var { label, name = 'name' } = _a, rest = __rest(_a, ["label", "name"]);
+        return (React__default.createElement(Input$1, Object.assign({ label: React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.formEmail.yourName')), withAsterisk: true }, form.getInputProps(name), rest)));
+    };
+    const Email = (_a) => {
+        var { label, name = 'email' } = _a, rest = __rest(_a, ["label", "name"]);
+        return (React__default.createElement(Input$1, Object.assign({ label: React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.formEmail.yourEmail')), withAsterisk: true }, form.getInputProps(name), rest)));
+    };
+    const Dob = (_a) => {
+        var { label, name = 'dob' } = _a, rest = __rest(_a, ["label", "name"]);
+        return (React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.formEmail.yourBirthday')), placeholder: "DD/MM/YYYY" }, form.getInputProps(name), rest)));
+    };
+    const Gender = (_a) => {
+        var { label, name = 'gender' } = _a, radioProps = __rest(_a, ["label", "name"]);
+        return (React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('tools.selectGender')) }, form.getInputProps(name), radioProps),
+            React__default.createElement(Radio, { value: "0", label: t('onboarding.formEmail.genderMale') }),
+            React__default.createElement(Radio, { value: "1", label: t('onboarding.formEmail.genderFemale') })));
+    };
+    const Otp = ({ name = 'otp' }) => (React__default.createElement("div", { className: "otp-input" },
+        React__default.createElement(OTP, Object.assign({ enterKeyHint: undefined, nonce: undefined }, form.getInputProps(name))),
+        React__default.createElement(Input.Error, null, form.errors.otp)));
+    const Password = ({ label, name = 'password' }) => (React__default.createElement(Input$1.Password, Object.assign({ label: React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.updatePassword.password')), withAsterisk: true, rightSection: React__default.createElement(Visible, null) }, form.getInputProps(name))));
+    const Term = ({ name = 'term', className = '' }) => customTerms ? (React__default.createElement("div", { style: { marginBottom: 16 }, className: className },
+        React__default.createElement(Checkbox, Object.assign({ label: React__default.createElement(Text, { size: "p4", as: "span", sx: {
+                    a: {
+                        color: '#2d87f3',
+                        fontWeight: 'bold',
+                        letterSpacing: 0,
+                    },
+                } }, customTerms) }, form.getInputProps(name, { type: 'checkbox' }), { error: null })),
+        React__default.createElement(Input.Error, { size: "md" }, form.getInputProps('term', { type: 'checkbox' }).error))) : null;
+    const Address = (_a) => {
+        var { label, className = '', name = 'address' } = _a, rest = __rest(_a, ["label", "className", "name"]);
+        return (React__default.createElement(AddressInput, Object.assign({ className: `${className} input-control`, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.similac.input.address')) }, form.getInputProps(name), rest)));
+    };
+    const ConfirmPassword = ({ label, name = 'confirmPassword', }) => (React__default.createElement(Input$1.Password, Object.assign({ label: React__default.createElement(Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.updatePassword.confirmPassword')), withAsterisk: true, rightSection: React__default.createElement(Visible, null) }, form.getInputProps(name))));
+    const elements = {
+        phone: Phone$1,
+        full_name: FullName,
+        email: Email,
+        dob: Dob,
+        gender: Gender,
+        otp: Otp,
+        password: Password,
+        confirm_password: ConfirmPassword,
+        term: Term,
+        address: Address,
+    };
+    const content = inputOrder.map((part) => {
+        var _a;
+        const curProps = typeof part === 'string' ? { inputType: part } : part;
+        return (_a = elements[curProps.inputType]) === null || _a === void 0 ? void 0 : _a.call(elements, curProps);
+    });
+    return React__default.createElement(StyledDynamicForm, Object.assign({}, rest), content);
+};
+
+const frisoOnboardingSchema = (t) => yup.object().shape({
+    phone: yup.string().required(t('onboarding.updatePhone.error')).default(''),
+    name: yup.string().required(t('onboarding.errorMessage.requiredName')),
+    email: yup
+        .string()
+        .required(t('onboarding.errorMessage.requiredEmail'))
+        .email(t('onboarding.errorMessage.invalidEmail'))
+        .default(''),
+    address: yup.mixed().required(t('onboarding.similac.address.error')),
+    term: yup.bool().oneOf([true], t('onboarding.similac.term.error')),
+});
+
+const FrisoOnboardingForm = (_a, ref) => {
+    var { inputOrder, onSubmit: _onSubmit, validateSchema, defaultValues, isActive, customTerms, customFormTexts } = _a, rest = __rest(_a, ["inputOrder", "onSubmit", "validateSchema", "defaultValues", "isActive", "customTerms", "customFormTexts"]);
+    const { nextStep, setSharedData, sharedData } = useContext(OnboardingContext);
+    const { t } = useTranslations();
+    const form = useForm({
+        initialValues: {
+            term: false,
+            phone: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.phone) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.phone) || '',
+            email: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.email) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) || '',
+            name: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.name) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.name) || '',
+        },
+        validate: validateSchema || yupResolver(frisoOnboardingSchema(t)),
+    });
+    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values));
+            setSharedData((d) => (Object.assign(Object.assign({}, d), { phone: values.phone, email: values.email, name: values.name })));
+            nextStep();
+        }
+        catch (err) {
+            console.error(err);
+        }
+    });
+    const onError = (fieldErrors) => {
+        console.log(fieldErrors);
+    };
+    const handleSubmitForm = () => { var _a; return (_a = form.onSubmit(onSubmit, onError)) === null || _a === void 0 ? void 0 : _a(); };
+    useImperativeHandle(ref, () => ({
+        submitForm: handleSubmitForm,
+    }));
+    return (React__default.createElement(Box, Object.assign({ "data-active": isActive }, rest),
+        React__default.createElement(Box, { sx: (theme) => ({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '16px',
+                [theme.fn.largerThan('md')]: {
+                    gap: '24px',
+                },
+            }) },
+            React__default.createElement(Box, { sx: { textAlign: 'center' } },
+                React__default.createElement(Heading, { tag: "h4", as: "h2" }, customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.heading),
+                React__default.createElement(Text, { size: "p3" }, customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.description)),
+            React__default.createElement(FormProvider, { form: form },
+                React__default.createElement("form", { className: "friso-form", style: {
+                        width: '100%',
+                    }, onSubmit: form.onSubmit(onSubmit, onError) },
+                    React__default.createElement(Box, { sx: {
+                            '.friso-form': {
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                gap: '8px',
+                                '.input-control': {
+                                    width: '100%',
+                                    marginBottom: 0,
+                                },
+                                '.phone-input': {
+                                    marginBottom: '0 !important',
+                                    '.PhoneInput': {
+                                        marginBottom: '0 !important',
+                                    },
+                                },
+                            },
+                        } },
+                        React__default.createElement(DynamicForm, { inputOrder: inputOrder, customTerms: customTerms, className: "friso-form" })))))));
+};
+var FrisoOnboardingForm$1 = forwardRef(FrisoOnboardingForm);
+
+const StyledOnboardingModal = styled.div `
   position: fixed;
   inset: 0;
   z-index: 1000;
   background: white;
   overflow-y: auto;
-`,ce=Z.div`
+`;
+const StyledContainer = styled.div `
   height: 100%;
-  ${z.lgPcUp} {
+  ${MediaQueries.lgPcUp} {
     display: table;
     width: 100%;
     height: calc(100% - 25px);
   }
-`,pe=Z.div`
+`;
+const StyledContent = styled.div `
   padding: 16px;
-  ${z.mbUp} {
+  ${MediaQueries.mbUp} {
     padding: 48px 24px 24px;
   }
   &[data-similac='true'][data-has-banner='true'] {
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       background: white;
       border-top-left-radius: 1rem;
       border-top-right-radius: 1rem;
       margin-top: -1rem;
     }
   }
-`,ue=Z.div`
+`;
+const StyledBannerCol = styled.div `
   width: 640px;
   padding: 16px 16px 0 16px;
   display: none;
 
-  ${z.mbUp} {
+  ${MediaQueries.mbUp} {
     width: 640px;
     display: table-cell;
   }
-`,ge=Z.div`
-  background-color: ${k.colors.primary50};
+`;
+const StyledBannerInner = styled.div `
+  background-color: ${theme.colors.primary50};
   border-radius: 12px;
   height: 100%;
   display: flex;
@@ -59,12 +274,14 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   justify-content: space-between;
 
   &[data-is-marry-baby='true'] {
-    background-color: ${k.mbColors.tonePink};
+    background-color: ${theme.mbColors.tonePink};
   }
-`,he=Z.div`
+`;
+const StyledIntro = styled.div `
   margin-top: 40px;
   padding: 24px 40px;
-`,be=Z.div`
+`;
+const StyledBannerImgWrapper = styled.div `
   width: 100%;
   display: block;
   img {
@@ -79,13 +296,56 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
       object-fit: contain;
     }
 
-    ${z.mbUp} {
+    ${MediaQueries.mbUp} {
       position: sticky;
       top: 0;
       height: 100vh;
     }
   }
-`,Ee=Z.div`
+`;
+
+const OnboardingModal = (_a) => {
+    var { children, withSimilac, banner, withPortal } = _a, rest = __rest(_a, ["children", "withSimilac", "banner", "withPortal"]);
+    const { isMobile } = useScreenSize();
+    const { isMarryBaby } = useContext(OnboardingContext);
+    const { t } = useTranslations();
+    if (withPortal && typeof window === 'undefined')
+        return null;
+    const MainContent = (React__default.createElement(StyledOnboardingModal, Object.assign({}, rest),
+        React__default.createElement(StyledContainer, null,
+            React__default.createElement(Grid, { sx: {
+                    [MediaQueries.mbDown]: {
+                        margin: 0,
+                    },
+                    '.mantine-Grid-col': {
+                        [MediaQueries.mbDown]: {
+                            padding: 0,
+                        },
+                    },
+                } },
+                React__default.createElement(Grid.Col, { span: (typeof banner === 'object' || withSimilac) && !isMobile ? 6 : 12, order: withSimilac ? 2 : 1, orderMd: withSimilac ? 1 : 2, sx: {
+                        zIndex: withSimilac ? 99 : undefined,
+                    } },
+                    React__default.createElement(StyledContent, { "data-similac": withSimilac, "data-has-banner": typeof banner === 'object' }, children)),
+                banner && typeof banner === 'object' && !withSimilac && (React__default.createElement(Grid.Col, { span: !isMobile ? 6 : 12, order: 1, orderMd: 2 },
+                    React__default.createElement(StyledBannerCol, null,
+                        React__default.createElement(StyledBannerInner, { "data-is-marry-baby": isMarryBaby },
+                            React__default.createElement(StyledIntro, null,
+                                banner.heading && (React__default.createElement(Title, { order: 1, mb: 24 }, banner.heading)),
+                                banner.description && (React__default.createElement(Text, { size: "p1", color: theme.colors.gray800 }, t('onboarding.welcomeScreen.content')))),
+                            React__default.createElement(StyledBannerImgWrapper, null, banner.imgSrc ? (React__default.createElement("img", { src: banner.imgSrc, loading: "lazy" })) : banner.imgComponent ? (banner.imgComponent) : null))))),
+                banner &&
+                    typeof banner === 'object' &&
+                    withSimilac &&
+                    (banner.imgSrc || banner.imgComponent) && (React__default.createElement(Grid.Col, { span: 'auto', order: 1, orderMd: 2 },
+                    React__default.createElement(StyledBannerImgWrapper, { className: "similac" }, banner.imgSrc ? (React__default.createElement("img", { src: banner.imgSrc, loading: "lazy" })) : banner.imgComponent ? (banner.imgComponent) : null)))))));
+    if (withPortal) {
+        return createPortal(MainContent, getPopupWrapperDom());
+    }
+    return MainContent;
+};
+
+const StyledFormInner$1 = styled.div `
   margin-top: 70px;
   display: flex;
   flex-direction: column;
@@ -94,7 +354,8 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   &.similac {
     margin-top: 16px;
   }
-`,fe=Z(g)`
+`;
+const StyledOnboarding$1 = styled(Container) `
   &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {
     display: flex;
     flex-direction: column;
@@ -106,7 +367,7 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   .header {
     margin-bottom: 32px;
     text-align: center;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 16px;
     }
   }
@@ -135,13 +396,33 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   .form-button {
     width: 100%;
   }
-`,Le=Z.img`
+`;
+const StyledThumb$1 = styled.img `
   margin-bottom: 38px;
-`,ve=t=>{var n,{heading:o,description:a,children:i,className:l,imgSrc:s,hiddenLogo:m=!1}=t,d=_(t,["heading","description","children","className","imgSrc","hiddenLogo"]);const{isMarryBaby:c,siteType:p}=r(ne);return e.createElement(fe,Object.assign({},d,{className:`hhg-comp-onboarding-container ${l}`,size:"sm"}),!m&&e.createElement($,{type:c?p:(null===(n=j[process.env.UNIFY_LOCALE])||void 0===n?void 0:n.LOGO_TYPE)||"hellobacsi"}),e.createElement(Ee,{className:m?"similac":""},s&&e.createElement(Le,{src:s,loading:"lazy"}),(o||a)&&e.createElement("div",{className:"header"},o&&e.createElement(u,{order:3},o),a&&e.createElement(O,{size:"p3",mt:8,color:k.colors.gray600},a)),i))},ye=Z(ve)`
+`;
+
+const Onboarding$1 = (_a) => {
+    var _b;
+    var { heading, description, children, className, imgSrc, hiddenLogo = false } = _a, rest = __rest(_a, ["heading", "description", "children", "className", "imgSrc", "hiddenLogo"]);
+    const { isMarryBaby, siteType } = useContext(OnboardingContext);
+    return (React__default.createElement(StyledOnboarding$1, Object.assign({}, rest, { className: `hhg-comp-onboarding-container ${className}`, size: "sm" }),
+        !hiddenLogo && (React__default.createElement(LogoIcon, { type: isMarryBaby
+                ? siteType
+                : (((_b = LOCALE_SPECS[process.env.UNIFY_LOCALE]) === null || _b === void 0 ? void 0 : _b.LOGO_TYPE) ||
+                    'hellobacsi') })),
+        React__default.createElement(StyledFormInner$1, { className: hiddenLogo ? 'similac' : '' },
+            imgSrc && React__default.createElement(StyledThumb$1, { src: imgSrc, loading: "lazy" }),
+            (heading || description) && (React__default.createElement("div", { className: "header" },
+                heading && React__default.createElement(Title, { order: 3 }, heading),
+                description && (React__default.createElement(Text, { size: "p3", mt: 8, color: theme.colors.gray600 }, description)))),
+            children)));
+};
+
+const StyledOnboardingForm$2 = styled(Onboarding$1) `
   .phone-input {
     width: 100%;
     margin-bottom: 32px;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 16px;
     }
     .PhoneInput {
@@ -157,10 +438,60 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   &:not([data-active='true']) {
     display: none !important;
   }
-`,Ce=e=>U.object().shape({phone:U.string().required(e("onboarding.updatePhone.error")).default("")}),xe=Z(ve)`
+`;
+
+const onboardingSchema = (t) => yup.object().shape({
+    phone: yup.string().required(t('onboarding.updatePhone.error')).default(''),
+});
+
+const DefaultOnboardingForm = ({ onClose, onSubmit: _onSubmit, canSkip = true, customFormTexts, isActive, submitProps, submitLabel, skipProps, isWhatsApp, }) => {
+    const { t } = useTranslations();
+    const { sharedData, setSharedData, nextStep } = useContext(OnboardingContext);
+    const form = useForm({
+        initialValues: {
+            phone: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.phone) || '',
+        },
+        validate: yupResolver(onboardingSchema(t)),
+    });
+    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setSharedData((p) => (Object.assign(Object.assign({}, p), { phone: values.phone })));
+            yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values.phone));
+            nextStep();
+        }
+        catch (err) {
+            console.error(err);
+        }
+    });
+    const onError = (fieldErrors) => {
+        console.log(fieldErrors);
+    };
+    return (React__default.createElement(StyledOnboardingForm$2, { heading: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.heading) || t('onboarding.updatePhone.heading'), description: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.description) ||
+            (isWhatsApp
+                ? t('onboarding.updateWhatsapp.description')
+                : t('onboarding.updatePhone.description')), "data-active": isActive },
+        React__default.createElement(FormProvider, { form: form },
+            React__default.createElement("form", { onSubmit: form.onSubmit(onSubmit, onError) },
+                React__default.createElement(DynamicForm, { inputOrder: ['phone'] }),
+                React__default.createElement(Button, Object.assign({ variant: "primary", fullWidth: true, size: "lg" }, (isWhatsApp && {
+                    leftIcon: React__default.createElement(Icon.WhatsApp, { size: 18, useCurrentColor: true }),
+                }), submitProps, { type: "submit", "data-event-category": isWhatsApp ? 'OTP' : 'Sign Up', "data-event-action": isWhatsApp
+                        ? 'Whatsapp - Fill phone and continue Click'
+                        : 'Update Phone Number', "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none" }), submitLabel ||
+                    (isWhatsApp
+                        ? t('onboarding.updateWhatsapp.submitLabel')
+                        : t('onboarding.button.continue'))),
+                canSkip && (React__default.createElement(Button, Object.assign({ variant: "ghost", fullWidth: true, size: "lg" }, (isWhatsApp && {
+                    dataEventCategory: 'OTP',
+                    dataEventAction: 'Whatsapp - Skip fill phone Click',
+                    dataEventLabel: typeof window !== 'undefined' ? window.location.href : '',
+                }), skipProps, { onClick: onClose, type: "button" }), t('onboarding.button.skip')))))));
+};
+
+const StyledOtpForm = styled(Onboarding$1) `
   .otp-input {
     margin-bottom: 36px;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 20px;
     }
     .otpContainer {
@@ -171,7 +502,7 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
     display: flex;
     gap: 6px;
     margin-bottom: 32px;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 16px;
     }
     a {
@@ -190,7 +521,235 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
     margin-bottom: 3px;
     margin-left: 3px;
   }
-`,we=e=>U.object().shape({otp:U.string().required(e("onboarding.otpForm.error")).length(6,e("onboarding.otpForm.error")).default("")}),Se=e=>U.object().shape({email:U.string().required(e("onboarding.errorMessage.requiredEmail")).email(e("onboarding.errorMessage.invalidEmail")).default(""),name:U.string().required(e("onboarding.errorMessage.requiredName"))}),je=Z.div`
+`;
+// export const StyledOtpForm = styled(Container)`
+//   &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {
+//     display: flex;
+//     flex-direction: column;
+//     align-items: center;
+//     height: 100%;
+//     width: 100%;
+//     text-align: center;
+//     max-width: 520px;
+//   }
+//   .header {
+//     margin-top: 70px;
+//     display: flex;
+//     flex-direction: column;
+//     align-items: center;
+//     justify-content: center;
+//     gap: 8px;
+//     margin-bottom: 32px;
+//     ${MediaQueries.mbDown} {
+//       margin-bottom: 16px;
+//     }
+//   }
+//   .otpContainer {
+//     margin-bottom: 36px;
+//     ${MediaQueries.mbDown} {
+//       margin-bottom: 20px;
+//     }
+//   }
+//   .resend {
+//     display: flex;
+//     gap: 6px;
+//     margin-bottom: 32px;
+//     ${MediaQueries.mbDown} {
+//       margin-bottom: 16px;
+//     }
+//     a {
+//       text-decoration: underline;
+//       cursor: pointer;
+//     }
+//   }
+// `
+
+const otpSchema = (t) => yup.object().shape({
+    otp: yup
+        .string()
+        .required(t('onboarding.otpForm.error'))
+        .length(6, t('onboarding.otpForm.error'))
+        .default(''),
+});
+
+const EmailOtpForm = ({ onSubmit: _onSubmit, email: emailProp, onResendCode, otpError, onClose, loading, 
+// onBack,
+canSkip: canSkipInit, }) => {
+    const { sharedData: { email: emailContext, retryEmailCount }, setSharedData, prevStep, siteType, isMarryBaby, nextStep, } = useContext(OnboardingContext);
+    const email = emailProp || emailContext || '';
+    const [seconds, setSeconds] = useState(30);
+    const interval = useInterval(() => setSeconds((s) => s - 1), 1000);
+    const [canSkip, handlers] = useCounter(0, { min: 0, max: 3 });
+    const preventClickRef = useRef(true);
+    const { t } = useTranslations();
+    useEffect(() => {
+        interval.start();
+        return interval.stop;
+    }, []);
+    useEffect(() => {
+        if (seconds === 0) {
+            interval.stop();
+            preventClickRef.current = false;
+        }
+    }, [seconds]);
+    const form = useForm({
+        initialValues: {
+            otp: '',
+        },
+        validate: yupResolver(otpSchema(t)),
+    });
+    useEffect(() => {
+        if (otpError)
+            form.setFieldError('otp', otpError);
+    }, [otpError]);
+    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            handlers.increment();
+            const error = yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values.otp));
+            !error && nextStep();
+        }
+        catch (err) {
+            console.error(err);
+        }
+    });
+    const onError = (fieldErrors) => {
+        console.log(fieldErrors);
+    };
+    const throttleResendCode = useMemo(() => {
+        return throttle(() => {
+            if (preventClickRef.current)
+                return;
+            handlers.increment();
+            setSeconds(30);
+            onResendCode === null || onResendCode === void 0 ? void 0 : onResendCode(email);
+            interval.start();
+            preventClickRef.current = true;
+        }, 1000, { trailing: false });
+    }, [email, onResendCode, interval]);
+    const onBack = () => {
+        if (retryEmailCount >= 2)
+            return;
+        setSharedData((d) => (Object.assign(Object.assign({}, d), { retryEmailCount: d.retryEmailCount + 1 })));
+        prevStep();
+    };
+    const outOfEdit = retryEmailCount >= 2;
+    return (React__default.createElement(StyledOtpForm, { heading: t('onboarding.otpForm.heading'), description: React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: t('onboarding.otpForm.descriptionEmail', {
+                        email: `<b style="color:${theme.colors.gray800}">${hiddenEmailChar(email)}</b>`,
+                    }),
+                } }),
+            !outOfEdit && (React__default.createElement("svg", { onClick: onBack, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "otp-description-edit-icon" },
+                React__default.createElement("path", { d: "M12.7812 1.33337C12.2987 1.33337 11.8162 1.51712 11.4479 1.88546L10.6667 2.66671L13.3333 5.33337L14.1146 4.55212C14.8506 3.81612 14.8506 2.62212 14.1146 1.88546C13.7463 1.51712 13.2638 1.33337 12.7812 1.33337ZM9.66667 3.66671L2 11.3334V14H4.66667L12.3333 6.33337L9.66667 3.66671Z", fill: "#ADB3BC" })))) },
+        React__default.createElement(FormProvider, { form: form },
+            React__default.createElement("form", { onSubmit: form.onSubmit(onSubmit, onError) },
+                React__default.createElement(DynamicForm, { inputOrder: ['otp'] }),
+                React__default.createElement("div", { className: "resend" },
+                    React__default.createElement(Text$1, { size: "p4", color: theme.colors.gray400 }, t('onboarding.otpForm.notReceiveOTP')),
+                    React__default.createElement(Text$1, { as: "a", size: "p4", color: isMarryBaby ? theme.mbColors.pink : theme.colors.primaryBase, onClick: throttleResendCode }, t('onboarding.otpForm.resendCode', { seconds }))),
+                React__default.createElement(Button$1, { theme: siteType, color: "primary", isBlock: true, size: "lg", type: "submit", isLoading: loading, disabled: loading, "data-event-category": "Sign Up", "data-event-action": "Confirm Phone Number", "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none" }, t('onboarding.button.continue')),
+                canSkipInit && canSkip >= 3 && (React__default.createElement(Button$1, { theme: siteType, color: "ghost", isBlock: true, size: "lg", onClick: onClose, type: "button" }, t('onboarding.button.skip')))))));
+};
+
+const PhoneOtpForm = ({ onSubmit: _onSubmit, phone: phoneProp, onResendCode, otpError, onClose, loading, 
+// onBack,
+canSkip: canSkipInit, isWhatsApp, }) => {
+    const { sharedData: { phone: phoneContext, retryPhoneCount }, setSharedData, prevStep, siteType, isMarryBaby, nextStep, } = useContext(OnboardingContext);
+    const phone = phoneProp || phoneContext || '';
+    const [seconds, setSeconds] = useState(30);
+    const interval = useInterval(() => setSeconds((s) => s - 1), 1000);
+    const [canSkip, handlers] = useCounter(0, { min: 0, max: 3 });
+    const preventClickRef = useRef(true);
+    const { t } = useTranslations();
+    useEffect(() => {
+        interval.start();
+        return interval.stop;
+    }, []);
+    useEffect(() => {
+        if (seconds === 0) {
+            interval.stop();
+            preventClickRef.current = false;
+        }
+    }, [seconds]);
+    const form = useForm({
+        initialValues: {
+            otp: '',
+        },
+        validate: yupResolver(otpSchema(t)),
+    });
+    useEffect(() => {
+        if (otpError)
+            form.setFieldError('otp', otpError);
+    }, [otpError]);
+    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            handlers.increment();
+            const error = yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values.otp));
+            !error && nextStep();
+        }
+        catch (err) {
+            console.error(err);
+        }
+    });
+    const onError = (fieldErrors) => {
+        console.log(fieldErrors);
+    };
+    const throttleResendCode = useMemo(() => {
+        return throttle(() => {
+            if (preventClickRef.current)
+                return;
+            handlers.increment();
+            setSeconds(30);
+            onResendCode === null || onResendCode === void 0 ? void 0 : onResendCode(phone);
+            interval.start();
+            preventClickRef.current = true;
+        }, 1000, { trailing: false });
+    }, [phone, onResendCode, interval]);
+    const onBack = () => {
+        if (retryPhoneCount >= 2)
+            return;
+        setSharedData((d) => (Object.assign(Object.assign({}, d), { retryPhoneCount: d.retryPhoneCount + 1 })));
+        prevStep();
+    };
+    const outOfEdit = retryPhoneCount >= 2;
+    const phoneEleStr = `<b style="color:${theme.colors.gray800}">${phone
+        .slice(0, -3)
+        .replace(/./g, 'x')
+        .concat(phone.slice(-3))}</b>`;
+    return (React__default.createElement(StyledOtpForm, { heading: isWhatsApp ? (React__default.createElement(Flex, { align: 'center', justify: 'center', gap: rem(8) },
+            React__default.createElement("img", { style: { width: rem(24) }, loading: "lazy", src: CommonGAssets.getAssetPath('whatsapp.svg'), alt: "whatsapp" }),
+            React__default.createElement("span", null, t('onboarding.otpWhatsapps.heading')))) : (t('onboarding.otpForm.heading')), description: React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: t(isWhatsApp
+                        ? 'onboarding.otpWhatsapps.description'
+                        : 'onboarding.otpForm.description', {
+                        phone: phoneEleStr,
+                    }),
+                } }),
+            !outOfEdit && (React__default.createElement("svg", { onClick: onBack, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "otp-description-edit-icon" },
+                React__default.createElement("path", { d: "M12.7812 1.33337C12.2987 1.33337 11.8162 1.51712 11.4479 1.88546L10.6667 2.66671L13.3333 5.33337L14.1146 4.55212C14.8506 3.81612 14.8506 2.62212 14.1146 1.88546C13.7463 1.51712 13.2638 1.33337 12.7812 1.33337ZM9.66667 3.66671L2 11.3334V14H4.66667L12.3333 6.33337L9.66667 3.66671Z", fill: "#ADB3BC" })))) },
+        React__default.createElement(FormProvider, { form: form },
+            React__default.createElement("form", { onSubmit: form.onSubmit(onSubmit, onError) },
+                React__default.createElement(DynamicForm, { inputOrder: ['otp'] }),
+                React__default.createElement("div", { className: "resend" },
+                    React__default.createElement(Text, { size: "p4", color: theme.colors.gray400 }, t('onboarding.otpForm.notReceiveOTP')),
+                    React__default.createElement(Text, { as: "a", size: "p4", color: isMarryBaby ? theme.mbColors.pink : theme.colors.primaryBase, onClick: throttleResendCode }, t('onboarding.otpForm.resendCode', { seconds }))),
+                React__default.createElement(Button$1, { theme: siteType, color: "primary", isBlock: true, size: "lg", type: "submit", isLoading: loading, disabled: loading, "data-event-category": isWhatsApp ? 'OTP' : 'Sign Up', "data-event-action": isWhatsApp
+                        ? 'Whatsapp - OTP verified Click'
+                        : 'Confirm Phone Number', "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none" }, t('onboarding.button.continue')),
+                canSkipInit && canSkip >= 3 && (React__default.createElement(Button$1, { theme: siteType, color: "ghost", isBlock: true, size: "lg", onClick: onClose, type: "button" }, t('onboarding.button.skip')))))));
+};
+
+const onboardingEmailSchema = (t) => yup.object().shape({
+    email: yup
+        .string()
+        .required(t('onboarding.errorMessage.requiredEmail'))
+        .email(t('onboarding.errorMessage.invalidEmail'))
+        .default(''),
+    name: yup.string().required(t('onboarding.errorMessage.requiredName')),
+});
+
+const StyledFormInner = styled.div `
   margin-top: 70px;
   display: flex;
   flex-direction: column;
@@ -199,7 +758,8 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   &.similac {
     margin-top: 16px;
   }
-`,Me=Z(g)`
+`;
+const StyledOnboarding = styled(Container) `
   &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {
     display: flex;
     flex-direction: column;
@@ -211,7 +771,7 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   .header {
     margin-bottom: 32px;
     text-align: center;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 16px;
     }
   }
@@ -240,13 +800,97 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   .form-button {
     width: 100%;
   }
-`,Pe=Z.img`
+`;
+const StyledThumb = styled.img `
   margin-bottom: 38px;
-`,Oe=t=>{var n,{heading:o,description:a,children:i,className:l,imgSrc:s,hiddenLogo:m=!1}=t,d=_(t,["heading","description","children","className","imgSrc","hiddenLogo"]);const{isMarryBaby:c,siteType:p}=r(ne);return e.createElement(Me,Object.assign({},d,{className:`hhg-comp-onboarding-container ${l}`,size:"sm"}),!m&&e.createElement($,{type:c?p:(null===(n=j[process.env.UNIFY_LOCALE])||void 0===n?void 0:n.LOGO_TYPE)||"hellobacsi"}),e.createElement(je,{className:m?"similac":""},s&&e.createElement(Pe,{src:s,loading:"lazy"}),e.createElement("div",{className:"header"},e.createElement(u,{order:3},o),e.createElement(O,{size:"p3",mt:8,color:k.colors.gray600},a)),i))},ke=Z(ve)`
+`;
+
+const OnboardingUI = (_a) => {
+    var _b;
+    var { heading, description, children, className, imgSrc, hiddenLogo = false } = _a, rest = __rest(_a, ["heading", "description", "children", "className", "imgSrc", "hiddenLogo"]);
+    const { isMarryBaby, siteType } = useContext(OnboardingContext);
+    return (React__default.createElement(StyledOnboarding, Object.assign({}, rest, { className: `hhg-comp-onboarding-container ${className}`, size: "sm" }),
+        !hiddenLogo && (React__default.createElement(LogoIcon, { type: isMarryBaby
+                ? siteType
+                : (((_b = LOCALE_SPECS[process.env.UNIFY_LOCALE]) === null || _b === void 0 ? void 0 : _b.LOGO_TYPE) ||
+                    'hellobacsi') })),
+        React__default.createElement(StyledFormInner, { className: hiddenLogo ? 'similac' : '' },
+            imgSrc && React__default.createElement(StyledThumb, { src: imgSrc, loading: "lazy" }),
+            React__default.createElement("div", { className: "header" },
+                React__default.createElement(Title, { order: 3 }, heading),
+                React__default.createElement(Text, { size: "p3", mt: 8, color: theme.colors.gray600 }, description)),
+            children)));
+};
+
+const PersonalInfoForm = ({ onClose, onSubmit, canSkip, loading, errorMessage, initialData, }) => {
+    const { t, locale } = useTranslations();
+    const { siteType, isMarryBaby, setSharedData, nextStep } = useContext(OnboardingContext);
+    const form = useForm({
+        validate: yupResolver(onboardingEmailSchema(t)),
+    });
+    const onError = (fieldErrors) => {
+        console.log({ fieldErrors });
+    };
+    useEffect(() => {
+        form.setValues(Object.assign(Object.assign({ gender: '0' }, initialData), ((initialData === null || initialData === void 0 ? void 0 : initialData.birthday) && {
+            birthday: new Date(initialData.birthday),
+        })));
+    }, [initialData]);
+    useEffect(() => {
+        if (errorMessage)
+            form.setFieldError('email', errorMessage);
+    }, [errorMessage]);
+    return (React__default.createElement(OnboardingUI, { heading: t('onboarding.formEmail.heading'), description: t('onboarding.formEmail.description', {
+            site: isMarryBaby
+                ? 'Marry Baby'
+                : LOCALE_SPECS[locale].SITE_NAME_FORMATTED,
+        }) },
+        React__default.createElement(FormProvider, { form: form },
+            React__default.createElement("form", { className: "form", onSubmit: form.onSubmit((values) => __awaiter(void 0, void 0, void 0, function* () {
+                    setSharedData((d) => (Object.assign(Object.assign({}, d), values)));
+                    const error = yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, values), { birthday: values.birthday && format(values.birthday, 'yyyy-MM-dd') })));
+                    !error && nextStep();
+                }), onError) },
+                React__default.createElement(DynamicForm, { inputOrder: ['full_name', 'email', 'dob', 'gender'] }),
+                React__default.createElement(Button$1, { color: "primary", isBlock: true, size: "lg", type: "submit", theme: siteType, isLoading: loading, disabled: loading }, t('onboarding.button.continue')),
+                canSkip && (React__default.createElement(Button$1, { theme: siteType, color: "ghost", isBlock: true, size: "lg", onClick: onClose, type: "button" }, t('onboarding.button.skip')))))));
+};
+
+const OnboardingProvider = ({ children, siteType, setSharedData: _setSharedData, }) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const [maxStep, setMaxStep] = useState(0);
+    const [sharedData, setSharedData] = useState({});
+    const nextStep = () => currentStep + 1 <= maxStep && setCurrentStep(currentStep + 1);
+    const prevStep = () => currentStep - 1 >= 0 && setCurrentStep(currentStep - 1);
+    useEffect(() => {
+        _setSharedData === null || _setSharedData === void 0 ? void 0 : _setSharedData(sharedData);
+    }, [sharedData, _setSharedData]);
+    return (React__default.createElement(OnboardingContext.Provider, { value: {
+            currentStep,
+            setCurrentStep,
+            setMaxStep,
+            nextStep,
+            prevStep,
+            siteType,
+            isMarryBaby: siteType === 'marryBaby',
+            sharedData,
+            setSharedData,
+        } }, children));
+};
+
+const ResultScreen = (_a) => {
+    var { onClose } = _a, rest = __rest(_a, ["onClose"]);
+    const { t } = useTranslations();
+    const { siteType } = useContext(OnboardingContext);
+    return (React__default.createElement(OnboardingUI, Object.assign({}, rest),
+        React__default.createElement(Button$1, { theme: siteType, size: "lg", onClick: onClose, className: "form-button" }, t('onboarding.button.continue'))));
+};
+
+const StyledOnboardingForm$1 = styled(Onboarding$1) `
   .phone-input {
     width: 100%;
     margin-bottom: 32px;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 16px;
     }
     .PhoneInput {
@@ -262,11 +906,91 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   &:not([data-active='true']) {
     display: none !important;
   }
-`,Fe=(e,t)=>U.object().shape({phone:U.string().required(e("onboarding.updatePhone.error")).default(""),name:U.string().required(e("onboarding.errorMessage.requiredName")),email:U.string().required(e("onboarding.errorMessage.requiredEmail")).email(e("onboarding.errorMessage.invalidEmail")).default(""),address:U.mixed().required(e("onboarding.similac.address.error")),term:t?U.bool():U.bool().oneOf([!0],e("onboarding.similac.term.error"))}),Be=Z(ve)`
+`;
+
+const similacOnboardingSchema = (t, optionalTerm) => yup.object().shape({
+    phone: yup.string().required(t('onboarding.updatePhone.error')).default(''),
+    name: yup.string().required(t('onboarding.errorMessage.requiredName')),
+    email: yup
+        .string()
+        .required(t('onboarding.errorMessage.requiredEmail'))
+        .email(t('onboarding.errorMessage.invalidEmail'))
+        .default(''),
+    address: yup.mixed().required(t('onboarding.similac.address.error')),
+    term: optionalTerm
+        ? yup.bool()
+        : yup.bool().oneOf([true], t('onboarding.similac.term.error')),
+});
+
+const SimilacOnboardingForm = (_a) => {
+    var { onClose, onSubmit: _onSubmit, canSkip = true, customFormTexts, customTerms, defaultValues, isActive } = _a, rest = __rest(_a, ["onClose", "onSubmit", "canSkip", "customFormTexts", "customTerms", "defaultValues", "isActive"]);
+    const { t } = useTranslations();
+    const { nextStep, setSharedData, sharedData } = useContext(OnboardingContext);
+    const { isMobile } = useScreenSize();
+    const form = useForm({
+        initialValues: {
+            term: false,
+            phone: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.phone) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.phone) || '',
+            email: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.email) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) || '',
+            name: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.name) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.name) || '',
+        },
+        validate: yupResolver(similacOnboardingSchema(t, !customTerms)),
+    });
+    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values));
+            setSharedData((d) => (Object.assign(Object.assign({}, d), { phone: values.phone, email: values.email, name: values.name })));
+            nextStep();
+        }
+        catch (err) {
+            console.error(err);
+        }
+    });
+    const onError = (fieldErrors) => {
+        console.log(fieldErrors);
+    };
+    const inputOrder = (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email)
+        ? ['full_name', 'phone', 'address', 'term']
+        : ['full_name', 'email', 'phone', 'address', 'term'];
+    return (React__default.createElement(StyledOnboardingForm$1, Object.assign({ heading: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.heading) || t('onboarding.updatePhone.heading'), description: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.description) || t('onboarding.updatePhone.description'), hiddenLogo: isMobile, "data-active": isActive }, rest),
+        React__default.createElement(FormProvider, { form: form },
+            React__default.createElement("form", { style: {
+                    width: '100%',
+                }, onSubmit: form.onSubmit(onSubmit, onError) },
+                React__default.createElement(DynamicForm, { inputOrder: inputOrder, withSimilac: true, customTerms: customTerms }),
+                React__default.createElement(Button, { fullWidth: true, size: "lg", type: "submit", "data-event-category": "Sign Up", "data-event-action": "Update Phone Number", "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none" }, t('onboarding.button.continue')),
+                canSkip && (React__default.createElement(Button, { variant: "ghost", fullWidth: true, size: "lg", onClick: onClose, type: "button" }, t('onboarding.button.skip')))))));
+};
+
+const OnboardingStepRenderer = ({ children, onStepChange }) => {
+    const { currentStep, setMaxStep } = useContext(OnboardingContext);
+    const childrenCount = React__default.Children.count(children);
+    useEffect(() => {
+        onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(currentStep);
+    }, [currentStep]);
+    useEffect(() => {
+        setMaxStep(childrenCount - 1);
+    }, [childrenCount]);
+    return (React__default.createElement(React__default.Fragment, null, flattenChildren(children).map((element, idx) => {
+        const active = idx === currentStep;
+        return (React__default.createElement(Fragment, { key: idx }, !React__default.isValidElement(element)
+            ? active
+                ? element
+                : null
+            : element.props.alwaysRender || active
+                ? React__default.cloneElement(element, {
+                    isActive: idx === currentStep,
+                    stepIndex: idx,
+                })
+                : null));
+    })));
+};
+
+const StyledOnboardingForm = styled(Onboarding$1) `
   .phone-input {
     width: 100%;
     margin-bottom: 32px;
-    ${z.mbDown} {
+    ${MediaQueries.mbDown} {
       margin-bottom: 16px;
     }
     .PhoneInput {
@@ -282,4 +1006,106 @@ import e,{createContext as t,forwardRef as n,useContext as r,useImperativeHandle
   &:not([data-active='true']) {
     display: none !important;
   }
-`,ze=e=>U.object().shape({password:U.string().required(e("onboarding.errorMessage.requiredPassword")).min(8,e("onboarding.errorMessage.minLength",{length:8})).matches(/.*[A-Z].*/,e("onboarding.errorMessage.passWithPattern")).default(""),confirmPassword:U.string().required(e("onboarding.errorMessage.requiredConfirmPassword")).oneOf([U.ref("password"),null],e("onboarding.errorMessage.passNotMatch")).default("")}),Ne={Provider:({children:t,siteType:n,setSharedData:r})=>{const[o,i]=a(0),[s,m]=a(0),[d,c]=a({});return l((()=>{null==r||r(d)}),[d,r]),e.createElement(ne.Provider,{value:{currentStep:o,setCurrentStep:i,setMaxStep:m,nextStep:()=>o+1<=s&&i(o+1),prevStep:()=>o-1>=0&&i(o-1),siteType:n,isMarryBaby:"marryBaby"===n,sharedData:d,setSharedData:c}},t)},Modal:t=>{var{children:n,withSimilac:o,banner:a,withPortal:i}=t,l=_(t,["children","withSimilac","banner","withPortal"]);const{isMobile:s}=w(),{isMarryBaby:m}=r(ne),{t:d}=H();if(i&&"undefined"==typeof window)return null;const c=e.createElement(de,Object.assign({},l),e.createElement(ce,null,e.createElement(p,{sx:{[z.mbDown]:{margin:0},".mantine-Grid-col":{[z.mbDown]:{padding:0}}}},e.createElement(p.Col,{span:"object"!=typeof a&&!o||s?12:6,order:o?2:1,orderMd:o?1:2,sx:{zIndex:o?99:void 0}},e.createElement(pe,{"data-similac":o,"data-has-banner":"object"==typeof a},n)),a&&"object"==typeof a&&!o&&e.createElement(p.Col,{span:s?12:6,order:1,orderMd:2},e.createElement(ue,null,e.createElement(ge,{"data-is-marry-baby":m},e.createElement(he,null,a.heading&&e.createElement(u,{order:1,mb:24},a.heading),a.description&&e.createElement(O,{size:"p1",color:k.colors.gray800},d("onboarding.welcomeScreen.content"))),e.createElement(be,null,a.imgSrc?e.createElement("img",{src:a.imgSrc,loading:"lazy"}):a.imgComponent?a.imgComponent:null)))),a&&"object"==typeof a&&o&&(a.imgSrc||a.imgComponent)&&e.createElement(p.Col,{span:"auto",order:1,orderMd:2},e.createElement(be,{className:"similac"},a.imgSrc?e.createElement("img",{src:a.imgSrc,loading:"lazy"}):a.imgComponent?a.imgComponent:null)))));return i?G(c,N()):c},Form:({onClose:t,onSubmit:n,canSkip:o=!0,customFormTexts:a,isActive:i,submitProps:l,submitLabel:s,skipProps:m,isWhatsApp:d})=>{const{t:c}=H(),{sharedData:p,setSharedData:u,nextStep:g}=r(ne),h=ae({initialValues:{phone:(null==p?void 0:p.phone)||""},validate:A(Ce(c))});return e.createElement(ye,{heading:(null==a?void 0:a.heading)||c("onboarding.updatePhone.heading"),description:(null==a?void 0:a.description)||c(d?"onboarding.updateWhatsapp.description":"onboarding.updatePhone.description"),"data-active":i},e.createElement(re,{form:h},e.createElement("form",{onSubmit:h.onSubmit((e=>q(void 0,void 0,void 0,(function*(){try{u((t=>Object.assign(Object.assign({},t),{phone:e.phone}))),yield null==n?void 0:n(e.phone),g()}catch(e){console.error(e)}}))),(e=>{console.log(e)}))},e.createElement(le,{inputOrder:["phone"]}),e.createElement(S,Object.assign({variant:"primary",fullWidth:!0,size:"lg"},d&&{leftIcon:e.createElement(K.WhatsApp,{size:18,useCurrentColor:!0})},l,{type:"submit","data-event-category":d?"OTP":"Sign Up","data-event-action":d?"Whatsapp - Fill phone and continue Click":"Update Phone Number","data-event-label":"undefined"!=typeof window?window.location.href:"",className:"pointer-event-child-none"}),s||c(d?"onboarding.updateWhatsapp.submitLabel":"onboarding.button.continue")),o&&e.createElement(S,Object.assign({variant:"ghost",fullWidth:!0,size:"lg"},d&&{dataEventCategory:"OTP",dataEventAction:"Whatsapp - Skip fill phone Click",dataEventLabel:"undefined"!=typeof window?window.location.href:""},m,{onClick:t,type:"button"}),c("onboarding.button.skip")))))},OtpForm:{Email:({onSubmit:t,email:n,onResendCode:o,otpError:m,onClose:d,loading:c,canSkip:p})=>{const{sharedData:{email:u,retryEmailCount:g},setSharedData:h,prevStep:b,siteType:E,isMarryBaby:f,nextStep:L}=r(ne),v=n||u||"",[y,C]=a(30),x=F((()=>C((e=>e-1))),1e3),[w,S]=B(0,{min:0,max:3}),j=i(!0),{t:M}=H();l((()=>(x.start(),x.stop)),[]),l((()=>{0===y&&(x.stop(),j.current=!1)}),[y]);const P=ae({initialValues:{otp:""},validate:A(we(M))});l((()=>{m&&P.setFieldError("otp",m)}),[m]);const O=s((()=>J((()=>{j.current||(S.increment(),C(30),null==o||o(v),x.start(),j.current=!0)}),1e3,{trailing:!1})),[v,o,x]),z=g>=2;return e.createElement(xe,{heading:M("onboarding.otpForm.heading"),description:e.createElement(e.Fragment,null,e.createElement("span",{dangerouslySetInnerHTML:{__html:M("onboarding.otpForm.descriptionEmail",{email:`<b style="color:${k.colors.gray800}">${I(v)}</b>`})}}),!z&&e.createElement("svg",{onClick:()=>{g>=2||(h((e=>Object.assign(Object.assign({},e),{retryEmailCount:e.retryEmailCount+1}))),b())},width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",className:"otp-description-edit-icon"},e.createElement("path",{d:"M12.7812 1.33337C12.2987 1.33337 11.8162 1.51712 11.4479 1.88546L10.6667 2.66671L13.3333 5.33337L14.1146 4.55212C14.8506 3.81612 14.8506 2.62212 14.1146 1.88546C13.7463 1.51712 13.2638 1.33337 12.7812 1.33337ZM9.66667 3.66671L2 11.3334V14H4.66667L12.3333 6.33337L9.66667 3.66671Z",fill:"#ADB3BC"})))},e.createElement(re,{form:P},e.createElement("form",{onSubmit:P.onSubmit((e=>q(void 0,void 0,void 0,(function*(){try{S.increment();!(yield null==t?void 0:t(e.otp))&&L()}catch(e){console.error(e)}}))),(e=>{console.log(e)}))},e.createElement(le,{inputOrder:["otp"]}),e.createElement("div",{className:"resend"},e.createElement(X,{size:"p4",color:k.colors.gray400},M("onboarding.otpForm.notReceiveOTP")),e.createElement(X,{as:"a",size:"p4",color:f?k.mbColors.pink:k.colors.primaryBase,onClick:O},M("onboarding.otpForm.resendCode",{seconds:y}))),e.createElement(Q,{theme:E,color:"primary",isBlock:!0,size:"lg",type:"submit",isLoading:c,disabled:c,"data-event-category":"Sign Up","data-event-action":"Confirm Phone Number","data-event-label":"undefined"!=typeof window?window.location.href:"",className:"pointer-event-child-none"},M("onboarding.button.continue")),p&&w>=3&&e.createElement(Q,{theme:E,color:"ghost",isBlock:!0,size:"lg",onClick:d,type:"button"},M("onboarding.button.skip")))))},Phone:({onSubmit:t,phone:n,onResendCode:o,otpError:m,onClose:d,loading:c,canSkip:p,isWhatsApp:u})=>{const{sharedData:{phone:g,retryPhoneCount:E},setSharedData:f,prevStep:L,siteType:v,isMarryBaby:y,nextStep:C}=r(ne),x=n||g||"",[w,S]=a(30),j=F((()=>S((e=>e-1))),1e3),[M,z]=B(0,{min:0,max:3}),N=i(!0),{t:T}=H();l((()=>(j.start(),j.stop)),[]),l((()=>{0===w&&(j.stop(),N.current=!1)}),[w]);const I=ae({initialValues:{otp:""},validate:A(we(T))});l((()=>{m&&I.setFieldError("otp",m)}),[m]);const D=s((()=>J((()=>{N.current||(z.increment(),S(30),null==o||o(x),j.start(),N.current=!0)}),1e3,{trailing:!1})),[x,o,j]),Z=E>=2,_=`<b style="color:${k.colors.gray800}">${x.slice(0,-3).replace(/./g,"x").concat(x.slice(-3))}</b>`;return e.createElement(xe,{heading:u?e.createElement(h,{align:"center",justify:"center",gap:b(8)},e.createElement("img",{style:{width:b(24)},loading:"lazy",src:P.getAssetPath("whatsapp.svg"),alt:"whatsapp"}),e.createElement("span",null,T("onboarding.otpWhatsapps.heading"))):T("onboarding.otpForm.heading"),description:e.createElement(e.Fragment,null,e.createElement("span",{dangerouslySetInnerHTML:{__html:T(u?"onboarding.otpWhatsapps.description":"onboarding.otpForm.description",{phone:_})}}),!Z&&e.createElement("svg",{onClick:()=>{E>=2||(f((e=>Object.assign(Object.assign({},e),{retryPhoneCount:e.retryPhoneCount+1}))),L())},width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",className:"otp-description-edit-icon"},e.createElement("path",{d:"M12.7812 1.33337C12.2987 1.33337 11.8162 1.51712 11.4479 1.88546L10.6667 2.66671L13.3333 5.33337L14.1146 4.55212C14.8506 3.81612 14.8506 2.62212 14.1146 1.88546C13.7463 1.51712 13.2638 1.33337 12.7812 1.33337ZM9.66667 3.66671L2 11.3334V14H4.66667L12.3333 6.33337L9.66667 3.66671Z",fill:"#ADB3BC"})))},e.createElement(re,{form:I},e.createElement("form",{onSubmit:I.onSubmit((e=>q(void 0,void 0,void 0,(function*(){try{z.increment();!(yield null==t?void 0:t(e.otp))&&C()}catch(e){console.error(e)}}))),(e=>{console.log(e)}))},e.createElement(le,{inputOrder:["otp"]}),e.createElement("div",{className:"resend"},e.createElement(O,{size:"p4",color:k.colors.gray400},T("onboarding.otpForm.notReceiveOTP")),e.createElement(O,{as:"a",size:"p4",color:y?k.mbColors.pink:k.colors.primaryBase,onClick:D},T("onboarding.otpForm.resendCode",{seconds:w}))),e.createElement(Q,{theme:v,color:"primary",isBlock:!0,size:"lg",type:"submit",isLoading:c,disabled:c,"data-event-category":u?"OTP":"Sign Up","data-event-action":u?"Whatsapp - OTP verified Click":"Confirm Phone Number","data-event-label":"undefined"!=typeof window?window.location.href:"",className:"pointer-event-child-none"},T("onboarding.button.continue")),p&&M>=3&&e.createElement(Q,{theme:v,color:"ghost",isBlock:!0,size:"lg",onClick:d,type:"button"},T("onboarding.button.skip")))))}},PersonalInfoForm:({onClose:t,onSubmit:n,canSkip:o,loading:a,errorMessage:i,initialData:s})=>{const{t:m,locale:d}=H(),{siteType:c,isMarryBaby:p,setSharedData:u,nextStep:g}=r(ne),h=ae({validate:A(Se(m))});return l((()=>{h.setValues(Object.assign(Object.assign({gender:"0"},s),(null==s?void 0:s.birthday)&&{birthday:new Date(s.birthday)}))}),[s]),l((()=>{i&&h.setFieldError("email",i)}),[i]),e.createElement(Oe,{heading:m("onboarding.formEmail.heading"),description:m("onboarding.formEmail.description",{site:p?"Marry Baby":j[d].SITE_NAME_FORMATTED})},e.createElement(re,{form:h},e.createElement("form",{className:"form",onSubmit:h.onSubmit((e=>q(void 0,void 0,void 0,(function*(){u((t=>Object.assign(Object.assign({},t),e)));!(yield null==n?void 0:n(Object.assign(Object.assign({},e),{birthday:e.birthday&&ee(e.birthday,"yyyy-MM-dd")})))&&g()}))),(e=>{console.log({fieldErrors:e})}))},e.createElement(le,{inputOrder:["full_name","email","dob","gender"]}),e.createElement(Q,{color:"primary",isBlock:!0,size:"lg",type:"submit",theme:c,isLoading:a,disabled:a},m("onboarding.button.continue")),o&&e.createElement(Q,{theme:c,color:"ghost",isBlock:!0,size:"lg",onClick:t,type:"button"},m("onboarding.button.skip")))))},ResultScreen:t=>{var{onClose:n}=t,o=_(t,["onClose"]);const{t:a}=H(),{siteType:i}=r(ne);return e.createElement(Oe,Object.assign({},o),e.createElement(Q,{theme:i,size:"lg",onClick:n,className:"form-button"},a("onboarding.button.continue")))},SimilacForm:t=>{var{onClose:n,onSubmit:o,canSkip:a=!0,customFormTexts:i,customTerms:l,defaultValues:s,isActive:m}=t,d=_(t,["onClose","onSubmit","canSkip","customFormTexts","customTerms","defaultValues","isActive"]);const{t:c}=H(),{nextStep:p,setSharedData:u,sharedData:g}=r(ne),{isMobile:h}=w(),b=ae({initialValues:{term:!1,phone:(null==g?void 0:g.phone)||(null==s?void 0:s.phone)||"",email:(null==g?void 0:g.email)||(null==s?void 0:s.email)||"",name:(null==g?void 0:g.name)||(null==s?void 0:s.name)||""},validate:A(Fe(c,!l))}),E=(null==s?void 0:s.email)?["full_name","phone","address","term"]:["full_name","email","phone","address","term"];return e.createElement(ke,Object.assign({heading:(null==i?void 0:i.heading)||c("onboarding.updatePhone.heading"),description:(null==i?void 0:i.description)||c("onboarding.updatePhone.description"),hiddenLogo:h,"data-active":m},d),e.createElement(re,{form:b},e.createElement("form",{style:{width:"100%"},onSubmit:b.onSubmit((e=>q(void 0,void 0,void 0,(function*(){try{yield null==o?void 0:o(e),u((t=>Object.assign(Object.assign({},t),{phone:e.phone,email:e.email,name:e.name}))),p()}catch(e){console.error(e)}}))),(e=>{console.log(e)}))},e.createElement(le,{inputOrder:E,withSimilac:!0,customTerms:l}),e.createElement(S,{fullWidth:!0,size:"lg",type:"submit","data-event-category":"Sign Up","data-event-action":"Update Phone Number","data-event-label":"undefined"!=typeof window?window.location.href:"",className:"pointer-event-child-none"},c("onboarding.button.continue")),a&&e.createElement(S,{variant:"ghost",fullWidth:!0,size:"lg",onClick:n,type:"button"},c("onboarding.button.skip")))))},FrisoForm:me,UpdatePasswordForm:({onClose:t,onSubmit:n,canSkip:o,errorMessage:a,loading:i})=>{const{t:l}=H(),{nextStep:s}=r(ne),m=ae({initialValues:{password:"",confirmPassword:""},validate:A(ze(l))});return e.createElement(Oe,{heading:l("onboarding.updatePassword.heading"),description:l("onboarding.updatePassword.description")},e.createElement(re,{form:m},e.createElement("form",{className:"form",onSubmit:m.onSubmit((e=>q(void 0,void 0,void 0,(function*(){yield n((null==e?void 0:e.password)||""),!a&&s()}))),(e=>{console.log({fieldErrors:e})}))},e.createElement(le,{inputOrder:["password","confirm_password"]}),e.createElement(Q,{color:"primary",isBlock:!0,size:"lg",type:"submit",isLoading:i,disabled:i},l("onboarding.button.continue")),o&&e.createElement(Q,{color:"ghost",isBlock:!0,size:"lg",onClick:t},l("onboarding.button.skip")),a&&e.createElement(c.Error,{className:"form-error"},a))))},StepRenderer:({children:t,onStepChange:n})=>{const{currentStep:o,setMaxStep:a}=r(ne),i=e.Children.count(t);return l((()=>{null==n||n(o)}),[o]),l((()=>{a(i-1)}),[i]),e.createElement(e.Fragment,null,te(t).map(((t,n)=>{const r=n===o;return e.createElement(m,{key:n},e.isValidElement(t)?t.props.alwaysRender||r?e.cloneElement(t,{isActive:n===o,stepIndex:n}):null:r?t:null)})))},ThankYou:t=>{var{onClose:n,thanksPageInfo:r,isActive:o}=t,a=_(t,["onClose","thanksPageInfo","isActive"]);const{t:i}=H(),{isMobile:l}=w();return e.createElement(Be,Object.assign({heading:"",description:"",hiddenLogo:l,"data-active":o},a),e.createElement(g,{fluid:!0},e.createElement(E,{align:"center",spacing:8,w:"100%",ta:"center"},e.createElement(f,{ratio:1,w:{base:120,md:160}},e.createElement("svg",{width:"160",height:"160",viewBox:"0 0 160 160",fill:"none"},e.createElement("mask",{id:"mask0_4580_96805",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"160",height:"160"},e.createElement("circle",{cx:"80",cy:"80",r:"80",fill:"url(#paint0_radial_4580_96805)"})),e.createElement("g",{mask:"url(#mask0_4580_96805)"},e.createElement("path",{d:"M71.5938 0.45906L76.9763 38.1373C77.0115 38.1373 77.0819 38.1373 77.1171 38.102L82.3589 75.0033L87.5656 38.0666C87.6008 38.0666 87.636 38.0666 87.636 38.0666L92.8426 1.02406C88.6562 0.353123 84.3642 0 80.0018 0C77.1522 0 74.3378 0.141249 71.5938 0.45906Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M131.15 18.5391C125.733 14.0191 119.682 10.1701 113.173 7.20386L97.8699 41.0683C97.9051 41.0683 97.9403 41.1037 97.9403 41.1037L82.4609 75.2859L131.15 18.5391Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M46.4386 64.8334L82.1114 75.3212H81.9707L82.3225 75.4271H82.3577L82.3928 75.3918L82.428 75.4271H82.3928L82.428 75.4624H82.4632L82.6039 75.5331L82.4984 75.4624L118.347 85.9855C118.347 86.0208 118.347 86.0208 118.312 86.0561L158.101 97.8151C159.332 92.2005 160.001 86.3386 160.001 80.3355C160.001 78.6758 159.93 76.9809 159.86 75.3565H119.825C119.825 75.3918 119.825 75.3918 119.825 75.4271L82.4632 75.4624V75.4271L82.6391 75.3918L82.4984 75.4624L82.815 75.3565H82.6391L155.497 53.6394C153.07 46.7182 149.728 40.2208 145.612 34.2883L82.6391 75.2859H82.4984L82.5687 75.2152L82.4632 75.2859L82.4984 75.074L82.428 75.2152V75.2506L82.3928 75.2859V75.2506H82.3225V75.2152L82.2521 75.074L82.2873 75.2506L82.2169 75.2152L82.2521 75.2506H82.1114L15.7614 32.4167C11.2231 38.5258 7.52917 45.341 4.85547 52.6154L46.4386 64.8334ZM82.3225 75.3918V75.4271L82.2169 75.3565L82.3225 75.3918Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M57.8032 46.9301L82.2887 75.2506L66.7741 41.1036L50.556 5.61475C43.6607 8.33379 37.2579 12.0063 31.4531 16.4556L57.8032 46.9301Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M113.877 95.8023L82.5312 75.5684L106.982 103.854C106.946 103.854 106.946 103.889 106.911 103.889L136.005 137.647C141.529 132.209 146.243 125.994 150.042 119.179L113.877 95.8023Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M82.3203 75.427V75.4627H82.356L82.3203 75.427H82.356H82.3203Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M82.2857 75.4623L82.321 75.427H82.2857L82.1445 75.4976L82.2857 75.4623Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M82.2164 75.5684L50.9411 95.9436C50.906 95.9082 50.906 95.8729 50.8708 95.8376L11.3281 121.51C15.4794 128.501 20.6861 134.787 26.7019 140.19L62.5858 98.4507L82.2164 75.5684Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M46.438 86.0559L82.2867 75.3916L0.140721 75.4975C0.0351803 77.0866 0 78.6756 0 80.3C0 86.7975 0.773967 93.1184 2.21636 99.1921L46.438 86.0559C46.438 86.0912 46.438 86.0912 46.438 86.0559Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M82.2507 75.7095L47 153.467C54.2823 156.786 62.1275 159.011 70.3949 160L82.2507 75.7095Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M82.4609 75.7095L94.3519 159.329C102.373 157.881 109.972 155.233 116.938 151.56L82.4609 75.7095Z",fill:"#E0F8EE"}),e.createElement("path",{d:"M82.3203 75.5684L82.3556 75.8509L82.4262 75.5684L82.3556 75.4978L82.3203 75.5684Z",fill:"#E0F8EE"})),e.createElement("path",{d:"M124.694 61.2L124.986 62.1726C125.083 62.6589 125.472 62.9507 125.959 63.1452L126.931 63.437L125.959 63.8261C125.569 63.9234 125.18 64.3124 125.083 64.7015L124.694 65.7714L124.305 64.7015C124.111 64.3124 123.819 64.0206 123.43 63.8261L122.457 63.5343L123.43 63.2425C123.819 63.1452 124.111 62.7562 124.305 62.3671L124.694 61.2Z",fill:"#2D87F3"}),e.createElement("path",{d:"M104.744 34.2856L104.915 34.8571C104.973 35.1428 105.201 35.3142 105.487 35.4285L106.058 35.5999L105.487 35.8285C105.258 35.8856 105.03 36.1142 104.973 36.3428L104.744 36.9714L104.515 36.3428C104.401 36.1142 104.23 35.9428 104.001 35.8285L103.43 35.6571L104.001 35.4856C104.23 35.4285 104.401 35.1999 104.515 34.9714L104.744 34.2856Z",fill:"#00B16A"}),e.createElement("path",{d:"M118.345 38L119.088 40.4C119.431 41.4857 120.288 42.3429 121.317 42.6286L123.717 43.3714L121.259 44.2286C120.231 44.5714 119.488 45.3714 119.145 46.3429L118.288 48.8L117.317 46.2286C116.974 45.2571 116.174 44.5143 115.202 44.1714L112.859 43.3714L115.145 42.5714C116.117 42.2286 116.859 41.4857 117.259 40.5714L118.345 38Z",fill:"#FFB521"}),e.createElement("path",{d:"M41.8846 98.8572L42.056 99.4286C42.1132 99.7143 42.3417 99.8857 42.6275 100L43.1989 100.171L42.6275 100.4C42.3989 100.457 42.1703 100.686 42.1132 100.914L41.8846 101.543L41.656 100.914C41.5417 100.686 41.3703 100.514 41.1417 100.4L40.5703 100.229L41.1417 100.057C41.3703 100 41.5417 99.7715 41.656 99.5429L41.8846 98.8572Z",fill:"#00B16A"}),e.createElement("path",{d:"M64.5717 125.314L65.3145 127.714C65.6574 128.8 66.5145 129.657 67.5431 129.943L69.9431 130.686L67.4859 131.543C66.4574 131.886 65.7145 132.686 65.3717 133.657L64.5145 136.114L63.5431 133.543C63.2002 132.571 62.4002 131.828 61.4288 131.486L59.0859 130.686L61.3717 129.886C62.3431 129.543 63.0859 128.8 63.4859 127.886L64.5717 125.314Z",fill:"#FFB521"}),e.createElement("path",{d:"M80.9708 120.343L81.2565 121.314C81.3708 121.771 81.7708 122.114 82.1708 122.228L83.1993 122.514L82.1708 122.857C81.7708 122.971 81.4279 123.314 81.3136 123.714L80.9708 124.743L80.5708 123.657C80.3993 123.257 80.1136 122.914 79.7136 122.8L78.7422 122.457L79.7136 122.114C80.1136 122 80.3993 121.657 80.5708 121.314L80.9708 120.343Z",fill:"#2D87F3"}),e.createElement("path",{d:"M130.307 98.2856L130.529 99.0426C130.619 99.3988 130.93 99.666 131.242 99.755L132.043 99.9777L131.242 100.245C130.93 100.334 130.663 100.601 130.574 100.913L130.307 101.714L129.995 100.868C129.862 100.557 129.639 100.289 129.327 100.2L128.57 99.9331L129.327 99.666C129.639 99.5769 129.862 99.3098 129.995 99.0426L130.307 98.2856Z",fill:"#00B16A"}),e.createElement("path",{d:"M36.592 64L36.8147 64.757C36.9037 65.1132 37.2154 65.3803 37.5271 65.4694L38.3286 65.692L37.5271 65.9592C37.2154 66.0482 36.9482 66.3154 36.8592 66.6271L36.592 67.4286L36.2803 66.5826C36.1467 66.2709 35.9241 66.0037 35.6124 65.9147L34.8555 65.6475L35.6124 65.3803C35.9241 65.2913 36.1467 65.0241 36.2803 64.757L36.592 64Z",fill:"#FFB521"}),e.createElement("path",{d:"M67.3816 26.8572L67.6734 27.8298C67.7707 28.3161 68.1597 28.6079 68.646 28.8025L69.6187 29.0942L68.646 29.4833C68.257 29.5806 67.8679 29.9696 67.7707 30.3587L67.3816 31.4286L66.9926 30.3587C66.798 29.9696 66.5062 29.6778 66.1172 29.4833L65.1445 29.1915L66.1172 28.8997C66.5062 28.8025 66.798 28.4134 66.9926 28.0243L67.3816 26.8572Z",fill:"#2D87F3"}),e.createElement("path",{d:"M80.0011 108.572C95.7807 108.572 108.573 95.7797 108.573 80.0001C108.573 64.2206 95.7807 51.4287 80.0011 51.4287C64.2216 51.4287 51.4297 64.2206 51.4297 80.0001C51.4297 95.7797 64.2216 108.572 80.0011 108.572Z",fill:"#00B16A"}),e.createElement("path",{d:"M78.5808 89.1451C77.3597 89.147 76.1503 88.908 75.0217 88.4418C73.8932 87.9757 72.8677 87.2914 72.0039 86.4283L68.6389 83.0617C68.1939 82.6009 67.9477 81.9838 67.9532 81.3432C67.9588 80.7027 68.2157 80.0899 68.6687 79.6369C69.1217 79.1839 69.7344 78.927 70.375 78.9214C71.0156 78.9159 71.6327 79.1621 72.0935 79.6071L75.4585 82.9738C75.8649 83.3802 76.3473 83.7025 76.8783 83.9225C77.4093 84.1424 77.9784 84.2556 78.5531 84.2556C79.1278 84.2556 79.6969 84.1424 80.2279 83.9225C80.7589 83.7025 81.2413 83.3802 81.6477 82.9738L102.984 63.6911C103.468 63.2745 104.095 63.0635 104.732 63.1034C105.369 63.1433 105.965 63.4308 106.392 63.9044C106.82 64.3781 107.046 65.0003 107.02 65.6379C106.995 66.2756 106.722 66.8781 106.258 67.3166L85.0046 86.513C84.1599 87.3531 83.1576 88.0181 82.0552 88.4698C80.9528 88.9215 79.7721 89.151 78.5808 89.1451Z",fill:"white"}),e.createElement("defs",null,e.createElement("radialGradient",{id:"paint0_radial_4580_96805",cx:"0",cy:"0",r:"1",gradientUnits:"userSpaceOnUse",gradientTransform:"translate(80 80) rotate(90) scale(80)"},e.createElement("stop",{stopColor:"#C4C4C4"}),e.createElement("stop",{offset:"1",stopColor:"#C4C4C4",stopOpacity:"0"}))))),e.createElement(V,{tag:"h3"},null==r?void 0:r.title),e.createElement(O,{size:"p3",color:"gray.6"},null==r?void 0:r.description),e.createElement(S,{mt:{base:16,md:24},fullWidth:l,size:"lg",onClick:n},i("similac.thankYou.done")))))}};export{le as DynamicForm,Ne as Onboarding,ne as OnboardingContext};
+`;
+
+const ThankYouStepRenderer = (_a) => {
+    var { onClose, thanksPageInfo, isActive } = _a, rest = __rest(_a, ["onClose", "thanksPageInfo", "isActive"]);
+    const { t } = useTranslations();
+    const { isMobile } = useScreenSize();
+    return (React__default.createElement(StyledOnboardingForm, Object.assign({ heading: '', description: '', hiddenLogo: isMobile, "data-active": isActive }, rest),
+        React__default.createElement(Container, { fluid: true },
+            React__default.createElement(Stack, { align: "center", spacing: 8, w: "100%", ta: "center" },
+                React__default.createElement(AspectRatio, { ratio: 1, w: { base: 120, md: 160 } },
+                    React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none" },
+                        React__default.createElement("mask", { id: "mask0_4580_96805", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "160", height: "160" },
+                            React__default.createElement("circle", { cx: "80", cy: "80", r: "80", fill: "url(#paint0_radial_4580_96805)" })),
+                        React__default.createElement("g", { mask: "url(#mask0_4580_96805)" },
+                            React__default.createElement("path", { d: "M71.5938 0.45906L76.9763 38.1373C77.0115 38.1373 77.0819 38.1373 77.1171 38.102L82.3589 75.0033L87.5656 38.0666C87.6008 38.0666 87.636 38.0666 87.636 38.0666L92.8426 1.02406C88.6562 0.353123 84.3642 0 80.0018 0C77.1522 0 74.3378 0.141249 71.5938 0.45906Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M131.15 18.5391C125.733 14.0191 119.682 10.1701 113.173 7.20386L97.8699 41.0683C97.9051 41.0683 97.9403 41.1037 97.9403 41.1037L82.4609 75.2859L131.15 18.5391Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M46.4386 64.8334L82.1114 75.3212H81.9707L82.3225 75.4271H82.3577L82.3928 75.3918L82.428 75.4271H82.3928L82.428 75.4624H82.4632L82.6039 75.5331L82.4984 75.4624L118.347 85.9855C118.347 86.0208 118.347 86.0208 118.312 86.0561L158.101 97.8151C159.332 92.2005 160.001 86.3386 160.001 80.3355C160.001 78.6758 159.93 76.9809 159.86 75.3565H119.825C119.825 75.3918 119.825 75.3918 119.825 75.4271L82.4632 75.4624V75.4271L82.6391 75.3918L82.4984 75.4624L82.815 75.3565H82.6391L155.497 53.6394C153.07 46.7182 149.728 40.2208 145.612 34.2883L82.6391 75.2859H82.4984L82.5687 75.2152L82.4632 75.2859L82.4984 75.074L82.428 75.2152V75.2506L82.3928 75.2859V75.2506H82.3225V75.2152L82.2521 75.074L82.2873 75.2506L82.2169 75.2152L82.2521 75.2506H82.1114L15.7614 32.4167C11.2231 38.5258 7.52917 45.341 4.85547 52.6154L46.4386 64.8334ZM82.3225 75.3918V75.4271L82.2169 75.3565L82.3225 75.3918Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M57.8032 46.9301L82.2887 75.2506L66.7741 41.1036L50.556 5.61475C43.6607 8.33379 37.2579 12.0063 31.4531 16.4556L57.8032 46.9301Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M113.877 95.8023L82.5312 75.5684L106.982 103.854C106.946 103.854 106.946 103.889 106.911 103.889L136.005 137.647C141.529 132.209 146.243 125.994 150.042 119.179L113.877 95.8023Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M82.3203 75.427V75.4627H82.356L82.3203 75.427H82.356H82.3203Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M82.2857 75.4623L82.321 75.427H82.2857L82.1445 75.4976L82.2857 75.4623Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M82.2164 75.5684L50.9411 95.9436C50.906 95.9082 50.906 95.8729 50.8708 95.8376L11.3281 121.51C15.4794 128.501 20.6861 134.787 26.7019 140.19L62.5858 98.4507L82.2164 75.5684Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M46.438 86.0559L82.2867 75.3916L0.140721 75.4975C0.0351803 77.0866 0 78.6756 0 80.3C0 86.7975 0.773967 93.1184 2.21636 99.1921L46.438 86.0559C46.438 86.0912 46.438 86.0912 46.438 86.0559Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M82.2507 75.7095L47 153.467C54.2823 156.786 62.1275 159.011 70.3949 160L82.2507 75.7095Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M82.4609 75.7095L94.3519 159.329C102.373 157.881 109.972 155.233 116.938 151.56L82.4609 75.7095Z", fill: "#E0F8EE" }),
+                            React__default.createElement("path", { d: "M82.3203 75.5684L82.3556 75.8509L82.4262 75.5684L82.3556 75.4978L82.3203 75.5684Z", fill: "#E0F8EE" })),
+                        React__default.createElement("path", { d: "M124.694 61.2L124.986 62.1726C125.083 62.6589 125.472 62.9507 125.959 63.1452L126.931 63.437L125.959 63.8261C125.569 63.9234 125.18 64.3124 125.083 64.7015L124.694 65.7714L124.305 64.7015C124.111 64.3124 123.819 64.0206 123.43 63.8261L122.457 63.5343L123.43 63.2425C123.819 63.1452 124.111 62.7562 124.305 62.3671L124.694 61.2Z", fill: "#2D87F3" }),
+                        React__default.createElement("path", { d: "M104.744 34.2856L104.915 34.8571C104.973 35.1428 105.201 35.3142 105.487 35.4285L106.058 35.5999L105.487 35.8285C105.258 35.8856 105.03 36.1142 104.973 36.3428L104.744 36.9714L104.515 36.3428C104.401 36.1142 104.23 35.9428 104.001 35.8285L103.43 35.6571L104.001 35.4856C104.23 35.4285 104.401 35.1999 104.515 34.9714L104.744 34.2856Z", fill: "#00B16A" }),
+                        React__default.createElement("path", { d: "M118.345 38L119.088 40.4C119.431 41.4857 120.288 42.3429 121.317 42.6286L123.717 43.3714L121.259 44.2286C120.231 44.5714 119.488 45.3714 119.145 46.3429L118.288 48.8L117.317 46.2286C116.974 45.2571 116.174 44.5143 115.202 44.1714L112.859 43.3714L115.145 42.5714C116.117 42.2286 116.859 41.4857 117.259 40.5714L118.345 38Z", fill: "#FFB521" }),
+                        React__default.createElement("path", { d: "M41.8846 98.8572L42.056 99.4286C42.1132 99.7143 42.3417 99.8857 42.6275 100L43.1989 100.171L42.6275 100.4C42.3989 100.457 42.1703 100.686 42.1132 100.914L41.8846 101.543L41.656 100.914C41.5417 100.686 41.3703 100.514 41.1417 100.4L40.5703 100.229L41.1417 100.057C41.3703 100 41.5417 99.7715 41.656 99.5429L41.8846 98.8572Z", fill: "#00B16A" }),
+                        React__default.createElement("path", { d: "M64.5717 125.314L65.3145 127.714C65.6574 128.8 66.5145 129.657 67.5431 129.943L69.9431 130.686L67.4859 131.543C66.4574 131.886 65.7145 132.686 65.3717 133.657L64.5145 136.114L63.5431 133.543C63.2002 132.571 62.4002 131.828 61.4288 131.486L59.0859 130.686L61.3717 129.886C62.3431 129.543 63.0859 128.8 63.4859 127.886L64.5717 125.314Z", fill: "#FFB521" }),
+                        React__default.createElement("path", { d: "M80.9708 120.343L81.2565 121.314C81.3708 121.771 81.7708 122.114 82.1708 122.228L83.1993 122.514L82.1708 122.857C81.7708 122.971 81.4279 123.314 81.3136 123.714L80.9708 124.743L80.5708 123.657C80.3993 123.257 80.1136 122.914 79.7136 122.8L78.7422 122.457L79.7136 122.114C80.1136 122 80.3993 121.657 80.5708 121.314L80.9708 120.343Z", fill: "#2D87F3" }),
+                        React__default.createElement("path", { d: "M130.307 98.2856L130.529 99.0426C130.619 99.3988 130.93 99.666 131.242 99.755L132.043 99.9777L131.242 100.245C130.93 100.334 130.663 100.601 130.574 100.913L130.307 101.714L129.995 100.868C129.862 100.557 129.639 100.289 129.327 100.2L128.57 99.9331L129.327 99.666C129.639 99.5769 129.862 99.3098 129.995 99.0426L130.307 98.2856Z", fill: "#00B16A" }),
+                        React__default.createElement("path", { d: "M36.592 64L36.8147 64.757C36.9037 65.1132 37.2154 65.3803 37.5271 65.4694L38.3286 65.692L37.5271 65.9592C37.2154 66.0482 36.9482 66.3154 36.8592 66.6271L36.592 67.4286L36.2803 66.5826C36.1467 66.2709 35.9241 66.0037 35.6124 65.9147L34.8555 65.6475L35.6124 65.3803C35.9241 65.2913 36.1467 65.0241 36.2803 64.757L36.592 64Z", fill: "#FFB521" }),
+                        React__default.createElement("path", { d: "M67.3816 26.8572L67.6734 27.8298C67.7707 28.3161 68.1597 28.6079 68.646 28.8025L69.6187 29.0942L68.646 29.4833C68.257 29.5806 67.8679 29.9696 67.7707 30.3587L67.3816 31.4286L66.9926 30.3587C66.798 29.9696 66.5062 29.6778 66.1172 29.4833L65.1445 29.1915L66.1172 28.8997C66.5062 28.8025 66.798 28.4134 66.9926 28.0243L67.3816 26.8572Z", fill: "#2D87F3" }),
+                        React__default.createElement("path", { d: "M80.0011 108.572C95.7807 108.572 108.573 95.7797 108.573 80.0001C108.573 64.2206 95.7807 51.4287 80.0011 51.4287C64.2216 51.4287 51.4297 64.2206 51.4297 80.0001C51.4297 95.7797 64.2216 108.572 80.0011 108.572Z", fill: "#00B16A" }),
+                        React__default.createElement("path", { d: "M78.5808 89.1451C77.3597 89.147 76.1503 88.908 75.0217 88.4418C73.8932 87.9757 72.8677 87.2914 72.0039 86.4283L68.6389 83.0617C68.1939 82.6009 67.9477 81.9838 67.9532 81.3432C67.9588 80.7027 68.2157 80.0899 68.6687 79.6369C69.1217 79.1839 69.7344 78.927 70.375 78.9214C71.0156 78.9159 71.6327 79.1621 72.0935 79.6071L75.4585 82.9738C75.8649 83.3802 76.3473 83.7025 76.8783 83.9225C77.4093 84.1424 77.9784 84.2556 78.5531 84.2556C79.1278 84.2556 79.6969 84.1424 80.2279 83.9225C80.7589 83.7025 81.2413 83.3802 81.6477 82.9738L102.984 63.6911C103.468 63.2745 104.095 63.0635 104.732 63.1034C105.369 63.1433 105.965 63.4308 106.392 63.9044C106.82 64.3781 107.046 65.0003 107.02 65.6379C106.995 66.2756 106.722 66.8781 106.258 67.3166L85.0046 86.513C84.1599 87.3531 83.1576 88.0181 82.0552 88.4698C80.9528 88.9215 79.7721 89.151 78.5808 89.1451Z", fill: "white" }),
+                        React__default.createElement("defs", null,
+                            React__default.createElement("radialGradient", { id: "paint0_radial_4580_96805", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(80 80) rotate(90) scale(80)" },
+                                React__default.createElement("stop", { stopColor: "#C4C4C4" }),
+                                React__default.createElement("stop", { offset: "1", stopColor: "#C4C4C4", stopOpacity: "0" }))))),
+                React__default.createElement(Heading, { tag: "h3" }, thanksPageInfo === null || thanksPageInfo === void 0 ? void 0 : thanksPageInfo.title),
+                React__default.createElement(Text, { size: "p3", color: "gray.6" }, thanksPageInfo === null || thanksPageInfo === void 0 ? void 0 : thanksPageInfo.description),
+                React__default.createElement(Button, { mt: { base: 16, md: 24 }, fullWidth: isMobile, size: "lg", onClick: onClose }, t('similac.thankYou.done'))))));
+};
+
+const onboardingUpdatePasswordSchema = (t) => yup.object().shape({
+    password: yup
+        .string()
+        .required(t('onboarding.errorMessage.requiredPassword'))
+        .min(8, t('onboarding.errorMessage.minLength', { length: 8 }))
+        .matches(/.*[A-Z].*/, t('onboarding.errorMessage.passWithPattern'))
+        .default(''),
+    confirmPassword: yup
+        .string()
+        .required(t('onboarding.errorMessage.requiredConfirmPassword'))
+        .oneOf([yup.ref('password'), null], t('onboarding.errorMessage.passNotMatch'))
+        .default(''),
+});
+
+const UpdatePasswordForm = ({ onClose, onSubmit, canSkip, errorMessage, loading, }) => {
+    const { t } = useTranslations();
+    const { nextStep } = useContext(OnboardingContext);
+    const form = useForm({
+        initialValues: {
+            password: '',
+            confirmPassword: '',
+        },
+        validate: yupResolver(onboardingUpdatePasswordSchema(t)),
+    });
+    const onError = (fieldErrors) => {
+        console.log({ fieldErrors });
+    };
+    return (React__default.createElement(OnboardingUI, { heading: t('onboarding.updatePassword.heading'), description: t('onboarding.updatePassword.description') },
+        React__default.createElement(FormProvider, { form: form },
+            React__default.createElement("form", { className: "form", onSubmit: form.onSubmit((values) => __awaiter(void 0, void 0, void 0, function* () {
+                    yield onSubmit((values === null || values === void 0 ? void 0 : values.password) || '');
+                    !errorMessage && nextStep();
+                }), onError) },
+                React__default.createElement(DynamicForm, { inputOrder: ['password', 'confirm_password'] }),
+                React__default.createElement(Button$1, { color: "primary", isBlock: true, size: "lg", type: "submit", isLoading: loading, disabled: loading }, t('onboarding.button.continue')),
+                canSkip && (React__default.createElement(Button$1, { color: "ghost", isBlock: true, size: "lg", onClick: onClose }, t('onboarding.button.skip'))),
+                errorMessage && (React__default.createElement(Input.Error, { className: "form-error" }, errorMessage))))));
+};
+
+const Onboarding = {
+    Provider: OnboardingProvider,
+    Modal: OnboardingModal,
+    Form: DefaultOnboardingForm,
+    OtpForm: {
+        Email: EmailOtpForm,
+        Phone: PhoneOtpForm,
+    },
+    PersonalInfoForm: PersonalInfoForm,
+    ResultScreen: ResultScreen,
+    SimilacForm: SimilacOnboardingForm,
+    FrisoForm: FrisoOnboardingForm$1,
+    UpdatePasswordForm: UpdatePasswordForm,
+    StepRenderer: OnboardingStepRenderer,
+    ThankYou: ThankYouStepRenderer,
+};
+
+export { DynamicForm, Onboarding, OnboardingContext };