@react-spectrum/tabs 3.8.9-nightly.4555 → 3.8.9-nightly.4558

package/dist/import.mjs

@@ -1,26 +1,6 @@
-import "./module.css";
-import {Item as $7e899e8977e9ac07$re_export$Item, useCollection as $cLzzU$useCollection} from "@react-stately/collections";
-import {useDOMRef as $cLzzU$useDOMRef, useStyleProps as $cLzzU$useStyleProps, classNames as $cLzzU$classNames, SlotProvider as $cLzzU$SlotProvider, unwrapDOMRef as $cLzzU$unwrapDOMRef} from "@react-spectrum/utils";
-import {useResizeObserver as $cLzzU$useResizeObserver, useId as $cLzzU$useId, filterDOMProps as $cLzzU$filterDOMProps, mergeProps as $cLzzU$mergeProps, useLayoutEffect as $cLzzU$useLayoutEffect} from "@react-aria/utils";
-import {FocusRing as $cLzzU$FocusRing} from "@react-aria/focus";
-import {Picker as $cLzzU$Picker, Item as $cLzzU$Item} from "@react-spectrum/picker";
-import {ListCollection as $cLzzU$ListCollection} from "@react-stately/list";
-import $cLzzU$react, {useRef as $cLzzU$useRef, useState as $cLzzU$useState, useEffect as $cLzzU$useEffect, useCallback as $cLzzU$useCallback, useContext as $cLzzU$useContext} from "react";
-import {useTabListState as $cLzzU$useTabListState} from "@react-stately/tabs";
-import {Text as $cLzzU$Text} from "@react-spectrum/text";
-import {useHover as $cLzzU$useHover} from "@react-aria/interactions";
-import {useLocale as $cLzzU$useLocale} from "@react-aria/i18n";
-import {useProviderProps as $cLzzU$useProviderProps, useProvider as $cLzzU$useProvider} from "@react-spectrum/provider";
-import {useTab as $cLzzU$useTab, useTabList as $cLzzU$useTabList, useTabPanel as $cLzzU$useTabPanel} from "@react-aria/tabs";
+import {TabList as $65ab70ddbed1564b$export$e51a686c67fdaa2d, TabPanels as $65ab70ddbed1564b$export$5dae8d435677f210, Tabs as $65ab70ddbed1564b$export$b2539bed5023c21c} from "./Tabs.mjs";
+import {Item as $7e899e8977e9ac07$re_export$Item} from "@react-stately/collections";
 
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -32,460 +12,6 @@ function $parcel$export(e, n, v, s) {
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ /// <reference types="css-module-types" />
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-
-
-var $32d597b82a7aad64$exports = {};
-
-$parcel$export($32d597b82a7aad64$exports, "focus-ring", () => $32d597b82a7aad64$export$f39a09f249340e2a, (v) => $32d597b82a7aad64$export$f39a09f249340e2a = v);
-$parcel$export($32d597b82a7aad64$exports, "i18nFontFamily", () => $32d597b82a7aad64$export$8c4ee2c50c22c514, (v) => $32d597b82a7aad64$export$8c4ee2c50c22c514 = v);
-$parcel$export($32d597b82a7aad64$exports, "is-disabled", () => $32d597b82a7aad64$export$d35bc1e505d1ebbf, (v) => $32d597b82a7aad64$export$d35bc1e505d1ebbf = v);
-$parcel$export($32d597b82a7aad64$exports, "is-hovered", () => $32d597b82a7aad64$export$b8813cd5d7824ce7, (v) => $32d597b82a7aad64$export$b8813cd5d7824ce7 = v);
-$parcel$export($32d597b82a7aad64$exports, "is-selected", () => $32d597b82a7aad64$export$1e0fb04f31d3c22a, (v) => $32d597b82a7aad64$export$1e0fb04f31d3c22a = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing-ring", () => $32d597b82a7aad64$export$4109102f950813a6, (v) => $32d597b82a7aad64$export$4109102f950813a6 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing", () => $32d597b82a7aad64$export$24c7f46a6e3605dd, (v) => $32d597b82a7aad64$export$24c7f46a6e3605dd = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing--quiet", () => $32d597b82a7aad64$export$2927016961429360, (v) => $32d597b82a7aad64$export$2927016961429360 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Icon", () => $32d597b82a7aad64$export$d374b04f30360026, (v) => $32d597b82a7aad64$export$d374b04f30360026 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs", () => $32d597b82a7aad64$export$35c105c0d9c8e56f, (v) => $32d597b82a7aad64$export$35c105c0d9c8e56f = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--compact", () => $32d597b82a7aad64$export$e15c78184ee03abe, (v) => $32d597b82a7aad64$export$e15c78184ee03abe = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--emphasized", () => $32d597b82a7aad64$export$87b15021e28e067a, (v) => $32d597b82a7aad64$export$87b15021e28e067a = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--horizontal", () => $32d597b82a7aad64$export$229f1ac4d3d38f0e, (v) => $32d597b82a7aad64$export$229f1ac4d3d38f0e = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--isCollapsed", () => $32d597b82a7aad64$export$ea514cd060922d6b, (v) => $32d597b82a7aad64$export$ea514cd060922d6b = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--quiet", () => $32d597b82a7aad64$export$831e830d5828d42b, (v) => $32d597b82a7aad64$export$831e830d5828d42b = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--vertical", () => $32d597b82a7aad64$export$e415005be3957065, (v) => $32d597b82a7aad64$export$e415005be3957065 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-item", () => $32d597b82a7aad64$export$123e4c01a5440a3e, (v) => $32d597b82a7aad64$export$123e4c01a5440a3e = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-itemLabel", () => $32d597b82a7aad64$export$1f253edac4b98526, (v) => $32d597b82a7aad64$export$1f253edac4b98526 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-picker", () => $32d597b82a7aad64$export$12dc6b25c6dddfc1, (v) => $32d597b82a7aad64$export$12dc6b25c6dddfc1 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-selectionIndicator", () => $32d597b82a7aad64$export$a115f9117a19563e, (v) => $32d597b82a7aad64$export$a115f9117a19563e = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel", () => $32d597b82a7aad64$export$34f1a65c57bb7bb, (v) => $32d597b82a7aad64$export$34f1a65c57bb7bb = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--horizontal", () => $32d597b82a7aad64$export$778fb839eaa0528c, (v) => $32d597b82a7aad64$export$778fb839eaa0528c = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--vertical", () => $32d597b82a7aad64$export$9a6e2fb72c648072, (v) => $32d597b82a7aad64$export$9a6e2fb72c648072 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-collapseWrapper", () => $32d597b82a7aad64$export$e09869956b4c96f2, (v) => $32d597b82a7aad64$export$e09869956b4c96f2 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-tabpanel", () => $32d597b82a7aad64$export$acb5da0970288266, (v) => $32d597b82a7aad64$export$acb5da0970288266 = v);
-$parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-tabs", () => $32d597b82a7aad64$export$4a157a691c854e23, (v) => $32d597b82a7aad64$export$4a157a691c854e23 = v);
-var $32d597b82a7aad64$export$f39a09f249340e2a;
-var $32d597b82a7aad64$export$8c4ee2c50c22c514;
-var $32d597b82a7aad64$export$d35bc1e505d1ebbf;
-var $32d597b82a7aad64$export$b8813cd5d7824ce7;
-var $32d597b82a7aad64$export$1e0fb04f31d3c22a;
-var $32d597b82a7aad64$export$4109102f950813a6;
-var $32d597b82a7aad64$export$24c7f46a6e3605dd;
-var $32d597b82a7aad64$export$2927016961429360;
-var $32d597b82a7aad64$export$d374b04f30360026;
-var $32d597b82a7aad64$export$35c105c0d9c8e56f;
-var $32d597b82a7aad64$export$e15c78184ee03abe;
-var $32d597b82a7aad64$export$87b15021e28e067a;
-var $32d597b82a7aad64$export$229f1ac4d3d38f0e;
-var $32d597b82a7aad64$export$ea514cd060922d6b;
-var $32d597b82a7aad64$export$831e830d5828d42b;
-var $32d597b82a7aad64$export$e415005be3957065;
-var $32d597b82a7aad64$export$123e4c01a5440a3e;
-var $32d597b82a7aad64$export$1f253edac4b98526;
-var $32d597b82a7aad64$export$12dc6b25c6dddfc1;
-var $32d597b82a7aad64$export$a115f9117a19563e;
-var $32d597b82a7aad64$export$34f1a65c57bb7bb;
-var $32d597b82a7aad64$export$778fb839eaa0528c;
-var $32d597b82a7aad64$export$9a6e2fb72c648072;
-var $32d597b82a7aad64$export$e09869956b4c96f2;
-var $32d597b82a7aad64$export$acb5da0970288266;
-var $32d597b82a7aad64$export$4a157a691c854e23;
-$32d597b82a7aad64$export$f39a09f249340e2a = `FzVSrW_focus-ring`;
-$32d597b82a7aad64$export$8c4ee2c50c22c514 = `FzVSrW_i18nFontFamily`;
-$32d597b82a7aad64$export$d35bc1e505d1ebbf = `FzVSrW_is-disabled`;
-$32d597b82a7aad64$export$b8813cd5d7824ce7 = `FzVSrW_is-hovered`;
-$32d597b82a7aad64$export$1e0fb04f31d3c22a = `FzVSrW_is-selected`;
-$32d597b82a7aad64$export$4109102f950813a6 = `FzVSrW_spectrum-FocusRing-ring`;
-$32d597b82a7aad64$export$24c7f46a6e3605dd = `FzVSrW_spectrum-FocusRing ${$32d597b82a7aad64$export$4109102f950813a6}`;
-$32d597b82a7aad64$export$2927016961429360 = `FzVSrW_spectrum-FocusRing--quiet`;
-$32d597b82a7aad64$export$d374b04f30360026 = `FzVSrW_spectrum-Icon`;
-$32d597b82a7aad64$export$35c105c0d9c8e56f = `FzVSrW_spectrum-Tabs`;
-$32d597b82a7aad64$export$e15c78184ee03abe = `FzVSrW_spectrum-Tabs--compact`;
-$32d597b82a7aad64$export$87b15021e28e067a = `FzVSrW_spectrum-Tabs--emphasized`;
-$32d597b82a7aad64$export$229f1ac4d3d38f0e = `FzVSrW_spectrum-Tabs--horizontal`;
-$32d597b82a7aad64$export$ea514cd060922d6b = `FzVSrW_spectrum-Tabs--isCollapsed`;
-$32d597b82a7aad64$export$831e830d5828d42b = `FzVSrW_spectrum-Tabs--quiet`;
-$32d597b82a7aad64$export$e415005be3957065 = `FzVSrW_spectrum-Tabs--vertical`;
-$32d597b82a7aad64$export$123e4c01a5440a3e = `FzVSrW_spectrum-Tabs-item`;
-$32d597b82a7aad64$export$1f253edac4b98526 = `FzVSrW_spectrum-Tabs-itemLabel`;
-$32d597b82a7aad64$export$12dc6b25c6dddfc1 = `FzVSrW_spectrum-Tabs-picker`;
-$32d597b82a7aad64$export$a115f9117a19563e = `FzVSrW_spectrum-Tabs-selectionIndicator`;
-$32d597b82a7aad64$export$34f1a65c57bb7bb = `FzVSrW_spectrum-TabsPanel`;
-$32d597b82a7aad64$export$778fb839eaa0528c = `FzVSrW_spectrum-TabsPanel--horizontal`;
-$32d597b82a7aad64$export$9a6e2fb72c648072 = `FzVSrW_spectrum-TabsPanel--vertical`;
-$32d597b82a7aad64$export$e09869956b4c96f2 = `FzVSrW_spectrum-TabsPanel-collapseWrapper`;
-$32d597b82a7aad64$export$acb5da0970288266 = `FzVSrW_spectrum-TabsPanel-tabpanel`;
-$32d597b82a7aad64$export$4a157a691c854e23 = `FzVSrW_spectrum-TabsPanel-tabs`;
-
-
-
-
-
-
-
-
-
-const $65ab70ddbed1564b$var$TabContext = /*#__PURE__*/ (0, $cLzzU$react).createContext(null);
-function $65ab70ddbed1564b$var$Tabs(props, ref) {
-    props = (0, $cLzzU$useProviderProps)(props);
-    let { orientation: orientation = "horizontal", density: density = "regular", children: children, ...otherProps } = props;
-    let domRef = (0, $cLzzU$useDOMRef)(ref);
-    let tablistRef = (0, $cLzzU$useRef)();
-    let wrapperRef = (0, $cLzzU$useRef)();
-    let { direction: direction } = (0, $cLzzU$useLocale)();
-    let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(otherProps);
-    let [collapsed, setCollapsed] = (0, $cLzzU$useState)(false);
-    let [selectedTab, setSelectedTab] = (0, $cLzzU$useState)();
-    const [tabListState, setTabListState] = (0, $cLzzU$useState)(null);
-    let [tabPositions, setTabPositions] = (0, $cLzzU$useState)([]);
-    let prevTabPositions = (0, $cLzzU$useRef)(tabPositions);
-    (0, $cLzzU$useEffect)(()=>{
-        if (tablistRef.current) {
-            var _tabListState_selectedKey;
-            let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString())}"]`);
-            if (selectedTab != null) setSelectedTab(selectedTab);
-        }
-    // collapse is in the dep array so selectedTab can be updated for TabLine positioning
-    }, [
-        children,
-        tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey,
-        collapsed,
-        tablistRef
-    ]);
-    let checkShouldCollapse = (0, $cLzzU$useCallback)(()=>{
-        if (wrapperRef.current && orientation !== "vertical") {
-            let tabsComponent = wrapperRef.current;
-            let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
-            let tabDimensions = [
-                ...tabs
-            ].map((tab)=>tab.getBoundingClientRect());
-            let end = direction === "rtl" ? "left" : "right";
-            let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
-            let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
-            let shouldCollapse = direction === "rtl" ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
-            setCollapsed(shouldCollapse);
-            if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
-                var _prevTabPositions_current_index, _prevTabPositions_current_index1;
-                return (box === null || box === void 0 ? void 0 : box.left) !== ((_prevTabPositions_current_index = prevTabPositions.current[index]) === null || _prevTabPositions_current_index === void 0 ? void 0 : _prevTabPositions_current_index.left) || (box === null || box === void 0 ? void 0 : box.right) !== ((_prevTabPositions_current_index1 = prevTabPositions.current[index]) === null || _prevTabPositions_current_index1 === void 0 ? void 0 : _prevTabPositions_current_index1.right);
-            })) {
-                setTabPositions(tabDimensions);
-                prevTabPositions.current = tabDimensions;
-            }
-        }
-    }, [
-        tablistRef,
-        wrapperRef,
-        direction,
-        orientation,
-        setCollapsed,
-        prevTabPositions,
-        setTabPositions
-    ]);
-    (0, $cLzzU$useEffect)(()=>{
-        checkShouldCollapse();
-    }, [
-        children,
-        checkShouldCollapse
-    ]);
-    (0, $cLzzU$useResizeObserver)({
-        ref: wrapperRef,
-        onResize: checkShouldCollapse
-    });
-    let tabPanelProps = {
-        "aria-labelledby": undefined
-    };
-    // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
-    let collapsibleTabListId = (0, $cLzzU$useId)();
-    if (collapsed && orientation !== "vertical") tabPanelProps["aria-labelledby"] = collapsibleTabListId;
-    return /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabContext.Provider, {
-        value: {
-            tabProps: {
-                ...props,
-                orientation: orientation,
-                density: density
-            },
-            tabState: {
-                tabListState: tabListState,
-                setTabListState: setTabListState,
-                selectedTab: selectedTab,
-                collapsed: collapsed
-            },
-            refs: {
-                tablistRef: tablistRef,
-                wrapperRef: wrapperRef
-            },
-            tabPanelProps: tabPanelProps,
-            tabLineState: tabPositions
-        }
-    }, /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
-        ...(0, $cLzzU$filterDOMProps)(otherProps),
-        ...styleProps,
-        ref: domRef,
-        className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel", `spectrum-TabsPanel--${orientation}`, styleProps.className)
-    }, props.children));
-}
-// @private
-function $65ab70ddbed1564b$var$Tab(props) {
-    let { item: item, state: state } = props;
-    let { key: key, rendered: rendered } = item;
-    let ref = (0, $cLzzU$useRef)();
-    let { tabProps: tabProps, isSelected: isSelected, isDisabled: isDisabled } = (0, $cLzzU$useTab)({
-        key: key
-    }, state, ref);
-    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $cLzzU$useHover)({
-        ...props
-    });
-    let ElementType = item.props.href ? "a" : "div";
-    return /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$FocusRing), {
-        focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
-    }, /*#__PURE__*/ (0, $cLzzU$react).createElement(ElementType, {
-        ...(0, $cLzzU$mergeProps)(tabProps, hoverProps),
-        ref: ref,
-        className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-item", {
-            "is-selected": isSelected,
-            "is-disabled": isDisabled,
-            "is-hovered": isHovered
-        })
-    }, /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$SlotProvider), {
-        slots: {
-            icon: {
-                size: "S",
-                UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Icon")
-            },
-            text: {
-                UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-itemLabel")
-            }
-        }
-    }, typeof rendered === "string" ? /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$Text), null, rendered) : rendered)));
-}
-// @private
-function $65ab70ddbed1564b$var$TabLine(props) {
-    let { orientation: orientation, selectedTab: // Is either the tab node (non-collapsed) or the picker node (collapsed)
-    selectedTab, selectedKey: // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change
-    selectedKey } = props;
-    let { direction: direction } = (0, $cLzzU$useLocale)();
-    let { scale: scale } = (0, $cLzzU$useProvider)();
-    let { tabLineState: tabLineState } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
-    let [style, setStyle] = (0, $cLzzU$useState)({
-        width: undefined,
-        height: undefined
-    });
-    let onResize = (0, $cLzzU$useCallback)(()=>{
-        if (selectedTab) {
-            var _selectedTab_offsetParent;
-            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 = selectedTab.offsetParent) === null || _selectedTab_offsetParent === void 0 ? void 0 : _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, $cLzzU$useLayoutEffect)(()=>{
-        onResize();
-    }, [
-        onResize,
-        scale,
-        selectedKey,
-        tabLineState
-    ]);
-    return /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
-        className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-selectionIndicator"),
-        role: "presentation",
-        style: style
-    });
-}
-function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
-    const tabContext = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
-    const { refs: refs, tabState: tabState, tabProps: tabProps, tabPanelProps: tabPanelProps } = tabContext;
-    const { isQuiet: isQuiet, density: density, isEmphasized: isEmphasized, orientation: orientation } = tabProps;
-    const { selectedTab: selectedTab, collapsed: collapsed, setTabListState: setTabListState } = tabState;
-    const { tablistRef: tablistRef, wrapperRef: wrapperRef } = refs;
-    // Pass original Tab props but override children to create the collection.
-    const state = (0, $cLzzU$useTabListState)({
-        ...tabProps,
-        children: props.children
-    });
-    let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
-    const { tabListProps: tabListProps } = (0, $cLzzU$useTabList)({
-        ...tabProps,
-        ...props
-    }, state, tablistRef);
-    (0, $cLzzU$useEffect)(()=>{
-        // Passing back to root as useTabPanel needs the TabListState
-        setTabListState(state);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        state.disabledKeys,
-        state.selectedItem,
-        state.selectedKey,
-        props.children
-    ]);
-    let collapseStyle = collapsed && orientation !== "vertical" ? {
-        maxWidth: "calc(100% + 1px)",
-        overflow: "hidden",
-        visibility: "hidden",
-        position: "absolute"
-    } : {
-        maxWidth: "calc(100% + 1px)"
-    };
-    let stylePropsFinal = orientation === "vertical" ? styleProps : {
-        style: collapseStyle
-    };
-    if (collapsed && orientation !== "vertical") tabListProps["aria-hidden"] = true;
-    let tabListclassName = (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel-tabs");
-    const tabContent = /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
-        ...stylePropsFinal,
-        ...tabListProps,
-        ref: tablistRef,
-        className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs", `spectrum-Tabs--${orientation}`, tabListclassName, {
-            "spectrum-Tabs--quiet": isQuiet,
-            "spectrum-Tabs--emphasized": isEmphasized,
-            ["spectrum-Tabs--compact"]: density === "compact"
-        }, orientation === "vertical" && styleProps.className)
-    }, [
-        ...state.collection
-    ].map((item)=>/*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$Tab, {
-            key: item.key,
-            item: item,
-            state: state,
-            orientation: orientation
-        })), /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabLine, {
-        orientation: orientation,
-        selectedTab: selectedTab
-    }));
-    if (orientation === "vertical") return tabContent;
-    else return /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
-        ...styleProps,
-        ref: wrapperRef,
-        className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel-collapseWrapper", styleProps.className)
-    }, /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabPicker, {
-        ...props,
-        ...tabProps,
-        visible: collapsed,
-        id: tabPanelProps["aria-labelledby"],
-        state: state,
-        className: tabListclassName
-    }), tabContent);
-}
-function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
-    const { tabState: tabState, tabProps: tabProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
-    const { tabListState: tabListState } = tabState;
-    const factory = (0, $cLzzU$useCallback)((nodes)=>new (0, $cLzzU$ListCollection)(nodes), []);
-    const collection = (0, $cLzzU$useCollection)({
-        items: tabProps.items,
-        ...props
-    }, factory, {
-        suppressTextValueWarning: true
-    });
-    const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
-    return /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabPanel, {
-        ...props,
-        key: tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey
-    }, selectedItem && selectedItem.props.children);
-}
-// @private
-function $65ab70ddbed1564b$var$TabPanel(props) {
-    const { tabState: tabState, tabPanelProps: ctxTabPanelProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
-    const { tabListState: tabListState } = tabState;
-    let ref = (0, $cLzzU$useRef)();
-    const { tabPanelProps: tabPanelProps } = (0, $cLzzU$useTabPanel)(props, tabListState, ref);
-    let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
-    if (ctxTabPanelProps["aria-labelledby"]) tabPanelProps["aria-labelledby"] = ctxTabPanelProps["aria-labelledby"];
-    return /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$FocusRing), {
-        focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
-    }, /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
-        ...styleProps,
-        ...tabPanelProps,
-        ref: ref,
-        className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel-tabpanel", styleProps.className)
-    }, props.children));
-}
-function $65ab70ddbed1564b$var$TabPicker(props) {
-    let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, "aria-labelledby": ariaLabeledBy, "aria-label": ariaLabel, density: density, className: className, id: id, visible: visible } = props;
-    let ref = (0, $cLzzU$useRef)();
-    let [pickerNode, setPickerNode] = (0, $cLzzU$useState)(null);
-    (0, $cLzzU$useEffect)(()=>{
-        let node = (0, $cLzzU$unwrapDOMRef)(ref);
-        setPickerNode(node.current);
-    }, [
-        ref
-    ]);
-    let items = [
-        ...state.collection
-    ];
-    let pickerProps = {
-        "aria-labelledby": ariaLabeledBy,
-        "aria-label": ariaLabel
-    };
-    const style = visible ? {} : {
-        visibility: "hidden",
-        position: "absolute"
-    };
-    // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
-    return /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
-        className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs", "spectrum-Tabs--horizontal", "spectrum-Tabs--isCollapsed", {
-            "spectrum-Tabs--quiet": isQuiet,
-            ["spectrum-Tabs--compact"]: density === "compact",
-            "spectrum-Tabs--emphasized": isEmphasized
-        }, className),
-        style: style,
-        "aria-hidden": visible ? undefined : true
-    }, /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$SlotProvider), {
-        slots: {
-            icon: {
-                size: "S",
-                UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Icon")
-            },
-            button: {
-                focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
-            }
-        }
-    }, /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$Picker), {
-        ...pickerProps,
-        id: id,
-        items: items,
-        ref: ref,
-        isQuiet: true,
-        isDisabled: !visible || isDisabled,
-        selectedKey: state.selectedKey,
-        disabledKeys: state.disabledKeys,
-        onSelectionChange: state.setSelectedKey,
-        UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-picker")
-    }, (item)=>/*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$Item), item.props, item.rendered)), pickerNode && /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabLine, {
-        orientation: "horizontal",
-        selectedTab: pickerNode,
-        selectedKey: state.selectedKey
-    })));
-}
-/**
- * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
- */ // forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-const $65ab70ddbed1564b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $cLzzU$react).forwardRef($65ab70ddbed1564b$var$Tabs);
-