@telefonica/mistica 15.15.0 → 15.16.0

package/dist-es/community/advanced-data-card.js

@@ -78,32 +78,32 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as t, jsx as r, Fragment as X } from "react/jsx-runtime";
-import * as Y from "react";
-import { Boxed as _ } from "../boxed.js";
+import { jsxs as e, jsx as r, Fragment as Y } from "react/jsx-runtime";
+import * as _ from "react";
+import { Boxed as $ } from "../boxed.js";
 import { sprinkles as T } from "../sprinkles.css-mistica.js";
 import P from "../stack.js";
-import { dataCard as $, MIN_HEIGHT as q, touchable as J, touchableCardHoverOverlay as K, cardContentStyle as Q, minHeight as U, topActionsWithoutIcon as Z, zindex as L, paddingX as rr, divider as tr, actions as er, actionsVariants as ar, marginRightButton as ir, buttonMobile as S, footerDirection as or, marginRightAuto as sr, footerText as nr, adjustButtonLink as dr, button as cr, vars as lr } from "./advanced-data-card.css-mistica.js";
-import { vars as mr } from "../image.css-mistica.js";
+import { dataCard as q, MIN_HEIGHT as J, touchable as K, touchableCardHoverOverlay as Q, cardContentStyle as U, minHeight as Z, topActionsWithoutIcon as L, zindex as rr, paddingX as er, divider as tr, actions as ar, actionsVariants as ir, marginRightButton as or, buttonMobile as S, footerDirection as sr, marginRightAuto as nr, footerText as dr, adjustButtonLink as cr, button as lr, vars as mr } from "./advanced-data-card.css-mistica.js";
+import { vars as hr } from "../image.css-mistica.js";
 import j from "../divider.js";
-import { Text2 as f, Text as hr, textProps as pr } from "../text.js";
+import { Text2 as g, Text as pr, textProps as ur } from "../text.js";
 import { vars as y } from "../skins/skin-contract.css-mistica.js";
 import N from "../box.js";
-import ur from "../touchable.js";
+import vr from "../touchable.js";
 import u from "classnames";
-import { CardActionsGroup as vr } from "../card.js";
+import { CardActionsGroup as fr } from "../card.js";
 import { useTheme as gr } from "../hooks.js";
-import { getPrefixedDataAttributes as fr } from "../utils/dom.js";
-import yr from "../inline.js";
+import { getPrefixedDataAttributes as yr } from "../utils/dom.js";
+import Nr from "../inline.js";
 import { applyCssVars as E } from "../utils/css.js";
-const Nr = (param)=>{
-    let { headline: a, pretitle: i, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: d = "h3", titleLinesMax: c, subtitle: l, subtitleLinesMax: o, description: e, descriptionLinesMax: h } = param;
+const xr = (param)=>{
+    let { headline: a, pretitle: i, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: d = "h3", titleLinesMax: c, subtitle: l, subtitleLinesMax: o, description: t, descriptionLinesMax: h } = param;
     const { textPresets: x } = gr();
-    return /* @__PURE__ */ t(P, {
+    return /* @__PURE__ */ e(P, {
         space: 4,
         children: [
             a,
-            i && /* @__PURE__ */ r(f, {
+            i && /* @__PURE__ */ r(g, {
                 color: y.colors.textPrimary,
                 truncate: m,
                 as: s,
@@ -111,14 +111,14 @@ const Nr = (param)=>{
                 hyphens: "auto",
                 children: i
             }),
-            /* @__PURE__ */ r(hr, _object_spread_props(_object_spread({}, pr.text4), {
+            /* @__PURE__ */ r(pr, _object_spread_props(_object_spread({}, ur.text4), {
                 truncate: c,
                 weight: x.cardTitle.weight,
                 as: d,
                 hyphens: "auto",
                 children: n
             })),
-            /* @__PURE__ */ r(f, {
+            /* @__PURE__ */ r(g, {
                 color: y.colors.textPrimary,
                 truncate: o,
                 as: "p",
@@ -126,34 +126,34 @@ const Nr = (param)=>{
                 hyphens: "auto",
                 children: l
             }),
-            e && /* @__PURE__ */ r(f, {
+            t && /* @__PURE__ */ r(g, {
                 truncate: h,
                 as: "p",
                 regular: !0,
                 color: y.colors.textSecondary,
                 hyphens: "auto",
-                children: e
+                children: t
             })
         ]
     });
-}, xr = (param)=>{
+}, Cr = (param)=>{
     let { button: a, footerImage: i, footerText: s, footerTextLinesMax: m, buttonLink: n } = param;
-    const d = !!a, c = !!i, l = !!s, o = !!n, e = d && (c || l) && o, h = o && !e ? "178px" : "";
-    return /* @__PURE__ */ t(X, {
+    const d = !!a, c = !!i, l = !!s, o = !!n, t = d && (c || l) && o, h = o && !t ? "178px" : "";
+    return /* @__PURE__ */ e(Y, {
         children: [
             /* @__PURE__ */ r("div", {
                 className: tr,
                 children: /* @__PURE__ */ r(j, {})
             }),
-            /* @__PURE__ */ t("div", {
-                className: u(er, ar[e ? "mobile" : "default"]),
+            /* @__PURE__ */ e("div", {
+                className: u(ar, ir[t ? "mobile" : "default"]),
                 children: [
                     d && /* @__PURE__ */ r("div", {
-                        className: u(ir, S),
+                        className: u(or, S),
                         children: a
                     }),
-                    /* @__PURE__ */ t("div", {
-                        className: u(or, e ? sr : T({
+                    /* @__PURE__ */ e("div", {
+                        className: u(sr, t ? nr : T({
                             paddingTop: 16
                         })),
                         children: [
@@ -165,7 +165,7 @@ const Nr = (param)=>{
                                 }),
                                 children: /* @__PURE__ */ r("div", {
                                     style: E({
-                                        [mr.mediaBorderRadius]: y.borderRadii.mediaSmall
+                                        [hr.mediaBorderRadius]: y.borderRadii.mediaSmall
                                     }),
                                     children: i
                                 })
@@ -174,8 +174,8 @@ const Nr = (param)=>{
                                 style: {
                                     maxWidth: h
                                 },
-                                className: nr,
-                                children: /* @__PURE__ */ r(f, {
+                                className: dr,
+                                children: /* @__PURE__ */ r(g, {
                                     truncate: m,
                                     regular: !0,
                                     children: s
@@ -184,15 +184,15 @@ const Nr = (param)=>{
                         ]
                     }),
                     o && /* @__PURE__ */ r("div", {
-                        className: u(dr, e ? cr : S),
+                        className: u(cr, t ? lr : S),
                         children: n
                     })
                 ]
             })
         ]
     });
-}, Cr = /*#__PURE__*/ Y.forwardRef((_param, W)=>{
-    var { stackingGroup: a, headline: i, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: d, titleAs: c, titleLinesMax: l, subtitle: o, subtitleLinesMax: e, description: h, descriptionLinesMax: x, extra: p, extraDividerPadding: G = 24, button: A, footerImage: B, footerText: b, footerTextLinesMax: M, buttonLink: R, dataAttributes: V, actions: v, "aria-label": w, onClose: D } = _param, g = _object_without_properties(_param, [
+}, Tr = /*#__PURE__*/ _.forwardRef((_param, k)=>{
+    var { stackingGroup: a, headline: i, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: d, titleAs: c, titleLinesMax: l, subtitle: o, subtitleLinesMax: t, description: h, descriptionLinesMax: x, extra: p, extraDividerPadding: G = 24, noExtraDivider: M = !1, button: A, footerImage: B, footerText: b, footerTextLinesMax: V, buttonLink: R, dataAttributes: W, actions: v, "aria-label": w, onClose: D } = _param, f = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",
@@ -207,6 +207,7 @@ const Nr = (param)=>{
         "descriptionLinesMax",
         "extra",
         "extraDividerPadding",
+        "noExtraDivider",
         "button",
         "footerImage",
         "footerText",
@@ -217,49 +218,49 @@ const Nr = (param)=>{
         "aria-label",
         "onClose"
     ]);
-    const C = !!g.href || !!g.onPress || !!g.to, k = {
+    const C = !!f.href || !!f.onPress || !!f.to, z = {
         button: A,
         footerImage: B,
         footerText: b,
-        footerTextLinesMax: M,
+        footerTextLinesMax: V,
         buttonLink: R
-    }, F = !!A || !!B || !!b || !!R, H = !!(p != null && p.length), z = ((v == null ? void 0 : v.length) || 0) + (D ? 1 : 0);
-    return /* @__PURE__ */ t("section", _object_spread_props(_object_spread({
+    }, F = !!A || !!B || !!b || !!R, H = !!(p != null && p.length), O = ((v == null ? void 0 : v.length) || 0) + (D ? 1 : 0);
+    return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({
         className: T({
             position: "relative",
             height: "100%"
         })
-    }, fr(V, "AdvancedDataCard")), {
-        ref: W,
+    }, yr(W, "AdvancedDataCard")), {
+        ref: k,
         "aria-label": C ? void 0 : w,
         children: [
-            /* @__PURE__ */ t(_, {
-                className: $,
+            /* @__PURE__ */ e($, {
+                className: q,
                 width: "100%",
                 height: "100%",
-                minHeight: q,
+                minHeight: J,
                 children: [
-                    /* @__PURE__ */ t(ur, _object_spread_props(_object_spread({
+                    /* @__PURE__ */ e(vr, _object_spread_props(_object_spread({
                         maybe: !0
-                    }, g), {
+                    }, f), {
                         "aria-label": C ? w : void 0,
-                        className: J,
+                        className: K,
                         children: [
                             C && /* @__PURE__ */ r("div", {
-                                className: K
+                                className: Q
                             }),
                             /* @__PURE__ */ r("div", {
-                                className: u(Q, !F && !H ? U : ""),
+                                className: u(U, !F && !H ? Z : ""),
                                 children: /* @__PURE__ */ r(N, {
                                     paddingTop: 8,
-                                    children: /* @__PURE__ */ t(yr, {
+                                    children: /* @__PURE__ */ e(Nr, {
                                         space: 0,
                                         children: [
-                                            /* @__PURE__ */ t(P, {
+                                            /* @__PURE__ */ e(P, {
                                                 space: 8,
                                                 children: [
                                                     a,
-                                                    /* @__PURE__ */ r(Nr, {
+                                                    /* @__PURE__ */ r(xr, {
                                                         headline: i,
                                                         pretitle: s,
                                                         pretitleAs: m,
@@ -268,7 +269,7 @@ const Nr = (param)=>{
                                                         titleAs: c,
                                                         titleLinesMax: l,
                                                         subtitle: o,
-                                                        subtitleLinesMax: e,
+                                                        subtitleLinesMax: t,
                                                         description: h,
                                                         descriptionLinesMax: x
                                                     })
@@ -276,9 +277,9 @@ const Nr = (param)=>{
                                             }),
                                             !a && /* @__PURE__ */ r("div", {
                                                 style: E({
-                                                    [lr.topActionsCount]: String(z)
+                                                    [mr.topActionsCount]: String(O)
                                                 }),
-                                                className: Z
+                                                className: L
                                             })
                                         ]
                                     })
@@ -293,30 +294,30 @@ const Nr = (param)=>{
                                 paddingTop: 16,
                                 paddingBottom: 24,
                                 width: "100%",
-                                className: L,
-                                children: p.map((O, I)=>/* @__PURE__ */ t("div", {
+                                className: rr,
+                                children: p.map((X, I)=>/* @__PURE__ */ e("div", {
                                         children: [
                                             /* @__PURE__ */ r("div", {
-                                                className: rr,
-                                                children: O
+                                                className: er,
+                                                children: X
                                             }),
                                             I + 1 !== p.length && /* @__PURE__ */ r(N, {
                                                 paddingY: G,
-                                                children: /* @__PURE__ */ r(j, {})
+                                                children: !M && /* @__PURE__ */ r(j, {})
                                             })
                                         ]
                                     }, I))
                             })
                         ]
                     })),
-                    F && /* @__PURE__ */ r(xr, _object_spread({}, k))
+                    F && /* @__PURE__ */ r(Cr, _object_spread({}, z))
                 ]
             }),
-            /* @__PURE__ */ r(vr, {
+            /* @__PURE__ */ r(fr, {
                 actions: v,
                 onClose: D
             })
         ]
     }));
-}), Wr = Cr;
-export { Cr as AdvancedDataCard, Wr as default };
+}), kr = Tr;
+export { Tr as AdvancedDataCard, kr as default };

package/dist-es/community/blocks.js

@@ -1,40 +1,40 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import p from "../stack.js";
-import { column as x, rightContent as y } from "./blocks.css-mistica.js";
-import { vars as v } from "../image.css-mistica.js";
-import { Text2 as n, Text5 as f, Text8 as m, Text3 as S } from "../text.js";
-import { vars as o } from "../skins/skin-contract.css-mistica.js";
-import s from "../inline.js";
+import y from "../stack.js";
+import { column as p, rightContent as S } from "./blocks.css-mistica.js";
+import { vars as B } from "../image.css-mistica.js";
+import { Text2 as n, Text5 as I, Text8 as m, Text3 as P } from "../text.js";
+import { vars as e } from "../skins/skin-contract.css-mistica.js";
+import d from "../inline.js";
 import u from "../box.js";
-import { ProgressBar as B } from "../progress-bar.js";
-import I from "classnames";
-import { applyCssVars as k } from "../utils/css.js";
+import { ProgressBar as k } from "../progress-bar.js";
+import R from "classnames";
+import { applyCssVars as T } from "../utils/css.js";
 const g = (param)=>{
-    let { title: a, description: e } = param;
-    const l = typeof e == "string" ? [
-        e
-    ] : e;
+    let { title: a, description: l } = param;
+    const o = typeof l == "string" ? [
+        l
+    ] : l;
     return /* @__PURE__ */ c("div", {
-        className: x,
+        className: p,
         children: [
-            /* @__PURE__ */ r(S, {
+            /* @__PURE__ */ r(P, {
                 regular: !0,
-                color: o.colors.textPrimary,
+                color: e.colors.textPrimary,
                 children: a
             }),
-            l && l.map((t, i)=>/* @__PURE__ */ r(n, {
+            o && o.map((t, i)=>/* @__PURE__ */ r(n, {
                     regular: !0,
-                    color: o.colors.textSecondary,
+                    color: e.colors.textSecondary,
                     as: "p",
                     children: t
                 }, i))
         ]
     });
-}, q = (param)=>{
-    let { title: a, stackingGroup: e, description: l, "aria-label": t } = param;
+}, E = (param)=>{
+    let { title: a, stackingGroup: l, description: o, "aria-label": t } = param;
     return /* @__PURE__ */ r("div", {
         "aria-label": t,
-        children: /* @__PURE__ */ c(s, {
+        children: /* @__PURE__ */ c(d, {
             space: "between",
             alignItems: "center",
             children: [
@@ -45,59 +45,59 @@ const g = (param)=>{
                         children: a
                     })
                 }),
-                e || /* @__PURE__ */ r(n, {
+                l || /* @__PURE__ */ r(n, {
                     regular: !0,
-                    color: o.colors.textSecondary,
+                    color: e.colors.textSecondary,
                     textAlign: "right",
                     as: "div",
-                    children: l
+                    children: o
                 })
             ]
         })
     });
-}, z = (param)=>{
-    let { image: a, description: e, "aria-label": l } = param;
+}, F = (param)=>{
+    let { image: a, description: l, "aria-label": o } = param;
     return /* @__PURE__ */ r("div", {
-        "aria-label": l,
-        children: /* @__PURE__ */ c(s, {
+        "aria-label": o,
+        children: /* @__PURE__ */ c(d, {
             space: 16,
             alignItems: "center",
             children: [
                 /* @__PURE__ */ r("div", {
-                    style: k({
-                        [v.mediaBorderRadius]: o.borderRadii.mediaSmall
+                    style: T({
+                        [B.mediaBorderRadius]: e.borderRadii.mediaSmall
                     }),
                     children: a
                 }),
                 /* @__PURE__ */ r(n, {
                     regular: !0,
-                    color: o.colors.textSecondary,
-                    children: e
+                    color: e.colors.textSecondary,
+                    children: l
                 })
             ]
         })
     });
-}, D = (param)=>{
-    let { title: a, description: e, secondaryValue: l, value: t, valueColor: i = o.colors.textPrimary, "aria-label": d } = param;
-    return /* @__PURE__ */ c(s, {
+}, J = (param)=>{
+    let { title: a, description: l, secondaryValue: o, value: t, valueColor: i = e.colors.textPrimary, "aria-label": s } = param;
+    return /* @__PURE__ */ c(d, {
         space: "between",
         alignItems: "flex-end",
-        "aria-label": d,
+        "aria-label": s,
         children: [
             /* @__PURE__ */ r(g, {
                 title: a,
-                description: e
+                description: l
             }),
             /* @__PURE__ */ c("div", {
-                className: I(x, y),
+                className: R(p, S),
                 children: [
                     /* @__PURE__ */ r(n, {
                         regular: !0,
-                        color: o.colors.textSecondary,
+                        color: e.colors.textSecondary,
                         decoration: "line-through",
-                        children: l
+                        children: o
                     }),
-                    /* @__PURE__ */ r(f, {
+                    /* @__PURE__ */ r(I, {
                         color: i,
                         children: t
                     })
@@ -105,91 +105,109 @@ const g = (param)=>{
             })
         ]
     });
-}, E = (param)=>{
-    let { headline: a, mainHeading: e, secondHeading: l, secondaryValue: t, title: i, description: d, valueColor: h = o.colors.textPrimary, "aria-label": b } = param;
+}, K = (param)=>{
+    let { headline: a, headings: l, mainHeading: o, secondHeading: t, secondaryValue: i, title: s, description: h, valueColor: b = e.colors.textPrimary, "aria-label": v } = param;
     return /* @__PURE__ */ c("div", {
-        "aria-label": b,
+        "aria-label": v,
         children: [
             a && /* @__PURE__ */ r(u, {
                 paddingBottom: 24,
                 children: a
             }),
-            /* @__PURE__ */ c(p, {
+            /* @__PURE__ */ c(y, {
                 space: 2,
                 children: [
-                    /* @__PURE__ */ c(s, {
+                    l && l.map((x, f)=>/* @__PURE__ */ {
+                        var _x_valueColor;
+                        return c(d, {
+                            space: 8,
+                            alignItems: "baseline",
+                            children: [
+                                /* @__PURE__ */ r(m, {
+                                    color: (_x_valueColor = x.valueColor) !== null && _x_valueColor !== void 0 ? _x_valueColor : e.colors.textPrimary,
+                                    children: x.value
+                                }),
+                                /* @__PURE__ */ r(n, {
+                                    regular: !0,
+                                    color: e.colors.textSecondary,
+                                    children: x.text
+                                })
+                            ]
+                        }, f);
+                    }),
+                    o && /* @__PURE__ */ c(d, {
                         space: 8,
                         alignItems: "baseline",
                         children: [
                             /* @__PURE__ */ r(m, {
-                                color: h,
-                                children: e.value
+                                color: b,
+                                children: o.value
                             }),
                             /* @__PURE__ */ r(n, {
                                 regular: !0,
-                                color: o.colors.textSecondary,
-                                children: e.text
+                                color: e.colors.textSecondary,
+                                children: o.text
                             })
                         ]
                     }),
-                    l && /* @__PURE__ */ c(s, {
+                    t && /* @__PURE__ */ c(d, {
                         space: 8,
                         alignItems: "baseline",
                         children: [
                             /* @__PURE__ */ r(m, {
-                                color: h,
-                                children: l.value
+                                color: b,
+                                children: t.value
                             }),
                             /* @__PURE__ */ r(n, {
                                 regular: !0,
-                                color: o.colors.textSecondary,
-                                children: l.text
+                                color: e.colors.textSecondary,
+                                children: t.text
                             })
                         ]
                     }),
-                    t && /* @__PURE__ */ r(m, {
-                        color: o.colors.textSecondary,
-                        children: t
+                    i && /* @__PURE__ */ r(m, {
+                        color: e.colors.textSecondary,
+                        children: i
                     })
                 ]
             }),
-            i || d ? /* @__PURE__ */ r(u, {
+            s || h ? /* @__PURE__ */ r(u, {
                 paddingTop: 8,
                 children: /* @__PURE__ */ r(g, {
-                    title: i,
-                    description: d
+                    title: s,
+                    description: h
                 })
             }) : null
         ]
     });
-}, F = (param)=>{
-    let { title: a, value: e, description: l, valueColor: t = o.colors.textPrimary, "aria-label": i } = param;
+}, M = (param)=>{
+    let { title: a, value: l, description: o, valueColor: t = e.colors.textPrimary, "aria-label": i } = param;
     return /* @__PURE__ */ c("div", {
         "aria-label": i,
-        className: x,
+        className: p,
         children: [
             /* @__PURE__ */ r(n, {
                 regular: !0,
-                color: o.colors.textPrimary,
+                color: e.colors.textPrimary,
                 children: a
             }),
             /* @__PURE__ */ r(m, {
                 color: t,
-                children: e
+                children: l
             }),
             /* @__PURE__ */ r(g, {
-                description: l
+                description: o
             })
         ]
     });
-}, J = (param)=>{
-    let { title: a, stackingGroup: e, progressPercent: l, reverse: t, heading: i, description: d, "aria-label": h } = param;
+}, O = (param)=>{
+    let { title: a, stackingGroup: l, progressPercent: o, reverse: t, heading: i, description: s, "aria-label": h } = param;
     return /* @__PURE__ */ r("div", {
         "aria-label": h,
-        children: /* @__PURE__ */ c(p, {
+        children: /* @__PURE__ */ c(y, {
             space: 8,
             children: [
-                /* @__PURE__ */ c(s, {
+                /* @__PURE__ */ c(d, {
                     space: "between",
                     alignItems: "flex-end",
                     children: [
@@ -200,36 +218,36 @@ const g = (param)=>{
                                 children: a
                             })
                         }),
-                        e
+                        l
                     ]
                 }),
-                l !== void 0 && /* @__PURE__ */ r(B, {
+                o !== void 0 && /* @__PURE__ */ r(k, {
                     "aria-hidden": !0,
-                    progressPercent: l,
+                    progressPercent: o,
                     reverse: t
                 }),
-                /* @__PURE__ */ c(s, {
+                /* @__PURE__ */ c(d, {
                     space: 8,
                     alignItems: "baseline",
                     children: [
                         /* @__PURE__ */ r(m, {
-                            color: i.valueColor || o.colors.textPrimary,
+                            color: i.valueColor || e.colors.textPrimary,
                             children: i.value
                         }),
                         /* @__PURE__ */ r(n, {
                             regular: !0,
-                            color: o.colors.textSecondary,
+                            color: e.colors.textSecondary,
                             children: i.text
                         })
                     ]
                 }),
-                d && /* @__PURE__ */ r(n, {
+                s && /* @__PURE__ */ r(n, {
                     regular: !0,
-                    color: o.colors.textSecondary,
-                    children: d
+                    color: e.colors.textSecondary,
+                    children: s
                 })
             ]
         })
     });
 };
-export { E as HighlightedValueBlock, D as InformationBlock, J as ProgressBlock, q as RowBlock, z as SimpleBlock, F as ValueBlock };
+export { K as HighlightedValueBlock, J as InformationBlock, O as ProgressBlock, E as RowBlock, F as SimpleBlock, M as ValueBlock };