@telefonica/mistica 14.46.0 → 14.48.0

package/dist-es/sheet.js

@@ -79,7 +79,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as e, jsxs as v, Fragment as H } from "react/jsx-runtime";
-import B from "classnames";
+import L from "classnames";
 import * as i from "react";
 import { transitionDuration as O, overlay as j, closingOverlay as F, SheetContainer as V, closingSheet as G, Sheet as K, SheetContent as $, handleContainer as q, handle as J, children as Q, modalCloseButton as U, stickyTitle as W, bodyContent as X, stickyButtons as Z, sheetActionRow as _, infoItemIcon as ee } from "./sheet.css-mistica.js";
 import re from "./focus-trap.js";
@@ -193,14 +193,14 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, De = (param)=>
         children: /* @__PURE__ */ v(re, {
             children: [
                 /* @__PURE__ */ e("div", {
-                    className: B(j, {
+                    className: L(j, {
                         [F]: t === "closing"
                     }),
                     style: d,
                     onClick: c
                 }),
                 /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-                    className: B(V, {
+                    className: L(V, {
                         [G]: t === "closing"
                     }),
                     onTransitionEnd: r,
@@ -353,13 +353,11 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, De = (param)=>
                             desktop: 40
                         },
                         children: /* @__PURE__ */ e(T, {
-                            children: /* @__PURE__ */ v(Se, {
+                            children: /* @__PURE__ */ e(Se, {
                                 align: "full-width",
                                 link: o,
-                                children: [
-                                    g,
-                                    t
-                                ]
+                                primaryButton: g,
+                                secondaryButton: t
                             })
                         })
                     })
@@ -380,13 +378,13 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, De = (param)=>
             "component-name": "RadioListSheet"
         }, m),
         children: (param)=>/* @__PURE__ */ {
-            let { closeModal: y, modalTitleId: L } = param;
+            let { closeModal: y, modalTitleId: B } = param;
             var _ref;
             return e(k, {
                 title: n,
                 subtitle: s,
                 description: l,
-                modalTitleId: L,
+                modalTitleId: B,
                 button: a ? /* @__PURE__ */ e(M, {
                     onPress: ()=>{
                         d.current && (o == null || o(c !== null && c !== void 0 ? c : "")), y();
@@ -395,7 +393,7 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, De = (param)=>
                 }) : void 0,
                 children: /* @__PURE__ */ e(Y, {
                     children: /* @__PURE__ */ e(ce, {
-                        "aria-labelledby": L,
+                        "aria-labelledby": B,
                         name: "sheetselection",
                         value: c,
                         onChange: (R)=>{

package/dist-es/skeletons.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./skeletons.css.ts.vanilla.css-mistica.js";
-var r = "zopolw2 _1y2v1nfgk", o = "_1y2v1nfh0 _1y2v1nfh2", f = "zopolw6 _1y2v1nfh1", i = "_1y2v1nfgi _1y2v1nfgx _1y2v1nfgr";
-export { r as animation, o as circle, f as line, i as row };
+var r = "zopolw2 _1y2v1nfha", o = "_1y2v1nfhq _1y2v1nfhs", h = "zopolw6 _1y2v1nfhr", a = "_1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh";
+export { r as animation, o as circle, h as line, a as row };

package/dist-es/skins/blau.js

@@ -58,7 +58,8 @@ const e = {
             backgroundSkeletonInverse: e.blauBlueSecondary,
             navigationBarBackground: e.blauBluePrimary,
             backgroundAlternative: e.blauBluePrimary20,
-            backgroundFeedbackBottom: e.blauBluePrimary,
+            backgroundBrandTop: e.blauBluePrimary,
+            backgroundBrandBottom: e.blauBluePrimary,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey2,
@@ -100,7 +101,7 @@ const e = {
             textLinkSnackbar: e.blauPurple30,
             control: e.grey2,
             controlActivated: e.blauBlueSecondary,
-            controlInverse: e.white,
+            controlInverse: e.blauBluePrimary30,
             controlActivatedInverse: e.white,
             controlError: e.blauRed,
             barTrack: e.grey2,
@@ -151,7 +152,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey5,
             textAppBarSelected: e.blauBlueSecondary60,
-            customTabsBackground: e.blauBluePrimary
+            customTabsBackground: e.blauBluePrimary,
+            tagTextPromo: e.blauPurple,
+            tagTextActive: e.blauBluePrimary,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.blauGreen70,
+            tagTextWarning: e.blauYellow70,
+            tagTextError: e.blauRed70,
+            tagBackgroundPromo: e.blauPurple10,
+            tagBackgroundActive: e.blauBlueSecondary10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.blauGreen10,
+            tagBackgroundWarning: e.blauYellow10,
+            tagBackgroundError: e.blauRed10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -169,7 +182,8 @@ const e = {
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey,
             backgroundSkeletonInverse: e.darkModeGrey,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
@@ -264,7 +278,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.blauPurple30,
+            tagTextActive: e.blauBluePrimary,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.blauGreen30,
+            tagTextWarning: e.blauYellow40,
+            tagTextError: e.blauRed40,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6
         },
         borderRadii: {
             avatar: "50%",

package/dist-es/skins/movistar-legacy.js

@@ -1,4 +1,4 @@
-import { MOVISTAR_LEGACY_SKIN as n } from "./constants.js";
+import { MOVISTAR_LEGACY_SKIN as a } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     movistarBlue: "#019DF4",
@@ -43,7 +43,7 @@ const e = {
     darkModeGrey: "#242424"
 }, d = (o)=>{
     const t = {
-        name: n,
+        name: a,
         colors: {
             background: e.white,
             backgroundAlternative: e.grey1,
@@ -60,7 +60,8 @@ const e = {
             backgroundOverlay: r(e.grey6, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.movistarBlue55,
-            backgroundFeedbackBottom: e.movistarBlue,
+            backgroundBrandTop: e.movistarBlue,
+            backgroundBrandBottom: e.movistarBlue,
             appBarBackground: e.white,
             navigationBarBackground: e.movistarBlue,
             skeletonWave: e.grey2,
@@ -104,7 +105,7 @@ const e = {
             textLinkSnackbar: e.movistarBlue30,
             control: e.grey3,
             controlActivated: e.movistarBlue,
-            controlInverse: e.white,
+            controlInverse: e.movistarBlue20,
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
@@ -155,7 +156,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey4,
             textAppBarSelected: e.movistarBlue,
-            customTabsBackground: e.white
+            customTabsBackground: e.white,
+            tagTextPromo: e.purple70,
+            tagTextActive: e.movistarBlue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.movistarGreen70,
+            tagTextWarning: e.egg80,
+            tagTextError: e.pepper70,
+            tagBackgroundPromo: e.purple10,
+            tagBackgroundActive: e.movistarBlue10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.movistarGreen10,
+            tagBackgroundWarning: e.egg10,
+            tagBackgroundError: e.pepper10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -173,7 +186,8 @@ const e = {
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.grey6,
             backgroundSkeletonInverse: e.grey6,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
@@ -268,7 +282,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.purple70,
+            tagTextActive: e.movistarBlue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.movistarGreen70,
+            tagTextWarning: e.egg80,
+            tagTextError: e.pepper70,
+            tagBackgroundPromo: e.grey6,
+            tagBackgroundActive: e.grey6,
+            tagBackgroundInactive: e.grey6,
+            tagBackgroundSuccess: e.grey6,
+            tagBackgroundWarning: e.grey6,
+            tagBackgroundError: e.grey6
         },
         borderRadii: {
             avatar: "50%",
@@ -344,6 +370,6 @@ const e = {
             }
         }
     };
-    return o === "prominent" && (t.colors.brand = e.movistarProminentBlue, t.colors.brandHigh = e.movistarProminentBlueDark, t.colors.backgroundBrand = e.movistarProminentBlue, t.colors.navigationBarBackground = e.movistarProminentBlue, t.colors.backgroundFeedbackBottom = e.movistarProminentBlue, t.colors.controlActivated = e.movistarProminentBlue, t.colors.dividerInverse = e.movistarProminentBlueDark), t;
+    return o === "prominent" && (t.colors.brand = e.movistarProminentBlue, t.colors.brandHigh = e.movistarProminentBlueDark, t.colors.backgroundBrand = e.movistarProminentBlue, t.colors.navigationBarBackground = e.movistarProminentBlue, t.colors.backgroundBrandBottom = e.movistarProminentBlue, t.colors.controlActivated = e.movistarProminentBlue, t.colors.dividerInverse = e.movistarProminentBlueDark), t;
 };
 export { d as getMovistarLegacySkin, e as palette };

package/dist-es/skins/movistar.js

@@ -1,4 +1,4 @@
-import { MOVISTAR_SKIN as o } from "./constants.js";
+import { MOVISTAR_SKIN as t } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     movistarBlue: "#019DF4",
@@ -43,7 +43,7 @@ const e = {
     darkModeGrey5: "#6D7D88",
     darkModeGrey6: "#3C5261"
 }, d = ()=>({
-        name: o,
+        name: t,
         colors: {
             background: e.white,
             backgroundAlternative: e.grey1,
@@ -60,7 +60,8 @@ const e = {
             backgroundOverlay: r(e.movistarBlueDark, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.movistarBlue55,
-            backgroundFeedbackBottom: e.movistarBlue,
+            backgroundBrandTop: e.movistarBlue,
+            backgroundBrandBottom: e.movistarBlue,
             appBarBackground: e.white,
             navigationBarBackground: e.movistarBlue,
             skeletonWave: e.grey2,
@@ -104,7 +105,7 @@ const e = {
             textLinkSnackbar: e.movistarBlue30,
             control: e.grey3,
             controlActivated: e.movistarBlue,
-            controlInverse: e.white,
+            controlInverse: e.movistarBlue20,
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
@@ -155,7 +156,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey4,
             textAppBarSelected: e.movistarBlue,
-            customTabsBackground: e.movistarBlue
+            customTabsBackground: e.movistarBlue,
+            tagTextPromo: e.purple70,
+            tagTextActive: e.movistarBlue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.movistarGreen70,
+            tagTextWarning: e.egg80,
+            tagTextError: e.pepper70,
+            tagBackgroundPromo: e.purple10,
+            tagBackgroundActive: e.movistarBlue10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.movistarGreen10,
+            tagBackgroundWarning: e.egg10,
+            tagBackgroundError: e.pepper10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -173,7 +186,8 @@ const e = {
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.movistarBlueDark,
             backgroundSkeletonInverse: e.movistarBlueDark,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.darkModeGrey6,
@@ -268,7 +282,19 @@ const e = {
             textNavigationSearchBarText: e.darkModeGrey2,
             textAppBar: e.darkModeGrey5,
             textAppBarSelected: e.darkModeGrey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.purple40,
+            tagTextActive: e.movistarBlue,
+            tagTextInactive: e.darkModeGrey5,
+            tagTextSuccess: e.movistarGreen40,
+            tagTextWarning: e.egg40,
+            tagTextError: e.pepper40,
+            tagBackgroundPromo: e.movistarBlueDark,
+            tagBackgroundActive: e.movistarBlueDark,
+            tagBackgroundInactive: e.movistarBlueDark,
+            tagBackgroundSuccess: e.movistarBlueDark,
+            tagBackgroundWarning: e.movistarBlueDark,
+            tagBackgroundError: e.movistarBlueDark
         },
         borderRadii: {
             avatar: "50%",

package/dist-es/skins/o2-classic.js

@@ -72,7 +72,8 @@ const e = {
             backgroundSkeletonInverse: r(e.white, 0.2),
             navigationBarBackground: e.o2Blue,
             backgroundAlternative: e.grey1,
-            backgroundFeedbackBottom: e.o2GradientFourth,
+            backgroundBrandTop: e.o2GradientFirst,
+            backgroundBrandBottom: e.o2GradientFourth,
             skeletonWave: e.grey2,
             // BORDERS
             borderLow: e.grey1,
@@ -179,7 +180,19 @@ const e = {
             errorHighInverse: e.pepper70,
             promoHighInverse: e.pink60,
             neutralMediumInverse: e.grey5,
-            customTabsBackground: e.o2Blue
+            customTabsBackground: e.o2Blue,
+            tagTextPromo: e.pink60,
+            tagTextActive: e.o2Blue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.o2Green75,
+            tagTextWarning: e.orange80,
+            tagTextError: e.pepper70,
+            tagBackgroundPromo: e.pink10,
+            tagBackgroundActive: e.o2Blue10,
+            tagBackgroundInactive: e.grey1,
+            tagBackgroundSuccess: e.o2Green10,
+            tagBackgroundWarning: e.orange10,
+            tagBackgroundError: e.pepper10
         },
         darkModeColors: {
             appBarBackground: e.darkModeGrey,
@@ -199,7 +212,8 @@ const e = {
             backgroundSkeletonInverse: e.darkModeGrey6,
             navigationBarBackground: e.darkModeBlack,
             backgroundAlternative: e.darkModeGrey,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -275,7 +289,19 @@ const e = {
             errorHighInverse: e.pepper70,
             promoHighInverse: e.pink60,
             neutralMediumInverse: e.grey5,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.pink40,
+            tagTextActive: e.o2SkyBlue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.o2Green40,
+            tagTextWarning: e.orange40,
+            tagTextError: e.pepper40,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6
         }
     });
 export { d as getO2ClassicSkin, e as palette };

package/dist-es/skins/o2.js

@@ -60,7 +60,8 @@ const e = {
             backgroundOverlay: r(e.grey6, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.o2BluePrimary70,
-            backgroundFeedbackBottom: e.o2BluePrimary,
+            backgroundBrandTop: e.o2BluePrimary,
+            backgroundBrandBottom: e.o2BluePrimary,
             appBarBackground: e.white,
             navigationBarBackground: e.o2BluePrimary,
             skeletonWave: e.grey2,
@@ -104,7 +105,7 @@ const e = {
             textLinkSnackbar: e.o2BluePrimary30,
             control: e.grey3,
             controlActivated: e.o2BluePrimary,
-            controlInverse: e.white,
+            controlInverse: e.o2BluePrimary30,
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
@@ -155,7 +156,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey4,
             textAppBarSelected: e.o2BluePrimary,
-            customTabsBackground: e.o2BluePrimary
+            customTabsBackground: e.o2BluePrimary,
+            tagTextPromo: e.o2Purple,
+            tagTextActive: e.o2BluePrimary,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.o2Green80,
+            tagTextWarning: e.o2Orange75,
+            tagTextError: e.pepper60,
+            tagBackgroundPromo: e.o2Purple10,
+            tagBackgroundActive: e.o2BluePrimary10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.o2Green10,
+            tagBackgroundWarning: e.o2Orange10,
+            tagBackgroundError: e.pepper10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -173,7 +186,8 @@ const e = {
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
@@ -268,7 +282,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.o2Purple30,
+            tagTextActive: e.o2BluePrimary30,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.o2Green40,
+            tagTextWarning: e.o2Orange40,
+            tagTextError: e.pepper40,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6
         },
         borderRadii: {
             avatar: "50%",