@telefonica/mistica 17.0.0 → 17.1.0

package/dist-es/theme-context-provider.js

@@ -29,223 +29,226 @@ function _object_spread(target) {
 }
 import { jsxs as C, Fragment as $, jsx as n } from "react/jsx-runtime";
 import * as a from "react";
-import { assignInlineVars as u } from "@vanilla-extract/dynamic";
+import { assignInlineVars as g } from "@vanilla-extract/dynamic";
 import { DialogRoot as N } from "./dialog-context.js";
 import F from "./screen-size-context-provider.js";
 import { getMisticaLinkComponent as z, dimensions as L, NAVBAR_HEIGHT_MOBILE as A } from "./theme.js";
-import { isInsideNovumNativeApp as B, getPlatform as O } from "./utils/platform.js";
+import { isInsideNovumNativeApp as B, getPlatform as S } from "./utils/platform.js";
 import G from "./theme-context.js";
-import { useIsomorphicLayoutEffect as V } from "./hooks.js";
+import { useIsomorphicLayoutEffect as I } from "./hooks.js";
 import W from "./modal-context-provider.js";
 import q from "./tooltip-context-provider.js";
 import { DocumentVisibilityProvider as K } from "./utils/document-visibility.js";
 import { AspectRatioSupportProvider as Q } from "./utils/aspect-ratio-support.js";
 import { TrackingConfig as J } from "./utils/analytics.js";
-import { vars as g } from "./skins/skin-contract.css-mistica.js";
+import { vars as u } from "./skins/skin-contract.css-mistica.js";
 import { fromHexToRgb as U } from "./utils/color.js";
-import { defaultTextPresetsConfig as X, defaultThemeVariantsConfig as Y, defaultSpacing as Z, defaultBorderRadiiConfig as R } from "./skins/defaults.js";
-import { isClientSide as I } from "./utils/environment.js";
-import { PACKAGE_VERSION as _ } from "./package-version.js";
-import { SnackbarRoot as ee } from "./snackbar-context.js";
-import { mapToWeight as E } from "./text.js";
-import { tabletOrSmaller as te } from "./media-queries.css-mistica.js";
-import { localeToLanguage as oe } from "./utils/locale.js";
-if (process.env.NODE_ENV !== "production" && I()) {
-    if (window.__mistica_version__ && window.__mistica_version__ !== _) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
-    window.__mistica_version__ = _;
+import { defaultTextPresetsConfig as X, defaultComponentPropertiesConfig as Y, defaultThemeVariantsConfig as Z, defaultSpacing as ee, defaultBorderRadiiConfig as O } from "./skins/defaults.js";
+import { isClientSide as V } from "./utils/environment.js";
+import { PACKAGE_VERSION as R } from "./package-version.js";
+import { SnackbarRoot as te } from "./snackbar-context.js";
+import { mapToWeight as _ } from "./text.js";
+import { tabletOrSmaller as oe } from "./media-queries.css-mistica.js";
+import { localeToLanguage as re } from "./utils/locale.js";
+if (process.env.NODE_ENV !== "production" && V()) {
+    if (window.__mistica_version__ && window.__mistica_version__ !== R) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
+    window.__mistica_version__ = R;
 }
-const re = "(prefers-color-scheme: dark)", ie = ()=>{
-    const [t, c] = a.useState(!1);
-    return V(()=>{
+const ie = "(prefers-color-scheme: dark)", se = ()=>{
+    const [e, l] = a.useState(!1);
+    return I(()=>{
         if (!window.matchMedia) return;
-        const s = window.matchMedia(re), i = ()=>{
-            c(s.matches);
+        const s = window.matchMedia(ie), i = ()=>{
+            l(s.matches);
         };
         return s.addEventListener("change", i), i(), ()=>{
             s.removeEventListener("change", i);
         };
-    }, []), t;
-}, se = ()=>(t)=>t, ne = (t)=>({
-        headerMobileHeight: (t === null || t === void 0 ? void 0 : t.headerMobileHeight) === "mistica" ? A : t === null || t === void 0 ? void 0 : t.headerMobileHeight
-    }), ae = ()=>{
-    const t = a.useRef(null), [c, s] = a.useState(!1), [i, p] = a.useState(!0);
-    return V(()=>{
-        if (i) p(!1);
+    }, []), e;
+}, ne = ()=>(e)=>e, ae = (e)=>({
+        headerMobileHeight: (e === null || e === void 0 ? void 0 : e.headerMobileHeight) === "mistica" ? A : e === null || e === void 0 ? void 0 : e.headerMobileHeight
+    }), ce = ()=>{
+    const e = a.useRef(null), [l, s] = a.useState(!1), [i, d] = a.useState(!0);
+    return I(()=>{
+        if (i) d(!1);
         else {
-            var _t_current;
-            const f = (_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.parentElement;
+            var _e_current;
+            const f = (_e_current = e.current) === null || _e_current === void 0 ? void 0 : _e_current.parentElement;
             f && (f.style.isolation = "isolate", s(!0));
         }
     }, [
         i
-    ]), c || !I() || i ? null : /* @__PURE__ */ n("div", {
-        ref: t,
+    ]), l || !V() || i ? null : /* @__PURE__ */ n("div", {
+        ref: e,
         style: {
             display: "none"
         }
     });
-}, P = (t)=>Object.fromEntries(Object.entries(t).map((param)=>{
-        let [c, s] = param;
+}, v = (e)=>Object.fromEntries(Object.entries(e).map((param)=>{
+        let [l, s] = param;
         let i = "";
         if (s.startsWith("#")) {
-            const [p, f, m] = U(s);
-            i = `${p}, ${f}, ${m}`;
+            const [d, f, m] = U(s);
+            i = `${d}, ${f}, ${m}`;
         }
         return [
-            c,
+            l,
             i
         ];
-    })), Pe = (param)=>{
-    let { theme: t, children: c, as: s, withoutStyles: i = !1 } = param;
-    var _t_colorScheme;
-    const p = a.useId(), f = ie(), m = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", b = t.skin.colors, h = _object_spread({}, t.skin.colors, t.skin.darkModeColors), k = m === "auto" && f || m === "dark", M = k ? h : b, w = oe(t.i18n.locale), v = a.useCallback(function(o) {
-        for(var _len = arguments.length, r = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
-            r[_key - 1] = arguments[_key];
+    })), Ie = (param)=>{
+    let { theme: e, children: l, as: s, withoutStyles: i = !1 } = param;
+    var _e_colorScheme;
+    const d = a.useId(), f = se(), m = (_e_colorScheme = e.colorScheme) !== null && _e_colorScheme !== void 0 ? _e_colorScheme : "auto", b = e.skin.colors, h = _object_spread({}, e.skin.colors, e.skin.darkModeColors), k = m === "auto" && f || m === "dark", M = k ? h : b, w = re(e.i18n.locale), E = a.useCallback(function(o) {
+        for(var _len = arguments.length, t = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+            t[_key - 1] = arguments[_key];
         }
-        const e = typeof o == "string" ? o : o[w] || o.en;
-        return r.length ? e.replace(/\d+\$s/g, (d)=>{
-            var _r_;
-            return String((_r_ = r[parseInt(d) - 1]) !== null && _r_ !== void 0 ? _r_ : d);
-        }) : e;
+        const r = typeof o == "string" ? o : o[w] || o.en;
+        return t.length ? r.replace(/\d+\$s/g, (p)=>{
+            var _t_;
+            return String((_t_ = t[parseInt(p) - 1]) !== null && _t_ !== void 0 ? _t_ : p);
+        }) : r;
     }, [
         w
-    ]), l = a.useMemo(()=>{
+    ]), c = a.useMemo(()=>{
         const o = _object_spread({
-            platform: O(),
+            platform: S(),
             insideNovumNativeApp: B()
-        }, t.platformOverrides), r = Object.entries(X).map((param)=>{
-            let [d, x] = param;
-            var _t_skin_textPresets;
+        }, e.platformOverrides), t = Object.entries(X).map((param)=>{
+            let [p, x] = param;
+            var _e_skin_textPresets;
             return {
-                [d]: _object_spread({}, x, (_t_skin_textPresets = t.skin.textPresets) === null || _t_skin_textPresets === void 0 ? void 0 : _t_skin_textPresets[d])
+                [p]: _object_spread({}, x, (_e_skin_textPresets = e.skin.textPresets) === null || _e_skin_textPresets === void 0 ? void 0 : _e_skin_textPresets[p])
             };
-        }), e = Object.assign({}, ...r);
-        var _t_skin_borderRadii, _t_skin_spacing, _t_skin_themeVariants, _t_useHrefDecorator, _t_preventCopyInFormFields;
+        }), r = Object.assign({}, ...t);
+        var _e_skin_borderRadii, _e_skin_spacing, _e_skin_themeVariants, _e_skin_componentProperties, _e_useHrefDecorator, _e_preventCopyInFormFields;
         return {
-            skinName: t.skin.name,
-            i18n: _object_spread({}, t.i18n),
+            skinName: e.skin.name,
+            i18n: _object_spread({}, e.i18n),
             platformOverrides: o,
-            texts: _object_spread({}, t.texts),
+            texts: _object_spread({}, e.texts),
             analytics: _object_spread({
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
-            }, t.analytics),
+            }, e.analytics),
             colorValues: M,
-            dimensions: _object_spread({}, L, ne(t.dimensions)),
-            borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : R,
-            textPresets: e,
-            spacing: (_t_skin_spacing = t.skin.spacing) !== null && _t_skin_spacing !== void 0 ? _t_skin_spacing : Z,
-            themeVariants: (_t_skin_themeVariants = t.skin.themeVariants) !== null && _t_skin_themeVariants !== void 0 ? _t_skin_themeVariants : Y,
-            Link: z(t.Link),
+            dimensions: _object_spread({}, L, ae(e.dimensions)),
+            borderRadii: (_e_skin_borderRadii = e.skin.borderRadii) !== null && _e_skin_borderRadii !== void 0 ? _e_skin_borderRadii : O,
+            textPresets: r,
+            spacing: (_e_skin_spacing = e.skin.spacing) !== null && _e_skin_spacing !== void 0 ? _e_skin_spacing : ee,
+            themeVariants: (_e_skin_themeVariants = e.skin.themeVariants) !== null && _e_skin_themeVariants !== void 0 ? _e_skin_themeVariants : Z,
+            componentProperties: (_e_skin_componentProperties = e.skin.componentProperties) !== null && _e_skin_componentProperties !== void 0 ? _e_skin_componentProperties : Y,
+            Link: z(e.Link),
             isDarkMode: k,
-            isIos: O(o) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : se,
-            t: v,
-            preventCopyInFormFields: (_t_preventCopyInFormFields = t.preventCopyInFormFields) !== null && _t_preventCopyInFormFields !== void 0 ? _t_preventCopyInFormFields : !1
+            isIos: S(o) === "ios",
+            useHrefDecorator: (_e_useHrefDecorator = e.useHrefDecorator) !== null && _e_useHrefDecorator !== void 0 ? _e_useHrefDecorator : ne,
+            t: E,
+            preventCopyInFormFields: (_e_preventCopyInFormFields = e.preventCopyInFormFields) !== null && _e_preventCopyInFormFields !== void 0 ? _e_preventCopyInFormFields : !1
         };
     }, [
         M,
-        t,
+        e,
         k,
-        v
+        E
     ]), D = a.useMemo(()=>{
-        const o = Object.entries(l.textPresets).map((param)=>{
-            let [r, e] = param;
+        const o = Object.entries(c.textPresets).map((param)=>{
+            let [t, r] = param;
             return {
-                [r]: _object_spread({}, e.weight && {
-                    weight: String(E[e.weight])
-                }, e.size && {
-                    size: `${e.size.desktop}px`
-                }, e.lineHeight && {
-                    lineHeight: `${e.lineHeight.desktop}px`
+                [t]: _object_spread({}, r.weight && {
+                    weight: String(_[r.weight])
+                }, r.size && {
+                    size: `${r.size.desktop}px`
+                }, r.lineHeight && {
+                    lineHeight: `${r.lineHeight.desktop}px`
                 })
             };
         });
         return Object.assign({}, ...o);
     }, [
-        l
+        c
     ]), H = a.useMemo(()=>{
-        const o = Object.entries(l.textPresets).map((param)=>{
-            let [r, e] = param;
+        const o = Object.entries(c.textPresets).map((param)=>{
+            let [t, r] = param;
             return {
-                [r]: _object_spread({}, e.weight && {
-                    weight: String(E[e.weight])
-                }, e.size && {
-                    size: `${e.size.mobile}px`
-                }, e.lineHeight && {
-                    lineHeight: `${e.lineHeight.mobile}px`
+                [t]: _object_spread({}, r.weight && {
+                    weight: String(_[r.weight])
+                }, r.size && {
+                    size: `${r.size.mobile}px`
+                }, r.lineHeight && {
+                    lineHeight: `${r.lineHeight.mobile}px`
                 })
             };
         });
         return Object.assign({}, ...o);
     }, [
-        l
-    ]), y = a.useMemo(()=>{
-        const o = Object.entries(l.spacing).map((param)=>{
-            let [r, e] = param;
-            return {
-                [r]: _object_spread({}, "top" in e && {
-                    top: `${e.top.desktop}px`
-                }, "right" in e && {
-                    right: `${e.right.desktop}px`
-                }, "bottom" in e && {
-                    bottom: `${e.bottom.desktop}px`
-                }, "left" in e && {
-                    left: `${e.left.desktop}px`
-                })
-            };
-        });
-        return Object.assign({}, ...o);
-    }, [
-        l
-    ]), T = a.useMemo(()=>{
-        const o = Object.entries(l.spacing).map((param)=>{
-            let [r, e] = param;
-            return {
-                [r]: _object_spread({}, "top" in e && {
-                    top: `${e.top.mobile}px`
-                }, "right" in e && {
-                    right: `${e.right.mobile}px`
-                }, "bottom" in e && {
-                    bottom: `${e.bottom.mobile}px`
-                }, "left" in e && {
-                    left: `${e.left.mobile}px`
-                })
-            };
-        });
-        return Object.assign({}, ...o);
-    }, [
-        l
-    ]), S = (o)=>{
+        c
+    ]), y = a.useMemo(()=>Object.fromEntries(Object.entries(c.spacing).map((param)=>{
+            let [o, t] = param;
+            return "desktop" in t ? [
+                o,
+                `${t.desktop}px`
+            ] : [
+                o,
+                _object_spread({}, "top" in t ? {
+                    top: `${t.top.desktop}px`
+                } : {}, "right" in t ? {
+                    right: `${t.right.desktop}px`
+                } : {}, "bottom" in t ? {
+                    bottom: `${t.bottom.desktop}px`
+                } : {}, "left" in t ? {
+                    left: `${t.left.desktop}px`
+                } : {})
+            ];
+        })), [
+        c
+    ]), T = a.useMemo(()=>Object.fromEntries(Object.entries(c.spacing).map((param)=>{
+            let [o, t] = param;
+            return "mobile" in t ? [
+                o,
+                `${t.mobile}px`
+            ] : [
+                o,
+                _object_spread({}, "top" in t ? {
+                    top: `${t.top.mobile}px`
+                } : {}, "right" in t ? {
+                    right: `${t.right.mobile}px`
+                } : {}, "bottom" in t ? {
+                    bottom: `${t.bottom.mobile}px`
+                } : {}, "left" in t ? {
+                    left: `${t.left.mobile}px`
+                } : {})
+            ];
+        })), [
+        c
+    ]), P = (o)=>{
         if (i || process.env.NODE_ENV === "test" && !process.env.SSR_TEST) return null;
-        const r = P(b), e = P(h), [d, x] = m === "auto" || m === "light" ? [
+        const t = v(b), r = v(h), [p, x] = m === "auto" || m === "light" ? [
             b,
-            r
+            t
         ] : [
             h,
-            e
+            r
         ], j = m === "auto" ? `@media (prefers-color-scheme: dark) {
                     ${o} {
-                        ${u(g.colors, h)};
-                        ${u(g.rawColors, e)}
+                        ${g(u.colors, h)};
+                        ${g(u.rawColors, r)}
                     }
                 }` : "";
-        var _t_skin_borderRadii;
+        var _e_skin_borderRadii;
         return /* @__PURE__ */ n("style", {
             children: `
                 ${o} {
-                    ${u(g, {
-                colors: d,
+                    ${g(u, {
+                colors: p,
                 rawColors: x,
                 textPresets: D,
-                borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : R,
+                borderRadii: (_e_skin_borderRadii = e.skin.borderRadii) !== null && _e_skin_borderRadii !== void 0 ? _e_skin_borderRadii : O,
                 spacing: y
             })}
                 }
-                @media ${te} {
+                @media ${oe} {
                     ${o} {
-                        ${u(g.textPresets, H)}
-                        ${u(g.spacing, T)}
+                        ${g(u.textPresets, H)}
+                        ${g(u.spacing, T)}
                     }
                 }
                 ${j}
@@ -257,28 +260,28 @@ const re = "(prefers-color-scheme: dark)", ie = ()=>{
             /* @__PURE__ */ n(W, {
                 children: /* @__PURE__ */ n(q, {
                     children: /* @__PURE__ */ n(G.Provider, {
-                        value: l,
+                        value: c,
                         children: /* @__PURE__ */ n(J, {
-                            eventFormat: l.analytics.eventFormat,
+                            eventFormat: c.analytics.eventFormat,
                             children: /* @__PURE__ */ n(Q, {
                                 children: /* @__PURE__ */ n(K, {
                                     children: /* @__PURE__ */ n(F, {
                                         children: /* @__PURE__ */ n(N, {
-                                            children: /* @__PURE__ */ n(ee, {
+                                            children: /* @__PURE__ */ n(te, {
                                                 children: s ? /* @__PURE__ */ C($, {
                                                     children: [
-                                                        S(`[data-mistica-theme="${p}"]`),
+                                                        P(`[data-mistica-theme="${d}"]`),
                                                         /*#__PURE__*/ a.createElement(s, {
                                                             style: {
                                                                 isolation: "isolate"
                                                             },
-                                                            "data-mistica-theme": i ? void 0 : p
-                                                        }, c)
+                                                            "data-mistica-theme": i ? void 0 : d
+                                                        }, l)
                                                     ]
                                                 }) : /* @__PURE__ */ C($, {
                                                     children: [
-                                                        S(":root"),
-                                                        c
+                                                        P(":root"),
+                                                        l
                                                     ]
                                                 })
                                             })
@@ -290,8 +293,8 @@ const re = "(prefers-color-scheme: dark)", ie = ()=>{
                     })
                 })
             }),
-            !s && /* @__PURE__ */ n(ae, {})
+            !s && /* @__PURE__ */ n(ce, {})
         ]
     });
 };
-export { Pe as default, ie as useIsOsDarkModeEnabled };
+export { Ie as default, se as useIsOsDarkModeEnabled };

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

@@ -1,12 +1,12 @@
-/* empty css                                     */ /* empty css                                    */ var a = {
-    vertical: "v17_w6pat20",
-    horizontal: "v17_w6pat21"
-}, _ = "v17_w6pat23 v17_w6pat22 v17_1y2v1nfq4 v17_1y2v1nfqh", n = "v17_w6pat25 v17_w6pat24 v17_1y2v1nfqq v17_1y2v1nfsh v17_1y2v1nfhf", e = {
-    active: "v17_w6pat26",
-    inactive: "v17_w6pat27",
-    completed: "v17_w6pat28"
-}, p = "v17_w6pat2a v17_w6pat29 v17_1y2v1nfq4 v17_1y2v1nfqj", f = "v17_w6pat2b", r = "v17_w6pat2d v17_w6pat2c v17_1y2v1nfr1 v17_1y2v1nfrh v17_1y2v1nfso v17_1y2v1nfq4 v17_1y2v1nfqj v17_1y2v1nfqd v17_1y2v1nf83", w = {
-    default: "v17_w6pat2g v17_w6pat2f v17_w6pat2e v17_1y2v1nfqq",
-    overBrand: "v17_w6pat2h v17_w6pat2f v17_w6pat2e v17_1y2v1nfqq"
+/* empty css                                     */ /* empty css                                    */ var t = {
+    vertical: "v17_1_w6pat20",
+    horizontal: "v17_1_w6pat21"
+}, a = "v17_1_w6pat23 v17_1_w6pat22 v17_1_1y2v1nfra v17_1_1y2v1nfrn", n = "v17_1_w6pat25 v17_1_w6pat24 v17_1_1y2v1nfrw v17_1_1y2v1nftn v17_1_1y2v1nfil", e = {
+    active: "v17_1_w6pat26",
+    inactive: "v17_1_w6pat27",
+    completed: "v17_1_w6pat28"
+}, r = "v17_1_w6pat2a v17_1_w6pat29 v17_1_1y2v1nfra v17_1_1y2v1nfrp", p = "v17_1_w6pat2b", w = "v17_1_w6pat2d v17_1_w6pat2c v17_1_1y2v1nfs7 v17_1_1y2v1nfsn v17_1_1y2v1nftu v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nfrj v17_1_1y2v1nf8x", f = {
+    default: "v17_1_w6pat2g v17_1_w6pat2f v17_1_w6pat2e v17_1_1y2v1nfrw",
+    overBrand: "v17_1_w6pat2h v17_1_w6pat2f v17_1_w6pat2e v17_1_1y2v1nfrw"
 };
-export { f as asset, r as assetNumberContainer, n as itemContent, w as line, p as lineContainer, a as timeline, _ as timelineItem, e as timelineItemState };
+export { p as asset, w as assetNumberContainer, n as itemContent, f as line, r as lineContainer, t as timeline, a as timelineItem, e as timelineItemState };

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

@@ -1,8 +1,8 @@
-/* empty css                                     */ /* empty css                                 */ var y = "v17_18fye840 v17_1y2v1nfq8", _ = "v17_18fye841", e = "v17_18fye843 v17_18fye841 v17_18fye842 v17_1y2v1nfq5 v17_1y2v1nfqd", n = "v17_18fye845 v17_18fye841 v17_18fye844 v17_1y2v1nfq8", a = "v17_18fye847 v17_18fye846 v17_1y2v1nfq4 v17_1y2v1nfqa v17_1y2v1nfqj", i = "v17_18fye848", r = {
-    default: "v17_18fye84g v17_18fye84a v17_18fye849 v17_1y2v1nfil v17_1y2v1nfju v17_1y2v1nfg6 v17_1y2v1nfhf v17_1y2v1nfsw v17_18fye84b v17_1y2v1nfdi",
-    brand: "v17_18fye84h v17_18fye84a v17_18fye849 v17_1y2v1nfil v17_1y2v1nfju v17_1y2v1nfg6 v17_1y2v1nfhf v17_1y2v1nfsw v17_18fye84c v17_1y2v1nf83",
-    negative: "v17_18fye84i v17_18fye84a v17_18fye849 v17_1y2v1nfil v17_1y2v1nfju v17_1y2v1nfg6 v17_1y2v1nfhf v17_1y2v1nfsw v17_18fye84d v17_1y2v1nf83",
-    alternative: "v17_18fye84j v17_18fye84a v17_18fye849 v17_1y2v1nfil v17_1y2v1nfju v17_1y2v1nfg6 v17_1y2v1nfhf v17_1y2v1nfsw v17_18fye84e v17_1y2v1nf83",
-    media: "v17_18fye84k v17_18fye84a v17_18fye849 v17_1y2v1nfil v17_1y2v1nfju v17_1y2v1nfg6 v17_1y2v1nfhf v17_1y2v1nfsw v17_18fye84f"
+/* empty css                                     */ /* empty css                                 */ var f = "v17_1_18fye840 v17_1_1y2v1nfre", y = "v17_1_18fye841", e = "v17_1_18fye843 v17_1_18fye841 v17_1_18fye842 v17_1_1y2v1nfrb v17_1_1y2v1nfrj", n = "v17_1_18fye845 v17_1_18fye841 v17_1_18fye844 v17_1_1y2v1nfre", r = "v17_1_18fye847 v17_1_18fye846 v17_1_1y2v1nfra v17_1_1y2v1nfrg v17_1_1y2v1nfrp", a = "v17_1_18fye848", i = {
+    default: "v17_1_18fye84g v17_1_18fye84a v17_1_18fye849 v17_1_1y2v1nfjr v17_1_1y2v1nfl0 v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nfu2 v17_1_18fye84b v17_1_1y2v1nfeo",
+    brand: "v17_1_18fye84h v17_1_18fye84a v17_1_18fye849 v17_1_1y2v1nfjr v17_1_1y2v1nfl0 v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nfu2 v17_1_18fye84c v17_1_1y2v1nf8x",
+    negative: "v17_1_18fye84i v17_1_18fye84a v17_1_18fye849 v17_1_1y2v1nfjr v17_1_1y2v1nfl0 v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nfu2 v17_1_18fye84d v17_1_1y2v1nf8x",
+    alternative: "v17_1_18fye84j v17_1_18fye84a v17_1_18fye849 v17_1_1y2v1nfjr v17_1_1y2v1nfl0 v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nfu2 v17_1_18fye84e v17_1_1y2v1nf8x",
+    media: "v17_1_18fye84k v17_1_18fye84a v17_1_18fye849 v17_1_1y2v1nfjr v17_1_1y2v1nfl0 v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nfu2 v17_1_18fye84f"
 };
-export { i as boxedTimerDisplayValue, r as boxedTimerValueContainer, _ as inlineText, n as shortLabelText, a as timerDisplayValue, y as timerWrapper, e as unitContainer };
+export { a as boxedTimerDisplayValue, i as boxedTimerValueContainer, y as inlineText, n as shortLabelText, r as timerDisplayValue, f as timerWrapper, e as unitContainer };

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

@@ -1,4 +1,4 @@
-/* empty css                                     */ /* empty css                                   */ var n = 40, a = {
+/* empty css                                     */ /* empty css                                   */ var t = 40, n = {
     entering: {
         opacity: 1
     },
@@ -12,5 +12,5 @@
         opacity: 0
     },
     unmounted: {}
-}, _ = "v17_1xhatbp1 v17_1xhatbp0 v17_1y2v1nfpz", p = "v17_1xhatbp3 v17_1xhatbp2 v17_1y2v1nfpy v17_1y2v1nfsx v17_1y2v1nf83", o = "v17_1xhatbp5 v17_1xhatbp4 v17_1y2v1nfpy v17_1y2v1nft7", r = "v17_1xhatbp6", y = "v17_1xhatbp7 v17_1y2v1nfq4 v17_1y2v1nfqa v17_1y2v1nfqj", e = "v17_1xhatbp9 v17_1xhatbp8 v17_1y2v1nfpz v17_1y2v1nfqz v17_1y2v1nft7", x = "v17_1xhatbpb v17_1xhatbpa v17_1y2v1nfqx v17_1y2v1nfrd v17_1y2v1nfpz v17_1y2v1nftd v17_1y2v1nf83", f = "v17_1xhatbpd v17_1xhatbpc v17_1y2v1nfpz";
-export { n as CONTENT_MIN_WIDTH, x as arrow, e as arrowContainer, f as closeButtonIcon, _ as container, r as content, o as contentContainer, p as tooltip, y as tooltipCenter, a as tooltipTransitionClasses };
+}, a = "v17_1_1xhatbp1 v17_1_1xhatbp0 v17_1_1y2v1nfr5", r = "v17_1_1xhatbp3 v17_1_1xhatbp2 v17_1_1y2v1nfr4 v17_1_1y2v1nfu3 v17_1_1y2v1nf8x", o = "v17_1_1xhatbp5 v17_1_1xhatbp4 v17_1_1y2v1nfr4 v17_1_1y2v1nfud", p = "v17_1_1xhatbp6", y = "v17_1_1xhatbp7 v17_1_1y2v1nfra v17_1_1y2v1nfrg v17_1_1y2v1nfrp", e = "v17_1_1xhatbp9 v17_1_1xhatbp8 v17_1_1y2v1nfr5 v17_1_1y2v1nfs5 v17_1_1y2v1nfud", x = "v17_1_1xhatbpb v17_1_1xhatbpa v17_1_1y2v1nfs3 v17_1_1y2v1nfsj v17_1_1y2v1nfr5 v17_1_1y2v1nfuj v17_1_1y2v1nf8x", f = "v17_1_1xhatbpd v17_1_1xhatbpc v17_1_1y2v1nfr5";
+export { t as CONTENT_MIN_WIDTH, x as arrow, e as arrowContainer, f as closeButtonIcon, a as container, p as content, o as contentContainer, r as tooltip, y as tooltipCenter, n as tooltipTransitionClasses };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                     */ var t = "v17_mhti6u0", f = "v17_mhti6u2 v17_mhti6u1 v17_1y2v1nft6", n = "v17_mhti6u4 v17_mhti6u2 v17_mhti6u1 v17_1y2v1nft6 v17_mhti6u3 v17_1y2v1nffx v17_1y2v1nfh6 v17_1y2v1nfif v17_1y2v1nfjo v17_1y2v1nfq6 v17_1y2v1nfsm v17_1y2v1nfqr v17_1y2v1nf7x v17_1y2v1nffw v17_1y2v1nft8", i = "v17_mhti6u5";
-export { f as base, t as marginReset, i as notTouchable, n as touchable };
+/* empty css                                     */ /* empty css                                     */ var t = "v17_1_mhti6u0", n = "v17_1_mhti6u2 v17_1_mhti6u1 v17_1_1y2v1nfuc", u = "v17_1_mhti6u4 v17_1_mhti6u2 v17_1_mhti6u1 v17_1_1y2v1nfuc v17_1_mhti6u3 v17_1_1y2v1nfh3 v17_1_1y2v1nfic v17_1_1y2v1nfjl v17_1_1y2v1nfku v17_1_1y2v1nfrc v17_1_1y2v1nfts v17_1_1y2v1nfrx v17_1_1y2v1nf8i v17_1_1y2v1nfh2 v17_1_1y2v1nfue", i = "v17_1_mhti6u5";
+export { n as base, t as marginReset, i as notTouchable, u as touchable };

package/dist-es/utils/aspect-ratio-support.css-mistica.js

@@ -1,4 +1,4 @@
-/* empty css                                      */ /* empty css                                                */ var y = {
-    aspectRatio: "var(--v17_yqswj60)"
-}, a = "v17_yqswj61 v17_1y2v1nft7 v17_1y2v1nfsj v17_1y2v1nfsk v17_1y2v1nfpy", n = "v17_yqswj62", _ = "v17_yqswj63 v17_1y2v1nfqr v17_1y2v1nfr8 v17_1y2v1nftd v17_1y2v1nfts";
-export { n as container, _ as containerWithWrapper, y as vars, a as wrapper };
+/* empty css                                      */ /* empty css                                                */ var r = {
+    aspectRatio: "var(--v17_1_yqswj60)"
+}, y = "v17_1_yqswj61 v17_1_1y2v1nfud v17_1_1y2v1nftp v17_1_1y2v1nftq v17_1_1y2v1nfr4", a = "v17_1_yqswj62", n = "v17_1_yqswj63 v17_1_1y2v1nfrx v17_1_1y2v1nfse v17_1_1y2v1nfuj v17_1_1y2v1nfuy";
+export { a as container, n as containerWithWrapper, r as vars, y as wrapper };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                 */ var _ = "v17_19h163j0 v17_1y2v1nftd v17_1y2v1nfts v17_1y2v1nfq6 v17_1y2v1nffw v17_1y2v1nfsj v17_1y2v1nfsk v17_1y2v1nfv1";
-export { _ as video };
+/* empty css                                     */ /* empty css                                 */ var y = "v17_1_19h163j0 v17_1_1y2v1nfuj v17_1_1y2v1nfuy v17_1_1y2v1nfrc v17_1_1y2v1nfh2 v17_1_1y2v1nftp v17_1_1y2v1nftq v17_1_1y2v1nfw7";
+export { y as video };

package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                                     */ var a = "v17_1ezqdj90", r = "v17_1ezqdj91";
+/* empty css                                                     */ var a = "v17_1_1ezqdj90", r = "v17_1_1ezqdj91";
 export { a as container, r as waveFadeOut };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "17.0.0",
+    "version": "17.1.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -129,7 +129,7 @@
         "lodash": "^4.17.21",
         "mini-css-extract-plugin": "^1.6.2",
         "node-fetch": "^2.6.7",
-        "playroom": "^1.2.1",
+        "playroom": "^1.3.0",
         "postcss": "^8.4.18",
         "postcss-loader": "^4.2.0",
         "prettier": "^3.3.2",
@@ -222,11 +222,12 @@
         "@types/react-dom": "19.2.3",
         "@testing-library/dom": "^8.19.1",
         "lottie-react@^2.4.0": "patch:lottie-react@npm%3A2.4.0#./.yarn/patches/lottie-react-npm-2.4.0-d4d95c55aa.patch",
-        "playroom@^1.2.1": "patch:playroom@npm%3A1.2.1#./.yarn/patches/playroom-npm-1.2.1-6d189aed91.patch"
+        "playroom@^1.3.0": "patch:playroom@npm%3A1.3.0#./.yarn/patches/playroom-npm-1.3.0-0686fbefa3.patch"
     },
     "packageManager": "yarn@3.6.1",
     "workspaces": [
-        "packages/eslint-plugin-mistica-local-rules"
+        "packages/eslint-plugin-mistica-local-rules",
+        "packages/generate-design-tokens"
     ],
     "engines": {
         "node": ">=24.0.0"

package/src/__figma__/pagination.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=37911-5734
+// source=src/pagination.tsx
+// component=Pagination
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Mode" is a VARIANT: "Default" → mode="default", "Icon only" → mode="iconOnly".
+const mode = instance.getEnum('Mode', {
+    Default: 'default',
+    'Icon only': 'iconOnly',
+});
+
+// "Show all pages" (True | False) is a Figma-only simplification: whether ellipsis
+// appears depends on the combination of totalPages and surroundingPageCount, not a
+// single prop. It has no direct code prop mapping and is omitted.
+
+// "Current page" (Start | Middle | End) is a Figma-only simplification to show
+// navigation control states; it has no direct code prop mapping and is omitted.
+
+const hideNavigationControls = instance.getBoolean('Hide navigation controls');
+const hidePageList = instance.getBoolean('Hide page list');
+
+export default {
+    example: figma.code`
+        <Pagination
+            totalPages={9}
+            currentPage={3}
+            onChange={() => {}}
+            ${mode === 'iconOnly' ? 'mode="iconOnly"' : ''}
+            ${hideNavigationControls ? 'hideNavigationControls' : ''}
+            ${hidePageList ? 'hidePageList' : ''}
+        />
+    `,
+    imports: ['import {Pagination} from "@telefonica/mistica";'],
+    id: 'pagination',
+    metadata: {nestable: false},
+};

package/src/__figma__/pagination.mobile.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=66931-3740
+// source=src/pagination.tsx
+// component=Pagination
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Mode" is a VARIANT: "Default" → mode="default", "Icon only" → mode="iconOnly".
+const mode = instance.getEnum('Mode', {
+    Default: 'default',
+    'Icon only': 'iconOnly',
+});
+
+// "Show all pages" (True | False) is a Figma-only simplification: whether ellipsis
+// appears depends on the combination of totalPages and surroundingPageCount, not a
+// single prop. It has no direct code prop mapping and is omitted.
+
+// "Current page" (Start | Middle | End) is a Figma-only simplification to show
+// navigation control states; it has no direct code prop mapping and is omitted.
+
+const hideNavigationControls = instance.getBoolean('Hide navigation controls');
+const hidePageList = instance.getBoolean('Hide page list');
+
+export default {
+    example: figma.code`
+        <Pagination
+            totalPages={9}
+            currentPage={3}
+            onChange={() => {}}
+            ${mode === 'iconOnly' ? 'mode="iconOnly"' : ''}
+            ${hideNavigationControls ? 'hideNavigationControls' : ''}
+            ${hidePageList ? 'hidePageList' : ''}
+        />
+    `,
+    imports: ['import {Pagination} from "@telefonica/mistica";'],
+    id: 'pagination-mobile',
+    metadata: {nestable: false},
+};