@telefonica/mistica 16.1.0 → 16.2.0

package/dist/accordion.js

@@ -14,13 +14,13 @@ _export(exports, {
         return de;
     },
     AccordionItem: function() {
-        return se;
+        return ie;
     },
     BoxedAccordion: function() {
-        return le;
+        return ae;
     },
     BoxedAccordionItem: function() {
-        return ae;
+        return se;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -39,7 +39,6 @@ const _boxed = require("./boxed.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _reacttransitiongroup = require("react-transition-group");
 const _platform = require("./utils/platform.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -169,20 +168,20 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
     index: [],
     toggle: ()=>{}
 }), F = ()=>_react.useContext(g), B = (param)=>{
-    let { value: t, defaultValue: r, onChange: n, singleOpen: c } = param;
-    const m = t !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
+    let { value: t, defaultValue: r, onChange: n, singleOpen: i } = param;
+    const m = t !== void 0, s = (e)=>e === void 0 ? [] : typeof e == "number" ? [
             e
-        ] : e, [s, a] = _react.useState(d(r));
+        ] : e, [d, a] = _react.useState(s(r));
     _react.useEffect(()=>{
-        if (s.length > 1 && c) {
+        if (d.length > 1 && i) {
             const e = [
-                ...s
+                ...d
             ];
             e.splice(1), a(e);
         }
     }, [
-        c,
-        s
+        i,
+        d
     ]);
     const p = (e, l)=>{
         if (!l) return [
@@ -192,36 +191,36 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
         let I = [
             ...l
         ];
-        return u === -1 ? c ? I = [
+        return u === -1 ? i ? I = [
             e
         ] : I.push(e) : I.splice(u, 1), I;
     }, f = (e)=>{
-        if (m || a(p(e, s)), n) {
-            const l = (m ? d(t) : s).includes(e);
+        if (m || a(p(e, d)), n) {
+            const l = (m ? s(t) : d).includes(e);
             n(e, !l);
         }
     };
     return m ? [
-        d(t),
+        s(t),
         f
     ] : [
-        s,
+        d,
         f
     ];
 }, H = (t)=>{
     const r = t == null ? void 0 : t.closest("[data-accordion]");
     if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === t);
 }, b = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
-    var { content: t, dataAttributes: r, trackingEvent: n } = _param, c = _object_without_properties(_param, [
+    var { content: t, dataAttributes: r, trackingEvent: n } = _param, i = _object_without_properties(_param, [
         "content",
         "dataAttributes",
         "trackingEvent"
     ]);
-    const d = _react.useRef(null), s = _react.useRef(null), { index: a, toggle: p } = F(), f = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), e = _react.useId(), l = _react.useId(), [u, I] = _react.useState(), x = u !== void 0 && (a == null ? void 0 : a.includes(u));
+    const s = _react.useRef(null), d = _react.useRef(null), { index: a, toggle: p } = F(), f = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), e = _react.useId(), l = _react.useId(), [u, I] = _react.useState(), x = u !== void 0 && (a == null ? void 0 : a.includes(u));
     return _react.useEffect(()=>{
-        I(H(s.current));
+        I(H(d.current));
     }, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        ref: s
+        ref: d
     }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
         "accordion-item": !0
     }))), {
@@ -239,7 +238,7 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
                     paddingX: 16,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
                         labelId: e
-                    }, c), {
+                    }, i), {
                         right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _accordioncssmistica.chevronContainer,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
@@ -255,13 +254,13 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
                 in: x,
                 timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : v,
-                nodeRef: d,
+                nodeRef: s,
                 classNames: _accordioncssmistica.panelTransitionClasses,
                 mountOnEnter: !0,
                 unmountOnExit: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _accordioncssmistica.panelContainer,
-                    ref: d,
+                    ref: s,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _accordioncssmistica.panel,
                         role: "region",
@@ -277,30 +276,28 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
             })
         ]
     }));
-}), se = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
+}), ie = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: t, role: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: r,
-        className: (0, _sprinklescssmistica.sprinkles)({
-            width: "100%"
-        }),
+        className: _accordioncssmistica.accordionItem,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, n), {
-            ref: c,
+            ref: i,
             dataAttributes: _object_spread({
                 "component-name": "AccordionItem"
             }, t)
         }))
     });
 }), de = (param)=>{
-    let { children: t, dataAttributes: r, index: n, defaultIndex: c, onChange: m, singleOpen: d, role: s } = param;
+    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: m, singleOpen: s, role: d } = param;
     const [a, p] = B({
         value: n,
-        defaultValue: c,
+        defaultValue: i,
         onChange: m,
-        singleOpen: d
+        singleOpen: s
     }), f = _react.Children.toArray(t).filter(Boolean), e = f.length - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
         value: {
@@ -308,7 +305,7 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
             toggle: p
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            role: s
+            role: d
         }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
             accordion: !0
         }), "Accordion")), {
@@ -323,26 +320,26 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
                 }, u))
         }))
     });
-}, ae = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
+}, se = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: t, isInverse: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "isInverse"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
         isInverse: r,
-        ref: c,
+        ref: i,
         dataAttributes: _object_spread({
             "component-name": "BoxedAccordionItem"
         }, t),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
     });
-}), le = (param)=>{
-    let { children: t, dataAttributes: r, index: n, defaultIndex: c, onChange: m, singleOpen: d, role: s } = param;
+}), ae = (param)=>{
+    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: m, singleOpen: s, role: d } = param;
     const [a, p] = B({
         value: n,
-        defaultValue: c,
+        defaultValue: i,
         onChange: m,
-        singleOpen: d
+        singleOpen: s
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
         value: {
@@ -351,7 +348,7 @@ const v = 400, g = /*#__PURE__*/ _react.createContext({
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: 16,
-            role: s,
+            role: d,
             dataAttributes: _object_spread({
                 "component-name": "BoxedAccordion",
                 accordion: !0

package/dist/align.css-mistica.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "container", {
+    enumerable: true,
+    get: function() {
+        return o;
+    }
+});
+require("./align.css.ts.vanilla.css-mistica.js");
+var o = "_1mfs0fk0";

package/dist/align.css.d.ts

@@ -0,0 +1 @@
+export declare const container: string;

package/dist/align.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 a;
+    }
+});
+const a = "";

package/dist/align.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+type Props = {
+    x?: 'start' | 'center' | 'end';
+    y?: 'start' | 'center' | 'end';
+    width?: number | string;
+    height?: number | string;
+    children?: React.ReactNode;
+    dataAttributes?: DataAttributes;
+};
+declare const Align: ({ x, y, width, height, children, dataAttributes }: Props) => JSX.Element;
+export default Align;

package/dist/align.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return d;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _dom = require("./utils/dom.js");
+const _aligncssmistica = require("./align.css-mistica.js");
+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;
+}
+const l = (param)=>{
+    let { x: o = "start", y: e = "start", width: t, height: r, children: s, dataAttributes: a } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(a, "Align")), {
+        className: _aligncssmistica.container,
+        style: _object_spread({
+            placeItems: `${e} ${o}`
+        }, t !== void 0 ? {
+            width: t
+        } : {}, r !== void 0 ? {
+            height: r
+        } : {}),
+        children: s
+    }));
+}, d = l;

package/dist/box.css-mistica.js

@@ -0,0 +1,41 @@
+"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, {
+    box: function() {
+        return a;
+    },
+    vars: function() {
+        return m;
+    }
+});
+require("./box.css.ts.vanilla.css-mistica.js");
+var a = "_1xgjmkvc", m = {
+    paddingTop: {
+        desktop: "var(--_1xgjmkv0)",
+        tablet: "var(--_1xgjmkv1)",
+        mobile: "var(--_1xgjmkv2)"
+    },
+    paddingBottom: {
+        desktop: "var(--_1xgjmkv3)",
+        tablet: "var(--_1xgjmkv4)",
+        mobile: "var(--_1xgjmkv5)"
+    },
+    paddingLeft: {
+        desktop: "var(--_1xgjmkv6)",
+        tablet: "var(--_1xgjmkv7)",
+        mobile: "var(--_1xgjmkv8)"
+    },
+    paddingRight: {
+        desktop: "var(--_1xgjmkv9)",
+        tablet: "var(--_1xgjmkva)",
+        mobile: "var(--_1xgjmkvb)"
+    }
+};

package/dist/box.css.d.ts

@@ -0,0 +1,23 @@
+export declare const vars: {
+    paddingTop: {
+        desktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        mobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    paddingBottom: {
+        desktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        mobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    paddingLeft: {
+        desktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        mobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    paddingRight: {
+        desktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        mobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export declare const box: string;

package/dist/box.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/box.d.ts

@@ -12,6 +12,10 @@ type Props = {
     paddingRight?: ByBreakpoint<PadSize>;
     as?: React.ComponentType<any> | string;
     children?: React.ReactNode;
+    /**
+     * @deprecated this component is meant to be used only to add padding.
+     * Consider using a div (or similar) instead if you need to add extra styles
+     */
     className?: string;
     role?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */

package/dist/box.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return B;
+        return K;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _boxcssmistica = require("./box.css-mistica.js");
+const _css = require("./utils/css.js");
 const _dom = require("./utils/dom.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -111,36 +112,43 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const N = /*#__PURE__*/ _react.forwardRef((param, n)=>{
-    let { className: i, children: f, as: x = "div", width: l, padding: a = 0, paddingX: b = a, paddingY: m = a, paddingTop: e = m, paddingBottom: o = m, paddingLeft: r = b, paddingRight: t = b, role: y, id: j, dataAttributes: u, "aria-label": S, "aria-hidden": k } = param;
-    const p = {
-        paddingTop: e,
-        paddingBottom: o,
-        paddingLeft: r,
-        paddingRight: t
+const E = /*#__PURE__*/ _react.forwardRef((param, n)=>{
+    let { className: p, children: x, as: y = "div", width: m, padding: c = 0, paddingX: f = c, paddingY: i = c, paddingTop: e = i, paddingBottom: o = i, paddingLeft: t = f, paddingRight: r = f, role: k, id: V, dataAttributes: j, "aria-label": u, "aria-hidden": $ } = param;
+    const P = typeof e == "object" ? e : {
+        mobile: e,
+        tablet: e,
+        desktop: e
+    }, z = typeof o == "object" ? o : {
+        mobile: o,
+        tablet: o,
+        desktop: o
+    }, A = typeof t == "object" ? t : {
+        mobile: t,
+        tablet: t,
+        desktop: t
+    }, C = typeof r == "object" ? r : {
+        mobile: r,
+        tablet: r,
+        desktop: r
+    }, s = (a, b)=>{
+        var _b_tablet;
+        return (0, _css.applyCssVars)({
+            [a.mobile]: `${b.mobile}px`,
+            [a.tablet]: `${(_b_tablet = b.tablet) !== null && _b_tablet !== void 0 ? _b_tablet : b.mobile}px`,
+            [a.desktop]: `${b.desktop}px`
+        });
     };
-    let c = {}, s = "";
-    try {
-        s = (0, _sprinklescssmistica.sprinkles)(p);
-    } catch (e1) {
-        c = {
-            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__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(u)), {
-        role: y,
-        "aria-label": S,
-        "aria-hidden": k,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(y, _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(j)), {
+        role: k,
+        "aria-label": u,
+        "aria-hidden": $,
         ref: n,
-        className: (0, _classnames.default)(i, s),
-        style: _object_spread({}, l !== void 0 ? {
-            width: l,
+        className: (0, _classnames.default)(p, _boxcssmistica.box),
+        style: _object_spread({}, s(_boxcssmistica.vars.paddingTop, P), s(_boxcssmistica.vars.paddingBottom, z), s(_boxcssmistica.vars.paddingLeft, A), s(_boxcssmistica.vars.paddingRight, C), m !== void 0 ? {
+            width: m,
             boxSizing: "border-box"
-        } : {}, s ? {} : c),
-        id: j,
-        children: f
+        } : {}),
+        id: V,
+        children: x
     }));
-}), B = N;
+}), K = E;

package/dist/boxed.css-mistica.js

@@ -13,18 +13,21 @@ _export(exports, {
         return e;
     },
     boxed: function() {
-        return a;
+        return r;
     },
     desktopOnly: function() {
-        return r;
+        return a;
     },
-    vars: function() {
+    noBorder: function() {
         return b;
+    },
+    vars: function() {
+        return k;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./boxed.css.ts.vanilla.css-mistica.js");
-var e = "_1y2v1nfk1", a = "ihbkeqk", r = "ihbkeqm", b = {
+var e = "_1y2v1nfk1", r = "ihbkeqm", a = "ihbkeqo", b = "_1y2v1nfk2", k = {
     width: "var(--ihbkeq0)",
     height: "var(--ihbkeq1)",
     minHeight: "var(--ihbkeq2)",
@@ -50,5 +53,7 @@ var e = "_1y2v1nfk1", a = "ihbkeqk", r = "ihbkeqm", b = {
         minHeight: "var(--ihbkeqh)",
         maxWidth: "var(--ihbkeqi)",
         minWidth: "var(--ihbkeqj)"
-    }
+    },
+    background: "var(--ihbkeqk)",
+    borderRadius: "var(--ihbkeql)"
 };

package/dist/boxed.css.d.ts

@@ -25,7 +25,10 @@ export declare const vars: {
         maxWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const boxed: string;
 export declare const boxBorder: string;
 export declare const desktopOnly: string;
+export declare const noBorder: string;

package/dist/boxed.js

@@ -24,7 +24,6 @@ const _themevariantcontext = require("./theme-variant-context.js");
 const _dom = require("./utils/dom.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _boxedcssmistica = require("./boxed.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -124,41 +123,38 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const A = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
-        border: "none"
-    }) : _boxedcssmistica.boxBorder, s = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", e = (o, r)=>{
+const A = (t, r)=>t || r ? _boxedcssmistica.noBorder : _boxedcssmistica.boxBorder, a = (t)=>typeof t == "number" ? `${t}px` : t !== null && t !== void 0 ? t : "initial", e = (t, r)=>{
     if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
-        [_boxedcssmistica.vars[o]]: s(r)
+        [_boxedcssmistica.vars[t]]: a(r)
     };
-    const t = {
-        [_boxedcssmistica.vars.mobile[o]]: s(r.mobile),
-        [_boxedcssmistica.vars.desktop[o]]: s(r.desktop)
+    const n = {
+        [_boxedcssmistica.vars.mobile[t]]: a(r.mobile),
+        [_boxedcssmistica.vars.desktop[t]]: a(r.desktop)
     };
-    return r.tablet && (t[_boxedcssmistica.vars.tablet[o]] = s(r.tablet)), t;
-}, H = /*#__PURE__*/ _react.forwardRef((param, w)=>{
-    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: C, variant: O } = param;
+    return r.tablet && (n[_boxedcssmistica.vars.tablet[t]] = a(r.tablet)), n;
+}, H = /*#__PURE__*/ _react.forwardRef((param, O)=>{
+    let { children: t, isInverse: r = !1, className: n, role: l, dataAttributes: b, "aria-label": c, "aria-labelledby": p, width: y, maxWidth: u, minWidth: x, height: g, minHeight: h, borderRadius: k = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: B, variant: C } = param;
     const m = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        ref: w,
-        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({}, e("width", h), e("maxWidth", x), e("minWidth", g), e("height", k), e("minHeight", u)))), {
+        ref: O,
+        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread_props(_object_spread({}, e("width", y), e("maxWidth", u), e("minWidth", x), e("height", g), e("minHeight", h)), {
+            [_boxedcssmistica.vars.background]: (d !== null && d !== void 0 ? d : r) ? m ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer,
+            [_boxedcssmistica.vars.borderRadius]: k
+        }))), {
             background: d
         }),
-        className: (0, _classnames.default)(t, _boxedcssmistica.boxed, A(m, r), (0, _sprinklescssmistica.sprinkles)({
-            borderRadius: B,
-            overflow: "hidden",
-            background: (d !== null && d !== void 0 ? d : r) ? m ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer
-        }), {
-            [_boxedcssmistica.desktopOnly]: C
+        className: (0, _classnames.default)(n, _boxedcssmistica.boxed, A(m, r), {
+            [_boxedcssmistica.desktopOnly]: B
         }),
-        role: p,
+        role: l,
         "aria-label": c,
-        "aria-labelledby": y
+        "aria-labelledby": p
     }, (0, _dom.getPrefixedDataAttributes)(b)), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-            variant: O !== null && O !== void 0 ? O : r ? "inverse" : void 0,
-            children: o
+            variant: C !== null && C !== void 0 ? C : r ? "inverse" : void 0,
+            children: t
         })
     }));
-}), G = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(H, _object_spread_props(_object_spread({}, o), {
+}), G = /*#__PURE__*/ _react.forwardRef((t, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(H, _object_spread_props(_object_spread({}, t), {
         ref: r
     })));