@xyo-network/react-gas-price 2.64.0-rc.7 → 2.64.0

package/dist/node/components/Avatar/{EthereumGasPriceAvatar.stories.js → EthereumGasPriceAvatar.cjs}

@@ -16,23 +16,21 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var EthereumGasPriceAvatar_stories_exports = {};
-__export(EthereumGasPriceAvatar_stories_exports, {
-  Default: () => Default,
-  default: () => EthereumGasPriceAvatar_stories_default
+
+// src/components/Avatar/EthereumGasPriceAvatar.tsx
+var EthereumGasPriceAvatar_exports = {};
+__export(EthereumGasPriceAvatar_exports, {
+  EthereumGasPriceAvatar: () => EthereumGasPriceAvatar
 });
-module.exports = __toCommonJS(EthereumGasPriceAvatar_stories_exports);
+module.exports = __toCommonJS(EthereumGasPriceAvatar_exports);
+var import_icons_material = require("@mui/icons-material");
+var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_EthereumGasPriceAvatar = require("./EthereumGasPriceAvatar");
-var EthereumGasPriceAvatar_stories_default = {
-  component: import_EthereumGasPriceAvatar.EthereumGasPriceAvatar,
-  title: "plugin/blockchain/EthereumGasPrice/Avatar"
+var EthereumGasPriceAvatar = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.LocalGasStationRounded, {}) });
 };
-const Template = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EthereumGasPriceAvatar.EthereumGasPriceAvatar, { ...props });
-const Default = Template.bind({});
-Default.args = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Default
+  EthereumGasPriceAvatar
 });
-//# sourceMappingURL=EthereumGasPriceAvatar.stories.js.map
+//# sourceMappingURL=EthereumGasPriceAvatar.cjs.map

package/dist/node/components/Avatar/EthereumGasPriceAvatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAqE;AACrE,sBAAoC;AAK9B;AAHC,IAAM,yBAAgD,CAAC,EAAE,GAAG,MAAM,MAAM;AAC7E,SACE,4CAAC,0BAAQ,GAAG,OACV,sDAAC,sBAAAA,wBAAA,EAA2B,GAC9B;AAEJ;","names":["LocalGasStationRoundedIcon"]}

package/dist/node/components/Avatar/EthereumGasPriceAvatar.d.cts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AvatarProps } from '@mui/material';
+export declare const EthereumGasPriceAvatar: React.FC<AvatarProps>;
+//# sourceMappingURL=EthereumGasPriceAvatar.d.ts.map

package/dist/node/components/Avatar/EthereumGasPriceAvatar.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EthereumGasPriceAvatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAA;AAEnD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAMxD,CAAA"}

package/dist/node/components/Avatar/EthereumGasPriceAvatar.js

@@ -1,34 +1,11 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+// src/components/Avatar/EthereumGasPriceAvatar.tsx
+import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
+import { Avatar } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var EthereumGasPriceAvatar = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(Avatar, { ...props, children: /* @__PURE__ */ jsx(LocalGasStationRoundedIcon, {}) });
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var EthereumGasPriceAvatar_exports = {};
-__export(EthereumGasPriceAvatar_exports, {
-  EthereumGasPriceAvatar: () => EthereumGasPriceAvatar
-});
-module.exports = __toCommonJS(EthereumGasPriceAvatar_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_icons_material = require("@mui/icons-material");
-var import_material = require("@mui/material");
-const EthereumGasPriceAvatar = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.LocalGasStationRounded, {}) });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   EthereumGasPriceAvatar
-});
+};
 //# sourceMappingURL=EthereumGasPriceAvatar.js.map

package/dist/node/components/Avatar/EthereumGasPriceAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,4BAAqE;AACrE,sBAAoC;AAE7B,MAAM,yBAAgD,CAAC,EAAE,GAAG,MAAM,MAAM;AAC7E,SACE,4CAAC,0BAAQ,GAAG,OACV,sDAAC,sBAAAA,wBAAA,EAA2B,GAC9B;AAEJ;","names":["LocalGasStationRoundedIcon"]}
+{"version":3,"sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n"],"mappings":";AAAA,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,cAA2B;AAK9B;AAHC,IAAM,yBAAgD,CAAC,EAAE,GAAG,MAAM,MAAM;AAC7E,SACE,oBAAC,UAAQ,GAAG,OACV,8BAAC,8BAA2B,GAC9B;AAEJ;","names":[]}

package/dist/node/components/{HeaderComponents/Actions.stories.js → Avatar/index.cjs}

@@ -16,33 +16,23 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Actions_stories_exports = {};
-__export(Actions_stories_exports, {
-  Default: () => Default,
-  WithData: () => WithData,
-  default: () => Actions_stories_default
+
+// src/components/Avatar/index.ts
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  EthereumGasPriceAvatar: () => EthereumGasPriceAvatar
 });
-module.exports = __toCommonJS(Actions_stories_exports);
+module.exports = __toCommonJS(Avatar_exports);
+
+// src/components/Avatar/EthereumGasPriceAvatar.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_Actions = require("./Actions");
-var Actions_stories_default = {
-  component: import_Actions.GasPriceHeaderActionsBox,
-  title: "plugin/blockchain/GasPrice/GasPriceHeaderActionsBox"
-};
-const Template = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Actions.GasPriceHeaderActionsBox, { ...props });
-const Default = Template.bind({});
-Default.args = {};
-const WithData = Template.bind({});
-WithData.args = {
-  baseFee: 12,
-  baseFeeLabel: "Custom BaseFee Label",
-  blockNumber: 123465,
-  blockNumberLabel: "Custom BlockNumber Label",
-  timestamp: 1670530947
+var EthereumGasPriceAvatar = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.LocalGasStationRounded, {}) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Default,
-  WithData
+  EthereumGasPriceAvatar
 });
-//# sourceMappingURL=Actions.stories.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/node/components/Avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Avatar/index.ts","../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["export * from './EthereumGasPriceAvatar'\n","import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,4BAAqE;AACrE,sBAAoC;AAK9B;AAHC,IAAM,yBAAgD,CAAC,EAAE,GAAG,MAAM,MAAM;AAC7E,SACE,4CAAC,0BAAQ,GAAG,OACV,sDAAC,sBAAAA,wBAAA,EAA2B,GAC9B;AAEJ;","names":["LocalGasStationRoundedIcon"]}

package/dist/node/components/Avatar/index.d.cts

@@ -0,0 +1,2 @@
+export * from './EthereumGasPriceAvatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/Avatar/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}

package/dist/node/components/Avatar/index.js

@@ -1,23 +1,11 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+// src/components/Avatar/EthereumGasPriceAvatar.tsx
+import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
+import { Avatar } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var EthereumGasPriceAvatar = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(Avatar, { ...props, children: /* @__PURE__ */ jsx(LocalGasStationRoundedIcon, {}) });
+};
+export {
+  EthereumGasPriceAvatar
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Avatar_exports = {};
-module.exports = __toCommonJS(Avatar_exports);
-__reExport(Avatar_exports, require("./EthereumGasPriceAvatar"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("./EthereumGasPriceAvatar")
-});
 //# sourceMappingURL=index.js.map

package/dist/node/components/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/index.ts"],"sourcesContent":["export * from './EthereumGasPriceAvatar'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,qCAAd;","names":[]}
+{"version":3,"sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n"],"mappings":";AAAA,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,cAA2B;AAK9B;AAHC,IAAM,yBAAgD,CAAC,EAAE,GAAG,MAAM,MAAM;AAC7E,SACE,oBAAC,UAAQ,GAAG,OACV,8BAAC,8BAA2B,GAC9B;AAEJ;","names":[]}

package/dist/node/components/CardHeader/CardHeader.cjs

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/CardHeader/CardHeader.tsx
+var CardHeader_exports = {};
+__export(CardHeader_exports, {
+  GasPriceWitnessCardHeader: () => GasPriceWitnessCardHeader
+});
+module.exports = __toCommonJS(CardHeader_exports);
+var import_react = require("react");
+
+// src/components/HeaderComponents/Actions.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var GasPriceHeaderActionsBox = ({
+  baseFee,
+  baseFeeLabel = "Base Fee",
+  blockNumber,
+  blockNumberLabel = "Block Number",
+  timestamp,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { columnGap: 1, rowGap: 1, flexWrap: "wrap", ...props, children: [
+    timestamp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: new Date(timestamp).toLocaleString() }) : null,
+    baseFee ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: `${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI` }) : null,
+    blockNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: `${blockNumberLabel} - ${blockNumber}` }) : null
+  ] });
+};
+
+// src/components/HeaderComponents/Header/Header.tsx
+var import_material3 = require("@mui/material");
+var import_react_shared2 = require("@xyo-network/react-shared");
+
+// src/components/HeaderComponents/Header/Heading.tsx
+var import_material2 = require("@mui/material");
+var import_react_shared = require("@xyo-network/react-shared");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var GasPriceHeadingTypography = ({ children, heading, networkIcon, ...props }) => {
+  const theme = (0, import_material2.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_shared.TypographyEx, { fontSize: theme.spacing(6), lineHeight: 1, ...props, children: [
+    heading,
+    " ",
+    networkIcon,
+    " ",
+    children
+  ] });
+};
+
+// src/components/HeaderComponents/Header/Header.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var GasPriceHeaderTypography = ({ heading, children, ...props }) => {
+  const theme = (0, import_material3.useTheme)();
+  const [ethData] = (0, import_react_shared2.useGetTokenData)(["eth"]);
+  const networkIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { height: theme.spacing(4), src: ethData.icon });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GasPriceHeadingTypography, { heading, networkIcon, ...props, children });
+};
+
+// src/components/layout/StyledCardHeader.tsx
+var import_material4 = require("@mui/material");
+var StyledCardHeader = (0, import_material4.styled)(import_material4.CardHeader, { name: "StyledCardHeader" })(({ theme }) => ({
+  flexWrap: "wrap",
+  rowGap: theme.spacing(2)
+}));
+
+// src/components/CardHeader/CardHeader.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GasPriceWitnessCardHeader = (0, import_react.forwardRef)(({ title, parsedPayload, ...props }, ref) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    StyledCardHeader,
+    {
+      title: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GasPriceHeaderTypography, { heading: title }),
+      action: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        GasPriceHeaderActionsBox,
+        {
+          timestamp: parsedPayload == null ? void 0 : parsedPayload.timestamp,
+          baseFee: (_a = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _a.value,
+          baseFeeLabel: (_b = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _b.label,
+          blockNumber: (_c = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _c.value,
+          blockNumberLabel: (_d = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _d.label
+        }
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+GasPriceWitnessCardHeader.displayName = "GasPriceWitnessCardHeader";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GasPriceWitnessCardHeader
+});
+//# sourceMappingURL=CardHeader.cjs.map

package/dist/node/components/CardHeader/CardHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../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/StyledCardHeader.tsx"],"sourcesContent":["import { CardProps } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'\nimport { StyledCardHeader } from '../layout'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n  parsedPayload?: GasPriceWitnessUIBasePayload\n  title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\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 { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\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 ? <Chip label={new Date(timestamp).toLocaleString()} /> : null}\n      {baseFee ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} /> : null}\n      {blockNumber ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} /> : null}\n    </FlexRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { TypographyExProps, useGetTokenData } from '@xyo-network/react-shared'\n\nimport { GasPriceHeadingTypography } from './Heading'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {\n  heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({ heading, children, ...props }) => {\n  const theme = useTheme()\n  const [ethData] = useGetTokenData(['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 { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\nimport { ReactNode } 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> = ({ children, heading, networkIcon, ...props }) => {\n  const theme = useTheme()\n  return (\n    <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n      {heading} {networkIcon} {children}\n    </TypographyEx>\n  )\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA2B;;;ACD3B,sBAAqB;AACrB,2BAAsC;AAmBlC;AATG,IAAM,2BAAsE,CAAC;AAAA,EAClF;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,6CAAC,gCAAQ,WAAW,GAAG,QAAQ,GAAG,UAAS,QAAQ,GAAG,OACnD;AAAA,gBAAY,4CAAC,wBAAK,OAAO,IAAI,KAAK,SAAS,EAAE,eAAe,GAAG,IAAK;AAAA,IACpE,UAAU,4CAAC,wBAAK,OAAO,GAAG,YAAY,MAAM,QAAQ,QAAQ,CAAC,CAAC,SAAS,IAAK;AAAA,IAC5E,cAAc,4CAAC,wBAAK,OAAO,GAAG,gBAAgB,MAAM,WAAW,IAAI,IAAK;AAAA,KAC3E;AAEJ;;;AC1BA,IAAAA,mBAAyB;AAEzB,IAAAC,uBAAmD;;;ACFnD,IAAAC,mBAAyB;AACzB,0BAAgD;AAY5C,IAAAC,sBAAA;AAHG,IAAM,4BAAsE,CAAC,EAAE,UAAU,SAAS,aAAa,GAAG,MAAM,MAAM;AACnI,QAAM,YAAQ,2BAAS;AACvB,SACE,8CAAC,oCAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAY,GAAI,GAAG,OAC1D;AAAA;AAAA,IAAQ;AAAA,IAAE;AAAA,IAAY;AAAA,IAAE;AAAA,KAC3B;AAEJ;;;ADJsB,IAAAC,sBAAA;AAHf,IAAM,2BAAoE,CAAC,EAAE,SAAS,UAAU,GAAG,MAAM,MAAM;AACpH,QAAM,YAAQ,2BAAS;AACvB,QAAM,CAAC,OAAO,QAAI,sCAAgB,CAAC,KAAK,CAAC;AACzC,QAAM,cAAc,6CAAC,SAAI,QAAQ,MAAM,QAAQ,CAAC,GAAG,KAAK,QAAQ,MAAM;AAEtE,SACE,6CAAC,6BAA0B,SAAkB,aAA2B,GAAG,OACxE,UACH;AAEJ;;;AEpBA,IAAAC,mBAAmC;AAE5B,IAAM,uBAAmB,yBAAO,6BAAY,EAAE,MAAM,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AACzB,EAAE;;;AJQS,IAAAC,sBAAA;AAFJ,IAAM,gCAA4B,yBAAoD,CAAC,EAAE,OAAO,eAAe,GAAG,MAAM,GAAG,QAAK;AAXvI;AAYE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,6CAAC,4BAAyB,SAAS,OAAO;AAAA,MACjD,QACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,+CAAe;AAAA,UAC1B,UAAS,oDAAe,YAAf,mBAAwB;AAAA,UACjC,eAAc,oDAAe,YAAf,mBAAwB;AAAA,UACtC,cAAa,oDAAe,gBAAf,mBAA4B;AAAA,UACzC,mBAAkB,oDAAe,gBAAf,mBAA4B;AAAA;AAAA,MAChD;AAAA,MAEF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAAA,CACD;AAED,0BAA0B,cAAc;","names":["import_material","import_react_shared","import_material","import_jsx_runtime","import_jsx_runtime","import_material","import_jsx_runtime"]}

package/dist/node/components/CardHeader/CardHeader.d.cts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CardProps } from '@mui/material';
+import { GasPriceWitnessUIBasePayload } from '../../types';
+export interface GasPriceCardHeaderProps extends CardProps {
+    parsedPayload?: GasPriceWitnessUIBasePayload;
+    title?: string;
+}
+export declare const GasPriceWitnessCardHeader: import("react").ForwardRefExoticComponent<Omit<GasPriceCardHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CardHeader.d.ts.map

package/dist/node/components/CardHeader/CardHeader.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAGzC,OAAO,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAA;AAI1D,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,aAAa,CAAC,EAAE,4BAA4B,CAAA;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AACD,eAAO,MAAM,yBAAyB,iIAepC,CAAA"}

package/dist/node/components/CardHeader/CardHeader.js

@@ -1,51 +1,85 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+// src/components/CardHeader/CardHeader.tsx
+import { forwardRef } from "react";
+
+// src/components/HeaderComponents/Actions.tsx
+import { Chip } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GasPriceHeaderActionsBox = ({
+  baseFee,
+  baseFeeLabel = "Base Fee",
+  blockNumber,
+  blockNumberLabel = "Block Number",
+  timestamp,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(FlexRow, { columnGap: 1, rowGap: 1, flexWrap: "wrap", ...props, children: [
+    timestamp ? /* @__PURE__ */ jsx(Chip, { label: new Date(timestamp).toLocaleString() }) : null,
+    baseFee ? /* @__PURE__ */ jsx(Chip, { label: `${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI` }) : null,
+    blockNumber ? /* @__PURE__ */ jsx(Chip, { label: `${blockNumberLabel} - ${blockNumber}` }) : null
+  ] });
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+
+// src/components/HeaderComponents/Header/Header.tsx
+import { useTheme as useTheme2 } from "@mui/material";
+import { useGetTokenData } from "@xyo-network/react-shared";
+
+// src/components/HeaderComponents/Header/Heading.tsx
+import { useTheme } from "@mui/material";
+import { TypographyEx } from "@xyo-network/react-shared";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+var GasPriceHeadingTypography = ({ children, heading, networkIcon, ...props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs2(TypographyEx, { fontSize: theme.spacing(6), lineHeight: 1, ...props, children: [
+    heading,
+    " ",
+    networkIcon,
+    " ",
+    children
+  ] });
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var CardHeader_exports = {};
-__export(CardHeader_exports, {
-  GasPriceWitnessCardHeader: () => GasPriceWitnessCardHeader
+
+// src/components/HeaderComponents/Header/Header.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var GasPriceHeaderTypography = ({ heading, children, ...props }) => {
+  const theme = useTheme2();
+  const [ethData] = useGetTokenData(["eth"]);
+  const networkIcon = /* @__PURE__ */ jsx2("img", { height: theme.spacing(4), src: ethData.icon });
+  return /* @__PURE__ */ jsx2(GasPriceHeadingTypography, { heading, networkIcon, ...props, children });
+};
+
+// src/components/layout/StyledCardHeader.tsx
+import { CardHeader, styled } from "@mui/material";
+var StyledCardHeader = styled(CardHeader, { name: "StyledCardHeader" })(({ theme }) => ({
+  flexWrap: "wrap",
+  rowGap: theme.spacing(2)
+}));
+
+// src/components/CardHeader/CardHeader.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GasPriceWitnessCardHeader = forwardRef(({ title, parsedPayload, ...props }, ref) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ jsx3(
+    StyledCardHeader,
+    {
+      title: /* @__PURE__ */ jsx3(GasPriceHeaderTypography, { heading: title }),
+      action: /* @__PURE__ */ jsx3(
+        GasPriceHeaderActionsBox,
+        {
+          timestamp: parsedPayload == null ? void 0 : parsedPayload.timestamp,
+          baseFee: (_a = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _a.value,
+          baseFeeLabel: (_b = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _b.label,
+          blockNumber: (_c = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _c.value,
+          blockNumberLabel: (_d = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _d.label
+        }
+      ),
+      ref,
+      ...props
+    }
+  );
 });
-module.exports = __toCommonJS(CardHeader_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_HeaderComponents = require("../HeaderComponents");
-var import_layout = require("../layout");
-const GasPriceWitnessCardHeader = (0, import_react.forwardRef)(({ title, parsedPayload, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_layout.StyledCardHeader,
-  {
-    title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderComponents.GasPriceHeaderTypography, { heading: title }),
-    action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_HeaderComponents.GasPriceHeaderActionsBox,
-      {
-        timestamp: parsedPayload?.timestamp,
-        baseFee: parsedPayload?.baseFee?.value,
-        baseFeeLabel: parsedPayload?.baseFee?.label,
-        blockNumber: parsedPayload?.blockNumber?.value,
-        blockNumberLabel: parsedPayload?.blockNumber?.label
-      }
-    ),
-    ref,
-    ...props
-  }
-));
 GasPriceWitnessCardHeader.displayName = "GasPriceWitnessCardHeader";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   GasPriceWitnessCardHeader
-});
+};
 //# sourceMappingURL=CardHeader.js.map

package/dist/node/components/CardHeader/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import { CardProps } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'\nimport { StyledCardHeader } from '../layout'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n  parsedPayload?: GasPriceWitnessUIBasePayload\n  title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\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"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaW;AAZX,mBAA2B;AAG3B,8BAAmE;AACnE,oBAAiC;AAM1B,MAAM,gCAA4B,yBAAoD,CAAC,EAAE,OAAO,eAAe,GAAG,MAAM,GAAG,QAChI;AAAA,EAAC;AAAA;AAAA,IACC,OAAO,4CAAC,oDAAyB,SAAS,OAAO;AAAA,IACjD,QACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,eAAe;AAAA,QAC1B,SAAS,eAAe,SAAS;AAAA,QACjC,cAAc,eAAe,SAAS;AAAA,QACtC,aAAa,eAAe,aAAa;AAAA,QACzC,kBAAkB,eAAe,aAAa;AAAA;AAAA,IAChD;AAAA,IAEF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,0BAA0B,cAAc;","names":[]}
+{"version":3,"sources":["../../../../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/StyledCardHeader.tsx"],"sourcesContent":["import { CardProps } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'\nimport { StyledCardHeader } from '../layout'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n  parsedPayload?: GasPriceWitnessUIBasePayload\n  title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\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 { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\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 ? <Chip label={new Date(timestamp).toLocaleString()} /> : null}\n      {baseFee ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} /> : null}\n      {blockNumber ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} /> : null}\n    </FlexRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { TypographyExProps, useGetTokenData } from '@xyo-network/react-shared'\n\nimport { GasPriceHeadingTypography } from './Heading'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {\n  heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({ heading, children, ...props }) => {\n  const theme = useTheme()\n  const [ethData] = useGetTokenData(['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 { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\nimport { ReactNode } 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> = ({ children, heading, networkIcon, ...props }) => {\n  const theme = useTheme()\n  return (\n    <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n      {heading} {networkIcon} {children}\n    </TypographyEx>\n  )\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"],"mappings":";AACA,SAAS,kBAAkB;;;ACD3B,SAAS,YAAY;AACrB,SAAuB,eAAe;AAmBlC,SACe,KADf;AATG,IAAM,2BAAsE,CAAC;AAAA,EAClF;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,WAAQ,WAAW,GAAG,QAAQ,GAAG,UAAS,QAAQ,GAAG,OACnD;AAAA,gBAAY,oBAAC,QAAK,OAAO,IAAI,KAAK,SAAS,EAAE,eAAe,GAAG,IAAK;AAAA,IACpE,UAAU,oBAAC,QAAK,OAAO,GAAG,YAAY,MAAM,QAAQ,QAAQ,CAAC,CAAC,SAAS,IAAK;AAAA,IAC5E,cAAc,oBAAC,QAAK,OAAO,GAAG,gBAAgB,MAAM,WAAW,IAAI,IAAK;AAAA,KAC3E;AAEJ;;;AC1BA,SAAS,YAAAA,iBAAgB;AAEzB,SAA4B,uBAAuB;;;ACFnD,SAAS,gBAAgB;AACzB,SAAS,oBAAuC;AAY5C,iBAAAC,aAAA;AAHG,IAAM,4BAAsE,CAAC,EAAE,UAAU,SAAS,aAAa,GAAG,MAAM,MAAM;AACnI,QAAM,QAAQ,SAAS;AACvB,SACE,gBAAAA,MAAC,gBAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAY,GAAI,GAAG,OAC1D;AAAA;AAAA,IAAQ;AAAA,IAAE;AAAA,IAAY;AAAA,IAAE;AAAA,KAC3B;AAEJ;;;ADJsB,gBAAAC,YAAA;AAHf,IAAM,2BAAoE,CAAC,EAAE,SAAS,UAAU,GAAG,MAAM,MAAM;AACpH,QAAM,QAAQC,UAAS;AACvB,QAAM,CAAC,OAAO,IAAI,gBAAgB,CAAC,KAAK,CAAC;AACzC,QAAM,cAAc,gBAAAD,KAAC,SAAI,QAAQ,MAAM,QAAQ,CAAC,GAAG,KAAK,QAAQ,MAAM;AAEtE,SACE,gBAAAA,KAAC,6BAA0B,SAAkB,aAA2B,GAAG,OACxE,UACH;AAEJ;;;AEpBA,SAAS,YAAY,cAAc;AAE5B,IAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AACzB,EAAE;;;AJQS,gBAAAE,YAAA;AAFJ,IAAM,4BAA4B,WAAoD,CAAC,EAAE,OAAO,eAAe,GAAG,MAAM,GAAG,QAAK;AAXvI;AAYE,yBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,gBAAAA,KAAC,4BAAyB,SAAS,OAAO;AAAA,MACjD,QACE,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,+CAAe;AAAA,UAC1B,UAAS,oDAAe,YAAf,mBAAwB;AAAA,UACjC,eAAc,oDAAe,YAAf,mBAAwB;AAAA,UACtC,cAAa,oDAAe,gBAAf,mBAA4B;AAAA,UACzC,mBAAkB,oDAAe,gBAAf,mBAA4B;AAAA;AAAA,MAChD;AAAA,MAEF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAAA,CACD;AAED,0BAA0B,cAAc;","names":["useTheme","jsxs","jsx","useTheme","jsx"]}

package/dist/node/components/CardHeader/index.cjs

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/CardHeader/index.ts
+var CardHeader_exports = {};
+__export(CardHeader_exports, {
+  GasPriceWitnessCardHeader: () => GasPriceWitnessCardHeader
+});
+module.exports = __toCommonJS(CardHeader_exports);
+
+// src/components/CardHeader/CardHeader.tsx
+var import_react = require("react");
+
+// src/components/HeaderComponents/Actions.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var GasPriceHeaderActionsBox = ({
+  baseFee,
+  baseFeeLabel = "Base Fee",
+  blockNumber,
+  blockNumberLabel = "Block Number",
+  timestamp,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { columnGap: 1, rowGap: 1, flexWrap: "wrap", ...props, children: [
+    timestamp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: new Date(timestamp).toLocaleString() }) : null,
+    baseFee ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: `${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI` }) : null,
+    blockNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: `${blockNumberLabel} - ${blockNumber}` }) : null
+  ] });
+};
+
+// src/components/HeaderComponents/Header/Header.tsx
+var import_material3 = require("@mui/material");
+var import_react_shared2 = require("@xyo-network/react-shared");
+
+// src/components/HeaderComponents/Header/Heading.tsx
+var import_material2 = require("@mui/material");
+var import_react_shared = require("@xyo-network/react-shared");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var GasPriceHeadingTypography = ({ children, heading, networkIcon, ...props }) => {
+  const theme = (0, import_material2.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_shared.TypographyEx, { fontSize: theme.spacing(6), lineHeight: 1, ...props, children: [
+    heading,
+    " ",
+    networkIcon,
+    " ",
+    children
+  ] });
+};
+
+// src/components/HeaderComponents/Header/Header.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var GasPriceHeaderTypography = ({ heading, children, ...props }) => {
+  const theme = (0, import_material3.useTheme)();
+  const [ethData] = (0, import_react_shared2.useGetTokenData)(["eth"]);
+  const networkIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { height: theme.spacing(4), src: ethData.icon });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GasPriceHeadingTypography, { heading, networkIcon, ...props, children });
+};
+
+// src/components/layout/StyledCardHeader.tsx
+var import_material4 = require("@mui/material");
+var StyledCardHeader = (0, import_material4.styled)(import_material4.CardHeader, { name: "StyledCardHeader" })(({ theme }) => ({
+  flexWrap: "wrap",
+  rowGap: theme.spacing(2)
+}));
+
+// src/components/CardHeader/CardHeader.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GasPriceWitnessCardHeader = (0, import_react.forwardRef)(({ title, parsedPayload, ...props }, ref) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    StyledCardHeader,
+    {
+      title: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GasPriceHeaderTypography, { heading: title }),
+      action: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        GasPriceHeaderActionsBox,
+        {
+          timestamp: parsedPayload == null ? void 0 : parsedPayload.timestamp,
+          baseFee: (_a = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _a.value,
+          baseFeeLabel: (_b = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _b.label,
+          blockNumber: (_c = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _c.value,
+          blockNumberLabel: (_d = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _d.label
+        }
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+GasPriceWitnessCardHeader.displayName = "GasPriceWitnessCardHeader";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GasPriceWitnessCardHeader
+});
+//# sourceMappingURL=index.cjs.map

package/dist/node/components/CardHeader/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CardHeader/index.ts","../../../../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/StyledCardHeader.tsx"],"sourcesContent":["export * from './CardHeader'\n","import { CardProps } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'\nimport { StyledCardHeader } from '../layout'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n  parsedPayload?: GasPriceWitnessUIBasePayload\n  title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\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 { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\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 ? <Chip label={new Date(timestamp).toLocaleString()} /> : null}\n      {baseFee ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} /> : null}\n      {blockNumber ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} /> : null}\n    </FlexRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { TypographyExProps, useGetTokenData } from '@xyo-network/react-shared'\n\nimport { GasPriceHeadingTypography } from './Heading'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {\n  heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({ heading, children, ...props }) => {\n  const theme = useTheme()\n  const [ethData] = useGetTokenData(['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 { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\nimport { ReactNode } 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> = ({ children, heading, networkIcon, ...props }) => {\n  const theme = useTheme()\n  return (\n    <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n      {heading} {networkIcon} {children}\n    </TypographyEx>\n  )\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAA2B;;;ACD3B,sBAAqB;AACrB,2BAAsC;AAmBlC;AATG,IAAM,2BAAsE,CAAC;AAAA,EAClF;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,6CAAC,gCAAQ,WAAW,GAAG,QAAQ,GAAG,UAAS,QAAQ,GAAG,OACnD;AAAA,gBAAY,4CAAC,wBAAK,OAAO,IAAI,KAAK,SAAS,EAAE,eAAe,GAAG,IAAK;AAAA,IACpE,UAAU,4CAAC,wBAAK,OAAO,GAAG,YAAY,MAAM,QAAQ,QAAQ,CAAC,CAAC,SAAS,IAAK;AAAA,IAC5E,cAAc,4CAAC,wBAAK,OAAO,GAAG,gBAAgB,MAAM,WAAW,IAAI,IAAK;AAAA,KAC3E;AAEJ;;;AC1BA,IAAAA,mBAAyB;AAEzB,IAAAC,uBAAmD;;;ACFnD,IAAAC,mBAAyB;AACzB,0BAAgD;AAY5C,IAAAC,sBAAA;AAHG,IAAM,4BAAsE,CAAC,EAAE,UAAU,SAAS,aAAa,GAAG,MAAM,MAAM;AACnI,QAAM,YAAQ,2BAAS;AACvB,SACE,8CAAC,oCAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAY,GAAI,GAAG,OAC1D;AAAA;AAAA,IAAQ;AAAA,IAAE;AAAA,IAAY;AAAA,IAAE;AAAA,KAC3B;AAEJ;;;ADJsB,IAAAC,sBAAA;AAHf,IAAM,2BAAoE,CAAC,EAAE,SAAS,UAAU,GAAG,MAAM,MAAM;AACpH,QAAM,YAAQ,2BAAS;AACvB,QAAM,CAAC,OAAO,QAAI,sCAAgB,CAAC,KAAK,CAAC;AACzC,QAAM,cAAc,6CAAC,SAAI,QAAQ,MAAM,QAAQ,CAAC,GAAG,KAAK,QAAQ,MAAM;AAEtE,SACE,6CAAC,6BAA0B,SAAkB,aAA2B,GAAG,OACxE,UACH;AAEJ;;;AEpBA,IAAAC,mBAAmC;AAE5B,IAAM,uBAAmB,yBAAO,6BAAY,EAAE,MAAM,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AACzB,EAAE;;;AJQS,IAAAC,sBAAA;AAFJ,IAAM,gCAA4B,yBAAoD,CAAC,EAAE,OAAO,eAAe,GAAG,MAAM,GAAG,QAAK;AAXvI;AAYE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,6CAAC,4BAAyB,SAAS,OAAO;AAAA,MACjD,QACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,+CAAe;AAAA,UAC1B,UAAS,oDAAe,YAAf,mBAAwB;AAAA,UACjC,eAAc,oDAAe,YAAf,mBAAwB;AAAA,UACtC,cAAa,oDAAe,gBAAf,mBAA4B;AAAA,UACzC,mBAAkB,oDAAe,gBAAf,mBAA4B;AAAA;AAAA,MAChD;AAAA,MAEF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAAA,CACD;AAED,0BAA0B,cAAc;","names":["import_material","import_react_shared","import_material","import_jsx_runtime","import_jsx_runtime","import_material","import_jsx_runtime"]}