@telefonica/mistica 14.22.2 → 14.23.0

package/dist/card.js

@@ -10,34 +10,34 @@ function _export(target, all) {
 }
 _export(exports, {
     CardActionSpinner: function() {
-        return Ve;
+        return er;
     },
     CardActionsGroup: function() {
         return W;
     },
     DataCard: function() {
-        return Rr;
+        return zr;
     },
     DisplayDataCard: function() {
-        return Dr;
+        return Hr;
     },
     DisplayMediaCard: function() {
-        return zr;
+        return Or;
     },
     MediaCard: function() {
-        return Br;
+        return Ir;
     },
     NakedCard: function() {
-        return Sr;
+        return Rr;
     },
     PosterCard: function() {
-        return Or;
+        return Er;
     },
     SmallNakedCard: function() {
-        return Ir;
+        return Mr;
     },
     SnapCard: function() {
-        return Mr;
+        return Dr;
     },
     TOP_ACTION_BUTTON_SIZE: function() {
         return Ce;
@@ -69,6 +69,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames")
 const _dynamic = require("@vanilla-extract/dynamic");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _dom = require("./utils/dom.js");
+const _platform = require("./utils/platform.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -245,7 +246,7 @@ const Ne = (r, a)=>{
             })
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-}, Qe = (r)=>r ? typeof r == "number" ? r : ({
+}, Ye = (r)=>r ? typeof r == "number" ? r : ({
         "1:1": 1,
         "16:9": 16 / 9,
         "7:10": 7 / 10,
@@ -253,7 +254,7 @@ const Ne = (r, a)=>{
         auto: 0
     })[r] : 0, E = /*#__PURE__*/ _react.forwardRef((param, d)=>{
     let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: l , dataAttributes: m , className: s , "aria-label": o  } = param;
-    const p = Qe(l);
+    const p = Ye(l);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m)), {
         ref: d,
         "aria-label": o,
@@ -270,7 +271,7 @@ const Ne = (r, a)=>{
         width: "100%",
         height: "100%",
         src: r !== null && r !== void 0 ? r : "//:0"
-    }), Ye = {
+    }), $e = {
     loading: {
         showSpinner: "loadingTimeout",
         play: "playing",
@@ -294,27 +295,27 @@ const Ne = (r, a)=>{
     error: {
         reset: "loading"
     }
-}, $e = (r, a)=>Ye[r][a] || r, Ve = (param)=>/* @__PURE__ */ {
+}, Ve = (r, a)=>$e[r][a] || r, er = (param)=>/* @__PURE__ */ {
     let { color: r  } = param;
     return (0, _jsxruntime.jsx)(_spinner.default, {
         color: r,
         size: 16,
         delay: "0"
     });
-}, ie = (param)=>/* @__PURE__ */ {
+}, Q = (param)=>/* @__PURE__ */ {
     let { color: r  } = param;
     return (0, _jsxruntime.jsx)(_iconpausefilled.default, {
         color: r,
         size: 12
     });
-}, er = (param)=>/* @__PURE__ */ {
+}, rr = (param)=>/* @__PURE__ */ {
     let { color: r  } = param;
     return (0, _jsxruntime.jsx)(_iconplayfilled.default, {
         color: r,
         size: 12
     });
 }, be = (r, a, i)=>{
-    const { texts: l  } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, o] = _react.useReducer($e, "loading");
+    const { texts: l  } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, o] = _react.useReducer(Ve, "loading");
     _react.useEffect(()=>{
         var h;
         const t = setTimeout(()=>o("showSpinner"), 2e3);
@@ -346,10 +347,10 @@ const Ne = (r, a)=>{
     };
     const c = {
         Icon: {
-            playing: ie,
-            loading: ie,
-            paused: er,
-            loadingTimeout: Ve
+            playing: Q,
+            loading: Q,
+            paused: rr,
+            loadingTimeout: (0, _platform.isRunningAcceptanceTest)() ? Q : er
         }[s],
         onPress: p,
         label: {
@@ -364,7 +365,7 @@ const Ne = (r, a)=>{
         video: d,
         videoAction: c
     };
-}, ae = (param)=>{
+}, ie = (param)=>{
     let { headline: r , pretitle: a , pretitleLinesMax: i , title: l , titleLinesMax: m , subtitle: s , subtitleLinesMax: o , description: d , descriptionLinesMax: p , extra: c , button: t , buttonLink: h  } = param;
     const { textPresets: u  } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
@@ -445,7 +446,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}, Br = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+}, Ir = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
     var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
@@ -497,7 +498,7 @@ const Ne = (r, a)=>{
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.mediaCardContent,
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                                         headline: i,
                                         pretitle: l,
                                         pretitleLinesMax: m,
@@ -536,7 +537,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), Sr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+}), Rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
     var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
@@ -589,7 +590,7 @@ const Ne = (r, a)=>{
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _cardcssmistica.nakedCardContent,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                                 headline: i,
                                 pretitle: l,
                                 pretitleLinesMax: m,
@@ -626,7 +627,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), Ir = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
+}), Mr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
     var { media: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , description: s , descriptionLinesMax: o , extra: d , dataAttributes: p , "aria-label": c  } = _param, t = _object_without_properties(_param, [
         "media",
         "title",
@@ -711,7 +712,7 @@ const Ne = (r, a)=>{
             })
         }))
     });
-}), Rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+}), zr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
     var { icon: r , headline: a , pretitle: i , pretitleLinesMax: l , title: m , titleLinesMax: s , subtitle: o , subtitleLinesMax: d , description: p , descriptionLinesMax: c , extra: t , actions: h , button: u , buttonLink: v , dataAttributes: w , "aria-label": b , onClose: T , aspectRatio: g  } = _param, f = _object_without_properties(_param, [
         "icon",
         "headline",
@@ -769,7 +770,7 @@ const Ne = (r, a)=>{
                                             space: 16,
                                             children: [
                                                 x ? r : null,
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                                                     headline: a,
                                                     pretitle: i,
                                                     pretitleLinesMax: l,
@@ -809,7 +810,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), Mr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
+}), Dr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
     var { icon: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , dataAttributes: s , "aria-label": o , extra: d , isInverse: p = !1 , aspectRatio: c  } = _param, t = _object_without_properties(_param, [
         "icon",
         "title",
@@ -1043,7 +1044,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), zr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+}), Or = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -1054,7 +1055,7 @@ const Ne = (r, a)=>{
             "component-name": "DisplayMediaCard"
         })
     }));
-}), Dr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+}), Hr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -1064,7 +1065,7 @@ const Ne = (r, a)=>{
             "component-name": "DisplayDataCard"
         })
     }));
-}), Or = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
+}), Er = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
     var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: l , backgroundVideoRef: m , width: s , height: o , aspectRatio: d = "7:10" , ariaLabel: p , actions: c , onClose: t , icon: h , headline: u , pretitle: v , pretitleLinesMax: w , title: b , titleLinesMax: T , description: g , descriptionLinesMax: f , variant: I , isInverse: x , backgroundColor: M  } = _param, z = _object_without_properties(_param, [
         "dataAttributes",
         "backgroundImage",

package/dist/carousel.css-mistica.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     bullet: function() {
-        return f;
+        return y;
     },
     bulletActive: function() {
-        return b;
+        return a;
     },
     bulletActiveInverse: function() {
-        return y;
+        return b;
     },
     bulletInverse: function() {
-        return c;
+        return r;
     },
     carousel: function() {
-        return r;
+        return c;
     },
     carouselBullets: function() {
         return e;
@@ -31,16 +31,16 @@ _export(exports, {
         return u;
     },
     carouselItem: function() {
-        return o;
+        return t;
     },
     carouselNextArrowButton: function() {
-        return t;
+        return l;
     },
     carouselPrevArrowButton: function() {
-        return s;
+        return o;
     },
     carouselWithScroll: function() {
-        return l;
+        return s;
     },
     centeredCarousel: function() {
         return d;
@@ -49,31 +49,32 @@ _export(exports, {
         return i;
     },
     slideshowBullets: function() {
-        return m;
+        return p;
     },
     slideshowContainer: function() {
-        return w;
+        return m;
     },
     slideshowItem: function() {
-        return p;
+        return w;
     },
     slideshowNextArrowButton: function() {
-        return x;
+        return P;
     },
     slideshowPrevArrowButton: function() {
         return h;
     },
     vars: function() {
-        return P;
+        return k;
     }
 });
 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");
-var f = "_1abcu71 _1y2v1nfbx _1y2v1nfcd _1y2v1nfdo _1y2v1nf44", b = "_1abcu72 _1abcu71 _1y2v1nfbx _1y2v1nfcd _1y2v1nfdo _1y2v1nf45", y = "_1abcu72 _1abcu71 _1y2v1nfbx _1y2v1nfcd _1y2v1nfdo _1y2v1nf4k", c = "_1abcu75 _1abcu71 _1y2v1nfbx _1y2v1nfcd _1y2v1nfdo", r = "_1abcu7l _1abcu7b _1y2v1nfb5 _1y2v1nfcp", e = "_1y2v1nfb5 _1y2v1nfbe", u = "_1y2v1nfd2 _1y2v1nfaz", o = "_1abcu7o", t = "_1abcu7s _1abcu7q _1abcu7d _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe _1y2v1nfdo _1y2v1nf31 _1y2v1nfc3 _1y2v1nfcj _1y2v1nfdm _1y2v1nfb0", s = "_1abcu7r _1abcu7q _1abcu7d _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe _1y2v1nfdo _1y2v1nf31 _1y2v1nfc3 _1y2v1nfcj _1y2v1nfdm _1y2v1nfb0", l = "_1abcu7m", d = "_1abcu7n", i = "_1abcu7v _1abcu7b _1y2v1nfb5 _1y2v1nfcp", m = "_1abcu713 _1y2v1nfb0 _1y2v1nffr _1y2v1nfb5 _1y2v1nfbe _1y2v1nfbs", w = "_1y2v1nfaz", p = "_1abcu7x _1y2v1nfbs _1y2v1nfbn", x = "_1abcu711 _1abcu7q _1abcu7d _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe _1y2v1nfdo _1y2v1nf31 _1y2v1nfc3 _1y2v1nfcj _1y2v1nfdm _1y2v1nfb0 _1y2v1nffc", h = "_1abcu7z _1abcu7q _1abcu7d _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe _1y2v1nfdo _1y2v1nf31 _1y2v1nfc3 _1y2v1nfcj _1y2v1nfdm _1y2v1nfb0 _1y2v1nfex", P = {
+var y = "_1abcu71 _1y2v1nfby _1y2v1nfce _1y2v1nfdp _1y2v1nf44", a = "_1abcu72 _1abcu71 _1y2v1nfby _1y2v1nfce _1y2v1nfdp _1y2v1nf45", b = "_1abcu72 _1abcu71 _1y2v1nfby _1y2v1nfce _1y2v1nfdp _1y2v1nf4k", r = "_1abcu75 _1abcu71 _1y2v1nfby _1y2v1nfce _1y2v1nfdp", c = "_1abcu7m _1abcu7b _1y2v1nfb6 _1y2v1nfcq", e = "_1y2v1nfb6 _1y2v1nfbf", u = "_1y2v1nfaz _1y2v1nfd3 _1y2v1nfb0", t = "_1abcu7p", l = "_1abcu7t _1abcu7r _1abcu7d _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp _1y2v1nf31 _1y2v1nfc4 _1y2v1nfck _1y2v1nfdn _1y2v1nfb1", o = "_1abcu7s _1abcu7r _1abcu7d _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp _1y2v1nf31 _1y2v1nfc4 _1y2v1nfck _1y2v1nfdn _1y2v1nfb1", s = "_1abcu7n", d = "_1abcu7o", i = "_1abcu7w _1abcu7b _1y2v1nfb6 _1y2v1nfcq", p = "_1abcu714 _1y2v1nfb1 _1y2v1nffs _1y2v1nfb6 _1y2v1nfbf _1y2v1nfbt", m = "_1y2v1nfb0", w = "_1abcu7y _1y2v1nfbt _1y2v1nfbo", P = "_1abcu712 _1abcu7r _1abcu7d _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp _1y2v1nf31 _1y2v1nfc4 _1y2v1nfck _1y2v1nfdn _1y2v1nfb1 _1y2v1nffd", h = "_1abcu710 _1abcu7r _1abcu7d _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp _1y2v1nf31 _1y2v1nfc4 _1y2v1nfck _1y2v1nfdn _1y2v1nfb1 _1y2v1nfey", k = {
     itemsPerPageMobile: "var(--_1abcu7g)",
     itemsPerPageTablet: "var(--_1abcu7h)",
     itemsPerPageDesktop: "var(--_1abcu7i)",
-    gap: "var(--_1abcu7j)"
+    gap: "var(--_1abcu7j)",
+    mobilePageOffset: "var(--_1abcu7k)"
 };

package/dist/carousel.css.d.ts

@@ -9,6 +9,7 @@ export declare const vars: {
     itemsPerPageTablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     itemsPerPageDesktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    mobilePageOffset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const DEFAULT_DESKTOP_GAP = 16;
 export declare const carousel: string;

package/dist/carousel.d.ts

@@ -26,6 +26,7 @@ type CarouselProps = {
     itemsPerPage?: ItemsPerPageProp;
     /** scrolls one page by default */
     itemsToScroll?: number;
+    mobilePageOffset?: 'regular' | 'large';
     /** If true, scroll snap doesn't apply and the user has a free scroll */
     free?: boolean;
     autoplay?: boolean | {