@telefonica/mistica 12.11.1 → 12.13.0

package/dist/sprinkles.css.d.ts

@@ -791,31 +791,6 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 [x: `var(--${string})`]: {
                     defaultClass: string;
                 };
-                [x: `var(--${string}, ${string})`]: {
-                    defaultClass: string;
-                };
-                [x: `var(--${string}, ${number})`]: {
-                    defaultClass: string;
-                };
-                transparent: {
-                    defaultClass: string;
-                };
-                inherit: {
-                    defaultClass: string;
-                };
-            };
-        };
-        backgroundColor: {
-            values: {
-                [x: `var(--${string})`]: {
-                    defaultClass: string;
-                };
-                [x: `var(--${string}, ${string})`]: {
-                    defaultClass: string;
-                };
-                [x: `var(--${string}, ${number})`]: {
-                    defaultClass: string;
-                };
                 transparent: {
                     defaultClass: string;
                 };

package/dist/stepper.css-mistica.js

@@ -16,13 +16,13 @@ _export(exports, {
         return r;
     },
     barFilledAnimation: function() {
-        return a;
+        return y;
     },
     barFilledReverseAnimation: function() {
         return f;
     },
     currentNumber: function() {
-        return y;
+        return a;
     },
     iconAnimation: function() {
         return e;
@@ -31,23 +31,23 @@ _export(exports, {
         return m;
     },
     step: function() {
-        return h;
+        return t;
     },
     stepIconNumber: function() {
         return i;
     },
     stepper: function() {
-        return b;
+        return h;
     },
     textContainer: function() {
-        return t;
+        return q;
     },
     vars: function() {
-        return q;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./stepper.css.ts.vanilla.js");
-var _ = "_14h93mqk _1y2v1nfa1 _1y2v1nf9i _1y2v1nfbc _1y2v1nfbh", r = "_14h93mqm _1y2v1nfa1 _1y2v1nf9i _1y2v1nfbf _1y2v1nfbh", a = "_14h93mqn", f = "_14h93mqp _1y2v1nf9k", y = "_14h93mqf", e = "_14h93mqc", m = "_14h93mqe _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k _1y2v1nfba", h = "_14h93mq9 _1y2v1nf76 _1y2v1nf7c _1y2v1nf7h _1y2v1nf7q", i = "_14h93mqb _1y2v1nf76 _1y2v1nf7b", b = "_14h93mq7 _1y2v1nf7b _1y2v1nfay", t = "_14h93mqh _1y2v1nf77", q = {
+var _ = "_14h93mqk _1y2v1nf7o _1y2v1nf75 _1y2v1nf8z _1y2v1nf94", r = "_14h93mqm _1y2v1nf7o _1y2v1nf75 _1y2v1nf92 _1y2v1nf94", y = "_14h93mqn", f = "_14h93mqp _1y2v1nf77", a = "_14h93mqf", e = "_14h93mqc", m = "_14h93mqe _1y2v1nf4y _1y2v1nf5d _1y2v1nf57 _1y2v1nf8x", t = "_14h93mq9 _1y2v1nf4t _1y2v1nf4z _1y2v1nf54 _1y2v1nf5d", i = "_14h93mqb _1y2v1nf4t _1y2v1nf4y", h = "_14h93mq7 _1y2v1nf4y _1y2v1nf8l", q = "_14h93mqh _1y2v1nf4u", o = {
     stepperMinHeight: "var(--_14h93mq0)"
 };

package/dist/stepper.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 declare type StepperProps = {
     steps: ReadonlyArray<string>;
     currentIndex: number;
     'aria-label'?: string;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 declare const Stepper: React.FC<StepperProps>;
 export default Stepper;

package/dist/stepper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return X;
+        return _;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -16,6 +16,7 @@ var _iconSuccessJs = /*#__PURE__*/ _interopRequireDefault(require("./icons/icon-
 var _stepperCssMisticaJs = require("./stepper.css-mistica.js");
 var _cssJs = require("./utils/css.js");
 var _dynamic = require("@vanilla-extract/dynamic");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -74,14 +75,54 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-var X = function X(param) {
-    var n = param.steps, a = param.currentIndex, v = param["aria-label"];
-    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, ref1 = (0, _hooksJs.useScreenSize)(), f = ref1.isDesktopOrBigger, ref2 = (0, _hooksJs.useElementDimensions)(), g = ref2.height, b = ref2.ref, N = g, m = _react.useRef(a), s = m.current > a, S = (0, _dynamic.assignInlineVars)(_defineProperty({}, _stepperCssMisticaJs.vars.stepperMinHeight, (0, _cssJs.pxToRem)(40 + N)));
-    return a !== m.current && (m.current = a), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+var _ = function _(param) {
+    var n = param.steps, a = param.currentIndex, v = param["aria-label"], f = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, ref1 = (0, _hooksJs.useScreenSize)(), g = ref1.isDesktopOrBigger, ref2 = (0, _hooksJs.useElementDimensions)(), b = ref2.height, N = ref2.ref, S = b, m = _react.useRef(a), s = m.current > a, A = (0, _dynamic.assignInlineVars)(_defineProperty({}, _stepperCssMisticaJs.vars.stepperMinHeight, (0, _cssJs.pxToRem)(40 + S)));
+    return a !== m.current && (m.current = a), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
         className: _stepperCssMisticaJs.stepper,
-        style: S,
+        style: A
+    }, (0, _domJs.getPrefixedDataAttributes)(f, "Stepper")), {
         children: n.map(function(p, i) {
-            var r = i === a, A = i === n.length - 1, o = i < a, l = i === a - 1;
+            var r = i === a, y = i === n.length - 1, o = i < a, l = i === a - 1;
             var _obj;
             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_react.Fragment, {
                 children: [
@@ -112,9 +153,9 @@ var X = function X(param) {
                                     children: i + 1
                                 })
                             }),
-                            f && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                            g && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                                 className: _stepperCssMisticaJs.textContainer,
-                                ref: b,
+                                ref: N,
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                     as: "span",
@@ -125,7 +166,7 @@ var X = function X(param) {
                             })
                         ]
                     }),
-                    !A && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    !y && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                         className: _stepperCssMisticaJs.bar,
                         "aria-hidden": "true",
                         children: (o || r) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -135,5 +176,5 @@ var X = function X(param) {
                 ]
             }, i);
         })
-    });
+    }));
 };

package/dist/stepper.js.flow

@@ -1,10 +1,12 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare type StepperProps = {
   steps: $ReadOnlyArray<string>,
   currentIndex: number,
   "aria-label"?: string,
+  dataAttributes?: DataAttributes,
 };
 declare var Stepper: React.ComponentType<StepperProps>;
 declare export default typeof Stepper;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ballVariants: function() {
+        return n;
+    },
+    barVariants: function() {
+        return v;
+    },
+    checkboxVariants: function() {
+        return p;
+    },
+    container: function() {
+        return f;
+    },
+    disabled: function() {
+        return q;
+    },
+    switchCheckboxContainerVariants: function() {
+        return y;
+    },
+    switchCheckboxLabel: function() {
+        return _;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./switch-component.css.ts.vanilla.js");
+var n = {
+    default: "q0hp3as q0hp3aq q0hp3ap _1y2v1nf4u _1y2v1nfac _1y2v1nf50 _1y2v1nf8x",
+    ios: "q0hp3at q0hp3ar q0hp3ap _1y2v1nf4u _1y2v1nfac _1y2v1nf50 _1y2v1nf8x",
+    checked: "q0hp3au q0hp3aq q0hp3ap _1y2v1nf4u _1y2v1nfac _1y2v1nf50 _1y2v1nf8x",
+    checkedIos: "q0hp3av q0hp3ar q0hp3ap _1y2v1nf4u _1y2v1nfac _1y2v1nf50 _1y2v1nf8x"
+}, v = {
+    default: "q0hp3ai q0hp3ah _1y2v1nf50",
+    ios: "q0hp3aj q0hp3ah _1y2v1nf50",
+    checked: "q0hp3ak q0hp3ah _1y2v1nf50",
+    checkedIos: "q0hp3al q0hp3ah _1y2v1nf50"
+}, p = {
+    default: "q0hp3a6 _1y2v1nf52 _1y2v1nf93",
+    ios: "q0hp3a7 _1y2v1nf52 _1y2v1nf93",
+    disabled: "q0hp3a8 _1y2v1nf52 _1y2v1nf93",
+    disabledIos: "q0hp3a9 _1y2v1nf52 _1y2v1nf93"
+}, f = "q0hp3am", q = "q0hp3an", y = {
+    default: "q0hp3ac q0hp3ab _1y2v1nf4t",
+    ios: "q0hp3ad q0hp3ab _1y2v1nf4t"
+}, _ = "q0hp3af _1y2v1nf50 _1y2v1nf94";

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

@@ -0,0 +1,14 @@
+export declare const vars: {
+    top: import("@vanilla-extract/private").CSSVarFunction;
+    left: import("@vanilla-extract/private").CSSVarFunction;
+    transformOrigin: import("@vanilla-extract/private").CSSVarFunction;
+    minWidth: import("@vanilla-extract/private").CSSVarFunction;
+    maxHeight: import("@vanilla-extract/private").CSSVarFunction;
+};
+export declare const checkboxVariants: Record<"default" | "disabled" | "ios" | "disabledIos", string>;
+export declare const switchCheckboxContainerVariants: Record<"default" | "ios", string>;
+export declare const switchCheckboxLabel: string;
+export declare const barVariants: Record<"default" | "ios" | "checked" | "checkedIos", string>;
+export declare const container: string;
+export declare const disabled: string;
+export declare const ballVariants: Record<"default" | "ios" | "checked" | "checkedIos", string>;

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

@@ -0,0 +1,43 @@
+// @flow
+
+declare export var vars: {
+  top: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
+  left: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
+  transformOrigin: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+  minWidth: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+  maxHeight: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};
+declare export var checkboxVariants: {
+  default: string,
+  disabled: string,
+  ios: string,
+  disabledIos: string,
+};
+declare export var switchCheckboxContainerVariants: {
+  default: string,
+  ios: string,
+};
+declare export var switchCheckboxLabel: string;
+declare export var barVariants: {
+  default: string,
+  ios: string,
+  checked: string,
+  checkedIos: string,
+};
+declare export var container: string;
+declare export var disabled: string;
+declare export var ballVariants: {
+  default: string,
+  ios: string,
+  checked: string,
+  checkedIos: string,
+};

package/dist/switch-component.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return s;
+    }
+});
+var s = "";

package/dist/switch-component.js

@@ -9,15 +9,14 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
 var _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
 var _keyCodesJs = require("./utils/key-codes.js");
 var _formContextJs = require("./form-context.js");
-var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _textJs = require("./text.js");
 var _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
 var _hooksJs = require("./hooks.js");
 var _domJs = require("./utils/dom.js");
+var _switchComponentCssMisticaJs = require("./switch-component.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -161,97 +160,37 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var u = "0.2s ease-in 0s", P = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.colors, t = param.isIos;
-    return {
-        checkbox: {
-            display: "inline-block",
-            padding: t ? 0 : 4,
-            cursor: "pointer"
-        },
-        switchCheckboxContainer: {
-            position: "relative",
-            width: t ? 51 : 34,
-            userSelect: "none"
-        },
-        switchCheckboxLabel: {
-            display: "block",
-            overflow: "hidden",
-            borderRadius: 40,
-            "& > *": {
-                pointerEvents: "none"
-            }
-        },
-        bar: {
-            display: "block",
-            background: function background(param) {
-                var d = param.isChecked;
-                return d ? t ? e.controlActivated : e.toggleAndroidBackgroundActive : e.control;
-            },
-            transition: "background ".concat(u),
-            height: t ? 31 : 14
-        },
-        ball: {
-            position: "absolute",
-            top: t ? 6 : 1,
-            bottom: 0,
-            right: function right(param) {
-                var d = param.isChecked;
-                return d ? t ? 6 : 1 : t ? 26 : 21;
-            },
-            display: "block",
-            width: t ? 27 : 20,
-            height: t ? 27 : 20,
-            margin: -4,
-            backgroundColor: function backgroundColor(param) {
-                var d = param.isChecked;
-                return t ? e.iosControlKnob : d ? e.controlActivated : e.toggleAndroidInactive;
-            },
-            borderRadius: "50%",
-            transition: "all ".concat(u),
-            boxShadow: t ? "1px 2px 4px rgba(0, 0, 0, 0.3)" : "1px 1px 2px rgba(0, 0, 0, 0.3)"
-        },
-        container: {
-            cursor: "default"
-        },
-        disabled: {
-            cursor: "default",
-            opacity: 0.5
-        }
-    };
-}), B = function B(e) {
-    var t = (0, _hooksJs.useAriaId)(e["aria-labelledby"]), ref = (0, _formContextJs.useControlProps)({
+var B = function B(e) {
+    var ref = (0, _hooksJs.useTheme)(), r = ref.isIos, o = (0, _hooksJs.useAriaId)(e["aria-labelledby"]), ref1 = (0, _formContextJs.useControlProps)({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), d = ref.defaultValue, a = ref.value, r = ref.onChange, f = ref.focusableRef, c = ref.disabled, ref1 = _slicedToArray(_react.useState(!!d), 2), l = ref1[0], k = ref1[1], i = P({
-        isChecked: a != null ? a : l
-    }), g = _react.useMemo(function() {
-        return process.env.NODE_ENV === "test" ? function(o) {
-            return r == null ? void 0 : r(o);
-        } : (0, _debounce.default)(function(o) {
-            r == null || r(o);
+    }), b = ref1.defaultValue, a = ref1.value, t = ref1.onChange, u = ref1.focusableRef, i = ref1.disabled, ref2 = _slicedToArray(_react.useState(!!b), 2), c = ref2[0], k = ref2[1], l = a != null ? a : c, x = _react.useMemo(function() {
+        return process.env.NODE_ENV === "test" ? function(s) {
+            return t == null ? void 0 : t(s);
+        } : (0, _debounce.default)(function(s) {
+            t == null || t(s);
         }, 300);
     }, [
-        r
-    ]), s = function s() {
-        a !== void 0 ? r == null || r(!a) : (k(!l), g(!l));
-    }, p = function p(o) {
-        o.keyCode === _keyCodesJs.SPACE && (o.preventDefault(), o.stopPropagation(), s());
-    }, b = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: (0, _classnames.default)(i.checkbox, _defineProperty({}, i.disabled, c)),
+        t
+    ]), n = function n() {
+        a !== void 0 ? t == null || t(!a) : (k(!c), x(!c));
+    }, C = function C(s) {
+        s.keyCode === _keyCodesJs.SPACE && (s.preventDefault(), s.stopPropagation(), n());
+    }, m = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        className: _switchComponentCssMisticaJs.checkboxVariants[r ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            className: i.switchCheckboxContainer,
+            className: _switchComponentCssMisticaJs.switchCheckboxContainerVariants[r ? "ios" : "default"],
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                className: i.switchCheckboxLabel,
+                className: _switchComponentCssMisticaJs.switchCheckboxLabel,
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
-                        className: i.bar
+                        className: _switchComponentCssMisticaJs.barVariants[r ? l ? "checkedIos" : "ios" : l ? "checked" : "default"]
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
-                        className: i.ball
+                        className: _switchComponentCssMisticaJs.ballVariants[r ? l ? "checkedIos" : "ios" : l ? "checked" : "default"]
                     })
                 ]
             })
@@ -259,33 +198,33 @@ var u = "0.2s ease-in 0s", P = (0, _jssJs.createUseStyles)(function(param) {
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", _objectSpreadProps(_objectSpread({
         role: "switch",
-        "aria-checked": a != null ? a : l,
-        onClick: c ? void 0 : s,
-        onKeyDown: c ? void 0 : p,
-        tabIndex: c ? void 0 : 0,
-        ref: f,
-        className: i.container,
-        "aria-disabled": c,
-        "aria-labelledby": t
-    }, (0, _domJs.getPrefixedDataAttributes)(e.dataAttributes)), {
+        "aria-checked": a != null ? a : c,
+        onClick: i ? void 0 : n,
+        onKeyDown: i ? void 0 : C,
+        tabIndex: i ? void 0 : 0,
+        ref: u,
+        className: _switchComponentCssMisticaJs.container,
+        "aria-disabled": i,
+        "aria-labelledby": o
+    }, (0, _domJs.getPrefixedDataAttributes)(e.dataAttributes, "Switch")), {
         children: e.render ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_jsxRuntimeJs.Fragment, {
             children: e.render({
-                controlElement: b,
-                labelId: t,
-                disabled: !!c,
-                checked: a != null ? a : l
+                controlElement: m,
+                labelId: o,
+                disabled: !!i,
+                checked: a != null ? a : c
             })
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
             space: 16,
             alignItems: "center",
             children: [
-                b,
+                m,
                 e.children && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     regular: !0,
                     as: "div",
-                    id: t,
+                    id: o,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
-                        className: c ? i.disabled : "",
+                        className: i ? _switchComponentCssMisticaJs.disabled : "",
                         children: e.children
                     })
                 })

package/dist/tabs.css-mistica.js

@@ -34,17 +34,17 @@ _export(exports, {
         return r;
     },
     tabsContainer: function() {
-        return l;
+        return i;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tabs.css.ts.vanilla.js");
-var v = "_1y2v1nf7a _1y2v1nf77 _1y2v1nfbx _1y2v1nfcp _1y2v1nfa0 _1y2v1nf38", y = "lgofm1m", _ = "lgofm14 _1y2v1nf77 _1y2v1nfbx _1y2v1nfcb _1y2v1nfac", a = "lgofm12 _1y2v1nfa9 _1y2v1nf76 _1y2v1nfbh", o = "lgofm10", t = {
+var v = "_1y2v1nf4x _1y2v1nf4u _1y2v1nf9k _1y2v1nfac _1y2v1nf7n _1y2v1nf38", y = "lgofm1m", _ = "lgofm14 _1y2v1nf4u _1y2v1nf9k _1y2v1nf9y _1y2v1nf7z", a = "lgofm12 _1y2v1nf7w _1y2v1nf4t _1y2v1nf94", o = "lgofm10", t = {
     noSelected: "_1y2v1nf1k",
     selected: "_1y2v1nf1i lgofm1h",
     selectedAnimating: "_1y2v1nf1i lgofm1i"
 }, e = {
-    default: "lgofm17 _1y2v1nf7c _1y2v1nf7q _1y2v1nf7k _1y2v1nf8v _1y2v1nf99 _1y2v1nfa9 _1y2v1nf74 lgofm18",
-    tabs2: "lgofm17 _1y2v1nf7c _1y2v1nf7q _1y2v1nf7k _1y2v1nf8v _1y2v1nf99 _1y2v1nfa9 _1y2v1nf74 lgofm19",
-    tabs3: "lgofm17 _1y2v1nf7c _1y2v1nf7q _1y2v1nf7k _1y2v1nf8v _1y2v1nf99 _1y2v1nfa9 _1y2v1nf74 lgofm1a"
-}, r = "lgofm1e", l = "_1y2v1nfa9 _1y2v1nf7b";
+    default: "lgofm17 _1y2v1nf4z _1y2v1nf5d _1y2v1nf57 _1y2v1nf6i _1y2v1nf6w _1y2v1nf7w _1y2v1nf4s lgofm18",
+    tabs2: "lgofm17 _1y2v1nf4z _1y2v1nf5d _1y2v1nf57 _1y2v1nf6i _1y2v1nf6w _1y2v1nf7w _1y2v1nf4s lgofm19",
+    tabs3: "lgofm17 _1y2v1nf4z _1y2v1nf5d _1y2v1nf57 _1y2v1nf6i _1y2v1nf6w _1y2v1nf7w _1y2v1nf4s lgofm1a"
+}, r = "lgofm1e", i = "_1y2v1nf7w _1y2v1nf4y";

package/dist/tabs.js

@@ -160,8 +160,8 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = function q(a) {
-    switch(a){
+var f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = function q(r) {
+    switch(r){
         case 2:
             return "tabs2";
         case 3:
@@ -170,21 +170,21 @@ var f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = function q(a)
             return "default";
     }
 }, J = function J(param) {
-    var a = param.selectedIndex, A = param.onChange, d = param.tabs, N = param.dataAttributes;
-    var i = (0, _hooksJs.useAriaId)(), ref = (0, _hooksJs.useElementDimensions)(), L = ref.ref, u = _react.useRef(null), b = _react.useRef(null), ref1 = _slicedToArray(_react.useState(!1), 2), h = ref1[0], p = ref1[1], T = function T(o, l) {
-        var e = document.querySelector("#".concat(i, ' [data-tabindex="').concat(o, '"]')), n = document.querySelector("#".concat(i, ' [data-tabindex="').concat(l, '"]')), t = u.current, s = b.current;
-        e && n && t && s && (p(!0), t.style.display = "block", t.style.width = "".concat(e.offsetWidth, "px"), t.style.transform = "translate(".concat(e.offsetLeft - s.scrollLeft, "px, 0)"), Promise.resolve().then(function() {
+    var r = param.selectedIndex, A = param.onChange, d = param.tabs, N = param.dataAttributes;
+    var o = (0, _hooksJs.useAriaId)(), ref = (0, _hooksJs.useElementDimensions)(), T = ref.ref, u = _react.useRef(null), b = _react.useRef(null), ref1 = _slicedToArray(_react.useState(!1), 2), p = ref1[0], h = ref1[1], L = function L(i, l) {
+        var e = document.querySelector("#".concat(o, ' [data-tabindex="').concat(i, '"]')), n = document.querySelector("#".concat(o, ' [data-tabindex="').concat(l, '"]')), t = u.current, s = b.current;
+        e && n && t && s && (h(!0), t.style.display = "block", t.style.width = "".concat(e.offsetWidth, "px"), t.style.transform = "translate(".concat(e.offsetLeft - s.scrollLeft, "px, 0)"), Promise.resolve().then(function() {
             t.style.width = "".concat(n.offsetWidth, "px"), t.style.transform = "translate(".concat(n.offsetLeft - s.scrollLeft, "px, 0)"), t.style.transition = "transform ".concat(f, "ms, width ").concat(f, "ms");
         }), setTimeout(function() {
-            t.style.transition = "", t.style.display = "none", p(!1);
+            t.style.transition = "", t.style.display = "none", h(!1);
         }, f));
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-        id: i,
+        id: o,
         role: "tablist",
-        ref: L,
+        ref: T,
         className: _tabsCssMisticaJs.outerBorder
-    }, (0, _domJs.getPrefixedDataAttributes)(N)), {
+    }, (0, _domJs.getPrefixedDataAttributes)(N, "Tabs")), {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
             fullWidth: !0,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
@@ -196,16 +196,17 @@ var f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = function q(a)
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                             className: _tabsCssMisticaJs.tabsContainer,
                             children: d.map(function(param, t) {
-                                var o = param.text, l = param.trackingEvent, e = param.icon, n = param["aria-controls"];
-                                var s = t === a;
+                                var i = param.text, l = param.trackingEvent, e = param.icon, n = param["aria-controls"];
+                                var s = t === r;
                                 return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_touchableJs.BaseTouchable, {
                                     dataAttributes: {
+                                        "component-name": "Tab",
                                         tabindex: t
                                     },
-                                    className: (0, _classnames.default)(_tabsCssMisticaJs.tabVariants[q(d.length)], s ? h ? _tabsCssMisticaJs.tabSelectionVariants.selectedAnimating : _tabsCssMisticaJs.tabSelectionVariants.selected : _tabsCssMisticaJs.tabSelectionVariants.noSelected, e && _tabsCssMisticaJs.tabWithIcon),
+                                    className: (0, _classnames.default)(_tabsCssMisticaJs.tabVariants[q(d.length)], s ? p ? _tabsCssMisticaJs.tabSelectionVariants.selectedAnimating : _tabsCssMisticaJs.tabSelectionVariants.selected : _tabsCssMisticaJs.tabSelectionVariants.noSelected, e && _tabsCssMisticaJs.tabWithIcon),
                                     disabled: s,
                                     onPress: function onPress() {
-                                        !h && a !== t && (A(t), T(a, t));
+                                        !p && r !== t && (A(t), L(r, t));
                                     },
                                     trackingEvent: l,
                                     role: "tab",
@@ -221,7 +222,7 @@ var f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = function q(a)
                                             color: "inherit",
                                             wordBreak: !1,
                                             textAlign: "center",
-                                            children: o
+                                            children: i
                                         })
                                     ]
                                 }, t);

package/dist/tag.css-mistica.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "tag", {
     enumerable: true,
     get: function() {
-        return _;
+        return y;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tag.css.ts.vanilla.js");
-var _ = "_1wy08671 _1y2v1nf80 _1y2v1nf8e _1y2v1nf7c _1y2v1nf7g _1y2v1nf7q _1y2v1nf7k _1y2v1nfao _1y2v1nf98";
+var y = "_1wy08671 _1y2v1nf5n _1y2v1nf61 _1y2v1nf4z _1y2v1nf53 _1y2v1nf5d _1y2v1nf57 _1y2v1nf8b _1y2v1nf6v";