@xyo-network/react-payload-details 2.62.3 → 2.63.1

package/dist/cjs/components/Details/DataDetails.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PayloadDataDetails = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentCopy_1 = tslib_1.__importDefault(require("@mui/icons-material/ContentCopy"));
+const Visibility_1 = tslib_1.__importDefault(require("@mui/icons-material/Visibility"));
+const material_1 = require("@mui/material");
+const react_button_1 = require("@xylabs/react-button");
+const hash_1 = require("@xyo-network/hash");
+const react_property_1 = require("@xyo-network/react-property");
+const react_shared_1 = require("@xyo-network/react-shared");
+const react_1 = require("react");
+const HashSourceDetails_1 = require("./HashSourceDetails");
+const PayloadDataDetails = (_a) => {
+    var _b;
+    var { size, badge, payload } = _a, props = tslib_1.__rest(_a, ["size", "badge", "payload"]);
+    const [viewSourceOpen, setViewSourceOpen] = (0, react_1.useState)(false);
+    const hash = (0, react_shared_1.usePayloadHash)(payload);
+    let elevation = 2;
+    if (props.paper) {
+        elevation += (_b = props.elevation) !== null && _b !== void 0 ? _b : 0;
+    }
+    const actions = [
+        {
+            icon: (0, jsx_runtime_1.jsx)(Visibility_1.default, {}),
+            name: 'View',
+            onClick: () => setViewSourceOpen(true),
+        },
+        {
+            icon: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, {}),
+            name: 'Copy',
+            onClick: () => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return yield navigator.clipboard.writeText(hash !== null && hash !== void 0 ? hash : ''); }),
+        },
+    ];
+    const onCopy = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const payloadString = payload ? JSON.stringify(hash_1.PayloadHasher.hashFields(payload), null, 2) : '';
+        yield navigator.clipboard.writeText(payloadString);
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_property_1.Property, Object.assign({ titleProps: { elevation }, badge: badge, size: size, actions: actions, title: "Payload Hash", value: hash !== null && hash !== void 0 ? hash : '<Unknown>', tip: "This is the payload hash" }, props)), (0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ open: viewSourceOpen, onClose: () => setViewSourceOpen(false) }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: "Hash Source" }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(HashSourceDetails_1.PayloadHashSourceDetails, { noTitle: true, payload: payload }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ color: "secondary", onClick: onCopy }, { children: "Copy" })), (0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ color: "secondary", onClick: () => setViewSourceOpen(false) }, { children: "Close" }))] })] }))] }));
+};
+exports.PayloadDataDetails = PayloadDataDetails;
+//# sourceMappingURL=DataDetails.js.map

package/dist/cjs/components/Details/DataDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/DataDetails.tsx"],"names":[],"mappings":";;;;;AAAA,0FAA6D;AAC7D,wFAA2D;AAC3D,4CAAiF;AACjF,uDAA+C;AAC/C,4CAAiD;AAEjD,gEAAqF;AACrF,4DAAoE;AACpE,iCAAgC;AAEhC,2DAA8D;AAQvD,MAAM,kBAAkB,GAAsC,CAAC,EAAkC,EAAE,EAAE;;QAAtC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,OAAY,EAAP,KAAK,sBAAhC,4BAAkC,CAAF;IACpG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,IAAA,6BAAc,EAAC,OAAO,CAAC,CAAA;IAEpC,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,MAAM,OAAO,GAAqB;QAChC;YACE,IAAI,EAAE,uBAAC,oBAAc,KAAG;YACxB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC;SACvC;QACD;YACE,IAAI,EAAE,uBAAC,qBAAe,KAAG;YACzB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAS,EAAE,0DAAC,OAAA,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,CAAA,GAAA;SACrE;KACF,CAAA;IAED,MAAM,MAAM,GAAG,GAAS,EAAE;QACxB,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,oBAAa,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAC/F,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;IACpD,CAAC,CAAA,CAAA;IAED,OAAO,CACL,6DACE,uBAAC,yBAAQ,kBACP,UAAU,EAAE,EAAE,SAAS,EAAE,EACzB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,WAAW,EAC1B,GAAG,EAAC,0BAA0B,IAC1B,KAAK,EACT,EACF,wBAAC,iBAAM,kBAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBACnE,uBAAC,sBAAW,8BAA0B,EACtC,uBAAC,wBAAa,cACZ,uBAAC,4CAAwB,IAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,GACxC,EAChB,wBAAC,wBAAa,eACZ,uBAAC,uBAAQ,kBAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,0BAEhC,EACX,uBAAC,uBAAQ,kBAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,2BAExD,IACG,KACT,IACR,CACJ,CAAA;AACH,CAAC,CAAA;AAvDY,QAAA,kBAAkB,sBAuD9B"}

package/dist/cjs/components/Details/Details.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PayloadDetails = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_flexbox_1 = require("@xylabs/react-flexbox");
+const react_1 = require("react");
+const DataDetails_1 = require("./DataDetails");
+const JsonDetails_1 = require("./JsonDetails");
+const ValidationDetails_1 = require("./ValidationDetails");
+exports.PayloadDetails = (0, react_1.forwardRef)((_a, ref) => {
+    var { paper, payload } = _a, props = tslib_1.__rest(_a, ["paper", "payload"]);
+    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ref: ref }, props, { children: [(0, jsx_runtime_1.jsx)(DataDetails_1.PayloadDataDetails, { paper: paper, size: "large", badge: true, payload: payload }), (0, jsx_runtime_1.jsx)(ValidationDetails_1.PayloadValidationDetails, { paper: paper, value: payload }), (0, jsx_runtime_1.jsx)(JsonDetails_1.PayloadJsonDetails, { paper: paper, payload: payload })] })));
+});
+exports.PayloadDetails.displayName = 'PayloadDetails';
+//# sourceMappingURL=Details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";;;;;AAAA,yDAA6D;AAE7D,iCAAkC;AAElC,+CAAkD;AAClD,+CAAkD;AAClD,2DAA8D;AAUjD,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAsC,CAAC,EAA4B,EAAE,GAAG,EAAE,EAAE;QAArC,EAAE,KAAK,EAAE,OAAO,OAAY,EAAP,KAAK,sBAA1B,oBAA4B,CAAF;IACvG,OAAO,CACL,wBAAC,uBAAO,kBAAC,GAAG,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,IAAM,KAAK,eAClH,uBAAC,gCAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,QAAC,OAAO,EAAE,OAAO,GAAI,EACzE,uBAAC,4CAAwB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAI,EAC1D,uBAAC,gCAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,KAC9C,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}

package/dist/cjs/components/Details/HashSourceDetails.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PayloadHashSourceDetails = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentCopy_1 = tslib_1.__importDefault(require("@mui/icons-material/ContentCopy"));
+const material_1 = require("@mui/material");
+const react_flexbox_1 = require("@xylabs/react-flexbox");
+const react_quick_tip_button_1 = require("@xylabs/react-quick-tip-button");
+const hash_1 = require("@xyo-network/hash");
+const PayloadHashSourceDetails = (_a) => {
+    var { noTitle = false, payload } = _a, props = tslib_1.__rest(_a, ["noTitle", "payload"]);
+    const theme = (0, material_1.useTheme)();
+    const payloadString = payload ? JSON.stringify(hash_1.PayloadHasher.hashFields(payload), null, 2) : '';
+    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: [noTitle ? null : ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, Object.assign({ margin: 1, justifyContent: "flex-start" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Hash Source" }), (0, jsx_runtime_1.jsx)(react_quick_tip_button_1.QuickTipButton, Object.assign({ title: "Hash Source" }, { children: "The actual string used to generate the hash (SHA256)" }))] }))), (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, { children: [(0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowRow, Object.assign({ background: true, border: 1, borderColor: theme.palette.divider, justifyContent: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ padding: 2, fontFamily: "monospace", variant: "body1", sx: { overflowWrap: 'break-word', wordBreak: 'break-all' } }, { children: payloadString })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, {}) })] }), noTitle ? ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ margin: 1, justifyContent: "flex-start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." })) }))) : null] })));
+};
+exports.PayloadHashSourceDetails = PayloadHashSourceDetails;
+//# sourceMappingURL=HashSourceDetails.js.map

package/dist/cjs/components/Details/HashSourceDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashSourceDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":";;;;;AAAA,0FAA6D;AAC7D,4CAAgE;AAChE,yDAAmF;AACnF,2EAA+D;AAC/D,4CAAiD;AAQ1C,MAAM,wBAAwB,GAA4C,CAAC,EAAsC,EAAE,EAAE;QAA1C,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,OAAY,EAAP,KAAK,sBAApC,sBAAsC,CAAF;IACpH,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,oBAAa,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAE/F,OAAO,CACL,wBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,IAAK,KAAK,eACpC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChB,wBAAC,uBAAO,kBAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,iBAC7C,uBAAC,qBAAU,8BAAyB,EACpC,uBAAC,uCAAc,kBAAC,KAAK,EAAC,aAAa,0EAAsE,KACjG,CACX,EACD,wBAAC,uBAAO,eACN,uBAAC,2BAAW,kBAAC,UAAU,QAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,EAAC,OAAO,gBAC3F,uBAAC,qBAAU,kBAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,gBACtH,aAAa,IACH,IACD,EACd,uBAAC,qBAAU,cACT,uBAAC,qBAAe,KAAG,GACR,IACL,EACT,OAAO,CAAC,CAAC,CAAC,CACT,uBAAC,uBAAO,kBAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,gBAC7C,uBAAC,qBAAU,kBAAC,OAAO,EAAC,OAAO,2HAEd,IACL,CACX,CAAC,CAAC,CAAC,IAAI,KACA,CACX,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,wBAAwB,4BA+BpC"}

package/dist/cjs/components/Details/JsonDetails.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PayloadJsonDetails = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_flexbox_1 = require("@xylabs/react-flexbox");
+const react_property_1 = require("@xyo-network/react-property");
+const react_1 = require("react");
+const JsonView = (0, react_1.lazy)(() => Promise.resolve().then(() => tslib_1.__importStar(require(/* webpackChunkName: "jsonView" */ 'react-json-view'))));
+const PayloadJsonDetails = (_a) => {
+    var _b;
+    var { jsonViewProps, payload = {} } = _a, props = tslib_1.__rest(_a, ["jsonViewProps", "payload"]);
+    const { breakpoints, palette } = (0, material_1.useTheme)();
+    const belowSm = (0, material_1.useMediaQuery)(breakpoints.down('sm'));
+    let elevation = 2;
+    if (props.paper) {
+        elevation += (_b = props.elevation) !== null && _b !== void 0 ? _b : 0;
+    }
+    const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_property_1.PropertyGroup, Object.assign({ titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload" }, props, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ square: true, variant: "elevation", style: { overflow: 'hidden', padding: '16px', width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowRow, {}) }, { children: (0, jsx_runtime_1.jsx)(JsonView, Object.assign({ groupArraysAfterLength: 20, style: { backgroundColor: undefined, overflow: 'hidden' }, src: payload, enableClipboard: true, theme: jsonTheme, collapseStringsAfterLength: belowSm ? 24 : 32 }, jsonViewProps)) })) })) })));
+};
+exports.PayloadJsonDetails = PayloadJsonDetails;
+//# sourceMappingURL=JsonDetails.js.map

package/dist/cjs/components/Details/JsonDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA8D;AAC9D,yDAAmD;AAEnD,gEAA+E;AAC/E,iCAAsC;AAGtC,MAAM,QAAQ,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,2DAAQ,kCAAkC,CAAC,iBAAiB,GAAC,CAAC,CAAA;AAOlF,MAAM,kBAAkB,GAAsC,CAAC,EAAyC,EAAE,EAAE;;QAA7C,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,OAAY,EAAP,KAAK,sBAAvC,4BAAyC,CAAF;IAC3G,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAA;IAC3C,MAAM,OAAO,GAAG,IAAA,wBAAa,EAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtE,OAAO,CACL,uBAAC,8BAAa,kBAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,IAAK,KAAK,cAChG,uBAAC,gBAAK,kBAAC,MAAM,QAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,gBAC7F,uBAAC,gBAAQ,kBAAC,QAAQ,EAAE,uBAAC,2BAAW,KAAG,gBACjC,uBAAC,QAAQ,kBACP,sBAAsB,EAAE,EAAE,EAC1B,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACzD,GAAG,EAAE,OAAO,EACZ,eAAe,QACf,KAAK,EAAE,SAAS,EAChB,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IACzC,aAAa,EACjB,IACO,IACL,IACM,CACjB,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,kBAAkB,sBA4B9B"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PayloadValidationDetails = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_flexbox_1 = require("@xylabs/react-flexbox");
+const react_promise_1 = require("@xylabs/react-promise");
+const payload_validator_1 = require("@xyo-network/payload-validator");
+const react_property_1 = require("@xyo-network/react-property");
+const react_schema_1 = require("@xyo-network/react-schema");
+const PayloadValidationDetails = (_a) => {
+    var _b;
+    var { skipBody = false, value } = _a, props = tslib_1.__rest(_a, ["skipBody", "value"]);
+    const [validateErrors] = (0, react_promise_1.usePromise)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return (value ? yield new payload_validator_1.PayloadValidator(value).validate() : undefined); }), [value]);
+    const bodyErrors = skipBody ? [] : validateErrors !== null && validateErrors !== void 0 ? validateErrors : [];
+    const errors = [...bodyErrors];
+    let elevation = 2;
+    if (props.paper) {
+        elevation += (_b = props.elevation) !== null && _b !== void 0 ? _b : 0;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_property_1.PropertyGroup, Object.assign({ titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload" }, props, { children: [(0, jsx_runtime_1.jsx)(react_property_1.Property, { titleProps: { elevation }, flexGrow: 1, title: "Valid", value: errors.length === 0 ? 'True' : 'False', tip: errors.length > 0 ? ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, { children: errors.map((error, index) => {
+                        return (0, jsx_runtime_1.jsx)(material_1.Typography, { children: error.toString() }, index);
+                    }) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "No Errors" })) }), (value === null || value === void 0 ? void 0 : value.schema) && (0, jsx_runtime_1.jsx)(react_schema_1.SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })] })));
+};
+exports.PayloadValidationDetails = PayloadValidationDetails;
+//# sourceMappingURL=ValidationDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationDetails.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA0C;AAC1C,yDAA+C;AAC/C,yDAAkD;AAClD,sEAAiE;AACjE,gEAAqE;AACrE,4DAA0D;AAInD,MAAM,wBAAwB,GAA4C,CAAC,EAAqC,EAAE,EAAE;;QAAzC,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,OAAY,EAAP,KAAK,sBAAnC,qBAAqC,CAAF;IACnH,MAAM,CAAC,cAAc,CAAC,GAAG,IAAA,0BAAU,EAAC,GAAS,EAAE,0DAAC,OAAA,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,oCAAgB,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA,GAAA,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAE5H,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAA;IACvD,MAAM,MAAM,GAAY,CAAC,GAAG,UAAU,CAAC,CAAA;IAEvC,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,OAAO,CACL,wBAAC,8BAAa,kBAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,GAAG,EAAC,yCAAyC,IAAK,KAAK,eAClH,uBAAC,yBAAQ,IACP,UAAU,EAAE,EAAE,SAAS,EAAE,EACzB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,GAAG,EACD,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClB,uBAAC,uBAAO,cACL,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;wBAC3B,OAAO,uBAAC,qBAAU,cAAc,KAAK,CAAC,QAAQ,EAAE,IAAxB,KAAK,CAAiC,CAAA;oBAChE,CAAC,CAAC,GACM,CACX,CAAC,CAAC,CAAC,CACF,uBAAC,qBAAU,4BAAuB,CACnC,GAEH,EACD,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,KAAI,uBAAC,6BAAc,IAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,GAAI,KACnF,CACjB,CAAA;AACH,CAAC,CAAA;AAjCY,QAAA,wBAAwB,4BAiCpC"}

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

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

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

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ValidationDetails"), exports);
+tslib_1.__exportStar(require("./ValidationDetailsProps"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/index.ts"],"names":[],"mappings":";;;AAAA,8DAAmC;AACnC,mEAAwC"}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DataDetails"), exports);
+tslib_1.__exportStar(require("./Details"), exports);
+tslib_1.__exportStar(require("./JsonDetails"), exports);
+tslib_1.__exportStar(require("./ValidationDetails"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Details/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Details/index.ts"],"names":[],"mappings":";;;AAAA,wDAA6B;AAC7B,oDAAyB;AACzB,wDAA6B;AAC7B,8DAAmC"}

package/dist/cjs/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Details"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/docs.json

@@ -16,7 +16,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx",
 					"line": 13,
 					"character": 12,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L13"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L13"
 				}
 			],
 			"type": {
@@ -53,7 +53,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx",
 											"line": 14,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L14"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L14"
 										}
 									],
 									"type": {
@@ -74,7 +74,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx",
 											"line": 15,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L15"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L15"
 										}
 									],
 									"type": {
@@ -100,7 +100,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx",
 											"line": 16,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L16"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L16"
 										}
 									],
 									"type": {
@@ -129,7 +129,7 @@
 									"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx",
 									"line": 13,
 									"character": 54,
-									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L13"
+									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L13"
 								}
 							]
 						}
@@ -148,7 +148,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 					"line": 12,
 					"character": 12,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L12"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L12"
 				}
 			],
 			"type": {
@@ -185,7 +185,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 											"line": 13,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L13"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L13"
 										}
 									],
 									"type": {
@@ -206,7 +206,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 											"line": 14,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L14"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L14"
 										}
 									],
 									"type": {
@@ -234,7 +234,7 @@
 									"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 									"line": 12,
 									"character": 49,
-									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L12"
+									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L12"
 								}
 							]
 						}
@@ -253,7 +253,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx",
 					"line": 10,
 					"character": 12,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L10"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L10"
 				}
 			],
 			"type": {
@@ -290,7 +290,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx",
 											"line": 11,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L11"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L11"
 										}
 									],
 									"type": {
@@ -316,7 +316,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx",
 											"line": 12,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L12"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L12"
 										}
 									],
 									"type": {
@@ -344,7 +344,7 @@
 									"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx",
 									"line": 10,
 									"character": 59,
-									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L10"
+									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L10"
 								}
 							]
 						}
@@ -363,7 +363,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts",
 					"line": 4,
 					"character": 12,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L4"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L4"
 				}
 			],
 			"type": {
@@ -400,7 +400,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts",
 											"line": 5,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L5"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L5"
 										}
 									],
 									"type": {
@@ -421,7 +421,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts",
 											"line": 6,
 											"character": 2,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L6"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L6"
 										}
 									],
 									"type": {
@@ -449,7 +449,7 @@
 									"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts",
 									"line": 4,
 									"character": 65,
-									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L4"
+									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetailsProps.ts#L4"
 								}
 							]
 						}
@@ -468,7 +468,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 					"line": 9,
 					"character": 12,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L9"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L9"
 				}
 			],
 			"typeParameters": [
@@ -509,7 +509,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 											"line": 9,
 											"character": 33,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L9"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L9"
 										}
 									],
 									"type": {
@@ -531,7 +531,7 @@
 									"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 									"line": 9,
 									"character": 31,
-									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L9"
+									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L9"
 								}
 							]
 						}
@@ -550,7 +550,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 					"line": 10,
 					"character": 12,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L10"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L10"
 				}
 			],
 			"typeParameters": [
@@ -593,7 +593,7 @@
 											"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 											"line": 10,
 											"character": 36,
-											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L10"
+											"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L10"
 										}
 									],
 									"type": {
@@ -615,7 +615,7 @@
 									"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 									"line": 10,
 									"character": 34,
-									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L10"
+									"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L10"
 								}
 							]
 						}
@@ -634,7 +634,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx",
 					"line": 19,
 					"character": 13,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L19"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/DataDetails.tsx#L19"
 				}
 			],
 			"signatures": [
@@ -722,7 +722,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 					"line": 17,
 					"character": 13,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L17"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L17"
 				}
 			],
 			"signatures": [
@@ -788,7 +788,7 @@
 															"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 															"line": 13,
 															"character": 2,
-															"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L13"
+															"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L13"
 														}
 													],
 													"type": {
@@ -809,7 +809,7 @@
 															"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 															"line": 14,
 															"character": 2,
-															"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L14"
+															"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L14"
 														}
 													],
 													"type": {
@@ -845,7 +845,7 @@
 													"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx",
 													"line": 12,
 													"character": 49,
-													"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L12"
+													"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/Details.tsx#L12"
 												}
 											]
 										}
@@ -939,7 +939,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx",
 					"line": 15,
 					"character": 13,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L15"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/JsonDetails.tsx#L15"
 				}
 			],
 			"signatures": [
@@ -1027,7 +1027,7 @@
 					"fileName": "packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetails.tsx",
 					"line": 10,
 					"character": 13,
-					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/6e04b89cd41a/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetails.tsx#L10"
+					"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/979e91e13a6b/packages/sdk/packages/payload/packages/details/src/components/Details/ValidationDetails/ValidationDetails.tsx#L10"
 				}
 			],
 			"signatures": [

package/dist/esm/components/Details/DataDetails.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import { ButtonEx } from '@xylabs/react-button';
+import { PayloadHasher } from '@xyo-network/hash';
+import { Property } from '@xyo-network/react-property';
+import { usePayloadHash } from '@xyo-network/react-shared';
+import { useState } from 'react';
+import { PayloadHashSourceDetails } from './HashSourceDetails';
+export const PayloadDataDetails = ({ size, badge, payload, ...props }) => {
+    const [viewSourceOpen, setViewSourceOpen] = useState(false);
+    const hash = usePayloadHash(payload);
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    const actions = [
+        {
+            icon: _jsx(VisibilityIcon, {}),
+            name: 'View',
+            onClick: () => setViewSourceOpen(true),
+        },
+        {
+            icon: _jsx(ContentCopyIcon, {}),
+            name: 'Copy',
+            onClick: async () => await navigator.clipboard.writeText(hash ?? ''),
+        },
+    ];
+    const onCopy = async () => {
+        const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : '';
+        await navigator.clipboard.writeText(payloadString);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Property, { titleProps: { elevation }, badge: badge, size: size, actions: actions, title: "Payload Hash", value: hash ?? '<Unknown>', tip: "This is the payload hash", ...props }), _jsxs(Dialog, { open: viewSourceOpen, onClose: () => setViewSourceOpen(false), children: [_jsx(DialogTitle, { children: "Hash Source" }), _jsx(DialogContent, { children: _jsx(PayloadHashSourceDetails, { noTitle: true, payload: payload }) }), _jsxs(DialogActions, { children: [_jsx(ButtonEx, { color: "secondary", onClick: onCopy, children: "Copy" }), _jsx(ButtonEx, { color: "secondary", onClick: () => setViewSourceOpen(false), children: "Close" })] })] })] }));
+};
+//# sourceMappingURL=DataDetails.js.map

package/dist/esm/components/Details/DataDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/DataDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,MAAM,iCAAiC,CAAA;AAC7D,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAiC,MAAM,6BAA6B,CAAA;AACrF,OAAO,EAAY,cAAc,EAAE,MAAM,2BAA2B,CAAA;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAQ9D,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1G,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAEpC,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,MAAM,OAAO,GAAqB;QAChC;YACE,IAAI,EAAE,KAAC,cAAc,KAAG;YACxB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC;SACvC;QACD;YACE,IAAI,EAAE,KAAC,eAAe,KAAG;YACzB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC;SACrE;KACF,CAAA;IAED,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE;QACxB,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAC/F,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;IACpD,CAAC,CAAA;IAED,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,UAAU,EAAE,EAAE,SAAS,EAAE,EACzB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,IAAI,IAAI,WAAW,EAC1B,GAAG,EAAC,0BAA0B,KAC1B,KAAK,GACT,EACF,MAAC,MAAM,IAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,aACnE,KAAC,WAAW,8BAA0B,EACtC,KAAC,aAAa,cACZ,KAAC,wBAAwB,IAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,GACxC,EAChB,MAAC,aAAa,eACZ,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,qBAEhC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,sBAExD,IACG,IACT,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/Details.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FlexCol } from '@xylabs/react-flexbox';
+import { forwardRef } from 'react';
+import { PayloadDataDetails } from './DataDetails';
+import { PayloadJsonDetails } from './JsonDetails';
+import { PayloadValidationDetails } from './ValidationDetails';
+export const PayloadDetails = forwardRef(({ paper, payload, ...props }, ref) => {
+    return (_jsxs(FlexCol, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ref: ref, ...props, children: [_jsx(PayloadDataDetails, { paper: paper, size: "large", badge: true, payload: payload }), _jsx(PayloadValidationDetails, { paper: paper, value: payload }), _jsx(PayloadJsonDetails, { paper: paper, payload: payload })] }));
+});
+PayloadDetails.displayName = 'PayloadDetails';
+//# sourceMappingURL=Details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAU9D,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAsC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClH,OAAO,CACL,MAAC,OAAO,IAAC,GAAG,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,aAClH,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,QAAC,OAAO,EAAE,OAAO,GAAI,EACzE,KAAC,wBAAwB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAI,EAC1D,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,IAC9C,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}

package/dist/esm/components/Details/HashSourceDetails.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { IconButton, Typography, useTheme } from '@mui/material';
+import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox';
+import { QuickTipButton } from '@xylabs/react-quick-tip-button';
+import { PayloadHasher } from '@xyo-network/hash';
+export const PayloadHashSourceDetails = ({ noTitle = false, payload, ...props }) => {
+    const theme = useTheme();
+    const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : '';
+    return (_jsxs(FlexCol, { alignItems: "stretch", ...props, children: [noTitle ? null : (_jsxs(FlexRow, { margin: 1, justifyContent: "flex-start", children: [_jsx(Typography, { children: "Hash Source" }), _jsx(QuickTipButton, { title: "Hash Source", children: "The actual string used to generate the hash (SHA256)" })] })), _jsxs(FlexRow, { children: [_jsx(FlexGrowRow, { background: true, border: 1, borderColor: theme.palette.divider, justifyContent: "start", children: _jsx(Typography, { padding: 2, fontFamily: "monospace", variant: "body1", sx: { overflowWrap: 'break-word', wordBreak: 'break-all' }, children: payloadString }) }), _jsx(IconButton, { children: _jsx(ContentCopyIcon, {}) })] }), noTitle ? (_jsx(FlexRow, { margin: 1, justifyContent: "flex-start", children: _jsx(Typography, { variant: "body2", children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." }) })) : null] }));
+};
+//# sourceMappingURL=HashSourceDetails.js.map

package/dist/esm/components/Details/HashSourceDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashSourceDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,MAAM,iCAAiC,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAQjD,MAAM,CAAC,MAAM,wBAAwB,GAA4C,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1H,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAE/F,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACpC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChB,MAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,aAC7C,KAAC,UAAU,8BAAyB,EACpC,KAAC,cAAc,IAAC,KAAK,EAAC,aAAa,qEAAsE,IACjG,CACX,EACD,MAAC,OAAO,eACN,KAAC,WAAW,IAAC,UAAU,QAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,EAAC,OAAO,YAC3F,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,YACtH,aAAa,GACH,GACD,EACd,KAAC,UAAU,cACT,KAAC,eAAe,KAAG,GACR,IACL,EACT,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,YAC7C,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,sHAEd,GACL,CACX,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/JsonDetails.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Paper, useMediaQuery, useTheme } from '@mui/material';
+import { FlexGrowRow } from '@xylabs/react-flexbox';
+import { PropertyGroup } from '@xyo-network/react-property';
+import { lazy, Suspense } from 'react';
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'));
+export const PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
+    const { breakpoints, palette } = useTheme();
+    const belowSm = useMediaQuery(breakpoints.down('sm'));
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined;
+    return (_jsx(PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: _jsx(Paper, { square: true, variant: "elevation", style: { overflow: 'hidden', padding: '16px', width: '100%' }, children: _jsx(Suspense, { fallback: _jsx(FlexGrowRow, {}), children: _jsx(JsonView, { groupArraysAfterLength: 20, style: { backgroundColor: undefined, overflow: 'hidden' }, src: payload, enableClipboard: true, theme: jsonTheme, collapseStringsAfterLength: belowSm ? 24 : 32, ...jsonViewProps }) }) }) }));
+};
+//# sourceMappingURL=JsonDetails.js.map

package/dist/esm/components/Details/JsonDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,EAAE,aAAa,EAAsB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAOzF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC3C,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtE,OAAO,CACL,KAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,KAAK,KAAK,YAChG,KAAC,KAAK,IAAC,MAAM,QAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAC7F,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,KAAG,YACjC,KAAC,QAAQ,IACP,sBAAsB,EAAE,EAAE,EAC1B,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACzD,GAAG,EAAE,OAAO,EACZ,eAAe,QACf,KAAK,EAAE,SAAS,EAChB,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KACzC,aAAa,GACjB,GACO,GACL,GACM,CACjB,CAAA;AACH,CAAC,CAAA"}