@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/tabs/tabs.js

@@ -0,0 +1,703 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as $880e95eb8b93ba9a$export$ecf600387e221c37, i as $ae20dd8cbca75726$export$d6daf82dcd84e87c, d as $e1995378a142960e$export$18af5c7a9e9b3664, f as $e1995378a142960e$export$fb8073518f34e6ec, g as $7135fc7d473fd974$export$4feb769f8ddf26c5, j as $7135fc7d473fd974$export$a164736487e3f0ae, e as $e1995378a142960e$export$bf788dd355e3a401, k as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "../../Collection-n5d0zIgb.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-CZt7LCbO.js";
+import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-DkyH7elT.js";
+import React__default, { useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, isValidElement, useId, cloneElement } from "react";
+import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-BrJylgPR.js";
+import { a as $f645667febf57a63$export$4c014de7c8940b4c, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B7-lUnAF.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-BEPI2m7u.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-C4sorv2p.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-BljRBEr_.js";
+import { Notice } from "../notice/notice.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+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(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 = /* @__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,
+    onSelectionChange: props.onSelectionChange ? (key) => {
+      var _props_onSelectionChange;
+      if (key != null) (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? 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) : /* @__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
+};