prometeo-design-system 1.9.6 → 1.9.7

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

@@ -1,51 +1,232 @@
-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 { Switch as yt } from "./Switch.es.js";
-import { Table as vt, TableBody as ht, TableCaption as wt, TableCell as jt, TableFooter as Nt, TableHead as Ct, TableHeader as St, TableRow as kt } from "./Table.es.js";
-import { default as Bt } from "./TabLinks.es.js";
-import { default as Rt } from "./TextArea.es.js";
-import { default as Pt } from "./Tooltip.es.js";
-import { u as j } from "./LayoutGeneric-jDE96L2N.js";
-import { L as Tt, S as zt } from "./LayoutGeneric-jDE96L2N.js";
-import { j as r } from "./jsx-runtime-ByW6EXIE.js";
-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 u from "gsap";
-import { Icons as b } from "./Icons.es.js";
-import { motion as d, AnimatePresence as k } from "framer-motion";
-import { default as Et } from "./OtpInput.es.js";
-import { useDropzone as A } from "react-dropzone";
-import { useIsMobile as Ht } from "./useDevice.es.js";
-import { DropZone as $t } from "./DropZone.es.js";
-const E = (t, e) => {
-  S(
+import { default as Ue } from "./Avatar.es.js";
+import { default as Ge } from "./Button.es.js";
+import { C as Ze, a as Je } from "./CardProfile-BZajBGbO.js";
+import { default as Qe } from "./CheckBox.es.js";
+import { default as et } from "./CheckboxFormik.es.js";
+import { default as at, useDialogControl as ot } from "./DialogModal.es.js";
+import { default as nt, useDrawerDesktop as it } from "./DrawerDesktop.es.js";
+import { default as lt, useDrawerMobile as ct } from "./DrawerMobile.es.js";
+import { default as dt } from "./Header.es.js";
+import { default as mt } from "./Input.es.js";
+import { default as xt } from "./InputFormik.es.js";
+import { InputMultiple as bt } from "./InputMultiple.es.js";
+import { default as yt } from "./Logo.es.js";
+import { Menu as wt } from "./Menu.es.js";
+import { default as Nt } from "./Pagination.es.js";
+import { ProfilePictureUpload as St } from "./ProfilePictureUpload.es.js";
+import { default as It } from "./ProgressBar.es.js";
+import { default as Bt } from "./Select.es.js";
+import { default as Lt } from "./SelectFormik.es.js";
+import { default as Tt } from "./Spinner.es.js";
+import { Steps as At } from "./Steps.es.js";
+import { default as Dt } from "./SwipeContainer.es.js";
+import { Switch as zt } from "./Switch.es.js";
+import { Table as _t, TableBody as Mt, TableCaption as $t, TableCell as Ft, TableFooter as Ut, TableHead as Vt, TableHeader as Gt, TableRow as Xt } from "./Table.es.js";
+import { default as Jt } from "./TabLinks.es.js";
+import { default as Qt } from "./TextArea.es.js";
+import { default as ea } from "./Tooltip.es.js";
+import { Skeleton as aa } from "./Skeleton.es.js";
+import { j as a } from "./jsx-runtime-ByW6EXIE.js";
+import { c as u } from "./cn-B6yFEsav.js";
+import _, { useState as I, useMemo as z, useEffect as E, useRef as S, 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-jDE96L2N.js";
+import { L as ra, S as na } from "./LayoutGeneric-jDE96L2N.js";
+import { useGSAP as U } from "@gsap/react";
+import h from "gsap";
+import { Icons as R } from "./Icons.es.js";
+import { default as sa } from "./OtpInput.es.js";
+import { useDropzone as oe } from "react-dropzone";
+import { useIsMobile as ca } from "./useDevice.es.js";
+import { DropZone as da } from "./DropZone.es.js";
+const We = (t) => {
+  const [e, n] = I({}), { size: o = "medium", color: r = "default", options: i, value: l, name: c, onChange: x, icon: m, allowExpand: s = !1, disabled: p = !1 } = t, f = Math.max(i.findIndex((d) => d.value === l), 0), b = i.length, k = 9, W = 26, w = {
+    small: 120,
+    medium: 120,
+    large: 120
+  }, y = {
+    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" }
+  }, N = {
+    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((d) => d.value === l) ?? i[0], L = q.label.length * k + D * 2 + W, O = () => z(() => Object.values(e).reduce((v, j) => v + j, 0) + W, [e]), T = {
+    small: s ? O() : (b - 1) * y.small + w.small,
+    medium: s ? O() : (b - 1) * y.medium + w.medium,
+    large: s ? O() : (b - 1) * y.large + w.large
+  };
+  E(() => {
+    if (!s) return;
+    let d = {};
+    i.forEach((v, j) => {
+      d[j] = v.label.length * k + D * 2;
+    }), n(d);
+  }, []);
+  const Z = z(() => s ? Object.values(e).reduce((d, v, j) => j < f ? d + v : d, 0) : Math.max(f * y[o] - 2, 0), [f]), J = () => {
+    if (p) return;
+    const d = f === i.length - 1 ? i[0] : i[f + 1];
+    x?.(c, d.value);
+  }, C = p ? "disabled" : r;
+  return /* @__PURE__ */ a.jsxs(
+    "button",
+    {
+      name: c,
+      type: "button",
+      id: "segmented-button-container",
+      style: {
+        width: T[o],
+        minWidth: T[o],
+        maxWidth: T[o]
+      },
+      className: u(
+        X[o].container,
+        N[C].container,
+        "border-[1px]",
+        !p && "cursor-pointer",
+        "relative"
+      ),
+      children: [
+        /* @__PURE__ */ a.jsxs(
+          g.div,
+          {
+            id: "segmented-button-switcher",
+            animate: {
+              left: `${Z}px`,
+              width: s ? L : w[o],
+              minWidth: s ? L : w[o],
+              maxWidth: s ? L : w[o]
+            },
+            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",
+              N[C].switch
+            ),
+            onClick: () => {
+              !p && J();
+            },
+            children: [
+              m && _.cloneElement(m, { className: u(
+                "w-6 h-6 text-neutral-weak-default min-w-6 min-h-6",
+                N[C].icon
+              ) }),
+              /* @__PURE__ */ a.jsx(
+                "p",
+                {
+                  className: u(
+                    "prometeo-fonts-label-large ",
+                    " overflow-hidden overflow-ellipsis text-nowrap ",
+                    N[C].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((d, v) => {
+              const j = d.value === (l || i[0].value), K = s ? e[v] + W : w[o], Q = s ? e[v] : y[o], P = j ? K : Q;
+              return /* @__PURE__ */ a.jsx(
+                g.span,
+                {
+                  id: "segmented-button-option",
+                  onClick: () => {
+                    !p && x?.(c, d.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 ",
+                    !p && "cursor-pointer"
+                  ),
+                  "aria-label": d.label,
+                  children: /* @__PURE__ */ a.jsx(
+                    "p",
+                    {
+                      style: {
+                        width: s ? "max-content" : y[o],
+                        minWidth: s ? "max-content" : y[o],
+                        maxWidth: s ? "max-content" : y[o]
+                      },
+                      className: u(
+                        "px-3 place-content-center overflow-hidden text-ellipsis text-wrap prometeo-fonts-label-large  h-full",
+                        N[C].option
+                      ),
+                      children: d.label
+                    }
+                  )
+                },
+                d.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}, re = (t, e) => {
+  U(
     () => {
       if (!t.current) return;
-      const o = t.current, a = document.querySelector('[data-main-content="true"]');
+      const n = t.current, o = document.querySelector('[data-main-content="true"]');
       if (e) {
-        u.fromTo(
-          o,
+        h.fromTo(
+          n,
           {
             width: "0rem",
             opacity: 0
@@ -56,14 +237,14 @@ const E = (t, e) => {
             duration: 0.4,
             ease: "power2.out"
           }
-        ), a && u.to(a, {
-          marginLeft: o.offsetWidth + "px",
+        ), o && h.to(o, {
+          marginLeft: n.offsetWidth + "px",
           duration: 0.4,
           ease: "power2.out"
         });
-        const n = o.querySelectorAll(".secondary-bar-content > *");
-        n.length > 0 && u.fromTo(
-          n,
+        const r = n.querySelectorAll(".secondary-bar-content > *");
+        r.length > 0 && h.fromTo(
+          r,
           {
             y: 20,
             opacity: 0
@@ -78,12 +259,12 @@ const E = (t, e) => {
           }
         );
       } else
-        u.to(o, {
+        h.to(n, {
           width: "0rem",
           opacity: 0,
           duration: 0.3,
           ease: "power2.in"
-        }), a && u.to(a, {
+        }), o && h.to(o, {
           marginLeft: "0px",
           duration: 0.3,
           ease: "power2.in"
@@ -91,104 +272,104 @@ const E = (t, e) => {
     },
     { scope: t, dependencies: [e] }
   );
-}, w = ({
+}, H = ({
   children: t,
   isOpen: e = !1,
-  className: o = "",
-  width: a = "w-96",
-  action: n,
+  className: n = "",
+  width: o = "w-96",
+  action: r,
   primarySidebarCollapsed: i,
-  onClose: s
+  onClose: l
 }) => {
-  const c = p(null), [f, m] = v({ left: 0, width: 0 }), { primarySidebarRef: x } = j();
-  return P(() => {
-    if (x?.current) {
-      const g = x.current.getBoundingClientRect();
+  const c = S(null), [x, m] = I({ left: 0, width: 0 }), { primarySidebarRef: s } = F();
+  return Y(() => {
+    if (s?.current) {
+      const p = s.current.getBoundingClientRect();
       m({
-        left: g.width,
-        width: g.width
+        left: p.width,
+        width: p.width
       });
     }
-  }, [x, e, i]), E(c, e), /* @__PURE__ */ r.jsx(r.Fragment, { children: e && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    /* @__PURE__ */ r.jsx(
+  }, [s, e, i]), re(c, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    /* @__PURE__ */ a.jsx(
       "div",
       {
         className: "fixed inset-0 bg-black/95 z-20",
         style: {
-          left: f.left
+          left: x.left
         },
-        onClick: s
+        onClick: l
       }
     ),
-    /* @__PURE__ */ r.jsx(
+    /* @__PURE__ */ a.jsx(
       "div",
       {
         ref: c,
-        className: l(
+        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",
-          a,
-          o
+          o,
+          n
         ),
         style: {
-          left: f.left
+          left: x.left
         },
-        "data-action": n,
-        children: /* @__PURE__ */ r.jsx("div", { className: "secondary-bar-content", children: t })
+        "data-action": r,
+        children: /* @__PURE__ */ a.jsx("div", { className: "secondary-bar-content", children: t })
       }
     )
   ] }) });
-}, 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: O,
-  Content: H,
-  Footer: W,
-  Spacer: $
-}), I = D(
+}, 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(
   void 0
-), ce = () => {
-  const t = T(I);
+), Oe = () => {
+  const t = te(V);
   if (!t)
     throw new Error("useSidebar must be used within a Sidebar.Root");
   return t;
-}, F = ({
+}, ce = ({
   children: t
 }) => {
-  const [e, o] = v(!1), [a, n] = v(!1), i = p(null), s = () => {
-    o(!1), n(!1);
+  const [e, n] = I(!1), [o, r] = I(!1), i = S(null), l = () => {
+    n(!1), r(!1);
   }, c = () => {
-    o(!0), n(!1);
-  }, L = {
+    n(!0), r(!1);
+  }, f = {
     isCollapsed: e,
-    setIsCollapsed: o,
+    setIsCollapsed: n,
     navbarRef: i,
     toggleCollapse: () => {
-      e ? s() : c();
+      e ? l() : c();
     },
-    activeSecondaryBar: a ? "notifications" : null,
+    activeSecondaryBar: o ? "notifications" : null,
     openSecondaryBar: () => {
-      n(!0);
+      r(!0);
     },
     closeSecondaryBar: () => {
-      n(!1);
+      r(!1);
     },
     toggleSecondaryBar: () => {
-      n((R) => !R);
+      r((b) => !b);
     }
   };
-  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, M = (t, e, o) => {
-  S(
+  return /* @__PURE__ */ a.jsx(V.Provider, { value: f, children: t });
+}, B = (t, e, n, o) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, n, o) : t, ue = (t, e, n) => {
+  U(
     () => {
       if (!t.current) return;
-      const a = u.timeline({
+      const o = h.timeline({
         defaults: { duration: 0.7, ease: "power1.out" }
-      }), n = {
+      }), r = {
         navbar: t.current,
-        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"),
+        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"),
         logoutButton: document.querySelector(".logout-button"),
         logoutLabel: document.querySelector(".logout-label"),
         logoutIcon: document.querySelector(".logout-icon"),
@@ -216,14 +397,14 @@ const E = (t, e) => {
         ),
         // Secondary bar elements
         secondaryBar: document.querySelector(".secondary-bar"),
-        secondaryBarContent: u.utils.toArray(".secondary-bar *"),
-        badgeInLink: u.utils.toArray(".badge-in-link")
+        secondaryBarContent: h.utils.toArray(".secondary-bar *"),
+        badgeInLink: h.utils.toArray(".badge-in-link")
       };
-      e ? U(a, n) : V(a, n), n.secondaryBar && G(n.secondaryBar);
+      e ? de(o, r) : fe(o, r), r.secondaryBar && me(r.secondaryBar);
     },
-    { scope: t, dependencies: [e, o] }
+    { scope: t, dependencies: [e, n] }
   );
-}, U = (t, e) => {
+}, de = (t, e) => {
   t.to(e.navbar, {
     width: "5rem",
     duration: 0.2,
@@ -282,7 +463,7 @@ const E = (t, e) => {
       marginLeft: 0
     },
     0
-  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), y(
+  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), B(
     t,
     e.buttonCrevron,
     {
@@ -295,7 +476,7 @@ const E = (t, e) => {
       }
     },
     0
-  ), y(
+  ), B(
     t,
     e.buttonContentChevron,
     {
@@ -362,7 +543,7 @@ const E = (t, e) => {
     },
     -1
   );
-}, V = (t, e) => {
+}, fe = (t, e) => {
   t.to(e.navbar, { width: "20rem" }, -1).to(
     e.navLinkItems,
     {
@@ -372,7 +553,7 @@ const E = (t, e) => {
       justifyContent: "flex-start"
     },
     -1
-  ), y(
+  ), B(
     t,
     e.buttonCrevron,
     {
@@ -385,7 +566,7 @@ const E = (t, e) => {
       }
     },
     0
-  ), y(
+  ), B(
     t,
     e.buttonContentChevron,
     {
@@ -490,45 +671,45 @@ const E = (t, e) => {
     },
     0
   ).to(e.navIcons, { scale: 1 }, 0.3);
-}, G = (t, e) => {
-  u.to(t, {
+}, me = (t, e) => {
+  h.to(t, {
     x: "-100%",
     opacity: 0,
     duration: 0.3,
     ease: "power2.in"
   });
-}, _ = N(
-  ({ children: t, isCollapsed: e = !1, className: o = "" }, a) => {
-    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]), M(n, e, !1), /* @__PURE__ */ r.jsx(
+}, pe = M(
+  ({ children: t, isCollapsed: e = !1, className: n = "" }, o) => {
+    const r = S(null), { registerPrimarySidebar: i } = F(), l = ae((c) => {
+      r.current = c, typeof o == "function" ? o(c) : o && (o.current = c);
+    }, [o]);
+    return E(() => {
+      r.current && i(r);
+    }, [i]), ue(r, e, !1), /* @__PURE__ */ a.jsx(
       "div",
       {
-        ref: s,
+        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"} ${n}`,
         children: t
       }
     );
   }
-), h = N(
-  (t, e) => /* @__PURE__ */ r.jsx(F, { children: /* @__PURE__ */ r.jsx(_, { ...t, ref: e }) })
+), A = M(
+  (t, e) => /* @__PURE__ */ a.jsx(ce, { children: /* @__PURE__ */ a.jsx(pe, { ...t, ref: e }) })
 );
-h.displayName = "SidebarRoot";
-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(
+A.displayName = "SidebarRoot";
+const xe = ({ 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__ */ 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" })
+    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" })
   }
-) }), 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 = () => {
+) }), he = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), be = ({ 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" }) }), ge = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), ye = ({ className: t, size: e = "auto" }) => {
+  const n = () => {
     switch (e) {
       case "auto":
         return "flex-grow";
@@ -540,56 +721,56 @@ const X = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
         return "h-8 w-8";
     }
   };
-  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: X,
-  Header: Z,
-  Divider: J,
-  Content: K,
-  Spacer: Q,
-  Footer: Y
-}), fe = ({
+  return /* @__PURE__ */ a.jsx("div", { className: u(n(), t) });
+}, ve = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), Te = Object.assign(A, {
+  Root: A,
+  CollapseButton: xe,
+  Header: he,
+  Divider: be,
+  Content: ge,
+  Spacer: ye,
+  Footer: ve
+}), Pe = ({
   children: t,
   icon: e,
-  label: o,
-  href: a,
-  onClick: n,
+  label: n,
+  href: o,
+  onClick: r,
   isActive: i = !1,
-  className: s
+  className: l
 }) => {
-  const c = a ? "a" : "button";
-  return /* @__PURE__ */ r.jsxs(
+  const c = o ? "a" : "button";
+  return /* @__PURE__ */ a.jsxs(
     c,
     {
-      href: a,
-      onClick: n,
-      className: l(
+      href: o,
+      onClick: r,
+      className: u(
         "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",
-        s
+        l
       ),
       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 }) }),
-        o && /* @__PURE__ */ r.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: o }),
+        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 }) }),
+        n && /* @__PURE__ */ a.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: n }),
         t
       ]
     }
   );
-}, B = ({
+}, G = ({
   count: t,
   maxCount: e = 9,
-  className: o = "",
-  size: a = "medium",
-  variant: n = "primary",
+  className: n = "",
+  size: o = "medium",
+  variant: r = "primary",
   showZero: i = !1
 }) => {
-  const s = t, c = s > e ? `+${e}` : s;
-  if (s === 0 && !i) return null;
-  const f = {
+  const l = t, c = l > e ? `+${e}` : l;
+  if (l === 0 && !i) return null;
+  const x = {
     small: "w-4.5 h-4.5 text-xs ",
     medium: "w-5 h-5 text-xs",
     large: "w-6 h-6 text-sm"
@@ -600,133 +781,136 @@ const X = ({ 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: l(
+  return /* @__PURE__ */ a.jsx("div", { className: u(
     "rounded-full flex items-center justify-center font-medium ",
-    f[a],
-    m[n],
-    o
-  ), children: /* @__PURE__ */ r.jsx("span", { children: c }) });
-}, pe = ({
+    x[o],
+    m[r],
+    n
+  ), children: /* @__PURE__ */ a.jsx("span", { children: c }) });
+}, Ae = ({
   linkActions: t,
   onClick: e,
-  activeAction: o
-}) => /* @__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 },
-    animate: { opacity: 1 },
-    transition: {
-      duration: 0.4,
-      delay: n * 0.03,
-      ease: "easeOut"
-    },
-    className: "relative flex justify-center w-full items-center px-3",
-    children: /* @__PURE__ */ r.jsxs(
-      "button",
-      {
-        onClick: () => {
-          e?.(a.action);
-        },
-        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",
-          o === a.action ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
-        ),
-        children: [
-          /* @__PURE__ */ r.jsx(k, { mode: "wait", children: o === a.action && /* @__PURE__ */ r.jsx(
-            d.div,
-            {
-              layoutId: "nav-active-bg",
-              className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
-              initial: !1,
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: {
-                type: "tween",
-                duration: 0.25,
-                ease: "easeInOut"
+  activeAction: n
+}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((o, r) => {
+  const { isView: i = !1, actionName: l, title: c, icon: x, count: m, viewAccess: s } = o || {}, p = (typeof i == "function" ? i() : i !== !1) && (!s || s()), f = n === l;
+  return p && /* @__PURE__ */ a.jsx(
+    g.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: {
+        duration: 0.4,
+        delay: r * 0.03,
+        ease: "easeOut"
+      },
+      className: "relative flex justify-center w-full items-center px-3",
+      children: /* @__PURE__ */ a.jsxs(
+        "button",
+        {
+          onClick: () => {
+            e?.(l);
+          },
+          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",
+            f ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+          ),
+          children: [
+            /* @__PURE__ */ a.jsx($, { mode: "wait", children: f && /* @__PURE__ */ a.jsx(
+              g.div,
+              {
+                layoutId: "nav-active-bg",
+                className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
+                initial: !1,
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: {
+                  type: "tween",
+                  duration: 0.25,
+                  ease: "easeInOut"
+                }
               }
-            }
-          ) }),
-          /* @__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 === a.action, 0)
-              },
-              transition: {
-                duration: 0.25,
-                ease: "easeOut"
-              },
-              children: [
-                /* @__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 === a.action ? 1.05 : 1
-                      },
-                      transition: {
-                        duration: 0.25,
-                        ease: "easeOut"
-                      },
-                      children: typeof a.icon == "function" ? a.icon({
-                        size: 24,
-                        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"
-                        )
-                      }) : null
-                    }
-                  ),
-                  /* @__PURE__ */ r.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: a.title })
-                ] }),
-                /* @__PURE__ */ r.jsx("div", { className: "badge-in-link", children: a.count && a?.count >= 1 ? /* @__PURE__ */ r.jsx(B, { count: a.count, maxCount: 9, className: "" }) : "" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  },
-  n
-)) }), me = ({
+            ) }),
+            /* @__PURE__ */ a.jsxs(
+              g.div,
+              {
+                className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
+                animate: {
+                  x: 0
+                },
+                transition: {
+                  duration: 0.25,
+                  ease: "easeOut"
+                },
+                children: [
+                  /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ a.jsx(
+                      g.div,
+                      {
+                        className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
+                        animate: {
+                          scale: f ? 1.05 : 1
+                        },
+                        transition: {
+                          duration: 0.25,
+                          ease: "easeOut"
+                        },
+                        children: typeof x == "function" ? x({
+                          size: 24,
+                          className: u(
+                            "nav-icon transition-colors duration-250 ease-out",
+                            f ? "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: c })
+                  ] }),
+                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: m && m >= 1 ? /* @__PURE__ */ a.jsx(G, { count: m, maxCount: 9, className: "" }) : "" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    },
+    r
+  );
+}) }), Ee = ({
   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(
-    (s) => e(s)
+  onLinkClick: n
+}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((o, r) => {
+  const { isView: i = !1, viewAccess: l, path: c, title: x, icon: m, count: s, relatedPaths: p } = o, f = (typeof i == "function" ? i() : i !== !1) && (!l || l()), b = e(c) || (p?.some(
+    (k) => e(k)
   ) ?? !1);
-  return a.isView && a.viewAccess() && /* @__PURE__ */ r.jsx(
-    d.div,
+  return f && /* @__PURE__ */ a.jsx(
+    g.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
       transition: {
         duration: 0.4,
-        delay: n * 0.03,
+        delay: r * 0.03,
         ease: "easeOut"
       },
       className: "relative flex justify-center w-full items-center px-3",
-      children: /* @__PURE__ */ r.jsxs(
+      children: /* @__PURE__ */ a.jsxs(
         "button",
         {
           onClick: () => {
-            o?.(a.path);
+            n?.(c);
           },
-          className: l(
+          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",
-            i ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+            b ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ r.jsx(k, { mode: "wait", children: i && /* @__PURE__ */ r.jsx(
-              d.div,
+            /* @__PURE__ */ a.jsx($, { mode: "wait", children: b && /* @__PURE__ */ a.jsx(
+              g.div,
               {
                 layoutId: "nav-active-bg",
                 className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -740,8 +924,8 @@ const X = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
                 }
               }
             ) }),
-            /* @__PURE__ */ r.jsxs(
-              d.div,
+            /* @__PURE__ */ a.jsxs(
+              g.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
                 animate: {
@@ -752,30 +936,30 @@ const X = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
                   ease: "easeOut"
                 },
                 children: [
-                  /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ r.jsx(
-                      d.div,
+                  /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ a.jsx(
+                      g.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                         animate: {
-                          scale: i ? 1.05 : 1
+                          scale: b ? 1.05 : 1
                         },
                         transition: {
                           duration: 0.25,
                           ease: "easeOut"
                         },
-                        children: typeof a.icon == "function" ? a.icon({
+                        children: typeof m == "function" ? m({
                           size: 24,
-                          className: l(
+                          className: u(
                             "nav-icon transition-colors duration-250 ease-out",
-                            i ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
+                            b ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                           )
                         }) : null
                       }
                     ),
-                    /* @__PURE__ */ r.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: a.title })
+                    /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: x })
                   ] }),
-                  /* @__PURE__ */ r.jsx("div", { className: "badge-in-link", children: a.count && a.count ? /* @__PURE__ */ r.jsx(B, { count: a.count, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: s && s ? /* @__PURE__ */ a.jsx(G, { count: s, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -783,32 +967,32 @@ const X = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
         }
       )
     },
-    n
+    r
   );
-}) }), xe = ({
+}) }), De = ({
   isActiveModalNotification: t,
   setIsActiveModalNotification: e
 }) => ({ handleNotificationClick: () => {
   e(!0);
-}, isActiveModalNotification: t }), be = (t) => {
-  const e = p(null);
+}, isActiveModalNotification: t }), qe = (t) => {
+  const e = S(null);
   return {
     isCollapsed: t,
     navbarRef: e
   };
-}, ye = ({
+}, ze = ({
   isCollapsed: t,
   onToggle: e
-}) => /* @__PURE__ */ r.jsx("div", { className: "", children: /* @__PURE__ */ r.jsx(
+}) => /* @__PURE__ */ a.jsx("div", { className: "", 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__ */ 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" })
+    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" })
   }
-) }), 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(
+) }), 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,
@@ -816,103 +1000,105 @@ const X = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ r.jsx("di
     alt: e ?? ""
   }
 ) });
-function ve({
+function _e({
   onFilesAccepted: t,
   onFilesRejected: e,
-  ...o
+  ...n
 }) {
-  const a = q.useCallback(
-    (i, s) => {
-      i.length > 0 && t?.(i), s.length > 0 && e?.(s);
+  const o = _.useCallback(
+    (i, l) => {
+      i.length > 0 && t?.(i), l.length > 0 && e?.(l);
     },
     [t, e]
-  ), n = A({
-    onDrop: a,
-    ...o
+  ), r = oe({
+    onDrop: o,
+    ...n
   });
   return {
-    ...n,
-    hasErrors: n.fileRejections.length > 0
+    ...r,
+    hasErrors: r.fileRejections.length > 0
   };
 }
-const he = (t, e = !0) => {
-  const o = p(null);
-  return C(() => {
+const Me = (t, e = !0) => {
+  const n = S(null);
+  return E(() => {
     if (!e) return;
-    const a = (n) => {
-      o.current && !o.current.contains(n.target) && t();
+    const o = (r) => {
+      n.current && !n.current.contains(r.target) && t();
     };
-    return document.addEventListener("mousedown", a, {
+    return document.addEventListener("mousedown", o, {
       capture: !0
-    }), document.addEventListener("touchstart", a, {
+    }), document.addEventListener("touchstart", o, {
       capture: !0
     }), () => {
-      document.removeEventListener("mousedown", a, {
+      document.removeEventListener("mousedown", o, {
         capture: !0
-      }), document.removeEventListener("touchstart", a, {
+      }), document.removeEventListener("touchstart", o, {
         capture: !0
       });
     };
-  }, [t, e]), o;
+  }, [t, e]), n;
 };
 export {
-  Ne as Avatar,
-  B as Badge,
-  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,
-  $t as DropZone,
-  Me as Header,
-  b as Icons,
-  Ve as Input,
-  _e as InputFormik,
-  Ze as InputMultiple,
-  Tt as LayoutGeneric,
-  Ke as Logo,
-  Ye as Menu,
-  pe as NavBarActions,
-  ye as NavbarCollapseButton,
-  me as NavbarLinks,
-  fe as NavigationLink,
-  Et 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,
-  zt as SidebarRefProvider,
-  dt as Spinner,
-  pt as Steps,
-  xt as SwipeContainer,
-  yt as Switch,
-  Bt as TabLinks,
-  vt as Table,
-  ht as TableBody,
-  wt as TableCaption,
-  jt as TableCell,
-  Nt as TableFooter,
-  Ct as TableHead,
-  St as TableHeader,
-  kt as TableRow,
-  Rt as TextArea,
-  Pt as Tooltip,
-  xe as useActionsNavbar,
-  he as useClickOutside,
-  ze as useDialogControl,
-  Oe as useDrawerDesktop,
-  $e as useDrawerMobile,
-  ve as useFileDropzone,
-  Ht as useIsMobile,
-  be as useNavbarCollapse,
-  ce as useSidebar,
-  j as useSidebarContext
+  Ue as Avatar,
+  G as Badge,
+  Ge as Button,
+  Ze as CardProfile,
+  Je as ChangueAccount,
+  Qe as CheckBox,
+  et as CheckboxFormik,
+  He as CompanyLogo,
+  at as DialogModal,
+  nt as DrawerDesktop,
+  lt as DrawerMobile,
+  da as DropZone,
+  dt as Header,
+  R as Icons,
+  mt as Input,
+  xt as InputFormik,
+  bt as InputMultiple,
+  ra as LayoutGeneric,
+  yt as Logo,
+  wt as Menu,
+  Ae as NavBarActions,
+  ze as NavbarCollapseButton,
+  Ee as NavbarLinks,
+  Pe as NavigationLink,
+  sa as OtpInput,
+  Nt as Pagination,
+  St as ProfilePictureUpload,
+  It as ProgressBar,
+  Le as SecondaryBar,
+  We as SegmentedButton,
+  Bt as Select,
+  Lt as SelectFormik,
+  Te as Sidebar,
+  ce as SidebarProvider,
+  na as SidebarRefProvider,
+  aa as Skeleton,
+  Tt as Spinner,
+  At as Steps,
+  Dt as SwipeContainer,
+  zt as Switch,
+  Jt as TabLinks,
+  _t as Table,
+  Mt as TableBody,
+  $t as TableCaption,
+  Ft as TableCell,
+  Ut as TableFooter,
+  Vt as TableHead,
+  Gt as TableHeader,
+  Xt as TableRow,
+  Qt as TextArea,
+  ea as Tooltip,
+  De as useActionsNavbar,
+  Me as useClickOutside,
+  ot as useDialogControl,
+  it as useDrawerDesktop,
+  ct as useDrawerMobile,
+  _e as useFileDropzone,
+  ca as useIsMobile,
+  qe as useNavbarCollapse,
+  Oe as useSidebar,
+  F as useSidebarContext
 };