@xyo-network/react-appbar 2.64.0-rc.6 → 2.64.0

package/dist/node/index.js

@@ -1,25 +1,546 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 });
+// src/components/AppBar/Application.tsx
+import { AppBarEx } from "@xylabs/react-appbar";
+
+// src/components/Toolbar/Context/ContextToolbar.tsx
+import { Toolbar } from "@mui/material";
+
+// src/components/Toolbar/Context/LogoLinkEx.tsx
+import { Typography, useTheme as useTheme2 } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { LinkEx } from "@xylabs/react-link";
+
+// src/components/Toolbar/Context/Logo.tsx
+import { useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Logo = (props) => {
+  const theme = 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__ */ jsx("img", { src: logoUrl, ...props });
+};
+
+// src/components/Toolbar/Context/LogoLinkEx.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var LogoLinkEx = ({ to = "/", version = false, ...props }) => {
+  const theme = useTheme2();
+  return /* @__PURE__ */ jsx2(LinkEx, { to, ...props, children: /* @__PURE__ */ jsxs(FlexRow, { paddingX: "4px", children: [
+    /* @__PURE__ */ jsx2(Logo, { height: "40", width: "43" }),
+    version ? /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        position: "absolute",
+        borderRadius: 1,
+        right: 6,
+        color: theme.palette.getContrastText(theme.palette.text.primary),
+        bottom: 0,
+        bgcolor: theme.palette.text.primary,
+        paddingX: "2px",
+        lineHeight: 1,
+        variant: "caption",
+        border: `1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`,
+        children: typeof version === "string" ? version : "2.1"
+      }
+    ) : null
+  ] }) });
+};
+
+// src/components/Toolbar/Context/ContextToolbar.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ContextToolbar = ({ logoTo = "/", version = false, ...props }) => {
+  return /* @__PURE__ */ jsx3(Toolbar, { ...props, children: /* @__PURE__ */ jsx3(LogoLinkEx, { version, to: logoTo }) });
+};
+
+// src/components/Toolbar/System/SystemToolbar.tsx
+import { Paper, Toolbar as Toolbar2 } from "@mui/material";
+import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
+import { DarkModeIconButton } from "@xyo-network/react-app-settings";
+import { NetworkSelectEx } from "@xyo-network/react-network";
+
+// src/components/SiteMenu/hooks/useMenuItemsShared.tsx
+import { useMemo } from "react";
+
+// src/contexts/Collapsible/provider.tsx
+import { useEffect, useState } from "react";
+
+// src/contexts/Collapsible/context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CollapsibleContext = createContextEx();
+
+// src/contexts/Collapsible/provider.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CollapsibleProvider = ({ defaultCollapse = false, defaultCollapseEnd = false, children }) => {
+  const [collapse, setCollapse] = useState(defaultCollapse);
+  const [collapseEnd, setCollapseEnd] = useState(defaultCollapseEnd);
+  useEffect(() => {
+    setCollapse(defaultCollapse);
+  }, [defaultCollapse]);
+  useEffect(() => {
+    setCollapseEnd(defaultCollapseEnd);
+  }, [defaultCollapseEnd]);
+  return /* @__PURE__ */ jsx4(CollapsibleContext.Provider, { value: { collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd }, children });
+};
+
+// src/contexts/Collapsible/use.tsx
+import { useContextEx } from "@xyo-network/react-shared";
+var useCollapsible = () => useContextEx(CollapsibleContext, "Collapsible", false);
+
+// src/components/SiteMenu/hooks/useMenuItemsShared.tsx
+var useMenuItemsShared = () => {
+  const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible();
+  const onMenuItemToggle = (open) => {
+    setCollapse == null ? void 0 : setCollapse((previous) => open ? false : previous);
+    setCollapseEnd == null ? void 0 : setCollapseEnd((previous) => open ? false : previous);
+  };
+  const defaultSiteMenuListItemProps = useMemo(
+    () => ({
+      collapseEnd,
+      dense: true,
+      iconOnly: collapse,
+      sx: {
+        px: "8px"
+      }
+    }),
+    [collapse, collapseEnd]
+  );
+  return { defaultSiteMenuListItemProps, onMenuItemToggle };
+};
+
+// 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 { useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
+import { ListItemText, useTheme as useTheme4 } from "@mui/material";
+import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { LinkEx as LinkEx2 } from "@xylabs/react-link";
+import { 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 { VscInfo } from "react-icons/vsc/index.js";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ListItemTooltip = ({ title, ...props }) => {
+  return /* @__PURE__ */ jsx5(Tooltip, { title, placement: "right", ...props, children: /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(FlexCol, { justifyContent: "center", children: /* @__PURE__ */ jsx5(VscInfo, { color: "grey" }) }) }) });
+};
+
+// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
+import { Typography as Typography2 } from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MenuIcon = ({ icon, ...props }) => {
+  return /* @__PURE__ */ jsx6(Typography2, { display: "flex", ...props, children: icon });
+};
+
+// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
+import { ListItem } from "@mui/material";
+import { jsx as jsx7 } from "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__ */ jsx7(ListItem, { sx: { ...listItemSx, ...spacingSx, ...paddingSx, ...sx }, ...props, children });
+};
+
+// src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx
+import { Collapse, List } from "@mui/material";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SubNavListItemsCollapse = ({ collapse, openSubNav, children, ...props }) => {
+  return /* @__PURE__ */ jsx8(Collapse, { in: collapse == true ? false : openSubNav, ...props, children: /* @__PURE__ */ jsx8(List, { children }) });
+};
+
+// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
+import { IconButton, useTheme as useTheme3 } from "@mui/material";
+import { VscChevronDown } from "react-icons/vsc/index.js";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
+  const theme = useTheme3();
+  return /* @__PURE__ */ jsx9(
+    IconButton,
+    {
+      onClick: (event) => {
+        event.stopPropagation();
+        setOpenSubNav == null ? void 0 : setOpenSubNav(!openSubNav);
+      },
+      sx: { marginRight: theme.spacing(0.5) },
+      children: /* @__PURE__ */ jsx9(VscChevronDown, { fontSize: "16px" })
+    }
+  );
+};
+
+// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
+import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var MenuListItemContainer = ({
+  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 ? iconMenuTextSpacing : theme.spacing(1);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      MenuListItem,
+      {
+        disableGutters: true,
+        iconOnly,
+        onClick: onButtonClick,
+        dense,
+        sx: { justifyContent: "space-between", ...sx },
+        style: { whiteSpace: "nowrap", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx10(
+            LinkEx2,
+            {
+              onMouseEnter: () => setHovered(true),
+              onMouseLeave: () => setHovered(false),
+              color: "inherit",
+              to,
+              sx: {
+                "& :hover": {
+                  cursor: "pointer",
+                  textDecoration: "underline"
+                }
+              },
+              children: /* @__PURE__ */ jsxs2(FlexRow2, { children: [
+                /* @__PURE__ */ jsx10(MenuIcon, { icon, paddingRight: resolvedIconMenuTextSpacing, color: hovered ? "secondary" : "inherit" }),
+                /* @__PURE__ */ jsx10(ListItemText, { primary })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs2(FlexRow2, { style: { marginLeft: theme.spacing(1) }, children: [
+            subNavListItems ? /* @__PURE__ */ jsx10(SubNavToggleIconButton, { setOpenSubNav, openSubNav }) : null,
+            tooltip ? /* @__PURE__ */ jsx10(ListItemTooltip, { title: tooltip }) : null
+          ] })
+        ]
+      }
+    ),
+    subNavListItems ? /* @__PURE__ */ jsx10(SubNavListItemsCollapse, { openSubNav, collapse, children: subNavListItems == null ? void 0 : subNavListItems.map((item, index) => /* @__PURE__ */ jsx10(MenuListItemContainer, { dense, sx: { pl: theme.spacing(1) }, ...item }, index)) }) : null
+  ] });
+};
+
+// src/components/SiteMenu/Menu.tsx
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var SiteMenu = ({ children, onMenuToggle, side = "right", ...props }) => {
+  const [open, setOpen] = useState3(false);
+  useEffect2(() => {
+    onMenuToggle == null ? void 0 : onMenuToggle(open);
+  }, [onMenuToggle, open]);
+  return /* @__PURE__ */ jsxs3(FlexRow3, { alignItems: "stretch", ...props, children: [
+    /* @__PURE__ */ jsx11(
+      IconButton2,
+      {
+        size: "small",
+        color: "inherit",
+        onClick: () => {
+          setOpen(!open);
+        },
+        children: /* @__PURE__ */ jsx11(MenuIcon2, { fontSize: "large" })
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      SwipeableDrawer,
+      {
+        anchor: side,
+        open,
+        onClick: () => setOpen(false),
+        onKeyDown: () => setOpen(false),
+        onClose: () => setOpen(false),
+        onOpen: () => setOpen(true),
+        children: children ?? /* @__PURE__ */ jsx11(List2, { children: /* @__PURE__ */ jsx11(MenuListItemContainer, { primary: "Settings", icon: /* @__PURE__ */ jsx11(SettingsIcon, {}), to: "/settings" }) })
+      }
+    )
+  ] });
+};
+
+// src/components/SiteMenu/MenuSection.tsx
+import { Collapse as Collapse2, ListSubheader } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var MenuSection = ({ iconMenuTextSpacing, listItems, showTitle = true, title, ...props }) => {
+  return /* @__PURE__ */ jsxs4(FlexCol2, { alignItems: "stretch", ...props, children: [
+    /* @__PURE__ */ jsx12(Collapse2, { in: showTitle, timeout: 700, children: /* @__PURE__ */ jsx12(ListSubheader, { children: title }) }),
+    listItems.map((item, index) => /* @__PURE__ */ jsx12(MenuListItemContainer, { iconMenuTextSpacing, ...item }, index))
+  ] });
+};
+
+// src/components/Toolbar/System/SystemToolbar.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var SystemToolbar = ({
+  children,
+  darkModeButton = false,
+  hideNetworkSelect,
+  menuItems,
+  networkSelectProps,
+  onMenuToggle,
+  precedingChildren,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs5(Toolbar2, { ...props, children: [
+    precedingChildren,
+    hideNetworkSelect ? null : /* @__PURE__ */ jsx13(FlexRow4, { marginX: 0.5, children: /* @__PURE__ */ jsx13(Paper, { variant: "elevation", children: /* @__PURE__ */ jsx13(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) }),
+    children,
+    darkModeButton ? /* @__PURE__ */ jsx13(DarkModeIconButton, { color: "inherit" }) : null,
+    menuItems ? /* @__PURE__ */ jsx13(SiteMenu, { onMenuToggle, children: menuItems }) : null
+  ] });
+};
+
+// src/components/AppBar/Application.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ApplicationAppBar = ({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
+  return /* @__PURE__ */ jsx14(
+    AppBarEx,
+    {
+      systemToolbar: systemToolbar ?? /* @__PURE__ */ jsx14(SystemToolbar, {}),
+      contextToolbar: contextToolbar ?? /* @__PURE__ */ jsx14(ContextToolbar, {}),
+      position: "sticky",
+      responsive,
+      ...props
+    }
+  );
+};
+
+// src/components/CollapsibleDrawer/CollapseToggle.tsx
+import { Icon, useTheme as useTheme5 } from "@mui/material";
+import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
+import { useState as useState4 } from "react";
+import { VscArrowSmallLeft, VscArrowSmallRight } from "react-icons/vsc/index.js";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var CollapseToggleFlex = (props) => {
+  const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
+  const [hover, setHover] = useState4(false);
+  const theme = useTheme5();
+  const handleCollapseToggle = () => {
+    setCollapse == null ? void 0 : setCollapse(!collapse);
+    setCollapseEnd == null ? void 0 : setCollapseEnd((previous) => previous ? false : previous);
+  };
+  return /* @__PURE__ */ jsx15(FlexRow5, { mt: 2, py: 2, justifyContent: collapse ? "start" : "center", ...props, children: /* @__PURE__ */ jsx15(
+    Icon,
+    {
+      onClick: handleCollapseToggle,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      fontSize: "large",
+      sx: { color: hover ? theme.palette.secondary.main : "inherit", cursor: "pointer" },
+      children: !collapse ? /* @__PURE__ */ jsx15(VscArrowSmallLeft, {}) : /* @__PURE__ */ jsx15(VscArrowSmallRight, {})
+    }
+  ) });
+};
+
+// src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
+import { Collapse as Collapse3, styled, useTheme as useTheme6 } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var CollapsibleDrawer = ({ children, sx, ...props }) => {
+  const { collapse, setCollapseEnd } = useCollapsible();
+  const theme = useTheme6();
+  const collapsedSize = props.collapsedSize ?? theme.spacing(5);
+  return /* @__PURE__ */ jsx16(
+    CollapsibleFlexInner,
+    {
+      in: !collapse,
+      orientation: "horizontal",
+      collapsedSize,
+      onExited: () => setCollapseEnd == null ? void 0 : setCollapseEnd(true),
+      sx: {
+        alignItems: "start",
+        display: "flex",
+        height: "100%",
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+};
+var CollapsibleFlexInner = styled(Collapse3)(() => ({
+  "& .MuiCollapse-wrapperInner": {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
+
+// src/components/MobileSystemControls/SystemControls.tsx
+import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
+
+// src/components/MobileSystemControls/SystemControlsRoot.tsx
+import { styled as styled2 } from "@mui/material";
+
+// src/components/MobileSystemControls/SystemControlsType.ts
+var SystemControlsType = /* @__PURE__ */ ((SystemControlsType2) => {
+  SystemControlsType2["Left"] = "Left";
+  SystemControlsType2["Right"] = "Right";
+  SystemControlsType2["WindowShade"] = "WindowShade";
+  return SystemControlsType2;
+})(SystemControlsType || {});
+
+// src/components/MobileSystemControls/SystemControlsUnstyled.tsx
+import { Paper as Paper2, useMediaQuery } from "@mui/material";
+import { FlexCol as FlexCol4, FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
+import { NetworkSelectEx as NetworkSelectEx2 } from "@xyo-network/react-network";
+
+// 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 { useState as useState5 } from "react";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+var SystemControl = ({
+  children,
+  controlElement,
+  systemControlsType = "WindowShade" /* WindowShade */,
+  ...props
+}) => {
+  const [toggleControls, setToggleControls] = useState5(false);
+  let orientation = "vertical";
+  switch (systemControlsType) {
+    case "Left" /* Left */: {
+      orientation = "horizontal";
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs6(FlexRow6, { className: "controls", ...props, children: [
+    /* @__PURE__ */ jsx17(Collapse4, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ jsx17(FlexRow6, { bgcolor: "primary.main", className: "control", children: controlElement }) }),
+    /* @__PURE__ */ jsx17(FlexCol3, { style: { cursor: "pointer" }, onClick: () => setToggleControls(!toggleControls), children })
+  ] });
+};
+
+// src/components/MobileSystemControls/SystemControlsUnstyled.tsx
+import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
+var SystemControlsUnstyled = ({
+  visible,
+  systemControlsType = "WindowShade" /* WindowShade */,
+  ...props
+}) => {
+  const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  if (visible || isSmall) {
+    return /* @__PURE__ */ jsx18(FlexCol4, { ...props, className: `${props.className} system-controls-type-${systemControlsType}`, children: /* @__PURE__ */ jsx18(
+      SystemControl,
+      {
+        systemControlsType,
+        controlElement: /* @__PURE__ */ jsx18(Fragment2, { children: /* @__PURE__ */ jsx18(FlexRow7, { className: "control-wrap", children: /* @__PURE__ */ jsx18(Paper2, { variant: "elevation", elevation: 0, children: /* @__PURE__ */ jsx18(NetworkSelectEx2, { responsive: false, className: "network-ex" }) }) }) })
+      }
+    ) });
+  } else {
+    return /* @__PURE__ */ jsx18(FlexCol4, {});
+  }
+};
+
+// src/components/MobileSystemControls/SystemControlsRoot.tsx
+var SystemControlsRoot = styled2(SystemControlsUnstyled, { name: "SystemControls", slot: "Root" })(({ theme }) => ({
+  // shared defaults
+  ["&"]: {
+    ".toggle": {
+      backgroundColor: theme.palette.primary.main
+    },
+    alignItems: "start",
+    zIndex: 1
+  },
+  // WindowShade System Controls styles
+  [`&.system-controls-type-${"WindowShade" /* WindowShade */}`]: {
+    ".control": {
+      borderRadius: "0 0 5px 5px",
+      flexDirection: "row",
+      flexGrow: 1,
+      justifyContent: "space-around",
+      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`
+    },
+    ".controls": {
+      alignItems: "stretch",
+      flexDirection: "column",
+      flexGrow: 1
+    },
+    ".toggle": {
+      borderRadius: "0 0 5px 5px",
+      padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`
+    },
+    flexDirection: "row",
+    position: "absolute",
+    top: 0,
+    width: "100%"
+  },
+  // Left System Control styles
+  [`&.system-controls-type-${"Left" /* Left */}`]: {
+    ".control": {
+      alignItems: "start",
+      flexDirection: "column",
+      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`
+    },
+    ".control-wrap": {
+      marginBottom: `${theme.spacing(2)}`
+    },
+    ".toggle": {
+      borderRadius: "0 5px 5px 0",
+      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+      writingMode: "vertical-rl"
+    },
+    flexDirection: "column",
+    left: 0,
+    position: "fixed",
+    top: "30vh",
+    width: "auto"
   }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./components"), module.exports);
-__reExport(src_exports, require("./contexts"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("./components"),
-  ...require("./contexts")
-});
+}));
+
+// src/components/MobileSystemControls/SystemControls.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var SystemControls = (props) => {
+  return /* @__PURE__ */ jsx19(FlexCol5, { children: /* @__PURE__ */ jsx19(SystemControlsRoot, { ...props }) });
+};
+
+// 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 { useState as useState6 } from "react";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+var SearchBar = ({ defaultValue, onSearch, ...props }) => {
+  const [term, setTerm] = useState6();
+  return /* @__PURE__ */ jsx20(FlexRow8, { alignItems: "stretch", ...props, children: /* @__PURE__ */ jsxs7(Paper3, { variant: "elevation", elevation: 0, style: { display: "flex", overflow: "hidden", width: "100%" }, children: [
+    /* @__PURE__ */ jsx20(
+      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);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx20(ButtonEx, { variant: "contained", style: { borderRadius: 0, borderTopLeftRadius: 0 }, color: "secondary", onClick: () => onSearch == null ? void 0 : onSearch(term), children: /* @__PURE__ */ jsx20(SearchIcon, {}) })
+  ] }) });
+};
+export {
+  ApplicationAppBar,
+  CollapseToggleFlex,
+  CollapsibleDrawer,
+  CollapsibleProvider,
+  ContextToolbar,
+  MenuListItemContainer,
+  MenuSection,
+  SearchBar,
+  SiteMenu,
+  SystemControls,
+  SystemControlsType,
+  SystemControlsUnstyled,
+  SystemToolbar,
+  useCollapsible,
+  useMenuItemsShared
+};
 //# sourceMappingURL=index.js.map