prometeo-design-system 1.6.5 → 1.6.6

package/dist/components/ProfilePictureUpload/ProfilePictureUpload.d.ts

@@ -1,4 +1,4 @@
-interface ProfilePictureUploadProps {
+export interface ProfilePictureUploadProps {
     imageUrl?: string;
     fallbackText?: string;
     onFileSelect?: (file: File) => void;
@@ -13,4 +13,3 @@ interface ProfilePictureUploadProps {
     onError?: (error: string) => void;
 }
 export declare function ProfilePictureUpload({ imageUrl, fallbackText, onFileSelect, onEditClick, onRemoveClick, size, className, disabled, showRemoveButton, acceptedTypes, maxFileSize, onError, }: ProfilePictureUploadProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { default as InputFormik } from './components/InputFormik/InputFormik';
 export { default as Logo } from './components/Logo/Logo';
 export { Menu } from './components/Menu/MenuComposable';
 export { default as Pagination } from './components/Pagination/Pagination';
+export { ProfilePictureUpload } from './components/ProfilePictureUpload/ProfilePictureUpload';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
 export { default as Select } from './components/Select/Select';
 export { default as SelectFormik } from './components/SelectFormik/SelectFormik';
@@ -57,6 +58,7 @@ export type { INavAction, INavLink, Role, RoleLevels, } from './components/Sideb
 export type { SidebarContextValue } from './components/Sidebar/hooks/useSidebarHook';
 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';

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

@@ -1,52 +1,252 @@
-import { default as ke } from "./Avatar.es.js";
-import { default as Be } from "./Button.es.js";
-import { C as Re, a as qe } from "./CardProfile-BZajBGbO.js";
-import { default as $e } 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 ze, useDrawerDesktop as We } from "./DrawerDesktop.es.js";
-import { default as Ye, useDrawerMobile as Me } from "./DrawerMobile.es.js";
-import { default as Ve } from "./Header.es.js";
-import { default as Ze } from "./Input.es.js";
-import { default as Je } from "./InputFormik.es.js";
-import { default as Qe } from "./Logo.es.js";
-import { Menu as et } from "./Menu.es.js";
-import { default as at } from "./Pagination.es.js";
-import { default as ot } from "./ProgressBar.es.js";
-import { default as st } from "./Select.es.js";
-import { default as lt } from "./SelectFormik.es.js";
-import { default as ut } from "./Spinner.es.js";
-import { j as a } from "./jsx-runtime-ByW6EXIE.js";
-import { c as u } from "./cn-B6yFEsav.js";
-import { motion as f, AnimatePresence as L } from "framer-motion";
-import { Icons as b } from "./Icons.es.js";
-import { default as ft } from "./SwipeContainer.es.js";
-import { default as pt } from "./TabLinks.es.js";
-import { Table as gt, TableBody as yt, TableCaption as bt, TableCell as ht, TableFooter as vt, TableHead as wt, TableHeader as jt, TableRow as Nt } from "./Table.es.js";
-import { default as St } from "./TextArea.es.js";
-import { default as It } from "./Tooltip.es.js";
-import { u as R } from "./LayoutGeneric-jDE96L2N.js";
-import { L as Lt, S as Rt } from "./LayoutGeneric-jDE96L2N.js";
-import { useRef as v, useState as S, useLayoutEffect as D, createContext as E, useContext as F, forwardRef as q, useCallback as z, useEffect as P } from "react";
-import { useGSAP as $ } from "@gsap/react";
+import M from "./Avatar.es.js";
+import { default as De } from "./Button.es.js";
+import { C as Fe, a as Me } from "./CardProfile-BZajBGbO.js";
+import { default as ze } from "./CheckBox.es.js";
+import { default as Ye } from "./CheckboxFormik.es.js";
+import { default as Ue, useDialogControl as Ve } from "./DialogModal.es.js";
+import { default as Ze, useDrawerDesktop as Je } from "./DrawerDesktop.es.js";
+import { default as Qe, useDrawerMobile as _e } from "./DrawerMobile.es.js";
+import { default as tt } from "./Header.es.js";
+import { default as rt } from "./Input.es.js";
+import { default as nt } from "./InputFormik.es.js";
+import { default as st } from "./Logo.es.js";
+import { Menu as ct } from "./Menu.es.js";
+import { default as dt } from "./Pagination.es.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { motion as c, AnimatePresence as $ } from "framer-motion";
+import { useRef as C, useState as k, useLayoutEffect as W, createContext as z, useContext as X, forwardRef as T, useCallback as Y, useEffect as A } from "react";
+import { default as mt } from "./ProgressBar.es.js";
+import { default as xt } from "./Select.es.js";
+import { default as gt } from "./SelectFormik.es.js";
+import { default as bt } from "./Spinner.es.js";
+import { c as f } from "./cn-B6yFEsav.js";
+import { Icons as N } from "./Icons.es.js";
+import { default as wt } from "./SwipeContainer.es.js";
+import { default as Nt } from "./TabLinks.es.js";
+import { Table as St, TableBody as kt, TableCaption as It, TableCell as Bt, TableFooter as Lt, TableHead as $t, TableHeader as Rt, TableRow as Pt } from "./Table.es.js";
+import { default as Tt } from "./TextArea.es.js";
+import { default as Ot } from "./Tooltip.es.js";
+import { u as O } from "./LayoutGeneric-jDE96L2N.js";
+import { L as Et, S as Ft } from "./LayoutGeneric-jDE96L2N.js";
+import { useGSAP as D } from "@gsap/react";
 import p from "gsap";
-import { default as Pt } from "./OtpInput.es.js";
-import { DropZone as At } from "./DropZone.es.js";
-const I = ({
-  index: t,
+import { default as Wt } from "./OtpInput.es.js";
+import { DropZone as Xt } from "./DropZone.es.js";
+const H = {
+  sm: "w-16 h-16",
+  md: "w-24 h-24",
+  lg: "w-32 h-32",
+  xl: "w-40 h-40"
+}, U = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8"
+}, V = {
+  sm: "w-6 h-6",
+  md: "w-7 h-7",
+  lg: "w-8 h-8",
+  xl: "w-10 h-10"
+}, G = {
+  sm: "-bottom-1 -right-0.5",
+  md: "-bottom-0.5 -right-0.5",
+  lg: "bottom-1 right-1",
+  xl: "bottom-3 right-2"
+}, R = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-7 h-7"
+}, Z = {
+  sm: "-top-0.5 -right-0.5",
+  md: "-top-1 -right-1",
+  lg: "-top-1 -right-0",
+  xl: "top-1 right-1"
+};
+function je({
+  imageUrl: a,
+  fallbackText: e = "S L",
+  onFileSelect: o,
+  onEditClick: r,
+  onRemoveClick: n,
+  size: i = "lg",
+  className: u,
+  disabled: s = !1,
+  showRemoveButton: m = !0,
+  acceptedTypes: h = "image/*",
+  maxFileSize: x = 5 * 1024 * 1024,
+  onError: g
+}) {
+  const v = C(null), [y, S] = k(!1), l = (w) => w.type.startsWith("image/") ? w.size > x ? (g?.(`La imagen debe ser menor a ${Math.round(x / 1024 / 1024)}MB`), !1) : !0 : (g?.("Por favor selecciona un archivo de imagen válido"), !1), d = (w) => {
+    const B = w.target.files?.[0];
+    B && (l(B) && o?.(B), w.target.value = "");
+  }, b = () => {
+    s || (r ? r() : v.current?.click());
+  }, j = (w) => {
+    w.stopPropagation(), !s && n?.();
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      onMouseEnter: () => S(!0),
+      onMouseLeave: () => S(!1),
+      className: `relative inline-block border-inherit ${u || ""}`,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          "input",
+          {
+            ref: v,
+            type: "file",
+            accept: h,
+            onChange: d,
+            className: "hidden",
+            disabled: s
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          c.div,
+          {
+            className: `
+                    ${H[i]} 
+                    rounded-full 
+                    overflow-hidden
+                    flex items-center justify-center
+                    relative
+                    ${s ? "opacity-50 cursor-not-allowed" : ""}
+                `,
+            children: /* @__PURE__ */ t.jsx(
+              M,
+              {
+                urlImage: a,
+                fallbackText: e,
+                sizeImage: i,
+                sizeFallback: i
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          c.button,
+          {
+            className: `
+                    absolute 
+                    ${G[i]}
+                    border-3
+                    border-inherit
+                    ${V[i]}
+                    rounded-lg 
+                    bg-primary-default-default 
+                    hover:bg-primary-default-hover
+                    transition-all duration-300
+                    flex 
+                    items-center 
+                    justify-center
+                    cursor-pointer
+                    ${s ? "opacity-50 cursor-not-allowed" : ""}
+               `,
+            onClick: b,
+            disabled: s,
+            whileTap: s ? {} : { scale: 0.95, transition: { duration: 0.2, ease: "easeInOut" } },
+            initial: { scale: 0, rotate: -180 },
+            animate: { scale: 1, rotate: 0 },
+            children: /* @__PURE__ */ t.jsx(
+              c.svg,
+              {
+                className: `${U[i]} text-white`,
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                animate: y && !s ? {
+                  x: [0, -1, 0, 1, -1, 0, 1],
+                  y: [0, 1, 0, 1, 0, 1, 1],
+                  rotate: [0, 5, -3, 8, -5, 3, 1],
+                  transition: {
+                    duration: 2,
+                    ease: "easeInOut"
+                  }
+                } : { x: 0, y: 0, rotate: 0 },
+                transition: {
+                  duration: 1.2,
+                  repeat: 0,
+                  ease: "easeInOut"
+                },
+                children: /* @__PURE__ */ t.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx($, { children: a && m && !s && /* @__PURE__ */ t.jsx(
+          c.button,
+          {
+            className: `
+                            absolute 
+                            ${Z[i]} 
+                            ${R[i]} 
+                            rounded-full 
+                            shadow-lg 
+                           bg-error-light
+                            flex 
+                            cursor-pointer
+                            items-center 
+                            justify-center
+                            ${s ? "opacity-50 cursor-not-allowed" : ""}
+                        `,
+            disabled: s,
+            onClick: j,
+            initial: { scale: 0, opacity: 0, rotate: -90 },
+            animate: {
+              scale: y ? 1 : 0.8,
+              opacity: y ? 1 : 0,
+              rotate: 0
+            },
+            exit: { scale: 0, opacity: 0, rotate: 90 },
+            whileTap: { scale: 0.9 },
+            transition: {
+              type: "spring",
+              stiffness: 300,
+              damping: 25
+            },
+            children: /* @__PURE__ */ t.jsx(
+              c.svg,
+              {
+                className: `${R[i]} text-white p-1`,
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                whileHover: { rotate: 90 },
+                transition: { duration: 0.2 },
+                children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+const P = ({
+  index: a,
   isHorizontal: e,
   currentStep: o
 }) => {
-  const r = t < o, n = t === o - 1;
-  return /* @__PURE__ */ a.jsxs("div", { className: `relative ${e ? "w-20 h-1" : "w-0.5 h-8"}`, children: [
-    /* @__PURE__ */ a.jsx(
+  const r = a < o, n = a === o - 1;
+  return /* @__PURE__ */ t.jsxs("div", { className: `relative ${e ? "w-20 h-1" : "w-0.5 h-8"}`, children: [
+    /* @__PURE__ */ t.jsx(
       "div",
       {
         className: "absolute inset-0 rounded-full bg-neutral-medium-default"
       }
     ),
-    /* @__PURE__ */ a.jsx(
-      f.div,
+    /* @__PURE__ */ t.jsx(
+      c.div,
       {
         className: "absolute inset-0 rounded-full bg-primary-default-default",
         initial: {
@@ -62,7 +262,7 @@ const I = ({
         transition: {
           duration: 0.2,
           ease: "easeInOut",
-          delay: t * 0.1
+          delay: a * 0.1
         },
         style: {
           originX: e ? 0 : 0.5,
@@ -70,8 +270,8 @@ const I = ({
         }
       }
     ),
-    n && /* @__PURE__ */ a.jsx(
-      f.div,
+    n && /* @__PURE__ */ t.jsx(
+      c.div,
       {
         className: "absolute inset-0 rounded-full bg-primary-default-default",
         initial: {
@@ -97,21 +297,21 @@ const I = ({
       }
     )
   ] });
-}, fe = ({
-  steps: t,
+}, Ne = ({
+  steps: a,
   currentStep: e,
   orientation: o = "horizontal",
   variant: r = "default",
   size: n = "md",
-  className: s = "",
-  onStepClick: l,
-  allowClickableSteps: d = !1
+  className: i = "",
+  onStepClick: u,
+  allowClickableSteps: s = !1
 }) => {
-  const m = o === "horizontal", g = (i) => ({
+  const m = o === "horizontal", h = (l) => ({
     sm: { right: "-40px", top: "16px" },
     md: { right: "-40px", top: "20px" },
     lg: { right: "-40px", top: "24px" }
-  })[i], x = {
+  })[l], x = {
     sm: {
       circle: "w-8 h-8 text-xs",
       title: "text-sm",
@@ -130,94 +330,94 @@ const I = ({
       description: "text-base",
       spacing: m ? "gap-4" : "gap-3"
     }
-  }, h = (i) => i < e ? "completed" : i === e ? "current" : "upcoming", w = (i) => {
-    const c = `${x[n].circle} rounded-full flex items-center justify-center font-medium`;
-    switch (i) {
+  }, g = (l) => l < e ? "completed" : l === e ? "current" : "upcoming", v = (l) => {
+    const d = `${x[n].circle} rounded-full flex items-center justify-center font-medium`;
+    switch (l) {
       case "completed":
-        return `${c} bg-primary-default-default text-neutral-strong-default shadow-lg`;
+        return `${d} bg-primary-default-default text-neutral-strong-default shadow-lg`;
       case "current":
-        return `${c} border-3 border-primary text-neutral-strong-default shadow-lg duration-900`;
+        return `${d} border-3 border-primary text-neutral-strong-default shadow-lg duration-900`;
       default:
-        return `${c} bg-neutral-medium-default text-neutral-medium-default`;
+        return `${d} bg-neutral-medium-default text-neutral-medium-default`;
     }
-  }, j = (i) => {
-    d && l && l(i);
-  }, O = m ? `flex items-center ${s}` : `space-y-0 ${s}`;
-  return /* @__PURE__ */ a.jsx("div", { className: O, children: t.map((i, c) => {
-    const y = h(c), N = d && l;
-    return /* @__PURE__ */ a.jsx("div", { className: "flex items-center", children: m ? /* @__PURE__ */ a.jsx("div", { className: "flex", children: /* @__PURE__ */ a.jsxs("div", { className: "w-40 flex flex-col items-center relative", children: [
-      /* @__PURE__ */ a.jsx(
-        f.div,
+  }, y = (l) => {
+    s && u && u(l);
+  }, S = m ? `flex items-center ${i}` : `space-y-0 ${i}`;
+  return /* @__PURE__ */ t.jsx("div", { className: S, children: a.map((l, d) => {
+    const b = g(d), j = s && u;
+    return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: m ? /* @__PURE__ */ t.jsx("div", { className: "flex", children: /* @__PURE__ */ t.jsxs("div", { className: "w-40 flex flex-col items-center relative", children: [
+      /* @__PURE__ */ t.jsx(
+        c.div,
         {
-          className: `${w(y)} ${N ? "cursor-pointer" : ""} relative z-10`,
+          className: `${v(b)} ${j ? "cursor-pointer" : ""} relative z-10`,
           initial: { scale: 0.8, opacity: 0 },
           animate: { scale: 1, opacity: 1 },
-          transition: { duration: 0.3, delay: c * 0.1 },
-          whileTap: N ? { scale: 0.95 } : {},
-          onClick: () => j(c),
-          children: r === "numbered" || !i.icon ? y === "completed" ? /* @__PURE__ */ a.jsx(f.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ a.jsx(b.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ a.jsx("span", { children: c + 1 }) : i.icon
+          transition: { duration: 0.3, delay: d * 0.1 },
+          whileTap: j ? { scale: 0.95 } : {},
+          onClick: () => y(d),
+          children: r === "numbered" || !l.icon ? b === "completed" ? /* @__PURE__ */ t.jsx(c.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ t.jsx(N.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ t.jsx("span", { children: d + 1 }) : l.icon
         }
       ),
-      c < t.length - 1 && /* @__PURE__ */ a.jsx(
+      d < a.length - 1 && /* @__PURE__ */ t.jsx(
         "div",
         {
           className: "absolute",
-          style: g(n),
-          children: /* @__PURE__ */ a.jsx(
-            I,
+          style: h(n),
+          children: /* @__PURE__ */ t.jsx(
+            P,
             {
-              index: c,
+              index: d,
               isHorizontal: m,
               currentStep: e
             }
           )
         }
       ),
-      r !== "minimal" && i.description && /* @__PURE__ */ a.jsx("p", { className: u(
+      r !== "minimal" && l.description && /* @__PURE__ */ t.jsx("p", { className: f(
         x[n].description,
         "text-gray-400 mt-2 text-center max-w-full",
-        y === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"
-      ), children: i.description })
-    ] }) }) : /* @__PURE__ */ a.jsxs("div", { className: "relative flex w-36", children: [
-      /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col items-center w-full", children: [
-        /* @__PURE__ */ a.jsx(
-          f.div,
+        b === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"
+      ), children: l.description })
+    ] }) }) : /* @__PURE__ */ t.jsxs("div", { className: "relative flex w-36", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col items-center w-full", children: [
+        /* @__PURE__ */ t.jsx(
+          c.div,
           {
-            className: `${w(y)} ${N ? "cursor-pointer" : ""}`,
+            className: `${v(b)} ${j ? "cursor-pointer" : ""}`,
             initial: { scale: 0.8, opacity: 0 },
             animate: { scale: 1, opacity: 1 },
-            transition: { duration: 0.3, delay: c * 0.1 },
-            whileTap: N ? { scale: 0.95 } : {},
-            onClick: () => j(c),
-            children: r === "numbered" || !i.icon ? y === "completed" ? /* @__PURE__ */ a.jsx(f.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ a.jsx(b.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ a.jsx("span", { children: c + 1 }) : i.icon
+            transition: { duration: 0.3, delay: d * 0.1 },
+            whileTap: j ? { scale: 0.95 } : {},
+            onClick: () => y(d),
+            children: r === "numbered" || !l.icon ? b === "completed" ? /* @__PURE__ */ t.jsx(c.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ t.jsx(N.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ t.jsx("span", { children: d + 1 }) : l.icon
           }
         ),
-        c < t.length - 1 && /* @__PURE__ */ a.jsx(
-          I,
+        d < a.length - 1 && /* @__PURE__ */ t.jsx(
+          P,
           {
-            index: c,
+            index: d,
             isHorizontal: m,
             currentStep: e
           }
         )
       ] }),
-      r !== "minimal" && /* @__PURE__ */ a.jsx(
-        f.div,
+      r !== "minimal" && /* @__PURE__ */ t.jsx(
+        c.div,
         {
           className: `absolute -right-30 ml-4 top-3 gap-3 flex flex-col w-full ${x[n].spacing} flex  h-full`,
           initial: { opacity: 0, x: -10 },
           animate: { opacity: 1, x: 0 },
-          transition: { duration: 0.3, delay: c * 0.1 + 0.1 },
-          children: i.description && /* @__PURE__ */ a.jsx("p", { className: u(x[n].description, "text-gray-400", y === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"), children: i.description })
+          transition: { duration: 0.3, delay: d * 0.1 + 0.1 },
+          children: l.description && /* @__PURE__ */ t.jsx("p", { className: f(x[n].description, "text-gray-400", b === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"), children: l.description })
         }
       )
-    ] }) }, i.id);
+    ] }) }, l.id);
   }) });
-}, W = (t, e) => {
-  $(
+}, J = (a, e) => {
+  D(
     () => {
-      if (!t.current) return;
-      const o = t.current, r = document.querySelector('[data-main-content="true"]');
+      if (!a.current) return;
+      const o = a.current, r = document.querySelector('[data-main-content="true"]');
       if (e) {
         p.fromTo(
           o,
@@ -264,42 +464,42 @@ const I = ({
           ease: "power2.in"
         });
     },
-    { scope: t, dependencies: [e] }
+    { scope: a, dependencies: [e] }
   );
-}, B = ({
-  children: t,
+}, q = ({
+  children: a,
   isOpen: e = !1,
   className: o = "",
   width: r = "w-96",
   action: n,
-  primarySidebarCollapsed: s,
-  onClose: l
+  primarySidebarCollapsed: i,
+  onClose: u
 }) => {
-  const d = v(null), [m, g] = S({ left: 0, width: 0 }), { primarySidebarRef: x } = R();
-  return D(() => {
+  const s = C(null), [m, h] = k({ left: 0, width: 0 }), { primarySidebarRef: x } = O();
+  return W(() => {
     if (x?.current) {
-      const h = x.current.getBoundingClientRect();
-      g({
-        left: h.width,
-        width: h.width
+      const g = x.current.getBoundingClientRect();
+      h({
+        left: g.width,
+        width: g.width
       });
     }
-  }, [x, e, s]), W(d, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-    /* @__PURE__ */ a.jsx(
+  }, [x, e, i]), J(s, e), /* @__PURE__ */ t.jsx(t.Fragment, { children: e && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
       "div",
       {
         className: "fixed inset-0 bg-black/95 z-20",
         style: {
           left: m.left
         },
-        onClick: l
+        onClick: u
       }
     ),
-    /* @__PURE__ */ a.jsx(
+    /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: d,
-        className: u(
+        ref: s,
+        className: f(
           "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,
@@ -309,36 +509,36 @@ const I = ({
           left: m.left
         },
         "data-action": n,
-        children: /* @__PURE__ */ a.jsx("div", { className: "secondary-bar-content", children: t })
+        children: /* @__PURE__ */ t.jsx("div", { className: "secondary-bar-content", children: a })
       }
     )
   ] }) });
-}, X = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("h-16 ", e), children: t }), Y = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1 overflow-y-auto p-4", e), children: t }), M = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("p-4 border-t border-neutral-strong-default", e), children: t }), U = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1", t) }), me = Object.assign(B, {
-  Root: B,
-  Header: X,
-  Content: Y,
-  Footer: M,
-  Spacer: U
-}), A = E(
+}, K = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: f("h-16 ", e), children: a }), Q = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: f("flex-1 overflow-y-auto p-4", e), children: a }), _ = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: f("p-4 border-t border-neutral-strong-default", e), children: a }), ee = ({ className: a }) => /* @__PURE__ */ t.jsx("div", { className: f("flex-1", a) }), Ce = Object.assign(q, {
+  Root: q,
+  Header: K,
+  Content: Q,
+  Footer: _,
+  Spacer: ee
+}), E = z(
   void 0
-), pe = () => {
-  const t = F(A);
-  if (!t)
+), Se = () => {
+  const a = X(E);
+  if (!a)
     throw new Error("useSidebar must be used within a Sidebar.Root");
-  return t;
-}, V = ({
-  children: t
+  return a;
+}, te = ({
+  children: a
 }) => {
-  const [e, o] = S(!1), [r, n] = S(!1), s = v(null), l = () => {
+  const [e, o] = k(!1), [r, n] = k(!1), i = C(null), u = () => {
     o(!1), n(!1);
-  }, d = () => {
+  }, s = () => {
     o(!0), n(!1);
-  }, w = {
+  }, v = {
     isCollapsed: e,
     setIsCollapsed: o,
-    navbarRef: s,
+    navbarRef: i,
     toggleCollapse: () => {
-      e ? l() : d();
+      e ? u() : s();
     },
     activeSecondaryBar: r ? "notifications" : null,
     openSecondaryBar: () => {
@@ -348,18 +548,18 @@ const I = ({
       n(!1);
     },
     toggleSecondaryBar: () => {
-      n((j) => !j);
+      n((y) => !y);
     }
   };
-  return /* @__PURE__ */ a.jsx(A.Provider, { value: w, children: t });
-}, C = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, G = (t, e, o) => {
-  $(
+  return /* @__PURE__ */ t.jsx(E.Provider, { value: v, children: a });
+}, I = (a, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? a.to(e, o, r) : a, ae = (a, e, o) => {
+  D(
     () => {
-      if (!t.current) return;
+      if (!a.current) return;
       const r = p.timeline({
         defaults: { duration: 0.7, ease: "power1.out" }
       }), n = {
-        navbar: t.current,
+        navbar: a.current,
         navLabels: p.utils.toArray(".nav-label"),
         navIconWrappers: p.utils.toArray(".nav-icon-wrapper"),
         navIcons: p.utils.toArray(".nav-icon"),
@@ -394,12 +594,12 @@ const I = ({
         secondaryBarContent: p.utils.toArray(".secondary-bar *"),
         badgeInLink: p.utils.toArray(".badge-in-link")
       };
-      e ? Z(r, n) : H(r, n), n.secondaryBar && J(n.secondaryBar);
+      e ? re(r, n) : oe(r, n), n.secondaryBar && ne(n.secondaryBar);
     },
-    { scope: t, dependencies: [e, o] }
+    { scope: a, dependencies: [e, o] }
   );
-}, Z = (t, e) => {
-  t.to(e.navbar, {
+}, re = (a, e) => {
+  a.to(e.navbar, {
     width: "5rem",
     duration: 0.2,
     ease: "bounce.out"
@@ -457,8 +657,8 @@ const I = ({
       marginLeft: 0
     },
     0
-  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), C(
-    t,
+  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), I(
+    a,
     e.buttonCrevron,
     {
       width: 0,
@@ -470,8 +670,8 @@ const I = ({
       }
     },
     0
-  ), C(
-    t,
+  ), I(
+    a,
     e.buttonContentChevron,
     {
       display: "none"
@@ -537,8 +737,8 @@ const I = ({
     },
     -1
   );
-}, H = (t, e) => {
-  t.to(e.navbar, { width: "20rem" }, -1).to(
+}, oe = (a, e) => {
+  a.to(e.navbar, { width: "20rem" }, -1).to(
     e.navLinkItems,
     {
       borderRadius: "10px",
@@ -547,8 +747,8 @@ const I = ({
       justifyContent: "flex-start"
     },
     -1
-  ), C(
-    t,
+  ), I(
+    a,
     e.buttonCrevron,
     {
       width: "auto",
@@ -560,8 +760,8 @@ const I = ({
       }
     },
     0
-  ), C(
-    t,
+  ), I(
+    a,
     e.buttonContentChevron,
     {
       display: "flex"
@@ -665,44 +865,44 @@ const I = ({
     },
     0
   ).to(e.navIcons, { scale: 1 }, 0.3);
-}, J = (t, e) => {
-  p.to(t, {
+}, ne = (a, e) => {
+  p.to(a, {
     x: "-100%",
     opacity: 0,
     duration: 0.3,
     ease: "power2.in"
   });
-}, K = q(
-  ({ children: t, isCollapsed: e = !1, className: o = "" }, r) => {
-    const n = v(null), { registerPrimarySidebar: s } = R(), l = z((d) => {
-      n.current = d, typeof r == "function" ? r(d) : r && (r.current = d);
+}, ie = T(
+  ({ children: a, isCollapsed: e = !1, className: o = "" }, r) => {
+    const n = C(null), { registerPrimarySidebar: i } = O(), u = Y((s) => {
+      n.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
     }, [r]);
-    return P(() => {
-      n.current && s(n);
-    }, [s]), G(n, e, !1), /* @__PURE__ */ a.jsx(
+    return A(() => {
+      n.current && i(n);
+    }, [i]), ae(n, e, !1), /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: l,
+        ref: u,
         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
+        children: a
       }
     );
   }
-), k = q(
-  (t, e) => /* @__PURE__ */ a.jsx(V, { children: /* @__PURE__ */ a.jsx(K, { ...t, ref: e }) })
+), L = T(
+  (a, e) => /* @__PURE__ */ t.jsx(te, { children: /* @__PURE__ */ t.jsx(ie, { ...a, ref: e }) })
 );
-k.displayName = "SidebarRoot";
-const Q = ({ 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(
+L.displayName = "SidebarRoot";
+const se = ({ isCollapsed: a, onToggleCollapse: e }) => /* @__PURE__ */ t.jsx("div", { className: f("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", a && ""), children: /* @__PURE__ */ t.jsx(
   "button",
   {
     onClick: e,
-    title: t ? "Expandir Navbar" : "Contraer Navbar",
-    "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
+    title: a ? "Expandir Navbar" : "Contraer Navbar",
+    "aria-label": a ? "Expandir Navbar" : "Contraer Navbar",
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
-    children: t ? /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
+    children: a ? /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
   }
-) }), _ = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), ee = ({ 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" }) }), te = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), ae = ({ className: t, size: e = "auto" }) => {
+) }), le = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: `${e} sidebar-header`, children: a }), ce = ({ className: a }) => /* @__PURE__ */ t.jsx("div", { className: f("px-3 flex justify-center items-center w-full mb-4", a), children: /* @__PURE__ */ t.jsx("div", { className: "border-b border-neutral-strong-default border-1 w-full" }) }), ue = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: e, children: a }), de = ({ className: a, size: e = "auto" }) => {
   const o = () => {
     switch (e) {
       case "auto":
@@ -715,78 +915,78 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         return "h-8 w-8";
     }
   };
-  return /* @__PURE__ */ a.jsx("div", { className: u(o(), t) });
-}, re = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), xe = Object.assign(k, {
-  Root: k,
-  CollapseButton: Q,
-  Header: _,
-  Divider: ee,
-  Content: te,
-  Spacer: ae,
-  Footer: re
-}), ge = ({
-  children: t,
+  return /* @__PURE__ */ t.jsx("div", { className: f(o(), a) });
+}, fe = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: e, children: a }), ke = Object.assign(L, {
+  Root: L,
+  CollapseButton: se,
+  Header: le,
+  Divider: ce,
+  Content: ue,
+  Spacer: de,
+  Footer: fe
+}), Ie = ({
+  children: a,
   icon: e,
   label: o,
   href: r,
   onClick: n,
-  isActive: s = !1,
-  className: l
+  isActive: i = !1,
+  className: u
 }) => {
-  const d = r ? "a" : "button";
-  return /* @__PURE__ */ a.jsxs(
-    d,
+  const s = r ? "a" : "button";
+  return /* @__PURE__ */ t.jsxs(
+    s,
     {
       href: r,
       onClick: n,
-      className: u(
+      className: f(
         "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",
-        s && "bg-neutral-medium-default",
-        l
+        i && "bg-neutral-medium-default",
+        u
       ),
       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 }),
-        t
+        e && /* @__PURE__ */ t.jsx("div", { className: "nav-icon-wrapper mr-3 flex-shrink-0", children: /* @__PURE__ */ t.jsx("div", { className: "nav-icon flex items-center justify-center w-5 h-5", children: e }) }),
+        o && /* @__PURE__ */ t.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: o }),
+        a
       ]
     }
   );
-}, T = ({
-  count: t,
+}, F = ({
+  count: a,
   maxCount: e = 9,
   className: o = "",
   size: r = "medium",
   variant: n = "primary",
-  showZero: s = !1
+  showZero: i = !1
 }) => {
-  const l = t, d = l > e ? `+${e}` : l;
-  if (l === 0 && !s) return null;
+  const u = a, s = u > e ? `+${e}` : u;
+  if (u === 0 && !i) return null;
   const m = {
     small: "w-4.5 h-4.5 text-xs ",
     medium: "w-5 h-5 text-xs",
     large: "w-6 h-6 text-sm"
-  }, g = {
+  }, h = {
     primary: "bg-primary-default-default text-neutral-strong-default",
     secondary: "bg-neutral-medium-default text-neutral-strong-default",
     success: "bg-green-500 text-white",
     warning: "bg-yellow-500 text-black",
     danger: "bg-red-500 text-white"
   };
-  return /* @__PURE__ */ a.jsx("div", { className: u(
+  return /* @__PURE__ */ t.jsx("div", { className: f(
     "rounded-full flex items-center justify-center font-medium ",
     m[r],
-    g[n],
+    h[n],
     o
-  ), children: /* @__PURE__ */ a.jsx("span", { children: d }) });
-}, ye = ({
-  linkActions: t,
+  ), children: /* @__PURE__ */ t.jsx("span", { children: s }) });
+}, Be = ({
+  linkActions: a,
   onClick: e,
   activeAction: o
-}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
-  f.div,
+}) => /* @__PURE__ */ t.jsx("nav", { className: "flex flex-col gap-1", children: a?.map((r, n) => r.isView && r.viewAccess() && /* @__PURE__ */ t.jsx(
+  c.div,
   {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
@@ -796,21 +996,21 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
       ease: "easeOut"
     },
     className: "relative flex justify-center w-full items-center px-3",
-    children: /* @__PURE__ */ a.jsxs(
+    children: /* @__PURE__ */ t.jsxs(
       "button",
       {
         onClick: () => {
           e?.(r.action);
         },
-        className: u(
+        className: f(
           "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
           "transition-all duration-300 ease-out w-full",
           "group hover:bg-neutral-medium-selected",
           o === r.action ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
         ),
         children: [
-          /* @__PURE__ */ a.jsx(L, { mode: "wait", children: o === r.action && /* @__PURE__ */ a.jsx(
-            f.div,
+          /* @__PURE__ */ t.jsx($, { mode: "wait", children: o === r.action && /* @__PURE__ */ t.jsx(
+            c.div,
             {
               layoutId: "nav-active-bg",
               className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -824,8 +1024,8 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
               }
             }
           ) }),
-          /* @__PURE__ */ a.jsxs(
-            f.div,
+          /* @__PURE__ */ t.jsxs(
+            c.div,
             {
               className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
               animate: {
@@ -836,9 +1036,9 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                 ease: "easeOut"
               },
               children: [
-                /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ a.jsx(
-                    f.div,
+                /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ t.jsx(
+                    c.div,
                     {
                       className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                       animate: {
@@ -850,16 +1050,16 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                       },
                       children: typeof r.icon == "function" ? r.icon({
                         size: 24,
-                        className: u(
+                        className: f(
                           "nav-icon transition-colors duration-250 ease-out",
                           o === r.action ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                         )
                       }) : null
                     }
                   ),
-                  /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
+                  /* @__PURE__ */ t.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
                 ] }),
-                /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ a.jsx(T, { count: r.count, maxCount: 9, className: "" }) : "" })
+                /* @__PURE__ */ t.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ t.jsx(F, { count: r.count, maxCount: 9, className: "" }) : "" })
               ]
             }
           )
@@ -868,16 +1068,16 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
     )
   },
   n
-)) }), be = ({
-  links: t,
+)) }), Le = ({
+  links: a,
   isLinkActive: e,
   onLinkClick: o
-}) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
-  const s = e(r.path) || (r.relatedPaths?.some(
-    (l) => e(l)
+}) => /* @__PURE__ */ t.jsx("nav", { className: "flex flex-col gap-1", children: a?.map((r, n) => {
+  const i = e(r.path) || (r.relatedPaths?.some(
+    (u) => e(u)
   ) ?? !1);
-  return r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
-    f.div,
+  return r.isView && r.viewAccess() && /* @__PURE__ */ t.jsx(
+    c.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -887,21 +1087,21 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         ease: "easeOut"
       },
       className: "relative flex justify-center w-full items-center px-3",
-      children: /* @__PURE__ */ a.jsxs(
+      children: /* @__PURE__ */ t.jsxs(
         "button",
         {
           onClick: () => {
             o?.(r.path);
           },
-          className: u(
+          className: f(
             "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",
-            s ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+            i ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ a.jsx(L, { mode: "wait", children: s && /* @__PURE__ */ a.jsx(
-              f.div,
+            /* @__PURE__ */ t.jsx($, { mode: "wait", children: i && /* @__PURE__ */ t.jsx(
+              c.div,
               {
                 layoutId: "nav-active-bg",
                 className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -915,8 +1115,8 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                 }
               }
             ) }),
-            /* @__PURE__ */ a.jsxs(
-              f.div,
+            /* @__PURE__ */ t.jsxs(
+              c.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
                 animate: {
@@ -927,13 +1127,13 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                   ease: "easeOut"
                 },
                 children: [
-                  /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ a.jsx(
-                      f.div,
+                  /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ t.jsx(
+                      c.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                         animate: {
-                          scale: s ? 1.05 : 1
+                          scale: i ? 1.05 : 1
                         },
                         transition: {
                           duration: 0.25,
@@ -941,16 +1141,16 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                         },
                         children: typeof r.icon == "function" ? r.icon({
                           size: 24,
-                          className: u(
+                          className: f(
                             "nav-icon transition-colors duration-250 ease-out",
-                            s ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
+                            i ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                           )
                         }) : null
                       }
                     ),
-                    /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
+                    /* @__PURE__ */ t.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
                   ] }),
-                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ a.jsx(T, { count: r.count, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ t.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ t.jsx(F, { count: r.count, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -960,42 +1160,42 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
     },
     n
   );
-}) }), he = ({
-  isActiveModalNotification: t,
+}) }), $e = ({
+  isActiveModalNotification: a,
   setIsActiveModalNotification: e
 }) => ({ handleNotificationClick: () => {
   e(!0);
-}, isActiveModalNotification: t }), ve = (t) => {
-  const e = v(null);
+}, isActiveModalNotification: a }), Re = (a) => {
+  const e = C(null);
   return {
-    isCollapsed: t,
+    isCollapsed: a,
     navbarRef: e
   };
-}, we = ({
-  isCollapsed: t,
+}, Pe = ({
+  isCollapsed: a,
   onToggle: e
-}) => /* @__PURE__ */ a.jsx("div", { className: "", children: /* @__PURE__ */ a.jsx(
+}) => /* @__PURE__ */ t.jsx("div", { className: "", children: /* @__PURE__ */ t.jsx(
   "button",
   {
     onClick: e,
-    title: t ? "Expandir Navbar" : "Contraer Navbar",
-    "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
+    title: a ? "Expandir Navbar" : "Contraer Navbar",
+    "aria-label": a ? "Expandir Navbar" : "Contraer Navbar",
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
-    children: t ? /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
+    children: a ? /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
   }
-) }), je = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
+) }), qe = ({ logoUrl: a, companyName: e }) => /* @__PURE__ */ t.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ t.jsx(
   "img",
   {
-    src: t,
+    src: a,
     className: "h-2/3 rounded-full",
     alt: e ?? ""
   }
-) }), Ne = (t, e = !0) => {
-  const o = v(null);
-  return P(() => {
+) }), Te = (a, e = !0) => {
+  const o = C(null);
+  return A(() => {
     if (!e) return;
     const r = (n) => {
-      o.current && !o.current.contains(n.target) && t();
+      o.current && !o.current.contains(n.target) && a();
     };
     return document.addEventListener("mousedown", r, {
       capture: !0
@@ -1008,61 +1208,62 @@ const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         capture: !0
       });
     };
-  }, [t, e]), o;
+  }, [a, e]), o;
 };
 export {
-  ke as Avatar,
-  T as Badge,
-  Be as Button,
-  Re as CardProfile,
-  qe as ChangueAccount,
-  $e as CheckBox,
-  Te as CheckboxFormik,
-  je as CompanyLogo,
-  De as DialogModal,
-  ze as DrawerDesktop,
-  Ye as DrawerMobile,
-  At as DropZone,
-  Ve as Header,
-  b as Icons,
-  Ze as Input,
-  Je as InputFormik,
-  Lt as LayoutGeneric,
-  Qe as Logo,
-  et as Menu,
-  ye as NavBarActions,
-  we as NavbarCollapseButton,
-  be as NavbarLinks,
-  ge as NavigationLink,
-  Pt as OtpInput,
-  at as Pagination,
-  ot as ProgressBar,
-  me as SecondaryBar,
-  st as Select,
-  lt as SelectFormik,
-  xe as Sidebar,
-  V as SidebarProvider,
-  Rt as SidebarRefProvider,
-  ut as Spinner,
-  fe as Steps,
-  ft as SwipeContainer,
-  pt as TabLinks,
-  gt as Table,
-  yt as TableBody,
-  bt as TableCaption,
-  ht as TableCell,
-  vt as TableFooter,
-  wt as TableHead,
-  jt as TableHeader,
-  Nt as TableRow,
-  St as TextArea,
-  It as Tooltip,
-  he as useActionsNavbar,
-  Ne as useClickOutside,
-  Ee as useDialogControl,
-  We as useDrawerDesktop,
-  Me as useDrawerMobile,
-  ve as useNavbarCollapse,
-  pe as useSidebar,
-  R as useSidebarContext
+  M as Avatar,
+  F as Badge,
+  De as Button,
+  Fe as CardProfile,
+  Me as ChangueAccount,
+  ze as CheckBox,
+  Ye as CheckboxFormik,
+  qe as CompanyLogo,
+  Ue as DialogModal,
+  Ze as DrawerDesktop,
+  Qe as DrawerMobile,
+  Xt as DropZone,
+  tt as Header,
+  N as Icons,
+  rt as Input,
+  nt as InputFormik,
+  Et as LayoutGeneric,
+  st as Logo,
+  ct as Menu,
+  Be as NavBarActions,
+  Pe as NavbarCollapseButton,
+  Le as NavbarLinks,
+  Ie as NavigationLink,
+  Wt as OtpInput,
+  dt as Pagination,
+  je as ProfilePictureUpload,
+  mt as ProgressBar,
+  Ce as SecondaryBar,
+  xt as Select,
+  gt as SelectFormik,
+  ke as Sidebar,
+  te as SidebarProvider,
+  Ft as SidebarRefProvider,
+  bt as Spinner,
+  Ne as Steps,
+  wt as SwipeContainer,
+  Nt as TabLinks,
+  St as Table,
+  kt as TableBody,
+  It as TableCaption,
+  Bt as TableCell,
+  Lt as TableFooter,
+  $t as TableHead,
+  Rt as TableHeader,
+  Pt as TableRow,
+  Tt as TextArea,
+  Ot as Tooltip,
+  $e as useActionsNavbar,
+  Te as useClickOutside,
+  Ve as useDialogControl,
+  Je as useDrawerDesktop,
+  _e as useDrawerMobile,
+  Re as useNavbarCollapse,
+  Se as useSidebar,
+  O as useSidebarContext
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "1.6.5",
+  "version": "1.6.6",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -77,6 +77,10 @@
       "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"