@xyo-network/react-chain-shared 1.11.0 → 1.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/browser/index.mjs +91 -118
  2. package/dist/browser/index.mjs.map +1 -1
  3. package/package.json +10 -10
package/dist/browser/index.mjs CHANGED
@@ -1,41 +1,35 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+
1
4
  // src/components/menu-item/ActiveMenuItem.tsx
2
- import {
3
- MenuItem,
4
- styled,
5
- useTheme
6
- } from "@mui/material";
7
- import { jsx } from "react/jsx-runtime";
8
- var ActiveMenuItem = ({
9
- active,
10
- children,
11
- sx,
12
- ...props
13
- }) => {
5
+ import { MenuItem, styled, useTheme } from "@mui/material";
6
+ import React from "react";
7
+ var ActiveMenuItem = /* @__PURE__ */ __name(({ active, children, sx, ...props }) => {
14
8
  const theme = useTheme();
15
- return /* @__PURE__ */ jsx(
16
- StyledMenuItem,
17
- {
18
- disableRipple: true,
19
- sx: {
20
- // left border color and background color for active state
21
- "borderLeft": `5px solid ${active ? theme.vars.palette.secondary.light : "transparent"}`,
22
- "backgroundColor": active ? theme.vars.palette.secondary.dark : "transparent",
23
- // force white text color for active state for improved readability with background color
24
- "color": active ? "white" : "unset",
25
- "&:hover": {
26
- // overriding default hover color and backgroundColor since active state conflicts visually with
27
- // default styles of MenuItem hover
28
- ...active ? { backgroundColor: theme.vars.palette.secondary.dark } : {},
29
- color: active ? "white" : "unset"
30
- },
31
- ...sx
9
+ return /* @__PURE__ */ React.createElement(StyledMenuItem, {
10
+ disableRipple: true,
11
+ sx: {
12
+ // left border color and background color for active state
13
+ "borderLeft": `5px solid ${active ? theme.vars.palette.secondary.light : "transparent"}`,
14
+ "backgroundColor": active ? theme.vars.palette.secondary.dark : "transparent",
15
+ // force white text color for active state for improved readability with background color
16
+ "color": active ? "white" : "unset",
17
+ "&:hover": {
18
+ // overriding default hover color and backgroundColor since active state conflicts visually with
19
+ // default styles of MenuItem hover
20
+ ...active ? {
21
+ backgroundColor: theme.vars.palette.secondary.dark
22
+ } : {},
23
+ color: active ? "white" : "unset"
32
24
  },
33
- ...props,
34
- children
35
- }
36
- );
37
- };
38
- var StyledMenuItem = styled(MenuItem, { name: "StyledMenuItem" })(({ theme }) => ({
25
+ ...sx
26
+ },
27
+ ...props
28
+ }, children);
29
+ }, "ActiveMenuItem");
30
+ var StyledMenuItem = styled(MenuItem, {
31
+ name: "StyledMenuItem"
32
+ })(({ theme }) => ({
39
33
  display: "flex-inline",
40
34
  flexDirection: "row",
41
35
  gap: theme.spacing(1),
@@ -45,48 +39,38 @@ var StyledMenuItem = styled(MenuItem, { name: "StyledMenuItem" })(({ theme }) =>
45
39
  }));
46
40
 
47
41
  // src/components/stack/DetailsStack.tsx
48
- import {
49
- Stack,
50
- styled as styled2,
51
- Tooltip,
52
- Typography,
53
- useTheme as useTheme2
54
- } from "@mui/material";
42
+ import { Stack, styled as styled2, Tooltip, Typography, useTheme as useTheme2 } from "@mui/material";
55
43
  import { isDefined } from "@xylabs/typeof";
56
- import { Fragment, useMemo } from "react";
57
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
58
- var isComponentType = (value) => typeof value === "function" || typeof value === "object" && value !== null && ("$$typeof" in value || "render" in value);
59
- var DetailsStack = ({
60
- IconComponent,
61
- heading,
62
- children,
63
- tooltipTitle,
64
- ...props
65
- }) => {
44
+ import React2, { Fragment, useMemo } from "react";
45
+ var isComponentType = /* @__PURE__ */ __name((value) => typeof value === "function" || typeof value === "object" && value !== null && ("$$typeof" in value || "render" in value), "isComponentType");
46
+ var DetailsStack = /* @__PURE__ */ __name(({ IconComponent, heading, children, tooltipTitle, ...props }) => {
66
47
  const theme = useTheme2();
67
48
  const hasTooltip = isDefined(tooltipTitle);
68
49
  const resolvedIconComponent = useMemo(() => {
69
- return isComponentType(IconComponent) ? /* @__PURE__ */ jsx2(
70
- IconComponent,
71
- {
72
- style: {
73
- /** height and marginTop adjusted to account for font not filling container with line-height: 1 */
74
- height: "0.85rem",
75
- marginTop: 0.5,
76
- marginLeft: theme.spacing(1)
77
- }
50
+ return isComponentType(IconComponent) ? /* @__PURE__ */ React2.createElement(IconComponent, {
51
+ style: {
52
+ /** height and marginTop adjusted to account for font not filling container with line-height: 1 */
53
+ height: "0.85rem",
54
+ marginTop: 0.5,
55
+ marginLeft: theme.spacing(1)
78
56
  }
79
- ) : IconComponent ?? /* @__PURE__ */ jsx2(Fragment, {});
80
- }, [IconComponent]);
81
- return /* @__PURE__ */ jsxs(Stack, { direction: "column", flexGrow: 1, flexWrap: "wrap", minWidth: "1px", ...props, children: [
82
- /* @__PURE__ */ jsxs(SectionHeadingTypography, { children: [
83
- heading,
84
- hasTooltip ? /* @__PURE__ */ jsx2(Tooltip, { title: tooltipTitle, children: /* @__PURE__ */ jsx2("span", { children: resolvedIconComponent }) }) : resolvedIconComponent
85
- ] }),
86
- children
87
- ] });
88
- };
89
- var SectionHeadingTypography = styled2(Typography, { name: "SectionHeadingTypography" })(({ theme }) => ({
57
+ }) : IconComponent ?? /* @__PURE__ */ React2.createElement(Fragment, null);
58
+ }, [
59
+ IconComponent
60
+ ]);
61
+ return /* @__PURE__ */ React2.createElement(Stack, {
62
+ direction: "column",
63
+ flexGrow: 1,
64
+ flexWrap: "wrap",
65
+ minWidth: "1px",
66
+ ...props
67
+ }, /* @__PURE__ */ React2.createElement(SectionHeadingTypography, null, heading, hasTooltip ? /* @__PURE__ */ React2.createElement(Tooltip, {
68
+ title: tooltipTitle
69
+ }, /* @__PURE__ */ React2.createElement("span", null, resolvedIconComponent)) : resolvedIconComponent), children);
70
+ }, "DetailsStack");
71
+ var SectionHeadingTypography = styled2(Typography, {
72
+ name: "SectionHeadingTypography"
73
+ })(({ theme }) => ({
90
74
  display: "flex",
91
75
  fontFamily: "monospace",
92
76
  lineHeight: 1,
@@ -94,62 +78,51 @@ var SectionHeadingTypography = styled2(Typography, { name: "SectionHeadingTypogr
94
78
  }));
95
79
 
96
80
  // src/components/stack/LabelValueStack.tsx
97
- import {
98
- Stack as Stack2,
99
- Typography as Typography2,
100
- useTheme as useTheme3
101
- } from "@mui/material";
102
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
103
- var LabelValueStack = ({
104
- labels,
105
- values,
106
- ...props
107
- }) => {
81
+ import { Stack as Stack2, Typography as Typography2, useTheme as useTheme3 } from "@mui/material";
82
+ import React3 from "react";
83
+ var LabelValueStack = /* @__PURE__ */ __name(({ labels, values, ...props }) => {
108
84
  const theme = useTheme3();
109
- return /* @__PURE__ */ jsxs2(Stack2, { flexDirection: "row", flexGrow: 1, ...props, children: [
110
- /* @__PURE__ */ jsx3(Stack2, { children: labels.map((label) => /* @__PURE__ */ jsxs2(
111
- Typography2,
112
- {
113
- fontWeight: "300",
114
- variant: "body2",
115
- sx: { borderBottom: `1px solid ${theme.vars?.palette.divider}`, opacity: 0.7 },
116
- children: [
117
- label,
118
- ":"
119
- ]
120
- },
121
- label
122
- )) }),
123
- /* @__PURE__ */ jsx3(Stack2, { alignItems: "end", flexGrow: 1, children: values.map((value, index) => /* @__PURE__ */ jsx3(
124
- Typography2,
125
- {
126
- fontFamily: "monospace",
127
- variant: "body2",
128
- width: "100%",
129
- sx: {
130
- display: "flex",
131
- justifyContent: "end",
132
- borderBottom: `1px solid ${theme.vars?.palette.divider}`
133
- },
134
- children: value
135
- },
136
- labels[index]
137
- )) })
138
- ] });
139
- };
85
+ return /* @__PURE__ */ React3.createElement(Stack2, {
86
+ flexDirection: "row",
87
+ flexGrow: 1,
88
+ ...props
89
+ }, /* @__PURE__ */ React3.createElement(Stack2, null, labels.map((label) => /* @__PURE__ */ React3.createElement(Typography2, {
90
+ fontWeight: "300",
91
+ key: label,
92
+ variant: "body2",
93
+ sx: {
94
+ borderBottom: `1px solid ${theme.vars?.palette.divider}`,
95
+ opacity: 0.7
96
+ }
97
+ }, label, ":"))), /* @__PURE__ */ React3.createElement(Stack2, {
98
+ alignItems: "end",
99
+ flexGrow: 1
100
+ }, values.map((value, index) => /* @__PURE__ */ React3.createElement(Typography2, {
101
+ fontFamily: "monospace",
102
+ variant: "body2",
103
+ // Use matching label as key since values might be the same
104
+ key: labels[index],
105
+ width: "100%",
106
+ sx: {
107
+ display: "flex",
108
+ justifyContent: "end",
109
+ borderBottom: `1px solid ${theme.vars?.palette.divider}`
110
+ }
111
+ }, value))));
112
+ }, "LabelValueStack");
140
113
 
141
114
  // src/story/buildRandomBlockchain.ts
142
115
  import { Account } from "@xyo-network/account";
143
116
  import { buildRandomChain } from "@xyo-network/chain-protocol";
144
- var buildRandomBlockChain = async (blockCount = 10) => {
117
+ var buildRandomBlockChain = /* @__PURE__ */ __name(async (blockCount = 10) => {
145
118
  const initialBlockProducer = await Account.random();
146
119
  const blocks = await buildRandomChain(initialBlockProducer, blockCount);
147
120
  return blocks;
148
- };
149
- var buildRandomBlockChainBlocksOnly = async (blockCount = 10) => {
121
+ }, "buildRandomBlockChain");
122
+ var buildRandomBlockChainBlocksOnly = /* @__PURE__ */ __name(async (blockCount = 10) => {
150
123
  const chain = await buildRandomChain(await Account.random(), blockCount);
151
124
  return chain;
152
- };
125
+ }, "buildRandomBlockChainBlocksOnly");
153
126
  export {
154
127
  ActiveMenuItem,
155
128
  DetailsStack,
package/dist/browser/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/menu-item/ActiveMenuItem.tsx","../../src/components/stack/DetailsStack.tsx","../../src/components/stack/LabelValueStack.tsx","../../src/story/buildRandomBlockchain.ts"],"sourcesContent":["import type { MenuItemProps } from '@mui/material'\nimport {\n MenuItem, styled, useTheme,\n} from '@mui/material'\nimport React from 'react'\n\nexport const ActiveMenuItem: React.FC<MenuItemProps & { active?: boolean }> = ({\n active, children, sx, ...props\n}) => {\n const theme = useTheme()\n return (\n <StyledMenuItem\n disableRipple\n sx={{\n // left border color and background color for active state\n 'borderLeft': `5px solid ${active ? theme.vars.palette.secondary.light : 'transparent'}`,\n 'backgroundColor': active ? theme.vars.palette.secondary.dark : 'transparent',\n // force white text color for active state for improved readability with background color\n 'color': active ? 'white' : 'unset',\n '&:hover': {\n // overriding default hover color and backgroundColor since active state conflicts visually with\n // default styles of MenuItem hover\n ...(active ? { backgroundColor: theme.vars.palette.secondary.dark } : {}),\n color: active ? 'white' : 'unset',\n },\n ...sx,\n }}\n {...props}\n >\n {children}\n </StyledMenuItem>\n )\n}\n\nconst StyledMenuItem = styled(MenuItem, { name: 'StyledMenuItem' })(({ theme }) => ({\n display: 'flex-inline',\n flexDirection: 'row',\n gap: theme.spacing(1),\n padding: 0,\n paddingLeft: theme.spacing(1),\n marginBottom: theme.spacing(1),\n}))\n","import type { StackProps } from '@mui/material'\nimport {\n Stack, styled, Tooltip, Typography,\n useTheme,\n} from '@mui/material'\nimport { isDefined } from '@xylabs/typeof'\nimport type {\n ComponentType, ReactNode, SVGAttributes,\n} from 'react'\nimport React, { Fragment, useMemo } from 'react'\n\nconst isComponentType = (value: unknown): value is ComponentType<SVGAttributes<SVGElement>> =>\n typeof value === 'function'\n || (typeof value === 'object' && value !== null && ('$$typeof' in value || 'render' in value))\n\nexport interface DetailsStackProps extends StackProps {\n IconComponent?: ComponentType<SVGAttributes<SVGElement>> | ReactNode\n heading?: string\n tooltipTitle?: string\n}\n\nexport const DetailsStack: React.FC<DetailsStackProps> = ({\n IconComponent, heading, children, tooltipTitle, ...props\n}) => {\n const theme = useTheme()\n\n const hasTooltip = isDefined(tooltipTitle)\n const resolvedIconComponent = useMemo(() => {\n return isComponentType(IconComponent)\n ? (\n <IconComponent\n style={{\n /** height and marginTop adjusted to account for font not filling container with line-height: 1 */\n height: '0.85rem',\n marginTop: 0.5,\n marginLeft: theme.spacing(1),\n }}\n />\n )\n : IconComponent ?? <Fragment />\n }, [IconComponent])\n\n return (\n <Stack direction=\"column\" flexGrow={1} flexWrap=\"wrap\" minWidth=\"1px\" {...props}>\n <SectionHeadingTypography>\n {heading}\n {hasTooltip\n ? (\n <Tooltip title={tooltipTitle}>\n <span>{resolvedIconComponent}</span>\n </Tooltip>\n )\n : resolvedIconComponent}\n </SectionHeadingTypography>\n {children}\n </Stack>\n )\n}\n\nconst SectionHeadingTypography = styled(Typography, { name: 'SectionHeadingTypography' })(({ theme }) => ({\n display: 'flex',\n fontFamily: 'monospace',\n lineHeight: 1,\n marginBottom: theme.spacing(1.5),\n}))\n","import type { StackProps } from '@mui/material'\nimport {\n Stack, Typography, useTheme,\n} from '@mui/material'\nimport React from 'react'\n\nexport interface LabelValueStackProps extends StackProps {\n labels: string[]\n values: (string | undefined)[]\n}\n\nexport const LabelValueStack: React.FC<LabelValueStackProps> = ({\n labels, values, ...props\n}) => {\n const theme = useTheme()\n\n return (\n <Stack flexDirection=\"row\" flexGrow={1} {...props}>\n <Stack>\n {labels.map(label => (\n <Typography\n fontWeight=\"300\"\n key={label}\n variant=\"body2\"\n sx={{ borderBottom: `1px solid ${theme.vars?.palette.divider}`, opacity: 0.7 }}\n >\n {label}\n :\n </Typography>\n ))}\n </Stack>\n <Stack alignItems=\"end\" flexGrow={1}>\n {values.map((value, index) => (\n <Typography\n fontFamily=\"monospace\"\n variant=\"body2\"\n // Use matching label as key since values might be the same\n key={labels[index]}\n width=\"100%\"\n sx={{\n display: 'flex', justifyContent: 'end', borderBottom: `1px solid ${theme.vars?.palette.divider}`,\n }}\n >\n {value}\n </Typography>\n ))}\n </Stack>\n </Stack>\n )\n}\n","import { Account } from '@xyo-network/account'\nimport { buildRandomChain } from '@xyo-network/chain-protocol'\nimport type { HydratedBlock } from '@xyo-network/xl1-protocol'\n\nexport const buildRandomBlockChain = async (blockCount = 10) => {\n // Create a producer\n const initialBlockProducer = await Account.random()\n\n // Create multiple blocks\n const blocks: HydratedBlock[] = await buildRandomChain(initialBlockProducer, blockCount)\n return blocks\n}\n\nexport const buildRandomBlockChainBlocksOnly = async (blockCount = 10) => {\n const chain = await buildRandomChain(await Account.random(), blockCount)\n return chain\n}\n"],"mappings":"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","names":["styled","useTheme","jsx","Stack","Typography","useTheme","jsx","jsxs"]}
1
+ {"version":3,"sources":["../../src/components/menu-item/ActiveMenuItem.tsx","../../src/components/stack/DetailsStack.tsx","../../src/components/stack/LabelValueStack.tsx","../../src/story/buildRandomBlockchain.ts"],"sourcesContent":["import type { MenuItemProps } from '@mui/material'\nimport {\n MenuItem, styled, useTheme,\n} from '@mui/material'\nimport React from 'react'\n\nexport const ActiveMenuItem: React.FC<MenuItemProps & { active?: boolean }> = ({\n active, children, sx, ...props\n}) => {\n const theme = useTheme()\n return (\n <StyledMenuItem\n disableRipple\n sx={{\n // left border color and background color for active state\n 'borderLeft': `5px solid ${active ? theme.vars.palette.secondary.light : 'transparent'}`,\n 'backgroundColor': active ? theme.vars.palette.secondary.dark : 'transparent',\n // force white text color for active state for improved readability with background color\n 'color': active ? 'white' : 'unset',\n '&:hover': {\n // overriding default hover color and backgroundColor since active state conflicts visually with\n // default styles of MenuItem hover\n ...(active ? { backgroundColor: theme.vars.palette.secondary.dark } : {}),\n color: active ? 'white' : 'unset',\n },\n ...sx,\n }}\n {...props}\n >\n {children}\n </StyledMenuItem>\n )\n}\n\nconst StyledMenuItem = styled(MenuItem, { name: 'StyledMenuItem' })(({ theme }) => ({\n display: 'flex-inline',\n flexDirection: 'row',\n gap: theme.spacing(1),\n padding: 0,\n paddingLeft: theme.spacing(1),\n marginBottom: theme.spacing(1),\n}))\n","import type { StackProps } from '@mui/material'\nimport {\n Stack, styled, Tooltip, Typography,\n useTheme,\n} from '@mui/material'\nimport { isDefined } from '@xylabs/typeof'\nimport type {\n ComponentType, ReactNode, SVGAttributes,\n} from 'react'\nimport React, { Fragment, useMemo } from 'react'\n\nconst isComponentType = (value: unknown): value is ComponentType<SVGAttributes<SVGElement>> =>\n typeof value === 'function'\n || (typeof value === 'object' && value !== null && ('$$typeof' in value || 'render' in value))\n\nexport interface DetailsStackProps extends StackProps {\n IconComponent?: ComponentType<SVGAttributes<SVGElement>> | ReactNode\n heading?: string\n tooltipTitle?: string\n}\n\nexport const DetailsStack: React.FC<DetailsStackProps> = ({\n IconComponent, heading, children, tooltipTitle, ...props\n}) => {\n const theme = useTheme()\n\n const hasTooltip = isDefined(tooltipTitle)\n const resolvedIconComponent = useMemo(() => {\n return isComponentType(IconComponent)\n ? (\n <IconComponent\n style={{\n /** height and marginTop adjusted to account for font not filling container with line-height: 1 */\n height: '0.85rem',\n marginTop: 0.5,\n marginLeft: theme.spacing(1),\n }}\n />\n )\n : IconComponent ?? <Fragment />\n }, [IconComponent])\n\n return (\n <Stack direction=\"column\" flexGrow={1} flexWrap=\"wrap\" minWidth=\"1px\" {...props}>\n <SectionHeadingTypography>\n {heading}\n {hasTooltip\n ? (\n <Tooltip title={tooltipTitle}>\n <span>{resolvedIconComponent}</span>\n </Tooltip>\n )\n : resolvedIconComponent}\n </SectionHeadingTypography>\n {children}\n </Stack>\n )\n}\n\nconst SectionHeadingTypography = styled(Typography, { name: 'SectionHeadingTypography' })(({ theme }) => ({\n display: 'flex',\n fontFamily: 'monospace',\n lineHeight: 1,\n marginBottom: theme.spacing(1.5),\n}))\n","import type { StackProps } from '@mui/material'\nimport {\n Stack, Typography, useTheme,\n} from '@mui/material'\nimport React from 'react'\n\nexport interface LabelValueStackProps extends StackProps {\n labels: string[]\n values: (string | undefined)[]\n}\n\nexport const LabelValueStack: React.FC<LabelValueStackProps> = ({\n labels, values, ...props\n}) => {\n const theme = useTheme()\n\n return (\n <Stack flexDirection=\"row\" flexGrow={1} {...props}>\n <Stack>\n {labels.map(label => (\n <Typography\n fontWeight=\"300\"\n key={label}\n variant=\"body2\"\n sx={{ borderBottom: `1px solid ${theme.vars?.palette.divider}`, opacity: 0.7 }}\n >\n {label}\n :\n </Typography>\n ))}\n </Stack>\n <Stack alignItems=\"end\" flexGrow={1}>\n {values.map((value, index) => (\n <Typography\n fontFamily=\"monospace\"\n variant=\"body2\"\n // Use matching label as key since values might be the same\n key={labels[index]}\n width=\"100%\"\n sx={{\n display: 'flex', justifyContent: 'end', borderBottom: `1px solid ${theme.vars?.palette.divider}`,\n }}\n >\n {value}\n </Typography>\n ))}\n </Stack>\n </Stack>\n )\n}\n","import { Account } from '@xyo-network/account'\nimport { buildRandomChain } from '@xyo-network/chain-protocol'\nimport type { HydratedBlock } from '@xyo-network/xl1-protocol'\n\nexport const buildRandomBlockChain = async (blockCount = 10) => {\n // Create a producer\n const initialBlockProducer = await Account.random()\n\n // Create multiple blocks\n const blocks: HydratedBlock[] = await buildRandomChain(initialBlockProducer, blockCount)\n return blocks\n}\n\nexport const buildRandomBlockChainBlocksOnly = async (blockCount = 10) => {\n const chain = await buildRandomChain(await Account.random(), blockCount)\n return chain\n}\n"],"mappings":"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","names":["MenuItem","styled","useTheme","React","ActiveMenuItem","active","children","sx","props","theme","useTheme","StyledMenuItem","disableRipple","vars","palette","secondary","light","dark","backgroundColor","color","styled","MenuItem","name","display","flexDirection","gap","spacing","padding","paddingLeft","marginBottom","Stack","styled","Tooltip","Typography","useTheme","isDefined","React","Fragment","useMemo","isComponentType","value","DetailsStack","IconComponent","heading","children","tooltipTitle","props","theme","useTheme","hasTooltip","isDefined","resolvedIconComponent","useMemo","React","style","height","marginTop","marginLeft","spacing","Fragment","Stack","direction","flexGrow","flexWrap","minWidth","SectionHeadingTypography","Tooltip","title","span","styled","Typography","name","display","fontFamily","lineHeight","marginBottom","Stack","Typography","useTheme","React","LabelValueStack","labels","values","props","theme","useTheme","React","Stack","flexDirection","flexGrow","map","label","Typography","fontWeight","key","variant","sx","borderBottom","vars","palette","divider","opacity","alignItems","value","index","fontFamily","width","display","justifyContent","Account","buildRandomChain","buildRandomBlockChain","blockCount","initialBlockProducer","Account","random","blocks","buildRandomChain","buildRandomBlockChainBlocksOnly","chain"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "http://json.schemastore.org/package.json",
3
3
  "name": "@xyo-network/react-chain-shared",
4
- "version": "1.11.0",
4
+ "version": "1.12.1",
5
5
  "description": "XYO Layer One React SDK",
6
6
  "homepage": "https://xylabs.com",
7
7
  "bugs": {
@@ -45,20 +45,20 @@
45
45
  "start": "storybook dev -p 6006"
46
46
  },
47
47
  "dependencies": {
48
- "@xylabs/typeof": "~5.0.3",
49
- "@xyo-network/account": "~5.0.2",
50
- "@xyo-network/chain-protocol": "~1.11.0",
51
- "@xyo-network/xl1-protocol": "~1.10.3"
48
+ "@xylabs/typeof": "~5.0.8",
49
+ "@xyo-network/account": "~5.0.5",
50
+ "@xyo-network/chain-protocol": "~1.12.1",
51
+ "@xyo-network/xl1-protocol": "~1.10.13"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@emotion/react": "~11.14.0",
55
55
  "@emotion/styled": "~11.14.1",
56
56
  "@mui/material": "~7.3.1",
57
- "@types/react": "~19.1.9",
58
- "@xylabs/ts-scripts-yarn3": "~7.1.0",
59
- "@xylabs/tsconfig": "~7.1.0",
60
- "@xylabs/tsconfig-dom": "~7.1.0",
61
- "@xylabs/tsconfig-react": "~7.1.0",
57
+ "@types/react": "~19.1.10",
58
+ "@xylabs/ts-scripts-yarn3": "~7.1.2",
59
+ "@xylabs/tsconfig": "~7.1.2",
60
+ "@xylabs/tsconfig-dom": "~7.1.2",
61
+ "@xylabs/tsconfig-react": "~7.1.2",
62
62
  "react": "~19.1.1",
63
63
  "react-dom": "~19.1.1",
64
64
  "typescript": "~5.9.2"