@telefonica/mistica 15.9.0 → 15.11.0

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

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     AdvancedDataCard: function() {
-        return xe;
+        return Ce;
     },
     default: function() {
-        return We;
+        return Me;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -225,7 +225,7 @@ const ye = (_param)=>{
             })
         ]
     });
-}, 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__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -280,8 +280,8 @@ const ye = (_param)=>{
             })
         ]
     });
-}, xe = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -306,32 +306,35 @@ 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__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         className: (0, _sprinklescssmistica.sprinkles)({
             position: "relative",
             height: "100%"
         })
-    }, (0, _dom.getPrefixedDataAttributes)(W, "AdvancedDataCard")), {
-        ref: E,
+    }, (0, _dom.getPrefixedDataAttributes)(G, "AdvancedDataCard")), {
+        ref: M,
         "aria-label": S,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
             className: _advanceddatacardcssmistica.dataCard,
+            width: "100%",
+            height: "100%",
+            minHeight: _advanceddatacardcssmistica.MIN_HEIGHT,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _advanceddatacardcssmistica.touchableContainer,
                     children: [
-                        G && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        V && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _advanceddatacardcssmistica.touchableCardOverlay
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !w && !F ? _advanceddatacardcssmistica.minHeight : ""),
+                            className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !D && !H ? _advanceddatacardcssmistica.minHeight : ""),
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: 8,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -359,7 +362,7 @@ const ye = (_param)=>{
                                         }),
                                         !a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: (0, _css.applyCssVars)({
-                                                [_advanceddatacardcssmistica.vars.topActionsCount]: String(M)
+                                                [_advanceddatacardcssmistica.vars.topActionsCount]: String(L)
                                             }),
                                             className: _advanceddatacardcssmistica.topActionsWithoutIcon
                                         })
@@ -372,7 +375,7 @@ const ye = (_param)=>{
                                 flexGrow: 1
                             }
                         }),
-                        F && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        H && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingTop: 16,
                             paddingBottom: 24,
                             width: "100%",
@@ -392,13 +395,13 @@ const ye = (_param)=>{
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
                             actions: g,
-                            onClose: D,
+                            onClose: w,
                             padding: 15
                         })
                     ]
                 }),
-                w && /* @__PURE__ */ (0, _jsxruntime.jsx)(Ne, _object_spread({}, L))
+                D && /* @__PURE__ */ (0, _jsxruntime.jsx)(xe, _object_spread({}, W))
             ]
         })
     }));
-}), We = xe;
+}), Me = Ce;

package/dist/counter.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return hr;
+        return vr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -122,34 +122,34 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const x = 20, W = (param)=>{
+const C = 20, Y = (param)=>{
     let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
-    const i = h !== void 0, f = _react.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
+    const i = h !== void 0, p = _react.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
         m,
         s
-    ]), [e, p] = _react.useState(f(b)), v = (n)=>{
-        i || p(n), a == null || a(n);
+    ]), [e, v] = _react.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 = (0, _themevariantcontext.useThemeVariant)(), { texts: u } = (0, _hooks.useTheme)(), 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 = (0, _themevariantcontext.useThemeVariant)(), g = (0, _hooks.useAriaId)(), { texts: u } = (0, _hooks.useTheme)(), 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__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_countercssmistica.counter, {
             [_countercssmistica.disabled]: e
         })
-    }, (0, _dom.getPrefixedDataAttributes)(f, "Counter")), {
+    }, (0, _dom.getPrefixedDataAttributes)(p, "Counter")), {
         style: {
-            border: `1px solid ${A === "inverse" ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
+            border: `1px solid ${D === "inverse" ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 8,
@@ -164,8 +164,9 @@ const x = 20, W = (param)=>{
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                         className: _countercssmistica.button,
                         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__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.buttonBackground
@@ -174,7 +175,7 @@ const x = 20, W = (param)=>{
                                 className: _countercssmistica.decreaseButtonIcon,
                                 "aria-hidden": o,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsubtractregular.default, {
-                                    size: x,
+                                    size: C,
                                     color: t === l && !o || e ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
                                 })
                             }),
@@ -182,7 +183,7 @@ const x = 20, W = (param)=>{
                                 className: _countercssmistica.trashButtonIcon,
                                 "aria-hidden": !o,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_icontrashcanregular.default, {
-                                    size: x,
+                                    size: C,
                                     color: _skincontractcssmistica.vars.colors.controlError
                                 })
                             })
@@ -194,6 +195,8 @@ const x = 20, W = (param)=>{
                     style: {
                         width: `${Math.max(3, String(d).length) * 1.25}ch`
                     },
+                    id: g,
+                    "aria-live": "polite",
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                         variant: "default",
                         children: [
@@ -207,7 +210,7 @@ const x = 20, W = (param)=>{
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                                    children: z()
+                                    children: L()
                                 })
                             })
                         ]
@@ -221,8 +224,9 @@ const x = 20, W = (param)=>{
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                         className: _countercssmistica.button,
                         disabled: t === d || e,
-                        onPress: ()=>T(t + 1),
-                        "aria-label": $(),
+                        onPress: ()=>V(t + 1),
+                        "aria-label": k(),
+                        "aria-controls": g,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.buttonBackground
@@ -230,7 +234,7 @@ const x = 20, W = (param)=>{
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.defaultButtonIcon,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconaddmoreregular.default, {
-                                    size: x,
+                                    size: C,
                                     color: t === d || e ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
                                 })
                             })
@@ -240,4 +244,4 @@ const x = 20, W = (param)=>{
             ]
         })
     }));
-}, hr = X;
+}, vr = rr;

package/dist/cover-hero-media.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ExclusifyUnion } from './utils/utility-types';
+import type { VideoElement, VideoSource } from './video';
+export type ImageProps = {
+    backgroundImage: string;
+};
+export type VideoProps = {
+    backgroundVideo: VideoSource;
+    poster?: string;
+    backgroundVideoRef?: React.RefObject<VideoElement>;
+};
+export declare const CoverHeroMedia: ({ backgroundVideo, backgroundImage, poster, backgroundVideoRef, }: ExclusifyUnion<ImageProps | VideoProps>) => React.ReactElement;

package/dist/cover-hero-media.js

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CoverHeroMedia", {
+    enumerable: true,
+    get: function() {
+        return y;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _card = require("./card.js");
+const _coverherocssmistica = require("./cover-hero.css-mistica.js");
+const _image = /*#__PURE__*/ _interop_require_default(require("./image.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const y = (param)=>{
+    let { backgroundVideo: o, backgroundImage: e, poster: t, backgroundVideoRef: s } = param;
+    const { video: m, videoAction: r } = (0, _card.useVideoWithControls)(o, t, s);
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: _coverherocssmistica.mediaLayer,
+        children: [
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
+                width: "100%",
+                height: "100%",
+                src: e
+            }),
+            o && m,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _coverherocssmistica.mediaOverlay
+            }),
+            r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
+                actions: [
+                    r
+                ],
+                type: "media"
+            })
+        ]
+    });
+};

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    centered: function() {
+        return n;
+    },
+    coverHero: function() {
+        return o;
+    },
+    coverHeroContainer: function() {
+        return f;
+    },
+    hasSideExtra: function() {
+        return y;
+    },
+    mainContent: function() {
+        return _;
+    },
+    mediaLayer: function() {
+        return m;
+    },
+    mediaOverlay: function() {
+        return t;
+    },
+    minHeight: function() {
+        return h;
+    },
+    sideExtra: function() {
+        return z;
+    },
+    sixColumns: function() {
+        return p;
+    },
+    vars: function() {
+        return s;
+    },
+    withAspectRatio: function() {
+        return c;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./responsive-layout.css.ts.vanilla.css-mistica.js");
+require("./grid-layout.css.ts.vanilla.css-mistica.js");
+require("./carousel.css.ts.vanilla.css-mistica.js");
+require("./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";

package/dist/cover-hero.css.d.ts

@@ -0,0 +1,14 @@
+export declare const vars: {
+    aspectRatio: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const coverHero: string;
+export declare const coverHeroContainer: string;
+export declare const withAspectRatio: string;
+export declare const minHeight: string;
+export declare const hasSideExtra: string;
+export declare const centered: string;
+export declare const mediaLayer: string;
+export declare const mediaOverlay: string;
+export declare const mainContent: string;
+export declare const sixColumns: string;
+export declare const sideExtra: string;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return s;
+    }
+});
+const s = "";

package/dist/cover-hero.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+import type { ImageProps, VideoProps } from './cover-hero-media';
+import type { AspectRatio } from './image';
+import type { ExclusifyUnion } from './utils/utility-types';
+import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
+import type Tag from './tag';
+import type { RendersNullableElement } from './utils/renders-element';
+import type { Variant } from './theme-variant-context';
+type BaseProps = {
+    headline?: RendersNullableElement<typeof Tag>;
+    pretitle?: string;
+    pretitleLinesMax?: number;
+    title: string;
+    titleLinesMax?: number;
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    description?: string;
+    descriptionLinesMax?: number;
+    extra?: React.ReactNode;
+    sideExtra?: React.ReactNode;
+    button?: RendersNullableElement<typeof ButtonPrimary>;
+    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
+    buttonLink?: RendersNullableElement<typeof ButtonLink>;
+    minHeight?: string | number;
+    aspectRatio?: AspectRatio | number | 'auto';
+    centered?: boolean;
+    noPaddingY?: boolean;
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+};
+type BackgroundProps = {
+    background?: string;
+    variant?: Variant;
+};
+type CoverHeroProps = BaseProps & ExclusifyUnion<ImageProps | VideoProps | BackgroundProps>;
+declare const CoverHero: React.ForwardRefExoticComponent<CoverHeroProps & React.RefAttributes<HTMLDivElement>>;
+export default CoverHero;