@hhgtech/hhg-components 1.29.447 → 1.29.449-beta-1

package/build/esm/{index-6e32904f.js → index-462f2dfb.js}

@@ -1,41 +1,41 @@
 import React__default, { createContext, useContext, useMemo, useCallback, useState, useEffect, forwardRef, useRef } from 'react';
 import { rem, Container, createStyles, Box, Stack, Flex, AspectRatio, ScrollArea, Chip, Group, Badge, MultiSelect, Stepper } from '@mantine/core';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import { b as callApiWithAuth, d as getApiPath, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-766da2de.js';
-import { G as GA_TOKEN_COOKIE } from './index-73f4d56a.js';
-import { H as HEALTH_TOOL_TYPE, a as HEALTH_TOOL_DEFAULT_IMG } from './healthTools-8d31ba4c.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { b as callApiWithAuth, d as getApiPath, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-3c6f8119.js';
+import { G as GA_TOKEN_COOKIE } from './index-39bf919c.js';
+import { H as HEALTH_TOOL_TYPE, a as HEALTH_TOOL_DEFAULT_IMG } from './healthTools-9f1f1b0c.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-5a49ecfc.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-de1bfc44.js';
-import { I as ImageWrap } from './index-5efeab14.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './normalizeLink-fdde228f.js';
-import { u as useTranslations } from './index-59da60a7.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-4778b33a.js';
+import { I as ImageWrap } from './index-5e4c4c9c.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './normalizeLink-a4d2f4ed.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { d as Checkbox, e as ChipButton, I as Input, b as AspectRatio$1 } from './index-85894b46.js';
+import { d as Checkbox, f as ChipButton, I as Input, b as AspectRatio$1 } from './index-d7bd249f.js';
 import '@mantine/dates';
-import './index-52825707.js';
-import { t as themeColors } from './index-d830bd64.js';
-import { T as Text } from './index-f65d577c.js';
-import { B as Button } from './index-206b9bef.js';
-import './index.styles-590ff17d.js';
+import './index-d18ed0e7.js';
+import { t as themeColors } from './index-5d273446.js';
+import { T as Text } from './index-15687d4c.js';
+import { B as Button } from './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
 import { useViewportSize } from '@mantine/hooks';
-import './text-6f2656a6.js';
-import './utils-05e3b4d6.js';
-import './index-13586e44.js';
+import './utils-ff8e88ec.js';
+import './index-0bb898db.js';
 import { PATHS as PATHS$2 } from './togetherApiPaths.js';
-import './translationsContext-59e5652c.js';
-import { H as Heading } from './index-623e7f2c.js';
-import { u as useHealthToolsCache } from './useHealthToolCache-b6025b32.js';
-import { I as Icon } from './index-a106b9cb.js';
+import './translationsContext-47869a7a.js';
+import { H as Heading } from './index-fd175154.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-49fd8c46.js';
+import { I as Icon } from './index-75b1ae62.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { i as isVideo } from './index-f8e98880.js';
-import { M as Modal } from './index-b0854ce5.js';
+import { i as isVideo } from './index-ef999af4.js';
+import { M as Modal } from './index-2ad629e0.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { L as LOCALE } from './Locale-4ae68452.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 
 const PREFER_TOPICS = [
     {

package/build/esm/{index-0a769c42.js → index-481eacef.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import { createStyles, rem, Box, Flex } from '@mantine/core';
-import { R as Radio } from './index-85894b46.js';
+import { R as Radio } from './index-d7bd249f.js';
 import '@mantine/dates';
-import './index-73f4d56a.js';
-import './index-52825707.js';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import './index-d830bd64.js';
-import { T as Text } from './index-f65d577c.js';
-import './index-206b9bef.js';
-import './index.styles-590ff17d.js';
-import { u as useTranslations } from './index-59da60a7.js';
+import './index-39bf919c.js';
+import './index-d18ed0e7.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import './index-5d273446.js';
+import { T as Text } from './index-15687d4c.js';
+import './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import '@mantine/hooks';
-import './text-6f2656a6.js';
-import './utils-05e3b4d6.js';
-import './index-13586e44.js';
+import './utils-ff8e88ec.js';
+import './index-0bb898db.js';
 
 var useStyles = createStyles((theme, { type }) => {
     const isMarryBaby = theme.other.template === 'mb';

package/build/esm/{index-0e69e754.js → index-4850574a.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-05e3b4d6.js';
+import { M as MediaQueries } from './utils-ff8e88ec.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `

package/build/esm/{index-176c6145.js → index-48639f99.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { useMemo } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-05e3b4d6.js';
+import { M as MediaQueries } from './utils-ff8e88ec.js';
 
 const StyledInput = styled.div `
   position: relative;

package/build/esm/{index-50141363.js → index-4be0a9b5.js}

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Button } from './index-206b9bef.js';
+import { B as Button } from './index-3d2078ab.js';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div `

package/build/esm/{index-4ef48768.js → index-513aa46f.js}

@@ -1,51 +1,51 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio } from './index-85894b46.js';
+import { R as Radio } from './index-d7bd249f.js';
 import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-73f4d56a.js';
-import './index-52825707.js';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import './index-d830bd64.js';
-import { T as Text } from './index-f65d577c.js';
-import { B as Button$1 } from './index-206b9bef.js';
-import './index.styles-590ff17d.js';
-import './translationsContext-59e5652c.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-39bf919c.js';
+import './index-d18ed0e7.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import './index-5d273446.js';
+import { T as Text } from './index-15687d4c.js';
+import { B as Button$1 } from './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
+import './translationsContext-47869a7a.js';
 import '@mantine/hooks';
-import './text-6f2656a6.js';
-import { M as MediaQueries } from './utils-05e3b4d6.js';
-import './index-13586e44.js';
-import { i as isInternalLink } from './index-c802034c.js';
+import { M as MediaQueries } from './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import { i as isInternalLink } from './index-ded03e50.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-d1ad341c.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-7ad0855d.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-c2e955e0.js';
+import { L as Logo } from './index-924e34d7.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-375c11e9.js';
+import { a as useOutsideClick } from './useOutsideClick-c52e60b2.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 { B as Button } from './index-b79fc8a1.js';
-import { u as useScreenSize, I as ImageWrap } from './index-5efeab14.js';
-import { u as useTranslations } from './index-59da60a7.js';
-import { D as Dropdown } from './index-94baa100.js';
+import { B as Button } from './index-b88aba78.js';
+import { u as useScreenSize, I as ImageWrap } from './index-5e4c4c9c.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import { D as Dropdown } from './index-38d108b8.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-176c6145.js';
-import { D as Drawer } from './index-f91f9374.js';
+import { I as Input } from './index-48639f99.js';
+import { D as Drawer } from './index-06b7253e.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-4ae68452.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-ea6fdd20.js';
-import { L as Loading } from './index-c01214fe.js';
+import { A as ArrowRightBlue } from './index-97b9b61d.js';
+import { L as Loading } from './index-989914c3.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 

package/build/esm/{index-4f2ea78b.js → index-573469a3.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { u as useTranslations } from './index-59da60a7.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import { createStyles } from '@mantine/core';
-import { P as PATHS } from './paths-012e6e0e.js';
-import { L as LOCALIZED_SLUGS } from './constants-ebbd4a69.js';
-import { B as Button } from './index-206b9bef.js';
-import './index-73f4d56a.js';
-import { c as callApi, g as getCarePath } from './utils-766da2de.js';
+import { P as PATHS } from './paths-419c8cbd.js';
+import { L as LOCALIZED_SLUGS } from './constants-43303b1b.js';
+import { B as Button } from './index-3d2078ab.js';
+import './index-39bf919c.js';
+import { c as callApi, g as getCarePath } from './utils-3c6f8119.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 

package/build/esm/{index-c81867e9.js → index-59e7d63b.js}

@@ -1,25 +1,26 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { createContext, useContext, useMemo } from 'react';
-import { useMantineTheme } from '@mantine/core';
+import { useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-b6025b32.js';
-import { u as useTranslations } from './index-59da60a7.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-e72098ce.js';
-import { I as Input } from './index-85894b46.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-49fd8c46.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-1f90e5f6.js';
+import { I as Input } from './index-d7bd249f.js';
 import '@mantine/dates';
-import './index-73f4d56a.js';
-import './index-52825707.js';
-import './index-f59d4d8a.js';
-import './index-d830bd64.js';
-import './index-f65d577c.js';
-import './index-206b9bef.js';
-import './index.styles-590ff17d.js';
+import './index-39bf919c.js';
+import './index-d18ed0e7.js';
+import './index-f8a949a8.js';
+import './index-5d273446.js';
+import './index-15687d4c.js';
+import './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
 import '@mantine/hooks';
-import './text-6f2656a6.js';
-import './utils-05e3b4d6.js';
-import './index-13586e44.js';
-import { H as HealthToolFormWrapper } from './index-89ad9053.js';
-import { I as INPUT_RANGE } from './constants-27521278.js';
+import './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import { C as CardWrapperContext } from './context-98f996bd.js';
+import { H as HealthToolFormWrapper } from './index-d0b44796.js';
+import { I as INPUT_RANGE } from './constants-c86fd286.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const PWGFormContext = createContext({});
@@ -28,47 +29,61 @@ const DefaultForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
     const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const theme = useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(Input.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.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                content: '50',
-            }) }, form.getInputProps('lastWeight'))),
-        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
-                content: '160',
-            }) }, form.getInputProps('height'))),
-        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                content: '50',
-            }) }, 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'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.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(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }) }, form.getInputProps('lastWeight')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }) }, form.getInputProps('height')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }) }, form.getInputProps('weight')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            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: clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const InlineForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     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.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('pwgForm.week')) }, form.getInputProps('pregnantWeek')))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
-            React__default.createElement(Input.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, t('babyGrowth.kg')) }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
-            React__default.createElement(Input.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, t('babyGrowth.cm')) }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
-            React__default.createElement(Input.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, t('babyGrowth.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'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+                React__default.createElement(Input.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('pwgForm.week')) }, form.getInputProps('pregnantWeek'))))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+                React__default.createElement(Input.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, t('babyGrowth.kg')) })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+                React__default.createElement(Input.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, t('babyGrowth.cm')) })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+                React__default.createElement(Input.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, t('babyGrowth.kg')) })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            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.FormRow, { className: wrapperClasses.submitWrapper },
+            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: clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const MbLayout = (_a) => {

package/build/esm/{index-d830bd64.js → index-5d273446.js}

@@ -1,16 +1,16 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import './index-52825707.js';
-import { L as LOCALE } from './Locale-4ae68452.js';
+import './index-d18ed0e7.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 import { notifications, Notifications } from '@mantine/notifications';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-73f4d56a.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-39bf919c.js';
 import { em } from '@mantine/core';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
 import { theme } from './miscTheme.js';
-import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-05e3b4d6.js';
-import { C as CustomStylesType, F as FontWeight } from './text-6f2656a6.js';
-import { A as ANIMATION_DURATION } from './shared-c74f5553.js';
+import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-ff8e88ec.js';
+import { C as CustomStylesType, F as FontWeight } from './index-d0dddda4.js';
+import { A as ANIMATION_DURATION } from './shared-b9f1d3c2.js';
 
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const MAPPED_LOCALE = {
@@ -55,11 +55,12 @@ const useMantineLocale = (locale) => {
     };
 };
 
-const GlobalButtonStyle = (version = CustomStylesType.NONE) => ({
+const GlobalButtonStyle = () => ({
     Button: {
-        defaultProps: Object.assign({ variant: 'primary', size: 'md' }, (version === CustomStylesType.LEADGEN && {
-            radius: 12,
-        })),
+        defaultProps: {
+            variant: 'primary',
+            size: 'md',
+        },
     },
 });
 
@@ -648,7 +649,7 @@ const getMantineThemeOverride = (locale, template = 'hb', version) => {
             lg: em(Breakpoints.BREAK_POINT_PC),
             xl: em(Breakpoints.BREAK_POINT_LGPC),
         },
-        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale, version)), getGlobalRadioStyle), GlobalButtonStyle(version)), GlobalHeadingStyle(version)), GlobalContainerStyle),
+        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale, version)), getGlobalRadioStyle), GlobalButtonStyle()), GlobalHeadingStyle(version)), GlobalContainerStyle),
         other: {
             template,
             customStyleType: version,

package/build/esm/{index-5efeab14.js → index-5e4c4c9c.js}

@@ -1,6 +1,6 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Breakpoints } from './utils-05e3b4d6.js';
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { B as Breakpoints } from './utils-ff8e88ec.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import styled from '@emotion/styled';
 
 const getIsMobile = () => {