@telefonica/mistica 17.1.0 → 17.2.0

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

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

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

@@ -1,10 +1,10 @@
 /* empty css                                     */ /* empty css                                     */ var n = {
-    underlineAlways: "v17_1_1m1n0pr2",
-    underlineOnHover: "v17_1_1m1n0pr3"
+    underlineAlways: "v17_2_1m1n0pr2",
+    underlineOnHover: "v17_2_1m1n0pr3"
 }, r = {
-    default: "v17_1_1m1n0pr8 v17_1_1m1n0pr1 v17_1_1m1n0pr0 v17_1_1y2v1nfry v17_1_1y2v1nfrd v17_1_1y2v1nfuc v17_1_1m1n0pr4 v17_1_1y2v1nf3k",
-    brand: "v17_1_1m1n0pr9 v17_1_1m1n0pr1 v17_1_1m1n0pr0 v17_1_1y2v1nfry v17_1_1y2v1nfrd v17_1_1y2v1nfuc v17_1_1m1n0pr5 v17_1_1y2v1nf3n",
-    negative: "v17_1_1m1n0pra v17_1_1m1n0pr1 v17_1_1m1n0pr0 v17_1_1y2v1nfry v17_1_1y2v1nfrd v17_1_1y2v1nfuc v17_1_1m1n0pr6 v17_1_1y2v1nf3m",
-    media: "v17_1_1m1n0prb v17_1_1m1n0pr1 v17_1_1m1n0pr0 v17_1_1y2v1nfry v17_1_1y2v1nfrd v17_1_1y2v1nfuc v17_1_1m1n0pr7 v17_1_1y2v1nf3o"
+    default: "v17_2_1m1n0pr8 v17_2_1m1n0pr1 v17_2_1m1n0pr0 v17_2_1y2v1nfry v17_2_1y2v1nfrd v17_2_1y2v1nfud v17_2_1m1n0pr4 v17_2_1y2v1nf3k",
+    brand: "v17_2_1m1n0pr9 v17_2_1m1n0pr1 v17_2_1m1n0pr0 v17_2_1y2v1nfry v17_2_1y2v1nfrd v17_2_1y2v1nfud v17_2_1m1n0pr5 v17_2_1y2v1nf3n",
+    negative: "v17_2_1m1n0pra v17_2_1m1n0pr1 v17_2_1m1n0pr0 v17_2_1y2v1nfry v17_2_1y2v1nfrd v17_2_1y2v1nfud v17_2_1m1n0pr6 v17_2_1y2v1nf3m",
+    media: "v17_2_1m1n0prb v17_2_1m1n0pr1 v17_2_1m1n0pr0 v17_2_1y2v1nfry v17_2_1y2v1nfrd v17_2_1y2v1nfud v17_2_1m1n0pr7 v17_2_1y2v1nf3o"
 };
 export { n as linkStyles, r as variants };

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

@@ -1,8 +1,8 @@
 /* empty css                                */ var r = {
-    mobileSize: "var(--v17_1_splu5g0)",
-    desktopSize: "var(--v17_1_splu5g1)",
-    mobileLineHeight: "var(--v17_1_splu5g2)",
-    desktopLineHeight: "var(--v17_1_splu5g3)",
-    lineClamp: "var(--v17_1_splu5g4)"
-}, _ = "v17_1_splu5g5", e = "v17_1_splu5g6", a = "v17_1_splu5g7", p = "v17_1_splu5g8", t = "v17_1_splu5g9";
+    mobileSize: "var(--v17_2_splu5g0)",
+    desktopSize: "var(--v17_2_splu5g1)",
+    mobileLineHeight: "var(--v17_2_splu5g2)",
+    desktopLineHeight: "var(--v17_2_splu5g3)",
+    lineClamp: "var(--v17_2_splu5g4)"
+}, _ = "v17_2_splu5g5", e = "v17_2_splu5g6", a = "v17_2_splu5g7", p = "v17_2_splu5g8", t = "v17_2_splu5g9";
 export { a as text, p as truncate, t as truncateToOneLine, r as vars, _ as withWordBreak, e as withoutWordBreak };

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

@@ -1,12 +1,12 @@
 /* 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"
+    vertical: "v17_2_w6pat20",
+    horizontal: "v17_2_w6pat21"
+}, a = "v17_2_w6pat23 v17_2_w6pat22 v17_2_1y2v1nfra v17_2_1y2v1nfrn", n = "v17_2_w6pat25 v17_2_w6pat24 v17_2_1y2v1nfrw v17_2_1y2v1nftn v17_2_1y2v1nfil", e = {
+    active: "v17_2_w6pat26",
+    inactive: "v17_2_w6pat27",
+    completed: "v17_2_w6pat28"
+}, r = "v17_2_w6pat2a v17_2_w6pat29 v17_2_1y2v1nfra v17_2_1y2v1nfrp", p = "v17_2_w6pat2b", w = "v17_2_w6pat2d v17_2_w6pat2c v17_2_1y2v1nfs7 v17_2_1y2v1nfsn v17_2_1y2v1nftu v17_2_1y2v1nfra v17_2_1y2v1nfrp v17_2_1y2v1nfrj v17_2_1y2v1nf8x", f = {
+    default: "v17_2_w6pat2g v17_2_w6pat2f v17_2_w6pat2e v17_2_1y2v1nfrw",
+    overBrand: "v17_2_w6pat2h v17_2_w6pat2f v17_2_w6pat2e v17_2_1y2v1nfrw"
 };
 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 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"
+/* empty css                                     */ /* empty css                                 */ var f = "v17_2_18fye840 v17_2_1y2v1nfre", y = "v17_2_18fye841", e = "v17_2_18fye843 v17_2_18fye841 v17_2_18fye842 v17_2_1y2v1nfrb v17_2_1y2v1nfrj", n = "v17_2_18fye845 v17_2_18fye841 v17_2_18fye844 v17_2_1y2v1nfre", r = "v17_2_18fye847 v17_2_18fye846 v17_2_1y2v1nfra v17_2_1y2v1nfrg v17_2_1y2v1nfrp", a = "v17_2_18fye848", i = {
+    default: "v17_2_18fye84g v17_2_18fye84a v17_2_18fye849 v17_2_1y2v1nfjr v17_2_1y2v1nfl0 v17_2_1y2v1nfhc v17_2_1y2v1nfil v17_2_1y2v1nfu2 v17_2_18fye84b v17_2_1y2v1nfeo",
+    brand: "v17_2_18fye84h v17_2_18fye84a v17_2_18fye849 v17_2_1y2v1nfjr v17_2_1y2v1nfl0 v17_2_1y2v1nfhc v17_2_1y2v1nfil v17_2_1y2v1nfu2 v17_2_18fye84c v17_2_1y2v1nf8x",
+    negative: "v17_2_18fye84i v17_2_18fye84a v17_2_18fye849 v17_2_1y2v1nfjr v17_2_1y2v1nfl0 v17_2_1y2v1nfhc v17_2_1y2v1nfil v17_2_1y2v1nfu2 v17_2_18fye84d v17_2_1y2v1nf8x",
+    alternative: "v17_2_18fye84j v17_2_18fye84a v17_2_18fye849 v17_2_1y2v1nfjr v17_2_1y2v1nfl0 v17_2_1y2v1nfhc v17_2_1y2v1nfil v17_2_1y2v1nfu2 v17_2_18fye84e v17_2_1y2v1nf8x",
+    media: "v17_2_18fye84k v17_2_18fye84a v17_2_18fye849 v17_2_1y2v1nfjr v17_2_1y2v1nfl0 v17_2_1y2v1nfhc v17_2_1y2v1nfil v17_2_1y2v1nfu2 v17_2_18fye84f"
 };
 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

@@ -12,5 +12,5 @@
         opacity: 0
     },
     unmounted: {}
-}, 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";
+}, a = "v17_2_1xhatbp1 v17_2_1xhatbp0 v17_2_1y2v1nfr5", r = "v17_2_1xhatbp3 v17_2_1xhatbp2 v17_2_1y2v1nfr4 v17_2_1y2v1nfu3 v17_2_1y2v1nf8x", o = "v17_2_1xhatbp5 v17_2_1xhatbp4 v17_2_1y2v1nfr4 v17_2_1y2v1nfue", p = "v17_2_1xhatbp6", y = "v17_2_1xhatbp7 v17_2_1y2v1nfra v17_2_1y2v1nfrg v17_2_1y2v1nfrp", e = "v17_2_1xhatbp9 v17_2_1xhatbp8 v17_2_1y2v1nfr5 v17_2_1y2v1nfs5 v17_2_1y2v1nfue", x = "v17_2_1xhatbpb v17_2_1xhatbpa v17_2_1y2v1nfs3 v17_2_1y2v1nfsj v17_2_1y2v1nfr5 v17_2_1y2v1nfuk v17_2_1y2v1nf8x", f = "v17_2_1xhatbpd v17_2_1xhatbpc v17_2_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_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 };
+/* empty css                                     */ /* empty css                                     */ var t = "v17_2_mhti6u0", n = "v17_2_mhti6u2 v17_2_mhti6u1 v17_2_1y2v1nfud", u = "v17_2_mhti6u4 v17_2_mhti6u2 v17_2_mhti6u1 v17_2_1y2v1nfud v17_2_mhti6u3 v17_2_1y2v1nfh3 v17_2_1y2v1nfic v17_2_1y2v1nfjl v17_2_1y2v1nfku v17_2_1y2v1nfrc v17_2_1y2v1nfts v17_2_1y2v1nfrx v17_2_1y2v1nf8i v17_2_1y2v1nfh2 v17_2_1y2v1nfuf", f = "v17_2_mhti6u5";
+export { n as base, t as marginReset, f as notTouchable, u as touchable };

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

@@ -1,4 +1,4 @@
 /* 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 };
+    aspectRatio: "var(--v17_2_yqswj60)"
+}, a = "v17_2_yqswj61 v17_2_1y2v1nfue v17_2_1y2v1nftp v17_2_1y2v1nftq v17_2_1y2v1nfr4", n = "v17_2_yqswj62", y = "v17_2_yqswj63 v17_2_1y2v1nfrx v17_2_1y2v1nfse v17_2_1y2v1nfuk v17_2_1y2v1nfuz";
+export { n as container, y as containerWithWrapper, r as vars, a as wrapper };

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

@@ -1,2 +1,2 @@
-/* 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 };
+/* empty css                                     */ /* empty css                                 */ var f = "v17_2_19h163j0 v17_2_1y2v1nfuk v17_2_1y2v1nfuz v17_2_1y2v1nfrc v17_2_1y2v1nfh2 v17_2_1y2v1nftp v17_2_1y2v1nftq v17_2_1y2v1nfw8";
+export { f as video };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "17.1.0",
+    "version": "17.2.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -36,6 +36,8 @@
         "prettier-check": "prettier --check \"**/*.js\" \"**/*.tsx\" \"**/*.ts\" \"**/*.json\" \"**/*.css\" \"**/*.html\"",
         "lint": "eslint --report-unused-disable-directives .",
         "ts-check": "tsc --project tsconfig.json --noEmit",
+        "generate-design-tokens": "node packages/generate-design-tokens/index.js",
+        "import-mistica-icons": "node packages/import-mistica-icons/index.js",
         "build": "yarn clean && node scripts/build.js",
         "compile": "node scripts/compile.js",
         "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf css/mistica.css && rimraf community.d.ts && rimraf community.js && rimraf node_modules/.cache && bash -c 'yarn jest --clearCache > /dev/null 2>&1'",

package/src/accordion.css.ts

@@ -119,3 +119,8 @@ export const panel = style({
 export const accordionItem = sprinkles({
     width: '100%',
 });
+
+export const accordionContentPadding = style({
+    paddingLeft: vars.spacing.boxedDefaultPadding.left,
+    paddingRight: vars.spacing.boxedDefaultPadding.right,
+});

package/src/accordion.tsx

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
-import {Content as HeaderContent} from './list';
+import {Content as HeaderContent, ListContext} from './list';
 import IconChevron from './icons/icon-chevron';
-import Box from './box';
 import * as styles from './accordion.css';
+import Box from './box';
 import Stack from './stack';
 import {BaseTouchable} from './touchable';
 import classNames from 'classnames';
@@ -197,7 +197,7 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                     aria-label={computedAriaLabel}
                     aria-labelledby={ariaLabelledby}
                 >
-                    <Box paddingX={16}>
+                    <div className={styles.accordionContentPadding}>
                         <HeaderContent
                             labelId={labelId}
                             {...props}
@@ -219,7 +219,7 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                                 </Inline>
                             )}
                         />
-                    </Box>
+                    </div>
                 </BaseTouchable>
                 <CSSTransition
                     in={isOpen}
@@ -231,9 +231,9 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                 >
                     <div className={styles.panelContainer} ref={panelContainerRef}>
                         <div className={styles.panel} role="region" aria-labelledby={labelId} id={panelId}>
-                            <Box paddingX={16} paddingBottom={16}>
+                            <div className={styles.accordionContentPadding} style={{paddingBottom: 16}}>
                                 {content}
-                            </Box>
+                            </div>
                         </div>
                     </div>
                 </CSSTransition>
@@ -259,6 +259,7 @@ type AccordionBaseProps = {
     dataAttributes?: DataAttributes;
     onChange?: (index: number, value: boolean) => void;
     role?: string;
+    small?: boolean;
 };
 
 type SingleOpenProps = {
@@ -283,6 +284,7 @@ export const Accordion = ({
     onChange,
     singleOpen,
     role,
+    small = false,
 }: AccordionProps): JSX.Element => {
     const [indexList, toggle] = useAccordionState({
         value: index,
@@ -295,21 +297,23 @@ export const Accordion = ({
 
     return (
         <AccordionContext.Provider value={{index: indexList, toggle}}>
-            <div
-                role={role}
-                {...getPrefixedDataAttributes({testid: 'Accordion', ...dataAttributes, accordion: true})}
-            >
-                {childrenContent.map((child, index) => (
-                    <React.Fragment key={index}>
-                        {child}
-                        {index < lastIndex && (
-                            <Box paddingX={16}>
-                                <Divider />
-                            </Box>
-                        )}
-                    </React.Fragment>
-                ))}
-            </div>
+            <ListContext.Provider value={{small}}>
+                <div
+                    role={role}
+                    {...getPrefixedDataAttributes({testid: 'Accordion', ...dataAttributes, accordion: true})}
+                >
+                    {childrenContent.map((child, index) => (
+                        <React.Fragment key={index}>
+                            {child}
+                            {index < lastIndex && (
+                                <Box paddingX={16}>
+                                    <Divider />
+                                </Box>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </div>
+            </ListContext.Provider>
         </AccordionContext.Provider>
     );
 };
@@ -340,6 +344,7 @@ export const BoxedAccordion = ({
     onChange,
     singleOpen,
     role,
+    small = false,
 }: AccordionProps): JSX.Element => {
     const [indexList, toggle] = useAccordionState({
         value: index,
@@ -350,13 +355,15 @@ export const BoxedAccordion = ({
 
     return (
         <AccordionContext.Provider value={{index: indexList, toggle}}>
-            <Stack
-                space={16}
-                role={role}
-                dataAttributes={{testid: 'BoxedAccordion', accordion: true, ...dataAttributes}}
-            >
-                {children}
-            </Stack>
+            <ListContext.Provider value={{small}}>
+                <Stack
+                    space={16}
+                    role={role}
+                    dataAttributes={{testid: 'BoxedAccordion', accordion: true, ...dataAttributes}}
+                >
+                    {children}
+                </Stack>
+            </ListContext.Provider>
         </AccordionContext.Provider>
     );
 };

package/src/autocomplete.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import TextField from './text-field';
 import * as styles from './autocomplete.css';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import {combineRefs} from './utils/common';
 import {DOWN, ENTER, ESC, TAB, UP} from './utils/keys';
 import {cancelEvent} from './utils/dom';
@@ -41,6 +41,8 @@ const Autocomplete = React.forwardRef<any, AutocompleteProps>(
 
         const options = getSuggestions(rest.value);
 
+        const MenuText = rest.small ? Text2 : Text3;
+
         React.useLayoutEffect(() => {
             if (showOptions) {
                 const {height: menuHeight = 0} = menuRef.current?.getBoundingClientRect() || {};
@@ -211,7 +213,7 @@ const Autocomplete = React.forwardRef<any, AutocompleteProps>(
                                 hideOptionsList();
                             }}
                         >
-                            <Text3 regular>{option}</Text3>
+                            <MenuText regular>{option}</MenuText>
                         </li>
                     ))}
                 </ul>
@@ -222,11 +224,11 @@ const Autocomplete = React.forwardRef<any, AutocompleteProps>(
                     >
                         {options.length === 0 && showOptions && (
                             <div className={styles.optionBaseItem}>
-                                <Text3 regular color={vars.colors.textSecondary} id={statusId}>
+                                <MenuText regular color={vars.colors.textSecondary} id={statusId}>
                                     {suggestionEmptyCase ||
                                         texts.autocompleteEmptyCase ||
                                         t(tokens.autocompleteEmptyCase)}
-                                </Text3>
+                                </MenuText>
                             </div>
                         )}
                     </div>

package/src/community/skins/cyber-skin.tsx

@@ -680,6 +680,7 @@ export const getCyberSkin = (): Skin => {
             popup: '4px',
             sheet: '0px',
             mediaSmall: '2px',
+            snackbar: '4px',
         },
         textPresets: {
             cardTitle: {
@@ -1066,6 +1067,14 @@ export const getCyberSkin = (): Skin => {
                     mobile: 8,
                     desktop: 8,
                 },
+                left: {
+                    mobile: 12,
+                    desktop: 12,
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16,
+                },
             },
             tagPadding: {
                 top: {

package/src/credit-card-fields.tsx

@@ -18,6 +18,7 @@ type CreditCardFieldsProps = {
     cvvFieldName?: string;
     acceptedCards?: CardOptions;
     children?: void;
+    small?: boolean;
 };
 
 const CreditCardFields = ({
@@ -25,6 +26,7 @@ const CreditCardFields = ({
     expirationFieldName = 'ccExp',
     cvvFieldName = 'ccCvv',
     acceptedCards,
+    small,
 }: CreditCardFieldsProps): JSX.Element => {
     const {values} = useForm();
     const {texts, t} = useTheme();
@@ -36,17 +38,20 @@ const CreditCardFields = ({
                 acceptedCards={acceptedCards}
                 name={numberFieldName}
                 label={texts.formCreditCardNumberLabel || t(tokens.formCreditCardNumberLabel)}
+                small={small}
             />
             <DoubleField layout="60/40">
                 <CreditCardExpirationField
                     name={expirationFieldName}
                     label={texts.formCreditCardExpirationLabel || t(tokens.formCreditCardExpirationLabel)}
+                    small={small}
                 />
                 <CvvField
                     acceptedCards={acceptedCards}
                     name={cvvFieldName}
                     label={texts.formCreditCardCvvLabel || t(tokens.formCreditCardCvvLabel)}
                     maxLength={cvvLength}
+                    small={small}
                 />
             </DoubleField>
         </Stack>

package/src/date-field.css.ts

@@ -9,6 +9,6 @@ export const iconContainer = style({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    right: `calc(${fieldRightPadding}px + (${iconButtonSize} - ${iconSize.default}) / 2)`,
+    right: `calc(${fieldRightPadding} + (${iconButtonSize} - ${iconSize.default}) / 2)`,
     marginRight: -12,
 });