@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/Tabs.mjs

@@ -6,11 +6,11 @@ import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $8bRfI$jsx, jsxs as $8bRfI$jsxs, Fragment as $8bRfI$Fragment} from "react/jsx-runtime";
 import {createContext as $8bRfI$createContext, forwardRef as $8bRfI$forwardRef, useRef as $8bRfI$useRef, useContext as $8bRfI$useContext, useCallback as $8bRfI$useCallback, useMemo as $8bRfI$useMemo, createElement as $8bRfI$createElement, useState as $8bRfI$useState, useEffect as $8bRfI$useEffect} from "react";
-import {Provider as $8bRfI$Provider, TabList as $8bRfI$TabList, Tab as $8bRfI$Tab, TabPanel as $8bRfI$TabPanel, Group as $8bRfI$Group, TabListStateContext as $8bRfI$TabListStateContext, Tabs as $8bRfI$Tabs} from "react-aria-components";
+import {Provider as $8bRfI$Provider, TabList as $8bRfI$TabList, Tab as $8bRfI$Tab, SelectionIndicator as $8bRfI$SelectionIndicator, TabPanel as $8bRfI$TabPanel, Group as $8bRfI$Group, TabListStateContext as $8bRfI$TabListStateContext, Tabs as $8bRfI$Tabs} from "react-aria-components";
 import {CollectionBuilder as $8bRfI$CollectionBuilder} from "@react-aria/collections";
-import {useEffectEvent as $8bRfI$useEffectEvent, useId as $8bRfI$useId, useLayoutEffect as $8bRfI$useLayoutEffect, inertValue as $8bRfI$inertValue, useLabels as $8bRfI$useLabels, useResizeObserver as $8bRfI$useResizeObserver} from "@react-aria/utils";
+import {useId as $8bRfI$useId, inertValue as $8bRfI$inertValue, useLabels as $8bRfI$useLabels, useEffectEvent as $8bRfI$useEffectEvent, useResizeObserver as $8bRfI$useResizeObserver, useLayoutEffect as $8bRfI$useLayoutEffect} from "@react-aria/utils";
 import {useControlledState as $8bRfI$useControlledState} from "@react-stately/utils";
-import {useDOMRef as $8bRfI$useDOMRef, useMediaQuery as $8bRfI$useMediaQuery} from "@react-spectrum/utils";
+import {useDOMRef as $8bRfI$useDOMRef} from "@react-spectrum/utils";
 import {useHasTabbableChild as $8bRfI$useHasTabbableChild} from "@react-aria/focus";
 import {useLocale as $8bRfI$useLocale} from "@react-aria/i18n";
 
@@ -50,34 +50,34 @@ const $79e2b4a1b34d1592$var$tabs = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
     let flexShrink = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (!position) rules += ' _Pc11';
-    rules += ' sd11';
-    if (!flexShrink) rules += ' _va11';
-    rules += ' uk11';
-    rules += ' uch11';
-    rules += ' udi11';
-    rules += ' uea11';
-    rules += ' ugb11';
-    rules += ' uhd11';
-    rules += ' uje11';
-    rules += ' u2NhKxcl11';
-    rules += ' uic11';
-    rules += ' -_6BNtrc-c11';
-    rules += ' vx11';
-    rules += ' wb11';
-    rules += ' xb11';
-    rules += ' _xa11';
-    rules += ' _Fd11';
-    rules += ' _FezxGHba11';
-    rules += ' _FnuYUweb11';
-    rules += ' pt11';
-    if (props.orientation === "horizontal") rules += ' _ta11';
+    if (!position) rules += ' _Pc12';
+    rules += ' sd12';
+    if (!flexShrink) rules += ' _va12';
+    rules += ' uk12';
+    rules += ' uch12';
+    rules += ' udi12';
+    rules += ' uea12';
+    rules += ' ugb12';
+    rules += ' uhd12';
+    rules += ' uje12';
+    rules += ' u2NhKxcl12';
+    rules += ' uic12';
+    rules += ' -_6BNtrc-c12';
+    rules += ' vx12';
+    rules += ' wb12';
+    rules += ' xb12';
+    rules += ' _xa12';
+    rules += ' _Fd12';
+    rules += ' _FezxGHba12';
+    rules += ' _FnuYUweb12';
+    rules += ' pt12';
+    if (props.orientation === "horizontal") rules += ' _ta12';
     return rules;
 };
 const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)(function Tabs(props, ref) {
@@ -87,11 +87,6 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
     let [value, setValue] = (0, $8bRfI$useControlledState)(props.selectedKey, props.defaultSelectedKey ?? null, props.onSelectionChange);
     if (!props['aria-label'] && !props['aria-labelledby']) throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');
     let tablistRef = (0, $8bRfI$useRef)(null);
-    let prevRef = (0, $8bRfI$useRef)(null);
-    let onChange = (0, $8bRfI$useEffectEvent)((val)=>{
-        if (tablistRef.current) prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;
-        setValue(val);
-    });
     return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Provider), {
         values: [
             [
@@ -103,8 +98,7 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
                     disabledKeys: disabledKeys,
                     selectedKey: value,
                     tablistRef: tablistRef,
-                    prevRef: prevRef,
-                    onSelectionChange: onChange,
+                    onSelectionChange: setValue,
                     labelBehavior: labelBehavior,
                     'aria-label': props['aria-label'],
                     'aria-labelledby': props['aria-labelledby']
@@ -116,7 +110,7 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
             children: (collection)=>/*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapsingTabs, {
                     ...props,
                     selectedKey: value,
-                    onSelectionChange: onChange,
+                    onSelectionChange: setValue,
                     collection: collection,
                     containerRef: domRef
                 })
@@ -125,25 +119,25 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
 });
 const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
     let rules = " ";
-    rules += ' sd11';
+    rules += ' sd12';
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            if (props.density === "regular") rules += ' Uj11';
-            else if (props.density === "compact") rules += ' Ul11';
-        } else if (props.density === "regular") rules += ' Up11';
-        else if (props.density === "compact") rules += ' Uj11';
+            if (props.density === "regular") rules += ' Uj12';
+            else if (props.density === "compact") rules += ' Ul12';
+        } else if (props.density === "regular") rules += ' Up12';
+        else if (props.density === "compact") rules += ' Uj12';
     }
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            if (props.density === "regular") rules += ' qj11';
-            else if (props.density === "compact") rules += ' ql11';
-        } else if (props.density === "regular") rules += ' qp11';
-        else if (props.density === "compact") rules += ' qj11';
+            if (props.density === "regular") rules += ' qj12';
+            else if (props.density === "compact") rules += ' ql12';
+        } else if (props.density === "regular") rules += ' qp12';
+        else if (props.density === "compact") rules += ' qj12';
     }
-    if (props.orientation === "vertical") rules += ' _ta11';
-    if (props.orientation === "vertical") rules += ' Hz11';
-    if (props.orientation === "vertical") rules += ' Ix11';
-    rules += ' Nq11';
+    if (props.orientation === "vertical") rules += ' _ta12';
+    if (props.orientation === "vertical") rules += ' Hz12';
+    if (props.orientation === "vertical") rules += ' Ix12';
+    rules += ' Nq12';
     return rules;
 };
 const $79e2b4a1b34d1592$var$tablistWrapper = function anonymous(props, overrides) {
@@ -152,7 +146,7 @@ const $79e2b4a1b34d1592$var$tablistWrapper = function anonymous(props, overrides
     let minWidth = false;
     let flexShrink = false;
     let flexGrow = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "N") minWidth = true;
@@ -160,10 +154,10 @@ const $79e2b4a1b34d1592$var$tablistWrapper = function anonymous(props, overrides
         if (p[1] === "_u") flexGrow = true;
         rules += p[0];
     }
-    if (!position) rules += ' _Pc11';
-    if (!minWidth) rules += ' Na11';
-    if (!flexShrink) rules += ' _va11';
-    if (!flexGrow) rules += ' _ua11';
+    if (!position) rules += ' _Pc12';
+    if (!minWidth) rules += ' Na12';
+    if (!flexShrink) rules += ' _va12';
+    if (!flexGrow) rules += ' _ua12';
     return rules;
 };
 function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props) {
@@ -233,87 +227,93 @@ function $79e2b4a1b34d1592$var$TabListInner(props) {
 }
 const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa11';
-    if (props.isDisabled) rules += ' gH11';
-    else rules += ' g011';
-    if (props.isDisabled) rules += ' gld11';
-    else rules += ' gle11';
-    if (props.orientation === "horizontal") rules += ' FLvNfn11';
-    else rules += ' Fb11';
-    if (props.orientation === "vertical") rules += ' ZLvNfn11';
-    else rules += ' Za11';
-    rules += ' _lr11';
-    if (props.orientation === "vertical") rules += ' Wr11';
-    if (props.orientation === "horizontal") rules += ' _Er11';
-    if (props.orientation === "vertical") rules += ' _Aa11';
-    rules += ' _je11';
-    rules += ' og11';
-    rules += ' ng11';
-    rules += ' kg11';
-    rules += ' jg11';
+    rules += ' _Pa12';
+    if (props.isDisabled) rules += ' gH12';
+    else rules += ' g012';
+    if (props.isDisabled) rules += ' gld12';
+    else rules += ' gle12';
+    if (props.orientation === "horizontal") rules += ' FLvNfn12';
+    else rules += ' Fb12';
+    if (props.orientation === "vertical") rules += ' ZLvNfn12';
+    else rules += ' Za12';
+    rules += ' _qg12';
+    rules += ' YIRyJjb12';
+    rules += ' Ydklsgce12';
+    rules += ' Xc12';
+    rules += ' _2a12';
+    rules += ' _lr12';
+    if (props.orientation === "vertical") rules += ' Wr12';
+    if (props.orientation === "horizontal") rules += ' _Er12';
+    if (props.orientation === "vertical") rules += ' _Aa12';
+    rules += ' _je12';
+    rules += ' og12';
+    rules += ' ng12';
+    rules += ' kg12';
+    rules += ' jg12';
     return rules;
 };
 const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
     let flexShrink = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf11';
-    else rules += ' _Le11';
-    rules += ' Oh11';
-    rules += ' _Mc11';
-    rules += ' _Kd11';
-    rules += ' sd11';
-    if (props.isDisabled) rules += ' pp11';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    rules += ' Oh12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
+    rules += ' sd12';
+    if (props.isDisabled) rules += ' pp12';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po11';
-        else if (props.isFocusVisible) rules += ' po11';
-        else if (props.isHovered) rules += ' po11';
-        else rules += ' pt11';
+        if (props.isPressed) rules += ' po12';
+        else if (props.isFocusVisible) rules += ' po12';
+        else if (props.isHovered) rules += ' po12';
+        else rules += ' pt12';
     } else {
-        if (props.isPressed) rules += ' pt11';
-        else if (props.isFocusVisible) rules += ' pt11';
-        else if (props.isHovered) rules += ' pt11';
-        else rules += ' pv11';
+        if (props.isPressed) rules += ' pt12';
+        else if (props.isFocusVisible) rules += ' pt12';
+        else if (props.isHovered) rules += ' pt12';
+        else rules += ' pv12';
     }
-    if (props.isDisabled) rules += ' plc11';
-    else if (props.isSelected) rules += ' pld11';
-    rules += ' oa11';
-    rules += ' na11';
-    rules += ' ka11';
-    rules += ' ja11';
-    rules += ' Uc11';
-    rules += ' Usd11';
-    rules += ' qc11';
-    rules += ' qsd11';
+    if (props.isDisabled) rules += ' plc12';
+    else if (props.isSelected) rules += ' pld12';
+    rules += ' oa12';
+    rules += ' na12';
+    rules += ' ka12';
+    rules += ' ja12';
+    rules += ' Uc12';
+    rules += ' Usd12';
+    rules += ' qc12';
+    rules += ' qsd12';
     if (props.orientation === "horizontal") {
-        if (props.density === "regular") rules += ' Fz11';
-        else if (props.density === "compact") rules += ' Fx11';
+        if (props.density === "regular") rules += ' Fz12';
+        else if (props.density === "compact") rules += ' Fx12';
     }
     if (props.orientation === "vertical") {
-        if (props.density === "regular") rules += ' Mk11';
-        else if (props.density === "compact") rules += ' Mi11';
+        if (props.density === "regular") rules += ' Mk12';
+        else if (props.density === "compact") rules += ' Mi12';
     }
-    rules += ' eb11';
-    if (!position) rules += ' _Pc11';
-    rules += ' ri11';
-    if (!flexShrink) rules += ' _va11';
-    rules += ' Yd11';
-    rules += ' Xb11';
-    rules += ' _2b11';
-    if (props.labelBehavior === "hide") rules += ' SssxDec11';
-    if (props.labelBehavior === "hide") rules += ' RssxDec11';
-    rules += ' __ca11';
+    rules += ' eb12';
+    if (!position) rules += ' _Pc12';
+    rules += ' ri12';
+    rules += ' _Xa12';
+    if (!flexShrink) rules += ' _va12';
+    rules += ' Yd12';
+    rules += ' Xb12';
+    rules += ' _2b12';
+    if (props.labelBehavior === "hide") rules += ' SssxDec12';
+    if (props.labelBehavior === "hide") rules += ' RssxDec12';
+    rules += ' __ca12';
     return rules;
 };
-const $79e2b4a1b34d1592$var$icon = " sb11 _va11 -_8sjo0b-t5ZbAob11";
+const $79e2b4a1b34d1592$var$icon = " sb12 _va12 -_8sjo0b-t5ZbAob12";
 function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
-    let { density: density, orientation: orientation, labelBehavior: labelBehavior, prevRef: prevRef } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
+    let { density: density, orientation: orientation, labelBehavior: labelBehavior } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
     let contentId = (0, $8bRfI$useId)();
     let ariaLabelledBy = props1['aria-labelledby'] || '';
     return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Tab), {
@@ -329,7 +329,7 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
                 orientation: orientation
             }, props1.styles),
         children: ({ isMenu: // @ts-ignore
-        isMenu, isSelected: isSelected, isDisabled: isDisabled })=>{
+        isMenu, isDisabled: isDisabled })=>{
             if (isMenu) return props1.children;
             else return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Provider), {
                 values: [
@@ -339,8 +339,8 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
                             id: contentId,
                             styles: function anonymous(props) {
                                 let rules = " ";
-                                rules += ' _Jb11';
-                                if (props.labelBehavior === "hide") rules += ' sk11';
+                                rules += ' _Jb12';
+                                if (props.labelBehavior === "hide") rules += ' sk12';
                                 return rules;
                             }({
                                 labelBehavior: labelBehavior
@@ -352,17 +352,15 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
                         {
                             render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                 slot: 'icon',
-                                styles: " _Ja11"
+                                styles: " _Ja12"
                             }),
                             styles: $79e2b4a1b34d1592$var$icon
                         }
                     ]
                 ],
                 children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabInner, {
-                    isSelected: isSelected,
                     orientation: orientation,
                     isDisabled: isDisabled,
-                    prevRef: prevRef,
                     children: typeof props1.children === 'string' ? /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
                         children: props1.children
                     }) : props1.children
@@ -371,54 +369,12 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
         }
     });
 }
-function $79e2b4a1b34d1592$var$TabInner({ isSelected: isSelected, isDisabled: isDisabled, orientation: orientation, children: children, prevRef: prevRef }) {
-    let reduceMotion = (0, $8bRfI$useMediaQuery)('(prefers-reduced-motion: reduce)');
+function $79e2b4a1b34d1592$var$TabInner({ isDisabled: isDisabled, orientation: orientation, children: children }) {
     let ref = (0, $8bRfI$useRef)(null);
-    (0, $8bRfI$useLayoutEffect)(()=>{
-        if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {
-            let currentItem = ref?.current.getBoundingClientRect();
-            if (orientation === 'horizontal') {
-                let deltaX = prevRef.current.left - currentItem.left;
-                ref.current.animate([
-                    {
-                        transform: `translateX(${deltaX}px)`,
-                        width: `${prevRef.current.width}px`
-                    },
-                    {
-                        transform: 'translateX(0px)',
-                        width: '100%'
-                    }
-                ], {
-                    duration: 200,
-                    easing: 'ease-out'
-                });
-            } else {
-                let deltaY = prevRef.current.top - currentItem.top;
-                ref.current.animate([
-                    {
-                        transform: `translateY(${deltaY}px)`,
-                        height: `${prevRef.current.height}px`
-                    },
-                    {
-                        transform: 'translateY(0px)',
-                        height: '100%'
-                    }
-                ], {
-                    duration: 200,
-                    easing: 'ease-out'
-                });
-            }
-            prevRef.current = null;
-        }
-    }, [
-        isSelected,
-        reduceMotion,
-        prevRef,
-        orientation
-    ]);
+    let isHidden = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$HiddenTabsContext);
     return /*#__PURE__*/ (0, $8bRfI$jsxs)((0, $8bRfI$Fragment), {
         children: [
-            isSelected && /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
+            !isHidden && /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$SelectionIndicator), {
                 ref: ref,
                 className: $79e2b4a1b34d1592$var$selectedIndicator({
                     isDisabled: isDisabled,
@@ -434,22 +390,22 @@ const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
     let marginTop = false;
     let flexGrow = false;
     let minHeight = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "J") marginTop = true;
         if (p[1] === "_u") flexGrow = true;
         if (p[1] === "M") minHeight = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf11';
-    else rules += ' _Le11';
-    rules += ' Oh11';
-    rules += ' _Mc11';
-    rules += ' _Kd11';
-    if (!marginTop) rules += ' Js11';
-    rules += ' pt11';
-    if (!flexGrow) rules += ' _ub11';
-    if (!minHeight) rules += ' Ma11';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    rules += ' Oh12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
+    if (!marginTop) rules += ' Js12';
+    rules += ' pt12';
+    if (!flexGrow) rules += ' _ub12';
+    if (!minHeight) rules += ' Ma12';
     return rules;
 };
 function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
@@ -495,27 +451,31 @@ function $79e2b4a1b34d1592$var$isEveryTabDisabled(collection, disabledKeys) {
     }
     return false;
 }
+const $79e2b4a1b34d1592$var$HiddenTabsContext = /*#__PURE__*/ (0, $8bRfI$createContext)(false);
 let $79e2b4a1b34d1592$var$HiddenTabs = function(props) {
     let { listRef: listRef, items: items = [], size: size, density: density } = props;
     return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
         // @ts-ignore
         inert: (0, $8bRfI$inertValue)(true),
         ref: listRef,
-        className: " s40ub4c11 _t40ub4c11 U40ub4c11 q40ub4c11 _w40ub4c11 _Pa11 Wr11 _lr11 _Ar11 _zr11 _6b11 _Nc11 Pc11 _Ia11",
-        children: items.map((item)=>{
-            // pull off individual props as an allow list, don't want refs or other props getting through
-            return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
-                "data-hidden-tab": true,
-                style: item.props.UNSAFE_style,
-                className: item.props.className({
-                    size: size,
-                    density: density
-                }),
-                children: item.props.children({
-                    size: size,
-                    density: density
-                })
-            }, item.key);
+        className: " s40ub4c12 _t40ub4c12 U40ub4c12 q40ub4c12 _w40ub4c12 _Pa12 Wr12 _lr12 _Ar12 _zr12 _6b12 _Nc12 Pc12 _Ia12",
+        children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$HiddenTabsContext.Provider, {
+            value: true,
+            children: items.map((item)=>{
+                // pull off individual props as an allow list, don't want refs or other props getting through
+                return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
+                    "data-hidden-tab": true,
+                    style: item.props.UNSAFE_style,
+                    className: item.props.className({
+                        size: size,
+                        density: density
+                    }),
+                    children: item.props.children({
+                        size: size,
+                        density: density
+                    })
+                }, item.key);
+            })
         })
     });
 };
@@ -542,11 +502,11 @@ let $79e2b4a1b34d1592$var$TabsMenu = (props1)=>{
     return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' sd11';
-            rules += ' _va11';
-            rules += ' eb11';
-            if (props.density === "regular") rules += ' Fz11';
-            else if (props.density === "compact") rules += ' Fx11';
+            rules += ' sd12';
+            rules += ' _va12';
+            rules += ' eb12';
+            if (props.density === "regular") rules += ' Fz12';
+            else if (props.density === "compact") rules += ' Fx12';
             return rules;
         }({
             density: density