prometeo-design-system 1.7.4 → 1.7.6

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as DrawerMobile } from './components/Drawer/DrawerMobile';
 export { default as Header } from './components/Header/Header';
 export { default as Input } from './components/Input/Input';
 export { default as InputFormik } from './components/InputFormik/InputFormik';
+export { default as InputMultiple } from './components/InputMultiple/InputMultiple';
 export { default as Logo } from './components/Logo/Logo';
 export { Menu } from './components/Menu/MenuComposable';
 export { default as Pagination } from './components/Pagination/Pagination';
@@ -20,11 +21,10 @@ export { default as ChangueAccount } from './components/Sidebar/components/chang
 export { default as Spinner } from './components/Spinner/Spinner';
 export { default as Steps } from './components/Steps/Steps';
 export { default as SwipeContainer } from './components/SwipeContainer/SwipeContainer';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/Table/Table';
 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';
@@ -36,7 +36,8 @@ export { default as OtpInput } from './components/OtpInput/OtpInput';
 export { useDialogControl } from './components/Dialog/useDialogControl';
 export { useDrawerDesktop } from './components/Drawer/useDrawerDesktop';
 export { useDrawerMobile } from './components/Drawer/useDrawerMobile';
-export { SidebarProvider as SidebarRefProvider, useSidebarContext, } from './components/Sidebar/context/SidebarContext';
+export { useFileDropzone } from './components/DropZone/useFileDropzone';
+export { SidebarProvider as SidebarRefProvider, useSidebarContext } from './components/Sidebar/context/SidebarContext';
 export { SidebarProvider } from './components/Sidebar/hooks/SidebarProvider';
 export { useSidebar } from './components/Sidebar/hooks/useSidebarHook';
 export { useClickOutside } from './hooks/useClickOutside';
@@ -45,25 +46,26 @@ export type { ButtonProps } from './components/Button/Button';
 export type { ISessionLocalStorage } from './components/CardProfile/CardProfile';
 export type { CheckBoxProps } from './components/CheckBox/CheckBox';
 export type { ICheckboxFormik } from './components/CheckboxFormik/CheckboxFormik';
+export type { DropZoneProps } from './components/DropZone/DropZone';
 export type { IHeader } from './components/Header/Header';
-export type { InputProps, InputSize, InputVariant, } from './components/Input/Input';
+export type { InputProps, InputSize, InputVariant } from './components/Input/Input';
 export type { IInputFormik } from './components/InputFormik/InputFormik';
 export type { IMenuItems, IMenuRoot } from './components/Menu/MenuComposable';
 export type { OtpInputProps } from './components/OtpInput/OtpInput';
-export type { ContentProps as SecondaryBarContentProps, FooterProps as SecondaryBarFooterProps, HeaderProps as SecondaryBarHeaderProps, SecondaryBarRootProps, SpacerProps as SecondaryBarSpacerProps, } from './components/Sidebar/SecondaryBar/SecondaryBar';
 export type { BadgeProps } from './components/Sidebar/components/badge';
 export type { NavbarCollapseButtonProps } from './components/Sidebar/components/collapse-button';
 export type { CompanyLogoProps } from './components/Sidebar/components/company-logo';
 export type { INavbarActionsProps } from './components/Sidebar/components/nav-actions';
 export type { NavbarLinksProps } from './components/Sidebar/components/nav-links';
-export type { INavAction, INavLink, Role, RoleLevels, } from './components/Sidebar/hooks/useNavLinks';
+export type { INavAction, INavLink, Role, RoleLevels } from './components/Sidebar/hooks/useNavLinks';
+export type { ContentProps as SecondaryBarContentProps, FooterProps as SecondaryBarFooterProps, HeaderProps as SecondaryBarHeaderProps, SecondaryBarRootProps, SpacerProps as SecondaryBarSpacerProps } from './components/Sidebar/SecondaryBar/SecondaryBar';
 export type { SidebarContextValue } from './components/Sidebar/hooks/useSidebarHook';
-export type { SpinnerProps, SpinnerSize, SpinnerVariant, } from './components/Spinner/Spinner';
+export type { SpinnerProps, SpinnerSize, SpinnerVariant } from './components/Spinner/Spinner';
 export type { PaginationProps } from './components/Pagination/Pagination';
 export type { ProfilePictureUploadProps } from './components/ProfilePictureUpload/ProfilePictureUpload';
 export type { Step, StepsProps } from './components/Steps/Steps';
-export type { SelectOptionRendererProps, SelectProps, SelectionDisplayProps, } from './components/Select/Select';
-export type { ISelectFormik, ISelectFormikOption, } from './components/SelectFormik/SelectFormik';
+export type { SelectionDisplayProps, SelectOptionRendererProps, SelectProps } from './components/Select/Select';
+export type { ISelectFormik, ISelectFormikOption } from './components/SelectFormik/SelectFormik';
 export type { DialogHandle } from './components/Dialog/Dialog';
 export { DropZone } from './components/DropZone/DropZone';
 export type { ToasterPrometeo } from './components/Toaster/Toaster';

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

@@ -1,48 +1,49 @@
-import { default as ge } from "./Avatar.es.js";
-import { default as we } from "./Button.es.js";
-import { C as Ne, a as Ce } from "./CardProfile-BZajBGbO.js";
-import { default as ke } from "./CheckBox.es.js";
-import { default as Be } from "./CheckboxFormik.es.js";
-import { default as Re, useDialogControl as qe } from "./DialogModal.es.js";
-import { default as Ae, useDrawerDesktop as Te } from "./DrawerDesktop.es.js";
-import { default as Ee, useDrawerMobile as Oe } from "./DrawerMobile.es.js";
-import { default as Fe } from "./Header.es.js";
-import { default as We } from "./Input.es.js";
-import { default as Me } from "./InputFormik.es.js";
-import { default as Ve } from "./Logo.es.js";
-import { Menu as Xe } from "./Menu.es.js";
-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 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";
-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 vt, TableHeader as gt, 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 { default as Ne } from "./Avatar.es.js";
+import { default as Se } from "./Button.es.js";
+import { C as Ie, a as Be } from "./CardProfile-BZajBGbO.js";
+import { default as Re } from "./CheckBox.es.js";
+import { default as Pe } from "./CheckboxFormik.es.js";
+import { default as Te, useDialogControl as ze } from "./DialogModal.es.js";
+import { default as Ee, useDrawerDesktop as Oe } from "./DrawerDesktop.es.js";
+import { default as We, useDrawerMobile as $e } from "./DrawerMobile.es.js";
+import { default as Me } from "./Header.es.js";
+import { default as Ve } from "./Input.es.js";
+import { default as _e } from "./InputFormik.es.js";
+import { InputMultiple as Ze } from "./InputMultiple.es.js";
+import { default as Ke } from "./Logo.es.js";
+import { Menu as Ye } from "./Menu.es.js";
+import { default as tt } from "./Pagination.es.js";
+import { ProfilePictureUpload as at } from "./ProfilePictureUpload.es.js";
+import { default as nt } from "./ProgressBar.es.js";
+import { default as st } from "./Select.es.js";
+import { default as ut } from "./SelectFormik.es.js";
+import { default as dt } from "./Spinner.es.js";
+import { Steps as pt } from "./Steps.es.js";
+import { default as xt } from "./SwipeContainer.es.js";
+import { Table as yt, TableBody as gt, TableCaption as vt, TableCell as ht, TableFooter as wt, TableHead as jt, TableHeader as Nt, TableRow as Ct } from "./Table.es.js";
+import { default as kt } from "./TabLinks.es.js";
+import { default as Bt } from "./TextArea.es.js";
+import { default as Rt } from "./Tooltip.es.js";
 import { u as j } from "./LayoutGeneric-jDE96L2N.js";
-import { L as Bt, S as Lt } from "./LayoutGeneric-jDE96L2N.js";
+import { L as Pt, S as Dt } 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 g, useLayoutEffect as q, createContext as P, useContext as A, forwardRef as N, useCallback as T, useEffect as C } from "react";
+import { c as l } from "./cn-B6yFEsav.js";
+import q, { useRef as p, useState as v, useLayoutEffect as P, createContext as D, useContext as T, forwardRef as N, useCallback as z, useEffect as C } from "react";
 import { useGSAP as S } from "@gsap/react";
-import c from "gsap";
+import u from "gsap";
 import { Icons as b } from "./Icons.es.js";
 import { motion as d, AnimatePresence as k } from "framer-motion";
-import { default as qt } from "./OtpInput.es.js";
-import { useDevices as At } from "./useDevice.es.js";
-import { DropZone as Dt } from "./DropZone.es.js";
-const D = (t, e) => {
+import { default as zt } from "./OtpInput.es.js";
+import { useDropzone as A } from "react-dropzone";
+import { useDevices as Et } from "./useDevice.es.js";
+import { DropZone as Ht } from "./DropZone.es.js";
+const E = (t, e) => {
   S(
     () => {
       if (!t.current) return;
       const o = t.current, a = document.querySelector('[data-main-content="true"]');
       if (e) {
-        c.fromTo(
+        u.fromTo(
           o,
           {
             width: "0rem",
@@ -54,13 +55,13 @@ const D = (t, e) => {
             duration: 0.4,
             ease: "power2.out"
           }
-        ), a && c.to(a, {
+        ), a && u.to(a, {
           marginLeft: o.offsetWidth + "px",
           duration: 0.4,
           ease: "power2.out"
         });
         const n = o.querySelectorAll(".secondary-bar-content > *");
-        n.length > 0 && c.fromTo(
+        n.length > 0 && u.fromTo(
           n,
           {
             y: 20,
@@ -76,12 +77,12 @@ const D = (t, e) => {
           }
         );
       } else
-        c.to(o, {
+        u.to(o, {
           width: "0rem",
           opacity: 0,
           duration: 0.3,
           ease: "power2.in"
-        }), a && c.to(a, {
+        }), a && u.to(a, {
           marginLeft: "0px",
           duration: 0.3,
           ease: "power2.in"
@@ -96,18 +97,18 @@ const D = (t, e) => {
   width: a = "w-96",
   action: n,
   primarySidebarCollapsed: i,
-  onClose: l
+  onClose: s
 }) => {
-  const u = p(null), [f, m] = g({ left: 0, width: 0 }), { primarySidebarRef: x } = j();
-  return q(() => {
+  const c = p(null), [f, m] = v({ left: 0, width: 0 }), { primarySidebarRef: x } = j();
+  return P(() => {
     if (x?.current) {
-      const v = x.current.getBoundingClientRect();
+      const g = x.current.getBoundingClientRect();
       m({
-        left: v.width,
-        width: v.width
+        left: g.width,
+        width: g.width
       });
     }
-  }, [x, e, i]), D(u, e), /* @__PURE__ */ r.jsx(r.Fragment, { children: e && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+  }, [x, e, i]), E(c, e), /* @__PURE__ */ r.jsx(r.Fragment, { children: e && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
     /* @__PURE__ */ r.jsx(
       "div",
       {
@@ -115,14 +116,14 @@ const D = (t, e) => {
         style: {
           left: f.left
         },
-        onClick: l
+        onClick: s
       }
     ),
     /* @__PURE__ */ r.jsx(
       "div",
       {
-        ref: u,
-        className: s(
+        ref: c,
+        className: l(
           "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",
           a,
@@ -136,32 +137,32 @@ const D = (t, e) => {
       }
     )
   ] }) });
-}, 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, {
+}, O = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: l("h-16 ", e), children: t }), H = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: l("flex-1 overflow-y-auto p-4", e), children: t }), W = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: l("p-4 border-t border-neutral-strong-default", e), children: t }), $ = ({ className: t }) => /* @__PURE__ */ r.jsx("div", { className: l("flex-1", t) }), ue = Object.assign(w, {
   Root: w,
-  Header: E,
-  Content: O,
-  Footer: z,
-  Spacer: F
-}), I = P(
+  Header: O,
+  Content: H,
+  Footer: W,
+  Spacer: $
+}), I = D(
   void 0
-), se = () => {
-  const t = A(I);
+), ce = () => {
+  const t = T(I);
   if (!t)
     throw new Error("useSidebar must be used within a Sidebar.Root");
   return t;
-}, H = ({
+}, F = ({
   children: t
 }) => {
-  const [e, o] = g(!1), [a, n] = g(!1), i = p(null), l = () => {
+  const [e, o] = v(!1), [a, n] = v(!1), i = p(null), s = () => {
     o(!1), n(!1);
-  }, u = () => {
+  }, c = () => {
     o(!0), n(!1);
   }, L = {
     isCollapsed: e,
     setIsCollapsed: o,
     navbarRef: i,
     toggleCollapse: () => {
-      e ? l() : u();
+      e ? s() : c();
     },
     activeSecondaryBar: a ? "notifications" : null,
     openSecondaryBar: () => {
@@ -175,18 +176,18 @@ const D = (t, e) => {
     }
   };
   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) => {
+}, y = (t, e, o, a) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, a) : t, M = (t, e, o) => {
   S(
     () => {
       if (!t.current) return;
-      const a = c.timeline({
+      const a = u.timeline({
         defaults: { duration: 0.7, ease: "power1.out" }
       }), n = {
         navbar: t.current,
-        navLabels: c.utils.toArray(".nav-label"),
-        navIconWrappers: c.utils.toArray(".nav-icon-wrapper"),
-        navIcons: c.utils.toArray(".nav-icon"),
-        navLinkItems: c.utils.toArray(".nav-link-item"),
+        navLabels: u.utils.toArray(".nav-label"),
+        navIconWrappers: u.utils.toArray(".nav-icon-wrapper"),
+        navIcons: u.utils.toArray(".nav-icon"),
+        navLinkItems: u.utils.toArray(".nav-link-item"),
         logoutButton: document.querySelector(".logout-button"),
         logoutLabel: document.querySelector(".logout-label"),
         logoutIcon: document.querySelector(".logout-icon"),
@@ -214,14 +215,14 @@ const D = (t, e) => {
         ),
         // Secondary bar elements
         secondaryBar: document.querySelector(".secondary-bar"),
-        secondaryBarContent: c.utils.toArray(".secondary-bar *"),
-        badgeInLink: c.utils.toArray(".badge-in-link")
+        secondaryBarContent: u.utils.toArray(".secondary-bar *"),
+        badgeInLink: u.utils.toArray(".badge-in-link")
       };
-      e ? $(a, n) : M(a, n), n.secondaryBar && U(n.secondaryBar);
+      e ? U(a, n) : V(a, n), n.secondaryBar && G(n.secondaryBar);
     },
     { scope: t, dependencies: [e, o] }
   );
-}, $ = (t, e) => {
+}, U = (t, e) => {
   t.to(e.navbar, {
     width: "5rem",
     duration: 0.2,
@@ -360,7 +361,7 @@ const D = (t, e) => {
     },
     -1
   );
-}, M = (t, e) => {
+}, V = (t, e) => {
   t.to(e.navbar, { width: "20rem" }, -1).to(
     e.navLinkItems,
     {
@@ -488,24 +489,24 @@ const D = (t, e) => {
     },
     0
   ).to(e.navIcons, { scale: 1 }, 0.3);
-}, U = (t, e) => {
-  c.to(t, {
+}, G = (t, e) => {
+  u.to(t, {
     x: "-100%",
     opacity: 0,
     duration: 0.3,
     ease: "power2.in"
   });
-}, V = N(
+}, _ = N(
   ({ children: t, isCollapsed: e = !1, className: o = "" }, a) => {
-    const n = p(null), { registerPrimarySidebar: i } = j(), l = T((u) => {
-      n.current = u, typeof a == "function" ? a(u) : a && (a.current = u);
+    const n = p(null), { registerPrimarySidebar: i } = j(), s = z((c) => {
+      n.current = c, typeof a == "function" ? a(c) : a && (a.current = c);
     }, [a]);
     return C(() => {
       n.current && i(n);
-    }, [i]), W(n, e, !1), /* @__PURE__ */ r.jsx(
+    }, [i]), M(n, e, !1), /* @__PURE__ */ r.jsx(
       "div",
       {
-        ref: l,
+        ref: s,
         className: `bg-neutral-default-default hidden overflow-hidden h-screen md:flex flex-col border-r border-neutral-strong-default transition-all duration-300 relative z-50 flex-shrink-0
           ${e ? "w-16" : "w-64"} ${o}`,
         children: t
@@ -513,10 +514,10 @@ const D = (t, e) => {
     );
   }
 ), h = N(
-  (t, e) => /* @__PURE__ */ r.jsx(H, { children: /* @__PURE__ */ r.jsx(V, { ...t, ref: e }) })
+  (t, e) => /* @__PURE__ */ r.jsx(F, { children: /* @__PURE__ */ r.jsx(_, { ...t, ref: e }) })
 );
 h.displayName = "SidebarRoot";
-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(
+const X = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("div", { className: l("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ r.jsx(
   "button",
   {
     onClick: e,
@@ -525,7 +526,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors 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__ */ 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" }) => {
+) }), Z = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: `${e} sidebar-header`, children: t }), J = ({ className: t }) => /* @__PURE__ */ r.jsx("div", { className: l("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" }) }), K = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: e, children: t }), Q = ({ className: t, size: e = "auto" }) => {
   const o = () => {
     switch (e) {
       case "auto":
@@ -538,37 +539,37 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
         return "h-8 w-8";
     }
   };
-  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, {
+  return /* @__PURE__ */ r.jsx("div", { className: l(o(), t) });
+}, Y = ({ children: t, className: e }) => /* @__PURE__ */ r.jsx("div", { className: e, children: t }), de = Object.assign(h, {
   Root: h,
-  CollapseButton: G,
-  Header: X,
-  Divider: Z,
-  Content: J,
-  Spacer: K,
-  Footer: Q
-}), ce = ({
+  CollapseButton: X,
+  Header: Z,
+  Divider: J,
+  Content: K,
+  Spacer: Q,
+  Footer: Y
+}), fe = ({
   children: t,
   icon: e,
   label: o,
   href: a,
   onClick: n,
   isActive: i = !1,
-  className: l
+  className: s
 }) => {
-  const u = a ? "a" : "button";
+  const c = a ? "a" : "button";
   return /* @__PURE__ */ r.jsxs(
-    u,
+    c,
     {
       href: a,
       onClick: n,
-      className: s(
+      className: l(
         "nav-link-item",
         "flex items-center w-full px-3 py-2 text-left",
         "hover:bg-neutral-medium-default transition-colors rounded-lg",
         "focus:outline-none focus:ring-2 focus:ring-primary-default-default",
         i && "bg-neutral-medium-default",
-        l
+        s
       ),
       children: [
         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 }) }),
@@ -585,8 +586,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
   variant: n = "primary",
   showZero: i = !1
 }) => {
-  const l = t, u = l > e ? `+${e}` : l;
-  if (l === 0 && !i) return null;
+  const s = t, c = s > e ? `+${e}` : s;
+  if (s === 0 && !i) return null;
   const f = {
     small: "w-4.5 h-4.5 text-xs ",
     medium: "w-5 h-5 text-xs",
@@ -598,13 +599,13 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
     warning: "bg-yellow-500 text-black",
     danger: "bg-red-500 text-white"
   };
-  return /* @__PURE__ */ r.jsx("div", { className: s(
+  return /* @__PURE__ */ r.jsx("div", { className: l(
     "rounded-full flex items-center justify-center font-medium ",
     f[a],
     m[n],
     o
-  ), children: /* @__PURE__ */ r.jsx("span", { children: u }) });
-}, ue = ({
+  ), children: /* @__PURE__ */ r.jsx("span", { children: c }) });
+}, pe = ({
   linkActions: t,
   onClick: e,
   activeAction: o
@@ -625,7 +626,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
         onClick: () => {
           e?.(a.action);
         },
-        className: s(
+        className: l(
           "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",
@@ -673,7 +674,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
                       },
                       children: typeof a.icon == "function" ? a.icon({
                         size: 24,
-                        className: s(
+                        className: l(
                           "nav-icon transition-colors duration-250 ease-out",
                           o === a.action ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                         )
@@ -691,13 +692,13 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
     )
   },
   n
-)) }), de = ({
+)) }), me = ({
   links: t,
   isLinkActive: e,
   onLinkClick: o
 }) => /* @__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)
+    (s) => e(s)
   ) ?? !1);
   return a.isView && a.viewAccess() && /* @__PURE__ */ r.jsx(
     d.div,
@@ -716,7 +717,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
           onClick: () => {
             o?.(a.path);
           },
-          className: s(
+          className: l(
             "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",
@@ -764,7 +765,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
                         },
                         children: typeof a.icon == "function" ? a.icon({
                           size: 24,
-                          className: s(
+                          className: l(
                             "nav-icon transition-colors duration-250 ease-out",
                             i ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                           )
@@ -783,18 +784,18 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
     },
     n
   );
-}) }), fe = ({
+}) }), xe = ({
   isActiveModalNotification: t,
   setIsActiveModalNotification: e
 }) => ({ handleNotificationClick: () => {
   e(!0);
-}, isActiveModalNotification: t }), pe = (t) => {
+}, isActiveModalNotification: t }), be = (t) => {
   const e = p(null);
   return {
     isCollapsed: t,
     navbarRef: e
   };
-}, me = ({
+}, ye = ({
   isCollapsed: t,
   onToggle: e
 }) => /* @__PURE__ */ r.jsx("div", { className: "", children: /* @__PURE__ */ r.jsx(
@@ -806,14 +807,34 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors 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__ */ r.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ r.jsx(
+) }), ge = ({ 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,
     className: "h-2/3 rounded-full",
     alt: e ?? ""
   }
-) }), be = (t, e = !0) => {
+) });
+function ve({
+  onFilesAccepted: t,
+  onFilesRejected: e,
+  ...o
+}) {
+  const a = q.useCallback(
+    (i, s) => {
+      i.length > 0 && t?.(i), s.length > 0 && e?.(s);
+    },
+    [t, e]
+  ), n = A({
+    onDrop: a,
+    ...o
+  });
+  return {
+    ...n,
+    hasErrors: n.fileRejections.length > 0
+  };
+}
+const he = (t, e = !0) => {
   const o = p(null);
   return C(() => {
     if (!e) return;
@@ -834,61 +855,62 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
   }, [t, e]), o;
 };
 export {
-  ge as Avatar,
+  Ne as Avatar,
   B as Badge,
-  we as Button,
-  Ne as CardProfile,
-  Ce as ChangueAccount,
-  ke as CheckBox,
-  Be as CheckboxFormik,
-  xe as CompanyLogo,
-  Re as DialogModal,
-  Ae as DrawerDesktop,
-  Ee as DrawerMobile,
-  Dt as DropZone,
-  Fe as Header,
+  Se as Button,
+  Ie as CardProfile,
+  Be as ChangueAccount,
+  Re as CheckBox,
+  Pe as CheckboxFormik,
+  ge as CompanyLogo,
+  Te as DialogModal,
+  Ee as DrawerDesktop,
+  We as DrawerMobile,
+  Ht as DropZone,
+  Me as Header,
   b as Icons,
-  We as Input,
-  Me as InputFormik,
-  kt as InputMultiple,
-  Bt as LayoutGeneric,
-  Ve as Logo,
-  Xe as Menu,
-  ue as NavBarActions,
-  me as NavbarCollapseButton,
-  de as NavbarLinks,
-  ce as NavigationLink,
-  qt as OtpInput,
-  Je as Pagination,
-  Qe as ProfilePictureUpload,
-  _e as ProgressBar,
-  ie as SecondaryBar,
-  tt as Select,
-  at as SelectFormik,
-  le as Sidebar,
-  H as SidebarProvider,
-  Lt as SidebarRefProvider,
-  nt as Spinner,
-  st as Steps,
-  ct as SwipeContainer,
-  dt as TabLinks,
-  pt as Table,
-  mt as TableBody,
-  xt as TableCaption,
-  bt as TableCell,
-  yt as TableFooter,
-  vt as TableHead,
-  gt as TableHeader,
-  ht as TableRow,
-  jt as TextArea,
-  Ct as Tooltip,
-  fe as useActionsNavbar,
-  be as useClickOutside,
-  At as useDevices,
-  qe as useDialogControl,
-  Te as useDrawerDesktop,
-  Oe as useDrawerMobile,
-  pe as useNavbarCollapse,
-  se as useSidebar,
+  Ve as Input,
+  _e as InputFormik,
+  Ze as InputMultiple,
+  Pt as LayoutGeneric,
+  Ke as Logo,
+  Ye as Menu,
+  pe as NavBarActions,
+  ye as NavbarCollapseButton,
+  me as NavbarLinks,
+  fe as NavigationLink,
+  zt as OtpInput,
+  tt as Pagination,
+  at as ProfilePictureUpload,
+  nt as ProgressBar,
+  ue as SecondaryBar,
+  st as Select,
+  ut as SelectFormik,
+  de as Sidebar,
+  F as SidebarProvider,
+  Dt as SidebarRefProvider,
+  dt as Spinner,
+  pt as Steps,
+  xt as SwipeContainer,
+  kt as TabLinks,
+  yt as Table,
+  gt as TableBody,
+  vt as TableCaption,
+  ht as TableCell,
+  wt as TableFooter,
+  jt as TableHead,
+  Nt as TableHeader,
+  Ct as TableRow,
+  Bt as TextArea,
+  Rt as Tooltip,
+  xe as useActionsNavbar,
+  he as useClickOutside,
+  Et as useDevices,
+  ze as useDialogControl,
+  Oe as useDrawerDesktop,
+  $e as useDrawerMobile,
+  ve as useFileDropzone,
+  be as useNavbarCollapse,
+  ce as useSidebar,
   j as useSidebarContext
 };

package/package.json

@@ -1,225 +1,225 @@
-{
-  "name": "prometeo-design-system",
-  "private": false,
-  "version": "1.7.4",
-  "type": "module",
-  "description": "design kit system",
-  "main": "dist/prometeo-design-system.umd.js",
-  "module": "dist/prometeo-design-system.es.js",
-  "types": "dist/index.d.ts",
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/prometeo-design-system.es.js",
-      "require": "./dist/prometeo-design-system.umd.js"
-    },
-    "./Button": {
-      "types": "./dist/Button.d.ts",
-      "import": "./dist/Button.es.js"
-    },
-    "./Avatar": {
-      "types": "./dist/Avatar.d.ts",
-      "import": "./dist/Avatar.es.js"
-    },
-    "./CardProfile": {
-      "types": "./dist/CardProfile.d.ts",
-      "import": "./dist/CardProfile.es.js"
-    },
-    "./CheckBox": {
-      "types": "./dist/CheckBox.d.ts",
-      "import": "./dist/CheckBox.es.js"
-    },
-    "./CheckboxFormik": {
-      "types": "./dist/CheckboxFormik.d.ts",
-      "import": "./dist/CheckboxFormik.es.js"
-    },
-    "./DialogModal": {
-      "types": "./dist/DialogModal.d.ts",
-      "import": "./dist/DialogModal.es.js"
-    },
-    "./DrawerDesktop": {
-      "types": "./dist/DrawerDesktop.d.ts",
-      "import": "./dist/DrawerDesktop.es.js"
-    },
-    "./DrawerMobile": {
-      "types": "./dist/DrawerMobile.d.ts",
-      "import": "./dist/DrawerMobile.es.js"
-    },
-    "./Header": {
-      "types": "./dist/Header.d.ts",
-      "import": "./dist/Header.es.js"
-    },
-    "./Input": {
-      "types": "./dist/Input.d.ts",
-      "import": "./dist/Input.es.js"
-    },
-    "./InputFormik": {
-      "types": "./dist/InputFormik.d.ts",
-      "import": "./dist/InputFormik.es.js"
-    },
-    "./Logo": {
-      "types": "./dist/Logo.d.ts",
-      "import": "./dist/Logo.es.js"
-    },
-    "./Menu": {
-      "types": "./dist/Menu.d.ts",
-      "import": "./dist/Menu.es.js"
-    },
-    "./Pagination": {
-      "types": "./dist/Pagination.d.ts",
-      "import": "./dist/Pagination.es.js"
-    },
-    "./ProgressBar": {
-      "types": "./dist/ProgressBar.d.ts",
-      "import": "./dist/ProgressBar.es.js"
-    },
-    "./ProfilePictureUpload": {
-      "types": "./dist/ProfilePictureUpload.d.ts",
-      "import": "./dist/ProfilePictureUpload.es.js"
-    },
-    "./Select": {
-      "types": "./dist/Select.d.ts",
-      "import": "./dist/Select.es.js"
-    },
-    "./SelectFormik": {
-      "types": "./dist/SelectFormik.d.ts",
-      "import": "./dist/SelectFormik.es.js"
-    },
-    "./Spinner": {
-      "types": "./dist/Spinner.d.ts",
-      "import": "./dist/Spinner.es.js"
-    },
-    "./Steps": {
-      "types": "./dist/Steps.d.ts",
-      "import": "./dist/Steps.es.js"
-    },
-    "./SwipeContainer": {
-      "types": "./dist/SwipeContainer.d.ts",
-      "import": "./dist/SwipeContainer.es.js"
-    },
-    "./TabLinks": {
-      "types": "./dist/TabLinks.d.ts",
-      "import": "./dist/TabLinks.es.js"
-    },
-    "./Table": {
-      "types": "./dist/Table.d.ts",
-      "import": "./dist/Table.es.js"
-    },
-    "./TextArea": {
-      "types": "./dist/TextArea.d.ts",
-      "import": "./dist/TextArea.es.js"
-    },
-    "./Tooltip": {
-      "types": "./dist/Tooltip.d.ts",
-      "import": "./dist/Tooltip.es.js"
-    },
-    "./LayoutGeneric": {
-      "types": "./dist/LayoutGeneric.d.ts",
-      "import": "./dist/LayoutGeneric.es.js"
-    },
-    "./OtpInput": {
-      "types": "./dist/OtpInput.d.ts",
-      "import": "./dist/OtpInput.es.js"
-    },
-    "./DropZone": {
-      "types": "./dist/DropZone.d.ts",
-      "import": "./dist/DropZone.es.js"
-    },
-    "./Icons": {
-      "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": [
-    "dist",
-    "README.md"
-  ],
-  "keywords": [
-    "react",
-    "design-system",
-    "components",
-    "tailwind",
-    "framer-motion",
-    "typescript",
-    "ui-kit"
-  ],
-  "author": "Mat",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/your-username/prometeo-design-system.git"
-  },
-  "homepage": "https://github.com/your-username/prometeo-design-system#readme",
-  "bugs": {
-    "url": "https://github.com/your-username/prometeo-design-system/issues"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "clean": "rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "shared-dependencies-tickets": "^1.0.11"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@gsap/react": "^2.1.2",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-onboarding": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
-    "@tailwindcss/vite": "^4.1.13",
-    "@tanstack/react-table": "^8.21.3",
-    "@types/node": "^24.3.1",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react-swc": "^4.0.0",
-    "class-variance-authority": "^0.7.1",
-    "eslint": "^9.33.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.1.3",
-    "globals": "^16.3.0",
-    "input-otp": "^1.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "^9.1.3",
-    "tailwindcss": "^4.1.12",
-    "tw-animate-css": "^1.3.7",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "peerDependencies": {
-    "@emotion/is-prop-valid": "^1.4.0",
-    "@gsap/react": "^2.0.0",
-    "clsx": "^2.0.0",
-    "formik": "^2.4.6",
-    "framer-motion": "^12.0.0",
-    "gsap": "^3.12.5",
-    "lucide-react": "^0.400.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-dropzone": "^14.3.8",
-    "react-router": "^7.0.0",
-    "react-router-dom": "^7.0.0",
-    "react-spinners": "^0.17.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.0.0",
-    "use-debounce": "^10.0.0",
-    "vaul": "^1.1.2"
-  }
-}
+{
+  "name": "prometeo-design-system",
+  "private": false,
+  "version": "1.7.6",
+  "type": "module",
+  "description": "design kit system",
+  "main": "dist/prometeo-design-system.umd.js",
+  "module": "dist/prometeo-design-system.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/prometeo-design-system.es.js",
+      "require": "./dist/prometeo-design-system.umd.js"
+    },
+    "./Button": {
+      "types": "./dist/Button.d.ts",
+      "import": "./dist/Button.es.js"
+    },
+    "./Avatar": {
+      "types": "./dist/Avatar.d.ts",
+      "import": "./dist/Avatar.es.js"
+    },
+    "./CardProfile": {
+      "types": "./dist/CardProfile.d.ts",
+      "import": "./dist/CardProfile.es.js"
+    },
+    "./CheckBox": {
+      "types": "./dist/CheckBox.d.ts",
+      "import": "./dist/CheckBox.es.js"
+    },
+    "./CheckboxFormik": {
+      "types": "./dist/CheckboxFormik.d.ts",
+      "import": "./dist/CheckboxFormik.es.js"
+    },
+    "./DialogModal": {
+      "types": "./dist/DialogModal.d.ts",
+      "import": "./dist/DialogModal.es.js"
+    },
+    "./DrawerDesktop": {
+      "types": "./dist/DrawerDesktop.d.ts",
+      "import": "./dist/DrawerDesktop.es.js"
+    },
+    "./DrawerMobile": {
+      "types": "./dist/DrawerMobile.d.ts",
+      "import": "./dist/DrawerMobile.es.js"
+    },
+    "./Header": {
+      "types": "./dist/Header.d.ts",
+      "import": "./dist/Header.es.js"
+    },
+    "./Input": {
+      "types": "./dist/Input.d.ts",
+      "import": "./dist/Input.es.js"
+    },
+    "./InputFormik": {
+      "types": "./dist/InputFormik.d.ts",
+      "import": "./dist/InputFormik.es.js"
+    },
+    "./Logo": {
+      "types": "./dist/Logo.d.ts",
+      "import": "./dist/Logo.es.js"
+    },
+    "./Menu": {
+      "types": "./dist/Menu.d.ts",
+      "import": "./dist/Menu.es.js"
+    },
+    "./Pagination": {
+      "types": "./dist/Pagination.d.ts",
+      "import": "./dist/Pagination.es.js"
+    },
+    "./ProgressBar": {
+      "types": "./dist/ProgressBar.d.ts",
+      "import": "./dist/ProgressBar.es.js"
+    },
+    "./ProfilePictureUpload": {
+      "types": "./dist/ProfilePictureUpload.d.ts",
+      "import": "./dist/ProfilePictureUpload.es.js"
+    },
+    "./Select": {
+      "types": "./dist/Select.d.ts",
+      "import": "./dist/Select.es.js"
+    },
+    "./SelectFormik": {
+      "types": "./dist/SelectFormik.d.ts",
+      "import": "./dist/SelectFormik.es.js"
+    },
+    "./Spinner": {
+      "types": "./dist/Spinner.d.ts",
+      "import": "./dist/Spinner.es.js"
+    },
+    "./Steps": {
+      "types": "./dist/Steps.d.ts",
+      "import": "./dist/Steps.es.js"
+    },
+    "./SwipeContainer": {
+      "types": "./dist/SwipeContainer.d.ts",
+      "import": "./dist/SwipeContainer.es.js"
+    },
+    "./TabLinks": {
+      "types": "./dist/TabLinks.d.ts",
+      "import": "./dist/TabLinks.es.js"
+    },
+    "./Table": {
+      "types": "./dist/Table.d.ts",
+      "import": "./dist/Table.es.js"
+    },
+    "./TextArea": {
+      "types": "./dist/TextArea.d.ts",
+      "import": "./dist/TextArea.es.js"
+    },
+    "./Tooltip": {
+      "types": "./dist/Tooltip.d.ts",
+      "import": "./dist/Tooltip.es.js"
+    },
+    "./LayoutGeneric": {
+      "types": "./dist/LayoutGeneric.d.ts",
+      "import": "./dist/LayoutGeneric.es.js"
+    },
+    "./OtpInput": {
+      "types": "./dist/OtpInput.d.ts",
+      "import": "./dist/OtpInput.es.js"
+    },
+    "./DropZone": {
+      "types": "./dist/DropZone.d.ts",
+      "import": "./dist/DropZone.es.js"
+    },
+    "./Icons": {
+      "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": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "design-system",
+    "components",
+    "tailwind",
+    "framer-motion",
+    "typescript",
+    "ui-kit"
+  ],
+  "author": "Mat",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/prometeo-design-system.git"
+  },
+  "homepage": "https://github.com/your-username/prometeo-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/your-username/prometeo-design-system/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "shared-dependencies-tickets": "^1.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@gsap/react": "^2.1.2",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-onboarding": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "class-variance-authority": "^0.7.1",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.1.3",
+    "globals": "^16.3.0",
+    "input-otp": "^1.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^9.1.3",
+    "tailwindcss": "^4.1.12",
+    "tw-animate-css": "^1.3.7",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "@emotion/is-prop-valid": "^1.4.0",
+    "@gsap/react": "^2.0.0",
+    "clsx": "^2.0.0",
+    "formik": "^2.4.6",
+    "framer-motion": "^12.0.0",
+    "gsap": "^3.12.5",
+    "lucide-react": "^0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.3.8",
+    "react-router": "^7.0.0",
+    "react-router-dom": "^7.0.0",
+    "react-spinners": "^0.17.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.0.0",
+    "use-debounce": "^10.0.0",
+    "vaul": "^1.1.2"
+  }
+}