@telefonica/mistica 16.1.0 → 16.2.0

package/dist-es/tag.js

@@ -51,22 +51,21 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import g from "./box.js";
-import { Text as x } from "./text.js";
-import { useThemeVariant as T, ThemeVariant as h } from "./theme-variant-context.js";
-import { pxToRem as v } from "./utils/css.js";
-import { getPrefixedDataAttributes as k } from "./utils/dom.js";
-import { tag as B } from "./tag.css-mistica.js";
-import { sprinkles as a } from "./sprinkles.css-mistica.js";
-import { vars as b } from "./skins/skin-contract.css-mistica.js";
-import w from "classnames";
-import { useTheme as A } from "./hooks.js";
-import P from "./badge.js";
-const { colors: t } = b, V = (param)=>{
-    let { Icon: e, children: i, dataAttributes: m, type: l = "promo", badge: n } = param;
-    const { textPresets: d } = A(), p = T(), o = n === !0 ? void 0 : n || 0;
-    if (!i) return null;
+import { Text as f } from "./text.js";
+import { useThemeVariant as T, ThemeVariant as x } from "./theme-variant-context.js";
+import { pxToRem as h } from "./utils/css.js";
+import { getPrefixedDataAttributes as v } from "./utils/dom.js";
+import { tag as k, icon as B, badge as b } from "./tag.css-mistica.js";
+import { vars as w } from "./skins/skin-contract.css-mistica.js";
+import A from "classnames";
+import { useTheme as P } from "./hooks.js";
+import V from "./badge.js";
+const { colors: t } = w, C = (param)=>{
+    let { Icon: e, children: o, dataAttributes: c, type: m = "promo", badge: i } = param;
+    const { textPresets: d } = P(), l = T(), a = i === !0 ? void 0 : i || 0;
+    if (!o) return null;
     const u = {
         // [textColor, backgroundColor]
         promo: [
@@ -80,7 +79,7 @@ const { colors: t } = b, V = (param)=>{
         inactive: [
             t.tagTextInactive,
             // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
-            p === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
+            l === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
         ],
         success: [
             t.tagTextSuccess,
@@ -94,47 +93,44 @@ const { colors: t } = b, V = (param)=>{
             t.tagTextError,
             t.tagBackgroundError
         ]
-    }, [s, f] = u[l];
-    return /* @__PURE__ */ c("span", _object_spread_props(_object_spread({}, k(m, "Tag")), {
-        className: w(B, a({
+    }, [n, p] = u[m];
+    return /* @__PURE__ */ s("span", _object_spread_props(_object_spread({}, v(c, "Tag")), {
+        className: A(k),
+        style: {
             paddingLeft: e ? 8 : 12,
-            paddingRight: o !== 0 ? 8 : 12,
-            background: f
-        })),
+            paddingRight: a !== 0 ? 8 : 12,
+            background: p
+        },
         children: [
             e && /* @__PURE__ */ r(g, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ r(e, {
-                    color: s,
-                    size: v(16),
-                    className: a({
-                        display: "block"
-                    })
+                    color: n,
+                    size: h(16),
+                    className: B
                 })
             }),
-            /* @__PURE__ */ c(h, {
+            /* @__PURE__ */ s(x, {
                 isInverse: !1,
                 children: [
-                    /* @__PURE__ */ r(x, {
-                        color: s,
+                    /* @__PURE__ */ r(f, {
+                        color: n,
                         size: 14,
                         lineHeight: 20,
                         weight: d.indicator.weight,
                         truncate: !0,
-                        children: i
+                        children: o
                     }),
-                    o !== 0 && /* @__PURE__ */ r(g, {
+                    a !== 0 && /* @__PURE__ */ r(g, {
                         paddingLeft: 4,
-                        className: a({
-                            display: "inline-flex"
-                        }),
-                        children: /* @__PURE__ */ r(P, {
-                            value: o
+                        className: b,
+                        children: /* @__PURE__ */ r(V, {
+                            value: a
                         })
                     })
                 ]
             })
         ]
     }));
-}, I = V;
+}, I = C;
 export { I as default };

package/dist-es/text-field-components.css-mistica.js

@@ -2,5 +2,8 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
-var a = 328, f = 0.78, e = 0.75, y = "_15k6ur97", k = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", l = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", t = "_1y2v1nfi5 _1y2v1nf7j", o = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", p = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", u = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", d = "_15k6ur94", E = "_15k6ur9g";
-export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, y as disabled, k as field, i as fieldContainer, l as fullWidth, h as helperContainer, t as helperText, o as labelContainer, p as labelText, u as leftHelperText, L as normalWidth, d as shrinked, E as warnIcon };
+var a = 328, f = 0.78, e = 0.75, y = {
+    default: "_1y2v1nf3q",
+    readOnly: "_1y2v1nf5k"
+}, k = "_15k6ur97", l = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", t = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", o = "_1y2v1nfi5 _1y2v1nf7j", u = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", d = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", p = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", E = "_15k6ur94", T = "_15k6ur9g";
+export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, y as background, k as disabled, l as field, i as fieldContainer, t as fullWidth, h as helperContainer, o as helperText, u as labelContainer, d as labelText, p as leftHelperText, L as normalWidth, E as shrinked, T as warnIcon };

package/dist-es/text-field-components.js

@@ -51,81 +51,80 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as c, jsx as o, Fragment as C } from "react/jsx-runtime";
+import { jsxs as c, jsx as r, Fragment as C } from "react/jsx-runtime";
 import * as g from "react";
 import m from "classnames";
 import { useIsInverseOrMediaVariant as I } from "./theme-variant-context.js";
 import { useTheme as S } from "./hooks.js";
 import { Text1 as x } from "./text.js";
-import { labelContainer as T, shrinked as k, labelText as E, helperText as b, leftHelperText as F, warnIcon as L, fieldContainer as O, fullWidth as W, normalWidth as w, disabled as A, field as P, helperContainer as j } from "./text-field-components.css-mistica.js";
-import { sprinkles as v } from "./sprinkles.css-mistica.js";
-import { vars as r } from "./skins/skin-contract.css-mistica.js";
+import { labelContainer as T, shrinked as E, labelText as F, helperText as v, leftHelperText as O, warnIcon as k, fieldContainer as W, fullWidth as A, normalWidth as L, disabled as P, field as j, background as b, helperContainer as w } from "./text-field-components.css-mistica.js";
+import { vars as t } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as D } from "./utils/dom.js";
 import { formFieldOptionalLabelSuffix as H } from "./text-tokens.js";
 import R from "./generated/mistica-icons/icon-warning-regular.js";
-const X = (param)=>{
-    let { shrinkLabel: t, forId: l, inputState: e, error: s, children: i, style: n, optional: a } = param;
-    const f = t || e === "focused" || e === "filled", [u, p] = g.useState("initial"), { texts: d, t: N } = S();
+const U = (param)=>{
+    let { shrinkLabel: o, forId: l, inputState: e, error: s, children: i, style: a, optional: n } = param;
+    const f = o || e === "focused" || e === "filled", [u, h] = g.useState("initial"), { texts: d, t: y } = S();
     g.useEffect(()=>{
-        const y = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && p("transform 150ms, width 150ms");
+        const N = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && h("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(y);
+            clearTimeout(N);
         };
     }, []);
-    let h = r.colors.textSecondary;
-    return s && e !== "default" ? h = r.colors.textError : e === "focused" && (h = r.colors.textActivated), /* @__PURE__ */ c("label", {
+    let p = t.colors.textSecondary;
+    return s && e !== "default" ? p = t.colors.textError : e === "focused" && (p = t.colors.textActivated), /* @__PURE__ */ c("label", {
         className: m(T, {
-            [k]: f
-        }, v({
-            color: h
-        })),
+            [E]: f
+        }),
         htmlFor: l,
-        style: _object_spread_props(_object_spread({}, n), {
+        style: _object_spread_props(_object_spread({
+            color: p
+        }, a), {
             transition: u
         }),
         children: [
-            /* @__PURE__ */ o("span", {
-                className: E,
+            /* @__PURE__ */ r("span", {
+                className: F,
                 children: i
             }),
-            a ? /* @__PURE__ */ c("span", {
+            n ? /* @__PURE__ */ c("span", {
                 children: [
                     "\xa0(",
-                    d.formFieldOptionalLabelSuffix || N(H),
+                    d.formFieldOptionalLabelSuffix || y(H),
                     ")"
                 ]
             }) : null
         ]
     });
-}, Y = (param)=>{
-    let { leftText: t, rightText: l, error: e, id: s } = param;
-    const i = I(), n = i ? r.colors.textPrimaryInverse : e ? r.colors.textError : r.colors.textSecondary, a = i ? r.colors.textPrimaryInverse : r.colors.textSecondary;
+}, X = (param)=>{
+    let { leftText: o, rightText: l, error: e, id: s } = param;
+    const i = I(), a = i ? t.colors.textPrimaryInverse : e ? t.colors.textError : t.colors.textSecondary, n = i ? t.colors.textPrimaryInverse : t.colors.textSecondary;
     return /* @__PURE__ */ c(C, {
         children: [
-            t && /* @__PURE__ */ c("p", {
-                className: m(b, F),
+            o && /* @__PURE__ */ c("p", {
+                className: m(v, O),
                 children: [
-                    e && /* @__PURE__ */ o(x, {
+                    e && /* @__PURE__ */ r(x, {
                         regular: !0,
-                        children: /* @__PURE__ */ o(R, {
-                            color: n,
-                            className: L
+                        children: /* @__PURE__ */ r(R, {
+                            color: a,
+                            className: k
                         })
                     }),
-                    /* @__PURE__ */ o(x, {
-                        color: n,
+                    /* @__PURE__ */ r(x, {
+                        color: a,
                         regular: !0,
                         id: s,
-                        children: t
+                        children: o
                     })
                 ]
             }),
-            l && /* @__PURE__ */ o("div", {
-                className: m(b),
-                children: /* @__PURE__ */ o(x, {
-                    color: a,
+            l && /* @__PURE__ */ r("div", {
+                className: m(v),
+                children: /* @__PURE__ */ r(x, {
+                    color: n,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
@@ -134,31 +133,29 @@ const X = (param)=>{
             })
         ]
     });
-}, Z = (param)=>{
-    let { multiline: t, disabled: l, children: e, helperText: s, className: i, fieldRef: n, fullWidth: a, readOnly: f, dataAttributes: u } = param;
+}, Y = (param)=>{
+    let { multiline: o, disabled: l, children: e, helperText: s, className: i, fieldRef: a, fullWidth: n, readOnly: f, dataAttributes: u } = param;
     return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ c("div", _object_spread_props(_object_spread({
-        className: m(O, a ? W : w, {
-            [A]: l
+        className: m(W, n ? A : L, {
+            [P]: l
         }),
-        onClick: (p)=>{
+        onClick: (h)=>{
             var d;
-            (d = p.currentTarget.querySelector(t ? "textarea" : "input")) == null || d.focus();
+            (d = h.currentTarget.querySelector(o ? "textarea" : "input")) == null || d.focus();
         }
     }, D(u)), {
         children: [
-            /* @__PURE__ */ o("div", {
-                className: m(P, v({
-                    background: f ? r.colors.neutralLow : r.colors.backgroundContainer
-                }), i),
-                ref: n,
+            /* @__PURE__ */ r("div", {
+                className: m(j, f ? b.readOnly : b.default, i),
+                ref: a,
                 children: e
             }),
-            s && /* @__PURE__ */ o("div", {
-                className: j,
+            s && /* @__PURE__ */ r("div", {
+                className: w,
                 children: s
             })
         ]
     })));
 };
-export { Z as FieldContainer, Y as HelperText, X as Label };
+export { Y as FieldContainer, X as HelperText, U as Label };

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 };