@telefonica/mistica 11.3.0 → 11.5.0

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,34 @@ 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(Box, {
+                        paddingLeft: 4,
+                        className: classNames(classes.center, _defineProperty({}, classes.disabled, disabled)),
+                        children: /*#__PURE__*/ _jsx(IconChevron, {
+                            color: isInverse ? colors.inverse : colors.neutralMedium,
+                            direction: "right"
+                        })
+                    })
+                ]
+            })
         ]
     });
 };
@@ -354,7 +369,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 +476,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 +509,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.5.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.5.0",
     "license": "MIT",
     "repository": {
         "type": "git",