@telefonica/mistica 15.20.1 → 16.0.0

package/dist/list.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     BoxedRow: function() {
-        return bt;
+        return ut;
     },
     BoxedRowList: function() {
-        return xt;
+        return ft;
     },
     Content: function() {
-        return Ye;
+        return Fe;
     },
     Row: function() {
-        return ut;
+        return ht;
     },
     RowList: function() {
-        return ft;
+        return mt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -34,7 +34,6 @@ const _text = require("./text.js");
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _badge = /*#__PURE__*/ _interop_require_default(require("./badge.js"));
-const _hooks = require("./hooks.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _iconchevron = /*#__PURE__*/ _interop_require_default(require("./icons/icon-chevron.js"));
 const _switchcomponent = /*#__PURE__*/ _interop_require_default(require("./switch-component.js"));
@@ -174,7 +173,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
+const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         centerY: a
     }) : a ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -185,9 +184,9 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             children: e
         })
-    }) : e, Ye = (param)=>{
-    let { withChevron: e, headline: a, headlineRef: r, extraRef: l, title: c, titleAs: v, titleLinesMax: g, subtitle: x, subtitleLinesMax: P, description: w, descriptionLinesMax: D, detail: h, asset: E, danger: T, badge: N, right: y, rightRef: u, extra: k, labelId: W, disabled: s, control: L } = param;
-    const A = (0, _themevariantcontext.useIsInverseVariant)(), S = [
+    }) : e, Fe = (param)=>{
+    let { withChevron: e, headline: a, headlineRef: r, extraRef: l, title: c, titleAs: v, titleLinesMax: g, subtitle: x, subtitleLinesMax: P, description: w, descriptionLinesMax: D, detail: h, asset: E, danger: T, badge: N, right: y, rightRef: f, extra: k, labelId: M, disabled: s, control: L } = param;
+    const A = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), S = [
         a,
         c,
         x,
@@ -197,7 +196,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
         paddingY: 16,
         className: _listcssmistica.content,
-        id: W,
+        id: M,
         children: [
             E && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 16,
@@ -303,8 +302,8 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                             [_listcssmistica.detailRight]: !!h,
                             [_listcssmistica.disabled]: s
                         }),
-                        ref: u,
-                        children: Fe(y, S)
+                        ref: f,
+                        children: He(y, S)
                     }),
                     e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: h || y ? 4 : 0,
@@ -325,7 +324,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             })
         ]
     });
-}, qe = (param)=>{
+}, Ye = (param)=>{
     let { value: e, defaultValue: a, onChange: r } = param;
     const l = e !== void 0, [c, v] = _react.useState(!!a);
     return [
@@ -334,14 +333,14 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             l || v(!c), r == null || r(l ? !e : !c);
         }
     ];
-}, ze = (e)=>[
+}, qe = (e)=>[
         "switch",
         "checkbox",
         "radioValue",
         "iconButton"
     ].some((a)=>e[a] !== void 0), le = /*#__PURE__*/ _react.forwardRef((e, a)=>{
     var p, ee;
-    const r = (0, _hooks.useAriaId)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { asset: c, headline: v, title: g, titleAs: x, titleLinesMax: P, subtitle: w, subtitleLinesMax: D, description: h, descriptionLinesMax: E, detail: T, danger: N, badge: y, role: u, extra: k, withChevron: W, dataAttributes: s, right: L, "aria-label": A } = e, [Q, S] = _react.useState(""), [de, ce] = _react.useState(""), [se, he] = _react.useState(""), me = [
+    const r = _react.useId(), l = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { asset: c, headline: v, title: g, titleAs: x, titleLinesMax: P, subtitle: w, subtitleLinesMax: D, description: h, descriptionLinesMax: E, detail: T, danger: N, badge: y, role: f, extra: k, withChevron: M, dataAttributes: s, right: L, "aria-label": A } = e, [Q, S] = _react.useState(""), [de, ce] = _react.useState(""), [se, he] = _react.useState(""), me = [
         g,
         Q,
         w,
@@ -349,7 +348,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         de,
         T,
         se
-    ].filter(Boolean).join(" "), B = A !== null && A !== void 0 ? A : e.href || e.to ? me : void 0, ue = (0, _radiobutton.useRadioContext)(), f = e.disabled || e.radioValue !== void 0 && ue.disabled, j = !f && !l, M = !f && l, U = ze(e), V = !!e.onPress || !!e.href || !!e.to, fe = U ? !1 : W !== null && W !== void 0 ? W : V, Z = {
+    ].filter(Boolean).join(" "), B = A !== null && A !== void 0 ? A : e.href || e.to ? me : void 0, ue = (0, _radiobutton.useRadioContext)(), b = e.disabled || e.radioValue !== void 0 && ue.disabled, O = !b && !l, W = !b && l, U = qe(e), V = !!e.onPress || !!e.href || !!e.to, fe = U ? !1 : M !== null && M !== void 0 ? M : V, Z = {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop,
@@ -359,7 +358,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         onNavigate: e.onNavigate,
         onPress: e.onPress,
         trackingEvent: e.trackingEvent
-    }, [_, $] = qe(e.switch || e.checkbox || {}), R = (i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Ye, {
+    }, [_, $] = Ye(e.switch || e.checkbox || {}), R = (i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Fe, {
             asset: c,
             headline: v,
             headlineRef: (n)=>{
@@ -385,20 +384,20 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 n && ce(n.innerText || n.textContent || "");
             },
             labelId: i == null ? void 0 : i.labelId,
-            disabled: f,
+            disabled: b,
             withChevron: fe
         });
     if (V && !U) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: a,
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
-            [_listcssmistica.touchableBackground]: j,
-            [_listcssmistica.touchableBackgroundInverse]: M,
-            [_listcssmistica.pointer]: !f
+            [_listcssmistica.touchableBackground]: O,
+            [_listcssmistica.touchableBackgroundInverse]: W,
+            [_listcssmistica.pointer]: !b
         })
     }, Z), {
-        role: u,
+        role: f,
         dataAttributes: s,
-        disabled: f,
+        disabled: b,
         "aria-label": B,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             paddingX: 16,
@@ -406,18 +405,18 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             children: R()
         })
     }));
-    const O = (i)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+    const j = (i)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _listcssmistica.dualActionContainer,
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(s)), {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-                    disabled: f
+                    disabled: b
                 }, Z), {
-                    role: u,
+                    role: f,
                     className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
-                        [_listcssmistica.touchableBackground]: j,
-                        [_listcssmistica.touchableBackgroundInverse]: M
+                        [_listcssmistica.touchableBackground]: O,
+                        [_listcssmistica.touchableBackgroundInverse]: W
                     }),
                     "aria-label": B,
                     children: R({
@@ -431,9 +430,9 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             ]
         })), H = (i, n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             className: (0, _classnames.default)(_listcssmistica.rowContent, {
-                [_listcssmistica.touchableBackground]: j && n,
-                [_listcssmistica.touchableBackgroundInverse]: M && n,
-                [_listcssmistica.pointer]: !f && n
+                [_listcssmistica.touchableBackground]: O && n,
+                [_listcssmistica.touchableBackgroundInverse]: W && n,
+                [_listcssmistica.pointer]: !b && n
             }),
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(s)), {
@@ -442,8 +441,8 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
     if (e.switch || e.checkbox) {
         var _ref, _ref1;
         const i = e.switch ? _switchcomponent.default : _checkbox.default, n = (_ref1 = (_ref = (p = e.switch) == null ? void 0 : p.name) !== null && _ref !== void 0 ? _ref : (ee = e.checkbox) == null ? void 0 : ee.name) !== null && _ref1 !== void 0 ? _ref1 : r;
-        return V ? O(/* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
-            disabled: f,
+        return V ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+            disabled: b,
             name: n,
             checked: _,
             "aria-label": B,
@@ -457,7 +456,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 });
             }
         })) : H(/* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
-            disabled: f,
+            disabled: b,
             name: n,
             checked: _,
             "aria-label": B,
@@ -467,7 +466,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 let { controlElement: F, labelId: be } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
-                    role: u,
+                    role: f,
                     children: R({
                         labelId: be,
                         control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
@@ -479,7 +478,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             }
         }), !0);
     }
-    return e.radioValue ? V ? O(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+    return e.radioValue ? V ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
         "aria-label": B,
         "aria-labelledby": r,
@@ -501,7 +500,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             let { controlElement: i } = param;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 16,
-                role: u,
+                role: f,
                 children: R({
                     labelId: r,
                     control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
@@ -511,7 +510,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 })
             });
         }
-    }), !0) : e.iconButton ? V ? O(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    }), !0) : e.iconButton ? V ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         padding: 16,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: "around",
@@ -529,22 +528,22 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 space: "around",
                 children: e.iconButton.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: u
+                    role: f
                 })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: u
+                    role: f
                 }))
             })
         })
     })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingX: 16,
         className: _listcssmistica.rowContent,
-        role: u,
+        role: f,
         dataAttributes: s,
         ref: a,
         children: R()
     });
-}), ut = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+}), ht = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
     var { dataAttributes: e, role: a = "listitem" } = _param, r = _object_without_properties(_param, [
         "dataAttributes",
         "role"
@@ -561,7 +560,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             }, e)
         }))
     });
-}), ft = (param)=>{
+}), mt = (param)=>{
     let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: l } = param;
     const c = _react.Children.toArray(e).filter(Boolean), v = c.length - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
@@ -578,7 +577,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 ]
             }, x))
     }));
-}, bt = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}, ut = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
     var { dataAttributes: e } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -590,7 +589,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         }, e),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, _object_spread({}, a))
     });
-}), xt = (param)=>{
+}), ft = (param)=>{
     let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: l } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,

package/dist/loading-screen.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     BrandLoadingScreen: function() {
-        return he;
+        return Se;
     },
     LoadingScreen: function() {
-        return pe;
+        return ge;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -34,6 +34,7 @@ const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./scre
 const _hooks = require("./hooks.js");
 const _constants = require("./skins/constants.js");
 const _dom = require("./utils/dom.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -159,16 +160,16 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const L = (param)=>{
+const Q = (param)=>{
     let { isInverse: e } = param;
     const r = `body {background:${e ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background}}`;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
         children: r
     });
-}, Q = (param)=>{
+}, U = (param)=>{
     let { animateText: e, isLoading: r, onClose: t, texts: i } = param;
-    const [c, s] = _react.useState(0), [a, l] = _react.useState(!1), u = _react.useCallback(()=>{
-        s((c + 1) % i.length), l(!1);
+    const [c, s] = _react.useState(0), [a, u] = _react.useState(!1), l = _react.useCallback(()=>{
+        s((c + 1) % i.length), u(!1);
     }, [
         c,
         i.length
@@ -177,7 +178,7 @@ const L = (param)=>{
         if (!r || i.length === 1) return;
         var _i_c_duration;
         const h = setTimeout(()=>{
-            e ? l(!0) : u();
+            e ? u(!0) : l();
         }, (_i_c_duration = i[c].duration) !== null && _i_c_duration !== void 0 ? _i_c_duration : 5e3);
         return ()=>{
             clearTimeout(h);
@@ -187,7 +188,7 @@ const L = (param)=>{
         c,
         a,
         r,
-        u,
+        l,
         i
     ]);
     const m = ()=>{
@@ -195,7 +196,7 @@ const L = (param)=>{
             t == null || t();
             return;
         }
-        a && u();
+        a && l();
     }, { title: d, description: p } = i[c % i.length];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -233,10 +234,10 @@ const L = (param)=>{
         }, c)
     });
 }, x = /*#__PURE__*/ _react.forwardRef((param, d)=>{
-    let { isInverse: e, children: r, isLoading: t = !0, animateText: i, animateBackground: c, onClose: s, dataAttributes: a, title: l, description: u, texts: m = [
+    let { isInverse: e, children: r, isLoading: t = !0, animateText: i, animateBackground: c, onClose: s, dataAttributes: a, title: u, description: l, texts: m = [
         {
-            title: l,
-            description: u
+            title: u,
+            description: l
         }
     ] } = param;
     const [p, h] = _react.useState(!1);
@@ -304,7 +305,7 @@ const L = (param)=>{
                         size: 32,
                         color: e ? _skincontractcssmistica.vars.colors.inverse : void 0
                     }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
                         animateText: i,
                         isLoading: t,
                         texts: m,
@@ -317,32 +318,32 @@ const L = (param)=>{
                     })
                 ]
             })),
-            t && p && /* @__PURE__ */ (0, _jsxruntime.jsx)(L, {
+            t && p && /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
                 isInverse: !!e
             })
         ]
     });
-}), pe = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+}), ge = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
         ref: r
     }, e), {
         dataAttributes: _object_spread({
             "component-name": "LoadingScreen"
         }, e.dataAttributes),
         animateBackground: !0
-    }))), U = (param)=>{
+    }))), X = (param)=>{
     let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
-    const { texts: i } = (0, _hooks.useTheme)(), [c, s] = _react.useState(!0), a = ()=>{
-        e || (r == null || r(), s(!1), t == null || t());
+    const { texts: i, t: c } = (0, _hooks.useTheme)(), [s, a] = _react.useState(!0), u = ()=>{
+        e || (r == null || r(), a(!1), t == null || t());
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: (0, _classnames.default)(_loadingscreencssmistica.logo, {
-            [_loadingscreencssmistica.pulseLogo]: c
+            [_loadingscreencssmistica.pulseLogo]: s
         }),
-        onAnimationIteration: a,
+        onAnimationIteration: u,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    children: i.loading
+                    children: i.loading || c(_texttokens.loading)
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
@@ -350,31 +351,31 @@ const L = (param)=>{
             })
         ]
     });
-}, X = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./vivinho-loading-animation/index.js")))), Y = (param)=>{
+}, Y = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./vivinho-loading-animation/index.js")))), Z = (param)=>{
     let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
     const { skinName: i } = (0, _hooks.useTheme)();
     return i === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
         fallback: null,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
             isLoading: e,
             onCloseStart: r,
             onCloseEnd: t
         })
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
         isLoading: e,
         onCloseStart: r,
         onCloseEnd: t
     });
-}, he = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
+}, Se = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
     var { isLoading: e = !0, onClose: r, dataAttributes: t } = _param, i = _object_without_properties(_param, [
         "isLoading",
         "onClose",
         "dataAttributes"
     ]);
-    const [s, a] = _react.useState(!1), l = _react.useRef(!1), u = _react.useRef(!1), m = ()=>{
+    const [s, a] = _react.useState(!1), u = _react.useRef(!1), l = _react.useRef(!1), m = ()=>{
         a(!0);
     }, d = ()=>{
-        l.current && u.current && (r == null || r());
+        u.current && l.current && (r == null || r());
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
         ref: c,
@@ -382,17 +383,17 @@ const L = (param)=>{
     }, i), {
         isLoading: e || !s,
         onClose: ()=>{
-            u.current = !0, d();
+            l.current = !0, d();
         },
         animateText: !0,
         dataAttributes: _object_spread({
             "component-name": "BrandLoadingScreen"
         }, t),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
             isLoading: e,
             onCloseStart: m,
             onCloseEnd: ()=>{
-                l.current = !0, d();
+                u.current = !0, d();
             }
         })
     }));

package/dist/logo.js

@@ -171,7 +171,7 @@ function _object_without_properties_loose(source, excluded) {
 }
 const s = 48, T = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-movistar" */ "./logo-movistar.js")))), I = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-vivo" */ "./logo-vivo.js")))), N = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-o2" */ "./logo-o2.js")))), p = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-o2-new" */ "./logo-o2-new.js")))), k = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-telefonica" */ "./logo-telefonica.js")))), O = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-blau" */ "./logo-blau.js")))), V = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-tu" */ "./logo-tu.js")))), i = (param)=>{
     let { size: o, skinName: r, type: t = "isotype" } = param;
-    const a = (0, _themevariantcontext.useIsInverseVariant)(), { isDarkMode: m } = (0, _hooks.useTheme)();
+    const a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { isDarkMode: m } = (0, _hooks.useTheme)();
     switch(r){
         case "Movistar":
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(T, {

package/dist/maybe-dismissable.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
+import type { Variant } from './theme-variant-context';
 export declare const useIsDismissable: () => boolean;
 type MaybeDismissableProps = {
     children: React.ReactNode;
     onClose?: () => void;
     width?: string | number;
     'aria-label'?: string;
-    isOverMedia?: boolean;
-    isInverse?: boolean;
+    variant?: Variant;
 };
-declare const MaybeDismissable: ({ children, width, onClose, "aria-label": ariaLabel, isOverMedia, isInverse, }: MaybeDismissableProps) => JSX.Element;
+declare const MaybeDismissable: ({ children, width, onClose, "aria-label": ariaLabel, variant, }: MaybeDismissableProps) => JSX.Element;
 export default MaybeDismissable;

package/dist/maybe-dismissable.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return M;
+        return N;
     },
     useIsDismissable: function() {
-        return j;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -24,6 +24,7 @@ const _hooks = require("./hooks.js");
 const _iconbutton = require("./icon-button.js");
 const _maybedismissablecssmistica = require("./maybe-dismissable.css-mistica.js");
 const _themevariantcontext = require("./theme-variant-context.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -70,30 +71,29 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const r = /*#__PURE__*/ _react.createContext(!1), j = ()=>_react.useContext(r), I = (param)=>{
-    let { children: s, width: i, onClose: t, "aria-label": o, isOverMedia: m, isInverse: l } = param;
-    const { texts: n } = (0, _hooks.useTheme)();
+const a = /*#__PURE__*/ _react.createContext(!1), M = ()=>_react.useContext(a), C = (param)=>{
+    let { children: s, width: r, onClose: t, "aria-label": i, variant: m } = param;
+    const { texts: l, t: n } = (0, _hooks.useTheme)();
     return t ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: _maybedismissablecssmistica.dismissableContainer,
-        "aria-label": o,
+        "aria-label": i,
         style: {
-            width: i || "100%",
+            width: r || "100%",
             minHeight: "100%"
         },
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(r.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(a.Provider, {
                 value: !0,
                 children: s
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                isInverse: l,
+                variant: m,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _maybedismissablecssmistica.dismissableButton,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                         onPress: t,
-                        "aria-label": n.closeButtonLabel,
+                        "aria-label": l.closeButtonLabel || n(_texttokens.closeButtonLabel),
                         small: !0,
-                        isOverMedia: m,
                         Icon: _iconcloseregular.default
                     })
                 })
@@ -102,4 +102,4 @@ const r = /*#__PURE__*/ _react.createContext(!1), j = ()=>_react.useContext(r),
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: s
     });
-}, M = I;
+}, N = C;

package/dist/month-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return U;
+        return Z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -20,6 +20,7 @@ const _time = require("./utils/time.js");
 const _hooks = require("./hooks.js");
 const _datefieldcssmistica = require("./date-field.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -145,8 +146,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), C = (_param)=>{
-    var { disabled: h, error: g, helperText: D, name: F, optional: f, validate: n, onChange: S, onChangeValue: s, onBlur: y, value: R, defaultValue: k, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
+const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), L = (_param)=>{
+    var { disabled: h, error: g, helperText: D, name: F, optional: f, validate: n, onChange: R, onChangeValue: s, onBlur: S, value: y, defaultValue: O, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -162,22 +163,22 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "max",
         "dataAttributes"
     ]);
-    const I = (e)=>e, M = _react.useMemo(()=>(0, _dom.isInputTypeSupported)("month"), []), { texts: T } = (0, _hooks.useTheme)(), m = (e)=>!(o && e && e < (0, _time.getLocalYearMonthString)(o) || i && e && e > (0, _time.getLocalYearMonthString)(i)), l = (0, _formcontext.useFieldProps)({
+    const k = (t)=>t, I = _react.useMemo(()=>(0, _dom.isInputTypeSupported)("month"), []), { texts: M, t: T } = (0, _hooks.useTheme)(), m = (t)=>!(o && t && t < (0, _time.getLocalYearMonthString)(o) || i && t && t > (0, _time.getLocalYearMonthString)(i)), p = (0, _formcontext.useFieldProps)({
         name: F,
-        value: R,
-        defaultValue: k,
-        processValue: I,
+        value: y,
+        defaultValue: O,
+        processValue: k,
         helperText: D,
         optional: f,
         error: g,
         disabled: h,
-        onBlur: y,
-        validate: (e, c)=>m(e) ? n == null ? void 0 : n(e, c) : T.formDateOutOfRangeError,
-        onChange: S,
-        onChangeValue: (e, c)=>{
-            m(e) && (s == null || s(e, c));
+        onBlur: S,
+        validate: (t, a)=>m(t) ? n == null ? void 0 : n(t, a) : M.formDateOutOfRangeError || T(_texttokens.formDateOutOfRangeError),
+        onChange: R,
+        onChangeValue: (t, a)=>{
+            m(t) && (s == null || s(t, a));
         }
-    }), p = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, l), {
+    }), l = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, p), {
         min: o ? (0, _time.getLocalYearMonthString)(o) : void 0,
         max: i ? (0, _time.getLocalYearMonthString)(i) : void 0,
         type: "month",
@@ -191,15 +192,15 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
             "component-name": "MonthField"
         }, d)
     }));
-    return M || (0, _environment.isServerSide)() ? p : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: p,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({}, u, l), {
+    return I || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: l,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, _object_spread_props(_object_spread({}, u, p), {
             optional: f,
-            isValidDate: (e)=>m((0, _time.getLocalYearMonthString)(e.toDate())),
+            isValidDate: (t)=>m((0, _time.getLocalYearMonthString)(t.toDate())),
             mode: "year-month",
             dataAttributes: _object_spread({
                 "component-name": "MonthField"
             }, d)
         }))
     });
-}, U = C;
+}, Z = L;