@telefonica/mistica 13.1.2 → 13.2.0

package/dist-es/select.js

@@ -50,11 +50,11 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import * as s from "react";
+import * as r from "react";
 import oe from "classnames";
 import { useForm as Ce } from "./form-context.js";
 import { useAriaId as Ne, useTheme as Ae } from "./hooks.js";
-import { TAB as Re, ESC as ve, ENTER as se, SPACE as re, UP as be, DOWN as ke } from "./utils/key-codes.js";
+import { TAB as Re, ESC as be, ENTER as re, SPACE as se, UP as ve, DOWN as ke } from "./utils/key-codes.js";
 import { FieldContainer as _e, HelperText as Ve, Label as De } from "./text-field-components.js";
 import ie from "./generated/mistica-icons/icon-chevron-down-regular.js";
 import { TextFieldBaseAutosuggest as Me } from "./text-field-base.js";
@@ -64,173 +64,173 @@ import { cancelEvent as m } from "./utils/dom.js";
 import { Text3 as Ge } from "./text.js";
 import { selectVariants as Ze, arrowDown as We, selectContainerVariants as Be, selectTextVariants as Le, vars as C, optionsContainer as $e, optionsAnimationsVariants as ce, menuItem as qe, menuItemSelected as je } from "./select.css-mistica.js";
 import { assignInlineVars as ze } from "@vanilla-extract/dynamic";
-import { jsxs as b, jsx as a, Fragment as Ke } from "./_virtual/jsx-runtime.js";
+import { jsxs as k, jsx as a, Fragment as Ke } from "./_virtual/jsx-runtime.js";
 const ut = (param)=>{
-    let { id: le , label: h , helperText: ae , value: k , onChangeValue: _ , name: i , fullWidth: V , options: d , optional: D , disabled: ue , error: de , onBlur: M , autoFocus: $ = !1 , native: fe  } = param;
-    var Y, ee, te;
-    const g = s.useRef(null), f = s.useRef(null), T = s.useRef(null), I = s.useRef(null), N = s.useRef(/* @__PURE__ */ new Map()), [c, pe] = s.useState(), [H, q] = s.useState(!1), [j, z] = s.useState(!1), [K, y] = s.useState(!1), [u, F] = s.useState({}), [x, P] = s.useState(), G = s.useRef(null), Z = Ne(le), { rawValues: me , setRawValue: W , setValue: B , formStatus: he , formErrors: U , setFormError: ge , register: L  } = Ce(), { platformOverrides: X  } = Ae(), Te = fe || process.env.NODE_ENV === "test" || Fe(X) || Pe(X), E = ue || he === "sending", A = de || !!U[i], J = U[i] || ae, o = k != null ? k : me[i], R = (e)=>{
-        _ == null || _(e), ge({
+    let { id: le , label: h , helperText: ae , value: _ , onChangeValue: V , name: i , fullWidth: D , options: d , optional: M , disabled: ue , error: de , onBlur: H , autoFocus: q = !1 , native: fe  } = param;
+    var ee, te, ne;
+    const g = r.useRef(null), f = r.useRef(null), T = r.useRef(null), I = r.useRef(null), N = r.useRef(/* @__PURE__ */ new Map()), [c, pe] = r.useState(), [F, j] = r.useState(!1), [z, K] = r.useState(!1), [U, y] = r.useState(!1), [u, P] = r.useState({}), [x, G] = r.useState(), Z = r.useRef(null), W = Ne(le), { rawValues: me , setRawValue: B , setValue: L , formStatus: he , formErrors: X , setFormError: ge , register: $  } = Ce(), { platformOverrides: J  } = Ae(), Te = fe || process.env.NODE_ENV === "test" || Fe(J) || Pe(J), E = ue || he === "sending", A = de || !!X[i], Q = X[i] || ae, o = _ != null ? _ : me[i], R = (e)=>{
+        V == null || V(e), ge({
             name: i,
             error: ""
-        }), W({
+        }), B({
             name: i,
             value: e
-        }), B({
+        }), L({
             name: i,
             value: e
         });
-    }, w = (e)=>{
+    }, S = (e)=>{
         if (e) {
             if (T != null && T.current) {
-                const { top: r , width: O , left: S , height: v  } = T.current.getBoundingClientRect(), p = r + v, ne = Math.min(d.length, 8) * 48 + 16;
-                if (p + ne + 12 > window.innerHeight) {
-                    const Se = window.innerHeight - p;
-                    if (r > Se) {
-                        const ye = r - ne;
-                        F({
-                            minWidth: O,
-                            left: S,
+                const { top: s , width: w , left: O , height: b  } = T.current.getBoundingClientRect(), p = s + b, v = Math.min(d.length, 8) * 48 + 16;
+                if (p + v + 12 > window.innerHeight) {
+                    const Oe = window.innerHeight - p;
+                    if (s > Oe) {
+                        const ye = s - v;
+                        P({
+                            minWidth: w,
+                            left: O,
                             top: Math.max(ye, 12),
-                            maxHeight: r - 12,
+                            maxHeight: Math.min(s - 12, v),
                             transformOrigin: "center bottom"
                         });
-                    } else F({
-                        minWidth: O,
+                    } else P({
+                        minWidth: w,
                         top: p,
-                        left: S,
+                        left: O,
                         maxHeight: window.innerHeight - p - 12,
                         transformOrigin: "center top"
                     });
-                } else F({
-                    minWidth: O,
+                } else P({
+                    minWidth: w,
                     top: p,
-                    left: S,
-                    maxHeight: void 0,
+                    left: O,
+                    maxHeight: v,
                     transformOrigin: "center top"
                 });
             }
-            q(!0), requestAnimationFrame(()=>{
-                G.current && I.current && "scrollTop" in I.current && (I.current.scrollTop = G.current), z(!0);
-            }), P(c != null ? c : o);
-        } else z(!1), q(!1), P(void 0);
-    }, Q = (e)=>{
+            j(!0), requestAnimationFrame(()=>{
+                Z.current && I.current && "scrollTop" in I.current && (I.current.scrollTop = Z.current), K(!0);
+            }), G(c != null ? c : o);
+        } else K(!1), j(!1), G(void 0);
+    }, Y = (e)=>{
         var t;
-        G.current = (t = I.current) == null ? void 0 : t.scrollTop, w(!1), R && typeof e == "string" && R(e), typeof o > "u" && pe(e);
+        Z.current = (t = I.current) == null ? void 0 : t.scrollTop, S(!1), R && typeof e == "string" && R(e), typeof o > "u" && pe(e);
     }, Ie = (e)=>{
         var n;
         const t = (n = I.current) == null ? void 0 : n.getBoundingClientRect();
         if (t && e && N.current.has(e)) {
-            const l = N.current.get(e), r = l == null ? void 0 : l.getBoundingClientRect();
-            if (r && r.top + r.height / 2 >= t.top + t.height) {
+            const l = N.current.get(e), s = l == null ? void 0 : l.getBoundingClientRect();
+            if (s && s.top + s.height / 2 >= t.top + t.height) {
                 l == null || l.scrollIntoView();
                 return;
             }
-            r && r.top + r.height / 2 <= t.top && (l == null || l.scrollIntoView(!1));
+            s && s.top + s.height / 2 <= t.top && (l == null || l.scrollIntoView(!1));
         }
     }, xe = f.current, Ee = g.current;
-    s.useEffect(()=>{
-        W({
+    r.useEffect(()=>{
+        B({
             name: i,
             value: o
-        }), B({
+        }), L({
             name: i,
             value: o
         });
     }, [
         i,
-        W,
         B,
+        L,
         o
-    ]), s.useEffect(()=>(L(i, {
+    ]), r.useEffect(()=>($(i, {
             input: g.current,
             focusableElement: f.current
         }), ()=>{
-            L(i, {
+            $(i, {
                 input: null,
                 focusableElement: null
             });
         }), [
         i,
-        L,
+        $,
         f,
         g,
         xe,
         Ee
-    ]), s.useEffect(()=>{
+    ]), r.useEffect(()=>{
         const e = (n)=>{
-            var O, S;
-            const r = {
-                [be]: -1,
+            var w, O;
+            const s = {
+                [ve]: -1,
                 [ke]: 1
             }[n.keyCode];
-            if (r) {
+            if (s) {
                 m(n);
-                const v = (S = (O = d[d.findIndex((param)=>{
+                const b = (O = (w = d[d.findIndex((param)=>{
                     let { value: p  } = param;
                     return p === x;
-                }) + r]) == null ? void 0 : O.value) != null ? S : x;
-                P(v), Ie(v);
+                }) + s]) == null ? void 0 : w.value) != null ? O : x;
+                G(b), Ie(b);
             }
         }, t = (n)=>{
-            H && (n.keyCode === Re && m(n), n.keyCode === ve && w(!1), (n.keyCode === se || n.keyCode === re) && (m(n), d.findIndex((param)=>{
+            F && (n.keyCode === Re && m(n), n.keyCode === be && S(!1), (n.keyCode === re || n.keyCode === se) && (m(n), d.findIndex((param)=>{
                 let { value: l  } = param;
                 return l === x;
-            }) !== -1 && x !== c && Q(x), w(!1))), j && e(n);
+            }) !== -1 && x !== c && Y(x), S(!1))), z && e(n);
         };
         return document.addEventListener("keydown", t, !1), ()=>{
             document.removeEventListener("keydown", t, !1);
         };
-    }), s.useEffect(()=>{
-        $ && f.current && f.current.focus();
+    }), r.useEffect(()=>{
+        q && f.current && f.current.focus();
     }, [
-        $
+        q
     ]);
-    const we = (e)=>{
+    const Se = (e)=>{
         var t;
         return e ? (t = d.find((param)=>{
             let { value: n  } = param;
             return n === e;
         })) == null ? void 0 : t.text : "";
-    }, Oe = {
+    }, we = {
         tabIndex: 0,
         onFocus: ()=>y(!0),
         onBlur: ()=>y(!1),
         onClick: ()=>{
-            w(!0), y(!0);
+            S(!0), y(!0);
         },
         onKeyDown: (e)=>{
-            !H && (e.keyCode === re || e.keyCode === se) && (m(e), w(!0));
+            !F && (e.keyCode === se || e.keyCode === re) && (m(e), S(!0));
         }
     };
-    return Te ? /* @__PURE__ */ b(_e, {
+    return Te ? /* @__PURE__ */ k(_e, {
         disabled: E,
         helperText: /* @__PURE__ */ a(Ve, {
             error: A,
-            leftText: J
+            leftText: Q
         }),
         fieldRef: T,
-        fullWidth: V,
+        fullWidth: D,
         children: [
             h && /* @__PURE__ */ a(De, {
                 error: A,
-                forId: Z,
-                inputState: K ? "focused" : ((ee = o != null ? o : c) != null ? ee : (Y = g.current) == null ? void 0 : Y.value) ? "filled" : "default",
-                optional: D,
+                forId: W,
+                inputState: U ? "focused" : ((te = o != null ? o : c) != null ? te : (ee = g.current) == null ? void 0 : ee.value) ? "filled" : "default",
+                optional: M,
                 children: h
             }),
-            /* @__PURE__ */ b("select", {
+            /* @__PURE__ */ k("select", {
                 className: Ze[E ? "disabled" : "default"],
-                id: Z,
+                id: W,
                 "aria-invalid": !!A,
                 value: o,
-                required: !D,
+                required: !M,
                 disabled: E,
                 onChange: (e)=>{
                     R && R(e.target.value);
                 },
                 onFocus: ()=>y(!0),
                 onBlur: (e)=>{
-                    y(!1), M == null || M(e);
+                    y(!1), H == null || H(e);
                 },
                 ref: (e)=>{
                     [
@@ -272,32 +272,32 @@ const ut = (param)=>{
                 })
             })
         ]
-    }) : /* @__PURE__ */ b(Ke, {
+    }) : /* @__PURE__ */ k(Ke, {
         children: [
-            /* @__PURE__ */ b("div", _objectSpreadProps(_objectSpread({
-                className: Be[V ? "fullWidth" : "default"],
+            /* @__PURE__ */ k("div", _objectSpreadProps(_objectSpread({
+                className: Be[D ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !E && Oe), {
+            }, !E && we), {
                 children: [
                     /* @__PURE__ */ a(Me, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: V,
+                        fullWidth: D,
                         endIcon: /* @__PURE__ */ a(ie, {
                             size: 20
                         }),
-                        focus: K,
+                        focus: U,
                         label: h,
                         value: o,
                         shrinkLabel: !!(o || c),
                         name: i,
-                        helperText: J,
-                        required: !D,
+                        helperText: Q,
+                        required: !M,
                         disabled: E,
-                        id: Z,
+                        id: W,
                         error: A,
                         inputRef: g,
                         fieldRef: T
@@ -307,13 +307,13 @@ const ut = (param)=>{
                         style: {
                             top: h ? 27 : 17
                         },
-                        children: we(o != null ? o : c)
+                        children: Se(o != null ? o : c)
                     })
                 ]
             })),
-            H && /* @__PURE__ */ a(He, {
+            F && /* @__PURE__ */ a(He, {
                 onPress: (e)=>{
-                    w(!1), m(e);
+                    S(!1), m(e);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ a("ul", {
@@ -322,10 +322,10 @@ const ut = (param)=>{
                         [C.left]: u.left ? `${u.left}px` : "",
                         [C.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
                         [C.minWidth]: u.minWidth ? `${u.minWidth}px` : "",
-                        [C.transformOrigin]: (te = u.transformOrigin) != null ? te : ""
+                        [C.transformOrigin]: (ne = u.transformOrigin) != null ? ne : ""
                     }),
                     onPointerDown: m,
-                    className: oe($e, j ? ce.show : ce.hide),
+                    className: oe($e, z ? ce.show : ce.hide),
                     role: "listbox",
                     ref: I,
                     children: d.map((param)=>/* @__PURE__ */ {
@@ -338,7 +338,7 @@ const ut = (param)=>{
                                 [je]: e === x || e === (c != null ? c : o)
                             }),
                             onPointerDown: m,
-                            onClick: ()=>Q(e),
+                            onClick: ()=>Y(e),
                             ref: (n)=>{
                                 n ? N.current.set(e, n) : N.current.delete(e);
                             },

package/dist-es/skeleton-base.js

@@ -1,21 +1,21 @@
-import { useIsInverseVariant as t } from "./theme-variant-context.js";
-import i from "classnames";
-import { sprinkles as m } from "./sprinkles.css-mistica.js";
+import { useIsInverseVariant as i } from "./theme-variant-context.js";
+import m from "classnames";
+import { sprinkles as l } from "./sprinkles.css-mistica.js";
 import { vars as r } from "./skins/skin-contract.css-mistica.js";
-import { jsx as l } from "./_virtual/jsx-runtime.js";
-const f = (param)=>{
-    let { width: e = "100%" , height: o = 8 , radius: s = 8 , className: a  } = param;
-    const n = t();
-    return /* @__PURE__ */ l("div", {
-        className: i(a, m({
-            background: n ? r.colors.backgroundSkeletonInverse : r.colors.backgroundSkeleton
+import { jsx as c } from "./_virtual/jsx-runtime.js";
+const v = (param)=>{
+    let { width: e = "100%" , height: o = 8 , radius: s = 8 , className: a , noBorderRadius: n = !1  } = param;
+    const t = i();
+    return /* @__PURE__ */ c("div", {
+        className: m(a, l({
+            background: t ? r.colors.backgroundSkeletonInverse : r.colors.backgroundSkeleton
         })),
         style: {
-            borderRadius: s,
+            borderRadius: n ? 0 : s,
             width: e,
             height: o
         },
         "aria-hidden": !0
     });
 };
-export { f as default };
+export { v as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./skeletons.css.ts.vanilla.js";
-var o = "zopolw2 _1y2v1nf58", r = "_1y2v1nf5o _1y2v1nf5q", f = "zopolw6 _1y2v1nf5p", y = "_1y2v1nf56 _1y2v1nf5l _1y2v1nf5f";
-export { o as animation, r as circle, f as line, y as row };
+var o = "zopolw2 _1y2v1nf5i", r = "_1y2v1nf5y _1y2v1nf60", y = "zopolw6 _1y2v1nf5z", f = "_1y2v1nf5g _1y2v1nf5v _1y2v1nf5p";
+export { o as animation, r as circle, y as line, f as row };

package/dist-es/skeletons.js

@@ -51,89 +51,89 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 import r from "./skeleton-base.js";
-import s from "./stack.js";
+import c from "./stack.js";
 import { getPrefixedDataAttributes as d } from "./utils/dom.js";
 import { row as m, circle as h, line as u, animation as k } from "./skeletons.css-mistica.js";
-import { jsx as t, jsxs as l } from "./_virtual/jsx-runtime.js";
+import { jsx as e, jsxs as s } from "./_virtual/jsx-runtime.js";
 const o = (param)=>/* @__PURE__ */ {
-    let { children: n , ariaLabel: e , dataAttributes: i , width: a , height: c  } = param;
-    return t("div", _objectSpreadProps(_objectSpread({
+    let { children: n , ariaLabel: t , dataAttributes: i , width: a , height: l  } = param;
+    return e("div", _objectSpreadProps(_objectSpread({
         className: k,
         role: "status",
         "aria-busy": !0,
-        "aria-hidden": e === void 0,
-        "aria-label": e,
+        "aria-hidden": t === void 0,
+        "aria-label": t,
         style: {
             width: a,
-            height: c
+            height: l
         }
     }, d(i)), {
         children: n
     }));
-}, A = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , ariaLabel: e , dataAttributes: i  } = param;
-    return t(o, {
+}, g = (param)=>/* @__PURE__ */ {
+    let { width: n = "100%" , ariaLabel: t , dataAttributes: i  } = param;
+    return e(o, {
         width: n,
-        ariaLabel: e,
+        ariaLabel: t,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonLine"
         }, i),
-        children: /* @__PURE__ */ t(r, {
+        children: /* @__PURE__ */ e(r, {
             width: "100%"
         })
     });
-}, f = (param)=>/* @__PURE__ */ {
-    let { ariaLabel: n , dataAttributes: e  } = param;
-    return t(o, {
+}, A = (param)=>/* @__PURE__ */ {
+    let { ariaLabel: n , dataAttributes: t  } = param;
+    return e(o, {
         width: "100%",
         ariaLabel: n,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonText"
-        }, e),
-        children: /* @__PURE__ */ l(s, {
+        }, t),
+        children: /* @__PURE__ */ s(c, {
             space: 16,
             children: [
-                /* @__PURE__ */ t(r, {}),
-                /* @__PURE__ */ t(r, {}),
-                /* @__PURE__ */ t(r, {
+                /* @__PURE__ */ e(r, {}),
+                /* @__PURE__ */ e(r, {}),
+                /* @__PURE__ */ e(r, {
                     width: "75%"
                 })
             ]
         })
     });
 }, x = (param)=>/* @__PURE__ */ {
-    let { ariaLabel: n , size: e = 40 , dataAttributes: i  } = param;
-    return t(o, {
-        width: e,
-        height: e,
+    let { ariaLabel: n , size: t = 40 , dataAttributes: i  } = param;
+    return e(o, {
+        width: t,
+        height: t,
         ariaLabel: n,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonCircle"
         }, i),
-        children: /* @__PURE__ */ t(r, {
+        children: /* @__PURE__ */ e(r, {
             height: "100%",
             width: "100%",
             radius: "50%"
         })
     });
 }, N = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , ariaLabel: e , dataAttributes: i  } = param;
-    return t(o, {
+    let { width: n = "100%" , ariaLabel: t , dataAttributes: i  } = param;
+    return e(o, {
         width: n,
-        ariaLabel: e,
+        ariaLabel: t,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonRow"
         }, i),
-        children: /* @__PURE__ */ l("div", {
+        children: /* @__PURE__ */ s("div", {
             className: m,
             children: [
-                /* @__PURE__ */ t(r, {
+                /* @__PURE__ */ e(r, {
                     height: 40,
                     width: 40,
                     radius: "50%",
                     className: h
                 }),
-                /* @__PURE__ */ t(r, {
+                /* @__PURE__ */ e(r, {
                     width: "100%",
                     className: u
                 })
@@ -141,18 +141,19 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, R = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , height: e = "100%" , ariaLabel: i , dataAttributes: a  } = param;
-    return t(o, {
-        height: e,
+    let { width: n = "100%" , height: t = "100%" , ariaLabel: i , dataAttributes: a , noBorderRadius: l = !1  } = param;
+    return e(o, {
+        height: t,
         width: n,
         ariaLabel: i,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonRectangle"
         }, a),
-        children: /* @__PURE__ */ t(r, {
+        children: /* @__PURE__ */ e(r, {
             height: "100%",
-            width: "100%"
+            width: "100%",
+            noBorderRadius: l
         })
     });
 };
-export { x as SkeletonCircle, A as SkeletonLine, R as SkeletonRectangle, N as SkeletonRow, f as SkeletonText };
+export { x as SkeletonCircle, g as SkeletonLine, R as SkeletonRectangle, N as SkeletonRow, A as SkeletonText };

package/dist-es/skins/blau.js

@@ -38,7 +38,7 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, n = ()=>({
+}, t = ()=>({
         name: a,
         colors: {
             appBarBackground: e.white,
@@ -128,7 +128,12 @@ const e = {
             successHigh: e.blauGreen70,
             warningHigh: e.blauYellow70,
             errorHigh: e.blauRed70,
-            promoHigh: e.blauPurple
+            promoHigh: e.blauPurple,
+            successHighInverse: e.blauGreen70,
+            warningHighInverse: e.blauYellow70,
+            errorHighInverse: e.blauRed70,
+            promoHighInverse: e.blauPurple,
+            neutralMediumInverse: e.grey5
         },
         darkModeColors: {
             backgroundBrand: e.darkModeBlack,
@@ -190,15 +195,20 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            successLow: r(e.white, 0.05),
-            warningLow: r(e.white, 0.05),
-            errorLow: r(e.white, 0.05),
-            promoLow: r(e.white, 0.05),
-            brandLow: r(e.white, 0.05),
+            successLow: e.darkModeGrey6,
+            warningLow: e.darkModeGrey6,
+            errorLow: e.darkModeGrey6,
+            promoLow: e.darkModeGrey6,
+            brandLow: e.darkModeGrey6,
             successHigh: e.blauGreen30,
             warningHigh: e.blauYellow40,
             errorHigh: e.blauRed40,
-            promoHigh: e.blauPurple30
+            promoHigh: e.blauPurple30,
+            successHighInverse: e.blauGreen70,
+            warningHighInverse: e.blauYellow70,
+            errorHighInverse: e.blauRed70,
+            promoHighInverse: e.blauPurple,
+            neutralMediumInverse: e.grey5
         }
     });
-export { n as getBlauSkin, e as palette };
+export { t as getBlauSkin, e as palette };

package/dist-es/skins/movistar.js

@@ -1,5 +1,5 @@
 import { applyAlpha as r } from "../utils/color.js";
-import { MOVISTAR_SKIN as a } from "./constants.js";
+import { MOVISTAR_SKIN as n } from "./constants.js";
 const e = {
     movistarBlue: "#019DF4",
     movistarBlue10: "#E6F5FD",
@@ -44,7 +44,7 @@ const e = {
     darkModeGrey: "#242424"
 }, d = (o)=>{
     const t = {
-        name: a,
+        name: n,
         colors: {
             appBarBackground: e.white,
             background: e.white,
@@ -133,7 +133,12 @@ const e = {
             successHigh: e.movistarGreen70,
             warningHigh: e.egg80,
             errorHigh: e.pepper70,
-            promoHigh: e.purple70
+            promoHigh: e.purple70,
+            successHighInverse: e.movistarGreen70,
+            warningHighInverse: e.egg80,
+            errorHighInverse: e.pepper70,
+            promoHighInverse: e.purple70,
+            neutralMediumInverse: e.grey5
         },
         darkModeColors: {
             brand: e.movistarBlue,
@@ -199,15 +204,20 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            successLow: r(e.white, 0.05),
-            warningLow: r(e.white, 0.05),
-            errorLow: r(e.white, 0.05),
-            promoLow: r(e.white, 0.05),
-            brandLow: r(e.white, 0.05),
+            successLow: e.grey6,
+            warningLow: e.grey6,
+            errorLow: e.grey6,
+            promoLow: e.grey6,
+            brandLow: e.grey6,
             successHigh: e.movistarGreen40,
             warningHigh: e.egg40,
             errorHigh: e.pepper40,
-            promoHigh: e.purple40
+            promoHigh: e.purple40,
+            successHighInverse: e.movistarGreen70,
+            warningHighInverse: e.egg80,
+            errorHighInverse: e.pepper70,
+            promoHighInverse: e.purple70,
+            neutralMediumInverse: e.grey5
         },
         textPresets: {
             text5: {