@telefonica/mistica 16.3.0 → 16.4.0

package/dist/switch-component.css-mistica.js

@@ -10,52 +10,69 @@ function _export(target, all) {
 }
 _export(exports, {
     ballVariants: function() {
-        return n;
+        return q;
     },
     barVariants: function() {
-        return v;
+        return n;
     },
     checkboxVariants: function() {
-        return f;
+        return v;
     },
     container: function() {
         return p;
     },
     containerDisabled: function() {
-        return q;
+        return y;
     },
     disabled: function() {
-        return y;
+        return f;
     },
     interactiveArea: function() {
         return _;
     },
-    switchCheckboxContainerVariants: function() {
+    inverseBallVariants: function() {
         return e;
     },
+    inverseBarVariants: function() {
+        return s;
+    },
+    switchCheckboxContainerVariants: function() {
+        return i;
+    },
     switchCheckboxLabel: function() {
         return r;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./switch-component.css.ts.vanilla.css-mistica.js");
-var n = {
-    default: "q0hp3aw q0hp3au q0hp3at _1y2v1nfhf _1y2v1nfm0 _1y2v1nfhm _1y2v1nfk3",
-    ios: "q0hp3ax q0hp3av q0hp3at _1y2v1nfhf _1y2v1nfm0 _1y2v1nfhm _1y2v1nfk3",
-    checked: "q0hp3ay q0hp3au q0hp3at _1y2v1nfhf _1y2v1nfm0 _1y2v1nfhm _1y2v1nfk3",
-    checkedIos: "q0hp3az q0hp3av q0hp3at _1y2v1nfhf _1y2v1nfm0 _1y2v1nfhm _1y2v1nfk3"
+var q = {
+    default: "q0hp3a11 q0hp3az q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7",
+    ios: "q0hp3a12 q0hp3a10 q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7",
+    checked: "q0hp3a13 q0hp3az q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7",
+    checkedIos: "q0hp3a14 q0hp3a10 q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7"
+}, n = {
+    default: "q0hp3ai q0hp3ah _1y2v1nfhq",
+    ios: "q0hp3aj q0hp3ah _1y2v1nfhq",
+    iosDark: "q0hp3ak q0hp3ah _1y2v1nfhq",
+    checked: "q0hp3al q0hp3ah _1y2v1nfhq",
+    checkedIos: "q0hp3am q0hp3ah _1y2v1nfhq"
 }, v = {
-    default: "q0hp3ai q0hp3ah _1y2v1nfhm",
-    ios: "q0hp3aj q0hp3ah _1y2v1nfhm",
-    iosDark: "q0hp3ak q0hp3ah _1y2v1nfhm",
-    checked: "q0hp3al q0hp3ah _1y2v1nfhm",
-    checkedIos: "q0hp3am q0hp3ah _1y2v1nfhm"
-}, f = {
-    default: "q0hp3a6 _1y2v1nfho _1y2v1nfkk",
-    ios: "q0hp3a7 _1y2v1nfho _1y2v1nfkk",
-    disabled: "q0hp3a8 _1y2v1nfho _1y2v1nfkk",
-    disabledIos: "q0hp3a9 _1y2v1nfho _1y2v1nfkk"
-}, p = "q0hp3ap q0hp3an", q = "q0hp3aq q0hp3an", y = "q0hp3ar", _ = "q0hp3ao", e = {
-    default: "q0hp3ac q0hp3ab _1y2v1nfhe",
-    ios: "q0hp3ad q0hp3ab _1y2v1nfhe"
-}, r = "q0hp3af _1y2v1nfhm _1y2v1nfkl";
+    default: "q0hp3a6 _1y2v1nfhs _1y2v1nfko",
+    ios: "q0hp3a7 _1y2v1nfhs _1y2v1nfko",
+    disabled: "q0hp3a8 _1y2v1nfhs _1y2v1nfko",
+    disabledIos: "q0hp3a9 _1y2v1nfhs _1y2v1nfko"
+}, p = "q0hp3au q0hp3as", y = "q0hp3av q0hp3as", f = "q0hp3aw", _ = "q0hp3at", e = {
+    default: "q0hp3a15 q0hp3az q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7",
+    ios: "q0hp3a16 q0hp3a10 q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7",
+    checked: "q0hp3a17 q0hp3az q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7",
+    checkedIos: "q0hp3a18 q0hp3a10 q0hp3ay _1y2v1nfhj _1y2v1nfm4 _1y2v1nfhq _1y2v1nfk7"
+}, s = {
+    default: "q0hp3an q0hp3ah _1y2v1nfhq",
+    ios: "q0hp3ao q0hp3ah _1y2v1nfhq",
+    iosDark: "q0hp3ap q0hp3ah _1y2v1nfhq",
+    checked: "q0hp3aq q0hp3ah _1y2v1nfhq",
+    checkedIos: "q0hp3ar q0hp3ah _1y2v1nfhq"
+}, i = {
+    default: "q0hp3ac q0hp3ab _1y2v1nfhi",
+    ios: "q0hp3ad q0hp3ab _1y2v1nfhi"
+}, r = "q0hp3af _1y2v1nfhq _1y2v1nfkp";

package/dist/switch-component.css.d.ts

@@ -9,8 +9,10 @@ export declare const checkboxVariants: Record<"default" | "disabled" | "ios" | "
 export declare const switchCheckboxContainerVariants: Record<"default" | "ios", string>;
 export declare const switchCheckboxLabel: string;
 export declare const barVariants: Record<"default" | "ios" | "iosDark" | "checked" | "checkedIos", string>;
+export declare const inverseBarVariants: Record<"default" | "ios" | "iosDark" | "checked" | "checkedIos", string>;
 export declare const interactiveArea: string;
 export declare const container: string;
 export declare const containerDisabled: string;
 export declare const disabled: string;
 export declare const ballVariants: Record<"default" | "ios" | "checked" | "checkedIos", string>;
+export declare const inverseBallVariants: Record<"default" | "ios" | "checked" | "checkedIos", string>;

package/dist/switch-component.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return U;
+        return ae;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,7 @@ const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _hooks = require("./hooks.js");
 const _dom = require("./utils/dom.js");
 const _switchcomponentcssmistica = require("./switch-component.css-mistica.js");
+const _themevariantcontext = require("./theme-variant-context.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -117,34 +118,34 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const L = (e)=>{
-    const { isIos: d, isDarkMode: f } = (0, _hooks.useTheme)(), u = _react.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value: s, onChange: a, focusableRef: v, disabled: i } = (0, _formcontext.useControlProps)({
+const G = (e)=>{
+    const { isIos: c, isDarkMode: v } = (0, _hooks.useTheme)(), m = (0, _themevariantcontext.useIsInverseVariant)(), I = _react.useId(), n = e["aria-labelledby"] || I, { defaultValue: V, value: l, onChange: a, focusableRef: N, disabled: i } = (0, _formcontext.useControlProps)({
         name: e.name,
         label: e["aria-label"],
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [c, I] = _react.useState(!!k), r = s !== null && s !== void 0 ? s : c, N = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (t)=>a == null ? void 0 : a(t) : (0, _helpers.debounce)((t)=>{
+    }), [r, w] = _react.useState(!!V), d = l !== null && l !== void 0 ? l : r, x = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (t)=>a == null ? void 0 : a(t) : (0, _helpers.debounce)((t)=>{
             a == null || a(t);
         }, 300), [
         a
-    ]), m = ()=>{
-        s !== void 0 ? a == null || a(!s) : (I(!c), N(!c));
-    }, w = (t)=>{
-        t.key === _keys.SPACE && (t.preventDefault(), t.stopPropagation(), m());
-    }, h = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: _switchcomponentcssmistica.checkboxVariants[d ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
+    ]), b = ()=>{
+        l !== void 0 ? a == null || a(!l) : (w(!r), x(!r));
+    }, C = (t)=>{
+        t.key === _keys.SPACE && (t.preventDefault(), t.stopPropagation(), b());
+    }, h = c ? d ? "checkedIos" : v ? "iosDark" : "ios" : d ? "checked" : "default", f = c ? d ? "checkedIos" : "ios" : d ? "checked" : "default", u = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: _switchcomponentcssmistica.checkboxVariants[c ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            className: _switchcomponentcssmistica.switchCheckboxContainerVariants[d ? "ios" : "default"],
+            className: _switchcomponentcssmistica.switchCheckboxContainerVariants[c ? "ios" : "default"],
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _switchcomponentcssmistica.switchCheckboxLabel,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        className: _switchcomponentcssmistica.barVariants[d ? r ? "checkedIos" : f ? "iosDark" : "ios" : r ? "checked" : "default"]
+                        className: m ? _switchcomponentcssmistica.inverseBarVariants[h] : _switchcomponentcssmistica.barVariants[h]
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        className: _switchcomponentcssmistica.ballVariants[d ? r ? "checkedIos" : "ios" : r ? "checked" : "default"]
+                        className: m ? _switchcomponentcssmistica.inverseBallVariants[f] : _switchcomponentcssmistica.ballVariants[f]
                     })
                 ]
             })
@@ -153,13 +154,13 @@ const L = (e)=>{
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", _object_spread_props(_object_spread({
         role: "switch",
-        "aria-checked": s !== null && s !== void 0 ? s : c,
+        "aria-checked": l !== null && l !== void 0 ? l : r,
         onClick: (t)=>{
-            t.stopPropagation(), i || m();
+            t.stopPropagation(), i || b();
         },
-        onKeyDown: i ? void 0 : w,
+        onKeyDown: i ? void 0 : C,
         tabIndex: i ? void 0 : 0,
-        ref: v,
+        ref: N,
         className: i ? _switchcomponentcssmistica.containerDisabled : _switchcomponentcssmistica.container,
         "aria-disabled": i,
         "aria-label": e["aria-label"],
@@ -167,17 +168,17 @@ const L = (e)=>{
     }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Switch")), {
         children: e.render ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
             children: e.render({
-                controlElement: h,
+                controlElement: u,
                 labelId: n,
                 disabled: !!i,
-                checked: s !== null && s !== void 0 ? s : c
+                checked: l !== null && l !== void 0 ? l : r
             })
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
             alignItems: "center",
             className: _switchcomponentcssmistica.interactiveArea,
             children: [
-                h,
+                u,
                 e.children && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
                     as: "div",
@@ -190,4 +191,4 @@ const L = (e)=>{
             ]
         })
     })));
-}, U = L;
+}, ae = G;

package/dist/tabs.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     animatedLine: function() {
-        return f;
+        return v;
     },
     icon: function() {
         return e;
@@ -28,10 +28,10 @@ _export(exports, {
         return r;
     },
     tabHover: function() {
-        return l;
+        return o;
     },
     tabSelectionVariants: function() {
-        return o;
+        return l;
     },
     tabVariants: function() {
         return t;
@@ -42,17 +42,17 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tabs.css.ts.vanilla.css-mistica.js");
-var f = "_1y2v1nfhj _1y2v1nfhf _1y2v1nfl6 _1y2v1nfm0 _1y2v1nfiq", e = "lgofm1q", y = "lgofm14", _ = "lgofm13 _1y2v1nfjv _1y2v1nfi7 _1y2v1nfhe", a = "lgofm10", r = "lgofm11", l = {
+var v = "_1y2v1nfhn _1y2v1nfhj _1y2v1nfla _1y2v1nfm4 _1y2v1nfiu", e = "lgofm1q", y = "lgofm14", _ = "lgofm13 _1y2v1nfjz _1y2v1nfib _1y2v1nfhi", a = "lgofm10", r = "lgofm11", o = {
     default: "lgofm1a",
     inverse: "lgofm1b"
-}, o = {
-    noSelected: "_1y2v1nf28",
-    noSelectedInverse: "_1y2v1nf29",
+}, l = {
+    noSelected: "_1y2v1nf2a",
+    noSelectedInverse: "_1y2v1nf2b",
     selected: "lgofm1g",
     selectedInverse: "lgofm1h",
     selectedAnimating: "lgofm1i",
     selectedAnimatingInverse: "lgofm1j"
 }, t = {
-    default: "lgofm17 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhl _1y2v1nfi2 _1y2v1nfhz _1y2v1nfht _1y2v1nfjj _1y2v1nfjv _1y2v1nf7c",
-    fullWidth: "lgofm19 lgofm17 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhl _1y2v1nfi2 _1y2v1nfhz _1y2v1nfht _1y2v1nfjj _1y2v1nfjv _1y2v1nf7c"
-}, i = "_1y2v1nfjv _1y2v1nfi7 _1y2v1nfhk";
+    default: "lgofm17 _1y2v1nfae _1y2v1nfbn _1y2v1nfhp _1y2v1nfi6 _1y2v1nfi3 _1y2v1nfhx _1y2v1nfjn _1y2v1nfjz _1y2v1nf7g",
+    fullWidth: "lgofm19 lgofm17 _1y2v1nfae _1y2v1nfbn _1y2v1nfhp _1y2v1nfi6 _1y2v1nfi3 _1y2v1nfhx _1y2v1nfjn _1y2v1nfjz _1y2v1nf7g"
+}, i = "_1y2v1nfjz _1y2v1nfib _1y2v1nfho";

package/dist/tag.css-mistica.js

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tag.css.ts.vanilla.css-mistica.js");
-var y = "_1y2v1nfhl _1y2v1nfa1", _ = "_1y2v1nfhm", f = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
+var y = "_1y2v1nfhp _1y2v1nfa5", _ = "_1y2v1nfhq", f = "_1wy08671 _1y2v1nf7n _1y2v1nf8w _1y2v1nfhp _1y2v1nfht _1y2v1nfi3 _1y2v1nfhx _1y2v1nfjk";

package/dist/text-field-base.css-mistica.js

@@ -22,25 +22,25 @@ _export(exports, {
         return a;
     },
     fieldEndIconGap: function() {
-        return f;
+        return i;
     },
     fieldLeftPadding: function() {
-        return h;
+        return f;
     },
     fieldRightPadding: function() {
-        return i;
+        return h;
     },
     fullWidth: function() {
         return _;
     },
     hiddenDatePlaceholder: function() {
-        return d;
+        return o;
     },
     iconButtonSize: function() {
         return l;
     },
     input: function() {
-        return o;
+        return d;
     },
     inputFirefoxStyles: function() {
         return p;
@@ -49,34 +49,34 @@ _export(exports, {
         return u;
     },
     inputWithoutLabel: function() {
-        return m;
+        return c;
     },
     menuItem: function() {
-        return c;
+        return m;
     },
     menuItemSelected: function() {
         return b;
     },
     prefix: function() {
-        return g;
+        return s;
     },
     startIcon: function() {
-        return k;
+        return x;
     },
     suggestionsContainer: function() {
-        return x;
+        return I;
     },
     textArea: function() {
-        return s;
+        return g;
     },
     textAreaWithLabel: function() {
-        return I;
+        return j;
     },
     textAreaWithoutLabel: function() {
-        return L;
+        return k;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
-var n = "rhey4t8", v = "rhey4th _1y2v1nfa1 _1y2v1nfhk _1y2v1nfhz", y = 12, a = "rhey4tr", f = 4, h = 11, i = 15, _ = "rhey4t4", d = "rhey4t7", l = "calc(1.5rem + 24px)", o = "rhey4ta _1y2v1nfhe rhey4t1 _1y2v1nfk2 _1y2v1nfj5 _1y2v1nf26 _1y2v1nfi7", p = "rhey4tb", u = "rhey4tc", m = "rhey4td", c = "rhey4tn _1y2v1nfhk _1y2v1nfhz _1y2v1nfkk", b = "_1y2v1nf44", g = "rhey4tl _1y2v1nfbg", k = "rhey4tj _1y2v1nfbg _1y2v1nfhk _1y2v1nfhz _1y2v1nfio _1y2v1nfhf", x = "rhey4tq _1y2v1nfhf", s = "rhey4t6 _1y2v1nf7d _1y2v1nf8m rhey4t1 _1y2v1nfk2 _1y2v1nfj5 _1y2v1nf26 _1y2v1nfi7", I = "rhey4te", L = "rhey4tf";
+var n = "rhey4t8", v = "rhey4th _1y2v1nfa5 _1y2v1nfho _1y2v1nfi3", y = 12, a = "rhey4tr", i = 4, f = 11, h = 15, _ = "rhey4t4", o = "rhey4t7", l = "calc(1.5rem + 24px)", d = "rhey4ta _1y2v1nfhi rhey4t1 _1y2v1nfk6 _1y2v1nfj9 _1y2v1nf28 _1y2v1nfib", p = "rhey4tb", u = "rhey4tc", c = "rhey4td", m = "rhey4tn _1y2v1nfho _1y2v1nfi3 _1y2v1nfko", b = "_1y2v1nf46", s = "rhey4tl _1y2v1nfbk", x = "rhey4tj _1y2v1nfbk _1y2v1nfho _1y2v1nfi3 _1y2v1nfis _1y2v1nfhj", I = "rhey4tq _1y2v1nfhj", g = "rhey4t6 _1y2v1nf7h _1y2v1nf8q rhey4t1 _1y2v1nfk6 _1y2v1nfj9 _1y2v1nf28 _1y2v1nfib", j = "rhey4te", k = "rhey4tf";