@hhgtech/hhg-components 1.29.500-beta-10 → 1.29.500-beta-11

package/build/esm/{index-13e82b0e.js → index-4c790163.js}

@@ -1,23 +1,23 @@
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { _ as __rest } from './tslib.es6-2d13868d.js';
 import React__default, { useContext } from 'react';
 import { createStyles, rem, useMantineTheme, Box, Flex, ScrollArea } from '@mantine/core';
 import { Warning } from '@hhgtech/icons/core';
 import { RedCross } from '@hhgtech/icons/other';
-import './index-f6a105d2.js';
+import './index-578e8156.js';
 import '@mantine/dates';
-import './index-df8bd47e.js';
-import './index-ad5e059d.js';
-import './index-646b9a16.js';
-import './index-fa131ed2.js';
-import { T as Text } from './index-d82a9c5b.js';
-import './index-22e04fca.js';
-import { F as FontWeight, T as TemplateProvider, C as CustomStylesType } from './index-3a65e1d5.js';
-import './index.styles-575ac9a9.js';
-import { u as useTranslations } from './index-4f9c8603.js';
+import './index-78d41796.js';
+import './index-38e3a7e0.js';
+import './index-ef2bcd67.js';
+import './index-9df03ece.js';
+import { T as Text } from './index-5d73c750.js';
+import './index-7fc8c5f0.js';
+import { F as FontWeight, T as TemplateProvider, C as CustomStylesType } from './index-ab82da5d.js';
+import './index.styles-9223124f.js';
+import { u as useTranslations } from './index-5b309dd3.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-7a0636fe.js';
-import './index-b4f0bcb5.js';
-import { C as CardWrapperContext } from './context-dfc35084.js';
+import { M as MediaQueries } from './utils-8d327623.js';
+import './index-22bbdad3.js';
+import { C as CardWrapperContext } from './context-201f0c67.js';
 
 const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
 const StyledInnerClass = 'hhgcomp-toolbanner-inner';

package/build/esm/{index-fa7506cd.js → index-4f2900bd.js}

@@ -1,6 +1,6 @@
 import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
-import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-3a65e1d5.js';
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-ab82da5d.js';
+import { _ as __rest } from './tslib.es6-2d13868d.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-0bd5655a.js → index-4f8214eb.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { _ as __rest } from './tslib.es6-2d13868d.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { L as LastPeriod } from './LastPeriod-c1ccb27c.js';
-import { I as Input } from './index-f6a105d2.js';
-import { D as DatePicker } from './index-81aae0bc.js';
-import { T as Text } from './index-d82a9c5b.js';
-import './index-22e04fca.js';
-import './index-3a65e1d5.js';
-import './index.styles-575ac9a9.js';
-import { u as useTranslations } from './index-4f9c8603.js';
+import { L as LastPeriod } from './LastPeriod-06e89d79.js';
+import { I as Input } from './index-578e8156.js';
+import { D as DatePicker } from './index-82603ac0.js';
+import { T as Text } from './index-5d73c750.js';
+import './index-7fc8c5f0.js';
+import './index-ab82da5d.js';
+import './index.styles-9223124f.js';
+import { u as useTranslations } from './index-5b309dd3.js';
 import '@mantine/hooks';
-import './index-fa131ed2.js';
-import './utils-7a0636fe.js';
-import './index-b4f0bcb5.js';
-import { C as CardWrapperContext } from './context-dfc35084.js';
-import { H as HealthToolFormWrapper } from './index-349fc2e4.js';
+import './index-9df03ece.js';
+import './utils-8d327623.js';
+import './index-22bbdad3.js';
+import { C as CardWrapperContext } from './context-201f0c67.js';
+import { H as HealthToolFormWrapper } from './index-3da36fd3.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {

package/build/esm/{index-542eb022.js → index-57476ff6.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { _ as __rest } from './tslib.es6-2d13868d.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-df8bd47e.js';
+import { Z as ZINDEX_SSO } from './index-78d41796.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {

package/build/esm/{index-f6a105d2.js → index-578e8156.js}

@@ -1,24 +1,25 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-2d444edf.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2d13868d.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown } from '@hhgtech/icons/other';
 import { createStyles, rem, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, Flex, clsx, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useClickOutside, useViewportSize, useResizeObserver, useDisclosure } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-646b9a16.js';
-import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-3a65e1d5.js';
-import { u as useScreenSize, I as ImageWrap } from './index-e6c725d8.js';
+import { C as CommonGAssets } from './index-ef2bcd67.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-ab82da5d.js';
+import { u as useScreenSize, I as ImageWrap } from './index-73776e64.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-d82a9c5b.js';
-import { t as themeColors } from './index-fa131ed2.js';
+import { T as Text } from './index-5d73c750.js';
+import { t as themeColors } from './index-9df03ece.js';
 import { theme } from './miscTheme.js';
+import { A as ANIMATION_DURATION } from './shared-442a2add.js';
 import classNames from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-83dcaba5.js';
+import { a as useUniqueId } from './useUniqueId-1eef3fa2.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-22e04fca.js';
+import { B as Button } from './index-7fc8c5f0.js';
 
 var useStyles$4 = createStyles((theme, { variantStyle }) => {
     const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
@@ -322,16 +323,96 @@ const FileInput = (props) => {
     return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
 };
 
-var useStyles$1 = createStyles((theme, { variantStyle }) => {
-    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
-    const commonStyle = {
-        fontSize: rem(15),
-        lineHeight: rem(24),
+const sizeMap = {
+    lg: {
+        height: 48,
+        fontSize: rem(16),
+        lineHeight: '24px',
+    },
+    md: {
+        height: 40,
+        fontSize: rem(14),
+        lineHeight: '22px',
+    },
+    sm: {
+        height: 32,
+        fontSize: rem(14),
+        lineHeight: '22px',
+    },
+    xs: {
+        height: 32,
+        fontSize: rem(13),
+        lineHeight: rem(20),
         letterSpacing: '-0.3px',
-        color: theme.colors.gray[4],
-    };
+    },
+};
+var useStyles$1 = createStyles((theme, { variantStyle, size, }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
+    const base = sizeMap[size] || {};
+    const leadgenPatch = isLeadgenStyle
+        ? size === 'sm'
+            ? { height: 36, fontSize: rem(13), letterSpacing: '-0.3px' }
+            : { fontSize: rem(15), letterSpacing: '-0.3px' }
+        : {};
+    // const commonStyle = {
+    //   fontSize: rem(15),
+    //   lineHeight: rem(24),
+    //   letterSpacing: '-0.3px',
+    //   color: theme.colors.gray[4],
+    // }
     return {
-        input: Object.assign({}, (isLeadgenStyle && Object.assign(Object.assign({}, commonStyle), { color: '#111111', paddingLeft: 16, paddingRight: 16, '&::placeholder': Object.assign(Object.assign({}, commonStyle), { color: theme.colors.gray[4] }) }))),
+        input: {
+            border: `1px solid ${theme.colors.gray[2]}`,
+            transition: `all ${ANIMATION_DURATION} ease-in-out`,
+            ['&:not(.mantine-Textarea-input)']: Object.assign(Object.assign({ minHeight: 'unset' }, base), leadgenPatch),
+            '&:hover': {
+                border: `1px solid ${theme.fn.primaryColor()}`,
+                // boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
+            },
+            '&:focus': {
+                boxShadow: `0px 0px 0px 2px ${theme.colors[theme.primaryColor][2]}`,
+            },
+            '&[data-invalid="true"]': {
+                border: `1px solid ${theme.colors.red600}`,
+                color: '#000',
+            },
+            // ...(isLeadgenStyle && {
+            //   ...commonStyle,
+            //   color: '#111111',
+            //   paddingLeft: 16,
+            //   paddingRight: 16,
+            //   '&::placeholder': {
+            //     ...commonStyle,
+            //     color: theme.colors.gray[4],
+            //   },
+            // }),
+        },
+        rightSection: Object.assign({ color: theme.colors.gray[4] }, (() => {
+            switch (size) {
+                case 'lg':
+                    return Object.assign({ fontSize: rem(16) }, (isLeadgenStyle && {
+                        fontSize: rem(15),
+                    }));
+                case 'md':
+                    return Object.assign({ fontSize: rem(14) }, (isLeadgenStyle && {
+                        fontSize: rem(15),
+                        letterSpacing: '-0.3px',
+                    }));
+                case 'sm':
+                    return Object.assign({ height: 32, fontSize: rem(14), lineHeight: '22px' }, (isLeadgenStyle && {
+                        height: 36,
+                        fontSize: rem(13),
+                        letterSpacing: '-0.3px',
+                    }));
+                case 'xs':
+                    return {
+                        height: 32,
+                        lineHeight: rem(20),
+                        fontSize: rem(13),
+                        letterSpacing: '-0.3px',
+                    };
+            }
+        })()),
     };
 });
 
@@ -342,20 +423,25 @@ const emotionCache = createEmotionCache({
 });
 
 const NumberInput = (_a) => {
-    var { value: _value, onChange: _onChange } = _a, props = __rest(_a, ["value", "onChange"]);
+    var { value: _value, onChange: _onChange, size = 'md', styles, classNames } = _a, props = __rest(_a, ["value", "onChange", "size", "styles", "classNames"]);
     const [value, setValue] = useState(_value);
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles, classNames });
     useEffect(() => {
         _onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
     }, [debounced]);
     useEffect(() => {
         setValue(_value);
     }, [_value]);
-    return (React__default.createElement(NumberInput$1, Object.assign({ size: "md", stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
+    return (React__default.createElement(NumberInput$1, Object.assign({ stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
             if (Number(value) === 0)
                 return value;
             return value || '';
-        }, removeTrailingZeros: true, value: value }, props)));
+        }, removeTrailingZeros: true, value: value }, props, { size: size, classNames: {
+            input: classes.input,
+            rightSection: classes.rightSection,
+        } })));
 };
 
 const EyeVisible = CommonGAssets.getAssetPath('EyeVisible.svg');
@@ -749,9 +835,9 @@ FloatingLabelControl.Control = FloatingLabelControlControl;
 FloatingLabelControl.Icon = FloatingLabelControlIcon;
 
 const InputWrapper = forwardRef((_a, ref) => {
-    var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
+    var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error, size = 'md' } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error", "size"]);
     const variantStyle = useTemplateVariant();
-    const { classes } = useStyles$1({ variantStyle }, { name: 'MantineInput', styles });
+    const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles });
     const [value, setValue] = useState(_value || '');
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
     useEffect(() => {
@@ -762,7 +848,9 @@ const InputWrapper = forwardRef((_a, ref) => {
     }, [_value]);
     const commonProps = Object.assign(Object.assign({ classNames: {
             input: classes.input,
-        }, ref, size: 'md', onChange: (event) => {
+            rightSection: classes.rightSection,
+        }, ref,
+        size, onChange: (event) => {
             if (typeof maxLength === 'number' &&
                 event.currentTarget.value.length > maxLength) {
                 return;
@@ -774,15 +862,11 @@ const InputWrapper = forwardRef((_a, ref) => {
         error }, props), { maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` });
     if (withFloatingLabel) {
         return (React__default.createElement(FloatingLabelControl, { shrink: !!value },
-            React__default.createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__default.createElement(TextInput, Object.assign({}, commonProps, { classNames: {
-                    input: classes.input,
-                }, error: error && React__default.createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
+            React__default.createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__default.createElement(TextInput, Object.assign({}, commonProps, { error: error && React__default.createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
                     input: Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: FontWeight.halfBold }),
                 }) }))))));
     }
-    return (React__default.createElement(TextInput, Object.assign({}, commonProps, { classNames: {
-            input: classes.input,
-        } })));
+    return React__default.createElement(TextInput, Object.assign({}, commonProps));
 });
 const Input = InputWrapper;
 Input.File = FileInput;
@@ -1794,4 +1878,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Avatar as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Carousel as a, Anchor as b, AspectRatio as c, ErrorLabel as d, Checkbox as e, CentralCarousel as f, ChipButton as g, PasswordInput as h, ErrorBoundary as i, StyledSliderWrapper as j, StyledSlider as k, Accordion as l, emotionCache as m, PhoneInput as n, Popover as o, styles as s, useStyles$2 as u };
+export { Avatar as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Carousel as a, Anchor as b, AspectRatio as c, Checkbox as d, ErrorLabel as e, CentralCarousel as f, ChipButton as g, ErrorBoundary as h, PasswordInput as i, StyledSliderWrapper as j, StyledSlider as k, Accordion as l, emotionCache as m, PhoneInput as n, Popover as o, styles as s, useStyles$2 as u };

package/build/esm/{index-b6d5e06f.js → index-59883313.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { _ as __rest } from './tslib.es6-2d13868d.js';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-4f9c8603.js → index-5b309dd3.js}

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

package/build/esm/{index-6a0e38a2.js → index-5be40e80.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-c71f91a8.js';
+import { u as useScrollbarSize } from './useScrollbarSize-a194b401.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-7a0636fe.js';
+import { M as MediaQueries } from './utils-8d327623.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-9750477a.js → index-5bf4f3fd.js}

@@ -1,29 +1,45 @@
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { _ as __rest } from './tslib.es6-2d13868d.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-f6a105d2.js';
+import { R as Radio } from './index-578e8156.js';
 import '@mantine/dates';
-import './index-df8bd47e.js';
-import './index-ad5e059d.js';
-import { C as CommonGAssets } from './index-646b9a16.js';
-import './index-fa131ed2.js';
-import { T as Text } from './index-d82a9c5b.js';
-import './index-22e04fca.js';
-import './index-3a65e1d5.js';
-import './index.styles-575ac9a9.js';
-import { u as useTranslations } from './index-4f9c8603.js';
+import './index-78d41796.js';
+import './index-38e3a7e0.js';
+import { C as CommonGAssets } from './index-ef2bcd67.js';
+import './index-9df03ece.js';
+import { T as Text } from './index-5d73c750.js';
+import './index-7fc8c5f0.js';
+import './index-ab82da5d.js';
+import './index.styles-9223124f.js';
+import { u as useTranslations } from './index-5b309dd3.js';
 import '@mantine/hooks';
-import './utils-7a0636fe.js';
-import './index-b4f0bcb5.js';
+import './utils-8d327623.js';
+import './index-22bbdad3.js';
 
-var useStyles = createStyles((theme, { type }) => {
+const sizeMap = {
+    lg: {
+        height: 48,
+    },
+    md: {
+        height: 40,
+    },
+    sm: {
+        height: 32,
+    },
+    xs: {
+        height: 32,
+    },
+};
+var useStyles = createStyles((theme, { type, gap, size }) => {
     const isMarryBaby = theme.other.template === 'mb';
+    const base = sizeMap[size] || {};
+    const height = base.height;
     return {
         root: {},
-        wrapper: Object.assign({ gap: rem(8) }, (type === 'radio' && {
+        wrapper: Object.assign({ gap: rem(gap || 8) }, (type === 'radio' && {
             justifyContent: 'flex-end',
-            gap: rem(24),
+            gap: rem(gap || 24),
         })),
         groupErr: {
             fontSize: rem(14),
@@ -48,10 +64,15 @@ var useStyles = createStyles((theme, { type }) => {
         itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
             ? {
                 position: 'relative',
-                padding: `${rem(6)} ${rem(16)}`,
+                padding: `${rem(2)} ${rem(16)}`,
                 border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
+                backgroundColor: '#fff',
                 borderRadius: rem(isMarryBaby ? 16 : 4),
                 cursor: 'pointer',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height,
                 '&[data-disabled="true"]': {
                     background: theme.colors.gray[1],
                     color: `${theme.colors.gray[4]} !important`,
@@ -60,7 +81,7 @@ var useStyles = createStyles((theme, { type }) => {
                     },
                 },
                 img: {
-                    height: rem(26),
+                    height: rem(size === 'lg' ? 26 : 22),
                 },
             }
             : type === 'radio'
@@ -81,15 +102,18 @@ const GenderOptionControl = (_a) => {
     var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
         male: 'male',
         female: 'female',
-    }, type = 'button', hideLabel } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
+    }, type = 'button', hideLabel, labelTextProps, gap, size = 'md', LabelWrapper } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel", "labelTextProps", "gap", "size", "LabelWrapper"]);
     const { t } = useTranslations();
-    const { classes, cx, theme } = useStyles({ type }, {
+    const { classes, cx, theme } = useStyles({ type, gap, size }, {
         name: 'GenderOptionControl',
         styles,
     });
     const isMarryBaby = theme.other.template === 'mb';
     const [availableValue, setAvailableValue] = useState();
     const ref = useRef(null);
+    const labelProps = !LabelWrapper
+        ? Object.assign({ as: 'label', size: 'p2', weight: 'semiBold', variant: 'primary' }, labelTextProps) : {};
+    const LabelComponent = LabelWrapper || Text;
     const genderOptions = useMemo(() => [
         {
             value: genderValue.male,
@@ -106,7 +130,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: "p2", weight: "semiBold", variant: "primary" }, label ||
+        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(LabelComponent, Object.assign({}, labelProps), label ||
                 (isBaby
                     ? t('tools.selectBabyGender')
                     : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {

package/build/esm/{index-d82a9c5b.js → index-5d73c750.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { _ as __rest } from './tslib.es6-2d13868d.js';
 import React__default, { forwardRef } from 'react';
 import { createStyles, useMantineTheme, Text as Text$1 } from '@mantine/core';
-import { a as GlobalTextStyle, C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-3a65e1d5.js';
+import { a as GlobalTextStyle, C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-ab82da5d.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/build/esm/{index-df8c245a.js → index-5f65f670.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-7a0636fe.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-8d327623.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-2d444edf.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-624a56d9.js';
-import { I as Input } from './index-f6a105d2.js';
+import { _ as __rest } from './tslib.es6-2d13868d.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-c4736c35.js';
+import { I as Input } from './index-578e8156.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-df8bd47e.js';
-import './index-ad5e059d.js';
-import './index-646b9a16.js';
-import './index-fa131ed2.js';
-import './index-d82a9c5b.js';
-import './index-22e04fca.js';
-import './index-3a65e1d5.js';
-import './index.styles-575ac9a9.js';
-import './translationsContext-d082c17b.js';
+import './index-78d41796.js';
+import './index-38e3a7e0.js';
+import './index-ef2bcd67.js';
+import './index-9df03ece.js';
+import './index-5d73c750.js';
+import './index-7fc8c5f0.js';
+import './index-ab82da5d.js';
+import './index.styles-9223124f.js';
+import './translationsContext-0851feb4.js';
 import '@mantine/hooks';
-import './index-b4f0bcb5.js';
+import './index-22bbdad3.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-fbf4f93a.js → index-605d9fed.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-2d444edf.js';
+import { _ as __rest } from './tslib.es6-2d13868d.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-ad5e059d.js';
+import './index-38e3a7e0.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-646b9a16.js';
+import { C as CommonGAssets } from './index-ef2bcd67.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-e6c725d8.js';
-import { T as Text } from './index-2bb8e821.js';
-import { L as LOCALE } from './Locale-c8bad356.js';
-import { f as CentralCarousel } from './index-f6a105d2.js';
+import { I as ImageWrap } from './index-73776e64.js';
+import { T as Text } from './index-0ca9c9d0.js';
+import { L as LOCALE } from './Locale-332634fd.js';
+import { f as CentralCarousel } from './index-578e8156.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-9d3da73b.js → index-63d9871e.js}

@@ -1,27 +1,27 @@
 import React__default, { useState, useMemo, useContext, useEffect, createContext, useRef } from 'react';
-import { B as Button } from './index-64b864d5.js';
-import { H as Heading } from './index-ddb4c8ed.js';
-import { T as Text } from './index-d82a9c5b.js';
-import { c as safeEncodeURI, M as MediaQueries, t as toggleNoScroll, a as getPopupWrapperDom } from './utils-7a0636fe.js';
+import { B as Button } from './index-f580da65.js';
+import { H as Heading } from './index-4782a8d8.js';
+import { T as Text } from './index-5d73c750.js';
+import { c as safeEncodeURI, M as MediaQueries, t as toggleNoScroll, a as getPopupWrapperDom } from './utils-8d327623.js';
 import * as ReactDOM from 'react-dom';
-import { b as callApiWithAuth, e as getApiPath, T as TogetherComponentGlobalContext } from './utils-0933fa68.js';
+import { b as callApiWithAuth, e as getApiPath, T as TogetherComponentGlobalContext } from './utils-d3b5d06e.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { a as __awaiter } from './tslib.es6-2d444edf.js';
-import { I as Input } from './index-624a56d9.js';
-import { u as useTranslations } from './index-4f9c8603.js';
-import { e as formatComment } from './dataTransform-3d88ddcf.js';
-import { M as MAX_IMAGE_UPLOADS, a as DEFAULT_AVATAR_IMG } from './constants-66bc6978.js';
+import { a as __awaiter } from './tslib.es6-2d13868d.js';
+import { I as Input } from './index-c4736c35.js';
+import { u as useTranslations } from './index-5b309dd3.js';
+import { e as formatComment } from './dataTransform-88afc818.js';
+import { M as MAX_IMAGE_UPLOADS, a as DEFAULT_AVATAR_IMG } from './constants-e6fb5102.js';
 import { PATHS } from './togetherApiPaths.js';
-import { j as removeBannedWordWrapper, i as getMentionIdsFromString, k as encodePostContent, u as uploadAndGetSrc } from './post-7e0aa972.js';
-import { C as CardLink } from './index-26053de8.js';
-import { L as Loading } from './index-15ff5be1.js';
-import { U as UserAvatar } from './index-aa6e502e.js';
-import { R as RichTextEditor } from './editor-63c406fb.js';
+import { j as removeBannedWordWrapper, i as getMentionIdsFromString, k as encodePostContent, u as uploadAndGetSrc } from './post-9847d894.js';
+import { C as CardLink } from './index-36e4952a.js';
+import { L as Loading } from './index-e73147d3.js';
+import { U as UserAvatar } from './index-31a4bd53.js';
+import { R as RichTextEditor } from './editor-6584818f.js';
 import { Portal } from '@mantine/core';
 import { FullScreen } from '@hhgtech/icons/other';
-import { P as Popup } from './index-5346503b.js';
-import { C as CloseIcon } from './index-9ada5ff1.js';
+import { P as Popup } from './index-e42f4e1d.js';
+import { C as CloseIcon } from './index-b2f6bce7.js';
 import { ShareBox } from './togetherShareBox.js';
 
 const useImagePicker = (imageFilesProp, onImageFilesChange) => {

package/build/esm/{index-8c362899.js → index-66c9e073.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-75669a5f.js';
+import { C as Container } from './index-2d5690d2.js';
 import dayjs from 'dayjs';
-import './index-df8bd47e.js';
-import './index-f6a105d2.js';
+import './index-78d41796.js';
+import './index-578e8156.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-ad5e059d.js';
-import './index-646b9a16.js';
-import './index-fa131ed2.js';
-import { T as Text } from './index-d82a9c5b.js';
-import './index-22e04fca.js';
-import './index-3a65e1d5.js';
-import './index.styles-575ac9a9.js';
-import './translationsContext-d082c17b.js';
+import './index-38e3a7e0.js';
+import './index-ef2bcd67.js';
+import './index-9df03ece.js';
+import { T as Text } from './index-5d73c750.js';
+import './index-7fc8c5f0.js';
+import './index-ab82da5d.js';
+import './index.styles-9223124f.js';
+import './translationsContext-0851feb4.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-7a0636fe.js';
-import './index-b4f0bcb5.js';
-import { u as useScreenSize } from './index-e6c725d8.js';
+import { M as MediaQueries } from './utils-8d327623.js';
+import './index-22bbdad3.js';
+import { u as useScreenSize } from './index-73776e64.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-92b73e97.js';
-import { M as MarryBabyText } from './index-b6d5e06f.js';
+import { L as Logo } from './index-1edaf70e.js';
+import { M as MarryBabyText } from './index-59883313.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;