@telefonica/mistica 17.3.0 → 17.4.0

package/dist-es/sidenav-bar.js

@@ -0,0 +1,429 @@
+'use client';
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx as n, jsxs as g, Fragment as me } from "react/jsx-runtime";
+import * as t from "react";
+import l from "classnames";
+import { CSSTransition as Ue } from "react-transition-group";
+import { COLLAPSE_DURATION_MS as G, logo as je, logoCollapsed as Ke, logoDefault as $e, headerControls as qe, headerControlsCollapsed as Ge, headerSlot as Ze, headerSlotCollapsed as Je, headerBase as Qe, regionBackground as B, headerNegativeBoxedBackground as Xe, scrollSpacerDivider as fe, scrollDividerVariant as Z, headerScrollSpacer as Ye, bodyContent as en, scrollDivider as nn, footerScrollDivider as on, footerBase as pe, footerCollapsed as he, footerScrollSpacer as tn, bodyBase as rn, bodyWithFixedFooter as sn, footerFixed as an, mainColumn as ln, columnSeparator as dn, doublePanelTransitionClasses as cn, container as un, columnsWhileMoving as vn, boxedBorder as mn, boxed as fn, withRightDivider as pn, DEFAULT_WIDTH as hn, LOGO_SIZE as Sn, standaloneItem as gn, CONTENT_DURATION_MS as En, COLLAPSED_WIDTH as bn, contentDurationVar as Dn, collapseDurationVar as xn, sidenavPanelWidthVar as Cn, sidenavWidthVar as Bn } from "./sidenav-bar.css-mistica.js";
+import { normalizeVariant as Se, useThemeVariant as Ln, ThemeVariant as Nn } from "./theme-variant-context.js";
+import { getPrefixedDataAttributes as On } from "./utils/dom.js";
+import { applyCssVars as Tn } from "./utils/css.js";
+import { useScreenSize as wn, useTheme as Pn } from "./hooks.js";
+import { IconButton as Rn } from "./icon-button.js";
+import { Logo as yn } from "./logo.js";
+import In from "./generated/mistica-icons/icon-panel-expand-regular.js";
+import kn from "./generated/mistica-icons/icon-panel-collapse-regular.js";
+import { SidenavFirstLevelItem as Vn } from "./sidenav-bar-first-level-item.js";
+import { renderSidenavSecondLevelItem as Mn } from "./sidenav-bar-second-level-item.js";
+import { SidenavSection as Fn } from "./sidenav-bar-section.js";
+import { SidenavDoublePanel as An } from "./sidenav-bar-panel.js";
+import { SidenavBarMobile as Wn } from "./sidenav-bar-mobile.js";
+import { useIsMotionOff as _n } from "./sidenav-bar-motion.js";
+import { useSidenavRailKeyboard as zn } from "./sidenav-bar-keyboard.js";
+import { SidenavBarContext as Hn } from "./sidenav-bar-context.js";
+import { shouldShowBoxedBorder as Un } from "./boxed.js";
+import { getFirstLevelItems as J, renderSidenavLogo as jn, renderSidenavSlot as ge, isSidenavSection as Ee, getSidenavSectionTitle as Kn } from "./sidenav-bar-data.js";
+import { sidenavLandmark as $n, sidenavExpand as qn, sidenavCollapse as Gn } from "./text-tokens.js";
+import { isSidenavMoving as Zn } from "./sidenav-bar-types.js";
+const be = function(e) {
+    let { standalone: r } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+    return /* @__PURE__ */ n(Vn, {
+        id: e.id,
+        label: e.label,
+        asset: e.asset,
+        showAssetWhenExpanded: e.showAssetWhenExpanded,
+        rightSlot: e.rightSlot,
+        standalone: r,
+        defaultOpen: e.defaultOpen,
+        secondLevelItems: e.children,
+        href: e.href,
+        to: e.to,
+        onPress: e.onPress,
+        newTab: e.newTab,
+        onNavigate: e.onNavigate
+    }, e.id);
+}, De = (e, r)=>J(e).find((a)=>{
+        var _a_children;
+        return (_a_children = a.children) === null || _a_children === void 0 ? void 0 : _a_children.some((d)=>d.id === r);
+    }), xe = (e, r)=>J(e).find((a)=>a.id === r), Jn = (e)=>{
+    const r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), d = (u, p)=>{
+        var _u_children, _u_children1;
+        r.has(u.id) ? a.add(u.id) : r.add(u.id), p > 0 && ((_u_children = u.children) === null || _u_children === void 0 ? void 0 : _u_children.length) && console.error(`SidenavItem "${u.label}" at level ${p} cannot have children. SidenavItem supports maximum 2 levels of nesting. Only level 0 items can have children.`), (_u_children1 = u.children) === null || _u_children1 === void 0 ? void 0 : _u_children1.forEach((E)=>d(E, p + 1));
+    };
+    J(e).forEach((u)=>d(u, 0)), a.size > 0 && console.error(`SidenavBar: duplicate item IDs found: ${Array.from(a).join(", ")}. All SidenavItem ids must be unique within a SidenavBar.`);
+}, Qn = (e)=>e.map((r, a)=>{
+        if (Ee(r)) {
+            const d = e[a - 1], u = !!r.dividerTop && !!d && Ee(d) && !!d.dividerBottom, p = a === 0, E = a === e.length - 1;
+            return /* @__PURE__ */ n("div", {
+                role: "listitem",
+                children: /* @__PURE__ */ n(Fn, {
+                    title: r.title,
+                    dividerTop: r.dividerTop && !p && !u,
+                    dividerBottom: r.dividerBottom && !E,
+                    children: r.items.map((V)=>be(V))
+                })
+            }, `${Kn(r.title).text}-${a}`);
+        }
+        return /* @__PURE__ */ n("div", {
+            className: gn,
+            role: "listitem",
+            children: be(r, {
+                standalone: !0
+            })
+        }, r.id);
+    }), Co = (param)=>{
+    let { entries: e, "aria-label": r, variant: a = "default", boxed: d = !1, divider: u = !0, showCollapseButton: p = !0, collapsed: E, defaultCollapsed: V = !1, onCollapse: M, doublePanel: c = !1, width: Q = hn, logo: O, headerSlot: X, footerSlot: b, fixedFooter: T = !1, background: F, selectedItemId: v, onSelectedItemIdChange: A, dataAttributes: Y } = param;
+    const { isTabletOrSmaller: Ce } = wn(), { componentProperties: Be, texts: W, t: _ } = Pn(), ee = r !== null && r !== void 0 ? r : W.sidenavLandmark || _($n), h = _n(), Le = Se(Ln()), [D, f] = t.useState(()=>{
+        var _De;
+        var _De_id;
+        return c && e && v ? (_De_id = (_De = De(e, v)) === null || _De === void 0 ? void 0 : _De.id) !== null && _De_id !== void 0 ? _De_id : null : null;
+    }), z = E !== void 0, [Ne, Oe] = t.useState(V), s = z ? !!E : Ne, L = t.useRef(null), ne = t.useRef(null), [x, Te] = t.useState(null), [oe, te] = t.useState(s);
+    t.useEffect(()=>{
+        if (h) {
+            te(s);
+            return;
+        }
+        const o = setTimeout(()=>te(s), G);
+        return ()=>clearTimeout(o);
+    }, [
+        s,
+        h
+    ]);
+    const w = s ? oe ? "collapsed" : "collapsing" : oe ? "expanding" : "expanded", [re, se] = t.useState(null), ie = t.useCallback((o)=>{
+        c && se(o), f(null), o && (A === null || A === void 0 ? void 0 : A(o));
+    }, [
+        c,
+        A
+    ]), [we, Pe] = t.useState(v);
+    if (v !== we && (Pe(v), re !== null && se(null), c && e && v && re !== v)) {
+        const o = De(e, v);
+        if (o) f(o.id);
+        else {
+            var _m_children;
+            const m = xe(e, v);
+            m && !((_m_children = m.children) === null || _m_children === void 0 ? void 0 : _m_children.length) && f(null);
+        }
+    }
+    const [Re, ye] = t.useState(c);
+    c !== Re && (ye(c), c || f(null));
+    var _e_length;
+    const [Ie, ke] = t.useState((_e_length = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length !== void 0 ? _e_length : 0);
+    var _e_length1, _e_length2;
+    ((_e_length1 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length1 !== void 0 ? _e_length1 : 0) !== Ie && (ke((_e_length2 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length2 !== void 0 ? _e_length2 : 0), f(null)), t.useEffect(()=>{
+        if (!c || !D) return;
+        const o = (S)=>{
+            const ve = L.current;
+            ve && (S.composedPath().includes(ve) || f(null));
+        }, m = (S)=>{
+            S.key === "Escape" && f(null);
+        };
+        return document.addEventListener("click", o), document.addEventListener("keydown", m), ()=>{
+            document.removeEventListener("click", o), document.removeEventListener("keydown", m);
+        };
+    }, [
+        c,
+        D
+    ]);
+    const C = F ? {
+        backgroundColor: F
+    } : void 0, [H, Ve] = t.useState(!1), [P, Me] = t.useState(!1), [Fe, ae] = t.useState(!1), U = t.useRef(null), R = t.useRef(null), y = t.useRef(null);
+    t.useEffect(()=>{
+        if (!y.current) return;
+        const o = new IntersectionObserver((param)=>{
+            let [S] = param;
+            Ve(!S.isIntersecting);
+        }, {
+            root: y.current,
+            threshold: 0,
+            rootMargin: "1px 0px 1px 0px"
+        }), m = new IntersectionObserver((param)=>{
+            let [S] = param;
+            Me(!S.isIntersecting);
+        }, {
+            root: y.current,
+            threshold: 0,
+            rootMargin: "1px 0px 1px 0px"
+        });
+        return U.current && o.observe(U.current), R.current && m.observe(R.current), ()=>{
+            o.disconnect(), m.disconnect();
+        };
+    }, []);
+    const j = Zn(w), Ae = t.useCallback(()=>{
+        if (j) return;
+        const o = !s;
+        if (!z) {
+            Oe(o), M === null || M === void 0 ? void 0 : M(o);
+            return;
+        }
+        M === null || M === void 0 ? void 0 : M(o);
+    }, [
+        s,
+        j,
+        z,
+        M
+    ]), We = t.useMemo(()=>({
+            collapsed: s,
+            collapseState: w,
+            isMotionOff: h,
+            doublePanel: c,
+            panelOpenForItemId: D,
+            setPanelOpenForItemId: f,
+            selectItemAndClosePanel: ie,
+            containerRef: L,
+            selectedItemId: v !== null && v !== void 0 ? v : null
+        }), [
+        s,
+        w,
+        h,
+        c,
+        D,
+        ie,
+        L,
+        v
+    ]), _e = zn(L), ze = s ? bn : Q;
+    process.env.NODE_ENV !== "production" && e && Jn(e);
+    const i = Se(a);
+    if (Ce) return /* @__PURE__ */ n(Wn, {
+        entries: e,
+        "aria-label": ee,
+        variant: i,
+        logo: O,
+        headerSlot: X,
+        footerSlot: b,
+        selectedItemId: v !== null && v !== void 0 ? v : null,
+        onSelectedItemIdChange: A,
+        dataAttributes: Y
+    });
+    const K = {
+        collapsed: s,
+        state: w
+    }, le = O === void 0 || O === !0, $ = jn(O, K, /* @__PURE__ */ n(yn, {
+        size: Sn,
+        type: "isotype"
+    })), de = p ? /* @__PURE__ */ n(Rn, {
+        Icon: s ? In : kn,
+        type: "neutral",
+        backgroundType: "transparent",
+        small: !0,
+        onPress: Ae,
+        "aria-label": s ? W.sidenavExpand || _(qn) : W.sidenavCollapse || _(Gn),
+        "aria-expanded": !s
+    }) : null, q = ge(X, K), ce = ge(b, K), I = !!($ || de || q), He = d && Un(i, Le, Be.showBoxedBorder), N = c && D && e ? xe(e, D) : void 0, k = N === null || N === void 0 ? void 0 : N.children, ue = !!(k === null || k === void 0 ? void 0 : k.length);
+    return N && (k === null || k === void 0 ? void 0 : k.length) && ((x === null || x === void 0 ? void 0 : x.label) !== N.label || (x === null || x === void 0 ? void 0 : x.children) !== k) && Te({
+        itemId: N.id,
+        label: N.label,
+        children: k
+    }), /* @__PURE__ */ n(Nn, {
+        variant: i,
+        children: /* @__PURE__ */ n(Hn.Provider, {
+            value: We,
+            children: /* @__PURE__ */ g("nav", _object_spread_props(_object_spread({
+                ref: L,
+                "aria-label": ee,
+                onKeyDown: _e,
+                className: l(un, {
+                    [pn[i]]: u && !d,
+                    [fn]: d,
+                    [mn]: He,
+                    [vn]: j
+                }),
+                style: Tn({
+                    [Bn]: `${ze}px`,
+                    [Cn]: `${Q}px`,
+                    [xn]: `${h ? 0 : G}ms`,
+                    [Dn]: `${h ? 0 : En}ms`
+                })
+            }, On(_object_spread({
+                testid: "SidenavBar"
+            }, Y))), {
+                children: [
+                    /* @__PURE__ */ g("div", {
+                        className: l(ln, {
+                            [dn[i]]: ue || Fe
+                        }),
+                        children: [
+                            I && /* @__PURE__ */ g("div", {
+                                className: l(Qe, B[i], {
+                                    [Xe]: d && i === "negative"
+                                }),
+                                style: C,
+                                children: [
+                                    /* @__PURE__ */ g("div", {
+                                        className: l(qe, {
+                                            [Ge]: s
+                                        }),
+                                        children: [
+                                            $ && /* @__PURE__ */ n("div", {
+                                                className: l(je, {
+                                                    [$e]: le,
+                                                    [Ke]: s
+                                                }),
+                                                "aria-hidden": le || void 0,
+                                                children: $
+                                            }),
+                                            de
+                                        ]
+                                    }),
+                                    q && /* @__PURE__ */ n("div", {
+                                        className: l(Ze, {
+                                            [Je]: s
+                                        }),
+                                        children: q
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ g("div", {
+                                ref: y,
+                                className: l(rn, B[i], {
+                                    [sn]: !!b && T
+                                }),
+                                style: C,
+                                onFocus: (o)=>{
+                                    const m = o.target;
+                                    try {
+                                        m.matches(":focus-visible") && m.scrollIntoView({
+                                            block: "nearest"
+                                        });
+                                    } catch (e) {}
+                                },
+                                children: [
+                                    /* @__PURE__ */ n("div", {
+                                        ref: U
+                                    }),
+                                    /* @__PURE__ */ n("div", {
+                                        className: l(Ye, {
+                                            [B[i]]: I && H
+                                        }),
+                                        style: I && H ? C : void 0,
+                                        children: I && H && /* @__PURE__ */ n("div", {
+                                            className: l(fe, Z[i])
+                                        })
+                                    }),
+                                    e && // The body is the list of the first level. Each entry is one of its items.
+                                    /* @__PURE__ */ n("div", {
+                                        className: en,
+                                        role: "list",
+                                        children: Qn(e)
+                                    }),
+                                    b && !T && /* @__PURE__ */ g(me, {
+                                        children: [
+                                            /* @__PURE__ */ n("div", {
+                                                ref: R
+                                            }),
+                                            P && /* @__PURE__ */ n("div", {
+                                                className: l(nn, on, Z[i])
+                                            }),
+                                            /* @__PURE__ */ n("div", {
+                                                className: l(pe, B[i], {
+                                                    [he]: s
+                                                }),
+                                                style: C,
+                                                children: ce
+                                            })
+                                        ]
+                                    }),
+                                    b && T && /* @__PURE__ */ g(me, {
+                                        children: [
+                                            /* @__PURE__ */ n("div", {
+                                                ref: R
+                                            }),
+                                            /* @__PURE__ */ n("div", {
+                                                className: l(tn, {
+                                                    [B[i]]: P
+                                                }),
+                                                style: P ? C : void 0,
+                                                children: P && /* @__PURE__ */ n("div", {
+                                                    className: l(fe, Z[i])
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            b && T && /* @__PURE__ */ n("div", {
+                                className: l(pe, an, B[i], {
+                                    [he]: s
+                                }),
+                                style: C,
+                                children: ce
+                            })
+                        ]
+                    }),
+                    x && /* @__PURE__ */ n(Ue, {
+                        in: ue,
+                        timeout: h ? 0 : G,
+                        nodeRef: ne,
+                        classNames: cn,
+                        appear: !0,
+                        mountOnEnter: !0,
+                        unmountOnExit: !0,
+                        onEnter: ()=>ae(!0),
+                        onExited: ()=>ae(!1),
+                        children: /* @__PURE__ */ n(An, {
+                            ref: ne,
+                            itemId: x.itemId,
+                            label: x.label,
+                            variant: i,
+                            backgroundColor: F,
+                            children: x.children.map((o)=>Mn(o, {
+                                    placement: "panel"
+                                }))
+                        })
+                    })
+                ]
+            }))
+        })
+    });
+};
+export { Co as SidenavBar, Co as default };

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

@@ -1,8 +1,8 @@
 /* empty css                                     */ /* empty css                                     */ var o = {
-    default: "v17_3_zopolw5 v17_3_zopolw0 v17_3_1y2v1nf99",
-    alternative: "v17_3_zopolw6 v17_3_zopolw1 v17_3_1y2v1nf99",
-    brand: "v17_3_zopolw7 v17_3_zopolw2 v17_3_1y2v1nf9c",
-    negative: "v17_3_zopolw8 v17_3_zopolw3 v17_3_1y2v1nf9b",
-    media: "v17_3_zopolw9 v17_3_zopolw4 v17_3_1y2v1nf9b"
-}, l = "v17_3_zopolwc v17_3_zopolwb v17_3_1y2v1nfrc", p = "v17_3_zopolwd v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj", r = "v17_3_zopolwe v17_3_1y2v1nfrs v17_3_1y2v1nfru", n = "v17_3_zopolwg v17_3_zopolwf v17_3_1y2v1nfrt";
-export { l as animation, o as background, r as circle, n as line, p as row };
+    default: "v17_4_zopolw5 v17_4_zopolw0 v17_4_1y2v1nf9d",
+    alternative: "v17_4_zopolw6 v17_4_zopolw1 v17_4_1y2v1nf9d",
+    brand: "v17_4_zopolw7 v17_4_zopolw2 v17_4_1y2v1nf9g",
+    negative: "v17_4_zopolw8 v17_4_zopolw3 v17_4_1y2v1nf9f",
+    media: "v17_4_zopolw9 v17_4_zopolw4 v17_4_1y2v1nf9f"
+}, l = "v17_4_zopolwc v17_4_zopolwb v17_4_1y2v1nfrg", n = "v17_4_zopolwd v17_4_1y2v1nfre v17_4_1y2v1nfrt v17_4_1y2v1nfrn", r = "v17_4_zopolwe v17_4_1y2v1nfrw v17_4_1y2v1nfry", p = "v17_4_zopolwg v17_4_zopolwf v17_4_1y2v1nfrx";
+export { l as animation, o as background, r as circle, p as line, n as row };

package/dist-es/skins/blau.js

@@ -68,6 +68,8 @@ const e = {
             backgroundContainerNegative: r(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: e.blauBluePrimary30,
             backgroundContainerAlternative: e.blauBluePrimary20,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.blauBluePrimary30,
             backgroundOverlay: r(e.blauBlueSecondary, 0.75),
             backgroundSkeleton: e.grey3,
             backgroundSkeletonInverse: e.blauBlueSecondary,
@@ -114,12 +116,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: r(e.white, 0.15),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.15),
             buttonLinkNeutralBackgroundPressed: e.grey1,
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey1,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey1,
-            buttonLinkNeutralBackgroundMedia: e.white,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey1,
+            buttonLinkNeutralBackgroundBrand: r(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: r(e.white, 0.15),
+            buttonLinkNeutralBackgroundNegative: r(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: r(e.white, 0.15),
+            buttonLinkNeutralBackgroundMedia: r(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: r(e.white, 0.15),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: e.white,
@@ -185,9 +187,9 @@ const e = {
             textLinkSnackbar: e.blauPurple30,
             textLinkNeutral: e.grey6,
             textLinkNeutralBrand: e.grey6,
-            textLinkNeutralNegative: e.grey6,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.grey6,
-            textLinkNeutralMedia: e.grey6,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blauBlueSecondary,
             textBrand: e.blauBlueSecondary,
             inputBorder: e.grey4,
@@ -375,6 +377,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey,
             backgroundSkeletonInverse: e.darkModeGrey,

package/dist-es/skins/esimflag.js

@@ -72,6 +72,8 @@ const e = {
             backgroundContainerNegative: r(e.darkModeBlack, 0.6),
             backgroundContainerBrandOverBrand: e.blue80,
             backgroundContainerAlternative: e.grey1,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.blue80,
             backgroundOverlay: r(e.black, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.blue55,
@@ -114,12 +116,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: r(e.white, 0.08),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonLinkNeutralBackgroundPressed: r(e.grey3, 0.4),
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey2,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey2,
-            buttonLinkNeutralBackgroundMedia: e.grey2,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey2,
+            buttonLinkNeutralBackgroundBrand: r(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: r(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: r(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.blue,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -184,10 +186,10 @@ const e = {
             textLinkDangerMedia: e.tomato60,
             textLinkSnackbar: e.blue30,
             textLinkNeutral: e.blue85,
-            textLinkNeutralBrand: e.blue85,
-            textLinkNeutralNegative: e.blue85,
+            textLinkNeutralBrand: e.white,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.blue85,
-            textLinkNeutralMedia: e.blue85,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blue,
             textBrand: e.blue,
             inputBorder: e.grey4,
@@ -379,6 +381,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,

package/dist-es/skins/movistar.js

@@ -79,6 +79,8 @@ const e = {
             backgroundContainerNegative: r(e.movistarBlack, 0.2),
             backgroundContainerBrandOverBrand: e.blue800,
             backgroundContainerAlternative: e.grey100,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.blue800,
             backgroundOverlay: r(e.movistarBlack, 0.6),
             backgroundSkeleton: e.grey200,
             backgroundSkeletonInverse: e.blue800,
@@ -121,12 +123,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: r(e.white, 0.3),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.3),
             buttonLinkNeutralBackgroundPressed: e.grey100,
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey100,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey100,
-            buttonLinkNeutralBackgroundMedia: e.white,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey100,
+            buttonLinkNeutralBackgroundBrand: r(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: r(e.white, 0.3),
+            buttonLinkNeutralBackgroundNegative: r(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: r(e.white, 0.3),
+            buttonLinkNeutralBackgroundMedia: r(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: r(e.white, 0.3),
             buttonPrimaryBackground: e.movistarBlue,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -191,10 +193,10 @@ const e = {
             textLinkDangerMedia: e.red,
             textLinkSnackbar: e.blue300,
             textLinkNeutral: e.movistarBlack,
-            textLinkNeutralBrand: e.movistarBlack,
-            textLinkNeutralNegative: e.movistarBlack,
+            textLinkNeutralBrand: e.white,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.movistarBlack,
-            textLinkNeutralMedia: e.movistarBlack,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blueHigh,
             textBrand: e.blueHigh,
             inputBorder: e.grey500,
@@ -386,6 +388,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.grey600,
             backgroundSkeletonInverse: e.grey600,

package/dist-es/skins/o2.js

@@ -75,6 +75,8 @@ const e = {
             backgroundContainerNegative: r(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: e.beyondBlue70,
             backgroundContainerAlternative: e.grey20,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.beyondBlue70,
             backgroundOverlay: r(e.black, 0.6),
             backgroundSkeleton: e.grey30,
             backgroundSkeletonInverse: e.beyondBlue70,
@@ -117,12 +119,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: r(e.white, 0.08),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonLinkNeutralBackgroundPressed: r(e.grey30, 0.4),
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey20,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey20,
-            buttonLinkNeutralBackgroundMedia: e.white,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey20,
+            buttonLinkNeutralBackgroundBrand: r(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: r(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: r(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.beyondBlue,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -187,10 +189,10 @@ const e = {
             textLinkDangerMedia: e.o2Red65,
             textLinkSnackbar: e.beyondBlue30,
             textLinkNeutral: e.black,
-            textLinkNeutralBrand: e.black,
-            textLinkNeutralNegative: e.black,
+            textLinkNeutralBrand: e.white,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.black,
-            textLinkNeutralMedia: e.black,
+            textLinkNeutralMedia: e.white,
             textActivated: e.beyondBlue,
             textBrand: e.beyondBlue,
             inputBorder: e.grey45,
@@ -382,6 +384,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,