@telefonica/mistica 12.9.1 → 12.10.0

package/dist-es/callout.js

@@ -1,96 +1,61 @@
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-import d from "./stack.js";
+import c from "./stack.js";
 import g from "./inline.js";
 import x from "./box.js";
 import { useTheme as I } from "./hooks.js";
-import { useIsInverseVariant as v, ThemeVariant as y } from "./theme-variant-context.js";
-import { createUseStyles as k } from "./jss.js";
-import { Text3 as S, Text2 as B } from "./text.js";
-import R from "./generated/mistica-icons/icon-close-regular.js";
+import { useIsInverseVariant as k, ThemeVariant as v } from "./theme-variant-context.js";
+import { Text3 as C, Text2 as y } from "./text.js";
+import B from "./generated/mistica-icons/icon-close-regular.js";
 import T from "./icon-button.js";
-import j from "classnames";
-import C from "./button-group.js";
-import { jsx as e, jsxs as n } from "./_virtual/jsx-runtime.js";
-var b = k(function(param) {
-    var r = param.colors;
-    return {
-        container: {
-            background: r.backgroundAlternative,
-            borderRadius: 8,
-            padding: 16,
-            overflow: "hidden",
-            display: "flex",
-            minHeight: 56,
-            "& > *": {
-                flexShrink: 0
-            }
-        },
-        icon: {
-            display: "flex",
-            marginRight: 16
-        },
-        content: {
-            alignSelf: "center",
-            flex: 1
-        },
-        overInverse: {
-            background: r.backgroundContainer
-        }
-    };
-}), E = function(param) {
-    var r = param.title, p = param.description, l = param.icon, a = param.onClose, t = param.button, c = param.secondaryButton, o = param.buttonLink, s = param["aria-label"];
-    var f = o && !t, u = v(), i = b({
-        needsButtonLinkAlignment: f
-    }), ref = I(), m = ref.colors, h = ref.texts;
-    return /* @__PURE__ */ e("section", {
-        className: j(i.container, _defineProperty({}, i.overInverse, u)),
-        "aria-label": s != null ? s : r,
-        children: /* @__PURE__ */ n(y, {
+import b from "classnames";
+import j from "./button-group.js";
+import { container as z, content as N } from "./callout.css-mistica.js";
+import { sprinkles as p } from "./sprinkles.css-mistica.js";
+import { vars as d } from "./skins/skin-contract.css-mistica.js";
+import { jsx as r, jsxs as e } from "./_virtual/jsx-runtime.js";
+var K = function(param) {
+    var t = param.title, f = param.description, n = param.icon, s = param.onClose, i = param.button, l = param.secondaryButton, a = param.buttonLink, o = param["aria-label"];
+    var u = k(), ref = I(), m = ref.colors, h = ref.texts;
+    return /* @__PURE__ */ r("section", {
+        className: b(z, u ? p({
+            backgroundColor: d.colors.backgroundContainer
+        }) : p({
+            backgroundColor: d.colors.backgroundAlternative
+        })),
+        "aria-label": o != null ? o : t,
+        children: /* @__PURE__ */ e(v, {
             isInverse: !1,
             children: [
-                l && /* @__PURE__ */ e(x, {
+                n && /* @__PURE__ */ r(x, {
                     paddingRight: 16,
-                    children: l
+                    children: n
                 }),
-                /* @__PURE__ */ e("div", {
-                    className: i.content,
-                    children: /* @__PURE__ */ n(d, {
+                /* @__PURE__ */ r("div", {
+                    className: N,
+                    children: /* @__PURE__ */ e(c, {
                         space: 16,
                         children: [
-                            /* @__PURE__ */ n(g, {
+                            /* @__PURE__ */ e(g, {
                                 fullWidth: !0,
                                 alignItems: "flex-start",
                                 space: "between",
                                 children: [
-                                    /* @__PURE__ */ n(d, {
+                                    /* @__PURE__ */ e(c, {
                                         space: 4,
                                         children: [
-                                            /* @__PURE__ */ e(S, {
+                                            /* @__PURE__ */ r(C, {
                                                 as: "h2",
                                                 regular: !0,
-                                                children: r
+                                                children: t
                                             }),
-                                            /* @__PURE__ */ e(B, {
+                                            /* @__PURE__ */ r(y, {
                                                 as: "p",
                                                 regular: !0,
                                                 color: m.textSecondary,
-                                                children: p
+                                                children: f
                                             })
                                         ]
                                     }),
-                                    a && /* @__PURE__ */ e(T, {
+                                    s && /* @__PURE__ */ r(T, {
                                         size: 40,
                                         style: {
                                             display: "flex",
@@ -98,19 +63,19 @@ var b = k(function(param) {
                                             alignItems: "center",
                                             justifyContent: "center"
                                         },
-                                        onPress: a,
+                                        onPress: s,
                                         "aria-label": h.closeButtonLabel,
-                                        children: /* @__PURE__ */ e(R, {
+                                        children: /* @__PURE__ */ r(B, {
                                             size: 24,
                                             color: m.neutralHigh
                                         })
                                     })
                                 ]
                             }),
-                            (t || c || o) && /* @__PURE__ */ e(C, {
-                                primaryButton: t,
-                                secondaryButton: c,
-                                link: o
+                            (i || l || a) && /* @__PURE__ */ r(j, {
+                                primaryButton: i,
+                                secondaryButton: l,
+                                link: a
                             })
                         ]
                     })
@@ -119,4 +84,4 @@ var b = k(function(param) {
         })
     });
 };
-export { E as default };
+export { K as default };

package/dist-es/card.css-mistica.js

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./card.css.ts.vanilla.js";
+var _ = "_15e54s91 _1y2v1nf7b _1y2v1nf7w _1y2v1nf7r", f = "_1y2v1nf7b _1y2v1nf9h _1y2v1nf9x", y = "_15e54s97 _1y2v1nf8u _1y2v1nf98 _1y2v1nf83 _1y2v1nf8h _1y2v1nf7b _1y2v1nf7w _1y2v1nf7h", a = "_1y2v1nf7b _1y2v1nf7h _1y2v1nf9x _1y2v1nf9h", r = "_15e54s95 _1y2v1nf8u _1y2v1nf98 _1y2v1nf7b _1y2v1nf7w _1y2v1nf82 _1y2v1nf8h _1y2v1nf7h", e = "_15e54s99 _1y2v1nf82 _1y2v1nf8g _1y2v1nf8u _1y2v1nf98 _1y2v1nf7b _1y2v1nf9x _1y2v1nf7h _1y2v1nf7n _1y2v1nf7w", b = "_15e54s9b _1y2v1nf7b _1y2v1nf9x", s = "_15e54s9c _1y2v1nf7b _1y2v1nf9x";
+export { _ as actions, f as boxed, y as dataCard, a as mediaCard, r as mediaCardContent, e as snapCard, b as snapCardTouchableHover, s as snapCardTouchableHoverTransparent };

package/dist-es/card.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var a = "";
+export { a as default };

package/dist-es/card.js

@@ -77,250 +77,182 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import * as v from "react";
-import R from "./tag.js";
+import * as y from "react";
+import M from "./tag.js";
 import b from "./stack.js";
-import { useTheme as T } from "./hooks.js";
-import S from "./box.js";
-import { Text2 as y, Text1 as H, Text4 as j } from "./text.js";
-import { createUseStyles as C } from "./jss.js";
+import T from "./box.js";
+import { Text2 as C, Text1 as j, Text4 as k } from "./text.js";
 import { Boxed as N } from "./boxed.js";
-import O from "./button-group.js";
-import { DisableBorderRadiusProvider as q } from "./image.js";
-import k, { useIsDismissable as I } from "./maybe-dismissable.js";
-import A from "./touchable.js";
-import { jsx as r, jsxs as d } from "./_virtual/jsx-runtime.js";
-var G = C(function() {
-    return {
-        actions: {
-            flex: 1,
-            display: "flex",
-            alignItems: "flex-end"
-        }
+import H from "./button-group.js";
+import { DisableBorderRadiusProvider as G } from "./image.js";
+import D, { useIsDismissable as q } from "./maybe-dismissable.js";
+import z from "./touchable.js";
+import { vars as R } from "./skins/skin-contract.css-mistica.js";
+import { boxed as B, mediaCard as A, mediaCardContent as E, dataCard as F, snapCardTouchableHover as I, snapCardTouchableHoverTransparent as J, snapCard as K, actions as O } from "./card.css-mistica.js";
+import { useTheme as Q } from "./hooks.js";
+import { sprinkles as U } from "./sprinkles.css-mistica.js";
+import { jsx as r, jsxs as s } from "./_virtual/jsx-runtime.js";
+var S = function(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() {
+        return e ? typeof e == "string" ? /* @__PURE__ */ r(M, {
+            type: "promo",
+            children: e
+        }) : e : null;
     };
-}), w = function(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 = T(), f = G();
-    return /* @__PURE__ */ d(b, {
-        space: 16,
+    return /* @__PURE__ */ s("div", {
+        className: U({
+            display: "flex",
+            flex: 1,
+            justifyContent: "space-between",
+            flexDirection: "column"
+        }),
         children: [
-            /* @__PURE__ */ d(b, {
-                space: 8,
+            /* @__PURE__ */ s(b, {
+                space: 16,
                 children: [
-                    (e || a || t || l) && /* @__PURE__ */ r("header", {
-                        children: /* @__PURE__ */ d(b, {
-                            space: 8,
-                            children: [
-                                function() {
-                                    return e ? typeof e == "string" ? /* @__PURE__ */ r(R, {
-                                        type: "promo",
-                                        children: e
-                                    }) : e : null;
-                                }(),
-                                /* @__PURE__ */ d(b, {
-                                    space: 4,
+                    /* @__PURE__ */ s(b, {
+                        space: 8,
+                        children: [
+                            (e || a || n || c) && /* @__PURE__ */ r("header", {
+                                children: /* @__PURE__ */ s(b, {
+                                    space: 8,
                                     children: [
-                                        a && /* @__PURE__ */ r(H, {
-                                            truncate: s,
-                                            as: "div",
-                                            regular: !0,
-                                            transform: "uppercase",
-                                            children: a
-                                        }),
-                                        /* @__PURE__ */ r(j, {
-                                            truncate: h,
-                                            as: "h1",
-                                            regular: !0,
-                                            children: t
-                                        }),
-                                        /* @__PURE__ */ r(y, {
-                                            truncate: u,
-                                            as: "div",
-                                            regular: !0,
-                                            children: l
+                                        f(),
+                                        /* @__PURE__ */ s(b, {
+                                            space: 4,
+                                            children: [
+                                                a && /* @__PURE__ */ r(j, {
+                                                    truncate: o,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    transform: "uppercase",
+                                                    children: a
+                                                }),
+                                                /* @__PURE__ */ r(k, {
+                                                    truncate: p,
+                                                    as: "h1",
+                                                    regular: !0,
+                                                    children: n
+                                                }),
+                                                /* @__PURE__ */ r(C, {
+                                                    truncate: u,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    children: c
+                                                })
+                                            ]
                                         })
                                     ]
                                 })
-                            ]
-                        })
+                            }),
+                            l && /* @__PURE__ */ r(C, {
+                                truncate: t,
+                                as: "p",
+                                regular: !0,
+                                color: R.colors.textSecondary,
+                                children: l
+                            })
+                        ]
                     }),
-                    n && /* @__PURE__ */ r(y, {
-                        truncate: c,
-                        as: "p",
-                        regular: !0,
-                        color: o.colors.textSecondary,
-                        children: n
+                    i && /* @__PURE__ */ r("div", {
+                        children: i
                     })
                 ]
             }),
-            i && /* @__PURE__ */ r("div", {
-                children: i
-            }),
-            (m || p) && /* @__PURE__ */ r("div", {
-                className: f.actions,
-                children: /* @__PURE__ */ r(O, {
-                    primaryButton: m,
-                    link: p
+            (d || m) && /* @__PURE__ */ r("div", {
+                className: O,
+                children: /* @__PURE__ */ r(H, {
+                    primaryButton: d,
+                    link: m
                 })
             })
         ]
     });
-}, M = function(param) {
-    var e = param["aria-label"], a = param.className, s = param.children;
-    return I() ? /* @__PURE__ */ r("div", {
+}, w = function(param) {
+    var e = param["aria-label"], a = param.className, o = param.children;
+    return q() ? /* @__PURE__ */ r("div", {
         className: a,
-        children: s
+        children: o
     }) : /* @__PURE__ */ r("section", {
         className: a,
         "aria-label": e,
-        children: s
+        children: o
     });
-}, U = C(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__*/ v.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
-    });
-    return /* @__PURE__ */ r(k, {
-        onClose: B,
-        "aria-label": g,
+}, nr = /*#__PURE__*/ y.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__ */ r(D, {
+        onClose: g,
+        "aria-label": h,
         children: /* @__PURE__ */ r(N, {
-            className: x.boxed,
-            dataAttributes: f,
-            ref: D,
-            children: /* @__PURE__ */ d(M, {
-                className: x.mediaCard,
-                "aria-label": g,
+            className: B,
+            dataAttributes: x,
+            ref: v,
+            children: /* @__PURE__ */ s(w, {
+                className: A,
+                "aria-label": h,
                 children: [
-                    /* @__PURE__ */ r(q, {
+                    /* @__PURE__ */ r(G, {
                         children: e
                     }),
                     /* @__PURE__ */ r("div", {
-                        className: x.content,
-                        children: /* @__PURE__ */ r(w, {
+                        className: E,
+                        children: /* @__PURE__ */ r(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 = C(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__*/ v.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();
-    return /* @__PURE__ */ r(k, {
-        "aria-label": g,
-        onClose: B,
+}), sr = /*#__PURE__*/ y.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__ */ r(D, {
+        "aria-label": h,
+        onClose: g,
         children: /* @__PURE__ */ r(N, {
-            className: x.boxed,
-            dataAttributes: f,
-            ref: D,
-            children: /* @__PURE__ */ d(M, {
-                className: x.dataCard,
-                "aria-label": g,
+            className: B,
+            dataAttributes: x,
+            ref: v,
+            children: /* @__PURE__ */ s(w, {
+                className: F,
+                "aria-label": h,
                 children: [
-                    e && /* @__PURE__ */ r(S, {
+                    e && /* @__PURE__ */ r(T, {
                         paddingBottom: 16,
                         children: e
                     }),
-                    /* @__PURE__ */ r(w, {
+                    /* @__PURE__ */ r(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 = C(function(e) {
-    return {
-        boxed: {
-            height: "100%"
-        },
-        touchable: _defineProperty({
-            display: "flex",
-            height: "100%"
-        }, e.mq.supportsHover, {
-            "&:hover": {
-                backgroundColor: function(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__*/ v.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__*/ y.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",
@@ -331,57 +263,53 @@ var G = C(function() {
         "extra",
         "isInverse"
     ]);
-    var p = Boolean(i.to || i.href || i.onPress), o = z({
-        isTouchable: p,
-        isInverse: c,
-        hasIcon: !!e
-    }), ref = T(), f = ref.colors;
+    var ref = Q(), m = ref.isDarkMode, f = Boolean(i.to || i.href || i.onPress);
     return /* @__PURE__ */ r(N, {
-        className: o.boxed,
-        dataAttributes: l,
-        ref: m,
-        isInverse: c,
-        children: /* @__PURE__ */ r(A, _objectSpreadProps(_objectSpread({
+        className: B,
+        dataAttributes: c,
+        ref: d,
+        isInverse: t,
+        children: /* @__PURE__ */ r(z, _objectSpreadProps(_objectSpread({
             maybe: !0
         }, i), {
-            className: o.touchable,
+            className: f && !t && !m ? I : J,
             "aria-label": u,
-            children: /* @__PURE__ */ d("section", {
-                className: o.snapCard,
+            children: /* @__PURE__ */ s("section", {
+                className: K,
                 children: [
-                    /* @__PURE__ */ d("div", {
+                    /* @__PURE__ */ s("div", {
                         children: [
-                            e && /* @__PURE__ */ r(S, {
+                            e && /* @__PURE__ */ r(T, {
                                 paddingBottom: 16,
                                 children: e
                             }),
-                            /* @__PURE__ */ d(b, {
+                            /* @__PURE__ */ s(b, {
                                 space: 4,
                                 children: [
-                                    a && /* @__PURE__ */ r(y, {
-                                        truncate: s,
+                                    a && /* @__PURE__ */ r(C, {
+                                        truncate: o,
                                         as: "h1",
                                         regular: !0,
                                         children: a
                                     }),
-                                    t && /* @__PURE__ */ r(y, {
-                                        truncate: h,
+                                    n && /* @__PURE__ */ r(C, {
+                                        truncate: p,
                                         regular: !0,
-                                        color: f.textSecondary,
+                                        color: R.colors.textSecondary,
                                         as: "p",
-                                        children: t
+                                        children: n
                                     })
                                 ]
                             })
                         ]
                     }),
-                    n && /* @__PURE__ */ r(S, {
+                    l && /* @__PURE__ */ r(T, {
                         paddingTop: 16,
-                        children: n
+                        children: l
                     })
                 ]
             })
         }))
     });
 });
-export { ee as DataCard, L as MediaCard, re as SnapCard };
+export { sr as DataCard, nr as MediaCard, lr as SnapCard };