@telefonica/mistica 15.20.1 → 16.1.0

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.d.ts

@@ -5,5 +5,5 @@ export interface DateFieldProps extends CommonFormFieldProps {
     min?: Date;
     max?: Date;
 }
-declare const DateField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
+declare const DateField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
 export default DateField;

package/dist/month-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return U;
+        return _;
     }
 });
 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,12 +146,13 @@ 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 L = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), V = (_param)=>{
+    var { disabled: h, error: g, helperText: D, name: F, label: R, optional: f, validate: n, onChange: S, onChangeValue: s, onBlur: y, value: O, defaultValue: k, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -162,9 +164,10 @@ 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 I = (t)=>t, M = _react.useMemo(()=>(0, _dom.isInputTypeSupported)("month"), []), { texts: T, t: z } = (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,
+        label: R,
+        value: O,
         defaultValue: k,
         processValue: I,
         helperText: D,
@@ -172,12 +175,12 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         error: g,
         disabled: h,
         onBlur: y,
-        validate: (e, c)=>m(e) ? n == null ? void 0 : n(e, c) : T.formDateOutOfRangeError,
+        validate: (t, a)=>m(t) ? n == null ? void 0 : n(t, a) : T.formDateOutOfRangeError || z(_texttokens.formDateOutOfRangeError),
         onChange: S,
-        onChangeValue: (e, c)=>{
-            m(e) && (s == null || s(e, c));
+        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 +194,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 M || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: l,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(L, _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;
+}, _ = V;

package/dist/navigation-bar.d.ts

@@ -24,8 +24,6 @@ type MainNavigationBarPropsBase = {
     right?: React.ReactElement;
     logo?: React.ReactElement;
     variant?: Variant;
-    /** @deprecated Use variant instead */
-    isInverse?: boolean;
     children?: undefined;
     topFixed?: boolean;
     withBorder?: boolean;
@@ -33,10 +31,8 @@ type MainNavigationBarPropsBase = {
     large?: boolean;
 };
 type MainNavigationBarProps = MainNavigationBarPropsBase;
-export declare const MainNavigationBar: ({ sections, selectedIndex, right, variant, isInverse, topFixed, withBorder, burgerMenuExtra, logo, large, }: MainNavigationBarProps) => JSX.Element;
+export declare const MainNavigationBar: ({ sections, selectedIndex, right, variant, topFixed, withBorder, burgerMenuExtra, logo, large, }: MainNavigationBarProps) => JSX.Element;
 interface NavigationBarCommonProps {
-    /** @deprecated Use variant instead */
-    isInverse?: boolean;
     variant?: Variant;
     onBack?: () => void;
     title?: string;
@@ -54,18 +50,16 @@ interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
     paddingX?: number;
 }
 type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
-export declare const NavigationBar: ({ onBack, title, titleAs, right, variant, isInverse, topFixed, paddingX, withBorder, }: NavigationBarProps) => JSX.Element;
+export declare const NavigationBar: ({ onBack, title, titleAs, right, variant, topFixed, paddingX, withBorder, }: NavigationBarProps) => JSX.Element;
 type FunnelNavigationBarProps = {
     variant?: Variant;
-    /** @deprecated Use variant instead */
-    isInverse?: boolean;
     logo?: React.ReactElement;
     right?: React.ReactElement;
     topFixed?: boolean;
     children?: undefined;
     withBorder?: boolean;
 };
-export declare const FunnelNavigationBar: ({ logo, right, variant, isInverse, topFixed, withBorder, }: FunnelNavigationBarProps) => JSX.Element;
+export declare const FunnelNavigationBar: ({ logo, right, variant, topFixed, withBorder, }: FunnelNavigationBarProps) => JSX.Element;
 type NavigationBarActionGroupProps = {
     children: React.ReactNode;
 };