@xyo-network/react-shared 2.27.10 → 2.27.13

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import { PaperProps } from '@mui/material';
 import { FlexBoxProps } from '@xylabs/react-flexbox';
 export interface TokenSummaryProps extends FlexBoxProps {
     icon?: string;
     symbol?: string;
-    imgBgColor?: string;
+    imgBgProps?: PaperProps;
 }
 export declare const TokenSummary: React.FC<TokenSummaryProps>;
 //# sourceMappingURL=TokenSummary.d.ts.map

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":";AACA,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsBpD,CAAA"}
+{"version":3,"file":"TokenSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAAc,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,UAAU,CAAA;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAcpD,CAAA"}

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Typography, useTheme } from '@mui/material';
+import { Paper, Typography } from '@mui/material';
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox';
-export const TokenSummary = ({ imgBgColor, icon, symbol, children, ...props }) => {
-    const theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsxs(FlexRow, { className: "TokenSummary-root", paddingBottom: 3, width: "100%", justifyContent: "flex-start", ...props, children: [_jsx(FlexCol, { borderRadius: "50%", padding: 1, className: "token-logo-bg", bgcolor: imgBgColor ? imgBgColor : theme.palette.text.primary, height: "40px", width: "40px", children: _jsx("img", { src: icon, height: "25px" }) }), _jsx(Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", paddingLeft: 1, children: symbol })] }), children] }));
+export const TokenSummary = ({ imgBgProps, icon, symbol, children, ...props }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(FlexRow, { className: "TokenSummary-root", paddingBottom: 3, width: "100%", justifyContent: "flex-start", ...props, children: [_jsx(Paper, { component: FlexCol, padding: 1, className: "token-logo-bg", height: "40px", width: "40px", sx: { borderRadius: '50%' }, ...imgBgProps, children: _jsx("img", { src: icon, height: "25px" }) }), _jsx(Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", paddingLeft: 1, children: symbol })] }), 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,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAQtE,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5G,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,CACL,8BACE,MAAC,OAAO,IAAC,SAAS,EAAC,mBAAmB,EAAC,aAAa,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,cAAc,EAAC,YAAY,KAAK,KAAK,aACzG,KAAC,OAAO,IACN,YAAY,EAAC,KAAK,EAClB,OAAO,EAAE,CAAC,EACV,SAAS,EAAC,eAAe,EACzB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAC7D,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,MAAM,YAEZ,cAAK,GAAG,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,GAAG,GACxB,EACV,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,WAAW,EAAE,CAAC,YAC/E,MAAM,GACI,IACL,EACT,QAAQ,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TokenSummary.js","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAQtE,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5G,OAAO,CACL,8BACE,MAAC,OAAO,IAAC,SAAS,EAAC,mBAAmB,EAAC,aAAa,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,cAAc,EAAC,YAAY,KAAK,KAAK,aACzG,KAAC,KAAK,IAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,KAAM,UAAU,YACrI,cAAK,GAAG,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,GAAG,GAC1B,EACR,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,WAAW,EAAE,CAAC,YAC/E,MAAM,GACI,IACL,EACT,QAAQ,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -34,9 +34,9 @@
   "devDependencies": {
     "@storybook/react": "^6.5.10",
     "@xylabs/pixel": "^1.4.5",
-    "@xylabs/tsconfig-dom": "^2.5.84",
+    "@xylabs/tsconfig-dom": "^2.5.87",
     "@xyo-network/api": "^2.24.12",
-    "@xyo-network/react-storybook": "^2.27.10"
+    "@xyo-network/react-storybook": "^2.27.13"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -80,5 +80,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.27.10"
+  "version": "2.27.13"
 }

package/src/components/TokenSummary/TokenSummary.tsx

@@ -1,27 +1,19 @@
-import { Typography, useTheme } from '@mui/material'
+import { Paper, PaperProps, Typography } from '@mui/material'
 import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
 
 export interface TokenSummaryProps extends FlexBoxProps {
   icon?: string
   symbol?: string
-  imgBgColor?: string
+  imgBgProps?: PaperProps
 }
 
-export const TokenSummary: React.FC<TokenSummaryProps> = ({ imgBgColor, icon, symbol, children, ...props }) => {
-  const theme = useTheme()
+export const TokenSummary: React.FC<TokenSummaryProps> = ({ imgBgProps, icon, symbol, children, ...props }) => {
   return (
     <>
       <FlexRow className="TokenSummary-root" paddingBottom={3} width="100%" justifyContent="flex-start" {...props}>
-        <FlexCol
-          borderRadius="50%"
-          padding={1}
-          className="token-logo-bg"
-          bgcolor={imgBgColor ? imgBgColor : theme.palette.text.primary}
-          height="40px"
-          width="40px"
-        >
+        <Paper component={FlexCol} padding={1} className="token-logo-bg" height="40px" width="40px" sx={{ borderRadius: '50%' }} {...imgBgProps}>
           <img src={icon} height="25px" />
-        </FlexCol>
+        </Paper>
         <Typography variant="h6" fontWeight={300} textTransform="uppercase" paddingLeft={1}>
           {symbol}
         </Typography>