@telefonica/mistica 14.5.0 → 14.7.0

package/dist/popover.css-mistica.js

@@ -10,18 +10,18 @@ function _export(target, all) {
 }
 _export(exports, {
     arrow: ()=>t,
-    arrowSize: ()=>r,
-    arrowWrapper: ()=>a,
-    closeButtonIcon: ()=>f,
-    container: ()=>o,
-    defaultPositionDesktop: ()=>_,
+    arrowSize: ()=>a,
+    arrowWrapper: ()=>r,
+    closeButtonIcon: ()=>o,
+    container: ()=>_,
+    defaultPositionDesktop: ()=>f,
     defaultPositionMobile: ()=>i,
-    distanceToTarget: ()=>e,
-    marginLeftRightMobile: ()=>y,
+    distanceToTarget: ()=>y,
+    marginLeftRightMobile: ()=>e,
     maxWidthDesktop: ()=>g,
-    textAlign: ()=>p,
-    textContent: ()=>u
+    textAlign: ()=>l,
+    textContent: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./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";
+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";

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

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    bar: ()=>a,
+    bar: ()=>v,
     barBackground: ()=>n,
     inverse: ()=>y,
     normal: ()=>f
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./progress-bar.css.ts.vanilla.js");
-var a = "_1y2v1nf85 _1y2v1nf9i", n = "_1y2v1nf9i _1y2v1nf88 _1y2v1nf3m", y = "j0y7r95", f = "j0y7r94";
+var v = "_1y2v1nf8b _1y2v1nfa1", n = "_1y2v1nfa1 _1y2v1nf8e _1y2v1nf3r", y = "j0y7r95", f = "j0y7r94";

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

@@ -11,17 +11,17 @@ function _export(target, all) {
 _export(exports, {
     disabled: ()=>r,
     innerCircle: ()=>f,
-    innerCircleChecked: ()=>d,
-    outerCircleCheckedVariants: ()=>y,
-    outerCircleVariants: ()=>_,
-    radioButton: ()=>c
+    innerCircleChecked: ()=>s,
+    outerCircleCheckedVariants: ()=>a,
+    outerCircleVariants: ()=>d,
+    radioButton: ()=>y
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./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";
+}, d = {
+    default: "c6dmsu2 c6dmsu1 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nfa3 _1y2v1nf66 _1y2v1nf9n _1y2v1nf2s",
+    ios: "c6dmsu3 c6dmsu1 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nfa3 _1y2v1nf66 _1y2v1nf9n _1y2v1nf2s"
+}, y = "c6dmsu8";

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

@@ -9,11 +9,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>v,
-    fullWidth: ()=>n,
-    inverseBackground: ()=>a,
-    responsiveLayout: ()=>e
+    backgroundVariant: ()=>a,
+    container: ()=>n,
+    fullWidth: ()=>o,
+    responsiveLayout: ()=>t
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
-var v = "_1y2v1nf7p", n = "_17lofg75 _1y2v1nf7p", a = "_1y2v1nf2r", e = "_17lofg73";
+var a = {
+    inverse: "_1y2v1nf2w",
+    alternative: "_1y2v1nf31"
+}, n = "_1y2v1nf7v", o = "_17lofg76 _1y2v1nf7v", t = "_17lofg74";

package/dist/responsive-layout.css.d.ts

@@ -6,6 +6,9 @@ export declare const vars: {
     sideMargin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const container: string;
-export declare const inverseBackground: string;
+export declare const backgroundVariant: {
+    inverse: string;
+    alternative: string;
+};
 export declare const responsiveLayout: string;
 export declare const fullWidth: string;

package/dist/responsive-layout.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import type { Variant } from './theme-variant-context';
 import type { DataAttributes } from './utils/types';
 type Props = {
     children: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
     isInverse?: boolean;
+    variant?: Variant;
     backgroundColor?: string;
     dataAttributes?: DataAttributes;
 };

package/dist/responsive-layout.js

@@ -69,20 +69,18 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 const N = (param)=>{
-    let { children: i , isInverse: t = !1 , backgroundColor: e , className: r , fullWidth: a , dataAttributes: n  } = param;
-    const o = (0, _themeVariantContextJs.useIsInverseVariant)();
+    let { children: i , isInverse: r = !1 , variant: s , backgroundColor: a , className: o , fullWidth: m , dataAttributes: n  } = param;
+    const d = (0, _themeVariantContextJs.useThemeVariant)(), e = s || r && "inverse" || void 0;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
-        isInverse: t || o,
+        variant: e != null ? e : d,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-            className: (0, _classnames.default)(_responsiveLayoutCssMisticaJs.container, r, {
-                [_responsiveLayoutCssMisticaJs.inverseBackground]: t && !e
-            }),
-            style: e ? {
-                background: e
+            className: (0, _classnames.default)(_responsiveLayoutCssMisticaJs.container, o, e && e !== "default" && _responsiveLayoutCssMisticaJs.backgroundVariant[e]),
+            style: a ? {
+                background: a
             } : void 0
         }, (0, _domJs.getPrefixedDataAttributes)(n)), {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a ? _responsiveLayoutCssMisticaJs.fullWidth : _responsiveLayoutCssMisticaJs.responsiveLayout,
+                className: m ? _responsiveLayoutCssMisticaJs.fullWidth : _responsiveLayoutCssMisticaJs.responsiveLayout,
                 children: i
             })
         }))

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

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "screenReaderOnly", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./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";

package/dist/select.css-mistica.js

@@ -10,30 +10,30 @@ function _export(target, all) {
 }
 _export(exports, {
     arrowDown: ()=>n,
-    menuItem: ()=>f,
-    menuItemSelected: ()=>i,
+    menuItem: ()=>i,
+    menuItemSelected: ()=>f,
     optionsAnimationsVariants: ()=>y,
     optionsContainer: ()=>s,
     selectContainerVariants: ()=>a,
-    selectTextVariants: ()=>e,
+    selectTextVariants: ()=>r,
     selectVariants: ()=>p,
-    vars: ()=>r
+    vars: ()=>t
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./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)",

package/dist/skeleton-base.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>v
+    get: ()=>b
 });
 const _themeVariantContextJs = require("./theme-variant-context.js");
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -16,8 +16,8 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const v = (param)=>{
-    let { width: e = "100%" , height: o = 8 , radius: s = 8 , className: a , noBorderRadius: n = !1  } = param;
+const b = (param)=>{
+    let { width: e = "100%" , height: o = 8 , radius: s = _skinContractCssMisticaJs.vars.borderRadii.container , 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)({

package/dist/skeletons.css-mistica.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    animation: ()=>r,
-    circle: ()=>o,
+    animation: ()=>o,
+    circle: ()=>r,
     line: ()=>f,
-    row: ()=>i
+    row: ()=>y
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./skeletons.css.ts.vanilla.js");
-var r = "zopolw2 _1y2v1nf5k", o = "_1y2v1nf60 _1y2v1nf62", f = "zopolw6 _1y2v1nf61", i = "_1y2v1nf5i _1y2v1nf5x _1y2v1nf5r";
+var o = "zopolw2 _1y2v1nf5q", r = "_1y2v1nf66 _1y2v1nf68", f = "zopolw6 _1y2v1nf67", y = "_1y2v1nf5o _1y2v1nf63 _1y2v1nf5x";

package/dist/skins/blau.js

@@ -58,6 +58,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: (0, _colorJs.applyAlpha)(e.blauBlueSecondary, 0.75),
@@ -120,6 +122,7 @@ const e = {
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
@@ -156,7 +159,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: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey,
             backgroundSkeletonInverse: e.darkModeGrey,
@@ -201,6 +206,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/skins/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { BorderRadiiConfig, TextPresetsConfig } from './types';
+export declare const defaultTextPresetsConfig: TextPresetsConfig;
+export declare const defaultBorderRadiiConfig: BorderRadiiConfig;

package/dist/skins/defaults.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    defaultBorderRadiiConfig: ()=>e,
+    defaultTextPresetsConfig: ()=>t
+});
+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%"
+};

package/dist/skins/movistar-legacy.js

@@ -63,6 +63,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: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
@@ -125,6 +127,7 @@ const e = {
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             promo: e.purple,
             highlight: e.pink,
             textPrimary: e.grey6,
@@ -160,13 +163,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: (0, _colorJs.applyAlpha)(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,
@@ -210,6 +215,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/skins/movistar.js

@@ -68,6 +68,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: (0, _colorJs.applyAlpha)(e.movistarBlueDark, 0.6),
@@ -130,6 +132,7 @@ const e = {
             neutralHigh: e.movistarBlueDark,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             promo: e.purple,
             highlight: e.pink,
             textPrimary: e.movistarBlueDark,
@@ -164,13 +167,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: (0, _colorJs.applyAlpha)(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,
@@ -215,6 +220,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/skins/o2-classic.js

@@ -70,6 +70,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: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
@@ -131,6 +133,7 @@ const e = {
             inverse: e.white,
             neutralHigh: e.grey6,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             neutralMedium: e.grey5,
             promo: e.pink,
             highlight: e.pink,
@@ -166,6 +169,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: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
@@ -218,6 +223,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/skins/o2.js

@@ -9,7 +9,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getO2Skin: ()=>n,
+    getO2Skin: ()=>t,
     palette: ()=>e
 });
 const _colorJs = require("../utils/color.js");
@@ -54,12 +54,14 @@ const e = {
     darkModeGrey6: "#313235",
     darkModeO2BluePrimary: "#0020D6",
     darkModeO2BluePrimaryDark: "#000099"
-}, n = ()=>({
+}, t = ()=>({
         name: _constantsJs.O2_SKIN,
         colors: {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerBrand: e.o2BluePrimary,
+            backgroundContainerAlternative: e.grey1,
             backgroundBrand: e.o2BluePrimary,
             backgroundBrandSecondary: e.o2BluePrimary,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
@@ -122,6 +124,7 @@ const e = {
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
+            neutralLowAlternative: e.grey2,
             promo: e.o2Purple,
             highlight: e.o2Pink,
             textPrimary: e.grey6,
@@ -156,13 +159,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: (0, _colorJs.applyAlpha)(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,
@@ -210,6 +215,7 @@ const e = {
             neutralHigh: e.grey2,
             neutralMedium: e.grey5,
             neutralLow: e.darkModeGrey6,
+            neutralLowAlternative: e.darkModeGrey6,
             textPrimary: e.grey2,
             textPrimaryInverse: e.grey2,
             textSecondary: e.grey4,