@telefonica/mistica 13.6.1 → 14.1.0

package/dist-es/card.js

@@ -78,31 +78,31 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 import * as x from "react";
-import O from "./tag.js";
-import b from "./stack.js";
-import A from "./box.js";
-import { Text2 as y, Text6 as P, Text3 as W, Text4 as $ } from "./text.js";
-import { Boxed as N, InternalBoxed as q } from "./boxed.js";
-import w from "./button-group.js";
+import E from "./tag.js";
+import g from "./stack.js";
+import T from "./box.js";
+import { Text2 as y, Text6 as O, Text3 as W, Text as $ } from "./text.js";
+import { Boxed as D, InternalBoxed as q } from "./boxed.js";
+import M from "./button-group.js";
 import { MediaBorderRadiusProvider as F } from "./image.js";
-import M, { useIsDismissable as J } from "./maybe-dismissable.js";
+import R, { useIsDismissable as J } from "./maybe-dismissable.js";
 import { BaseTouchable as K } from "./touchable.js";
-import { vars as B } from "./skins/skin-contract.css-mistica.js";
-import { boxed as T, mediaCard as Q, mediaCardContent as U, dataCard as V, snapCardTouchableHover as Y, snapCardTouchableHoverTransparent as Z, snapCard as L, displayCard as rr, displayCardGradient as er, actions as ar, cardActionIconButton as ir, cardActionInverse as tr, cardAction as nr } from "./card.css-mistica.js";
-import { useTheme as R } from "./hooks.js";
-import { sprinkles as or } from "./sprinkles.css-mistica.js";
-import dr from "./inline.js";
-import lr from "./icon-button.js";
-import cr from "./generated/mistica-icons/icon-close-regular.js";
-import { jsx as r, jsxs as d } from "./_virtual/jsx-runtime.js";
+import { vars as A } from "./skins/skin-contract.css-mistica.js";
+import { boxed as B, mediaCard as Q, mediaCardContent as U, dataCard as V, snapCardTouchableHover as Y, snapCardTouchableHoverTransparent as Z, snapCard as L, displayCard as ee, displayCardGradient as re, actions as ae, cardActionIconButton as ie, cardActionInverse as te, cardAction as ne } from "./card.css-mistica.js";
+import { useTheme as N } from "./hooks.js";
+import { sprinkles as oe } from "./sprinkles.css-mistica.js";
+import de from "./inline.js";
+import le from "./icon-button.js";
+import se from "./generated/mistica-icons/icon-close-regular.js";
+import { jsx as e, jsxs as d } from "./_virtual/jsx-runtime.js";
 const z = (param)=>{
-    let { headline: e , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: n , subtitle: l , subtitleLinesMax: p , description: c , descriptionLinesMax: s , extra: o , button: u , buttonLink: m  } = param;
-    const f = ()=>e ? typeof e == "string" ? /* @__PURE__ */ r(O, {
+    let { headline: r , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: n , subtitle: l , subtitleLinesMax: p , description: s , descriptionLinesMax: c , extra: o , button: u , buttonLink: m  } = param;
+    const { textPresets: f  } = N(), b = ()=>r ? typeof r == "string" ? /* @__PURE__ */ e(E, {
             type: "promo",
-            children: e
-        }) : e : null;
+            children: r
+        }) : r : null;
     return /* @__PURE__ */ d("div", {
-        className: or({
+        className: oe({
             display: "flex",
             flex: 1,
             justifyContent: "space-between",
@@ -111,30 +111,34 @@ const z = (param)=>{
         children: [
             /* @__PURE__ */ d("div", {
                 children: [
-                    /* @__PURE__ */ d(b, {
+                    /* @__PURE__ */ d(g, {
                         space: 8,
                         children: [
-                            (e || a || t || l) && /* @__PURE__ */ r("header", {
-                                children: /* @__PURE__ */ d(b, {
+                            (r || a || t || l) && /* @__PURE__ */ e("header", {
+                                children: /* @__PURE__ */ d(g, {
                                     space: 8,
                                     children: [
-                                        f(),
-                                        /* @__PURE__ */ d(b, {
+                                        b(),
+                                        /* @__PURE__ */ d(g, {
                                             space: 4,
                                             children: [
-                                                a && /* @__PURE__ */ r(y, {
+                                                a && /* @__PURE__ */ e(y, {
                                                     truncate: i,
                                                     as: "div",
                                                     regular: !0,
                                                     children: a
                                                 }),
-                                                /* @__PURE__ */ r($, {
+                                                /* @__PURE__ */ e($, {
+                                                    mobileSize: 18,
+                                                    mobileLineHeight: "24px",
+                                                    desktopSize: 20,
+                                                    desktopLineHeight: "28px",
                                                     truncate: n,
+                                                    weight: f.cardTitle.weight,
                                                     as: "h3",
-                                                    regular: !0,
                                                     children: t
                                                 }),
-                                                /* @__PURE__ */ r(y, {
+                                                /* @__PURE__ */ e(y, {
                                                     truncate: p,
                                                     as: "div",
                                                     regular: !0,
@@ -145,23 +149,23 @@ const z = (param)=>{
                                     ]
                                 })
                             }),
-                            c && /* @__PURE__ */ r(y, {
-                                truncate: s,
+                            s && /* @__PURE__ */ e(y, {
+                                truncate: c,
                                 as: "p",
                                 regular: !0,
-                                color: B.colors.textSecondary,
-                                children: c
+                                color: A.colors.textSecondary,
+                                children: s
                             })
                         ]
                     }),
-                    o && /* @__PURE__ */ r("div", {
+                    o && /* @__PURE__ */ e("div", {
                         children: o
                     })
                 ]
             }),
-            (u || m) && /* @__PURE__ */ r("div", {
-                className: ar,
-                children: /* @__PURE__ */ r(w, {
+            (u || m) && /* @__PURE__ */ e("div", {
+                className: ae,
+                children: /* @__PURE__ */ e(M, {
                     primaryButton: u,
                     link: m
                 })
@@ -169,27 +173,27 @@ const z = (param)=>{
         ]
     });
 }, H = (param)=>{
-    let { "aria-label": e , className: a , style: i , children: t  } = param;
-    return J() ? /* @__PURE__ */ r("div", {
+    let { "aria-label": r , className: a , style: i , children: t  } = param;
+    return J() ? /* @__PURE__ */ e("div", {
         className: a,
         style: i,
         children: t
-    }) : /* @__PURE__ */ r("section", {
+    }) : /* @__PURE__ */ e("section", {
         className: a,
         style: i,
-        "aria-label": e,
+        "aria-label": r,
         children: t
     });
-}, Rr = /*#__PURE__*/ x.forwardRef((param, S)=>/* @__PURE__ */ {
-    let { media: e , headline: a , pretitle: i , pretitleLinesMax: t , subtitle: n , subtitleLinesMax: l , title: p , titleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: g , "aria-label": h , onClose: C  } = param;
-    return r(M, {
+}, Re = /*#__PURE__*/ x.forwardRef((param, S)=>/* @__PURE__ */ {
+    let { media: r , headline: a , pretitle: i , pretitleLinesMax: t , subtitle: n , subtitleLinesMax: l , title: p , titleLinesMax: s , description: c , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: b , "aria-label": h , onClose: C  } = param;
+    return e(R, {
         onClose: C,
         "aria-label": h,
-        children: /* @__PURE__ */ r(N, {
-            className: T,
+        children: /* @__PURE__ */ e(D, {
+            className: B,
             dataAttributes: _objectSpread({
                 "component-name": "MediaCard"
-            }, g),
+            }, b),
             ref: S,
             width: "100%",
             height: "100%",
@@ -197,21 +201,21 @@ const z = (param)=>{
                 className: Q,
                 "aria-label": h,
                 children: [
-                    /* @__PURE__ */ r(F, {
+                    /* @__PURE__ */ e(F, {
                         value: !1,
-                        children: e
+                        children: r
                     }),
-                    /* @__PURE__ */ r("div", {
+                    /* @__PURE__ */ e("div", {
                         className: U,
-                        children: /* @__PURE__ */ r(z, {
+                        children: /* @__PURE__ */ e(z, {
                             headline: a,
                             pretitle: i,
                             pretitleLinesMax: t,
                             title: p,
-                            titleLinesMax: c,
+                            titleLinesMax: s,
                             subtitle: n,
                             subtitleLinesMax: l,
-                            description: s,
+                            description: c,
                             descriptionLinesMax: o,
                             extra: u,
                             button: m,
@@ -222,16 +226,16 @@ const z = (param)=>{
             })
         })
     });
-}), zr = /*#__PURE__*/ x.forwardRef((param, S)=>/* @__PURE__ */ {
-    let { icon: e , headline: a , pretitle: i , pretitleLinesMax: t , title: n , titleLinesMax: l , subtitle: p , subtitleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: g , "aria-label": h , onClose: C  } = param;
-    return r(M, {
+}), ze = /*#__PURE__*/ x.forwardRef((param, S)=>/* @__PURE__ */ {
+    let { icon: r , headline: a , pretitle: i , pretitleLinesMax: t , title: n , titleLinesMax: l , subtitle: p , subtitleLinesMax: s , description: c , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: b , "aria-label": h , onClose: C  } = param;
+    return e(R, {
         "aria-label": h,
         onClose: C,
-        children: /* @__PURE__ */ r(N, {
-            className: T,
+        children: /* @__PURE__ */ e(D, {
+            className: B,
             dataAttributes: _objectSpread({
                 "component-name": "DataCard"
-            }, g),
+            }, b),
             ref: S,
             width: "100%",
             height: "100%",
@@ -239,19 +243,19 @@ const z = (param)=>{
                 className: V,
                 "aria-label": h,
                 children: [
-                    e && /* @__PURE__ */ r(A, {
+                    r && /* @__PURE__ */ e(T, {
                         paddingBottom: 16,
-                        children: e
+                        children: r
                     }),
-                    /* @__PURE__ */ r(z, {
+                    /* @__PURE__ */ e(z, {
                         headline: a,
                         pretitle: i,
                         pretitleLinesMax: t,
                         title: n,
                         titleLinesMax: l,
                         subtitle: p,
-                        subtitleLinesMax: c,
-                        description: s,
+                        subtitleLinesMax: s,
+                        description: c,
                         descriptionLinesMax: o,
                         extra: u,
                         button: m,
@@ -261,8 +265,8 @@ const z = (param)=>{
             })
         })
     });
-}), Hr = /*#__PURE__*/ x.forwardRef((_param, u)=>{
-    var { icon: e , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: n , dataAttributes: l , "aria-label": p , extra: c , isInverse: s = !1  } = _param, o = _objectWithoutProperties(_param, [
+}), He = /*#__PURE__*/ x.forwardRef((_param, u)=>{
+    var { icon: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: n , dataAttributes: l , "aria-label": p , extra: s , isInverse: c = !1  } = _param, o = _objectWithoutProperties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -273,43 +277,43 @@ const z = (param)=>{
         "extra",
         "isInverse"
     ]);
-    const { isDarkMode: m  } = R(), f = Boolean(o.to || o.href || o.onPress);
-    return /* @__PURE__ */ r(N, {
-        className: T,
+    const { isDarkMode: m  } = N(), f = Boolean(o.to || o.href || o.onPress);
+    return /* @__PURE__ */ e(D, {
+        className: B,
         dataAttributes: _objectSpread({
             "component-name": "SnapCard"
         }, l),
         ref: u,
-        isInverse: s,
+        isInverse: c,
         width: "100%",
         height: "100%",
-        children: /* @__PURE__ */ r(K, _objectSpreadProps(_objectSpread({
+        children: /* @__PURE__ */ e(K, _objectSpreadProps(_objectSpread({
             maybe: !0
         }, o), {
-            className: f && !s && !m ? Y : Z,
+            className: f && !c && !m ? Y : Z,
             "aria-label": p,
             children: /* @__PURE__ */ d("section", {
                 className: L,
                 children: [
                     /* @__PURE__ */ d("div", {
                         children: [
-                            e && /* @__PURE__ */ r(A, {
+                            r && /* @__PURE__ */ e(T, {
                                 paddingBottom: 16,
-                                children: e
+                                children: r
                             }),
-                            /* @__PURE__ */ d(b, {
+                            /* @__PURE__ */ d(g, {
                                 space: 4,
                                 children: [
-                                    a && /* @__PURE__ */ r(y, {
+                                    a && /* @__PURE__ */ e(y, {
                                         truncate: i,
                                         as: "h3",
                                         regular: !0,
                                         children: a
                                     }),
-                                    t && /* @__PURE__ */ r(y, {
+                                    t && /* @__PURE__ */ e(y, {
                                         truncate: n,
                                         regular: !0,
-                                        color: B.colors.textSecondary,
+                                        color: A.colors.textSecondary,
                                         as: "p",
                                         children: t
                                     })
@@ -317,56 +321,56 @@ const z = (param)=>{
                             })
                         ]
                     }),
-                    c && /* @__PURE__ */ r("div", {
-                        children: c
+                    s && /* @__PURE__ */ e("div", {
+                        children: s
                     })
                 ]
             })
         }))
     });
-}), sr = (param)=>/* @__PURE__ */ {
-    let { actions: e , isInverse: a  } = param;
-    return r(dr, {
+}), ce = (param)=>/* @__PURE__ */ {
+    let { actions: r , isInverse: a  } = param;
+    return e(de, {
         space: 0,
-        children: e.map((param, l)=>/* @__PURE__ */ {
+        children: r.map((param, l)=>/* @__PURE__ */ {
             let { onPress: i , label: t , Icon: n  } = param;
-            return r(lr, {
+            return e(le, {
                 size: 48,
                 onPress: i,
                 "aria-label": t,
-                className: ir,
+                className: ie,
                 style: {
                     display: "flex"
                 },
-                children: /* @__PURE__ */ r("div", {
-                    className: a ? tr : nr,
-                    children: /* @__PURE__ */ r(n, {
-                        color: B.colors.neutralHigh,
+                children: /* @__PURE__ */ e("div", {
+                    className: a ? te : ne,
+                    children: /* @__PURE__ */ e(n, {
+                        color: A.colors.neutralHigh,
                         size: 20
                     })
                 })
             }, l);
         })
     });
-}, mr = {
+}, me = {
     "1:1": "1",
     "16:9": "16 / 9",
     "7:10": "7 / 10",
     "9:10": "9 / 10",
     auto: "auto"
-}, hr = (param)=>{
-    let { children: e , width: a = "100%" , height: i = "100%" , aspectRatio: t , actions: n , onClose: l , isInverse: p , "aria-label": c  } = param;
-    const { texts: s  } = R(), o = n ? [
+}, he = (param)=>{
+    let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: t , actions: n , onClose: l , isInverse: p , "aria-label": s  } = param;
+    const { texts: c  } = N(), o = n ? [
         ...n
     ] : [];
     l && o.push({
-        label: s.closeButtonLabel,
+        label: c.closeButtonLabel,
         onPress: l,
-        Icon: cr
+        Icon: se
     });
-    const u = o.length > 0, m = t ? typeof t == "number" ? String(t) : mr[t] : void 0;
+    const u = o.length > 0, m = t ? typeof t == "number" ? String(t) : me[t] : void 0;
     return /* @__PURE__ */ d("section", {
-        "aria-label": c,
+        "aria-label": s,
         style: {
             width: a,
             height: i,
@@ -374,88 +378,88 @@ const z = (param)=>{
             position: "relative"
         },
         children: [
-            e,
-            u && /* @__PURE__ */ r("div", {
+            r,
+            u && /* @__PURE__ */ e("div", {
                 style: {
                     position: "absolute",
                     right: 8,
                     top: 8
                 },
-                children: /* @__PURE__ */ r(sr, {
+                children: /* @__PURE__ */ e(ce, {
                     actions: o,
                     isInverse: p
                 })
             })
         ]
     });
-}, I = /*#__PURE__*/ x.forwardRef((param, _)=>{
-    let { isInverse: e , backgroundImage: a , icon: i , headline: t , pretitle: n , pretitleLinesMax: l , title: p , titleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , secondaryButton: f , onClose: g , actions: h , buttonLink: C , dataAttributes: S , width: G , height: j , aspectRatio: k , "aria-label": X  } = param;
-    const v = !!a, D = v ? "0 0 16px rgba(0,0,0,0.4)" : void 0, E = (h == null ? void 0 : h.length) || g;
-    return /* @__PURE__ */ r(hr, {
-        width: G,
-        height: j,
-        aspectRatio: k,
-        onClose: g,
+}, k = /*#__PURE__*/ x.forwardRef((param, X)=>{
+    let { isInverse: r , backgroundImage: a , icon: i , headline: t , pretitle: n , pretitleLinesMax: l , title: p , titleLinesMax: s , description: c , descriptionLinesMax: o , extra: u , button: m , secondaryButton: f , onClose: b , actions: h , buttonLink: C , dataAttributes: S , width: I , height: G , aspectRatio: j , "aria-label": P  } = param;
+    const v = !!a, w = v ? "0 0 16px rgba(0,0,0,0.4)" : void 0, _ = (h == null ? void 0 : h.length) || b;
+    return /* @__PURE__ */ e(he, {
+        width: I,
+        height: G,
+        aspectRatio: j,
+        onClose: b,
         actions: h,
-        "aria-label": X,
-        isInverse: e,
-        children: /* @__PURE__ */ r(q, {
+        "aria-label": P,
+        isInverse: r,
+        children: /* @__PURE__ */ e(q, {
             borderRadius: 16,
-            className: T,
+            className: B,
             dataAttributes: S,
-            ref: _,
+            ref: X,
             width: "100%",
             minHeight: "100%",
-            isInverse: e,
-            background: e && a ? B.colors.backgroundContainer : void 0,
+            isInverse: r,
+            background: r && a ? A.colors.backgroundContainer : void 0,
             children: /* @__PURE__ */ d("div", {
-                className: rr,
+                className: ee,
                 style: {
                     backgroundImage: a ? `url("${CSS.escape(a)}")` : void 0,
-                    paddingTop: v && !i && !E ? 0 : 24
+                    paddingTop: v && !i && !_ ? 0 : 24
                 },
                 children: [
-                    i ? /* @__PURE__ */ r(A, {
+                    i ? /* @__PURE__ */ e(T, {
                         paddingBottom: v ? 0 : 40,
                         paddingX: 24,
                         children: i
-                    }) : /* @__PURE__ */ r(A, {
-                        paddingBottom: (h == null ? void 0 : h.length) || g ? v ? 24 : 64 : 0
+                    }) : /* @__PURE__ */ e(T, {
+                        paddingBottom: (h == null ? void 0 : h.length) || b ? v ? 24 : 64 : 0
                     }),
-                    /* @__PURE__ */ r(A, {
+                    /* @__PURE__ */ e(T, {
                         paddingX: 24,
                         paddingTop: v ? 40 : 0,
                         paddingBottom: 24,
-                        className: v ? er : void 0,
-                        children: /* @__PURE__ */ d(b, {
+                        className: v ? re : void 0,
+                        children: /* @__PURE__ */ d(g, {
                             space: 24,
                             children: [
                                 /* @__PURE__ */ d("div", {
                                     children: [
-                                        /* @__PURE__ */ d(b, {
+                                        /* @__PURE__ */ d(g, {
                                             space: 8,
                                             children: [
-                                                (t || n || p) && /* @__PURE__ */ r("header", {
-                                                    children: /* @__PURE__ */ d(b, {
+                                                (t || n || p) && /* @__PURE__ */ e("header", {
+                                                    children: /* @__PURE__ */ d(g, {
                                                         space: 16,
                                                         children: [
                                                             t,
-                                                            /* @__PURE__ */ d(b, {
+                                                            /* @__PURE__ */ d(g, {
                                                                 space: 4,
                                                                 children: [
-                                                                    n && /* @__PURE__ */ r(y, {
+                                                                    n && /* @__PURE__ */ e(y, {
                                                                         forceMobileSizes: !0,
                                                                         truncate: l,
                                                                         as: "div",
                                                                         regular: !0,
-                                                                        textShadow: D,
+                                                                        textShadow: w,
                                                                         children: n
                                                                     }),
-                                                                    /* @__PURE__ */ r(P, {
+                                                                    /* @__PURE__ */ e(O, {
                                                                         forceMobileSizes: !0,
-                                                                        truncate: c,
+                                                                        truncate: s,
                                                                         as: "h3",
-                                                                        textShadow: D,
+                                                                        textShadow: w,
                                                                         children: p
                                                                     })
                                                                 ]
@@ -463,21 +467,21 @@ const z = (param)=>{
                                                         ]
                                                     })
                                                 }),
-                                                s && /* @__PURE__ */ r(W, {
+                                                c && /* @__PURE__ */ e(W, {
                                                     forceMobileSizes: !0,
                                                     truncate: o,
                                                     as: "p",
                                                     regular: !0,
-                                                    color: B.colors.textSecondary,
-                                                    textShadow: D,
-                                                    children: s
+                                                    color: A.colors.textSecondary,
+                                                    textShadow: w,
+                                                    children: c
                                                 })
                                             ]
                                         }),
                                         u
                                     ]
                                 }),
-                                (m || f || C) && /* @__PURE__ */ r(w, {
+                                (m || f || C) && /* @__PURE__ */ e(M, {
                                     primaryButton: m,
                                     secondaryButton: f,
                                     link: C
@@ -489,26 +493,26 @@ const z = (param)=>{
             })
         })
     });
-}), Ir = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, a = _objectWithoutProperties(_param, [
+}), ke = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
+    var { dataAttributes: r  } = _param, a = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    return r(I, _objectSpreadProps(_objectSpread({}, a), {
+    return e(k, _objectSpreadProps(_objectSpread({}, a), {
         ref: i,
         isInverse: !0,
-        dataAttributes: _objectSpreadProps(_objectSpread({}, e), {
+        dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
             "component-name": "DisplayMediaCard"
         })
     }));
-}), Gr = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, a = _objectWithoutProperties(_param, [
+}), Ie = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
+    var { dataAttributes: r  } = _param, a = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    return r(I, _objectSpreadProps(_objectSpread({}, a), {
+    return e(k, _objectSpreadProps(_objectSpread({}, a), {
         ref: i,
-        dataAttributes: _objectSpreadProps(_objectSpread({}, e), {
+        dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
             "component-name": "DisplayDataCard"
         })
     }));
 });
-export { zr as DataCard, Gr as DisplayDataCard, Ir as DisplayMediaCard, Rr as MediaCard, Hr as SnapCard };
+export { ze as DataCard, Ie as DisplayDataCard, ke as DisplayMediaCard, Re as MediaCard, He as SnapCard };