@hhgtech/hhg-components 1.28.68 → 1.28.70

package/build/esm/index-e183dc84.js

@@ -0,0 +1,71 @@
+import React__default, { useState, useEffect } from 'react';
+import { L as LOCALE } from './Subot-73dd692f.js';
+import { C as CommonGAssets } from './index-ec1cc2ea.js';
+import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-2af1561c.js';
+import { I as ImageWrap } from './index-01e95463.js';
+
+const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
+    const [seasonalChecks, setSeasonalChecks] = useState({
+        isChristmas: false,
+        isLunarNewYear: false,
+        isNewYear: false,
+        isRamadan: false,
+        isVNHungKing: false,
+        isVN3004: false,
+        isLabourDay: false,
+    });
+    useEffect(() => {
+        if (!dateForSeasonal || isNaN(new Date(dateForSeasonal).getTime()))
+            return;
+        const dateForSeasonalDate = new Date(dateForSeasonal);
+        const isChristmasMemo = isChristmas(dateForSeasonalDate);
+        const isLunarNewYearMemo = LunarNewYearLocale.includes(locale) && isLunarNewYear(dateForSeasonalDate);
+        const isNewYearMemo = !isLunarNewYearMemo && isNewYear(dateForSeasonalDate);
+        const isRamadanMemo = isRamadan(dateForSeasonalDate);
+        const isVNHungKingMemo = locale === LOCALE.Vietnam && isVNHungKing(dateForSeasonalDate);
+        const isVN3004Memo = locale === LOCALE.Vietnam && isVN3004(dateForSeasonalDate);
+        const isLabourDayMemo = locale === LOCALE.Vietnam && isLabourDay(dateForSeasonalDate);
+        setSeasonalChecks({
+            isChristmas: isChristmasMemo,
+            isLunarNewYear: isLunarNewYearMemo,
+            isNewYear: isNewYearMemo,
+            isRamadan: isRamadanMemo,
+            isVNHungKing: isVNHungKingMemo,
+            isVN3004: isVN3004Memo,
+            isLabourDay: isLabourDayMemo,
+        });
+    }, [locale, new Date(dateForSeasonal).getDate()]);
+    return (React__default.createElement(StyledLogo, { className: className, style: style, "data-logo-is-light": isLightLogo || undefined, "data-has-badge": badge ? true : false, "data-seasonal": seasonalChecks.isRamadan
+            ? 'ramadan'
+            : seasonalChecks.isChristmas
+                ? 'christmas'
+                : seasonalChecks.isLunarNewYear
+                    ? 'lunar-new-year'
+                    : seasonalChecks.isNewYear
+                        ? 'new-year'
+                        : seasonalChecks.isVNHungKing
+                            ? 'hung-king'
+                            : seasonalChecks.isVN3004
+                                ? '30-04'
+                                : seasonalChecks.isLabourDay
+                                    ? 'labour-day'
+                                    : undefined, "data-type": type },
+        seasonalChecks.isChristmas ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ImageWrap, { alt: "left xmas logo", src: CommonGAssets.getAssetPath('logo/xmas-left.png'), className: "common-logo-seasonal-left" }),
+            React__default.createElement(ImageWrap, { alt: "right xmas logo", src: CommonGAssets.getAssetPath('logo/xmas-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isNewYear ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ImageWrap, { alt: "left new year logo", src: CommonGAssets.getAssetPath('logo/new-year-left.png'), className: "common-logo-seasonal-left" }),
+            React__default.createElement(ImageWrap, { alt: "right new year logo", src: CommonGAssets.getAssetPath('logo/new-year-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isLunarNewYear ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ImageWrap, { alt: "left lunar new year logo", loading: "lazy", src: CommonGAssets.getAssetPath('logo/lunar-new-year-left.png'), className: "common-logo-seasonal-left" }),
+            React__default.createElement(ImageWrap, { alt: "right lunar new year logo", loading: "lazy", src: CommonGAssets.getAssetPath('logo/lunar-new-year-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isRamadan && type === 'hellosehat' ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ImageWrap, { alt: "left ramadan logo", loading: "lazy", src: CommonGAssets.getAssetPath('logo/ramadan-sehat-left.png'), className: "common-logo-seasonal-left" }),
+            React__default.createElement(ImageWrap, { alt: "right ramadan logo", loading: "lazy", src: CommonGAssets.getAssetPath('logo/ramadan-sehat-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isRamadan && type === 'hellodoktor' ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ImageWrap, { alt: "left ramadan logo", loading: "lazy", src: CommonGAssets.getAssetPath('logo/ramadan-doktor-left.png'), className: "common-logo-seasonal-left" }),
+            React__default.createElement(ImageWrap, { alt: "right ramadan logo", loading: "lazy", src: CommonGAssets.getAssetPath('logo/ramadan-doktor-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isVNHungKing &&
+            (type === 'hellobacsi' || type === 'marryBaby') ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ImageWrap, { alt: "Hung King logo", loading: "lazy", src: CommonGAssets.getAssetPath('logo/hung-king-bg.png'), className: "common-logo-seasonal-left" }))) : null,
+        React__default.createElement(LogoIcon, { type: type, width: customSize === null || customSize === void 0 ? void 0 : customSize.width, height: customSize === null || customSize === void 0 ? void 0 : customSize.height }),
+        isPro ? (React__default.createElement(StyledProLogo, { src: CommonGAssets.getAssetPath('logo/pro-suffix.svg') })) : null,
+        badge));
+};
+
+export { Logo as L };

package/build/esm/index-ebb8bd0e.js

@@ -0,0 +1,149 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default from 'react';
+import { rem, createStyles, Text as Text$1 } from '@mantine/core';
+
+var FontWeight;
+(function (FontWeight) {
+    FontWeight[FontWeight["regular"] = 400] = "regular";
+    FontWeight[FontWeight["semiBold"] = 600] = "semiBold";
+    FontWeight[FontWeight["bold"] = 700] = "bold";
+})(FontWeight || (FontWeight = {}));
+const GlobalTextStyle = {
+    fontSize: {
+        base: [rem(16), rem(16)],
+        lg: [rem(18), rem(16)],
+        md: [rem(18), rem(16)],
+        sm: [rem(16), rem(14)],
+        xs: [rem(14), rem(12)],
+        s1: [rem(22), rem(18)],
+        s2: [rem(18), rem(16)],
+        s3: [rem(16), rem(14)],
+        s4: [rem(14), rem(12)],
+        s5: [rem(12), rem(12)],
+        p1: [rem(18), rem(16)],
+        p2: [rem(16), rem(16)],
+        p3: [rem(16), rem(14)],
+        p4: [rem(14), rem(12)],
+        p5: [rem(12), rem(12)],
+        c1: [rem(16), rem(14)],
+        c2: [rem(14), rem(12)],
+        n1: [rem(12), rem(12)],
+        label1: [rem(14), rem(14)],
+        label2: [rem(12), rem(12)],
+        h1: [rem(40), rem(26)],
+        h2: [rem(32), rem(24)],
+        h3: [rem(26), rem(20)],
+        h4: [rem(22), rem(18)],
+        h5: [rem(18), rem(16)],
+        h6: [rem(16), rem(14)],
+    },
+    lineHeight: {
+        base: [rem(24), rem(24)],
+        lg: [rem(32), rem(28)],
+        md: [rem(32), rem(28)],
+        sm: [rem(24), rem(22)],
+        xs: [rem(24), rem(18)],
+        s1: [rem(32), rem(26)],
+        s2: [rem(28), rem(24)],
+        s3: [rem(24), rem(24)],
+        s4: [rem(22), rem(18)],
+        s5: [rem(18), rem(18)],
+        p1: [rem(28), rem(28)],
+        p2: [rem(24), rem(24)],
+        p3: [rem(24), rem(22)],
+        p4: [rem(22), rem(18)],
+        c1: [rem(24), rem(22)],
+        c2: [rem(22), rem(18)],
+        n1: [rem(18), rem(18)],
+        label1: [rem(22), rem(22)],
+        label2: [rem(18), rem(18)],
+        h1: [rem(52), rem(34)],
+        h2: [rem(42), rem(32)],
+        h3: [rem(36), rem(26)],
+        h4: [rem(32), rem(26)],
+        h5: [rem(28), rem(24)],
+        h6: [rem(24), rem(22)],
+    },
+    letterSpacing: {
+        lg: [-0.2, 0],
+        md: [-0.2, 0],
+        sm: [0, -0.2],
+        s1: [-0.6, -0.6],
+        s2: [-0.4, -0.2],
+        s3: [0, -0.2],
+        s4: [0, -0.2],
+        p1: [-0.2, -0.2],
+        p2: [0, -0.2],
+        p3: [0, -0.2],
+        p4: [-0.2, 0],
+        label1: [0, -0.2],
+        h1: [-1.2, -0.9],
+        h2: [-1, -0.8],
+        h3: [-0.8, -0.7],
+        h4: [-0.6, -0.6],
+        h5: [-0.2, -0.2],
+        h6: [0, -0.2],
+    },
+    fontWeightBySize: {
+        s1: FontWeight.semiBold,
+        s2: FontWeight.semiBold,
+        s3: FontWeight.semiBold,
+        s4: FontWeight.semiBold,
+        h1: FontWeight.bold,
+        h2: FontWeight.bold,
+        h3: FontWeight.bold,
+        h4: FontWeight.bold,
+        h5: FontWeight.bold,
+        h6: FontWeight.bold,
+    },
+    fontWeight: FontWeight,
+};
+
+const OTHER_THEME_CONFIG = Object.assign({}, GlobalTextStyle);
+
+var useStyles = createStyles((theme, _params) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const TextConfig = Object.assign({}, OTHER_THEME_CONFIG);
+    const getFontSize = (_a = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _a === void 0 ? void 0 : _a[0];
+    const getLineHeight = (_b = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _b === void 0 ? void 0 : _b[0];
+    const getLetterSpacing = (_e = (_d = (_c = TextConfig.letterSpacing) === null || _c === void 0 ? void 0 : _c[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : 0;
+    const getFontSizeMbDown = (_f = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _f === void 0 ? void 0 : _f[1];
+    const getLineHeightMbDown = (_g = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _g === void 0 ? void 0 : _g[1];
+    const getLetterSpacingMbDown = (_k = (_j = (_h = TextConfig.letterSpacing) === null || _h === void 0 ? void 0 : _h[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _j === void 0 ? void 0 : _j[1]) !== null && _k !== void 0 ? _k : 0;
+    return {
+        root: Object.assign(Object.assign({}, ((_params === null || _params === void 0 ? void 0 : _params.size) && {
+            fontWeight: (_params === null || _params === void 0 ? void 0 : _params.as) === 'label'
+                ? FontWeight.semiBold
+                : TextConfig.fontWeightBySize[_params === null || _params === void 0 ? void 0 : _params.size] ||
+                    TextConfig.fontWeight[_params.weight],
+            fontSize: `${getFontSize}`,
+            lineHeight: `${getLineHeight}`,
+            letterSpacing: getLetterSpacing,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: `${getFontSizeMbDown}`,
+                lineHeight: `${getLineHeightMbDown}`,
+                letterSpacing: getLetterSpacingMbDown,
+            },
+        })), { '&[data-event-category] > *': {
+                pointerEvents: 'none',
+            } }),
+    };
+});
+
+const Text = (_a) => {
+    var _b;
+    var { size, color, weight = 'regular', as = 'p', styles, className, dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = __rest(_a, ["size", "color", "weight", "as", "styles", "className", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
+    const { theme, classes, cx } = useStyles({ size, weight: weight === 'caption' ? 'bold' : weight, as }, { name: 'Text', styles });
+    return (React__default.createElement(Text$1, Object.assign({ className: cx(classes.root, className), color: color ||
+            (as === 'label'
+                ? theme.colors.gray[6]
+                : ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb'
+                    ? theme.colors.delftGray[7]
+                    : theme.colors.gray[7]), component: as, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, classNames: {
+            root: Object.assign(Object.assign({}, (rest.wordWrap ? { 'word-wrap': rest.wordWrap } : undefined)), (rest.isUppercase || weight === 'caption'
+                ? { 'text-transform': 'uppercase' }
+                : undefined)),
+        } }, rest)));
+};
+
+export { OTHER_THEME_CONFIG as O, Text as T };

package/build/esm/index-ec1cc2ea.js

@@ -0,0 +1,52 @@
+import { d as domainLocales } from './index-852bb5ca.js';
+import { i as isProduction } from './isProduction-9081cff7.js';
+
+const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
+const defaultDomain = 'hellosehat.com';
+class GAssets {
+    constructor() {
+        this.baseDomain = '';
+        this.subPath = '';
+        this.getAssetPath = (path, forceBaseDomain, forceSubPath) => {
+            const fileUrl = 'https://hhg-common.' +
+                [
+                    forceBaseDomain || this.getBaseDomain(),
+                    forceSubPath || this.subPath,
+                    path,
+                ].join('/');
+            if (!isProduction && !process.env.JEST_WORKER_ID) {
+                // don't add timestamp when running jest tests
+                // add timestamp to avoid caching if not production
+                return fileUrl + '?v=' + Math.floor(new Date().getTime() / 1000 / 60 / 3);
+            }
+            return fileUrl;
+        };
+    }
+    // constructor() {}
+    getBaseDomain() {
+        if (this.baseDomain) {
+            return this.baseDomain;
+        }
+        if (typeof window !== 'undefined') {
+            const { host } = window.location;
+            const hostParts = host.split('.');
+            const includeDomain = domainLocales[Object.keys(domainLocales).find((k) => host.includes(domainLocales[k]))];
+            if (hostParts.includes('localhost') ||
+                hostParts.includes('hellohealthgroup') ||
+                hostParts.every((part) => isNumeric(part)) || // is IP address
+                !includeDomain) {
+                return defaultDomain;
+            }
+            return includeDomain;
+        }
+        return defaultDomain;
+    }
+}
+const CommonGAssets = new GAssets();
+CommonGAssets.subPath = 'common';
+if (process.env.NEXT_PUBLIC_DEPLOY_LOCALE) {
+    CommonGAssets.baseDomain =
+        domainLocales[process.env.NEXT_PUBLIC_DEPLOY_LOCALE];
+}
+
+export { CommonGAssets as C, GAssets as G };

package/build/esm/index-f1227130.js

@@ -0,0 +1,370 @@
+import React__default, { useRef, useEffect, useState } from 'react';
+import { Portal } from '@mantine/core';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-f7ab8c32.js';
+import { x as StyledBackdrop, y as StyledDrawer, z as StyledDrawerPanel, A as StyledDrawerContent, B as StyledRadioImageGroup, C as StyledRadioImageItem, g as getDefaultClassWrapper } from './index.styles-31411b37.js';
+import { T as Text } from './index-ebb8bd0e.js';
+import { u as useScrollbarSize } from './useScrollbarSize-ee04fb14.js';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { t as theme } from './theme-7522724d.js';
+import { BabyBoyMB, GenderChooseBoy, BabyGirlMB, GenderChooseGirl } from '@hhgtech/icons/other';
+import { u as useTranslations } from './useTranslations-d53557b4.js';
+import { G as Gender } from './Subot-73dd692f.js';
+import { M as MarryBabyText, a as MarryBabyHeading } from './index-9622b7d8.js';
+import { T as Text$1 } from './index-2a68f8b2.js';
+
+const Backdrop = ({ open = false, onClickOutside, }) => {
+    return (React__default.createElement(StyledBackdrop, { "data-open": open, onClick: onClickOutside }));
+};
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Drawer = ({ children, title, onClose, open = false, placement = 'left', destroyOnClose = false, isPropagationEvent = true, className, }) => {
+    const ref = useRef();
+    useEffect(() => {
+        toggleNoScroll(open);
+        return () => toggleNoScroll(false);
+    }, [open]);
+    const onCloseDrawer = () => {
+        ref.current.classList.add('slideOut');
+        setTimeout(() => {
+            onClose();
+        }, 800);
+    };
+    if (!open && destroyOnClose) {
+        return null;
+    }
+    return (React__default.createElement(Portal, null,
+        React__default.createElement(StyledDrawer, { className: className, open: open },
+            React__default.createElement(Backdrop, { open: open, onClickOutside: onCloseDrawer }),
+            React__default.createElement(StyledDrawerPanel, { open: open, placement: placement, ref: ref, hasTitle: Boolean(title) },
+                React__default.createElement("div", { className: "title" },
+                    title && (React__default.createElement(Text, { size: "s2", weight: "semiBold" }, title)),
+                    React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "close-button", onClick: onCloseDrawer },
+                        React__default.createElement("path", { d: "M5.99007 4.99067C5.79114 4.99072 5.59674 5.0501 5.43173 5.16121C5.26672 5.27233 5.1386 5.43013 5.06374 5.61444C4.98889 5.79875 4.9707 6.0012 5.0115 6.1959C5.05231 6.39061 5.15025 6.56872 5.29281 6.70747L10.5858 12.0004L5.29281 17.2934C5.19684 17.3855 5.12021 17.4959 5.06743 17.618C5.01464 17.7402 4.98676 17.8716 4.9854 18.0046C4.98405 18.1377 5.00926 18.2697 5.05954 18.3928C5.10983 18.516 5.1842 18.6279 5.27827 18.722C5.37235 18.8161 5.48426 18.8904 5.60743 18.9407C5.73061 18.991 5.86259 19.0162 5.99563 19.0149C6.12867 19.0135 6.2601 18.9856 6.38223 18.9328C6.50436 18.8801 6.61473 18.8034 6.70687 18.7075L11.9998 13.4145L17.2928 18.7075C17.385 18.8034 17.4953 18.8801 17.6175 18.9328C17.7396 18.9856 17.871 19.0135 18.0041 19.0149C18.1371 19.0162 18.2691 18.991 18.3922 18.9407C18.5154 18.8904 18.6273 18.8161 18.7214 18.722C18.8155 18.6279 18.8899 18.516 18.9401 18.3928C18.9904 18.2697 19.0156 18.1377 19.0143 18.0047C19.0129 17.8716 18.985 17.7402 18.9323 17.618C18.8795 17.4959 18.8028 17.3855 18.7069 17.2934L13.4139 12.0004L18.7069 6.70747C18.8514 6.567 18.9501 6.38616 18.99 6.18864C19.03 5.99112 19.0093 5.78614 18.9308 5.60055C18.8523 5.41497 18.7195 5.25744 18.5499 5.14861C18.3803 5.03978 18.1817 4.98473 17.9803 4.99067C17.7205 4.99841 17.4739 5.10699 17.2928 5.2934L11.9998 10.5864L6.70687 5.2934C6.61368 5.19761 6.50224 5.12146 6.37912 5.06947C6.25601 5.01747 6.12372 4.99068 5.99007 4.99067Z", fill: "#595959" }))),
+                React__default.createElement(StyledDrawerContent, { onClick: (e) => {
+                        if (isPropagationEvent) {
+                            e.stopPropagation();
+                        }
+                    } }, children &&
+                    (React__default.isValidElement(children)
+                        ? children
+                        : typeof children === 'function'
+                            ? children({
+                                internalClose: onCloseDrawer,
+                            })
+                            : null))))));
+};
+
+const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
+    const [check, setCheck] = useState(value);
+    const handleOnChange = (v) => {
+        if (isDisabled)
+            return;
+        setCheck(v);
+        onChange && onChange(v);
+    };
+    const isMarryBaby = siteType === 'marryBaby';
+    return (React__default.createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default.createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index, onClick: () => {
+            handleOnChange(option.value);
+        } },
+        React__default.createElement("div", null,
+            option.content,
+            option.label && (React__default.createElement(React__default.Fragment, null, isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
+                    ? theme.mbColors.dark
+                    : theme.mbColors.midGray }, option.label)) : (React__default.createElement(Text$1, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
+};
+
+const _StyledModal = styled.div `
+  position: relative;
+  z-index: 200;
+  background-color: ${theme.colors.white};
+  border-radius: ${theme.borderRadius};
+  box-shadow: 0px 4px 8px ${theme.colors.gray200};
+  &[data-site-type='marryBaby'] {
+    border-radius: 16px;
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+
+      padding: 24px;
+    }
+  }
+  .hhg-modal__content {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    padding: 16px;
+  }
+  .hhg-modal__video {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    background-color: none;
+    box-shadow: none;
+  }
+`;
+const StyledModalClass = 'hhgcomp-modal-modal';
+const StyledModal = getDefaultClassWrapper(_StyledModal, StyledModalClass);
+const StyledModalWrapper = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  background-color: rgba(38, 38, 38, 0.3);
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    visibility: visible;
+  }
+
+  &.slideTop {
+    .${StyledModalClass} {
+      transform: translate(0, -100vh);
+      transition: all 0.5s ease;
+    }
+
+    &[data-open='true'] {
+      .${StyledModalClass} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    .${StyledModalClass} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      .${StyledModalClass} {
+        transition: all 0.3s ease-out;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    .${StyledModalClass} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    .${StyledModalClass} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    .${StyledModalClass} {
+      height: 100%;
+      max-height: 539px;
+      ${MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    .${StyledModalClass} {
+      width: 100%;
+      max-width: 407px;
+      ${MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${theme.colors.secondaryDark};
+  }
+`;
+
+const MODAL_ROOT_ID = 'hhg-modals';
+const getModalsRoot = () => {
+    let el = document.getElementById(MODAL_ROOT_ID);
+    if (!el) {
+        el = document.createElement('div');
+        el.setAttribute('id', MODAL_ROOT_ID);
+        document.body.append(el);
+    }
+    return el;
+};
+const cleanUpModalShow = () => {
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    // Remove the opening class if there are only 1 popup is shown
+    if (remainingPopupOpened.length < 1) {
+        document.body.classList.remove('hhc-modal-show');
+    }
+};
+const cleanUpDisabledScroll = () => {
+    // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    if (remainingPopupOpened.length < 1) {
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('hhc-disabled-scroll');
+    }
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', animationType = 'slideTop', isStaticBackdrop = false, siteType, }) => {
+    const [mounted, setMounted] = useState(false);
+    const elRef = useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+            document.body.classList.add('hhc-disabled-scroll');
+        }
+        else {
+            cleanUpDisabledScroll();
+        }
+    }, [isOpen, scrollBarWidth]);
+    if (!mounted)
+        return null;
+    const classes = ['hhg-modal__wrapper', className, animationType]
+        .filter((s) => s)
+        .join(' ');
+    return createPortal(React__default.createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default.createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default.createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default.createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+const StyledBabyGrowthGender = styled.div `
+  & > :not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  .gender-selector {
+    & > :not(:last-child) {
+      margin-right: 16px;
+    }
+
+    & > div {
+      width: calc(50% - 8px);
+
+      ${MediaQueries.mbUp} {
+        justify-self: left;
+      }
+    }
+  }
+`;
+const StyledBabyGrowthGenderOption = styled(RadioImageGroup) `
+  & > div > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    gap: 8px;
+    padding-block: 5px;
+  }
+  .radio-group-item-heading {
+    margin-top: 0;
+  }
+`;
+
+const BabyGrowthGender = ({ value, onChange, siteType, }) => {
+    const { t } = useTranslations();
+    const isMarryBaby = siteType == 'marryBaby';
+    return (React__default.createElement(StyledBabyGrowthGender, { "data-is-marryBaby": isMarryBaby },
+        isMarryBaby ? (React__default.createElement(MarryBabyHeading, { type: "h4", color: theme.mbColors.dark }, t('tools.selectBabyGender'))) : (React__default.createElement(Text, { size: "label2", weight: "bold", style: { marginBottom: '0.5rem' } }, t('tools.selectBabyGender'))),
+        React__default.createElement(StyledBabyGrowthGenderOption, { siteType: siteType, options: [
+                {
+                    value: Gender.Boy,
+                    label: t('gender.male'),
+                    content: isMarryBaby ? React__default.createElement(BabyBoyMB, null) : React__default.createElement(GenderChooseBoy, null),
+                },
+                {
+                    value: Gender.Girl,
+                    label: t('gender.female'),
+                    content: isMarryBaby ? React__default.createElement(BabyGirlMB, null) : React__default.createElement(GenderChooseGirl, null),
+                },
+            ], value: value, onChange: onChange, className: "gender-selector" })));
+};
+
+export { BabyGrowthGender as B, Drawer as D, Modal as M, RadioImageGroup as R };

package/build/esm/index-f5f8c84b.js

@@ -0,0 +1,5 @@
+import { Switch as Switch$1 } from '@mantine/core';
+
+const Switch = Switch$1;
+
+export { Switch as S };

package/build/esm/index-fb17aef5.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+var styles = {"container":"d76E4SH"};
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Container = ({ children, className, style, type }) => {
+    return (React__default.createElement("div", { className: `${styles.container} ${className || ''}`, style: style, "data-type": type }, children));
+};
+
+export { Container as C };