@xyo-network/react-appbar 2.82.0 → 2.83.0

package/dist/browser/index.cjs

@@ -1,665 +0,0 @@
-"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 });
-};
-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 __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
-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");
-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_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__ */ import_react.default.createElement("img", {
-    src: logoUrl,
-    ...props
-  });
-}, "Logo");
-
-// src/components/Toolbar/Context/LogoLinkEx.tsx
-var LogoLinkEx = /* @__PURE__ */ __name(({ to = "/", version = false, ...props }) => {
-  const theme = (0, import_material2.useTheme)();
-  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 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_react5 = require("react");
-
-// src/contexts/Collapsible/provider.tsx
-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 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_react4.useEffect)(() => {
-    setCollapseEnd(defaultCollapseEnd);
-  }, [
-    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.ts
-var import_react_shared2 = require("@xyo-network/react-shared");
-var useCollapsible = /* @__PURE__ */ __name(() => (0, import_react_shared2.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 = (0, import_react5.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_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_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 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_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_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_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 SubNavToggleIconButton = /* @__PURE__ */ __name(({ setOpenSubNav, openSubNav }) => {
-  const theme = (0, import_material8.useTheme)();
-  return /* @__PURE__ */ import_react10.default.createElement(import_material8.IconButton, {
-    onClick: /* @__PURE__ */ __name((event) => {
-      event.stopPropagation();
-      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 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_react11.useState)(false);
-  const [hovered, setHovered] = (0, import_react11.useState)(false);
-  const resolvedIconMenuTextSpacing = iconMenuTextSpacing ?? theme.spacing(1);
-  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"
-      }
-    }
-  }, /* @__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?.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 SiteMenu = /* @__PURE__ */ __name(({ children, onMenuToggle, side = "right", ...props }) => {
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
-    onMenuToggle?.(open);
-  }, [
-    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_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 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 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_react16 = __toESM(require("react"), 1);
-var import_vsc3 = require("react-icons/vsc");
-var CollapseToggleFlex = /* @__PURE__ */ __name((props) => {
-  const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
-  const [hover, setHover] = (0, import_react16.useState)(false);
-  const theme = (0, import_material13.useTheme)();
-  const handleCollapseToggle = /* @__PURE__ */ __name(() => {
-    setCollapse?.(!collapse);
-    setCollapseEnd?.((previous) => previous ? false : previous);
-  }, "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_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__ */ import_react17.default.createElement(CollapsibleFlexInner, {
-    in: !collapse,
-    orientation: "horizontal",
-    collapsedSize,
-    onExited: /* @__PURE__ */ __name(() => 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",
-    flexDirection: "column"
-  }
-}));
-
-// 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;
-(function(SystemControlsType2) {
-  SystemControlsType2["Left"] = "Left";
-  SystemControlsType2["Right"] = "Right";
-  SystemControlsType2["WindowShade"] = "WindowShade";
-})(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_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 SystemControlsType.Left: {
-      orientation = "horizontal";
-      break;
-    }
-  }
-  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 SystemControlsUnstyled = /* @__PURE__ */ __name(({ visible, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
-  const isSmall = (0, import_material16.useMediaQuery)((theme) => theme.breakpoints.down("sm"));
-  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 }) => ({
-  // shared defaults
-  ["&"]: {
-    ".toggle": {
-      backgroundColor: theme.palette.primary.main
-    },
-    "alignItems": "start",
-    "zIndex": 1
-  },
-  // WindowShade System Controls styles
-  [`&.system-controls-type-${SystemControlsType.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-${SystemControlsType.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 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_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
-      }
-    },
-    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?.(term);
-    }, "onKeyDown")
-  }), /* @__PURE__ */ import_react21.default.createElement(import_react_button.ButtonEx, {
-    variant: "contained",
-    style: {
-      borderRadius: 0,
-      borderTopLeftRadius: 0
-    },
-    color: "secondary",
-    onClick: /* @__PURE__ */ __name(() => onSearch?.(term), "onClick")
-  }, /* @__PURE__ */ import_react21.default.createElement(import_icons_material2.Search, null))));
-}, "SearchBar");
-//# sourceMappingURL=index.cjs.map