@hhgtech/hhg-components 1.29.42 → 1.29.43

package/build/esm/{index-031da05c.js → index-40919066.js}

@@ -1,69 +1,68 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-667832a2.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-924b4812.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-21e35369.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, B as Button$1, c as Input$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-ba777d71.js';
-import { T as Text$1 } from './index-7edac771.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-5160724c.js';
+import { T as Text } from './index-b1db79d0.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-64fbe1fc.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-3501a8c9.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, B as Button$1, c as Input$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-e2d45ff6.js';
+import { T as Text$1 } from './index-8e030e26.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-77e4ea0d.js';
 import { Bookmark, CalendarMB } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-61c6842a.js';
-import { H as Heading } from './index-48d75d5b.js';
-import { t as theme } from './theme-03d89802.js';
-import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Container as Container$1, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
+import { C as CommonGAssets } from './index-cb06c57d.js';
+import { H as Heading } from './index-c853dc6e.js';
+import { t as theme } from './theme-ad9ae9bc.js';
+import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Container, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import innertext from 'innertext';
 import '@mantine/dates';
-import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-62e5ab51.js';
-import { L as LOCALE } from './index-7dea2608.js';
-import './useMantineLocale-deeb986b.js';
-import './translationsContext-c2547a40.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-df7ed505.js';
+import { L as LOCALE } from './index-cc4e3181.js';
+import './useMantineLocale-5341dd85.js';
+import './translationsContext-dd192b6b.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-b804ef2f.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-7b6dd120.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-3fa61807.js';
-import { B as Button } from './index-0d9866a6.js';
-import { I as Input } from './index-7d1d6c79.js';
+import { L as Logo } from './index-23968a4b.js';
+import { B as Button } from './index-0771cb54.js';
+import { I as Input } from './index-b115d850.js';
 import { keyframes, css } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-d3299694.js';
-import { u as useTranslations } from './useTranslations-3a5b70f3.js';
+import { i as isProduction } from './isProduction-2cb49e0e.js';
+import { u as useTranslations } from './useTranslations-5f0ff5be.js';
 import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-4ea3e525.js';
-import { D as DATE_FORMAT } from './types-19e68c3a.js';
-import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-b0732a5b.js';
-import { D as DatePicker } from './index-13578b4b.js';
-import { M as MarryBabyText } from './index-18250b0b.js';
-import { S as Slider } from './index-d73121f4.js';
-import { D as Dropdown } from './index-a367d535.js';
-import { f as formatUserProfileUrl } from './index-b03e8e5c.js';
+import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-08683b2c.js';
+import { D as DATE_FORMAT } from './types-1184bbca.js';
+import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-5f7c2eba.js';
+import { D as DatePicker } from './index-f0551563.js';
+import { M as MarryBabyText } from './index-1d14271f.js';
+import { S as Slider } from './index-30aa26a2.js';
+import { D as Dropdown } from './index-54d95469.js';
+import { f as formatUserProfileUrl } from './index-a6c27fed.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-807babad.js';
-import { D as DatePicker$1 } from './index-3723a2c1.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-38287625.js';
+import { D as DatePicker$1 } from './index-8f004caa.js';
 import { Controller, useForm } from 'react-hook-form';
-import './constants-0904669a.js';
-import './utils-cf5bebf5.js';
-import { C as Container } from './index-1aeb952a.js';
-import './WhatsApp-85f73100.js';
-import './index.styled-d9fe4f4b.js';
-import './index-eec6203c.js';
-import { a as useOutsideClick } from './useOutsideClick-371cb137.js';
+import { a as useOutsideClick } from './useOutsideClick-29676c24.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { g as getSocialList } from './getSocialList-77cc5472.js';
+import { g as getSocialList } from './getSocialList-87a58288.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-e559250d.js';
-import { I as Icon } from './index-f2de848c.js';
+import './constants-3f24d4bd.js';
+import './utils-3d5bdbed.js';
+import './WhatsApp-98f17e50.js';
+import './index.styled-7e8976d7.js';
+import './index-2219b86b.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-4707108c.js';
+import { I as Icon } from './index-10f46069.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-6201aa22.js';
+import { M as Modal } from './index-8345f710.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-82442bba.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-09b7b732.js';
+import { g as getCookie } from './cookieHelper-bdcae9e9.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-98886668.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -3297,7 +3296,7 @@ const DueDateFormLastPeriod = ({ locale, onClick, siteType, pageUrl, }) => {
         React__default.createElement(Button$1, { dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', onClick: () => onClick(getDueDateLastPeriod(lastPeriodDate, periodLength), `${QUERY_HEALTH_TOOL.type}=0&${QUERY_HEALTH_TOOL.startDate}=${format(lastPeriodDate, API_DATE_FORMAT)}&${QUERY_HEALTH_TOOL.additional}=${periodLength}`), role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const StyledTwins = styled.div `
+styled.div `
   &[data-is-side='true'] {
     width: 100%;
     margin-bottom: 0;
@@ -3341,7 +3340,7 @@ styled.div `
     }
   }
 `;
-const StyledSubmitButton = styled.div `
+styled.div `
   width: 100%;
   display: flex;
   justify-content: center;
@@ -3387,7 +3386,7 @@ const StyledInputWrapper = styled.div `
     }
   }
 `;
-const StyledFormInput = styled.div `
+styled.div `
   position: relative;
   width: calc(50% - 8px);
 
@@ -3879,7 +3878,7 @@ styled.div `
     content: '';
   }
 `;
-const StyledRadioGroup = styled(RadioGroup) `
+styled(RadioGroup) `
   &[data-direction='horizontal'] div[data-type='circle'] {
     margin-right: 8px;
   }
@@ -3904,7 +3903,7 @@ const DueDateCardEmbed = ({ locale, onSubmitDueDate, dueDatePageInfo, expertUrl,
 
 const BmiFormContext = createContext({});
 
-const DefaultForm$1 = (props) => {
+const DefaultForm$2 = (props) => {
     var _a, _b, _c, _d;
     const { t, locale } = useTranslations();
     const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
@@ -3939,7 +3938,7 @@ const DefaultForm$1 = (props) => {
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
 };
 
-const InlineForm$1 = (props) => {
+const InlineForm$2 = (props) => {
     var _a, _b, _c, _d;
     const { t, locale } = useTranslations();
     const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
@@ -4031,7 +4030,7 @@ const BmiForm = (_a) => {
             isTouched,
             linkTool,
             submitProps,
-        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm$1, Object.assign({}, commonProps)))));
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm$2, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm$2, Object.assign({}, commonProps)))));
 };
 
 const BMICardEmbed = (_a) => {
@@ -4094,12 +4093,24 @@ var useStyles$1 = createStyles((theme, { hasOnClickFn }) => {
     };
 });
 
-const BabyPoopEmbed = (_a) => {
-    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps } = _a, props = __rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps"]);
+const BabyPoopForm = (_a) => {
+    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = __rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
     const { t } = useTranslations();
     const _theme = useMantineTheme();
     const isMarryBaby = _theme.other.template === 'mb';
-    const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopEmbed' });
+    const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
+    return (React__default.createElement(Box, Object.assign({ className: classes.root }, props),
+        sponsorLogo && (React__default.createElement(Box, { className: classes.sponsorBox },
+            React__default.createElement(Text, { size: "p4" }, t('common.sponsoredBy')),
+            React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
+        React__default.createElement(Text, { size: "p3", className: "description" }, babyPoopPage.description),
+        React__default.createElement(Button$1, Object.assign({ className: classes.btn, size: isMarryBaby ? 'lg' : 'md', variant: isMarryBaby ? 'secondary' : 'primary', onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
+};
+
+const BabyPoopEmbed = (_a) => {
+    var { babyPoopPage, formProps } = _a, props = __rest(_a, ["babyPoopPage", "formProps"]);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
     const { reviewedBy, reviewedDate } = babyPoopPage || {};
     return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
         React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: isMarryBaby
@@ -4110,17 +4121,12 @@ const BabyPoopEmbed = (_a) => {
                 date: reviewedDate,
             } }),
         React__default.createElement(HealthToolCardWrapper.Body, null,
-            React__default.createElement(Box, { className: classes.root },
-                sponsorLogo && (React__default.createElement(Box, { className: classes.sponsorBox },
-                    React__default.createElement(Text, { size: "p4" }, t('common.sponsoredBy')),
-                    React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
-                React__default.createElement(Text, { size: "p3", className: "description" }, babyPoopPage.description),
-                React__default.createElement(Button$1, Object.assign({ className: classes.btn, size: isMarryBaby ? 'lg' : 'md', variant: isMarryBaby ? 'secondary' : 'primary', onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))))));
+            React__default.createElement(BabyPoopForm, Object.assign({ babyPoopPage: babyPoopPage }, formProps)))));
 };
 
 const ThrFormContext = createContext({});
 
-const DefaultForm = (_a) => {
+const DefaultForm$1 = (_a) => {
     var _b;
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
@@ -4150,7 +4156,7 @@ const DefaultForm = (_a) => {
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
 };
 
-const InlineForm = (_a) => {
+const InlineForm$1 = (_a) => {
     var _b;
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
@@ -4325,7 +4331,7 @@ const ThrForm = (_a) => {
             linkTool,
             form,
             submitProps,
-        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm$1, Object.assign({}, commonProps)))));
 };
 
 const THRCardEmbed = (_a) => {
@@ -4483,175 +4489,138 @@ const OvulationCardEmbed = ({ onSubmitOvulation, locale, ovulationPageInfo, expe
             React__default.createElement(OvulationCalculator, { siteType: siteType, locale: locale, onSubmitOvulation: onSubmitOvulation, isSide: isSide }))));
 };
 
-const PWGInputForm = ({ siteType, info, onChange, errorMessage = {}, }) => {
-    const { t } = useTranslations();
-    const [isEdit, setIsEdit] = useState({
-        weightBefore: false,
-        height: false,
-        weight: false,
-    });
-    const [height, setHeight] = useState(0);
-    const ref = useRef(null);
-    useEffect(() => {
-        var _a;
-        setHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
-    });
-    const checkValidInputIsANumber = (s, cb) => {
-        if (s === '' || (!isNaN(s) && !isNaN(parseFloat(s)))) {
-            cb(s);
-        }
-    };
-    const onWeightBeforeChanged = (weightBefore) => {
-        checkValidInputIsANumber(weightBefore, (a) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { weightBefore: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { weightBefore: a });
-            onChange && onChange(newInfo);
-        });
-    };
-    const onHeightChanged = (height) => {
-        checkValidInputIsANumber(height, (h) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { height: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { height: h });
-            onChange && onChange(newInfo);
-        });
-    };
-    const onWeightChanged = (weight) => {
-        checkValidInputIsANumber(weight, (w) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { weight: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { weight: w });
-            onChange && onChange(newInfo);
-        });
-    };
-    useEffect(() => {
-        onChange &&
-            onChange(Object.assign({}, info));
-    }, []);
-    useEffect(() => {
-        setIsEdit({
-            weightBefore: false,
-            height: false,
-            weight: false,
-        });
-    }, [errorMessage]);
-    return siteType === 'marryBaby' ? (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "input-form-pwg input-section" },
-            React__default.createElement(StyledTextField, { label: t('pregnancyWeightGain.heightInput'), name: "pwg-height", size: "md", value: info === null || info === void 0 ? void 0 : info.height, CustomInput: React__default.createElement(Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? 'error-input' : '', name: "pwg-height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.height, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onHeightChanged }) })),
-        React__default.createElement("div", { className: "input-form-pwg input-section" },
-            React__default.createElement(StyledTextField, { label: t('pregnancyWeightGain.weightBeforeInput'), name: "pwg-weightBefore", size: "md", value: info === null || info === void 0 ? void 0 : info.weightBefore, CustomInput: React__default.createElement(Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? 'error-input' : '', name: "pwg-weightBefore", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weightBefore, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onWeightBeforeChanged }) })),
-        React__default.createElement("div", { className: "input-form-pwg input-section" },
-            React__default.createElement(StyledTextField, { label: t('pregnancyWeightGain.weightInput'), name: "pwg-weight", size: "md", value: info === null || info === void 0 ? void 0 : info.weight, CustomInput: React__default.createElement(Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? 'error-input' : '', name: "pwg-weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weight, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weight : '', showErrorMessage: false, onChange: onWeightChanged }) })))) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "input-form-pwg" },
-            React__default.createElement(PureInput, { placeholder: t('pwg.placeholder.height'), className: "input-section", label: React__default.createElement("span", { style: {
-                        color: theme.colors.gray600,
-                        fontWeight: 'bold',
-                        marginBottom: '9px',
-                    }, className: "label-text" },
-                    t('pregnancyWeightGain.heightInput'),
-                    ' ',
-                    React__default.createElement("span", { style: {
-                            color: `${theme.colors.gray300}`,
-                        } }, t('bmi.heightInput.desc'))), errorMessage: !isEdit.height ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', size: "sm", isNumerousKeyboard: true, name: "pwg-height", value: info === null || info === void 0 ? void 0 : info.height, onChange: onHeightChanged })),
-        React__default.createElement("div", { className: "input-form-pwg" },
-            React__default.createElement(PureInput, { placeholder: t('pwg.placeholder.weight'), className: "input-section", label: React__default.createElement("span", { style: {
-                        color: theme.colors.gray600,
-                        fontWeight: 'bold',
-                        marginBottom: '9px',
-                    }, ref: ref, className: "label-text" },
-                    t('pregnancyWeightGain.weightBeforeInput'),
-                    ' ',
-                    React__default.createElement("span", { style: {
-                            color: `${theme.colors.gray300}`,
-                        } }, t('pregnancyWeightGain.weightInput.desc'))), errorMessage: !isEdit.weightBefore ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weightBefore : '', size: "sm", isNumerousKeyboard: true, name: "pwg-weightBefore", onChange: onWeightBeforeChanged, value: info === null || info === void 0 ? void 0 : info.weightBefore })),
-        React__default.createElement("div", { className: "input-form-pwg" },
-            React__default.createElement(PureInput, { placeholder: t('pwg.placeholder.weight'), className: "input-section", label: React__default.createElement("span", { style: {
-                        color: theme.colors.gray600,
-                        fontWeight: 'bold',
-                        marginBottom: '9px',
-                        minHeight: height,
-                    }, className: "label-text" },
-                    t('pregnancyWeightGain.weightInput'),
-                    ' ',
-                    React__default.createElement("span", { style: {
-                            color: `${theme.colors.gray300}`,
-                        } }, t('pregnancyWeightGain.weightInput.desc'))), errorMessage: !isEdit.weight ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weight : '', size: "sm", isNumerousKeyboard: true, name: "pwg-weight", value: info === null || info === void 0 ? void 0 : info.weight, onChange: onWeightChanged }))));
+const PWGFormContext = createContext({});
+
+const DefaultForm = (_a) => {
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'))),
+        React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormChange, info, isSide = false, siteType, }) => {
-    var _a;
-    const { t } = useTranslations();
-    const [isTwins, setIsTwins] = useState('notwins');
-    const [cycleValue, setCycleValue] = useState({
-        label: '1',
-        value: 1,
+const InlineForm = (_a) => {
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+            React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }, form.getInputProps('pregnantWeek')))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "kg") }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('height'), { min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "cm") }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('weight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "kg") }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
+            React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout = (_a) => {
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'), { error: null }))),
+            form.errors.pregnantWeek && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { error: null }))),
+            form.errors.lastWeight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'), { error: null }))),
+            form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'), { error: null }))),
+            form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight))),
+        React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const INPUT_RANGE = {
+    height: {
+        min: 1,
+        max: 300,
+    },
+    weight: {
+        min: 1,
+        max: 200,
+    },
+    pregnantWeek: {
+        min: 1,
+        max: 40,
+    },
+};
+const PWGForm = (_a) => {
+    var { formLayout = 'default', submitProps, onSubmit } = _a, rest = __rest(_a, ["formLayout", "submitProps", "onSubmit"]);
+    const { t, locale } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form = useForm$1({
+        validate: {
+            pregnantWeek: isNotEmpty(t('validation.error.requiredField')),
+            height: isNotEmpty(t('validation.error.requiredField')),
+            weight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) >= Number(values.lastWeight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+            lastWeight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) < Number(values.weight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+        },
     });
-    const weekPregnantLengthDropDownOptions = useMemo(() => [...Array(40)].map((_, index) => ({
-        label: `${index + 1}`,
-        value: `${index + 1}`,
-    })), []);
     const { getHealthToolLink } = useHealthToolsCache(locale);
     const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE$1.PWG), [getHealthToolLink]);
-    return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
-        React__default.createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
+    const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, rest);
+    return (React__default.createElement(PWGFormContext.Provider, { value: {
+            linkTool,
+            form,
+            submitProps,
+        } }, isMarryBaby ? (React__default.createElement(MbLayout, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+const PWGCardEmbed = (_a) => {
+    var _b;
+    var { pwgContent, formProps } = _a, props = __rest(_a, ["pwgContent", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
                     CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
                 link: formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
-                reviewer: (_a = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name,
+                reviewer: (_b = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name,
                 date: pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedDate,
             } }),
-        React__default.createElement(Container, null,
-            React__default.createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "pwg-view-mobile", "data-is-side": isSide },
-                siteType !== 'marryBaby' && (React__default.createElement(StyledTwins, { className: "hide-asking-mobile", "data-is-side": isSide },
-                    React__default.createElement(Text, { size: "s4", weight: "semiBold", style: {
-                            display: 'block',
-                            color: theme.colors.gray600,
-                        }, className: "label" }, t('pregnancyWeightGain.havingTwins')),
-                    React__default.createElement(StyledRadioGroup, { options: [
-                            {
-                                value: 'twins',
-                                label: t('switchBtn.yes'),
-                            },
-                            {
-                                value: 'notwins',
-                                label: t('switchBtn.no'),
-                            },
-                        ], value: isTwins, onChange: (v) => setIsTwins(v), className: "gender-selector", id: "twins-check", direction: "horizontal", size: "small" }))),
-                React__default.createElement(StyledInputWrapper, null,
-                    React__default.createElement(StyledFormInput, { className: "input-section input-form-pwg", "data-is-side": isSide }, siteType === 'marryBaby' ? (React__default.createElement(StyledDropDown, { groupedWithLabel: t('pregnancyWeightGain.weekInput'), options: weekPregnantLengthDropDownOptions, placeholder: "28 days", id: "due-date-dropdown", size: "lg", value: cycleValue, onChange: (o) => setCycleValue({
-                            label: o.label,
-                            value: o.value,
-                        }) })) : (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(Text, { size: "s4", weight: "semiBold", style: {
-                                display: 'inline-block',
-                                marginBottom: '9px',
-                                color: theme.colors.gray600,
-                            } }, t('pregnancyWeightGain.weekInput')),
-                        React__default.createElement(Dropdown, { options: weekPregnantLengthDropDownOptions, placeholder: String(cycleValue.label), id: "weight-gain-dropdown", size: "md", value: cycleValue, onChange: (o) => setCycleValue({
-                                label: o.label,
-                                value: o.value,
-                            }) })))),
-                    React__default.createElement(PWGInputForm, { siteType: siteType, info: info, errorMessage: inputErrorMessage, onChange: onFormChange })),
-                siteType !== 'marryBaby' && (React__default.createElement(StyledTwins, { className: "hide-asking-desk", "data-is-side": isSide },
-                    React__default.createElement(Text, { size: "s4", weight: "semiBold", style: {
-                            display: 'block',
-                            color: theme.colors.gray600,
-                        }, className: "label" }, t('pregnancyWeightGain.havingTwins')),
-                    React__default.createElement(StyledRadioGroup, { options: [
-                            {
-                                value: 'twins',
-                                label: t('switchBtn.yes'),
-                            },
-                            {
-                                value: 'notwins',
-                                label: t('switchBtn.no'),
-                            },
-                        ], value: isTwins, onChange: (v) => setIsTwins(v), className: "gender-selector", id: "twins-check-mobile", direction: "horizontal", size: "small" }))),
-                siteType === 'marryBaby' && (React__default.createElement(Checkbox, { name: "twins", label: t('pregnancyWeightGain.havingTwins'), checked: isTwins === 'twins', siteType: "marryBaby", onChange: () => {
-                        if (isTwins === 'twins')
-                            setIsTwins('notwins');
-                        else
-                            setIsTwins('twins');
-                    }, value: "twins" })),
-                React__default.createElement(StyledSubmitButton, { "data-is-side": isSide, "data-site": siteType },
-                    React__default.createElement(Button$1, { dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[siteType === 'marryBaby' ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', onClick: () => onClick(isTwins, cycleValue.value), role: "button" }, t('dueDatePage.lastPeriod.calculate')))))));
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(PWGForm, Object.assign({}, formProps)))));
 };
 
 const StyledCalendarWrapper$1 = styled.div `
@@ -5860,7 +5829,7 @@ const PnBannerEle = (_a) => {
             window.location.href = `${getCurrentSsoUrl(locale)}/?returnUrl=${encodeURIComponent(url)}`;
         }
     });
-    return (React__default.createElement(Container$1, Object.assign({ mih: { base: 144, md: 160 }, fluid: true, p: 0, sx: {
+    return (React__default.createElement(Container, Object.assign({ mih: { base: 144, md: 160 }, fluid: true, p: 0, sx: {
             borderRadius: 4,
             cursor: 'pointer',
         }, onClick: bannerClick, "data-event-category": "Newsletter", "data-event-action": "Banner Click", "data-event-label": currentUrl, className: "pointer-event-child-none" }, rest),
@@ -7477,4 +7446,4 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
             logoutButton))));
 };
 
-export { UserProfileNavigation as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, THRCardEmbed as E, FileDropdown as F, Grid as G, ThrForm as H, IconText as I, BMRCardEmbed as J, PWGCardEmbed as K, DateRangePicker as L, MobileBottomNavigation as M, Breadcrumbs as N, OvulationCardEmbed as O, Pagination as P, ShareContainer as Q, Radio as R, ScrollList as S, Tag as T, ShareDrawer as U, AdBlock as V, FixedBottomAdBlock as W, SurveyOrPremiumBanner as X, MAPPING_CATEGORY_PREMIUM_TYPE as Y, MAPPING_CATEGORY_PREMIUM_API_TYPE as Z, SideBannerModal as _, Avatar as a, NavHeader as a0, UserStats as a1, BorderHeading as b, Toggle as c, RateStars as d, ArticleCard$1 as e, ArticleCard as f, CategoryCard as g, CheckboxGroup as h, ProgressBar as i, RadioGroup as j, index$1 as k, StatisticCard as l, index as m, Tabs as n, SurveyQuestionCard as o, SurveyThankyouCard as p, FloatButtonGroup as q, CookieAcceptConfirm as r, MobileBottomNavigationIcon as s, SeoHead as t, ToolsBannerCard as u, DueDateCardEmbed as v, BMICardEmbed as w, BmiForm as x, BabyGrowthCardEmbed as y, BabyPoopEmbed as z };
+export { MAPPING_CATEGORY_PREMIUM_API_TYPE as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, BabyPoopForm as E, FileDropdown as F, Grid as G, THRCardEmbed as H, IconText as I, ThrForm as J, BMRCardEmbed as K, PWGCardEmbed as L, MobileBottomNavigation as M, PWGForm as N, OvulationCardEmbed as O, Pagination as P, DateRangePicker as Q, Radio as R, ScrollList as S, Tag as T, Breadcrumbs as U, ShareContainer as V, ShareDrawer as W, AdBlock as X, FixedBottomAdBlock as Y, SurveyOrPremiumBanner as Z, MAPPING_CATEGORY_PREMIUM_TYPE as _, Avatar as a, SideBannerModal as a0, UserProfileNavigation as a1, NavHeader as a2, UserStats as a3, BorderHeading as b, Toggle as c, RateStars as d, ArticleCard$1 as e, ArticleCard as f, CategoryCard as g, CheckboxGroup as h, ProgressBar as i, RadioGroup as j, index$1 as k, StatisticCard as l, index as m, Tabs as n, SurveyQuestionCard as o, SurveyThankyouCard as p, FloatButtonGroup as q, CookieAcceptConfirm as r, MobileBottomNavigationIcon as s, SeoHead as t, ToolsBannerCard as u, DueDateCardEmbed as v, BMICardEmbed as w, BmiForm as x, BabyGrowthCardEmbed as y, BabyPoopEmbed as z };

package/build/esm/{index-a6863224.js → index-51a5b352.js}

@@ -1,18 +1,18 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-5160724c.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-77e4ea0d.js';
 import React__default, { useReducer, useState, useEffect } from 'react';
 import { Stack, Input as Input$1 } from '@mantine/core';
-import { c as Input, S as Select } from './index-ba777d71.js';
+import { c as Input, S as Select } from './index-e2d45ff6.js';
 import '@mantine/dates';
-import { c as CDN_ADDRESS } from './index-62e5ab51.js';
-import { L as LOCALE } from './index-7dea2608.js';
-import './index-61c6842a.js';
-import './useMantineLocale-deeb986b.js';
-import './index-667832a2.js';
-import './theme-03d89802.js';
-import { u as useTranslations } from './useTranslations-3a5b70f3.js';
+import { c as CDN_ADDRESS } from './index-df7ed505.js';
+import { L as LOCALE } from './index-cc4e3181.js';
+import './index-cb06c57d.js';
+import './useMantineLocale-5341dd85.js';
+import './index-b1db79d0.js';
+import './theme-ad9ae9bc.js';
+import { u as useTranslations } from './useTranslations-5f0ff5be.js';
 import '@mantine/hooks';
-import './utils-21e35369.js';
-import { M as MAPPED_LOCALE } from './utils-50c254f2.js';
+import './utils-3501a8c9.js';
+import { M as MAPPED_LOCALE } from './utils-ea3a5a18.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;

package/build/esm/{index-a367d535.js → index-54d95469.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-03d89802.js';
+import { t as theme } from './theme-ad9ae9bc.js';
 
 const StyledDropdown = styled.div `
   --dropdown-padding: 12px 18px 12px 16px;

package/build/esm/{index-829fbe6e.js → index-62e81061.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5160724c.js';
+import { _ as __rest } from './tslib.es6-77e4ea0d.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-03d89802.js';
+import { t as theme } from './theme-ad9ae9bc.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);