@telefonica/mistica 15.9.0 → 15.11.0

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

@@ -78,23 +78,23 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as e, jsxs as t, Fragment as k } from "react/jsx-runtime";
+import { jsx as e, jsxs as t, Fragment as j } from "react/jsx-runtime";
 import * as X from "react";
 import { Boxed as Y } from "../boxed.js";
 import { sprinkles as b } from "../sprinkles.css-mistica.js";
-import z from "../stack.js";
-import { dataCard as $, touchableContainer as q, touchableCardOverlay as J, cardContentStyle as K, minHeight as Q, topActionsWithoutIcon as U, zindex as Z, paddingX as _, touchableArea as ee, divider as re, actions as te, actionsVariants as ae, marginRightButton as ie, buttonMobile as j, footerDirection as oe, marginRightAuto as se, footerText as ne, adjustButtonLink as de, button as ce, vars as le } from "./advanced-data-card.css-mistica.js";
-import { vars as me } from "../image.css-mistica.js";
-import H from "../divider.js";
-import { Text2 as v, Text as he } from "../text.js";
-import { vars as y } from "../skins/skin-contract.css-mistica.js";
-import N from "../box.js";
-import pe from "../touchable.js";
+import k from "../stack.js";
+import { dataCard as _, MIN_HEIGHT as $, touchableContainer as q, touchableCardOverlay as J, cardContentStyle as K, minHeight as Q, topActionsWithoutIcon as U, zindex as Z, paddingX as ee, touchableArea as re, divider as te, actions as ae, actionsVariants as ie, marginRightButton as oe, buttonMobile as F, footerDirection as se, marginRightAuto as ne, footerText as de, adjustButtonLink as ce, button as le, vars as me } from "./advanced-data-card.css-mistica.js";
+import { vars as he } from "../image.css-mistica.js";
+import z from "../divider.js";
+import { Text2 as v, Text as pe } from "../text.js";
+import { vars as N } from "../skins/skin-contract.css-mistica.js";
+import y from "../box.js";
+import ue from "../touchable.js";
 import h from "classnames";
-import { CardActionsGroup as ue } from "../card.js";
-import { useTheme as ge } from "../hooks.js";
-import { getPrefixedDataAttributes as fe } from "../utils/dom.js";
-import ve from "../inline.js";
+import { CardActionsGroup as ge } from "../card.js";
+import { useTheme as fe } from "../hooks.js";
+import { getPrefixedDataAttributes as ve } from "../utils/dom.js";
+import Ne from "../inline.js";
 import { applyCssVars as P } from "../utils/css.js";
 const ye = (_param)=>{
     var { headline: a, pretitle: i, pretitleAs: n = "p", pretitleLinesMax: p, title: d, titleAs: c = "h3", titleLinesMax: l, subtitle: m, subtitleLinesMax: o, description: r, descriptionLinesMax: u, ariaLabel: x } = _param, s = _object_without_properties(_param, [
@@ -111,28 +111,28 @@ const ye = (_param)=>{
         "descriptionLinesMax",
         "ariaLabel"
     ]);
-    const { textPresets: C } = ge();
-    return /* @__PURE__ */ t(z, {
+    const { textPresets: C } = fe();
+    return /* @__PURE__ */ t(k, {
         space: 4,
         children: [
             a,
-            /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({
+            /* @__PURE__ */ e(ue, _object_spread_props(_object_spread({
                 tabIndex: 0,
                 maybe: !0,
-                className: h(ee)
+                className: h(re)
             }, s), {
                 "aria-label": x,
-                children: /* @__PURE__ */ e(k, {})
+                children: /* @__PURE__ */ e(j, {})
             })),
             i && /* @__PURE__ */ e(v, {
-                color: y.colors.textPrimary,
+                color: N.colors.textPrimary,
                 truncate: p,
                 as: n,
                 regular: !0,
                 hyphens: "auto",
                 children: i
             }),
-            /* @__PURE__ */ e(he, {
+            /* @__PURE__ */ e(pe, {
                 mobileSize: 18,
                 mobileLineHeight: "24px",
                 desktopSize: 20,
@@ -144,7 +144,7 @@ const ye = (_param)=>{
                 children: d
             }),
             /* @__PURE__ */ e(v, {
-                color: y.colors.textPrimary,
+                color: N.colors.textPrimary,
                 truncate: o,
                 as: "p",
                 regular: !0,
@@ -155,34 +155,34 @@ const ye = (_param)=>{
                 truncate: u,
                 as: "p",
                 regular: !0,
-                color: y.colors.textSecondary,
+                color: N.colors.textSecondary,
                 hyphens: "auto",
                 children: r
             })
         ]
     });
-}, Ne = (param)=>{
+}, xe = (param)=>{
     let { button: a, footerImage: i, footerText: n, footerTextLinesMax: p, buttonLink: d } = param;
     const c = !!a, l = !!i, m = !!n, o = !!d, r = c && (l || m) && o, u = o && !r ? "178px" : "";
-    return /* @__PURE__ */ t(k, {
+    return /* @__PURE__ */ t(j, {
         children: [
             /* @__PURE__ */ e("div", {
-                className: re,
-                children: /* @__PURE__ */ e(H, {})
+                className: te,
+                children: /* @__PURE__ */ e(z, {})
             }),
             /* @__PURE__ */ t("div", {
-                className: h(te, ae[r ? "mobile" : "default"]),
+                className: h(ae, ie[r ? "mobile" : "default"]),
                 children: [
                     c && /* @__PURE__ */ e("div", {
-                        className: h(ie, j),
+                        className: h(oe, F),
                         children: a
                     }),
                     /* @__PURE__ */ t("div", {
-                        className: h(oe, r ? se : b({
+                        className: h(se, r ? ne : b({
                             paddingTop: 16
                         })),
                         children: [
-                            l && /* @__PURE__ */ e(N, {
+                            l && /* @__PURE__ */ e(y, {
                                 paddingRight: 16,
                                 className: b({
                                     alignItems: "center",
@@ -190,7 +190,7 @@ const ye = (_param)=>{
                                 }),
                                 children: /* @__PURE__ */ e("div", {
                                     style: P({
-                                        [me.mediaBorderRadius]: y.borderRadii.mediaSmall
+                                        [he.mediaBorderRadius]: N.borderRadii.mediaSmall
                                     }),
                                     children: i
                                 })
@@ -199,7 +199,7 @@ const ye = (_param)=>{
                                 style: {
                                     maxWidth: u
                                 },
-                                className: ne,
+                                className: de,
                                 children: /* @__PURE__ */ e(v, {
                                     truncate: p,
                                     regular: !0,
@@ -209,15 +209,15 @@ const ye = (_param)=>{
                         ]
                     }),
                     o && /* @__PURE__ */ e("div", {
-                        className: h(de, r ? ce : j),
+                        className: h(ce, r ? le : F),
                         children: d
                     })
                 ]
             })
         ]
     });
-}, xe = /*#__PURE__*/ X.forwardRef((_param, E)=>{
-    var { stackingGroup: a, headline: i, pretitle: n, pretitleAs: p, pretitleLinesMax: d, title: c, titleAs: l, titleLinesMax: m, subtitle: o, subtitleLinesMax: r, description: u, descriptionLinesMax: x, extra: s, extraDividerPadding: C = 24, button: A, footerImage: T, footerText: B, footerTextLinesMax: V, buttonLink: R, dataAttributes: W, actions: g, "aria-label": S, onClose: D } = _param, f = _object_without_properties(_param, [
+}, Ce = /*#__PURE__*/ X.forwardRef((_param, M)=>{
+    var { stackingGroup: a, headline: i, pretitle: n, pretitleAs: p, pretitleLinesMax: d, title: c, titleAs: l, titleLinesMax: m, subtitle: o, subtitleLinesMax: r, description: u, descriptionLinesMax: x, extra: s, extraDividerPadding: C = 24, button: A, footerImage: T, footerText: B, footerTextLinesMax: E, buttonLink: R, dataAttributes: G, actions: g, "aria-label": S, onClose: w } = _param, f = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",
@@ -242,38 +242,41 @@ const ye = (_param)=>{
         "aria-label",
         "onClose"
     ]);
-    const G = !!f.href || !!f.onPress || !!f.to, L = {
+    const V = !!f.href || !!f.onPress || !!f.to, W = {
         button: A,
         footerImage: T,
         footerText: B,
-        footerTextLinesMax: V,
+        footerTextLinesMax: E,
         buttonLink: R
-    }, w = !!A || !!T || !!B || !!R, F = !!(s != null && s.length), M = ((g == null ? void 0 : g.length) || 0) + (D ? 1 : 0);
+    }, D = !!A || !!T || !!B || !!R, H = !!(s != null && s.length), L = ((g == null ? void 0 : g.length) || 0) + (w ? 1 : 0);
     return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({
         className: b({
             position: "relative",
             height: "100%"
         })
-    }, fe(W, "AdvancedDataCard")), {
-        ref: E,
+    }, ve(G, "AdvancedDataCard")), {
+        ref: M,
         "aria-label": S,
         children: /* @__PURE__ */ t(Y, {
-            className: $,
+            className: _,
+            width: "100%",
+            height: "100%",
+            minHeight: $,
             children: [
                 /* @__PURE__ */ t("div", {
                     className: q,
                     children: [
-                        G && /* @__PURE__ */ e("div", {
+                        V && /* @__PURE__ */ e("div", {
                             className: J
                         }),
                         /* @__PURE__ */ e("div", {
-                            className: h(K, !w && !F ? Q : ""),
-                            children: /* @__PURE__ */ e(N, {
+                            className: h(K, !D && !H ? Q : ""),
+                            children: /* @__PURE__ */ e(y, {
                                 paddingTop: 8,
-                                children: /* @__PURE__ */ t(ve, {
+                                children: /* @__PURE__ */ t(Ne, {
                                     space: 0,
                                     children: [
-                                        /* @__PURE__ */ t(z, {
+                                        /* @__PURE__ */ t(k, {
                                             space: 8,
                                             children: [
                                                 a,
@@ -295,7 +298,7 @@ const ye = (_param)=>{
                                         }),
                                         !a && /* @__PURE__ */ e("div", {
                                             style: P({
-                                                [le.topActionsCount]: String(M)
+                                                [me.topActionsCount]: String(L)
                                             }),
                                             className: U
                                         })
@@ -308,7 +311,7 @@ const ye = (_param)=>{
                                 flexGrow: 1
                             }
                         }),
-                        F && /* @__PURE__ */ e(N, {
+                        H && /* @__PURE__ */ e(y, {
                             paddingTop: 16,
                             paddingBottom: 24,
                             width: "100%",
@@ -316,26 +319,26 @@ const ye = (_param)=>{
                             children: s.map((O, I)=>/* @__PURE__ */ t("div", {
                                     children: [
                                         /* @__PURE__ */ e("div", {
-                                            className: _,
+                                            className: ee,
                                             children: O
                                         }),
-                                        I + 1 !== s.length && /* @__PURE__ */ e(N, {
+                                        I + 1 !== s.length && /* @__PURE__ */ e(y, {
                                             paddingY: C,
-                                            children: /* @__PURE__ */ e(H, {})
+                                            children: /* @__PURE__ */ e(z, {})
                                         })
                                     ]
                                 }, I))
                         }),
-                        /* @__PURE__ */ e(ue, {
+                        /* @__PURE__ */ e(ge, {
                             actions: g,
-                            onClose: D,
+                            onClose: w,
                             padding: 15
                         })
                     ]
                 }),
-                w && /* @__PURE__ */ e(Ne, _object_spread({}, L))
+                D && /* @__PURE__ */ e(xe, _object_spread({}, W))
             ]
         })
     }));
-}), We = xe;
-export { xe as AdvancedDataCard, We as default };
+}), Me = Ce;
+export { Ce as AdvancedDataCard, Me as default };

package/dist-es/counter.js

@@ -52,81 +52,82 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as r, jsxs as I } from "react/jsx-runtime";
-import * as V from "react";
-import { getPrefixedDataAttributes as L } from "./utils/dom.js";
-import { counter as R, disabled as g, buttonContainer as B, hasTrashIcon as j, isButtonDisabled as M, button as y, buttonBackground as S, decreaseButtonIcon as E, trashButtonIcon as O, valueContainer as Q, defaultButtonIcon as Z } from "./counter.css-mistica.js";
-import { useThemeVariant as _, ThemeVariant as q } from "./theme-variant-context.js";
+import * as B from "react";
+import { getPrefixedDataAttributes as R } from "./utils/dom.js";
+import { counter as j, disabled as N, buttonContainer as M, hasTrashIcon as E, isButtonDisabled as y, button as S, buttonBackground as A, decreaseButtonIcon as O, trashButtonIcon as Q, valueContainer as Z, defaultButtonIcon as _ } from "./counter.css-mistica.js";
+import { useThemeVariant as q, ThemeVariant as w } from "./theme-variant-context.js";
 import { vars as c } from "./skins/skin-contract.css-mistica.js";
-import w from "./inline.js";
-import { Text3 as F } from "./text.js";
+import F from "./inline.js";
+import { Text3 as G } from "./text.js";
 import { BaseTouchable as P } from "./touchable.js";
-import G from "./generated/mistica-icons/icon-subtract-regular.js";
-import H from "./generated/mistica-icons/icon-add-more-regular.js";
-import J from "./generated/mistica-icons/icon-trash-can-regular.js";
-import { useTheme as K } from "./hooks.js";
-import N from "classnames";
-import U from "./screen-reader-only.js";
-const x = 20, W = (param)=>{
+import H from "./generated/mistica-icons/icon-subtract-regular.js";
+import J from "./generated/mistica-icons/icon-add-more-regular.js";
+import K from "./generated/mistica-icons/icon-trash-can-regular.js";
+import { useAriaId as U, useTheme as W } from "./hooks.js";
+import x from "classnames";
+import X from "./screen-reader-only.js";
+const C = 20, Y = (param)=>{
     let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
-    const i = h !== void 0, f = V.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
+    const i = h !== void 0, p = B.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
         m,
         s
-    ]), [e, p] = V.useState(f(b)), v = (n)=>{
-        i || p(n), a == null || a(n);
+    ]), [e, v] = B.useState(p(b)), f = (n)=>{
+        i || v(n), a == null || a(n);
     };
     return [
-        i ? f(h) : e,
-        v
+        i ? p(h) : e,
+        f
     ];
-}, X = (param)=>{
-    let { value: h, defaultValue: b, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: f, disabled: e, removeLabel: p, increaseLabel: v, decreaseLabel: n, valueLabel: C } = param;
-    const A = _(), { texts: u } = K(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
+}, rr = (param)=>{
+    let { value: h, defaultValue: b, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: p, disabled: e, removeLabel: v, increaseLabel: f, decreaseLabel: n, valueLabel: T } = param;
+    const D = q(), g = U(), { texts: u } = W(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, V] = Y({
         value: h,
         defaultValue: b,
         min: l,
         max: d,
         onChangeValue: m
-    }), o = !!s && t === l, D = ()=>p === void 0 ? u.counterRemoveLabel : p, $ = ()=>v === void 0 ? u.counterIncreaseLabel : v, k = ()=>n === void 0 ? u.counterDecreaseLabel : n, z = ()=>`${t}, ${C === void 0 ? u.counterQuantity : C}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
+    }), o = !!s && t === l, $ = ()=>v === void 0 ? u.counterRemoveLabel : v, k = ()=>f === void 0 ? u.counterIncreaseLabel : f, z = ()=>n === void 0 ? u.counterDecreaseLabel : n, L = ()=>`${t}, ${T === void 0 ? u.counterQuantity : T}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
     return /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
-        className: N(R, {
-            [g]: e
+        className: x(j, {
+            [N]: e
         })
-    }, L(f, "Counter")), {
+    }, R(p, "Counter")), {
         style: {
-            border: `1px solid ${A === "inverse" ? c.colors.backgroundContainer : c.colors.border}`
+            border: `1px solid ${D === "inverse" ? c.colors.backgroundContainer : c.colors.border}`
         },
-        children: /* @__PURE__ */ I(w, {
+        children: /* @__PURE__ */ I(F, {
             space: 8,
             alignItems: "center",
             children: [
                 /* @__PURE__ */ r("div", {
-                    className: N(B, {
-                        [j]: o,
-                        [M]: e || !o && t === l,
-                        [g]: !e && !o && t === l
+                    className: x(M, {
+                        [E]: o,
+                        [y]: e || !o && t === l,
+                        [N]: !e && !o && t === l
                     }),
                     children: /* @__PURE__ */ I(P, {
-                        className: y,
+                        className: S,
                         disabled: !o && t === l || e,
-                        onPress: ()=>o ? s == null ? void 0 : s() : T(t - 1),
-                        "aria-label": o ? D() : k(),
+                        onPress: ()=>o ? s == null ? void 0 : s() : V(t - 1),
+                        "aria-label": o ? $() : z(),
+                        "aria-controls": g,
                         children: [
                             /* @__PURE__ */ r("div", {
-                                className: S
+                                className: A
                             }),
                             /* @__PURE__ */ r("div", {
-                                className: E,
+                                className: O,
                                 "aria-hidden": o,
-                                children: /* @__PURE__ */ r(G, {
-                                    size: x,
+                                children: /* @__PURE__ */ r(H, {
+                                    size: C,
                                     color: t === l && !o || e ? c.colors.control : c.colors.controlActivated
                                 })
                             }),
                             /* @__PURE__ */ r("div", {
-                                className: O,
+                                className: Q,
                                 "aria-hidden": !o,
-                                children: /* @__PURE__ */ r(J, {
-                                    size: x,
+                                children: /* @__PURE__ */ r(K, {
+                                    size: C,
                                     color: c.colors.controlError
                                 })
                             })
@@ -134,47 +135,50 @@ const x = 20, W = (param)=>{
                     })
                 }),
                 /* @__PURE__ */ r("div", {
-                    className: Q,
+                    className: Z,
                     style: {
                         width: `${Math.max(3, String(d).length) * 1.25}ch`
                     },
-                    children: /* @__PURE__ */ I(q, {
+                    id: g,
+                    "aria-live": "polite",
+                    children: /* @__PURE__ */ I(w, {
                         variant: "default",
                         children: [
                             /* @__PURE__ */ r("div", {
                                 "aria-hidden": !0,
-                                children: /* @__PURE__ */ r(F, {
+                                children: /* @__PURE__ */ r(G, {
                                     regular: !0,
                                     color: c.colors.textPrimary,
                                     children: t
                                 })
                             }),
-                            /* @__PURE__ */ r(U, {
+                            /* @__PURE__ */ r(X, {
                                 children: /* @__PURE__ */ r("span", {
-                                    children: z()
+                                    children: L()
                                 })
                             })
                         ]
                     })
                 }),
                 /* @__PURE__ */ r("div", {
-                    className: N(B, {
-                        [M]: e || t === d,
-                        [g]: !e && t === d
+                    className: x(M, {
+                        [y]: e || t === d,
+                        [N]: !e && t === d
                     }),
                     children: /* @__PURE__ */ I(P, {
-                        className: y,
+                        className: S,
                         disabled: t === d || e,
-                        onPress: ()=>T(t + 1),
-                        "aria-label": $(),
+                        onPress: ()=>V(t + 1),
+                        "aria-label": k(),
+                        "aria-controls": g,
                         children: [
                             /* @__PURE__ */ r("div", {
-                                className: S
+                                className: A
                             }),
                             /* @__PURE__ */ r("div", {
-                                className: Z,
-                                children: /* @__PURE__ */ r(H, {
-                                    size: x,
+                                className: _,
+                                children: /* @__PURE__ */ r(J, {
+                                    size: C,
                                     color: t === d || e ? c.colors.control : c.colors.controlActivated
                                 })
                             })
@@ -184,5 +188,5 @@ const x = 20, W = (param)=>{
             ]
         })
     }));
-}, hr = X;
-export { hr as default };
+}, vr = rr;
+export { vr as default };

package/dist-es/cover-hero-media.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { useVideoWithControls as d, CardActionsGroup as c } from "./card.js";
+import { mediaLayer as p, mediaOverlay as n } from "./cover-hero.css-mistica.js";
+import v from "./image.js";
+const y = (param)=>{
+    let { backgroundVideo: o, backgroundImage: e, poster: t, backgroundVideoRef: s } = param;
+    const { video: m, videoAction: r } = d(o, t, s);
+    return /* @__PURE__ */ a("div", {
+        className: p,
+        children: [
+            e && /* @__PURE__ */ i(v, {
+                width: "100%",
+                height: "100%",
+                src: e
+            }),
+            o && m,
+            /* @__PURE__ */ i("div", {
+                className: n
+            }),
+            r && /* @__PURE__ */ i(c, {
+                actions: [
+                    r
+                ],
+                type: "media"
+            })
+        ]
+    });
+};
+export { y as CoverHeroMedia };

package/dist-es/cover-hero.css-mistica.js

@@ -0,0 +1,9 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./responsive-layout.css.ts.vanilla.css-mistica.js";
+import "./grid-layout.css.ts.vanilla.css-mistica.js";
+import "./carousel.css.ts.vanilla.css-mistica.js";
+import "./cover-hero.css.ts.vanilla.css-mistica.js";
+var n = "moeazi9 _1y2v1nfhz", o = "moeazi2 _1y2v1nfhe _1y2v1nfhk _1y2v1nfhq _1y2v1nfht _1y2v1nfi7 _1y2v1nfkr _1y2v1nfm0", f = "moeazi4 _1y2v1nfhe _1y2v1nfhk _1y2v1nfi7", y = "moeazi7", _ = "_1y2v1nfhe", m = "_1y2v1nfhf _1y2v1nfmf _1y2v1nfi7 _1y2v1nfio", t = "moeazic _1y2v1nfhf _1y2v1nfkr _1y2v1nfl6 _1y2v1nfi7 _1y2v1nfio", h = "moeazi6", z = "_1y2v1nfhe", p = "moeazie", s = {
+    aspectRatio: "var(--moeazi0)"
+}, c = "moeazi5";
+export { n as centered, o as coverHero, f as coverHeroContainer, y as hasSideExtra, _ as mainContent, m as mediaLayer, t as mediaOverlay, h as minHeight, z as sideExtra, p as sixColumns, s as vars, c as withAspectRatio };

package/dist-es/cover-hero.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,2 @@
+const s = "";
+export { s as default };