import { jsx as a } from "@emotion/react/jsx-runtime";
import { useComponentSize as v } from "../../hooks/useComponentSize/index.js";
import { TabsNavigatorRootStyled as g } from "./slots/TabsNavigatorSlots.js";
import { useMemo as i } from "react";
import { TabNavigatorClusterComponent as b } from "./subcomponents/TabNavigatorClusterComponent/TabNavigatorClusterComponent.js";
import { useTabsNavigator as z } from "./hooks/useTabsNavigator/useTabsNavigator.js";
import { TabNavigatorComponent as R } from "./subcomponents/TabNavigatorComponent/TabNavigatorComponent.js";
import h from "clsx";
import { TABS_NAVIGATOR_CLASSES as x } from "./constants.js";
import { useStateRef as A } from "../../hooks/useStateRef/index.js";
const O = (c) => {
  const {
    tabs: l,
    variant: o = "horizontal",
    size: p,
    selectedId: e,
    className: f,
    dataTestId: d,
    onChangeSelectedId: r,
    maxColumnsPopover: n = 3
  } = c, { currentSize: s } = v(p), [u, S] = A(null), { finalTabs: m } = z({ element: u, tabs: l, variant: o }), T = i(() => ({
    size: s,
    variant: o
  }), [s, o]), C = i(() => m.map((t, N) => "children" in t ? /* @__PURE__ */ a(
    b,
    {
      ...t,
      selectedId: e,
      onChangeSelectedId: r,
      variant: o,
      maxColumnsPopover: n
    },
    `cluster-${N}`
  ) : /* @__PURE__ */ a(
    R,
    {
      ...t,
      selectedId: e,
      onChangeSelectedId: r
    },
    t.id
  )), [m, e, r, o, n]);
  return /* @__PURE__ */ a(
    g,
    {
      className: h(x.root, f),
      "data-testid": d,
      ownerState: T,
      ref: S,
      children: C
    }
  );
};
export {
  O as TabsNavigator
};
