@telefonica/mistica 16.56.0 → 16.57.0-beta.1

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

@@ -52,21 +52,21 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsxs as d, jsx as l, Fragment as y } from "react/jsx-runtime";
-import * as g from "react";
+import * as H from "react";
 import m from "classnames";
-import { useTheme as S } from "./hooks.js";
-import { Text1 as k } from "./text.js";
-import { field as v, background as H, helperContainer as F, fieldContainer as V, fullWidth as N, normalWidth as C, disabled as D, labelText as E, labelContainer as M, shrinked as O, warnIcon as A, helperText as L, leftHelperText as R, rightHelperText as W } from "./text-field-components.css-mistica.js";
-import { vars as p } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as $ } from "./utils/dom.js";
-import { formFieldOptionalLabelSuffix as w } from "./text-tokens.js";
-import j from "./generated/mistica-icons/icon-warning-regular.js";
-import I from "./screen-reader-only.js";
+import { useTheme as T } from "./hooks.js";
+import { Text1 as g } from "./text.js";
+import { field as v, background as L, focused as F, helperContainer as V, fieldContainer as N, fullWidth as C, normalWidth as D, disabled as E, labelText as M, labelContainer as O, shrinked as A, warnIcon as R, helperText as S, leftHelperText as W, rightHelperText as $ } from "./text-field-components.css-mistica.js";
+import { vars as c } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as w } from "./utils/dom.js";
+import { formFieldOptionalLabelSuffix as j } from "./text-tokens.js";
+import I from "./generated/mistica-icons/icon-warning-regular.js";
+import P from "./screen-reader-only.js";
 import { fieldVars as t } from "./text-field-base.css-mistica.js";
-import { applyCssVars as P, pxToRem as i } from "./utils/css.js";
-const q = ()=>{
-    const { textPresets: e } = S();
-    return P({
+import { applyCssVars as q, pxToRem as i } from "./utils/css.js";
+const B = ()=>{
+    const { textPresets: e } = T();
+    return q({
         [t.mobileFontSize]: i(e.inputValue.size.mobile),
         [t.desktopFontSize]: i(e.inputValue.size.desktop),
         [t.mobileLineHeight]: i(e.inputValue.lineHeight.mobile),
@@ -82,10 +82,10 @@ const q = ()=>{
         [t.labelScaleMobile]: `calc(${e.inputLabel.size.mobile} / ${e.inputValue.size.mobile})`,
         [t.labelScaleDesktop]: `calc(${e.inputLabel.size.desktop} / ${e.inputValue.size.desktop})`
     });
-}, ie = (param)=>{
-    let { shrinkLabel: e, forId: c, inputState: r, error: n, children: s, style: o, showOptional: a } = param;
-    const u = e || r === "focused" || r === "filled", [h, f] = g.useState("initial"), { texts: b, t: T } = S();
-    g.useEffect(()=>{
+}, le = (param)=>{
+    let { shrinkLabel: e, forId: p, inputState: r, error: n, children: s, style: o, showOptional: a } = param;
+    const u = e || r === "focused" || r === "filled", [h, f] = H.useState("initial"), { texts: b, t: x } = T();
+    H.useEffect(()=>{
         const z = setTimeout(()=>{
             process.env.NODE_ENV !== "test" && f("transform 150ms, width 150ms");
         });
@@ -93,72 +93,72 @@ const q = ()=>{
             clearTimeout(z);
         };
     }, []);
-    let x = p.colors.textSecondary;
-    return n && r !== "default" ? x = p.colors.textError : r === "focused" && (x = p.colors.textActivated), /* @__PURE__ */ d("label", {
-        className: m(M, {
-            [O]: u
+    let k = c.colors.textSecondary;
+    return n && r !== "default" ? k = c.colors.textError : r === "focused" && (k = c.colors.textActivated), /* @__PURE__ */ d("label", {
+        className: m(O, {
+            [A]: u
         }),
-        htmlFor: c,
+        htmlFor: p,
         style: _object_spread_props(_object_spread({
-            color: x
+            color: k
         }, o), {
             transition: h
         }),
         "data-testid": "label",
         children: [
             /* @__PURE__ */ l("span", {
-                className: E,
+                className: M,
                 children: s
             }),
             a ? /* @__PURE__ */ d("span", {
                 children: [
                     " (",
-                    b.formFieldOptionalLabelSuffix || T(w),
+                    b.formFieldOptionalLabelSuffix || x(j),
                     ")"
                 ]
             }) : null
         ]
     });
-}, le = (param)=>{
-    let { leftText: e, leftTextId: c, rightText: r, rightTextId: n, rightTextLabel: s, error: o } = param;
-    const a = o ? p.colors.textError : p.colors.textSecondary;
+}, re = (param)=>{
+    let { leftText: e, leftTextId: p, rightText: r, rightTextId: n, rightTextLabel: s, error: o } = param;
+    const a = o ? c.colors.textError : c.colors.textSecondary;
     return /* @__PURE__ */ d(y, {
         children: [
             e && /* @__PURE__ */ d("p", {
-                className: m(L, R),
+                className: m(S, W),
                 "data-testid": o ? "errorText" : "helperText",
                 children: [
-                    o && /* @__PURE__ */ l(k, {
+                    o && /* @__PURE__ */ l(g, {
                         regular: !0,
                         color: a,
-                        children: /* @__PURE__ */ l(j, {
+                        children: /* @__PURE__ */ l(I, {
                             color: "currentColor",
-                            className: A
+                            className: R
                         })
                     }),
-                    /* @__PURE__ */ l(k, {
+                    /* @__PURE__ */ l(g, {
                         color: a,
                         regular: !0,
-                        id: c,
+                        id: p,
                         "aria-live": o ? "assertive" : void 0,
                         children: e
                     })
                 ]
             }),
             r && /* @__PURE__ */ l("div", {
-                className: m(L, {
-                    [W]: !!e
+                className: m(S, {
+                    [$]: !!e
                 }),
                 "data-testid": "endHelperText",
-                children: /* @__PURE__ */ d(k, {
-                    color: p.colors.textSecondary,
+                children: /* @__PURE__ */ d(g, {
+                    color: c.colors.textSecondary,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
                     wordBreak: !1,
                     id: n,
                     children: [
-                        s && /* @__PURE__ */ l(I, {
+                        s && /* @__PURE__ */ l(P, {
                             children: /* @__PURE__ */ l("span", {
                                 children: s
                             })
@@ -172,31 +172,31 @@ const q = ()=>{
             })
         ]
     });
-}, re = (param)=>{
-    let { multiline: e, disabled: c, children: r, helperText: n, className: s, fieldRef: o, fullWidth: a, readOnly: u, dataAttributes: h } = param;
-    const f = q();
+}, oe = (param)=>{
+    let { multiline: e, disabled: p, children: r, helperText: n, className: s, fieldRef: o, fullWidth: a, readOnly: u, dataAttributes: h, focus: f } = param;
+    const b = B();
     return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ d("div", _object_spread_props(_object_spread({
-        className: m(V, a ? N : C, {
-            [D]: c
+        className: m(N, a ? C : D, {
+            [E]: p
         }),
-        onClick: (b)=>{
-            var _b_currentTarget_querySelector;
-            (_b_currentTarget_querySelector = b.currentTarget.querySelector(e ? "textarea" : "input")) === null || _b_currentTarget_querySelector === void 0 ? void 0 : _b_currentTarget_querySelector.focus();
+        onClick: (x)=>{
+            var _x_currentTarget_querySelector;
+            (_x_currentTarget_querySelector = x.currentTarget.querySelector(e ? "textarea" : "input")) === null || _x_currentTarget_querySelector === void 0 ? void 0 : _x_currentTarget_querySelector.focus();
         },
-        style: f
-    }, $(h)), {
+        style: b
+    }, w(h)), {
         children: [
             /* @__PURE__ */ l("div", {
-                className: m(v, u ? H.readOnly : H.default, s),
+                className: m(v, u ? L.readOnly : L.default, s, f && F),
                 ref: o,
                 children: r
             }),
             n && /* @__PURE__ */ l("div", {
-                className: F,
+                className: V,
                 children: n
             })
         ]
     })));
 };
-export { re as FieldContainer, le as HelperText, ie as Label, q as useApplyCssVars };
+export { oe as FieldContainer, re as HelperText, le as Label, B as useApplyCssVars };

package/dist-es/text-link.css-mistica.js

@@ -1,10 +1,10 @@
-/* empty css                                     */ /* empty css                                     */ var n = {
-    underlineAlways: "v16_56_1m1n0pr2",
-    underlineOnHover: "v16_56_1m1n0pr3"
-}, r = {
-    default: "v16_56_1m1n0pr8 v16_56_1m1n0pr1 v16_56_1m1n0pr0 v16_56_1y2v1nfqs v16_56_1y2v1nfq7 v16_56_1y2v1nft7 v16_56_1m1n0pr4 v16_56_1y2v1nf34",
-    brand: "v16_56_1m1n0pr9 v16_56_1m1n0pr1 v16_56_1m1n0pr0 v16_56_1y2v1nfqs v16_56_1y2v1nfq7 v16_56_1y2v1nft7 v16_56_1m1n0pr5 v16_56_1y2v1nf37",
-    negative: "v16_56_1m1n0pra v16_56_1m1n0pr1 v16_56_1m1n0pr0 v16_56_1y2v1nfqs v16_56_1y2v1nfq7 v16_56_1y2v1nft7 v16_56_1m1n0pr6 v16_56_1y2v1nf36",
-    media: "v16_56_1m1n0prb v16_56_1m1n0pr1 v16_56_1m1n0pr0 v16_56_1y2v1nfqs v16_56_1y2v1nfq7 v16_56_1y2v1nft7 v16_56_1m1n0pr7 v16_56_1y2v1nf38"
+/* empty css                                     */ /* empty css                                     */ var e = {
+    underlineAlways: "v16_57_0-beta_1_1m1n0pr2",
+    underlineOnHover: "v16_57_0-beta_1_1m1n0pr3"
+}, t = {
+    default: "v16_57_0-beta_1_1m1n0pr8 v16_57_0-beta_1_1m1n0pr1 v16_57_0-beta_1_1m1n0pr0 v16_57_0-beta_1_1y2v1nfqs v16_57_0-beta_1_1y2v1nfq7 v16_57_0-beta_1_1y2v1nft7 v16_57_0-beta_1_1m1n0pr4 v16_57_0-beta_1_1y2v1nf34",
+    brand: "v16_57_0-beta_1_1m1n0pr9 v16_57_0-beta_1_1m1n0pr1 v16_57_0-beta_1_1m1n0pr0 v16_57_0-beta_1_1y2v1nfqs v16_57_0-beta_1_1y2v1nfq7 v16_57_0-beta_1_1y2v1nft7 v16_57_0-beta_1_1m1n0pr5 v16_57_0-beta_1_1y2v1nf37",
+    negative: "v16_57_0-beta_1_1m1n0pra v16_57_0-beta_1_1m1n0pr1 v16_57_0-beta_1_1m1n0pr0 v16_57_0-beta_1_1y2v1nfqs v16_57_0-beta_1_1y2v1nfq7 v16_57_0-beta_1_1y2v1nft7 v16_57_0-beta_1_1m1n0pr6 v16_57_0-beta_1_1y2v1nf36",
+    media: "v16_57_0-beta_1_1m1n0prb v16_57_0-beta_1_1m1n0pr1 v16_57_0-beta_1_1m1n0pr0 v16_57_0-beta_1_1y2v1nfqs v16_57_0-beta_1_1y2v1nfq7 v16_57_0-beta_1_1y2v1nft7 v16_57_0-beta_1_1m1n0pr7 v16_57_0-beta_1_1y2v1nf38"
 };
-export { n as linkStyles, r as variants };
+export { e as linkStyles, t as variants };

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

@@ -1,8 +1,8 @@
-/* empty css                                */ var r = {
-    mobileSize: "var(--v16_56_splu5g0)",
-    desktopSize: "var(--v16_56_splu5g1)",
-    mobileLineHeight: "var(--v16_56_splu5g2)",
-    desktopLineHeight: "var(--v16_56_splu5g3)",
-    lineClamp: "var(--v16_56_splu5g4)"
-}, _ = "v16_56_splu5g5", e = "v16_56_splu5g6", a = "v16_56_splu5g7", p = "v16_56_splu5g8", t = "v16_56_splu5g9";
-export { a as text, p as truncate, t as truncateToOneLine, r as vars, _ as withWordBreak, e as withoutWordBreak };
+/* empty css                                */ var e = {
+    mobileSize: "var(--v16_57_0-beta_1_splu5g0)",
+    desktopSize: "var(--v16_57_0-beta_1_splu5g1)",
+    mobileLineHeight: "var(--v16_57_0-beta_1_splu5g2)",
+    desktopLineHeight: "var(--v16_57_0-beta_1_splu5g3)",
+    lineClamp: "var(--v16_57_0-beta_1_splu5g4)"
+}, a = "v16_57_0-beta_1_splu5g5", t = "v16_57_0-beta_1_splu5g6", v = "v16_57_0-beta_1_splu5g7", r = "v16_57_0-beta_1_splu5g8", p = "v16_57_0-beta_1_splu5g9";
+export { v as text, r as truncate, p as truncateToOneLine, e as vars, a as withWordBreak, t as withoutWordBreak };

package/dist-es/theme-context.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                         */ var a = "v16_56_pa0wjc0";
-export { a as themeVars };
+/* empty css                                         */ var e = "v16_57_0-beta_1_pa0wjc0";
+export { e as themeVars };

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

@@ -1,12 +1,12 @@
-/* empty css                                     */ /* empty css                                    */ var t = {
-    vertical: "v16_56_w6pat20",
-    horizontal: "v16_56_w6pat21"
-}, a = "v16_56_w6pat23 v16_56_w6pat22 v16_56_1y2v1nfq4 v16_56_1y2v1nfqh", n = "v16_56_w6pat25 v16_56_w6pat24 v16_56_1y2v1nfqq v16_56_1y2v1nfsh v16_56_1y2v1nfhf", e = {
-    active: "v16_56_w6pat26",
-    inactive: "v16_56_w6pat27",
-    completed: "v16_56_w6pat28"
-}, p = "v16_56_w6pat2a v16_56_w6pat29 v16_56_1y2v1nfq4 v16_56_1y2v1nfqj", f = "v16_56_w6pat2b", r = "v16_56_w6pat2d v16_56_w6pat2c v16_56_1y2v1nfr1 v16_56_1y2v1nfrh v16_56_1y2v1nfso v16_56_1y2v1nfq4 v16_56_1y2v1nfqj v16_56_1y2v1nfqd v16_56_1y2v1nf83", w = {
-    default: "v16_56_w6pat2g v16_56_w6pat2f v16_56_w6pat2e v16_56_1y2v1nfqq",
-    overBrand: "v16_56_w6pat2h v16_56_w6pat2f v16_56_w6pat2e v16_56_1y2v1nfqq"
+/* empty css                                     */ /* empty css                                    */ var a = {
+    vertical: "v16_57_0-beta_1_w6pat20",
+    horizontal: "v16_57_0-beta_1_w6pat21"
+}, e = "v16_57_0-beta_1_w6pat23 v16_57_0-beta_1_w6pat22 v16_57_0-beta_1_1y2v1nfq4 v16_57_0-beta_1_1y2v1nfqh", v = "v16_57_0-beta_1_w6pat25 v16_57_0-beta_1_w6pat24 v16_57_0-beta_1_1y2v1nfqq v16_57_0-beta_1_1y2v1nfsh v16_57_0-beta_1_1y2v1nfhf", b = {
+    active: "v16_57_0-beta_1_w6pat26",
+    inactive: "v16_57_0-beta_1_w6pat27",
+    completed: "v16_57_0-beta_1_w6pat28"
+}, n = "v16_57_0-beta_1_w6pat2a v16_57_0-beta_1_w6pat29 v16_57_0-beta_1_1y2v1nfq4 v16_57_0-beta_1_1y2v1nfqj", p = "v16_57_0-beta_1_w6pat2b", f = "v16_57_0-beta_1_w6pat2d v16_57_0-beta_1_w6pat2c v16_57_0-beta_1_1y2v1nfr1 v16_57_0-beta_1_1y2v1nfrh v16_57_0-beta_1_1y2v1nfso v16_57_0-beta_1_1y2v1nfq4 v16_57_0-beta_1_1y2v1nfqj v16_57_0-beta_1_1y2v1nfqd v16_57_0-beta_1_1y2v1nf83", r = {
+    default: "v16_57_0-beta_1_w6pat2g v16_57_0-beta_1_w6pat2f v16_57_0-beta_1_w6pat2e v16_57_0-beta_1_1y2v1nfqq",
+    overBrand: "v16_57_0-beta_1_w6pat2h v16_57_0-beta_1_w6pat2f v16_57_0-beta_1_w6pat2e v16_57_0-beta_1_1y2v1nfqq"
 };
-export { f as asset, r as assetNumberContainer, n as itemContent, w as line, p as lineContainer, t as timeline, a as timelineItem, e as timelineItemState };
+export { p as asset, f as assetNumberContainer, v as itemContent, r as line, n as lineContainer, a as timeline, e as timelineItem, b as timelineItemState };

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

@@ -1,8 +1,8 @@
-/* empty css                                     */ /* empty css                                 */ var f = "v16_56_18fye840 v16_56_1y2v1nfq8", y = "v16_56_18fye841", e = "v16_56_18fye843 v16_56_18fye841 v16_56_18fye842 v16_56_1y2v1nfq5 v16_56_1y2v1nfqd", n = "v16_56_18fye845 v16_56_18fye841 v16_56_18fye844 v16_56_1y2v1nfq8", a = "v16_56_18fye847 v16_56_18fye846 v16_56_1y2v1nfq4 v16_56_1y2v1nfqa v16_56_1y2v1nfqj", i = "v16_56_18fye848", r = {
-    default: "v16_56_18fye84g v16_56_18fye84a v16_56_18fye849 v16_56_1y2v1nfil v16_56_1y2v1nfju v16_56_1y2v1nfg6 v16_56_1y2v1nfhf v16_56_1y2v1nfsw v16_56_18fye84b v16_56_1y2v1nfdi",
-    brand: "v16_56_18fye84h v16_56_18fye84a v16_56_18fye849 v16_56_1y2v1nfil v16_56_1y2v1nfju v16_56_1y2v1nfg6 v16_56_1y2v1nfhf v16_56_1y2v1nfsw v16_56_18fye84c v16_56_1y2v1nf83",
-    negative: "v16_56_18fye84i v16_56_18fye84a v16_56_18fye849 v16_56_1y2v1nfil v16_56_1y2v1nfju v16_56_1y2v1nfg6 v16_56_1y2v1nfhf v16_56_1y2v1nfsw v16_56_18fye84d v16_56_1y2v1nf83",
-    alternative: "v16_56_18fye84j v16_56_18fye84a v16_56_18fye849 v16_56_1y2v1nfil v16_56_1y2v1nfju v16_56_1y2v1nfg6 v16_56_1y2v1nfhf v16_56_1y2v1nfsw v16_56_18fye84e v16_56_1y2v1nf83",
-    media: "v16_56_18fye84k v16_56_18fye84a v16_56_18fye849 v16_56_1y2v1nfil v16_56_1y2v1nfju v16_56_1y2v1nfg6 v16_56_1y2v1nfhf v16_56_1y2v1nfsw v16_56_18fye84f"
+/* empty css                                     */ /* empty css                                 */ var v = "v16_57_0-beta_1_18fye840 v16_57_0-beta_1_1y2v1nfq8", a = "v16_57_0-beta_1_18fye841", t = "v16_57_0-beta_1_18fye843 v16_57_0-beta_1_18fye841 v16_57_0-beta_1_18fye842 v16_57_0-beta_1_1y2v1nfq5 v16_57_0-beta_1_1y2v1nfqd", f = "v16_57_0-beta_1_18fye845 v16_57_0-beta_1_18fye841 v16_57_0-beta_1_18fye844 v16_57_0-beta_1_1y2v1nfq8", b = "v16_57_0-beta_1_18fye847 v16_57_0-beta_1_18fye846 v16_57_0-beta_1_1y2v1nfq4 v16_57_0-beta_1_1y2v1nfqa v16_57_0-beta_1_1y2v1nfqj", y = "v16_57_0-beta_1_18fye848", n = {
+    default: "v16_57_0-beta_1_18fye84g v16_57_0-beta_1_18fye84a v16_57_0-beta_1_18fye849 v16_57_0-beta_1_1y2v1nfil v16_57_0-beta_1_1y2v1nfju v16_57_0-beta_1_1y2v1nfg6 v16_57_0-beta_1_1y2v1nfhf v16_57_0-beta_1_1y2v1nfsw v16_57_0-beta_1_18fye84b v16_57_0-beta_1_1y2v1nfdi",
+    brand: "v16_57_0-beta_1_18fye84h v16_57_0-beta_1_18fye84a v16_57_0-beta_1_18fye849 v16_57_0-beta_1_1y2v1nfil v16_57_0-beta_1_1y2v1nfju v16_57_0-beta_1_1y2v1nfg6 v16_57_0-beta_1_1y2v1nfhf v16_57_0-beta_1_1y2v1nfsw v16_57_0-beta_1_18fye84c v16_57_0-beta_1_1y2v1nf83",
+    negative: "v16_57_0-beta_1_18fye84i v16_57_0-beta_1_18fye84a v16_57_0-beta_1_18fye849 v16_57_0-beta_1_1y2v1nfil v16_57_0-beta_1_1y2v1nfju v16_57_0-beta_1_1y2v1nfg6 v16_57_0-beta_1_1y2v1nfhf v16_57_0-beta_1_1y2v1nfsw v16_57_0-beta_1_18fye84d v16_57_0-beta_1_1y2v1nf83",
+    alternative: "v16_57_0-beta_1_18fye84j v16_57_0-beta_1_18fye84a v16_57_0-beta_1_18fye849 v16_57_0-beta_1_1y2v1nfil v16_57_0-beta_1_1y2v1nfju v16_57_0-beta_1_1y2v1nfg6 v16_57_0-beta_1_1y2v1nfhf v16_57_0-beta_1_1y2v1nfsw v16_57_0-beta_1_18fye84e v16_57_0-beta_1_1y2v1nf83",
+    media: "v16_57_0-beta_1_18fye84k v16_57_0-beta_1_18fye84a v16_57_0-beta_1_18fye849 v16_57_0-beta_1_1y2v1nfil v16_57_0-beta_1_1y2v1nfju v16_57_0-beta_1_1y2v1nfg6 v16_57_0-beta_1_1y2v1nfhf v16_57_0-beta_1_1y2v1nfsw v16_57_0-beta_1_18fye84f"
 };
-export { i as boxedTimerDisplayValue, r as boxedTimerValueContainer, y as inlineText, n as shortLabelText, a as timerDisplayValue, f as timerWrapper, e as unitContainer };
+export { y as boxedTimerDisplayValue, n as boxedTimerValueContainer, a as inlineText, f as shortLabelText, b as timerDisplayValue, v as timerWrapper, t as unitContainer };

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

@@ -1,4 +1,4 @@
-/* empty css                                     */ /* empty css                                   */ var t = 40, n = {
+/* empty css                                     */ /* empty css                                   */ var a = 40, v = {
     entering: {
         opacity: 1
     },
@@ -12,5 +12,5 @@
         opacity: 0
     },
     unmounted: {}
-}, a = "v16_56_1xhatbp1 v16_56_1xhatbp0 v16_56_1y2v1nfpz", p = "v16_56_1xhatbp3 v16_56_1xhatbp2 v16_56_1y2v1nfpy v16_56_1y2v1nfsy v16_56_1y2v1nf83", o = "v16_56_1xhatbp5 v16_56_1xhatbp4 v16_56_1y2v1nfpy v16_56_1y2v1nft8", r = "v16_56_1xhatbp6", y = "v16_56_1xhatbp7 v16_56_1y2v1nfq4 v16_56_1y2v1nfqa v16_56_1y2v1nfqj", e = "v16_56_1xhatbp9 v16_56_1xhatbp8 v16_56_1y2v1nfpz v16_56_1y2v1nfqz v16_56_1y2v1nft8", f = "v16_56_1xhatbpb v16_56_1xhatbpa v16_56_1y2v1nfqx v16_56_1y2v1nfrd v16_56_1y2v1nfpz v16_56_1y2v1nfte v16_56_1y2v1nf83", i = "v16_56_1xhatbpd v16_56_1xhatbpc v16_56_1y2v1nfpz";
-export { t as CONTENT_MIN_WIDTH, f as arrow, e as arrowContainer, i as closeButtonIcon, a as container, r as content, o as contentContainer, p as tooltip, y as tooltipCenter, n as tooltipTransitionClasses };
+}, e = "v16_57_0-beta_1_1xhatbp1 v16_57_0-beta_1_1xhatbp0 v16_57_0-beta_1_1y2v1nfpz", b = "v16_57_0-beta_1_1xhatbp3 v16_57_0-beta_1_1xhatbp2 v16_57_0-beta_1_1y2v1nfpy v16_57_0-beta_1_1y2v1nfsy v16_57_0-beta_1_1y2v1nf83", n = "v16_57_0-beta_1_1xhatbp5 v16_57_0-beta_1_1xhatbp4 v16_57_0-beta_1_1y2v1nfpy v16_57_0-beta_1_1y2v1nft8", p = "v16_57_0-beta_1_1xhatbp6", o = "v16_57_0-beta_1_1xhatbp7 v16_57_0-beta_1_1y2v1nfq4 v16_57_0-beta_1_1y2v1nfqa v16_57_0-beta_1_1y2v1nfqj", r = "v16_57_0-beta_1_1xhatbp9 v16_57_0-beta_1_1xhatbp8 v16_57_0-beta_1_1y2v1nfpz v16_57_0-beta_1_1y2v1nfqz v16_57_0-beta_1_1y2v1nft8", y = "v16_57_0-beta_1_1xhatbpb v16_57_0-beta_1_1xhatbpa v16_57_0-beta_1_1y2v1nfqx v16_57_0-beta_1_1y2v1nfrd v16_57_0-beta_1_1y2v1nfpz v16_57_0-beta_1_1y2v1nfte v16_57_0-beta_1_1y2v1nf83", f = "v16_57_0-beta_1_1xhatbpd v16_57_0-beta_1_1xhatbpc v16_57_0-beta_1_1y2v1nfpz";
+export { a as CONTENT_MIN_WIDTH, y as arrow, r as arrowContainer, f as closeButtonIcon, e as container, p as content, n as contentContainer, b as tooltip, o as tooltipCenter, v as tooltipTransitionClasses };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                     */ var t = "v16_56_mhti6u0", f = "v16_56_mhti6u2 v16_56_mhti6u1 v16_56_1y2v1nft7", n = "v16_56_mhti6u4 v16_56_mhti6u2 v16_56_mhti6u1 v16_56_1y2v1nft7 v16_56_mhti6u3 v16_56_1y2v1nffx v16_56_1y2v1nfh6 v16_56_1y2v1nfif v16_56_1y2v1nfjo v16_56_1y2v1nfq6 v16_56_1y2v1nfsm v16_56_1y2v1nfqr v16_56_1y2v1nf7x v16_56_1y2v1nffw v16_56_1y2v1nft9", i = "v16_56_mhti6u5";
-export { f as base, t as marginReset, i as notTouchable, n as touchable };
+/* empty css                                     */ /* empty css                                     */ var v = "v16_57_0-beta_1_mhti6u0", a = "v16_57_0-beta_1_mhti6u2 v16_57_0-beta_1_mhti6u1 v16_57_0-beta_1_1y2v1nft7", e = "v16_57_0-beta_1_mhti6u4 v16_57_0-beta_1_mhti6u2 v16_57_0-beta_1_mhti6u1 v16_57_0-beta_1_1y2v1nft7 v16_57_0-beta_1_mhti6u3 v16_57_0-beta_1_1y2v1nffx v16_57_0-beta_1_1y2v1nfh6 v16_57_0-beta_1_1y2v1nfif v16_57_0-beta_1_1y2v1nfjo v16_57_0-beta_1_1y2v1nfq6 v16_57_0-beta_1_1y2v1nfsm v16_57_0-beta_1_1y2v1nfqr v16_57_0-beta_1_1y2v1nf7x v16_57_0-beta_1_1y2v1nffw v16_57_0-beta_1_1y2v1nft9", b = "v16_57_0-beta_1_mhti6u5";
+export { a as base, v as marginReset, b as notTouchable, e as touchable };

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

@@ -1,4 +1,4 @@
-/* empty css                                      */ /* empty css                                                */ var r = {
-    aspectRatio: "var(--v16_56_yqswj60)"
-}, y = "v16_56_yqswj61 v16_56_1y2v1nft8 v16_56_1y2v1nfsj v16_56_1y2v1nfsk v16_56_1y2v1nfpy", a = "v16_56_yqswj62", n = "v16_56_yqswj63 v16_56_1y2v1nfqr v16_56_1y2v1nfr8 v16_56_1y2v1nfte v16_56_1y2v1nftt";
-export { a as container, n as containerWithWrapper, r as vars, y as wrapper };
+/* empty css                                      */ /* empty css                                                */ var a = {
+    aspectRatio: "var(--v16_57_0-beta_1_yqswj60)"
+}, t = "v16_57_0-beta_1_yqswj61 v16_57_0-beta_1_1y2v1nft8 v16_57_0-beta_1_1y2v1nfsj v16_57_0-beta_1_1y2v1nfsk v16_57_0-beta_1_1y2v1nfpy", e = "v16_57_0-beta_1_yqswj62", r = "v16_57_0-beta_1_yqswj63 v16_57_0-beta_1_1y2v1nfqr v16_57_0-beta_1_1y2v1nfr8 v16_57_0-beta_1_1y2v1nfte v16_57_0-beta_1_1y2v1nftt";
+export { e as container, r as containerWithWrapper, a as vars, t as wrapper };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                 */ var f = "v16_56_19h163j0 v16_56_1y2v1nfte v16_56_1y2v1nftt v16_56_1y2v1nfq6 v16_56_1y2v1nffw v16_56_1y2v1nfsj v16_56_1y2v1nfsk v16_56_1y2v1nfv2";
-export { f as video };
+/* empty css                                     */ /* empty css                                 */ var t = "v16_57_0-beta_1_19h163j0 v16_57_0-beta_1_1y2v1nfte v16_57_0-beta_1_1y2v1nftt v16_57_0-beta_1_1y2v1nfq6 v16_57_0-beta_1_1y2v1nffw v16_57_0-beta_1_1y2v1nfsj v16_57_0-beta_1_1y2v1nfsk v16_57_0-beta_1_1y2v1nfv2";
+export { t as video };

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

@@ -1,2 +1,2 @@
-/* empty css                                                     */ var a = "v16_56_1ezqdj90", r = "v16_56_1ezqdj91";
-export { a as container, r as waveFadeOut };
+/* empty css                                                     */ var _ = "v16_57_0-beta_1_1ezqdj90", a = "v16_57_0-beta_1_1ezqdj91";
+export { _ as container, a as waveFadeOut };

package/doc/analytics.md

@@ -0,0 +1,145 @@
+# Analytics
+
+`@telefonica/mistica` comes with built in support for tracking to any analytics system (for example Google
+Analytics).
+
+Some components, like buttons, come with a special `trackingEvent` prop. Every time that the button is
+pressed, an event is tracked with the data provided to the `trackingEvent` prop. This type is defined by the
+[webview-bridge](https://github.com/Telefonica/webview-bridge). **At the time of writing this documentation**,
+this is the type of a tracking event:
+
+```ts
+type TrackingEvent = Readonly<{
+  category: string;
+  action: string;
+  label?: string;
+  value?: number;
+  screenName?: string;
+  [key: string]: any;
+}>;
+```
+
+And here is an axample of a button with a tracking event:
+
+```js
+<ButtonPrimary
+  href="/checkout"
+  trackingEvent={{
+    category: 'checkout',
+    action: 'button_pressed',
+  }}
+>
+  Comprar
+</ButtonPrimary>
+```
+
+By default `@telefonica/mistica` won't do anything with that `trackingEvent`, but you setup the lib to call
+your analytics system by setting up the `analytics` field in the [`theme` prop](./theme-config.md):
+
+```js
+<ThemeContextProvider
+  theme={{
+    skin: 'Movistar',
+    i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
+    analytics: {
+      // this function is called every time a button with trackingEvent is pressed
+      logEvent(event: TrackingEvent): Promise<void> {
+        const logFinished = yourAnalyticsSystem(event);
+        // you can return a promise here and the lib will wait for the promise to
+        // resolve before navigating to a diferent page.
+        return logFinished;
+      },
+    },
+  }}
+>
+  <App />
+</ThemeContextProvider>
+```
+
+## Default tracking events
+
+Some components, like `Button` or `TextLink` have default tracking event that you can opt in to use.
+
+Instead of:
+
+```ts
+<ButtonPrimary
+  to="/dashboard"
+  trackingEvent={{
+    category: 'user_interaction',
+    action: 'primary_button_tapped',
+    label: 'Go to dashboard',
+  }}
+>
+  Go to dashboard
+</ButtonPrimary>
+```
+
+you can just write:
+
+```ts
+<ButtonPrimary to="/dashboard" trackEvent>
+  Go to dashboard
+</ButtonPrimary>
+```
+
+Take into account that you need to set the `trackEvent` boolean prop, if you don't set it the button won't
+track any event.
+
+## Firebase / Google Analytics 4 events
+
+Firebase and the new Google Analytics 4 events have a different shape. Instead of `category`, `action`,
+`label` and `value`, you only need a mandatory `name` and any number of optional attributes. For example:
+
+```ts
+{
+  name: 'user_interaction',
+  component_type: 'row',
+}
+```
+
+You can use this event format with mistica components too, but you need to change the
+`theme.analytics.eventFormat` config:
+
+```ts
+  analytics: {
+    eventFormat: 'google-analytics-4'
+    logEvent(event) {
+      // do something
+    },
+  }
+```
+
+`eventFormat` can be `'google-analytics-4'` or `'universal-analytics'` (default).
+
+When you set the `eventFormat` to `'google-analytics-4'` and use the
+[`trackEvent` boolean prop](#default-tracking-events), the tracked event will have this form:
+
+```ts
+{
+  name: 'user_interaction',
+  component_type: 'primary_button', // or the corresponding button type
+  component_copy: '<the button copy>',
+}
+```
+
+### TrackingConfig
+
+You can also define an `eventFormat` for a specific part of your app, using the `TrackingConfig` context
+provider:
+
+```ts
+<SomeComponent/>
+
+<TrackingConfig eventFormat="google-analytics-4">
+    <AnotherComponent/> // this will track using GA4 format
+</TrackingConfig>
+
+<SomeOtherComponent/>
+```
+
+A hook to obtain the tracking config is also available:
+
+```ts
+const {eventFormat} = useTrackingConfig();
+```