@telefonica/mistica 16.3.0 → 16.4.0

package/dist/rating.css-mistica.js

@@ -16,10 +16,10 @@ _export(exports, {
         return v;
     },
     firstIcon: function() {
-        return e;
+        return t;
     },
     halfIconActive: function() {
-        return t;
+        return e;
     },
     halfIconContainer: function() {
         return n;
@@ -39,6 +39,6 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./rating.css.ts.vanilla.css-mistica.js");
-var a = "igrtie3 _1y2v1nfhk _1y2v1nfht _1y2v1nfhz", v = "igrtie9", e = "igrtiea", t = "igrtie8 _1y2v1nfhe", n = "_1y2v1nfhe", o = "igrtie6 _1y2v1nfhf", c = "igrtieb", f = "igrtiec", h = {
+var a = "igrtie3 _1y2v1nfho _1y2v1nfhx _1y2v1nfi3", v = "igrtie9", t = "igrtiea", e = "igrtie8 _1y2v1nfhi", n = "_1y2v1nfhi", o = "igrtie6 _1y2v1nfhj", c = "igrtieb", f = "igrtiec", h = {
     iconSize: "var(--igrtie0)"
 };

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

@@ -58,7 +58,7 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 var o = 16, a = 40, n = 32, t = {
-    inverse: "_1y2v1nf3z",
-    media: "_1y2v1nf7c",
-    alternative: "_1y2v1nf44"
-}, i = "_17lofg77", v = "_17lofg78", _ = "_17lofg7a", f = "_17lofg7g _1y2v1nfi7", l = "_17lofg79", g = "_17lofg73", s = "_17lofg72", M = "_17lofg75", p = "_17lofg74", C = "_17lofg7e", D = "_17lofg76";
+    inverse: "_1y2v1nf41",
+    media: "_1y2v1nf7g",
+    alternative: "_1y2v1nf46"
+}, i = "_17lofg77", v = "_17lofg78", _ = "_17lofg7a", f = "_17lofg7g _1y2v1nfib", l = "_17lofg79", g = "_17lofg73", s = "_17lofg72", M = "_17lofg75", p = "_17lofg74", C = "_17lofg7e", D = "_17lofg76";

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "screenReaderOnly", {
     enumerable: true,
     get: function() {
-        return f;
+        return y;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./screen-reader-only.css.ts.vanilla.css-mistica.js");
-var f = "gwdgwo1 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhf _1y2v1nfkl _1y2v1nfk2";
+var y = "gwdgwo1 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfhj _1y2v1nfkp _1y2v1nfk6";

package/dist/screen-reader-only.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import type { DataAttributes } from './utils/types';
 type Props = {
     children: React.ReactNode;
+    className?: string;
     dataAttributes?: DataAttributes;
 };
-declare const ScreenReaderOnly: ({ children, dataAttributes }: Props) => JSX.Element;
+declare const ScreenReaderOnly: ({ children, className, dataAttributes }: Props) => JSX.Element;
 export default ScreenReaderOnly;

package/dist/screen-reader-only.js

@@ -5,13 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return d;
+        return y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _screenreaderonlycssmistica = require("./screen-reader-only.css-mistica.js");
 const _dom = require("./utils/dom.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -105,18 +111,18 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const m = (param)=>{
-    let { children: t, dataAttributes: n } = param;
-    const s = (0, _dom.getPrefixedDataAttributes)(n, "ScreenReaderOnly");
-    if (_react.Children.count(t) === 1) {
-        const e = _react.Children.only(t);
-        if (/*#__PURE__*/ _react.isValidElement(e)) return /*#__PURE__*/ _react.cloneElement(e, _object_spread({
-            className: e.props.className ? e.props.className + " " + _screenreaderonlycssmistica.screenReaderOnly : _screenreaderonlycssmistica.screenReaderOnly
-        }, s));
+const c = (param)=>{
+    let { children: r, className: n, dataAttributes: m } = param;
+    const a = (0, _dom.getPrefixedDataAttributes)(m, "ScreenReaderOnly");
+    if (_react.Children.count(r) === 1) {
+        const t = _react.Children.only(r);
+        if (/*#__PURE__*/ _react.isValidElement(t)) return /*#__PURE__*/ _react.cloneElement(t, _object_spread({
+            className: (0, _classnames.default)(t.props.className, _screenreaderonlycssmistica.screenReaderOnly, n)
+        }, a));
     }
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        className: _screenreaderonlycssmistica.screenReaderOnly
-    }, s), {
-        children: t
+        className: (0, _classnames.default)(_screenreaderonlycssmistica.screenReaderOnly, n)
+    }, a), {
+        children: r
     }));
-}, d = m;
+}, y = c;

package/dist/search-field.js

@@ -145,8 +145,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const J = /*#__PURE__*/ _react.forwardRef((_param, P)=>{
-    var { disabled: m, error: u, helperText: d, name: p, label: n, optional: S, validate: I, onChange: e, onChangeValue: t, onBlur: R, value: f, defaultValue: F, dataAttributes: b } = _param, x = _object_without_properties(_param, [
+const J = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
+    var { disabled: m, error: d, helperText: u, name: p, label: n, optional: S, validate: F, onChange: e, onChangeValue: t, onBlur: I, value: l, defaultValue: R, dataAttributes: b } = _param, h = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -161,7 +161,7 @@ const J = /*#__PURE__*/ _react.forwardRef((_param, P)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: h, t: v } = (0, _hooks.useTheme)(), o = _react.useRef(), [y, k] = _react.useState(F || ""), s = typeof f < "u", l = s ? f : y, i = _react.useCallback((c, B)=>{
+    const { texts: P, t: v } = (0, _hooks.useTheme)(), o = _react.useRef(), [y, k] = _react.useState(R || ""), s = typeof l < "u", f = s ? l : y, i = _react.useCallback((c, B)=>{
         s || k(c), t == null || t(c, B);
     }, [
         s,
@@ -174,32 +174,33 @@ const J = /*#__PURE__*/ _react.forwardRef((_param, P)=>{
     ]), A = (0, _formcontext.useFieldProps)({
         name: p,
         label: n,
-        value: l,
+        value: f,
         defaultValue: void 0,
         processValue: (c)=>c,
-        helperText: d,
+        helperText: u,
         optional: S,
-        error: u,
+        error: d,
         disabled: m,
-        onBlur: R,
-        validate: I,
+        onBlur: I,
+        validate: F,
         onChange: e,
         onChangeValue: i
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(o, P),
+        ref: (0, _common.combineRefs)(o, x),
         startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {
             size: _iconbuttoncssmistica.iconSize.default
         }),
-        endIcon: l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
+        endIcon: f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
             Icon: _iconcloseregular.default,
-            "aria-label": h.formSearchClear || v(_texttokens.formSearchClear),
+            "aria-label": P.formSearchClear || v(_texttokens.formSearchClear),
             onPress: z
         }) : void 0
-    }, x, A), {
+    }, h, A), {
         type: "search",
         dataAttributes: _object_spread({
-            "component-name": "SearchField"
+            "component-name": "SearchField",
+            testid: "SearchField"
         }, b)
     }));
 }), Z = J;

package/dist/select.css-mistica.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     arrowDown: function() {
-        return i;
+        return f;
     },
     iconContainer: function() {
         return y;
     },
     menuItem: function() {
-        return a;
+        return s;
     },
     menuItemSelected: function() {
-        return s;
+        return a;
     },
     optionsAnimationsVariants: function() {
-        return r;
+        return p;
     },
     optionsContainer: function() {
-        return p;
+        return r;
     },
     selectContainerVariants: function() {
         return t;
@@ -44,18 +44,18 @@ require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./select.css.ts.vanilla.css-mistica.js");
-var i = "_1sqpivvo _1y2v1nfhf", y = "_1sqpivvp", a = "_1sqpivvr _1y2v1nfaa _1y2v1nfbj _1y2v1nf7m _1y2v1nf8v _1y2v1nf26 _1y2v1nfhk _1y2v1nfhz _1y2v1nfkk", s = "_1y2v1nf44", r = {
+var f = "_1sqpivvo _1y2v1nfhj", y = "_1sqpivvp", s = "_1sqpivvr _1y2v1nfae _1y2v1nfbn _1y2v1nf7q _1y2v1nf8z _1y2v1nf28 _1y2v1nfho _1y2v1nfi3 _1y2v1nfko", a = "_1y2v1nf46", p = {
     show: "_1sqpivv7",
     hide: "_1sqpivv8"
-}, p = "_1sqpivv6 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhg _1y2v1nfka _1y2v1nf3q", t = {
-    default: "_1sqpivvd _1sqpivvc _1y2v1nfhe _1y2v1nfkk",
-    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfhe _1y2v1nfkk"
+}, r = "_1sqpivv6 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfhk _1y2v1nfke _1y2v1nf3s", t = {
+    default: "_1sqpivvd _1sqpivvc _1y2v1nfhi _1y2v1nfko",
+    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfhi _1y2v1nfko"
 }, e = {
-    default: "_1sqpivvl _1sqpivvk _1y2v1nfhf _1y2v1nfkl _1y2v1nfjz _1y2v1nf26",
-    disabled: "_1sqpivvm _1sqpivvk _1y2v1nfhf _1y2v1nfkl _1y2v1nfjz _1y2v1nf26"
+    default: "_1sqpivvl _1sqpivvk _1y2v1nfhj _1y2v1nfkp _1y2v1nfk3 _1y2v1nf28",
+    disabled: "_1sqpivvm _1sqpivvk _1y2v1nfhj _1y2v1nfkp _1y2v1nfk3 _1y2v1nf28"
 }, q = {
-    default: "_1sqpivvh _1sqpivvg _1y2v1nf7d _1y2v1nf8m _1y2v1nfk2 _1y2v1nfkl _1y2v1nf26 _1y2v1nf7c _1y2v1nfi7",
-    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf7d _1y2v1nf8m _1y2v1nfk2 _1y2v1nfkl _1y2v1nf26 _1y2v1nf7c _1y2v1nfi7"
+    default: "_1sqpivvh _1sqpivvg _1y2v1nf7h _1y2v1nf8q _1y2v1nfk6 _1y2v1nfkp _1y2v1nf28 _1y2v1nf7g _1y2v1nfib",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf7h _1y2v1nf8q _1y2v1nfk6 _1y2v1nfkp _1y2v1nf28 _1y2v1nf7g _1y2v1nfib"
 }, o = {
     top: "var(--_1sqpivv0)",
     left: "var(--_1sqpivv1)",

package/dist/select.js

@@ -364,6 +364,7 @@ const ot = (param)=>{
                     "aria-hidden": !0,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _selectcssmistica.iconContainer,
+                        "data-testid": "endIcon",
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevrondownregular.default, {
                             size: te
                         })

package/dist/sheet-action-row.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "sheetActionRow", {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./sheet-action-row.css.ts.vanilla.css-mistica.js");
-var _ = "_4k81wx1 _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfjx _1y2v1nfhz";
+var _ = "_4k81wx1 _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfk1 _1y2v1nfi3";

package/dist/sheet-common.css-mistica.js

@@ -25,33 +25,33 @@ _export(exports, {
         return i;
     },
     closingOverlay: function() {
-        return r;
+        return a;
     },
     closingSheet: function() {
-        return a;
+        return r;
     },
     handle: function() {
         return t;
     },
     handleContainer: function() {
-        return h;
+        return o;
     },
     modalCloseButton: function() {
-        return l;
+        return h;
     },
     overlay: function() {
-        return p;
+        return m;
     },
     stickyButtons: function() {
-        return m;
+        return p;
     },
     stickyTitle: function() {
-        return o;
+        return d;
     },
     transitionDuration: function() {
-        return d;
+        return l;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./sheet-common.css.ts.vanilla.css-mistica.js");
-var f = "pidemf6 _1y2v1nf3p", y = "pidemf4 _1y2v1nfhg _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", _ = "pidemf9 _1y2v1nf81 _1y2v1nfhk _1y2v1nfhq", e = "pidemfq", i = "_1y2v1nfkq _1y2v1nfi6 _1y2v1nfhk _1y2v1nfhq", r = "pidemfl", a = "pidemf7", t = "_1y2v1nf4y _1y2v1nfig _1y2v1nfir _1y2v1nfk4", h = "pidemfc _1y2v1nf7m _1y2v1nf8v _1y2v1nfhf _1y2v1nfkr _1y2v1nfj1 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", l = "pidemff _1y2v1nf7y _1y2v1nf97 _1y2v1nfag _1y2v1nfbp _1y2v1nfhf _1y2v1nfkr _1y2v1nfll", p = "pidemfk _1y2v1nfhg _1y2v1nf41 _1y2v1nfkr _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", m = "pidemfp _1y2v1nfhi _1y2v1nfm0 _1y2v1nf3p", o = "pidemfn _1y2v1nfhi _1y2v1nfkr _1y2v1nf3p", d = 400;
+var f = "pidemf6 _1y2v1nf3r", y = "pidemf4 _1y2v1nfhk _1y2v1nfla _1y2v1nflp _1y2v1nfm4", _ = "pidemf9 _1y2v1nf85 _1y2v1nfho _1y2v1nfhu", e = "pidemfq", i = "_1y2v1nfku _1y2v1nfia _1y2v1nfho _1y2v1nfhu", a = "pidemfl", r = "pidemf7", t = "_1y2v1nf50 _1y2v1nfik _1y2v1nfiv _1y2v1nfk8", o = "pidemfc _1y2v1nf7q _1y2v1nf8z _1y2v1nfhj _1y2v1nfkv _1y2v1nfj5 _1y2v1nfib _1y2v1nfho _1y2v1nfhx", h = "pidemff _1y2v1nf82 _1y2v1nf9b _1y2v1nfak _1y2v1nfbt _1y2v1nfhj _1y2v1nfkv _1y2v1nflp", m = "pidemfk _1y2v1nfhk _1y2v1nf43 _1y2v1nfkv _1y2v1nfla _1y2v1nflp _1y2v1nfm4", p = "pidemfp _1y2v1nfhm _1y2v1nfm4 _1y2v1nf3r", d = "pidemfn _1y2v1nfhm _1y2v1nfkv _1y2v1nf3r", l = 400;

package/dist/sheet-info.css-mistica.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "infoItemIcon", {
     enumerable: true,
     get: function() {
-        return f;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfiw";
+var o = "_1y2v1nfho _1y2v1nfi3 _1y2v1nfj0";

package/dist/skeletons.css-mistica.js

@@ -13,21 +13,21 @@ _export(exports, {
         return r;
     },
     background: function() {
-        return a;
+        return i;
     },
     circle: function() {
-        return f;
+        return o;
     },
     line: function() {
-        return i;
+        return a;
     },
     row: function() {
-        return o;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./skeletons.css.ts.vanilla.css-mistica.js");
-var r = "zopolw6 _1y2v1nfhm", a = {
-    default: "_1y2v1nf42",
-    inverse: "_1y2v1nf43"
-}, f = "_1y2v1nfi2 _1y2v1nfi4", i = "zopolwa _1y2v1nfi3", o = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht";
+var r = "zopolw6 _1y2v1nfhq", i = {
+    default: "_1y2v1nf44",
+    inverse: "_1y2v1nf45"
+}, o = "_1y2v1nfi6 _1y2v1nfi8", a = "zopolwa _1y2v1nfi7", f = "_1y2v1nfho _1y2v1nfi3 _1y2v1nfhx";

package/dist/skins/blau.js

@@ -126,11 +126,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.blauRed,
             barTrack: e.grey2,
+            barTrackInverse: (0, _color.applyAlpha)(e.grey6, 0.2),
             loadingBar: e.blauBlueSecondary,
             loadingBarBackground: e.blauBlueSecondary10,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.blauBlueSecondary10,
             iosControlKnob: e.white,
+            controlKnobInverse: e.blauBlueSecondary,
             divider: e.grey2,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.blauBluePrimary,
@@ -258,11 +260,13 @@ const e = {
             controlActivatedInverse: e.blauBlueSecondary,
             controlError: e.blauRed,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.blauBluePrimary,
             loadingBarBackground: e.darkModeGrey,
             toggleAndroidInactive: e.grey5,
             toggleAndroidBackgroundActive: e.blauBlueSecondary30,
             iosControlKnob: e.grey2,
+            controlKnobInverse: e.grey2,
             divider: (0, _color.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,

package/dist/skins/movistar.js

@@ -144,11 +144,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.pepper55,
             barTrack: e.grey3,
+            barTrackInverse: (0, _color.applyAlpha)(e.black, 0.14),
             loadingBar: e.movistarBlue,
             loadingBarBackground: e.grey2,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.movistarBlue20,
             iosControlKnob: e.white,
+            controlKnobInverse: e.movistarBlue,
             divider: e.grey3,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.movistarBlue,
@@ -276,11 +278,13 @@ const e = {
             controlActivatedInverse: e.movistarBlue,
             controlError: e.pepper45,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.movistarBlue,
             loadingBarBackground: e.darkModeGrey6,
             toggleAndroidInactive: e.darkModeGrey2,
             toggleAndroidBackgroundActive: e.movistarBlue20,
             iosControlKnob: e.darkModeGrey2,
+            controlKnobInverse: e.darkModeGrey2,
             divider: (0, _color.applyAlpha)(e.white, 0.1),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.1),
             navigationBarDivider: e.darkModeBlack,

package/dist/skins/o2-new.js

@@ -134,11 +134,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.o2Red60,
             barTrack: e.grey30,
+            barTrackInverse: (0, _color.applyAlpha)(e.white, 0.3),
             loadingBar: e.beyondBlue,
             loadingBarBackground: e.grey20,
             toggleAndroidInactive: e.grey30,
             toggleAndroidBackgroundActive: e.beyondBlue15,
             iosControlKnob: e.white,
+            controlKnobInverse: e.beyondBlue,
             divider: e.grey30,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.darkBlue,
@@ -266,11 +268,13 @@ const e = {
             controlActivatedInverse: e.darkModeBeyondBlue,
             controlError: e.o2Red45,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.darkModeBeyondBlue,
             loadingBarBackground: e.darkModeGrey6,
             toggleAndroidInactive: e.grey20,
             toggleAndroidBackgroundActive: e.beyondBlue15,
             iosControlKnob: e.grey30,
+            controlKnobInverse: e.grey30,
             badge: e.o2Red65,
             feedbackErrorBackground: e.o2Red60,
             feedbackInfoBackground: e.darkModeGrey6,

package/dist/skins/o2.js

@@ -131,11 +131,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
+            barTrackInverse: (0, _color.applyAlpha)(e.white, 0.3),
             loadingBar: e.o2BluePrimary,
             loadingBarBackground: e.grey1,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.o2BluePrimary15,
             iosControlKnob: e.white,
+            controlKnobInverse: e.o2BluePrimary,
             divider: e.grey2,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.o2BluePrimary,
@@ -263,11 +265,13 @@ const e = {
             controlActivatedInverse: e.o2BluePrimary30,
             controlError: e.pepper,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.darkModeO2BluePrimary,
             loadingBarBackground: e.darkModeGrey6,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.o2BlueLight30,
             iosControlKnob: e.grey2,
+            controlKnobInverse: e.grey2,
             badge: e.pepper60,
             feedbackErrorBackground: e.pepper,
             feedbackInfoBackground: e.darkModeGrey6,