// packages/components/src/tabs/tab.tsx
import { forwardRef } from "@wordpress/element";
import warning from "@wordpress/warning";
import { useTabsContext } from "./context.js";
import { Tab as StyledTab, TabChildren as StyledTabChildren, TabChevron as StyledTabChevron } from "./styles.js";
import { chevronRight } from "@wordpress/icons";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Tab = forwardRef(function Tab2({
  children,
  tabId,
  disabled,
  render,
  ...otherProps
}, ref) {
  var _useTabsContext;
  const {
    store,
    instanceId
  } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
  if (!store) {
    globalThis.SCRIPT_DEBUG === true ? warning("`Tabs.Tab` must be wrapped in a `Tabs` component.") : void 0;
    return null;
  }
  const instancedTabId = `${instanceId}-${tabId}`;
  return /* @__PURE__ */ _jsxs(StyledTab, {
    ref,
    store,
    id: instancedTabId,
    disabled,
    render,
    ...otherProps,
    children: [/* @__PURE__ */ _jsx(StyledTabChildren, {
      children
    }), /* @__PURE__ */ _jsx(StyledTabChevron, {
      icon: chevronRight
    })]
  });
});
export {
  Tab
};
//# sourceMappingURL=tab.js.map
