@xyo-network/react-shared 2.27.9 → 2.27.12

package/dist/esm/components/TokenBar/TokenBar.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Paper, Typography } from '@mui/material';
 import { FlexRow } from '@xylabs/react-flexbox';
 export const TokenBar = ({ text1, text2, ...props }) => {
-    return (_jsx(Paper, { elevation: 0, ...props, children: _jsxs(FlexRow, { justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", fontWeight: 300, margin: 1, children: text1 }), _jsx(Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, children: text2 })] }) }));
+    return (_jsx(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: _jsxs(FlexRow, { justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", fontWeight: 300, margin: 1, children: text1 }), _jsx(Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, children: text2 })] }) }));
 };
 //# sourceMappingURL=TokenBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenBar.js","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAM/C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,KAAM,KAAK,YAC5B,MAAC,OAAO,IAAC,cAAc,EAAC,eAAe,aACrC,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,YACnD,KAAK,GACK,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,YAC1F,KAAK,GACK,IACL,GACJ,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TokenBar.js","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAM/C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,KAAK,KAAK,YACtD,MAAC,OAAO,IAAC,cAAc,EAAC,eAAe,aACrC,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,YACnD,KAAK,GACK,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,YAC1F,KAAK,GACK,IACL,GACJ,CACT,CAAA;AACH,CAAC,CAAA"}

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,CAepD,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, { paddingBottom: 3, width: "100%", justifyContent: "flex-start", ...props, children: [_jsx(FlexCol, { borderRadius: "50%", padding: 1, 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,aAAa,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,cAAc,EAAC,YAAY,KAAK,KAAK,aAC3E,KAAC,OAAO,IAAC,YAAY,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,YAC/H,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

@@ -13,7 +13,7 @@
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.3",
+    "@mui/material": "^5.10.0",
     "@mui/styles": "^5.9.3",
     "@xylabs/pixel": "^1.4.5",
     "@xylabs/react-appbar": "^2.14.10",
@@ -27,15 +27,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "tslib": "^2.4.0"
   },
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
     "@storybook/react": "^6.5.10",
     "@xylabs/pixel": "^1.4.5",
-    "@xylabs/tsconfig-dom": "^2.5.75",
+    "@xylabs/tsconfig-dom": "^2.5.87",
     "@xyo-network/api": "^2.24.12",
-    "@xyo-network/react-storybook": "^2.27.9"
+    "@xyo-network/react-storybook": "^2.27.12"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -66,13 +67,6 @@
     "react"
   ],
   "license": "LGPL-3.0",
-  "resolutions": {
-    "@storybook/react/webpack": "^5",
-    "bn.js": "^5.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "webpack": "^5"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -86,5 +80,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.27.9"
+  "version": "2.27.12"
 }

package/src/components/TokenBar/TokenBar.tsx

@@ -7,7 +7,7 @@ export interface TokenBarProps extends PaperProps {
 
 export const TokenBar: React.FC<TokenBarProps> = ({ text1, text2, ...props }) => {
   return (
-    <Paper elevation={0} {...props}>
+    <Paper elevation={0} className="TokenBar-root" {...props}>
       <FlexRow justifyContent="space-between">
         <Typography variant="body1" fontWeight={300} margin={1}>
           {text1}

package/src/components/TokenSummary/TokenSummary.tsx

@@ -1,20 +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 paddingBottom={3} width="100%" justifyContent="flex-start" {...props}>
-        <FlexCol borderRadius="50%" padding={1} bgcolor={imgBgColor ? imgBgColor : theme.palette.text.primary} height="40px" width="40px">
+      <FlexRow className="TokenSummary-root" paddingBottom={3} width="100%" justifyContent="flex-start" {...props}>
+        <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>