asma-ui-core 3.24.0 → 3.25.0

package/dist/components/data-display/interactive-chip/StyledInteractiveChip.js

@@ -2,23 +2,23 @@ import { StyledChip as v } from "../chip/StyledChip.js";
 import { StyledCheckbox as b } from "../../inputs/checkbox/StyledCheckbox.js";
 import { StyledRadio as m } from "../../inputs/radio-button/StyledRadio.js";
 import { forwardRef as u } from "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 var S = u(({ type: i = "checkbox", checked: a, size: c = "small", ...o }, n) => {
-  const r = i === "checkbox", s = r ? b : m, d = !o.readOnly && !r && a, e = {
+  const r = i === "checkbox", s = r ? b : m, d = !o.readOnly && !r && a, l = {
     borderColor: "var(--colors-gama-300)",
     backgroundColor: "var(--colors-gama-25)",
     boxShadow: "0 0 0 1px inset var(--colors-gama-300)"
-  }, l = o.ariaLabel ?? (typeof o.label == "string" ? o.label : void 0);
-  return /* @__PURE__ */ t(v, {
+  }, t = o.ariaLabel ?? (typeof o.label == "string" ? o.label : void 0);
+  return /* @__PURE__ */ e(v, {
     ref: n,
-    "aria-label": l,
-    avatar: /* @__PURE__ */ t(s, {
+    "aria-label": t,
+    avatar: /* @__PURE__ */ e(s, {
       dataTest: o.dataTest,
       disableRipple: !0,
       checked: a,
       size: c,
       sx: { pointerEvents: "none" },
-      inputProps: { "aria-label": l }
+      slotProps: { input: { "aria-label": t } }
     }),
     clickable: !0,
     tabIndex: 0,
@@ -29,7 +29,7 @@ var S = u(({ type: i = "checkbox", checked: a, size: c = "small", ...o }, n) =>
         borderColor: "var(--colors-gama-400)",
         boxShadow: "0 0 0 1px inset var(--colors-gama-400)",
         backgroundColor: "var(--colors-gama-50)",
-        "&:hover": e
+        "&:hover": l
       },
       ...a && { "& .MuiChip-avatar": { "& .MuiSvgIcon-root": { color: "var(--colors-gama-500)" } } },
       ...o.readOnly && { "& .MuiChip-avatar": {
@@ -37,7 +37,7 @@ var S = u(({ type: i = "checkbox", checked: a, size: c = "small", ...o }, n) =>
         "& .MuiCheckbox-root, & .MuiRadio-root": { color: "var(--colors-delta-500)" },
         "& .Mui-checked": { color: "var(--colors-delta-500)" }
       } },
-      "&:focus:hover": e,
+      "&:focus:hover": l,
       ...o.sx
     }
   });

package/dist/components/data-display/tooltip/StyledTooltip.js

@@ -1,38 +1,37 @@
 import { Tooltip as e } from "@mui/material";
 import { jsx as i } from "react/jsx-runtime";
-import n from "@mui/material/Fade";
-var x = (r) => {
-  const { componentsProps: t, ...p } = r, o = t?.tooltip;
+import { mergeSlotProps as r } from "@mui/material/utils";
+import l from "@mui/material/Fade";
+var a = {
+  borderRadius: "3px",
+  "& .MuiTooltip-arrow": { color: "#363E4A" },
+  color: "white",
+  boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)",
+  display: "flex",
+  padding: "4px 8px",
+  alignItems: "center",
+  fontSize: "12px",
+  lineHeight: "16px",
+  letterSpacing: "0.24px",
+  bgcolor: "#363E4A",
+  wordBreak: "break-word"
+}, d = (p) => {
+  const { slotProps: o, ...t } = p;
   return /* @__PURE__ */ i(e, {
-    TransitionComponent: n,
-    TransitionProps: { timeout: 300 },
     enterDelay: 500,
     placement: "top",
-    componentsProps: {
-      ...t,
-      tooltip: {
-        ...o ?? {},
-        style: { ...o?.style ?? {} },
-        sx: {
-          borderRadius: "3px",
-          "& .MuiTooltip-arrow": { color: "#363E4A" },
-          color: "white",
-          boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)",
-          display: "flex",
-          padding: "4px 8px",
-          alignItems: "center",
-          fontSize: "12px",
-          lineHeight: "16px",
-          letterSpacing: "0.24px",
-          bgcolor: "#363E4A",
-          wordBreak: "break-word",
-          ...o?.sx
-        }
-      }
+    ...t,
+    slots: {
+      transition: l,
+      ...t.slots
     },
-    ...p
+    slotProps: {
+      ...o,
+      transition: r(o?.transition, { timeout: 300 }),
+      tooltip: r(o?.tooltip, { sx: a })
+    }
   });
 };
 export {
-  x as StyledTooltip
+  d as StyledTooltip
 };

package/dist/components/inputs/checkbox/base-ui/StyledCheckbox.js

@@ -2,7 +2,7 @@ import { cn as C } from "../../../../helpers/cn.js";
 import e from "./StyledCheckbox.module.js";
 import p, { useEffect as E } from "react";
 import { jsx as t, jsxs as k } from "react/jsx-runtime";
-import { Checkbox as f } from "@base-ui/react";
+import { Checkbox as f } from "@base-ui/react/checkbox";
 var L = (n) => /* @__PURE__ */ k("svg", {
   viewBox: "0 0 24 24",
   width: "100%",

package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js

@@ -1,160 +1,160 @@
-import { cn as D } from "../../../../helpers/cn.js";
+import { cn as V } from "../../../../helpers/cn.js";
 import { LoadingIcon as Q } from "../../../icons/loading-icon/LoadingIcon.js";
 import { CheckIcon as U } from "../../../icons/check-icon/CheckIcon.js";
 import { PlusIconCircle as X } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as j } from "../../../data-display/chip/StyledChip.js";
-import { StyledTooltip as A } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledChip as D } from "../../../data-display/chip/StyledChip.js";
+import { StyledTooltip as j } from "../../../data-display/tooltip/StyledTooltip.js";
 import { StyledCheckbox as Y } from "../../checkbox/base-ui/StyledCheckbox.js";
 import { StyledInputField as Z } from "../../input-field/StyledInputField.js";
 import { StyledSelectAutocomplete as ee } from "../../select-autocomplete/StyledSelectAutocomplete.js";
 import { DynamicInteractiveChipGroup as te } from "./DynamicInteractiveChipGroup.js";
-import { createElement as L, forwardRef as le, useCallback as b, useState as ae } from "react";
-import { Fragment as V, jsx as l, jsxs as x } from "react/jsx-runtime";
-var ge = le((v, $) => {
-  const [q, w] = ae(!1), { options: y, dataTest: O, value: d, readOnly: u, multiple: n, required: B, onChange: m, size: E, title: S, noOptionsText: z, placeholder: F, disabled: k, helperText: K, disableHelperText: H, error: R, valueKey: I = "value", labelKey: G = "label", renderLabel: i, getOptionTooltip: N, startAdornment: W, autocompleteProps: r, loading: p, maxTags: _ } = v, f = y.length < 11, s = (e) => typeof e == "object" ? e?.[G]?.toString() ?? "" : e?.toString() ?? "", h = b((e) => typeof e == "object" ? e?.[I] : e, [I]), g = b((e, t) => h(e) === h(t), [h]), C = (e) => {
-    const t = h(e);
-    return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
+import { createElement as L, forwardRef as le, useCallback as b, useState as re } from "react";
+import { Fragment as $, jsx as l, jsxs as x } from "react/jsx-runtime";
+var ge = le((O, q) => {
+  const [B, T] = re(!1), { options: y, dataTest: S, value: i, readOnly: d, multiple: a, required: E, onChange: C, size: z, title: k, noOptionsText: F, placeholder: K, disabled: N, helperText: H, disableHelperText: R, error: G, valueKey: A = "value", labelKey: W = "label", renderLabel: s, getOptionTooltip: I, startAdornment: _, autocompleteProps: n, loading: u, maxTags: J } = O, m = y.length < 11, c = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = b((e) => typeof e == "object" ? e?.[A] : e, [A]), f = b((e, t) => typeof t == "string" ? !1 : p(e) === p(t), [p]), v = (e) => {
+    const t = p(e);
+    return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : c(e);
   }, P = b((e) => {
-    w(!0), r?.onOpen?.(e);
-  }, [r]), J = b((e, t) => {
-    w(!1), r?.onClose?.(e, t);
-  }, [r]);
-  return n && u ? /* @__PURE__ */ l(te, { ...v }) : /* @__PURE__ */ x("div", {
+    T(!0), n?.onOpen?.(e);
+  }, [n]), M = b((e, t) => {
+    T(!1), n?.onClose?.(e, t);
+  }, [n]);
+  return a && d ? /* @__PURE__ */ l(te, { ...O }) : /* @__PURE__ */ x("div", {
     className: "flex w-full flex-col gap-y-1",
-    children: [S && /* @__PURE__ */ l("span", {
+    children: [k && /* @__PURE__ */ l("span", {
       className: "text-base font-semibold text-delta-800",
-      children: S
+      children: k
     }), /* @__PURE__ */ l(ee, {
-      open: q,
+      open: B,
       onOpen: P,
-      onClose: J,
-      disableCloseOnSelect: n,
-      dataTest: O,
-      disabled: !!k || !!p,
-      noOptionsText: z,
-      loading: p,
-      readOnly: u,
-      value: d,
-      size: E,
-      disableClearable: B,
+      onClose: M,
+      disableCloseOnSelect: a,
+      dataTest: S,
+      disabled: !!N || !!u,
+      noOptionsText: F,
+      loading: u,
+      readOnly: d,
+      value: i,
+      size: z,
+      disableClearable: E,
       options: y,
       fullWidth: !0,
       classes: { listbox: "h-full max-h-[300px]" },
-      getOptionLabel: r?.getOptionLabel ?? s,
+      getOptionLabel: n?.getOptionLabel ?? c,
       onChange: (e, t) => {
-        m(t);
+        C(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: r?.isOptionEqualToValue ?? g,
+      isOptionEqualToValue: n?.isOptionEqualToValue ?? f,
       autoHeight: !0,
-      multiple: n,
-      renderTags: (e) => {
-        const t = _ ?? y.length, a = e.slice(0, t), c = e.length - t;
+      multiple: a,
+      renderValue: a ? (e) => {
+        if (!Array.isArray(e)) return null;
+        const t = e, r = J ?? y.length, h = t.slice(0, r), g = t.length - r;
         return /* @__PURE__ */ x("div", {
           className: "flex flex-wrap gap-2",
-          children: [a.map((o) => /* @__PURE__ */ l(j, {
-            dataTest: `${C(o)}-chip`,
-            readOnly: u,
+          children: [h.map((o) => /* @__PURE__ */ l(D, {
+            dataTest: `${v(o)}-chip`,
+            readOnly: d,
             variant: "outlined",
-            label: i ? i(o) : s(o),
+            label: s ? s(o) : c(o),
             classes: {
               root: "h-fit w-fit min-h-[32px]",
               label: "block whitespace-normal"
             },
-            disabled: !!k || !!p,
+            disabled: !!N || !!u,
             onDelete: () => {
-              if (!n) {
-                m(null);
-                return;
-              }
-              m(d.filter((T) => !g(T, o)));
+              Array.isArray(i) && C(i.filter((w) => !f(w, o)));
             }
-          }, C(o))), c > 0 && /* @__PURE__ */ l(j, {
+          }, v(o))), g > 0 && /* @__PURE__ */ l(D, {
             dataTest: "remaining-count-tag-chip",
-            label: `+${c}`,
+            label: `+${g}`,
             variant: "outlined",
             onClick: P
           })]
         });
-      },
-      popupIcon: p ? /* @__PURE__ */ l(Q, {
+      } : void 0,
+      popupIcon: u ? /* @__PURE__ */ l(Q, {
         height: 24,
         width: 24
-      }) : n ? /* @__PURE__ */ l(X, {
+      }) : a ? /* @__PURE__ */ l(X, {
         height: 24,
         width: 24
       }) : void 0,
       renderOption: (e, t) => {
-        const a = typeof t == "object" ? !!t?.disabled : !1, c = N ? N(t) : null;
-        if (n) {
-          const T = !!d?.find((M) => g(M, t));
+        const r = typeof t == "object" ? !!t?.disabled : !1, h = I ? I(t) : null;
+        if (a) {
+          const o = !!i?.find((w) => f(w, t));
           return /* @__PURE__ */ L("li", {
             ...e,
             key: e.id,
-            onClick: a ? void 0 : e.onClick,
-            className: D("flex h-full cursor-pointer gap-x-1 bg-white text-sm/5 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
-            "aria-disabled": a
-          }, /* @__PURE__ */ l(A, {
+            onClick: r ? void 0 : e.onClick,
+            className: V("flex h-full cursor-pointer gap-x-1 bg-white text-sm/5 hover:bg-gama-50", r && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
+            "aria-disabled": r
+          }, /* @__PURE__ */ l(j, {
             arrow: !0,
-            title: c,
-            children: /* @__PURE__ */ x(V, { children: [/* @__PURE__ */ l(Y, {
-              disabled: a,
-              dataTest: `${C(t)}-checkbox`,
+            title: h,
+            children: /* @__PURE__ */ x($, { children: [/* @__PURE__ */ l(Y, {
+              disabled: r,
+              dataTest: `${v(t)}-checkbox`,
               size: "small",
               className: "min-w-[36px]",
-              checked: T
-            }), i ? i(t) : /* @__PURE__ */ l("span", {
+              checked: o
+            }), s ? s(t) : /* @__PURE__ */ l("span", {
               className: "h-fit py-[10px] text-sm text-delta-700",
-              children: s(t)
+              children: c(t)
             })] })
           }));
         }
-        const o = g(d, t);
+        const g = i != null && f(i, t);
         return /* @__PURE__ */ L("li", {
           ...e,
           key: e.id,
-          className: D("flex h-full cursor-pointer gap-x-1 px-2 text-sm/5 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
-          onClick: a ? void 0 : e.onClick,
-          "aria-disabled": a
-        }, /* @__PURE__ */ l(A, {
+          className: V("flex h-full cursor-pointer gap-x-1 px-2 text-sm/5 hover:bg-gama-50", r && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
+          onClick: r ? void 0 : e.onClick,
+          "aria-disabled": r
+        }, /* @__PURE__ */ l(j, {
           arrow: !0,
-          title: c,
-          children: /* @__PURE__ */ x(V, { children: [/* @__PURE__ */ l("span", {
+          title: h,
+          children: /* @__PURE__ */ x($, { children: [/* @__PURE__ */ l("span", {
             className: "h-full w-5 min-w-5 py-[10px]",
-            children: o && /* @__PURE__ */ l(U, {
+            children: g && /* @__PURE__ */ l(U, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
             })
-          }), i ? i(t) : /* @__PURE__ */ l("span", {
+          }), s ? s(t) : /* @__PURE__ */ l("span", {
             className: "py-[10px] text-sm text-delta-700",
-            children: s(t)
+            children: c(t)
           })] })
         }));
       },
       renderInput: (e) => /* @__PURE__ */ l(Z, {
-        dataTest: `${O}-input-field`,
+        dataTest: `${S}-input-field`,
         ...e,
-        inputRef: $,
-        error: R,
-        helperText: H ? "" : K ?? " ",
+        inputRef: q,
+        error: G,
+        helperText: R ? "" : H ?? " ",
         variant: "outlined",
         label: "",
-        placeholder: F,
-        readOnly: u,
-        onKeyDown: f ? (t) => t.preventDefault() : void 0,
-        autoComplete: f ? "off" : "on",
-        InputProps: {
-          ...e.InputProps,
-          startAdornment: W ?? e.InputProps.startAdornment,
-          style: f ? { caretColor: "transparent" } : {}
-        },
-        inputProps: {
-          ...e.inputProps,
-          style: f ? { caretColor: "transparent" } : {}
+        placeholder: K,
+        readOnly: d,
+        onKeyDown: m ? (t) => t.preventDefault() : void 0,
+        autoComplete: m ? "off" : "on",
+        slotProps: {
+          ...e.slotProps,
+          input: {
+            ...e.slotProps?.input ?? {},
+            startAdornment: _ ?? e.slotProps?.input?.startAdornment,
+            style: m ? { caretColor: "transparent" } : {}
+          },
+          htmlInput: {
+            ...e.slotProps?.htmlInput ?? {},
+            style: m ? { caretColor: "transparent" } : {}
+          }
         }
       }),
-      ...r
+      ...n
     })]
   });
 });

package/dist/components/inputs/input-field/StyledInputField.js

@@ -1,77 +1,83 @@
-import { CloseIcon as d } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as p } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { TextField as c } from "@mui/material";
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
-var h = ({ allowClear: l, onClear: n, readOnly: t, disabled: u, error: e, helperText: a, dataTest: s, ...r }) => /* @__PURE__ */ o(c, {
-  ...r,
-  "data-testid": s,
-  disabled: (u ?? !1) || (t ?? !1),
-  error: e,
-  helperText: t ? null : e ? /* @__PURE__ */ m("span", {
-    className: "inline-flex items-center gap-1",
-    children: [/* @__PURE__ */ o(p, {
-      width: 20,
-      height: 20,
-      className: "min-w-5"
-    }), a ?? "Required"]
-  }) : a,
-  type: r.type ?? "mui-input",
-  InputProps: {
-    ...r.InputProps,
-    endAdornment: l && r.value ? /* @__PURE__ */ o("div", {
-      role: "button",
-      className: "absolute right-4 z-40 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
-      onClick: (i) => {
-        i.stopPropagation(), i.preventDefault(), n?.();
-      },
-      children: /* @__PURE__ */ o(d, {
-        width: 18,
-        height: 18
-      })
-    }) : r.InputProps?.endAdornment
-  },
-  sx: {
-    "& input:-webkit-autofill, & .MuiInputBase-root:has(> input:-webkit-autofill)": { backgroundColor: "#e8f0fe !important" },
-    "& input": { backgroundColor: "transparent" },
-    "& .MuiInputBase-root": { backgroundColor: "transparent" },
-    "& .MuiInputBase-colorPrimary fieldset": { borderColor: "var(--colors-delta-500) !important" },
-    "& .MuiInputBase-colorPrimary.Mui-focused fieldset": { borderColor: "var(--colors-gama-400) !important" },
-    "& .MuiInputBase-colorPrimary.Mui-focused::after": { borderColor: "var(--colors-gama-400) !important" },
-    "& .MuiInputBase-colorPrimary.Mui-focused:hover fieldset": { borderColor: "var(--colors-gama-400) !important" },
-    "& .MuiInputBase-colorPrimary:hover fieldset": {
-      borderColor: "var(--colors-gama-300) !important",
-      borderWidth: "2px !important"
-    },
-    "& .MuiInputBase-colorPrimary.Mui-disabled:hover fieldset": { borderWidth: "1px !important" },
-    "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
-    "& .MuiInputBase-colorPrimary.Mui-error:hover fieldset": { borderColor: "var(--colors-error-500) !important" },
-    "& .MuiFormHelperText-root": {
-      fontSize: "14px",
-      marginLeft: 0
-    },
-    "& .MuiFormHelperText-root.Mui-error": { color: "var(--colors-error-500) !important" },
-    "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-300) !important" },
-    "& label.Mui-focused": { color: "var(--colors-gama-500) !important" },
-    "& label.Mui-error": { color: "var(--colors-error-500) !important" },
-    "& label.Mui-focused.MuiInputLabel-shrink": { color: "var(--colors-gama-500) !important" },
-    "& label.Mui-error.MuiInputLabel-shrink": { color: "var(--colors-error-500) !important" },
-    "& label": { color: "var(--colors-delta-500) !important" },
-    "& label.MuiInputLabel-shrink": { color: "var(--colors-delta-800) !important" },
-    "& label.Mui-disabled": { color: "var(--colors-gray-300) !important" },
-    "& .MuiOutlinedInput-input::placeholder": {
-      color: "var(--colors-delta-500) !important",
-      opacity: "1 !important"
+import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as b } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { TextField as M } from "@mui/material";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+var y = ({ allowClear: u, onClear: s, readOnly: t, disabled: d, error: e, helperText: a, dataTest: p, slotProps: i, ...r }) => {
+  const c = (d ?? !1) || (t ?? !1), l = i?.input;
+  return /* @__PURE__ */ o(M, {
+    ...r,
+    "data-testid": p,
+    disabled: c,
+    error: e,
+    helperText: t ? null : e ? /* @__PURE__ */ f("span", {
+      className: "inline-flex items-center gap-1",
+      children: [/* @__PURE__ */ o(b, {
+        width: 20,
+        height: 20,
+        className: "min-w-5"
+      }), a ?? "Required"]
+    }) : a,
+    type: r.type ?? "mui-input",
+    slotProps: {
+      ...i,
+      input: {
+        ...l,
+        endAdornment: u && r.value ? /* @__PURE__ */ o("div", {
+          role: "button",
+          className: "absolute right-4 z-40 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
+          onClick: (n) => {
+            n.stopPropagation(), n.preventDefault(), s?.();
+          },
+          children: /* @__PURE__ */ o(m, {
+            width: 18,
+            height: 18
+          })
+        }) : l?.endAdornment
+      }
     },
-    "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-300) !important" },
-    ...t && {
-      "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-800) !important" },
-      "& .MuiInputBase-colorPrimary.Mui-disabled": { backgroundColor: "var(--colors-delta-10) !important" },
-      "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-200) !important" },
-      "& label.Mui-disabled": { color: "var(--colors-gray-800) !important" }
-    },
-    ...r.sx
-  }
-});
+    sx: {
+      "& input:-webkit-autofill, & .MuiInputBase-root:has(> input:-webkit-autofill)": { backgroundColor: "#e8f0fe !important" },
+      "& input": { backgroundColor: "transparent" },
+      "& .MuiInputBase-root": { backgroundColor: "transparent" },
+      "& .MuiInputBase-colorPrimary fieldset": { borderColor: "var(--colors-delta-500) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-focused fieldset": { borderColor: "var(--colors-gama-400) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-focused::after": { borderColor: "var(--colors-gama-400) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-focused:hover fieldset": { borderColor: "var(--colors-gama-400) !important" },
+      "& .MuiInputBase-colorPrimary:hover fieldset": {
+        borderColor: "var(--colors-gama-300) !important",
+        borderWidth: "2px !important"
+      },
+      "& .MuiInputBase-colorPrimary.Mui-disabled:hover fieldset": { borderWidth: "1px !important" },
+      "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-error:hover fieldset": { borderColor: "var(--colors-error-500) !important" },
+      "& .MuiFormHelperText-root": {
+        fontSize: "14px",
+        marginLeft: 0
+      },
+      "& .MuiFormHelperText-root.Mui-error": { color: "var(--colors-error-500) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-300) !important" },
+      "& label.Mui-focused": { color: "var(--colors-gama-500) !important" },
+      "& label.Mui-error": { color: "var(--colors-error-500) !important" },
+      "& label.Mui-focused.MuiInputLabel-shrink": { color: "var(--colors-gama-500) !important" },
+      "& label.Mui-error.MuiInputLabel-shrink": { color: "var(--colors-error-500) !important" },
+      "& label": { color: "var(--colors-delta-500) !important" },
+      "& label.MuiInputLabel-shrink": { color: "var(--colors-delta-800) !important" },
+      "& label.Mui-disabled": { color: "var(--colors-gray-300) !important" },
+      "& .MuiOutlinedInput-input::placeholder": {
+        color: "var(--colors-delta-500) !important",
+        opacity: "1 !important"
+      },
+      "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-300) !important" },
+      ...t && {
+        "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-800) !important" },
+        "& .MuiInputBase-colorPrimary.Mui-disabled": { backgroundColor: "var(--colors-delta-10) !important" },
+        "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-200) !important" },
+        "& label.Mui-disabled": { color: "var(--colors-gray-800) !important" }
+      },
+      ...r.sx
+    }
+  });
+};
 export {
-  h as StyledInputField
+  y as StyledInputField
 };

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -4,7 +4,7 @@ import { CloseIcon as d } from "../../icons/close-icon/CloseIcon.js";
 import { StyledInputField as p } from "../input-field/StyledInputField.js";
 import { useState as u } from "react";
 import { jsx as o, jsxs as h } from "react/jsx-runtime";
-var g = ({ value: t, onClear: i, ...e }) => {
+var g = ({ value: t, onClear: n, ...e }) => {
   const [l, s] = u(!1), a = l || t;
   return /* @__PURE__ */ h("div", {
     className: "relative w-full",
@@ -18,37 +18,39 @@ var g = ({ value: t, onClear: i, ...e }) => {
       onBlur: () => {
         s(!1);
       },
-      InputProps: {
-        className: r("transition-[padding] duration-300", a ? "pl-0" : "pl-5"),
-        sx: { "& input": {
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          overflow: "hidden"
-        } },
-        endAdornment: t ? /* @__PURE__ */ o("div", {
-          "data-testid": "styled-search-clear-icon",
-          className: r("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
-          style: {
-            width: 24,
-            height: 24,
-            flexShrink: 0
-          },
-          onClick: (n) => {
-            n.preventDefault(), n.stopPropagation(), i?.();
-          },
-          children: /* @__PURE__ */ o(d, {
-            width: 20,
-            height: 20,
-            color: "var(--colors-delta-700)",
-            className: "pointer-events-none"
-          })
-        }) : null
+      slotProps: {
+        input: {
+          className: r("transition-[padding] duration-300", a ? "pl-0" : "pl-5"),
+          sx: { "& input": {
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden"
+          } },
+          endAdornment: t ? /* @__PURE__ */ o("div", {
+            "data-testid": "styled-search-clear-icon",
+            className: r("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
+            style: {
+              width: 24,
+              height: 24,
+              flexShrink: 0
+            },
+            onClick: (i) => {
+              i.preventDefault(), i.stopPropagation(), n?.();
+            },
+            children: /* @__PURE__ */ o(d, {
+              width: 20,
+              height: 20,
+              color: "var(--colors-delta-700)",
+              className: "pointer-events-none"
+            })
+          }) : null
+        },
+        inputLabel: { sx: {
+          transform: "translate(34px, 9px) scale(1)",
+          width: a ? void 0 : "calc(100% - 42px)",
+          "&.MuiInputLabel-shrink": { transform: "translate(16px, -9px) scale(0.75)" }
+        } }
       },
-      InputLabelProps: { sx: {
-        transform: "translate(34px, 9px) scale(1)",
-        width: a ? void 0 : "calc(100% - 42px)",
-        "&.MuiInputLabel-shrink": { transform: "translate(16px, -9px) scale(0.75)" }
-      } },
       ...e,
       sx: {
         ...e.fullWidth ? { width: "100%" } : { width: 160 },