@telefonica/mistica 12.0.0 → 12.1.0

package/dist-es/popover.js

@@ -75,9 +75,13 @@ function _unsupportedIterableToArray(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
-import IcnCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
 import IconButton from "./icon-button";
 import { useTheme, useScreenSize } from "./hooks";
+import Stack from "./stack";
+import Box from "./box";
+import Inline from "./inline";
+import { Text3, Text2 } from "./text";
 // Zeplin definition:
 // https://app.zeplin.io/project/5c9b6f097168bc065782b5c3/screen/5d15d87e46571573089f2863
 var defaultPositionDesktop = "bottom";
@@ -99,7 +103,7 @@ var useStyles = createUseStyles(function(theme) {
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 2,
             boxShadow: function(param) {
                 var position = param.position;
@@ -122,46 +126,27 @@ var useStyles = createUseStyles(function(theme) {
             zIndex: 9,
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
             backgroundColor: theme.colors.backgroundContainer,
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 8
         },
-        title: {
-            marginBottom: 4,
-            color: theme.colors.textPrimary,
-            fontWeight: 400,
-            lineHeight: 1.5,
-            fontSize: 16
-        },
-        boxContainer: {
-            position: "relative",
+        textAlign: {
             display: "flex",
-            justifyContent: "space-between"
+            alignItems: "center",
+            height: "100%"
+        },
+        boxContent: {
+            display: "flex"
         },
         textContent: {
-            display: "flex",
-            flexDirection: "column",
-            margin: 16,
-            marginRight: 8,
-            justifyContent: "center",
+            textAlign: "left",
             width: "100%",
             wordBreak: "break-word"
         },
-        assetContent: {
-            width: 40,
-            minWidth: 40,
-            height: 40,
-            margin: 16,
-            marginRight: 0
-        },
-        text: {
-            color: theme.colors.textSecondary,
-            textAlign: "left",
-            lineHeight: 1.42857142,
-            fontSize: 14
-        },
         closeButtonIcon: {
-            paddingTop: 8,
-            paddingRight: 8
+            position: "absolute",
+            top: 8,
+            right: 8,
+            zIndex: 1
         }
     };
 });
@@ -246,7 +231,7 @@ var getTargetPosition = function(targetWrapper) {
     } : null;
 };
 var Popover = function(param) {
-    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible;
+    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible, extra = param.extra;
     var ref = useTheme(), texts = ref.texts, colors = ref.colors, isIos = ref.isIos;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
@@ -287,40 +272,50 @@ var Popover = function(param) {
                         className: classes.arrow
                     })
                 }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: classes.boxContainer,
+                /*#__PURE__*/ _jsxs(Box, {
+                    padding: 16,
                     children: [
-                        asset && /*#__PURE__*/ _jsx("div", {
-                            className: classes.assetContent,
-                            children: asset
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: classes.textContent,
-                            children: [
-                                title && /*#__PURE__*/ _jsx("span", {
-                                    className: classes.title,
-                                    children: title
-                                }),
-                                /*#__PURE__*/ _jsx("span", {
-                                    className: classes.text,
-                                    children: description
-                                })
-                            ]
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingRight: 24,
+                            className: classes.boxContent,
+                            children: /*#__PURE__*/ _jsxs(Inline, {
+                                space: 16,
+                                children: [
+                                    asset,
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        className: classes.textAlign,
+                                        children: /*#__PURE__*/ _jsxs(Stack, {
+                                            space: 4,
+                                            className: classes.textContent,
+                                            children: [
+                                                title && /*#__PURE__*/ _jsx(Text3, {
+                                                    regular: true,
+                                                    children: title
+                                                }),
+                                                /*#__PURE__*/ _jsx(Text2, {
+                                                    regular: true,
+                                                    color: colors.textSecondary,
+                                                    children: description
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
                         }),
-                        /*#__PURE__*/ _jsx("div", {
+                        /*#__PURE__*/ _jsx(IconButton, {
                             className: classes.closeButtonIcon,
-                            children: /*#__PURE__*/ _jsx(IconButton, {
-                                onPress: function(e) {
-                                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                                    e.stopPropagation();
-                                },
-                                trackingEvent: trackingEvent,
-                                "aria-label": texts.modalClose,
-                                children: /*#__PURE__*/ _jsx(IcnCloseRegular, {
-                                    color: colors.neutralHigh
-                                })
+                            onPress: function(e) {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                e.stopPropagation();
+                            },
+                            trackingEvent: trackingEvent,
+                            "aria-label": texts.modalClose,
+                            children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                                color: colors.neutralHigh
                             })
-                        })
+                        }),
+                        extra
                     ]
                 })
             ]

package/dist-es/skins/blau.js

@@ -53,7 +53,7 @@ export var getBlauSkin = function() {
             backgroundBrand: palette.blauBluePrimary,
             backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
             backgroundSkeleton: palette.grey2,
-            backgroundSkeletonInverse: palette.white,
+            backgroundSkeletonInverse: applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.blauBluePrimary,
             backgroundAlternative: palette.blauBluePrimary20,
             backgroundFeedbackBottom: palette.blauBluePrimary,

package/dist-es/spinner.js

@@ -211,7 +211,6 @@ var Spinner = function(param) {
                 r: "30",
                 role: "presentation",
                 stroke: color,
-                strokeLinecap: "square",
                 strokeWidth: "6"
             })
         ]

package/dist-es/text-link.js

@@ -62,25 +62,33 @@ import { useIsInverseVariant } from "./theme-variant-context";
 import { useForm } from "./form-context";
 import { getTextFromChildren } from "./utils/common";
 import { eventActions, eventCategories, eventNames, useTrackingConfig } from "./utils/analytics";
-var useStyles = createUseStyles(function(theme) {
+var useStyles = createUseStyles(function(param) {
+    var colors = param.colors, isDarkMode = param.isDarkMode, mq = param.mq;
     var _obj;
     return {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
             display: "inline-block",
-            color: theme.colors.textLink,
-            wordBreak: "break-word"
-        }, _defineProperty(_obj, theme.mq.supportsHover, {
+            color: colors.textLink,
+            wordBreak: "break-word",
+            cursor: "pointer"
+        }, _defineProperty(_obj, mq.supportsHover, {
             "&:hover:not([disabled])": {
                 textDecoration: "underline"
             }
         }), _defineProperty(_obj, "&[disabled]", {
-            opacity: 0.5
+            opacity: 0.5,
+            textDecoration: "none"
         }), _obj),
-        inverse: {
-            color: theme.colors.textLinkInverse
-        },
+        inverse: _defineProperty({
+            color: colors.textLinkInverse,
+            textDecoration: isDarkMode ? "none" : "underline"
+        }, mq.supportsHover, {
+            "&:hover:not([disabled])": {
+                textDecorationThickness: isDarkMode ? 1 : 2
+            }
+        }),
         small: {
             fontSize: 14
         }

package/package.json

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