@telefonica/mistica 14.33.0 → 14.35.0

package/dist-es/sprinkles.css-mistica.js

@@ -410,242 +410,245 @@ var l = a({
                 },
                 "var(--_1vqcj1i67)": {
                     defaultClass: "_1y2v1nfe8"
+                },
+                "var(--_1vqcj1i68)": {
+                    defaultClass: "_1y2v1nfe9"
                 }
             }
         },
         cursor: {
             values: {
                 pointer: {
-                    defaultClass: "_1y2v1nfe9"
+                    defaultClass: "_1y2v1nfea"
                 }
             }
         },
         overflow: {
             values: {
                 hidden: {
-                    defaultClass: "_1y2v1nfea"
+                    defaultClass: "_1y2v1nfeb"
                 },
                 visible: {
-                    defaultClass: "_1y2v1nfeb"
+                    defaultClass: "_1y2v1nfec"
                 },
                 auto: {
-                    defaultClass: "_1y2v1nfec"
+                    defaultClass: "_1y2v1nfed"
                 }
             }
         },
         overflowY: {
             values: {
                 hidden: {
-                    defaultClass: "_1y2v1nfed"
+                    defaultClass: "_1y2v1nfee"
                 },
                 visible: {
-                    defaultClass: "_1y2v1nfee"
+                    defaultClass: "_1y2v1nfef"
                 },
                 auto: {
-                    defaultClass: "_1y2v1nfef"
+                    defaultClass: "_1y2v1nfeg"
                 }
             }
         },
         top: {
             values: {
                 0: {
-                    defaultClass: "_1y2v1nfeg"
+                    defaultClass: "_1y2v1nfeh"
                 },
                 2: {
-                    defaultClass: "_1y2v1nfeh"
+                    defaultClass: "_1y2v1nfei"
                 },
                 4: {
-                    defaultClass: "_1y2v1nfei"
+                    defaultClass: "_1y2v1nfej"
                 },
                 8: {
-                    defaultClass: "_1y2v1nfej"
+                    defaultClass: "_1y2v1nfek"
                 },
                 12: {
-                    defaultClass: "_1y2v1nfek"
+                    defaultClass: "_1y2v1nfel"
                 },
                 16: {
-                    defaultClass: "_1y2v1nfel"
+                    defaultClass: "_1y2v1nfem"
                 },
                 20: {
-                    defaultClass: "_1y2v1nfem"
+                    defaultClass: "_1y2v1nfen"
                 },
                 24: {
-                    defaultClass: "_1y2v1nfen"
+                    defaultClass: "_1y2v1nfeo"
                 },
                 32: {
-                    defaultClass: "_1y2v1nfeo"
+                    defaultClass: "_1y2v1nfep"
                 },
                 40: {
-                    defaultClass: "_1y2v1nfep"
+                    defaultClass: "_1y2v1nfeq"
                 },
                 48: {
-                    defaultClass: "_1y2v1nfeq"
+                    defaultClass: "_1y2v1nfer"
                 },
                 56: {
-                    defaultClass: "_1y2v1nfer"
+                    defaultClass: "_1y2v1nfes"
                 },
                 64: {
-                    defaultClass: "_1y2v1nfes"
+                    defaultClass: "_1y2v1nfet"
                 },
                 72: {
-                    defaultClass: "_1y2v1nfet"
+                    defaultClass: "_1y2v1nfeu"
                 },
                 80: {
-                    defaultClass: "_1y2v1nfeu"
+                    defaultClass: "_1y2v1nfev"
                 }
             }
         },
         left: {
             values: {
                 0: {
-                    defaultClass: "_1y2v1nfev"
+                    defaultClass: "_1y2v1nfew"
                 },
                 2: {
-                    defaultClass: "_1y2v1nfew"
+                    defaultClass: "_1y2v1nfex"
                 },
                 4: {
-                    defaultClass: "_1y2v1nfex"
+                    defaultClass: "_1y2v1nfey"
                 },
                 8: {
-                    defaultClass: "_1y2v1nfey"
+                    defaultClass: "_1y2v1nfez"
                 },
                 12: {
-                    defaultClass: "_1y2v1nfez"
+                    defaultClass: "_1y2v1nff0"
                 },
                 16: {
-                    defaultClass: "_1y2v1nff0"
+                    defaultClass: "_1y2v1nff1"
                 },
                 20: {
-                    defaultClass: "_1y2v1nff1"
+                    defaultClass: "_1y2v1nff2"
                 },
                 24: {
-                    defaultClass: "_1y2v1nff2"
+                    defaultClass: "_1y2v1nff3"
                 },
                 32: {
-                    defaultClass: "_1y2v1nff3"
+                    defaultClass: "_1y2v1nff4"
                 },
                 40: {
-                    defaultClass: "_1y2v1nff4"
+                    defaultClass: "_1y2v1nff5"
                 },
                 48: {
-                    defaultClass: "_1y2v1nff5"
+                    defaultClass: "_1y2v1nff6"
                 },
                 56: {
-                    defaultClass: "_1y2v1nff6"
+                    defaultClass: "_1y2v1nff7"
                 },
                 64: {
-                    defaultClass: "_1y2v1nff7"
+                    defaultClass: "_1y2v1nff8"
                 },
                 72: {
-                    defaultClass: "_1y2v1nff8"
+                    defaultClass: "_1y2v1nff9"
                 },
                 80: {
-                    defaultClass: "_1y2v1nff9"
+                    defaultClass: "_1y2v1nffa"
                 }
             }
         },
         right: {
             values: {
                 0: {
-                    defaultClass: "_1y2v1nffa"
+                    defaultClass: "_1y2v1nffb"
                 },
                 2: {
-                    defaultClass: "_1y2v1nffb"
+                    defaultClass: "_1y2v1nffc"
                 },
                 4: {
-                    defaultClass: "_1y2v1nffc"
+                    defaultClass: "_1y2v1nffd"
                 },
                 8: {
-                    defaultClass: "_1y2v1nffd"
+                    defaultClass: "_1y2v1nffe"
                 },
                 12: {
-                    defaultClass: "_1y2v1nffe"
+                    defaultClass: "_1y2v1nfff"
                 },
                 16: {
-                    defaultClass: "_1y2v1nfff"
+                    defaultClass: "_1y2v1nffg"
                 },
                 20: {
-                    defaultClass: "_1y2v1nffg"
+                    defaultClass: "_1y2v1nffh"
                 },
                 24: {
-                    defaultClass: "_1y2v1nffh"
+                    defaultClass: "_1y2v1nffi"
                 },
                 32: {
-                    defaultClass: "_1y2v1nffi"
+                    defaultClass: "_1y2v1nffj"
                 },
                 40: {
-                    defaultClass: "_1y2v1nffj"
+                    defaultClass: "_1y2v1nffk"
                 },
                 48: {
-                    defaultClass: "_1y2v1nffk"
+                    defaultClass: "_1y2v1nffl"
                 },
                 56: {
-                    defaultClass: "_1y2v1nffl"
+                    defaultClass: "_1y2v1nffm"
                 },
                 64: {
-                    defaultClass: "_1y2v1nffm"
+                    defaultClass: "_1y2v1nffn"
                 },
                 72: {
-                    defaultClass: "_1y2v1nffn"
+                    defaultClass: "_1y2v1nffo"
                 },
                 80: {
-                    defaultClass: "_1y2v1nffo"
+                    defaultClass: "_1y2v1nffp"
                 }
             }
         },
         bottom: {
             values: {
                 0: {
-                    defaultClass: "_1y2v1nffp"
+                    defaultClass: "_1y2v1nffq"
                 },
                 2: {
-                    defaultClass: "_1y2v1nffq"
+                    defaultClass: "_1y2v1nffr"
                 },
                 4: {
-                    defaultClass: "_1y2v1nffr"
+                    defaultClass: "_1y2v1nffs"
                 },
                 8: {
-                    defaultClass: "_1y2v1nffs"
+                    defaultClass: "_1y2v1nfft"
                 },
                 12: {
-                    defaultClass: "_1y2v1nfft"
+                    defaultClass: "_1y2v1nffu"
                 },
                 16: {
-                    defaultClass: "_1y2v1nffu"
+                    defaultClass: "_1y2v1nffv"
                 },
                 20: {
-                    defaultClass: "_1y2v1nffv"
+                    defaultClass: "_1y2v1nffw"
                 },
                 24: {
-                    defaultClass: "_1y2v1nffw"
+                    defaultClass: "_1y2v1nffx"
                 },
                 32: {
-                    defaultClass: "_1y2v1nffx"
+                    defaultClass: "_1y2v1nffy"
                 },
                 40: {
-                    defaultClass: "_1y2v1nffy"
+                    defaultClass: "_1y2v1nffz"
                 },
                 48: {
-                    defaultClass: "_1y2v1nffz"
+                    defaultClass: "_1y2v1nfg0"
                 },
                 56: {
-                    defaultClass: "_1y2v1nfg0"
+                    defaultClass: "_1y2v1nfg1"
                 },
                 64: {
-                    defaultClass: "_1y2v1nfg1"
+                    defaultClass: "_1y2v1nfg2"
                 },
                 72: {
-                    defaultClass: "_1y2v1nfg2"
+                    defaultClass: "_1y2v1nfg3"
                 },
                 80: {
-                    defaultClass: "_1y2v1nfg3"
+                    defaultClass: "_1y2v1nfg4"
                 }
             }
         },
         objectFit: {
             values: {
                 cover: {
-                    defaultClass: "_1y2v1nfg4"
+                    defaultClass: "_1y2v1nfg5"
                 }
             }
         }

package/dist-es/stack.js

@@ -53,9 +53,9 @@ function _object_spread_props(target, source) {
 import { jsx as l } from "react/jsx-runtime";
 import * as c from "react";
 import f from "classnames";
-import { assignInlineVars as b } from "@vanilla-extract/dynamic";
 import { getPrefixedDataAttributes as p } from "./utils/dom.js";
-import { flexStack as d, marginStack as u, vars as r } from "./stack.css-mistica.js";
+import { flexStack as b, marginStack as d, vars as r } from "./stack.css-mistica.js";
+import { applyCssVars as u } from "./utils/css.js";
 const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
     if (typeof t == "number" || typeof t == "string") return {
         [r.space]: a(t)
@@ -65,11 +65,11 @@ const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
         [r.spaceDesktop]: a(t.desktop)
     };
     return t.tablet && (e[r.spaceTablet] = a(t.tablet)), e;
-}, x = (param)=>/* @__PURE__ */ {
-    let { space: t , className: e , children: o , role: i , "aria-labelledby": s , dataAttributes: n  } = param;
+}, y = (param)=>/* @__PURE__ */ {
+    let { space: t, className: e, children: o, role: i, "aria-labelledby": s, dataAttributes: n } = param;
     return l("div", _object_spread_props(_object_spread({
-        className: f(e, typeof t == "string" ? d : u),
-        style: b(k(t)),
+        className: f(e, typeof t == "string" ? b : d),
+        style: u(k(t)),
         role: i,
         "aria-labelledby": s
     }, p(n)), {
@@ -78,5 +78,5 @@ const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
                 children: m
             }))
     }));
-}, V = x;
+}, V = y;
 export { V as default };

package/dist-es/stacking-group.js

@@ -1,33 +1,41 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import * as d from "react";
-import { useIsInverseVariant as m } from "./theme-variant-context.js";
+"use client";
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import * as l from "react";
+import { useIsInverseVariant as f } from "./theme-variant-context.js";
 import { vars as r } from "./skins/skin-contract.css-mistica.js";
-import f from "./inline.js";
-import { Text4 as h } from "./text.js";
-import { moreItems as b } from "./stacking-group.css-mistica.js";
-const g = (param)=>{
-    let { moreItemsStyle: e , stacked: i = !0 , maxItems: o = 1 / 0 , children: t  } = param;
-    const s = m(), n = d.Children.count(t), a = n - o + 1, p = i ? -8 : 8, c = e.size;
-    return /* @__PURE__ */ u(f, {
-        space: p,
-        children: [
-            d.Children.toArray(t).slice(0, n > o ? o - 1 : o),
-            n > o && /* @__PURE__ */ l("div", {
-                className: b,
-                style: {
-                    width: c,
-                    height: c,
-                    backgroundColor: s ? r.colors.brandHigh : r.colors.brandLow,
-                    borderRadius: e.type === "circle" ? "50%" : r.borderRadii.container,
-                    border: i ? `1px solid ${r.colors.borderLow}` : "none"
-                },
-                children: /* @__PURE__ */ l(h, {
-                    regular: !0,
-                    color: s ? r.colors.textPrimaryInverse : r.colors.brand,
-                    children: "+" + a
+import h from "./inline.js";
+import { Text4 as b } from "./text.js";
+import { moreItems as v } from "./stacking-group.css-mistica.js";
+import { vars as g } from "./image.css-mistica.js";
+import { applyCssVars as y } from "./utils/css.js";
+const C = (param)=>{
+    let { moreItemsStyle: e, stacked: n = !0, maxItems: o = 1 / 0, children: t } = param;
+    const c = f(), i = l.Children.count(t), m = i - o + 1, p = n ? -8 : 8, a = e.size, d = e.type === "circle" ? "50%" : r.borderRadii.mediaSmall;
+    return /* @__PURE__ */ s("div", {
+        style: y({
+            [g.mediaBorderRadius]: d
+        }),
+        children: /* @__PURE__ */ u(h, {
+            space: p,
+            children: [
+                l.Children.toArray(t).slice(0, i > o ? o - 1 : o),
+                i > o && /* @__PURE__ */ s("div", {
+                    className: v,
+                    style: {
+                        width: a,
+                        height: a,
+                        borderRadius: d,
+                        backgroundColor: c ? r.colors.brandHigh : r.colors.brandLow,
+                        border: n ? `1px solid ${r.colors.borderLow}` : "none"
+                    },
+                    children: /* @__PURE__ */ s(b, {
+                        regular: !0,
+                        color: c ? r.colors.textPrimaryInverse : r.colors.brand,
+                        children: "+" + m
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
-}, j = g;
-export { j as default };
+}, G = C;
+export { G as default };

package/dist-es/stepper.css-mistica.js

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./stepper.css.ts.vanilla.css-mistica.js";
-var _ = "_14h93mqk _1y2v1nfch _1y2v1nfbx _1y2v1nfe7 _1y2v1nfea", r = "_14h93mqm _1y2v1nfch _1y2v1nfbx _1y2v1nfe7 _1y2v1nfea", a = "_14h93mqn", e = "_14h93mqp _1y2v1nfbz", b = "_14h93mqf", f = "_14h93mqc", y = "_14h93mqe _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", m = "_14h93mq9 _1y2v1nfb4 _1y2v1nfbb _1y2v1nfbg _1y2v1nfbp", h = "_14h93mqb _1y2v1nfb4 _1y2v1nfba", t = "_14h93mq7 _1y2v1nfba _1y2v1nfdh", i = "_14h93mqh _1y2v1nfb5", p = {
+var _ = "_14h93mqk _1y2v1nfch _1y2v1nfbx _1y2v1nfe7 _1y2v1nfeb", r = "_14h93mqm _1y2v1nfch _1y2v1nfbx _1y2v1nfe7 _1y2v1nfeb", a = "_14h93mqn", b = "_14h93mqp _1y2v1nfbz", e = "_14h93mqf", f = "_14h93mqc", y = "_14h93mqe _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", m = "_14h93mq9 _1y2v1nfb4 _1y2v1nfbb _1y2v1nfbg _1y2v1nfbp", h = "_14h93mqb _1y2v1nfb4 _1y2v1nfba", t = "_14h93mq7 _1y2v1nfba _1y2v1nfdh", i = "_14h93mqh _1y2v1nfb5", p = {
     stepperMinHeight: "var(--_14h93mq0)"
 };
-export { _ as bar, r as barFilled, a as barFilledAnimation, e as barFilledReverseAnimation, b as currentNumber, f as iconAnimation, y as number, m as step, h as stepIconNumber, t as stepper, i as textContainer, p as vars };
+export { _ as bar, r as barFilled, a as barFilledAnimation, b as barFilledReverseAnimation, e as currentNumber, f as iconAnimation, y as number, m as step, h as stepIconNumber, t as stepper, i as textContainer, p as vars };

package/dist-es/stepper.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -53,58 +54,57 @@ function _object_spread_props(target, source) {
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import * as l from "react";
 import d from "classnames";
-import { Text1 as w, Text2 as C } from "./text.js";
+import { Text1 as k, Text2 as w } from "./text.js";
 import { useTheme as F, useScreenSize as P, useElementDimensions as T } from "./hooks.js";
 import B from "./icons/icon-success.js";
-import { stepper as D, vars as I, step as M, stepIconNumber as u, iconAnimation as R, number as $, currentNumber as j, textContainer as z, bar as E, barFilled as H, barFilledAnimation as L, barFilledReverseAnimation as O } from "./stepper.css-mistica.js";
-import { pxToRem as V } from "./utils/css.js";
-import { assignInlineVars as q } from "@vanilla-extract/dynamic";
+import { stepper as D, vars as M, step as R, stepIconNumber as u, iconAnimation as $, number as j, currentNumber as z, textContainer as E, bar as H, barFilled as I, barFilledAnimation as L, barFilledReverseAnimation as O } from "./stepper.css-mistica.js";
+import { applyCssVars as V, pxToRem as q } from "./utils/css.js";
 import { vars as o } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as G } from "./utils/dom.js";
 const J = (param)=>{
-    let { steps: n , currentIndex: m , "aria-label": f , dataAttributes: v  } = param;
-    const { textPresets: g  } = F(), { isDesktopOrBigger: S  } = P(), { height: b , ref: N  } = T(), x = b, [a, A] = l.useState(Math.ceil(m)), [s, y] = l.useState(!1);
+    let { steps: n, currentIndex: m, "aria-label": v, dataAttributes: f } = param;
+    const { textPresets: g } = F(), { isDesktopOrBigger: S } = P(), { height: b, ref: N } = T(), x = b, [a, A] = l.useState(Math.ceil(m)), [i, y] = l.useState(!1);
     return l.useEffect(()=>{
-        const i = Math.ceil(m);
-        a !== i && (y(i < a), A(i));
+        const s = Math.ceil(m);
+        a !== s && (y(s < a), A(s));
     }, [
         m,
         n,
         a
     ]), /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
         className: D,
-        style: q({
-            [I.stepperMinHeight]: V(40 + x)
+        style: V({
+            [M.stepperMinHeight]: q(40 + x)
         })
-    }, G(v, "Stepper")), {
-        children: n.map((i, t)=>{
-            const r = t === a, k = t === n.length - 1, c = t < a, p = t === a - 1;
+    }, G(f, "Stepper")), {
+        children: n.map((s, t)=>{
+            const r = t === a, C = t === n.length - 1, c = t < a, p = t === a - 1;
             return /* @__PURE__ */ h(l.Fragment, {
                 children: [
                     /* @__PURE__ */ h("div", {
-                        className: M,
+                        className: R,
                         role: "progressbar",
                         "aria-valuenow": r ? t + 1 : void 0,
                         "aria-valuemin": 1,
                         "aria-valuemax": n.length,
-                        "aria-valuetext": i,
-                        "aria-label": f,
+                        "aria-valuetext": s,
+                        "aria-label": v,
                         children: [
                             c ? /* @__PURE__ */ e("div", {
                                 className: d(u, {
-                                    [R]: p && !s
+                                    [$]: p && !i
                                 }),
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ e(B, {
                                     color: o.colors.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !p || s
+                                    skipAnimation: !p || i
                                 })
                             }) : /* @__PURE__ */ e("div", {
-                                className: d(u, $, {
-                                    [j]: r || r
+                                className: d(u, j, {
+                                    [z]: r || r
                                 }),
-                                children: /* @__PURE__ */ e(w, {
+                                children: /* @__PURE__ */ e(k, {
                                     as: "span",
                                     weight: g.indicator.weight,
                                     color: r ? o.colors.textPrimaryInverse : o.colors.textSecondary,
@@ -113,26 +113,26 @@ const J = (param)=>{
                                 })
                             }),
                             S && /* @__PURE__ */ e("div", {
-                                className: z,
+                                className: E,
                                 ref: N,
                                 "aria-hidden": "true",
-                                children: /* @__PURE__ */ e(C, {
+                                children: /* @__PURE__ */ e(w, {
                                     as: "span",
                                     regular: !0,
                                     color: c || r ? o.colors.textPrimary : o.colors.textSecondary,
-                                    children: i
+                                    children: s
                                 })
                             })
                         ]
                     }),
-                    !k && /* @__PURE__ */ e("div", {
-                        className: E,
+                    !C && /* @__PURE__ */ e("div", {
+                        className: H,
                         "aria-hidden": "true",
                         children: (c || r) && /* @__PURE__ */ e("div", {
                             className: d({
-                                [H]: s && r || c,
-                                [L]: p && !s,
-                                [O]: r && s
+                                [I]: i && r || c,
+                                [L]: p && !i,
+                                [O]: r && i
                             })
                         })
                     })
@@ -140,5 +140,5 @@ const J = (param)=>{
             }, t);
         })
     }));
-}, te = J;
-export { te as default };
+}, re = J;
+export { re as default };