@telefonica/mistica 14.33.0 → 14.35.0

package/dist-es/inline.js

@@ -53,26 +53,26 @@ function _object_spread_props(target, source) {
 import { jsx as i } from "react/jsx-runtime";
 import * as d from "react";
 import u from "classnames";
-import { assignInlineVars as b } from "@vanilla-extract/dynamic";
 import { sprinkles as y } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as h } from "./utils/dom.js";
-import { wrap as c, fullWidth as v, noFullWidth as x, justifyVariants as W, vars as g } from "./inline.css-mistica.js";
-const I = (param)=>{
-    let { space: r , className: e , children: l , role: o , alignItems: n = "stretch" , "aria-labelledby": a , fullWidth: s , wrap: m , dataAttributes: f  } = param;
-    const p = s || typeof r == "string";
+import { getPrefixedDataAttributes as b } from "./utils/dom.js";
+import { wrap as h, fullWidth as c, noFullWidth as v, justifyVariants as x, vars as W } from "./inline.css-mistica.js";
+import { applyCssVars as g } from "./utils/css.js";
+const j = (param)=>{
+    let { space: r, className: l, children: e, role: o, alignItems: a = "stretch", "aria-labelledby": s, fullWidth: m, wrap: n, dataAttributes: f } = param;
+    const p = m || typeof r == "string";
     return /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
-        className: u(e, y({
-            alignItems: n
-        }), m ? c : p ? v : x, typeof r != "number" && W[r]),
-        style: typeof r == "number" ? b({
-            [g.space]: `${r}px`
+        className: u(l, y({
+            alignItems: a
+        }), n ? h : p ? c : v, typeof r != "number" && x[r]),
+        style: typeof r == "number" ? g({
+            [W.space]: `${r}px`
         }) : void 0,
         role: o,
-        "aria-labelledby": a
-    }, h(f)), {
-        children: d.Children.map(l, (t)=>t || t === 0 ? /* @__PURE__ */ i("div", {
+        "aria-labelledby": s
+    }, b(f)), {
+        children: d.Children.map(e, (t)=>t || t === 0 ? /* @__PURE__ */ i("div", {
                 children: t
             }) : null)
     }));
-}, A = I;
-export { A as default };
+}, k = j;
+export { k as default };

package/dist-es/integer-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -82,7 +83,7 @@ import { useFieldProps as x } from "./form-context.js";
 import { useTheme as F } from "./hooks.js";
 import { TextFieldBaseAutosuggest as v } from "./text-field-base.js";
 const T = (_param)=>{
-    var { inputRef: u , value: r , defaultValue: n , type: i = "text"  } = _param, o = _object_without_properties(_param, [
+    var { inputRef: u, value: r, defaultValue: n, type: i = "text" } = _param, o = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
@@ -101,7 +102,7 @@ const T = (_param)=>{
         defaultValue: n === void 0 ? void 0 : t(n)
     }));
 }, h = (_param)=>{
-    var { disabled: u , error: r , helperText: n , name: i , optional: o , validate: t , onChange: c , onChangeValue: e , onBlur: m , value: p , defaultValue: a  } = _param, l = _object_without_properties(_param, [
+    var { disabled: u, error: r, helperText: n, name: i, optional: o, validate: t, onChange: c, onChangeValue: e, onBlur: m, value: p, defaultValue: a } = _param, l = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -114,7 +115,7 @@ const T = (_param)=>{
         "value",
         "defaultValue"
     ]);
-    const { texts: f  } = F(), g = x({
+    const { texts: f } = F(), g = x({
         name: i,
         value: p,
         defaultValue: a,

package/dist-es/list.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./list.css.ts.vanilla.css-mistica.js";
-var _ = "_1y2v1nfba _1y2v1nfbs _1y2v1nfbu", f = "_1y2v1nfbj _1y2v1nfd0 _1y2v1nfce _1y2v1nfbs", y = "_1y2v1nfba _1y2v1nfbp", a = "_1y2v1nfba _1y2v1nfbx _1y2v1nfdn", b = "_2buj9gf", r = "_2buj9ge", t = "_2buj9g0", e = "_1y2v1nfba _1y2v1nfbf _1y2v1nfce", u = "_2buj9gm _1y2v1nfba", c = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbc _1y2v1nfbv", d = "_2buj9go _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfbp _1y2v1nfbu _1y2v1nfby _1y2v1nfce", i = "_1y2v1nfe9", o = "_2buj9gc", g = "_2buj9gd", l = "_1y2v1nfba _1y2v1nfbg _1y2v1nfbw", j = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbx _1y2v1nfds _1y2v1nf62 _1y2v1nfbc _1y2v1nfce", s = "_2buj9g1", h = "_2buj9g2";
+var _ = "_1y2v1nfba _1y2v1nfbs _1y2v1nfbu", f = "_1y2v1nfbj _1y2v1nfd0 _1y2v1nfce _1y2v1nfbs", y = "_1y2v1nfba _1y2v1nfbp", a = "_1y2v1nfba _1y2v1nfbx _1y2v1nfdn", b = "_2buj9gf", r = "_2buj9ge", t = "_2buj9g0", e = "_1y2v1nfba _1y2v1nfbf _1y2v1nfce", u = "_2buj9gm _1y2v1nfba", c = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbc _1y2v1nfbv", d = "_2buj9go _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfbp _1y2v1nfbu _1y2v1nfby _1y2v1nfce", i = "_1y2v1nfea", o = "_2buj9gc", g = "_2buj9gd", l = "_1y2v1nfba _1y2v1nfbg _1y2v1nfbw", j = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbx _1y2v1nfds _1y2v1nf62 _1y2v1nfbc _1y2v1nfce", s = "_2buj9g1", h = "_2buj9g2";
 export { _ as asset, f as badge, y as center, a as content, b as detail, r as detailRight, t as disabled, e as dualActionContainer, u as dualActionDivider, c as dualActionLeft, d as dualActionRight, i as pointer, o as right, g as rightRestrictedWidth, l as rowBody, j as rowContent, s as touchableBackground, h as touchableBackgroundInverse };

package/dist-es/list.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -80,9 +81,9 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as t, jsxs as k } from "react/jsx-runtime";
 import * as P from "react";
 import i from "classnames";
-import { BaseTouchable as T } from "./touchable.js";
-import { Text1 as ne, Text3 as re, Text2 as O } from "./text.js";
-import u from "./box.js";
+import { BaseTouchable as S } from "./touchable.js";
+import { Text1 as re, Text3 as ne, Text2 as O } from "./text.js";
+import m from "./box.js";
 import L from "./stack.js";
 import J from "./badge.js";
 import { useAriaId as ae } from "./hooks.js";
@@ -94,26 +95,28 @@ import se from "./checkbox.js";
 import { Boxed as de } from "./boxed.js";
 import le from "./divider.js";
 import { getPrefixedDataAttributes as he } from "./utils/dom.js";
-import { rowContent as B, touchableBackground as R, touchableBackgroundInverse as C, pointer as S, dualActionContainer as Q, dualActionLeft as U, dualActionDivider as Z, content as ue, center as M, disabled as I, asset as me, rowBody as fe, right as ge, rightRestrictedWidth as ve, detail as be, detailRight as _, dualActionRight as xe, badge as we } from "./list.css-mistica.js";
-import { vars as N } from "./skins/skin-contract.css-mistica.js";
-const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
-        centerY: n
-    }) : n ? /* @__PURE__ */ t("div", {
+import { rowContent as B, touchableBackground as C, touchableBackgroundInverse as N, pointer as T, dualActionContainer as Q, dualActionLeft as U, dualActionDivider as Z, content as me, center as M, disabled as I, asset as ue, rowBody as fe, right as ge, rightRestrictedWidth as ve, detail as be, detailRight as _, dualActionRight as xe, badge as we } from "./list.css-mistica.js";
+import { vars as ye } from "./image.css-mistica.js";
+import { vars as x } from "./skins/skin-contract.css-mistica.js";
+import { applyCssVars as Re } from "./utils/css.js";
+const $ = (e, r)=>typeof e == "function" ? e == null ? void 0 : e({
+        centerY: r
+    }) : r ? /* @__PURE__ */ t("div", {
         style: {
             display: "flex",
             alignItems: "center",
             height: "100%"
         },
         children: e
-    }) : e, ye = (param)=>{
-    let { withChevron: e , headline: n , title: r , titleLinesMax: o , subtitle: s , subtitleLinesMax: x , description: d , descriptionLinesMax: W , detail: m , asset: V , type: g = "basic" , badge: A , right: E , extra: X , labelId: l , disabled: v  } = param;
+    }) : e, Ce = (param)=>{
+    let { withChevron: e, headline: r, title: n, titleLinesMax: o, subtitle: s, subtitleLinesMax: w, description: d, descriptionLinesMax: W, detail: u, asset: V, type: g = "basic", badge: A, right: E, extra: X, labelId: l, disabled: v } = param;
     const h = p(), a = [
-        n,
         r,
+        n,
         s,
         d,
         X
-    ].filter(Boolean).length === 1, f = ()=>A ? /* @__PURE__ */ t(u, {
+    ].filter(Boolean).length === 1, f = ()=>A ? /* @__PURE__ */ t(m, {
             paddingLeft: 16,
             children: /* @__PURE__ */ t("div", {
                 className: i(M, we, {
@@ -124,18 +127,21 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 })
             })
         }) : null;
-    return /* @__PURE__ */ k(u, {
+    return /* @__PURE__ */ k(m, {
         paddingY: 16,
-        className: ue,
+        className: me,
         children: [
-            V && /* @__PURE__ */ t(u, {
+            V && /* @__PURE__ */ t(m, {
                 paddingRight: 16,
                 className: i({
                     [M]: a,
                     [I]: v
                 }),
                 children: /* @__PURE__ */ t("div", {
-                    className: me,
+                    className: ue,
+                    style: Re({
+                        [ye.mediaBorderRadius]: x.borderRadii.mediaSmall
+                    }),
                     children: V
                 })
             }),
@@ -149,33 +155,33 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 children: /* @__PURE__ */ k(L, {
                     space: 4,
                     children: [
-                        n && /* @__PURE__ */ t(ne, {
+                        r && /* @__PURE__ */ t(re, {
                             regular: !0,
-                            color: N.colors.textPrimary,
+                            color: x.colors.textPrimary,
                             hyphens: "auto",
-                            children: n
+                            children: r
                         }),
                         /* @__PURE__ */ k(L, {
                             space: 2,
                             children: [
-                                /* @__PURE__ */ t(re, {
+                                /* @__PURE__ */ t(ne, {
                                     regular: !0,
-                                    color: N.colors.textPrimary,
+                                    color: x.colors.textPrimary,
                                     truncate: o,
                                     id: l,
                                     hyphens: "auto",
-                                    children: r
+                                    children: n
                                 }),
                                 s && /* @__PURE__ */ t(O, {
                                     regular: !0,
-                                    color: N.colors.textSecondary,
-                                    truncate: x,
+                                    color: x.colors.textSecondary,
+                                    truncate: w,
                                     hyphens: "auto",
                                     children: s
                                 }),
                                 d && /* @__PURE__ */ t(O, {
                                     regular: !0,
-                                    color: N.colors.textSecondary,
+                                    color: x.colors.textSecondary,
                                     truncate: W,
                                     hyphens: "auto",
                                     children: d
@@ -189,41 +195,41 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             f(),
             /* @__PURE__ */ k("div", {
                 className: i({
-                    [ge]: !!m || g !== "basic",
-                    [ve]: !!m
+                    [ge]: !!u || g !== "basic",
+                    [ve]: !!u
                 }),
                 children: [
-                    m && /* @__PURE__ */ t("div", {
+                    u && /* @__PURE__ */ t("div", {
                         className: i(M, be, {
                             [I]: v
                         }),
                         children: /* @__PURE__ */ t(O, {
                             regular: !0,
-                            color: N.colors.textSecondary,
+                            color: x.colors.textSecondary,
                             hyphens: "auto",
-                            children: m
+                            children: u
                         })
                     }),
                     g === "control" && /* @__PURE__ */ t("div", {
                         className: i({
-                            [_]: !!m
+                            [_]: !!u
                         }),
                         children: $(E, a)
                     }),
                     g === "custom" && /* @__PURE__ */ t("div", {
                         className: i({
-                            [_]: !!m,
+                            [_]: !!u,
                             [I]: v
                         }),
                         children: $(E, a)
                     }),
-                    (g === "chevron" || g === "custom" && e) && /* @__PURE__ */ t(u, {
-                        paddingLeft: m || g === "custom" ? 4 : 0,
+                    (g === "chevron" || g === "custom" && e) && /* @__PURE__ */ t(m, {
+                        paddingLeft: u || g === "custom" ? 4 : 0,
                         className: i(M, {
                             [I]: v
                         }),
                         children: /* @__PURE__ */ t(ie, {
-                            color: h ? N.colors.inverse : N.colors.neutralMedium,
+                            color: h ? x.colors.inverse : x.colors.neutralMedium,
                             direction: "right"
                         })
                     })
@@ -231,10 +237,10 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             })
         ]
     });
-}, Re = (param)=>{
-    let { value: e , defaultValue: n , onChange: r  } = param;
-    const o = e !== void 0, [s, x] = P.useState(!!n), d = ()=>{
-        o || x(!s), r && r(o ? !e : !s);
+}, Ne = (param)=>{
+    let { value: e, defaultValue: r, onChange: n } = param;
+    const o = e !== void 0, [s, w] = P.useState(!!r), d = ()=>{
+        o || w(!s), n && n(o ? !e : !s);
     };
     return o ? [
         !!e,
@@ -243,14 +249,14 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         s,
         d
     ];
-}, Ce = (e)=>e.switch !== void 0, Ne = (e)=>e.checkbox !== void 0, ke = (e)=>e.radioValue !== void 0, ee = /*#__PURE__*/ P.forwardRef((e, n)=>{
-    const r = ae(), o = p(), { asset: s , headline: x , title: d , titleLinesMax: W , subtitle: m , subtitleLinesMax: V , description: g , descriptionLinesMax: A , detail: E , badge: X , role: l , extra: v , dataAttributes: h  } = e, F = ce(), a = e.disabled || e.radioValue !== void 0 && F.disabled, f = !a && !o, w = !a && o, [Y, q] = Re(e.switch || e.checkbox || {}), y = (param)=>/* @__PURE__ */ {
-        let { type: c , right: b , labelId: D  } = param;
-        return t(ye, {
+}, ke = (e)=>e.switch !== void 0, Pe = (e)=>e.checkbox !== void 0, Be = (e)=>e.radioValue !== void 0, ee = /*#__PURE__*/ P.forwardRef((e, r)=>{
+    const n = ae(), o = p(), { asset: s, headline: w, title: d, titleLinesMax: W, subtitle: u, subtitleLinesMax: V, description: g, descriptionLinesMax: A, detail: E, badge: X, role: l, extra: v, dataAttributes: h } = e, F = ce(), a = e.disabled || e.radioValue !== void 0 && F.disabled, f = !a && !o, y = !a && o, [Y, q] = Ne(e.switch || e.checkbox || {}), R = (param)=>/* @__PURE__ */ {
+        let { type: c, right: b, labelId: D } = param;
+        return t(Ce, {
             asset: s,
-            headline: x,
+            headline: w,
             title: d,
-            subtitle: m,
+            subtitle: u,
             description: g,
             badge: X,
             titleLinesMax: W,
@@ -266,21 +272,21 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         });
     }, j = (c)=>{
         let b = "chevron";
-        return c.right === null && (b = "basic"), c.right && (b = "custom"), /* @__PURE__ */ t(u, {
+        return c.right === null && (b = "basic"), c.right && (b = "custom"), /* @__PURE__ */ t(m, {
             paddingX: 16,
-            ref: n,
-            children: y({
+            ref: r,
+            children: R({
                 type: b,
                 right: c.right
             })
         });
     };
-    if (e.onPress && !Ce(e) && !Ne(e) && !ke(e)) return /* @__PURE__ */ t(T, {
-        ref: n,
+    if (e.onPress && !ke(e) && !Pe(e) && !Be(e)) return /* @__PURE__ */ t(S, {
+        ref: r,
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         trackingEvent: e.trackingEvent,
         onPress: e.onPress,
@@ -289,11 +295,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         disabled: a,
         children: j(e)
     });
-    if (e.to) return /* @__PURE__ */ t(T, {
+    if (e.to) return /* @__PURE__ */ t(S, {
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         trackingEvent: e.trackingEvent,
         to: e.to,
@@ -303,11 +309,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         disabled: a,
         children: j(e)
     });
-    if (e.href) return /* @__PURE__ */ t(T, {
+    if (e.href) return /* @__PURE__ */ t(S, {
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         trackingEvent: e.trackingEvent,
         href: e.href,
@@ -320,22 +326,22 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
     const z = (c)=>{
         var D, G;
         var _ref, _ref1;
-        const b = (_ref1 = (_ref = (D = e.switch) == null ? void 0 : D.name) !== null && _ref !== void 0 ? _ref : (G = e.checkbox) == null ? void 0 : G.name) !== null && _ref1 !== void 0 ? _ref1 : r;
+        const b = (_ref1 = (_ref = (D = e.switch) == null ? void 0 : D.name) !== null && _ref !== void 0 ? _ref : (G = e.checkbox) == null ? void 0 : G.name) !== null && _ref1 !== void 0 ? _ref1 : n;
         return e.onPress ? /* @__PURE__ */ k("div", {
             className: Q,
             children: [
-                /* @__PURE__ */ t(T, {
+                /* @__PURE__ */ t(S, {
                     dataAttributes: h,
                     disabled: a,
                     onPress: e.onPress,
                     role: l,
                     className: i(U, {
-                        [R]: f,
-                        [C]: w
+                        [C]: f,
+                        [N]: y
                     }),
-                    children: y({
+                    children: R({
                         type: "basic",
-                        labelId: r
+                        labelId: n
                     })
                 }),
                 /* @__PURE__ */ t("div", {
@@ -345,10 +351,10 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                     disabled: a,
                     name: b,
                     checked: Y,
-                    "aria-labelledby": r,
+                    "aria-labelledby": n,
                     onChange: q,
                     render: (param)=>/* @__PURE__ */ {
-                        let { controlElement: H  } = param;
+                        let { controlElement: H } = param;
                         return t("div", {
                             className: xe,
                             children: H
@@ -358,9 +364,9 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             ]
         }) : /* @__PURE__ */ t("div", {
             className: i(B, {
-                [R]: f,
-                [C]: w,
-                [S]: !a
+                [C]: f,
+                [N]: y,
+                [T]: !a
             }),
             children: /* @__PURE__ */ t(c, {
                 disabled: a,
@@ -369,11 +375,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 checked: Y,
                 onChange: q,
                 render: (param)=>/* @__PURE__ */ {
-                    let { controlElement: H , labelId: te  } = param;
-                    return t(u, {
+                    let { controlElement: H, labelId: te } = param;
+                    return t(m, {
                         paddingX: 16,
                         role: l,
-                        children: y({
+                        children: R({
                             labelId: te,
                             type: "control",
                             right: ()=>/* @__PURE__ */ t(L, {
@@ -389,17 +395,17 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
     return e.switch ? z(oe) : e.checkbox ? z(se) : e.radioValue ? e.onPress ? /* @__PURE__ */ k("div", {
         className: Q,
         children: [
-            /* @__PURE__ */ t(T, {
+            /* @__PURE__ */ t(S, {
                 disabled: a,
                 onPress: e.onPress,
                 role: l,
                 className: i(U, {
-                    [R]: f,
-                    [C]: w
+                    [C]: f,
+                    [N]: y
                 }),
-                children: y({
+                children: R({
                     type: "basic",
-                    labelId: r
+                    labelId: n
                 })
             }),
             /* @__PURE__ */ t("div", {
@@ -408,12 +414,12 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             /* @__PURE__ */ t(K, {
                 dataAttributes: h,
                 value: e.radioValue,
-                "aria-labelledby": r,
+                "aria-labelledby": n,
                 render: (param)=>/* @__PURE__ */ {
-                    let { controlElement: c  } = param;
+                    let { controlElement: c } = param;
                     return t(L, {
                         space: "around",
-                        children: /* @__PURE__ */ t(u, {
+                        children: /* @__PURE__ */ t(m, {
                             paddingX: 16,
                             children: c
                         })
@@ -423,22 +429,22 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         ]
     }) : /* @__PURE__ */ t("div", {
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         role: l,
-        ref: n,
+        ref: r,
         children: /* @__PURE__ */ t(K, {
             dataAttributes: h,
             value: e.radioValue,
-            "aria-labelledby": r,
+            "aria-labelledby": n,
             render: (param)=>/* @__PURE__ */ {
-                let { controlElement: c  } = param;
-                return t(u, {
+                let { controlElement: c } = param;
+                return t(m, {
                     paddingX: 16,
-                    children: y({
-                        labelId: r,
+                    children: R({
+                        labelId: n,
                         type: "control",
                         right: ()=>/* @__PURE__ */ t(L, {
                                 space: "around",
@@ -448,67 +454,67 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 });
             }
         })
-    }) : /* @__PURE__ */ t(u, {
+    }) : /* @__PURE__ */ t(m, {
         paddingX: 16,
         className: B,
         role: l,
         dataAttributes: h,
-        children: e.right ? y({
+        children: e.right ? R({
             type: "custom",
             right: e.right
-        }) : y({
+        }) : R({
             type: "basic"
         })
     });
-}), qe = /*#__PURE__*/ P.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, n = _object_without_properties(_param, [
+}), Ke = /*#__PURE__*/ P.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return t(ee, _object_spread_props(_object_spread({}, n), {
-        ref: r,
+    return t(ee, _object_spread_props(_object_spread({}, r), {
+        ref: n,
         dataAttributes: _object_spread({
             "component-name": "Row"
         }, e)
     }));
-}), ze = (param)=>{
-    let { children: e , ariaLabelledby: n , role: r , dataAttributes: o  } = param;
+}), Qe = (param)=>{
+    let { children: e, ariaLabelledby: r, role: n, dataAttributes: o } = param;
     const s = P.Children.count(e) - 1;
     return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-        role: r,
-        "aria-labelledby": n
+        role: n,
+        "aria-labelledby": r
     }, he(o, "RowList")), {
-        children: P.Children.toArray(e).filter(Boolean).map((x, d)=>/* @__PURE__ */ k(P.Fragment, {
+        children: P.Children.toArray(e).filter(Boolean).map((w, d)=>/* @__PURE__ */ k(P.Fragment, {
                 children: [
-                    x,
-                    d < s && /* @__PURE__ */ t(u, {
+                    w,
+                    d < s && /* @__PURE__ */ t(m, {
                         paddingX: 16,
                         children: /* @__PURE__ */ t(le, {})
                     })
                 ]
             }, d))
     }));
-}, Ge = /*#__PURE__*/ P.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, n = _object_without_properties(_param, [
+}, Ue = /*#__PURE__*/ P.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return t(de, {
-        isInverse: n.isInverse,
-        ref: r,
+        isInverse: r.isInverse,
+        ref: n,
         dataAttributes: _object_spread({
             "component-name": "BoxedRow"
         }, e),
-        children: /* @__PURE__ */ t(ee, _object_spread({}, n))
+        children: /* @__PURE__ */ t(ee, _object_spread({}, r))
     });
-}), Je = (param)=>/* @__PURE__ */ {
-    let { children: e , ariaLabelledby: n , role: r , dataAttributes: o  } = param;
+}), Ze = (param)=>/* @__PURE__ */ {
+    let { children: e, ariaLabelledby: r, role: n, dataAttributes: o } = param;
     return t(L, {
         space: 16,
-        role: r,
-        "aria-labelledby": n,
+        role: n,
+        "aria-labelledby": r,
         dataAttributes: _object_spread({
             "component-name": "BoxedRowList"
         }, o),
         children: e
     });
 };
-export { Ge as BoxedRow, Je as BoxedRowList, ye as Content, qe as Row, ze as RowList };
+export { Ue as BoxedRow, Ze as BoxedRowList, Ce as Content, Ke as Row, Qe as RowList };

package/dist-es/loading-bar.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./loading-bar.css.ts.vanilla.css-mistica.js";
-var r = 400, _ = "_1num3qg9", e = "_1num3qga", a = "_1num3qgb", f = "_1num3qgc", y = "_1num3qg8 _1y2v1nfce", g = "_1num3qg3 _1y2v1nfb6 _1y2v1nfeg _1y2v1nfev _1y2v1nffa", t = "_1num3qg6 _1y2v1nfb5 _1y2v1nfce _1y2v1nfbx", m = "_1y2v1nfbx _1y2v1nfea _1y2v1nfb4 _1y2v1nf4c _1y2v1nfch";
-export { r as TRANSITION_DURATION_MS, _ as enter, e as enterActive, a as exit, f as exitActive, y as innerProgress, g as portal, t as progress, m as progressContainer };
+var r = 400, _ = "_1num3qg9", e = "_1num3qga", f = "_1num3qgb", y = "_1num3qgc", a = "_1num3qg8 _1y2v1nfce", t = "_1num3qg3 _1y2v1nfb6 _1y2v1nfeh _1y2v1nfew _1y2v1nffb", g = "_1num3qg6 _1y2v1nfb5 _1y2v1nfce _1y2v1nfbx", m = "_1y2v1nfbx _1y2v1nfeb _1y2v1nfb4 _1y2v1nf4c _1y2v1nfch";
+export { r as TRANSITION_DURATION_MS, _ as enter, e as enterActive, f as exit, y as exitActive, a as innerProgress, t as portal, g as progress, m as progressContainer };

package/dist-es/loading-bar.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -57,7 +58,7 @@ import { TRANSITION_DURATION_MS as o, enter as a, enterActive as s, exit as m, e
 import { getPrefixedDataAttributes as g } from "./utils/dom.js";
 import { isRunningAcceptanceTest as u } from "./utils/platform.js";
 const x = (param)=>/* @__PURE__ */ {
-    let { visible: r , dataAttributes: t  } = param;
+    let { visible: r, dataAttributes: t } = param;
     return e(i, {
         in: r,
         timeout: u() ? 0 : o,