prometeo-design-system 2.7.0 → 2.7.1

package/dist/{Select-BQMdfu1n.js → Select-C2-CCMwC.js}

@@ -5,7 +5,7 @@ import Ne, { memo as Z, useState as De, useRef as ce, useMemo as oe, useCallback
 import Xe from "./Spinner.es.js";
 import { createPortal as Ye } from "react-dom";
 import { u as Ze } from "./useDragScroll-CHN9OMwn.js";
-import { u as et, I as tt } from "./Input-BTsR-vNF.js";
+import { u as et, I as tt } from "./Input-C22kKz7U.js";
 import { H as nt } from "./HelperComponent-U6mPwuDH.js";
 import rt from "./CheckBox.es.js";
 import { Skeleton as Fe } from "./Skeleton.es.js";
@@ -138,14 +138,8 @@ const Ue = (e, n) => {
       "focus:border-error-default focus:border-2",
       "focus:ring-0 focus:ring-error-default/20"
     ),
-    label: f(
-      "text-error-light",
-      "peer-focus:text-error-light"
-    ),
-    icon: f(
-      "text-error-medium-default",
-      "peer-focus:text-error-light"
-    )
+    label: f("text-error-light", "peer-focus:text-error-light"),
+    icon: f("text-error-medium-default", "peer-focus:text-error-light")
   },
   success: {
     container: "",
@@ -154,14 +148,8 @@ const Ue = (e, n) => {
       "focus:border-success-default focus:border-2",
       "focus:ring-0 focus:ring-success-default/20"
     ),
-    label: f(
-      "text-success",
-      "peer-focus:text-success-light"
-    ),
-    icon: f(
-      "text-success-medium-default",
-      "peer-focus:text-success-light"
-    )
+    label: f("text-success", "peer-focus:text-success-light"),
+    icon: f("text-success-medium-default", "peer-focus:text-success-light")
   }
 }, Be = {
   input: f(
@@ -179,8 +167,10 @@ const Ue = (e, n) => {
   )
 };
 function at(e) {
-  const [n, m] = De(!1), [i, u] = De([]), [v, h] = De(""), j = ce(null), p = ce(null), b = ce(null), k = ce(null), I = ce(() => {
-  }), W = ce(null), A = ce(/* @__PURE__ */ new Set()), {
+  const [n, m] = De(!1), [i, u] = De([]), [v, h] = De(""), j = ce(null), p = ce(null), b = ce(null), k = ce(null), I = ce(
+    () => {
+    }
+  ), W = ce(null), A = ce(/* @__PURE__ */ new Set()), {
     id: x,
     name: S,
     label: M,
@@ -232,32 +222,33 @@ function at(e) {
       }
     }, a = n || pe ? "active" : "default";
     return t[ie][a];
-  }, T = U((t) => ({
-    id: G(t, E),
-    value: G(t, E),
-    label: G(t, de)
-  }), [E, de]), Y = oe(
-    () => st(K),
-    [K]
-  ), ge = oe(
+  }, T = U(
+    (t) => ({
+      id: G(t, E),
+      value: G(t, E),
+      label: G(t, de)
+    }),
+    [E, de]
+  ), Y = oe(() => st(K), [K]), ge = oe(
     () => Y.map(T),
     [Y, T]
-  ), r = oe(
-    () => {
-      const t = [];
-      if (e.multiple)
-        e.value?.forEach((a) => {
-          const l = Y?.find((g) => G(g, E) === a);
-          l && t.push(l);
-        });
-      else {
-        const a = Y?.find((l) => G(l, E) === e.value);
-        a && t.push(a);
-      }
-      return t;
-    },
-    [e.value, E, Y, e.multiple]
-  ), o = oe(
+  ), r = oe(() => {
+    const t = [];
+    if (e.multiple)
+      e.value?.forEach((a) => {
+        const l = Y?.find(
+          (g) => G(g, E) === a
+        );
+        l && t.push(l);
+      });
+    else {
+      const a = Y?.find(
+        (l) => G(l, E) === e.value
+      );
+      a && t.push(a);
+    }
+    return t;
+  }, [e.value, E, Y, e.multiple]), o = oe(
     () => r.map(T),
     [r, T]
   ), c = oe(
@@ -288,7 +279,9 @@ function at(e) {
   }, [K, E, J, T]), w = U(
     (t, a) => {
       if (!t || t.length === 0) return;
-      const l = t.map((C) => T(C));
+      const l = t.map(
+        (C) => T(C)
+      );
       if (!e.multiple) {
         const C = l[0];
         if (!C) return;
@@ -302,12 +295,16 @@ function at(e) {
         const D = ge.find((B) => B.value === C);
         D && H.push(D);
       });
-      const $ = new Set(H.map((C) => C.id)), P = new Set(l.map((C) => C.id)), le = l.every((C) => $.has(C.id)), xe = a ?? "toggle", ye = xe === "select" || xe === "toggle" && !le;
+      const $ = new Set(H.map((C) => C.id)), P = new Set(l.map((C) => C.id)), le = l.every(
+        (C) => $.has(C.id)
+      ), xe = a ?? "toggle", ye = xe === "select" || xe === "toggle" && !le;
       let _;
       if (!ye)
         _ = H.filter((C) => !P.has(C.id));
       else {
-        const C = new Map(H.map((D) => [D.id, D]));
+        const C = new Map(
+          H.map((D) => [D.id, D])
+        );
         l.forEach((D) => {
           C.set(D.id, D);
         }), _ = Array.from(C.values());
@@ -332,26 +329,48 @@ function at(e) {
     else {
       const a = e.value || [], l = [], g = a.includes(t.value);
       a.forEach(($) => {
-        const P = ge.find((le) => le.value === $);
+        const P = ge.find(
+          (le) => le.value === $
+        );
         P && l.push(P);
       });
       const H = g ? l.filter(($) => $.value !== t.value) : [...l, t];
       e.onChange?.(H, S);
     }
   };
-  const y = U((t, a = !1) => {
-    X?.(t, S), I.current?.(t), a && (m(!1), Se?.());
-  }, [X, Se, S]), R = (t) => {
+  const y = U(
+    (t, a = !1) => {
+      X?.(t, S), I.current?.(t), a && (m(!1), Se?.());
+    },
+    [X, Se, S]
+  ), R = (t) => {
     t.preventDefault(), t.stopPropagation(), t.target.blur(), me?.(), e.multiple ? e.onChange?.([], S) : e.onChange?.(void 0, S);
-  }, q = U((t) => {
-    e.multiple || e.onChange?.(void 0, S);
-    const a = Y.find((g) => G(g, E) === t);
-    if (!a) return;
-    const l = T(a);
-    X?.(l, S), I.current?.(l), ke?.(a);
-  }, [X, ke, Y, S, e.multiple, e.onChange, T, E]), re = U((t) => {
-    q(t);
-  }, [q]);
+  }, q = U(
+    (t) => {
+      e.multiple || e.onChange?.(void 0, S);
+      const a = Y.find(
+        (g) => G(g, E) === t
+      );
+      if (!a) return;
+      const l = T(a);
+      X?.(l, S), I.current?.(l), ke?.(a);
+    },
+    [
+      X,
+      ke,
+      Y,
+      S,
+      e.multiple,
+      e.onChange,
+      T,
+      E
+    ]
+  ), re = U(
+    (t) => {
+      q(t);
+    },
+    [q]
+  );
   ve(() => {
     if (!n) return;
     const t = (a) => {
@@ -376,20 +395,24 @@ function at(e) {
       } catch {
       }
     });
-  }, [n]), Qe(V, () => ({
-    open: () => {
-      !n && m(!0);
-    },
-    close: () => {
-      n && m(!1);
-    },
-    toggle: () => m((t) => !t),
-    handleOptionSelect: y,
-    subscribeOpenChange: (t) => (A.current.add(t), () => {
-      A.current.delete(t);
+  }, [n]), Qe(
+    V,
+    () => ({
+      open: () => {
+        !n && m(!0);
+      },
+      close: () => {
+        n && m(!1);
+      },
+      toggle: () => m((t) => !t),
+      handleOptionSelect: y,
+      subscribeOpenChange: (t) => (A.current.add(t), () => {
+        A.current.delete(t);
+      }),
+      searchInputRef: b
     }),
-    searchInputRef: b
-  }), [n, y]);
+    [n, y]
+  );
   const be = (t) => {
     t.preventDefault(), t.stopPropagation(), t.target.matches(":focus-visible") && !ze && !n && (m(!0), setTimeout(() => {
       b.current?.focus();
@@ -402,10 +425,7 @@ function at(e) {
   return /* @__PURE__ */ s.jsxs(
     "div",
     {
-      className: f(
-        "relative bg-inherit select-none w-full",
-        z
-      ),
+      className: f("relative bg-inherit select-none w-full", z),
       ref: j,
       draggable: !1,
       style: Ge,
@@ -451,7 +471,9 @@ function at(e) {
                 /* @__PURE__ */ s.jsx(
                   "div",
                   {
-                    className: f("flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none "),
+                    className: f(
+                      "flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none "
+                    ),
                     ref: Te,
                     onPointerUp: ne.onPointerUp,
                     onPointerDown: ne.onPointerDown,
@@ -479,14 +501,24 @@ function at(e) {
                         placeholder: $e,
                         onRemoveOption: q,
                         multiple: e.multiple || !1,
-                        className: f(Ke === "scroll" ? "flex-nowrap" : "flex-wrap"),
+                        className: f(
+                          Ke === "scroll" ? "flex-nowrap" : "flex-wrap"
+                        ),
                         disabled: te
                       }
                     )
                   }
                 ),
                 /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-                  he && /* @__PURE__ */ s.jsx(Xe, { size: "small", variant: "clip", className: " translate-y-1", speedMultiplier: 0.7 }),
+                  he && /* @__PURE__ */ s.jsx(
+                    Xe,
+                    {
+                      size: "small",
+                      variant: "clip",
+                      className: " translate-y-1",
+                      speedMultiplier: 0.7
+                    }
+                  ),
                   pe && me && /* @__PURE__ */ s.jsx(
                     "button",
                     {
@@ -495,7 +527,16 @@ function at(e) {
                       },
                       type: "button",
                       tabIndex: -1,
-                      children: /* @__PURE__ */ s.jsx(je.Cancel, { size: 20, className: f(" cursor-pointer transition-all", Re[F].icon) })
+                      children: /* @__PURE__ */ s.jsx(
+                        je.Cancel,
+                        {
+                          size: 20,
+                          className: f(
+                            " cursor-pointer transition-all",
+                            Re[F].icon
+                          )
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ s.jsx(
@@ -609,12 +650,23 @@ function ut({
   enableGroupToggle: X = !0,
   onGroupSelectChange: Se
 }) {
-  const me = e ? 380 : 320, te = W === "static" ? m !== "" ? -20 : 4 : 7, F = U(() => N ? N.endsWith("px") ? Number(N.replace("px", "")) : N.endsWith("vh") ? window.innerHeight * Number(N.replace("vh", "")) / 100 : N.endsWith("%") ? window.innerHeight * Number(N.replace("%", "")) / 100 : me : me, [N, me])(), [he, Me] = De({ direction: "down", height: F }), [we, ie] = De(() => /* @__PURE__ */ new Set()), ze = U((r) => !we.has(r), [we]), Oe = U((r, o) => {
-    ie((c) => {
-      const d = new Set(c), w = d.has(r);
-      return (o === void 0 ? !w : !o) ? d.add(r) : d.delete(r), d;
-    });
-  }, []), Le = (r) => {
+  const me = e ? 380 : 320, te = W === "static" ? m !== "" ? -20 : 4 : 7, F = U(() => N ? N.endsWith("px") ? Number(N.replace("px", "")) : N.endsWith("vh") ? window.innerHeight * Number(N.replace("vh", "")) / 100 : N.endsWith("%") ? window.innerHeight * Number(N.replace("%", "")) / 100 : me : me, [N, me])(), [he, Me] = De({
+    direction: "down",
+    height: F
+  }), [we, ie] = De(
+    () => /* @__PURE__ */ new Set()
+  ), ze = U(
+    (r) => !we.has(r),
+    [we]
+  ), Oe = U(
+    (r, o) => {
+      ie((c) => {
+        const d = new Set(c), w = d.has(r);
+        return (o === void 0 ? !w : !o) ? d.add(r) : d.delete(r), d;
+      });
+    },
+    []
+  ), Le = (r) => {
     if (!p.current || !h.current) return;
     const o = h.current.getBoundingClientRect();
     switch (r || he.direction) {
@@ -671,7 +723,10 @@ function ut({
           re(), R = ue;
           return;
         }
-        const a = be, l = G(a, b), g = Ue(String(l ?? ""), o);
+        const a = be, l = G(
+          a,
+          b
+        ), g = Ue(String(l ?? ""), o);
         R ? g && q.push(a) : g && y.push(a);
       }), re(), y;
     }
@@ -710,12 +765,24 @@ function ut({
       return;
     }
     z && (z(""), Q(i));
-  }, [i, ae, k, K, Q, z, x]), Pe = (r) => {
-    r.key === "ArrowDown" ? (r.preventDefault(), p.current?.querySelector("[role=listitem]")?.focus()) : (r.key === "Tab" || r.key === "Escape") && setTimeout(() => {
+  }, [
+    i,
+    ae,
+    k,
+    K,
+    Q,
+    z,
+    x
+  ]), Pe = (r) => {
+    r.key === "ArrowDown" ? (r.preventDefault(), p.current?.querySelector(
+      "[role=listitem]"
+    )?.focus()) : (r.key === "Tab" || r.key === "Escape") && setTimeout(() => {
       J.current?.focus(), fe();
     }, 10);
   }, T = (r, o) => {
-    const c = Array.from(p.current?.querySelectorAll("[role=listitem]") || []), d = c.indexOf(r.currentTarget);
+    const c = Array.from(
+      p.current?.querySelectorAll("[role=listitem]") || []
+    ), d = c.indexOf(r.currentTarget);
     if (r.key === "ArrowDown") {
       r.preventDefault();
       const w = d < c.length - 1 ? d + 1 : d;
@@ -737,35 +804,34 @@ function ut({
     }, 10)) : r.key === "Tab" && setTimeout(() => {
       J.current?.focus(), fe();
     }, 10);
-  }, Y = Array.from({ length: 5 }).map((r, o) => x ? Ne.createElement(
-    Z(
-      x,
-      (c, d) => c.isSelected === d.isSelected && c.option === d.option && c.disabled === d.disabled && c.multiple === d.multiple && c.renderContext === d.renderContext
-    ),
-    {
-      key: `skeleton-option-${o}`,
-      option: { id: o, label: "", value: "" },
-      isSelected: !1,
-      multiple: !1,
-      onSelect: () => {
-      },
-      disabled: !1,
-      isLoading: !0,
-      renderContext: S
-    }
-  ) : /* @__PURE__ */ s.jsx(
-    We,
-    {
-      multiple: !1,
-      isLoading: !0,
-      onSelect: () => {
+  }, Y = Array.from({ length: 5 }).map(
+    (r, o) => x ? Ne.createElement(
+      Z(x, (c, d) => c.isSelected === d.isSelected && c.option === d.option && c.disabled === d.disabled && c.multiple === d.multiple && c.renderContext === d.renderContext),
+      {
+        key: `skeleton-option-${o}`,
+        option: { id: o, label: "", value: "" },
+        isSelected: !1,
+        multiple: !1,
+        onSelect: () => {
+        },
+        disabled: !1,
+        isLoading: !0,
+        renderContext: S
+      }
+    ) : /* @__PURE__ */ s.jsx(
+      We,
+      {
+        multiple: !1,
+        isLoading: !0,
+        onSelect: () => {
+        },
+        isSelected: !1,
+        option: { id: o, label: "", value: "" }
       },
-      isSelected: !1,
-      option: { id: o, label: "", value: "" }
-    },
-    `skeleton-option-${// biome-ignore lint/suspicious/noArrayIndexKey: <>
-    o}`
-  )), ge = /* @__PURE__ */ s.jsx(
+      `skeleton-option-${// biome-ignore lint/suspicious/noArrayIndexKey: <>
+      o}`
+    )
+  ), ge = /* @__PURE__ */ s.jsx(
     "div",
     {
       tabIndex: 0,
@@ -805,7 +871,7 @@ function ut({
                 isFetching: ee,
                 onKeyDown: Pe,
                 onClear: Ie,
-                onChange: $e,
+                onChange: (r) => $e(r.target.value),
                 placeholder: ke,
                 className: " bg-neutral-medium-pressed",
                 ...j
@@ -819,7 +885,10 @@ function ut({
                   label: String(G(l, b)),
                   value: G(l, k)
                 }, R = (l) => {
-                  d || se(y(o), l === void 0 ? !u : l);
+                  d || se(
+                    y(o),
+                    l === void 0 ? !u : l
+                  );
                 }, q = (l) => {
                   if (se(l, !u), !u) {
                     if (!z) return;
@@ -853,7 +922,9 @@ function ut({
                     X && Oe(g, _);
                   }, xe = (_) => {
                     !P || P.length === 0 || Se && Se(P, _);
-                  }, ye = P.filter((_) => ae.has(G(_, k))).map((_) => String(G(_, k)));
+                  }, ye = P.filter(
+                    (_) => ae.has(G(_, k))
+                  ).map((_) => String(G(_, k)));
                   if (M) {
                     const _ = Z(
                       M,
@@ -873,13 +944,14 @@ function ut({
                     return re(C, c);
                   }
                   return re(
-                    /* @__PURE__ */ s.jsxs(
-                      "div",
-                      {
-                        className: "px-3 py-2 text-neutral-medium-default font-medium text-sm w-full flex justify-between",
-                        children: [
-                          /* @__PURE__ */ s.jsx("div", { children: l }),
-                          X && /* @__PURE__ */ s.jsx("div", { className: "cursor-pointer", onClick: () => Oe(g), children: /* @__PURE__ */ s.jsx(
+                    /* @__PURE__ */ s.jsxs("div", { className: "px-3 py-2 text-neutral-medium-default font-medium text-sm w-full flex justify-between", children: [
+                      /* @__PURE__ */ s.jsx("div", { children: l }),
+                      X && /* @__PURE__ */ s.jsx(
+                        "div",
+                        {
+                          className: "cursor-pointer",
+                          onClick: () => Oe(g),
+                          children: /* @__PURE__ */ s.jsx(
                             je.ChevronDown,
                             {
                               className: f(
@@ -887,10 +959,10 @@ function ut({
                                 H ? "rotate-180" : "rotate-0"
                               )
                             }
-                          ) })
-                        ]
-                      }
-                    ),
+                          )
+                        }
+                      )
+                    ] }),
                     c
                   );
                 }
@@ -920,20 +992,20 @@ function ut({
                     option: o
                   },
                   w
-                ), ue = re(be, y(o));
+                ), ue = re(
+                  be,
+                  y(o)
+                );
                 if (!X)
                   return ue;
                 const t = !r, a = ue;
-                return Ne.cloneElement(
-                  a,
-                  {
-                    className: f(
-                      a.props.className,
-                      "overflow-hidden transition-[max-height] duration-300 ease-out",
-                      t ? "max-h-0" : "max-h-[999px]"
-                    )
-                  }
-                );
+                return Ne.cloneElement(a, {
+                  className: f(
+                    a.props.className,
+                    "overflow-hidden transition-[max-height] duration-300 ease-out",
+                    t ? "max-h-0" : "max-h-[999px]"
+                  )
+                });
               });
             })() }),
             e && /* @__PURE__ */ s.jsx("div", { className: "border-t border-neutral-strong-default p-2", children: e })
@@ -944,58 +1016,83 @@ function ut({
   );
   return E ? ge : Ye(ge, document.body);
 }
-const ct = Z(ut, (e, n) => e.options === n.options && e.selectedOptionsIds === n.selectedOptionsIds && e.multiple === n.multiple && e.disabled === n.disabled && e.emptyMessage === n.emptyMessage && e.renderOption === n.renderOption && e.renderOptionContext === n.renderOptionContext && e.isOpen === n.isOpen && e.attachToParent === n.attachToParent && e.optionValue === n.optionValue && e.optionLabel === n.optionLabel && e.filteredOptions === n.filteredOptions && e.isLoading === n.isLoading), We = Z(({ option: e, isSelected: n, onSelect: m, multiple: i, disabled: u, isLoading: v }) => {
-  const h = e.isGroupHeader;
-  if (v)
-    return /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2 w-full px-3 py-2 cursor-wait", children: [
-      /* @__PURE__ */ s.jsx(Fe, { className: "size-6 aspect-square" }),
-      /* @__PURE__ */ s.jsx(Fe, { className: "flex-1 h-6" })
-    ] }, e.id);
-  const j = (b) => {
-    b.preventDefault(), b.stopPropagation(), !(u || h) && m?.(e);
-  }, p = h && e.groupLabelNode ? e.groupLabelNode : e.label;
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
-    /* @__PURE__ */ s.jsxs(
-      "div",
-      {
-        onMouseDown: j,
-        className: f(
-          "px-3 py-2 flex items-center transition-colors text-neutral-default-default ",
-          h ? "cursor-default text-neutral-medium-default" : "cursor-pointer",
-          !h && (n ? " text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover"),
-          u && !h && "text-neutral-default-disabled hover:bg-neutral-default-default"
-        ),
-        children: [
-          i && !h && /* @__PURE__ */ s.jsx(
-            rt,
-            {
-              checked: n,
-              disabled: u
-            }
+const ct = Z(
+  ut,
+  (e, n) => e.options === n.options && e.selectedOptionsIds === n.selectedOptionsIds && e.multiple === n.multiple && e.disabled === n.disabled && e.emptyMessage === n.emptyMessage && e.renderOption === n.renderOption && e.renderOptionContext === n.renderOptionContext && e.isOpen === n.isOpen && e.attachToParent === n.attachToParent && e.optionValue === n.optionValue && e.optionLabel === n.optionLabel && e.filteredOptions === n.filteredOptions && e.isLoading === n.isLoading
+), We = Z(
+  ({
+    option: e,
+    isSelected: n,
+    onSelect: m,
+    multiple: i,
+    disabled: u,
+    isLoading: v
+  }) => {
+    const h = e.isGroupHeader;
+    if (v)
+      return /* @__PURE__ */ s.jsxs(
+        "div",
+        {
+          className: "flex gap-2 w-full px-3 py-2 cursor-wait",
+          children: [
+            /* @__PURE__ */ s.jsx(Fe, { className: "size-6 aspect-square" }),
+            /* @__PURE__ */ s.jsx(Fe, { className: "flex-1 h-6" })
+          ]
+        },
+        e.id
+      );
+    const j = (b) => {
+      b.preventDefault(), b.stopPropagation(), !(u || h) && m?.(e);
+    }, p = h && e.groupLabelNode ? e.groupLabelNode : e.label;
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
+      /* @__PURE__ */ s.jsxs(
+        "div",
+        {
+          onMouseDown: j,
+          className: f(
+            "px-3 py-2 flex items-center transition-colors text-neutral-default-default ",
+            h ? "cursor-default text-neutral-medium-default" : "cursor-pointer",
+            !h && (n ? " text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover"),
+            u && !h && "text-neutral-default-disabled hover:bg-neutral-default-default"
           ),
-          /* @__PURE__ */ s.jsx("span", { children: p })
-        ]
-      },
-      e.id
-    )
-  );
-}, (e, n) => e.isSelected === n.isSelected && e.disabled === n.disabled);
+          children: [
+            i && !h && /* @__PURE__ */ s.jsx(rt, { checked: n, disabled: u }),
+            /* @__PURE__ */ s.jsx("span", { children: p })
+          ]
+        },
+        e.id
+      )
+    );
+  },
+  (e, n) => e.isSelected === n.isSelected && e.disabled === n.disabled
+);
 We.displayName = "DefaultOptionRenderer";
-const Je = Z(({ selectedOptions: e, placeholder: n, onRemoveOption: m, displayMode: i, multiple: u, className: v, disabled: h }) => e?.length === 0 ? n ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : i === "chips" && u ? /* @__PURE__ */ s.jsx("div", { className: f("flex items-center gap-1 ", v), children: e.map((j) => /* @__PURE__ */ s.jsx(
-  ot,
-  {
-    tabIndex: -1,
-    id: j.id,
-    label: j.label,
-    onRemove: m,
+const Je = Z(
+  ({
+    selectedOptions: e,
+    placeholder: n,
+    onRemoveOption: m,
+    displayMode: i,
+    multiple: u,
+    className: v,
     disabled: h
-  },
-  j.id
-)) }) : e?.length === 1 ? /* @__PURE__ */ s.jsx("span", { children: e[0].label }) : /* @__PURE__ */ s.jsxs("span", { children: [
-  e?.length,
-  " seleccionados"
-] }), (e, n) => e.selectedOptions === n.selectedOptions && e.disabled === n.disabled);
+  }) => e?.length === 0 ? n ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : i === "chips" && u ? /* @__PURE__ */ s.jsx("div", { className: f("flex items-center gap-1 ", v), children: e.map((j) => /* @__PURE__ */ s.jsx(
+    ot,
+    {
+      tabIndex: -1,
+      id: j.id,
+      label: j.label,
+      onRemove: m,
+      disabled: h
+    },
+    j.id
+  )) }) : e?.length === 1 ? /* @__PURE__ */ s.jsx("span", { children: e[0].label }) : /* @__PURE__ */ s.jsxs("span", { children: [
+    e?.length,
+    " seleccionados"
+  ] }),
+  (e, n) => e.selectedOptions === n.selectedOptions && e.disabled === n.disabled
+);
 Je.displayName = "DefaultSelectionDisplay";
 export {
   St as S,