mada-design-system 0.7.1 → 0.7.2

package/index.es62.js

@@ -1,55 +1,132 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-radio-group";
-import * as a from "react";
-import { cva as h } from "./index.es109.js";
-import { cn as s } from "./index.es88.js";
-import m from "./index.es134.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: {
-        primary: `data-[state=checked]:border-control-primary-checked data-[state=checked]:text-control-primary-checked
-                enabled:hover:data-[state=checked]:border-control-primary-hovered enabled:hover:data-[state=checked]:text-control-primary-hovered
-                enabled:active:data-[state=checked]:border-control-primary-pressed active:data-[state=checked]:text-control-primary-pressed
-                `,
-        neutral: `data-[state=checked]:border-control-neutral-checked data-[state=checked]:text-control-neutral-checked
-                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"
-      }
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { cva as c } from "./index.es110.js";
+import $ from "react";
+import { cn as s } from "./index.es89.js";
+import { strings as N } from "./index.es101.js";
+const w = c("relative flex gap-space-02 items-center", {
+  variants: {
+    colors: {
+      primary: "[&_.bg-circle]:stroke-background-neutral-200 [&_.progress-circle]:stroke-background-primary",
+      neutral: "[&_.bg-circle]:stroke-background-neutral-200 [&_.progress-circle]:stroke-background-black"
     },
-    defaultVariants: {
-      colors: "primary",
-      size: "default"
+    onColor: {
+      true: "[&_.progress-circle]:stroke-background-surface-oncolor",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    colors: "primary",
+    onColor: !1
+  }
+}), V = c("", {
+  variants: {
+    size: {
+      120: "w-[120px] h-[120px] [&_.bg-circle]:stroke-[10px] [&_.progress-circle]:stroke-[10px]",
+      80: "w-[80px] h-[80px] [&_.bg-circle]:stroke-[8px] [&_.progress-circle]:stroke-[8px]",
+      64: "w-[64px] h-[64px] [&_.bg-circle]:stroke-[6px] [&_.progress-circle]:stroke-[6px]",
+      48: "w-[48px] h-[48px] [&_.bg-circle]:stroke-[5px] [&_.progress-circle]:stroke-[5px]",
+      40: "w-[40px] h-[40px] [&_.bg-circle]:stroke-[4px] [&_.progress-circle]:stroke-[4px]"
+    }
+  }
+}), z = c("", {
+  variants: {
+    size: {
+      120: "[&>h3]:text-subtitle-02 [&>h3]:font-semibold [&>p]:text-body-01 [&>span]:text-body-01",
+      80: "[&>h3]:text-body-02 [&>h3]:font-semibold [&>p]:text-body-01 [&>span]:text-body-01",
+      64: "[&>h3]:text-body-01 [&>h3]:font-semibold [&>p]:text-caption-01 [&>span]:text-caption-01",
+      48: "[&>h3]:text-body-01 [&>h3]:font-semibold [&>p]:text-caption-01 [&>span]:text-caption-01",
+      40: "[&>h3]:text-caption-01 [&>h3]:font-semibold [&>p]:text-caption-02 [&>span]:text-caption-02"
     }
   }
-), l = a.createContext({
-  colors: "primary"
-}), 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: [
-  " ",
-  t
-] }) }));
-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, {}) })
+}), R = c("", {
+  variants: {
+    size: {
+      120: "title-01",
+      80: "text-subtitle-01",
+      64: "text-body-01",
+      48: "text-[1.05rem]/[15px]",
+      40: "text-[0.875rem]/[12.5px]"
     }
-  ) });
-});
-f.displayName = r.Item.displayName;
+  }
+}), j = $.forwardRef(
+  ({ className: b, steps: e, activeStep: a, colors: f, size: l = 120, onColor: k, dir: p = "ltr", showDetails: u = !0, ...y }, _) => {
+    const r = l || 120, n = e.length > 0 ? a / e.length : 0, x = r === 120 ? 50 : r === 80 ? 35 : r === 64 ? 28 : r === 48 ? 20 : 18, d = 2 * Math.PI * x, v = d, h = d * (1 - n), g = r === 120 ? 60 : r === 80 ? 40 : r === 64 ? 32 : r === 48 ? 24 : 20, m = r === 120 ? 60 : r === 80 ? 40 : r === 64 ? 32 : r === 48 ? 24 : 20, t = (e == null ? void 0 : e[a - 1]) || e[0];
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        dir: p,
+        ref: _,
+        role: "progressbar",
+        "aria-label": `Step ${a} of ${e.length}`,
+        "aria-valuenow": a,
+        "aria-valuemin": 1,
+        "aria-valuemax": e.length,
+        "aria-valuetext": `Step ${a} of ${e.length}: ${(t == null ? void 0 : t.title) || ""}`,
+        className: s(w({ colors: f, onColor: k, className: b })),
+        ...y,
+        children: [
+          /* @__PURE__ */ o("div", { className: s("relative flex-shrink-0", V({ size: l })), children: [
+            /* @__PURE__ */ o(
+              "svg",
+              {
+                width: r,
+                height: r,
+                viewBox: `0 0 ${r} ${r}`,
+                className: "-rotate-90 transform",
+                role: "img",
+                "aria-label": `Progress circle showing ${Math.round(n * 100)}% completion`,
+                children: [
+                  /* @__PURE__ */ i("circle", { cx: g, cy: m, r: x, fill: "none", className: "bg-circle opacity-60", "aria-hidden": "true" }),
+                  /* @__PURE__ */ i(
+                    "circle",
+                    {
+                      cx: g,
+                      cy: m,
+                      r: x,
+                      fill: "none",
+                      strokeLinecap: "round",
+                      strokeDasharray: v,
+                      strokeDashoffset: p === "rtl" ? h : -h,
+                      className: "progress-circle transition-all duration-500 ease-in-out",
+                      "aria-label": `Progress: ${Math.round(n * 100)}%`
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ i("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ o(
+              "span",
+              {
+                className: s("font-bold text-text-paragraph-primary", R({ size: l })),
+                "aria-label": `Current step: ${a} of ${e.length}`,
+                children: [
+                  a,
+                  " ",
+                  N.Shared.Of,
+                  " ",
+                  e == null ? void 0 : e.length
+                ]
+              }
+            ) })
+          ] }),
+          t && u && /* @__PURE__ */ o(
+            "div",
+            {
+              className: s("flex flex-1 flex-col gap-space-01", z({ size: l })),
+              "aria-live": "polite",
+              "aria-label": `Step details for step ${a}`,
+              children: [
+                /* @__PURE__ */ i("h3", { className: "text-text-display", children: t == null ? void 0 : t.title }),
+                (t == null ? void 0 : t.description) && /* @__PURE__ */ i("p", { className: "text-text-paragraph-primary", children: t == null ? void 0 : t.description })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+j.displayName = "RadialStepper";
 export {
-  b as RadioGroup,
-  f as RadioGroupItem
+  j as RadialStepper
 };

package/index.es63.js

@@ -1,30 +1,55 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-scroll-area";
-import * as t from "react";
-import { cn as s } from "./index.es88.js";
-const m = t.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ i(r.Root, { ref: c, className: s("relative overflow-hidden", o), ...a, children: [
-  /* @__PURE__ */ e(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: l }),
-  /* @__PURE__ */ e(d, {}),
-  /* @__PURE__ */ e(r.Corner, {})
-] }));
-m.displayName = r.Root.displayName;
-const d = t.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
-  r.ScrollAreaScrollbar,
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import * as a from "react";
+import { cva as h } from "./index.es110.js";
+import { cn as s } from "./index.es89.js";
+import m from "./index.es135.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",
   {
-    ref: c,
-    orientation: l,
-    className: s(
-      "flex touch-none select-none transition-colors",
-      l === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      o
-    ),
-    ...a,
-    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: s("relative rounded-full bg-border", l === "vertical" && "flex-1") })
+    variants: {
+      colors: {
+        primary: `data-[state=checked]:border-control-primary-checked data-[state=checked]:text-control-primary-checked
+                enabled:hover:data-[state=checked]:border-control-primary-hovered enabled:hover:data-[state=checked]:text-control-primary-hovered
+                enabled:active:data-[state=checked]:border-control-primary-pressed active:data-[state=checked]:text-control-primary-pressed
+                `,
+        neutral: `data-[state=checked]:border-control-neutral-checked data-[state=checked]:text-control-neutral-checked
+                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",
+      size: "default"
+    }
   }
-));
-d.displayName = r.ScrollAreaScrollbar.displayName;
+), l = a.createContext({
+  colors: "primary"
+}), 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: [
+  " ",
+  t
+] }) }));
+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, {}) })
+    }
+  ) });
+});
+f.displayName = r.Item.displayName;
 export {
-  m as ScrollArea,
-  d as ScrollBar
+  b as RadioGroup,
+  f as RadioGroupItem
 };

package/index.es64.js

@@ -1,74 +1,30 @@
-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.es88.js";
-import { strings as d } from "./index.es100.js";
-import { Button as j } from "./index.es23.js";
-import { Input as z } from "./index.es37.js";
-import f from "./index.es129.js";
-import { Stack as A } from "./index.es42.js";
-import D from "./index.es112.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(() => {
-      c(a);
-    }, [a]), m(() => {
-      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 = () => {
-      t === "onButton" && n(r);
-    };
-    return /* @__PURE__ */ u("div", { className: "space-y-space-01", children: [
-      /* @__PURE__ */ e(
-        z,
-        {
-          type: "text",
-          variant: "outline",
-          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: 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: d.Shared.Search,
-                className: "h-auto rounded-full border !p-space-01",
-                onClick: k,
-                children: /* @__PURE__ */ e(f, {})
-              }
-            )
-          ] }),
-          ref: C
-        }
-      ),
-      s && /* @__PURE__ */ e("p", { className: "text-caption-01 text-error", children: s })
-    ] });
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-scroll-area";
+import * as t from "react";
+import { cn as s } from "./index.es89.js";
+const m = t.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ i(r.Root, { ref: c, className: s("relative overflow-hidden", o), ...a, children: [
+  /* @__PURE__ */ e(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: l }),
+  /* @__PURE__ */ e(d, {}),
+  /* @__PURE__ */ e(r.Corner, {})
+] }));
+m.displayName = r.Root.displayName;
+const d = t.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
+  r.ScrollAreaScrollbar,
+  {
+    ref: c,
+    orientation: l,
+    className: s(
+      "flex touch-none select-none transition-colors",
+      l === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      o
+    ),
+    ...a,
+    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: s("relative rounded-full bg-border", l === "vertical" && "flex-1") })
   }
-);
-E.displayName = "SearchInput";
+));
+d.displayName = r.ScrollAreaScrollbar.displayName;
 export {
-  E as SearchInput
+  m as ScrollArea,
+  d as ScrollBar
 };

package/index.es65.js

@@ -1,144 +1,74 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import * as d from "react";
-import * as e from "@radix-ui/react-select";
-import { cva as u } from "./index.es109.js";
-import { cn as s } from "./index.es88.js";
-import b from "./index.es103.js";
-import h from "./index.es170.js";
-import x from "./index.es136.js";
-import g from "./index.es168.js";
-const w = u(
-  ` placeholder:text-form-field-text-placeholder data-[placeholder]:text-form-field-text-placeholder  text-form-field-text-filled after:bg-form-field-border-pressed group relative
-    flex w-full items-center justify-between gap-space-01 whitespace-nowrap overflow-hidden
-    aria-[invalid=true]:border-form-field-border-error  data-[state=open]:aria-[invalid=true]:after:bg-form-field-border-error
-    ps-space-03 pe-space-02  after:absolute after:bottom-0 after:start-1/2 after:h-[2px]  focus-visible:after:w-full focus:outline-none focus:shadow-md
-    after:w-0 after:transition-all after:ease-in-out data-[state=open]:after:w-full  disabled:cursor-not-allowed disabled:border-border-disabled disabled:text-disabled-text-default-disabled ltr:after:-translate-x-1/2 rtl:after:translate-x-1/2 [&>span]:truncate
-    `,
-  {
-    variants: {
-      variant: {
-        default: "bg-form-field-background-darker  enabled:hover:border-form-field-border-default",
-        outline: "bg-form-field-background-default enabled:hover:border-form-field-border-hovered border border-form-field-border-default disabled:border-border-disabled",
-        lighter: "bg-form-field-background-lighter  enabled:hover:border-form-field-border-default"
-      },
-      rounded: {
-        default: "rounded",
-        full: "rounded-4"
-      },
-      colors: {
-        default: "hover:enabled:border",
-        success: "border-success",
-        destructive: "border-form-field-border-error "
-      },
-      size: {
-        default: "py-space-02 text-body-02 h-[40px]",
-        sm: "py-space-01 text-body-01 h-[32px]"
-      }
-    },
-    defaultVariants: {
-      variant: "outline",
-      rounded: "default",
-      colors: "default",
-      size: "default"
-    }
-  }
-), c = d.createContext({
-  variant: "outline",
-  rounded: "default",
-  colors: "default",
-  size: "default"
-}), D = ({
-  variant: r,
-  size: o,
-  colors: t,
-  rounded: i,
-  children: l,
-  ...m
-}) => /* @__PURE__ */ a(e.Root, { ...m, children: /* @__PURE__ */ a(c.Provider, { value: { variant: r, size: o, colors: t, rounded: i }, children: l }) }), T = e.Group, U = e.Value, y = d.forwardRef(({ className: r, children: o, ...t }, i) => {
-  const l = d.useContext(c);
-  return /* @__PURE__ */ n(
-    e.Trigger,
-    {
-      ref: i,
-      "aria-label": t.placeholder || "select",
-      className: s(
-        w({ variant: l.variant, size: l.size, colors: l.colors, rounded: l.rounded, className: r })
-      ),
-      ...t,
-      children: [
-        o,
-        /* @__PURE__ */ a(e.Icon, { asChild: !0, children: /* @__PURE__ */ a(b, { className: "!size-[20px] shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180" }) })
-      ]
-    }
-  );
-});
-y.displayName = e.Trigger.displayName;
-const f = d.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ a(e.ScrollUpButton, { ref: t, className: s("flex cursor-default items-center justify-center py-1", r), ...o, children: /* @__PURE__ */ a(h, {}) }));
-f.displayName = e.ScrollUpButton.displayName;
-const p = d.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ a(e.ScrollDownButton, { ref: t, className: s("flex cursor-default items-center justify-center py-1", r), ...o, children: /* @__PURE__ */ a(x, {}) }));
-p.displayName = e.ScrollDownButton.displayName;
-const v = d.forwardRef(({ className: r, children: o, position: t = "popper", ...i }, l) => /* @__PURE__ */ a(e.Portal, { children: /* @__PURE__ */ n(
-  e.Content,
-  {
-    ref: l,
-    className: s(
-      "relative z-50 max-h-96  overflow-hidden rounded-2 border bg-card p-space-02 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      t === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      r
-    ),
-    position: t,
-    ...i,
-    children: [
-      /* @__PURE__ */ a(f, {}),
-      /* @__PURE__ */ a(
-        e.Viewport,
+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.es89.js";
+import { strings as d } from "./index.es101.js";
+import { Button as j } from "./index.es23.js";
+import { Input as z } from "./index.es37.js";
+import f from "./index.es130.js";
+import { Stack as A } from "./index.es42.js";
+import D from "./index.es113.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(() => {
+      c(a);
+    }, [a]), m(() => {
+      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 = () => {
+      t === "onButton" && n(r);
+    };
+    return /* @__PURE__ */ u("div", { className: "space-y-space-01", children: [
+      /* @__PURE__ */ e(
+        z,
         {
-          className: s(
-            "p-1",
-            t === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[calc(var(--radix-select-trigger-width)_-_16px)]"
-          ),
-          children: o
+          type: "text",
+          variant: "outline",
+          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: 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: d.Shared.Search,
+                className: "h-auto rounded-full border !p-space-01",
+                onClick: k,
+                children: /* @__PURE__ */ e(f, {})
+              }
+            )
+          ] }),
+          ref: C
         }
       ),
-      /* @__PURE__ */ a(p, {})
-    ]
+      s && /* @__PURE__ */ e("p", { className: "text-caption-01 text-error", children: s })
+    ] });
   }
-) }));
-v.displayName = e.Content.displayName;
-const N = d.forwardRef(
-  ({ className: r, ...o }, t) => /* @__PURE__ */ a(e.Label, { ref: t, className: s("py-1.5 pl-8 pr-2 text-xs font-bold ", r), ...o })
-);
-N.displayName = e.Label.displayName;
-const S = d.forwardRef(
-  ({ className: r, children: o, ...t }, i) => /* @__PURE__ */ n(
-    e.Item,
-    {
-      ref: i,
-      className: s(
-        "relative flex w-full cursor-default select-none items-center rounded-1 py-space-02 pe-space-02 ps-space-05 text-sm leading-[2.2rem] outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-card-hover focus:bg-accent focus:text-accent-foreground",
-        r
-      ),
-      ...t,
-      children: [
-        /* @__PURE__ */ a("span", { className: "absolute start-space-01 flex h-space-04 w-space-04 items-baseline justify-center", children: /* @__PURE__ */ a(e.ItemIndicator, { children: /* @__PURE__ */ a(g, { className: "h-space-04 w-space-04" }) }) }),
-        /* @__PURE__ */ a(e.ItemText, { children: o })
-      ]
-    }
-  )
 );
-S.displayName = e.Item.displayName;
-const z = d.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ a(e.Separator, { ref: t, className: s("-mx-1 my-1 h-px bg-muted", r), ...o }));
-z.displayName = e.Separator.displayName;
+E.displayName = "SearchInput";
 export {
-  D as Select,
-  v as SelectContent,
-  T as SelectGroup,
-  S as SelectItem,
-  N as SelectLabel,
-  p as SelectScrollDownButton,
-  f as SelectScrollUpButton,
-  z as SelectSeparator,
-  y as SelectTrigger,
-  U as SelectValue,
-  w as selectVariants
+  E as SearchInput
 };