@telefonica/mistica 17.1.0 → 17.3.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_3_1m1n0pr2",
+    underlineOnHover: "v17_3_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_3_1m1n0pr8 v17_3_1m1n0pr1 v17_3_1m1n0pr0 v17_3_1y2v1nfry v17_3_1y2v1nfrd v17_3_1y2v1nfud v17_3_1m1n0pr4 v17_3_1y2v1nf3k",
+    brand: "v17_3_1m1n0pr9 v17_3_1m1n0pr1 v17_3_1m1n0pr0 v17_3_1y2v1nfry v17_3_1y2v1nfrd v17_3_1y2v1nfud v17_3_1m1n0pr5 v17_3_1y2v1nf3n",
+    negative: "v17_3_1m1n0pra v17_3_1m1n0pr1 v17_3_1m1n0pr0 v17_3_1y2v1nfry v17_3_1y2v1nfrd v17_3_1y2v1nfud v17_3_1m1n0pr6 v17_3_1y2v1nf3m",
+    media: "v17_3_1m1n0prb v17_3_1m1n0pr1 v17_3_1m1n0pr0 v17_3_1y2v1nfry v17_3_1y2v1nfrd v17_3_1y2v1nfud v17_3_1m1n0pr7 v17_3_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_3_splu5g0)",
+    desktopSize: "var(--v17_3_splu5g1)",
+    mobileLineHeight: "var(--v17_3_splu5g2)",
+    desktopLineHeight: "var(--v17_3_splu5g3)",
+    lineClamp: "var(--v17_3_splu5g4)"
+}, _ = "v17_3_splu5g5", e = "v17_3_splu5g6", a = "v17_3_splu5g7", p = "v17_3_splu5g8", t = "v17_3_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_3_w6pat20",
+    horizontal: "v17_3_w6pat21"
+}, a = "v17_3_w6pat23 v17_3_w6pat22 v17_3_1y2v1nfra v17_3_1y2v1nfrn", n = "v17_3_w6pat25 v17_3_w6pat24 v17_3_1y2v1nfrw v17_3_1y2v1nftn v17_3_1y2v1nfil", e = {
+    active: "v17_3_w6pat26",
+    inactive: "v17_3_w6pat27",
+    completed: "v17_3_w6pat28"
+}, r = "v17_3_w6pat2a v17_3_w6pat29 v17_3_1y2v1nfra v17_3_1y2v1nfrp", p = "v17_3_w6pat2b", w = "v17_3_w6pat2d v17_3_w6pat2c v17_3_1y2v1nfs7 v17_3_1y2v1nfsn v17_3_1y2v1nftu v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj v17_3_1y2v1nf8x", f = {
+    default: "v17_3_w6pat2g v17_3_w6pat2f v17_3_w6pat2e v17_3_1y2v1nfrw",
+    overBrand: "v17_3_w6pat2h v17_3_w6pat2f v17_3_w6pat2e v17_3_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_3_18fye840 v17_3_1y2v1nfre", y = "v17_3_18fye841", e = "v17_3_18fye843 v17_3_18fye841 v17_3_18fye842 v17_3_1y2v1nfrb v17_3_1y2v1nfrj", n = "v17_3_18fye845 v17_3_18fye841 v17_3_18fye844 v17_3_1y2v1nfre", r = "v17_3_18fye847 v17_3_18fye846 v17_3_1y2v1nfra v17_3_1y2v1nfrg v17_3_1y2v1nfrp", a = "v17_3_18fye848", i = {
+    default: "v17_3_18fye84g v17_3_18fye84a v17_3_18fye849 v17_3_1y2v1nfjr v17_3_1y2v1nfl0 v17_3_1y2v1nfhc v17_3_1y2v1nfil v17_3_1y2v1nfu2 v17_3_18fye84b v17_3_1y2v1nfeo",
+    brand: "v17_3_18fye84h v17_3_18fye84a v17_3_18fye849 v17_3_1y2v1nfjr v17_3_1y2v1nfl0 v17_3_1y2v1nfhc v17_3_1y2v1nfil v17_3_1y2v1nfu2 v17_3_18fye84c v17_3_1y2v1nf8x",
+    negative: "v17_3_18fye84i v17_3_18fye84a v17_3_18fye849 v17_3_1y2v1nfjr v17_3_1y2v1nfl0 v17_3_1y2v1nfhc v17_3_1y2v1nfil v17_3_1y2v1nfu2 v17_3_18fye84d v17_3_1y2v1nf8x",
+    alternative: "v17_3_18fye84j v17_3_18fye84a v17_3_18fye849 v17_3_1y2v1nfjr v17_3_1y2v1nfl0 v17_3_1y2v1nfhc v17_3_1y2v1nfil v17_3_1y2v1nfu2 v17_3_18fye84e v17_3_1y2v1nf8x",
+    media: "v17_3_18fye84k v17_3_18fye84a v17_3_18fye849 v17_3_1y2v1nfjr v17_3_1y2v1nfl0 v17_3_1y2v1nfhc v17_3_1y2v1nfil v17_3_1y2v1nfu2 v17_3_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_3_1xhatbp1 v17_3_1xhatbp0 v17_3_1y2v1nfr5", r = "v17_3_1xhatbp3 v17_3_1xhatbp2 v17_3_1y2v1nfr4 v17_3_1y2v1nfu3 v17_3_1y2v1nf8x", o = "v17_3_1xhatbp5 v17_3_1xhatbp4 v17_3_1y2v1nfr4 v17_3_1y2v1nfue", p = "v17_3_1xhatbp6", y = "v17_3_1xhatbp7 v17_3_1y2v1nfra v17_3_1y2v1nfrg v17_3_1y2v1nfrp", e = "v17_3_1xhatbp9 v17_3_1xhatbp8 v17_3_1y2v1nfr5 v17_3_1y2v1nfs5 v17_3_1y2v1nfue", x = "v17_3_1xhatbpb v17_3_1xhatbpa v17_3_1y2v1nfs3 v17_3_1y2v1nfsj v17_3_1y2v1nfr5 v17_3_1y2v1nfuk v17_3_1y2v1nf8x", f = "v17_3_1xhatbpd v17_3_1xhatbpc v17_3_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_3_mhti6u0", n = "v17_3_mhti6u2 v17_3_mhti6u1 v17_3_1y2v1nfud", u = "v17_3_mhti6u4 v17_3_mhti6u2 v17_3_mhti6u1 v17_3_1y2v1nfud v17_3_mhti6u3 v17_3_1y2v1nfh3 v17_3_1y2v1nfic v17_3_1y2v1nfjl v17_3_1y2v1nfku v17_3_1y2v1nfrc v17_3_1y2v1nfts v17_3_1y2v1nfrx v17_3_1y2v1nf8i v17_3_1y2v1nfh2 v17_3_1y2v1nfuf", f = "v17_3_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_3_yqswj60)"
+}, a = "v17_3_yqswj61 v17_3_1y2v1nfue v17_3_1y2v1nftp v17_3_1y2v1nftq v17_3_1y2v1nfr4", n = "v17_3_yqswj62", y = "v17_3_yqswj63 v17_3_1y2v1nfrx v17_3_1y2v1nfse v17_3_1y2v1nfuk v17_3_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_3_19h163j0 v17_3_1y2v1nfuk v17_3_1y2v1nfuz v17_3_1y2v1nfrc v17_3_1y2v1nfh2 v17_3_1y2v1nftp v17_3_1y2v1nftq v17_3_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_3_1ezqdj90", r = "v17_3_1ezqdj91";
 export { a as container, r as waveFadeOut };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "17.1.0",
+    "version": "17.3.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.ts",
+        "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>