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, h as $7135fc7d473fd974$export$4feb769f8ddf26c5, l as $7135fc7d473fd974$export$a164736487e3f0ae, e as $e1995378a142960e$export$bf788dd355e3a401, m as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, n as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "../../SelectionManager-CabSdgMq.js";
import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, l as $df56164dff5785e2$export$4338b53315abf666, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-cvK1vxO7.js";
import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-Xsk-aOvN.js";
import React__default, { useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, isValidElement, useId, cloneElement } from "react";
import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-CBQIDzpQ.js";
import { $ as $f645667febf57a63$export$4c014de7c8940b4c, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Cdxi6JSa.js";
import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-DJApHXhY.js";
import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-DattSD7d.js";
import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { c as cva } from "../../index-Dq3gT5pW.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);
  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}`;
}
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
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  return /* @__PURE__ */ React__default.createElement("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
  }, /* @__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, {
    global: true
  });
  delete DOMProps.id;
  return /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tabListProps),
    ref: objectRef,
    "data-orientation": orientation || void 0
  }, /* @__PURE__ */ React__default.createElement(CollectionRoot, {
    collection: state.collection,
    persistedKeys: $7135fc7d473fd974$export$90e00781bc59d8f9(state.selectionManager.focusedKey)
  }));
}
class $5e8ad37a45e1c704$var$TabItemNode extends $23b9f4fcf0fe224b$export$d68d59712b04d9d1 {
}
$5e8ad37a45e1c704$var$TabItemNode.type = "item";
const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ $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 ? "a" : "div";
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  delete DOMProps.id;
  delete DOMProps.onClick;
  return /* @__PURE__ */ React__default.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
  }, 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 { id, ...otherProps } = props;
  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,
      // @ts-ignore - compatibility with React < 19
      isInert: $cdc5a6778b766db2$export$a9d04c5684123369(!isSelected),
      state
    }
  });
  if (!isSelected && !props.shouldForceMount) return null;
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps, {
    global: true
  });
  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 || props.inert),
    "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' | 'pillOutline' | 'pillCompactOutline'} 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) => {
    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: `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" || type === "pillCompactOutline") && "es:min-h-9.5",
      isParentVertical && (type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "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-2.5 es:py-0.25 es:rounded-10 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-gradient-to-br es:selected:from-accent-400/10 es:selected:to-accent-400/20 es:selected:border-accent-400/10 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
          pillOutline: "es:font-[450] es:border es:border-transparent es:selected:border-accent-500 es:px-2.5 es:py-0.25 es:rounded-10 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-700 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-2.5 es:py-0.25 es:rounded-10 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-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-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-gradient-to-br es:selected:from-accent-400/15 es:selected:to-accent-400/20 es:selected:border-accent-400/10 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-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-accent-600 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
          pillCompactOutline: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:selected:border-accent-500 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-700 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-sm 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-sm 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" || type === "pillCompactOutline") && "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 === "pillOutline" || type === "pillCompactOutline") && "es:bg-secondary-100 es:text-secondary-900 es:group-selected:bg-accent-500 es:group-selected:text-white",
              (type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "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
};
