mada-design-system 0.2.6 → 0.2.7

package/index.es51.js

@@ -1,241 +1,268 @@
-import { jsx as a, jsxs as L } from "react/jsx-runtime";
-import J from "./index.es153.js";
-import * as r from "react";
+import { jsx as s, jsxs as L } from "react/jsx-runtime";
+import O from "./index.es152.js";
+import * as t from "react";
 import { Button as T } from "./index.es22.js";
-import O from "./index.es109.js";
-import Q from "./index.es110.js";
-import { cn as N } from "./index.es79.js";
-const j = r.createContext(null);
-function U() {
-  const o = r.useContext(j);
-  if (!o)
+import Q from "./index.es108.js";
+import U from "./index.es109.js";
+import { cn as m } from "./index.es79.js";
+const D = t.createContext(null);
+function V() {
+  const c = t.useContext(D);
+  if (!c)
     throw new Error("useCarousel must be used within a <Carousel />");
-  return o;
+  return c;
 }
-const D = r.forwardRef(
-  ({ orientation: o = "horizontal", opts: c, setApi: v, plugins: x, className: g, children: u, ...P }, $) => {
-    const [R, t] = J(
+const G = t.forwardRef(
+  ({ orientation: c = "horizontal", opts: i, setApi: S, plugins: k, className: P, children: d, ...y }, z) => {
+    const [E, r] = O(
       {
-        ...c,
-        axis: o === "horizontal" ? "x" : "y"
+        ...i,
+        axis: c === "horizontal" ? "x" : "y"
       },
-      x
-    ), [S, k] = r.useState(!1), [w, I] = r.useState(!1), e = r.useCallback((l) => {
-      l && (k(l.canScrollPrev()), I(l.canScrollNext()));
-    }, []), y = r.useCallback(() => {
-      t == null || t.scrollPrev();
-    }, [t]), n = r.useCallback(() => {
-      t == null || t.scrollNext();
-    }, [t]), z = r.useCallback(
-      (l) => {
-        l.key === "ArrowLeft" ? (l.preventDefault(), y()) : l.key === "ArrowRight" && (l.preventDefault(), n());
+      k
+    ), [h, w] = t.useState(!1), [I, R] = t.useState(!1), a = t.useCallback((u) => {
+      u && (w(u.canScrollPrev()), R(u.canScrollNext()));
+    }, []), e = t.useCallback(() => {
+      r == null || r.scrollPrev();
+    }, [r]), $ = t.useCallback(() => {
+      r == null || r.scrollNext();
+    }, [r]), n = t.useCallback(
+      (u) => {
+        u.key === "ArrowLeft" ? (u.preventDefault(), e()) : u.key === "ArrowRight" && (u.preventDefault(), $());
       },
-      [y, n]
+      [e, $]
     );
-    return r.useEffect(() => {
-      !t || !v || v(t);
-    }, [t, v]), r.useEffect(() => {
-      if (t)
-        return e(t), t.on("reInit", e), t.on("select", e), () => {
-          t == null || t.off("select", e);
+    return t.useEffect(() => {
+      !r || !S || S(r);
+    }, [r, S]), t.useEffect(() => {
+      if (r)
+        return a(r), r.on("reInit", a), r.on("select", a), () => {
+          r == null || r.off("select", a);
         };
-    }, [t, e]), /* @__PURE__ */ a(
-      j.Provider,
+    }, [r, a]), /* @__PURE__ */ s(
+      D.Provider,
       {
         value: {
-          carouselRef: R,
-          api: t,
-          opts: c,
-          orientation: o || ((c == null ? void 0 : c.axis) === "y" ? "vertical" : "horizontal"),
-          scrollPrev: y,
-          scrollNext: n,
-          canScrollPrev: S,
-          canScrollNext: w
+          carouselRef: E,
+          api: r,
+          opts: i,
+          orientation: c || ((i == null ? void 0 : i.axis) === "y" ? "vertical" : "horizontal"),
+          scrollPrev: e,
+          scrollNext: $,
+          canScrollPrev: h,
+          canScrollNext: I
         },
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ s(
           "div",
           {
-            ref: $,
-            onKeyDownCapture: z,
-            className: N("relative", g),
+            ref: z,
+            onKeyDownCapture: n,
+            className: m("relative", P),
             role: "region",
             "aria-roledescription": "carousel",
-            ...P,
-            children: u
+            ...y,
+            children: d
           }
         )
       }
     );
   }
 );
-D.displayName = "CarouselPrimitive";
-const G = r.forwardRef(({ className: o, ...c }, v) => {
-  const { carouselRef: x, orientation: g } = U();
-  return /* @__PURE__ */ a("div", { ref: x, className: "overflow-hidden", children: /* @__PURE__ */ a("div", { ref: v, className: N("flex", g === "horizontal" ? "ml-4" : "-mt-4 flex-col", o), ...c }) });
+G.displayName = "CarouselPrimitive";
+const K = t.forwardRef(({ className: c, ...i }, S) => {
+  const { carouselRef: k, orientation: P } = V();
+  return /* @__PURE__ */ s("div", { ref: k, className: "overflow-hidden", children: /* @__PURE__ */ s("div", { ref: S, className: m("flex", P === "horizontal" ? "mx-4" : "-mt-4 flex-col", c), ...i }) });
 });
-G.displayName = "CarouselContent";
-const K = r.forwardRef(({ className: o, ...c }, v) => /* @__PURE__ */ a("div", { ref: v, role: "group", "aria-roledescription": "slide", className: N("min-w-0 shrink-0 grow-0 basis-full", o), ...c }));
-K.displayName = "CarouselItem";
+K.displayName = "CarouselContent";
+const B = t.forwardRef(({ className: c, ...i }, S) => /* @__PURE__ */ s("div", { ref: S, role: "group", "aria-roledescription": "slide", className: m("min-w-0 shrink-0 grow-0 basis-full", c), ...i }));
+B.displayName = "CarouselItem";
 function re({
-  children: o,
-  className: c,
-  itemClassName: v,
-  showDots: x = !0,
-  showArrows: g = !0,
-  loop: u = !0,
-  autoplay: P = !1,
-  autoplayInterval: $ = 5e3,
-  containerClassName: R,
-  maxDots: t = null,
-  itemWidth: S = 230,
-  slidesToShow: k,
-  showPartial: w = !0,
-  dir: I = "rtl"
+  children: c,
+  className: i,
+  itemClassName: S,
+  showDots: k = !0,
+  showArrows: P = !0,
+  loop: d = !0,
+  autoplay: y = !1,
+  autoplayInterval: z = 5e3,
+  containerClassName: E,
+  maxDots: r = null,
+  itemWidth: h = 230,
+  slidesToShow: w,
+  showPartial: I = !0,
+  dir: R = "rtl",
+  type: a = "multiple"
 }) {
-  const [e, y] = r.useState(), [n, z] = r.useState(0), [l, B] = r.useState(0), [f, C] = r.useState(!1), [F, _] = r.useState(!0), E = r.useId(), M = r.useMemo(() => k ? `calc(${100 / k}% - ${w ? "1rem" : "0px"})` : typeof S == "number" ? `${S}px` : S, [S, k, w]), h = r.useCallback(
-    (s) => {
-      if (!e || f)
+  const [e, $] = t.useState(), [n, u] = t.useState(0), [o, F] = t.useState(0), [v, b] = t.useState(!1), [_, q] = t.useState(!0), A = t.useId(), M = t.useMemo(() => a === "single" ? "100%" : w ? `calc(${100 / w}% - ${I ? "1rem" : "0px"})` : typeof h == "number" ? `${h}px` : h, [a, w, h, I]), x = t.useCallback(
+    (l) => {
+      if (!e || v)
         return;
-      C(!0);
-      const d = e.selectedScrollSnap();
-      if (d === s) {
-        C(!1);
+      b(!0);
+      const C = e.selectedScrollSnap();
+      if (C === l) {
+        b(!1);
         return;
       }
-      const b = d < s ? 1 : -1;
-      if (Math.abs(d - s) === 1) {
-        b > 0 ? e.scrollNext() : e.scrollPrev(), setTimeout(() => C(!1), 300);
+      const p = C < l ? 1 : -1;
+      if (Math.abs(C - l) === 1) {
+        p > 0 ? e.scrollNext() : e.scrollPrev(), setTimeout(() => b(!1), 300);
         return;
       }
-      let m = 0;
-      const i = Math.abs(d - s), p = () => {
-        m < i ? (b > 0 ? e.scrollNext() : e.scrollPrev(), m++, setTimeout(p, 150)) : C(!1);
+      let N = 0;
+      const f = Math.abs(C - l), g = () => {
+        N < f ? (p > 0 ? e.scrollNext() : e.scrollPrev(), N++, setTimeout(g, 150)) : b(!1);
       };
-      p();
+      g();
     },
-    [e, f]
-  ), A = r.useCallback(() => {
-    !e || f || (u && n === l - 1 ? h(0) : (C(!0), e.scrollNext(), setTimeout(() => C(!1), 300)));
-  }, [e, f, u, n, l, h]), q = r.useCallback(() => {
-    !e || f || (C(!0), u && n === 0 ? h(l - 1) : (e.scrollPrev(), setTimeout(() => C(!1), 300)));
-  }, [e, f, u, n, l, h]);
-  r.useEffect(() => {
+    [e, v]
+  ), j = t.useCallback(() => {
+    !e || v || (d && n === o - 1 ? x(0) : (b(!0), e.scrollNext(), setTimeout(() => b(!1), 300)));
+  }, [e, v, d, n, o, x]), H = t.useCallback(() => {
+    !e || v || (b(!0), d && n === 0 ? x(o - 1) : (e.scrollPrev(), setTimeout(() => b(!1), 300)));
+  }, [e, v, d, n, o, x]);
+  t.useEffect(() => {
     if (!e)
       return;
-    B(e.scrollSnapList().length);
-    const s = () => {
-      z(e.selectedScrollSnap());
+    F(e.scrollSnapList().length);
+    const l = () => {
+      u(e.selectedScrollSnap());
     };
-    return z(e.selectedScrollSnap()), e.on("select", s), e.on("reInit", s), () => {
-      e.off("select", s), e.off("reInit", s);
+    return u(e.selectedScrollSnap()), e.on("select", l), e.on("reInit", l), () => {
+      e.off("select", l), e.off("reInit", l);
     };
-  }, [e]), r.useEffect(() => {
+  }, [e]), t.useEffect(() => {
     if (!e)
       return;
-    const s = e.scrollSnapList().length, d = e.canScrollNext(), b = e.canScrollPrev();
-    _(d || b || s > 1);
-  }, [e, l, n]), r.useEffect(() => {
-    if (!e || !P)
+    const l = e.scrollSnapList().length, C = e.canScrollNext(), p = e.canScrollPrev();
+    q(C || p || l > 1);
+  }, [e, o, n]), t.useEffect(() => {
+    if (!e || !y)
       return;
-    const s = setInterval(() => {
-      f || A();
-    }, $);
-    return () => clearInterval(s);
-  }, [e, P, $, f, A]);
-  const H = () => {
-    if (!t || l <= t)
-      return Array.from({ length: l }).map((m, i) => /* @__PURE__ */ a(
+    const l = setInterval(() => {
+      v || j();
+    }, z);
+    return () => clearInterval(l);
+  }, [e, y, z, v, j]);
+  const J = () => {
+    if (!r || o <= r)
+      return Array.from({ length: o }).map((N, f) => /* @__PURE__ */ s(
         "button",
         {
-          className: `size-space-04 rounded-full transition-colors focus:outline-none ${n === i ? "bg-primary" : "bg-background-neutral-200"}`,
-          onClick: () => h(i),
-          disabled: f,
-          "aria-label": `Go to slide ${i + 1}`
+          className: `size-space-04 rounded-full transition-colors focus:outline-none ${n === f ? "bg-primary" : "bg-background-neutral-200"}`,
+          onClick: () => x(f),
+          disabled: v,
+          "aria-label": `Go to slide ${f + 1}`
         },
-        `${E}-dot-${i}`
+        `${A}-dot-${f}`
       ));
-    const s = [], d = l - (t - 1), b = Math.max(1, d);
-    for (let m = 0; m < t; m++) {
-      let i, p;
-      m === t - 1 ? (i = l - 1, p = n >= l - b) : (i = m, p = n === m), s.push(
-        /* @__PURE__ */ a(
+    const l = [], C = o - (r - 1), p = Math.max(1, C);
+    for (let N = 0; N < r; N++) {
+      let f, g;
+      N === r - 1 ? (f = o - 1, g = n >= o - p) : (f = N, g = n === N), l.push(
+        /* @__PURE__ */ s(
           "button",
           {
-            className: `size-space-04 rounded-full transition-colors focus:outline-none ${p ? "bg-primary" : "bg-background-neutral-200"}`,
-            onClick: () => h(i),
-            disabled: f,
-            "aria-label": `Go to slide ${i + 1}`
+            className: `size-space-04 rounded-full transition-colors focus:outline-none ${g ? "bg-primary" : "bg-background-neutral-200"}`,
+            onClick: () => x(f),
+            disabled: v,
+            "aria-label": `Go to slide ${f + 1}`
           },
-          `${E}-dot-${m}`
+          `${A}-dot-${N}`
         )
       );
     }
-    return s;
+    return l;
   };
-  return /* @__PURE__ */ a("div", { className: N("w-full ", R), children: /* @__PURE__ */ L(
-    D,
+  return /* @__PURE__ */ s("div", { className: m("w-full ", E), children: /* @__PURE__ */ L(
+    G,
     {
-      dir: I,
-      setApi: y,
+      dir: R,
+      setApi: $,
       opts: {
         align: "start",
         loop: !1,
         skipSnaps: !1,
         containScroll: "trimSnaps",
         dragFree: !1,
-        direction: I,
+        direction: R,
         slidesToScroll: 1
       },
-      className: N("w-full", c),
+      className: m("relative w-full", i),
       children: [
-        /* @__PURE__ */ a(G, { className: "gap-space-04", children: r.Children.map(o, (s, d) => /* @__PURE__ */ a(
-          K,
+        /* @__PURE__ */ s(K, { className: " gap-space-04", children: t.Children.map(c, (l, C) => /* @__PURE__ */ s(
+          B,
           {
-            className: N("transition-transform duration-300", v),
+            className: m("transition-transform duration-300 ", S),
             style: {
               flex: `0 0 ${M}`,
               maxWidth: M
             },
-            children: s
+            children: l
           },
-          `${E}-item-${d}`
+          `${A}-item-${C}`
         )) }),
-        F && /* @__PURE__ */ L("div", { className: "container mt-space-05 flex items-center justify-between", children: [
-          g && /* @__PURE__ */ L("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ a(
-              T,
-              {
-                onClick: q,
-                colors: "primary",
-                variant: !u && n === 0 ? "outline" : "default",
-                size: "icon",
-                "aria-label": "Previous slide",
-                className: N(!u && n === 0 && "!pointer-events-none"),
-                children: /* @__PURE__ */ a(O, { className: "ltr:rotate-180" })
-              }
-            ),
-            /* @__PURE__ */ a(
-              T,
-              {
-                onClick: A,
-                colors: "primary",
-                variant: !u && n === l - 1 ? "outline" : "default",
-                size: "icon",
-                "aria-label": "Next slide",
-                className: N(!u && n === l - 1 && "!pointer-events-none"),
-                children: /* @__PURE__ */ a(Q, { className: "ltr:rotate-180" })
-              }
-            )
-          ] }),
-          x && l > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: H() })
-        ] })
+        _ && /* @__PURE__ */ L(
+          "div",
+          {
+            className: m({
+              "container mt-space-05 flex items-center justify-between": a === "multiple"
+            }),
+            children: [
+              P && /* @__PURE__ */ L(
+                "div",
+                {
+                  className: m({
+                    "flex items-center gap-2": a === "multiple",
+                    "absolute inset-x-space-04 top-1/2 z-0 mx-auto flex max-w-container -translate-y-1/2 items-center justify-between": a === "single"
+                  }),
+                  children: [
+                    /* @__PURE__ */ s(
+                      T,
+                      {
+                        onClick: H,
+                        colors: "primary",
+                        variant: !d && n === 0 ? "outline" : "default",
+                        size: "icon",
+                        "aria-label": "Previous slide",
+                        className: m(!d && n === 0 && "!pointer-events-none"),
+                        children: /* @__PURE__ */ s(Q, { className: "ltr:rotate-180" })
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      T,
+                      {
+                        onClick: j,
+                        colors: "primary",
+                        variant: !d && n === o - 1 ? "outline" : "default",
+                        size: "icon",
+                        "aria-label": "Next slide",
+                        className: m(!d && n === o - 1 && "!pointer-events-none"),
+                        children: /* @__PURE__ */ s(U, { className: "ltr:rotate-180" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              k && o > 0 && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: m("flex  gap-space-02", {
+                    " items-center": a === "multiple",
+                    "absolute inset-x-0 bottom-space-08 justify-center": a === "single"
+                  }),
+                  children: J()
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   ) });
 }
 export {
   re as Carousel,
-  G as CarouselContent,
-  K as CarouselItem,
-  D as CarouselPrimitive
+  K as CarouselContent,
+  B as CarouselItem,
+  G as CarouselPrimitive
 };

package/index.es54.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-radio-group";
-import * as t from "react";
-import { cva as p } from "./index.es100.js";
+import * as a from "react";
+import { cva as h } from "./index.es99.js";
 import { cn as s } from "./index.es79.js";
-import m from "./index.es125.js";
-const h = p(
-  "flex aspect-square h-space-05 w-space-05 rounded-full enabled:active:data-[state=unchecked]:bg-control-pressed border border-control-border enabled:hover:bg-control-ripple-effect focus:ring-2 focus:ring-border-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-border-disabled disabled:data-[state=checked]:text-control-disabled",
+import m from "./index.es124.js";
+const u = h(
+  "flex aspect-square   rounded-full enabled:active:data-[state=unchecked]:bg-control-pressed border border-control-border enabled:hover:bg-control-ripple-effect focus:ring-2 focus:ring-border-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-border-disabled disabled:data-[state=checked]:text-control-disabled",
   {
     variants: {
       colors: {
@@ -17,25 +17,39 @@ const h = p(
                 enabled:hover:data-[state=checked]:border-control-neutral-hovered enabled:hover:data-[state=checked]:text-control-neutral-hovered
                 enabled:active:data-[state=checked]:border-control-neutral-pressed enabled:active:data-[state=checked]:text-control-neutral-pressed
                 `
+      },
+      size: {
+        default: "h-space-05 w-space-05 [&>span>svg]:size-space-04",
+        sm: "h-[20px] w-[20px] [&>span>svg]:size-[14px]",
+        xs: "h-space-04 w-space-04 [&>span>svg]:size-space-03"
       }
     },
     defaultVariants: {
-      colors: "primary"
+      colors: "primary",
+      size: "default"
     }
   }
-), l = t.createContext({
+), l = a.createContext({
   colors: "primary"
-}), u = t.forwardRef(({ className: a, colors: o, children: c, ...d }, n) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", a), ...d, ref: n, children: /* @__PURE__ */ i(l.Provider, { value: { colors: o }, children: [
+}), b = a.forwardRef(({ className: o, colors: c, size: d, children: t, ...n }, i) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", o), ...n, ref: i, children: /* @__PURE__ */ p(l.Provider, { value: { colors: c, size: d }, children: [
   " ",
-  c
+  t
 ] }) }));
-u.displayName = r.Root.displayName;
-const b = t.forwardRef(({ className: a, ...o }, c) => {
-  const d = t.useContext(l);
-  return /* @__PURE__ */ e("div", { className: "flex size-space-06 items-center justify-center", children: /* @__PURE__ */ e(r.Item, { ref: c, className: s(h({ colors: d.colors, className: a })), ...o, children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(m, { className: "h-[15px] w-[15px]" }) }) }) });
+b.displayName = r.Root.displayName;
+const f = a.forwardRef(({ className: o, ...c }, d) => {
+  const t = a.useContext(l);
+  return /* @__PURE__ */ e("div", { className: "flex  items-center justify-center", children: /* @__PURE__ */ e(
+    r.Item,
+    {
+      ref: d,
+      className: s(u({ colors: t.colors, size: t.size, className: o })),
+      ...c,
+      children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(m, {}) })
+    }
+  ) });
 });
-b.displayName = r.Item.displayName;
+f.displayName = r.Item.displayName;
 export {
-  u as RadioGroup,
-  b as RadioGroupItem
+  b as RadioGroup,
+  f as RadioGroupItem
 };

package/index.es56.js

@@ -1,67 +1,70 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import y, { useState as B, useRef as g, useEffect as m } from "react";
-import { debounce as w, cn as v } from "./index.es79.js";
-import { strings as R } from "./index.es91.js";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import B, { useState as g, useRef as w, useEffect as m } from "react";
+import { debounce as v, cn as R } from "./index.es79.js";
+import { strings as d } from "./index.es91.js";
 import { Button as j } from "./index.es22.js";
 import { Input as z } from "./index.es35.js";
-import d from "./index.es121.js";
+import f from "./index.es120.js";
 import { Stack as A } from "./index.es40.js";
-import D from "./index.es103.js";
-const E = y.forwardRef(
-  ({ placeholder: f = "Search...", value: a = "", type: e, validationMessage: c, onSearch: n, disabled: h = !1, debounceTime: u = 600, className: x = "", ...N }, b) => {
-    const [o, s] = B(a), l = g();
+import D from "./index.es102.js";
+const E = B.forwardRef(
+  ({ placeholder: h = "Search...", value: a = "", type: t, validationMessage: s, onSearch: n, disabled: x = !1, debounceTime: i = 600, className: N = "", ...b }, C) => {
+    const [r, c] = g(a), l = w();
     m(() => {
-      s(a);
+      c(a);
     }, [a]), m(() => {
-      l.current = w((r) => n(r), u);
-    }, [n, u]);
-    const C = (r) => {
-      r.key === "Enter" && n(o.trim());
-    }, I = (r) => {
-      const i = r.target.value;
-      s(i), e === "onType" && l.current && l.current(i);
-    }, S = () => {
-      s(""), n("");
+      l.current = v((o) => n(o), i);
+    }, [n, i]);
+    const S = (o) => {
+      o.key === "Enter" && n(r.trim());
+    }, y = (o) => {
+      const p = o.target.value;
+      c(p), t === "onType" && l.current && l.current(p);
+    }, I = () => {
+      c(""), n("");
     }, k = () => {
-      e === "onButton" && n(o);
+      t === "onButton" && n(r);
     };
-    return /* @__PURE__ */ p("div", { className: "space-y-space-01", children: [
-      /* @__PURE__ */ t(
+    return /* @__PURE__ */ u("div", { className: "space-y-space-01", children: [
+      /* @__PURE__ */ e(
         z,
         {
           type: "text",
           variant: "outline",
-          placeholder: f,
-          value: o,
-          disabled: h,
-          ...N,
-          onKeyDown: C,
-          onChange: I,
-          className: v("w-full ", { "pe-space-04": e === "onType", "pe-space-01": e === "onButton" }, x),
-          "aria-invalid": !!c,
+          placeholder: h,
+          value: r,
+          disabled: x,
+          ...b,
+          onKeyDown: S,
+          onChange: y,
+          className: R("w-full ", { "pe-space-04": t === "onType", "pe-space-01": t === "onButton" }, N),
+          "aria-invalid": !!s,
           "data-testid": "search-input",
-          startAdornment: e === "onType" && /* @__PURE__ */ t(d, { className: "text-icon-default" }),
-          endAdornment: /* @__PURE__ */ p(A, { gap: 1, alignItems: "center", children: [
-            o && /* @__PURE__ */ t("button", { type: "button", className: "text-text-default", onClick: S, children: /* @__PURE__ */ t(D, { size: 20 }) }),
-            o && e === "onButton" && /* @__PURE__ */ t("span", { className: "mx-space-01 block h-space-05 border" }),
-            e === "onButton" && /* @__PURE__ */ t(
+          startAdornment: t === "onType" && /* @__PURE__ */ e(f, { className: "text-icon-default" }),
+          endAdornment: /* @__PURE__ */ u(A, { gap: 1, alignItems: "center", children: [
+            r && /* @__PURE__ */ u("button", { type: "button", className: "text-text-default", onClick: I, children: [
+              /* @__PURE__ */ e(D, { size: 20 }),
+              /* @__PURE__ */ e("span", { className: "sr-only", children: d.Shared.Clear })
+            ] }),
+            r && t === "onButton" && /* @__PURE__ */ e("span", { className: "mx-space-01 block h-space-05 border" }),
+            t === "onButton" && /* @__PURE__ */ e(
               j,
               {
                 variant: "outline",
                 rounded: "full",
                 size: "icon-sm",
                 type: "button",
-                tooltip: R.Shared.Search,
+                tooltip: d.Shared.Search,
                 className: "h-auto rounded-full border !p-space-01",
                 onClick: k,
-                children: /* @__PURE__ */ t(d, {})
+                children: /* @__PURE__ */ e(f, {})
               }
             )
           ] }),
-          ref: b
+          ref: C
         }
       ),
-      c && /* @__PURE__ */ t("p", { className: "text-caption-01 text-error", children: c })
+      s && /* @__PURE__ */ e("p", { className: "text-caption-01 text-error", children: s })
     ] });
   }
 );