prometeo-design-system 1.6.3 → 1.6.5

package/dist/Button.es.js

@@ -1,8 +1,8 @@
 import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { c as n } from "./cn-B6yFEsav.js";
-import { c as S } from "./index-BOQuZ0gG.js";
-import { useAnimationControls as C, motion as m } from "framer-motion";
-const N = S(
+import { c as C } from "./index-BOQuZ0gG.js";
+import { useAnimationControls as N, motion as m } from "framer-motion";
+const z = C(
   "flex items-center justify-center cursor-pointer focus:outline-none font-semibold rounded-md transition-colors",
   {
     variants: {
@@ -75,7 +75,7 @@ const N = S(
     }
   }
 );
-function B({
+function R({
   label: o = "Selene",
   onClick: p,
   icon: l,
@@ -92,14 +92,15 @@ function B({
   children: u,
   Spinner: g,
   className: y,
-  ...h
+  form: h,
+  ...w
 }) {
-  const d = C(), w = () => {
+  const d = N(), j = () => {
     !a || r || e || !s || d.start({ rotate: 90 });
-  }, j = () => {
+  }, H = () => {
     !a || r || e || !s || d.start({ rotate: 0 });
-  }, H = n(
-    N({
+  }, S = n(
+    z({
       variant: v,
       color: x,
       size: i,
@@ -111,16 +112,17 @@ function B({
   return /* @__PURE__ */ t.jsx(
     m.button,
     {
+      form: h,
       onClick: p,
-      className: H,
+      className: S,
       whileHover: a && !r && !e ? { scale: 1.05 } : {},
       whileTap: a && !r && !e ? { scale: 0.98 } : {},
       transition: { type: "spring", stiffness: 400, damping: 17 },
-      onHoverStart: w,
-      onHoverEnd: j,
+      onHoverStart: j,
+      onHoverEnd: H,
       disabled: r || e,
       type: b,
-      ...h,
+      ...w,
       children: e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
         g,
         i !== "small" && /* @__PURE__ */ t.jsx("span", { children: f })
@@ -143,5 +145,5 @@ function B({
   );
 }
 export {
-  B as default
+  R as default
 };

package/dist/InputFormik.es.js

@@ -60,7 +60,7 @@ const U = ({
         {
           htmlFor: x || t.name,
           className: u(
-            "absolute transition-all duration-200 ease-in-out pointer-events-none bg-inherit px-1 z-10",
+            "absolute transition-all duration-200 font-bold text-sm ease-in-out pointer-events-none bg-inherit px-1 z-10",
             z(),
             I(),
             b || d ? "text-primary-default-default" : f ? "text-red-500" : "text-neutral-medium-default"

package/dist/components/Button/Button.d.ts

@@ -22,6 +22,7 @@ export interface ButtonProps extends VariantProps<typeof buttonVariants> {
     className?: string;
     disabled?: boolean;
     variant?: "filled" | "outline" | "text";
+    form?: string;
 }
-export default function Button({ label, onClick, icon, contentClassName, loadingText, animate, animateIcon, isLoading, disabled, type, variant, color, size, children, Spinner, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function Button({ label, onClick, icon, contentClassName, loadingText, animate, animateIcon, isLoading, disabled, type, variant, color, size, children, Spinner, className, form, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Select } from './components/Select/Select';
 export { default as SelectFormik } from './components/SelectFormik/SelectFormik';
 export { default as ChangueAccount } from './components/Sidebar/components/changue-account';
 export { default as Spinner } from './components/Spinner/Spinner';
+export { default as Steps } from './components/Steps/Steps';
 export { default as SwipeContainer } from './components/SwipeContainer/SwipeContainer';
 export { default as TabLinks } from './components/TabLinks/TabLinks';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/Table/Table';
@@ -56,6 +57,7 @@ export type { INavAction, INavLink, Role, RoleLevels, } from './components/Sideb
 export type { SidebarContextValue } from './components/Sidebar/hooks/useSidebarHook';
 export type { SpinnerProps, SpinnerSize, SpinnerVariant, } from './components/Spinner/Spinner';
 export type { PaginationProps } from './components/Pagination/Pagination';
+export type { Step, StepsProps } from './components/Steps/Steps';
 export type { SelectOptionRendererProps, SelectProps, SelectionDisplayProps, } from './components/Select/Select';
 export type { ISelectFormik, ISelectFormikOption, } from './components/SelectFormik/SelectFormik';
 export type { DialogHandle } from './components/Dialog/Dialog';

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

@@ -1,44 +1,225 @@
-import { default as ve } from "./Avatar.es.js";
-import { default as we } from "./Button.es.js";
-import { C as Ne, a as Ce } from "./CardProfile-BZajBGbO.js";
-import { default as ke } from "./CheckBox.es.js";
-import { default as Be } from "./CheckboxFormik.es.js";
-import { default as Re, useDialogControl as qe } from "./DialogModal.es.js";
-import { default as Ae, useDrawerDesktop as Te } from "./DrawerDesktop.es.js";
-import { default as Ee, useDrawerMobile as Oe } from "./DrawerMobile.es.js";
-import { default as Fe } from "./Header.es.js";
-import { default as We } from "./Input.es.js";
-import { default as Me } from "./InputFormik.es.js";
-import { default as Ve } from "./Logo.es.js";
-import { Menu as Xe } from "./Menu.es.js";
-import { default as Je } from "./Pagination.es.js";
-import { default as Qe } from "./ProgressBar.es.js";
-import { default as _e } from "./Select.es.js";
-import { default as tt } from "./SelectFormik.es.js";
-import { default as rt } from "./Spinner.es.js";
-import { default as nt } from "./SwipeContainer.es.js";
-import { default as st } from "./TabLinks.es.js";
-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";
-import { default as gt } from "./TextArea.es.js";
-import { default as ht } from "./Tooltip.es.js";
-import { u as j } from "./LayoutGeneric-jDE96L2N.js";
-import { L as jt, S as Nt } from "./LayoutGeneric-jDE96L2N.js";
+import { default as ke } from "./Avatar.es.js";
+import { default as Be } from "./Button.es.js";
+import { C as Re, a as qe } from "./CardProfile-BZajBGbO.js";
+import { default as $e } from "./CheckBox.es.js";
+import { default as Te } from "./CheckboxFormik.es.js";
+import { default as De, useDialogControl as Ee } from "./DialogModal.es.js";
+import { default as ze, useDrawerDesktop as We } from "./DrawerDesktop.es.js";
+import { default as Ye, useDrawerMobile as Me } from "./DrawerMobile.es.js";
+import { default as Ve } from "./Header.es.js";
+import { default as Ze } from "./Input.es.js";
+import { default as Je } from "./InputFormik.es.js";
+import { default as Qe } from "./Logo.es.js";
+import { Menu as et } from "./Menu.es.js";
+import { default as at } from "./Pagination.es.js";
+import { default as ot } from "./ProgressBar.es.js";
+import { default as st } from "./Select.es.js";
+import { default as lt } from "./SelectFormik.es.js";
+import { default as ut } from "./Spinner.es.js";
 import { j as a } from "./jsx-runtime-ByW6EXIE.js";
-import { c as s } from "./cn-B6yFEsav.js";
-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";
-import { useGSAP as S } from "@gsap/react";
-import c from "gsap";
+import { c as u } from "./cn-B6yFEsav.js";
+import { motion as f, AnimatePresence as L } from "framer-motion";
 import { Icons as b } from "./Icons.es.js";
-import { motion as d, AnimatePresence as k } from "framer-motion";
-import { default as St } from "./OtpInput.es.js";
-import { DropZone as It } from "./DropZone.es.js";
-const D = (t, e) => {
-  S(
+import { default as ft } from "./SwipeContainer.es.js";
+import { default as pt } from "./TabLinks.es.js";
+import { Table as gt, TableBody as yt, TableCaption as bt, TableCell as ht, TableFooter as vt, TableHead as wt, TableHeader as jt, TableRow as Nt } from "./Table.es.js";
+import { default as St } from "./TextArea.es.js";
+import { default as It } from "./Tooltip.es.js";
+import { u as R } from "./LayoutGeneric-jDE96L2N.js";
+import { L as Lt, S as Rt } from "./LayoutGeneric-jDE96L2N.js";
+import { useRef as v, useState as S, useLayoutEffect as D, createContext as E, useContext as F, forwardRef as q, useCallback as z, useEffect as P } from "react";
+import { useGSAP as $ } from "@gsap/react";
+import p from "gsap";
+import { default as Pt } from "./OtpInput.es.js";
+import { DropZone as At } from "./DropZone.es.js";
+const I = ({
+  index: t,
+  isHorizontal: e,
+  currentStep: o
+}) => {
+  const r = t < o, n = t === o - 1;
+  return /* @__PURE__ */ a.jsxs("div", { className: `relative ${e ? "w-20 h-1" : "w-0.5 h-8"}`, children: [
+    /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full bg-neutral-medium-default"
+      }
+    ),
+    /* @__PURE__ */ a.jsx(
+      f.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: e ? 0 : 1,
+          scaleY: e ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: r ? 1 : e ? 0 : 1,
+          scaleY: r || e ? 1 : 0,
+          opacity: r ? 1 : 0
+        },
+        transition: {
+          duration: 0.2,
+          ease: "easeInOut",
+          delay: t * 0.1
+        },
+        style: {
+          originX: e ? 0 : 0.5,
+          originY: e ? 0.5 : 0
+        }
+      }
+    ),
+    n && /* @__PURE__ */ a.jsx(
+      f.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: e ? 0 : 1,
+          scaleY: e ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: 1,
+          scaleY: 1,
+          opacity: [0, 0.3, 0]
+        },
+        transition: {
+          duration: 1.5,
+          repeat: 1 / 0,
+          ease: "easeInOut"
+        },
+        style: {
+          originX: e ? 0 : 0.5,
+          originY: e ? 0.5 : 0,
+          filter: "blur(4px)"
+        }
+      }
+    )
+  ] });
+}, fe = ({
+  steps: t,
+  currentStep: e,
+  orientation: o = "horizontal",
+  variant: r = "default",
+  size: n = "md",
+  className: s = "",
+  onStepClick: l,
+  allowClickableSteps: d = !1
+}) => {
+  const m = o === "horizontal", g = (i) => ({
+    sm: { right: "-40px", top: "16px" },
+    md: { right: "-40px", top: "20px" },
+    lg: { right: "-40px", top: "24px" }
+  })[i], x = {
+    sm: {
+      circle: "w-8 h-8 text-xs",
+      title: "text-sm",
+      description: "text-xs",
+      spacing: m ? "gap-4" : "gap-1"
+    },
+    md: {
+      circle: "w-10 h-10 text-sm",
+      title: "text-base",
+      description: "text-sm",
+      spacing: m ? "gap-3" : "gap-2"
+    },
+    lg: {
+      circle: "w-12 h-12 text-base",
+      title: "text-lg",
+      description: "text-base",
+      spacing: m ? "gap-4" : "gap-3"
+    }
+  }, h = (i) => i < e ? "completed" : i === e ? "current" : "upcoming", w = (i) => {
+    const c = `${x[n].circle} rounded-full flex items-center justify-center font-medium`;
+    switch (i) {
+      case "completed":
+        return `${c} bg-primary-default-default text-neutral-strong-default shadow-lg`;
+      case "current":
+        return `${c} border-3 border-primary text-neutral-strong-default shadow-lg duration-900`;
+      default:
+        return `${c} bg-neutral-medium-default text-neutral-medium-default`;
+    }
+  }, j = (i) => {
+    d && l && l(i);
+  }, O = m ? `flex items-center ${s}` : `space-y-0 ${s}`;
+  return /* @__PURE__ */ a.jsx("div", { className: O, children: t.map((i, c) => {
+    const y = h(c), N = d && l;
+    return /* @__PURE__ */ a.jsx("div", { className: "flex items-center", children: m ? /* @__PURE__ */ a.jsx("div", { className: "flex", children: /* @__PURE__ */ a.jsxs("div", { className: "w-40 flex flex-col items-center relative", children: [
+      /* @__PURE__ */ a.jsx(
+        f.div,
+        {
+          className: `${w(y)} ${N ? "cursor-pointer" : ""} relative z-10`,
+          initial: { scale: 0.8, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { duration: 0.3, delay: c * 0.1 },
+          whileTap: N ? { scale: 0.95 } : {},
+          onClick: () => j(c),
+          children: r === "numbered" || !i.icon ? y === "completed" ? /* @__PURE__ */ a.jsx(f.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ a.jsx(b.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ a.jsx("span", { children: c + 1 }) : i.icon
+        }
+      ),
+      c < t.length - 1 && /* @__PURE__ */ a.jsx(
+        "div",
+        {
+          className: "absolute",
+          style: g(n),
+          children: /* @__PURE__ */ a.jsx(
+            I,
+            {
+              index: c,
+              isHorizontal: m,
+              currentStep: e
+            }
+          )
+        }
+      ),
+      r !== "minimal" && i.description && /* @__PURE__ */ a.jsx("p", { className: u(
+        x[n].description,
+        "text-gray-400 mt-2 text-center max-w-full",
+        y === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"
+      ), children: i.description })
+    ] }) }) : /* @__PURE__ */ a.jsxs("div", { className: "relative flex w-36", children: [
+      /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col items-center w-full", children: [
+        /* @__PURE__ */ a.jsx(
+          f.div,
+          {
+            className: `${w(y)} ${N ? "cursor-pointer" : ""}`,
+            initial: { scale: 0.8, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { duration: 0.3, delay: c * 0.1 },
+            whileTap: N ? { scale: 0.95 } : {},
+            onClick: () => j(c),
+            children: r === "numbered" || !i.icon ? y === "completed" ? /* @__PURE__ */ a.jsx(f.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ a.jsx(b.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ a.jsx("span", { children: c + 1 }) : i.icon
+          }
+        ),
+        c < t.length - 1 && /* @__PURE__ */ a.jsx(
+          I,
+          {
+            index: c,
+            isHorizontal: m,
+            currentStep: e
+          }
+        )
+      ] }),
+      r !== "minimal" && /* @__PURE__ */ a.jsx(
+        f.div,
+        {
+          className: `absolute -right-30 ml-4 top-3 gap-3 flex flex-col w-full ${x[n].spacing} flex  h-full`,
+          initial: { opacity: 0, x: -10 },
+          animate: { opacity: 1, x: 0 },
+          transition: { duration: 0.3, delay: c * 0.1 + 0.1 },
+          children: i.description && /* @__PURE__ */ a.jsx("p", { className: u(x[n].description, "text-gray-400", y === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"), children: i.description })
+        }
+      )
+    ] }) }, i.id);
+  }) });
+}, W = (t, e) => {
+  $(
     () => {
       if (!t.current) return;
       const o = t.current, r = document.querySelector('[data-main-content="true"]');
       if (e) {
-        c.fromTo(
+        p.fromTo(
           o,
           {
             width: "0rem",
@@ -50,13 +231,13 @@ const D = (t, e) => {
             duration: 0.4,
             ease: "power2.out"
           }
-        ), r && c.to(r, {
+        ), r && p.to(r, {
           marginLeft: o.offsetWidth + "px",
           duration: 0.4,
           ease: "power2.out"
         });
         const n = o.querySelectorAll(".secondary-bar-content > *");
-        n.length > 0 && c.fromTo(
+        n.length > 0 && p.fromTo(
           n,
           {
             y: 20,
@@ -72,12 +253,12 @@ const D = (t, e) => {
           }
         );
       } else
-        c.to(o, {
+        p.to(o, {
           width: "0rem",
           opacity: 0,
           duration: 0.3,
           ease: "power2.in"
-        }), r && c.to(r, {
+        }), r && p.to(r, {
           marginLeft: "0px",
           duration: 0.3,
           ease: "power2.in"
@@ -85,31 +266,31 @@ const D = (t, e) => {
     },
     { scope: t, dependencies: [e] }
   );
-}, w = ({
+}, B = ({
   children: t,
   isOpen: e = !1,
   className: o = "",
   width: r = "w-96",
   action: n,
-  primarySidebarCollapsed: i,
+  primarySidebarCollapsed: s,
   onClose: l
 }) => {
-  const u = p(null), [f, m] = v({ left: 0, width: 0 }), { primarySidebarRef: x } = j();
-  return q(() => {
+  const d = v(null), [m, g] = S({ left: 0, width: 0 }), { primarySidebarRef: x } = R();
+  return D(() => {
     if (x?.current) {
-      const g = x.current.getBoundingClientRect();
-      m({
-        left: g.width,
-        width: g.width
+      const h = x.current.getBoundingClientRect();
+      g({
+        left: h.width,
+        width: h.width
       });
     }
-  }, [x, e, i]), D(u, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+  }, [x, e, s]), W(d, e), /* @__PURE__ */ a.jsx(a.Fragment, { children: e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(
       "div",
       {
         className: "fixed inset-0 bg-black/95 z-20",
         style: {
-          left: f.left
+          left: m.left
         },
         onClick: l
       }
@@ -117,47 +298,47 @@ const D = (t, e) => {
     /* @__PURE__ */ a.jsx(
       "div",
       {
-        ref: u,
-        className: s(
+        ref: d,
+        className: u(
           "h-screen bg-neutral-default-default border-r-1 border-neutral-strong-default flex flex-col secondary-bar flex-shrink-0",
           "absolute top-0 z-30",
           r,
           o
         ),
         style: {
-          left: f.left
+          left: m.left
         },
         "data-action": n,
         children: /* @__PURE__ */ a.jsx("div", { className: "secondary-bar-content", children: t })
       }
     )
   ] }) });
-}, 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, {
-  Root: w,
-  Header: E,
-  Content: O,
-  Footer: z,
-  Spacer: F
-}), I = P(
+}, X = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("h-16 ", e), children: t }), Y = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1 overflow-y-auto p-4", e), children: t }), M = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: u("p-4 border-t border-neutral-strong-default", e), children: t }), U = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("flex-1", t) }), me = Object.assign(B, {
+  Root: B,
+  Header: X,
+  Content: Y,
+  Footer: M,
+  Spacer: U
+}), A = E(
   void 0
-), se = () => {
-  const t = A(I);
+), pe = () => {
+  const t = F(A);
   if (!t)
     throw new Error("useSidebar must be used within a Sidebar.Root");
   return t;
-}, H = ({
+}, V = ({
   children: t
 }) => {
-  const [e, o] = v(!1), [r, n] = v(!1), i = p(null), l = () => {
+  const [e, o] = S(!1), [r, n] = S(!1), s = v(null), l = () => {
     o(!1), n(!1);
-  }, u = () => {
+  }, d = () => {
     o(!0), n(!1);
-  }, L = {
+  }, w = {
     isCollapsed: e,
     setIsCollapsed: o,
-    navbarRef: i,
+    navbarRef: s,
     toggleCollapse: () => {
-      e ? l() : u();
+      e ? l() : d();
     },
     activeSecondaryBar: r ? "notifications" : null,
     openSecondaryBar: () => {
@@ -167,22 +348,22 @@ const D = (t, e) => {
       n(!1);
     },
     toggleSecondaryBar: () => {
-      n((R) => !R);
+      n((j) => !j);
     }
   };
-  return /* @__PURE__ */ a.jsx(I.Provider, { value: L, children: t });
-}, y = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, W = (t, e, o) => {
-  S(
+  return /* @__PURE__ */ a.jsx(A.Provider, { value: w, children: t });
+}, C = (t, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? t.to(e, o, r) : t, G = (t, e, o) => {
+  $(
     () => {
       if (!t.current) return;
-      const r = c.timeline({
+      const r = p.timeline({
         defaults: { duration: 0.7, ease: "power1.out" }
       }), n = {
         navbar: t.current,
-        navLabels: c.utils.toArray(".nav-label"),
-        navIconWrappers: c.utils.toArray(".nav-icon-wrapper"),
-        navIcons: c.utils.toArray(".nav-icon"),
-        navLinkItems: c.utils.toArray(".nav-link-item"),
+        navLabels: p.utils.toArray(".nav-label"),
+        navIconWrappers: p.utils.toArray(".nav-icon-wrapper"),
+        navIcons: p.utils.toArray(".nav-icon"),
+        navLinkItems: p.utils.toArray(".nav-link-item"),
         logoutButton: document.querySelector(".logout-button"),
         logoutLabel: document.querySelector(".logout-label"),
         logoutIcon: document.querySelector(".logout-icon"),
@@ -210,14 +391,14 @@ const D = (t, e) => {
         ),
         // Secondary bar elements
         secondaryBar: document.querySelector(".secondary-bar"),
-        secondaryBarContent: c.utils.toArray(".secondary-bar *"),
-        badgeInLink: c.utils.toArray(".badge-in-link")
+        secondaryBarContent: p.utils.toArray(".secondary-bar *"),
+        badgeInLink: p.utils.toArray(".badge-in-link")
       };
-      e ? $(r, n) : M(r, n), n.secondaryBar && U(n.secondaryBar);
+      e ? Z(r, n) : H(r, n), n.secondaryBar && J(n.secondaryBar);
     },
     { scope: t, dependencies: [e, o] }
   );
-}, $ = (t, e) => {
+}, Z = (t, e) => {
   t.to(e.navbar, {
     width: "5rem",
     duration: 0.2,
@@ -276,7 +457,7 @@ const D = (t, e) => {
       marginLeft: 0
     },
     0
-  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), y(
+  ).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), C(
     t,
     e.buttonCrevron,
     {
@@ -289,7 +470,7 @@ const D = (t, e) => {
       }
     },
     0
-  ), y(
+  ), C(
     t,
     e.buttonContentChevron,
     {
@@ -356,7 +537,7 @@ const D = (t, e) => {
     },
     -1
   );
-}, M = (t, e) => {
+}, H = (t, e) => {
   t.to(e.navbar, { width: "20rem" }, -1).to(
     e.navLinkItems,
     {
@@ -366,7 +547,7 @@ const D = (t, e) => {
       justifyContent: "flex-start"
     },
     -1
-  ), y(
+  ), C(
     t,
     e.buttonCrevron,
     {
@@ -379,7 +560,7 @@ const D = (t, e) => {
       }
     },
     0
-  ), y(
+  ), C(
     t,
     e.buttonContentChevron,
     {
@@ -484,21 +665,21 @@ const D = (t, e) => {
     },
     0
   ).to(e.navIcons, { scale: 1 }, 0.3);
-}, U = (t, e) => {
-  c.to(t, {
+}, J = (t, e) => {
+  p.to(t, {
     x: "-100%",
     opacity: 0,
     duration: 0.3,
     ease: "power2.in"
   });
-}, V = N(
+}, K = q(
   ({ children: t, isCollapsed: e = !1, className: o = "" }, r) => {
-    const n = p(null), { registerPrimarySidebar: i } = j(), l = T((u) => {
-      n.current = u, typeof r == "function" ? r(u) : r && (r.current = u);
+    const n = v(null), { registerPrimarySidebar: s } = R(), l = z((d) => {
+      n.current = d, typeof r == "function" ? r(d) : r && (r.current = d);
     }, [r]);
-    return C(() => {
-      n.current && i(n);
-    }, [i]), W(n, e, !1), /* @__PURE__ */ a.jsx(
+    return P(() => {
+      n.current && s(n);
+    }, [s]), G(n, e, !1), /* @__PURE__ */ a.jsx(
       "div",
       {
         ref: l,
@@ -508,11 +689,11 @@ const D = (t, e) => {
       }
     );
   }
-), h = N(
-  (t, e) => /* @__PURE__ */ a.jsx(H, { children: /* @__PURE__ */ a.jsx(V, { ...t, ref: e }) })
+), k = q(
+  (t, e) => /* @__PURE__ */ a.jsx(V, { children: /* @__PURE__ */ a.jsx(K, { ...t, ref: e }) })
 );
-h.displayName = "SidebarRoot";
-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(
+k.displayName = "SidebarRoot";
+const Q = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: u("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.jsx(
   "button",
   {
     onClick: e,
@@ -521,7 +702,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
     children: t ? /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
   }
-) }), 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" }) => {
+) }), _ = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: `${e} sidebar-header`, children: t }), ee = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: u("px-3 flex justify-center items-center w-full mb-4", t), children: /* @__PURE__ */ a.jsx("div", { className: "border-b border-neutral-strong-default border-1 w-full" }) }), te = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), ae = ({ className: t, size: e = "auto" }) => {
   const o = () => {
     switch (e) {
       case "auto":
@@ -534,36 +715,36 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         return "h-8 w-8";
     }
   };
-  return /* @__PURE__ */ a.jsx("div", { className: s(o(), t) });
-}, Q = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), le = Object.assign(h, {
-  Root: h,
-  CollapseButton: G,
-  Header: X,
-  Divider: Z,
-  Content: J,
-  Spacer: K,
-  Footer: Q
-}), ce = ({
+  return /* @__PURE__ */ a.jsx("div", { className: u(o(), t) });
+}, re = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: e, children: t }), xe = Object.assign(k, {
+  Root: k,
+  CollapseButton: Q,
+  Header: _,
+  Divider: ee,
+  Content: te,
+  Spacer: ae,
+  Footer: re
+}), ge = ({
   children: t,
   icon: e,
   label: o,
   href: r,
   onClick: n,
-  isActive: i = !1,
+  isActive: s = !1,
   className: l
 }) => {
-  const u = r ? "a" : "button";
+  const d = r ? "a" : "button";
   return /* @__PURE__ */ a.jsxs(
-    u,
+    d,
     {
       href: r,
       onClick: n,
-      className: s(
+      className: u(
         "nav-link-item",
         "flex items-center w-full px-3 py-2 text-left",
         "hover:bg-neutral-medium-default transition-colors rounded-lg",
         "focus:outline-none focus:ring-2 focus:ring-primary-default-default",
-        i && "bg-neutral-medium-default",
+        s && "bg-neutral-medium-default",
         l
       ),
       children: [
@@ -573,39 +754,39 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
       ]
     }
   );
-}, B = ({
+}, T = ({
   count: t,
   maxCount: e = 9,
   className: o = "",
   size: r = "medium",
   variant: n = "primary",
-  showZero: i = !1
+  showZero: s = !1
 }) => {
-  const l = t, u = l > e ? `+${e}` : l;
-  if (l === 0 && !i) return null;
-  const f = {
+  const l = t, d = 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"
-  }, m = {
+  }, g = {
     primary: "bg-primary-default-default text-neutral-strong-default",
     secondary: "bg-neutral-medium-default text-neutral-strong-default",
     success: "bg-green-500 text-white",
     warning: "bg-yellow-500 text-black",
     danger: "bg-red-500 text-white"
   };
-  return /* @__PURE__ */ a.jsx("div", { className: s(
+  return /* @__PURE__ */ a.jsx("div", { className: u(
     "rounded-full flex items-center justify-center font-medium ",
-    f[r],
-    m[n],
+    m[r],
+    g[n],
     o
-  ), children: /* @__PURE__ */ a.jsx("span", { children: u }) });
-}, ue = ({
+  ), children: /* @__PURE__ */ a.jsx("span", { children: d }) });
+}, ye = ({
   linkActions: t,
   onClick: e,
   activeAction: o
 }) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
-  d.div,
+  f.div,
   {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
@@ -621,15 +802,15 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
         onClick: () => {
           e?.(r.action);
         },
-        className: s(
+        className: u(
           "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
           "transition-all duration-300 ease-out w-full",
           "group hover:bg-neutral-medium-selected",
           o === r.action ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
         ),
         children: [
-          /* @__PURE__ */ a.jsx(k, { mode: "wait", children: o === r.action && /* @__PURE__ */ a.jsx(
-            d.div,
+          /* @__PURE__ */ a.jsx(L, { mode: "wait", children: o === r.action && /* @__PURE__ */ a.jsx(
+            f.div,
             {
               layoutId: "nav-active-bg",
               className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -644,7 +825,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
             }
           ) }),
           /* @__PURE__ */ a.jsxs(
-            d.div,
+            f.div,
             {
               className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
               animate: {
@@ -657,7 +838,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
               children: [
                 /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
                   /* @__PURE__ */ a.jsx(
-                    d.div,
+                    f.div,
                     {
                       className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                       animate: {
@@ -669,7 +850,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                       },
                       children: typeof r.icon == "function" ? r.icon({
                         size: 24,
-                        className: s(
+                        className: u(
                           "nav-icon transition-colors duration-250 ease-out",
                           o === r.action ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                         )
@@ -678,7 +859,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                   ),
                   /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
                 ] }),
-                /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ a.jsx(B, { count: r.count, maxCount: 9, className: "" }) : "" })
+                /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ a.jsx(T, { count: r.count, maxCount: 9, className: "" }) : "" })
               ]
             }
           )
@@ -687,16 +868,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
     )
   },
   n
-)) }), de = ({
+)) }), be = ({
   links: t,
   isLinkActive: e,
   onLinkClick: o
 }) => /* @__PURE__ */ a.jsx("nav", { className: "flex flex-col gap-1", children: t?.map((r, n) => {
-  const i = e(r.path) || (r.relatedPaths?.some(
+  const s = e(r.path) || (r.relatedPaths?.some(
     (l) => e(l)
   ) ?? !1);
   return r.isView && r.viewAccess() && /* @__PURE__ */ a.jsx(
-    d.div,
+    f.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -712,15 +893,15 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
           onClick: () => {
             o?.(r.path);
           },
-          className: s(
+          className: u(
             "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
             "transition-all duration-300 ease-out w-full",
             "group hover:bg-neutral-medium-selected",
-            i ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+            s ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
           ),
           children: [
-            /* @__PURE__ */ a.jsx(k, { mode: "wait", children: i && /* @__PURE__ */ a.jsx(
-              d.div,
+            /* @__PURE__ */ a.jsx(L, { mode: "wait", children: s && /* @__PURE__ */ a.jsx(
+              f.div,
               {
                 layoutId: "nav-active-bg",
                 className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
@@ -735,7 +916,7 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
               }
             ) }),
             /* @__PURE__ */ a.jsxs(
-              d.div,
+              f.div,
               {
                 className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
                 animate: {
@@ -748,11 +929,11 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                 children: [
                   /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ a.jsx(
-                      d.div,
+                      f.div,
                       {
                         className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
                         animate: {
-                          scale: i ? 1.05 : 1
+                          scale: s ? 1.05 : 1
                         },
                         transition: {
                           duration: 0.25,
@@ -760,16 +941,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
                         },
                         children: typeof r.icon == "function" ? r.icon({
                           size: 24,
-                          className: s(
+                          className: u(
                             "nav-icon transition-colors duration-250 ease-out",
-                            i ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
+                            s ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
                           )
                         }) : null
                       }
                     ),
                     /* @__PURE__ */ a.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
                   ] }),
-                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ a.jsx(B, { count: r.count, maxCount: 9, className: "" }) : "" })
+                  /* @__PURE__ */ a.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ a.jsx(T, { count: r.count, maxCount: 9, className: "" }) : "" })
                 ]
               }
             )
@@ -779,18 +960,18 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
     },
     n
   );
-}) }), fe = ({
+}) }), he = ({
   isActiveModalNotification: t,
   setIsActiveModalNotification: e
 }) => ({ handleNotificationClick: () => {
   e(!0);
-}, isActiveModalNotification: t }), pe = (t) => {
-  const e = p(null);
+}, isActiveModalNotification: t }), ve = (t) => {
+  const e = v(null);
   return {
     isCollapsed: t,
     navbarRef: e
   };
-}, me = ({
+}, we = ({
   isCollapsed: t,
   onToggle: e
 }) => /* @__PURE__ */ a.jsx("div", { className: "", children: /* @__PURE__ */ a.jsx(
@@ -802,16 +983,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
     className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
     children: t ? /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a.jsx(b.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
   }
-) }), 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(
+) }), je = ({ logoUrl: t, companyName: e }) => /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ a.jsx(
   "img",
   {
     src: t,
     className: "h-2/3 rounded-full",
     alt: e ?? ""
   }
-) }), be = (t, e = !0) => {
-  const o = p(null);
-  return C(() => {
+) }), Ne = (t, e = !0) => {
+  const o = v(null);
+  return P(() => {
     if (!e) return;
     const r = (n) => {
       o.current && !o.current.contains(n.target) && t();
@@ -830,57 +1011,58 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
   }, [t, e]), o;
 };
 export {
-  ve as Avatar,
-  B as Badge,
-  we as Button,
-  Ne as CardProfile,
-  Ce as ChangueAccount,
-  ke as CheckBox,
-  Be as CheckboxFormik,
-  xe as CompanyLogo,
-  Re as DialogModal,
-  Ae as DrawerDesktop,
-  Ee as DrawerMobile,
-  It as DropZone,
-  Fe as Header,
+  ke as Avatar,
+  T as Badge,
+  Be as Button,
+  Re as CardProfile,
+  qe as ChangueAccount,
+  $e as CheckBox,
+  Te as CheckboxFormik,
+  je as CompanyLogo,
+  De as DialogModal,
+  ze as DrawerDesktop,
+  Ye as DrawerMobile,
+  At as DropZone,
+  Ve as Header,
   b as Icons,
-  We as Input,
-  Me as InputFormik,
-  jt as LayoutGeneric,
-  Ve as Logo,
-  Xe as Menu,
-  ue as NavBarActions,
-  me as NavbarCollapseButton,
-  de as NavbarLinks,
-  ce as NavigationLink,
-  St as OtpInput,
-  Je as Pagination,
-  Qe as ProgressBar,
-  ie as SecondaryBar,
-  _e as Select,
-  tt as SelectFormik,
-  le as Sidebar,
-  H as SidebarProvider,
-  Nt as SidebarRefProvider,
-  rt as Spinner,
-  nt as SwipeContainer,
-  st as TabLinks,
-  ct as Table,
-  ut as TableBody,
-  dt as TableCaption,
-  ft as TableCell,
-  pt as TableFooter,
-  mt as TableHead,
-  xt as TableHeader,
-  bt as TableRow,
-  gt as TextArea,
-  ht as Tooltip,
-  fe as useActionsNavbar,
-  be as useClickOutside,
-  qe as useDialogControl,
-  Te as useDrawerDesktop,
-  Oe as useDrawerMobile,
-  pe as useNavbarCollapse,
-  se as useSidebar,
-  j as useSidebarContext
+  Ze as Input,
+  Je as InputFormik,
+  Lt as LayoutGeneric,
+  Qe as Logo,
+  et as Menu,
+  ye as NavBarActions,
+  we as NavbarCollapseButton,
+  be as NavbarLinks,
+  ge as NavigationLink,
+  Pt as OtpInput,
+  at as Pagination,
+  ot as ProgressBar,
+  me as SecondaryBar,
+  st as Select,
+  lt as SelectFormik,
+  xe as Sidebar,
+  V as SidebarProvider,
+  Rt as SidebarRefProvider,
+  ut as Spinner,
+  fe as Steps,
+  ft as SwipeContainer,
+  pt as TabLinks,
+  gt as Table,
+  yt as TableBody,
+  bt as TableCaption,
+  ht as TableCell,
+  vt as TableFooter,
+  wt as TableHead,
+  jt as TableHeader,
+  Nt as TableRow,
+  St as TextArea,
+  It as Tooltip,
+  he as useActionsNavbar,
+  Ne as useClickOutside,
+  Ee as useDialogControl,
+  We as useDrawerDesktop,
+  Me as useDrawerMobile,
+  ve as useNavbarCollapse,
+  pe as useSidebar,
+  R as useSidebarContext
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "1.6.3",
+  "version": "1.6.5",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -89,6 +89,10 @@
       "types": "./dist/Spinner.d.ts",
       "import": "./dist/Spinner.es.js"
     },
+    "./Steps": {
+      "types": "./dist/Steps.d.ts",
+      "import": "./dist/Steps.es.js"
+    },
     "./SwipeContainer": {
       "types": "./dist/SwipeContainer.d.ts",
       "import": "./dist/SwipeContainer.es.js"