@telefonica/mistica 11.3.0 → 11.4.0

package/dist/feedback.js

@@ -354,7 +354,7 @@ var FeedbackScreen = function FeedbackScreen(param) {
     var title = param.title, description = param.description, children = param.children, primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, hapticFeedback = param.hapticFeedback, icon = param.icon, _animateText = param.animateText, animateText = _animateText === void 0 ? false : _animateText, unstable_inlineInDesktop = param.unstable_inlineInDesktop, imageUrl = param.imageUrl, imageFit = param.imageFit, dataAttributes = param.dataAttributes;
     useHapticFeedback(hapticFeedback);
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var ref = (0, _hooks).useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides;
+    var ref = (0, _hooks).useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode;
     var windowHeight = (0, _hooks).useWindowHeight();
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(typeof self !== "undefined"), 2), isServerSide = ref1[0], setIsServerSide = ref1[1];
@@ -417,8 +417,8 @@ var FeedbackScreen = function FeedbackScreen(param) {
                     button: primaryButton,
                     secondaryButton: secondaryButton,
                     link: link,
-                    footerBgColor: isInverse ? colors.backgroundFeedbackBottom : undefined,
-                    containerBgColor: isInverse ? colors.navigationBarBackground : undefined,
+                    footerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
+                    containerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
                     onChangeFooterHeight: setFooterHeight,
                     children: feedbackContent
                 })

package/dist/fixed-footer-layout.js

@@ -110,9 +110,13 @@ var waitForSwitchTransitionToStart = function waitForSwitchTransitionToStart(fn)
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return _defineProperty({
         footer: {
-            width: "100%"
+            width: "100%",
+            backgroundColor: theme.colors.background,
+            transition: "background 0.2s linear, box-shadow 0.2s linear"
+        },
+        elevated: {
+            backgroundColor: theme.colors.backgroundContainer
         },
-        shadow: {},
         withoutFooter: {
             display: "none"
         },
@@ -133,19 +137,18 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             bottom: 0,
             zIndex: 1
         },
-        shadow: {
-            boxShadow: "0 -3px 8px 0 rgba(0, 0, 0, 0.15)"
+        elevated: {
+            boxShadow: "0 -2px 8px 0 rgba(0, 0, 0, 0.10)"
         }
     });
 });
 var FixedFooterLayout = function FixedFooterLayout(param) {
     var _isFooterVisible = param.isFooterVisible, isFooterVisible = _isFooterVisible === void 0 ? true : _isFooterVisible, footer = param.footer, _footerHeight = param.footerHeight, footerHeight = _footerHeight === void 0 ? "auto" : _footerHeight, footerBgColor = param.footerBgColor, containerBgColor = param.containerBgColor, children = param.children, onChangeFooterHeight = param.onChangeFooterHeight;
-    var ref = _slicedToArray(React.useState(false), 2), displayShadow = ref[0], setDisplayShadow = ref[1];
+    var ref = _slicedToArray(React.useState(false), 2), displayElevation = ref[0], setDisplayElevation = ref[1];
     var containerRef = React.useRef(null);
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var platformOverrides = (0, _hooks).useTheme().platformOverrides;
     var ref1 = (0, _hooks).useElementDimensions(), realHeight = ref1.height, ref2 = ref1.ref;
-    var colors = (0, _hooks).useTheme().colors;
     (0, _hooks).useIsomorphicLayoutEffect(function() {
         onChangeFooterHeight === null || onChangeFooterHeight === void 0 ? void 0 : onChangeFooterHeight(realHeight);
     }, [
@@ -154,7 +157,7 @@ var FixedFooterLayout = function FixedFooterLayout(param) {
     ]);
     React.useEffect(function() {
         var scrollable = (0, _dom).getScrollableParentElement(containerRef.current);
-        var shouldDisplayShadow = function shouldDisplayShadow() {
+        var shouldDisplayElevation = function shouldDisplayElevation() {
             if ((0, _platform).isRunningAcceptanceTest(platformOverrides)) {
                 return false;
             }
@@ -163,19 +166,20 @@ var FixedFooterLayout = function FixedFooterLayout(param) {
             }
             return false;
         };
-        var checkDisplayShadow = (0, _debounce).default(function() {
-            setDisplayShadow(shouldDisplayShadow());
+        var checkDisplayElevation = (0, _debounce).default(function() {
+            setDisplayElevation(shouldDisplayElevation());
         }, 50, {
-            leading: true
+            leading: true,
+            maxWait: 200
         });
-        var transitionAwaiter = waitForSwitchTransitionToStart(checkDisplayShadow);
+        var transitionAwaiter = waitForSwitchTransitionToStart(checkDisplayElevation);
         var scrollEventTarget = getScrollEventTarget(scrollable);
-        (0, _dom).addPassiveEventListener(scrollEventTarget, "resize", checkDisplayShadow);
-        (0, _dom).addPassiveEventListener(scrollEventTarget, "scroll", checkDisplayShadow);
+        (0, _dom).addPassiveEventListener(scrollEventTarget, "resize", checkDisplayElevation);
+        (0, _dom).addPassiveEventListener(scrollEventTarget, "scroll", checkDisplayElevation);
         return function() {
-            checkDisplayShadow.cancel();
-            (0, _dom).removePassiveEventListener(scrollEventTarget, "scroll", checkDisplayShadow);
-            (0, _dom).removePassiveEventListener(scrollEventTarget, "resize", checkDisplayShadow);
+            checkDisplayElevation.cancel();
+            (0, _dom).removePassiveEventListener(scrollEventTarget, "scroll", checkDisplayElevation);
+            (0, _dom).removePassiveEventListener(scrollEventTarget, "resize", checkDisplayElevation);
             transitionAwaiter.cancel();
         };
     }, [
@@ -198,12 +202,12 @@ var FixedFooterLayout = function FixedFooterLayout(param) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 ref: ref2,
-                className: (0, _classnames).default(classes.footer, (_obj = {}, _defineProperty(_obj, classes.withoutFooter, !isFooterVisible), _defineProperty(_obj, classes.shadow, displayShadow), _obj)),
+                className: (0, _classnames).default(classes.footer, (_obj = {}, _defineProperty(_obj, classes.withoutFooter, !isFooterVisible), _defineProperty(_obj, classes.elevated, displayElevation), _obj)),
                 /**
                  * This style is inline to avoid creating a class that may collide with
                  * other fixed footers during the page animation transition
                  */ style: {
-                    background: isTabletOrSmaller ? footerBgColor || colors.backgroundContainer : undefined
+                    background: isTabletOrSmaller ? footerBgColor : undefined
                 },
                 "data-testid": "fixed-footer".concat(isFooterVisible ? "-visible" : "-hidden"),
                 /**

package/dist/list.d.ts

@@ -15,7 +15,11 @@ interface CommonProps {
     extra?: React.ReactNode;
     dataAttributes?: DataAttributes;
     disabled?: boolean;
+    withChevron?: boolean;
 }
+declare type Right = (({ centerY }: {
+    centerY: boolean;
+}) => React.ReactNode) | React.ReactNode;
 declare type ControlProps = {
     name?: string;
     value?: boolean;
@@ -31,7 +35,7 @@ interface BasicRowContentProps extends CommonProps {
     radioValue?: undefined;
     newTab?: undefined;
     fullPageOnWebView?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface SwitchRowContentProps extends CommonProps {
     href?: undefined;
@@ -76,7 +80,7 @@ interface HrefRowContentProps extends CommonProps {
     newTab?: boolean;
     onPress?: undefined;
     to?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface ToRowContentProps extends CommonProps {
     checkbox?: undefined;
@@ -89,7 +93,7 @@ interface ToRowContentProps extends CommonProps {
     replace?: boolean;
     href?: undefined;
     onPress?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface OnPressRowContentProps extends CommonProps {
     checkbox?: undefined;
@@ -100,7 +104,7 @@ interface OnPressRowContentProps extends CommonProps {
     onPress: () => void;
     href?: undefined;
     to?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 declare type RowContentProps = BasicRowContentProps | SwitchRowContentProps | RadioRowContentProps | CheckboxRowContentProps | HrefRowContentProps | ToRowContentProps | OnPressRowContentProps;
 export declare const Row: React.ForwardRefExoticComponent<RowContentProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;

package/dist/list.js

@@ -214,8 +214,21 @@ var useStyles = (0, _jss).createUseStyles(function(param1) {
         }
     };
 });
+var renderRight = function renderRight(right, centerY) {
+    if (typeof right === "function") return right === null || right === void 0 ? void 0 : right({
+        centerY: centerY
+    });
+    return centerY ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            height: "100%"
+        },
+        children: right
+    }) : right;
+};
 var Content = function Content(param) {
-    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? "basic" : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
+    var withChevron = param.withChevron, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? "basic" : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -228,7 +241,7 @@ var Content = function Content(param) {
         description,
         extra
     ].filter(Boolean).length;
-    var shouldCenter = numTextLines === 1;
+    var centerY = numTextLines === 1;
     var renderBadge = function renderBadge() {
         if (!badge) {
             return null;
@@ -243,31 +256,6 @@ var Content = function Content(param) {
             })
         });
     };
-    var renderRight = function renderRight() {
-        switch(type){
-            case "chevron":
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
-                    paddingLeft: 16,
-                    className: (0, _classnames).default(classes.center, _defineProperty({}, classes.disabled, disabled)),
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
-                        color: isInverse ? colors.inverse : colors.neutralMedium,
-                        direction: "right"
-                    })
-                });
-            case "control":
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.right,
-                    children: right
-                });
-            case "custom":
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
-                    children: right
-                });
-            default:
-                return null;
-        }
-    };
     var _obj;
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
         paddingY: 16,
@@ -275,7 +263,7 @@ var Content = function Content(param) {
         children: [
             asset && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingRight: 16,
-                className: (0, _classnames).default((_obj = {}, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
+                className: (0, _classnames).default((_obj = {}, _defineProperty(_obj, classes.center, centerY), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.asset,
                     children: asset
@@ -284,7 +272,7 @@ var Content = function Content(param) {
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.rowBody, _defineProperty({}, classes.disabled, disabled)),
                 style: {
-                    justifyContent: shouldCenter ? "center" : "flex-start"
+                    justifyContent: centerY ? "center" : "flex-start"
                 },
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
                     space: 4,
@@ -327,7 +315,40 @@ var Content = function Content(param) {
                 })
             }),
             renderBadge(),
-            renderRight()
+            type === "chevron" && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingLeft: 16,
+                className: (0, _classnames).default(classes.center, _defineProperty({}, classes.disabled, disabled)),
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                    color: isInverse ? colors.inverse : colors.neutralMedium,
+                    direction: "right"
+                })
+            }),
+            type === "control" && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                className: classes.right,
+                children: renderRight(right, centerY)
+            }),
+            type === "custom" && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
+                        children: renderRight(right, centerY)
+                    }),
+                    withChevron && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                            style: {
+                                display: "flex",
+                                alignItems: "center",
+                                height: "100%"
+                            },
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                                color: isInverse ? colors.inverse : colors.neutralMedium,
+                                direction: "right"
+                            })
+                        })
+                    })
+                ]
+            })
         ]
     });
 };
@@ -381,7 +402,8 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
             right: right,
             extra: extra,
             labelId: labelId,
-            disabled: disabled
+            disabled: disabled,
+            withChevron: !!props1.onPress || !!props1.href || !!props1.to
         });
     };
     var renderTouchableContent = function renderTouchableContent(props) {
@@ -487,10 +509,12 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                         children: renderContent({
                             labelId: labelId,
                             type: "control",
-                            right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            right: function right() {
+                                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }
@@ -518,10 +542,12 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                         paddingX: 16,
                         children: renderContent({
                             type: "control",
-                            right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            right: function right() {
+                                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }

package/dist/list.js.flow

@@ -16,7 +16,13 @@ declare type CommonProps = {
   extra?: React.Node,
   dataAttributes?: DataAttributes,
   disabled?: boolean,
+  withChevron?: boolean,
 };
+declare type Right =
+  | ((x: {
+      centerY: boolean,
+    }) => React.Node)
+  | React.Node;
 declare type ControlProps = {
   name?: string,
   value?: boolean,
@@ -25,7 +31,7 @@ declare type ControlProps = {
 };
 declare type BasicRowContentProps = {
   ...$Exact<CommonProps>,
-  right?: React.Node,
+  right?: Right,
 };
 declare type SwitchRowContentProps = {
   ...$Exact<CommonProps>,
@@ -46,7 +52,7 @@ declare type HrefRowContentProps = {
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   href: string,
   newTab?: boolean,
-  right?: React.Node,
+  right?: Right,
 };
 declare type ToRowContentProps = {
   ...$Exact<CommonProps>,
@@ -54,13 +60,13 @@ declare type ToRowContentProps = {
   to: string,
   fullPageOnWebView?: boolean,
   replace?: boolean,
-  right?: React.Node,
+  right?: Right,
 };
 declare type OnPressRowContentProps = {
   ...$Exact<CommonProps>,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   onPress: () => void,
-  right?: React.Node,
+  right?: Right,
 };
 declare type RowContentProps =
   | BasicRowContentProps

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "11.3.0";
+var PACKAGE_VERSION = "11.4.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/skins/o2-classic.js

@@ -176,7 +176,7 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             borderLight: palette.darkModeBlack,
             border: palette.darkModeGrey,
             borderDark: palette.grey5,
-            borderSelected: palette.o2Gem,
+            borderSelected: palette.o2SkyBlue,
             buttonLinkBackgroundSelected: (0, _color).applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.o2SkyBlue,
@@ -194,11 +194,11 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             textLinkInverse: palette.o2SkyBlueLight,
             textLinkSnackbar: palette.o2SkyBlueLight,
             control: palette.darkModeGrey6,
-            controlActivated: palette.o2Gem,
-            loadingBar: palette.o2Gem,
+            controlActivated: palette.o2SkyBlue,
+            loadingBar: palette.o2SkyBlue,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.o2GemLight30,
+            toggleAndroidBackgroundActive: palette.o2SkyBlueLight45,
             iosControlKnob: palette.grey2,
             divider: (0, _color).applyAlpha(palette.white, 0.05),
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.05),

package/dist/theme.d.ts

@@ -75,7 +75,7 @@ declare type LinkComponent = React.ComponentType<{
 export declare const AnchorLink: LinkComponent;
 export declare type ColorScheme = 'dark' | 'light' | 'auto';
 export declare type ThemeConfig = {
-    skin: Skin;
+    skin: Readonly<Skin>;
     colorScheme?: ColorScheme;
     i18n: {
         locale: Locale;

package/dist/theme.js.flow

@@ -79,7 +79,7 @@ declare type LinkComponent = React.ComponentType<{
 declare export var AnchorLink: LinkComponent;
 export type ColorScheme = "dark" | "light" | "auto";
 export type ThemeConfig = {
-  skin: Skin,
+  skin: $ReadOnly<Skin>,
   colorScheme?: ColorScheme,
   i18n: {
     locale: Locale,

package/dist-es/feedback.js

@@ -322,7 +322,7 @@ export var FeedbackScreen = function(param) {
     var title = param.title, description = param.description, children = param.children, primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, hapticFeedback = param.hapticFeedback, icon = param.icon, _animateText = param.animateText, animateText = _animateText === void 0 ? false : _animateText, unstable_inlineInDesktop = param.unstable_inlineInDesktop, imageUrl = param.imageUrl, imageFit = param.imageFit, dataAttributes = param.dataAttributes;
     useHapticFeedback(hapticFeedback);
     var isInverse = useIsInverseVariant();
-    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides;
+    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode;
     var windowHeight = useWindowHeight();
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(typeof self !== "undefined"), 2), isServerSide = ref1[0], setIsServerSide = ref1[1];
@@ -385,8 +385,8 @@ export var FeedbackScreen = function(param) {
                     button: primaryButton,
                     secondaryButton: secondaryButton,
                     link: link,
-                    footerBgColor: isInverse ? colors.backgroundFeedbackBottom : undefined,
-                    containerBgColor: isInverse ? colors.navigationBarBackground : undefined,
+                    footerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
+                    containerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
                     onChangeFooterHeight: setFooterHeight,
                     children: feedbackContent
                 })

package/dist-es/fixed-footer-layout.js

@@ -79,9 +79,13 @@ var waitForSwitchTransitionToStart = function(fn) {
 var useStyles = createUseStyles(function(theme) {
     return _defineProperty({
         footer: {
-            width: "100%"
+            width: "100%",
+            backgroundColor: theme.colors.background,
+            transition: "background 0.2s linear, box-shadow 0.2s linear"
+        },
+        elevated: {
+            backgroundColor: theme.colors.backgroundContainer
         },
-        shadow: {},
         withoutFooter: {
             display: "none"
         },
@@ -102,19 +106,18 @@ var useStyles = createUseStyles(function(theme) {
             bottom: 0,
             zIndex: 1
         },
-        shadow: {
-            boxShadow: "0 -3px 8px 0 rgba(0, 0, 0, 0.15)"
+        elevated: {
+            boxShadow: "0 -2px 8px 0 rgba(0, 0, 0, 0.10)"
         }
     });
 });
 var FixedFooterLayout = function(param) {
     var _isFooterVisible = param.isFooterVisible, isFooterVisible = _isFooterVisible === void 0 ? true : _isFooterVisible, footer = param.footer, _footerHeight = param.footerHeight, footerHeight = _footerHeight === void 0 ? "auto" : _footerHeight, footerBgColor = param.footerBgColor, containerBgColor = param.containerBgColor, children = param.children, onChangeFooterHeight = param.onChangeFooterHeight;
-    var ref = _slicedToArray(React.useState(false), 2), displayShadow = ref[0], setDisplayShadow = ref[1];
+    var ref = _slicedToArray(React.useState(false), 2), displayElevation = ref[0], setDisplayElevation = ref[1];
     var containerRef = React.useRef(null);
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var platformOverrides = useTheme().platformOverrides;
     var ref1 = useElementDimensions(), realHeight = ref1.height, ref2 = ref1.ref;
-    var colors = useTheme().colors;
     useIsomorphicLayoutEffect(function() {
         onChangeFooterHeight === null || onChangeFooterHeight === void 0 ? void 0 : onChangeFooterHeight(realHeight);
     }, [
@@ -123,7 +126,7 @@ var FixedFooterLayout = function(param) {
     ]);
     React.useEffect(function() {
         var scrollable = getScrollableParentElement(containerRef.current);
-        var shouldDisplayShadow = function() {
+        var shouldDisplayElevation = function() {
             if (isRunningAcceptanceTest(platformOverrides)) {
                 return false;
             }
@@ -132,19 +135,20 @@ var FixedFooterLayout = function(param) {
             }
             return false;
         };
-        var checkDisplayShadow = debounce(function() {
-            setDisplayShadow(shouldDisplayShadow());
+        var checkDisplayElevation = debounce(function() {
+            setDisplayElevation(shouldDisplayElevation());
         }, 50, {
-            leading: true
+            leading: true,
+            maxWait: 200
         });
-        var transitionAwaiter = waitForSwitchTransitionToStart(checkDisplayShadow);
+        var transitionAwaiter = waitForSwitchTransitionToStart(checkDisplayElevation);
         var scrollEventTarget = getScrollEventTarget(scrollable);
-        addPassiveEventListener(scrollEventTarget, "resize", checkDisplayShadow);
-        addPassiveEventListener(scrollEventTarget, "scroll", checkDisplayShadow);
+        addPassiveEventListener(scrollEventTarget, "resize", checkDisplayElevation);
+        addPassiveEventListener(scrollEventTarget, "scroll", checkDisplayElevation);
         return function() {
-            checkDisplayShadow.cancel();
-            removePassiveEventListener(scrollEventTarget, "scroll", checkDisplayShadow);
-            removePassiveEventListener(scrollEventTarget, "resize", checkDisplayShadow);
+            checkDisplayElevation.cancel();
+            removePassiveEventListener(scrollEventTarget, "scroll", checkDisplayElevation);
+            removePassiveEventListener(scrollEventTarget, "resize", checkDisplayElevation);
             transitionAwaiter.cancel();
         };
     }, [
@@ -167,12 +171,12 @@ var FixedFooterLayout = function(param) {
             }),
             /*#__PURE__*/ _jsx("div", {
                 ref: ref2,
-                className: classnames(classes.footer, (_obj = {}, _defineProperty(_obj, classes.withoutFooter, !isFooterVisible), _defineProperty(_obj, classes.shadow, displayShadow), _obj)),
+                className: classnames(classes.footer, (_obj = {}, _defineProperty(_obj, classes.withoutFooter, !isFooterVisible), _defineProperty(_obj, classes.elevated, displayElevation), _obj)),
                 /**
                  * This style is inline to avoid creating a class that may collide with
                  * other fixed footers during the page animation transition
                  */ style: {
-                    background: isTabletOrSmaller ? footerBgColor || colors.backgroundContainer : undefined
+                    background: isTabletOrSmaller ? footerBgColor : undefined
                 },
                 "data-testid": "fixed-footer".concat(isFooterVisible ? "-visible" : "-hidden"),
                 /**

package/dist-es/list.js

@@ -72,7 +72,7 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Specs:
  *   - Structure: https://www.figma.com/file/Be8QB9onmHunKCCAkIBAVr/Lists-Component-Specs?node-id=0%3A2
@@ -187,8 +187,21 @@ var useStyles = createUseStyles(function(param1) {
         }
     };
 });
+var renderRight = function(right, centerY) {
+    if (typeof right === "function") return right === null || right === void 0 ? void 0 : right({
+        centerY: centerY
+    });
+    return centerY ? /*#__PURE__*/ _jsx("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            height: "100%"
+        },
+        children: right
+    }) : right;
+};
 var Content = function(param) {
-    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? "basic" : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
+    var withChevron = param.withChevron, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? "basic" : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -201,7 +214,7 @@ var Content = function(param) {
         description,
         extra
     ].filter(Boolean).length;
-    var shouldCenter = numTextLines === 1;
+    var centerY = numTextLines === 1;
     var renderBadge = function() {
         if (!badge) {
             return null;
@@ -216,31 +229,6 @@ var Content = function(param) {
             })
         });
     };
-    var renderRight = function() {
-        switch(type){
-            case "chevron":
-                return /*#__PURE__*/ _jsx(Box, {
-                    paddingLeft: 16,
-                    className: classNames(classes.center, _defineProperty({}, classes.disabled, disabled)),
-                    children: /*#__PURE__*/ _jsx(IconChevron, {
-                        color: isInverse ? colors.inverse : colors.neutralMedium,
-                        direction: "right"
-                    })
-                });
-            case "control":
-                return /*#__PURE__*/ _jsx("div", {
-                    className: classes.right,
-                    children: right
-                });
-            case "custom":
-                return /*#__PURE__*/ _jsx("div", {
-                    className: classNames(classes.right, _defineProperty({}, classes.disabled, disabled)),
-                    children: right
-                });
-            default:
-                return null;
-        }
-    };
     var _obj;
     return /*#__PURE__*/ _jsxs(Box, {
         paddingY: 16,
@@ -248,7 +236,7 @@ var Content = function(param) {
         children: [
             asset && /*#__PURE__*/ _jsx(Box, {
                 paddingRight: 16,
-                className: classNames((_obj = {}, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
+                className: classNames((_obj = {}, _defineProperty(_obj, classes.center, centerY), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ _jsx("div", {
                     className: classes.asset,
                     children: asset
@@ -257,7 +245,7 @@ var Content = function(param) {
             /*#__PURE__*/ _jsx("div", {
                 className: classNames(classes.rowBody, _defineProperty({}, classes.disabled, disabled)),
                 style: {
-                    justifyContent: shouldCenter ? "center" : "flex-start"
+                    justifyContent: centerY ? "center" : "flex-start"
                 },
                 children: /*#__PURE__*/ _jsxs(Stack, {
                     space: 4,
@@ -300,7 +288,40 @@ var Content = function(param) {
                 })
             }),
             renderBadge(),
-            renderRight()
+            type === "chevron" && /*#__PURE__*/ _jsx(Box, {
+                paddingLeft: 16,
+                className: classNames(classes.center, _defineProperty({}, classes.disabled, disabled)),
+                children: /*#__PURE__*/ _jsx(IconChevron, {
+                    color: isInverse ? colors.inverse : colors.neutralMedium,
+                    direction: "right"
+                })
+            }),
+            type === "control" && /*#__PURE__*/ _jsx("div", {
+                className: classes.right,
+                children: renderRight(right, centerY)
+            }),
+            type === "custom" && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: classNames(classes.right, _defineProperty({}, classes.disabled, disabled)),
+                        children: renderRight(right, centerY)
+                    }),
+                    withChevron && /*#__PURE__*/ _jsx("div", {
+                        className: classNames(classes.right, _defineProperty({}, classes.disabled, disabled)),
+                        children: /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                display: "flex",
+                                alignItems: "center",
+                                height: "100%"
+                            },
+                            children: /*#__PURE__*/ _jsx(IconChevron, {
+                                color: isInverse ? colors.inverse : colors.neutralMedium,
+                                direction: "right"
+                            })
+                        })
+                    })
+                ]
+            })
         ]
     });
 };
@@ -354,7 +375,8 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
             right: right,
             extra: extra,
             labelId: labelId,
-            disabled: disabled
+            disabled: disabled,
+            withChevron: !!props1.onPress || !!props1.href || !!props1.to
         });
     };
     var renderTouchableContent = function(props) {
@@ -460,10 +482,12 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                         children: renderContent({
                             labelId: labelId,
                             type: "control",
-                            right: /*#__PURE__*/ _jsx(Stack, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            right: function() {
+                                return /*#__PURE__*/ _jsx(Stack, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }
@@ -491,10 +515,12 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                         paddingX: 16,
                         children: renderContent({
                             type: "control",
-                            right: /*#__PURE__*/ _jsx(Stack, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            right: function() {
+                                return /*#__PURE__*/ _jsx(Stack, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "11.3.0";
+export var PACKAGE_VERSION = "11.4.0";

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

@@ -172,7 +172,7 @@ export var getO2ClassicSkin = function() {
             borderLight: palette.darkModeBlack,
             border: palette.darkModeGrey,
             borderDark: palette.grey5,
-            borderSelected: palette.o2Gem,
+            borderSelected: palette.o2SkyBlue,
             buttonLinkBackgroundSelected: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.o2SkyBlue,
@@ -190,11 +190,11 @@ export var getO2ClassicSkin = function() {
             textLinkInverse: palette.o2SkyBlueLight,
             textLinkSnackbar: palette.o2SkyBlueLight,
             control: palette.darkModeGrey6,
-            controlActivated: palette.o2Gem,
-            loadingBar: palette.o2Gem,
+            controlActivated: palette.o2SkyBlue,
+            loadingBar: palette.o2SkyBlue,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.o2GemLight30,
+            toggleAndroidBackgroundActive: palette.o2SkyBlueLight45,
             iosControlKnob: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.3.0",
+    "version": "11.4.0",
     "license": "MIT",
     "repository": {
         "type": "git",