@xyo-network/react-payload 2.25.15 → 2.25.18

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

@@ -27,6 +27,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, { 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(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" })] })] })] }));
 };
 //# 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,IAAC,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,iBAAiB,GAAI,EAC/J,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,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"}

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { FlexBoxProps } from '@xylabs/sdk-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 FlexBoxProps {
+export interface PayloadDetailsProps extends StackProps {
     payload?: XyoPayload;
     payloadDataDetailsProps?: PayloadDataDetailsProps;
     payloadMetaDetailsProps?: PayloadMetaDetailsProps;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FlexCol } from '@xylabs/sdk-react';
+import { Stack } from '@mui/material';
 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(FlexCol, { 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, { value: payload, ...payloadValidationDetailsProps }), _jsx(PayloadJsonDetails, { payload: payload, ...payloadJsonDetailsProps })] }));
+    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 })] }));
 };
 //# 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,EAAgB,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAGzD,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,OAAO,IAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,KAAM,KAAK,aAChG,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,KAAK,EAAE,OAAO,KAAM,6BAA6B,GAAI,EAC/E,KAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,KAAM,uBAAuB,GAAI,IAC7D,CACX,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,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"}

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { FlexBoxProps } from '@xylabs/sdk-react';
 import { XyoPayload } from '@xyo-network/core';
+import { PropertyGroupProps } from '@xyo-network/react-property';
 import { ReactJsonViewProps } from 'react-json-view';
-export interface PayloadJsonDetailsProps extends FlexBoxProps {
+export interface PayloadJsonDetailsProps extends PropertyGroupProps {
     payload?: XyoPayload;
     jsonViewProps?: ReactJsonViewProps;
 }

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

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { FlexCol, FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery, useTheme } from '@mui/material';
+import { FlexGrowRow } from '@xylabs/sdk-react';
+import { PropertyGroup } from '@xyo-network/react-property';
 import { lazy, Suspense } from 'react';
 const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'));
 export const PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
     const { breakpoints } = useTheme();
     const belowSm = useMediaQuery(breakpoints.down('sm'));
-    return (_jsxs(FlexCol, { alignItems: "stretch", ...props, children: [_jsxs(FlexRow, { margin: 1, justifyContent: "flex-start", children: [_jsx(Typography, { children: "JSON" }), _jsx(QuickTipButton, { title: "Payload JSON", children: "The raw JSON of the payload" })] }), _jsx(Paper, { variant: "outlined", children: _jsx(Suspense, { fallback: _jsx(FlexGrowRow, {}), children: _jsx(JsonView, { src: payload, enableClipboard: true, collapseStringsAfterLength: belowSm ? 24 : 32, ...jsonViewProps }) }) })] }));
+    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 }) }) }));
 };
 //# 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,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC1E,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAE/F,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,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,MAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,aAC7C,KAAC,UAAU,uBAAkB,EAC7B,KAAC,cAAc,IAAC,KAAK,EAAC,cAAc,4CAA6C,IACzE,EACV,KAAC,KAAK,IAAC,OAAO,EAAC,UAAU,YACvB,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,GACL,IACA,CACX,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,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"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { FlexBoxProps } from '@xylabs/sdk-react';
 import { XyoPayload } from '@xyo-network/core';
-export interface PayloadMetaDetailsProps extends FlexBoxProps {
+import { PropertyGroupProps } from '@xyo-network/react-property';
+export interface PayloadMetaDetailsProps extends PropertyGroupProps {
     value?: XyoPayload;
     archivePath?: string;
 }

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

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
-import { FlexCol, FlexRow, QuickTipButton } from '@xylabs/sdk-react';
 import { ArchiveProperty } from '@xyo-network/react-archive';
-import { Property } from '@xyo-network/react-property';
+import { Property, PropertyGroup } from '@xyo-network/react-property';
 export const PayloadMetaDetails = ({ archivePath, value, ...props }) => {
-    return (_jsxs(FlexCol, { alignItems: "start", ...props, children: [_jsxs(FlexRow, { margin: 1, justifyContent: "start", children: [_jsx(Typography, { children: "Meta" }), _jsx(QuickTipButton, { title: "Payload Meta", children: "The meta fields added to the record by the archivist" })] }), _jsxs(FlexRow, { flexWrap: "wrap", 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, { 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] })] }));
+    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] }));
 };
 //# 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":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAOtD,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,OAAO,KAAK,KAAK,aACnC,MAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,OAAO,aACxC,KAAC,UAAU,uBAAkB,EAC7B,KAAC,cAAc,IAAC,KAAK,EAAC,cAAc,qEAAsE,IAClG,EACV,MAAC,OAAO,IAAC,QAAQ,EAAC,MAAM,aACrB,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,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,EAC/E,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,IACA,IACF,CACX,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,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"}

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
-import { FlexCol, FlexRow, QuickTipButton } from '@xylabs/sdk-react';
+import { FlexCol } from '@xylabs/sdk-react';
 import { XyoPayloadValidator } from '@xyo-network/core';
-import { Property } from '@xyo-network/react-property';
+import { Property, PropertyGroup } from '@xyo-network/react-property';
 import { SchemaProperty } from './SchemaProperty';
 export const PayloadValidationDetails = ({ viewSchemaUrl, skipMeta = false, skipBody = false, value, ...props }) => {
     const validator = value ? new XyoPayloadValidator(value) : undefined;
     const bodyErrors = skipBody ? [] : validator?.body.all() ?? [];
     const metaErrors = skipMeta ? [] : validator?.meta.all() ?? [];
     const errors = [...bodyErrors, ...metaErrors];
-    return (_jsxs(FlexCol, { alignItems: "start", ...props, children: [_jsxs(FlexRow, { margin: 1, justifyContent: "flex-start", children: [_jsx(Typography, { children: "Validation" }), _jsx(QuickTipButton, { title: "Block Validation", children: "The results from validating the payload" })] }), _jsxs(FlexRow, { flexWrap: "wrap", children: [_jsx(Property, { 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, viewSchemaUrl: viewSchemaUrl })] })] }));
+    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) => {
+                        return _jsx(Typography, { children: error.toString() }, index);
+                    }) })) : (_jsx(Typography, { children: "No Errors" })) }), value?.schema && _jsx(SchemaProperty, { value: value, 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,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGjD,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,OAAO,IAAC,UAAU,EAAC,OAAO,KAAK,KAAK,aACnC,MAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,aAC7C,KAAC,UAAU,6BAAwB,EACnC,KAAC,cAAc,IAAC,KAAK,EAAC,kBAAkB,wDAAyD,IACzF,EACV,MAAC,OAAO,IAAC,QAAQ,EAAC,MAAM,aACtB,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;gCAC3B,OAAO,KAAC,UAAU,cAAc,KAAK,CAAC,QAAQ,EAAE,IAAxB,KAAK,CAAiC,CAAA;4BAChE,CAAC,CAAC,GACM,CACX,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,4BAAuB,CACnC,GAEH,EACD,KAAK,EAAE,MAAM,IAAI,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,IACxE,IACF,CACX,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;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGjD,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,EAAE,aAAa,EAAE,aAAa,GAAI,IAClE,CACjB,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,6 +1,6 @@
-import { FlexBoxProps } from '@xylabs/sdk-react';
 import { XyoPayload } from '@xyo-network/core';
-export interface PayloadValidationDetailsProps extends FlexBoxProps {
+import { PropertyGroupProps } from '@xyo-network/react-property';
+export interface PayloadValidationDetailsProps extends PropertyGroupProps {
     skipBody?: boolean;
     skipMeta?: boolean;
     value?: XyoPayload;

package/dist/esm/hooks/lib/findHuriNetwork.d.ts

@@ -1,3 +1,3 @@
 import { Huri } from '@xyo-network/core';
 import { XyoNetworkPayload } from '@xyo-network/network';
-export declare const findHuriNetwork: (huriInstance: Huri, networks?: XyoNetworkPayload[] | undefined) => XyoNetworkPayload | undefined;
+export declare const findHuriNetwork: (huriInstance: Huri, networks?: XyoNetworkPayload[]) => XyoNetworkPayload | undefined;

package/dist/esm/hooks/useGetSchema.d.ts

@@ -2,7 +2,7 @@ import { XyoApiError } from '@xyo-network/api';
 /**
  * Gets a Huri and schema payload from a schema string
  */
-declare const useGetSchemaPayload: (schema?: string | undefined) => {
+declare const useGetSchemaPayload: (schema?: string) => {
     apiError: XyoApiError<any, any> | undefined;
     notFound: boolean;
     schemaHuri: import("@xyo-network/core").Huri | undefined;

package/dist/esm/hooks/useHuriHash.d.ts

@@ -1,5 +1,5 @@
 import { XyoApiError } from '@xyo-network/api';
 import { Huri, XyoPayload } from '@xyo-network/core';
 import { FetchHuriHashOptions } from './lib';
-declare const useHuriHash: (huriOrHash?: string | Huri | undefined, huriUri?: string | undefined, options?: FetchHuriHashOptions | undefined) => [XyoPayload | undefined, boolean, XyoApiError | undefined];
+declare const useHuriHash: (huriOrHash?: string | Huri, huriUri?: string, options?: FetchHuriHashOptions) => [XyoPayload | undefined, boolean, XyoApiError | undefined];
 export { useHuriHash };

package/dist/esm/hooks/usePayload.d.ts

@@ -1,3 +1,3 @@
 import { XyoApiError } from '@xyo-network/api';
 import { XyoPayload } from '@xyo-network/core';
-export declare const usePayload: (hash?: string | undefined) => [XyoPayload | undefined, boolean, XyoApiError | undefined];
+export declare const usePayload: (hash?: string) => [XyoPayload | undefined, boolean, XyoApiError | undefined];

package/dist/esm/hooks/useResolveHuri.d.ts

@@ -1,5 +1,5 @@
 import { XyoApiError } from '@xyo-network/api';
 import { XyoPayload } from '@xyo-network/core';
 import { FetchHuriHashOptions } from './lib';
-declare const useResolveHuri: (huriUri?: string | undefined, dependentNotFound?: boolean | undefined, options?: FetchHuriHashOptions | undefined) => [XyoPayload | undefined, boolean, XyoApiError | undefined];
+declare const useResolveHuri: (huriUri?: string, dependentNotFound?: boolean, options?: FetchHuriHashOptions) => [XyoPayload | undefined, boolean, XyoApiError | undefined];
 export { useResolveHuri };

package/package.json

@@ -18,13 +18,13 @@
     "@xyo-network/api": "^2.20.33",
     "@xyo-network/core": "^2.20.33",
     "@xyo-network/network": "^2.20.33",
-    "@xyo-network/react-archive": "^2.25.15",
-    "@xyo-network/react-archivist-api": "^2.25.15",
-    "@xyo-network/react-auth-service": "^2.25.15",
-    "@xyo-network/react-network": "^2.25.15",
-    "@xyo-network/react-property": "^2.25.15",
-    "@xyo-network/react-shared": "^2.25.15",
-    "@xyo-network/react-theme": "^2.25.15",
+    "@xyo-network/react-archive": "^2.25.18",
+    "@xyo-network/react-archivist-api": "^2.25.18",
+    "@xyo-network/react-auth-service": "^2.25.18",
+    "@xyo-network/react-network": "^2.25.18",
+    "@xyo-network/react-property": "^2.25.18",
+    "@xyo-network/react-shared": "^2.25.18",
+    "@xyo-network/react-theme": "^2.25.18",
     "@xyo-network/utils": "^2.20.33",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
@@ -40,12 +40,12 @@
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@babel/preset-env": "^7.18.0",
-    "@storybook/addons": "^6.5.4",
-    "@storybook/api": "^6.5.4",
-    "@storybook/components": "^6.5.4",
-    "@storybook/core-events": "^6.5.4",
-    "@storybook/react": "^6.5.4",
-    "@storybook/theming": "^6.5.4",
+    "@storybook/addons": "^6.5.5",
+    "@storybook/api": "^6.5.5",
+    "@storybook/components": "^6.5.5",
+    "@storybook/core-events": "^6.5.5",
+    "@storybook/react": "^6.5.5",
+    "@storybook/theming": "^6.5.5",
     "@types/lodash": "^4.14.182",
     "@types/luxon": "^2.3.2",
     "@xylabs/sdk-react": "^2.12.8",
@@ -53,7 +53,7 @@
     "@xylabs/tsconfig": "^1.0.13",
     "axios": "^0.27.2",
     "storybook-dark-mode": "^1.1.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.2"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -109,17 +109,10 @@
   },
   "scripts": {
     "lint-pkg": "npmPkgJsonLint .",
-    "gen:docs:package": "typedoc src/index.ts --json dist/docs.json",
-    "clean:package": "rimraf -q ./dist && rimraf -q ./build",
-    "fix:package": "yarn fix",
-    "lint:package": "yarn lint",
-    "deps:package": "depcheck $INIT_CWD",
-    "updo3:package": "yarn updo3",
-    "build:package": "yarn clean:package && tsc -p tsconfig.build.cjs.json && tsc -p tsconfig.build.esm.json && yarn gen:docs:package",
     "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.15",
+  "version": "2.25.18",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Details/DataDetails.tsx

@@ -41,7 +41,16 @@ export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, ba
 
   return (
     <FlexCol alignItems="stretch" {...props}>
-      <Property badge={badge} size={size} actions={actions} title="Payload Hash" value={hash ?? '<Unknown>'} tip="This is the payload hash" {...propertyHeroProps} />
+      <Property
+        variant="outlined"
+        badge={badge}
+        size={size}
+        actions={actions}
+        title="Payload Hash"
+        value={hash ?? '<Unknown>'}
+        tip="This is the payload hash"
+        {...propertyHeroProps}
+      />
       <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>
         <DialogTitle>Hash Source</DialogTitle>
         <DialogContent>

package/src/components/Details/Details.tsx

@@ -1,4 +1,4 @@
-import { FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+import { Stack, StackProps } from '@mui/material'
 import { XyoPayload } from '@xyo-network/core'
 
 import { PayloadDataDetails, PayloadDataDetailsProps } from './DataDetails'
@@ -6,7 +6,7 @@ import { PayloadJsonDetails, PayloadJsonDetailsProps } from './JsonDetails'
 import { PayloadMetaDetails, PayloadMetaDetailsProps } from './MetaDetails'
 import { PayloadValidationDetails, PayloadValidationDetailsProps } from './ValidationDetails'
 
-export interface PayloadDetailsProps extends FlexBoxProps {
+export interface PayloadDetailsProps extends StackProps {
   payload?: XyoPayload
   payloadDataDetailsProps?: PayloadDataDetailsProps
   payloadMetaDetailsProps?: PayloadMetaDetailsProps
@@ -23,11 +23,11 @@ export const PayloadDetails: React.FC<PayloadDetailsProps> = ({
   ...props
 }) => {
   return (
-    <FlexCol justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} {...props}>
+    <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 value={payload} {...payloadValidationDetailsProps} />
+      <PayloadValidationDetails marginY={1} value={payload} {...payloadValidationDetailsProps} />
       <PayloadJsonDetails payload={payload} {...payloadJsonDetailsProps} />
-    </FlexCol>
+    </Stack>
   )
 }

package/src/components/Details/JsonDetails.tsx

@@ -1,12 +1,13 @@
-import { Paper, Typography, useMediaQuery, useTheme } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
+import { useMediaQuery, useTheme } from '@mui/material'
+import { FlexGrowRow } from '@xylabs/sdk-react'
 import { XyoPayload } from '@xyo-network/core'
+import { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
 import { lazy, Suspense } from 'react'
 import { ReactJsonViewProps } from 'react-json-view'
 
 const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
 
-export interface PayloadJsonDetailsProps extends FlexBoxProps {
+export interface PayloadJsonDetailsProps extends PropertyGroupProps {
   payload?: XyoPayload
   jsonViewProps?: ReactJsonViewProps
 }
@@ -16,16 +17,10 @@ export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonView
   const belowSm = useMediaQuery(breakpoints.down('sm'))
 
   return (
-    <FlexCol alignItems="stretch" {...props}>
-      <FlexRow margin={1} justifyContent="flex-start">
-        <Typography>JSON</Typography>
-        <QuickTipButton title="Payload JSON">The raw JSON of the payload</QuickTipButton>
-      </FlexRow>
-      <Paper variant="outlined">
-        <Suspense fallback={<FlexGrowRow />}>
-          <JsonView src={payload} enableClipboard collapseStringsAfterLength={belowSm ? 24 : 32} {...jsonViewProps} />
-        </Suspense>
-      </Paper>
-    </FlexCol>
+    <PropertyGroup title="JSON" tip="The raw JSON of the payload" alignItems="stretch" {...props}>
+      <Suspense fallback={<FlexGrowRow />}>
+        <JsonView src={payload} enableClipboard collapseStringsAfterLength={belowSm ? 24 : 32} {...jsonViewProps} />
+      </Suspense>
+    </PropertyGroup>
   )
 }

package/src/components/Details/MetaDetails.tsx

@@ -1,30 +1,22 @@
-import { Typography } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
 import { XyoPayload } from '@xyo-network/core'
 import { ArchiveProperty } from '@xyo-network/react-archive'
-import { Property } from '@xyo-network/react-property'
+import { Property, PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
 
-export interface PayloadMetaDetailsProps extends FlexBoxProps {
+export interface PayloadMetaDetailsProps extends PropertyGroupProps {
   value?: XyoPayload
   archivePath?: string
 }
 
 export const PayloadMetaDetails: React.FC<PayloadMetaDetailsProps> = ({ archivePath, value, ...props }) => {
   return (
-    <FlexCol alignItems="start" {...props}>
-      <FlexRow margin={1} justifyContent="start">
-        <Typography>Meta</Typography>
-        <QuickTipButton title="Payload Meta">The meta fields added to the record by the archivist</QuickTipButton>
-      </FlexRow>
-      <FlexRow flexWrap="wrap">
-        {value?._client ? <Property flexGrow={1} title="Client" value={value?._client ?? '<Unknown>'} tip="This client used to create this payload" /> : null}
-        {value?._archive ? <ArchiveProperty 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}
-        {value?._observeDuration ? (
-          <Property flexGrow={1} title="Observation Duration" value={value?._observeDuration ?? '<Unknown>'} tip="This duration of time observed by the witness" />
-        ) : null}
-      </FlexRow>
-    </FlexCol>
+    <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}
+      {value?._observeDuration ? (
+        <Property 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

@@ -1,7 +1,7 @@
 import { Typography } from '@mui/material'
-import { FlexCol, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
+import { FlexCol } from '@xylabs/sdk-react'
 import { XyoPayloadValidator } from '@xyo-network/core'
-import { Property } from '@xyo-network/react-property'
+import { Property, PropertyGroup } from '@xyo-network/react-property'
 
 import { SchemaProperty } from './SchemaProperty'
 import { PayloadValidationDetailsProps } from './ValidationDetailsProps'
@@ -14,30 +14,24 @@ export const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> =
   const errors: Error[] = [...bodyErrors, ...metaErrors]
 
   return (
-    <FlexCol alignItems="start" {...props}>
-      <FlexRow margin={1} justifyContent="flex-start">
-        <Typography>Validation</Typography>
-        <QuickTipButton title="Block Validation">The results from validating the payload</QuickTipButton>
-      </FlexRow>
-      <FlexRow flexWrap="wrap">
-        <Property
-          flexGrow={1}
-          title="Valid"
-          value={errors.length === 0 ? 'True' : 'False'}
-          tip={
-            errors.length > 0 ? (
-              <FlexCol>
-                {errors.map((error, index) => {
-                  return <Typography key={index}>{error.toString()}</Typography>
-                })}
-              </FlexCol>
-            ) : (
-              <Typography>No Errors</Typography>
-            )
-          }
-        />
-        {value?.schema && <SchemaProperty value={value} viewSchemaUrl={viewSchemaUrl} />}
-      </FlexRow>
-    </FlexCol>
+    <PropertyGroup title="Validation" tip="The results from validating the payload" {...props}>
+      <Property
+        flexGrow={1}
+        title="Valid"
+        value={errors.length === 0 ? 'True' : 'False'}
+        tip={
+          errors.length > 0 ? (
+            <FlexCol>
+              {errors.map((error, index) => {
+                return <Typography key={index}>{error.toString()}</Typography>
+              })}
+            </FlexCol>
+          ) : (
+            <Typography>No Errors</Typography>
+          )
+        }
+      />
+      {value?.schema && <SchemaProperty value={value} viewSchemaUrl={viewSchemaUrl} />}
+    </PropertyGroup>
   )
 }

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

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