@xyo-network/react-payload 2.25.21 → 2.25.22

package/dist/esm/components/Details/DataDetails.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { FlexBoxProps } from '@xylabs/sdk-react';
 import { XyoPayload } from '@xyo-network/core';
+import { PropertyProps } from '@xyo-network/react-property';
 import { SizeProp } from '@xyo-network/react-shared';
-export interface PayloadDataDetailsProps extends FlexBoxProps {
-    value?: XyoPayload;
+export declare type PayloadDataDetailsProps = PropertyProps & {
+    payload?: XyoPayload;
     size?: SizeProp;
     badge?: boolean;
-}
+};
 export declare const PayloadDataDetails: React.FC<PayloadDataDetailsProps>;

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

@@ -1,17 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, FlexCol } from '@xylabs/sdk-react';
+import { ButtonEx } from '@xylabs/sdk-react';
 import { XyoPayloadWrapper } from '@xyo-network/core';
-import { Property, usePropertyHeroProps } from '@xyo-network/react-property';
+import { Property } from '@xyo-network/react-property';
 import { useState } from 'react';
 import { PayloadHashSourceDetails } from './HashSourceDetails';
-export const PayloadDataDetails = ({ size, badge, value, ...props }) => {
-    const wrapper = value ? new XyoPayloadWrapper(value) : undefined;
-    const propertyHeroProps = usePropertyHeroProps(props);
+export const PayloadDataDetails = ({ size, badge, payload, ...props }) => {
+    const wrapper = payload ? new XyoPayloadWrapper(payload) : undefined;
     const [viewSourceOpen, setViewSourceOpen] = useState(false);
     const hash = wrapper?.hash;
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
     const actions = [
         {
             icon: _jsx(VisibilityIcon, {}),
@@ -27,6 +30,6 @@ export const PayloadDataDetails = ({ size, badge, value, ...props }) => {
     const onCopy = async () => {
         await navigator.clipboard.writeText(wrapper?.stringified ?? '');
     };
-    return (_jsxs(FlexCol, { alignItems: "stretch", ...props, children: [_jsx(Property, { variant: "outlined", badge: badge, size: size, actions: actions, title: "Payload Hash", value: hash ?? '<Unknown>', tip: "This is the payload hash", ...propertyHeroProps }), _jsxs(Dialog, { open: viewSourceOpen, onClose: () => setViewSourceOpen(false), children: [_jsx(DialogTitle, { children: "Hash Source" }), _jsx(DialogContent, { children: _jsx(PayloadHashSourceDetails, { noTitle: true, payload: value }) }), _jsxs(DialogActions, { children: [_jsx(ButtonEx, { color: "secondary", onClick: onCopy, children: "Copy" }), _jsx(ButtonEx, { color: "secondary", onClick: () => setViewSourceOpen(false), children: "Close" })] })] })] }));
+    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

@@ -1 +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,EAAgB,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAc,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAkB,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAE5F,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,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEhE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,CAAA;IAE1B,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,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC;SAC9E;KACF,CAAA;IAED,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE;QACxB,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,IAAI,EAAE,CAAC,CAAA;IACjE,CAAC,CAAA;IAED,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,QAAQ,IACP,OAAO,EAAC,UAAU,EAClB,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,iBAAiB,GACrB,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,KAAK,GAAI,GACtC,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,IACD,CACX,CAAA;AACH,CAAC,CAAA"}
+{"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,mBAAmB,CAAA;AAC5C,OAAO,EAAc,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAiC,MAAM,6BAA6B,CAAA;AAErF,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,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,CAAA;IAE1B,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,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC;SAC9E;KACF,CAAA;IAED,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE;QACxB,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,IAAI,EAAE,CAAC,CAAA;IACjE,CAAC,CAAA;IAED,OAAO,CACL,8BACE,KAAC,QAAQ,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,IAAI,IAAI,WAAW,EAAE,GAAG,EAAC,0BAA0B,KAAK,KAAK,GAAI,EAC9K,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.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import { StackProps } from '@mui/material';
 import { XyoPayload } from '@xyo-network/core';
-import { PayloadDataDetailsProps } from './DataDetails';
-import { PayloadJsonDetailsProps } from './JsonDetails';
-import { PayloadMetaDetailsProps } from './MetaDetails';
-import { PayloadValidationDetailsProps } from './ValidationDetails';
-export interface PayloadDetailsProps extends StackProps {
+export declare type WithPaper<T> = T & {
+    paper: true;
+};
+export declare type WithoutPaper<T> = T & {
+    paper?: false;
+};
+export declare type PayloadDetailsProps = StackProps & {
     payload?: XyoPayload;
-    payloadDataDetailsProps?: PayloadDataDetailsProps;
-    payloadMetaDetailsProps?: PayloadMetaDetailsProps;
-    payloadValidationDetailsProps?: PayloadValidationDetailsProps;
-    payloadJsonDetailsProps?: PayloadJsonDetailsProps;
-}
+    paper?: boolean;
+    archivePath?: string;
+};
 export declare const PayloadDetails: React.FC<PayloadDetailsProps>;

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

@@ -4,7 +4,7 @@ import { PayloadDataDetails } from './DataDetails';
 import { PayloadJsonDetails } from './JsonDetails';
 import { PayloadMetaDetails } from './MetaDetails';
 import { PayloadValidationDetails } from './ValidationDetails';
-export const PayloadDetails = ({ payload, payloadDataDetailsProps, payloadMetaDetailsProps, payloadValidationDetailsProps, payloadJsonDetailsProps, ...props }) => {
-    return (_jsxs(Stack, { direction: "column", spacing: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ...props, children: [_jsx(PayloadDataDetails, { size: "large", badge: true, value: payload, ...payloadDataDetailsProps }), _jsx(PayloadMetaDetails, { value: payload, ...payloadMetaDetailsProps }), _jsx(PayloadValidationDetails, { marginY: 1, value: payload, ...payloadValidationDetailsProps }), _jsx(PayloadJsonDetails, { payload: payload, ...payloadJsonDetailsProps })] }));
+export const PayloadDetails = ({ archivePath, paper, payload, ...props }) => {
+    return (_jsxs(Stack, { direction: "column", spacing: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ...props, children: [_jsx(PayloadDataDetails, { paper: paper, size: "large", badge: true, payload: payload }), _jsx(PayloadMetaDetails, { archivePath: archivePath, paper: paper ? true : false, value: payload }), _jsx(PayloadValidationDetails, { paper: paper, value: payload }), _jsx(PayloadJsonDetails, { paper: paper, payload: payload })] }));
 };
 //# sourceMappingURL=Details.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,MAAM,eAAe,CAAA;AAGjD,OAAO,EAAE,kBAAkB,EAA2B,MAAM,eAAe,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAA2B,MAAM,eAAe,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAA2B,MAAM,eAAe,CAAA;AAC3E,OAAO,EAAE,wBAAwB,EAAiC,MAAM,qBAAqB,CAAA;AAU7F,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,OAAO,EACP,uBAAuB,EACvB,uBAAuB,EACvB,6BAA6B,EAC7B,uBAAuB,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,KAAM,KAAK,aAC7H,KAAC,kBAAkB,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,QAAC,KAAK,EAAE,OAAO,KAAM,uBAAuB,GAAI,EACtF,KAAC,kBAAkB,IAAC,KAAK,EAAE,OAAO,KAAM,uBAAuB,GAAI,EACnE,KAAC,wBAAwB,IAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,KAAM,6BAA6B,GAAI,EAC3F,KAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,KAAM,uBAAuB,GAAI,IAC/D,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,MAAM,eAAe,CAAA;AAGjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAW9D,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzG,OAAO,CACL,MAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,KAAM,KAAK,aAC7H,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,QAAC,OAAO,EAAE,OAAO,GAAI,EACzE,KAAC,kBAAkB,IAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAI,EAC7F,KAAC,wBAAwB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAI,EAC1D,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,IAChD,CACT,CAAA;AACH,CAAC,CAAA"}

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

@@ -2,8 +2,8 @@
 import { XyoPayload } from '@xyo-network/core';
 import { PropertyGroupProps } from '@xyo-network/react-property';
 import { ReactJsonViewProps } from 'react-json-view';
-export interface PayloadJsonDetailsProps extends PropertyGroupProps {
+export declare type PayloadJsonDetailsProps = PropertyGroupProps & {
     payload?: XyoPayload;
     jsonViewProps?: ReactJsonViewProps;
-}
+};
 export declare const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps>;

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

@@ -7,6 +7,10 @@ const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-jso
 export const PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
     const { breakpoints } = useTheme();
     const belowSm = useMediaQuery(breakpoints.down('sm'));
-    return (_jsx(PropertyGroup, { title: "JSON", tip: "The raw JSON of the payload", alignItems: "stretch", ...props, children: _jsx(Suspense, { fallback: _jsx(FlexGrowRow, {}), children: _jsx(JsonView, { src: payload, enableClipboard: true, collapseStringsAfterLength: belowSm ? 24 : 32, ...jsonViewProps }) }) }));
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    return (_jsx(PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: _jsx(Suspense, { fallback: _jsx(FlexGrowRow, {}), children: _jsx(JsonView, { src: payload, enableClipboard: true, collapseStringsAfterLength: belowSm ? 24 : 32, ...jsonViewProps }) }) }));
 };
 //# sourceMappingURL=JsonDetails.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,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,GAAG,QAAQ,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,YAC1F,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,KAAG,YACjC,KAAC,QAAQ,IAAC,GAAG,EAAE,OAAO,EAAE,eAAe,QAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAM,aAAa,GAAI,GACnG,GACG,CACjB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,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,GAAG,QAAQ,EAAE,CAAA;IAClC,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,OAAO,CACL,KAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,KAAK,KAAK,YAChG,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,KAAG,YACjC,KAAC,QAAQ,IAAC,GAAG,EAAE,OAAO,EAAE,eAAe,QAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAM,aAAa,GAAI,GACnG,GACG,CACjB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/MetaDetails.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { XyoPayload } from '@xyo-network/core';
 import { PropertyGroupProps } from '@xyo-network/react-property';
-export interface PayloadMetaDetailsProps extends PropertyGroupProps {
+export declare type PayloadMetaDetailsProps = PropertyGroupProps & {
     value?: XyoPayload;
     archivePath?: string;
-}
+};
 export declare const PayloadMetaDetails: React.FC<PayloadMetaDetailsProps>;

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

@@ -2,6 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArchiveProperty } from '@xyo-network/react-archive';
 import { Property, PropertyGroup } from '@xyo-network/react-property';
 export const PayloadMetaDetails = ({ archivePath, value, ...props }) => {
-    return (_jsxs(PropertyGroup, { title: "Meta", tip: "The meta fields added to the record by the archivist", ...props, children: [value?._client ? _jsx(Property, { flexGrow: 1, title: "Client", value: value?._client ?? '<Unknown>', tip: "This client used to create this payload" }) : null, value?._archive ? _jsx(ArchiveProperty, { flexGrow: 1, payload: value, path: archivePath }) : null, value?._reportedHash ? _jsx(Property, { flexGrow: 1, title: "Reported Hash", value: value?._reportedHash ?? '<Unknown>', tip: "The has reported by the payload" }) : null, value?._timestamp ? _jsx(Property, { flexGrow: 1, title: "Timestamp", value: value?._timestamp ?? '<Unknown>', tip: "This timestamp of the payload" }) : null, value?._observeDuration ? (_jsx(Property, { flexGrow: 1, title: "Observation Duration", value: value?._observeDuration ?? '<Unknown>', tip: "This duration of time observed by the witness" })) : null] }));
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    return (_jsxs(PropertyGroup, { titleProps: { elevation }, title: "Meta", tip: "The meta fields added to the record by the archivist", ...props, children: [value?._client ? (_jsx(Property, { titleProps: { elevation }, flexGrow: 1, title: "Client", value: value?._client ?? '<Unknown>', tip: "This client used to create this payload" })) : null, value?._archive ? _jsx(ArchiveProperty, { titleProps: { elevation }, flexGrow: 1, payload: value, path: archivePath }) : null, value?._reportedHash ? (_jsx(Property, { titleProps: { elevation }, flexGrow: 1, title: "Reported Hash", value: value?._reportedHash ?? '<Unknown>', tip: "The has reported by the payload" })) : null, value?._timestamp ? (_jsx(Property, { titleProps: { elevation }, flexGrow: 1, title: "Timestamp", value: value?._timestamp ?? '<Unknown>', tip: "This timestamp of the payload" })) : null, value?._observeDuration ? (_jsx(Property, { titleProps: { elevation }, flexGrow: 1, title: "Observation Duration", value: value?._observeDuration ?? '<Unknown>', tip: "This duration of time observed by the witness" })) : null] }));
 };
 //# sourceMappingURL=MetaDetails.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MetaDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/MetaDetails.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAsB,MAAM,6BAA6B,CAAA;AAOzF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,OAAO,CACL,MAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,sDAAsD,KAAK,KAAK,aAC7F,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,GAAG,EAAC,yCAAyC,GAAG,CAAC,CAAC,CAAC,IAAI,EACpJ,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,EAC5F,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,GAAG,EAAC,iCAAiC,GAAG,CAAC,CAAC,CAAC,IAAI,EAC/J,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK,EAAE,UAAU,IAAI,WAAW,EAAE,GAAG,EAAC,+BAA+B,GAAG,CAAC,CAAC,CAAC,IAAI,EACnJ,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CACzB,KAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,IAAI,WAAW,EAAE,GAAG,EAAC,+CAA+C,GAAG,CAC1J,CAAC,CAAC,CAAC,IAAI,IACM,CACjB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MetaDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/MetaDetails.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAsB,MAAM,6BAA6B,CAAA;AAOzF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IACD,OAAO,CACL,MAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,sDAAsD,KAAK,KAAK,aACxH,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAChB,KAAC,QAAQ,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,GAAG,EAAC,yCAAyC,GAAG,CACxJ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,EACvH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CACtB,KAAC,QAAQ,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,GAAG,EAAC,iCAAiC,GAAG,CAC7J,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK,EAAE,UAAU,IAAI,WAAW,EAAE,GAAG,EAAC,+BAA+B,GAAG,CACpJ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CACzB,KAAC,QAAQ,IACP,UAAU,EAAE,EAAE,SAAS,EAAE,EACzB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,KAAK,EAAE,gBAAgB,IAAI,WAAW,EAC7C,GAAG,EAAC,+CAA+C,GACnD,CACH,CAAC,CAAC,CAAC,IAAI,IACM,CACjB,CAAA;AACH,CAAC,CAAA"}

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

@@ -9,8 +9,12 @@ export const PayloadValidationDetails = ({ viewSchemaUrl, skipMeta = false, skip
     const bodyErrors = skipBody ? [] : validator?.body.all() ?? [];
     const metaErrors = skipMeta ? [] : validator?.meta.all() ?? [];
     const errors = [...bodyErrors, ...metaErrors];
-    return (_jsxs(PropertyGroup, { title: "Validation", tip: "The results from validating the payload", ...props, children: [_jsx(Property, { flexGrow: 1, title: "Valid", value: errors.length === 0 ? 'True' : 'False', tip: errors.length > 0 ? (_jsx(FlexCol, { children: errors.map((error, index) => {
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    return (_jsxs(PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [_jsx(Property, { titleProps: { elevation }, flexGrow: 1, title: "Valid", value: errors.length === 0 ? 'True' : 'False', tip: errors.length > 0 ? (_jsx(FlexCol, { children: errors.map((error, index) => {
                         return _jsx(Typography, { children: error.toString() }, index);
-                    }) })) : (_jsx(Typography, { children: "No Errors" })) }), value?.schema && _jsx(SchemaProperty, { value: value.schema, viewSchemaUrl: viewSchemaUrl })] }));
+                    }) })) : (_jsx(Typography, { children: "No Errors" })) }), value?.schema && _jsx(SchemaProperty, { titleProps: { elevation }, value: value.schema, viewSchemaUrl: viewSchemaUrl })] }));
 };
 //# sourceMappingURL=ValidationDetails.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationDetails.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAI1D,MAAM,CAAC,MAAM,wBAAwB,GAA4C,CAAC,EAAE,aAAa,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1J,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpE,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,CAAA;IAC9D,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,CAAA;IAC9D,MAAM,MAAM,GAAY,CAAC,GAAG,UAAU,EAAE,GAAG,UAAU,CAAC,CAAA;IAEtD,OAAO,CACL,MAAC,aAAa,IAAC,KAAK,EAAC,YAAY,EAAC,GAAG,EAAC,yCAAyC,KAAK,KAAK,aACvF,KAAC,QAAQ,IACP,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,KAAC,OAAO,cACL,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;wBAC3B,OAAO,KAAC,UAAU,cAAc,KAAK,CAAC,QAAQ,EAAE,IAAxB,KAAK,CAAiC,CAAA;oBAChE,CAAC,CAAC,GACM,CACX,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,4BAAuB,CACnC,GAEH,EACD,KAAK,EAAE,MAAM,IAAI,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,aAAa,EAAE,aAAa,GAAI,IACzE,CACjB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ValidationDetails.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAI1D,MAAM,CAAC,MAAM,wBAAwB,GAA4C,CAAC,EAAE,aAAa,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1J,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpE,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,CAAA;IAC9D,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,CAAA;IAC9D,MAAM,MAAM,GAAY,CAAC,GAAG,UAAU,EAAE,GAAG,UAAU,CAAC,CAAA;IAEtD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,OAAO,CACL,MAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,GAAG,EAAC,yCAAyC,KAAK,KAAK,aAClH,KAAC,QAAQ,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,KAAC,OAAO,cACL,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;wBAC3B,OAAO,KAAC,UAAU,cAAc,KAAK,CAAC,QAAQ,EAAE,IAAxB,KAAK,CAAiC,CAAA;oBAChE,CAAC,CAAC,GACM,CACX,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,4BAAuB,CACnC,GAEH,EACD,KAAK,EAAE,MAAM,IAAI,KAAC,cAAc,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,aAAa,EAAE,aAAa,GAAI,IACpG,CACjB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/ValidationDetails/ValidationDetailsProps.d.ts

@@ -1,8 +1,8 @@
 import { XyoPayload } from '@xyo-network/core';
 import { PropertyGroupProps } from '@xyo-network/react-property';
-export interface PayloadValidationDetailsProps extends PropertyGroupProps {
+export declare type PayloadValidationDetailsProps = PropertyGroupProps & {
     skipBody?: boolean;
     skipMeta?: boolean;
     value?: XyoPayload;
     viewSchemaUrl?: string;
-}
+};

package/package.json

@@ -14,18 +14,18 @@
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.1",
-    "@xylabs/sdk-react": "^2.12.8",
+    "@xylabs/sdk-react": "^2.12.10",
     "@xyo-network/api": "^2.20.33",
     "@xyo-network/core": "^2.20.33",
     "@xyo-network/network": "^2.20.33",
-    "@xyo-network/react-archive": "^2.25.21",
-    "@xyo-network/react-archivist-api": "^2.25.21",
-    "@xyo-network/react-auth-service": "^2.25.21",
-    "@xyo-network/react-network": "^2.25.21",
-    "@xyo-network/react-property": "^2.25.21",
-    "@xyo-network/react-schema": "^2.25.21",
-    "@xyo-network/react-shared": "^2.25.21",
-    "@xyo-network/react-theme": "^2.25.21",
+    "@xyo-network/react-archive": "^2.25.22",
+    "@xyo-network/react-archivist-api": "^2.25.22",
+    "@xyo-network/react-auth-service": "^2.25.22",
+    "@xyo-network/react-network": "^2.25.22",
+    "@xyo-network/react-property": "^2.25.22",
+    "@xyo-network/react-schema": "^2.25.22",
+    "@xyo-network/react-shared": "^2.25.22",
+    "@xyo-network/react-theme": "^2.25.22",
     "@xyo-network/utils": "^2.20.33",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
@@ -39,8 +39,8 @@
   },
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
     "@storybook/addons": "^6.5.5",
     "@storybook/api": "^6.5.5",
     "@storybook/components": "^6.5.5",
@@ -49,7 +49,7 @@
     "@storybook/theming": "^6.5.5",
     "@types/lodash": "^4.14.182",
     "@types/luxon": "^2.3.2",
-    "@xylabs/sdk-react": "^2.12.8",
+    "@xylabs/sdk-react": "^2.12.10",
     "@xylabs/ts-scripts": "^1.0.66",
     "@xylabs/tsconfig": "^1.0.13",
     "axios": "^0.27.2",
@@ -114,6 +114,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.21",
+  "version": "2.25.22",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Details/DataDetails.tsx

@@ -1,27 +1,31 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import VisibilityIcon from '@mui/icons-material/Visibility'
 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
-import { ButtonEx, FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+import { ButtonEx } from '@xylabs/sdk-react'
 import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/core'
-import { Property, PropertyAction, usePropertyHeroProps } from '@xyo-network/react-property'
+import { Property, PropertyAction, PropertyProps } from '@xyo-network/react-property'
 import { SizeProp } from '@xyo-network/react-shared'
 import { useState } from 'react'
 
 import { PayloadHashSourceDetails } from './HashSourceDetails'
 
-export interface PayloadDataDetailsProps extends FlexBoxProps {
-  value?: XyoPayload
+export type PayloadDataDetailsProps = PropertyProps & {
+  payload?: XyoPayload
   size?: SizeProp
   badge?: boolean
 }
 
-export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, value, ...props }) => {
-  const wrapper = value ? new XyoPayloadWrapper(value) : undefined
+export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, payload, ...props }) => {
+  const wrapper = payload ? new XyoPayloadWrapper(payload) : undefined
 
-  const propertyHeroProps = usePropertyHeroProps(props)
   const [viewSourceOpen, setViewSourceOpen] = useState(false)
   const hash = wrapper?.hash
 
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
   const actions: PropertyAction[] = [
     {
       icon: <VisibilityIcon />,
@@ -40,21 +44,12 @@ export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, ba
   }
 
   return (
-    <FlexCol alignItems="stretch" {...props}>
-      <Property
-        variant="outlined"
-        badge={badge}
-        size={size}
-        actions={actions}
-        title="Payload Hash"
-        value={hash ?? '<Unknown>'}
-        tip="This is the payload hash"
-        {...propertyHeroProps}
-      />
+    <>
+      <Property titleProps={{ elevation }} badge={badge} size={size} actions={actions} title="Payload Hash" value={hash ?? '<Unknown>'} tip="This is the payload hash" {...props} />
       <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>
         <DialogTitle>Hash Source</DialogTitle>
         <DialogContent>
-          <PayloadHashSourceDetails noTitle payload={value} />
+          <PayloadHashSourceDetails noTitle payload={payload} />
         </DialogContent>
         <DialogActions>
           <ButtonEx color="secondary" onClick={onCopy}>
@@ -65,6 +60,6 @@ export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, ba
           </ButtonEx>
         </DialogActions>
       </Dialog>
-    </FlexCol>
+    </>
   )
 }

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

@@ -37,10 +37,26 @@ WithBuilderSample.args = { payload: samplePayloadFromBuilder }
 WithBuilderSample.decorators = [appThemeDecorator]
 
 const WithArchiveLink = Template.bind({})
-WithArchiveLink.args = { payload: samplePayloadFromBuilder, payloadMetaDetailsProps: { archivePath: 'temp' } }
+WithArchiveLink.args = { archivePath: 'temp', payload: samplePayloadFromBuilder }
 WithArchiveLink.decorators = [appThemeDecorator]
 
-export { Default, WithArchiveLink, WithBuilderSample, WithSample }
+const DefaultPaper = Template.bind({})
+DefaultPaper.args = { paper: true }
+DefaultPaper.decorators = [appThemeDecorator]
+
+const WithSamplePaper = Template.bind({})
+WithSamplePaper.args = { paper: true, payload: samplePayload }
+WithSamplePaper.decorators = [appThemeDecorator]
+
+const WithBuilderSamplePaper = Template.bind({})
+WithBuilderSamplePaper.args = { paper: true, payload: samplePayloadFromBuilder }
+WithBuilderSamplePaper.decorators = [appThemeDecorator]
+
+const WithArchiveLinkPaper = Template.bind({})
+WithArchiveLinkPaper.args = { archivePath: 'temp', paper: true, payload: samplePayloadFromBuilder }
+WithArchiveLinkPaper.decorators = [appThemeDecorator]
+
+export { Default, DefaultPaper, WithArchiveLink, WithArchiveLinkPaper, WithBuilderSample, WithBuilderSamplePaper, WithSample, WithSamplePaper }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Details/Details.tsx

@@ -1,33 +1,27 @@
 import { Stack, StackProps } from '@mui/material'
 import { XyoPayload } from '@xyo-network/core'
 
-import { PayloadDataDetails, PayloadDataDetailsProps } from './DataDetails'
-import { PayloadJsonDetails, PayloadJsonDetailsProps } from './JsonDetails'
-import { PayloadMetaDetails, PayloadMetaDetailsProps } from './MetaDetails'
-import { PayloadValidationDetails, PayloadValidationDetailsProps } from './ValidationDetails'
+import { PayloadDataDetails } from './DataDetails'
+import { PayloadJsonDetails } from './JsonDetails'
+import { PayloadMetaDetails } from './MetaDetails'
+import { PayloadValidationDetails } from './ValidationDetails'
 
-export interface PayloadDetailsProps extends StackProps {
+export type WithPaper<T> = T & { paper: true }
+export type WithoutPaper<T> = T & { paper?: false }
+
+export type PayloadDetailsProps = StackProps & {
   payload?: XyoPayload
-  payloadDataDetailsProps?: PayloadDataDetailsProps
-  payloadMetaDetailsProps?: PayloadMetaDetailsProps
-  payloadValidationDetailsProps?: PayloadValidationDetailsProps
-  payloadJsonDetailsProps?: PayloadJsonDetailsProps
+  paper?: boolean
+  archivePath?: string
 }
 
-export const PayloadDetails: React.FC<PayloadDetailsProps> = ({
-  payload,
-  payloadDataDetailsProps,
-  payloadMetaDetailsProps,
-  payloadValidationDetailsProps,
-  payloadJsonDetailsProps,
-  ...props
-}) => {
+export const PayloadDetails: React.FC<PayloadDetailsProps> = ({ archivePath, paper, payload, ...props }) => {
   return (
     <Stack direction="column" spacing={1} justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} {...props}>
-      <PayloadDataDetails size="large" badge value={payload} {...payloadDataDetailsProps} />
-      <PayloadMetaDetails value={payload} {...payloadMetaDetailsProps} />
-      <PayloadValidationDetails marginY={1} value={payload} {...payloadValidationDetailsProps} />
-      <PayloadJsonDetails payload={payload} {...payloadJsonDetailsProps} />
+      <PayloadDataDetails paper={paper} size="large" badge payload={payload} />
+      <PayloadMetaDetails archivePath={archivePath} paper={paper ? true : false} value={payload} />
+      <PayloadValidationDetails paper={paper} value={payload} />
+      <PayloadJsonDetails paper={paper} payload={payload} />
     </Stack>
   )
 }

package/src/components/Details/JsonDetails.tsx

@@ -7,7 +7,7 @@ import { ReactJsonViewProps } from 'react-json-view'
 
 const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
 
-export interface PayloadJsonDetailsProps extends PropertyGroupProps {
+export type PayloadJsonDetailsProps = PropertyGroupProps & {
   payload?: XyoPayload
   jsonViewProps?: ReactJsonViewProps
 }
@@ -16,8 +16,13 @@ export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonView
   const { breakpoints } = useTheme()
   const belowSm = useMediaQuery(breakpoints.down('sm'))
 
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
   return (
-    <PropertyGroup title="JSON" tip="The raw JSON of the payload" alignItems="stretch" {...props}>
+    <PropertyGroup titleProps={{ elevation }} title="JSON" tip="The raw JSON of the payload" {...props}>
       <Suspense fallback={<FlexGrowRow />}>
         <JsonView src={payload} enableClipboard collapseStringsAfterLength={belowSm ? 24 : 32} {...jsonViewProps} />
       </Suspense>

package/src/components/Details/MetaDetails.tsx

@@ -2,20 +2,36 @@ import { XyoPayload } from '@xyo-network/core'
 import { ArchiveProperty } from '@xyo-network/react-archive'
 import { Property, PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
 
-export interface PayloadMetaDetailsProps extends PropertyGroupProps {
+export type PayloadMetaDetailsProps = PropertyGroupProps & {
   value?: XyoPayload
   archivePath?: string
 }
 
 export const PayloadMetaDetails: React.FC<PayloadMetaDetailsProps> = ({ archivePath, value, ...props }) => {
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
   return (
-    <PropertyGroup title="Meta" tip="The meta fields added to the record by the archivist" {...props}>
-      {value?._client ? <Property flexGrow={1} title="Client" value={value?._client ?? '<Unknown>'} tip="This client used to create this payload" /> : null}
-      {value?._archive ? <ArchiveProperty flexGrow={1} payload={value} path={archivePath} /> : null}
-      {value?._reportedHash ? <Property flexGrow={1} title="Reported Hash" value={value?._reportedHash ?? '<Unknown>'} tip="The has reported by the payload" /> : null}
-      {value?._timestamp ? <Property flexGrow={1} title="Timestamp" value={value?._timestamp ?? '<Unknown>'} tip="This timestamp of the payload" /> : null}
+    <PropertyGroup titleProps={{ elevation }} title="Meta" tip="The meta fields added to the record by the archivist" {...props}>
+      {value?._client ? (
+        <Property titleProps={{ elevation }} flexGrow={1} title="Client" value={value?._client ?? '<Unknown>'} tip="This client used to create this payload" />
+      ) : null}
+      {value?._archive ? <ArchiveProperty titleProps={{ elevation }} flexGrow={1} payload={value} path={archivePath} /> : null}
+      {value?._reportedHash ? (
+        <Property titleProps={{ elevation }} flexGrow={1} title="Reported Hash" value={value?._reportedHash ?? '<Unknown>'} tip="The has reported by the payload" />
+      ) : null}
+      {value?._timestamp ? (
+        <Property titleProps={{ elevation }} flexGrow={1} title="Timestamp" value={value?._timestamp ?? '<Unknown>'} tip="This timestamp of the payload" />
+      ) : null}
       {value?._observeDuration ? (
-        <Property flexGrow={1} title="Observation Duration" value={value?._observeDuration ?? '<Unknown>'} tip="This duration of time observed by the witness" />
+        <Property
+          titleProps={{ elevation }}
+          flexGrow={1}
+          title="Observation Duration"
+          value={value?._observeDuration ?? '<Unknown>'}
+          tip="This duration of time observed by the witness"
+        />
       ) : null}
     </PropertyGroup>
   )

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

@@ -13,9 +13,15 @@ export const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> =
   const metaErrors = skipMeta ? [] : validator?.meta.all() ?? []
   const errors: Error[] = [...bodyErrors, ...metaErrors]
 
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
   return (
-    <PropertyGroup title="Validation" tip="The results from validating the payload" {...props}>
+    <PropertyGroup titleProps={{ elevation }} title="Validation" tip="The results from validating the payload" {...props}>
       <Property
+        titleProps={{ elevation }}
         flexGrow={1}
         title="Valid"
         value={errors.length === 0 ? 'True' : 'False'}
@@ -31,7 +37,7 @@ export const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> =
           )
         }
       />
-      {value?.schema && <SchemaProperty value={value.schema} viewSchemaUrl={viewSchemaUrl} />}
+      {value?.schema && <SchemaProperty titleProps={{ elevation }} value={value.schema} viewSchemaUrl={viewSchemaUrl} />}
     </PropertyGroup>
   )
 }

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

@@ -1,7 +1,7 @@
 import { XyoPayload } from '@xyo-network/core'
 import { PropertyGroupProps } from '@xyo-network/react-property'
 
-export interface PayloadValidationDetailsProps extends PropertyGroupProps {
+export type PayloadValidationDetailsProps = PropertyGroupProps & {
   skipBody?: boolean
   skipMeta?: boolean
   value?: XyoPayload