@xyo-network/react-payload-plugin 2.46.6 → 2.46.8

package/dist/esm/DefaultPayloadRenderPlugin.js

@@ -1,25 +1,25 @@
-import { XyoPayloadAvatar, XyoPayloadCardActionArea, XyoPayloadCardContent, XyoPayloadCardHeader, XyoPayloadDetailsBox, XyoPayloadEditorBox, XyoPayloadTableCell, } from './components';
+import { PayloadAvatar, PayloadCardActionArea, PayloadCardContent, PayloadCardHeader, PayloadDetailsBox, PayloadEditorBox, PayloadTableCell, } from './components';
 export const DefaultPayloadRenderPlugin = {
     canRender: function (payload) {
         return !!payload?.schema;
     },
     components: {
         avatar: {
-            image: XyoPayloadAvatar,
+            image: PayloadAvatar,
         },
         box: {
-            detailsBox: XyoPayloadDetailsBox,
-            editor: XyoPayloadEditorBox,
+            detailsBox: PayloadDetailsBox,
+            editor: PayloadEditorBox,
         },
         card: {
-            actionArea: XyoPayloadCardActionArea,
-            content: XyoPayloadCardContent,
-            header: XyoPayloadCardHeader,
+            actionArea: PayloadCardActionArea,
+            content: PayloadCardContent,
+            header: PayloadCardHeader,
         },
         table: {
-            cell: XyoPayloadTableCell,
+            cell: PayloadTableCell,
         },
     },
-    name: 'XyoPayload',
+    name: 'Payload',
 };
 //# sourceMappingURL=DefaultPayloadRenderPlugin.js.map

package/dist/esm/DefaultPayloadRenderPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultPayloadRenderPlugin.js","sourceRoot":"","sources":["../../src/DefaultPayloadRenderPlugin.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,cAAc,CAAA;AAGrB,MAAM,CAAC,MAAM,0BAA0B,GAA2B;IAChE,SAAS,EAAE,UAAU,OAAoB;QACvC,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAA;IAC1B,CAAC;IACD,UAAU,EAAE;QACV,MAAM,EAAE;YACN,KAAK,EAAE,gBAAgB;SACxB;QACD,GAAG,EAAE;YACH,UAAU,EAAE,oBAAoB;YAChC,MAAM,EAAE,mBAAmB;SAC5B;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,OAAO,EAAE,qBAAqB;YAC9B,MAAM,EAAE,oBAAoB;SAC7B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,mBAAmB;SAC1B;KACF;IACD,IAAI,EAAE,YAAY;CACnB,CAAA"}
+{"version":3,"file":"DefaultPayloadRenderPlugin.js","sourceRoot":"","sources":["../../src/DefaultPayloadRenderPlugin.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EACb,qBAAqB,EACrB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAA;AAGrB,MAAM,CAAC,MAAM,0BAA0B,GAAwB;IAC7D,SAAS,EAAE,UAAU,OAAiB;QACpC,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAA;IAC1B,CAAC;IACD,UAAU,EAAE;QACV,MAAM,EAAE;YACN,KAAK,EAAE,aAAa;SACrB;QACD,GAAG,EAAE;YACH,UAAU,EAAE,iBAAiB;YAC7B,MAAM,EAAE,gBAAgB;SACzB;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,qBAAqB;YACjC,OAAO,EAAE,kBAAkB;YAC3B,MAAM,EAAE,iBAAiB;SAC1B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,gBAAgB;SACvB;KACF;IACD,IAAI,EAAE,SAAS;CAChB,CAAA"}

package/dist/esm/PayloadRenderPlugin.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PayloadRenderPlugin.js.map

package/dist/esm/PayloadRenderPlugin.js.map

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

package/dist/esm/components/{XyoPayloadAvatar.js → PayloadAvatar.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from '@mui/material';
 import { DefaultAvatarIcon } from '../img';
-export const XyoPayloadAvatar = ({ ...props }) => {
+export const PayloadAvatar = ({ ...props }) => {
     return _jsx(Avatar, { src: DefaultAvatarIcon, ...props });
 };
-//# sourceMappingURL=XyoPayloadAvatar.js.map
+//# sourceMappingURL=PayloadAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadAvatar.js","sourceRoot":"","sources":["../../../src/components/PayloadAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAe,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AAG1C,MAAM,CAAC,MAAM,aAAa,GAA+C,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxF,OAAO,KAAC,MAAM,IAAC,GAAG,EAAE,iBAAiB,KAAM,KAAK,GAAI,CAAA;AACtD,CAAC,CAAA"}

package/dist/esm/components/{XyoPayloadCardActionArea.js → PayloadCardActionArea.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardActionArea } from '@mui/material';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const XyoPayloadCardActionArea = ({ payload, ...props }) => {
+export const PayloadCardActionArea = ({ payload, ...props }) => {
     return _jsx(CardActionArea, { ...props });
 };
-//# sourceMappingURL=XyoPayloadCardActionArea.js.map
+//# sourceMappingURL=PayloadCardActionArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadCardActionArea.js","sourceRoot":"","sources":["../../../src/components/PayloadCardActionArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAuB,MAAM,eAAe,CAAA;AAInE,6DAA6D;AAC7D,MAAM,CAAC,MAAM,qBAAqB,GAAuD,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,OAAO,KAAC,cAAc,OAAK,KAAK,GAAI,CAAA;AACtC,CAAC,CAAA"}

package/dist/esm/components/{XyoPayloadCardContent.js → PayloadCardContent.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardContent } from '@mui/material';
 import { PayloadDetails } from '@xyo-network/react-payload-details';
-export const XyoPayloadCardContent = ({ payload, ...props }) => {
+export const PayloadCardContent = ({ payload, ...props }) => {
     return (_jsx(CardContent, { ...props, children: _jsx(PayloadDetails, { payload: payload }) }));
 };
-//# sourceMappingURL=XyoPayloadCardContent.js.map
+//# sourceMappingURL=PayloadCardContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadCardContent.js","sourceRoot":"","sources":["../../../src/components/PayloadCardContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAInE,MAAM,CAAC,MAAM,kBAAkB,GAAoD,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3G,OAAO,CACL,KAAC,WAAW,OAAK,KAAK,YACpB,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,GAAI,GACxB,CACf,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/{XyoPayloadCardHeader.js → PayloadCardHeader.js}

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CardHeader } from '@mui/material';
 import { Identicon } from '@xylabs/react-identicon';
 import { PayloadWrapper } from '@xyo-network/payload-wrapper';
-export const XyoPayloadCardHeader = ({ payload, ...props }) => {
+export const PayloadCardHeader = ({ payload, ...props }) => {
     const wrapper = payload ? new PayloadWrapper(payload) : undefined;
-    return _jsx(CardHeader, { title: "XyoPayload", subheader: wrapper?.hash, avatar: _jsx(Identicon, { size: 24, value: wrapper?.hash }), ...props });
+    return _jsx(CardHeader, { title: "Payload", subheader: wrapper?.hash, avatar: _jsx(Identicon, { size: 24, value: wrapper?.hash }), ...props });
 };
-//# sourceMappingURL=XyoPayloadCardHeader.js.map
+//# sourceMappingURL=PayloadCardHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadCardHeader.js","sourceRoot":"","sources":["../../../src/components/PayloadCardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAI7D,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzG,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACjE,OAAO,KAAC,UAAU,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,GAAI,KAAM,KAAK,GAAI,CAAA;AACnI,CAAC,CAAA"}

package/dist/esm/components/{XyoPayloadDetailsBox.js → PayloadDetailsBox.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PayloadDetails } from '@xyo-network/react-payload-details';
 import { forwardRef } from 'react';
-const XyoPayloadDetailsBox = forwardRef((props, ref) => {
+const PayloadDetailsBox = forwardRef((props, ref) => {
     return _jsx(PayloadDetails, { ref: ref, ...props });
 });
-XyoPayloadDetailsBox.displayName = 'XyoPayloadDetailsBox';
-export { XyoPayloadDetailsBox };
-//# sourceMappingURL=XyoPayloadDetailsBox.js.map
+PayloadDetailsBox.displayName = 'PayloadDetailsBox';
+export { PayloadDetailsBox };
+//# sourceMappingURL=PayloadDetailsBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadDetailsBox.js","sourceRoot":"","sources":["../../../src/components/PayloadDetailsBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIlC,MAAM,iBAAiB,GAAG,UAAU,CAAoD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrG,OAAO,KAAC,cAAc,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAA;AAChD,CAAC,CAAC,CAAA;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/esm/components/{XyoPayloadEditorBox.js → PayloadEditorBox.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PayloadDetails } from '@xyo-network/react-payload-details';
-export const XyoPayloadEditorBox = (props) => {
+export const PayloadEditorBox = (props) => {
     return _jsx(PayloadDetails, { ...props });
 };
-//# sourceMappingURL=XyoPayloadEditorBox.js.map
+//# sourceMappingURL=PayloadEditorBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadEditorBox.js","sourceRoot":"","sources":["../../../src/components/PayloadEditorBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAInE,MAAM,CAAC,MAAM,gBAAgB,GAAsD,CAAC,KAAK,EAAE,EAAE;IAC3F,OAAO,KAAC,cAAc,OAAK,KAAK,GAAI,CAAA;AACtC,CAAC,CAAA"}

package/dist/esm/components/{XyoPayloadTableCell.js → PayloadTableCell.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableCell, Typography } from '@mui/material';
 // DEFAULT IF DONT KNOW WHAT TO RENDER
-export const XyoPayloadTableCell = ({ payload, ...props }) => {
+export const PayloadTableCell = ({ payload, ...props }) => {
     return (_jsx(TableCell, { ...props, children: _jsx(Typography, { children: payload?.schema }) }));
 };
-//# sourceMappingURL=XyoPayloadTableCell.js.map
+//# sourceMappingURL=PayloadTableCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadTableCell.js","sourceRoot":"","sources":["../../../src/components/PayloadTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,UAAU,EAAE,MAAM,eAAe,CAAA;AAIrE,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAkD,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvG,OAAO,CACL,KAAC,SAAS,OAAK,KAAK,YAClB,KAAC,UAAU,cAAE,OAAO,EAAE,MAAM,GAAc,GAChC,CACb,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/index.js

@@ -1,8 +1,8 @@
-export * from './XyoPayloadAvatar';
-export * from './XyoPayloadCardActionArea';
-export * from './XyoPayloadCardContent';
-export * from './XyoPayloadCardHeader';
-export * from './XyoPayloadDetailsBox';
-export * from './XyoPayloadEditorBox';
-export * from './XyoPayloadTableCell';
+export * from './PayloadAvatar';
+export * from './PayloadCardActionArea';
+export * from './PayloadCardContent';
+export * from './PayloadCardHeader';
+export * from './PayloadDetailsBox';
+export * from './PayloadEditorBox';
+export * from './PayloadTableCell';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA"}

package/dist/esm/createPayloadRenderPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"createPayloadRenderPlugin.js","sourceRoot":"","sources":["../../src/createPayloadRenderPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,cAAc,CAAA;AAEhC,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AAGzE,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,MAAoC,EAA0B,EAAE;IACxG,OAAO,KAAK,CAAC,EAAE,EAAE,0BAA0B,EAAE,MAAM,CAAC,CAAA;AACtD,CAAC,CAAA"}
+{"version":3,"file":"createPayloadRenderPlugin.js","sourceRoot":"","sources":["../../src/createPayloadRenderPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,cAAc,CAAA;AAEhC,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AAGzE,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,MAAiC,EAAuB,EAAE;IAClG,OAAO,KAAK,CAAC,EAAE,EAAE,0BAA0B,EAAE,MAAM,CAAC,CAAA;AACtD,CAAC,CAAA"}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 export * from './components';
 export * from './createPayloadRenderPlugin';
 export * from './DefaultPayloadRenderPlugin';
-export * from './XyoPayloadRenderPlugin';
+export * from './PayloadRenderPlugin';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA"}

package/dist/types/DefaultPayloadRenderPlugin.d.ts

@@ -1,3 +1,3 @@
-import { XyoPayloadRenderPlugin } from './XyoPayloadRenderPlugin';
-export declare const DefaultPayloadRenderPlugin: XyoPayloadRenderPlugin;
+import { PayloadRenderPlugin } from './PayloadRenderPlugin';
+export declare const DefaultPayloadRenderPlugin: PayloadRenderPlugin;
 //# sourceMappingURL=DefaultPayloadRenderPlugin.d.ts.map

package/dist/types/DefaultPayloadRenderPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultPayloadRenderPlugin.d.ts","sourceRoot":"","sources":["../../src/DefaultPayloadRenderPlugin.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,eAAO,MAAM,0BAA0B,EAAE,sBAsBxC,CAAA"}
+{"version":3,"file":"DefaultPayloadRenderPlugin.d.ts","sourceRoot":"","sources":["../../src/DefaultPayloadRenderPlugin.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,eAAO,MAAM,0BAA0B,EAAE,mBAsBxC,CAAA"}

package/dist/types/PayloadRenderPlugin.d.ts

@@ -0,0 +1,58 @@
+import { AvatarProps, CardActionAreaProps, CardContentProps, CardHeaderProps, CardProps, TableCellProps } from '@mui/material';
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { Payload } from '@xyo-network/payload-model';
+import { ListMode } from '@xyo-network/react-shared';
+import { ComponentType } from 'react';
+export interface PayloadRenderProps<T extends Payload = Payload> {
+    payload?: T;
+}
+export interface PayloadDetailsRenderProps extends PayloadRenderProps {
+    active?: boolean;
+    listMode?: ListMode;
+    visibleRows?: number;
+}
+export interface PayloadEditorRenderProps extends PayloadDetailsRenderProps {
+    onChange?: (payload: Payload) => boolean;
+}
+export interface PayloadRenderPluginBase {
+    canRender: (payload?: Payload) => boolean;
+    name: string;
+}
+export interface PayloadRenderPluginCardComponents {
+    actionArea: ComponentType<PayloadRenderProps & CardActionAreaProps>;
+    content: ComponentType<PayloadRenderProps & CardContentProps>;
+    header: ComponentType<PayloadRenderProps & CardHeaderProps>;
+}
+export interface PayloadRenderPluginAvatarComponents {
+    image: ComponentType<PayloadRenderProps & AvatarProps>;
+}
+export interface PayloadRenderPluginTableComponents {
+    cell: ComponentType<PayloadRenderProps & TableCellProps>;
+}
+export interface PayloadRenderPluginBoxComponents {
+    /** @deprecated - use detailsBox  */
+    details?: ComponentType<PayloadDetailsRenderProps & FlexBoxProps>;
+    detailsBox: ComponentType<PayloadDetailsRenderProps & FlexBoxProps>;
+    detailsCard?: ComponentType<PayloadDetailsRenderProps & CardProps>;
+    editor: ComponentType<PayloadEditorRenderProps & FlexBoxProps>;
+    listModes?: ListMode[];
+}
+export interface PayloadRenderPluginComponents {
+    avatar: PayloadRenderPluginAvatarComponents;
+    box: PayloadRenderPluginBoxComponents;
+    card: PayloadRenderPluginCardComponents;
+    table: PayloadRenderPluginTableComponents;
+}
+export interface PayloadRenderPluginComponentsConfig {
+    avatar?: Partial<PayloadRenderPluginAvatarComponents>;
+    box?: Partial<PayloadRenderPluginBoxComponents>;
+    card?: Partial<PayloadRenderPluginCardComponents>;
+    table?: Partial<PayloadRenderPluginTableComponents>;
+}
+export interface PayloadRenderPlugin extends PayloadRenderPluginBase {
+    components: PayloadRenderPluginComponents;
+}
+export interface PayloadRenderPluginConfig extends PayloadRenderPluginBase {
+    components?: PayloadRenderPluginComponentsConfig;
+}
+//# sourceMappingURL=PayloadRenderPlugin.d.ts.map

package/dist/types/PayloadRenderPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadRenderPlugin.d.ts","sourceRoot":"","sources":["../../src/PayloadRenderPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9H,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IAC7D,OAAO,CAAC,EAAE,CAAC,CAAA;CACZ;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,yBAAyB;IACzE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAA;CACzC;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAA;IACzC,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,iCAAiC;IAChD,UAAU,EAAE,aAAa,CAAC,kBAAkB,GAAG,mBAAmB,CAAC,CAAA;IACnE,OAAO,EAAE,aAAa,CAAC,kBAAkB,GAAG,gBAAgB,CAAC,CAAA;IAC7D,MAAM,EAAE,aAAa,CAAC,kBAAkB,GAAG,eAAe,CAAC,CAAA;CAC5D;AAED,MAAM,WAAW,mCAAmC;IAClD,KAAK,EAAE,aAAa,CAAC,kBAAkB,GAAG,WAAW,CAAC,CAAA;CACvD;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,aAAa,CAAC,kBAAkB,GAAG,cAAc,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,gCAAgC;IAC/C,oCAAoC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAC,yBAAyB,GAAG,YAAY,CAAC,CAAA;IACjE,UAAU,EAAE,aAAa,CAAC,yBAAyB,GAAG,YAAY,CAAC,CAAA;IACnE,WAAW,CAAC,EAAE,aAAa,CAAC,yBAAyB,GAAG,SAAS,CAAC,CAAA;IAClE,MAAM,EAAE,aAAa,CAAC,wBAAwB,GAAG,YAAY,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;CACvB;AAED,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,mCAAmC,CAAA;IAC3C,GAAG,EAAE,gCAAgC,CAAA;IACrC,IAAI,EAAE,iCAAiC,CAAA;IACvC,KAAK,EAAE,kCAAkC,CAAA;CAC1C;AAED,MAAM,WAAW,mCAAmC;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC,mCAAmC,CAAC,CAAA;IACrD,GAAG,CAAC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAA;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC,iCAAiC,CAAC,CAAA;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC,kCAAkC,CAAC,CAAA;CACpD;AAED,MAAM,WAAW,mBAAoB,SAAQ,uBAAuB;IAClE,UAAU,EAAE,6BAA6B,CAAA;CAC1C;AAED,MAAM,WAAW,yBAA0B,SAAQ,uBAAuB;IACxE,UAAU,CAAC,EAAE,mCAAmC,CAAA;CACjD"}

package/dist/types/components/PayloadAvatar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AvatarProps } from '@mui/material';
+import { PayloadRenderProps } from '../PayloadRenderPlugin';
+export declare const PayloadAvatar: React.FC<PayloadRenderProps & AvatarProps>;
+//# sourceMappingURL=PayloadAvatar.d.ts.map

package/dist/types/components/PayloadAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/PayloadAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAA;AAGnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,GAAG,WAAW,CAEpE,CAAA"}

package/dist/types/components/PayloadCardActionArea.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CardActionAreaProps } from '@mui/material';
+import { PayloadRenderProps } from '../PayloadRenderPlugin';
+export declare const PayloadCardActionArea: React.FC<PayloadRenderProps & CardActionAreaProps>;
+//# sourceMappingURL=PayloadCardActionArea.d.ts.map

package/dist/types/components/PayloadCardActionArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadCardActionArea.d.ts","sourceRoot":"","sources":["../../../src/components/PayloadCardActionArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAEnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG3D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,GAAG,mBAAmB,CAEpF,CAAA"}

package/dist/types/components/PayloadCardContent.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CardContentProps } from '@mui/material';
+import { PayloadRenderProps } from '../PayloadRenderPlugin';
+export declare const PayloadCardContent: React.FC<PayloadRenderProps & CardContentProps>;
+//# sourceMappingURL=PayloadCardContent.d.ts.map

package/dist/types/components/PayloadCardContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadCardContent.d.ts","sourceRoot":"","sources":["../../../src/components/PayloadCardContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAG7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,GAAG,gBAAgB,CAM9E,CAAA"}

package/dist/types/components/PayloadCardHeader.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CardHeaderProps } from '@mui/material';
+import { PayloadRenderProps } from '../PayloadRenderPlugin';
+export declare const PayloadCardHeader: React.FC<PayloadRenderProps & CardHeaderProps>;
+//# sourceMappingURL=PayloadCardHeader.d.ts.map

package/dist/types/components/PayloadCardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadCardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PayloadCardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAI3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,GAAG,eAAe,CAG5E,CAAA"}

package/dist/types/components/PayloadDetailsBox.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { PayloadRenderProps } from '../PayloadRenderPlugin';
+declare const PayloadDetailsBox: import("react").ForwardRefExoticComponent<PayloadRenderProps<import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
+    schema: string;
+}> & import("@xylabs/react-flexbox").BusyBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+export { PayloadDetailsBox };
+//# sourceMappingURL=PayloadDetailsBox.d.ts.map

package/dist/types/components/PayloadDetailsBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadDetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/PayloadDetailsBox.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,QAAA,MAAM,iBAAiB;;kGAErB,CAAA;AAGF,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/types/components/PayloadEditorBox.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { PayloadEditorRenderProps } from '../PayloadRenderPlugin';
+export declare const PayloadEditorBox: React.FC<PayloadEditorRenderProps & FlexBoxProps>;
+//# sourceMappingURL=PayloadEditorBox.d.ts.map

package/dist/types/components/PayloadEditorBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadEditorBox.d.ts","sourceRoot":"","sources":["../../../src/components/PayloadEditorBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AAEjE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,GAAG,YAAY,CAE9E,CAAA"}

package/dist/types/components/PayloadTableCell.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TableCellProps } from '@mui/material';
+import { PayloadRenderProps } from '../PayloadRenderPlugin';
+export declare const PayloadTableCell: React.FC<PayloadRenderProps & TableCellProps>;
+//# sourceMappingURL=PayloadTableCell.d.ts.map

package/dist/types/components/PayloadTableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadTableCell.d.ts","sourceRoot":"","sources":["../../../src/components/PayloadTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAc,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG3D,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,GAAG,cAAc,CAM1E,CAAA"}

package/dist/types/components/index.d.ts

@@ -1,8 +1,8 @@
-export * from './XyoPayloadAvatar';
-export * from './XyoPayloadCardActionArea';
-export * from './XyoPayloadCardContent';
-export * from './XyoPayloadCardHeader';
-export * from './XyoPayloadDetailsBox';
-export * from './XyoPayloadEditorBox';
-export * from './XyoPayloadTableCell';
+export * from './PayloadAvatar';
+export * from './PayloadCardActionArea';
+export * from './PayloadCardContent';
+export * from './PayloadCardHeader';
+export * from './PayloadDetailsBox';
+export * from './PayloadEditorBox';
+export * from './PayloadTableCell';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA"}

package/dist/types/createPayloadRenderPlugin.d.ts

@@ -1,3 +1,3 @@
-import { XyoPayloadRenderPlugin, XyoPayloadRenderPluginConfig } from './XyoPayloadRenderPlugin';
-export declare const createPayloadRenderPlugin: (plugin: XyoPayloadRenderPluginConfig) => XyoPayloadRenderPlugin;
+import { PayloadRenderPlugin, PayloadRenderPluginConfig } from './PayloadRenderPlugin';
+export declare const createPayloadRenderPlugin: (plugin: PayloadRenderPluginConfig) => PayloadRenderPlugin;
 //# sourceMappingURL=createPayloadRenderPlugin.d.ts.map

package/dist/types/createPayloadRenderPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createPayloadRenderPlugin.d.ts","sourceRoot":"","sources":["../../src/createPayloadRenderPlugin.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAA;AAE/F,eAAO,MAAM,yBAAyB,WAAY,4BAA4B,KAAG,sBAEhF,CAAA"}
+{"version":3,"file":"createPayloadRenderPlugin.d.ts","sourceRoot":"","sources":["../../src/createPayloadRenderPlugin.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAEtF,eAAO,MAAM,yBAAyB,WAAY,yBAAyB,KAAG,mBAE7E,CAAA"}

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export * from './components';
 export * from './createPayloadRenderPlugin';
 export * from './DefaultPayloadRenderPlugin';
-export * from './XyoPayloadRenderPlugin';
+export * from './PayloadRenderPlugin';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA"}

package/package.json

@@ -12,10 +12,10 @@
   "dependencies": {
     "@xylabs/react-flexbox": "^2.16.11",
     "@xylabs/react-identicon": "^2.16.11",
-    "@xyo-network/payload-model": "^2.52.1",
-    "@xyo-network/payload-wrapper": "^2.52.1",
-    "@xyo-network/react-payload-details": "^2.46.6",
-    "@xyo-network/react-shared": "^2.46.6",
+    "@xyo-network/payload-model": "^2.53.3",
+    "@xyo-network/payload-wrapper": "^2.53.3",
+    "@xyo-network/react-payload-details": "^2.46.8",
+    "@xyo-network/react-shared": "^2.46.8",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
@@ -73,5 +73,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.46.6"
+  "version": "2.46.8"
 }

package/src/DefaultPayloadRenderPlugin.ts

@@ -1,36 +1,36 @@
-import { XyoPayload } from '@xyo-network/payload-model'
+import { Payload } from '@xyo-network/payload-model'
 
 import {
-  XyoPayloadAvatar,
-  XyoPayloadCardActionArea,
-  XyoPayloadCardContent,
-  XyoPayloadCardHeader,
-  XyoPayloadDetailsBox,
-  XyoPayloadEditorBox,
-  XyoPayloadTableCell,
+  PayloadAvatar,
+  PayloadCardActionArea,
+  PayloadCardContent,
+  PayloadCardHeader,
+  PayloadDetailsBox,
+  PayloadEditorBox,
+  PayloadTableCell,
 } from './components'
-import { XyoPayloadRenderPlugin } from './XyoPayloadRenderPlugin'
+import { PayloadRenderPlugin } from './PayloadRenderPlugin'
 
-export const DefaultPayloadRenderPlugin: XyoPayloadRenderPlugin = {
-  canRender: function (payload?: XyoPayload): boolean {
+export const DefaultPayloadRenderPlugin: PayloadRenderPlugin = {
+  canRender: function (payload?: Payload): boolean {
     return !!payload?.schema
   },
   components: {
     avatar: {
-      image: XyoPayloadAvatar,
+      image: PayloadAvatar,
     },
     box: {
-      detailsBox: XyoPayloadDetailsBox,
-      editor: XyoPayloadEditorBox,
+      detailsBox: PayloadDetailsBox,
+      editor: PayloadEditorBox,
     },
     card: {
-      actionArea: XyoPayloadCardActionArea,
-      content: XyoPayloadCardContent,
-      header: XyoPayloadCardHeader,
+      actionArea: PayloadCardActionArea,
+      content: PayloadCardContent,
+      header: PayloadCardHeader,
     },
     table: {
-      cell: XyoPayloadTableCell,
+      cell: PayloadTableCell,
     },
   },
-  name: 'XyoPayload',
+  name: 'Payload',
 }

package/src/PayloadRenderPlugin.ts

@@ -0,0 +1,69 @@
+import { AvatarProps, CardActionAreaProps, CardContentProps, CardHeaderProps, CardProps, TableCellProps } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { Payload } from '@xyo-network/payload-model'
+import { ListMode } from '@xyo-network/react-shared'
+import { ComponentType } from 'react'
+
+export interface PayloadRenderProps<T extends Payload = Payload> {
+  payload?: T
+}
+
+export interface PayloadDetailsRenderProps extends PayloadRenderProps {
+  active?: boolean
+  listMode?: ListMode
+  visibleRows?: number
+}
+
+export interface PayloadEditorRenderProps extends PayloadDetailsRenderProps {
+  onChange?: (payload: Payload) => boolean
+}
+
+export interface PayloadRenderPluginBase {
+  canRender: (payload?: Payload) => boolean
+  name: string
+}
+
+export interface PayloadRenderPluginCardComponents {
+  actionArea: ComponentType<PayloadRenderProps & CardActionAreaProps>
+  content: ComponentType<PayloadRenderProps & CardContentProps>
+  header: ComponentType<PayloadRenderProps & CardHeaderProps>
+}
+
+export interface PayloadRenderPluginAvatarComponents {
+  image: ComponentType<PayloadRenderProps & AvatarProps>
+}
+
+export interface PayloadRenderPluginTableComponents {
+  cell: ComponentType<PayloadRenderProps & TableCellProps>
+}
+
+export interface PayloadRenderPluginBoxComponents {
+  /** @deprecated - use detailsBox  */
+  details?: ComponentType<PayloadDetailsRenderProps & FlexBoxProps>
+  detailsBox: ComponentType<PayloadDetailsRenderProps & FlexBoxProps>
+  detailsCard?: ComponentType<PayloadDetailsRenderProps & CardProps>
+  editor: ComponentType<PayloadEditorRenderProps & FlexBoxProps>
+  listModes?: ListMode[]
+}
+
+export interface PayloadRenderPluginComponents {
+  avatar: PayloadRenderPluginAvatarComponents
+  box: PayloadRenderPluginBoxComponents
+  card: PayloadRenderPluginCardComponents
+  table: PayloadRenderPluginTableComponents
+}
+
+export interface PayloadRenderPluginComponentsConfig {
+  avatar?: Partial<PayloadRenderPluginAvatarComponents>
+  box?: Partial<PayloadRenderPluginBoxComponents>
+  card?: Partial<PayloadRenderPluginCardComponents>
+  table?: Partial<PayloadRenderPluginTableComponents>
+}
+
+export interface PayloadRenderPlugin extends PayloadRenderPluginBase {
+  components: PayloadRenderPluginComponents
+}
+
+export interface PayloadRenderPluginConfig extends PayloadRenderPluginBase {
+  components?: PayloadRenderPluginComponentsConfig
+}

package/src/components/PayloadAvatar.tsx

@@ -0,0 +1,8 @@
+import { Avatar, AvatarProps } from '@mui/material'
+
+import { DefaultAvatarIcon } from '../img'
+import { PayloadRenderProps } from '../PayloadRenderPlugin'
+
+export const PayloadAvatar: React.FC<PayloadRenderProps & AvatarProps> = ({ ...props }) => {
+  return <Avatar src={DefaultAvatarIcon} {...props} />
+}

package/src/components/PayloadCardActionArea.tsx

@@ -0,0 +1,8 @@
+import { CardActionArea, CardActionAreaProps } from '@mui/material'
+
+import { PayloadRenderProps } from '../PayloadRenderPlugin'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const PayloadCardActionArea: React.FC<PayloadRenderProps & CardActionAreaProps> = ({ payload, ...props }) => {
+  return <CardActionArea {...props} />
+}

package/src/components/{XyoPayloadCardContent.tsx → PayloadCardContent.tsx}

@@ -1,9 +1,9 @@
 import { CardContent, CardContentProps } from '@mui/material'
 import { PayloadDetails } from '@xyo-network/react-payload-details'
 
-import { XyoPayloadRenderProps } from '../XyoPayloadRenderPlugin'
+import { PayloadRenderProps } from '../PayloadRenderPlugin'
 
-export const XyoPayloadCardContent: React.FC<XyoPayloadRenderProps & CardContentProps> = ({ payload, ...props }) => {
+export const PayloadCardContent: React.FC<PayloadRenderProps & CardContentProps> = ({ payload, ...props }) => {
   return (
     <CardContent {...props}>
       <PayloadDetails payload={payload} />

package/src/components/PayloadCardHeader.tsx

@@ -0,0 +1,10 @@
+import { CardHeader, CardHeaderProps } from '@mui/material'
+import { Identicon } from '@xylabs/react-identicon'
+import { PayloadWrapper } from '@xyo-network/payload-wrapper'
+
+import { PayloadRenderProps } from '../PayloadRenderPlugin'
+
+export const PayloadCardHeader: React.FC<PayloadRenderProps & CardHeaderProps> = ({ payload, ...props }) => {
+  const wrapper = payload ? new PayloadWrapper(payload) : undefined
+  return <CardHeader title="Payload" subheader={wrapper?.hash} avatar={<Identicon size={24} value={wrapper?.hash} />} {...props} />
+}