bmi-next-brokers 2.1.8 → 2.2.0

package/dist/assets/index13.css

@@ -1 +1 @@
-._overlay_1uxrl_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;display:flex;justify-content:center;align-items:center;z-index:2000;animation:_fadeIn_1uxrl_1 .25s ease-in-out;overflow:hidden}._overlay_1uxrl_1._closing_1uxrl_16{animation:_fadeOut_1uxrl_1 .25s ease-in-out forwards}._nav_1uxrl_20{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;gap:10px;margin-block:16px;color:#2054a5}._arrowBack_1uxrl_31{cursor:pointer}._title_1uxrl_35{font-family:Poppins Medium;font-size:16px;font-weight:600;line-height:normal}._content_1uxrl_42{width:100%;display:flex;flex-direction:column;padding-bottom:calc(env(safe-area-inset-bottom) + 16px);background-color:#fff;padding-inline:16px}._mainContent_1uxrl_51{display:flex;height:100%;width:100%;animation:_slideIn_1uxrl_1 .45s cubic-bezier(.4,0,.2,1) forwards;transform:translate(0)}._closing_1uxrl_16{animation:_slideOut_1uxrl_1 .45s cubic-bezier(.4,0,.2,1) forwards}._contentInner_1uxrl_63{display:flex;flex-direction:column;align-items:center;box-sizing:border-box;overflow-y:auto;overscroll-behavior:none;flex:1}._contentInner_1uxrl_63::-webkit-scrollbar{display:none}@keyframes _fadeIn_1uxrl_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_1uxrl_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_1uxrl_1{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes _slideOut_1uxrl_1{0%{transform:translate(0)}to{transform:translate(-100%)}}
+._overlay_15ved_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;display:flex;justify-content:center;align-items:center;z-index:2000;animation:_fadeIn_15ved_1 .25s ease-in-out;overflow:hidden}._overlay_15ved_1._closing_15ved_16{animation:_fadeOut_15ved_1 .25s ease-in-out forwards}._nav_15ved_20{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;gap:10px;margin-block:16px;color:#2054a5;padding-inline:16px}._arrowBack_15ved_32{cursor:pointer}._title_15ved_36{font-family:Poppins Medium;font-size:16px;font-weight:600;line-height:normal}._content_15ved_43{width:100%;display:flex;flex-direction:column;padding-bottom:calc(env(safe-area-inset-bottom) + 16px);background-color:#fff}._mainContent_15ved_51{display:flex;height:100%;width:100%;animation:_slideIn_15ved_1 .45s cubic-bezier(.4,0,.2,1) forwards;transform:translate(0)}._closing_15ved_16{animation:_slideOut_15ved_1 .45s cubic-bezier(.4,0,.2,1) forwards}._contentInner_15ved_63{display:flex;flex-direction:column;align-items:center;box-sizing:border-box;overflow-y:auto;overscroll-behavior:none;flex:1;padding-inline:16px}._contentInner_15ved_63::-webkit-scrollbar{display:none}@keyframes _fadeIn_15ved_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_15ved_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_15ved_1{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes _slideOut_15ved_1{0%{transform:translate(0)}to{transform:translate(-100%)}}

package/dist/assets/index4.css

@@ -1 +1 @@
-._stepsContainer_ma11p_1{display:flex;flex-direction:column;align-items:center}._stepWrapper_ma11p_7{display:flex;justify-content:center;align-items:center;width:100%}._step_ma11p_1{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}._iconLine_ma11p_24{display:flex;justify-content:center;align-items:center;width:100%;gap:4px}._stepSeparator_ma11p_32{flex:1;height:4px;background:#2054a5}._stepSeparatorPending_ma11p_37{opacity:.3;background:#2054a5}._textWrapper_ma11p_42{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-right:4px;width:100%;box-sizing:border-box;transition:all .3s ease}._stepTitle_ma11p_53,._stepState_ma11p_54{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-family:Poppins Regular}._start_ma11p_62{text-align:start}._middle_ma11p_66{text-align:center}._end_ma11p_70{text-align:end}._stepTitle_ma11p_53{color:#000;font-size:16px;line-height:19.2px}._stepTitle_ma11p_53._stepInProgress_ma11p_80{font-family:Poppins Medium}._stepState_ma11p_54{color:#000;font-size:13px;line-height:15.6px}._stepTitle_ma11p_53._stepPending_ma11p_90{color:#cbd5e1}._stepState_ma11p_54._stepPending_ma11p_90{color:#e2e8f0}._stepState_ma11p_54._stepCompleted_ma11p_98{color:#65a30d}._stepState_ma11p_54._stepInProgress_ma11p_80,._stepState_ma11p_54._stepBlocked_ma11p_103{color:#2054a5}._iconDiv_ma11p_107{display:flex;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1}._iconDiv_ma11p_107 svg{width:30px;height:30px}@media (max-width: 697px){._responsive_ma11p_121 ._textWrapper_ma11p_42{display:none}}@media (max-width: 1280px){._responsive_ma11p_121 ._iconDiv_ma11p_107 svg{width:22px;height:22px}}@media (max-width: 1280px){._responsive_ma11p_121 ._stepSeparator_ma11p_32{height:2px}._responsive_ma11p_121 ._stepTitle_ma11p_53{font-size:12px;line-height:14.4px}._responsive_ma11p_121 ._stepState_ma11p_54{font-size:11px;line-height:13.2px}}
+._stepsContainer_145x1_1{display:flex;flex-direction:column;align-items:center;width:100%}._stepWrapper_145x1_8{display:flex;justify-content:center;align-items:center;width:100%}._step_145x1_1{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}._iconLine_145x1_25{display:flex;justify-content:center;align-items:center;width:100%;gap:4px}._stepSeparator_145x1_33{flex:1;height:4px;background:#2054a5}._stepSeparatorPending_145x1_38{opacity:.3;background:#2054a5}._textWrapper_145x1_43{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-right:4px;width:100%;box-sizing:border-box;transition:all .3s ease}._stepTitle_145x1_54,._stepState_145x1_55{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-family:Poppins Regular}._start_145x1_63{text-align:start}._middle_145x1_67{text-align:center}._end_145x1_71{text-align:end}._stepTitle_145x1_54{color:#000;font-size:16px;line-height:19.2px}._stepTitle_145x1_54._stepInProgress_145x1_81{font-family:Poppins Medium}._stepState_145x1_55{color:#000;font-size:13px;line-height:15.6px}._stepTitle_145x1_54._stepPending_145x1_91{color:#cbd5e1}._stepState_145x1_55._stepPending_145x1_91{color:#e2e8f0}._stepState_145x1_55._stepCompleted_145x1_99{color:#65a30d}._stepState_145x1_55._stepInProgress_145x1_81,._stepState_145x1_55._stepBlocked_145x1_104{color:#2054a5}._iconDiv_145x1_108{display:flex;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1}._iconDiv_145x1_108 svg{width:30px;height:30px}@media (max-width: 697px){._responsive_145x1_122 ._textWrapper_145x1_43{display:none}}@media (max-width: 1280px){._responsive_145x1_122 ._iconDiv_145x1_108 svg{width:22px;height:22px}}@media (max-width: 1280px){._responsive_145x1_122 ._stepSeparator_145x1_33{height:2px}._responsive_145x1_122 ._stepTitle_145x1_54{font-size:12px;line-height:14.4px}._responsive_145x1_122 ._stepState_145x1_55{font-size:11px;line-height:13.2px}}

package/dist/components/sheet/index.d.ts

@@ -8,6 +8,7 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
     withAutoClose?: boolean;
     onBack?: (() => Promise<void> | void) | false;
     navIcon?: IconName;
+    navClassName?: string;
 }
 /**
  * Componente Sheet que renderiza un contenedor modal mediante un portal,
@@ -22,6 +23,7 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
  * @param onBack - Callback opcional al pulsar el icono del nav. Si se pasa `false`, no se renderiza el icono del nav.
  * @param withAutoClose Cerrar el sheet de manera automática (booleano -> por defecto false).
  * @param navIcon Icono de la barra de navegación del sheet.
+ * @param navClassName Clases CSS adicionales para personalizar el contenedor de navegación.
  * @param children Contenido que se renderiza dentro del Sheet.
  * @param className Clases CSS adicionales para personalizar el contenedor interno.
  * @param props Props HTML adicionales que se aplican al contenedor principal.
@@ -61,6 +63,8 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
  *        isOpen={isOpen}
  *        setIsOpen={setIsOpen}
  *        title="Título del sheet"
+ *        navClassName={{backgroundColor: "red"}}
+ *        style={{paddingInline: "13px"}}
  *        withAutoClose={false}
  *        navIcon="Close" >
  *
@@ -74,4 +78,4 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
  * }
  * ```
  */
-export declare const Sheet: ({ isOpen, setIsOpen, title, children, className, withAutoClose, onBack, navIcon, ...props }: SheetProps) => import('react').ReactPortal | null;
+export declare const Sheet: ({ isOpen, setIsOpen, title, children, navClassName, className, withAutoClose, onBack, navIcon, ...props }: SheetProps) => import('react').ReactPortal | null;

package/dist/components/sheet/index.js

@@ -1,63 +1,64 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { useState as x } from "react";
-import { CloseContext as C } from "../../hooks/useClose.js";
-import { useScrollLock as h } from "../../hooks/useScrollLock.js";
-import { useCloseOnBack as p } from "../../hooks/useCloseOnBack.js";
-import { Icon as y } from "../../icons/Icon.js";
-import { r as g } from "../../index-CGDUIzcq.js";
-import '../../assets/index13.css';const I = "_overlay_1uxrl_1", N = "_closing_1uxrl_16", k = "_nav_1uxrl_20", w = "_arrowBack_1uxrl_31", $ = "_title_1uxrl_35", B = "_content_1uxrl_42", S = "_mainContent_1uxrl_51", j = "_contentInner_1uxrl_63", n = {
-  overlay: I,
-  closing: N,
-  nav: k,
-  arrowBack: w,
-  title: $,
-  content: B,
-  mainContent: S,
-  contentInner: j
-}, T = ({
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { CloseContext as p } from "../../hooks/useClose.js";
+import { useScrollLock as y } from "../../hooks/useScrollLock.js";
+import { useCloseOnBack as g } from "../../hooks/useCloseOnBack.js";
+import { Icon as I } from "../../icons/Icon.js";
+import { r as N } from "../../index-CGDUIzcq.js";
+import '../../assets/index13.css';const $ = "_overlay_15ved_1", k = "_closing_15ved_16", w = "_nav_15ved_20", x = "_arrowBack_15ved_32", B = "_title_15ved_36", S = "_content_15ved_43", j = "_mainContent_15ved_51", E = "_contentInner_15ved_63", e = {
+  overlay: $,
+  closing: k,
+  nav: w,
+  arrowBack: x,
+  title: B,
+  content: S,
+  mainContent: j,
+  contentInner: E
+}, q = ({
   isOpen: o,
   setIsOpen: i,
   title: m,
-  children: _,
-  className: u,
-  withAutoClose: d = !0,
-  onBack: e,
-  navIcon: f = "ArrowBackIosNew",
-  ...v
+  children: d,
+  navClassName: _,
+  className: v,
+  withAutoClose: f = !0,
+  onBack: t,
+  navIcon: u = "ArrowBackIosNew",
+  ...C
 }) => {
-  const [r, s] = x(!1);
-  h(o);
-  const l = () => {
-    d && (s(!0), setTimeout(() => {
-      i(!1), s(!1);
+  const [s, r] = h(!1);
+  y(o);
+  const c = () => {
+    f && (r(!0), setTimeout(() => {
+      i(!1), r(!1);
     }, 450));
-  }, c = async () => {
-    e !== !1 && (typeof e == "function" && await e(), l());
+  }, a = async () => {
+    t !== !1 && (typeof t == "function" && await t(), c());
   };
-  return p({ isOpen: o, onClose: c }), o ? g.createPortal(
-    /* @__PURE__ */ t("div", { className: `${n.overlay} ${r ? n.closing : ""}`, children: /* @__PURE__ */ t(
+  return g({ isOpen: o, onClose: a }), o ? N.createPortal(
+    /* @__PURE__ */ n("div", { className: `${e.overlay} ${s ? e.closing : ""}`, children: /* @__PURE__ */ n(
       "div",
       {
-        className: `${n.mainContent} ${r ? n.closing : ""}`,
-        children: /* @__PURE__ */ a("div", { className: n.content, children: [
-          /* @__PURE__ */ a("div", { className: n.nav, children: [
-            e !== !1 && /* @__PURE__ */ t(
-              y,
+        className: `${e.mainContent} ${s ? e.closing : ""}`,
+        children: /* @__PURE__ */ l("div", { className: e.content, children: [
+          /* @__PURE__ */ l("div", { className: `${e.nav} ${_ || ""}`, children: [
+            t !== !1 && /* @__PURE__ */ n(
+              I,
               {
-                name: f,
+                name: u,
                 size: 24,
-                className: n.arrowBack,
-                onClick: c
+                className: e.arrowBack,
+                onClick: a
               }
             ),
-            /* @__PURE__ */ t("span", { className: n.title, children: m })
+            /* @__PURE__ */ n("span", { className: e.title, children: m })
           ] }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ n(
             "div",
             {
-              className: `${n.contentInner} ${u || ""}`,
-              ...v,
-              children: /* @__PURE__ */ t(C.Provider, { value: l, children: _ })
+              className: `${e.contentInner} ${v || ""}`,
+              ...C,
+              children: /* @__PURE__ */ n(p.Provider, { value: c, children: d })
             }
           )
         ] })
@@ -67,5 +68,5 @@ import '../../assets/index13.css';const I = "_overlay_1uxrl_1", N = "_closing_1u
   ) : null;
 };
 export {
-  T as Sheet
+  q as Sheet
 };

package/dist/components/stepper/index.js

@@ -1,15 +1,15 @@
-import { jsx as a, jsxs as _ } from "react/jsx-runtime";
-import { Icon as m } from "../../icons/Icon.js";
-import '../../assets/index4.css';const g = "_stepsContainer_ma11p_1", P = "_stepWrapper_ma11p_7", f = "_step_ma11p_1", v = "_iconLine_ma11p_24", h = "_stepSeparator_ma11p_32", $ = "_stepSeparatorPending_ma11p_37", C = "_textWrapper_ma11p_42", N = "_stepTitle_ma11p_53", S = "_stepState_ma11p_54", u = "_start_ma11p_62", T = "_middle_ma11p_66", W = "_end_ma11p_70", B = "_stepInProgress_ma11p_80", D = "_stepPending_ma11p_90", b = "_stepCompleted_ma11p_98", k = "_stepBlocked_ma11p_103", L = "_iconDiv_ma11p_107", I = "_responsive_ma11p_121", s = {
-  stepsContainer: g,
-  stepWrapper: P,
-  step: f,
-  iconLine: v,
-  stepSeparator: h,
-  stepSeparatorPending: $,
+import { jsx as n, jsxs as _ } from "react/jsx-runtime";
+import { Icon as g } from "../../icons/Icon.js";
+import '../../assets/index4.css';const P = "_stepsContainer_145x1_1", f = "_stepWrapper_145x1_8", v = "_step_145x1_1", x = "_iconLine_145x1_25", $ = "_stepSeparator_145x1_33", h = "_stepSeparatorPending_145x1_38", C = "_textWrapper_145x1_43", S = "_stepTitle_145x1_54", N = "_stepState_145x1_55", u = "_start_145x1_63", T = "_middle_145x1_67", W = "_end_145x1_71", B = "_stepInProgress_145x1_81", D = "_stepPending_145x1_91", b = "_stepCompleted_145x1_99", k = "_stepBlocked_145x1_104", L = "_iconDiv_145x1_108", I = "_responsive_145x1_122", s = {
+  stepsContainer: P,
+  stepWrapper: f,
+  step: v,
+  iconLine: x,
+  stepSeparator: $,
+  stepSeparatorPending: h,
   textWrapper: C,
-  stepTitle: N,
-  stepState: S,
+  stepTitle: S,
+  stepState: N,
   start: u,
   middle: T,
   end: W,
@@ -19,45 +19,46 @@ import '../../assets/index4.css';const g = "_stepsContainer_ma11p_1", P = "_step
   stepBlocked: k,
   iconDiv: L,
   responsive: I
-}, j = (e, t, n) => n && e + 1 < t ? "StepBlocked" : e + 1 < t ? "StepDone" : e + 1 === t ? "StepInProgress" : "StepPending", y = (e, t, n) => n && e + 1 < t ? s.stepBlocked : e + 1 < t ? s.stepCompleted : e + 1 === t ? s.stepInProgress : s.stepPending, E = (e, t, n, o) => o && e + 1 < t ? "No aplica" : t > n || e + 1 < t ? "Completado" : e + 1 === t ? "En Proceso" : "Pendiente", q = (e, t) => e === 0 ? "start" : e === t - 1 ? "end" : "middle", A = ({
+}, j = (e, t, r) => r && e + 1 < t ? "StepBlocked" : e + 1 < t ? "StepDone" : e + 1 === t ? "StepInProgress" : "StepPending", y = (e, t, r) => r && e + 1 < t ? s.stepBlocked : e + 1 < t ? s.stepCompleted : e + 1 === t ? s.stepInProgress : s.stepPending, E = (e, t, r, i) => i && e + 1 < t ? "No aplica" : t > r || e + 1 < t ? "Completado" : e + 1 === t ? "En Proceso" : "Pendiente", q = (e, t) => e === 0 ? "start" : e === t - 1 ? "end" : "middle", A = ({
   steps: e,
   currentStep: t,
-  responsive: n = !1,
-  ...o
-}) => e != null && e.length ? /* @__PURE__ */ a(
+  responsive: r = !1,
+  className: i,
+  ...l
+}) => e != null && e.length ? /* @__PURE__ */ n(
   "div",
   {
-    className: `${s.stepContainer} ${n ? s.responsive : ""}`,
-    ...o,
-    children: /* @__PURE__ */ a("div", { className: s.stepWrapper, children: e.map((p, r) => {
-      const l = j(r, t, p.disabled), i = q(r, e.length), c = y(r, t, p.disabled), d = p.stateText ? p.stateText : E(r, t, e.length, p.disabled);
+    className: `${s.stepsContainer} ${r ? s.responsive : ""} ${i && i}`,
+    ...l,
+    children: /* @__PURE__ */ n("div", { className: s.stepWrapper, children: e.map((o, a) => {
+      const d = j(a, t, o.disabled), p = q(a, e.length), c = y(a, t, o.disabled), m = o.stateText ? o.stateText : E(a, t, e.length, o.disabled);
       return /* @__PURE__ */ _(
         "div",
         {
-          className: `${s.step} ${s[i]} ${p.disabled ? s.stepDisabled : ""}`,
+          className: `${s.step} ${s[p]} ${o.disabled ? s.stepDisabled : ""}`,
           children: [
             /* @__PURE__ */ _("div", { className: s.iconLine, children: [
-              i !== "start" && /* @__PURE__ */ a(
+              p !== "start" && /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `${s.stepSeparator} ${t - 1 >= r ? "" : s.stepSeparatorPending}`
+                  className: `${s.stepSeparator} ${t - 1 >= a ? "" : s.stepSeparatorPending}`
                 }
               ),
-              /* @__PURE__ */ a("div", { className: s.iconDiv, children: /* @__PURE__ */ a(m, { name: l }) }),
-              i !== "end" && /* @__PURE__ */ a(
+              /* @__PURE__ */ n("div", { className: s.iconDiv, children: /* @__PURE__ */ n(g, { name: d }) }),
+              p !== "end" && /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `${s.stepSeparator} ${t - 1 > r ? "" : s.stepSeparatorPending}`
+                  className: `${s.stepSeparator} ${t - 1 > a ? "" : s.stepSeparatorPending}`
                 }
               )
             ] }),
             /* @__PURE__ */ _("div", { className: s.textWrapper, children: [
-              /* @__PURE__ */ a("span", { className: `${s.stepTitle} ${c}`, children: p.title }),
-              /* @__PURE__ */ a("span", { className: `${s.stepState} ${c}`, children: d })
+              /* @__PURE__ */ n("span", { className: `${s.stepTitle} ${c}`, children: o.title }),
+              /* @__PURE__ */ n("span", { className: `${s.stepState} ${c}`, children: m })
             ] })
           ]
         },
-        r
+        a
       );
     }) })
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next-brokers",
   "description": "Componentes de UI para proyecto BMI Next Brokers",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "author": "BMI Ahorro España",
   "contributors": [
     "José Ramón Jiménez <jrjimenez@bmicos.com>",