@xyo-network/react-webapp 2.64.0 → 2.64.1

package/dist/browser/components/NotFoundPage/Page.js

@@ -1,8 +1,184 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/NotFoundPage/Page.tsx
 import { NotFound } from "@xyo-network/react-shared";
-import { WebAppPage } from "../Page";
-const WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ jsx(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ jsx(NotFound, {}) });
-const NotFoundPage = WebAppNotFoundPage;
+
+// 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 { Helmet } from "react-helmet";
+import { useLocation } from "react-router-dom";
+
+// src/components/Body.tsx
+import { styled } from "@mui/material";
+import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
+
+// src/components/lib/cssValues.ts
+var scrollableWrap = {
+  inset: 0,
+  position: "absolute"
+};
+var fixedWrap = {
+  inset: "unset",
+  position: "relative"
+};
+var scrollableContent = {
+  ...fixedWrap
+};
+var fixedContent = {
+  ...scrollableWrap
+};
+
+// src/components/Body.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WebAppBodyName = "WebAppBody";
+var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
+var defaultStyledOptions = {
+  shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
+};
+var WebAppBodyRoot = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Root"
+})(({ 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"
+    }
+  });
+});
+var WebAppBodyBreadcrumb = styled(FlexRow, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Breadcrumb"
+})(
+  ({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
+    justifyContent: "start",
+    marginX: disableBreadcrumbGutter ? 0 : spacing
+  })
+);
+var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: "ScrollableWrapper"
+})(() => ({
+  alignItems: "stretch"
+}));
+var WebAppBodyScrollable = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Scrollable"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableContent : fixedContent;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: "unset",
+      position: "relative"
+    }
+  };
+});
+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/Page.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WebAppPageRoot = styled2(FlexGrowCol2, {
+  name: "WebAppPage",
+  shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
+  slot: "Root"
+})(({ 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"
+    }
+  };
+});
+var WebAppPage = ({
+  disableGutters,
+  disableBreadcrumbGutter,
+  title,
+  container,
+  children,
+  breadcrumbs,
+  mobileScrollingBreakpoint,
+  variant = "scrollable",
+  ...props
+}) => {
+  const userEvents = useUserEvents();
+  const { pathname } = useLocation();
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
+    },
+    [pathname, title, userEvents]
+  );
+  return /* @__PURE__ */ jsxs2(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
+    /* @__PURE__ */ jsx2(Helmet, { title }),
+    container && container !== "none" ? /* @__PURE__ */ jsx2(
+      Container,
+      {
+        disableGutters,
+        style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
+        maxWidth: container,
+        children: /* @__PURE__ */ jsx2(
+          WebAppBody,
+          {
+            disableBreadcrumbGutter,
+            breadcrumbs,
+            mobileScrollingBreakpoint,
+            variant,
+            ...props,
+            children
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx2(
+      WebAppBody,
+      {
+        disableBreadcrumbGutter,
+        breadcrumbs,
+        mobileScrollingBreakpoint,
+        paddingX: disableGutters ? 0 : 1,
+        variant,
+        ...props,
+        children
+      }
+    )
+  ] });
+};
+
+// src/components/NotFoundPage/Page.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ jsx3(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ jsx3(NotFound, {}) });
+var NotFoundPage = WebAppNotFoundPage;
 export {
   NotFoundPage,
   WebAppNotFoundPage

package/dist/browser/components/NotFoundPage/Page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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":"AAMI;AANJ,SAAS,gBAAgB;AAEzB,SAAS,kBAAmC;AAErC,MAAM,qBAAgD,CAAC,EAAE,OAAO,GAAG,MAAM,MAC9E,oBAAC,cAAW,OAAO,SAAS,yBAA0B,GAAG,OACvD,8BAAC,YAAS,GACZ;AAIK,MAAM,eAAe;","names":[]}
+{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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<WithChildren<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    // eslint-disable-next-line react-hooks/exhaustive-deps\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        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\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        <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { 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 = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx"]}

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

@@ -1,2 +1,186 @@
-export * from "./Page";
+// src/components/NotFoundPage/Page.tsx
+import { NotFound } from "@xyo-network/react-shared";
+
+// 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 { Helmet } from "react-helmet";
+import { useLocation } from "react-router-dom";
+
+// src/components/Body.tsx
+import { styled } from "@mui/material";
+import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
+
+// src/components/lib/cssValues.ts
+var scrollableWrap = {
+  inset: 0,
+  position: "absolute"
+};
+var fixedWrap = {
+  inset: "unset",
+  position: "relative"
+};
+var scrollableContent = {
+  ...fixedWrap
+};
+var fixedContent = {
+  ...scrollableWrap
+};
+
+// src/components/Body.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WebAppBodyName = "WebAppBody";
+var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
+var defaultStyledOptions = {
+  shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
+};
+var WebAppBodyRoot = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Root"
+})(({ 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"
+    }
+  });
+});
+var WebAppBodyBreadcrumb = styled(FlexRow, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Breadcrumb"
+})(
+  ({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
+    justifyContent: "start",
+    marginX: disableBreadcrumbGutter ? 0 : spacing
+  })
+);
+var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: "ScrollableWrapper"
+})(() => ({
+  alignItems: "stretch"
+}));
+var WebAppBodyScrollable = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Scrollable"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableContent : fixedContent;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: "unset",
+      position: "relative"
+    }
+  };
+});
+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/Page.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WebAppPageRoot = styled2(FlexGrowCol2, {
+  name: "WebAppPage",
+  shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
+  slot: "Root"
+})(({ 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"
+    }
+  };
+});
+var WebAppPage = ({
+  disableGutters,
+  disableBreadcrumbGutter,
+  title,
+  container,
+  children,
+  breadcrumbs,
+  mobileScrollingBreakpoint,
+  variant = "scrollable",
+  ...props
+}) => {
+  const userEvents = useUserEvents();
+  const { pathname } = useLocation();
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
+    },
+    [pathname, title, userEvents]
+  );
+  return /* @__PURE__ */ jsxs2(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
+    /* @__PURE__ */ jsx2(Helmet, { title }),
+    container && container !== "none" ? /* @__PURE__ */ jsx2(
+      Container,
+      {
+        disableGutters,
+        style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
+        maxWidth: container,
+        children: /* @__PURE__ */ jsx2(
+          WebAppBody,
+          {
+            disableBreadcrumbGutter,
+            breadcrumbs,
+            mobileScrollingBreakpoint,
+            variant,
+            ...props,
+            children
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx2(
+      WebAppBody,
+      {
+        disableBreadcrumbGutter,
+        breadcrumbs,
+        mobileScrollingBreakpoint,
+        paddingX: disableGutters ? 0 : 1,
+        variant,
+        ...props,
+        children
+      }
+    )
+  ] });
+};
+
+// src/components/NotFoundPage/Page.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ jsx3(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ jsx3(NotFound, {}) });
+var NotFoundPage = WebAppNotFoundPage;
+export {
+  NotFoundPage,
+  WebAppNotFoundPage
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NotFoundPage/index.ts"],"sourcesContent":["export * from './Page'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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<WithChildren<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    // eslint-disable-next-line react-hooks/exhaustive-deps\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        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\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        <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { 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 = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n"],"mappings":";AAAA,SAAS,gBAAgB;;;ACAzB,SAAS,WAA2B,UAAAA,eAAc;AAClD,SAAS,sBAAsB;AAC/B,SAAuB,eAAAC,oBAAmB;AAC1C,SAAS,qBAAqB;AAE9B,SAAS,cAAc;AACvB,SAAS,mBAAmB;;;ACN5B,SAAqB,cAAc;AACnC,SAAuB,aAAa,eAAe;;;ACC5C,IAAM,iBAAgC;AAAA,EAC3C,OAAO;AAAA,EACP,UAAU;AACZ;AAEO,IAAM,YAA2B;AAAA,EACtC,OAAO;AAAA,EACP,UAAU;AACZ;AAGO,IAAM,oBAAmC;AAAA,EAC9C,GAAG;AACL;AAEO,IAAM,eAA8B;AAAA,EACzC,GAAG;AACL;;;ADiEI,SAEI,KAFJ;AA9EJ,IAAM,iBAAiB;AACvB,IAAM,oBAAoB,CAAC,6BAA6B,WAAW,WAAW,yBAAyB;AACvG,IAAM,uBAAuB;AAAA,EAC3B,mBAAmB,CAAC,SAAiB,CAAC,kBAAkB,SAAS,IAAI;AACvE;AAEA,IAAM,iBAAiB,OAAO,aAAa;AAAA,EACzC,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC,EAAE,SAAS,OAAO,4BAA4B,MAAM,QAAQ,MAAM;AACrF,QAAM,aAAa,YAAY;AAC/B,SAAO,MAAM,YAAY;AAAA,IACvB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,WAAW,aAAa,WAAW;AAAA,IACnC,UAAU;AAAA,IACV,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,WAAW;AAAA,IACb;AAAA,EACF,CAAC;AACH,CAAC;AAED,IAAM,uBAAuB,OAAO,SAAS;AAAA,EAC3C,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA,EAAmB,CAAC,EAAE,OAAO,yBAAyB,QAAQ,MAC7D,MAAM,YAAY;AAAA,IAChB,gBAAgB;AAAA,IAChB,SAAS,0BAA0B,IAAI;AAAA,EACzC,CAAC;AACH;AAEA,IAAM,8BAA8B,OAAO,aAAa;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,OAAO;AAAA,EACzB,YAAY;AACd,EAAE;AAEF,IAAM,uBAAuB,OAAO,aAAa;AAAA,EAC/C,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC,EAAE,OAAO,4BAA4B,MAAM,QAAQ,MAAM;AAC5E,QAAM,QAAQ,YAAY,eAAe,oBAAoB;AAC7D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;AAUM,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,kBAAe,2BAAsD,SAAkB,SAAmB,GAAG,OAC3G;AAAA,kBACC,oBAAC,wBAAqB,yBAAkD,SACrE,uBACH,IACE;AAAA,IACJ,oBAAC,+BACC,8BAAC,wBAAqB,2BAAsD,SACzE,UACH,GACF;AAAA,KACF;AAEJ;;;ADxCI,SACE,OAAAC,MADF,QAAAC,aAAA;AA9CJ,IAAM,iBAAiBC,QAAOC,cAAa;AAAA,EACzC,MAAM;AAAA,EACN,mBAAmB,CAAC,aAAa,aAAa,+BAA+B,aAAa;AAAA,EAC1F,MAAM;AACR,CAAC,EAAmB,CAAC,EAAE,OAAO,4BAA4B,MAAM,QAAQ,MAAM;AAC5E,QAAM,QAAQ,YAAY,eAAe,iBAAiB;AAC1D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;AAOM,IAAM,aAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,SAAS,IAAI,YAAY;AAEjC;AAAA;AAAA,IAEE,YAAY;AACV,YAAM,YAAY,YAAY,EAAE,MAAM,SAAS,gBAAgB,MAAM,SAAS,SAAS,CAAC;AAAA,IAC1F;AAAA,IACA,CAAC,UAAU,OAAO,UAAU;AAAA,EAC9B;AAEA,SACE,gBAAAF,MAAC,kBAAe,2BAAsD,SAAmB,GAAG,OAC1F;AAAA,oBAAAD,KAAC,UAAO,OAAc;AAAA,IACrB,aAAa,cAAc,SAC1B,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,YAAY,WAAW,SAAS,QAAQ,eAAe,UAAU,UAAU,GAAG,gBAAgB,aAAa;AAAA,QACpH,UAAU;AAAA,QAEV,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF,IAEA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,iBAAiB,IAAI;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;;;ADnFI,gBAAAI,YAAA;AAFG,IAAM,qBAAgD,CAAC,EAAE,OAAO,GAAG,MAAM,MAC9E,gBAAAA,KAAC,cAAW,OAAO,SAAS,yBAA0B,GAAG,OACvD,0BAAAA,KAAC,YAAS,GACZ;AAIK,IAAM,eAAe;","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx"]}

package/dist/browser/components/Page.js

@@ -1,13 +1,106 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Container, styled } from "@mui/material";
+// src/components/Page.tsx
+import { Container, styled as styled2 } from "@mui/material";
 import { useAsyncEffect } from "@xylabs/react-async-effect";
-import { FlexGrowCol } from "@xylabs/react-flexbox";
+import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
 import { useUserEvents } from "@xylabs/react-pixel";
 import { Helmet } from "react-helmet";
 import { useLocation } from "react-router-dom";
-import { WebAppBody } from "./Body";
-import { fixedWrap, scrollableWrap } from "./lib";
-const WebAppPageRoot = styled(FlexGrowCol, {
+
+// src/components/Body.tsx
+import { styled } from "@mui/material";
+import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
+
+// src/components/lib/cssValues.ts
+var scrollableWrap = {
+  inset: 0,
+  position: "absolute"
+};
+var fixedWrap = {
+  inset: "unset",
+  position: "relative"
+};
+var scrollableContent = {
+  ...fixedWrap
+};
+var fixedContent = {
+  ...scrollableWrap
+};
+
+// src/components/Body.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WebAppBodyName = "WebAppBody";
+var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
+var defaultStyledOptions = {
+  shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
+};
+var WebAppBodyRoot = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Root"
+})(({ 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"
+    }
+  });
+});
+var WebAppBodyBreadcrumb = styled(FlexRow, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Breadcrumb"
+})(
+  ({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
+    justifyContent: "start",
+    marginX: disableBreadcrumbGutter ? 0 : spacing
+  })
+);
+var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: "ScrollableWrapper"
+})(() => ({
+  alignItems: "stretch"
+}));
+var WebAppBodyScrollable = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Scrollable"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableContent : fixedContent;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: "unset",
+      position: "relative"
+    }
+  };
+});
+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/Page.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WebAppPageRoot = styled2(FlexGrowCol2, {
   name: "WebAppPage",
   shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
   slot: "Root"
@@ -24,7 +117,7 @@ const WebAppPageRoot = styled(FlexGrowCol, {
     }
   };
 });
-const WebAppPage = ({
+var WebAppPage = ({
   disableGutters,
   disableBreadcrumbGutter,
   title,
@@ -44,15 +137,15 @@ const WebAppPage = ({
     },
     [pathname, title, userEvents]
   );
-  return /* @__PURE__ */ jsxs(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
-    /* @__PURE__ */ jsx(Helmet, { title }),
-    container && container !== "none" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
+    /* @__PURE__ */ jsx2(Helmet, { title }),
+    container && container !== "none" ? /* @__PURE__ */ jsx2(
       Container,
       {
         disableGutters,
         style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
         maxWidth: container,
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx2(
           WebAppBody,
           {
             disableBreadcrumbGutter,
@@ -64,7 +157,7 @@ const WebAppPage = ({
           }
         )
       }
-    ) : /* @__PURE__ */ jsx(
+    ) : /* @__PURE__ */ jsx2(
       WebAppBody,
       {
         disableBreadcrumbGutter,
@@ -78,7 +171,7 @@ const WebAppPage = ({
     )
   ] });
 };
-const FlexPage = WebAppPage;
+var FlexPage = WebAppPage;
 export {
   FlexPage,
   WebAppPage

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Page.tsx"],"sourcesContent":["import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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<WithChildren<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    // eslint-disable-next-line react-hooks/exhaustive-deps\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        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\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        <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"],"mappings":"AAyDI,SACE,KADF;AAzDJ,SAAS,WAA2B,cAAc;AAClD,SAAS,sBAAsB;AAC/B,SAAuB,mBAAmB;AAC1C,SAAS,qBAAqB;AAE9B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAE5B,SAAS,kBAAmC;AAC5C,SAAS,WAAW,sBAAsB;AAE1C,MAAM,iBAAiB,OAAO,aAAa;AAAA,EACzC,MAAM;AAAA,EACN,mBAAmB,CAAC,aAAa,aAAa,+BAA+B,aAAa;AAAA,EAC1F,MAAM;AACR,CAAC,EAAmB,CAAC,EAAE,OAAO,4BAA4B,MAAM,QAAQ,MAAM;AAC5E,QAAM,QAAQ,YAAY,eAAe,iBAAiB;AAC1D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;AAOM,MAAM,aAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,SAAS,IAAI,YAAY;AAEjC;AAAA;AAAA,IAEE,YAAY;AACV,YAAM,YAAY,YAAY,EAAE,MAAM,SAAS,gBAAgB,MAAM,SAAS,SAAS,CAAC;AAAA,IAC1F;AAAA,IACA,CAAC,UAAU,OAAO,UAAU;AAAA,EAC9B;AAEA,SACE,qBAAC,kBAAe,2BAAsD,SAAmB,GAAG,OAC1F;AAAA,wBAAC,UAAO,OAAc;AAAA,IACrB,aAAa,cAAc,SAC1B;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,YAAY,WAAW,SAAS,QAAQ,eAAe,UAAU,UAAU,GAAG,gBAAgB,aAAa;AAAA,QACpH,UAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,iBAAiB,IAAI;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAGO,MAAM,WAAW;","names":[]}
+{"version":3,"sources":["../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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<WithChildren<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    // eslint-disable-next-line react-hooks/exhaustive-deps\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        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\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        <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\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        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { 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 = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol"]}