@hhgtech/hhg-components 1.29.14 → 1.29.16

package/build/esm/{index-8ad89342.js → index-75ef9c27.js}

@@ -1,68 +1,69 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-e48714bc.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, u as useStyles$5, T as TextArea, P as PureInput } from './index.styles-5dccdad7.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-5e9c7d14.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-2e33da66.js';
-import { T as Text$1 } from './index-39387842.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-bb26aeee.js';
+import { T as Text } from './index-552f734d.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, u as useStyles$6, T as TextArea, P as PureInput } from './index.styles-ce2ae678.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-87d6460a.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-4603fcf2.js';
+import { T as Text$1 } from './index-be6869a7.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-432806db.js';
 import { Bookmark, CalendarMB, Calendar } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-bf08fbea.js';
-import { H as Heading } from './index-4f1e5c9d.js';
-import { t as theme } from './theme-dde5133f.js';
+import { C as CommonGAssets } from './index-12a5bac7.js';
+import { H as Heading } from './index-e56eecbe.js';
+import { t as theme } from './theme-14ffcb24.js';
 import { Box, Radio as Radio$2, Flex, rem, Card, Group, createStyles, Stack, getStylesRef, useMantineTheme, Container as Container$1, 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-31565015.js';
-import { G as Gender, L as LOCALE } from './Subot-d0129b23.js';
-import './useMantineLocale-d720e2e3.js';
-import './translationsContext-936616b7.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-87884a8f.js';
+import { G as Gender, L as LOCALE } from './Subot-3bba6d37.js';
+import './useMantineLocale-edd518ab.js';
+import './translationsContext-91397ba9.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-74f3e438.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-e3833a99.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-a12b3ca3.js';
-import { B as Button } from './index-af49b148.js';
-import { I as Input } from './index-2d061fb3.js';
+import { L as Logo } from './index-fc57d179.js';
+import { B as Button } from './index-8766384f.js';
+import { I as Input } from './index-076bb0dc.js';
 import { keyframes, css } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-d763a32e.js';
-import { u as useTranslations } from './useTranslations-2cecf45b.js';
+import { i as isProduction } from './isProduction-b21a736b.js';
+import { u as useTranslations } from './useTranslations-0bf9e73b.js';
 import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { D as DATE_FORMAT } from './types-8ac9a2b8.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-e1dc7d7c.js';
-import { D as DatePicker } from './index-20d65b0b.js';
-import { M as MarryBabyText } from './index-b1650f4a.js';
-import { S as Slider } from './index-fd7da3a4.js';
-import { D as Dropdown } from './index-c64fc61c.js';
-import { C as Container } from './index-8c56d365.js';
+import { D as DATE_FORMAT } from './types-a3815078.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-68501e19.js';
+import { D as DatePicker } from './index-ade4a49f.js';
+import { M as MarryBabyText } from './index-a51dcd77.js';
+import { S as Slider } from './index-e734a430.js';
+import { D as Dropdown } from './index-ade4d5ac.js';
+import { C as Container } from './index-ad95da2b.js';
 import { useForm, Controller } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-d81b699d.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-536cf7e3.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { B as BabyGrowthGender, D as Drawer } from './index-495c3979.js';
-import { L as Label } from './constants-2b1bb3d5.js';
-import { f as formatUserProfileUrl } from './index-e8ee187e.js';
-import './utils-fee79004.js';
-import './index.styled-4e95f87a.js';
-import './index-429a47ff.js';
-import { a as useOutsideClick } from './useOutsideClick-62be5855.js';
+import { D as DatePicker$1 } from './index-00df7d37.js';
+import { B as BabyGrowthGender, D as Drawer } from './index-4936ea9a.js';
+import { L as Label } from './constants-f73bdc59.js';
+import { f as formatUserProfileUrl } from './index-7a503b63.js';
+import './utils-196d84bc.js';
+import './index.styled-a0c7634c.js';
+import './index-9b7afa27.js';
+import { a as useOutsideClick } from './useOutsideClick-d46904fd.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-c6d6ab1a.js';
+import { g as getSocialList } from './getSocialList-d882aa01.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-d09787e5.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-e2dce79f.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { I as Icon } from './index-940d69dc.js';
+import { I as Icon } from './index-efd1ceea.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-3a33b451.js';
+import { M as Modal } from './index-03e69613.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-fad0d79a.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-e3d125e4.js';
+import { g as getCookie } from './cookieHelper-52591795.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-6bfd1e34.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -327,7 +328,7 @@ const GenderOptionControl = (_a) => {
         female: 'female',
     } } = _a, radioGroupProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue"]);
     const { t } = useTranslations();
-    const { classes, cx } = useStyles$5(undefined, {
+    const { classes, cx } = useStyles$6(undefined, {
         name: 'GenderOptionControl',
         styles,
     });
@@ -496,7 +497,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$4 = createStyles((_theme, {}) => ({
+var useStyles$5 = createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -516,7 +517,7 @@ const _Vertical = (_a) => {
     // size = 'lg',
     classNames, styles, unstyled, className } = _a, rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
     const { isMobile } = useScreenSize();
-    const { classes, cx } = useStyles$4(
+    const { classes, cx } = useStyles$5(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1735,7 +1736,7 @@ var index = /*#__PURE__*/Object.freeze({
   Body: Body
 });
 
-var useStyles$3 = createStyles((theme) => {
+var useStyles$4 = createStyles((theme) => {
     const itemLabelRef = getStylesRef('itemLabel');
     return {
         root: {
@@ -1787,7 +1788,7 @@ var useStyles$3 = createStyles((theme) => {
  * @deprecated Consider to use mantine
  */
 const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
-    const { classes, cx, theme } = useStyles$3(undefined, { name: 'Tabs', styles });
+    const { classes, cx, theme } = useStyles$4(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = useState(initialTab || 0);
     useEffect(() => {
         setActiveTab(initialTab);
@@ -4297,12 +4298,18 @@ const BabyGrowthEmbedContext = createContext({});
 
 const BabyGrowthFormContext = createContext({});
 
+var useStyles$3 = createStyles(() => {
+    return {
+        root: {},
+    };
+});
+
 var useStyles$2 = createStyles((theme) => {
     return {
         root: {
             display: 'flex',
             flexDirection: 'column',
-            gap: rem(16),
+            gap: rem(8),
         },
         row: {
             display: 'flex',
@@ -4323,6 +4330,11 @@ var useStyles$2 = createStyles((theme) => {
         control: {
             width: rem(180),
             flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
         },
         radioLabel: {
             fontSize: rem(16),
@@ -4333,9 +4345,6 @@ var useStyles$2 = createStyles((theme) => {
         },
         bmiVal: {
             display: 'inline-block',
-            minWidth: rem(40),
-            marginLeft: rem(10),
-            textAlign: 'center',
         },
         inputWithUnit__wrapper: {
             position: 'relative',
@@ -4355,19 +4364,26 @@ var useStyles$2 = createStyles((theme) => {
         inputWithUnit__input: {
             input: {
                 paddingRight: rem(30),
+                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
             },
         },
         submitBtn: {},
+        switchRoot: {
+            padding: '16px 0',
+        },
     };
 });
 
-const HorizonalForm = () => {
+const HorizonalForm = (_a) => {
+    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
     const { t } = useTranslations();
     const { control, currentUrl, isEmptyThreeFields, isMarryBaby } = useContext(BabyGrowthFormContext);
     const { classes, cx } = useStyles$2(undefined, {
         name: 'BabyGrowthForm__HorizonalForm',
+        styles,
+        classNames,
     });
-    return (React__default.createElement(Box, { className: classes.root },
+    return (React__default.createElement(Box, Object.assign({ className: classes.root }, props),
         React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(Box, { className: classes.row },
                 React__default.createElement(Box, { className: classes.labelWrapper },
                     React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, t('tools.selectBabyGender'))),
@@ -4380,46 +4396,45 @@ const HorizonalForm = () => {
                         React__default.createElement(Radio$1, { value: "girl", label: t('gender.girl'), classNames: {
                                 label: classes.radioLabel,
                             } }))))) }),
-        React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
-                React__default.createElement(Box, { className: classes.labelWrapper },
-                    React__default.createElement("label", { className: classes.label, htmlFor: "birthday" }, t('babyGrowth.input.birthday'))),
-                React__default.createElement(DatePicker, { className: classes.control, onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                        after: new Date(),
-                    }, customInput: (props) => {
-                        return (React__default.createElement(Input, Object.assign({ onChange: onChange, className: `${(error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : ''}`, name: "birthday", size: "md", actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) })));
-                    } }))) }),
+        React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => {
+                return (React__default.createElement(Box, { className: classes.row },
+                    React__default.createElement(Box, { className: classes.labelWrapper },
+                        React__default.createElement("label", { className: classes.label, htmlFor: "birthday" }, t('babyGrowth.input.birthday'))),
+                    React__default.createElement(DatePicker$1, { popoverProps: {
+                            withinPortal: true,
+                        }, className: cx(classes.control, error ? 'error' : ''), onChange: onChange, placeholder: "DD/MM/YYYY", defaultDate: value || new Date(), maxDate: new Date() })));
+            } }),
         React__default.createElement(Box, { className: classes.row },
             React__default.createElement(Box, { className: classes.labelWrapper },
-                React__default.createElement("label", { className: classes.label }, t('babyGrowth.babyInfo'))),
+                React__default.createElement("label", { className: classes.label }, "BMI")),
             React__default.createElement(Flex, { align: 'center', gap: '8px' },
                 React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(Text, { size: "p2" },
-                            React__default.createElement("span", null, "BMI"),
                             React__default.createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
                             t('babyGrowth.kg.m2')))) }),
-                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper) },
-                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
                         React__default.createElement(Box, { className: classes.inputWithUnit__unit },
                             React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm'))))) }),
-                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper) },
+                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
                         React__default.createElement(Box, { className: classes.inputWithUnit__unit },
                             React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.kg'))),
-                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }))),
+                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }))),
         React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
                 React__default.createElement(Box, { className: classes.labelWrapper },
                     React__default.createElement("label", { className: classes.label, htmlFor: "head" },
                         ' ',
                         t('babyGrowth.headCircumference'))),
-                React__default.createElement(Box, { className: cx(classes.inputWithUnit__wrapper, classes.control) },
-                    React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                React__default.createElement(Box, { className: cx(classes.inputWithUnit__wrapper, classes.control, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                    React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
                     React__default.createElement(Box, { className: classes.inputWithUnit__unit },
                         React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm')))))) }),
-        React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
+        React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value } }) => (React__default.createElement(Box, { className: classes.row },
                 React__default.createElement(Box, { className: classes.labelWrapper },
                     React__default.createElement("label", { className: classes.label, htmlFor: "measurementDate" }, t('babyGrowth.input.measurementDate'))),
-                React__default.createElement(DatePicker, { className: classes.control, placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
-                        after: new Date(),
-                    }, customInput: (props) => (React__default.createElement(Input, Object.assign({ className: `${(error === null || error === void 0 ? void 0 : error.message) && 'error-input'}`, name: "measurementDate", size: "md", placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), onChange: onChange, actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) }))) }))) }),
+                React__default.createElement(DatePicker$1, { popoverProps: {
+                        withinPortal: true,
+                    }, className: classes.control, placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), defaultDate: value || new Date(), onChange: onChange, maxDate: new Date() }))) }),
         React__default.createElement(Box, { className: classes.row },
             React__default.createElement(Button$1, { className: classes.submitBtn, size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))));
 };
@@ -4464,7 +4479,7 @@ const StyledRow$2 = styled.div `
 const VerticalForm = () => {
     const { t } = useTranslations();
     const { control, currentUrl, isEmptyThreeFields, isMarryBaby, siteType } = useContext(BabyGrowthFormContext);
-    return (React__default.createElement(StyledBabyGrowthWrapper$1, { "data-theme": siteType },
+    return (React__default.createElement(StyledBabyGrowthWrapper$1, { className: "form-wrapper", "data-theme": siteType },
         React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
         siteType === 'marryBaby' ? (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
@@ -4569,9 +4584,13 @@ const bmiCalculate = (height = 0, weight = 0) => {
     return 0;
 };
 
-const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, layout = 'vertical', }) => {
-    const _theme = useMantineTheme();
-    const isMarryBaby = _theme.other.template === 'mb';
+const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, layout = 'vertical', styles, classNames, }) => {
+    const { classes, theme } = useStyles$3(undefined, {
+        name: 'BabyGrowthForm',
+        styles,
+        classNames,
+    });
+    const isMarryBaby = theme.other.template === 'mb';
     const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = useForm({
         resolver: yupResolver(schema),
         mode: 'onSubmit',
@@ -4603,7 +4622,9 @@ const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, layout = 'vertica
             isMarryBaby,
             siteType,
         } },
-        React__default.createElement("form", { onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? React__default.createElement(VerticalForm, null) : React__default.createElement(HorizonalForm, null))));
+        React__default.createElement(Box, { component: "form", onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? (React__default.createElement(VerticalForm, null)) : (React__default.createElement(HorizonalForm, { classNames: {
+                root: classes.root,
+            } })))));
 };
 
 const StyledBabyGrowthWrapper = styled.div `

package/build/esm/{index-2d57f6e4.js → index-79d581b9.js}

@@ -1,22 +1,22 @@
 import React__default from 'react';
-import { C as Container } from './index-8c56d365.js';
+import { C as Container } from './index-ad95da2b.js';
 import dayjs from 'dayjs';
-import { d as domainLocales } from './index-31565015.js';
-import { u as useScreenSize } from './index-2e33da66.js';
+import { d as domainLocales } from './index-87884a8f.js';
+import { u as useScreenSize } from './index-4603fcf2.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './Subot-d0129b23.js';
-import './index-bf08fbea.js';
-import './useMantineLocale-d720e2e3.js';
-import { T as Text } from './index-e48714bc.js';
-import { t as theme } from './theme-dde5133f.js';
-import './translationsContext-936616b7.js';
+import './Subot-3bba6d37.js';
+import './index-12a5bac7.js';
+import './useMantineLocale-edd518ab.js';
+import { T as Text } from './index-552f734d.js';
+import { t as theme } from './theme-14ffcb24.js';
+import './translationsContext-91397ba9.js';
 import 'string-format';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-5e9c7d14.js';
+import { M as MediaQueries } from './utils-87d6460a.js';
 import styled from '@emotion/styled';
-import { L as Logo } from './index-a12b3ca3.js';
-import { M as MarryBabyText } from './index-b1650f4a.js';
+import { L as Logo } from './index-fc57d179.js';
+import { M as MarryBabyText } from './index-a51dcd77.js';
 
 const StyledFooter = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-e8ee187e.js → index-7a503b63.js}

@@ -1,9 +1,9 @@
 import React__default, { useContext, useState } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-5e9c7d14.js';
-import { t as theme } from './theme-dde5133f.js';
-import { _ as __rest } from './tslib.es6-bb26aeee.js';
-import { T as TogetherComponentGlobalContext } from './utils-e1dc7d7c.js';
+import { M as MediaQueries } from './utils-87d6460a.js';
+import { t as theme } from './theme-14ffcb24.js';
+import { _ as __rest } from './tslib.es6-432806db.js';
+import { T as TogetherComponentGlobalContext } from './utils-68501e19.js';
 
 const StyledPopup = styled.div `
   position: fixed;

package/build/esm/{index-509d27fa.js → index-83781b2c.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-bb26aeee.js';
+import { _ as __rest } from './tslib.es6-432806db.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-dde5133f.js';
+import { t as theme } from './theme-14ffcb24.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-af49b148.js → index-8766384f.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-bb26aeee.js';
+import { _ as __rest } from './tslib.es6-432806db.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-2e33da66.js';
+import { B as Button$1 } from './index-4603fcf2.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-31565015.js → index-87884a8f.js}

@@ -1,6 +1,6 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import { L as LOCALE } from './Subot-d0129b23.js';
-import { i as isProduction } from './isProduction-d763a32e.js';
+import { L as LOCALE } from './Subot-3bba6d37.js';
+import { i as isProduction } from './isProduction-b21a736b.js';
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/esm/{index-f9214cf3.js → index-8accb352.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-bb26aeee.js';
+import { _ as __rest } from './tslib.es6-432806db.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import { L as LOCALE } from './Subot-d0129b23.js';
+import { L as LOCALE } from './Subot-3bba6d37.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-bf08fbea.js';
-import { t as theme } from './theme-dde5133f.js';
-import { I as ImageWrap, f as CentralCarousel } from './index-2e33da66.js';
-import { T as Text } from './index-39387842.js';
+import { C as CommonGAssets } from './index-12a5bac7.js';
+import { t as theme } from './theme-14ffcb24.js';
+import { I as ImageWrap, f as CentralCarousel } from './index-4603fcf2.js';
+import { T as Text } from './index-be6869a7.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-a3aa2d8d.js → index-a06ce828.js}

@@ -1,13 +1,13 @@
 import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
-import { t as StyledDivider, v as useStyles, w as StyledContainer } from './index.styles-5dccdad7.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-bb26aeee.js';
-import { u as useTranslations } from './useTranslations-2cecf45b.js';
-import { B as Button } from './index-2e33da66.js';
-import { P as PATHS } from './paths-31787dfc.js';
-import { a as LOCALIZED_SLUGS } from './constants-2b1bb3d5.js';
-import { d as domainLocales } from './index-31565015.js';
-import { i as callApi, j as getCarePath } from './utils-e1dc7d7c.js';
-import { i as isProduction } from './isProduction-d763a32e.js';
+import { t as StyledDivider, v as useStyles, w as StyledContainer } from './index.styles-ce2ae678.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-432806db.js';
+import { u as useTranslations } from './useTranslations-0bf9e73b.js';
+import { B as Button } from './index-4603fcf2.js';
+import { P as PATHS } from './paths-a87d0584.js';
+import { a as LOCALIZED_SLUGS } from './constants-f73bdc59.js';
+import { d as domainLocales } from './index-87884a8f.js';
+import { i as callApi, j as getCarePath } from './utils-68501e19.js';
+import { i as isProduction } from './isProduction-b21a736b.js';
 
 /**
  * @deprecated Consider to use mantine

package/build/esm/{index-b1650f4a.js → index-a51dcd77.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-bb26aeee.js';
+import { _ as __rest } from './tslib.es6-432806db.js';
 import React__default from 'react';
-import { S as StyledHeading, a as StyledText } from './index.styled-4e95f87a.js';
+import { S as StyledHeading, a as StyledText } from './index.styled-a0c7634c.js';
 
 const MarryBabyHeading = (_a) => {
     var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);

package/build/esm/{index-20d65b0b.js → index-ade4a49f.js}

@@ -1,10 +1,10 @@
 import React__default, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from './index-940d69dc.js';
-import { u as useTranslations } from './useTranslations-2cecf45b.js';
+import { I as Icon } from './index-efd1ceea.js';
+import { u as useTranslations } from './useTranslations-0bf9e73b.js';
 import { format } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-dde5133f.js';
+import { t as theme } from './theme-14ffcb24.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-c64fc61c.js → index-ade4d5ac.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-dde5133f.js';
+import { t as theme } from './theme-14ffcb24.js';
 
 const StyledDropdown = styled.div `
   --dropdown-padding: 12px 18px 12px 16px;

package/build/esm/{index-39387842.js → index-be6869a7.js}

@@ -1,18 +1,18 @@
-import { _ as __rest } from './tslib.es6-bb26aeee.js';
+import { _ as __rest } from './tslib.es6-432806db.js';
 import React__default from 'react';
-import './index-2e33da66.js';
+import './index-4603fcf2.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-31565015.js';
-import './Subot-d0129b23.js';
-import './index-bf08fbea.js';
-import './useMantineLocale-d720e2e3.js';
-import { T as Text$1 } from './index-e48714bc.js';
-import './theme-dde5133f.js';
-import './translationsContext-936616b7.js';
+import './index-87884a8f.js';
+import './Subot-3bba6d37.js';
+import './index-12a5bac7.js';
+import './useMantineLocale-edd518ab.js';
+import { T as Text$1 } from './index-552f734d.js';
+import './theme-14ffcb24.js';
+import './translationsContext-91397ba9.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-5e9c7d14.js';
+import './utils-87d6460a.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'