import { jsx as t } from "@emotion/react/jsx-runtime";
import { useFirstRender as c } from "@m4l/graphics";
import d from "../../hooks/useSideBar/index.js";
import { ContainerDesktopContentStyled as p, ContainerDesktopRootStyled as f } from "../../slots/SideBarSlots.js";
import { SIDEBAR_KEY_COMPONENT as l } from "../../constants.js";
import u from "../ContentComponent/index.js";
import { useState as S, useEffect as h } from "react";
import { getComponentSlotRoot as C } from "../../../../utils/getComponentSlotRoot.js";
const N = () => {
  const { anchored: o, expandedWidth: r, variant: n } = d(), [s, m] = S(o), i = c([o]);
  h(() => {
    i || m(o);
  }, [o]);
  const e = {
    anchored: s,
    expandedWidth: r,
    variant: n
  }, a = C(l);
  return /* @__PURE__ */ t(
    p,
    {
      role: "menu",
      className: a,
      ownerState: e,
      children: /* @__PURE__ */ t(
        f,
        {
          ownerState: e,
          role: "menubar",
          children: /* @__PURE__ */ t(u, {})
        }
      )
    }
  );
};
export {
  N as SideBarDesktop
};
