@telefonica/mistica 16.1.1 → 16.2.0

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "16.1.1";
+const o = "16.2.0";

package/dist/popover.d.ts

@@ -4,6 +4,7 @@ type Position = 'top' | 'bottom' | 'left' | 'right';
 type Props = {
     description?: string;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     title?: string;
     asset?: React.ReactNode;
     onClose?: () => void;

package/dist/popover.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return N;
+        return A;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -14,7 +14,6 @@ const _tooltip = require("./tooltip.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _text = require("./text.js");
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _popovercssmistica = require("./popover.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
@@ -78,8 +77,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const T = (_param)=>{
-    var { open: a, extra: m, children: c, onClose: i = ()=>{}, closeButtonLabel: l, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, f = _object_without_properties(_param, [
+const S = (_param)=>{
+    var { open: a, extra: c, children: i, onClose: l = ()=>{}, closeButtonLabel: m, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, d = _object_without_properties(_param, [
         "open",
         "extra",
         "children",
@@ -92,7 +91,7 @@ const T = (_param)=>{
         "asset"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.BaseTooltip, _object_spread({
-        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
+        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: _popovercssmistica.content,
             children: [
                 (o || e || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -120,18 +119,18 @@ const T = (_param)=>{
                         ]
                     })
                 }),
-                m !== null && m !== void 0 ? m : c
+                c !== null && c !== void 0 ? c : i
             ]
         }),
         centerContent: !1,
         open: a,
         hasPointerInteractionOnly: !0,
         delay: !1,
-        onClose: i,
-        closeButtonLabel: l,
+        onClose: l,
+        closeButtonLabel: m,
         trackingEvent: s,
         dataAttributes: _object_spread({
             "component-name": "Popover"
         }, p)
-    }, f));
-}, N = T;
+    }, d));
+}, A = S;

package/dist/skeleton-base.js

@@ -6,31 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return v;
+        return k;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _skeletonscssmistica = require("./skeletons.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const c = (param)=>{
-    let { width: e = "100%", height: o = 8, radius: s = _skincontractcssmistica.vars.borderRadii.container, className: a, noBorderRadius: n = !1 } = param;
-    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
+const l = (param)=>{
+    let { width: r = "100%", height: s = 8, radius: a = _skincontractcssmistica.vars.borderRadii.container, className: o, noBorderRadius: t = !1 } = param;
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(a, (0, _sprinklescssmistica.sprinkles)({
-            background: t ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton
-        })),
+        className: (0, _classnames.default)(o, i ? _skeletonscssmistica.background.inverse : _skeletonscssmistica.background.default),
         style: {
-            borderRadius: n ? 0 : s,
-            width: e,
-            height: o
+            borderRadius: t ? 0 : a,
+            width: r,
+            height: s
         },
         "aria-hidden": !0
     });
-}, v = c;
+}, k = l;

package/dist/skeletons.css-mistica.js

@@ -10,18 +10,24 @@ function _export(target, all) {
 }
 _export(exports, {
     animation: function() {
-        return i;
+        return r;
+    },
+    background: function() {
+        return a;
     },
     circle: function() {
-        return o;
+        return f;
     },
     line: function() {
-        return r;
+        return i;
     },
     row: function() {
-        return f;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./skeletons.css.ts.vanilla.css-mistica.js");
-var i = "zopolw2 _1y2v1nfhm", o = "_1y2v1nfi2 _1y2v1nfi4", r = "zopolw6 _1y2v1nfi3", f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht";
+var r = "zopolw6 _1y2v1nfhm", a = {
+    default: "_1y2v1nf42",
+    inverse: "_1y2v1nf43"
+}, f = "_1y2v1nfi2 _1y2v1nfi4", i = "zopolwa _1y2v1nfi3", o = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht";

package/dist/skeletons.css.d.ts

@@ -1,3 +1,4 @@
+export declare const background: Record<"inverse" | "default", string>;
 export declare const animation: string;
 export declare const row: string;
 export declare const circle: string;

package/dist/snackbar.css-mistica.js

@@ -13,45 +13,51 @@ _export(exports, {
         return f;
     },
     button: function() {
-        return r;
-    },
-    content: function() {
         return _;
     },
-    dismissButton: function() {
+    buttonTouchable: function() {
         return y;
     },
+    contentWithLongButton: function() {
+        return o;
+    },
+    contentWithoutLongButton: function() {
+        return r;
+    },
+    dismissButton: function() {
+        return t;
+    },
     dismissIcon: function() {
         return a;
     },
     longButton: function() {
-        return o;
+        return h;
     },
     snackbar: function() {
         return b;
     },
     snackbarContainer: function() {
-        return t;
+        return e;
     },
     snackbarOpen: function() {
-        return h;
+        return i;
     },
     wrapper: function() {
-        return e;
+        return p;
     },
     wrapperCritical: function() {
-        return p;
+        return k;
     },
     wrapperInfo: function() {
-        return i;
+        return c;
     },
     wrapperOpen: function() {
-        return k;
+        return j;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./snackbar.css.ts.vanilla.css-mistica.js");
-var f = 300, r = "o7bjb0c", _ = "_1y2v1nfhk _1y2v1nfhw", y = {
-    centered: "o7bjb0g _1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo",
+var f = 300, _ = "o7bjb0g", y = "_1y2v1nf7j _1y2v1nf8s _1y2v1nfa4 _1y2v1nfbd _1y2v1nfk2 _1y2v1nf7c", o = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhq", r = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhp _1y2v1nfhz", t = {
+    centered: "o7bjb0l _1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo",
     topRight: "_1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo _1y2v1nfku"
-}, a = "o7bjb0j _1y2v1nfih _1y2v1nfix _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", o = "o7bjb0d", b = "o7bjb01 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", t = "o7bjb03 _1y2v1nfhe", h = "o7bjb04", e = "o7bjb06 _1y2v1nfhg _1y2v1nfkd", p = "_1y2v1nf5e", i = "_1y2v1nf5f", k = "o7bjb09";
+}, a = "o7bjb0o _1y2v1nfih _1y2v1nfix _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", h = "o7bjb0h", b = "o7bjb01 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", e = "o7bjb03 _1y2v1nfhe", i = "o7bjb04", p = "o7bjb06 _1y2v1nfhg _1y2v1nfkd", k = "_1y2v1nf5e", c = "_1y2v1nf5f", j = "o7bjb09";

package/dist/snackbar.css.d.ts

@@ -6,9 +6,11 @@ export declare const wrapper: string;
 export declare const wrapperCritical: string;
 export declare const wrapperInfo: string;
 export declare const wrapperOpen: string;
-export declare const content: string;
+export declare const contentWithLongButton: string;
+export declare const contentWithoutLongButton: string;
 export declare const textContainer: string;
 export declare const button: string;
 export declare const longButton: string;
+export declare const buttonTouchable: string;
 export declare const dismissButton: Record<"centered" | "topRight", string>;
 export declare const dismissIcon: string;

package/dist/snackbar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ge;
+        return Ee;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -17,7 +17,6 @@ const _webviewbridge = require("@tef-novum/webview-bridge");
 const _hooks = require("./hooks.js");
 const _text = require("./text.js");
 const _snackbarcssmistica = require("./snackbar.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _portal = require("./portal.js");
@@ -126,41 +125,41 @@ const ne = [
     "TIMEOUT",
     "CONSECUTIVE",
     "BUTTON"
-], oe = 5e3, se = 1e4, ce = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { message: m, buttonText: t, buttonAccessibilityLabel: f, closeButtonLabel: p, duration: n, onClose: o, type: c, withDismiss: d = !1, dataAttributes: O } = param;
-    const { texts: T, t: a } = (0, _hooks.useTheme)(), [i, I] = _react.useState(!1), { width: s, ref: U } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: C } = (0, _hooks.useScreenSize)(), l = s > (C ? 160 : 128), B = _react.useRef(null), E = n === "PERSISTENT" && !t || d, k = t ? se : oe, S = _react.useRef(o);
+], se = 5e3, ce = 1e4, ae = /*#__PURE__*/ _react.forwardRef((param, E)=>{
+    let { message: u, buttonText: r, buttonAccessibilityLabel: m, closeButtonLabel: I, duration: o, onClose: n, type: c, withDismiss: f = !1, dataAttributes: O } = param;
+    const { texts: d, t: a } = (0, _hooks.useTheme)(), [i, p] = _react.useState(!1), { width: s, ref: k } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: C } = (0, _hooks.useScreenSize)(), T = s > (C ? 160 : 128), g = _react.useRef(null), v = o === "PERSISTENT" && !r || f, b = r ? ce : se, h = _react.useRef(n);
     _react.useEffect(()=>{
-        S.current = o;
+        h.current = n;
     }, [
-        o
+        n
     ]);
-    const u = _react.useCallback((v)=>{
-        I(!1), setTimeout(()=>{
-            var h;
-            (h = S.current) == null || h.call(S, v);
+    const l = _react.useCallback((B)=>{
+        p(!1), setTimeout(()=>{
+            var S;
+            (S = h.current) == null || S.call(h, B);
         }, process.env.NODE_ENV === "test" ? 0 : _snackbarcssmistica.TRANSITION_TIME_IN_MS);
     }, []);
-    return _react.useImperativeHandle(g, ()=>_object_spread_props(_object_spread({}, B), {
-            close: u
+    return _react.useImperativeHandle(E, ()=>_object_spread_props(_object_spread({}, g), {
+            close: l
         }), [
-        u
+        l
     ]), _react.useEffect(()=>{
-        const v = setTimeout(()=>{
-            I(!0);
-        }, 50), h = n !== "PERSISTENT" ? setTimeout(()=>u({
+        const B = setTimeout(()=>{
+            p(!0);
+        }, 50), S = o !== "PERSISTENT" ? setTimeout(()=>l({
                 action: "TIMEOUT"
-            }), k) : void 0;
+            }), b) : void 0;
         return ()=>{
-            clearTimeout(v), clearTimeout(h);
+            clearTimeout(B), clearTimeout(S);
         };
     }, [
-        u,
-        n,
-        k
+        l,
+        o,
+        b
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         className: _snackbarcssmistica.snackbarContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            ref: B,
+            ref: g,
             className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
                 [_snackbarcssmistica.snackbarOpen]: i
             }),
@@ -172,62 +171,53 @@ const ne = [
             }, (0, _dom.getPrefixedDataAttributes)(O, "SnackBar")), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
-                            flexDirection: l ? "column" : "row",
-                            alignItems: l ? void 0 : "center"
-                        })),
-                        style: E && !l ? {
+                        className: (0, _classnames.default)(T ? _snackbarcssmistica.contentWithLongButton : _snackbarcssmistica.contentWithoutLongButton),
+                        style: v && !T ? {
                             paddingRight: 32
                         } : void 0,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                style: E && l ? {
+                                style: v && T ? {
                                     paddingRight: 32
                                 } : void 0,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
-                                    children: m
+                                    children: u
                                 })
                             }),
-                            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_snackbarcssmistica.button, {
-                                    [_snackbarcssmistica.longButton]: l
+                                    [_snackbarcssmistica.longButton]: T
                                 }),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                                    className: (0, _sprinklescssmistica.sprinkles)({
-                                        paddingY: 4,
-                                        paddingX: 8,
-                                        border: "none",
-                                        padding: 0,
-                                        background: "transparent"
-                                    }),
-                                    ref: U,
+                                    className: _snackbarcssmistica.buttonTouchable,
+                                    ref: k,
                                     onPress: ()=>{
-                                        u({
+                                        l({
                                             action: "BUTTON"
                                         });
                                     },
-                                    "aria-label": f,
+                                    "aria-label": m,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         medium: !0,
                                         forceMobileSizes: !0,
                                         truncate: !0,
                                         color: c === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
-                                        children: t
+                                        children: r
                                     })
                                 })
                             })
                         ]
                     }),
-                    E ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                    v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                         onPress: ()=>{
-                            u({
+                            l({
                                 action: "DISMISS"
                             });
                         },
-                        "aria-label": p || T.closeButtonLabel || a(_texttokens.closeButtonLabel),
-                        className: _snackbarcssmistica.dismissButton[l ? "topRight" : "centered"],
+                        "aria-label": I || d.closeButtonLabel || a(_texttokens.closeButtonLabel),
+                        className: _snackbarcssmistica.dismissButton[T ? "topRight" : "centered"],
                         style: {
                             display: "flex",
                             width: 32,
@@ -245,23 +235,23 @@ const ne = [
             }))
         })
     });
-}), ae = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { message: m, buttonText: t, buttonAccessibilityLabel: f, closeButtonLabel: p, duration: n, onClose: o = ()=>{}, type: c = "INFORMATIVE", withDismiss: d, dataAttributes: O } = param;
-    const T = (0, _webviewbridge.isWebViewBridgeAvailable)(), a = _react.useRef(o), i = _react.useRef(!1);
+}), ie = /*#__PURE__*/ _react.forwardRef((param, E)=>{
+    let { message: u, buttonText: r, buttonAccessibilityLabel: m, closeButtonLabel: I, duration: o, onClose: n = ()=>{}, type: c = "INFORMATIVE", withDismiss: f, dataAttributes: O } = param;
+    const d = (0, _webviewbridge.isWebViewBridgeAvailable)(), a = _react.useRef(n), i = _react.useRef(!1);
     return _react.useEffect(()=>{
-        a.current = o;
+        a.current = n;
     }, [
-        o
+        n
     ]), _react.useEffect(()=>{
-        T && !i.current && (i.current = !0, (0, _webviewbridge.nativeMessage)({
-            message: m,
-            duration: n,
-            buttonText: t,
-            buttonAccessibilityLabel: f,
+        d && !i.current && (i.current = !0, (0, _webviewbridge.nativeMessage)({
+            message: u,
+            duration: o,
+            buttonText: r,
+            buttonAccessibilityLabel: m,
             type: c,
-            withDismiss: d
-        }).then((I)=>{
-            const s = I;
+            withDismiss: f
+        }).then((p)=>{
+            const s = p;
             s != null && s.action && ne.includes(s.action) ? a.current({
                 action: s.action
             }) : a.current({
@@ -271,24 +261,24 @@ const ne = [
             i.current = !1;
         }));
     }, [
-        f,
-        p,
-        t,
-        n,
         m,
-        T,
+        I,
+        r,
+        o,
+        u,
+        d,
         c,
-        d
-    ]), T ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(ce, {
-        ref: g,
-        message: m,
-        duration: n,
-        buttonText: t,
-        buttonAccessibilityLabel: f,
-        closeButtonLabel: p,
+        f
+    ]), d ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+        ref: E,
+        message: u,
+        duration: o,
+        buttonText: r,
+        buttonAccessibilityLabel: m,
+        closeButtonLabel: I,
         type: c,
         onClose: a.current,
-        withDismiss: d,
+        withDismiss: f,
         dataAttributes: O
     });
-}), ge = ae;
+}), Ee = ie;

package/dist/tag.css-mistica.js

@@ -2,12 +2,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "tag", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    badge: function() {
+        return y;
+    },
+    icon: function() {
         return _;
+    },
+    tag: function() {
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tag.css.ts.vanilla.css-mistica.js");
-var _ = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
+var y = "_1y2v1nfhl", _ = "_1y2v1nfhm", f = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";

package/dist/tag.css.d.ts

@@ -1 +1,3 @@
 export declare const tag: string;
+export declare const icon: string;
+export declare const badge: string;

package/dist/tag.js

@@ -16,7 +16,6 @@ const _themevariantcontext = require("./theme-variant-context.js");
 const _css = require("./utils/css.js");
 const _dom = require("./utils/dom.js");
 const _tagcssmistica = require("./tag.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _hooks = require("./hooks.js");
@@ -78,10 +77,10 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const { colors: t } = _skincontractcssmistica.vars, V = (param)=>{
-    let { Icon: e, children: i, dataAttributes: m, type: l = "promo", badge: n } = param;
-    const { textPresets: d } = (0, _hooks.useTheme)(), p = (0, _themevariantcontext.useThemeVariant)(), o = n === !0 ? void 0 : n || 0;
-    if (!i) return null;
+const { colors: t } = _skincontractcssmistica.vars, C = (param)=>{
+    let { Icon: e, children: o, dataAttributes: c, type: m = "promo", badge: i } = param;
+    const { textPresets: d } = (0, _hooks.useTheme)(), l = (0, _themevariantcontext.useThemeVariant)(), a = i === !0 ? void 0 : i || 0;
+    if (!o) return null;
     const u = {
         // [textColor, backgroundColor]
         promo: [
@@ -95,7 +94,7 @@ const { colors: t } = _skincontractcssmistica.vars, V = (param)=>{
         inactive: [
             t.tagTextInactive,
             // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
-            p === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
+            l === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
         ],
         success: [
             t.tagTextSuccess,
@@ -109,46 +108,43 @@ const { colors: t } = _skincontractcssmistica.vars, V = (param)=>{
             t.tagTextError,
             t.tagBackgroundError
         ]
-    }, [s, f] = u[l];
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m, "Tag")), {
-        className: (0, _classnames.default)(_tagcssmistica.tag, (0, _sprinklescssmistica.sprinkles)({
+    }, [n, p] = u[m];
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Tag")), {
+        className: (0, _classnames.default)(_tagcssmistica.tag),
+        style: {
             paddingLeft: e ? 8 : 12,
-            paddingRight: o !== 0 ? 8 : 12,
-            background: f
-        })),
+            paddingRight: a !== 0 ? 8 : 12,
+            background: p
+        },
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(e, {
-                    color: s,
+                    color: n,
                     size: (0, _css.pxToRem)(16),
-                    className: (0, _sprinklescssmistica.sprinkles)({
-                        display: "block"
-                    })
+                    className: _tagcssmistica.icon
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                 isInverse: !1,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                        color: s,
+                        color: n,
                         size: 14,
                         lineHeight: 20,
                         weight: d.indicator.weight,
                         truncate: !0,
-                        children: i
+                        children: o
                     }),
-                    o !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    a !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 4,
-                        className: (0, _sprinklescssmistica.sprinkles)({
-                            display: "inline-flex"
-                        }),
+                        className: _tagcssmistica.badge,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
-                            value: o
+                            value: a
                         })
                     })
                 ]
             })
         ]
     }));
-}, I = V;
+}, I = C;