@hhgtech/hhg-components 1.29.497-beta-6 → 1.29.497-beta-8

package/build/esm/{index-5dd737d7.js → index-b52418e2.js}

@@ -1,34 +1,34 @@
 import * as React from 'react';
 import React__default, { useMemo, useState, useEffect, useRef, createContext, useContext } from 'react';
-import { u as useTranslations } from './index-8b691cda.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-6b8160e8.js';
-import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-98541773.js';
+import { C as CommonGAssets } from './index-60514791.js';
+import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-0e358529.js';
 import { theme } from './miscTheme.js';
-import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-81be3a0f.js';
-import { b as getTogetherUserPostsApiPath } from './index-2a89316d.js';
-import { B as Button } from './index-c74e762c.js';
-import { w as workingDays } from './types-c0042d4a.js';
+import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-a0ce662f.js';
+import { b as getTogetherUserPostsApiPath } from './index-6a23de7d.js';
+import { B as Button } from './index-c8cf7dbe.js';
+import { w as workingDays } from './types-94de1741.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-35472f95.js';
+import { M as MediaQueries } from './utils-082bfd0f.js';
 import { rem, clsx, Flex, Box } from '@mantine/core';
 import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';
 import classNames from 'classnames';
-import { b as basePath, Z as ZINDEX_SSO } from './index-6a6be80e.js';
-import { L as LOCALISED_SLUGS } from './constants-fb5c8072.js';
-import { T as Text } from './index-3342ed4e.js';
-import { f as formatPhoneNumber } from './localizeNumberFormat-8989fe90.js';
-import { a as __awaiter } from './tslib.es6-3e39844f.js';
+import { b as basePath, Z as ZINDEX_SSO } from './index-4f619596.js';
+import { L as LOCALISED_SLUGS } from './constants-40d1b4b3.js';
+import { T as Text } from './index-e8cb7efc.js';
+import { f as formatPhoneNumber } from './localizeNumberFormat-8bd6586a.js';
+import { a as __awaiter } from './tslib.es6-7b43f420.js';
 import { useDisclosure } from '@mantine/hooks';
-import { u as useTextStyles, T as TextField } from './index-5400c37c.js';
+import { u as useTextStyles, T as TextField } from './index-88ca8a5b.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { P as Phone, I as Input, E as ErrorIcon } from './index-28c3fdae.js';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-1d8b6a01.js';
-import { B as Button$1 } from './index-1a095350.js';
-import { M as MAPPED_LOCALE } from './index-49ae109d.js';
-import { T as Text$1 } from './index-cdf2fafc.js';
-import { I as ImageWrap } from './index-5e5a991a.js';
-import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-5dfb1ada.js';
+import { P as Phone, I as Input, E as ErrorIcon } from './index-ee50fca1.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-637c938f.js';
+import { B as Button$1 } from './index-82c299ee.js';
+import { M as MAPPED_LOCALE } from './index-0f5feae4.js';
+import { T as Text$1 } from './index-1e053a8a.js';
+import { I as ImageWrap } from './index-a405f8aa.js';
+import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-1dc50396.js';
 
 /* eslint-disable prettier/prettier */
 const Check = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 81 80", fill: "none" }, props),

package/build/esm/{index-74fe2b18.js → index-b580e11f.js}

@@ -1,24 +1,24 @@
-import { _ as __rest } from './tslib.es6-3e39844f.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { I as Input } from './index-28c3fdae.js';
-import { D as DatePicker } from './index-a8836200.js';
-import { T as Text } from './index-cdf2fafc.js';
-import './index-1a095350.js';
+import { I as Input } from './index-ee50fca1.js';
+import { D as DatePicker } from './index-1b608a0b.js';
+import { T as Text } from './index-1e053a8a.js';
+import './index-82c299ee.js';
 import { theme } from './miscTheme.js';
-import './index-1d8b6a01.js';
-import './index.styles-542e6cdc.js';
-import { u as useTranslations } from './index-8b691cda.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import '@mantine/hooks';
-import './index-49ae109d.js';
-import './utils-35472f95.js';
-import './index-3b3ba31f.js';
-import { C as CardWrapperContext } from './context-a1a0383c.js';
-import { I as INPUT_RANGE } from './constants-c630b1ef.js';
-import { H as HealthToolFormWrapper } from './index-fad76d07.js';
-import { G as GenderOptionControl } from './index-e5a1c1a4.js';
-import { L as LOCALE } from './Locale-6c4d912d.js';
+import './index-0f5feae4.js';
+import './utils-082bfd0f.js';
+import './index-73e5f029.js';
+import { C as CardWrapperContext } from './context-62322d3f.js';
+import { I as INPUT_RANGE } from './constants-9391b8a4.js';
+import { H as HealthToolFormWrapper } from './index-80b07363.js';
+import { G as GenderOptionControl } from './index-e1358195.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyGrowthFormContext = createContext({});
@@ -42,36 +42,36 @@ const DefaultForm = (props) => {
                     } }, form.getInputProps('gender'), { error: null }))),
             form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p3", weight: "semiBold" }, t('babyGrowth.input.birthday')) },
+            React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.birthday')) },
                 React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
                         v && form.validateField('measurementDate');
                         form.getInputProps('birthday').onChange(v);
                     } }))),
             form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p3", weight: "semiBold" },
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
                     t('babyGrowth.height'),
-                    React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                    React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
                     form.setFieldValue('height', v);
                     form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                 } }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p3", weight: "semiBold" },
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
                     t('babyGrowth.weight'),
-                    React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.kg')})`)) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                    React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.kg')})`)) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
                     form.setFieldValue('weight', v);
                     form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                 } }))),
         locale !== LOCALE.Vietnam && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p3", weight: "semiBold" },
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
                     t('babyGrowth.head'),
-                    React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                    React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
                     form.setFieldValue('head', v);
                     form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                 } })))),
         form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p3", weight: "semiBold" }, t('babyGrowth.input.measurementDate')) },
+            React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.measurementDate')) },
                 React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
             form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
         React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },

package/build/esm/{index-8f36b944.js → index-bc0c4db6.js}

@@ -1,48 +1,48 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-3e39844f.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import { Info, Ask } from '@hhgtech/icons/other';
-import { D as Dropdown } from './index-fede4e0c.js';
-import { u as useTranslations } from './index-8b691cda.js';
+import { D as Dropdown } from './index-5f50e847.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import innertext from 'innertext';
 import { theme } from './miscTheme.js';
-import { I as Input$1 } from './index-28c3fdae.js';
+import { I as Input$1 } from './index-ee50fca1.js';
 import { useMantineTheme, SegmentedControl, Popover } from '@mantine/core';
 import '@mantine/dates';
-import './index-6a6be80e.js';
-import './index-a55d519d.js';
-import './index-6b8160e8.js';
-import './index-49ae109d.js';
-import { T as Text } from './index-cdf2fafc.js';
-import { B as Button } from './index-1a095350.js';
-import './index-1d8b6a01.js';
-import './index.styles-542e6cdc.js';
+import './index-4f619596.js';
+import './index-76ee9e2c.js';
+import './index-60514791.js';
+import './index-0f5feae4.js';
+import { T as Text } from './index-1e053a8a.js';
+import { B as Button } from './index-82c299ee.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-35472f95.js';
-import './index-3b3ba31f.js';
-import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-944a915c.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-8b6b735a.js';
+import { M as MediaQueries } from './utils-082bfd0f.js';
+import './index-73e5f029.js';
+import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-fc775ef4.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-a07e1db7.js';
 import styled from '@emotion/styled';
-import { a as formatPost, f as formatCommunity, c as formatTopic } from './dataTransform-065d4300.js';
-import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-fb5c8072.js';
-import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-29e76d7d.js';
-import { C as CardAuthor } from './index-3385f01c.js';
-import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-850eced1.js';
-import { I as Input } from './index-cb203a01.js';
+import { a as formatPost, f as formatCommunity, c as formatTopic } from './dataTransform-c26a540d.js';
+import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-40d1b4b3.js';
+import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-821b830e.js';
+import { C as CardAuthor } from './index-f1072783.js';
+import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-b4a4eeb0.js';
+import { I as Input } from './index-40c4120c.js';
 import debounce from 'lodash/debounce';
 import ContentEditable from 'react-contenteditable';
 import { PATHS, ADMIN_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-4ffad5b2.js';
-import { C as CardLink } from './index-12d900bc.js';
-import { B as BtnChoice } from './index-9dc4ad07.js';
-import { L as LOCALE } from './Locale-6c4d912d.js';
+import { L as Loading } from './index-caff88cc.js';
+import { C as CardLink } from './index-58efba90.js';
+import { B as BtnChoice } from './index-940717ae.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
 import * as ReactDOM from 'react-dom';
-import { L as Loading$1 } from './index-2cf97218.js';
-import { b as IconArrowLeft } from './index-4522399d.js';
-import { B as Button$1 } from './index-c74e762c.js';
+import { L as Loading$1 } from './index-fd6d1c25.js';
+import { b as IconArrowLeft } from './index-c0c618df.js';
+import { B as Button$1 } from './index-c8cf7dbe.js';
 import { getCookie } from './miscCookieHelper.js';
-import { a as useUniqueId } from './useUniqueId-737e02e4.js';
-import { U as UserAvatar } from './index-d4c6db0c.js';
-import { P as PopoverMenu } from './index-2b10e12d.js';
+import { a as useUniqueId } from './useUniqueId-b96ca264.js';
+import { U as UserAvatar } from './index-fedc760b.js';
+import { P as PopoverMenu } from './index-96b814f7.js';
 import { Close, Check } from '@hhgtech/icons/core';
 
 const StyledCreateNewPost$1 = styled.div `

package/build/esm/{index-3a5d9ccf.js → index-be1d1201.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-3e39844f.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-a55d519d.js';
+import './index-76ee9e2c.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-6b8160e8.js';
+import { C as CommonGAssets } from './index-60514791.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-5e5a991a.js';
-import { T as Text } from './index-3342ed4e.js';
-import { L as LOCALE } from './Locale-6c4d912d.js';
-import { e as CentralCarousel } from './index-28c3fdae.js';
+import { I as ImageWrap } from './index-a405f8aa.js';
+import { T as Text } from './index-e8cb7efc.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
+import { e as CentralCarousel } from './index-ee50fca1.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-4522399d.js → index-c0c618df.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useEffect, useContext, useRef } from 'react';
-import { H as Heading } from './index-e8afc23a.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-35472f95.js';
-import { u as useTranslations } from './index-8b691cda.js';
-import { T as TogetherComponentGlobalContext } from './utils-8b6b735a.js';
+import { H as Heading } from './index-29d34526.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-082bfd0f.js';
+import { u as useTranslations } from './index-7164c9af.js';
+import { T as TogetherComponentGlobalContext } from './utils-a07e1db7.js';
 import { Portal } from '@mantine/core';
-import { T as Text } from './index-cdf2fafc.js';
+import { T as Text } from './index-1e053a8a.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-3e39844f.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import { theme } from './miscTheme.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-c74e762c.js → index-c8cf7dbe.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-3e39844f.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-1a095350.js';
+import { B as Button$1 } from './index-82c299ee.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-4ffad5b2.js → index-caff88cc.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-bf2a85c1.js';
-import { u as useTranslations } from './index-8b691cda.js';
+import { I as Icon } from './index-1b3aa883.js';
+import { u as useTranslations } from './index-7164c9af.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-b81e2cf6.js → index-d0a944a8.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-6c4d912d.js';
-import { C as CommonGAssets } from './index-6b8160e8.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
+import { C as CommonGAssets } from './index-60514791.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-35472f95.js';
-import { L as LogoIcon } from './logoIcon-1173d6b3.js';
-import './index-a55d519d.js';
-import { I as ImageWrap } from './index-5e5a991a.js';
+import { M as MediaQueries } from './utils-082bfd0f.js';
+import { L as LogoIcon } from './logoIcon-c2be19b2.js';
+import './index-76ee9e2c.js';
+import { I as ImageWrap } from './index-a405f8aa.js';
 
 const StyledLogo = styled.div `
   position: relative;

package/build/esm/{index-065d3f9b.js → index-d7fab681.js}

@@ -1,18 +1,18 @@
 import React__default, { useState, useMemo } from 'react';
-import { F as Flag } from './index-28c3fdae.js';
+import { F as Flag } from './index-ee50fca1.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-cdf2fafc.js';
-import { C as CommonGAssets } from './index-6b8160e8.js';
-import { _ as __rest } from './tslib.es6-3e39844f.js';
-import { a as ZINDEX_HEADER, e as VIDEO_DETAIL_TEMP_STORAGE } from './index-6a6be80e.js';
-import { V as VideoType } from './index-a55d519d.js';
+import { T as Text } from './index-1e053a8a.js';
+import { C as CommonGAssets } from './index-60514791.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
+import { a as ZINDEX_HEADER, e as VIDEO_DETAIL_TEMP_STORAGE } from './index-4f619596.js';
+import { V as VideoType } from './index-76ee9e2c.js';
 import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-b4bacb2f.js';
-import { u as useTranslations } from './index-8b691cda.js';
+import { a as abbreviateNumber } from './number-70aee1a7.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-b734daea.js';
-import { S as SocialLinkPreview } from './index-b2211921.js';
+import { M as Modal } from './index-17209137.js';
+import { S as SocialLinkPreview } from './index-39fe4fb5.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ALLOW_DOMAIN_URL = [

package/build/esm/{index-e5a1c1a4.js → index-e1358195.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-3e39844f.js';
+import { _ as __rest } from './tslib.es6-7b43f420.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-28c3fdae.js';
+import { R as Radio } from './index-ee50fca1.js';
 import '@mantine/dates';
-import './index-6a6be80e.js';
-import './index-a55d519d.js';
-import { C as CommonGAssets } from './index-6b8160e8.js';
-import './index-49ae109d.js';
-import { T as Text } from './index-cdf2fafc.js';
-import './index-1a095350.js';
-import './index-1d8b6a01.js';
-import './index.styles-542e6cdc.js';
-import { u as useTranslations } from './index-8b691cda.js';
+import './index-4f619596.js';
+import './index-76ee9e2c.js';
+import { C as CommonGAssets } from './index-60514791.js';
+import './index-0f5feae4.js';
+import { T as Text } from './index-1e053a8a.js';
+import './index-82c299ee.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import '@mantine/hooks';
-import './utils-35472f95.js';
-import './index-3b3ba31f.js';
+import './utils-082bfd0f.js';
+import './index-73e5f029.js';
 
 var useStyles = createStyles((theme, { type, color }) => {
     var _a;
@@ -107,7 +107,7 @@ const GenderOptionControl = (_a) => {
         setAvailableValue(availableValueInit);
     }, [availableValueInit]);
     return (React__default.createElement(Box, { ref: ref, className: classes.root },
-        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(Text, { as: "label", size: "p3", weight: "semiBold", variant: "primary" }, label ||
+        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(Text, { as: "label", size: "p2", weight: "semiBold", variant: "primary" }, label ||
                 (isBaby
                     ? t('tools.selectBabyGender')
                     : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {

package/build/esm/{index-495e4445.js → index-e141276d.js}

@@ -1,22 +1,22 @@
-import { _ as __rest } from './tslib.es6-3e39844f.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default, { useContext } from 'react';
 import { createStyles, rem, Box, clsx } from '@mantine/core';
-import './index-28c3fdae.js';
+import './index-ee50fca1.js';
 import '@mantine/dates';
-import './index-6a6be80e.js';
-import './index-a55d519d.js';
-import './index-6b8160e8.js';
-import './index-49ae109d.js';
-import { T as Text } from './index-cdf2fafc.js';
-import { B as Button } from './index-1a095350.js';
-import './index-1d8b6a01.js';
-import './index.styles-542e6cdc.js';
-import { u as useTranslations } from './index-8b691cda.js';
+import './index-4f619596.js';
+import './index-76ee9e2c.js';
+import './index-60514791.js';
+import './index-0f5feae4.js';
+import { T as Text } from './index-1e053a8a.js';
+import { B as Button } from './index-82c299ee.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import '@mantine/hooks';
-import './utils-35472f95.js';
-import './index-3b3ba31f.js';
-import { C as CardWrapperContext } from './context-a1a0383c.js';
-import { H as HealthToolFormWrapper } from './index-fad76d07.js';
+import './utils-082bfd0f.js';
+import './index-73e5f029.js';
+import { C as CardWrapperContext } from './context-62322d3f.js';
+import { H as HealthToolFormWrapper } from './index-80b07363.js';
 
 var useStyles = createStyles((theme, { hasOnClickFn }) => {
     return {

package/build/esm/{index-4900c554.js → index-e2e2732e.js}

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-3e39844f.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7b43f420.js';
 import React__default, { createContext, useState, useContext, useEffect } from 'react';
-import { T as Tabs } from './index-3b3ba31f.js';
-import { L as Loading } from './index-5a9aab13.js';
-import './index-a55d519d.js';
-import { g as formatArticle } from './dataTransform-065d4300.js';
+import { T as Tabs } from './index-73e5f029.js';
+import { L as Loading } from './index-af884e9a.js';
+import './index-76ee9e2c.js';
+import { g as formatArticle } from './dataTransform-c26a540d.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-8b6b735a.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-a07e1db7.js';
 import { Minus, Plus } from '@hhgtech/icons/core';
 import { Collapse } from '@mantine/core';
-import { C as CardAuthor } from './index-3385f01c.js';
-import { L as LOCALE } from './Locale-6c4d912d.js';
+import { C as CardAuthor } from './index-f1072783.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
 import '@hhgtech/icons/other';
-import './index-1a095350.js';
-import './shared-1d7064d1.js';
-import './index-1d8b6a01.js';
-import './index-cdf2fafc.js';
-import './index-8b691cda.js';
-import './translationsContext-463a5f0d.js';
-import './index-c74e762c.js';
-import './index-f2d81461.js';
+import './index-82c299ee.js';
+import './shared-3e892fe7.js';
+import './index-637c938f.js';
+import './index-1e053a8a.js';
+import './index-7164c9af.js';
+import './translationsContext-a05c705a.js';
+import './index-c8cf7dbe.js';
+import './index-676d2103.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './constantsIsProduction.js';
 import 'string-format';
-import './constants-fb5c8072.js';
+import './constants-40d1b4b3.js';
 import 'dayjs';
 import 'dayjs/plugin/relativeTime';
-import './utils-35472f95.js';
-import './index-52686b48.js';
-import './paths-fe08d452.js';
-import './constants-b336dda2.js';
-import './index-6a6be80e.js';
+import './utils-082bfd0f.js';
+import './index-4ebb545e.js';
+import './paths-0b7d1534.js';
+import './constants-c1906b61.js';
+import './index-4f619596.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
-import './index-bf2a85c1.js';
+import './index-1b3aa883.js';
 import './miscTheme.js';
-import './WhatsApp-23d68f47.js';
-import './Spinner-46dcd9ff.js';
-import './index-d4c6db0c.js';
+import './WhatsApp-fd9b6e44.js';
+import './Spinner-3b40b67d.js';
+import './index-fedc760b.js';
 import '@emotion/styled';
-import './index-5e5a991a.js';
-import './index-6b8160e8.js';
-import './index-2cf97218.js';
+import './index-a405f8aa.js';
+import './index-60514791.js';
+import './index-fd6d1c25.js';
 import '@emotion/react';
-import './index-e8afc23a.js';
-import './index-b734daea.js';
-import './index.styles-542e6cdc.js';
+import './index-29d34526.js';
+import './index-17209137.js';
+import './index.styles-fa779a7c.js';
 
 const ProfileDetailContext = createContext({});
 

package/build/esm/{index-36fab9c1.js → index-e31e29f1.js}

@@ -1,22 +1,21 @@
-import { _ as __rest } from './tslib.es6-3e39844f.js';
+import { _ as __rest } from './tslib.es6-7b43f420.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-2ad3ec60.js';
-import { I as Input } from './index-28c3fdae.js';
-import { D as DatePicker } from './index-a8836200.js';
-import { T as Text } from './index-cdf2fafc.js';
-import './index-1a095350.js';
-import { theme } from './miscTheme.js';
-import './index-1d8b6a01.js';
-import './index.styles-542e6cdc.js';
-import { u as useTranslations } from './index-8b691cda.js';
+import { L as LastPeriod } from './LastPeriod-b604e8f2.js';
+import { I as Input } from './index-ee50fca1.js';
+import { D as DatePicker } from './index-1b608a0b.js';
+import { T as Text } from './index-1e053a8a.js';
+import './index-82c299ee.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import '@mantine/hooks';
-import './index-49ae109d.js';
-import './utils-35472f95.js';
-import './index-3b3ba31f.js';
-import { C as CardWrapperContext } from './context-a1a0383c.js';
-import { H as HealthToolFormWrapper } from './index-fad76d07.js';
+import './index-0f5feae4.js';
+import './utils-082bfd0f.js';
+import './index-73e5f029.js';
+import { C as CardWrapperContext } from './context-62322d3f.js';
+import { H as HealthToolFormWrapper } from './index-80b07363.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {
@@ -70,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,
@@ -82,19 +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: React__default.createElement(Text, { size: "p3", weight: "semiBold" }, ` (${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: React__default.createElement(Text, { size: "p3", weight: "semiBold" },
-                    t('ovulationPage.cycleLength'),
-                    React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${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: React__default.createElement(Text, { size: "p3", weight: "semiBold" },
-                    t('ovulationPage.periodDuration'),
-                    React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" },
-                        "` ($",
-                        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')))));
 };