prometeo-design-system 1.6.8 → 1.7.0

package/dist/InputFormik.es.js

@@ -17,7 +17,7 @@ const U = ({
   ...t
 }) => {
   const [l, g] = k(t), [d, y] = w(!1), [i, E] = w(!1), f = g.touched && g.error, b = l.value && l.value.toString().length > 0, m = p === "password", F = m ? i ? "text" : "password" : p, I = () => {
-    const n = () => a && s === "left" ? "left-9" : "left-0";
+    const n = () => a ? s === "left" ? "left-9" : "left-0" : "left-2";
     return r === "static" ? `-top-5 ${n()} scale-90 px-1` : d || b ? `-top-2 ${n()} scale-90` : `top-1/2 -translate-y-1/2 ${n()} scale-100`;
   }, z = () => r === "static" ? "text-sm" : "text-sm peer-focus:text-sm peer-placeholder-shown:text-base", C = () => r === "static" ? o || c : o || "", K = () => m ? a ? s === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? s === "left" ? "pl-10" : "pr-10" : "", P = () => {
     E(!i);

package/dist/InputMultiple.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/InputMultiple'
+export {}

package/dist/InputMultiple.es.js

@@ -0,0 +1,254 @@
+import { j as r } from "./jsx-runtime-ByW6EXIE.js";
+import { Icons as E } from "./Icons.es.js";
+import { c as d } from "./cn-B6yFEsav.js";
+import M, { useRef as D, useState as p, useCallback as W, useEffect as X } from "react";
+const Y = ({ label: R, name: S, onChange: f, value: l, icon: C, valueSeparator: b = ",", variant: y = "default", placeholder: K, itemClassName: P, itemIcon: V, helperText: w, errorText: j, disabled: a, ...U }) => {
+  const o = D(null), I = D(null), [u, n] = p(""), [F, i] = p(0), [$, c] = p(!0), [N, z] = p(!1), [m, x] = p(!1), [k, v] = p(null), h = (e) => {
+    if (!e) return;
+    const t = e.selectionStart ?? u.length;
+    i(t);
+  }, B = (e) => {
+    if (e.target.value[e.target.value.length - 1] === b && u.length > 0) {
+      const s = u.trim();
+      if (m) {
+        s.length > 0 ? (n(s), g()) : (x(!1), n(""), c(!0), i(0));
+        return;
+      }
+      if (s.length === 0 || l.includes(s)) {
+        n(""), c(!0), h(e.target);
+        return;
+      }
+      f([...l, s]), n(""), c(!0);
+    } else {
+      if (e.target.value === b) return;
+      n(e.target.value), c(!1);
+    }
+    h(e.target);
+  }, g = W(() => {
+    const e = u.trim();
+    if (e.length === 0) {
+      x(!1), n(""), c(!0), i(0), v(null);
+      return;
+    }
+    x(!1), k !== null && f(H(l.map((t, s) => s === k ? e : t))), n(""), c(!0), i(0), v(null);
+  }, [k, u, f, l]), O = (e) => {
+    if (e.key === "Backspace" && u.length === 0) {
+      if ($) {
+        const t = l[l.length - 1];
+        t && (f(l.filter((s) => s !== t)), n(t), i(t.length));
+      } else
+        c(!0);
+      return;
+    }
+    if (e.key === "Enter") {
+      const t = u.trim();
+      if (m) {
+        t.length > 0 ? (n(t), g()) : (x(!1), n(""), c(!0), i(0));
+        return;
+      }
+      t.length > 0 && !l.includes(t) && t !== b && (f([...l, t]), n(""), c(!0), i(0));
+    }
+    e.key === "Escape" && m && (x(!1), n(""), c(!0), i(0), v(null)), h(e.currentTarget);
+  }, q = (e) => {
+    const t = l.filter((s) => s !== e);
+    f(t);
+  }, A = (e) => {
+    G(e), x(!0), n(e), i(e.length), v(l.length - 1), o.current?.focus();
+  }, G = (e) => {
+    const t = l.filter((s) => s !== e);
+    f([...t, e]);
+  }, H = (e) => e.filter((t, s, Q) => Q.indexOf(t) === s);
+  X(() => {
+    o.current && (o.current.onfocus = () => {
+      z(!0);
+    }, o.current.onblur = () => {
+      z(!1), m && g();
+    }), I.current && (I.current.onblur = () => {
+      m && g();
+    });
+  }, [m, g]);
+  const J = {
+    isFocused: {
+      error: "border-error-default-focused ring-error-default-focused",
+      success: "border-success-default-focused ring-success-default-focused",
+      warning: "border-warning-default-focused ring-warning-default-focused",
+      default: "border-primary-default-focused ring-primary-default-focused"
+    },
+    default: {
+      error: "border-error-default-default hover:border-error-default-hover",
+      success: "border-success-default-default hover:border-success-default-hover",
+      warning: "border-warning-default-default hover:border-warning-default-hover",
+      default: "border-neutral-default-default hover:border-primary-default-hover"
+    },
+    disabled: {
+      error: "border-error-default-disabled",
+      success: "border-success-default-disabled",
+      warning: "border-warning-default-disabled",
+      default: "border-neutral-default-disabled"
+    }
+  }, L = {
+    default: {
+      default: "text-neutral-default-default",
+      isFocused: "text-neutral-default-focused",
+      disabled: "text-neutral-default-disabled"
+    },
+    error: {
+      default: "text-error-medium-default",
+      isFocused: "text-error-medium-focused",
+      disabled: "text-error-medium-disabled"
+    },
+    success: {
+      default: "text-success-medium-default",
+      isFocused: "text-success-medium-focused",
+      disabled: "text-success-medium-disabled"
+    },
+    warning: {
+      default: "text-warning-default-default",
+      isFocused: "text-warning-default-focused",
+      disabled: "text-warning-default-disabled"
+    }
+  }, _ = a ? "disabled" : N ? "isFocused" : "default";
+  return /* @__PURE__ */ r.jsxs("div", { className: d(
+    "relative w-full"
+  ), children: [
+    /* @__PURE__ */ r.jsx("p", { className: d(
+      "mb-1 px-3",
+      "prometeo-fonts-label-large",
+      L?.[y || "default"]?.[_]
+    ), children: R }),
+    /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          ref: o,
+          value: u,
+          onKeyUp: O,
+          onChange: B,
+          onClick: (e) => h(e.currentTarget),
+          onSelect: (e) => h(e.currentTarget),
+          name: S,
+          disabled: a,
+          className: d(
+            "absolute inset-0 w-full h-full",
+            "opacity-0 cursor-text z-10",
+            "bg-transparent border-none outline-none",
+            "pointer-events-none"
+          ),
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: "false",
+          inputMode: "text",
+          ...U
+        }
+      ),
+      /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          ref: I,
+          className: d(
+            "border-1 border-neutral-default-default rounded-md p-3",
+            "flex flex-wrap gap-1 min-h-[58px]",
+            "transition-all duration-300 ease-in-out",
+            "cursor-text",
+            J[_][y],
+            N ? "ring-[1px]" : "",
+            // 'hover:border-primary-default-hover',
+            a && "hover:border-neutral-default-disabled"
+          ),
+          onMouseDown: (e) => {
+            e.preventDefault(), o.current?.focus();
+            const t = u.length;
+            o.current && (o.current.selectionStart = t, o.current.selectionEnd = t), i(t);
+          },
+          onClick: () => {
+            o.current?.focus();
+          },
+          children: [
+            C && /* @__PURE__ */ r.jsx("div", { className: d(
+              "flex items-center text-neutral-default-default",
+              a && "text-neutral-default-disabled"
+            ), children: C }),
+            l.map((e, t) => /* @__PURE__ */ r.jsxs(
+              "div",
+              {
+                className: d(
+                  "h-8 max-h-8 rounded-lg bg-primary-light-default border-[1px] border-neutral-default-default",
+                  "flex items-center gap-2 px-2",
+                  "prometeo-fonts-label-medium z-20",
+                  t === l.length - 1 && m ? "opacity-0 hidden  overflow-hidden" : "",
+                  a && "border-neutral-default-disabled text-neutral-default-disabled",
+                  P
+                ),
+                children: [
+                  V && /* @__PURE__ */ r.jsx("div", { className: "flex items-center", children: M.createElement(
+                    V,
+                    {
+                      size: 16,
+                      className: d(
+                        "text-neutral-default-default",
+                        a && "text-neutral-default-disabled"
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ r.jsx(
+                    "span",
+                    {
+                      onClick: () => !a && A(e),
+                      className: d(
+                        "cursor-pointer hover:text-neutral-default-hover",
+                        a && "cursor-default hover:text-neutral-default-disabled"
+                      ),
+                      children: e
+                    }
+                  ),
+                  /* @__PURE__ */ r.jsx(
+                    "div",
+                    {
+                      onClick: () => !a && q(e),
+                      className: d(
+                        "cursor-pointer hover:scale-105 transition-all duration-200",
+                        a && " cursor-default hover:scale-100 "
+                      ),
+                      children: /* @__PURE__ */ r.jsx(
+                        E.Close,
+                        {
+                          size: 16,
+                          className: d(
+                            "text-neutral-default-default hover:text-neutral-default-hover transition-all duration-200",
+                            a && "text-neutral-default-disabled hover:text-neutral-default-disabled"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              e
+            )),
+            N && /* @__PURE__ */ r.jsxs("div", { className: "flex items-center min-w-[2px]", children: [
+              /* @__PURE__ */ r.jsx("span", { className: "text-neutral-default-default whitespace-pre-wrap break-words", children: u.slice(0, F) }),
+              /* @__PURE__ */ r.jsx("span", { className: "animate-[cursor-intermitent_1s_ease-in-out_infinite] bg-neutral-default-pressed w-[2px] h-5 inline-block align-middle mx-[1px] z-20" }),
+              /* @__PURE__ */ r.jsx("span", { className: "text-neutral-default-default whitespace-pre-wrap break-words", children: u.slice(F) })
+            ] }),
+            l.length === 0 && !N && /* @__PURE__ */ r.jsx("span", { className: d(
+              "text-neutral-medium-default self-center",
+              a && "text-neutral-default-disabled"
+            ), children: K || `Escribe los valores separados por ${b}` })
+          ]
+        }
+      )
+    ] }),
+    w && y !== "error" && !a && (typeof w == "string" ? /* @__PURE__ */ r.jsxs("div", { className: "prometeo-fonts-body-small text-neutral-medium-default ml-3 mt-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ r.jsx(E.Info, { size: 16, className: "text-neutral-medium-default" }),
+      w
+    ] }) : /* @__PURE__ */ r.jsx("div", { className: "ml-3", children: w })),
+    j && typeof j == "string" && !a ? /* @__PURE__ */ r.jsxs("div", { className: "prometeo-fonts-body-small text-error-default-default ml-3 mt-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ r.jsx(E.Error, { size: 16, className: "text-error-default-default" }),
+      j
+    ] }) : j
+  ] });
+}, re = M.memo(Y);
+export {
+  re as InputMultiple
+};

package/dist/components/InputMultiple/InputMultiple.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-interface InputMultipleProps {
+export interface InputMultipleProps {
     label: string;
     name: string;
     onChange: (value: string[]) => void;

package/dist/exports/InputMultiple.d.ts

@@ -0,0 +1 @@
+export { default as InputMultiple } from '../components/InputMultiple/InputMultiple';

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { default as TabLinks } from './components/TabLinks/TabLinks';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/Table/Table';
 export { default as TextArea } from './components/TextArea/TextArea';
 export { default as Tooltip } from './components/Tooltip/Tootip';
+export { default as InputMultiple } from './components/InputMultiple/InputMultiple';
 export { default as LayoutGeneric } from './components/Layout/LayoutGeneric';
 export * from './components/Sidebar';
 export { SecondaryBar } from './components/Sidebar/SecondaryBar/SecondaryBar';
@@ -68,4 +69,5 @@ export type { ToasterPrometeo } from './components/Toaster/Toaster';
 export type { LayoutGenericProps } from './components/Layout/LayoutGeneric';
 export type { CountdownProgressProps } from './components/ProgressBar/ProgressBar';
 export type { IToolTipProps } from './components/Tooltip/Tootip';
+export type { InputMultipleProps } from './components/InputMultiple/InputMultiple';
 export { Icons } from './Icons/Icons';

package/dist/prometeo-design-system.es.js

@@ -15,7 +15,7 @@ import { default as Je } from "./Pagination.es.js";
 import { ProfilePictureUpload as Qe } from "./ProfilePictureUpload.es.js";
 import { default as _e } from "./ProgressBar.es.js";
 import { default as tt } from "./Select.es.js";
-import { default as rt } from "./SelectFormik.es.js";
+import { default as at } from "./SelectFormik.es.js";
 import { default as nt } from "./Spinner.es.js";
 import { Steps as st } from "./Steps.es.js";
 import { default as ct } from "./SwipeContainer.es.js";
@@ -23,22 +23,23 @@ import { default as dt } from "./TabLinks.es.js";
 import { Table as pt, TableBody as mt, TableCaption as xt, TableCell as bt, TableFooter as yt, TableHead as gt, TableHeader as vt, TableRow as ht } from "./Table.es.js";
 import { default as jt } from "./TextArea.es.js";
 import { default as Ct } from "./Tooltip.es.js";
+import { InputMultiple as kt } from "./InputMultiple.es.js";
 import { u as j } from "./LayoutGeneric-jDE96L2N.js";
-import { L as kt, S as It } from "./LayoutGeneric-jDE96L2N.js";
-import { j as a } from "./jsx-runtime-ByW6EXIE.js";
+import { L as Bt, S as Lt } from "./LayoutGeneric-jDE96L2N.js";
+import { j as r } from "./jsx-runtime-ByW6EXIE.js";
 import { c as s } from "./cn-B6yFEsav.js";
 import { useRef as p, useState as v, useLayoutEffect as q, createContext as P, useContext as A, forwardRef as N, useCallback as T, useEffect as C } from "react";
 import { useGSAP as S } from "@gsap/react";
 import c from "gsap";
 import { Icons as b } from "./Icons.es.js";
 import { motion as d, AnimatePresence as k } from "framer-motion";
-import { default as Lt } from "./OtpInput.es.js";
-import { DropZone as qt } from "./DropZone.es.js";
+import { default as qt } from "./OtpInput.es.js";
+import { DropZone as At } from "./DropZone.es.js";
 const D = (t, e) => {
   S(
     () => {
       if (!t.current) return;
-      const o = t.current, r = document.querySelector('[data-main-content="true"]');
+      const o = t.current, a = document.querySelector('[data-main-content="true"]');
       if (e) {
         c.fromTo(
           o,
@@ -52,7 +53,7 @@ const D = (t, e) => {
             duration: 0.4,
             ease: "power2.out"
           }
-        ), r && c.to(r, {
+        ), a && c.to(a, {
           marginLeft: o.offsetWidth + "px",
           duration: 0.4,
           ease: "power2.out"
@@ -79,7 +80,7 @@ const D = (t, e) => {
           opacity: 0,
           duration: 0.3,
           ease: "power2.in"
-        }), r && c.to(r, {
+        }), a && c.to(a, {
           marginLeft: "0px",
           duration: 0.3,
           ease: "power2.in"
@@ -91,7 +92,7 @@ const D = (t, e) => {
   children: t,
   isOpen: e = !1,
   className: o = "",
-  width: r = "w-96",
+  width: a = "w-96",
   action: n,
   primarySidebarCollapsed: i,
   onClose: l
@@ -105,8 +106,8 @@ const D = (t, e) => {
         width: g.width
       });
     }
-  }, [x, e, i]), D(u, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-    /* @__PURE__ */ a.jsx(
+  }, [x, e, i]), D(u, e), /* @__PURE__ */ r.jsx(r.Fragment, { children: e && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
       "div",
       {
         className: "fixed inset-0 bg-black/95 z-20",
@@ -116,25 +117,25 @@ const D = (t, e) => {
         onClick: l
       }
     ),
-    /* @__PURE__ */ a.jsx(
+    /* @__PURE__ */ r.jsx(
       "div",
       {
         ref: u,
         className: s(
           "h-screen bg-neutral-default-default border-r-1 border-neutral-strong-default flex flex-col secondary-bar flex-shrink-0",
           "absolute top-0 z-30",
-          r,
+          a,
           o
         ),
         style: {
           left: f.left
         },
         "data-action": n,
-        children: /* @__PURE__ */ a.jsx("div", { className: "secondary-bar-content", children: t })
+        children: /* @__PURE__ */ r.jsx("div", { className: "secondary-bar-content", children: t })
       }
     )
   ] }) });
-}, E = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("h-16 ", e), children: t }), O = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1 overflow-y-auto p-4", e), children: t }), z = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("p-4 border-t border-neutral-strong-default", e), children: t }), F = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1", t) }), ie = Object.assign(w, {
+}, E = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: s("h-16 ", e), children: t }), O = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: s("flex-1 overflow-y-auto p-4", e), children: t }), z = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: s("p-4 border-t border-neutral-strong-default", e), children: t }), F = ({ className: t }) => /* @__PURE__ */ r.jsx("div", { className: s("flex-1", t) }), ie = Object.assign(w, {
   Root: w,
   Header: E,
   Content: O,
@@ -150,7 +151,7 @@ const D = (t, e) => {
 }, H = ({
   children: t
 }) => {
-  const [e, o] = v(!1), [r, n] = v(!1), i = p(null), l = () => {
+  const [e, o] = v(!1), [a, n] = v(!1), i = p(null), l = () => {
     o(!1), n(!1);
   }, u = () => {
     o(!0), n(!1);
@@ -161,7 +162,7 @@ const D = (t, e) => {
     toggleCollapse: () => {
       e ? l() : u();
     },
-    activeSecondaryBar: r ? "notifications" : null,
+    activeSecondaryBar: a ? "notifications" : null,
     openSecondaryBar: () => {
       n(!0);
     },
@@ -172,12 +173,12 @@ const D = (t, e) => {
       n((R) => !R);
     }
   };
-  return /* @__PURE__ */ a.jsx(I.Provider, { value: L, children: t });
-}, y = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, W = (t, e, o) => {
+  return /* @__PURE__ */ r.jsx(I.Provider, { value: L, children: t });
+}, y = (t, e, o, a) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, a) : t, W = (t, e, o) => {
   S(
     () => {
       if (!t.current) return;
-      const r = c.timeline({
+      const a = c.timeline({
         defaults: { duration: 0.7, ease: "power1.out" }
       }), n = {
         navbar: t.current,
@@ -215,7 +216,7 @@ const D = (t, e) => {
         secondaryBarContent: c.utils.toArray(".secondary-bar *"),
         badgeInLink: c.utils.toArray(".badge-in-link")
       };
-      e ? $(r, n) : M(r, n), n.secondaryBar && U(n.secondaryBar);
+      e ? $(a, n) : M(a, n), n.secondaryBar && U(n.secondaryBar);
     },
     { scope: t, dependencies: [e, o] }
   );
@@ -494,13 +495,13 @@ const D = (t, e) => {
     ease: "power2.in"
   });
 }, V = N(
-  ({ children: t, isCollapsed: e = !1, className: o = "" }, r) => {
+  ({ children: t, isCollapsed: e = !1, className: o = "" }, a) => {
     const n = p(null), { registerPrimarySidebar: i } = j(), l = T((u) => {
-      n.current = u, typeof r == "function" ? r(u) : r && (r.current = u);
-    }, [r]);
+      n.current = u, typeof a == "function" ? a(u) : a && (a.current = u);
+    }, [a]);
     return C(() => {
       n.current && i(n);
-    }, [i]), W(n, e, !1), /* @__PURE__ */ a.jsx(
+    }, [i]), W(n, e, !1), /* @__PURE__ */ r.jsx(
       "div",
       {
         ref: l,
@@ -511,19 +512,19 @@ const D = (t, e) => {
     );
   }
 ), h = N(
-  (t, e) => /* @__PURE__ */ a.jsx(H, { children: /* @__PURE__ */ a.jsx(V, { ...t, ref: e }) })
+  (t, e) => /* @__PURE__ */ r.jsx(H, { children: /* @__PURE__ */ r.jsx(V, { ...t, ref: e }) })
 );
 h.displayName = "SidebarRoot";
-const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: s("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.jsx(
+const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("div", { className: s("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ r.jsx(
   "button",
   {
     onClick: e,
     title: t ? "Expandir Navbar" : "Contraer Navbar",
     "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
-    children: t ? /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
+    children: t ? /* @__PURE__ */ r.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ r.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
   }
-) }), X = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), Z = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: s("px-3 flex justify-center items-center w-full mb-4", t), children: /* @__PURE__ */ a.jsx("div", { className: "border-b border-neutral-strong-default border-1 w-full" }) }), J = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), K = ({ className: t, size: e = "auto" }) => {
+) }), X = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: `${e} sidebar-header`, children: t }), Z = ({ className: t }) => /* @__PURE__ */ r.jsx("div", { className: s("px-3 flex justify-center items-center w-full mb-4", t), children: /* @__PURE__ */ r.jsx("div", { className: "border-b border-neutral-strong-default border-1 w-full" }) }), J = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: e, children: t }), K = ({ className: t, size: e = "auto" }) => {
   const o = () => {
     switch (e) {
       case "auto":
@@ -536,8 +537,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         return "h-8 w-8";
     }
   };
-  return /* @__PURE__ */ a.jsx("div", { className: s(o(), t) });
-}, Q = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), le = Object.assign(h, {
+  return /* @__PURE__ */ r.jsx("div", { className: s(o(), t) });
+}, Q = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: e, children: t }), le = Object.assign(h, {
   Root: h,
   CollapseButton: G,
   Header: X,
@@ -549,16 +550,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
   children: t,
   icon: e,
   label: o,
-  href: r,
+  href: a,
   onClick: n,
   isActive: i = !1,
   className: l
 }) => {
-  const u = r ? "a" : "button";
-  return /* @__PURE__ */ a.jsxs(
+  const u = a ? "a" : "button";
+  return /* @__PURE__ */ r.jsxs(
     u,
     {
-      href: r,
+      href: a,
       onClick: n,
       className: s(
         "nav-link-item",
@@ -569,8 +570,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         l
       ),
       children: [
-        e && /* @__PURE__ */ a.jsx("div", { className: "nav-icon-wrapper mr-3 flex-shrink-0", children: /* @__PURE__ */ a.jsx("div", { className: "nav-icon flex items-center justify-center w-5 h-5", children: e }) }),
-        o && /* @__PURE__ */ a.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: o }),
+        e && /* @__PURE__ */ r.jsx("div", { className: "nav-icon-wrapper mr-3 flex-shrink-0", children: /* @__PURE__ */ r.jsx("div", { className: "nav-icon flex items-center justify-center w-5 h-5", children: e }) }),
+        o && /* @__PURE__ */ r.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: o }),
         t
       ]
     }
@@ -579,7 +580,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
   count: t,
   maxCount: e = 9,
   className: o = "",
-  size: r = "medium",
+  size: a = "medium",
   variant: n = "primary",
   showZero: i = !1
 }) => {
@@ -596,17 +597,17 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
     warning: "bg-yellow-500 text-black",
     danger: "bg-red-500 text-white"
   };
-  return /* @__PURE__ */ a.jsx("div", { className: s(
+  return /* @__PURE__ */ r.jsx("div", { className: s(
     "rounded-full flex items-center justify-center font-medium ",
-    f[r],
+    f[a],
     m[n],
     o
-  ), children: /* @__PURE__ */ a.jsx("span", { children: u }) });
+  ), children: /* @__PURE__ */ r.jsx("span", { children: u }) });
 }, ue = ({
   linkActions: t,
   onClick: e,
   activeAction: o
-}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
+}) => /* @__PURE__ */ r.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((a, n) => a.isView && a.viewAccess() && /* @__PURE__ */ r.jsx(
   d.div,
   {
     initial: { opacity: 0 },
@@ -617,20 +618,20 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
       ease: "easeOut"
     },
     className: "relative flex justify-center w-full items-center px-3",
-    children: /* @__PURE__ */ a.jsxs(
+    children: /* @__PURE__ */ r.jsxs(
       "button",
       {
         onClick: () => {
-          e?.(r.action);
+          e?.(a.action);
         },
         className: s(
           "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
           "transition-all duration-300 ease-out w-full",
           "group hover:bg-neutral-medium-selected",
-          o === r.action ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+          o === a.action ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
         ),
         children: [
-          /* @__PURE__ */ a.jsx(k, { mode: "wait", children: o === r.action && /* @__PURE__ */ a.jsx(
+          /* @__PURE__ */ r.jsx(k, { mode: "wait", children: o === a.action && /* @__PURE__ */ r.jsx(
             d.div,
             {
               layoutId: "nav-active-bg",
@@ -645,42 +646,42 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
               }
             }
           ) }),
-          /* @__PURE__ */ a.jsxs(
+          /* @__PURE__ */ r.jsxs(
             d.div,
             {
               className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
               animate: {
-                x: (o === r.action, 0)
+                x: (o === a.action, 0)
               },
               transition: {
                 duration: 0.25,
                 ease: "easeOut"
               },
               children: [
-                /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ a.jsx(
+                /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ r.jsx(
                     d.div,
                     {
                       className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                       animate: {
-                        scale: o === r.action ? 1.05 : 1
+                        scale: o === a.action ? 1.05 : 1
                       },
                       transition: {
                         duration: 0.25,
                         ease: "easeOut"
                       },
-                      children: typeof r.icon == "function" ? r.icon({
+                      children: typeof a.icon == "function" ? a.icon({
                         size: 24,
                         className: s(
                           "nav-icon transition-colors duration-250 ease-out",
-                          o === r.action ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
+                          o === a.action ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                         )
                       }) : null
                     }
                   ),
-                  /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
+                  /* @__PURE__ */ r.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: a.title })
                 ] }),
-                /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ a.jsx(B, { count: r.count, maxCount: 9, className: "" }) : "" })
+                /* @__PURE__ */ r.jsx("div", { className: "badge-in-link", children: a.count && a?.count >= 1 ? /* @__PURE__ */ r.jsx(B, { count: a.count, maxCount: 9, className: "" }) : "" })
               ]
             }
           )
@@ -693,11 +694,11 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
   links: t,
   isLinkActive: e,
   onLinkClick: o
-}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
-  const i = e(r.path) || (r.relatedPaths?.some(
+}) => /* @__PURE__ */ r.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((a, n) => {
+  const i = e(a.path) || (a.relatedPaths?.some(
     (l) => e(l)
   ) ?? !1);
-  return r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
+  return a.isView && a.viewAccess() && /* @__PURE__ */ r.jsx(
     d.div,
     {
       initial: { opacity: 0 },
@@ -708,11 +709,11 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         ease: "easeOut"
       },
       className: "relative flex justify-center w-full items-center px-3",
-      children: /* @__PURE__ */ a.jsxs(
+      children: /* @__PURE__ */ r.jsxs(
         "button",
         {
           onClick: () => {
-            o?.(r.path);
+            o?.(a.path);
           },
           className: s(
             "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
@@ -721,7 +722,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
             i ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ a.jsx(k, { mode: "wait", children: i && /* @__PURE__ */ a.jsx(
+            /* @__PURE__ */ r.jsx(k, { mode: "wait", children: i && /* @__PURE__ */ r.jsx(
               d.div,
               {
                 layoutId: "nav-active-bg",
@@ -736,7 +737,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                 }
               }
             ) }),
-            /* @__PURE__ */ a.jsxs(
+            /* @__PURE__ */ r.jsxs(
               d.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
@@ -748,8 +749,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                   ease: "easeOut"
                 },
                 children: [
-                  /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ a.jsx(
+                  /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ r.jsx(
                       d.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
@@ -760,7 +761,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                           duration: 0.25,
                           ease: "easeOut"
                         },
-                        children: typeof r.icon == "function" ? r.icon({
+                        children: typeof a.icon == "function" ? a.icon({
                           size: 24,
                           className: s(
                             "nav-icon transition-colors duration-250 ease-out",
@@ -769,9 +770,9 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                         }) : null
                       }
                     ),
-                    /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
+                    /* @__PURE__ */ r.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: a.title })
                   ] }),
-                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ a.jsx(B, { count: r.count, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ r.jsx("div", { className: "badge-in-link", children: a.count && a.count ? /* @__PURE__ */ r.jsx(B, { count: a.count, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -795,16 +796,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
 }, me = ({
   isCollapsed: t,
   onToggle: e
-}) => /* @__PURE__ */ a.jsx("div", { className: "", children: /* @__PURE__ */ a.jsx(
+}) => /* @__PURE__ */ r.jsx("div", { className: "", children: /* @__PURE__ */ r.jsx(
   "button",
   {
     onClick: e,
     title: t ? "Expandir Navbar" : "Contraer Navbar",
     "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
-    children: t ? /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
+    children: t ? /* @__PURE__ */ r.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ r.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
   }
-) }), xe = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
+) }), xe = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ r.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ r.jsx(
   "img",
   {
     src: t,
@@ -815,17 +816,17 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
   const o = p(null);
   return C(() => {
     if (!e) return;
-    const r = (n) => {
+    const a = (n) => {
       o.current && !o.current.contains(n.target) && t();
     };
-    return document.addEventListener("mousedown", r, {
+    return document.addEventListener("mousedown", a, {
       capture: !0
-    }), document.addEventListener("touchstart", r, {
+    }), document.addEventListener("touchstart", a, {
       capture: !0
     }), () => {
-      document.removeEventListener("mousedown", r, {
+      document.removeEventListener("mousedown", a, {
         capture: !0
-      }), document.removeEventListener("touchstart", r, {
+      }), document.removeEventListener("touchstart", a, {
         capture: !0
       });
     };
@@ -843,28 +844,29 @@ export {
   Re as DialogModal,
   Ae as DrawerDesktop,
   Ee as DrawerMobile,
-  qt as DropZone,
+  At as DropZone,
   Fe as Header,
   b as Icons,
   We as Input,
   Me as InputFormik,
-  kt as LayoutGeneric,
+  kt as InputMultiple,
+  Bt as LayoutGeneric,
   Ve as Logo,
   Xe as Menu,
   ue as NavBarActions,
   me as NavbarCollapseButton,
   de as NavbarLinks,
   ce as NavigationLink,
-  Lt as OtpInput,
+  qt as OtpInput,
   Je as Pagination,
   Qe as ProfilePictureUpload,
   _e as ProgressBar,
   ie as SecondaryBar,
   tt as Select,
-  rt as SelectFormik,
+  at as SelectFormik,
   le as Sidebar,
   H as SidebarProvider,
-  It as SidebarRefProvider,
+  Lt as SidebarRefProvider,
   nt as Spinner,
   st as Steps,
   ct as SwipeContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "1.6.8",
+  "version": "1.7.0",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -133,6 +133,10 @@
       "types": "./dist/Icons.d.ts",
       "import": "./dist/Icons.es.js"
     },
+    "./InputMultiple": {
+      "types": "./dist/InputMultiple.d.ts",
+      "import": "./dist/InputMultiple.es.js"
+    },
     "./styles": "./dist/prometeo-design-system.css"
   },
   "files": [