@xyo-network/react-appbar 2.81.10 → 2.82.0

package/dist/node/index.mjs

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