@trackunit/react-form-components 0.0.500 → 0.0.502

package/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
@@ -20,10 +18,7 @@ var sharedUtils = require('@trackunit/shared-utils');
 var tailwindMerge = require('tailwind-merge');
 var zod = require('zod');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -36,17 +31,11 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var parsePhoneNumberFromString__default = /*#__PURE__*/_interopDefaultLegacy(parsePhoneNumberFromString);
-var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
-var ReactAsyncCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncCreatableSelect);
-var ReactCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactCreatableSelect);
-var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSelect);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
@@ -103,7 +92,7 @@ const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(name
 /**
  * Trans for this specific library.
  */
-const Trans = (props) => (jsxRuntime.jsx(i18nLibraryTranslation.NamespaceTrans, Object.assign({}, props, { namespace: namespace })));
+const Trans = (props) => (jsxRuntime.jsx(i18nLibraryTranslation.NamespaceTrans, { ...props, namespace: namespace }));
 /**
  * Registers the translations for this library
  */
@@ -169,48 +158,6 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
     return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: "small" }), onClick: ButtonAction, size: "small", variant: "secondary" }) }));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 /**
  * Used to compare two React nodes for deep equality.
  */
@@ -409,9 +356,8 @@ const DisabledForReasonsTip = ({ reasons, kind }) => {
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
-const BaseInput = React__namespace.forwardRef((_a, ref) => {
-    var _b;
-    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "inputClassName", "placeholder", "addonBeforeClassName"]);
+const BaseInput = React__namespace.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, ...rest }, ref) => {
+    var _a;
     const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
     const innerRef = React__namespace.useRef(null);
     // eslint-disable-next-line local-rules/no-typescript-assertion
@@ -424,22 +370,22 @@ const BaseInput = React__namespace.forwardRef((_a, ref) => {
         }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [addonBefore ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
                     addonBefore: addonBefore !== undefined,
-                }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsxRuntime.jsx("input", Object.assign({ "aria-required": rest.required, className: cvaInputField({
+                }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsxRuntime.jsx("input", { "aria-required": rest.required, className: cvaInputField({
                     autoFocus: rest.autoFocus,
                     size: fieldSize,
                     disabled: renderAsDisabled,
                     className: inputClassName,
                     addonBefore: addonBefore !== undefined,
                     prefix: !compareReactNodes(addonBefore, prefix),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { disabled: renderAsDisabled, readOnly: rest.readOnly || nonInteractive })), typeof rest.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, ...rest, disabled: renderAsDisabled, readOnly: rest.readOnly || nonInteractive }), typeof rest.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                     disabled: false,
-                }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsxRuntime.jsx(DisabledForReasonsTip, Object.assign({}, rest.disabled)) })) : null, suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
+                }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsxRuntime.jsx(DisabledForReasonsTip, { ...rest.disabled }) })) : null, suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
                     addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
                     actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
                 }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null, rest.readOnly === true &&
                 showDefaultActions &&
-                ((_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
+                ((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.value.length) &&
                 innerRef.current.value.length > 0 ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && !compareReactNodes(addonBefore, actions) ? (jsxRuntime.jsx("div", { className: cvaInputAction({
                     addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
                     suffix: !compareReactNodes(addonBefore, suffix),
@@ -607,8 +553,7 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { className:
  * @param {CheckboxProps} props - The props for the Checkbox component
  * @returns {JSX.Element} Checkbox component
  */
-const Checkbox = React__namespace.forwardRef((_a, ref) => {
-    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange", "stopPropagation"]);
+const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation, ...rest }, ref) => {
     const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React__namespace.useRef(null);
     const isReadonly = disabled || readOnly;
@@ -627,7 +572,7 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxRuntime.jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsx("input", Object.assign({ "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox" }, rest, { ref: ref })), jsxRuntime.jsx("span", { className: cvaCheckbox({
+    return (jsxRuntime.jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsxRuntime.jsx("span", { className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
@@ -679,10 +624,9 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
  *
  * _**Do use**_ the CheckboxField for boolean input.
  */
-const CheckboxField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "helpAddon", "isInvalid", "className", "checked", "dataTestId", "checkboxLabel", "onChange"]);
+const CheckboxField = React.forwardRef(({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ...rest }, ref) => {
     const htmlForId = id ? id : "checkboxField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
+    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(Checkbox, { checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
 });
 CheckboxField.displayName = "CheckboxField";
 
@@ -701,12 +645,11 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "value", "onChange", "isInvalid"]);
+const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, ...rest }, ref) => {
     const htmlForId = id ? id : "colorField-" + uuid.v4();
-    const innerRef = React__default["default"].useRef(null);
+    const innerRef = React.useRef(null);
     // eslint-disable-next-line local-rules/no-typescript-assertion
-    React__default["default"].useImperativeHandle(ref, () => innerRef.current, []);
+    React.useImperativeHandle(ref, () => innerRef.current, []);
     // Internal state for color value
     const [value, setValue] = React.useState(propValue || defaultValue || "");
     const handleChange = React.useCallback((event) => {
@@ -734,12 +677,11 @@ ColorField.displayName = "ColorField";
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-const DateInput = React.forwardRef((_a, ref) => {
-    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
+const DateInput = React.forwardRef(({ min, max, defaultValue, value, ...rest }, ref) => {
     const formatDateToInputString = (date) => date instanceof Date ? dateFns.format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value) }, rest)));
+    return (jsxRuntime.jsx(BaseInput, { defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value), ...rest }));
 });
 DateInput.displayName = "DateInput";
 
@@ -750,11 +692,10 @@ DateInput.displayName = "DateInput";
  *
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
-const DateField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+const DateField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "dateField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(DateInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 DateField.displayName = "DateField";
 
@@ -816,8 +757,7 @@ const DropZoneDefaultLabel = () => (jsxRuntime.jsx(Trans, { components: {
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {JSX.Element} DropZone component
  */
-const DropZone = (_a) => {
-    var { className, dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled", "accept"]);
+const DropZone = ({ className, dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, ...rest }) => {
     const [dragActive, setDragActive] = React.useState(false);
     const [fileDropped, setFileDropped] = React.useState(false);
     const [t] = useTranslation();
@@ -861,12 +801,12 @@ const DropZone = (_a) => {
         }
         (_a = inputLabelRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
+    return (jsxRuntime.jsxs("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
             if (disabled) {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] })));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] }));
 };
 
 // Doing the same check as we do on the backend
@@ -895,8 +835,7 @@ const validateEmailAddress = (email) => {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-const EmailInput = React__namespace.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange", "disableAction"]);
+const EmailInput = React__namespace.forwardRef(({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ...rest }, ref) => {
     const [email, setEmail] = React__namespace.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -907,7 +846,7 @@ const EmailInput = React__namespace.forwardRef((_a, ref) => {
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
+    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
 });
 EmailInput.displayName = "EmailInput";
 
@@ -916,8 +855,7 @@ EmailInput.displayName = "EmailInput";
  * EmailField validates that user enters a valid email address.
  *
  */
-const EmailField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, disabled, onChange, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "value", "disabled", "onChange", "isInvalid"]);
+const EmailField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, disabled, onChange, isInvalid = false, ...rest }, ref) => {
     const htmlForId = id ? id : "emailField-" + uuid.v4();
     // Type guard to check if value is a string
     function isString(inputValue) {
@@ -929,7 +867,7 @@ const EmailField = React.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(EmailInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 EmailField.displayName = "EmailField";
 
@@ -939,7 +877,7 @@ EmailField.displayName = "EmailField";
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 const NumberInput = React.forwardRef((props, ref) => {
-    return jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props, { value: props.value }));
+    return jsxRuntime.jsx(BaseInput, { ref: ref, type: "number", ...props, value: props.value });
 });
 NumberInput.displayName = "NumberInput";
 
@@ -950,11 +888,10 @@ NumberInput.displayName = "NumberInput";
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const NumberField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
+const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "numberField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(NumberInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 NumberField.displayName = "NumberField";
 
@@ -987,10 +924,9 @@ const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = React.forwardRef((_a, ref) => {
-    var { icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "contentClassName", "dataTestId", "customImage"]);
+const OptionCard = React.forwardRef(({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ...rest }, ref) => {
     const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + uuid.v4();
-    return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", Object.assign({ className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
+    return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
                         ? React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
                         : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
 });
@@ -1003,7 +939,7 @@ OptionCard.displayName = "OptionCard";
  */
 const PasswordInput = React.forwardRef((props, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref }, props, { actions: jsxRuntime.jsx("div", { className: cvaActionContainer(), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" })));
+    return (jsxRuntime.jsx(BaseInput, { ref: ref, ...props, actions: jsxRuntime.jsx("div", { className: cvaActionContainer(), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
 });
 PasswordInput.displayName = "PasswordInput";
 
@@ -1014,14 +950,13 @@ PasswordInput.displayName = "PasswordInput";
  *
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-const PasswordField = React.forwardRef((_a, ref) => {
-    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+const PasswordField = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "passwordField-" + uuid.v4();
     const handleChange = React.useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PasswordInput, Object.assign({}, rest, { "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PasswordInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
 });
 PasswordField.displayName = "PasswordField";
 
@@ -1089,8 +1024,7 @@ const DEFAULT_COUNTRY_CODE = undefined;
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  * @returns {JSX.Element} - The PhoneInput component.
  */
-const PhoneInput = React.forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "readOnly", "onFocus", "onBlur", "name"]);
+const PhoneInput = React.forwardRef(({ dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ...rest }, ref) => {
     const [innerValue, setInnerValue] = React.useState(() => {
         var _a;
         return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
@@ -1134,7 +1068,7 @@ const PhoneInput = React.forwardRef((_a, ref) => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, Object.assign({ actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
+    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
 });
 PhoneInput.displayName = "PhoneInput";
 
@@ -1154,11 +1088,10 @@ PhoneInput.displayName = "PhoneInput";
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  * @returns {JSX.Element} - The PhoneField component.
  */
-const PhoneField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onChange, onBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "name", "onChange", "onBlur"]);
+const PhoneField = React.forwardRef(({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onChange, onBlur, ...rest }, ref) => {
     const htmlForId = id ? id : "phoneField-" + uuid.v4();
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
+    return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PhoneInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value, ...rest }) }));
 });
 PhoneField.displayName = "PhoneField";
 
@@ -1167,9 +1100,8 @@ PhoneField.displayName = "PhoneField";
  *
  * @returns {JSX.Element} - The PhoneFieldWithController component.
  */
-const PhoneFieldWithController = React.forwardRef((_a, ref) => {
-    var { control, controllerProps, name, value } = _a, rest = __rest(_a, ["control", "controllerProps", "name", "value"]);
-    return (jsxRuntime.jsx(reactHookForm.Controller, Object.assign({ control: control, defaultValue: value, name: name }, controllerProps, { render: ({ field }) => jsxRuntime.jsx(PhoneField, Object.assign({}, rest, field, { ref: ref })) })));
+const PhoneFieldWithController = React.forwardRef(({ control, controllerProps, name, value, ...rest }, ref) => {
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: control, defaultValue: value, name: name, ...controllerProps, render: ({ field }) => jsxRuntime.jsx(PhoneField, { ...rest, ...field, ref: ref }) }));
 });
 PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
@@ -1185,7 +1117,7 @@ const validatePhoneNumber = (phoneNumber) => {
     const countryCode = asYouType.getCallingCode();
     const national = asYouType.getNationalNumber();
     const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber.trim());
-    const number = parsePhoneNumberFromString__default["default"](safePhoneNumber);
+    const number = parsePhoneNumberFromString(safePhoneNumber);
     if (phoneNumber && parsePhoneNumberFromString.isValidPhoneNumber(phoneNumber)) {
         return undefined;
     }
@@ -1343,15 +1275,15 @@ const cvaTimeRange = cssClassVarianceUtilities.cvaMerge(["flex", "flex-1", "item
  * @returns {JSX.Element} TimeRange component
  */
 const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    const [timeRange, setTimeRange] = React__default["default"].useState(range !== null && range !== void 0 ? range : {
+    const [timeRange, setTimeRange] = React.useState(range !== null && range !== void 0 ? range : {
         timeFrom: "",
         timeTo: "",
     });
     const onChangeFrom = (timeFrom) => {
-        setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeFrom })));
+        setTimeRange(prev => ({ ...prev, timeFrom }));
     };
     const onChangeTo = (timeTo) => {
-        setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeTo })));
+        setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
     return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom }), children !== null && children !== void 0 ? children : jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo })] }));
@@ -1368,16 +1300,21 @@ const cvaScheduleItemText = cssClassVarianceUtilities.cvaMerge(["flex", "font-bo
  */
 const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = [] }) => {
     const onRangeChange = (range, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? Object.assign(Object.assign({}, day), { range: Object.assign({}, range) }) : day));
+        const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
         onChange(newSchedule);
     };
     const onActiveChange = (isActive, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex ? Object.assign(Object.assign({}, day), { range: { timeFrom: "", timeTo: "" }, isActive }) : day);
+        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex ? { ...day, range: { timeFrom: "", timeTo: "" }, isActive } : day);
         onChange(newSchedule);
     };
     const onAllDayChange = (isAllDayChecked, index) => {
         const newSchedule = schedule.map((day, dayIndex) => index === dayIndex
-            ? Object.assign(Object.assign({}, day), { range: { timeFrom: "", timeTo: "" }, isAllDayActive: isAllDayChecked }) : day);
+            ? {
+                ...day,
+                range: { timeFrom: "", timeTo: "" },
+                isAllDayActive: isAllDayChecked,
+            }
+            : day);
         onChange(newSchedule);
     };
     return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDayActive }, index) => {
@@ -1507,7 +1444,7 @@ const hasConsecutiveDays = (schedule) => {
  *
  * NOTE: If shown with a label, please use the `TextField` component instead.
  */
-const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
+const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, { ref: ref, type: "text", ...props })));
 TextInput.displayName = "TextInput";
 
 const cvaSearch = cssClassVarianceUtilities.cvaMerge([
@@ -1534,11 +1471,10 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-const Search = React.forwardRef((_a, ref) => {
-    var { className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "hideBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
+const Search = React.forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ...rest }, ref) => {
+    return (jsxRuntime.jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
-            }, type: "button", children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
+            }, type: "button", children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
 });
 Search.displayName = "Search";
 
@@ -1656,7 +1592,7 @@ const isSelectedOption = (option, selected) => {
 };
 const removeSelectedFromGroups = (group, selected) => {
     if (isGroupBase(group)) {
-        return Object.assign(Object.assign({}, group), { options: group.options.filter(option => !isSelectedOption(option, selected)) });
+        return { ...group, options: group.options.filter(option => !isSelectedOption(option, selected)) };
     }
     return group;
 };
@@ -1713,14 +1649,13 @@ const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, di
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} TagWithWidth component
  */
-const TagWithWidth = (_a) => {
-    var { onWidthKnown, children } = _a, rest = __rest(_a, ["onWidthKnown", "children"]);
-    const ref = React__default["default"].useRef(null);
-    React__default["default"].useLayoutEffect(() => {
+const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
         var _a;
         onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
     }, [ref, onWidthKnown]);
-    return (jsxRuntime.jsx(reactComponents.Tag, Object.assign({ ref: ref }, rest, { children: children })));
+    return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, children: children }));
 };
 
 /**
@@ -1730,13 +1665,13 @@ const TagWithWidth = (_a) => {
  * @returns {JSX.Element} TagsContainer
  */
 const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
-    const [isReady, setIsReady] = React__default["default"].useState(false);
-    const [counterWidth, setCounterWidth] = React__default["default"].useState(0);
-    const containerRef = React__default["default"].useRef(null);
-    const availableWidth = React__default["default"].useRef();
-    const childrenWidth = React__default["default"].useRef([]);
+    const [isReady, setIsReady] = React.useState(false);
+    const [counterWidth, setCounterWidth] = React.useState(0);
+    const containerRef = React.useRef(null);
+    const availableWidth = React.useRef();
+    const childrenWidth = React.useRef([]);
     const itemsCount = items.length;
-    React__default["default"].useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         var _a;
         availableWidth.current = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
     }, [containerRef]);
@@ -1805,7 +1740,8 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React__namespace.useMemo(() => {
-        return Object.assign({ ValueContainer: props => {
+        return {
+            ValueContainer: props => {
                 var _a;
                 if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
                     const PLACEHOLDER_KEY = "placeholder";
@@ -1816,7 +1752,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const searchInput = props && props.children && props.children[1];
-                    return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
+                    return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
                                     return {
                                         text: tagProps.children,
@@ -1838,47 +1774,66 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             }, children: tagProps.children }, (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()));
                                     })
-                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) })));
+                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
                 }
-                return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
-            }, LoadingIndicator: () => {
+                return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }));
+            },
+            LoadingIndicator: () => {
                 return jsxRuntime.jsx(reactComponents.Spinner, { centering: "vertically", className: "mr-2", size: "small" });
-            }, DropdownIndicator: props => {
+            },
+            DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon !== null && dropdownIcon !== void 0 ? dropdownIcon : icon }) })));
-            }, IndicatorSeparator: () => null, ClearIndicator: props => {
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon !== null && dropdownIcon !== void 0 ? dropdownIcon : icon }) }));
+            },
+            IndicatorSeparator: () => null,
+            ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) })));
-            }, Control: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, props, { className: cvaSelectControl({
+                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
+            },
+            Control: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Control, { ...props, className: cvaSelectControl({
                         isDisabled: props.isDisabled,
                         prefix: prefix ? true : false,
                         invalid: hasError,
-                    }) })));
-            }, SingleValue: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
-            }, Menu: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Menu, Object.assign({}, props, { className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) })));
-            }, Placeholder: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Placeholder, Object.assign({}, props, { className: "!text-slate-400", children: props.children })));
-            }, MenuList: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
+                    }) }));
+            },
+            SingleValue: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) }));
+            },
+            Menu: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
+            },
+            Placeholder: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...props, className: "!text-slate-400", children: props.children }));
+            },
+            MenuList: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.MenuList, { ...props, innerProps: {
+                        ...props.innerProps,
+                        onScroll: e => {
                             const listEl = e.currentTarget;
                             if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight) {
                                 props.selectProps.onMenuScrollToBottom && props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
                             }
-                        } }), children: props.children })));
-            }, Option: props => {
+                        },
+                    }, children: props.children }));
+            },
+            Option: props => {
                 const componentProps = {
                     label: props.label,
                     focused: props.isFocused,
                     selected: props.isSelected,
                     onClick: props.innerProps.onClick,
                 };
-                return (jsxRuntime.jsx(ReactSelect.components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }), children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled }))) : (jsxRuntime.jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled }))) })));
-            } }, componentsProps);
+                return (jsxRuntime.jsx(ReactSelect.components.Option, { ...props, innerProps: {
+                        ...props.innerProps,
+                        role: "option",
+                        onClick: () => { },
+                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled })) }));
+            },
+            ...componentsProps,
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
     return customComponents;
@@ -1895,19 +1850,92 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
  */
 const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, }) => {
     const customStyles = React__namespace.useMemo(() => {
-        return Object.assign({ control: base => {
-                return Object.assign(Object.assign({}, base), { borderRadius: "var(--border-radius-lg)", backgroundColor: "" });
-            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign(Object.assign({}, base), (disabled && { display: "none" }))), indicatorSeparator: () => ({
+        return {
+            control: base => {
+                return {
+                    ...base,
+                    borderRadius: "var(--border-radius-lg)",
+                    backgroundColor: "",
+                };
+            },
+            singleValue: base => ({
+                ...base,
+            }),
+            multiValue: base => ({
+                ...base,
+            }),
+            multiValueLabel: base => ({
+                ...base,
+            }),
+            indicatorsContainer: base => ({
+                ...base,
+                ...(disabled && { display: "none" }),
+            }),
+            indicatorSeparator: () => ({
                 width: "0px",
-            }), menu: base => {
-                return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
-            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width, backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
-                return Object.assign(Object.assign({}, base), { position: "relative", padding: "var(--spacing-1)", display: "grid", gap: "var(--spacing-1)", width: "100%", borderRadius: "0px", boxShadow: "none", paddingTop: "0px" });
-            }, valueContainer: base => {
-                return Object.assign(Object.assign({}, base), { flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap", gap: "0.25rem" });
-            }, container: base => (Object.assign(Object.assign({}, base), { width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
-                return Object.assign(Object.assign({}, base), { padding: "0px" });
-            } }, styles);
+            }),
+            menu: base => {
+                return {
+                    ...base,
+                    width: "100%",
+                    marginTop: "4px",
+                    marginBottom: "18px",
+                    transition: "all 1s ease-in-out",
+                };
+            },
+            input: base => ({
+                ...base,
+                marginLeft: "0px",
+            }),
+            placeholder: base => ({
+                ...base,
+            }),
+            option: () => ({}),
+            menuPortal: base => ({
+                ...base,
+                width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width,
+                backgroundColor: "#ffffff",
+                borderRadius: "var(--border-radius-lg)",
+                zIndex: 20,
+                borderColor: "rgb(var(--color-slate-300))",
+                boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
+            }),
+            menuList: base => {
+                return {
+                    ...base,
+                    position: "relative",
+                    padding: "var(--spacing-1)",
+                    display: "grid",
+                    gap: "var(--spacing-1)",
+                    width: "100%",
+                    borderRadius: "0px",
+                    boxShadow: "none",
+                    paddingTop: "0px",
+                };
+            },
+            valueContainer: base => {
+                return {
+                    ...base,
+                    flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap",
+                    gap: "0.25rem",
+                };
+            },
+            container: base => ({
+                ...base,
+                width: "100%",
+            }),
+            dropdownIndicator: base => ({
+                ...base,
+                padding: "0px",
+            }),
+            clearIndicator: base => {
+                return {
+                    ...base,
+                    padding: "0px",
+                };
+            },
+            ...styles,
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [refContainer, refPrefix]);
     return { customStyles };
@@ -1919,11 +1947,10 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-const useSelect = (_a) => {
-    var _b;
-    var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
-    const refContainer = React__default["default"].useRef(null);
-    const refPrefix = React__default["default"].useRef(null);
+const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }) => {
+    var _a;
+    const refContainer = React.useRef(null);
+    const refPrefix = React.useRef(null);
     const { customStyles } = useCustomStyles({
         refContainer,
         refPrefix,
@@ -1931,8 +1958,8 @@ const useSelect = (_a) => {
         styles,
         disabled: Boolean(disabled),
     });
-    const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
-    const refMenuIsEnabled = React__default["default"].useRef(true);
+    const [menuIsOpen, setMenuIsOpen] = React.useState((_a = props.menuIsOpen) !== null && _a !== void 0 ? _a : false);
+    const refMenuIsEnabled = React.useRef(true);
     const customComponents = useCustomComponents({
         componentsProps: components,
         disabled: Boolean(disabled),
@@ -1945,7 +1972,7 @@ const useSelect = (_a) => {
         hasError,
     });
     const menuPlacement = "auto";
-    const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
+    const openMenuHandler = async () => {
         onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
         if (refMenuIsEnabled.current) {
             setMenuIsOpen(true);
@@ -1953,15 +1980,18 @@ const useSelect = (_a) => {
         else {
             refMenuIsEnabled.current = true;
         }
-    });
+    };
     const closeMenuHandler = () => {
         setMenuIsOpen(false);
         onMenuClose && onMenuClose();
     };
-    const orderedOptions = React__default["default"].useMemo(() => {
+    const orderedOptions = React.useMemo(() => {
         return disabled
             ? getOrderedOptions(options, value).map(option => {
-                return Object.assign(Object.assign({}, option), { disabled: true });
+                return {
+                    ...option,
+                    disabled: true,
+                };
             })
             : getOrderedOptions(options, value);
     }, [options, value, disabled]);
@@ -2043,7 +2073,7 @@ const CreatableSelect = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({}, props, reactCreatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, props, reactCreatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder }))), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, Object.assign({}, props.disabled)) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -2110,12 +2140,11 @@ const Select = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, props, reactSelectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, props, reactSelectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder }))), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, Object.assign({}, props.disabled)) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
 };
 Select.displayName = "Select";
 
-const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
-    var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children } = _a, rest = __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange", "children"]);
+const FormFieldSelectAdapter = React.forwardRef(({ className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ...rest }, ref) => {
     const isFirstRender = reactComponents.useIsFirstRender();
     const [innerValue, setInnerValue] = React.useState(value || defaultValue);
     React.useEffect(() => {
@@ -2155,14 +2184,21 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
         tip,
         label, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign(Object.assign({}, rest), { id,
+                }) }), children({
+                ...rest,
+                id,
                 disabled,
-                onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
+                onBlur,
+                options: optionsWithCurrentSelectionBackupOption,
+                onChange: e => {
                     // If theres no value, set the inner value to an empty string
                     // A native select can not have a null value
                     // So even if react-select sends a null value, we need to convert it to an empty string
                     setInnerValue(!e ? "" : e.value);
-                }, value: selectedOption, defaultValue: selectedOption }))] }));
+                },
+                value: selectedOption,
+                defaultValue: selectedOption,
+            })] }));
 });
 FormFieldSelectAdapter.displayName = "FormFieldSelectAdapter";
 
@@ -2176,10 +2212,9 @@ FormFieldSelectAdapter.displayName = "FormFieldSelectAdapter";
  * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
  * @returns {JSX.Element} CreatableSelectField component
  */
-const CreatableSelectField = React.forwardRef((_a, ref) => {
-    var { allowCreateWhileLoading, onCreateOption } = _a, props = __rest(_a, ["allowCreateWhileLoading", "onCreateOption"]);
+const CreatableSelectField = React.forwardRef(({ allowCreateWhileLoading, onCreateOption, ...props }, ref) => {
     const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
-    return (jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsxRuntime.jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
+    return (jsxRuntime.jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(CreatableSelect, { ...convertedProps, ...creatableSelectOnlyProps }) }));
 });
 CreatableSelectField.displayName = "CreatableSelectField";
 
@@ -2193,9 +2228,8 @@ CreatableSelectField.displayName = "CreatableSelectField";
  * @param {SelectFieldProps} props - The props for the SelectField component
  * @returns {JSX.Element} SelectField component
  */
-const SelectField = React.forwardRef((_a, ref) => {
-    var props = __rest(_a, []);
-    return (jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsxRuntime.jsx(Select, Object.assign({}, convertedProps)) })));
+const SelectField = React.forwardRef(({ ...props }, ref) => {
+    return (jsxRuntime.jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(Select, { ...convertedProps }) }));
 });
 SelectField.displayName = "SelectField";
 
@@ -2235,9 +2269,8 @@ const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
  */
-const TextArea = React__namespace.forwardRef((_a, ref) => {
-    var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "required", "dataTestId", "isInvalid", "className"]);
-    return (jsxRuntime.jsx("textarea", Object.assign({ className: cvaTextArea({ className, resize, invalid: isInvalid, disabled }), defaultValue: defaultValue, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, ref: ref, required: required, rows: rows, tabIndex: tabIndex, value: value }, rest, { "data-testid": dataTestId, onChange: onChange })));
+const TextArea = React__namespace.forwardRef(({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("textarea", { className: cvaTextArea({ className, resize, invalid: isInvalid, disabled }), defaultValue: defaultValue, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, ref: ref, required: required, rows: rows, tabIndex: tabIndex, value: value, ...rest, "data-testid": dataTestId, onChange: onChange }));
 });
 TextArea.displayName = "TextArea";
 
@@ -2252,8 +2285,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
     return (jsxRuntime.jsxs("span", { className: "font-mono", children: [length, "/", maxLength] }));
 };
 
-const TextAreaField = React__namespace.forwardRef((_a, ref) => {
-    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+const TextAreaField = React__namespace.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + uuid.v4();
@@ -2264,7 +2296,7 @@ const TextAreaField = React__namespace.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsxRuntime.jsx(FormGroup, { className: tailwindMerge.twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
-            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(TextArea, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: "h-auto", dataTestId: dataTestId, onChange: handleChange })) }));
+            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(TextArea, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: "h-auto", dataTestId: dataTestId, onChange: handleChange }) }));
 });
 TextAreaField.displayName = "TextAreaField";
 
@@ -2275,8 +2307,7 @@ TextAreaField.displayName = "TextAreaField";
  *
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-const TextField = React__namespace.forwardRef((_a, ref) => {
-    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+const TextField = React__namespace.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + uuid.v4();
@@ -2287,7 +2318,7 @@ const TextField = React__namespace.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
-            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(TextInput, Object.assign({ "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
+            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(TextInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId, onChange: handleChange }) }));
 });
 TextField.displayName = "TextField";
 
@@ -2297,11 +2328,10 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {JSX.Element} TimeRangeField component
  */
-const TimeRangeField = (_a) => {
-    var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "children", "helpText", "id"]);
+const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
 const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
@@ -2391,26 +2421,22 @@ const cvaUploadInputAddonBefore = cssClassVarianceUtilities.cvaMerge(["block", "
  *
  * NOTE: If shown with a label, please use the `UploadField` component instead.
  */
-const UploadInput = React.forwardRef((_a, ref) => {
-    var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
-    return (jsxRuntime.jsx("label", { className: "tu-upload-input", children: jsxRuntime.jsx(BaseInput, Object.assign({ accept: acceptedTypes, addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
-                // onClick used to work with nonInteractive option
-                if (nonInteractive) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-            }, ref: ref, type: "file" }, rest)) }));
-});
+const UploadInput = React.forwardRef(({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ...rest }, ref) => (jsxRuntime.jsx("label", { className: "tu-upload-input", children: jsxRuntime.jsx(BaseInput, { accept: acceptedTypes, addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
+            // onClick used to work with nonInteractive option
+            if (nonInteractive) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }, ref: ref, type: "file", ...rest }) })));
 UploadInput.displayName = "UploadInput";
 
 /**
  * Upload fields enable the user to upload Files.
  */
-const UploadField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
+const UploadField = React.forwardRef(({ label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "uploadField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(UploadInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 UploadField.displayName = "UploadField";
 
@@ -2434,11 +2460,10 @@ const validateUrlAddress = (url) => {
  *
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
-const UrlInput = React.forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
+const UrlInput = React.forwardRef(({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ...rest }, ref) => {
     const [url, setUrl] = React.useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }, rest, { actions: !disableAction && (jsxRuntime.jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
+    return (jsxRuntime.jsx(BaseInput, { dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) }));
 });
 UrlInput.displayName = "UrlField";
 
@@ -2447,15 +2472,14 @@ UrlInput.displayName = "UrlField";
  * UrlField validates that user enters a valid web address.
  *
  */
-const UrlField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "isInvalid", "value"]);
+const UrlField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, ...rest }, ref) => {
     const htmlForId = id ? id : "urlField-" + uuid.v4();
     // Type guard to check if value is a string
     function isString(inputValue) {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(UrlInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 UrlField.displayName = "UrlField";
 
@@ -2478,7 +2502,11 @@ const useGetPhoneValidationRules = () => {
             },
         };
         return !skipValidation
-            ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
+            ? {
+                ...pattern,
+                ...defaultRules,
+            }
+            : defaultRules;
     }, [t]);
     return { getPhoneNumberValidationRules };
 };
@@ -2563,10 +2591,7 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-Object.defineProperty(exports, 'ValueType', {
-  enumerable: true,
-  get: function () { return ReactSelect__default["default"]; }
-});
+exports.ValueType = ReactSelect;
 exports.ActionButton = ActionButton;
 exports.BaseInput = BaseInput;
 exports.Checkbox = Checkbox;