@telefonica/mistica 16.3.1 → 16.5.0

package/dist/progress-bar.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     ProgressBar: function() {
-        return z;
+        return K;
     },
     ProgressBarStepped: function() {
-        return G;
+        return O;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -26,6 +26,7 @@ const _dom = require("./utils/dom.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _texttokens = require("./text-tokens.js");
+const _themevariantcontext = require("./theme-variant-context.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -124,81 +125,81 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-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 } = (0, _hooks.useTheme)(), e = Math.max(0, Math.min(100, r)), i = t && t !== "false" ? {
+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 } = (0, _hooks.useTheme)(), i = (0, _themevariantcontext.useIsInverseVariant)(), 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(_texttokens.loading), h = m.progressBarCompletedLabel || d(_texttokens.progressBarCompletedLabel);
-            return `${g}, ${e}% ${h}`;
+        "aria-label": c ? void 0 : (()=>{
+            const u = v || d.loading || p(_texttokens.loading), B = d.progressBarCompletedLabel || p(_texttokens.progressBarCompletedLabel);
+            return `${u}, ${e}% ${B}`;
         })(),
-        "aria-labelledby": n
+        "aria-labelledby": c
     };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "ProgressBar")), {
-        className: _progressbarcssmistica.barBackground
-    }), i), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m, "ProgressBar")), {
+        className: _progressbarcssmistica.barBackground[i ? "inverse" : "default"]
+    }), n), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: (0, _classnames.default)(_progressbarcssmistica.bar, l ? _progressbarcssmistica.inverse : _progressbarcssmistica.normal),
             style: {
                 maxWidth: `${e}%`,
-                backgroundColor: s !== null && s !== void 0 ? s : _skincontractcssmistica.vars.colors.controlActivated
+                backgroundColor: s !== null && s !== void 0 ? s : i ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.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 } = (0, _hooks.useTheme)(), [e, f] = _react.useState(Math.ceil(s)), [i, g] = _react.useState(!1);
+}, 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 } = (0, _hooks.useTheme)(), i = (0, _themevariantcontext.useIsInverseVariant)(), [e, h] = _react.useState(Math.ceil(s)), [n, u] = _react.useState(!1);
     _react.useEffect(()=>{
-        const a = Math.ceil(s);
-        e !== a && (g(a < e), f(a));
+        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(_texttokens.progressBarStepLabel)).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(_texttokens.progressBarStepLabel)).replace("1$s", String(e)).replace("2$s", String(a));
+            return t ? `${t}, ${r.toLowerCase()}` : r;
         })(),
-        "aria-labelledby": c
+        "aria-labelledby": m
     };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(n, "ProgressBarStepped")), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "ProgressBarStepped")), {
         role: "progressbar"
-    }), N), {
+    }), w), {
         className: _progressbarcssmistica.progressBarSteppedContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             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__ */ (0, _jsxruntime.jsx)("div", {
-                    className: _progressbarcssmistica.barBackground,
+                    className: _progressbarcssmistica.barBackground[i ? "inverse" : "default"],
                     "aria-hidden": "true",
-                    children: (B || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    children: (S || x) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_progressbarcssmistica.bar, {
-                            [_progressbarcssmistica.normal]: x && !i,
-                            [_progressbarcssmistica.inverse]: v && i
+                            [_progressbarcssmistica.normal]: C && !n,
+                            [_progressbarcssmistica.inverse]: x && n
                         }),
                         style: {
-                            backgroundColor: b !== null && b !== void 0 ? b : _skincontractcssmistica.vars.colors.controlActivated,
-                            maxWidth: B || x && !i ? "100%" : "0"
+                            backgroundColor: v !== null && v !== void 0 ? v : i ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated,
+                            maxWidth: S || C && !n ? "100%" : "0"
                         }
                     })
-                }, p);
+                }, b);
             })
         })
     }));

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

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     disabled: function() {
-        return d;
+        return f;
     },
-    innerCircle: function() {
-        return r;
+    innerCircleVariant: function() {
+        return y;
     },
-    innerCircleChecked: function() {
-        return c;
+    inverseInnerCircleVariant: function() {
+        return _;
     },
-    outerCircleCheckedVariants: function() {
-        return a;
+    inverseOuterCircleVariants: function() {
+        return c;
     },
     outerCircleVariants: function() {
-        return f;
+        return d;
     },
     radioButton: function() {
         return i;
@@ -33,10 +33,20 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+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";

package/dist/radio-button.css.d.ts

@@ -1,7 +1,7 @@
-export declare const outerCircleVariants: Record<"default" | "ios", string>;
-export declare const innerCircle: string;
-export declare const innerCircleChecked: string;
+export declare const outerCircleVariants: Record<"default" | "ios" | "checked" | "checkedIos", string>;
+export declare const inverseOuterCircleVariants: Record<"default" | "ios" | "checked" | "checkedIos", string>;
+export declare const innerCircleVariant: Record<"default" | "checked", string>;
+export declare const inverseInnerCircleVariant: Record<"default" | "checked", string>;
 export declare const radioButton: string;
 export declare const radioButtonContainerDisabled: string;
-export declare const outerCircleCheckedVariants: Record<"default" | "ios", string>;
 export declare const disabled: string;

package/dist/radio-button.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     RadioGroup: function() {
-        return oe;
+        return ie;
     },
     default: function() {
-        return re;
+        return se;
     },
     useRadioContext: function() {
-        return z;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -31,6 +31,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames")
 const _hooks = require("./hooks.js");
 const _dom = require("./utils/dom.js");
 const _radiobuttoncssmistica = require("./radio-button.css-mistica.js");
+const _themevariantcontext = require("./theme-variant-context.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -163,59 +164,56 @@ const S = /*#__PURE__*/ _react.createContext({
     select: ()=>{},
     selectNext: ()=>{},
     selectPrev: ()=>{}
-}), z = ()=>_react.useContext(S), J = (_param)=>{
-    var { value: e, id: s, dataAttributes: h, "aria-labelledby": g, "aria-label": x } = _param, f = _object_without_properties(_param, [
+}), M = ()=>_react.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 = _react.useId(), b = g || r, V = _react.useRef(null), d = e === v, o = C === e ? 0 : -1, { isIos: t } = (0, _hooks.useTheme)(), R = (a)=>{
-        switch(a.key){
+    const { disabled: o, selectedValue: R, focusableValue: V, select: f, selectNext: p, selectPrev: y } = M(), r = _react.useId(), b = g || r, I = _react.useRef(null), u = e === R, a = V === e ? 0 : -1, { isIos: t } = (0, _hooks.useTheme)(), h = (0, _themevariantcontext.useIsInverseVariant)(), v = (l)=>{
+        switch(l.key){
             case _keys.SPACE:
-                c(e), a.preventDefault(), a.stopPropagation();
+                f(e), l.preventDefault(), l.stopPropagation();
                 break;
             case _keys.RIGHT:
             case _keys.DOWN:
-                p(), a.preventDefault(), a.stopPropagation();
+                p(), l.preventDefault(), l.stopPropagation();
                 break;
             case _keys.LEFT:
             case _keys.UP:
-                y(), a.preventDefault(), a.stopPropagation();
+                y(), l.preventDefault(), l.stopPropagation();
                 break;
         }
-    }, u = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(t ? _radiobuttoncssmistica.outerCircleVariants.ios : _radiobuttoncssmistica.outerCircleVariants.default, {
-            [_radiobuttoncssmistica.outerCircleCheckedVariants[t ? "ios" : "default"]]: d,
-            [_radiobuttoncssmistica.disabled]: l
+    }, s = t ? u ? "checkedIos" : "ios" : u ? "checked" : "default", c = u ? "checked" : "default", k = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(h ? _radiobuttoncssmistica.inverseOuterCircleVariants[s] : _radiobuttoncssmistica.outerCircleVariants[s], {
+            [_radiobuttoncssmistica.disabled]: o
         }),
         children: !t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            className: (0, _classnames.default)(_radiobuttoncssmistica.innerCircle, {
-                [_radiobuttoncssmistica.innerCircleChecked]: d
-            })
+            className: h ? _radiobuttoncssmistica.inverseInnerCircleVariant[c] : _radiobuttoncssmistica.innerCircleVariant[c]
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("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 ? _radiobuttoncssmistica.radioButtonContainerDisabled : _radiobuttoncssmistica.radioButton
-    }, (0, _dom.getPrefixedDataAttributes)(h, "RadioButton")), {
-        children: f.render ? f.render({
-            controlElement: u,
-            disabled: !!l,
-            checked: d,
+        onKeyDown: o ? void 0 : v,
+        className: o ? _radiobuttoncssmistica.radioButtonContainerDisabled : _radiobuttoncssmistica.radioButton
+    }, (0, _dom.getPrefixedDataAttributes)(x, "RadioButton")), {
+        children: m.render ? m.render({
+            controlElement: k,
+            disabled: !!o,
+            checked: u,
             labelId: b
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
@@ -228,7 +226,7 @@ const S = /*#__PURE__*/ _react.createContext({
                             position: "relative",
                             top: -2
                         },
-                        children: u
+                        children: k
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
@@ -236,69 +234,69 @@ const S = /*#__PURE__*/ _react.createContext({
                     as: "div",
                     id: b,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        className: l ? _radiobuttoncssmistica.disabled : "",
-                        children: f.children
+                        className: o ? _radiobuttoncssmistica.disabled : "",
+                        children: m.children
                     })
                 })
             ]
         })
     }));
-}, oe = (e)=>{
+}, ie = (e)=>{
     var _ref;
-    const { value: s, defaultValue: h, onChange: g, focusableRef: x, disabled: f } = (0, _formcontext.useControlProps)({
+    const { value: d, defaultValue: x, onChange: g, focusableRef: C, disabled: m } = (0, _formcontext.useControlProps)({
         name: e.name,
         value: e.value,
         defaultValue: e.defaultValue,
         onChange: e.onChange,
         disabled: e.disabled
-    }), l = typeof s < "u", [v, C] = _react.useState((_ref = s !== null && s !== void 0 ? s : h) !== null && _ref !== void 0 ? _ref : "");
+    }), o = typeof d < "u", [R, V] = _react.useState((_ref = d !== null && d !== void 0 ? d : x) !== null && _ref !== void 0 ? _ref : "");
     _react.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] = _react.useState(null), r = _react.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));
         }
     };
     _react.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__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(r, x),
+        ref: (0, _common.combineRefs)(r, C),
         role: "radiogroup",
         "aria-label": e["aria-label"],
         "aria-labelledby": e["aria-label"] ? void 0 : e["aria-labelledby"]
     }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "RadioGroup")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(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;
+}, se = Q;

package/dist/rating.css-mistica.js

@@ -16,10 +16,10 @@ _export(exports, {
         return v;
     },
     firstIcon: function() {
-        return e;
+        return t;
     },
     halfIconActive: function() {
-        return t;
+        return e;
     },
     halfIconContainer: function() {
         return n;
@@ -39,6 +39,6 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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)"
 };

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

@@ -58,7 +58,7 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "screenReaderOnly", {
     enumerable: true,
     get: function() {
-        return f;
+        return y;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./screen-reader-only.css.ts.vanilla.css-mistica.js");
-var f = "gwdgwo1 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhf _1y2v1nfkl _1y2v1nfk2";
+var y = "gwdgwo1 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfhj _1y2v1nfkp _1y2v1nfk6";

package/dist/screen-reader-only.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import type { DataAttributes } from './utils/types';
 type Props = {
     children: React.ReactNode;
+    className?: string;
     dataAttributes?: DataAttributes;
 };
-declare const ScreenReaderOnly: ({ children, dataAttributes }: Props) => JSX.Element;
+declare const ScreenReaderOnly: ({ children, className, dataAttributes }: Props) => JSX.Element;
 export default ScreenReaderOnly;

package/dist/screen-reader-only.js

@@ -5,13 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return d;
+        return y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _screenreaderonlycssmistica = require("./screen-reader-only.css-mistica.js");
 const _dom = require("./utils/dom.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -105,18 +111,18 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const m = (param)=>{
-    let { children: t, dataAttributes: n } = param;
-    const s = (0, _dom.getPrefixedDataAttributes)(n, "ScreenReaderOnly");
-    if (_react.Children.count(t) === 1) {
-        const e = _react.Children.only(t);
-        if (/*#__PURE__*/ _react.isValidElement(e)) return /*#__PURE__*/ _react.cloneElement(e, _object_spread({
-            className: e.props.className ? e.props.className + " " + _screenreaderonlycssmistica.screenReaderOnly : _screenreaderonlycssmistica.screenReaderOnly
-        }, s));
+const c = (param)=>{
+    let { children: r, className: n, dataAttributes: m } = param;
+    const a = (0, _dom.getPrefixedDataAttributes)(m, "ScreenReaderOnly");
+    if (_react.Children.count(r) === 1) {
+        const t = _react.Children.only(r);
+        if (/*#__PURE__*/ _react.isValidElement(t)) return /*#__PURE__*/ _react.cloneElement(t, _object_spread({
+            className: (0, _classnames.default)(t.props.className, _screenreaderonlycssmistica.screenReaderOnly, n)
+        }, a));
     }
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        className: _screenreaderonlycssmistica.screenReaderOnly
-    }, s), {
-        children: t
+        className: (0, _classnames.default)(_screenreaderonlycssmistica.screenReaderOnly, n)
+    }, a), {
+        children: r
     }));
-}, d = m;
+}, y = c;

package/dist/search-field.js

@@ -145,8 +145,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const J = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -161,7 +161,7 @@ const J = /*#__PURE__*/ _react.forwardRef((_param, P)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: h, t: v } = (0, _hooks.useTheme)(), o = _react.useRef(), [y, k] = _react.useState(F || ""), s = typeof f < "u", l = s ? f : y, i = _react.useCallback((c, B)=>{
+    const { texts: P, t: v } = (0, _hooks.useTheme)(), o = _react.useRef(), [y, k] = _react.useState(R || ""), s = typeof l < "u", f = s ? l : y, i = _react.useCallback((c, B)=>{
         s || k(c), t == null || t(c, B);
     }, [
         s,
@@ -174,32 +174,33 @@ const J = /*#__PURE__*/ _react.forwardRef((_param, P)=>{
     ]), A = (0, _formcontext.useFieldProps)({
         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__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(o, P),
+        ref: (0, _common.combineRefs)(o, x),
         startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {
             size: _iconbuttoncssmistica.iconSize.default
         }),
-        endIcon: l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
+        endIcon: f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
             Icon: _iconcloseregular.default,
-            "aria-label": h.formSearchClear || v(_texttokens.formSearchClear),
+            "aria-label": P.formSearchClear || v(_texttokens.formSearchClear),
             onPress: z
         }) : void 0
-    }, x, A), {
+    }, h, A), {
         type: "search",
         dataAttributes: _object_spread({
-            "component-name": "SearchField"
+            "component-name": "SearchField",
+            testid: "SearchField"
         }, b)
     }));
 }), Z = J;