@telefonica/mistica 15.20.1 → 16.0.0

package/dist-es/integer-field.js

@@ -78,31 +78,32 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as c } from "react/jsx-runtime";
-import { useFieldProps as x } from "./form-context.js";
-import { useTheme as v } from "./hooks.js";
-import { TextFieldBaseAutosuggest as T } from "./text-field-base.js";
-const h = (_param)=>{
-    var { inputRef: u, value: r, defaultValue: n, type: i = "text" } = _param, o = _object_without_properties(_param, [
+import { jsx as m } from "react/jsx-runtime";
+import { useFieldProps as v } from "./form-context.js";
+import { useTheme as T } from "./hooks.js";
+import { TextFieldBaseAutosuggest as h } from "./text-field-base.js";
+import { formFieldErrorIsMandatory as M } from "./text-tokens.js";
+const y = (_param)=>{
+    var { inputRef: i, value: r, defaultValue: n, type: u = "text" } = _param, o = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "type"
     ]);
     const t = (e)=>String(e !== null && e !== void 0 ? e : "").replace(/[^\d]/g, "");
-    return /* @__PURE__ */ c("input", _object_spread_props(_object_spread({}, o), {
+    return /* @__PURE__ */ m("input", _object_spread_props(_object_spread({}, o), {
         inputMode: "numeric",
         pattern: "[0-9]*",
         onInput: (e)=>{
             e.currentTarget.value = t(e.currentTarget.value);
         },
-        ref: u,
-        type: i,
+        ref: i,
+        type: u,
         value: r === void 0 ? void 0 : t(r),
         defaultValue: n === void 0 ? void 0 : t(n)
     }));
 }, A = (_param)=>{
-    var { disabled: u, error: r, helperText: n, name: i, optional: o, validate: t, onChange: d, onChangeValue: e, onBlur: m, value: a, defaultValue: p, dataAttributes: l } = _param, f = _object_without_properties(_param, [
+    var { disabled: i, error: r, helperText: n, name: u, optional: o, validate: t, onChange: d, onChangeValue: e, onBlur: a, value: c, defaultValue: p, dataAttributes: l } = _param, f = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -116,25 +117,25 @@ const h = (_param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: g } = v(), I = x({
-        name: i,
-        value: a,
+    const { texts: g, t: I } = T(), F = v({
+        name: u,
+        value: c,
         defaultValue: p,
         processValue: (s)=>s.trim(),
         helperText: n,
         optional: o,
         error: r,
-        disabled: u,
-        onBlur: m,
-        validate: (s, F)=>s ? t == null ? void 0 : t(s, F) : o ? "" : g.formFieldErrorIsMandatory,
+        disabled: i,
+        onBlur: a,
+        validate: (s, x)=>s ? t == null ? void 0 : t(s, x) : o ? "" : g.formFieldErrorIsMandatory || I(M),
         onChange: d,
         onChangeValue: e
     });
-    return /* @__PURE__ */ c(T, _object_spread_props(_object_spread({}, f, I), {
-        inputComponent: h,
+    return /* @__PURE__ */ m(h, _object_spread_props(_object_spread({}, f, F), {
+        inputComponent: y,
         dataAttributes: _object_spread({
             "component-name": "IntegerField"
         }, l)
     }));
-}, C = A;
-export { h as IntegerInput, C as default };
+}, $ = A;
+export { y as IntegerInput, $ as default };

package/dist-es/list.js

@@ -79,29 +79,28 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as t, jsxs as X } from "react/jsx-runtime";
-import * as b from "react";
+import * as u from "react";
 import m from "classnames";
 import { BaseTouchable as te } from "./touchable.js";
 import { Text3 as xe, Text1 as ve, Text2 as Y } from "./text.js";
 import o from "./box.js";
 import C from "./stack.js";
 import ge from "./badge.js";
-import { useAriaId as ye } from "./hooks.js";
-import { useIsInverseVariant as oe } from "./theme-variant-context.js";
-import we from "./icons/icon-chevron.js";
-import Be from "./switch-component.js";
-import ae, { useRadioContext as Re } from "./radio-button.js";
-import Ie from "./checkbox.js";
-import { Boxed as Ce } from "./boxed.js";
-import Te from "./divider.js";
+import { useIsInverseOrMediaVariant as oe } from "./theme-variant-context.js";
+import ye from "./icons/icon-chevron.js";
+import we from "./switch-component.js";
+import ae, { useRadioContext as Be } from "./radio-button.js";
+import Re from "./checkbox.js";
+import { Boxed as Ie } from "./boxed.js";
+import Ce from "./divider.js";
 import { getPrefixedDataAttributes as K } from "./utils/dom.js";
-import { rowContent as q, touchableBackground as z, touchableBackgroundInverse as G, pointer as re, content as Ne, center as J, disabled as I, asset as ke, rowBody as Le, badge as Ae, rightContent as Se, rightRestrictedWidth as Ve, detail as Xe, detailRight as Ee, dualActionContainer as Pe, dualActionLeft as De, dualActionDivider as We, dualActionRight as je } from "./list.css-mistica.js";
-import { vars as Me } from "./image.css-mistica.js";
+import { rowContent as q, touchableBackground as z, touchableBackgroundInverse as G, pointer as re, content as Te, center as J, disabled as I, asset as Ne, rowBody as ke, badge as Le, rightContent as Ae, rightRestrictedWidth as Se, detail as Ve, detailRight as Xe, dualActionContainer as Ee, dualActionLeft as Pe, dualActionDivider as De, dualActionRight as Me } from "./list.css-mistica.js";
+import { vars as Oe } from "./image.css-mistica.js";
 import { vars as d } from "./skins/skin-contract.css-mistica.js";
-import { applyCssVars as Oe } from "./utils/css.js";
+import { applyCssVars as We } from "./utils/css.js";
 import { IconButton as ie, ToggleIconButton as ne } from "./icon-button.js";
-import { sprinkles as He } from "./sprinkles.css-mistica.js";
-const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
+import { sprinkles as je } from "./sprinkles.css-mistica.js";
+const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         centerY: a
     }) : a ? /* @__PURE__ */ t("div", {
         style: {
@@ -112,8 +111,8 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         children: /* @__PURE__ */ t("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;
+    }) : 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 = oe(), S = [
         a,
         c,
@@ -123,8 +122,8 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
     ].filter(Boolean).length === 1;
     return /* @__PURE__ */ X(o, {
         paddingY: 16,
-        className: Ne,
-        id: W,
+        className: Te,
+        id: M,
         children: [
             E && /* @__PURE__ */ t(o, {
                 paddingRight: 16,
@@ -134,16 +133,16 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 }),
                 "aria-hidden": !0,
                 children: /* @__PURE__ */ t("div", {
-                    className: ke,
-                    style: Oe({
+                    className: Ne,
+                    style: We({
                         color: T ? A ? d.colors.textErrorInverse : d.colors.textError : A ? d.colors.textPrimaryInverse : d.colors.textPrimary,
-                        [Me.mediaBorderRadius]: d.borderRadii.mediaSmall
+                        [Oe.mediaBorderRadius]: d.borderRadii.mediaSmall
                     }),
                     children: E
                 })
             }),
             /* @__PURE__ */ X("div", {
-                className: m(Le, {
+                className: m(ke, {
                     [I]: s
                 }),
                 style: {
@@ -201,7 +200,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             N && /* @__PURE__ */ t(o, {
                 paddingLeft: 16,
                 children: /* @__PURE__ */ t("div", {
-                    className: m(Ae, {
+                    className: m(Le, {
                         [I]: s
                     }),
                     children: /* @__PURE__ */ t(ge, {
@@ -210,12 +209,12 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 })
             }),
             (h || y || e || L) && /* @__PURE__ */ X("div", {
-                className: m(Se, {
-                    [Ve]: !!h
+                className: m(Ae, {
+                    [Se]: !!h
                 }),
                 children: [
                     h && /* @__PURE__ */ t("div", {
-                        className: m(Xe, {
+                        className: m(Ve, {
                             [I]: s
                         }),
                         children: /* @__PURE__ */ t(Y, {
@@ -227,18 +226,18 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                     }),
                     y && /* @__PURE__ */ t("div", {
                         className: m({
-                            [Ee]: !!h,
+                            [Xe]: !!h,
                             [I]: s
                         }),
-                        ref: u,
-                        children: Fe(y, S)
+                        ref: f,
+                        children: He(y, S)
                     }),
                     e && /* @__PURE__ */ t(o, {
                         paddingLeft: h || y ? 4 : 0,
                         className: m(J, {
                             [I]: s
                         }),
-                        children: /* @__PURE__ */ t(we, {
+                        children: /* @__PURE__ */ t(ye, {
                             color: A ? d.colors.inverse : d.colors.neutralMedium,
                             direction: "right"
                         })
@@ -252,23 +251,23 @@ 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] = b.useState(!!a);
+    const l = e !== void 0, [c, v] = u.useState(!!a);
     return [
         l ? !!e : c,
         ()=>{
             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__*/ b.forwardRef((e, a)=>{
+    ].some((a)=>e[a] !== void 0), le = /*#__PURE__*/ u.forwardRef((e, a)=>{
     var p, ee;
-    const r = ye(), l = oe(), { 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] = b.useState(""), [de, ce] = b.useState(""), [se, he] = b.useState(""), me = [
+    const r = u.useId(), l = oe(), { 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] = u.useState(""), [de, ce] = u.useState(""), [se, he] = u.useState(""), me = [
         g,
         Q,
         w,
@@ -276,7 +275,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 = Re(), 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 = Be(), 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,
@@ -286,7 +285,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__ */ t(Ye, {
+    }, [_, $] = Ye(e.switch || e.checkbox || {}), R = (i)=>/* @__PURE__ */ t(Fe, {
             asset: c,
             headline: v,
             headlineRef: (n)=>{
@@ -312,20 +311,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__ */ t(te, _object_spread_props(_object_spread({
         ref: a,
         className: m(q, {
-            [z]: j,
-            [G]: M,
-            [re]: !f
+            [z]: O,
+            [G]: W,
+            [re]: !b
         })
     }, Z), {
-        role: u,
+        role: f,
         dataAttributes: s,
-        disabled: f,
+        disabled: b,
         "aria-label": B,
         children: /* @__PURE__ */ t(o, {
             paddingX: 16,
@@ -333,18 +332,18 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             children: R()
         })
     }));
-    const O = (i)=>/* @__PURE__ */ X("div", _object_spread_props(_object_spread({
-            className: Pe,
+    const j = (i)=>/* @__PURE__ */ X("div", _object_spread_props(_object_spread({
+            className: Ee,
             ref: a
         }, K(s)), {
             children: [
                 /* @__PURE__ */ t(te, _object_spread_props(_object_spread({
-                    disabled: f
+                    disabled: b
                 }, Z), {
-                    role: u,
-                    className: m(De, {
-                        [z]: j,
-                        [G]: M
+                    role: f,
+                    className: m(Pe, {
+                        [z]: O,
+                        [G]: W
                     }),
                     "aria-label": B,
                     children: R({
@@ -352,15 +351,15 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                     })
                 })),
                 /* @__PURE__ */ t("div", {
-                    className: We
+                    className: De
                 }),
                 i
             ]
         })), H = (i, n)=>/* @__PURE__ */ t("div", _object_spread_props(_object_spread({
             className: m(q, {
-                [z]: j && n,
-                [G]: M && n,
-                [re]: !f && n
+                [z]: O && n,
+                [G]: W && n,
+                [re]: !b && n
             }),
             ref: a
         }, K(s)), {
@@ -368,9 +367,9 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         }));
     if (e.switch || e.checkbox) {
         var _ref, _ref1;
-        const i = e.switch ? Be : Ie, 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__ */ t(i, {
-            disabled: f,
+        const i = e.switch ? we : Re, 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 ? j(/* @__PURE__ */ t(i, {
+            disabled: b,
             name: n,
             checked: _,
             "aria-label": B,
@@ -379,12 +378,12 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             render: (param)=>{
                 let { controlElement: F } = param;
                 return /* @__PURE__ */ t("div", {
-                    className: je,
+                    className: Me,
                     children: F
                 });
             }
         })) : H(/* @__PURE__ */ t(i, {
-            disabled: f,
+            disabled: b,
             name: n,
             checked: _,
             "aria-label": B,
@@ -394,7 +393,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 let { controlElement: F, labelId: be } = param;
                 return /* @__PURE__ */ t(o, {
                     paddingX: 16,
-                    role: u,
+                    role: f,
                     children: R({
                         labelId: be,
                         control: /* @__PURE__ */ t(C, {
@@ -406,7 +405,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             }
         }), !0);
     }
-    return e.radioValue ? V ? O(/* @__PURE__ */ t(ae, {
+    return e.radioValue ? V ? j(/* @__PURE__ */ t(ae, {
         value: e.radioValue,
         "aria-label": B,
         "aria-labelledby": r,
@@ -428,7 +427,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             let { controlElement: i } = param;
             return /* @__PURE__ */ t(o, {
                 paddingX: 16,
-                role: u,
+                role: f,
                 children: R({
                     labelId: r,
                     control: /* @__PURE__ */ t(C, {
@@ -438,7 +437,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 })
             });
         }
-    }), !0) : e.iconButton ? V ? O(/* @__PURE__ */ t(o, {
+    }), !0) : e.iconButton ? V ? j(/* @__PURE__ */ t(o, {
         padding: 16,
         children: /* @__PURE__ */ t(C, {
             space: "around",
@@ -456,29 +455,29 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 space: "around",
                 children: e.iconButton.Icon ? /* @__PURE__ */ t(ie, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: u
+                    role: f
                 })) : /* @__PURE__ */ t(ne, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: u
+                    role: f
                 }))
             })
         })
     })) : /* @__PURE__ */ t(o, {
         paddingX: 16,
         className: q,
-        role: u,
+        role: f,
         dataAttributes: s,
         ref: a,
         children: R()
     });
-}), ut = /*#__PURE__*/ b.forwardRef((_param, l)=>{
+}), ht = /*#__PURE__*/ u.forwardRef((_param, l)=>{
     var { dataAttributes: e, role: a = "listitem" } = _param, r = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ t("div", {
         role: a,
-        className: He({
+        className: je({
             width: "100%"
         }),
         children: /* @__PURE__ */ t(le, _object_spread_props(_object_spread({}, r), {
@@ -488,28 +487,28 @@ 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 = b.Children.toArray(e).filter(Boolean), v = c.length - 1;
+    const c = u.Children.toArray(e).filter(Boolean), v = c.length - 1;
     return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
         role: r,
         "aria-labelledby": a
     }, K(l, "RowList")), {
-        children: c.map((g, x)=>/* @__PURE__ */ X(b.Fragment, {
+        children: c.map((g, x)=>/* @__PURE__ */ X(u.Fragment, {
                 children: [
                     g,
                     x < v && /* @__PURE__ */ t(o, {
                         paddingX: 16,
-                        children: /* @__PURE__ */ t(Te, {})
+                        children: /* @__PURE__ */ t(Ce, {})
                     })
                 ]
             }, x))
     }));
-}, bt = /*#__PURE__*/ b.forwardRef((_param, r)=>{
+}, ut = /*#__PURE__*/ u.forwardRef((_param, r)=>{
     var { dataAttributes: e } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ t(Ce, {
+    return /* @__PURE__ */ t(Ie, {
         isInverse: a.isInverse,
         ref: r,
         dataAttributes: _object_spread({
@@ -517,7 +516,7 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         }, e),
         children: /* @__PURE__ */ t(le, _object_spread({}, a))
     });
-}), xt = (param)=>{
+}), ft = (param)=>{
     let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: l } = param;
     return /* @__PURE__ */ t(C, {
         space: 16,
@@ -529,4 +528,4 @@ const Fe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         children: e
     });
 };
-export { bt as BoxedRow, xt as BoxedRowList, Ye as Content, ut as Row, ft as RowList };
+export { ut as BoxedRow, ft as BoxedRowList, Fe as Content, ht as Row, mt as RowList };

package/dist-es/loading-screen.js

@@ -95,16 +95,17 @@ import G from "./screen-reader-only.js";
 import { useTheme as R } from "./hooks.js";
 import { VIVO_NEW_SKIN as H } from "./skins/constants.js";
 import { getPrefixedDataAttributes as J } from "./utils/dom.js";
-const L = (param)=>{
+import { loading as L } from "./text-tokens.js";
+const Q = (param)=>{
     let { isInverse: e } = param;
     const r = `body {background:${e ? f.colors.backgroundBrand : f.colors.background}}`;
     return /* @__PURE__ */ n("style", {
         children: r
     });
-}, Q = (param)=>{
+}, U = (param)=>{
     let { animateText: e, isLoading: r, onClose: t, texts: i } = param;
-    const [c, s] = o.useState(0), [a, l] = o.useState(!1), u = o.useCallback(()=>{
-        s((c + 1) % i.length), l(!1);
+    const [c, s] = o.useState(0), [a, u] = o.useState(!1), l = o.useCallback(()=>{
+        s((c + 1) % i.length), u(!1);
     }, [
         c,
         i.length
@@ -113,7 +114,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);
@@ -123,7 +124,7 @@ const L = (param)=>{
         c,
         a,
         r,
-        u,
+        l,
         i
     ]);
     const m = ()=>{
@@ -131,7 +132,7 @@ const L = (param)=>{
             t == null || t();
             return;
         }
-        a && u();
+        a && l();
     }, { title: d, description: p } = i[c % i.length];
     return /* @__PURE__ */ n(E, {
         children: /* @__PURE__ */ n("div", {
@@ -169,10 +170,10 @@ const L = (param)=>{
         }, c)
     });
 }, x = /*#__PURE__*/ o.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] = o.useState(!1);
@@ -240,7 +241,7 @@ const L = (param)=>{
                         size: 32,
                         color: e ? f.colors.inverse : void 0
                     }),
-                    /* @__PURE__ */ n(Q, {
+                    /* @__PURE__ */ n(U, {
                         animateText: i,
                         isLoading: t,
                         texts: m,
@@ -253,32 +254,32 @@ const L = (param)=>{
                     })
                 ]
             })),
-            t && p && /* @__PURE__ */ n(L, {
+            t && p && /* @__PURE__ */ n(Q, {
                 isInverse: !!e
             })
         ]
     });
-}), pe = /*#__PURE__*/ o.forwardRef((e, r)=>/* @__PURE__ */ n(x, _object_spread_props(_object_spread({
+}), ge = /*#__PURE__*/ o.forwardRef((e, r)=>/* @__PURE__ */ n(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 } = R(), [c, s] = o.useState(!0), a = ()=>{
-        e || (r == null || r(), s(!1), t == null || t());
+    const { texts: i, t: c } = R(), [s, a] = o.useState(!0), u = ()=>{
+        e || (r == null || r(), a(!1), t == null || t());
     };
     return /* @__PURE__ */ S("div", {
         className: T(K, {
-            [M]: c
+            [M]: s
         }),
-        onAnimationIteration: a,
+        onAnimationIteration: u,
         children: [
             /* @__PURE__ */ n(G, {
                 children: /* @__PURE__ */ n("div", {
-                    children: i.loading
+                    children: i.loading || c(L)
                 })
             }),
             /* @__PURE__ */ n(q, {
@@ -286,31 +287,31 @@ const L = (param)=>{
             })
         ]
     });
-}, X = /*#__PURE__*/ o.lazy(()=>import("./vivinho-loading-animation/index.js")), Y = (param)=>{
+}, Y = /*#__PURE__*/ o.lazy(()=>import("./vivinho-loading-animation/index.js")), Z = (param)=>{
     let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
     const { skinName: i } = R();
     return i === H ? /* @__PURE__ */ n(o.Suspense, {
         fallback: null,
-        children: /* @__PURE__ */ n(X, {
+        children: /* @__PURE__ */ n(Y, {
             isLoading: e,
             onCloseStart: r,
             onCloseEnd: t
         })
-    }) : /* @__PURE__ */ n(U, {
+    }) : /* @__PURE__ */ n(X, {
         isLoading: e,
         onCloseStart: r,
         onCloseEnd: t
     });
-}, he = /*#__PURE__*/ o.forwardRef((_param, c)=>{
+}, Se = /*#__PURE__*/ o.forwardRef((_param, c)=>{
     var { isLoading: e = !0, onClose: r, dataAttributes: t } = _param, i = _object_without_properties(_param, [
         "isLoading",
         "onClose",
         "dataAttributes"
     ]);
-    const [s, a] = o.useState(!1), l = o.useRef(!1), u = o.useRef(!1), m = ()=>{
+    const [s, a] = o.useState(!1), u = o.useRef(!1), l = o.useRef(!1), m = ()=>{
         a(!0);
     }, d = ()=>{
-        l.current && u.current && (r == null || r());
+        u.current && l.current && (r == null || r());
     };
     return /* @__PURE__ */ n(x, _object_spread_props(_object_spread({
         ref: c,
@@ -318,19 +319,19 @@ 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__ */ n(Y, {
+        children: /* @__PURE__ */ n(Z, {
             isLoading: e,
             onCloseStart: m,
             onCloseEnd: ()=>{
-                l.current = !0, d();
+                u.current = !0, d();
             }
         })
     }));
 });
-export { he as BrandLoadingScreen, pe as LoadingScreen };
+export { Se as BrandLoadingScreen, ge as LoadingScreen };

package/dist-es/logo.js

@@ -81,7 +81,7 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as e, Fragment as g } from "react/jsx-runtime";
 import * as n from "react";
 import { useTheme as l } from "./hooks.js";
-import { useIsInverseVariant as u } from "./theme-variant-context.js";
+import { useIsInverseOrMediaVariant as u } from "./theme-variant-context.js";
 import d from "./touchable.js";
 import { getPrefixedDataAttributes as L } from "./utils/dom.js";
 import { svg as f, logoContainer as h } from "./logo.css-mistica.js";