@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/index-1d3c6ce7.js

@@ -0,0 +1,195 @@
+import { _ as __rest } from './tslib.es6-06ba3978.js';
+import React__default from 'react';
+import { createStyles, useMantineTheme, Button as Button$1 } from '@mantine/core';
+
+const ANIMATION_DURATION = '100ms';
+
+var useStyles = createStyles((_theme, _params) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { other } = _theme;
+    const { template } = other;
+    const { size, variant, skipHover, isError, isSuccess, color, children, theme: themeProp, } = _params;
+    const isMb = template === 'mb' || themeProp === 'marryBaby';
+    const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
+    const isHexColor = finalColor.startsWith('#');
+    const hexColor50 = isHexColor
+        ? _theme.fn.lighten(color, 0.9)
+        : ((_b = (_a = _theme.colors) === null || _a === void 0 ? void 0 : _a[finalColor]) === null || _b === void 0 ? void 0 : _b[0]) || '';
+    const hexColor = isHexColor
+        ? finalColor
+        : (_d = (_c = _theme.colors) === null || _c === void 0 ? void 0 : _c[finalColor]) === null || _d === void 0 ? void 0 : _d[_theme.fn.primaryShade()];
+    const hoverHexColor = isHexColor
+        ? _theme.fn.darken(color, 0.05)
+        : (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
+    return {
+        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out`, '&:focus': {
+                outline: 'none',
+            } }, (!children && {
+            paddingLeft: '10px',
+            paddingRight: '10px',
+            '.mantine-Button-icon': {
+                margin: 0,
+            },
+        })), (() => {
+            switch (size) {
+                case 'xl':
+                    return {
+                        height: 56,
+                        fontWeight: 600,
+                        fontSize: isMb ? '14px' : '16px',
+                        lineHeight: '24px',
+                    };
+                case 'lg':
+                    return {
+                        height: 48,
+                        fontWeight: 600,
+                        fontSize: isMb ? '14px' : '16px',
+                        lineHeight: '24px',
+                    };
+                case 'md':
+                    return {
+                        height: 40,
+                        fontWeight: 600,
+                        fontSize: '14px',
+                        lineHeight: '22px',
+                    };
+                case 'sm':
+                    return {
+                        height: 32,
+                        fontWeight: 600,
+                        fontSize: isMb ? '12px' : '14px',
+                        lineHeight: '22px',
+                        paddingLeft: '16px',
+                        paddingRight: '16px',
+                    };
+                case 'xs':
+                    return {
+                        height: 24,
+                        fontWeight: 600,
+                        fontSize: '12px',
+                        lineHeight: '18px',
+                        paddingLeft: '8px',
+                        paddingRight: '8px',
+                    };
+            }
+        })()), (() => {
+            switch (variant) {
+                case 'primary': {
+                    return Object.assign({ color: _theme.white, backgroundColor: hexColor }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hoverHexColor,
+                        },
+                    }));
+                }
+                case 'secondary':
+                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor50,
+                            border: `1px solid ${hexColor}`,
+                        },
+                    }));
+                case 'white':
+                    return {
+                        color: hexColor,
+                        backgroundColor: 'transparent',
+                        border: `1px solid transparent`,
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                            borderColor: `transparent`,
+                        },
+                    };
+                case 'tertiary':
+                    return {
+                        color: _theme.colors.gray[8],
+                        backgroundColor: _theme.white,
+                        border: `1px solid ${_theme.colors.neutral[2]}`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.colors.neutral[0],
+                                border: `1px solid ${_theme.colors.neutral[0]}`,
+                            }
+                            : {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${_theme.colors.neutral[2]}`,
+                            })),
+                    };
+                case 'light': {
+                    return {
+                        color: hexColor,
+                        backgroundColor: hexColor50,
+                        border: `1px solid transparent`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${hexColor50}`,
+                            }
+                            : {
+                                backgroundColor: hexColor50,
+                                border: `1px solid transparent`,
+                            })),
+                    };
+                }
+                case 'ghost':
+                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor50,
+                            border: `1px solid transparent`,
+                        },
+                    }));
+            }
+        })()), { '&[data-disabled]': {
+                backgroundColor: _theme.colors.gray[1],
+                color: _theme.colors.gray[4],
+            } }), (isError
+            ? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.red[0],
+                    border: `1px solid ${_theme.colors.red[6]}`,
+                },
+            })) : {})), (isSuccess
+            ? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.green[0],
+                },
+            })) : {})),
+    };
+});
+
+const MAPPED_VARIANT = {
+    primary: 'filled',
+    secondary: 'outline',
+    tertiary: 'default',
+    light: 'light',
+    ghost: 'subtle',
+    error: 'outline',
+    white: 'white',
+    success: 'subtle',
+};
+function filterObject(obj) {
+    const ret = {};
+    Object.keys(obj)
+        .filter((key) => obj[key] !== undefined)
+        .forEach((key) => (ret[key] = obj[key]));
+    return ret;
+}
+const Button = (props) => {
+    var _a, _b;
+    const theme = useMantineTheme();
+    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = __rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
+    const isError = variant === 'error';
+    const { classes, cx } = useStyles({
+        variant,
+        size,
+        color,
+        skipHover,
+        isError,
+        isSuccess: variant === 'success',
+        children,
+        theme: themeProp,
+    });
+    return (React__default.createElement(Button$1, Object.assign({ className: cx(className, variant), classNames: {
+            root: classes.root,
+        }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest), children));
+};
+
+export { ANIMATION_DURATION as A, Button as B };

package/build/esm/{index-474e0ae5.js → index-21256394.js}

@@ -1,19 +1,8 @@
 import React__default, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from './index-df29c4e0.js';
-import { u as useTranslations } from './useTranslations-adad3b06.js';
 import { format } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-0af1cc3d.js';
-
-var styles = {"loading":"tliWyii"};
-
-const Loading = ({ className, theme, hideText }) => {
-    const { t } = useTranslations();
-    return (React__default.createElement("div", { className: `${styles.loading} ${className}` },
-        React__default.createElement(Icon.Spinner, { isMarryBaby: theme === 'marryBaby' }),
-        !hideText && t('loading')));
-};
+import { t as theme } from './theme-7dadf4a1.js';
 
 const MONTHS_TRANSLATION = {
     'vi-VN': [
@@ -612,4 +601,4 @@ const DatePicker = ({ alignRight = true, placeholder, displayDateFormat, onChang
             }, format: displayDateFormat || defaultDateFormatString, formatDate: formatPickerDate, hideOnDayClick: isStatic ? false : true, placeholder: placeholder || '', onDayChange: handleDayChanged, showOverlay: isStatic })));
 };
 
-export { DatePicker as D, Loading as L };
+export { DatePicker as D };

package/build/esm/{index-2d47a346.js → index-219e3a35.js}

@@ -1,18 +1,19 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-06ba3978.js';
 import React__default from 'react';
-import './index-92eedeb0.js';
+import './index-9b3a8b6d.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-c807ef87.js';
-import './index-eeedf0f0.js';
-import './index-80f4d7df.js';
-import './useMantineLocale-1373e175.js';
-import { T as Text$1 } from './index-4dcdce19.js';
-import './theme-0af1cc3d.js';
-import './translationsContext-036458b7.js';
+import './index-6210f454.js';
+import './index-189d7601.js';
+import './index-9471fca1.js';
+import './useMantineLocale-453f8013.js';
+import { T as Text$1 } from './index-5723381f.js';
+import './index-1d3c6ce7.js';
+import './theme-7dadf4a1.js';
+import './translationsContext-42a1fa63.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-511a24f4.js';
+import './utils-d7bbdb52.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index-679d5383.js → index-29908d2c.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-0af1cc3d.js';
+import { t as theme } from './theme-7dadf4a1.js';
 
 const StyledDropdown = styled.div `
   --dropdown-padding: 12px 18px 12px 16px;

package/build/esm/{utils-ff5d88a2.js → index-2dc7803d.js}

@@ -1,9 +1,10 @@
+import React__default, { useState, useEffect } from 'react';
+import { L as LOCALE } from './index-189d7601.js';
+import { C as CommonGAssets } from './index-9471fca1.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-511a24f4.js';
-import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-80f4d7df.js';
-import { I as ImageWrap } from './index-92eedeb0.js';
-import { L as LOCALE } from './index-eeedf0f0.js';
+import { M as MediaQueries } from './utils-d7bbdb52.js';
+import { L as LogoIcon } from './logoIcon-3a581efb.js';
+import { I as ImageWrap } from './index-9b3a8b6d.js';
 
 const StyledLogo = styled.div `
   position: relative;
@@ -148,105 +149,6 @@ const StyledProLogo = styled.img `
   margin-left: -3px;
 `;
 
-const _LogoIcon = ({ type, width, height }) => {
-    const data = useMemo(() => {
-        switch (type) {
-            case 'hellobacsi':
-                return {
-                    width: width || '107px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellobacsi.png'),
-                };
-            case 'hellodoktor':
-                return {
-                    width: width || '127px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellodoktor.png'),
-                };
-            case 'hellosehat':
-                return {
-                    width: width || '121px',
-                    height: height || '27px',
-                    src: CommonGAssets.getAssetPath('logo/hellosehat.png'),
-                };
-            case 'hellohealth':
-                return {
-                    width: width || '123px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellohealth.png'),
-                };
-            case 'hellotogether':
-                return {
-                    width: width || '150px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellotogether.png'),
-                };
-            case 'hellocare':
-                return {
-                    width: width || '99px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellocare.png'),
-                };
-            case 'hellodoctor':
-                return {
-                    width: width || '127px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellodoctor.png'),
-                };
-            case 'hellokrupet':
-                return {
-                    width: width || '101px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellokrupet.png'),
-                };
-            case 'hellosayarwon':
-                return {
-                    width: width || '111px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellosayarwon.png'),
-                };
-            case 'helloyishi':
-                return {
-                    width: width || '89px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/helloyishi.png'),
-                };
-            case 'hellokhunmor':
-                return {
-                    width: width || '123px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/hellokhunmor.png'),
-                };
-            case 'helloswasthya':
-                return {
-                    width: width || '105px',
-                    height: height || '24px',
-                    src: CommonGAssets.getAssetPath('logo/helloswasthya.png'),
-                };
-            case 'logomark':
-                return {
-                    width: width || '60px',
-                    height: height || '57px',
-                    src: CommonGAssets.getAssetPath('logo/logomark.png'),
-                };
-            case 'marryBaby':
-                return {
-                    width: width || '145px',
-                    height: height || '28px',
-                    src: CommonGAssets.getAssetPath('logo/marrybaby.png'),
-                };
-            default:
-                return null;
-        }
-    }, [type, width, height]);
-    const { src, width: logoWidth, height: logoHeight } = data || {};
-    return (React__default.createElement(ImageWrap, { alt: `${type} logo`, className: "main-logo-icon", src: src, style: {
-            width: logoWidth,
-            height: logoHeight,
-        } }));
-};
-const LogoIcon = memo(_LogoIcon);
-
 const isChristmas = (date) => {
     const day = date.getDate();
     const month = date.getMonth();
@@ -364,4 +266,68 @@ const isLabourDay = (date) => {
     return start <= date && date <= end;
 };
 
-export { LogoIcon as L, StyledLogo as S, LunarNewYearLocale as a, isLunarNewYear as b, isNewYear as c, isRamadan as d, isVNHungKing as e, isVN3004 as f, isLabourDay as g, StyledProLogo as h, isChristmas as i };
+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-4dcdce19.js → index-5723381f.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-06ba3978.js';
 import React__default from 'react';
 import { createStyles, Text as Text$1 } from '@mantine/core';
-import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-511a24f4.js';
+import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-d7bbdb52.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/build/esm/{index-c807ef87.js → index-6210f454.js}

@@ -1,6 +1,6 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import { L as LOCALE } from './index-eeedf0f0.js';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import { L as LOCALE } from './index-189d7601.js';
+import { i as isProduction } from './isProduction-1937d355.js';
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',
@@ -902,4 +902,4 @@ var index = /*#__PURE__*/Object.freeze({
   isProduction: isProduction
 });
 
-export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CARE_LOCALES as C, DATE_FNS_LOCALE as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, MAP_DOMAIN_BY_LOCALE as M, QUERY_HEALTH_TOOL as Q, RISK_SCREENER_NAME as R, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, RISK_SCREENER_SLUG as a, CARE_BOOKING_LOCALES as b, CDN_ADDRESS as c, domainLocales as d, basePath as e, SSO_URL as f, UP_BASEPATH as g, DATE_FNS_DATE_FORMAT as h, index as i, siteHost as j, siteOptions as s };
+export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CDN_ADDRESS as C, DATE_FNS_LOCALE as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, MAP_DOMAIN_BY_LOCALE as M, QUERY_HEALTH_TOOL as Q, RISK_SCREENER_NAME as R, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, RISK_SCREENER_SLUG as a, CARE_LOCALES as b, CARE_BOOKING_LOCALES as c, domainLocales as d, basePath as e, SSO_URL as f, UP_BASEPATH as g, DATE_FNS_DATE_FORMAT as h, index as i, siteHost as j, siteOptions as s };

package/build/esm/index-7a1ea734.js

@@ -0,0 +1,100 @@
+import React__default, { useState } from 'react';
+import { t as theme } from './theme-7dadf4a1.js';
+import styled from '@emotion/styled';
+import { M as MarryBabyText } from './index-1c9b481b.js';
+import { T as Text } from './index-219e3a35.js';
+
+const StyledRadioImageGroup = styled.div `
+  display: flex;
+  width: 100%;
+
+  &[data-direction='vertical'] {
+    flex-direction: column;
+  }
+
+  &[data-direction='horizontal'] {
+    flex-wrap: wrap;
+  }
+`;
+const StyledRadioImageItem = styled.div `
+  display: flex;
+
+  padding: 8px;
+
+  border-radius: ${theme.borderRadius};
+  cursor: pointer;
+
+  & > div {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  &[data-is-mb='false'] {
+    &[data-selected='true'] {
+      border: 1px solid #2d87f3;
+      background: white;
+    }
+    &[data-selected='false'] {
+      border: 1px solid #f2f2f2;
+      box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
+    }
+  }
+
+  &[data-is-mb='true'] {
+    border-radius: 16px;
+    background: white;
+    padding: 16px auto;
+
+    &[data-selected='true'] {
+      border: 1px solid ${theme.mbColors.mint};
+      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
+    }
+    &[data-selected='false'] {
+      border: none;
+    }
+  }
+
+  &[data-disabled='true'] {
+    cursor: auto;
+  }
+
+  .radio-group-item-heading {
+    margin-top: 8px;
+    //height: 48px;
+    text-align: center;
+  }
+
+  .gender-image {
+    width: 70px;
+    height: 70px;
+    &[data-is-mobile='true'] {
+      width: 40px;
+      height: 40px;
+    }
+  }
+`;
+
+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, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
+};
+
+export { RadioImageGroup as R };

package/build/esm/{index-53a86337.js → index-7c384ae6.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-06ba3978.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-c807ef87.js';
-import { L as LOCALE } from './index-eeedf0f0.js';
-import { C as CommonGAssets } from './index-80f4d7df.js';
-import { M as MAPPED_LOCALE } from './useMantineLocale-1373e175.js';
+import { I as ISO_FORMAT } from './index-6210f454.js';
+import { L as LOCALE } from './index-189d7601.js';
+import { C as CommonGAssets } from './index-9471fca1.js';
+import { M as MAPPED_LOCALE } from './useMantineLocale-453f8013.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {