"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4190],{cSIu:function(e,t,a){a.d(t,{C:function(){return Container}});var r=a("q1tI");let Container=({children:e,className:t,style:a,type:o})=>r.createElement("div",{className:`d76E4SH ${t||""}`,style:a,"data-type":o},e)},F1Uu:function(e,t,a){a.d(t,{C:function(){return ChoiceField},T:function(){return TextField},i:function(){return _},u:function(){return u}});var r=a("/npG"),o=a("iuhU"),n=a("Eso5"),i=a("8vDj"),l=a("NXxl"),s=a("vEfc"),c=a("q1tI"),d=a("ChHM"),p=a("AeFk"),h=a("rBCA"),m=a("iBNF"),u=(0,r.k)(e=>(0,l.G)(e)[l.C.LEADGEN]);let g=(0,c.createContext)({}),b=p.iv` height: 100% !important; min-height: calc(var(--container-height, 56px) * 24 / 56); line-height: calc(var(--container-height, 56px) * 24 / 56); border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; padding: 0; cursor: pointer; /* opacity: 0; */ ::placeholder { color: ${m.r.colors.gray400}; } `,x=p.iv` height: auto !important; cursor: text; opacity: 1; transition: 0.1s ease-in-out all; `,f=p.iv` position: absolute; top: calc(var(--container-height) / 2); left: var(--space-x, 16px); margin: 0; z-index: 1; cursor: pointer; transform: translateY(-50%); transition: 0.125s ease-in all; right: 0; // auto grow width `,v=p.iv` top: var(--space-y-shrink, 6px); transform: translateY(0); transition: 0.125s ease-out all; right: 0; // auto grow width `,y=p.iv` min-height: var(--container-height, 56px); display: flex; align-items: flex-end; border: 1px solid ${m.r.colors.gray200}; border-radius: 8px; background-color: #fff; padding-inline: var(--space-x, 16px); padding-block: var(--space-y-not-shrink, 16px); cursor: pointer; pointer-events: none; &:has(.mantine-Input-rightSection) { padding-right: var(--container-height, 56px); } .mantine-Input-icon { display: none; } .mantine-NumberInput-control { border-color: ${m.r.colors.gray200}; } `,w=p.iv` height: auto; min-height: var(--container-height, 56px); padding-block: var(--space-y-shrink, 6px); cursor: text; pointer-events: auto; `,k=p.iv` color: ${m.r.colors.red800}; font-size: 12px; line-height: 1.5; `,C=h.Z.div` --space-x: 16px; --space-y-not-shrink: 15px; --space-y-shrink: 6px; --container-height: 56px; --label-not-shrink: 16px; --label-shrink: 12px; --input: 15px; position: relative; min-width: 100px; max-width: 100%; display: inline-block; .textField_wrapper { display: inline-block; width: 100%; cursor: pointer; } .mantine-InputWrapper-root { &[data-invalid='true'] { .mantine-Input-wrapper { border-color: ${m.r.colors.red400}; } } .mantine-Input-wrapper { &:has([data-invalid]) { border-color: ${m.r.colors.red400}; } } } .mantine-InputWrapper-label { ${f} } .mantine-Input-wrapper { ${y} + .mantine-Popover-dropdown[data-position="bottom-start"] { left: 0 !important; } + .mantine-Popover-dropdown[data-position='top-start'] { top: unset !important; left: 0 !important; bottom: 100% !important; } } .mantine-Input-input { ${b} } &.textField_shrink { .mantine-InputWrapper-label { ${v} } .mantine-Input-wrapper { ${w} &.mantine-Select-wrapper { .mantine-Select-rightSection { pointer-events: auto !important; } } } .mantine-Input-input { ${x} } &:has(.PhoneInput) { .mantine-InputWrapper-label { left: var(--space-x, 16px); } .PhoneInput { .PhoneInputInput { opacity: 1; } } } } &:focus-within { .mantine-Input-wrapper { transition: 0.25s linear border; border-color: ${m.r.colors.primary600}; box-shadow: 0 0 4px ${m.r.colors.primary200}; } } .PhoneInput { --phone-select: 75px; --phone-input-space-x: 8px; width: 100%; opacity: 1; border: none; .PhoneInputCountry { background-color: transparent; border: none; padding: 0; width: var(--phone-select, 75px); } .PhoneInputInput { flex: 1; min-width: 0; line-height: 1.5; outline: none !important; border: none; box-shadow: none; font-size: var(--input, 15px); padding: 0 var(--phone-input-space-x, 8px); /* opacity: 0; */ color: ${m.r.colors.gray800} !important; :focus { color: ${m.r.colors.gray800} !important; } } } &:has(.PhoneInput) { .mantine-InputWrapper-label { left: calc( var(--space-x, 16px) + var(--phone-select, 75px) + var(--phone-input-space-x, 8px) ); } } .icon { position: absolute; top: calc(var(--container-height) / 2); right: var(--space-x, 16px); transform: translateY(-50%); transition: 0.125s ease-in all; &.shrink { top: calc(var(--container-height) / 2 - 4px); transform: translateY(0); } } `,E=h.Z.div` &.leadgen-form_checkbox, &.leadgen-form_radio { width: 100%; } &.leadgen-form_dropdown { width: calc(50% - 12px); } .mantine-InputWrapper-root { display: block; } .mantine-InputWrapper-label { margin-bottom: 0.5rem; color: ${m.r.colors.gray800}; font-size: 16px; font-weight: 400; line-height: 1.5; } .mantine-Radio-root, .mantine-Checkbox-root { gap: 8px; min-width: calc(50% - 4px); // input[type='radio'], // input[type='checkbox'] { // border-color: ${m.r.colors.gray600}; // width: 18px; // height: 18px; // } // input[type='checkbox'] { // border-radius: 4px; // } // &[data-checked='true'] { // input[type='radio'], // input[type='checkbox'] { // border-color: ${m.r.colors.primary600}; // } // input[type='radio'] { // background-color: white; // } // } .mantine-Checkbox-input { &:checked { border-color: ${m.r.colors.primary600}; } } } .leadgen-choiceContainer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } .mantine-InputWrapper-error { ${k} } `;h.Z.div` position: absolute; top: calc(var(--container-height) / 2); right: var(--space-x, 16px); `;let TextField=e=>{let{shrink:t,onChangeShrink:a,children:r,className:n}=e,i=(0,s.a)(e,["shrink","onChangeShrink","children","className"]),[l,d]=(0,c.useState)(t),[p,h]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{d(t)},[t]),c.createElement(g.Provider,Object.assign({value:{shrinkProps:t,shrink:l,setShrink:d,onChangeShrink:a,hasIcon:p,setHasIcon:h}},i),c.createElement(C,Object.assign({shrink:l,className:(0,o.default)(n,"textField",{textField_shrink:!!l})},i),r))},TextFieldControl=e=>{let{shrink:t,shrinkProps:a,onChangeShrink:r,setShrink:o,hasIcon:i}=(0,c.useContext)(g),{children:l,htmlFor:s}=e,p=(0,d.O)(()=>{a||(o(!1),null==r||r(!1))}),focusInput=e=>{setTimeout(()=>{let t=e.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])'),a=t.item(t.length-1);a&&a.focus({preventScroll:!0})},150)},h=(0,c.useCallback)(e=>{if(t){focusInput(e.currentTarget);return}o(!0),null==r||r(!0),focusInput(e.currentTarget)},[t]);return(0,c.useEffect)(()=>{o(a)},[a]),c.createElement(n.x,{ref:p,onClick:h,className:"textField_wrapper",component:s?"label":"div",htmlFor:s},"function"==typeof l?l({shrink:!!t,hasIcon:i}):l)},TextFieldIcon=({Icon:e})=>{let{shrink:t,setHasIcon:a}=(0,c.useContext)(g),r=(0,i.rZ)();return(0,c.useEffect)(()=>{e&&a(!0)},[]),e?c.createElement(e,{className:`icon ${t?"shrink":""}`,shrink:t,size:24,color:r.colors.gray[9]}):null};TextField.Control=TextFieldControl,TextField.Icon=TextFieldIcon;let ChoiceField=e=>{let{children:t,className:a}=e,r=(0,s.a)(e,["children","className"]);return c.createElement(E,Object.assign({className:(0,o.default)(a,"choiceField")},r),t)};var _=Object.freeze({__proto__:null,TextField:TextField,TextFieldControl:TextFieldControl,TextFieldIcon:TextFieldIcon,ChoiceField:ChoiceField})},"Z+Z0":function(e,t,a){a.d(t,{P:function(){return Popup}});var r=a("q1tI"),o=a("rBCA"),n=a("CL9C"),i=a("iBNF");let l=o.Z.div` position: fixed; left: 50%; padding: 0 16px 32px; background-color: ${i.r.colors.white}; border-radius: ${i.r.borderRadius}; box-shadow: 0px 4px 8px ${i.r.colors.gray200}; transform: translate(-50%, -50%); transition: all 0.5s ease-in-out; visibility: hidden; &[data-open='true'] { z-index: 400; top: 50%; opacity: 1; visibility: visible; } &[data-open='false'] { top: -50%; } &[data-type='lead'] { width: 332px; height: 460px; div { top: -15px; right: -15px; } } &[data-type='form'] { width: 496px; height: 548px; ${n.M.mbDown} { width: 340px; } } &[data-type='confirm'] { ${n.M.mbDown} { width: calc(100% - 32px); } ${n.M.mbUp} { width: 100%; max-width: 407px; } } .popup-content { position: relative; z-index: 111; height: 100%; padding: 16px; } .close-button { position: absolute; top: 16px; right: 0; cursor: pointer; img { width: 100%; height: 100%; border-radius: 50%; } } `,s=o.Z.div` position: fixed; z-index: 110; top: 0; left: 0; width: 100%; height: 100%; align-items: center; background: rgba(38, 38, 38, 0.3); &[data-open='false'] { display: none; } `,Popup=({type:e="lead",closeIcon:t,isOpen:a=!0,onClose:o,children:n,className:i="",enableAnimation:c=!0,disableClickOutside:d=!1})=>r.createElement(r.Fragment,null,r.createElement(l,{"data-open":a,"data-type":e,"data-animation":c},r.createElement("div",{className:`${i||""} popup-content`},!!t&&r.createElement("div",{className:"close-button",onClick:o},t),n)),r.createElement(s,{"data-open":a,onClick:()=>{d||o()}}))},JMrc:function(e,t,a){a.d(t,{H:function(){return HealthToolCardWrapper},T:function(){return ToolsBannerCard}});var r=a("vEfc"),o=a("q1tI"),n=a("/npG"),i=a("mYVa"),l=a("8vDj"),s=a("Eso5"),c=a("SPK5"),d=a("vaps"),p=a("CmQM"),h=a("UlxI"),m=a("uzh1"),u=a("NXxl"),g=a("sFNn"),b=a("CL9C"),x=a("NEg/");let f=(0,n.k)((e,{isRevamp:t,isPregTool:a,bannerColor:r,isMarryBaby:o})=>({wrapper:{position:"relative",width:"100%",height:"100%",display:"flex",gap:(0,i.h)(24),alignItems:"center",justifyContent:"space-between",padding:(0,i.h)(16),[e.fn.smallerThan("sm")]:{gap:(0,i.h)(12)}},container:{width:"100%",backgroundColor:r||(o?e.colors.mb[1]:a?e.colors.pink[1]:e.colors.blue[1]),position:"relative",display:"flex",gap:24,alignItems:"center",justifyContent:"space-between",padding:(0,i.h)(16),[e.fn.smallerThan("sm")]:{padding:`${(0,i.h)(12)} ${(0,i.h)(16)}`},a:{textDecoration:"none",color:"inherit"},'&[data-site="marryBaby"]':{a:{textDecoration:"underline"},[b.M.mbDown]:{paddingBottom:0}},[b.M.tdDown]:{height:"auto",".hhgcomp-toolbanner-wrapper":{".hhgcomp-toolbanner-inner":{display:"flex",alignItems:"center",[b.M.mbDown]:{justifyContent:"space-between"},".hhgcomp-toolbanner-iconcontainer":{position:"relative",right:(0,i.h)(-50),bottom:(0,i.h)(-20),width:(0,i.h)(110),minWidth:0,height:"auto",minHeight:0,alignSelf:"flex-end",marginBottom:(0,i.h)(-20),[b.M.mbDown]:{right:"unset"}}}}},".embedded-review":{gap:(0,i.h)(12),display:"flex",alignItems:"center"},".embedded-review__avatar":{position:"relative",minWidth:(0,i.h)(32),img:{width:(0,i.h)(32),height:(0,i.h)(32),display:"block",borderRadius:"100%"},svg:{bottom:0,right:0,position:"absolute"}}},headingWrapper:{display:"flex",flexDirection:"column",gap:t?(0,i.h)(8):0,[e.fn.smallerThan("sm")]:{gap:4}},avatarWrapper:{position:"relative",img:{maxWidth:(0,i.h)(48),maxHeight:(0,i.h)(48)},".embedded-review__avatar":{position:"relative"}},reviewText:{a:{textDecoration:"underline",textUnderlineOffset:"2px"}},iconWrapper:{display:"flex",justifyContent:"center",alignItems:"center",width:(0,i.h)(80),height:(0,i.h)(80),borderRadius:"50%",backgroundColor:"#fff",flexShrink:0,img:{maxWidth:(0,i.h)(48),maxHeight:(0,i.h)(48)},[e.fn.smallerThan("sm")]:{width:(0,i.h)(64),height:(0,i.h)(64),img:{maxWidth:(0,i.h)(40),maxHeight:(0,i.h)(40)}}},heading:{},disclaimerIcon:{flexShrink:0}})),ToolsBannerCard=e=>{var{className:t,classNames:a,heading:n,bannerColor:i,medicalReview:d={link:"#",reviewer:"",date:""},icon:u,style:b,isPregTool:x,isRevamp:v,disclaimer:y,styles:w}=e,k=(0,r.a)(e,["className","classNames","heading","bannerColor","medicalReview","icon","style","isPregTool","isRevamp","disclaimer","styles"]);let{t:C}=(0,g.u)(),E=(0,l.rZ)(),_="mb"===E.other.template,N=_?"marryBaby":"helloSites",{classes:$,cx:T}=f({isRevamp:v,isPregTool:x,bannerColor:i,isMarryBaby:_},{name:"ToolsBannerCard",styles:w,classNames:a}),I=(null==d?void 0:d.reviewer)?o.createElement(m.T,{size:"label2",as:"div",className:$.reviewText},d.avatar&&o.createElement("div",{className:"embedded-review__avatar"},o.createElement(s.x,{className:$.avatarWrapper},o.createElement("img",{src:d.avatar,alt:d.reviewer,loading:"lazy"}),o.createElement(h.Z,{size:14}))),o.createElement("div",{dangerouslySetInnerHTML:{__html:C("toolPage.toolReviewer",{expert_name:`${d.reviewer.trim()}`,date:d.date})}})):null;return o.createElement(s.x,Object.assign({className:T(t,$.container),style:b,"data-site":N},k),o.createElement(c.k,{className:$.headingWrapper},o.createElement(m.T,{className:T($.heading,"heading"),size:"h4",as:"h2"},n),I&&o.createElement(m.T,{size:"n1"},I),y&&o.createElement(c.k,{gap:4},o.createElement(p.Z,{size:16,color:E.colors.yellow[8],className:$.disclaimerIcon}),o.createElement(m.T,{size:"c1",variant:"secondary"},y))),o.createElement(c.k,{className:$.iconWrapper},u))};var v=(0,n.k)(()=>({root:{borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"}})),y=(0,n.k)(e=>({root:{paddingTop:16,borderRadius:"inherit",[e.fn.smallerThan("sm")]:{paddingTop:8}}})),w=(0,n.k)((e,{isPregTool:t,variant:a})=>{let r="mb"===e.other.template;return{root:Object.assign(Object.assign(Object.assign({display:"flex",flexDirection:"column",borderRadius:(0,i.h)(r?16:8)},"default"===a&&{backgroundColor:"#fff",border:`1px solid ${r?e.colors.mb[2]:t?e.colors.pink[1]:e.colors.blue[2]}`}),"gray"===a&&{backgroundColor:e.colors.neutral[0]}),"violet"===a&&{backgroundColor:e.colors.violet[0]}),submitBtn:{},bodyWrapper:{},scrollAreaWrapper:{},bannerWrapper:Object.assign(Object.assign({},"gray"===a&&{backgroundColor:"transparent",padding:`${(0,i.h)(16)} ${(0,i.h)(16)} 0`}),"violet"===a&&{backgroundColor:"transparent",padding:`${(0,i.h)(16)} ${(0,i.h)(16)} 0`}),bannerHeading:Object.assign({},("gray"===a||"violet"===a)&&{fontSize:(0,i.h)(20),lineHeight:(0,i.h)(28),fontWeight:u.F.semiBold,[e.fn.smallerThan("sm")]:{fontSize:(0,i.h)(17),lineHeight:(0,i.h)(24)}}),bannerReviewText:Object.assign({},("gray"===a||"violet"===a)&&{fontSize:(0,i.h)(14),lineHeight:(0,i.h)(22),[e.fn.smallerThan("sm")]:{fontSize:(0,i.h)(12),lineHeight:(0,i.h)(18)}}),submitWrapper:Object.assign(Object.assign({[e.fn.smallerThan("sm")]:{button:{width:"100%"}},[e.fn.largerThan("sm")]:{textAlign:"right"}},"gray"===a&&{backgroundColor:e.colors.neutral[0],button:{marginTop:10}}),"violet"===a&&{backgroundColor:e.colors.violet[0],button:{marginTop:10}}),newsletterBlock:Object.assign(Object.assign({},"gray"===a&&{backgroundColor:e.colors.neutral[0]}),"violet"===a&&{backgroundColor:e.colors.violet[0]})}});let HealthToolCardWrapper=e=>{var{children:t,styles:a,classNames:n,className:i,isPregTool:l,variant:c="default",hasBodyScroll:d}=e,p=(0,r.a)(e,["children","styles","classNames","className","isPregTool","variant","hasBodyScroll"]);let{classes:h,cx:m}=w({isPregTool:l,variant:c},{name:"HealthToolCardWrapper",styles:a,classNames:n});return o.createElement(u.T,{variant:u.C.LEADGEN},o.createElement(x.C.Provider,{value:{isPregTool:l,classes:h,variant:c,hasBodyScroll:d}},o.createElement(s.x,Object.assign({className:m(i,h.root)},p),t)))};HealthToolCardWrapper.Body=e=>{var{children:t,className:a,styles:n,classNames:i}=e,l=(0,r.a)(e,["children","className","styles","classNames"]);let{classes:c,hasBodyScroll:p}=(0,o.useContext)(x.C),{classes:h,cx:m}=y(void 0,{name:"HealthToolCardWrapper__Body",styles:n,classNames:i});return o.createElement(s.x,Object.assign({className:m(a,h.root,c.bodyWrapper)},l),p?o.createElement(d.x,{h:"100%",type:"auto",scrollbarSize:8,className:c.scrollAreaWrapper},t):t)},HealthToolCardWrapper.Banner=e=>{var{className:t,classNames:a,styles:n}=e,i=(0,r.a)(e,["className","classNames","styles"]);let{classes:l}=(0,o.useContext)(x.C),{isPregTool:s}=(0,o.useContext)(x.C),{classes:c,cx:d}=v(void 0,{name:"HealthToolCardWrapper__Banner",classNames:a,styles:n});return o.createElement(ToolsBannerCard,Object.assign({isPregTool:s,classNames:{container:l.bannerWrapper,heading:l.bannerHeading,reviewText:l.bannerReviewText},className:d(t,c.root)},i))}},"0aQW":function(e,t,a){a.d(t,{P:function(){return PillCarousel}});var r=a("vEfc"),o=a("q1tI"),n=a("rBCA"),i=a("Wbba"),l=a("iBNF"),s=a("RBzE"),c=a("+YhV"),d=a("4BRW"),p=a("aHnw");let h=n.Z.div` display: inline-flex; overflow: hidden; width: ${e=>e.size}px; height: ${e=>e.size}px; box-sizing: border-box; align-items: center; justify-content: center; border: 1px solid #e4e8ec; background-color: ${e=>e.backgroundColor||l.r.colors.white}; border-radius: ${e=>e.borderRadius||"50%"}; & > * { width: ${e=>e.iconSize}px; height: ${e=>e.iconSize}px; } `,m=n.Z.div` display: inline-block; height: 108px; background-color: ${l.r.colors.white}; border-radius: 60px; cursor: pointer; &.selected-week-pill { background-color: ${l.r.colors.pink100}; } & > div:first-child { margin: 4px 4px 0; } & > p { margin-top: 8px; text-align: center; } & > * { pointer-events: none; } `,u=[d.L.Myanmar,d.L.Taiwan],g=(0,n.Z)(e=>{var{icon:t,name:a,className:n,locale:d="en-PH",dataEventCategory:p,dataEventAction:g,dataEventLabel:b,onSelect:x}=e,f=(0,r.a)(e,["icon","name","className","locale","dataEventCategory","dataEventAction","dataEventLabel","onSelect"]);let v=(0,o.useMemo)(()=>null==n?void 0:n.includes("selected-week-pill"),[n]);return o.createElement(m,Object.assign({onClick:x,className:n?"week-pill".concat(" non-pointer-event-child ",n):"week-pill non-pointer-event-child","data-event-category":p,"data-event-action":g,"data-event-label":b},f),o.createElement(h,{size:64,iconSize:40,backgroundColor:l.r.colors.white},o.createElement(s.I,{src:t||i.C.getAssetPath("week_default.png"),alt:`week ${a}`})),v?o.createElement(c.T,Object.assign({type:"semiBold",size:"n1",color:l.r.colors.gray800},u.includes(d)&&{style:{fontSize:"10px"}}),a):o.createElement(c.T,Object.assign({size:"n1",color:l.r.colors.gray600},u.includes(d)&&{style:{fontSize:"10px"}}),a))})` box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08); `,b=(0,n.Z)(p.f.Slide)` cursor: pointer; > div * { pointer-events: none; } `,x=(0,n.Z)(p.f)` .centerred-pill-wrapper { padding: 16px 0; } `,PillCarousel=e=>{var{data:t,isMobile:a,onSlideChange:n,pillProps:i,locale:l=d.L.Vietnam,blurFromIndex:s,blurLength:c}=e,p=(0,r.a)(e,["data","isMobile","onSlideChange","pillProps","locale","blurFromIndex","blurLength"]);let[h,m]=(0,o.useState)("");return(0,o.useEffect)(()=>{m(window.location.href)},[]),o.createElement(x,Object.assign({},{withControls:!a,slideGap:16,blurFromCenter:!0,blurFromIndex:s||(a?2:4),blurLength:c||(a?1:3),onSlideChange:n},p,{selectSlideWhenClick:!0,previousControlIcon:o.createElement(Arrow,{currentUrl:h}),nextControlIcon:o.createElement(Arrow,{currentUrl:h,isRight:!0})}),e=>t.map((t,a)=>o.createElement(b,Object.assign({key:a,onClick:n,"data-event-category":"Health Tool","data-event-action":"Pregnancy Week Click","data-event-label":h,innerSlideProps:{"data-event-category":"Health Tool","data-event-action":"Pregnancy Week Click","data-event-label":h}},i),o.createElement("div",{className:"centerred-pill-wrapper"},o.createElement(g,{"data-event-category":"Health Tool","data-event-action":"Fetal Week Click","data-event-label":h,locale:l,name:t.name,icon:t.icon,className:a===e?"selected-week-pill pointer-event-child-none":"pointer-event-child-none"})))))},Arrow=({isRight:e,currentUrl:t})=>o.createElement("svg",{viewBox:"0 0 15 15",fill:"none",width:"16",height:"16",style:e?{transform:"rotate(-90deg)"}:{transform:"rotate(90deg)"},"data-event-category":"Health Tool","data-event-action":"Pregnancy Week Arrow Click","data-event-label":t,className:"pointer-event-child-none"},o.createElement("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))},"K+xq":function(e,t,a){a.d(t,{M:function(){return Modal}});var r=a("q1tI"),o=a("rzfh"),n=a("i8i4"),i=a("rBCA"),l=a("CL9C"),s=a("gEnE"),c=a("iBNF");let d=(0,s.Z)(i.Z.div` position: relative; z-index: 200; background-color: ${c.r.colors.white}; border-radius: ${c.r.borderRadius}; box-shadow: 0px 8px 40px 0px #0000001a; &[data-site-type='marryBaby'] { border-radius: 16px; .hhg-modal__content { position: relative; z-index: 111; height: 100%; padding: 24px; } } .hhg-modal__content { position: relative; z-index: 111; height: 100%; padding: 16px; } .hhg-modal__video { position: relative; z-index: 111; height: 100%; background-color: none; box-shadow: none; } `,"hhgcomp-modal-modal"),p=i.Z.div` position: fixed; top: 0; left: 0; z-index: 201; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; visibility: hidden; opacity: 0; background-color: rgba(0, 0, 0, 0.6); transition: opacity 0.3s ease-in-out; .hhg-modal__close { position: absolute; top: 16px; right: 16px; cursor: pointer; img { width: 100%; height: 100%; border-radius: 50%; } } &[data-type='video'] { z-index: 1001; } &[data-open='true'] { opacity: 1; visibility: visible; } ${d.classSelector} { transition: transform 0.3s ease-in-out; } &.slideTop { ${d.classSelector} { transform: translate(0, -100vh); } &[data-open='true'] { ${d.classSelector} { transform: translate(0); } } } &.scaleUp { ${d.classSelector} { transform: scale(0.9); } &[data-open='true'] { ${d.classSelector} { transform: scale(1); } } } &[data-type='tail'] { justify-content: flex-end; ${d.classSelector} { width: 420px; height: 100%; border-radius: 0; overflow: hidden auto; } } &[data-type='form'] { ${d.classSelector} { width: 496px; height: 548px; max-height: 100%; overflow-y: auto; ${l.M.mbDown} { width: 340px; } } } &[data-type='video'] { ${d.classSelector} { height: 100%; max-height: 539px; ${l.M.mbDown} { height: 192px; width: 100%; height: 100%; border-radius: ${c.r.borderRadius}; max-height: 192px; } } } &[data-type='confirm'] { ${d.classSelector} { width: 100%; max-width: 407px; ${l.M.mbDown} { width: calc(100% - 32px); max-width: calc(100% - 32px); } } } `,h=i.Z.div` position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; align-items: center; &[data-open='false'] { display: none; } &[data-type='video'] { background-color: ${c.r.colors.secondaryDark}; } `,m="hhg-modals",getModalsRoot=()=>{let e=document.getElementById(m);return e||((e=document.createElement("div")).setAttribute("id",m),document.body.append(e)),e},cleanUpModalShow=()=>{let e=document.querySelectorAll('.hhg-modal[data-open="true"]');e.length<1&&document.body.classList.remove("hhc-modal-show")},cleanUpDisabledScroll=()=>{let e=document.querySelectorAll('.hhg-modal[data-open="true"]');e.length<1&&(document.body.style.overflow="",document.body.style.paddingRight="",document.body.classList.remove("hhc-disabled-scroll"))},Modal=({type:e="lead",closeIcon:t,isOpen:a=!0,onClose:i,children:l,className:s="",animationType:c="scaleUp",isStaticBackdrop:m=!1,siteType:u})=>{let[g,b]=(0,r.useState)(!1),x=(0,r.useRef)(null),{width:f}=(0,o.u)();if(!x.current&&g&&(x.current=document.createElement("div")),(0,r.useEffect)(()=>(b(!0),()=>{b(!1),cleanUpModalShow(),cleanUpDisabledScroll()}),[]),(0,r.useEffect)(()=>{if(g){let e=getModalsRoot();return e.appendChild(x.current),()=>{e.removeChild(x.current)}}},[g]),(0,r.useEffect)(()=>{a?document.body.classList.add("hhc-modal-show"):cleanUpModalShow()},[a]),(0,r.useEffect)(()=>{a?(document.body.style.overflow="hidden",document.body.style.paddingRight=f+"px",document.body.classList.add("hhc-disabled-scroll")):cleanUpDisabledScroll()},[a,f]),!g)return null;let v=["hhg-modal__wrapper",s,c].filter(e=>e).join(" ");return(0,n.createPortal)(r.createElement(p,{className:v,"data-open":a,"data-type":e},!m&&r.createElement(h,{"data-open":a,onClick:i,"data-type":e}),!m&&"video"===e&&!!t&&r.createElement("div",{className:"hhg-modal__close",onClick:i},t),r.createElement(d,{className:"hhg-modal","data-open":a,"data-site-type":u},r.createElement("div",{className:"video"===e?"hhg-modal__video":"hhg-modal__content"},!!t&&"video"!==e&&r.createElement("div",{className:"hhg-modal__close",onClick:i},t),l))),x.current)}},lxhV:function(e,t,a){a.d(t,{P:function(){return PopoverMenu},S:function(){return c}});var r=a("q1tI"),o=a("tuDO"),n=a("d/ZZ"),i=a("rBCA"),l=a("iBNF");let s=i.Z.div` position: relative; display: content; .popover-menu__btn { /* position: relative; */ > span { width: 100%; height: 100%; > img { width: 100%; height: 100%; } } } .popover-menu__content { position: absolute; z-index: 10; width: 320px; padding: 8px; border: none; background: #fff; border-radius: 8px; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1); &::before { position: absolute; width: 16px; height: 8px; background: #fff; content: ''; } &.--position { &-top { bottom: calc(100% + 8px); &.--align { &-start { left: 0; &::before { top: 100%; left: 16px; clip-path: polygon(0 0, 50% 100%, 100% 0); } } &-end { left: 100%; transform: translateX(calc(-100% + 1rem)); &::before { top: 100%; right: 16px; clip-path: polygon(0 0, 50% 100%, 100% 0); } } } } &-right { left: calc(100% + 8px); &.--align { &-start { top: 0; &::before { top: 16px; left: 0; width: 8px; height: 16px; clip-path: polygon(0 50%, 100% 0%, 100% 100%); transform: translateX(-100%); } } &-end { top: 100%; transform: translateX(calc(-100% + 1rem)); &::before { bottom: 16px; left: 0; width: 8px; height: 16px; clip-path: polygon(0 50%, 100% 0%, 100% 100%); transform: translateX(-100%); } } } } &-bottom { top: calc(100% + 8px); &.--align { &-start { left: 0; &::before { bottom: 100%; left: 16px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } } &-end { left: 100%; transform: translateX(calc(-100% + 1rem)); &::before { right: 16px; bottom: 100%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } } } } &-left { left: -8px; transform: translateX(-100%); &.--align { &-start { top: 0; &::before { top: 16px; left: 100%; width: 8px; height: 16px; clip-path: polygon(0 0%, 100% 50%, 0% 100%); transform: translateX(0); } } &-end { bottom: 0; &::before { bottom: 16px; left: 100%; width: 8px; height: 16px; clip-path: polygon(0 0%, 100% 50%, 0% 100%); transform: translateX(0); } } } } } } &[data-is-marrybaby='true'] { .popover-menu__content { padding: 0; border-radius: 12px; /* &::before { display: none; } */ } } `,c=i.Z.div` display: flex; /* max-height: 300px; */ flex-direction: column; cursor: default; .__header { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem 0; margin-bottom: 8px; .__back-btn { position: absolute; top: 50%; left: 8px; width: 16px; height: 16px; cursor: pointer; transform: translateY(-50%); } } .tree-text-description { padding-right: 8px; padding-left: 8px; margin-top: -8px; margin-bottom: 8px; font-size: 14px; font-weight: 400; line-height: 22px; text-align: left; } .__content { overflow: auto; flex: 1; } .__list { .__item { position: relative; &.bold-item { font-weight: 700; } &:last-child { .__btn { margin-bottom: 0; } } .__btn { position: relative; display: flex; width: 100%; height: 40px; align-items: center; padding: 0 1rem; border: none; margin-bottom: 8px; color: ${l.r.colors.gray800}; cursor: pointer; text-align: left; transition: background 0.3s; /* for better gtm tracking result */ * { pointer-events: none; } &.--checked { color: ${l.r.colors.gray500}; pointer-events: none; } &:hover { background: ${l.r.colors.gray100}; } .__icon { width: 16px; height: 16px; margin-right: 0.4rem; } & > span { position: relative; & > img { width: 16px; height: 16px; margin-right: 0.4rem; } } } .__toggle { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; pointer-events: none; transform: translateY(-50%); } } } &[data-is-marrybaby='true'] { .__header { padding: 1rem; } .tree-text-description { padding: 0 1rem; } .__list { .__item { &:first-child { .__btn { border-top-left-radius: 12px; border-top-right-radius: 12px; } } &:last-child { .__btn { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } } .__btn { height: unset; padding: 1rem; margin-bottom: 0; &:hover { background: ${l.r.mbColors.lightPink}; } } } } } `,PopoverMenu=({className:e,style:t,toggleButtonContent:a,position:i="bottom",align:l="end",children:c,buttonProps:d})=>{let{data:{env:{isMarryBaby:p}}}=(0,r.useContext)(n.T),[h,m]=(0,r.useState)(!1),u=(0,r.useRef)(null),g=(0,r.useRef)(h);return(0,r.useEffect)(()=>{var e;g.current=h,h&&(null===(e=u.current)||void 0===e||e.focus())},[h]),(0,r.useEffect)(()=>{let clickHandler=e=>{var t;(null===(t=u.current)||void 0===t?void 0:t.contains(e.target))||!g.current||m(!1)};return window.addEventListener("click",clickHandler,{passive:!0}),()=>{window.removeEventListener("click",clickHandler)}},[]),r.createElement(s,{"data-is-marrybaby":p,className:e,style:t},r.createElement(o.B,Object.assign({theme:p?"marryBaby":"helloSites",className:"popover-menu__btn",size:"md",color:"transparent",onClick:()=>m(e=>!e)},d),a),h?r.createElement("div",{ref:u,className:`popover-menu__content --position-${i} --align-${l}`,tabIndex:0,onClick:e=>e.stopPropagation()},"function"==typeof c?c({setShow:m}):c):null)}},"8PyR":function(e,t,a){a.d(t,{G:function(){return GenderOptionControl}});var r=a("vEfc"),o=a("q1tI"),n=a("OyPk"),i=a("XHvu"),l=a("/npG"),s=a("mYVa"),c=a("Eso5"),d=a("SPK5"),p=a("aHnw"),h=a("Wbba"),m=a("uzh1"),u=a("sFNn");let g={lg:{height:48},md:{height:40},sm:{height:32},xs:{height:32}};var b=(0,l.k)((e,{type:t,gap:a,size:r})=>{let o="mb"===e.other.template,n=g[r]||{},i=n.height;return{root:{},wrapper:Object.assign({gap:(0,s.h)(a||8)},"radio"===t&&{justifyContent:"flex-end",gap:(0,s.h)(a||24)}),groupErr:{fontSize:(0,s.h)(14)},itemRoot:Object.assign({},"button"===t?{flexGrow:1,width:"50%",'&[data-checked="true"]':{".mantine-Radio-label":{borderColor:e.fn.primaryColor()}}}:"radio"===t?{padding:`${(0,s.h)(10)} 0`,margin:0}:{}),itemLabelWrapper:{padding:0,width:"100%"},itemLabel:Object.assign({whiteSpace:"nowrap"},"button"===t?{position:"relative",padding:`${(0,s.h)(2)} ${(0,s.h)(16)}`,border:`1px solid ${o?"#EAEAEC":e.colors.gray[2]}`,backgroundColor:"#fff",borderRadius:(0,s.h)(o?16:4),cursor:"pointer",display:"flex",justifyContent:"center",alignItems:"center",height:i,'&[data-disabled="true"]':{background:e.colors.gray[1],color:`${e.colors.gray[4]} !important`,img:{opacity:.5}},img:{height:(0,s.h)("lg"===r?26:22)}}:"radio"===t?{fontSize:(0,s.h)(14)}:{}),itemInner:Object.assign(Object.assign({},"button"===t&&{display:"none"}),"radio"===t&&{alignSelf:"center"}),itemBody:Object.assign({},"radio"===t&&{alignItems:"center"})}});let GenderOptionControl=e=>{var{label:t,availableValue:a,styles:l,isBaby:g,genderValue:x={male:"male",female:"female"},type:f="button",hideLabel:v,labelTextProps:y,labelText:w,gap:k,size:C="md",LabelWrapper:E}=e,_=(0,r.a)(e,["label","availableValue","styles","isBaby","genderValue","type","hideLabel","labelTextProps","labelText","gap","size","LabelWrapper"]);let{t:N}=(0,u.u)(),{classes:$,cx:T,theme:I}=b({type:f,gap:k,size:C},{name:"GenderOptionControl",styles:l}),S="mb"===I.other.template,[z,j]=(0,o.useState)(),B=(0,o.useRef)(null),P=E?{}:Object.assign({as:"label",size:"p2",weight:"semiBold",variant:"primary"},y),W=E||m.T,O=(0,o.useMemo)(()=>[{value:x.male,label:g?N("gender.boy"):N("gender.male"),icon:g?S?o.createElement(n.Z,null):h.C.getAssetPath("health-tools/boy-icon.svg"):h.C.getAssetPath("health-tools/male-icon.svg")},{value:x.female,label:g?N("gender.girl"):N("gender.female"),icon:g?S?o.createElement(i.Z,null):h.C.getAssetPath("health-tools/girl-icon.svg"):h.C.getAssetPath("health-tools/female-icon.svg")}],[]);return(0,o.useEffect)(()=>{j(a)},[a]),o.createElement(c.x,{ref:B,className:$.root},o.createElement(p.R.Group,Object.assign({className:"radio-group",label:v?void 0:o.createElement(W,Object.assign({id:"gender-option-control-label"},P),t||(g?N("tools.selectBabyGender"):N("tools.selectGender"))),size:"lg"},_,{classNames:{error:$.groupErr}},"radio"===f&&{error:null}),o.createElement(d.k,{className:T($.wrapper)},O.map(e=>o.createElement(p.R,Object.assign({className:"gender-item",size:"sm",classNames:{root:$.itemRoot,labelWrapper:$.itemLabelWrapper,label:$.itemLabel,inner:$.itemInner,body:$.itemBody},key:e.value,value:e.value},z&&e.value!==z&&{disabled:!0},{label:o.createElement(d.k,{gap:(0,s.h)(8),align:"center",justify:"center",sx:{zIndex:0}},"button"===f&&("string"==typeof e.icon?o.createElement("img",{src:e.icon,className:"gender-image",alt:"female",loading:"lazy"}):e.icon),o.createElement(m.T,Object.assign({size:"p3"},w),e.label))}))))))}},KaGd:function(e,t,a){a.d(t,{D:function(){return DatePicker}});var r=a("vEfc"),o=a("q1tI"),n=a("8vDj"),i=a("gHhT"),l=a("catb"),s=a("W9Px"),c=a("Wbba"),d=a("6sNj"),p=a("4BRW"),h=a("yNk5");let DatePicker=e=>{var t,{value:a,fullWidth:m=!0}=e,u=(0,r.a)(e,["value","fullWidth"]);let g=(0,n.rZ)(),b="mb"===g.other.template,x=null===(t=s.I[h.env.UNIFY_LOCALE||p.L.Vietnam])||void 0===t?void 0:t.dateFormat;return o.createElement(l.a,Object.assign({locale:d.M[h.env.UNIFY_LOCALE||p.L.Vietnam],valueFormat:x,size:"md",clearable:!1,popoverProps:m?{styles:{dropdown:{minWidth:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}}:{},styles:{root:{position:"relative"},rightSection:{pointerEvents:"none",cursor:"default"}},rightSection:o.createElement(i.E,{src:c.C.getAssetPath(b?"MB-calendar.svg":"OutlineCalendar.svg"),width:18,height:18}),value:a,placeholder:x},u,{className:`input-control ${(null==u?void 0:u.className)||""}`}))}},KoWj:function(e,t,a){a.d(t,{U:function(){return UserAvatar}});var r=a("vEfc"),o=a("q1tI"),n=a("d/ZZ"),i=a("rBCA"),l=a("iBNF");let s=i.Z.div` width: ${e=>e.size||40}px; height: ${e=>e.size||40}px; flex-shrink: 0; cursor: pointer; img { border-radius: 50%; } .avatar { width: 100%; height: 100%; object-fit: cover; } .avatar-default { display: flex; align-items: center; justify-content: center; background-color: ${l.r.colors.secondaryBase}; border-radius: 50%; color: white; font-size: 1em; font-weight: bold; line-height: 1; } &[data-is-marrybaby='true'] { .avatar-default { background-color: ${l.r.mbColors.pink}; } } `,UserAvatar=e=>{var{className:t,isMarryBaby:a,style:i,avatar:l,username:c,size:d}=e,p=(0,r.a)(e,["className","isMarryBaby","style","avatar","username","size"]);let{data:{env:{isMarryBaby:h}}}=(0,o.useContext)(n.T),[m,u]=(0,o.useState)(!1);return o.createElement(s,Object.assign({"data-is-marrybaby":"boolean"==typeof a?a:h,className:t,style:i,size:d},p),l&&!m?o.createElement("img",{loading:"lazy",src:l,className:"avatar",alt:"avatar",onError:()=>{m||u(!0)}}):o.createElement("div",{className:"avatar avatar-default"},c&&(null==c?void 0:c.length)>0?c[0].toUpperCase():"A"))}},ei5w:function(e,t,a){a.d(t,{B:function(){return BabyPoopForm}});var r=a("vEfc"),o=a("q1tI"),n=a("/npG"),i=a("mYVa"),l=a("Eso5"),s=a("iuhU"),c=a("uzh1"),d=a("abax"),p=a("sFNn"),h=a("NEg/"),m=a("eM6a"),u=(0,n.k)((e,{hasOnClickFn:t})=>({root:{position:"relative",display:"flex",flexDirection:"column",gap:(0,i.h)(16)},sponsorBox:{display:"flex",gap:(0,i.h)(12),alignItems:"center",backgroundColor:e.colors.neutral[0],border:`1px solid ${e.colors.neutral[1]}`,borderRadius:(0,i.h)(4),padding:"4px 12px",alignSelf:"flex-start"},sponsorLogo:{maxHeight:(0,i.h)(32)},btn:{minWidth:(0,i.h)(180),[e.fn.largerThan("sm")]:{alignSelf:"flex-end"},visibility:t?"visible":"hidden"}}));let BabyPoopForm=e=>{var{babyPoopPage:t,onClickFindOut:a,currentUrl:n,sponsorLogo:i,btnProps:g,styles:b,classNames:x}=e,f=(0,r.a)(e,["babyPoopPage","onClickFindOut","currentUrl","sponsorLogo","btnProps","styles","classNames"]);let{t:v}=(0,p.u)(),{classes:y}=u({hasOnClickFn:!!a},{name:"BabyPoopForm",styles:b,classNames:x}),{classes:w={}}=(0,o.useContext)(h.C);return o.createElement(m.H.FormRow,null,o.createElement(l.x,Object.assign({className:y.root},f),i&&o.createElement(l.x,{className:y.sponsorBox},o.createElement(c.T,{size:"p4"},v("common.sponsoredBy")),o.createElement("img",{loading:"lazy",src:i,alt:"sponsor",className:y.sponsorLogo})),o.createElement(c.T,{size:"p3",as:"div",className:"description",dangerouslySetInnerHTML:{__html:t.description}}),o.createElement(d.B,Object.assign({className:(0,s.default)(y.btn,w.submitBtn),onClick:a,dataEventCategory:"Health Tool",dataEventAction:"Baby Stool Inquiry",dataEventLabel:n},g),v("babyPoop.findOut"))))}}}]);