@xyo-network/react-shared 2.27.4 → 2.27.5

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface TokenBarProps {
+import { PaperProps } from '@mui/material';
+export interface TokenBarProps extends PaperProps {
     text1?: string | number;
     text2?: string | number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TokenBar.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAY5C,CAAA"}
+{"version":3,"file":"TokenBar.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAAc,MAAM,eAAe,CAAA;AAE7D,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAa5C,CAAA"}

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, useTheme } from '@mui/material';
-import { FlexGrowRow } from '@xylabs/react-flexbox';
-export const TokenBar = ({ text1, text2 }) => {
-    const theme = useTheme();
-    return (_jsxs(FlexGrowRow, { width: "100%", paddingY: 1, paddingX: 2, bgcolor: theme.palette.background.paper, borderRadius: 1, justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", fontWeight: 300, children: text1 }), _jsx(Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", paddingLeft: 2, children: text2 })] }));
+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 })] }) }));
 };
 //# 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,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAMnD,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACpE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,CACL,MAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,aAC1I,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,YACxC,KAAK,GACK,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,WAAW,EAAE,CAAC,YAC/F,KAAK,GACK,IACD,CACf,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,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"}

package/package.json

@@ -35,7 +35,7 @@
     "@xylabs/pixel": "^1.4.5",
     "@xylabs/tsconfig-dom": "^2.5.13",
     "@xyo-network/api": "^2.24.10",
-    "@xyo-network/react-storybook": "^2.27.4"
+    "@xyo-network/react-storybook": "^2.27.5"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -86,5 +86,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.27.4"
+  "version": "2.27.5"
 }

package/src/components/TokenBar/TokenBar.tsx

@@ -1,20 +1,21 @@
-import { Typography, useTheme } from '@mui/material'
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-export interface TokenBarProps {
+import { Paper, PaperProps, Typography } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+export interface TokenBarProps extends PaperProps {
   text1?: string | number
   text2?: string | number
 }
 
-export const TokenBar: React.FC<TokenBarProps> = ({ text1, text2 }) => {
-  const theme = useTheme()
+export const TokenBar: React.FC<TokenBarProps> = ({ text1, text2, ...props }) => {
   return (
-    <FlexGrowRow width="100%" paddingY={1} paddingX={2} bgcolor={theme.palette.background.paper} borderRadius={1} justifyContent="space-between">
-      <Typography variant="body1" fontWeight={300}>
-        {text1}
-      </Typography>
-      <Typography variant="body1" fontWeight={300} textTransform="uppercase" color="gray" paddingLeft={2}>
-        {text2}
-      </Typography>
-    </FlexGrowRow>
+    <Paper elevation={0} {...props}>
+      <FlexRow justifyContent="space-between">
+        <Typography variant="body1" fontWeight={300} margin={1}>
+          {text1}
+        </Typography>
+        <Typography variant="body1" fontWeight={300} textTransform="uppercase" color="gray" margin={1}>
+          {text2}
+        </Typography>
+      </FlexRow>
+    </Paper>
   )
 }