prometeo-design-system 4.7.1 → 4.7.2

package/dist/Header.es.js

@@ -1,9 +1,9 @@
 import { j as s } from "./jsx-runtime-GkKLlHH4.js";
 import { c as i } from "./cn-B6yFEsav.js";
-import { motion as o } from "framer-motion";
+import { motion as n } from "framer-motion";
 import { memo as f } from "react";
-const c = ({ title: e, subtitle: l, children: m, className: d, subtitleClassName: r, titleClassName: n, mainActionSlot: a, secondarySlot: t }) => /* @__PURE__ */ s.jsxs(
-  o.header,
+const c = ({ title: e, subtitle: l, children: m, className: d, subtitleClassName: r, titleClassName: o, mainActionSlot: a, secondarySlot: t }) => /* @__PURE__ */ s.jsxs(
+  n.header,
   {
     initial: { opacity: 0, y: -10 },
     animate: { opacity: 1, y: 0 },
@@ -13,14 +13,14 @@ const c = ({ title: e, subtitle: l, children: m, className: d, subtitleClassName
       d
     ),
     children: [
-      /* @__PURE__ */ s.jsxs("div", { className: "md:w-full min-h-12 md:px-3 flex justify-between", children: [
+      /* @__PURE__ */ s.jsxs("div", { className: "md:w-full md:px-3 flex justify-between", children: [
         a && /* @__PURE__ */ s.jsx("div", { className: "", children: typeof a == "function" ? a() : a }),
         t && /* @__PURE__ */ s.jsx("div", { className: "hidden md:flex", children: typeof t == "function" ? t() : t })
       ] }),
-      /* @__PURE__ */ s.jsxs("div", { className: "w-full min-h-12 flex justify-between md:px-6", children: [
+      /* @__PURE__ */ s.jsxs("div", { className: "w-full flex justify-between md:px-6", children: [
         /* @__PURE__ */ s.jsxs("div", { className: i("flex flex-col leading-6 justify-center relative overflow-hidden"), children: [
           l && /* @__PURE__ */ s.jsx("h3", { className: i(" prometeo-fonts-body-small md:prometeo-fonts-body-medium text-neutral-medium-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full", r), children: l }),
-          e && /* @__PURE__ */ s.jsx("h1", { className: i("prometeo-fonts-headline-xsmall md:prometeo-fonts-headline-small text-neutral-strong-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full wrap-break-word", n), children: e })
+          e && /* @__PURE__ */ s.jsx("h1", { className: i("prometeo-fonts-headline-xsmall md:prometeo-fonts-headline-small text-neutral-strong-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full wrap-break-word", o), children: e })
         ] }),
         m,
         t && /* @__PURE__ */ s.jsx("div", { className: "md:hidden", children: typeof t == "function" ? t() : t })

package/dist/IconButton.es.js

@@ -255,7 +255,7 @@ const g = {
     if (n)
       return /* @__PURE__ */ a.jsx("div", { className: "flex items-center justify-center", children: !b && x });
     let t = null;
-    if (console.log(typeof r), r)
+    if (r)
       if (h(r))
         v(r.type) ? t = t = /* @__PURE__ */ a.jsx(
           "span",

package/dist/Input.es.js

@@ -14,7 +14,7 @@ const x = {
     input: e(
       "border-neutral-default-default text-neutral-default-default!",
       "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
-      "hover:border-neutral-strong-default"
+      "hover:border-primary-default-default"
     ),
     label: e("text-neutral-medium-default"),
     icon: e(
@@ -122,7 +122,7 @@ const x = {
       T(!j);
     }, N = {};
     m && m !== "100%" && (N.width = m), a && (N.height = a);
-    const H = u === "error" && w, C = !H && y, G = r === "password", J = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : l ? `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${s === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, K = () => a ? f.customHeight.label : f[p].label, Q = () => a ? { height: a } : {}, U = () => o === "default" ? b : E || b || "", W = () => G ? !l && !i ? "pr-10" : s === "left" ? "pl-10 pr-10" : "pr-16" : i ? l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-8"}` : "pr-10 pl-3" : "pr-7" : l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-[31px]"}` : "pr-10 pl-3" : "", X = o === "default" && "transition-all duration-200 ease-in-out", d = w || y;
+    const H = u === "error" && w, C = !H && y, G = r === "password", J = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : l ? `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${s === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, K = () => a ? f.customHeight.label : f[p].label, Q = () => a ? { height: a } : {}, U = () => o === "default" ? b : E || b || "", W = () => G ? !l && !i ? "pr-10" : s === "left" ? "pl-10 pr-10" : "pr-16" : i ? l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-8"}` : "pr-10 pl-3" : "pr-7" : l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-[31px]"}` : "pr-10 pl-3" : "", X = o === "default" && "transition-all duration-300 ease-in-out", d = w || y;
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
@@ -146,7 +146,7 @@ const x = {
               placeholder: U(),
               type: r === "password" && j ? "text" : r,
               className: e(
-                "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
+                "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-300 ease-in-out",
                 "focus:outline-none px-3",
                 o === "default" && "placeholder:text-transparent",
                 o === "static" && "placeholder:text-neutral-medium-default ",

package/dist/Select.es.js

@@ -1,6 +1,6 @@
 import { j as s } from "./jsx-runtime-GkKLlHH4.js";
 import { c } from "./cn-B6yFEsav.js";
-import we, { memo as ee, useState as Se, useRef as se, useMemo as Z, useCallback as _, useEffect as he, useImperativeHandle as Qe } from "react";
+import Se, { memo as ee, useState as we, useRef as se, useMemo as Z, useCallback as _, useEffect as he, useImperativeHandle as Qe } from "react";
 import Xe from "./Spinner.es.js";
 import { createPortal as Ye } from "react-dom";
 import { u as Ze } from "./useDragScroll-CHN9OMwn.js";
@@ -8,7 +8,7 @@ import { u as et } from "./useLabelBackground-D5SzHhl_.js";
 import { H as tt } from "./HelperComponent-ljsn0xD6.js";
 import nt from "./Chip.es.js";
 import rt from "./CheckBox.es.js";
-import { g as E, h as qe } from "./utils-X4-h3cum.js";
+import { g as k, h as qe } from "./utils-X4-h3cum.js";
 import lt from "./Input.es.js";
 import Re from "./Skeleton.es.js";
 import { Cancel as ot } from "./Icons/Cancel.es.js";
@@ -75,7 +75,7 @@ const st = (e) => {
   )
 };
 function it(e) {
-  const [n, p] = Se(!1), [x, y] = Se([]), [N, g] = Se(""), z = se(null), m = se(null), A = se(null), $ = se(null), F = se(
+  const [n, p] = we(!1), [x, y] = we([]), [N, g] = we(""), A = se(null), f = se(null), z = se(null), $ = se(null), F = se(
     () => {
     }
   ), Ne = se(null), pe = se(/* @__PURE__ */ new Set()), {
@@ -88,10 +88,10 @@ function it(e) {
     tabIndex: K,
     className: M,
     placeholder: W,
-    optionValue: k,
+    optionValue: O,
     optionLabel: V,
     renderOption: B,
-    renderOptionGroupHeader: Ae,
+    renderOptionGroupHeader: ze,
     renderSelection: De,
     renderOptionContext: je,
     buttonClassName: ne,
@@ -99,7 +99,7 @@ function it(e) {
     containerClassName: He,
     dropdownOptions: v,
     helperComponent: xe,
-    errorComponent: ke,
+    errorComponent: Oe,
     onRemoveOption: re,
     onOptionClick: ie,
     onClose: ye,
@@ -112,8 +112,8 @@ function it(e) {
     displayMode: ve = "compact",
     labelVariant: le = "default",
     disableOpenOnFocus: Te = !1,
-    emptyMessage: Oe = "No hay opciones disponibles"
-  } = e, { ref: Ee } = et(), { bind: Q, ref: Pe } = Ze({
+    emptyMessage: Ee = "No hay opciones disponibles"
+  } = e, { ref: ke } = et(), { bind: Q, ref: Pe } = Ze({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" }
   }), de = e.multiple ? Array.isArray(e.value) && e.value.length > 0 && e.value.every((t) => t != null && t !== "") : e.value !== void 0 && e.value !== null && e.value !== "", Le = {}, _e = Z(() => le === "static" && W ? W : "", [le, W]), Ie = Z(
@@ -133,11 +133,11 @@ function it(e) {
     return t[le][l];
   }, L = _(
     (t) => ({
-      id: E(t, k),
-      value: E(t, k),
-      label: E(t, V)
+      id: k(t, O),
+      value: k(t, O),
+      label: k(t, V)
     }),
-    [k, V]
+    [O, V]
   ), q = Z(() => st(R), [R]), fe = Z(
     () => q.map(L),
     [q, L]
@@ -146,18 +146,18 @@ function it(e) {
     if (e.multiple)
       e.value?.forEach((l) => {
         const a = q?.find(
-          (b) => E(b, k) === l
+          (b) => k(b, O) === l
         );
         a && t.push(a);
       });
     else {
       const l = q?.find(
-        (a) => E(a, k) === e.value
+        (a) => k(a, O) === e.value
       );
       l && t.push(l);
     }
     return t;
-  }, [e.value, k, q, e.multiple]), o = Z(
+  }, [e.value, O, q, e.multiple]), o = Z(
     () => r.map(L),
     [r, L]
   ), i = Z(
@@ -166,57 +166,57 @@ function it(e) {
   ), u = Z(() => {
     const t = [];
     return R.forEach((l, a) => {
-      const b = l, w = typeof b == "object" ? b?.options : [];
-      if (Array.isArray(w) && w.length > 0) {
-        const d = b.label, D = E(l, k), Y = `__group-${String(D ?? a)}`, me = {
+      const b = l, S = typeof b == "object" ? b?.options : [];
+      if (Array.isArray(S) && S.length > 0) {
+        const h = b.label, D = k(l, O), Y = `__group-${String(D ?? a)}`, me = {
           id: Y,
           value: Y,
-          label: typeof d == "string" ? d : String(D ?? `Grupo ${a + 1}`),
+          label: typeof h == "string" ? h : String(D ?? `Grupo ${a + 1}`),
           isGroupHeader: !0,
-          groupLabelNode: d,
+          groupLabelNode: h,
           originalOption: l,
           groupData: {
-            groupOptions: w
+            groupOptions: S
           }
         };
-        t.push(me), w.forEach((O) => {
-          B ? t.push(O) : t.push(L(O));
+        t.push(me), S.forEach((E) => {
+          B ? t.push(E) : t.push(L(E));
         });
       } else
         B ? t.push(l) : t.push(L(l));
     }), t;
-  }, [R, k, B, L]), C = _(
+  }, [R, O, B, L]), C = _(
     (t, l) => {
       if (!t || t.length === 0) return;
       const a = t.map(
-        (f) => L(f)
+        (d) => L(d)
       );
       if (!e.multiple) {
-        const f = a[0];
-        if (!f) return;
-        const S = i.has(f.id), ze = l ?? "toggle";
+        const d = a[0];
+        if (!d) return;
+        const w = i.has(d.id), Ae = l ?? "toggle";
         let Fe;
-        ze === "select" || ze === "toggle" && !S ? Fe = f : Fe = void 0, e.onChange?.(Fe, j);
+        Ae === "select" || Ae === "toggle" && !w ? Fe = d : Fe = void 0, e.onChange?.(Fe, j);
         return;
       }
-      const b = e.value || [], w = [];
-      b.forEach((f) => {
-        const S = fe.find((ze) => ze.value === f);
-        S && w.push(S);
+      const b = e.value || [], S = [];
+      b.forEach((d) => {
+        const w = fe.find((Ae) => Ae.value === d);
+        w && S.push(w);
       });
-      const d = new Set(w.map((f) => f.id)), D = new Set(a.map((f) => f.id)), Y = a.every(
-        (f) => d.has(f.id)
-      ), me = l ?? "toggle", O = me === "select" || me === "toggle" && !Y;
+      const h = new Set(S.map((d) => d.id)), D = new Set(a.map((d) => d.id)), Y = a.every(
+        (d) => h.has(d.id)
+      ), me = l ?? "toggle", E = me === "select" || me === "toggle" && !Y;
       let Ce;
-      if (!O)
-        Ce = w.filter((f) => !D.has(f.id));
+      if (!E)
+        Ce = S.filter((d) => !D.has(d.id));
       else {
-        const f = new Map(
-          w.map((S) => [S.id, S])
+        const d = new Map(
+          S.map((w) => [w.id, w])
         );
-        a.forEach((S) => {
-          f.set(S.id, S);
-        }), Ce = Array.from(f.values());
+        a.forEach((w) => {
+          d.set(w.id, w);
+        }), Ce = Array.from(d.values());
       }
       e.onChange?.(Ce, j);
     },
@@ -237,17 +237,17 @@ function it(e) {
       e.onChange?.(t, j);
     else {
       const l = e.value || [], a = [], b = l.includes(t.value);
-      l.forEach((d) => {
+      l.forEach((h) => {
         const D = fe.find(
-          (Y) => Y.value === d
+          (Y) => Y.value === h
         );
         D && a.push(D);
       });
-      const w = b ? a.filter((d) => d.value !== t.value) : [...a, t];
-      e.onChange?.(w, j);
+      const S = b ? a.filter((h) => h.value !== t.value) : [...a, t];
+      e.onChange?.(S, j);
     }
   };
-  const h = _(
+  const m = _(
     (t, l = !1) => {
       ie?.(t, j), F.current?.(t), l && (p(!1), ye?.());
     },
@@ -264,7 +264,7 @@ function it(e) {
     (t) => {
       e.multiple || e.onChange?.(void 0, j);
       const l = q.find(
-        (b) => E(b, k) === t
+        (b) => k(b, O) === t
       );
       if (!l) return;
       const a = L(l);
@@ -278,7 +278,7 @@ function it(e) {
       e.multiple,
       e.onChange,
       L,
-      k
+      O
     ]
   ), X = _(
     (t) => {
@@ -289,30 +289,26 @@ function it(e) {
   he(() => {
     if (!n) return;
     let t = !1, l = 0;
-    const a = (d) => {
-      const D = d.target;
-      if (console.log("close dropdown target"), d.type === "mousedown") {
-        if (z.current?.contains(D) || m.current?.contains(D)) return;
+    const a = (h) => {
+      const D = h.target;
+      if (h.type === "mousedown") {
+        if (A.current?.contains(D) || f.current?.contains(D)) return;
         p(!1);
       }
-      if (d.type === "scroll") {
-        if (console.log("close because scroll"), console.log(d, "event"), t || Date.now() - l < 500) {
-          console.log("ignoring scroll - keyboard related");
-          return;
-        }
-        if (m.current?.contains(D)) return;
+      if (h.type === "scroll") {
+        if (t || Date.now() - l < 500 || f.current?.contains(D)) return;
         p(!1);
       }
-      d.type === "resize" && (console.log("close dropdown because resize"), console.log(d, "event"), p(!1));
-    }, b = (d) => {
-      const D = d.target;
-      oe(D) && (console.log("focus in keyboard"), t = !0, l = Date.now());
-    }, w = (d) => {
-      const D = d.target;
-      oe(D) && (console.log("focus out keyboard"), t = !1);
+      h.type === "resize" && p(!1);
+    }, b = (h) => {
+      const D = h.target;
+      oe(D) && (t = !0, l = Date.now());
+    }, S = (h) => {
+      const D = h.target;
+      oe(D) && (t = !1);
     };
-    return document.addEventListener("focusin", b), document.addEventListener("focusout", w), document.addEventListener("mousedown", a), window.addEventListener("scroll", a, !0), window.addEventListener("resize", a, !0), () => {
-      document.removeEventListener("focusin", b), document.removeEventListener("focusout", w), document.removeEventListener("mousedown", a), window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a, !0);
+    return document.addEventListener("focusin", b), document.addEventListener("focusout", S), document.addEventListener("mousedown", a), window.addEventListener("scroll", a, !0), window.addEventListener("resize", a, !0), () => {
+      document.removeEventListener("focusin", b), document.removeEventListener("focusout", S), document.removeEventListener("mousedown", a), window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a, !0);
     };
   }, [n]), he(() => {
     pe.current.forEach((t) => {
@@ -331,28 +327,28 @@ function it(e) {
         p(!1);
       },
       toggle: () => p((t) => !t),
-      handleOptionSelect: h,
+      handleOptionSelect: m,
       subscribeOpenChange: (t) => (pe.current.add(t), () => {
         pe.current.delete(t);
       }),
-      searchInputRef: A
+      searchInputRef: z
     }),
-    [n, h]
+    [n, m]
   );
   const ae = (t) => {
     t.preventDefault(), t.stopPropagation(), t.target.matches(":focus-visible") && !Te && !n && (p(!0), setTimeout(() => {
-      A.current?.focus();
+      z.current?.focus();
     }, 10));
   }, Ge = (t) => {
     t.key === "Tab" && n && p(!1), (t.keyCode === 32 || t.key === "ArrowDown") && (p(!0), setTimeout(() => {
-      A.current?.focus();
+      z.current?.focus();
     }, 10));
   };
   return /* @__PURE__ */ s.jsxs(
     "div",
     {
       className: c("relative bg-inherit select-none w-full", M),
-      ref: z,
+      ref: A,
       draggable: !1,
       style: Le,
       children: [
@@ -361,7 +357,7 @@ function it(e) {
             "label",
             {
               htmlFor: `select-${I}`,
-              ref: Ee,
+              ref: ke,
               className: c(
                 "left-3 pointer-events-none bg-inherit z-10 line-clamp-1 max-w-[calc(100%-2.5rem)] ",
                 le === "default" && "transition-all duration-200 ease-in-out",
@@ -408,7 +404,7 @@ function it(e) {
                     onPointerLeave: Q.onPointerLeave,
                     onPointerCancel: Q.onPointerCancel,
                     onClickCapture: Q.onClickCapture,
-                    children: De ? we.createElement(
+                    children: De ? Se.createElement(
                       ee(
                         De,
                         (t, l) => t.disabled === l.disabled && t.multiple === l.multiple
@@ -488,12 +484,12 @@ function it(e) {
             label: ge,
             isOpen: n,
             disabled: J,
-            optionValue: k,
+            optionValue: O,
             optionLabel: V,
-            emptyMessage: Oe,
+            emptyMessage: Ee,
             labelVariant: le,
             renderOption: B,
-            renderOptionGroupHeader: Ae,
+            renderOptionGroupHeader: ze,
             attachToParent: Me,
             filteredOptions: x,
             multiple: e.multiple || !1,
@@ -502,15 +498,15 @@ function it(e) {
             setFilteredOptions: y,
             renderOptionContext: je,
             options: u,
-            selectRef: z,
-            dropdownRef: m,
+            selectRef: A,
+            dropdownRef: f,
             selectButtonRef: $,
             helperComponentRef: Ne,
-            onOptionClick: h,
+            onOptionClick: m,
             onCloseDropdown: () => p(!1),
             searchValue: Ie,
             setSearchValue: g,
-            searchInputRef: A,
+            searchInputRef: z,
             isLoading: v?.isLoading,
             onSearchClear: v?.onSearchClear,
             hideSearchBar: v?.hideSearchBar,
@@ -525,20 +521,20 @@ function it(e) {
             onGroupSelectChange: C
           }
         ),
-        (ke || xe) && /* @__PURE__ */ s.jsx("div", { className: "min-h-6", children: /* @__PURE__ */ s.jsx(
+        (Oe || xe) && /* @__PURE__ */ s.jsx("div", { className: "min-h-6", children: /* @__PURE__ */ s.jsx(
           tt,
           {
             ref: Ne,
             variant: T,
             className: "absolute bottom-0 h-5 overflow-visible line-clamp-1!",
-            children: ke || xe
+            children: Oe || xe
           }
         ) })
       ]
     }
   );
 }
-const ut = ee(it, (e, n) => e.value === n.value && e.options === n.options && e.isLoading === n.isLoading && e.disabled === n.disabled && e.errorComponent === n.errorComponent && e.helperComponent === n.helperComponent && e.variant === n.variant && e.label === n.label && e.id === n.id && e.name === n.name && e.placeholder === n.placeholder && e.renderOptionContext === n.renderOptionContext && e.dropdownOptions?.controledSearchValue === n.dropdownOptions?.controledSearchValue && e.dropdownOptions?.isLoading === n.dropdownOptions?.isLoading), kt = ut;
+const ut = ee(it, (e, n) => e.value === n.value && e.options === n.options && e.isLoading === n.isLoading && e.disabled === n.disabled && e.errorComponent === n.errorComponent && e.helperComponent === n.helperComponent && e.variant === n.variant && e.label === n.label && e.id === n.id && e.name === n.name && e.placeholder === n.placeholder && e.renderOptionContext === n.renderOptionContext && e.dropdownOptions?.controledSearchValue === n.dropdownOptions?.controledSearchValue && e.dropdownOptions?.isLoading === n.dropdownOptions?.isLoading), Ot = ut;
 function ct({
   footer: e,
   isOpen: n,
@@ -547,9 +543,9 @@ function ct({
   multiple: y,
   disabled: N,
   selectRef: g,
-  inputProps: z,
-  dropdownRef: m,
-  optionLabel: A,
+  inputProps: A,
+  dropdownRef: f,
+  optionLabel: z,
   optionValue: $,
   searchValue: F,
   labelVariant: Ne,
@@ -563,10 +559,10 @@ function ct({
   setSearchValue: K,
   dropdownHeight: M,
   attachToParent: W,
-  filteredOptions: k,
+  filteredOptions: O,
   selectButtonRef: V,
   onCloseDropdown: B,
-  loadingComponent: Ae,
+  loadingComponent: ze,
   dropdownClassName: De,
   helperComponentRef: je,
   selectedOptionsIds: ne,
@@ -574,20 +570,20 @@ function ct({
   onSearchValueChange: He,
   isLoading: v = !1,
   hideSearchBar: xe = !1,
-  inputSearchPlaceholder: ke = "Buscar opciones",
+  inputSearchPlaceholder: Oe = "Buscar opciones",
   enableGroupToggle: re = !0,
   focusSearchInputOnOpen: ie = !1,
   onGroupSelectChange: ye
 }) {
-  const ue = e ? 380 : 320, J = Ne === "static" ? p !== "" ? -20 : 4 : 7, T = _(() => M ? M.endsWith("px") ? Number(M.replace("px", "")) : M.endsWith("vh") ? window.innerHeight * Number(M.replace("vh", "")) / 100 : M.endsWith("%") ? window.innerHeight * Number(M.replace("%", "")) / 100 : ue : ue, [M, ue])(), [ce, Me] = Se({
+  const ue = e ? 380 : 320, J = Ne === "static" ? p !== "" ? -20 : 4 : 7, T = _(() => M ? M.endsWith("px") ? Number(M.replace("px", "")) : M.endsWith("vh") ? window.innerHeight * Number(M.replace("vh", "")) / 100 : M.endsWith("%") ? window.innerHeight * Number(M.replace("%", "")) / 100 : ue : ue, [M, ue])(), [ce, Me] = we({
     direction: "down",
     height: T
-  }), [ve, le] = Se(
+  }), [ve, le] = we(
     () => /* @__PURE__ */ new Set()
   ), Te = _(
     (r) => !ve.has(r),
     [ve]
-  ), Oe = _(
+  ), Ee = _(
     (r, o) => {
       le((i) => {
         const u = new Set(i), C = u.has(r);
@@ -595,40 +591,40 @@ function ct({
       });
     },
     []
-  ), Ee = (r) => {
-    if (!m.current || !g.current) return;
+  ), ke = (r) => {
+    if (!f.current || !g.current) return;
     const o = g.current.getBoundingClientRect();
     switch (r || ce.direction) {
       case "down":
-        m.current.style.top = `${o.top + o.height - (je?.current?.offsetHeight ? je?.current?.offsetHeight + 4 : 0)}px`;
+        f.current.style.top = `${o.top + o.height - (je?.current?.offsetHeight ? je?.current?.offsetHeight + 4 : 0)}px`;
         break;
       case "up":
-        m.current.style.top = "auto", m.current.style.bottom = `${window.innerHeight - o.top + J}px`;
+        f.current.style.top = "auto", f.current.style.bottom = `${window.innerHeight - o.top + J}px`;
         break;
     }
-    m.current.style.left = `${o.left}px`, m.current.style.width = `${o.width}px`;
+    f.current.style.left = `${o.left}px`, f.current.style.width = `${o.width}px`;
   }, Q = (r) => {
-    m.current && (m.current.style.maxHeight = `${r}px`);
+    f.current && (f.current.style.maxHeight = `${r}px`);
   }, Pe = () => {
-    if (!m.current || !g.current) return ce;
+    if (!f.current || !g.current) return ce;
     const r = g.current.getBoundingClientRect(), o = window.innerHeight - (window.innerHeight - r.top), i = window.innerHeight - r.bottom, u = i >= T, C = o >= T;
-    let H = "down", h;
-    return u ? (H = "down", h = T) : C ? (H = "up", h = T) : i > o ? (H = "down", h = i - 16) : (H = "up", h = o - 16), { direction: H, height: h };
+    let H = "down", m;
+    return u ? (H = "down", m = T) : C ? (H = "up", m = T) : i > o ? (H = "down", m = i - 16) : (H = "up", m = o - 16), { direction: H, height: m };
   }, de = (r) => {
-    if (!(!m.current || !g.current)) {
-      if (m.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !r) {
-        m.current.style.maxHeight = "0", m.current.style.opacity = "0", m.current.style.pointerEvents = "none";
+    if (!(!f.current || !g.current)) {
+      if (f.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !r) {
+        f.current.style.maxHeight = "0", f.current.style.opacity = "0", f.current.style.pointerEvents = "none";
         return;
       }
       if (!W) {
         const o = Pe();
-        Me(o), Ee(o.direction), Q(o.height);
+        Me(o), ke(o.direction), Q(o.height);
       }
-      m.current.style.opacity = "1", m.current.style.pointerEvents = "auto", ie && te?.current && te.current?.focus();
+      f.current.style.opacity = "1", f.current.style.pointerEvents = "auto", ie && te?.current && te.current?.focus();
     }
   };
   he(() => {
-    W || !g.current || !n || Ee();
+    W || !g.current || !n || ke();
   }, [ne]), he(() => {
     de(n);
   }, [n]), he(() => {
@@ -641,10 +637,10 @@ function ct({
   const Le = (r, o) => {
     if (!o) return r;
     if (I) {
-      const h = [];
+      const m = [];
       let G = null, P = [];
       const X = () => {
-        G && P.length > 0 && h.push(G, ...P), G = null, P = [];
+        G && P.length > 0 && m.push(G, ...P), G = null, P = [];
       };
       return r.forEach((oe) => {
         const ae = oe;
@@ -652,26 +648,26 @@ function ct({
           X(), G = ae;
           return;
         }
-        const t = oe, l = E(
+        const t = oe, l = k(
           t,
-          A
+          z
         ), a = qe(String(l ?? ""), o);
-        G ? a && P.push(t) : a && h.push(t);
-      }), X(), h;
+        G ? a && P.push(t) : a && m.push(t);
+      }), X(), m;
     }
     const i = [];
     let u = null, C = [];
     const H = () => {
       u && C.length > 0 && i.push(u, ...C), u = null, C = [];
     };
-    return r.forEach((h) => {
-      if (typeof h != "object" || h === null) return;
-      if ((h || {})?.isGroupHeader) {
-        H(), u = h;
+    return r.forEach((m) => {
+      if (typeof m != "object" || m === null) return;
+      if ((m || {})?.isGroupHeader) {
+        H(), u = m;
         return;
       }
-      const G = qe(h.label, o);
-      u ? G && C.push(h) : G && i.push(h);
+      const G = qe(m.label, o);
+      u ? G && C.push(m) : G && i.push(m);
     }), H(), i;
   }, _e = (r) => {
     const o = Le(x, r);
@@ -688,7 +684,7 @@ function ct({
     if (R) {
       R(), U(
         x.filter((r) => {
-          const o = I ? E(r, $) : r.id;
+          const o = I ? k(r, $) : r.id;
           return ne.has(o);
         })
       );
@@ -704,14 +700,14 @@ function ct({
     K,
     I
   ]), $e = (r) => {
-    r.key === "ArrowDown" ? (r.preventDefault(), m.current?.querySelector(
+    r.key === "ArrowDown" ? (r.preventDefault(), f.current?.querySelector(
       "[role=listitem]"
     )?.focus()) : (r.key === "Tab" || r.key === "Escape") && setTimeout(() => {
       V.current?.focus(), B();
     }, 10);
   }, L = (r, o) => {
     const i = Array.from(
-      m.current?.querySelectorAll("[role=listitem]") || []
+      f.current?.querySelectorAll("[role=listitem]") || []
     ), u = i.indexOf(r.currentTarget);
     if (r.key === "ArrowDown") {
       r.preventDefault();
@@ -735,7 +731,7 @@ function ct({
       V.current?.focus(), B();
     }, 10);
   }, q = Array.from({ length: 5 }).map(
-    (r, o) => I ? we.createElement(
+    (r, o) => I ? Se.createElement(
       ee(I, (i, u) => i.isSelected === u.isSelected && i.option === u.option && i.disabled === u.disabled && i.multiple === u.multiple && i.renderContext === u.renderContext),
       {
         key: `skeleton-option-${o}`,
@@ -765,7 +761,7 @@ function ct({
     "div",
     {
       tabIndex: 0,
-      ref: m,
+      ref: f,
       style: { opacity: "0" },
       className: c(
         " z-100! w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-lg shadow-lg",
@@ -803,21 +799,21 @@ function ct({
                 onKeyDown: $e,
                 onClear: Ie,
                 onChange: (r) => _e(r.target.value),
-                placeholder: ke,
+                placeholder: Oe,
                 className: " bg-neutral-medium-pressed *:max-h-8",
-                ...z
+                ...A
               }
             ),
-            /* @__PURE__ */ s.jsx("div", { className: " overflow-y-auto flex-1 max-h-max  ", children: k.length === 0 ? v ? /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: Ae || q }) : /* @__PURE__ */ s.jsx("p", { className: "px-3 py-2 text-neutral-medium-default max-w-full text-pretty wrap-break-word ", children: F ? `No se encontraron resultados para "${F}"` : pe }) : (() => {
+            /* @__PURE__ */ s.jsx("div", { className: " overflow-y-auto flex-1 max-h-max  ", children: O.length === 0 ? v ? /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: ze || q }) : /* @__PURE__ */ s.jsx("p", { className: "px-3 py-2 text-neutral-medium-default max-w-full text-pretty wrap-break-word ", children: F ? `No se encontraron resultados para "${F}"` : pe }) : (() => {
               let r = !0;
-              return k.map((o) => {
-                const i = o, u = !!(i || {}).isGroupHeader, C = I && !u ? E(o, $) : i.id, H = ne.has(C), h = (l) => !I || u ? l : {
+              return O.map((o) => {
+                const i = o, u = !!(i || {}).isGroupHeader, C = I && !u ? k(o, $) : i.id, H = ne.has(C), m = (l) => !I || u ? l : {
                   id: C,
-                  label: String(E(l, A)),
-                  value: E(l, $)
+                  label: String(k(l, z)),
+                  value: k(l, $)
                 }, G = (l) => {
                   u || be(
-                    h(o),
+                    m(o),
                     l === void 0 ? !y : l
                   );
                 }, P = (l) => {
@@ -834,7 +830,7 @@ function ct({
                       {
                         tabIndex: 0,
                         role: "listitem",
-                        onKeyDown: (w) => L(w, a),
+                        onKeyDown: (S) => L(S, a),
                         className: c(
                           !b && !N && "focus-visible:bg-neutral-medium-hover outline-none hover:bg-neutral-medium-hover",
                           H && "bg-neutral-medium-selected",
@@ -849,21 +845,21 @@ function ct({
                 if (u) {
                   const l = i.groupLabelNode ?? i.label, a = String(i.id), b = re === !1 ? !0 : Te(a);
                   r = b;
-                  const w = i.originalOption, d = i.groupData?.groupOptions ?? [], D = (O) => {
-                    re && Oe(a, O);
-                  }, Y = (O) => {
-                    !d || d.length === 0 || ye && ye(d, O);
-                  }, me = d.filter(
-                    (O) => ne.has(E(O, $))
-                  ).map((O) => String(E(O, $)));
+                  const S = i.originalOption, h = i.groupData?.groupOptions ?? [], D = (E) => {
+                    re && Ee(a, E);
+                  }, Y = (E) => {
+                    !h || h.length === 0 || ye && ye(h, E);
+                  }, me = h.filter(
+                    (E) => ne.has(k(E, $))
+                  ).map((E) => String(k(E, $)));
                   if (ge) {
-                    const O = ee(
+                    const E = ee(
                       ge,
-                      (f, S) => f.label === S.label && f.group === S.group && f.groupOptions === S.groupOptions && f.disabled === S.disabled && f.multiple === S.multiple && f.expanded === S.expanded && f.renderContext === S.renderContext
-                    ), Ce = we.createElement(O, {
-                      group: w,
+                      (d, w) => d.label === w.label && d.group === w.group && d.groupOptions === w.groupOptions && d.disabled === w.disabled && d.multiple === w.multiple && d.expanded === w.expanded && d.renderContext === w.renderContext
+                    ), Ce = Se.createElement(E, {
+                      group: S,
                       label: l,
-                      groupOptions: d,
+                      groupOptions: h,
                       multiple: y,
                       disabled: N,
                       expanded: b,
@@ -881,7 +877,7 @@ function ct({
                         "div",
                         {
                           className: "cursor-pointer",
-                          onClick: () => Oe(a),
+                          onClick: () => Ee(a),
                           children: /* @__PURE__ */ s.jsx(
                             Ve,
                             {
@@ -897,7 +893,7 @@ function ct({
                     i
                   );
                 }
-                const oe = I ? we.createElement(
+                const oe = I ? Se.createElement(
                   ee(
                     I,
                     (l, a) => l.isSelected === a.isSelected && l.option === a.option && l.disabled === a.disabled && l.multiple === a.multiple && l.renderContext === a.renderContext
@@ -925,12 +921,12 @@ function ct({
                   C
                 ), ae = X(
                   oe,
-                  h(o)
+                  m(o)
                 );
                 if (!re)
                   return ae;
                 const Ge = !r, t = ae;
-                return we.cloneElement(t, {
+                return Se.cloneElement(t, {
                   className: c(
                     t.props.className,
                     "overflow-hidden transition-[max-height] duration-300 ease-out",
@@ -972,13 +968,13 @@ const dt = ee(
         },
         e.id
       );
-    const z = (A) => {
-      A.preventDefault(), A.stopPropagation(), !(y || g) && p?.(e);
-    }, m = g && e.groupLabelNode ? e.groupLabelNode : e.label;
+    const A = (z) => {
+      z.preventDefault(), z.stopPropagation(), !(y || g) && p?.(e);
+    }, f = g && e.groupLabelNode ? e.groupLabelNode : e.label;
     return /* @__PURE__ */ s.jsxs(
       "div",
       {
-        onMouseDown: z,
+        onMouseDown: A,
         className: c(
           "px-3 py-2 flex items-center transition-colors text-neutral-default-default ",
           g ? "cursor-default text-neutral-medium-default" : "cursor-pointer",
@@ -987,7 +983,7 @@ const dt = ee(
         ),
         children: [
           x && !g && /* @__PURE__ */ s.jsx(rt, { checked: n, disabled: y }),
-          /* @__PURE__ */ s.jsx("span", { children: m })
+          /* @__PURE__ */ s.jsx("span", { children: f })
         ]
       },
       e.id
@@ -1005,16 +1001,16 @@ const Je = ee(
     multiple: y,
     className: N,
     disabled: g
-  }) => e?.length === 0 ? n ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default line-clamp-1", children: n }) : null : x === "chips" && y ? /* @__PURE__ */ s.jsx("div", { className: c("flex items-center gap-1 ", N), children: e.map((z) => /* @__PURE__ */ s.jsx(
+  }) => e?.length === 0 ? n ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default line-clamp-1", children: n }) : null : x === "chips" && y ? /* @__PURE__ */ s.jsx("div", { className: c("flex items-center gap-1 ", N), children: e.map((A) => /* @__PURE__ */ s.jsx(
     nt,
     {
       tabIndex: -1,
-      id: z.id,
-      label: z.label,
+      id: A.id,
+      label: A.label,
       onRemove: p,
       disabled: g
     },
-    z.id
+    A.id
   )) }) : e?.length === 1 ? /* @__PURE__ */ s.jsx("span", { className: "line-clamp-1", children: e[0].label }) : /* @__PURE__ */ s.jsxs("span", { className: "line-clamp-1", children: [
     e?.length,
     " seleccionados"
@@ -1023,5 +1019,5 @@ const Je = ee(
 );
 Je.displayName = "DefaultSelectionDisplay";
 export {
-  kt as default
+  Ot as default
 };

package/dist/TextArea.es.js

@@ -1,84 +1,106 @@
 import { j as r } from "./jsx-runtime-GkKLlHH4.js";
 import { c as a } from "./cn-B6yFEsav.js";
 import * as o from "react";
-import { forwardRef as _, Children as $, isValidElement as q } from "react";
-import { c as B } from "./index-BOQuZ0gG.js";
+import { forwardRef as $, Children as q, isValidElement as B } from "react";
+import { c as y } from "./index-BOQuZ0gG.js";
 import { H as D } from "./HelperComponent-ljsn0xD6.js";
-const F = B(
+const F = y(
   "transition-all duration-300 ease-in-out border px-3 rounded-lg flex gap-1 items-stretch relative overflow-auto prometeo-scrollbar-thin-weak",
   {
     variants: {
       variant: {
-        default: "border-neutral-default-default focus-within:border-primary-default-default",
-        error: "border-error-default-default focus-within:border-error-default",
-        success: "border-success-default-default focus-within:border-success-default"
+        default: "border-neutral-default-default hover:border-primary-default-default focus-within:border-primary-default-default focus-within:ring-1 focus-within:ring-primary-default-default focus-within:hover:border-primary-default-default",
+        error: "border-error-default-default hover:border-error-strong-default focus-within:border-error-default focus-within:ring-1 focus-within:ring-error-default-default focus-within:hover:border-error-default",
+        success: "border-success-default-default hover:border-success-strong-default focus-within:border-success-default focus-within:ring-1 focus-within:ring-success-default-default focus-within:hover:border-success-default"
       }
     },
     defaultVariants: {
       variant: "default"
     }
   }
-), N = _(
+), G = y(
+  "",
+  {
+    variants: {
+      disabled: {
+        true: "border-neutral-strong-default hover:border-neutral-strong-default "
+      }
+    }
+  }
+), J = y(
+  "",
+  {
+    variants: {
+      disabled: {
+        true: "placeholder:text-neutral-medium-disabled text-neutral-medium-disabled"
+      }
+    }
+  }
+), j = $(
   ({
     className: t,
     autoResize: s = !0,
-    userResize: u = !1,
-    minRows: f = 1,
+    userResize: c = !1,
+    minRows: d = 1,
     maxRows: i,
-    placeholder: C,
-    onChange: A,
-    value: S,
-    rows: l,
-    disabled: k = !1,
-    children: d,
-    variant: b = "default",
-    helperComponent: m,
+    placeholder: A,
+    onChange: S,
+    value: k,
+    rows: n,
+    disabled: u = !1,
+    children: m,
+    variant: v = "default",
+    helperComponent: h,
     ...R
     // ← Para pasar las props nativas
-  }, n) => {
-    const y = o.useRef(null), E = o.useRef(null), z = o.useCallback(
+  }, l) => {
+    const N = o.useRef(null), V = o.useRef(null), E = o.useCallback(
       (e) => {
-        y.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+        N.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
       },
-      [n]
-    ), h = o.useCallback(() => {
-      const e = y.current;
+      [l]
+    ), g = o.useCallback(() => {
+      const e = N.current;
       if (!e || !s) return;
       e.style.height = "auto";
-      const I = e.scrollHeight, p = Number.parseInt(getComputedStyle(e).lineHeight) || 16, L = Math.min((l ?? f) * p, E.current?.clientHeight || 0);
-      let c = Math.max(I, L);
-      if (i || l) {
-        const O = (i || l || 1) * p;
-        c = Math.min(c, O);
+      const L = e.scrollHeight, p = Number.parseInt(getComputedStyle(e).lineHeight) || 16, O = Math.min((n ?? d) * p, V.current?.clientHeight || 0);
+      let f = Math.max(L, O);
+      if (i || n) {
+        const _ = (i || n || 1) * p;
+        f = Math.min(f, _);
       }
-      e.style.height = `${c}px`, c > p + 12 && (e.style.alignContent = "start");
-    }, [s, f, i]), M = (e) => {
-      A?.(e), h();
+      e.style.height = `${f}px`, f > p + 12 && (e.style.alignContent = "start");
+    }, [s, d, i]), T = (e) => {
+      S?.(e), g();
     };
     o.useEffect(() => {
-      h();
-    }, [h]);
-    const T = () => u ? s ? "resize-x" : "resize" : "resize-none", V = typeof d == "function" ? d() : d, w = $.toArray(V);
-    let x = null, g = null;
-    return w.forEach((e) => {
-      if (q(e)) {
-        if (e.type === H && !x) {
+      g();
+    }, [g]);
+    const z = () => c ? s ? "resize-x" : "resize" : "resize-none", M = typeof m == "function" ? m() : m, I = q.toArray(M);
+    let x = null, b = null;
+    return I.forEach((e) => {
+      if (B(e)) {
+        if (e.type === w && !x) {
           x = e;
           return;
         }
-        if (e.type === v && !g) {
-          g = e;
+        if (e.type === C && !b) {
+          b = e;
           return;
         }
       }
-    }), /* @__PURE__ */ r.jsxs("div", { className: a("relative", m && "mb-6"), children: [
-      /* @__PURE__ */ r.jsxs("div", { className: a(F({ variant: b, className: t })), children: [
+    }), /* @__PURE__ */ r.jsxs("div", { className: a("relative", h && "mb-6"), children: [
+      /* @__PURE__ */ r.jsxs("div", { className: a(
+        F({ variant: v, className: t }),
+        G({ disabled: u })
+      ), children: [
         x,
         /* @__PURE__ */ r.jsx(
           "textarea",
           {
-            ref: z,
+            ref: E,
             "data-slot": "textarea",
+            "aria-disabled": u,
             className: a(
               // 'border border-amber-400/30',
               "flex-2 shrink-0 min-w-min h-fit my-3 ",
@@ -87,30 +109,32 @@ const F = B(
               "content-center",
               "outline-none",
               "prometeo-scrollbar-thin-weak",
-              T()
+              "disabled:text-neutral-medium-disabled",
+              z(),
+              J({ disabled: u })
             ),
-            onChange: M,
-            rows: l ?? f,
-            value: S,
-            placeholder: C,
-            disabled: k,
+            onChange: T,
+            rows: n ?? d,
+            value: k,
+            placeholder: A,
+            disabled: u,
             ...R
           }
         ),
-        g
+        b
       ] }),
-      m && /* @__PURE__ */ r.jsx(D, { className: "absolute -bottom-1 left-0 translate-y-full", variant: b, children: m })
+      h && /* @__PURE__ */ r.jsx(D, { className: "absolute -bottom-1 left-0 translate-y-full", variant: v, children: h })
     ] });
   }
-), j = (t) => {
-  const { children: s, className: u } = t;
-  return /* @__PURE__ */ r.jsx("div", { className: a("slot", u), children: s });
-}, H = (t) => /* @__PURE__ */ r.jsx(j, { ...t, className: a("left-slot flex gap-1 items-center py-3", t?.className) }), v = (t) => /* @__PURE__ */ r.jsx(j, { ...t, className: a("right-slot flex gap-1 items-end py-3", t?.className) }), G = Object.assign(N, {
-  Root: N,
-  LeftSlot: H,
-  RightSlot: v
+), H = (t) => {
+  const { children: s, className: c } = t;
+  return /* @__PURE__ */ r.jsx("div", { className: a("slot", c), children: s });
+}, w = (t) => /* @__PURE__ */ r.jsx(H, { ...t, className: a("left-slot flex gap-1 items-center py-3", t?.className) }), C = (t) => /* @__PURE__ */ r.jsx(H, { ...t, className: a("right-slot flex gap-1 items-end py-3", t?.className) }), K = Object.assign(j, {
+  Root: j,
+  LeftSlot: w,
+  RightSlot: C
 });
-G.displayName = "TextArea";
+K.displayName = "TextArea";
 export {
-  G as default
+  K as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.7.1",
+  "version": "4.7.2",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",