npm - @trackunit/react-form-components - Versions diffs - 0.0.424 → 0.0.427 - Mend

@trackunit/react-form-components 0.0.424 → 0.0.427

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 +159 -113
package/index.esm.js +158 -114
package/package.json +1 -1
package/src/components/BaseInput/BaseInput.variants.d.ts +11 -1
package/src/components/EmailInput/EmailInput.d.ts +14 -1
package/src/components/Select/Select.variants.d.ts +5 -0
package/src/components/Select/useCustomComponents.d.ts +1 -1

package/index.cjs.js CHANGED Viewed

@@ -213,16 +213,12 @@ 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", "focus-within:ring-danger-600"]);
+const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
 const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
@@ -231,24 +227,15 @@ 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",
-    "focus-visible:outline-none",
-], {
+const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
     variants: {
         size: {
             small: ["py-1"],
@@ -256,9 +243,28 @@ const cvaInputField = cssClassVarianceUtilities.cvaMerge([
         },
         disabled: {
             true: ["text-slate-700"],
-            false: "",
+            false: [""],
+        },
+        autoFocus: {
+            true: [""],
+            false: ["focus-visible:outline-none"],
+        },
+        addonBefore: {
+            true: [""],
+            false: [""],
+        },
+        prefix: {
+            true: ["ps-10"],
+            false: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonBefore: true,
+            prefix: true,
+            className: ["ps-4"],
+        },
+    ],
 });
 const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -270,7 +276,6 @@ 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",
@@ -280,21 +285,62 @@ const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
     "component-baseInput-prefix",
     "component-search-borderless",
     "pl-3",
+    "absolute",
+    "inset-y-0",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            false: [""],
+        },
+        addonBefore: {
+            true: ["relative"],
+            false: [""],
         },
     },
 });
-const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
+const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            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: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonAfter: true,
+            suffix: true,
+            className: ["relative"],
+        },
+    ],
 });
 /**
@@ -319,12 +365,25 @@ 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,
-                }), "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({
+                    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({
                     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 ? 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 ? (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] }));
 });
 const cvaLabel = cssClassVarianceUtilities.cvaMerge([
@@ -378,15 +437,11 @@ 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",
@@ -394,13 +449,7 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
 ], {
     variants: {
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700", "group-focus:ring-2", "group-focus:ring-inset"],
             false: "",
         },
         state: {
@@ -410,11 +459,8 @@ 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: [
@@ -422,14 +468,10 @@ 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: {
@@ -437,13 +479,8 @@ 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",
             ],
@@ -799,7 +836,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 } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange", "disableAction"]);
     const [email, setEmail] = React__namespace.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -811,7 +848,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: 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)));
+            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)));
 });
 /**
@@ -1034,7 +1071,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: 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)) }));
+                (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)) }));
 });
 /**
@@ -1132,9 +1169,6 @@ 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: {
@@ -1150,10 +1184,6 @@ 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",
@@ -1161,13 +1191,7 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700"],
             false: "",
         },
         disabled: {
@@ -1175,13 +1199,8 @@ 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",
             ],
@@ -1425,21 +1444,13 @@ 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",
-                "focus-within:component-search-widen-focus",
-                "focus-within:w-full",
-            ],
+            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
             false: "w-full",
         },
     },
@@ -1463,25 +1474,19 @@ 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-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            true: "border border-red-600 text-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100",
+            true: "!bg-slate-100 hover:border-slate-300",
             false: "",
         },
     },
@@ -1490,10 +1495,53 @@ const cvaSelect = cssClassVarianceUtilities.cvaMerge([
         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"]);
+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,
+    },
+});
+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 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"], {
@@ -1677,7 +1725,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) => {
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError) => {
     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(() => {
@@ -1716,7 +1764,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: "mt-1.5 mr-1", size: "small" });
+                return jsxRuntime.jsx(reactComponents.Spinner, { className: "mr-1 mt-1.5", 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 }) })));
@@ -1726,7 +1774,11 @@ 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: props.isDisabled ? "bg-slate-100" : "" }));
+                return (jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, 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 => {
@@ -1766,18 +1818,16 @@ 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), { border: "0", boxShadow: "0", "&:hover": {
-                        border: "0",
-                    }, backgroundColor: "" });
+                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: () => ({
                 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, 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 => {
+            }, 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 => {
                 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), { border: "none", width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
+            }, 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);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1799,7 +1849,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);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError);
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
         onMenuOpen && onMenuOpen();
@@ -1872,6 +1922,8 @@ 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 })))] }));
@@ -1915,6 +1967,8 @@ 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 })))] }));
@@ -2006,7 +2060,6 @@ const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
     "text-base",
     "text-slate-900",
     "placeholder-slate-400",
-    "focus-visible:outline-none",
     "w-full",
     "h-20",
     "transition",
@@ -2083,7 +2136,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", disabled: rest.readOnly, 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", id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
 });
 /**
@@ -2101,16 +2154,7 @@ 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",
-    "focus:bg-slate-400",
-    "hover:bg-slate-400",
-    "active:bg-slate-500",
-], {
+const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
     variants: {
         size: {
             small: ["w-8", "h-4"],
@@ -2121,7 +2165,7 @@ const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         toggled: {
-            true: ["bg-primary-600", "focus:bg-primary-700", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
             false: "",
         },
     },
@@ -2239,7 +2283,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 || disabled, 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 || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
 });
 /**
@@ -2255,7 +2299,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", disabled: rest.disabled, 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", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 /**
@@ -2414,6 +2458,7 @@ exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
 exports.cvaActionButton = cvaActionButton;
 exports.cvaActionContainer = cvaActionContainer;
 exports.cvaInput = cvaInput;
+exports.cvaInputAction = cvaInputAction;
 exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputAddonAfter = cvaInputAddonAfter;
 exports.cvaInputAddonBefore = cvaInputAddonBefore;
@@ -2424,6 +2469,7 @@ 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,16 +183,12 @@ 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", "focus-within:ring-danger-600"]);
+const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
 const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
@@ -201,24 +197,15 @@ 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",
-    "focus-visible:outline-none",
-], {
+const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
     variants: {
         size: {
             small: ["py-1"],
@@ -226,9 +213,28 @@ const cvaInputField = cvaMerge([
         },
         disabled: {
             true: ["text-slate-700"],
-            false: "",
+            false: [""],
+        },
+        autoFocus: {
+            true: [""],
+            false: ["focus-visible:outline-none"],
+        },
+        addonBefore: {
+            true: [""],
+            false: [""],
+        },
+        prefix: {
+            true: ["ps-10"],
+            false: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonBefore: true,
+            prefix: true,
+            className: ["ps-4"],
+        },
+    ],
 });
 const cvaInputAddon = cvaMerge([
     "flex",
@@ -240,7 +246,6 @@ 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",
@@ -250,21 +255,62 @@ const cvaInputPrefix = cvaMerge([
     "component-baseInput-prefix",
     "component-search-borderless",
     "pl-3",
+    "absolute",
+    "inset-y-0",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            false: [""],
+        },
+        addonBefore: {
+            true: ["relative"],
+            false: [""],
         },
     },
 });
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            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: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonAfter: true,
+            suffix: true,
+            className: ["relative"],
+        },
+    ],
 });
 /**
@@ -289,12 +335,25 @@ 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,
-                }), "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({
+                    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({
                     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 ? 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 ? (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] }));
 });
 const cvaLabel = cvaMerge([
@@ -348,15 +407,11 @@ 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",
@@ -364,13 +419,7 @@ const cvaCheckbox = cvaMerge([
 ], {
     variants: {
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700", "group-focus:ring-2", "group-focus:ring-inset"],
             false: "",
         },
         state: {
@@ -380,11 +429,8 @@ 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: [
@@ -392,14 +438,10 @@ 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: {
@@ -407,13 +449,8 @@ 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",
             ],
@@ -769,7 +806,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 } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange", "disableAction"]);
     const [email, setEmail] = React.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -781,7 +818,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: 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)));
+            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)));
 });
 /**
@@ -1004,7 +1041,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: 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)) }));
+                (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)) }));
 });
 /**
@@ -1102,9 +1139,6 @@ const cvaRadioItem = cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
-    "focus:ring-2",
-    "focus:ring-inset",
-    "focus:ring-primary-700",
 ], {
     variants: {
         checked: {
@@ -1120,10 +1154,6 @@ 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",
@@ -1131,13 +1161,7 @@ const cvaRadioItem = cvaMerge([
             false: "",
         },
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700"],
             false: "",
         },
         disabled: {
@@ -1145,13 +1169,8 @@ 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",
             ],
@@ -1395,21 +1414,13 @@ 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",
-                "focus-within:component-search-widen-focus",
-                "focus-within:w-full",
-            ],
+            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
             false: "w-full",
         },
     },
@@ -1433,25 +1444,19 @@ 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-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            true: "border border-red-600 text-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100",
+            true: "!bg-slate-100 hover:border-slate-300",
             false: "",
         },
     },
@@ -1460,10 +1465,53 @@ const cvaSelect = cvaMerge([
         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"]);
+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,
+    },
+});
+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 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"], {
@@ -1647,7 +1695,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) => {
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
@@ -1686,7 +1734,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: "mt-1.5 mr-1", size: "small" });
+                return jsx(Spinner, { className: "mr-1 mt-1.5", 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 }) })));
@@ -1696,7 +1744,11 @@ 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: props.isDisabled ? "bg-slate-100" : "" }));
+                return (jsx(components.Control, Object.assign({}, props, { className: cvaSelectControl({
+                        isDisabled: props.isDisabled,
+                        prefix: prefix ? true : false,
+                        invalid: hasError,
+                    }) })));
             }, 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 => {
@@ -1736,18 +1788,16 @@ 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), { border: "0", boxShadow: "0", "&:hover": {
-                        border: "0",
-                    }, backgroundColor: "" });
+                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: () => ({
                 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, 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 => {
+            }, 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 => {
                 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), { border: "none", width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
+            }, 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);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1769,7 +1819,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);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError);
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
         onMenuOpen && onMenuOpen();
@@ -1842,6 +1892,8 @@ 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 })))] }));
@@ -1885,6 +1937,8 @@ 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 })))] }));
@@ -1976,7 +2030,6 @@ const cvaTextArea = cvaMerge([
     "text-base",
     "text-slate-900",
     "placeholder-slate-400",
-    "focus-visible:outline-none",
     "w-full",
     "h-20",
     "transition",
@@ -2053,7 +2106,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", disabled: rest.readOnly, 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", id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
 });
 /**
@@ -2071,16 +2124,7 @@ 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",
-    "focus:bg-slate-400",
-    "hover:bg-slate-400",
-    "active:bg-slate-500",
-], {
+const cvaToggleTrack = cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
     variants: {
         size: {
             small: ["w-8", "h-4"],
@@ -2091,7 +2135,7 @@ const cvaToggleTrack = cvaMerge([
             false: "",
         },
         toggled: {
-            true: ["bg-primary-600", "focus:bg-primary-700", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
             false: "",
         },
     },
@@ -2209,7 +2253,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 || disabled, 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 || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
 });
 /**
@@ -2225,7 +2269,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", disabled: rest.disabled, 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", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 /**
@@ -2332,4 +2376,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, 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 };
+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 };

package/package.json CHANGED Viewed

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

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

@@ -9,13 +9,23 @@ 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,5 +1,17 @@
 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.
  *
@@ -10,4 +22,5 @@ import { BaseInputProps } from "../BaseInput";
  * 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<BaseInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -2,6 +2,11 @@ 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) => 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, prefix?: JSX.Element, hasError?: boolean) => Partial<SelectComponents<Option, IsMulti, Group>>;