npm - @trackunit/react-form-components - Versions diffs - 0.0.428 → 0.0.429 - Mend

@trackunit/react-form-components 0.0.428 → 0.0.429

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/index.cjs.js +113 -159
package/index.esm.js +114 -158
package/package.json +1 -1
package/src/components/BaseInput/BaseInput.variants.d.ts +1 -11
package/src/components/EmailInput/EmailInput.d.ts +1 -14
package/src/components/Select/Select.variants.d.ts +0 -5
package/src/components/Select/useCustomComponents.d.ts +1 -1

package/index.cjs.js CHANGED Viewed

@@ -213,12 +213,16 @@ const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
     "component-baseInput-border",
     "component-baseInput-background",
     "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-inset",
+    "focus-within:ring-primary-500",
+    "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
     "transition",
 ]);
 const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
-const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
+const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
 const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
@@ -227,15 +231,24 @@ const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10",
         },
         disabled: {
             true: cvaInputBaseDisabled(),
-            false: [""],
+            false: "",
         },
         invalid: {
             true: cvaInputBaseInvalid(),
-            false: [""],
+            false: "",
         },
     },
 });
-const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
+const cvaInputField = cssClassVarianceUtilities.cvaMerge([
+    "w-full",
+    "px-3",
+    "border-0",
+    "bg-transparent",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "focus-visible:outline-none",
+], {
     variants: {
         size: {
             small: ["py-1"],
@@ -243,28 +256,9 @@ const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "bor
         },
         disabled: {
             true: ["text-slate-700"],
-            false: [""],
-        },
-        autoFocus: {
-            true: [""],
-            false: ["focus-visible:outline-none"],
-        },
-        addonBefore: {
-            true: [""],
-            false: [""],
-        },
-        prefix: {
-            true: ["ps-10"],
-            false: [""],
+            false: "",
         },
     },
-    compoundVariants: [
-        {
-            addonBefore: true,
-            prefix: true,
-            className: ["ps-4"],
-        },
-    ],
 });
 const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -276,6 +270,7 @@ const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
     "bg-slate-50",
 ]);
 const cvaInputAddonBefore = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
+const cvaInputAddonAfter = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
 const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "justify-center",
@@ -285,62 +280,21 @@ const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
     "component-baseInput-prefix",
     "component-search-borderless",
     "pl-3",
-    "absolute",
-    "inset-y-0",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: [""],
-        },
-        addonBefore: {
-            true: ["relative"],
-            false: [""],
+            false: "",
         },
     },
 });
-const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
+const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: [""],
-        },
-        addonAfter: {
-            true: ["relative"],
-            false: [""],
-        },
-        actions: {
-            true: ["right-10"],
-            false: [""],
-        },
-    },
-    compoundVariants: [
-        {
-            addonAfter: true,
-            actions: true,
-            className: ["right-0"],
-        },
-    ],
-});
-const cvaInputAddonAfter = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"]);
-const cvaInputAction = cssClassVarianceUtilities.cvaMerge(["absolute", "end-0.5"], {
-    variants: {
-        addonAfter: {
-            true: ["relative"],
-            false: [""],
-        },
-        suffix: {
-            true: ["absolute"],
-            false: [""],
+            false: "",
         },
     },
-    compoundVariants: [
-        {
-            addonAfter: true,
-            suffix: true,
-            className: ["relative"],
-        },
-    ],
 });
 /**
@@ -365,25 +319,12 @@ const BaseInput = React__namespace.forwardRef((_a, ref) => {
             className,
         }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
-                    addonBefore: addonBefore !== undefined,
-                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsxRuntime.jsx("input", Object.assign({ "aria-required": rest.required, autoFocus: rest.autoFocus, className: cvaInputField({
-                    autoFocus: rest.autoFocus,
-                    size: fieldSize,
-                    disabled: renderAsDisabled,
-                    className: inputClassName,
-                    addonBefore: addonBefore !== undefined,
-                    prefix: addonBefore !== prefix,
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
+                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsxRuntime.jsx("input", Object.assign({ "aria-required": rest.required, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
-                    addonAfter: addonAfter !== undefined && addonBefore !== addonAfter,
-                    actions: (actions && addonBefore !== actions) || false,
                 }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true &&
                 showDefaultActions &&
                 ((_b = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
-                ((_c = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _c === void 0 ? void 0 : _c.value.length) > 0 ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? (jsxRuntime.jsx("div", { className: cvaInputAction({
-                    addonAfter: addonAfter !== undefined && addonBefore !== addonAfter,
-                    suffix: addonBefore !== suffix,
-                }), children: actions })) : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+                ((_c = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _c === void 0 ? void 0 : _c.value.length) > 0 ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
 });
 const cvaLabel = cssClassVarianceUtilities.cvaMerge([
@@ -437,11 +378,15 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
     "justify-center",
     "box-border",
     "transition",
+    "focus:bg-slate-200",
     "outline-0",
     "active:bg-slate-200",
     "active:ring-2",
     "active:ring-inset",
     "active:ring-primary-700",
+    "focus:ring-2",
+    "focus:ring-inset",
+    "focus:ring-primary-700",
     "cursor-pointer",
     "group-active:ring-2",
     "group-active:ring-inset",
@@ -449,7 +394,13 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
 ], {
     variants: {
         invalid: {
-            true: ["border-red-600", "active:ring-red-700", "group-focus:ring-2", "group-focus:ring-inset"],
+            true: [
+                "border-red-600",
+                "active:ring-red-700",
+                "focus:ring-red-700",
+                "group-focus:ring-2",
+                "group-focus:ring-inset",
+            ],
             false: "",
         },
         state: {
@@ -459,8 +410,11 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
                 "active:bg-primary-700",
+                "focus:bg-primary-700",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
+                "group-focus:bg-primary-700",
+                "group-focus:border-primary-700",
             ],
             deselected: ["group-hover:bg-slate-100"],
             indeterminate: [
@@ -468,10 +422,14 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
                 "border-primary-600",
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
+                "focus:bg-primary-800",
+                "focus:border-primary-800",
                 "active:bg-primary-800",
                 "active:border-primary-800",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
+                "group-focus:bg-primary-800",
+                "group-focus:border-primary-800",
             ],
         },
         disabled: {
@@ -479,8 +437,13 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
                 "bg-slate-300",
                 "border-slate-300",
                 "cursor-not-allowed",
+                "group-hover:bg-slate-300",
+                "group-focus:bg-slate-300",
                 "hover:bg-slate-300",
+                "focus:bg-slate-300",
                 "active:bg-slate-300",
+                "focus:ring-0",
+                "focus:ring-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -836,7 +799,7 @@ const validateEmailAddress = (email) => {
  * 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"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
     const [email, setEmail] = React__namespace.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -848,7 +811,7 @@ const EmailInput = React__namespace.forwardRef((_a, ref) => {
     }, [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`, disabled: disableAction || isInvalid, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })), dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
+            email.length > 0 && (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-emailIcon`, disabled: disabled, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })), dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
 });
 /**
@@ -1071,7 +1034,7 @@ const PhoneInput = React.forwardRef((_a, ref) => {
     }, [onFocus]);
     return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsxRuntime.jsx(BaseInput, Object.assign({ actions: !disableAction &&
                 innerValue &&
-                (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disableAction || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, 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)) }));
+                (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, 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)) }));
 });
 /**
@@ -1169,6 +1132,9 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
+    "focus:ring-2",
+    "focus:ring-inset",
+    "focus:ring-primary-700",
 ], {
     variants: {
         checked: {
@@ -1184,6 +1150,10 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
                 "active:ring-2",
                 "active:ring-inset",
                 "active:ring-primary-700",
+                "focus:bg-slate-200",
+                "focus:ring-2",
+                "focus:ring-inset",
+                "focus:ring-primary-700",
                 "group-active:ring-2",
                 "group-active:ring-inset",
                 "group-active:ring-primary-700",
@@ -1191,7 +1161,13 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         invalid: {
-            true: ["border-red-600", "active:ring-red-700"],
+            true: [
+                "border-red-600",
+                "active:ring-red-700",
+                "focus:ring-red-700",
+                "group-focus:ring-2",
+                "group-focus:ring-inset",
+            ],
             false: "",
         },
         disabled: {
@@ -1199,8 +1175,13 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
                 "bg-slate-400",
                 "border-slate-300",
                 "cursor-not-allowed",
+                "group-hover:bg-slate-400",
+                "group-focus:bg-slate-400",
                 "hover:bg-slate-400",
+                "focus:bg-slate-400",
                 "active:bg-slate-400",
+                "focus:ring-0",
+                "focus:ring-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -1444,13 +1425,21 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
     "component-search-background",
     "hover:component-search-background",
     "hover:component-search-focus-hover",
+    "focus:component-search-focus-hover",
+    "focus-within:component-search-focus-within",
     "transition-all",
     "duration-300",
 ], {
     variants: {
         border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
-            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
+            true: [
+                "component-search-width",
+                "component-search-widen",
+                "hover:component-search-widen",
+                "focus-within:component-search-widen-focus",
+                "focus-within:w-full",
+            ],
             false: "w-full",
         },
     },
@@ -1474,74 +1463,37 @@ const cvaSelect = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "shadow-sm",
     "rounded-lg",
+    "border",
     "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-inset",
+    "focus-within:ring-primary-600",
+    "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
     "bg-white",
     "transition",
+    "overflow-hidden",
 ], {
     variants: {
         invalid: {
-            true: "border border-red-600 text-red-600 hover:border-red-600",
+            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100 hover:border-slate-300",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        invalid: false,
-        disabled: false,
-    },
-});
-const cvaSelectControl = cssClassVarianceUtilities.cvaMerge([], {
-    variants: {
-        isDisabled: {
             true: "!bg-slate-100",
             false: "",
         },
-        prefix: {
-            true: ["ps-7"],
-            false: "",
-        },
-        invalid: {
-            true: "!border-0",
-            false: "",
-        },
     },
     defaultVariants: {
-        isDisabled: false,
-        prefix: false,
         invalid: false,
+        disabled: false,
     },
 });
-const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge([
-    "mr-2",
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-slate-400",
-    "hover:text-slate-500",
-]);
-const cvaSelectPrefix = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "text-slate-400",
-    "pl-2",
-    "absolute",
-    "inset-y-0",
-]);
+const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge("mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500");
+const cvaSelectPrefix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
 const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
-    "mr-2",
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-slate-400",
-    "hover:text-slate-500",
+    "mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500",
     "ml-1",
 ]);
 const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
@@ -1725,7 +1677,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  *  @param {JSX.Element} dropdownIcon an custom dropdown icon
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError) => {
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
     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(() => {
@@ -1764,7 +1716,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 }
                 return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
-                return jsxRuntime.jsx(reactComponents.Spinner, { className: "mr-1 mt-1.5", size: "small" });
+                return jsxRuntime.jsx(reactComponents.Spinner, { className: "mt-1.5 mr-1", size: "small" });
             }, 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 ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
@@ -1774,11 +1726,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 }
                 return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
             }, Control: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, props, { className: cvaSelectControl({
-                        isDisabled: props.isDisabled,
-                        prefix: prefix ? true : false,
-                        invalid: hasError,
-                    }) })));
+                return jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, 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 => {
@@ -1818,16 +1766,18 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, 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: "" });
+                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
+                        border: "0",
+                    }, 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: () => ({
                 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 === null || refContainer === void 0 ? void 0 : 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 => {
+            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width, transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", 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 => {
+            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
                 return Object.assign(Object.assign({}, base), { padding: "0px" });
             } }, styles);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1849,7 +1799,7 @@ const useSelect = (_a) => {
     const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, 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 customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
         onMenuOpen && onMenuOpen();
@@ -1922,8 +1872,6 @@ const CreatableSelect = (props) => {
         onInputChange,
         allowCreateWhileLoading,
         onCreateOption,
-        isDisabled: disabled || props.isDisabled,
-        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
     return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
@@ -1967,8 +1915,6 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
         hideSelectedOptions,
-        isDisabled: disabled || props.isDisabled,
-        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
     return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, rest, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, rest, selectProps, { isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
@@ -2060,6 +2006,7 @@ const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
     "text-base",
     "text-slate-900",
     "placeholder-slate-400",
+    "focus-visible:outline-none",
     "w-full",
     "h-20",
     "transition",
@@ -2136,7 +2083,7 @@ const TextField = React__namespace.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (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 })) }));
+            (maxLength !== null && maxLength !== undefined && (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", disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
 });
 /**
@@ -2154,7 +2101,16 @@ const TimeRangeField = (_a) => {
 const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
 cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
+const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge([
+    "shrink-0",
+    "p-1",
+    "cursor-pointer",
+    "rounded-full",
+    "bg-slate-300",
+    "focus:bg-slate-400",
+    "hover:bg-slate-400",
+    "active:bg-slate-500",
+], {
     variants: {
         size: {
             small: ["w-8", "h-4"],
@@ -2165,7 +2121,7 @@ const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "p-1", "c
             false: "",
         },
         toggled: {
-            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: ["bg-primary-600", "focus:bg-primary-700", "hover:bg-primary-700", "active:bg-primary-800"],
             false: "",
         },
     },
@@ -2283,7 +2239,7 @@ 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 [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`, 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, Object.assign({ dataTestId: dataTestId && `${dataTestId}-url-input`, 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 || disabled, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
 });
 /**
@@ -2299,7 +2255,7 @@ const UrlField = React.forwardRef((_a, ref) => {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, 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`, disabled: rest.disabled, 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", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 /**
@@ -2458,7 +2414,6 @@ exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
 exports.cvaActionButton = cvaActionButton;
 exports.cvaActionContainer = cvaActionContainer;
 exports.cvaInput = cvaInput;
-exports.cvaInputAction = cvaInputAction;
 exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputAddonAfter = cvaInputAddonAfter;
 exports.cvaInputAddonBefore = cvaInputAddonBefore;
@@ -2469,7 +2424,6 @@ exports.cvaInputField = cvaInputField;
 exports.cvaInputPrefix = cvaInputPrefix;
 exports.cvaInputSuffix = cvaInputSuffix;
 exports.cvaSelect = cvaSelect;
-exports.cvaSelectControl = cvaSelectControl;
 exports.cvaSelectCounter = cvaSelectCounter;
 exports.cvaSelectDynamicTagContainer = cvaSelectDynamicTagContainer;
 exports.cvaSelectIcon = cvaSelectIcon;

package/index.esm.js CHANGED Viewed

@@ -183,12 +183,16 @@ const cvaInputBase = cvaMerge([
     "component-baseInput-border",
     "component-baseInput-background",
     "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-inset",
+    "focus-within:ring-primary-500",
+    "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
     "transition",
 ]);
 const cvaInputBaseDisabled = cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
-const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
+const cvaInputBaseInvalid = cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
 const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
@@ -197,15 +201,24 @@ const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
         },
         disabled: {
             true: cvaInputBaseDisabled(),
-            false: [""],
+            false: "",
         },
         invalid: {
             true: cvaInputBaseInvalid(),
-            false: [""],
+            false: "",
         },
     },
 });
-const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
+const cvaInputField = cvaMerge([
+    "w-full",
+    "px-3",
+    "border-0",
+    "bg-transparent",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "focus-visible:outline-none",
+], {
     variants: {
         size: {
             small: ["py-1"],
@@ -213,28 +226,9 @@ const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent",
         },
         disabled: {
             true: ["text-slate-700"],
-            false: [""],
-        },
-        autoFocus: {
-            true: [""],
-            false: ["focus-visible:outline-none"],
-        },
-        addonBefore: {
-            true: [""],
-            false: [""],
-        },
-        prefix: {
-            true: ["ps-10"],
-            false: [""],
+            false: "",
         },
     },
-    compoundVariants: [
-        {
-            addonBefore: true,
-            prefix: true,
-            className: ["ps-4"],
-        },
-    ],
 });
 const cvaInputAddon = cvaMerge([
     "flex",
@@ -246,6 +240,7 @@ const cvaInputAddon = cvaMerge([
     "bg-slate-50",
 ]);
 const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
+const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
 const cvaInputPrefix = cvaMerge([
     "flex",
     "justify-center",
@@ -255,62 +250,21 @@ const cvaInputPrefix = cvaMerge([
     "component-baseInput-prefix",
     "component-search-borderless",
     "pl-3",
-    "absolute",
-    "inset-y-0",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: [""],
-        },
-        addonBefore: {
-            true: ["relative"],
-            false: [""],
+            false: "",
         },
     },
 });
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: [""],
-        },
-        addonAfter: {
-            true: ["relative"],
-            false: [""],
-        },
-        actions: {
-            true: ["right-10"],
-            false: [""],
-        },
-    },
-    compoundVariants: [
-        {
-            addonAfter: true,
-            actions: true,
-            className: ["right-0"],
-        },
-    ],
-});
-const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"]);
-const cvaInputAction = cvaMerge(["absolute", "end-0.5"], {
-    variants: {
-        addonAfter: {
-            true: ["relative"],
-            false: [""],
-        },
-        suffix: {
-            true: ["absolute"],
-            false: [""],
+            false: "",
         },
     },
-    compoundVariants: [
-        {
-            addonAfter: true,
-            suffix: true,
-            className: ["relative"],
-        },
-    ],
 });
 /**
@@ -335,25 +289,12 @@ const BaseInput = React.forwardRef((_a, ref) => {
             className,
         }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
-                    addonBefore: addonBefore !== undefined,
-                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ "aria-required": rest.required, autoFocus: rest.autoFocus, className: cvaInputField({
-                    autoFocus: rest.autoFocus,
-                    size: fieldSize,
-                    disabled: renderAsDisabled,
-                    className: inputClassName,
-                    addonBefore: addonBefore !== undefined,
-                    prefix: addonBefore !== prefix,
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
+                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ "aria-required": rest.required, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
-                    addonAfter: addonAfter !== undefined && addonBefore !== addonAfter,
-                    actions: (actions && addonBefore !== actions) || false,
                 }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true &&
                 showDefaultActions &&
                 ((_b = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
-                ((_c = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _c === void 0 ? void 0 : _c.value.length) > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? (jsx("div", { className: cvaInputAction({
-                    addonAfter: addonAfter !== undefined && addonBefore !== addonAfter,
-                    suffix: addonBefore !== suffix,
-                }), children: actions })) : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+                ((_c = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _c === void 0 ? void 0 : _c.value.length) > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
 });
 const cvaLabel = cvaMerge([
@@ -407,11 +348,15 @@ const cvaCheckbox = cvaMerge([
     "justify-center",
     "box-border",
     "transition",
+    "focus:bg-slate-200",
     "outline-0",
     "active:bg-slate-200",
     "active:ring-2",
     "active:ring-inset",
     "active:ring-primary-700",
+    "focus:ring-2",
+    "focus:ring-inset",
+    "focus:ring-primary-700",
     "cursor-pointer",
     "group-active:ring-2",
     "group-active:ring-inset",
@@ -419,7 +364,13 @@ const cvaCheckbox = cvaMerge([
 ], {
     variants: {
         invalid: {
-            true: ["border-red-600", "active:ring-red-700", "group-focus:ring-2", "group-focus:ring-inset"],
+            true: [
+                "border-red-600",
+                "active:ring-red-700",
+                "focus:ring-red-700",
+                "group-focus:ring-2",
+                "group-focus:ring-inset",
+            ],
             false: "",
         },
         state: {
@@ -429,8 +380,11 @@ const cvaCheckbox = cvaMerge([
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
                 "active:bg-primary-700",
+                "focus:bg-primary-700",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
+                "group-focus:bg-primary-700",
+                "group-focus:border-primary-700",
             ],
             deselected: ["group-hover:bg-slate-100"],
             indeterminate: [
@@ -438,10 +392,14 @@ const cvaCheckbox = cvaMerge([
                 "border-primary-600",
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
+                "focus:bg-primary-800",
+                "focus:border-primary-800",
                 "active:bg-primary-800",
                 "active:border-primary-800",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
+                "group-focus:bg-primary-800",
+                "group-focus:border-primary-800",
             ],
         },
         disabled: {
@@ -449,8 +407,13 @@ const cvaCheckbox = cvaMerge([
                 "bg-slate-300",
                 "border-slate-300",
                 "cursor-not-allowed",
+                "group-hover:bg-slate-300",
+                "group-focus:bg-slate-300",
                 "hover:bg-slate-300",
+                "focus:bg-slate-300",
                 "active:bg-slate-300",
+                "focus:ring-0",
+                "focus:ring-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -806,7 +769,7 @@ const validateEmailAddress = (email) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange", "disableAction"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
     const [email, setEmail] = React.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -818,7 +781,7 @@ const EmailInput = React.forwardRef((_a, ref) => {
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
     return (jsx(BaseInput, Object.assign({ actions: email &&
-            email.length > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-emailIcon`, disabled: disableAction || isInvalid, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })), dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
+            email.length > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-emailIcon`, disabled: disabled, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })), dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
 });
 /**
@@ -1041,7 +1004,7 @@ const PhoneInput = forwardRef((_a, ref) => {
     }, [onFocus]);
     return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsx(BaseInput, Object.assign({ actions: !disableAction &&
                 innerValue &&
-                (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disableAction || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, 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)) }));
+                (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, 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)) }));
 });
 /**
@@ -1139,6 +1102,9 @@ const cvaRadioItem = cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
+    "focus:ring-2",
+    "focus:ring-inset",
+    "focus:ring-primary-700",
 ], {
     variants: {
         checked: {
@@ -1154,6 +1120,10 @@ const cvaRadioItem = cvaMerge([
                 "active:ring-2",
                 "active:ring-inset",
                 "active:ring-primary-700",
+                "focus:bg-slate-200",
+                "focus:ring-2",
+                "focus:ring-inset",
+                "focus:ring-primary-700",
                 "group-active:ring-2",
                 "group-active:ring-inset",
                 "group-active:ring-primary-700",
@@ -1161,7 +1131,13 @@ const cvaRadioItem = cvaMerge([
             false: "",
         },
         invalid: {
-            true: ["border-red-600", "active:ring-red-700"],
+            true: [
+                "border-red-600",
+                "active:ring-red-700",
+                "focus:ring-red-700",
+                "group-focus:ring-2",
+                "group-focus:ring-inset",
+            ],
             false: "",
         },
         disabled: {
@@ -1169,8 +1145,13 @@ const cvaRadioItem = cvaMerge([
                 "bg-slate-400",
                 "border-slate-300",
                 "cursor-not-allowed",
+                "group-hover:bg-slate-400",
+                "group-focus:bg-slate-400",
                 "hover:bg-slate-400",
+                "focus:bg-slate-400",
                 "active:bg-slate-400",
+                "focus:ring-0",
+                "focus:ring-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -1414,13 +1395,21 @@ const cvaSearch = cvaMerge([
     "component-search-background",
     "hover:component-search-background",
     "hover:component-search-focus-hover",
+    "focus:component-search-focus-hover",
+    "focus-within:component-search-focus-within",
     "transition-all",
     "duration-300",
 ], {
     variants: {
         border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
-            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
+            true: [
+                "component-search-width",
+                "component-search-widen",
+                "hover:component-search-widen",
+                "focus-within:component-search-widen-focus",
+                "focus-within:w-full",
+            ],
             false: "w-full",
         },
     },
@@ -1444,74 +1433,37 @@ const cvaSelect = cvaMerge([
     "flex",
     "shadow-sm",
     "rounded-lg",
+    "border",
     "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-inset",
+    "focus-within:ring-primary-600",
+    "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
     "bg-white",
     "transition",
+    "overflow-hidden",
 ], {
     variants: {
         invalid: {
-            true: "border border-red-600 text-red-600 hover:border-red-600",
+            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100 hover:border-slate-300",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        invalid: false,
-        disabled: false,
-    },
-});
-const cvaSelectControl = cvaMerge([], {
-    variants: {
-        isDisabled: {
             true: "!bg-slate-100",
             false: "",
         },
-        prefix: {
-            true: ["ps-7"],
-            false: "",
-        },
-        invalid: {
-            true: "!border-0",
-            false: "",
-        },
     },
     defaultVariants: {
-        isDisabled: false,
-        prefix: false,
         invalid: false,
+        disabled: false,
     },
 });
-const cvaSelectIcon = cvaMerge([
-    "mr-2",
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-slate-400",
-    "hover:text-slate-500",
-]);
-const cvaSelectPrefix = cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "text-slate-400",
-    "pl-2",
-    "absolute",
-    "inset-y-0",
-]);
+const cvaSelectIcon = cvaMerge("mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500");
+const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
 const cvaSelectXIcon = cvaMerge([
-    "mr-2",
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-slate-400",
-    "hover:text-slate-500",
+    "mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500",
     "ml-1",
 ]);
 const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
@@ -1695,7 +1647,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  *  @param {JSX.Element} dropdownIcon an custom dropdown icon
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError) => {
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
@@ -1734,7 +1686,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 }
                 return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
-                return jsx(Spinner, { className: "mr-1 mt-1.5", size: "small" });
+                return jsx(Spinner, { className: "mt-1.5 mr-1", size: "small" });
             }, DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
                 return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
@@ -1744,11 +1696,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 }
                 return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, onClick: props.clearValue, children: jsx(Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
             }, Control: props => {
-                return (jsx(components.Control, Object.assign({}, props, { className: cvaSelectControl({
-                        isDisabled: props.isDisabled,
-                        prefix: prefix ? true : false,
-                        invalid: hasError,
-                    }) })));
+                return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
                 return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
             }, Menu: props => {
@@ -1788,16 +1736,18 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
 const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
     const customStyles = React.useMemo(() => {
         return Object.assign({ control: base => {
-                return Object.assign(Object.assign({}, base), { borderRadius: "var(--border-radius-lg)", backgroundColor: "" });
+                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
+                        border: "0",
+                    }, 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: () => ({
                 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 === null || refContainer === void 0 ? void 0 : 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 => {
+            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width, transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", 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 => {
+            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
                 return Object.assign(Object.assign({}, base), { padding: "0px" });
             } }, styles);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1819,7 +1769,7 @@ const useSelect = (_a) => {
     const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
     const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
     const refMenuIsEnabled = React__default.useRef(true);
-    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
         onMenuOpen && onMenuOpen();
@@ -1892,8 +1842,6 @@ const CreatableSelect = (props) => {
         onInputChange,
         allowCreateWhileLoading,
         onCreateOption,
-        isDisabled: disabled || props.isDisabled,
-        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
     return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactCreatableSelect, Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
@@ -1937,8 +1885,6 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
         hideSelectedOptions,
-        isDisabled: disabled || props.isDisabled,
-        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
     return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, rest, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactSelect, Object.assign({}, rest, selectProps, { isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
@@ -2030,6 +1976,7 @@ const cvaTextArea = cvaMerge([
     "text-base",
     "text-slate-900",
     "placeholder-slate-400",
+    "focus-visible:outline-none",
     "w-full",
     "h-20",
     "transition",
@@ -2106,7 +2053,7 @@ const TextField = React.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: 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 })) }));
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(TextInput, Object.assign({ "aria-labelledby": htmlFor + "-label", disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
 });
 /**
@@ -2124,7 +2071,16 @@ const TimeRangeField = (_a) => {
 const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
 cvaMerge(["relative"]);
-const cvaToggleTrack = cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
+const cvaToggleTrack = cvaMerge([
+    "shrink-0",
+    "p-1",
+    "cursor-pointer",
+    "rounded-full",
+    "bg-slate-300",
+    "focus:bg-slate-400",
+    "hover:bg-slate-400",
+    "active:bg-slate-500",
+], {
     variants: {
         size: {
             small: ["w-8", "h-4"],
@@ -2135,7 +2091,7 @@ const cvaToggleTrack = cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-f
             false: "",
         },
         toggled: {
-            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: ["bg-primary-600", "focus:bg-primary-700", "hover:bg-primary-700", "active:bg-primary-800"],
             false: "",
         },
     },
@@ -2253,7 +2209,7 @@ const UrlInput = 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 [url, setUrl] = 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 (jsx(BaseInput, Object.assign({ dataTestId: dataTestId && `${dataTestId}-url-input`, 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 && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
+    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId && `${dataTestId}-url-input`, 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 && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disabled, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
 });
 /**
@@ -2269,7 +2225,7 @@ const UrlField = forwardRef((_a, ref) => {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 /**
@@ -2376,4 +2332,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.428",
+  "version": "0.0.429",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/BaseInput/BaseInput.variants.d.ts CHANGED Viewed

@@ -9,23 +9,13 @@ export declare const cvaInput: (props?: ({
 export declare const cvaInputField: (props?: ({
     size?: "small" | "medium" | null | undefined;
     disabled?: boolean | null | undefined;
-    autoFocus?: boolean | null | undefined;
-    addonBefore?: boolean | null | undefined;
-    prefix?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputAddon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaInputAddonBefore: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputAddonAfter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaInputPrefix: (props?: ({
     disabled?: boolean | null | undefined;
-    addonBefore?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputSuffix: (props?: ({
     disabled?: boolean | null | undefined;
-    addonAfter?: boolean | null | undefined;
-    actions?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaInputAddonAfter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputAction: (props?: ({
-    addonAfter?: boolean | null | undefined;
-    suffix?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/EmailInput/EmailInput.d.ts CHANGED Viewed

@@ -1,17 +1,5 @@
 import * as React from "react";
 import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export interface EmailInputProps extends BaseInputExposedProps {
-    /**
-     * To disable the action button.
-     *
-     * @default false
-     * @memberof EmailInputProps
-     * @example
-     * <UrLInput disableAction />
-     */
-    disableAction?: boolean;
-}
 /**
  * A Email Input component is used for input of the type Email.
  *
@@ -22,5 +10,4 @@ export interface EmailInputProps extends BaseInputExposedProps {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+export declare const EmailInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/Select/Select.variants.d.ts CHANGED Viewed

@@ -2,11 +2,6 @@ export declare const cvaSelect: (props?: ({
     invalid?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectControl: (props?: ({
-    isDisabled?: boolean | null | undefined;
-    prefix?: boolean | null | undefined;
-    invalid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaSelectIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaSelectPrefix: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaSelectXIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Select/useCustomComponents.d.ts CHANGED Viewed

@@ -16,4 +16,4 @@ import { SelectComponents } from "react-select/dist/declarations/src/components"
  *  @param {JSX.Element} dropdownIcon an custom dropdown icon
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsOpen: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element, prefix?: JSX.Element, hasError?: boolean) => Partial<SelectComponents<Option, IsMulti, Group>>;
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsOpen: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;