@telefonica/mistica 15.20.1 → 16.0.0

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

@@ -51,61 +51,62 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as m, jsx as t, Fragment as y } from "react/jsx-runtime";
+import { jsxs as d, jsx as t, Fragment as N } from "react/jsx-runtime";
 import * as p from "react";
 import c from "classnames";
-import { useIsInverseVariant as N } from "./theme-variant-context.js";
-import { useTheme as C } from "./hooks.js";
+import { useIsInverseOrMediaVariant as C } from "./theme-variant-context.js";
+import { useTheme as S } from "./hooks.js";
 import { Text1 as v } from "./text.js";
-import { labelContainer as k, shrinked as S, labelText as E, helperText as b, leftText as I, rightText as F, fieldContainer as L, fullWidth as P, normalWidth as W, disabled as j, field as w, helperContainer as A } from "./text-field-components.css-mistica.js";
+import { labelContainer as k, shrinked as E, labelText as F, helperText as b, leftText as I, rightText as L, fieldContainer as O, fullWidth as P, normalWidth as W, disabled as j, field as w, helperContainer as A } from "./text-field-components.css-mistica.js";
 import { sprinkles as T } from "./sprinkles.css-mistica.js";
 import { vars as e } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as D } from "./utils/dom.js";
-const J = (param)=>{
-    let { shrinkLabel: o, forId: s, inputState: r, error: l, children: i, style: n, optional: a } = param;
-    const f = o || r === "focused" || r === "filled", [u, h] = p.useState("initial"), { texts: d } = C();
+import { formFieldOptionalLabelSuffix as V } from "./text-tokens.js";
+const Q = (param)=>{
+    let { shrinkLabel: o, forId: s, inputState: r, error: l, children: i, style: a, optional: n } = param;
+    const f = o || r === "focused" || r === "filled", [u, x] = p.useState("initial"), { texts: m, t: g } = S();
     p.useEffect(()=>{
-        const g = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && h("transform 150ms, width 150ms");
+        const y = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && x("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(g);
+            clearTimeout(y);
         };
     }, []);
-    let x = e.colors.textSecondary;
-    return l && r !== "default" ? x = e.colors.textError : r === "focused" && (x = e.colors.textActivated), /* @__PURE__ */ m("label", {
+    let h = e.colors.textSecondary;
+    return l && r !== "default" ? h = e.colors.textError : r === "focused" && (h = e.colors.textActivated), /* @__PURE__ */ d("label", {
         className: c(k, {
-            [S]: f
+            [E]: f
         }, T({
-            color: x
+            color: h
         })),
         htmlFor: s,
-        style: _object_spread_props(_object_spread({}, n), {
+        style: _object_spread_props(_object_spread({}, a), {
             transition: u
         }),
         children: [
             /* @__PURE__ */ t("span", {
-                className: E,
+                className: F,
                 children: i
             }),
-            a ? /* @__PURE__ */ m("span", {
+            n ? /* @__PURE__ */ d("span", {
                 children: [
                     "\xa0(",
-                    d.formFieldOptionalLabelSuffix,
+                    m.formFieldOptionalLabelSuffix || g(V),
                     ")"
                 ]
             }) : null
         ]
     });
-}, K = (param)=>{
+}, U = (param)=>{
     let { leftText: o, rightText: s, error: r, id: l } = param;
-    const i = N(), n = i ? e.colors.textPrimaryInverse : r ? e.colors.textError : e.colors.textSecondary, a = i ? e.colors.textPrimaryInverse : e.colors.textSecondary;
-    return /* @__PURE__ */ m(y, {
+    const i = C(), a = i ? e.colors.textPrimaryInverse : r ? e.colors.textError : e.colors.textSecondary, n = i ? e.colors.textPrimaryInverse : e.colors.textSecondary;
+    return /* @__PURE__ */ d(N, {
         children: [
             o && /* @__PURE__ */ t("div", {
                 className: c(b, I),
                 children: /* @__PURE__ */ t(v, {
-                    color: n,
+                    color: a,
                     regular: !0,
                     as: "p",
                     id: l,
@@ -113,9 +114,9 @@ const J = (param)=>{
                 })
             }),
             s && /* @__PURE__ */ t("div", {
-                className: c(b, F),
+                className: c(b, L),
                 children: /* @__PURE__ */ t(v, {
-                    color: a,
+                    color: n,
                     regular: !0,
                     as: "p",
                     children: s
@@ -123,16 +124,16 @@ const J = (param)=>{
             })
         ]
     });
-}, M = (param)=>{
-    let { multiline: o, disabled: s, children: r, helperText: l, className: i, fieldRef: n, fullWidth: a, readOnly: f, dataAttributes: u } = param;
+}, X = (param)=>{
+    let { multiline: o, disabled: s, children: r, helperText: l, className: i, fieldRef: a, fullWidth: n, readOnly: f, dataAttributes: u } = param;
     return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ m("div", _object_spread_props(_object_spread({
-        className: c(L, a ? P : W, {
+    /* @__PURE__ */ d("div", _object_spread_props(_object_spread({
+        className: c(O, n ? P : W, {
             [j]: s
         }),
-        onClick: (h)=>{
-            var d;
-            (d = h.currentTarget.querySelector(o ? "textarea" : "input")) == null || d.focus();
+        onClick: (x)=>{
+            var m;
+            (m = x.currentTarget.querySelector(o ? "textarea" : "input")) == null || m.focus();
         }
     }, D(u)), {
         children: [
@@ -140,7 +141,7 @@ const J = (param)=>{
                 className: c(w, T({
                     background: f ? e.colors.neutralLow : e.colors.backgroundContainer
                 }), i),
-                ref: n,
+                ref: a,
                 children: r
             }),
             l && /* @__PURE__ */ t("div", {
@@ -150,4 +151,4 @@ const J = (param)=>{
         ]
     })));
 };
-export { M as FieldContainer, K as HelperText, J as Label };
+export { X as FieldContainer, U as HelperText, Q as Label };

package/dist-es/text-link.js

@@ -82,13 +82,13 @@ import { jsx as v } from "react/jsx-runtime";
 import { BaseTouchable as g } from "./touchable.js";
 import l from "classnames";
 import { useTheme as k } from "./hooks.js";
-import { useIsInverseVariant as d } from "./theme-variant-context.js";
+import { useIsInverseOrMediaVariant as d } from "./theme-variant-context.js";
 import { useForm as T } from "./form-context.js";
-import { getTextFromChildren as n } from "./utils/common.js";
+import { getTextFromChildren as r } from "./utils/common.js";
 import { useTrackingConfig as x, eventNames as I, eventCategories as y, eventActions as b } from "./utils/analytics.js";
 import { variants as o } from "./text-link.css-mistica.js";
 const C = (_param)=>{
-    var { children: e, className: r = "", disabled: a, style: s, trackEvent: i } = _param, t = _object_without_properties(_param, [
+    var { children: e, className: n = "", disabled: a, style: s, trackEvent: i } = _param, t = _object_without_properties(_param, [
         "children",
         "className",
         "disabled",
@@ -98,11 +98,11 @@ const C = (_param)=>{
     const m = d(), { isDarkMode: c } = k(), { formStatus: f } = T(), { eventFormat: u } = x(), p = ()=>u === "google-analytics-4" ? {
             name: I.userInteraction,
             component_type: "link",
-            component_copy: n(e)
+            component_copy: r(e)
         } : {
             category: y.userInteraction,
             action: b.linkTapped,
-            label: n(e)
+            label: r(e)
         };
     var _t_trackingEvent;
     return /* @__PURE__ */ v(g, _object_spread_props(_object_spread({}, t), {
@@ -110,9 +110,9 @@ const C = (_param)=>{
         as: t.onPress ? "a" : void 0,
         trackingEvent: (_t_trackingEvent = t.trackingEvent) !== null && _t_trackingEvent !== void 0 ? _t_trackingEvent : i ? p() : void 0,
         disabled: a || f === "sending",
-        className: l(m ? c ? o.inverseDark : o.inverseLight : o.default, r),
+        className: l(m ? c ? o.inverseDark : o.inverseLight : o.default, n),
         style: s,
         children: e
     }));
-}, A = C;
-export { A as default };
+}, j = C;
+export { j as default };

package/dist-es/text-tokens.js

@@ -0,0 +1,307 @@
+const e = {
+    es: "MM/AA",
+    en: "MM/YY",
+    de: "MM/JJ",
+    pt: "MM/AA"
+}, n = {
+    es: "Mostrar contrase\xf1a",
+    en: "Show password",
+    de: "Passwort anzeigen",
+    pt: "mostrar senha"
+}, t = {
+    es: "Ocultar contrase\xf1a",
+    en: "Hide password",
+    de: "Passwort verbergen",
+    pt: "esconder a senha"
+}, o = {
+    es: "Cargando",
+    en: "Loading",
+    de: "Wird gespeichert",
+    pt: "Carregando"
+}, a = {
+    es: "Se abre en ventana nueva",
+    en: "Opens in a new window",
+    de: "Wird in neuem Fenster ge\xf6ffnet",
+    pt: "Abre em nova janela"
+}, s = {
+    es: "P\xe1gina actual",
+    en: "Current page",
+    de: "Aktuelle Seite",
+    pt: "P\xe1gina atual"
+}, r = {
+    es: "Cerrar",
+    en: "Close",
+    de: "Schlie\xdfen",
+    pt: "Fechar"
+}, i = {
+    es: "Cancelar",
+    en: "Cancel",
+    de: "Abbrechen",
+    pt: "Cancelar"
+}, d = {
+    es: "Aceptar",
+    en: "Accept",
+    de: "Akzeptieren",
+    pt: "Aceitar"
+}, c = {
+    es: "opcional",
+    en: "optional",
+    de: "optional",
+    pt: "opcional"
+}, l = {
+    es: "Este campo es obligatorio",
+    en: "This field is required",
+    de: "Das ist ein Pflichtfeld",
+    pt: "Este campo \xe9 obrigat\xf3rio"
+}, u = {
+    es: "N\xfamero de tarjeta",
+    en: "Card number",
+    de: "Kartennummer",
+    pt: "N\xfamero de cart\xe3o"
+}, m = {
+    es: "Caducidad",
+    en: "Expiry",
+    de: "Ablaufdatum",
+    pt: "Expira\xe7\xe3o"
+}, p = {
+    es: "CVV",
+    en: "CVV",
+    de: "CVV",
+    pt: "CVV"
+}, C = {
+    es: "CVV incorrecto",
+    en: "Incorrect CVV",
+    de: "Falsche CVV",
+    pt: "CVV incorreto"
+}, g = {
+    es: "Mostrar ayuda CVV",
+    en: "Show CVV help",
+    de: "CVV-Hilfe anzeigen",
+    pt: "Exibir ajuda CVV"
+}, b = {
+    es: "Ocultar ayuda CVV",
+    en: "Hide CVV help",
+    de: "CVV-Hilfe ausblenden",
+    pt: "Ocultar ajuda CVV"
+}, v = {
+    es: "El CVV son los 3 \xfaltimos d\xedgitos del reverso de tu tarjeta",
+    en: "The CVV is the 3 digits of the back of your card",
+    de: "Der CVV-Code besteht aus den 3 Ziffern auf der Kartenr\xfcckseite",
+    pt: "O CVV s\xe3o os 3  d\xedgitos do reverso de seu cart\xe3o"
+}, h = {
+    es: "Si es American Express, a\xf1ade los 4 d\xedgitos del anverso",
+    en: "If it's American Express, add the 4-digit number on the front of the card",
+    de: "Bei American Express 4-stelligen Code auf der R\xfcckseite hinzuf\xfcgen",
+    pt: "Se for American Express, adicione os 4 d\xedgitos do anverso"
+}, f = {
+    es: "Fecha no v\xe1lida",
+    en: "Invalid date",
+    de: "Datum ung\xfcltig",
+    pt: "Data inv\xe1lida"
+}, V = {
+    es: "No es un n\xfamero de tarjeta v\xe1lido",
+    en: "The card number is not valid",
+    de: "Kartennummer ung\xfcltig",
+    pt: "N\xe3o \xe9 um n\xfamero de cart\xe3o v\xe1lido"
+}, L = {
+    es: "Fecha no permitida",
+    en: "Invalid date",
+    de: "Unzul\xe4ssiges Datum",
+    pt: "Data n\xe3o permitida"
+}, A = {
+    es: "Email incorrecto",
+    en: "Invalid email",
+    de: "Falsche E-Mail-Adresse",
+    pt: "Email incorreto"
+}, S = {
+    es: "IBAN incorrecto",
+    en: "Incorrect IBAN",
+    de: "Falsche IBAN",
+    pt: "IBAN incorreto"
+}, M = {
+    es: "Cerrar",
+    en: "Close",
+    de: "Schlie\xdfen",
+    pt: "Fechar"
+}, E = {
+    es: "Borrar b\xfasqueda",
+    en: "Clear search",
+    de: "Suche l\xf6schen",
+    pt: "Apagar pesquisa"
+}, B = {
+    es: "men\xfa",
+    en: "menu",
+    de: "Men\xfc",
+    pt: "menu"
+}, x = {
+    es: "Abrir men\xfa de navegaci\xf3n",
+    en: "Open navigation menu",
+    de: "Navigationsmen\xfc \xf6ffnen",
+    pt: "Abrir menu de navega\xe7\xe3o"
+}, y = {
+    es: "Cerrar men\xfa de navegaci\xf3n",
+    en: "Close navigation menu",
+    de: "Navigationsmen\xfc schlie\xdfen",
+    pt: "Fechar menu de navega\xe7\xe3o"
+}, D = {
+    es: "Atr\xe1s",
+    en: "Back",
+    de: "Zur\xfcck",
+    pt: "Voltar"
+}, I = {
+    es: "Borrar",
+    en: "Clear",
+    de: "L\xf6schen",
+    pt: "Apagar"
+}, N = {
+    es: "siguiente",
+    en: "next",
+    de: "n\xe4chste",
+    pt: "pr\xf3ximo"
+}, P = {
+    es: "anterior",
+    en: "previous",
+    de: "vorherige",
+    pt: "anterior"
+}, $ = {
+    es: "Reproducir",
+    en: "Play",
+    de: "Abspielen",
+    pt: "Reproduzir"
+}, k = {
+    es: "Pausar",
+    en: "Pause",
+    de: "Pausieren",
+    pt: "Pausar"
+}, F = {
+    es: "Continuar",
+    en: "Continue",
+    de: "Fortfahren",
+    pt: "Continuar"
+}, w = {
+    es: "completo",
+    en: "completed",
+    de: "vollendet",
+    pt: "conclu\xeddo"
+}, O = {
+    es: "Paso 1$s de 2$s",
+    en: "Step 1$s of 2$s",
+    de: "Schritt 1$s von 2$s",
+    pt: "Etapa 1$s de 2$s"
+}, T = {
+    es: "D\xedgito 1$s de 2$s",
+    en: "Digit 1$s of 2$s",
+    de: "Ziffer 1$s von 2$s",
+    pt: "D\xedgito 1$s de 2$s"
+}, H = {
+    es: "Borrar elemento",
+    en: "Remove element",
+    de: "Element entfernen",
+    pt: "Remover elemento"
+}, R = {
+    es: "Aumentar valor",
+    en: "Increase value",
+    de: "Wert steigern",
+    pt: "aumentar valor"
+}, j = {
+    es: "Disminuir valor",
+    en: "Decrease value",
+    de: "Wert verringern",
+    pt: "diminuir valor"
+}, z = {
+    es: "cantidad",
+    en: "quantity",
+    de: "menge",
+    pt: "quantidade"
+}, q = {
+    es: "m\xednimo",
+    en: "minimum of",
+    de: "minimal",
+    pt: "m\xednimo"
+}, W = {
+    es: "m\xe1ximo",
+    en: "maximum of",
+    de: "maximal",
+    pt: "m\xe1ximo"
+}, K = {
+    es: "d",
+    en: "d",
+    de: "Tg.",
+    pt: "d"
+}, Z = {
+    es: "h",
+    en: "h",
+    de: "Std.",
+    pt: "h"
+}, J = {
+    es: "min",
+    en: "min",
+    de: "Min.",
+    pt: "min"
+}, Y = {
+    es: "s",
+    en: "s",
+    de: "Sek.",
+    pt: "s"
+}, Q = {
+    es: "y",
+    en: "and",
+    de: "und",
+    pt: "e"
+}, U = {
+    es: "d\xeda",
+    en: "day",
+    de: "Tag",
+    pt: "dia"
+}, G = {
+    es: "d\xedas",
+    en: "days",
+    de: "Tage",
+    pt: "dias"
+}, X = {
+    es: "hora",
+    en: "hour",
+    de: "Stunde",
+    pt: "hora"
+}, _ = {
+    es: "horas",
+    en: "hours",
+    de: "Stunden",
+    pt: "horas"
+}, ee = {
+    es: "minuto",
+    en: "minute",
+    de: "Minute",
+    pt: "minuto"
+}, ne = {
+    es: "minutos",
+    en: "minutes",
+    de: "Minuten",
+    pt: "minutos"
+}, te = {
+    es: "segundo",
+    en: "second",
+    de: "Sekunde",
+    pt: "segundo"
+}, oe = {
+    es: "segundos",
+    en: "seconds",
+    de: "Sekunden",
+    pt: "segundos"
+}, ae = {
+    es: "min",
+    en: "min",
+    de: "Min.",
+    pt: "min"
+}, se = {
+    es: "seg",
+    en: "sec",
+    de: "Sek.",
+    pt: "seg"
+}, re = {
+    es: "Acciones",
+    en: "Actions",
+    de: "Aktionen",
+    pt: "A\xe7\xf5es"
+};
+export { D as backNavigationBar, N as carouselNextButton, P as carouselPrevButton, I as clearButton, M as closeButtonLabel, y as closeNavigationMenu, j as counterDecreaseLabel, R as counterIncreaseLabel, W as counterMaxValue, q as counterMinValue, z as counterQuantity, H as counterRemoveLabel, d as dialogAcceptButton, i as dialogCancelButton, t as disablePasswordVisibility, n as enablePasswordVisibility, e as expirationDatePlaceholder, C as formCreditCardCvvError, p as formCreditCardCvvLabel, h as formCreditCardCvvTooltipAmex, v as formCreditCardCvvTooltipVisaMc, b as formCreditCardCvvTooltipVisaMcButtonClose, g as formCreditCardCvvTooltipVisaMcButtonOpen, f as formCreditCardExpirationError, m as formCreditCardExpirationLabel, V as formCreditCardNumberError, u as formCreditCardNumberLabel, L as formDateOutOfRangeError, A as formEmailError, l as formFieldErrorIsMandatory, c as formFieldOptionalLabelSuffix, S as formIbanError, E as formSearchClear, s as linkOpensInCurrentPage, a as linkOpensInNewTab, o as loading, B as menuLabelSuffix, r as modalClose, x as openNavigationMenu, k as pauseIconButtonLabel, T as pinFieldInputLabel, $ as playIconButtonLabel, w as progressBarCompletedLabel, O as progressBarStepLabel, F as sheetConfirmButton, re as tableActionsHeaderLabel, Q as timerAnd, U as timerDayLongLabel, G as timerDaysLongLabel, K as timerDaysShortLabel, ae as timerDisplayMinutesLabel, se as timerDisplaySecondsLabel, X as timerHourLongLabel, _ as timerHoursLongLabel, Z as timerHoursShortLabel, ee as timerMinuteLongLabel, ne as timerMinutesLongLabel, J as timerMinutesShortLabel, te as timerSecondLongLabel, oe as timerSecondsLongLabel, Y as timerSecondsShortLabel };

package/dist-es/text.js

@@ -80,8 +80,8 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as n, Fragment as A, jsxs as V } from "react/jsx-runtime";
 import * as T from "react";
-import M from "classnames";
-import { useIsInverseVariant as q } from "./theme-variant-context.js";
+import K from "classnames";
+import { useIsInverseOrMediaVariant as q } from "./theme-variant-context.js";
 import { applyCssVars as y, pxToRem as u } from "./utils/css.js";
 import { getPrefixedDataAttributes as G } from "./utils/dom.js";
 import { useTheme as m } from "./hooks.js";
@@ -134,26 +134,26 @@ const ee = {
     };
 }, o = (param)=>{
     let { weight: e, color: i = x.colors.textPrimary, decoration: t, truncate: r, transform: p, wordBreak: l = !0, hyphens: S = "auto", as: b = "span", children: h, size: k, mobileSize: w = k, desktopSize: H = k, lineHeight: z, mobileLineHeight: L = z, desktopLineHeight: v = z, letterSpacing: I, textAlign: P, textShadow: C, id: R, role: W, "aria-level": E, "aria-label": f, dataAttributes: N } = param;
-    const { skinName: F } = m(), O = q(), _ = te(r), j = {
+    const { skinName: O } = m(), F = q(), _ = te(r), j = {
         [x.colors.textPrimary]: x.colors.textPrimaryInverse,
         [x.colors.textSecondary]: x.colors.textSecondaryInverse,
         [x.colors.textLink]: x.colors.textLinkInverse,
         [x.colors.textError]: x.colors.textErrorInverse
     };
     if (!h && h !== 0) return null;
-    const D = M(J, l ? Q : U, {
+    const D = K(J, l ? Q : U, {
         [X]: r,
         [Y]: r === 1 || r === !0
-    }), B = y({
+    }), M = y({
         [c.mobileSize]: w ? u(w) : "inherit",
         [c.mobileLineHeight]: L ? u(L) : "inherit",
         [c.desktopSize]: H ? u(H) : "inherit",
         [c.desktopLineHeight]: v ? u(v) : "inherit"
-    }), K = r ? y({
+    }), B = r ? y({
         [c.lineClamp]: String(_)
     }) : {};
     var _j_i;
-    return F === Z && ({ ariaLabel: f, children: h } = re({
+    return O === Z && ({ ariaLabel: f, children: h } = re({
         children: h,
         ariaLabel: f,
         as: b
@@ -164,7 +164,7 @@ const ee = {
         "aria-level": E,
         "aria-label": f
     }, G(N, "Text")), {
-        style: _object_spread_props(_object_spread({}, B, K), {
+        style: _object_spread_props(_object_spread({}, M, B), {
             hyphens: S,
             WebkitHyphens: S,
             letterSpacing: I,
@@ -172,7 +172,7 @@ const ee = {
             textTransform: p || "inherit",
             textDecoration: t !== null && t !== void 0 ? t : "inherit",
             overflowWrap: l ? "anywhere" : "inherit",
-            color: O ? (_j_i = j[i]) !== null && _j_i !== void 0 ? _j_i : i : i,
+            color: F ? (_j_i = j[i]) !== null && _j_i !== void 0 ? _j_i : i : i,
             textAlign: P,
             textShadow: C,
             // When rendering as <pre/>, spaces are preserved and we don't want to remove them