@xyo-network/react-property 2.25.16 → 2.25.19

package/dist/esm/components/Property.js

@@ -5,7 +5,7 @@ import { IdenticonCorner } from './IdenticonCorner';
 import { PropertyActionsMenu } from './PropertyActionsMenu';
 import { PropertyTitle } from './Title';
 import { PropertyValue } from './Value';
-export const Property = ({ title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
+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,
@@ -22,6 +22,7 @@ export const Property = ({ title, value, children, size = 'medium', tip, actions
         medium: 'body1',
         small: 'body1',
     };
-    return (_jsxs(FlexCol, { minWidth: 0, alignItems: "stretch", border: 1, borderColor: required && value === undefined ? theme.palette.error.main : theme.palette.divider, borderRadius: 1, overflow: "hidden", ...props, children: [title !== undefined ? (_jsx(PropertyTitle, { tip: tip, title: title, size: size, bgcolor: theme.palette.secondary.main, color: theme.palette.getContrastText(theme.palette.secondary.main), height: sizeTitleHeight[size], more: _jsx(PropertyActionsMenu, { actions: actions }) })) : null, _jsxs(FlexRow, { justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size], 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 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] })] }));
 };
 //# 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":";AAAA,OAAO,EAAE,gBAAgB,EAAqB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChJ,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAA6B;QAChD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV,CAAA;IAED,MAAM,eAAe,GAA6B;QAChD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV,CAAA;IAED,MAAM,YAAY,GAAwC;QACxD,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO;KACf,CAAA;IAED,OAAO,CACL,MAAC,OAAO,IACN,QAAQ,EAAE,CAAC,EACX,UAAU,EAAC,SAAS,EACpB,MAAM,EAAE,CAAC,EACT,WAAW,EAAE,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAC/F,YAAY,EAAE,CAAC,EACf,QAAQ,EAAC,QAAQ,KACb,KAAK,aAER,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,aAAa,IACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EACrC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAClE,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,EAC7B,IAAI,EAAE,KAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO,GAAI,GAC/C,CACH,CAAC,CAAC,CAAC,IAAI,EACR,MAAC,OAAO,IAAC,cAAc,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,EAAE,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,aACvH,QAAQ,EACR,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,aAAa,IAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,YAAY,CAAC,IAAI,CAAC,GAAI,CACtH,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,CAC/B,EACA,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IACtE,IACF,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"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"}

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

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

package/dist/esm/components/PropertyGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, useTheme } from '@mui/material';
+import { FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react';
+import { typeOf } from '@xyo-network/core';
+export const PropertyGroup = ({ border, borderColor, borderRadius, variant = 'outlined', children, title, color = 'secondary', tip, ...props }) => {
+    const theme = useTheme();
+    const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color;
+    const childrenArray = typeOf(children) === 'array' ? children : undefined;
+    return (_jsxs(FlexRow, { border: border ?? variant === 'outlined' ? 1 : 0, borderColor: borderColor ?? variant === 'outlined' ? theme.palette.divider : undefined, borderRadius: borderRadius ?? variant === 'outlined' ? 1 : undefined, overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", ...props, children: [_jsxs(FlexRow, { padding: 1, justifyContent: "start", bgcolor: bgcolor, color: theme.palette.getContrastText(bgcolor), children: [_jsx(Typography, { children: title }), tip ? (_jsx(QuickTipButton, { color: "inherit", title: title, children: tip })) : null] }), childrenArray ? (_jsx(FlexGrowRow, { children: childrenArray?.map((child, index) => {
+                    return child ? (_jsx(FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index)) : null;
+                }) })) : (children)] }));
+};
+//# sourceMappingURL=PropertyGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyGroup.js","sourceRoot":"","sources":["../../../src/components/PropertyGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAK1C,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9K,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IAChG,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,OAAO,CAAC,CAAC,CAAE,QAA2B,CAAC,CAAC,CAAC,SAAS,CAAA;IAC7F,OAAO,CACL,MAAC,OAAO,IACN,MAAM,EAAE,MAAM,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChD,WAAW,EAAE,WAAW,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACtF,YAAY,EAAE,YAAY,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpE,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,YAAY,EAC3B,UAAU,EAAC,SAAS,KAChB,KAAK,aAET,MAAC,OAAO,IAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,aACzG,KAAC,UAAU,cAAE,KAAK,GAAc,EAC/B,GAAG,CAAC,CAAC,CAAC,CACL,KAAC,cAAc,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,YACzC,GAAG,GACW,CAClB,CAAC,CAAC,CAAC,IAAI,IACA,EACT,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"}

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

@@ -2,12 +2,17 @@ import { FlexBoxProps } from '@xylabs/sdk-react';
 import { SizeProp } from '@xyo-network/react-shared';
 import { ReactNode } from 'react';
 import { PropertyAction } from './PropertyAction';
-export interface PropertyProps extends FlexBoxProps {
-    actions?: PropertyAction[];
-    required?: boolean;
+export interface PropertyBaseProps extends FlexBoxProps {
     tip?: ReactNode;
     title?: string;
+    color?: 'primary' | 'secondary' | string;
+    variant?: 'outlined' | 'default';
+}
+export interface PropertyProps extends PropertyBaseProps {
+    actions?: PropertyAction[];
+    required?: boolean;
     value?: string | number | boolean | null;
     badge?: boolean;
     size?: SizeProp;
 }
+export declare type PropertyGroupProps = PropertyBaseProps;

package/dist/esm/components/Value.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography, useTheme } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
-export const PropertyValue = ({ value, shortSpace, typographyVariant = 'caption', ...props }) => {
+export const PropertyValue = ({ value, shortSpace, typographyVariant = 'body1', ...props }) => {
     const [parentWidth, setParentWidth] = useState();
     const theme = useTheme();
     const ref = useRef(null);

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,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5H,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,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"}

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

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

package/dist/esm/components/index.js

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

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,wBAAwB,CAAA;AACtC,cAAc,SAAS,CAAA"}
+{"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"}

package/package.json

@@ -16,8 +16,8 @@
     "@mui/material": "^5.8.1",
     "@xylabs/sdk-react": "^2.12.8",
     "@xyo-network/core": "^2.20.33",
-    "@xyo-network/react-shared": "^2.25.16",
-    "@xyo-network/react-theme": "^2.25.16",
+    "@xyo-network/react-shared": "^2.25.19",
+    "@xyo-network/react-theme": "^2.25.19",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -100,6 +100,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.16",
+  "version": "2.25.19",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Property.tsx

@@ -8,7 +8,22 @@ import { PropertyProps } from './PropertyProps'
 import { PropertyTitle } from './Title'
 import { PropertyValue } from './Value'
 
-export const Property: React.FC<PropertyProps> = ({ title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
+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> = {
@@ -29,30 +44,33 @@ export const Property: React.FC<PropertyProps> = ({ title, value, children, size
     small: 'body1',
   }
 
+  const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color
+
   return (
     <FlexCol
       minWidth={0}
       alignItems="stretch"
-      border={1}
-      borderColor={required && value === undefined ? theme.palette.error.main : theme.palette.divider}
-      borderRadius={1}
+      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={title}
+          title={required ? `${title}*` : title}
           size={size}
-          bgcolor={theme.palette.secondary.main}
-          color={theme.palette.getContrastText(theme.palette.secondary.main)}
+          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]}>
-        {children}
-        {value !== undefined ? (
+        {children ? (
+          children
+        ) : value !== undefined ? (
           <PropertyValue shortSpace={badge ? sizeValueHeight[size] : 0} value={value} typographyVariant={sizeVariants[size]} />
         ) : (
           <CircularProgress size={16} />

package/src/components/PropertyGroup.tsx

@@ -0,0 +1,45 @@
+import { Typography, useTheme } from '@mui/material'
+import { FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
+import { typeOf } from '@xyo-network/core'
+import { ReactElement } from 'react'
+
+import { PropertyGroupProps } from './PropertyProps'
+
+export const PropertyGroup: React.FC<PropertyGroupProps> = ({ border, borderColor, borderRadius, variant = 'outlined', children, title, color = 'secondary', tip, ...props }) => {
+  const theme = useTheme()
+  const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color
+  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined
+  return (
+    <FlexRow
+      border={border ?? variant === 'outlined' ? 1 : 0}
+      borderColor={borderColor ?? variant === 'outlined' ? theme.palette.divider : undefined}
+      borderRadius={borderRadius ?? variant === 'outlined' ? 1 : undefined}
+      overflow="hidden"
+      justifyContent="flex-start"
+      alignItems="stretch"
+      {...props}
+    >
+      <FlexRow padding={1} justifyContent="start" bgcolor={bgcolor} color={theme.palette.getContrastText(bgcolor)}>
+        <Typography>{title}</Typography>
+        {tip ? (
+          <QuickTipButton color="inherit" title={title}>
+            {tip}
+          </QuickTipButton>
+        ) : null}
+      </FlexRow>
+      {childrenArray ? (
+        <FlexGrowRow>
+          {childrenArray?.map((child, index) => {
+            return child ? (
+              <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>
+                {child}
+              </FlexGrowRow>
+            ) : null
+          })}
+        </FlexGrowRow>
+      ) : (
+        children
+      )}
+    </FlexRow>
+  )
+}

package/src/components/PropertyProps.tsx

@@ -4,12 +4,18 @@ import { ReactNode } from 'react'
 
 import { PropertyAction } from './PropertyAction'
 
-export interface PropertyProps extends FlexBoxProps {
-  actions?: PropertyAction[]
-  required?: boolean
+export interface PropertyBaseProps extends FlexBoxProps {
   tip?: ReactNode
   title?: string
+  color?: 'primary' | 'secondary' | string
+  variant?: 'outlined' | 'default'
+}
+export interface PropertyProps extends PropertyBaseProps {
+  actions?: PropertyAction[]
+  required?: boolean
   value?: string | number | boolean | null
   badge?: boolean
   size?: SizeProp
 }
+
+export type PropertyGroupProps = PropertyBaseProps

package/src/components/Value.tsx

@@ -9,7 +9,7 @@ export interface PropertyValueProps extends TypographyProps<'div'> {
   shortSpace?: number
 }
 
-export const PropertyValue: React.FC<PropertyValueProps> = ({ value, shortSpace, typographyVariant = 'caption', ...props }) => {
+export const PropertyValue: React.FC<PropertyValueProps> = ({ value, shortSpace, typographyVariant = 'body1', ...props }) => {
   const [parentWidth, setParentWidth] = useState<number>()
   const theme = useTheme()
 

package/src/components/index.ts

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