@telefonica/mistica 16.48.0 → 16.49.0

package/dist-es/stepper.js

@@ -51,110 +51,112 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import * as p from "react";
+import { jsx as e, jsxs as S } from "react/jsx-runtime";
+import * as m from "react";
 import d from "classnames";
-import { Text1 as F, Text2 as I } from "./text.js";
-import { useTheme as M, useElementDimensions as j } from "./hooks.js";
+import { Text1 as F, Text as I, getTextSizes as M } from "./text.js";
+import { useTheme as j, useElementDimensions as z } from "./hooks.js";
 import { stepperCompletedStep as B, stepperCurrentStep as D } from "./text-tokens.js";
 import E from "./icons/icon-success.js";
-import { stepper as H, vars as z, listItem as L, step as O, stepIconNumber as S, iconAnimation as V, number as q, currentNumber as G, textContainer as J, bar as K, barFilled as Q, barFilledAnimation as U, barFilledReverseAnimation as W } from "./stepper.css-mistica.js";
-import { applyCssVars as X, pxToRem as Y } from "./utils/css.js";
+import { stepper as H, vars as L, listItem as O, step as V, stepIconNumber as v, iconAnimation as q, number as G, currentNumber as J, textContainer as K, bar as Q, barFilled as U, barFilledAnimation as W, barFilledReverseAnimation as X } from "./stepper.css-mistica.js";
+import { applyCssVars as Y, pxToRem as Z } from "./utils/css.js";
 import { vars as l } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as Z } from "./utils/dom.js";
-import _ from "./screen-reader-only.js";
-const ee = (param)=>{
-    let { steps: c, currentIndex: n, "aria-label": v, "aria-labelledby": y, "aria-description": x, "aria-describedby": N, dataAttributes: C } = param;
-    const { texts: h, t: u, textPresets: g } = M(), { height: A, ref: $ } = j(), T = A, [r, P] = p.useState(Math.ceil(n)), [i, R] = p.useState(!1);
-    p.useEffect(()=>{
+import { getPrefixedDataAttributes as _ } from "./utils/dom.js";
+import ee from "./screen-reader-only.js";
+const te = (param)=>{
+    let { steps: c, currentIndex: n, "aria-label": x, "aria-labelledby": y, "aria-description": g, "aria-describedby": N, dataAttributes: C } = param;
+    const { texts: h, t: u, textPresets: f } = j(), { height: A, ref: T } = z(), $ = A, [r, P] = m.useState(Math.ceil(n)), [a, w] = m.useState(!1);
+    m.useEffect(()=>{
         const s = Math.ceil(n);
-        r !== s && (R(s < r), P(s));
+        r !== s && (w(s < r), P(s));
     }, [
         n,
         c,
         r
     ]);
-    const k = h.stepperCompletedStep || u(B), w = h.stepperCurrentStep || u(D);
+    const R = h.stepperCompletedStep || u(B), k = h.stepperCurrentStep || u(D);
     return(// The explicit role="list" is needed for Safari VoiceOver when setting css list-style: none
     // aria-description is not supported by the eslint rule
     // eslint-disable-next-line jsx-a11y/no-redundant-roles, jsx-a11y/role-supports-aria-props
     /* @__PURE__ */ e("ol", _object_spread_props(_object_spread({
         role: "list",
         className: H,
-        style: X({
-            [z.stepperMinHeight]: Y(40 + T)
+        style: Y({
+            [L.stepperMinHeight]: Z(40 + $)
         })
-    }, Z(C, "Stepper")), {
-        "aria-label": v,
+    }, _(C, "Stepper")), {
+        "aria-label": x,
         "aria-labelledby": y,
-        "aria-description": x,
+        "aria-description": g,
         "aria-describedby": N,
-        children: c.map((s, a)=>{
-            const t = a === r, f = a === c.length - 1, o = a < r, m = a === r - 1;
-            return /* @__PURE__ */ b("li", {
-                className: L,
-                style: f ? void 0 : {
+        children: c.map((s, i)=>{
+            const t = i === r, b = i === c.length - 1, o = i < r, p = i === r - 1;
+            return /* @__PURE__ */ S("li", {
+                className: O,
+                style: b ? void 0 : {
                     flex: 1
                 },
                 "aria-current": t ? "step" : void 0,
                 children: [
-                    /* @__PURE__ */ b("div", {
-                        className: O,
+                    /* @__PURE__ */ S("div", {
+                        className: V,
                         children: [
                             o ? /* @__PURE__ */ e("div", {
-                                className: d(S, {
-                                    [V]: m && !i
+                                className: d(v, {
+                                    [q]: p && !a
                                 }),
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ e(E, {
                                     color: l.colors.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !m || i
+                                    skipAnimation: !p || a
                                 })
                             }) : /* @__PURE__ */ e("div", {
-                                className: d(S, q, {
-                                    [G]: t || t
+                                className: d(v, G, {
+                                    [J]: t || t
                                 }),
                                 children: /* @__PURE__ */ e(F, {
                                     as: "span",
-                                    weight: g.indicator.weight,
+                                    weight: f.indicator.weight,
                                     color: t ? l.colors.textPrimaryInverse : l.colors.textSecondary,
                                     "aria-hidden": "true",
-                                    children: a + 1
+                                    children: i + 1
                                 })
                             }),
                             /* @__PURE__ */ e("div", {
-                                className: J,
+                                className: K,
                                 "aria-hidden": "true",
-                                ref: $,
-                                children: /* @__PURE__ */ e(I, {
+                                ref: T,
+                                children: /* @__PURE__ */ e(I, _object_spread_props(_object_spread({}, M({
+                                    textPreset: f.stepperStepLabel
+                                })), {
+                                    weight: "regular",
                                     as: "div",
-                                    regular: !0,
                                     color: o || t ? l.colors.textPrimary : l.colors.textSecondary,
                                     children: s
-                                })
+                                }))
                             }),
-                            /* @__PURE__ */ e(_, {
+                            /* @__PURE__ */ e(ee, {
                                 children: /* @__PURE__ */ e("span", {
-                                    children: `${o ? `${k}: ` : t ? `${w}: ` : ""}${s}`
+                                    children: `${o ? `${R}: ` : t ? `${k}: ` : ""}${s}`
                                 })
                             })
                         ]
                     }),
-                    !f && /* @__PURE__ */ e("div", {
-                        className: K,
+                    !b && /* @__PURE__ */ e("div", {
+                        className: Q,
                         "aria-hidden": "true",
                         children: (o || t) && /* @__PURE__ */ e("div", {
                             className: d({
-                                [Q]: i && t || o,
-                                [U]: m && !i,
-                                [W]: t && i
+                                [U]: a && t || o,
+                                [W]: p && !a,
+                                [X]: t && a
                             })
                         })
                     })
                 ]
-            }, a);
+            }, i);
         })
     })));
-}, de = ee;
-export { de as default };
+}, he = te;
+export { he as default };