@xyo-network/react-shared 2.29.0-rc.1 → 2.29.0-rc.5

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

@@ -1,10 +1,8 @@
-import { Component, ErrorInfo, ReactElement, ReactNode } from 'react';
+import { Component, ErrorInfo, ReactNode } from 'react';
 export interface ErrorBoundaryProps {
     children: ReactNode;
     fallback?: ReactNode;
-    fallbackWithErrorProp?: ReactElement<{
-        error: Error;
-    }>;
+    fallbackWithError?: (error: Error) => ReactNode;
 }
 export interface ErrorBoundaryState {
     error?: Error;

package/dist/esm/components/ErrorBoundry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundry.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IAEnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,qBAAqB,CAAC,EAAE,YAAY,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAA;CACvD;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACtE,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAI5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAkBP"}
+{"version":3,"file":"ErrorBoundry.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEvD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IAEnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAA;CAChD;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACtE,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAI5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAiBP"}

package/dist/esm/components/ErrorBoundry.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { FlexCol } from '@xylabs/react-flexbox';
-import { cloneElement, Component } from 'react';
+import { Component } from 'react';
 export class ErrorBoundary extends Component {
     constructor(props) {
         super(props);
@@ -15,9 +15,8 @@ export class ErrorBoundary extends Component {
     }
     render() {
         if (this.state.error) {
-            if (this.props.fallbackWithErrorProp) {
-                const clone = cloneElement(this.props.fallbackWithErrorProp, { error: this.state.error });
-                return clone;
+            if (this.props.fallbackWithError) {
+                return this.props.fallbackWithError(this.state.error);
             }
             return (this.props.fallback ?? (_jsxs(FlexCol, { children: [_jsx(Typography, { variant: "h1", children: "Something went wrong." }), _jsxs(Typography, { variant: "body1", children: ["[", this.state.error?.message, "]"] })] })));
         }

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundry.js","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAA;AAcnF,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAClD,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,SAAS,EAAE,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE;gBACpC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAA;gBACzF,OAAO,KAAK,CAAA;aACb;YACD,OAAO,CACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACrB,MAAC,OAAO,eACN,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,sCAAmC,EAC3D,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,kBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,SAAe,IAC9D,CACX,CACF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}
+{"version":3,"file":"ErrorBoundry.js","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAA;AAcvD,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAClD,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,SAAS,EAAE,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;gBAChC,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;aACtD;YACD,OAAO,CACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACrB,MAAC,OAAO,eACN,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,sCAAmC,EAC3D,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,kBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,SAAe,IAC9D,CACX,CACF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}

package/dist/esm/components/TokenSummary/TokenSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAc,eAAe,EAAwB,MAAM,eAAe,CAAA;AACtG,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBpD,CAAA"}
+{"version":3,"file":"TokenSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,eAAe,EAAc,MAAM,eAAe,CAAA;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAepD,CAAA"}

package/dist/esm/components/TokenSummary/TokenSummary.js

@@ -1,16 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, CardHeader, Typography, useTheme } from '@mui/material';
-export const TokenSummary = ({ imgBgProps = {}, icon, symbol, symbolElement, children, ...props }) => {
-    const theme = useTheme();
-    const avatarProps = {
-        ...imgBgProps,
-        sx: {
-            background: theme.palette.common.white,
-            height: '40px',
-            padding: theme.spacing(0.25),
-            ...imgBgProps.sx,
-        },
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(CardHeader, { avatar: _jsx(Avatar, { src: icon, alt: symbol, ...avatarProps }), title: _jsx(Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }), ...props }), children] }));
+import { CardHeader, Typography } from '@mui/material';
+import { XyoThemeTokenAvatar } from '../XyoThemeTokenAvatar';
+export const TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(CardHeader, { avatar: _jsx(XyoThemeTokenAvatar, { src: icon, alt: symbol }), title: _jsx(Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }), ...props }), children] }));
 };
 //# sourceMappingURL=TokenSummary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenSummary.js","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAe,UAAU,EAAmB,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAUtG,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChI,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,WAAW,GAAG;QAClB,GAAG,UAAU;QACb,EAAE,EAAE;YACF,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;YACtC,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;YAC5B,GAAG,UAAU,CAAC,EAAE;SACjB;KACF,CAAA;IACD,OAAO,CACL,8BACE,KAAC,UAAU,IACT,MAAM,EAAE,KAAC,MAAM,IAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAM,WAAW,GAAI,EAC3D,KAAK,EACH,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,YAChE,aAAa,IAAI,MAAM,GACb,KAEX,KAAK,GACT,EACD,QAAQ,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TokenSummary.js","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,UAAU,EAAmB,UAAU,EAAE,MAAM,eAAe,CAAA;AAGpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAS5D,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/G,OAAO,CACL,8BACE,KAAC,UAAU,IACT,MAAM,EAAE,KAAC,mBAAmB,IAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,GAAI,EACvD,KAAK,EACH,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,YAChE,aAAa,IAAI,MAAM,GACb,KAEX,KAAK,GACT,EACD,QAAQ,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}

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

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

package/dist/esm/components/XyoThemeTokenAvatar/XyoThemeTokenAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyoThemeTokenAvatar.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatar/XyoThemeTokenAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,WAAW,EAAY,MAAM,eAAe,CAAA;AAE7D,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAGrD,CAAA"}

package/dist/esm/components/XyoThemeTokenAvatar/XyoThemeTokenAvatar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, useTheme } from '@mui/material';
+export const XyoThemeTokenAvatar = ({ ...props }) => {
+    const theme = useTheme();
+    return _jsx(Avatar, { sx: { background: theme.palette.common.white }, ...props });
+};
+//# sourceMappingURL=XyoThemeTokenAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XyoThemeTokenAvatar.js","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatar/XyoThemeTokenAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAe,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7D,MAAM,CAAC,MAAM,mBAAmB,GAA0B,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AAC9E,CAAC,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './XyoThemeTokenAvatar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './XyoThemeTokenAvatar';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AvatarGroupProps } from '@mui/material';
+export interface XyoThemeTokenAvatarGroupProps extends AvatarGroupProps {
+    images?: string[];
+}
+export declare const XyoThemeTokenAvatarGroup: React.FC<XyoThemeTokenAvatarGroupProps>;
+//# sourceMappingURL=XyoThemeTokenAvatarGroup.d.ts.map

package/dist/esm/components/XyoThemeTokenAvatarGroup/XyoThemeTokenAvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyoThemeTokenAvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatarGroup/XyoThemeTokenAvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAI7D,MAAM,WAAW,6BAA8B,SAAQ,gBAAgB;IACrE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAQ5E,CAAA"}

package/dist/esm/components/XyoThemeTokenAvatarGroup/XyoThemeTokenAvatarGroup.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AvatarGroup } from '@mui/material';
+import { XyoThemeTokenAvatar } from '../XyoThemeTokenAvatar';
+export const XyoThemeTokenAvatarGroup = ({ images, ...props }) => {
+    return (_jsx(AvatarGroup, { ...props, children: images?.map((image, index) => (_jsx(XyoThemeTokenAvatar, { src: image }, index))) }));
+};
+//# sourceMappingURL=XyoThemeTokenAvatarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XyoThemeTokenAvatarGroup.js","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatarGroup/XyoThemeTokenAvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAM5D,MAAM,CAAC,MAAM,wBAAwB,GAA4C,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,OAAO,CACL,KAAC,WAAW,OAAK,KAAK,YACnB,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,KAAC,mBAAmB,IAAa,GAAG,EAAE,KAAK,IAAjB,KAAK,CAAgB,CAChD,CAAC,GACU,CACf,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './XyoThemeTokenAvatarGroup';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatarGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './XyoThemeTokenAvatarGroup';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/XyoThemeTokenAvatarGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA"}

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

@@ -13,4 +13,6 @@ export * from './TokenBar';
 export * from './TokenData';
 export * from './TokenSummary';
 export * from './TypographyEx';
+export * from './XyoThemeTokenAvatar';
+export * from './XyoThemeTokenAvatarGroup';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA"}

package/dist/esm/components/index.js

@@ -13,4 +13,6 @@ export * from './TokenBar';
 export * from './TokenData';
 export * from './TokenSummary';
 export * from './TypographyEx';
+export * from './XyoThemeTokenAvatar';
+export * from './XyoThemeTokenAvatarGroup';
 //# 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,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA"}

package/package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.1",
-    "@mui/styles": "^5.9.3",
+    "@mui/icons-material": "^5.10.2",
+    "@mui/material": "^5.10.2",
+    "@mui/styles": "^5.10.2",
     "@xylabs/pixel": "^1.4.5",
     "@xylabs/react-appbar": "^2.14.13",
     "@xylabs/react-button": "^2.14.13",
@@ -23,7 +23,7 @@
     "@xylabs/react-link": "^2.14.13",
     "@xylabs/react-quick-tip-button": "^2.14.13",
     "@xylabs/react-shared": "^2.14.13",
-    "@xyo-network/core": "^2.27.0-rc.3",
+    "@xyo-network/core": "^2.27.0-rc.10",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -36,8 +36,8 @@
     "@storybook/react": "^6.5.10",
     "@xylabs/pixel": "^1.4.5",
     "@xylabs/tsconfig-dom": "^2.5.123",
-    "@xyo-network/api": "^2.27.0-rc.3",
-    "@xyo-network/react-storybook": "^2.29.0-rc.1"
+    "@xyo-network/api": "^2.27.0-rc.10",
+    "@xyo-network/react-storybook": "^2.29.0-rc.5"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -81,6 +81,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.29.0-rc.1",
+  "version": "2.29.0-rc.5",
   "stableVersion": "2.28.10"
 }

package/src/components/ErrorBoundry.tsx

@@ -1,13 +1,13 @@
 import { Typography } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
-import { cloneElement, Component, ErrorInfo, ReactElement, ReactNode } from 'react'
+import { Component, ErrorInfo, ReactNode } from 'react'
 
 export interface ErrorBoundaryProps {
   children: ReactNode
   // fallback as a static ReactNode value
   fallback?: ReactNode
   // fallback element that can receive the error as a prop
-  fallbackWithErrorProp?: ReactElement<{ error: Error }>
+  fallbackWithError?: (error: Error) => ReactNode
 }
 
 export interface ErrorBoundaryState {
@@ -30,9 +30,8 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   render() {
     if (this.state.error) {
-      if (this.props.fallbackWithErrorProp) {
-        const clone = cloneElement(this.props.fallbackWithErrorProp, { error: this.state.error })
-        return clone
+      if (this.props.fallbackWithError) {
+        return this.props.fallbackWithError(this.state.error)
       }
       return (
         this.props.fallback ?? (

package/src/components/TokenSummary/TokenSummary.tsx

@@ -1,6 +1,8 @@
-import { Avatar, AvatarProps, CardHeader, CardHeaderProps, Typography, useTheme } from '@mui/material'
+import { AvatarProps, CardHeader, CardHeaderProps, Typography } from '@mui/material'
 import { ReactNode } from 'react'
 
+import { XyoThemeTokenAvatar } from '../XyoThemeTokenAvatar'
+
 export interface TokenSummaryProps extends CardHeaderProps {
   icon?: string
   symbol?: string
@@ -8,21 +10,11 @@ export interface TokenSummaryProps extends CardHeaderProps {
   imgBgProps?: AvatarProps
 }
 
-export const TokenSummary: React.FC<TokenSummaryProps> = ({ imgBgProps = {}, icon, symbol, symbolElement, children, ...props }) => {
-  const theme = useTheme()
-  const avatarProps = {
-    ...imgBgProps,
-    sx: {
-      background: theme.palette.common.white,
-      height: '40px',
-      padding: theme.spacing(0.25),
-      ...imgBgProps.sx,
-    },
-  }
+export const TokenSummary: React.FC<TokenSummaryProps> = ({ icon, symbol, symbolElement, children, ...props }) => {
   return (
     <>
       <CardHeader
-        avatar={<Avatar src={icon} alt={symbol} {...avatarProps} />}
+        avatar={<XyoThemeTokenAvatar src={icon} alt={symbol} />}
         title={
           <Typography variant="h6" fontWeight={300} textTransform="uppercase">
             {symbolElement ?? symbol}

package/src/components/XyoThemeTokenAvatar/XyoThemeTokenAvatar.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import * as tokenData from '../TokenData'
+import { XyoThemeTokenAvatar } from './XyoThemeTokenAvatar'
+const StorybookEntry = {
+  argTypes: {},
+  component: XyoThemeTokenAvatar,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/XyoThemeTokenAvatar',
+} as ComponentMeta<typeof XyoThemeTokenAvatar>
+
+const Template: ComponentStory<typeof XyoThemeTokenAvatar> = (args) => (
+  <BrowserRouter>
+    <XyoThemeTokenAvatar {...args}></XyoThemeTokenAvatar>
+  </BrowserRouter>
+)
+
+const WithData = Template.bind({})
+WithData.args = { src: tokenData.TokenData[0].icon }
+
+export { WithData }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/XyoThemeTokenAvatar/XyoThemeTokenAvatar.tsx

@@ -0,0 +1,6 @@
+import { Avatar, AvatarProps, useTheme } from '@mui/material'
+
+export const XyoThemeTokenAvatar: React.FC<AvatarProps> = ({ ...props }) => {
+  const theme = useTheme()
+  return <Avatar sx={{ background: theme.palette.common.white }} {...props} />
+}

package/src/components/XyoThemeTokenAvatar/index.ts

@@ -0,0 +1 @@
+export * from './XyoThemeTokenAvatar'

package/src/components/XyoThemeTokenAvatarGroup/XyoThemeTokenAvatarGroup.stories.tsx

@@ -0,0 +1,42 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import * as tokenData from '../TokenData'
+import { XyoThemeTokenAvatarGroup } from './XyoThemeTokenAvatarGroup'
+const StorybookEntry = {
+  argTypes: {},
+  component: XyoThemeTokenAvatarGroup,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/XyoThemeTokenAvatarGroup',
+} as ComponentMeta<typeof XyoThemeTokenAvatarGroup>
+
+const Template: ComponentStory<typeof XyoThemeTokenAvatarGroup> = (args) => (
+  <BrowserRouter>
+    <XyoThemeTokenAvatarGroup {...args}></XyoThemeTokenAvatarGroup>
+  </BrowserRouter>
+)
+
+const WithData = Template.bind({})
+WithData.args = {
+  images: [
+    tokenData.TokenData[0].icon,
+    tokenData.TokenData[1].icon,
+    tokenData.TokenData[2].icon,
+    tokenData.TokenData[3].icon,
+    tokenData.TokenData[4].icon,
+    tokenData.TokenData[6].icon,
+    tokenData.TokenData[7].icon,
+    tokenData.TokenData[8].icon,
+    tokenData.TokenData[9].icon,
+    tokenData.TokenData[10].icon,
+  ],
+}
+
+export { WithData }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/XyoThemeTokenAvatarGroup/XyoThemeTokenAvatarGroup.tsx

@@ -0,0 +1,17 @@
+import { AvatarGroup, AvatarGroupProps } from '@mui/material'
+
+import { XyoThemeTokenAvatar } from '../XyoThemeTokenAvatar'
+
+export interface XyoThemeTokenAvatarGroupProps extends AvatarGroupProps {
+  images?: string[]
+}
+
+export const XyoThemeTokenAvatarGroup: React.FC<XyoThemeTokenAvatarGroupProps> = ({ images, ...props }) => {
+  return (
+    <AvatarGroup {...props}>
+      {images?.map((image, index) => (
+        <XyoThemeTokenAvatar key={index} src={image} />
+      ))}
+    </AvatarGroup>
+  )
+}

package/src/components/XyoThemeTokenAvatarGroup/index.ts

@@ -0,0 +1 @@
+export * from './XyoThemeTokenAvatarGroup'

package/src/components/index.ts

@@ -13,3 +13,5 @@ export * from './TokenBar'
 export * from './TokenData'
 export * from './TokenSummary'
 export * from './TypographyEx'
+export * from './XyoThemeTokenAvatar'
+export * from './XyoThemeTokenAvatarGroup'