@hhgtech/hhg-components 1.29.498 → 1.29.500

package/build/esm/{index-4d5ca276.js → index-64405ae9.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
 import React__default, { createContext, useContext } from 'react';
-import { clsx, useMantineTheme } from '@mantine/core';
+import { createStyles, rem, clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { L as LastPeriod } from './LastPeriod-f4521eff.js';
-import { I as Input } from './index-03963d37.js';
-import { D as DatePicker } from './index-d48cbe53.js';
-import { T as Text } from './index-9181155e.js';
-import './index-dbe7d116.js';
-import './index-3770342b.js';
-import './index.styles-f9403cd8.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import { L as LastPeriod } from './LastPeriod-255c1963.js';
+import { I as Input } from './index-14a92066.js';
+import { D as DatePicker } from './index-5a1286f9.js';
+import { T as Text } from './index-a9b01bfd.js';
+import './index-845a806a.js';
+import './index-9b31987c.js';
+import './index.styles-2575877c.js';
+import { u as useTranslations } from './index-880a8911.js';
 import '@mantine/hooks';
-import './index-6187b3e5.js';
-import './utils-9da52e63.js';
-import './index-a4b6228d.js';
-import { C as CardWrapperContext } from './context-06e735a2.js';
-import { H as HealthToolFormWrapper } from './index-35e5fb79.js';
+import './index-7aedbf1b.js';
+import './utils-c5a1f614.js';
+import './index-269b0fd2.js';
+import { C as CardWrapperContext } from './context-ccc8129d.js';
+import { H as HealthToolFormWrapper } from './index-8e2cee8d.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {
@@ -69,11 +69,26 @@ const TryConceive = (_a) => {
 
 const OvulationFormContext = createContext({});
 
+var useStyles = createStyles((theme) => {
+    return {
+        inputRightSection: {
+            fontSize: rem(13),
+            lineHeight: rem(24),
+            color: theme.colors.gray[4],
+            justifyContent: 'flex-end',
+            paddingRight: 8,
+        },
+    };
+});
+
 const DefaultLayout = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods, isMobile } = useContext(OvulationFormContext);
     const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
+    const { classes } = useStyles(undefined, 
+    // Second DefaultLayout is responsible for styles api integration
+    { name: 'OvulationTool__DefaultLayout' });
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.Control, null,
@@ -81,11 +96,15 @@ const DefaultLayout = (_a) => {
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                     withinPortal: true,
-                }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+                }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, ` (${t('dueDatePage.lastPeriod.lastPeriodLabel')})`), maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('ovulationPage.cycleLength')), rightSection: t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { classNames: {
+                    rightSection: classes.inputRightSection,
+                } }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Number, Object.assign({ label: `${t('ovulationPage.periodDuration')} (${t('ovulationPage.dayUnit')})`, min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('ovulationPage.periodDuration')), rightSection: t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { classNames: {
+                    rightSection: classes.inputRightSection,
+                } }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
             React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };

package/build/esm/{index-66f3aa0a.js → index-6668f0bb.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-a01edf7c.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import { I as Icon } from './index-e6da1de2.js';
+import { u as useTranslations } from './index-880a8911.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-74f5cc07.js → index-77f9649d.js}

@@ -1,6 +1,6 @@
 import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
-import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-3770342b.js';
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-9b31987c.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.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-c06c86b3.js → index-78ddd518.js}

@@ -1,18 +1,18 @@
 import React__default, { useState, useMemo } from 'react';
-import { F as Flag } from './index-03963d37.js';
+import { F as Flag } from './index-14a92066.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-9181155e.js';
-import { C as CommonGAssets } from './index-957ad8bc.js';
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
-import { a as ZINDEX_HEADER, e as VIDEO_DETAIL_TEMP_STORAGE } from './index-2d6472a6.js';
-import { V as VideoType } from './index-633b28cc.js';
+import { T as Text } from './index-a9b01bfd.js';
+import { C as CommonGAssets } from './index-d8f59b87.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
+import { a as ZINDEX_HEADER, e as VIDEO_DETAIL_TEMP_STORAGE } from './index-99b321ef.js';
+import { V as VideoType } from './index-abd28b8a.js';
 import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-6f22ec5a.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import { a as abbreviateNumber } from './number-eb9ba550.js';
+import { u as useTranslations } from './index-880a8911.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-19f3e770.js';
-import { S as SocialLinkPreview } from './index-e319e84e.js';
+import { M as Modal } from './index-4d21425c.js';
+import { S as SocialLinkPreview } from './index-8ce4b868.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ALLOW_DOMAIN_URL = [

package/build/esm/{index-ed2129fb.js → index-7a75ed86.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
 import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from '@mantine/core';
 import { Drawer } from 'vaul';
 import styled from '@emotion/styled';
-import { Z as ZINDEX_SSO } from './index-2d6472a6.js';
+import { Z as ZINDEX_SSO } from './index-99b321ef.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {

package/build/esm/{index-6187b3e5.js → index-7aedbf1b.js}

@@ -1,16 +1,16 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-4c2b392a.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-b5ec78ee.js';
 import React__default, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import './index-633b28cc.js';
-import { L as LOCALE } from './Locale-0e687ff5.js';
+import './index-abd28b8a.js';
+import { L as LOCALE } from './Locale-c0ccb529.js';
 import { notifications, Notifications } from '@mantine/notifications';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-2d6472a6.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-99b321ef.js';
 import { em } from '@mantine/core';
-import { C as CommonGAssets } from './index-957ad8bc.js';
+import { C as CommonGAssets } from './index-d8f59b87.js';
 import { theme } from './miscTheme.js';
-import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-9da52e63.js';
-import { C as CustomStylesType, F as FontWeight } from './index-3770342b.js';
-import { A as ANIMATION_DURATION } from './shared-93e28ff6.js';
+import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-c5a1f614.js';
+import { C as CustomStylesType, F as FontWeight } from './index-9b31987c.js';
+import { A as ANIMATION_DURATION } from './shared-a65f5c3c.js';
 
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const MAPPED_LOCALE = {

package/build/esm/{index-81fbf719.js → index-7d44c495.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-0e687ff5.js';
-import { C as CommonGAssets } from './index-957ad8bc.js';
+import { L as LOCALE } from './Locale-c0ccb529.js';
+import { C as CommonGAssets } from './index-d8f59b87.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-9da52e63.js';
-import { L as LogoIcon } from './logoIcon-9fccc5f7.js';
-import './index-633b28cc.js';
-import { I as ImageWrap } from './index-09da7cf5.js';
+import { M as MediaQueries } from './utils-c5a1f614.js';
+import { L as LogoIcon } from './logoIcon-42ba190e.js';
+import './index-abd28b8a.js';
+import { I as ImageWrap } from './index-d1f1934d.js';
 
 const StyledLogo = styled.div `
   position: relative;

package/build/esm/{index-200b8bc8.js → index-7fd14ad5.js}

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-9da52e63.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-c5a1f614.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-8051135e.js';
-import { I as Input } from './index-03963d37.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-aad9135a.js';
+import { I as Input } from './index-14a92066.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-2d6472a6.js';
-import './index-633b28cc.js';
-import './index-957ad8bc.js';
-import './index-6187b3e5.js';
-import './index-9181155e.js';
-import './index-dbe7d116.js';
-import './index-3770342b.js';
-import './index.styles-f9403cd8.js';
-import './translationsContext-ec597c09.js';
+import './index-99b321ef.js';
+import './index-abd28b8a.js';
+import './index-d8f59b87.js';
+import './index-7aedbf1b.js';
+import './index-a9b01bfd.js';
+import './index-845a806a.js';
+import './index-9b31987c.js';
+import './index.styles-2575877c.js';
+import './translationsContext-eaa23cd9.js';
 import '@mantine/hooks';
-import './index-a4b6228d.js';
+import './index-269b0fd2.js';
 
 /* eslint-disable prettier/prettier */
 const Search2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 25", fill: "none" }, props),

package/build/esm/{index-dbe7d116.js → index-845a806a.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
 import React__default, { forwardRef } from 'react';
 import { createStyles, getStylesRef, useMantineTheme, Button as Button$1 } from '@mantine/core';
-import { A as ANIMATION_DURATION } from './shared-93e28ff6.js';
-import { C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-3770342b.js';
+import { A as ANIMATION_DURATION } from './shared-a65f5c3c.js';
+import { C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-9b31987c.js';
 
 var useStyles = createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;

package/build/esm/{index-f6ac1b8c.js → index-85e13974.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
 import React__default, { useMemo } from 'react';
 import { Spoiler as Spoiler$1 } from '@mantine/core';
-import { T as Text } from './index-9181155e.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import { T as Text } from './index-a9b01bfd.js';
+import { u as useTranslations } from './index-880a8911.js';
 import { theme } from './miscTheme.js';
 
 const Spoiler = (_a) => {

package/build/esm/{index-a6593fc5.js → index-880a8911.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-ec597c09.js';
+import { T as TranslationsContext } from './translationsContext-eaa23cd9.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-e07018ce.js → index-8a69c516.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-beb3ccde.js';
+import { C as Container } from './index-1b2a663b.js';
 import dayjs from 'dayjs';
-import './index-2d6472a6.js';
-import './index-03963d37.js';
+import './index-99b321ef.js';
+import './index-14a92066.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-633b28cc.js';
-import './index-957ad8bc.js';
-import './index-6187b3e5.js';
-import { T as Text } from './index-9181155e.js';
-import './index-dbe7d116.js';
-import './index-3770342b.js';
-import './index.styles-f9403cd8.js';
-import './translationsContext-ec597c09.js';
+import './index-abd28b8a.js';
+import './index-d8f59b87.js';
+import './index-7aedbf1b.js';
+import { T as Text } from './index-a9b01bfd.js';
+import './index-845a806a.js';
+import './index-9b31987c.js';
+import './index.styles-2575877c.js';
+import './translationsContext-eaa23cd9.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-9da52e63.js';
-import './index-a4b6228d.js';
-import { u as useScreenSize } from './index-09da7cf5.js';
+import { M as MediaQueries } from './utils-c5a1f614.js';
+import './index-269b0fd2.js';
+import { u as useScreenSize } from './index-d1f1934d.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-81fbf719.js';
-import { M as MarryBabyText } from './index-5a7346c3.js';
+import { L as Logo } from './index-7d44c495.js';
+import { M as MarryBabyText } from './index-c789fbd6.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-e319e84e.js → index-8ce4b868.js}

@@ -1,13 +1,13 @@
-import { a as __awaiter } from './tslib.es6-4c2b392a.js';
+import { a as __awaiter } from './tslib.es6-b5ec78ee.js';
 import React__default, { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import { Box, useMantineTheme } from '@mantine/core';
-import { I as ImageWrap } from './index-09da7cf5.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-ffe8c9cf.js';
+import { I as ImageWrap } from './index-d1f1934d.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-832ec2d2.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-a9f0b321.js';
-import { y as youtubeVidIdGetter } from './post-b7fe45c2.js';
-import { L as Loading } from './index-326acba7.js';
+import { D as DEFAULT_IMG } from './constants-4e5e59b6.js';
+import { y as youtubeVidIdGetter } from './post-074bc746.js';
+import { L as Loading } from './index-b64841a5.js';
 
 const StyledSocialLinkPreview = styled.div `
   .link-info-container {

package/build/esm/{index-35e5fb79.js → index-8e2cee8d.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-9181155e.js';
-import { B as Button } from './index-dbe7d116.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import { T as Text } from './index-a9b01bfd.js';
+import { B as Button } from './index-845a806a.js';
+import { u as useTranslations } from './index-880a8911.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 
@@ -42,7 +42,7 @@ const ChipGroup = (_a) => {
                 ? 32
                 : 18;
     return (React__default.createElement(Box, null,
-        React__default.createElement(Input.Wrapper, { label: label },
+        React__default.createElement(Input.Wrapper, { label: label && (React__default.createElement(Text, { size: "p3", weight: "semiBold" }, label)) },
             React__default.createElement(Chip.Group, Object.assign({}, props),
                 React__default.createElement(Box, { className: classes.group }, data.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
                         iconWrapper: {
@@ -129,6 +129,11 @@ var useStyles$6 = createStyles((theme, { formLayout }) => {
             '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
                 color: '#8C8C8C',
             },
+            [theme.fn.smallerThan('sm')]: Object.assign({ 'input, .mantine-DatePickerInput-input': {
+                    fontSize: rem(14),
+                } }, (formLayout === 'default' && {
+                gap: 8,
+            })),
         },
         control: {
             width: rem(180),

package/build/esm/{index-2e5bfdaa.js → index-93b22d82.js}

@@ -1,26 +1,26 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b5ec78ee.js';
 import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
 import { useMantineTheme, clsx, Group, Flex, Tooltip, Box } from '@mantine/core';
 import { format } from 'date-fns';
-import { L as LastPeriod } from './LastPeriod-f4521eff.js';
-import { L as LOCALE } from './Locale-0e687ff5.js';
+import { L as LastPeriod } from './LastPeriod-255c1963.js';
+import { L as LOCALE } from './Locale-c0ccb529.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } from './index-03963d37.js';
-import { D as DatePicker } from './index-d48cbe53.js';
-import { T as Text } from './index-9181155e.js';
-import './index-dbe7d116.js';
-import './index-3770342b.js';
-import './index.styles-f9403cd8.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import { R as Radio, I as Input, S as Select } from './index-14a92066.js';
+import { D as DatePicker } from './index-5a1286f9.js';
+import { T as Text } from './index-a9b01bfd.js';
+import './index-845a806a.js';
+import './index-9b31987c.js';
+import './index.styles-2575877c.js';
+import { u as useTranslations } from './index-880a8911.js';
 import '@mantine/hooks';
-import './index-6187b3e5.js';
-import './utils-9da52e63.js';
-import './index-a4b6228d.js';
-import { H as HealthToolFormWrapper } from './index-35e5fb79.js';
+import './index-7aedbf1b.js';
+import './utils-c5a1f614.js';
+import './index-269b0fd2.js';
+import { H as HealthToolFormWrapper } from './index-8e2cee8d.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { C as CardWrapperContext } from './context-06e735a2.js';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-2d6472a6.js';
+import { C as CardWrapperContext } from './context-ccc8129d.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-99b321ef.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {
@@ -248,7 +248,7 @@ const DefaultLayout$4 = () => {
     const { t } = useTranslations();
     const { form } = useContext(ConceptionFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+        React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.lastPeriod.lastPeriodLabel')) }, form.getInputProps('lastPeriodDate'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
 };
@@ -307,7 +307,7 @@ const DefaultLayout$3 = () => {
     const { t } = useTranslations();
     const { form } = useContext(IUIFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_IUI_procedure') }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+        React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.date_of_IUI_procedure')) }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
 };
@@ -366,7 +366,7 @@ const DefaultLayout$2 = () => {
     const { form, transferDateOptions } = useContext(IVFFormContext);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { popoverProps: {
+            React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.ivf.transferDate')) }, form.getInputProps('IVFDate'), { popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date() }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
@@ -457,11 +457,11 @@ const DefaultLayout$1 = () => {
     })), []);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+            React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, 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(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, 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')))))));
@@ -553,12 +553,12 @@ const DefaultLayout = () => {
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+            React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, 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(Text, { size: "p2", weight: "semiBold" }, 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 })))),
@@ -725,8 +725,8 @@ const DueDateForm = (_a) => {
         React__default.createElement(HealthToolFormWrapper, Object.assign({ component: "div", formLayout: formLayout }, props),
             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, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, 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: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, 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-2d6472a6.js → index-99b321ef.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-633b28cc.js';
+import './index-abd28b8a.js';
 import { siteHost, siteOptions, COUNTRY_CURRENCY_SYMBOL } 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-0e687ff5.js';
+import { L as LOCALE } from './Locale-c0ccb529.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;