asma-ui-core 3.42.0 → 3.43.0

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

@@ -1,20 +1,21 @@
 import { cn as C } from "../../../../helpers/cn.js";
 import e from "./StyledCheckbox.module.js";
-import E, { useEffect as m, useRef as f } from "react";
-import { jsx as o, jsxs as k } from "react/jsx-runtime";
-var H = (t) => /* @__PURE__ */ k("svg", {
+import p, { useEffect as L } from "react";
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+import { Checkbox as f } from "@base-ui/react/checkbox";
+var H = (n) => /* @__PURE__ */ k("svg", {
   viewBox: "0 0 24 24",
   width: "100%",
   height: "100%",
   fill: "none",
-  ...t,
-  children: [/* @__PURE__ */ o("title", { children: "Indeterminate icon" }), /* @__PURE__ */ o("path", {
+  ...n,
+  children: [/* @__PURE__ */ t("title", { children: "Indeterminate icon" }), /* @__PURE__ */ t("path", {
     d: "M6 12H18",
     stroke: "currentColor",
-    strokeWidth: t.strokeWidth ?? 3,
+    strokeWidth: n.strokeWidth ?? 3,
     strokeLinecap: "round"
   })]
-}), j = (t) => /* @__PURE__ */ k("svg", {
+}), j = (n) => /* @__PURE__ */ k("svg", {
   viewBox: "0 0 24 24",
   width: "100%",
   height: "100%",
@@ -23,56 +24,58 @@ var H = (t) => /* @__PURE__ */ k("svg", {
   strokeWidth: 2,
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  ...t,
-  children: [/* @__PURE__ */ o("title", { children: "Check icon" }), /* @__PURE__ */ o("path", { d: "M4 12l5 5L20 6" })]
-}), S = ({ dataTest: t, size: l = "medium", disabled: d, readOnly: c, indeterminate: n = !1, checked: h, disableRipple: x, hideWrapper: b, className: v, checkboxClassName: g, onChange: R, ...I }) => {
-  const a = !!b, i = !x && !a && !d && !c, p = f(null), u = f(null);
-  m(() => {
-    p.current && (p.current.indeterminate = n);
-  }, [n]);
-  const w = C(e.CheckboxWrapper, !a && e[`size-${l}`], a && e.HideWrapper, n && e.Indeterminate, c && e.ReadOnly, i && e.CheckboxHover, v), N = C(e.Checkbox, e[`size-${l}`], n && e.Indeterminate, g), W = n ? H : j, L = E.useCallback((r) => {
-    if (r.stopPropagation(), !i) return;
-    const s = document.createElement("span");
-    e.CheckboxRipple && (s.className = e.CheckboxRipple), s.addEventListener("animationend", () => s.remove(), { once: !0 }), u.current?.appendChild(s);
-  }, [i]);
-  return m(() => {
-    const r = u.current;
-    return () => r?.replaceChildren();
-  }, []), /* @__PURE__ */ k("label", {
-    className: w,
-    "data-testid": t,
-    onPointerDown: L,
-    "data-checked": h && !n ? "" : void 0,
-    "data-unchecked": !h && !n ? "" : void 0,
-    "data-indeterminate": n ? "" : void 0,
-    "data-disabled": d ? "" : void 0,
-    children: [
-      /* @__PURE__ */ o("input", {
-        ref: p,
-        type: "checkbox",
-        className: "sr-only",
-        checked: h,
-        disabled: d,
-        readOnly: c,
-        onChange: (r) => {
-          c || R?.(r, r.target.checked);
-        },
-        ...I
-      }),
-      !a && i && /* @__PURE__ */ o("span", {
-        ref: u,
-        className: e.CheckboxRippleContainer
-      }),
-      /* @__PURE__ */ o("span", {
-        className: N,
-        children: /* @__PURE__ */ o("span", {
-          className: e.Indicator,
-          children: /* @__PURE__ */ o(W, { strokeWidth: l === "small" ? 3 : 2 })
-        })
+  ...n,
+  children: [/* @__PURE__ */ t("title", { children: "Check icon" }), /* @__PURE__ */ t("path", { d: "M4 12l5 5L20 6" })]
+}), _ = ({ dataTest: n, size: h = "medium", disabled: m, readOnly: c, indeterminate: a = !1, checked: x, disableRipple: b, hideWrapper: v, className: I, checkboxClassName: R, onChange: u, ...i }) => {
+  const s = !!v, l = !b && !s && !m && !c, g = C(e.CheckboxWrapper, !s && e[`size-${h}`], s && e.HideWrapper, a && e.Indeterminate, c && e.ReadOnly, l && e.CheckboxHover, I), w = C(e.Checkbox, e[`size-${h}`], a && e.Indeterminate, R), W = a ? H : j, d = p.useRef(null), N = p.useCallback((o) => {
+    if (o.stopPropagation(), !l) return;
+    const r = document.createElement("span");
+    e.CheckboxRipple && (r.className = e.CheckboxRipple), r.addEventListener("animationend", () => {
+      r.remove();
+    }, { once: !0 }), d.current?.appendChild(r);
+  }, [l]);
+  L(() => {
+    const o = d.current;
+    return () => {
+      o?.replaceChildren();
+    };
+  }, []);
+  const E = p.useCallback((o) => {
+    if (c) return;
+    const r = { target: {
+      name: i.name,
+      value: i.value,
+      checked: o
+    } };
+    u?.(r, o);
+  }, [
+    u,
+    i.name,
+    i.value,
+    c
+  ]);
+  return /* @__PURE__ */ k(f.Root, {
+    className: g,
+    "data-testid": n,
+    checked: x,
+    disabled: m,
+    readOnly: c,
+    indeterminate: a,
+    onPointerDown: N,
+    onCheckedChange: E,
+    ...i,
+    children: [!s && l && /* @__PURE__ */ t("span", {
+      ref: d,
+      className: e.CheckboxRippleContainer
+    }), /* @__PURE__ */ t("span", {
+      className: w,
+      children: /* @__PURE__ */ t(f.Indicator, {
+        className: e.Indicator,
+        children: /* @__PURE__ */ t(W, { strokeWidth: h === "small" ? 3 : 2 })
       })
-    ]
+    })]
   });
 };
 export {
-  S as StyledCheckbox
+  _ as StyledCheckbox
 };

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

@@ -1,17 +1,17 @@
-var e = "_CheckboxWrapper_18wnv_1", _ = "_Checkbox_18wnv_1", r = "_Indeterminate_18wnv_28", a = "_ReadOnly_18wnv_55", v = "_Indicator_18wnv_64", n = "_HideWrapper_18wnv_68", p = "_CheckboxHover_18wnv_75", i = "_CheckboxRippleContainer_18wnv_75", o = "_CheckboxRipple_18wnv_75", l = "_ripple_18wnv_1", d = {
+var e = "_CheckboxWrapper_g6yr1_1", r = "_Checkbox_g6yr1_1", _ = "_Indeterminate_g6yr1_28", a = "_ReadOnly_g6yr1_55", p = "_Indicator_g6yr1_64", i = "_HideWrapper_g6yr1_68", o = "_CheckboxHover_g6yr1_75", l = "_CheckboxRippleContainer_g6yr1_75", y = "_CheckboxRipple_g6yr1_75", d = "_ripple_g6yr1_1", c = {
   CheckboxWrapper: e,
-  "size-small": "_size-small_18wnv_11",
-  "size-medium": "_size-medium_18wnv_15",
-  Checkbox: _,
-  Indeterminate: r,
+  "size-small": "_size-small_g6yr1_11",
+  "size-medium": "_size-medium_g6yr1_15",
+  Checkbox: r,
+  Indeterminate: _,
   ReadOnly: a,
-  Indicator: v,
-  HideWrapper: n,
-  CheckboxHover: p,
-  CheckboxRippleContainer: i,
-  CheckboxRipple: o,
-  ripple: l
+  Indicator: p,
+  HideWrapper: i,
+  CheckboxHover: o,
+  CheckboxRippleContainer: l,
+  CheckboxRipple: y,
+  ripple: d
 };
 export {
-  d as default
+  c as default
 };

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

@@ -6,7 +6,7 @@ import { StyledInteractiveChip as O } from "../../../data-display/interactive-ch
 import { StyledTooltip as J } from "../../../data-display/tooltip/StyledTooltip.js";
 import { StyledButton as M } from "../../button/StyledButton.js";
 import { useWrap as P } from "../helpers/useWrap.js";
-import { Skeleton as y } from "../../../mui-compat/Skeleton.js";
+import { Skeleton as y } from "../../../../index.js";
 import { forwardRef as Q } from "react";
 import { jsx as t, jsxs as v } from "react/jsx-runtime";
 var ie = Q((S, I) => {

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

@@ -3,20 +3,20 @@ 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 D } from "../../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as Y } from "../../checkbox/base-ui/StyledCheckbox.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 re } from "react";
+import { createElement as L, forwardRef as le, useCallback as g, 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);
+var be = 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, p = y.length < 11, c = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", m = g((e) => typeof e == "object" ? e?.[A] : e, [A]), f = g((e, t) => typeof t == "string" ? !1 : m(e) === m(t), [m]), v = (e) => {
+    const t = m(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : c(e);
-  }, P = b((e) => {
+  }, P = g((e) => {
     T(!0), n?.onOpen?.(e);
-  }, [n]), M = b((e, t) => {
+  }, [n]), M = g((e, t) => {
     T(!1), n?.onClose?.(e, t);
   }, [n]);
   return a && d ? /* @__PURE__ */ l(te, { ...O }) : /* @__PURE__ */ x("div", {
@@ -50,7 +50,7 @@ var ge = le((O, q) => {
       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;
+        const t = e, r = J ?? y.length, h = t.slice(0, r), b = t.length - r;
         return /* @__PURE__ */ x("div", {
           className: "flex flex-wrap gap-2",
           children: [h.map((o) => /* @__PURE__ */ l(D, {
@@ -66,9 +66,9 @@ var ge = le((O, q) => {
             onDelete: () => {
               Array.isArray(i) && C(i.filter((w) => !f(w, o)));
             }
-          }, v(o))), g > 0 && /* @__PURE__ */ l(D, {
+          }, v(o))), b > 0 && /* @__PURE__ */ l(D, {
             dataTest: "remaining-count-tag-chip",
-            label: `+${g}`,
+            label: `+${b}`,
             variant: "outlined",
             onClick: P
           })]
@@ -101,12 +101,12 @@ var ge = le((O, q) => {
               className: "min-w-[36px]",
               checked: o
             }), s ? s(t) : /* @__PURE__ */ l("span", {
-              className: "h-fit py-[10px] text-sm text-delta-700",
+              className: "h-fit py-[10px] text-base text-delta-700",
               children: c(t)
             })] })
           }));
         }
-        const g = i != null && f(i, t);
+        const b = i != null && f(i, t);
         return /* @__PURE__ */ L("li", {
           ...e,
           key: e.id,
@@ -118,13 +118,13 @@ var ge = le((O, q) => {
           title: h,
           children: /* @__PURE__ */ x($, { children: [/* @__PURE__ */ l("span", {
             className: "h-full w-5 min-w-5 py-[10px]",
-            children: g && /* @__PURE__ */ l(U, {
+            children: b && /* @__PURE__ */ l(U, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
             })
           }), s ? s(t) : /* @__PURE__ */ l("span", {
-            className: "py-[10px] text-sm text-delta-700",
+            className: "py-[10px] text-base text-delta-700",
             children: c(t)
           })] })
         }));
@@ -139,18 +139,18 @@ var ge = le((O, q) => {
         label: "",
         placeholder: K,
         readOnly: d,
-        onKeyDown: m ? (t) => t.preventDefault() : void 0,
-        autoComplete: m ? "off" : "on",
+        onKeyDown: p ? (t) => t.preventDefault() : void 0,
+        autoComplete: p ? "off" : "on",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
             startAdornment: _ ?? e.slotProps?.input?.startAdornment,
-            style: m ? { caretColor: "transparent" } : {}
+            style: p ? { caretColor: "transparent" } : {}
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            style: m ? { caretColor: "transparent" } : {}
+            style: p ? { caretColor: "transparent" } : {}
           }
         }
       }),
@@ -159,5 +159,5 @@ var ge = le((O, q) => {
   });
 });
 export {
-  ge as DynamicSelectAutocomplete
+  be as DynamicSelectAutocomplete
 };

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

@@ -1,113 +1,90 @@
-import { cn as r } from "../../../helpers/cn.js";
-import { resolveSx as g } from "../../../helpers/sx.js";
-import { CloseIcon as se } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as oe } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { floatingLabelClass as re, outlineClass as ie } from "../field-styles.js";
-import de from "./StyledInputField.module.js";
-import { useId as ce, useState as L } from "react";
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-var ye = ({ dataTest: d, label: b, value: s, defaultValue: c, onChange: E, onBlur: U, onFocus: D, error: n, helperText: m, disabled: u, readOnly: a, required: N, allowClear: V, onClear: $, type: q = "text", placeholder: v, name: z, id: G, autoComplete: J, autoFocus: K, multiline: C, rows: M, minRows: Q, maxRows: me, size: f = "medium", fullWidth: W, className: X, style: Y, sx: Z, inputRef: T, slotProps: l, InputProps: w, onKeyDown: O, variant: ue }) => {
-  const P = ce(), I = G ?? P, [h, y] = L(!1), [ee, B] = L(c != null && c !== ""), p = s !== void 0, R = p ? s !== "" && s != null : ee, S = !!u || !!a, o = l?.input?.startAdornment ?? w?.startAdornment, x = l?.input?.endAdornment ?? w?.endAdornment, F = !!(V && R && !S), { ref: te, ...le } = l?.htmlInput ?? {}, A = T ?? te, { className: ne, style: _, ref: ae } = l?.input ?? {}, j = h || R || !!v || !!o, k = {
-    ...le,
-    id: I,
-    name: z,
-    placeholder: j ? v : void 0,
-    disabled: S,
-    readOnly: a,
-    required: N,
-    autoComplete: J,
-    autoFocus: K,
-    value: s,
-    defaultValue: c,
-    "aria-invalid": n ? !0 : void 0,
-    onChange: (e) => {
-      a || (p || B(e.target.value !== ""), E?.(e));
-    },
-    onFocus: (e) => {
-      y(!0), D?.(e);
-    },
-    onBlur: (e) => {
-      y(!1), U?.(e);
-    },
-    onKeyDown: O
-  }, H = r(de.Input, "peer box-border w-full rounded-lg border-0 bg-transparent text-delta-800 outline-none placeholder:text-delta-500", "disabled:text-delta-300", a && "bg-delta-10 text-delta-800", f === "small" ? "text-sm" : "text-base", C ? "resize-none py-2" : f === "small" ? "h-9" : "h-12", o ? "pl-10" : "pl-3", F || x ? "pr-10" : "pr-3", ne);
-  return /* @__PURE__ */ i("div", {
-    className: r("group relative inline-flex flex-col", W && "w-full", X),
-    style: {
-      ...g(Z),
-      ...Y
-    },
-    children: [/* @__PURE__ */ i("div", {
-      className: "relative flex items-center",
-      ref: ae,
-      children: [
-        C ? /* @__PURE__ */ t("textarea", {
-          ...k,
-          ref: A,
-          "data-testid": d,
-          rows: M ?? Q ?? 3,
-          className: H,
-          style: _
-        }) : /* @__PURE__ */ t("input", {
-          ...k,
-          ref: A,
-          "data-testid": d,
-          type: q,
-          className: H,
-          style: _
-        }),
-        b && /* @__PURE__ */ i("label", {
-          htmlFor: I,
-          className: r(re({
-            shrink: j,
-            focused: h,
-            error: n,
-            disabled: u,
-            size: f
-          }), l?.inputLabel?.className),
-          style: g(l?.inputLabel?.sx),
-          children: [b, N && " *"]
-        }),
-        o && /* @__PURE__ */ t("span", {
-          className: "absolute left-3 flex items-center text-delta-500",
-          children: o
-        }),
-        F ? /* @__PURE__ */ t("div", {
-          role: "button",
-          "data-testid": `${d}-clear`,
-          className: "absolute right-3 z-40 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
-          onClick: (e) => {
-            e.stopPropagation(), e.preventDefault(), p || B(!1), $?.();
-          },
-          children: /* @__PURE__ */ t(se, {
-            width: 18,
-            height: 18
-          })
-        }) : x && /* @__PURE__ */ t("span", {
-          className: "absolute right-3 flex items-center",
-          children: x
-        }),
-        /* @__PURE__ */ t("div", { className: ie({
-          focused: h,
-          error: n,
-          disabled: u,
-          readOnly: a
-        }) })
-      ]
-    }), !a && m != null && /* @__PURE__ */ i("p", {
-      className: r("m-0 min-h-6 text-sm leading-6", n ? "flex items-start gap-1 text-error-500" : "text-delta-600", l?.formHelperText?.className),
-      style: g(l?.formHelperText?.sx),
-      children: [n && /* @__PURE__ */ t(oe, {
+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 r, jsxs as f } from "react/jsx-runtime";
+var x = ({ allowClear: u, onClear: s, readOnly: t, disabled: d, error: e, helperText: a, dataTest: p, slotProps: i, ...o }) => {
+  const c = (d ?? !1) || (t ?? !1), l = i?.input;
+  return /* @__PURE__ */ r(M, {
+    ...o,
+    "data-testid": p,
+    disabled: c,
+    error: e,
+    helperText: t ? null : e ? /* @__PURE__ */ f("span", {
+      className: "flex items-start gap-1",
+      children: [/* @__PURE__ */ r(b, {
         width: 20,
         height: 20,
         className: "min-w-5 shrink-0 translate-y-[2px]"
-      }), /* @__PURE__ */ t("span", {
+      }), /* @__PURE__ */ r("span", {
         className: "min-w-0 flex-1",
-        children: n ? m || "Required" : m
+        children: a ?? "Required"
       })]
-    })]
+    }) : a,
+    type: o.type ?? "mui-input",
+    slotProps: {
+      ...i,
+      input: {
+        ...l,
+        endAdornment: u && o.value ? /* @__PURE__ */ r("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__ */ r(m, {
+            width: 18,
+            height: 18
+          })
+        }) : l?.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",
+        lineHeight: "24px",
+        minHeight: "24px",
+        marginLeft: 0,
+        whiteSpace: "normal",
+        wordBreak: "break-word"
+      },
+      "& .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" }
+      },
+      ...o.sx
+    }
   });
 };
 export {
-  ye as StyledInputField
+  x as StyledInputField
 };

package/dist/components/inputs/radio-button/StyledRadio.js

@@ -0,0 +1,17 @@
+import { Radio as r } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+var e = ({ dataTest: o, ...t }) => /* @__PURE__ */ a(r, {
+  ...t,
+  "data-testid": o,
+  sx: {
+    "&": { color: "var(--colors-delta-500)" },
+    "& input": {
+      height: "100% !important",
+      width: "100% !important"
+    },
+    "&.Mui-checked": { color: "var(--colors-gama-500)" }
+  }
+});
+export {
+  e as StyledRadio
+};

package/dist/components/inputs/radio-button/base-ui/StyledRadio.js

@@ -1,46 +1,35 @@
-import { cn as p } from "../../../../helpers/cn.js";
+import { cn as n } from "../../../../helpers/cn.js";
 import e from "./StyledRadio.module.js";
-import { useRadioGroupContext as w } from "./RadioGroupContext.js";
-import { forwardRef as x, useCallback as y, useRef as S } from "react";
-import { jsx as i, jsxs as D } from "react/jsx-runtime";
-var H = x(({ value: o, dataTest: m, className: u, size: t = "medium", error: R, disabled: f, checked: h, onChange: C, ...l }, b) => {
-  const a = w(), d = a ? a.value === o : !!h, c = f ?? a?.disabled ?? !1, g = p(e.RadioWrapper, e.RadioHover, t === "small" && e["size-small"], u, R && e.Error), k = p(e.Radio, t === "small" && e["size-small"]), r = S(null), v = y((n) => {
-    if (n.stopPropagation(), !r.current) return;
-    const s = document.createElement("span");
-    e.RadioRipple && (s.className = e.RadioRipple), s.addEventListener("animationend", () => s.remove(), { once: !0 }), r.current.appendChild(s);
-  }, []), N = (n) => {
-    a && a.onSelect(o ?? null), C?.(n, n.target.checked);
-  };
-  return /* @__PURE__ */ D("label", {
-    className: g,
-    "data-testid": m,
+import { forwardRef as N, useCallback as h, useRef as w } from "react";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { Radio as i } from "@base-ui/react/radio";
+var I = N(({ value: s, dataTest: l, className: d, size: t = "medium", error: p, disabled: m, ...c }, R) => {
+  const u = n(e.RadioWrapper, e.RadioHover, t === "small" && e["size-small"], d, p && e.Error), f = n(e.Radio, t === "small" && e["size-small"]), r = w(null), v = h((C) => {
+    if (C.stopPropagation(), !r.current) return;
+    const a = document.createElement("span");
+    e.RadioRipple && (a.className = e.RadioRipple), a.addEventListener("animationend", () => {
+      a.remove();
+    }, { once: !0 }), r.current.appendChild(a);
+  }, []);
+  return /* @__PURE__ */ x(i.Root, {
+    ...c,
+    nativeButton: !0,
+    render: /* @__PURE__ */ o("button", {}),
+    ref: R,
+    value: s,
+    "data-testid": l,
+    className: u,
+    disabled: m,
     onPointerDown: v,
-    "data-checked": d ? "" : void 0,
-    "data-unchecked": d ? void 0 : "",
-    "data-disabled": c ? "" : void 0,
-    children: [
-      /* @__PURE__ */ i("input", {
-        ...l,
-        ref: b,
-        type: "radio",
-        className: "sr-only",
-        name: a?.name ?? l.name,
-        value: o == null ? void 0 : String(o),
-        checked: d,
-        disabled: c,
-        onChange: N
-      }),
-      /* @__PURE__ */ i("span", {
-        className: e.RadioRippleContainer,
-        ref: r
-      }),
-      /* @__PURE__ */ i("span", {
-        className: k,
-        children: /* @__PURE__ */ i("span", { className: e.Indicator })
-      })
-    ]
+    children: [/* @__PURE__ */ o("span", {
+      className: e.RadioRippleContainer,
+      ref: r
+    }), /* @__PURE__ */ o("span", {
+      className: f,
+      children: /* @__PURE__ */ o(i.Indicator, { className: e.Indicator })
+    })]
   });
 });
 export {
-  H as StyledRadio
+  I as StyledRadio
 };

package/dist/components/inputs/radio-button/base-ui/StyledRadio.module.js

@@ -1,13 +1,13 @@
-var r = "_RadioWrapper_17rdx_1", a = "_Radio_17rdx_1", _ = "_RadioRippleContainer_17rdx_34", d = "_RadioRipple_17rdx_34", i = "_ripple_17rdx_1", o = "_RadioHover_17rdx_68", e = "_Indicator_17rdx_120", p = {
-  RadioWrapper: r,
-  "size-small": "_size-small_17rdx_14",
-  Radio: a,
-  RadioRippleContainer: _,
-  RadioRipple: d,
-  ripple: i,
-  RadioHover: o,
-  Indicator: e,
-  Error: "_Error_17rdx_141"
+var a = "_RadioWrapper_1qjtx_1", _ = "_Radio_1qjtx_1", r = "_RadioRippleContainer_1qjtx_34", i = "_RadioRipple_1qjtx_34", o = "_ripple_1qjtx_1", e = "_RadioHover_1qjtx_68", d = "_Indicator_1qjtx_120", p = {
+  RadioWrapper: a,
+  "size-small": "_size-small_1qjtx_14",
+  Radio: _,
+  RadioRippleContainer: r,
+  RadioRipple: i,
+  ripple: o,
+  RadioHover: e,
+  Indicator: d,
+  Error: "_Error_1qjtx_141"
 };
 export {
   p as default