@hhgtech/hhg-components 1.29.449 → 1.29.450-beta-2

package/build/esm/{index-f1997e45.js → index-6e3fa793.js}

@@ -1,25 +1,26 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-ca64e265.js';
 import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
-import { useMantineTheme, Group, Box, Flex, Tooltip } from '@mantine/core';
+import { useMantineTheme, clsx, Group, Flex, Tooltip, Box } from '@mantine/core';
 import { format } from 'date-fns';
-import { L as LastPeriod } from './LastPeriod-9b827a5a.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { L as LastPeriod } from './LastPeriod-fb46978c.js';
+import { L as LOCALE } from './Locale-a6078fd4.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } from './index-67e90cbd.js';
-import { D as DatePicker } from './index-3266848c.js';
-import { T as Text } from './index-6b5ef864.js';
-import './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { R as Radio, I as Input, S as Select } from './index-e20d91bd.js';
+import { D as DatePicker } from './index-8e8ae67b.js';
+import { T as Text } from './index-68a819a2.js';
+import './index-fcd5837c.js';
+import './index-8f8bea46.js';
+import './index.styles-cb591c86.js';
+import { u as useTranslations } from './index-1184c9d4.js';
 import '@mantine/hooks';
-import './index-f2d03a1d.js';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
-import { H as HealthToolFormWrapper } from './index-a0b390bd.js';
+import './index-f64c6e39.js';
+import './utils-23deda17.js';
+import './index-ac89e9ed.js';
+import { H as HealthToolFormWrapper } from './index-409faa8a.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-e02ef7d6.js';
+import { C as CardWrapperContext } from './context-9666df99.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-8c5ae17d.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {
@@ -246,7 +247,7 @@ const ConceptionFormContext = createContext({});
 const DefaultLayout$4 = () => {
     const { t } = useTranslations();
     const { form } = useContext(ConceptionFormContext);
-    return (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
         React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
@@ -273,6 +274,7 @@ const MbLayout$4 = () => {
 };
 
 const ConceptionForm = ({}) => {
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const theme = useMantineTheme();
     const { t } = useTranslations();
@@ -295,7 +297,8 @@ const ConceptionForm = ({}) => {
     return (React__default.createElement(ConceptionFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$4, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$4, null)) : (React__default.createElement(DefaultLayout$4, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const IUIFormContext = createContext({});
@@ -303,7 +306,7 @@ const IUIFormContext = createContext({});
 const DefaultLayout$3 = () => {
     const { t } = useTranslations();
     const { form } = useContext(IUIFormContext);
-    return (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
         React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_IUI_procedure') }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
@@ -330,6 +333,7 @@ const MbLayout$3 = () => {
 
 const IUIForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const theme = useMantineTheme();
     const { t } = useTranslations();
     const form = useForm({
@@ -351,7 +355,8 @@ const IUIForm = ({}) => {
     return (React__default.createElement(IUIFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$3, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$3, null)) : (React__default.createElement(DefaultLayout$3, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const IVFFormContext = createContext({});
@@ -360,24 +365,28 @@ const DefaultLayout$2 = () => {
     const { t } = useTranslations();
     const { form, transferDateOptions } = useContext(IVFFormContext);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
-            React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label })))))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label }))))))));
 };
 
 const InlineLayout$2 = () => {
     const { t } = useTranslations();
     const { form, transferDateOptions } = useContext(IVFFormContext);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.ivf.transferDate') },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
-            React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
-                React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label }))))))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.ivf.transferDate') },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
+                React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                    React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label })))))))));
 };
 
 const MbLayout$2 = () => {
@@ -394,6 +403,7 @@ const MbLayout$2 = () => {
 
 const IVFForm = ({}) => {
     var _a;
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const { t } = useTranslations();
     const theme = useMantineTheme();
@@ -432,7 +442,8 @@ const IVFForm = ({}) => {
     return (React__default.createElement(IVFFormContext.Provider, { value: { form, transferDateOptions } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$2, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$2, null)) : (React__default.createElement(DefaultLayout$2, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const LastPeriodFormContext = createContext({});
@@ -445,13 +456,15 @@ const DefaultLayout$1 = () => {
         value: `${index + 20}`,
     })), []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default.createElement(Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
-            React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
-                    content: t('dueDatePage.daysText', { number: 30 }),
-                }), data: periodLengthDropDownOptions, withinPortal: true }, form.getInputProps('periodLength'))))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+                React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: t('dueDatePage.daysText', { number: 30 }),
+                    }), data: periodLengthDropDownOptions, withinPortal: true }, form.getInputProps('periodLength')))))));
 };
 
 const InlineLayout$1 = () => {
@@ -462,15 +475,18 @@ const InlineLayout$1 = () => {
         value: `${index + 20}`,
     })), []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), width: 300 },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), width: 300 },
-            React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
-                    content: t('dueDatePage.daysText', { number: 30 }),
-                }), data: periodLengthDropDownOptions }, form.getInputProps('periodLength'), { error: null, withinPortal: true }))),
-        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), width: 300 },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), width: 300 },
+                React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: t('dueDatePage.daysText', { number: 30 }),
+                    }), data: periodLengthDropDownOptions }, form.getInputProps('periodLength'), { error: null, withinPortal: true })))),
+        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength)))));
 };
 
 const MbLayout$1 = () => {
@@ -490,6 +506,7 @@ const MbLayout$1 = () => {
 
 const LastPeriodForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { t } = useTranslations();
     const theme = useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
@@ -515,7 +532,8 @@ const LastPeriodForm = ({}) => {
     return (React__default.createElement(LastPeriodFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, null)) : isMarryBaby ? (React__default.createElement(MbLayout$1, null)) : (React__default.createElement(DefaultLayout$1, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const UltrasoundFormContext = createContext({});
@@ -534,10 +552,11 @@ const DefaultLayout = () => {
     const inputPropsCRL = form.getInputProps('ultrasoundCRL');
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default.createElement(Box, null,
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(Flex, { align: "center", gap: 4, mb: 4 },
                 React__default.createElement(Text, { as: "label", size: "s4" }, t('dueDatePage.validation.one_is_required')),
                 React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
@@ -555,21 +574,23 @@ const InlineLayout = () => {
     const rightSection = (React__default.createElement(Text, { size: "p4", color: theme.colors.gray400 }, "mm"));
     const inputPropsCRL = form.getInputProps('ultrasoundCRL');
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
-    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_ultrasound') },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date(), error: null }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: React__default.createElement(Flex, { align: "center", gap: 4 },
-                React__default.createElement("span", null, t('dueDatePage.validation.one_is_required')),
-                React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
-                    React__default.createElement(Flex, null,
-                        React__default.createElement(Info, { size: 16 })))) },
-            React__default.createElement(Box, null,
-                React__default.createElement(Flex, { gap: 8 },
-                    React__default.createElement(Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
-                    React__default.createElement(Input, Object.assign({ placeholder: "MSD", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsMSD, { errorProps: { sx: { display: 'none' } } }))))),
-        (form.errors.ultrasoundCRL || form.errors.ultrasoundMSD) && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_ultrasound') },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date(), error: null })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: React__default.createElement(Flex, { align: "center", gap: 4 },
+                    React__default.createElement("span", null, t('dueDatePage.validation.one_is_required')),
+                    React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
+                        React__default.createElement(Flex, null,
+                            React__default.createElement(Info, { size: 16 })))) },
+                React__default.createElement(Box, null,
+                    React__default.createElement(Flex, { gap: 8 },
+                        React__default.createElement(Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
+                        React__default.createElement(Input, Object.assign({ placeholder: "MSD", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsMSD, { errorProps: { sx: { display: 'none' } } }))))),
+            (form.errors.ultrasoundCRL || form.errors.ultrasoundMSD) && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD)))));
 };
 
 const MbLayout = () => {
@@ -582,6 +603,7 @@ const MbLayout = () => {
 };
 
 const UltrasoundForm = ({}) => {
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const theme = useMantineTheme();
     const { t } = useTranslations();
@@ -628,7 +650,8 @@ const UltrasoundForm = ({}) => {
     return (React__default.createElement(UltrasoundFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout, null)) : (React__default.createElement(DefaultLayout, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const FormSwitcher = () => {
@@ -700,8 +723,9 @@ const DueDateForm = (_a) => {
             setCalculatorType,
         } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ component: "div", formLayout: formLayout }, props),
-            formLayout === 'default' ? (React__default.createElement(HealthToolFormWrapper.Control, null,
-                React__default.createElement(Select, { label: t('dueDatePage.calculationMethod'), value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)), icon: selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.icon }))) : (React__default.createElement(Box, null,
+            formLayout === 'default' ? (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                React__default.createElement(HealthToolFormWrapper.Control, null,
+                    React__default.createElement(Select, { label: t('dueDatePage.calculationMethod'), value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)), icon: selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.icon })))) : (React__default.createElement(HealthToolFormWrapper.FormRow, null,
                 React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), width: 300 },
                     React__default.createElement(Select, { value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)) })))),
             React__default.createElement(FormSwitcher, null))));

package/build/esm/{index-c2ac6223.js → index-718f8079.js}

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-ee569944.js';
+import { T as Text } from './index-d57d8265.js';
 import cn from 'classnames';
-import { I as ImageWrap } from './index-fe18b552.js';
-import { T as Text$1 } from './index-6b5ef864.js';
+import { I as ImageWrap } from './index-11bf3a00.js';
+import { T as Text$1 } from './index-68a819a2.js';
 
 /* eslint-disable prettier/prettier */
 const ArrowRightBlue = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),

package/build/esm/{index-a565ea21.js → index-737a6a2f.js}

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-200f1963.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-ca64e265.js';
 import React__default, { createContext, useState, useContext, useEffect } from 'react';
-import { T as Tabs } from './index-894fa786.js';
-import { L as Loading } from './index-124b650e.js';
-import './index-018f3348.js';
-import { g as formatArticle } from './dataTransform-d6a21d32.js';
+import { T as Tabs } from './index-ac89e9ed.js';
+import { L as Loading } from './index-75e541cf.js';
+import './index-ea149e42.js';
+import { g as formatArticle } from './dataTransform-0a549328.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-cb10f0c9.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-f0bd643a.js';
 import { Minus, Plus } from '@hhgtech/icons/core';
 import { Collapse } from '@mantine/core';
-import { C as CardAuthor } from './index-25335bbd.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { C as CardAuthor } from './index-afee4c58.js';
+import { L as LOCALE } from './Locale-a6078fd4.js';
 import '@hhgtech/icons/other';
-import './index-15e1b8ca.js';
-import './shared-7aa9f950.js';
-import './text-c1c3ae38.js';
-import './index-6b5ef864.js';
-import './index-698e287d.js';
-import './translationsContext-140a78c1.js';
-import './index-86df1763.js';
-import './index-796c8998.js';
+import './index-fcd5837c.js';
+import './shared-9cc56020.js';
+import './index-8f8bea46.js';
+import './index-68a819a2.js';
+import './index-1184c9d4.js';
+import './translationsContext-60b63e2f.js';
+import './index-a293c77f.js';
+import './index-6443df3f.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './constantsIsProduction.js';
 import 'string-format';
-import './constants-fedfafa8.js';
+import './constants-49096577.js';
 import 'dayjs';
 import 'dayjs/plugin/relativeTime';
-import './utils-3b8f9ca0.js';
-import './index-ec035017.js';
-import './paths-00557f58.js';
-import './constants-a10fbc8a.js';
-import './index-e02ef7d6.js';
+import './utils-23deda17.js';
+import './index-5cc02c74.js';
+import './paths-7b8807d0.js';
+import './constants-2ff4ee3f.js';
+import './index-8c5ae17d.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
-import './index-953523ca.js';
+import './index-a8b6cf2f.js';
 import './miscTheme.js';
-import './WhatsApp-e9a34aaf.js';
-import './Spinner-1f9ec7ca.js';
-import './index-d7f21a0a.js';
+import './WhatsApp-6663465e.js';
+import './Spinner-799a07d0.js';
+import './index-ccc82125.js';
 import '@emotion/styled';
-import './index-fe18b552.js';
-import './index-62988070.js';
-import './index-f6aeb770.js';
+import './index-11bf3a00.js';
+import './index-28b62464.js';
+import './index-7964b9a7.js';
 import '@emotion/react';
-import './index-986954db.js';
-import './index-a36af882.js';
-import './index.styles-883d7842.js';
+import './index-5b1591ba.js';
+import './index-957d1230.js';
+import './index.styles-cb591c86.js';
 
 const ProfileDetailContext = createContext({});
 

package/build/esm/{index-124b650e.js → index-75e541cf.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { u as useTranslations } from './index-698e287d.js';
-import { B as Button } from './index-86df1763.js';
+import { u as useTranslations } from './index-1184c9d4.js';
+import { B as Button } from './index-a293c77f.js';
 
 var styles = {"loading":"PD6nRZX"};
 

package/build/esm/{index-f6aeb770.js → index-7964b9a7.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { B as Button } from './index-86df1763.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { B as Button } from './index-a293c77f.js';
+import { u as useTranslations } from './index-1184c9d4.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-0b0e7693.js → index-7be442f1.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-ca64e265.js';
 import React__default, { useMemo } from 'react';
 import { Spoiler as Spoiler$1 } from '@mantine/core';
-import { T as Text } from './index-6b5ef864.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { T as Text } from './index-68a819a2.js';
+import { u as useTranslations } from './index-1184c9d4.js';
 import { theme } from './miscTheme.js';
 
 const Spoiler = (_a) => {

package/build/esm/{index-a9726b34.js → index-8b8c9129.js}

@@ -1,35 +1,35 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-200f1963.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-ca64e265.js';
 import React__default, { useState, useContext, useMemo, useRef, useCallback, useEffect, createContext } from 'react';
 import dayjs from 'dayjs';
-import { T as Tabs } from './index-894fa786.js';
-import { L as Loading } from './index-124b650e.js';
-import { b as formatPost, a as formatCommunity, g as formatArticle } from './dataTransform-d6a21d32.js';
+import { T as Tabs } from './index-ac89e9ed.js';
+import { L as Loading } from './index-75e541cf.js';
+import { b as formatPost, a as formatCommunity, g as formatArticle } from './dataTransform-0a549328.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, b as callApiWithAuth } from './utils-cb10f0c9.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, b as callApiWithAuth } from './utils-f0bd643a.js';
 import { Plus } from '@hhgtech/icons/core';
 import { createStyles, Anchor, Accordion, Flex, useMantineTheme } from '@mantine/core';
-import { C as CommonGAssets } from './index-62988070.js';
-import { I as ImageWrap } from './index-fe18b552.js';
-import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-25335bbd.js';
-import { S as SocialType } from './index-018f3348.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { C as CommonGAssets } from './index-28b62464.js';
+import { I as ImageWrap } from './index-11bf3a00.js';
+import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-afee4c58.js';
+import { S as SocialType } from './index-ea149e42.js';
+import { u as useTranslations } from './index-1184c9d4.js';
 import { theme } from './miscTheme.js';
 import { CrossLogo, ArrowDown } from '@hhgtech/icons/other';
-import { A as Anchor$1 } from './index-67e90cbd.js';
+import { A as Anchor$1 } from './index-e20d91bd.js';
 import '@mantine/dates';
-import './index-e02ef7d6.js';
-import './index-f2d03a1d.js';
-import { T as Text } from './index-6b5ef864.js';
-import { B as Button } from './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
+import './index-8c5ae17d.js';
+import './index-f64c6e39.js';
+import { T as Text } from './index-68a819a2.js';
+import { B as Button } from './index-fcd5837c.js';
+import './index-8f8bea46.js';
+import './index.styles-cb591c86.js';
 import '@mantine/hooks';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
+import './utils-23deda17.js';
 import styled from '@emotion/styled';
 import { useTogetherAuthRequiredAction } from './useTogetherAuthRequiredAction.js';
-import { d as decodeMention, b as decodePostUrl } from './post-3b265413.js';
-import { B as Button$1 } from './index-86df1763.js';
-import './translationsContext-140a78c1.js';
+import { d as decodeMention, b as decodePostUrl } from './post-94f0fa82.js';
+import { B as Button$1 } from './index-a293c77f.js';
+import './translationsContext-60b63e2f.js';
 
 const StyledPostContent = styled.div `
   padding: 0.5rem 1rem 1rem;

package/build/esm/{index-e82146dd.js → index-8bf662cd.js}

@@ -1,6 +1,6 @@
 import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
-import { G as GlobalTextStyleNew, C as CustomStylesType } from './text-c1c3ae38.js';
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-8f8bea46.js';
+import { _ as __rest } from './tslib.es6-ca64e265.js';
 import React__default, { createContext, useState, useEffect, useContext, useCallback } from 'react';
 import { useClickOutside } from '@mantine/hooks';
 import { css } from '@emotion/react';

package/build/esm/{index-e02ef7d6.js → index-8c5ae17d.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-018f3348.js';
+import './index-ea149e42.js';
 import { siteHost, siteOptions } from './constantsSite.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
 import { isProduction } from './constantsIsProduction.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { L as LOCALE } from './Locale-a6078fd4.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;
@@ -386,7 +386,7 @@ const CARE_LOCALES = [
     //  'zh-TW'
 ];
 const CARE_BOOKING_LOCALES = ['vi-VN', 'id-ID'];
-const VIDEO_LOCALES = ['vi-VN'];
+const VIDEO_LOCALES = [LOCALE.Vietnam, LOCALE.Taiwan];
 const FAVICONS = {
     'vi-VN': [
         {
@@ -825,4 +825,4 @@ var index = /*#__PURE__*/Object.freeze({
   isProduction: isProduction
 });
 
-export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CDN_ADDRESS as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, VIDEO_DETAIL_TEMP_STORAGE as V, ZINDEX_SSO as Z, ZINDEX_HEADER as a, basePath as b, CARE_LOCALES as c, CARE_BOOKING_LOCALES as d, VIDEO_LOCALES as e, DATE_FNS_LOCALE as f, BEARER_REFRESH_TOKEN_COOKIE as g, SSO_URL as h, index as i, UP_BASEPATH as j, DATE_FNS_DATE_FORMAT as k, EMERGENCY_STATUS as l, ServicePrice as m, SERVICE_TYPE as n };
+export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CDN_ADDRESS as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, VIDEO_DETAIL_TEMP_STORAGE as V, ZINDEX_SSO as Z, ZINDEX_HEADER as a, basePath as b, VIDEO_LOCALES as c, CARE_LOCALES as d, CARE_BOOKING_LOCALES as e, DATE_FNS_LOCALE as f, BEARER_REFRESH_TOKEN_COOKIE as g, SSO_URL as h, index as i, UP_BASEPATH as j, DATE_FNS_DATE_FORMAT as k, EMERGENCY_STATUS as l, ServicePrice as m, SERVICE_TYPE as n };

package/build/esm/{index-3266848c.js → index-8e8ae67b.js}

@@ -1,12 +1,12 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-ca64e265.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-e02ef7d6.js';
-import './index-018f3348.js';
-import { C as CommonGAssets } from './index-62988070.js';
-import { M as MAPPED_LOCALE } from './index-f2d03a1d.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { I as ISO_FORMAT } from './index-8c5ae17d.js';
+import './index-ea149e42.js';
+import { C as CommonGAssets } from './index-28b62464.js';
+import { M as MAPPED_LOCALE } from './index-f64c6e39.js';
+import { L as LOCALE } from './Locale-a6078fd4.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/{text-c1c3ae38.js → index-8f8bea46.js}

@@ -1,4 +1,5 @@
 import { rem } from '@mantine/core';
+import React__default, { createContext, useContext } from 'react';
 
 var CustomStylesType;
 (function (CustomStylesType) {
@@ -140,6 +141,8 @@ const GlobalTextStyle = {
             h6: [rem(16), rem(14)],
             title1: [rem(17), rem(17)],
             title2: [rem(15), rem(15)],
+            overline: [rem(11), rem(11)],
+            subText: [rem(10), rem(10)],
         },
         lineHeight: {
             base: [rem(24), rem(24)],
@@ -169,6 +172,8 @@ const GlobalTextStyle = {
             h6: [rem(24), rem(22)],
             title1: [rem(24), rem(24)],
             title2: [rem(24), rem(24)],
+            overline: [rem(12), rem(12)],
+            subText: [rem(12), rem(12)],
         },
         letterSpacing: {
             lg: [-0.2, 0],
@@ -194,6 +199,8 @@ const GlobalTextStyle = {
             n1: [-0.2, -0.2],
             title1: [-0.4, -0.4],
             title2: [-0.3, -0.3],
+            overline: [-0.2, -0.2],
+            subText: [-0.2, -0.2],
         },
         fontWeightBySize: {
             s1: FontWeight.semiBold,
@@ -255,4 +262,10 @@ const GlobalTextStyleNew = (theme) => ({
     },
 });
 
-export { CustomStylesType as C, FontWeight as F, GlobalTextStyleNew as G, GlobalTextStyle as a };
+const TemplateContext = createContext(CustomStylesType.NONE);
+const TemplateProvider = ({ variant = CustomStylesType.NONE, children, }) => {
+    return (React__default.createElement(TemplateContext.Provider, { value: variant }, children));
+};
+const useTemplateVariant = () => useContext(TemplateContext);
+
+export { CustomStylesType as C, FontWeight as F, GlobalTextStyleNew as G, TemplateProvider as T, GlobalTextStyle as a, useTemplateVariant as u };