@xyo-network/react-appbar 2.64.0-rc.7 → 2.64.1

package/dist/browser/components/CollapsibleDrawer/index.cjs

@@ -0,0 +1,96 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/CollapsibleDrawer/index.ts
+var CollapsibleDrawer_exports = {};
+__export(CollapsibleDrawer_exports, {
+  CollapseToggleFlex: () => CollapseToggleFlex,
+  CollapsibleDrawer: () => CollapsibleDrawer
+});
+module.exports = __toCommonJS(CollapsibleDrawer_exports);
+
+// src/components/CollapsibleDrawer/CollapseToggle.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_vsc = require("react-icons/vsc/index.js");
+
+// src/contexts/Collapsible/context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CollapsibleContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/Collapsible/use.tsx
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCollapsible = () => (0, import_react_shared2.useContextEx)(CollapsibleContext, "Collapsible", false);
+
+// src/components/CollapsibleDrawer/CollapseToggle.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CollapseToggleFlex = (props) => {
+  const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
+  const [hover, setHover] = (0, import_react.useState)(false);
+  const theme = (0, import_material.useTheme)();
+  const handleCollapseToggle = () => {
+    setCollapse?.(!collapse);
+    setCollapseEnd?.((previous) => previous ? false : previous);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { mt: 2, py: 2, justifyContent: collapse ? "start" : "center", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_material.Icon,
+    {
+      onClick: handleCollapseToggle,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      fontSize: "large",
+      sx: { color: hover ? theme.palette.secondary.main : "inherit", cursor: "pointer" },
+      children: !collapse ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscArrowSmallLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscArrowSmallRight, {})
+    }
+  ) });
+};
+
+// src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
+var import_material2 = require("@mui/material");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CollapsibleDrawer = ({ children, sx, ...props }) => {
+  const { collapse, setCollapseEnd } = useCollapsible();
+  const theme = (0, import_material2.useTheme)();
+  const collapsedSize = props.collapsedSize ?? theme.spacing(5);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    CollapsibleFlexInner,
+    {
+      in: !collapse,
+      orientation: "horizontal",
+      collapsedSize,
+      onExited: () => setCollapseEnd?.(true),
+      sx: {
+        alignItems: "start",
+        display: "flex",
+        height: "100%",
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+};
+var CollapsibleFlexInner = (0, import_material2.styled)(import_material2.Collapse)(() => ({
+  "& .MuiCollapse-wrapperInner": {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
+//# sourceMappingURL=index.cjs.map

package/dist/browser/components/CollapsibleDrawer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CollapsibleDrawer/index.ts","../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx","../../../../src/contexts/Collapsible/context.ts","../../../../src/contexts/Collapsible/use.tsx","../../../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx"],"sourcesContent":["export * from './CollapseToggle'\nexport * from './CollapsibleDrawer'\n","import { Icon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc/index.js'\n\nimport { useCollapsible } from '../../contexts'\n\nexport const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {\n  const { collapse, setCollapse, setCollapseEnd } = useCollapsible()\n  const [hover, setHover] = useState(false)\n  const theme = useTheme()\n\n  const handleCollapseToggle = () => {\n    setCollapse?.(!collapse)\n    setCollapseEnd?.((previous) => (previous ? false : previous))\n  }\n\n  return (\n    <FlexRow mt={2} py={2} justifyContent={collapse ? 'start' : 'center'} {...props}>\n      <Icon\n        onClick={handleCollapseToggle}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        fontSize={'large'}\n        sx={{ color: hover ? theme.palette.secondary.main : 'inherit', cursor: 'pointer' }}\n      >\n        {!collapse ? <VscArrowSmallLeft /> : <VscArrowSmallRight />}\n      </Icon>\n    </FlexRow>\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 { Collapse, CollapseProps, styled, useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { useCollapsible } from '../../contexts'\n\nexport const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>> = ({ children, sx, ...props }) => {\n  const { collapse, setCollapseEnd } = useCollapsible()\n  const theme = useTheme()\n\n  const collapsedSize = props.collapsedSize ?? theme.spacing(5)\n\n  return (\n    <CollapsibleFlexInner\n      in={!collapse}\n      orientation=\"horizontal\"\n      collapsedSize={collapsedSize}\n      onExited={() => setCollapseEnd?.(true)}\n      sx={{\n        alignItems: 'start',\n        display: 'flex',\n        height: '100%',\n        ...sx,\n      }}\n      {...props}\n    >\n      {children}\n    </CollapsibleFlexInner>\n  )\n}\n\nconst CollapsibleFlexInner = styled(Collapse)(() => ({\n  '& .MuiCollapse-wrapperInner': {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA+B;AAC/B,2BAAsC;AACtC,mBAAyB;AAEzB,iBAAsD;;;ACJtD,0BAAgC;AAIzB,IAAM,yBAAqB,qCAAkC;;;ACJpE,IAAAA,uBAA6B;AAItB,IAAM,iBAAiB,UAAM,mCAAa,oBAAoB,eAAe,KAAK;;;AFuBpE;AAnBd,IAAM,qBAA6C,CAAC,UAAU;AACnE,QAAM,EAAE,UAAU,aAAa,eAAe,IAAI,eAAe;AACjE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,YAAQ,0BAAS;AAEvB,QAAM,uBAAuB,MAAM;AACjC,kBAAc,CAAC,QAAQ;AACvB,qBAAiB,CAAC,aAAc,WAAW,QAAQ,QAAS;AAAA,EAC9D;AAEA,SACE,4CAAC,gCAAQ,IAAI,GAAG,IAAI,GAAG,gBAAgB,WAAW,UAAU,UAAW,GAAG,OACxE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,cAAc,MAAM,SAAS,IAAI;AAAA,MACjC,cAAc,MAAM,SAAS,KAAK;AAAA,MAClC,UAAU;AAAA,MACV,IAAI,EAAE,OAAO,QAAQ,MAAM,QAAQ,UAAU,OAAO,WAAW,QAAQ,UAAU;AAAA,MAEhF,WAAC,WAAW,4CAAC,gCAAkB,IAAK,4CAAC,iCAAmB;AAAA;AAAA,EAC3D,GACF;AAEJ;;;AG/BA,IAAAC,mBAA0D;AAYtD,IAAAC,sBAAA;AAPG,IAAM,oBAA2D,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,MAAM;AACtG,QAAM,EAAE,UAAU,eAAe,IAAI,eAAe;AACpD,QAAM,YAAQ,2BAAS;AAEvB,QAAM,gBAAgB,MAAM,iBAAiB,MAAM,QAAQ,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,CAAC;AAAA,MACL,aAAY;AAAA,MACZ;AAAA,MACA,UAAU,MAAM,iBAAiB,IAAI;AAAA,MACrC,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAM,2BAAuB,yBAAO,yBAAQ,EAAE,OAAO;AAAA,EACnD,+BAA+B;AAAA,IAC7B,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AACF,EAAE;","names":["import_react_shared","import_material","import_jsx_runtime"]}

package/dist/browser/components/CollapsibleDrawer/index.d.cts

@@ -0,0 +1,3 @@
+export * from './CollapseToggle';
+export * from './CollapsibleDrawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/CollapsibleDrawer/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA"}

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

@@ -1,3 +1,73 @@
-export * from "./CollapseToggle";
-export * from "./CollapsibleDrawer";
+// src/components/CollapsibleDrawer/CollapseToggle.tsx
+import { Icon, useTheme } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { useState } from "react";
+import { VscArrowSmallLeft, VscArrowSmallRight } from "react-icons/vsc/index.js";
+
+// 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/CollapsibleDrawer/CollapseToggle.tsx
+import { jsx } from "react/jsx-runtime";
+var CollapseToggleFlex = (props) => {
+  const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
+  const [hover, setHover] = useState(false);
+  const theme = useTheme();
+  const handleCollapseToggle = () => {
+    setCollapse?.(!collapse);
+    setCollapseEnd?.((previous) => previous ? false : previous);
+  };
+  return /* @__PURE__ */ jsx(FlexRow, { mt: 2, py: 2, justifyContent: collapse ? "start" : "center", ...props, children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      onClick: handleCollapseToggle,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      fontSize: "large",
+      sx: { color: hover ? theme.palette.secondary.main : "inherit", cursor: "pointer" },
+      children: !collapse ? /* @__PURE__ */ jsx(VscArrowSmallLeft, {}) : /* @__PURE__ */ jsx(VscArrowSmallRight, {})
+    }
+  ) });
+};
+
+// src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
+import { Collapse, styled, useTheme as useTheme2 } from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CollapsibleDrawer = ({ children, sx, ...props }) => {
+  const { collapse, setCollapseEnd } = useCollapsible();
+  const theme = useTheme2();
+  const collapsedSize = props.collapsedSize ?? theme.spacing(5);
+  return /* @__PURE__ */ jsx2(
+    CollapsibleFlexInner,
+    {
+      in: !collapse,
+      orientation: "horizontal",
+      collapsedSize,
+      onExited: () => setCollapseEnd?.(true),
+      sx: {
+        alignItems: "start",
+        display: "flex",
+        height: "100%",
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+};
+var CollapsibleFlexInner = styled(Collapse)(() => ({
+  "& .MuiCollapse-wrapperInner": {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
+export {
+  CollapseToggleFlex,
+  CollapsibleDrawer
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CollapsibleDrawer/index.ts"],"sourcesContent":["export * from './CollapseToggle'\nexport * from './CollapsibleDrawer'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx","../../../../src/contexts/Collapsible/context.ts","../../../../src/contexts/Collapsible/use.tsx","../../../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx"],"sourcesContent":["import { Icon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc/index.js'\n\nimport { useCollapsible } from '../../contexts'\n\nexport const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {\n  const { collapse, setCollapse, setCollapseEnd } = useCollapsible()\n  const [hover, setHover] = useState(false)\n  const theme = useTheme()\n\n  const handleCollapseToggle = () => {\n    setCollapse?.(!collapse)\n    setCollapseEnd?.((previous) => (previous ? false : previous))\n  }\n\n  return (\n    <FlexRow mt={2} py={2} justifyContent={collapse ? 'start' : 'center'} {...props}>\n      <Icon\n        onClick={handleCollapseToggle}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        fontSize={'large'}\n        sx={{ color: hover ? theme.palette.secondary.main : 'inherit', cursor: 'pointer' }}\n      >\n        {!collapse ? <VscArrowSmallLeft /> : <VscArrowSmallRight />}\n      </Icon>\n    </FlexRow>\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 { Collapse, CollapseProps, styled, useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { useCollapsible } from '../../contexts'\n\nexport const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>> = ({ children, sx, ...props }) => {\n  const { collapse, setCollapseEnd } = useCollapsible()\n  const theme = useTheme()\n\n  const collapsedSize = props.collapsedSize ?? theme.spacing(5)\n\n  return (\n    <CollapsibleFlexInner\n      in={!collapse}\n      orientation=\"horizontal\"\n      collapsedSize={collapsedSize}\n      onExited={() => setCollapseEnd?.(true)}\n      sx={{\n        alignItems: 'start',\n        display: 'flex',\n        height: '100%',\n        ...sx,\n      }}\n      {...props}\n    >\n      {children}\n    </CollapsibleFlexInner>\n  )\n}\n\nconst CollapsibleFlexInner = styled(Collapse)(() => ({\n  '& .MuiCollapse-wrapperInner': {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}))\n"],"mappings":";AAAA,SAAS,MAAM,gBAAgB;AAC/B,SAAuB,eAAe;AACtC,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB,0BAA0B;;;ACJtD,SAAS,uBAAuB;AAIzB,IAAM,qBAAqB,gBAAkC;;;ACJpE,SAAS,oBAAoB;AAItB,IAAM,iBAAiB,MAAM,aAAa,oBAAoB,eAAe,KAAK;;;AFuBpE;AAnBd,IAAM,qBAA6C,CAAC,UAAU;AACnE,QAAM,EAAE,UAAU,aAAa,eAAe,IAAI,eAAe;AACjE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,QAAQ,SAAS;AAEvB,QAAM,uBAAuB,MAAM;AACjC,kBAAc,CAAC,QAAQ;AACvB,qBAAiB,CAAC,aAAc,WAAW,QAAQ,QAAS;AAAA,EAC9D;AAEA,SACE,oBAAC,WAAQ,IAAI,GAAG,IAAI,GAAG,gBAAgB,WAAW,UAAU,UAAW,GAAG,OACxE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,cAAc,MAAM,SAAS,IAAI;AAAA,MACjC,cAAc,MAAM,SAAS,KAAK;AAAA,MAClC,UAAU;AAAA,MACV,IAAI,EAAE,OAAO,QAAQ,MAAM,QAAQ,UAAU,OAAO,WAAW,QAAQ,UAAU;AAAA,MAEhF,WAAC,WAAW,oBAAC,qBAAkB,IAAK,oBAAC,sBAAmB;AAAA;AAAA,EAC3D,GACF;AAEJ;;;AG/BA,SAAS,UAAyB,QAAQ,YAAAA,iBAAgB;AAYtD,gBAAAC,YAAA;AAPG,IAAM,oBAA2D,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,MAAM;AACtG,QAAM,EAAE,UAAU,eAAe,IAAI,eAAe;AACpD,QAAM,QAAQC,UAAS;AAEvB,QAAM,gBAAgB,MAAM,iBAAiB,MAAM,QAAQ,CAAC;AAE5D,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,CAAC;AAAA,MACL,aAAY;AAAA,MACZ;AAAA,MACA,UAAU,MAAM,iBAAiB,IAAI;AAAA,MACrC,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAM,uBAAuB,OAAO,QAAQ,EAAE,OAAO;AAAA,EACnD,+BAA+B;AAAA,IAC7B,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AACF,EAAE;","names":["useTheme","jsx","useTheme"]}

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.cjs

@@ -0,0 +1,92 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/CollapsibleDrawer/storyExampleMenuData.tsx
+var storyExampleMenuData_exports = {};
+__export(storyExampleMenuData_exports, {
+  menuDataBottom: () => menuDataBottom,
+  menuDataTop: () => menuDataTop
+});
+module.exports = __toCommonJS(storyExampleMenuData_exports);
+var import_vsc = require("react-icons/vsc/index.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var menuDataTop = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscGlobe, { fontSize: "body1" }),
+    primary: "Explore",
+    to: "",
+    tooltip: "View global archivist data on a world map."
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscSymbolMethod, { fontSize: "body1" }),
+    primary: "Blocks",
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscSymbolNamespace, { fontSize: "body1" }),
+    primary: "Payloads",
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscGraph, { fontSize: "body1" }),
+    primary: "Queries",
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscServer, { fontSize: "body1" }),
+    primary: "Archives",
+    subNavListItems: [
+      { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscDashboard, { fontSize: "body2" }), primary: "Dashboard", to: "", tooltip: "View data for all archives on this network." },
+      { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscAdd, { fontSize: "body2" }), primary: "Create Archive", to: "", tooltip: "Create a new archive on this network." },
+      { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscTable, { fontSize: "body2" }), primary: "Archive Table", to: "", tooltip: "View all archives on this network as a table." }
+    ],
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  }
+];
+var menuDataBottom = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscGraphLine, { fontSize: "body1" }),
+    primary: "Statistics",
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscJson, { fontSize: "body1" }),
+    primary: "Schema",
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscAccount, { fontSize: "body1" }),
+    primary: "Account",
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vsc.VscSettingsGear, { fontSize: "body1" }),
+    primary: "Settings",
+    to: "",
+    tooltip: "The most recent blocks seen in the in temp archive on your current network."
+  }
+];
+//# sourceMappingURL=storyExampleMenuData.cjs.map

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"sourcesContent":["import {\n  VscAccount,\n  VscAdd,\n  VscDashboard,\n  VscGlobe,\n  VscGraph,\n  VscGraphLine,\n  VscJson,\n  VscServer,\n  VscSettingsGear,\n  VscSymbolMethod,\n  VscSymbolNamespace,\n  VscTable,\n  // eslint-disable-next-line import/no-internal-modules\n} from 'react-icons/vsc/index.js'\n\nimport { MenuListItemProps } from '../SiteMenu'\n\nexport const menuDataTop: MenuListItemProps[] = [\n  {\n    icon: <VscGlobe fontSize=\"body1\" />,\n    primary: 'Explore',\n    to: '',\n    tooltip: 'View global archivist data on a world map.',\n  },\n  {\n    icon: <VscSymbolMethod fontSize=\"body1\" />,\n    primary: 'Blocks',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscSymbolNamespace fontSize=\"body1\" />,\n    primary: 'Payloads',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscGraph fontSize=\"body1\" />,\n    primary: 'Queries',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscServer fontSize=\"body1\" />,\n    primary: 'Archives',\n    subNavListItems: [\n      { icon: <VscDashboard fontSize=\"body2\" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.' },\n      { icon: <VscAdd fontSize=\"body2\" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.' },\n      { icon: <VscTable fontSize=\"body2\" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.' },\n    ],\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n]\n\nexport const menuDataBottom: MenuListItemProps[] = [\n  {\n    icon: <VscGraphLine fontSize=\"body1\" />,\n    primary: 'Statistics',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscJson fontSize=\"body1\" />,\n    primary: 'Schema',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscAccount fontSize=\"body1\" />,\n    primary: 'Account',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscSettingsGear fontSize=\"body1\" />,\n    primary: 'Settings',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcO;AAMG;AAFH,IAAM,cAAmC;AAAA,EAC9C;AAAA,IACE,MAAM,4CAAC,uBAAS,UAAS,SAAQ;AAAA,IACjC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,4CAAC,8BAAgB,UAAS,SAAQ;AAAA,IACxC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,4CAAC,iCAAmB,UAAS,SAAQ;AAAA,IAC3C,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,4CAAC,uBAAS,UAAS,SAAQ;AAAA,IACjC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,4CAAC,wBAAU,UAAS,SAAQ;AAAA,IAClC,SAAS;AAAA,IACT,iBAAiB;AAAA,MACf,EAAE,MAAM,4CAAC,2BAAa,UAAS,SAAQ,GAAI,SAAS,aAAa,IAAI,IAAI,SAAS,8CAA8C;AAAA,MAChI,EAAE,MAAM,4CAAC,qBAAO,UAAS,SAAQ,GAAI,SAAS,kBAAkB,IAAI,IAAI,SAAS,wCAAwC;AAAA,MACzH,EAAE,MAAM,4CAAC,uBAAS,UAAS,SAAQ,GAAI,SAAS,iBAAiB,IAAI,IAAI,SAAS,gDAAgD;AAAA,IACpI;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,IAAM,iBAAsC;AAAA,EACjD;AAAA,IACE,MAAM,4CAAC,2BAAa,UAAS,SAAQ;AAAA,IACrC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,4CAAC,sBAAQ,UAAS,SAAQ;AAAA,IAChC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,4CAAC,yBAAW,UAAS,SAAQ;AAAA,IACnC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,4CAAC,8BAAgB,UAAS,SAAQ;AAAA,IACxC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.d.cts

@@ -0,0 +1,4 @@
+import { MenuListItemProps } from '../SiteMenu';
+export declare const menuDataTop: MenuListItemProps[];
+export declare const menuDataBottom: MenuListItemProps[];
+//# sourceMappingURL=storyExampleMenuData.d.ts.map

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyExampleMenuData.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAE/C,eAAO,MAAM,WAAW,EAAE,iBAAiB,EAoC1C,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAyB7C,CAAA"}

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"storyExampleMenuData.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAE/C,eAAO,MAAM,WAAW,EAAE,iBAAiB,EAoC1C,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAyB7C,CAAA"}
+{"version":3,"file":"storyExampleMenuData.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAE/C,eAAO,MAAM,WAAW,EAAE,iBAAiB,EAoC1C,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAyB7C,CAAA"}

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storyExampleMenuData.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAE/C,eAAO,MAAM,WAAW,EAAE,iBAAiB,EAoC1C,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAyB7C,CAAA"}
+{"version":3,"file":"storyExampleMenuData.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAE/C,eAAO,MAAM,WAAW,EAAE,iBAAiB,EAoC1C,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAyB7C,CAAA"}

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/CollapsibleDrawer/storyExampleMenuData.tsx
 import {
   VscAccount,
   VscAdd,
@@ -13,7 +13,8 @@ import {
   VscSymbolNamespace,
   VscTable
 } from "react-icons/vsc/index.js";
-const menuDataTop = [
+import { jsx } from "react/jsx-runtime";
+var menuDataTop = [
   {
     icon: /* @__PURE__ */ jsx(VscGlobe, { fontSize: "body1" }),
     primary: "Explore",
@@ -50,7 +51,7 @@ const menuDataTop = [
     tooltip: "The most recent blocks seen in the in temp archive on your current network."
   }
 ];
-const menuDataBottom = [
+var menuDataBottom = [
   {
     icon: /* @__PURE__ */ jsx(VscGraphLine, { fontSize: "body1" }),
     primary: "Statistics",

package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"sourcesContent":["import {\n  VscAccount,\n  VscAdd,\n  VscDashboard,\n  VscGlobe,\n  VscGraph,\n  VscGraphLine,\n  VscJson,\n  VscServer,\n  VscSettingsGear,\n  VscSymbolMethod,\n  VscSymbolNamespace,\n  VscTable,\n} from 'react-icons/vsc/index.js'\n\nimport { MenuListItemProps } from '../SiteMenu'\n\nexport const menuDataTop: MenuListItemProps[] = [\n  {\n    icon: <VscGlobe fontSize=\"body1\" />,\n    primary: 'Explore',\n    to: '',\n    tooltip: 'View global archivist data on a world map.',\n  },\n  {\n    icon: <VscSymbolMethod fontSize=\"body1\" />,\n    primary: 'Blocks',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscSymbolNamespace fontSize=\"body1\" />,\n    primary: 'Payloads',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscGraph fontSize=\"body1\" />,\n    primary: 'Queries',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscServer fontSize=\"body1\" />,\n    primary: 'Archives',\n    subNavListItems: [\n      { icon: <VscDashboard fontSize=\"body2\" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.' },\n      { icon: <VscAdd fontSize=\"body2\" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.' },\n      { icon: <VscTable fontSize=\"body2\" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.' },\n    ],\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n]\n\nexport const menuDataBottom: MenuListItemProps[] = [\n  {\n    icon: <VscGraphLine fontSize=\"body1\" />,\n    primary: 'Statistics',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscJson fontSize=\"body1\" />,\n    primary: 'Schema',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscAccount fontSize=\"body1\" />,\n    primary: 'Account',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscSettingsGear fontSize=\"body1\" />,\n    primary: 'Settings',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n]\n"],"mappings":"AAmBU;AAnBV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,cAAmC;AAAA,EAC9C;AAAA,IACE,MAAM,oBAAC,YAAS,UAAS,SAAQ;AAAA,IACjC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,mBAAgB,UAAS,SAAQ;AAAA,IACxC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,sBAAmB,UAAS,SAAQ;AAAA,IAC3C,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,YAAS,UAAS,SAAQ;AAAA,IACjC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,aAAU,UAAS,SAAQ;AAAA,IAClC,SAAS;AAAA,IACT,iBAAiB;AAAA,MACf,EAAE,MAAM,oBAAC,gBAAa,UAAS,SAAQ,GAAI,SAAS,aAAa,IAAI,IAAI,SAAS,8CAA8C;AAAA,MAChI,EAAE,MAAM,oBAAC,UAAO,UAAS,SAAQ,GAAI,SAAS,kBAAkB,IAAI,IAAI,SAAS,wCAAwC;AAAA,MACzH,EAAE,MAAM,oBAAC,YAAS,UAAS,SAAQ,GAAI,SAAS,iBAAiB,IAAI,IAAI,SAAS,gDAAgD;AAAA,IACpI;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,iBAAsC;AAAA,EACjD;AAAA,IACE,MAAM,oBAAC,gBAAa,UAAS,SAAQ;AAAA,IACrC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,WAAQ,UAAS,SAAQ;AAAA,IAChC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,cAAW,UAAS,SAAQ;AAAA,IACnC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,mBAAgB,UAAS,SAAQ;AAAA,IACxC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/CollapsibleDrawer/storyExampleMenuData.tsx"],"sourcesContent":["import {\n  VscAccount,\n  VscAdd,\n  VscDashboard,\n  VscGlobe,\n  VscGraph,\n  VscGraphLine,\n  VscJson,\n  VscServer,\n  VscSettingsGear,\n  VscSymbolMethod,\n  VscSymbolNamespace,\n  VscTable,\n  // eslint-disable-next-line import/no-internal-modules\n} from 'react-icons/vsc/index.js'\n\nimport { MenuListItemProps } from '../SiteMenu'\n\nexport const menuDataTop: MenuListItemProps[] = [\n  {\n    icon: <VscGlobe fontSize=\"body1\" />,\n    primary: 'Explore',\n    to: '',\n    tooltip: 'View global archivist data on a world map.',\n  },\n  {\n    icon: <VscSymbolMethod fontSize=\"body1\" />,\n    primary: 'Blocks',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscSymbolNamespace fontSize=\"body1\" />,\n    primary: 'Payloads',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscGraph fontSize=\"body1\" />,\n    primary: 'Queries',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscServer fontSize=\"body1\" />,\n    primary: 'Archives',\n    subNavListItems: [\n      { icon: <VscDashboard fontSize=\"body2\" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.' },\n      { icon: <VscAdd fontSize=\"body2\" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.' },\n      { icon: <VscTable fontSize=\"body2\" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.' },\n    ],\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n]\n\nexport const menuDataBottom: MenuListItemProps[] = [\n  {\n    icon: <VscGraphLine fontSize=\"body1\" />,\n    primary: 'Statistics',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscJson fontSize=\"body1\" />,\n    primary: 'Schema',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscAccount fontSize=\"body1\" />,\n    primary: 'Account',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n  {\n    icon: <VscSettingsGear fontSize=\"body1\" />,\n    primary: 'Settings',\n    to: '',\n    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',\n  },\n]\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAMG;AAFH,IAAM,cAAmC;AAAA,EAC9C;AAAA,IACE,MAAM,oBAAC,YAAS,UAAS,SAAQ;AAAA,IACjC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,mBAAgB,UAAS,SAAQ;AAAA,IACxC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,sBAAmB,UAAS,SAAQ;AAAA,IAC3C,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,YAAS,UAAS,SAAQ;AAAA,IACjC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,aAAU,UAAS,SAAQ;AAAA,IAClC,SAAS;AAAA,IACT,iBAAiB;AAAA,MACf,EAAE,MAAM,oBAAC,gBAAa,UAAS,SAAQ,GAAI,SAAS,aAAa,IAAI,IAAI,SAAS,8CAA8C;AAAA,MAChI,EAAE,MAAM,oBAAC,UAAO,UAAS,SAAQ,GAAI,SAAS,kBAAkB,IAAI,IAAI,SAAS,wCAAwC;AAAA,MACzH,EAAE,MAAM,oBAAC,YAAS,UAAS,SAAQ,GAAI,SAAS,iBAAiB,IAAI,IAAI,SAAS,gDAAgD;AAAA,IACpI;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,IAAM,iBAAsC;AAAA,EACjD;AAAA,IACE,MAAM,oBAAC,gBAAa,UAAS,SAAQ;AAAA,IACrC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,WAAQ,UAAS,SAAQ;AAAA,IAChC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,cAAW,UAAS,SAAQ;AAAA,IACnC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAM,oBAAC,mBAAgB,UAAS,SAAQ;AAAA,IACxC,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/browser/components/MobileSystemControls/SystemControls.cjs

@@ -0,0 +1,143 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/MobileSystemControls/SystemControls.tsx
+var SystemControls_exports = {};
+__export(SystemControls_exports, {
+  SystemControls: () => SystemControls
+});
+module.exports = __toCommonJS(SystemControls_exports);
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+
+// src/components/MobileSystemControls/SystemControlsRoot.tsx
+var import_material3 = require("@mui/material");
+
+// src/components/MobileSystemControls/SystemControlsUnstyled.tsx
+var import_material2 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_react_network = require("@xyo-network/react-network");
+
+// src/components/MobileSystemControls/controls/SystemControl.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SystemControl = ({
+  children,
+  controlElement,
+  systemControlsType = "WindowShade" /* WindowShade */,
+  ...props
+}) => {
+  const [toggleControls, setToggleControls] = (0, import_react.useState)(false);
+  let orientation = "vertical";
+  switch (systemControlsType) {
+    case "Left" /* Left */: {
+      orientation = "horizontal";
+      break;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { className: "controls", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Collapse, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { bgcolor: "primary.main", className: "control", children: controlElement }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { style: { cursor: "pointer" }, onClick: () => setToggleControls(!toggleControls), children })
+  ] });
+};
+
+// src/components/MobileSystemControls/SystemControlsUnstyled.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SystemControlsUnstyled = ({
+  visible,
+  systemControlsType = "WindowShade" /* WindowShade */,
+  ...props
+}) => {
+  const isSmall = (0, import_material2.useMediaQuery)((theme) => theme.breakpoints.down("sm"));
+  if (visible || isSmall) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexCol, { ...props, className: `${props.className} system-controls-type-${systemControlsType}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      SystemControl,
+      {
+        systemControlsType,
+        controlElement: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexRow, { className: "control-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Paper, { variant: "elevation", elevation: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_network.NetworkSelectEx, { responsive: false, className: "network-ex" }) }) }) })
+      }
+    ) });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexCol, {});
+  }
+};
+
+// src/components/MobileSystemControls/SystemControlsRoot.tsx
+var SystemControlsRoot = (0, import_material3.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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SystemControls = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox3.FlexCol, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SystemControlsRoot, { ...props }) });
+};
+//# sourceMappingURL=SystemControls.cjs.map

package/dist/browser/components/MobileSystemControls/SystemControls.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/MobileSystemControls/SystemControls.tsx","../../../../src/components/MobileSystemControls/SystemControlsRoot.tsx","../../../../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","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":["import_react_flexbox","import_material","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime"]}

package/dist/browser/components/MobileSystemControls/SystemControls.d.cts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SystemControlsUnstyledProps } from './SystemControlsUnstyled';
+declare const SystemControls: React.FC<SystemControlsUnstyledProps>;
+export { SystemControls };
+//# sourceMappingURL=SystemControls.d.ts.map

package/dist/browser/components/MobileSystemControls/SystemControls.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemControls.d.ts","sourceRoot":"","sources":["../../../../src/components/MobileSystemControls/SystemControls.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAA;AAEtE,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAMzD,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}