@xyo-network/react-webapp 7.5.7 → 7.5.11

package/dist/browser/index.mjs

@@ -1,10 +1,6 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/Body.tsx
 import { styled } from "@mui/material";
 import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
-import React from "react";
 
 // src/components/lib/cssValues.ts
 var scrollableWrap = {
@@ -15,29 +11,24 @@ var fixedWrap = {
   inset: "unset",
   position: "relative"
 };
-var scrollableContent = {
-  ...fixedWrap
-};
-var fixedContent = {
-  ...scrollableWrap
-};
+var scrollableContent = { ...fixedWrap };
+var fixedContent = { ...scrollableWrap };
 
 // src/components/Body.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var WebAppBodyName = "WebAppBody";
-var propsNotForwarded = /* @__PURE__ */ new Set([
-  "mobileScrollingBreakpoint",
-  "variant",
-  "spacing",
-  "disableBreadcrumbGutter"
-]);
-var defaultStyledOptions = {
-  shouldForwardProp: /* @__PURE__ */ __name((prop) => !propsNotForwarded.has(prop), "shouldForwardProp")
-};
+var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
+var defaultStyledOptions = { shouldForwardProp: (prop) => !propsNotForwarded.has(prop) };
 var WebAppBodyRoot = styled(FlexGrowCol, {
   ...defaultStyledOptions,
   name: WebAppBodyName,
   slot: "Root"
-})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
+})(({
+  spacing,
+  theme,
+  mobileScrollingBreakpoint = "sm",
+  variant
+}) => {
   const scrollable = variant === "scrollable";
   return theme.unstable_sx({
     alignItems: "stretch",
@@ -46,30 +37,34 @@ var WebAppBodyRoot = styled(FlexGrowCol, {
     overflowX: "visible",
     overflowY: scrollable ? "scroll" : "hidden",
     paddingY: spacing,
-    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
-      overflowY: "scroll"
-    }
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: "scroll" }
   });
 });
 var WebAppBodyBreadcrumb = styled(FlexRow, {
   ...defaultStyledOptions,
   name: WebAppBodyName,
   slot: "Breadcrumb"
-})(({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
+})(({
+  theme,
+  disableBreadcrumbGutter,
+  spacing
+}) => theme.unstable_sx({
   justifyContent: "start",
   marginX: disableBreadcrumbGutter ? 0 : spacing
 }));
 var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
   name: WebAppBodyName,
   slot: "ScrollableWrapper"
-})(() => ({
-  alignItems: "stretch"
-}));
+})(() => ({ alignItems: "stretch" }));
 var WebAppBodyScrollable = styled(FlexGrowCol, {
   ...defaultStyledOptions,
   name: WebAppBodyName,
   slot: "Scrollable"
-})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+})(({
+  theme,
+  mobileScrollingBreakpoint = "sm",
+  variant
+}) => {
   const props = variant === "scrollable" ? scrollableContent : fixedContent;
   return {
     ...props,
@@ -81,57 +76,68 @@ var WebAppBodyScrollable = styled(FlexGrowCol, {
     }
   };
 });
-var WebAppBody = /* @__PURE__ */ __name(({ children, breadcrumbs, disableBreadcrumbGutter, mobileScrollingBreakpoint, spacing = 1, variant, ...props }) => {
-  return /* @__PURE__ */ React.createElement(WebAppBodyRoot, {
-    mobileScrollingBreakpoint,
-    spacing,
-    variant,
-    ...props
-  }, breadcrumbs ? /* @__PURE__ */ React.createElement(WebAppBodyBreadcrumb, {
-    disableBreadcrumbGutter,
-    spacing
-  }, breadcrumbs) : null, /* @__PURE__ */ React.createElement(WebAppBodyScrollableWrapper, null, /* @__PURE__ */ React.createElement(WebAppBodyScrollable, {
-    mobileScrollingBreakpoint,
-    variant
-  }, children)));
-}, "WebAppBody");
+var WebAppBody = ({
+  children,
+  breadcrumbs,
+  disableBreadcrumbGutter,
+  mobileScrollingBreakpoint,
+  spacing = 1,
+  variant,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(WebAppBodyRoot, { mobileScrollingBreakpoint, spacing, variant, ...props, children: [
+    breadcrumbs ? /* @__PURE__ */ jsx(WebAppBodyBreadcrumb, { disableBreadcrumbGutter, spacing, children: breadcrumbs }) : null,
+    /* @__PURE__ */ jsx(WebAppBodyScrollableWrapper, { children: /* @__PURE__ */ jsx(WebAppBodyScrollable, { mobileScrollingBreakpoint, variant, children }) })
+  ] });
+};
 
 // src/components/Chrome.tsx
 import { WebAppChrome } from "@xylabs/react-webapp";
 import { XyoApplicationAppBar } from "@xyo-network/react-appbar";
 import { Footer } from "@xyo-network/react-footer";
-import React2 from "react";
-var XyoWebAppChrome = /* @__PURE__ */ __name(({ ref, appbar, footer, footerElevation = 4, navigationType = "menu", ...props }) => {
-  return /* @__PURE__ */ React2.createElement(WebAppChrome, {
-    ref,
-    appbar: appbar ?? /* @__PURE__ */ React2.createElement(XyoApplicationAppBar, null),
-    footerElevation,
-    navigationType,
-    footer: footer ?? /* @__PURE__ */ React2.createElement(Footer, {
-      dynamicHeight: true
-    }),
-    ...props
-  });
-}, "XyoWebAppChrome");
+import { jsx as jsx2 } from "react/jsx-runtime";
+var XyoWebAppChrome = ({
+  ref,
+  appbar,
+  footer,
+  footerElevation = 4,
+  navigationType = "menu",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    WebAppChrome,
+    {
+      ref,
+      appbar: appbar ?? /* @__PURE__ */ jsx2(XyoApplicationAppBar, {}),
+      footerElevation,
+      navigationType,
+      footer: footer ?? /* @__PURE__ */ jsx2(Footer, { dynamicHeight: true }),
+      ...props
+    }
+  );
+};
 XyoWebAppChrome.displayName = "XyoWebAppChrome";
 
 // src/components/ErrorPage.tsx
 import { ButtonEx } from "@xylabs/react-button";
-import React4 from "react";
 
 // src/components/Page.tsx
 import { Container, styled as styled2 } from "@mui/material";
 import { useAsyncEffect } from "@xylabs/react-async-effect";
 import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
 import { useUserEvents } from "@xylabs/react-pixel";
-import React3 from "react";
 import { Helmet } from "react-helmet";
 import { useLocation } from "react-router-dom";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var WebAppPageRoot = styled2(FlexGrowCol2, {
   name: "WebAppPage",
-  shouldForwardProp: /* @__PURE__ */ __name((propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant", "shouldForwardProp"),
+  shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
   slot: "Root"
-})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+})(({
+  theme,
+  mobileScrollingBreakpoint = "sm",
+  variant
+}) => {
   const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
   return {
     ...props,
@@ -144,69 +150,80 @@ var WebAppPageRoot = styled2(FlexGrowCol2, {
     }
   };
 });
-var WebAppPage = /* @__PURE__ */ __name(({ disableGutters, disableBreadcrumbGutter, title, container, children, breadcrumbs, mobileScrollingBreakpoint, variant = "scrollable", ...props }) => {
+var WebAppPage = ({
+  disableGutters,
+  disableBreadcrumbGutter,
+  title,
+  container,
+  children,
+  breadcrumbs,
+  mobileScrollingBreakpoint,
+  variant = "scrollable",
+  ...props
+}) => {
   const userEvents = useUserEvents();
   const { pathname } = useLocation();
-  useAsyncEffect(async () => {
-    await userEvents?.viewContent({
-      name: title ?? "NodeBasePage",
-      path: location.pathname
-    });
-  }, [
-    pathname,
-    title,
-    userEvents
-  ]);
-  return /* @__PURE__ */ React3.createElement(WebAppPageRoot, {
-    mobileScrollingBreakpoint,
-    variant,
-    ...props
-  }, /* @__PURE__ */ React3.createElement(Helmet, {
-    title
-  }), container && container !== "none" ? /* @__PURE__ */ React3.createElement(Container, {
-    disableGutters,
-    style: {
-      alignItems: "stretch",
-      display: "flex",
-      flexDirection: "column",
-      flexGrow: 1,
-      justifyContent: "flex-start"
+  useAsyncEffect(
+    async () => {
+      await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
     },
-    maxWidth: container
-  }, /* @__PURE__ */ React3.createElement(WebAppBody, {
-    disableBreadcrumbGutter,
-    breadcrumbs,
-    mobileScrollingBreakpoint,
-    variant,
-    ...props
-  }, children)) : /* @__PURE__ */ React3.createElement(WebAppBody, {
-    disableBreadcrumbGutter,
-    breadcrumbs,
-    mobileScrollingBreakpoint,
-    paddingX: disableGutters ? 0 : 1,
-    variant,
-    ...props
-  }, children));
-}, "WebAppPage");
+    [pathname, title, userEvents]
+  );
+  return /* @__PURE__ */ jsxs2(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
+    /* @__PURE__ */ jsx3(Helmet, { title }),
+    container && container !== "none" ? /* @__PURE__ */ jsx3(
+      Container,
+      {
+        disableGutters,
+        style: {
+          alignItems: "stretch",
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          justifyContent: "flex-start"
+        },
+        maxWidth: container,
+        children: /* @__PURE__ */ jsx3(
+          WebAppBody,
+          {
+            disableBreadcrumbGutter,
+            breadcrumbs,
+            mobileScrollingBreakpoint,
+            variant,
+            ...props,
+            children
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx3(
+      WebAppBody,
+      {
+        disableBreadcrumbGutter,
+        breadcrumbs,
+        mobileScrollingBreakpoint,
+        paddingX: disableGutters ? 0 : 1,
+        variant,
+        ...props,
+        children
+      }
+    )
+  ] });
+};
 var FlexPage = WebAppPage;
 
 // src/components/ErrorPage.tsx
-var WebAppErrorPage = /* @__PURE__ */ __name(({ error, ...props }) => /* @__PURE__ */ React4.createElement(WebAppPage, {
-  title: "Oops! Something went wrong",
-  ...props
-}, /* @__PURE__ */ React4.createElement("h1", null, "Oops! Something went wrong!"), /* @__PURE__ */ React4.createElement("p", null, `${error}`), /* @__PURE__ */ React4.createElement(ButtonEx, {
-  href: "/",
-  variant: "contained"
-}, "Homepage")), "WebAppErrorPage");
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var WebAppErrorPage = ({ error, ...props }) => /* @__PURE__ */ jsxs3(WebAppPage, { title: "Oops! Something went wrong", ...props, children: [
+  /* @__PURE__ */ jsx4("h1", { children: "Oops! Something went wrong!" }),
+  /* @__PURE__ */ jsx4("p", { children: `${error}` }),
+  /* @__PURE__ */ jsx4(ButtonEx, { href: "/", variant: "contained", children: "Homepage" })
+] });
 var ErrorPage = WebAppErrorPage;
 
 // src/components/NotFoundPage/Page.tsx
 import { NotFound } from "@xyo-network/react-shared";
-import React5 from "react";
-var WebAppNotFoundPage = /* @__PURE__ */ __name(({ title, ...props }) => /* @__PURE__ */ React5.createElement(WebAppPage, {
-  title: title ?? "Sorry! Page Not Found",
-  ...props
-}, /* @__PURE__ */ React5.createElement(NotFound, null)), "WebAppNotFoundPage");
+import { jsx as jsx5 } from "react/jsx-runtime";
+var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ jsx5(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ jsx5(NotFound, {}) });
 var NotFoundPage = WebAppNotFoundPage;
 export {
   ErrorPage,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import type { Breakpoint } from '@mui/material'\nimport { styled } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({\n  spacing, theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: 'scroll' },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({\n  theme, disableBreadcrumbGutter, spacing,\n}) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }))\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({\n  theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs\n        ? (\n            <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n              {breadcrumbs}\n            </WebAppBodyBreadcrumb>\n          )\n        : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import type { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = { ...fixedWrap } as const\n\nexport const fixedContent: CSSProperties = { ...scrollableWrap } as const\n","import { WebAppChrome, type WebAppChromeProps } from '@xylabs/react-webapp'\nimport { XyoApplicationAppBar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport React from 'react'\n\nexport interface XyoWebAppChromeProps extends WebAppChromeProps {}\n\nexport const XyoWebAppChrome = ({\n  ref, appbar, footer, footerElevation = 4, navigationType = 'menu', ...props\n}: XyoWebAppChromeProps) => {\n  return (\n    <WebAppChrome\n      ref={ref}\n      appbar={appbar ?? <XyoApplicationAppBar />}\n      footerElevation={footerElevation}\n      navigationType={navigationType}\n      footer={footer ?? <Footer dynamicHeight />}\n      {...props}\n    />\n  )\n}\n\nXyoWebAppChrome.displayName = 'XyoWebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport type { WebAppPageProps } from './Page.tsx'\nimport { WebAppPage } from './Page.tsx'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport type { WebAppBodyProps } from './Body.tsx'\nimport { WebAppBody } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({\n  theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none'\n        ? (\n            <Container\n              disableGutters={disableGutters}\n              style={{\n                alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',\n              }}\n              maxWidth={container}\n            >\n              <WebAppBody\n                disableBreadcrumbGutter={disableBreadcrumbGutter}\n                breadcrumbs={breadcrumbs}\n                mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n                variant={variant}\n                {...props}\n              >\n                {children}\n              </WebAppBody>\n            </Container>\n          )\n        : (\n            <WebAppBody\n              disableBreadcrumbGutter={disableBreadcrumbGutter}\n              breadcrumbs={breadcrumbs}\n              mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n              paddingX={disableGutters ? 0 : 1}\n              variant={variant}\n              {...props}\n            >\n              {children}\n            </WebAppBody>\n          )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport type { WebAppPageProps } from '../Page.tsx'\nimport { WebAppPage } from '../Page.tsx'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["styled","FlexGrowCol","FlexRow","React","scrollableWrap","inset","position","fixedWrap","scrollableContent","fixedContent","WebAppBodyName","propsNotForwarded","Set","defaultStyledOptions","shouldForwardProp","prop","has","WebAppBodyRoot","styled","FlexGrowCol","name","slot","spacing","theme","mobileScrollingBreakpoint","variant","scrollable","unstable_sx","alignItems","gap","justifyContent","overflowX","overflowY","paddingY","breakpoints","down","WebAppBodyBreadcrumb","FlexRow","disableBreadcrumbGutter","marginX","WebAppBodyScrollableWrapper","WebAppBodyScrollable","props","scrollableContent","fixedContent","inset","position","WebAppBody","children","breadcrumbs","WebAppChrome","XyoApplicationAppBar","Footer","React","XyoWebAppChrome","ref","appbar","footer","footerElevation","navigationType","props","React","WebAppChrome","XyoApplicationAppBar","Footer","dynamicHeight","displayName","ButtonEx","React","Container","styled","useAsyncEffect","FlexGrowCol","useUserEvents","React","Helmet","useLocation","WebAppPageRoot","styled","FlexGrowCol","name","shouldForwardProp","propName","slot","theme","mobileScrollingBreakpoint","variant","props","scrollableWrap","fixedWrap","alignItems","justifyContent","maxWidth","breakpoints","down","inset","position","WebAppPage","disableGutters","disableBreadcrumbGutter","title","container","children","breadcrumbs","userEvents","useUserEvents","pathname","useLocation","useAsyncEffect","viewContent","path","location","React","Helmet","Container","style","display","flexDirection","flexGrow","WebAppBody","paddingX","FlexPage","WebAppErrorPage","error","props","React","WebAppPage","title","h1","p","ButtonEx","href","variant","ErrorPage","NotFound","React","WebAppNotFoundPage","title","props","React","WebAppPage","NotFound","NotFoundPage"]}
+{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import type { Breakpoint } from '@mui/material'\nimport { styled } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({\n  spacing, theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: 'scroll' },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({\n  theme, disableBreadcrumbGutter, spacing,\n}) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }))\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({\n  theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs\n        ? (\n            <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n              {breadcrumbs}\n            </WebAppBodyBreadcrumb>\n          )\n        : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import type { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = { ...fixedWrap } as const\n\nexport const fixedContent: CSSProperties = { ...scrollableWrap } as const\n","import { WebAppChrome, type WebAppChromeProps } from '@xylabs/react-webapp'\nimport { XyoApplicationAppBar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport React from 'react'\n\nexport interface XyoWebAppChromeProps extends WebAppChromeProps {}\n\nexport const XyoWebAppChrome = ({\n  ref, appbar, footer, footerElevation = 4, navigationType = 'menu', ...props\n}: XyoWebAppChromeProps) => {\n  return (\n    <WebAppChrome\n      ref={ref}\n      appbar={appbar ?? <XyoApplicationAppBar />}\n      footerElevation={footerElevation}\n      navigationType={navigationType}\n      footer={footer ?? <Footer dynamicHeight />}\n      {...props}\n    />\n  )\n}\n\nXyoWebAppChrome.displayName = 'XyoWebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport type { WebAppPageProps } from './Page.tsx'\nimport { WebAppPage } from './Page.tsx'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport type { WebAppBodyProps } from './Body.tsx'\nimport { WebAppBody } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({\n  theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none'\n        ? (\n            <Container\n              disableGutters={disableGutters}\n              style={{\n                alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',\n              }}\n              maxWidth={container}\n            >\n              <WebAppBody\n                disableBreadcrumbGutter={disableBreadcrumbGutter}\n                breadcrumbs={breadcrumbs}\n                mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n                variant={variant}\n                {...props}\n              >\n                {children}\n              </WebAppBody>\n            </Container>\n          )\n        : (\n            <WebAppBody\n              disableBreadcrumbGutter={disableBreadcrumbGutter}\n              breadcrumbs={breadcrumbs}\n              mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n              paddingX={disableGutters ? 0 : 1}\n              variant={variant}\n              {...props}\n            >\n              {children}\n            </WebAppBody>\n          )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport type { WebAppPageProps } from '../Page.tsx'\nimport { WebAppPage } from '../Page.tsx'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["jsx","styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs","jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-webapp",
-  "version": "7.5.7",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,54 +36,127 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@mui/material": "~7.3.9",
-    "@xylabs/react-async-effect": "~7.1.17",
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/react-webapp": "~7.1.17",
-    "@xyo-network/react-appbar": "7.5.7",
-    "@xyo-network/react-footer": "7.5.7",
-    "@xyo-network/react-shared": "7.5.7",
-    "react": "^19.2.4",
-    "react-helmet": "~6.1.0",
-    "react-router-dom": "^7.13.2"
+    "@xyo-network/react-appbar": "~7.5.11",
+    "@xyo-network/react-shared": "~7.5.11",
+    "@xyo-network/react-footer": "~7.5.11"
   },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@bitauth/libauth": "~3.0.0",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-helmet": "~6.1.11",
-    "@xylabs/react-appbar": "~7.1.17",
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-link": "~7.1.17",
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "react-dom": "^19.2.4",
-    "storybook": "~10.3.3",
+    "@xylabs/react-appbar": "~7.1.20",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-dialogs": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-pixel": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-select": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/react-webapp": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/threads": "~5.0.100",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/network": "~5.5.1",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "debug": "~4.4.3",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "hash-wasm": "~4.12.0",
+    "js-cookie": "~3.0.5",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-helmet": "~6.1.0",
+    "react-icons": "~5.6.0",
+    "react-is": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "react-dom": "^19",
-    "zod": "^4"
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@xylabs/react-appbar": "~7.1.20",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-pixel": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-select": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/react-webapp": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/network": "~5.5.1",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-helmet": "~6.1.0",
+    "react-icons": "~5.6.0",
+    "react-is": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/Body.tsx

@@ -1,102 +0,0 @@
-import type { Breakpoint } from '@mui/material'
-import { styled } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import { fixedContent, scrollableContent } from './lib/index.ts'
-
-const WebAppBodyName = 'WebAppBody'
-const propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])
-const defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }
-
-const WebAppBodyRoot = styled(FlexGrowCol, {
-  ...defaultStyledOptions,
-  name: WebAppBodyName,
-  slot: 'Root',
-})<WebAppBodyProps>(({
-  spacing, theme, mobileScrollingBreakpoint = 'sm', variant,
-}) => {
-  const scrollable = variant === 'scrollable'
-  return theme.unstable_sx({
-    alignItems: 'stretch',
-    gap: 1,
-    justifyContent: 'flex-start',
-    overflowX: 'visible',
-    overflowY: scrollable ? 'scroll' : 'hidden',
-    paddingY: spacing,
-    [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: 'scroll' },
-  })
-})
-
-const WebAppBodyBreadcrumb = styled(FlexRow, {
-  ...defaultStyledOptions,
-  name: WebAppBodyName,
-  slot: 'Breadcrumb',
-})<WebAppBodyProps>(({
-  theme, disableBreadcrumbGutter, spacing,
-}) =>
-  theme.unstable_sx({
-    justifyContent: 'start',
-    marginX: disableBreadcrumbGutter ? 0 : spacing,
-  }))
-
-const WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
-  name: WebAppBodyName,
-  slot: 'ScrollableWrapper',
-})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))
-
-const WebAppBodyScrollable = styled(FlexGrowCol, {
-  ...defaultStyledOptions,
-  name: WebAppBodyName,
-  slot: 'Scrollable',
-})<WebAppBodyProps>(({
-  theme, mobileScrollingBreakpoint = 'sm', variant,
-}) => {
-  const props = variant === 'scrollable' ? scrollableContent : fixedContent
-  return {
-    ...props,
-    alignItems: 'stretch',
-    justifyContent: 'start',
-    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
-      inset: 'unset',
-      position: 'relative',
-    },
-  }
-})
-
-export interface WebAppBodyProps extends FlexBoxProps {
-  breadcrumbs?: ReactNode
-  disableBreadcrumbGutter?: boolean
-  mobileScrollingBreakpoint?: Breakpoint
-  spacing?: string | number
-  variant?: 'scrollable' | 'fixed'
-}
-
-export const WebAppBody: React.FC<WebAppBodyProps> = ({
-  children,
-  breadcrumbs,
-  disableBreadcrumbGutter,
-  mobileScrollingBreakpoint,
-  spacing = 1,
-  variant,
-  ...props
-}) => {
-  return (
-    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>
-      {breadcrumbs
-        ? (
-            <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>
-              {breadcrumbs}
-            </WebAppBodyBreadcrumb>
-          )
-        : null}
-      <WebAppBodyScrollableWrapper>
-        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>
-          {children}
-        </WebAppBodyScrollable>
-      </WebAppBodyScrollableWrapper>
-    </WebAppBodyRoot>
-  )
-}

package/src/components/Chrome.stories.tsx

@@ -1,71 +0,0 @@
-import { Breadcrumbs, List } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { MenuListItemContainer } from '@xylabs/react-appbar'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { LinkEx } from '@xylabs/react-link'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { XyoWebAppChrome } from './Chrome.tsx'
-import type { WebAppPageProps } from './Page.tsx'
-import { WebAppPage } from './Page.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: XyoWebAppChrome,
-  parameters: { docs: { page: null } },
-  title: 'webapp/XyoWebAppChrome',
-} as Meta<typeof XyoWebAppChrome>
-
-const rowArray = [32, 64, 128, 256, 512, 1024]
-
-const Children: React.FC<WebAppPageProps> = props => (
-  <WebAppPage
-    breadcrumbs={(
-      <Breadcrumbs>
-        <LinkEx>BreadCrumbs</LinkEx>
-      </Breadcrumbs>
-    )}
-    {...props}
-  >
-    {rowArray.map((height) => {
-      return (
-        <FlexRow key={height} height={height}>
-          {height}
-        </FlexRow>
-      )
-    })}
-  </WebAppPage>
-)
-
-const Template: StoryFn<typeof XyoWebAppChrome> = (args) => {
-  return (
-    <BrowserRouter>
-      <XyoWebAppChrome
-        menuItems={(
-          <List>
-            <MenuListItemContainer primary="Hello" />
-          </List>
-        )}
-        height="calc(100vh - 2rem)"
-        {...args}
-      >
-      </XyoWebAppChrome>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const DefaultSideBar = Template.bind({})
-DefaultSideBar.args = { children: <Children />, navigationType: 'sidebar' }
-
-const WithFixedSizePage = Template.bind({})
-WithFixedSizePage.args = { children: <Children variant="fixed" />, navigationType: 'sidebar' }
-
-export {
-  Default, DefaultSideBar, WithFixedSizePage,
-}
-
-export default StorybookEntry

package/src/components/Chrome.tsx

@@ -1,23 +0,0 @@
-import { WebAppChrome, type WebAppChromeProps } from '@xylabs/react-webapp'
-import { XyoApplicationAppBar } from '@xyo-network/react-appbar'
-import { Footer } from '@xyo-network/react-footer'
-import React from 'react'
-
-export interface XyoWebAppChromeProps extends WebAppChromeProps {}
-
-export const XyoWebAppChrome = ({
-  ref, appbar, footer, footerElevation = 4, navigationType = 'menu', ...props
-}: XyoWebAppChromeProps) => {
-  return (
-    <WebAppChrome
-      ref={ref}
-      appbar={appbar ?? <XyoApplicationAppBar />}
-      footerElevation={footerElevation}
-      navigationType={navigationType}
-      footer={footer ?? <Footer dynamicHeight />}
-      {...props}
-    />
-  )
-}
-
-XyoWebAppChrome.displayName = 'XyoWebAppChrome'

package/src/components/ErrorPage.tsx

@@ -1,22 +0,0 @@
-import { ButtonEx } from '@xylabs/react-button'
-import React from 'react'
-
-import type { WebAppPageProps } from './Page.tsx'
-import { WebAppPage } from './Page.tsx'
-
-export interface WebAppErrorPageProps extends WebAppPageProps {
-  error?: Error
-}
-
-export const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (
-  <WebAppPage title="Oops! Something went wrong" {...props}>
-    <h1>Oops! Something went wrong!</h1>
-    <p>{`${error}`}</p>
-    <ButtonEx href="/" variant="contained">
-      Homepage
-    </ButtonEx>
-  </WebAppPage>
-)
-
-/** @deprecated use WebAppErrorPage instead */
-export const ErrorPage = WebAppErrorPage

package/src/components/NotFoundPage/Page.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { NotFound } from '@xyo-network/react-shared'
-import React from 'react'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: NotFound,
-  parameters: { docs: { page: null } },
-  title: 'webapp/NotFound',
-} as Meta<typeof NotFound>
-
-const Template: StoryFn<typeof NotFound> = () => {
-  return <NotFound />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-export default StorybookEntry

package/src/components/NotFoundPage/Page.tsx

@@ -1,14 +0,0 @@
-import { NotFound } from '@xyo-network/react-shared'
-import React from 'react'
-
-import type { WebAppPageProps } from '../Page.tsx'
-import { WebAppPage } from '../Page.tsx'
-
-export const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (
-  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>
-    <NotFound />
-  </WebAppPage>
-)
-
-/** @deprecated  use WebAppNotFoundPage instead */
-export const NotFoundPage = WebAppNotFoundPage

package/src/components/NotFoundPage/index.ts

@@ -1 +0,0 @@
-export * from './Page.tsx'

package/src/components/Page.tsx

@@ -1,102 +0,0 @@
-import type { ContainerProps } from '@mui/material'
-import { Container, styled } from '@mui/material'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import { useUserEvents } from '@xylabs/react-pixel'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-import { Helmet } from 'react-helmet'
-import { useLocation } from 'react-router-dom'
-
-import type { WebAppBodyProps } from './Body.tsx'
-import { WebAppBody } from './Body.tsx'
-import { fixedWrap, scrollableWrap } from './lib/index.ts'
-
-const WebAppPageRoot = styled(FlexGrowCol, {
-  name: 'WebAppPage',
-  shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',
-  slot: 'Root',
-})<WebAppPageProps>(({
-  theme, mobileScrollingBreakpoint = 'sm', variant,
-}) => {
-  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap
-  return {
-    ...props,
-    alignItems: 'stretch',
-    justifyContent: 'start',
-    maxWidth: '100vw',
-    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
-      inset: 0,
-      position: 'absolute',
-    },
-  }
-})
-
-export interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
-  container?: ContainerProps['maxWidth'] | 'none'
-  disableGutters?: boolean
-}
-
-export const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>> = ({
-  disableGutters,
-  disableBreadcrumbGutter,
-  title,
-  container,
-  children,
-  breadcrumbs,
-  mobileScrollingBreakpoint,
-  variant = 'scrollable',
-  ...props
-}) => {
-  const userEvents = useUserEvents()
-  const { pathname } = useLocation()
-
-  useAsyncEffect(
-    async () => {
-      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })
-    },
-    [pathname, title, userEvents],
-  )
-
-  return (
-    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>
-      <Helmet title={title} />
-      {container && container !== 'none'
-        ? (
-            <Container
-              disableGutters={disableGutters}
-              style={{
-                alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',
-              }}
-              maxWidth={container}
-            >
-              <WebAppBody
-                disableBreadcrumbGutter={disableBreadcrumbGutter}
-                breadcrumbs={breadcrumbs}
-                mobileScrollingBreakpoint={mobileScrollingBreakpoint}
-                variant={variant}
-                {...props}
-              >
-                {children}
-              </WebAppBody>
-            </Container>
-          )
-        : (
-            <WebAppBody
-              disableBreadcrumbGutter={disableBreadcrumbGutter}
-              breadcrumbs={breadcrumbs}
-              mobileScrollingBreakpoint={mobileScrollingBreakpoint}
-              paddingX={disableGutters ? 0 : 1}
-              variant={variant}
-              {...props}
-            >
-              {children}
-            </WebAppBody>
-          )}
-    </WebAppPageRoot>
-  )
-}
-
-/** @deprecated use WebAppPagePage instead */
-export const FlexPage = WebAppPage

package/src/components/index.ts

@@ -1,5 +0,0 @@
-export * from './Body.tsx'
-export * from './Chrome.tsx'
-export * from './ErrorPage.tsx'
-export * from './NotFoundPage/index.ts'
-export * from './Page.tsx'

package/src/components/lib/cssValues.ts

@@ -1,16 +0,0 @@
-import type { CSSProperties } from 'react'
-
-export const scrollableWrap: CSSProperties = {
-  inset: 0,
-  position: 'absolute',
-} as const
-
-export const fixedWrap: CSSProperties = {
-  inset: 'unset',
-  position: 'relative',
-} as const
-
-// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles
-export const scrollableContent: CSSProperties = { ...fixedWrap } as const
-
-export const fixedContent: CSSProperties = { ...scrollableWrap } as const

package/src/components/lib/index.ts

@@ -1 +0,0 @@
-export * from './cssValues.ts'

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.ts'