@telefonica/mistica 14.17.1 → 14.18.0

package/dist/tooltip.css-mistica.js

@@ -34,40 +34,40 @@ _export(exports, {
         return o;
     },
     enterActive: function() {
-        return x;
+        return b;
     },
     enterDone: function() {
-        return y;
+        return x;
     },
     exit: function() {
         return h;
     },
     exitActive: function() {
-        return b;
+        return y;
     },
     fadeInBottomKeyframes: function() {
         return m;
     },
     fadeInTopKeyframes: function() {
-        return i;
+        return d;
     },
     fadeInXKeyframes: function() {
-        return w;
+        return i;
     },
     vars: function() {
-        return s;
+        return w;
     },
     wrapper: function() {
-        return c;
+        return s;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tooltip.css.ts.vanilla.css-mistica.js");
-var v = "_1xhatbpb _1y2v1nf60 _1y2v1nfau _1y2v1nf8l _1y2v1nf91 _1y2v1nfac _1y2v1nf31 _1y2v1nfa9", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nf60 _1y2v1nf8o _1y2v1nf91 _1y2v1nfas _1y2v1nf2", p = "_1xhatbpj _1y2v1nf6u _1y2v1nf79 _1y2v1nf7o _1y2v1nf83 _1y2v1nf60 _1y2v1nfbe _1y2v1nf8g _1y2v1nfal _1y2v1nfa9", o = "_1xhatbpk", x = "_1xhatbpl", y = "_1xhatbpm", h = "_1xhatbpn", b = "_1xhatbpo", m = "_1xhatbp6", i = "_1xhatbp7", w = "_1xhatbp8", s = {
+var v = "_1xhatbpb _1y2v1nfb0 _1y2v1nfe6 _1y2v1nfbx _1y2v1nfcd _1y2v1nfdo _1y2v1nf31 _1y2v1nfdl", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nfb0 _1y2v1nfc0 _1y2v1nfcd _1y2v1nfe4 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf68 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb0 _1y2v1nfeq _1y2v1nfbs _1y2v1nfdx _1y2v1nfdl", o = "_1xhatbpk", b = "_1xhatbpl", x = "_1xhatbpm", h = "_1xhatbpn", y = "_1xhatbpo", m = "_1xhatbp6", d = "_1xhatbp7", i = "_1xhatbp8", w = {
     shadowAlpha: "var(--_1xhatbp0)",
     enterTransform: "var(--_1xhatbp1)",
     enterDoneTransform: "var(--_1xhatbp2)",
     exitTransform: "var(--_1xhatbp3)",
     enterActiveAnimationName: "var(--_1xhatbp4)",
     arrowBoxShadow: "var(--_1xhatbp5)"
-}, c = "_1y2v1nf68";
+}, s = "_1y2v1nfb8";

package/dist/touchable.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     base: function() {
-        return f;
+        return n;
     },
     notTouchable: function() {
-        return n;
+        return f;
     },
     touchable: function() {
         return _;
@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./touchable.css.ts.vanilla.css-mistica.js");
-var f = "mhti6u1 _1y2v1nfar", n = "mhti6u4", _ = "mhti6u1 _1y2v1nfar _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf66 _1y2v1nfaa _1y2v1nf8f _1y2v1nf2y _1y2v1nf5y _1y2v1nfat";
+var n = "mhti6u1 _1y2v1nfe3", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfe3 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb6 _1y2v1nfdm _1y2v1nfbr _1y2v1nf2y _1y2v1nf5y _1y2v1nfe5";

package/dist/utils/aspect-ratio-support.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return v;
+        return a;
     },
     containerWithWrapper: function() {
         return n;
@@ -19,11 +19,11 @@ _export(exports, {
         return y;
     },
     wrapper: function() {
-        return f;
+        return e;
     }
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("./aspect-ratio-support.css.ts.vanilla.css-mistica.js");
-var v = "yqswj62", n = "_1y2v1nf8f _1y2v1nf8w _1y2v1nfau _1y2v1nfb9", y = {
+var a = "yqswj62", n = "_1y2v1nfbr _1y2v1nfc8 _1y2v1nfe6 _1y2v1nfel", y = {
     aspectRatio: "var(--yqswj60)"
-}, f = "_1y2v1nfas _1y2v1nfa7 _1y2v1nfa8 _1y2v1nf5z";
+}, e = "_1y2v1nfe4 _1y2v1nfdj _1y2v1nfdk _1y2v1nfaz";

package/dist/utils/aspect-ratio-support.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import type { DataAttributes } from './types';
 type Props = {
     children: React.ReactNode;
 };
 export declare const AspectRatioSupportProvider: React.FC<Props>;
 export declare const useSupportsAspectRatio: () => boolean;
-type AspectRatioElementProps = {
+type AspectRatioContainerProps = {
     width?: number | string;
     height?: number | string;
     aspectRatio: number;
@@ -12,6 +13,7 @@ type AspectRatioElementProps = {
     as?: React.ComponentType<any> | string;
     style?: React.CSSProperties;
     className?: string;
+    dataAttributes?: DataAttributes;
 };
-export declare const AspectRatioElement: (props: AspectRatioElementProps) => JSX.Element;
+export declare const AspectRatioContainer: (props: AspectRatioContainerProps) => JSX.Element;
 export {};

package/dist/utils/aspect-ratio-support.js

@@ -9,14 +9,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    AspectRatioElement: function() {
+    AspectRatioContainer: function() {
         return W;
     },
     AspectRatioSupportProvider: function() {
-        return C;
+        return x;
     },
     useSupportsAspectRatio: function() {
-        return v;
+        return N;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -121,9 +121,9 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const u = /*#__PURE__*/ _react.createContext(!0), C = (param)=>{
+const u = /*#__PURE__*/ _react.createContext(!0), x = (param)=>{
     let { children: t  } = param;
-    const [n, s] = _react.useState(!0);
+    const [o, s] = _react.useState(!0);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         try {
             CSS.supports("aspect-ratio", "1 / 1") || s(!1);
@@ -131,19 +131,19 @@ const u = /*#__PURE__*/ _react.createContext(!0), C = (param)=>{
             s(!1);
         }
     }, []), /* @__PURE__ */ (0, _jsxruntime.jsx)(u.Provider, {
-        value: n,
+        value: o,
         children: t
     });
-}, v = ()=>_react.useContext(u), W = (t)=>{
-    const n = v(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
+}, N = ()=>_react.useContext(u), W = (t)=>{
+    const o = N(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
     let i = t.width, a = t.height;
     t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / t.aspectRatio : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * t.aspectRatio : void 0 : i = t.width || "100%";
     var _t_as;
-    const o = s && !n, r = /*#__PURE__*/ _react.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", {
+    const n = s && !o, r = /*#__PURE__*/ _react.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
         className: (0, _classnames.default)(t.className, _aspectratiosupportcssmistica.container, {
-            [_aspectratiosupportcssmistica.containerWithWrapper]: o
+            [_aspectratiosupportcssmistica.containerWithWrapper]: n
         }),
-        style: _object_spread({}, o ? _object_spread_props(_object_spread({}, t.style), {
+        style: _object_spread({}, n ? _object_spread_props(_object_spread({}, t.style), {
             position: e ? "absolute" : "static",
             width: "100%"
         }) : _object_spread_props(_object_spread({}, t.style), {
@@ -152,17 +152,18 @@ const u = /*#__PURE__*/ _react.createContext(!0), C = (param)=>{
         }), (0, _dynamic.assignInlineVars)({
             [_aspectratiosupportcssmistica.vars.aspectRatio]: e ? String(e) : "unset"
         }))
-    }, t.children);
-    if (o) {
+    }, !n && t.dataAttributes), t.children);
+    if (n) {
         const d = (()=>e ? t.width && typeof t.width == "string" && t.width.endsWith("%") ? `${Number(t.width.replace("%", "")) / e}%` : `${100 / e}%` : 0)();
-        return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             style: {
                 width: i,
                 height: a,
                 paddingTop: d
             },
-            className: _aspectratiosupportcssmistica.wrapper,
+            className: _aspectratiosupportcssmistica.wrapper
+        }, t.dataAttributes), {
             children: r
-        });
+        }));
     } else return r;
 };

package/dist/utils/types.d.ts

@@ -10,3 +10,8 @@ export type IconProps = {
     className?: string;
     style?: React.CSSProperties;
 };
+export type ByBreakpoint<T> = T | {
+    mobile: T;
+    tablet?: T;
+    desktop: T;
+};

package/dist/utils/utility-types.d.ts

@@ -0,0 +1,7 @@
+type AllKeys<T> = T extends unknown ? keyof T : never;
+type Id<T> = T extends infer U ? {
+    [K in keyof U]: U[K];
+} : never;
+type _ExclusifyUnion<T, K extends PropertyKey> = T extends unknown ? Id<T & Partial<Record<Exclude<K, keyof T>, never>>> : never;
+export type ExclusifyUnion<T> = _ExclusifyUnion<T, AllKeys<T>>;
+export {};

package/dist/video.css-mistica.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "video", {
     enumerable: true,
     get: function() {
-        return y;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var y = "_1y2v1nfau _1y2v1nfb9 _1y2v1nf66 _1y2v1nf5y _1y2v1nfa7 _1y2v1nfa8 _1y2v1nfci";
+var f = "_1y2v1nfe6 _1y2v1nfel _1y2v1nfb6 _1y2v1nf5y _1y2v1nfdj _1y2v1nfdk _1y2v1nffu";

package/dist/video.js

@@ -20,10 +20,10 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _image = require("./image.js");
 const _aspectratiosupport = require("./utils/aspect-ratio-support.js");
-const _dom = require("./utils/dom.js");
 const _platform = require("./utils/platform.js");
 const _videocssmistica = require("./video.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _dom = require("./utils/dom.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -63,58 +63,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = _object_without_properties_loose(source, excluded);
@@ -174,7 +122,7 @@ const q = {
     "16:9": 16 / 9,
     "4:3": 4 / 3
 }, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", z = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
-    var { src: r , poster: u , autoPlay: p = "when-loaded" , muted: x = !0 , loop: N = !0 , preload: k = "none" , loadingTimeout: T = 1e4 , onLoad: y , onError: h , onPause: R , onPlay: w , aspectRatio: c = "1:1" , dataAttributes: B  } = _param, n = _object_without_properties(_param, [
+    var { src: r , poster: u , autoPlay: p = "when-loaded" , muted: x = !0 , loop: N = !0 , preload: k = "none" , loadingTimeout: T = 1e4 , onLoad: y , onError: h , onPause: R , onPlay: b , aspectRatio: c = "1:1" , dataAttributes: B  } = _param, o = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -189,7 +137,7 @@ const q = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [a, l] = _react.useReducer(D, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), b = (0, _image.useMediaBorderRadius)(), m = typeof c == "number" ? c : K[c], v = _react.useCallback(()=>{
+    const [a, l] = _react.useReducer(D, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), w = (0, _image.useMediaBorderRadius)(), g = typeof c == "number" ? c : K[c], v = _react.useCallback(()=>{
         a === "loading" && (l("fail"), h == null || h());
     }, [
         h,
@@ -217,7 +165,7 @@ const q = {
         r
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", _object_spread_props(_object_spread({
+        } : e), m = a === "error" || a === "loading" || a === "loaded", V = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", {
         ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
@@ -232,7 +180,7 @@ const q = {
         },
         onTimeUpdate: ()=>{
             var e;
-            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (w == null || w(), l("play"));
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (b == null || b(), l("play"));
         },
         onCanPlay: ()=>{
             p === "streaming" && I();
@@ -240,13 +188,12 @@ const q = {
         onCanPlayThrough: ()=>{
             p !== "streaming" && I();
         },
-        poster: _
-    }, (0, _dom.getPrefixedDataAttributes)(B)), {
+        poster: _,
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: b ? _skincontractcssmistica.vars.borderRadii.container : 0,
-            visibility: g ? "hidden" : "visible",
-            position: g || m !== 0 ? "absolute" : "static",
+            borderRadius: w ? _skincontractcssmistica.vars.borderRadii.container : 0,
+            visibility: m ? "hidden" : "visible",
+            position: m || g !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
@@ -257,10 +204,10 @@ const q = {
                 type: t
             }, i);
         })
-    })), E = !!(m !== 0 || n.width && n.height), F = a === "error", G = _react.useMemo(()=>u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
+    }), E = !!(g !== 0 || o.width && o.height), F = a === "error", j = _react.useMemo(()=>u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
             aspectRatio: c,
-            width: n.width,
-            height: n.height,
+            width: o.width,
+            height: o.height,
             src: u
         }) : E ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: {
@@ -269,25 +216,26 @@ const q = {
                 height: "100%"
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageError, {
-                noBorderRadius: !b,
+                noBorderRadius: !w,
                 withIcon: F
             })
         }) : void 0, [
         c,
-        n.height,
-        n.width,
-        b,
+        o.height,
+        o.width,
+        w,
         F,
         u,
         E
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_aspectratiosupport.AspectRatioElement, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
         },
-        aspectRatio: m,
-        width: n.width,
-        height: n.height,
+        aspectRatio: g,
+        width: o.width,
+        height: o.height,
+        dataAttributes: (0, _dom.getPrefixedDataAttributes)(B, "Video"),
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
@@ -314,16 +262,16 @@ const q = {
                     }), typeof A == "function" ? A(t) : A && (A.current = t);
                 }
             }),
-            j,
+            V,
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 ref: f,
                 style: {
-                    position: m !== 0 ? "absolute" : "static",
-                    width: g ? "100%" : 0,
-                    height: g ? "100%" : 0,
+                    position: g !== 0 ? "absolute" : "static",
+                    width: m ? "100%" : 0,
+                    height: m ? "100%" : 0,
                     overflow: "hidden"
                 },
-                children: G
+                children: j
             })
         ]
     });

package/dist-es/avatar.css-mistica.js

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var a = "_1y2v1nfaq _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfas", f = "_1y2v1nfci";
-export { a as avatar, f as image };
+var f = "_1y2v1nfe2 _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfe4", a = "_1y2v1nffu";
+export { f as avatar, a as image };

package/dist-es/badge.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./badge.css.ts.vanilla.css-mistica.js";
-var _ = "_17szrmd2 _1y2v1nf8k _1y2v1nf90 _1y2v1nf4f", n = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nf8k _1y2v1nf90 _1y2v1nf4f _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", y = "_1y2v1nf60", a = "_1y2v1nf5z _1y2v1nf68";
-export { _ as badge, n as badgeBigNumber, f as badgeNumber, y as badgeWithChildren, a as container };
+var _ = "_17szrmd2 _1y2v1nfbw _1y2v1nfcc _1y2v1nf4f", n = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nfbw _1y2v1nfcc _1y2v1nf4f _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd", b = "_1y2v1nfb0", y = "_1y2v1nfaz _1y2v1nfb8";
+export { _ as badge, n as badgeBigNumber, f as badgeNumber, b as badgeWithChildren, y as container };

package/dist-es/box.js

@@ -50,33 +50,40 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as u } from "react/jsx-runtime";
-import * as y from "react";
+import { jsx as k } from "react/jsx-runtime";
+import * as p from "react";
 import v from "classnames";
-import { sprinkles as B } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as R } from "./utils/dom.js";
-const S = /*#__PURE__*/ y.forwardRef((param, d)=>{
-    let { className: i , children: l , width: o , padding: t = 0 , paddingX: e = t , paddingY: s = t , paddingTop: m = s , paddingBottom: f = s , paddingLeft: c = e , paddingRight: x = e , role: b , dataAttributes: n , "aria-label": p  } = param;
-    const a = {
-        paddingTop: m,
-        paddingBottom: f,
-        paddingLeft: c,
-        paddingRight: x
+import { sprinkles as z } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as A } from "./utils/dom.js";
+const C = /*#__PURE__*/ p.forwardRef((param, u)=>{
+    let { className: f , children: i , width: l , padding: b = 0 , paddingX: m = b , paddingY: c = b , paddingTop: e = c , paddingBottom: o = c , paddingLeft: r = m , paddingRight: t = m , role: x , dataAttributes: y , "aria-label": j  } = param;
+    const S = {
+        paddingTop: e,
+        paddingBottom: o,
+        paddingLeft: r,
+        paddingRight: t
     };
-    let r = "";
+    let a = {}, s = "";
     try {
-        r = B(a);
-    } catch (e) {}
-    return /* @__PURE__ */ u("div", _object_spread_props(_object_spread({}, R(n)), {
-        role: b,
-        "aria-label": p,
-        ref: d,
-        className: v(i, r),
-        style: _object_spread({}, o !== void 0 ? {
-            width: o,
+        s = z(S);
+    } catch (e1) {
+        a = {
+            paddingTop: typeof e == "object" ? e.mobile : e,
+            paddingBottom: typeof o == "object" ? o.mobile : o,
+            paddingLeft: typeof r == "object" ? r.mobile : r,
+            paddingRight: typeof t == "object" ? t.mobile : t
+        };
+    }
+    return /* @__PURE__ */ k("div", _object_spread_props(_object_spread({}, A(y)), {
+        role: x,
+        "aria-label": j,
+        ref: u,
+        className: v(f, s),
+        style: _object_spread({}, l !== void 0 ? {
+            width: l,
             boxSizing: "border-box"
-        } : {}, r ? {} : a),
-        children: l
+        } : {}, s ? {} : a),
+        children: i
     }));
-}), C = S;
-export { C as default };
+}), q = C;
+export { q as default };

package/dist-es/boxed.css-mistica.js

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var o = "_1y2v1nfa9";
+var o = "_1y2v1nfdl";
 export { o as boxBorder };

package/dist-es/button-group.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./button-group.css.ts.vanilla.css-mistica.js";
-var r = "_1xdd1h64", t = "_1xdd1h63", v = "_1xdd1h62", _ = "_1xdd1h61 _1y2v1nf65 _1y2v1nf6j _1y2v1nf69";
+var r = "_1xdd1h64", t = "_1xdd1h63", v = "_1xdd1h62", _ = "_1xdd1h61 _1y2v1nfb5 _1y2v1nfbj _1y2v1nfb9";
 export { r as buttonChild, t as buttons, v as container, _ as inline };

package/dist-es/button-layout.css-mistica.js

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./button.css.ts.vanilla.css-mistica.js";
 import "./button-layout.css.ts.vanilla.css-mistica.js";
-var f = "kfxylhi", l = {
-    right: "_1y2v1nf6e",
-    left: "_1y2v1nf6c",
-    center: "_1y2v1nf6d",
-    "full-width": "kfxylhh _1y2v1nf6d"
-}, i = "kfxylh6 _1y2v1nf64", t = "kfxylh7", v = "kfxylh8", h = "kfxylh3 _1y2v1nf64 _1y2v1nf8f", y = "kfxylh4", e = "kfxylh1", k = "kfxylh9", o = {
+var l = "kfxylhi", f = {
+    right: "_1y2v1nfbe",
+    left: "_1y2v1nfbc",
+    center: "_1y2v1nfbd",
+    "full-width": "kfxylhh _1y2v1nfbd"
+}, i = "kfxylh6 _1y2v1nfb4", t = "kfxylh7", v = "kfxylh8", h = "kfxylh3 _1y2v1nfb4 _1y2v1nfbr", y = "kfxylh4", e = "kfxylh1", k = "kfxylh9", o = {
     buttonWidth: "var(--kfxylh0)"
 };
-export { f as alignMoreThanOneChildred, l as alignVariant, i as baseContainer, t as container, v as fullWidthContainer, h as link, y as linkAlignment, e as margins, k as noButtonWidth, o as vars };
+export { l as alignMoreThanOneChildred, f as alignVariant, i as baseContainer, t as container, v as fullWidthContainer, h as link, y as linkAlignment, e as margins, k as noButtonWidth, o as vars };

package/dist-es/button.css-mistica.js

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./button.css.ts.vanilla.css-mistica.js";
-var _ = 104, r = 2, y = 8, f = 24, a = 20, p = 16, b = 20, i = 14.5, s = 10.5, e = "rrbrpnl", I = "rrbrpni _1y2v1nf28", l = {
-    primary: "rrbrpnp rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf21 _1y2v1nf3s",
-    secondary: "rrbrpnq rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf25 _1y2v1nf5y",
-    danger: "rrbrpnr rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf20 _1y2v1nf3m"
-}, t = "rrbrpn0", N = "rrbrpng _1y2v1nf7p _1y2v1nf84 _1y2v1nf68 _1y2v1nf8g _1y2v1nf5z _1y2v1nfah _1y2v1nfaa _1y2v1nf27 _1y2v1nf5y _1y2v1nfas _1y2v1nf9m", g = "rrbrpn7 _1y2v1nf65 _1y2v1nf60 _1y2v1nfau _1y2v1nfc3 _1y2v1nf6d _1y2v1nf6j", o = "rrbrpn4 _1y2v1nf66 _1y2v1nf8x _1y2v1nfas", L = "rrbrpn5", d = "rrbrpn9 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", m = "rrbrpnk _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", S = {
-    primary: "rrbrpnm rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf20 _1y2v1nf3r",
-    secondary: "rrbrpnn rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf23 _1y2v1nf5y",
-    danger: "rrbrpno rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf20 _1y2v1nf3m"
+var _ = 104, r = 2, y = 8, f = 24, b = 20, a = 16, p = 20, e = 14.5, t = 10.5, d = "rrbrpnl", i = "rrbrpni _1y2v1nf28", s = {
+    primary: "rrbrpnp rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb8 _1y2v1nfaz _1y2v1nfbs _1y2v1nfdt _1y2v1nfe4 _1y2v1nf21 _1y2v1nf3s",
+    secondary: "rrbrpnq rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb8 _1y2v1nfaz _1y2v1nfbs _1y2v1nfdt _1y2v1nfe4 _1y2v1nf25 _1y2v1nf5y",
+    danger: "rrbrpnr rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb8 _1y2v1nfaz _1y2v1nfbs _1y2v1nfdt _1y2v1nfe4 _1y2v1nf20 _1y2v1nf3m"
+}, I = "rrbrpn0", N = "rrbrpng _1y2v1nf8t _1y2v1nfa2 _1y2v1nfb8 _1y2v1nfbs _1y2v1nfaz _1y2v1nfdt _1y2v1nfdm _1y2v1nf27 _1y2v1nf5y _1y2v1nfe4 _1y2v1nfcy", z = "rrbrpn7 _1y2v1nfb5 _1y2v1nfb0 _1y2v1nfe6 _1y2v1nfff _1y2v1nfbd _1y2v1nfbj", o = "rrbrpn4 _1y2v1nfb6 _1y2v1nfc9 _1y2v1nfe4", L = "rrbrpn5", l = "rrbrpn9 _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd", m = "rrbrpnk _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd", S = {
+    primary: "rrbrpnm rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb8 _1y2v1nfaz _1y2v1nfbs _1y2v1nfdt _1y2v1nfe4 _1y2v1nf20 _1y2v1nf3r",
+    secondary: "rrbrpnn rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb8 _1y2v1nfaz _1y2v1nfbs _1y2v1nfdt _1y2v1nfe4 _1y2v1nf23 _1y2v1nf5y",
+    danger: "rrbrpno rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb8 _1y2v1nfaz _1y2v1nfbs _1y2v1nfdt _1y2v1nfe4 _1y2v1nf20 _1y2v1nf3m"
 };
-export { _ as BUTTON_MIN_WIDTH, r as CHEVRON_MARGIN_LEFT_LINK, y as ICON_MARGIN_PX, f as ICON_SIZE, a as SMALL_ICON_SIZE, p as SMALL_SPINNER_SIZE, b as SPINNER_SIZE, i as X_PADDING_PX, s as X_SMALL_PADDING_PX, e as alignedLink, I as inverseLink, l as inverseVariants, t as isLoading, N as link, g as loadingContent, o as loadingFiller, L as small, d as textContent, m as textContentLink, S as variants };
+export { _ as BUTTON_MIN_WIDTH, r as CHEVRON_MARGIN_LEFT_LINK, y as ICON_MARGIN_PX, f as ICON_SIZE, b as SMALL_ICON_SIZE, a as SMALL_SPINNER_SIZE, p as SPINNER_SIZE, e as X_PADDING_PX, t as X_SMALL_PADDING_PX, d as alignedLink, i as inverseLink, s as inverseVariants, I as isLoading, N as link, z as loadingContent, o as loadingFiller, L as small, l as textContent, m as textContentLink, S as variants };

package/dist-es/callout.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./callout.css.ts.vanilla.css-mistica.js";
-var y = "_14g0jmy1 _1y2v1nf6w _1y2v1nf7b _1y2v1nf7q _1y2v1nf85 _1y2v1nf64 _1y2v1nfaj _1y2v1nfas", _ = "_14g0jmy3 _1y2v1nf6q";
+var y = "_14g0jmy1 _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfdv _1y2v1nfe4", _ = "_14g0jmy3 _1y2v1nfbq";
 export { y as container, _ as content };

package/dist-es/card.css-mistica.js

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./card.css.ts.vanilla.css-mistica.js";
-var _ = "_15e54s91 _1y2v1nf64 _1y2v1nf6q _1y2v1nf6k", a = "_15e54s93 _1y2v1nf64 _1y2v1nf5z", y = "_15e54s9r _1y2v1nf8p _1y2v1nf95 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab", f = "_1y2v1nf64 _1y2v1nf8r _1y2v1nf97 _1y2v1nf6j _1y2v1nf6d", r = "_15e54s9s _1y2v1nf8p _1y2v1nf95 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab", e = "_15e54s9t _1y2v1nf8p _1y2v1nf95 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab", d = "_15e54s9w", s = "_15e54s9f _1y2v1nf7q _1y2v1nf85 _1y2v1nf6y _1y2v1nf7d _1y2v1nf64 _1y2v1nf6q _1y2v1nf5z _1y2v1nf6a _1y2v1nf8f", t = "_15e54s9n", o = "_1y2v1nf8f _1y2v1nf8w _1y2v1nf64 _1y2v1nf5z", i = "_15e54s9m", c = "_15e54s9o", C = "_1y2v1nf64 _1y2v1nf6a _1y2v1nf8w _1y2v1nf8f", l = "_15e54s9d _1y2v1nf7q _1y2v1nf85 _1y2v1nf64 _1y2v1nf6q _1y2v1nf5z _1y2v1nf6w _1y2v1nf7d _1y2v1nf6a _1y2v1nf6g", p = "_15e54s9h _1y2v1nf6w _1y2v1nf7b _1y2v1nf7q _1y2v1nf85 _1y2v1nf64 _1y2v1nf5z _1y2v1nf8w _1y2v1nf6a _1y2v1nf6g _1y2v1nf6q", b = "_15e54s95", u = "_15e54s98 _15e54s96", h = "_15e54s99 _15e54s96", q = "_15e54s9a _15e54s96", w = "_15e54s94", j = "_15e54s97 _15e54s96", m = {
-    aspectRatio: "var(--_15e54s9v)"
-}, z = "_15e54s9u _1y2v1nf8p _1y2v1nf95 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab";
-export { _ as actions, a as boxed, y as cardAction, f as cardActionIconButton, r as cardActionInverse, e as cardActionMedia, d as cardContainer, s as dataCard, t as displayCardBackground, o as displayCardContainer, i as displayCardContent, c as displayCardGradient, C as mediaCard, l as mediaCardContent, p as snapCard, b as touchable, u as touchableCardOverlay, h as touchableCardOverlayInverse, q as touchableCardOverlayMedia, w as touchableContainer, j as touchableMediaCardOverlay, m as vars, z as videoAction };
+var _ = "_15e54s91 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfbk", a = "_15e54s93 _1y2v1nfb4 _1y2v1nfaz", y = "_15e54s9v _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", f = "_1y2v1nfb4 _1y2v1nfc3 _1y2v1nfcj _1y2v1nfbj _1y2v1nfbd", r = "_15e54s9w _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", e = "_15e54s9x _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", b = "_15e54s910", d = "_15e54s98", s = "_15e54s9j _1y2v1nf8w _1y2v1nfa5 _1y2v1nf6k _1y2v1nf7t _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nfba _1y2v1nfbr", c = "_15e54s9r", t = "_1y2v1nfbr _1y2v1nfc8 _1y2v1nfb4 _1y2v1nfaz", o = "_15e54s9q", i = "_15e54s9s", l = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfc8 _1y2v1nfbr _1y2v1nfbq", C = "_15e54s9f _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nf6e _1y2v1nf7t _1y2v1nfba _1y2v1nfbg", h = "_15e54s9h _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nfba _1y2v1nfbg _1y2v1nf6e", u = "_15e54s9l _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfaz _1y2v1nfc8 _1y2v1nfba _1y2v1nfbg _1y2v1nfbr _1y2v1nfbq", p = "_15e54s95", j = "_15e54s9a _15e54s96", q = "_15e54s9b _15e54s96", z = "_15e54s9c _15e54s96", O = "_15e54s94", k = "_15e54s97 _15e54s96", A = "_15e54s99 _15e54s96", M = {
+    aspectRatio: "var(--_15e54s9z)"
+}, g = "_15e54s9y _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn";
+export { _ as actions, a as boxed, y as cardAction, f as cardActionIconButton, r as cardActionInverse, e as cardActionMedia, b as cardContainer, d as circularMediaOverlay, s as dataCard, c as displayCardBackground, t as displayCardContainer, o as displayCardContent, i as displayCardGradient, l as mediaCard, C as mediaCardContent, h as nakedCardContent, u as snapCard, p as touchable, j as touchableCardOverlay, q as touchableCardOverlayInverse, z as touchableCardOverlayMedia, O as touchableContainer, k as touchableMediaCardOverlay, A as touchableNakedMediaOverlay, M as vars, g as videoAction };