import { jsxs as c, jsx as t } from "@emotion/react/jsx-runtime";
import i from "../../hooks/useSideBar/index.js";
import { HeaderContainerComponentStyled as s, ButtonAnchoredStyled as l } from "../../slots/SideBarSlots.js";
import { useIsMobile as m } from "@m4l/graphics";
import { LayoutPanelCloseOutlined as h } from "@m4l/icons";
const S = () => {
  const {
    headerComponent: e,
    onToggleAnchored: r,
    anchored: o,
    variant: n,
    classes: a
  } = i(), d = !m();
  return /* @__PURE__ */ c(s, { ownerState: { anchored: o, variant: n }, children: [
    e && e,
    n === "microfrontend" && d && /* @__PURE__ */ t(
      l,
      {
        icon: /* @__PURE__ */ t(h, {}),
        onClick: () => {
          r(!o);
        },
        rotationAngle: o ? 0 : 180,
        className: a.buttonAnchored,
        variant: "contained",
        role: "anchored-button"
      }
    )
  ] });
};
export {
  S as HeaderComponent
};
