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

package/dist/node/components/Details/DataDetails.mjs

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

package/dist/node/components/Details/DataDetails.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/DataDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'\nimport { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\nimport { Property, PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { SizeProp, usePayloadHash } from '@xyo-network/react-shared'\nimport { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, payload, ...props }) => {\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: async () => await navigator.clipboard.writeText(hash ?? ''),\n    },\n  ]\n\n  const onCopy = async () => {\n    await navigator.clipboard.writeText(payloadString)\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx color=\"secondary\" onClick={onCopy}>\n            Copy\n          </ButtonEx>\n          <ButtonEx color=\"secondary\" onClick={() => setViewSourceOpen(false)}>\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n"],"mappings":"AA8BY,SAgBR,UAhBQ,KAgCJ,YAhCI;AA9BZ,SAAS,eAAe,iBAAiB,cAAc,sBAAsB;AAC7E,SAAS,QAAQ,eAAe,eAAe,mBAAmB;AAClE,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAE9B,SAAS,gBAA+C;AACxD,SAAmB,sBAAsB;AACzC,SAAS,gBAAgB;AAEzB,SAAS,gCAAgC;AAQlC,MAAM,qBAAwD,CAAC,EAAE,MAAM,OAAO,SAAS,GAAG,MAAM,MAAM;AAC3G,QAAM,gBAAgB,UAAU,KAAK,UAAU,cAAc,WAAW,OAAO,GAAG,MAAM,CAAC,IAAI;AAE7F,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,OAAO,eAAe,OAAO;AAEnC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,QAAM,UAA4B;AAAA,IAChC;AAAA,MACE,MAAM,oBAAC,kBAAe;AAAA,MACtB,MAAM;AAAA,MACN,SAAS,MAAM,kBAAkB,IAAI;AAAA,IACvC;AAAA,IACA;AAAA,MACE,MAAM,oBAAC,mBAAgB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS,YAAY,MAAM,UAAU,UAAU,UAAU,QAAQ,EAAE;AAAA,IACrE;AAAA,EACF;AAEA,QAAM,SAAS,YAAY;AACzB,UAAM,UAAU,UAAU,UAAU,aAAa;AAAA,EACnD;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAM;AAAA,QACN,OAAO,QAAQ;AAAA,QACf,KAAI;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,IACA,qBAAC,UAAO,MAAM,gBAAgB,SAAS,MAAM,kBAAkB,KAAK,GAClE;AAAA,0BAAC,eAAY,yBAAW;AAAA,MACxB,oBAAC,iBACC,8BAAC,4BAAyB,SAAO,MAAC,SAAkB,GACtD;AAAA,MACA,qBAAC,iBACC;AAAA,4BAAC,YAAS,OAAM,aAAY,SAAS,QAAQ,kBAE7C;AAAA,QACA,oBAAC,YAAS,OAAM,aAAY,SAAS,MAAM,kBAAkB,KAAK,GAAG,mBAErE;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/node/components/Details/Details.d.mts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { Payload } from '@xyo-network/payload-model';
+export type WithPaper<T> = T & {
+    paper: true;
+};
+export type WithoutPaper<T> = T & {
+    paper?: false;
+};
+export type PayloadDetailsProps = FlexBoxProps & {
+    paper?: boolean;
+    payload?: Payload;
+};
+export declare const PayloadDetails: import("react").ForwardRefExoticComponent<import("@xylabs/react-flexbox").BusyBoxProps & {
+    paper?: boolean | undefined;
+    payload?: ({
+        schema: string;
+    } & import("@xyo-network/payload-model").PayloadFields) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Details.d.ts.map

package/dist/node/components/Details/Details.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,IAAI,CAAA;CAAE,CAAA;AAC9C,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEnD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;kDAQzB,CAAA"}

package/dist/node/components/Details/Details.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { Payload } from '@xyo-network/payload-model';
+export type WithPaper<T> = T & {
+    paper: true;
+};
+export type WithoutPaper<T> = T & {
+    paper?: false;
+};
+export type PayloadDetailsProps = FlexBoxProps & {
+    paper?: boolean;
+    payload?: Payload;
+};
+export declare const PayloadDetails: import("react").ForwardRefExoticComponent<import("@xylabs/react-flexbox").BusyBoxProps & {
+    paper?: boolean | undefined;
+    payload?: ({
+        schema: string;
+    } & import("@xyo-network/payload-model").PayloadFields) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Details.d.ts.map

package/dist/node/components/Details/Details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,IAAI,CAAA;CAAE,CAAA;AAC9C,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEnD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;kDAQzB,CAAA"}

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

@@ -0,0 +1,42 @@
+"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 Details_exports = {};
+__export(Details_exports, {
+  PayloadDetails: () => PayloadDetails
+});
+module.exports = __toCommonJS(Details_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_DataDetails = require("./DataDetails");
+var import_JsonDetails = require("./JsonDetails");
+var import_ValidationDetails = require("./ValidationDetails");
+const PayloadDetails = (0, import_react.forwardRef)(({ paper, payload, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ref, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataDetails.PayloadDataDetails, { paper, size: "large", badge: true, payload }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ValidationDetails.PayloadValidationDetails, { paper, value: payload }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_JsonDetails.PayloadJsonDetails, { paper, payload })
+  ] });
+});
+PayloadDetails.displayName = "PayloadDetails";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayloadDetails
+});
+//# sourceMappingURL=Details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/Details.tsx"],"sourcesContent":["import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\nimport { Payload } from '@xyo-network/payload-model'\nimport { forwardRef } from 'react'\n\nimport { PayloadDataDetails } from './DataDetails'\nimport { PayloadJsonDetails } from './JsonDetails'\nimport { PayloadValidationDetails } from './ValidationDetails'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails = forwardRef<HTMLDivElement, PayloadDetailsProps>(({ paper, payload, ...props }, ref) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} ref={ref} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n})\n\nPayloadDetails.displayName = 'PayloadDetails'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAlBJ,2BAAsC;AAEtC,mBAA2B;AAE3B,yBAAmC;AACnC,yBAAmC;AACnC,+BAAyC;AAUlC,MAAM,qBAAiB,yBAAgD,CAAC,EAAE,OAAO,SAAS,GAAG,MAAM,GAAG,QAAQ;AACnH,SACE,6CAAC,gCAAQ,KAAK,GAAG,gBAAe,cAAa,YAAW,WAAU,WAAW,GAAG,cAAc,GAAG,KAAW,GAAG,OAC7G;AAAA,gDAAC,yCAAmB,OAAc,MAAK,SAAQ,OAAK,MAAC,SAAkB;AAAA,IACvE,4CAAC,qDAAyB,OAAc,OAAO,SAAS;AAAA,IACxD,4CAAC,yCAAmB,OAAc,SAAkB;AAAA,KACtD;AAEJ,CAAC;AAED,eAAe,cAAc;","names":[]}

package/dist/node/components/Details/Details.mjs

@@ -0,0 +1,18 @@
+import { jsx, 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";
+const PayloadDetails = forwardRef(({ paper, payload, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(FlexCol, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ref, ...props, children: [
+    /* @__PURE__ */ jsx(PayloadDataDetails, { paper, size: "large", badge: true, payload }),
+    /* @__PURE__ */ jsx(PayloadValidationDetails, { paper, value: payload }),
+    /* @__PURE__ */ jsx(PayloadJsonDetails, { paper, payload })
+  ] });
+});
+PayloadDetails.displayName = "PayloadDetails";
+export {
+  PayloadDetails
+};
+//# sourceMappingURL=Details.mjs.map

package/dist/node/components/Details/Details.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/Details.tsx"],"sourcesContent":["import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\nimport { Payload } from '@xyo-network/payload-model'\nimport { forwardRef } from 'react'\n\nimport { PayloadDataDetails } from './DataDetails'\nimport { PayloadJsonDetails } from './JsonDetails'\nimport { PayloadValidationDetails } from './ValidationDetails'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails = forwardRef<HTMLDivElement, PayloadDetailsProps>(({ paper, payload, ...props }, ref) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} ref={ref} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n})\n\nPayloadDetails.displayName = 'PayloadDetails'\n"],"mappings":"AAkBI,SACE,KADF;AAlBJ,SAAuB,eAAe;AAEtC,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AAUlC,MAAM,iBAAiB,WAAgD,CAAC,EAAE,OAAO,SAAS,GAAG,MAAM,GAAG,QAAQ;AACnH,SACE,qBAAC,WAAQ,KAAK,GAAG,gBAAe,cAAa,YAAW,WAAU,WAAW,GAAG,cAAc,GAAG,KAAW,GAAG,OAC7G;AAAA,wBAAC,sBAAmB,OAAc,MAAK,SAAQ,OAAK,MAAC,SAAkB;AAAA,IACvE,oBAAC,4BAAyB,OAAc,OAAO,SAAS;AAAA,IACxD,oBAAC,sBAAmB,OAAc,SAAkB;AAAA,KACtD;AAEJ,CAAC;AAED,eAAe,cAAc;","names":[]}

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

@@ -0,0 +1,86 @@
+"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 Details_stories_exports = {};
+__export(Details_stories_exports, {
+  Default: () => Default,
+  DefaultPaper: () => DefaultPaper,
+  WithArchiveLink: () => WithArchiveLink,
+  WithArchiveLinkPaper: () => WithArchiveLinkPaper,
+  WithBuilderSample: () => WithBuilderSample,
+  WithBuilderSamplePaper: () => WithBuilderSamplePaper,
+  WithSample: () => WithSample,
+  WithSamplePaper: () => WithSamplePaper,
+  default: () => Details_stories_default
+});
+module.exports = __toCommonJS(Details_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_storybook = require("@xyo-network/react-storybook");
+var import_react_router_dom = require("react-router-dom");
+var import_Details = require("./Details");
+const StorybookEntry = {
+  argTypes: {},
+  component: import_Details.PayloadDetails,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "payload/Details"
+};
+const Template = (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.BrowserRouter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_router_dom.Routes, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { path: "temp", element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Successfully navigated to archivePath" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Details.PayloadDetails, { ...args }) })
+] }) });
+const Default = Template.bind({});
+Default.args = {};
+Default.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithSample = Template.bind({});
+WithSample.args = { payload: import_react_storybook.sampleIdPayload };
+WithSample.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithBuilderSample = Template.bind({});
+WithBuilderSample.args = { payload: import_react_storybook.samplePayloadFromBuilder };
+WithBuilderSample.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithArchiveLink = Template.bind({});
+WithArchiveLink.args = { payload: import_react_storybook.samplePayloadFromBuilder };
+WithArchiveLink.decorators = [import_react_storybook.useAppThemeDecorator];
+const DefaultPaper = Template.bind({});
+DefaultPaper.args = { paper: true };
+DefaultPaper.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithSamplePaper = Template.bind({});
+WithSamplePaper.args = { paper: true, payload: import_react_storybook.sampleIdPayload };
+WithSamplePaper.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithBuilderSamplePaper = Template.bind({});
+WithBuilderSamplePaper.args = { paper: true, payload: import_react_storybook.samplePayloadFromBuilder };
+WithBuilderSamplePaper.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithArchiveLinkPaper = Template.bind({});
+WithArchiveLinkPaper.args = { paper: true, payload: import_react_storybook.samplePayloadFromBuilder };
+WithArchiveLinkPaper.decorators = [import_react_storybook.useAppThemeDecorator];
+var Details_stories_default = StorybookEntry;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Default,
+  DefaultPaper,
+  WithArchiveLink,
+  WithArchiveLinkPaper,
+  WithBuilderSample,
+  WithBuilderSamplePaper,
+  WithSample,
+  WithSamplePaper
+});
+//# sourceMappingURL=Details.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/Details.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { sampleIdPayload, samplePayloadFromBuilder, useAppThemeDecorator } from '@xyo-network/react-storybook'\nimport { BrowserRouter, Route, Routes } from 'react-router-dom'\n\nimport { PayloadDetails } from './Details'\n\nconst StorybookEntry = {\n  argTypes: {},\n  component: PayloadDetails,\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  title: 'payload/Details',\n} as Meta<typeof PayloadDetails>\n\nconst Template: StoryFn<typeof PayloadDetails> = (args) => (\n  <BrowserRouter>\n    <Routes>\n      <Route path=\"temp\" element={<h1>Successfully navigated to archivePath</h1>} />\n      <Route path=\"*\" element={<PayloadDetails {...args}></PayloadDetails>}></Route>\n    </Routes>\n  </BrowserRouter>\n)\n\nconst Default = Template.bind({})\nDefault.args = {}\nDefault.decorators = [useAppThemeDecorator]\n\nconst WithSample = Template.bind({})\nWithSample.args = { payload: sampleIdPayload }\nWithSample.decorators = [useAppThemeDecorator]\n\nconst WithBuilderSample = Template.bind({})\nWithBuilderSample.args = { payload: samplePayloadFromBuilder }\nWithBuilderSample.decorators = [useAppThemeDecorator]\n\nconst WithArchiveLink = Template.bind({})\nWithArchiveLink.args = { payload: samplePayloadFromBuilder }\nWithArchiveLink.decorators = [useAppThemeDecorator]\n\nconst DefaultPaper = Template.bind({})\nDefaultPaper.args = { paper: true }\nDefaultPaper.decorators = [useAppThemeDecorator]\n\nconst WithSamplePaper = Template.bind({})\nWithSamplePaper.args = { paper: true, payload: sampleIdPayload }\nWithSamplePaper.decorators = [useAppThemeDecorator]\n\nconst WithBuilderSamplePaper = Template.bind({})\nWithBuilderSamplePaper.args = { paper: true, payload: samplePayloadFromBuilder }\nWithBuilderSamplePaper.decorators = [useAppThemeDecorator]\n\nconst WithArchiveLinkPaper = Template.bind({})\nWithArchiveLinkPaper.args = { paper: true, payload: samplePayloadFromBuilder }\nWithArchiveLinkPaper.decorators = [useAppThemeDecorator]\n\nexport { Default, DefaultPaper, WithArchiveLink, WithArchiveLinkPaper, WithBuilderSample, WithBuilderSamplePaper, WithSample, WithSamplePaper }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAlBJ,6BAAgF;AAChF,8BAA6C;AAE7C,qBAA+B;AAE/B,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAA2C,CAAC,SAChD,4CAAC,yCACC,uDAAC,kCACC;AAAA,8CAAC,iCAAM,MAAK,QAAO,SAAS,4CAAC,QAAG,mDAAqC,GAAO;AAAA,EAC5E,4CAAC,iCAAM,MAAK,KAAI,SAAS,4CAAC,iCAAgB,GAAG,MAAM,GAAmB;AAAA,GACxE,GACF;AAGF,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAChB,QAAQ,aAAa,CAAC,2CAAoB;AAE1C,MAAM,aAAa,SAAS,KAAK,CAAC,CAAC;AACnC,WAAW,OAAO,EAAE,SAAS,uCAAgB;AAC7C,WAAW,aAAa,CAAC,2CAAoB;AAE7C,MAAM,oBAAoB,SAAS,KAAK,CAAC,CAAC;AAC1C,kBAAkB,OAAO,EAAE,SAAS,gDAAyB;AAC7D,kBAAkB,aAAa,CAAC,2CAAoB;AAEpD,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AACxC,gBAAgB,OAAO,EAAE,SAAS,gDAAyB;AAC3D,gBAAgB,aAAa,CAAC,2CAAoB;AAElD,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO,EAAE,OAAO,KAAK;AAClC,aAAa,aAAa,CAAC,2CAAoB;AAE/C,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AACxC,gBAAgB,OAAO,EAAE,OAAO,MAAM,SAAS,uCAAgB;AAC/D,gBAAgB,aAAa,CAAC,2CAAoB;AAElD,MAAM,yBAAyB,SAAS,KAAK,CAAC,CAAC;AAC/C,uBAAuB,OAAO,EAAE,OAAO,MAAM,SAAS,gDAAyB;AAC/E,uBAAuB,aAAa,CAAC,2CAAoB;AAEzD,MAAM,uBAAuB,SAAS,KAAK,CAAC,CAAC;AAC7C,qBAAqB,OAAO,EAAE,OAAO,MAAM,SAAS,gDAAyB;AAC7E,qBAAqB,aAAa,CAAC,2CAAoB;AAKvD,IAAO,0BAAQ;","names":[]}

package/dist/node/components/Details/Details.stories.mjs

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { sampleIdPayload, samplePayloadFromBuilder, useAppThemeDecorator } from "@xyo-network/react-storybook";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { PayloadDetails } from "./Details";
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadDetails,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "payload/Details"
+};
+const Template = (args) => /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsxs(Routes, { children: [
+  /* @__PURE__ */ jsx(Route, { path: "temp", element: /* @__PURE__ */ jsx("h1", { children: "Successfully navigated to archivePath" }) }),
+  /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(PayloadDetails, { ...args }) })
+] }) });
+const Default = Template.bind({});
+Default.args = {};
+Default.decorators = [useAppThemeDecorator];
+const WithSample = Template.bind({});
+WithSample.args = { payload: sampleIdPayload };
+WithSample.decorators = [useAppThemeDecorator];
+const WithBuilderSample = Template.bind({});
+WithBuilderSample.args = { payload: samplePayloadFromBuilder };
+WithBuilderSample.decorators = [useAppThemeDecorator];
+const WithArchiveLink = Template.bind({});
+WithArchiveLink.args = { payload: samplePayloadFromBuilder };
+WithArchiveLink.decorators = [useAppThemeDecorator];
+const DefaultPaper = Template.bind({});
+DefaultPaper.args = { paper: true };
+DefaultPaper.decorators = [useAppThemeDecorator];
+const WithSamplePaper = Template.bind({});
+WithSamplePaper.args = { paper: true, payload: sampleIdPayload };
+WithSamplePaper.decorators = [useAppThemeDecorator];
+const WithBuilderSamplePaper = Template.bind({});
+WithBuilderSamplePaper.args = { paper: true, payload: samplePayloadFromBuilder };
+WithBuilderSamplePaper.decorators = [useAppThemeDecorator];
+const WithArchiveLinkPaper = Template.bind({});
+WithArchiveLinkPaper.args = { paper: true, payload: samplePayloadFromBuilder };
+WithArchiveLinkPaper.decorators = [useAppThemeDecorator];
+var Details_stories_default = StorybookEntry;
+export {
+  Default,
+  DefaultPaper,
+  WithArchiveLink,
+  WithArchiveLinkPaper,
+  WithBuilderSample,
+  WithBuilderSamplePaper,
+  WithSample,
+  WithSamplePaper,
+  Details_stories_default as default
+};
+//# sourceMappingURL=Details.stories.mjs.map

package/dist/node/components/Details/Details.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/Details.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { sampleIdPayload, samplePayloadFromBuilder, useAppThemeDecorator } from '@xyo-network/react-storybook'\nimport { BrowserRouter, Route, Routes } from 'react-router-dom'\n\nimport { PayloadDetails } from './Details'\n\nconst StorybookEntry = {\n  argTypes: {},\n  component: PayloadDetails,\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  title: 'payload/Details',\n} as Meta<typeof PayloadDetails>\n\nconst Template: StoryFn<typeof PayloadDetails> = (args) => (\n  <BrowserRouter>\n    <Routes>\n      <Route path=\"temp\" element={<h1>Successfully navigated to archivePath</h1>} />\n      <Route path=\"*\" element={<PayloadDetails {...args}></PayloadDetails>}></Route>\n    </Routes>\n  </BrowserRouter>\n)\n\nconst Default = Template.bind({})\nDefault.args = {}\nDefault.decorators = [useAppThemeDecorator]\n\nconst WithSample = Template.bind({})\nWithSample.args = { payload: sampleIdPayload }\nWithSample.decorators = [useAppThemeDecorator]\n\nconst WithBuilderSample = Template.bind({})\nWithBuilderSample.args = { payload: samplePayloadFromBuilder }\nWithBuilderSample.decorators = [useAppThemeDecorator]\n\nconst WithArchiveLink = Template.bind({})\nWithArchiveLink.args = { payload: samplePayloadFromBuilder }\nWithArchiveLink.decorators = [useAppThemeDecorator]\n\nconst DefaultPaper = Template.bind({})\nDefaultPaper.args = { paper: true }\nDefaultPaper.decorators = [useAppThemeDecorator]\n\nconst WithSamplePaper = Template.bind({})\nWithSamplePaper.args = { paper: true, payload: sampleIdPayload }\nWithSamplePaper.decorators = [useAppThemeDecorator]\n\nconst WithBuilderSamplePaper = Template.bind({})\nWithBuilderSamplePaper.args = { paper: true, payload: samplePayloadFromBuilder }\nWithBuilderSamplePaper.decorators = [useAppThemeDecorator]\n\nconst WithArchiveLinkPaper = Template.bind({})\nWithArchiveLinkPaper.args = { paper: true, payload: samplePayloadFromBuilder }\nWithArchiveLinkPaper.decorators = [useAppThemeDecorator]\n\nexport { Default, DefaultPaper, WithArchiveLink, WithArchiveLinkPaper, WithBuilderSample, WithBuilderSamplePaper, WithSample, WithSamplePaper }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":"AAmBI,SAC8B,KAD9B;AAlBJ,SAAS,iBAAiB,0BAA0B,4BAA4B;AAChF,SAAS,eAAe,OAAO,cAAc;AAE7C,SAAS,sBAAsB;AAE/B,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAA2C,CAAC,SAChD,oBAAC,iBACC,+BAAC,UACC;AAAA,sBAAC,SAAM,MAAK,QAAO,SAAS,oBAAC,QAAG,mDAAqC,GAAO;AAAA,EAC5E,oBAAC,SAAM,MAAK,KAAI,SAAS,oBAAC,kBAAgB,GAAG,MAAM,GAAmB;AAAA,GACxE,GACF;AAGF,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAChB,QAAQ,aAAa,CAAC,oBAAoB;AAE1C,MAAM,aAAa,SAAS,KAAK,CAAC,CAAC;AACnC,WAAW,OAAO,EAAE,SAAS,gBAAgB;AAC7C,WAAW,aAAa,CAAC,oBAAoB;AAE7C,MAAM,oBAAoB,SAAS,KAAK,CAAC,CAAC;AAC1C,kBAAkB,OAAO,EAAE,SAAS,yBAAyB;AAC7D,kBAAkB,aAAa,CAAC,oBAAoB;AAEpD,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AACxC,gBAAgB,OAAO,EAAE,SAAS,yBAAyB;AAC3D,gBAAgB,aAAa,CAAC,oBAAoB;AAElD,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO,EAAE,OAAO,KAAK;AAClC,aAAa,aAAa,CAAC,oBAAoB;AAE/C,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AACxC,gBAAgB,OAAO,EAAE,OAAO,MAAM,SAAS,gBAAgB;AAC/D,gBAAgB,aAAa,CAAC,oBAAoB;AAElD,MAAM,yBAAyB,SAAS,KAAK,CAAC,CAAC;AAC/C,uBAAuB,OAAO,EAAE,OAAO,MAAM,SAAS,yBAAyB;AAC/E,uBAAuB,aAAa,CAAC,oBAAoB;AAEzD,MAAM,uBAAuB,SAAS,KAAK,CAAC,CAAC;AAC7C,qBAAqB,OAAO,EAAE,OAAO,MAAM,SAAS,yBAAyB;AAC7E,qBAAqB,aAAa,CAAC,oBAAoB;AAKvD,IAAO,0BAAQ;","names":[]}

package/dist/node/components/Details/HashSourceDetails.d.mts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { Payload } from '@xyo-network/payload-model';
+export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
+    noTitle?: boolean;
+    payload?: Payload;
+}
+export declare const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps>;
+//# sourceMappingURL=HashSourceDetails.d.ts.map

package/dist/node/components/Details/HashSourceDetails.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashSourceDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAiC,MAAM,uBAAuB,CAAA;AAGnF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,MAAM,WAAW,6BAA8B,SAAQ,YAAY;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA+B5E,CAAA"}

package/dist/node/components/Details/HashSourceDetails.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { Payload } from '@xyo-network/payload-model';
+export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
+    noTitle?: boolean;
+    payload?: Payload;
+}
+export declare const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps>;
+//# sourceMappingURL=HashSourceDetails.d.ts.map

package/dist/node/components/Details/HashSourceDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashSourceDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAiC,MAAM,uBAAuB,CAAA;AAGnF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,MAAM,WAAW,6BAA8B,SAAQ,YAAY;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA+B5E,CAAA"}

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

@@ -0,0 +1,49 @@
+"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 HashSourceDetails_exports = {};
+__export(HashSourceDetails_exports, {
+  PayloadHashSourceDetails: () => PayloadHashSourceDetails
+});
+module.exports = __toCommonJS(HashSourceDetails_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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");
+const 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
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayloadHashSourceDetails
+});
+//# sourceMappingURL=HashSourceDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport { IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({ noTitle = false, payload, ...props }) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle ? null : (\n        <FlexRow margin={1} justifyContent=\"flex-start\">\n          <Typography>Hash Source</Typography>\n          <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n        </FlexRow>\n      )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.palette.divider} justifyContent=\"start\">\n          <Typography padding={2} fontFamily=\"monospace\" variant=\"body1\" sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}>\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle ? (\n        <FlexRow margin={1} justifyContent=\"flex-start\">\n          <Typography variant=\"body2\">\n            The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n          </Typography>\n        </FlexRow>\n      ) : null}\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAnBR,4BAA+C;AAC/C,sBAAiD;AACjD,2BAA4D;AAC5D,oCAA+B;AAC/B,kBAA8B;AAQvB,MAAM,2BAAoE,CAAC,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,MAAM;AAC3H,QAAM,YAAQ,0BAAS;AACvB,QAAM,gBAAgB,UAAU,KAAK,UAAU,0BAAc,WAAW,OAAO,GAAG,MAAM,CAAC,IAAI;AAE7F,SACE,6CAAC,gCAAQ,YAAW,WAAW,GAAG,OAC/B;AAAA,cAAU,OACT,6CAAC,gCAAQ,QAAQ,GAAG,gBAAe,cACjC;AAAA,kDAAC,8BAAW,yBAAW;AAAA,MACvB,4CAAC,gDAAe,OAAM,eAAc,kEAAoD;AAAA,OAC1F;AAAA,IAEF,6CAAC,gCACC;AAAA,kDAAC,oCAAY,YAAU,MAAC,QAAQ,GAAG,aAAa,MAAM,QAAQ,SAAS,gBAAe,SACpF,sDAAC,8BAAW,SAAS,GAAG,YAAW,aAAY,SAAQ,SAAQ,IAAI,EAAE,cAAc,cAAc,WAAW,YAAY,GACrH,yBACH,GACF;AAAA,MACA,4CAAC,8BACC,sDAAC,sBAAAA,aAAA,EAAgB,GACnB;AAAA,OACF;AAAA,IACC,UACC,4CAAC,gCAAQ,QAAQ,GAAG,gBAAe,cACjC,sDAAC,8BAAW,SAAQ,SAAQ,mHAE5B,GACF,IACE;AAAA,KACN;AAEJ;","names":["ContentCopyIcon"]}

package/dist/node/components/Details/HashSourceDetails.mjs

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

package/dist/node/components/Details/HashSourceDetails.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport { IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({ noTitle = false, payload, ...props }) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle ? null : (\n        <FlexRow margin={1} justifyContent=\"flex-start\">\n          <Typography>Hash Source</Typography>\n          <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n        </FlexRow>\n      )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.palette.divider} justifyContent=\"start\">\n          <Typography padding={2} fontFamily=\"monospace\" variant=\"body1\" sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}>\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle ? (\n        <FlexRow margin={1} justifyContent=\"flex-start\">\n          <Typography variant=\"body2\">\n            The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n          </Typography>\n        </FlexRow>\n      ) : null}\n    </FlexCol>\n  )\n}\n"],"mappings":"AAmBQ,SACE,KADF;AAnBR,SAAS,eAAe,uBAAuB;AAC/C,SAAS,YAAY,YAAY,gBAAgB;AACjD,SAAuB,SAAS,aAAa,eAAe;AAC5D,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAQvB,MAAM,2BAAoE,CAAC,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,MAAM;AAC3H,QAAM,QAAQ,SAAS;AACvB,QAAM,gBAAgB,UAAU,KAAK,UAAU,cAAc,WAAW,OAAO,GAAG,MAAM,CAAC,IAAI;AAE7F,SACE,qBAAC,WAAQ,YAAW,WAAW,GAAG,OAC/B;AAAA,cAAU,OACT,qBAAC,WAAQ,QAAQ,GAAG,gBAAe,cACjC;AAAA,0BAAC,cAAW,yBAAW;AAAA,MACvB,oBAAC,kBAAe,OAAM,eAAc,kEAAoD;AAAA,OAC1F;AAAA,IAEF,qBAAC,WACC;AAAA,0BAAC,eAAY,YAAU,MAAC,QAAQ,GAAG,aAAa,MAAM,QAAQ,SAAS,gBAAe,SACpF,8BAAC,cAAW,SAAS,GAAG,YAAW,aAAY,SAAQ,SAAQ,IAAI,EAAE,cAAc,cAAc,WAAW,YAAY,GACrH,yBACH,GACF;AAAA,MACA,oBAAC,cACC,8BAAC,mBAAgB,GACnB;AAAA,OACF;AAAA,IACC,UACC,oBAAC,WAAQ,QAAQ,GAAG,gBAAe,cACjC,8BAAC,cAAW,SAAQ,SAAQ,mHAE5B,GACF,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/node/components/Details/JsonDetails.d.mts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Payload } from '@xyo-network/payload-model';
+import { PropertyGroupProps } from '@xyo-network/react-property';
+import { ReactJsonViewProps } from 'react-json-view';
+export type PayloadJsonDetailsProps = PropertyGroupProps & {
+    jsonViewProps?: ReactJsonViewProps;
+    payload?: Payload;
+};
+export declare const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps>;
+//# sourceMappingURL=JsonDetails.d.ts.map

package/dist/node/components/Details/JsonDetails.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAE/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAIpD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG;IACzD,aAAa,CAAC,EAAE,kBAAkB,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA4BhE,CAAA"}

package/dist/node/components/Details/JsonDetails.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Payload } from '@xyo-network/payload-model';
+import { PropertyGroupProps } from '@xyo-network/react-property';
+import { ReactJsonViewProps } from 'react-json-view';
+export type PayloadJsonDetailsProps = PropertyGroupProps & {
+    jsonViewProps?: ReactJsonViewProps;
+    payload?: Payload;
+};
+export declare const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps>;
+//# sourceMappingURL=JsonDetails.d.ts.map

package/dist/node/components/Details/JsonDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAE/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAIpD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG;IACzD,aAAa,CAAC,EAAE,kBAAkB,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA4BhE,CAAA"}

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

@@ -0,0 +1,68 @@
+"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);
+var JsonDetails_exports = {};
+__export(JsonDetails_exports, {
+  PayloadJsonDetails: () => PayloadJsonDetails
+});
+module.exports = __toCommonJS(JsonDetails_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_property = require("@xyo-network/react-property");
+var import_react = require("react");
+const JsonView = (0, import_react.lazy)(() => import(
+  /* webpackChunkName: "jsonView" */
+  "react-json-view"
+));
+const PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
+  const { breakpoints, palette } = (0, import_material.useTheme)();
+  const belowSm = (0, import_material.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_runtime.jsx)(import_react_property.PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Paper, { square: true, variant: "elevation", style: { overflow: "hidden", padding: "16px", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexGrowRow, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    JsonView,
+    {
+      groupArraysAfterLength: 20,
+      style: { backgroundColor: void 0, overflow: "hidden" },
+      src: payload,
+      enableClipboard: true,
+      theme: jsonTheme,
+      collapseStringsAfterLength: belowSm ? 24 : 32,
+      ...jsonViewProps
+    }
+  ) }) }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayloadJsonDetails
+});
+//# sourceMappingURL=JsonDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Details/JsonDetails.tsx"],"sourcesContent":["import { Paper, useMediaQuery, useTheme } from '@mui/material'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { Payload } from '@xyo-network/payload-model'\nimport { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'\nimport { lazy, Suspense } from 'react'\nimport { ReactJsonViewProps } from 'react-json-view'\n\nconst JsonView = lazy(() => import(/* webpackChunkName: \"jsonView\" */ 'react-json-view'))\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: ReactJsonViewProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonViewProps, payload = {}, ...props }) => {\n  const { breakpoints, palette } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper square variant=\"elevation\" style={{ overflow: 'hidden', padding: '16px', width: '100%' }}>\n        <Suspense fallback={<FlexGrowRow />}>\n          <JsonView\n            groupArraysAfterLength={20}\n            style={{ backgroundColor: undefined, overflow: 'hidden' }}\n            src={payload}\n            enableClipboard\n            theme={jsonTheme}\n            collapseStringsAfterLength={belowSm ? 24 : 32}\n            {...jsonViewProps}\n          />\n        </Suspense>\n      </Paper>\n    </PropertyGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4B4B;AA5B5B,sBAA+C;AAC/C,2BAA4B;AAE5B,4BAAkD;AAClD,mBAA+B;AAG/B,MAAM,eAAW,mBAAK,MAAM;AAAA;AAAA,EAA0C;AAAiB,CAAC;AAOjF,MAAM,qBAAwD,CAAC,EAAE,eAAe,UAAU,CAAC,GAAG,GAAG,MAAM,MAAM;AAClH,QAAM,EAAE,aAAa,QAAQ,QAAI,0BAAS;AAC1C,QAAM,cAAU,+BAAc,YAAY,KAAK,IAAI,CAAC;AAEpD,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,QAAM,YAAY,QAAQ,SAAS,SAAS,iBAAiB;AAE7D,SACE,4CAAC,uCAAc,YAAY,EAAE,UAAU,GAAG,OAAM,QAAO,KAAI,+BAA+B,GAAG,OAC3F,sDAAC,yBAAM,QAAM,MAAC,SAAQ,aAAY,OAAO,EAAE,UAAU,UAAU,SAAS,QAAQ,OAAO,OAAO,GAC5F,sDAAC,yBAAS,UAAU,4CAAC,oCAAY,GAC/B;AAAA,IAAC;AAAA;AAAA,MACC,wBAAwB;AAAA,MACxB,OAAO,EAAE,iBAAiB,QAAW,UAAU,SAAS;AAAA,MACxD,KAAK;AAAA,MACL,iBAAe;AAAA,MACf,OAAO;AAAA,MACP,4BAA4B,UAAU,KAAK;AAAA,MAC1C,GAAG;AAAA;AAAA,EACN,GACF,GACF,GACF;AAEJ;","names":[]}