@xyo-network/react-shared 2.28.11 → 2.29.0-rc.3

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.26.20",
+    "@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.26.20",
-    "@xyo-network/react-storybook": "^2.28.11"
+    "@xyo-network/api": "^2.27.0-rc.10",
+    "@xyo-network/react-storybook": "^2.29.0-rc.3"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -81,5 +81,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.28.11"
+  "version": "2.29.0-rc.3",
+  "stableVersion": "2.28.10"
 }

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'