@telefonica/mistica 16.30.0 → 16.31.0

package/dist/slider.css-mistica.js

@@ -39,13 +39,13 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./slider.css.ts.vanilla.css-mistica.js");
-var n = "v16_30_1j1wlhk1 v16_30_1y2v1nfjf v16_30_1y2v1nfim v16_30_1y2v1nfis v16_30_1y2v1nfj7 v16_30_1y2v1nflt", f = {
-    default: "v16_30_1j1wlhk7 v16_30_1y2v1nfjn v16_30_1y2v1nfk3 v16_30_1y2v1nflc v16_30_1y2v1nf5n",
-    inverse: "v16_30_1j1wlhk7 v16_30_1y2v1nfjn v16_30_1y2v1nfk3 v16_30_1y2v1nflc v16_30_1y2v1nf5p"
-}, y = "v16_30_1j1wlhk2", l = "v16_30_1j1wlhkj v16_30_1y2v1nfin v16_30_1y2v1nfm0", j = "v16_30_1j1wlhkd v16_30_1y2v1nf5z v16_30_1y2v1nflc", r = {
-    default: "v16_30_1j1wlhkg",
-    inverse: "v16_30_1j1wlhkh"
-}, a = "v16_30_1j1wlhk5 v16_30_1y2v1nfin v16_30_1y2v1nfis v16_30_1y2v1nfj7 v16_30_1y2v1nfj1", e = {
-    default: "v16_30_1j1wlhke",
-    inverse: "v16_30_1j1wlhkf"
-}, h = "v16_30_1y2v1nfjf v16_30_1y2v1nfjz v16_30_1y2v1nflq";
+var n = "v16_31_1j1wlhk1 v16_31_1y2v1nfjf v16_31_1y2v1nfim v16_31_1y2v1nfis v16_31_1y2v1nfj7 v16_31_1y2v1nflt", f = {
+    default: "v16_31_1j1wlhk7 v16_31_1y2v1nfjn v16_31_1y2v1nfk3 v16_31_1y2v1nflc v16_31_1y2v1nf5n",
+    inverse: "v16_31_1j1wlhk7 v16_31_1y2v1nfjn v16_31_1y2v1nfk3 v16_31_1y2v1nflc v16_31_1y2v1nf5p"
+}, y = "v16_31_1j1wlhk2", l = "v16_31_1j1wlhkj v16_31_1y2v1nfin v16_31_1y2v1nfm0", j = "v16_31_1j1wlhkd v16_31_1y2v1nf5z v16_31_1y2v1nflc", r = {
+    default: "v16_31_1j1wlhkg",
+    inverse: "v16_31_1j1wlhkh"
+}, a = "v16_31_1j1wlhk5 v16_31_1y2v1nfin v16_31_1y2v1nfis v16_31_1y2v1nfj7 v16_31_1y2v1nfj1", e = {
+    default: "v16_31_1j1wlhke",
+    inverse: "v16_31_1j1wlhkf"
+}, h = "v16_31_1y2v1nfjf v16_31_1y2v1nfjz v16_31_1y2v1nflq";

package/dist/snackbar.css-mistica.js

@@ -57,7 +57,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./snackbar.css.ts.vanilla.css-mistica.js");
-var n = 300, f = "v16_30_o7bjb0g", y = "v16_30_1y2v1nf8r v16_30_1y2v1nfa0 v16_30_1y2v1nfbc v16_30_1y2v1nfcl v16_30_1y2v1nfla v16_30_1y2v1nf8k", r = "v16_30_1y2v1nfis v16_30_1y2v1nfj4 v16_30_1y2v1nfiy", o = "v16_30_1y2v1nfis v16_30_1y2v1nfj4 v16_30_1y2v1nfix v16_30_1y2v1nfj7", a = {
-    centered: "v16_30_o7bjb0l v16_30_1y2v1nfis v16_30_1y2v1nfin v16_30_1y2v1nfj7 v16_30_1y2v1nfj1 v16_30_1y2v1nfmx",
-    topRight: "v16_30_1y2v1nfis v16_30_1y2v1nfin v16_30_1y2v1nfj7 v16_30_1y2v1nfj1 v16_30_1y2v1nfmx v16_30_1y2v1nfm3"
-}, t = "v16_30_o7bjb0o v16_30_1y2v1nfjp v16_30_1y2v1nfk5 v16_30_1y2v1nfis v16_30_1y2v1nfj7 v16_30_1y2v1nfj1 v16_30_1y2v1nflc", b = "v16_30_o7bjb0h", i = "v16_30_o7bjb01 v16_30_1y2v1nfjf v16_30_1y2v1nfis v16_30_1y2v1nfj1", j = "v16_30_o7bjb03 v16_30_1y2v1nfim", p = "v16_30_o7bjb04", s = "v16_30_o7bjb06 v16_30_1y2v1nfio v16_30_1y2v1nflm", e = "v16_30_1y2v1nf66", c = "v16_30_1y2v1nf67", m = "v16_30_o7bjb09";
+var n = 300, f = "v16_31_o7bjb0g", y = "v16_31_1y2v1nf8r v16_31_1y2v1nfa0 v16_31_1y2v1nfbc v16_31_1y2v1nfcl v16_31_1y2v1nfla v16_31_1y2v1nf8k", r = "v16_31_1y2v1nfis v16_31_1y2v1nfj4 v16_31_1y2v1nfiy", o = "v16_31_1y2v1nfis v16_31_1y2v1nfj4 v16_31_1y2v1nfix v16_31_1y2v1nfj7", a = {
+    centered: "v16_31_o7bjb0l v16_31_1y2v1nfis v16_31_1y2v1nfin v16_31_1y2v1nfj7 v16_31_1y2v1nfj1 v16_31_1y2v1nfmx",
+    topRight: "v16_31_1y2v1nfis v16_31_1y2v1nfin v16_31_1y2v1nfj7 v16_31_1y2v1nfj1 v16_31_1y2v1nfmx v16_31_1y2v1nfm3"
+}, t = "v16_31_o7bjb0o v16_31_1y2v1nfjp v16_31_1y2v1nfk5 v16_31_1y2v1nfis v16_31_1y2v1nfj7 v16_31_1y2v1nfj1 v16_31_1y2v1nflc", b = "v16_31_o7bjb0h", i = "v16_31_o7bjb01 v16_31_1y2v1nfjf v16_31_1y2v1nfis v16_31_1y2v1nfj1", j = "v16_31_o7bjb03 v16_31_1y2v1nfim", p = "v16_31_o7bjb04", s = "v16_31_o7bjb06 v16_31_1y2v1nfio v16_31_1y2v1nflm", e = "v16_31_1y2v1nf66", c = "v16_31_1y2v1nf67", m = "v16_31_o7bjb09";

package/dist/spinner.css-mistica.js

@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./spinner.css.ts.vanilla.css-mistica.js");
-var n = "v16_30_1fthc594 v16_30_1y2v1nfja v16_30_1y2v1nfiu", r = "v16_30_1fthc595", a = "v16_30_1y2v1nfja v16_30_1y2v1nfiu", t = "v16_30_1fthc597";
+var n = "v16_31_1fthc594 v16_31_1y2v1nfja v16_31_1y2v1nfiu", r = "v16_31_1fthc595", a = "v16_31_1y2v1nfja v16_31_1y2v1nfiu", t = "v16_31_1fthc597";

package/dist/stack.css-mistica.js

@@ -20,9 +20,9 @@ _export(exports, {
     }
 });
 require("./stack.css.ts.vanilla.css-mistica.js");
-var v = "v16_30_xjgm6d5", _ = "v16_30_xjgm6d4", r = {
-    space: "var(--v16_30_xjgm6d0)",
-    spaceMobile: "var(--v16_30_xjgm6d1)",
-    spaceTablet: "var(--v16_30_xjgm6d2)",
-    spaceDesktop: "var(--v16_30_xjgm6d3)"
+var v = "v16_31_xjgm6d5", _ = "v16_31_xjgm6d4", r = {
+    space: "var(--v16_31_xjgm6d0)",
+    spaceMobile: "var(--v16_31_xjgm6d1)",
+    spaceTablet: "var(--v16_31_xjgm6d2)",
+    spaceDesktop: "var(--v16_31_xjgm6d3)"
 };

package/dist/stacking-group.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "moreItems", {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./stacking-group.css.ts.vanilla.css-mistica.js");
-var y = "v16_30_1y38nye1 v16_30_1y2v1nfis v16_30_1y2v1nfim v16_30_1y2v1nfj1 v16_30_1y2v1nfj7";
+var y = "v16_31_1y38nye1 v16_31_1y2v1nfis v16_31_1y2v1nfim v16_31_1y2v1nfj1 v16_31_1y2v1nfj7";

package/dist/stepper.css-mistica.js

@@ -22,32 +22,35 @@ _export(exports, {
         return i;
     },
     currentNumber: function() {
-        return m;
+        return y;
     },
     iconAnimation: function() {
-        return y;
+        return a;
+    },
+    listItem: function() {
+        return m;
     },
     number: function() {
-        return a;
+        return e;
     },
     step: function() {
-        return e;
+        return t;
     },
     stepIconNumber: function() {
-        return t;
+        return q;
     },
     stepper: function() {
         return h;
     },
     textContainer: function() {
-        return q;
+        return l;
     },
     vars: function() {
-        return l;
+        return s;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./stepper.css.ts.vanilla.css-mistica.js");
-var n = "v16_30_14h93mqk v16_30_1y2v1nfjz v16_30_1y2v1nfjf v16_30_1y2v1nflq v16_30_1y2v1nflu", r = "v16_30_14h93mqm v16_30_1y2v1nfjz v16_30_1y2v1nfjf v16_30_1y2v1nflq v16_30_1y2v1nflu", f = "v16_30_14h93mqn", i = "v16_30_14h93mqp v16_30_1y2v1nfjh", m = "v16_30_14h93mqf", y = "v16_30_14h93mqc", a = "v16_30_14h93mqe v16_30_1y2v1nfis v16_30_1y2v1nfj7 v16_30_1y2v1nfj1 v16_30_1y2v1nflc", e = "v16_30_14h93mq9 v16_30_1y2v1nfim v16_30_1y2v1nfit v16_30_1y2v1nfiy v16_30_1y2v1nfj7", t = "v16_30_14h93mqb v16_30_1y2v1nfim v16_30_1y2v1nfis", h = "v16_30_14h93mq7 v16_30_1y2v1nfis v16_30_1y2v1nfkz", q = "v16_30_14h93mqh v16_30_1y2v1nfin", l = {
-    stepperMinHeight: "var(--v16_30_14h93mq0)"
+var n = "v16_31_14h93mql v16_31_1y2v1nfjz v16_31_1y2v1nfjf v16_31_1y2v1nflq v16_31_1y2v1nflu", r = "v16_31_14h93mqn v16_31_1y2v1nfjz v16_31_1y2v1nfjf v16_31_1y2v1nflq v16_31_1y2v1nflu", f = "v16_31_14h93mqo", i = "v16_31_14h93mqq v16_31_1y2v1nfjh", y = "v16_31_14h93mqg", a = "v16_31_14h93mqd", m = "v16_31_1y2v1nfis v16_31_1y2v1nfj7", e = "v16_31_14h93mqf v16_31_1y2v1nfis v16_31_1y2v1nfj7 v16_31_1y2v1nfj1 v16_31_1y2v1nflc", t = "v16_31_14h93mqa v16_31_1y2v1nfim v16_31_1y2v1nfit v16_31_1y2v1nfiy v16_31_1y2v1nfj7", q = "v16_31_14h93mqc v16_31_1y2v1nfim v16_31_1y2v1nfis", h = "v16_31_14h93mq7 v16_31_1y2v1nfis v16_31_1y2v1nfj6 v16_31_1y2v1nfkz", l = "v16_31_14h93mqi v16_31_1y2v1nfin", s = {
+    stepperMinHeight: "var(--v16_31_14h93mq0)"
 };

package/dist/stepper.css.d.ts

@@ -2,6 +2,7 @@ export declare const vars: {
     stepperMinHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const stepper: string;
+export declare const listItem: string;
 export declare const step: string;
 export declare const stepIconNumber: string;
 export declare const iconAnimation: string;

package/dist/stepper.d.ts

@@ -4,8 +4,10 @@ type StepperProps = {
     steps: ReadonlyArray<string>;
     currentIndex: number;
     'aria-label'?: string;
-    children?: void;
+    'aria-labelledby'?: string;
+    'aria-description'?: string;
+    'aria-describedby'?: string;
     dataAttributes?: DataAttributes;
 };
-declare const Stepper: ({ steps, currentIndex, "aria-label": ariaLabel, dataAttributes, }: StepperProps) => JSX.Element;
+declare const Stepper: ({ steps, currentIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-description": ariaDescription, "aria-describedby": ariaDescribedby, dataAttributes, }: StepperProps) => JSX.Element;
 export default Stepper;

package/dist/stepper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return re;
+        return de;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -14,11 +14,13 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _text = require("./text.js");
 const _hooks = require("./hooks.js");
+const _texttokens = require("./text-tokens.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 _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -117,83 +119,96 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const J = (param)=>{
-    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 s = Math.ceil(m);
-        a !== s && (y(s < a), A(s));
+const ee = (param)=>{
+    let { steps: c, currentIndex: n, "aria-label": v, "aria-labelledby": y, "aria-description": x, "aria-describedby": N, dataAttributes: C } = param;
+    const { texts: h, t: u, textPresets: g } = (0, _hooks.useTheme)(), { height: A, ref: $ } = (0, _hooks.useElementDimensions)(), T = A, [r, P] = _react.useState(Math.ceil(n)), [i, R] = _react.useState(!1);
+    _react.useEffect(()=>{
+        const s = Math.ceil(n);
+        r !== s && (R(s < r), P(s));
     }, [
-        m,
         n,
-        a
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        c,
+        r
+    ]);
+    const k = h.stepperCompletedStep || u(_texttokens.stepperCompletedStep), w = h.stepperCurrentStep || u(_texttokens.stepperCurrentStep);
+    return(// aria-description is not supported by the eslint rule
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles, jsx-a11y/role-supports-aria-props
+    /* @__PURE__ */ (0, _jsxruntime.jsx)("ol", _object_spread_props(_object_spread({
+        role: "list",
         className: _steppercssmistica.stepper,
         style: (0, _css.applyCssVars)({
-            [_steppercssmistica.vars.stepperMinHeight]: (0, _css.pxToRem)(40 + x)
+            [_steppercssmistica.vars.stepperMinHeight]: (0, _css.pxToRem)(40 + T)
         })
-    }, (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, {
+    }, (0, _dom.getPrefixedDataAttributes)(C, "Stepper")), {
+        "aria-label": v,
+        "aria-labelledby": y,
+        "aria-description": x,
+        "aria-describedby": N,
+        children: c.map((s, a)=>{
+            const t = a === r, f = a === c.length - 1, o = a < r, m = a === r - 1;
+            return /* @__PURE__ */ (0, _jsxruntime.jsxs)("li", {
+                className: _steppercssmistica.listItem,
+                style: f ? void 0 : {
+                    flex: 1
+                },
+                "aria-current": t ? "step" : void 0,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: _steppercssmistica.step,
-                        role: "progressbar",
-                        "aria-valuenow": r ? t + 1 : void 0,
-                        "aria-valuemin": 1,
-                        "aria-valuemax": n.length,
-                        "aria-valuetext": s,
-                        "aria-label": v,
                         children: [
-                            c ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_steppercssmistica.stepIconNumber, {
-                                    [_steppercssmistica.iconAnimation]: p && !i
+                                    [_steppercssmistica.iconAnimation]: m && !i
                                 }),
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccess.default, {
                                     color: _skincontractcssmistica.vars.colors.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !p || i
+                                    skipAnimation: !m || i
                                 })
                             }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_steppercssmistica.stepIconNumber, _steppercssmistica.number, {
-                                    [_steppercssmistica.currentNumber]: r || r
+                                    [_steppercssmistica.currentNumber]: t || t
                                 }),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                                     as: "span",
                                     weight: g.indicator.weight,
-                                    color: r ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary,
+                                    color: t ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary,
                                     "aria-hidden": "true",
-                                    children: t + 1
+                                    children: a + 1
                                 })
                             }),
-                            S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _steppercssmistica.textContainer,
-                                ref: N,
                                 "aria-hidden": "true",
+                                ref: $,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                    as: "span",
+                                    as: "div",
                                     regular: !0,
-                                    color: c || r ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
+                                    color: o || t ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
                                     children: s
                                 })
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                                    children: `${o ? `${k}: ` : t ? `${w}: ` : ""}${s}`
+                                })
                             })
                         ]
                     }),
-                    !C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    !f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _steppercssmistica.bar,
                         "aria-hidden": "true",
-                        children: (c || r) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        children: (o || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: (0, _classnames.default)({
-                                [_steppercssmistica.barFilled]: i && r || c,
-                                [_steppercssmistica.barFilledAnimation]: p && !i,
-                                [_steppercssmistica.barFilledReverseAnimation]: r && i
+                                [_steppercssmistica.barFilled]: i && t || o,
+                                [_steppercssmistica.barFilledAnimation]: m && !i,
+                                [_steppercssmistica.barFilledReverseAnimation]: t && i
                             })
                         })
                     })
                 ]
-            }, t);
+            }, a);
         })
-    }));
-}, re = J;
+    })));
+}, de = ee;

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

@@ -46,33 +46,33 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./switch-component.css.ts.vanilla.css-mistica.js");
 var a = {
-    default: "v16_30_q0hp3a11 v16_30_q0hp3az v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc",
-    ios: "v16_30_q0hp3a12 v16_30_q0hp3a10 v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc",
-    checked: "v16_30_q0hp3a13 v16_30_q0hp3az v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc",
-    checkedIos: "v16_30_q0hp3a14 v16_30_q0hp3a10 v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc"
+    default: "v16_31_q0hp3a11 v16_31_q0hp3az v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc",
+    ios: "v16_31_q0hp3a12 v16_31_q0hp3a10 v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc",
+    checked: "v16_31_q0hp3a13 v16_31_q0hp3az v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc",
+    checkedIos: "v16_31_q0hp3a14 v16_31_q0hp3a10 v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc"
 }, n = {
-    default: "v16_30_q0hp3ai v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    ios: "v16_30_q0hp3aj v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    iosDark: "v16_30_q0hp3ak v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    checked: "v16_30_q0hp3al v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    checkedIos: "v16_30_q0hp3am v16_30_q0hp3ah v16_30_1y2v1nfiu"
+    default: "v16_31_q0hp3ai v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    ios: "v16_31_q0hp3aj v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    iosDark: "v16_31_q0hp3ak v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    checked: "v16_31_q0hp3al v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    checkedIos: "v16_31_q0hp3am v16_31_q0hp3ah v16_31_1y2v1nfiu"
 }, h = {
-    default: "v16_30_q0hp3a6 v16_30_1y2v1nfiw v16_30_1y2v1nflt",
-    ios: "v16_30_q0hp3a7 v16_30_1y2v1nfiw v16_30_1y2v1nflt",
-    disabled: "v16_30_q0hp3a8 v16_30_1y2v1nfiw v16_30_1y2v1nflt",
-    disabledIos: "v16_30_q0hp3a9 v16_30_1y2v1nfiw v16_30_1y2v1nflt"
-}, i = "v16_30_q0hp3au v16_30_q0hp3as", p = "v16_30_q0hp3av v16_30_q0hp3as", y = "v16_30_q0hp3aw", f = "v16_30_q0hp3at", q = {
-    default: "v16_30_q0hp3a15 v16_30_q0hp3az v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc",
-    ios: "v16_30_q0hp3a16 v16_30_q0hp3a10 v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc",
-    checked: "v16_30_q0hp3a17 v16_30_q0hp3az v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc",
-    checkedIos: "v16_30_q0hp3a18 v16_30_q0hp3a10 v16_30_q0hp3ay v16_30_1y2v1nfin v16_30_1y2v1nfn9 v16_30_1y2v1nfiu v16_30_1y2v1nflc"
+    default: "v16_31_q0hp3a6 v16_31_1y2v1nfiw v16_31_1y2v1nflt",
+    ios: "v16_31_q0hp3a7 v16_31_1y2v1nfiw v16_31_1y2v1nflt",
+    disabled: "v16_31_q0hp3a8 v16_31_1y2v1nfiw v16_31_1y2v1nflt",
+    disabledIos: "v16_31_q0hp3a9 v16_31_1y2v1nfiw v16_31_1y2v1nflt"
+}, i = "v16_31_q0hp3au v16_31_q0hp3as", p = "v16_31_q0hp3av v16_31_q0hp3as", y = "v16_31_q0hp3aw", f = "v16_31_q0hp3at", q = {
+    default: "v16_31_q0hp3a15 v16_31_q0hp3az v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc",
+    ios: "v16_31_q0hp3a16 v16_31_q0hp3a10 v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc",
+    checked: "v16_31_q0hp3a17 v16_31_q0hp3az v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc",
+    checkedIos: "v16_31_q0hp3a18 v16_31_q0hp3a10 v16_31_q0hp3ay v16_31_1y2v1nfin v16_31_1y2v1nfn9 v16_31_1y2v1nfiu v16_31_1y2v1nflc"
 }, e = {
-    default: "v16_30_q0hp3an v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    ios: "v16_30_q0hp3ao v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    iosDark: "v16_30_q0hp3ap v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    checked: "v16_30_q0hp3aq v16_30_q0hp3ah v16_30_1y2v1nfiu",
-    checkedIos: "v16_30_q0hp3ar v16_30_q0hp3ah v16_30_1y2v1nfiu"
+    default: "v16_31_q0hp3an v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    ios: "v16_31_q0hp3ao v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    iosDark: "v16_31_q0hp3ap v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    checked: "v16_31_q0hp3aq v16_31_q0hp3ah v16_31_1y2v1nfiu",
+    checkedIos: "v16_31_q0hp3ar v16_31_q0hp3ah v16_31_1y2v1nfiu"
 }, c = {
-    default: "v16_30_q0hp3ac v16_30_q0hp3ab v16_30_1y2v1nfim",
-    ios: "v16_30_q0hp3ad v16_30_q0hp3ab v16_30_1y2v1nfim"
-}, r = "v16_30_q0hp3af v16_30_1y2v1nfiu v16_30_1y2v1nflu";
+    default: "v16_31_q0hp3ac v16_31_q0hp3ab v16_31_1y2v1nfim",
+    ios: "v16_31_q0hp3ad v16_31_q0hp3ab v16_31_1y2v1nfim"
+}, r = "v16_31_q0hp3af v16_31_1y2v1nfiu v16_31_1y2v1nflu";

package/dist/table.css-mistica.js

@@ -73,13 +73,13 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./table.css.ts.vanilla.css-mistica.js");
-var e = "v16_30_107ok88f", a = "v16_30_107ok88g", r = "v16_30_107ok886", l = {
-    left: "v16_30_107ok888 v16_30_107ok887",
-    right: "v16_30_107ok889 v16_30_107ok887",
-    center: "v16_30_107ok88a v16_30_107ok887"
-}, t = "v16_30_107ok88i", k = "v16_30_107ok88k", i = "v16_30_107ok883", s = "v16_30_107ok882", d = "v16_30_107ok885", n = "v16_30_107ok884", c = "v16_30_107ok88j", p = "v16_30_107ok88l", m = "v16_30_107ok88n", b = "v16_30_107ok88m", I = "v16_30_107ok88b", g = "v16_30_107ok88c", h = "v16_30_107ok881", w = "v16_30_107ok88h", H = {
-    maxHeight: "var(--v16_30_107ok880)"
+var e = "v16_31_107ok88f", a = "v16_31_107ok88g", r = "v16_31_107ok886", l = {
+    left: "v16_31_107ok888 v16_31_107ok887",
+    right: "v16_31_107ok889 v16_31_107ok887",
+    center: "v16_31_107ok88a v16_31_107ok887"
+}, t = "v16_31_107ok88i", k = "v16_31_107ok88k", i = "v16_31_107ok883", s = "v16_31_107ok882", d = "v16_31_107ok885", n = "v16_31_107ok884", c = "v16_31_107ok88j", p = "v16_31_107ok88l", m = "v16_31_107ok88n", b = "v16_31_107ok88m", I = "v16_31_107ok88b", g = "v16_31_107ok88c", h = "v16_31_107ok881", w = "v16_31_107ok88h", H = {
+    maxHeight: "var(--v16_31_107ok880)"
 }, x = {
-    top: "v16_30_107ok88d",
-    middle: "v16_30_107ok88e"
+    top: "v16_31_107ok88d",
+    middle: "v16_31_107ok88e"
 };

package/dist/tabs.css-mistica.js

@@ -42,17 +42,17 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tabs.css.ts.vanilla.css-mistica.js");
-var n = "v16_30_1y2v1nfir v16_30_1y2v1nfin v16_30_1y2v1nfmf v16_30_1y2v1nfn9 v16_30_1y2v1nfjy", f = "v16_30_lgofm1q", e = "v16_30_lgofm14", r = "v16_30_lgofm13 v16_30_1y2v1nfl3 v16_30_1y2v1nfjf v16_30_1y2v1nfim", y = "v16_30_lgofm10", l = "v16_30_lgofm11", a = {
-    default: "v16_30_lgofm1a",
-    inverse: "v16_30_lgofm1b"
+var n = "v16_31_1y2v1nfir v16_31_1y2v1nfin v16_31_1y2v1nfmf v16_31_1y2v1nfn9 v16_31_1y2v1nfjy", f = "v16_31_lgofm1q", e = "v16_31_lgofm14", r = "v16_31_lgofm13 v16_31_1y2v1nfl3 v16_31_1y2v1nfjf v16_31_1y2v1nfim", y = "v16_31_lgofm10", l = "v16_31_lgofm11", a = {
+    default: "v16_31_lgofm1a",
+    inverse: "v16_31_lgofm1b"
 }, o = {
-    noSelected: "v16_30_1y2v1nf2e",
-    noSelectedInverse: "v16_30_1y2v1nf2f",
-    selected: "v16_30_lgofm1g",
-    selectedInverse: "v16_30_lgofm1h",
-    selectedAnimating: "v16_30_lgofm1i",
-    selectedAnimatingInverse: "v16_30_lgofm1j"
+    noSelected: "v16_31_1y2v1nf2e",
+    noSelectedInverse: "v16_31_1y2v1nf2f",
+    selected: "v16_31_lgofm1g",
+    selectedInverse: "v16_31_lgofm1h",
+    selectedAnimating: "v16_31_lgofm1i",
+    selectedAnimatingInverse: "v16_31_lgofm1j"
 }, t = {
-    default: "v16_30_lgofm17 v16_30_1y2v1nfbi v16_30_1y2v1nfcr v16_30_1y2v1nfit v16_30_1y2v1nfja v16_30_1y2v1nfj7 v16_30_1y2v1nfj1 v16_30_1y2v1nfkr v16_30_1y2v1nfl3 v16_30_1y2v1nf8k",
-    fullWidth: "v16_30_lgofm19 v16_30_lgofm17 v16_30_1y2v1nfbi v16_30_1y2v1nfcr v16_30_1y2v1nfit v16_30_1y2v1nfja v16_30_1y2v1nfj7 v16_30_1y2v1nfj1 v16_30_1y2v1nfkr v16_30_1y2v1nfl3 v16_30_1y2v1nf8k"
-}, i = "v16_30_1y2v1nfl3 v16_30_1y2v1nfjf v16_30_1y2v1nfis";
+    default: "v16_31_lgofm17 v16_31_1y2v1nfbi v16_31_1y2v1nfcr v16_31_1y2v1nfit v16_31_1y2v1nfja v16_31_1y2v1nfj7 v16_31_1y2v1nfj1 v16_31_1y2v1nfkr v16_31_1y2v1nfl3 v16_31_1y2v1nf8k",
+    fullWidth: "v16_31_lgofm19 v16_31_lgofm17 v16_31_1y2v1nfbi v16_31_1y2v1nfcr v16_31_1y2v1nfit v16_31_1y2v1nfja v16_31_1y2v1nfj7 v16_31_1y2v1nfj1 v16_31_1y2v1nfkr v16_31_1y2v1nfl3 v16_31_1y2v1nf8k"
+}, i = "v16_31_1y2v1nfl3 v16_31_1y2v1nfjf v16_31_1y2v1nfis";

package/dist/tabs.d.ts

@@ -8,10 +8,24 @@ export type TabsProps = {
         readonly trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
         readonly Icon?: (props: IconProps) => JSX.Element;
         readonly 'aria-controls'?: string;
+        readonly id?: string;
     }>;
     children?: void;
     dataAttributes?: DataAttributes;
     selectedTabRef?: React.RefCallback<HTMLDivElement> | React.Ref<HTMLDivElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-description'?: string;
+    'aria-describedby'?: string;
+    renderPanel?: (config: {
+        selectedIndex: number;
+        panelProps: {
+            id: string;
+            role: string;
+            tabIndex: number;
+            'aria-labelledby': string;
+        };
+    }) => React.ReactNode;
 };
-declare const Tabs: ({ selectedIndex, onChange, tabs, dataAttributes, selectedTabRef }: TabsProps) => JSX.Element;
+declare const Tabs: ({ selectedIndex, onChange, tabs, dataAttributes, selectedTabRef, renderPanel, ...otherProps }: TabsProps) => JSX.Element;
 export default Tabs;