@telefonica/mistica 16.3.1 → 16.4.0

package/dist-es/progress-bar.js

@@ -52,91 +52,92 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as o } from "react/jsx-runtime";
-import * as u from "react";
-import { useTheme as S } from "./hooks.js";
-import { vars as C } from "./skins/skin-contract.css-mistica.js";
-import { barBackground as L, bar as $, inverse as y, normal as P, progressBarSteppedContainer as w } from "./progress-bar.css-mistica.js";
-import { getPrefixedDataAttributes as k } from "./utils/dom.js";
-import A from "classnames";
-import F from "./inline.js";
-import { loading as M, progressBarCompletedLabel as T, progressBarStepLabel as W } from "./text-tokens.js";
-const z = (param)=>{
-    let { progressPercent: r, color: s, "aria-label": b, "aria-labelledby": n, "aria-hidden": t, dataAttributes: c, reverse: l = !1 } = param;
-    const { texts: m, t: d } = S(), e = Math.max(0, Math.min(100, r)), i = t && t !== "false" ? {
+import * as f from "react";
+import { useTheme as I } from "./hooks.js";
+import { vars as g } from "./skins/skin-contract.css-mistica.js";
+import { barBackground as L, bar as $, inverse as y, normal as A, progressBarSteppedContainer as F } from "./progress-bar.css-mistica.js";
+import { getPrefixedDataAttributes as P } from "./utils/dom.js";
+import k from "classnames";
+import M from "./inline.js";
+import { loading as T, progressBarCompletedLabel as W, progressBarStepLabel as V } from "./text-tokens.js";
+import { useIsInverseVariant as N } from "./theme-variant-context.js";
+const K = (param)=>{
+    let { progressPercent: a, color: s, "aria-label": v, "aria-labelledby": c, "aria-hidden": t, dataAttributes: m, reverse: l = !1 } = param;
+    const { texts: d, t: p } = I(), i = N(), e = Math.max(0, Math.min(100, a)), n = t && t !== "false" ? {
         "aria-hidden": t
     } : {
         role: "progressbar",
         "aria-valuenow": e,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": n ? void 0 : (()=>{
-            const g = b || m.loading || d(M), h = m.progressBarCompletedLabel || d(T);
-            return `${g}, ${e}% ${h}`;
+        "aria-label": c ? void 0 : (()=>{
+            const u = v || d.loading || p(T), B = d.progressBarCompletedLabel || p(W);
+            return `${u}, ${e}% ${B}`;
         })(),
-        "aria-labelledby": n
+        "aria-labelledby": c
     };
-    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, k(c, "ProgressBar")), {
-        className: L
-    }), i), {
+    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, P(m, "ProgressBar")), {
+        className: L[i ? "inverse" : "default"]
+    }), n), {
         children: /* @__PURE__ */ o("div", {
-            className: A($, l ? y : P),
+            className: k($, l ? y : A),
             style: {
                 maxWidth: `${e}%`,
-                backgroundColor: s !== null && s !== void 0 ? s : C.colors.controlActivated
+                backgroundColor: s !== null && s !== void 0 ? s : i ? g.colors.controlActivatedInverse : g.colors.controlActivated
             }
         })
     }));
-}, G = (param)=>{
-    let { steps: r, currentStep: s = 0, color: b, dataAttributes: n, "aria-label": t, "aria-labelledby": c, "aria-hidden": l } = param;
-    const { texts: m, t: d } = S(), [e, f] = u.useState(Math.ceil(s)), [i, g] = u.useState(!1);
-    u.useEffect(()=>{
-        const a = Math.ceil(s);
-        e !== a && (g(a < e), f(a));
+}, O = (param)=>{
+    let { steps: a, currentStep: s = 0, color: v, dataAttributes: c, "aria-label": t, "aria-labelledby": m, "aria-hidden": l } = param;
+    const { texts: d, t: p } = I(), i = N(), [e, h] = f.useState(Math.ceil(s)), [n, u] = f.useState(!1);
+    f.useEffect(()=>{
+        const r = Math.ceil(s);
+        e !== r && (u(r < e), h(r));
     }, [
         s,
-        r,
+        a,
         e
     ]);
-    const N = l && l !== "false" ? {
+    const w = l && l !== "false" ? {
         "aria-hidden": l
     } : {
         role: "progressbar",
         "aria-valuenow": e,
         "aria-valuemin": 0,
-        "aria-valuemax": r,
-        "aria-label": c ? void 0 : (()=>{
-            const a = (m.progressBarStepLabel || d(W)).replace("1$s", String(e)).replace("2$s", String(r));
-            return t ? `${t}, ${a.toLowerCase()}` : a;
+        "aria-valuemax": a,
+        "aria-label": m ? void 0 : (()=>{
+            const r = (d.progressBarStepLabel || p(V)).replace("1$s", String(e)).replace("2$s", String(a));
+            return t ? `${t}, ${r.toLowerCase()}` : r;
         })(),
-        "aria-labelledby": c
+        "aria-labelledby": m
     };
-    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, k(n, "ProgressBarStepped")), {
+    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, P(c, "ProgressBarStepped")), {
         role: "progressbar"
-    }), N), {
-        className: w,
-        children: /* @__PURE__ */ o(F, {
+    }), w), {
+        className: F,
+        children: /* @__PURE__ */ o(M, {
             space: 8,
             fullWidth: !0,
             children: Array.from({
-                length: r
-            }, (a, p)=>{
-                const v = p === e, B = p < e, x = p === e - 1;
+                length: a
+            }, (r, b)=>{
+                const x = b === e, S = b < e, C = b === e - 1;
                 return /* @__PURE__ */ o("div", {
-                    className: L,
+                    className: L[i ? "inverse" : "default"],
                     "aria-hidden": "true",
-                    children: (B || v) && /* @__PURE__ */ o("div", {
-                        className: A($, {
-                            [P]: x && !i,
-                            [y]: v && i
+                    children: (S || x) && /* @__PURE__ */ o("div", {
+                        className: k($, {
+                            [A]: C && !n,
+                            [y]: x && n
                         }),
                         style: {
-                            backgroundColor: b !== null && b !== void 0 ? b : C.colors.controlActivated,
-                            maxWidth: B || x && !i ? "100%" : "0"
+                            backgroundColor: v !== null && v !== void 0 ? v : i ? g.colors.controlActivatedInverse : g.colors.controlActivated,
+                            maxWidth: S || C && !n ? "100%" : "0"
                         }
                     })
-                }, p);
+                }, b);
             })
         })
     }));
 };
-export { z as ProgressBar, G as ProgressBarStepped };
+export { K as ProgressBar, O as ProgressBarStepped };

package/dist-es/radio-button.css-mistica.js

@@ -1,10 +1,20 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./radio-button.css.ts.vanilla.css-mistica.js";
-var d = "c6dmsud", r = "c6dmsu5 _1y2v1nfhk _1y2v1nfk3", c = "c6dmsu7 _1y2v1nf4z", a = {
-    default: "c6dmsub",
-    ios: "c6dmsuc"
-}, f = {
-    default: "c6dmsu2 c6dmsu1 _1y2v1nfhl _1y2v1nfhz _1y2v1nfht _1y2v1nfkk _1y2v1nfi2 _1y2v1nfk3 _1y2v1nf3p",
-    ios: "c6dmsu3 c6dmsu1 _1y2v1nfhl _1y2v1nfhz _1y2v1nfht _1y2v1nfkk _1y2v1nfi2 _1y2v1nfk3 _1y2v1nf3p"
-}, i = "c6dmsu9 c6dmsu8", s = "c6dmsua c6dmsu8";
-export { d as disabled, r as innerCircle, c as innerCircleChecked, a as outerCircleCheckedVariants, f as outerCircleVariants, i as radioButton, s as radioButtonContainerDisabled };
+var f = "c6dmsul", y = {
+    default: "c6dmsub _1y2v1nfho _1y2v1nfk7",
+    checked: "c6dmsue c6dmsub _1y2v1nfho _1y2v1nfk7 _1y2v1nf51"
+}, _ = {
+    default: "c6dmsub _1y2v1nfho _1y2v1nfk7",
+    checked: "c6dmsuh c6dmsub _1y2v1nfho _1y2v1nfk7 _1y2v1nf53"
+}, c = {
+    default: "c6dmsu6 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    ios: "c6dmsu7 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checked: "c6dmsu8 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checkedIos: "c6dmsu9 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7"
+}, d = {
+    default: "c6dmsu2 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    ios: "c6dmsu3 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checked: "c6dmsu4 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checkedIos: "c6dmsu5 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7"
+}, i = "c6dmsuj c6dmsui", s = "c6dmsuk c6dmsui";
+export { f as disabled, y as innerCircleVariant, _ as inverseInnerCircleVariant, c as inverseOuterCircleVariants, d as outerCircleVariants, i as radioButton, s as radioButtonContainerDisabled };

package/dist-es/radio-button.js

@@ -80,15 +80,16 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as n, jsxs as A } from "react/jsx-runtime";
 import * as i from "react";
-import { UP as B, LEFT as q, DOWN as E, RIGHT as T, SPACE as w } from "./utils/keys.js";
-import { useControlProps as G } from "./form-context.js";
-import { combineRefs as O } from "./utils/common.js";
-import { Text3 as k } from "./text.js";
-import j from "./inline.js";
-import P from "classnames";
+import { UP as B, LEFT as q, DOWN as E, RIGHT as O, SPACE as T } from "./utils/keys.js";
+import { useControlProps as w } from "./form-context.js";
+import { combineRefs as G } from "./utils/common.js";
+import { Text3 as P } from "./text.js";
+import $ from "./inline.js";
+import j from "classnames";
 import { useTheme as F } from "./hooks.js";
 import { getPrefixedDataAttributes as N } from "./utils/dom.js";
-import { outerCircleVariants as I, outerCircleCheckedVariants as K, disabled as D, innerCircle as $, innerCircleChecked as H, radioButtonContainerDisabled as U, radioButton as W } from "./radio-button.css-mistica.js";
+import { inverseOuterCircleVariants as K, outerCircleVariants as H, disabled as D, inverseInnerCircleVariant as U, innerCircleVariant as W, radioButtonContainerDisabled as z, radioButton as J } from "./radio-button.css-mistica.js";
+import { useIsInverseVariant as L } from "./theme-variant-context.js";
 const S = /*#__PURE__*/ i.createContext({
     disabled: !1,
     selectedValue: null,
@@ -96,65 +97,62 @@ const S = /*#__PURE__*/ i.createContext({
     select: ()=>{},
     selectNext: ()=>{},
     selectPrev: ()=>{}
-}), z = ()=>i.useContext(S), J = (_param)=>{
-    var { value: e, id: s, dataAttributes: h, "aria-labelledby": g, "aria-label": x } = _param, f = _object_without_properties(_param, [
+}), M = ()=>i.useContext(S), Q = (_param)=>{
+    var { value: e, id: d, dataAttributes: x, "aria-labelledby": g, "aria-label": C } = _param, m = _object_without_properties(_param, [
         "value",
         "id",
         "dataAttributes",
         "aria-labelledby",
         "aria-label"
     ]);
-    const { disabled: l, selectedValue: v, focusableValue: C, select: c, selectNext: p, selectPrev: y } = z(), r = i.useId(), b = g || r, V = i.useRef(null), d = e === v, o = C === e ? 0 : -1, { isIos: t } = F(), R = (a)=>{
-        switch(a.key){
-            case w:
-                c(e), a.preventDefault(), a.stopPropagation();
-                break;
+    const { disabled: o, selectedValue: R, focusableValue: V, select: f, selectNext: p, selectPrev: y } = M(), r = i.useId(), b = g || r, I = i.useRef(null), u = e === R, a = V === e ? 0 : -1, { isIos: t } = F(), h = L(), v = (l)=>{
+        switch(l.key){
             case T:
+                f(e), l.preventDefault(), l.stopPropagation();
+                break;
+            case O:
             case E:
-                p(), a.preventDefault(), a.stopPropagation();
+                p(), l.preventDefault(), l.stopPropagation();
                 break;
             case q:
             case B:
-                y(), a.preventDefault(), a.stopPropagation();
+                y(), l.preventDefault(), l.stopPropagation();
                 break;
         }
-    }, u = /* @__PURE__ */ n("div", {
-        className: P(t ? I.ios : I.default, {
-            [K[t ? "ios" : "default"]]: d,
-            [D]: l
+    }, s = t ? u ? "checkedIos" : "ios" : u ? "checked" : "default", c = u ? "checked" : "default", k = /* @__PURE__ */ n("div", {
+        className: j(h ? K[s] : H[s], {
+            [D]: o
         }),
         children: !t && /* @__PURE__ */ n("div", {
-            className: P($, {
-                [H]: d
-            })
+            className: h ? U[c] : W[c]
         })
     });
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
     /* @__PURE__ */ n("span", _object_spread_props(_object_spread({
-        ref: V,
-        id: s,
-        tabIndex: l ? void 0 : o,
+        ref: I,
+        id: d,
+        tabIndex: o ? void 0 : a,
         role: "radio",
         "data-value": e,
-        "aria-checked": d,
-        "aria-disabled": l,
-        "aria-label": x,
-        "aria-labelledby": x ? void 0 : b,
-        onClick: (a)=>{
-            a.stopPropagation(), l || c(e);
+        "aria-checked": u,
+        "aria-disabled": o,
+        "aria-label": C,
+        "aria-labelledby": C ? void 0 : b,
+        onClick: (l)=>{
+            l.stopPropagation(), o || f(e);
         },
-        onKeyDown: l ? void 0 : R,
-        className: l ? U : W
-    }, N(h, "RadioButton")), {
-        children: f.render ? f.render({
-            controlElement: u,
-            disabled: !!l,
-            checked: d,
+        onKeyDown: o ? void 0 : v,
+        className: o ? z : J
+    }, N(x, "RadioButton")), {
+        children: m.render ? m.render({
+            controlElement: k,
+            disabled: !!o,
+            checked: u,
             labelId: b
-        }) : /* @__PURE__ */ A(j, {
+        }) : /* @__PURE__ */ A($, {
             space: 16,
             children: [
-                /* @__PURE__ */ n(k, {
+                /* @__PURE__ */ n(P, {
                     regular: !0,
                     as: "div",
                     children: /* @__PURE__ */ n("div", {
@@ -162,78 +160,78 @@ const S = /*#__PURE__*/ i.createContext({
                             position: "relative",
                             top: -2
                         },
-                        children: u
+                        children: k
                     })
                 }),
-                /* @__PURE__ */ n(k, {
+                /* @__PURE__ */ n(P, {
                     regular: !0,
                     as: "div",
                     id: b,
                     children: /* @__PURE__ */ n("span", {
-                        className: l ? D : "",
-                        children: f.children
+                        className: o ? D : "",
+                        children: m.children
                     })
                 })
             ]
         })
     })));
-}, oe = (e)=>{
+}, ie = (e)=>{
     var _ref;
-    const { value: s, defaultValue: h, onChange: g, focusableRef: x, disabled: f } = G({
+    const { value: d, defaultValue: x, onChange: g, focusableRef: C, disabled: m } = w({
         name: e.name,
         value: e.value,
         defaultValue: e.defaultValue,
         onChange: e.onChange,
         disabled: e.disabled
-    }), l = typeof s < "u", [v, C] = i.useState((_ref = s !== null && s !== void 0 ? s : h) !== null && _ref !== void 0 ? _ref : "");
+    }), o = typeof d < "u", [R, V] = i.useState((_ref = d !== null && d !== void 0 ? d : x) !== null && _ref !== void 0 ? _ref : "");
     i.useEffect(()=>{
-        s !== void 0 && C(s);
+        d !== void 0 && V(d);
     }, [
-        s
+        d
     ]);
-    const c = (o)=>{
-        l || C(o), g(o);
+    const f = (a)=>{
+        o || V(a), g(a);
     }, [p, y] = i.useState(null), r = i.useRef(null), b = ()=>{
         if (r.current) {
-            const o = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
+            const a = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
             if (t.length === 0) return;
-            const u = ((o ? t.indexOf(o) : 0) + 1) % t.length, a = t[u], m = a.dataset.value;
-            m && (a.focus(), c(m));
+            const v = ((a ? t.indexOf(a) : 0) + 1) % t.length, s = t[v], c = s.dataset.value;
+            c && (s.focus(), f(c));
         }
-    }, V = ()=>{
+    }, I = ()=>{
         if (r.current) {
-            const o = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
+            const a = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
             if (t.length === 0) return;
-            const R = o ? t.indexOf(o) : 0, u = (t.length + R - 1) % t.length, a = t[u], m = a.dataset.value;
-            m && (a.focus(), c(m));
+            const h = a ? t.indexOf(a) : 0, v = (t.length + h - 1) % t.length, s = t[v], c = s.dataset.value;
+            c && (s.focus(), f(c));
         }
     };
     i.useEffect(()=>{
         if (r.current) {
-            const o = r.current.querySelector("[role=radio]");
-            var _o_dataset_value;
-            o && y((_o_dataset_value = o.dataset.value) !== null && _o_dataset_value !== void 0 ? _o_dataset_value : null);
+            const a = r.current.querySelector("[role=radio]");
+            var _a_dataset_value;
+            a && y((_a_dataset_value = a.dataset.value) !== null && _a_dataset_value !== void 0 ? _a_dataset_value : null);
         }
     }, []);
     var _ref1;
-    const d = (_ref1 = v !== null && v !== void 0 ? v : p) !== null && _ref1 !== void 0 ? _ref1 : null;
+    const u = (_ref1 = R !== null && R !== void 0 ? R : p) !== null && _ref1 !== void 0 ? _ref1 : null;
     return /* @__PURE__ */ n("div", _object_spread_props(_object_spread({
-        ref: O(r, x),
+        ref: G(r, C),
         role: "radiogroup",
         "aria-label": e["aria-label"],
         "aria-labelledby": e["aria-label"] ? void 0 : e["aria-labelledby"]
     }, N(e.dataAttributes, "RadioGroup")), {
         children: /* @__PURE__ */ n(S.Provider, {
             value: {
-                disabled: f,
-                selectedValue: v !== null && v !== void 0 ? v : h,
-                focusableValue: d,
-                select: c,
+                disabled: m,
+                selectedValue: R !== null && R !== void 0 ? R : x,
+                focusableValue: u,
+                select: f,
                 selectNext: b,
-                selectPrev: V
+                selectPrev: I
             },
             children: e.children
         })
     }));
-}, re = J;
-export { oe as RadioGroup, re as default, z as useRadioContext };
+}, se = Q;
+export { ie as RadioGroup, se as default, M as useRadioContext };

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

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./rating.css.ts.vanilla.css-mistica.js";
-var a = "igrtie3 _1y2v1nfhk _1y2v1nfht _1y2v1nfhz", v = "igrtie9", e = "igrtiea", t = "igrtie8 _1y2v1nfhe", n = "_1y2v1nfhe", o = "igrtie6 _1y2v1nfhf", c = "igrtieb", f = "igrtiec", h = {
+var a = "igrtie3 _1y2v1nfho _1y2v1nfhx _1y2v1nfi3", v = "igrtie9", t = "igrtiea", e = "igrtie8 _1y2v1nfhi", n = "_1y2v1nfhi", o = "igrtie6 _1y2v1nfhj", c = "igrtieb", f = "igrtiec", h = {
     iconSize: "var(--igrtie0)"
 };
-export { a as IconWrapper, v as disabled, e as firstIcon, t as halfIconActive, n as halfIconContainer, o as halfIconInactive, c as lastIcon, f as touchable, h as vars };
+export { a as IconWrapper, v as disabled, t as firstIcon, e as halfIconActive, n as halfIconContainer, o as halfIconInactive, c as lastIcon, f as touchable, h as vars };

package/dist-es/responsive-layout.css-mistica.js

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 var o = 16, a = 40, n = 32, t = {
-    inverse: "_1y2v1nf3z",
-    media: "_1y2v1nf7c",
-    alternative: "_1y2v1nf44"
-}, i = "_17lofg77", v = "_17lofg78", _ = "_17lofg7a", f = "_17lofg7g _1y2v1nfi7", l = "_17lofg79", g = "_17lofg73", s = "_17lofg72", M = "_17lofg75", p = "_17lofg74", C = "_17lofg7e", D = "_17lofg76";
+    inverse: "_1y2v1nf41",
+    media: "_1y2v1nf7g",
+    alternative: "_1y2v1nf46"
+}, i = "_17lofg77", v = "_17lofg78", _ = "_17lofg7a", f = "_17lofg7g _1y2v1nfib", l = "_17lofg79", g = "_17lofg73", s = "_17lofg72", M = "_17lofg75", p = "_17lofg74", C = "_17lofg7e", D = "_17lofg76";
 export { o as MOBILE_SIDE_MARGIN, a as SMALL_DESKTOP_SIDE_MARGIN, n as TABLET_SIDE_MARGIN, t as backgroundVariant, i as desktopContainer, v as forcedMarginDesktopContainer, _ as forcedMarginMobileContainer, f as fullWidth, l as mobileContainer, g as resetContainerDesktop, s as resetContainerMobile, M as resetDesktop, p as resetMobile, C as responsiveLayout, D as responsiveLayoutContainer };

package/dist-es/screen-reader-only.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./screen-reader-only.css.ts.vanilla.css-mistica.js";
-var f = "gwdgwo1 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhf _1y2v1nfkl _1y2v1nfk2";
-export { f as screenReaderOnly };
+var y = "gwdgwo1 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfhj _1y2v1nfkp _1y2v1nfk6";
+export { y as screenReaderOnly };

package/dist-es/screen-reader-only.js

@@ -50,23 +50,24 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as o } from "react/jsx-runtime";
-import * as r from "react";
-import { screenReaderOnly as a } from "./screen-reader-only.css-mistica.js";
+import { jsx as i } from "react/jsx-runtime";
+import * as e from "react";
+import { screenReaderOnly as o } from "./screen-reader-only.css-mistica.js";
 import { getPrefixedDataAttributes as l } from "./utils/dom.js";
-const m = (param)=>{
-    let { children: t, dataAttributes: n } = param;
-    const s = l(n, "ScreenReaderOnly");
-    if (r.Children.count(t) === 1) {
-        const e = r.Children.only(t);
-        if (/*#__PURE__*/ r.isValidElement(e)) return /*#__PURE__*/ r.cloneElement(e, _object_spread({
-            className: e.props.className ? e.props.className + " " + a : a
-        }, s));
+import s from "classnames";
+const c = (param)=>{
+    let { children: r, className: n, dataAttributes: m } = param;
+    const a = l(m, "ScreenReaderOnly");
+    if (e.Children.count(r) === 1) {
+        const t = e.Children.only(r);
+        if (/*#__PURE__*/ e.isValidElement(t)) return /*#__PURE__*/ e.cloneElement(t, _object_spread({
+            className: s(t.props.className, o, n)
+        }, a));
     }
-    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread({
-        className: a
-    }, s), {
-        children: t
+    return /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
+        className: s(o, n)
+    }, a), {
+        children: r
     }));
-}, d = m;
-export { d as default };
+}, y = c;
+export { y as default };

package/dist-es/search-field.js

@@ -89,8 +89,8 @@ import { createChangeEvent as w } from "./utils/dom.js";
 import { combineRefs as D } from "./utils/common.js";
 import { iconSize as G } from "./icon-button.css-mistica.js";
 import { formSearchClear as H } from "./text-tokens.js";
-const J = /*#__PURE__*/ r.forwardRef((_param, P)=>{
-    var { disabled: m, error: u, helperText: d, name: p, label: n, optional: S, validate: I, onChange: e, onChangeValue: t, onBlur: R, value: f, defaultValue: F, dataAttributes: b } = _param, x = _object_without_properties(_param, [
+const J = /*#__PURE__*/ r.forwardRef((_param, x)=>{
+    var { disabled: m, error: d, helperText: u, name: p, label: n, optional: S, validate: F, onChange: e, onChangeValue: t, onBlur: I, value: l, defaultValue: R, dataAttributes: b } = _param, h = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -105,7 +105,7 @@ const J = /*#__PURE__*/ r.forwardRef((_param, P)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: h, t: v } = q(), o = r.useRef(), [y, k] = r.useState(F || ""), s = typeof f < "u", l = s ? f : y, i = r.useCallback((c, B)=>{
+    const { texts: P, t: v } = q(), o = r.useRef(), [y, k] = r.useState(R || ""), s = typeof l < "u", f = s ? l : y, i = r.useCallback((c, B)=>{
         s || k(c), t == null || t(c, B);
     }, [
         s,
@@ -118,32 +118,33 @@ const J = /*#__PURE__*/ r.forwardRef((_param, P)=>{
     ]), A = E({
         name: p,
         label: n,
-        value: l,
+        value: f,
         defaultValue: void 0,
         processValue: (c)=>c,
-        helperText: d,
+        helperText: u,
         optional: S,
-        error: u,
+        error: d,
         disabled: m,
-        onBlur: R,
-        validate: I,
+        onBlur: I,
+        validate: F,
         onChange: e,
         onChangeValue: i
     });
     return /* @__PURE__ */ a(T, _object_spread_props(_object_spread({
-        ref: D(o, P),
+        ref: D(o, x),
         startIcon: /* @__PURE__ */ a(V, {
             size: G.default
         }),
-        endIcon: l ? /* @__PURE__ */ a(j, {
+        endIcon: f ? /* @__PURE__ */ a(j, {
             Icon: $,
-            "aria-label": h.formSearchClear || v(H),
+            "aria-label": P.formSearchClear || v(H),
             onPress: z
         }) : void 0
-    }, x, A), {
+    }, h, A), {
         type: "search",
         dataAttributes: _object_spread({
-            "component-name": "SearchField"
+            "component-name": "SearchField",
+            testid: "SearchField"
         }, b)
     }));
 }), Z = J;

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

@@ -2,18 +2,18 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./select.css.ts.vanilla.css-mistica.js";
-var i = "_1sqpivvo _1y2v1nfhf", y = "_1sqpivvp", a = "_1sqpivvr _1y2v1nfaa _1y2v1nfbj _1y2v1nf7m _1y2v1nf8v _1y2v1nf26 _1y2v1nfhk _1y2v1nfhz _1y2v1nfkk", s = "_1y2v1nf44", r = {
+var f = "_1sqpivvo _1y2v1nfhj", y = "_1sqpivvp", s = "_1sqpivvr _1y2v1nfae _1y2v1nfbn _1y2v1nf7q _1y2v1nf8z _1y2v1nf28 _1y2v1nfho _1y2v1nfi3 _1y2v1nfko", a = "_1y2v1nf46", p = {
     show: "_1sqpivv7",
     hide: "_1sqpivv8"
-}, p = "_1sqpivv6 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhg _1y2v1nfka _1y2v1nf3q", t = {
-    default: "_1sqpivvd _1sqpivvc _1y2v1nfhe _1y2v1nfkk",
-    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfhe _1y2v1nfkk"
+}, r = "_1sqpivv6 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfhk _1y2v1nfke _1y2v1nf3s", t = {
+    default: "_1sqpivvd _1sqpivvc _1y2v1nfhi _1y2v1nfko",
+    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfhi _1y2v1nfko"
 }, e = {
-    default: "_1sqpivvl _1sqpivvk _1y2v1nfhf _1y2v1nfkl _1y2v1nfjz _1y2v1nf26",
-    disabled: "_1sqpivvm _1sqpivvk _1y2v1nfhf _1y2v1nfkl _1y2v1nfjz _1y2v1nf26"
+    default: "_1sqpivvl _1sqpivvk _1y2v1nfhj _1y2v1nfkp _1y2v1nfk3 _1y2v1nf28",
+    disabled: "_1sqpivvm _1sqpivvk _1y2v1nfhj _1y2v1nfkp _1y2v1nfk3 _1y2v1nf28"
 }, q = {
-    default: "_1sqpivvh _1sqpivvg _1y2v1nf7d _1y2v1nf8m _1y2v1nfk2 _1y2v1nfkl _1y2v1nf26 _1y2v1nf7c _1y2v1nfi7",
-    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf7d _1y2v1nf8m _1y2v1nfk2 _1y2v1nfkl _1y2v1nf26 _1y2v1nf7c _1y2v1nfi7"
+    default: "_1sqpivvh _1sqpivvg _1y2v1nf7h _1y2v1nf8q _1y2v1nfk6 _1y2v1nfkp _1y2v1nf28 _1y2v1nf7g _1y2v1nfib",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf7h _1y2v1nf8q _1y2v1nfk6 _1y2v1nfkp _1y2v1nf28 _1y2v1nf7g _1y2v1nfib"
 }, o = {
     top: "var(--_1sqpivv0)",
     left: "var(--_1sqpivv1)",
@@ -21,4 +21,4 @@ var i = "_1sqpivvo _1y2v1nfhf", y = "_1sqpivvp", a = "_1sqpivvr _1y2v1nfaa _1y2v
     minWidth: "var(--_1sqpivv3)",
     maxHeight: "var(--_1sqpivv4)"
 };
-export { i as arrowDown, y as iconContainer, a as menuItem, s as menuItemSelected, r as optionsAnimationsVariants, p as optionsContainer, t as selectContainerVariants, e as selectTextVariants, q as selectVariants, o as vars };
+export { f as arrowDown, y as iconContainer, s as menuItem, a as menuItemSelected, p as optionsAnimationsVariants, r as optionsContainer, t as selectContainerVariants, e as selectTextVariants, q as selectVariants, o as vars };

package/dist-es/select.js

@@ -309,6 +309,7 @@ const ot = (param)=>{
                     "aria-hidden": !0,
                     children: /* @__PURE__ */ r("div", {
                         className: ie,
+                        "data-testid": "endIcon",
                         children: /* @__PURE__ */ r(oe, {
                             size: te
                         })

package/dist-es/sheet-action-row.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./sheet-action-row.css.ts.vanilla.css-mistica.js";
-var _ = "_4k81wx1 _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfjx _1y2v1nfhz";
+var _ = "_4k81wx1 _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfk1 _1y2v1nfi3";
 export { _ as sheetActionRow };

package/dist-es/sheet-common.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./sheet-common.css.ts.vanilla.css-mistica.js";
-var f = "pidemf6 _1y2v1nf3p", y = "pidemf4 _1y2v1nfhg _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", _ = "pidemf9 _1y2v1nf81 _1y2v1nfhk _1y2v1nfhq", e = "pidemfq", i = "_1y2v1nfkq _1y2v1nfi6 _1y2v1nfhk _1y2v1nfhq", r = "pidemfl", a = "pidemf7", t = "_1y2v1nf4y _1y2v1nfig _1y2v1nfir _1y2v1nfk4", h = "pidemfc _1y2v1nf7m _1y2v1nf8v _1y2v1nfhf _1y2v1nfkr _1y2v1nfj1 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", l = "pidemff _1y2v1nf7y _1y2v1nf97 _1y2v1nfag _1y2v1nfbp _1y2v1nfhf _1y2v1nfkr _1y2v1nfll", p = "pidemfk _1y2v1nfhg _1y2v1nf41 _1y2v1nfkr _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", m = "pidemfp _1y2v1nfhi _1y2v1nfm0 _1y2v1nf3p", o = "pidemfn _1y2v1nfhi _1y2v1nfkr _1y2v1nf3p", d = 400;
-export { f as Sheet, y as SheetContainer, _ as SheetContent, e as bodyContent, i as children, r as closingOverlay, a as closingSheet, t as handle, h as handleContainer, l as modalCloseButton, p as overlay, m as stickyButtons, o as stickyTitle, d as transitionDuration };
+var f = "pidemf6 _1y2v1nf3r", y = "pidemf4 _1y2v1nfhk _1y2v1nfla _1y2v1nflp _1y2v1nfm4", _ = "pidemf9 _1y2v1nf85 _1y2v1nfho _1y2v1nfhu", e = "pidemfq", i = "_1y2v1nfku _1y2v1nfia _1y2v1nfho _1y2v1nfhu", a = "pidemfl", r = "pidemf7", t = "_1y2v1nf50 _1y2v1nfik _1y2v1nfiv _1y2v1nfk8", o = "pidemfc _1y2v1nf7q _1y2v1nf8z _1y2v1nfhj _1y2v1nfkv _1y2v1nfj5 _1y2v1nfib _1y2v1nfho _1y2v1nfhx", h = "pidemff _1y2v1nf82 _1y2v1nf9b _1y2v1nfak _1y2v1nfbt _1y2v1nfhj _1y2v1nfkv _1y2v1nflp", m = "pidemfk _1y2v1nfhk _1y2v1nf43 _1y2v1nfkv _1y2v1nfla _1y2v1nflp _1y2v1nfm4", p = "pidemfp _1y2v1nfhm _1y2v1nfm4 _1y2v1nf3r", d = "pidemfn _1y2v1nfhm _1y2v1nfkv _1y2v1nf3r", l = 400;
+export { f as Sheet, y as SheetContainer, _ as SheetContent, e as bodyContent, i as children, a as closingOverlay, r as closingSheet, t as handle, o as handleContainer, h as modalCloseButton, m as overlay, p as stickyButtons, d as stickyTitle, l as transitionDuration };

package/dist-es/sheet-info.css-mistica.js

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfiw";
-export { f as infoItemIcon };
+var o = "_1y2v1nfho _1y2v1nfi3 _1y2v1nfj0";
+export { o as infoItemIcon };