@xyo-network/react-appbar 2.77.0-rc.1 → 2.77.1

package/dist/neutral/index.cjs

@@ -1,565 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  ApplicationAppBar: () => ApplicationAppBar,
-  CollapseToggleFlex: () => CollapseToggleFlex,
-  CollapsibleDrawer: () => CollapsibleDrawer,
-  CollapsibleProvider: () => CollapsibleProvider,
-  ContextToolbar: () => ContextToolbar,
-  MenuListItemContainer: () => MenuListItemContainer,
-  MenuSection: () => MenuSection,
-  SearchBar: () => SearchBar,
-  SiteMenu: () => SiteMenu,
-  SystemControls: () => SystemControls,
-  SystemControlsType: () => SystemControlsType,
-  SystemControlsUnstyled: () => SystemControlsUnstyled,
-  SystemToolbar: () => SystemToolbar,
-  useCollapsible: () => useCollapsible,
-  useMenuItemsShared: () => useMenuItemsShared
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/components/AppBar/Application.tsx
-var import_react_appbar = require("@xylabs/react-appbar");
-
-// src/components/Toolbar/Context/ContextToolbar.tsx
-var import_material3 = require("@mui/material");
-
-// src/components/Toolbar/Context/LogoLinkEx.tsx
-var import_material2 = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react_link = require("@xylabs/react-link");
-
-// src/components/Toolbar/Context/Logo.tsx
-var import_material = require("@mui/material");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Logo = (props) => {
-  const theme = (0, import_material.useTheme)();
-  const logoUrl = theme.palette.mode === "dark" ? "https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg" : "https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logoUrl, ...props });
-};
-
-// src/components/Toolbar/Context/LogoLinkEx.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var LogoLinkEx = ({ to = "/", version = false, ...props }) => {
-  const theme = (0, import_material2.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_link.LinkEx, { to, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexRow, { paddingX: "4px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Logo, { height: "40", width: "43" }),
-    version ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_material2.Typography,
-      {
-        position: "absolute",
-        borderRadius: 1,
-        right: 6,
-        color: theme.palette.getContrastText(theme.palette.text.primary),
-        bottom: 0,
-        bgcolor: theme.palette.text.primary,
-        paddingX: "2px",
-        lineHeight: 1,
-        variant: "caption",
-        border: `1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`,
-        children: typeof version === "string" ? version : "2.1"
-      }
-    ) : null
-  ] }) });
-};
-
-// src/components/Toolbar/Context/ContextToolbar.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ContextToolbar = ({ logoTo = "/", version = false, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Toolbar, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LogoLinkEx, { version, to: logoTo }) });
-};
-
-// src/components/Toolbar/System/SystemToolbar.tsx
-var import_material12 = require("@mui/material");
-var import_react_flexbox6 = require("@xylabs/react-flexbox");
-var import_react_app_settings = require("@xyo-network/react-app-settings");
-var import_react_network = require("@xyo-network/react-network");
-
-// src/components/SiteMenu/hooks/useMenuItemsShared.tsx
-var import_react2 = require("react");
-
-// src/contexts/Collapsible/provider.tsx
-var import_react = require("react");
-
-// src/contexts/Collapsible/context.ts
-var import_react_shared = require("@xyo-network/react-shared");
-var CollapsibleContext = (0, import_react_shared.createContextEx)();
-
-// src/contexts/Collapsible/provider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CollapsibleProvider = ({ defaultCollapse = false, defaultCollapseEnd = false, children }) => {
-  const [collapse, setCollapse] = (0, import_react.useState)(defaultCollapse);
-  const [collapseEnd, setCollapseEnd] = (0, import_react.useState)(defaultCollapseEnd);
-  (0, import_react.useEffect)(() => {
-    setCollapse(defaultCollapse);
-  }, [defaultCollapse]);
-  (0, import_react.useEffect)(() => {
-    setCollapseEnd(defaultCollapseEnd);
-  }, [defaultCollapseEnd]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapsibleContext.Provider, { value: { collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd }, children });
-};
-
-// src/contexts/Collapsible/use.tsx
-var import_react_shared2 = require("@xyo-network/react-shared");
-var useCollapsible = () => (0, import_react_shared2.useContextEx)(CollapsibleContext, "Collapsible", false);
-
-// src/components/SiteMenu/hooks/useMenuItemsShared.tsx
-var useMenuItemsShared = () => {
-  const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible();
-  const onMenuItemToggle = (open) => {
-    setCollapse?.((previous) => open ? false : previous);
-    setCollapseEnd?.((previous) => open ? false : previous);
-  };
-  const defaultSiteMenuListItemProps = (0, import_react2.useMemo)(
-    () => ({
-      collapseEnd,
-      dense: true,
-      iconOnly: collapse,
-      sx: {
-        px: "8px"
-      }
-    }),
-    [collapse, collapseEnd]
-  );
-  return { defaultSiteMenuListItemProps, onMenuItemToggle };
-};
-
-// src/components/SiteMenu/Menu.tsx
-var import_icons_material = require("@mui/icons-material");
-var import_material10 = require("@mui/material");
-var import_react_flexbox4 = require("@xylabs/react-flexbox");
-var import_react4 = require("react");
-
-// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
-var import_material9 = require("@mui/material");
-var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_react_link2 = require("@xylabs/react-link");
-var import_react3 = require("react");
-
-// src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx
-var import_material4 = require("@mui/material");
-var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_vsc = require("react-icons/vsc");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ListItemTooltip = ({ title, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Tooltip, { title, placement: "right", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox2.FlexCol, { justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_vsc.VscInfo, { color: "grey" }) }) }) });
-};
-
-// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
-var import_material5 = require("@mui/material");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var MenuIcon = ({ icon, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Typography, { display: "flex", ...props, children: icon });
-};
-
-// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
-var import_material6 = require("@mui/material");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MenuListItem = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {
-  const listItemSx = iconOnly ? { borderRadius: "50%", display: "inline-flex", flexGrow: 0, width: "auto" } : { width: "100%" };
-  const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };
-  const paddingSx = dense ? { px: "8px" } : { px: "12px" };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material6.ListItem, { sx: { ...listItemSx, ...spacingSx, ...paddingSx, ...sx }, ...props, children });
-};
-
-// src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx
-var import_material7 = require("@mui/material");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var SubNavListItemsCollapse = ({ collapse, openSubNav, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material7.Collapse, { in: collapse == true ? false : openSubNav, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material7.List, { children }) });
-};
-
-// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
-var import_material8 = require("@mui/material");
-var import_vsc2 = require("react-icons/vsc");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
-  const theme = (0, import_material8.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_material8.IconButton,
-    {
-      onClick: (event) => {
-        event.stopPropagation();
-        setOpenSubNav?.(!openSubNav);
-      },
-      sx: { marginRight: theme.spacing(0.5) },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vsc2.VscChevronDown, { fontSize: "16px" })
-    }
-  );
-};
-
-// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var MenuListItemContainer = ({
-  style,
-  icon,
-  iconMenuTextSpacing,
-  iconOnly,
-  onButtonClick,
-  primary,
-  subNavListItems,
-  sx,
-  tooltip,
-  to,
-  ...props
-}) => {
-  const { dense } = props;
-  const theme = (0, import_material9.useTheme)();
-  const { collapse } = useCollapsible();
-  const [openSubNav, setOpenSubNav] = (0, import_react3.useState)(false);
-  const [hovered, setHovered] = (0, import_react3.useState)(false);
-  const resolvedIconMenuTextSpacing = iconMenuTextSpacing ?? theme.spacing(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      MenuListItem,
-      {
-        disableGutters: true,
-        iconOnly,
-        onClick: onButtonClick,
-        dense,
-        sx: { justifyContent: "space-between", ...sx },
-        style: { whiteSpace: "nowrap", ...style },
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_link2.LinkEx,
-            {
-              onMouseEnter: () => setHovered(true),
-              onMouseLeave: () => setHovered(false),
-              color: "inherit",
-              to,
-              sx: {
-                "& :hover": {
-                  cursor: "pointer",
-                  textDecoration: "underline"
-                }
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_flexbox3.FlexRow, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuIcon, { icon, paddingRight: resolvedIconMenuTextSpacing, color: hovered ? "secondary" : "inherit" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.ListItemText, { primary })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_flexbox3.FlexRow, { style: { marginLeft: theme.spacing(1) }, children: [
-            subNavListItems ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SubNavToggleIconButton, { setOpenSubNav, openSubNav }) : null,
-            tooltip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListItemTooltip, { title: tooltip }) : null
-          ] })
-        ]
-      }
-    ),
-    subNavListItems ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SubNavListItemsCollapse, { openSubNav, collapse, children: subNavListItems?.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuListItemContainer, { dense, sx: { pl: theme.spacing(1) }, ...item }, index)) }) : null
-  ] });
-};
-
-// src/components/SiteMenu/Menu.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var SiteMenu = ({ children, onMenuToggle, side = "right", ...props }) => {
-  const [open, setOpen] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
-    onMenuToggle?.(open);
-  }, [onMenuToggle, open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_flexbox4.FlexRow, { alignItems: "stretch", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_material10.IconButton,
-      {
-        size: "small",
-        color: "inherit",
-        onClick: () => {
-          setOpen(!open);
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons_material.Menu, { fontSize: "large" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_material10.SwipeableDrawer,
-      {
-        anchor: side,
-        open,
-        onClick: () => setOpen(false),
-        onKeyDown: () => setOpen(false),
-        onClose: () => setOpen(false),
-        onOpen: () => setOpen(true),
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.List, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MenuListItemContainer, { primary: "Settings", icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons_material.Settings, {}), to: "/settings" }) })
-      }
-    )
-  ] });
-};
-
-// src/components/SiteMenu/MenuSection.tsx
-var import_material11 = require("@mui/material");
-var import_react_flexbox5 = require("@xylabs/react-flexbox");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var MenuSection = ({ iconMenuTextSpacing, listItems, showTitle = true, title, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_flexbox5.FlexCol, { alignItems: "stretch", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material11.Collapse, { in: showTitle, timeout: 700, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material11.ListSubheader, { children: title }) }),
-    listItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenuListItemContainer, { iconMenuTextSpacing, ...item }, index))
-  ] });
-};
-
-// src/components/Toolbar/System/SystemToolbar.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var SystemToolbar = ({
-  children,
-  darkModeButton = false,
-  hideNetworkSelect,
-  menuItems,
-  networkSelectProps,
-  onMenuToggle,
-  precedingChildren,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Toolbar, { ...props, children: [
-    precedingChildren,
-    hideNetworkSelect ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_flexbox6.FlexRow, { marginX: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Paper, { variant: "elevation", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_network.NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) }),
-    children,
-    darkModeButton ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_app_settings.DarkModeIconButton, { color: "inherit" }) : null,
-    menuItems ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SiteMenu, { onMenuToggle, children: menuItems }) : null
-  ] });
-};
-
-// src/components/AppBar/Application.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ApplicationAppBar = ({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_appbar.AppBarEx,
-    {
-      systemToolbar: systemToolbar ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SystemToolbar, {}),
-      contextToolbar: contextToolbar ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContextToolbar, {}),
-      position: "sticky",
-      responsive,
-      ...props
-    }
-  );
-};
-
-// src/components/CollapsibleDrawer/CollapseToggle.tsx
-var import_material13 = require("@mui/material");
-var import_react_flexbox7 = require("@xylabs/react-flexbox");
-var import_react5 = require("react");
-var import_vsc3 = require("react-icons/vsc");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var CollapseToggleFlex = (props) => {
-  const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
-  const [hover, setHover] = (0, import_react5.useState)(false);
-  const theme = (0, import_material13.useTheme)();
-  const handleCollapseToggle = () => {
-    setCollapse?.(!collapse);
-    setCollapseEnd?.((previous) => previous ? false : previous);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_flexbox7.FlexRow, { mt: 2, py: 2, justifyContent: collapse ? "start" : "center", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_material13.Icon,
-    {
-      onClick: handleCollapseToggle,
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      fontSize: "large",
-      sx: { color: hover ? theme.palette.secondary.main : "inherit", cursor: "pointer" },
-      children: collapse ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vsc3.VscArrowSmallRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vsc3.VscArrowSmallLeft, {})
-    }
-  ) });
-};
-
-// src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
-var import_material14 = require("@mui/material");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var CollapsibleDrawer = ({ children, sx, ...props }) => {
-  const { collapse, setCollapseEnd } = useCollapsible();
-  const theme = (0, import_material14.useTheme)();
-  const collapsedSize = props.collapsedSize ?? theme.spacing(5);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    CollapsibleFlexInner,
-    {
-      in: !collapse,
-      orientation: "horizontal",
-      collapsedSize,
-      onExited: () => setCollapseEnd?.(true),
-      sx: {
-        alignItems: "start",
-        display: "flex",
-        height: "100%",
-        ...sx
-      },
-      ...props,
-      children
-    }
-  );
-};
-var CollapsibleFlexInner = (0, import_material14.styled)(import_material14.Collapse)(() => ({
-  "& .MuiCollapse-wrapperInner": {
-    display: "flex",
-    flexDirection: "column"
-  }
-}));
-
-// src/components/MobileSystemControls/SystemControls.tsx
-var import_react_flexbox10 = require("@xylabs/react-flexbox");
-
-// src/components/MobileSystemControls/SystemControlsRoot.tsx
-var import_material17 = require("@mui/material");
-
-// src/components/MobileSystemControls/SystemControlsType.ts
-var SystemControlsType = /* @__PURE__ */ ((SystemControlsType2) => {
-  SystemControlsType2["Left"] = "Left";
-  SystemControlsType2["Right"] = "Right";
-  SystemControlsType2["WindowShade"] = "WindowShade";
-  return SystemControlsType2;
-})(SystemControlsType || {});
-
-// src/components/MobileSystemControls/SystemControlsUnstyled.tsx
-var import_material16 = require("@mui/material");
-var import_react_flexbox9 = require("@xylabs/react-flexbox");
-var import_react_network2 = require("@xyo-network/react-network");
-
-// src/components/MobileSystemControls/controls/SystemControl.tsx
-var import_material15 = require("@mui/material");
-var import_react_flexbox8 = require("@xylabs/react-flexbox");
-var import_react6 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var SystemControl = ({
-  children,
-  controlElement,
-  systemControlsType = "WindowShade" /* WindowShade */,
-  ...props
-}) => {
-  const [toggleControls, setToggleControls] = (0, import_react6.useState)(false);
-  let orientation = "vertical";
-  switch (systemControlsType) {
-    case "Left" /* Left */: {
-      orientation = "horizontal";
-      break;
-    }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_flexbox8.FlexRow, { className: "controls", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Collapse, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_flexbox8.FlexRow, { bgcolor: "primary.main", className: "control", children: controlElement }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_flexbox8.FlexCol, { style: { cursor: "pointer" }, onClick: () => setToggleControls(!toggleControls), children })
-  ] });
-};
-
-// src/components/MobileSystemControls/SystemControlsUnstyled.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var SystemControlsUnstyled = ({
-  visible,
-  systemControlsType = "WindowShade" /* WindowShade */,
-  ...props
-}) => {
-  const isSmall = (0, import_material16.useMediaQuery)((theme) => theme.breakpoints.down("sm"));
-  return visible || isSmall ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_flexbox9.FlexCol, { ...props, className: `${props.className} system-controls-type-${systemControlsType}`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    SystemControl,
-    {
-      systemControlsType,
-      controlElement: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_flexbox9.FlexRow, { className: "control-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Paper, { variant: "elevation", elevation: 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_network2.NetworkSelectEx, { responsive: false, className: "network-ex" }) }) }) })
-    }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_flexbox9.FlexCol, {});
-};
-
-// src/components/MobileSystemControls/SystemControlsRoot.tsx
-var SystemControlsRoot = (0, import_material17.styled)(SystemControlsUnstyled, { name: "SystemControls", slot: "Root" })(({ theme }) => ({
-  // shared defaults
-  ["&"]: {
-    ".toggle": {
-      backgroundColor: theme.palette.primary.main
-    },
-    alignItems: "start",
-    zIndex: 1
-  },
-  // WindowShade System Controls styles
-  [`&.system-controls-type-${"WindowShade" /* WindowShade */}`]: {
-    ".control": {
-      borderRadius: "0 0 5px 5px",
-      flexDirection: "row",
-      flexGrow: 1,
-      justifyContent: "space-around",
-      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`
-    },
-    ".controls": {
-      alignItems: "stretch",
-      flexDirection: "column",
-      flexGrow: 1
-    },
-    ".toggle": {
-      borderRadius: "0 0 5px 5px",
-      padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`
-    },
-    flexDirection: "row",
-    position: "absolute",
-    top: 0,
-    width: "100%"
-  },
-  // Left System Control styles
-  [`&.system-controls-type-${"Left" /* Left */}`]: {
-    ".control": {
-      alignItems: "start",
-      flexDirection: "column",
-      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`
-    },
-    ".control-wrap": {
-      marginBottom: `${theme.spacing(2)}`
-    },
-    ".toggle": {
-      borderRadius: "0 5px 5px 0",
-      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
-      writingMode: "vertical-rl"
-    },
-    flexDirection: "column",
-    left: 0,
-    position: "fixed",
-    top: "30vh",
-    width: "auto"
-  }
-}));
-
-// src/components/MobileSystemControls/SystemControls.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var SystemControls = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_flexbox10.FlexCol, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SystemControlsRoot, { ...props }) });
-};
-
-// src/components/SearchBar/SearchBar.tsx
-var import_icons_material2 = require("@mui/icons-material");
-var import_material18 = require("@mui/material");
-var import_react_button = require("@xylabs/react-button");
-var import_react_flexbox11 = require("@xylabs/react-flexbox");
-var import_react7 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SearchBar = ({ defaultValue, onSearch, ...props }) => {
-  const [term, setTerm] = (0, import_react7.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_flexbox11.FlexRow, { alignItems: "stretch", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material18.Paper, { variant: "elevation", elevation: 0, style: { display: "flex", overflow: "hidden", width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_material18.TextField,
-      {
-        InputProps: { color: "secondary", style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } },
-        variant: "outlined",
-        size: "small",
-        defaultValue,
-        fullWidth: true,
-        onChange: (event) => setTerm(event.target.value),
-        onKeyDown: (event) => {
-          if (event.key === "Enter")
-            onSearch?.(term);
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_button.ButtonEx, { variant: "contained", style: { borderRadius: 0, borderTopLeftRadius: 0 }, color: "secondary", onClick: () => onSearch?.(term), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_material2.Search, {}) })
-  ] }) });
-};
+"use strict";var U=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var se=Object.prototype.hasOwnProperty;var ne=(o,e)=>{for(var r in e)U(o,r,{get:e[r],enumerable:!0})},le=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of re(e))!se.call(o,s)&&s!==r&&U(o,s,{get:()=>e[s],enumerable:!(t=te(e,s))||t.enumerable});return o};var ie=o=>le(U({},"__esModule",{value:!0}),o);var ge={};ne(ge,{ApplicationAppBar:()=>ce,CollapseToggleFlex:()=>xe,CollapsibleDrawer:()=>de,CollapsibleProvider:()=>pe,ContextToolbar:()=>X,MenuListItemContainer:()=>g,MenuSection:()=>me,SearchBar:()=>Ce,SiteMenu:()=>K,SystemControls:()=>fe,SystemControlsType:()=>Oo,SystemControlsUnstyled:()=>q,SystemToolbar:()=>Q,useCollapsible:()=>m,useMenuItemsShared:()=>ae});module.exports=ie(ge);var No=require("@xylabs/react-appbar");var po=require("@mui/material");var R=require("@mui/material"),no=require("@xylabs/react-flexbox"),lo=require("@xylabs/react-link");var to=require("@mui/material"),so=require("react/jsx-runtime"),ro=o=>{let r=((0,to.useTheme)().palette.mode==="dark","https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg");return(0,so.jsx)("img",{src:r,...o})};var f=require("react/jsx-runtime"),io=({to:o="/",version:e=!1,...r})=>{let t=(0,R.useTheme)();return(0,f.jsx)(lo.LinkEx,{to:o,...r,children:(0,f.jsxs)(no.FlexRow,{paddingX:"4px",children:[(0,f.jsx)(ro,{height:"40",width:"43"}),e?(0,f.jsx)(R.Typography,{position:"absolute",borderRadius:1,right:6,color:t.palette.getContrastText(t.palette.text.primary),bottom:0,bgcolor:t.palette.text.primary,paddingX:"2px",lineHeight:1,variant:"caption",border:`1px ${t.palette.getContrastText(t.palette.primary.main)} solid`,children:typeof e=="string"?e:"2.1"}):null]})})};var H=require("react/jsx-runtime"),X=({logoTo:o="/",version:e=!1,...r})=>(0,H.jsx)(po.Toolbar,{...r,children:(0,H.jsx)(io,{version:e,to:o})});var k=require("@mui/material"),Mo=require("@xylabs/react-flexbox"),Eo=require("@xyo-network/react-app-settings"),Bo=require("@xyo-network/react-network");var xo=require("react");var C=require("react");var ao=require("@xyo-network/react-shared"),v=(0,ao.createContextEx)();var mo=require("react/jsx-runtime"),pe=({defaultCollapse:o=!1,defaultCollapseEnd:e=!1,children:r})=>{let[t,s]=(0,C.useState)(o),[n,l]=(0,C.useState)(e);return(0,C.useEffect)(()=>{s(o)},[o]),(0,C.useEffect)(()=>{l(e)},[e]),(0,mo.jsx)(v.Provider,{value:{collapse:t,collapseEnd:n,provided:!0,setCollapse:s,setCollapseEnd:l},children:r})};var co=require("@xyo-network/react-shared");var m=()=>(0,co.useContextEx)(v,"Collapsible",!1);var ae=()=>{let{collapse:o,collapseEnd:e,setCollapse:r,setCollapseEnd:t}=m(),s=l=>{r?.(a=>l?!1:a),t?.(a=>l?!1:a)};return{defaultSiteMenuListItemProps:(0,xo.useMemo)(()=>({collapseEnd:e,dense:!0,iconOnly:o,sx:{px:"8px"}}),[o,e]),onMenuItemToggle:s}};var E=require("@mui/icons-material"),S=require("@mui/material"),wo=require("@xylabs/react-flexbox"),B=require("react");var M=require("@mui/material"),Y=require("@xylabs/react-flexbox"),vo=require("@xylabs/react-link"),_=require("react");var uo=require("@mui/material"),fo=require("@xylabs/react-flexbox"),Co=require("react-icons/vsc"),h=require("react/jsx-runtime"),go=({title:o,...e})=>(0,h.jsx)(uo.Tooltip,{title:o,placement:"right",...e,children:(0,h.jsx)("div",{children:(0,h.jsx)(fo.FlexCol,{justifyContent:"center",children:(0,h.jsx)(Co.VscInfo,{color:"grey"})})})});var So=require("@mui/material"),bo=require("react/jsx-runtime"),Po=({icon:o,...e})=>(0,bo.jsx)(So.Typography,{display:"flex",...e,children:o});var yo=require("@mui/material"),Io=require("react/jsx-runtime"),ho=({iconOnly:o,collapseEnd:e,sx:r,children:t,dense:s,...n})=>(0,Io.jsx)(yo.ListItem,{sx:{...o?{borderRadius:"50%",display:"inline-flex",flexGrow:0,width:"auto"}:{width:"100%"},...e?{columnGap:0}:{columnGap:1.5},...s?{px:"8px"}:{px:"12px"},...r},...n,children:t});var w=require("@mui/material"),G=require("react/jsx-runtime"),To=({collapse:o,openSubNav:e,children:r,...t})=>(0,G.jsx)(w.Collapse,{in:o==!0?!1:e,...t,children:(0,G.jsx)(w.List,{children:r})});var F=require("@mui/material"),Lo=require("react-icons/vsc"),V=require("react/jsx-runtime"),Ro=({setOpenSubNav:o,openSubNav:e})=>{let r=(0,F.useTheme)();return(0,V.jsx)(F.IconButton,{onClick:t=>{t.stopPropagation(),o?.(!e)},sx:{marginRight:r.spacing(.5)},children:(0,V.jsx)(Lo.VscChevronDown,{fontSize:"16px"})})};var i=require("react/jsx-runtime"),g=({style:o,icon:e,iconMenuTextSpacing:r,iconOnly:t,onButtonClick:s,primary:n,subNavListItems:l,sx:a,tooltip:u,to:Qo,...Z})=>{let{dense:j}=Z,z=(0,M.useTheme)(),{collapse:qo}=m(),[oo,Jo]=(0,_.useState)(!1),[Zo,eo]=(0,_.useState)(!1),jo=r??z.spacing(1);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(ho,{disableGutters:!0,iconOnly:t,onClick:s,dense:j,sx:{justifyContent:"space-between",...a},style:{whiteSpace:"nowrap",...o},...Z,children:[(0,i.jsx)(vo.LinkEx,{onMouseEnter:()=>eo(!0),onMouseLeave:()=>eo(!1),color:"inherit",to:Qo,sx:{"& :hover":{cursor:"pointer",textDecoration:"underline"}},children:(0,i.jsxs)(Y.FlexRow,{children:[(0,i.jsx)(Po,{icon:e,paddingRight:jo,color:Zo?"secondary":"inherit"}),(0,i.jsx)(M.ListItemText,{primary:n})]})}),(0,i.jsxs)(Y.FlexRow,{style:{marginLeft:z.spacing(1)},children:[l?(0,i.jsx)(Ro,{setOpenSubNav:Jo,openSubNav:oo}):null,u?(0,i.jsx)(go,{title:u}):null]})]}),l?(0,i.jsx)(To,{openSubNav:oo,collapse:qo,children:l?.map((oe,ee)=>(0,i.jsx)(g,{dense:j,sx:{pl:z.spacing(1)},...oe},ee))}):null]})};var c=require("react/jsx-runtime"),K=({children:o,onMenuToggle:e,side:r="right",...t})=>{let[s,n]=(0,B.useState)(!1);return(0,B.useEffect)(()=>{e?.(s)},[e,s]),(0,c.jsxs)(wo.FlexRow,{alignItems:"stretch",...t,children:[(0,c.jsx)(S.IconButton,{size:"small",color:"inherit",onClick:()=>{n(!s)},children:(0,c.jsx)(E.Menu,{fontSize:"large"})}),(0,c.jsx)(S.SwipeableDrawer,{anchor:r,open:s,onClick:()=>n(!1),onKeyDown:()=>n(!1),onClose:()=>n(!1),onOpen:()=>n(!0),children:o??(0,c.jsx)(S.List,{children:(0,c.jsx)(g,{primary:"Settings",icon:(0,c.jsx)(E.Settings,{}),to:"/settings"})})})]})};var N=require("@mui/material"),Fo=require("@xylabs/react-flexbox");var P=require("react/jsx-runtime"),me=({iconMenuTextSpacing:o,listItems:e,showTitle:r=!0,title:t,...s})=>(0,P.jsxs)(Fo.FlexCol,{alignItems:"stretch",...s,children:[(0,P.jsx)(N.Collapse,{in:r,timeout:700,children:(0,P.jsx)(N.ListSubheader,{children:t})}),e.map((n,l)=>(0,P.jsx)(g,{iconMenuTextSpacing:o,...n},l))]});var x=require("react/jsx-runtime"),Q=({children:o,darkModeButton:e=!1,hideNetworkSelect:r,menuItems:t,networkSelectProps:s,onMenuToggle:n,precedingChildren:l,...a})=>(0,x.jsxs)(k.Toolbar,{...a,children:[l,r?null:(0,x.jsx)(Mo.FlexRow,{marginX:.5,children:(0,x.jsx)(k.Paper,{variant:"elevation",children:(0,x.jsx)(Bo.NetworkSelectEx,{fullWidth:!0,...s})})}),o,e?(0,x.jsx)(Eo.DarkModeIconButton,{color:"inherit"}):null,t?(0,x.jsx)(K,{onMenuToggle:n,children:t}):null]});var D=require("react/jsx-runtime"),ce=({systemToolbar:o,contextToolbar:e,responsive:r=!0,...t})=>(0,D.jsx)(No.AppBarEx,{systemToolbar:o??(0,D.jsx)(Q,{}),contextToolbar:e??(0,D.jsx)(X,{}),position:"sticky",responsive:r,...t});var W=require("@mui/material"),ko=require("@xylabs/react-flexbox"),Do=require("react"),O=require("react-icons/vsc");var I=require("react/jsx-runtime"),xe=o=>{let{collapse:e,setCollapse:r,setCollapseEnd:t}=m(),[s,n]=(0,Do.useState)(!1),l=(0,W.useTheme)();return(0,I.jsx)(ko.FlexRow,{mt:2,py:2,justifyContent:e?"start":"center",...o,children:(0,I.jsx)(W.Icon,{onClick:()=>{r?.(!e),t?.(u=>u&&!1)},onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),fontSize:"large",sx:{color:s?l.palette.secondary.main:"inherit",cursor:"pointer"},children:e?(0,I.jsx)(O.VscArrowSmallRight,{}):(0,I.jsx)(O.VscArrowSmallLeft,{})})})};var b=require("@mui/material");var Wo=require("react/jsx-runtime"),de=({children:o,sx:e,...r})=>{let{collapse:t,setCollapseEnd:s}=m(),n=(0,b.useTheme)(),l=r.collapsedSize??n.spacing(5);return(0,Wo.jsx)(ue,{in:!t,orientation:"horizontal",collapsedSize:l,onExited:()=>s?.(!0),sx:{alignItems:"start",display:"flex",height:"100%",...e},...r,children:o})},ue=(0,b.styled)(b.Collapse)(()=>({"& .MuiCollapse-wrapperInner":{display:"flex",flexDirection:"column"}}));var Go=require("@xylabs/react-flexbox");var Ho=require("@mui/material");var Oo=(t=>(t.Left="Left",t.Right="Right",t.WindowShade="WindowShade",t))(Oo||{});var A=require("@mui/material"),L=require("@xylabs/react-flexbox"),Uo=require("@xyo-network/react-network");var Ao=require("@mui/material"),T=require("@xylabs/react-flexbox"),$o=require("react");var y=require("react/jsx-runtime"),zo=({children:o,controlElement:e,systemControlsType:r="WindowShade",...t})=>{let[s,n]=(0,$o.useState)(!1),l="vertical";switch(r){case"Left":{l="horizontal";break}}return(0,y.jsxs)(T.FlexRow,{className:"controls",...t,children:[(0,y.jsx)(Ao.Collapse,{in:s,orientation:l,timeout:500,children:(0,y.jsx)(T.FlexRow,{bgcolor:"primary.main",className:"control",children:e})}),(0,y.jsx)(T.FlexCol,{style:{cursor:"pointer"},onClick:()=>n(!s),children:o})]})};var p=require("react/jsx-runtime"),q=({visible:o,systemControlsType:e="WindowShade",...r})=>{let t=(0,A.useMediaQuery)(s=>s.breakpoints.down("sm"));return o||t?(0,p.jsx)(L.FlexCol,{...r,className:`${r.className} system-controls-type-${e}`,children:(0,p.jsx)(zo,{systemControlsType:e,controlElement:(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(L.FlexRow,{className:"control-wrap",children:(0,p.jsx)(A.Paper,{variant:"elevation",elevation:0,children:(0,p.jsx)(Uo.NetworkSelectEx,{responsive:!1,className:"network-ex"})})})})})}):(0,p.jsx)(L.FlexCol,{})};var Xo=(0,Ho.styled)(q,{name:"SystemControls",slot:"Root"})(({theme:o})=>({"&":{".toggle":{backgroundColor:o.palette.primary.main},alignItems:"start",zIndex:1},["&.system-controls-type-WindowShade"]:{".control":{borderRadius:"0 0 5px 5px",flexDirection:"row",flexGrow:1,justifyContent:"space-around",padding:`${o.spacing(2)} ${o.spacing(2.5)}`},".controls":{alignItems:"stretch",flexDirection:"column",flexGrow:1},".toggle":{borderRadius:"0 0 5px 5px",padding:`${o.spacing(.5)} ${o.spacing(1)}`},flexDirection:"row",position:"absolute",top:0,width:"100%"},["&.system-controls-type-Left"]:{".control":{alignItems:"start",flexDirection:"column",padding:`${o.spacing(2)} ${o.spacing(2.5)}`},".control-wrap":{marginBottom:`${o.spacing(2)}`},".toggle":{borderRadius:"0 5px 5px 0",padding:`${o.spacing(1)} ${o.spacing(.5)}`,writingMode:"vertical-rl"},flexDirection:"column",left:0,position:"fixed",top:"30vh",width:"auto"}}));var J=require("react/jsx-runtime"),fe=o=>(0,J.jsx)(Go.FlexCol,{children:(0,J.jsx)(Xo,{...o})});var Vo=require("@mui/icons-material"),$=require("@mui/material"),Yo=require("@xylabs/react-button"),_o=require("@xylabs/react-flexbox"),Ko=require("react"),d=require("react/jsx-runtime"),Ce=({defaultValue:o,onSearch:e,...r})=>{let[t,s]=(0,Ko.useState)();return(0,d.jsx)(_o.FlexRow,{alignItems:"stretch",...r,children:(0,d.jsxs)($.Paper,{variant:"elevation",elevation:0,style:{display:"flex",overflow:"hidden",width:"100%"},children:[(0,d.jsx)($.TextField,{InputProps:{color:"secondary",style:{borderBottomRightRadius:0,borderTopRightRadius:0,borderWidth:0}},variant:"outlined",size:"small",defaultValue:o,fullWidth:!0,onChange:n=>s(n.target.value),onKeyDown:n=>{n.key==="Enter"&&e?.(t)}}),(0,d.jsx)(Yo.ButtonEx,{variant:"contained",style:{borderRadius:0,borderTopLeftRadius:0},color:"secondary",onClick:()=>e?.(t),children:(0,d.jsx)(Vo.Search,{})})]})})};
 //# sourceMappingURL=index.cjs.map