mada-design-system 0.5.6 → 0.5.8

package/index.es.d.ts

@@ -635,7 +635,7 @@ export declare const ComboboxContent: default_2.ForwardRefExoticComponent<defaul
 
 export declare const ComboboxControl: <_, T>({ options, optionLabel, placeholder, isLoading, optionValue, onChange, value, triggerProps, ...rest }: Props<T>) => JSX_2.Element;
 
-export declare const ComboboxControlNoForm: <_, T>({ options, optionLabel, placeholder, isLoading, optionValue, onChange, value, triggerProps, isDate, disabledOption, ...rest }: Props<T>) => JSX_2.Element;
+export declare const ComboboxControlNoForm: <_, T>({ options, optionLabel, placeholder, isLoading, optionValue, renderItem, onChange, value, triggerProps, isDate, disabledOption, ...rest }: Props<T>) => JSX_2.Element;
 
 export declare const ComboboxEmpty: default_2.ForwardRefExoticComponent<Omit<{
     children?: default_2.ReactNode;
@@ -1017,6 +1017,7 @@ declare interface FilterSelectProps {
     data: {
         value: string;
         label: string;
+        renderItem?: default_2.ReactNode;
     }[];
     disabled?: boolean;
     isLoading?: boolean;
@@ -1129,7 +1130,7 @@ export declare const Heading: default_2.ForwardRefExoticComponent<{
     as?: AllowedElements | undefined;
     asChild?: boolean;
     children?: ReactNode;
-} & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & default_2.RefAttributes<"symbol" | "object" | "code" | "map" | "filter" | "search" | "big" | "link" | "small" | "sub" | "sup" | "stop" | "label" | "s" | "dd" | "a" | "button" | "div" | "form" | "h2" | "h3" | "img" | "input" | "li" | "nav" | "ol" | "p" | "select" | "span" | "svg" | "ul" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | "cite" | "col" | "colgroup" | "data" | "datalist" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "h1" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "ins" | "kbd" | "keygen" | "legend" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "noindex" | "noscript" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "source" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | default_2.ComponentClass<any, any> | default_2.FunctionComponent<any>>>;
+} & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & default_2.RefAttributes<"symbol" | "object" | "code" | "map" | "filter" | "search" | "big" | "link" | "small" | "sub" | "sup" | "stop" | "label" | "s" | "dd" | "a" | "button" | "div" | "form" | "h2" | "h3" | "img" | "input" | "li" | "nav" | "ol" | "p" | "span" | "svg" | "ul" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | "cite" | "col" | "colgroup" | "data" | "datalist" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "h1" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "ins" | "kbd" | "keygen" | "legend" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "noindex" | "noscript" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | default_2.ComponentClass<any, any> | default_2.FunctionComponent<any>>>;
 
 export declare const HoverCard: React_2.FC<HoverCardPrimitive.HoverCardProps>;
 
@@ -1426,7 +1427,7 @@ declare namespace Local_DTO_2 {
     };
 }
 
-export declare function MultiSelect<T extends ValueType>({ placeholder, options, selectedValues, onChange, disabled, size, dataTestId, rounded, variant, colors, isLoading, className, checkboxSize, threshold, }: Readonly<MultiSelectProps<T>>): JSX_2.Element;
+export declare function MultiSelect<T extends ValueType>({ placeholder, options, selectedValues, onChange, disabled, size, dataTestId, rounded, variant, colors, isLoading, className, checkboxSize, threshold, showSelectButton, selectButtonTitle }: Readonly<MultiSelectProps<T>>): JSX_2.Element;
 
 export declare interface MultiSelectProps<T extends ValueType> extends VariantProps<typeof selectVariants> {
     placeholder: string;
@@ -1439,6 +1440,8 @@ export declare interface MultiSelectProps<T extends ValueType> extends VariantPr
     isLoading?: boolean;
     checkboxSize?: 'default' | 'sm' | 'xs';
     threshold?: number;
+    showSelectButton?: boolean;
+    selectButtonTitle?: string;
 }
 
 export declare const NavigationAction: React_2.ForwardRefExoticComponent<React_2.HtmlHTMLAttributes<HTMLButtonElement> & {
@@ -1569,6 +1572,7 @@ declare interface Props<T> extends VariantProps<typeof selectVariants> {
     options?: T[];
     optionLabel: keyof T;
     optionValue: keyof T;
+    renderItem?: (option: T) => default_2.ReactNode;
     value: string;
     placeholder: string;
     isLoading?: boolean;
@@ -2300,7 +2304,7 @@ export declare const tabVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-declare const Text_2: default_2.ForwardRefExoticComponent<TextProps<AllowedElements_2> & default_2.RefAttributes<"symbol" | "object" | "code" | "map" | "filter" | "search" | "big" | "link" | "small" | "sub" | "sup" | "stop" | "label" | "s" | "dd" | "a" | "button" | "div" | "form" | "h2" | "h3" | "img" | "input" | "li" | "nav" | "ol" | "p" | "select" | "span" | "svg" | "ul" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | "cite" | "col" | "colgroup" | "data" | "datalist" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "h1" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "ins" | "kbd" | "keygen" | "legend" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "noindex" | "noscript" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "source" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | default_2.ComponentClass<any, any> | default_2.FunctionComponent<any>>>;
+declare const Text_2: default_2.ForwardRefExoticComponent<TextProps<AllowedElements_2> & default_2.RefAttributes<"symbol" | "object" | "code" | "map" | "filter" | "search" | "big" | "link" | "small" | "sub" | "sup" | "stop" | "label" | "s" | "dd" | "a" | "button" | "div" | "form" | "h2" | "h3" | "img" | "input" | "li" | "nav" | "ol" | "p" | "span" | "svg" | "ul" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | "cite" | "col" | "colgroup" | "data" | "datalist" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "h1" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "ins" | "kbd" | "keygen" | "legend" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "noindex" | "noscript" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | default_2.ComponentClass<any, any> | default_2.FunctionComponent<any>>>;
 export { Text_2 as Text }
 
 export declare const Textarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<HTMLTextAreaElement>>;
@@ -2603,3 +2607,10 @@ declare type WidgetSize = 'half' | 'full';
 export declare const WidgetTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLHeadingElement> & React_2.RefAttributes<HTMLDivElement>>;
 
 export { }
+
+
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        className?: string;
+    }
+}

package/index.es10.js

@@ -1,99 +1,118 @@
-import { jsxs as o, jsx as r, Fragment as I } from "react/jsx-runtime";
-import { useVirtualizer as L } from "./index.es121.js";
-import x, { useCallback as j, useMemo as B } from "react";
-import { useToggle as E } from "./index.es112.js";
-import { strings as M } from "./index.es97.js";
-import P from "./index.es3.js";
-import { ShouldRender as k } from "./index.es14.js";
-import { Badge as F } from "./index.es20.js";
-import { Button as O } from "./index.es22.js";
-import { Checkbox as _ } from "./index.es25.js";
-import { Command as $, CommandInput as A, CommandList as G, CommandEmpty as T, CommandGroup as q, CommandItem as D } from "./index.es27.js";
-import { Popover as H, PopoverTrigger as J, PopoverContent as K } from "./index.es59.js";
-import { selectVariants as Q } from "./index.es64.js";
-import { debounce as U, cn as W } from "./index.es85.js";
-import X from "./index.es110.js";
-function pr({
-  placeholder: i,
-  options: e,
-  selectedValues: t,
-  onChange: m,
-  disabled: h,
-  size: l = "default",
-  dataTestId: c = "",
-  rounded: d = "default",
-  variant: p = "outline",
-  colors: s = "default",
-  isLoading: a = !1,
+import { jsxs as o, jsx as e, Fragment as O } from "react/jsx-runtime";
+import { useVirtualizer as T } from "./index.es112.js";
+import h, { useCallback as _, useMemo as $, useEffect as A } from "react";
+import { useToggle as D } from "./index.es103.js";
+import { strings as z } from "./index.es97.js";
+import G from "./index.es3.js";
+import { ShouldRender as y } from "./index.es14.js";
+import { Badge as q } from "./index.es20.js";
+import { Button as L } from "./index.es22.js";
+import { Checkbox as H } from "./index.es25.js";
+import { Command as J, CommandInput as K, CommandList as Q, CommandEmpty as U, CommandGroup as W, CommandItem as X } from "./index.es27.js";
+import { Popover as Y, PopoverTrigger as Z, PopoverContent as B } from "./index.es59.js";
+import { selectVariants as V } from "./index.es64.js";
+import { debounce as ee, cn as re } from "./index.es85.js";
+import ae from "./index.es100.js";
+function be({
+  placeholder: l,
+  options: r,
+  selectedValues: a,
+  onChange: c,
+  disabled: g,
+  size: s = "default",
+  dataTestId: d = "",
+  rounded: u = "default",
+  variant: x = "outline",
+  colors: v = "default",
+  isLoading: n = !1,
   className: f,
-  checkboxSize: u = "default",
-  threshold: g = 1
+  checkboxSize: b = "default",
+  threshold: N = 1,
+  showSelectButton: i,
+  selectButtonTitle: j
 }) {
-  var w;
-  const [v, b] = E(!1), [C, N] = x.useState(""), [z, S] = x.useState(""), y = j(() => U((n) => N(n), 300), []), R = B(() => e.filter((n) => n.label.toLowerCase().includes(C.toLowerCase())), [e, C]);
-  return /* @__PURE__ */ o(
-    H,
+  var I;
+  const [C, S] = D(!1), [R, w] = h.useState(""), [F, E] = h.useState(""), [k, p] = h.useState(a), M = _(() => ee((t) => w(t), 300), []), P = $(() => r.filter((t) => t.label.toLowerCase().includes(R.toLowerCase())), [r, R]), m = C && i ? k : a;
+  return A(() => {
+    p(a);
+  }, [a]), /* @__PURE__ */ o(
+    Y,
     {
-      open: v,
+      open: C,
       onOpenChange: () => {
-        b(), v || (S(""), N(""));
+        S(), C || (E(""), w(""), i && p(a));
       },
       children: [
-        /* @__PURE__ */ r(J, { asChild: !0, disabled: h, "data-testid": c, children: /* @__PURE__ */ o("button", { className: W(Q({ variant: p, colors: s, size: l, rounded: d }), f), children: [
-          /* @__PURE__ */ r("span", { className: "shrink-0 text-body-01 text-form-field-text-placeholder ", children: i }),
-          (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ r(I, { children: (t == null ? void 0 : t.length) > g ? /* @__PURE__ */ r("label", { className: "ms-auto flex size-space-05 shrink-0 items-center justify-center rounded-full  bg-inverted text-caption-01 text-inverted-foreground", children: t.length }) : (w = e == null ? void 0 : e.filter((n) => t == null ? void 0 : t.includes(n.value))) == null ? void 0 : w.map((n) => /* @__PURE__ */ r(F, { colors: "gray", variant: "ghost", size: "sm", children: n.label }, n.value)) }),
-          a ? /* @__PURE__ */ r(P, {}) : /* @__PURE__ */ r(
-            X,
+        /* @__PURE__ */ e(Z, { asChild: !0, disabled: g, "data-testid": d, children: /* @__PURE__ */ o("button", { className: re(V({ variant: x, colors: v, size: s, rounded: u }), f), children: [
+          /* @__PURE__ */ e("span", { className: "shrink-0 text-body-01 text-form-field-text-placeholder ", children: l }),
+          (m == null ? void 0 : m.length) > 0 && /* @__PURE__ */ e(O, { children: m.length > N ? /* @__PURE__ */ e("label", { className: "ms-auto flex size-space-05 shrink-0 items-center justify-center rounded-full  bg-inverted text-caption-01 text-inverted-foreground", children: m.length }) : (I = r == null ? void 0 : r.filter((t) => m.includes(t.value))) == null ? void 0 : I.map((t) => /* @__PURE__ */ e(q, { colors: "gray", variant: "ghost", size: "sm", className: "ms-auto", children: t.label }, t.value)) }),
+          n ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ e(
+            ae,
             {
               className: "size-[20px]  shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180",
               "aria-hidden": !0
             }
           )
         ] }) }),
-        /* @__PURE__ */ r(
-          K,
+        /* @__PURE__ */ e(
+          B,
           {
             className: "min-h-space-07 min-w-[var(--radix-popover-trigger-width)] p-space-00   max-md:max-w-[var(--radix-popper-available-width)]",
             align: "start",
-            children: /* @__PURE__ */ o($, { className: "w-full", shouldFilter: !1, children: [
+            children: /* @__PURE__ */ o(J, { className: "w-full", shouldFilter: !1, children: [
               /* @__PURE__ */ o("div", { className: "p-space-02", children: [
-                /* @__PURE__ */ r(k, { shouldRender: (e == null ? void 0 : e.length) > 7, children: /* @__PURE__ */ r(
-                  A,
+                /* @__PURE__ */ e(y, { shouldRender: (r == null ? void 0 : r.length) > 7, children: /* @__PURE__ */ e(
+                  K,
                   {
-                    placeholder: i,
-                    value: z,
-                    onValueChange: (n) => {
-                      S(n), y()(n);
+                    placeholder: l,
+                    value: F,
+                    onValueChange: (t) => {
+                      E(t), M()(t);
                     }
                   }
                 ) }),
-                /* @__PURE__ */ o(G, { children: [
-                  /* @__PURE__ */ r(T, { children: "No results found." }),
-                  /* @__PURE__ */ r(
-                    Y,
+                /* @__PURE__ */ o(Q, { children: [
+                  /* @__PURE__ */ e(U, { className: "my-auto text-center", children: z.Shared.NoDataFound }),
+                  /* @__PURE__ */ e(
+                    te,
                     {
-                      options: R,
-                      dataTestId: c,
-                      onChange: m,
-                      selectedValues: t,
-                      checkboxSize: u
+                      options: P,
+                      dataTestId: d,
+                      selectedValues: i ? k : a,
+                      onChange: i ? p : c,
+                      checkboxSize: b
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ r(k, { shouldRender: !!(t != null && t.length), children: /* @__PURE__ */ r("div", { className: "flex items-center gap-space-04 border-t border-t-border bg-background px-space-04 py-space-02", children: /* @__PURE__ */ r(
-                O,
-                {
-                  colors: "neutral",
-                  variant: "text",
-                  size: "sm",
-                  onClick: () => {
-                    m([]), b();
-                  },
-                  className: "flex-1",
-                  children: M.Shared.reset
-                }
-              ) }) })
+              /* @__PURE__ */ e(y, { shouldRender: !!(a != null && a.length) || i, children: /* @__PURE__ */ o("div", { className: "flex items-center gap-space-04 border-t border-t-border bg-background px-space-04 py-space-02", children: [
+                /* @__PURE__ */ e(
+                  L,
+                  {
+                    colors: "neutral",
+                    variant: "text",
+                    size: "sm",
+                    onClick: () => {
+                      c([]), p([]), i || S();
+                    },
+                    className: "flex-1",
+                    children: z.Shared.reset
+                  }
+                ),
+                /* @__PURE__ */ e(y, { shouldRender: i, children: /* @__PURE__ */ e(
+                  L,
+                  {
+                    type: "button",
+                    colors: "primary",
+                    size: "sm",
+                    onClick: () => {
+                      c(k), S();
+                    },
+                    className: "flex-1",
+                    children: j ?? z.Shared.Select
+                  }
+                ) })
+              ] }) })
             ] })
           }
         )
@@ -101,43 +120,43 @@ function pr({
     }
   );
 }
-function Y({
-  options: i,
-  selectedValues: e,
-  dataTestId: t,
-  onChange: m,
-  checkboxSize: h
+function te({
+  options: l,
+  selectedValues: r,
+  dataTestId: a,
+  onChange: c,
+  checkboxSize: g
 }) {
-  var d;
-  const l = x.useRef(null), c = L({
-    count: i.length,
-    getScrollElement: () => l.current,
+  var u;
+  const s = h.useRef(null), d = T({
+    count: l.length,
+    getScrollElement: () => s.current,
     estimateSize: () => 36,
     // Adjust based on your row height
     overscan: 10
     // Improves scroll performance
   });
-  return /* @__PURE__ */ r(q, { ref: l, className: "overflow-auto", children: (d = c.getVirtualItems()) == null ? void 0 : d.map((p, s) => {
-    const a = i[p.index], f = e == null ? void 0 : e.includes(a.value);
+  return /* @__PURE__ */ e(W, { ref: s, className: "overflow-auto", children: (u = d.getVirtualItems()) == null ? void 0 : u.map((x, v) => {
+    const n = l[x.index], f = r == null ? void 0 : r.includes(n.value);
     return /* @__PURE__ */ o(
-      D,
+      X,
       {
-        "data-testid": `${t}-${s}`,
+        "data-testid": `${a}-${v}`,
         className: "flex gap-space-02",
         onSelect: () => {
-          const u = f ? e.filter((g) => g !== a.value) : [...e, a.value];
-          m(u);
+          const b = f ? r.filter((N) => N !== n.value) : [...r, n.value];
+          c(b);
         },
         children: [
-          a.icon && /* @__PURE__ */ r(a.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ r("span", { children: a.label }),
-          /* @__PURE__ */ r(_, { className: "ms-auto", checked: f, size: h })
+          n.icon && /* @__PURE__ */ e(n.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ e("span", { children: n.label }),
+          /* @__PURE__ */ e(H, { className: "ms-auto", checked: f, size: g })
         ]
       },
-      a.value
+      n.value
     );
   }) });
 }
 export {
-  pr as MultiSelect
+  be as MultiSelect
 };