@telefonica/mistica 13.1.2 → 13.2.0

package/dist/select.js

@@ -118,171 +118,171 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 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 = _react.useRef(null), f = _react.useRef(null), T = _react.useRef(null), I = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [c, pe] = _react.useState(), [H, q] = _react.useState(!1), [j, z] = _react.useState(!1), [K, y] = _react.useState(!1), [u, F] = _react.useState({}), [x, P] = _react.useState(), G = _react.useRef(null), Z = (0, _hooksJs.useAriaId)(le), { rawValues: me , setRawValue: W , setValue: B , formStatus: he , formErrors: U , setFormError: ge , register: L  } = (0, _formContextJs.useForm)(), { platformOverrides: X  } = (0, _hooksJs.useTheme)(), Te = fe || process.env.NODE_ENV === "test" || (0, _platformJs.isAndroid)(X) || (0, _platformJs.isIos)(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 = _react.useRef(null), f = _react.useRef(null), T = _react.useRef(null), I = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [c, pe] = _react.useState(), [F, j] = _react.useState(!1), [z, K] = _react.useState(!1), [U, y] = _react.useState(!1), [u, P] = _react.useState({}), [x, G] = _react.useState(), Z = _react.useRef(null), W = (0, _hooksJs.useAriaId)(le), { rawValues: me , setRawValue: B , setValue: L , formStatus: he , formErrors: X , setFormError: ge , register: $  } = (0, _formContextJs.useForm)(), { platformOverrides: J  } = (0, _hooksJs.useTheme)(), Te = fe || process.env.NODE_ENV === "test" || (0, _platformJs.isAndroid)(J) || (0, _platformJs.isIos)(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;
     _react.useEffect(()=>{
-        W({
+        B({
             name: i,
             value: o
-        }), B({
+        }), L({
             name: i,
             value: o
         });
     }, [
         i,
-        W,
         B,
+        L,
         o
-    ]), _react.useEffect(()=>(L(i, {
+    ]), _react.useEffect(()=>($(i, {
             input: g.current,
             focusableElement: f.current
         }), ()=>{
-            L(i, {
+            $(i, {
                 input: null,
                 focusableElement: null
             });
         }), [
         i,
-        L,
+        $,
         f,
         g,
         xe,
         Ee
     ]), _react.useEffect(()=>{
         const e = (n)=>{
-            var O, S;
-            const r = {
+            var w, O;
+            const s = {
                 [_keyCodesJs.UP]: -1,
                 [_keyCodesJs.DOWN]: 1
             }[n.keyCode];
-            if (r) {
+            if (s) {
                 (0, _domJs.cancelEvent)(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 === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && w(!1), (n.keyCode === _keyCodesJs.ENTER || n.keyCode === _keyCodesJs.SPACE) && ((0, _domJs.cancelEvent)(n), d.findIndex((param)=>{
+            F && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && S(!1), (n.keyCode === _keyCodesJs.ENTER || n.keyCode === _keyCodesJs.SPACE) && ((0, _domJs.cancelEvent)(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);
         };
     }), _react.useEffect(()=>{
-        $ && f.current && f.current.focus();
+        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 === _keyCodesJs.SPACE || e.keyCode === _keyCodesJs.ENTER) && ((0, _domJs.cancelEvent)(e), w(!0));
+            !F && (e.keyCode === _keyCodesJs.SPACE || e.keyCode === _keyCodesJs.ENTER) && ((0, _domJs.cancelEvent)(e), S(!0));
         }
     };
     return Te ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
         disabled: E,
         helperText: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.HelperText, {
             error: A,
-            leftText: J
+            leftText: Q
         }),
         fieldRef: T,
-        fullWidth: V,
+        fullWidth: D,
         children: [
             h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
                 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__ */ (0, _jsxRuntimeJs.jsxs)("select", {
                 className: _selectCssMisticaJs.selectVariants[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)=>{
                     [
@@ -327,29 +327,29 @@ const ut = (param)=>{
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-                className: _selectCssMisticaJs.selectContainerVariants[V ? "fullWidth" : "default"],
+                className: _selectCssMisticaJs.selectContainerVariants[D ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !E && Oe), {
+            }, !E && we), {
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: V,
+                        fullWidth: D,
                         endIcon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronDownRegularJs.default, {
                             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
@@ -359,13 +359,13 @@ const ut = (param)=>{
                         style: {
                             top: h ? 27 : 17
                         },
-                        children: we(o != null ? o : c)
+                        children: Se(o != null ? o : c)
                     })
                 ]
             })),
-            H && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
+            F && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
                 onPress: (e)=>{
-                    w(!1), (0, _domJs.cancelEvent)(e);
+                    S(!1), (0, _domJs.cancelEvent)(e);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("ul", {
@@ -374,10 +374,10 @@ const ut = (param)=>{
                         [_selectCssMisticaJs.vars.left]: u.left ? `${u.left}px` : "",
                         [_selectCssMisticaJs.vars.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
                         [_selectCssMisticaJs.vars.minWidth]: u.minWidth ? `${u.minWidth}px` : "",
-                        [_selectCssMisticaJs.vars.transformOrigin]: (te = u.transformOrigin) != null ? te : ""
+                        [_selectCssMisticaJs.vars.transformOrigin]: (ne = u.transformOrigin) != null ? ne : ""
                     }),
                     onPointerDown: _domJs.cancelEvent,
-                    className: (0, _classnames.default)(_selectCssMisticaJs.optionsContainer, j ? _selectCssMisticaJs.optionsAnimationsVariants.show : _selectCssMisticaJs.optionsAnimationsVariants.hide),
+                    className: (0, _classnames.default)(_selectCssMisticaJs.optionsContainer, z ? _selectCssMisticaJs.optionsAnimationsVariants.show : _selectCssMisticaJs.optionsAnimationsVariants.hide),
                     role: "listbox",
                     ref: I,
                     children: d.map((param)=>/* @__PURE__ */ {
@@ -390,7 +390,7 @@ const ut = (param)=>{
                                 [_selectCssMisticaJs.menuItemSelected]: e === x || e === (c != null ? c : o)
                             }),
                             onPointerDown: _domJs.cancelEvent,
-                            onClick: ()=>Q(e),
+                            onClick: ()=>Y(e),
                             ref: (n)=>{
                                 n ? N.current.set(e, n) : N.current.delete(e);
                             },

package/dist/skeleton-base.d.ts

@@ -4,6 +4,7 @@ type SkeletonBaseProps = {
     height?: string | number;
     radius?: string | number;
     className?: string;
+    noBorderRadius?: boolean;
 };
-declare const SkeletonBase: ({ width, height, radius, className, }: SkeletonBaseProps) => JSX.Element;
+declare const SkeletonBase: ({ width, height, radius, className, noBorderRadius, }: SkeletonBaseProps) => JSX.Element;
 export default SkeletonBase;

package/dist/skeleton-base.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>f
+    get: ()=>v
 });
 const _themeVariantContextJs = require("./theme-variant-context.js");
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -16,15 +16,15 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const f = (param)=>{
-    let { width: e = "100%" , height: o = 8 , radius: s = 8 , className: a  } = param;
-    const n = (0, _themeVariantContextJs.useIsInverseVariant)();
+const v = (param)=>{
+    let { width: e = "100%" , height: o = 8 , radius: s = 8 , className: a , noBorderRadius: n = !1  } = param;
+    const t = (0, _themeVariantContextJs.useIsInverseVariant)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: (0, _classnames.default)(a, (0, _sprinklesCssMisticaJs.sprinkles)({
-            background: n ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton
+            background: t ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton
         })),
         style: {
-            borderRadius: s,
+            borderRadius: n ? 0 : s,
             width: e,
             height: o
         },

package/dist/skeletons.css-mistica.js

@@ -11,9 +11,9 @@ function _export(target, all) {
 _export(exports, {
     animation: ()=>o,
     circle: ()=>r,
-    line: ()=>f,
-    row: ()=>y
+    line: ()=>y,
+    row: ()=>f
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./skeletons.css.ts.vanilla.js");
-var o = "zopolw2 _1y2v1nf58", r = "_1y2v1nf5o _1y2v1nf5q", f = "zopolw6 _1y2v1nf5p", y = "_1y2v1nf56 _1y2v1nf5l _1y2v1nf5f";
+var o = "zopolw2 _1y2v1nf5i", r = "_1y2v1nf5y _1y2v1nf60", y = "zopolw6 _1y2v1nf5z", f = "_1y2v1nf5g _1y2v1nf5v _1y2v1nf5p";

package/dist/skeletons.d.ts

@@ -19,6 +19,7 @@ type SkeletonRectangleProps = {
     dataAttributes?: DataAttributes;
     width?: number | string;
     height?: number | string;
+    noBorderRadius?: boolean;
 };
-export declare const SkeletonRectangle: ({ width, height, ariaLabel, dataAttributes, }: SkeletonRectangleProps) => JSX.Element;
+export declare const SkeletonRectangle: ({ width, height, ariaLabel, dataAttributes, noBorderRadius, }: SkeletonRectangleProps) => JSX.Element;
 export {};

package/dist/skeletons.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     SkeletonCircle: ()=>x,
-    SkeletonLine: ()=>A,
+    SkeletonLine: ()=>g,
     SkeletonRectangle: ()=>R,
     SkeletonRow: ()=>N,
-    SkeletonText: ()=>f
+    SkeletonText: ()=>A
 });
 const _skeletonBaseJs = /*#__PURE__*/ _interopRequireDefault(require("./skeleton-base.js"));
 const _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
@@ -78,25 +78,25 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 const o = (param)=>/* @__PURE__ */ {
-    let { children: n , ariaLabel: e , dataAttributes: i , width: a , height: c  } = param;
+    let { children: n , ariaLabel: t , dataAttributes: i , width: a , height: l  } = param;
     return (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
         className: _skeletonsCssMisticaJs.animation,
         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
         }
     }, (0, _domJs.getPrefixedDataAttributes)(i)), {
         children: n
     }));
-}, A = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , ariaLabel: e , dataAttributes: i  } = param;
+}, g = (param)=>/* @__PURE__ */ {
+    let { width: n = "100%" , ariaLabel: t , dataAttributes: i  } = param;
     return (0, _jsxRuntimeJs.jsx)(o, {
         width: n,
-        ariaLabel: e,
+        ariaLabel: t,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonLine"
         }, i),
@@ -104,14 +104,14 @@ const o = (param)=>/* @__PURE__ */ {
             width: "100%"
         })
     });
-}, f = (param)=>/* @__PURE__ */ {
-    let { ariaLabel: n , dataAttributes: e  } = param;
+}, A = (param)=>/* @__PURE__ */ {
+    let { ariaLabel: n , dataAttributes: t  } = param;
     return (0, _jsxRuntimeJs.jsx)(o, {
         width: "100%",
         ariaLabel: n,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonText"
-        }, e),
+        }, t),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
             space: 16,
             children: [
@@ -124,10 +124,10 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, x = (param)=>/* @__PURE__ */ {
-    let { ariaLabel: n , size: e = 40 , dataAttributes: i  } = param;
+    let { ariaLabel: n , size: t = 40 , dataAttributes: i  } = param;
     return (0, _jsxRuntimeJs.jsx)(o, {
-        width: e,
-        height: e,
+        width: t,
+        height: t,
         ariaLabel: n,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonCircle"
@@ -139,10 +139,10 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, N = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , ariaLabel: e , dataAttributes: i  } = param;
+    let { width: n = "100%" , ariaLabel: t , dataAttributes: i  } = param;
     return (0, _jsxRuntimeJs.jsx)(o, {
         width: n,
-        ariaLabel: e,
+        ariaLabel: t,
         dataAttributes: _objectSpread({
             "component-name": "SkeletonRow"
         }, i),
@@ -163,9 +163,9 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, R = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , height: e = "100%" , ariaLabel: i , dataAttributes: a  } = param;
+    let { width: n = "100%" , height: t = "100%" , ariaLabel: i , dataAttributes: a , noBorderRadius: l = !1  } = param;
     return (0, _jsxRuntimeJs.jsx)(o, {
-        height: e,
+        height: t,
         width: n,
         ariaLabel: i,
         dataAttributes: _objectSpread({
@@ -173,7 +173,8 @@ const o = (param)=>/* @__PURE__ */ {
         }, a),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonBaseJs.default, {
             height: "100%",
-            width: "100%"
+            width: "100%",
+            noBorderRadius: l
         })
     });
 };

package/dist/skins/blau.js

@@ -9,7 +9,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getBlauSkin: ()=>n,
+    getBlauSkin: ()=>t,
     palette: ()=>e
 });
 const _colorJs = require("../utils/color.js");
@@ -52,7 +52,7 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, n = ()=>({
+}, t = ()=>({
         name: _constantsJs.BLAU_SKIN,
         colors: {
             appBarBackground: e.white,
@@ -142,7 +142,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,
@@ -204,14 +209,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            successLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            warningLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            errorLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            promoLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            brandLow: (0, _colorJs.applyAlpha)(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
         }
     });

package/dist/skins/movistar.js

@@ -147,7 +147,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,
@@ -213,15 +218,20 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            successLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            warningLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            errorLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            promoLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            brandLow: (0, _colorJs.applyAlpha)(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: {

package/dist/skins/o2-classic.js

@@ -154,7 +154,12 @@ const e = {
             successHigh: e.o2Green75,
             warningHigh: e.orange80,
             errorHigh: e.pepper70,
-            promoHigh: e.pink60
+            promoHigh: e.pink60,
+            successHighInverse: e.o2Green75,
+            warningHighInverse: e.orange80,
+            errorHighInverse: e.pepper70,
+            promoHighInverse: e.pink60,
+            neutralMediumInverse: e.grey5
         },
         darkModeColors: {
             appBarBackground: e.darkModeGrey,
@@ -221,14 +226,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            successLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            warningLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            errorLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            promoLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            brandLow: (0, _colorJs.applyAlpha)(e.white, 0.05),
+            successLow: e.darkModeGrey6,
+            warningLow: e.darkModeGrey6,
+            errorLow: e.darkModeGrey6,
+            promoLow: e.darkModeGrey6,
+            brandLow: e.darkModeGrey6,
             successHigh: e.o2Green40,
             warningHigh: e.orange40,
             errorHigh: e.pepper40,
-            promoHigh: e.pink40
+            promoHigh: e.pink40,
+            successHighInverse: e.o2Green75,
+            warningHighInverse: e.orange80,
+            errorHighInverse: e.pepper70,
+            promoHighInverse: e.pink60,
+            neutralMediumInverse: e.grey5
         }
     });