prometeo-design-system 2.2.1 → 2.3.0

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

@@ -1,59 +1,59 @@
-import { default as Ve } from "./Avatar.es.js";
-import { B as Xe } from "./Button-DsbEyjth.js";
-import { C as Je, a as Ke } from "./CardProfile-BhFog7j5.js";
-import { default as Ye } from "./CheckBox.es.js";
-import { default as tt } from "./CheckboxFormik.es.js";
-import { default as rt, useDialogControl as ot } from "./DialogModal.es.js";
-import { default as it, useDrawerDesktop as st } from "./DrawerDesktop.es.js";
-import { default as ct, useDrawerMobile as ut } from "./DrawerMobile.es.js";
-import { default as ft } from "./Header.es.js";
-import { default as pt } from "./Input.es.js";
-import { default as ht } from "./InputFormik.es.js";
-import { InputMultiple as gt } from "./InputMultiple.es.js";
-import { default as yt } from "./Logo.es.js";
-import { Menu as jt } from "./Menu.es.js";
-import { default as Ct } from "./Pagination.es.js";
-import { ProfilePictureUpload as kt } from "./ProfilePictureUpload.es.js";
-import { default as Rt } from "./ProgressBar.es.js";
-import { default as Tt } from "./Select.es.js";
-import { default as Lt } from "./SelectFormik.es.js";
-import { default as Ot } from "./Spinner.es.js";
-import { Steps as Et } from "./Steps.es.js";
-import { default as qt } from "./SwipeContainer.es.js";
-import { Switch as Ht } from "./Switch.es.js";
-import { default as Mt } from "./DatePicker.es.js";
-import { Table as Ft, TableBody as Ut, TableCaption as Vt, TableCell as Gt, TableFooter as Xt, TableHead as Zt, TableHeader as Jt, TableRow as Kt } from "./Table.es.js";
-import { default as Yt } from "./TabLinks.es.js";
-import { default as ta } from "./TextArea.es.js";
-import { default as ra } from "./Tooltip.es.js";
-import { Skeleton as na } from "./Skeleton.es.js";
-import { j as a } from "./jsx-runtime-DKDX3adD.js";
-import { c as u } from "./cn-B6yFEsav.js";
-import _, { useState as k, useMemo as z, useEffect as T, useRef as N, useLayoutEffect as Y, createContext as ee, useContext as te, forwardRef as M, useCallback as ae } from "react";
-import { motion as g, AnimatePresence as $ } from "framer-motion";
-import { u as F } from "./LayoutGeneric-p4Pll4Cm.js";
-import { L as sa, S as la } from "./LayoutGeneric-p4Pll4Cm.js";
-import { useGSAP as U } from "@gsap/react";
-import h from "gsap";
-import { Icons as R } from "./Icons.es.js";
-import { default as ua } from "./OtpInput.es.js";
-import { useDropzone as re } from "react-dropzone";
-import { useIsMobile as fa } from "./useDevice.es.js";
-import { DropZone as pa } from "./DropZone.es.js";
-const We = (t) => {
-  const [e, o] = k({}), { size: r = "medium", color: n = "default", options: i, value: s, name: d, onChange: l, icon: f, allowExpand: c = !1, disabled: x = !1 } = t, p = Math.max(i.findIndex((m) => m.value === s), 0), b = i.length, I = 9, W = 26, w = {
+import { default as ht } from "./Avatar.es.js";
+import { B as $ } from "./Button-Bc0LYLfg.js";
+import { C as gt, a as bt } from "./CardProfile-BiYr6kY9.js";
+import { default as vt } from "./CheckBox.es.js";
+import { default as jt } from "./CheckboxFormik.es.js";
+import { default as Ct, useDialogControl as kt } from "./DialogModal.es.js";
+import { default as It, useDrawerDesktop as Lt } from "./DrawerDesktop.es.js";
+import { default as Rt, useDrawerMobile as Tt } from "./DrawerMobile.es.js";
+import { default as Pt } from "./Header.es.js";
+import { default as Ot } from "./Input.es.js";
+import { default as Et } from "./InputFormik.es.js";
+import { InputMultiple as Mt } from "./InputMultiple.es.js";
+import { default as qt } from "./Logo.es.js";
+import { Menu as Ht } from "./Menu.es.js";
+import { default as Ft } from "./Pagination.es.js";
+import { ProfilePictureUpload as Gt } from "./ProfilePictureUpload.es.js";
+import { default as Kt } from "./ProgressBar.es.js";
+import { default as Zt } from "./Select.es.js";
+import { default as Qt } from "./SelectFormik.es.js";
+import me from "./Spinner.es.js";
+import { Steps as ta } from "./Steps.es.js";
+import { default as ra } from "./SwipeContainer.es.js";
+import { Switch as oa } from "./Switch.es.js";
+import { default as la } from "./DatePicker.es.js";
+import { Table as ca, TableBody as ua, TableCaption as da, TableCell as fa, TableFooter as ma, TableHead as pa, TableHeader as ha, TableRow as xa } from "./Table.es.js";
+import { default as ba } from "./TabLinks.es.js";
+import { default as va } from "./TextArea.es.js";
+import { default as ja } from "./Tooltip.es.js";
+import { Skeleton as pe } from "./Skeleton.es.js";
+import { j as a } from "./jsx-runtime-ByW6EXIE.js";
+import { c as h } from "./cn-B6yFEsav.js";
+import V, { useState as A, useMemo as U, useEffect as E, memo as q, forwardRef as Y, useRef as I, useCallback as b, useImperativeHandle as he, useLayoutEffect as xe, createContext as ge, useContext as be } from "react";
+import { motion as z, AnimatePresence as J } from "framer-motion";
+import { u as Q } from "./LayoutGeneric-jDE96L2N.js";
+import { L as Ca, S as ka } from "./LayoutGeneric-jDE96L2N.js";
+import { Icons as B } from "./Icons.es.js";
+import { useGSAP as ee } from "@gsap/react";
+import D from "gsap";
+import { default as Ia } from "./OtpInput.es.js";
+import { useDropzone as ye } from "react-dropzone";
+import { useIsMobile as Da } from "./useDevice.es.js";
+import { DropZone as Ta } from "./DropZone.es.js";
+const et = (t) => {
+  const [e, o] = A({}), { size: r = "medium", color: n = "default", options: s, value: l, name: c, onChange: m, icon: f, allowExpand: u = !1, disabled: x = !1 } = t, p = Math.max(s.findIndex((v) => v.value === l), 0), i = s.length, g = 9, S = 26, w = {
     small: 120,
     medium: 120,
     large: 120
-  }, v = {
+  }, j = {
     small: 94,
     medium: 94,
     large: 94
-  }, D = 16, X = {
+  }, L = 16, R = {
     small: { container: "p-2" },
     medium: { container: "p-4 h-[48px] rounded-lg" },
     large: { container: "p-6" }
-  }, C = {
+  }, y = {
     default: {
       switch: "bg-primary-medium-default text-neutral-weak-default ",
       container: "border-neutral-default-default",
@@ -84,79 +84,79 @@ const We = (t) => {
       icon: "text-neutral-strong-disabled",
       option: "text-neutral-strong-disabled"
     }
-  }, q = i.find((m) => m.value === s) ?? i[0], L = q.label.length * I + D * 2 + W, A = () => z(() => Object.values(e).reduce((y, j) => y + j, 0) + W, [e]), O = {
-    small: c ? A() : (b - 1) * v.small + w.small,
-    medium: c ? A() : (b - 1) * v.medium + w.medium,
-    large: c ? A() : (b - 1) * v.large + w.large
+  }, d = s.find((v) => v.value === l) ?? s[0], N = d.label.length * g + L * 2 + S, C = () => U(() => Object.values(e).reduce((k, T) => k + T, 0) + S, [e]), P = {
+    small: u ? C() : (i - 1) * j.small + w.small,
+    medium: u ? C() : (i - 1) * j.medium + w.medium,
+    large: u ? C() : (i - 1) * j.large + w.large
   };
-  T(() => {
-    if (!c) return;
-    let m = {};
-    i.forEach((y, j) => {
-      m[j] = y.label.length * I + D * 2;
-    }), o(m);
+  E(() => {
+    if (!u) return;
+    let v = {};
+    s.forEach((k, T) => {
+      v[T] = k.label.length * g + L * 2;
+    }), o(v);
   }, []);
-  const Z = z(() => c ? Object.values(e).reduce((m, y, j) => j < p ? m + y : m, 0) : Math.max(p * v[r] - 2, 0), [p]), J = () => {
+  const M = U(() => u ? Object.values(e).reduce((v, k, T) => T < p ? v + k : v, 0) : Math.max(p * j[r] - 2, 0), [p]), H = () => {
     if (x) return;
-    const m = p === i.length - 1 ? i[0] : i[p + 1];
-    l?.(d, m.value);
-  }, S = x ? "disabled" : n;
+    const v = p === s.length - 1 ? s[0] : s[p + 1];
+    m?.(c, v.value);
+  }, O = x ? "disabled" : n;
   return /* @__PURE__ */ a.jsxs(
     "button",
     {
-      name: d,
+      name: c,
       type: "button",
       id: "segmented-button-container",
       style: {
-        width: O[r],
-        minWidth: O[r],
-        maxWidth: O[r]
+        width: P[r],
+        minWidth: P[r],
+        maxWidth: P[r]
       },
-      className: u(
-        X[r].container,
-        C[S].container,
+      className: h(
+        R[r].container,
+        y[O].container,
         "border-[1px]",
         !x && "cursor-pointer",
         "relative"
       ),
       children: [
         /* @__PURE__ */ a.jsxs(
-          g.div,
+          z.div,
           {
             id: "segmented-button-switcher",
             animate: {
-              left: `${Z}px`,
-              width: c ? L : w[r],
-              minWidth: c ? L : w[r],
-              maxWidth: c ? L : w[r]
+              left: `${M}px`,
+              width: u ? N : w[r],
+              minWidth: u ? N : w[r],
+              maxWidth: u ? N : w[r]
             },
             transition: {
               type: "spring",
               stiffness: 260,
               damping: 30
             },
-            className: u(
+            className: h(
               "absolute top-0 left-0 h-full rounded-[6px] z-30",
               "flex items-center justify-center gap-[2px] p-4",
-              C[S].switch
+              y[O].switch
             ),
             onClick: () => {
-              !x && J();
+              !x && H();
             },
             children: [
-              f && _.cloneElement(f, { className: u(
+              f && V.cloneElement(f, { className: h(
                 "w-6 h-6 text-neutral-weak-default min-w-6 min-h-6",
-                C[S].icon
+                y[O].icon
               ) }),
               /* @__PURE__ */ a.jsx(
                 "p",
                 {
-                  className: u(
+                  className: h(
                     "prometeo-fonts-label-large ",
                     " overflow-hidden overflow-ellipsis text-nowrap ",
-                    C[S].switch
+                    y[O].switch
                   ),
-                  children: q.label
+                  children: d.label
                 }
               )
             ]
@@ -166,53 +166,53 @@ const We = (t) => {
           "div",
           {
             id: "segmented-button-options",
-            className: u(
+            className: h(
               "absolute top-0 left-0 w-full h-full overflow-hidden",
               "flex justify-center"
             ),
-            children: i?.map((m, y) => {
-              const j = m.value === (s || i[0].value), K = c ? e[y] + W : w[r], Q = c ? e[y] : v[r], P = j ? K : Q;
+            children: s?.map((v, k) => {
+              const T = v.value === (l || s[0].value), _ = u ? e[k] + S : w[r], F = u ? e[k] : j[r], W = T ? _ : F;
               return /* @__PURE__ */ a.jsx(
-                g.span,
+                z.span,
                 {
                   id: "segmented-button-option",
                   onClick: () => {
-                    !x && l?.(d, m.value);
+                    !x && m?.(c, v.value);
                   },
                   animate: {
-                    width: P,
-                    minWidth: P,
-                    maxWidth: P
+                    width: W,
+                    minWidth: W,
+                    maxWidth: W
                   },
                   transition: {
                     duration: 0.3,
                     delay: 0
                   },
-                  className: u(
+                  className: h(
                     "z-20 h-full ",
                     "flex items-center justify-center px-3 py-[6px]",
                     "prometeo-fonts-label-large text-neutral-medium-default",
                     " overflow-hidden ",
                     !x && "cursor-pointer"
                   ),
-                  "aria-label": m.label,
+                  "aria-label": v.label,
                   children: /* @__PURE__ */ a.jsx(
                     "p",
                     {
                       style: {
-                        width: c ? "max-content" : v[r],
-                        minWidth: c ? "max-content" : v[r],
-                        maxWidth: c ? "max-content" : v[r]
+                        width: u ? "max-content" : j[r],
+                        minWidth: u ? "max-content" : j[r],
+                        maxWidth: u ? "max-content" : j[r]
                       },
-                      className: u(
+                      className: h(
                         "px-3 place-content-center overflow-hidden text-ellipsis text-wrap prometeo-fonts-label-large  h-full",
-                        C[S].option
+                        y[O].option
                       ),
-                      children: m.label
+                      children: v.label
                     }
                   )
                 },
-                m.value
+                v.value
               );
             })
           }
@@ -220,13 +220,440 @@ const We = (t) => {
       ]
     }
   );
-}, oe = (t, e) => {
-  U(
+}, te = q(Y(({ images: t, className: e }, o) => {
+  const r = I(null), n = I({
+    isDragging: !1,
+    startX: 0,
+    scrollLeft: 0,
+    totalDistance: 0,
+    lastX: 0,
+    lastTime: 0,
+    velocity: 0
+  }), s = I(null), l = b(() => {
+    const i = r.current;
+    if (!i) return;
+    const g = 0.9;
+    Math.abs(n.current.velocity) > 0.5 ? (i.scrollLeft -= n.current.velocity, n.current.velocity *= g, s.current = requestAnimationFrame(l)) : (n.current.velocity = 0, s.current && (cancelAnimationFrame(s.current), s.current = null));
+  }, []), c = b((i) => {
+    const g = r.current;
+    if (!g) return;
+    s.current && (cancelAnimationFrame(s.current), s.current = null);
+    const S = Date.now();
+    n.current = {
+      isDragging: !0,
+      startX: i.pageX - g.offsetLeft,
+      scrollLeft: g.scrollLeft,
+      totalDistance: 0,
+      lastX: i.pageX - g.offsetLeft,
+      lastTime: S,
+      velocity: 0
+    }, g.style.cursor = "grabbing", g.style.scrollBehavior = "auto", g.style.userSelect = "none";
+  }, []), m = b((i) => {
+    const g = r.current;
+    if (!g || !n.current.isDragging) return;
+    i.preventDefault();
+    const S = Date.now(), w = i.pageX - g.offsetLeft, j = w - n.current.startX, L = S - n.current.lastTime;
+    if (n.current.totalDistance += Math.abs(j), L > 0) {
+      const R = w - n.current.lastX;
+      n.current.velocity = R / L * 16;
+    }
+    n.current.lastX = w, n.current.lastTime = S, g.scrollLeft = n.current.scrollLeft - j;
+  }, []), f = b(() => {
+    const i = r.current;
+    i && (i.style.cursor = "grab", i.style.userSelect = "auto", Math.abs(n.current.velocity) > 1 && l(), n.current.isDragging = !1);
+  }, [l]), u = b(() => {
+    const i = r.current;
+    i && n.current.isDragging && (i.style.cursor = "grab", i.style.userSelect = "auto", Math.abs(n.current.velocity) > 1 && l(), n.current.isDragging = !1);
+  }, [l]), x = b(() => n.current.totalDistance < 5, []), p = b((i) => {
+    x() || (i.preventDefault(), i.stopPropagation());
+  }, [x]);
+  return /* @__PURE__ */ a.jsx(
+    "section",
+    {
+      ref: r,
+      className: h("flex gap-4 w-full overflow-x-auto py-2 relative", e),
+      style: {},
+      onMouseDown: c,
+      onMouseMove: m,
+      onMouseUp: f,
+      onMouseLeave: u,
+      onClickCapture: p,
+      "aria-label": "Image gallery",
+      children: t && t.length > 0 && t.map((i, g) => V.cloneElement(i, {
+        key: i.props.src || g,
+        ...i.props,
+        galleryRef: o,
+        allowPreview: !0
+      }))
+    }
+  );
+}));
+te.displayName = "GalleryPreview";
+const ae = q(({ images: t, lightboxClassName: e, closeLightbox: o, showThumbnails: r, thumbnailsClassName: n, currentIndex: s, goToNext: l, goToPrevious: c, goToIndex: m }) => {
+  const f = I(null), u = I(null), x = I(null), p = I({
+    scale: 1,
+    translateX: 0,
+    translateY: 0
+  }), i = I({
+    startX: 0,
+    startY: 0,
+    isDragging: !1,
+    distanceX: 0,
+    distanceY: 0
+  });
+  E(() => {
+    x.current && x.current.focus();
+  }, []);
+  const g = b((d) => {
+    d.preventDefault(), d.stopPropagation(), d.key === "Escape" ? o() : d.key === "ArrowLeft" ? c() : d.key === "ArrowRight" && l();
+  }, [o, c, l]), S = b((d) => {
+    i.current = { startX: d.touches[0].clientX, startY: d.touches[0].clientY, isDragging: !0, distanceX: 0, distanceY: 0 };
+  }, []), w = b((d) => {
+    const N = d.touches[0];
+    i.current = { ...i.current, isDragging: !0, distanceX: N.clientX - i.current.startX, distanceY: N.clientY - i.current.startY };
+  }, []), j = b(() => {
+    i.current = { ...i.current, startX: 0, startY: 0, isDragging: !1 }, Math.abs(i.current.distanceX) > Math.abs(i.current.distanceY) && (i.current.distanceX < 0 ? l() : c());
+  }, [l, c]), L = b(() => {
+    const d = f.current;
+    if (!d) return;
+    const { scale: N, translateX: C, translateY: P } = p.current;
+    d.style.transform = `scale(${N}) translate(${C}px, ${P}px)`, d.style.transformOrigin = "center center", d.style.transition = "transform 0.1s ease-out";
+  }, []), R = b(() => {
+    p.current = { scale: 1, translateX: 0, translateY: 0 }, f.current && (f.current.style.transform = "scale(1) translate(0px, 0px)", f.current.style.transformOrigin = "center center");
+  }, []), y = b((d) => {
+    const N = f.current, C = u.current;
+    if (!N || !C) return;
+    if (d.shiftKey) {
+      d.deltaY < 0 ? l() : d.deltaY > 0 && c();
+      return;
+    }
+    const P = 2e-3, M = 1, H = 8, O = -d.deltaY * P, v = p.current.scale;
+    let k = v + O;
+    if (k = Math.max(M, Math.min(H, k)), k === M) {
+      R();
+      return;
+    }
+    const T = C.getBoundingClientRect(), _ = d.clientX - T.left, F = d.clientY - T.top, W = T.width / 2, se = T.height / 2, le = _ - W, ie = F - se, K = k / v, ce = p.current.translateX, ue = p.current.translateY, de = ce - le * (K - 1) / k, fe = ue - ie * (K - 1) / k;
+    p.current = {
+      scale: k,
+      translateX: de,
+      translateY: fe
+    }, L();
+  }, [l, c, L, R]);
+  return t.length === 0 ? null : /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: x,
+      className: h("fixed inset-0 z-50 bg-black/90 flex items-center justify-center lg:px-16", e),
+      onClick: o,
+      onKeyDown: g,
+      onTouchStart: S,
+      onTouchMove: w,
+      onTouchEnd: j,
+      tabIndex: 0,
+      role: "dialog",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ a.jsx("div", { className: "absolute top-4 right-4 z-110", children: /* @__PURE__ */ a.jsx(
+          $,
+          {
+            variant: "text",
+            color: "secondary",
+            size: "small",
+            onClick: o,
+            className: "!text-white hover:!text-gray-300 !w-auto !h-auto !p-2",
+            "aria-label": "Close gallery",
+            children: /* @__PURE__ */ a.jsx(B.Close, { size: 24 })
+          }
+        ) }),
+        t.length > 1 && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+          /* @__PURE__ */ a.jsx(
+            "div",
+            {
+              className: "absolute left-0 lg:h-full items-center flex justify-center w-16 z-100 cursor-w-resize",
+              onClick: (d) => {
+                d.stopPropagation(), c();
+              },
+              children: /* @__PURE__ */ a.jsx(
+                $,
+                {
+                  variant: "text",
+                  color: "secondary",
+                  size: "small",
+                  onClick: (d) => {
+                    d.stopPropagation(), c();
+                  },
+                  className: "!text-white hover:!text-gray-300 !w-auto !h-auto !p-2",
+                  "aria-label": "Previous image",
+                  children: /* @__PURE__ */ a.jsx(B.CrevronLeft, { size: 24 })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ a.jsx(
+            "div",
+            {
+              className: "absolute right-0 lg:h-full items-center flex justify-center w-16 z-100 cursor-e-resize",
+              onClick: (d) => {
+                d.stopPropagation(), l();
+              },
+              children: /* @__PURE__ */ a.jsx(
+                $,
+                {
+                  variant: "text",
+                  color: "secondary",
+                  size: "small",
+                  onClick: (d) => {
+                    d.stopPropagation(), l();
+                  },
+                  className: "!text-white hover:!text-gray-300 !w-auto !h-auto !p-2",
+                  "aria-label": "Next image",
+                  children: /* @__PURE__ */ a.jsx(B.CrevronRight, { size: 24 })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            ref: u,
+            onClick: (d) => d.stopPropagation(),
+            className: "relative max-w-[90vw] max-h-[98vh] mx-auto  flex flex-col w-max lg:h-full h-max",
+            onWheel: y,
+            children: /* @__PURE__ */ a.jsx(
+              "div",
+              {
+                className: "max-h-[98vh] relative overflow-hidden w-full h-full",
+                style: {
+                  animation: "galleryFadeIn 0.6s ease-in-out"
+                },
+                ref: f,
+                children: /* @__PURE__ */ a.jsx(
+                  "img",
+                  {
+                    src: t[s].src,
+                    alt: t[s].alt,
+                    className: h(
+                      " w-full h-full object-contain select-none",
+                      "prometeo-lightbox-image"
+                    ),
+                    onLoad: () => R()
+                  }
+                )
+              },
+              s
+            )
+          }
+        ),
+        r && /* @__PURE__ */ a.jsx("div", { className: " w-full absolute items-center flex justify-center left-0 right-0 z-[100] bottom-0", children: /* @__PURE__ */ a.jsx(re, { images: t, currentIndex: s, goToIndex: m, thumbnailsClassName: n }) }),
+        t.length > 1 && /* @__PURE__ */ a.jsxs("div", { className: "absolute bottom-20 left-1/2 transform -translate-x-1/2 text-neutral-default-default prometeo-fonts-label-xlarge px-4 py-2 rounded-full", children: [
+          s + 1,
+          " / ",
+          t.length
+        ] })
+      ]
+    }
+  );
+});
+ae.displayName = "LightBox";
+const ve = (t, e) => {
+  if (t.currentIndex !== e.currentIndex || t.thumbnailsClassName !== e.thumbnailsClassName || t.images.length !== e.images.length) return !1;
+  for (let o = 0; o < t.images.length; o++)
+    if (t.images[o].src !== e.images[o].src) return !1;
+  return !0;
+}, re = q(({ images: t, currentIndex: e, goToIndex: o, thumbnailsClassName: r }) => /* @__PURE__ */ a.jsxs(
+  "div",
+  {
+    className: "flex gap-4 w-max overflow-x-auto overflow-y-visible max-w-full px-16 py-4",
+    style: {
+      scrollbarWidth: "none",
+      msOverflowStyle: "none",
+      WebkitOverflowScrolling: "touch"
+    },
+    children: [
+      /* @__PURE__ */ a.jsx("style", { children: `
+                .flex.gap-4.w-max::-webkit-scrollbar {
+                    display: none;
+                }
+            ` }),
+      t.map((n, s) => /* @__PURE__ */ a.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (l) => {
+            l.stopPropagation(), o(s);
+          },
+          className: h(
+            "w-16 h-16 aspect-square min-w-16 rounded overflow-hidden transition-all duration-300 hover:scale-125 cursor-pointer",
+            r,
+            s === e ? "scale-110" : ""
+          ),
+          children: /* @__PURE__ */ a.jsx(
+            "img",
+            {
+              src: n.src,
+              alt: n.alt,
+              className: "w-full h-full object-cover select-none"
+            }
+          )
+        },
+        n.src
+      ))
+    ]
+  }
+), ve);
+re.displayName = "Thumbnails";
+const we = Y(
+  (t, e) => {
+    const {
+      children: o,
+      className: r,
+      lightboxClassName: n,
+      showThumbnails: s,
+      thumbnailsClassName: l
+    } = t, [c, m] = A([]), [f, u] = A(!1), [x, p] = A(0), i = o ? Array.isArray(o) ? o : [o] : [], g = b((y) => {
+      m((d) => d.some((C) => C.src === y.src) ? d : [...d, y]);
+    }, []), S = b((y = 0) => {
+      p(y), u(!0);
+    }, []), w = b(() => {
+      u(!1);
+    }, []);
+    he(
+      e,
+      () => ({
+        openLightbox: S,
+        closeLightbox: w,
+        isOpen: f,
+        addImage: g,
+        images: c
+      }),
+      [c]
+    );
+    const j = b(() => {
+      p((y) => (y + 1) % c.length);
+    }, [c.length]), L = b(() => {
+      p((y) => (y - 1 + c.length) % c.length);
+    }, [c.length]), R = b((y) => {
+      p(y);
+    }, []);
+    return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+      /* @__PURE__ */ a.jsx(
+        te,
+        {
+          images: i,
+          className: r,
+          ref: e
+        }
+      ),
+      f && /* @__PURE__ */ a.jsx(
+        ae,
+        {
+          images: c,
+          closeLightbox: w,
+          showThumbnails: s,
+          lightboxClassName: n,
+          thumbnailsClassName: l,
+          currentIndex: x,
+          goToNext: j,
+          goToPrevious: L,
+          goToIndex: R
+        }
+      )
+    ] });
+  }
+);
+we.displayName = "ImageGallery";
+const je = (t, e) => {
+  if (t.src !== e.src || t.alt !== e.alt || t.width !== e.width || t.height !== e.height || t.className !== e.className || t.lazy !== e.lazy || t.showLoader !== e.showLoader || t.allowPreview !== e.allowPreview) return !1;
+  const o = t.loaderProps, r = e.loaderProps;
+  return !(o !== r && (!o || !r || o.loaderType !== r.loaderType || o.variant !== r.variant || o.speedMultiplier !== r.speedMultiplier || o.className !== r.className || o.size !== r.size || o.backdropClassName !== r.backdropClassName));
+}, Ne = q(
+  (t) => {
+    const { src: e, alt: o, width: r, height: n, className: s, lazy: l = !0, showLoader: c = !0, loaderProps: m, allowPreview: f = !1, galleryRef: u } = t, { variant: x = "clip", speedMultiplier: p = 0.7, className: i, size: g = 48, backdropClassName: S, loaderType: w = "clasic" } = m || {}, [j, L] = A(!0), R = I(!1), y = b((N) => {
+      const C = new Image();
+      C.src = N, C.onload = () => {
+        L(!1);
+      }, C.onerror = () => {
+        L(!1);
+      };
+    }, []);
+    E(() => {
+      y(e);
+    }, [e, y]), E(() => {
+      u?.current && !R.current && (u.current.addImage({ src: e, alt: o, width: r, height: n, className: s }), R.current = !0);
+    }, [u, e, o, r, n, s]);
+    const d = b(() => {
+      if (f && u?.current) {
+        const C = u.current.images.findIndex((P) => P.src === e);
+        u.current.openLightbox(C >= 0 ? C : 0);
+      }
+    }, [f, u, e]);
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: false positive
+      /* @__PURE__ */ a.jsxs(
+        "div",
+        {
+          className: h(
+            "relative rounded-2xl overflow-hidden select-none",
+            f && u && "cursor-pointer hover:brightness-75 transition-all ease-in-out duration-300",
+            s
+          ),
+          style: {
+            width: r,
+            height: n,
+            minWidth: r,
+            minHeight: n
+          },
+          onClick: d,
+          role: f ? "button" : void 0,
+          tabIndex: f ? 0 : void 0,
+          onKeyDown: f ? (N) => {
+            (N.key === "Enter" || N.key === " ") && (N.preventDefault(), d());
+          } : void 0,
+          children: [
+            /* @__PURE__ */ a.jsx(
+              "img",
+              {
+                draggable: !1,
+                src: e,
+                alt: o,
+                className: h("object-cover", s, "w-full h-full"),
+                loading: l ? "lazy" : "eager"
+              }
+            ),
+            j && c && /* @__PURE__ */ a.jsx(
+              "div",
+              {
+                className: h(
+                  "absolute grid place-items-center",
+                  "inset-0",
+                  w === "skeleton" ? "bg-inherit" : "bg-black/30",
+                  S
+                ),
+                children: w === "clasic" ? /* @__PURE__ */ a.jsx(me, { variant: x, speedMultiplier: p, loading: j, className: i, size: g }) : /* @__PURE__ */ a.jsx(
+                  pe,
+                  {
+                    className: "w-full h-full z-100"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    );
+  },
+  je
+);
+Ne.displayName = "Image";
+const Ce = (t, e) => {
+  ee(
     () => {
       if (!t.current) return;
       const o = t.current, r = document.querySelector('[data-main-content="true"]');
       if (e) {
-        h.fromTo(
+        D.fromTo(
           o,
           {
             width: "0rem",
@@ -238,13 +665,13 @@ const We = (t) => {
             duration: 0.4,
             ease: "power2.out"
           }
-        ), r && h.to(r, {
+        ), r && D.to(r, {
           marginLeft: o.offsetWidth + "px",
           duration: 0.4,
           ease: "power2.out"
         });
         const n = o.querySelectorAll(".secondary-bar-content > *");
-        n.length > 0 && h.fromTo(
+        n.length > 0 && D.fromTo(
           n,
           {
             y: 20,
@@ -260,12 +687,12 @@ const We = (t) => {
           }
         );
       } else
-        h.to(o, {
+        D.to(o, {
           width: "0rem",
           opacity: 0,
           duration: 0.3,
           ease: "power2.in"
-        }), r && h.to(r, {
+        }), r && D.to(r, {
           marginLeft: "0px",
           duration: 0.3,
           ease: "power2.in"
@@ -273,79 +700,79 @@ const We = (t) => {
     },
     { scope: t, dependencies: [e] }
   );
-}, H = ({
+}, Z = ({
   children: t,
   isOpen: e = !1,
   className: o = "",
   width: r = "w-96",
   action: n,
-  primarySidebarCollapsed: i,
-  onClose: s
+  primarySidebarCollapsed: s,
+  onClose: l
 }) => {
-  const d = N(null), [l, f] = k({ left: 0, width: 0 }), { primarySidebarRef: c } = F();
-  return Y(() => {
-    if (c?.current) {
-      const x = c.current.getBoundingClientRect();
+  const c = I(null), [m, f] = A({ left: 0, width: 0 }), { primarySidebarRef: u } = Q();
+  return xe(() => {
+    if (u?.current) {
+      const x = u.current.getBoundingClientRect();
       f({
         left: x.width,
         width: x.width
       });
     }
-  }, [c, e, i]), oe(d, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+  }, [u, e, s]), Ce(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: l.left
+          left: m.left
         },
-        onClick: s
+        onClick: l
       }
     ),
     /* @__PURE__ */ a.jsx(
       "div",
       {
-        ref: d,
-        className: u(
+        ref: c,
+        className: h(
           "h-screen bg-neutral-default-default border-r-1 border-neutral-strong-default flex flex-col secondary-bar flex-shrink-0",
           "absolute top-0 z-30",
           r,
           o
         ),
         style: {
-          left: l.left
+          left: m.left
         },
         "data-action": n,
         children: /* @__PURE__ */ a.jsx("div", { className: "secondary-bar-content", children: t })
       }
     )
   ] }) });
-}, ne = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("h-16 ", e), children: t }), ie = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1 overflow-y-auto p-4", e), children: t }), se = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("p-4 border-t border-neutral-strong-default", e), children: t }), le = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1", t) }), Le = Object.assign(H, {
-  Root: H,
-  Header: ne,
-  Content: ie,
-  Footer: se,
-  Spacer: le
-}), V = ee(
+}, ke = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: h("h-16 ", e), children: t }), Se = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: h("flex-1 overflow-y-auto p-4", e), children: t }), Ie = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: h("p-4 border-t border-neutral-strong-default", e), children: t }), Le = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: h("flex-1", t) }), tt = Object.assign(Z, {
+  Root: Z,
+  Header: ke,
+  Content: Se,
+  Footer: Ie,
+  Spacer: Le
+}), ne = ge(
   void 0
-), Ae = () => {
-  const t = te(V);
+), at = () => {
+  const t = be(ne);
   if (!t)
     throw new Error("useSidebar must be used within a Sidebar.Root");
   return t;
-}, ce = ({
+}, De = ({
   children: t
 }) => {
-  const [e, o] = k(!1), [r, n] = k(!1), i = N(null), s = () => {
+  const [e, o] = A(!1), [r, n] = A(!1), s = I(null), l = () => {
     o(!1), n(!1);
-  }, d = () => {
+  }, c = () => {
     o(!0), n(!1);
   }, p = {
     isCollapsed: e,
     setIsCollapsed: o,
-    navbarRef: i,
+    navbarRef: s,
     toggleCollapse: () => {
-      e ? s() : d();
+      e ? l() : c();
     },
     activeSecondaryBar: r ? "notifications" : null,
     openSecondaryBar: () => {
@@ -355,22 +782,22 @@ const We = (t) => {
       n(!1);
     },
     toggleSecondaryBar: () => {
-      n((b) => !b);
+      n((i) => !i);
     }
   };
-  return /* @__PURE__ */ a.jsx(V.Provider, { value: p, children: t });
-}, B = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, ue = (t, e, o) => {
-  U(
+  return /* @__PURE__ */ a.jsx(ne.Provider, { value: p, children: t });
+}, X = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, Re = (t, e, o) => {
+  ee(
     () => {
       if (!t.current) return;
-      const r = h.timeline({
+      const r = D.timeline({
         defaults: { duration: 0.7, ease: "power1.out" }
       }), n = {
         navbar: t.current,
-        navLabels: h.utils.toArray(".nav-label"),
-        navIconWrappers: h.utils.toArray(".nav-icon-wrapper"),
-        navIcons: h.utils.toArray(".nav-icon"),
-        navLinkItems: h.utils.toArray(".nav-link-item"),
+        navLabels: D.utils.toArray(".nav-label"),
+        navIconWrappers: D.utils.toArray(".nav-icon-wrapper"),
+        navIcons: D.utils.toArray(".nav-icon"),
+        navLinkItems: D.utils.toArray(".nav-link-item"),
         logoutButton: document.querySelector(".logout-button"),
         logoutLabel: document.querySelector(".logout-label"),
         logoutIcon: document.querySelector(".logout-icon"),
@@ -398,14 +825,14 @@ const We = (t) => {
         ),
         // Secondary bar elements
         secondaryBar: document.querySelector(".secondary-bar"),
-        secondaryBarContent: h.utils.toArray(".secondary-bar *"),
-        badgeInLink: h.utils.toArray(".badge-in-link")
+        secondaryBarContent: D.utils.toArray(".secondary-bar *"),
+        badgeInLink: D.utils.toArray(".badge-in-link")
       };
-      e ? de(r, n) : fe(r, n), n.secondaryBar && me(n.secondaryBar);
+      e ? Te(r, n) : ze(r, n), n.secondaryBar && Pe(n.secondaryBar);
     },
     { scope: t, dependencies: [e, o] }
   );
-}, de = (t, e) => {
+}, Te = (t, e) => {
   t.to(e.navbar, {
     width: "5rem",
     duration: 0.2,
@@ -464,7 +891,7 @@ const We = (t) => {
       marginLeft: 0
     },
     0
-  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), B(
+  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), X(
     t,
     e.buttonCrevron,
     {
@@ -477,7 +904,7 @@ const We = (t) => {
       }
     },
     0
-  ), B(
+  ), X(
     t,
     e.buttonContentChevron,
     {
@@ -544,7 +971,7 @@ const We = (t) => {
     },
     -1
   );
-}, fe = (t, e) => {
+}, ze = (t, e) => {
   t.to(e.navbar, { width: "20rem" }, -1).to(
     e.navLinkItems,
     {
@@ -554,7 +981,7 @@ const We = (t) => {
       justifyContent: "flex-start"
     },
     -1
-  ), B(
+  ), X(
     t,
     e.buttonCrevron,
     {
@@ -567,7 +994,7 @@ const We = (t) => {
       }
     },
     0
-  ), B(
+  ), X(
     t,
     e.buttonContentChevron,
     {
@@ -672,53 +1099,53 @@ const We = (t) => {
     },
     0
   ).to(e.navIcons, { scale: 1 }, 0.3);
-}, me = (t, e) => {
-  h.to(t, {
+}, Pe = (t, e) => {
+  D.to(t, {
     x: "-100%",
     opacity: 0,
     duration: 0.3,
     ease: "power2.in"
   });
-}, pe = (t) => {
-  const [e, o] = k(t?.currentTabName || t.tabs[0].name), r = N(null), { tabs: n = [], className: i, activeColor: s = "var(--neutral-900)" } = t;
-  T(() => {
-    r.current?.style.setProperty("--tab-bg", s);
-  }, [s]);
-  const d = n.find((l) => l.name === (t?.currentTabName || e));
+}, Ae = (t) => {
+  const [e, o] = A(t?.currentTabName || t.tabs[0].name), r = I(null), { tabs: n = [], className: s, activeColor: l = "var(--neutral-900)" } = t;
+  E(() => {
+    r.current?.style.setProperty("--tab-bg", l);
+  }, [l]);
+  const c = n.find((m) => m.name === (t?.currentTabName || e));
   return /* @__PURE__ */ a.jsx(
     "div",
     {
-      className: u(
+      className: h(
         "flex flex-col gap-2",
         "bg-neutral-strong-default",
         "h-full w-14 max-w-14 pl-[6px] py-6",
         " border-r-[1px] border-neutral-default-default",
-        i
+        s
       ),
       children: n.map(
-        (l, f) => {
-          const c = l.name === d?.name, x = typeof l.thumbnail == "string" ? /* @__PURE__ */ a.jsx("img", { src: l.thumbnail, alt: l.description, className: "aspect-square object-contain" }) : l.thumbnail, p = () => {
-            l.disabled || (o(l.name), l.onClick && l.onClick(l.name));
+        (m, f) => {
+          const u = m.name === c?.name, x = typeof m.thumbnail == "string" ? /* @__PURE__ */ a.jsx("img", { src: m.thumbnail, alt: m.description, className: "aspect-square object-contain" }) : m.thumbnail, p = () => {
+            m.disabled || (o(m.name), m.onClick && m.onClick(m.name));
           };
           return /* @__PURE__ */ a.jsx(
             "div",
             {
-              className: u(
+              className: h(
                 "bg-[var(--tab-bg)]",
                 "h-12 w-[50px] z-20",
                 "flex items-center pl-[6px] ",
                 "rounded-l-[8px]",
                 "tabswitch-element relative",
-                c && "active"
+                u && "active"
               ),
               onClick: p,
               ref: r,
-              children: /* @__PURE__ */ a.jsx("div", { className: u(
+              children: /* @__PURE__ */ a.jsx("div", { className: h(
                 "size-8 rounded-[4px]",
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                l?.className
+                m?.className
               ), children: x })
             },
             f
@@ -727,18 +1154,18 @@ const We = (t) => {
       )
     }
   );
-}, xe = M(
-  ({ children: t, isCollapsed: e = !1, className: o = "", tabs: r = [], currentTabName: n }, i) => {
-    const s = N(null), { registerPrimarySidebar: d } = F(), l = ae((f) => {
-      s.current = f, typeof i == "function" ? i(f) : i && (i.current = f);
-    }, [i]);
-    return T(() => {
-      s.current && d(s);
-    }, [d]), ue(s, e, !1), /* @__PURE__ */ a.jsxs("div", { className: u(
+}, Oe = Y(
+  ({ children: t, isCollapsed: e = !1, className: o = "", tabs: r = [], currentTabName: n }, s) => {
+    const l = I(null), { registerPrimarySidebar: c } = Q(), m = b((f) => {
+      l.current = f, typeof s == "function" ? s(f) : s && (s.current = f);
+    }, [s]);
+    return E(() => {
+      l.current && c(l);
+    }, [c]), Re(l, e, !1), /* @__PURE__ */ a.jsxs("div", { className: h(
       "flex"
     ), children: [
       r.length > 0 && /* @__PURE__ */ a.jsx(
-        pe,
+        Ae,
         {
           tabs: r,
           activeColor: "var(--neutral-900)",
@@ -748,7 +1175,7 @@ const We = (t) => {
       /* @__PURE__ */ a.jsx(
         "div",
         {
-          ref: l,
+          ref: m,
           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
@@ -756,20 +1183,20 @@ const We = (t) => {
       )
     ] });
   }
-), E = M(
-  (t, e) => /* @__PURE__ */ a.jsx(ce, { children: /* @__PURE__ */ a.jsx(xe, { ...t, ref: e }) })
+), G = Y(
+  (t, e) => /* @__PURE__ */ a.jsx(De, { children: /* @__PURE__ */ a.jsx(Oe, { ...t, ref: e }) })
 );
-E.displayName = "SidebarRoot";
-const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.jsx(
+G.displayName = "SidebarRoot";
+const Be = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: h("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.jsx(
   "button",
   {
     onClick: e,
     title: t ? "Expandir Navbar" : "Contraer Navbar",
     "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
-    children: t ? /* @__PURE__ */ a.jsx(R.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(R.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
+    children: t ? /* @__PURE__ */ a.jsx(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" })
   }
-) }), be = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), ge = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("px-3 flex justify-center items-center w-full mb-4", t), children: /* @__PURE__ */ a.jsx("div", { className: "border-b border-neutral-strong-default border-1 w-full" }) }), ve = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), ye = ({ className: t, size: e = "auto" }) => {
+) }), Ee = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), We = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: h("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" }) }), Me = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), Xe = ({ className: t, size: e = "auto" }) => {
   const o = () => {
     switch (e) {
       case "auto":
@@ -782,37 +1209,37 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
         return "h-8 w-8";
     }
   };
-  return /* @__PURE__ */ a.jsx("div", { className: u(o(), t) });
-}, we = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), Oe = Object.assign(E, {
-  Root: E,
-  CollapseButton: he,
-  Header: be,
-  Divider: ge,
-  Content: ve,
-  Spacer: ye,
-  Footer: we
-}), Pe = ({
+  return /* @__PURE__ */ a.jsx("div", { className: h(o(), t) });
+}, qe = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), rt = Object.assign(G, {
+  Root: G,
+  CollapseButton: Be,
+  Header: Ee,
+  Divider: We,
+  Content: Me,
+  Spacer: Xe,
+  Footer: qe
+}), nt = ({
   children: t,
   icon: e,
   label: o,
   href: r,
   onClick: n,
-  isActive: i = !1,
-  className: s
+  isActive: s = !1,
+  className: l
 }) => {
-  const d = r ? "a" : "button";
+  const c = r ? "a" : "button";
   return /* @__PURE__ */ a.jsxs(
-    d,
+    c,
     {
       href: r,
       onClick: n,
-      className: u(
+      className: h(
         "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
+        s && "bg-neutral-medium-default",
+        l
       ),
       children: [
         e && /* @__PURE__ */ a.jsx("div", { className: "nav-icon-wrapper mr-3 flex-shrink-0", children: /* @__PURE__ */ a.jsx("div", { className: "nav-icon flex items-center justify-center w-5 h-5", children: e }) }),
@@ -821,17 +1248,17 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
       ]
     }
   );
-}, G = ({
+}, oe = ({
   count: t,
   maxCount: e = 9,
   className: o = "",
   size: r = "medium",
   variant: n = "primary",
-  showZero: i = !1
+  showZero: s = !1
 }) => {
-  const s = t, d = s > e ? `+${e}` : s;
-  if (s === 0 && !i) return null;
-  const l = {
+  const l = t, c = l > e ? `+${e}` : l;
+  if (l === 0 && !s) 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"
@@ -842,20 +1269,20 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     warning: "bg-yellow-500 text-black",
     danger: "bg-red-500 text-white"
   };
-  return /* @__PURE__ */ a.jsx("div", { className: u(
+  return /* @__PURE__ */ a.jsx("div", { className: h(
     "rounded-full flex items-center justify-center font-medium ",
-    l[r],
+    m[r],
     f[n],
     o
-  ), children: /* @__PURE__ */ a.jsx("span", { children: d }) });
-}, Ee = ({
+  ), children: /* @__PURE__ */ a.jsx("span", { children: c }) });
+}, ot = ({
   linkActions: t,
   onClick: e,
   activeAction: o
 }) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
-  const { isView: i = !1, actionName: s, title: d, icon: l, count: f, viewAccess: c } = r || {}, x = (typeof i == "function" ? i() : i !== !1) && (!c || c()), p = o === s;
+  const { isView: s = !1, actionName: l, title: c, icon: m, count: f, viewAccess: u } = r || {}, x = (typeof s == "function" ? s() : s !== !1) && (!u || u()), p = o === l;
   return x && /* @__PURE__ */ a.jsx(
-    g.div,
+    z.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -869,17 +1296,17 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
         "button",
         {
           onClick: () => {
-            e?.(s);
+            e?.(l);
           },
-          className: u(
+          className: h(
             "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",
             p ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ a.jsx($, { mode: "wait", children: p && /* @__PURE__ */ a.jsx(
-              g.div,
+            /* @__PURE__ */ a.jsx(J, { mode: "wait", children: p && /* @__PURE__ */ a.jsx(
+              z.div,
               {
                 layoutId: "nav-active-bg",
                 className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -894,7 +1321,7 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
               }
             ) }),
             /* @__PURE__ */ a.jsxs(
-              g.div,
+              z.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
                 animate: {
@@ -907,7 +1334,7 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
                 children: [
                   /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ a.jsx(
-                      g.div,
+                      z.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                         animate: {
@@ -917,18 +1344,18 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
                           duration: 0.25,
                           ease: "easeOut"
                         },
-                        children: typeof l == "function" ? l({
+                        children: typeof m == "function" ? m({
                           size: 24,
-                          className: u(
+                          className: h(
                             "nav-icon transition-colors duration-250 ease-out",
                             p ? "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: d })
+                    /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: c })
                   ] }),
-                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: f && f >= 1 ? /* @__PURE__ */ a.jsx(G, { count: f, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: f && f >= 1 ? /* @__PURE__ */ a.jsx(oe, { count: f, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -938,16 +1365,16 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     },
     n
   );
-}) }), De = ({
+}) }), st = ({
   links: t,
   isLinkActive: e,
   onLinkClick: o
 }) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
-  const { isView: i = !1, viewAccess: s, path: d, title: l, icon: f, count: c, relatedPaths: x } = r, p = (typeof i == "function" ? i() : i !== !1) && (!s || s()), b = e(d) || (x?.some(
-    (I) => e(I)
+  const { isView: s = !1, viewAccess: l, path: c, title: m, icon: f, count: u, relatedPaths: x } = r, p = (typeof s == "function" ? s() : s !== !1) && (!l || l()), i = e(c) || (x?.some(
+    (g) => e(g)
   ) ?? !1);
   return p && /* @__PURE__ */ a.jsx(
-    g.div,
+    z.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -961,17 +1388,17 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
         "button",
         {
           onClick: () => {
-            o?.(d);
+            o?.(c);
           },
-          className: u(
+          className: h(
             "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
             "transition-all duration-300 ease-out w-full",
             "group hover:bg-neutral-medium-selected",
-            b ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+            i ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ a.jsx($, { mode: "wait", children: b && /* @__PURE__ */ a.jsx(
-              g.div,
+            /* @__PURE__ */ a.jsx(J, { mode: "wait", children: i && /* @__PURE__ */ a.jsx(
+              z.div,
               {
                 layoutId: "nav-active-bg",
                 className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -986,7 +1413,7 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
               }
             ) }),
             /* @__PURE__ */ a.jsxs(
-              g.div,
+              z.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
                 animate: {
@@ -999,11 +1426,11 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
                 children: [
                   /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ a.jsx(
-                      g.div,
+                      z.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                         animate: {
-                          scale: b ? 1.05 : 1
+                          scale: i ? 1.05 : 1
                         },
                         transition: {
                           duration: 0.25,
@@ -1011,16 +1438,16 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
                         },
                         children: typeof f == "function" ? f({
                           size: 24,
-                          className: u(
+                          className: h(
                             "nav-icon transition-colors duration-250 ease-out",
-                            b ? "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: l })
+                    /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: m })
                   ] }),
-                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: c && c ? /* @__PURE__ */ a.jsx(G, { count: c, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: u && u ? /* @__PURE__ */ a.jsx(oe, { count: u, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -1030,18 +1457,18 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     },
     n
   );
-}) }), qe = ({
+}) }), lt = ({
   isActiveModalNotification: t,
   setIsActiveModalNotification: e
 }) => ({ handleNotificationClick: () => {
   e(!0);
-}, isActiveModalNotification: t }), ze = (t) => {
-  const e = N(null);
+}, isActiveModalNotification: t }), it = (t) => {
+  const e = I(null);
   return {
     isCollapsed: t,
     navbarRef: e
   };
-}, He = ({
+}, ct = ({
   isCollapsed: t,
   onToggle: e
 }) => /* @__PURE__ */ a.jsx("div", { className: "", children: /* @__PURE__ */ a.jsx(
@@ -1051,9 +1478,9 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     title: t ? "Expandir Navbar" : "Contraer Navbar",
     "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
-    children: t ? /* @__PURE__ */ a.jsx(R.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(R.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
+    children: t ? /* @__PURE__ */ a.jsx(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" })
   }
-) }), _e = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
+) }), ut = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
   "img",
   {
     src: t,
@@ -1061,17 +1488,17 @@ const he = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("d
     alt: e ?? ""
   }
 ) });
-function Me({
+function dt({
   onFilesAccepted: t,
   onFilesRejected: e,
   ...o
 }) {
-  const r = _.useCallback(
-    (i, s) => {
-      i.length > 0 && t?.(i), s.length > 0 && e?.(s);
+  const r = V.useCallback(
+    (s, l) => {
+      s.length > 0 && t?.(s), l.length > 0 && e?.(l);
     },
     [t, e]
-  ), n = re({
+  ), n = ye({
     onDrop: r,
     ...o
   });
@@ -1080,9 +1507,9 @@ function Me({
     hasErrors: n.fileRejections.length > 0
   };
 }
-const $e = (t, e = !0) => {
-  const o = N(null);
-  return T(() => {
+const ft = (t, e = !0) => {
+  const o = I(null);
+  return E(() => {
     if (!e) return;
     const r = (n) => {
       o.current && !o.current.contains(n.target) && t();
@@ -1101,66 +1528,68 @@ const $e = (t, e = !0) => {
   }, [t, e]), o;
 };
 export {
-  Ve as Avatar,
-  G as Badge,
-  Xe as Button,
-  Je as CardProfile,
-  Ke as ChangueAccount,
-  Ye as CheckBox,
-  tt as CheckboxFormik,
-  _e as CompanyLogo,
-  Mt as DatePicker,
-  rt as DialogModal,
-  it as DrawerDesktop,
-  ct as DrawerMobile,
-  pa as DropZone,
-  ft as Header,
-  R as Icons,
-  pt as Input,
-  ht as InputFormik,
-  gt as InputMultiple,
-  sa as LayoutGeneric,
-  yt as Logo,
-  jt as Menu,
-  Ee as NavBarActions,
-  He as NavbarCollapseButton,
-  De as NavbarLinks,
-  Pe as NavigationLink,
-  ua as OtpInput,
-  Ct as Pagination,
-  kt as ProfilePictureUpload,
-  Rt as ProgressBar,
-  Le as SecondaryBar,
-  We as SegmentedButton,
-  Tt as Select,
-  Lt as SelectFormik,
-  Oe as Sidebar,
-  ce as SidebarProvider,
-  la as SidebarRefProvider,
-  na as Skeleton,
-  Ot as Spinner,
-  Et as Steps,
-  qt as SwipeContainer,
-  Ht as Switch,
-  Yt as TabLinks,
-  Ft as Table,
-  Ut as TableBody,
-  Vt as TableCaption,
-  Gt as TableCell,
-  Xt as TableFooter,
-  Zt as TableHead,
-  Jt as TableHeader,
-  Kt as TableRow,
-  ta as TextArea,
-  ra as Tooltip,
-  qe as useActionsNavbar,
-  $e as useClickOutside,
-  ot as useDialogControl,
-  st as useDrawerDesktop,
-  ut as useDrawerMobile,
-  Me as useFileDropzone,
-  fa as useIsMobile,
-  ze as useNavbarCollapse,
-  Ae as useSidebar,
-  F as useSidebarContext
+  ht as Avatar,
+  oe as Badge,
+  $ as Button,
+  gt as CardProfile,
+  bt as ChangueAccount,
+  vt as CheckBox,
+  jt as CheckboxFormik,
+  ut as CompanyLogo,
+  la as DatePicker,
+  Ct as DialogModal,
+  It as DrawerDesktop,
+  Rt as DrawerMobile,
+  Ta as DropZone,
+  Pt as Header,
+  B as Icons,
+  Ne as Image,
+  we as ImageGallery,
+  Ot as Input,
+  Et as InputFormik,
+  Mt as InputMultiple,
+  Ca as LayoutGeneric,
+  qt as Logo,
+  Ht as Menu,
+  ot as NavBarActions,
+  ct as NavbarCollapseButton,
+  st as NavbarLinks,
+  nt as NavigationLink,
+  Ia as OtpInput,
+  Ft as Pagination,
+  Gt as ProfilePictureUpload,
+  Kt as ProgressBar,
+  tt as SecondaryBar,
+  et as SegmentedButton,
+  Zt as Select,
+  Qt as SelectFormik,
+  rt as Sidebar,
+  De as SidebarProvider,
+  ka as SidebarRefProvider,
+  pe as Skeleton,
+  me as Spinner,
+  ta as Steps,
+  ra as SwipeContainer,
+  oa as Switch,
+  ba as TabLinks,
+  ca as Table,
+  ua as TableBody,
+  da as TableCaption,
+  fa as TableCell,
+  ma as TableFooter,
+  pa as TableHead,
+  ha as TableHeader,
+  xa as TableRow,
+  va as TextArea,
+  ja as Tooltip,
+  lt as useActionsNavbar,
+  ft as useClickOutside,
+  kt as useDialogControl,
+  Lt as useDrawerDesktop,
+  Tt as useDrawerMobile,
+  dt as useFileDropzone,
+  Da as useIsMobile,
+  it as useNavbarCollapse,
+  at as useSidebar,
+  Q as useSidebarContext
 };