@telefonica/mistica 15.9.0 → 15.11.0

package/dist/carousel.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     bullet: function() {
-        return y;
+        return f;
     },
     bulletActive: function() {
-        return f;
+        return y;
     },
     bulletActiveInverse: function() {
         return u;
@@ -31,10 +31,10 @@ _export(exports, {
         return c;
     },
     bulletInverse: function() {
-        return t;
+        return l;
     },
     carousel: function() {
-        return l;
+        return t;
     },
     carouselBullets: function() {
         return o;
@@ -70,22 +70,25 @@ _export(exports, {
         return P;
     },
     slideshow: function() {
-        return j;
+        return A;
     },
     slideshowBullets: function() {
-        return z;
+        return C;
     },
     slideshowContainer: function() {
-        return A;
+        return g;
     },
     slideshowItem: function() {
-        return C;
+        return j;
     },
     slideshowNextArrowButton: function() {
-        return g;
+        return q;
     },
     slideshowPrevArrowButton: function() {
-        return q;
+        return z;
+    },
+    slideshowWithBullets: function() {
+        return x;
     },
     vars: function() {
         return I;
@@ -95,10 +98,10 @@ require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./grid-layout.css.ts.vanilla.css-mistica.js");
 require("./carousel.css.ts.vanilla.css-mistica.js");
-var y = "_1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3 _1y2v1nf4y", f = "_1abcu72 _1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3 _1y2v1nf4z", u = "_1abcu72 _1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3 _1y2v1nf5i", e = "_1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", b = "_1abcu78 _1abcu75 _1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", r = "_1abcu76 _1abcu75 _1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", c = "_1abcu77 _1abcu75 _1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", t = "_1abcu7b _1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3", l = "_1abcu7s _1abcu7h _1y2v1nfhk _1y2v1nfj4", o = "_1abcu712 _1y2v1nfhk _1y2v1nfht _1y2v1nf7y", i = "_1y2v1nfhd _1y2v1nfjh _1y2v1nfhe", s = "_1abcu7w", h = "_1abcu710 _1abcu7y _1abcu7j _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf", k = "_1abcu7z _1abcu7y _1abcu7j _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf", m = "_1abcu7t", d = "_1abcu7u", B = "_1abcu7v", w = "_1abcu713", p = "_1abcu715", P = "_1abcu714", j = "_1abcu717 _1abcu7h _1y2v1nfhk _1y2v1nfj4", z = "_1abcu71f _1y2v1nfhf _1y2v1nfm7 _1y2v1nfhk _1y2v1nfht _1y2v1nfi7", A = "_1y2v1nfhe", C = "_1abcu719 _1y2v1nfi7 _1y2v1nfi2", g = "_1abcu71d _1abcu7y _1abcu7j _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf _1y2v1nfls", q = "_1abcu71b _1abcu7y _1abcu7j _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf _1y2v1nfld", I = {
-    itemsPerPageMobile: "var(--_1abcu7m)",
-    itemsPerPageTablet: "var(--_1abcu7n)",
-    itemsPerPageDesktop: "var(--_1abcu7o)",
-    gap: "var(--_1abcu7p)",
-    mobilePageOffset: "var(--_1abcu7q)"
+var f = "_1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3 _1y2v1nf4y", y = "_1abcu72 _1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3 _1y2v1nf4z", u = "_1abcu72 _1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3 _1y2v1nf5i", e = "_1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", b = "_1abcu78 _1abcu75 _1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", r = "_1abcu76 _1abcu75 _1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", c = "_1abcu77 _1abcu75 _1abcu74 _1y2v1nf7d _1y2v1nf8m _1y2v1nfaa _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nf7c", l = "_1abcu7b _1abcu71 _1y2v1nfic _1y2v1nfis _1y2v1nfk3", t = "_1abcu7u _1abcu7j _1y2v1nfhk _1y2v1nfj4", o = "_1abcu714 _1y2v1nfhk _1y2v1nfht _1y2v1nf7y", i = "_1y2v1nfhd _1y2v1nfjh _1y2v1nfhe", s = "_1abcu7y", h = "_1abcu712 _1abcu710 _1abcu7l _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf", k = "_1abcu711 _1abcu710 _1abcu7l _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf", m = "_1abcu7v", d = "_1abcu7w", B = "_1abcu7x", w = "_1abcu715", p = "_1abcu717", P = "_1abcu716", A = "_1abcu719 _1abcu7j _1y2v1nfhk _1y2v1nfj4", C = "_1abcu71h _1y2v1nfhf _1y2v1nfm7 _1y2v1nfhk _1y2v1nfht _1y2v1nfi7", g = "_1abcu7h _1y2v1nfhe", j = "_1abcu71b _1y2v1nfi7 _1y2v1nfi2", q = "_1abcu71f _1abcu710 _1abcu7l _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf _1y2v1nfls", z = "_1abcu71d _1abcu710 _1abcu7l _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3 _1y2v1nf3q _1y2v1nfii _1y2v1nfiy _1y2v1nfk1 _1y2v1nfhf _1y2v1nfld", x = "_1abcu7i", I = {
+    itemsPerPageMobile: "var(--_1abcu7o)",
+    itemsPerPageTablet: "var(--_1abcu7p)",
+    itemsPerPageDesktop: "var(--_1abcu7q)",
+    gap: "var(--_1abcu7r)",
+    mobilePageOffset: "var(--_1abcu7s)"
 };

package/dist/carousel.css.d.ts

@@ -7,6 +7,7 @@ export declare const bulletInverse: string;
 export declare const bulletActive: string;
 export declare const bulletActiveInverse: string;
 export declare const slideshowContainer: string;
+export declare const slideshowWithBullets: string;
 export declare const carouselContainer: string;
 export declare const vars: {
     itemsPerPageMobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/carousel.js

@@ -11,28 +11,28 @@ function _export(target, all) {
 }
 _export(exports, {
     Carousel: function() {
-        return jt;
+        return Ft;
     },
     CarouselContextConsumer: function() {
-        return _t;
+        return jt;
     },
     CarouselContextProvider: function() {
-        return Vt;
+        return zt;
     },
     CenteredCarousel: function() {
-        return Ft;
+        return Kt;
     },
     PageBullets: function() {
         return xe;
     },
     Slideshow: function() {
-        return Ut;
+        return Yt;
     },
     useCarouselContext: function() {
-        return zt;
+        return _t;
     },
     useSlideshowContext: function() {
-        return Kt;
+        return Ut;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -198,7 +198,7 @@ const ve = (t, e)=>{
     goNext: Pe,
     goToPage: we,
     bulletsProps: Ie
-}), re = /*#__PURE__*/ _react.createContext(null), Vt = (param)=>{
+}), re = /*#__PURE__*/ _react.createContext(null), zt = (param)=>{
     let { children: t } = param;
     const [e, s] = _react.useState(Ie), r = _react.useRef(Ce), d = _react.useRef(Pe), h = _react.useRef(we), w = _react.useMemo(()=>({
             goPrev: ()=>{
@@ -233,7 +233,7 @@ const ve = (t, e)=>{
             children: t
         })
     });
-}, zt = ()=>_react.useContext(se), _t = se.Consumer, ae = (t, e, s)=>s ? typeof s == "number" ? s : s[t] || e[t] : e[t], xt = (t, e)=>{
+}, _t = ()=>_react.useContext(se), jt = se.Consumer, ae = (t, e, s)=>s ? typeof s == "number" ? s : s[t] || e[t] : e[t], Ct = (t, e)=>{
     const s = {
         mobile: 1,
         tablet: 2,
@@ -260,34 +260,34 @@ const ve = (t, e)=>{
     const s = Math.ceil(t.length / e), r = [];
     for(let d = 0; d < t.length; d += s)r.push(t[d]);
     return r[r.length - 1] = t[t.length - s], r;
-}, Ct = (t, e)=>{
+}, Pt = (t, e)=>{
     const s = [];
     for(let r = 0; r < e.length; r++)r === 0 ? s.push(e[0]) : s.push((e[r] + e[r - 1]) / 2);
     for(let r = s.length - 1; r >= 0; r--)if (t - s[r] >= -1) return r;
     return 0;
 }, ke = 5e3, Me = (param)=>{
     let { items: t, itemStyle: e, itemClassName: s, withBullets: r, renderBullets: d, initialActiveItem: h, itemsPerPage: w, itemsToScroll: i, mobilePageOffset: u, gap: C, free: b, centered: N, autoplay: x, onPageChange: y, dataAttributes: W } = param;
-    const { texts: I, platformOverrides: S, skinName: H } = (0, _hooks.useTheme)(), J = (0, _desktopcontainertypecontext.useDesktopContainerType)(), a = xt(J || "large", w), { isDesktopOrBigger: R, isTablet: A } = (0, _hooks.useScreenSize)(), j = A ? a.tablet : a.mobile, P = Math.max(Math.floor(R ? a.desktop : j), 1), l = _react.useRef(null), m = Math.ceil(t.length / Math.max(Math.floor(a.mobile), 1)), v = Math.ceil(t.length / Math.max(Math.floor(a.tablet), 1)), k = Math.ceil(t.length / Math.max(Math.floor(a.desktop), 1)), E = Math.ceil(t.length / P), [{ scrollLeft: D, scrollRight: G }, Re] = _react.useState({
+    const { texts: I, platformOverrides: S, skinName: H } = (0, _hooks.useTheme)(), J = (0, _desktopcontainertypecontext.useDesktopContainerType)(), a = Ct(J || "large", w), { isDesktopOrBigger: R, isTablet: A } = (0, _hooks.useScreenSize)(), F = A ? a.tablet : a.mobile, P = Math.max(Math.floor(R ? a.desktop : F), 1), l = _react.useRef(null), m = Math.ceil(t.length / Math.max(Math.floor(a.mobile), 1)), v = Math.ceil(t.length / Math.max(Math.floor(a.tablet), 1)), k = Math.ceil(t.length / Math.max(Math.floor(a.desktop), 1)), E = Math.ceil(t.length / P), [{ scrollLeft: D, scrollRight: G }, Re] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), [Q, Ee] = _react.useState([]), F = _react.useMemo(()=>ie(Q, E), [
+    }), [Q, Ee] = _react.useState([]), K = _react.useMemo(()=>ie(Q, E), [
         Q,
         E
-    ]), K = i ? ie(Q, Math.ceil(t.length / i)) : F, Be = G !== 0, Le = D !== 0;
+    ]), U = i ? ie(Q, Math.ceil(t.length / i)) : K, Be = G !== 0, Le = D !== 0;
     _react.useEffect(()=>{
         if (l.current) {
             const c = l.current, f = ()=>{
-                const { scrollWidth: Y, clientWidth: V } = c, q = Math.round(c.scrollLeft), Z = Math.round(Y - (q + V));
+                const { scrollWidth: q, clientWidth: V } = c, Z = Math.round(c.scrollLeft), $ = Math.round(q - (Z + V));
                 Re({
-                    scrollLeft: q,
-                    scrollRight: Z
+                    scrollLeft: Z,
+                    scrollRight: $
                 });
             }, p = ()=>{
-                const Y = c.scrollWidth - c.clientWidth;
-                Ee(Array.from(c.querySelectorAll("[data-item]")).map((V, q)=>{
-                    if (q === t.length - 1) return Y;
-                    const Z = V.offsetLeft, We = parseInt(getComputedStyle(V).scrollMargin), Ae = N && !R ? Z - V.clientWidth / 2 : Z;
-                    return Math.min(Ae - We - c.offsetLeft, Y);
+                const q = c.scrollWidth - c.clientWidth;
+                Ee(Array.from(c.querySelectorAll("[data-item]")).map((V, Z)=>{
+                    if (Z === t.length - 1) return q;
+                    const $ = V.offsetLeft, We = parseInt(getComputedStyle(V).scrollMargin), Ae = N && !R ? $ - V.clientWidth / 2 : $;
+                    return Math.min(Ae - We - c.offsetLeft, q);
                 }));
             };
             f(), p(), c.addEventListener("scroll", f);
@@ -313,19 +313,19 @@ const ve = (t, e)=>{
         let f = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
         const p = l.current;
         if (p) {
-            const g = F[c];
+            const g = K[c];
             p.scrollTo({
                 left: g,
                 behavior: f ? "smooth" : "auto"
             });
         }
     }, [
-        F
+        K
     ]), X = _react.useCallback(()=>{
         const c = l.current;
         if (c) {
             const { scrollLeft: f } = c, p = [
-                ...K
+                ...U
             ].reverse().find((g)=>g - f < -1);
             c.scrollTo({
                 left: p,
@@ -333,18 +333,18 @@ const ve = (t, e)=>{
             });
         }
     }, [
-        K
+        U
     ]), O = _react.useCallback(()=>{
         const c = l.current;
         if (c) {
-            const { scrollLeft: f } = c, p = K.find((g)=>g - f > 1);
+            const { scrollLeft: f } = c, p = U.find((g)=>g - f > 1);
             c.scrollTo({
                 left: p,
                 behavior: "smooth"
             });
         }
     }, [
-        K
+        U
     ]), le = ve(!!x, l);
     _react.useEffect(()=>{
         h !== void 0 && B(Math.floor(h / P), !1);
@@ -369,7 +369,7 @@ const ve = (t, e)=>{
         G,
         le
     ]);
-    const M = Ct(D, F), ne = _react.useRef(!h), ce = _react.useRef(0);
+    const M = Pt(D, K), ne = _react.useRef(!h), ce = _react.useRef(0);
     _react.useEffect(()=>{
         if (y) {
             const c = Math.min((M + 1) * P - 1, t.length - 1), f = [];
@@ -411,12 +411,12 @@ const ve = (t, e)=>{
         ee,
         B
     ]);
-    let U = null;
-    d ? U = d({
+    let Y = null;
+    d ? Y = d({
         numPages: E,
         currentIndex: M,
         onPress: B
-    }) : r && (U = /* @__PURE__ */ (0, _jsxruntime.jsx)(xe, _object_spread_props(_object_spread({}, ee), {
+    }) : r && (Y = /* @__PURE__ */ (0, _jsxruntime.jsx)(xe, _object_spread_props(_object_spread({}, ee), {
         onPress: B
     })));
     const Te = "64px", ye = "36px";
@@ -484,13 +484,13 @@ const ve = (t, e)=>{
                     })
                 ]
             }),
-            U && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            Y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_carouselcssmistica.carouselBullets, {
                     [_carouselcssmistica.noCarouselBulletsDesktop]: k <= 1,
                     [_carouselcssmistica.noCarouselBulletsTablet]: v <= 1,
                     [_carouselcssmistica.noCarouselBulletsMobile]: m <= 1
                 }),
-                children: U
+                children: Y
             })
         ]
     }));
@@ -504,12 +504,12 @@ const ve = (t, e)=>{
             window.removeEventListener("resize", s);
         };
     }, []), t;
-}, jt = (t)=>{
+}, Ft = (t)=>{
     const e = Ne();
     return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Me, _object_spread_props(_object_spread({}, t), {
         key: e
     }));
-}, Ft = (param)=>{
+}, Kt = (param)=>{
     let { items: t, itemStyle: e, itemClassName: s, withBullets: r, renderBullets: d, initialActiveItem: h, onPageChange: w, dataAttributes: i } = param;
     const u = Ne();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(Me, {
@@ -530,7 +530,7 @@ const ve = (t, e)=>{
         onPageChange: w,
         dataAttributes: i
     }, u);
-}, Se = /*#__PURE__*/ _react.createContext(void 0), Kt = ()=>_react.useContext(Se), Ut = (param)=>{
+}, Se = /*#__PURE__*/ _react.createContext(void 0), Ut = ()=>_react.useContext(Se), Yt = (param)=>{
     let { items: t, withBullets: e, autoplay: s, initialPageIndex: r = 0, onPageChange: d, dataAttributes: h, inverseBullets: w = !0 } = param;
     const { texts: i, platformOverrides: u } = (0, _hooks.useTheme)(), C = _react.useContext(re), b = _react.useRef(null), [{ scrollLeft: N, scrollRight: x }, y] = _react.useState({
         scrollLeft: 0,
@@ -594,9 +594,9 @@ const ve = (t, e)=>{
         x,
         R
     ]);
-    const A = _react.useRef(!1), j = _react.useRef(0);
+    const A = _react.useRef(!1), F = _react.useRef(0);
     _react.useEffect(()=>{
-        d && (A.current ? j.current !== a && d(a) : A.current = r === a), j.current = a;
+        d && (A.current ? F.current !== a && d(a) : A.current = r === a), F.current = a;
     }, [
         a,
         r,
@@ -631,7 +631,9 @@ const ve = (t, e)=>{
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
             skipDesktop: !0,
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-                className: _carouselcssmistica.slideshowContainer
+                className: (0, _classnames.default)(_carouselcssmistica.slideshowContainer, {
+                    [_carouselcssmistica.slideshowWithBullets]: !!e
+                })
             }, (0, _dom.getPrefixedDataAttributes)(h, "SlideShow")), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {

package/dist/chip.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return oe;
+        return ot;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -120,8 +120,8 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const J = (t)=>{
-    const { Icon: c, children: T, id: k, dataAttributes: l, active: d, badge: r, onClose: m } = t, { texts: I, isDarkMode: B, textPresets: N } = (0, _hooks.useTheme)(), h = (0, _themevariantcontext.useThemeVariant)() === "alternative", p = c ? {
+const J = (e)=>{
+    const { Icon: n, children: R, id: T, dataAttributes: p, active: a, badge: r, onClose: s } = e, { texts: k, isDarkMode: I, textPresets: B } = (0, _hooks.useTheme)(), u = (0, _themevariantcontext.useThemeVariant)() === "alternative", f = n ? {
         mobile: 16,
         desktop: 8
     } : {
@@ -130,52 +130,38 @@ const J = (t)=>{
     }, w = {
         mobile: 20,
         desktop: 12
-    }, b = {
+    }, g = {
         mobile: 16,
         desktop: 8
-    }, y = ()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-            children: r === !0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
-                value: r
-            })
-        }) : null, u = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    }, b = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 4,
-                className: d ? _chipcssmistica.iconActive : _chipcssmistica.icon,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
+                className: a ? _chipcssmistica.iconActive : _chipcssmistica.icon,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
                     color: "currentColor",
                     size: (0, _css.pxToRem)(16)
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingRight: r ? 8 : m ? 4 : 0,
+                paddingRight: r ? 8 : s ? 4 : 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                    id: k,
-                    weight: N.indicator.weight,
+                    id: T,
+                    weight: B.indicator.weight,
                     truncate: 1,
                     color: "currentColor",
-                    children: T
+                    children: R
                 })
             })
         ]
     });
-    if (r) return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(h ? _chipcssmistica.chipVariants.overAlternative : _chipcssmistica.chipVariants.default, _chipcssmistica.chipWrapper),
-        paddingLeft: p,
-        paddingRight: b
-    }, (0, _dom.getPrefixedDataAttributes)(l, "Chip")), {
+    if (s) return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, _object_spread_props(_object_spread({
+        className: (0, _classnames.default)(u ? _chipcssmistica.chipVariants.overAlternative : _chipcssmistica.chipVariants.default, _chipcssmistica.chipWrapper),
+        paddingLeft: f,
+        paddingRight: g
+    }, (0, _dom.getPrefixedDataAttributes)(p, "Chip")), {
         children: [
-            u,
-            y()
-        ]
-    }));
-    if (m) return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(h ? _chipcssmistica.chipVariants.overAlternative : _chipcssmistica.chipVariants.default, _chipcssmistica.chipWrapper),
-        paddingLeft: p,
-        paddingRight: b
-    }, (0, _dom.getPrefixedDataAttributes)(l, "Chip")), {
-        children: [
-            u,
+            b,
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                 style: {
                     display: "flex",
@@ -184,8 +170,8 @@ const J = (t)=>{
                     width: (0, _css.pxToRem)(24),
                     height: (0, _css.pxToRem)(24)
                 },
-                "aria-label": I.closeButtonLabel,
-                onPress: ()=>m(),
+                "aria-label": k.closeButtonLabel,
+                onPress: ()=>s(),
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
                     size: (0, _css.pxToRem)(16),
                     color: _skincontractcssmistica.vars.colors.neutralMedium
@@ -193,20 +179,27 @@ const J = (t)=>{
             })
         ]
     }));
-    const f = t.href || t.onPress || t.to, P = d !== void 0 || f, v = _object_spread({
+    const c = e.href || e.onPress || e.to, y = a !== void 0 || c, v = _object_spread({
         "component-name": "Chip"
-    }, l), C = (j)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-            className: (0, _classnames.default)(_chipcssmistica.chipVariants[d ? "active" : h ? "overAlternative" : "default"], f ? _chipcssmistica.wrappedContent : _chipcssmistica.chipWrapper, {
-                [_chipcssmistica.chipInteractiveVariants[B ? "dark" : "light"]]: P
+    }, p), N = ()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: r === !0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
+                value: r
+            })
+        }) : null, C = (P)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
+            className: (0, _classnames.default)(_chipcssmistica.chipVariants[a ? "active" : u ? "overAlternative" : "default"], c ? _chipcssmistica.wrappedContent : _chipcssmistica.chipWrapper, {
+                [_chipcssmistica.chipInteractiveVariants[I ? "dark" : "light"]]: y
             }),
-            paddingLeft: p,
-            paddingRight: w,
-            dataAttributes: j,
-            children: u
+            paddingLeft: f,
+            paddingRight: r ? g : w,
+            dataAttributes: P,
+            children: [
+                b,
+                N()
+            ]
         });
-    return f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, t), {
+    return c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, e), {
         className: (0, _classnames.default)(_chipcssmistica.chipWrapper, _chipcssmistica.button),
         dataAttributes: v,
         children: C()
     })) : C(v);
-}, oe = J;
+}, ot = J;

package/dist/circle.d.ts

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-type Props = {
-    backgroundColor?: string;
-    backgroundImage?: string;
+import type { ExclusifyUnion } from './utils/utility-types';
+type CommonProps = {
     size?: number | string;
-    children?: React.ReactElement;
+    children?: React.ReactNode;
     border?: boolean | string;
     dataAttributes?: DataAttributes;
 };
+type BackgroundProps = {
+    background: string;
+};
+type BackgroundShorthandProps = {
+    backgroundColor?: string;
+    backgroundImage?: string;
+};
+type Props = CommonProps & ExclusifyUnion<BackgroundProps | BackgroundShorthandProps>;
 declare const Circle: React.FC<Props>;
 export default Circle;

package/dist/circle.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return b;
+        return h;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -64,19 +64,18 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const n = (param)=>{
-    let { children: e, backgroundColor: i, backgroundImage: o, size: t, border: r = !1, dataAttributes: s } = param;
-    const l = r === !0 ? _skincontractcssmistica.vars.colors.border : r, c = r ? `1px solid ${l}` : void 0;
+const $ = (param)=>{
+    let { children: i, background: o, backgroundColor: c, backgroundImage: t, size: e, border: r, dataAttributes: s } = param;
+    const l = r === !0 ? _skincontractcssmistica.vars.colors.border : r, m = r ? `1px solid ${l}` : void 0, p = t ? `url(${t})` : "";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: _circlecssmistica.circle,
         style: {
-            width: t,
-            height: t,
-            backgroundColor: i,
-            backgroundImage: o ? `url(${o})` : "none",
-            border: c
+            width: e,
+            height: e,
+            background: o || `center / cover no-repeat ${p} ${c || ""}`,
+            border: m
         }
     }, (0, _dom.getPrefixedDataAttributes)(s, "Circle")), {
-        children: e
+        children: i
     }));
-}, b = n;
+}, h = $;

package/dist/community/advanced-data-card.css-mistica.js

@@ -9,73 +9,76 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    MIN_HEIGHT: function() {
+        return v;
+    },
     actions: function() {
         return n;
     },
     actionsVariants: function() {
-        return v;
+        return _;
     },
     adjustButtonLink: function() {
-        return _;
+        return t;
     },
     button: function() {
-        return t;
+        return u;
     },
     buttonMobile: function() {
-        return u;
+        return o;
     },
     cardContentStyle: function() {
-        return o;
+        return i;
     },
     dataCard: function() {
-        return i;
+        return x;
     },
     divider: function() {
-        return x;
+        return y;
     },
     footerDirection: function() {
-        return y;
+        return e;
     },
     footerText: function() {
-        return e;
+        return h;
     },
     marginRightAuto: function() {
-        return h;
+        return d;
     },
     marginRightButton: function() {
         return b;
     },
     minHeight: function() {
-        return d;
+        return c;
     },
     paddingX: function() {
-        return c;
+        return l;
     },
     topActionsWithoutIcon: function() {
-        return l;
+        return m;
     },
     touchableArea: function() {
-        return m;
+        return p;
     },
     touchableCardOverlay: function() {
-        return p;
+        return s;
     },
     touchableContainer: function() {
-        return s;
+        return g;
     },
     vars: function() {
-        return g;
+        return k;
     },
     zindex: function() {
-        return k;
+        return j;
     }
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("../icon-button.css.ts.vanilla.css-mistica.js");
 require("./advanced-data-card.css.ts.vanilla.css-mistica.js");
-var n = "_1x00fru3 _1x00fru1 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhw _1y2v1nf97", v = {
+var v = 216, n = "_1x00fru3 _1x00fru1 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhw _1y2v1nf97", _ = {
     default: "_1x00fruk",
     mobile: "_1x00frul"
-}, _ = "_1x00frur", t = "_1x00frun", u = "_1x00fruo _1x00frun", o = "_1x00fru9 _1x00fru1 _1y2v1nfaa _1y2v1nfbj _1y2v1nf7m _1y2v1nf97", i = "_1x00frud _1y2v1nfhe _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhq _1y2v1nfi7 _1y2v1nfio _1x00frub", x = "_1x00frui", y = "_1x00fruq _1y2v1nfhk _1y2v1nfhp", e = "_1y2v1nfhk _1y2v1nfi6 _1y2v1nfhz _1y2v1nfjt", h = "_1x00frum", b = "_1x00frus", d = "_1x00frub", c = "_1x00fru1 _1y2v1nfaa _1y2v1nfbj", l = "_1x00fruu", m = "_1x00fru4", p = "_1x00fru7", s = "_1x00fru5", g = {
+}, t = "_1x00frur", u = "_1x00frun", o = "_1x00fruo _1x00frun", i = "_1x00fru9 _1x00fru1 _1y2v1nfaa _1y2v1nfbj _1y2v1nf7m _1y2v1nf97", x = "_1x00frud _1y2v1nfhe _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhq", y = "_1x00frui", e = "_1x00fruq _1y2v1nfhk _1y2v1nfhp", h = "_1y2v1nfhk _1y2v1nfi6 _1y2v1nfhz _1y2v1nfjt", d = "_1x00frum", b = "_1x00frus", c = "_1x00frub", l = "_1x00fru1 _1y2v1nfaa _1y2v1nfbj", m = "_1x00fruu", p = "_1x00fru4", s = "_1x00fru7", g = "_1x00fru5", k = {
     topActionsCount: "var(--_1x00frut)"
-}, k = "_1x00frua";
+}, j = "_1x00frua";

package/dist/community/advanced-data-card.css.d.ts

@@ -6,6 +6,7 @@ export declare const touchable: string;
 export declare const touchableCardOverlay: string;
 export declare const cardContentStyle: string;
 export declare const zindex: string;
+export declare const MIN_HEIGHT = 216;
 export declare const minHeight: string;
 export declare const dataCard: string;
 export declare const cardActionIconButton: string;

package/dist/community/advanced-data-card.d.ts

@@ -16,6 +16,7 @@ type TouchableProps = {
     newTab?: boolean;
 } | {
     to: string | undefined;
+    newTab?: boolean;
     fullPageOnWebView?: boolean;
 } | {
     onPress: PressHandler | undefined;