@xyo-network/react-appbar 2.81.10 → 2.82.0

package/dist/node/index.cjs

@@ -1,8 +1,11 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -40,370 +51,428 @@ module.exports = __toCommonJS(src_exports);
 
 // src/components/AppBar/Application.tsx
 var import_react_appbar = require("@xylabs/react-appbar");
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/Toolbar/Context/ContextToolbar.tsx
 var import_material3 = require("@mui/material");
+var import_react3 = __toESM(require("react"), 1);
 
 // 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");
+var import_react2 = __toESM(require("react"), 1);
 
 // src/components/Toolbar/Context/Logo.tsx
 var import_material = require("@mui/material");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Logo = (props) => {
+var import_react = __toESM(require("react"), 1);
+var Logo = /* @__PURE__ */ __name((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 });
-};
+  return /* @__PURE__ */ import_react.default.createElement("img", {
+    src: logoUrl,
+    ...props
+  });
+}, "Logo");
 
 // src/components/Toolbar/Context/LogoLinkEx.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var LogoLinkEx = ({ to = "/", version = false, ...props }) => {
+var LogoLinkEx = /* @__PURE__ */ __name(({ 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
-  ] }) });
-};
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_link.LinkEx, {
+    to,
+    ...props
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_flexbox.FlexRow, {
+    paddingX: "4px"
+  }, /* @__PURE__ */ import_react2.default.createElement(Logo, {
+    height: "40",
+    width: "43"
+  }), version ? /* @__PURE__ */ import_react2.default.createElement(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`
+  }, typeof version === "string" ? version : "2.1") : null));
+}, "LogoLinkEx");
 
 // 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 }) });
-};
+var ContextToolbar = /* @__PURE__ */ __name(({ logoTo = "/", version = false, ...props }) => {
+  return /* @__PURE__ */ import_react3.default.createElement(import_material3.Toolbar, props, /* @__PURE__ */ import_react3.default.createElement(LogoLinkEx, {
+    version,
+    to: logoTo
+  }));
+}, "ContextToolbar");
 
 // 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");
+var import_react14 = __toESM(require("react"), 1);
 
 // src/components/SiteMenu/hooks/useMenuItemsShared.tsx
-var import_react2 = require("react");
+var import_react5 = require("react");
 
 // src/contexts/Collapsible/provider.tsx
-var import_react = require("react");
+var import_react4 = __toESM(require("react"), 1);
 
 // 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)(() => {
+var CollapsibleProvider = /* @__PURE__ */ __name(({ defaultCollapse = false, defaultCollapseEnd = false, children }) => {
+  const [collapse, setCollapse] = (0, import_react4.useState)(defaultCollapse);
+  const [collapseEnd, setCollapseEnd] = (0, import_react4.useState)(defaultCollapseEnd);
+  (0, import_react4.useEffect)(() => {
     setCollapse(defaultCollapse);
-  }, [defaultCollapse]);
-  (0, import_react.useEffect)(() => {
+  }, [
+    defaultCollapse
+  ]);
+  (0, import_react4.useEffect)(() => {
     setCollapseEnd(defaultCollapseEnd);
-  }, [defaultCollapseEnd]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapsibleContext.Provider, { value: { collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd }, children });
-};
+  }, [
+    defaultCollapseEnd
+  ]);
+  return (
+    // eslint-disable-next-line @eslint-react/no-unstable-context-value
+    /* @__PURE__ */ import_react4.default.createElement(CollapsibleContext.Provider, {
+      value: {
+        collapse,
+        collapseEnd,
+        provided: true,
+        setCollapse,
+        setCollapseEnd
+      }
+    }, children)
+  );
+}, "CollapsibleProvider");
 
-// src/contexts/Collapsible/use.tsx
+// src/contexts/Collapsible/use.ts
 var import_react_shared2 = require("@xyo-network/react-shared");
-var useCollapsible = () => (0, import_react_shared2.useContextEx)(CollapsibleContext, "Collapsible", false);
+var useCollapsible = /* @__PURE__ */ __name(() => (0, import_react_shared2.useContextEx)(CollapsibleContext, "Collapsible", false), "useCollapsible");
 
 // src/components/SiteMenu/hooks/useMenuItemsShared.tsx
-var useMenuItemsShared = () => {
+var useMenuItemsShared = /* @__PURE__ */ __name(() => {
   const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible();
-  const onMenuItemToggle = (open) => {
+  const onMenuItemToggle = /* @__PURE__ */ __name((open) => {
     setCollapse == null ? void 0 : setCollapse((previous) => open ? false : previous);
     setCollapseEnd == null ? void 0 : setCollapseEnd((previous) => open ? false : previous);
+  }, "onMenuItemToggle");
+  const defaultSiteMenuListItemProps = (0, import_react5.useMemo)(() => ({
+    collapseEnd,
+    dense: true,
+    iconOnly: collapse,
+    sx: {
+      px: "8px"
+    }
+  }), [
+    collapse,
+    collapseEnd
+  ]);
+  return {
+    defaultSiteMenuListItemProps,
+    onMenuItemToggle
   };
-  const defaultSiteMenuListItemProps = (0, import_react2.useMemo)(
-    () => ({
-      collapseEnd,
-      dense: true,
-      iconOnly: collapse,
-      sx: {
-        px: "8px"
-      }
-    }),
-    [collapse, collapseEnd]
-  );
-  return { defaultSiteMenuListItemProps, onMenuItemToggle };
-};
+}, "useMenuItemsShared");
 
 // 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");
+var import_react12 = __toESM(require("react"), 1);
 
 // 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");
+var import_react11 = __toESM(require("react"), 1);
 
 // 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_react6 = __toESM(require("react"), 1);
 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" }) }) }) });
-};
+var ListItemTooltip = /* @__PURE__ */ __name(({ title, ...props }) => {
+  return /* @__PURE__ */ import_react6.default.createElement(import_material4.Tooltip, {
+    title,
+    placement: "right",
+    ...props
+  }, /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement(import_react_flexbox2.FlexCol, {
+    justifyContent: "center"
+  }, /* @__PURE__ */ import_react6.default.createElement(import_vsc.VscInfo, {
+    color: "grey"
+  }))));
+}, "ListItemTooltip");
 
 // 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 });
-};
+var import_react7 = __toESM(require("react"), 1);
+var MenuIcon = /* @__PURE__ */ __name(({ icon, ...props }) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_material5.Typography, {
+    display: "flex",
+    ...props
+  }, icon);
+}, "MenuIcon");
 
 // 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 });
-};
+var import_react8 = __toESM(require("react"), 1);
+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__ */ import_react8.default.createElement(import_material6.ListItem, {
+    sx: {
+      ...listItemSx,
+      ...spacingSx,
+      ...paddingSx,
+      ...sx
+    },
+    ...props
+  }, children);
+}, "MenuListItem");
 
 // 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 }) });
-};
+var import_react9 = __toESM(require("react"), 1);
+var SubNavListItemsCollapse = /* @__PURE__ */ __name(({ collapse, openSubNav, children, ...props }) => {
+  return /* @__PURE__ */ import_react9.default.createElement(import_material7.Collapse, {
+    in: collapse == true ? false : openSubNav,
+    ...props
+  }, /* @__PURE__ */ import_react9.default.createElement(import_material7.List, null, children));
+}, "SubNavListItemsCollapse");
 
 // src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
 var import_material8 = require("@mui/material");
+var import_react10 = __toESM(require("react"), 1);
 var import_vsc2 = require("react-icons/vsc");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
+var SubNavToggleIconButton = /* @__PURE__ */ __name(({ setOpenSubNav, openSubNav }) => {
   const theme = (0, import_material8.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_material8.IconButton,
-    {
-      onClick: (event) => {
-        event.stopPropagation();
-        setOpenSubNav == null ? void 0 : setOpenSubNav(!openSubNav);
-      },
-      sx: { marginRight: theme.spacing(0.5) },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vsc2.VscChevronDown, { fontSize: "16px" })
+  return /* @__PURE__ */ import_react10.default.createElement(import_material8.IconButton, {
+    onClick: /* @__PURE__ */ __name((event) => {
+      event.stopPropagation();
+      setOpenSubNav == null ? void 0 : setOpenSubNav(!openSubNav);
+    }, "onClick"),
+    sx: {
+      marginRight: theme.spacing(0.5)
     }
-  );
-};
+  }, /* @__PURE__ */ import_react10.default.createElement(import_vsc2.VscChevronDown, {
+    fontSize: "16px"
+  }));
+}, "SubNavToggleIconButton");
 
 // 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
-}) => {
+var MenuListItemContainer = /* @__PURE__ */ __name(({ 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 [openSubNav, setOpenSubNav] = (0, import_react11.useState)(false);
+  const [hovered, setHovered] = (0, import_react11.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
-          ] })
-        ]
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(MenuListItem, {
+    disableGutters: true,
+    iconOnly,
+    onClick: onButtonClick,
+    dense,
+    sx: {
+      justifyContent: "space-between",
+      ...sx
+    },
+    style: {
+      whiteSpace: "nowrap",
+      ...style
+    },
+    ...props
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_link2.LinkEx, {
+    onMouseEnter: /* @__PURE__ */ __name(() => setHovered(true), "onMouseEnter"),
+    onMouseLeave: /* @__PURE__ */ __name(() => setHovered(false), "onMouseLeave"),
+    color: "inherit",
+    to,
+    sx: {
+      "& :hover": {
+        cursor: "pointer",
+        textDecoration: "underline"
       }
-    ),
-    subNavListItems ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SubNavListItemsCollapse, { openSubNav, collapse, children: subNavListItems == null ? void 0 : subNavListItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuListItemContainer, { dense, sx: { pl: theme.spacing(1) }, ...item }, index)) }) : null
-  ] });
-};
+    }
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_flexbox3.FlexRow, null, /* @__PURE__ */ import_react11.default.createElement(MenuIcon, {
+    icon,
+    paddingRight: resolvedIconMenuTextSpacing,
+    color: hovered ? "secondary" : "inherit"
+  }), /* @__PURE__ */ import_react11.default.createElement(import_material9.ListItemText, {
+    primary
+  }))), /* @__PURE__ */ import_react11.default.createElement(import_react_flexbox3.FlexRow, {
+    style: {
+      marginLeft: theme.spacing(1)
+    }
+  }, subNavListItems ? /* @__PURE__ */ import_react11.default.createElement(SubNavToggleIconButton, {
+    setOpenSubNav,
+    openSubNav
+  }) : null, tooltip ? /* @__PURE__ */ import_react11.default.createElement(ListItemTooltip, {
+    title: tooltip
+  }) : null)), subNavListItems ? /* @__PURE__ */ import_react11.default.createElement(SubNavListItemsCollapse, {
+    openSubNav,
+    collapse
+  }, subNavListItems == null ? void 0 : subNavListItems.map((item, index) => /* @__PURE__ */ import_react11.default.createElement(MenuListItemContainer, {
+    dense,
+    sx: {
+      pl: theme.spacing(1)
+    },
+    key: index,
+    ...item
+  }))) : null);
+}, "MenuListItemContainer");
 
 // 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)(() => {
+var SiteMenu = /* @__PURE__ */ __name(({ children, onMenuToggle, side = "right", ...props }) => {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => {
     onMenuToggle == null ? void 0 : 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" }) })
-      }
-    )
-  ] });
-};
+  }, [
+    onMenuToggle,
+    open
+  ]);
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_flexbox4.FlexRow, {
+    alignItems: "stretch",
+    ...props
+  }, /* @__PURE__ */ import_react12.default.createElement(import_material10.IconButton, {
+    size: "small",
+    color: "inherit",
+    onClick: /* @__PURE__ */ __name(() => {
+      setOpen(!open);
+    }, "onClick")
+  }, /* @__PURE__ */ import_react12.default.createElement(import_icons_material.Menu, {
+    fontSize: "large"
+  })), /* @__PURE__ */ import_react12.default.createElement(import_material10.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__ */ import_react12.default.createElement(import_material10.List, null, /* @__PURE__ */ import_react12.default.createElement(MenuListItemContainer, {
+    primary: "Settings",
+    icon: /* @__PURE__ */ import_react12.default.createElement(import_icons_material.Settings, null),
+    to: "/settings"
+  }))));
+}, "SiteMenu");
 
 // 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))
-  ] });
-};
+var import_react13 = __toESM(require("react"), 1);
+var MenuSection = /* @__PURE__ */ __name(({ iconMenuTextSpacing, listItems, showTitle = true, title, ...props }) => {
+  return /* @__PURE__ */ import_react13.default.createElement(import_react_flexbox5.FlexCol, {
+    alignItems: "stretch",
+    ...props
+  }, /* @__PURE__ */ import_react13.default.createElement(import_material11.Collapse, {
+    in: showTitle,
+    timeout: 700
+  }, /* @__PURE__ */ import_react13.default.createElement(import_material11.ListSubheader, null, title)), listItems.map((item, index) => /* @__PURE__ */ import_react13.default.createElement(MenuListItemContainer, {
+    key: index,
+    iconMenuTextSpacing,
+    ...item
+  })));
+}, "MenuSection");
 
 // 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
-  ] });
-};
+var SystemToolbar = /* @__PURE__ */ __name(({ children, darkModeButton = false, hideNetworkSelect, menuItems, networkSelectProps, onMenuToggle, precedingChildren, ...props }) => {
+  return /* @__PURE__ */ import_react14.default.createElement(import_material12.Toolbar, props, precedingChildren, hideNetworkSelect ? null : /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox6.FlexRow, {
+    marginX: 0.5
+  }, /* @__PURE__ */ import_react14.default.createElement(import_material12.Paper, {
+    variant: "elevation"
+  }, /* @__PURE__ */ import_react14.default.createElement(import_react_network.NetworkSelectEx, {
+    fullWidth: true,
+    ...networkSelectProps
+  }))), children, darkModeButton ? /* @__PURE__ */ import_react14.default.createElement(import_react_app_settings.DarkModeIconButton, {
+    color: "inherit"
+  }) : null, menuItems ? /* @__PURE__ */ import_react14.default.createElement(SiteMenu, {
+    onMenuToggle
+  }, menuItems) : null);
+}, "SystemToolbar");
 
 // 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
-    }
-  );
-};
+var ApplicationAppBar = /* @__PURE__ */ __name(({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
+  return /* @__PURE__ */ import_react15.default.createElement(import_react_appbar.AppBarEx, {
+    systemToolbar: systemToolbar ?? /* @__PURE__ */ import_react15.default.createElement(SystemToolbar, null),
+    contextToolbar: contextToolbar ?? /* @__PURE__ */ import_react15.default.createElement(ContextToolbar, null),
+    position: "sticky",
+    responsive,
+    ...props
+  });
+}, "ApplicationAppBar");
 
 // 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_react16 = __toESM(require("react"), 1);
 var import_vsc3 = require("react-icons/vsc");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var CollapseToggleFlex = (props) => {
+var CollapseToggleFlex = /* @__PURE__ */ __name((props) => {
   const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
-  const [hover, setHover] = (0, import_react5.useState)(false);
+  const [hover, setHover] = (0, import_react16.useState)(false);
   const theme = (0, import_material13.useTheme)();
-  const handleCollapseToggle = () => {
+  const handleCollapseToggle = /* @__PURE__ */ __name(() => {
     setCollapse == null ? void 0 : setCollapse(!collapse);
     setCollapseEnd == null ? void 0 : 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, {})
+  }, "handleCollapseToggle");
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_flexbox7.FlexRow, {
+    mt: 2,
+    py: 2,
+    justifyContent: collapse ? "start" : "center",
+    ...props
+  }, /* @__PURE__ */ import_react16.default.createElement(import_material13.Icon, {
+    onClick: handleCollapseToggle,
+    onMouseEnter: /* @__PURE__ */ __name(() => setHover(true), "onMouseEnter"),
+    onMouseLeave: /* @__PURE__ */ __name(() => setHover(false), "onMouseLeave"),
+    fontSize: "large",
+    sx: {
+      color: hover ? theme.palette.secondary.main : "inherit",
+      cursor: "pointer"
     }
-  ) });
-};
+  }, collapse ? /* @__PURE__ */ import_react16.default.createElement(import_vsc3.VscArrowSmallRight, null) : /* @__PURE__ */ import_react16.default.createElement(import_vsc3.VscArrowSmallLeft, null)));
+}, "CollapseToggleFlex");
 
 // src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
 var import_material14 = require("@mui/material");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var CollapsibleDrawer = ({ children, sx, ...props }) => {
+var import_react17 = __toESM(require("react"), 1);
+var CollapsibleDrawer = /* @__PURE__ */ __name(({ 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 == null ? void 0 : setCollapseEnd(true),
-      sx: {
-        alignItems: "start",
-        display: "flex",
-        height: "100%",
-        ...sx
-      },
-      ...props,
-      children
-    }
-  );
-};
+  return /* @__PURE__ */ import_react17.default.createElement(CollapsibleFlexInner, {
+    in: !collapse,
+    orientation: "horizontal",
+    collapsedSize,
+    onExited: /* @__PURE__ */ __name(() => setCollapseEnd == null ? void 0 : setCollapseEnd(true), "onExited"),
+    sx: {
+      alignItems: "start",
+      display: "flex",
+      height: "100%",
+      ...sx
+    },
+    ...props
+  }, children);
+}, "CollapsibleDrawer");
 var CollapsibleFlexInner = (0, import_material14.styled)(import_material14.Collapse)(() => ({
   "& .MuiCollapse-wrapperInner": {
     display: "flex",
@@ -413,77 +482,91 @@ var CollapsibleFlexInner = (0, import_material14.styled)(import_material14.Colla
 
 // src/components/MobileSystemControls/SystemControls.tsx
 var import_react_flexbox10 = require("@xylabs/react-flexbox");
+var import_react20 = __toESM(require("react"), 1);
 
 // src/components/MobileSystemControls/SystemControlsRoot.tsx
 var import_material17 = require("@mui/material");
 
 // src/components/MobileSystemControls/SystemControlsType.ts
-var SystemControlsType = /* @__PURE__ */ ((SystemControlsType2) => {
+var SystemControlsType;
+(function(SystemControlsType2) {
   SystemControlsType2["Left"] = "Left";
   SystemControlsType2["Right"] = "Right";
   SystemControlsType2["WindowShade"] = "WindowShade";
-  return SystemControlsType2;
-})(SystemControlsType || {});
+})(SystemControlsType || (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");
+var import_react19 = __toESM(require("react"), 1);
 
 // 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);
+var import_react18 = __toESM(require("react"), 1);
+var SystemControl = /* @__PURE__ */ __name(({ children, controlElement, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
+  const [toggleControls, setToggleControls] = (0, import_react18.useState)(false);
   let orientation = "vertical";
   switch (systemControlsType) {
-    case "Left" /* Left */: {
+    case SystemControlsType.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 })
-  ] });
-};
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_flexbox8.FlexRow, {
+    className: "controls",
+    ...props
+  }, /* @__PURE__ */ import_react18.default.createElement(import_material15.Collapse, {
+    in: toggleControls,
+    orientation,
+    timeout: 500
+  }, /* @__PURE__ */ import_react18.default.createElement(import_react_flexbox8.FlexRow, {
+    bgcolor: "primary.main",
+    className: "control"
+  }, controlElement)), /* @__PURE__ */ import_react18.default.createElement(import_react_flexbox8.FlexCol, {
+    style: {
+      cursor: "pointer"
+    },
+    onClick: /* @__PURE__ */ __name(() => setToggleControls(!toggleControls), "onClick")
+  }, children));
+}, "SystemControl");
 
 // src/components/MobileSystemControls/SystemControlsUnstyled.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var SystemControlsUnstyled = ({
-  visible,
-  systemControlsType = "WindowShade" /* WindowShade */,
-  ...props
-}) => {
+var SystemControlsUnstyled = /* @__PURE__ */ __name(({ visible, systemControlsType = SystemControlsType.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, {});
-};
+  return visible || isSmall ? /* @__PURE__ */ import_react19.default.createElement(import_react_flexbox9.FlexCol, {
+    ...props,
+    className: `${props.className} system-controls-type-${systemControlsType}`
+  }, /* @__PURE__ */ import_react19.default.createElement(SystemControl, {
+    systemControlsType,
+    controlElement: /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(import_react_flexbox9.FlexRow, {
+      className: "control-wrap"
+    }, /* @__PURE__ */ import_react19.default.createElement(import_material16.Paper, {
+      variant: "elevation",
+      elevation: 0
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_network2.NetworkSelectEx, {
+      responsive: false,
+      className: "network-ex"
+    }))))
+  })) : /* @__PURE__ */ import_react19.default.createElement(import_react_flexbox9.FlexCol, null);
+}, "SystemControlsUnstyled");
 
 // src/components/MobileSystemControls/SystemControlsRoot.tsx
-var SystemControlsRoot = (0, import_material17.styled)(SystemControlsUnstyled, { name: "SystemControls", slot: "Root" })(({ theme }) => ({
+var SystemControlsRoot = (0, import_material17.styled)(SystemControlsUnstyled, {
+  name: "SystemControls",
+  slot: "Root"
+})(({ theme }) => ({
   // shared defaults
   ["&"]: {
     ".toggle": {
       backgroundColor: theme.palette.primary.main
     },
-    alignItems: "start",
-    zIndex: 1
+    "alignItems": "start",
+    "zIndex": 1
   },
   // WindowShade System Controls styles
-  [`&.system-controls-type-${"WindowShade" /* WindowShade */}`]: {
+  [`&.system-controls-type-${SystemControlsType.WindowShade}`]: {
     ".control": {
       borderRadius: "0 0 5px 5px",
       flexDirection: "row",
@@ -500,13 +583,13 @@ var SystemControlsRoot = (0, import_material17.styled)(SystemControlsUnstyled, {
       borderRadius: "0 0 5px 5px",
       padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`
     },
-    flexDirection: "row",
-    position: "absolute",
-    top: 0,
-    width: "100%"
+    "flexDirection": "row",
+    "position": "absolute",
+    "top": 0,
+    "width": "100%"
   },
   // Left System Control styles
-  [`&.system-controls-type-${"Left" /* Left */}`]: {
+  [`&.system-controls-type-${SystemControlsType.Left}`]: {
     ".control": {
       alignItems: "start",
       flexDirection: "column",
@@ -520,47 +603,65 @@ var SystemControlsRoot = (0, import_material17.styled)(SystemControlsUnstyled, {
       padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
       writingMode: "vertical-rl"
     },
-    flexDirection: "column",
-    left: 0,
-    position: "fixed",
-    top: "30vh",
-    width: "auto"
+    "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 }) });
-};
+var SystemControls = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox10.FlexCol, null, /* @__PURE__ */ import_react20.default.createElement(SystemControlsRoot, props));
+}, "SystemControls");
 
 // 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 == null ? void 0 : onSearch(term);
-        }
+var import_react21 = __toESM(require("react"), 1);
+var SearchBar = /* @__PURE__ */ __name(({ defaultValue, onSearch, ...props }) => {
+  const [term, setTerm] = (0, import_react21.useState)();
+  return /* @__PURE__ */ import_react21.default.createElement(import_react_flexbox11.FlexRow, {
+    alignItems: "stretch",
+    ...props
+  }, /* @__PURE__ */ import_react21.default.createElement(import_material18.Paper, {
+    variant: "elevation",
+    elevation: 0,
+    style: {
+      display: "flex",
+      overflow: "hidden",
+      width: "100%"
+    }
+  }, /* @__PURE__ */ import_react21.default.createElement(import_material18.TextField, {
+    InputProps: {
+      color: "secondary",
+      style: {
+        borderBottomRightRadius: 0,
+        borderTopRightRadius: 0,
+        borderWidth: 0
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_button.ButtonEx, { variant: "contained", style: { borderRadius: 0, borderTopLeftRadius: 0 }, color: "secondary", onClick: () => onSearch == null ? void 0 : onSearch(term), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_material2.Search, {}) })
-  ] }) });
-};
+    },
+    variant: "outlined",
+    size: "small",
+    defaultValue,
+    fullWidth: true,
+    onChange: /* @__PURE__ */ __name((event) => setTerm(event.target.value), "onChange"),
+    onKeyDown: /* @__PURE__ */ __name((event) => {
+      if (event.key === "Enter") onSearch == null ? void 0 : onSearch(term);
+    }, "onKeyDown")
+  }), /* @__PURE__ */ import_react21.default.createElement(import_react_button.ButtonEx, {
+    variant: "contained",
+    style: {
+      borderRadius: 0,
+      borderTopLeftRadius: 0
+    },
+    color: "secondary",
+    onClick: /* @__PURE__ */ __name(() => onSearch == null ? void 0 : onSearch(term), "onClick")
+  }, /* @__PURE__ */ import_react21.default.createElement(import_icons_material2.Search, null))));
+}, "SearchBar");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ApplicationAppBar,