@telefonica/mistica 16.30.1 → 16.32.0

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

@@ -1,34 +1,34 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./switch-component.css.ts.vanilla.css-mistica.js";
 var a = {
-    default: "v16_30_1_q0hp3a11 v16_30_1_q0hp3az v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc",
-    ios: "v16_30_1_q0hp3a12 v16_30_1_q0hp3a10 v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc",
-    checked: "v16_30_1_q0hp3a13 v16_30_1_q0hp3az v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc",
-    checkedIos: "v16_30_1_q0hp3a14 v16_30_1_q0hp3a10 v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc"
+    default: "v16_32_q0hp3a11 v16_32_q0hp3az v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc",
+    ios: "v16_32_q0hp3a12 v16_32_q0hp3a10 v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc",
+    checked: "v16_32_q0hp3a13 v16_32_q0hp3az v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc",
+    checkedIos: "v16_32_q0hp3a14 v16_32_q0hp3a10 v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc"
 }, n = {
-    default: "v16_30_1_q0hp3ai v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    ios: "v16_30_1_q0hp3aj v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    iosDark: "v16_30_1_q0hp3ak v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    checked: "v16_30_1_q0hp3al v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    checkedIos: "v16_30_1_q0hp3am v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu"
+    default: "v16_32_q0hp3ai v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    ios: "v16_32_q0hp3aj v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    iosDark: "v16_32_q0hp3ak v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    checked: "v16_32_q0hp3al v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    checkedIos: "v16_32_q0hp3am v16_32_q0hp3ah v16_32_1y2v1nfiu"
 }, h = {
-    default: "v16_30_1_q0hp3a6 v16_30_1_1y2v1nfiw v16_30_1_1y2v1nflt",
-    ios: "v16_30_1_q0hp3a7 v16_30_1_1y2v1nfiw v16_30_1_1y2v1nflt",
-    disabled: "v16_30_1_q0hp3a8 v16_30_1_1y2v1nfiw v16_30_1_1y2v1nflt",
-    disabledIos: "v16_30_1_q0hp3a9 v16_30_1_1y2v1nfiw v16_30_1_1y2v1nflt"
-}, i = "v16_30_1_q0hp3au v16_30_1_q0hp3as", p = "v16_30_1_q0hp3av v16_30_1_q0hp3as", y = "v16_30_1_q0hp3aw", f = "v16_30_1_q0hp3at", q = {
-    default: "v16_30_1_q0hp3a15 v16_30_1_q0hp3az v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc",
-    ios: "v16_30_1_q0hp3a16 v16_30_1_q0hp3a10 v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc",
-    checked: "v16_30_1_q0hp3a17 v16_30_1_q0hp3az v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc",
-    checkedIos: "v16_30_1_q0hp3a18 v16_30_1_q0hp3a10 v16_30_1_q0hp3ay v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflc"
+    default: "v16_32_q0hp3a6 v16_32_1y2v1nfiw v16_32_1y2v1nflt",
+    ios: "v16_32_q0hp3a7 v16_32_1y2v1nfiw v16_32_1y2v1nflt",
+    disabled: "v16_32_q0hp3a8 v16_32_1y2v1nfiw v16_32_1y2v1nflt",
+    disabledIos: "v16_32_q0hp3a9 v16_32_1y2v1nfiw v16_32_1y2v1nflt"
+}, i = "v16_32_q0hp3au v16_32_q0hp3as", p = "v16_32_q0hp3av v16_32_q0hp3as", y = "v16_32_q0hp3aw", f = "v16_32_q0hp3at", q = {
+    default: "v16_32_q0hp3a15 v16_32_q0hp3az v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc",
+    ios: "v16_32_q0hp3a16 v16_32_q0hp3a10 v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc",
+    checked: "v16_32_q0hp3a17 v16_32_q0hp3az v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc",
+    checkedIos: "v16_32_q0hp3a18 v16_32_q0hp3a10 v16_32_q0hp3ay v16_32_1y2v1nfin v16_32_1y2v1nfn9 v16_32_1y2v1nfiu v16_32_1y2v1nflc"
 }, e = {
-    default: "v16_30_1_q0hp3an v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    ios: "v16_30_1_q0hp3ao v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    iosDark: "v16_30_1_q0hp3ap v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    checked: "v16_30_1_q0hp3aq v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu",
-    checkedIos: "v16_30_1_q0hp3ar v16_30_1_q0hp3ah v16_30_1_1y2v1nfiu"
+    default: "v16_32_q0hp3an v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    ios: "v16_32_q0hp3ao v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    iosDark: "v16_32_q0hp3ap v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    checked: "v16_32_q0hp3aq v16_32_q0hp3ah v16_32_1y2v1nfiu",
+    checkedIos: "v16_32_q0hp3ar v16_32_q0hp3ah v16_32_1y2v1nfiu"
 }, c = {
-    default: "v16_30_1_q0hp3ac v16_30_1_q0hp3ab v16_30_1_1y2v1nfim",
-    ios: "v16_30_1_q0hp3ad v16_30_1_q0hp3ab v16_30_1_1y2v1nfim"
-}, r = "v16_30_1_q0hp3af v16_30_1_1y2v1nfiu v16_30_1_1y2v1nflu";
+    default: "v16_32_q0hp3ac v16_32_q0hp3ab v16_32_1y2v1nfim",
+    ios: "v16_32_q0hp3ad v16_32_q0hp3ab v16_32_1y2v1nfim"
+}, r = "v16_32_q0hp3af v16_32_1y2v1nfiu v16_32_1y2v1nflu";
 export { a as ballVariants, n as barVariants, h as checkboxVariants, i as container, p as containerDisabled, y as disabled, f as interactiveArea, q as inverseBallVariants, e as inverseBarVariants, c as switchCheckboxContainerVariants, r as switchCheckboxLabel };

package/dist-es/table.css-mistica.js

@@ -1,14 +1,14 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./table.css.ts.vanilla.css-mistica.js";
-var e = "v16_30_1_107ok88f", a = "v16_30_1_107ok88g", r = "v16_30_1_107ok886", l = {
-    left: "v16_30_1_107ok888 v16_30_1_107ok887",
-    right: "v16_30_1_107ok889 v16_30_1_107ok887",
-    center: "v16_30_1_107ok88a v16_30_1_107ok887"
-}, t = "v16_30_1_107ok88i", k = "v16_30_1_107ok88k", i = "v16_30_1_107ok883", s = "v16_30_1_107ok882", d = "v16_30_1_107ok885", n = "v16_30_1_107ok884", c = "v16_30_1_107ok88j", p = "v16_30_1_107ok88l", m = "v16_30_1_107ok88n", b = "v16_30_1_107ok88m", I = "v16_30_1_107ok88b", g = "v16_30_1_107ok88c", h = "v16_30_1_107ok881", w = "v16_30_1_107ok88h", H = {
-    maxHeight: "var(--v16_30_1_107ok880)"
+var e = "v16_32_107ok88f", a = "v16_32_107ok88g", r = "v16_32_107ok886", l = {
+    left: "v16_32_107ok888 v16_32_107ok887",
+    right: "v16_32_107ok889 v16_32_107ok887",
+    center: "v16_32_107ok88a v16_32_107ok887"
+}, t = "v16_32_107ok88i", k = "v16_32_107ok88k", i = "v16_32_107ok883", s = "v16_32_107ok882", d = "v16_32_107ok885", n = "v16_32_107ok884", c = "v16_32_107ok88j", p = "v16_32_107ok88l", m = "v16_32_107ok88n", b = "v16_32_107ok88m", I = "v16_32_107ok88b", g = "v16_32_107ok88c", h = "v16_32_107ok881", w = "v16_32_107ok88h", H = {
+    maxHeight: "var(--v16_32_107ok880)"
 }, x = {
-    top: "v16_30_1_107ok88d",
-    middle: "v16_30_1_107ok88e"
+    top: "v16_32_107ok88d",
+    middle: "v16_32_107ok88e"
 };
 export { e as actionsHeaderText, a as actionsTableCell, r as boxed, l as cellTextAlign, t as collapsedRowHeaderItem, k as collapsedRowTitle, i as collapsedRowsInMobile, s as fullWidth, d as hiddenHeadersInDesktop, n as hiddenHeadersInMobile, c as mobileCellHeading, p as rowFirstItem, m as rowLastCollapsedItem, b as rowLastItem, I as scrollContainer, g as scrollOverResponsiveLayout, h as table, w as topActions, H as vars, x as verticalAlign };

package/dist-es/table.js

@@ -80,7 +80,7 @@ function _object_without_properties_loose(source, excluded) {
 import { jsxs as y, jsx as e } from "react/jsx-runtime";
 import * as E from "react";
 import { getPrefixedDataAttributes as X } from "./utils/dom.js";
-import { table as W, boxed as ee, collapsedRowsInMobile as M, fullWidth as _, hiddenHeadersInDesktop as te, hiddenHeadersInMobile as le, cellTextAlign as H, verticalAlign as N, rowFirstItem as L, rowLastItem as R, rowLastCollapsedItem as Y, collapsedRowHeaderItem as re, mobileCellHeading as oe, collapsedRowTitle as ae, actionsTableCell as j, topActions as se, scrollContainer as ne, scrollOverResponsiveLayout as ie, vars as ce } from "./table.css-mistica.js";
+import { table as W, boxed as ee, collapsedRowsInMobile as M, fullWidth as _, hiddenHeadersInDesktop as te, hiddenHeadersInMobile as le, cellTextAlign as H, verticalAlign as I, rowFirstItem as L, rowLastItem as R, rowLastCollapsedItem as Y, collapsedRowHeaderItem as re, mobileCellHeading as oe, collapsedRowTitle as ae, actionsTableCell as j, topActions as se, scrollContainer as ne, scrollOverResponsiveLayout as ie, vars as ce } from "./table.css-mistica.js";
 import { vars as F } from "./skins/skin-contract.css-mistica.js";
 import me, { Text1 as x, Text2 as pe } from "./text.js";
 import { text2 as f, text4 as G } from "./text-props.js";
@@ -115,7 +115,7 @@ const $ = {
         small: !0,
         bleedY: !0
     })), J = "left", Ee = /*#__PURE__*/ E.forwardRef((_param, z)=>{
-    var { dataAttributes: o, heading: m = [], content: k = [], boxed: h, responsive: K, fullWidth: b = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = J, rowVerticalAlign: C = "middle", columnWidth: p, hideHeaders: u, scrollOverResponsiveLayout: Q, rowHeaderIndex: s } = _param, S = _object_without_properties(_param, [
+    var { dataAttributes: o, heading: m = [], content: k = [], boxed: h, responsive: K, fullWidth: b = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = J, rowVerticalAlign: C = "middle", columnWidth: p, hideHeaders: u, scrollOverResponsiveLayout: Q, rowHeaderIndex: s } = _param, N = _object_without_properties(_param, [
         "dataAttributes",
         "heading",
         "content",
@@ -142,9 +142,9 @@ const $ = {
             [te]: U,
             [le]: P || r
         }),
-        "aria-label": S["aria-label"],
-        "aria-labelledby": S["aria-labelledby"],
-        "aria-describedby": S["aria-describedby"],
+        "aria-label": N["aria-label"],
+        "aria-labelledby": N["aria-labelledby"],
+        "aria-describedby": N["aria-describedby"],
         children: [
             m.length > 0 && /* @__PURE__ */ e("thead", {
                 children: /* @__PURE__ */ y(x, {
@@ -156,7 +156,7 @@ const $ = {
                     children: [
                         m.map((l, a)=>/* @__PURE__ */ e("th", {
                                 scope: "col",
-                                className: c(H[B(a)], N[C], {
+                                className: c(H[B(a)], I[C], {
                                     [L]: a === 0,
                                     [R]: a === m.length - 1 && !g
                                 }),
@@ -178,7 +178,7 @@ const $ = {
                         children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ve, _object_spread({}, d), t) : /* @__PURE__ */ e(E.Fragment, {
                                 children: d
                             }, t))
-                    }), I = i.length ? `calc(${Z.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
+                    }), S = i.length ? `calc(${Z.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
                     return(// Add position relative because in collapse-rows mode, actions are positioned absolutely in the row
                     /* @__PURE__ */ y("tr", {
                         style: {
@@ -188,7 +188,7 @@ const $ = {
                             n.map((d, t)=>{
                                 const V = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
                                 return /* @__PURE__ */ y(t === s ? "th" : "td", {
-                                    className: c(N[C], {
+                                    className: c(I[C], {
                                         [L]: t === 0,
                                         [R]: t === n.length - 1 && !g,
                                         [Y]: V && r,
@@ -196,7 +196,7 @@ const $ = {
                                     }),
                                     style: {
                                         // add space between top actions and content
-                                        marginRight: r && i.length ? `calc(${I} + 8px)` : void 0
+                                        marginRight: r && i.length ? `calc(${S} + 8px)` : void 0
                                     },
                                     scope: t === s ? "row" : void 0,
                                     children: [
@@ -233,12 +233,12 @@ const $ = {
                                 }, t);
                             }),
                             i.length > 0 ? /* @__PURE__ */ e("td", {
-                                className: c(N[C], j, R, {
+                                className: c(I[C], j, R, {
                                     [L]: n.length === 0
                                 }),
                                 align: "right",
                                 style: {
-                                    width: `calc(${I} + 12px)`
+                                    width: `calc(${S} + 12px)`
                                 },
                                 children: w
                             }) : g && /* @__PURE__ */ e("td", {
@@ -250,7 +250,7 @@ const $ = {
                                     position: "absolute",
                                     top: `calc(${h ? $.boxed : $.default} - ${q} + (${Z.small} - ${fe.small}) / 2)`,
                                     right: h ? `calc(${$.boxed} - ${q})` : 0,
-                                    width: I
+                                    width: S
                                 },
                                 children: w
                             })

package/dist-es/tabs.css-mistica.js

@@ -1,17 +1,17 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tabs.css.ts.vanilla.css-mistica.js";
-var n = "v16_30_1_1y2v1nfir v16_30_1_1y2v1nfin v16_30_1_1y2v1nfmf v16_30_1_1y2v1nfn9 v16_30_1_1y2v1nfjy", f = "v16_30_1_lgofm1q", e = "v16_30_1_lgofm14", r = "v16_30_1_lgofm13 v16_30_1_1y2v1nfl3 v16_30_1_1y2v1nfjf v16_30_1_1y2v1nfim", y = "v16_30_1_lgofm10", l = "v16_30_1_lgofm11", a = {
-    default: "v16_30_1_lgofm1a",
-    inverse: "v16_30_1_lgofm1b"
+var n = "v16_32_1y2v1nfir v16_32_1y2v1nfin v16_32_1y2v1nfmf v16_32_1y2v1nfn9 v16_32_1y2v1nfjy", f = "v16_32_lgofm1q", e = "v16_32_lgofm14", r = "v16_32_lgofm13 v16_32_1y2v1nfl3 v16_32_1y2v1nfjf v16_32_1y2v1nfim", y = "v16_32_lgofm10", l = "v16_32_lgofm11", a = {
+    default: "v16_32_lgofm1a",
+    inverse: "v16_32_lgofm1b"
 }, o = {
-    noSelected: "v16_30_1_1y2v1nf2e",
-    noSelectedInverse: "v16_30_1_1y2v1nf2f",
-    selected: "v16_30_1_lgofm1g",
-    selectedInverse: "v16_30_1_lgofm1h",
-    selectedAnimating: "v16_30_1_lgofm1i",
-    selectedAnimatingInverse: "v16_30_1_lgofm1j"
+    noSelected: "v16_32_1y2v1nf2e",
+    noSelectedInverse: "v16_32_1y2v1nf2f",
+    selected: "v16_32_lgofm1g",
+    selectedInverse: "v16_32_lgofm1h",
+    selectedAnimating: "v16_32_lgofm1i",
+    selectedAnimatingInverse: "v16_32_lgofm1j"
 }, t = {
-    default: "v16_30_1_lgofm17 v16_30_1_1y2v1nfbi v16_30_1_1y2v1nfcr v16_30_1_1y2v1nfit v16_30_1_1y2v1nfja v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nfkr v16_30_1_1y2v1nfl3 v16_30_1_1y2v1nf8k",
-    fullWidth: "v16_30_1_lgofm19 v16_30_1_lgofm17 v16_30_1_1y2v1nfbi v16_30_1_1y2v1nfcr v16_30_1_1y2v1nfit v16_30_1_1y2v1nfja v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nfkr v16_30_1_1y2v1nfl3 v16_30_1_1y2v1nf8k"
-}, i = "v16_30_1_1y2v1nfl3 v16_30_1_1y2v1nfjf v16_30_1_1y2v1nfis";
+    default: "v16_32_lgofm17 v16_32_1y2v1nfbi v16_32_1y2v1nfcr v16_32_1y2v1nfit v16_32_1y2v1nfja v16_32_1y2v1nfj7 v16_32_1y2v1nfj1 v16_32_1y2v1nfkr v16_32_1y2v1nfl3 v16_32_1y2v1nf8k",
+    fullWidth: "v16_32_lgofm19 v16_32_lgofm17 v16_32_1y2v1nfbi v16_32_1y2v1nfcr v16_32_1y2v1nfit v16_32_1y2v1nfja v16_32_1y2v1nfj7 v16_32_1y2v1nfj1 v16_32_1y2v1nfkr v16_32_1y2v1nfl3 v16_32_1y2v1nf8k"
+}, i = "v16_32_1y2v1nfl3 v16_32_1y2v1nfjf v16_32_1y2v1nfis";
 export { n as animatedLine, f as icon, e as inner, r as outer, y as outerBorder, l as outerBorderInverse, a as tabHover, o as tabSelectionVariants, t as tabVariants, i as tabsContainer };

package/dist-es/tabs.js

@@ -51,20 +51,48 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as t, jsxs as L } from "react/jsx-runtime";
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsxs as y, Fragment as E, jsx as o } from "react/jsx-runtime";
 import * as m from "react";
-import R from "classnames";
-import { BaseTouchable as k } from "./touchable.js";
-import w from "./responsive-layout.js";
-import { useTheme as x, useElementDimensions as z } from "./hooks.js";
-import { Text as H } from "./text.js";
-import { isRunningAcceptanceTest as B } from "./utils/platform.js";
-import { getPrefixedDataAttributes as P } from "./utils/dom.js";
-import { outerBorderInverse as V, outerBorder as W, outer as C, inner as D, tabsContainer as M, tabVariants as O, tabSelectionVariants as o, tabHover as y, icon as _, animatedLine as j } from "./tabs.css-mistica.js";
-import q from "./inline.js";
-import { useIsInverseOrMediaVariant as E } from "./theme-variant-context.js";
-import { vars as A } from "./skins/skin-contract.css-mistica.js";
-const u = B() ? 0 : 300, F = (i)=>{
+import H from "classnames";
+import { BaseTouchable as z } from "./touchable.js";
+import C from "./responsive-layout.js";
+import { useTheme as O, useElementDimensions as V } from "./hooks.js";
+import { Text as W } from "./text.js";
+import { isRunningAcceptanceTest as F } from "./utils/platform.js";
+import { getPrefixedDataAttributes as M } from "./utils/dom.js";
+import { outerBorderInverse as _, outerBorder as j, outer as K, inner as q, tabsContainer as G, tabVariants as U, tabSelectionVariants as l, tabHover as $, icon as x, animatedLine as J } from "./tabs.css-mistica.js";
+import Q from "./inline.js";
+import { useIsInverseOrMediaVariant as X } from "./theme-variant-context.js";
+import { vars as N } from "./skins/skin-contract.css-mistica.js";
+import { RIGHT as Y, LEFT as Z } from "./utils/keys.js";
+const g = F() ? 0 : 300, P = (i)=>{
     switch(i){
         case 1:
         case 2:
@@ -73,89 +101,134 @@ const u = B() ? 0 : 300, F = (i)=>{
         default:
             return "default";
     }
-}, U = (param)=>{
-    let { selectedIndex: i, onChange: T, tabs: b, dataAttributes: I, selectedTabRef: N } = param;
-    const { textPresets: n } = x(), d = m.useId(), { ref: $ } = z(), h = m.useRef(null), p = m.useRef(null), [v, g] = m.useState(!1), a = E(), S = (c, f)=>{
-        const s = document.querySelector(`[id='${d}'] [data-tabindex="${c}"]`), l = document.querySelector(`[id='${d}'] [data-tabindex="${f}"]`), e = h.current, r = p.current;
-        s && l && e && r && (g(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - r.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 - r.scrollLeft}px, 0)`;
+}, ee = (_param)=>{
+    var { selectedIndex: i, onChange: k, tabs: d, dataAttributes: w, selectedTabRef: R, renderPanel: f } = _param, b = _object_without_properties(_param, [
+        "selectedIndex",
+        "onChange",
+        "tabs",
+        "dataAttributes",
+        "selectedTabRef",
+        "renderPanel"
+    ]);
+    const { textPresets: c } = O(), u = m.useId(), { ref: S } = V(), v = m.useRef(null), I = m.useRef(null), [L, T] = m.useState(!1), n = X(), p = (s)=>{
+        var _d_s_id;
+        return (_d_s_id = d[s].id) !== null && _d_s_id !== void 0 ? _d_s_id : `${u}-tab-${s}`;
+    }, A = (s)=>{
+        var _d_s_ariacontrols;
+        return (_d_s_ariacontrols = d[s]["aria-controls"]) !== null && _d_s_ariacontrols !== void 0 ? _d_s_ariacontrols : f ? `${u}-tabpanel-${s}` : void 0;
+    }, D = (s, a)=>{
+        const r = document.getElementById(p(s)), t = document.getElementById(p(a)), e = v.current, h = I.current;
+        r && t && e && h && (T(!0), e.style.display = "block", e.style.width = `${r.offsetWidth}px`, e.style.transform = `translate(${r.offsetLeft - h.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.transition = `transform ${g}ms, width ${g}ms`, e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - h.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
-            e.style.transition = "", e.style.display = "none", g(!1);
-        }, u));
-    };
-    return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-        id: d,
-        role: "tablist",
-        ref: $,
-        className: a ? V : W
-    }, P(I, "Tabs")), {
-        children: /* @__PURE__ */ t(w, {
-            fullWidth: !0,
-            children: /* @__PURE__ */ L("div", {
-                className: C,
-                children: [
-                    /* @__PURE__ */ t("div", {
-                        ref: p,
-                        className: D,
-                        children: /* @__PURE__ */ t("div", {
-                            className: M,
-                            children: b.map((param, e)=>{
-                                let { text: c, trackingEvent: f, Icon: s, "aria-controls": l } = param;
-                                const r = e === i;
-                                return /* @__PURE__ */ t(k, {
-                                    ref: r ? N : void 0,
-                                    dataAttributes: {
-                                        "component-name": "Tab",
-                                        tabindex: e
-                                    },
-                                    className: R(O[F(b.length)], r ? v ? a ? o.selectedAnimatingInverse : o.selectedAnimating : a ? o.selectedInverse : o.selected : a ? o.noSelectedInverse : o.noSelected, a ? y.inverse : y.default),
-                                    onPress: ()=>{
-                                        !v && i !== e && (T(e), S(i, e));
-                                    },
-                                    trackingEvent: f,
-                                    role: "tab",
-                                    "aria-controls": l,
-                                    "aria-selected": r ? "true" : "false",
-                                    children: /* @__PURE__ */ L(q, {
-                                        space: s && c ? 8 : 0,
-                                        alignItems: "center",
-                                        children: [
-                                            s && /* @__PURE__ */ t("div", {
-                                                className: _,
-                                                children: /* @__PURE__ */ t(s, {
-                                                    size: "100%",
-                                                    color: "currentColor"
-                                                })
-                                            }),
-                                            /* @__PURE__ */ t(H, {
-                                                as: "div",
-                                                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: c
+            e.style.transition = "", e.style.display = "none", T(!1);
+        }, g));
+    }, B = m.useCallback((s)=>{
+        const a = Array.from(s.currentTarget.querySelectorAll('[role="tab"]')), r = document.activeElement, t = a.indexOf(r);
+        if (t !== -1) {
+            if (s.key === Y) {
+                s.preventDefault();
+                const e = t < a.length - 1 ? a[t + 1] : a[0];
+                e == null || e.focus();
+            } else if (s.key === Z) {
+                s.preventDefault();
+                const e = t > 0 ? a[t - 1] : a[a.length - 1];
+                e == null || e.focus();
+            }
+        }
+    }, []);
+    return /* @__PURE__ */ y(E, {
+        children: [
+            /* @__PURE__ */ o("div", _object_spread_props(_object_spread({
+                id: u,
+                role: "tablist",
+                ref: S,
+                className: n ? _ : j
+            }, M(w, "Tabs")), {
+                "aria-label": b["aria-label"],
+                "aria-labelledby": b["aria-labelledby"],
+                "aria-description": b["aria-description"],
+                "aria-describedby": b["aria-describedby"],
+                children: /* @__PURE__ */ o(C, {
+                    fullWidth: !0,
+                    children: /* @__PURE__ */ y("div", {
+                        className: K,
+                        children: [
+                            /* @__PURE__ */ o("div", {
+                                ref: I,
+                                className: q,
+                                children: /* @__PURE__ */ o("div", {
+                                    className: G,
+                                    onKeyDown: B,
+                                    children: d.map((param, t)=>{
+                                        let { text: s, trackingEvent: a, Icon: r } = param;
+                                        const e = t === i;
+                                        return /* @__PURE__ */ o(z, {
+                                            id: p(t),
+                                            tabIndex: e ? void 0 : -1,
+                                            ref: e ? R : void 0,
+                                            dataAttributes: {
+                                                "component-name": "Tab"
+                                            },
+                                            className: H(U[P(d.length)], e ? L ? n ? l.selectedAnimatingInverse : l.selectedAnimating : n ? l.selectedInverse : l.selected : n ? l.noSelectedInverse : l.noSelected, n ? $.inverse : $.default),
+                                            onPress: ()=>{
+                                                !L && i !== t && (k(t), D(i, t));
+                                            },
+                                            trackingEvent: a,
+                                            role: "tab",
+                                            "aria-controls": A(t),
+                                            "aria-selected": e ? "true" : "false",
+                                            children: /* @__PURE__ */ y(Q, {
+                                                space: r && s ? 8 : 0,
+                                                alignItems: "center",
+                                                children: [
+                                                    r && /* @__PURE__ */ o("div", {
+                                                        className: x,
+                                                        children: /* @__PURE__ */ o(r, {
+                                                            size: "100%",
+                                                            color: "currentColor"
+                                                        })
+                                                    }),
+                                                    /* @__PURE__ */ o(W, {
+                                                        as: "div",
+                                                        desktopSize: c.tabsLabel.size.desktop,
+                                                        mobileSize: c.tabsLabel.size.mobile,
+                                                        desktopLineHeight: c.tabsLabel.lineHeight.desktop,
+                                                        mobileLineHeight: c.tabsLabel.lineHeight.mobile,
+                                                        weight: c.tabsLabel.weight,
+                                                        color: "inherit",
+                                                        wordBreak: !1,
+                                                        textAlign: "center",
+                                                        hyphens: "auto",
+                                                        children: s
+                                                    })
+                                                ]
                                             })
-                                        ]
+                                        }, t);
                                     })
-                                }, e);
+                                })
+                            }),
+                            /* @__PURE__ */ o("div", {
+                                ref: v,
+                                className: J,
+                                style: {
+                                    background: n ? N.colors.controlActivatedInverse : N.colors.controlActivated
+                                }
                             })
-                        })
-                    }),
-                    /* @__PURE__ */ t("div", {
-                        ref: h,
-                        className: j,
-                        style: {
-                            background: a ? A.colors.controlActivatedInverse : A.colors.controlActivated
-                        }
+                        ]
                     })
-                ]
+                })
+            })),
+            f == null ? void 0 : f({
+                selectedIndex: i,
+                panelProps: {
+                    role: "tabpanel",
+                    tabIndex: 0,
+                    id: A(i),
+                    "aria-labelledby": `${u}-tab-${i}`
+                }
             })
-        })
-    }));
-}, oe = U;
-export { oe as default };
+        ]
+    });
+}, ue = ee;
+export { ue as default };

package/dist-es/tag.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tag.css.ts.vanilla.css-mistica.js";
-var n = "v16_30_1_1y2v1nfit v16_30_1_1y2v1nfb9", y = "v16_30_1_1y2v1nfiu", f = "v16_30_1_1wy08671 v16_30_1_1y2v1nf8r v16_30_1_1y2v1nfa0 v16_30_1_1y2v1nfit v16_30_1_1y2v1nfix v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nfko";
+var n = "v16_32_1y2v1nfit v16_32_1y2v1nfb9", y = "v16_32_1y2v1nfiu", f = "v16_32_1wy08671 v16_32_1y2v1nf8r v16_32_1y2v1nfa0 v16_32_1y2v1nfit v16_32_1y2v1nfix v16_32_1y2v1nfj7 v16_32_1y2v1nfj1 v16_32_1y2v1nfko";
 export { n as badge, y as icon, f as tag };

package/dist-es/tag.js

@@ -57,14 +57,14 @@ import { Text as h } from "./text.js";
 import { useThemeVariant as C, ThemeVariant as b } from "./theme-variant-context.js";
 import { pxToRem as A } from "./utils/css.js";
 import { getPrefixedDataAttributes as P } from "./utils/dom.js";
-import { tag as w, icon as E, badge as S } from "./tag.css-mistica.js";
-import { vars as V } from "./skins/skin-contract.css-mistica.js";
-import W from "classnames";
-import { useTheme as N } from "./hooks.js";
+import { tag as w, icon as E, badge as N } from "./tag.css-mistica.js";
+import { vars as S } from "./skins/skin-contract.css-mistica.js";
+import V from "classnames";
+import { useTheme as W } from "./hooks.js";
 import R from "./badge.js";
-const { colors: e } = V, j = (param)=>{
+const { colors: e } = S, j = (param)=>{
     let { Icon: t, children: a, dataAttributes: u, type: d = "promo", badge: n, backgroundColor: m, textColor: v } = param;
-    const { textPresets: l } = N(), g = C(), s = g === "inverse", o = n === !0 ? void 0 : n || 0;
+    const { textPresets: l } = W(), g = C(), s = g === "inverse", o = n === !0 ? void 0 : n || 0;
     if (!a) return null;
     const x = {
         // [textColor, inverseTextColor, backgroundColor, backgroundColorInverse]
@@ -113,7 +113,7 @@ const { colors: e } = V, j = (param)=>{
         ]
     }, [T, f, I, p] = x[d], c = v || (s ? f : T), k = m || (s ? p : I);
     return /* @__PURE__ */ i("span", _object_spread_props(_object_spread({}, P(u, "Tag")), {
-        className: W(w),
+        className: V(w),
         style: {
             paddingLeft: t ? 8 : 12,
             paddingRight: o !== 0 ? 8 : 12,
@@ -140,7 +140,7 @@ const { colors: e } = V, j = (param)=>{
                         children: a
                     }),
                     o !== 0 && /* @__PURE__ */ r("div", {
-                        className: S,
+                        className: N,
                         children: /* @__PURE__ */ r(R, {
                             value: o
                         })

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

@@ -1,5 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
-var t = "v16_30_1_rhey4t8", r = "v16_30_1_rhey4th v16_30_1_1y2v1nfb9 v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7", n = 12, a = "v16_30_1_rhey4tr", y = 4, f = 11, i = 15, h = "v16_30_1_rhey4t4", l = "v16_30_1_rhey4t7", d = "calc(1.5rem + 24px)", o = "v16_30_1_rhey4ta v16_30_1_1y2v1nfim v16_30_1_rhey4t1 v16_30_1_1y2v1nfla v16_30_1_1y2v1nfkd v16_30_1_1y2v1nf2c v16_30_1_1y2v1nfjf", c = "v16_30_1_rhey4tb", p = "v16_30_1_rhey4tc", u = "v16_30_1_rhey4td", m = "v16_30_1_rhey4tn v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nflt", s = "v16_30_1_1y2v1nf4q", j = "v16_30_1_rhey4tl v16_30_1_1y2v1nfco", x = "v16_30_1_rhey4tj v16_30_1_1y2v1nfco v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfjw v16_30_1_1y2v1nfin", b = "v16_30_1_rhey4tq v16_30_1_1y2v1nfin", I = "v16_30_1_rhey4t6 v16_30_1_1y2v1nf8l v16_30_1_1y2v1nf9u v16_30_1_rhey4t1 v16_30_1_1y2v1nfla v16_30_1_1y2v1nfkd v16_30_1_1y2v1nf2c v16_30_1_1y2v1nfjf", g = "v16_30_1_rhey4te", L = "v16_30_1_rhey4tf";
+var t = "v16_32_rhey4t8", r = "v16_32_rhey4th v16_32_1y2v1nfb9 v16_32_1y2v1nfis v16_32_1y2v1nfj7", n = 12, a = "v16_32_rhey4tr", y = 4, f = 11, i = 15, h = "v16_32_rhey4t4", l = "v16_32_rhey4t7", d = "calc(1.5rem + 24px)", o = "v16_32_rhey4ta v16_32_1y2v1nfim v16_32_rhey4t1 v16_32_1y2v1nfla v16_32_1y2v1nfkd v16_32_1y2v1nf2c v16_32_1y2v1nfjf", c = "v16_32_rhey4tb", p = "v16_32_rhey4tc", u = "v16_32_rhey4td", m = "v16_32_rhey4tn v16_32_1y2v1nfis v16_32_1y2v1nfj7 v16_32_1y2v1nflt", s = "v16_32_1y2v1nf4q", j = "v16_32_rhey4tl v16_32_1y2v1nfco", x = "v16_32_rhey4tj v16_32_1y2v1nfco v16_32_1y2v1nfis v16_32_1y2v1nfj7 v16_32_1y2v1nfjw v16_32_1y2v1nfin", b = "v16_32_rhey4tq v16_32_1y2v1nfin", I = "v16_32_rhey4t6 v16_32_1y2v1nf8l v16_32_1y2v1nf9u v16_32_rhey4t1 v16_32_1y2v1nfla v16_32_1y2v1nfkd v16_32_1y2v1nf2c v16_32_1y2v1nfjf", g = "v16_32_rhey4te", L = "v16_32_rhey4tf";
 export { t as emptyDateValue, r as endIconContainer, n as fieldElementsGap, a as fieldEndIconContainer, y as fieldEndIconGap, f as fieldLeftPadding, i as fieldRightPadding, h as fullWidth, l as hiddenDatePlaceholder, d as iconButtonSize, o as input, c as inputFirefoxStyles, p as inputWithLabel, u as inputWithoutLabel, m as menuItem, s as menuItemSelected, j as prefix, x as startIcon, b as suggestionsContainer, I as textArea, g as textAreaWithLabel, L as textAreaWithoutLabel };