@telefonica/mistica 16.43.1 → 16.44.0

package/dist/carousel.js

@@ -11,34 +11,34 @@ function _export(target, all) {
 }
 _export(exports, {
     Carousel: function() {
-        return _o;
+        return Go;
     },
     CarouselAutoplayControl: function() {
-        return je;
+        return Ke;
     },
     CarouselContextConsumer: function() {
-        return zo;
+        return _o;
     },
     CarouselContextProvider: function() {
-        return Do;
+        return Oo;
     },
     CarouselPageControls: function() {
-        return $e;
+        return je;
     },
     CenteredCarousel: function() {
-        return Go;
+        return Fo;
     },
     PageBullets: function() {
-        return Ue;
+        return $e;
     },
     Slideshow: function() {
-        return Uo;
+        return $o;
     },
     useCarouselContext: function() {
-        return Oo;
+        return zo;
     },
     useSlideshowContext: function() {
-        return Fo;
+        return Uo;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -162,36 +162,36 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const ze = (e, t)=>{
+const _e = (e, t)=>{
     const r = (0, _environment.isClientSide)() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [s, f] = _react.useState(!!e && !r), i = (0, _documentvisibility.useDocumentVisibility)(), p = (0, _hooks.useIsInViewport)(t, !1);
     return {
         isAutoplayEnabled: s && !!e,
         shouldAutoplay: p && i && !!e && s,
         setShouldAutoPlay: f
     };
-}, x = ()=>{
+}, w = ()=>{
     throw new Error("You must wrap your component with a CarouselContextProvider to use CarouselContext");
-}, _e = {
+}, Ge = {
     currentIndex: 0,
     numPages: 0
-}, Ge = {
+}, Fe = {
     isAutoplayEnabled: !1,
     isAtLastPage: !1,
-    onAutoplayChanged: x
-}, Fe = {
-    setShouldAutoplay: x,
+    onAutoplayChanged: w
+}, Ue = {
+    setShouldAutoplay: w,
     prevArrowEnabled: !1,
     nextArrowEnabled: !1
 }, ge = /*#__PURE__*/ _react.createContext({
-    goPrev: x,
-    goNext: x,
-    goToPage: x,
-    bulletsProps: _e,
-    autoplayControlProps: Ge,
-    pageControlsProps: Fe
-}), Ce = /*#__PURE__*/ _react.createContext(null), Do = (param)=>{
+    goPrev: w,
+    goNext: w,
+    goToPage: w,
+    bulletsProps: Ge,
+    autoplayControlProps: Fe,
+    pageControlsProps: Ue
+}), Ce = /*#__PURE__*/ _react.createContext(null), Oo = (param)=>{
     let { children: e } = param;
-    const [t, r] = _react.useState(_e), [s, f] = _react.useState(Ge), [i, p] = _react.useState(Fe), g = _react.useRef(x), h = _react.useRef(x), l = _react.useRef(x), n = _react.useRef(x), P = _react.useMemo(()=>({
+    const [t, r] = _react.useState(Ge), [s, f] = _react.useState(Fe), [i, p] = _react.useState(Ue), g = _react.useRef(w), h = _react.useRef(w), l = _react.useRef(w), n = _react.useRef(w), P = _react.useMemo(()=>({
             goPrev: ()=>{
                 g.current();
             },
@@ -199,8 +199,8 @@ const ze = (e, t)=>{
                 h.current();
             },
             goToPage: function(d) {
-                let w = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-                l.current(d, w);
+                let I = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+                l.current(d, I);
             },
             bulletsProps: t,
             autoplayControlProps: s,
@@ -233,12 +233,12 @@ const ze = (e, t)=>{
             children: e
         })
     });
-}, Oo = ()=>_react.useContext(ge), zo = ge.Consumer, Ue = (param)=>{
+}, zo = ()=>_react.useContext(ge), _o = ge.Consumer, $e = (param)=>{
     let { currentIndex: e, numPages: t } = param;
     var _t_tablet;
-    const r = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { isTablet: s, isDesktopOrBigger: f } = (0, _hooks.useScreenSize)(), i = typeof t == "number" ? t : f ? t.desktop : s ? (_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile : t.mobile, p = (h)=>{
+    const r = (0, _themevariantcontext.useThemeVariant)(), { isTablet: s, isDesktopOrBigger: f } = (0, _hooks.useScreenSize)(), i = typeof t == "number" ? t : f ? t.desktop : s ? (_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile : t.mobile, p = (h)=>{
         const l = {};
-        if (r ? l[e === h ? _carouselcssmistica.bulletActiveInverse : _carouselcssmistica.bulletInverse] = !0 : l[e === h ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet] = !0, e === h) return l[_carouselcssmistica.bulletActiveSizing] = !0, l;
+        if (r === "brand" || r === "media" ? l[e === h ? _carouselcssmistica.bulletActiveBrand : _carouselcssmistica.bulletBrand] = !0 : r === "negative" ? l[e === h ? _carouselcssmistica.bulletActiveNegative : _carouselcssmistica.bulletNegative] = !0 : l[e === h ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet] = !0, e === h) return l[_carouselcssmistica.bulletActiveSizing] = !0, l;
         const n = Math.abs(h - e);
         return i <= _carouselcssmistica.VISIBLE_BULLETS || n === 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = !0, l) : e === 0 || e === i - 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = n === 2, l[_carouselcssmistica.bulletInactiveMediumSizing] = n === 3, l[_carouselcssmistica.bulletInactiveSmallSizing] = n > 3, l) : (l[_carouselcssmistica.bulletInactiveMediumSizing] = n === 2, l[_carouselcssmistica.bulletInactiveSmallSizing] = n > 2, l);
     }, g = (h)=>e + 2 < _carouselcssmistica.VISIBLE_BULLETS ? h : i - e + 1 < _carouselcssmistica.VISIBLE_BULLETS ? h - (i - _carouselcssmistica.VISIBLE_BULLETS) : h - (e - 2);
@@ -276,9 +276,9 @@ const ze = (e, t)=>{
             }, l);
         })
     }));
-}, $e = (param)=>{
+}, je = (param)=>{
     let { bleedLeft: e, bleedRight: t, goPrev: r, goNext: s, setShouldAutoplay: f, prevArrowEnabled: i, nextArrowEnabled: p, pagesCount: g, currentPageIndex: h } = param;
-    const { texts: l, t: n } = (0, _hooks.useTheme)(), P = (0, _themevariantcontext.useThemeVariant)(), d = i && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || _texttokens.carouselPageNumber, h, g)}` : "", w = p && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || _texttokens.carouselPageNumber, h + 2, g)}` : "";
+    const { texts: l, t: n } = (0, _hooks.useTheme)(), P = (0, _themevariantcontext.useThemeVariant)(), d = i && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || _texttokens.carouselPageNumber, h, g)}` : "", I = p && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || _texttokens.carouselPageNumber, h + 2, g)}` : "";
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
         space: P === "media" ? 16 : 8,
         children: [
@@ -296,7 +296,7 @@ const ze = (e, t)=>{
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                 Icon: _iconchevronrightregular.default,
-                "aria-label": (l.carouselNextButton || n(_texttokens.carouselNextButton)) + w,
+                "aria-label": (l.carouselNextButton || n(_texttokens.carouselNextButton)) + I,
                 type: "neutral",
                 backgroundType: P === "media" ? "transparent" : "soft",
                 small: !0,
@@ -308,7 +308,7 @@ const ze = (e, t)=>{
             })
         ]
     });
-}, je = (param)=>{
+}, Ke = (param)=>{
     let { isAutoplayEnabled: e, isAtLastPage: t, onAutoplayChanged: r, bleedLeft: s = !1, bleedRight: f = !1 } = param;
     const { texts: i, t: p } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, {
@@ -328,7 +328,7 @@ const ze = (e, t)=>{
         onChange: r,
         checked: e
     });
-}, Be = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], fo = (e, t)=>{
+}, Be = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], ho = (e, t)=>{
     const r = {
         mobile: 1,
         tablet: 2,
@@ -355,20 +355,20 @@ const ze = (e, t)=>{
     const r = Math.ceil(e.length / t), s = [];
     for(let f = 0; f < e.length; f += r)s.push(e[f]);
     return s[s.length - 1] = e[e.length - r], s;
-}, ho = (e, t)=>{
+}, po = (e, t)=>{
     const r = [];
     for(let s = 0; s < t.length; s++)s === 0 ? r.push(t[0]) : r.push((t[s] + t[s - 1]) / 2);
     for(let s = r.length - 1; s >= 0; s--)if (e - r[s] >= -1) return s;
     return 0;
-}, Ke = 5e3, Ze = (param)=>{
-    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, initialActiveItem: i, itemsPerPage: p, itemsToScroll: g, mobilePageOffset: h, gap: l, free: n, centered: P, autoplay: d, withControls: w = !0, onPageChange: G, dataAttributes: ie, "aria-label": B, "aria-labelledby": W } = param;
-    const { platformOverrides: V, skinName: y, texts: ue, t: q } = (0, _hooks.useTheme)(), O = (0, _desktopcontainertypecontext.useDesktopContainerType)(), b = fo(O || "large", p), { isDesktopOrBigger: D, isTablet: J } = (0, _hooks.useScreenSize)(), F = J ? b.tablet : b.mobile, I = Math.max(Math.floor(D ? b.desktop : F), 1), T = _react.useRef(null), a = Math.ceil(e.length / Math.max(Math.floor(b.mobile), 1)), C = Math.ceil(e.length / Math.max(Math.floor(b.tablet), 1)), E = Math.ceil(e.length / Math.max(Math.floor(b.desktop), 1)), A = Math.ceil(e.length / I), [{ scrollLeft: Q, scrollRight: z }, fe] = _react.useState({
+}, Ze = 5e3, He = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, initialActiveItem: i, itemsPerPage: p, itemsToScroll: g, mobilePageOffset: h, gap: l, free: n, centered: P, autoplay: d, withControls: I = !0, onPageChange: G, dataAttributes: ie, "aria-label": B, "aria-labelledby": W } = param;
+    const { platformOverrides: V, skinName: y, texts: ue, t: q } = (0, _hooks.useTheme)(), O = (0, _desktopcontainertypecontext.useDesktopContainerType)(), b = ho(O || "large", p), { isDesktopOrBigger: D, isTablet: J } = (0, _hooks.useScreenSize)(), F = J ? b.tablet : b.mobile, M = Math.max(Math.floor(D ? b.desktop : F), 1), T = _react.useRef(null), a = Math.ceil(e.length / Math.max(Math.floor(b.mobile), 1)), C = Math.ceil(e.length / Math.max(Math.floor(b.tablet), 1)), E = Math.ceil(e.length / Math.max(Math.floor(b.desktop), 1)), A = Math.ceil(e.length / M), [{ scrollLeft: Q, scrollRight: z }, fe] = _react.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), [de, qe] = _react.useState([]), X = _react.useMemo(()=>We(de, A), [
+    }), [de, Je] = _react.useState([]), X = _react.useMemo(()=>We(de, A), [
         de,
         A
-    ]), ee = g ? We(de, Math.ceil(e.length / g)) : X, U = z !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: L } = ze(!!d, T);
+    ]), ee = g ? We(de, Math.ceil(e.length / g)) : X, U = z !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: L } = _e(!!d, T);
     _react.useEffect(()=>{
         if (T.current) {
             const u = T.current, m = ()=>{
@@ -379,10 +379,10 @@ const ze = (e, t)=>{
                 });
             }, v = ()=>{
                 const re = u.scrollWidth - u.clientWidth;
-                qe(Array.from(u.querySelectorAll("[data-item]")).map((Z, ne)=>{
+                Je(Array.from(u.querySelectorAll("[data-item]")).map((Z, ne)=>{
                     if (ne === e.length - 1) return re;
-                    const ae = Z.offsetLeft, et = parseInt(getComputedStyle(Z).scrollMargin), tt = P && !D ? ae - Z.clientWidth / 2 : ae;
-                    return Math.min(tt - et - u.offsetLeft, re);
+                    const ae = Z.offsetLeft, tt = parseInt(getComputedStyle(Z).scrollMargin), ot = P && !D ? ae - Z.clientWidth / 2 : ae;
+                    return Math.min(ot - tt - u.offsetLeft, re);
                 }));
             };
             m(), v(), u.addEventListener("scroll", m);
@@ -442,11 +442,11 @@ const ze = (e, t)=>{
         ee
     ]);
     _react.useEffect(()=>{
-        i !== void 0 && $(Math.floor(i / I), !1);
+        i !== void 0 && $(Math.floor(i / M), !1);
     }, [
         i,
         $,
-        I
+        M
     ]);
     const se = typeof d == "object" && d.loop || !1, K = _react.useRef({
         interacting: !1,
@@ -454,7 +454,7 @@ const ze = (e, t)=>{
     });
     _react.useEffect(()=>{
         if (ve && d) {
-            const u = typeof d == "boolean" ? Ke : d.time, m = setInterval(()=>{
+            const u = typeof d == "boolean" ? Ze : d.time, m = setInterval(()=>{
                 var v;
                 K.current.interacting || (z !== 0 ? j() : se && ((v = T.current) == null || v.scrollTo({
                     left: 0,
@@ -470,7 +470,7 @@ const ze = (e, t)=>{
         ve,
         se
     ]);
-    const S = ho(Q, X), Je = 20;
+    const S = po(Q, X), Qe = 20;
     _react.useEffect(()=>{
         S === A - 1 && !se && L(!1);
     }, [
@@ -482,8 +482,8 @@ const ze = (e, t)=>{
     const Pe = _react.useRef(!i), ye = _react.useRef(0);
     _react.useEffect(()=>{
         if (G) {
-            const u = Math.min((S + 1) * I - 1, e.length - 1), m = [];
-            for(let v = 0; v < I; v++){
+            const u = Math.min((S + 1) * M - 1, e.length - 1), m = [];
+            for(let v = 0; v < M; v++){
                 const R = u - v;
                 R >= 0 && m.unshift(R);
             }
@@ -495,11 +495,11 @@ const ze = (e, t)=>{
     }, [
         S,
         e.length,
-        I,
+        M,
         i,
         G
     ]);
-    const M = _react.useContext(Ce), pe = _react.useMemo(()=>({
+    const N = _react.useContext(Ce), pe = _react.useMemo(()=>({
             currentIndex: S,
             numPages: {
                 mobile: a,
@@ -530,9 +530,9 @@ const ze = (e, t)=>{
         U
     ]);
     _react.useEffect(()=>{
-        M && (M.setGoPrev(he), M.setGoNext(j), M.setGoToPage($), M.setBulletsProps(pe), M.setAutoplayControlProps(Se), M.setPageControlsProps(Ee), M.setIsAutoplayEnabledSetter(L));
+        N && (N.setGoPrev(he), N.setGoNext(j), N.setGoToPage($), N.setBulletsProps(pe), N.setAutoplayControlProps(Se), N.setPageControlsProps(Ee), N.setIsAutoplayEnabledSetter(L));
     }, [
-        M,
+        N,
         j,
         he,
         pe,
@@ -549,8 +549,8 @@ const ze = (e, t)=>{
     f ? le = f({
         numPages: A,
         currentIndex: S
-    }) : s && (le = /* @__PURE__ */ (0, _jsxruntime.jsx)(Ue, _object_spread({}, pe)));
-    const Qe = "64px", Xe = "36px", Ae = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    }) : s && (le = /* @__PURE__ */ (0, _jsxruntime.jsx)($e, _object_spread({}, pe)));
+    const Xe = "64px", et = "36px", Ae = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_carouselcssmistica.carouselBullets, !f && {
             [_carouselcssmistica.noCarouselBulletsDesktop]: E <= 1,
             [_carouselcssmistica.noCarouselBulletsTablet]: C <= 1,
@@ -573,14 +573,14 @@ const ze = (e, t)=>{
                     [_carouselcssmistica.carouselControlsVisibilityTablet]: C > 1,
                     [_carouselcssmistica.carouselControlsVisibilityDesktop]: E > 1
                 }),
-                children: w ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                children: I ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                     space: "between",
                     alignItems: "center",
                     className: _carouselcssmistica.carouselControlsContainer,
                     children: [
                         !!d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _carouselcssmistica.carouselAutoplayControlContainer,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ke, {
                                 isAutoplayEnabled: oe,
                                 isAtLastPage: S === A - 1,
                                 onAutoplayChanged: (u)=>{
@@ -591,7 +591,7 @@ const ze = (e, t)=>{
                         Ae,
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _carouselcssmistica.carouselPagesControlsContainer,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
                                 goNext: j,
                                 goPrev: he,
                                 setShouldAutoplay: L,
@@ -622,9 +622,9 @@ const ze = (e, t)=>{
                         [_carouselcssmistica.vars.itemsPerPageTablet]: String(b.tablet),
                         [_carouselcssmistica.vars.itemsPerPageMobile]: String(b.mobile)
                     }, h === "large" ? {
-                        [_carouselcssmistica.vars.mobilePageOffset]: Qe
-                    } : y === _constants.VIVO_NEW_SKIN ? {
                         [_carouselcssmistica.vars.mobilePageOffset]: Xe
+                    } : y === _constants.VIVO_NEW_SKIN ? {
+                        [_carouselcssmistica.vars.mobilePageOffset]: et
                     } : {}, l !== void 0 ? {
                         [_carouselcssmistica.vars.gap]: String(l)
                     } : {}))), {
@@ -641,7 +641,7 @@ const ze = (e, t)=>{
                         K.current.left = u.currentTarget.scrollLeft, K.current.interacting = !0;
                     },
                     onTouchEnd: (u)=>{
-                        K.current.interacting = !1, Math.abs(u.currentTarget.scrollLeft - K.current.left) > Je && L(!1);
+                        K.current.interacting = !1, Math.abs(u.currentTarget.scrollLeft - K.current.left) > Qe && L(!1);
                     },
                     onKeyDown: ()=>{
                         L(!1);
@@ -659,7 +659,7 @@ const ze = (e, t)=>{
             })
         ]
     }));
-}, He = ()=>{
+}, Ye = ()=>{
     const [e, t] = _react.useState(1);
     return _react.useEffect(()=>{
         const r = ()=>{
@@ -669,15 +669,15 @@ const ze = (e, t)=>{
             window.removeEventListener("resize", r);
         };
     }, []), e;
-}, _o = (e)=>{
-    const t = He();
-    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Ze, _object_spread_props(_object_spread({}, e), {
+}, Go = (e)=>{
+    const t = Ye();
+    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(He, _object_spread_props(_object_spread({}, e), {
         key: t
     }));
-}, Go = (param)=>{
+}, Fo = (param)=>{
     let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, withControls: i = !0, initialActiveItem: p, onPageChange: g, dataAttributes: h, "aria-label": l, "aria-labelledby": n } = param;
-    const P = He();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Ze, {
+    const P = Ye();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(He, {
         items: e,
         itemStyle: t,
         itemClassName: r,
@@ -698,9 +698,9 @@ const ze = (e, t)=>{
         "aria-label": l,
         "aria-labelledby": n
     }, P);
-}, Ye = /*#__PURE__*/ _react.createContext(void 0), Fo = ()=>_react.useContext(Ye), Uo = (param)=>{
+}, qe = /*#__PURE__*/ _react.createContext(void 0), Uo = ()=>_react.useContext(qe), $o = (param)=>{
     let { items: e, withBullets: t, withControls: r = !0, autoplay: s, initialPageIndex: f = 0, onPageChange: i, dataAttributes: p, inverseBullets: g = !0 } = param;
-    const { platformOverrides: h } = (0, _hooks.useTheme)(), l = _react.useContext(Ce), n = _react.useRef(null), [{ scrollLeft: P, scrollRight: d }, w] = _react.useState({
+    const { platformOverrides: h } = (0, _hooks.useTheme)(), l = _react.useContext(Ce), n = _react.useRef(null), [{ scrollLeft: P, scrollRight: d }, I] = _react.useState({
         scrollLeft: 0,
         scrollRight: 1
     }), G = d !== 0, ie = P !== 0, B = _react.useCallback(()=>{
@@ -730,7 +730,7 @@ const ze = (e, t)=>{
         if (a) {
             const C = ()=>{
                 const { scrollWidth: A, clientWidth: Q } = a, z = Math.round(a.scrollLeft), fe = Math.round(A - (z + Q));
-                w({
+                I({
                     scrollLeft: z,
                     scrollRight: fe
                 });
@@ -744,10 +744,10 @@ const ze = (e, t)=>{
     }, [
         e.length
     ]);
-    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: O } = ze(!!s, n), b = typeof s == "object" && s.loop || !1;
+    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: O } = _e(!!s, n), b = typeof s == "object" && s.loop || !1;
     _react.useEffect(()=>{
         if (q && s) {
-            const a = typeof s == "boolean" ? Ke : s.time, C = setInterval(()=>{
+            const a = typeof s == "boolean" ? Ze : s.time, C = setInterval(()=>{
                 var E;
                 d !== 0 ? W() : b && ((E = n.current) == null || E.scrollTo({
                     left: 0,
@@ -801,14 +801,14 @@ const ze = (e, t)=>{
         F,
         V
     ]);
-    const I = t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    const M = t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _carouselcssmistica.slideshowBulletsContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: g ? "inverse" : "default",
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ue, _object_spread({}, F))
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, _object_spread({}, F))
         })
     }), T = !t && !s;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Ye.Provider, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(qe.Provider, {
         value: {
             withBullets: !!t
         },
@@ -831,7 +831,7 @@ const ze = (e, t)=>{
                             children: [
                                 !!s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _carouselcssmistica.slideshowAutoplayControlContainer,
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ke, {
                                         isAutoplayEnabled: ue,
                                         isAtLastPage: y === e.length - 1,
                                         onAutoplayChanged: (a)=>{
@@ -839,8 +839,8 @@ const ze = (e, t)=>{
                                         }
                                     })
                                 }),
-                                I,
-                                /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
+                                M,
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
                                     goNext: W,
                                     goPrev: B,
                                     setShouldAutoplay: O,
@@ -854,7 +854,7 @@ const ze = (e, t)=>{
                     }) : t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                         space: "around",
                         className: _carouselcssmistica.slideshowControlsContainer,
-                        children: I
+                        children: M
                     })),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: (0, _css.applyCssVars)({

package/dist/checkbox.css-mistica.js

@@ -10,35 +10,42 @@ function _export(target, all) {
 }
 _export(exports, {
     boxVariant: function() {
-        return r;
+        return n;
     },
     check: function() {
-        return n;
+        return f;
     },
     checkChecked: function() {
-        return f;
+        return y;
     },
     checkboxContainer: function() {
-        return y;
+        return r;
     },
     checkboxContainerDisabled: function() {
         return b;
     },
     disabled: function() {
+        return p;
+    },
+    overBrandBoxVariant: function() {
         return e;
     },
-    inverseBoxVariant: function() {
-        return k;
+    overNegativeBoxVariant: function() {
+        return z;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./checkbox.css.ts.vanilla.css-mistica.js");
-var r = {
-    ios: "v16_43_1_1rz9b16 v16_43_1_1rz9b15 v16_43_1_1y2v1nfjx v16_43_1_1y2v1nfk5 v16_43_1_1y2v1nfkb v16_43_1_1y2v1nfke v16_43_1_1y2v1nfmr",
-    rest: "v16_43_1_1rz9b17 v16_43_1_1rz9b15 v16_43_1_1y2v1nfjx v16_43_1_1y2v1nfk5 v16_43_1_1y2v1nfkb v16_43_1_1y2v1nfke v16_43_1_1y2v1nfmr",
-    checked: "v16_43_1_1rz9b18 v16_43_1_1rz9b15 v16_43_1_1y2v1nfjx v16_43_1_1y2v1nfk5 v16_43_1_1y2v1nfkb v16_43_1_1y2v1nfke v16_43_1_1y2v1nfmr"
-}, n = "v16_43_1_1rz9b1d v16_43_1_1y2v1nfjy", f = "v16_43_1_1rz9b1e", y = "v16_43_1_1rz9b12 v16_43_1_1rz9b11 v16_43_1_1y2v1nfjz", b = "v16_43_1_1rz9b13 v16_43_1_1rz9b11 v16_43_1_1y2v1nfjz", e = "v16_43_1_1rz9b1f", k = {
-    ios: "v16_43_1_1rz9b19 v16_43_1_1rz9b15 v16_43_1_1y2v1nfjx v16_43_1_1y2v1nfk5 v16_43_1_1y2v1nfkb v16_43_1_1y2v1nfke v16_43_1_1y2v1nfmr",
-    rest: "v16_43_1_1rz9b1a v16_43_1_1rz9b15 v16_43_1_1y2v1nfjx v16_43_1_1y2v1nfk5 v16_43_1_1y2v1nfkb v16_43_1_1y2v1nfke v16_43_1_1y2v1nfmr",
-    checked: "v16_43_1_1rz9b1b v16_43_1_1rz9b15 v16_43_1_1y2v1nfjx v16_43_1_1y2v1nfk5 v16_43_1_1y2v1nfkb v16_43_1_1y2v1nfke v16_43_1_1y2v1nfmr"
+var n = {
+    ios: "v16_44_1rz9b16 v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh",
+    rest: "v16_44_1rz9b17 v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh",
+    checked: "v16_44_1rz9b18 v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh"
+}, f = "v16_44_1rz9b1g v16_44_1y2v1nfpo", y = "v16_44_1rz9b1h", r = "v16_44_1rz9b12 v16_44_1rz9b11 v16_44_1y2v1nfpp", b = "v16_44_1rz9b13 v16_44_1rz9b11 v16_44_1y2v1nfpp", p = "v16_44_1rz9b1i", e = {
+    ios: "v16_44_1rz9b19 v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh",
+    rest: "v16_44_1rz9b1a v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh",
+    checked: "v16_44_1rz9b1b v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh"
+}, z = {
+    ios: "v16_44_1rz9b1c v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh",
+    rest: "v16_44_1rz9b1d v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh",
+    checked: "v16_44_1rz9b1e v16_44_1rz9b15 v16_44_1y2v1nfpn v16_44_1y2v1nfpv v16_44_1y2v1nfq1 v16_44_1y2v1nfq4 v16_44_1y2v1nfsh"
 };

package/dist/checkbox.css.d.ts

@@ -1,7 +1,8 @@
 export declare const checkboxContainer: string;
 export declare const checkboxContainerDisabled: string;
 export declare const boxVariant: Record<"ios" | "rest" | "checked", string>;
-export declare const inverseBoxVariant: Record<"ios" | "rest" | "checked", string>;
+export declare const overBrandBoxVariant: Record<"ios" | "rest" | "checked", string>;
+export declare const overNegativeBoxVariant: Record<"ios" | "rest" | "checked", string>;
 export declare const check: string;
 export declare const checkChecked: string;
 export declare const disabled: string;

package/dist/checkbox.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Z;
+        return _;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -121,8 +121,14 @@ function _object_spread_props(target, source) {
     return target;
 }
 const M = (param)=>{
-    let { isChecked: e, disabled: s } = param;
-    const { isIos: c } = (0, _hooks.useTheme)(), i = (0, _themevariantcontext.useIsInverseVariant)(), t = e ? "checked" : c ? "ios" : "rest", h = c ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+    let { isChecked: e, disabled: h } = param;
+    const { isIos: c } = (0, _hooks.useTheme)(), o = (0, _themevariantcontext.useThemeVariant)(), t = e ? "checked" : c ? "ios" : "rest", s = {
+        default: _skincontractcssmistica.vars.colors.inverse,
+        alternative: _skincontractcssmistica.vars.colors.inverse,
+        brand: _skincontractcssmistica.vars.colors.controlKnobBrand,
+        media: _skincontractcssmistica.vars.colors.controlKnobBrand,
+        negative: _skincontractcssmistica.vars.colors.controlKnobNegative
+    }[o], b = c ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
@@ -131,7 +137,7 @@ const M = (param)=>{
         }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             d: "M2.659 7.724c.33.366.92.368 1.254.005L9.79 1.336A.782.782 0 009.719.202a.858.858 0 00-1.178.069l-5.236 5.72-1.841-2.038a.857.857 0 00-1.177-.078.782.782 0 00-.082 1.133l2.454 2.716z",
-            fill: i ? _skincontractcssmistica.vars.colors.controlKnobInverse : _skincontractcssmistica.vars.colors.inverse
+            fill: s
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         viewBox: "0 0 14 10",
@@ -142,51 +148,51 @@ const M = (param)=>{
         }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             d: "M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z",
-            fill: i ? _skincontractcssmistica.vars.colors.controlKnobInverse : _skincontractcssmistica.vars.colors.inverse
+            fill: s
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(i ? _checkboxcssmistica.inverseBoxVariant[t] : _checkboxcssmistica.boxVariant[t], {
-            [_checkboxcssmistica.disabled]: s
+        className: (0, _classnames.default)(o === "brand" || o === "media" ? _checkboxcssmistica.overBrandBoxVariant[t] : o === "negative" ? _checkboxcssmistica.overNegativeBoxVariant[t] : _checkboxcssmistica.boxVariant[t], {
+            [_checkboxcssmistica.disabled]: h
         }),
-        children: h
+        children: b
     });
-}, T = /*#__PURE__*/ _react.forwardRef((e, s)=>{
-    const c = _react.useId(), i = e["aria-labelledby"] || c, t = e["aria-label"], h = t || e["aria-labelledby"], { defaultValue: I, value: r, onChange: f, focusableRef: w, disabled: o } = (0, _formcontext.useControlProps)({
+}, $ = /*#__PURE__*/ _react.forwardRef((e, h)=>{
+    const c = _react.useId(), o = e["aria-labelledby"] || c, t = e["aria-label"], s = t || e["aria-labelledby"], { defaultValue: b, value: r, onChange: v, focusableRef: y, disabled: i } = (0, _formcontext.useControlProps)({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [l, y] = _react.useState(!!I), v = ()=>{
-        r === void 0 ? (y(!l), f(!l)) : f(!r);
-    }, D = (n)=>{
-        n.key === _keys.SPACE && (n.preventDefault(), n.stopPropagation(), v());
-    }, u = /* @__PURE__ */ (0, _jsxruntime.jsx)(M, {
-        disabled: o,
-        isChecked: r !== null && r !== void 0 ? r : l
+    }), [n, B] = _react.useState(!!b), u = ()=>{
+        r === void 0 ? (B(!n), v(!n)) : v(!r);
+    }, I = (l)=>{
+        l.key === _keys.SPACE && (l.preventDefault(), l.stopPropagation(), u());
+    }, k = /* @__PURE__ */ (0, _jsxruntime.jsx)(M, {
+        disabled: i,
+        isChecked: r !== null && r !== void 0 ? r : n
     });
     return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         id: e.id,
         role: e.role || "checkbox",
-        "aria-checked": r !== null && r !== void 0 ? r : l,
-        onKeyDown: o ? void 0 : D,
-        onClick: (n)=>{
-            n.stopPropagation(), o || v();
+        "aria-checked": r !== null && r !== void 0 ? r : n,
+        onKeyDown: i ? void 0 : I,
+        onClick: (l)=>{
+            l.stopPropagation(), i || u();
         },
-        tabIndex: o ? void 0 : 0,
-        ref: (0, _common.combineRefs)(s, w),
-        className: o ? _checkboxcssmistica.checkboxContainerDisabled : _checkboxcssmistica.checkboxContainer,
+        tabIndex: i ? void 0 : 0,
+        ref: (0, _common.combineRefs)(h, y),
+        className: i ? _checkboxcssmistica.checkboxContainerDisabled : _checkboxcssmistica.checkboxContainer,
         "aria-label": t,
-        "aria-labelledby": t ? void 0 : i,
-        "aria-disabled": o
+        "aria-labelledby": t ? void 0 : o,
+        "aria-disabled": i
     }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Checkbox")), {
         children: e.render ? e.render({
-            controlElement: u,
-            labelId: i,
-            checked: r !== null && r !== void 0 ? r : l,
-            disabled: !!o
+            controlElement: k,
+            labelId: o,
+            checked: r !== null && r !== void 0 ? r : n,
+            disabled: !!i
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
             children: [
@@ -198,20 +204,20 @@ const M = (param)=>{
                             position: "relative",
                             top: -2
                         },
-                        children: u
+                        children: k
                     })
                 }),
                 e.children && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
                     as: "div",
-                    id: i,
-                    role: h ? "presentation" : void 0,
+                    id: o,
+                    role: s ? "presentation" : void 0,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        className: o ? _checkboxcssmistica.disabled : "",
+                        className: i ? _checkboxcssmistica.disabled : "",
                         children: e.children
                     })
                 })
             ]
         })
     })));
-}), Z = T;
+}), _ = $;