@xyo-network/react-appbar 2.77.0 → 2.77.1

package/dist/browser/index.js

@@ -1,542 +1,2 @@
-// 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?.((previous) => open ? false : previous);
-    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";
-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";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
-  const theme = useTheme3();
-  return /* @__PURE__ */ jsx9(
-    IconButton,
-    {
-      onClick: (event) => {
-        event.stopPropagation();
-        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 ?? 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?.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?.(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";
-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?.(!collapse);
-    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(VscArrowSmallRight, {}) : /* @__PURE__ */ jsx15(VscArrowSmallLeft, {})
-    }
-  ) });
-};
-
-// 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?.(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"));
-  return visible || isSmall ? /* @__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" }) }) }) })
-    }
-  ) }) : /* @__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"
-  }
-}));
-
-// 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?.(term);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx20(ButtonEx, { variant: "contained", style: { borderRadius: 0, borderTopLeftRadius: 0 }, color: "secondary", onClick: () => onSearch?.(term), children: /* @__PURE__ */ jsx20(SearchIcon, {}) })
-  ] }) });
-};
-export {
-  ApplicationAppBar,
-  CollapseToggleFlex,
-  CollapsibleDrawer,
-  CollapsibleProvider,
-  ContextToolbar,
-  MenuListItemContainer,
-  MenuSection,
-  SearchBar,
-  SiteMenu,
-  SystemControls,
-  SystemControlsType,
-  SystemControlsUnstyled,
-  SystemToolbar,
-  useCollapsible,
-  useMenuItemsShared
-};
+import{AppBarEx as jo}from"@xylabs/react-appbar";import{Toolbar as xo}from"@mui/material";import{Typography as io,useTheme as po}from"@mui/material";import{FlexRow as ao}from"@xylabs/react-flexbox";import{LinkEx as mo}from"@xylabs/react-link";import{useTheme as no}from"@mui/material";import{jsx as lo}from"react/jsx-runtime";var F=o=>{let r=(no().palette.mode==="dark","https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg");return lo("img",{src:r,...o})};import{jsx as y,jsxs as co}from"react/jsx-runtime";var M=({to:o="/",version:e=!1,...r})=>{let t=po();return y(mo,{to:o,...r,children:co(ao,{paddingX:"4px",children:[y(F,{height:"40",width:"43"}),e?y(io,{position:"absolute",borderRadius:1,right:6,color:t.palette.getContrastText(t.palette.text.primary),bottom:0,bgcolor:t.palette.text.primary,paddingX:"2px",lineHeight:1,variant:"caption",border:`1px ${t.palette.getContrastText(t.palette.primary.main)} solid`,children:typeof e=="string"?e:"2.1"}):null]})})};import{jsx as E}from"react/jsx-runtime";var B=({logoTo:o="/",version:e=!1,...r})=>E(xo,{...r,children:E(M,{version:e,to:o})});import{Paper as _o,Toolbar as Ko}from"@mui/material";import{FlexRow as Qo}from"@xylabs/react-flexbox";import{DarkModeIconButton as qo}from"@xyo-network/react-app-settings";import{NetworkSelectEx as Jo}from"@xyo-network/react-network";import{useMemo as go}from"react";import{useEffect as N,useState as k}from"react";import{createContextEx as uo}from"@xyo-network/react-shared";var f=uo();import{jsx as fo}from"react/jsx-runtime";var Qe=({defaultCollapse:o=!1,defaultCollapseEnd:e=!1,children:r})=>{let[t,s]=k(o),[n,l]=k(e);return N(()=>{s(o)},[o]),N(()=>{l(e)},[e]),fo(f.Provider,{value:{collapse:t,collapseEnd:n,provided:!0,setCollapse:s,setCollapseEnd:l},children:r})};import{useContextEx as Co}from"@xyo-network/react-shared";var p=()=>Co(f,"Collapsible",!1);var rt=()=>{let{collapse:o,collapseEnd:e,setCollapse:r,setCollapseEnd:t}=p(),s=l=>{r?.(i=>l?!1:i),t?.(i=>l?!1:i)};return{defaultSiteMenuListItemProps:go(()=>({collapseEnd:e,dense:!0,iconOnly:o,sx:{px:"8px"}}),[o,e]),onMenuItemToggle:s}};import{Menu as ko,Settings as Do}from"@mui/icons-material";import{IconButton as Wo,List as Oo,SwipeableDrawer as Ao}from"@mui/material";import{FlexRow as $o}from"@xylabs/react-flexbox";import{useEffect as zo,useState as Uo}from"react";import{ListItemText as Mo,useTheme as Eo}from"@mui/material";import{FlexRow as H}from"@xylabs/react-flexbox";import{LinkEx as Bo}from"@xylabs/react-link";import{useState as X}from"react";import{Tooltip as So}from"@mui/material";import{FlexCol as Po}from"@xylabs/react-flexbox";import{VscInfo as bo}from"react-icons/vsc";import{jsx as C}from"react/jsx-runtime";var D=({title:o,...e})=>C(So,{title:o,placement:"right",...e,children:C("div",{children:C(Po,{justifyContent:"center",children:C(bo,{color:"grey"})})})});import{Typography as yo}from"@mui/material";import{jsx as ho}from"react/jsx-runtime";var W=({icon:o,...e})=>ho(yo,{display:"flex",...e,children:o});import{ListItem as Io}from"@mui/material";import{jsx as To}from"react/jsx-runtime";var O=({iconOnly:o,collapseEnd:e,sx:r,children:t,dense:s,...n})=>To(Io,{sx:{...o?{borderRadius:"50%",display:"inline-flex",flexGrow:0,width:"auto"}:{width:"100%"},...e?{columnGap:0}:{columnGap:1.5},...s?{px:"8px"}:{px:"12px"},...r},...n,children:t});import{Collapse as Lo,List as Ro}from"@mui/material";import{jsx as A}from"react/jsx-runtime";var $=({collapse:o,openSubNav:e,children:r,...t})=>A(Lo,{in:o==!0?!1:e,...t,children:A(Ro,{children:r})});import{IconButton as vo,useTheme as wo}from"@mui/material";import{VscChevronDown as Fo}from"react-icons/vsc";import{jsx as z}from"react/jsx-runtime";var U=({setOpenSubNav:o,openSubNav:e})=>{let r=wo();return z(vo,{onClick:t=>{t.stopPropagation(),o?.(!e)},sx:{marginRight:r.spacing(.5)},children:z(Fo,{fontSize:"16px"})})};import{Fragment as No,jsx as a,jsxs as g}from"react/jsx-runtime";var d=({style:o,icon:e,iconMenuTextSpacing:r,iconOnly:t,onButtonClick:s,primary:n,subNavListItems:l,sx:i,tooltip:c,to:Z,...L})=>{let{dense:R}=L,b=Eo(),{collapse:j}=p(),[v,oo]=X(!1),[eo,w]=X(!1),to=r??b.spacing(1);return g(No,{children:[g(O,{disableGutters:!0,iconOnly:t,onClick:s,dense:R,sx:{justifyContent:"space-between",...i},style:{whiteSpace:"nowrap",...o},...L,children:[a(Bo,{onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1),color:"inherit",to:Z,sx:{"& :hover":{cursor:"pointer",textDecoration:"underline"}},children:g(H,{children:[a(W,{icon:e,paddingRight:to,color:eo?"secondary":"inherit"}),a(Mo,{primary:n})]})}),g(H,{style:{marginLeft:b.spacing(1)},children:[l?a(U,{setOpenSubNav:oo,openSubNav:v}):null,c?a(D,{title:c}):null]})]}),l?a($,{openSubNav:v,collapse:j,children:l?.map((ro,so)=>a(d,{dense:R,sx:{pl:b.spacing(1)},...ro},so))}):null]})};import{jsx as x,jsxs as Ho}from"react/jsx-runtime";var G=({children:o,onMenuToggle:e,side:r="right",...t})=>{let[s,n]=Uo(!1);return zo(()=>{e?.(s)},[e,s]),Ho($o,{alignItems:"stretch",...t,children:[x(Wo,{size:"small",color:"inherit",onClick:()=>{n(!s)},children:x(ko,{fontSize:"large"})}),x(Ao,{anchor:r,open:s,onClick:()=>n(!1),onKeyDown:()=>n(!1),onClose:()=>n(!1),onOpen:()=>n(!0),children:o??x(Oo,{children:x(d,{primary:"Settings",icon:x(Do,{}),to:"/settings"})})})]})};import{Collapse as Xo,ListSubheader as Go}from"@mui/material";import{FlexCol as Vo}from"@xylabs/react-flexbox";import{jsx as h,jsxs as Yo}from"react/jsx-runtime";var Jt=({iconMenuTextSpacing:o,listItems:e,showTitle:r=!0,title:t,...s})=>Yo(Vo,{alignItems:"stretch",...s,children:[h(Xo,{in:r,timeout:700,children:h(Go,{children:t})}),e.map((n,l)=>h(d,{iconMenuTextSpacing:o,...n},l))]});import{jsx as u,jsxs as Zo}from"react/jsx-runtime";var V=({children:o,darkModeButton:e=!1,hideNetworkSelect:r,menuItems:t,networkSelectProps:s,onMenuToggle:n,precedingChildren:l,...i})=>Zo(Ko,{...i,children:[l,r?null:u(Qo,{marginX:.5,children:u(_o,{variant:"elevation",children:u(Jo,{fullWidth:!0,...s})})}),o,e?u(qo,{color:"inherit"}):null,t?u(G,{onMenuToggle:n,children:t}):null]});import{jsx as I}from"react/jsx-runtime";var dr=({systemToolbar:o,contextToolbar:e,responsive:r=!0,...t})=>I(jo,{systemToolbar:o??I(V,{}),contextToolbar:e??I(B,{}),position:"sticky",responsive:r,...t});import{Icon as oe,useTheme as ee}from"@mui/material";import{FlexRow as te}from"@xylabs/react-flexbox";import{useState as re}from"react";import{VscArrowSmallLeft as se,VscArrowSmallRight as ne}from"react-icons/vsc";import{jsx as S}from"react/jsx-runtime";var hr=o=>{let{collapse:e,setCollapse:r,setCollapseEnd:t}=p(),[s,n]=re(!1),l=ee();return S(te,{mt:2,py:2,justifyContent:e?"start":"center",...o,children:S(oe,{onClick:()=>{r?.(!e),t?.(c=>c&&!1)},onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),fontSize:"large",sx:{color:s?l.palette.secondary.main:"inherit",cursor:"pointer"},children:e?S(ne,{}):S(se,{})})})};import{Collapse as le,styled as ie,useTheme as pe}from"@mui/material";import{jsx as me}from"react/jsx-runtime";var wr=({children:o,sx:e,...r})=>{let{collapse:t,setCollapseEnd:s}=p(),n=pe(),l=r.collapsedSize??n.spacing(5);return me(ae,{in:!t,orientation:"horizontal",collapsedSize:l,onExited:()=>s?.(!0),sx:{alignItems:"start",display:"flex",height:"100%",...e},...r,children:o})},ae=ie(le)(()=>({"& .MuiCollapse-wrapperInner":{display:"flex",flexDirection:"column"}}));import{FlexCol as he}from"@xylabs/react-flexbox";import{styled as ye}from"@mui/material";var ce=(t=>(t.Left="Left",t.Right="Right",t.WindowShade="WindowShade",t))(ce||{});import{Paper as Ce,useMediaQuery as ge}from"@mui/material";import{FlexCol as K,FlexRow as Se}from"@xylabs/react-flexbox";import{NetworkSelectEx as Pe}from"@xyo-network/react-network";import{Collapse as xe}from"@mui/material";import{FlexCol as de,FlexRow as Y}from"@xylabs/react-flexbox";import{useState as ue}from"react";import{jsx as T,jsxs as fe}from"react/jsx-runtime";var _=({children:o,controlElement:e,systemControlsType:r="WindowShade",...t})=>{let[s,n]=ue(!1),l="vertical";switch(r){case"Left":{l="horizontal";break}}return fe(Y,{className:"controls",...t,children:[T(xe,{in:s,orientation:l,timeout:500,children:T(Y,{bgcolor:"primary.main",className:"control",children:e})}),T(de,{style:{cursor:"pointer"},onClick:()=>n(!s),children:o})]})};import{Fragment as be,jsx as m}from"react/jsx-runtime";var Q=({visible:o,systemControlsType:e="WindowShade",...r})=>{let t=ge(s=>s.breakpoints.down("sm"));return o||t?m(K,{...r,className:`${r.className} system-controls-type-${e}`,children:m(_,{systemControlsType:e,controlElement:m(be,{children:m(Se,{className:"control-wrap",children:m(Ce,{variant:"elevation",elevation:0,children:m(Pe,{responsive:!1,className:"network-ex"})})})})})}):m(K,{})};var q=ye(Q,{name:"SystemControls",slot:"Root"})(({theme:o})=>({"&":{".toggle":{backgroundColor:o.palette.primary.main},alignItems:"start",zIndex:1},["&.system-controls-type-WindowShade"]:{".control":{borderRadius:"0 0 5px 5px",flexDirection:"row",flexGrow:1,justifyContent:"space-around",padding:`${o.spacing(2)} ${o.spacing(2.5)}`},".controls":{alignItems:"stretch",flexDirection:"column",flexGrow:1},".toggle":{borderRadius:"0 0 5px 5px",padding:`${o.spacing(.5)} ${o.spacing(1)}`},flexDirection:"row",position:"absolute",top:0,width:"100%"},["&.system-controls-type-Left"]:{".control":{alignItems:"start",flexDirection:"column",padding:`${o.spacing(2)} ${o.spacing(2.5)}`},".control-wrap":{marginBottom:`${o.spacing(2)}`},".toggle":{borderRadius:"0 5px 5px 0",padding:`${o.spacing(1)} ${o.spacing(.5)}`,writingMode:"vertical-rl"},flexDirection:"column",left:0,position:"fixed",top:"30vh",width:"auto"}}));import{jsx as J}from"react/jsx-runtime";var jr=o=>J(he,{children:J(q,{...o})});import{Search as Ie}from"@mui/icons-material";import{Paper as Te,TextField as Le}from"@mui/material";import{ButtonEx as Re}from"@xylabs/react-button";import{FlexRow as ve}from"@xylabs/react-flexbox";import{useState as we}from"react";import{jsx as P,jsxs as Fe}from"react/jsx-runtime";var ps=({defaultValue:o,onSearch:e,...r})=>{let[t,s]=we();return P(ve,{alignItems:"stretch",...r,children:Fe(Te,{variant:"elevation",elevation:0,style:{display:"flex",overflow:"hidden",width:"100%"},children:[P(Le,{InputProps:{color:"secondary",style:{borderBottomRightRadius:0,borderTopRightRadius:0,borderWidth:0}},variant:"outlined",size:"small",defaultValue:o,fullWidth:!0,onChange:n=>s(n.target.value),onKeyDown:n=>{n.key==="Enter"&&e?.(t)}}),P(Re,{variant:"contained",style:{borderRadius:0,borderTopLeftRadius:0},color:"secondary",onClick:()=>e?.(t),children:P(Ie,{})})]})})};export{dr as ApplicationAppBar,hr as CollapseToggleFlex,wr as CollapsibleDrawer,Qe as CollapsibleProvider,B as ContextToolbar,d as MenuListItemContainer,Jt as MenuSection,ps as SearchBar,G as SiteMenu,jr as SystemControls,ce as SystemControlsType,Q as SystemControlsUnstyled,V as SystemToolbar,p as useCollapsible,rt as useMenuItemsShared};
 //# sourceMappingURL=index.js.map