@xyo-network/react-payload-details 7.5.8 → 7.5.11

package/dist/browser/index.mjs

@@ -1,57 +1,70 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/Details/DataDetails.tsx
 import { ContentCopy as ContentCopyIcon2, Visibility as VisibilityIcon } from "@mui/icons-material";
-import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle
+} from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { forget } from "@xylabs/sdk-js";
 import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/payload-builder";
 import { Property } from "@xyo-network/react-property";
 import { usePayloadHash } from "@xyo-network/react-shared";
-import React2, { useState } from "react";
+import { useState } from "react";
 
 // src/components/Details/HashSourceDetails.tsx
 import { ContentCopy as ContentCopyIcon } from "@mui/icons-material";
-import { IconButton, Typography, useTheme } from "@mui/material";
-import { FlexCol, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import {
+  IconButton,
+  Typography,
+  useTheme
+} from "@mui/material";
+import {
+  FlexCol,
+  FlexGrowRow,
+  FlexRow
+} from "@xylabs/react-flexbox";
 import { QuickTipButton } from "@xylabs/react-quick-tip-button";
 import { PayloadBuilder } from "@xyo-network/payload-builder";
-import React from "react";
-var PayloadHashSourceDetails = /* @__PURE__ */ __name(({ noTitle = false, payload, ...props }) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+var PayloadHashSourceDetails = ({
+  noTitle = false,
+  payload,
+  ...props
+}) => {
   const theme = useTheme();
   const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : "";
-  return /* @__PURE__ */ React.createElement(FlexCol, {
-    alignItems: "stretch",
-    ...props
-  }, noTitle ? null : /* @__PURE__ */ React.createElement(FlexRow, {
-    margin: 1,
-    justifyContent: "flex-start"
-  }, /* @__PURE__ */ React.createElement(Typography, null, "Hash Source"), /* @__PURE__ */ React.createElement(QuickTipButton, {
-    title: "Hash Source"
-  }, "The actual string used to generate the hash (SHA256)")), /* @__PURE__ */ React.createElement(FlexRow, null, /* @__PURE__ */ React.createElement(FlexGrowRow, {
-    background: true,
-    border: 1,
-    borderColor: theme.vars.palette.divider,
-    justifyContent: "start"
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    padding: 2,
-    fontFamily: "monospace",
-    variant: "body1",
-    sx: {
-      overflowWrap: "break-word",
-      wordBreak: "break-all"
-    }
-  }, payloadString)), /* @__PURE__ */ React.createElement(IconButton, null, /* @__PURE__ */ React.createElement(ContentCopyIcon, null))), noTitle ? /* @__PURE__ */ React.createElement(FlexRow, {
-    margin: 1,
-    justifyContent: "flex-start"
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "body2"
-  }, "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.")) : null);
-}, "PayloadHashSourceDetails");
+  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", ...props, children: [
+    noTitle ? null : /* @__PURE__ */ jsxs(FlexRow, { margin: 1, justifyContent: "flex-start", children: [
+      /* @__PURE__ */ jsx(Typography, { children: "Hash Source" }),
+      /* @__PURE__ */ jsx(QuickTipButton, { title: "Hash Source", children: "The actual string used to generate the hash (SHA256)" })
+    ] }),
+    /* @__PURE__ */ jsxs(FlexRow, { children: [
+      /* @__PURE__ */ jsx(FlexGrowRow, { background: true, border: 1, borderColor: theme.vars.palette.divider, justifyContent: "start", children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          padding: 2,
+          fontFamily: "monospace",
+          variant: "body1",
+          sx: { overflowWrap: "break-word", wordBreak: "break-all" },
+          children: payloadString
+        }
+      ) }),
+      /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(ContentCopyIcon, {}) })
+    ] }),
+    noTitle ? /* @__PURE__ */ jsx(FlexRow, { margin: 1, justifyContent: "flex-start", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." }) }) : null
+  ] });
+};
 
 // src/components/Details/DataDetails.tsx
-var PayloadDataDetails = /* @__PURE__ */ __name(({ size, badge, payload, ...props }) => {
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PayloadDataDetails = ({
+  size,
+  badge,
+  payload,
+  ...props
+}) => {
   const payloadString = payload ? JSON.stringify(PayloadBuilder2.hashableFields(payload), null, 2) : "";
   const [viewSourceOpen, setViewSourceOpen] = useState(false);
   const hash = usePayloadHash(payload);
@@ -61,87 +74,91 @@ var PayloadDataDetails = /* @__PURE__ */ __name(({ size, badge, payload, ...prop
   }
   const actions = [
     {
-      icon: /* @__PURE__ */ React2.createElement(VisibilityIcon, null),
+      icon: /* @__PURE__ */ jsx2(VisibilityIcon, {}),
       name: "View",
-      onClick: /* @__PURE__ */ __name(() => setViewSourceOpen(true), "onClick")
+      onClick: () => setViewSourceOpen(true)
     },
     {
-      icon: /* @__PURE__ */ React2.createElement(ContentCopyIcon2, null),
+      icon: /* @__PURE__ */ jsx2(ContentCopyIcon2, {}),
       name: "Copy",
-      onClick: /* @__PURE__ */ __name(() => forget(navigator.clipboard.writeText(hash ?? "")), "onClick")
+      onClick: () => forget(navigator.clipboard.writeText(hash ?? ""))
     }
   ];
-  const onCopy = /* @__PURE__ */ __name(() => {
+  const onCopy = () => {
     forget(navigator.clipboard.writeText(payloadString));
-  }, "onCopy");
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Property, {
-    titleProps: {
-      elevation
-    },
-    badge,
-    size,
-    actions,
-    title: "Payload Hash",
-    value: hash ?? "<Unknown>",
-    tip: "This is the payload hash",
-    ...props
-  }), /* @__PURE__ */ React2.createElement(Dialog, {
-    open: viewSourceOpen,
-    onClose: /* @__PURE__ */ __name(() => setViewSourceOpen(false), "onClose")
-  }, /* @__PURE__ */ React2.createElement(DialogTitle, null, "Hash Source"), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(PayloadHashSourceDetails, {
-    noTitle: true,
-    payload
-  })), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(ButtonEx, {
-    color: "secondary",
-    onClick: onCopy
-  }, "Copy"), /* @__PURE__ */ React2.createElement(ButtonEx, {
-    color: "secondary",
-    onClick: /* @__PURE__ */ __name(() => setViewSourceOpen(false), "onClick")
-  }, "Close"))));
-}, "PayloadDataDetails");
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      Property,
+      {
+        titleProps: { elevation },
+        badge,
+        size,
+        actions,
+        title: "Payload Hash",
+        value: hash ?? "<Unknown>",
+        tip: "This is the payload hash",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Dialog, { open: viewSourceOpen, onClose: () => setViewSourceOpen(false), children: [
+      /* @__PURE__ */ jsx2(DialogTitle, { children: "Hash Source" }),
+      /* @__PURE__ */ jsx2(DialogContent, { children: /* @__PURE__ */ jsx2(PayloadHashSourceDetails, { noTitle: true, payload }) }),
+      /* @__PURE__ */ jsxs2(DialogActions, { children: [
+        /* @__PURE__ */ jsx2(ButtonEx, { color: "secondary", onClick: onCopy, children: "Copy" }),
+        /* @__PURE__ */ jsx2(ButtonEx, { color: "secondary", onClick: () => setViewSourceOpen(false), children: "Close" })
+      ] })
+    ] })
+  ] });
+};
 
 // src/components/Details/Details.tsx
 import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
-import React5 from "react";
 
 // src/components/Details/JsonDetails.tsx
-import { Paper, useMediaQuery, useTheme as useTheme2 } from "@mui/material";
+import {
+  Paper,
+  useMediaQuery,
+  useTheme as useTheme2
+} from "@mui/material";
 import { JsonViewerEx } from "@xyo-network/react-payload-raw-info";
 import { PropertyGroup } from "@xyo-network/react-property";
-import React3 from "react";
-var PayloadJsonDetails = /* @__PURE__ */ __name(({ jsonViewProps, payload, ...props }) => {
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PayloadJsonDetails = ({
+  jsonViewProps,
+  payload,
+  ...props
+}) => {
   const { breakpoints } = useTheme2();
   const belowSm = useMediaQuery(breakpoints.down("sm"));
   let elevation = 2;
   if (props.paper) {
     elevation += props.elevation ?? 0;
   }
-  return /* @__PURE__ */ React3.createElement(PropertyGroup, {
-    titleProps: {
-      elevation
-    },
-    title: "JSON",
-    tip: "The raw JSON of the payload",
-    ...props
-  }, /* @__PURE__ */ React3.createElement(Paper, {
-    square: true,
-    variant: "elevation",
-    style: {
-      overflow: "hidden",
-      padding: "16px",
-      width: "100%"
+  return /* @__PURE__ */ jsx3(PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: /* @__PURE__ */ jsx3(
+    Paper,
+    {
+      square: true,
+      variant: "elevation",
+      style: {
+        overflow: "hidden",
+        padding: "16px",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx3(
+        JsonViewerEx,
+        {
+          groupArraysAfterLength: 20,
+          style: { overflow: "hidden" },
+          value: payload,
+          enableClipboard: true,
+          collapseStringsAfterLength: belowSm ? 24 : 32,
+          ...jsonViewProps
+        }
+      )
     }
-  }, /* @__PURE__ */ React3.createElement(JsonViewerEx, {
-    groupArraysAfterLength: 20,
-    style: {
-      overflow: "hidden"
-    },
-    value: payload,
-    enableClipboard: true,
-    collapseStringsAfterLength: belowSm ? 24 : 32,
-    ...jsonViewProps
-  })));
-}, "PayloadJsonDetails");
+  ) });
+};
 
 // src/components/Details/ValidationDetails/ValidationDetails.tsx
 import { Typography as Typography2 } from "@mui/material";
@@ -150,69 +167,49 @@ import { usePromise } from "@xylabs/react-promise";
 import { PayloadValidator } from "@xyo-network/payload-validator";
 import { Property as Property2, PropertyGroup as PropertyGroup2 } from "@xyo-network/react-property";
 import { SchemaProperty } from "@xyo-network/react-schema";
-import React4 from "react";
-var PayloadValidationDetails = /* @__PURE__ */ __name(({ skipBody = false, value, ...props }) => {
-  const [validateErrors] = usePromise(async () => value ? await new PayloadValidator(value).validate() : void 0, [
-    value
-  ]);
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var PayloadValidationDetails = ({
+  skipBody = false,
+  value,
+  ...props
+}) => {
+  const [validateErrors] = usePromise(async () => value ? await new PayloadValidator(value).validate() : void 0, [value]);
   const bodyErrors = skipBody ? [] : validateErrors ?? [];
-  const errors = [
-    ...bodyErrors
-  ];
+  const errors = [...bodyErrors];
   let elevation = 2;
   if (props.paper) {
     elevation += props.elevation ?? 0;
   }
-  return /* @__PURE__ */ React4.createElement(PropertyGroup2, {
-    titleProps: {
-      elevation
-    },
-    title: "Validation",
-    tip: "The results from validating the payload",
-    ...props
-  }, /* @__PURE__ */ React4.createElement(Property2, {
-    titleProps: {
-      elevation
-    },
-    flexGrow: 1,
-    title: "Valid",
-    value: errors.length === 0 ? "True" : "False",
-    tip: errors.length > 0 ? /* @__PURE__ */ React4.createElement(FlexCol2, null, errors.map((error, index) => {
-      return /* @__PURE__ */ React4.createElement(Typography2, {
-        key: index
-      }, error.toString());
-    })) : /* @__PURE__ */ React4.createElement(Typography2, null, "No Errors")
-  }), value?.schema && /* @__PURE__ */ React4.createElement(SchemaProperty, {
-    flexGrow: 1,
-    titleProps: {
-      elevation
-    },
-    value: value.schema
-  }));
-}, "PayloadValidationDetails");
+  return /* @__PURE__ */ jsxs3(PropertyGroup2, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
+    /* @__PURE__ */ jsx4(
+      Property2,
+      {
+        titleProps: { elevation },
+        flexGrow: 1,
+        title: "Valid",
+        value: errors.length === 0 ? "True" : "False",
+        tip: errors.length > 0 ? /* @__PURE__ */ jsx4(FlexCol2, { children: errors.map((error) => {
+          return /* @__PURE__ */ jsx4(Typography2, { children: error.toString() }, error.message);
+        }) }) : /* @__PURE__ */ jsx4(Typography2, { children: "No Errors" })
+      }
+    ),
+    value?.schema && /* @__PURE__ */ jsx4(SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+  ] });
+};
 
 // src/components/Details/Details.tsx
-var PayloadDetails = /* @__PURE__ */ __name(({ paper, payload, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(FlexCol3, {
-    gap: 1,
-    justifyContent: "flex-start",
-    alignItems: "stretch",
-    marginTop: 2,
-    marginBottom: 8,
-    ...props
-  }, /* @__PURE__ */ React5.createElement(PayloadDataDetails, {
-    paper,
-    size: "large",
-    badge: true,
-    payload
-  }), /* @__PURE__ */ React5.createElement(PayloadValidationDetails, {
-    paper,
-    value: payload
-  }), /* @__PURE__ */ React5.createElement(PayloadJsonDetails, {
-    paper,
-    payload
-  }));
-}, "PayloadDetails");
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var PayloadDetails = ({
+  paper,
+  payload,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs4(FlexCol3, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ...props, children: [
+    /* @__PURE__ */ jsx5(PayloadDataDetails, { paper, size: "large", badge: true, payload }),
+    /* @__PURE__ */ jsx5(PayloadValidationDetails, { paper, value: payload }),
+    /* @__PURE__ */ jsx5(PayloadJsonDetails, { paper, payload })
+  ] });
+};
 PayloadDetails.displayName = "PayloadDetails";
 export {
   PayloadDataDetails,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Details/DataDetails.tsx","../../src/components/Details/HashSourceDetails.tsx","../../src/components/Details/Details.tsx","../../src/components/Details/JsonDetails.tsx","../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'\nimport {\n  Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { forget } from '@xylabs/sdk-js'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { Property } from '@xyo-network/react-property'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport React, { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails.tsx'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({\n  size, badge, payload, ...props\n}) => {\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: () => forget(navigator.clipboard.writeText(hash ?? '')),\n    },\n  ]\n\n  const onCopy = () => {\n    forget(navigator.clipboard.writeText(payloadString))\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx color=\"secondary\" onClick={onCopy}>\n            Copy\n          </ButtonEx>\n          <ButtonEx color=\"secondary\" onClick={() => setViewSourceOpen(false)}>\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n","import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport {\n  IconButton, Typography, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({\n  noTitle = false, payload, ...props\n}) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle\n        ? null\n        : (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography>Hash Source</Typography>\n              <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n            </FlexRow>\n          )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.vars.palette.divider} justifyContent=\"start\">\n          <Typography\n            padding={2}\n            fontFamily=\"monospace\"\n            variant=\"body1\"\n            sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}\n          >\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle\n        ? (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography variant=\"body2\">\n                The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n              </Typography>\n            </FlexRow>\n          )\n        : null}\n    </FlexCol>\n  )\n}\n","import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nimport { PayloadDataDetails } from './DataDetails.tsx'\nimport { PayloadJsonDetails } from './JsonDetails.tsx'\nimport { PayloadValidationDetails } from './ValidationDetails/index.ts'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails: React.FC<PayloadDetailsProps> = ({\n  paper, payload, ...props\n}) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n}\n\nPayloadDetails.displayName = 'PayloadDetails'\n","import {\n  Paper, useMediaQuery, useTheme,\n} from '@mui/material'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { JsonViewerExProps } from '@xyo-network/react-payload-raw-info'\nimport { JsonViewerEx } from '@xyo-network/react-payload-raw-info'\nimport type { PropertyGroupProps } from '@xyo-network/react-property'\nimport { PropertyGroup } from '@xyo-network/react-property'\nimport React from 'react'\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: JsonViewerExProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({\n  jsonViewProps, payload, ...props\n}) => {\n  const { breakpoints } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper\n        square\n        variant=\"elevation\"\n        style={{\n          overflow: 'hidden', padding: '16px', width: '100%',\n        }}\n      >\n        <JsonViewerEx\n          groupArraysAfterLength={20}\n          style={{ overflow: 'hidden' }}\n          value={payload}\n          enableClipboard\n          collapseStringsAfterLength={belowSm ? 24 : 32}\n          {...jsonViewProps}\n        />\n      </Paper>\n    </PropertyGroup>\n  )\n}\n","import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { Property, PropertyGroup } from '@xyo-network/react-property'\nimport { SchemaProperty } from '@xyo-network/react-schema'\nimport React from 'react'\n\nimport type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({\n  skipBody = false, value, ...props\n}) => {\n  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])\n\n  const bodyErrors = skipBody ? [] : (validateErrors ?? [])\n  const errors: Error[] = [...bodyErrors]\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"Validation\" tip=\"The results from validating the payload\" {...props}>\n      <Property\n        titleProps={{ elevation }}\n        flexGrow={1}\n        title=\"Valid\"\n        value={errors.length === 0 ? 'True' : 'False'}\n        tip={\n          errors.length > 0\n            ? (\n                <FlexCol>\n                  {errors.map((error, index) => {\n                    return <Typography key={index}>{error.toString()}</Typography>\n                  })}\n                </FlexCol>\n              )\n            : <Typography>No Errors</Typography>\n        }\n      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":";;;;AAAA,SAASA,eAAeC,kBAAiBC,cAAcC,sBAAsB;AAC7E,SACEC,QAAQC,eAAeC,eAAeC,mBACjC;AACP,SAASC,gBAAgB;AACzB,SAASC,cAAc;AACvB,SAASC,kBAAAA,uBAAsB;AAG/B,SAASC,gBAAgB;AAEzB,SAASC,sBAAsB;AAC/B,OAAOC,UAASC,gBAAgB;;;ACZhC,SAASC,eAAeC,uBAAuB;AAC/C,SACEC,YAAYC,YAAYC,gBACnB;AAEP,SACEC,SAASC,aAAaC,eACjB;AACP,SAASC,sBAAsB;AAC/B,SAASC,sBAAsB;AAE/B,OAAOC,WAAW;AAOX,IAAMC,2BAAoE,wBAAC,EAChFC,UAAU,OAAOC,SAAS,GAAGC,MAAAA,MAC9B;AACC,QAAMC,QAAQC,SAAAA;AACd,QAAMC,gBAAgBJ,UAAUK,KAAKC,UAAUC,eAAeC,eAAeR,OAAAA,GAAU,MAAM,CAAA,IAAK;AAElG,SACE,sBAAA,cAACS,SAAAA;IAAQC,YAAW;IAAW,GAAGT;KAC/BF,UACG,OAEE,sBAAA,cAACY,SAAAA;IAAQC,QAAQ;IAAGC,gBAAe;KACjC,sBAAA,cAACC,YAAAA,MAAW,aAAA,GACZ,sBAAA,cAACC,gBAAAA;IAAeC,OAAM;KAAc,sDAAA,CAAA,GAG5C,sBAAA,cAACL,SAAAA,MACC,sBAAA,cAACM,aAAAA;IAAYC,YAAAA;IAAWC,QAAQ;IAAGC,aAAalB,MAAMmB,KAAKC,QAAQC;IAASV,gBAAe;KACzF,sBAAA,cAACC,YAAAA;IACCU,SAAS;IACTC,YAAW;IACXC,SAAQ;IACRC,IAAI;MAAEC,cAAc;MAAcC,WAAW;IAAY;KAExDzB,aAAAA,CAAAA,GAGL,sBAAA,cAAC0B,YAAAA,MACC,sBAAA,cAACC,iBAAAA,IAAAA,CAAAA,CAAAA,GAGJhC,UAEK,sBAAA,cAACY,SAAAA;IAAQC,QAAQ;IAAGC,gBAAe;KACjC,sBAAA,cAACC,YAAAA;IAAWY,SAAQ;KAAQ,uGAAA,CAAA,IAKhC,IAAA;AAGV,GA1CiF;;;ADI1E,IAAMM,qBAAwD,wBAAC,EACpEC,MAAMC,OAAOC,SAAS,GAAGC,MAAAA,MAC1B;AACC,QAAMC,gBAAgBF,UAAUG,KAAKC,UAAUC,gBAAeC,eAAeN,OAAAA,GAAU,MAAM,CAAA,IAAK;AAElG,QAAM,CAACO,gBAAgBC,iBAAAA,IAAqBC,SAAS,KAAA;AACrD,QAAMC,OAAOC,eAAeX,OAAAA;AAE5B,MAAIY,YAAY;AAChB,MAAIX,MAAMY,OAAO;AACfD,iBAAaX,MAAMW,aAAa;EAClC;AAEA,QAAME,UAA4B;IAChC;MACEC,MAAM,gBAAAC,OAAA,cAACC,gBAAAA,IAAAA;MACPC,MAAM;MACNC,SAAS,6BAAMX,kBAAkB,IAAA,GAAxB;IACX;IACA;MACEO,MAAM,gBAAAC,OAAA,cAACI,kBAAAA,IAAAA;MACPF,MAAM;MACNC,SAAS,6BAAME,OAAOC,UAAUC,UAAUC,UAAUd,QAAQ,EAAA,CAAA,GAAnD;IACX;;AAGF,QAAMe,SAAS,6BAAA;AACbJ,WAAOC,UAAUC,UAAUC,UAAUtB,aAAAA,CAAAA;EACvC,GAFe;AAIf,SACE,gBAAAc,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACU,UAAAA;IACCC,YAAY;MAAEf;IAAU;IACxBb;IACAD;IACAgB;IACAc,OAAM;IACNC,OAAOnB,QAAQ;IACfoB,KAAI;IACH,GAAG7B;MAEN,gBAAAe,OAAA,cAACe,QAAAA;IAAOC,MAAMzB;IAAgB0B,SAAS,6BAAMzB,kBAAkB,KAAA,GAAxB;KACrC,gBAAAQ,OAAA,cAACkB,aAAAA,MAAY,aAAA,GACb,gBAAAlB,OAAA,cAACmB,eAAAA,MACC,gBAAAnB,OAAA,cAACoB,0BAAAA;IAAyBC,SAAAA;IAAQrC;OAEpC,gBAAAgB,OAAA,cAACsB,eAAAA,MACC,gBAAAtB,OAAA,cAACuB,UAAAA;IAASC,OAAM;IAAYrB,SAASM;KAAQ,MAAA,GAG7C,gBAAAT,OAAA,cAACuB,UAAAA;IAASC,OAAM;IAAYrB,SAAS,6BAAMX,kBAAkB,KAAA,GAAxB;KAAgC,OAAA,CAAA,CAAA,CAAA;AAO/E,GA1DqE;;;AErBrE,SAASiC,WAAAA,gBAAe;AAExB,OAAOC,YAAW;;;ACHlB,SACEC,OAAOC,eAAeC,YAAAA,iBACjB;AAGP,SAASC,oBAAoB;AAE7B,SAASC,qBAAqB;AAC9B,OAAOC,YAAW;AAOX,IAAMC,qBAAwD,wBAAC,EACpEC,eAAeC,SAAS,GAAGC,MAAAA,MAC5B;AACC,QAAM,EAAEC,YAAW,IAAKC,UAAAA;AACxB,QAAMC,UAAUC,cAAcH,YAAYI,KAAK,IAAA,CAAA;AAE/C,MAAIC,YAAY;AAChB,MAAIN,MAAMO,OAAO;AACfD,iBAAaN,MAAMM,aAAa;EAClC;AAEA,SACE,gBAAAE,OAAA,cAACC,eAAAA;IAAcC,YAAY;MAAEJ;IAAU;IAAGK,OAAM;IAAOC,KAAI;IAA+B,GAAGZ;KAC3F,gBAAAQ,OAAA,cAACK,OAAAA;IACCC,QAAAA;IACAC,SAAQ;IACRC,OAAO;MACLC,UAAU;MAAUC,SAAS;MAAQC,OAAO;IAC9C;KAEA,gBAAAX,OAAA,cAACY,cAAAA;IACCC,wBAAwB;IACxBL,OAAO;MAAEC,UAAU;IAAS;IAC5BK,OAAOvB;IACPwB,iBAAAA;IACAC,4BAA4BrB,UAAU,KAAK;IAC1C,GAAGL;;AAKd,GA/BqE;;;ACfrE,SAAS2B,cAAAA,mBAAkB;AAC3B,SAASC,WAAAA,gBAAe;AACxB,SAASC,kBAAkB;AAC3B,SAASC,wBAAwB;AACjC,SAASC,YAAAA,WAAUC,iBAAAA,sBAAqB;AACxC,SAASC,sBAAsB;AAC/B,OAAOC,YAAW;AAIX,IAAMC,2BAAoE,wBAAC,EAChFC,WAAW,OAAOC,OAAO,GAAGC,MAAAA,MAC7B;AACC,QAAM,CAACC,cAAAA,IAAkBC,WAAW,YAAaH,QAAQ,MAAM,IAAII,iBAAiBJ,KAAAA,EAAOK,SAAQ,IAAKC,QAAY;IAACN;GAAM;AAE3H,QAAMO,aAAaR,WAAW,CAAA,IAAMG,kBAAkB,CAAA;AACtD,QAAMM,SAAkB;OAAID;;AAE5B,MAAIE,YAAY;AAChB,MAAIR,MAAMS,OAAO;AACfD,iBAAaR,MAAMQ,aAAa;EAClC;AAEA,SACE,gBAAAE,OAAA,cAACC,gBAAAA;IAAcC,YAAY;MAAEJ;IAAU;IAAGK,OAAM;IAAaC,KAAI;IAA2C,GAAGd;KAC7G,gBAAAU,OAAA,cAACK,WAAAA;IACCH,YAAY;MAAEJ;IAAU;IACxBQ,UAAU;IACVH,OAAM;IACNd,OAAOQ,OAAOU,WAAW,IAAI,SAAS;IACtCH,KACEP,OAAOU,SAAS,IAEV,gBAAAP,OAAA,cAACQ,UAAAA,MACEX,OAAOY,IAAI,CAACC,OAAOC,UAAAA;AAClB,aAAO,gBAAAX,OAAA,cAACY,aAAAA;QAAWC,KAAKF;SAAQD,MAAMI,SAAQ,CAAA;IAChD,CAAA,CAAA,IAGJ,gBAAAd,OAAA,cAACY,aAAAA,MAAW,WAAA;MAGnBvB,OAAO0B,UAAU,gBAAAf,OAAA,cAACgB,gBAAAA;IAAeV,UAAU;IAAGJ,YAAY;MAAEJ;IAAU;IAAGT,OAAOA,MAAM0B;;AAG7F,GAnCiF;;;AFO1E,IAAME,iBAAgD,wBAAC,EAC5DC,OAAOC,SAAS,GAAGC,MAAAA,MACpB;AACC,SACE,gBAAAC,OAAA,cAACC,UAAAA;IAAQC,KAAK;IAAGC,gBAAe;IAAaC,YAAW;IAAUC,WAAW;IAAGC,cAAc;IAAI,GAAGP;KACnG,gBAAAC,OAAA,cAACO,oBAAAA;IAAmBV;IAAcW,MAAK;IAAQC,OAAAA;IAAMX;MACrD,gBAAAE,OAAA,cAACU,0BAAAA;IAAyBb;IAAcc,OAAOb;MAC/C,gBAAAE,OAAA,cAACY,oBAAAA;IAAmBf;IAAcC;;AAGxC,GAV6D;AAY7DF,eAAeiB,cAAc;","names":["ContentCopy","ContentCopyIcon","Visibility","VisibilityIcon","Dialog","DialogActions","DialogContent","DialogTitle","ButtonEx","forget","PayloadBuilder","Property","usePayloadHash","React","useState","ContentCopy","ContentCopyIcon","IconButton","Typography","useTheme","FlexCol","FlexGrowRow","FlexRow","QuickTipButton","PayloadBuilder","React","PayloadHashSourceDetails","noTitle","payload","props","theme","useTheme","payloadString","JSON","stringify","PayloadBuilder","hashableFields","FlexCol","alignItems","FlexRow","margin","justifyContent","Typography","QuickTipButton","title","FlexGrowRow","background","border","borderColor","vars","palette","divider","padding","fontFamily","variant","sx","overflowWrap","wordBreak","IconButton","ContentCopyIcon","PayloadDataDetails","size","badge","payload","props","payloadString","JSON","stringify","PayloadBuilder","hashableFields","viewSourceOpen","setViewSourceOpen","useState","hash","usePayloadHash","elevation","paper","actions","icon","React","VisibilityIcon","name","onClick","ContentCopyIcon","forget","navigator","clipboard","writeText","onCopy","Property","titleProps","title","value","tip","Dialog","open","onClose","DialogTitle","DialogContent","PayloadHashSourceDetails","noTitle","DialogActions","ButtonEx","color","FlexCol","React","Paper","useMediaQuery","useTheme","JsonViewerEx","PropertyGroup","React","PayloadJsonDetails","jsonViewProps","payload","props","breakpoints","useTheme","belowSm","useMediaQuery","down","elevation","paper","React","PropertyGroup","titleProps","title","tip","Paper","square","variant","style","overflow","padding","width","JsonViewerEx","groupArraysAfterLength","value","enableClipboard","collapseStringsAfterLength","Typography","FlexCol","usePromise","PayloadValidator","Property","PropertyGroup","SchemaProperty","React","PayloadValidationDetails","skipBody","value","props","validateErrors","usePromise","PayloadValidator","validate","undefined","bodyErrors","errors","elevation","paper","React","PropertyGroup","titleProps","title","tip","Property","flexGrow","length","FlexCol","map","error","index","Typography","key","toString","schema","SchemaProperty","PayloadDetails","paper","payload","props","React","FlexCol","gap","justifyContent","alignItems","marginTop","marginBottom","PayloadDataDetails","size","badge","PayloadValidationDetails","value","PayloadJsonDetails","displayName"]}
+{"version":3,"sources":["../../src/components/Details/DataDetails.tsx","../../src/components/Details/HashSourceDetails.tsx","../../src/components/Details/Details.tsx","../../src/components/Details/JsonDetails.tsx","../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'\nimport {\n  Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { forget } from '@xylabs/sdk-js'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { Property } from '@xyo-network/react-property'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport React, { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails.tsx'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({\n  size, badge, payload, ...props\n}) => {\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: () => forget(navigator.clipboard.writeText(hash ?? '')),\n    },\n  ]\n\n  const onCopy = () => {\n    forget(navigator.clipboard.writeText(payloadString))\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx color=\"secondary\" onClick={onCopy}>\n            Copy\n          </ButtonEx>\n          <ButtonEx color=\"secondary\" onClick={() => setViewSourceOpen(false)}>\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n","import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport {\n  IconButton, Typography, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({\n  noTitle = false, payload, ...props\n}) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle\n        ? null\n        : (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography>Hash Source</Typography>\n              <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n            </FlexRow>\n          )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.vars.palette.divider} justifyContent=\"start\">\n          <Typography\n            padding={2}\n            fontFamily=\"monospace\"\n            variant=\"body1\"\n            sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}\n          >\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle\n        ? (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography variant=\"body2\">\n                The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n              </Typography>\n            </FlexRow>\n          )\n        : null}\n    </FlexCol>\n  )\n}\n","import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nimport { PayloadDataDetails } from './DataDetails.tsx'\nimport { PayloadJsonDetails } from './JsonDetails.tsx'\nimport { PayloadValidationDetails } from './ValidationDetails/index.ts'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails: React.FC<PayloadDetailsProps> = ({\n  paper, payload, ...props\n}) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n}\n\nPayloadDetails.displayName = 'PayloadDetails'\n","import {\n  Paper, useMediaQuery, useTheme,\n} from '@mui/material'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { JsonViewerExProps } from '@xyo-network/react-payload-raw-info'\nimport { JsonViewerEx } from '@xyo-network/react-payload-raw-info'\nimport type { PropertyGroupProps } from '@xyo-network/react-property'\nimport { PropertyGroup } from '@xyo-network/react-property'\nimport React from 'react'\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: JsonViewerExProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({\n  jsonViewProps, payload, ...props\n}) => {\n  const { breakpoints } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper\n        square\n        variant=\"elevation\"\n        style={{\n          overflow: 'hidden', padding: '16px', width: '100%',\n        }}\n      >\n        <JsonViewerEx\n          groupArraysAfterLength={20}\n          style={{ overflow: 'hidden' }}\n          value={payload}\n          enableClipboard\n          collapseStringsAfterLength={belowSm ? 24 : 32}\n          {...jsonViewProps}\n        />\n      </Paper>\n    </PropertyGroup>\n  )\n}\n","import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { Property, PropertyGroup } from '@xyo-network/react-property'\nimport { SchemaProperty } from '@xyo-network/react-schema'\nimport React from 'react'\n\nimport type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({\n  skipBody = false, value, ...props\n}) => {\n  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])\n\n  const bodyErrors = skipBody ? [] : (validateErrors ?? [])\n  const errors: Error[] = [...bodyErrors]\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"Validation\" tip=\"The results from validating the payload\" {...props}>\n      <Property\n        titleProps={{ elevation }}\n        flexGrow={1}\n        title=\"Valid\"\n        value={errors.length === 0 ? 'True' : 'False'}\n        tip={\n          errors.length > 0\n            ? (\n                <FlexCol>\n                  {errors.map((error) => {\n                    return <Typography key={error.message}>{error.toString()}</Typography>\n                  })}\n                </FlexCol>\n              )\n            : <Typography>No Errors</Typography>\n        }\n      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":"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","names":["ContentCopyIcon","PayloadBuilder","jsx","jsxs","PayloadBuilder","ContentCopyIcon","FlexCol","useTheme","jsx","Typography","FlexCol","Property","PropertyGroup","jsx","jsxs","jsx","jsxs","FlexCol"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-payload-details",
-  "version": "7.5.8",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,66 +36,173 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-promise": "~7.1.17",
-    "@xylabs/react-quick-tip-button": "~7.1.17",
-    "@xylabs/sdk-js": "~5.0.90",
-    "@xyo-network/payload-builder": "~5.3.17",
-    "@xyo-network/payload-model": "~5.3.17",
-    "@xyo-network/payload-validator": "~5.3.17",
-    "@xyo-network/react-payload-raw-info": "7.5.8",
-    "@xyo-network/react-property": "7.5.8",
-    "@xyo-network/react-schema": "7.5.8",
-    "@xyo-network/react-shared": "7.5.8"
+    "@xyo-network/react-payload-raw-info": "~7.5.11",
+    "@xyo-network/react-shared": "~7.5.11",
+    "@xyo-network/react-schema": "~7.5.11",
+    "@xyo-network/react-property": "~7.5.11"
   },
   "devDependencies": {
-    "@emotion/react": "~11.14.0",
-    "@emotion/styled": "~11.14.1",
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@bitauth/libauth": "~3.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@mui/system": "^7.3.10",
+    "@mui/x-tree-view": "~8.27.2",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@textea/json-viewer": "~4.0.1",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@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",
-    "@xyo-network/react-storybook": "7.5.8",
+    "@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-identicon": "~7.1.20",
+    "@xylabs/react-link": "~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/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/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/diviner-model": "^5.5.5",
+    "@xyo-network/diviner-schema-list-model": "~5.5.2",
+    "@xyo-network/diviner-schema-stats-model": "~5.5.2",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-abstract": "^5.5.5",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/node-core-types": "~4.1.10",
+    "@xyo-network/node-memory": "~5.5.5",
+    "@xyo-network/node-model": "^5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/payload-validator": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/schema-cache": "~5.5.1",
+    "@xyo-network/schema-payload-plugin": "~5.5.1",
+    "@xyo-network/typeof": "~5.3.30",
+    "@xyo-network/wallet-model": "^5.5.1",
     "ajv": "^8.18.0",
-    "axios": "^1.14.0",
+    "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",
-    "lru-cache": "^11.2.7",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "fast-deep-equal": "~3.1.3",
+    "hash-wasm": "~4.12.0",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^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",
-    "zod": "^4.3.6"
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
+    "zod": "^4.3.6",
+    "@xyo-network/react-storybook": "~7.5.11"
   },
   "peerDependencies": {
-    "@emotion/react": "~11",
-    "@emotion/styled": "~11",
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "ajv": "~8",
-    "axios": "~1",
-    "ethers": "~6",
-    "lru-cache": "~11",
-    "react": "^19",
-    "react-dom": "^19",
-    "zod": "^4"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@mui/system": "^7.3.10",
+    "@mui/x-tree-view": "~8.27.2",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@textea/json-viewer": "~4.0.1",
+    "@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-identicon": "~7.1.20",
+    "@xylabs/react-link": "~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/sdk-js": "^5.0.100",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/diviner-model": "^5.5.5",
+    "@xyo-network/diviner-schema-list-model": "~5.5.2",
+    "@xyo-network/diviner-schema-stats-model": "~5.5.2",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-abstract": "^5.5.5",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/node-core-types": "~4.1.10",
+    "@xyo-network/node-memory": "~5.5.5",
+    "@xyo-network/node-model": "^5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/payload-validator": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/schema-cache": "~5.5.1",
+    "@xyo-network/schema-payload-plugin": "~5.5.1",
+    "@xyo-network/typeof": "~5.3.30",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "ajv": "^8.18.0",
+    "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",
+    "lru-cache": "^11.3.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^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/Details/DataDetails.tsx

@@ -1,81 +0,0 @@
-import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'
-import {
-  Dialog, DialogActions, DialogContent, DialogTitle,
-} from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import { forget } from '@xylabs/sdk-js'
-import { PayloadBuilder } from '@xyo-network/payload-builder'
-import type { Payload } from '@xyo-network/payload-model'
-import type { PropertyAction, PropertyProps } from '@xyo-network/react-property'
-import { Property } from '@xyo-network/react-property'
-import type { SizeProp } from '@xyo-network/react-shared'
-import { usePayloadHash } from '@xyo-network/react-shared'
-import React, { useState } from 'react'
-
-import { PayloadHashSourceDetails } from './HashSourceDetails.tsx'
-
-export type PayloadDataDetailsProps = PropertyProps & {
-  badge?: boolean
-  payload?: Payload
-  size?: SizeProp
-}
-
-export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({
-  size, badge, payload, ...props
-}) => {
-  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''
-
-  const [viewSourceOpen, setViewSourceOpen] = useState(false)
-  const hash = usePayloadHash(payload)
-
-  let elevation = 2
-  if (props.paper) {
-    elevation += props.elevation ?? 0
-  }
-
-  const actions: PropertyAction[] = [
-    {
-      icon: <VisibilityIcon />,
-      name: 'View',
-      onClick: () => setViewSourceOpen(true),
-    },
-    {
-      icon: <ContentCopyIcon />,
-      name: 'Copy',
-      onClick: () => forget(navigator.clipboard.writeText(hash ?? '')),
-    },
-  ]
-
-  const onCopy = () => {
-    forget(navigator.clipboard.writeText(payloadString))
-  }
-
-  return (
-    <>
-      <Property
-        titleProps={{ elevation }}
-        badge={badge}
-        size={size}
-        actions={actions}
-        title="Payload Hash"
-        value={hash ?? '<Unknown>'}
-        tip="This is the payload hash"
-        {...props}
-      />
-      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>
-        <DialogTitle>Hash Source</DialogTitle>
-        <DialogContent>
-          <PayloadHashSourceDetails noTitle payload={payload} />
-        </DialogContent>
-        <DialogActions>
-          <ButtonEx color="secondary" onClick={onCopy}>
-            Copy
-          </ButtonEx>
-          <ButtonEx color="secondary" onClick={() => setViewSourceOpen(false)}>
-            Close
-          </ButtonEx>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}

package/src/components/Details/Details.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { sampleIdPayload, samplePayloadFromBuilder } from '@xyo-network/react-storybook'
-import React from 'react'
-import {
-  BrowserRouter, Route, Routes,
-} from 'react-router-dom'
-
-import { PayloadDetails } from './Details.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PayloadDetails,
-  parameters: { docs: { page: null } },
-  title: 'payload/Details',
-} as Meta<typeof PayloadDetails>
-
-const Template: StoryFn<typeof PayloadDetails> = args => (
-  <BrowserRouter>
-    <Routes>
-      <Route path="temp" element={<h1>Successfully navigated to archivePath</h1>} />
-      <Route path="*" element={<PayloadDetails {...args}></PayloadDetails>}></Route>
-    </Routes>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithSample = Template.bind({})
-WithSample.args = { payload: sampleIdPayload }
-
-const WithBuilderSample = Template.bind({})
-WithBuilderSample.args = { payload: samplePayloadFromBuilder }
-
-const WithArchiveLink = Template.bind({})
-WithArchiveLink.args = { payload: samplePayloadFromBuilder }
-
-const DefaultPaper = Template.bind({})
-DefaultPaper.args = { paper: true }
-
-const WithSamplePaper = Template.bind({})
-WithSamplePaper.args = { paper: true, payload: sampleIdPayload }
-
-const WithBuilderSamplePaper = Template.bind({})
-WithBuilderSamplePaper.args = { paper: true, payload: samplePayloadFromBuilder }
-
-const WithArchiveLinkPaper = Template.bind({})
-WithArchiveLinkPaper.args = { paper: true, payload: samplePayloadFromBuilder }
-
-export {
-  Default, DefaultPaper, WithArchiveLink, WithArchiveLinkPaper, WithBuilderSample, WithBuilderSamplePaper, WithSample, WithSamplePaper,
-}
-
-export default StorybookEntry

package/src/components/Details/Details.tsx

@@ -1,30 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { Payload } from '@xyo-network/payload-model'
-import React from 'react'
-
-import { PayloadDataDetails } from './DataDetails.tsx'
-import { PayloadJsonDetails } from './JsonDetails.tsx'
-import { PayloadValidationDetails } from './ValidationDetails/index.ts'
-
-export type WithPaper<T> = T & { paper: true }
-export type WithoutPaper<T> = T & { paper?: false }
-
-export type PayloadDetailsProps = FlexBoxProps & {
-  paper?: boolean
-  payload?: Payload
-}
-
-export const PayloadDetails: React.FC<PayloadDetailsProps> = ({
-  paper, payload, ...props
-}) => {
-  return (
-    <FlexCol gap={1} justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} {...props}>
-      <PayloadDataDetails paper={paper} size="large" badge payload={payload} />
-      <PayloadValidationDetails paper={paper} value={payload} />
-      <PayloadJsonDetails paper={paper} payload={payload} />
-    </FlexCol>
-  )
-}
-
-PayloadDetails.displayName = 'PayloadDetails'

package/src/components/Details/HashSourceDetails.tsx

@@ -1,61 +0,0 @@
-import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'
-import {
-  IconButton, Typography, useTheme,
-} from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import {
-  FlexCol, FlexGrowRow, FlexRow,
-} from '@xylabs/react-flexbox'
-import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import { PayloadBuilder } from '@xyo-network/payload-builder'
-import type { Payload } from '@xyo-network/payload-model'
-import React from 'react'
-
-export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
-  noTitle?: boolean
-  payload?: Payload
-}
-
-export const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({
-  noTitle = false, payload, ...props
-}) => {
-  const theme = useTheme()
-  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''
-
-  return (
-    <FlexCol alignItems="stretch" {...props}>
-      {noTitle
-        ? null
-        : (
-            <FlexRow margin={1} justifyContent="flex-start">
-              <Typography>Hash Source</Typography>
-              <QuickTipButton title="Hash Source">The actual string used to generate the hash (SHA256)</QuickTipButton>
-            </FlexRow>
-          )}
-      <FlexRow>
-        <FlexGrowRow background border={1} borderColor={theme.vars.palette.divider} justifyContent="start">
-          <Typography
-            padding={2}
-            fontFamily="monospace"
-            variant="body1"
-            sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}
-          >
-            {payloadString}
-          </Typography>
-        </FlexGrowRow>
-        <IconButton>
-          <ContentCopyIcon />
-        </IconButton>
-      </FlexRow>
-      {noTitle
-        ? (
-            <FlexRow margin={1} justifyContent="flex-start">
-              <Typography variant="body2">
-                The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.
-              </Typography>
-            </FlexRow>
-          )
-        : null}
-    </FlexCol>
-  )
-}

package/src/components/Details/JsonDetails.tsx

@@ -1,47 +0,0 @@
-import {
-  Paper, useMediaQuery, useTheme,
-} from '@mui/material'
-import type { Payload } from '@xyo-network/payload-model'
-import type { JsonViewerExProps } from '@xyo-network/react-payload-raw-info'
-import { JsonViewerEx } from '@xyo-network/react-payload-raw-info'
-import type { PropertyGroupProps } from '@xyo-network/react-property'
-import { PropertyGroup } from '@xyo-network/react-property'
-import React from 'react'
-
-export type PayloadJsonDetailsProps = PropertyGroupProps & {
-  jsonViewProps?: JsonViewerExProps
-  payload?: Payload
-}
-
-export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({
-  jsonViewProps, payload, ...props
-}) => {
-  const { breakpoints } = useTheme()
-  const belowSm = useMediaQuery(breakpoints.down('sm'))
-
-  let elevation = 2
-  if (props.paper) {
-    elevation += props.elevation ?? 0
-  }
-
-  return (
-    <PropertyGroup titleProps={{ elevation }} title="JSON" tip="The raw JSON of the payload" {...props}>
-      <Paper
-        square
-        variant="elevation"
-        style={{
-          overflow: 'hidden', padding: '16px', width: '100%',
-        }}
-      >
-        <JsonViewerEx
-          groupArraysAfterLength={20}
-          style={{ overflow: 'hidden' }}
-          value={payload}
-          enableClipboard
-          collapseStringsAfterLength={belowSm ? 24 : 32}
-          {...jsonViewProps}
-        />
-      </Paper>
-    </PropertyGroup>
-  )
-}

package/src/components/Details/ValidationDetails/ValidationDetails.stories.tsx

@@ -1,55 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { asSchema, type Payload } from '@xyo-network/payload-model'
-import { sampleIdPayload } from '@xyo-network/react-storybook'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { PayloadDetails } from '../Details.tsx'
-import { PayloadValidationDetails } from './ValidationDetails.tsx'
-import type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'
-
-const StorybookEntry: Meta = {
-  argTypes: {},
-  args: { value: { schema: 'network.xyo.schema' } },
-  component: PayloadDetails,
-  parameters: { docs: { page: null } },
-  title: 'payload/ValidationDetails',
-}
-
-const Template: StoryFn<typeof PayloadValidationDetails> = (args: PayloadValidationDetailsProps) => (
-  <BrowserRouter>
-    <PayloadValidationDetails {...args} />
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = { skipBody: true }
-
-const WithErrorsInToolTip = Template.bind({})
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-WithErrorsInToolTip.args = {
-  value: {
-    ...sampleIdPayload,
-    _hash: '6fe3f745b1179fefa74cc3c7eab58321bee1c9ca9e34d9585467364cc5d3bbe2',
-    schema: undefined,
-  } as unknown as Payload,
-}
-
-const SkipBody = Template.bind({})
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-SkipBody.args = {
-  skipBody: true,
-  value: {
-    _hash: '44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a',
-    _timestamp: Date.now(),
-    schema: asSchema('network.xyo.test', true),
-  } as Payload,
-}
-
-export {
-  Default, SkipBody, WithErrorsInToolTip,
-}
-
-export default StorybookEntry

package/src/components/Details/ValidationDetails/ValidationDetails.tsx

@@ -1,46 +0,0 @@
-import { Typography } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { usePromise } from '@xylabs/react-promise'
-import { PayloadValidator } from '@xyo-network/payload-validator'
-import { Property, PropertyGroup } from '@xyo-network/react-property'
-import { SchemaProperty } from '@xyo-network/react-schema'
-import React from 'react'
-
-import type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'
-
-export const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({
-  skipBody = false, value, ...props
-}) => {
-  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])
-
-  const bodyErrors = skipBody ? [] : (validateErrors ?? [])
-  const errors: Error[] = [...bodyErrors]
-
-  let elevation = 2
-  if (props.paper) {
-    elevation += props.elevation ?? 0
-  }
-
-  return (
-    <PropertyGroup titleProps={{ elevation }} title="Validation" tip="The results from validating the payload" {...props}>
-      <Property
-        titleProps={{ elevation }}
-        flexGrow={1}
-        title="Valid"
-        value={errors.length === 0 ? 'True' : 'False'}
-        tip={
-          errors.length > 0
-            ? (
-                <FlexCol>
-                  {errors.map((error, index) => {
-                    return <Typography key={index}>{error.toString()}</Typography>
-                  })}
-                </FlexCol>
-              )
-            : <Typography>No Errors</Typography>
-        }
-      />
-      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}
-    </PropertyGroup>
-  )
-}

package/src/components/Details/ValidationDetails/ValidationDetailsProps.ts

@@ -1,7 +0,0 @@
-import type { Payload } from '@xyo-network/payload-model'
-import type { PropertyGroupProps } from '@xyo-network/react-property'
-
-export type PayloadValidationDetailsProps = PropertyGroupProps & {
-  skipBody?: boolean
-  value?: Payload
-}

package/src/components/Details/ValidationDetails/index.ts

@@ -1,2 +0,0 @@
-export * from './ValidationDetails.tsx'
-export * from './ValidationDetailsProps.ts'

package/src/components/Details/index.ts

@@ -1,4 +0,0 @@
-export * from './DataDetails.tsx'
-export * from './Details.tsx'
-export * from './JsonDetails.tsx'
-export * from './ValidationDetails/index.ts'

package/src/components/index.ts

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

package/src/global.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

package/src/index.ts

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