@telefonica/mistica 14.32.1 → 14.34.0

package/dist/stack.js

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "default", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _dynamic = require("@vanilla-extract/dynamic");
 const _dom = require("./utils/dom.js");
 const _stackcssmistica = require("./stack.css-mistica.js");
+const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -40,7 +40,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -119,11 +121,11 @@ const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
         [_stackcssmistica.vars.spaceDesktop]: a(t.desktop)
     };
     return t.tablet && (e[_stackcssmistica.vars.spaceTablet] = a(t.tablet)), e;
-}, x = (param)=>/* @__PURE__ */ {
-    let { space: t , className: e , children: o , role: i , "aria-labelledby": s , dataAttributes: n  } = param;
+}, y = (param)=>/* @__PURE__ */ {
+    let { space: t, className: e, children: o, role: i, "aria-labelledby": s, dataAttributes: n } = param;
     return (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(e, typeof t == "string" ? _stackcssmistica.flexStack : _stackcssmistica.marginStack),
-        style: (0, _dynamic.assignInlineVars)(k(t)),
+        style: (0, _css.applyCssVars)(k(t)),
         role: i,
         "aria-labelledby": s
     }, (0, _dom.getPrefixedDataAttributes)(n)), {
@@ -132,4 +134,4 @@ const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
                 children: m
             }))
     }));
-}, V = x;
+}, V = y;

package/dist/stacking-group.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -41,7 +42,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -60,7 +63,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const g = (param)=>{
-    let { moreItemsStyle: e , stacked: i = !0 , maxItems: o = 1 / 0 , children: t  } = param;
+    let { moreItemsStyle: e, stacked: i = !0, maxItems: o = 1 / 0, children: t } = param;
     const s = (0, _themevariantcontext.useIsInverseVariant)(), n = _react.Children.count(t), a = n - o + 1, p = i ? -8 : 8, c = e.size;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
         space: p,

package/dist/stepper.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -5,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return te;
+        return re;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -16,7 +17,6 @@ const _hooks = require("./hooks.js");
 const _iconsuccess = /*#__PURE__*/ _interop_require_default(require("./icons/icon-success.js"));
 const _steppercssmistica = require("./stepper.css-mistica.js");
 const _css = require("./utils/css.js");
-const _dynamic = require("@vanilla-extract/dynamic");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 function _interop_require_default(obj) {
@@ -45,7 +45,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -116,23 +118,23 @@ function _object_spread_props(target, source) {
     return target;
 }
 const J = (param)=>{
-    let { steps: n , currentIndex: m , "aria-label": f , dataAttributes: v  } = param;
-    const { textPresets: g  } = (0, _hooks.useTheme)(), { isDesktopOrBigger: S  } = (0, _hooks.useScreenSize)(), { height: b , ref: N  } = (0, _hooks.useElementDimensions)(), x = b, [a, A] = _react.useState(Math.ceil(m)), [s, y] = _react.useState(!1);
+    let { steps: n, currentIndex: m, "aria-label": v, dataAttributes: f } = param;
+    const { textPresets: g } = (0, _hooks.useTheme)(), { isDesktopOrBigger: S } = (0, _hooks.useScreenSize)(), { height: b, ref: N } = (0, _hooks.useElementDimensions)(), x = b, [a, A] = _react.useState(Math.ceil(m)), [i, y] = _react.useState(!1);
     return _react.useEffect(()=>{
-        const i = Math.ceil(m);
-        a !== i && (y(i < a), A(i));
+        const s = Math.ceil(m);
+        a !== s && (y(s < a), A(s));
     }, [
         m,
         n,
         a
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: _steppercssmistica.stepper,
-        style: (0, _dynamic.assignInlineVars)({
+        style: (0, _css.applyCssVars)({
             [_steppercssmistica.vars.stepperMinHeight]: (0, _css.pxToRem)(40 + x)
         })
-    }, (0, _dom.getPrefixedDataAttributes)(v, "Stepper")), {
-        children: n.map((i, t)=>{
-            const r = t === a, k = t === n.length - 1, c = t < a, p = t === a - 1;
+    }, (0, _dom.getPrefixedDataAttributes)(f, "Stepper")), {
+        children: n.map((s, t)=>{
+            const r = t === a, C = t === n.length - 1, c = t < a, p = t === a - 1;
             return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -141,18 +143,18 @@ const J = (param)=>{
                         "aria-valuenow": r ? t + 1 : void 0,
                         "aria-valuemin": 1,
                         "aria-valuemax": n.length,
-                        "aria-valuetext": i,
-                        "aria-label": f,
+                        "aria-valuetext": s,
+                        "aria-label": v,
                         children: [
                             c ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_steppercssmistica.stepIconNumber, {
-                                    [_steppercssmistica.iconAnimation]: p && !s
+                                    [_steppercssmistica.iconAnimation]: p && !i
                                 }),
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccess.default, {
                                     color: _skincontractcssmistica.vars.colors.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !p || s
+                                    skipAnimation: !p || i
                                 })
                             }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_steppercssmistica.stepIconNumber, _steppercssmistica.number, {
@@ -174,19 +176,19 @@ const J = (param)=>{
                                     as: "span",
                                     regular: !0,
                                     color: c || r ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
-                                    children: i
+                                    children: s
                                 })
                             })
                         ]
                     }),
-                    !k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    !C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _steppercssmistica.bar,
                         "aria-hidden": "true",
                         children: (c || r) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: (0, _classnames.default)({
-                                [_steppercssmistica.barFilled]: s && r || c,
-                                [_steppercssmistica.barFilledAnimation]: p && !s,
-                                [_steppercssmistica.barFilledReverseAnimation]: r && s
+                                [_steppercssmistica.barFilled]: i && r || c,
+                                [_steppercssmistica.barFilledAnimation]: p && !i,
+                                [_steppercssmistica.barFilledReverseAnimation]: r && i
                             })
                         })
                     })
@@ -194,4 +196,4 @@ const J = (param)=>{
             }, t);
         })
     }));
-}, te = J;
+}, re = J;

package/dist/switch-component.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -44,7 +45,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -115,7 +118,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 const $ = (e)=>{
-    const { isIos: l  } = (0, _hooks.useTheme)(), o = (0, _hooks.useAriaId)(e["aria-labelledby"]), { defaultValue: u , value: d , onChange: a , focusableRef: b , disabled: t  } = (0, _formcontext.useControlProps)({
+    const { isIos: l } = (0, _hooks.useTheme)(), o = (0, _hooks.useAriaId)(e["aria-labelledby"]), { defaultValue: u, value: d, onChange: a, focusableRef: b, disabled: t } = (0, _formcontext.useControlProps)({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,

package/dist/tab-focus.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -32,7 +33,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -59,7 +62,7 @@ const e = "mistica-tab-navigation", m = `
 `;
 let t = !1;
 const f = (param)=>{
-    let { children: i , disabled: o  } = param;
+    let { children: i, disabled: o } = param;
     return _react.useEffect(()=>{
         if (o) return;
         if (t) {

package/dist/tabs.css-mistica.js

@@ -13,34 +13,46 @@ _export(exports, {
         return v;
     },
     icon: function() {
-        return y;
+        return e;
     },
     inner: function() {
-        return _;
+        return y;
     },
     outer: function() {
-        return a;
+        return _;
     },
     outerBorder: function() {
-        return e;
+        return r;
+    },
+    outerBorderInverse: function() {
+        return a;
+    },
+    tabHover: function() {
+        return l;
     },
     tabSelectionVariants: function() {
-        return b;
+        return o;
     },
     tabVariants: function() {
-        return l;
+        return t;
     },
     tabsContainer: function() {
-        return o;
+        return b;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tabs.css.ts.vanilla.css-mistica.js");
-var v = "_1y2v1nfb9 _1y2v1nfb5 _1y2v1nfev _1y2v1nffp _1y2v1nfcg _1y2v1nf47", y = "lgofm1g", _ = "lgofm13", a = "lgofm12 _1y2v1nfdl _1y2v1nfbx _1y2v1nfb4", e = "lgofm10", b = {
+var v = "_1y2v1nfb9 _1y2v1nfb5 _1y2v1nfev _1y2v1nffp _1y2v1nfcg", e = "lgofm1q", y = "lgofm14", _ = "lgofm13 _1y2v1nfdl _1y2v1nfbx _1y2v1nfb4", r = "lgofm10", a = "lgofm11", l = {
+    default: "lgofm1a",
+    inverse: "lgofm1b"
+}, o = {
     noSelected: "_1y2v1nf20",
-    selected: "_1y2v1nf1y lgofm1b",
-    selectedAnimating: "_1y2v1nf1y lgofm1c"
-}, l = {
-    default: "lgofm16 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbb _1y2v1nfbs _1y2v1nfbp _1y2v1nfbj _1y2v1nfd9 _1y2v1nfdl _1y2v1nf62",
-    fullWidth: "lgofm18 lgofm16 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbb _1y2v1nfbs _1y2v1nfbp _1y2v1nfbj _1y2v1nfd9 _1y2v1nfdl _1y2v1nf62"
-}, o = "_1y2v1nfdl _1y2v1nfbx _1y2v1nfba";
+    noSelectedInverse: "_1y2v1nf21",
+    selected: "lgofm1g",
+    selectedInverse: "lgofm1h",
+    selectedAnimating: "lgofm1i",
+    selectedAnimatingInverse: "lgofm1j"
+}, t = {
+    default: "lgofm17 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbb _1y2v1nfbs _1y2v1nfbp _1y2v1nfbj _1y2v1nfd9 _1y2v1nfdl _1y2v1nf62",
+    fullWidth: "lgofm19 lgofm17 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbb _1y2v1nfbs _1y2v1nfbp _1y2v1nfbj _1y2v1nfd9 _1y2v1nfdl _1y2v1nf62"
+}, b = "_1y2v1nfdl _1y2v1nfbx _1y2v1nfba";

package/dist/tabs.css.d.ts

@@ -1,8 +1,10 @@
 export declare const outerBorder: string;
+export declare const outerBorderInverse: string;
 export declare const outer: string;
 export declare const inner: string;
 export declare const tabsContainer: string;
 export declare const tabVariants: Record<"default" | "fullWidth", string>;
-export declare const tabSelectionVariants: Record<"noSelected" | "selected" | "selectedAnimating", string>;
+export declare const tabHover: Record<"inverse" | "default", string>;
+export declare const tabSelectionVariants: Record<"noSelected" | "noSelectedInverse" | "selected" | "selectedInverse" | "selectedAnimating" | "selectedAnimatingInverse", string>;
 export declare const icon: string;
 export declare const animatedLine: string;

package/dist/tabs.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -5,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return ie;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +20,8 @@ const _platform = require("./utils/platform.js");
 const _dom = require("./utils/dom.js");
 const _tabscssmistica = require("./tabs.css-mistica.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _themevariantcontext = require("./theme-variant-context.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -45,7 +48,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -115,8 +120,8 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
-    switch(i){
+const u = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, F = (o)=>{
+    switch(o){
         case 1:
         case 2:
         case 3:
@@ -124,21 +129,21 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
         default:
             return "default";
     }
-}, C = (param)=>{
-    let { selectedIndex: i , onChange: y , tabs: u , dataAttributes: T  } = param;
-    const { textPresets: r  } = (0, _hooks.useTheme)(), l = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), b = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (o, c)=>{
-        const s = document.querySelector(`[id='${l}'] [data-tabindex="${o}"]`), n = document.querySelector(`[id='${l}'] [data-tabindex="${c}"]`), e = b.current, a = h.current;
-        s && n && e && a && (L(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.transition = `transform ${f}ms, width ${f}ms`, e.style.width = `${n.offsetWidth}px`, e.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`;
+}, U = (param)=>{
+    let { selectedIndex: o, onChange: I, tabs: b, dataAttributes: T } = param;
+    const { textPresets: n } = (0, _hooks.useTheme)(), m = (0, _hooks.useAriaId)(), { ref: N } = (0, _hooks.useElementDimensions)(), h = _react.useRef(null), p = _react.useRef(null), [v, g] = _react.useState(!1), r = (0, _themevariantcontext.useIsInverseVariant)(), S = (c, d)=>{
+        const s = document.querySelector(`[id='${m}'] [data-tabindex="${c}"]`), l = document.querySelector(`[id='${m}'] [data-tabindex="${d}"]`), e = h.current, a = p.current;
+        s && l && e && a && (g(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.transition = `transform ${u}ms, width ${u}ms`, e.style.width = `${l.offsetWidth}px`, e.style.transform = `translate(${l.offsetLeft - a.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
-            e.style.transition = "", e.style.display = "none", L(!1);
-        }, f));
+            e.style.transition = "", e.style.display = "none", g(!1);
+        }, u));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        id: l,
+        id: m,
         role: "tablist",
-        ref: A,
-        className: _tabscssmistica.outerBorder
+        ref: N,
+        className: r ? _tabscssmistica.outerBorderInverse : _tabscssmistica.outerBorder
     }, (0, _dom.getPrefixedDataAttributes)(T, "Tabs")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
             fullWidth: !0,
@@ -146,28 +151,28 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                 className: _tabscssmistica.outer,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: h,
+                        ref: p,
                         className: _tabscssmistica.inner,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _tabscssmistica.tabsContainer,
-                            children: u.map((param, e)=>{
-                                let { text: o , trackingEvent: c , icon: s , "aria-controls": n  } = param;
-                                const a = e === i;
+                            children: b.map((param, e)=>{
+                                let { text: c, trackingEvent: d, icon: s, "aria-controls": l } = param;
+                                const a = e === o;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                                     dataAttributes: {
                                         "component-name": "Tab",
                                         tabindex: e
                                     },
-                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[q(u.length)], a ? p ? _tabscssmistica.tabSelectionVariants.selectedAnimating : _tabscssmistica.tabSelectionVariants.selected : _tabscssmistica.tabSelectionVariants.noSelected),
+                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[F(b.length)], a ? v ? r ? _tabscssmistica.tabSelectionVariants.selectedAnimatingInverse : _tabscssmistica.tabSelectionVariants.selectedAnimating : r ? _tabscssmistica.tabSelectionVariants.selectedInverse : _tabscssmistica.tabSelectionVariants.selected : r ? _tabscssmistica.tabSelectionVariants.noSelectedInverse : _tabscssmistica.tabSelectionVariants.noSelected, r ? _tabscssmistica.tabHover.inverse : _tabscssmistica.tabHover.default),
                                     onPress: ()=>{
-                                        !p && i !== e && (y(e), N(i, e));
+                                        !v && o !== e && (I(e), S(o, e));
                                     },
-                                    trackingEvent: c,
+                                    trackingEvent: d,
                                     role: "tab",
-                                    "aria-controls": n,
+                                    "aria-controls": l,
                                     "aria-selected": a ? "true" : "false",
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                        space: s && o ? 8 : 0,
+                                        space: s && c ? 8 : 0,
                                         alignItems: "center",
                                         children: [
                                             s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -176,16 +181,16 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                                             }),
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                                 as: "div",
-                                                desktopSize: r.tabsLabel.size.desktop,
-                                                mobileSize: r.tabsLabel.size.mobile,
-                                                desktopLineHeight: r.tabsLabel.lineHeight.desktop,
-                                                mobileLineHeight: r.tabsLabel.lineHeight.mobile,
-                                                weight: r.tabsLabel.weight,
+                                                desktopSize: n.tabsLabel.size.desktop,
+                                                mobileSize: n.tabsLabel.size.mobile,
+                                                desktopLineHeight: n.tabsLabel.lineHeight.desktop,
+                                                mobileLineHeight: n.tabsLabel.lineHeight.mobile,
+                                                weight: n.tabsLabel.weight,
                                                 color: "inherit",
                                                 wordBreak: !1,
                                                 textAlign: "center",
                                                 hyphens: "auto",
-                                                children: o
+                                                children: c
                                             })
                                         ]
                                     })
@@ -194,11 +199,14 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: b,
-                        className: _tabscssmistica.animatedLine
+                        ref: h,
+                        className: _tabscssmistica.animatedLine,
+                        style: {
+                            background: r ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated
+                        }
                     })
                 ]
             })
         })
     }));
-}, Y = C;
+}, ie = U;

package/dist/tag.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -76,9 +77,9 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const { colors: r  } = _skincontractcssmistica.vars, k = (param)=>{
-    let { Icon: o , children: s , dataAttributes: c , type: g = "promo"  } = param;
-    const { textPresets: l  } = (0, _hooks.useTheme)(), i = (0, _themevariantcontext.useThemeVariant)(), t = i === "inverse";
+const { colors: r } = _skincontractcssmistica.vars, k = (param)=>{
+    let { Icon: o, children: s, dataAttributes: c, type: g = "promo" } = param;
+    const { textPresets: l } = (0, _hooks.useTheme)(), i = (0, _themevariantcontext.useThemeVariant)(), t = i === "inverse";
     if (!s) return null;
     const p = {
         // [textColor, inverseTextColor, backgroundColor]

package/dist/text-field-base.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -54,7 +55,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -152,7 +155,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
-    var { error: c , helperText: T , label: n , inputProps: m , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: S , inputComponent: g , prefix: h , startIcon: e , endIcon: a , endIconOverlay: L , shrinkLabel: B , multiline: x = !1 , focus: C , fieldRef: j , maxLength: p , id: z , autoComplete: D , fullWidth: G  } = _param, r = _object_without_properties(_param, [
+    var { error: c, helperText: T, label: n, inputProps: m, inputRef: y, defaultValue: o, value: t, onFocus: u, onBlur: S, inputComponent: g, prefix: h, startIcon: e, endIcon: a, endIconOverlay: L, shrinkLabel: B, multiline: x = !1, focus: C, fieldRef: j, maxLength: p, id: z, autoComplete: D, fullWidth: G } = _param, r = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -177,7 +180,7 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
         "fullWidth"
     ]);
     var _ref;
-    const N = (0, _hooks.useAriaId)(z), [f, d] = _react.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: K  } = (0, _hooks.useScreenSize)(), [M, O] = _react.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = B || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [J, Q] = _react.useState("baseline");
+    const N = (0, _hooks.useAriaId)(z), [f, d] = _react.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: K } = (0, _hooks.useScreenSize)(), [M, O] = _react.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = B || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [J, Q] = _react.useState("baseline");
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         (0, _platform.isSafari)() && Q("initial");
     }, []), _react.useEffect(()=>{
@@ -287,11 +290,11 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
         ]
     });
 }), Ie = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), De = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
-    var { getSuggestions: c , id: T  } = _param, n = _object_without_properties(_param, [
+    var { getSuggestions: c, id: T } = _param, n = _object_without_properties(_param, [
         "getSuggestions",
         "id"
     ]);
-    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: S  } = (0, _hooks.useTheme)(), g = (0, _hooks.useAriaId)(T), h = (0, _hooks.useAriaId)();
+    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u, texts: S } = (0, _hooks.useTheme)(), g = (0, _hooks.useAriaId)(T), h = (0, _hooks.useAriaId)();
     if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
         fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, n), {
@@ -307,7 +310,7 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: (e, param)=>{
-                    let { newValue: a  } = param;
+                    let { newValue: a } = param;
                     var L;
                     e.target = _object_spread_props(_object_spread({}, e.target), {
                         value: a
@@ -321,13 +324,13 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
                 })),
             suggestions: y,
             onSuggestionsFetchRequested: (param)=>{
-                let { value: e  } = param;
+                let { value: e } = param;
                 return o(c(e));
             },
             onSuggestionsClearRequested: ()=>o([]),
             getSuggestionValue: (e)=>e,
             renderSuggestion: (e, param)=>/* @__PURE__ */ {
-                let { isHighlighted: a  } = param;
+                let { isHighlighted: a } = param;
                 return (0, _jsxruntime.jsx)("div", {
                     role: "menuitem",
                     className: (0, _classnames.default)(_textfieldbasecssmistica.menuItem, {

package/dist/text-field-components.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -54,7 +55,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -125,8 +128,8 @@ function _object_spread_props(target, source) {
     return target;
 }
 const G = (param)=>{
-    let { shrinkLabel: l , forId: s , inputState: r , error: o , children: i , style: n , optional: d  } = param;
-    const m = l || r === "focused" || r === "filled", [v, b] = _react.useState("initial"), { texts: N  } = (0, _hooks.useTheme)();
+    let { shrinkLabel: l, forId: s, inputState: r, error: o, children: i, style: n, optional: d } = param;
+    const m = l || r === "focused" || r === "filled", [v, b] = _react.useState("initial"), { texts: N } = (0, _hooks.useTheme)();
     _react.useEffect(()=>{
         const T = setTimeout(()=>{
             process.env.NODE_ENV !== "test" && b("transform 150ms, width 150ms");
@@ -161,7 +164,7 @@ const G = (param)=>{
         ]
     });
 }, J = (param)=>{
-    let { leftText: l , rightText: s , error: r  } = param;
+    let { leftText: l, rightText: s, error: r } = param;
     const o = (0, _themevariantcontext.useIsInverseVariant)(), i = o ? _skincontractcssmistica.vars.colors.textPrimaryInverse : r ? _skincontractcssmistica.vars.colors.error : _skincontractcssmistica.vars.colors.textSecondary, n = o ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -186,7 +189,7 @@ const G = (param)=>{
         ]
     });
 }, K = (param)=>/* @__PURE__ */ {
-    let { multiline: l , disabled: s , children: r , helperText: o , className: i , fieldRef: n , fullWidth: d , readOnly: m  } = param;
+    let { multiline: l, disabled: s, children: r, helperText: o, className: i, fieldRef: n, fullWidth: d, readOnly: m } = param;
     return (0, _jsxruntime.jsxs)("div", {
         className: (0, _classnames.default)(_textfieldcomponentscssmistica.fieldContainer, d ? _textfieldcomponentscssmistica.fullWidth : _textfieldcomponentscssmistica.normalWidth, {
             [_textfieldcomponentscssmistica.disabled]: s

package/dist/text-field.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -36,7 +37,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -143,7 +146,7 @@ const C = (c, t, r, i)=>{
         c
     ]);
 }, H = /*#__PURE__*/ _react.forwardRef((_param, g)=>{
-    var { disabled: c , error: t , helperText: r , name: i , optional: m , validate: a , onChangeValue: p , onChange: d , value: R , defaultValue: T , onBlur: l , onFocus: u , onPress: x  } = _param, s = _object_without_properties(_param, [
+    var { disabled: c, error: t, helperText: r, name: i, optional: m, validate: a, onChangeValue: p, onChange: d, value: R, defaultValue: T, onBlur: l, onFocus: u, onPress: x } = _param, s = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",