@xyo-network/react-gas-price 5.2.1 → 5.2.3

package/dist/browser/index.mjs

@@ -198,11 +198,11 @@ var GasFeeCard = /* @__PURE__ */ __name(({ gasPrice, speedPaperElevation, priori
       rowGap: 2
     }
   }, /* @__PURE__ */ React10.createElement(FlexGrowCol2, {
-    bgcolor: theme.palette.secondary.dark,
+    bgcolor: theme.vars.palette.secondary.dark,
     alignItems: "start",
     p: 2,
     rowGap: 1.5,
-    color: theme.palette.common.white
+    color: theme.vars.palette.common.white
   }, /* @__PURE__ */ React10.createElement(GasPriceBox, {
     gasPrice
   }), priorityFee ? /* @__PURE__ */ React10.createElement(PriorityFeeBox, {

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Avatar/EthereumGasPriceAvatar.tsx","../../src/components/CardHeader/CardHeader.tsx","../../src/components/HeaderComponents/Actions.tsx","../../src/components/HeaderComponents/Header/Header.tsx","../../src/components/HeaderComponents/Header/Heading.tsx","../../src/components/layout/Header.tsx","../../src/components/layout/StyledCardHeader.tsx","../../src/components/GasFees/Card.tsx","../../src/components/GasFees/components/GasPriceBox.tsx","../../src/components/GasFees/components/GweiLabelTypography.tsx","../../src/components/GasFees/components/PriorityFeeBox.tsx","../../src/components/GasFees/components/SpeedBox.tsx","../../src/components/HeaderBox.tsx","../../src/components/RawPayload/ToggleRawPayloadBox.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport type { AvatarProps } from '@mui/material'\nimport { Avatar } from '@mui/material'\nimport React from 'react'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n","import type { CardProps } from '@mui/material'\nimport React from 'react'\n\nimport type { GasPriceWitnessUIBasePayload } from '../../types/index.ts'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents/index.ts'\nimport { StyledCardHeader } from '../layout/index.ts'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n  parsedPayload?: GasPriceWitnessUIBasePayload\n  title?: string\n}\nexport const GasPriceWitnessCardHeader = ({\n  ref, title, parsedPayload, ...props\n}: GasPriceCardHeaderProps) => (\n  <StyledCardHeader\n    title={<GasPriceHeaderTypography heading={title} />}\n    action={(\n      <GasPriceHeaderActionsBox\n        timestamp={parsedPayload?.timestamp}\n        baseFee={parsedPayload?.baseFee?.value}\n        baseFeeLabel={parsedPayload?.baseFee?.label}\n        blockNumber={parsedPayload?.blockNumber?.value}\n        blockNumberLabel={parsedPayload?.blockNumber?.label}\n      />\n    )}\n    ref={ref}\n    {...props}\n  />\n)\n\nGasPriceWitnessCardHeader.displayName = 'GasPriceWitnessCardHeader'\n","import { Chip } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {\n  baseFee?: number\n  baseFeeLabel?: string\n  blockNumber?: number\n  blockNumberLabel?: string\n  timestamp?: number\n}\n\nexport const GasPriceHeaderActionsBox: React.FC<GasPriceEstimateActionsBoxProps> = ({\n  baseFee,\n  baseFeeLabel = 'Base Fee',\n  blockNumber,\n  blockNumberLabel = 'Block Number',\n  timestamp,\n  ...props\n}) => {\n  return (\n    <FlexRow columnGap={1} rowGap={1} flexWrap=\"wrap\" {...props}>\n      {timestamp\n        ? <Chip label={new Date(timestamp).toLocaleString()} />\n        : null}\n      {baseFee\n        ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} />\n        : null}\n      {blockNumber\n        ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} />\n        : null}\n    </FlexRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { TypographyExProps } from '@xyo-network/react-shared'\nimport { getTokenData } from '@xyo-network/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport { GasPriceHeadingTypography } from './Heading.tsx'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, PropsWithChildren {\n  heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({\n  heading, children, ...props\n}) => {\n  const theme = useTheme()\n  const [ethData] = getTokenData(['eth'])\n  const networkIcon = <img height={theme.spacing(4)} src={ethData.icon} />\n\n  return (\n    <GasPriceHeadingTypography heading={heading} networkIcon={networkIcon} {...props}>\n      {children}\n    </GasPriceHeadingTypography>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { TypographyExProps } from '@xyo-network/react-shared'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport interface GasPriceHeadingTypographyProps extends TypographyExProps {\n  children?: ReactNode\n  heading?: string\n  networkIcon?: ReactNode\n}\n\nexport const GasPriceHeadingTypography: React.FC<GasPriceHeadingTypographyProps> = ({\n  children, heading, networkIcon, ...props\n}) => {\n  const theme = useTheme()\n  return (\n    <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n      {heading}\n      {' '}\n      {networkIcon}\n      {' '}\n      {children}\n    </TypographyEx>\n  )\n}\n","import { styled } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nexport const StyledGasPriceHeaderBox = styled(FlexRow, { name: 'StyledGasPriceEstimateBox' })(({ theme }) => ({\n  alignItems: 'end',\n  columnGap: theme.spacing(2),\n  flexWrap: 'wrap',\n  justifyContent: 'space-between',\n  justifyItems: 'space-between',\n  rowGap: theme.spacing(2),\n  width: '100%',\n}))\n","import { CardHeader, styled } from '@mui/material'\n\nexport const StyledCardHeader = styled(CardHeader, { name: 'StyledCardHeader' })(({ theme }) => ({\n  flexWrap: 'wrap',\n  rowGap: theme.spacing(2),\n}))\n","import type { CardProps } from '@mui/material'\nimport {\n  Card, Paper, useTheme,\n} from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { CardContentEx } from '@xyo-network/react-card'\nimport React from 'react'\n\nimport {\n  GasPriceBox, PriorityFeeBox, SpeedBox,\n} from './components/index.ts'\n\nexport interface GasFeeCardProps extends CardProps {\n  gasPrice?: number\n  priorityFee?: number\n  priorityFeeLabel?: string\n  speed?: string\n  speedPaperElevation?: number\n}\n\nexport const GasFeeCard: React.FC<GasFeeCardProps> = ({\n  gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = 'low', ...props\n}) => {\n  const theme = useTheme()\n\n  return (\n    <Card sx={{ p: 0 }} {...props}>\n      <CardContentEx\n        removePadding\n        sx={{\n          flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2,\n        }}\n      >\n        <FlexGrowCol bgcolor={theme.palette.secondary.dark} alignItems=\"start\" p={2} rowGap={1.5} color={theme.palette.common.white}>\n          <GasPriceBox gasPrice={gasPrice} />\n          {priorityFee\n            ? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} />\n            : null}\n        </FlexGrowCol>\n        <Paper elevation={speedPaperElevation} sx={{ borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}>\n          <SpeedBox speed={speed} />\n        </Paper>\n      </CardContentEx>\n    </Card>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { GweiLabelTypography } from './GweiLabelTypography.tsx'\n\nexport interface GasPriceBoxProps extends FlexBoxProps {\n  gasPrice?: number\n}\n\nexport const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {\n  const theme = useTheme()\n  return (\n    <FlexRow columnGap={1.5} rowGap={1.5} alignItems=\"end\" {...props}>\n      <TypographyEx lineHeight={1} fontWeight=\"200\" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>\n        {gasPrice?.toFixed(2)}\n      </TypographyEx>\n      <GweiLabelTypography fontSize={theme.spacing(2)} />\n    </FlexRow>\n  )\n}\n","import type { TypographyExProps } from '@xyo-network/react-shared'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = props => (\n  <TypographyEx variant=\"caption\" {...props}>\n    GWEI\n  </TypographyEx>\n)\n","import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { GweiLabelTypography } from './GweiLabelTypography.tsx'\n\nexport interface PriorityFeeBoxProps extends FlexBoxProps {\n  priorityFee?: number\n  priorityFeeLabel?: string\n}\n\nexport const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({\n  priorityFee, priorityFeeLabel = 'Priority Fee', ...props\n}) => {\n  const theme = useTheme()\n\n  return (\n    <FlexGrowRow width=\"100%\" justifyContent=\"space-between\" alignItems=\"end\" {...props}>\n      <FlexCol alignItems=\"start\">\n        <TypographyEx>{priorityFeeLabel}</TypographyEx>\n        <TypographyEx title={priorityFee?.toString() ?? ''}>\n          {priorityFee?.toFixed(2)}\n          {' '}\n          <GweiLabelTypography fontSize={theme.spacing(1)} />\n        </TypographyEx>\n      </FlexCol>\n      <LocalGasStationRoundedIcon />\n    </FlexGrowRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport interface SpeedBoxProps extends FlexBoxProps {\n  speed?: string\n}\n\nexport const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {\n  const theme = useTheme()\n\n  return speed\n    ? (\n        <FlexGrowCol {...props}>\n          <TypographyEx fontSize={theme.spacing(3)} fontWeight=\"200\" p={1}>\n            {speed}\n          </TypographyEx>\n        </FlexGrowCol>\n      )\n    : null\n}\n","import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport type { GasPriceWitnessUIBasePayload } from '../types/index.ts'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from './HeaderComponents/index.ts'\nimport { StyledGasPriceHeaderBox } from './layout/index.ts'\n\nexport interface GasPriceWitnessHeaderBoxProps extends FlexBoxProps {\n  heading?: string\n  parsedPayload?: GasPriceWitnessUIBasePayload\n}\n\nexport const GasPriceWitnessHeaderBox: React.FC<GasPriceWitnessHeaderBoxProps> = ({\n  heading, parsedPayload, ...props\n}) => {\n  return (\n    <StyledGasPriceHeaderBox {...props}>\n      <GasPriceHeaderTypography heading={heading} />\n      <GasPriceHeaderActionsBox\n        timestamp={parsedPayload?.timestamp}\n        baseFee={parsedPayload?.baseFee?.value}\n        baseFeeLabel={parsedPayload?.baseFee?.label}\n        blockNumber={parsedPayload?.blockNumber?.value}\n        blockNumberLabel={parsedPayload?.blockNumber?.label}\n      />\n    </StyledGasPriceHeaderBox>\n  )\n}\n","import {\n  Button, Collapse, Paper,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nexport interface ToggleRawPayloadBoxProps extends FlexBoxProps {\n  gasPricePayload?: object\n}\n\nexport const ToggleRawPayloadBox: React.FC<ToggleRawPayloadBoxProps> = ({ gasPricePayload, ...props }) => {\n  const [collapse, setCollapse] = useState(false)\n  return gasPricePayload\n    ? (\n        <FlexCol rowGap={1} {...props}>\n          <Button\n            color=\"secondary\"\n            sx={{ bgcolor: 'secondary.dark', color: 'white' }}\n            variant=\"contained\"\n            onClick={() => setCollapse(!collapse)}\n          >\n            Raw Payload\n          </Button>\n          <Collapse in={collapse}>\n            <Paper elevation={4} sx={{ p: 2 }}>\n              <pre>{JSON.stringify(gasPricePayload, null, 2)}</pre>\n            </Paper>\n          </Collapse>\n        </FlexCol>\n      )\n    : null\n}\n"],"mappings":"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","names":["LocalGasStationRounded","LocalGasStationRoundedIcon","Avatar","React","EthereumGasPriceAvatar","props","Avatar","LocalGasStationRoundedIcon","React","Chip","FlexRow","React","GasPriceHeaderActionsBox","baseFee","baseFeeLabel","blockNumber","blockNumberLabel","timestamp","props","React","FlexRow","columnGap","rowGap","flexWrap","Chip","label","Date","toLocaleString","toFixed","useTheme","getTokenData","React","useTheme","TypographyEx","React","GasPriceHeadingTypography","children","heading","networkIcon","props","theme","useTheme","React","TypographyEx","fontSize","spacing","lineHeight","GasPriceHeaderTypography","heading","children","props","theme","useTheme","ethData","getTokenData","networkIcon","React","img","height","spacing","src","icon","GasPriceHeadingTypography","styled","FlexRow","StyledGasPriceHeaderBox","name","theme","alignItems","columnGap","spacing","flexWrap","justifyContent","justifyItems","rowGap","width","CardHeader","styled","StyledCardHeader","name","theme","flexWrap","rowGap","spacing","GasPriceWitnessCardHeader","ref","title","parsedPayload","props","React","StyledCardHeader","GasPriceHeaderTypography","heading","action","GasPriceHeaderActionsBox","timestamp","baseFee","value","baseFeeLabel","label","blockNumber","blockNumberLabel","displayName","Card","Paper","useTheme","FlexGrowCol","CardContentEx","React","useTheme","FlexRow","TypographyEx","React","TypographyEx","React","GweiLabelTypography","props","React","TypographyEx","variant","GasPriceBox","gasPrice","props","theme","useTheme","React","FlexRow","columnGap","rowGap","alignItems","TypographyEx","lineHeight","fontWeight","fontSize","spacing","title","toString","toFixed","GweiLabelTypography","LocalGasStationRounded","LocalGasStationRoundedIcon","useTheme","FlexCol","FlexGrowRow","TypographyEx","React","PriorityFeeBox","priorityFee","priorityFeeLabel","props","theme","useTheme","React","FlexGrowRow","width","justifyContent","alignItems","FlexCol","TypographyEx","title","toString","toFixed","GweiLabelTypography","fontSize","spacing","LocalGasStationRoundedIcon","useTheme","FlexGrowCol","TypographyEx","React","SpeedBox","speed","props","theme","useTheme","React","FlexGrowCol","TypographyEx","fontSize","spacing","fontWeight","p","GasFeeCard","gasPrice","speedPaperElevation","priorityFee","priorityFeeLabel","speed","props","theme","useTheme","React","Card","sx","p","CardContentEx","removePadding","flexDirection","flexGrow","rowGap","FlexGrowCol","bgcolor","palette","secondary","dark","alignItems","color","common","white","GasPriceBox","PriorityFeeBox","Paper","elevation","borderRadius","shape","SpeedBox","React","GasPriceWitnessHeaderBox","heading","parsedPayload","props","React","StyledGasPriceHeaderBox","GasPriceHeaderTypography","GasPriceHeaderActionsBox","timestamp","baseFee","value","baseFeeLabel","label","blockNumber","blockNumberLabel","Button","Collapse","Paper","FlexCol","React","useState","ToggleRawPayloadBox","gasPricePayload","props","collapse","setCollapse","useState","React","FlexCol","rowGap","Button","color","sx","bgcolor","variant","onClick","Collapse","in","Paper","elevation","p","pre","JSON","stringify"]}
+{"version":3,"sources":["../../src/components/Avatar/EthereumGasPriceAvatar.tsx","../../src/components/CardHeader/CardHeader.tsx","../../src/components/HeaderComponents/Actions.tsx","../../src/components/HeaderComponents/Header/Header.tsx","../../src/components/HeaderComponents/Header/Heading.tsx","../../src/components/layout/Header.tsx","../../src/components/layout/StyledCardHeader.tsx","../../src/components/GasFees/Card.tsx","../../src/components/GasFees/components/GasPriceBox.tsx","../../src/components/GasFees/components/GweiLabelTypography.tsx","../../src/components/GasFees/components/PriorityFeeBox.tsx","../../src/components/GasFees/components/SpeedBox.tsx","../../src/components/HeaderBox.tsx","../../src/components/RawPayload/ToggleRawPayloadBox.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport type { AvatarProps } from '@mui/material'\nimport { Avatar } from '@mui/material'\nimport React from 'react'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n","import type { CardProps } from '@mui/material'\nimport React from 'react'\n\nimport type { GasPriceWitnessUIBasePayload } from '../../types/index.ts'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents/index.ts'\nimport { StyledCardHeader } from '../layout/index.ts'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n  parsedPayload?: GasPriceWitnessUIBasePayload\n  title?: string\n}\nexport const GasPriceWitnessCardHeader = ({\n  ref, title, parsedPayload, ...props\n}: GasPriceCardHeaderProps) => (\n  <StyledCardHeader\n    title={<GasPriceHeaderTypography heading={title} />}\n    action={(\n      <GasPriceHeaderActionsBox\n        timestamp={parsedPayload?.timestamp}\n        baseFee={parsedPayload?.baseFee?.value}\n        baseFeeLabel={parsedPayload?.baseFee?.label}\n        blockNumber={parsedPayload?.blockNumber?.value}\n        blockNumberLabel={parsedPayload?.blockNumber?.label}\n      />\n    )}\n    ref={ref}\n    {...props}\n  />\n)\n\nGasPriceWitnessCardHeader.displayName = 'GasPriceWitnessCardHeader'\n","import { Chip } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {\n  baseFee?: number\n  baseFeeLabel?: string\n  blockNumber?: number\n  blockNumberLabel?: string\n  timestamp?: number\n}\n\nexport const GasPriceHeaderActionsBox: React.FC<GasPriceEstimateActionsBoxProps> = ({\n  baseFee,\n  baseFeeLabel = 'Base Fee',\n  blockNumber,\n  blockNumberLabel = 'Block Number',\n  timestamp,\n  ...props\n}) => {\n  return (\n    <FlexRow columnGap={1} rowGap={1} flexWrap=\"wrap\" {...props}>\n      {timestamp\n        ? <Chip label={new Date(timestamp).toLocaleString()} />\n        : null}\n      {baseFee\n        ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} />\n        : null}\n      {blockNumber\n        ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} />\n        : null}\n    </FlexRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { TypographyExProps } from '@xyo-network/react-shared'\nimport { getTokenData } from '@xyo-network/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport { GasPriceHeadingTypography } from './Heading.tsx'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, PropsWithChildren {\n  heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({\n  heading, children, ...props\n}) => {\n  const theme = useTheme()\n  const [ethData] = getTokenData(['eth'])\n  const networkIcon = <img height={theme.spacing(4)} src={ethData.icon} />\n\n  return (\n    <GasPriceHeadingTypography heading={heading} networkIcon={networkIcon} {...props}>\n      {children}\n    </GasPriceHeadingTypography>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { TypographyExProps } from '@xyo-network/react-shared'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport interface GasPriceHeadingTypographyProps extends TypographyExProps {\n  children?: ReactNode\n  heading?: string\n  networkIcon?: ReactNode\n}\n\nexport const GasPriceHeadingTypography: React.FC<GasPriceHeadingTypographyProps> = ({\n  children, heading, networkIcon, ...props\n}) => {\n  const theme = useTheme()\n  return (\n    <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n      {heading}\n      {' '}\n      {networkIcon}\n      {' '}\n      {children}\n    </TypographyEx>\n  )\n}\n","import { styled } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nexport const StyledGasPriceHeaderBox = styled(FlexRow, { name: 'StyledGasPriceEstimateBox' })(({ theme }) => ({\n  alignItems: 'end',\n  columnGap: theme.spacing(2),\n  flexWrap: 'wrap',\n  justifyContent: 'space-between',\n  justifyItems: 'space-between',\n  rowGap: theme.spacing(2),\n  width: '100%',\n}))\n","import { CardHeader, styled } from '@mui/material'\n\nexport const StyledCardHeader = styled(CardHeader, { name: 'StyledCardHeader' })(({ theme }) => ({\n  flexWrap: 'wrap',\n  rowGap: theme.spacing(2),\n}))\n","import type { CardProps } from '@mui/material'\nimport {\n  Card, Paper, useTheme,\n} from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { CardContentEx } from '@xyo-network/react-card'\nimport React from 'react'\n\nimport {\n  GasPriceBox, PriorityFeeBox, SpeedBox,\n} from './components/index.ts'\n\nexport interface GasFeeCardProps extends CardProps {\n  gasPrice?: number\n  priorityFee?: number\n  priorityFeeLabel?: string\n  speed?: string\n  speedPaperElevation?: number\n}\n\nexport const GasFeeCard: React.FC<GasFeeCardProps> = ({\n  gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = 'low', ...props\n}) => {\n  const theme = useTheme()\n\n  return (\n    <Card sx={{ p: 0 }} {...props}>\n      <CardContentEx\n        removePadding\n        sx={{\n          flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2,\n        }}\n      >\n        <FlexGrowCol bgcolor={theme.vars.palette.secondary.dark} alignItems=\"start\" p={2} rowGap={1.5} color={theme.vars.palette.common.white}>\n          <GasPriceBox gasPrice={gasPrice} />\n          {priorityFee\n            ? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} />\n            : null}\n        </FlexGrowCol>\n        <Paper elevation={speedPaperElevation} sx={{ borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}>\n          <SpeedBox speed={speed} />\n        </Paper>\n      </CardContentEx>\n    </Card>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { GweiLabelTypography } from './GweiLabelTypography.tsx'\n\nexport interface GasPriceBoxProps extends FlexBoxProps {\n  gasPrice?: number\n}\n\nexport const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {\n  const theme = useTheme()\n  return (\n    <FlexRow columnGap={1.5} rowGap={1.5} alignItems=\"end\" {...props}>\n      <TypographyEx lineHeight={1} fontWeight=\"200\" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>\n        {gasPrice?.toFixed(2)}\n      </TypographyEx>\n      <GweiLabelTypography fontSize={theme.spacing(2)} />\n    </FlexRow>\n  )\n}\n","import type { TypographyExProps } from '@xyo-network/react-shared'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = props => (\n  <TypographyEx variant=\"caption\" {...props}>\n    GWEI\n  </TypographyEx>\n)\n","import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { GweiLabelTypography } from './GweiLabelTypography.tsx'\n\nexport interface PriorityFeeBoxProps extends FlexBoxProps {\n  priorityFee?: number\n  priorityFeeLabel?: string\n}\n\nexport const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({\n  priorityFee, priorityFeeLabel = 'Priority Fee', ...props\n}) => {\n  const theme = useTheme()\n\n  return (\n    <FlexGrowRow width=\"100%\" justifyContent=\"space-between\" alignItems=\"end\" {...props}>\n      <FlexCol alignItems=\"start\">\n        <TypographyEx>{priorityFeeLabel}</TypographyEx>\n        <TypographyEx title={priorityFee?.toString() ?? ''}>\n          {priorityFee?.toFixed(2)}\n          {' '}\n          <GweiLabelTypography fontSize={theme.spacing(1)} />\n        </TypographyEx>\n      </FlexCol>\n      <LocalGasStationRoundedIcon />\n    </FlexGrowRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport interface SpeedBoxProps extends FlexBoxProps {\n  speed?: string\n}\n\nexport const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {\n  const theme = useTheme()\n\n  return speed\n    ? (\n        <FlexGrowCol {...props}>\n          <TypographyEx fontSize={theme.spacing(3)} fontWeight=\"200\" p={1}>\n            {speed}\n          </TypographyEx>\n        </FlexGrowCol>\n      )\n    : null\n}\n","import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport type { GasPriceWitnessUIBasePayload } from '../types/index.ts'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from './HeaderComponents/index.ts'\nimport { StyledGasPriceHeaderBox } from './layout/index.ts'\n\nexport interface GasPriceWitnessHeaderBoxProps extends FlexBoxProps {\n  heading?: string\n  parsedPayload?: GasPriceWitnessUIBasePayload\n}\n\nexport const GasPriceWitnessHeaderBox: React.FC<GasPriceWitnessHeaderBoxProps> = ({\n  heading, parsedPayload, ...props\n}) => {\n  return (\n    <StyledGasPriceHeaderBox {...props}>\n      <GasPriceHeaderTypography heading={heading} />\n      <GasPriceHeaderActionsBox\n        timestamp={parsedPayload?.timestamp}\n        baseFee={parsedPayload?.baseFee?.value}\n        baseFeeLabel={parsedPayload?.baseFee?.label}\n        blockNumber={parsedPayload?.blockNumber?.value}\n        blockNumberLabel={parsedPayload?.blockNumber?.label}\n      />\n    </StyledGasPriceHeaderBox>\n  )\n}\n","import {\n  Button, Collapse, Paper,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nexport interface ToggleRawPayloadBoxProps extends FlexBoxProps {\n  gasPricePayload?: object\n}\n\nexport const ToggleRawPayloadBox: React.FC<ToggleRawPayloadBoxProps> = ({ gasPricePayload, ...props }) => {\n  const [collapse, setCollapse] = useState(false)\n  return gasPricePayload\n    ? (\n        <FlexCol rowGap={1} {...props}>\n          <Button\n            color=\"secondary\"\n            sx={{ bgcolor: 'secondary.dark', color: 'white' }}\n            variant=\"contained\"\n            onClick={() => setCollapse(!collapse)}\n          >\n            Raw Payload\n          </Button>\n          <Collapse in={collapse}>\n            <Paper elevation={4} sx={{ p: 2 }}>\n              <pre>{JSON.stringify(gasPricePayload, null, 2)}</pre>\n            </Paper>\n          </Collapse>\n        </FlexCol>\n      )\n    : null\n}\n"],"mappings":";;;;AAAA,SAASA,0BAA0BC,kCAAkC;AAErE,SAASC,cAAc;AACvB,OAAOC,WAAW;AAEX,IAAMC,yBAAgD,wBAAC,EAAE,GAAGC,MAAAA,MAAO;AACxE,SACE,sBAAA,cAACC,QAAWD,OACV,sBAAA,cAACE,4BAAAA,IAAAA,CAAAA;AAGP,GAN6D;;;ACJ7D,OAAOC,YAAW;;;ACDlB,SAASC,YAAY;AAErB,SAASC,eAAe;AACxB,OAAOC,YAAW;AAUX,IAAMC,2BAAsE,wBAAC,EAClFC,SACAC,eAAe,YACfC,aACAC,mBAAmB,gBACnBC,WACA,GAAGC,MAAAA,MACJ;AACC,SACE,gBAAAC,OAAA,cAACC,SAAAA;IAAQC,WAAW;IAAGC,QAAQ;IAAGC,UAAS;IAAQ,GAAGL;KACnDD,YACG,gBAAAE,OAAA,cAACK,MAAAA;IAAKC,OAAO,IAAIC,KAAKT,SAAAA,EAAWU,eAAc;OAC/C,MACHd,UACG,gBAAAM,OAAA,cAACK,MAAAA;IAAKC,OAAO,GAAGX,YAAAA,MAAkBD,QAAQe,QAAQ,CAAA,CAAA;OAClD,MACHb,cACG,gBAAAI,OAAA,cAACK,MAAAA;IAAKC,OAAO,GAAGT,gBAAAA,MAAsBD,WAAAA;OACtC,IAAA;AAGV,GArBmF;;;ACbnF,SAASc,YAAAA,iBAAgB;AAEzB,SAASC,oBAAoB;AAE7B,OAAOC,YAAW;;;ACJlB,SAASC,gBAAgB;AAEzB,SAASC,oBAAoB;AAE7B,OAAOC,YAAW;AAQX,IAAMC,4BAAsE,wBAAC,EAClFC,UAAUC,SAASC,aAAa,GAAGC,MAAAA,MACpC;AACC,QAAMC,QAAQC,SAAAA;AACd,SACE,gBAAAC,OAAA,cAACC,cAAAA;IAAaC,UAAUJ,MAAMK,QAAQ,CAAA;IAAIC,YAAY;IAAI,GAAGP;KAC1DF,SACA,KACAC,aACA,KACAF,QAAAA;AAGP,GAbmF;;;ADA5E,IAAMW,2BAAoE,wBAAC,EAChFC,SAASC,UAAU,GAAGC,MAAAA,MACvB;AACC,QAAMC,QAAQC,UAAAA;AACd,QAAM,CAACC,OAAAA,IAAWC,aAAa;IAAC;GAAM;AACtC,QAAMC,cAAc,gBAAAC,OAAA,cAACC,OAAAA;IAAIC,QAAQP,MAAMQ,QAAQ,CAAA;IAAIC,KAAKP,QAAQQ;;AAEhE,SACE,gBAAAL,OAAA,cAACM,2BAAAA;IAA0Bd;IAAkBO;IAA2B,GAAGL;KACxED,QAAAA;AAGP,GAZiF;;;AEZjF,SAASc,cAAc;AACvB,SAASC,WAAAA,gBAAe;AAEjB,IAAMC,0BAA0BF,OAAOC,UAAS;EAAEE,MAAM;AAA4B,CAAA,EAAG,CAAC,EAAEC,MAAK,OAAQ;EAC5GC,YAAY;EACZC,WAAWF,MAAMG,QAAQ,CAAA;EACzBC,UAAU;EACVC,gBAAgB;EAChBC,cAAc;EACdC,QAAQP,MAAMG,QAAQ,CAAA;EACtBK,OAAO;AACT,EAAA;;;ACXA,SAASC,YAAYC,UAAAA,eAAc;AAE5B,IAAMC,mBAAmBD,QAAOD,YAAY;EAAEG,MAAM;AAAmB,CAAA,EAAG,CAAC,EAAEC,MAAK,OAAQ;EAC/FC,UAAU;EACVC,QAAQF,MAAMG,QAAQ,CAAA;AACxB,EAAA;;;ALMO,IAAMC,4BAA4B,wBAAC,EACxCC,KAAKC,OAAOC,eAAe,GAAGC,MAAAA,MAE9B,gBAAAC,OAAA,cAACC,kBAAAA;EACCJ,OAAO,gBAAAG,OAAA,cAACE,0BAAAA;IAAyBC,SAASN;;EAC1CO,QACE,gBAAAJ,OAAA,cAACK,0BAAAA;IACCC,WAAWR,eAAeQ;IAC1BC,SAAST,eAAeS,SAASC;IACjCC,cAAcX,eAAeS,SAASG;IACtCC,aAAab,eAAea,aAAaH;IACzCI,kBAAkBd,eAAea,aAAaD;;EAGlDd;EACC,GAAGG;IAfiC;AAmBzCJ,0BAA0BkB,cAAc;;;AM7BxC,SACEC,MAAMC,OAAOC,YAAAA,iBACR;AACP,SAASC,eAAAA,oBAAmB;AAC5B,SAASC,qBAAqB;AAC9B,OAAOC,aAAW;;;ACNlB,SAASC,YAAAA,iBAAgB;AAEzB,SAASC,WAAAA,gBAAe;AACxB,SAASC,gBAAAA,qBAAoB;AAC7B,OAAOC,YAAW;;;ACHlB,SAASC,gBAAAA,qBAAoB;AAC7B,OAAOC,YAAW;AAEX,IAAMC,sBAAmDC,wBAAAA,UAC9D,gBAAAC,OAAA,cAACC,eAAAA;EAAaC,SAAQ;EAAW,GAAGH;GAAO,MAAA,GADmBA;;;ADQzD,IAAMI,cAA0C,wBAAC,EAAEC,UAAU,GAAGC,MAAAA,MAAO;AAC5E,QAAMC,QAAQC,UAAAA;AACd,SACE,gBAAAC,OAAA,cAACC,UAAAA;IAAQC,WAAW;IAAKC,QAAQ;IAAKC,YAAW;IAAO,GAAGP;KACzD,gBAAAG,OAAA,cAACK,eAAAA;IAAaC,YAAY;IAAGC,YAAW;IAAMC,UAAUV,MAAMW,QAAQ,CAAA;IAAIC,OAAOd,UAAUe,SAAAA,KAAc;KACtGf,UAAUgB,QAAQ,CAAA,CAAA,GAErB,gBAAAZ,OAAA,cAACa,qBAAAA;IAAoBL,UAAUV,MAAMW,QAAQ,CAAA;;AAGnD,GAVuD;;;AEZvD,SAASK,0BAA0BC,mCAAkC;AACrE,SAASC,YAAAA,iBAAgB;AAEzB,SAASC,SAASC,mBAAmB;AACrC,SAASC,gBAAAA,qBAAoB;AAC7B,OAAOC,YAAW;AASX,IAAMC,iBAAgD,wBAAC,EAC5DC,aAAaC,mBAAmB,gBAAgB,GAAGC,MAAAA,MACpD;AACC,QAAMC,QAAQC,UAAAA;AAEd,SACE,gBAAAC,OAAA,cAACC,aAAAA;IAAYC,OAAM;IAAOC,gBAAe;IAAgBC,YAAW;IAAO,GAAGP;KAC5E,gBAAAG,OAAA,cAACK,SAAAA;IAAQD,YAAW;KAClB,gBAAAJ,OAAA,cAACM,eAAAA,MAAcV,gBAAAA,GACf,gBAAAI,OAAA,cAACM,eAAAA;IAAaC,OAAOZ,aAAaa,SAAAA,KAAc;KAC7Cb,aAAac,QAAQ,CAAA,GACrB,KACD,gBAAAT,OAAA,cAACU,qBAAAA;IAAoBC,UAAUb,MAAMc,QAAQ,CAAA;QAGjD,gBAAAZ,OAAA,cAACa,6BAAAA,IAAAA,CAAAA;AAGP,GAlB6D;;;ACd7D,SAASC,YAAAA,iBAAgB;AAEzB,SAASC,mBAAmB;AAC5B,SAASC,gBAAAA,qBAAoB;AAC7B,OAAOC,YAAW;AAMX,IAAMC,WAAoC,wBAAC,EAAEC,OAAO,GAAGC,MAAAA,MAAO;AACnE,QAAMC,QAAQC,UAAAA;AAEd,SAAOH,QAED,gBAAAI,OAAA,cAACC,aAAgBJ,OACf,gBAAAG,OAAA,cAACE,eAAAA;IAAaC,UAAUL,MAAMM,QAAQ,CAAA;IAAIC,YAAW;IAAMC,GAAG;KAC3DV,KAAAA,CAAAA,IAIP;AACN,GAZiD;;;AJU1C,IAAMW,aAAwC,wBAAC,EACpDC,UAAUC,qBAAqBC,aAAaC,kBAAkBC,QAAQ,OAAO,GAAGC,MAAAA,MACjF;AACC,QAAMC,QAAQC,UAAAA;AAEd,SACE,gBAAAC,QAAA,cAACC,MAAAA;IAAKC,IAAI;MAAEC,GAAG;IAAE;IAAI,GAAGN;KACtB,gBAAAG,QAAA,cAACI,eAAAA;IACCC,eAAAA;IACAH,IAAI;MACFI,eAAe;MAAUC,UAAU;MAAGJ,GAAG;MAAGK,QAAQ;IACtD;KAEA,gBAAAR,QAAA,cAACS,cAAAA;IAAYC,SAASZ,MAAMa,KAAKC,QAAQC,UAAUC;IAAMC,YAAW;IAAQZ,GAAG;IAAGK,QAAQ;IAAKQ,OAAOlB,MAAMa,KAAKC,QAAQK,OAAOC;KAC9H,gBAAAlB,QAAA,cAACmB,aAAAA;IAAY3B;MACZE,cACG,gBAAAM,QAAA,cAACoB,gBAAAA;IAAe1B;IAA0BC;OAC1C,IAAA,GAEN,gBAAAK,QAAA,cAACqB,OAAAA;IAAMC,WAAW7B;IAAqBS,IAAI;MAAEqB,cAAc,OAAOzB,MAAM0B,MAAMD,YAAY,MAAMzB,MAAM0B,MAAMD,YAAY;IAAK;KAC3H,gBAAAvB,QAAA,cAACyB,UAAAA;IAAS7B;;AAKpB,GAzBqD;;;AKnBrD,OAAO8B,aAAW;AAWX,IAAMC,2BAAoE,wBAAC,EAChFC,SAASC,eAAe,GAAGC,MAAAA,MAC5B;AACC,SACE,gBAAAC,QAAA,cAACC,yBAA4BF,OAC3B,gBAAAC,QAAA,cAACE,0BAAAA;IAAyBL;MAC1B,gBAAAG,QAAA,cAACG,0BAAAA;IACCC,WAAWN,eAAeM;IAC1BC,SAASP,eAAeO,SAASC;IACjCC,cAAcT,eAAeO,SAASG;IACtCC,aAAaX,eAAeW,aAAaH;IACzCI,kBAAkBZ,eAAeW,aAAaD;;AAItD,GAfiF;;;ACZjF,SACEG,QAAQC,UAAUC,SAAAA,cACb;AAEP,SAASC,WAAAA,gBAAe;AACxB,OAAOC,WAASC,gBAAgB;AAMzB,IAAMC,sBAA0D,wBAAC,EAAEC,iBAAiB,GAAGC,MAAAA,MAAO;AACnG,QAAM,CAACC,UAAUC,WAAAA,IAAeC,SAAS,KAAA;AACzC,SAAOJ,kBAED,gBAAAK,QAAA,cAACC,UAAAA;IAAQC,QAAQ;IAAI,GAAGN;KACtB,gBAAAI,QAAA,cAACG,QAAAA;IACCC,OAAM;IACNC,IAAI;MAAEC,SAAS;MAAkBF,OAAO;IAAQ;IAChDG,SAAQ;IACRC,SAAS,6BAAMV,YAAY,CAACD,QAAAA,GAAnB;KACV,aAAA,GAGD,gBAAAG,QAAA,cAACS,UAAAA;IAASC,IAAIb;KACZ,gBAAAG,QAAA,cAACW,QAAAA;IAAMC,WAAW;IAAGP,IAAI;MAAEQ,GAAG;IAAE;KAC9B,gBAAAb,QAAA,cAACc,OAAAA,MAAKC,KAAKC,UAAUrB,iBAAiB,MAAM,CAAA,CAAA,CAAA,CAAA,CAAA,IAKpD;AACN,GArBuE;","names":["LocalGasStationRounded","LocalGasStationRoundedIcon","Avatar","React","EthereumGasPriceAvatar","props","Avatar","LocalGasStationRoundedIcon","React","Chip","FlexRow","React","GasPriceHeaderActionsBox","baseFee","baseFeeLabel","blockNumber","blockNumberLabel","timestamp","props","React","FlexRow","columnGap","rowGap","flexWrap","Chip","label","Date","toLocaleString","toFixed","useTheme","getTokenData","React","useTheme","TypographyEx","React","GasPriceHeadingTypography","children","heading","networkIcon","props","theme","useTheme","React","TypographyEx","fontSize","spacing","lineHeight","GasPriceHeaderTypography","heading","children","props","theme","useTheme","ethData","getTokenData","networkIcon","React","img","height","spacing","src","icon","GasPriceHeadingTypography","styled","FlexRow","StyledGasPriceHeaderBox","name","theme","alignItems","columnGap","spacing","flexWrap","justifyContent","justifyItems","rowGap","width","CardHeader","styled","StyledCardHeader","name","theme","flexWrap","rowGap","spacing","GasPriceWitnessCardHeader","ref","title","parsedPayload","props","React","StyledCardHeader","GasPriceHeaderTypography","heading","action","GasPriceHeaderActionsBox","timestamp","baseFee","value","baseFeeLabel","label","blockNumber","blockNumberLabel","displayName","Card","Paper","useTheme","FlexGrowCol","CardContentEx","React","useTheme","FlexRow","TypographyEx","React","TypographyEx","React","GweiLabelTypography","props","React","TypographyEx","variant","GasPriceBox","gasPrice","props","theme","useTheme","React","FlexRow","columnGap","rowGap","alignItems","TypographyEx","lineHeight","fontWeight","fontSize","spacing","title","toString","toFixed","GweiLabelTypography","LocalGasStationRounded","LocalGasStationRoundedIcon","useTheme","FlexCol","FlexGrowRow","TypographyEx","React","PriorityFeeBox","priorityFee","priorityFeeLabel","props","theme","useTheme","React","FlexGrowRow","width","justifyContent","alignItems","FlexCol","TypographyEx","title","toString","toFixed","GweiLabelTypography","fontSize","spacing","LocalGasStationRoundedIcon","useTheme","FlexGrowCol","TypographyEx","React","SpeedBox","speed","props","theme","useTheme","React","FlexGrowCol","TypographyEx","fontSize","spacing","fontWeight","p","GasFeeCard","gasPrice","speedPaperElevation","priorityFee","priorityFeeLabel","speed","props","theme","useTheme","React","Card","sx","p","CardContentEx","removePadding","flexDirection","flexGrow","rowGap","FlexGrowCol","bgcolor","vars","palette","secondary","dark","alignItems","color","common","white","GasPriceBox","PriorityFeeBox","Paper","elevation","borderRadius","shape","SpeedBox","React","GasPriceWitnessHeaderBox","heading","parsedPayload","props","React","StyledGasPriceHeaderBox","GasPriceHeaderTypography","GasPriceHeaderActionsBox","timestamp","baseFee","value","baseFeeLabel","label","blockNumber","blockNumberLabel","Button","Collapse","Paper","FlexCol","React","useState","ToggleRawPayloadBox","gasPricePayload","props","collapse","setCollapse","useState","React","FlexCol","rowGap","Button","color","sx","bgcolor","variant","onClick","Collapse","in","Paper","elevation","p","pre","JSON","stringify"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-gas-price",
-  "version": "5.2.1",
+  "version": "5.2.3",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -39,17 +39,17 @@
   "module": "dist/browser/index.mjs",
   "types": "dist/types/index.d.ts",
   "dependencies": {
-    "@xylabs/react-flexbox": "^6.2.1",
-    "@xyo-network/react-card": "^5.2.1",
-    "@xyo-network/react-shared": "^5.2.1"
+    "@xylabs/react-flexbox": "^6.2.8",
+    "@xyo-network/react-card": "^5.2.3",
+    "@xyo-network/react-shared": "^5.2.3"
   },
   "devDependencies": {
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@storybook/react": "^8.6.12",
     "@types/react": "^19.1.2",
-    "@xylabs/ts-scripts-yarn3": "^6.2.1",
-    "@xylabs/tsconfig-react": "^6.2.1",
+    "@xylabs/ts-scripts-yarn3": "^6.3.5",
+    "@xylabs/tsconfig-react": "^6.3.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^8.6.12",

package/src/components/GasFees/Card.tsx

@@ -31,7 +31,7 @@ export const GasFeeCard: React.FC<GasFeeCardProps> = ({
           flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2,
         }}
       >
-        <FlexGrowCol bgcolor={theme.palette.secondary.dark} alignItems="start" p={2} rowGap={1.5} color={theme.palette.common.white}>
+        <FlexGrowCol bgcolor={theme.vars.palette.secondary.dark} alignItems="start" p={2} rowGap={1.5} color={theme.vars.palette.common.white}>
           <GasPriceBox gasPrice={gasPrice} />
           {priorityFee
             ? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} />

package/src/global.d.ts

@@ -0,0 +1 @@
+import type {} from '@mui/material/themeCssVarsAugmentation'