@hhgtech/hhg-components 1.29.434-beta-20 → 1.29.435

package/build/esm/{index-8ea739b8.js → index-eb59ab36.js}

@@ -1,36 +1,23 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-79dc13ec.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-cad4c87b.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-442abeeb.js';
-import { C as CustomStylesType, G as GlobalTextStyleNew, F as FontWeight } from './text-98d87494.js';
-import { u as useScreenSize, I as ImageWrap } from './index-be57c8cf.js';
+import { Autocomplete, Image, ActionIcon, Select as Select$1, createStyles, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, Popover as Popover$1, rem, Chip } from '@mantine/core';
+import { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
+import { C as CommonGAssets } from './index-7e11e0d5.js';
+import { u as useScreenSize, I as ImageWrap } from './index-7f77a9f8.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-fdb22d49.js';
-import { t as themeColors } from './index-e70dbbdc.js';
+import { T as Text } from './index-9e8c02dd.js';
+import { t as themeColors } from './index-c9d25309.js';
 import { theme } from './miscTheme.js';
+import { C as CustomStylesType } from './text-a80dbecb.js';
 import cn from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-4c429af6.js';
+import { a as useUniqueId } from './useUniqueId-5d947d77.js';
 import { siteOptions } from './constantsSite.js';
-import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-42ad6c92.js';
-
-var useStyles$4 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
-    const commonStyle = {
-        fontSize: rem(15),
-        lineHeight: rem(24),
-        letterSpacing: '-0.3px',
-    };
-    return {
-        input: Object.assign({ padding: '12px 16px', background: '#ffffff', border: `1px solid ${theme.colors.gray[2]}`, borderRadius: 4 }, (isLeadgenStyle && Object.assign(Object.assign({ borderRadius: 8 }, commonStyle), { color: '#111111', '&::placeholder': Object.assign(Object.assign({}, commonStyle), { fontSize: rem(13), lineHeight: rem(20), letterSpacing: '-0.3px', color: theme.colors.gray[4] }) }))),
-    };
-});
+import { B as Button } from './index-c50bc401.js';
 
 const Select = forwardRef((_a, ref) => {
     var { keepSearch = false } = _a, props = __rest(_a, ["keepSearch"]);
@@ -59,8 +46,7 @@ const _AutoComplete = forwardRef((_a, ref) => {
         : {}))));
 });
 const _Select = forwardRef((_a, ref) => {
-    var { searchValue, onSearchChange, styles } = _a, props = __rest(_a, ["searchValue", "onSearchChange", "styles"]);
-    const { classes } = useStyles$4(undefined, { name: 'MantineSelect', styles });
+    var { searchValue, onSearchChange } = _a, props = __rest(_a, ["searchValue", "onSearchChange"]);
     const [_searchValue, handleSearchChange] = useUncontrolled({
         defaultValue: '',
         value: searchValue,
@@ -69,7 +55,7 @@ const _Select = forwardRef((_a, ref) => {
     const onClear = () => {
         handleSearchChange('');
     };
-    return (React__default.createElement(Select$1, Object.assign({ classNames: { input: classes.input }, ref: ref, rightSection: React__default.createElement(ArrowDown, { size: 18 }), rightSectionProps: { style: { pointerEvents: 'none' } }, size: "md", maxDropdownHeight: 300, onSearchChange: (e) => handleSearchChange(e), searchValue: _searchValue }, props, (props.clearable && (_searchValue === null || _searchValue === void 0 ? void 0 : _searchValue.length) > 0
+    return (React__default.createElement(Select$1, Object.assign({ ref: ref, rightSection: React__default.createElement(ArrowDown, { size: 18 }), rightSectionProps: { style: { pointerEvents: 'none' } }, size: "md", maxDropdownHeight: 300, onSearchChange: (e) => handleSearchChange(e), searchValue: _searchValue }, props, (props.clearable && (_searchValue === null || _searchValue === void 0 ? void 0 : _searchValue.length) > 0
         ? {
             rightSection: (React__default.createElement(ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
                 React__default.createElement(_IconSelect, null))),
@@ -154,7 +140,7 @@ const StyledCarousel = styled(Carousel) `
   }
 `;
 
-var useStyles$3 = createStyles((_theme, _params) => {
+var useStyles$1 = createStyles((_theme, _params) => {
     return {
         root: {
             color: _params.color ||
@@ -167,7 +153,7 @@ var useStyles$3 = createStyles((_theme, _params) => {
 
 const Anchor = (_a) => {
     var { color, styles, className } = _a, rest = __rest(_a, ["color", "styles", "className"]);
-    const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
+    const { classes, cx } = useStyles$1({ color }, { name: 'Anchor', styles });
     return React__default.createElement(Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
 };
 
@@ -241,17 +227,14 @@ const _Breadcrumbs = (_a) => {
 const Breadcrumbs = _Breadcrumbs;
 Breadcrumbs.Item = BreadcrumbItem;
 
-var useStyles$2 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
-    const commonStyle = {
-        fontSize: rem(15),
-        lineHeight: rem(24),
-        letterSpacing: '-0.3px',
-    };
-    return {
-        input: Object.assign({ padding: '12px 16px', background: '#ffffff', border: `1px solid ${theme.colors.gray[2]}`, borderRadius: 4 }, (isLeadgenStyle && Object.assign(Object.assign({ borderRadius: 8 }, commonStyle), { color: '#111111', '&::placeholder': Object.assign(Object.assign({}, commonStyle), { fontSize: rem(15), lineHeight: rem(24), letterSpacing: '-0.3px', color: theme.colors.gray[4] }) }))),
-    };
-});
+const StyledTextArea = styled(Textarea) `
+  .mantine-Textarea-input {
+    padding: 12px 16px;
+    background: #ffffff;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 4px;
+  }
+`;
 
 const StyledAccordion = styled(Accordion$1) `
   .mantine-Accordion-label {
@@ -321,19 +304,6 @@ const FileInput = (props) => {
     return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
 };
 
-var useStyles$1 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
-    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] }) }))),
-    };
-});
-
 const DEBOUNCED_TIME = 300;
 const emotionCache = createEmotionCache({
     key: 'mantine',
@@ -370,385 +340,8 @@ const PasswordInput = forwardRef((props, ref) => {
     return (React__default.createElement(PasswordInput$1, Object.assign({ ref: ref, size: size, visibilityToggleIcon: visibilityToggleIcon }, restProps, { className: `input-control ${(restProps === null || restProps === void 0 ? void 0 : restProps.className) || ''}` })));
 });
 
-const ErrorIcon = (_a) => {
-    var { size } = _a, rest = __rest(_a, ["size"]);
-    const props = Object.assign({ width: size, height: size }, rest);
-    return (React__default.createElement("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-        React__default.createElement("path", { d: "M5.996 6.513q.163 0 .282-.12a.38.38 0 0 0 .118-.28V3.937q0-.15-.118-.268a.4.4 0 0 0-.282-.119.4.4 0 0 0-.281.12.38.38 0 0 0-.119.28v2.175q0 .15.119.269.12.119.281.119m0 1.862a.43.43 0 0 0 .3-.112.4.4 0 0 0 .125-.313.4.4 0 0 0-.125-.3.4.4 0 0 0-.3-.125.4.4 0 0 0-.3.125.4.4 0 0 0-.125.3.4.4 0 0 0 .125.313.43.43 0 0 0 .3.112m0 2.375a4.6 4.6 0 0 1-1.856-.375 4.8 4.8 0 0 1-1.506-1.012A4.8 4.8 0 0 1 1.62 7.857 4.6 4.6 0 0 1 1.246 6q0-.987.375-1.856t1.013-1.506A4.8 4.8 0 0 1 4.14 1.625a4.6 4.6 0 0 1 1.856-.375q.988 0 1.857.375Q8.72 2 9.359 2.638q.637.637 1.012 1.506T10.747 6t-.375 1.857A4.8 4.8 0 0 1 9.36 9.363a4.8 4.8 0 0 1-1.506 1.012q-.87.375-1.857.375", fill: "#F44D2C" })));
-};
-ErrorIcon.defaultProps = {
-    size: 18,
-    color: theme.colors.gray600,
-    activeColor: theme.colors.primaryBase,
-};
-
-const ErrorLabel = ({ label, withIcon }) => {
-    return (React__default.createElement(Flex, { align: 'center', gap: 4 },
-        withIcon && React__default.createElement(ErrorIcon, { size: 12 }),
-        React__default.createElement(Text, { size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } })));
-};
-
-const FloatingLabelControlContext = createContext({});
-
-const cssInputNotShrink = css `
-  height: 100% !important;
-  min-height: calc(var(--container-height, 56px) * 24 / 56);
-  line-height: calc(var(--container-height, 56px) * 24 / 56);
-  border: none !important;
-  border-radius: 0 !important;
-  outline: none !important;
-  box-shadow: none !important;
-  padding: 0;
-  cursor: pointer;
-  opacity: 0;
-
-  ::placeholder {
-    color: ${theme.colors.gray400};
-  }
-`;
-const cssInputShrink = css `
-  height: auto !important;
-  cursor: text;
-  opacity: 1;
-  transition: 0.1s ease-in-out all;
-`;
-const cssLabelNotShrink = css `
-  position: absolute;
-  top: calc(var(--container-height) / 2);
-  left: var(--space-x, 16px);
-  margin: 0;
-  z-index: 1;
-  cursor: pointer;
-  transform: translateY(-50%);
-  transition: 0.125s ease-in all;
-`;
-const cssLabelShrink = css `
-  top: var(--space-y-shrink, 6px);
-  transform: none;
-  transition: 0.125s ease-out all;
-`;
-const cssWrapperInputNotShrink = css `
-  min-height: var(--container-height, 56px);
-  display: flex;
-  align-items: flex-end;
-  border: 1px solid ${theme.colors.gray200};
-  border-radius: 8px;
-  background-color: #fff;
-  padding-inline: var(--space-x, 16px);
-  padding-block: var(--space-y-not-shrink, 16px);
-  cursor: pointer;
-  pointer-events: none;
-
-  &:has(.mantine-Input-rightSection) {
-    padding-right: var(--container-height, 56px);
-  }
-
-  .mantine-Input-icon {
-    display: none;
-  }
-
-  .mantine-NumberInput-control {
-    border-color: ${theme.colors.gray200};
-  }
-`;
-const cssWrapperInputShrink = css `
-  height: auto;
-  min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 6px);
-  cursor: text;
-  pointer-events: auto;
-`;
-const cssInputWrapperError = css `
-  color: ${theme.colors.red800};
-  font-size: 12px;
-  line-height: 1.5;
-`;
-const StyledFloatingLabelControlContainer = styled.div `
-  --space-x: 16px;
-  --space-y-not-shrink: 15px;
-  --space-y-shrink: 6px;
-  --container-height: 56px;
-  --label-not-shrink: 16px;
-  --label-shrink: 12px;
-  --input: 15px;
-
-  position: relative;
-  min-width: 100px;
-  max-width: 100%;
-  display: inline-block;
-
-  .textField_wrapper {
-    display: inline-block;
-    width: 100%;
-    cursor: pointer;
-  }
-
-  .mantine-InputWrapper-root {
-    &[data-invalid='true'] {
-      .mantine-Input-wrapper {
-        border-color: ${theme.colors.red400};
-      }
-    }
-
-    .mantine-Input-wrapper {
-      &:has([data-invalid]) {
-        border-color: ${theme.colors.red400};
-      }
-    }
-  }
-
-  .mantine-InputWrapper-label {
-    ${cssLabelNotShrink}
-  }
-
-  .mantine-Input-wrapper {
-    ${cssWrapperInputNotShrink}
-
-    + .mantine-Popover-dropdown[data-position="bottom-start"] {
-      left: 0 !important;
-    }
-    + .mantine-Popover-dropdown[data-position='top-start'] {
-      top: unset !important;
-      left: 0 !important;
-      bottom: 100% !important;
-    }
-  }
-
-  .mantine-Input-input {
-    ${cssInputNotShrink}
-  }
-
-  &.textField_shrink {
-    .mantine-InputWrapper-label {
-      ${cssLabelShrink}
-    }
-
-    .mantine-Input-wrapper {
-      ${cssWrapperInputShrink}
-      &.mantine-Select-wrapper {
-        .mantine-Select-rightSection {
-          pointer-events: auto !important;
-        }
-      }
-    }
-
-    .mantine-Input-input {
-      ${cssInputShrink}
-    }
-
-    &:has(.PhoneInput) {
-      .mantine-InputWrapper-label {
-        left: var(--space-x, 16px);
-      }
-      .PhoneInput {
-        .PhoneInputInput {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &:focus-within {
-    .mantine-Input-wrapper {
-      transition: 0.25s linear border;
-      border-color: ${theme.colors.primary600};
-      box-shadow: 0 0 4px ${theme.colors.primary200};
-    }
-  }
-
-  .PhoneInput {
-    --phone-select: 75px;
-    --phone-input-space-x: 8px;
-    width: 100%;
-    opacity: 1;
-    border: none;
-    .PhoneInputCountry {
-      background-color: transparent;
-      border: none;
-      padding: 0;
-      width: var(--phone-select, 75px);
-    }
-    .PhoneInputInput {
-      flex: 1;
-      min-width: 0;
-      line-height: 1.5;
-      outline: none !important;
-      border: none;
-      box-shadow: none;
-      font-size: var(--input, 15px);
-      padding: 0 var(--phone-input-space-x, 8px);
-      opacity: 0;
-      color: ${theme.colors.gray800} !important;
-      :focus {
-        color: ${theme.colors.gray800} !important;
-      }
-    }
-  }
-
-  &:has(.PhoneInput) {
-    .mantine-InputWrapper-label {
-      left: calc(
-        var(--space-x, 16px) + var(--phone-select, 75px) +
-          var(--phone-input-space-x, 8px)
-      );
-    }
-  }
-
-  .icon {
-    position: absolute;
-    top: calc(var(--container-height) / 2);
-    right: var(--space-x, 16px);
-    transform: translateY(-50%);
-    transition: 0.125s ease-in all;
-    &.shrink {
-      top: calc(var(--container-height) / 2 - 4px);
-      transform: translateY(0);
-    }
-  }
-`;
-styled.div `
-  &.leadgen-form_checkbox,
-  &.leadgen-form_radio {
-    width: 100%;
-  }
-
-  &.leadgen-form_dropdown {
-    width: calc(50% - 12px);
-  }
-
-  .mantine-InputWrapper-root {
-    display: block;
-  }
-
-  .mantine-InputWrapper-label {
-    margin-bottom: 0.5rem;
-    color: ${theme.colors.gray800};
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  .mantine-Radio-root,
-  .mantine-Checkbox-root {
-    gap: 8px;
-    min-width: calc(50% - 4px);
-
-    // input[type='radio'],
-    // input[type='checkbox'] {
-    //   border-color: ${theme.colors.gray600};
-    //   width: 18px;
-    //   height: 18px;
-    // }
-    // input[type='checkbox'] {
-    //   border-radius: 4px;
-    // }
-
-    // &[data-checked='true'] {
-    //   input[type='radio'],
-    //   input[type='checkbox'] {
-    //     border-color: ${theme.colors.primary600};
-    //   }
-
-    //   input[type='radio'] {
-    //     background-color: white;
-    //   }
-    // }
-
-    .mantine-Checkbox-input {
-      &:checked {
-        border-color: ${theme.colors.primary600};
-      }
-    }
-  }
-
-  .leadgen-choiceContainer {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .mantine-InputWrapper-error {
-    ${cssInputWrapperError}
-  }
-`;
-styled.div `
-  position: absolute;
-  top: calc(var(--container-height) / 2);
-  right: var(--space-x, 16px);
-`;
-
-const FloatingLabelControl = (props) => {
-    const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "children", "className"]);
-    const [shrink, setShrink] = useState(shrinkProps);
-    const [hasIcon, setHasIcon] = useState(false);
-    useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default.createElement(FloatingLabelControlContext.Provider, Object.assign({ value: {
-            shrinkProps,
-            shrink,
-            setShrink,
-            onChangeShrink,
-            hasIcon,
-            setHasIcon,
-        } }, restProps),
-        React__default.createElement(StyledFloatingLabelControlContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
-};
-const FloatingLabelControlControl = (props) => {
-    const { shrink, shrinkProps, onChangeShrink, setShrink, hasIcon } = useContext(FloatingLabelControlContext);
-    const { children } = props;
-    const containerRef = useClickOutside(() => {
-        if (shrinkProps) {
-            return;
-        }
-        setShrink(false);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
-    });
-    // const inputInside = useMemo(() => {
-    //   containerRef.current.querySelectorAll(
-    //     'input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])',
-    //   )
-    // }, [containerRef.current])
-    // console.log({ containerRef })
-    const focusInput = (target) => {
-        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus({ preventScroll: true });
-        }
-    };
-    const onClick = useCallback((e) => {
-        if (shrink) {
-            e.preventDefault();
-            focusInput(e.currentTarget);
-            return;
-        }
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
-        focusInput(e.currentTarget);
-    }, [shrink]);
-    useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default.createElement(Box, { ref: containerRef, onClick: onClick, className: "FloatingLabelControl_wrapper" }, typeof children === 'function'
-        ? children({ shrink: !!shrink, hasIcon })
-        : children));
-};
-const FloatingLabelControlIcon = ({ Icon, }) => {
-    const { shrink, setHasIcon } = useContext(FloatingLabelControlContext);
-    const theme = useMantineTheme();
-    useEffect(() => {
-        Icon && setHasIcon(true);
-    }, []);
-    return Icon ? (React__default.createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
-};
-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"]);
-    const { classes } = useStyles$1(undefined, { name: 'MantineInput', styles });
+    var { value: _value, onChange: _onChange, onChangeRaw, maxLength } = _a, props = __rest(_a, ["value", "onChange", "onChangeRaw", "maxLength"]);
     const [value, setValue] = useState(_value || '');
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
     useEffect(() => {
@@ -757,29 +350,14 @@ const InputWrapper = forwardRef((_a, ref) => {
     useEffect(() => {
         setValue(_value);
     }, [_value]);
-    const commonProps = Object.assign(Object.assign({ classNames: {
-            input: classes.input,
-        }, ref, size: 'md', onChange: (event) => {
+    return (React__default.createElement(TextInput, Object.assign({ ref: ref, size: "md", onChange: (event) => {
             if (typeof maxLength === 'number' &&
                 event.currentTarget.value.length > maxLength) {
                 return;
             }
             onChangeRaw === null || onChangeRaw === void 0 ? void 0 : onChangeRaw(event);
             setValue(event.currentTarget.value);
-        }, value,
-        label,
-        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) => ({
-                    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,
-        } })));
+        }, value: value }, props, { maxLength: maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` })));
 });
 const Input = InputWrapper;
 Input.File = FileInput;
@@ -1641,10 +1219,10 @@ const countriesDefault = Object.values(siteOptions).reduce((countries, { phoneCo
     return countries;
 }, []);
 
-var styles = {"phoneInput":"i-9Ibox","error":"YDWHh9b","selectedCountry":"_87SIJ95"};
+var styles = {"phoneInput":"i-9Ibox","error":"YDWHh9b"};
 
 const PhoneForwardRef = (props, ref) => {
-    const { isError, defaultCountry, selectedCountry, countries = countriesDefault, countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, flagComponent: flagComponentProps, arrowComponent: arrowComponentProps, withFloatingLabel, className, inputId, label, error } = props, inputProps = __rest(props, ["isError", "defaultCountry", "selectedCountry", "countries", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "flagComponent", "arrowComponent", "withFloatingLabel", "className", "inputId", "label", "error"]);
+    const { isError, defaultCountry, countries = countriesDefault, countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, flagComponent: flagComponentProps, arrowComponent: arrowComponentProps, className, inputId } = props, inputProps = __rest(props, ["isError", "defaultCountry", "countries", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "flagComponent", "arrowComponent", "className", "inputId"]);
     const [value, setValue] = useState(defaultValue || valueProps);
     const [PhoneInputUtils, setPhoneInputUtils] = useState(null);
     const flagComponent = useCallback((props) => {
@@ -1685,28 +1263,14 @@ const PhoneForwardRef = (props, ref) => {
     }, []);
     if (!PhoneInputUtils)
         return null;
-    const commonProps = Object.assign({ ref,
-        defaultValue,
-        label,
-        value,
-        onChange,
-        countries, defaultCountry: defaultCountry || selectedCountry, countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: cn(styles.phoneInput, {
+    return (React__default.createElement(PhoneInputUtils.default
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    , Object.assign({ 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref: ref, defaultValue: defaultValue, value: value, onChange: onChange, countries: countries, defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: cn(styles.phoneInput, {
             isError,
             [styles.error]: isError,
-            [styles.selectedCountry]: selectedCountry,
-        }, className), flagUrl: undefined, flagComponent, countrySelectProps: { arrowComponent }, id: inputId }, inputProps);
-    if (withFloatingLabel) {
-        return (React__default.createElement(FloatingLabelControl, { shrink: !!value },
-            React__default.createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__default.createElement(Input$1.Wrapper, { size: "md", label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), 
-                // data-invalid={!!error}
-                // labelProps={{ htmlFor: htmlForId }}
-                inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error && React__default.createElement(ErrorLabel, { label: error }) },
-                React__default.createElement(Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
-                        '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: FontWeight.halfBold }),
-                    }) },
-                    React__default.createElement(PhoneInputUtils.default, Object.assign({}, commonProps))))))));
-    }
-    return React__default.createElement(PhoneInputUtils.default, Object.assign({}, commonProps));
+        }, className), flagUrl: undefined, flagComponent: flagComponent, countrySelectProps: { arrowComponent }, id: inputId }, inputProps)));
 };
 const Phone = forwardRef(PhoneForwardRef);
 
@@ -1789,4 +1353,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Anchor 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, Avatar as a, AspectRatio as b, CentralCarousel as c, Checkbox as d, ChipButton as e, PasswordInput as f, ErrorBoundary as g, StyledSliderWrapper as h, StyledSlider as i, Accordion as j, Carousel as k, emotionCache as l, PhoneInput as m, Popover as n, ErrorLabel as o, styles as s, useStyles$2 as u };
+export { Anchor as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorBoundary as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Avatar as a, AspectRatio as b, CentralCarousel as c, Checkbox as d, ChipButton as e, PasswordInput as f, StyledTextArea as g, StyledSliderWrapper as h, StyledSlider as i, Accordion as j, Carousel as k, emotionCache as l, PhoneInput as m, Popover as n, styles as s };

package/build/esm/{index-1d546bdf.js → index-f32ab4f6.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-79dc13ec.js';
+import { _ as __rest } from './tslib.es6-cad4c87b.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
 import { createStyles, rem, Tabs as Tabs$1, ScrollArea } from '@mantine/core';
-import { B as Button } from './index-42ad6c92.js';
-import { T as Text } from './index-fdb22d49.js';
+import { B as Button } from './index-c50bc401.js';
+import { T as Text } from './index-9e8c02dd.js';
 
 var useStyles = createStyles((theme, params) => {
     const { variant } = params;

package/build/esm/{index-b43dd0fc.js → index-f643c9df.js}

@@ -1,25 +1,25 @@
-import { _ as __rest } from './tslib.es6-79dc13ec.js';
+import { _ as __rest } from './tslib.es6-cad4c87b.js';
 import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
 import { useMantineTheme, Group, Box, Flex, Tooltip } from '@mantine/core';
 import { format } from 'date-fns';
-import { L as LastPeriod } from './LastPeriod-0b1085b3.js';
-import { L as LOCALE } from './Locale-d554bd2b.js';
+import { L as LastPeriod } from './LastPeriod-a87b2d37.js';
+import { L as LOCALE } from './Locale-04ca1b16.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } from './index-8ea739b8.js';
-import { D as DatePicker } from './index-cab4e133.js';
-import { T as Text } from './index-fdb22d49.js';
-import './index-42ad6c92.js';
-import './index.styles-ea058728.js';
-import { u as useTranslations } from './index-c8f9fe6a.js';
+import { R as Radio, I as Input, S as Select } from './index-eb59ab36.js';
+import { D as DatePicker } from './index-6f0cf5fe.js';
+import { T as Text } from './index-9e8c02dd.js';
+import './index-c50bc401.js';
+import './index.styles-8250af6c.js';
+import { u as useTranslations } from './index-c118b3d8.js';
 import '@mantine/hooks';
-import './index-e70dbbdc.js';
-import './text-98d87494.js';
-import './utils-05b20dd8.js';
-import './index-1d546bdf.js';
-import { H as HealthToolFormWrapper } from './index-3deab180.js';
+import './index-c9d25309.js';
+import './text-a80dbecb.js';
+import './utils-ef5b252f.js';
+import './index-f32ab4f6.js';
+import { H as HealthToolFormWrapper } from './index-910a2e45.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-229d6eda.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-5c71ffdd.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {

package/build/esm/{index-d814a64f.js → index-f8c2b8fe.js}

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

package/build/esm/{index-019a730d.js → index-fe927d80.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { B as Button } from './index-5a57746b.js';
-import { u as useTranslations } from './index-c8f9fe6a.js';
+import { B as Button } from './index-9316837d.js';
+import { u as useTranslations } from './index-c118b3d8.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';