@xyo-network/react-appbar 2.82.0 → 2.83.0

package/dist/neutral/index.mjs

@@ -1,634 +0,0 @@
-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?.((previous) => open ? false : previous);
-    setCollapseEnd?.((previous) => open ? false : previous);
-  }, "onMenuItemToggle");
-  const defaultSiteMenuListItemProps = useMemo(() => ({
-    collapseEnd,
-    dense: true,
-    iconOnly: collapse,
-    sx: {
-      px: "8px"
-    }
-  }), [
-    collapse,
-    collapseEnd
-  ]);
-  return {
-    defaultSiteMenuListItemProps,
-    onMenuItemToggle
-  };
-}, "useMenuItemsShared");
-
-// src/components/SiteMenu/Menu.tsx
-import { Menu as MenuIcon2, Settings as SettingsIcon } from "@mui/icons-material";
-import { IconButton as IconButton2, List as List2, SwipeableDrawer } from "@mui/material";
-import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-import React11, { useEffect 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?.(!openSubNav);
-    }, "onClick"),
-    sx: {
-      marginRight: theme.spacing(0.5)
-    }
-  }, /* @__PURE__ */ React9.createElement(VscChevronDown, {
-    fontSize: "16px"
-  }));
-}, "SubNavToggleIconButton");
-
-// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
-var MenuListItemContainer = /* @__PURE__ */ __name(({ style, icon, iconMenuTextSpacing, iconOnly, onButtonClick, primary, subNavListItems, sx, tooltip, to, ...props }) => {
-  const { dense } = props;
-  const theme = useTheme4();
-  const { collapse } = useCollapsible();
-  const [openSubNav, setOpenSubNav] = useState2(false);
-  const [hovered, setHovered] = useState2(false);
-  const resolvedIconMenuTextSpacing = iconMenuTextSpacing ?? theme.spacing(1);
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(MenuListItem, {
-    disableGutters: true,
-    iconOnly,
-    onClick: onButtonClick,
-    dense,
-    sx: {
-      justifyContent: "space-between",
-      ...sx
-    },
-    style: {
-      whiteSpace: "nowrap",
-      ...style
-    },
-    ...props
-  }, /* @__PURE__ */ React10.createElement(LinkEx2, {
-    onMouseEnter: /* @__PURE__ */ __name(() => setHovered(true), "onMouseEnter"),
-    onMouseLeave: /* @__PURE__ */ __name(() => setHovered(false), "onMouseLeave"),
-    color: "inherit",
-    to,
-    sx: {
-      "& :hover": {
-        cursor: "pointer",
-        textDecoration: "underline"
-      }
-    }
-  }, /* @__PURE__ */ React10.createElement(FlexRow2, null, /* @__PURE__ */ React10.createElement(MenuIcon, {
-    icon,
-    paddingRight: resolvedIconMenuTextSpacing,
-    color: hovered ? "secondary" : "inherit"
-  }), /* @__PURE__ */ React10.createElement(ListItemText, {
-    primary
-  }))), /* @__PURE__ */ React10.createElement(FlexRow2, {
-    style: {
-      marginLeft: theme.spacing(1)
-    }
-  }, subNavListItems ? /* @__PURE__ */ React10.createElement(SubNavToggleIconButton, {
-    setOpenSubNav,
-    openSubNav
-  }) : null, tooltip ? /* @__PURE__ */ React10.createElement(ListItemTooltip, {
-    title: tooltip
-  }) : null)), subNavListItems ? /* @__PURE__ */ React10.createElement(SubNavListItemsCollapse, {
-    openSubNav,
-    collapse
-  }, subNavListItems?.map((item, index) => /* @__PURE__ */ React10.createElement(MenuListItemContainer, {
-    dense,
-    sx: {
-      pl: theme.spacing(1)
-    },
-    key: index,
-    ...item
-  }))) : null);
-}, "MenuListItemContainer");
-
-// src/components/SiteMenu/Menu.tsx
-var SiteMenu = /* @__PURE__ */ __name(({ children, onMenuToggle, side = "right", ...props }) => {
-  const [open, setOpen] = useState3(false);
-  useEffect2(() => {
-    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?.(!collapse);
-    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?.(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?.(term);
-    }, "onKeyDown")
-  }), /* @__PURE__ */ React20.createElement(ButtonEx, {
-    variant: "contained",
-    style: {
-      borderRadius: 0,
-      borderTopLeftRadius: 0
-    },
-    color: "secondary",
-    onClick: /* @__PURE__ */ __name(() => 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