@xyo-network/react-property 2.25.21 → 2.25.22

package/dist/esm/components/Action.js

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

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

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

package/dist/{cjs/components/PropertyActions.d.ts → esm/components/Actions.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { PropertyActionsProps } from './PropertyActionsProps';
+import { PropertyActionsProps } from './ActionsProps';
 export declare const PropertyActions: React.FC<PropertyActionsProps>;

package/dist/esm/components/{PropertyActions.js → Actions.js}

@@ -9,4 +9,4 @@ export const PropertyActions = ({ buttons = false, actions, ...props }) => {
     }
     return null;
 };
-//# sourceMappingURL=PropertyActions.js.map
+//# sourceMappingURL=Actions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAIrD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,OAAO,OAAK,KAAK,YAChB,KAAC,KAAK,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,YAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CACnB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAa,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YACzE,MAAM,CAAC,IAAI,IADgB,KAAK,CAEtB,CACd,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ,KAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,SAAS,EAAa,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YACpI,MAAM,CAAC,IAAI,IAD8B,KAAK,CAEtC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;gBACV,CAAC,CAAC,GACI,GACA,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;KACT;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

package/dist/esm/components/{PropertyActionsMenu.d.ts → ActionsMenu.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { PropertyActionsProps } from './PropertyActionsProps';
+import { PropertyActionsProps } from './ActionsProps';
 export declare const PropertyActionsMenu: React.FC<PropertyActionsProps>;

package/dist/esm/components/{PropertyActionsMenu.js → ActionsMenu.js}

@@ -19,4 +19,4 @@ export const PropertyActionsMenu = ({ actions, ...props }) => {
                         }, children: action.name }, action.name));
                 }) })] })) : null;
 };
-//# sourceMappingURL=PropertyActionsMenu.js.map
+//# sourceMappingURL=ActionsMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsMenu.js","sourceRoot":"","sources":["../../../src/components/ActionsMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIhC,MAAM,CAAC,MAAM,mBAAmB,GAAmC,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAClE,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAA;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC3D,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;IAClC,CAAC,CAAA;IACD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,WAAW,CAAC,IAAI,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,OAAO,IAAI,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtC,MAAC,OAAO,OAAK,KAAK,aAChB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,YAC3D,KAAC,aAAa,IAAC,QAAQ,EAAC,SAAS,GAAG,GACzB,EACb,KAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YACvD,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACvB,OAAO,CACL,KAAC,QAAQ,IAEP,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,EAAE,OAAO,EAAE,EAAE,CAAA;4BACnB,WAAW,EAAE,CAAA;wBACf,CAAC,YAEA,MAAM,CAAC,IAAI,IANP,MAAM,CAAC,IAAI,CAOP,CACZ,CAAA;gBACH,CAAC,CAAC,GACG,IACC,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/dist/esm/components/{PropertyActionsProps.d.ts → ActionsProps.d.ts}

@@ -1,5 +1,5 @@
 import { FlexBoxProps } from '@xylabs/sdk-react';
-import { PropertyAction } from './PropertyAction';
+import { PropertyAction } from './Action';
 export interface PropertyActionsProps extends FlexBoxProps {
     buttons?: boolean;
     actions?: PropertyAction[];

package/dist/esm/components/ActionsProps.js

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

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

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

package/dist/{cjs/components/PropertyGroup.d.ts → esm/components/Group.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { PropertyGroupProps } from './PropertyProps';
+import { PropertyGroupProps } from './Props';
 export declare const PropertyGroup: React.FC<PropertyGroupProps>;

package/dist/esm/components/Group.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper, useTheme } from '@mui/material';
+import { FlexGrowRow, FlexRow } from '@xylabs/sdk-react';
+import { typeOf } from '@xyo-network/core';
+import { PropertyTitle } from './Title';
+const PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
+    const theme = useTheme();
+    const childrenArray = typeOf(children) === 'array' ? children : undefined;
+    return (_jsxs(FlexRow, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", ...props, children: [_jsx(PropertyTitle, { size: "full", title: title, tip: tip, ...titleProps }), childrenArray ? (_jsx(FlexGrowRow, { children: childrenArray?.map((child, index) => {
+                    return child ? (_jsx(FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index)) : null;
+                }) })) : (children)] }));
+};
+const PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
+    return (_jsx(Paper, { style: { minWidth: 0, overflow: 'hidden', ...style }, variant: variant, elevation: elevation, square: square, children: _jsx(PropertyGroupBox, { ...props, paper: false }) }));
+};
+export const PropertyGroup = (props) => {
+    return props.paper ? _jsx(PropertyGroupPaper, { ...props }) : _jsx(PropertyGroupBox, { ...props });
+};
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../src/components/Group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAI1C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3G,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,OAAO,CAAC,CAAC,CAAE,QAA2B,CAAC,CAAC,CAAC,SAAS,CAAA;IAC7F,OAAO,CACL,MAAC,OAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACnF,KAAC,aAAa,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,EACpE,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,WAAW,cACT,aAAa,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,WAAW,IAAa,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,YACvE,KAAK,IADU,KAAK,CAET,CACf,CAAC,CAAC,CAAC,IAAI,CAAA;gBACV,CAAC,CAAC,GACU,CACf,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,IACO,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAsC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChH,OAAO,CACL,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,YACjH,KAAC,gBAAgB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,GACvC,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACnE,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAA;AAC1F,CAAC,CAAA"}

package/dist/esm/components/IdenticonCorner.js

@@ -10,6 +10,6 @@ export const IdenticonCorner = ({ value, ...props }) => {
         setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
     }, []);
     const calculatedHeight = parentHeight ?? 0;
-    return (_jsx(FlexRow, { alignItems: "flex-start", height: "100%", position: "absolute", right: 0, bottom: 0, children: _jsx(FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderTop: `1px solid ${theme.palette.divider}`, borderLeft: `1px solid ${theme.palette.divider}`, children: _jsx("div", { ref: ref, children: _jsx(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) }));
+    return (_jsx(FlexRow, { alignItems: "flex-start", height: "100%", position: "absolute", right: 0, bottom: 0, children: _jsx(FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: _jsx("div", { ref: ref, children: _jsx(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) }));
 };
 //# sourceMappingURL=IdenticonCorner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IdenticonCorner.js","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAgB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMnD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAU,CAAA;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,CAAC,CAAA;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,YAAY,IAAI,CAAC,CAAA;IAE1C,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,YAAY,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,YACpF,KAAC,OAAO,IAAC,UAAU,QAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,YACtK,cAAK,GAAG,EAAE,GAAG,YACX,KAAC,SAAS,IAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,gBAAgB,GAAG,GAAG,IAAI,EAAE,KAAM,KAAK,GAAI,GACrH,GACE,GACF,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"IdenticonCorner.js","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAgB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMnD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAU,CAAA;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,CAAC,CAAA;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,YAAY,IAAI,CAAC,CAAA;IAE1C,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,YAAY,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,YACpF,KAAC,OAAO,IAAC,UAAU,QAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,YACrH,cAAK,GAAG,EAAE,GAAG,YACX,KAAC,SAAS,IAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,gBAAgB,GAAG,GAAG,IAAI,EAAE,KAAM,KAAK,GAAI,GACrH,GACE,GACF,CACX,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { PropertyProps } from './PropertyProps';
+import { PropertyProps } from './Props';
 export declare const Property: React.FC<PropertyProps>;

package/dist/esm/components/Property.js

@@ -1,28 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircularProgress, useTheme } from '@mui/material';
-import { FlexCol, FlexRow } from '@xylabs/sdk-react';
+import { CircularProgress, Paper } from '@mui/material';
+import { FlexRow } from '@xylabs/sdk-react';
+import { PropertyActionsMenu } from './ActionsMenu';
 import { IdenticonCorner } from './IdenticonCorner';
-import { PropertyActionsMenu } from './PropertyActionsMenu';
 import { PropertyTitle } from './Title';
 import { PropertyValue } from './Value';
-export const Property = ({ border, borderColor, borderRadius, variant, title, color = 'secondary', value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
-    const theme = useTheme();
-    const sizeTitleHeight = {
-        large: 36,
-        medium: 20,
-        small: 14,
-    };
+const PropertyBox = ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
     const sizeValueHeight = {
-        large: 64,
+        large: 48,
         medium: 36,
-        small: 26,
+        small: 24,
     };
     const sizeVariants = {
         large: 'h6',
         medium: 'body1',
-        small: 'body1',
+        small: 'body2',
     };
-    const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color;
-    return (_jsxs(FlexCol, { minWidth: 0, alignItems: "stretch", border: border ?? variant === 'outlined' ? 1 : undefined, borderColor: borderColor ?? variant === 'outlined' ? theme.palette.divider : undefined, borderRadius: borderRadius ?? variant === 'outlined' ? 1 : undefined, overflow: "hidden", ...props, children: [title !== undefined ? (_jsx(PropertyTitle, { tip: tip, title: required ? `${title}*` : title, size: size, bgcolor: bgcolor, color: theme.palette.getContrastText(bgcolor), height: sizeTitleHeight[size], more: _jsx(PropertyActionsMenu, { actions: actions }) })) : null, _jsxs(FlexRow, { justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size], children: [children ? (children) : value !== undefined ? (_jsx(PropertyValue, { shortSpace: badge ? sizeValueHeight[size] : 0, value: value, typographyVariant: sizeVariants[size] })) : (_jsx(CircularProgress, { size: 16 })), value !== undefined ? badge ? _jsx(IdenticonCorner, { value: value }) : null : null] })] }));
+    return (_jsxs(FlexRow, { flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [title !== undefined ? _jsx(PropertyTitle, { tip: tip, title: required ? `${title}*` : title, size: size, more: _jsx(PropertyActionsMenu, { actions: actions }), ...titleProps }) : null, _jsxs(FlexRow, { paddingX: 1, justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size], children: [children ? (children) : value !== undefined ? (_jsx(PropertyValue, { shortSpace: badge ? sizeValueHeight[size] : 0, value: value, typographyVariant: sizeVariants[size] })) : (_jsx(CircularProgress, { size: 16 })), value !== undefined ? badge ? _jsx(IdenticonCorner, { value: value }) : null : null] })] }));
+};
+const PropertyPaper = ({ style, variant, elevation = 2, square, ...props }) => {
+    return (_jsx(Paper, { style: { minWidth: 0, overflow: 'hidden', ...style }, variant: variant, elevation: elevation, square: square, children: _jsx(PropertyBox, { ...props, paper: false }) }));
+};
+export const Property = (props) => {
+    return props.paper ? _jsx(PropertyPaper, { ...props }) : _jsx(PropertyBox, { ...props });
 };
 //# sourceMappingURL=Property.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import { PaperProps } from '@mui/material';
+import { FlexBoxProps } from '@xylabs/sdk-react';
+import { SizeProp } from '@xyo-network/react-shared';
+import { ReactNode } from 'react';
+import { PropertyAction } from './Action';
+import { PropertyTitleProps } from './Title';
+export interface PropertyBaseProps {
+    tip?: ReactNode;
+    title?: string;
+    paper?: boolean;
+    titleProps?: PropertyTitleProps;
+}
+export declare type PropertyFieldBaseProps = PropertyBaseProps & {
+    actions?: PropertyAction[];
+    required?: boolean;
+    value?: string | number | boolean | null;
+    badge?: boolean;
+    size?: SizeProp;
+};
+export declare type PropertyBoxProps = PropertyFieldBaseProps & FlexBoxProps & {
+    paper?: false;
+};
+export declare type PropertyPaperProps = PropertyFieldBaseProps & PaperProps & {
+    paper: true;
+};
+export declare type PropertyProps = PropertyBoxProps | PropertyPaperProps;
+export declare type PropertyGroupBaseProps = PropertyBaseProps;
+export declare type PropertyGroupBoxProps = PropertyGroupBaseProps & FlexBoxProps & {
+    paper?: false;
+};
+export declare type PropertyGroupPaperProps = PropertyGroupBaseProps & PaperProps & {
+    paper: true;
+};
+export declare type PropertyGroupProps = PropertyGroupBoxProps | PropertyGroupPaperProps;

package/dist/esm/components/Props.js

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

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

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

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

@@ -1,10 +1,13 @@
 import { FlexBoxProps } from '@xylabs/sdk-react';
 import { SizeProp } from '@xyo-network/react-shared';
 import { ReactNode } from 'react';
+declare type TitleSizeProp = SizeProp | 'full';
 export interface PropertyTitleProps extends FlexBoxProps {
     tip?: ReactNode;
     more?: ReactNode;
     title?: string;
-    size?: SizeProp;
+    size?: TitleSizeProp;
+    elevation?: number;
 }
 export declare const PropertyTitle: React.FC<PropertyTitleProps>;
+export {};

package/dist/esm/components/Title.js

@@ -1,13 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, useTheme } from '@mui/material';
+import { darken, lighten, Typography, useTheme } from '@mui/material';
 import { FlexRow, QuickTipButton } from '@xylabs/sdk-react';
-export const PropertyTitle = ({ size = 'medium', tip, more, title, ...props }) => {
+export const PropertyTitle = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {
     const sizeVariants = {
+        full: 'h6',
         large: 'h6',
         medium: 'caption',
         small: 'caption',
     };
+    const sizeTitleHeight = {
+        full: undefined,
+        large: 32,
+        medium: 20,
+        small: 16,
+    };
+    const sizeFontSize = {
+        full: 24,
+        large: 24,
+        medium: 14,
+        small: 10,
+    };
+    const quickTipSize = sizeFontSize[size] < 18 ? sizeFontSize[size] : 18;
     const theme = useTheme();
-    return (_jsxs(FlexRow, { justifyContent: "space-between", ...props, children: [_jsxs(FlexRow, { paddingX: 1, children: [_jsx(Typography, { noWrap: true, variant: sizeVariants[size], children: title }), tip ? (_jsx(QuickTipButton, { style: { fontSize: theme.typography[sizeVariants[size]].fontSize }, color: "inherit", title: title ?? '', children: tip })) : null] }), more] }));
+    return (_jsxs(FlexRow, { bgcolor: theme.palette.mode === 'dark' ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.palette.background.paper, 0.05 * elevation), alignItems: "center", height: sizeTitleHeight[size], justifyContent: "space-between", ...props, children: [_jsxs(FlexRow, { paddingX: 1, children: [_jsx(Typography, { fontWeight: 700, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: title }), tip ? (_jsx(QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? '', children: tip })) : null] }), more] }));
 };
 //# sourceMappingURL=Title.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../src/components/Title.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqB,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvE,OAAO,EAAgB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAWzE,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7G,MAAM,YAAY,GAAwC;QACxD,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;KACjB,CAAA;IAED,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,MAAC,OAAO,IAAC,cAAc,EAAC,eAAe,KAAK,KAAK,aAC/C,MAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,aAClB,KAAC,UAAU,IAAC,MAAM,QAAC,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,YAC3C,KAAK,GACK,EACZ,GAAG,CAAC,CAAC,CAAC,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,IAAI,EAAE,YACnH,GAAG,GACW,CAClB,CAAC,CAAC,CAAC,IAAI,IACA,EACT,IAAI,IACG,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../src/components/Title.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAqB,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAgB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAczE,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5H,MAAM,YAAY,GAA6C;QAC7D,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;KACjB,CAAA;IAED,MAAM,eAAe,GAA8C;QACjE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV,CAAA;IAED,MAAM,YAAY,GAAkC;QAClD,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV,CAAA;IAED,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,MAAC,OAAO,IACN,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,EAC7J,UAAU,EAAC,QAAQ,EACnB,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,EAC7B,cAAc,EAAC,eAAe,KAC1B,KAAK,aAET,MAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,aAClB,KAAC,UAAU,IAAC,UAAU,EAAE,GAAG,EAAE,MAAM,QAAC,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,YAC1F,KAAK,GACK,EACZ,GAAG,CAAC,CAAC,CAAC,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,IAAI,EAAE,YAClF,GAAG,GACW,CAClB,CAAC,CAAC,CAAC,IAAI,IACA,EACT,IAAI,IACG,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Value.js

@@ -31,6 +31,6 @@ export const PropertyValue = ({ value, shortSpace, typographyVariant = 'body1',
             window?.removeEventListener('resize', resizeHandler);
         };
     }, []);
-    return value !== undefined ? (_jsx(Typography, { minWidth: 0, marginX: 1, ref: ref, component: "div", variant: typographyVariant, fontFamily: "monospace", fontWeight: "light", ...customThemeProps, ...props, children: value })) : null;
+    return value !== undefined ? (_jsx(Typography, { minWidth: 0, ref: ref, component: "div", variant: typographyVariant, fontFamily: "monospace", fontWeight: "light", ...customThemeProps, ...props, children: value })) : null;
 };
 //# sourceMappingURL=Value.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AASnD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,iBAAiB,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1H,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAU,CAAA;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,MAAM,gBAAgB,GAAG;QACvB,OAAO,EAAE,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAC5G,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;KACzB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,MAAM,aAAa,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACzD,cAAc,CAAC,aAAa,CAAC,CAAA;QAC/B,CAAC,CAAA;QAED,MAAM,sBAAsB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC7D,IAAI,OAAO,GAAG,OAAO,EAAE,aAAa,CAAA;YACpC,IAAI,KAAK,GAAkB,IAAI,CAAA;YAC/B,OAAO,OAAO,EAAE;gBACd,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,CAAC,WAAW,GAAG,KAAK,EAAE;oBACjD,KAAK,GAAG,OAAO,CAAC,WAAW,CAAA;iBAC5B;gBACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAA;aAChC;YACD,OAAO,KAAK,IAAI,SAAS,CAAA;QAC3B,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAEhD,cAAc,CAAC,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;QAEnD,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,KAAC,UAAU,IAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAC,WAAW,EAAC,UAAU,EAAC,OAAO,KAAK,gBAAgB,KAAM,KAAK,YACjK,KAAK,GACK,CACd,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
+{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AASnD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,iBAAiB,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1H,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAU,CAAA;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,MAAM,gBAAgB,GAAG;QACvB,OAAO,EAAE,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAC5G,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;KACzB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,MAAM,aAAa,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACzD,cAAc,CAAC,aAAa,CAAC,CAAA;QAC/B,CAAC,CAAA;QAED,MAAM,sBAAsB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC7D,IAAI,OAAO,GAAG,OAAO,EAAE,aAAa,CAAA;YACpC,IAAI,KAAK,GAAkB,IAAI,CAAA;YAC/B,OAAO,OAAO,EAAE;gBACd,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,CAAC,WAAW,GAAG,KAAK,EAAE;oBACjD,KAAK,GAAG,OAAO,CAAC,WAAW,CAAA;iBAC5B;gBACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAA;aAChC;YACD,OAAO,KAAK,IAAI,SAAS,CAAA;QAC3B,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAEhD,cAAc,CAAC,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;QAEnD,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,KAAC,UAAU,IAAC,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAC,WAAW,EAAC,UAAU,EAAC,OAAO,KAAK,gBAAgB,KAAM,KAAK,YACrJ,KAAK,GACK,CACd,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

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

@@ -1,6 +1,5 @@
+export * from './Action';
+export * from './Group';
 export * from './Property';
-export * from './PropertyAction';
-export * from './PropertyGroup';
-export * from './PropertyProps';
-export * from './usePropertyHeroProps';
+export * from './Props';
 export * from './Value';

package/dist/esm/components/index.js

@@ -1,7 +1,6 @@
+export * from './Action';
+export * from './Group';
 export * from './Property';
-export * from './PropertyAction';
-export * from './PropertyGroup';
-export * from './PropertyProps';
-export * from './usePropertyHeroProps';
+export * from './Props';
 export * from './Value';
 //# 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,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/package.json

@@ -14,10 +14,10 @@
     "@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/core": "^2.20.33",
-    "@xyo-network/react-shared": "^2.25.21",
-    "@xyo-network/react-theme": "^2.25.21",
+    "@xyo-network/react-shared": "^2.25.22",
+    "@xyo-network/react-theme": "^2.25.22",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -26,8 +26,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",
@@ -35,7 +35,7 @@
     "@storybook/react": "^6.5.5",
     "@storybook/theming": "^6.5.5",
     "@types/lodash": "^4.14.182",
-    "@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",
@@ -100,6 +100,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/{PropertyActions.tsx → Actions.tsx}

@@ -1,7 +1,7 @@
 import { IconButton, Stack } from '@mui/material'
 import { ButtonEx, FlexRow } from '@xylabs/sdk-react'
 
-import { PropertyActionsProps } from './PropertyActionsProps'
+import { PropertyActionsProps } from './ActionsProps'
 
 export const PropertyActions: React.FC<PropertyActionsProps> = ({ buttons = false, actions, ...props }) => {
   if (actions) {

package/src/components/{PropertyActionsMenu.tsx → ActionsMenu.tsx}

@@ -3,7 +3,7 @@ import { IconButton, Menu, MenuItem } from '@mui/material'
 import { FlexRow } from '@xylabs/sdk-react'
 import { useState } from 'react'
 
-import { PropertyActionsProps } from './PropertyActionsProps'
+import { PropertyActionsProps } from './ActionsProps'
 
 export const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

package/src/components/{PropertyActionsProps.ts → ActionsProps.ts}

@@ -1,6 +1,6 @@
 import { FlexBoxProps } from '@xylabs/sdk-react'
 
-import { PropertyAction } from './PropertyAction'
+import { PropertyAction } from './Action'
 
 export interface PropertyActionsProps extends FlexBoxProps {
   buttons?: boolean

package/src/components/Group.tsx

@@ -0,0 +1,42 @@
+import { Paper, useTheme } from '@mui/material'
+import { FlexGrowRow, FlexRow } from '@xylabs/sdk-react'
+import { typeOf } from '@xyo-network/core'
+import { ReactElement } from 'react'
+
+import { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props'
+import { PropertyTitle } from './Title'
+
+const PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {
+  const theme = useTheme()
+  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined
+  return (
+    <FlexRow overflow="hidden" justifyContent="flex-start" alignItems="stretch" {...props}>
+      <PropertyTitle size="full" title={title} tip={tip} {...titleProps} />
+      {childrenArray ? (
+        <FlexGrowRow>
+          {childrenArray?.map((child, index) => {
+            return child ? (
+              <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>
+                {child}
+              </FlexGrowRow>
+            ) : null
+          })}
+        </FlexGrowRow>
+      ) : (
+        children
+      )}
+    </FlexRow>
+  )
+}
+
+const PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {
+  return (
+    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
+      <PropertyGroupBox {...props} paper={false} />
+    </Paper>
+  )
+}
+
+export const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {
+  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />
+}

package/src/components/IdenticonCorner.tsx

@@ -19,7 +19,7 @@ export const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...prop
 
   return (
     <FlexRow alignItems="flex-start" height="100%" position="absolute" right={0} bottom={0}>
-      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderTop={`1px solid ${theme.palette.divider}`} borderLeft={`1px solid ${theme.palette.divider}`}>
+      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.palette.divider}`}>
         <div ref={ref}>
           <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />
         </div>

package/src/components/Property.tsx

@@ -1,73 +1,30 @@
-import { CircularProgress, TypographyVariant, useTheme } from '@mui/material'
-import { FlexCol, FlexRow } from '@xylabs/sdk-react'
+import { CircularProgress, Paper, TypographyVariant } from '@mui/material'
+import { FlexRow } from '@xylabs/sdk-react'
 import { SizeProp } from '@xyo-network/react-shared'
 
+import { PropertyActionsMenu } from './ActionsMenu'
 import { IdenticonCorner } from './IdenticonCorner'
-import { PropertyActionsMenu } from './PropertyActionsMenu'
-import { PropertyProps } from './PropertyProps'
+import { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'
 import { PropertyTitle } from './Title'
 import { PropertyValue } from './Value'
 
-export const Property: React.FC<PropertyProps> = ({
-  border,
-  borderColor,
-  borderRadius,
-  variant,
-  title,
-  color = 'secondary',
-  value,
-  children,
-  size = 'medium',
-  tip,
-  actions,
-  required,
-  badge = false,
-  ...props
-}) => {
-  const theme = useTheme()
-
-  const sizeTitleHeight: Record<SizeProp, number> = {
-    large: 36,
-    medium: 20,
-    small: 14,
-  }
-
+const PropertyBox: React.FC<PropertyBoxProps> = ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
   const sizeValueHeight: Record<SizeProp, number> = {
-    large: 64,
+    large: 48,
     medium: 36,
-    small: 26,
+    small: 24,
   }
 
   const sizeVariants: Record<SizeProp, TypographyVariant> = {
     large: 'h6',
     medium: 'body1',
-    small: 'body1',
+    small: 'body2',
   }
 
-  const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color
-
   return (
-    <FlexCol
-      minWidth={0}
-      alignItems="stretch"
-      border={border ?? variant === 'outlined' ? 1 : undefined}
-      borderColor={borderColor ?? variant === 'outlined' ? theme.palette.divider : undefined}
-      borderRadius={borderRadius ?? variant === 'outlined' ? 1 : undefined}
-      overflow="hidden"
-      {...props}
-    >
-      {title !== undefined ? (
-        <PropertyTitle
-          tip={tip}
-          title={required ? `${title}*` : title}
-          size={size}
-          bgcolor={bgcolor}
-          color={theme.palette.getContrastText(bgcolor)}
-          height={sizeTitleHeight[size]}
-          more={<PropertyActionsMenu actions={actions} />}
-        />
-      ) : null}
-      <FlexRow justifyContent={value === undefined ? 'center' : 'space-between'} overflow="hidden" height={sizeValueHeight[size]}>
+    <FlexRow flexDirection="column" minWidth={0} alignItems="stretch" overflow="hidden" {...props}>
+      {title !== undefined ? <PropertyTitle tip={tip} title={required ? `${title}*` : title} size={size} more={<PropertyActionsMenu actions={actions} />} {...titleProps} /> : null}
+      <FlexRow paddingX={1} justifyContent={value === undefined ? 'center' : 'space-between'} overflow="hidden" height={sizeValueHeight[size]}>
         {children ? (
           children
         ) : value !== undefined ? (
@@ -77,6 +34,18 @@ export const Property: React.FC<PropertyProps> = ({
         )}
         {value !== undefined ? badge ? <IdenticonCorner value={value} /> : null : null}
       </FlexRow>
-    </FlexCol>
+    </FlexRow>
+  )
+}
+
+const PropertyPaper: React.FC<PropertyPaperProps> = ({ style, variant, elevation = 2, square, ...props }) => {
+  return (
+    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
+      <PropertyBox {...props} paper={false} />
+    </Paper>
   )
 }
+
+export const Property: React.FC<PropertyProps> = (props) => {
+  return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />
+}

package/src/components/{Property.stories.tsx → PropertyBox.stories.tsx}

@@ -14,34 +14,34 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'Properties/Property',
+  title: 'Properties/PropertyBox',
 } as ComponentMeta<typeof Property>
 
-const Template: ComponentStory<typeof Property> = (args) => <Property {...args}></Property>
+const Template: ComponentStory<typeof Property> = (args) => <Property {...args} paper={false}></Property>
 
 const TemplateWithCompare: ComponentStory<typeof Property> = (args) => (
-  <FlexCol alignItems="stretch">
-    <FlexRow>
+  <FlexCol gap={1} alignItems="stretch">
+    <FlexRow gap={1}>
       <TextField size="small" value="Sample text Field" />
       <Property {...args} size="small"></Property>
     </FlexRow>
-    <FlexRow>
+    <FlexRow gap={1}>
       <Property {...args} size="small"></Property>
       <Property {...args} size="small"></Property>
     </FlexRow>
-    <FlexRow>
+    <FlexRow gap={1}>
       <TextField size="medium" value="Sample text Field" />
       <Property {...args} size="medium"></Property>
     </FlexRow>
-    <FlexRow>
+    <FlexRow gap={1}>
       <Property {...args} size="medium"></Property>
       <Property {...args} size="medium"></Property>
     </FlexRow>
-    <FlexRow>
+    <FlexRow gap={1}>
       <TextField value="Sample text Field" />
       <Property {...args} size="large"></Property>
     </FlexRow>
-    <FlexRow>
+    <FlexRow gap={1}>
       <Property {...args} size="large"></Property>
       <Property {...args} size="large"></Property>
     </FlexRow>