@jobber/components 7.13.1 → 7.14.0

package/dist/FormFieldPostFix-es.js

@@ -0,0 +1,238 @@
+import React__default, { useState, useEffect, useRef } from 'react';
+import { useShowClear } from '@jobber/hooks';
+import { AnimatePresence, motion } from 'framer-motion';
+import { tokens } from '@jobber/design';
+import classnames from 'classnames';
+import { B as Button } from './Button-es.js';
+import { I as Icon } from './Icon-es.js';
+import { T as Text } from './Text-es.js';
+import { u as useFormFieldFocus } from './useFormFieldFocus-es.js';
+import { I as InputValidation } from './InputValidation-es.js';
+import { S as Spinner } from './Spinner-es.js';
+
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function AffixLabel({ label, variation = "prefix", labelRef, }) {
+    const affixLabelClass = classnames(formFieldStyles.affixLabel, {
+        [formFieldStyles.suffix]: variation === "suffix",
+    });
+    if (!label)
+        return null;
+    return (React__default.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
+}
+function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
+    const affixIconClass = classnames(formFieldStyles.affixIcon, {
+        [formFieldStyles.suffix]: variation === "suffix",
+    });
+    const iconSize = size === "small" ? "small" : "base";
+    if (!icon)
+        return null;
+    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(Button
+    /**
+     * We can cast the ariaLabel here as a `Suffix`
+     * requires an ariaLabel if there is an action
+     */
+    , { 
+        /**
+         * We can cast the ariaLabel here as a `Suffix`
+         * requires an ariaLabel if there is an action
+         */
+        ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+}
+
+function FormFieldDescription({ id, description, visible = true, }) {
+    if (!visible)
+        return null;
+    const useStringFormat = !description || typeof description === "string";
+    return (React__default.createElement("div", { id: id, className: formFieldStyles.description }, useStringFormat ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description)));
+}
+
+var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
+
+function ClearAction({ onClick, visible, }) {
+    if (!visible)
+        return null;
+    return (React__default.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
+        React__default.createElement(Icon, { name: "remove", size: "small" })));
+}
+
+function useToolbar(props) {
+    const isToolbarVisible = props.toolbar !== undefined &&
+        (props.toolbarVisibility === "always" || props.focused);
+    const toolbarAnimationEnd = { opacity: 0, height: 0 };
+    const toolbarAnimationStart = { opacity: 1, height: "auto" };
+    return {
+        isToolbarVisible,
+        toolbarAnimationEnd,
+        toolbarAnimationStart,
+    };
+}
+
+function useIsSafari() {
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator)
+        ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+        : false;
+}
+
+/**
+ * Hook for getting the correct styles for the FormField and its children
+ */
+function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, showMiniLabel = true, }) {
+    const isSafari = useIsSafari();
+    const wrapperClasses = classnames(formFieldStyles.wrapper, size && formFieldStyles[size], align && formFieldStyles[align], {
+        [formFieldStyles.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
+            (placeholder && type === "select") ||
+            // Naively assume that if the the type is tel, it is the InputPhoneNumber
+            (placeholder && type === "tel"),
+        [formFieldStyles.text]: type === "textarea" || type === "text",
+        [formFieldStyles.textarea]: type === "textarea",
+        [formFieldStyles.safari]: isSafari && type === "textarea",
+        [formFieldStyles.select]: type === "select",
+        [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [formFieldStyles.disabled]: disabled,
+        [formFieldStyles.maxLength]: maxLength,
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+    });
+    const containerClasses = classnames(formFieldStyles.container, {
+        [formFieldStyles.inline]: inline,
+    });
+    const wrapperInlineStyle = {
+        ["--formField-maxLength"]: maxLength || max,
+    };
+    const [labelStyle, setLabelStyle] = useState({
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    });
+    useEffect(() => {
+        var _a, _b;
+        setLabelStyle(getAffixPaddding({
+            value,
+            type,
+            prefixWidth: ((_a = prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
+            suffixWidth: ((_b = suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
+        }));
+    }, [value]);
+    return {
+        inputStyle: formFieldStyles.input,
+        wrapperClasses,
+        containerClasses,
+        wrapperInlineStyle,
+        labelStyle,
+        setLabelStyle,
+    };
+}
+function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
+    const hasValue = value !== "";
+    const newPadding = {
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    };
+    // Naively assume that if the the type is tel, it is the InputPhoneNumber
+    if (type === "tel")
+        return newPadding;
+    if (prefixWidth && !hasValue) {
+        newPadding.paddingLeft = offset(prefixWidth);
+    }
+    if (suffixWidth && !hasValue) {
+        newPadding.paddingRight = offset(suffixWidth);
+    }
+    function offset(width) {
+        return `calc(${width}px + var(--space-smallest)`;
+    }
+    return newPadding;
+}
+
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
+    const prefixRef = useRef(null);
+    const suffixRef = useRef(null);
+    const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
+        align,
+        max,
+        maxLength,
+        prefixRef,
+        suffixRef,
+        placeholder,
+        value,
+        invalid,
+        error,
+        type,
+        disabled,
+        inline,
+        size,
+        showMiniLabel,
+    });
+    const { focused } = useFormFieldFocus({ wrapperRef });
+    const showClear = useShowClear({
+        clearable,
+        multiline: type === "textarea",
+        focused,
+        hasValue: Boolean(value),
+        disabled,
+        readonly,
+    });
+    const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
+        focused,
+        toolbar,
+        toolbarVisibility,
+    });
+    return (React__default.createElement("div", { className: containerClasses },
+        React__default.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
+            React__default.createElement(FormFieldInputHorizontalWrapper, null,
+                React__default.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React__default.createElement(FormFieldInputWrapperStyles, null,
+                    (showMiniLabel || !value) && (React__default.createElement(FormFieldLabel, { htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+                            ? labelStyle
+                            : undefined }, placeholder)),
+                    React__default.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
+                    React__default.createElement(FormFieldWrapperMain, null, children),
+                    React__default.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
+                React__default.createElement(ClearAction, { onClick: onClear, visible: showClear }),
+                React__default.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
+            React__default.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
+        React__default.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
+        React__default.createElement(InputValidation, { message: error, visible: !!error && !inline })));
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldInputHorizontalWrapper({ children, }) {
+    return React__default.createElement("div", { className: formFieldStyles.horizontalWrapper }, children);
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldInputWrapperStyles({ children, }) {
+    return React__default.createElement("div", { className: formFieldStyles.inputWrapper }, children);
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldWrapperMain({ children, tabIndex = -1, }) {
+    return (React__default.createElement("div", { className: formFieldStyles.childrenWrapper, tabIndex: tabIndex }, children));
+}
+function FormFieldLabel({ children, htmlFor, style, external = false, }) {
+    if (!children)
+        return null;
+    return (React__default.createElement("label", { className: external ? formFieldStyles.externalLabel : formFieldStyles.label, htmlFor: htmlFor, style: style }, children));
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
+    return (React__default.createElement(AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React__default.createElement(motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+            duration: tokens["timing-base"] / 1000,
+            ease: "easeInOut",
+        }, tabIndex: -1 },
+        React__default.createElement("div", { className: formFieldStyles.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+}
+
+function FormFieldPostFix({ variation, visible = true, className, }) {
+    if (!visible)
+        return null;
+    return (React__default.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
+}
+
+export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, FormFieldInputWrapperStyles as a, FormFieldLabel as b, FormFieldWrapper as c, FormFieldWrapperMain as d, FormFieldWrapperToolbar as e, AffixLabel as f, formFieldStyles as g, FormFieldPostFix as h, useFormFieldWrapperStyles as u };

package/dist/InputDate/index.cjs

@@ -33,7 +33,7 @@ require('../_setToString-cjs.js');
 require('../AtlantisContext-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');
-require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('framer-motion');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
@@ -41,6 +41,7 @@ require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('react-hook-form');
+require('../mergeRefs-cjs.js');
 require('../filterDataAttributes-cjs.js');
 
 

package/dist/InputDate/index.mjs

@@ -31,7 +31,7 @@ import '../_setToString-es.js';
 import '../AtlantisContext-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';
-import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import 'framer-motion';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
@@ -39,4 +39,5 @@ import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'react-hook-form';
+import '../mergeRefs-es.js';
 import '../filterDataAttributes-es.js';

package/dist/InputEmail/index.cjs

@@ -3,6 +3,7 @@
 var InputEmail = require('../InputEmail-cjs.js');
 require('react');
 require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');

package/dist/InputEmail/index.mjs

@@ -1,6 +1,7 @@
 export { I as InputEmail } from '../InputEmail-es.js';
 import 'react';
 import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';

package/dist/InputEmail-cjs.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var mergeRefs = require('./mergeRefs-cjs.js');
+var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
 require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
@@ -99,9 +100,9 @@ const InputEmail = React.forwardRef(function InputEmailInternal(props, ref) {
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
-    return (React.createElement(mergeRefs.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_a = props.clearable) !== null && _a !== void 0 ? _a : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: props.name },
-        React.createElement("input", Object.assign({ id: id, name: props.name, type: "email", ref: mergedRef, className: mergeRefs.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
-        React.createElement(mergeRefs.FormFieldPostFix, { variation: "spinner", visible: (_b = props.loading) !== null && _b !== void 0 ? _b : false })));
+    return (React.createElement(FormFieldPostFix.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_a = props.clearable) !== null && _a !== void 0 ? _a : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: props.name },
+        React.createElement("input", Object.assign({ id: id, name: props.name, type: "email", ref: mergedRef, className: FormFieldPostFix.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
+        React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "spinner", visible: (_b = props.loading) !== null && _b !== void 0 ? _b : false })));
 });
 
 exports.InputEmail = InputEmail;

package/dist/InputEmail-es.js

@@ -1,5 +1,6 @@
 import React__default, { useRef, forwardRef, useId } from 'react';
-import { m as mergeRefs, c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix } from './mergeRefs-es.js';
+import { m as mergeRefs } from './mergeRefs-es.js';
+import { c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix } from './FormFieldPostFix-es.js';
 import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';

package/dist/InputNumber/index.cjs

@@ -14,11 +14,12 @@ require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
 require('../Typography-cjs.js');
-require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
+require('../mergeRefs-cjs.js');
 require('react-router-dom');
 
 /*

package/dist/InputNumber/index.mjs

@@ -12,11 +12,12 @@ import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
 import '../Typography-es.js';
-import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
+import '../mergeRefs-es.js';
 import 'react-router-dom';
 
 /*

package/dist/InputPassword/index.cjs

@@ -3,7 +3,7 @@
 var InputPassword = require('../InputPassword-cjs.js');
 require('react');
 require('../FormField-cjs.js');
-require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
@@ -19,6 +19,7 @@ require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('react-hook-form');
+require('../mergeRefs-cjs.js');
 
 
 

package/dist/InputPassword/index.mjs

@@ -1,7 +1,7 @@
 export { I as InputPassword } from '../InputPassword-es.js';
 import 'react';
 import '../FormField-es.js';
-import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
@@ -17,3 +17,4 @@ import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'react-hook-form';
+import '../mergeRefs-es.js';

package/dist/InputPhoneNumber/InputPhoneNumber.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { type InputPhoneNumberLegacyProps } from "./InputPhoneNumber.types";
-export declare function InputPhoneNumber({ required, ...props }: InputPhoneNumberLegacyProps): React.JSX.Element;
+import type { InputPhoneNumberProps } from "./InputPhoneNumber.types";
+export declare const InputPhoneNumber: React.ForwardRefExoticComponent<InputPhoneNumberProps & React.RefAttributes<HTMLInputElement>>;

package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts

@@ -1,25 +1,7 @@
 import type { InputMaskProps } from "./InputMask";
-import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
-/**
- * @deprecated Use the v2 InputPhoneNumber component instead (version={2}).
- */
-export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps, "align">, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "validations" | "readonly" | "prefix" | "suffix"> {
-    readonly value: string;
-    readonly onChange: (value: string) => void;
-    /**
-     * A pattern to specify the format to display the phone number in.
-     * For example if you want to display the format for [Denmark](https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers#Denmark)
-     * you could set it to `** ** ** **`
-     * @default "(***) ***-****"
-     */
-    readonly pattern?: InputMaskProps["pattern"];
-    /**
-     * Shows a "required" validation message when the component is left empty.
-     */
-    readonly required?: boolean;
-}
-export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel"> {
+export interface InputPhoneNumberProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel" | "version"> {
     /**
      * The current value of the input.
      */

package/dist/InputPhoneNumber/hooks/useInputPhoneActions.d.ts

@@ -1,6 +1,6 @@
 import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
-import type { InputPhoneNumberRebuiltProps } from "../InputPhoneNumber.types";
-export interface useInputPhoneActionsProps extends Pick<InputPhoneNumberRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
+import type { InputPhoneNumberProps } from "../InputPhoneNumber.types";
+export interface useInputPhoneActionsProps extends Pick<InputPhoneNumberProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
     inputRef?: React.RefObject<HTMLInputElement>;
 }
 /**