@telefonica/mistica 15.2.0 → 15.3.0

package/dist-es/button.js

@@ -92,7 +92,7 @@ import { getTextFromChildren as C } from "./utils/common.js";
 import { useTrackingConfig as F, eventNames as z, eventCategories as M, eventActions as q } from "./utils/analytics.js";
 import { useTheme as R } from "./hooks.js";
 import { flattenChildren as J } from "./skins/utils.js";
-import { inverseButtonVariants as Q, buttonVariants as U, small as p, isLoading as G, textContent as ee, inverseLinkVariants as te, linkVariants as ne, PADDING_X_LINK as A, PADDING_Y_LINK as T, textContentLink as ie, SMALL_SPINNER_SIZE as re, SPINNER_SIZE as ae, ICON_MARGIN_PX as N, CHEVRON_MARGIN_LEFT_LINK as oe, loadingFiller as le, X_SMALL_PADDING_PX as se, X_PADDING_PX as ce, loadingContent as de, SMALL_ICON_SIZE as ue, ICON_SIZE as me } from "./button.css-mistica.js";
+import { inverseButtonVariants as Q, buttonVariants as U, small as p, isLoading as G, textContent as ee, inverseLinkVariants as te, linkVariants as ne, PADDING_X_LINK as A, PADDING_Y_LINK as T, textContentLink as ie, SMALL_SPINNER_SIZE as re, SPINNER_SIZE as ae, ICON_MARGIN_PX as E, CHEVRON_MARGIN_LEFT_LINK as oe, loadingFiller as le, X_SMALL_PADDING_PX as se, X_PADDING_PX as ce, loadingContent as de, SMALL_ICON_SIZE as ue, ICON_SIZE as me } from "./button.css-mistica.js";
 const x = (param)=>{
     let { content: e, defaultIconSize: t, renderText: i } = param;
     const l = J(e), u = l.length, c = [];
@@ -112,8 +112,8 @@ const x = (param)=>{
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: h ? 0 : N,
-                    marginRight: o ? 0 : N
+                    marginLeft: h ? 0 : E,
+                    marginRight: o ? 0 : E
                 },
                 children: /*#__PURE__*/ a.cloneElement(d, {
                     size: S(v)
@@ -142,7 +142,7 @@ const x = (param)=>{
                         style: {
                             display: "flex",
                             alignItems: "center",
-                            marginRight: N
+                            marginRight: E
                         },
                         children: /* @__PURE__ */ n(d, {
                             size: S(o),
@@ -174,7 +174,7 @@ const x = (param)=>{
                         style: {
                             display: "flex",
                             alignItems: "center",
-                            marginLeft: N
+                            marginLeft: E
                         },
                         children: /* @__PURE__ */ n(m, {
                             size: S(o),
@@ -188,7 +188,7 @@ const x = (param)=>{
                 "aria-hidden": !0,
                 style: l ? {
                     paddingLeft: r,
-                    paddingRight: N + 2 * (i ? se : ce)
+                    paddingRight: E + 2 * (i ? se : ce)
                 } : void 0,
                 children: x({
                     content: l,
@@ -237,7 +237,7 @@ const x = (param)=>{
         u
     ]);
     var _e_trackingEvent;
-    const E = ()=>l === "google-analytics-4" ? {
+    const N = ()=>l === "google-analytics-4" ? {
             name: z.userInteraction,
             component_type: `${e.type}_button`,
             component_copy: C(e.children)
@@ -268,7 +268,7 @@ const x = (param)=>{
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
         }, e.style),
-        trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? E() : void 0,
+        trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? N() : void 0,
         dataAttributes: e.dataAttributes,
         "aria-label": e["aria-label"],
         "aria-controls": e["aria-controls"],
@@ -326,9 +326,9 @@ const x = (param)=>{
         "type"
     ]);
     var _t_withChevron;
-    const { formStatus: l } = V(), u = O(), { textPresets: c } = R(), { eventFormat: s } = F(), { isDarkMode: f } = R(), { loadingText: d } = t, m = l === "sending", [h, o] = a.useState(!1), r = t.showSpinner || h, v = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : !!t.href || !!t.to, [I, E] = a.useState(!!r);
+    const { formStatus: l } = V(), u = O(), { textPresets: c } = R(), { eventFormat: s } = F(), { isDarkMode: f } = R(), { loadingText: d } = t, m = l === "sending", [h, o] = a.useState(!1), r = t.showSpinner || h, v = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : !!t.href || !!t.to, [I, N] = a.useState(!!r);
     a.useEffect(()=>{
-        r && !I && E(!0);
+        r && !I && N(!0);
     }, [
         r,
         I,
@@ -372,7 +372,7 @@ const x = (param)=>{
         children: X({
             showSpinner: r,
             shouldRenderSpinner: I,
-            setShouldRenderSpinner: E,
+            setShouldRenderSpinner: N,
             children: t.children,
             loadingText: d,
             small: !0,

package/dist-es/callout.js

@@ -62,17 +62,17 @@ import T from "./generated/mistica-icons/icon-close-regular.js";
 import { IconButton as B } from "./icon-button.js";
 import R from "classnames";
 import y from "./button-group.js";
-import { container as N, content as S } from "./callout.css-mistica.js";
-import { vars as V } from "./image.css-mistica.js";
-import { sprinkles as j } from "./sprinkles.css-mistica.js";
+import { container as S, content as V } from "./callout.css-mistica.js";
+import { vars as j } from "./image.css-mistica.js";
+import { sprinkles as A } from "./sprinkles.css-mistica.js";
 import { vars as e } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as A } from "./utils/dom.js";
+import { getPrefixedDataAttributes as N } from "./utils/dom.js";
 import { applyCssVars as P } from "./utils/css.js";
 const $ = (param)=>{
     let { title: t, titleAs: c = "h2", description: d, icon: a, onClose: i, button: l, secondaryButton: s, buttonLink: m, "aria-label": p, dataAttributes: u } = param;
     const f = x(), { texts: h } = v();
     return /* @__PURE__ */ r("section", _object_spread_props(_object_spread({
-        className: R(N, j({
+        className: R(S, A({
             background: {
                 inverse: e.colors.backgroundContainer,
                 alternative: e.colors.backgroundContainer,
@@ -80,10 +80,10 @@ const $ = (param)=>{
             }[f]
         })),
         style: P({
-            [V.mediaBorderRadius]: e.borderRadii.mediaSmall
+            [j.mediaBorderRadius]: e.borderRadii.mediaSmall
         }),
         "aria-label": p !== null && p !== void 0 ? p : t
-    }, A(u, "Callout")), {
+    }, N(u, "Callout")), {
         children: /* @__PURE__ */ o(C, {
             isInverse: !1,
             children: [
@@ -92,7 +92,7 @@ const $ = (param)=>{
                     children: a
                 }),
                 /* @__PURE__ */ r("div", {
-                    className: S,
+                    className: V,
                     children: /* @__PURE__ */ o(n, {
                         space: 16,
                         children: [

package/dist-es/carousel.js

@@ -183,9 +183,9 @@ const ve = (e, t)=>{
     for(let r = 0; r < t.length; r++)r === 0 ? s.push(t[0]) : s.push((t[r] + t[r - 1]) / 2);
     for(let r = s.length - 1; r >= 0; r--)if (e - s[r] >= -1) return r;
     return 0;
-}, Me = 5e3, Ne = (param)=>{
-    let { items: e, itemStyle: t, itemClassName: s, withBullets: r, renderBullets: d, initialActiveItem: h, itemsPerPage: w, itemsToScroll: i, mobilePageOffset: u, gap: C, free: b, centered: S, autoplay: x, onPageChange: y, dataAttributes: W } = param;
-    const { texts: I, platformOverrides: k, skinName: H } = he(), J = bt(), a = vt(J || "large", w), { isDesktopOrBigger: E, isTablet: A } = de(), j = A ? a.tablet : a.mobile, P = Math.max(Math.floor(E ? a.desktop : j), 1), l = o.useRef(null), m = Math.ceil(e.length / Math.max(Math.floor(a.mobile), 1)), v = Math.ceil(e.length / Math.max(Math.floor(a.tablet), 1)), M = Math.ceil(e.length / Math.max(Math.floor(a.desktop), 1)), R = Math.ceil(e.length / P), [{ scrollLeft: D, scrollRight: G }, Ee] = o.useState({
+}, Me = 5e3, Se = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: s, withBullets: r, renderBullets: d, initialActiveItem: h, itemsPerPage: w, itemsToScroll: i, mobilePageOffset: u, gap: C, free: b, centered: k, autoplay: x, onPageChange: y, dataAttributes: W } = param;
+    const { texts: I, platformOverrides: N, skinName: H } = he(), J = bt(), a = vt(J || "large", w), { isDesktopOrBigger: E, isTablet: A } = de(), j = A ? a.tablet : a.mobile, P = Math.max(Math.floor(E ? a.desktop : j), 1), l = o.useRef(null), m = Math.ceil(e.length / Math.max(Math.floor(a.mobile), 1)), v = Math.ceil(e.length / Math.max(Math.floor(a.tablet), 1)), M = Math.ceil(e.length / Math.max(Math.floor(a.desktop), 1)), R = Math.ceil(e.length / P), [{ scrollLeft: D, scrollRight: G }, Ee] = o.useState({
         scrollLeft: 0,
         scrollRight: 0
     }), [Q, Re] = o.useState([]), F = o.useMemo(()=>ie(Q, R), [
@@ -204,7 +204,7 @@ const ve = (e, t)=>{
                 const Y = c.scrollWidth - c.clientWidth;
                 Re(Array.from(c.querySelectorAll("[data-item]")).map((V, q)=>{
                     if (q === e.length - 1) return Y;
-                    const Z = V.offsetLeft, We = parseInt(getComputedStyle(V).scrollMargin), Ae = S && !E ? Z - V.clientWidth / 2 : Z;
+                    const Z = V.offsetLeft, We = parseInt(getComputedStyle(V).scrollMargin), Ae = k && !E ? Z - V.clientWidth / 2 : Z;
                     return Math.min(Ae - We - c.offsetLeft, Y);
                 }));
             };
@@ -223,7 +223,7 @@ const ve = (e, t)=>{
         a.mobile,
         R,
         C,
-        S,
+        k,
         E,
         e.length
     ]);
@@ -287,35 +287,35 @@ const ve = (e, t)=>{
         G,
         le
     ]);
-    const N = xt(D, F), ne = o.useRef(!h), ce = o.useRef(0);
+    const S = xt(D, F), ne = o.useRef(!h), ce = o.useRef(0);
     o.useEffect(()=>{
         if (y) {
-            const c = Math.min((N + 1) * P - 1, e.length - 1), f = [];
+            const c = Math.min((S + 1) * P - 1, e.length - 1), f = [];
             for(let p = 0; p < P; p++){
                 const g = c - p;
                 g >= 0 && f.unshift(g);
             }
-            ne.current ? ce.current !== N && y({
-                pageIndex: N,
+            ne.current ? ce.current !== S && y({
+                pageIndex: S,
                 shownItemIndexes: f
-            }) : ne.current = f.includes(h || 0), ce.current = N;
+            }) : ne.current = f.includes(h || 0), ce.current = S;
         }
     }, [
-        N,
+        S,
         e.length,
         P,
         h,
         y
     ]);
     const T = o.useContext(re), ee = o.useMemo(()=>({
-            currentIndex: N,
+            currentIndex: S,
             numPages: {
                 mobile: m,
                 tablet: v,
                 desktop: M
             }
         }), [
-        N,
+        S,
         M,
         m,
         v
@@ -332,7 +332,7 @@ const ve = (e, t)=>{
     let U = null;
     d ? U = d({
         numPages: R,
-        currentIndex: N,
+        currentIndex: S,
         onPress: B
     }) : r && (U = /* @__PURE__ */ n(xe, _object_spread_props(_object_spread({}, ee), {
         onPress: B
@@ -357,7 +357,7 @@ const ve = (e, t)=>{
                     }),
                     /* @__PURE__ */ n("div", {
                         className: $(lt, {
-                            [nt]: S,
+                            [nt]: k,
                             [ct]: m > 1,
                             [at]: v > 1
                         }),
@@ -378,13 +378,13 @@ const ve = (e, t)=>{
                             // the bottom of the scrollable area in retina displays when it has a height with
                             // decimals. This extra padding avoids that line to partially cover the carousel
                             // slides border:
-                            paddingBottom: ze(k) && !_e(k) ? 0.5 : void 0
+                            paddingBottom: ze(N) && !_e(N) ? 0.5 : void 0
                         }),
                         ref: l,
                         children: e.map((c, f)=>/* @__PURE__ */ n("div", {
                                 className: $(it, s),
                                 style: _object_spread_props(_object_spread({}, t), {
-                                    scrollSnapStop: be(k) ? "always" : "normal"
+                                    scrollSnapStop: be(N) ? "always" : "normal"
                                 }),
                                 "data-item": !0,
                                 children: c
@@ -412,7 +412,7 @@ const ve = (e, t)=>{
             })
         ]
     }));
-}, Se = ()=>{
+}, ke = ()=>{
     const [e, t] = o.useState(1);
     return o.useEffect(()=>{
         const s = ()=>{
@@ -423,14 +423,14 @@ const ve = (e, t)=>{
         };
     }, []), e;
 }, _t = (e)=>{
-    const t = Se();
-    return /* @__PURE__ */ /*#__PURE__*/ De(Ne, _object_spread_props(_object_spread({}, e), {
+    const t = ke();
+    return /* @__PURE__ */ /*#__PURE__*/ De(Se, _object_spread_props(_object_spread({}, e), {
         key: t
     }));
 }, jt = (param)=>{
     let { items: e, itemStyle: t, itemClassName: s, withBullets: r, renderBullets: d, initialActiveItem: h, onPageChange: w, dataAttributes: i } = param;
-    const u = Se();
-    return /* @__PURE__ */ n(Ne, {
+    const u = ke();
+    return /* @__PURE__ */ n(Se, {
         items: e,
         itemStyle: t,
         itemClassName: s,
@@ -448,15 +448,15 @@ const ve = (e, t)=>{
         onPageChange: w,
         dataAttributes: i
     }, u);
-}, ke = /*#__PURE__*/ o.createContext(!1), Ft = ()=>o.useContext(ke), Ct = (param)=>{
+}, Ne = /*#__PURE__*/ o.createContext(!1), Ft = ()=>o.useContext(Ne), Ct = (param)=>{
     let { children: e } = param;
-    return /* @__PURE__ */ n(ke.Provider, {
+    return /* @__PURE__ */ n(Ne.Provider, {
         value: !0,
         children: e
     });
 }, Kt = (param)=>{
     let { items: e, withBullets: t, autoplay: s, initialPageIndex: r = 0, onPageChange: d, dataAttributes: h, inverseBullets: w = !0 } = param;
-    const { texts: i, platformOverrides: u } = he(), C = o.useContext(re), b = o.useRef(null), [{ scrollLeft: S, scrollRight: x }, y] = o.useState({
+    const { texts: i, platformOverrides: u } = he(), C = o.useContext(re), b = o.useRef(null), [{ scrollLeft: k, scrollRight: x }, y] = o.useState({
         scrollLeft: 0,
         scrollRight: 0
     }), W = o.useCallback(()=>{
@@ -471,7 +471,7 @@ const ve = (e, t)=>{
             left: l.clientWidth,
             behavior: "smooth"
         });
-    }, []), k = o.useCallback(function(l) {
+    }, []), N = o.useCallback(function(l) {
         let m = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
         const v = b.current;
         v && v.scrollTo({
@@ -480,7 +480,7 @@ const ve = (e, t)=>{
         });
     }, [
         b
-    ]), H = x !== 0, J = S !== 0, a = b.current ? Math.floor((S + b.current.clientWidth / 2) / b.current.clientWidth) : 0;
+    ]), H = x !== 0, J = k !== 0, a = b.current ? Math.floor((k + b.current.clientWidth / 2) / b.current.clientWidth) : 0;
     o.useLayoutEffect(()=>{
         const l = b.current;
         if (l) {
@@ -541,13 +541,13 @@ const ve = (e, t)=>{
         e.length
     ]);
     return o.useEffect(()=>{
-        C && (C.setGoPrev(W), C.setGoNext(I), C.setGoToPage(k), C.setBulletsProps(P));
+        C && (C.setGoPrev(W), C.setGoNext(I), C.setGoToPage(N), C.setBulletsProps(P));
     }, [
         C,
         I,
         W,
         P,
-        k
+        N
     ]), /* @__PURE__ */ n(Ct, {
         children: /* @__PURE__ */ te("div", _object_spread_props(_object_spread({
             className: qe

package/dist-es/checkbox.js

@@ -51,11 +51,11 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import { jsx as a, jsxs as A } from "react/jsx-runtime";
 import * as m from "react";
-import { SPACE as A } from "./utils/keys.js";
-import { useControlProps as D } from "./form-context.js";
-import L from "./inline.js";
+import { SPACE as D } from "./utils/keys.js";
+import { useControlProps as L } from "./form-context.js";
+import N from "./inline.js";
 import { Text3 as f } from "./text.js";
 import { useAriaId as P, useTheme as R } from "./hooks.js";
 import n from "classnames";
@@ -95,7 +95,7 @@ const B = (param)=>{
         children: o
     });
 }, K = /*#__PURE__*/ m.forwardRef((e, c)=>{
-    const l = P(e["aria-labelledby"]), o = e["aria-label"], C = o || e["aria-labelledby"], { defaultValue: g, value: t, onChange: s, focusableRef: w, disabled: i } = D({
+    const l = P(e["aria-labelledby"]), o = e["aria-label"], C = o || e["aria-labelledby"], { defaultValue: g, value: t, onChange: s, focusableRef: w, disabled: i } = L({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
@@ -104,7 +104,7 @@ const B = (param)=>{
     }), [r, y] = m.useState(!!g), h = ()=>{
         t === void 0 ? (y(!r), s(!r)) : s(!t);
     }, I = (d)=>{
-        d.key === A && (d.preventDefault(), d.stopPropagation(), h());
+        d.key === D && (d.preventDefault(), d.stopPropagation(), h());
     }, b = /* @__PURE__ */ a(B, {
         disabled: i,
         isChecked: t !== null && t !== void 0 ? t : r
@@ -131,7 +131,7 @@ const B = (param)=>{
             labelId: l,
             checked: t !== null && t !== void 0 ? t : r,
             disabled: !!i
-        }) : /* @__PURE__ */ N(L, {
+        }) : /* @__PURE__ */ A(N, {
             space: 16,
             children: [
                 /* @__PURE__ */ a(f, {

package/dist-es/chip.js

@@ -52,7 +52,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsxs as g, Fragment as k, jsx as t } from "react/jsx-runtime";
-import B from "classnames";
+import N from "classnames";
 import { useTheme as V } from "./hooks.js";
 import A from "./badge.js";
 import i from "./box.js";
@@ -139,13 +139,13 @@ const $ = (e)=>{
     }));
     const I = d !== void 0 || e.href || e.onPress || e.to, a = _object_spread({
         "component-name": "Chip"
-    }, s), o = (N)=>/* @__PURE__ */ t(i, {
-            className: B(n[d ? "active" : h ? "overAlternative" : "default"], {
+    }, s), o = (B)=>/* @__PURE__ */ t(i, {
+            className: N(n[d ? "active" : h ? "overAlternative" : "default"], {
                 [M[T ? "dark" : "light"]]: I
             }),
             paddingLeft: u,
             paddingRight: R,
-            dataAttributes: N,
+            dataAttributes: B,
             children: f
         });
     return e.onPress ? /* @__PURE__ */ t(v, {

package/dist-es/community/advanced-data-card.js

@@ -87,8 +87,8 @@ import { dataCard as $, touchableContainer as q, touchableCardOverlay as J, card
 import { vars as me } from "../image.css-mistica.js";
 import H from "../divider.js";
 import { Text2 as v, Text as he } from "../text.js";
-import { vars as N } from "../skins/skin-contract.css-mistica.js";
-import y from "../box.js";
+import { vars as y } from "../skins/skin-contract.css-mistica.js";
+import N from "../box.js";
 import pe from "../touchable.js";
 import h from "classnames";
 import { CardActionsGroup as ue } from "../card.js";
@@ -96,7 +96,7 @@ import { useTheme as ge } from "../hooks.js";
 import { getPrefixedDataAttributes as fe } from "../utils/dom.js";
 import ve from "../inline.js";
 import { applyCssVars as P } from "../utils/css.js";
-const Ne = (_param)=>{
+const ye = (_param)=>{
     var { headline: a, pretitle: i, pretitleAs: n = "p", pretitleLinesMax: p, title: d, titleAs: c = "h3", titleLinesMax: l, subtitle: m, subtitleLinesMax: o, description: r, descriptionLinesMax: u, ariaLabel: x } = _param, s = _object_without_properties(_param, [
         "headline",
         "pretitle",
@@ -125,7 +125,7 @@ const Ne = (_param)=>{
                 children: /* @__PURE__ */ e(k, {})
             })),
             i && /* @__PURE__ */ e(v, {
-                color: N.colors.textPrimary,
+                color: y.colors.textPrimary,
                 truncate: p,
                 as: n,
                 regular: !0,
@@ -144,7 +144,7 @@ const Ne = (_param)=>{
                 children: d
             }),
             /* @__PURE__ */ e(v, {
-                color: N.colors.textPrimary,
+                color: y.colors.textPrimary,
                 truncate: o,
                 as: "p",
                 regular: !0,
@@ -155,13 +155,13 @@ const Ne = (_param)=>{
                 truncate: u,
                 as: "p",
                 regular: !0,
-                color: N.colors.textSecondary,
+                color: y.colors.textSecondary,
                 hyphens: "auto",
                 children: r
             })
         ]
     });
-}, ye = (param)=>{
+}, Ne = (param)=>{
     let { button: a, footerImage: i, footerText: n, footerTextLinesMax: p, buttonLink: d } = param;
     const c = !!a, l = !!i, m = !!n, o = !!d, r = c && (l || m) && o, u = o && !r ? "178px" : "";
     return /* @__PURE__ */ t(k, {
@@ -182,7 +182,7 @@ const Ne = (_param)=>{
                             paddingTop: 16
                         })),
                         children: [
-                            l && /* @__PURE__ */ e(y, {
+                            l && /* @__PURE__ */ e(N, {
                                 paddingRight: 16,
                                 className: b({
                                     alignItems: "center",
@@ -190,7 +190,7 @@ const Ne = (_param)=>{
                                 }),
                                 children: /* @__PURE__ */ e("div", {
                                     style: P({
-                                        [me.mediaBorderRadius]: N.borderRadii.mediaSmall
+                                        [me.mediaBorderRadius]: y.borderRadii.mediaSmall
                                     }),
                                     children: i
                                 })
@@ -268,7 +268,7 @@ const Ne = (_param)=>{
                         }),
                         /* @__PURE__ */ e("div", {
                             className: h(K, !w && !F ? Q : ""),
-                            children: /* @__PURE__ */ e(y, {
+                            children: /* @__PURE__ */ e(N, {
                                 paddingTop: 8,
                                 children: /* @__PURE__ */ t(ve, {
                                     space: 0,
@@ -277,7 +277,7 @@ const Ne = (_param)=>{
                                             space: 8,
                                             children: [
                                                 a,
-                                                /* @__PURE__ */ e(Ne, _object_spread({
+                                                /* @__PURE__ */ e(ye, _object_spread({
                                                     headline: i,
                                                     pretitle: n,
                                                     pretitleAs: p,
@@ -308,7 +308,7 @@ const Ne = (_param)=>{
                                 flexGrow: 1
                             }
                         }),
-                        F && /* @__PURE__ */ e(y, {
+                        F && /* @__PURE__ */ e(N, {
                             paddingTop: 16,
                             paddingBottom: 24,
                             width: "100%",
@@ -319,7 +319,7 @@ const Ne = (_param)=>{
                                             className: _,
                                             children: O
                                         }),
-                                        I + 1 !== s.length && /* @__PURE__ */ e(y, {
+                                        I + 1 !== s.length && /* @__PURE__ */ e(N, {
                                             paddingY: C,
                                             children: /* @__PURE__ */ e(H, {})
                                         })
@@ -333,7 +333,7 @@ const Ne = (_param)=>{
                         })
                     ]
                 }),
-                w && /* @__PURE__ */ e(ye, _object_spread({}, L))
+                w && /* @__PURE__ */ e(Ne, _object_spread({}, L))
             ]
         })
     }));

package/dist-es/counter.js

@@ -54,9 +54,9 @@ function _object_spread_props(target, source) {
 import { jsx as r, jsxs as I } from "react/jsx-runtime";
 import * as V from "react";
 import { getPrefixedDataAttributes as L } from "./utils/dom.js";
-import { counter as R, disabled as b, buttonContainer as B, hasTrashIcon as j, isButtonDisabled as M, button as y, buttonBackground as S, decreaseButtonIcon as E, trashButtonIcon as O, valueContainer as Q, defaultButtonIcon as Z } from "./counter.css-mistica.js";
+import { counter as R, disabled as g, buttonContainer as B, hasTrashIcon as j, isButtonDisabled as M, button as y, buttonBackground as S, decreaseButtonIcon as E, trashButtonIcon as O, valueContainer as Q, defaultButtonIcon as Z } from "./counter.css-mistica.js";
 import { useThemeVariant as _, ThemeVariant as q } from "./theme-variant-context.js";
-import { vars as n } from "./skins/skin-contract.css-mistica.js";
+import { vars as c } from "./skins/skin-contract.css-mistica.js";
 import w from "./inline.js";
 import { Text3 as F } from "./text.js";
 import { BaseTouchable as P } from "./touchable.js";
@@ -64,46 +64,46 @@ import G from "./generated/mistica-icons/icon-subtract-regular.js";
 import H from "./generated/mistica-icons/icon-add-more-regular.js";
 import J from "./generated/mistica-icons/icon-trash-can-regular.js";
 import { useTheme as K } from "./hooks.js";
-import g from "classnames";
+import N from "classnames";
 import U from "./screen-reader-only.js";
 const x = 20, W = (param)=>{
-    let { value: h, defaultValue: N, min: m, max: s, onChangeValue: a } = param;
-    const i = h !== void 0, f = V.useCallback((c)=>c === void 0 ? m : Math.max(m, Math.min(s, c)), [
+    let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
+    const i = h !== void 0, f = V.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
         m,
         s
-    ]), [e, p] = V.useState(f(N)), v = (c)=>{
-        i || p(c), a == null || a(c);
+    ]), [e, p] = V.useState(f(b)), v = (n)=>{
+        i || p(n), a == null || a(n);
     };
     return [
         i ? f(h) : e,
         v
     ];
 }, X = (param)=>{
-    let { value: h, defaultValue: N, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: f, disabled: e, removeLabel: p, increaseLabel: v, decreaseLabel: c, valueLabel: C } = param;
+    let { value: h, defaultValue: b, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: f, disabled: e, removeLabel: p, increaseLabel: v, decreaseLabel: n, valueLabel: C } = param;
     const A = _(), { texts: u } = K(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
         value: h,
-        defaultValue: N,
+        defaultValue: b,
         min: l,
         max: d,
         onChangeValue: m
-    }), o = !!s && t === l, D = ()=>p === void 0 ? u.counterRemoveLabel : p, $ = ()=>v === void 0 ? u.counterIncreaseLabel : v, k = ()=>c === void 0 ? u.counterDecreaseLabel : c, z = ()=>`${t}, ${C === void 0 ? u.counterQuantity : C}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
+    }), o = !!s && t === l, D = ()=>p === void 0 ? u.counterRemoveLabel : p, $ = ()=>v === void 0 ? u.counterIncreaseLabel : v, k = ()=>n === void 0 ? u.counterDecreaseLabel : n, z = ()=>`${t}, ${C === void 0 ? u.counterQuantity : C}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
     return /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
-        className: g(R, {
-            [b]: e
+        className: N(R, {
+            [g]: e
         })
     }, L(f, "Counter")), {
         style: {
-            border: `1px solid ${A === "inverse" ? n.colors.backgroundContainer : n.colors.border}`
+            border: `1px solid ${A === "inverse" ? c.colors.backgroundContainer : c.colors.border}`
         },
         children: /* @__PURE__ */ I(w, {
             space: 8,
             alignItems: "center",
             children: [
                 /* @__PURE__ */ r("div", {
-                    className: g(B, {
+                    className: N(B, {
                         [j]: o,
                         [M]: e || !o && t === l,
-                        [b]: !e && !o && t === l
+                        [g]: !e && !o && t === l
                     }),
                     children: /* @__PURE__ */ I(P, {
                         className: y,
@@ -119,7 +119,7 @@ const x = 20, W = (param)=>{
                                 "aria-hidden": o,
                                 children: /* @__PURE__ */ r(G, {
                                     size: x,
-                                    color: t === l && !o || e ? n.colors.control : n.colors.controlActivated
+                                    color: t === l && !o || e ? c.colors.control : c.colors.controlActivated
                                 })
                             }),
                             /* @__PURE__ */ r("div", {
@@ -127,7 +127,7 @@ const x = 20, W = (param)=>{
                                 "aria-hidden": !o,
                                 children: /* @__PURE__ */ r(J, {
                                     size: x,
-                                    color: n.colors.controlError
+                                    color: c.colors.controlError
                                 })
                             })
                         ]
@@ -145,7 +145,7 @@ const x = 20, W = (param)=>{
                                 "aria-hidden": !0,
                                 children: /* @__PURE__ */ r(F, {
                                     regular: !0,
-                                    color: n.colors.textPrimary,
+                                    color: c.colors.textPrimary,
                                     children: t
                                 })
                             }),
@@ -158,9 +158,9 @@ const x = 20, W = (param)=>{
                     })
                 }),
                 /* @__PURE__ */ r("div", {
-                    className: g(B, {
+                    className: N(B, {
                         [M]: e || t === d,
-                        [b]: !e && t === d
+                        [g]: !e && t === d
                     }),
                     children: /* @__PURE__ */ I(P, {
                         className: y,
@@ -175,7 +175,7 @@ const x = 20, W = (param)=>{
                                 className: Z,
                                 children: /* @__PURE__ */ r(H, {
                                     size: x,
-                                    color: t === d || e ? n.colors.control : n.colors.controlActivated
+                                    color: t === d || e ? c.colors.control : c.colors.controlActivated
                                 })
                             })
                         ]