@telefonica/mistica 16.43.0 → 16.44.0

package/dist/accordion.css-mistica.js

@@ -13,16 +13,16 @@ _export(exports, {
         return n;
     },
     boxed: function() {
-        return e;
+        return s;
     },
     chevronContainer: function() {
-        return s;
+        return e;
     },
     itemContent: function() {
-        return a;
+        return r;
     },
     panel: function() {
-        return r;
+        return a;
     },
     panelContainer: function() {
         return t;
@@ -36,15 +36,15 @@ _export(exports, {
     touchableBackground: function() {
         return i;
     },
-    touchableBackgroundInverse: function() {
-        return y;
+    touchableBackgroundOverBrand: function() {
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./accordion.css.ts.vanilla.css-mistica.js");
-var n = "v16_43_1y2v1nfkj", e = "v16_43_8s3szx1", s = "v16_43_8s3szx5", a = "v16_43_1y2v1nf9p v16_43_1y2v1nfay v16_43_1y2v1nfc7 v16_43_1y2v1nfdg v16_43_1y2v1nfkj v16_43_1y2v1nfme v16_43_1y2v1nf9o v16_43_1y2v1nfjy v16_43_1y2v1nfl0", r = "v16_43_8s3szxb", t = "v16_43_8s3szx6", o = {
-    enter: "v16_43_8s3szx7",
-    enterActive: "v16_43_8s3szx8",
-    exit: "v16_43_8s3szx9",
-    exitActive: "v16_43_8s3szxa"
-}, x = "v16_43_8s3szx4", i = "v16_43_8s3szx2", y = "v16_43_8s3szx3";
+var n = "v16_44_1y2v1nfq9", s = "v16_44_8s3szx1", e = "v16_44_8s3szx5", r = "v16_44_1y2v1nfff v16_44_1y2v1nfgo v16_44_1y2v1nfhx v16_44_1y2v1nfj6 v16_44_1y2v1nfq9 v16_44_1y2v1nfs4 v16_44_1y2v1nffe v16_44_1y2v1nfpo v16_44_1y2v1nfqq", a = "v16_44_8s3szxb", t = "v16_44_8s3szx6", o = {
+    enter: "v16_44_8s3szx7",
+    enterActive: "v16_44_8s3szx8",
+    exit: "v16_44_8s3szx9",
+    exitActive: "v16_44_8s3szxa"
+}, x = "v16_44_8s3szx4", i = "v16_44_8s3szx2", f = "v16_44_8s3szx3";

package/dist/accordion.css.d.ts

@@ -1,7 +1,7 @@
 export declare const itemContent: string;
 export declare const boxed: string;
 export declare const touchableBackground: string;
-export declare const touchableBackgroundInverse: string;
+export declare const touchableBackgroundOverBrand: string;
 export declare const rightContentContainer: string;
 export declare const chevronContainer: string;
 export declare const panelContainer: string;

package/dist/accordion.d.ts

@@ -37,7 +37,11 @@ type MultipleOpenProps = {
 type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
 export declare const Accordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
 interface BoxedAccordionItemProps extends AccordionItemContentProps {
+    /**
+     * @deprecated Use `variant="brand"` instead.
+     */
     isInverse?: boolean;
+    variant?: 'default' | 'brand';
 }
 export declare const BoxedAccordionItem: React.ForwardRefExoticComponent<BoxedAccordionItemProps & React.RefAttributes<HTMLDivElement>>;
 export declare const BoxedAccordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;

package/dist/accordion.js

@@ -14,13 +14,13 @@ _export(exports, {
         return Ie;
     },
     AccordionItem: function() {
-        return pe;
+        return xe;
     },
     BoxedAccordion: function() {
         return he;
     },
     BoxedAccordionItem: function() {
-        return xe;
+        return ge;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -165,54 +165,54 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const N = 400, b = /*#__PURE__*/ _react.createContext({
+const B = 400, b = /*#__PURE__*/ _react.createContext({
     index: [],
     toggle: ()=>{}
-}), W = ()=>_react.useContext(b), B = (param)=>{
-    let { value: n, defaultValue: r, onChange: t, singleOpen: c } = param;
-    const s = n !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
+}), Y = ()=>_react.useContext(b), R = (param)=>{
+    let { value: t, defaultValue: r, onChange: n, singleOpen: a } = param;
+    const d = t !== void 0, l = (e)=>e === void 0 ? [] : typeof e == "number" ? [
             e
-        ] : e, [a, m] = _react.useState(d(r));
+        ] : e, [c, u] = _react.useState(l(r));
     _react.useEffect(()=>{
-        if (a.length > 1 && c) {
+        if (c.length > 1 && a) {
             const e = [
-                ...a
+                ...c
             ];
-            e.splice(1), m(e);
+            e.splice(1), u(e);
         }
     }, [
-        c,
-        a
+        a,
+        c
     ]);
-    const u = (e, l)=>{
-        if (!l) return [
+    const f = (e, m)=>{
+        if (!m) return [
             e
         ];
-        const p = l.indexOf(e);
-        let I = [
-            ...l
+        const s = m.indexOf(e);
+        let x = [
+            ...m
         ];
-        return p === -1 ? c ? I = [
+        return s === -1 ? a ? x = [
             e
-        ] : I.push(e) : I.splice(p, 1), I;
-    }, f = (e)=>{
-        if (s || m(u(e, a)), t) {
-            const l = (s ? d(n) : a).includes(e);
-            t(e, !l);
+        ] : x.push(e) : x.splice(s, 1), x;
+    }, p = (e)=>{
+        if (d || u(f(e, c)), n) {
+            const m = (d ? l(t) : c).includes(e);
+            n(e, !m);
         }
     };
-    return s ? [
-        d(n),
-        f
+    return d ? [
+        l(t),
+        p
     ] : [
-        a,
-        f
+        c,
+        p
     ];
-}, Y = (n)=>{
-    const r = n == null ? void 0 : n.closest("[data-accordion]");
-    if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((t)=>t.closest("[data-accordion]") === r).findIndex((t)=>t === n);
-}, S = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
-    var { content: n, dataAttributes: r, trackingEvent: t, right: c, "aria-label": s, "aria-labelledby": d } = _param, a = _object_without_properties(_param, [
+}, Z = (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);
+}, S = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
+    var { content: t, dataAttributes: r, trackingEvent: n, right: a, "aria-label": d, "aria-labelledby": l } = _param, c = _object_without_properties(_param, [
         "content",
         "dataAttributes",
         "trackingEvent",
@@ -220,31 +220,39 @@ const N = 400, b = /*#__PURE__*/ _react.createContext({
         "aria-label",
         "aria-labelledby"
     ]);
-    const u = _react.useRef(null), f = _react.useRef(null), { index: e, toggle: l } = W(), p = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), I = _react.useId(), C = _react.useId(), [x, y] = _react.useState(), h = x !== void 0 && (e == null ? void 0 : e.includes(x));
-    return _react.useEffect(()=>{
-        y(Y(f.current));
-    }, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        ref: f
+    const f = _react.useRef(null), p = _react.useRef(null), { index: e, toggle: m } = Y(), s = (0, _themevariantcontext.useThemeVariant)(), x = _react.useId(), C = _react.useId(), [h, y] = _react.useState(), g = h !== void 0 && (e == null ? void 0 : e.includes(h));
+    _react.useEffect(()=>{
+        y(Z(p.current));
+    }, []);
+    const T = {
+        default: g ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium,
+        alternative: g ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium,
+        brand: _skincontractcssmistica.vars.colors.textSecondaryBrand,
+        media: _skincontractcssmistica.vars.colors.textSecondaryBrand,
+        negative: _skincontractcssmistica.vars.colors.textSecondaryNegative
+    }[s];
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        ref: p
     }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
         "accordion-item": !0
     }))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                ref: m,
-                className: (0, _classnames.default)(_accordioncssmistica.itemContent, p ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
+                ref: u,
+                className: (0, _classnames.default)(_accordioncssmistica.itemContent, s === "brand" || s === "media" || s === "negative" ? _accordioncssmistica.touchableBackgroundOverBrand : _accordioncssmistica.touchableBackground),
                 onPress: ()=>{
-                    x !== void 0 && l(x);
+                    h !== void 0 && m(h);
                 },
-                trackingEvent: t,
-                "aria-expanded": h,
+                trackingEvent: n,
+                "aria-expanded": g,
                 "aria-controls": C,
-                "aria-label": s,
-                "aria-labelledby": d,
+                "aria-label": d,
+                "aria-labelledby": l,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
-                        labelId: I
-                    }, a), {
+                        labelId: x
+                    }, c), {
                         right: (param)=>{
                             let { centerY: O } = param;
                             return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -252,14 +260,14 @@ const N = 400, b = /*#__PURE__*/ _react.createContext({
                                 alignItems: O ? "center" : void 0,
                                 className: _accordioncssmistica.rightContentContainer,
                                 children: [
-                                    c,
+                                    a,
                                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _accordioncssmistica.chevronContainer,
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
                                             size: 20,
-                                            transitionDuration: N,
-                                            direction: h ? "up" : "down",
-                                            color: p ? _skincontractcssmistica.vars.colors.inverse : h ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
+                                            transitionDuration: B,
+                                            direction: g ? "up" : "down",
+                                            color: T
                                         })
                                     })
                                 ]
@@ -269,110 +277,111 @@ const N = 400, b = /*#__PURE__*/ _react.createContext({
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                in: h,
-                timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : N,
-                nodeRef: u,
+                in: g,
+                timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : B,
+                nodeRef: f,
                 classNames: _accordioncssmistica.panelTransitionClasses,
                 mountOnEnter: !0,
                 unmountOnExit: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _accordioncssmistica.panelContainer,
-                    ref: u,
+                    ref: f,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _accordioncssmistica.panel,
                         role: "region",
-                        "aria-labelledby": I,
+                        "aria-labelledby": x,
                         id: C,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingX: 16,
                             paddingBottom: 16,
-                            children: n
+                            children: t
                         })
                     })
                 })
             })
         ]
     }));
-}), pe = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
-    var { dataAttributes: n, role: r } = _param, t = _object_without_properties(_param, [
+}), xe = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
+    var { dataAttributes: t, role: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: r,
         className: _accordioncssmistica.accordionItem,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread_props(_object_spread({}, t), {
-            ref: c,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread_props(_object_spread({}, n), {
+            ref: a,
             dataAttributes: _object_spread({
                 "component-name": "AccordionItem"
-            }, n)
+            }, t)
         }))
     });
 }), Ie = (param)=>{
-    let { children: n, dataAttributes: r, index: t, defaultIndex: c, onChange: s, singleOpen: d, role: a } = param;
-    const [m, u] = B({
-        value: t,
-        defaultValue: c,
-        onChange: s,
-        singleOpen: d
-    }), f = _react.Children.toArray(n).filter(Boolean), e = f.length - 1;
+    let { children: t, dataAttributes: r, index: n, defaultIndex: a, onChange: d, singleOpen: l, role: c } = param;
+    const [u, f] = R({
+        value: n,
+        defaultValue: a,
+        onChange: d,
+        singleOpen: l
+    }), p = _react.Children.toArray(t).filter(Boolean), e = p.length - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(b.Provider, {
         value: {
-            index: m,
-            toggle: u
+            index: u,
+            toggle: f
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            role: a
+            role: c
         }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
             accordion: !0
         }), "Accordion")), {
-            children: f.map((l, p)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+            children: p.map((m, s)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                     children: [
-                        l,
-                        p < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        m,
+                        s < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingX: 16,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                         })
                     ]
-                }, p))
+                }, s))
         }))
     });
-}, xe = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
-    var { dataAttributes: n, isInverse: r } = _param, t = _object_without_properties(_param, [
+}, ge = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
+    var { dataAttributes: t, isInverse: r, variant: n } = _param, a = _object_without_properties(_param, [
         "dataAttributes",
-        "isInverse"
+        "isInverse",
+        "variant"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
         overflow: "visible",
         className: _accordioncssmistica.boxed,
-        variant: r ? "inverse" : "default",
-        ref: c,
+        variant: n !== null && n !== void 0 ? n : r ? "brand" : "default",
+        ref: d,
         dataAttributes: _object_spread({
             "component-name": "BoxedAccordionItem"
-        }, n),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread({}, t))
+        }, t),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread({}, a))
     });
 }), he = (param)=>{
-    let { children: n, dataAttributes: r, index: t, defaultIndex: c, onChange: s, singleOpen: d, role: a } = param;
-    const [m, u] = B({
-        value: t,
-        defaultValue: c,
-        onChange: s,
-        singleOpen: d
+    let { children: t, dataAttributes: r, index: n, defaultIndex: a, onChange: d, singleOpen: l, role: c } = param;
+    const [u, f] = R({
+        value: n,
+        defaultValue: a,
+        onChange: d,
+        singleOpen: l
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(b.Provider, {
         value: {
-            index: m,
-            toggle: u
+            index: u,
+            toggle: f
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: 16,
-            role: a,
+            role: c,
             dataAttributes: _object_spread({
                 "component-name": "BoxedAccordion",
                 accordion: !0
             }, r),
-            children: n
+            children: t
         })
     });
 };

package/dist/align.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "container", {
     }
 });
 require("./align.css.ts.vanilla.css-mistica.js");
-var o = "v16_43_1mfs0fk0";
+var o = "v16_44_1mfs0fk0";

package/dist/avatar.css-mistica.js

@@ -13,8 +13,8 @@ _export(exports, {
         return _;
     },
     image: function() {
-        return n;
+        return a;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var _ = "v16_43_1y2v1nfmw v16_43_1y2v1nfjw v16_43_1y2v1nfkb v16_43_1y2v1nfk5 v16_43_1y2v1nfn0", n = "v16_43_1y2v1nfou";
+var _ = "v16_44_1y2v1nfsm v16_44_1y2v1nfpm v16_44_1y2v1nfq1 v16_44_1y2v1nfpv v16_44_1y2v1nfsq", a = "v16_44_1y2v1nfuk";

package/dist/avatar.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return H;
+        return U;
     },
     renderText: function() {
-        return k;
+        return $;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -151,11 +151,11 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const $ = (r, o)=>{
+const T = (r, o)=>{
     if (!o) return 0;
     const t = r / 2, e = (0, _css.pxToRem)(o === !0 ? 5 : 10);
     return `calc(${t * (1 - Math.sin(Math.PI / 4))}px - ${e})`;
-}, k = (r, o)=>{
+}, $ = (r, o)=>{
     if (!o) return null;
     let t;
     return r <= 40 ? t = 14 : r <= 64 ? t = 16 : t = 18, /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
@@ -165,8 +165,8 @@ const $ = (r, o)=>{
         },
         children: o
     });
-}, y = (_param)=>{
-    var { size: r, src: o, Icon: t = _iconuseraccountregular.default, badge: e, initials: c = "", "aria-label": u, dataAttributes: f } = _param, s = _object_without_properties(_param, [
+}, k = (_param)=>{
+    var { size: r, src: o, Icon: t = _iconuseraccountregular.default, badge: e, initials: c = "", "aria-label": f, dataAttributes: g } = _param, s = _object_without_properties(_param, [
         "size",
         "src",
         "Icon",
@@ -176,41 +176,41 @@ const $ = (r, o)=>{
         "dataAttributes"
     ]);
     var _s_backgroundColor, _s_textColor;
-    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), g = (_s_backgroundColor = s.backgroundColor) !== null && _s_backgroundColor !== void 0 ? _s_backgroundColor : i ? _skincontractcssmistica.vars.colors.brandHigh : _skincontractcssmistica.vars.colors.brandLow, b = (_s_textColor = s.textColor) !== null && _s_textColor !== void 0 ? _s_textColor : i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textBrand, [h, l] = _react.useState(!1);
+    const i = (0, _themevariantcontext.useThemeVariant)(), l = i === "brand" || i === "media" || i === "negative", b = (_s_backgroundColor = s.backgroundColor) !== null && _s_backgroundColor !== void 0 ? _s_backgroundColor : l ? _skincontractcssmistica.vars.colors.brandHigh : _skincontractcssmistica.vars.colors.brandLow, h = (_s_textColor = s.textColor) !== null && _s_textColor !== void 0 ? _s_textColor : l ? _skincontractcssmistica.vars.colors.textPrimaryNegative : _skincontractcssmistica.vars.colors.textBrand, [p, m] = _react.useState(!1);
     _react.useEffect(()=>{
-        l(!1);
+        m(!1);
     }, [
         o
     ]);
-    const p = s.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", x = c.trim().slice(0, 2), m = $(r, e), v = e === !0 ? void 0 : e || 0, I = !!o && !h, A = r <= 40 ? 16 : 24;
+    const x = s.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", v = c.trim().slice(0, 2), d = T(r, e), A = e === !0 ? void 0 : e || 0, C = !!o && !p, w = r <= 40 ? 16 : 24;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
-        value: v,
-        top: m,
-        right: m,
+        value: A,
+        top: d,
+        right: d,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             className: _avatarcssmistica.avatar,
             role: "img",
-            "aria-label": u !== null && u !== void 0 ? u : c,
+            "aria-label": f !== null && f !== void 0 ? f : c,
             style: {
                 width: r,
                 height: r,
-                color: b,
-                background: g,
+                color: h,
+                background: b,
                 boxSizing: "border-box",
-                border: p
+                border: x
             }
-        }, (0, _dom.getPrefixedDataAttributes)(f, "Avatar")), {
-            children: I ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+        }, (0, _dom.getPrefixedDataAttributes)(g, "Avatar")), {
+            children: C ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
                 src: o,
                 className: _avatarcssmistica.image,
-                onError: ()=>l(!0),
+                onError: ()=>m(!0),
                 role: "none",
                 width: r,
                 height: r
-            }) : k(r, x) || /* @__PURE__ */ (0, _jsxruntime.jsx)(t, {
-                size: A,
+            }) : $(r, v) || /* @__PURE__ */ (0, _jsxruntime.jsx)(t, {
+                size: w,
                 color: "currentColor"
             })
         }))
     });
-}, H = y;
+}, U = k;

package/dist/badge.css-mistica.js

@@ -30,4 +30,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./badge.css.ts.vanilla.css-mistica.js");
-var r = "v16_43_17szrmd2 v16_43_1y2v1nf70", a = "v16_43_17szrmd7", d = "v16_43_17szrmd3", e = "v16_43_17szrmd5 v16_43_17szrmd2 v16_43_1y2v1nf70 v16_43_1y2v1nfjw v16_43_1y2v1nfkb v16_43_1y2v1nfk5", n = "v16_43_1y2v1nfjr", m = "v16_43_1y2v1nfjq v16_43_1y2v1nfk0";
+var r = "v16_44_17szrmd2 v16_44_1y2v1nfbx", a = "v16_44_17szrmd7", d = "v16_44_17szrmd3", e = "v16_44_17szrmd5 v16_44_17szrmd2 v16_44_1y2v1nfbx v16_44_1y2v1nfpm v16_44_1y2v1nfq1 v16_44_1y2v1nfpv", n = "v16_44_1y2v1nfph", m = "v16_44_1y2v1nfpg v16_44_1y2v1nfpq";

package/dist/badge.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return F;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -75,13 +75,13 @@ function _object_spread_props(target, source) {
     return target;
 }
 const j = (param)=>{
-    let { children: e, value: r, right: s, top: o, dataAttributes: c } = param;
-    const f = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { textPresets: g } = (0, _hooks.useTheme)();
+    let { children: e, value: r, right: i, top: a, dataAttributes: c } = param;
+    const o = (0, _themevariantcontext.useThemeVariant)(), { textPresets: f } = (0, _hooks.useTheme)();
     if (e && r === 0) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: e
     });
     if (r === 0) return null;
-    const i = r && r > 9, a = f || !!e;
+    const s = r && r > 9, m = o === "brand" || o === "negative" || o === "media" || !!e;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
         className: _badgecssmistica.container
     }, (0, _dom.getPrefixedDataAttributes)(c, "Badge")), {
@@ -92,29 +92,29 @@ const j = (param)=>{
                 "aria-hidden": "true",
                 className: (0, _classnames.default)(_badgecssmistica.badgeNumber, {
                     [_badgecssmistica.badgeWithChildren]: !!e,
-                    [_badgecssmistica.badgeBigNumber]: i,
-                    [_badgecssmistica.badgeBorder]: a
+                    [_badgecssmistica.badgeBigNumber]: s,
+                    [_badgecssmistica.badgeBorder]: m
                 }),
                 style: {
-                    right: s,
-                    top: o
+                    right: i,
+                    top: a
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                     forceMobileSizes: !0,
-                    weight: g.indicator.weight,
-                    color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
-                    children: i ? "+9" : r
+                    weight: f.indicator.weight,
+                    color: _skincontractcssmistica.vars.colors.textPrimaryNegative,
+                    children: s ? "+9" : r
                 })
             }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    right: s,
-                    top: o
+                    right: i,
+                    top: a
                 },
                 className: (0, _classnames.default)(_badgecssmistica.badge, {
                     [_badgecssmistica.badgeWithChildren]: !!e,
-                    [_badgecssmistica.badgeBorder]: a
+                    [_badgecssmistica.badgeBorder]: m
                 })
             })
         ]
     }));
-}, F = j;
+}, M = j;

package/dist/box.css-mistica.js

@@ -17,25 +17,25 @@ _export(exports, {
     }
 });
 require("./box.css.ts.vanilla.css-mistica.js");
-var _ = "v16_43_1xgjmkvc", a = {
+var _ = "v16_44_1xgjmkvc", a = {
     paddingTop: {
-        desktop: "var(--v16_43_1xgjmkv0)",
-        tablet: "var(--v16_43_1xgjmkv1)",
-        mobile: "var(--v16_43_1xgjmkv2)"
+        desktop: "var(--v16_44_1xgjmkv0)",
+        tablet: "var(--v16_44_1xgjmkv1)",
+        mobile: "var(--v16_44_1xgjmkv2)"
     },
     paddingBottom: {
-        desktop: "var(--v16_43_1xgjmkv3)",
-        tablet: "var(--v16_43_1xgjmkv4)",
-        mobile: "var(--v16_43_1xgjmkv5)"
+        desktop: "var(--v16_44_1xgjmkv3)",
+        tablet: "var(--v16_44_1xgjmkv4)",
+        mobile: "var(--v16_44_1xgjmkv5)"
     },
     paddingLeft: {
-        desktop: "var(--v16_43_1xgjmkv6)",
-        tablet: "var(--v16_43_1xgjmkv7)",
-        mobile: "var(--v16_43_1xgjmkv8)"
+        desktop: "var(--v16_44_1xgjmkv6)",
+        tablet: "var(--v16_44_1xgjmkv7)",
+        mobile: "var(--v16_44_1xgjmkv8)"
     },
     paddingRight: {
-        desktop: "var(--v16_43_1xgjmkv9)",
-        tablet: "var(--v16_43_1xgjmkva)",
-        mobile: "var(--v16_43_1xgjmkvb)"
+        desktop: "var(--v16_44_1xgjmkv9)",
+        tablet: "var(--v16_44_1xgjmkva)",
+        mobile: "var(--v16_44_1xgjmkvb)"
     }
 };