@xyo-network/react-appbar 2.25.61 → 2.25.64

package/dist/cjs/WebAppNavigationType.d.ts

@@ -0,0 +1 @@
+export declare type WebAppNavigationType = 'menu' | 'sidebar';

package/dist/cjs/WebAppNavigationType.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=WebAppNavigationType.js.map

package/dist/cjs/WebAppNavigationType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebAppNavigationType.js","sourceRoot":"","sources":["../../src/WebAppNavigationType.ts"],"names":[],"mappings":""}

package/dist/cjs/components/AppBar/Application.d.ts

@@ -1,9 +1,10 @@
 import { ToolbarProps } from '@mui/material';
 import { AppBarExProps } from '@xylabs/react-common';
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export interface ApplicationAppBarProps extends AppBarExProps {
     contextToolbar?: ReactElement<ToolbarProps>;
     systemToolbar?: ReactElement<ToolbarProps>;
     responsive?: boolean;
+    menuItems?: ReactNode;
 }
 export declare const ApplicationAppBar: React.FC<ApplicationAppBarProps>;

package/dist/cjs/components/AppBar/Application.js

@@ -4,10 +4,11 @@ exports.ApplicationAppBar = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_common_1 = require("@xylabs/react-common");
+const SiteMenu_1 = require("../SiteMenu");
 const Toolbar_1 = require("../Toolbar");
 const ApplicationAppBar = (_a) => {
-    var { systemToolbar = (0, jsx_runtime_1.jsx)(Toolbar_1.SystemToolbar, {}), contextToolbar = (0, jsx_runtime_1.jsx)(Toolbar_1.ContextToolbar, {}), responsive = true } = _a, props = tslib_1.__rest(_a, ["systemToolbar", "contextToolbar", "responsive"]);
-    return (0, jsx_runtime_1.jsx)(react_common_1.AppBarEx, Object.assign({ systemToolbar: systemToolbar, contextToolbar: contextToolbar, position: "sticky", responsive: responsive }, props));
+    var { menuItems, menu, systemToolbar = (0, jsx_runtime_1.jsx)(Toolbar_1.SystemToolbar, {}), contextToolbar = (0, jsx_runtime_1.jsx)(Toolbar_1.ContextToolbar, {}), responsive = true } = _a, props = tslib_1.__rest(_a, ["menuItems", "menu", "systemToolbar", "contextToolbar", "responsive"]);
+    return ((0, jsx_runtime_1.jsx)(react_common_1.AppBarEx, Object.assign({ systemToolbar: systemToolbar, contextToolbar: contextToolbar, menu: menu !== null && menu !== void 0 ? menu : (0, jsx_runtime_1.jsx)(SiteMenu_1.SiteMenu, { children: menuItems }), position: "sticky", responsive: responsive }, props)));
 };
 exports.ApplicationAppBar = ApplicationAppBar;
 //# sourceMappingURL=Application.js.map

package/dist/cjs/components/AppBar/Application.js.map

@@ -1 +1 @@
-{"version":3,"file":"Application.js","sourceRoot":"","sources":["../../../../src/components/AppBar/Application.tsx"],"names":[],"mappings":";;;;;AACA,uDAA8D;AAG9D,wCAA0D;AAQnD,MAAM,iBAAiB,GAAqC,CAAC,EAAuG,EAAE,EAAE;QAA3G,EAAE,aAAa,GAAG,uBAAC,uBAAa,KAAG,EAAE,cAAc,GAAG,uBAAC,wBAAc,KAAG,EAAE,UAAU,GAAG,IAAI,OAAY,EAAP,KAAK,sBAArG,iDAAuG,CAAF;IACvK,OAAO,uBAAC,uBAAQ,kBAAC,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAE,UAAU,IAAM,KAAK,EAAI,CAAA;AACxI,CAAC,CAAA;AAFY,QAAA,iBAAiB,qBAE7B"}
+{"version":3,"file":"Application.js","sourceRoot":"","sources":["../../../../src/components/AppBar/Application.tsx"],"names":[],"mappings":";;;;;AACA,uDAA8D;AAG9D,0CAAsC;AACtC,wCAA0D;AASnD,MAAM,iBAAiB,GAAqC,CAAC,EAOnE,EAAE,EAAE;QAP+D,EAClE,SAAS,EACT,IAAI,EACJ,aAAa,GAAG,uBAAC,uBAAa,KAAG,EACjC,cAAc,GAAG,uBAAC,wBAAc,KAAG,EACnC,UAAU,GAAG,IAAI,OAElB,EADI,KAAK,sBAN0D,sEAOnE,CADS;IAER,OAAO,CACL,uBAAC,uBAAQ,kBAAC,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,uBAAC,mBAAQ,cAAE,SAAS,GAAY,EAAE,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAE,UAAU,IAAM,KAAK,EAAI,CAChL,CAAA;AACH,CAAC,CAAA;AAXY,QAAA,iBAAiB,qBAW7B"}

package/dist/cjs/components/DarkModeIconButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+export declare const DarkModeIconButton: React.FC<IconButtonProps>;

package/dist/cjs/components/DarkModeIconButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkModeIconButton = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DarkModeRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/DarkModeRounded"));
+const LightModeRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/LightModeRounded"));
+const material_1 = require("@mui/material");
+const DarkModeIconButton = (props) => {
+    const { darkMode, enableDarkMode } = useAppSettings();
+    const handleDarkModeChange = () => {
+        enableDarkMode === null || enableDarkMode === void 0 ? void 0 : enableDarkMode(!darkMode);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleDarkModeChange }, props, { children: darkMode ? (0, jsx_runtime_1.jsx)(DarkModeRounded_1.default, {}) : (0, jsx_runtime_1.jsx)(LightModeRounded_1.default, {}) })));
+};
+exports.DarkModeIconButton = DarkModeIconButton;
+//# sourceMappingURL=DarkModeIconButton.js.map

package/dist/cjs/components/DarkModeIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkModeIconButton.js","sourceRoot":"","sources":["../../../src/components/DarkModeIconButton.tsx"],"names":[],"mappings":";;;;;AAAA,kGAAqE;AACrE,oGAAuE;AACvE,4CAA2D;AAEpD,MAAM,kBAAkB,GAA8B,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAErD,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,CAAC,QAAQ,CAAC,CAAA;IAC7B,CAAC,CAAA;IAED,OAAO,CACL,uBAAC,qBAAU,kBAAC,OAAO,EAAE,oBAAoB,IAAM,KAAK,cACjD,QAAQ,CAAC,CAAC,CAAC,uBAAC,yBAAmB,KAAG,CAAC,CAAC,CAAC,uBAAC,0BAAoB,KAAG,IACnD,CACd,CAAA;AACH,CAAC,CAAA;AAZY,QAAA,kBAAkB,sBAY9B"}

package/dist/cjs/components/Toolbar/System/SystemToolbar.d.ts

@@ -1,15 +1,13 @@
+/// <reference types="react" />
 import { ToolbarProps } from '@mui/material';
 import { SelectExProps } from '@xylabs/react-common';
 import { NetworkSelectExProps } from '@xyo-network/react-network';
-import { ReactNode } from 'react';
 export interface SystemToolbarProps extends ToolbarProps {
     networkSelectProps?: NetworkSelectExProps;
     archiveSelectProps?: SelectExProps<string>;
     hideNetworkSelect?: boolean;
     hideArchiveSelect?: boolean;
-    menu?: ReactNode;
     darkModeButton?: boolean;
     authButton?: boolean;
-    noMenu?: boolean;
 }
 export declare const SystemToolbar: React.FC<SystemToolbarProps>;

package/dist/cjs/components/Toolbar/System/SystemToolbar.js

@@ -5,14 +5,13 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_flexbox_1 = require("@xylabs/react-flexbox");
+const react_app_settings_1 = require("@xyo-network/react-app-settings");
 const react_archive_1 = require("@xyo-network/react-archive");
 const react_auth_1 = require("@xyo-network/react-auth");
 const react_network_1 = require("@xyo-network/react-network");
-const react_shared_1 = require("@xyo-network/react-shared");
-const SiteMenu_1 = require("../../SiteMenu");
 const SystemToolbar = (_a) => {
-    var { children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, menu, darkModeButton = false, authButton = false, noMenu = false } = _a, props = tslib_1.__rest(_a, ["children", "networkSelectProps", "archiveSelectProps", "hideNetworkSelect", "hideArchiveSelect", "menu", "darkModeButton", "authButton", "noMenu"]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({}, props, { children: [hideNetworkSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_network_1.NetworkSelectEx, Object.assign({ fullWidth: true }, networkSelectProps)) })) }))), hideArchiveSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_archive_1.ArchiveSelectEx, Object.assign({ fullWidth: true }, archiveSelectProps)) })) }))), children, authButton ? (0, jsx_runtime_1.jsx)(react_auth_1.AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? (0, jsx_runtime_1.jsx)(react_shared_1.DarkModeIconButton, { color: "inherit" }) : null, noMenu ? null : (0, jsx_runtime_1.jsx)(SiteMenu_1.SiteMenu, { children: menu })] })));
+    var { children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false } = _a, props = tslib_1.__rest(_a, ["children", "networkSelectProps", "archiveSelectProps", "hideNetworkSelect", "hideArchiveSelect", "darkModeButton", "authButton"]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({}, props, { children: [hideNetworkSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_network_1.NetworkSelectEx, Object.assign({ fullWidth: true }, networkSelectProps)) })) }))), hideArchiveSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_archive_1.ArchiveSelectEx, Object.assign({ fullWidth: true }, archiveSelectProps)) })) }))), children, authButton ? (0, jsx_runtime_1.jsx)(react_auth_1.AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? (0, jsx_runtime_1.jsx)(react_app_settings_1.DarkModeIconButton, { color: "inherit" }) : null] })));
 };
 exports.SystemToolbar = SystemToolbar;
 //# sourceMappingURL=SystemToolbar.js.map

package/dist/cjs/components/Toolbar/System/SystemToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA4D;AAE5D,yDAA+C;AAC/C,8DAA4D;AAC5D,wDAA8D;AAC9D,8DAAkF;AAClF,4DAA8D;AAG9D,6CAAyC;AAalC,MAAM,aAAa,GAAiC,CAAC,EAW3D,EAAE,EAAE;QAXuD,EAC1D,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,IAAI,EACJ,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,KAAK,OAEf,EADI,KAAK,sBAVkD,oJAW3D,CADS;IAER,OAAO,CACL,wBAAC,kBAAO,oBAAK,KAAK,eACf,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,uBAAO,kBAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,gBAClC,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,uBAAO,kBAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,gBAClC,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,uBAAC,iCAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,uBAAC,iCAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAC,mBAAQ,cAAE,IAAI,GAAY,KACpC,CACX,CAAA;AACH,CAAC,CAAA;AAlCY,QAAA,aAAa,iBAkCzB"}
+{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA4D;AAE5D,yDAA+C;AAC/C,wEAAoE;AACpE,8DAA4D;AAC5D,wDAA8D;AAC9D,8DAAkF;AAW3E,MAAM,aAAa,GAAiC,CAAC,EAS3D,EAAE,EAAE;QATuD,EAC1D,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,OAEnB,EADI,KAAK,sBARkD,kIAS3D,CADS;IAER,OAAO,CACL,wBAAC,kBAAO,oBAAK,KAAK,eACf,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,uBAAO,kBAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,gBAClC,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,uBAAO,kBAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,gBAClC,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,uBAAC,iCAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,uBAAC,uCAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,KACvD,CACX,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,aAAa,iBA+BzB"}

package/dist/esm/WebAppNavigationType.d.ts

@@ -0,0 +1 @@
+export declare type WebAppNavigationType = 'menu' | 'sidebar';

package/dist/esm/WebAppNavigationType.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=WebAppNavigationType.js.map

package/dist/esm/WebAppNavigationType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebAppNavigationType.js","sourceRoot":"","sources":["../../src/WebAppNavigationType.ts"],"names":[],"mappings":""}

package/dist/esm/components/AppBar/Application.d.ts

@@ -1,9 +1,10 @@
 import { ToolbarProps } from '@mui/material';
 import { AppBarExProps } from '@xylabs/react-common';
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export interface ApplicationAppBarProps extends AppBarExProps {
     contextToolbar?: ReactElement<ToolbarProps>;
     systemToolbar?: ReactElement<ToolbarProps>;
     responsive?: boolean;
+    menuItems?: ReactNode;
 }
 export declare const ApplicationAppBar: React.FC<ApplicationAppBarProps>;

package/dist/esm/components/AppBar/Application.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Toolbar } from '@mui/material';
 import { AppBarEx } from '@xylabs/react-common';
+import { SiteMenu } from '../SiteMenu';
 import { ContextToolbar, SystemToolbar } from '../Toolbar';
-export const ApplicationAppBar = ({ systemToolbar = _jsx(SystemToolbar, {}), contextToolbar = _jsx(ContextToolbar, {}), responsive = true, ...props }) => {
-    return _jsx(AppBarEx, { systemToolbar: systemToolbar, contextToolbar: contextToolbar, position: "sticky", responsive: responsive, ...props });
+export const ApplicationAppBar = ({ menuItems, menu, systemToolbar = _jsx(SystemToolbar, {}), contextToolbar = _jsx(ContextToolbar, {}), responsive = true, ...props }) => {
+    return (_jsx(AppBarEx, { systemToolbar: systemToolbar, contextToolbar: contextToolbar, menu: (menu ?? menuItems) ? (_jsx(Toolbar, { children: _jsx(SiteMenu, { children: menuItems }) })) : undefined, position: "sticky", responsive: responsive, ...props }));
 };
 //# sourceMappingURL=Application.js.map

package/dist/esm/components/AppBar/Application.js.map

@@ -1 +1 @@
-{"version":3,"file":"Application.js","sourceRoot":"","sources":["../../../../src/components/AppBar/Application.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAiB,MAAM,sBAAsB,CAAA;AAG9D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAQ1D,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAAE,aAAa,GAAG,KAAC,aAAa,KAAG,EAAE,cAAc,GAAG,KAAC,cAAc,KAAG,EAAE,UAAU,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7K,OAAO,KAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAE,UAAU,KAAM,KAAK,GAAI,CAAA;AACxI,CAAC,CAAA"}
+{"version":3,"file":"Application.js","sourceRoot":"","sources":["../../../../src/components/AppBar/Application.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAiB,MAAM,sBAAsB,CAAA;AAG9D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAS1D,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,SAAS,EACT,IAAI,EACJ,aAAa,GAAG,KAAC,aAAa,KAAG,EACjC,cAAc,GAAG,KAAC,cAAc,KAAG,EACnC,UAAU,GAAG,IAAI,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,QAAQ,IACP,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,IAAI,EACF,CAAA,IAAI,IAAI,SAAS,EAAC,CAAC,CAAC,CAClB,KAAC,OAAO,cACN,KAAC,QAAQ,cAAE,SAAS,GAAY,GACxB,CACX,CAAC,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,UAAU,KAClB,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/DarkModeIconButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+export declare const DarkModeIconButton: React.FC<IconButtonProps>;

package/dist/esm/components/DarkModeIconButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
+import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
+import { IconButton } from '@mui/material';
+export const DarkModeIconButton = (props) => {
+    const { darkMode, enableDarkMode } = useAppSettings();
+    const handleDarkModeChange = () => {
+        enableDarkMode?.(!darkMode);
+    };
+    return (_jsx(IconButton, { onClick: handleDarkModeChange, ...props, children: darkMode ? _jsx(DarkModeRoundedIcon, {}) : _jsx(LightModeRoundedIcon, {}) }));
+};
+//# sourceMappingURL=DarkModeIconButton.js.map

package/dist/esm/components/DarkModeIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkModeIconButton.js","sourceRoot":"","sources":["../../../src/components/DarkModeIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,MAAM,qCAAqC,CAAA;AACrE,OAAO,oBAAoB,MAAM,sCAAsC,CAAA;AACvE,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAE3D,MAAM,CAAC,MAAM,kBAAkB,GAA8B,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAErD,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,cAAc,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC7B,CAAC,CAAA;IAED,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,oBAAoB,KAAM,KAAK,YACjD,QAAQ,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,KAAC,oBAAoB,KAAG,GACnD,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Toolbar/System/SystemToolbar.d.ts

@@ -1,15 +1,13 @@
+/// <reference types="react" />
 import { ToolbarProps } from '@mui/material';
 import { SelectExProps } from '@xylabs/react-common';
 import { NetworkSelectExProps } from '@xyo-network/react-network';
-import { ReactNode } from 'react';
 export interface SystemToolbarProps extends ToolbarProps {
     networkSelectProps?: NetworkSelectExProps;
     archiveSelectProps?: SelectExProps<string>;
     hideNetworkSelect?: boolean;
     hideArchiveSelect?: boolean;
-    menu?: ReactNode;
     darkModeButton?: boolean;
     authButton?: boolean;
-    noMenu?: boolean;
 }
 export declare const SystemToolbar: React.FC<SystemToolbarProps>;

package/dist/esm/components/Toolbar/System/SystemToolbar.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Paper, Toolbar } from '@mui/material';
 import { FlexRow } from '@xylabs/react-flexbox';
+import { DarkModeIconButton } from '@xyo-network/react-app-settings';
 import { ArchiveSelectEx } from '@xyo-network/react-archive';
 import { AuthStatusIconButton } from '@xyo-network/react-auth';
 import { NetworkSelectEx } from '@xyo-network/react-network';
-import { DarkModeIconButton } from '@xyo-network/react-shared';
-import { SiteMenu } from '../../SiteMenu';
-export const SystemToolbar = ({ children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, menu, darkModeButton = false, authButton = false, noMenu = false, ...props }) => {
-    return (_jsxs(Toolbar, { ...props, children: [hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null, noMenu ? null : _jsx(SiteMenu, { children: menu })] }));
+export const SystemToolbar = ({ children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false, ...props }) => {
+    return (_jsxs(Toolbar, { ...props, children: [hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null] }));
 };
 //# sourceMappingURL=SystemToolbar.js.map

package/dist/esm/components/Toolbar/System/SystemToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAG9D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAazC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,IAAI,EACJ,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,KAAK,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aACf,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,KAAC,oBAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,cAAE,IAAI,GAAY,IACpC,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAWlF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aACf,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,KAAC,oBAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,IACvD,CACX,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -12,21 +12,22 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@mui/icons-material": "^5.8.3",
-    "@mui/material": "^5.8.3",
-    "@xylabs/react-button": "^2.12.24",
-    "@xylabs/react-common": "^2.12.24",
-    "@xylabs/react-flexbox": "^2.12.24",
-    "@xylabs/react-shared": "^2.12.24",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.4",
+    "@xylabs/react-button": "^2.14.3",
+    "@xylabs/react-common": "^2.14.3",
+    "@xylabs/react-flexbox": "^2.14.3",
+    "@xylabs/react-shared": "^2.14.3",
     "@xyo-network/core": "^2.20.45",
-    "@xyo-network/react-archive": "^2.25.61",
-    "@xyo-network/react-archivist-api": "^2.25.61",
-    "@xyo-network/react-auth": "^2.25.61",
-    "@xyo-network/react-network": "^2.25.61",
-    "@xyo-network/react-shared": "^2.25.61",
-    "@xyo-network/react-wallet": "^2.25.61",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@xyo-network/react-app-settings": "^2.25.63",
+    "@xyo-network/react-archive": "^2.25.64",
+    "@xyo-network/react-archivist-api": "^2.25.64",
+    "@xyo-network/react-auth": "^2.25.64",
+    "@xyo-network/react-network": "^2.25.64",
+    "@xyo-network/react-shared": "^2.25.64",
+    "@xyo-network/react-wallet": "^2.25.64",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "tslib": "^2.4.0"
   },
@@ -69,8 +70,8 @@
   "resolutions": {
     "@storybook/react/webpack": "^5",
     "bn.js": "^5.2.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "webpack": "^5"
   },
   "publishConfig": {
@@ -86,6 +87,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.61",
+  "version": "2.25.64",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/AppBar/Application.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-internal-modules */
-import { Paper } from '@mui/material'
+import { List, Paper } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
 import { XyoWalletBase } from '@xyo-network/core'
@@ -10,6 +10,7 @@ import { WalletAccountSelect, WalletProvider } from '@xyo-network/react-wallet'
 import { BrowserRouter } from 'react-router-dom'
 
 import { SearchBar } from '../SearchBar'
+import { SiteMenuListItem } from '../SiteMenu'
 import { SystemToolbar } from '../Toolbar'
 import { ApplicationAppBar } from './Application'
 
@@ -31,7 +32,14 @@ const Template: ComponentStory<typeof ApplicationAppBar> = (args) => (
         <NetworkMemoryProvider>
           <ArchivesProvider>
             <ArchiveProvider>
-              <ApplicationAppBar {...args}></ApplicationAppBar>
+              <ApplicationAppBar
+                menuItems={
+                  <List>
+                    <SiteMenuListItem primary="Hello" />
+                  </List>
+                }
+                {...args}
+              ></ApplicationAppBar>
             </ArchiveProvider>
           </ArchivesProvider>
         </NetworkMemoryProvider>

package/src/components/AppBar/Application.tsx

@@ -1,15 +1,39 @@
-import { ToolbarProps } from '@mui/material'
+import { Toolbar, ToolbarProps } from '@mui/material'
 import { AppBarEx, AppBarExProps } from '@xylabs/react-common'
-import { ReactElement } from 'react'
+import { ReactElement, ReactNode } from 'react'
 
+import { SiteMenu } from '../SiteMenu'
 import { ContextToolbar, SystemToolbar } from '../Toolbar'
 
 export interface ApplicationAppBarProps extends AppBarExProps {
   contextToolbar?: ReactElement<ToolbarProps>
   systemToolbar?: ReactElement<ToolbarProps>
   responsive?: boolean
+  menuItems?: ReactNode
 }
 
-export const ApplicationAppBar: React.FC<ApplicationAppBarProps> = ({ systemToolbar = <SystemToolbar />, contextToolbar = <ContextToolbar />, responsive = true, ...props }) => {
-  return <AppBarEx systemToolbar={systemToolbar} contextToolbar={contextToolbar} position="sticky" responsive={responsive} {...props} />
+export const ApplicationAppBar: React.FC<ApplicationAppBarProps> = ({
+  menuItems,
+  menu,
+  systemToolbar = <SystemToolbar />,
+  contextToolbar = <ContextToolbar />,
+  responsive = true,
+  ...props
+}) => {
+  return (
+    <AppBarEx
+      systemToolbar={systemToolbar}
+      contextToolbar={contextToolbar}
+      menu={
+        menu ?? menuItems ? (
+          <Toolbar>
+            <SiteMenu>{menuItems}</SiteMenu>
+          </Toolbar>
+        ) : undefined
+      }
+      position="sticky"
+      responsive={responsive}
+      {...props}
+    />
+  )
 }

package/src/components/Toolbar/System/SystemToolbar.tsx

@@ -1,23 +1,18 @@
 import { Paper, Toolbar, ToolbarProps } from '@mui/material'
 import { SelectExProps } from '@xylabs/react-common'
 import { FlexRow } from '@xylabs/react-flexbox'
+import { DarkModeIconButton } from '@xyo-network/react-app-settings'
 import { ArchiveSelectEx } from '@xyo-network/react-archive'
 import { AuthStatusIconButton } from '@xyo-network/react-auth'
 import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
-import { DarkModeIconButton } from '@xyo-network/react-shared'
-import { ReactNode } from 'react'
-
-import { SiteMenu } from '../../SiteMenu'
 
 export interface SystemToolbarProps extends ToolbarProps {
   networkSelectProps?: NetworkSelectExProps
   archiveSelectProps?: SelectExProps<string>
   hideNetworkSelect?: boolean
   hideArchiveSelect?: boolean
-  menu?: ReactNode
   darkModeButton?: boolean
   authButton?: boolean
-  noMenu?: boolean
 }
 
 export const SystemToolbar: React.FC<SystemToolbarProps> = ({
@@ -26,10 +21,8 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
   archiveSelectProps,
   hideNetworkSelect,
   hideArchiveSelect,
-  menu,
   darkModeButton = false,
   authButton = false,
-  noMenu = false,
   ...props
 }) => {
   return (
@@ -51,7 +44,6 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
       {children}
       {authButton ? <AuthStatusIconButton color="inherit" /> : null}
       {darkModeButton ? <DarkModeIconButton color="inherit" /> : null}
-      {noMenu ? null : <SiteMenu>{menu}</SiteMenu>}
     </Toolbar>
   )
 }