@xyo-network/react-chain-shared 1.8.4 → 1.10.0

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.
@@ -1,35 +1,41 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
-
4
1
  // src/components/menu-item/ActiveMenuItem.tsx
5
- import { MenuItem, styled, useTheme } from "@mui/material";
6
- import React from "react";
7
- var ActiveMenuItem = /* @__PURE__ */ __name(({ active, children, sx, ...props }) => {
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
+ }) => {
8
14
  const theme = useTheme();
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"
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
24
32
  },
25
- ...sx
26
- },
27
- ...props
28
- }, children);
29
- }, "ActiveMenuItem");
30
- var StyledMenuItem = styled(MenuItem, {
31
- name: "StyledMenuItem"
32
- })(({ theme }) => ({
33
+ ...props,
34
+ children
35
+ }
36
+ );
37
+ };
38
+ var StyledMenuItem = styled(MenuItem, { name: "StyledMenuItem" })(({ theme }) => ({
33
39
  display: "flex-inline",
34
40
  flexDirection: "row",
35
41
  gap: theme.spacing(1),
@@ -39,38 +45,48 @@ var StyledMenuItem = styled(MenuItem, {
39
45
  }));
40
46
 
41
47
  // src/components/stack/DetailsStack.tsx
42
- import { Stack, styled as styled2, Tooltip, Typography, useTheme as useTheme2 } from "@mui/material";
48
+ import {
49
+ Stack,
50
+ styled as styled2,
51
+ Tooltip,
52
+ Typography,
53
+ useTheme as useTheme2
54
+ } from "@mui/material";
43
55
  import { isDefined } from "@xylabs/typeof";
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 }) => {
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
+ }) => {
47
66
  const theme = useTheme2();
48
67
  const hasTooltip = isDefined(tooltipTitle);
49
68
  const resolvedIconComponent = useMemo(() => {
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)
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
+ }
56
78
  }
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 }) => ({
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 }) => ({
74
90
  display: "flex",
75
91
  fontFamily: "monospace",
76
92
  lineHeight: 1,
@@ -78,51 +94,62 @@ var SectionHeadingTypography = styled2(Typography, {
78
94
  }));
79
95
 
80
96
  // src/components/stack/LabelValueStack.tsx
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 }) => {
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
+ }) => {
84
108
  const theme = useTheme3();
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");
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
+ };
113
140
 
114
141
  // src/story/buildRandomBlockchain.ts
115
142
  import { Account } from "@xyo-network/account";
116
143
  import { buildRandomChain } from "@xyo-network/chain-protocol";
117
- var buildRandomBlockChain = /* @__PURE__ */ __name(async (blockCount = 10) => {
144
+ var buildRandomBlockChain = async (blockCount = 10) => {
118
145
  const initialBlockProducer = await Account.random();
119
146
  const blocks = await buildRandomChain(initialBlockProducer, blockCount);
120
147
  return blocks;
121
- }, "buildRandomBlockChain");
122
- var buildRandomBlockChainBlocksOnly = /* @__PURE__ */ __name(async (blockCount = 10) => {
148
+ };
149
+ var buildRandomBlockChainBlocksOnly = async (blockCount = 10) => {
123
150
  const chain = await buildRandomChain(await Account.random(), blockCount);
124
151
  return chain;
125
- }, "buildRandomBlockChainBlocksOnly");
152
+ };
126
153
  export {
127
154
  ActiveMenuItem,
128
155
  DetailsStack,
@@ -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":["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"]}
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"]}
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.8.4",
4
+ "version": "1.10.0",
5
5
  "description": "XYO Layer One React SDK",
6
6
  "homepage": "https://xylabs.com",
7
7
  "bugs": {
@@ -45,30 +45,31 @@
45
45
  "start": "storybook dev -p 6006"
46
46
  },
47
47
  "dependencies": {
48
- "@xylabs/typeof": "^4.15.3",
49
- "@xyo-network/account": "^4.3.0",
50
- "@xyo-network/chain-protocol": "^1.8.4",
51
- "@xyo-network/xl1-protocol": "^1.7.33"
48
+ "@xylabs/typeof": "~5.0.2",
49
+ "@xyo-network/account": "~5.0.0",
50
+ "@xyo-network/chain-protocol": "~1.10.0",
51
+ "@xyo-network/xl1-protocol": "~1.9.3"
52
52
  },
53
53
  "devDependencies": {
54
- "@emotion/react": "^11.14.0",
55
- "@emotion/styled": "^11.14.1",
56
- "@mui/material": "^7.2.0",
57
- "@types/react": "^19.1.9",
58
- "@xylabs/ts-scripts-yarn3": "^7.0.2",
59
- "@xylabs/tsconfig-react": "^7.0.2",
60
- "knip": "^5.62.0",
61
- "react": "^19.1.1",
62
- "react-dom": "^19.1.1",
63
- "typescript": "^5.8.3"
54
+ "@emotion/react": "~11.14.0",
55
+ "@emotion/styled": "~11.14.1",
56
+ "@mui/material": "~7.3.0",
57
+ "@types/react": "~19.1.9",
58
+ "@xylabs/ts-scripts-yarn3": "~7.0.3",
59
+ "@xylabs/tsconfig": "~7.0.3",
60
+ "@xylabs/tsconfig-dom": "~7.0.3",
61
+ "@xylabs/tsconfig-react": "~7.0.3",
62
+ "react": "~19.1.1",
63
+ "react-dom": "~19.1.1",
64
+ "typescript": "~5.9.2"
64
65
  },
65
66
  "peerDependencies": {
66
- "@emotion/react": "^11",
67
- "@emotion/styled": "^11",
67
+ "@emotion/react": "~11",
68
+ "@emotion/styled": "~11",
68
69
  "@mui/icons-material": ">=6 <8",
69
70
  "@mui/material": ">=6 <8",
70
- "react": "^19",
71
- "react-dom": "^19"
71
+ "react": "~19",
72
+ "react-dom": "~19"
72
73
  },
73
74
  "engines": {
74
75
  "node": ">=22.3 <23"