@eightshift/ui-components 3.0.1 → 5.0.0

package/dist/components/tabs/tabs.js

@@ -1,702 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as $880e95eb8b93ba9a$export$ecf600387e221c37, k as $ae20dd8cbca75726$export$d6daf82dcd84e87c, d as $e1995378a142960e$export$18af5c7a9e9b3664, f as $e1995378a142960e$export$fb8073518f34e6ec, g as $7135fc7d473fd974$export$4feb769f8ddf26c5, m as $7135fc7d473fd974$export$a164736487e3f0ae, e as $e1995378a142960e$export$bf788dd355e3a401, n as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "../../Collection-CZxddMZS.js";
-import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, l as $df56164dff5785e2$export$4338b53315abf666, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-DkCSC521.js";
-import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import React__default, { version, useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, isValidElement, useId, cloneElement } from "react";
-import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-Cucx-xSA.js";
-import { a as $f645667febf57a63$export$4c014de7c8940b4c, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-DwDr6ozG.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-D8cxd1Z8.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-Cri5BFRz.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-D2KUdwNL.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CV5l3lf6.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-CMGsRHHh.js";
-import { _ as __, s as sprintf } from "../../default-i18n-CT_oS1Fy.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { c as cva } from "../../index-BKGQ6jGS.js";
-import { Notice } from "../notice/notice.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-function $cdc5a6778b766db2$export$a9d04c5684123369(value) {
-  const pieces = version.split(".");
-  const major = parseInt(pieces[0], 10);
-  if (major >= 19) return value;
-  return value ? "true" : void 0;
-}
-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) {
-          let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(ref.current, {
-            tabbable: true
-          });
-          setHasTabbableChild(!!walker.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;
-}
-const $99b62ae3ff97ec45$export$c5f62239608282b6 = /* @__PURE__ */ 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);
-  return `${baseId}-${role}-${key}`;
-}
-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({
-    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
-  };
-}
-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");
-  const tabPanelProps = $313b98861ee5dd6c$export$d6875122194c7b44({
-    ...props,
-    id,
-    "aria-labelledby": $99b62ae3ff97ec45$export$567fc7097e064344(state, state === null || state === void 0 ? void 0 : state.selectedKey, "tab")
-  });
-  return {
-    tabPanelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(tabPanelProps, {
-      tabIndex,
-      role: "tabpanel",
-      "aria-describedby": props["aria-describedby"],
-      "aria-details": props["aria-details"]
-    })
-  };
-}
-class $bfc6f2d60b8a4c40$export$15010ca3c1abe90b {
-  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(key) {
-    do {
-      key = this.collection.getKeyAfter(key);
-      if (key == null) key = this.collection.getFirstKey();
-    } while (this.isDisabled(key));
-    return key;
-  }
-  getPreviousKey(key) {
-    do {
-      key = this.collection.getKeyBefore(key);
-      if (key == null) key = this.collection.getLastKey();
-    } while (this.isDisabled(key));
-    return key;
-  }
-  constructor(collection, direction, orientation, disabledKeys = /* @__PURE__ */ new Set()) {
-    this.collection = collection;
-    this.flipDirection = direction === "rtl" && orientation === "horizontal";
-    this.disabledKeys = disabledKeys;
-    this.tabDirection = orientation === "horizontal";
-  }
-}
-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 delegate = useMemo(() => new $bfc6f2d60b8a4c40$export$15010ca3c1abe90b(collection, direction, orientation, disabledKeys), [
-    collection,
-    disabledKeys,
-    orientation,
-    direction
-  ]);
-  let { collectionProps } = $ae20dd8cbca75726$export$d6daf82dcd84e87c({
-    ref,
-    selectionManager: manager,
-    keyboardDelegate: delegate,
-    selectOnFocus: keyboardActivation === "automatic",
-    disallowEmptySelection: true,
-    scrollRef: ref,
-    linkBehavior: "selection"
-  });
-  let tabsId = $bdb11010cef70236$export$f680877a34711e37();
-  $99b62ae3ff97ec45$export$c5f62239608282b6.set(state, tabsId);
-  let tabListLabelProps = $313b98861ee5dd6c$export$d6875122194c7b44({
-    ...props,
-    id: tabsId
-  });
-  return {
-    tabListProps: {
-      ...$3ef42575df84b30b$export$9d1611c77c2fe928(collectionProps, tabListLabelProps),
-      role: "tablist",
-      "aria-orientation": orientation,
-      tabIndex: void 0
-    }
-  };
-}
-function $76f919a04c5a7d14$export$4ba071daf4e486(props) {
-  var _props_defaultSelectedKey, _ref;
-  let state = $a0d645289fe9b86b$export$e7f05e985daf4b5f({
-    ...props,
-    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) : /* @__PURE__ */ 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;
-}
-const $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f = /* @__PURE__ */ createContext(null);
-const $5e8ad37a45e1c704$export$364712098d2aa57c = /* @__PURE__ */ createContext(null);
-const $5e8ad37a45e1c704$export$b2539bed5023c21c = /* @__PURE__ */ 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 /* @__PURE__ */ React__default.createElement($e1995378a142960e$export$bf788dd355e3a401, {
-    content: children
-  }, (collection) => /* @__PURE__ */ React__default.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
-  });
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props),
-    ...focusProps,
-    ...renderProps,
-    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
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f,
-        props
-      ],
-      [
-        $5e8ad37a45e1c704$export$364712098d2aa57c,
-        state
-      ]
-    ]
-  }, renderProps.children));
-}
-const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = /* @__PURE__ */ forwardRef(function TabList(props, ref) {
-  let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
-  return state ? /* @__PURE__ */ React__default.createElement($5e8ad37a45e1c704$var$TabListInner, {
-    props,
-    forwardedRef: ref
-  }) : /* @__PURE__ */ React__default.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);
-  delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ...DOMProps,
-    ...tabListProps,
-    ref: objectRef,
-    ...renderProps,
-    "data-orientation": orientation || void 0
-  }, /* @__PURE__ */ React__default.createElement(CollectionRoot, {
-    collection: state.collection,
-    persistedKeys: $7135fc7d473fd974$export$90e00781bc59d8f9(state.selectionManager.focusedKey)
-  }));
-}
-const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ $e1995378a142960e$export$18af5c7a9e9b3664("item", (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 ? "a" : "div";
-  return /* @__PURE__ */ React__default.createElement(ElementType, {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(tabProps, focusProps, hoverProps, renderProps),
-    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
-  }, renderProps.children);
-});
-const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TabPanel(props, forwardedRef) {
-  const state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
-  let ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
-  let { tabPanelProps } = $34bce698202e07cb$export$fae0121b5afe572d(props, state, ref);
-  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-  let isSelected = state.selectedKey === props.id;
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-TabPanel",
-    values: {
-      isFocused,
-      isFocusVisible,
-      isInert: !isSelected,
-      state
-    }
-  });
-  if (!isSelected && !props.shouldForceMount) return null;
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-  delete DOMProps.id;
-  let domProps = isSelected ? $3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, tabPanelProps, focusProps, renderProps) : renderProps;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ...domProps,
-    ref,
-    "data-focused": isFocused || void 0,
-    "data-focus-visible": isFocusVisible || void 0,
-    // @ts-ignore
-    inert: $cdc5a6778b766db2$export$a9d04c5684123369(!isSelected),
-    "data-inert": !isSelected ? "true" : void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f,
-        null
-      ],
-      [
-        $5e8ad37a45e1c704$export$364712098d2aa57c,
-        null
-      ]
-    ]
-  }, /* @__PURE__ */ React__default.createElement($7135fc7d473fd974$export$4feb769f8ddf26c5.Provider, {
-    value: $7135fc7d473fd974$export$a164736487e3f0ae
-  }, renderProps.children)));
-});
-/**
- * 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.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Tabs component.
- *
- * @typedef {'underline' | 'pill' | 'pillInverse' | 'pillCompact' | 'pillCompactInverse'} TabsType
- *
- * @example
- * <Tabs>
- * 	<TabList>
- * 		<Tab>Tab 1</Tab>
- * 		<Tab>Tab 2</Tab>
- * 	</TabList>
- * 	<TabPanel>Content 1</TabPanel>
- * 	<TabPanel>Content 2</TabPanel>
- * </Tabs>
- *
- * @preserve
- */
-const Tabs2 = (props) => {
-  const { children, vertical, className, hidden, type = "underline", ...rest } = props;
-  const baseId = useId();
-  if (hidden) {
-    return null;
-  }
-  let tabPanelCounter = 1;
-  let tabCounter = 1;
-  const preparedChildren = Array.isArray(children) ? children : [children];
-  const childrenWithIds = preparedChildren.reduce((acc, child, index) => {
-    var _a, _b, _c;
-    if (child.type.displayName === "TabList") {
-      const childItems = Array.isArray((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.children) ? (_b = child == null ? void 0 : child.props) == null ? void 0 : _b.children : [(_c = child == null ? void 0 : child.props) == null ? void 0 : _c.children].filter(Boolean);
-      tabCounter = ((childItems == null ? void 0 : childItems.length) ?? 0) + 1;
-      if (childItems.length < 1) {
-        return acc;
-      }
-      return [
-        ...acc,
-        cloneElement(
-          child,
-          {
-            key: index,
-            type
-          },
-          childItems == null ? void 0 : childItems.map(
-            (innerChild, i) => cloneElement(innerChild, {
-              id: `tab-${baseId}-${i + 1}`,
-              key: i,
-              isParentVertical: vertical,
-              type
-            })
-          )
-        )
-      ];
-    }
-    if (child.type.displayName === "TabPanel") {
-      return [
-        ...acc,
-        cloneElement(child, {
-          id: `tab-${baseId}-${tabPanelCounter++}`,
-          key: index,
-          className: clsx(child.props.className, vertical && "es:pl-3")
-        })
-      ];
-    }
-    return acc;
-  }, []);
-  if (tabCounter !== tabPanelCounter) {
-    return /* @__PURE__ */ 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 /* @__PURE__ */ jsx(
-    $5e8ad37a45e1c704$export$b2539bed5023c21c,
-    {
-      ...rest,
-      orientation: vertical ? "vertical" : "horizontal",
-      className: clsx(vertical ? "es:grid es:size-full es:min-h-40 es:grid-cols-[minmax(0,15rem)_2fr] es:gap-4" : "es:flex-col", className),
-      children: childrenWithIds
-    }
-  );
-};
-Tabs2.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.
- *
- * @preserve
- */
-const TabList2 = (props) => {
-  const { children, "aria-label": ariaLabel, className, type, ...other } = props;
-  return /* @__PURE__ */ jsx(
-    $5e8ad37a45e1c704$export$e51a686c67fdaa2d,
-    {
-      "aria-label": ariaLabel ?? __("tabs", "eightshift-ui-components"),
-      className: ({ orientation }) => {
-        const horizontal = orientation === "horizontal";
-        const vertical = orientation === "vertical";
-        return clsx(
-          "es:flex es:p-0.5 es:-m-0.5",
-          vertical && "es:h-full es:flex-col es:gap-1.5 es:pr-1.5 es:overflow-y-auto es:overflow-x-visible",
-          horizontal && "es:w-full es:items-stretch es:gap-1.5 es:overflow-x-auto es:overflow-y-visible es:mb-3",
-          horizontal && type === "underline" && 'es:relative es:isolate es:after:content-[""] es:after:-z-10 es:after:absolute es:after:bottom-0.5 es:after:left-0 es:after:w-full es:after:h-px es:after:bg-secondary-300',
-          className
-        );
-      },
-      ...other,
-      children
-    }
-  );
-};
-TabList2.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!
- *
- * @returns {JSX.Element} The Tab component.
- *
- * @see {@link Tabs} for usage example.
- *
- * @preserve
- */
-const Tab = (props) => {
-  const { children, disabled, isParentVertical, className, icon, label, subtitle, type, badge, invisible, ...other } = props;
-  const componentClasses = cva(
-    [
-      "es:group es:flex es:items-center es:gap-1.5 es:relative es:shrink-0",
-      "es:select-none es:text-sm es:transition es:not-disabled:cursor-pointer",
-      "es:any-focus:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-      !(type === "pillCompact" || type === "pillCompactInverse") && "es:min-h-9.5",
-      isParentVertical && (type === "pillCompact" || type === "pillCompactInverse") && "es:min-h-8",
-      invisible && "es:hidden",
-      className
-    ],
-    {
-      variants: {
-        type: {
-          underline: "es:disabled:text-secondary-400 es:selected:text-accent-950",
-          pill: "es:font-[450] es:border es:border-transparent es:px-3 es:py-2 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-accent-400/15 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillInverse: "es:font-[450] es:border es:border-transparent es:px-3 es:py-2 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-accent-600 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillCompact: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-accent-400/15 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillCompactInverse: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-accent-600 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75"
-        }
-      },
-      compoundVariants: [
-        {
-          vertical: false,
-          type: "underline",
-          class: [
-            "es:px-2 es:py-2.5 es:rounded-lg",
-            'es:after:content-[""] es:after:absolute es:after:bottom-px es:after:left-0 es:after:right-0 es:after:w-5/6 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:rounded-t-full es:selected:after:shadow-xs es:selected:after:shadow-accent-700/30 es:after:transition"
-          ]
-        },
-        {
-          vertical: true,
-          type: "underline",
-          class: [
-            "es:pl-3 es:pr-2 es:py-2.5 es:rounded-lg es:selected:bg-accent-50/50 es:selected:text-accent-950 es:transition",
-            'es:after:content-[""] es:after:absolute es:after:-left-0 es:after:top-0 es:after:bottom-0 es:after:h-5/6 es:after:my-auto es:after:w-1',
-            "es:after:bg-linear-to-r 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:rounded-full es:selected:after:shadow-xs es:selected:after:shadow-accent-700/30 es:after:transition"
-          ]
-        }
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    $5e8ad37a45e1c704$export$3e41faf802a29e71,
-    {
-      ...other,
-      isDisabled: disabled || invisible,
-      className: componentClasses({ vertical: Boolean(isParentVertical), type }),
-      children: [
-        (icon || subtitle) && /* @__PURE__ */ jsx(
-          RichLabel,
-          {
-            icon,
-            label: label ?? children,
-            subtitle,
-            noColor: true,
-            iconClassName: clsx((type === "pillCompact" || type === "pillCompactInverse") && "es:icon:size-4!")
-          }
-        ),
-        !(icon || subtitle) && (label ?? children),
-        badge && !isValidElement(badge) && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "es:transition-colors es:px-1.5 es:py-1 es:leading-none es:rounded-md es:text-xs es:font-medium",
-              type === "underline" && "es:inset-ring es:inset-ring-secondary-200/20 es:bg-secondary-100 es:group-selected:bg-accent-500/10 es:group-selected:text-accent-900 es:group-selected:inset-ring-accent-500/10",
-              type === "pill" && "es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white",
-              type === "pillInverse" && "es:bg-secondary-100 es:group-selected:bg-accent-50 es:group-selected:text-accent-900",
-              type === "pillCompact" && "es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white",
-              type === "pillCompactInverse" && "es:bg-secondary-100 es:group-selected:bg-accent-50 es:group-selected:text-accent-900",
-              (type === "pillCompact" || type === "pillCompactInverse") && "es:[&_svg]:size-4!"
-            ),
-            children: badge
-          }
-        ),
-        badge && isValidElement(badge) && /* @__PURE__ */ jsx("div", { 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.
- *
- * @preserve
- */
-const TabPanel2 = (props) => {
-  const { children, className, ...other } = props;
-  return /* @__PURE__ */ jsx(
-    $5e8ad37a45e1c704$export$3d96ec278d3efce4,
-    {
-      ...other,
-      className: clsx("es:space-y-2.5 es:text-sm es:any-focus:outline-hidden", className),
-      children
-    }
-  );
-};
-TabPanel2.displayName = "TabPanel";
-export {
-  Tab,
-  TabList2 as TabList,
-  TabPanel2 as TabPanel,
-  Tabs2 as Tabs
-};