@xyo-network/react-appbar 2.64.0 → 2.64.3

package/dist/browser/components/MobileSystemControls/controls/SystemControlText.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/MobileSystemControls/controls/SystemControlText.tsx
 import { Typography } from "@mui/material";
 import { FlexCol } from "@xylabs/react-flexbox";
-const ControlText = ({ value, ...props }) => {
+import { jsx } from "react/jsx-runtime";
+var ControlText = ({ value, ...props }) => {
   return /* @__PURE__ */ jsx(FlexCol, { className: `${props.className} toggle`, ...props, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "white", fontWeight: "bold", children: value }) });
 };
 export {

package/dist/browser/components/MobileSystemControls/controls/SystemControlText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/MobileSystemControls/controls/SystemControlText.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\n\ninterface SystemControlTextProps extends FlexBoxProps {\n  value?: string\n}\n\nconst ControlText: React.FC<SystemControlTextProps> = ({ value, ...props }) => {\n  return (\n    <FlexCol className={`${props.className} toggle`} {...props}>\n      <Typography variant=\"caption\" color=\"white\" fontWeight=\"bold\">\n        {value}\n      </Typography>\n    </FlexCol>\n  )\n}\n\nexport { ControlText }\n"],"mappings":"AAUM;AAVN,SAAS,kBAAkB;AAC3B,SAAuB,eAAe;AAMtC,MAAM,cAAgD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AAC7E,SACE,oBAAC,WAAQ,WAAW,GAAG,MAAM,SAAS,WAAY,GAAG,OACnD,8BAAC,cAAW,SAAQ,WAAU,OAAM,SAAQ,YAAW,QACpD,iBACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/MobileSystemControls/controls/SystemControlText.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\n\ninterface SystemControlTextProps extends FlexBoxProps {\n  value?: string\n}\n\nconst ControlText: React.FC<SystemControlTextProps> = ({ value, ...props }) => {\n  return (\n    <FlexCol className={`${props.className} toggle`} {...props}>\n      <Typography variant=\"caption\" color=\"white\" fontWeight=\"bold\">\n        {value}\n      </Typography>\n    </FlexCol>\n  )\n}\n\nexport { ControlText }\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAuB,eAAe;AAShC;AAHN,IAAM,cAAgD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AAC7E,SACE,oBAAC,WAAQ,WAAW,GAAG,MAAM,SAAS,WAAY,GAAG,OACnD,8BAAC,cAAW,SAAQ,WAAU,OAAM,SAAQ,YAAW,QACpD,iBACH,GACF;AAEJ;","names":[]}

package/dist/browser/components/MobileSystemControls/controls/index.js

@@ -1,3 +1,37 @@
-export * from "./SystemControl";
-export * from "./SystemControlText";
+// src/components/MobileSystemControls/controls/SystemControl.tsx
+import { Collapse } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SystemControl = ({
+  children,
+  controlElement,
+  systemControlsType = "WindowShade" /* WindowShade */,
+  ...props
+}) => {
+  const [toggleControls, setToggleControls] = useState(false);
+  let orientation = "vertical";
+  switch (systemControlsType) {
+    case "Left" /* Left */: {
+      orientation = "horizontal";
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs(FlexRow, { className: "controls", ...props, children: [
+    /* @__PURE__ */ jsx(Collapse, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ jsx(FlexRow, { bgcolor: "primary.main", className: "control", children: controlElement }) }),
+    /* @__PURE__ */ jsx(FlexCol, { style: { cursor: "pointer" }, onClick: () => setToggleControls(!toggleControls), children })
+  ] });
+};
+
+// src/components/MobileSystemControls/controls/SystemControlText.tsx
+import { Typography } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ControlText = ({ value, ...props }) => {
+  return /* @__PURE__ */ jsx2(FlexCol2, { className: `${props.className} toggle`, ...props, children: /* @__PURE__ */ jsx2(Typography, { variant: "caption", color: "white", fontWeight: "bold", children: value }) });
+};
+export {
+  ControlText,
+  SystemControl
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/MobileSystemControls/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/MobileSystemControls/controls/index.ts"],"sourcesContent":["export * from './SystemControl'\nexport * from './SystemControlText'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../../../src/components/MobileSystemControls/controls/SystemControl.tsx","../../../../../src/components/MobileSystemControls/controls/SystemControlText.tsx"],"sourcesContent":["import { Collapse, CollapseProps } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useState } from 'react'\n\nimport { SystemControlsType } from '../SystemControlsType'\n\ninterface SystemControlProps extends FlexBoxProps {\n  controlElement: React.ReactNode\n  systemControlsType?: SystemControlsType\n}\n\nconst SystemControl: React.FC<WithChildren<SystemControlProps>> = ({\n  children,\n  controlElement,\n  systemControlsType = SystemControlsType.WindowShade,\n  ...props\n}) => {\n  const [toggleControls, setToggleControls] = useState(false)\n\n  let orientation: CollapseProps['orientation'] = 'vertical'\n\n  switch (systemControlsType) {\n    case SystemControlsType.Left: {\n      orientation = 'horizontal'\n      break\n    }\n  }\n\n  return (\n    <FlexRow className=\"controls\" {...props}>\n      <Collapse in={toggleControls} orientation={orientation} timeout={500}>\n        <FlexRow bgcolor=\"primary.main\" className=\"control\">\n          {controlElement}\n        </FlexRow>\n      </Collapse>\n      <FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>\n        {children}\n      </FlexCol>\n    </FlexRow>\n  )\n}\n\nexport { SystemControl }\n","import { Typography } from '@mui/material'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\n\ninterface SystemControlTextProps extends FlexBoxProps {\n  value?: string\n}\n\nconst ControlText: React.FC<SystemControlTextProps> = ({ value, ...props }) => {\n  return (\n    <FlexCol className={`${props.className} toggle`} {...props}>\n      <Typography variant=\"caption\" color=\"white\" fontWeight=\"bold\">\n        {value}\n      </Typography>\n    </FlexCol>\n  )\n}\n\nexport { ControlText }\n"],"mappings":";AAAA,SAAS,gBAA+B;AACxC,SAAuB,SAAS,eAAe;AAE/C,SAAS,gBAAgB;AA2BrB,SAEI,KAFJ;AAlBJ,IAAM,gBAA4D,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,MAAI,cAA4C;AAEhD,UAAQ,oBAAoB;AAAA,IAC1B,wBAA8B;AAC5B,oBAAc;AACd;AAAA,IACF;AAAA,EACF;AAEA,SACE,qBAAC,WAAQ,WAAU,YAAY,GAAG,OAChC;AAAA,wBAAC,YAAS,IAAI,gBAAgB,aAA0B,SAAS,KAC/D,8BAAC,WAAQ,SAAQ,gBAAe,WAAU,WACvC,0BACH,GACF;AAAA,IACA,oBAAC,WAAQ,OAAO,EAAE,QAAQ,UAAU,GAAG,SAAS,MAAM,kBAAkB,CAAC,cAAc,GACpF,UACH;AAAA,KACF;AAEJ;;;ACzCA,SAAS,kBAAkB;AAC3B,SAAuB,WAAAA,gBAAe;AAShC,gBAAAC,YAAA;AAHN,IAAM,cAAgD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AAC7E,SACE,gBAAAA,KAACD,UAAA,EAAQ,WAAW,GAAG,MAAM,SAAS,WAAY,GAAG,OACnD,0BAAAC,KAAC,cAAW,SAAQ,WAAU,OAAM,SAAQ,YAAW,QACpD,iBACH,GACF;AAEJ;","names":["FlexCol","jsx"]}

package/dist/browser/components/MobileSystemControls/index.js

@@ -1,4 +1,132 @@
-export * from "./SystemControls";
-export * from "./SystemControlsType";
-export * from "./SystemControlsUnstyled";
+// src/components/MobileSystemControls/SystemControls.tsx
+import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
+
+// src/components/MobileSystemControls/SystemControlsRoot.tsx
+import { styled } 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, useMediaQuery } from "@mui/material";
+import { FlexCol as FlexCol2, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { NetworkSelectEx } from "@xyo-network/react-network";
+
+// src/components/MobileSystemControls/controls/SystemControl.tsx
+import { Collapse } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SystemControl = ({
+  children,
+  controlElement,
+  systemControlsType = "WindowShade" /* WindowShade */,
+  ...props
+}) => {
+  const [toggleControls, setToggleControls] = useState(false);
+  let orientation = "vertical";
+  switch (systemControlsType) {
+    case "Left" /* Left */: {
+      orientation = "horizontal";
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs(FlexRow, { className: "controls", ...props, children: [
+    /* @__PURE__ */ jsx(Collapse, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ jsx(FlexRow, { bgcolor: "primary.main", className: "control", children: controlElement }) }),
+    /* @__PURE__ */ jsx(FlexCol, { style: { cursor: "pointer" }, onClick: () => setToggleControls(!toggleControls), children })
+  ] });
+};
+
+// src/components/MobileSystemControls/SystemControlsUnstyled.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var SystemControlsUnstyled = ({
+  visible,
+  systemControlsType = "WindowShade" /* WindowShade */,
+  ...props
+}) => {
+  const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  if (visible || isSmall) {
+    return /* @__PURE__ */ jsx2(FlexCol2, { ...props, className: `${props.className} system-controls-type-${systemControlsType}`, children: /* @__PURE__ */ jsx2(
+      SystemControl,
+      {
+        systemControlsType,
+        controlElement: /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(FlexRow2, { className: "control-wrap", children: /* @__PURE__ */ jsx2(Paper, { variant: "elevation", elevation: 0, children: /* @__PURE__ */ jsx2(NetworkSelectEx, { responsive: false, className: "network-ex" }) }) }) })
+      }
+    ) });
+  } else {
+    return /* @__PURE__ */ jsx2(FlexCol2, {});
+  }
+};
+
+// src/components/MobileSystemControls/SystemControlsRoot.tsx
+var SystemControlsRoot = styled(SystemControlsUnstyled, { name: "SystemControls", slot: "Root" })(({ theme }) => ({
+  // shared defaults
+  ["&"]: {
+    ".toggle": {
+      backgroundColor: theme.palette.primary.main
+    },
+    alignItems: "start",
+    zIndex: 1
+  },
+  // WindowShade System Controls styles
+  [`&.system-controls-type-${"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 jsx3 } from "react/jsx-runtime";
+var SystemControls = (props) => {
+  return /* @__PURE__ */ jsx3(FlexCol3, { children: /* @__PURE__ */ jsx3(SystemControlsRoot, { ...props }) });
+};
+export {
+  SystemControls,
+  SystemControlsType,
+  SystemControlsUnstyled
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/MobileSystemControls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/MobileSystemControls/index.ts"],"sourcesContent":["export * from './SystemControls'\nexport * from './SystemControlsType'\nexport * from './SystemControlsUnstyled'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/MobileSystemControls/SystemControls.tsx","../../../../src/components/MobileSystemControls/SystemControlsRoot.tsx","../../../../src/components/MobileSystemControls/SystemControlsType.ts","../../../../src/components/MobileSystemControls/SystemControlsUnstyled.tsx","../../../../src/components/MobileSystemControls/controls/SystemControl.tsx"],"sourcesContent":["import { FlexCol } from '@xylabs/react-flexbox'\n\nimport { SystemControlsRoot } from './SystemControlsRoot'\nimport { SystemControlsUnstyledProps } from './SystemControlsUnstyled'\n\nconst SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {\n  return (\n    <FlexCol>\n      <SystemControlsRoot {...props} />\n    </FlexCol>\n  )\n}\n\nexport { SystemControls }\n","import { styled } from '@mui/material'\n\nimport { SystemControlsType } from './SystemControlsType'\nimport { SystemControlsUnstyled, SystemControlsUnstyledProps } from './SystemControlsUnstyled'\n\nconst SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({\n  // shared defaults\n  ['&']: {\n    '.toggle': {\n      backgroundColor: theme.palette.primary.main,\n    },\n    alignItems: 'start',\n    zIndex: 1,\n  },\n  // WindowShade System Controls styles\n  [`&.system-controls-type-${SystemControlsType.WindowShade}`]: {\n    '.control': {\n      borderRadius: '0 0 5px 5px',\n      flexDirection: 'row',\n      flexGrow: 1,\n      justifyContent: 'space-around',\n      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n    },\n    '.controls': {\n      alignItems: 'stretch',\n      flexDirection: 'column',\n      flexGrow: 1,\n    },\n    '.toggle': {\n      borderRadius: '0 0 5px 5px',\n      padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,\n    },\n    flexDirection: 'row',\n    position: 'absolute',\n    top: 0,\n    width: '100%',\n  },\n  // Left System Control styles\n  [`&.system-controls-type-${SystemControlsType.Left}`]: {\n    '.control': {\n      alignItems: 'start',\n      flexDirection: 'column',\n      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n    },\n    '.control-wrap': {\n      marginBottom: `${theme.spacing(2)}`,\n    },\n    '.toggle': {\n      borderRadius: '0 5px 5px 0',\n      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,\n      writingMode: 'vertical-rl',\n    },\n    flexDirection: 'column',\n    left: 0,\n    position: 'fixed',\n    top: '30vh',\n    width: 'auto',\n  },\n}))\n\nexport { SystemControlsRoot }\n","export enum SystemControlsType {\n  Left = 'Left',\n  Right = 'Right',\n  WindowShade = 'WindowShade',\n}\n","import { Paper, Theme, useMediaQuery } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\n\nimport { SystemControl } from './controls'\nimport { SystemControlsType } from './SystemControlsType'\n\ninterface SystemControlsUnstyledProps extends FlexBoxProps {\n  systemControlsType?: SystemControlsType\n  visible?: boolean\n}\n\nconst SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({\n  visible,\n  systemControlsType = SystemControlsType.WindowShade,\n  ...props\n}) => {\n  const isSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))\n\n  if (visible || isSmall) {\n    return (\n      <FlexCol {...props} className={`${props.className} system-controls-type-${systemControlsType}`}>\n        <SystemControl\n          systemControlsType={systemControlsType}\n          controlElement={\n            <>\n              <FlexRow className={'control-wrap'}>\n                <Paper variant=\"elevation\" elevation={0}>\n                  <NetworkSelectEx responsive={false} className=\"network-ex\" />\n                </Paper>\n              </FlexRow>\n            </>\n          }\n        />\n      </FlexCol>\n    )\n  } else {\n    return <FlexCol />\n  }\n}\n\nexport type { SystemControlsUnstyledProps }\nexport { SystemControlsUnstyled }\n","import { Collapse, CollapseProps } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useState } from 'react'\n\nimport { SystemControlsType } from '../SystemControlsType'\n\ninterface SystemControlProps extends FlexBoxProps {\n  controlElement: React.ReactNode\n  systemControlsType?: SystemControlsType\n}\n\nconst SystemControl: React.FC<WithChildren<SystemControlProps>> = ({\n  children,\n  controlElement,\n  systemControlsType = SystemControlsType.WindowShade,\n  ...props\n}) => {\n  const [toggleControls, setToggleControls] = useState(false)\n\n  let orientation: CollapseProps['orientation'] = 'vertical'\n\n  switch (systemControlsType) {\n    case SystemControlsType.Left: {\n      orientation = 'horizontal'\n      break\n    }\n  }\n\n  return (\n    <FlexRow className=\"controls\" {...props}>\n      <Collapse in={toggleControls} orientation={orientation} timeout={500}>\n        <FlexRow bgcolor=\"primary.main\" className=\"control\">\n          {controlElement}\n        </FlexRow>\n      </Collapse>\n      <FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>\n        {children}\n      </FlexCol>\n    </FlexRow>\n  )\n}\n\nexport { SystemControl }\n"],"mappings":"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","names":["FlexCol","SystemControlsType","FlexCol","FlexRow","jsx","FlexCol","FlexRow","jsx","FlexCol"]}

package/dist/browser/components/SearchBar/SearchBar.js

@@ -1,10 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/SearchBar/SearchBar.tsx
 import { Search as SearchIcon } from "@mui/icons-material";
 import { Paper, TextField } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { FlexRow } from "@xylabs/react-flexbox";
 import { useState } from "react";
-const SearchBar = ({ defaultValue, onSearch, ...props }) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchBar = ({ defaultValue, onSearch, ...props }) => {
   const [term, setTerm] = useState();
   return /* @__PURE__ */ jsx(FlexRow, { alignItems: "stretch", ...props, children: /* @__PURE__ */ jsxs(Paper, { variant: "elevation", elevation: 0, style: { display: "flex", overflow: "hidden", width: "100%" }, children: [
     /* @__PURE__ */ jsx(

package/dist/browser/components/SearchBar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Search as SearchIcon } from '@mui/icons-material'\nimport { Paper, TextField } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nexport interface SearchBarProps extends FlexBoxProps {\n  onSearch?: (term?: string) => void\n}\n\nexport const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ...props }) => {\n  const [term, setTerm] = useState<string>()\n\n  return (\n    <FlexRow alignItems=\"stretch\" {...props}>\n      <Paper variant=\"elevation\" elevation={0} style={{ display: 'flex', overflow: 'hidden', width: '100%' }}>\n        <TextField\n          InputProps={{ color: 'secondary', style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } }}\n          variant=\"outlined\"\n          size=\"small\"\n          defaultValue={defaultValue}\n          fullWidth\n          onChange={(event) => setTerm(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') onSearch?.(term)\n          }}\n        />\n        <ButtonEx variant=\"contained\" style={{ borderRadius: 0, borderTopLeftRadius: 0 }} color=\"secondary\" onClick={() => onSearch?.(term)}>\n          <SearchIcon />\n        </ButtonEx>\n      </Paper>\n    </FlexRow>\n  )\n}\n"],"mappings":"AAeM,SACE,KADF;AAfN,SAAS,UAAU,kBAAkB;AACrC,SAAS,OAAO,iBAAiB;AACjC,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,gBAAgB;AAMlB,MAAM,YAAsC,CAAC,EAAE,cAAc,UAAU,GAAG,MAAM,MAAM;AAC3F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAiB;AAEzC,SACE,oBAAC,WAAQ,YAAW,WAAW,GAAG,OAChC,+BAAC,SAAM,SAAQ,aAAY,WAAW,GAAG,OAAO,EAAE,SAAS,QAAQ,UAAU,UAAU,OAAO,OAAO,GACnG;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,OAAO,aAAa,OAAO,EAAE,yBAAyB,GAAG,sBAAsB,GAAG,aAAa,EAAE,EAAE;AAAA,QACjH,SAAQ;AAAA,QACR,MAAK;AAAA,QACL;AAAA,QACA,WAAS;AAAA,QACT,UAAU,CAAC,UAAU,QAAQ,MAAM,OAAO,KAAK;AAAA,QAC/C,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ;AAAS,uBAAW,IAAI;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,YAAS,SAAQ,aAAY,OAAO,EAAE,cAAc,GAAG,qBAAqB,EAAE,GAAG,OAAM,aAAY,SAAS,MAAM,WAAW,IAAI,GAChI,8BAAC,cAAW,GACd;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Search as SearchIcon } from '@mui/icons-material'\nimport { Paper, TextField } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nexport interface SearchBarProps extends FlexBoxProps {\n  onSearch?: (term?: string) => void\n}\n\nexport const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ...props }) => {\n  const [term, setTerm] = useState<string>()\n\n  return (\n    <FlexRow alignItems=\"stretch\" {...props}>\n      <Paper variant=\"elevation\" elevation={0} style={{ display: 'flex', overflow: 'hidden', width: '100%' }}>\n        <TextField\n          InputProps={{ color: 'secondary', style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } }}\n          variant=\"outlined\"\n          size=\"small\"\n          defaultValue={defaultValue}\n          fullWidth\n          onChange={(event) => setTerm(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') onSearch?.(term)\n          }}\n        />\n        <ButtonEx variant=\"contained\" style={{ borderRadius: 0, borderTopLeftRadius: 0 }} color=\"secondary\" onClick={() => onSearch?.(term)}>\n          <SearchIcon />\n        </ButtonEx>\n      </Paper>\n    </FlexRow>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU,kBAAkB;AACrC,SAAS,OAAO,iBAAiB;AACjC,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,gBAAgB;AAWnB,SACE,KADF;AALC,IAAM,YAAsC,CAAC,EAAE,cAAc,UAAU,GAAG,MAAM,MAAM;AAC3F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAiB;AAEzC,SACE,oBAAC,WAAQ,YAAW,WAAW,GAAG,OAChC,+BAAC,SAAM,SAAQ,aAAY,WAAW,GAAG,OAAO,EAAE,SAAS,QAAQ,UAAU,UAAU,OAAO,OAAO,GACnG;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,OAAO,aAAa,OAAO,EAAE,yBAAyB,GAAG,sBAAsB,GAAG,aAAa,EAAE,EAAE;AAAA,QACjH,SAAQ;AAAA,QACR,MAAK;AAAA,QACL;AAAA,QACA,WAAS;AAAA,QACT,UAAU,CAAC,UAAU,QAAQ,MAAM,OAAO,KAAK;AAAA,QAC/C,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ;AAAS,uBAAW,IAAI;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,YAAS,SAAQ,aAAY,OAAO,EAAE,cAAc,GAAG,qBAAqB,EAAE,GAAG,OAAM,aAAY,SAAS,MAAM,WAAW,IAAI,GAChI,8BAAC,cAAW,GACd;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/browser/components/SearchBar/index.js

@@ -1,2 +1,32 @@
-export * from "./SearchBar";
+// src/components/SearchBar/SearchBar.tsx
+import { Search as SearchIcon } from "@mui/icons-material";
+import { Paper, TextField } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchBar = ({ defaultValue, onSearch, ...props }) => {
+  const [term, setTerm] = useState();
+  return /* @__PURE__ */ jsx(FlexRow, { alignItems: "stretch", ...props, children: /* @__PURE__ */ jsxs(Paper, { variant: "elevation", elevation: 0, style: { display: "flex", overflow: "hidden", width: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(ButtonEx, { variant: "contained", style: { borderRadius: 0, borderTopLeftRadius: 0 }, color: "secondary", onClick: () => onSearch?.(term), children: /* @__PURE__ */ jsx(SearchIcon, {}) })
+  ] }) });
+};
+export {
+  SearchBar
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/SearchBar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SearchBar/index.ts"],"sourcesContent":["export * from './SearchBar'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Search as SearchIcon } from '@mui/icons-material'\nimport { Paper, TextField } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nexport interface SearchBarProps extends FlexBoxProps {\n  onSearch?: (term?: string) => void\n}\n\nexport const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ...props }) => {\n  const [term, setTerm] = useState<string>()\n\n  return (\n    <FlexRow alignItems=\"stretch\" {...props}>\n      <Paper variant=\"elevation\" elevation={0} style={{ display: 'flex', overflow: 'hidden', width: '100%' }}>\n        <TextField\n          InputProps={{ color: 'secondary', style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } }}\n          variant=\"outlined\"\n          size=\"small\"\n          defaultValue={defaultValue}\n          fullWidth\n          onChange={(event) => setTerm(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') onSearch?.(term)\n          }}\n        />\n        <ButtonEx variant=\"contained\" style={{ borderRadius: 0, borderTopLeftRadius: 0 }} color=\"secondary\" onClick={() => onSearch?.(term)}>\n          <SearchIcon />\n        </ButtonEx>\n      </Paper>\n    </FlexRow>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU,kBAAkB;AACrC,SAAS,OAAO,iBAAiB;AACjC,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,gBAAgB;AAWnB,SACE,KADF;AALC,IAAM,YAAsC,CAAC,EAAE,cAAc,UAAU,GAAG,MAAM,MAAM;AAC3F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAiB;AAEzC,SACE,oBAAC,WAAQ,YAAW,WAAW,GAAG,OAChC,+BAAC,SAAM,SAAQ,aAAY,WAAW,GAAG,OAAO,EAAE,SAAS,QAAQ,UAAU,UAAU,OAAO,OAAO,GACnG;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,OAAO,aAAa,OAAO,EAAE,yBAAyB,GAAG,sBAAsB,GAAG,aAAa,EAAE,EAAE;AAAA,QACjH,SAAQ;AAAA,QACR,MAAK;AAAA,QACL;AAAA,QACA,WAAS;AAAA,QACT,UAAU,CAAC,UAAU,QAAQ,MAAM,OAAO,KAAK;AAAA,QAC/C,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ;AAAS,uBAAW,IAAI;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,YAAS,SAAQ,aAAY,OAAO,EAAE,cAAc,GAAG,qBAAqB,EAAE,GAAG,OAAM,aAAY,SAAS,MAAM,WAAW,IAAI,GAChI,8BAAC,cAAW,GACd;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/browser/components/SiteMenu/Menu.js

@@ -1,27 +1,158 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Menu as MenuIcon, Settings as SettingsIcon } from "@mui/icons-material";
-import { IconButton, List, SwipeableDrawer } from "@mui/material";
+// 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 FlexRow2 } from "@xylabs/react-flexbox";
+import { useEffect, useState as useState2 } from "react";
+
+// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
+import { ListItemText, useTheme as useTheme2 } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
-import { useEffect, useState } from "react";
-import { MenuListItemContainer } from "./MenuListItem";
-const SiteMenu = ({ children, onMenuToggle, side = "right", ...props }) => {
-  const [open, setOpen] = useState(false);
+import { LinkEx } from "@xylabs/react-link";
+import { useState } from "react";
+
+// src/contexts/Collapsible/context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CollapsibleContext = createContextEx();
+
+// src/contexts/Collapsible/use.tsx
+import { useContextEx } from "@xyo-network/react-shared";
+var useCollapsible = () => useContextEx(CollapsibleContext, "Collapsible", false);
+
+// 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 } from "react/jsx-runtime";
+var ListItemTooltip = ({ title, ...props }) => {
+  return /* @__PURE__ */ jsx(Tooltip, { title, placement: "right", ...props, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FlexCol, { justifyContent: "center", children: /* @__PURE__ */ jsx(VscInfo, { color: "grey" }) }) }) });
+};
+
+// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
+import { Typography } from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MenuIcon = ({ icon, ...props }) => {
+  return /* @__PURE__ */ jsx2(Typography, { display: "flex", ...props, children: icon });
+};
+
+// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
+import { ListItem } from "@mui/material";
+import { jsx as jsx3 } 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__ */ jsx3(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 jsx4 } from "react/jsx-runtime";
+var SubNavListItemsCollapse = ({ collapse, openSubNav, children, ...props }) => {
+  return /* @__PURE__ */ jsx4(Collapse, { in: collapse == true ? false : openSubNav, ...props, children: /* @__PURE__ */ jsx4(List, { children }) });
+};
+
+// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
+import { IconButton, useTheme } from "@mui/material";
+import { VscChevronDown } from "react-icons/vsc/index.js";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx5(
+    IconButton,
+    {
+      onClick: (event) => {
+        event.stopPropagation();
+        setOpenSubNav?.(!openSubNav);
+      },
+      sx: { marginRight: theme.spacing(0.5) },
+      children: /* @__PURE__ */ jsx5(VscChevronDown, { fontSize: "16px" })
+    }
+  );
+};
+
+// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+var MenuListItemContainer = ({
+  style,
+  icon,
+  iconMenuTextSpacing,
+  iconOnly,
+  onButtonClick,
+  primary,
+  subNavListItems,
+  sx,
+  tooltip,
+  to,
+  ...props
+}) => {
+  const { dense } = props;
+  const theme = useTheme2();
+  const { collapse } = useCollapsible();
+  const [openSubNav, setOpenSubNav] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const resolvedIconMenuTextSpacing = iconMenuTextSpacing ? iconMenuTextSpacing : theme.spacing(1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      MenuListItem,
+      {
+        disableGutters: true,
+        iconOnly,
+        onClick: onButtonClick,
+        dense,
+        sx: { justifyContent: "space-between", ...sx },
+        style: { whiteSpace: "nowrap", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx6(
+            LinkEx,
+            {
+              onMouseEnter: () => setHovered(true),
+              onMouseLeave: () => setHovered(false),
+              color: "inherit",
+              to,
+              sx: {
+                "& :hover": {
+                  cursor: "pointer",
+                  textDecoration: "underline"
+                }
+              },
+              children: /* @__PURE__ */ jsxs(FlexRow, { children: [
+                /* @__PURE__ */ jsx6(MenuIcon, { icon, paddingRight: resolvedIconMenuTextSpacing, color: hovered ? "secondary" : "inherit" }),
+                /* @__PURE__ */ jsx6(ListItemText, { primary })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs(FlexRow, { style: { marginLeft: theme.spacing(1) }, children: [
+            subNavListItems ? /* @__PURE__ */ jsx6(SubNavToggleIconButton, { setOpenSubNav, openSubNav }) : null,
+            tooltip ? /* @__PURE__ */ jsx6(ListItemTooltip, { title: tooltip }) : null
+          ] })
+        ]
+      }
+    ),
+    subNavListItems ? /* @__PURE__ */ jsx6(SubNavListItemsCollapse, { openSubNav, collapse, children: subNavListItems?.map((item, index) => /* @__PURE__ */ jsx6(MenuListItemContainer, { dense, sx: { pl: theme.spacing(1) }, ...item }, index)) }) : null
+  ] });
+};
+
+// src/components/SiteMenu/Menu.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var SiteMenu = ({ children, onMenuToggle, side = "right", ...props }) => {
+  const [open, setOpen] = useState2(false);
   useEffect(() => {
     onMenuToggle?.(open);
   }, [onMenuToggle, open]);
-  return /* @__PURE__ */ jsxs(FlexRow, { alignItems: "stretch", ...props, children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
+  return /* @__PURE__ */ jsxs2(FlexRow2, { alignItems: "stretch", ...props, children: [
+    /* @__PURE__ */ jsx7(
+      IconButton2,
       {
         size: "small",
         color: "inherit",
         onClick: () => {
           setOpen(!open);
         },
-        children: /* @__PURE__ */ jsx(MenuIcon, { fontSize: "large" })
+        children: /* @__PURE__ */ jsx7(MenuIcon2, { fontSize: "large" })
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx7(
       SwipeableDrawer,
       {
         anchor: side,
@@ -30,7 +161,7 @@ const SiteMenu = ({ children, onMenuToggle, side = "right", ...props }) => {
         onKeyDown: () => setOpen(false),
         onClose: () => setOpen(false),
         onOpen: () => setOpen(true),
-        children: children ?? /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsx(MenuListItemContainer, { primary: "Settings", icon: /* @__PURE__ */ jsx(SettingsIcon, {}), to: "/settings" }) })
+        children: children ?? /* @__PURE__ */ jsx7(List2, { children: /* @__PURE__ */ jsx7(MenuListItemContainer, { primary: "Settings", icon: /* @__PURE__ */ jsx7(SettingsIcon, {}), to: "/settings" }) })
       }
     )
   ] });

package/dist/browser/components/SiteMenu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SiteMenu/Menu.tsx"],"sourcesContent":["import { Menu as MenuIcon, Settings as SettingsIcon } from '@mui/icons-material'\nimport { IconButton, List, SwipeableDrawer } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { useEffect, useState } from 'react'\n\nimport { MenuListItemContainer } from './MenuListItem'\n\nexport interface SiteMenuProps extends FlexBoxProps {\n  hideSettingsMenuItem?: boolean\n  onMenuToggle?: (state?: boolean) => void\n  side?: 'left' | 'right' | 'top' | 'bottom'\n}\n\nexport const SiteMenu: React.FC<SiteMenuProps> = ({ children, onMenuToggle, side = 'right', ...props }) => {\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    onMenuToggle?.(open)\n  }, [onMenuToggle, open])\n\n  return (\n    <FlexRow alignItems=\"stretch\" {...props}>\n      <IconButton\n        size=\"small\"\n        color=\"inherit\"\n        onClick={() => {\n          setOpen(!open)\n        }}\n      >\n        <MenuIcon fontSize=\"large\" />\n      </IconButton>\n      <SwipeableDrawer\n        anchor={side}\n        open={open}\n        onClick={() => setOpen(false)}\n        onKeyDown={() => setOpen(false)}\n        onClose={() => setOpen(false)}\n        onOpen={() => setOpen(true)}\n      >\n        {children ?? (\n          <List>\n            <MenuListItemContainer primary=\"Settings\" icon={<SettingsIcon />} to=\"/settings\" />\n          </List>\n        )}\n      </SwipeableDrawer>\n    </FlexRow>\n  )\n}\n"],"mappings":"AAqBI,SAQI,KARJ;AArBJ,SAAS,QAAQ,UAAU,YAAY,oBAAoB;AAC3D,SAAS,YAAY,MAAM,uBAAuB;AAClD,SAAuB,eAAe;AACtC,SAAS,WAAW,gBAAgB;AAEpC,SAAS,6BAA6B;AAQ/B,MAAM,WAAoC,CAAC,EAAE,UAAU,cAAc,OAAO,SAAS,GAAG,MAAM,MAAM;AACzG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SACE,qBAAC,WAAQ,YAAW,WAAW,GAAG,OAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAAS,MAAM;AACb,kBAAQ,CAAC,IAAI;AAAA,QACf;AAAA,QAEA,8BAAC,YAAS,UAAS,SAAQ;AAAA;AAAA,IAC7B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR;AAAA,QACA,SAAS,MAAM,QAAQ,KAAK;AAAA,QAC5B,WAAW,MAAM,QAAQ,KAAK;AAAA,QAC9B,SAAS,MAAM,QAAQ,KAAK;AAAA,QAC5B,QAAQ,MAAM,QAAQ,IAAI;AAAA,QAEzB,sBACC,oBAAC,QACC,8BAAC,yBAAsB,SAAQ,YAAW,MAAM,oBAAC,gBAAa,GAAI,IAAG,aAAY,GACnF;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/SiteMenu/Menu.tsx","../../../../src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx","../../../../src/contexts/Collapsible/context.ts","../../../../src/contexts/Collapsible/use.tsx","../../../../src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx","../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx","../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx","../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx","../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx"],"sourcesContent":["import { Menu as MenuIcon, Settings as SettingsIcon } from '@mui/icons-material'\nimport { IconButton, List, SwipeableDrawer } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { useEffect, useState } from 'react'\n\nimport { MenuListItemContainer } from './MenuListItem'\n\nexport interface SiteMenuProps extends FlexBoxProps {\n  hideSettingsMenuItem?: boolean\n  onMenuToggle?: (state?: boolean) => void\n  side?: 'left' | 'right' | 'top' | 'bottom'\n}\n\nexport const SiteMenu: React.FC<SiteMenuProps> = ({ children, onMenuToggle, side = 'right', ...props }) => {\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    onMenuToggle?.(open)\n  }, [onMenuToggle, open])\n\n  return (\n    <FlexRow alignItems=\"stretch\" {...props}>\n      <IconButton\n        size=\"small\"\n        color=\"inherit\"\n        onClick={() => {\n          setOpen(!open)\n        }}\n      >\n        <MenuIcon fontSize=\"large\" />\n      </IconButton>\n      <SwipeableDrawer\n        anchor={side}\n        open={open}\n        onClick={() => setOpen(false)}\n        onKeyDown={() => setOpen(false)}\n        onClose={() => setOpen(false)}\n        onOpen={() => setOpen(true)}\n      >\n        {children ?? (\n          <List>\n            <MenuListItemContainer primary=\"Settings\" icon={<SettingsIcon />} to=\"/settings\" />\n          </List>\n        )}\n      </SwipeableDrawer>\n    </FlexRow>\n  )\n}\n","import { ListItemProps, ListItemText, useTheme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useState } from 'react'\n\nimport { useCollapsible } from '../../../contexts'\nimport { MenuListItemBase, NavListItemProps } from '../lib'\nimport { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components'\nimport { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav'\n\nexport interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {\n  iconMenuTextSpacing?: string\n  iconOnly?: boolean\n  subNavListItems?: NavListItemProps[]\n  subNavOpen?: boolean\n}\n\nexport const MenuListItemContainer: React.FC<MenuListItemProps> = ({\n  style,\n  icon,\n  iconMenuTextSpacing,\n  iconOnly,\n  onButtonClick,\n  primary,\n  subNavListItems,\n  sx,\n  tooltip,\n  to,\n  ...props\n}) => {\n  const { dense } = props\n  const theme = useTheme()\n  const { collapse } = useCollapsible()\n  const [openSubNav, setOpenSubNav] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const resolvedIconMenuTextSpacing = iconMenuTextSpacing ? iconMenuTextSpacing : theme.spacing(1)\n\n  return (\n    <>\n      <MenuListItem\n        disableGutters\n        iconOnly={iconOnly}\n        onClick={onButtonClick}\n        dense={dense}\n        sx={{ justifyContent: 'space-between', ...sx }}\n        style={{ whiteSpace: 'nowrap', ...style }}\n        {...props}\n      >\n        <LinkEx\n          onMouseEnter={() => setHovered(true)}\n          onMouseLeave={() => setHovered(false)}\n          color=\"inherit\"\n          to={to}\n          sx={{\n            '& :hover': {\n              cursor: 'pointer',\n              textDecoration: 'underline',\n            },\n          }}\n        >\n          <FlexRow>\n            <MenuIcon icon={icon} paddingRight={resolvedIconMenuTextSpacing} color={hovered ? 'secondary' : 'inherit'} />\n            <ListItemText primary={primary} />\n          </FlexRow>\n        </LinkEx>\n        <FlexRow style={{ marginLeft: theme.spacing(1) }}>\n          {subNavListItems ? <SubNavToggleIconButton setOpenSubNav={setOpenSubNav} openSubNav={openSubNav} /> : null}\n          {tooltip ? <ListItemTooltip title={tooltip} /> : null}\n        </FlexRow>\n      </MenuListItem>\n      {subNavListItems ? (\n        <SubNavListItemsCollapse openSubNav={openSubNav} collapse={collapse}>\n          {subNavListItems?.map((item, index) => <MenuListItemContainer dense={dense} sx={{ pl: theme.spacing(1) }} key={index} {...item} />)}\n        </SubNavListItemsCollapse>\n      ) : null}\n    </>\n  )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CollapsibleState } from './State'\n\nexport const CollapsibleContext = createContextEx<CollapsibleState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CollapsibleContext } from './context'\n\nexport const useCollapsible = () => useContextEx(CollapsibleContext, 'Collapsible', false)\n","import { Tooltip, TooltipProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscInfo } from 'react-icons/vsc/index.js'\n\nexport interface ListItemTooltipProps extends Omit<TooltipProps, 'children'> {\n  title: string\n}\n\nexport const ListItemTooltip: React.FC<ListItemTooltipProps> = ({ title, ...props }) => {\n  return (\n    <Tooltip title={title} placement=\"right\" {...props}>\n      {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}\n      <div>\n        <FlexCol justifyContent=\"center\">\n          <VscInfo color=\"grey\" />\n        </FlexCol>\n      </div>\n    </Tooltip>\n  )\n}\n","import { Typography, TypographyProps } from '@mui/material'\nimport { ReactNode } from 'react'\n\nexport interface MenuIconProps extends TypographyProps {\n  icon?: ReactNode\n}\n\nexport const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {\n  return (\n    <Typography display=\"flex\" {...props}>\n      {icon}\n    </Typography>\n  )\n}\n","import { ListItem, ListItemProps } from '@mui/material'\n\nimport { MenuListItemBase } from '../../lib'\n\nexport interface ListItemExProps extends MenuListItemBase, ListItemProps {}\n\nexport const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {\n  const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }\n  // wait till collapseEnds to remove the spacing between items\n  const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }\n  // adjusts to the paddingY value which does NOT scale along the theme.spacing\n  const paddingSx = dense ? { px: '8px' } : { px: '12px' }\n  return (\n    <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>\n      {children}\n    </ListItem>\n  )\n}\n","import { Collapse, CollapseProps, List } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { NavListItemProps } from '../../lib'\n\nexport interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {\n  collapse?: boolean\n  openSubNav?: boolean\n  subNavListItems?: NavListItemProps[]\n}\n\nexport const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {\n  return (\n    <Collapse in={collapse == true ? false : openSubNav} {...props}>\n      <List>{children}</List>\n    </Collapse>\n  )\n}\n","import { IconButton, IconButtonProps, useTheme } from '@mui/material'\nimport { Dispatch, SetStateAction, SyntheticEvent } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscChevronDown } from 'react-icons/vsc/index.js'\n\nexport interface SubNavToggleIconButtonProps extends IconButtonProps {\n  openSubNav?: boolean\n  setOpenSubNav?: Dispatch<SetStateAction<boolean>>\n}\n\nexport const SubNavToggleIconButton: React.FC<SubNavToggleIconButtonProps> = ({ setOpenSubNav, openSubNav }) => {\n  const theme = useTheme()\n  return (\n    <IconButton\n      onClick={(event: SyntheticEvent) => {\n        event.stopPropagation()\n        setOpenSubNav?.(!openSubNav)\n      }}\n      sx={{ marginRight: theme.spacing(0.5) }}\n    >\n      <VscChevronDown fontSize=\"16px\" />\n    </IconButton>\n  )\n}\n"],"mappings":"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","names":["MenuIcon","IconButton","List","FlexRow","useState","useTheme","jsx","jsx","jsx","jsx","jsx","useTheme","jsx","jsxs","useState","FlexRow","IconButton","MenuIcon","List"]}