prometeo-design-system 2.3.5 → 2.3.7

package/dist/Select.es.js

@@ -1,45 +1,45 @@
 import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as k } from "./Icons.es.js";
 import { c as a } from "./cn-B6yFEsav.js";
-import ce, { useRef as F, useLayoutEffect as De, memo as z, useState as ie, useMemo as U, useCallback as P, useEffect as Z } from "react";
+import ce, { useRef as F, useLayoutEffect as we, memo as z, useState as ie, useMemo as U, useCallback as P, useEffect as Z } from "react";
 import Ne from "./Spinner.es.js";
 import { createPortal as je } from "react-dom";
 import { u as Ce } from "./useDragScroll-CHN9OMwn.js";
 import Ee from "./CheckBox.es.js";
 const He = (r) => {
-  let s = r;
-  for (; s && s !== document.body; ) {
-    const n = window.getComputedStyle(s).backgroundColor;
-    if (n && n !== "transparent" && n !== "rgba(0, 0, 0, 0)")
-      return n;
-    s = s.parentElement;
+  let n = r;
+  for (; n && n !== document.body; ) {
+    const s = window.getComputedStyle(n).backgroundColor;
+    if (s && s !== "transparent" && s !== "rgba(0, 0, 0, 0)")
+      return s;
+    n = n.parentElement;
   }
   const u = window.getComputedStyle(document.body).backgroundColor;
   return u && u !== "transparent" && u !== "rgba(0, 0, 0, 0)" ? u : "rgb(255, 255, 255)";
 };
 function Pe() {
   const r = F(null);
-  return De(() => {
+  return we(() => {
     if (!r.current || !r.current.parentElement) return;
-    const s = He(r.current.parentElement);
-    r.current.style.backgroundColor = s;
+    const n = He(r.current.parentElement);
+    r.current.style.backgroundColor = n;
   }, []), {
     ref: r
   };
 }
 const de = (r) => {
-  const { variant: s, className: u } = r, c = {
+  const { variant: n, className: u } = r, c = {
     default: "text-neutral-medium-default pt-[1px]",
     error: "text-error-medium-default pt-[1px]",
     success: "text-success-medium-default"
-  }, n = {
+  }, s = {
     default: /* @__PURE__ */ t.jsx(k.Info, { size: 16, className: "text-neutral-medium-default " }),
     error: /* @__PURE__ */ t.jsx(k.Error, { size: 16, className: "text-error-medium-default" }),
     success: /* @__PURE__ */ t.jsx(k.Check, { size: 16, className: "text-success-medium-default" })
   };
   return /* @__PURE__ */ t.jsx("div", { ref: r.ref, className: a("pl-3", u), children: typeof r.children == "string" ? /* @__PURE__ */ t.jsxs("div", { className: "flex gap-0.5 items-start", children: [
-    n[s],
-    /* @__PURE__ */ t.jsx("p", { className: a(" prometeo-fonts-body-small", c[s]), children: r.children })
+    s[n],
+    /* @__PURE__ */ t.jsx("p", { className: a(" prometeo-fonts-body-small", c[n]), children: r.children })
   ] }) : r.children });
 };
 de.displayName = "HelperText";
@@ -59,30 +59,30 @@ const ke = z(de), ze = {
 }, oe = {
   icon: " text-neutral-default-disabled",
   container: " border-neutral-strong-default text-neutral-default-disabled"
-}, fe = ({ id: r, label: s, onRemove: u, className: c, disabled: n, variant: o = "default" }) => /* @__PURE__ */ t.jsxs(
+}, fe = ({ id: r, label: n, onRemove: u, className: c, disabled: s, variant: o = "default" }) => /* @__PURE__ */ t.jsxs(
   "div",
   {
     className: a(
       "inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-inherit text-xs rounded-lg border",
       ze[o].container,
-      n && oe.container
+      s && oe.container
     ),
     children: [
-      /* @__PURE__ */ t.jsx("span", { className: "truncate w-max ", children: s }),
+      /* @__PURE__ */ t.jsx("span", { className: "truncate w-max ", children: n }),
       u && /* @__PURE__ */ t.jsx(
         "button",
         {
           onMouseDown: (p) => {
-            n || (p.stopPropagation(), p.preventDefault(), u?.(r));
+            s || (p.stopPropagation(), p.preventDefault(), u?.(r));
           },
           className: a(
             "shrink-0 p-0.5 transition-all duration-200 hover:text-neutral-default-hover cursor-pointer z-50 text-neutral-default-default hover:scale-105",
-            n && "cursor-default hover:scale-100",
+            s && "cursor-default hover:scale-100",
             c
           ),
           type: "button",
           tabIndex: -1,
-          children: /* @__PURE__ */ t.jsx(k.Close, { size: 18, className: a(n && oe.icon) })
+          children: /* @__PURE__ */ t.jsx(k.Close, { size: 18, className: a(s && oe.icon) })
         }
       )
     ]
@@ -90,14 +90,14 @@ const ke = z(de), ze = {
 );
 fe.displayName = "Chip";
 const Ie = z(fe);
-function h(r, s) {
-  if (typeof s == "function")
-    return s(r);
-  const u = s?.split(".");
+function h(r, n) {
+  if (typeof n == "function")
+    return n(r);
+  const u = n?.split(".");
   let c = r;
-  for (const n of u)
-    if (c && typeof c == "object" && n in c)
-      c = c[n];
+  for (const s of u)
+    if (c && typeof c == "object" && s in c)
+      c = c[s];
     else
       return;
   return c;
@@ -167,14 +167,14 @@ const X = {
   )
 }, Se = ({
   label: r,
-  onOptionClick: s,
+  onOptionClick: n,
   value: u,
   isLoading: c = !1,
-  options: n,
+  options: s,
   multiple: o = !1,
   onClear: p,
   onClose: m,
-  className: d,
+  className: i,
   id: C,
   emptyMessage: O = "No hay opciones disponibles",
   optionValue: f,
@@ -188,9 +188,9 @@ const X = {
   displayMode: B = "compact",
   onRemoveOption: _,
   width: M = "100%",
-  height: w,
+  height: D,
   labelVariant: b = "default",
-  attachToParent: i = !1,
+  attachToParent: d = !1,
   name: l,
   overflow: y = "wrap",
   onChange: g,
@@ -199,20 +199,20 @@ const X = {
   disabled: E = !1,
   variant: L = "default"
 }) => {
-  const [G, K] = ie(!1), R = F(null), re = F(null), ne = F(null), { ref: pe } = Pe(), { bind: H, ref: ge } = Ce({
+  const [G, K] = ie(!1), W = F(null), re = F(null), ne = F(null), { ref: pe } = Pe(), { bind: H, ref: ge } = Ce({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" }
-  }), W = u && u.length > 0, q = U(() => n?.filter((e) => u?.includes(h(e, f))), [n, u, f]), he = () => b === "static" ? "relative prometeo-fonts-label-large" : G || W ? "absolute top-0 -translate-y-1/2 left-2 scale-90 px-1 prometeo-fonts-body-medium" : "absolute top-1/2 -translate-y-1/2 scale-100 prometeo-fonts-body-large", J = {}, A = U(() => n.map((e) => ({
+  }), A = u && u.length > 0, q = U(() => s?.filter((e) => u?.includes(h(e, f))), [s, u, f]), he = () => b === "static" ? "relative prometeo-fonts-label-large" : G || A ? "absolute top-0 -translate-y-1/2 left-2 scale-90 px-1 prometeo-fonts-body-medium" : "absolute top-1/2 -translate-y-1/2 scale-100 prometeo-fonts-body-large", J = {}, T = U(() => s.map((e) => ({
     id: h(e, f),
     value: h(e, f),
     label: h(e, v)
-  })), [n, f, v]);
-  M && M !== "100%" && (J.width = M), w && (J.height = w);
-  const be = P(() => j ? { height: y === "scroll" ? "48px" : "max-content" } : w ? { height: w } : {}, [w, y, j]);
+  })), [s, f, v]);
+  M && M !== "100%" && (J.width = M), D && (J.height = D);
+  const be = P(() => j ? { height: y === "scroll" ? "48px" : "max-content" } : D ? { height: D } : {}, [D, y, j]);
   Z(() => {
     const e = (x) => {
-      if (R.current) {
-        if (x.type === "mousedown" && R.current.contains(x.target) || x.type === "scroll" && re.current?.contains(x.target))
+      if (W.current) {
+        if (x.type === "mousedown" && W.current.contains(x.target) || x.type === "scroll" && re.current?.contains(x.target))
           return;
         K(!1);
       }
@@ -223,30 +223,30 @@ const X = {
   }, []);
   const se = P(() => {
     K((e) => !e);
-  }, []), T = P((e) => {
+  }, []), R = P((e) => {
     if (o) {
-      const x = u.includes(e.id);
-      let D = [];
-      const ue = A.filter((Q) => u.includes(Q.id));
-      x ? D = ue.filter((Q) => Q.id !== e.id) : D = [...ue, e], g?.(D, l);
+      const x = u?.includes(e.id);
+      let w = [];
+      const ue = T.filter((Q) => u?.includes(Q.id));
+      x ? w = ue.filter((Q) => Q.id !== e.id) : w = [...ue, e], g?.(w, l);
     } else
       g?.([e], l);
-  }, [o, g, l, A, u]), ye = P((e) => {
-    s?.(e, l), T(e), o || (K(!1), m?.());
-  }, [o, s, m, l, T]), ve = (e) => {
+  }, [o, g, l, T, u]), ye = P((e) => {
+    n?.(e, l), R(e), o || (K(!1), m?.());
+  }, [o, n, m, l, R]), ve = (e) => {
     e.preventDefault(), e.stopPropagation(), e.target.blur(), p?.(), g?.([], l);
   }, ae = P((e) => {
     o || g?.([], l);
-    const x = n.find((D) => h(D, f) === e);
+    const x = s.find((w) => h(w, f) === e);
     if (x) {
-      const D = {
+      const w = {
         id: h(x, f),
         label: h(x, v),
         value: h(x, f)
       };
-      s?.(D, l), T(D), _?.(x);
+      n?.(w, l), R(w), _?.(x);
     }
-  }, [s, _, v, f, n, l, o, g, T]), we = U(() => b === "static" && N ? N : "", [b, N]), le = U(
+  }, [n, _, v, f, s, l, o, g, R]), De = U(() => b === "static" && N ? N : "", [b, N]), le = U(
     () => new Set(q.map((e) => h(e, f))),
     [q, f]
   );
@@ -255,10 +255,10 @@ const X = {
     {
       className: a(
         "relative bg-inherit select-none w-full",
-        d,
+        i,
         b === "static" && "mt-2"
       ),
-      ref: R,
+      ref: W,
       style: J,
       draggable: !1,
       children: [
@@ -272,7 +272,7 @@ const X = {
                 "left-3 pointer-events-none bg-inherit z-10",
                 b === "default" && "transition-all duration-200 ease-in-out",
                 he(),
-                W || G ? X[L].label : "text-neutral-medium-default",
+                A || G ? X[L].label : "text-neutral-medium-default",
                 E && Y.label
               ),
               children: r
@@ -294,7 +294,7 @@ const X = {
                 "w-full px-2 text-left border rounded-lg transition-all duration-200 ease-in-out",
                 "flex items-center justify-start bg-inherit gap-2 ",
                 "focus:outline-none",
-                B === "chips" && o && W ? "min-h-12 py-2" : !w && "h-12 min-h-12",
+                B === "chips" && o && A ? "min-h-12 py-2" : !D && "h-12 min-h-12",
                 X[L].input,
                 E && Y.input,
                 $
@@ -327,8 +327,8 @@ const X = {
                       xe,
                       {
                         displayMode: B,
-                        selectedOptions: A.filter((e) => le.has(e.id)),
-                        placeholder: we,
+                        selectedOptions: T.filter((e) => le.has(e.id)),
+                        placeholder: De,
                         onRemoveOption: ae,
                         multiple: o,
                         className: a(y === "scroll" ? "flex-nowrap" : "flex-wrap"),
@@ -339,7 +339,7 @@ const X = {
                 ),
                 /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
                   c && /* @__PURE__ */ t.jsx(Ne, { size: "small", variant: "clip", className: "mt-2", speedMultiplier: 0.7 }),
-                  W && p && /* @__PURE__ */ t.jsx(
+                  A && p && /* @__PURE__ */ t.jsx(
                     "button",
                     {
                       onMouseDown: (e) => {
@@ -369,14 +369,14 @@ const X = {
         /* @__PURE__ */ t.jsx(
           Me,
           {
-            options: I ? n : A,
+            options: I ? s : T,
             selectedOptionsIds: le,
             onOptionClick: ye,
             emptyMessage: O,
             dropdownClassName: S,
             multiple: o,
-            attachToParent: i,
-            selectRef: R,
+            attachToParent: d,
+            selectRef: W,
             dropdownRef: re,
             isOpen: G,
             renderOption: I,
@@ -399,17 +399,17 @@ const X = {
       ]
     }
   );
-}, Te = z(Se);
+}, Re = z(Se);
 function _e({
   options: r,
-  onOptionClick: s,
+  onOptionClick: n,
   dropdownClassName: u,
   emptyMessage: c,
-  selectedOptionsIds: n,
+  selectedOptionsIds: s,
   multiple: o,
   attachToParent: p,
   selectRef: m,
-  dropdownRef: d,
+  dropdownRef: i,
   isOpen: C,
   renderOption: O,
   optionValue: f,
@@ -418,45 +418,45 @@ function _e({
   disabled: N,
   labelVariant: j
 }) {
-  const $ = j === "static" ? -24 : 4, [S, B] = ie("down"), _ = (i) => {
-    if (!d.current || !m.current) return;
+  const $ = j === "static" ? -24 : 4, [S, B] = ie("down"), _ = (d) => {
+    if (!i.current || !m.current) return;
     const l = m.current.getBoundingClientRect();
-    switch (i || S) {
+    switch (d || S) {
       case "down":
-        d.current.style.top = `${l.top + l.height - (I?.current?.offsetHeight ? I?.current?.offsetHeight + 4 : 0)}px`;
+        i.current.style.top = `${l.top + l.height - (I?.current?.offsetHeight ? I?.current?.offsetHeight + 4 : 0)}px`;
         break;
       case "up":
-        d.current.style.top = "auto", d.current.style.bottom = `${window.innerHeight - l.top + $}px`;
+        i.current.style.top = "auto", i.current.style.bottom = `${window.innerHeight - l.top + $}px`;
         break;
     }
-    d.current.style.left = `${l.left}px`, d.current.style.width = `${l.width}px`;
+    i.current.style.left = `${l.left}px`, i.current.style.width = `${l.width}px`;
   }, M = () => {
-    if (!d.current || !m.current) return S;
-    const i = m.current.getBoundingClientRect(), l = i.bottom + 240 < window.innerHeight, y = i.top - 240 - $ > 0;
+    if (!i.current || !m.current) return S;
+    const d = m.current.getBoundingClientRect(), l = d.bottom + 240 < window.innerHeight, y = d.top - 240 - $ > 0;
     let g = "down";
     return l ? g = "down" : y && (g = "up"), g;
-  }, w = (i) => {
-    if (!(!d.current || !m.current)) {
-      if (d.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !i) {
-        d.current.style.maxHeight = "0", d.current.style.opacity = "0";
+  }, D = (d) => {
+    if (!(!i.current || !m.current)) {
+      if (i.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !d) {
+        i.current.style.maxHeight = "0", i.current.style.opacity = "0", i.current.style.pointerEvents = "none";
         return;
       }
       if (!p) {
         const l = M();
         B(l), _(l);
       }
-      d.current.style.maxHeight = "240px", d.current.style.opacity = "1";
+      i.current.style.maxHeight = "240px", i.current.style.opacity = "1", i.current.style.pointerEvents = "auto";
     }
   };
   Z(() => {
-    console.log("mutated selectedOptionsIds", n), !(p || !m.current || !C) && _();
-  }, [n]), Z(() => {
-    w(C);
+    p || !m.current || !C || _();
+  }, [s]), Z(() => {
+    D(C);
   }, [C]);
   const b = /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: d,
+      ref: i,
       style: {
         opacity: "0",
         maxHeight: "0"
@@ -468,17 +468,17 @@ function _e({
         S === "up" ? "h-auto" : "min-h-52",
         u
       ),
-      children: r.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: c }) : r.map((i) => {
-        const l = typeof i.id < "u" ? i.id : h(i, f), y = n.has(l), g = P(() => {
-          s({
+      children: r.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: c }) : r.map((d) => {
+        const l = typeof d.id < "u" ? d.id : h(d, f), y = s.has(l), g = P(() => {
+          n({
             id: l,
-            label: String(h(i, v)),
-            value: h(i, f)
+            label: String(h(d, v)),
+            value: h(d, f)
           });
-        }, [s, l, v, f, i]);
+        }, [n, l, v, f, d]);
         return O ? ce.createElement(O, {
           key: l,
-          option: i,
+          option: d,
           isSelected: y,
           multiple: o,
           onSelect: g,
@@ -486,10 +486,10 @@ function _e({
         }) : /* @__PURE__ */ t.jsx(
           me,
           {
-            option: i,
+            option: d,
             multiple: o,
             isSelected: y,
-            onSelect: s,
+            onSelect: n,
             disabled: N
           },
           l
@@ -499,25 +499,25 @@ function _e({
   );
   return p ? b : je(b, document.body);
 }
-const Me = z(_e), me = z(({ option: r, isSelected: s, onSelect: u, multiple: c, disabled: n }) => (
+const Me = z(_e), me = z(({ option: r, isSelected: n, onSelect: u, multiple: c, disabled: s }) => (
   // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
   /* @__PURE__ */ t.jsxs(
     "div",
     {
       onMouseDown: (o) => {
-        o.preventDefault(), o.stopPropagation(), !n && u?.(r);
+        o.preventDefault(), o.stopPropagation(), !s && u?.(r);
       },
       className: a(
         "px-3 py-2 cursor-pointer flex items-center transition-colors text-neutral-default-default ",
-        s ? "bg-neutral-medium-selected text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
-        n && "text-neutral-default-disabled hover:bg-neutral-default-default"
+        n ? "bg-neutral-medium-selected text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
+        s && "text-neutral-default-disabled hover:bg-neutral-default-default"
       ),
       children: [
         c && /* @__PURE__ */ t.jsx(
           Ee,
           {
-            checked: s,
-            disabled: n
+            checked: n,
+            disabled: s
           }
         ),
         /* @__PURE__ */ t.jsx("span", { children: r.label })
@@ -526,7 +526,7 @@ const Me = z(_e), me = z(({ option: r, isSelected: s, onSelect: u, multiple: c,
   )
 ));
 me.displayName = "DefaultOptionRenderer";
-const xe = z(({ selectedOptions: r, placeholder: s, onRemoveOption: u, displayMode: c, multiple: n, className: o, disabled: p }) => r?.length === 0 ? s ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: s }) : null : c === "chips" && n ? /* @__PURE__ */ t.jsx("div", { className: a("flex items-center gap-1 ", o), children: r.map((m) => /* @__PURE__ */ t.jsx(
+const xe = z(({ selectedOptions: r, placeholder: n, onRemoveOption: u, displayMode: c, multiple: s, className: o, disabled: p }) => r?.length === 0 ? n ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : c === "chips" && s ? /* @__PURE__ */ t.jsx("div", { className: a("flex items-center gap-1 ", o), children: r.map((m) => /* @__PURE__ */ t.jsx(
   Ie,
   {
     id: m.id,
@@ -541,5 +541,5 @@ const xe = z(({ selectedOptions: r, placeholder: s, onRemoveOption: u, displayMo
 ] }));
 xe.displayName = "DefaultSelectionDisplay";
 export {
-  Te as default
+  Re as default
 };

package/dist/SelectFormik.es.js

@@ -1,194 +1,21 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
-import { Icons as g } from "./Icons.es.js";
-import { c as d } from "./cn-B6yFEsav.js";
-import { useField as $, ErrorMessage as q } from "formik";
-import { memo as G, useState as k, useRef as H, useEffect as J } from "react";
-import K from "./Spinner.es.js";
-const Q = ({
-  label: C,
-  name: I,
-  placeholder: b = "",
-  disabled: j,
-  containerClassName: S,
-  className: D,
-  options: c = [],
-  multiple: i = !1,
-  emptyMessage: z = "No hay opciones disponibles",
-  labelVariant: w = "default",
-  isFetching: E = !1,
-  returnFullObject: m = !1
-  // Por defecto false para mantener compatibilidad
-}) => {
-  const [r, N, o] = $(I), [l, x] = k(!1), [p, A] = k(!1), h = H(null), v = N.touched && N.error, u = (e) => e ? typeof e == "object" && e.id !== void 0 ? e.id : e : null, V = () => r.value ? Array.isArray(r.value) ? r.value.map(u) : u(r.value) : i ? [] : null, f = r.value && (Array.isArray(r.value) ? r.value.length > 0 : typeof r.value == "object" ? r.value.id : r.value?.toString().length > 0), O = () => w === "static" || f || l || p ? "-top-3 left-2 scale-90" : "top-1/2 -translate-y-1/2 scale-100", P = () => {
-    if (!r.value) return [];
-    const e = V();
-    return Array.isArray(e) ? c.filter((a) => e.includes(a.id)) : c.filter((a) => a.id === e);
-  }, F = (e) => {
-    if (i) {
-      const a = Array.isArray(r.value) ? r.value.map(u) : [], s = a.includes(e.id);
-      if (m) {
-        const n = Array.isArray(r.value) ? r.value : [], y = s ? n.filter((B) => u(B) !== e.id) : [...n, e];
-        o.setValue(y);
-      } else {
-        const n = s ? a.filter((y) => y !== e.id) : [...a, e.id];
-        o.setValue(n);
-      }
-    } else
-      o.setValue(m ? e : e.id), x(!1);
-  }, M = (e) => {
-    e.stopPropagation(), o.setValue(i ? [] : "");
-  }, R = (e, a) => {
-    if (a?.stopPropagation(), i && Array.isArray(r.value))
-      if (m) {
-        const s = r.value.filter(
-          (n) => u(n) !== e
-        );
-        o.setValue(s);
-      } else {
-        const s = r.value.filter(
-          (n) => n !== e
-        );
-        o.setValue(s);
-      }
+import { j as m } from "./jsx-runtime-ByW6EXIE.js";
+import { useField as s } from "formik";
+import i from "./Select.es.js";
+const p = (e) => {
+  const [o, r, t] = s(e.name), a = (n) => {
+    t.setValue(n.map((l) => l.value));
   };
-  J(() => {
-    const e = (a) => {
-      h.current && !h.current.contains(a.target) && x(!1);
-    };
-    return l && document.addEventListener("mousedown", e), () => {
-      document.removeEventListener("mousedown", e);
-    };
-  }, [l]);
-  const L = () => {
-    const e = P();
-    return e.length === 0 ? b ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: b }) : null : i ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-1 flex-wrap py-1", children: e.map((a) => /* @__PURE__ */ t.jsxs(
-      "div",
-      {
-        className: "inline-flex items-center gap-1 px-2 py-1 bg-primary-default-default text-white text-xs rounded-md",
-        children: [
-          /* @__PURE__ */ t.jsx("span", { className: "truncate max-w-20", children: a.label }),
-          /* @__PURE__ */ t.jsx(
-            "button",
-            {
-              onMouseDown: (s) => {
-                s.preventDefault(), R(a.id, s);
-              },
-              className: "flex-shrink-0 hover:bg-primary-strong-default rounded-sm p-0.5 transition-colors",
-              type: "button",
-              tabIndex: -1,
-              children: /* @__PURE__ */ t.jsx(g.Close, { size: 12, className: "" })
-            }
-          )
-        ]
-      },
-      a.id
-    )) }) : /* @__PURE__ */ t.jsx("span", { children: e[0]?.label });
-  };
-  return /* @__PURE__ */ t.jsxs(
-    "div",
+  return /* @__PURE__ */ m.jsx(
+    i,
     {
-      className: d("relative w-full bg-inherit", S),
-      ref: h,
-      children: [
-        /* @__PURE__ */ t.jsxs("div", { className: "relative bg-inherit", children: [
-          /* @__PURE__ */ t.jsxs(
-            "div",
-            {
-              onClick: () => !j && x(!l),
-              onFocus: () => A(!0),
-              onBlur: () => A(!1),
-              className: d(
-                "w-full px-3 h-12 text-left border-1 rounded-lg transition-all duration-300 ease-in-out text-neutral-default-default",
-                "flex items-center justify-between bg-transparent focus:outline-none",
-                f || l || p ? " border-primary-default-focused ring-primary-default-focused ring-[2px]" : v ? "ring-error-default-default ring-[2px]" : "border-neutral-default-default hover:border-primary-default-hover",
-                j && "opacity-50 cursor-not-allowed pointer-events-none",
-                D
-              ),
-              children: [
-                /* @__PURE__ */ t.jsx(
-                  "label",
-                  {
-                    className: d(
-                      "absolute pointer-events-none bg-inherit px-1 z-10",
-                      w === "default" && "transition-all duration-200 ease-in-out",
-                      "text-md",
-                      O(),
-                      f || l || p ? "text-primary-default-default" : v ? "text-red-500" : "text-neutral-medium-default",
-                      "left-3"
-                    ),
-                    children: C
-                  }
-                ),
-                /* @__PURE__ */ t.jsx("div", { className: "flex-1 min-w-0", children: L() }),
-                /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 ml-2", children: [
-                  f && /* @__PURE__ */ t.jsx(
-                    "button",
-                    {
-                      onMouseDown: (e) => {
-                        e.preventDefault(), e.stopPropagation(), M(e);
-                      },
-                      className: "text-neutral-medium-default hover:text-neutral-default-default transition-colors",
-                      type: "button",
-                      tabIndex: -1,
-                      children: /* @__PURE__ */ t.jsx(g.Close, { size: 16, className: "" })
-                    }
-                  ),
-                  E ? /* @__PURE__ */ t.jsx(K, { size: 20, variant: "clip" }) : /* @__PURE__ */ t.jsx(
-                    g.ChevronDown,
-                    {
-                      size: 20,
-                      className: d(
-                        "transition-transform text-neutral-default-default",
-                        l ? "rotate-180" : ""
-                      )
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          l && /* @__PURE__ */ t.jsx("div", { className: "absolute z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg max-h-60 overflow-auto", children: c.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: z }) : c.map((e) => {
-            const a = V(), s = i ? Array.isArray(a) && a.includes(e.id) : a === e.id;
-            return /* @__PURE__ */ t.jsxs(
-              "div",
-              {
-                onMouseDown: (n) => {
-                  n.preventDefault(), F(e), n.stopPropagation();
-                },
-                className: d(
-                  "px-3 py-2 cursor-pointer flex items-center transition-colors",
-                  s ? "bg-primary-default-default text-white" : "hover:bg-neutral-medium-selected text-neutral-default-default"
-                ),
-                children: [
-                  i && /* @__PURE__ */ t.jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: s,
-                      onChange: () => {
-                      },
-                      className: "mr-2 pointer-events-none"
-                    }
-                  ),
-                  /* @__PURE__ */ t.jsx("span", { children: e.label })
-                ]
-              },
-              e.id
-            );
-          }) })
-        ] }),
-        v && /* @__PURE__ */ t.jsx(
-          q,
-          {
-            name: r.name,
-            component: "span",
-            className: "block text-error-default-default text-xs mt-1"
-          }
-        )
-      ]
+      ...e,
+      value: o.value,
+      onChange: a,
+      variant: r.error ? "error" : "default",
+      errorComponent: r.error || void 0
     }
   );
-}, _ = G(Q);
+};
 export {
-  _ as default
+  p as default
 };