@telefonica/mistica 14.6.0 → 14.7.0

package/dist-es/navigation-breadcrumbs.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./navigation-breadcrumbs.css.ts.vanilla.js";
-var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b", _ = "_1y2v1nf5l";
+var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h", _ = "_1y2v1nf5r";
 export { v as current, f as link, i as list, _ as listItem };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "14.6.0";
+const o = "14.7.0";
 export { o as PACKAGE_VERSION };

package/dist-es/password-field.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./password-field.css.ts.vanilla.js";
-var f = "ptqylz1 _1y2v1nf68 _1y2v1nf6m _1y2v1nf70 _1y2v1nf7e _1y2v1nf9h _1y2v1nf5c";
-export { f as shadow };
+var y = "ptqylz1 _1y2v1nf6e _1y2v1nf6s _1y2v1nf76 _1y2v1nf7k _1y2v1nf9n _1y2v1nf5i";
+export { y as shadow };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./popover.css.ts.vanilla.js";
-var t = "_12igu661 _1y2v1nf5e _1y2v1nf9q _1y2v1nf9f _1y2v1nf9i _1y2v1nf2q", r = 12, a = "_12igu663 _1y2v1nf5e _1y2v1nf2 _1y2v1nf9o", f = "_12igu669 _1y2v1nf5e _1y2v1nf9t _1y2v1nfal", o = "_12igu665 _1y2v1nf5e _1y2v1nf7q _1y2v1nf2q _1y2v1nf9f _1y2v1nf9k", _ = "bottom", i = "top", e = 20, y = 16, g = 488, p = "_1y2v1nf5i _1y2v1nf5x _1y2v1nf85", u = "_12igu667";
-export { t as arrow, r as arrowSize, a as arrowWrapper, f as closeButtonIcon, o as container, _ as defaultPositionDesktop, i as defaultPositionMobile, e as distanceToTarget, y as marginLeftRightMobile, g as maxWidthDesktop, p as textAlign, u as textContent };
+var t = "_12igu661 _1y2v1nf5k _1y2v1nfa6 _1y2v1nf9l _1y2v1nf9o _1y2v1nf2t", a = 12, r = "_12igu663 _1y2v1nf5k _1y2v1nf2 _1y2v1nfa4", o = "_12igu669 _1y2v1nf5k _1y2v1nfa9 _1y2v1nfb1", _ = "_12igu665 _1y2v1nf5k _1y2v1nf7w _1y2v1nf2t _1y2v1nf9l _1y2v1nf9x", f = "bottom", i = "top", y = 20, e = 16, g = 488, l = "_1y2v1nf5o _1y2v1nf63 _1y2v1nf8b", p = "_12igu667";
+export { t as arrow, a as arrowSize, r as arrowWrapper, o as closeButtonIcon, _ as container, f as defaultPositionDesktop, i as defaultPositionMobile, y as distanceToTarget, e as marginLeftRightMobile, g as maxWidthDesktop, l as textAlign, p as textContent };

package/dist-es/progress-bar.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./progress-bar.css.ts.vanilla.js";
-var a = "_1y2v1nf85 _1y2v1nf9i", n = "_1y2v1nf9i _1y2v1nf88 _1y2v1nf3m", y = "j0y7r95", f = "j0y7r94";
-export { a as bar, n as barBackground, y as inverse, f as normal };
+var v = "_1y2v1nf8b _1y2v1nfa1", n = "_1y2v1nfa1 _1y2v1nf8e _1y2v1nf3r", y = "j0y7r95", f = "j0y7r94";
+export { v as bar, n as barBackground, y as inverse, f as normal };

package/dist-es/radio-button.css-mistica.js

@@ -1,10 +1,10 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./radio-button.css.ts.vanilla.js";
-var r = "c6dmsub", f = "c6dmsu5 _1y2v1nf5i _1y2v1nf9h", d = "c6dmsu7 _1y2v1nf3n", y = {
+var r = "c6dmsub", f = "c6dmsu5 _1y2v1nf5o _1y2v1nf9n", s = "c6dmsu7 _1y2v1nf3s", a = {
     default: "c6dmsu9",
     ios: "c6dmsua"
-}, _ = {
-    default: "c6dmsu2 c6dmsu1 _1y2v1nf5j _1y2v1nf5x _1y2v1nf5r _1y2v1nf9n _1y2v1nf60 _1y2v1nf9h _1y2v1nf2p",
-    ios: "c6dmsu3 c6dmsu1 _1y2v1nf5j _1y2v1nf5x _1y2v1nf5r _1y2v1nf9n _1y2v1nf60 _1y2v1nf9h _1y2v1nf2p"
-}, c = "c6dmsu8";
-export { r as disabled, f as innerCircle, d as innerCircleChecked, y as outerCircleCheckedVariants, _ as outerCircleVariants, c as radioButton };
+}, d = {
+    default: "c6dmsu2 c6dmsu1 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nfa3 _1y2v1nf66 _1y2v1nf9n _1y2v1nf2s",
+    ios: "c6dmsu3 c6dmsu1 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nfa3 _1y2v1nf66 _1y2v1nf9n _1y2v1nf2s"
+}, y = "c6dmsu8";
+export { r as disabled, f as innerCircle, s as innerCircleChecked, a as outerCircleCheckedVariants, d as outerCircleVariants, y as radioButton };

package/dist-es/responsive-layout.css-mistica.js

@@ -1,4 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./responsive-layout.css.ts.vanilla.js";
-var v = "_1y2v1nf7p", n = "_17lofg75 _1y2v1nf7p", a = "_1y2v1nf2r", e = "_17lofg73";
-export { v as container, n as fullWidth, a as inverseBackground, e as responsiveLayout };
+var a = {
+    inverse: "_1y2v1nf2w",
+    alternative: "_1y2v1nf31"
+}, n = "_1y2v1nf7v", o = "_17lofg76 _1y2v1nf7v", t = "_17lofg74";
+export { a as backgroundVariant, n as container, o as fullWidth, t as responsiveLayout };

package/dist-es/responsive-layout.js

@@ -50,26 +50,24 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import m from "classnames";
-import { getPrefixedDataAttributes as d } from "./utils/dom.js";
-import { container as f, inverseBackground as l, fullWidth as u, responsiveLayout as c } from "./responsive-layout.css-mistica.js";
-import { useIsInverseVariant as p, ThemeVariant as v } from "./theme-variant-context.js";
-import { jsx as s } from "./_virtual/jsx-runtime.js";
+import f from "classnames";
+import { getPrefixedDataAttributes as l } from "./utils/dom.js";
+import { container as u, backgroundVariant as c, fullWidth as p, responsiveLayout as v } from "./responsive-layout.css-mistica.js";
+import { useThemeVariant as h, ThemeVariant as x } from "./theme-variant-context.js";
+import { jsx as t } from "./_virtual/jsx-runtime.js";
 const N = (param)=>{
-    let { children: i , isInverse: t = !1 , backgroundColor: e , className: r , fullWidth: a , dataAttributes: n  } = param;
-    const o = p();
-    return /* @__PURE__ */ s(v, {
-        isInverse: t || o,
-        children: /* @__PURE__ */ s("div", _objectSpreadProps(_objectSpread({
-            className: m(f, r, {
-                [l]: t && !e
-            }),
-            style: e ? {
-                background: e
+    let { children: i , isInverse: r = !1 , variant: s , backgroundColor: a , className: o , fullWidth: m , dataAttributes: n  } = param;
+    const d = h(), e = s || r && "inverse" || void 0;
+    return /* @__PURE__ */ t(x, {
+        variant: e != null ? e : d,
+        children: /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
+            className: f(u, o, e && e !== "default" && c[e]),
+            style: a ? {
+                background: a
             } : void 0
-        }, d(n)), {
-            children: /* @__PURE__ */ s("div", {
-                className: a ? u : c,
+        }, l(n)), {
+            children: /* @__PURE__ */ t("div", {
+                className: m ? p : v,
                 children: i
             })
         }))

package/dist-es/screen-reader-only.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./screen-reader-only.css.ts.vanilla.js";
-var y = "gwdgwo1 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5e _1y2v1nf9o _1y2v1nf9g";
+var y = "gwdgwo1 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5k _1y2v1nfa4 _1y2v1nf9m";
 export { y as screenReaderOnly };

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

@@ -1,22 +1,22 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./select.css.ts.vanilla.js";
-var n = "_1sqpivvo _1y2v1nf5e _1y2v1nfan", f = "_1sqpivvq _1y2v1nf72 _1y2v1nf7g _1y2v1nf68 _1y2v1nf6m _1y2v1nf1o _1y2v1nf5i _1y2v1nf5x _1y2v1nf9n _1y2v1nf8f", i = "_1y2v1nf2w", y = {
+var n = "_1sqpivvo _1y2v1nf5k _1y2v1nfb3", i = "_1sqpivvq _1y2v1nf78 _1y2v1nf7m _1y2v1nf6e _1y2v1nf6s _1y2v1nf1r _1y2v1nf5o _1y2v1nf63 _1y2v1nfa3 _1y2v1nf8l", f = "_1y2v1nf31", y = {
     show: "_1sqpivv7",
     hide: "_1sqpivv8"
-}, s = "_1sqpivv6 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5e _1y2v1nf9k _1y2v1nf2q", a = {
-    default: "_1sqpivvd _1sqpivvc _1y2v1nf5d",
-    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nf5d"
-}, e = {
-    default: "_1sqpivvl _1sqpivvk _1y2v1nf5e _1y2v1nf9o _1y2v1nf9d _1y2v1nf1o",
-    disabled: "_1sqpivvm _1sqpivvk _1y2v1nf5e _1y2v1nf9o _1y2v1nf9d _1y2v1nf1o"
-}, p = {
-    default: "_1sqpivvh _1sqpivvg _1y2v1nf9g _1y2v1nf1o _1y2v1nf5c _1y2v1nf7p _1y2v1nf85",
-    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf9g _1y2v1nf1o _1y2v1nf5c _1y2v1nf7p _1y2v1nf85"
+}, s = "_1sqpivv6 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5k _1y2v1nf9u _1y2v1nf2t", a = {
+    default: "_1sqpivvd _1sqpivvc _1y2v1nf5j",
+    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nf5j"
 }, r = {
+    default: "_1sqpivvl _1sqpivvk _1y2v1nf5k _1y2v1nfa4 _1y2v1nf9j _1y2v1nf1r",
+    disabled: "_1sqpivvm _1sqpivvk _1y2v1nf5k _1y2v1nfa4 _1y2v1nf9j _1y2v1nf1r"
+}, p = {
+    default: "_1sqpivvh _1sqpivvg _1y2v1nf9m _1y2v1nf1r _1y2v1nf5i _1y2v1nf7v _1y2v1nf8b",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf9m _1y2v1nf1r _1y2v1nf5i _1y2v1nf7v _1y2v1nf8b"
+}, t = {
     top: "var(--_1sqpivv0)",
     left: "var(--_1sqpivv1)",
     transformOrigin: "var(--_1sqpivv2)",
     minWidth: "var(--_1sqpivv3)",
     maxHeight: "var(--_1sqpivv4)"
 };
-export { n as arrowDown, f as menuItem, i as menuItemSelected, y as optionsAnimationsVariants, s as optionsContainer, a as selectContainerVariants, e as selectTextVariants, p as selectVariants, r as vars };
+export { n as arrowDown, i as menuItem, f as menuItemSelected, y as optionsAnimationsVariants, s as optionsContainer, a as selectContainerVariants, r as selectTextVariants, p as selectVariants, t as vars };

package/dist-es/skeleton-base.js

@@ -1,13 +1,13 @@
 import { useIsInverseVariant as i } from "./theme-variant-context.js";
 import m from "classnames";
-import { sprinkles as l } from "./sprinkles.css-mistica.js";
+import { sprinkles as d } from "./sprinkles.css-mistica.js";
 import { vars as r } from "./skins/skin-contract.css-mistica.js";
-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;
+import { jsx as l } from "./_virtual/jsx-runtime.js";
+const b = (param)=>{
+    let { width: e = "100%" , height: o = 8 , radius: s = r.borderRadii.container , className: a , noBorderRadius: n = !1  } = param;
     const t = i();
-    return /* @__PURE__ */ c("div", {
-        className: m(a, l({
+    return /* @__PURE__ */ l("div", {
+        className: m(a, d({
             background: t ? r.colors.backgroundSkeletonInverse : r.colors.backgroundSkeleton
         })),
         style: {
@@ -18,4 +18,4 @@ const v = (param)=>{
         "aria-hidden": !0
     });
 };
-export { v as default };
+export { b 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 r = "zopolw2 _1y2v1nf5k", o = "_1y2v1nf60 _1y2v1nf62", f = "zopolw6 _1y2v1nf61", i = "_1y2v1nf5i _1y2v1nf5x _1y2v1nf5r";
-export { r as animation, o as circle, f as line, i as row };
+var o = "zopolw2 _1y2v1nf5q", r = "_1y2v1nf66 _1y2v1nf68", f = "zopolw6 _1y2v1nf67", y = "_1y2v1nf5o _1y2v1nf63 _1y2v1nf5x";
+export { o as animation, r as circle, f as line, y as row };

package/dist-es/skins/blau.js

@@ -44,6 +44,8 @@ const e = {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerBrand: e.blauBluePrimary,
+            backgroundContainerAlternative: e.blauBluePrimary20,
             backgroundBrand: e.blauBluePrimary,
             backgroundBrandSecondary: e.blauBluePrimary,
             backgroundOverlay: r(e.blauBlueSecondary, 0.75),
@@ -106,6 +108,7 @@ const e = {
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
@@ -142,7 +145,9 @@ const e = {
             background: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             backgroundContainer: e.darkModeGrey,
-            backgroundAlternative: e.darkModeGrey,
+            backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerAlternative: e.darkModeGrey,
+            backgroundAlternative: e.darkModeBlack,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey,
             backgroundSkeletonInverse: e.darkModeGrey,
@@ -187,6 +192,7 @@ const e = {
             neutralHigh: e.grey2,
             neutralMedium: e.grey5,
             neutralLow: e.darkModeGrey6,
+            neutralLowAlternative: e.darkModeGrey6,
             textPrimary: e.grey2,
             textPrimaryInverse: e.grey2,
             textSecondary: e.grey4,

package/dist-es/skins/defaults.js

@@ -0,0 +1,35 @@
+const t = {
+    text5: {
+        weight: "light"
+    },
+    text6: {
+        weight: "light"
+    },
+    text7: {
+        weight: "light"
+    },
+    text8: {
+        weight: "light"
+    },
+    text9: {
+        weight: "light"
+    },
+    text10: {
+        weight: "light"
+    },
+    cardTitle: {
+        weight: "regular"
+    }
+}, e = {
+    button: "4px",
+    input: "8px",
+    container: "8px",
+    legacyDisplay: "16px",
+    popup: "8px",
+    checkbox: "2px",
+    indicator: "999px",
+    sheet: "8px",
+    bar: "999px",
+    avatar: "50%"
+};
+export { e as defaultBorderRadiiConfig, t as defaultTextPresetsConfig };

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

@@ -49,6 +49,8 @@ const e = {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerBrand: e.movistarBlue,
+            backgroundContainerAlternative: e.grey1,
             backgroundBrand: e.movistarBlue,
             backgroundBrandSecondary: e.movistarBlue,
             backgroundOverlay: r(e.grey6, 0.6),
@@ -111,6 +113,7 @@ const e = {
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             promo: e.purple,
             highlight: e.pink,
             textPrimary: e.grey6,
@@ -146,13 +149,15 @@ const e = {
             appBarBackground: e.darkModeGrey,
             background: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
+            backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerAlternative: e.darkModeGrey,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.grey6,
             backgroundSkeletonInverse: e.grey6,
             navigationBarBackground: e.darkModeBlack,
-            backgroundAlternative: e.darkModeGrey,
+            backgroundAlternative: e.darkModeBlack,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
@@ -196,6 +201,7 @@ const e = {
             neutralHigh: e.grey2,
             neutralMedium: e.grey5,
             neutralLow: e.grey6,
+            neutralLowAlternative: e.grey6,
             textPrimary: e.grey2,
             textPrimaryInverse: e.grey2,
             textSecondary: e.grey4,

package/dist-es/skins/movistar.js

@@ -54,6 +54,8 @@ const e = {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerBrand: e.movistarBlue,
+            backgroundContainerAlternative: e.grey1,
             backgroundBrand: e.movistarBlue,
             backgroundBrandSecondary: e.movistarBlueDark,
             backgroundOverlay: r(e.movistarBlueDark, 0.6),
@@ -116,6 +118,7 @@ const e = {
             neutralHigh: e.movistarBlueDark,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             promo: e.purple,
             highlight: e.pink,
             textPrimary: e.movistarBlueDark,
@@ -150,13 +153,15 @@ const e = {
             appBarBackground: e.darkModeGrey,
             background: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
+            backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerAlternative: e.darkModeGrey,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.movistarBlueDark,
             backgroundSkeletonInverse: e.movistarBlueDark,
             navigationBarBackground: e.darkModeBlack,
-            backgroundAlternative: e.darkModeGrey,
+            backgroundAlternative: e.darkModeBlack,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.darkModeGrey6,
             borderHigh: e.darkModeGrey4,
@@ -201,6 +206,7 @@ const e = {
             neutralHigh: e.darkModeGrey2,
             neutralMedium: e.darkModeGrey5,
             neutralLow: e.movistarBlueDark,
+            neutralLowAlternative: e.movistarBlueDark,
             textPrimary: e.darkModeGrey2,
             textPrimaryInverse: e.darkModeGrey2,
             textSecondary: e.darkModeGrey4,

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

@@ -56,6 +56,8 @@ const e = {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerBrand: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
+            backgroundContainerAlternative: e.grey1,
             backgroundBrand: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
             backgroundBrandSecondary: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
             backgroundOverlay: r(e.grey6, 0.6),
@@ -117,6 +119,7 @@ const e = {
             inverse: e.white,
             neutralHigh: e.grey6,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             neutralMedium: e.grey5,
             promo: e.pink,
             highlight: e.pink,
@@ -152,6 +155,8 @@ const e = {
             appBarBackground: e.darkModeGrey,
             background: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
+            backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerAlternative: e.darkModeGrey,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
@@ -204,6 +209,7 @@ const e = {
             neutralHigh: e.grey2,
             neutralMedium: e.grey5,
             neutralLow: e.darkModeGrey6,
+            neutralLowAlternative: e.darkModeGrey6,
             textPrimary: e.grey2,
             textPrimaryInverse: e.grey2,
             textSecondary: e.grey4,

package/dist-es/skins/o2.js

@@ -40,12 +40,14 @@ const e = {
     darkModeGrey6: "#313235",
     darkModeO2BluePrimary: "#0020D6",
     darkModeO2BluePrimaryDark: "#000099"
-}, n = ()=>({
+}, t = ()=>({
         name: o,
         colors: {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerBrand: e.o2BluePrimary,
+            backgroundContainerAlternative: e.grey1,
             backgroundBrand: e.o2BluePrimary,
             backgroundBrandSecondary: e.o2BluePrimary,
             backgroundOverlay: r(e.grey6, 0.6),
@@ -108,6 +110,7 @@ const e = {
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             promo: e.o2Purple,
             highlight: e.o2Pink,
             textPrimary: e.grey6,
@@ -142,13 +145,15 @@ const e = {
             appBarBackground: e.darkModeGrey,
             background: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
+            backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerAlternative: e.darkModeGrey,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
             navigationBarBackground: e.darkModeBlack,
-            backgroundAlternative: e.darkModeGrey,
+            backgroundAlternative: e.darkModeBlack,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
@@ -196,6 +201,7 @@ const e = {
             neutralHigh: e.grey2,
             neutralMedium: e.grey5,
             neutralLow: e.darkModeGrey6,
+            neutralLowAlternative: e.darkModeGrey6,
             textPrimary: e.grey2,
             textPrimaryInverse: e.grey2,
             textSecondary: e.grey4,
@@ -222,4 +228,4 @@ const e = {
             neutralMediumInverse: e.grey5
         }
     });
-export { n as getO2Skin, e as palette };
+export { t as getO2Skin, e as palette };