@hhgtech/hhg-components 1.23.87 → 1.23.88-beta-1

package/build/esm/{index-c780a03a.js → index-7536cd01.js}

@@ -1 +1 @@
-import{a as n,d as e,_ as o,b as r,c as t}from"./tslib.es6-60545877.js";import i,{createContext as a,useContext as s}from"react";import{Container as p,Input as m}from"@mantine/core";import{useForm as d,yupResolver as l}from"@mantine/form";import{P as c}from"./index-3fbce6ed.js";import*as g from"yup";import u from"styled-components";import{L as h}from"./logoIcon-f5d56e3a.js";import{L as f}from"./index-6dca5da6.js";import{T as b}from"./index-2dbc1afc.js";import{M as x}from"./utils-848ab47e.js";import{H as w}from"./index-983881c1.js";import{t as y}from"./theme-d34fcb72.js";import{B as v}from"./index-48727878.js";import{L as E}from"./Locale-4247ffa0.js";import{u as P}from"./useTranslations-a927a379.js";var j,M,I,z,N,q,L,T=a({}),C=u.div(j||(j=n([""],[""]))),S=u(b)(M||(M=n(["\n  margin-top: 8px;\n"],["\n  margin-top: 8px;\n"]))),F=u.div(I||(I=n(["\n  margin-top: 70px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"],["\n  margin-top: 70px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"]))),O=u(p)(z||(z=n(["\n  &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    max-width: 520px;\n  }\n  .header {\n    margin-bottom: 32px;\n    text-align: center;\n    "," {\n      margin-bottom: 16px;\n    }\n  }\n\n  .input-control {\n    width: 100%;\n\n    label {\n      font-size: 12px;\n      line-height: 18px;\n      font-weight: 600;\n      margin-bottom: 6px;\n    }\n\n    input {\n      height: 42px;\n      line-height: 42px;\n      font-size: 14px;\n    }\n  }\n  .radio-group,\n  .input-control {\n    margin-bottom: 16px;\n  }\n  .form {\n    width: 100%;\n  }\n\n  .form-error {\n    margin-top: 32px;\n    font-size: 14px;\n  }\n\n  .field-error {\n    margin-top: 10px;\n    font-size: 14px;\n  }\n\n  .form-button {\n    width: 100%;\n  }\n"],["\n  &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    max-width: 520px;\n  }\n  .header {\n    margin-bottom: 32px;\n    text-align: center;\n    "," {\n      margin-bottom: 16px;\n    }\n  }\n\n  .input-control {\n    width: 100%;\n\n    label {\n      font-size: 12px;\n      line-height: 18px;\n      font-weight: 600;\n      margin-bottom: 6px;\n    }\n\n    input {\n      height: 42px;\n      line-height: 42px;\n      font-size: 14px;\n    }\n  }\n  .radio-group,\n  .input-control {\n    margin-bottom: 16px;\n  }\n  .form {\n    width: 100%;\n  }\n\n  .form-error {\n    margin-top: 32px;\n    font-size: 14px;\n  }\n\n  .field-error {\n    margin-top: 10px;\n    font-size: 14px;\n  }\n\n  .form-button {\n    width: 100%;\n  }\n"])),x.mbDown),k=u.img(N||(N=n(["\n  margin-bottom: 38px;\n"],["\n  margin-bottom: 38px;\n"]))),H=function(n){var r,t=n.heading,a=n.description,p=n.children,m=n.className,d=n.imgSrc,l=e(n,["heading","description","children","className","imgSrc"]),c=s(T),g=c.isMarryBaby,u=c.siteType;return i.createElement(O,o({},l,{className:"hhg-comp-onboarding-container ".concat(m),size:"sm"}),i.createElement(h,{type:g?u:(null===(r=f[process.env.UNIFY_LOCALE])||void 0===r?void 0:r.LOGO_TYPE)||"hellobacsi"}),i.createElement(F,null,d&&i.createElement(k,{src:d,loading:"lazy"}),i.createElement(C,{className:"header"},i.createElement(w,{tag:"h3"},t),i.createElement(S,{size:"p3",color:y.colors.gray600},a)),p))},B=function(n){return g.object().shape({phone:g.string().required(n("onboarding.updatePhone.error")).default("")})},U=function(n){return g.object().shape({otp:g.string().required(n("onboarding.otpForm.error")).length(6,n("onboarding.otpForm.error")).default("")})},V=function(n){return g.object().shape({email:g.string().required(n("onboarding.errorMessage.requiredEmail")).email(n("onboarding.errorMessage.invalidEmail")).default(""),name:g.string().required(n("onboarding.errorMessage.requiredName"))})},Y=function(n){return g.object().shape({password:g.string().required(n("onboarding.errorMessage.requiredPassword")).min(8,n("onboarding.errorMessage.minLength",{length:8})).matches(/.*[A-Z].*/,n("onboarding.errorMessage.passWithPattern")).default(""),confirmPassword:g.string().required(n("onboarding.errorMessage.requiredConfirmPassword")).oneOf([g.ref("password"),null],n("onboarding.errorMessage.passNotMatch")).default("")})},_=u(H)(q||(q=n(["\n  .phone-input {\n    width: 100%;\n    margin-bottom: 32px;\n    "," {\n      margin-bottom: 16px;\n    }\n    .PhoneInput {\n      margin-bottom: 16px;\n    }\n    .PhoneInputCountry {\n      border-radius: 4px 0 0 4px;\n    }\n    .PhoneInputInput {\n      border-radius: 0 4px 4px 0;\n    }\n  }\n"],["\n  .phone-input {\n    width: 100%;\n    margin-bottom: 32px;\n    "," {\n      margin-bottom: 16px;\n    }\n    .PhoneInput {\n      margin-bottom: 16px;\n    }\n    .PhoneInputCountry {\n      border-radius: 4px 0 0 4px;\n    }\n    .PhoneInputInput {\n      border-radius: 0 4px 4px 0;\n    }\n  }\n"])),x.mbDown),A=((L={})[E.Vietnam]="VN",L[E.Cambodia]="KH",L[E.Indonesia]="ID",L[E.Malaysia]="MY",L[E.PhilippinesEnglish]="PH",L[E.PhilippinesTagalog]="PH",L[E.Taiwan]="TW",L[E.Thailand]="TH",L[E.Myanmar]="MM",L),D=function(n){var e=n.onClose,a=n.onSubmit,s=n.canSkip,p=void 0===s||s,g=n.customFormTexts,u=P().t,h=d({initialValues:{phone:""},validate:l(B(u))});return i.createElement(_,{heading:(null==g?void 0:g.heading)||u("onboarding.updatePhone.heading"),description:(null==g?void 0:g.description)||u("onboarding.updatePhone.description")},i.createElement("form",{onSubmit:h.onSubmit((function(n){return r(void 0,void 0,void 0,(function(){return t(this,(function(e){return a(n.phone),[2]}))}))}),(function(n){console.log(n)}))},i.createElement("div",{className:"phone-input"},i.createElement(c,o({defaultCountry:A[process.env.UNIFY_LOCALE]||"VN"},h.getInputProps("phone"))),i.createElement(m.Error,null,h.errors.phone)),i.createElement(v,{color:"primary",isBlock:!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"},u("onboarding.button.continue")),p&&i.createElement(v,{color:"ghost",isBlock:!0,size:"lg",onClick:e,type:"button"},u("onboarding.button.skip"))))};export{H as F,A as M,T as O,V as a,Y as b,D as c,U as o};
+import{a as n,d as e,_ as o,b as r,c as t}from"./tslib.es6-69ff2473.js";import i,{createContext as a,useContext as s}from"react";import{Container as p,Input as m}from"@mantine/core";import{useForm as d,yupResolver as l}from"@mantine/form";import{P as c}from"./index-fb5606e0.js";import*as g from"yup";import u from"styled-components";import{L as h}from"./logoIcon-980bdba6.js";import{L as f}from"./index-13ae2d6e.js";import{T as b}from"./index-a0796921.js";import{M as x}from"./utils-04c6e691.js";import{H as w}from"./index-ea760707.js";import{t as y}from"./theme-2b5d5058.js";import{B as v}from"./index-e1cdf973.js";import{L as E}from"./Locale-8afcd9ff.js";import{u as P}from"./useTranslations-63c78125.js";var j,M,I,z,N,q,L,T=a({}),C=u.div(j||(j=n([""],[""]))),S=u(b)(M||(M=n(["\n  margin-top: 8px;\n"],["\n  margin-top: 8px;\n"]))),F=u.div(I||(I=n(["\n  margin-top: 70px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"],["\n  margin-top: 70px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"]))),O=u(p)(z||(z=n(["\n  &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    max-width: 520px;\n  }\n  .header {\n    margin-bottom: 32px;\n    text-align: center;\n    "," {\n      margin-bottom: 16px;\n    }\n  }\n\n  .input-control {\n    width: 100%;\n\n    label {\n      font-size: 12px;\n      line-height: 18px;\n      font-weight: 600;\n      margin-bottom: 6px;\n    }\n\n    input {\n      height: 42px;\n      line-height: 42px;\n      font-size: 14px;\n    }\n  }\n  .radio-group,\n  .input-control {\n    margin-bottom: 16px;\n  }\n  .form {\n    width: 100%;\n  }\n\n  .form-error {\n    margin-top: 32px;\n    font-size: 14px;\n  }\n\n  .field-error {\n    margin-top: 10px;\n    font-size: 14px;\n  }\n\n  .form-button {\n    width: 100%;\n  }\n"],["\n  &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    max-width: 520px;\n  }\n  .header {\n    margin-bottom: 32px;\n    text-align: center;\n    "," {\n      margin-bottom: 16px;\n    }\n  }\n\n  .input-control {\n    width: 100%;\n\n    label {\n      font-size: 12px;\n      line-height: 18px;\n      font-weight: 600;\n      margin-bottom: 6px;\n    }\n\n    input {\n      height: 42px;\n      line-height: 42px;\n      font-size: 14px;\n    }\n  }\n  .radio-group,\n  .input-control {\n    margin-bottom: 16px;\n  }\n  .form {\n    width: 100%;\n  }\n\n  .form-error {\n    margin-top: 32px;\n    font-size: 14px;\n  }\n\n  .field-error {\n    margin-top: 10px;\n    font-size: 14px;\n  }\n\n  .form-button {\n    width: 100%;\n  }\n"])),x.mbDown),k=u.img(N||(N=n(["\n  margin-bottom: 38px;\n"],["\n  margin-bottom: 38px;\n"]))),H=function(n){var r,t=n.heading,a=n.description,p=n.children,m=n.className,d=n.imgSrc,l=e(n,["heading","description","children","className","imgSrc"]),c=s(T),g=c.isMarryBaby,u=c.siteType;return i.createElement(O,o({},l,{className:"hhg-comp-onboarding-container ".concat(m),size:"sm"}),i.createElement(h,{type:g?u:(null===(r=f[process.env.UNIFY_LOCALE])||void 0===r?void 0:r.LOGO_TYPE)||"hellobacsi"}),i.createElement(F,null,d&&i.createElement(k,{src:d,loading:"lazy"}),i.createElement(C,{className:"header"},i.createElement(w,{tag:"h3"},t),i.createElement(S,{size:"p3",color:y.colors.gray600},a)),p))},B=function(n){return g.object().shape({phone:g.string().required(n("onboarding.updatePhone.error")).default("")})},U=function(n){return g.object().shape({otp:g.string().required(n("onboarding.otpForm.error")).length(6,n("onboarding.otpForm.error")).default("")})},V=function(n){return g.object().shape({email:g.string().required(n("onboarding.errorMessage.requiredEmail")).email(n("onboarding.errorMessage.invalidEmail")).default(""),name:g.string().required(n("onboarding.errorMessage.requiredName"))})},Y=function(n){return g.object().shape({password:g.string().required(n("onboarding.errorMessage.requiredPassword")).min(8,n("onboarding.errorMessage.minLength",{length:8})).matches(/.*[A-Z].*/,n("onboarding.errorMessage.passWithPattern")).default(""),confirmPassword:g.string().required(n("onboarding.errorMessage.requiredConfirmPassword")).oneOf([g.ref("password"),null],n("onboarding.errorMessage.passNotMatch")).default("")})},_=u(H)(q||(q=n(["\n  .phone-input {\n    width: 100%;\n    margin-bottom: 32px;\n    "," {\n      margin-bottom: 16px;\n    }\n    .PhoneInput {\n      margin-bottom: 16px;\n    }\n    .PhoneInputCountry {\n      border-radius: 4px 0 0 4px;\n    }\n    .PhoneInputInput {\n      border-radius: 0 4px 4px 0;\n    }\n  }\n"],["\n  .phone-input {\n    width: 100%;\n    margin-bottom: 32px;\n    "," {\n      margin-bottom: 16px;\n    }\n    .PhoneInput {\n      margin-bottom: 16px;\n    }\n    .PhoneInputCountry {\n      border-radius: 4px 0 0 4px;\n    }\n    .PhoneInputInput {\n      border-radius: 0 4px 4px 0;\n    }\n  }\n"])),x.mbDown),A=((L={})[E.Vietnam]="VN",L[E.Cambodia]="KH",L[E.Indonesia]="ID",L[E.Malaysia]="MY",L[E.PhilippinesEnglish]="PH",L[E.PhilippinesTagalog]="PH",L[E.Taiwan]="TW",L[E.Thailand]="TH",L[E.Myanmar]="MM",L),D=function(n){var e=n.onClose,a=n.onSubmit,s=n.canSkip,p=void 0===s||s,g=n.customFormTexts,u=P().t,h=d({initialValues:{phone:""},validate:l(B(u))});return i.createElement(_,{heading:(null==g?void 0:g.heading)||u("onboarding.updatePhone.heading"),description:(null==g?void 0:g.description)||u("onboarding.updatePhone.description")},i.createElement("form",{onSubmit:h.onSubmit((function(n){return r(void 0,void 0,void 0,(function(){return t(this,(function(e){return a(n.phone),[2]}))}))}),(function(n){console.log(n)}))},i.createElement("div",{className:"phone-input"},i.createElement(c,o({defaultCountry:A[process.env.UNIFY_LOCALE]||"VN"},h.getInputProps("phone"))),i.createElement(m.Error,null,h.errors.phone)),i.createElement(v,{color:"primary",isBlock:!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"},u("onboarding.button.continue")),p&&i.createElement(v,{color:"ghost",isBlock:!0,size:"lg",onClick:e,type:"button"},u("onboarding.button.skip"))))};export{H as F,A as M,T as O,V as a,Y as b,D as c,U as o};

package/build/esm/{index-7f3ca6b6.js → index-7751669a.js}

@@ -1 +1 @@
-import{a as n,d as e,_ as r}from"./tslib.es6-60545877.js";import o from"react";import{t as i}from"./theme-d34fcb72.js";import t from"styled-components";import{u as a}from"./useTranslations-a927a379.js";import{I as d}from"./index-ed4a28d4.js";import{I as s}from"./index-4505f43c.js";import{M as p}from"./index-221ea478.js";import{T as c}from"./index-2dbc1afc.js";import{h as l}from"./animation-cf92c0c1.js";var f,b,u=t.div(f||(f=n(["\n  min-width: 212px;\n  width: ",";\n  background-color: #ffffff;\n  border-radius: 6px;\n  overflow: hidden;\n  filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));\n  ul {\n    list-style: none;\n  }\n"],["\n  min-width: 212px;\n  width: ",";\n  background-color: #ffffff;\n  border-radius: 6px;\n  overflow: hidden;\n  filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));\n  ul {\n    list-style: none;\n  }\n"])),(function(n){return n.width+"px"})),x=t.li(b||(b=n(["\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 10px;\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background-color 200ms ease-in-out;\n  &:hover {\n    background-color: ",";\n  }\n  .icon {\n    width: 16px;\n    height: 16px;\n  }\n"],["\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 10px;\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background-color 200ms ease-in-out;\n  &:hover {\n    background-color: ",";\n  }\n  .icon {\n    width: 16px;\n    height: 16px;\n  }\n"])),i.colors.neutral50),m=function(n){var i=n.children,t=n.width,a=void 0===t?300:t,d=e(n,["children","width"]);return o.createElement(u,r({},d,{width:a}),o.createElement("ul",null,i))};m.Item=function(n){var i=n.icon,t=n.children,a=e(n,["icon","children"]);return o.createElement(x,r({},a),i&&o.createElement("div",{className:"icon"},i),t)};var h,g="300ms",w=t.div(h||(h=n(["\n  background: ",";\n  border-radius: 6px;\n  padding: 16px 20px;\n  .title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0;\n    padding-bottom: 16px;\n    border-bottom: none;\n  }\n\n  &[data-is-mb='true'] {\n    background: #ffffff;\n    border: 1px solid #e0e9fb;\n    border-radius: 16px;\n    input {\n      border-radius: 16px;\n    }\n  }\n\n  &[data-isActive='true'] {\n    border: 1px solid #2661ad;\n  }\n\n  &[data-is-mb='false'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 2px solid ",";\n    border-radius: 50%;\n    transition: all "," ease-in-out;\n    &.active {\n      border-color: ",";\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        background-color: ",";\n        background-clip: content-box;\n        padding: 5px;\n        border-radius: 50%;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n\n  &[data-is-mb='true'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 1.3px solid #9495a0;\n    border-radius: 10px;\n    transition: all "," ease-in-out;\n    &.active {\n      border: none;\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        border-radius: 10px;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n"],["\n  background: ",";\n  border-radius: 6px;\n  padding: 16px 20px;\n  .title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0;\n    padding-bottom: 16px;\n    border-bottom: none;\n  }\n\n  &[data-is-mb='true'] {\n    background: #ffffff;\n    border: 1px solid #e0e9fb;\n    border-radius: 16px;\n    input {\n      border-radius: 16px;\n    }\n  }\n\n  &[data-isActive='true'] {\n    border: 1px solid #2661ad;\n  }\n\n  &[data-is-mb='false'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 2px solid ",";\n    border-radius: 50%;\n    transition: all "," ease-in-out;\n    &.active {\n      border-color: ",";\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        background-color: ",";\n        background-clip: content-box;\n        padding: 5px;\n        border-radius: 50%;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n\n  &[data-is-mb='true'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 1.3px solid #9495a0;\n    border-radius: 10px;\n    transition: all "," ease-in-out;\n    &.active {\n      border: none;\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        border-radius: 10px;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n"])),i.colors.gray50,i.colors.gray600,g,i.colors.primaryBase,i.colors.primaryBase,l,g,g,l,g),v=function(n){var e=n.isActive,r=n.onChange,t=n.value,l=void 0===t?"":t,f=n.onInputChange,b=n.siteType,u=a().t,x="marryBaby"===b;return o.createElement(w,{onClick:function(){return r("new")},"data-is-mb":x,"data-isActive":x&&e},"marryBaby"===b?o.createElement("div",{className:"title"},o.createElement(p,{type:"bodytext-1",color:i.colors.gray800},u("chooseBaby.new")),o.createElement("div",{className:e?"radio active":"radio"},e&&o.createElement(d.CheckActiveMB,{size:26}))):o.createElement("div",{className:"title"},o.createElement(c,{size:"p2",color:i.colors.gray800},u("chooseBaby.new")),o.createElement("div",{className:e?"radio active":"radio"})),o.createElement(s,{name:"name",value:l,size:"md",placeholder:u("chooseBaby.placeholder"),type:"text",onChange:f}))};export{m as M,v as N};
+import{a as n,d as e,_ as r}from"./tslib.es6-69ff2473.js";import o from"react";import{t as i}from"./theme-2b5d5058.js";import t from"styled-components";import{u as a}from"./useTranslations-63c78125.js";import{I as d}from"./index-a4708cd3.js";import{I as s}from"./index-57574777.js";import{M as p}from"./index-5d220943.js";import{T as c}from"./index-a0796921.js";import{h as l}from"./animation-4830f8e5.js";var f,b,u=t.div(f||(f=n(["\n  min-width: 212px;\n  width: ",";\n  background-color: #ffffff;\n  border-radius: 6px;\n  overflow: hidden;\n  filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));\n  ul {\n    list-style: none;\n  }\n"],["\n  min-width: 212px;\n  width: ",";\n  background-color: #ffffff;\n  border-radius: 6px;\n  overflow: hidden;\n  filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))\n    drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));\n  ul {\n    list-style: none;\n  }\n"])),(function(n){return n.width+"px"})),x=t.li(b||(b=n(["\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 10px;\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background-color 200ms ease-in-out;\n  &:hover {\n    background-color: ",";\n  }\n  .icon {\n    width: 16px;\n    height: 16px;\n  }\n"],["\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 10px;\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background-color 200ms ease-in-out;\n  &:hover {\n    background-color: ",";\n  }\n  .icon {\n    width: 16px;\n    height: 16px;\n  }\n"])),i.colors.neutral50),m=function(n){var i=n.children,t=n.width,a=void 0===t?300:t,d=e(n,["children","width"]);return o.createElement(u,r({},d,{width:a}),o.createElement("ul",null,i))};m.Item=function(n){var i=n.icon,t=n.children,a=e(n,["icon","children"]);return o.createElement(x,r({},a),i&&o.createElement("div",{className:"icon"},i),t)};var h,g="300ms",w=t.div(h||(h=n(["\n  background: ",";\n  border-radius: 6px;\n  padding: 16px 20px;\n  .title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0;\n    padding-bottom: 16px;\n    border-bottom: none;\n  }\n\n  &[data-is-mb='true'] {\n    background: #ffffff;\n    border: 1px solid #e0e9fb;\n    border-radius: 16px;\n    input {\n      border-radius: 16px;\n    }\n  }\n\n  &[data-isActive='true'] {\n    border: 1px solid #2661ad;\n  }\n\n  &[data-is-mb='false'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 2px solid ",";\n    border-radius: 50%;\n    transition: all "," ease-in-out;\n    &.active {\n      border-color: ",";\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        background-color: ",";\n        background-clip: content-box;\n        padding: 5px;\n        border-radius: 50%;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n\n  &[data-is-mb='true'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 1.3px solid #9495a0;\n    border-radius: 10px;\n    transition: all "," ease-in-out;\n    &.active {\n      border: none;\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        border-radius: 10px;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n"],["\n  background: ",";\n  border-radius: 6px;\n  padding: 16px 20px;\n  .title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0;\n    padding-bottom: 16px;\n    border-bottom: none;\n  }\n\n  &[data-is-mb='true'] {\n    background: #ffffff;\n    border: 1px solid #e0e9fb;\n    border-radius: 16px;\n    input {\n      border-radius: 16px;\n    }\n  }\n\n  &[data-isActive='true'] {\n    border: 1px solid #2661ad;\n  }\n\n  &[data-is-mb='false'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 2px solid ",";\n    border-radius: 50%;\n    transition: all "," ease-in-out;\n    &.active {\n      border-color: ",";\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        background-color: ",";\n        background-clip: content-box;\n        padding: 5px;\n        border-radius: 50%;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n\n  &[data-is-mb='true'] .radio {\n    cursor: pointer;\n    position: relative;\n    min-width: 22px;\n    width: 22px;\n    height: 22px;\n    background: #ffffff;\n    border: 1.3px solid #9495a0;\n    border-radius: 10px;\n    transition: all "," ease-in-out;\n    &.active {\n      border: none;\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        border-radius: 10px;\n        animation: "," "," ease-in-out forwards;\n      }\n    }\n  }\n"])),i.colors.gray50,i.colors.gray600,g,i.colors.primaryBase,i.colors.primaryBase,l,g,g,l,g),v=function(n){var e=n.isActive,r=n.onChange,t=n.value,l=void 0===t?"":t,f=n.onInputChange,b=n.siteType,u=a().t,x="marryBaby"===b;return o.createElement(w,{onClick:function(){return r("new")},"data-is-mb":x,"data-isActive":x&&e},"marryBaby"===b?o.createElement("div",{className:"title"},o.createElement(p,{type:"bodytext-1",color:i.colors.gray800},u("chooseBaby.new")),o.createElement("div",{className:e?"radio active":"radio"},e&&o.createElement(d.CheckActiveMB,{size:26}))):o.createElement("div",{className:"title"},o.createElement(c,{size:"p2",color:i.colors.gray800},u("chooseBaby.new")),o.createElement("div",{className:e?"radio active":"radio"})),o.createElement(s,{name:"name",value:l,size:"md",placeholder:u("chooseBaby.placeholder"),type:"text",onChange:f}))};export{m as M,v as N};

package/build/esm/{index-fcd5ec3c.js → index-79394caa.js}

@@ -1 +1 @@
-import n,{useMemo as e}from"react";import{CommonGAssets as a}from"./gAssets.js";import{a as t}from"./tslib.es6-60545877.js";import{M as o}from"./utils-848ab47e.js";import s from"styled-components";import{L as i}from"./logoIcon-f5d56e3a.js";import{L as l}from"./Locale-4247ffa0.js";var r,g,m=s.div(r||(r=t(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n    img {\n      filter: brightness(0) invert(1);\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"],["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n    img {\n      filter: brightness(0) invert(1);\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"])),o.mbDown),p=s.img(g||(g=t(["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"],["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"]))),h={2023:[22,0],2024:[10,1],2025:[29,0],2026:[17,1],2027:[6,1],2028:[26,0],2029:[13,1],2030:[3,1],2031:[23,0],2032:[11,1],2033:[31,0],2034:[19,1],2035:[8,1],2036:[28,0],2037:[15,1],2038:[4,1],2039:[24,0],2040:[12,1]},d=[l.Vietnam,l.Taiwan,l.Indonesia,l.Malaysia],c=function(t){var o=t.type,s=t.className,l=t.style,r=t.isLightLogo,g=t.customSize,c=t.badge,f=t.locale,x=t.dateForSeasonal,u=t.isPro,w=e((function(){if(!x||isNaN(new Date(x).getTime()))return{isChristmas:!1,isLunarNewYear:!1,isNewYear:!1};var n,e,a=new Date(x),t=(e=(n=a).getDate(),11===n.getMonth()&&e>=16&&e<=25),o=d.includes(f)&&function(n){var e=n.getFullYear(),a=h[e];if(!a)return!1;var t=new Date(e,a[1],a[0]),o=new Date(t);o.setDate(t.getDate()-7);var s=new Date(t);return s.setDate(t.getDate()+5),o<=n&&n<=s}(a),s=!o&&function(n){var e=n.getDate(),a=n.getMonth();return 11===a&&e>=26||0===a&&e<=15}(a);return{isChristmas:t,isLunarNewYear:o,isNewYear:s}}),[f,new Date(x).getDate()]);return n.createElement(m,{className:s,style:l,"data-logo-is-light":r||void 0,"data-has-badge":!!c,"data-christmas":w.isChristmas,"data-new-year":w.isNewYear,"data-lunar-new-year":w.isLunarNewYear},w.isChristmas?n.createElement(n.Fragment,null,n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/xmas-left.png"),className:"common-logo-seasonal-left"}),n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/xmas-right.png"),className:"common-logo-seasonal-right"})):w.isNewYear?n.createElement(n.Fragment,null,n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/new-year-left.png"),className:"common-logo-seasonal-left"}),n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/new-year-right.png"),className:"common-logo-seasonal-right"})):w.isLunarNewYear?n.createElement(n.Fragment,null,n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/lunar-new-year-left.png"),className:"common-logo-seasonal-left"}),n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/lunar-new-year-right.png"),className:"common-logo-seasonal-right"})):null,n.createElement(i,{type:o,width:null==g?void 0:g.width,height:null==g?void 0:g.height}),u?n.createElement(p,{src:a.getAssetPath("logo/pro-suffix.svg")}):null,c)},f="d76E4SH",x=function(e){var a=e.children,t=e.className,o=e.style,s=e.type;return n.createElement("div",{className:"".concat(f," ").concat(t||""),style:o,"data-type":s},a)};export{x as C,c as L};
+import n,{useMemo as e}from"react";import{CommonGAssets as a}from"./gAssets.js";import{a as t}from"./tslib.es6-69ff2473.js";import{M as o}from"./utils-04c6e691.js";import s from"styled-components";import{L as i}from"./logoIcon-980bdba6.js";import{L as l}from"./Locale-8afcd9ff.js";var r,g,m=s.div(r||(r=t(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n    img {\n      filter: brightness(0) invert(1);\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"],["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n    img {\n      filter: brightness(0) invert(1);\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"])),o.mbDown),p=s.img(g||(g=t(["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"],["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"]))),h={2023:[22,0],2024:[10,1],2025:[29,0],2026:[17,1],2027:[6,1],2028:[26,0],2029:[13,1],2030:[3,1],2031:[23,0],2032:[11,1],2033:[31,0],2034:[19,1],2035:[8,1],2036:[28,0],2037:[15,1],2038:[4,1],2039:[24,0],2040:[12,1]},d=[l.Vietnam,l.Taiwan,l.Indonesia,l.Malaysia],c=function(t){var o=t.type,s=t.className,l=t.style,r=t.isLightLogo,g=t.customSize,c=t.badge,f=t.locale,x=t.dateForSeasonal,u=t.isPro,w=e((function(){if(!x||isNaN(new Date(x).getTime()))return{isChristmas:!1,isLunarNewYear:!1,isNewYear:!1};var n,e,a=new Date(x),t=(e=(n=a).getDate(),11===n.getMonth()&&e>=16&&e<=25),o=d.includes(f)&&function(n){var e=n.getFullYear(),a=h[e];if(!a)return!1;var t=new Date(e,a[1],a[0]),o=new Date(t);o.setDate(t.getDate()-7);var s=new Date(t);return s.setDate(t.getDate()+5),o<=n&&n<=s}(a),s=!o&&function(n){var e=n.getDate(),a=n.getMonth();return 11===a&&e>=26||0===a&&e<=15}(a);return{isChristmas:t,isLunarNewYear:o,isNewYear:s}}),[f,new Date(x).getDate()]);return n.createElement(m,{className:s,style:l,"data-logo-is-light":r||void 0,"data-has-badge":!!c,"data-christmas":w.isChristmas,"data-new-year":w.isNewYear,"data-lunar-new-year":w.isLunarNewYear},w.isChristmas?n.createElement(n.Fragment,null,n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/xmas-left.png"),className:"common-logo-seasonal-left"}),n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/xmas-right.png"),className:"common-logo-seasonal-right"})):w.isNewYear?n.createElement(n.Fragment,null,n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/new-year-left.png"),className:"common-logo-seasonal-left"}),n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/new-year-right.png"),className:"common-logo-seasonal-right"})):w.isLunarNewYear?n.createElement(n.Fragment,null,n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/lunar-new-year-left.png"),className:"common-logo-seasonal-left"}),n.createElement("img",{loading:"lazy",src:a.getAssetPath("logo/lunar-new-year-right.png"),className:"common-logo-seasonal-right"})):null,n.createElement(i,{type:o,width:null==g?void 0:g.width,height:null==g?void 0:g.height}),u?n.createElement(p,{src:a.getAssetPath("logo/pro-suffix.svg")}):null,c)},f="d76E4SH",x=function(e){var a=e.children,t=e.className,o=e.style,s=e.type;return n.createElement("div",{className:"".concat(f," ").concat(t||""),style:o,"data-type":s},a)};export{x as C,c as L};