import { jsx as r } from "@emotion/react/jsx-runtime";
import { RootStyled as S } from "./slots/TabsSlots.js";
import { useComponentSize as f } from "../../../../hooks/useComponentSize/index.js";
import { ArrowChevronMdRightOutlined as d, ArrowChevronMdLeftOutlined as B } from "@m4l/icons";
import h, { useMemo as m } from "react";
import { IconButton as w } from "../IconButton/IconButton.js";
const u = (n, e) => {
  const t = h.forwardRef(
    (c, l) => {
      const { fontSize: a, ownerState: i, ...o } = c, s = {
        src: n,
        size: e,
        ...o
      };
      return /* @__PURE__ */ r(w, { ...s });
    }
  );
  return t.displayName = "ScrollButtonIcon", t;
}, b = (n) => {
  const { children: e, className: t, size: c, variantComponent: l = "outlined", ...a } = n, i = { variantComponent: l }, { currentSize: o } = f(c), s = m(
    () => u(/* @__PURE__ */ r(B, {}), o),
    [o]
  ), p = m(
    () => u(/* @__PURE__ */ r(d, {}), o),
    [o]
  );
  return /* @__PURE__ */ r(
    S,
    {
      ...a,
      scrollButtons: "auto",
      ownerState: { ...i },
      variant: "scrollable",
      className: t,
      slots: {
        StartScrollButtonIcon: s,
        EndScrollButtonIcon: p
      },
      children: e
    }
  );
};
export {
  b as Tabs
};
