asma-ui-core 3.42.0 → 3.43.0

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -1,192 +1,162 @@
-import { cn as x } from "../../../helpers/cn.js";
-import { ChevronDownIcon as ve } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as Ie } from "../../icons/close-icon/CloseIcon.js";
-import { CheckIcon as Ce } from "../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as Se } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as $e } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as De } from "../checkbox/base-ui/StyledCheckbox.js";
-import { LoadingIcon as Ae } from "../../../table/shared-components/LoadingIcon.js";
-import U from "./StyledSelectAutocomplete.module.js";
-import { useMemo as Re, useRef as Fe, useState as $ } from "react";
-import { jsx as s, jsxs as D } from "react/jsx-runtime";
-import { FloatingFocusManager as ke, FloatingPortal as je, autoUpdate as Le, flip as Me, offset as Pe, shift as _e, size as ze, useDismiss as We, useFloating as Ue, useInteractions as Ve, useListNavigation as Ee, useMergeRefs as V, useRole as Ke } from "@floating-ui/react";
-var Be = (r) => typeof r == "object" && r !== null && "label" in r ? String(r.label) : String(r), E = (r) => typeof r == "object" && r !== null && "disabled" in r && !!r.disabled;
-function lt({ dataTest: r, options: A, renderInput: K, value: w, onChange: y, getOptionLabel: B, isOptionEqualToValue: R, renderOption: F, renderValue: k, filterOptions: N, loading: j, loadingText: H = "Loading…", noOptionsText: O = "No options", disabled: L, readOnly: u, size: q = "small", disableClearable: G, popupIcon: J, multiple: Q, fullWidth: X, classes: Y, inputValue: M, onInputChange: Z, open: P, onOpen: T, onClose: ee, className: te, wrapperClassName: le }) {
-  const o = Q === !0, a = B ?? Be, p = (e, t) => R ? R(e, t) : e === t, [se, re] = $(!1), n = P ?? se, m = (e) => {
-    P === void 0 && re(e), e ? T?.() : ee?.();
-  }, [oe, ae] = $(""), c = M ?? oe, v = (e, t, l) => {
-    M === void 0 && ae(t), Z?.(e, t, l);
-  }, [f, ne] = $(null), _ = Fe([]), i = o ? Array.isArray(w) ? w : [] : [], I = o ? null : w ?? null, z = (e) => o ? i.some((t) => p(e, t)) : I !== null && p(e, I), h = Re(() => {
-    const e = [...A];
-    if (N) return N(e, { inputValue: c });
-    if (!c || o) return e;
-    const t = c.toLowerCase();
-    return e.filter((l) => a(l).toLowerCase().includes(t));
-  }, [
-    A,
-    c,
-    o,
-    N
-  ]), { refs: W, floatingStyles: ie, context: g } = Ue({
-    open: n,
-    onOpenChange: m,
-    placement: "bottom-start",
-    whileElementsMounted: Le,
-    middleware: [
-      Pe(4),
-      Me({ padding: 8 }),
-      _e({ padding: 8 }),
-      ze({ apply({ rects: e, elements: t, availableHeight: l }) {
-        t.floating.style.minWidth = `${e.reference.width}px`, t.floating.style.maxHeight = `${Math.min(l - 8, 320)}px`;
-      } })
-    ]
-  }), { getReferenceProps: ce, getFloatingProps: de, getItemProps: ue } = Ve([
-    We(g),
-    Ke(g, { role: "listbox" }),
-    Ee(g, {
-      listRef: _,
-      activeIndex: f,
-      onNavigate: ne,
-      virtual: !0,
-      loop: !0
-    })
-  ]), me = V([W.setReference]), fe = V([W.setFloating]), C = (e, t) => {
-    if (o) {
-      const l = i.some((d) => p(t, d)), b = l ? i.filter((d) => !p(t, d)) : [...i, t];
-      y?.(e, b, l ? "removeOption" : "selectOption", { option: t });
-    } else
-      y?.(e, t, "selectOption", { option: t }), v(e, a(t), "reset"), m(!1);
-  }, pe = (e) => {
-    y?.(e, o ? [] : null, "clear", void 0), v(e, "", "clear");
-  }, he = (e) => {
-    if (e.key === "Enter" && n && f != null && h[f] != null) {
-      e.preventDefault();
-      const t = h[f];
-      E(t) || C(e, t);
-    } else e.key === "ArrowDown" && !n && m(!0);
-  }, ge = !G && !u && !L && (o ? i.length > 0 : I !== null), be = o ? k ? k(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ s($e, {
-    dataTest: `selected-chip-${a(e)}`,
-    label: a(e),
-    readOnly: u,
-    onDelete: u ? void 0 : (l) => C(l, e)
-  }, `${a(e)}-${t}`)) : void 0, xe = /* @__PURE__ */ D("span", {
-    className: "flex items-center",
-    children: [
-      j && /* @__PURE__ */ s(Ae, {
-        width: 20,
-        height: 20,
-        className: "animate-spin"
-      }),
-      ge && /* @__PURE__ */ s("span", {
-        role: "button",
-        "data-testid": `${r}-clear`,
-        className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full bg-delta-50",
-        onMouseDown: (e) => {
-          e.preventDefault(), pe(e);
-        },
-        children: /* @__PURE__ */ s(Ie, {
-          width: 20,
-          height: 20,
-          className: "text-delta-700"
-        })
-      }),
-      u ? null : J ?? (o ? /* @__PURE__ */ s(Se, {
+import { cn as v } from "../../../helpers/cn.js";
+import { ChevronDownIcon as le } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as ae } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as se } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as ne } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as ce } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as R } from "../checkbox/base-ui/StyledCheckbox.js";
+import H from "./StyledSelectAutocomplete.module.js";
+import B from "clsx";
+import { createElement as A, useLayoutEffect as ie, useRef as de, useState as D } from "react";
+import { Autocomplete as ue, Paper as me } from "@mui/material";
+import { jsx as o, jsxs as L } from "react/jsx-runtime";
+import { mergeSlotProps as pe } from "@mui/material/utils";
+function he(s, c) {
+  return pe(s, c);
+}
+function Ie({ dataTest: s, autoHeight: c, getOptionLabel: u, wrapperClassName: z, multiple: n, allowSelectAll: W, selectAllLabel: C, className: V, defaultValue: M, isOptionEqualToValue: p, onChange: _, options: h, popupIcon: F, readOnly: f, renderOption: G, renderValue: K, sx: O, value: x, ...T }) {
+  const { slots: U, slotProps: g, ...E } = T, [N, J] = D("auto"), b = de(null), l = n === !0 && W === !0 && !f, k = x !== void 0, S = (e) => Array.isArray(e) ? e : [], [Q, X] = D(() => S(M));
+  ie(() => {
+    if (!c) return;
+    const e = b.current?.getBoundingClientRect().height ?? 0, t = b.current?.getBoundingClientRect().top ?? 0, r = window.innerHeight - t - e - 40;
+    J(r > 0 ? r : "auto");
+  }, [c]);
+  const i = (e) => typeof e == "object" && e !== null && "label" in e ? e.label : String(e), Y = (e) => typeof e == "object" && e !== null && "disabled" in e && !!e.disabled, Z = {
+    padding: 0,
+    "& .MuiAutocomplete-option": { paddingLeft: n ? "12px !important" : "6px !important" }
+  }, w = c ? { maxHeight: N === "auto" ? "auto" : `${N}px` } : void 0, I = l ? S(k ? x : Q) : [], d = l ? h.filter((e) => !Y(e)) : h, q = (e, t) => {
+    const r = typeof e == "object" && e !== null;
+    return r !== (typeof t == "object" && t !== null) || !r && typeof e != typeof t ? !1 : p ? p(e, t) : e === t;
+  }, P = l ? d.filter((e) => I.some((t) => q(e, t))).length : 0, $ = l && d.length > 0 && P === d.length, ee = l && P > 0 && !$, j = (e, t, r, a) => {
+    l && !k && X(S(t)), _?.(e, t, r, a);
+  }, te = (e, t) => {
+    j(e, t ? [...d] : [], t ? "selectOption" : "clear", void 0);
+  }, re = (e, t) => Array.isArray(e) ? e.map((r, a) => {
+    const m = t({ index: a }), y = u?.(r) ?? i(r);
+    return /* @__PURE__ */ A(ce, {
+      ...m,
+      key: `selected-chip-${y}-${a}`,
+      dataTest: `selected-chip-${y}`,
+      label: y,
+      variant: "outlined"
+    });
+  }) : null, oe = {
+    sx: Z,
+    ...w ? { style: w } : {}
+  };
+  return /* @__PURE__ */ o("div", {
+    className: v(H.styledSelectAutocompleteWrapper, z),
+    ref: b,
+    children: /* @__PURE__ */ o(ue, {
+      ...E,
+      multiple: n,
+      defaultValue: l ? void 0 : M,
+      getOptionLabel: u,
+      isOptionEqualToValue: p,
+      className: B("!text-sm", V),
+      onChange: j,
+      options: h,
+      renderValue: K ?? (n ? re : void 0),
+      popupIcon: f ? null : F ?? n ? /* @__PURE__ */ o(ne, {
         width: 24,
         height: 24
-      }) : /* @__PURE__ */ s(ve, {
+      }) : /* @__PURE__ */ o(le, {
         width: 24,
         height: 24,
-        className: x(U["select-custom-icon"], "transition-transform", n && "rotate-180")
-      }))
-    ]
-  }), we = {
-    disabled: L,
-    size: q,
-    fullWidth: !0,
-    value: c,
-    onChange: (e) => {
-      v(e, e.target.value, "input"), n || m(!0);
-    },
-    onFocus: () => m(!0),
-    onKeyDown: he,
-    slotProps: {
-      htmlInput: {
-        ...ce(),
-        ref: me,
-        role: "combobox",
-        "aria-autocomplete": "list",
-        "aria-expanded": n,
-        autoComplete: "off",
-        readOnly: u
+        className: B(H["select-custom-icon"])
+      }),
+      readOnly: f,
+      "data-testid": s,
+      value: l ? I : x,
+      slots: {
+        ...U,
+        paper: ({ children: e }) => /* @__PURE__ */ L(me, {
+          "data-testid": `paper-${s}`,
+          sx: {
+            padding: "0 !important",
+            marginTop: "0px !important",
+            "& .MuiAutocomplete-option.Mui-focused": { background: "var(--colors-delta-50) !important" },
+            "& li[aria-selected=true]": { background: "var(--colors-gama-50) !important" },
+            "& li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" },
+            "&:has([data-select-all-header]:hover) .MuiAutocomplete-option.Mui-focused": { background: "transparent !important" },
+            "&:has([data-select-all-header]:hover) li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" }
+          },
+          children: [l && d.length > 0 && /* @__PURE__ */ L("div", {
+            "data-select-all-header": !0,
+            className: "flex items-center gap-x-[10px] border-[1px] border-b border-solid border-delta-200 bg-delta-50 py-2 pl-3 text-xs",
+            onMouseDown: (t) => t.preventDefault(),
+            role: "presentation",
+            children: [/* @__PURE__ */ o(R, {
+              size: "small",
+              dataTest: `${s}-select-all`,
+              checked: $,
+              indeterminate: ee,
+              hideWrapper: !0,
+              onChange: te,
+              "aria-label": C ?? "Select all"
+            }), /* @__PURE__ */ o("span", {
+              className: "truncate text-[10px] font-semibold uppercase text-delta-600",
+              children: C ?? "Select all"
+            })]
+          }), e]
+        })
       },
-      input: {
-        startAdornment: be,
-        endAdornment: xe
-      }
-    }
-  }, ye = (e, t, l) => /* @__PURE__ */ D("li", {
-    ...e,
-    className: x("flex cursor-pointer items-center gap-x-1 px-2 text-sm text-delta-700", "aria-selected:bg-gama-50 data-[active]:bg-delta-50", o && "border-0 border-b border-solid border-delta-200"),
-    children: [o ? /* @__PURE__ */ s(De, {
-      dataTest: `${r}-${a(t)}-checkbox`,
-      checked: l.selected,
-      size: "small",
-      hideWrapper: !0
-    }) : /* @__PURE__ */ s("span", {
-      className: "w-5",
-      children: l.selected && /* @__PURE__ */ s(Ce, {
-        width: 20,
-        height: 20,
-        className: "text-gama-500"
-      })
-    }), /* @__PURE__ */ s("span", {
-      className: "flex-1 truncate py-2",
-      children: a(t)
-    })]
-  }), Ne = (e, t) => {
-    const l = E(e), b = {
-      ...ue({ onClick: (S) => {
-        l || C(S, e);
-      } }),
-      key: `${a(e)}-${t}`,
-      ref: (S) => {
-        _.current[t] = S;
+      renderOption: G ?? ((e, t, { selected: r }) => {
+        const a = e, m = e.id ?? i(t);
+        return n ? /* @__PURE__ */ A("li", {
+          ...a,
+          key: m,
+          className: v(e.className, "flex items-center gap-x-[10px] border-0 border-b border-solid border-delta-200")
+        }, /* @__PURE__ */ o(R, {
+          dataTest: `${s}-${i(t)}-checkbox`,
+          checked: r,
+          size: "small",
+          hideWrapper: !0
+        }), /* @__PURE__ */ o("span", {
+          className: "flex-1 truncate py-2 text-sm text-delta-700",
+          children: u?.(t) ?? i(t)
+        })) : /* @__PURE__ */ A("li", {
+          ...a,
+          key: m,
+          className: v(e.className, "flex items-center gap-x-1")
+        }, /* @__PURE__ */ o("span", {
+          className: "w-5",
+          children: r && /* @__PURE__ */ o(se, {
+            width: 20,
+            height: 20,
+            style: { color: "var(--colors-gama-500)" }
+          })
+        }), /* @__PURE__ */ o("span", {
+          className: "flex-1 truncate py-2 text-sm text-delta-700",
+          children: u?.(t) ?? i(t)
+        }));
+      }),
+      sx: {
+        ...O,
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
+        "& .select-custom-icon": { marginTop: "-0.5px !important" },
+        "& .MuiInputBase-inputSizeSmall": { minHeight: "23px !important" }
       },
-      role: "option",
-      id: `${r}-option-${t}`,
-      "aria-selected": z(e),
-      "aria-disabled": l || void 0,
-      "data-active": f === t ? "" : void 0
-    }, d = {
-      selected: z(e),
-      index: t,
-      inputValue: c
-    };
-    return F ? F(b, e, d) : ye(b, e, d);
-  };
-  return /* @__PURE__ */ D("div", {
-    className: x(U.styledSelectAutocompleteWrapper, !X && "w-auto", le, te),
-    children: [K(we), n && /* @__PURE__ */ s(je, { children: /* @__PURE__ */ s(ke, {
-      context: g,
-      modal: !1,
-      initialFocus: -1,
-      returnFocus: !1,
-      children: /* @__PURE__ */ s("ul", {
-        ref: fe,
-        style: ie,
-        ...de(),
-        className: x("z-[1300] m-0 list-none overflow-auto rounded-lg border border-delta-200 bg-white py-0 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", Y?.listbox),
-        children: j ? /* @__PURE__ */ s("li", {
-          className: "px-3 py-2 text-sm text-delta-600",
-          children: H
-        }) : h.length === 0 ? /* @__PURE__ */ s("li", {
-          className: "px-3 py-2 text-sm text-delta-600",
-          children: O
-        }) : h.map(Ne)
+      slotProps: {
+        ...g,
+        clearIndicator: {
+          disableRipple: !0,
+          disableFocusRipple: !0,
+          ...g?.clearIndicator ?? {}
+        },
+        listbox: he(g?.listbox, oe)
+      },
+      clearIcon: /* @__PURE__ */ o("span", {
+        className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full bg-delta-50",
+        children: /* @__PURE__ */ o(ae, {
+          width: 20,
+          height: 20,
+          className: "text-delta-700"
+        })
       })
-    }) })]
+    })
   });
 }
 export {
-  lt as StyledSelectAutocomplete
+  Ie as StyledSelectAutocomplete
 };

package/dist/components/inputs/slider/StyledSlider.js

@@ -1,82 +1,56 @@
-import { cn as e } from "../../../helpers/cn.js";
-import { ErrorOutlineIcon as J } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledFormHelperText as Q } from "../../miscellaneous/StyledFormHelperText.js";
-import d from "./StyledSlider.module.js";
-import { jsx as m, jsxs as b } from "react/jsx-runtime";
-var A = (s, a, u) => u === a ? 0 : Math.min(100, Math.max(0, (s - a) / (u - a) * 100)), W = (s) => Array.isArray(s) ? [s[0] ?? 0, s[1] ?? 0] : null, I = ({ dataTest: s, min: a = 0, max: u = 100, step: R = 1, value: U, defaultValue: _, disabled: p, size: q = "medium", orientation: M = "horizontal", marks: T, name: B, className: E, classes: c, slotProps: y, error: v, errorText: F, helperText: L, onChange: K, onChangeCommitted: P }) => {
-  const o = M === "vertical", g = U ?? _ ?? a, n = W(g), f = n !== null, O = (v ?? !1) || !!L, k = v ? F ?? "Required" : L, N = Array.isArray(T) ? T : [], H = f ? Math.min(n[0], n[1]) : a, w = f ? Math.max(n[0], n[1]) : g, j = (t) => f ? t >= H && t <= w : t <= w, x = f ? A(H, a, u) : 0, z = A(w, a, u) - x, G = o ? {
-    bottom: `${x}%`,
-    height: `${z}%`
-  } : {
-    left: `${x}%`,
-    width: `${z}%`
-  }, D = (t) => {
-    const i = A(t, a, u);
-    return o ? { bottom: `${i}%` } : { left: `${i}%` };
-  }, S = (t, i, l, h) => {
-    if (!t) return;
-    if (!f) {
-      t(i, l, 0);
-      return;
+import { ErrorOutlineIcon as c } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as b } from "../../miscellaneous/StyledFormHelperText.js";
+import e from "clsx";
+import { Slider as n } from "@mui/material";
+import { Fragment as g, jsx as t, jsxs as l } from "react/jsx-runtime";
+var k = ({ dataTest: i, error: r, errorText: d, helperText: o, ...a }) => {
+  const s = (r ?? !1) || (o ?? !1), m = r ? d ?? "Required" : o;
+  return /* @__PURE__ */ l(g, { children: [/* @__PURE__ */ t(n, {
+    ...a,
+    "data-testid": i,
+    slotProps: {
+      ...a.slotProps,
+      thumb: {
+        className: e("h-4 w-4", "before:shadow-none", 'after:h-8 after:w-8 after:content-[""]', a.orientation === "vertical" ? "mb-1 ml-0" : "ml-1", a.disabled ? "bg-delta-200" : "bg-gama-500"),
+        ...a.slotProps?.thumb
+      },
+      rail: {
+        className: "bg-delta-200",
+        ...a.slotProps?.rail
+      },
+      markLabel: {
+        className: e("ml-1 text-base font-semibold text-delta-600", a.orientation === "vertical" && "mb-1"),
+        ...a.slotProps?.markLabel
+      }
+    },
+    sx: {
+      ...a.sx,
+      "& .MuiSlider-track": {
+        backgroundColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+        borderColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)"
+      },
+      "& .MuiSlider-mark": {
+        backgroundColor: "white",
+        border: "1px solid var(--colors-delta-300)",
+        borderRadius: "50%",
+        height: "8px",
+        width: "8px",
+        "&.MuiSlider-markActive": {
+          backgroundColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+          border: "1px solid",
+          borderColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+          opacity: 1
+        }
+      }
     }
-    const r = [n?.[0] ?? 0, n?.[1] ?? 0];
-    r[h] = l, h === 0 && r[0] > r[1] && (r[0] = r[1]), h === 1 && r[1] < r[0] && (r[1] = r[0]), t(i, r, h);
-  }, $ = (t, i) => /* @__PURE__ */ m("input", {
-    type: "range",
-    "data-testid": f ? `${s}-thumb-${t}` : s,
-    name: B,
-    min: a,
-    max: u,
-    step: R,
-    value: i,
-    disabled: p,
-    "aria-orientation": M,
-    className: e(d.SliderInput, o ? d.Vertical : d.Horizontal, q === "small" && d.Small, p && d.Disabled, c?.thumb, y?.thumb?.className),
-    onChange: (l) => S(K, l, Number(l.currentTarget.value), t),
-    onPointerUp: (l) => S(P, l, Number(l.currentTarget.value), t),
-    onKeyUp: (l) => S(P, l, Number(l.currentTarget.value), t)
-  }, t);
-  return /* @__PURE__ */ b("div", {
-    className: e("flex", o ? "h-full w-8 flex-col items-center" : "w-full flex-col", c?.root, E),
-    children: [
-      /* @__PURE__ */ b("div", {
-        className: e("relative", o ? "h-full w-8" : "h-4 w-full"),
-        children: [/* @__PURE__ */ b("div", {
-          className: e("absolute", o ? "inset-y-2 left-1/2 w-1 -translate-x-1/2" : "inset-x-2 top-1/2 h-1 -translate-y-1/2"),
-          children: [
-            /* @__PURE__ */ m("div", { className: e("absolute inset-0 rounded-full bg-delta-200", c?.rail, y?.rail?.className) }),
-            /* @__PURE__ */ m("div", {
-              className: e("absolute rounded-full", o ? "left-0 w-full" : "top-0 h-full", p ? "bg-delta-200" : "bg-gama-500", c?.track),
-              style: G
-            }),
-            N.map((t) => {
-              const i = j(t.value);
-              return /* @__PURE__ */ m("span", {
-                className: e("absolute h-2 w-2 -translate-x-1/2 rounded-full border", o ? "left-1/2 translate-y-1/2" : "top-1/2 -translate-y-1/2", i ? e("border-gama-500", p ? "bg-delta-200" : "bg-gama-500", c?.markActive) : e("border-delta-300 bg-white", c?.mark)),
-                style: D(t.value)
-              }, t.value);
-            })
-          ]
-        }), f ? [$(0, n[0]), $(1, n[1])] : $(0, g)]
-      }),
-      N.some((t) => t.label != null) && /* @__PURE__ */ m("div", {
-        className: e("relative", o ? "h-full w-full" : "mt-1 h-5 w-full"),
-        children: N.map((t) => t.label == null ? null : /* @__PURE__ */ m("span", {
-          className: e("absolute -translate-x-1/2 text-sm font-semibold", j(t.value) ? e("text-delta-800", c?.markLabelActive) : "text-delta-600", c?.markLabel, y?.markLabel?.className),
-          style: D(t.value),
-          children: t.label
-        }, t.value))
-      }),
-      O && /* @__PURE__ */ b(Q, {
-        className: e("m-0 flex items-center gap-1 pt-1 text-sm", v ? "text-error-500" : "text-delta-600"),
-        children: [v && /* @__PURE__ */ m(J, {
-          width: 20,
-          height: 20
-        }), k]
-      })
-    ]
-  });
+  }), s && /* @__PURE__ */ l(b, {
+    className: e("m-0 flex items-center gap-1 pt-1 text-base", r ? "text-error-500" : "text-delta-600"),
+    children: [r && /* @__PURE__ */ t(c, {
+      width: 20,
+      height: 20
+    }), m]
+  })] });
 };
 export {
-  I as StyledSlider
+  k as StyledSlider
 };

package/dist/components/inputs/switch/base-ui/StyledSwitch.js

@@ -1,13 +1,13 @@
-import { cn as x } from "../../../../helpers/cn.js";
 import { getSvgIconStyle as C } from "../../../icons/iconStyle.js";
-import a from "./StyledSwitch.module.js";
-import { forwardRef as S, useState as y } from "react";
-import { jsx as e } from "react/jsx-runtime";
-var N = ({ className: t }) => /* @__PURE__ */ e("svg", {
+import r from "./StyledSwitch.module.js";
+import { forwardRef as y, useState as N } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Switch as d } from "@base-ui/react/switch";
+var b = ({ className: e }) => /* @__PURE__ */ t("svg", {
   viewBox: "0 0 24 24",
-  className: t,
+  className: e,
   fill: "none",
-  children: /* @__PURE__ */ e("rect", {
+  children: /* @__PURE__ */ t("rect", {
     x: "6",
     y: "10.5",
     width: "11",
@@ -15,55 +15,50 @@ var N = ({ className: t }) => /* @__PURE__ */ e("svg", {
     fill: "currentColor",
     rx: "0.75"
   })
-}), I = ({ width: t = 11, height: n = 11, className: i = "", onClick: c, color: r }) => /* @__PURE__ */ e("svg", {
+}), I = ({ width: e = 11, height: o = 11, className: c = "", onClick: n, color: s }) => /* @__PURE__ */ t("svg", {
   xmlns: "http://www.w3.org/2000/svg",
-  width: t,
-  height: n,
+  width: e,
+  height: o,
   viewBox: "0 0 448 512",
-  className: i,
-  onClick: c,
-  style: C(r),
+  className: c,
+  onClick: n,
+  style: C(s),
   "aria-hidden": "true",
   focusable: "false",
-  children: /* @__PURE__ */ e("path", {
+  children: /* @__PURE__ */ t("path", {
     fill: "currentColor",
     d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7L393.4 105.4c12.5-12.5 32.8-12.5 45.2 0"
   })
-}), q = S(({ checked: t, defaultChecked: n = !1, onChange: i, disabled: c, readOnly: r, required: m, id: l, dataTest: f, className: u, ...v }, w) => {
-  const [p, g] = y(n), d = t !== void 0, o = d ? t : p, k = () => {
-    if (r || c) return;
-    const s = !o;
-    d || g(s), i?.({ target: {
-      checked: s,
-      name: l
-    } }, s);
-  }, h = a.iconContent;
-  return /* @__PURE__ */ e("button", {
+}), M = y(({ checked: e, defaultChecked: o = !1, onChange: c, disabled: n, readOnly: s, required: f, id: a, dataTest: u, ...v }, w) => {
+  const [g, p] = N(o), l = e !== void 0, h = l ? e : g, S = (i) => {
+    l || p(i), c?.({ target: {
+      checked: i,
+      name: a
+    } }, i);
+  }, x = l ? { checked: h } : { defaultChecked: o }, m = r.iconContent;
+  return /* @__PURE__ */ t(d.Root, {
     ...v,
+    ...x,
+    nativeButton: !0,
+    render: /* @__PURE__ */ t("button", {}),
     ref: w,
-    type: "button",
-    role: "switch",
-    "aria-checked": o,
-    "aria-readonly": r,
-    "aria-required": m,
-    className: x(a.switch, u),
-    onClick: k,
-    disabled: c,
-    id: l,
-    name: l,
-    "data-testid": f,
-    "data-checked": o ? "" : void 0,
-    "data-unchecked": o ? void 0 : "",
-    "data-disabled": c ? "" : void 0,
-    children: /* @__PURE__ */ e("span", {
-      className: a.thumb,
-      children: /* @__PURE__ */ e("span", {
-        className: a.icon,
-        children: o ? /* @__PURE__ */ e(I, { className: h }) : /* @__PURE__ */ e(N, { className: h })
+    className: r.switch,
+    onCheckedChange: S,
+    disabled: n,
+    readOnly: s,
+    required: f,
+    id: a,
+    name: a,
+    "data-testid": u,
+    children: /* @__PURE__ */ t(d.Thumb, {
+      className: r.thumb,
+      children: /* @__PURE__ */ t("span", {
+        className: r.icon,
+        children: h ? /* @__PURE__ */ t(I, { className: m }) : /* @__PURE__ */ t(b, { className: m })
       })
     })
   });
 });
 export {
-  q as StyledSwitch
+  M as StyledSwitch
 };