@telefonica/mistica 16.1.1 → 16.3.0

package/dist-es/timer.js

@@ -52,20 +52,19 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsxs as v, jsx as m } from "react/jsx-runtime";
-import x from "classnames";
-import * as y from "react";
-import ee from "./box.js";
-import { useTheme as k, useIsomorphicLayoutEffect as te } from "./hooks.js";
-import re from "./inline.js";
+import F from "classnames";
+import * as f from "react";
+import { useTheme as k, useIsomorphicLayoutEffect as ee } from "./hooks.js";
+import te from "./inline.js";
 import q from "./screen-reader-only.js";
-import { Text2 as ne, Text6 as se } from "./text.js";
-import { useThemeVariant as ae, ThemeVariant as oe } from "./theme-variant-context.js";
-import { inlineText as F, timerWrapper as ie, shortLabelText as le, boxedTimerValueContainer as ue, timerDisplayValue as ce, boxedTimerDisplayValue as de, unitContainer as B } from "./timer.css-mistica.js";
-import { getPrefixedDataAttributes as T } from "./utils/dom.js";
-import { isEqual as me } from "./utils/helpers.js";
-import { isRunningAcceptanceTest as z } from "./utils/platform.js";
-import { timerDaysShortLabel as he, timerHoursShortLabel as Le, timerMinutesShortLabel as be, timerSecondsShortLabel as ge, timerDayLongLabel as R, timerHourLongLabel as _, timerMinuteLongLabel as G, timerSecondLongLabel as J, timerDaysLongLabel as O, timerHoursLongLabel as E, timerMinutesLongLabel as K, timerSecondsLongLabel as Q, timerAnd as A, timerDisplayMinutesLabel as j, timerDisplaySecondsLabel as w } from "./text-tokens.js";
-const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s, a, o, i)=>{
+import { Text2 as ne, Text6 as re } from "./text.js";
+import { useThemeVariant as se, ThemeVariant as ae } from "./theme-variant-context.js";
+import { inlineText as j, timerWrapper as oe, shortLabelText as ie, boxedTimerValueContainer as le, timerDisplayValue as ue, boxedTimerDisplayValue as ce, unitContainer as T } from "./timer.css-mistica.js";
+import { getPrefixedDataAttributes as z } from "./utils/dom.js";
+import { isEqual as de } from "./utils/helpers.js";
+import { isRunningAcceptanceTest as B } from "./utils/platform.js";
+import { timerDaysShortLabel as me, timerHoursShortLabel as he, timerMinutesShortLabel as Le, timerSecondsShortLabel as be, timerDayLongLabel as R, timerHourLongLabel as _, timerMinuteLongLabel as G, timerSecondLongLabel as J, timerDaysLongLabel as O, timerHoursLongLabel as E, timerMinutesLongLabel as K, timerSecondsLongLabel as Q, timerAnd as A, timerDisplayMinutesLabel as x, timerDisplaySecondsLabel as w } from "./text-tokens.js";
+const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, ge = $ * P, H = (s, a, o, i)=>{
     a = i === "none" && a === "days" ? "hours" : a, o = i === "none" && o === "days" ? "hours" : o;
     const c = [
         "seconds",
@@ -91,33 +90,33 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
             unit: "seconds",
             value: s.seconds
         }
-    ].filter((c)=>H(c.unit, a, o, i)), Y = (s)=>z() ? 0 : Math.max(0, (typeof s == "object" ? s : new Date(s)).valueOf() - Date.now()), U = (param)=>{
+    ].filter((c)=>H(c.unit, a, o, i)), Y = (s)=>B() ? 0 : Math.max(0, (typeof s == "object" ? s : new Date(s)).valueOf() - Date.now()), U = (param)=>{
     let { endTimestamp: s, labelType: a, minTimeUnit: o, maxTimeUnit: i, onProgress: c } = param;
-    const [L, b] = y.useState(Y(s));
-    te(()=>{
+    const [L, b] = f.useState(Y(s));
+    ee(()=>{
         let u;
         const N = ()=>{
             const I = Y(s);
             b(I), I || clearInterval(u);
         };
-        if (!z()) return N(), u = setInterval(N, C), ()=>clearInterval(u);
+        if (!B()) return N(), u = setInterval(N, C), ()=>clearInterval(u);
     }, [
         s
     ]);
-    const e = H("days", o, i, a), t = H("hours", o, i, a), p = H("minutes", o, i, a), l = e ? "days" : t ? "hours" : p ? "minutes" : "seconds", g = Math.floor(L / P) % 24, M = Math.floor(L / Z) % 60, D = Math.floor(L / C) % 60, h = Math.floor(L / Se), S = l === "hours" ? g + h * $ : g, f = l === "minutes" ? M + V * (h * $ + S) : M, r = l === "seconds" ? D + X * (h * $ * V + S * V + f) : D, [n, d] = y.useState(W({
+    const e = H("days", o, i, a), t = H("hours", o, i, a), p = H("minutes", o, i, a), l = e ? "days" : t ? "hours" : p ? "minutes" : "seconds", g = Math.floor(L / P) % 24, M = Math.floor(L / Z) % 60, D = Math.floor(L / C) % 60, h = Math.floor(L / ge), S = l === "hours" ? g + h * $ : g, y = l === "minutes" ? M + V * (h * $ + S) : M, n = l === "seconds" ? D + X * (h * $ * V + S * V + y) : D, [r, d] = f.useState(W({
         days: h,
         hours: S,
-        minutes: f,
-        seconds: r
+        minutes: y,
+        seconds: n
     }, o, i, a));
-    return y.useEffect(()=>{
+    return f.useEffect(()=>{
         const u = W({
             days: h,
             hours: S,
-            minutes: f,
-            seconds: r
+            minutes: y,
+            seconds: n
         }, o, i, a);
-        if (!me(u, n)) {
+        if (!de(u, r)) {
             d(u);
             const N = {};
             u.forEach((I)=>N[I.unit] = I.value), c == null || c(N);
@@ -125,27 +124,27 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
     }, [
         h,
         S,
-        f,
-        r,
+        y,
+        n,
         a,
         o,
         i,
-        n,
+        r,
         c
-    ]), n;
-}, Oe = (param)=>{
+    ]), r;
+}, Re = (param)=>{
     let { endTimestamp: s, labelType: a = "none", minTimeUnit: o, maxTimeUnit: i, onProgress: c, dataAttributes: L, "aria-label": b } = param;
-    const { texts: e, t } = k(), p = y.useId(), l = U({
+    const { texts: e, t } = k(), p = f.useId(), l = U({
         endTimestamp: s,
         labelType: a,
         minTimeUnit: o,
         maxTimeUnit: i,
         onProgress: c
     }), g = {
-        days: e.timerDaysShortLabel || t(he),
-        hours: e.timerHoursShortLabel || t(Le),
-        minutes: e.timerMinutesShortLabel || t(be),
-        seconds: e.timerSecondsShortLabel || t(ge)
+        days: e.timerDaysShortLabel || t(me),
+        hours: e.timerHoursShortLabel || t(he),
+        minutes: e.timerMinutesShortLabel || t(Le),
+        seconds: e.timerSecondsShortLabel || t(be)
     }, M = {
         days: e.timerDayLongLabel || t(R),
         hours: e.timerHourLongLabel || t(_),
@@ -156,76 +155,76 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
         hours: e.timerHoursLongLabel || t(E),
         minutes: e.timerMinutesLongLabel || t(K),
         seconds: e.timerSecondsLongLabel || t(Q)
-    }, h = (r)=>{
-        const n = Math.max(String(r).length, a === "long" ? 1 : 2);
+    }, h = (n)=>{
+        const r = Math.max(String(n).length, a === "long" ? 1 : 2);
         return /* @__PURE__ */ m("span", {
-            className: B,
+            className: T,
             style: {
-                minWidth: `${n}ch`
+                minWidth: `${r}ch`
             },
-            children: String(r).padStart(n, "0")
+            children: String(n).padStart(r, "0")
         });
     }, S = ()=>{
         switch(a){
             case "none":
-                return l.map((r, n)=>/* @__PURE__ */ v(y.Fragment, {
+                return l.map((n, r)=>/* @__PURE__ */ v(f.Fragment, {
                         children: [
-                            n > 0 && ":",
-                            h(r.value)
+                            r > 0 && ":",
+                            h(n.value)
                         ]
-                    }, n));
+                    }, r));
             case "short":
-                return l.map((r, n)=>/* @__PURE__ */ v(y.Fragment, {
+                return l.map((n, r)=>/* @__PURE__ */ v(f.Fragment, {
                         children: [
-                            n > 0 && " ",
+                            r > 0 && " ",
                             /* @__PURE__ */ v("span", {
-                                className: le,
+                                className: ie,
                                 children: [
-                                    h(r.value),
-                                    ` ${g[r.unit]}`
+                                    h(n.value),
+                                    ` ${g[n.unit]}`
                                 ]
                             })
                         ]
-                    }, n));
+                    }, r));
             case "long":
             default:
-                return l.map((r, n)=>/* @__PURE__ */ v(y.Fragment, {
+                return l.map((n, r)=>/* @__PURE__ */ v(f.Fragment, {
                         children: [
-                            n > 0 && " ",
-                            h(r.value),
-                            ` ${r.value === 1 ? M[r.unit] : D[r.unit]}`,
-                            n === l.length - 2 && ` ${e.timerAnd || t(A)}`,
-                            n < l.length - 2 && ","
+                            r > 0 && " ",
+                            h(n.value),
+                            ` ${n.value === 1 ? M[n.unit] : D[n.unit]}`,
+                            r === l.length - 2 && ` ${e.timerAnd || t(A)}`,
+                            r < l.length - 2 && ","
                         ]
-                    }, n));
+                    }, r));
         }
-    }, f = l.map((r, n)=>`${r.value} ${r.value === 1 ? M[r.unit] : D[r.unit]}${n === l.length - 1 ? "" : n === l.length - 2 ? ` ${e.timerAnd || t(A)} ` : ", "}`).join("");
+    }, y = l.map((n, r)=>`${n.value} ${n.value === 1 ? M[n.unit] : D[n.unit]}${r === l.length - 1 ? "" : r === l.length - 2 ? ` ${e.timerAnd || t(A)} ` : ", "}`).join("");
     return /* @__PURE__ */ v("span", _object_spread_props(_object_spread({
         role: "timer",
         "aria-labelledby": p,
-        className: F,
+        className: j,
         style: {
             // try to keep the timer in the same line without wrapping only when label is not long
             display: a !== "long" ? "inline-block" : void 0
         }
-    }, T(L, "TextTimer")), {
+    }, z(L, "TextTimer")), {
         children: [
             /* @__PURE__ */ m(q, {
                 children: /* @__PURE__ */ m("span", {
                     id: p,
-                    children: b ? `${b}. ${f}` : f
+                    children: b ? `${b}. ${y}` : y
                 })
             }),
             /* @__PURE__ */ m("span", {
                 "aria-hidden": !0,
-                className: F,
+                className: j,
                 children: S()
             })
         ]
     }));
-}, Ee = (param)=>{
+}, _e = (param)=>{
     let { boxed: s, endTimestamp: a, minTimeUnit: o, maxTimeUnit: i, onProgress: c, dataAttributes: L, "aria-label": b } = param;
-    const { texts: e, t } = k(), p = y.useId(), l = ae(), g = U({
+    const { texts: e, t } = k(), p = f.useId(), l = se(), g = U({
         endTimestamp: a,
         minTimeUnit: o,
         maxTimeUnit: i,
@@ -233,12 +232,12 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
     }), M = {
         days: e.timerDayLongLabel || t(R),
         hours: e.timerHourLongLabel || t(_),
-        minutes: e.timerDisplayMinutesLabel || t(j),
+        minutes: e.timerDisplayMinutesLabel || t(x),
         seconds: e.timerDisplaySecondsLabel || t(w)
     }, D = {
         days: e.timerDaysLongLabel || t(O),
         hours: e.timerHoursLongLabel || t(E),
-        minutes: e.timerDisplayMinutesLabel || t(j),
+        minutes: e.timerDisplayMinutesLabel || t(x),
         seconds: e.timerDisplaySecondsLabel || t(w)
     }, h = {
         days: e.timerDayLongLabel || t(R),
@@ -250,29 +249,29 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
         hours: e.timerHoursLongLabel || t(E),
         minutes: e.timerMinutesLongLabel || t(K),
         seconds: e.timerSecondsLongLabel || t(Q)
-    }, f = (d)=>{
+    }, y = (d)=>{
         const u = Math.max(String(d).length, 2);
-        return /* @__PURE__ */ m(se, {
+        return /* @__PURE__ */ m(re, {
             children: /* @__PURE__ */ m("div", {
-                className: B,
+                className: T,
                 style: {
                     minWidth: `${u}ch`
                 },
                 children: String(d).padStart(u, "0")
             })
         });
-    }, r = g.map((d, u)=>`${d.value} ${d.value === 1 ? h[d.unit] : S[d.unit]}${u === g.length - 1 ? "" : u === g.length - 2 ? ` ${e.timerAnd || t(A)} ` : ", "}`).join(""), n = ()=>g.map((d, u)=>/* @__PURE__ */ m(ee, {
-                className: x({
-                    [ue[l]]: s
+    }, n = g.map((d, u)=>`${d.value} ${d.value === 1 ? h[d.unit] : S[d.unit]}${u === g.length - 1 ? "" : u === g.length - 2 ? ` ${e.timerAnd || t(A)} ` : ", "}`).join(""), r = ()=>g.map((d, u)=>/* @__PURE__ */ m("div", {
+                className: F({
+                    [le[l]]: s
                 }),
-                children: /* @__PURE__ */ m(oe, {
+                children: /* @__PURE__ */ m(ae, {
                     variant: s ? "default" : l,
                     children: /* @__PURE__ */ v("div", {
-                        className: x(ce, {
-                            [de]: s
+                        className: F(ue, {
+                            [ce]: s
                         }),
                         children: [
-                            f(d.value),
+                            y(d.value),
                             /* @__PURE__ */ m(ne, {
                                 regular: !0,
                                 children: d.value === 1 ? M[d.unit] : D[d.unit]
@@ -284,24 +283,24 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
     return /* @__PURE__ */ v("div", _object_spread_props(_object_spread({
         role: "timer",
         "aria-labelledby": p,
-        className: ie
-    }, T(L, "Timer")), {
+        className: oe
+    }, z(L, "Timer")), {
         children: [
             /* @__PURE__ */ m(q, {
                 children: /* @__PURE__ */ m("span", {
                     id: p,
-                    children: b ? `${b}. ${r}` : r
+                    children: b ? `${b}. ${n}` : n
                 })
             }),
             /* @__PURE__ */ m("div", {
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ m(re, {
+                children: /* @__PURE__ */ m(te, {
                     space: s ? 8 : 16,
                     wrap: !0,
-                    children: n()
+                    children: r()
                 })
             })
         ]
     }));
 };
-export { Oe as TextTimer, Ee as Timer };
+export { Re as TextTimer, _e as Timer };

package/dist-es/title.js

@@ -52,12 +52,13 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import a, { Text1 as p, textProps as h, Text6 as d, Text2 as x } from "./text.js";
+import a, { Text1 as p, Text6 as h, Text2 as d } from "./text.js";
+import { text3 as x } from "./text-props.js";
 import T from "./inline.js";
 import g from "./box.js";
-import { vars as u } from "./skins/skin-contract.css-mistica.js";
+import { vars as f } from "./skins/skin-contract.css-mistica.js";
 import { useTheme as l } from "./hooks.js";
-import { getPrefixedDataAttributes as f } from "./utils/dom.js";
+import { getPrefixedDataAttributes as u } from "./utils/dom.js";
 const m = (param)=>{
     let { title: e, right: i, dataAttributes: o } = param;
     const { textPresets: r } = l();
@@ -69,21 +70,21 @@ const m = (param)=>{
             e,
             /* @__PURE__ */ t(g, {
                 paddingLeft: 16,
-                children: /* @__PURE__ */ t(x, {
+                children: /* @__PURE__ */ t(d, {
                     weight: r.link.weight,
                     children: i
                 })
             })
         ]
-    }) : /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, f(o)), {
+    }) : /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, u(o)), {
         children: e
     }));
-}, L = (param)=>{
+}, S = (param)=>{
     let { children: e, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
     const { textPresets: n } = l();
     return /* @__PURE__ */ t(m, {
         title: /* @__PURE__ */ t(p, {
-            color: u.colors.textSecondary,
+            color: f.colors.textSecondary,
             transform: "uppercase",
             weight: n.title1.weight,
             as: i,
@@ -96,14 +97,14 @@ const m = (param)=>{
             "component-name": "Title1"
         }, s)
     });
-}, S = (param)=>{
+}, j = (param)=>{
     let { children: e, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
     const { textPresets: n } = l();
     return /* @__PURE__ */ t(m, {
         title: /* @__PURE__ */ t(a, _object_spread_props(_object_spread({
             as: i,
             id: o
-        }, h.text3), {
+        }, x), {
             weight: n.title2.weight,
             children: e
         })),
@@ -112,7 +113,7 @@ const m = (param)=>{
             "component-name": "Title2"
         }, s)
     });
-}, j = (param)=>{
+}, v = (param)=>{
     let { children: e, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
     const { textPresets: n } = l();
     return /* @__PURE__ */ t(m, {
@@ -131,10 +132,10 @@ const m = (param)=>{
             "component-name": "Title3"
         }, s)
     });
-}, v = (param)=>{
+}, y = (param)=>{
     let { children: e, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
     return /* @__PURE__ */ t(m, {
-        title: /* @__PURE__ */ t(d, {
+        title: /* @__PURE__ */ t(h, {
             as: i,
             id: o,
             children: e
@@ -145,4 +146,4 @@ const m = (param)=>{
         }, s)
     });
 };
-export { L as Title1, S as Title2, j as Title3, v as Title4 };
+export { S as Title1, j as Title2, v as Title3, y as Title4 };