@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/tabs-BrdyBER5.js

@@ -0,0 +1,975 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { c as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, l as $df56164dff5785e2$export$4338b53315abf666, m as $bdb11010cef70236$export$f680877a34711e37, n as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$df3a06d6289f983e, r as $64fa3d84918910a7$export$4d86445c2cf5e3, t as $64fa3d84918910a7$export$2881499e37b75b9a, u as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-B_uiqNa4.js";
+import { O as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18, r as $f645667febf57a63$export$4c014de7c8940b4c, t as $6179b936705e76d3$export$ae780daf29e6d456, v as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useHover-qaMm3XFO.js";
+import { r as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "./FocusScope-CgwbGOBB.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { t as $313b98861ee5dd6c$export$d6875122194c7b44 } from "./useLabels-B2p7RXi5.js";
+import { a as $7135fc7d473fd974$export$a164736487e3f0ae, c as $e1995378a142960e$export$bf788dd355e3a401, i as $7135fc7d473fd974$export$90e00781bc59d8f9, m as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, r as $7135fc7d473fd974$export$4feb769f8ddf26c5, s as $e1995378a142960e$export$18af5c7a9e9b3664, u as $e1995378a142960e$export$fb8073518f34e6ec, v as $880e95eb8b93ba9a$export$ecf600387e221c37, y as $ae20dd8cbca75726$export$d6daf82dcd84e87c } from "./SelectionManager-B8lLv6Ue.js";
+import { i as $cdc5a6778b766db2$export$a9d04c5684123369, t as $e72dd72e1c76a225$export$2f645645f7bca764 } from "./useListState-CD_5vfyy.js";
+import { n as $d3f049242431219c$export$6d3443f2c48bfc20, t as $d3f049242431219c$export$45fda7c47f93fd48 } from "./animation-Bd2peown.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-C-XNeJ_l.js";
+import { t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-DuYL4cdO.js";
+import { t as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./Hidden-8TB37dpK.js";
+import { n as $c8a5a149f625efcf$export$758399f318e6385a, t as $1d5b8b8664671ef2$export$c9549807523555e0 } from "./SelectionIndicator-31L6EI9F.js";
+import { RichLabel } from "./components/rich-label/rich-label.js";
+import { t as cva } from "./dist-DIK9pFxO.js";
+import { r as sprintf, t as __ } from "./build-module-sxK3nxOK.js";
+import { Notice } from "./components/notice/notice.js";
+import React, { cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/@react-aria/focus/dist/useHasTabbableChild.mjs
+function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
+	let isDisabled = options === null || options === void 0 ? void 0 : options.isDisabled;
+	let [hasTabbableChild, setHasTabbableChild] = useState(false);
+	$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+		if ((ref === null || ref === void 0 ? void 0 : ref.current) && !isDisabled) {
+			let update = () => {
+				if (ref.current) setHasTabbableChild(!!$9bf71ea28793e738$export$2d6ec8fc375ceafa(ref.current, { tabbable: true }).nextNode());
+			};
+			update();
+			let observer = new MutationObserver(update);
+			observer.observe(ref.current, {
+				subtree: true,
+				childList: true,
+				attributes: true,
+				attributeFilter: ["tabIndex", "disabled"]
+			});
+			return () => {
+				observer.disconnect();
+			};
+		}
+	});
+	return isDisabled ? false : hasTabbableChild;
+}
+//#endregion
+//#region node_modules/@react-aria/tabs/dist/utils.mjs
+var $99b62ae3ff97ec45$export$c5f62239608282b6 = new WeakMap();
+function $99b62ae3ff97ec45$export$567fc7097e064344(state, key, role) {
+	if (!state) return "";
+	if (typeof key === "string") key = key.replace(/\s+/g, "");
+	let baseId = $99b62ae3ff97ec45$export$c5f62239608282b6.get(state);
+	if (process.env.NODE_ENV !== "production" && !baseId) console.error("There is no tab id, please check if you have rendered the tab panel before the tab list.");
+	return `${baseId}-${role}-${key}`;
+}
+//#endregion
+//#region node_modules/@react-aria/tabs/dist/useTab.mjs
+function $0175d55c2a017ebc$export$fdf4756d5b8ef90a(props, state, ref) {
+	let { key, isDisabled: propsDisabled, shouldSelectOnPressUp } = props;
+	let { selectionManager: manager, selectedKey } = state;
+	let isSelected = key === selectedKey;
+	let isDisabled = propsDisabled || state.isDisabled || state.selectionManager.isDisabled(key);
+	let { itemProps, isPressed } = $880e95eb8b93ba9a$export$ecf600387e221c37({
+		selectionManager: manager,
+		key,
+		ref,
+		isDisabled,
+		shouldSelectOnPressUp,
+		linkBehavior: "selection"
+	});
+	let tabId = $99b62ae3ff97ec45$export$567fc7097e064344(state, key, "tab");
+	let tabPanelId = $99b62ae3ff97ec45$export$567fc7097e064344(state, key, "tabpanel");
+	let { tabIndex } = itemProps;
+	let item = state.collection.getItem(key);
+	let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(item === null || item === void 0 ? void 0 : item.props, { labelable: true });
+	delete domProps.id;
+	let linkProps = $ea8dcbcb9ea1b556$export$7e924b3091a3bd18(item === null || item === void 0 ? void 0 : item.props);
+	let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c({
+		...item === null || item === void 0 ? void 0 : item.props,
+		isDisabled
+	}, ref);
+	return {
+		tabProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, focusableProps, linkProps, itemProps, {
+			id: tabId,
+			"aria-selected": isSelected,
+			"aria-disabled": isDisabled || void 0,
+			"aria-controls": isSelected ? tabPanelId : void 0,
+			tabIndex: isDisabled ? void 0 : tabIndex,
+			role: "tab"
+		}),
+		isSelected,
+		isDisabled,
+		isPressed
+	};
+}
+//#endregion
+//#region node_modules/@react-aria/tabs/dist/useTabPanel.mjs
+function $34bce698202e07cb$export$fae0121b5afe572d(props, state, ref) {
+	let tabIndex = $83013635b024ae3d$export$eac1895992b9f3d6(ref) ? void 0 : 0;
+	var _props_id;
+	const id = $99b62ae3ff97ec45$export$567fc7097e064344(state, (_props_id = props.id) !== null && _props_id !== void 0 ? _props_id : state === null || state === void 0 ? void 0 : state.selectedKey, "tabpanel");
+	return { tabPanelProps: $3ef42575df84b30b$export$9d1611c77c2fe928($313b98861ee5dd6c$export$d6875122194c7b44({
+		...props,
+		id,
+		"aria-labelledby": $99b62ae3ff97ec45$export$567fc7097e064344(state, state === null || state === void 0 ? void 0 : state.selectedKey, "tab")
+	}), {
+		tabIndex,
+		role: "tabpanel",
+		"aria-describedby": props["aria-describedby"],
+		"aria-details": props["aria-details"]
+	}) };
+}
+//#endregion
+//#region node_modules/@react-aria/tabs/dist/TabsKeyboardDelegate.mjs
+var $bfc6f2d60b8a4c40$export$15010ca3c1abe90b = class {
+	getKeyLeftOf(key) {
+		if (this.flipDirection) return this.getNextKey(key);
+		return this.getPreviousKey(key);
+	}
+	getKeyRightOf(key) {
+		if (this.flipDirection) return this.getPreviousKey(key);
+		return this.getNextKey(key);
+	}
+	isDisabled(key) {
+		var _this_collection_getItem_props, _this_collection_getItem;
+		return this.disabledKeys.has(key) || !!((_this_collection_getItem = this.collection.getItem(key)) === null || _this_collection_getItem === void 0 ? void 0 : (_this_collection_getItem_props = _this_collection_getItem.props) === null || _this_collection_getItem_props === void 0 ? void 0 : _this_collection_getItem_props.isDisabled);
+	}
+	getFirstKey() {
+		let key = this.collection.getFirstKey();
+		if (key != null && this.isDisabled(key)) key = this.getNextKey(key);
+		return key;
+	}
+	getLastKey() {
+		let key = this.collection.getLastKey();
+		if (key != null && this.isDisabled(key)) key = this.getPreviousKey(key);
+		return key;
+	}
+	getKeyAbove(key) {
+		if (this.tabDirection) return null;
+		return this.getPreviousKey(key);
+	}
+	getKeyBelow(key) {
+		if (this.tabDirection) return null;
+		return this.getNextKey(key);
+	}
+	getNextKey(startKey) {
+		let key = startKey;
+		do {
+			key = this.collection.getKeyAfter(key);
+			if (key == null) key = this.collection.getFirstKey();
+		} while (key != null && this.isDisabled(key));
+		return key;
+	}
+	getPreviousKey(startKey) {
+		let key = startKey;
+		do {
+			key = this.collection.getKeyBefore(key);
+			if (key == null) key = this.collection.getLastKey();
+		} while (key != null && this.isDisabled(key));
+		return key;
+	}
+	constructor(collection, direction, orientation, disabledKeys = new Set()) {
+		this.collection = collection;
+		this.flipDirection = direction === "rtl" && orientation === "horizontal";
+		this.disabledKeys = disabledKeys;
+		this.tabDirection = orientation === "horizontal";
+	}
+};
+//#endregion
+//#region node_modules/@react-aria/tabs/dist/useTabList.mjs
+function $58d314389b21fa3f$export$773e389e644c5874(props, state, ref) {
+	let { orientation = "horizontal", keyboardActivation = "automatic" } = props;
+	let { collection, selectionManager: manager, disabledKeys } = state;
+	let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	let { collectionProps } = $ae20dd8cbca75726$export$d6daf82dcd84e87c({
+		ref,
+		selectionManager: manager,
+		keyboardDelegate: useMemo(() => new $bfc6f2d60b8a4c40$export$15010ca3c1abe90b(collection, direction, orientation, disabledKeys), [
+			collection,
+			disabledKeys,
+			orientation,
+			direction
+		]),
+		selectOnFocus: keyboardActivation === "automatic",
+		disallowEmptySelection: true,
+		scrollRef: ref,
+		linkBehavior: "selection"
+	});
+	let tabsId = $bdb11010cef70236$export$f680877a34711e37();
+	$99b62ae3ff97ec45$export$c5f62239608282b6.set(state, tabsId);
+	return { tabListProps: {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(collectionProps, $313b98861ee5dd6c$export$d6875122194c7b44({
+			...props,
+			id: tabsId
+		})),
+		role: "tablist",
+		"aria-orientation": orientation,
+		tabIndex: void 0
+	} };
+}
+//#endregion
+//#region node_modules/@react-stately/list/dist/useSingleSelectListState.mjs
+function $a0d645289fe9b86b$export$e7f05e985daf4b5f(props) {
+	var _props_defaultSelectedKey;
+	let [selectedKey, setSelectedKey] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.selectedKey, (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : null, props.onSelectionChange);
+	let selectedKeys = useMemo(() => selectedKey != null ? [selectedKey] : [], [selectedKey]);
+	let { collection, disabledKeys, selectionManager } = $e72dd72e1c76a225$export$2f645645f7bca764({
+		...props,
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		allowDuplicateSelectionEvents: true,
+		selectedKeys,
+		onSelectionChange: (keys) => {
+			if (keys === "all") return;
+			var _keys_values_next_value;
+			let key = (_keys_values_next_value = keys.values().next().value) !== null && _keys_values_next_value !== void 0 ? _keys_values_next_value : null;
+			if (key === selectedKey && props.onSelectionChange) props.onSelectionChange(key);
+			setSelectedKey(key);
+		}
+	});
+	return {
+		collection,
+		disabledKeys,
+		selectionManager,
+		selectedKey,
+		setSelectedKey,
+		selectedItem: selectedKey != null ? collection.getItem(selectedKey) : null
+	};
+}
+//#endregion
+//#region node_modules/@react-stately/tabs/dist/useTabListState.mjs
+function $76f919a04c5a7d14$export$4ba071daf4e486(props) {
+	var _props_defaultSelectedKey, _ref;
+	let state = $a0d645289fe9b86b$export$e7f05e985daf4b5f({
+		...props,
+		onSelectionChange: props.onSelectionChange ? (key) => {
+			var _props_onSelectionChange;
+			if (key != null) (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 || _props_onSelectionChange.call(props, key);
+		} : void 0,
+		suppressTextValueWarning: true,
+		defaultSelectedKey: (_ref = (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : $76f919a04c5a7d14$var$findDefaultSelectedKey(props.collection, props.disabledKeys ? new Set(props.disabledKeys) : new Set())) !== null && _ref !== void 0 ? _ref : void 0
+	});
+	let { selectionManager, collection, selectedKey: currentSelectedKey } = state;
+	let lastSelectedKey = useRef(currentSelectedKey);
+	useEffect(() => {
+		let selectedKey = currentSelectedKey;
+		if (props.selectedKey == null && (selectionManager.isEmpty || selectedKey == null || !collection.getItem(selectedKey))) {
+			selectedKey = $76f919a04c5a7d14$var$findDefaultSelectedKey(collection, state.disabledKeys);
+			if (selectedKey != null) selectionManager.setSelectedKeys([selectedKey]);
+		}
+		if (selectedKey != null && selectionManager.focusedKey == null || !selectionManager.isFocused && selectedKey !== lastSelectedKey.current) selectionManager.setFocusedKey(selectedKey);
+		lastSelectedKey.current = selectedKey;
+	});
+	return {
+		...state,
+		isDisabled: props.isDisabled || false
+	};
+}
+function $76f919a04c5a7d14$var$findDefaultSelectedKey(collection, disabledKeys) {
+	let selectedKey = null;
+	if (collection) {
+		var _collection_getItem_props, _collection_getItem, _collection_getItem_props1, _collection_getItem1;
+		selectedKey = collection.getFirstKey();
+		while (selectedKey != null && (disabledKeys.has(selectedKey) || ((_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : (_collection_getItem_props = _collection_getItem.props) === null || _collection_getItem_props === void 0 ? void 0 : _collection_getItem_props.isDisabled)) && selectedKey !== collection.getLastKey()) selectedKey = collection.getKeyAfter(selectedKey);
+		if (selectedKey != null && (disabledKeys.has(selectedKey) || ((_collection_getItem1 = collection.getItem(selectedKey)) === null || _collection_getItem1 === void 0 ? void 0 : (_collection_getItem_props1 = _collection_getItem1.props) === null || _collection_getItem_props1 === void 0 ? void 0 : _collection_getItem_props1.isDisabled)) && selectedKey === collection.getLastKey()) selectedKey = collection.getFirstKey();
+	}
+	return selectedKey;
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/Tabs.mjs
+var $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f = createContext(null);
+var $5e8ad37a45e1c704$export$364712098d2aa57c = createContext(null);
+var $5e8ad37a45e1c704$export$b2539bed5023c21c = forwardRef(function Tabs(props, ref) {
+	[props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
+	let { children, orientation = "horizontal" } = props;
+	children = useMemo(() => typeof children === "function" ? children({
+		orientation,
+		defaultChildren: null
+	}) : children, [children, orientation]);
+	return React.createElement($e1995378a142960e$export$bf788dd355e3a401, { content: children }, (collection) => React.createElement($5e8ad37a45e1c704$var$TabsInner, {
+		props,
+		collection,
+		tabsRef: ref
+	}));
+});
+function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
+	let { orientation = "horizontal" } = props;
+	let state = $76f919a04c5a7d14$export$4ba071daf4e486({
+		...props,
+		collection,
+		children: void 0
+	});
+	let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f({ within: true });
+	let values = useMemo(() => ({
+		orientation,
+		isFocusWithin: isFocused,
+		isFocusVisible
+	}), [
+		orientation,
+		isFocused,
+		isFocusVisible
+	]);
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-Tabs",
+		values
+	});
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true });
+	return React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, focusProps),
+		ref,
+		slot: props.slot || void 0,
+		"data-focused": isFocused || void 0,
+		"data-orientation": orientation,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-disabled": state.isDisabled || void 0
+	}, React.createElement($64fa3d84918910a7$export$2881499e37b75b9a, { values: [[$5e8ad37a45e1c704$export$cfa7aa87c26e7d1f, props], [$5e8ad37a45e1c704$export$364712098d2aa57c, state]] }, renderProps.children));
+}
+var $5e8ad37a45e1c704$export$e51a686c67fdaa2d = forwardRef(function TabList(props, ref) {
+	return useContext($5e8ad37a45e1c704$export$364712098d2aa57c) ? React.createElement($5e8ad37a45e1c704$var$TabListInner, {
+		props,
+		forwardedRef: ref
+	}) : React.createElement($e1995378a142960e$export$fb8073518f34e6ec, props);
+});
+function $5e8ad37a45e1c704$var$TabListInner({ props, forwardedRef: ref }) {
+	let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
+	let { CollectionRoot } = useContext($7135fc7d473fd974$export$4feb769f8ddf26c5);
+	let { orientation = "horizontal", keyboardActivation = "automatic" } = $64fa3d84918910a7$export$fabf2dc03a41866e($5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
+	let objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
+	let { tabListProps } = $58d314389b21fa3f$export$773e389e644c5874({
+		...props,
+		orientation,
+		keyboardActivation
+	}, state, objectRef);
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		children: null,
+		defaultClassName: "react-aria-TabList",
+		values: {
+			orientation,
+			state
+		}
+	});
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true });
+	delete DOMProps.id;
+	return React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tabListProps),
+		ref: objectRef,
+		"data-orientation": orientation || void 0
+	}, React.createElement($c8a5a149f625efcf$export$758399f318e6385a, null, React.createElement(CollectionRoot, {
+		collection: state.collection,
+		persistedKeys: $7135fc7d473fd974$export$90e00781bc59d8f9(state.selectionManager.focusedKey)
+	})));
+}
+var $5e8ad37a45e1c704$var$TabItemNode = class extends $23b9f4fcf0fe224b$export$d68d59712b04d9d1 {};
+$5e8ad37a45e1c704$var$TabItemNode.type = "item";
+var $5e8ad37a45e1c704$export$3e41faf802a29e71 = $e1995378a142960e$export$18af5c7a9e9b3664($5e8ad37a45e1c704$var$TabItemNode, (props, forwardedRef, item) => {
+	let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
+	let ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
+	let { tabProps, isSelected, isDisabled, isPressed } = $0175d55c2a017ebc$export$fdf4756d5b8ef90a({
+		key: item.key,
+		...props
+	}, state, ref);
+	let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+	let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+		isDisabled,
+		onHoverStart: props.onHoverStart,
+		onHoverEnd: props.onHoverEnd,
+		onHoverChange: props.onHoverChange
+	});
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		id: void 0,
+		children: item.rendered,
+		defaultClassName: "react-aria-Tab",
+		values: {
+			isSelected,
+			isDisabled,
+			isFocused,
+			isFocusVisible,
+			isPressed,
+			isHovered
+		}
+	});
+	let ElementType = item.props.href ? $64fa3d84918910a7$export$df3a06d6289f983e.a : $64fa3d84918910a7$export$df3a06d6289f983e.div;
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true });
+	delete DOMProps.id;
+	delete DOMProps.onClick;
+	return React.createElement(ElementType, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tabProps, focusProps, hoverProps),
+		ref,
+		"data-selected": isSelected || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-focused": isFocused || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-pressed": isPressed || void 0,
+		"data-hovered": isHovered || void 0
+	}, React.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, { value: { isSelected } }, renderProps.children));
+});
+var $5e8ad37a45e1c704$export$3d96ec278d3efce4 = $f39a9eba43920ace$export$86427a43e3e48ebb(function TabPanel(props, forwardedRef) {
+	const state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
+	let ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
+	let isSelected = state.selectedKey === props.id;
+	let [isInitiallySelected, setInitiallySelected] = useState(state.selectedKey != null ? isSelected : null);
+	if (isInitiallySelected == null && state.selectedKey != null) setInitiallySelected(isSelected);
+	else if (!isSelected && isInitiallySelected) setInitiallySelected(false);
+	let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, isSelected);
+	if (!isSelected && !props.shouldForceMount && !isExiting) return null;
+	return React.createElement($5e8ad37a45e1c704$var$TabPanelInner, {
+		...props,
+		tabPanelRef: ref,
+		isInitiallySelected: isInitiallySelected || false,
+		isExiting
+	});
+});
+function $5e8ad37a45e1c704$var$TabPanelInner(props) {
+	let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
+	let { id, tabPanelRef: ref, isInitiallySelected, isExiting, ...otherProps } = props;
+	let { tabPanelProps } = $34bce698202e07cb$export$fae0121b5afe572d(props, state, ref);
+	let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+	let isSelected = state.selectedKey === props.id;
+	let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(ref) && !isInitiallySelected;
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-TabPanel",
+		values: {
+			isFocused,
+			isFocusVisible,
+			isInert: $cdc5a6778b766db2$export$a9d04c5684123369(!isSelected),
+			isEntering,
+			isExiting,
+			state
+		}
+	});
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps, { global: true });
+	delete DOMProps.id;
+	let domProps = isSelected ? $3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, tabPanelProps, focusProps, renderProps) : $3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps);
+	return React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...domProps,
+		ref,
+		"data-focused": isFocused || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		inert: $cdc5a6778b766db2$export$a9d04c5684123369(!isSelected || props.inert),
+		"data-inert": !isSelected ? "true" : void 0,
+		"data-entering": isEntering || void 0,
+		"data-exiting": isExiting || void 0
+	}, React.createElement($64fa3d84918910a7$export$2881499e37b75b9a, { values: [[$5e8ad37a45e1c704$export$cfa7aa87c26e7d1f, null], [$5e8ad37a45e1c704$export$364712098d2aa57c, null]] }, React.createElement($7135fc7d473fd974$export$4feb769f8ddf26c5.Provider, { value: $7135fc7d473fd974$export$a164736487e3f0ae }, renderProps.children)));
+}
+//#endregion
+//#region lib/components/tabs/tabs.jsx
+var tabListClasses = cva("es:flex", {
+	variants: {
+		type: { bubble: "es:bg-white es:rounded-28 es:p-1.5 es:gap-px" },
+		orientation: {
+			horizontal: "es:overflow-x-auto es:overflow-y-visible es:max-h-none es:items-stretch",
+			vertical: "es:flex-col es:gap-0.75 es:overflow-y-auto es:self-start es:max-h-[85vh]"
+		}
+	},
+	compoundVariants: [
+		{
+			type: ["underline", "underlineSecondary"],
+			orientation: "vertical",
+			class: "es:bg-white"
+		},
+		{
+			type: ["underline", "underlineSecondary"],
+			orientation: "horizontal",
+			class: "es:border-b es:border-b-secondary-200 es:justify-center es:rounded-t-lg"
+		},
+		{
+			type: ["underline", "underlineSecondary"],
+			orientation: "horizontal",
+			class: "es:px-1"
+		},
+		{
+			type: ["underline", "underlineSecondary"],
+			orientation: "vertical",
+			class: "es:rounded-28 es:p-1.5"
+		},
+		{
+			type: "underline",
+			orientation: "horizontal",
+			class: "es:gap-px"
+		},
+		{
+			type: ["bubble"],
+			orientation: "horizontal",
+			class: "es:h-15 es:has-any-icon:h-20"
+		},
+		{
+			type: ["pill", "pillCompact"],
+			class: "es:bg-secondary-50"
+		},
+		{
+			type: ["pill", "pillCompact"],
+			orientation: "horizontal",
+			class: "es:rounded-full es:gap-0.5 es:mx-auto es:w-fit"
+		},
+		{
+			type: ["pill"],
+			orientation: "vertical",
+			class: "es:rounded-4xl es:p-3"
+		},
+		{
+			type: ["pillCompact"],
+			orientation: "vertical",
+			class: "es:rounded-3xl es:p-3"
+		},
+		{
+			type: ["chips"],
+			orientation: "horizontal",
+			class: "es:flex es:gap-0.75 es:rounded-xl"
+		},
+		{
+			type: ["pill", "pillCompact"],
+			flat: false,
+			class: "es:shadow es:shadow-black/5"
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		flat: false
+	}
+});
+var tabClasses = cva([
+	"es:group es:relative es:shrink-0",
+	"es:flex es:items-center es:gap-1.5",
+	"es:select-none",
+	"es:transition-plus es:text-center es:text-12 es:leading-[1.15] es:text-box-trim",
+	"es:any-focus:outline-hidden",
+	"es:contrast-more:inset-ring es:contrast-more:inset-ring-accent-500/0 es:contrast-more:focus-visible:inset-ring-accent-500",
+	"es:disabled:text-secondary-400",
+	"es:font-variation-[\"wdth\"_102,\"wght\"_325,\"ROND\"_0,\"slnt\"_0,\"GRAD\"_0] es:hover:font-variation-[\"wdth\"_102,\"wght\"_325,\"ROND\"_100,\"slnt\"_0,\"GRAD\"_0] es:selected:font-variation-[\"wdth\"_102,\"wght\"_325,\"ROND\"_50,\"slnt\"_0,\"GRAD\"_50]"
+], {
+	variants: {
+		invisible: { true: "es:hidden" },
+		iconWithLabel: {
+			true: "es:justify-start",
+			false: "es:justify-center"
+		},
+		selected: { false: [
+			"es:btn-group-h:not-pressed:not-after-current:not-first:rounded-l-sm",
+			"es:btn-group-h:not-pressed:not-before-current:not-last:rounded-r-sm",
+			"es:btn-group-v:not-pressed:not-after-current:not-first:rounded-t-sm",
+			"es:btn-group-v:not-pressed:not-before-current:not-last:rounded-b-sm"
+		] }
+	},
+	compoundVariants: [
+		{
+			type: [
+				"underline",
+				"underlineSecondary",
+				"bubble"
+			],
+			class: ["es:flex-col es:justify-center", "es:text-secondary-700 es:selected:text-accent-700"]
+		},
+		{
+			type: ["pill", "pillCompact"],
+			vertical: true,
+			flat: false,
+			class: "es:selected:shadow-md es:selected:shadow-accent-700/10"
+		},
+		{
+			vertical: false,
+			type: "underline",
+			class: [
+				"es:px-3 es:not-has-any-icon:py-3 es:has-any-icon:py-2.5 es:rounded-t-lg es:min-h-12",
+				"es:after:content-[\"\"] es:after:absolute es:after:bottom-0 es:after:left-0 es:after:right-0 es:after:w-3/5 es:after:mx-auto es:after:h-0.75 es:selected:after:bg-accent-600",
+				"es:selected:after:inset-shadow-xs es:selected:after:inset-shadow-accent-50/30",
+				"es:not-selected:hover:bg-secondary-50 es:selected:hover:bg-accent-600/5",
+				"es:selected:text-accent-600",
+				"es:after:rounded-t-full es:after:transition"
+			]
+		},
+		{
+			vertical: false,
+			type: "underlineSecondary",
+			class: [
+				"es:px-3 es:pt-2 es:pb-2.5 es:rounded-t-sm es:min-h-12",
+				"es:not-selected:hover:bg-secondary-50 es:selected:hover:bg-accent-600/5",
+				"es:after:content-[\"\"] es:after:absolute es:after:bottom-0 es:after:left-0 es:after:right-0 es:after:w-full es:after:mx-auto es:after:h-0.75",
+				"es:after:bg-linear-to-b es:hover:not-selected:not-disabled:after:from-secondary-200 es:hover:not-selected:not-disabled:after:to-secondary-300 es:selected:after:from-accent-500 es:selected:after:to-accent-600",
+				"es:after:transition"
+			]
+		},
+		{
+			vertical: true,
+			type: ["underline", "underlineSecondary"],
+			class: [
+				"es:p-2 es:rounded-xl es:not-has-any-icon:rounded-3xl es:has-any-icon:aspect-4/3 es:not-has-any-icon:aspect-5/3",
+				"es:text-secondary-500 es:selected:text-accent-800",
+				"es:not-has-any-icon:selected:bg-accent-600/5 es:not-has-any-icon:not-selected:hover:bg-secondary-50"
+			]
+		},
+		{
+			type: ["bubble"],
+			class: [
+				"es:rounded-xl es:not-has-any-icon:rounded-3xl",
+				"es:text-secondary-500 es:selected:text-accent-800",
+				"es:not-has-any-icon:selected:bg-accent-600/5 es:not-has-any-icon:not-selected:hover:bg-secondary-50"
+			]
+		},
+		{
+			type: ["bubble"],
+			vertical: false,
+			class: "es:px-2 es:py-0.5 es:grow"
+		},
+		{
+			type: ["bubble"],
+			vertical: true,
+			class: "es:p-2 es:has-any-icon:aspect-4/3 es:not-has-any-icon:aspect-5/3"
+		},
+		{
+			type: ["pill", "pillCompact"],
+			class: [
+				"es:rounded-full",
+				"es:selected:bg-accent-50 es:not-selected:hover:bg-secondary-100 es:selected:text-accent-900",
+				"es:bg-linear-to-br es:selected:from-accent-600/5 es:selected:to-accent-600/15",
+				"es:selected:inset-ring es:selected:inset-ring-accent-600/10"
+			]
+		},
+		{
+			type: ["pill"],
+			class: ["es:py-3 es:min-h-12"]
+		},
+		{
+			type: ["pillCompact"],
+			class: ["es:py-2 es:min-h-9.5"]
+		},
+		{
+			type: ["pill"],
+			vertical: false,
+			class: ["es:justify-center es:px-6"]
+		},
+		{
+			type: ["pillCompact"],
+			vertical: false,
+			class: ["es:justify-center es:px-3"]
+		},
+		{
+			type: ["pill"],
+			vertical: true,
+			class: ["es:pl-5 es:has-any-icon:pl-4 es:pr-6"]
+		},
+		{
+			type: ["pillCompact"],
+			vertical: true,
+			class: ["es:pl-4 es:has-any-icon:pl-3 es:pr-3"]
+		},
+		{
+			type: ["chips"],
+			class: [
+				"es:bg-secondary-50 es:selected:bg-accent-500",
+				"es:inset-ring es:inset-ring-secondary-200/30 es:selected:inset-ring-accent-600/30",
+				"es:bg-linear-to-b es:from-25% es:from-accent-700/0 es:to-accent-700/0 es:selected:from-accent-700/10 es:selected:to-accent-700/30",
+				"es:selected:inset-shadow-sm es:selected:inset-shadow-accent-50/30",
+				"es:text-secondary-700 es:selected:text-white",
+				"es:min-h-7.5 es:rounded-lg es:selected:rounded-xl",
+				"es:transition-plus",
+				"es:pl-3 es:has-any-icon:pl-2 es:pr-3 es:py-1.5"
+			]
+		},
+		{
+			type: ["chips"],
+			flat: false,
+			class: "es:selected:shadow-xs es:selected:shadow-black/5"
+		}
+	]
+});
+var tabIconClasses = cva("es:transition es:duration-200 es:ease-spring-bouncy", {
+	variants: {},
+	compoundVariants: [{
+		vertical: true,
+		type: ["underline", "underlineSecondary"],
+		class: [
+			"es:bg-white es:px-3.5 es:py-1.25 es:rounded-full",
+			"es:group-hover:bg-surface-500/7",
+			"es:group-selected:bg-accent-500/10 es:group-selected:text-accent-800",
+			"es:group-hover:group-selected:ring es:group-hover:group-selected:ring-accent-500/10"
+		]
+	}, {
+		type: ["bubble"],
+		class: [
+			"es:bg-white es:px-3.5 es:py-1.25 es:rounded-full",
+			"es:group-hover:bg-surface-500/7",
+			"es:group-selected:bg-accent-500/10 es:group-selected:text-accent-800",
+			"es:group-hover:group-selected:ring es:group-hover:group-selected:ring-accent-500/10"
+		]
+	}]
+});
+var tabBadgeClasses = cva([
+	"es:transition-plus",
+	"es:flex es:items-center-safe es:justify-center",
+	"es:min-h-4.5 es:min-w-4.5 es:leading-none es:rounded-full es:shrink-0",
+	"es:text-12 es:leading-none es:text-box-trim",
+	"es:any-icon:size-2.5"
+], {
+	variants: {},
+	compoundVariants: [
+		{
+			type: [
+				"underline",
+				"underlineSecondary",
+				"bubble"
+			],
+			class: ["es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white", "es:group-hover:ring es:group-hover:ring-white"]
+		},
+		{
+			vertical: true,
+			icon: false,
+			type: ["underline", "underlineSecondary"],
+			class: "es:absolute es:top-0 es:right-0"
+		},
+		{
+			vertical: true,
+			icon: true,
+			type: ["underline", "underlineSecondary"],
+			class: "es:absolute es:top-1.5 es:right-6 es:group-hover:bg-surface-100"
+		},
+		{
+			type: ["pill", "pillCompact"],
+			class: "es:ml-auto es:bg-white es:group-selected:bg-accent-600 es:group-selected:text-white"
+		},
+		{
+			icon: false,
+			type: ["bubble"],
+			vertical: true,
+			class: "es:absolute es:top-0 es:right-0"
+		},
+		{
+			icon: true,
+			type: ["bubble"],
+			class: "es:absolute es:group-hover:bg-surface-100"
+		},
+		{
+			icon: true,
+			type: ["bubble"],
+			vertical: false,
+			class: "es:top-1 es:right-11.5"
+		},
+		{
+			icon: true,
+			type: ["bubble"],
+			vertical: true,
+			class: "es:top-1.5 es:right-6"
+		},
+		{
+			type: ["chips"],
+			class: "es:bg-secondary-200/50 es:group-selected:bg-accent-600 es:group-selected:text-white"
+		},
+		{
+			type: ["chips"],
+			vertical: true,
+			class: "es:ml-auto"
+		}
+	],
+	defaultVariants: {
+		vertical: false,
+		simple: false,
+		icon: false,
+		flat: false
+	}
+});
+var tabPanelClasses = cva("es:space-y-3 es:text-13 es:any-focus:outline-hidden", {
+	variants: {},
+	compoundVariants: [{
+		type: [
+			"pill",
+			"pillCompact",
+			"bubble",
+			"chips"
+		],
+		vertical: false,
+		class: "es:mt-4"
+	}, {
+		type: ["underline", "underlineSecondary"],
+		vertical: false,
+		class: "es:mt-1"
+	}],
+	defaultVariants: {
+		flat: false,
+		vertical: false
+	}
+});
+/**
+* Main tab container.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {boolean} [props.vertical=false] - Whether the tabs are vertical.
+* @param {string} [props.className] - Classes to pass to the tabs container.
+* @param {TabsType} [props.type='underline'] - Design of the tabs.
+* @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+* @param {string} [props.defaultSelectedKey] - **(uncontrolled mode)** The initial selected tab ID.
+* @param {string} [props.selectedKey] - **(controlled mode)** The selected tab ID.
+* @param {Function} [props.onSelectionChange] - Handler that is called when the selection changes. `(key: string) => void`.
+* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @returns {JSX.Element} The Tabs component.
+*
+* @typedef {'underline' | 'underlineSecondary' | 'pill' | 'pillCompact' | 'bubble' | 'chips'} TabsType
+*
+* @example
+* <Tabs>
+* 	<TabList>
+* 		<Tab>Tab 1</Tab>
+* 		<Tab>Tab 2</Tab>
+* 	</TabList>
+* 	<TabPanel>Content 1</TabPanel>
+* 	<TabPanel>Content 2</TabPanel>
+* </Tabs>
+*/
+var Tabs = (props) => {
+	const { children, vertical, className, hidden, type = "underline", flat, ...rest } = props;
+	const baseId = useId();
+	if (hidden) return null;
+	let tabPanelCounter = 1;
+	let tabCounter = 1;
+	const preparedChildren = Array.isArray(children) ? children : [children];
+	let realTabIds = preparedChildren?.[0]?.props?.children?.map((tab, i) => tab?.props?.id ?? `tab-${baseId}-${i + 1}`);
+	const childrenWithIds = preparedChildren.reduce((acc, child, index) => {
+		if (child.type.displayName === "TabList") {
+			const childItems = Array.isArray(child?.props?.children) ? child?.props?.children : [child?.props?.children].filter(Boolean);
+			tabCounter = (childItems?.length ?? 0) + 1;
+			if (childItems.length < 1) return acc;
+			return [...acc, cloneElement(child, {
+				key: index,
+				type
+			}, childItems?.map((innerChild, i) => cloneElement(innerChild, {
+				id: innerChild?.props?.id ?? realTabIds?.[i] ?? `tab-${baseId}-${i + 1}`,
+				key: i,
+				isParentVertical: vertical,
+				type,
+				flat
+			})))];
+		}
+		if (child.type.displayName === "TabPanel") return [...acc, cloneElement(child, {
+			id: realTabIds?.[tabPanelCounter++ - 1] ?? `tab-${baseId}-${tabPanelCounter++}`,
+			key: index,
+			className: child.props.className,
+			flat,
+			type,
+			vertical
+		})];
+		return acc;
+	}, []);
+	if (tabCounter !== tabPanelCounter) return jsx(Notice, {
+		type: "error",
+		label: __("Component is not configured correctly. Skipping render to prevent errors.", "eightshift-ui-components"),
+		subtitle: sprintf(__("Number of <Tab>s (%s) and <TabPanel>s (%s) should be the same. <Tab>s should be within a <TabList>.", "eightshift-ui-components"), tabCounter - 1, tabPanelCounter - 1),
+		alignIconToTitle: true
+	});
+	return jsx($5e8ad37a45e1c704$export$b2539bed5023c21c, {
+		...rest,
+		orientation: vertical ? "vertical" : "horizontal",
+		className: clsx(vertical ? "es:grid es:gap-4" : "es:flex-col", vertical && [
+			"underline",
+			"underlineSecondary",
+			"bubble"
+		].includes(type) && "es:grid-cols-[minmax(0,7.5rem)_minmax(0,1fr)]", vertical && ![
+			"underline",
+			"underlineSecondary",
+			"bubble"
+		].includes(type) && "es:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]", className),
+		children: childrenWithIds
+	});
+};
+Tabs.displayName = "Tabs";
+/**
+* Container for tabs within the Tabs component.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {string} [props.className] - Classes to pass to the tab list.
+*
+* @returns {JSX.Element} The TabList component.
+*
+* @see {@link Tabs} for usage example.
+*/
+var TabList = (props) => {
+	const { children, "aria-label": ariaLabel, className, type, flat, ...other } = props;
+	return jsx($5e8ad37a45e1c704$export$e51a686c67fdaa2d, {
+		"aria-label": ariaLabel ?? __("tabs", "eightshift-ui-components"),
+		className: ({ orientation }) => clsx(tabListClasses({
+			orientation,
+			type,
+			flat
+		}), className),
+		...other,
+		children
+	});
+};
+TabList.displayName = "TabList";
+/**
+* A tab within the TabList component, in the Tabs component.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {boolean} [props.disabled] - Whether the tab is disabled.
+* @param {string} [props.className] - Classes to pass to the tab.
+* @param {JSX.Element} [props.icon] - Icon to show on the tab.
+* @param {string|JSX.Element} [props.badge] - Badge to render besides the label.
+* @param {boolean} [props.invisible] - If `true`, the tab is disabled and not rendered, but is not unmounted from the DOM.
+* @param {string} [props.label] - Tab label. **Note**: overrides inner items!
+* @param {string} [props.subtitle] - Tab subtitle. **Note**: overrides inner items!
+* @param {string} [props.id] - The tab unique identifier.
+*
+* @returns {JSX.Element} The Tab component.
+*
+* @see {@link Tabs} for usage example.
+*/
+var Tab = (props) => {
+	const { children, disabled, isParentVertical, className, badgeClassName, icon, label, subtitle, type, badge, invisible, flat, ...other } = props;
+	return jsxs($5e8ad37a45e1c704$export$3e41faf802a29e71, {
+		...other,
+		isDisabled: disabled || invisible,
+		className: clsx(tabClasses({
+			vertical: Boolean(isParentVertical),
+			type,
+			flat: Boolean(flat),
+			invisible: Boolean(invisible),
+			iconWithLabel: Boolean(icon && children)
+		}), className),
+		children: [icon && jsx("div", {
+			className: tabIconClasses({
+				vertical: Boolean(isParentVertical),
+				type
+			}),
+			children: icon
+		}), jsxs("div", {
+			className: clsx(!isParentVertical && "es:flex es:items-center-safe es:gap-1.5", isParentVertical && "es:contents"),
+			children: [
+				subtitle && jsx(RichLabel, {
+					label: label ?? children,
+					subtitle,
+					noColor: true
+				}),
+				!subtitle && (label ?? children),
+				badge && jsx("span", {
+					className: clsx(tabBadgeClasses({
+						vertical: Boolean(isParentVertical),
+						type,
+						simple: !isValidElement(badge),
+						icon: Boolean(icon)
+					}), badgeClassName),
+					children: badge
+				})
+			]
+		})]
+	});
+};
+Tab.displayName = "Tab";
+/**
+* Container for tab content within the Tabs component.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {string} [props.className] - Classes to pass to the tab content container.
+*
+* @returns {JSX.Element} The TabPanel component.
+*
+* @see {@link Tabs} for usage example.
+*/
+var TabPanel = (props) => {
+	const { children, className, type, vertical, ...other } = props;
+	return jsx($5e8ad37a45e1c704$export$3d96ec278d3efce4, {
+		...other,
+		className: clsx(tabPanelClasses({
+			type,
+			vertical
+		}), className),
+		children
+	});
+};
+TabPanel.displayName = "TabPanel";
+//#endregion
+export { Tabs as i, TabList as n, TabPanel as r, Tab as t };