import { jsx as e } from "@emotion/react/jsx-runtime";
import { SideBarProvider as x } from "./context/sideBarContext/index.js";
import { SideBarMobile as I } from "./subcomponents/SideBarMobile/index.js";
import { SideBarDesktop as y } from "./subcomponents/SideBarDesktop/index.js";
import { memo as B, useMemo as C } from "react";
import { getMenuDataWithState as T } from "./helpers/getMenuDataWithState/index.js";
import { useIsMobile as _ } from "@m4l/graphics";
import { getDataToSkeleton as k } from "./helpers/getDataToSkeleton/index.js";
import { PATH_ICONS as P } from "./constants.js";
import { useEnvironment as W } from "@m4l/core";
const q = B((r) => {
  const { host_static_assets: m, environment_assets: n } = W(), {
    anchored: a,
    visible: i,
    onToggleAnchored: s,
    onToggleVisible: p,
    menuData: t,
    onMenuItemClick: l,
    companyLogoUrl: c,
    companyLogoSmallUrl: d,
    moduleSelectedId: o,
    expandedWidth: u = "230px",
    companyName: f,
    companySlogan: S,
    urlIconPrefix: g = `${m}/${n}${P}`,
    headerComponent: h,
    footerComponent: D,
    variant: v = "host"
  } = r, M = C(() => T({ menuData: t ?? k(), moduleSelectedId: o }), [t, o]), b = _();
  return /* @__PURE__ */ e(
    x,
    {
      value: {
        // Propiedades y funciones proporcionadas a través del contexto
        anchored: a,
        visible: i,
        onToggleAnchored: s,
        onToggleVisible: p,
        menuData: M,
        onMenuItemClick: l,
        companyLogoUrl: c,
        companyLogoSmallUrl: d,
        moduleSelectedId: o,
        expandedWidth: u,
        companyName: f,
        companySlogan: S,
        urlIconPrefix: g,
        variant: v,
        headerComponent: h,
        footerComponent: D
      },
      children: b ? /* @__PURE__ */ e(I, {}) : /* @__PURE__ */ e(y, {})
    }
  );
});
export {
  q as SideBar
};
