prometeo-design-system 2.2.2 → 2.3.1

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

@@ -1,233 +1,56 @@
-import { default as Ve } from "./Avatar.es.js";
-import { B as Xe } from "./Button-DsbEyjth.js";
-import { C as Je, a as Ke } from "./CardProfile-BhFog7j5.js";
-import { default as Ye } from "./CheckBox.es.js";
-import { default as tt } from "./CheckboxFormik.es.js";
-import { default as rt, useDialogControl as ot } from "./DialogModal.es.js";
-import { default as it, useDrawerDesktop as st } from "./DrawerDesktop.es.js";
-import { default as ct, useDrawerMobile as ut } from "./DrawerMobile.es.js";
-import { default as ft } from "./Header.es.js";
-import { default as pt } from "./Input.es.js";
-import { default as ht } from "./InputFormik.es.js";
-import { InputMultiple as gt } from "./InputMultiple.es.js";
-import { default as yt } from "./Logo.es.js";
-import { Menu as jt } from "./Menu.es.js";
-import { default as Ct } from "./Pagination.es.js";
-import { ProfilePictureUpload as kt } from "./ProfilePictureUpload.es.js";
-import { default as Rt } from "./ProgressBar.es.js";
-import { default as Tt } from "./Select.es.js";
-import { default as Lt } from "./SelectFormik.es.js";
-import { default as Ot } from "./Spinner.es.js";
-import { Steps as Et } from "./Steps.es.js";
-import { default as qt } from "./SwipeContainer.es.js";
-import { Switch as Ht } from "./Switch.es.js";
-import { default as Mt } from "./DatePicker.es.js";
-import { Table as Ft, TableBody as Ut, TableCaption as Vt, TableCell as Gt, TableFooter as Xt, TableHead as Zt, TableHeader as Jt, TableRow as Kt } from "./Table.es.js";
-import { default as Yt } from "./TabLinks.es.js";
-import { default as ta } from "./TextArea.es.js";
-import { default as ra } from "./Tooltip.es.js";
-import { Skeleton as na } from "./Skeleton.es.js";
-import { j as a } from "./jsx-runtime-DKDX3adD.js";
+import { default as Se } from "./Avatar.es.js";
+import { B as Ie } from "./Button-Bc0LYLfg.js";
+import { C as Re, a as Le } from "./CardProfile-BiYr6kY9.js";
+import { default as Pe } from "./CheckBox.es.js";
+import { default as Te } from "./CheckboxFormik.es.js";
+import { default as De, useDialogControl as Ee } from "./DialogModal.es.js";
+import { default as He, useDrawerDesktop as We } from "./DrawerDesktop.es.js";
+import { default as Fe, useDrawerMobile as Me } from "./DrawerMobile.es.js";
+import { default as Ge } from "./Header.es.js";
+import { default as _e } from "./Input.es.js";
+import { default as Ze } from "./InputFormik.es.js";
+import { InputMultiple as Ke } from "./InputMultiple.es.js";
+import { default as Ye } from "./Logo.es.js";
+import { Menu as tt } from "./Menu.es.js";
+import { default as rt } from "./Pagination.es.js";
+import { ProfilePictureUpload as nt } from "./ProfilePictureUpload.es.js";
+import { default as st } from "./ProgressBar.es.js";
+import { default as ct } from "./Select.es.js";
+import { default as dt } from "./SelectFormik.es.js";
+import { default as mt } from "./Spinner.es.js";
+import { Steps as xt } from "./Steps.es.js";
+import { default as vt } from "./SwipeContainer.es.js";
+import { Switch as yt } from "./Switch.es.js";
+import { default as wt } from "./DatePicker.es.js";
+import { Table as Nt, TableBody as Ct, TableCaption as St, TableCell as kt, TableFooter as It, TableHead as Bt, TableHeader as Rt, TableRow as Lt } from "./Table.es.js";
+import { default as Pt } from "./TabLinks.es.js";
+import { default as Tt } from "./TextArea.es.js";
+import { default as Dt } from "./Tooltip.es.js";
+import { Skeleton as Ot } from "./Skeleton.es.js";
+import { SegmentedButton as Wt } from "./SegmentedButton.es.js";
+import { u as S } from "./LayoutGeneric-jDE96L2N.js";
+import { L as Ft, S as Mt } from "./LayoutGeneric-jDE96L2N.js";
+import { I as Gt } from "./ImageGallery-O5Y4oBrD.js";
+import { default as _t } from "./Image.es.js";
+import { j as a } from "./jsx-runtime-ByW6EXIE.js";
 import { c as u } from "./cn-B6yFEsav.js";
-import _, { useState as k, useMemo as z, useEffect as T, useRef as N, useLayoutEffect as Y, createContext as ee, useContext as te, forwardRef as M, useCallback as ae } from "react";
-import { motion as g, AnimatePresence as $ } from "framer-motion";
-import { u as F } from "./LayoutGeneric-p4Pll4Cm.js";
-import { L as sa, S as la } from "./LayoutGeneric-p4Pll4Cm.js";
-import { useGSAP as U } from "@gsap/react";
-import h from "gsap";
-import { Icons as R } from "./Icons.es.js";
-import { default as ua } from "./OtpInput.es.js";
-import { useDropzone as re } from "react-dropzone";
-import { useIsMobile as fa } from "./useDevice.es.js";
-import { DropZone as pa } from "./DropZone.es.js";
-const We = (t) => {
-  const [e, o] = k({}), { size: r = "medium", color: n = "default", options: i, value: s, name: d, onChange: l, icon: f, allowExpand: c = !1, disabled: x = !1 } = t, p = Math.max(i.findIndex((m) => m.value === s), 0), b = i.length, I = 9, W = 26, w = {
-    small: 120,
-    medium: 120,
-    large: 120
-  }, v = {
-    small: 94,
-    medium: 94,
-    large: 94
-  }, D = 16, X = {
-    small: { container: "p-2" },
-    medium: { container: "p-4 h-[48px] rounded-lg" },
-    large: { container: "p-6" }
-  }, C = {
-    default: {
-      switch: "bg-primary-medium-default text-neutral-weak-default ",
-      container: "border-neutral-default-default",
-      icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
-    },
-    success: {
-      switch: "bg-success-medium-default text-neutral-weak-default",
-      container: "border-neutral-default-default",
-      icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
-    },
-    danger: {
-      switch: "bg-error-medium-default text-neutral-weak-default",
-      container: "border-neutral-default-default",
-      icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
-    },
-    warning: {
-      switch: "bg-warning-medium-default text-neutral-weak-default",
-      container: "border-neutral-default-default",
-      icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
-    },
-    disabled: {
-      switch: "bg-primary-medium-disabled text-neutral-strong-disabled",
-      container: "border-neutral-default-disabled",
-      icon: "text-neutral-strong-disabled",
-      option: "text-neutral-strong-disabled"
-    }
-  }, q = i.find((m) => m.value === s) ?? i[0], L = q.label.length * I + D * 2 + W, A = () => z(() => Object.values(e).reduce((y, j) => y + j, 0) + W, [e]), O = {
-    small: c ? A() : (b - 1) * v.small + w.small,
-    medium: c ? A() : (b - 1) * v.medium + w.medium,
-    large: c ? A() : (b - 1) * v.large + w.large
-  };
-  T(() => {
-    if (!c) return;
-    let m = {};
-    i.forEach((y, j) => {
-      m[j] = y.label.length * I + D * 2;
-    }), o(m);
-  }, []);
-  const Z = z(() => c ? Object.values(e).reduce((m, y, j) => j < p ? m + y : m, 0) : Math.max(p * v[r] - 2, 0), [p]), J = () => {
-    if (x) return;
-    const m = p === i.length - 1 ? i[0] : i[p + 1];
-    l?.(d, m.value);
-  }, S = x ? "disabled" : n;
-  return /* @__PURE__ */ a.jsxs(
-    "button",
-    {
-      name: d,
-      type: "button",
-      id: "segmented-button-container",
-      style: {
-        width: O[r],
-        minWidth: O[r],
-        maxWidth: O[r]
-      },
-      className: u(
-        X[r].container,
-        C[S].container,
-        "border-[1px]",
-        !x && "cursor-pointer",
-        "relative"
-      ),
-      children: [
-        /* @__PURE__ */ a.jsxs(
-          g.div,
-          {
-            id: "segmented-button-switcher",
-            animate: {
-              left: `${Z}px`,
-              width: c ? L : w[r],
-              minWidth: c ? L : w[r],
-              maxWidth: c ? L : w[r]
-            },
-            transition: {
-              type: "spring",
-              stiffness: 260,
-              damping: 30
-            },
-            className: u(
-              "absolute top-0 left-0 h-full rounded-[6px] z-30",
-              "flex items-center justify-center gap-[2px] p-4",
-              C[S].switch
-            ),
-            onClick: () => {
-              !x && J();
-            },
-            children: [
-              f && _.cloneElement(f, { className: u(
-                "w-6 h-6 text-neutral-weak-default min-w-6 min-h-6",
-                C[S].icon
-              ) }),
-              /* @__PURE__ */ a.jsx(
-                "p",
-                {
-                  className: u(
-                    "prometeo-fonts-label-large ",
-                    " overflow-hidden overflow-ellipsis text-nowrap ",
-                    C[S].switch
-                  ),
-                  children: q.label
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ a.jsx(
-          "div",
-          {
-            id: "segmented-button-options",
-            className: u(
-              "absolute top-0 left-0 w-full h-full overflow-hidden",
-              "flex justify-center"
-            ),
-            children: i?.map((m, y) => {
-              const j = m.value === (s || i[0].value), K = c ? e[y] + W : w[r], Q = c ? e[y] : v[r], P = j ? K : Q;
-              return /* @__PURE__ */ a.jsx(
-                g.span,
-                {
-                  id: "segmented-button-option",
-                  onClick: () => {
-                    !x && l?.(d, m.value);
-                  },
-                  animate: {
-                    width: P,
-                    minWidth: P,
-                    maxWidth: P
-                  },
-                  transition: {
-                    duration: 0.3,
-                    delay: 0
-                  },
-                  className: u(
-                    "z-20 h-full ",
-                    "flex items-center justify-center px-3 py-[6px]",
-                    "prometeo-fonts-label-large text-neutral-medium-default",
-                    " overflow-hidden ",
-                    !x && "cursor-pointer"
-                  ),
-                  "aria-label": m.label,
-                  children: /* @__PURE__ */ a.jsx(
-                    "p",
-                    {
-                      style: {
-                        width: c ? "max-content" : v[r],
-                        minWidth: c ? "max-content" : v[r],
-                        maxWidth: c ? "max-content" : v[r]
-                      },
-                      className: u(
-                        "px-3 place-content-center overflow-hidden text-ellipsis text-wrap prometeo-fonts-label-large  h-full",
-                        C[S].option
-                      ),
-                      children: m.label
-                    }
-                  )
-                },
-                m.value
-              );
-            })
-          }
-        )
-      ]
-    }
-  );
-}, oe = (t, e) => {
-  U(
+import P, { useRef as g, useState as y, useLayoutEffect as q, createContext as T, useContext as z, useEffect as N, forwardRef as k, useCallback as D } from "react";
+import { useGSAP as I } from "@gsap/react";
+import m from "gsap";
+import { Icons as h } from "./Icons.es.js";
+import { motion as b, AnimatePresence as B } from "framer-motion";
+import { default as Zt } from "./OtpInput.es.js";
+import { useDropzone as E } from "react-dropzone";
+import { useIsMobile as Kt } from "./useDevice.es.js";
+import { DropZone as Yt } from "./DropZone.es.js";
+const O = (t, e) => {
+  I(
     () => {
       if (!t.current) return;
-      const o = t.current, r = document.querySelector('[data-main-content="true"]');
+      const r = t.current, o = document.querySelector('[data-main-content="true"]');
       if (e) {
-        h.fromTo(
-          o,
+        m.fromTo(
+          r,
           {
             width: "0rem",
             opacity: 0
@@ -238,13 +61,13 @@ const We = (t) => {
             duration: 0.4,
             ease: "power2.out"
           }
-        ), r && h.to(r, {
-          marginLeft: o.offsetWidth + "px",
+        ), o && m.to(o, {
+          marginLeft: r.offsetWidth + "px",
           duration: 0.4,
           ease: "power2.out"
         });
-        const n = o.querySelectorAll(".secondary-bar-content > *");
-        n.length > 0 && h.fromTo(
+        const n = r.querySelectorAll(".secondary-bar-content > *");
+        n.length > 0 && m.fromTo(
           n,
           {
             y: 20,
@@ -260,12 +83,12 @@ const We = (t) => {
           }
         );
       } else
-        h.to(o, {
+        m.to(r, {
           width: "0rem",
           opacity: 0,
           duration: 0.3,
           ease: "power2.in"
-        }), r && h.to(r, {
+        }), o && m.to(o, {
           marginLeft: "0px",
           duration: 0.3,
           ease: "power2.in"
@@ -273,25 +96,25 @@ const We = (t) => {
     },
     { scope: t, dependencies: [e] }
   );
-}, H = ({
+}, C = ({
   children: t,
   isOpen: e = !1,
-  className: o = "",
-  width: r = "w-96",
+  className: r = "",
+  width: o = "w-96",
   action: n,
   primarySidebarCollapsed: i,
   onClose: s
 }) => {
-  const d = N(null), [l, f] = k({ left: 0, width: 0 }), { primarySidebarRef: c } = F();
-  return Y(() => {
-    if (c?.current) {
-      const x = c.current.getBoundingClientRect();
-      f({
+  const c = g(null), [l, d] = y({ left: 0, width: 0 }), { primarySidebarRef: f } = S();
+  return q(() => {
+    if (f?.current) {
+      const x = f.current.getBoundingClientRect();
+      d({
         left: x.width,
         width: x.width
       });
     }
-  }, [c, e, i]), oe(d, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+  }, [f, e, i]), O(c, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(
       "div",
       {
@@ -305,12 +128,12 @@ const We = (t) => {
     /* @__PURE__ */ a.jsx(
       "div",
       {
-        ref: d,
+        ref: c,
         className: u(
           "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,
-          o
+          o,
+          r
         ),
         style: {
           left: l.left
@@ -320,34 +143,34 @@ const We = (t) => {
       }
     )
   ] }) });
-}, ne = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("h-16 ", e), children: t }), ie = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1 overflow-y-auto p-4", e), children: t }), se = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("p-4 border-t border-neutral-strong-default", e), children: t }), le = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1", t) }), Le = Object.assign(H, {
-  Root: H,
-  Header: ne,
-  Content: ie,
-  Footer: se,
-  Spacer: le
-}), V = ee(
+}, H = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("h-16 ", e), children: t }), W = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1 overflow-y-auto p-4", e), children: t }), $ = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("p-4 border-t border-neutral-strong-default", e), children: t }), F = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1", t) }), de = Object.assign(C, {
+  Root: C,
+  Header: H,
+  Content: W,
+  Footer: $,
+  Spacer: F
+}), R = T(
   void 0
-), Ae = () => {
-  const t = te(V);
+), fe = () => {
+  const t = z(R);
   if (!t)
     throw new Error("useSidebar must be used within a Sidebar.Root");
   return t;
-}, ce = ({
+}, M = ({
   children: t
 }) => {
-  const [e, o] = k(!1), [r, n] = k(!1), i = N(null), s = () => {
-    o(!1), n(!1);
-  }, d = () => {
-    o(!0), n(!1);
+  const [e, r] = y(!1), [o, n] = y(!1), i = g(null), s = () => {
+    r(!1), n(!1);
+  }, c = () => {
+    r(!0), n(!1);
   }, p = {
     isCollapsed: e,
-    setIsCollapsed: o,
+    setIsCollapsed: r,
     navbarRef: i,
     toggleCollapse: () => {
-      e ? s() : d();
+      e ? s() : c();
     },
-    activeSecondaryBar: r ? "notifications" : null,
+    activeSecondaryBar: o ? "notifications" : null,
     openSecondaryBar: () => {
       n(!0);
     },
@@ -355,22 +178,22 @@ const We = (t) => {
       n(!1);
     },
     toggleSecondaryBar: () => {
-      n((b) => !b);
+      n((v) => !v);
     }
   };
-  return /* @__PURE__ */ a.jsx(V.Provider, { value: p, children: t });
-}, B = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, ue = (t, e, o) => {
-  U(
+  return /* @__PURE__ */ a.jsx(R.Provider, { value: p, children: t });
+}, w = (t, e, r, o) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, r, o) : t, U = (t, e, r) => {
+  I(
     () => {
       if (!t.current) return;
-      const r = h.timeline({
+      const o = m.timeline({
         defaults: { duration: 0.7, ease: "power1.out" }
       }), n = {
         navbar: t.current,
-        navLabels: h.utils.toArray(".nav-label"),
-        navIconWrappers: h.utils.toArray(".nav-icon-wrapper"),
-        navIcons: h.utils.toArray(".nav-icon"),
-        navLinkItems: h.utils.toArray(".nav-link-item"),
+        navLabels: m.utils.toArray(".nav-label"),
+        navIconWrappers: m.utils.toArray(".nav-icon-wrapper"),
+        navIcons: m.utils.toArray(".nav-icon"),
+        navLinkItems: m.utils.toArray(".nav-link-item"),
         logoutButton: document.querySelector(".logout-button"),
         logoutLabel: document.querySelector(".logout-label"),
         logoutIcon: document.querySelector(".logout-icon"),
@@ -398,14 +221,14 @@ const We = (t) => {
         ),
         // Secondary bar elements
         secondaryBar: document.querySelector(".secondary-bar"),
-        secondaryBarContent: h.utils.toArray(".secondary-bar *"),
-        badgeInLink: h.utils.toArray(".badge-in-link")
+        secondaryBarContent: m.utils.toArray(".secondary-bar *"),
+        badgeInLink: m.utils.toArray(".badge-in-link")
       };
-      e ? de(r, n) : fe(r, n), n.secondaryBar && me(n.secondaryBar);
+      e ? G(o, n) : V(o, n), n.secondaryBar && _(n.secondaryBar);
     },
-    { scope: t, dependencies: [e, o] }
+    { scope: t, dependencies: [e, r] }
   );
-}, de = (t, e) => {
+}, G = (t, e) => {
   t.to(e.navbar, {
     width: "5rem",
     duration: 0.2,
@@ -464,7 +287,7 @@ const We = (t) => {
       marginLeft: 0
     },
     0
-  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), B(
+  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), w(
     t,
     e.buttonCrevron,
     {
@@ -477,7 +300,7 @@ const We = (t) => {
       }
     },
     0
-  ), B(
+  ), w(
     t,
     e.buttonContentChevron,
     {
@@ -544,7 +367,7 @@ const We = (t) => {
     },
     -1
   );
-}, fe = (t, e) => {
+}, V = (t, e) => {
   t.to(e.navbar, { width: "20rem" }, -1).to(
     e.navLinkItems,
     {
@@ -554,7 +377,7 @@ const We = (t) => {
       justifyContent: "flex-start"
     },
     -1
-  ), B(
+  ), w(
     t,
     e.buttonCrevron,
     {
@@ -567,7 +390,7 @@ const We = (t) => {
       }
     },
     0
-  ), B(
+  ), w(
     t,
     e.buttonContentChevron,
     {
@@ -672,19 +495,19 @@ const We = (t) => {
     },
     0
   ).to(e.navIcons, { scale: 1 }, 0.3);
-}, me = (t, e) => {
-  h.to(t, {
+}, _ = (t, e) => {
+  m.to(t, {
     x: "-100%",
     opacity: 0,
     duration: 0.3,
     ease: "power2.in"
   });
-}, pe = (t) => {
-  const [e, o] = k(t?.currentTabName || t.tabs[0].name), r = N(null), { tabs: n = [], className: i, activeColor: s = "var(--neutral-900)" } = t;
-  T(() => {
-    r.current?.style.setProperty("--tab-bg", s);
+}, X = (t) => {
+  const [e, r] = y(t?.currentTabName || t.tabs[0].name), o = g(null), { tabs: n = [], className: i, activeColor: s = "var(--neutral-900)" } = t;
+  N(() => {
+    o.current?.style.setProperty("--tab-bg", s);
   }, [s]);
-  const d = n.find((l) => l.name === (t?.currentTabName || e));
+  const c = n.find((l) => l.name === (t?.currentTabName || e));
   return /* @__PURE__ */ a.jsx(
     "div",
     {
@@ -696,9 +519,9 @@ const We = (t) => {
         i
       ),
       children: n.map(
-        (l, f) => {
-          const c = l.name === d?.name, x = typeof l.thumbnail == "string" ? /* @__PURE__ */ a.jsx("img", { src: l.thumbnail, alt: l.description, className: "aspect-square object-contain" }) : l.thumbnail, p = () => {
-            l.disabled || (o(l.name), l.onClick && l.onClick(l.name));
+        (l, d) => {
+          const f = l.name === c?.name, x = typeof l.thumbnail == "string" ? /* @__PURE__ */ a.jsx("img", { src: l.thumbnail, alt: l.description, className: "aspect-square object-contain" }) : l.thumbnail, p = () => {
+            l.disabled || (r(l.name), l.onClick && l.onClick(l.name));
           };
           return /* @__PURE__ */ a.jsx(
             "div",
@@ -709,10 +532,10 @@ const We = (t) => {
                 "flex items-center pl-[6px] ",
                 "rounded-l-[8px]",
                 "tabswitch-element relative",
-                c && "active"
+                f && "active"
               ),
               onClick: p,
-              ref: r,
+              ref: o,
               children: /* @__PURE__ */ a.jsx("div", { className: u(
                 "size-8 rounded-[4px]",
                 "grid place-items-center",
@@ -721,26 +544,26 @@ const We = (t) => {
                 l?.className
               ), children: x })
             },
-            f
+            d
           );
         }
       )
     }
   );
-}, xe = M(
-  ({ children: t, isCollapsed: e = !1, className: o = "", tabs: r = [], currentTabName: n }, i) => {
-    const s = N(null), { registerPrimarySidebar: d } = F(), l = ae((f) => {
-      s.current = f, typeof i == "function" ? i(f) : i && (i.current = f);
+}, Z = k(
+  ({ children: t, isCollapsed: e = !1, className: r = "", tabs: o = [], currentTabName: n }, i) => {
+    const s = g(null), { registerPrimarySidebar: c } = S(), l = D((d) => {
+      s.current = d, typeof i == "function" ? i(d) : i && (i.current = d);
     }, [i]);
-    return T(() => {
-      s.current && d(s);
-    }, [d]), ue(s, e, !1), /* @__PURE__ */ a.jsxs("div", { className: u(
+    return N(() => {
+      s.current && c(s);
+    }, [c]), U(s, e, !1), /* @__PURE__ */ a.jsxs("div", { className: u(
       "flex"
     ), children: [
-      r.length > 0 && /* @__PURE__ */ a.jsx(
-        pe,
+      o.length > 0 && /* @__PURE__ */ a.jsx(
+        X,
         {
-          tabs: r,
+          tabs: o,
           activeColor: "var(--neutral-900)",
           currentTabName: n
         }
@@ -750,27 +573,27 @@ const We = (t) => {
         {
           ref: l,
           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}`,
+          ${e ? "w-16" : "w-64"} ${r}`,
           children: t
         }
       )
     ] });
   }
-), E = M(
-  (t, e) => /* @__PURE__ */ a.jsx(ce, { children: /* @__PURE__ */ a.jsx(xe, { ...t, ref: e }) })
+), j = k(
+  (t, e) => /* @__PURE__ */ a.jsx(M, { children: /* @__PURE__ */ a.jsx(Z, { ...t, ref: e }) })
 );
-E.displayName = "SidebarRoot";
-const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.jsx(
+j.displayName = "SidebarRoot";
+const J = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.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(R.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(R.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
+    children: t ? /* @__PURE__ */ a.jsx(h.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(h.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
   }
-) }), be = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), ge = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("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" }) }), ve = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), ye = ({ className: t, size: e = "auto" }) => {
-  const o = () => {
+) }), K = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), Q = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("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" }) }), Y = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), ee = ({ className: t, size: e = "auto" }) => {
+  const r = () => {
     switch (e) {
       case "auto":
         return "flex-grow";
@@ -782,29 +605,29 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
         return "h-8 w-8";
     }
   };
-  return /* @__PURE__ */ a.jsx("div", { className: u(o(), t) });
-}, we = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), Oe = Object.assign(E, {
-  Root: E,
-  CollapseButton: he,
-  Header: be,
-  Divider: ge,
-  Content: ve,
-  Spacer: ye,
-  Footer: we
-}), Pe = ({
+  return /* @__PURE__ */ a.jsx("div", { className: u(r(), t) });
+}, te = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), me = Object.assign(j, {
+  Root: j,
+  CollapseButton: J,
+  Header: K,
+  Divider: Q,
+  Content: Y,
+  Spacer: ee,
+  Footer: te
+}), pe = ({
   children: t,
   icon: e,
-  label: o,
-  href: r,
+  label: r,
+  href: o,
   onClick: n,
   isActive: i = !1,
   className: s
 }) => {
-  const d = r ? "a" : "button";
+  const c = o ? "a" : "button";
   return /* @__PURE__ */ a.jsxs(
-    d,
+    c,
     {
-      href: r,
+      href: o,
       onClick: n,
       className: u(
         "nav-link-item",
@@ -816,26 +639,26 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
       ),
       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 }),
+        r && /* @__PURE__ */ a.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: r }),
         t
       ]
     }
   );
-}, G = ({
+}, L = ({
   count: t,
   maxCount: e = 9,
-  className: o = "",
-  size: r = "medium",
+  className: r = "",
+  size: o = "medium",
   variant: n = "primary",
   showZero: i = !1
 }) => {
-  const s = t, d = s > e ? `+${e}` : s;
+  const s = t, c = s > e ? `+${e}` : s;
   if (s === 0 && !i) return null;
   const l = {
     small: "w-4.5 h-4.5 text-xs ",
     medium: "w-5 h-5 text-xs",
     large: "w-6 h-6 text-sm"
-  }, f = {
+  }, d = {
     primary: "bg-primary-default-default text-neutral-strong-default",
     secondary: "bg-neutral-medium-default text-neutral-strong-default",
     success: "bg-green-500 text-white",
@@ -844,18 +667,18 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
   };
   return /* @__PURE__ */ a.jsx("div", { className: u(
     "rounded-full flex items-center justify-center font-medium ",
-    l[r],
-    f[n],
-    o
-  ), children: /* @__PURE__ */ a.jsx("span", { children: d }) });
-}, Ee = ({
+    l[o],
+    d[n],
+    r
+  ), children: /* @__PURE__ */ a.jsx("span", { children: c }) });
+}, xe = ({
   linkActions: t,
   onClick: e,
-  activeAction: o
-}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
-  const { isView: i = !1, actionName: s, title: d, icon: l, count: f, viewAccess: c } = r || {}, x = (typeof i == "function" ? i() : i !== !1) && (!c || c()), p = o === s;
+  activeAction: r
+}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((o, n) => {
+  const { isView: i = !1, actionName: s, title: c, icon: l, count: d, viewAccess: f } = o || {}, x = (typeof i == "function" ? i() : i !== !1) && (!f || f()), p = r === s;
   return x && /* @__PURE__ */ a.jsx(
-    g.div,
+    b.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -878,8 +701,8 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
             p ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ a.jsx($, { mode: "wait", children: p && /* @__PURE__ */ a.jsx(
-              g.div,
+            /* @__PURE__ */ a.jsx(B, { mode: "wait", children: p && /* @__PURE__ */ a.jsx(
+              b.div,
               {
                 layoutId: "nav-active-bg",
                 className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -894,7 +717,7 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
               }
             ) }),
             /* @__PURE__ */ a.jsxs(
-              g.div,
+              b.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
                 animate: {
@@ -907,7 +730,7 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
                 children: [
                   /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ a.jsx(
-                      g.div,
+                      b.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                         animate: {
@@ -926,9 +749,9 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
                         }) : null
                       }
                     ),
-                    /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: d })
+                    /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: c })
                   ] }),
-                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: f && f >= 1 ? /* @__PURE__ */ a.jsx(G, { count: f, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: d && d >= 1 ? /* @__PURE__ */ a.jsx(L, { count: d, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -938,16 +761,16 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     },
     n
   );
-}) }), De = ({
+}) }), be = ({
   links: t,
   isLinkActive: e,
-  onLinkClick: o
-}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
-  const { isView: i = !1, viewAccess: s, path: d, title: l, icon: f, count: c, relatedPaths: x } = r, p = (typeof i == "function" ? i() : i !== !1) && (!s || s()), b = e(d) || (x?.some(
-    (I) => e(I)
+  onLinkClick: r
+}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((o, n) => {
+  const { isView: i = !1, viewAccess: s, path: c, title: l, icon: d, count: f, relatedPaths: x } = o, p = (typeof i == "function" ? i() : i !== !1) && (!s || s()), v = e(c) || (x?.some(
+    (A) => e(A)
   ) ?? !1);
   return p && /* @__PURE__ */ a.jsx(
-    g.div,
+    b.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -961,17 +784,17 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
         "button",
         {
           onClick: () => {
-            o?.(d);
+            r?.(c);
           },
           className: u(
             "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",
-            b ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+            v ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ a.jsx($, { mode: "wait", children: b && /* @__PURE__ */ a.jsx(
-              g.div,
+            /* @__PURE__ */ a.jsx(B, { mode: "wait", children: v && /* @__PURE__ */ a.jsx(
+              b.div,
               {
                 layoutId: "nav-active-bg",
                 className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -986,7 +809,7 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
               }
             ) }),
             /* @__PURE__ */ a.jsxs(
-              g.div,
+              b.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
                 animate: {
@@ -999,28 +822,28 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
                 children: [
                   /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ a.jsx(
-                      g.div,
+                      b.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                         animate: {
-                          scale: b ? 1.05 : 1
+                          scale: v ? 1.05 : 1
                         },
                         transition: {
                           duration: 0.25,
                           ease: "easeOut"
                         },
-                        children: typeof f == "function" ? f({
+                        children: typeof d == "function" ? d({
                           size: 24,
                           className: u(
                             "nav-icon transition-colors duration-250 ease-out",
-                            b ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
+                            v ? "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: l })
                   ] }),
-                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: c && c ? /* @__PURE__ */ a.jsx(G, { count: c, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: f && f ? /* @__PURE__ */ a.jsx(L, { count: f, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -1030,18 +853,18 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     },
     n
   );
-}) }), qe = ({
+}) }), ve = ({
   isActiveModalNotification: t,
   setIsActiveModalNotification: e
 }) => ({ handleNotificationClick: () => {
   e(!0);
-}, isActiveModalNotification: t }), ze = (t) => {
-  const e = N(null);
+}, isActiveModalNotification: t }), ge = (t) => {
+  const e = g(null);
   return {
     isCollapsed: t,
     navbarRef: e
   };
-}, He = ({
+}, ye = ({
   isCollapsed: t,
   onToggle: e
 }) => /* @__PURE__ */ a.jsx("div", { className: "", children: /* @__PURE__ */ a.jsx(
@@ -1051,9 +874,9 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     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(R.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(R.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
+    children: t ? /* @__PURE__ */ a.jsx(h.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(h.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
   }
-) }), _e = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
+) }), he = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
   "img",
   {
     src: t,
@@ -1061,106 +884,108 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     alt: e ?? ""
   }
 ) });
-function Me({
+function we({
   onFilesAccepted: t,
   onFilesRejected: e,
-  ...o
+  ...r
 }) {
-  const r = _.useCallback(
+  const o = P.useCallback(
     (i, s) => {
       i.length > 0 && t?.(i), s.length > 0 && e?.(s);
     },
     [t, e]
-  ), n = re({
-    onDrop: r,
-    ...o
+  ), n = E({
+    onDrop: o,
+    ...r
   });
   return {
     ...n,
     hasErrors: n.fileRejections.length > 0
   };
 }
-const $e = (t, e = !0) => {
-  const o = N(null);
-  return T(() => {
+const je = (t, e = !0) => {
+  const r = g(null);
+  return N(() => {
     if (!e) return;
-    const r = (n) => {
-      o.current && !o.current.contains(n.target) && t();
+    const o = (n) => {
+      r.current && !r.current.contains(n.target) && t();
     };
-    return document.addEventListener("mousedown", r, {
+    return document.addEventListener("mousedown", o, {
       capture: !0
-    }), document.addEventListener("touchstart", r, {
+    }), document.addEventListener("touchstart", o, {
       capture: !0
     }), () => {
-      document.removeEventListener("mousedown", r, {
+      document.removeEventListener("mousedown", o, {
         capture: !0
-      }), document.removeEventListener("touchstart", r, {
+      }), document.removeEventListener("touchstart", o, {
         capture: !0
       });
     };
-  }, [t, e]), o;
+  }, [t, e]), r;
 };
 export {
-  Ve as Avatar,
-  G as Badge,
-  Xe as Button,
-  Je as CardProfile,
-  Ke as ChangueAccount,
-  Ye as CheckBox,
-  tt as CheckboxFormik,
-  _e as CompanyLogo,
-  Mt as DatePicker,
-  rt as DialogModal,
-  it as DrawerDesktop,
-  ct as DrawerMobile,
-  pa as DropZone,
-  ft as Header,
-  R as Icons,
-  pt as Input,
-  ht as InputFormik,
-  gt as InputMultiple,
-  sa as LayoutGeneric,
-  yt as Logo,
-  jt as Menu,
-  Ee as NavBarActions,
-  He as NavbarCollapseButton,
-  De as NavbarLinks,
-  Pe as NavigationLink,
-  ua as OtpInput,
-  Ct as Pagination,
-  kt as ProfilePictureUpload,
-  Rt as ProgressBar,
-  Le as SecondaryBar,
-  We as SegmentedButton,
-  Tt as Select,
-  Lt as SelectFormik,
-  Oe as Sidebar,
-  ce as SidebarProvider,
-  la as SidebarRefProvider,
-  na as Skeleton,
-  Ot as Spinner,
-  Et as Steps,
-  qt as SwipeContainer,
-  Ht as Switch,
-  Yt as TabLinks,
-  Ft as Table,
-  Ut as TableBody,
-  Vt as TableCaption,
-  Gt as TableCell,
-  Xt as TableFooter,
-  Zt as TableHead,
-  Jt as TableHeader,
-  Kt as TableRow,
-  ta as TextArea,
-  ra as Tooltip,
-  qe as useActionsNavbar,
-  $e as useClickOutside,
-  ot as useDialogControl,
-  st as useDrawerDesktop,
-  ut as useDrawerMobile,
-  Me as useFileDropzone,
-  fa as useIsMobile,
-  ze as useNavbarCollapse,
-  Ae as useSidebar,
-  F as useSidebarContext
+  Se as Avatar,
+  L as Badge,
+  Ie as Button,
+  Re as CardProfile,
+  Le as ChangueAccount,
+  Pe as CheckBox,
+  Te as CheckboxFormik,
+  he as CompanyLogo,
+  wt as DatePicker,
+  De as DialogModal,
+  He as DrawerDesktop,
+  Fe as DrawerMobile,
+  Yt as DropZone,
+  Ge as Header,
+  h as Icons,
+  _t as Image,
+  Gt as ImageGallery,
+  _e as Input,
+  Ze as InputFormik,
+  Ke as InputMultiple,
+  Ft as LayoutGeneric,
+  Ye as Logo,
+  tt as Menu,
+  xe as NavBarActions,
+  ye as NavbarCollapseButton,
+  be as NavbarLinks,
+  pe as NavigationLink,
+  Zt as OtpInput,
+  rt as Pagination,
+  nt as ProfilePictureUpload,
+  st as ProgressBar,
+  de as SecondaryBar,
+  Wt as SegmentedButton,
+  ct as Select,
+  dt as SelectFormik,
+  me as Sidebar,
+  M as SidebarProvider,
+  Mt as SidebarRefProvider,
+  Ot as Skeleton,
+  mt as Spinner,
+  xt as Steps,
+  vt as SwipeContainer,
+  yt as Switch,
+  Pt as TabLinks,
+  Nt as Table,
+  Ct as TableBody,
+  St as TableCaption,
+  kt as TableCell,
+  It as TableFooter,
+  Bt as TableHead,
+  Rt as TableHeader,
+  Lt as TableRow,
+  Tt as TextArea,
+  Dt as Tooltip,
+  ve as useActionsNavbar,
+  je as useClickOutside,
+  Ee as useDialogControl,
+  We as useDrawerDesktop,
+  Me as useDrawerMobile,
+  we as useFileDropzone,
+  Kt as useIsMobile,
+  ge as useNavbarCollapse,
+  fe as useSidebar,
+  S as useSidebarContext
 };