import { jsxs as o, jsx as t } from "@emotion/react/jsx-runtime";
import { useThemeSettingsStore as p } from "@m4l/graphics";
import { PATH_ICONS as a } from "../../icons.js";
import { useEnvironment as m } from "@m4l/core";
import { Stack as e } from "../../../extended/mui/Stack/Stack.js";
import { LanguagePopover as h } from "../../../LanguagePopover/LanguagePopover.js";
import { IconButton as c } from "../../../extended/mui/IconButton/IconButton.js";
function x() {
  const i = p((s) => s.settingsActions.handleOpen), { host_static_assets: n, environment_assets: r } = m();
  return /* @__PURE__ */ o(e, { width: "100%", height: "40px", justifyContent: "space-between", flexDirection: "row", overflow: "hidden", position: "relative", padding: [0, 2], children: [
    /* @__PURE__ */ t(e, { width: "100%", height: "100%" }),
    /* @__PURE__ */ o(e, { flexDirection: "row", gap: 2, height: "100%", width: "auto", alignItems: "center", children: [
      /* @__PURE__ */ t(h, {}),
      /* @__PURE__ */ t(c, { role: "button", "aria-label": "Toggle App Bar Settings", src: `${n}/${r}/${a.SETTINGS}`, onClick: i })
    ] })
  ] });
}
export {
  x as AppBarSettings
};
