"use strict";(self.webpackChunkhhgHealthCareV1=self.webpackChunkhhgHealthCareV1||[]).push([[5374],{35084:function(e,t,a){a.d(t,{B:function(){return gt},D:function(){return be},G:function(){return aa},H:function(){return At},I:function(){return ye},L:function(){return Gt},M:function(){return ya},R:function(){return ke},S:function(){return Be},T:function(){return We},a:function(){return he},c:function(){return Fe},d:function(){return De},f:function(){return Ge},g:function(){return st},i:function(){return Se},l:function(){return Bt},p:function(){return Vt},s:function(){return Ca},t:function(){return La},u:function(){return jt},v:function(){return Sa},x:function(){return Ba},z:function(){return me}});var r=a(46587),n=a(73884),o=a.n(n),i=a(80084),l=a(50315),s=a(10612),c=a(50736),d=a(61718),p=a(36814);if(8068==a.j)var m=a(57387);var g=a(48085);if(8068==a.j)var u=a(73827);var h=a(94858),f=a(99312);if(8068==a.j)var v=a(29019);var x=a(3328);if(8068==a.j)var b=a(68383);var w=a(50191),y=a(74121),k=a(4766),E=a(11851),C=a(35291),$=a(92151),A=a(66298),D=a(27813),M=a(20543),L=a(2118),S=a(44327),z=a(18852),_=a(21447),B=a(81810),N=a(13652),j=a(79672),I=a(65886),P=a(91385),O=a(40927),T=a(7350),F=a.n(T),H=a(25232);if(8068==a.j)var W=a(27516);if(8068==a.j)var R=a(6432);var G=a(48368),U=a(44373),Z=a(13864),V=a(71368),Y=a(74809),K=a(50126),X=a(77686),J=a(79740),q=a(52056),Q=a.n(q);if(8068==a.j)var ee=a(64411);var te=a(33592),ae=a(50345);a(65130);if(8068==a.j)var re=a(29876);var ne=a(85340),oe=a(58156),ie=a.n(oe),le=a(38221),se=a.n(le);if(8068==a.j)var ce=a(42786);if(8068==a.j)var de=a(74520);var pe=a(65606);const me=e=>{var{color:t,stroke:a}=e,o=(0,r._)(e,["color","stroke"]);return n.createElement("svg",Object.assign({width:"1em",height:"1em",viewBox:"0 0 48 48",fill:"none"},o),n.createElement("path",{d:"M24.0003 5.33203L28.4617 19.332H43.3337L31.5177 28.4067L36.1603 42.6654L24.0003 33.852L11.8403 42.6654L16.483 28.4067L4.66699 19.332H19.539L24.0003 5.33203Z",fill:t}),n.createElement("path",{d:"M24.0003 5.33203L28.4617 19.332H43.3337L31.5177 28.4067L36.1603 42.6654L24.0003 33.852L11.8403 42.6654L16.483 28.4067L4.66699 19.332H19.539L24.0003 5.33203Z",stroke:a,strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}))},ge=e=>n.createElement("svg",Object.assign({width:"1em",height:"1em",viewBox:"0 0 16 16",fill:"none"},e),n.createElement("path",{d:"M8.00038 1.77734L6.51327 6.44401H1.55593L5.4946 9.4689L3.94705 14.2218L8.00038 11.284L12.0537 14.2218L10.5062 9.4689L14.4448 6.44401H9.48749L8.00038 1.77734Z",fill:"#E4E8EC"}),n.createElement("path",{d:"M8.00038 1.77734L6.51327 6.44401H1.55594L5.4946 9.4689L3.94705 14.2218L8.00038 11.284L12.0537 14.2218L10.5062 9.4689L14.4448 6.44401H9.48749L8.00038 1.77734Z",stroke:"#D2D6DC",strokeWidth:.5,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M8 1.77734L6.51289 6.44401H1.55556L5.49422 9.4689L3.94667 14.2218L8 11.284V1.77734Z",fill:"#FFB521",stroke:"#FE921D",strokeWidth:.5,strokeLinecap:"round",strokeLinejoin:"round"})),ue=(E.A.a` display: flex; height: 125px; box-sizing: border-box; flex-direction: column; align-items: center; padding: 8px; border: 1px solid ${C.w.colors.neutral100}; background-color: white; border-radius: ${C.w.borderRadius}; box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08); cursor: pointer; text-decoration: none; & > .banner { width: 100%; height: 63px; text-align: center; } & > .content { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: center; word-break: break-word; } * { pointer-events: none; } `,E.A.div` display: flex; &[data-type='vertical'] { flex-direction: column; div { margin-bottom: 20px; } } &[data-type='horizontal'] { flex-wrap: wrap; div { margin-right: 25px; } &[data-is-rectangle] { div { margin-right: 14px; } } } `),he=({name:e,values:t=[],onChanges:a,options:r=[],className:n,type:i="vertical",isDisabled:l,isRectangle:s})=>{const c=(e,r)=>{const n=t.slice();if(r)n.push(e);else{const t=n.findIndex((t=>t===e));n.splice(t,1)}a&&a(n)};return o().createElement(ue,{className:n,"data-type":i,"data-is-rectangle":s||void 0},r.map(((a,r)=>o().createElement($.C,{label:a.label,name:e,key:`${r}-${a.value}`,checked:t.includes(a.value),value:a.value,isDisabled:l||a.disabled,onChange:!l&&c,isRectangle:s}))))},fe={"vi-VN":["Th\xe1ng 1","Th\xe1ng 2","Th\xe1ng 3","Th\xe1ng 4","Th\xe1ng 5","Th\xe1ng 6","Th\xe1ng 7","Th\xe1ng 8","Th\xe1ng 9","Th\xe1ng 10","Th\xe1ng 11","Th\xe1ng 12"],"id-ID":["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],"ms-MY":["Januari","Februari","Mac","April","Mei","Jun","Julai","Ogos","September","Oktober","November","Disember"],"km-KH":["\u1798\u1780\u179a\u17b6","\u1781\u17c2\u1780\u17bb\u1798\u17d2\u1797\u17c8","\u1798\u17b8\u1793\u17b6","\u1781\u17c2\u1798\u17c1\u179f\u17b6","\u17a7\u179f\u1797\u17b6","\u1798\u17b7\u1790\u17bb\u1793\u17b6","\u1781\u17c2\u1780\u1780\u17d2\u1780\u178a\u17b6","\u179f\u17b8\u17a0\u17b6","\u1781\u17c2\u1780\u1789\u17d2\u1789\u17b6","\u178f\u17bb\u179b\u17b6","\u179c\u17b7\u1785\u17d2\u1786\u17b7\u1780\u17b6","\u1792\u17d2\u1793\u17bc"],"en-PH":["January","February","March","April","May","June","July","August","September","October","November","December"],"th-TH":["\u0e21\u0e01\u0e23\u0e32\u0e04\u0e21","\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c","\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21","\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19","\u0e2d\u0e32\u0e08","\u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19","\u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21","\u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21","\u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19","\u0e15\u0e38\u0e25\u0e32\u0e04\u0e21","\u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19","\u0e18\u0e31\u0e19\u0e27\u0e32\u0e04\u0e21"],"my-MM":["\u1007\u1014\u103a\u1014\u101d\u102b\u101b\u102e\u101c","\u1016\u1031\u1016\u1031\u102c\u103a\u101d\u102b\u101b\u102e\u101c","\u1019\u1010\u103a\u101c","\u1015\u103c\u102e\u101c","\u1019\u1031\u101c","\u1007\u103d\u1014","\u1007\u1030\u101c\u102d\u102f\u1004\u103a\u101c","\u101e\u103c\u1002\u102f\u1010\u103a\u101c","\u1005\u1000\u103a\u1010\u1004\u103a\u1018\u102c","\u1021\u1031\u102c\u1000\u103a\u1010\u102d\u102f\u1018\u102c","\u1014\u102d\u102f\u101d\u1004\u103a\u1018\u102c","\u1012\u102e\u1007\u1004\u103a\u1018\u102c"],"zh-TW":["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],"hi-IN":["\u091c\u0928\u0935\u0930\u0940","\u092b\u093c\u0930\u0935\u0930\u0940","\u091c\u0941\u0932\u0942\u0938","\u0905\u092a\u094d\u0930\u0948\u0932","\u092e\u0908","\u091c\u0942\u0928","\u091c\u0941\u0932\u093e\u0908","\u0905\u0917\u0938\u094d\u0924","\u0938\u093f\u0924\u0902\u092c\u0930","\u0905\u0915\u094d\u091f\u0942\u092c\u0930","\u0928\u0935\u0902\u092c\u0930","\u0926\u093f\u0938\u0902\u092c\u0930"]},ve=E.A.div` .pickerContainer { position: relative; padding-top: 0; & > div > svg { position: absolute; top: 36px; right: 16px; cursor: pointer; } & > :not(:first-child) { position: absolute; z-index: 2; width: 100%; } } &[data-is-static] .pickerOverlayWrapper { position: static; max-width: 250px; aspect-ratio: 1 / 1; > .pickerOverlay { padding: 1rem; } } .pickerOverlayWrapper { min-width: 320px; } &[data-align-right='true'] { .pickerOverlayWrapper { right: 0; } } .pickerOverlay { margin-top: 6px; background: white; border-radius: ${C.w.borderRadius}; box-shadow: 0px 6px 12px rgba(67, 86, 100, 0.2); } .picker { width: 100%; } .react-datepicker-popper { .react-datepicker { display: flex; width: 340px; height: 305px; align-items: center; justify-content: center; border: none; box-shadow: (-1px 1px 2px rgba(67, 70, 74, 0.0001)), (-2px 2px 5px rgba(67, 86, 100, 0.123689)); } .svg { cursor: pointer; stroke: ${C.w.colors.gray800}; } .react-datepicker__day { width: 40px; } .react-datepicker__header { border-bottom: 0; background-color: white; } .react-datepicker__day--outside-month { color: #e9e9e9; } .react-datepicker__day { font-weight: ${C.w.sizes.fwBold}; } .react-datepicker__day--selected, .react-datepicker__day--today, .react-datepicker__day--selected:hover, .react-datepicker__day--keyboard-selected { width: 32px; height: 30px; margin: 4px; margin-bottom: -2px; background: ${C.w.colors.primaryBase}; border-radius: 50%; } .react-datepicker__day-name { width: 40px; } .react-datepicker__triangle { display: none; } .react-datepicker__header.react-datepicker__header--custom { svg { stroke: #262626; } select { background: ${C.w.colors.neutral100}; text-align: center; &:not(:last-child) { padding: 8px 10px; margin-right: 15px; border-radius: ${C.w.borderRadius}; } } } } /* DayPicker styles */ .DayPicker { display: inline-block; font-size: 1rem; } .DayPicker-wrapper { position: relative; flex-direction: row; padding-bottom: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .DayPicker-Months { display: flex; flex-wrap: wrap; justify-content: center; } .DayPicker-Month { display: table; margin: 0 16px; margin-top: 16px; border-collapse: collapse; border-spacing: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .DayPicker-NavBar { position: absolute; top: 16px; left: 0; display: flex; width: 100%; height: 0; align-items: center; justify-content: space-between; padding: 0 20px; } .DayPicker-NavButton { width: 24px; height: 24px; margin-bottom: -47px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; color: #8b9898; cursor: pointer; } .DayPicker-NavButton:hover { opacity: 0.8; } .DayPicker-NavButton--prev { //left: 2px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L1 5L5 1' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .DayPicker-NavButton--next { //right: 2px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .DayPicker-NavButton--interactionDisabled { display: none; } .DayPicker-Caption { display: table-caption; width: 100%; height: 46px; padding: 0 32px; } .DayPicker-Caption select { font-size: 16px; font-weight: 600; line-height: 24px; text-align: left; } .DayPicker-Weekdays { display: table-header-group; margin-top: 1em; } .DayPicker-WeekdaysRow { display: table-row; } .DayPicker-Weekday { display: table-cell; padding: 0.5em; color: #8b9898; font-size: 0.875em; text-align: center; } .DayPicker-Weekday abbr[title] { border-bottom: none; text-decoration: none; } .DayPicker-Body { display: table-row-group; } .DayPicker-Week { display: table-row; } .DayPicker-Day { display: table-cell; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; text-align: center; vertical-align: middle; } .DayPicker-WeekNumber { display: table-cell; min-width: 1em; padding: 0.5em; border-right: 1px solid #eaecec; color: #8b9898; cursor: pointer; font-size: 0.75em; text-align: right; vertical-align: middle; } .DayPicker--interactionDisabled .DayPicker-Day { cursor: default; } .DayPicker-Footer { padding-top: 0.5em; } .DayPicker-TodayButton { border: none; background-color: transparent; background-image: none; box-shadow: none; color: #4a90e2; cursor: pointer; font-size: 0.875em; } /* Default modifiers */ .DayPicker-Day--today { color: #d0021b; font-weight: 700; } .DayPicker-Day--outside { color: #8b9898; cursor: default; } .DayPicker-Day--disabled { color: #dce0e0; cursor: default; /* background-color: #eff1f1; */ } /* Example modifiers */ .DayPicker-Day--sunday { background-color: #f7f8f8; } .DayPicker-Day--sunday:not(.DayPicker-Day--today) { color: #dce0e0; } .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not( .DayPicker-Day--outside ) { position: relative; background-color: ${C.w.colors.primaryBase}; color: #f0f8ff; font-weight: ${C.w.sizes.fwBold}; } .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not( .DayPicker-Day--outside ):hover { background-color: #51a0fa; } .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not( .DayPicker-Day--selected ):not(.DayPicker-Day--outside):hover { background-color: #f0f8ff; } /* DayPickerInput */ .DayPickerInput { display: inline-block; } .DayPickerInput-OverlayWrapper { position: relative; } .DayPickerInput-Overlay { position: absolute; z-index: 1; left: 0; background: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); } `,xe=E.A.form` display: flex; width: 100%; height: 46px; align-items: center; justify-content: space-between; & > :first-child { margin-right: 10px; } & * { height: 46px; padding: 10px 10px; background: ${C.w.colors.neutral100}; border-radius: ${C.w.borderRadius}; } `,be=({alignRight:e=!0,placeholder:t,displayDateFormat:a,onChange:r,customInput:i,pickedDate:l,className:s,isStatic:c,disabledDays:d,modifiers:p,UnHideOnClickOutside:m,initialMonth:g,locale:u="en-PH"})=>{const h=(0,n.useRef)(!1),f=A.A,[v,x]=(0,n.useState)(g||new Date),b=(0,n.useRef)(null),w=(0,n.useRef)(null),y=fe[u],k=e=>{m||b.current&&b.current.contains(e.target)||w.current&&w.current.hideDayPicker()},E=(new Date).getFullYear(),C=new Date(E-150,0),$=new Date(E+1,0),D=({date:e,onChange:t,monthLabels:a})=>{const r=[];for(let o=$.getFullYear();o>=C.getFullYear();o-=1)r.push(o);const n=function(e){const{year:a,month:r}=e.target.form;t(new Date(a.value,r.value))};return o().createElement("div",{className:"DayPicker-Caption"},o().createElement(xe,null,o().createElement("select",{name:"month",onChange:n,value:e.getMonth()},a.map(((e,t)=>o().createElement("option",{key:e,value:t},e)))),o().createElement("select",{name:"year",onChange:n,value:e.getFullYear()},r.map((e=>o().createElement("option",{key:e,value:e},e))))))};return(0,n.useEffect)((()=>(document.addEventListener("mousedown",k,{passive:!0}),()=>{document.removeEventListener("mousedown",k,!1)})),[]),o().createElement(ve,{className:s,"data-align-right":e,ref:b,"data-is-static":c||void 0},o().createElement(P.default,{ref:w,inputProps:{readOnly:!0},keepFocus:!1,classNames:{container:"pickerContainer",overlayWrapper:"pickerOverlayWrapper",overlay:"pickerOverlay"},component:i&&o().forwardRef(((e,t)=>o().createElement(i,Object.assign({},e)))),onDayPickerHide:()=>{h.current=!1},onDayPickerShow:()=>{h.current=!0},dayPickerProps:{month:v,className:"picker",selectedDays:l,canChangeMonth:!0,enableOutsideDaysClick:!c,firstDayOfWeek:1,captionElement:({date:e,localeUtils:t})=>{const a=null===t||void 0===t?void 0:t.getMonths();return o().createElement(D,{date:e,monthLabels:y||a,onChange:x})},disabledDays:d||void 0,modifiers:p},format:a||"yyyy-MM-dd",formatDate:(e,t)=>f(e,t),hideOnDayClick:!c,placeholder:t||"",onDayChange:e=>{var t;t=e,w.current&&!c&&w.current.hideDayPicker(),r&&r(t)},showOverlay:c}))},we=E.A.div` display: flex; align-items: center; --font-weight-lg: ${C.w.sizes.fwBold}; --font-weight-md: ${C.w.sizes.fwRegular}; --font-weight-sm: ${C.w.sizes.fwRegular}; &[data-icon-position='left'] { & > *:first-child { margin-right: 8px; } & > *:last-child { width: calc(100% - 24px); } } &[data-icon-position='right'] { & > *:first-child { width: calc(100% - 24px); } & > *:last-child { margin-left: 8px; } } ${k.M.mbDown} { &[data-size='lg'] { font-size: 16px; line-height: 24px; font-weight: var(--font-weight-lg); } &[data-size='md'] { font-size: 14px; line-height: 22px; font-weight: var(--font-weight-md); } &[data-size='sm'] { font-size: 13px; line-height: 20px; font-weight: var(----font-weight-sm); } } `,ye=({size:e,iconPosition:t,className:a,children:r,icon:n})=>o().createElement(we,{className:a,"data-size":e,"data-icon-position":t},"left"===t&&n,r,"right"===t&&n),ke=o().forwardRef((({id:e,value:t,options:a,className:r,isDisabled:c,size:d="small",direction:p="vertical",onChange:m,dataEventCategory:g,dataEventAction:u,dataEventLabel:h},f)=>{const[v,x]=(0,n.useState)(t);(0,n.useImperativeHandle)(f,(()=>({reset(){x(t)}})));const b="small"===d?"md":"lg",w="vertical"===p?l.B:s.Y;return o().createElement(i.R.Group,{name:e,className:r,size:b,value:String(v),defaultValue:t,onChange:e=>{x(e),null===m||void 0===m||m(e)}},o().createElement(w,{spacing:"xl"},a.map((e=>o().createElement(i.R,{key:e.value,value:e.value,label:e.label,disabled:c,"data-event-category":g,"data-event-action":u,"data-event-label":h})))))})),Ee=E.A.div` --menu-width: 240px; --menu-spacing: 28px 16px; width: var(--menu-width); height: 100vh; padding: var(--menu-spacing); background-color: ${C.w.colors.neutral50}; transition: ease-in-out 0.5s; &[data-is-collapsed] { --menu-width: 64px; --menu-spacing: 28px 8px; } `,Ce=E.A.div` display: flex; align-items: baseline; justify-content: space-between; svg { transition: 0.4s ease-in-out; } `,$e=E.A.div` cursor: pointer; &[data-is-collapsed] { transform: rotate(180deg); } `,Ae=E.A.figure` display: flex; > img, svg, picture { width: 40px; height: 40px; margin-right: 1rem; border-radius: 6px; object-fit: cover; } > figcaption { p + p { margin-top: 2px; } } `,De=({name:e,description:t,image:a,isDescriptionHidden:r})=>o().createElement(Ae,null,a,!r&&o().createElement("figcaption",null,o().createElement(y.T,{size:"p4",weight:"bold"},e),o().createElement(y.T,{size:"p4"},t))),Me=E.A.div` display: flex; align-items: center; margin-top: 24px; margin-bottom: 36px; figcaption { white-space: nowrap; } &[data-is-collapsed='true'] { img { max-width: 2rem; max-height: 2rem; } } `,Le=E.A.div` display: flex; align-items: center; padding: 9px 21px; margin-bottom: 4px; border-radius: 6px; &:not([data-is-link-active]) { cursor: pointer; } p { margin-left: 12px; } &[data-is-link-active] { background: ${C.w.colors.primaryBase}; } &[data-is-link-collapsed] { justify-content: center; margin-right: -14px; margin-left: -14px; } `;var Se=Object.freeze({__proto__:null,SideMenu:({isCollapsed:e,className:t,style:a,children:r})=>o().createElement(Ee,{style:a,className:t,"data-is-collapsed":e||void 0},r),SideHeader:({isCollapsed:e,defaultLogo:t,onBackClick:a,customIcon:r})=>o().createElement(Ce,null,o().createElement(O.L,{type:e?"logomark":t||"hellocare",customSize:{width:e?"24px":"77px",height:"24px"}}),o().createElement($e,{"data-is-collapsed":e||void 0,onClick:a},r||o().createElement("svg",{"data-name":"Layer 1",viewBox:"0 0 20 20",width:"20px",height:"20px"},o().createElement("path",{d:"M10 .75A9.25 9.25 0 1019.25 10 9.25 9.25 0 0010 .75z",fill:"none",stroke:"#d2d6dc",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5"}),o().createElement("path",{d:"M11.44 6.53L8 10l3.48 3.47",fill:"none",stroke:"#737373",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5"})))),UserInfo:({isCollapsed:e,userName:t,role:a,avatar:r})=>o().createElement(Me,{"data-is-collapsed":e||void 0},o().createElement(De,{image:r,name:t,description:a,isDescriptionHidden:e})),MenuLink:({icon:e,isActive:t,children:a,isCollapsed:r,activeIcon:n,onLinkClick:i,textSize:l="base",textType:s="bold",textColorActive:c="#fff",textColor:d="#595959"})=>o().createElement(Le,{"data-is-link-active":t||void 0,onClick:i,"data-is-link-collapsed":r||void 0},t&&n?n:e,!r&&o().createElement(y.T,{size:l,weight:s,color:t?c:d},a))});const ze=E.A.div` position: relative; width: 100%; > .container { display: flex; width: 100%; -ms-overflow-style: none; overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } .section { display: flex; width: 100%; flex-direction: column; flex-shrink: 0; margin: auto; > .grid-layout { display: grid; width: 100%; grid-row-gap: 8px; > .item-grid { width: 100%; > * { margin: 0 auto; } } } .progress-bar { display: grid; height: 15px; margin-bottom: 10px; .items-progress { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; .icon-status { position: absolute; display: flex; } .line { width: 50%; height: 2px; background-color: ${C.w.colors.gray600}; } } } } } .bullet-nav { position: absolute; z-index: ${C.w.zIndexes.belowHeader}; bottom: -30px; left: 50%; display: flex; transform: translate(-50%, -50%); } .bullet-nav__link { display: block; width: 8px; height: 8px; padding: 0; margin-right: 8px; backface-visibility: hidden; background-color: #e4e8ec; border-radius: 50%; cursor: pointer; transition: all 0.3s; &.active { &[data-scheme='hellosites'] { background-color: ${C.w.colors.primary600}; } &[data-scheme='marrybaby'] { background-color: ${C.w.mbColors.pink}; } } } .arrow-left { position: absolute; z-index: 10; top: 50%; left: -35px; transform: translateY(-50%); &[data-event-category] > * { pointer-events: none; } } .arrow-right { position: absolute; z-index: 10; top: 50%; right: -35px; transform: translateY(-50%); &[data-event-category] > * { pointer-events: none; } } .image-gallery-wrapper { display: flex; position: relative; margin-top: 16px; justify-content: center; gap: 16px; .image-block { display: block; width: 100%; border: 2px solid transparent; border-radius: 4px; } .image-block.active { border-color: ${C.w.colors.primaryBase}; } img { height: 40px; width: auto; max-width: 100%; } } `,_e=({status:e})=>"inActive"===e?o().createElement("svg",{width:"6",height:"6",viewBox:"0 0 6 6",fill:"none"},o().createElement("circle",{cx:"3",cy:"3",r:"3",fill:"#ADB3BC"})):"active"===e?o().createElement("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},o().createElement("circle",{cx:"6",cy:"6",r:"4",fill:"#2D87F3"}),o().createElement("circle",{cx:"6",cy:"6",r:"5.5",stroke:"#2D87F3"})):"done"===e?o().createElement("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},o().createElement("path",{d:"M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z",fill:"#00B16A"}),o().createElement("path",{d:"M8.76061 4.20029L4.80061 7.80029L3.00061 6.16392",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})):o().createElement("svg",{width:"6",height:"6",viewBox:"0 0 6 6",fill:"none"},o().createElement("circle",{cx:"3",cy:"3",r:"3",fill:"#ADB3BC"})),Be=({row:e=2,column:t=3,isDotsShown:a=!0,isImageGalleryShown:r=!1,mode:i="infinity",type:l="separated",distanceOverlappedLeft:s={amount:0,unit:"pixel"},children:c,className:d,isProgressShown:p=!1,statusChildren:m,isArrowShown:g=!1,classNameLeftArrow:u,classNameRightArrow:h,dataEventCategory:f,dataEventAction:v,dataEventLabel:x,onChangePage:b,page:w,customPageWidth:y,scheme:k="hellosites",arrowType:E="Discover"})=>{const C="number"===typeof w,[$,A]=(0,n.useState)(C?w:0),D=[];o().Children.map(c,((a,r)=>{r%(e*t)===0&&D.push([]),D[D.length-1].push(o().cloneElement(a))}));const M=(0,n.useRef)(),L=(0,n.useRef)(0),S=e=>{if(!M.current)return;const{clientWidth:t}=M.current,a=y||t,r="intertwined"===l?"percentage"===s.unit?e*a+s.amount/100*a*e:e*a+s.amount*a*e:e*a;M.current.scrollTo({top:0,left:r,behavior:"smooth"}),L.current=e,A(e),b&&b(e)};(0,n.useEffect)((()=>{"number"===typeof w&&(e=>{if(!M.current)return;const{clientWidth:t}=M.current,a=y||t,r="intertwined"===l?"percentage"===s.unit?e*a+s.amount/100*a*e:e*a+s.amount*a*e:e*a;M.current.scrollTo({top:0,left:r,behavior:"smooth"}),L.current=e,A(e)})(w)}),[w]);const z=e=>{if(!M.current)return;const{clientWidth:t}=M.current,a=y||t;let r;r=0===$?0:$*a,"forward"===e&&(r===a*(D.length-1)?(A(D.length-1),r=a*(D.length-1),b&&b(D.length-1)):(A($+1),r+=a,b&&b($+1)),M.current.scrollTo({top:0,left:r,behavior:"smooth"})),"back"===e&&(0===r?(A(0),b&&b(0),r=0):(A($-1),b&&b($-1),r-=a),M.current.scrollTo({top:0,left:r,behavior:"smooth"}))},_=F()((()=>{if("infinity"===i){if(!M.current)return;const{clientWidth:e,scrollLeft:t}=M.current,a=y||e,r=Math.floor(t/a);A(r),b&&b(r)}}),400);return(0,n.useEffect)((()=>{if("snapped"===i){let e,t,a,r,n,o,i=!1;const c=M.current,d=(o,l)=>{i=!0,a=!1,r=!1,e=o-c.offsetLeft,t=l-c.offsetTop,n=c.scrollLeft},p=e=>{d(e.pageX,e.pageY)},m=e=>{d(e.touches[0].pageX,e.touches[0].pageY)},g=()=>{if(i=!1,a=!1,r=!1,!M.current)return;const{clientWidth:e}=M.current,t=y||e,n="ltr"===o?0!==L.current?L.current-1:L.current:"rtl"===o&&L.current{if(!i)return;const d=l-c.offsetLeft,p=s-c.offsetTop,m=d-e,g=p-t;a||r||!(g>20||g<-20)||(a=!0),!a&&(m>20||m<-20)&&(r=!0,c.scrollLeft=n-m,m>0&&(o="ltr"),m<0&&(o="rtl"),0===m&&(o="none"))},h=e=>{r&&e.preventDefault(),u(e.pageX,e.pageY)},f=e=>{r&&e.preventDefault(),u(e.touches[0].pageX,e.touches[0].pageY)};return null===c||void 0===c||c.addEventListener("mousedown",p,{passive:!0}),null===c||void 0===c||c.addEventListener("touchstart",m,{passive:!0}),window.addEventListener("mouseup",g,{passive:!0}),window.addEventListener("touchend",g,{passive:!0}),null===c||void 0===c||c.addEventListener("mousemove",h,{passive:!0}),null===c||void 0===c||c.addEventListener("touchmove",f,{passive:!0}),()=>{null===c||void 0===c||c.removeEventListener("mousedown",p),null===c||void 0===c||c.removeEventListener("touchstart",m),window.removeEventListener("mouseup",g),window.removeEventListener("touchend",g),null===c||void 0===c||c.removeEventListener("mousemove",h),null===c||void 0===c||c.removeEventListener("touchmove",f)}}}),[]),o().createElement(ze,{className:d,"data-row":e,onScroll:_},g&&$>0&&o().createElement("div",{className:`${u} arrow-left`,onClick:()=>z("back"),"data-event-category":f,"data-event-action":v,"data-event-label":x},"Care"===E?o().createElement("svg",{width:"42",height:"42",viewBox:"0 0 42 42",fill:"none"},o().createElement("g",{filter:"url(#filter0_dd_12599_34420)"},o().createElement("path",{d:"M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3V3C31.8368 3 39.0002 10.1634 39.0002 19V19C39.0002 27.8366 31.8368 35 23.0002 35V35C14.1637 35 7.00024 27.8366 7.00024 19V19Z",fill:"white"}),o().createElement("path",{d:"M20.9293 19L24.7503 15.179C25.1643 14.765 25.1643 14.093 24.7503 13.679C24.3363 13.265 23.6643 13.265 23.2503 13.679L18.6363 18.293C18.2453 18.684 18.2453 19.317 18.6363 19.707L23.2503 24.321C23.6643 24.735 24.3363 24.735 24.7503 24.321C25.1643 23.907 25.1643 23.235 24.7503 22.821L20.9293 19Z",fill:"#595959"}),o().createElement("path",{d:"M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z",fill:"#DBDFE5"})),o().createElement("defs",null,o().createElement("filter",{id:"filter0_dd_12599_34420",x:"0.000244141",y:"0",width:"42",height:"42",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},o().createElement("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),o().createElement("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),o().createElement("feOffset",{dx:"-2",dy:"2"}),o().createElement("feGaussianBlur",{stdDeviation:"2.5"}),o().createElement("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.263201 0 0 0 0 0.335725 0 0 0 0 0.393257 0 0 0 0.123689 0"}),o().createElement("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_12599_34420"}),o().createElement("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),o().createElement("feOffset",{dx:"-1",dy:"1"}),o().createElement("feGaussianBlur",{stdDeviation:"1"}),o().createElement("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.264489 0 0 0 0 0.275745 0 0 0 0 0.28861 0 0 0 0.01 0"}),o().createElement("feBlend",{mode:"normal",in2:"effect1_dropShadow_12599_34420",result:"effect2_dropShadow_12599_34420"}),o().createElement("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect2_dropShadow_12599_34420",result:"shape"})))):o().createElement("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none"},o().createElement("path",{d:"M15.9996 28.2218C22.7497 28.2218 28.2218 22.7497 28.2218 15.9996C28.2218 9.24942 22.7497 3.77734 15.9996 3.77734C9.24942 3.77734 3.77734 9.24942 3.77734 15.9996C3.77734 22.7497 9.24942 28.2218 15.9996 28.2218Z",stroke:"hellosites"===k?"#2D87F3":"#e85388",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),o().createElement("path",{d:"M15.9997 11.1109L11.1108 15.9998L15.9997 20.8887",stroke:"hellosites"===k?"#2D87F3":"#e85388",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),o().createElement("path",{d:"M20.8886 15.999L11.1108 15.999",stroke:"hellosites"===k?"#2D87F3":"#e85388",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))),o().createElement("div",{ref:M,className:"container",style:{overflowX:"snapped"===i||g?"hidden":"scroll"}},D.map(((a,r)=>{let n=0;for(let e=0;e{const i=n+t,l=m.find((e=>e.index===i));return o().createElement("div",{className:"items-progress",key:t},0===t&&0===r?o().createElement("div",{className:"line",style:{visibility:"hidden"}}):o().createElement("div",{className:"line"}),o().createElement("div",{className:"icon-status"},o().createElement(_e,{status:null===l||void 0===l?void 0:l.status})),r===D.length-1&&t===a.length-1?o().createElement("div",{className:"line",style:{visibility:"hidden"}}):o().createElement("div",{className:"line"}))}))),o().createElement("div",{className:"grid-layout","data-index":r,style:{gridTemplateColumns:`repeat(${t}, 1fr)`,gridTemplateRows:`repeat(${e}, 1fr)`}},a.map(((e,t)=>o().createElement(o().Fragment,{key:t},o().createElement("div",{className:"item-grid",key:t},e))))))}))),g&&$z("forward"),"data-event-category":f,"data-event-action":v,"data-event-label":x}," ","Care"===E?o().createElement("svg",{width:"42",height:"42",viewBox:"0 0 42 42",fill:"none"},o().createElement("g",{filter:"url(#filter0_dd_12597_34423)"},o().createElement("path",{d:"M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3C31.8368 3 39.0002 10.1634 39.0002 19C39.0002 27.8366 31.8368 35 23.0002 35C14.1637 35 7.00024 27.8366 7.00024 19Z",fill:"white"}),o().createElement("path",{d:"M24.0712 19L20.2502 15.179C19.8362 14.765 19.8362 14.093 20.2502 13.679C20.6642 13.265 21.3362 13.265 21.7502 13.679L26.3642 18.293C26.7552 18.684 26.7552 19.317 26.3642 19.707L21.7502 24.321C21.3362 24.735 20.6642 24.735 20.2502 24.321C19.8362 23.907 19.8362 23.235 20.2502 22.821L24.0712 19Z",fill:"#595959"}),o().createElement("path",{d:"M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z",fill:"#DBDFE5"})),o().createElement("defs",null,o().createElement("filter",{id:"filter0_dd_12597_34423",x:"0.000244141",y:"0",width:"42",height:"42",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},o().createElement("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),o().createElement("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),o().createElement("feOffset",{dx:"-2",dy:"2"}),o().createElement("feGaussianBlur",{stdDeviation:"2.5"}),o().createElement("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.263201 0 0 0 0 0.335725 0 0 0 0 0.393257 0 0 0 0.123689 0"}),o().createElement("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_12597_34423"}),o().createElement("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),o().createElement("feOffset",{dx:"-1",dy:"1"}),o().createElement("feGaussianBlur",{stdDeviation:"1"}),o().createElement("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.264489 0 0 0 0 0.275745 0 0 0 0 0.28861 0 0 0 0.01 0"}),o().createElement("feBlend",{mode:"normal",in2:"effect1_dropShadow_12597_34423",result:"effect2_dropShadow_12597_34423"}),o().createElement("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect2_dropShadow_12597_34423",result:"shape"})))):o().createElement("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none"},o().createElement("path",{d:"M15.9996 28.2218C22.7497 28.2218 28.2218 22.7497 28.2218 15.9996C28.2218 9.24942 22.7497 3.77734 15.9996 3.77734C9.24942 3.77734 3.77734 9.24942 3.77734 15.9996C3.77734 22.7497 9.24942 28.2218 15.9996 28.2218Z",stroke:"hellosites"===k?"#2D87F3":"#e85388",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),o().createElement("path",{d:"M15.9998 20.8891L20.8887 16.0002L15.9998 11.1113",stroke:"hellosites"===k?"#2D87F3":"#e85388",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),o().createElement("path",{d:"M11.1109 16L20.8887 16",stroke:"hellosites"===k?"#2D87F3":"#e85388",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))),a&&o().createElement("ul",{className:"bullet-nav"},D.map(((e,t)=>o().createElement("li",{key:t,className:"bullet-nav__item "},o().createElement("p",{onClick:()=>S(t),className:`bullet-nav__link scroll ${$==t?"active":null}`,"data-scheme":k}))))),r&&o().createElement("div",{className:"image-gallery-wrapper","data-test":D.length},D.slice(0,3).map(((e,t)=>o().createElement("div",{className:`image-block ${$==t?"active":null}`,key:t,onClick:()=>S(t),"data-scheme":k},e)))))},Ne=(E.A.div` border-radius: ${C.w.borderRadius}; ${e=>e["data-is-in-card"]&&`\n padding: 12px; \n background-color: ${e["data-card-color"]};`} `,E.A.div` width: 13px; height: 13px; margin-right: 10px; background-color: ${e=>e["data-color"]}; border-radius: 50%; `,E.A.div` display: flex; align-items: center; color: ${C.w.colors.gray800}; font-size: ${C.w.sizes.fsParagraph4}; font-weight: ${C.w.sizes.fwRegular}; `,E.A.div` display: flex; align-items: center; margin-top: 4px; color: ${C.w.colors.gray800}; font-size: ${C.w.sizes.fsHeading2}; font-weight: ${C.w.sizes.fwSemiBold}; & > svg { width: 24px; height: 24px; margin-right: 12px; } &[data-size='small'] { margin-left: 23px; font-size: ${C.w.sizes.fsParagraph4}; font-weight: ${C.w.sizes.fwBold}; } `,E.A.table` width: 100%; position: relative; `),je=E.A.td` padding: var(--vertical-spacing) var(--horizontal-spacing); vertical-align: middle; &[data-text-align='left'] { text-align: left; } &[data-text-align='right'] { text-align: right; } &[data-text-align='center'] { text-align: center; } `,Ie=E.A.tr` border-bottom: 1px solid ${C.w.colors.gray100}; &[data-is-active='true'] { background-color: ${C.w.colors.gray200}; } `,Pe=({children:e,className:t,style:a,isActive:r,onRowClicked:n,rowId:i})=>o().createElement(Ie,{className:t,"data-is-active":r,style:a,onClick:()=>{n&&n(i)}},e),Oe=E.A.thead` th { padding: var(--vertical-spacing) var(--horizontal-spacing); text-align: left; color: ${C.w.colors.gray500}; font-weight: ${C.w.sizes.fwBold}; } &[data-is-sticky] { th { position: sticky; top: 0; background: white; border-bottom: 2px solid ${C.w.colors.gray200}; } } `,Te=E.A.tbody` position: relative; &[data-is-striped] { > tr:nth-child(odd) { background-color: ${C.w.colors.neutral50}; } } &[data-is-hoverable] { > tr:hover { background-color: ${C.w.colors.neutral100}; } } `;var Fe=Object.freeze({__proto__:null,Table:({children:e,className:t,style:a,horizontalPadding:r,verticalPadding:n})=>o().createElement(Ne,{className:t,style:Object.assign({"--horizontal-spacing":r||"19px","--vertical-spacing":n||"26px"},a)},e),Cell:({children:e,className:t,style:a,textAlign:r,isTableHead:n})=>o().createElement(je,{className:t,style:a,"data-text-align":r||"left",as:n?"th":"td"},e),Head:({isSticky:e,children:t,className:a,style:r})=>o().createElement(Oe,{className:a,"data-is-sticky":e||void 0,style:r},o().createElement(Pe,null,t)),Row:Pe,Body:({children:e,className:t,style:a,isHoverable:r,isStriped:n})=>o().createElement(Te,{className:t,style:a,"data-is-striped":n||void 0,"data-is-hoverable":r||void 0},e)}),He=(0,c.r)((e=>{const t=(0,d.k)("itemLabel");return{root:{display:"inline-flex",maxWidth:"100%",borderBottom:`1px solid ${e.colors.neutral[1]}`,"-webkit-overflow-scrolling":"touch",overflowX:"auto",overflowY:"hidden","-ms-overflow-style":"none","scrollbar-width":"none","&::-webkit-scrollbar":{display:"none"},columnGap:e.spacing.lg},item:{display:"flex",alignItems:"center",paddingBottom:"4px","&:hover":{cursor:"pointer"},"&.active":{color:e.fn.primaryColor(),borderBottom:`3px solid ${e.fn.primaryColor()}`,bottom:"-1px",position:"relative",[`& .${t}`]:{}}},itemInner:{display:"flex",alignItems:"center"},label:{ref:t},icon:{marginRight:e.spacing.xs}}}));const We=({style:e,initialTab:t,tabContent:a,onChange:r,className:i,dataEventCategory:l,dataEventAction:s,dataEventLabel:c,id:d,styles:p})=>{const{classes:m,cx:g,theme:u}=He(void 0,{name:"Tabs",styles:p}),[h,f]=(0,n.useState)(t||0);return(0,n.useEffect)((()=>{f(t)}),[t]),o().createElement("ul",{style:e,className:g(m.root,i),role:"tablist",id:d},a.map(((e,t)=>o().createElement("li",{className:`${m.item} ${h===t?"active":""} ${e.className}`,"aria-selected":h===t,role:"tab",onClick:()=>{f(t),r&&r(t)},onKeyDown:e=>{"Enter"===e.key&&(f(t),r&&r(t))},key:t,"data-event-category":e.dataEventCategory||l,"data-event-action":e.dataEventAction||s,"data-event-label":e.dataEventLabel||c,tabIndex:0,"data-testid":e.dataTestid},o().createElement("div",{className:m.itemInner},e.icon&&o().createElement("div",{className:m.icon},e.icon),o().createElement(y.T,{className:m.label,size:e.textSize||"sm",weight:e.textType||"bold",color:h===t?u.fn.primaryColor():e.textColor||u.colors.gray[4],dataEventCategory:e.dataEventCategory,dataEventAction:e.dataEventAction,dataEventLabel:e.dataEventLabel},e.name))))))},Re=200,Ge=(E.A.div``,E.A.div` width: 100vw; height: 100vh; position: fixed; bottom: 0; right: 0; background-color: ${C.w.colors.white}; opacity: 0.83; transition: display ${Re}ms linear; [data-floatmenu-open='true'] & { animation: showBackgroundPanel ${Re}ms linear 0s normal forwards; } [data-floatmenu-open='false'] & { animation: hideBackgroundPanel ${Re}ms linear 0s normal forwards; } @keyframes showBackgroundPanel { 0% { opacity: 0; width: 100vw; height: 100vh; } 100% { opacity: 0.83; } } @keyframes hideBackgroundPanel { 0% { width: 100vw; height: 100vh; } 99% { width: 100vw; height: 100vh; } 100% { opacity: 0; width: 0; height: 0; } } `,E.A.div` position: fixed; right: 16px; bottom: 40px; `,E.A.div` display: flex; flex-direction: column; gap: 16px; transition: all ${Re}ms ease-in-out; position: fixed; bottom: 112px; right: 16px; // scale [data-animation-type='scale'] & { transform-origin: 100% 100%; } [data-animation-type='scale'][data-floatmenu-open='true'] & { transform: scale(1); } [data-animation-type='scale'][data-floatmenu-open='false'] & { transform: scale(0); bottom: 46px; right: 36px; } `,E.A.div` border-radius: 50%; width: 56px; height: 56px; position: relative; cursor: pointer; margin-left: auto; transition: all 0.1s linear; -webkit-tap-highlight-color: transparent; [data-site-type='hb'] & { background-color: ${C.w.colors.primaryBase}; &:hover { background-color: ${C.w.colors.primaryHover}; } } [data-site-type='mb'] & { background-color: #2d87f3; &:hover { background-color: #2c74df; } } &:before { content: ''; width: 2px; height: 20px; background-color: ${C.w.colors.white}; border-radius: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &:after { content: ''; width: 20px; height: 2px; background-color: ${C.w.colors.white}; border-radius: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [data-floatmenu-open='true'] &:before, [data-floatmenu-open='true'] &:after { animation: toX ${Re}ms linear 0s normal forwards; } [data-floatmenu-open='false'] &:before, [data-floatmenu-open='false'] &:after { animation: toPlus ${Re}ms linear 0s normal forwards; } @keyframes toX { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 49% { transform: translate(-50%, -50%) rotateZ(0deg); } 50% { width: 2px; height: 2px; transform: translate(-50%, -50%) rotateZ(45deg); } 100% { transform: translate(-50%, -50%) rotateZ(45deg); } } @keyframes toPlus { 0% { transform: translate(-50%, -50%) rotateZ(45deg); } 49% { transform: translate(-50%, -50%) rotateZ(45deg); } 50% { width: 2px; height: 2px; transform: translate(-50%, -50%) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateZ(0deg); } } `,E.A.div` display: flex; gap: 8px; align-items: center; justify-content: flex-end; width: fit-content; margin-left: auto; [data-floatmenu-open='true'] { cursor: pointer; } [data-floatmenu-open='false'] { pointer-events: none; } [data-animation-type='zoom'] &, [data-animation-type='slide'] & { position: absolute; right: 0; width: max-content; } // slide [data-animation-type='slide'] & { transition: all ${Re}ms ease-in; } [data-animation-type='slide'][data-floatmenu-open='true'] & { animation: showItem ${Re}ms; } [data-animation-type='slide'][data-floatmenu-open='false'] & { bottom: -64px !important; animation: hideItemOnZoom ${250}ms normal forwards; } // zoom [data-animation-type='zoom'][data-floatmenu-open='false'] & { animation: hideItemOnZoom ${250}ms normal forwards; } @keyframes showItem { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hideItemOnZoom { 0% { transform: translateX(0); opacity: 1; } 99% { transform: translateX(0); opacity: 0.5; } 100% { transform: translateX(calc(100% + 16px)); opacity: 0; } } `,E.A.div` font-size: 14px; // zoom [data-animation-type='zoom'] & { transition: transform ${Re}ms ease-in-out; transform-origin: 100% 0; } [data-animation-type='zoom'][data-floatmenu-open='true'] & { transform: scale(1); } [data-animation-type='zoom'][data-floatmenu-open='false'] & { transform: scale(0); } // slide [data-animation-type='slide'] & { transition: opacity ${Re}ms; } [data-animation-type='slide'][data-floatmenu-open='true'] & { opacity: 1; } [data-animation-type='slide'][data-floatmenu-open='false'] & { opacity: 0; } `,E.A.div` border-radius: 50%; box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: ${C.w.colors.white}; // zoom [data-animation-type='zoom'] & { transition: transform ${Re}ms ease-in-out; } [data-animation-type='zoom'][data-floatmenu-open='true'] & { transform: scale(1); } [data-animation-type='zoom'][data-floatmenu-open='false'] & { transform: scale(0); } > img { width: 24px; height: 24px; object-fit: contain; } `,E.A.div` padding: 16px; width: 375px; word-wrap: break-word; word-break: break-word; ${k.M.mbDown} { width: 100%; } &[data-theme='helloSites'] { background: ${C.w.colors.secondaryBase}; box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.1); } &[data-theme='marryBaby'] { border: none; background: ${C.w.mbColors.pink}; border-radius: 12px 12px 0 0; } &[data-is-open='false'] { display: none; } &[data-default-position='true'] { position: fixed; z-index: 1000; bottom: 0; right: 0; ${k.M.mbDown} { left: 0; right: unset; } } `,E.A.p` position: relative; padding-left: 24px; color: ${C.w.colors.white}; font-size: 14px; font-weight: 600; line-height: 22px; &[data-has-content='true'] { ::before { position: absolute; top: 0; bottom: 0; left: 0; width: 16px; height: 16px; margin: auto 0; content: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.00001 1.33331C4.32001 1.33331 1.33334 4.31998 1.33334 7.99998C1.33334 11.68 4.32001 14.6666 8.00001 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00001 1.33331ZM8.00001 11.3333C7.63334 11.3333 7.33334 11.0333 7.33334 10.6666V7.99998C7.33334 7.63331 7.63334 7.33331 8.00001 7.33331C8.36668 7.33331 8.66668 7.63331 8.66668 7.99998V10.6666C8.66668 11.0333 8.36668 11.3333 8.00001 11.3333ZM7.33334 5.99998H8.66668V4.66665H7.33334V5.99998Z' fill='white'/%3e%3c/svg%3e"); } } `,E.A.p` margin-top: 2px; color: ${C.w.colors.white}; font-size: 12px; font-weight: 400; line-height: 18px; a { color: ${C.w.colors.white}; text-decoration: none; text-decoration-line: underline; } `,E.A.div` display: flex; align-items: center; margin-top: 8px; gap: 16px; `,E.A.div` padding: 7px 28px; background: ${C.w.colors.white}; border-radius: ${C.w.borderRadius}; color: ${C.w.colors.secondaryBase}; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 18px; `,E.A.a` color: ${C.w.colors.white}; font-size: 12px; font-weight: 600; line-height: 22px; text-decoration: none; text-decoration-line: underline; `,({SEOData:e={},locale:t="vi-VN",routerPathname:a,routerQuery:r,nextHead:i,siteType:l,seoCustom:s,userId:c,forcedCanonicalUrl:d})=>{var p,m,g,u,h,f,v,x,w,y,k,E;const{totalPages:C,currentPage:$,SEOTitle:A="",SEODescription:D="",SEOImage:M,seoType:L,SEOImageWidth:S,SEOImageHeight:z,customMetaData:_=[],isIndexable:B=!0,hasNoCanonical:N=!1}=e,j=B&&R.K?"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1":"noindex",{NEXT_PUBLIC_BASE_API_URL:I}=pe.env;let P=e.canonicalUrl||a;Object.keys(r).forEach((e=>{const t=r[e];t&&Array.isArray(t)&&(P=P.replace(`[...${e}]`,t.join("/")))}));const O=t||"en-PH",T="helloSites"===l?W.y[O]:"www.marrybaby.vn",F=P.endsWith("/")?"":"/",G=(0,n.useMemo)((()=>{var a,r,n,i,l,s,c;let d="";if(e.apiMetaData&&"string"===typeof e.apiMetaData){const p=null===(a=e.apiMetaData)||void 0===a?void 0:a.match(/(.*)<\/title>/),m=` - Page ${$} of ${C}`,g=$&&1!==$&&p?e.apiMetaData.replace(p[0],p[0].includes("-")?p[0].replace("-",m+" - "):`${p[1].concat(m)}`).replace(``,``):e.apiMetaData;if(d=(0,H.Ay)(g,{trim:!0}),!d.find((e=>{var t,a;return"og:image"===(null===(t=e.props)||void 0===t?void 0:t.property)||"og:image:secure_url"===(null===(a=e.props)||void 0===a?void 0:a.property)}))){const a=`https://${T}/images/${t}.png`;d=[...d,o().createElement("meta",{key:"og:image",property:"og:image",content:(null===(r=e.openGraph)||void 0===r?void 0:r.image)||M||a||""}),o().createElement("meta",{key:"og:image:secure_url",property:"og:image:secure_url",content:(null===(n=e.openGraph)||void 0===n?void 0:n.image)||M||a}),o().createElement("meta",{key:"og:image:width",property:"og:image:width",content:(null===(i=e.openGraph)||void 0===i?void 0:i.imageWidth)&&String(null===(l=e.openGraph)||void 0===l?void 0:l.imageWidth)||S&&String(S)||"1200"}),o().createElement("meta",{key:"og:image:height",property:"og:image:height",content:(null===(s=e.openGraph)||void 0===s?void 0:s.imageHeight)&&String(null===(c=e.openGraph)||void 0===c?void 0:c.imageHeight)||z&&String(z)||"630"})]}}return d}),[e.apiMetaData,e.openGraph,M,z,S,$,P,C,t,T]),U=`https://${T}/images/${t}.png`,Z="marryBaby"===l?"https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap":"km-KH"===t?"https://fonts.googleapis.com/css2?family=Battambang:wght@400;700&display=swap":"th-TH"===t?"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wdth,wght@62.5..100,100..900&display=swap":"https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap";return o().createElement(i,null,o().createElement("link",{rel:"preconnect",href:"https://fonts.gstatic.com"}),o().createElement("link",{rel:"preload",href:Z,as:"style"}),o().createElement("link",{rel:"stylesheet",href:Z}),o().createElement("link",{rel:"preconnect",href:I}),o().createElement("meta",{charSet:"UTF-8"}),o().createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"}),o().createElement("meta",{name:"google",content:"notranslate"}),o().createElement("meta",{name:"robots",content:j}),o().createElement("meta",{property:"fb:app_id",content:"653713035016537"}),_.map(((e,t)=>o().createElement("meta",Object.assign({key:t},e)))),o().createElement("meta",{name:"theme-color",content:"helloSites"===l?"#2c87f3":"#e85388"}),o().createElement("meta",{name:"page_type",content:"Home"}),o().createElement("meta",{name:"page_platform",content:"WEB"}),o().createElement("meta",{name:"page_language",content:O}),o().createElement("meta",{name:"ahrefs-site-verification",content:"46e7521a2b89a1013149c4685bbe02a1d36a4732fef98655142b829bc87cba4d"}),!G&&o().createElement(o().Fragment,null,"helloSites"===l?o().createElement("title",null,s?A:A+" - "+(null===(p=b.L[t])||void 0===p?void 0:p.SITE_NAME)):o().createElement("title",null,A),!N&&o().createElement("link",{rel:"canonical",href:`https://${T}${P}`}),o().createElement("meta",{name:"description",content:D||(null===(m=e.openGraph)||void 0===m?void 0:m.description)}),e.schemaData&&o().createElement("script",{type:"application/ld+json",className:"yoast-schema-graph",dangerouslySetInnerHTML:{__html:e.schemaData}}),o().createElement("meta",{property:"og:locale",content:t}),o().createElement("meta",{property:"og:type",content:L||"website"}),o().createElement("meta",{property:"og:title",content:(null===(g=e.openGraph)||void 0===g?void 0:g.title)||A}),o().createElement("meta",{property:"og:description",content:(null===(u=e.openGraph)||void 0===u?void 0:u.description)||D}),o().createElement("meta",{property:"og:url",content:`https://${T}${P}`}),o().createElement("meta",{property:"og:site_name",content:`https://${T}`}),o().createElement("meta",{property:"og:image",content:(null===(h=e.openGraph)||void 0===h?void 0:h.image)||M||U||""}),o().createElement("meta",{property:"og:image:secure_url",content:(null===(f=e.openGraph)||void 0===f?void 0:f.image)||M||U}),o().createElement("meta",{property:"og:image:width",content:(null===(v=e.openGraph)||void 0===v?void 0:v.imageWidth)&&String(null===(x=e.openGraph)||void 0===x?void 0:x.imageWidth)||S&&String(S)||"1200"}),o().createElement("meta",{property:"og:image:height",content:(null===(w=e.openGraph)||void 0===w?void 0:w.imageHeight)&&String(null===(y=e.openGraph)||void 0===y?void 0:y.imageHeight)||z&&String(z)||"630"}),o().createElement("meta",{name:"twitter:card",content:"summary_large_image"}),o().createElement("meta",{name:"twitter:title",content:(null===(k=e.twitter)||void 0===k?void 0:k.title)||A}),o().createElement("meta",{name:"twitter:description",content:D}),o().createElement("meta",{name:"twitter:image",content:(null===(E=e.twitter)||void 0===E?void 0:E.image)||M})),("helloSites"===l?b.F[O]||[]:b.F.marryBaby).map(((e,t)=>"link"===e.type?o().createElement("link",{key:`favicon-${t}`,rel:e.rel,href:e.href,sizes:e.sizes}):"meta"===e.type?o().createElement("meta",{key:t,name:e.name,content:e.content}):null)),Array.isArray(G)&&d?G.filter((e=>"canonical"!==e.props.name&&"canonical"!==e.props.rel)):G,d&&o().createElement("link",{rel:"canonical",href:d}),!e.hasNoAmp&&"vi-VN"!==t&&o().createElement("link",{rel:"amphtml",href:`https://${T}${P}${F}?amp=1`}),c&&"undefined"!==typeof window?o().createElement("script",{dangerouslySetInnerHTML:{__html:`window.dataLayer = window.dataLayer || []; window.dataLayer.push({'userID': '${c}'});`}}):null)}),Ue=E.A.div` flex: 1; `,Ze=E.A.div` padding: 0 10px; `,Ve=E.A.div` display: flex; height: 80px; align-items: center; .calendar-month { font-size: 16px; flex: 1; text-align: center; strong { margin-left: 5px; } } ${k.M.mbDown} { height: 70px; } `,Ye=E.A.div` display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; `,Ke=(0,E.A)(Ye)` margin-bottom: 8px; `;E.A.div` height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; `;const Xe=E.A.div` font-size: 14px; display: flex; justify-content: center; align-items: center; color: 1px solid ${C.w.colors.gray800}; font-weight: 300; `,Je=E.A.div` width: 18px; position: relative; &::before { content: ''; position: absolute; inset: 16px 0 0 0; width: 1px; left: 50%; right: 50%; background: ${C.w.colors.neutral100}; } `,qe=E.A.div` margin: 0 auto; `,Qe=E.A.div` position: relative; `,et=Ye,tt=E.A.div` position: relative; display: flex; justify-content: center; align-items: center; height: 34px; ${k.M.mbUp} { height: 38px; } &[data-is-disabled='true'] { opacity: 0.3; } &[data-in-range='true']:not([data-is-from='true'][data-is-to='true']) { background-color: ${C.w.colors.gray100}; } &:before { position: absolute; top: 0; bottom: 0; right: 0; background-color: ${C.w.colors.gray100}; } &[data-is-from='true'][data-in-range='true'][data-is-to='false'] { background-color: transparent; &:before { content: ''; left: 50%; right: 0; } } &[data-is-to='true'][data-in-range='true'][data-is-from='false'], &:hover[data-in-range='true']:is([data-has-range='false'] &) { background-color: transparent; &:before { content: ''; left: 0; right: 50%; } } `,at=E.A.div` position: relative; font-weight: 600; ${k.M.mbDown} { width: 32px; height: 32px; } ${k.M.mbUp} { width: 36px; height: 36px; } display: flex; justify-content: center; align-items: center; cursor: pointer; [data-is-disabled='true'] & { cursor: not-allowed; } line-height: 1; color: 1px solid ${C.w.colors.gray800}; [data-is-selected='true'] &, [data-is-today='true'] &, [data-is-selected='false']:hover & { border-radius: 32px; } [data-is-selected='true'] & { background-color: ${C.w.colors.primaryBase}; color: white; } [data-is-selected='false']:hover & { background-color: ${C.w.colors.primary50}; } [data-is-today='true'][data-is-selected='false'] & { background-color: transparent; border-radius: 32px; border: 1px solid ${C.w.colors.primaryBase}; } `;const rt={"en-PH":U.A,"vi-VN":V.default,"zh-TW":Y.default,"id-ID":Z.default};function nt(e){const{value:t={from:null,to:null}}=e,[a,r]=(0,n.useState)(null),{isMobile:i}=(0,X.u)(),[l,s]=(0,n.useState)((()=>t)),[c,d]=(0,n.useState)((()=>{var e;return(0,M.A)(null!==(e=t.from)&&void 0!==e?e:new Date)})),p=(0,n.useMemo)((()=>(0,L.A)(c,1)),[c]);const m=Object.assign(Object.assign({},e),{goToNextMonth:function(){d((e=>(0,L.A)(e,1)))},goToPreviousMonth:function(){d((e=>(0,S.A)(e,1)))},range:l,setRange:s,hoverDay:a,setHoverDay:r});return o().createElement(o().Fragment,null,o().createElement(ot,Object.assign({},m,{date:c})),!i&&o().createElement(Je,null),!i&&o().createElement(ot,Object.assign({},m,{date:p})))}function ot({date:e,range:t,setRange:a,onChange:r,goToPreviousMonth:i,goToNextMonth:l,minDate:s,maxDate:c,close:d=(()=>{}),autoClose:p=!1,hoverDay:m,setHoverDay:g}){const{locale:u}=(0,J.u)(),h=(0,n.useMemo)((()=>{var e;return null!==(e=rt[u])&&void 0!==e?e:rt["en-PH"]}),[u]),f=(0,n.useMemo)((()=>(0,A.A)(e,"MMMM",{locale:h})),[e,h]),v=(0,n.useMemo)((()=>h?[1,2,3,4,5,6,0].map((e=>h.localize.day(e,{width:"narrow"}))):[]),[h]);function x(e,r){if(null===e)return o().createElement(tt,{key:`idx-${r}`,"data-empty":"true"});const n=e.getDate(),i=(0,_.A)(e),l=!!t.from&&(0,B.A)(t.from,e),u=!!t.to&&(0,B.A)(t.to,e),h=l||u;let f=!1;null!==m&&t.from&&(0,D.A)(t.from,m)&&!t.to?f=(0,N.A)(e,{start:t.from,end:m}):t.from&&t.to&&(f=(0,N.A)(e,{start:t.from,end:t.to}));let v=!1;return s&&c?v=!(0,N.A)(e,{start:s,end:c}):s?v=(0,D.A)(e,s):c&&(v=(0,j.A)(e,c)),o().createElement(tt,{key:n,"data-is-today":i,"data-is-past":!i&&(0,I.A)(e),"data-is-selected":h,"data-is-disabled":v,"data-in-range":f,"data-is-from":l,"data-is-to":u,onMouseEnter:()=>{g(e)},onMouseLeave:()=>g(null),onClick:()=>{v||a((a=>(p&&t.from&&!t.to&&d(),function(e,t){return t.from||t.to?t.from&&t.to?{from:e,to:null}:t.from?(0,D.A)(e,t.from)?Object.assign(Object.assign({},t),{from:e}):Object.assign(Object.assign({},t),{to:e}):t:Object.assign(Object.assign({},t),{from:e})}(e,a))))}},o().createElement(at,{onClick:()=>{}},o().createElement("p",null,n)))}return(0,n.useEffect)((()=>{t.from&&t.to&&r(t)}),[t]),o().createElement(Ue,{className:"calendar-wrapper"},o().createElement(Ve,null,o().createElement(K.B,{onClick:i,size:"md",color:"ghost",icon:o().createElement("img",{src:w.C.getAssetPath("calendarArrowLeft.svg"),loading:"lazy"})}),o().createElement("div",{className:"calendar-month"},f,o().createElement("strong",null,(0,A.A)(e,"yyyy"))),o().createElement(K.B,{onClick:l,size:"md",color:"ghost",icon:o().createElement("img",{src:w.C.getAssetPath("calendarArrowRight.svg"),loading:"lazy"})})),o().createElement(Ze,null,o().createElement("div",null,o().createElement(Ke,null,v.map(((e,t)=>o().createElement(Xe,{key:`${e}-${t}`},e))))),o().createElement("div",null,function(){const a=e.getFullYear(),r=e.getMonth(),n=(0,z.A)(e),i=[];for(let e=1;e<=n;e++)i.push(new Date(a,r,e));const l=i[0]?i[0].getDay():0;if(1!==l){const e=0===l?6:l-1;for(let t=0;t{m()}));const f=(0,n.useMemo)((()=>a.from&&a.to?(0,B.A)(a.from,a.to)?h(a.from):`${h(a.from)} - ${h(a.to)}`:""),[a.from,a.to]);return o().createElement(it,{className:[s,d&&"focused"].filter(Boolean).join(" "),ref:g},o().createElement("label",{htmlFor:t},o().createElement($.a,{size:e,value:f,name:t,actionIcon:o().createElement("img",{src:w.C.getAssetPath("calendar.svg"),loading:"lazy"}),onFocus:()=>p(!0)})),d?o().createElement(lt,{onMouseDown:e=>{e.stopPropagation()}},o().createElement(nt,{value:a,onChange:u,minDate:r,maxDate:i,close:m,autoClose:c})):null)}var ct="WUqzfRb",dt="MnVGtSY",pt="NclbhXQ";const mt=({LinkComponent:e,page:t,isLast:a,onChangePage:r,className:n})=>{const{label:i,value:l,isDropdown:s,dropdownItems:c,dataEventCategory:d,dataEventAction:p,dataEventLabel:m}=t;return s?o().createElement(ee.D,{options:c,placeholder:"...",id:"",placeholderIcon:null,onChange:r,className:"collapsed-breadcrumb"}):o().createElement("div",{className:Q()(pt,n),title:"string"!==typeof i?l:i,"data-last":a},e&&o().createElement(e,{"data-event-category":d,"data-event-action":p,"data-event-label":m,href:l||"#"},i))},gt=({className:e,pages:t,size:a,LinkComponent:r="a",onChangePage:i,separator:l})=>{const s=(0,n.useMemo)((()=>t.map(((e,a)=>t.length>4?a>1&&a{const c=t+1===s.length;return o().createElement(n.Fragment,{key:t},o().createElement(mt,{LinkComponent:r,page:e,isLast:c,onChangePage:i}),!c&&(e.separator||l||o().createElement("div",{className:Q()(dt,"breadcrumbs-separator"),"data-size":a})))})))},ut=(E.A.div` display: flex; gap: 20px; width: 100%; align-items: center; justify-content: center; .icon-group { display: flex; align-items: center; gap: 10px; a, svg { width: 32px; height: 32px; } .share { width: 32px; height: 32px; padding: 8px; &:hover { background-color: ${C.w.colors.neutral50}; } svg { margin: 0; width: 16px; height: 16px; } } } `,(0,E.A)(te.D)` padding-bottom: 24px; .share-container { display: flex; flex-direction: column; gap: 24px; } .icon-group { margin-top: 12px; display: flex; gap: 16px; img { border-radius: 8px; } } .input-group { margin-top: 8px; display: flex; gap: 8px; button { padding: 10px; &:hover { background-color: ${C.w.colors.neutral50}; } } svg { margin: 0; } a, svg:not(.copy) { width: 32px; height: 32px; } } `,E.A.div` position: fixed; z-index: 48; bottom: 0; left: 50%; width: fit-content; max-width: 100%; background: none; transform: translateX(-50%); .close-sticky-button { position: absolute; display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; background: #bfbfbf; border-radius: 50%; color: white; cursor: pointer; font-size: 12px; line-height: 12px; transform: translate(50%, -50%); top: 0; right: 0; } opacity: 0; pointer-events: none; &[data-visible='true'] { opacity: 1; pointer-events: auto; } `,E.A.div` display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 100%; width: fit-content; height: fit-content; margin-inline: auto; /* margin: 1rem auto; */ &[data-no-wrapper='false'] { border: 1px solid ${C.w.colors.neutral50}; background: ${C.w.colors.neutral50}; } &[data-no-wrapper='true'] { line-height: 0; } &[data-header-bottom='true'] { flex-direction: column-reverse; background: none; border: none; } `),ht=E.A.div` width: 100%; padding: 0 5px 1.5px; display: flex; align-items: center; justify-content: center; gap: 5px; text-transform: capitalize; img { height: 12px; width: 12px; max-width: 12px; max-height: 12px; } &[data-header-bottom='true'] { background: ${C.w.colors.neutral50}; } span { font-size: 10px; line-height: 12px; color: ${C.w.colors.gray400}; font-weight: 400; } `,ft=E.A.div` background-color: white; background-image: url(${w.C.getAssetPath("close-blue.svg")}); background-repeat: no-repeat; background-size: 10px; background-position: center; width: 12px; height: 12px; position: absolute; top: 1px; right: 1px; cursor: pointer; `,vt={},xt=e=>{if(vt[e]){window.googletag=window.googletag||{cmd:[]};const{googletag:t}=window;t.cmd.push((function(){t.destroySlots([vt[e]]),delete vt[e]}))}},bt=["TopBanner","MidBanner1","MidBanner2","EndBanner","Sticky"],wt=(0,n.forwardRef)((function({className:e,adUnitPath:t,size:a,divId:r,pos:i,sizeMapping:l,contentId:s,isHidden:c,hideIfHasSubot:d,isSticky:m,refreshInterval:g,customTargetings:u,style:h,adDefaultSize:f,noWrapper:v,showCloseBtn:x,onCloseAd:b,headerBottom:y,wrapperProps:k,locale:E,isMarryBaby:C},$){const A=g||(E===ae.L.Vietnam&&i.some((e=>bt.includes(e)))?30:void 0),{t:D}=(0,J.u)(),M=(0,n.useRef)(null),L=(0,n.useRef)(null),S=(0,n.useRef)(A);S.current=A;const[z,_]=(0,n.useState)(!1),B=()=>{S.current&&(null!==L.current&&clearInterval(L.current),L.current=window.setInterval((()=>{window.googletag=window.googletag||{cmd:[]};const{googletag:e}=window;e.cmd.push((function(){vt[r]&&e.pubads().refresh([vt[r]])}))}),1e3*S.current))};if((0,n.useEffect)((()=>()=>{xt(r),L.current&&clearInterval(L.current)}),[]),(0,n.useEffect)((()=>{B()}),[A]),(0,n.useEffect)((()=>{c||(({contentId:e,adUnitPath:t,size:a,divId:r,pos:n,sizeMapping:o,hideIfHasSubot:i,customTargetings:l,onSuccess:s})=>{if(!r||!document.getElementById(r))return console.error("divId is required");xt(r),window.googletag=window.googletag||{cmd:[]};const{googletag:c}=window;c.cmd.push((function(){const d=document.querySelector('meta[name="content_id"]'),p="string"===typeof e?e:null===d||void 0===d?void 0:d.content,m=c.defineSlot(t,a,r);if(m){try{l&&Object.keys(l).forEach((e=>{e&&(null===m||void 0===m||m.setTargeting(e,l[e]))}))}catch(g){console.error(g)}vt[r]=m,m.setTargeting("Pos",n),m.addService(c.pubads()),p&&m.setTargeting("Content_ID",p),o&&m.defineSizeMapping(o),i&&document.getElementById("subot--container")&&m.setTargeting("chatbot",!0),c.display(r),null===s||void 0===s||s()}}))})({contentId:s,adUnitPath:t,size:a,divId:r,pos:i,sizeMapping:l,hideIfHasSubot:d,customTargetings:u,onSuccess:B})}),[c]),z)return null;const N=o().createElement("div",{style:{position:"relative",width:"fit-content",height:"fit-content",overflow:"hidden",maxWidth:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},o().createElement("div",{ref:$,id:r}),x&&o().createElement(ft,{onClick:()=>{null===b||void 0===b||b(),_(!0)}}));if(m)return N;const j=f?f[0]:a?Array.isArray(a[0])?a[0][0]:a[0]:void 0,I=f?f[1]:a?Array.isArray(a[0])?a[0][1]:a[1]:void 0;return o().createElement(p.a,Object.assign({},k,{className:e}),o().createElement(ut,{ref:M,className:e,style:h,"data-no-wrapper":!!v,"data-header-bottom":!!y},v?N:o().createElement(o().Fragment,null,o().createElement(ht,{"data-header-bottom":!!y},o().createElement("img",{src:C?w.C.getAssetPath("adsIcon-mb.svg"):w.C.getAssetPath("adsIcon.svg"),alt:"",loading:"lazy"}),o().createElement("span",null,D("adBanner.title"))),o().createElement("div",{style:{minWidth:j||"100%",minHeight:I||"100%",position:"relative"}},N))))}));(0,n.memo)(wt,((e,t)=>e.adUnitPath===t.adUnitPath&&e.divId===t.divId&&e.className===t.className)),E.A.div` padding: 20px; border-radius: 8px; background-image: url("data:image/svg+xml,%3Csvg width='1600' height='1024' viewBox='0 0 1600 1024' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_f_158_52300)'%3E%3Ccircle cx='889' cy='38' r='217' fill='%23BCDEFF'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_158_52300)'%3E%3Ccircle cx='402' cy='-38' r='402' fill='%23E3F2FF'/%3E%3C/g%3E%3Cg filter='url(%23filter2_f_158_52300)'%3E%3Ccircle cx='1147.5' cy='-38.5' r='180.5' fill='%23B3EED5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_158_52300' x='472' y='-379' width='834' height='834' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='100' result='effect1_foregroundBlur_158_52300'/%3E%3C/filter%3E%3Cfilter id='filter1_f_158_52300' x='-300' y='-740' width='1404' height='1404' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='150' result='effect1_foregroundBlur_158_52300'/%3E%3C/filter%3E%3Cfilter id='filter2_f_158_52300' x='767' y='-419' width='761' height='761' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='100' result='effect1_foregroundBlur_158_52300'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: top; ${k.M.mbDown} { padding: 16px; } `,E.A.div` display: flex; justify-content: space-between; margin-bottom: 24px; position: relative; .header-title { color: ${C.w.colors.gray800}; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: -0.4px; width: calc(100% - 60px); svg { position: absolute; } ${k.M.mbDown} { font-size: 16px; line-height: 24px; } } .header-site { background: linear-gradient( 257deg, #12bfd6 19.24%, #2d87f3 47.1%, #262626 78.95% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 20px; } .header-avatar { position: absolute; right: -40px; top: -52px; } `,E.A.div` display: flex; gap: 9px; flex-direction: column; `,E.A.div` display: flex; gap: 8px; padding: 12px; border-radius: 8px; border: 1px solid ${C.w.colors.white}; background: rgba(255, 255, 255, 0.5); cursor: pointer; ${k.M.mbDown} { padding: 8px 10px; } .question-text { color: ${C.w.colors.gray800}; font-size: 16px; font-weight: 400; line-height: 24px; ${k.M.mbDown} { font-size: 14px; line-height: 22px; } } svg { margin-top: 3px; } `,E.A.div` position: relative; margin-top: 20px; ${k.M.mbDown} { margin-top: 8px; } .submitBtn { width: 36px; height: 36px; border-radius: 100%; display: flex; justify-content: center; align-items: center; padding: 0; .mantine-Button-leftIcon { margin: 0; } } .rightSection { position: absolute; top: 4px; right: 4px; bottom: 0; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 100%; background-color: ${C.w.colors.neutral100}; } `,E.A.input` width: 100%; height: 44px; padding: 4px 4px 4px 24px; border-radius: 48px; border-radius: 48px; border: 1px solid #79e4dc; background: ${C.w.colors.white}; box-shadow: 0px 4px 12px 0px rgba(136, 205, 254, 0.24); &:focus { box-shadow: 0px 0px 0px 2px #91caff; border-color: #2d87f3; } `;const yt=e=>n.createElement("svg",Object.assign({width:"1em",height:"1em",viewBox:"0 0 16 16",fill:"none"},e),n.createElement("g",{clipPath:"url(#clip0_1906_4609)"},n.createElement("path",{d:"M8.00019 1.57727L9.78597 5.19505L13.778 5.77549L10.8891 8.59149L11.5709 12.5675L8.00019 10.6902L4.42952 12.5675L5.1113 8.59149L2.22241 5.77549L6.21441 5.19505L8.00019 1.57727Z",stroke:"#00B16A",strokeWidth:1.16667,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M8.00024 14.0001V14.9468",stroke:"#00B16A",strokeWidth:1.16667,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M14.0773 9.48901L14.9777 9.78146",stroke:"#00B16A",strokeWidth:1.16667,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M11.7557 2.34337L12.3122 1.57715",stroke:"#00B16A",strokeWidth:1.16667,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M4.24468 2.34349L3.68823 1.57727",stroke:"#00B16A",strokeWidth:1.16667,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M1.92242 9.48901L1.02197 9.78146",stroke:"#00B16A",strokeWidth:1.16667,strokeLinecap:"round",strokeLinejoin:"round"})),n.createElement("defs",null,n.createElement("clipPath",{id:"clip0_1906_4609"},n.createElement("rect",{width:16,height:16,fill:"white"})))),kt=E.A.div` height: inherit; width: inherit; .hpv-screener-container { display: flex; flex-direction: column; justify-content: center; padding: 1rem; gap: 8px; background-color: ${C.w.colors.white}; border-radius: 12px; border: 1px solid ${C.w.colors.neutral100}; width: 100%; height: 100%; } .hpv-screener-image { width: 64px; height: 64px; align-self: start; aspect-ratio: 1/1; } .hpv-screener-content-box { display: flex; align-items: center; gap: 1rem; } .hpv-screener-button { &.mantine-Button-root { border-radius: 12px; border: 1px solid ${C.w.colors.blue100}; background-color: ${C.w.colors.blue50}; color: ${C.w.colors.primaryBase}; padding: 10px 16px; width: 100%; &:hover { border: 1px solid ${C.w.colors.blue100}; background-color: ${C.w.colors.blue50}; } } } .hpv-screener-content { display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; } .hpv-screener-badge { &.mantine-Badge-root { background-color: #f7f9fc; } line-height: 1rem; color: #111111; align-self: flex-start; padding: 0.25rem 0.5rem; border-radius: 0.375rem; display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; } `,Et=E.A.div` text-transform: uppercase; display: flex; align-items: center; gap: 4px; `,Ct=E.A.div` color: #111111; font-size: 0.6875rem; font-weight: 600; `,$t=E.A.div` display: flex; align-items: center; gap: 1rem; `,At=({onClick:e,className:t,style:a,image:r,as:n="span"})=>{const{t:i}=(0,J.u)();return o().createElement(kt,{className:t,style:a},o().createElement("div",{className:"hpv-screener-container"},o().createElement("div",{className:"hpv-screener-content-box"},o().createElement("div",{className:"hpv-screener-content"},o().createElement(m.E,{className:"hpv-screener-badge"},o().createElement(Et,null,o().createElement(yt,{style:{width:"1rem",height:"1rem"}}),o().createElement(Ct,null,"1.2M ",i("detail.screened")))),o().createElement("div",null,o().createElement(y.T,{as:n,size:"title2",weight:"semiBold",color:"gray1000"},i("detail.hpvScreenerTitle"))," ",o().createElement(y.T,{as:"span",size:"title2",color:"gray1000",weight:"regular"},i("detail.hpvScreenerSubtitle")))),o().createElement("div",{className:"hpv-screener-image"},o().createElement(X.I,{style:{width:"100%",height:"100%"},alt:"HPV Screener",src:r}))),o().createElement(K.B,{className:"hpv-screener-button",onClick:e,size:"lg",color:"secondary"},o().createElement($t,null,o().createElement(y.T,{size:"title2",color:"primaryBase",weight:"semiBold"},i("detail.hpvScreenerButton")),o().createElement(re.A,{style:{width:"0.5rem",height:"0.5rem"}})))))},Dt=E.A.div` display: grid; grid-template-columns: 1fr 2px 1fr; column-gap: ${(0,g.D)(16)}; `,Mt=E.A.div` display: grid; grid-template-columns: repeat(2, 1fr); row-gap: ${(0,g.D)(24)}; .span-2 { grid-column: 1 / span 2; } `,Lt=E.A.div` display: flex; align-items: center; gap: 1rem; `,St=E.A.div` display: flex; flex-direction: column; gap: ${(0,g.D)(2)}; align-items: ${({align:e})=>e}; `,zt=E.A.div` font-size: ${(0,g.D)(15)}; font-weight: 600; color: #111111; line-height: ${(0,g.D)(24)}; `,_t=E.A.div` color: ${C.w.colors.gray700}; font-weight: 400; line-height: ${(0,g.D)(20)}; font-size: ${(0,g.D)(13)}; `,Bt=({infoItems:e,className:t,layout:a="vertical",align:r="start"})=>{const i=(0,n.useMemo)((()=>"two-item-horizontal"===a?Dt:"horizontal"===a?Lt:Mt),[a]);return o().createElement(i,{className:t},e.map((e=>o().createElement(o().Fragment,{key:e.id},o().createElement(St,{align:r,className:Q()(e.cssItem,"flex-1")},o().createElement(zt,{className:"summary-title"},e.title),o().createElement(_t,{className:"summary-description"},e.description)),"two-item-horizontal"===a&&o().createElement(u.c,{className:e.cssItem,sx:{borderColor:"#0000001a",height:"75%",alignSelf:"center"},orientation:"vertical"})))))},Nt=(0,n.createContext)(null);function jt(){const e=(0,n.useContext)(Nt);if(!e)throw new Error("useListContext must be used within ListProvider");return e}const It=E.A.div` display: inline-flex; border: 1px solid ${C.w.colors.neutral100}; padding: 0.5rem 0.75rem; color: ${C.w.colors.gray800}; text-align: center; font-size: 0.8125rem; border-radius: 12px; line-height: 1.25rem; background-color: ${C.w.colors.white}; white-space: nowrap; cursor: pointer; &.active { border: 1px solid ${C.w.colors.blue100}; background-color: ${C.w.colors.blue50}; } `,Pt=E.A.div` &::-webkit-scrollbar { width: 6px; height: 6px; display: none; } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); border-radius: 6px; } `;function Ot(e){var{filterOptions:t,activeFilter:a,onChange:n}=e,i=(0,r._)(e,["filterOptions","activeFilter","onChange"]);const l=e=>t=>{null===n||void 0===n||n(e);const a=t.target;a&&a.scrollIntoView({block:"nearest",inline:"center",behavior:"auto"})};return o().createElement(Pt,{className:"flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full"},t.map(((e,t)=>o().createElement(It,Object.assign({},i,{key:`filter_${t}`,onClick:l(e),className:(0,h.A)("snap-center",{active:a[e.filterKey]===e.value}),"data-event-label":e.label}),e.label))))}const Tt=E.A.div` display: inline-flex; border: 1px solid ${C.w.colors.neutral100}; padding: 0.5rem 0.75rem; color: ${C.w.colors.gray800}; text-align: center; font-size: 0.8125rem; border-radius: ${(0,g.D)(18)}; line-height: 1.25rem; background-color: ${C.w.colors.white}; white-space: nowrap; cursor: pointer; &.active { border: 1px solid ${C.w.colors.blue100}; background-color: ${C.w.colors.blue50}; } `,Ft=E.A.div` display: flex; flex-direction: column; gap: 8px; `,Ht=E.A.div` display: flex; gap: 8px; `,Wt=E.A.div` &::-webkit-scrollbar { display: none; } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); border-radius: 6px; } `;function Rt(e){var{filterOptions:t,activeFilter:a,onChange:i}=e,l=(0,r._)(e,["filterOptions","activeFilter","onChange"]);const s=(0,n.useRef)(null),[c,d]=(0,n.useState)(0),[p,m]=(0,n.useState)(0),[g,u]=(0,n.useState)(!1),[f,v]=(0,n.useState)([]);(0,n.useEffect)((()=>{if("undefined"!==typeof window&&m(window.innerWidth),s.current){const e=s.current.scrollWidth;d(e)}}),[]),(0,n.useEffect)((()=>{u(c>p)}),[c,p]),(0,n.useEffect)((()=>{if(g){const e=Math.round(t.length/2),a=((e,t)=>{const a=[],r=e.slice(0,t);r.length>0&&a.push(r);const n=e.slice(t);return n.length>0&&a.push(n),a})(t,e);v(a)}}),[g]);const x=e=>t=>{null===i||void 0===i||i(e);const a=t.target;a&&a.scrollIntoView({block:"nearest",inline:"center",behavior:"auto"})};return o().createElement(Wt,{ref:s,className:"flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full"},(()=>{var e,r;return(null===t||void 0===t?void 0:t.length)?g?o().createElement(Ft,null,o().createElement(Ht,null,null===(e=f[0])||void 0===e?void 0:e.map(((e,t)=>o().createElement(Tt,Object.assign({},l,{key:`filter_row_1_${t}`,onClick:x(e),className:(0,h.A)("snap-center",{active:a[e.filterKey]===e.value}),"data-event-label":e.label}),e.label)))),o().createElement(Ht,null,null===(r=f[1])||void 0===r?void 0:r.map(((e,t)=>o().createElement(Tt,Object.assign({},l,{key:`filter_row_2_${t}`,onClick:x(e),className:(0,h.A)("snap-center",{active:a[e.filterKey]===e.value}),"data-event-label":e.label}),e.label))))):g?void 0:t.map(((e,t)=>o().createElement(Tt,Object.assign({},l,{key:`filter_${t}`,onClick:x(e),className:(0,h.A)("snap-center",{active:a[e.filterKey]===e.value}),"data-event-label":e.label}),e.label))):null})())}const Gt={Provider:function({fetcher:e,children:t,defaultFilters:a,defaultSearch:i,pageSize:l,debounceSearch:s,defaultLoading:c,defaultItems:d,defaultTotal:p,defaultPage:m}){const g=function({fetcher:e,pageSize:t=10,defaultSearch:a="",defaultFilters:o={},debounceSearch:i=300,defaultLoading:l,defaultItems:s,defaultTotal:c,defaultPage:d}){const[p,m]=(0,n.useState)(s||[]),[g,u]=(0,n.useState)(null!==c&&void 0!==c?c:0),[h,f]=(0,n.useState)(null!==d&&void 0!==d?d:1),[v,x]=(0,n.useState)(""),[b,w]=(0,n.useState)(a),[y,k]=(0,n.useState)(l),[E,C]=(0,n.useState)(!1),[$,A]=(0,n.useState)(o),D=(0,n.useCallback)(se()((({page:a,search:n,isMore:o,pageSize:i,filters:l,searchSession:s})=>(0,r.a)(this,void 0,void 0,(function*(){k(!o),C(o);let r=!1;try{const c=yield e({page:a,pageSize:i||t,search:n,filters:l,searchSession:s});if(c.isKeepLoading)return void(r=!0);m(o?e=>[...e,...c.data]:c.data),x(c.searchSession||""),f(a),u(c.total)}finally{r||(k(!1),C(!1))}}))),i),[]);return{items:p,total:g,page:h,pageSize:t,search:b,loading:y,loadingMore:E,filters:$,handleChangePage:e=>{D({search:b,page:e})},handleChangeSearch:e=>{w(e),D({search:e,page:1,filters:$})},handleLoadMore:()=>{D({search:b,page:h+1,isMore:!0,filters:$,searchSession:v})},handleChangeFilter:(e,t)=>{const a=Object.assign({},$),r=t.find((e=>e.isAll));e.filterKey in a&&a[e.filterKey]===e.value?r?a[r.filterKey]=r.value:delete a[e.filterKey]:a[e.filterKey]=e.value,A(a),D({page:1,search:b,filters:a})},handleUpdateFilter:e=>{const t=Object.assign(Object.assign({},$),e);A(t),D({page:1,search:b,filters:t})},resetData:()=>{w(""),x(""),A({}),D({page:1,search:"",filters:{}})}}}({fetcher:e,defaultFilters:a,defaultSearch:i,pageSize:l,debounceSearch:s,defaultLoading:c,defaultItems:d,defaultTotal:p,defaultPage:m}),u=(0,n.useMemo)((()=>Object.assign({},g)),[g.items,g.page,g.loading,g.loadingMore,g.search,g.total,g.filters]);return o().createElement(Nt.Provider,{value:u},t)},Search:function(e){var{className:t,placeholder:a="Search...",formatValue:n}=e,i=(0,r._)(e,["className","placeholder","formatValue"]);const{search:l,handleChangeSearch:s}=jt();return o().createElement($.b,Object.assign({value:l,onChange:e=>{s(n?n(e):e)},placeholder:a,className:t},i))},Content:function({className:e,children:t,customLoading:a,customEmpty:r}){const{loading:n,items:i}=jt(),{t:l}=(0,J.u)();return n?a?o().createElement(o().Fragment,null,a):o().createElement(ne.L,null):i.length?o().createElement("div",{className:e},t):r?o().createElement(o().Fragment,null,r):o().createElement("div",null,l("common.noResult"))},Pagination:function(){const{total:e,page:t,handleChangePage:a,pageSize:r}=jt(),n=Math.ceil(e/r);return o().createElement($.P,{pagesAmount:n,currentPage:t,onChange:a})},Item:function({render:e}){const{items:t,loading:a,loadingMore:r}=jt();return o().createElement(o().Fragment,null,t.map(((t,n)=>o().createElement("div",{key:ie()(t,"id",n)},e(t,a,r)))))},LoadMore:function(e){var{renderLoadMore:t}=e,a=(0,r._)(e,["renderLoadMore"]);const{loadingMore:n,handleLoadMore:i,pageSize:l,page:s,total:c}=jt(),d=c-s*l,m=d>l?l:d;return Math.ceil(c/l)===s||!c?null:o().createElement(p.a,{mt:(0,g.D)(24),className:"text-center"},o().createElement(f.$,Object.assign({},a,{loading:n,onClick:i,variant:"white",radius:30,py:8,px:32,lh:(0,g.D)(20),sx:{color:C.w.colors.gray800,fontSize:13,transition:"color 0.2s",":hover":{color:C.w.colors.gray600}}}),"function"===typeof t?t({loadingMore:n,page:s,pageSize:l,last:m}):`Load more ${m} items`))},QuickFilter:function(e){var{filterOptions:t}=e,a=(0,r._)(e,["filterOptions"]);const{handleChangeFilter:n,filters:i}=jt();return o().createElement(Ot,Object.assign({},a,{filterOptions:t,onChange:e=>n(e,t),activeFilter:i}))},QuickFilterWrapLine:function(e){var{filterOptions:t}=e,a=(0,r._)(e,["filterOptions"]);const{handleChangeFilter:n,filters:i}=jt();return o().createElement(Rt,Object.assign({},a,{filterOptions:t,onChange:e=>n(e,t),activeFilter:i}))}},Ut=E.A.div` padding: 1rem; display: grid; grid-template-columns: 1fr 84px; background-color: ${C.w.colors.white}; gap: 0.75rem; .logo { width: 84px; border-radius: 8px; overflow: hidden; img { width: 84px; border-radius: 8px; overflow: hidden; } } /* grid-rows-1 grid-cols-2 order-2 w-[84px] */ .info { gap: 4px; display: flex; flex-direction: column; } `,Zt=(0,E.A)($.I)` width: 84px; height: 84px; padding: 0; object-fit: contain; object-position: center; flex-shrink: 0; aspect-ratio: 1; align-self: baseline; `;function Vt({title:e,href:t,description:a,logo:r,defaultImage:n,LinkComponent:i="a",children:l,contentInfo:s,isMobile:c=!0,className:d,as:p="h3",altText:m}){return o().createElement(Ut,{className:d},o().createElement("div",{className:"info"},o().createElement(i,{href:t},o().createElement(y.T,{size:c?"title2":"title1",color:"#111111",weight:"semiBold",as:p},e)),"string"===typeof a?o().createElement(i,{href:t},o().createElement(y.T,{size:c?"p2":"title2",color:"gray700",weight:"regular",lineClamp:2,as:p},a)):a,s),o().createElement(i,{href:t},o().createElement(v.g,{ratio:1,className:"logo"},o().createElement(Zt,{src:r||n,width:c?84:148,height:c?84:148,alt:m||e,backupSrc:n}))),l)}(0,E.A)(X.I)` width: 100%; object-fit: cover; object-position: center; aspect-ratio: 375/190; `,E.A.div` background-color: ${e=>e.theme.colors.white}; `,E.A.div` color: ${e=>e.theme.colors.neutral800}; `,E.A.div` color: ${e=>e.theme.colors.neutral800}; `,E.A.div` display: flex; gap: 12px; padding: 12px 0px; .icon { width: 1rem; height: 1rem; flex-shrink: 0; } .text-regular { font-size: 0.8125rem; line-height: 1.25rem; color: ${e=>e.theme.colors.gray600}; } .text-medium { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: ${e=>e.theme.colors.gray800}; } b { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: ${e=>e.theme.colors.gray800}; } `;const Yt=E.A.div` ${k.M.mbUp} { display: flex; gap: 1.5rem; border-radius: 0.75rem; padding: 1.5rem; overflow: hidden; } #product-image-section { ${k.M.mbUp} { width: 336px; } } background-color: #fff; `,Kt=(0,E.A)($.I)` ${k.M.mbUp} { width: 336px; aspect-ratio: 1/1; object-fit: cover; border-radius: 0.5rem; } width: 100%; object-fit: contain; object-position: center; aspect-ratio: 375/190; `,Xt=E.A.div` padding: 1.5rem 1rem; ${k.M.mbUp} { padding: 0; flex: 1; overflow: hidden; } .description { margin-top: 0.5rem; } .product-info { display: flex; flex-direction: column; gap: 8px; } `,Jt=E.A.div` margin-top: 0.75rem; width: 100%; ${k.M.mbUp} { margin-top: 12px; } `,qt=(0,E.A)(i.a)` height: 100%; flex: 1; .mantine-Carousel-controls { padding-left: 4px; padding-right: 4px; } .mantine-Carousel-control { background-color: #fff; border: none; box-shadow: none; padding: 0; align-items: center; justify-content: center; opacity: 1; width: auto; &:hover { background-color: #fff; } &:active { background-color: #fff; } &[data-inactive] { opacity: 0.5; cursor: default; } } .mantine-Carousel-indicators { gap: 0.375rem; bottom: 0.5rem; } .mantine-Carousel-indicator { width: 5px; height: 5px; border-radius: 50%; background-color: ${C.w.colors.gray200}; opacity: 1; &[data-active] { background-color: ${C.w.colors.black}; } } `,Qt=E.A.div` width: 76px; height: 76px; border-radius: 0.5rem; cursor: pointer; border: 1px solid ${C.w.colors.gray300}; transition: border-color 0.15s ease; overflow: hidden; &:hover { border-color: ${C.w.colors.primaryBase}; } `,ea=E.A.div` width: 100%; aspect-ratio: 375/190; border-radius: 0; cursor: pointer; transition: border-color 0.15s ease; overflow: hidden; `,ta=(0,E.A)($.I)` background-color: ${C.w.colors.neutral50}; width: 100%; height: 100%; object-fit: cover; object-position: center; `;function aa({generalInfo:e,backupSrc:t,className:a,contentClassName:r,bannerProps:n={},imagesSelect:l,children:s,isMobile:c=!1,imageCarousel:d=[],carouselSlotProps:p,onCarouselImageClick:m}){const{isMobile:g}=(0,X.u)(),u=null!==c&&void 0!==c?c:g,h=d.length>1,f=d.length>4&&!u,v=d.length>1&&u,{imageCarousel:x,slide:b,imageItemWrapper:w,imageItem:k}=null!==p&&void 0!==p?p:{};return o().createElement(Yt,{className:a},o().createElement("div",{id:"product-image-section"},l||o().createElement(o().Fragment,null,u?o().createElement(qt,Object.assign({slidesToShow:1,align:"start",withControls:!1,withIndicators:v,dragFree:!1,slideSize:"100%",slideGap:0,draggable:v},x),d.map(((a,r)=>o().createElement(i.a.Slide,Object.assign({key:r},b),o().createElement(ea,{onClick:()=>null===m||void 0===m?void 0:m(r)},o().createElement(ta,Object.assign({},k,{src:a,alt:`${e.altText||"product"} - ${r+1}`,backupSrc:t,isMobile:u}))))))):o().createElement(o().Fragment,null,o().createElement(Kt,Object.assign({backupSrc:t,src:e.banner||e.logo,alt:e.altText||("string"===typeof e.name?e.name:"product")},n)),h&&o().createElement(Jt,null,o().createElement(qt,Object.assign({slidesToShow:4,align:"start",withControls:f,withIndicators:!1,dragFree:!0,controlSize:24,slideSize:76,slideGap:10},x),d.map(((a,r)=>o().createElement(i.a.Slide,Object.assign({key:r},b),o().createElement(Qt,Object.assign({},w,{onClick:e=>{var t;null===(t=null===w||void 0===w?void 0:w.onClick)||void 0===t||t.call(w,e),null===m||void 0===m||m(r)}}),o().createElement(ta,Object.assign({},k,{src:a,alt:`${e.altText||"product"} - ${r+1}`,backupSrc:t,isMobile:u}))))))))))),o().createElement(Xt,{className:r},o().createElement("div",{className:"product-info"},"string"===typeof e.name?o().createElement(y.T,{size:"h3",fw:600,color:"gray1000",as:"h1"},e.name):e.name,null===e||void 0===e?void 0:e.middleContent,e.description&&o().createElement(y.T,{size:u?"p3":"p1",color:"gray700"},e.description)),s))}aa.Container=Yt,aa.Image=Kt,aa.Content=Xt;const ra=E.A.div` max-width: 1128px; display: flex; flex-direction: column; gap: 0; height: 100%; ${k.M.mbUp} { flex-direction: row; /* height: auto; */ height: 100%; } `,na=E.A.div` min-width: 0; height: calc(100% - 108px); width: 100%; ${k.M.mbUp} { height: auto; max-height: calc(100dvh - 10dvh); } `,oa=E.A.div` width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.5rem; width: 412px; padding: 64px 36px 24px 40px; `,ia=E.A.div` flex-shrink: 0; display: flex; flex-direction: row; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 16px; scroll-padding: 0px 16px; &::-webkit-scrollbar { display: none; } scrollbar-width: none; ${k.M.mbUp} { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; overflow: visible; scroll-snap-type: none; padding: 0; } `,la=E.A.button` border-radius: 0.5rem; padding: 0; background-color: transparent; width: 72px; height: 72px; flex-shrink: 0; overflow: hidden; cursor: pointer; scroll-snap-align: start; ${k.M.mbUp} { scroll-snap-align: unset; } &[data-active='true'] { outline: 2px solid ${C.w.colors.primaryBase}; outline-offset: -2px; } &:hover { outline: 2px solid ${C.w.colors.primaryBase}; outline-offset: -2px; } `,sa=E.A.div` width: 100%; height: 100%; overflow: hidden; background-color: ${C.w.colors.neutral50}; display: flex; align-items: center; justify-content: center; ${k.M.mbUp} { height: 100%; aspect-ratio: 716 / 720; } `,ca=(0,E.A)($.I)` background-color: ${C.w.colors.neutral50}; width: 100%; height: 100%; object-fit: contain; object-position: center; `,da=E.A.div` display: flex; flex-direction: column; gap: 0.5rem; align-items: center; justify-content: center; min-height: 240px; text-align: center; `,pa=(0,E.A)(x.a)` .mantine-Modal-header { padding: 12px 16px; border-bottom: 1px solid #0000001a; } .mantine-Modal-close { width: 24px; height: 24px; & > svg { width: auto !important; height: auto !important; } } .mantine-Modal-title { font-weight: 600; font-size: 15px; line-height: 24px; letter-spacing: -0.3px; } .mantine-Modal-inner { left: 0; } .mantine-Modal-content { ${k.M.mbDown} { display: grid; grid-template-rows: 48px calc(100% - 48px); grid-template-columns: 100%; height: 100dvh; } ${k.M.mbUp} { border-radius: 12px; } } .mantine-Modal-body { height: 100%; max-height: 100%; padding: 0; } .closeModal { position: absolute; right: 16px; top: 16px; cursor: pointer; } `,ma=(0,E.A)(i.a)` height: 100%; .mantine-Carousel-controls { padding-left: 1rem; padding-right: 1rem; } .mantine-Carousel-control { background-color: #fff; border: none; box-shadow: none; padding: 0; align-items: center; justify-content: center; opacity: 1; width: auto; &:hover { background-color: #fff; } &:active { background-color: #fff; } &[data-inactive] { opacity: 0.5; cursor: default; } } .mantine-Carousel-indicators { gap: 0.375rem; bottom: 0.5rem; } .mantine-Carousel-indicator { width: 5px; height: 5px; border-radius: 50%; background-color: ${C.w.colors.gray200}; opacity: 1; &[data-active] { background-color: ${C.w.colors.black}; } } `,ga=(0,n.createContext)(null);function ua(){const e=(0,n.useContext)(ga);if(!e)throw new Error("useModalGalleryContext must be used within ModalGalleryProvider");return e}function ha(){const{galleryImages:e,altPrefix:t,backupSrc:a,isMobile:r,setActiveIndex:n,setEmbla:l,embla:s,initialSlide:c}=ua();(0,de.s)(s,200);return o().createElement(ma,{align:"center",slideSize:"100%",withControls:e.length>1&&!r,withIndicators:!1,dragFree:!1,slideGap:0,draggable:e.length>1&&r,getEmblaApi:e=>{l(e)},onSlideChange:e=>{n(e)},loop:!1,height:"100%",controlSize:32,initialSlide:c},e.map(((e,r)=>o().createElement(i.a.Slide,{key:`${e}-${r}`},o().createElement(sa,null,o().createElement(ca,{src:e,alt:`${t} - ${r+1}`,backupSrc:a}))))))}function fa({isMobile:e}){const{galleryImages:t,altPrefix:a,backupSrc:r,activeIndex:i,handleThumbnailClick:l}=ua(),s=(0,n.useRef)([]);return(0,n.useEffect)((()=>{const t=s.current[i];t&&e&&t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}),[i,e]),o().createElement(ia,null,t.map(((e,t)=>o().createElement(la,{key:`${e}-${t}`,type:"button","data-active":i===t,onClick:()=>l(t),ref:e=>s.current[t]=e},o().createElement(ta,{src:e,alt:`${a} thumbnail - ${t+1}`,backupSrc:r,width:72})))))}function va({isMobile:e}){const{generalInfo:t}=ua();return e?null:"string"===typeof t.name?o().createElement(y.T,{size:"h5",fw:600,color:"gray1000",as:"h2"},t.name):o().createElement(o().Fragment,null,t.name)}function xa(){const{galleryImages:e,isMobile:t}=ua();return e.length>0?o().createElement(ra,null,o().createElement(na,null,o().createElement(ha,null)),!t&&o().createElement(oa,null,o().createElement(va,{isMobile:t}),o().createElement(fa,{isMobile:t})),t&&o().createElement(fa,{isMobile:t})):o().createElement(da,null,o().createElement(va,{isMobile:t}),o().createElement(y.T,{size:"p2",color:"gray600"},"No images available."))}const ba=(e,t)=>t&&"number"===typeof e?e<0?0:e>=t?t-1:e:0;function wa({generalInfo:e,imageCarousel:t=[],backupSrc:a,isMobile:r=!1,initialSlide:i=0,children:l}){const s=function({generalInfo:e,imageCarousel:t=[],backupSrc:a,isMobile:r=!1,initialSlide:o=0}){const i=(0,n.useMemo)((()=>(null===t||void 0===t?void 0:t.length)?t:[e.banner,e.logo].filter((e=>Boolean(e)))),[e.banner,e.logo,t]),[l,s]=(0,n.useState)((()=>ba(o,i.length))),[c,d]=(0,n.useState)(null);(0,n.useEffect)((()=>{s(ba(o,i.length))}),[i.length,o]),(0,n.useEffect)((()=>{c&&i.length&&c.selectedScrollSnap()!==l&&c.scrollTo(l)}),[l,c,i.length]);const p=e.altText||("string"===typeof e.name?e.name:"product image"),m=(0,n.useCallback)((e=>{s(e),null===c||void 0===c||c.scrollTo(e)}),[c]);return{generalInfo:e,imageCarousel:t,backupSrc:a,isMobile:r,activeIndex:l,embla:c,altPrefix:p,galleryImages:i,setActiveIndex:s,setEmbla:d,handleThumbnailClick:m}}({generalInfo:e,imageCarousel:t,backupSrc:a,isMobile:r,initialSlide:i}),c=(0,n.useMemo)((()=>Object.assign(Object.assign({},s),{initialSlide:i})),[s.generalInfo,s.imageCarousel,s.backupSrc,s.isMobile,s.activeIndex,s.embla,s.altPrefix,s.galleryImages,s.handleThumbnailClick]);return o().createElement(ga.Provider,{value:c},l)}function ya({generalInfo:e,imageCarousel:t=[],backupSrc:a,isMobile:r=!1,initialSlide:n=0,isOpen:i=!1,onOpenChange:l,modalProps:s={},title:c="Product gallery"}){const d=()=>{null===l||void 0===l||l(!1)},p=r?c:void 0;return o().createElement(pa,Object.assign({opened:i,onClose:d,zIndex:b.Z,withCloseButton:r,centered:!0,size:"auto",fullScreen:r,title:p,autoFocus:!1},s,{transitionProps:Object.assign({duration:200},s.transitionProps)}),!r&&o().createElement(ce.C,{onClick:d,className:"closeModal",width:24,height:24,fill:"#212121"}),o().createElement(wa,{generalInfo:e,imageCarousel:t,backupSrc:a,initialSlide:n,isMobile:r},o().createElement(xa,null)))}E.A.div` border-radius: 12px; padding: 0.875rem 0.75rem; background-color: ${C.w.colors.neutral50}; cursor: pointer; `,E.A.div` display: flex; flex-direction: column; justify-content: space-between; height: 100%; `,(0,E.A)(y.T)` width: 100%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; `,(0,E.A)(y.T)` font-size: ${(0,g.D)(11)}; width: 100%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; `,E.A.div` display: flex; justify-content: center; align-items: center; height: 100%; `;const ka=E.A.div` display: flex; flex-direction: column; align-items: center; border-radius: 12px; background-color: ${C.w.colors.neutral50}; padding: 16px 8px; gap: 8px; `,Ea=E.A.div` display: flex; flex-direction: column; gap: 4px; `,Ca=({image:e,description:t,title:a,className:r,imageProps:n})=>o().createElement(ka,{className:r},o().createElement($.I,Object.assign({src:e,alt:a,style:{width:(0,g.D)(120),height:(0,g.D)(120),objectFit:"cover"},width:120},n)),o().createElement(Ea,null,o().createElement(y.T,{size:"p3",weight:"semiBold",color:"#111111",align:"center"},a),o().createElement(y.T,{size:"p3",weight:"regular",align:"center"},t))),$a=E.A.div` display: flex; flex-direction: column; label { margin-bottom: ${(0,g.D)(8)}; } .error-text { margin-top: ${(0,g.D)(12)}; } `,Aa=E.A.div` display: flex; gap: ${(0,g.D)(4)}; svg { cursor: pointer; width: ${(0,g.D)(48)}; height: ${(0,g.D)(48)}; } &.read-only { svg { cursor: default; } } `,Da=E.A.div` padding: ${(0,g.D)(2)} ${(0,g.D)(8)}; border-radius: ${(0,g.D)(20)}; background-color: ${C.w.colors.yellow50}; width: fit-content; margin-top: ${(0,g.D)(12)}; `,Ma=({filled:e,onClick:t,onMouseEnter:a,onMouseLeave:r})=>o().createElement("div",{onClick:t,onMouseEnter:a,onMouseLeave:r},o().createElement(me,{color:e?C.w.colors.yellow600:C.w.colors.neutral100,stroke:e?C.w.colors.yellow500:C.w.colors.neutral200})),La=({value:e,max:t=5,onChange:a,readOnly:r=!1})=>{const[i,l]=(0,n.useState)(null),s=null!==i,c=()=>{r||l(null)},d=(e,t)=>o().createElement(Ma,{key:`star-${e}`,filled:t,onClick:()=>(e=>{r||null===a||void 0===a||a(e)})(e),onMouseEnter:()=>(e=>{r||l(e)})(e),onMouseLeave:c});return o().createElement(Aa,{className:(0,h.A)(r&&"read-only")},Array.from({length:t}).map(((t,a)=>{const r=a+1,n=e-a;return s?d(r,r<=i):n>=.9?d(r,!0):n>=.5?o().createElement("div",{key:`star-${a}`},o().createElement(ge,null)):d(r,!1)})))},Sa=({value:e,max:t=5,onChange:a,readOnly:r=!1,name:n,id:i,label:l,error:s})=>{const{t:c}=(0,J.u)(),d={1:c("common.rating.worse"),2:c("common.rating.bad"),3:c("common.rating.meh"),4:c("common.rating.good"),5:c("common.rating.excellent")}[e];return o().createElement($a,{className:(0,h.A)(r&&"read-only")},l&&o().createElement(y.T,{as:"label",size:"title2"},l),o().createElement("input",{type:"hidden",name:n,id:i,value:e}),o().createElement(La,{value:e,max:t,onChange:a,readOnly:r}),e>=0&&o().createElement(Da,null,o().createElement(y.T,{size:"c1"},d)),s&&o().createElement(y.T,{className:"error-text",size:"c1",color:C.w.colors.red600},s))},za=E.A.div` display: flex; align-items: center; gap: ${(0,g.D)(8)}; padding: ${(0,g.D)(10)} ${(0,g.D)(8)}; background-color: ${C.w.colors.neutral50}; border-radius: ${(0,g.D)(8)}; `,_a=E.A.div` display: flex; flex-direction: column; justify-content: space-between; `,Ba=e=>{const{doctorName:t,doctorAvatar:a,defaultDoctorAvatar:r}=e,{t:n}=(0,J.u)();return o().createElement(za,null,o().createElement(X.I,{alt:"doctor-avatar",src:a||r,style:{width:(0,g.D)(32),height:(0,g.D)(32),borderRadius:"50%",objectFit:"cover"}}),o().createElement(_a,null,o().createElement(y.T,{size:"c2",weight:"regular",color:C.w.colors.gray600},n("common.answeredBy"),":"),o().createElement(y.T,{size:"p3",weight:"semiBold",color:C.w.colors.gray800},t)))}}}]);