@react-spectrum/s2 0.9.2 → 0.10.0

package/dist/Tabs.mjs

@@ -5,12 +5,12 @@ import {Picker as $0067ea932a992b6a$export$ba25329847403e11, PickerItem as $0067
 import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
 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, useContext as $8bRfI$useContext, useState as $8bRfI$useState, useRef as $8bRfI$useRef, useEffect as $8bRfI$useEffect, useCallback as $8bRfI$useCallback, useMemo as $8bRfI$useMemo, createElement as $8bRfI$createElement} from "react";
-import {Provider as $8bRfI$Provider, TabListStateContext as $8bRfI$TabListStateContext, TabList as $8bRfI$TabList, Tab as $8bRfI$Tab, TabPanel as $8bRfI$TabPanel, Group as $8bRfI$Group, Tabs as $8bRfI$Tabs} from "react-aria-components";
+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 {CollectionBuilder as $8bRfI$CollectionBuilder} from "@react-aria/collections";
-import {useLayoutEffect as $8bRfI$useLayoutEffect, useId as $8bRfI$useId, inertValue as $8bRfI$inertValue, useLabels as $8bRfI$useLabels, useEffectEvent as $8bRfI$useEffectEvent, useResizeObserver as $8bRfI$useResizeObserver} from "@react-aria/utils";
+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 {useControlledState as $8bRfI$useControlledState} from "@react-stately/utils";
-import {useDOMRef as $8bRfI$useDOMRef} from "@react-spectrum/utils";
+import {useDOMRef as $8bRfI$useDOMRef, useMediaQuery as $8bRfI$useMediaQuery} from "@react-spectrum/utils";
 import {useHasTabbableChild as $8bRfI$useHasTabbableChild} from "@react-aria/focus";
 import {useLocale as $8bRfI$useLocale} from "@react-aria/i18n";
 
@@ -55,26 +55,28 @@ const $79e2b4a1b34d1592$var$tabs = function anonymous(props, overrides) {
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (!position) rules += ' _Pc91';
-    rules += ' sd91';
-    if (!flexShrink) rules += ' _va91';
-    rules += ' ug91';
-    rules += ' uch91';
-    rules += ' udi91';
-    rules += ' uea91';
-    rules += ' ugb91';
-    rules += ' uhd91';
-    rules += ' uje91';
-    rules += ' uic91';
-    rules += ' vd91';
-    rules += ' vsf91';
-    rules += ' wb91';
-    rules += ' xb91';
-    rules += ' _xa91';
-    rules += ' _Fa91';
-    rules += ' _Ffb91';
-    rules += ' pt91';
-    if (props.orientation === "horizontal") rules += ' _ta91';
+    if (!position) rules += ' _Pc1';
+    rules += ' sd1';
+    if (!flexShrink) rules += ' _va1';
+    rules += ' uk1';
+    rules += ' uch1';
+    rules += ' udi1';
+    rules += ' uea1';
+    rules += ' ugb1';
+    rules += ' uhd1';
+    rules += ' uje1';
+    rules += ' u2NhKxcl1';
+    rules += ' uic1';
+    rules += ' -_6BNtrc-c1';
+    rules += ' vx1';
+    rules += ' wb1';
+    rules += ' xb1';
+    rules += ' _xa1';
+    rules += ' _Fd1';
+    rules += ' _FezxGHba1';
+    rules += ' _FnuYUweb1';
+    rules += ' pt1';
+    if (props.orientation === "horizontal") rules += ' _ta1';
     return rules;
 };
 const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)(function Tabs(props, ref) {
@@ -83,6 +85,12 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
     let domRef = (0, $8bRfI$useDOMRef)(ref);
     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: [
             [
@@ -93,7 +101,9 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
                     orientation: orientation,
                     disabledKeys: disabledKeys,
                     selectedKey: value,
-                    onSelectionChange: setValue,
+                    tablistRef: tablistRef,
+                    prevRef: prevRef,
+                    onSelectionChange: onChange,
                     labelBehavior: labelBehavior,
                     'aria-label': props['aria-label'],
                     'aria-labelledby': props['aria-labelledby']
@@ -105,7 +115,7 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
             children: (collection)=>/*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapsingTabs, {
                     ...props,
                     selectedKey: value,
-                    onSelectionChange: setValue,
+                    onSelectionChange: onChange,
                     collection: collection,
                     containerRef: domRef
                 })
@@ -114,26 +124,25 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
 });
 const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
     let rules = " ";
-    rules += ' sd91';
+    rules += ' sd1';
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            if (props.density === "regular") rules += ' Uj91';
-            else if (props.density === "compact") rules += ' Ul91';
-        } else if (props.density === "regular") rules += ' Up91';
-        else if (props.density === "compact") rules += ' Uj91';
+            if (props.density === "regular") rules += ' Uj1';
+            else if (props.density === "compact") rules += ' Ul1';
+        } else if (props.density === "regular") rules += ' Up1';
+        else if (props.density === "compact") rules += ' Uj1';
     }
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            if (props.density === "regular") rules += ' qj91';
-            else if (props.density === "compact") rules += ' ql91';
-        } else if (props.density === "regular") rules += ' qp91';
-        else if (props.density === "compact") rules += ' qj91';
+            if (props.density === "regular") rules += ' qj1';
+            else if (props.density === "compact") rules += ' ql1';
+        } else if (props.density === "regular") rules += ' qp1';
+        else if (props.density === "compact") rules += ' qj1';
     }
-    if (props.orientation === "vertical") rules += ' _ta91';
-    if (props.orientation === "vertical") rules += ' Hz91';
-    if (props.orientation === "vertical") rules += ' Ix91';
-    rules += ' _va91';
-    rules += ' _sa91';
+    if (props.orientation === "vertical") rules += ' _ta1';
+    if (props.orientation === "vertical") rules += ' Hz1';
+    if (props.orientation === "vertical") rules += ' Ix1';
+    rules += ' Nq1';
     return rules;
 };
 function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props) {
@@ -144,142 +153,64 @@ function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props) {
     return null;
 }
 function $79e2b4a1b34d1592$var$TabListInner(props1) {
-    let { density: density, isDisabled: isDisabled, disabledKeys: disabledKeys, orientation: orientation, labelBehavior: labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
-    let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
-    let [selectedTab, setSelectedTab] = (0, $8bRfI$useState)(undefined);
-    let tablistRef = (0, $8bRfI$useRef)(null);
-    (0, $8bRfI$useLayoutEffect)(()=>{
-        if (tablistRef?.current) {
-            let tab = tablistRef.current.querySelector('[role=tab][data-selected=true]');
-            if (tab != null) setSelectedTab(tab);
-        }
-    }, [
-        tablistRef,
-        state?.selectedItem?.key
-    ]);
-    return /*#__PURE__*/ (0, $8bRfI$jsxs)("div", {
+    let { tablistRef: tablistRef, density: density, labelBehavior: labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
+    return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
         style: props1.UNSAFE_style,
         className: (props1.UNSAFE_className || '') + function anonymous(props, overrides) {
             let rules = " ";
             let position = false;
+            let flexGrow = false;
+            let flexShrink = false;
+            let minWidth = 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);
             for (let p of matches){
                 if (p[1] === "_P") position = true;
+                if (p[1] === "_u") flexGrow = true;
+                if (p[1] === "_v") flexShrink = true;
+                if (p[1] === "N") minWidth = true;
                 rules += p[0];
             }
-            if (!position) rules += ' _Pc91';
+            if (!position) rules += ' _Pc1';
+            if (!flexGrow) rules += ' _ua1';
+            if (!flexShrink) rules += ' _va1';
+            if (!minWidth) rules += ' Nq1';
             return rules;
         }(null, props1.styles),
-        children: [
-            orientation === 'vertical' && /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabLine, {
-                disabledKeys: disabledKeys,
-                isDisabled: isDisabled,
-                selectedTab: selectedTab,
-                orientation: orientation,
-                tabList: props1,
-                density: density
-            }),
-            /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$TabList), {
-                ...props1,
-                "aria-label": ariaLabel,
-                "aria-labelledby": ariaLabelledBy,
-                ref: tablistRef,
-                className: (renderProps)=>$79e2b4a1b34d1592$var$tablist({
-                        ...renderProps,
-                        labelBehavior: labelBehavior,
-                        density: density
-                    })
-            }),
-            orientation === 'horizontal' && /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabLine, {
-                disabledKeys: disabledKeys,
-                isDisabled: isDisabled,
-                selectedTab: selectedTab,
-                orientation: orientation,
-                tabList: props1,
-                density: density
-            })
-        ]
+        children: /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$TabList), {
+            ...props1,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            ref: tablistRef,
+            className: (renderProps)=>$79e2b4a1b34d1592$var$tablist({
+                    ...renderProps,
+                    labelBehavior: labelBehavior,
+                    density: density
+                })
+        })
     });
 }
 const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa91';
-    if (props.isDisabled) rules += ' gH91';
-    else rules += ' g091';
-    if (props.isDisabled) rules += ' gld91';
-    else rules += ' gle91';
-    if (props.orientation === "horizontal") rules += ' FLvNfn91';
-    if (props.orientation === "vertical") rules += ' ZLvNfn91';
-    if (props.orientation === "horizontal") rules += ' _lr91';
-    rules += ' _je91';
-    rules += ' og91';
-    rules += ' ng91';
-    rules += ' kg91';
-    rules += ' jg91';
-    rules += ' Xa91';
-    rules += ' _2b91';
+    rules += ' _Pa1';
+    if (props.isDisabled) rules += ' gH1';
+    else rules += ' g01';
+    if (props.isDisabled) rules += ' gld1';
+    else rules += ' gle1';
+    if (props.orientation === "horizontal") rules += ' FLvNfn1';
+    else rules += ' Fb1';
+    if (props.orientation === "vertical") rules += ' ZLvNfn1';
+    else rules += ' Za1';
+    rules += ' _lr1';
+    if (props.orientation === "vertical") rules += ' Wr1';
+    if (props.orientation === "horizontal") rules += ' _Er1';
+    if (props.orientation === "vertical") rules += ' _Aa1';
+    rules += ' _je1';
+    rules += ' og1';
+    rules += ' ng1';
+    rules += ' kg1';
+    rules += ' jg1';
     return rules;
 };
-function $79e2b4a1b34d1592$var$TabLine(props) {
-    let { disabledKeys: disabledKeys, isDisabled: isTabsDisabled, selectedTab: selectedTab, orientation: orientation, tabList: tabList, density: density } = props;
-    let { direction: direction } = (0, $8bRfI$useLocale)();
-    let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
-    // We want to add disabled styling to the selection indicator only if all the Tabs are disabled
-    let [isDisabled, setIsDisabled] = (0, $8bRfI$useState)(false);
-    (0, $8bRfI$useEffect)(()=>{
-        let isDisabled = isTabsDisabled || $79e2b4a1b34d1592$var$isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));
-        setIsDisabled(isDisabled);
-    }, [
-        state?.collection,
-        disabledKeys,
-        isTabsDisabled,
-        setIsDisabled
-    ]);
-    let [style, setStyle] = (0, $8bRfI$useState)({
-        transform: undefined,
-        width: undefined,
-        height: undefined
-    });
-    let onResize = (0, $8bRfI$useCallback)(()=>{
-        if (selectedTab) {
-            let styleObj = {
-                transform: undefined,
-                width: undefined,
-                height: undefined
-            };
-            // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes
-            let offset = direction === 'rtl' ? -1 * (selectedTab.offsetParent?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;
-            styleObj.transform = orientation === 'vertical' ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
-            if (orientation === 'horizontal') styleObj.width = `${selectedTab.offsetWidth}px`;
-            else styleObj.height = `${selectedTab.offsetHeight}px`;
-            setStyle(styleObj);
-        }
-    }, [
-        direction,
-        setStyle,
-        selectedTab,
-        orientation
-    ]);
-    (0, $8bRfI$useLayoutEffect)(()=>{
-        onResize();
-    }, [
-        onResize,
-        state?.selectedItem?.key,
-        density,
-        direction,
-        orientation,
-        tabList
-    ]);
-    return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
-        style: {
-            ...style
-        },
-        className: $79e2b4a1b34d1592$var$selectedIndicator({
-            isDisabled: isDisabled,
-            orientation: orientation
-        })
-    });
-}
 const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
@@ -290,51 +221,57 @@ const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf91';
-    else rules += ' _Le91';
-    rules += ' Oh91';
-    rules += ' _Mc91';
-    rules += ' _Kd91';
-    rules += ' sd91';
-    if (props.isDisabled) rules += ' pp91';
+    if (props.isFocusVisible) rules += ' _Lf1';
+    else rules += ' _Le1';
+    rules += ' Oh1';
+    rules += ' _Mc1';
+    rules += ' _Kd1';
+    rules += ' sd1';
+    if (props.isDisabled) rules += ' pp1';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po91';
-        else if (props.isFocusVisible) rules += ' po91';
-        else if (props.isHovered) rules += ' po91';
-        else rules += ' pt91';
+        if (props.isPressed) rules += ' po1';
+        else if (props.isFocusVisible) rules += ' po1';
+        else if (props.isHovered) rules += ' po1';
+        else rules += ' pt1';
     } else {
-        if (props.isPressed) rules += ' pt91';
-        else if (props.isFocusVisible) rules += ' pt91';
-        else if (props.isHovered) rules += ' pt91';
-        else rules += ' pv91';
+        if (props.isPressed) rules += ' pt1';
+        else if (props.isFocusVisible) rules += ' pt1';
+        else if (props.isHovered) rules += ' pt1';
+        else rules += ' pv1';
+    }
+    if (props.isDisabled) rules += ' plc1';
+    else if (props.isSelected) rules += ' pld1';
+    rules += ' oa1';
+    rules += ' na1';
+    rules += ' ka1';
+    rules += ' ja1';
+    rules += ' Uc1';
+    rules += ' Usd1';
+    rules += ' qc1';
+    rules += ' qsd1';
+    if (props.orientation === "horizontal") {
+        if (props.density === "regular") rules += ' Fz1';
+        else if (props.density === "compact") rules += ' Fx1';
     }
-    if (props.isDisabled) rules += ' plc91';
-    else if (props.isSelected) rules += ' pld91';
-    rules += ' oa91';
-    rules += ' na91';
-    rules += ' ka91';
-    rules += ' ja91';
-    rules += ' Uc91';
-    rules += ' Usd91';
-    rules += ' qc91';
-    rules += ' qsd91';
-    if (props.density === "regular") rules += ' Fz91';
-    else if (props.density === "compact") rules += ' Fx91';
-    rules += ' eb91';
-    if (!position) rules += ' _Pc91';
-    rules += ' ri91';
-    if (!flexShrink) rules += ' _va91';
-    rules += ' Yd91';
-    rules += ' Xb91';
-    rules += ' _2b91';
-    if (props.labelBehavior === "hide") rules += ' SssxDec91';
-    if (props.labelBehavior === "hide") rules += ' RssxDec91';
-    rules += ' __ca91';
+    if (props.orientation === "vertical") {
+        if (props.density === "regular") rules += ' Mk1';
+        else if (props.density === "compact") rules += ' Mi1';
+    }
+    rules += ' eb1';
+    if (!position) rules += ' _Pc1';
+    rules += ' ri1';
+    if (!flexShrink) rules += ' _va1';
+    rules += ' Yd1';
+    rules += ' Xb1';
+    rules += ' _2b1';
+    if (props.labelBehavior === "hide") rules += ' SssxDec1';
+    if (props.labelBehavior === "hide") rules += ' RssxDec1';
+    rules += ' __ca1';
     return rules;
 };
-const $79e2b4a1b34d1592$var$icon = " sb91 _va91 -_8sjo0b-t5ZbAob91";
+const $79e2b4a1b34d1592$var$icon = " sb1 _va1 -_8sjo0b-t5ZbAob1";
 function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
-    let { density: density, labelBehavior: labelBehavior } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
+    let { density: density, orientation: orientation, labelBehavior: labelBehavior, prevRef: prevRef } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
     let contentId = (0, $8bRfI$useId)();
     let ariaLabelledBy = props1['aria-labelledby'] || '';
     return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Tab), {
@@ -346,10 +283,11 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
         className: (renderProps)=>(props1.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tab({
                 ...renderProps,
                 density: density,
-                labelBehavior: labelBehavior
+                labelBehavior: labelBehavior,
+                orientation: orientation
             }, props1.styles),
         children: ({ isMenu: // @ts-ignore
-        isMenu })=>{
+        isMenu, isSelected: isSelected, isDisabled: isDisabled })=>{
             if (isMenu) return props1.children;
             else return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Provider), {
                 values: [
@@ -359,8 +297,8 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
                             id: contentId,
                             styles: function anonymous(props) {
                                 let rules = " ";
-                                rules += ' _Jb91';
-                                if (props.labelBehavior === "hide") rules += ' sk91';
+                                rules += ' _Jb1';
+                                if (props.labelBehavior === "hide") rules += ' sk1';
                                 return rules;
                             }({
                                 labelBehavior: labelBehavior
@@ -372,46 +310,104 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
                         {
                             render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                 slot: 'icon',
-                                styles: " _Ja91"
+                                styles: " _Ja1"
                             }),
                             styles: $79e2b4a1b34d1592$var$icon
                         }
                     ]
                 ],
-                children: typeof props1.children === 'string' ? /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
-                    children: props1.children
-                }) : props1.children
+                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
+                })
             });
         }
     });
 }
+function $79e2b4a1b34d1592$var$TabInner({ isSelected: isSelected, isDisabled: isDisabled, orientation: orientation, children: children, prevRef: prevRef }) {
+    let reduceMotion = (0, $8bRfI$useMediaQuery)('(prefers-reduced-motion: reduce)');
+    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
+    ]);
+    return /*#__PURE__*/ (0, $8bRfI$jsxs)((0, $8bRfI$Fragment), {
+        children: [
+            isSelected && /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
+                ref: ref,
+                className: $79e2b4a1b34d1592$var$selectedIndicator({
+                    isDisabled: isDisabled,
+                    orientation: orientation
+                })
+            }),
+            children
+        ]
+    });
+}
 const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
     let rules = " ";
     let marginTop = false;
     let flexGrow = false;
-    let flexBasis = false;
     let minHeight = false;
-    let minWidth = 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);
     for (let p of matches){
         if (p[1] === "J") marginTop = true;
         if (p[1] === "_u") flexGrow = true;
-        if (p[1] === "_s") flexBasis = true;
         if (p[1] === "M") minHeight = true;
-        if (p[1] === "N") minWidth = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf91';
-    else rules += ' _Le91';
-    rules += ' Oh91';
-    rules += ' _Mc91';
-    rules += ' _Kd91';
-    if (!marginTop) rules += ' Js91';
-    rules += ' pt91';
-    if (!flexGrow) rules += ' _ub91';
-    if (!flexBasis) rules += ' _sa91';
-    if (!minHeight) rules += ' Ma91';
-    if (!minWidth) rules += ' Na91';
+    if (props.isFocusVisible) rules += ' _Lf1';
+    else rules += ' _Le1';
+    rules += ' Oh1';
+    rules += ' _Mc1';
+    rules += ' _Kd1';
+    if (!marginTop) rules += ' Js1';
+    rules += ' pt1';
+    if (!flexGrow) rules += ' _ub1';
+    if (!minHeight) rules += ' Ma1';
     return rules;
 };
 function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
@@ -428,7 +424,8 @@ function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
     });
 }
 function $79e2b4a1b34d1592$var$CollapsedTabPanel(props) {
-    let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', id: id, ...otherProps } = props;
     let { menuId: menuId, valueId: valueId } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$CollapseContext);
     let ref = (0, $8bRfI$useRef)(null);
     let tabIndex = (0, $8bRfI$useHasTabbableChild)(ref) ? undefined : 0;
@@ -441,7 +438,7 @@ function $79e2b4a1b34d1592$var$CollapsedTabPanel(props) {
         className: (renderProps)=>UNSAFE_className + $79e2b4a1b34d1592$var$tabPanel(renderProps, props.styles)
     });
 }
-function $79e2b4a1b34d1592$var$isAllTabsDisabled(collection, disabledKeys) {
+function $79e2b4a1b34d1592$var$isEveryTabDisabled(collection, disabledKeys) {
     let testKey = null;
     if (collection && collection.size > 0) {
         testKey = collection.getFirstKey();
@@ -462,7 +459,7 @@ let $79e2b4a1b34d1592$var$HiddenTabs = function(props) {
         // @ts-ignore
         inert: (0, $8bRfI$inertValue)(true),
         ref: listRef,
-        className: " s40ub4c91 _t40ub4c91 U40ub4c91 q40ub4c91 _w40ub4c91 _Pa91 Wr91 _lr91 _Ar91 _zr91 _6b91 _Nc91 Pc91 _Ia91",
+        className: " s40ub4c1 _t40ub4c1 U40ub4c1 q40ub4c1 _w40ub4c1 _Pa1 Wr1 _lr1 _Ar1 _zr1 _6b1 _Nc1 Pc1 _Ia1",
         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", {
@@ -490,7 +487,7 @@ let $79e2b4a1b34d1592$var$TabsMenu = (props1)=>{
     ]);
     let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
     let allKeysDisabled = (0, $8bRfI$useMemo)(()=>{
-        return $79e2b4a1b34d1592$var$isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
+        return $79e2b4a1b34d1592$var$isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
     }, [
         state?.collection,
         disabledKeys
@@ -503,11 +500,11 @@ let $79e2b4a1b34d1592$var$TabsMenu = (props1)=>{
     return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' sd91';
-            rules += ' _va91';
-            rules += ' eb91';
-            if (props.density === "regular") rules += ' Fz91';
-            else if (props.density === "compact") rules += ' Fx91';
+            rules += ' sd1';
+            rules += ' _va1';
+            rules += ' eb1';
+            if (props.density === "regular") rules += ' Fz1';
+            else if (props.density === "compact") rules += ' Fx1';
             return rules;
         }({
             density: density