@xyo-network/react-shared 2.28.10 → 2.29.0-rc.2

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AlertProps } from '@mui/material';
+import { XyoApiError } from '@xyo-network/api';
+export interface ApiErrorAlertProps extends AlertProps {
+    call?: XyoApiError;
+}
+declare const ApiErrorAlert: React.FC<ApiErrorAlertProps>;
+export { ApiErrorAlert };
+//# sourceMappingURL=ApiErrorAlert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiErrorAlert.d.ts","sourceRoot":"","sources":["../../../src/components/ApiErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAA0B,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAW/C,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/components/ApiErrorAlert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertTitle, Typography } from '@mui/material';
+const ApiErrorAlert = ({ call, ...props }) => {
+    return (_jsxs(Alert, { severity: "error", ...props, children: [_jsx(AlertTitle, { children: "Whoops! Something went wrong" }), _jsx(Typography, { sx: { wordBreak: 'break-all' }, children: call?.config?.url }), _jsx(Typography, { variant: "caption", mr: 0.5, fontWeight: "bold", children: "Error:" }), _jsx(Typography, { variant: "caption", children: call?.message })] }));
+};
+export { ApiErrorAlert };
+//# sourceMappingURL=ApiErrorAlert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiErrorAlert.js","sourceRoot":"","sources":["../../../src/components/ApiErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAOzE,MAAM,aAAa,GAAiC,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,CACL,MAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,KAAK,KAAK,aAC/B,KAAC,UAAU,+CAA0C,EACrD,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,YAAG,IAAI,EAAE,MAAM,EAAE,GAAG,GAAc,EAC5E,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAC,MAAM,uBAE3C,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,EAAE,OAAO,GAAc,IACpD,CACT,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

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

@@ -2,6 +2,7 @@ import { Component, ErrorInfo, ReactNode } from 'react';
 export interface ErrorBoundaryProps {
     children: ReactNode;
     fallback?: ReactNode;
+    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,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEvD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;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;CAcP"}
+{"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

@@ -15,6 +15,9 @@ export class ErrorBoundary extends Component {
     }
     render() {
         if (this.state.error) {
+            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, "]"] })] })));
         }
         return this.props.children;

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,SAAS,EAAwB,MAAM,OAAO,CAAA;AAWvD,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,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

@@ -1,4 +1,5 @@
 export * from './Ampersand';
+export * from './ApiErrorAlert';
 export * from './BasicHero';
 export * from './ErrorBoundry';
 export * from './JsonRouteWrapper';
@@ -12,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,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

@@ -1,4 +1,5 @@
 export * from './Ampersand';
+export * from './ApiErrorAlert';
 export * from './BasicHero';
 export * from './ErrorBoundry';
 export * from './JsonRouteWrapper';
@@ -12,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,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.26.19",
+    "@xyo-network/core": "^2.27.0-rc.10",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -35,9 +35,9 @@
   "devDependencies": {
     "@storybook/react": "^6.5.10",
     "@xylabs/pixel": "^1.4.5",
-    "@xylabs/tsconfig-dom": "^2.5.122",
-    "@xyo-network/api": "^2.26.19",
-    "@xyo-network/react-storybook": "^2.28.10"
+    "@xylabs/tsconfig-dom": "^2.5.123",
+    "@xyo-network/api": "^2.27.0-rc.10",
+    "@xyo-network/react-storybook": "^2.29.0-rc.2"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -81,5 +81,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.28.10"
+  "version": "2.29.0-rc.2",
+  "stableVersion": "2.28.10"
 }

package/src/components/ApiErrorAlert.tsx

@@ -0,0 +1,21 @@
+import { Alert, AlertProps, AlertTitle, Typography } from '@mui/material'
+import { XyoApiError } from '@xyo-network/api'
+
+export interface ApiErrorAlertProps extends AlertProps {
+  call?: XyoApiError
+}
+
+const ApiErrorAlert: React.FC<ApiErrorAlertProps> = ({ call, ...props }) => {
+  return (
+    <Alert severity="error" {...props}>
+      <AlertTitle>Whoops! Something went wrong</AlertTitle>
+      <Typography sx={{ wordBreak: 'break-all' }}>{call?.config?.url}</Typography>
+      <Typography variant="caption" mr={0.5} fontWeight="bold">
+        Error:
+      </Typography>
+      <Typography variant="caption">{call?.message}</Typography>
+    </Alert>
+  )
+}
+
+export { ApiErrorAlert }

package/src/components/ErrorBoundry.tsx

@@ -4,7 +4,10 @@ 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
+  fallbackWithError?: (error: Error) => ReactNode
 }
 
 export interface ErrorBoundaryState {
@@ -27,6 +30,9 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   render() {
     if (this.state.error) {
+      if (this.props.fallbackWithError) {
+        return this.props.fallbackWithError(this.state.error)
+      }
       return (
         this.props.fallback ?? (
           <FlexCol>

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

@@ -1,4 +1,5 @@
 export * from './Ampersand'
+export * from './ApiErrorAlert'
 export * from './BasicHero'
 export * from './ErrorBoundry'
 export * from './JsonRouteWrapper'
@@ -12,3 +13,5 @@ export * from './TokenBar'
 export * from './TokenData'
 export * from './TokenSummary'
 export * from './TypographyEx'
+export * from './XyoThemeTokenAvatar'
+export * from './XyoThemeTokenAvatarGroup'