@xyo-network/react-payload-details 2.64.0-rc.7 → 2.64.0

package/dist/node/components/Details/ValidationDetails/ValidationDetails.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Details/ValidationDetails/ValidationDetails.tsx
+var ValidationDetails_exports = {};
+__export(ValidationDetails_exports, {
+  PayloadValidationDetails: () => PayloadValidationDetails
+});
+module.exports = __toCommonJS(ValidationDetails_exports);
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_promise = require("@xylabs/react-promise");
+var import_payload_validator = require("@xyo-network/payload-validator");
+var import_react_property = require("@xyo-network/react-property");
+var import_react_schema = require("@xyo-network/react-schema");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PayloadValidationDetails = ({ skipBody = false, value, ...props }) => {
+  const [validateErrors] = (0, import_react_promise.usePromise)(async () => value ? await new import_payload_validator.PayloadValidator(value).validate() : void 0, [value]);
+  const bodyErrors = skipBody ? [] : validateErrors ?? [];
+  const errors = [...bodyErrors];
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_property.PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_property.Property,
+      {
+        titleProps: { elevation },
+        flexGrow: 1,
+        title: "Valid",
+        value: errors.length === 0 ? "True" : "False",
+        tip: errors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { children: errors.map((error, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: error.toString() }, index);
+        }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "No Errors" })
+      }
+    ),
+    (value == null ? void 0 : value.schema) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_schema.SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayloadValidationDetails
+});
+//# sourceMappingURL=ValidationDetails.cjs.map

package/dist/node/components/Details/ValidationDetails/ValidationDetails.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["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'\n\nimport { PayloadValidationDetailsProps } from './ValidationDetailsProps'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ skipBody = false, value, ...props }) => {\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            <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      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA2B;AAC3B,2BAAwB;AACxB,2BAA2B;AAC3B,+BAAiC;AACjC,4BAAwC;AACxC,0BAA+B;AAgB3B;AAZG,IAAM,2BAAoE,CAAC,EAAE,WAAW,OAAO,OAAO,GAAG,MAAM,MAAM;AAC1H,QAAM,CAAC,cAAc,QAAI,iCAAW,YAAa,QAAQ,MAAM,IAAI,0CAAiB,KAAK,EAAE,SAAS,IAAI,QAAY,CAAC,KAAK,CAAC;AAE3H,QAAM,aAAa,WAAW,CAAC,IAAI,kBAAkB,CAAC;AACtD,QAAM,SAAkB,CAAC,GAAG,UAAU;AAEtC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,SACE,6CAAC,uCAAc,YAAY,EAAE,UAAU,GAAG,OAAM,cAAa,KAAI,2CAA2C,GAAG,OAC7G;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB,UAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAO,OAAO,WAAW,IAAI,SAAS;AAAA,QACtC,KACE,OAAO,SAAS,IACd,4CAAC,gCACE,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBAAO,4CAAC,8BAAwB,gBAAM,SAAS,KAAvB,KAAyB;AAAA,QACnD,CAAC,GACH,IAEA,4CAAC,8BAAW,uBAAS;AAAA;AAAA,IAG3B;AAAA,KACC,+BAAO,WAAU,4CAAC,sCAAe,UAAU,GAAG,YAAY,EAAE,UAAU,GAAG,OAAO,MAAM,QAAQ;AAAA,KACjG;AAEJ;","names":[]}

package/dist/node/components/Details/ValidationDetails/ValidationDetails.d.cts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PayloadValidationDetailsProps } from './ValidationDetailsProps';
+export declare const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps>;
+//# sourceMappingURL=ValidationDetails.d.ts.map

package/dist/node/components/Details/ValidationDetails/ValidationDetails.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationDetails.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAA;AAExE,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAiC5E,CAAA"}

package/dist/node/components/Details/ValidationDetails/ValidationDetails.js

@@ -1,59 +1,36 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ValidationDetails_exports = {};
-__export(ValidationDetails_exports, {
-  PayloadValidationDetails: () => PayloadValidationDetails
-});
-module.exports = __toCommonJS(ValidationDetails_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_material = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react_promise = require("@xylabs/react-promise");
-var import_payload_validator = require("@xyo-network/payload-validator");
-var import_react_property = require("@xyo-network/react-property");
-var import_react_schema = require("@xyo-network/react-schema");
-const PayloadValidationDetails = ({ skipBody = false, value, ...props }) => {
-  const [validateErrors] = (0, import_react_promise.usePromise)(async () => value ? await new import_payload_validator.PayloadValidator(value).validate() : void 0, [value]);
+// src/components/Details/ValidationDetails/ValidationDetails.tsx
+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 { jsx, jsxs } 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];
   let elevation = 2;
   if (props.paper) {
     elevation += props.elevation ?? 0;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_property.PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_property.Property,
+  return /* @__PURE__ */ jsxs(PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
+    /* @__PURE__ */ jsx(
+      Property,
       {
         titleProps: { elevation },
         flexGrow: 1,
         title: "Valid",
         value: errors.length === 0 ? "True" : "False",
-        tip: errors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { children: errors.map((error, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: error.toString() }, index);
-        }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "No Errors" })
+        tip: errors.length > 0 ? /* @__PURE__ */ jsx(FlexCol, { children: errors.map((error, index) => {
+          return /* @__PURE__ */ jsx(Typography, { children: error.toString() }, index);
+        }) }) : /* @__PURE__ */ jsx(Typography, { children: "No Errors" })
       }
     ),
-    value?.schema && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_schema.SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+    (value == null ? void 0 : value.schema) && /* @__PURE__ */ jsx(SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   PayloadValidationDetails
-});
+};
 //# sourceMappingURL=ValidationDetails.js.map

package/dist/node/components/Details/ValidationDetails/ValidationDetails.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["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'\n\nimport { PayloadValidationDetailsProps } from './ValidationDetailsProps'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ skipBody = false, value, ...props }) => {\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            <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      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBI;AArBJ,sBAA2B;AAC3B,2BAAwB;AACxB,2BAA2B;AAC3B,+BAAiC;AACjC,4BAAwC;AACxC,0BAA+B;AAIxB,MAAM,2BAAoE,CAAC,EAAE,WAAW,OAAO,OAAO,GAAG,MAAM,MAAM;AAC1H,QAAM,CAAC,cAAc,QAAI,iCAAW,YAAa,QAAQ,MAAM,IAAI,0CAAiB,KAAK,EAAE,SAAS,IAAI,QAAY,CAAC,KAAK,CAAC;AAE3H,QAAM,aAAa,WAAW,CAAC,IAAI,kBAAkB,CAAC;AACtD,QAAM,SAAkB,CAAC,GAAG,UAAU;AAEtC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,SACE,6CAAC,uCAAc,YAAY,EAAE,UAAU,GAAG,OAAM,cAAa,KAAI,2CAA2C,GAAG,OAC7G;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB,UAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAO,OAAO,WAAW,IAAI,SAAS;AAAA,QACtC,KACE,OAAO,SAAS,IACd,4CAAC,gCACE,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBAAO,4CAAC,8BAAwB,gBAAM,SAAS,KAAvB,KAAyB;AAAA,QACnD,CAAC,GACH,IAEA,4CAAC,8BAAW,uBAAS;AAAA;AAAA,IAG3B;AAAA,IACC,OAAO,UAAU,4CAAC,sCAAe,UAAU,GAAG,YAAY,EAAE,UAAU,GAAG,OAAO,MAAM,QAAQ;AAAA,KACjG;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["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'\n\nimport { PayloadValidationDetailsProps } from './ValidationDetailsProps'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ skipBody = false, value, ...props }) => {\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            <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      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,UAAU,qBAAqB;AACxC,SAAS,sBAAsB;AAgB3B,SAUmB,KAVnB;AAZG,IAAM,2BAAoE,CAAC,EAAE,WAAW,OAAO,OAAO,GAAG,MAAM,MAAM;AAC1H,QAAM,CAAC,cAAc,IAAI,WAAW,YAAa,QAAQ,MAAM,IAAI,iBAAiB,KAAK,EAAE,SAAS,IAAI,QAAY,CAAC,KAAK,CAAC;AAE3H,QAAM,aAAa,WAAW,CAAC,IAAI,kBAAkB,CAAC;AACtD,QAAM,SAAkB,CAAC,GAAG,UAAU;AAEtC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,SACE,qBAAC,iBAAc,YAAY,EAAE,UAAU,GAAG,OAAM,cAAa,KAAI,2CAA2C,GAAG,OAC7G;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB,UAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAO,OAAO,WAAW,IAAI,SAAS;AAAA,QACtC,KACE,OAAO,SAAS,IACd,oBAAC,WACE,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBAAO,oBAAC,cAAwB,gBAAM,SAAS,KAAvB,KAAyB;AAAA,QACnD,CAAC,GACH,IAEA,oBAAC,cAAW,uBAAS;AAAA;AAAA,IAG3B;AAAA,KACC,+BAAO,WAAU,oBAAC,kBAAe,UAAU,GAAG,YAAY,EAAE,UAAU,GAAG,OAAO,MAAM,QAAQ;AAAA,KACjG;AAEJ;","names":[]}

package/dist/node/components/Details/ValidationDetails/ValidationDetailsProps.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Details/ValidationDetails/ValidationDetailsProps.ts
+var ValidationDetailsProps_exports = {};
+module.exports = __toCommonJS(ValidationDetailsProps_exports);
+//# sourceMappingURL=ValidationDetailsProps.cjs.map

package/dist/node/components/Details/ValidationDetails/ValidationDetailsProps.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetailsProps.ts"],"sourcesContent":["import { Payload } from '@xyo-network/payload-model'\nimport { PropertyGroupProps } from '@xyo-network/react-property'\n\nexport type PayloadValidationDetailsProps = PropertyGroupProps & {\n  skipBody?: boolean\n  value?: Payload\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/node/components/Details/ValidationDetails/ValidationDetailsProps.d.cts

@@ -0,0 +1,7 @@
+import { Payload } from '@xyo-network/payload-model';
+import { PropertyGroupProps } from '@xyo-network/react-property';
+export type PayloadValidationDetailsProps = PropertyGroupProps & {
+    skipBody?: boolean;
+    value?: Payload;
+};
+//# sourceMappingURL=ValidationDetailsProps.d.ts.map

package/dist/node/components/Details/ValidationDetails/ValidationDetailsProps.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationDetailsProps.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetailsProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAEhE,MAAM,MAAM,6BAA6B,GAAG,kBAAkB,GAAG;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA"}

package/dist/node/components/Details/ValidationDetails/ValidationDetailsProps.js

@@ -1,17 +1 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ValidationDetailsProps_exports = {};
-module.exports = __toCommonJS(ValidationDetailsProps_exports);
 //# sourceMappingURL=ValidationDetailsProps.js.map

package/dist/node/components/Details/ValidationDetails/ValidationDetailsProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetailsProps.ts"],"sourcesContent":["import { Payload } from '@xyo-network/payload-model'\nimport { PropertyGroupProps } from '@xyo-network/react-property'\n\nexport type PayloadValidationDetailsProps = PropertyGroupProps & {\n  skipBody?: boolean\n  value?: Payload\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/node/components/Details/ValidationDetails/index.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Details/ValidationDetails/index.ts
+var ValidationDetails_exports = {};
+__export(ValidationDetails_exports, {
+  PayloadValidationDetails: () => PayloadValidationDetails
+});
+module.exports = __toCommonJS(ValidationDetails_exports);
+
+// src/components/Details/ValidationDetails/ValidationDetails.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_promise = require("@xylabs/react-promise");
+var import_payload_validator = require("@xyo-network/payload-validator");
+var import_react_property = require("@xyo-network/react-property");
+var import_react_schema = require("@xyo-network/react-schema");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PayloadValidationDetails = ({ skipBody = false, value, ...props }) => {
+  const [validateErrors] = (0, import_react_promise.usePromise)(async () => value ? await new import_payload_validator.PayloadValidator(value).validate() : void 0, [value]);
+  const bodyErrors = skipBody ? [] : validateErrors ?? [];
+  const errors = [...bodyErrors];
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_property.PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_property.Property,
+      {
+        titleProps: { elevation },
+        flexGrow: 1,
+        title: "Valid",
+        value: errors.length === 0 ? "True" : "False",
+        tip: errors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { children: errors.map((error, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: error.toString() }, index);
+        }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "No Errors" })
+      }
+    ),
+    (value == null ? void 0 : value.schema) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_schema.SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayloadValidationDetails
+});
+//# sourceMappingURL=index.cjs.map

package/dist/node/components/Details/ValidationDetails/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/index.ts","../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["export * from './ValidationDetails'\nexport * from './ValidationDetailsProps'\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'\n\nimport { PayloadValidationDetailsProps } from './ValidationDetailsProps'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ skipBody = false, value, ...props }) => {\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            <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      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA2B;AAC3B,2BAAwB;AACxB,2BAA2B;AAC3B,+BAAiC;AACjC,4BAAwC;AACxC,0BAA+B;AAgB3B;AAZG,IAAM,2BAAoE,CAAC,EAAE,WAAW,OAAO,OAAO,GAAG,MAAM,MAAM;AAC1H,QAAM,CAAC,cAAc,QAAI,iCAAW,YAAa,QAAQ,MAAM,IAAI,0CAAiB,KAAK,EAAE,SAAS,IAAI,QAAY,CAAC,KAAK,CAAC;AAE3H,QAAM,aAAa,WAAW,CAAC,IAAI,kBAAkB,CAAC;AACtD,QAAM,SAAkB,CAAC,GAAG,UAAU;AAEtC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,SACE,6CAAC,uCAAc,YAAY,EAAE,UAAU,GAAG,OAAM,cAAa,KAAI,2CAA2C,GAAG,OAC7G;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB,UAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAO,OAAO,WAAW,IAAI,SAAS;AAAA,QACtC,KACE,OAAO,SAAS,IACd,4CAAC,gCACE,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBAAO,4CAAC,8BAAwB,gBAAM,SAAS,KAAvB,KAAyB;AAAA,QACnD,CAAC,GACH,IAEA,4CAAC,8BAAW,uBAAS;AAAA;AAAA,IAG3B;AAAA,KACC,+BAAO,WAAU,4CAAC,sCAAe,UAAU,GAAG,YAAY,EAAE,UAAU,GAAG,OAAO,MAAM,QAAQ;AAAA,KACjG;AAEJ;","names":[]}

package/dist/node/components/Details/ValidationDetails/index.d.cts

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

package/dist/node/components/Details/ValidationDetails/index.d.cts.map

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

package/dist/node/components/Details/ValidationDetails/index.js

@@ -1,25 +1,36 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+// src/components/Details/ValidationDetails/ValidationDetails.tsx
+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 { jsx, jsxs } 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];
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
   }
-  return to;
+  return /* @__PURE__ */ jsxs(PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
+    /* @__PURE__ */ jsx(
+      Property,
+      {
+        titleProps: { elevation },
+        flexGrow: 1,
+        title: "Valid",
+        value: errors.length === 0 ? "True" : "False",
+        tip: errors.length > 0 ? /* @__PURE__ */ jsx(FlexCol, { children: errors.map((error, index) => {
+          return /* @__PURE__ */ jsx(Typography, { children: error.toString() }, index);
+        }) }) : /* @__PURE__ */ jsx(Typography, { children: "No Errors" })
+      }
+    ),
+    (value == null ? void 0 : value.schema) && /* @__PURE__ */ jsx(SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+  ] });
+};
+export {
+  PayloadValidationDetails
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ValidationDetails_exports = {};
-module.exports = __toCommonJS(ValidationDetails_exports);
-__reExport(ValidationDetails_exports, require("./ValidationDetails"), module.exports);
-__reExport(ValidationDetails_exports, require("./ValidationDetailsProps"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("./ValidationDetails"),
-  ...require("./ValidationDetailsProps")
-});
 //# sourceMappingURL=index.js.map

package/dist/node/components/Details/ValidationDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/index.ts"],"sourcesContent":["export * from './ValidationDetails'\nexport * from './ValidationDetailsProps'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,sCAAc,gCAAd;AACA,sCAAc,qCADd;","names":[]}
+{"version":3,"sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["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'\n\nimport { PayloadValidationDetailsProps } from './ValidationDetailsProps'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ skipBody = false, value, ...props }) => {\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            <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      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,UAAU,qBAAqB;AACxC,SAAS,sBAAsB;AAgB3B,SAUmB,KAVnB;AAZG,IAAM,2BAAoE,CAAC,EAAE,WAAW,OAAO,OAAO,GAAG,MAAM,MAAM;AAC1H,QAAM,CAAC,cAAc,IAAI,WAAW,YAAa,QAAQ,MAAM,IAAI,iBAAiB,KAAK,EAAE,SAAS,IAAI,QAAY,CAAC,KAAK,CAAC;AAE3H,QAAM,aAAa,WAAW,CAAC,IAAI,kBAAkB,CAAC;AACtD,QAAM,SAAkB,CAAC,GAAG,UAAU;AAEtC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,SACE,qBAAC,iBAAc,YAAY,EAAE,UAAU,GAAG,OAAM,cAAa,KAAI,2CAA2C,GAAG,OAC7G;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB,UAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAO,OAAO,WAAW,IAAI,SAAS;AAAA,QACtC,KACE,OAAO,SAAS,IACd,oBAAC,WACE,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBAAO,oBAAC,cAAwB,gBAAM,SAAS,KAAvB,KAAyB;AAAA,QACnD,CAAC,GACH,IAEA,oBAAC,cAAW,uBAAS;AAAA;AAAA,IAG3B;AAAA,KACC,+BAAO,WAAU,oBAAC,kBAAe,UAAU,GAAG,YAAY,EAAE,UAAU,GAAG,OAAO,MAAM,QAAQ;AAAA,KACjG;AAEJ;","names":[]}

package/dist/node/components/Details/index.cjs

@@ -0,0 +1,208 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Details/index.ts
+var Details_exports = {};
+__export(Details_exports, {
+  PayloadDataDetails: () => PayloadDataDetails,
+  PayloadDetails: () => PayloadDetails,
+  PayloadJsonDetails: () => PayloadJsonDetails,
+  PayloadValidationDetails: () => PayloadValidationDetails
+});
+module.exports = __toCommonJS(Details_exports);
+
+// src/components/Details/DataDetails.tsx
+var import_icons_material2 = require("@mui/icons-material");
+var import_material2 = require("@mui/material");
+var import_react_button = require("@xylabs/react-button");
+var import_hash2 = require("@xyo-network/hash");
+var import_react_property = require("@xyo-network/react-property");
+var import_react_shared = require("@xyo-network/react-shared");
+var import_react = require("react");
+
+// src/components/Details/HashSourceDetails.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_quick_tip_button = require("@xylabs/react-quick-tip-button");
+var import_hash = require("@xyo-network/hash");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PayloadHashSourceDetails = ({ noTitle = false, payload, ...props }) => {
+  const theme = (0, import_material.useTheme)();
+  const payloadString = payload ? JSON.stringify(import_hash.PayloadHasher.hashFields(payload), null, 2) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", ...props, children: [
+    noTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { margin: 1, justifyContent: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Hash Source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_quick_tip_button.QuickTipButton, { title: "Hash Source", children: "The actual string used to generate the hash (SHA256)" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexGrowRow, { background: true, border: 1, borderColor: theme.palette.divider, justifyContent: "start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { padding: 2, fontFamily: "monospace", variant: "body1", sx: { overflowWrap: "break-word", wordBreak: "break-all" }, children: payloadString }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.ContentCopy, {}) })
+    ] }),
+    noTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { margin: 1, justifyContent: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.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 import_jsx_runtime2 = require("react/jsx-runtime");
+var PayloadDataDetails = ({ size, badge, payload, ...props }) => {
+  const payloadString = payload ? JSON.stringify(import_hash2.PayloadHasher.hashFields(payload), null, 2) : "";
+  const [viewSourceOpen, setViewSourceOpen] = (0, import_react.useState)(false);
+  const hash = (0, import_react_shared.usePayloadHash)(payload);
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  const actions = [
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Visibility, {}),
+      name: "View",
+      onClick: () => setViewSourceOpen(true)
+    },
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.ContentCopy, {}),
+      name: "Copy",
+      onClick: async () => await navigator.clipboard.writeText(hash ?? "")
+    }
+  ];
+  const onCopy = async () => {
+    await navigator.clipboard.writeText(payloadString);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_property.Property,
+      {
+        titleProps: { elevation },
+        badge,
+        size,
+        actions,
+        title: "Payload Hash",
+        value: hash ?? "<Unknown>",
+        tip: "This is the payload hash",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Dialog, { open: viewSourceOpen, onClose: () => setViewSourceOpen(false), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.DialogTitle, { children: "Hash Source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PayloadHashSourceDetails, { noTitle: true, payload }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.DialogActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_button.ButtonEx, { color: "secondary", onClick: onCopy, children: "Copy" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_button.ButtonEx, { color: "secondary", onClick: () => setViewSourceOpen(false), children: "Close" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/Details/Details.tsx
+var import_react_flexbox4 = require("@xylabs/react-flexbox");
+var import_react3 = require("react");
+
+// src/components/Details/JsonDetails.tsx
+var import_material3 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_react_property2 = require("@xyo-network/react-property");
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var JsonView = (0, import_react2.lazy)(() => import(
+  /* webpackChunkName: "jsonView" */
+  "react-json-view"
+));
+var PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
+  const { breakpoints, palette } = (0, import_material3.useTheme)();
+  const belowSm = (0, import_material3.useMediaQuery)(breakpoints.down("sm"));
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  const jsonTheme = palette.mode === "dark" ? "shapeshifter" : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_property2.PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Paper, { square: true, variant: "elevation", style: { overflow: "hidden", padding: "16px", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox2.FlexGrowRow, {}), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    JsonView,
+    {
+      groupArraysAfterLength: 20,
+      style: { backgroundColor: void 0, overflow: "hidden" },
+      src: payload,
+      enableClipboard: true,
+      theme: jsonTheme,
+      collapseStringsAfterLength: belowSm ? 24 : 32,
+      ...jsonViewProps
+    }
+  ) }) }) });
+};
+
+// src/components/Details/ValidationDetails/ValidationDetails.tsx
+var import_material4 = require("@mui/material");
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+var import_react_promise = require("@xylabs/react-promise");
+var import_payload_validator = require("@xyo-network/payload-validator");
+var import_react_property3 = require("@xyo-network/react-property");
+var import_react_schema = require("@xyo-network/react-schema");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PayloadValidationDetails = ({ skipBody = false, value, ...props }) => {
+  const [validateErrors] = (0, import_react_promise.usePromise)(async () => value ? await new import_payload_validator.PayloadValidator(value).validate() : void 0, [value]);
+  const bodyErrors = skipBody ? [] : validateErrors ?? [];
+  const errors = [...bodyErrors];
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_property3.PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_property3.Property,
+      {
+        titleProps: { elevation },
+        flexGrow: 1,
+        title: "Valid",
+        value: errors.length === 0 ? "True" : "False",
+        tip: errors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox3.FlexCol, { children: errors.map((error, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Typography, { children: error.toString() }, index);
+        }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Typography, { children: "No Errors" })
+      }
+    ),
+    (value == null ? void 0 : value.schema) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_schema.SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+  ] });
+};
+
+// src/components/Details/Details.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PayloadDetails = (0, import_react3.forwardRef)(({ paper, payload, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox4.FlexCol, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ref, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PayloadDataDetails, { paper, size: "large", badge: true, payload }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PayloadValidationDetails, { paper, value: payload }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PayloadJsonDetails, { paper, payload })
+  ] });
+});
+PayloadDetails.displayName = "PayloadDetails";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayloadDataDetails,
+  PayloadDetails,
+  PayloadJsonDetails,
+  PayloadValidationDetails
+});
+//# sourceMappingURL=index.cjs.map