prometeo-design-system 1.6.4 → 1.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- interface ProfilePictureUploadProps {
1
+ export interface ProfilePictureUploadProps {
2
2
  imageUrl?: string;
3
3
  fallbackText?: string;
4
4
  onFileSelect?: (file: File) => void;
@@ -13,4 +13,3 @@ interface ProfilePictureUploadProps {
13
13
  onError?: (error: string) => void;
14
14
  }
15
15
  export declare function ProfilePictureUpload({ imageUrl, fallbackText, onFileSelect, onEditClick, onRemoveClick, size, className, disabled, showRemoveButton, acceptedTypes, maxFileSize, onError, }: ProfilePictureUploadProps): import("react/jsx-runtime").JSX.Element;
16
- export {};
package/dist/index.d.ts CHANGED
@@ -12,11 +12,13 @@ export { default as InputFormik } from './components/InputFormik/InputFormik';
12
12
  export { default as Logo } from './components/Logo/Logo';
13
13
  export { Menu } from './components/Menu/MenuComposable';
14
14
  export { default as Pagination } from './components/Pagination/Pagination';
15
+ export { ProfilePictureUpload } from './components/ProfilePictureUpload/ProfilePictureUpload';
15
16
  export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
16
17
  export { default as Select } from './components/Select/Select';
17
18
  export { default as SelectFormik } from './components/SelectFormik/SelectFormik';
18
19
  export { default as ChangueAccount } from './components/Sidebar/components/changue-account';
19
20
  export { default as Spinner } from './components/Spinner/Spinner';
21
+ export { default as Steps } from './components/Steps/Steps';
20
22
  export { default as SwipeContainer } from './components/SwipeContainer/SwipeContainer';
21
23
  export { default as TabLinks } from './components/TabLinks/TabLinks';
22
24
  export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/Table/Table';
@@ -56,6 +58,8 @@ export type { INavAction, INavLink, Role, RoleLevels, } from './components/Sideb
56
58
  export type { SidebarContextValue } from './components/Sidebar/hooks/useSidebarHook';
57
59
  export type { SpinnerProps, SpinnerSize, SpinnerVariant, } from './components/Spinner/Spinner';
58
60
  export type { PaginationProps } from './components/Pagination/Pagination';
61
+ export type { ProfilePictureUploadProps } from './components/ProfilePictureUpload/ProfilePictureUpload';
62
+ export type { Step, StepsProps } from './components/Steps/Steps';
59
63
  export type { SelectOptionRendererProps, SelectProps, SelectionDisplayProps, } from './components/Select/Select';
60
64
  export type { ISelectFormik, ISelectFormikOption, } from './components/SelectFormik/SelectFormik';
61
65
  export type { DialogHandle } from './components/Dialog/Dialog';
@@ -1,44 +1,425 @@
1
- import { default as ve } from "./Avatar.es.js";
2
- import { default as we } from "./Button.es.js";
3
- import { C as Ne, a as Ce } from "./CardProfile-BZajBGbO.js";
4
- import { default as ke } from "./CheckBox.es.js";
5
- import { default as Be } from "./CheckboxFormik.es.js";
6
- import { default as Re, useDialogControl as qe } from "./DialogModal.es.js";
7
- import { default as Ae, useDrawerDesktop as Te } from "./DrawerDesktop.es.js";
8
- import { default as Ee, useDrawerMobile as Oe } from "./DrawerMobile.es.js";
9
- import { default as Fe } from "./Header.es.js";
10
- import { default as We } from "./Input.es.js";
11
- import { default as Me } from "./InputFormik.es.js";
12
- import { default as Ve } from "./Logo.es.js";
13
- import { Menu as Xe } from "./Menu.es.js";
14
- import { default as Je } from "./Pagination.es.js";
15
- import { default as Qe } from "./ProgressBar.es.js";
16
- import { default as _e } from "./Select.es.js";
17
- import { default as tt } from "./SelectFormik.es.js";
18
- import { default as rt } from "./Spinner.es.js";
19
- import { default as nt } from "./SwipeContainer.es.js";
20
- import { default as st } from "./TabLinks.es.js";
21
- import { Table as ct, TableBody as ut, TableCaption as dt, TableCell as ft, TableFooter as pt, TableHead as mt, TableHeader as xt, TableRow as bt } from "./Table.es.js";
22
- import { default as gt } from "./TextArea.es.js";
23
- import { default as ht } from "./Tooltip.es.js";
24
- import { u as j } from "./LayoutGeneric-jDE96L2N.js";
25
- import { L as jt, S as Nt } from "./LayoutGeneric-jDE96L2N.js";
26
- import { j as a } from "./jsx-runtime-ByW6EXIE.js";
27
- import { c as s } from "./cn-B6yFEsav.js";
28
- import { useRef as p, useState as v, useLayoutEffect as q, createContext as P, useContext as A, forwardRef as N, useCallback as T, useEffect as C } from "react";
29
- import { useGSAP as S } from "@gsap/react";
30
- import c from "gsap";
31
- import { Icons as b } from "./Icons.es.js";
32
- import { motion as d, AnimatePresence as k } from "framer-motion";
33
- import { default as St } from "./OtpInput.es.js";
34
- import { DropZone as It } from "./DropZone.es.js";
35
- const D = (t, e) => {
36
- S(
1
+ import M from "./Avatar.es.js";
2
+ import { default as De } from "./Button.es.js";
3
+ import { C as Fe, a as Me } from "./CardProfile-BZajBGbO.js";
4
+ import { default as ze } from "./CheckBox.es.js";
5
+ import { default as Ye } from "./CheckboxFormik.es.js";
6
+ import { default as Ue, useDialogControl as Ve } from "./DialogModal.es.js";
7
+ import { default as Ze, useDrawerDesktop as Je } from "./DrawerDesktop.es.js";
8
+ import { default as Qe, useDrawerMobile as _e } from "./DrawerMobile.es.js";
9
+ import { default as tt } from "./Header.es.js";
10
+ import { default as rt } from "./Input.es.js";
11
+ import { default as nt } from "./InputFormik.es.js";
12
+ import { default as st } from "./Logo.es.js";
13
+ import { Menu as ct } from "./Menu.es.js";
14
+ import { default as dt } from "./Pagination.es.js";
15
+ import { j as t } from "./jsx-runtime-ByW6EXIE.js";
16
+ import { motion as c, AnimatePresence as $ } from "framer-motion";
17
+ 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";
18
+ import { default as mt } from "./ProgressBar.es.js";
19
+ import { default as xt } from "./Select.es.js";
20
+ import { default as gt } from "./SelectFormik.es.js";
21
+ import { default as bt } from "./Spinner.es.js";
22
+ import { c as f } from "./cn-B6yFEsav.js";
23
+ import { Icons as N } from "./Icons.es.js";
24
+ import { default as wt } from "./SwipeContainer.es.js";
25
+ import { default as Nt } from "./TabLinks.es.js";
26
+ 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";
27
+ import { default as Tt } from "./TextArea.es.js";
28
+ import { default as Ot } from "./Tooltip.es.js";
29
+ import { u as O } from "./LayoutGeneric-jDE96L2N.js";
30
+ import { L as Et, S as Ft } from "./LayoutGeneric-jDE96L2N.js";
31
+ import { useGSAP as D } from "@gsap/react";
32
+ import p from "gsap";
33
+ import { default as Wt } from "./OtpInput.es.js";
34
+ import { DropZone as Xt } from "./DropZone.es.js";
35
+ const H = {
36
+ sm: "w-16 h-16",
37
+ md: "w-24 h-24",
38
+ lg: "w-32 h-32",
39
+ xl: "w-40 h-40"
40
+ }, U = {
41
+ sm: "w-4 h-4",
42
+ md: "w-5 h-5",
43
+ lg: "w-6 h-6",
44
+ xl: "w-8 h-8"
45
+ }, V = {
46
+ sm: "w-6 h-6",
47
+ md: "w-7 h-7",
48
+ lg: "w-8 h-8",
49
+ xl: "w-10 h-10"
50
+ }, G = {
51
+ sm: "-bottom-1 -right-0.5",
52
+ md: "-bottom-0.5 -right-0.5",
53
+ lg: "bottom-1 right-1",
54
+ xl: "bottom-3 right-2"
55
+ }, R = {
56
+ sm: "w-4 h-4",
57
+ md: "w-5 h-5",
58
+ lg: "w-6 h-6",
59
+ xl: "w-7 h-7"
60
+ }, Z = {
61
+ sm: "-top-0.5 -right-0.5",
62
+ md: "-top-1 -right-1",
63
+ lg: "-top-1 -right-0",
64
+ xl: "top-1 right-1"
65
+ };
66
+ function je({
67
+ imageUrl: a,
68
+ fallbackText: e = "S L",
69
+ onFileSelect: o,
70
+ onEditClick: r,
71
+ onRemoveClick: n,
72
+ size: i = "lg",
73
+ className: u,
74
+ disabled: s = !1,
75
+ showRemoveButton: m = !0,
76
+ acceptedTypes: h = "image/*",
77
+ maxFileSize: x = 5 * 1024 * 1024,
78
+ onError: g
79
+ }) {
80
+ 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) => {
81
+ const B = w.target.files?.[0];
82
+ B && (l(B) && o?.(B), w.target.value = "");
83
+ }, b = () => {
84
+ s || (r ? r() : v.current?.click());
85
+ }, j = (w) => {
86
+ w.stopPropagation(), !s && n?.();
87
+ };
88
+ return /* @__PURE__ */ t.jsxs(
89
+ "div",
90
+ {
91
+ onMouseEnter: () => S(!0),
92
+ onMouseLeave: () => S(!1),
93
+ className: `relative inline-block border-inherit ${u || ""}`,
94
+ children: [
95
+ /* @__PURE__ */ t.jsx(
96
+ "input",
97
+ {
98
+ ref: v,
99
+ type: "file",
100
+ accept: h,
101
+ onChange: d,
102
+ className: "hidden",
103
+ disabled: s
104
+ }
105
+ ),
106
+ /* @__PURE__ */ t.jsx(
107
+ c.div,
108
+ {
109
+ className: `
110
+ ${H[i]}
111
+ rounded-full
112
+ overflow-hidden
113
+ flex items-center justify-center
114
+ relative
115
+ ${s ? "opacity-50 cursor-not-allowed" : ""}
116
+ `,
117
+ children: /* @__PURE__ */ t.jsx(
118
+ M,
119
+ {
120
+ urlImage: a,
121
+ fallbackText: e,
122
+ sizeImage: i,
123
+ sizeFallback: i
124
+ }
125
+ )
126
+ }
127
+ ),
128
+ /* @__PURE__ */ t.jsx(
129
+ c.button,
130
+ {
131
+ className: `
132
+ absolute
133
+ ${G[i]}
134
+ border-3
135
+ border-inherit
136
+ ${V[i]}
137
+ rounded-lg
138
+ bg-primary-default-default
139
+ hover:bg-primary-default-hover
140
+ transition-all duration-300
141
+ flex
142
+ items-center
143
+ justify-center
144
+ cursor-pointer
145
+ ${s ? "opacity-50 cursor-not-allowed" : ""}
146
+ `,
147
+ onClick: b,
148
+ disabled: s,
149
+ whileTap: s ? {} : { scale: 0.95, transition: { duration: 0.2, ease: "easeInOut" } },
150
+ initial: { scale: 0, rotate: -180 },
151
+ animate: { scale: 1, rotate: 0 },
152
+ children: /* @__PURE__ */ t.jsx(
153
+ c.svg,
154
+ {
155
+ className: `${U[i]} text-white`,
156
+ fill: "none",
157
+ stroke: "currentColor",
158
+ viewBox: "0 0 24 24",
159
+ animate: y && !s ? {
160
+ x: [0, -1, 0, 1, -1, 0, 1],
161
+ y: [0, 1, 0, 1, 0, 1, 1],
162
+ rotate: [0, 5, -3, 8, -5, 3, 1],
163
+ transition: {
164
+ duration: 2,
165
+ ease: "easeInOut"
166
+ }
167
+ } : { x: 0, y: 0, rotate: 0 },
168
+ transition: {
169
+ duration: 1.2,
170
+ repeat: 0,
171
+ ease: "easeInOut"
172
+ },
173
+ children: /* @__PURE__ */ t.jsx(
174
+ "path",
175
+ {
176
+ strokeLinecap: "round",
177
+ strokeLinejoin: "round",
178
+ strokeWidth: 2,
179
+ 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"
180
+ }
181
+ )
182
+ }
183
+ )
184
+ }
185
+ ),
186
+ /* @__PURE__ */ t.jsx($, { children: a && m && !s && /* @__PURE__ */ t.jsx(
187
+ c.button,
188
+ {
189
+ className: `
190
+ absolute
191
+ ${Z[i]}
192
+ ${R[i]}
193
+ rounded-full
194
+ shadow-lg
195
+ bg-error-light
196
+ flex
197
+ cursor-pointer
198
+ items-center
199
+ justify-center
200
+ ${s ? "opacity-50 cursor-not-allowed" : ""}
201
+ `,
202
+ disabled: s,
203
+ onClick: j,
204
+ initial: { scale: 0, opacity: 0, rotate: -90 },
205
+ animate: {
206
+ scale: y ? 1 : 0.8,
207
+ opacity: y ? 1 : 0,
208
+ rotate: 0
209
+ },
210
+ exit: { scale: 0, opacity: 0, rotate: 90 },
211
+ whileTap: { scale: 0.9 },
212
+ transition: {
213
+ type: "spring",
214
+ stiffness: 300,
215
+ damping: 25
216
+ },
217
+ children: /* @__PURE__ */ t.jsx(
218
+ c.svg,
219
+ {
220
+ className: `${R[i]} text-white p-1`,
221
+ fill: "none",
222
+ stroke: "currentColor",
223
+ viewBox: "0 0 24 24",
224
+ whileHover: { rotate: 90 },
225
+ transition: { duration: 0.2 },
226
+ children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
227
+ }
228
+ )
229
+ }
230
+ ) })
231
+ ]
232
+ }
233
+ );
234
+ }
235
+ const P = ({
236
+ index: a,
237
+ isHorizontal: e,
238
+ currentStep: o
239
+ }) => {
240
+ const r = a < o, n = a === o - 1;
241
+ return /* @__PURE__ */ t.jsxs("div", { className: `relative ${e ? "w-20 h-1" : "w-0.5 h-8"}`, children: [
242
+ /* @__PURE__ */ t.jsx(
243
+ "div",
244
+ {
245
+ className: "absolute inset-0 rounded-full bg-neutral-medium-default"
246
+ }
247
+ ),
248
+ /* @__PURE__ */ t.jsx(
249
+ c.div,
250
+ {
251
+ className: "absolute inset-0 rounded-full bg-primary-default-default",
252
+ initial: {
253
+ scaleX: e ? 0 : 1,
254
+ scaleY: e ? 1 : 0,
255
+ opacity: 0
256
+ },
257
+ animate: {
258
+ scaleX: r ? 1 : e ? 0 : 1,
259
+ scaleY: r || e ? 1 : 0,
260
+ opacity: r ? 1 : 0
261
+ },
262
+ transition: {
263
+ duration: 0.2,
264
+ ease: "easeInOut",
265
+ delay: a * 0.1
266
+ },
267
+ style: {
268
+ originX: e ? 0 : 0.5,
269
+ originY: e ? 0.5 : 0
270
+ }
271
+ }
272
+ ),
273
+ n && /* @__PURE__ */ t.jsx(
274
+ c.div,
275
+ {
276
+ className: "absolute inset-0 rounded-full bg-primary-default-default",
277
+ initial: {
278
+ scaleX: e ? 0 : 1,
279
+ scaleY: e ? 1 : 0,
280
+ opacity: 0
281
+ },
282
+ animate: {
283
+ scaleX: 1,
284
+ scaleY: 1,
285
+ opacity: [0, 0.3, 0]
286
+ },
287
+ transition: {
288
+ duration: 1.5,
289
+ repeat: 1 / 0,
290
+ ease: "easeInOut"
291
+ },
292
+ style: {
293
+ originX: e ? 0 : 0.5,
294
+ originY: e ? 0.5 : 0,
295
+ filter: "blur(4px)"
296
+ }
297
+ }
298
+ )
299
+ ] });
300
+ }, Ne = ({
301
+ steps: a,
302
+ currentStep: e,
303
+ orientation: o = "horizontal",
304
+ variant: r = "default",
305
+ size: n = "md",
306
+ className: i = "",
307
+ onStepClick: u,
308
+ allowClickableSteps: s = !1
309
+ }) => {
310
+ const m = o === "horizontal", h = (l) => ({
311
+ sm: { right: "-40px", top: "16px" },
312
+ md: { right: "-40px", top: "20px" },
313
+ lg: { right: "-40px", top: "24px" }
314
+ })[l], x = {
315
+ sm: {
316
+ circle: "w-8 h-8 text-xs",
317
+ title: "text-sm",
318
+ description: "text-xs",
319
+ spacing: m ? "gap-4" : "gap-1"
320
+ },
321
+ md: {
322
+ circle: "w-10 h-10 text-sm",
323
+ title: "text-base",
324
+ description: "text-sm",
325
+ spacing: m ? "gap-3" : "gap-2"
326
+ },
327
+ lg: {
328
+ circle: "w-12 h-12 text-base",
329
+ title: "text-lg",
330
+ description: "text-base",
331
+ spacing: m ? "gap-4" : "gap-3"
332
+ }
333
+ }, g = (l) => l < e ? "completed" : l === e ? "current" : "upcoming", v = (l) => {
334
+ const d = `${x[n].circle} rounded-full flex items-center justify-center font-medium`;
335
+ switch (l) {
336
+ case "completed":
337
+ return `${d} bg-primary-default-default text-neutral-strong-default shadow-lg`;
338
+ case "current":
339
+ return `${d} border-3 border-primary text-neutral-strong-default shadow-lg duration-900`;
340
+ default:
341
+ return `${d} bg-neutral-medium-default text-neutral-medium-default`;
342
+ }
343
+ }, y = (l) => {
344
+ s && u && u(l);
345
+ }, S = m ? `flex items-center ${i}` : `space-y-0 ${i}`;
346
+ return /* @__PURE__ */ t.jsx("div", { className: S, children: a.map((l, d) => {
347
+ const b = g(d), j = s && u;
348
+ 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: [
349
+ /* @__PURE__ */ t.jsx(
350
+ c.div,
351
+ {
352
+ className: `${v(b)} ${j ? "cursor-pointer" : ""} relative z-10`,
353
+ initial: { scale: 0.8, opacity: 0 },
354
+ animate: { scale: 1, opacity: 1 },
355
+ transition: { duration: 0.3, delay: d * 0.1 },
356
+ whileTap: j ? { scale: 0.95 } : {},
357
+ onClick: () => y(d),
358
+ 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
359
+ }
360
+ ),
361
+ d < a.length - 1 && /* @__PURE__ */ t.jsx(
362
+ "div",
363
+ {
364
+ className: "absolute",
365
+ style: h(n),
366
+ children: /* @__PURE__ */ t.jsx(
367
+ P,
368
+ {
369
+ index: d,
370
+ isHorizontal: m,
371
+ currentStep: e
372
+ }
373
+ )
374
+ }
375
+ ),
376
+ r !== "minimal" && l.description && /* @__PURE__ */ t.jsx("p", { className: f(
377
+ x[n].description,
378
+ "text-gray-400 mt-2 text-center max-w-full",
379
+ b === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"
380
+ ), children: l.description })
381
+ ] }) }) : /* @__PURE__ */ t.jsxs("div", { className: "relative flex w-36", children: [
382
+ /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col items-center w-full", children: [
383
+ /* @__PURE__ */ t.jsx(
384
+ c.div,
385
+ {
386
+ className: `${v(b)} ${j ? "cursor-pointer" : ""}`,
387
+ initial: { scale: 0.8, opacity: 0 },
388
+ animate: { scale: 1, opacity: 1 },
389
+ transition: { duration: 0.3, delay: d * 0.1 },
390
+ whileTap: j ? { scale: 0.95 } : {},
391
+ onClick: () => y(d),
392
+ 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
393
+ }
394
+ ),
395
+ d < a.length - 1 && /* @__PURE__ */ t.jsx(
396
+ P,
397
+ {
398
+ index: d,
399
+ isHorizontal: m,
400
+ currentStep: e
401
+ }
402
+ )
403
+ ] }),
404
+ r !== "minimal" && /* @__PURE__ */ t.jsx(
405
+ c.div,
406
+ {
407
+ className: `absolute -right-30 ml-4 top-3 gap-3 flex flex-col w-full ${x[n].spacing} flex h-full`,
408
+ initial: { opacity: 0, x: -10 },
409
+ animate: { opacity: 1, x: 0 },
410
+ transition: { duration: 0.3, delay: d * 0.1 + 0.1 },
411
+ 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 })
412
+ }
413
+ )
414
+ ] }) }, l.id);
415
+ }) });
416
+ }, J = (a, e) => {
417
+ D(
37
418
  () => {
38
- if (!t.current) return;
39
- const o = t.current, r = document.querySelector('[data-main-content="true"]');
419
+ if (!a.current) return;
420
+ const o = a.current, r = document.querySelector('[data-main-content="true"]');
40
421
  if (e) {
41
- c.fromTo(
422
+ p.fromTo(
42
423
  o,
43
424
  {
44
425
  width: "0rem",
@@ -50,13 +431,13 @@ const D = (t, e) => {
50
431
  duration: 0.4,
51
432
  ease: "power2.out"
52
433
  }
53
- ), r && c.to(r, {
434
+ ), r && p.to(r, {
54
435
  marginLeft: o.offsetWidth + "px",
55
436
  duration: 0.4,
56
437
  ease: "power2.out"
57
438
  });
58
439
  const n = o.querySelectorAll(".secondary-bar-content > *");
59
- n.length > 0 && c.fromTo(
440
+ n.length > 0 && p.fromTo(
60
441
  n,
61
442
  {
62
443
  y: 20,
@@ -72,92 +453,92 @@ const D = (t, e) => {
72
453
  }
73
454
  );
74
455
  } else
75
- c.to(o, {
456
+ p.to(o, {
76
457
  width: "0rem",
77
458
  opacity: 0,
78
459
  duration: 0.3,
79
460
  ease: "power2.in"
80
- }), r && c.to(r, {
461
+ }), r && p.to(r, {
81
462
  marginLeft: "0px",
82
463
  duration: 0.3,
83
464
  ease: "power2.in"
84
465
  });
85
466
  },
86
- { scope: t, dependencies: [e] }
467
+ { scope: a, dependencies: [e] }
87
468
  );
88
- }, w = ({
89
- children: t,
469
+ }, q = ({
470
+ children: a,
90
471
  isOpen: e = !1,
91
472
  className: o = "",
92
473
  width: r = "w-96",
93
474
  action: n,
94
475
  primarySidebarCollapsed: i,
95
- onClose: l
476
+ onClose: u
96
477
  }) => {
97
- const u = p(null), [f, m] = v({ left: 0, width: 0 }), { primarySidebarRef: x } = j();
98
- return q(() => {
478
+ const s = C(null), [m, h] = k({ left: 0, width: 0 }), { primarySidebarRef: x } = O();
479
+ return W(() => {
99
480
  if (x?.current) {
100
481
  const g = x.current.getBoundingClientRect();
101
- m({
482
+ h({
102
483
  left: g.width,
103
484
  width: g.width
104
485
  });
105
486
  }
106
- }, [x, e, i]), D(u, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
107
- /* @__PURE__ */ a.jsx(
487
+ }, [x, e, i]), J(s, e), /* @__PURE__ */ t.jsx(t.Fragment, { children: e && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
488
+ /* @__PURE__ */ t.jsx(
108
489
  "div",
109
490
  {
110
491
  className: "fixed inset-0 bg-black/95 z-20",
111
492
  style: {
112
- left: f.left
493
+ left: m.left
113
494
  },
114
- onClick: l
495
+ onClick: u
115
496
  }
116
497
  ),
117
- /* @__PURE__ */ a.jsx(
498
+ /* @__PURE__ */ t.jsx(
118
499
  "div",
119
500
  {
120
- ref: u,
121
- className: s(
501
+ ref: s,
502
+ className: f(
122
503
  "h-screen bg-neutral-default-default border-r-1 border-neutral-strong-default flex flex-col secondary-bar flex-shrink-0",
123
504
  "absolute top-0 z-30",
124
505
  r,
125
506
  o
126
507
  ),
127
508
  style: {
128
- left: f.left
509
+ left: m.left
129
510
  },
130
511
  "data-action": n,
131
- children: /* @__PURE__ */ a.jsx("div", { className: "secondary-bar-content", children: t })
512
+ children: /* @__PURE__ */ t.jsx("div", { className: "secondary-bar-content", children: a })
132
513
  }
133
514
  )
134
515
  ] }) });
135
- }, E = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("h-16 ", e), children: t }), O = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1 overflow-y-auto p-4", e), children: t }), z = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("p-4 border-t border-neutral-strong-default", e), children: t }), F = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1", t) }), ie = Object.assign(w, {
136
- Root: w,
137
- Header: E,
138
- Content: O,
139
- Footer: z,
140
- Spacer: F
141
- }), I = P(
516
+ }, 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, {
517
+ Root: q,
518
+ Header: K,
519
+ Content: Q,
520
+ Footer: _,
521
+ Spacer: ee
522
+ }), E = z(
142
523
  void 0
143
- ), se = () => {
144
- const t = A(I);
145
- if (!t)
524
+ ), Se = () => {
525
+ const a = X(E);
526
+ if (!a)
146
527
  throw new Error("useSidebar must be used within a Sidebar.Root");
147
- return t;
148
- }, H = ({
149
- children: t
528
+ return a;
529
+ }, te = ({
530
+ children: a
150
531
  }) => {
151
- const [e, o] = v(!1), [r, n] = v(!1), i = p(null), l = () => {
532
+ const [e, o] = k(!1), [r, n] = k(!1), i = C(null), u = () => {
152
533
  o(!1), n(!1);
153
- }, u = () => {
534
+ }, s = () => {
154
535
  o(!0), n(!1);
155
- }, L = {
536
+ }, v = {
156
537
  isCollapsed: e,
157
538
  setIsCollapsed: o,
158
539
  navbarRef: i,
159
540
  toggleCollapse: () => {
160
- e ? l() : u();
541
+ e ? u() : s();
161
542
  },
162
543
  activeSecondaryBar: r ? "notifications" : null,
163
544
  openSecondaryBar: () => {
@@ -167,22 +548,22 @@ const D = (t, e) => {
167
548
  n(!1);
168
549
  },
169
550
  toggleSecondaryBar: () => {
170
- n((R) => !R);
551
+ n((y) => !y);
171
552
  }
172
553
  };
173
- return /* @__PURE__ */ a.jsx(I.Provider, { value: L, children: t });
174
- }, y = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, W = (t, e, o) => {
175
- S(
554
+ return /* @__PURE__ */ t.jsx(E.Provider, { value: v, children: a });
555
+ }, I = (a, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? a.to(e, o, r) : a, ae = (a, e, o) => {
556
+ D(
176
557
  () => {
177
- if (!t.current) return;
178
- const r = c.timeline({
558
+ if (!a.current) return;
559
+ const r = p.timeline({
179
560
  defaults: { duration: 0.7, ease: "power1.out" }
180
561
  }), n = {
181
- navbar: t.current,
182
- navLabels: c.utils.toArray(".nav-label"),
183
- navIconWrappers: c.utils.toArray(".nav-icon-wrapper"),
184
- navIcons: c.utils.toArray(".nav-icon"),
185
- navLinkItems: c.utils.toArray(".nav-link-item"),
562
+ navbar: a.current,
563
+ navLabels: p.utils.toArray(".nav-label"),
564
+ navIconWrappers: p.utils.toArray(".nav-icon-wrapper"),
565
+ navIcons: p.utils.toArray(".nav-icon"),
566
+ navLinkItems: p.utils.toArray(".nav-link-item"),
186
567
  logoutButton: document.querySelector(".logout-button"),
187
568
  logoutLabel: document.querySelector(".logout-label"),
188
569
  logoutIcon: document.querySelector(".logout-icon"),
@@ -210,15 +591,15 @@ const D = (t, e) => {
210
591
  ),
211
592
  // Secondary bar elements
212
593
  secondaryBar: document.querySelector(".secondary-bar"),
213
- secondaryBarContent: c.utils.toArray(".secondary-bar *"),
214
- badgeInLink: c.utils.toArray(".badge-in-link")
594
+ secondaryBarContent: p.utils.toArray(".secondary-bar *"),
595
+ badgeInLink: p.utils.toArray(".badge-in-link")
215
596
  };
216
- e ? $(r, n) : M(r, n), n.secondaryBar && U(n.secondaryBar);
597
+ e ? re(r, n) : oe(r, n), n.secondaryBar && ne(n.secondaryBar);
217
598
  },
218
- { scope: t, dependencies: [e, o] }
599
+ { scope: a, dependencies: [e, o] }
219
600
  );
220
- }, $ = (t, e) => {
221
- t.to(e.navbar, {
601
+ }, re = (a, e) => {
602
+ a.to(e.navbar, {
222
603
  width: "5rem",
223
604
  duration: 0.2,
224
605
  ease: "bounce.out"
@@ -276,8 +657,8 @@ const D = (t, e) => {
276
657
  marginLeft: 0
277
658
  },
278
659
  0
279
- ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), y(
280
- t,
660
+ ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), I(
661
+ a,
281
662
  e.buttonCrevron,
282
663
  {
283
664
  width: 0,
@@ -289,8 +670,8 @@ const D = (t, e) => {
289
670
  }
290
671
  },
291
672
  0
292
- ), y(
293
- t,
673
+ ), I(
674
+ a,
294
675
  e.buttonContentChevron,
295
676
  {
296
677
  display: "none"
@@ -356,8 +737,8 @@ const D = (t, e) => {
356
737
  },
357
738
  -1
358
739
  );
359
- }, M = (t, e) => {
360
- t.to(e.navbar, { width: "20rem" }, -1).to(
740
+ }, oe = (a, e) => {
741
+ a.to(e.navbar, { width: "20rem" }, -1).to(
361
742
  e.navLinkItems,
362
743
  {
363
744
  borderRadius: "10px",
@@ -366,8 +747,8 @@ const D = (t, e) => {
366
747
  justifyContent: "flex-start"
367
748
  },
368
749
  -1
369
- ), y(
370
- t,
750
+ ), I(
751
+ a,
371
752
  e.buttonCrevron,
372
753
  {
373
754
  width: "auto",
@@ -379,8 +760,8 @@ const D = (t, e) => {
379
760
  }
380
761
  },
381
762
  0
382
- ), y(
383
- t,
763
+ ), I(
764
+ a,
384
765
  e.buttonContentChevron,
385
766
  {
386
767
  display: "flex"
@@ -484,44 +865,44 @@ const D = (t, e) => {
484
865
  },
485
866
  0
486
867
  ).to(e.navIcons, { scale: 1 }, 0.3);
487
- }, U = (t, e) => {
488
- c.to(t, {
868
+ }, ne = (a, e) => {
869
+ p.to(a, {
489
870
  x: "-100%",
490
871
  opacity: 0,
491
872
  duration: 0.3,
492
873
  ease: "power2.in"
493
874
  });
494
- }, V = N(
495
- ({ children: t, isCollapsed: e = !1, className: o = "" }, r) => {
496
- const n = p(null), { registerPrimarySidebar: i } = j(), l = T((u) => {
497
- n.current = u, typeof r == "function" ? r(u) : r && (r.current = u);
875
+ }, ie = T(
876
+ ({ children: a, isCollapsed: e = !1, className: o = "" }, r) => {
877
+ const n = C(null), { registerPrimarySidebar: i } = O(), u = Y((s) => {
878
+ n.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
498
879
  }, [r]);
499
- return C(() => {
880
+ return A(() => {
500
881
  n.current && i(n);
501
- }, [i]), W(n, e, !1), /* @__PURE__ */ a.jsx(
882
+ }, [i]), ae(n, e, !1), /* @__PURE__ */ t.jsx(
502
883
  "div",
503
884
  {
504
- ref: l,
885
+ ref: u,
505
886
  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
506
887
  ${e ? "w-16" : "w-64"} ${o}`,
507
- children: t
888
+ children: a
508
889
  }
509
890
  );
510
891
  }
511
- ), h = N(
512
- (t, e) => /* @__PURE__ */ a.jsx(H, { children: /* @__PURE__ */ a.jsx(V, { ...t, ref: e }) })
892
+ ), L = T(
893
+ (a, e) => /* @__PURE__ */ t.jsx(te, { children: /* @__PURE__ */ t.jsx(ie, { ...a, ref: e }) })
513
894
  );
514
- h.displayName = "SidebarRoot";
515
- const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: s("flex mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.jsx(
895
+ L.displayName = "SidebarRoot";
896
+ 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(
516
897
  "button",
517
898
  {
518
899
  onClick: e,
519
- title: t ? "Expandir Navbar" : "Contraer Navbar",
520
- "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
900
+ title: a ? "Expandir Navbar" : "Contraer Navbar",
901
+ "aria-label": a ? "Expandir Navbar" : "Contraer Navbar",
521
902
  className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
522
- 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" })
903
+ 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" })
523
904
  }
524
- ) }), X = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), Z = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: s("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" }) }), J = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), K = ({ className: t, size: e = "auto" }) => {
905
+ ) }), 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" }) => {
525
906
  const o = () => {
526
907
  switch (e) {
527
908
  case "auto":
@@ -534,78 +915,78 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
534
915
  return "h-8 w-8";
535
916
  }
536
917
  };
537
- return /* @__PURE__ */ a.jsx("div", { className: s(o(), t) });
538
- }, Q = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), le = Object.assign(h, {
539
- Root: h,
540
- CollapseButton: G,
541
- Header: X,
542
- Divider: Z,
543
- Content: J,
544
- Spacer: K,
545
- Footer: Q
546
- }), ce = ({
547
- children: t,
918
+ return /* @__PURE__ */ t.jsx("div", { className: f(o(), a) });
919
+ }, fe = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: e, children: a }), ke = Object.assign(L, {
920
+ Root: L,
921
+ CollapseButton: se,
922
+ Header: le,
923
+ Divider: ce,
924
+ Content: ue,
925
+ Spacer: de,
926
+ Footer: fe
927
+ }), Ie = ({
928
+ children: a,
548
929
  icon: e,
549
930
  label: o,
550
931
  href: r,
551
932
  onClick: n,
552
933
  isActive: i = !1,
553
- className: l
934
+ className: u
554
935
  }) => {
555
- const u = r ? "a" : "button";
556
- return /* @__PURE__ */ a.jsxs(
557
- u,
936
+ const s = r ? "a" : "button";
937
+ return /* @__PURE__ */ t.jsxs(
938
+ s,
558
939
  {
559
940
  href: r,
560
941
  onClick: n,
561
- className: s(
942
+ className: f(
562
943
  "nav-link-item",
563
944
  "flex items-center w-full px-3 py-2 text-left",
564
945
  "hover:bg-neutral-medium-default transition-colors rounded-lg",
565
946
  "focus:outline-none focus:ring-2 focus:ring-primary-default-default",
566
947
  i && "bg-neutral-medium-default",
567
- l
948
+ u
568
949
  ),
569
950
  children: [
570
- 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 }) }),
571
- o && /* @__PURE__ */ a.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: o }),
572
- t
951
+ 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 }) }),
952
+ o && /* @__PURE__ */ t.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: o }),
953
+ a
573
954
  ]
574
955
  }
575
956
  );
576
- }, B = ({
577
- count: t,
957
+ }, F = ({
958
+ count: a,
578
959
  maxCount: e = 9,
579
960
  className: o = "",
580
961
  size: r = "medium",
581
962
  variant: n = "primary",
582
963
  showZero: i = !1
583
964
  }) => {
584
- const l = t, u = l > e ? `+${e}` : l;
585
- if (l === 0 && !i) return null;
586
- const f = {
965
+ const u = a, s = u > e ? `+${e}` : u;
966
+ if (u === 0 && !i) return null;
967
+ const m = {
587
968
  small: "w-4.5 h-4.5 text-xs ",
588
969
  medium: "w-5 h-5 text-xs",
589
970
  large: "w-6 h-6 text-sm"
590
- }, m = {
971
+ }, h = {
591
972
  primary: "bg-primary-default-default text-neutral-strong-default",
592
973
  secondary: "bg-neutral-medium-default text-neutral-strong-default",
593
974
  success: "bg-green-500 text-white",
594
975
  warning: "bg-yellow-500 text-black",
595
976
  danger: "bg-red-500 text-white"
596
977
  };
597
- return /* @__PURE__ */ a.jsx("div", { className: s(
978
+ return /* @__PURE__ */ t.jsx("div", { className: f(
598
979
  "rounded-full flex items-center justify-center font-medium ",
599
- f[r],
600
- m[n],
980
+ m[r],
981
+ h[n],
601
982
  o
602
- ), children: /* @__PURE__ */ a.jsx("span", { children: u }) });
603
- }, ue = ({
604
- linkActions: t,
983
+ ), children: /* @__PURE__ */ t.jsx("span", { children: s }) });
984
+ }, Be = ({
985
+ linkActions: a,
605
986
  onClick: e,
606
987
  activeAction: o
607
- }) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
608
- d.div,
988
+ }) => /* @__PURE__ */ t.jsx("nav", { className: "flex flex-col gap-1", children: a?.map((r, n) => r.isView && r.viewAccess() && /* @__PURE__ */ t.jsx(
989
+ c.div,
609
990
  {
610
991
  initial: { opacity: 0 },
611
992
  animate: { opacity: 1 },
@@ -615,21 +996,21 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
615
996
  ease: "easeOut"
616
997
  },
617
998
  className: "relative flex justify-center w-full items-center px-3",
618
- children: /* @__PURE__ */ a.jsxs(
999
+ children: /* @__PURE__ */ t.jsxs(
619
1000
  "button",
620
1001
  {
621
1002
  onClick: () => {
622
1003
  e?.(r.action);
623
1004
  },
624
- className: s(
1005
+ className: f(
625
1006
  "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden h-10 ",
626
1007
  "transition-all duration-300 ease-out w-full",
627
1008
  "group hover:bg-neutral-medium-selected",
628
1009
  o === r.action ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
629
1010
  ),
630
1011
  children: [
631
- /* @__PURE__ */ a.jsx(k, { mode: "wait", children: o === r.action && /* @__PURE__ */ a.jsx(
632
- d.div,
1012
+ /* @__PURE__ */ t.jsx($, { mode: "wait", children: o === r.action && /* @__PURE__ */ t.jsx(
1013
+ c.div,
633
1014
  {
634
1015
  layoutId: "nav-active-bg",
635
1016
  className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -643,8 +1024,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
643
1024
  }
644
1025
  }
645
1026
  ) }),
646
- /* @__PURE__ */ a.jsxs(
647
- d.div,
1027
+ /* @__PURE__ */ t.jsxs(
1028
+ c.div,
648
1029
  {
649
1030
  className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
650
1031
  animate: {
@@ -655,9 +1036,9 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
655
1036
  ease: "easeOut"
656
1037
  },
657
1038
  children: [
658
- /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
659
- /* @__PURE__ */ a.jsx(
660
- d.div,
1039
+ /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3", children: [
1040
+ /* @__PURE__ */ t.jsx(
1041
+ c.div,
661
1042
  {
662
1043
  className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
663
1044
  animate: {
@@ -669,16 +1050,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
669
1050
  },
670
1051
  children: typeof r.icon == "function" ? r.icon({
671
1052
  size: 24,
672
- className: s(
1053
+ className: f(
673
1054
  "nav-icon transition-colors duration-250 ease-out",
674
1055
  o === r.action ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
675
1056
  )
676
1057
  }) : null
677
1058
  }
678
1059
  ),
679
- /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
1060
+ /* @__PURE__ */ t.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
680
1061
  ] }),
681
- /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ a.jsx(B, { count: r.count, maxCount: 9, className: "" }) : "" })
1062
+ /* @__PURE__ */ t.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ t.jsx(F, { count: r.count, maxCount: 9, className: "" }) : "" })
682
1063
  ]
683
1064
  }
684
1065
  )
@@ -687,16 +1068,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
687
1068
  )
688
1069
  },
689
1070
  n
690
- )) }), de = ({
691
- links: t,
1071
+ )) }), Le = ({
1072
+ links: a,
692
1073
  isLinkActive: e,
693
1074
  onLinkClick: o
694
- }) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
1075
+ }) => /* @__PURE__ */ t.jsx("nav", { className: "flex flex-col gap-1", children: a?.map((r, n) => {
695
1076
  const i = e(r.path) || (r.relatedPaths?.some(
696
- (l) => e(l)
1077
+ (u) => e(u)
697
1078
  ) ?? !1);
698
- return r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
699
- d.div,
1079
+ return r.isView && r.viewAccess() && /* @__PURE__ */ t.jsx(
1080
+ c.div,
700
1081
  {
701
1082
  initial: { opacity: 0 },
702
1083
  animate: { opacity: 1 },
@@ -706,21 +1087,21 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
706
1087
  ease: "easeOut"
707
1088
  },
708
1089
  className: "relative flex justify-center w-full items-center px-3",
709
- children: /* @__PURE__ */ a.jsxs(
1090
+ children: /* @__PURE__ */ t.jsxs(
710
1091
  "button",
711
1092
  {
712
1093
  onClick: () => {
713
1094
  o?.(r.path);
714
1095
  },
715
- className: s(
1096
+ className: f(
716
1097
  "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden h-10 ",
717
1098
  "transition-all duration-300 ease-out w-full",
718
1099
  "group hover:bg-neutral-medium-selected",
719
1100
  i ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
720
1101
  ),
721
1102
  children: [
722
- /* @__PURE__ */ a.jsx(k, { mode: "wait", children: i && /* @__PURE__ */ a.jsx(
723
- d.div,
1103
+ /* @__PURE__ */ t.jsx($, { mode: "wait", children: i && /* @__PURE__ */ t.jsx(
1104
+ c.div,
724
1105
  {
725
1106
  layoutId: "nav-active-bg",
726
1107
  className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -734,8 +1115,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
734
1115
  }
735
1116
  }
736
1117
  ) }),
737
- /* @__PURE__ */ a.jsxs(
738
- d.div,
1118
+ /* @__PURE__ */ t.jsxs(
1119
+ c.div,
739
1120
  {
740
1121
  className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
741
1122
  animate: {
@@ -746,9 +1127,9 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
746
1127
  ease: "easeOut"
747
1128
  },
748
1129
  children: [
749
- /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
750
- /* @__PURE__ */ a.jsx(
751
- d.div,
1130
+ /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3", children: [
1131
+ /* @__PURE__ */ t.jsx(
1132
+ c.div,
752
1133
  {
753
1134
  className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
754
1135
  animate: {
@@ -760,16 +1141,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
760
1141
  },
761
1142
  children: typeof r.icon == "function" ? r.icon({
762
1143
  size: 24,
763
- className: s(
1144
+ className: f(
764
1145
  "nav-icon transition-colors duration-250 ease-out",
765
1146
  i ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
766
1147
  )
767
1148
  }) : null
768
1149
  }
769
1150
  ),
770
- /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
1151
+ /* @__PURE__ */ t.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
771
1152
  ] }),
772
- /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ a.jsx(B, { count: r.count, maxCount: 9, className: "" }) : "" })
1153
+ /* @__PURE__ */ t.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ t.jsx(F, { count: r.count, maxCount: 9, className: "" }) : "" })
773
1154
  ]
774
1155
  }
775
1156
  )
@@ -779,42 +1160,42 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
779
1160
  },
780
1161
  n
781
1162
  );
782
- }) }), fe = ({
783
- isActiveModalNotification: t,
1163
+ }) }), $e = ({
1164
+ isActiveModalNotification: a,
784
1165
  setIsActiveModalNotification: e
785
1166
  }) => ({ handleNotificationClick: () => {
786
1167
  e(!0);
787
- }, isActiveModalNotification: t }), pe = (t) => {
788
- const e = p(null);
1168
+ }, isActiveModalNotification: a }), Re = (a) => {
1169
+ const e = C(null);
789
1170
  return {
790
- isCollapsed: t,
1171
+ isCollapsed: a,
791
1172
  navbarRef: e
792
1173
  };
793
- }, me = ({
794
- isCollapsed: t,
1174
+ }, Pe = ({
1175
+ isCollapsed: a,
795
1176
  onToggle: e
796
- }) => /* @__PURE__ */ a.jsx("div", { className: "", children: /* @__PURE__ */ a.jsx(
1177
+ }) => /* @__PURE__ */ t.jsx("div", { className: "", children: /* @__PURE__ */ t.jsx(
797
1178
  "button",
798
1179
  {
799
1180
  onClick: e,
800
- title: t ? "Expandir Navbar" : "Contraer Navbar",
801
- "aria-label": t ? "Expandir Navbar" : "Contraer Navbar",
1181
+ title: a ? "Expandir Navbar" : "Contraer Navbar",
1182
+ "aria-label": a ? "Expandir Navbar" : "Contraer Navbar",
802
1183
  className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
803
- 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" })
1184
+ 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" })
804
1185
  }
805
- ) }), xe = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
1186
+ ) }), 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(
806
1187
  "img",
807
1188
  {
808
- src: t,
1189
+ src: a,
809
1190
  className: "h-2/3 rounded-full",
810
1191
  alt: e ?? ""
811
1192
  }
812
- ) }), be = (t, e = !0) => {
813
- const o = p(null);
814
- return C(() => {
1193
+ ) }), Te = (a, e = !0) => {
1194
+ const o = C(null);
1195
+ return A(() => {
815
1196
  if (!e) return;
816
1197
  const r = (n) => {
817
- o.current && !o.current.contains(n.target) && t();
1198
+ o.current && !o.current.contains(n.target) && a();
818
1199
  };
819
1200
  return document.addEventListener("mousedown", r, {
820
1201
  capture: !0
@@ -827,60 +1208,62 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
827
1208
  capture: !0
828
1209
  });
829
1210
  };
830
- }, [t, e]), o;
1211
+ }, [a, e]), o;
831
1212
  };
832
1213
  export {
833
- ve as Avatar,
834
- B as Badge,
835
- we as Button,
836
- Ne as CardProfile,
837
- Ce as ChangueAccount,
838
- ke as CheckBox,
839
- Be as CheckboxFormik,
840
- xe as CompanyLogo,
841
- Re as DialogModal,
842
- Ae as DrawerDesktop,
843
- Ee as DrawerMobile,
844
- It as DropZone,
845
- Fe as Header,
846
- b as Icons,
847
- We as Input,
848
- Me as InputFormik,
849
- jt as LayoutGeneric,
850
- Ve as Logo,
851
- Xe as Menu,
852
- ue as NavBarActions,
853
- me as NavbarCollapseButton,
854
- de as NavbarLinks,
855
- ce as NavigationLink,
856
- St as OtpInput,
857
- Je as Pagination,
858
- Qe as ProgressBar,
859
- ie as SecondaryBar,
860
- _e as Select,
861
- tt as SelectFormik,
862
- le as Sidebar,
863
- H as SidebarProvider,
864
- Nt as SidebarRefProvider,
865
- rt as Spinner,
866
- nt as SwipeContainer,
867
- st as TabLinks,
868
- ct as Table,
869
- ut as TableBody,
870
- dt as TableCaption,
871
- ft as TableCell,
872
- pt as TableFooter,
873
- mt as TableHead,
874
- xt as TableHeader,
875
- bt as TableRow,
876
- gt as TextArea,
877
- ht as Tooltip,
878
- fe as useActionsNavbar,
879
- be as useClickOutside,
880
- qe as useDialogControl,
881
- Te as useDrawerDesktop,
882
- Oe as useDrawerMobile,
883
- pe as useNavbarCollapse,
884
- se as useSidebar,
885
- j as useSidebarContext
1214
+ M as Avatar,
1215
+ F as Badge,
1216
+ De as Button,
1217
+ Fe as CardProfile,
1218
+ Me as ChangueAccount,
1219
+ ze as CheckBox,
1220
+ Ye as CheckboxFormik,
1221
+ qe as CompanyLogo,
1222
+ Ue as DialogModal,
1223
+ Ze as DrawerDesktop,
1224
+ Qe as DrawerMobile,
1225
+ Xt as DropZone,
1226
+ tt as Header,
1227
+ N as Icons,
1228
+ rt as Input,
1229
+ nt as InputFormik,
1230
+ Et as LayoutGeneric,
1231
+ st as Logo,
1232
+ ct as Menu,
1233
+ Be as NavBarActions,
1234
+ Pe as NavbarCollapseButton,
1235
+ Le as NavbarLinks,
1236
+ Ie as NavigationLink,
1237
+ Wt as OtpInput,
1238
+ dt as Pagination,
1239
+ je as ProfilePictureUpload,
1240
+ mt as ProgressBar,
1241
+ Ce as SecondaryBar,
1242
+ xt as Select,
1243
+ gt as SelectFormik,
1244
+ ke as Sidebar,
1245
+ te as SidebarProvider,
1246
+ Ft as SidebarRefProvider,
1247
+ bt as Spinner,
1248
+ Ne as Steps,
1249
+ wt as SwipeContainer,
1250
+ Nt as TabLinks,
1251
+ St as Table,
1252
+ kt as TableBody,
1253
+ It as TableCaption,
1254
+ Bt as TableCell,
1255
+ Lt as TableFooter,
1256
+ $t as TableHead,
1257
+ Rt as TableHeader,
1258
+ Pt as TableRow,
1259
+ Tt as TextArea,
1260
+ Ot as Tooltip,
1261
+ $e as useActionsNavbar,
1262
+ Te as useClickOutside,
1263
+ Ve as useDialogControl,
1264
+ Je as useDrawerDesktop,
1265
+ _e as useDrawerMobile,
1266
+ Re as useNavbarCollapse,
1267
+ Se as useSidebar,
1268
+ O as useSidebarContext
886
1269
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "prometeo-design-system",
3
3
  "private": false,
4
- "version": "1.6.4",
4
+ "version": "1.6.6",
5
5
  "type": "module",
6
6
  "description": "design kit system",
7
7
  "main": "dist/prometeo-design-system.umd.js",
@@ -77,6 +77,10 @@
77
77
  "types": "./dist/ProgressBar.d.ts",
78
78
  "import": "./dist/ProgressBar.es.js"
79
79
  },
80
+ "./ProfilePictureUpload": {
81
+ "types": "./dist/ProfilePictureUpload.d.ts",
82
+ "import": "./dist/ProfilePictureUpload.es.js"
83
+ },
80
84
  "./Select": {
81
85
  "types": "./dist/Select.d.ts",
82
86
  "import": "./dist/Select.es.js"
@@ -89,6 +93,10 @@
89
93
  "types": "./dist/Spinner.d.ts",
90
94
  "import": "./dist/Spinner.es.js"
91
95
  },
96
+ "./Steps": {
97
+ "types": "./dist/Steps.d.ts",
98
+ "import": "./dist/Steps.es.js"
99
+ },
92
100
  "./SwipeContainer": {
93
101
  "types": "./dist/SwipeContainer.d.ts",
94
102
  "import": "./dist/SwipeContainer.es.js"