@hhgtech/hhg-components 1.29.435 → 1.29.436

package/build/{index-e9f494fb.js → index-600def91.js}

@@ -1,24 +1,25 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b33ba902.js');
+var tslib_es6 = require('./tslib.es6-7e3d6fb1.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
-var index = require('./index-92e5bd77.js');
-var index$2 = require('./index-db78eb88.js');
+var index = require('./index-fb09a2e1.js');
+var text = require('./text-0ef2e111.js');
+var index$2 = require('./index-c9587556.js');
 var styled = require('@emotion/styled');
 var carousel = require('@mantine/carousel');
-var index$1 = require('./index-c96f8955.js');
-var index$3 = require('./index-6da02f6c.js');
+var index$1 = require('./index-89215d97.js');
+var index$3 = require('./index-e3b4098c.js');
 var miscTheme = require('./miscTheme.js');
-var text = require('./text-e045e4ff.js');
 var cn = require('classnames');
 var uuid = require('uuid');
-var useUniqueId = require('./useUniqueId-a8bec4a2.js');
+var useUniqueId = require('./useUniqueId-919fc1bf.js');
 var constantsSite = require('./constantsSite.js');
+var react = require('@emotion/react');
 var core$1 = require('@hhgtech/icons/core');
-var index$4 = require('./index-ecb51cb3.js');
+var index$4 = require('./index-16214f9f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -44,6 +45,18 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var cn__default = /*#__PURE__*/_interopDefault(cn);
 
+var useStyles$4 = core.createStyles((theme) => {
+    const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
+    const commonStyle = {
+        fontSize: core.rem(15),
+        lineHeight: core.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: core.rem(13), lineHeight: core.rem(20), letterSpacing: '-0.3px', color: theme.colors.gray[4] }) }))),
+    };
+});
+
 const Select = React.forwardRef((_a, ref) => {
     var { keepSearch = false } = _a, props = tslib_es6.__rest(_a, ["keepSearch"]);
     if (keepSearch) {
@@ -71,7 +84,8 @@ const _AutoComplete = React.forwardRef((_a, ref) => {
         : {}))));
 });
 const _Select = React.forwardRef((_a, ref) => {
-    var { searchValue, onSearchChange } = _a, props = tslib_es6.__rest(_a, ["searchValue", "onSearchChange"]);
+    var { searchValue, onSearchChange, styles } = _a, props = tslib_es6.__rest(_a, ["searchValue", "onSearchChange", "styles"]);
+    const { classes } = useStyles$4(undefined, { name: 'MantineSelect', styles });
     const [_searchValue, handleSearchChange] = hooks.useUncontrolled({
         defaultValue: '',
         value: searchValue,
@@ -80,7 +94,7 @@ const _Select = React.forwardRef((_a, ref) => {
     const onClear = () => {
         handleSearchChange('');
     };
-    return (React__namespace["default"].createElement(core.Select, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(other.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__namespace["default"].createElement(core.Select, Object.assign({ classNames: { input: classes.input }, ref: ref, rightSection: React__namespace["default"].createElement(other.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__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
                 React__namespace["default"].createElement(_IconSelect, null))),
@@ -165,7 +179,7 @@ const StyledCarousel = styled__default["default"](Carousel) `
   }
 `;
 
-var useStyles$1 = core.createStyles((_theme, _params) => {
+var useStyles$3 = core.createStyles((_theme, _params) => {
     return {
         root: {
             color: _params.color ||
@@ -178,7 +192,7 @@ var useStyles$1 = core.createStyles((_theme, _params) => {
 
 const Anchor = (_a) => {
     var { color, styles, className } = _a, rest = tslib_es6.__rest(_a, ["color", "styles", "className"]);
-    const { classes, cx } = useStyles$1({ color }, { name: 'Anchor', styles });
+    const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
     return React__namespace["default"].createElement(index$1.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
 };
 
@@ -252,14 +266,17 @@ const _Breadcrumbs = (_a) => {
 const Breadcrumbs = _Breadcrumbs;
 Breadcrumbs.Item = BreadcrumbItem;
 
-const StyledTextArea = styled__default["default"](core.Textarea) `
-  .mantine-Textarea-input {
-    padding: 12px 16px;
-    background: #ffffff;
-    border: 1px solid ${miscTheme.theme.colors.gray200};
-    border-radius: 4px;
-  }
-`;
+var useStyles$2 = core.createStyles((theme) => {
+    const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
+    const commonStyle = {
+        fontSize: core.rem(15),
+        lineHeight: core.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: core.rem(15), lineHeight: core.rem(24), letterSpacing: '-0.3px', color: theme.colors.gray[4] }) }))),
+    };
+});
 
 const StyledAccordion = styled__default["default"](core.Accordion) `
   .mantine-Accordion-label {
@@ -329,6 +346,19 @@ const FileInput = (props) => {
     return React__namespace["default"].createElement(core.FileInput, Object.assign({ size: "md" }, props));
 };
 
+var useStyles$1 = core.createStyles((theme) => {
+    const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
+    const commonStyle = {
+        fontSize: core.rem(15),
+        lineHeight: core.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 = core.createEmotionCache({
     key: 'mantine',
@@ -365,8 +395,385 @@ const PasswordInput = React.forwardRef((props, ref) => {
     return (React__namespace["default"].createElement(core.PasswordInput, 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 = tslib_es6.__rest(_a, ["size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__namespace["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__namespace["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: miscTheme.theme.colors.gray600,
+    activeColor: miscTheme.theme.colors.primaryBase,
+};
+
+const ErrorLabel = ({ label, withIcon }) => {
+    return (React__namespace["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+        withIcon && React__namespace["default"].createElement(ErrorIcon, { size: 12 }),
+        React__namespace["default"].createElement(index$1.Text, { size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } })));
+};
+
+const FloatingLabelControlContext = React.createContext({});
+
+const cssInputNotShrink = react.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: ${miscTheme.theme.colors.gray400};
+  }
+`;
+const cssInputShrink = react.css `
+  height: auto !important;
+  cursor: text;
+  opacity: 1;
+  transition: 0.1s ease-in-out all;
+`;
+const cssLabelNotShrink = react.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 = react.css `
+  top: var(--space-y-shrink, 6px);
+  transform: none;
+  transition: 0.125s ease-out all;
+`;
+const cssWrapperInputNotShrink = react.css `
+  min-height: var(--container-height, 56px);
+  display: flex;
+  align-items: flex-end;
+  border: 1px solid ${miscTheme.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: ${miscTheme.theme.colors.gray200};
+  }
+`;
+const cssWrapperInputShrink = react.css `
+  height: auto;
+  min-height: var(--container-height, 56px);
+  padding-block: var(--space-y-shrink, 6px);
+  cursor: text;
+  pointer-events: auto;
+`;
+const cssInputWrapperError = react.css `
+  color: ${miscTheme.theme.colors.red800};
+  font-size: 12px;
+  line-height: 1.5;
+`;
+const StyledFloatingLabelControlContainer = styled__default["default"].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: ${miscTheme.theme.colors.red400};
+      }
+    }
+
+    .mantine-Input-wrapper {
+      &:has([data-invalid]) {
+        border-color: ${miscTheme.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: ${miscTheme.theme.colors.primary600};
+      box-shadow: 0 0 4px ${miscTheme.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: ${miscTheme.theme.colors.gray800} !important;
+      :focus {
+        color: ${miscTheme.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__default["default"].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: ${miscTheme.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: ${miscTheme.theme.colors.gray600};
+    //   width: 18px;
+    //   height: 18px;
+    // }
+    // input[type='checkbox'] {
+    //   border-radius: 4px;
+    // }
+
+    // &[data-checked='true'] {
+    //   input[type='radio'],
+    //   input[type='checkbox'] {
+    //     border-color: ${miscTheme.theme.colors.primary600};
+    //   }
+
+    //   input[type='radio'] {
+    //     background-color: white;
+    //   }
+    // }
+
+    .mantine-Checkbox-input {
+      &:checked {
+        border-color: ${miscTheme.theme.colors.primary600};
+      }
+    }
+  }
+
+  .leadgen-choiceContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .mantine-InputWrapper-error {
+    ${cssInputWrapperError}
+  }
+`;
+styled__default["default"].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 = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "children", "className"]);
+    const [shrink, setShrink] = React.useState(shrinkProps);
+    const [hasIcon, setHasIcon] = React.useState(false);
+    React.useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__namespace["default"].createElement(FloatingLabelControlContext.Provider, Object.assign({ value: {
+            shrinkProps,
+            shrink,
+            setShrink,
+            onChangeShrink,
+            hasIcon,
+            setHasIcon,
+        } }, restProps),
+        React__namespace["default"].createElement(StyledFloatingLabelControlContainer, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
+};
+const FloatingLabelControlControl = (props) => {
+    const { shrink, shrinkProps, onChangeShrink, setShrink, hasIcon } = React.useContext(FloatingLabelControlContext);
+    const { children } = props;
+    const containerRef = hooks.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 = React.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]);
+    React.useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__namespace["default"].createElement(core.Box, { ref: containerRef, onClick: onClick, className: "FloatingLabelControl_wrapper" }, typeof children === 'function'
+        ? children({ shrink: !!shrink, hasIcon })
+        : children));
+};
+const FloatingLabelControlIcon = ({ Icon, }) => {
+    const { shrink, setHasIcon } = React.useContext(FloatingLabelControlContext);
+    const theme = core.useMantineTheme();
+    React.useEffect(() => {
+        Icon && setHasIcon(true);
+    }, []);
+    return Icon ? (React__namespace["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 = React.forwardRef((_a, ref) => {
-    var { value: _value, onChange: _onChange, onChangeRaw, maxLength } = _a, props = tslib_es6.__rest(_a, ["value", "onChange", "onChangeRaw", "maxLength"]);
+    var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = tslib_es6.__rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
+    const { classes } = useStyles$1(undefined, { name: 'MantineInput', styles });
     const [value, setValue] = React.useState(_value || '');
     const [debounced] = hooks.useDebouncedValue(value, DEBOUNCED_TIME);
     React.useEffect(() => {
@@ -375,14 +782,29 @@ const InputWrapper = React.forwardRef((_a, ref) => {
     React.useEffect(() => {
         setValue(_value);
     }, [_value]);
-    return (React__namespace["default"].createElement(core.TextInput, Object.assign({ ref: ref, size: "md", onChange: (event) => {
+    const commonProps = Object.assign(Object.assign({ classNames: {
+            input: classes.input,
+        }, 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: value }, props, { maxLength: maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` })));
+        }, value,
+        label,
+        error }, props), { maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` });
+    if (withFloatingLabel) {
+        return (React__namespace["default"].createElement(FloatingLabelControl, { shrink: !!value },
+            React__namespace["default"].createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__namespace["default"].createElement(core.TextInput, Object.assign({}, commonProps, { classNames: {
+                    input: classes.input,
+                }, error: error && React__namespace["default"].createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__namespace["default"].createElement(index$1.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
+                    input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
+                }) }))))));
+    }
+    return (React__namespace["default"].createElement(core.TextInput, Object.assign({}, commonProps, { classNames: {
+            input: classes.input,
+        } })));
 });
 const Input = InputWrapper;
 Input.File = FileInput;
@@ -1244,10 +1666,10 @@ const countriesDefault = Object.values(constantsSite.siteOptions).reduce((countr
     return countries;
 }, []);
 
-var styles = {"phoneInput":"i-9Ibox","error":"YDWHh9b"};
+var styles = {"phoneInput":"i-9Ibox","error":"YDWHh9b","selectedCountry":"_87SIJ95"};
 
 const PhoneForwardRef = (props, ref) => {
-    const { isError, defaultCountry, countries = countriesDefault, countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, flagComponent: flagComponentProps, arrowComponent: arrowComponentProps, className, inputId } = props, inputProps = tslib_es6.__rest(props, ["isError", "defaultCountry", "countries", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "flagComponent", "arrowComponent", "className", "inputId"]);
+    const { isError, defaultCountry, selectedCountry, countries = countriesDefault, countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, flagComponent: flagComponentProps, arrowComponent: arrowComponentProps, withFloatingLabel, className, inputId, label, error } = props, inputProps = tslib_es6.__rest(props, ["isError", "defaultCountry", "selectedCountry", "countries", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "flagComponent", "arrowComponent", "withFloatingLabel", "className", "inputId", "label", "error"]);
     const [value, setValue] = React.useState(defaultValue || valueProps);
     const [PhoneInputUtils, setPhoneInputUtils] = React.useState(null);
     const flagComponent = React.useCallback((props) => {
@@ -1288,14 +1710,28 @@ const PhoneForwardRef = (props, ref) => {
     }, []);
     if (!PhoneInputUtils)
         return null;
-    return (React__namespace["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__default["default"](styles.phoneInput, {
+    const commonProps = Object.assign({ ref,
+        defaultValue,
+        label,
+        value,
+        onChange,
+        countries, defaultCountry: defaultCountry || selectedCountry, countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: cn__default["default"](styles.phoneInput, {
             isError,
             [styles.error]: isError,
-        }, className), flagUrl: undefined, flagComponent: flagComponent, countrySelectProps: { arrowComponent }, id: inputId }, inputProps)));
+            [styles.selectedCountry]: selectedCountry,
+        }, className), flagUrl: undefined, flagComponent, countrySelectProps: { arrowComponent }, id: inputId }, inputProps);
+    if (withFloatingLabel) {
+        return (React__namespace["default"].createElement(FloatingLabelControl, { shrink: !!value },
+            React__namespace["default"].createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__namespace["default"].createElement(core.Input.Wrapper, { size: "md", label: React__namespace["default"].createElement(index$1.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), 
+                // data-invalid={!!error}
+                // labelProps={{ htmlFor: htmlForId }}
+                inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error && React__namespace["default"].createElement(ErrorLabel, { label: error }) },
+                React__namespace["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
+                        '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
+                    }) },
+                    React__namespace["default"].createElement(PhoneInputUtils.default, Object.assign({}, commonProps))))))));
+    }
+    return React__namespace["default"].createElement(PhoneInputUtils.default, Object.assign({}, commonProps));
 };
 const Phone = React.forwardRef(PhoneForwardRef);
 
@@ -1390,6 +1826,8 @@ exports.Checkbox = Checkbox;
 exports.ChipButton = ChipButton;
 exports.DEBOUNCED_TIME = DEBOUNCED_TIME;
 exports.ErrorBoundary = ErrorBoundary;
+exports.ErrorIcon = ErrorIcon;
+exports.ErrorLabel = ErrorLabel;
 exports.Flag = Flag;
 exports.Input = Input;
 exports.NumberInput = NumberInput;
@@ -1402,6 +1840,6 @@ exports.Radio = Radio;
 exports.Select = Select;
 exports.StyledSlider = StyledSlider;
 exports.StyledSliderWrapper = StyledSliderWrapper;
-exports.StyledTextArea = StyledTextArea;
 exports.emotionCache = emotionCache;
 exports.styles = styles;
+exports.useStyles = useStyles$2;

package/build/{index-7d502705.js → index-68cea447.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b33ba902.js');
+var tslib_es6 = require('./tslib.es6-7e3d6fb1.js');
 var React = require('react');
-var index = require('./index-ecb51cb3.js');
+var index = require('./index-16214f9f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-6fe3211e.js → index-69ed5e37.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b33ba902.js');
+var tslib_es6 = require('./tslib.es6-7e3d6fb1.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index = require('./index-ecb51cb3.js');
-var index$1 = require('./index-c96f8955.js');
+var index = require('./index-16214f9f.js');
+var index$1 = require('./index-89215d97.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }