@xyo-network/react-appbar 4.1.9 → 4.1.11

package/dist/browser/index.mjs

@@ -2,8 +2,8 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/components/AppBar/Application.tsx
-import { AppBarEx } from "@xylabs/react-appbar";
-import React14 from "react";
+import { ApplicationAppBar } from "@xylabs/react-appbar";
+import React5 from "react";
 
 // src/components/Toolbar/Context/ContextToolbar.tsx
 import { Toolbar } from "@mui/material";
@@ -29,15 +29,15 @@ var Logo = /* @__PURE__ */ __name((props) => {
 }, "Logo");
 
 // src/components/Toolbar/Context/LogoLinkEx.tsx
-var LogoLinkEx = /* @__PURE__ */ __name(({ to = "/", href, version = false, ...props }) => {
+var LogoLinkEx = /* @__PURE__ */ __name(({ logo, to = "/", href, version = false, ...props }) => {
   const theme = useTheme2();
-  assertEx(href === void 0, "href is not supported");
+  assertEx(href === void 0, () => "href is not supported");
   return /* @__PURE__ */ React2.createElement(LinkEx, {
     to,
     ...props
   }, /* @__PURE__ */ React2.createElement(FlexRow, {
     paddingX: "4px"
-  }, /* @__PURE__ */ React2.createElement(Logo, {
+  }, logo ?? /* @__PURE__ */ React2.createElement(Logo, {
     height: "40",
     width: "43"
   }), version ? /* @__PURE__ */ React2.createElement(Typography, {
@@ -55,336 +55,62 @@ var LogoLinkEx = /* @__PURE__ */ __name(({ to = "/", href, version = false, ...p
 }, "LogoLinkEx");
 
 // src/components/Toolbar/Context/ContextToolbar.tsx
-var ContextToolbar = /* @__PURE__ */ __name(({ logoTo = "/", version = false, ...props }) => {
+var XyoContextToolbar = /* @__PURE__ */ __name(({ children, logo, logoTo = "/", version = false, ...props }) => {
   return /* @__PURE__ */ React3.createElement(Toolbar, props, /* @__PURE__ */ React3.createElement(LogoLinkEx, {
+    logo,
     version,
     to: logoTo
-  }));
-}, "ContextToolbar");
+  }), children);
+}, "XyoContextToolbar");
 
 // src/components/Toolbar/System/SystemToolbar.tsx
-import { Paper, Toolbar as Toolbar2 } from "@mui/material";
-import { DarkModeIconButton } from "@xylabs/react-app-settings";
-import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
-import { NetworkSelectEx } from "@xyo-network/react-network";
-import React13 from "react";
-
-// src/components/SiteMenu/hooks/useMenuItemsShared.tsx
-import { useMemo } from "react";
-
-// src/contexts/Collapsible/provider.tsx
-import React4, { useState } from "react";
-
-// src/contexts/Collapsible/context.ts
-import { createContextEx } from "@xyo-network/react-shared";
-var CollapsibleContext = createContextEx();
-
-// src/contexts/Collapsible/provider.tsx
-var CollapsibleProvider = /* @__PURE__ */ __name(({ defaultCollapse = false, defaultCollapseEnd = false, children }) => {
-  const [collapse, setCollapse] = useState(() => defaultCollapse);
-  const [collapseEnd, setCollapseEnd] = useState(() => defaultCollapseEnd);
-  return (
-    // eslint-disable-next-line @eslint-react/no-unstable-context-value
-    /* @__PURE__ */ React4.createElement(CollapsibleContext.Provider, {
-      value: {
-        collapse,
-        collapseEnd,
-        provided: true,
-        setCollapse,
-        setCollapseEnd
-      }
-    }, children)
-  );
-}, "CollapsibleProvider");
-
-// src/contexts/Collapsible/use.ts
-import { useContextEx } from "@xyo-network/react-shared";
-var useCollapsible = /* @__PURE__ */ __name(() => useContextEx(CollapsibleContext, "Collapsible", false), "useCollapsible");
-
-// src/components/SiteMenu/hooks/useMenuItemsShared.tsx
-var useMenuItemsShared = /* @__PURE__ */ __name(() => {
-  const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible();
-  const onMenuItemToggle = /* @__PURE__ */ __name((open) => {
-    setCollapse?.((previous) => open ? false : previous);
-    setCollapseEnd?.((previous) => open ? false : previous);
-  }, "onMenuItemToggle");
-  const defaultSiteMenuListItemProps = useMemo(() => ({
-    collapseEnd,
-    dense: true,
-    iconOnly: collapse,
-    sx: {
-      px: "8px"
-    }
-  }), [
-    collapse,
-    collapseEnd
-  ]);
-  return {
-    defaultSiteMenuListItemProps,
-    onMenuItemToggle
-  };
-}, "useMenuItemsShared");
-
-// src/components/SiteMenu/Menu.tsx
-import { Menu as MenuIcon2, Settings as SettingsIcon } from "@mui/icons-material";
-import { IconButton as IconButton2, List as List2, SwipeableDrawer } from "@mui/material";
-import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-import React11, { useEffect, useState as useState3 } from "react";
-
-// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
-import { ListItemText, useTheme as useTheme4 } from "@mui/material";
+import { Paper } from "@mui/material";
+import { SystemToolbar } from "@xylabs/react-appbar";
 import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import { LinkEx as LinkEx2 } from "@xylabs/react-link";
-import React10, { useState as useState2 } from "react";
-
-// src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx
-import { Tooltip } from "@mui/material";
-import { FlexCol } from "@xylabs/react-flexbox";
-import React5 from "react";
-import { VscInfo } from "react-icons/vsc";
-var ListItemTooltip = /* @__PURE__ */ __name(({ title, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(Tooltip, {
-    title,
-    placement: "right",
-    ...props
-  }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement(FlexCol, {
-    justifyContent: "center"
-  }, /* @__PURE__ */ React5.createElement(VscInfo, {
-    color: "grey"
-  }))));
-}, "ListItemTooltip");
-
-// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
-import { Typography as Typography2 } from "@mui/material";
-import React6 from "react";
-var MenuIcon = /* @__PURE__ */ __name(({ icon, ...props }) => {
-  return /* @__PURE__ */ React6.createElement(Typography2, {
-    display: "flex",
-    ...props
-  }, icon);
-}, "MenuIcon");
-
-// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
-import { ListItem } from "@mui/material";
-import React7 from "react";
-var MenuListItem = /* @__PURE__ */ __name(({ 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__ */ React7.createElement(ListItem, {
-    sx: {
-      ...listItemSx,
-      ...spacingSx,
-      ...paddingSx,
-      ...sx
-    },
-    ...props
-  }, children);
-}, "MenuListItem");
-
-// src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx
-import { Collapse, List } from "@mui/material";
-import React8 from "react";
-var SubNavListItemsCollapse = /* @__PURE__ */ __name(({ collapse, openSubNav, children, ...props }) => {
-  return /* @__PURE__ */ React8.createElement(Collapse, {
-    in: collapse == true ? false : openSubNav,
-    ...props
-  }, /* @__PURE__ */ React8.createElement(List, null, children));
-}, "SubNavListItemsCollapse");
-
-// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
-import { IconButton, useTheme as useTheme3 } from "@mui/material";
-import React9 from "react";
-import { VscChevronDown } from "react-icons/vsc";
-var SubNavToggleIconButton = /* @__PURE__ */ __name(({ setOpenSubNav, openSubNav }) => {
-  const theme = useTheme3();
-  return /* @__PURE__ */ React9.createElement(IconButton, {
-    onClick: /* @__PURE__ */ __name((event) => {
-      event.stopPropagation();
-      setOpenSubNav?.(!openSubNav);
-    }, "onClick"),
-    sx: {
-      marginRight: theme.spacing(0.5)
-    }
-  }, /* @__PURE__ */ React9.createElement(VscChevronDown, {
-    fontSize: "16px"
-  }));
-}, "SubNavToggleIconButton");
-
-// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
-var MenuListItemContainer = /* @__PURE__ */ __name(({ style, icon, iconMenuTextSpacing, iconOnly, onButtonClick, primary, subNavListItems, sx, tooltip, to, ...props }) => {
-  const { dense } = props;
-  const theme = useTheme4();
-  const { collapse } = useCollapsible();
-  const [openSubNav, setOpenSubNav] = useState2(false);
-  const [hovered, setHovered] = useState2(false);
-  const resolvedIconMenuTextSpacing = iconMenuTextSpacing ?? theme.spacing(1);
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(MenuListItem, {
-    disableGutters: true,
-    iconOnly,
-    onClick: onButtonClick,
-    dense,
-    sx: {
-      justifyContent: "space-between",
-      ...sx
-    },
-    style: {
-      whiteSpace: "nowrap",
-      ...style
-    },
-    ...props
-  }, /* @__PURE__ */ React10.createElement(LinkEx2, {
-    onMouseEnter: /* @__PURE__ */ __name(() => setHovered(true), "onMouseEnter"),
-    onMouseLeave: /* @__PURE__ */ __name(() => setHovered(false), "onMouseLeave"),
-    color: "inherit",
-    to,
-    sx: {
-      "& :hover": {
-        cursor: "pointer",
-        textDecoration: "underline"
-      }
-    }
-  }, /* @__PURE__ */ React10.createElement(FlexRow2, null, /* @__PURE__ */ React10.createElement(MenuIcon, {
-    icon,
-    paddingRight: resolvedIconMenuTextSpacing,
-    color: hovered ? "secondary" : "inherit"
-  }), /* @__PURE__ */ React10.createElement(ListItemText, {
-    primary
-  }))), /* @__PURE__ */ React10.createElement(FlexRow2, {
-    style: {
-      marginLeft: theme.spacing(1)
-    }
-  }, subNavListItems ? /* @__PURE__ */ React10.createElement(SubNavToggleIconButton, {
-    setOpenSubNav,
-    openSubNav
-  }) : null, tooltip ? /* @__PURE__ */ React10.createElement(ListItemTooltip, {
-    title: tooltip
-  }) : null)), subNavListItems ? /* @__PURE__ */ React10.createElement(SubNavListItemsCollapse, {
-    openSubNav,
-    collapse
-  }, subNavListItems?.map((item, index) => /* @__PURE__ */ React10.createElement(MenuListItemContainer, {
-    dense,
-    sx: {
-      pl: theme.spacing(1)
-    },
-    key: index,
-    ...item
-  }))) : null);
-}, "MenuListItemContainer");
-
-// src/components/SiteMenu/Menu.tsx
-var SiteMenu = /* @__PURE__ */ __name(({ children, onMenuToggle, side = "right", ...props }) => {
-  const [open, setOpen] = useState3(false);
-  useEffect(() => {
-    onMenuToggle?.(open);
-  }, [
-    onMenuToggle,
-    open
-  ]);
-  return /* @__PURE__ */ React11.createElement(FlexRow3, {
-    alignItems: "stretch",
-    ...props
-  }, /* @__PURE__ */ React11.createElement(IconButton2, {
-    size: "small",
-    color: "inherit",
-    onClick: /* @__PURE__ */ __name(() => {
-      setOpen(!open);
-    }, "onClick")
-  }, /* @__PURE__ */ React11.createElement(MenuIcon2, {
-    fontSize: "large"
-  })), /* @__PURE__ */ React11.createElement(SwipeableDrawer, {
-    anchor: side,
-    open,
-    onClick: /* @__PURE__ */ __name(() => setOpen(false), "onClick"),
-    onKeyDown: /* @__PURE__ */ __name(() => setOpen(false), "onKeyDown"),
-    onClose: /* @__PURE__ */ __name(() => setOpen(false), "onClose"),
-    onOpen: /* @__PURE__ */ __name(() => setOpen(true), "onOpen")
-  }, children ?? /* @__PURE__ */ React11.createElement(List2, null, /* @__PURE__ */ React11.createElement(MenuListItemContainer, {
-    primary: "Settings",
-    icon: /* @__PURE__ */ React11.createElement(SettingsIcon, null),
-    to: "/settings"
-  }))));
-}, "SiteMenu");
-
-// src/components/SiteMenu/MenuSection.tsx
-import { Collapse as Collapse2, ListSubheader } from "@mui/material";
-import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
-import React12 from "react";
-var MenuSection = /* @__PURE__ */ __name(({ iconMenuTextSpacing, listItems, showTitle = true, title, ...props }) => {
-  return /* @__PURE__ */ React12.createElement(FlexCol2, {
-    alignItems: "stretch",
-    ...props
-  }, /* @__PURE__ */ React12.createElement(Collapse2, {
-    in: showTitle,
-    timeout: 700
-  }, /* @__PURE__ */ React12.createElement(ListSubheader, null, title)), listItems.map((item, index) => /* @__PURE__ */ React12.createElement(MenuListItemContainer, {
-    key: index,
-    iconMenuTextSpacing,
-    ...item
-  })));
-}, "MenuSection");
-
-// src/components/Toolbar/System/SystemToolbar.tsx
-var SystemToolbar = /* @__PURE__ */ __name(({ children, darkModeButton = false, hideNetworkSelect, menuItems, networkSelectProps, onMenuToggle, precedingChildren, ...props }) => {
-  return /* @__PURE__ */ React13.createElement(Toolbar2, props, precedingChildren, hideNetworkSelect ? null : /* @__PURE__ */ React13.createElement(FlexRow4, {
+import { NetworkSelectEx } from "@xyo-network/react-network";
+import React4 from "react";
+var XyoSystemToolbar = /* @__PURE__ */ __name(({ children, hideNetworkSelect, networkSelectProps, precedingChildren, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(SystemToolbar, props, precedingChildren, hideNetworkSelect ? null : /* @__PURE__ */ React4.createElement(FlexRow2, {
     marginX: 0.5
-  }, /* @__PURE__ */ React13.createElement(Paper, {
+  }, /* @__PURE__ */ React4.createElement(Paper, {
     variant: "elevation"
-  }, /* @__PURE__ */ React13.createElement(NetworkSelectEx, {
+  }, /* @__PURE__ */ React4.createElement(NetworkSelectEx, {
     fullWidth: true,
     ...networkSelectProps
-  }))), children, darkModeButton ? /* @__PURE__ */ React13.createElement(DarkModeIconButton, {
-    color: "inherit"
-  }) : null, menuItems ? /* @__PURE__ */ React13.createElement(SiteMenu, {
-    onMenuToggle
-  }, menuItems) : null);
-}, "SystemToolbar");
+  }))), children);
+}, "XyoSystemToolbar");
 
 // src/components/AppBar/Application.tsx
-var ApplicationAppBar = /* @__PURE__ */ __name(({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
-  return /* @__PURE__ */ React14.createElement(AppBarEx, {
-    systemToolbar: systemToolbar ?? /* @__PURE__ */ React14.createElement(SystemToolbar, null),
-    contextToolbar: contextToolbar ?? /* @__PURE__ */ React14.createElement(ContextToolbar, null),
+var XyoApplicationAppBar = /* @__PURE__ */ __name(({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(ApplicationAppBar, {
+    systemToolbar: systemToolbar ?? /* @__PURE__ */ React5.createElement(XyoSystemToolbar, null),
+    contextToolbar: contextToolbar ?? /* @__PURE__ */ React5.createElement(XyoContextToolbar, null),
     position: "sticky",
     responsive,
     ...props
   });
-}, "ApplicationAppBar");
+}, "XyoApplicationAppBar");
 
 // src/components/CollapsibleDrawer/CollapseToggle.tsx
-import { Icon, useTheme as useTheme5 } from "@mui/material";
-import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
-import React15, { useState as useState4 } from "react";
+import { Icon, useTheme as useTheme3 } from "@mui/material";
+import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
+import { useCollapsible } from "@xylabs/react-shared";
+import React6, { useState } from "react";
 import { VscArrowSmallLeft, VscArrowSmallRight } from "react-icons/vsc";
 var CollapseToggleFlex = /* @__PURE__ */ __name((props) => {
   const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
-  const [hover, setHover] = useState4(false);
-  const theme = useTheme5();
+  const [hover, setHover] = useState(false);
+  const theme = useTheme3();
   const handleCollapseToggle = /* @__PURE__ */ __name(() => {
     setCollapse?.(!collapse);
     setCollapseEnd?.((previous) => previous ? false : previous);
   }, "handleCollapseToggle");
-  return /* @__PURE__ */ React15.createElement(FlexRow5, {
+  return /* @__PURE__ */ React6.createElement(FlexRow3, {
     mt: 2,
     py: 2,
     justifyContent: collapse ? "start" : "center",
     ...props
-  }, /* @__PURE__ */ React15.createElement(Icon, {
+  }, /* @__PURE__ */ React6.createElement(Icon, {
     onClick: handleCollapseToggle,
     onMouseEnter: /* @__PURE__ */ __name(() => setHover(true), "onMouseEnter"),
     onMouseLeave: /* @__PURE__ */ __name(() => setHover(false), "onMouseLeave"),
@@ -393,17 +119,18 @@ var CollapseToggleFlex = /* @__PURE__ */ __name((props) => {
       color: hover ? theme.palette.secondary.main : "inherit",
       cursor: "pointer"
     }
-  }, collapse ? /* @__PURE__ */ React15.createElement(VscArrowSmallRight, null) : /* @__PURE__ */ React15.createElement(VscArrowSmallLeft, null)));
+  }, collapse ? /* @__PURE__ */ React6.createElement(VscArrowSmallRight, null) : /* @__PURE__ */ React6.createElement(VscArrowSmallLeft, null)));
 }, "CollapseToggleFlex");
 
 // src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
-import { Collapse as Collapse3, styled, useTheme as useTheme6 } from "@mui/material";
-import React16 from "react";
+import { Collapse, styled, useTheme as useTheme4 } from "@mui/material";
+import { useCollapsible as useCollapsible2 } from "@xylabs/react-shared";
+import React7 from "react";
 var CollapsibleDrawer = /* @__PURE__ */ __name(({ children, sx, ...props }) => {
-  const { collapse, setCollapseEnd } = useCollapsible();
-  const theme = useTheme6();
+  const { collapse, setCollapseEnd } = useCollapsible2();
+  const theme = useTheme4();
   const collapsedSize = props.collapsedSize ?? theme.spacing(5);
-  return /* @__PURE__ */ React16.createElement(CollapsibleFlexInner, {
+  return /* @__PURE__ */ React7.createElement(CollapsibleFlexInner, {
     in: !collapse,
     orientation: "horizontal",
     collapsedSize,
@@ -417,7 +144,7 @@ var CollapsibleDrawer = /* @__PURE__ */ __name(({ children, sx, ...props }) => {
     ...props
   }, children);
 }, "CollapsibleDrawer");
-var CollapsibleFlexInner = styled(Collapse3)(() => ({
+var CollapsibleFlexInner = styled(Collapse)(() => ({
   "& .MuiCollapse-wrapperInner": {
     display: "flex",
     flexDirection: "column"
@@ -425,8 +152,8 @@ var CollapsibleFlexInner = styled(Collapse3)(() => ({
 }));
 
 // src/components/MobileSystemControls/SystemControls.tsx
-import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
-import React19 from "react";
+import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
+import React10 from "react";
 
 // src/components/MobileSystemControls/SystemControlsRoot.tsx
 import { styled as styled2 } from "@mui/material";
@@ -441,16 +168,16 @@ var SystemControlsType = /* @__PURE__ */ function(SystemControlsType2) {
 
 // src/components/MobileSystemControls/SystemControlsUnstyled.tsx
 import { Paper as Paper2, useMediaQuery } from "@mui/material";
-import { FlexCol as FlexCol4, FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
+import { FlexCol as FlexCol2, FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
 import { NetworkSelectEx as NetworkSelectEx2 } from "@xyo-network/react-network";
-import React18 from "react";
+import React9 from "react";
 
 // src/components/MobileSystemControls/controls/SystemControl.tsx
-import { Collapse as Collapse4 } from "@mui/material";
-import { FlexCol as FlexCol3, FlexRow as FlexRow6 } from "@xylabs/react-flexbox";
-import React17, { useState as useState5 } from "react";
+import { Collapse as Collapse2 } from "@mui/material";
+import { FlexCol, FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
+import React8, { useState as useState2 } from "react";
 var SystemControl = /* @__PURE__ */ __name(({ children, controlElement, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
-  const [toggleControls, setToggleControls] = useState5(false);
+  const [toggleControls, setToggleControls] = useState2(false);
   let orientation = "vertical";
   switch (systemControlsType) {
     case SystemControlsType.Left: {
@@ -458,17 +185,17 @@ var SystemControl = /* @__PURE__ */ __name(({ children, controlElement, systemCo
       break;
     }
   }
-  return /* @__PURE__ */ React17.createElement(FlexRow6, {
+  return /* @__PURE__ */ React8.createElement(FlexRow4, {
     className: "controls",
     ...props
-  }, /* @__PURE__ */ React17.createElement(Collapse4, {
+  }, /* @__PURE__ */ React8.createElement(Collapse2, {
     in: toggleControls,
     orientation,
     timeout: 500
-  }, /* @__PURE__ */ React17.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React8.createElement(FlexRow4, {
     bgcolor: "primary.main",
     className: "control"
-  }, controlElement)), /* @__PURE__ */ React17.createElement(FlexCol3, {
+  }, controlElement)), /* @__PURE__ */ React8.createElement(FlexCol, {
     style: {
       cursor: "pointer"
     },
@@ -479,21 +206,21 @@ var SystemControl = /* @__PURE__ */ __name(({ children, controlElement, systemCo
 // src/components/MobileSystemControls/SystemControlsUnstyled.tsx
 var SystemControlsUnstyled = /* @__PURE__ */ __name(({ visible, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-  return visible || isSmall ? /* @__PURE__ */ React18.createElement(FlexCol4, {
+  return visible || isSmall ? /* @__PURE__ */ React9.createElement(FlexCol2, {
     ...props,
     className: `${props.className} system-controls-type-${systemControlsType}`
-  }, /* @__PURE__ */ React18.createElement(SystemControl, {
+  }, /* @__PURE__ */ React9.createElement(SystemControl, {
     systemControlsType,
-    controlElement: /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(FlexRow7, {
+    controlElement: /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(FlexRow5, {
       className: "control-wrap"
-    }, /* @__PURE__ */ React18.createElement(Paper2, {
+    }, /* @__PURE__ */ React9.createElement(Paper2, {
       variant: "elevation",
       elevation: 0
-    }, /* @__PURE__ */ React18.createElement(NetworkSelectEx2, {
+    }, /* @__PURE__ */ React9.createElement(NetworkSelectEx2, {
       responsive: false,
       className: "network-ex"
     }))))
-  })) : /* @__PURE__ */ React18.createElement(FlexCol4, null);
+  })) : /* @__PURE__ */ React9.createElement(FlexCol2, null);
 }, "SystemControlsUnstyled");
 
 // src/components/MobileSystemControls/SystemControlsRoot.tsx
@@ -557,21 +284,21 @@ var SystemControlsRoot = styled2(SystemControlsUnstyled, {
 
 // src/components/MobileSystemControls/SystemControls.tsx
 var SystemControls = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React19.createElement(FlexCol5, null, /* @__PURE__ */ React19.createElement(SystemControlsRoot, props));
+  return /* @__PURE__ */ React10.createElement(FlexCol3, null, /* @__PURE__ */ React10.createElement(SystemControlsRoot, props));
 }, "SystemControls");
 
 // src/components/SearchBar/SearchBar.tsx
 import { Search as SearchIcon } from "@mui/icons-material";
 import { Paper as Paper3, TextField } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
-import { FlexRow as FlexRow8 } from "@xylabs/react-flexbox";
-import React20, { useState as useState6 } from "react";
+import { FlexRow as FlexRow6 } from "@xylabs/react-flexbox";
+import React11, { useState as useState3 } from "react";
 var SearchBar = /* @__PURE__ */ __name(({ defaultValue, onSearch, ...props }) => {
-  const [term, setTerm] = useState6();
-  return /* @__PURE__ */ React20.createElement(FlexRow8, {
+  const [term, setTerm] = useState3();
+  return /* @__PURE__ */ React11.createElement(FlexRow6, {
     alignItems: "stretch",
     ...props
-  }, /* @__PURE__ */ React20.createElement(Paper3, {
+  }, /* @__PURE__ */ React11.createElement(Paper3, {
     variant: "elevation",
     elevation: 0,
     style: {
@@ -579,7 +306,7 @@ var SearchBar = /* @__PURE__ */ __name(({ defaultValue, onSearch, ...props }) =>
       overflow: "hidden",
       width: "100%"
     }
-  }, /* @__PURE__ */ React20.createElement(TextField, {
+  }, /* @__PURE__ */ React11.createElement(TextField, {
     variant: "outlined",
     size: "small",
     defaultValue,
@@ -598,7 +325,7 @@ var SearchBar = /* @__PURE__ */ __name(({ defaultValue, onSearch, ...props }) =>
         }
       }
     }
-  }), /* @__PURE__ */ React20.createElement(ButtonEx, {
+  }), /* @__PURE__ */ React11.createElement(ButtonEx, {
     variant: "contained",
     style: {
       borderRadius: 0,
@@ -606,23 +333,17 @@ var SearchBar = /* @__PURE__ */ __name(({ defaultValue, onSearch, ...props }) =>
     },
     color: "secondary",
     onClick: /* @__PURE__ */ __name(() => onSearch?.(term), "onClick")
-  }, /* @__PURE__ */ React20.createElement(SearchIcon, null))));
+  }, /* @__PURE__ */ React11.createElement(SearchIcon, null))));
 }, "SearchBar");
 export {
-  ApplicationAppBar,
   CollapseToggleFlex,
   CollapsibleDrawer,
-  CollapsibleProvider,
-  ContextToolbar,
-  MenuListItemContainer,
-  MenuSection,
   SearchBar,
-  SiteMenu,
   SystemControls,
   SystemControlsType,
   SystemControlsUnstyled,
-  SystemToolbar,
-  useCollapsible,
-  useMenuItemsShared
+  XyoApplicationAppBar,
+  XyoContextToolbar,
+  XyoSystemToolbar
 };
 //# sourceMappingURL=index.mjs.map