@telefonica/mistica 12.9.1 → 12.10.0

package/dist/card.js

@@ -10,27 +10,29 @@ function _export(target, all) {
 }
 _export(exports, {
     DataCard: function() {
-        return ee;
+        return sr;
     },
     MediaCard: function() {
-        return L;
+        return nr;
     },
     SnapCard: function() {
-        return re;
+        return lr;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _tagJs = /*#__PURE__*/ _interopRequireDefault(require("./tag.js"));
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
-var _hooksJs = require("./hooks.js");
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _textJs = require("./text.js");
-var _jssJs = require("./jss.js");
 var _boxedJs = require("./boxed.js");
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
 var _imageJs = require("./image.js");
 var _maybeDismissableJs = /*#__PURE__*/ _interopRequireWildcard(require("./maybe-dismissable.js"));
 var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+var _cardCssMisticaJs = require("./card.css-mistica.js");
+var _hooksJs = require("./hooks.js");
+var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -155,237 +157,167 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var G = (0, _jssJs.createUseStyles)(function() {
-    return {
-        actions: {
-            flex: 1,
-            display: "flex",
-            alignItems: "flex-end"
-        }
+var S = function S(param) {
+    var e = param.headline, a = param.pretitle, o = param.pretitleLinesMax, n = param.title, p = param.titleLinesMax, c = param.subtitle, u = param.subtitleLinesMax, l = param.description, t = param.descriptionLinesMax, i = param.extra, d = param.button, m = param.buttonLink;
+    var f = function f() {
+        return e ? typeof e == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
+            type: "promo",
+            children: e
+        }) : e : null;
     };
-}), w = function w(param) {
-    var e = param.headline, a = param.pretitle, s = param.pretitleLinesMax, t = param.title, h = param.titleLinesMax, l = param.subtitle, u = param.subtitleLinesMax, n = param.description, c = param.descriptionLinesMax, i = param.extra, m = param.button, p = param.buttonLink;
-    var o = (0, _hooksJs.useTheme)(), f = G();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-        space: 16,
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+        className: (0, _sprinklesCssMisticaJs.sprinkles)({
+            display: "flex",
+            flex: 1,
+            justifyContent: "space-between",
+            flexDirection: "column"
+        }),
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                space: 8,
+                space: 16,
                 children: [
-                    (e || a || t || l) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                            space: 8,
-                            children: [
-                                function() {
-                                    return e ? typeof e == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
-                                        type: "promo",
-                                        children: e
-                                    }) : e : null;
-                                }(),
-                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                                    space: 4,
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                        space: 8,
+                        children: [
+                            (e || a || n || c) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
+                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                    space: 8,
                                     children: [
-                                        a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
-                                            truncate: s,
-                                            as: "div",
-                                            regular: !0,
-                                            transform: "uppercase",
-                                            children: a
-                                        }),
-                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
-                                            truncate: h,
-                                            as: "h1",
-                                            regular: !0,
-                                            children: t
-                                        }),
-                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                            truncate: u,
-                                            as: "div",
-                                            regular: !0,
-                                            children: l
+                                        f(),
+                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                            space: 4,
+                                            children: [
+                                                a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
+                                                    truncate: o,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    transform: "uppercase",
+                                                    children: a
+                                                }),
+                                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
+                                                    truncate: p,
+                                                    as: "h1",
+                                                    regular: !0,
+                                                    children: n
+                                                }),
+                                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                    truncate: u,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    children: c
+                                                })
+                                            ]
                                         })
                                     ]
                                 })
-                            ]
-                        })
+                            }),
+                            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                truncate: t,
+                                as: "p",
+                                regular: !0,
+                                color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                children: l
+                            })
+                        ]
                     }),
-                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                        truncate: c,
-                        as: "p",
-                        regular: !0,
-                        color: o.colors.textSecondary,
-                        children: n
+                    i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        children: i
                     })
                 ]
             }),
-            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                children: i
-            }),
-            (m || p) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: f.actions,
+            (d || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _cardCssMisticaJs.actions,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                    primaryButton: m,
-                    link: p
+                    primaryButton: d,
+                    link: m
                 })
             })
         ]
     });
-}, M = function M(param) {
-    var e = param["aria-label"], a = param.className, s = param.children;
+}, w = function w(param) {
+    var e = param["aria-label"], a = param.className, o = param.children;
     return (0, _maybeDismissableJs.useIsDismissable)() ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: a,
-        children: s
+        children: o
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
         className: a,
         "aria-label": e,
-        children: s
-    });
-}, U = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.mq;
-    return {
-        boxed: {
-            height: "100%",
-            width: "100%"
-        },
-        mediaCard: {
-            display: "flex",
-            flexDirection: "column",
-            height: "100%"
-        },
-        content: _defineProperty({
-            flex: 1,
-            padding: 16,
-            paddingBottom: 24,
-            display: "flex",
-            flexDirection: "column"
-        }, e.desktopOrBigger, {
-            padding: 24,
-            paddingBottom: 32
-        })
-    };
-}), L = /*#__PURE__*/ _react.forwardRef(function(param, D) {
-    var e = param.media, a = param.headline, s = param.pretitle, t = param.pretitleLinesMax, h = param.subtitle, l = param.subtitleLinesMax, u = param.title, n = param.titleLinesMax, c = param.description, i = param.descriptionLinesMax, m = param.extra, p = param.button, o = param.buttonLink, f = param.dataAttributes, g = param["aria-label"], B = param.onClose;
-    var x = U({
-        media: e
+        children: o
     });
+}, nr = /*#__PURE__*/ _react.forwardRef(function(param, v) {
+    var e = param.media, a = param.headline, o = param.pretitle, n = param.pretitleLinesMax, p = param.subtitle, c = param.subtitleLinesMax, u = param.title, l = param.titleLinesMax, t = param.description, i = param.descriptionLinesMax, d = param.extra, m = param.button, f = param.buttonLink, x = param.dataAttributes, h = param["aria-label"], g = param.onClose;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_maybeDismissableJs.default, {
-        onClose: B,
-        "aria-label": g,
+        onClose: g,
+        "aria-label": h,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-            className: x.boxed,
-            dataAttributes: f,
-            ref: D,
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(M, {
-                className: x.mediaCard,
-                "aria-label": g,
+            className: _cardCssMisticaJs.boxed,
+            dataAttributes: x,
+            ref: v,
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(w, {
+                className: _cardCssMisticaJs.mediaCard,
+                "aria-label": h,
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.DisableBorderRadiusProvider, {
                         children: e
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: x.content,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(w, {
+                        className: _cardCssMisticaJs.mediaCardContent,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, {
                             headline: a,
-                            pretitle: s,
-                            pretitleLinesMax: t,
+                            pretitle: o,
+                            pretitleLinesMax: n,
                             title: u,
-                            titleLinesMax: n,
-                            subtitle: h,
-                            subtitleLinesMax: l,
-                            description: c,
+                            titleLinesMax: l,
+                            subtitle: p,
+                            subtitleLinesMax: c,
+                            description: t,
                             descriptionLinesMax: i,
-                            extra: m,
-                            button: p,
-                            buttonLink: o
+                            extra: d,
+                            button: m,
+                            buttonLink: f
                         })
                     })
                 ]
             })
         })
     });
-}), W = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.mq;
-    return {
-        boxed: {
-            height: "100%",
-            width: "100%"
-        },
-        dataCard: _defineProperty({
-            display: "flex",
-            flexDirection: "column",
-            padding: "24px 16px",
-            height: "100%"
-        }, e.desktopOrBigger, {
-            padding: "32px 24px"
-        })
-    };
-}), ee = /*#__PURE__*/ _react.forwardRef(function(param, D) {
-    var e = param.icon, a = param.headline, s = param.pretitle, t = param.pretitleLinesMax, h = param.title, l = param.titleLinesMax, u = param.subtitle, n = param.subtitleLinesMax, c = param.description, i = param.descriptionLinesMax, m = param.extra, p = param.button, o = param.buttonLink, f = param.dataAttributes, g = param["aria-label"], B = param.onClose;
-    var x = W();
+}), sr = /*#__PURE__*/ _react.forwardRef(function(param, v) {
+    var e = param.icon, a = param.headline, o = param.pretitle, n = param.pretitleLinesMax, p = param.title, c = param.titleLinesMax, u = param.subtitle, l = param.subtitleLinesMax, t = param.description, i = param.descriptionLinesMax, d = param.extra, m = param.button, f = param.buttonLink, x = param.dataAttributes, h = param["aria-label"], g = param.onClose;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_maybeDismissableJs.default, {
-        "aria-label": g,
-        onClose: B,
+        "aria-label": h,
+        onClose: g,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-            className: x.boxed,
-            dataAttributes: f,
-            ref: D,
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(M, {
-                className: x.dataCard,
-                "aria-label": g,
+            className: _cardCssMisticaJs.boxed,
+            dataAttributes: x,
+            ref: v,
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(w, {
+                className: _cardCssMisticaJs.dataCard,
+                "aria-label": h,
                 children: [
                     e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingBottom: 16,
                         children: e
                     }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(w, {
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, {
                         headline: a,
-                        pretitle: s,
-                        pretitleLinesMax: t,
-                        title: h,
-                        titleLinesMax: l,
+                        pretitle: o,
+                        pretitleLinesMax: n,
+                        title: p,
+                        titleLinesMax: c,
                         subtitle: u,
-                        subtitleLinesMax: n,
-                        description: c,
+                        subtitleLinesMax: l,
+                        description: t,
                         descriptionLinesMax: i,
-                        extra: m,
-                        button: p,
-                        buttonLink: o
+                        extra: d,
+                        button: m,
+                        buttonLink: f
                     })
                 ]
             })
         })
     });
-}), z = (0, _jssJs.createUseStyles)(function(e) {
-    return {
-        boxed: {
-            height: "100%"
-        },
-        touchable: _defineProperty({
-            display: "flex",
-            height: "100%"
-        }, e.mq.supportsHover, {
-            "&:hover": {
-                backgroundColor: function backgroundColor(param) {
-                    var a = param.isTouchable, s = param.isInverse;
-                    return a && !s && !e.isDarkMode ? e.colors.backgroundAlternative : "transparent";
-                }
-            }
-        }),
-        snapCard: _defineProperty({
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            padding: 16,
-            minHeight: 80,
-            flex: 1,
-            minWidth: 104
-        }, e.mq.desktopOrBigger, {
-            padding: 24
-        })
-    };
-}), re = /*#__PURE__*/ _react.forwardRef(function(_param, m) {
-    var e = _param.icon, a = _param.title, s = _param.titleLinesMax, t = _param.subtitle, h = _param.subtitleLinesMax, l = _param.dataAttributes, u = _param["aria-label"], n = _param.extra, tmp = _param.isInverse, c = tmp === void 0 ? !1 : tmp, i = _objectWithoutProperties(_param, [
+}), lr = /*#__PURE__*/ _react.forwardRef(function(_param, d) {
+    var e = _param.icon, a = _param.title, o = _param.titleLinesMax, n = _param.subtitle, p = _param.subtitleLinesMax, c = _param.dataAttributes, u = _param["aria-label"], l = _param.extra, tmp = _param.isInverse, t = tmp === void 0 ? !1 : tmp, i = _objectWithoutProperties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -396,23 +328,19 @@ var G = (0, _jssJs.createUseStyles)(function() {
         "extra",
         "isInverse"
     ]);
-    var p = Boolean(i.to || i.href || i.onPress), o = z({
-        isTouchable: p,
-        isInverse: c,
-        hasIcon: !!e
-    }), ref = (0, _hooksJs.useTheme)(), f = ref.colors;
+    var ref = (0, _hooksJs.useTheme)(), m = ref.isDarkMode, f = Boolean(i.to || i.href || i.onPress);
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-        className: o.boxed,
-        dataAttributes: l,
-        ref: m,
-        isInverse: c,
+        className: _cardCssMisticaJs.boxed,
+        dataAttributes: c,
+        ref: d,
+        isInverse: t,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({
             maybe: !0
         }, i), {
-            className: o.touchable,
+            className: f && !t && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
             "aria-label": u,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
-                className: o.snapCard,
+                className: _cardCssMisticaJs.snapCard,
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
                         children: [
@@ -424,25 +352,25 @@ var G = (0, _jssJs.createUseStyles)(function() {
                                 space: 4,
                                 children: [
                                     a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                        truncate: s,
+                                        truncate: o,
                                         as: "h1",
                                         regular: !0,
                                         children: a
                                     }),
-                                    t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                        truncate: h,
+                                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                        truncate: p,
                                         regular: !0,
-                                        color: f.textSecondary,
+                                        color: _skinContractCssMisticaJs.vars.colors.textSecondary,
                                         as: "p",
-                                        children: t
+                                        children: n
                                     })
                                 ]
                             })
                         ]
                     }),
-                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                    l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingTop: 16,
-                        children: n
+                        children: l
                     })
                 ]
             })