@visactor/vchart-theme-demo-component 0.0.1-alpha.2 → 0.0.1-alpha.4

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,3 +1,4 @@
1
1
  import React from 'react';
2
+ import './style/style';
2
3
  declare const Frame: () => React.JSX.Element;
3
4
  export default Frame;
@@ -10,37 +10,41 @@ Object.defineProperty(exports, "__esModule", {
10
10
  value: !0
11
11
  });
12
12
 
13
- const react_1 = __importDefault(require("react")), semi_ui_1 = require("@douyinfe/semi-ui"), semi_icons_1 = require("@douyinfe/semi-icons"), index_module_less_1 = __importDefault(require("./index.module.less")), charts_jsx_1 = __importDefault(require("./charts.jsx")), Frame = () => react_1.default.createElement("div", {
14
- className: index_module_less_1.default.rootSidenav
13
+ const react_1 = __importDefault(require("react")), semi_ui_1 = require("@douyinfe/semi-ui"), semi_icons_1 = require("@douyinfe/semi-icons");
14
+
15
+ require("./style/style");
16
+
17
+ const charts_jsx_1 = __importDefault(require("./charts.jsx")), Frame = () => react_1.default.createElement("div", {
18
+ className: "rootSidenav"
15
19
  }, react_1.default.createElement(semi_ui_1.Nav, {
16
20
  mode: "horizontal",
17
21
  header: {
18
22
  text: "ChartHub Templates"
19
23
  },
20
24
  footer: react_1.default.createElement("div", {
21
- className: index_module_less_1.default.dIV
25
+ className: "dIV"
22
26
  }, react_1.default.createElement(semi_icons_1.IconFeishuLogo, {
23
27
  size: "large",
24
- className: index_module_less_1.default.semiIconsFeishuLogo
28
+ className: "semiIconsFeishuLogo"
25
29
  }), react_1.default.createElement(semi_icons_1.IconHelpCircle, {
26
30
  size: "large",
27
- className: index_module_less_1.default.semiIconsHelpCircle
31
+ className: "semiIconsHelpCircle"
28
32
  }), react_1.default.createElement(semi_icons_1.IconBell, {
29
33
  size: "large",
30
- className: index_module_less_1.default.semiIconsBell
34
+ className: "semiIconsBell"
31
35
  }), react_1.default.createElement(semi_ui_1.Avatar, {
32
36
  size: "small",
33
37
  src: "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg",
34
38
  color: "blue",
35
- className: index_module_less_1.default.avatar
39
+ className: "avatar"
36
40
  }, "示例")),
37
- className: index_module_less_1.default.nav
41
+ className: "nav"
38
42
  }), react_1.default.createElement("div", {
39
- className: index_module_less_1.default.main
43
+ className: "main"
40
44
  }, react_1.default.createElement("div", {
41
- className: index_module_less_1.default.right
45
+ className: "right"
42
46
  }, react_1.default.createElement("div", {
43
- className: index_module_less_1.default.frame1321317607
47
+ className: "frame1321317607"
44
48
  }, react_1.default.createElement(charts_jsx_1.default, null)))));
45
49
 
46
50
  exports.default = Frame;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,+CAAgD;AAChD,qDAAgF;AAChF,4EAAyC;AACzC,8DAAkC;AAElC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,CACL,uCAAK,SAAS,EAAE,2BAAM,CAAC,WAAW;QAChC,8BAAC,aAAG,IACF,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;aAC3B,EACD,MAAM,EACJ,uCAAK,SAAS,EAAE,2BAAM,CAAC,GAAG;gBACxB,8BAAC,2BAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,2BAAM,CAAC,mBAAmB,GAAI;gBACtE,8BAAC,2BAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,2BAAM,CAAC,mBAAmB,GAAI;gBACtE,8BAAC,qBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,2BAAM,CAAC,aAAa,GAAI;gBAC1D,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,8GAA8G,EAClH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,2BAAM,CAAC,MAAM,mBAGjB,CACL,EAER,SAAS,EAAE,2BAAM,CAAC,GAAG,GAChB;QACP,uCAAK,SAAS,EAAE,2BAAM,CAAC,IAAI;YACzB,uCAAK,SAAS,EAAE,2BAAM,CAAC,KAAK;gBAC1B,uCAAK,SAAS,EAAE,2BAAM,CAAC,eAAe;oBACpC,8BAAC,oBAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","file":"frame.js","sourcesContent":["import React from 'react';\nimport { Nav, Avatar } from '@douyinfe/semi-ui';\nimport { IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';\nimport styles from './index.module.less';\nimport Charts from './charts.jsx';\n\nconst Frame = () => {\n return (\n <div className={styles.rootSidenav}>\n <Nav\n mode=\"horizontal\"\n header={{\n text: 'ChartHub Templates'\n }}\n footer={\n <div className={styles.dIV}>\n <IconFeishuLogo size=\"large\" className={styles.semiIconsFeishuLogo} />\n <IconHelpCircle size=\"large\" className={styles.semiIconsHelpCircle} />\n <IconBell size=\"large\" className={styles.semiIconsBell} />\n <Avatar\n size=\"small\"\n src=\"https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg\"\n color=\"blue\"\n className={styles.avatar}\n >\n 示例\n </Avatar>\n </div>\n }\n className={styles.nav}\n ></Nav>\n <div className={styles.main}>\n <div className={styles.right}>\n <div className={styles.frame1321317607}>\n <Charts />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Frame;\n"]}
1
+ {"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,+CAAgD;AAChD,qDAAgF;AAChF,yBAAuB;AACvB,8DAAkC;AAElC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,CACL,uCAAK,SAAS,EAAC,aAAa;QAC1B,8BAAC,aAAG,IACF,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;aAC3B,EACD,MAAM,EACJ,uCAAK,SAAS,EAAC,KAAK;gBAClB,8BAAC,2BAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,8BAAC,2BAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,8BAAC,qBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,GAAG;gBACnD,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,8GAA8G,EAClH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,QAAQ,mBAGX,CACL,EAER,SAAS,EAAC,KAAK,GACV;QACP,uCAAK,SAAS,EAAC,MAAM;YACnB,uCAAK,SAAS,EAAC,OAAO;gBACpB,uCAAK,SAAS,EAAC,iBAAiB;oBAC9B,8BAAC,oBAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","file":"frame.js","sourcesContent":["import React from 'react';\nimport { Nav, Avatar } from '@douyinfe/semi-ui';\nimport { IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';\nimport './style/style';\nimport Charts from './charts.jsx';\n\nconst Frame = () => {\n return (\n <div className=\"rootSidenav\">\n <Nav\n mode=\"horizontal\"\n header={{\n text: 'ChartHub Templates'\n }}\n footer={\n <div className=\"dIV\">\n <IconFeishuLogo size=\"large\" className=\"semiIconsFeishuLogo\" />\n <IconHelpCircle size=\"large\" className=\"semiIconsHelpCircle\" />\n <IconBell size=\"large\" className=\"semiIconsBell\" />\n <Avatar\n size=\"small\"\n src=\"https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg\"\n color=\"blue\"\n className=\"avatar\"\n >\n 示例\n </Avatar>\n </div>\n }\n className=\"nav\"\n ></Nav>\n <div className=\"main\">\n <div className=\"right\">\n <div className=\"frame1321317607\">\n <Charts />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Frame;\n"]}
@@ -0,0 +1,129 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+
16
+ .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+
20
+ .navigationHeaderLogo {
21
+ align-items: flex-start;
22
+ column-gap: 0;
23
+ display: inline-flex;
24
+ flex-shrink: 0;
25
+
26
+ .semiIconsSemiLogo {
27
+ font-size: 36px;
28
+ color: var(--semi-color-text-0);
29
+ }
30
+ }
31
+
32
+ .dIV {
33
+ align-items: center;
34
+ column-gap: 16px;
35
+ display: inline-flex;
36
+ flex-shrink: 0;
37
+
38
+ .semiIconsFeishuLogo,
39
+ .semiIconsHelpCircle,
40
+ .semiIconsBell {
41
+ font-size: 20px;
42
+ color: var(--semi-color-text-2);
43
+ }
44
+
45
+ .avatar {
46
+ height: 32px;
47
+ width: 32px;
48
+ }
49
+ }
50
+ }
51
+
52
+ .main {
53
+ align-items: flex-start;
54
+ column-gap: 0;
55
+ display: flex;
56
+ flex-shrink: 0;
57
+ align-self: stretch;
58
+
59
+ .left {
60
+ height: calc(100vh - 60px);
61
+
62
+ .navItem,
63
+ .navItem5 {
64
+ width: 223px;
65
+
66
+ .iconIntro,
67
+ .iconRadio {
68
+ height: 20px;
69
+ position: relative;
70
+ width: 20px;
71
+ }
72
+ }
73
+
74
+ .navItem1,
75
+ .navItem2,
76
+ .navItem3,
77
+ .navItem4,
78
+ .navItem6,
79
+ .navItem7 {
80
+ width: 223px;
81
+
82
+ .iconHeart,
83
+ .iconCalendar,
84
+ .iconCheckbox,
85
+ .iconCalendar,
86
+ .iconList,
87
+ .iconToast {
88
+ height: 20px;
89
+ width: 20px;
90
+ }
91
+ }
92
+ }
93
+
94
+ .right {
95
+ height: calc(100vh - 60px);
96
+ overflow-y: auto;
97
+ align-items: flex-start;
98
+ display: flex;
99
+ flex-basis: 0;
100
+ flex-direction: column;
101
+ padding: 40px;
102
+ row-gap: 24px;
103
+ flex-grow: 1;
104
+
105
+ .item {
106
+ min-width: 90px;
107
+ vertical-align: middle;
108
+ flex-shrink: 0;
109
+ }
110
+
111
+ .frame1321317607 {
112
+ align-items: center;
113
+ border-radius: 12px;
114
+ display: flex;
115
+ flex-direction: row;
116
+ flex-shrink: 0;
117
+ color: var(--semi-color-disabled-text);
118
+ font-size: 14px;
119
+ letter-spacing: -0.14px;
120
+ line-height: 20px;
121
+
122
+ .yourContentHere {
123
+ vertical-align: middle;
124
+ min-width: 123px;
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
@@ -0,0 +1,148 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+ }
16
+ .rootSidenav .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+ }
20
+ .rootSidenav .nav .navigationHeaderLogo {
21
+ align-items: flex-start;
22
+ -moz-column-gap: 0;
23
+ column-gap: 0;
24
+ display: inline-flex;
25
+ flex-shrink: 0;
26
+ }
27
+ .rootSidenav .nav .navigationHeaderLogo .semiIconsSemiLogo {
28
+ font-size: 36px;
29
+ color: var(--semi-color-text-0);
30
+ }
31
+ .rootSidenav .nav .dIV {
32
+ align-items: center;
33
+ -moz-column-gap: 16px;
34
+ column-gap: 16px;
35
+ display: inline-flex;
36
+ flex-shrink: 0;
37
+ }
38
+ .rootSidenav .nav .dIV .semiIconsFeishuLogo,
39
+ .rootSidenav .nav .dIV .semiIconsHelpCircle,
40
+ .rootSidenav .nav .dIV .semiIconsBell {
41
+ font-size: 20px;
42
+ color: var(--semi-color-text-2);
43
+ }
44
+ .rootSidenav .nav .dIV .avatar {
45
+ height: 32px;
46
+ width: 32px;
47
+ }
48
+ .rootSidenav .main {
49
+ align-items: flex-start;
50
+ -moz-column-gap: 0;
51
+ column-gap: 0;
52
+ display: flex;
53
+ flex-shrink: 0;
54
+ align-self: stretch;
55
+ }
56
+ .rootSidenav .main .left {
57
+ height: calc(100vh - 60px);
58
+ }
59
+ .rootSidenav .main .left .navItem,
60
+ .rootSidenav .main .left .navItem5 {
61
+ width: 223px;
62
+ }
63
+ .rootSidenav .main .left .navItem .iconIntro,
64
+ .rootSidenav .main .left .navItem5 .iconIntro,
65
+ .rootSidenav .main .left .navItem .iconRadio,
66
+ .rootSidenav .main .left .navItem5 .iconRadio {
67
+ height: 20px;
68
+ position: relative;
69
+ width: 20px;
70
+ }
71
+ .rootSidenav .main .left .navItem1,
72
+ .rootSidenav .main .left .navItem2,
73
+ .rootSidenav .main .left .navItem3,
74
+ .rootSidenav .main .left .navItem4,
75
+ .rootSidenav .main .left .navItem6,
76
+ .rootSidenav .main .left .navItem7 {
77
+ width: 223px;
78
+ }
79
+ .rootSidenav .main .left .navItem1 .iconHeart,
80
+ .rootSidenav .main .left .navItem2 .iconHeart,
81
+ .rootSidenav .main .left .navItem3 .iconHeart,
82
+ .rootSidenav .main .left .navItem4 .iconHeart,
83
+ .rootSidenav .main .left .navItem6 .iconHeart,
84
+ .rootSidenav .main .left .navItem7 .iconHeart,
85
+ .rootSidenav .main .left .navItem1 .iconCalendar,
86
+ .rootSidenav .main .left .navItem2 .iconCalendar,
87
+ .rootSidenav .main .left .navItem3 .iconCalendar,
88
+ .rootSidenav .main .left .navItem4 .iconCalendar,
89
+ .rootSidenav .main .left .navItem6 .iconCalendar,
90
+ .rootSidenav .main .left .navItem7 .iconCalendar,
91
+ .rootSidenav .main .left .navItem1 .iconCheckbox,
92
+ .rootSidenav .main .left .navItem2 .iconCheckbox,
93
+ .rootSidenav .main .left .navItem3 .iconCheckbox,
94
+ .rootSidenav .main .left .navItem4 .iconCheckbox,
95
+ .rootSidenav .main .left .navItem6 .iconCheckbox,
96
+ .rootSidenav .main .left .navItem7 .iconCheckbox,
97
+ .rootSidenav .main .left .navItem1 .iconCalendar,
98
+ .rootSidenav .main .left .navItem2 .iconCalendar,
99
+ .rootSidenav .main .left .navItem3 .iconCalendar,
100
+ .rootSidenav .main .left .navItem4 .iconCalendar,
101
+ .rootSidenav .main .left .navItem6 .iconCalendar,
102
+ .rootSidenav .main .left .navItem7 .iconCalendar,
103
+ .rootSidenav .main .left .navItem1 .iconList,
104
+ .rootSidenav .main .left .navItem2 .iconList,
105
+ .rootSidenav .main .left .navItem3 .iconList,
106
+ .rootSidenav .main .left .navItem4 .iconList,
107
+ .rootSidenav .main .left .navItem6 .iconList,
108
+ .rootSidenav .main .left .navItem7 .iconList,
109
+ .rootSidenav .main .left .navItem1 .iconToast,
110
+ .rootSidenav .main .left .navItem2 .iconToast,
111
+ .rootSidenav .main .left .navItem3 .iconToast,
112
+ .rootSidenav .main .left .navItem4 .iconToast,
113
+ .rootSidenav .main .left .navItem6 .iconToast,
114
+ .rootSidenav .main .left .navItem7 .iconToast {
115
+ height: 20px;
116
+ width: 20px;
117
+ }
118
+ .rootSidenav .main .right {
119
+ height: calc(100vh - 60px);
120
+ overflow-y: auto;
121
+ align-items: flex-start;
122
+ display: flex;
123
+ flex-basis: 0;
124
+ flex-direction: column;
125
+ padding: 40px;
126
+ row-gap: 24px;
127
+ flex-grow: 1;
128
+ }
129
+ .rootSidenav .main .right .item {
130
+ min-width: 90px;
131
+ vertical-align: middle;
132
+ flex-shrink: 0;
133
+ }
134
+ .rootSidenav .main .right .frame1321317607 {
135
+ align-items: center;
136
+ border-radius: 12px;
137
+ display: flex;
138
+ flex-direction: row;
139
+ flex-shrink: 0;
140
+ color: var(--semi-color-disabled-text);
141
+ font-size: 14px;
142
+ letter-spacing: -0.14px;
143
+ line-height: 20px;
144
+ }
145
+ .rootSidenav .main .right .frame1321317607 .yourContentHere {
146
+ vertical-align: middle;
147
+ min-width: 123px;
148
+ }
@@ -0,0 +1 @@
1
+ import './style.less';
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: !0
5
+ }), require("./style.css");
6
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/vchart-chart-hub-theme/style/style.ts"],"names":[],"mappings":";;AAAA,wBAAsB","file":"style.js","sourcesContent":["import './style.less';\n"]}
@@ -0,0 +1,113 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+ .nav {
16
+ align-self: stretch;
17
+ height: 60px;
18
+ .navigationHeaderLogo {
19
+ align-items: flex-start;
20
+ column-gap: 0;
21
+ display: inline-flex;
22
+ flex-shrink: 0;
23
+ .semiIconsSemiLogo {
24
+ font-size: 36px;
25
+ color: var(--semi-color-text-0);
26
+ }
27
+ }
28
+ .dIV {
29
+ align-items: center;
30
+ column-gap: 16px;
31
+ display: inline-flex;
32
+ flex-shrink: 0;
33
+ .semiIconsFeishuLogo,
34
+ .semiIconsHelpCircle,
35
+ .semiIconsBell {
36
+ font-size: 20px;
37
+ color: var(--semi-color-text-2);
38
+ }
39
+ .avatar {
40
+ height: 32px;
41
+ width: 32px;
42
+ }
43
+ }
44
+ }
45
+ .main {
46
+ align-items: flex-start;
47
+ column-gap: 0;
48
+ display: flex;
49
+ flex-shrink: 0;
50
+ align-self: stretch;
51
+ .left {
52
+ height: calc(100vh - 60px);
53
+ .navItem,
54
+ .navItem5 {
55
+ width: 223px;
56
+ .iconIntro,
57
+ .iconRadio {
58
+ height: 20px;
59
+ position: relative;
60
+ width: 20px;
61
+ }
62
+ }
63
+ .navItem1,
64
+ .navItem2,
65
+ .navItem3,
66
+ .navItem4,
67
+ .navItem6,
68
+ .navItem7 {
69
+ width: 223px;
70
+ .iconHeart,
71
+ .iconCalendar,
72
+ .iconCheckbox,
73
+ .iconCalendar,
74
+ .iconList,
75
+ .iconToast {
76
+ height: 20px;
77
+ width: 20px;
78
+ }
79
+ }
80
+ }
81
+ .right {
82
+ height: calc(100vh - 60px);
83
+ overflow-y: auto;
84
+ align-items: flex-start;
85
+ display: flex;
86
+ flex-basis: 0;
87
+ flex-direction: column;
88
+ padding: 40px;
89
+ row-gap: 24px;
90
+ flex-grow: 1;
91
+ .item {
92
+ min-width: 90px;
93
+ vertical-align: middle;
94
+ flex-shrink: 0;
95
+ }
96
+ .frame1321317607 {
97
+ align-items: center;
98
+ border-radius: 12px;
99
+ display: flex;
100
+ flex-direction: row;
101
+ flex-shrink: 0;
102
+ color: var(--semi-color-disabled-text);
103
+ font-size: 14px;
104
+ letter-spacing: -0.14px;
105
+ line-height: 20px;
106
+ .yourContentHere {
107
+ vertical-align: middle;
108
+ min-width: 123px;
109
+ }
110
+ }
111
+ }
112
+ }
113
+ }
@@ -1,3 +1,4 @@
1
1
  import React from 'react';
2
+ import './style/style';
2
3
  declare const Frame: () => React.JSX.Element;
3
4
  export default Frame;
@@ -4,41 +4,41 @@ import { Nav, Avatar } from "@douyinfe/semi-ui";
4
4
 
5
5
  import { IconFeishuLogo, IconHelpCircle, IconBell } from "@douyinfe/semi-icons";
6
6
 
7
- import styles from "./index.module.less";
7
+ import "./style/style";
8
8
 
9
9
  import Charts from "./charts.jsx";
10
10
 
11
11
  const Frame = () => React.createElement("div", {
12
- className: styles.rootSidenav
12
+ className: "rootSidenav"
13
13
  }, React.createElement(Nav, {
14
14
  mode: "horizontal",
15
15
  header: {
16
16
  text: "ChartHub Templates"
17
17
  },
18
18
  footer: React.createElement("div", {
19
- className: styles.dIV
19
+ className: "dIV"
20
20
  }, React.createElement(IconFeishuLogo, {
21
21
  size: "large",
22
- className: styles.semiIconsFeishuLogo
22
+ className: "semiIconsFeishuLogo"
23
23
  }), React.createElement(IconHelpCircle, {
24
24
  size: "large",
25
- className: styles.semiIconsHelpCircle
25
+ className: "semiIconsHelpCircle"
26
26
  }), React.createElement(IconBell, {
27
27
  size: "large",
28
- className: styles.semiIconsBell
28
+ className: "semiIconsBell"
29
29
  }), React.createElement(Avatar, {
30
30
  size: "small",
31
31
  src: "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg",
32
32
  color: "blue",
33
- className: styles.avatar
33
+ className: "avatar"
34
34
  }, "示例")),
35
- className: styles.nav
35
+ className: "nav"
36
36
  }), React.createElement("div", {
37
- className: styles.main
37
+ className: "main"
38
38
  }, React.createElement("div", {
39
- className: styles.right
39
+ className: "right"
40
40
  }, React.createElement("div", {
41
- className: styles.frame1321317607
41
+ className: "frame1321317607"
42
42
  }, React.createElement(Charts, null)))));
43
43
 
44
44
  export default Frame;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW;QAChC,oBAAC,GAAG,IACF,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;aAC3B,EACD,MAAM,EACJ,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACxB,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,mBAAmB,GAAI;gBACtE,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,mBAAmB,GAAI;gBACtE,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI;gBAC1D,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,8GAA8G,EAClH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,MAAM,CAAC,MAAM,mBAGjB,CACL,EAER,SAAS,EAAE,MAAM,CAAC,GAAG,GAChB;QACP,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACzB,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;gBAC1B,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe;oBACpC,oBAAC,MAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","file":"frame.js","sourcesContent":["import React from 'react';\nimport { Nav, Avatar } from '@douyinfe/semi-ui';\nimport { IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';\nimport styles from './index.module.less';\nimport Charts from './charts.jsx';\n\nconst Frame = () => {\n return (\n <div className={styles.rootSidenav}>\n <Nav\n mode=\"horizontal\"\n header={{\n text: 'ChartHub Templates'\n }}\n footer={\n <div className={styles.dIV}>\n <IconFeishuLogo size=\"large\" className={styles.semiIconsFeishuLogo} />\n <IconHelpCircle size=\"large\" className={styles.semiIconsHelpCircle} />\n <IconBell size=\"large\" className={styles.semiIconsBell} />\n <Avatar\n size=\"small\"\n src=\"https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg\"\n color=\"blue\"\n className={styles.avatar}\n >\n 示例\n </Avatar>\n </div>\n }\n className={styles.nav}\n ></Nav>\n <div className={styles.main}>\n <div className={styles.right}>\n <div className={styles.frame1321317607}>\n <Charts />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Frame;\n"]}
1
+ {"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,eAAe,CAAC;AACvB,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,CACL,6BAAK,SAAS,EAAC,aAAa;QAC1B,oBAAC,GAAG,IACF,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;aAC3B,EACD,MAAM,EACJ,6BAAK,SAAS,EAAC,KAAK;gBAClB,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,GAAG;gBACnD,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,8GAA8G,EAClH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,QAAQ,mBAGX,CACL,EAER,SAAS,EAAC,KAAK,GACV;QACP,6BAAK,SAAS,EAAC,MAAM;YACnB,6BAAK,SAAS,EAAC,OAAO;gBACpB,6BAAK,SAAS,EAAC,iBAAiB;oBAC9B,oBAAC,MAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","file":"frame.js","sourcesContent":["import React from 'react';\nimport { Nav, Avatar } from '@douyinfe/semi-ui';\nimport { IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';\nimport './style/style';\nimport Charts from './charts.jsx';\n\nconst Frame = () => {\n return (\n <div className=\"rootSidenav\">\n <Nav\n mode=\"horizontal\"\n header={{\n text: 'ChartHub Templates'\n }}\n footer={\n <div className=\"dIV\">\n <IconFeishuLogo size=\"large\" className=\"semiIconsFeishuLogo\" />\n <IconHelpCircle size=\"large\" className=\"semiIconsHelpCircle\" />\n <IconBell size=\"large\" className=\"semiIconsBell\" />\n <Avatar\n size=\"small\"\n src=\"https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg\"\n color=\"blue\"\n className=\"avatar\"\n >\n 示例\n </Avatar>\n </div>\n }\n className=\"nav\"\n ></Nav>\n <div className=\"main\">\n <div className=\"right\">\n <div className=\"frame1321317607\">\n <Charts />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Frame;\n"]}
@@ -0,0 +1,129 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+
16
+ .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+
20
+ .navigationHeaderLogo {
21
+ align-items: flex-start;
22
+ column-gap: 0;
23
+ display: inline-flex;
24
+ flex-shrink: 0;
25
+
26
+ .semiIconsSemiLogo {
27
+ font-size: 36px;
28
+ color: var(--semi-color-text-0);
29
+ }
30
+ }
31
+
32
+ .dIV {
33
+ align-items: center;
34
+ column-gap: 16px;
35
+ display: inline-flex;
36
+ flex-shrink: 0;
37
+
38
+ .semiIconsFeishuLogo,
39
+ .semiIconsHelpCircle,
40
+ .semiIconsBell {
41
+ font-size: 20px;
42
+ color: var(--semi-color-text-2);
43
+ }
44
+
45
+ .avatar {
46
+ height: 32px;
47
+ width: 32px;
48
+ }
49
+ }
50
+ }
51
+
52
+ .main {
53
+ align-items: flex-start;
54
+ column-gap: 0;
55
+ display: flex;
56
+ flex-shrink: 0;
57
+ align-self: stretch;
58
+
59
+ .left {
60
+ height: calc(100vh - 60px);
61
+
62
+ .navItem,
63
+ .navItem5 {
64
+ width: 223px;
65
+
66
+ .iconIntro,
67
+ .iconRadio {
68
+ height: 20px;
69
+ position: relative;
70
+ width: 20px;
71
+ }
72
+ }
73
+
74
+ .navItem1,
75
+ .navItem2,
76
+ .navItem3,
77
+ .navItem4,
78
+ .navItem6,
79
+ .navItem7 {
80
+ width: 223px;
81
+
82
+ .iconHeart,
83
+ .iconCalendar,
84
+ .iconCheckbox,
85
+ .iconCalendar,
86
+ .iconList,
87
+ .iconToast {
88
+ height: 20px;
89
+ width: 20px;
90
+ }
91
+ }
92
+ }
93
+
94
+ .right {
95
+ height: calc(100vh - 60px);
96
+ overflow-y: auto;
97
+ align-items: flex-start;
98
+ display: flex;
99
+ flex-basis: 0;
100
+ flex-direction: column;
101
+ padding: 40px;
102
+ row-gap: 24px;
103
+ flex-grow: 1;
104
+
105
+ .item {
106
+ min-width: 90px;
107
+ vertical-align: middle;
108
+ flex-shrink: 0;
109
+ }
110
+
111
+ .frame1321317607 {
112
+ align-items: center;
113
+ border-radius: 12px;
114
+ display: flex;
115
+ flex-direction: row;
116
+ flex-shrink: 0;
117
+ color: var(--semi-color-disabled-text);
118
+ font-size: 14px;
119
+ letter-spacing: -0.14px;
120
+ line-height: 20px;
121
+
122
+ .yourContentHere {
123
+ vertical-align: middle;
124
+ min-width: 123px;
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
@@ -0,0 +1,148 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+ }
16
+ .rootSidenav .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+ }
20
+ .rootSidenav .nav .navigationHeaderLogo {
21
+ align-items: flex-start;
22
+ -moz-column-gap: 0;
23
+ column-gap: 0;
24
+ display: inline-flex;
25
+ flex-shrink: 0;
26
+ }
27
+ .rootSidenav .nav .navigationHeaderLogo .semiIconsSemiLogo {
28
+ font-size: 36px;
29
+ color: var(--semi-color-text-0);
30
+ }
31
+ .rootSidenav .nav .dIV {
32
+ align-items: center;
33
+ -moz-column-gap: 16px;
34
+ column-gap: 16px;
35
+ display: inline-flex;
36
+ flex-shrink: 0;
37
+ }
38
+ .rootSidenav .nav .dIV .semiIconsFeishuLogo,
39
+ .rootSidenav .nav .dIV .semiIconsHelpCircle,
40
+ .rootSidenav .nav .dIV .semiIconsBell {
41
+ font-size: 20px;
42
+ color: var(--semi-color-text-2);
43
+ }
44
+ .rootSidenav .nav .dIV .avatar {
45
+ height: 32px;
46
+ width: 32px;
47
+ }
48
+ .rootSidenav .main {
49
+ align-items: flex-start;
50
+ -moz-column-gap: 0;
51
+ column-gap: 0;
52
+ display: flex;
53
+ flex-shrink: 0;
54
+ align-self: stretch;
55
+ }
56
+ .rootSidenav .main .left {
57
+ height: calc(100vh - 60px);
58
+ }
59
+ .rootSidenav .main .left .navItem,
60
+ .rootSidenav .main .left .navItem5 {
61
+ width: 223px;
62
+ }
63
+ .rootSidenav .main .left .navItem .iconIntro,
64
+ .rootSidenav .main .left .navItem5 .iconIntro,
65
+ .rootSidenav .main .left .navItem .iconRadio,
66
+ .rootSidenav .main .left .navItem5 .iconRadio {
67
+ height: 20px;
68
+ position: relative;
69
+ width: 20px;
70
+ }
71
+ .rootSidenav .main .left .navItem1,
72
+ .rootSidenav .main .left .navItem2,
73
+ .rootSidenav .main .left .navItem3,
74
+ .rootSidenav .main .left .navItem4,
75
+ .rootSidenav .main .left .navItem6,
76
+ .rootSidenav .main .left .navItem7 {
77
+ width: 223px;
78
+ }
79
+ .rootSidenav .main .left .navItem1 .iconHeart,
80
+ .rootSidenav .main .left .navItem2 .iconHeart,
81
+ .rootSidenav .main .left .navItem3 .iconHeart,
82
+ .rootSidenav .main .left .navItem4 .iconHeart,
83
+ .rootSidenav .main .left .navItem6 .iconHeart,
84
+ .rootSidenav .main .left .navItem7 .iconHeart,
85
+ .rootSidenav .main .left .navItem1 .iconCalendar,
86
+ .rootSidenav .main .left .navItem2 .iconCalendar,
87
+ .rootSidenav .main .left .navItem3 .iconCalendar,
88
+ .rootSidenav .main .left .navItem4 .iconCalendar,
89
+ .rootSidenav .main .left .navItem6 .iconCalendar,
90
+ .rootSidenav .main .left .navItem7 .iconCalendar,
91
+ .rootSidenav .main .left .navItem1 .iconCheckbox,
92
+ .rootSidenav .main .left .navItem2 .iconCheckbox,
93
+ .rootSidenav .main .left .navItem3 .iconCheckbox,
94
+ .rootSidenav .main .left .navItem4 .iconCheckbox,
95
+ .rootSidenav .main .left .navItem6 .iconCheckbox,
96
+ .rootSidenav .main .left .navItem7 .iconCheckbox,
97
+ .rootSidenav .main .left .navItem1 .iconCalendar,
98
+ .rootSidenav .main .left .navItem2 .iconCalendar,
99
+ .rootSidenav .main .left .navItem3 .iconCalendar,
100
+ .rootSidenav .main .left .navItem4 .iconCalendar,
101
+ .rootSidenav .main .left .navItem6 .iconCalendar,
102
+ .rootSidenav .main .left .navItem7 .iconCalendar,
103
+ .rootSidenav .main .left .navItem1 .iconList,
104
+ .rootSidenav .main .left .navItem2 .iconList,
105
+ .rootSidenav .main .left .navItem3 .iconList,
106
+ .rootSidenav .main .left .navItem4 .iconList,
107
+ .rootSidenav .main .left .navItem6 .iconList,
108
+ .rootSidenav .main .left .navItem7 .iconList,
109
+ .rootSidenav .main .left .navItem1 .iconToast,
110
+ .rootSidenav .main .left .navItem2 .iconToast,
111
+ .rootSidenav .main .left .navItem3 .iconToast,
112
+ .rootSidenav .main .left .navItem4 .iconToast,
113
+ .rootSidenav .main .left .navItem6 .iconToast,
114
+ .rootSidenav .main .left .navItem7 .iconToast {
115
+ height: 20px;
116
+ width: 20px;
117
+ }
118
+ .rootSidenav .main .right {
119
+ height: calc(100vh - 60px);
120
+ overflow-y: auto;
121
+ align-items: flex-start;
122
+ display: flex;
123
+ flex-basis: 0;
124
+ flex-direction: column;
125
+ padding: 40px;
126
+ row-gap: 24px;
127
+ flex-grow: 1;
128
+ }
129
+ .rootSidenav .main .right .item {
130
+ min-width: 90px;
131
+ vertical-align: middle;
132
+ flex-shrink: 0;
133
+ }
134
+ .rootSidenav .main .right .frame1321317607 {
135
+ align-items: center;
136
+ border-radius: 12px;
137
+ display: flex;
138
+ flex-direction: row;
139
+ flex-shrink: 0;
140
+ color: var(--semi-color-disabled-text);
141
+ font-size: 14px;
142
+ letter-spacing: -0.14px;
143
+ line-height: 20px;
144
+ }
145
+ .rootSidenav .main .right .frame1321317607 .yourContentHere {
146
+ vertical-align: middle;
147
+ min-width: 123px;
148
+ }
@@ -0,0 +1 @@
1
+ import './style.less';
@@ -0,0 +1,2 @@
1
+ import "./style.css";
2
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/vchart-chart-hub-theme/style/style.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC","file":"style.js","sourcesContent":["import './style.less';\n"]}
@@ -0,0 +1,113 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+ .nav {
16
+ align-self: stretch;
17
+ height: 60px;
18
+ .navigationHeaderLogo {
19
+ align-items: flex-start;
20
+ column-gap: 0;
21
+ display: inline-flex;
22
+ flex-shrink: 0;
23
+ .semiIconsSemiLogo {
24
+ font-size: 36px;
25
+ color: var(--semi-color-text-0);
26
+ }
27
+ }
28
+ .dIV {
29
+ align-items: center;
30
+ column-gap: 16px;
31
+ display: inline-flex;
32
+ flex-shrink: 0;
33
+ .semiIconsFeishuLogo,
34
+ .semiIconsHelpCircle,
35
+ .semiIconsBell {
36
+ font-size: 20px;
37
+ color: var(--semi-color-text-2);
38
+ }
39
+ .avatar {
40
+ height: 32px;
41
+ width: 32px;
42
+ }
43
+ }
44
+ }
45
+ .main {
46
+ align-items: flex-start;
47
+ column-gap: 0;
48
+ display: flex;
49
+ flex-shrink: 0;
50
+ align-self: stretch;
51
+ .left {
52
+ height: calc(100vh - 60px);
53
+ .navItem,
54
+ .navItem5 {
55
+ width: 223px;
56
+ .iconIntro,
57
+ .iconRadio {
58
+ height: 20px;
59
+ position: relative;
60
+ width: 20px;
61
+ }
62
+ }
63
+ .navItem1,
64
+ .navItem2,
65
+ .navItem3,
66
+ .navItem4,
67
+ .navItem6,
68
+ .navItem7 {
69
+ width: 223px;
70
+ .iconHeart,
71
+ .iconCalendar,
72
+ .iconCheckbox,
73
+ .iconCalendar,
74
+ .iconList,
75
+ .iconToast {
76
+ height: 20px;
77
+ width: 20px;
78
+ }
79
+ }
80
+ }
81
+ .right {
82
+ height: calc(100vh - 60px);
83
+ overflow-y: auto;
84
+ align-items: flex-start;
85
+ display: flex;
86
+ flex-basis: 0;
87
+ flex-direction: column;
88
+ padding: 40px;
89
+ row-gap: 24px;
90
+ flex-grow: 1;
91
+ .item {
92
+ min-width: 90px;
93
+ vertical-align: middle;
94
+ flex-shrink: 0;
95
+ }
96
+ .frame1321317607 {
97
+ align-items: center;
98
+ border-radius: 12px;
99
+ display: flex;
100
+ flex-direction: row;
101
+ flex-shrink: 0;
102
+ color: var(--semi-color-disabled-text);
103
+ font-size: 14px;
104
+ letter-spacing: -0.14px;
105
+ line-height: 20px;
106
+ .yourContentHere {
107
+ vertical-align: middle;
108
+ min-width: 123px;
109
+ }
110
+ }
111
+ }
112
+ }
113
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@visactor/vchart-theme-demo-component",
3
- "version": "0.0.1-alpha.2",
3
+ "version": "0.0.1-alpha.4",
4
4
  "description": "theme demo page in vchart site",
5
5
  "sideEffects": false,
6
6
  "main": "cjs/index.js",
@@ -13,7 +13,7 @@
13
13
  "scripts": {
14
14
  "compile": "tsc --noEmit",
15
15
  "eslint": "eslint --debug --fix src/",
16
- "build": "bundle",
16
+ "build": "bundle --clean --less true",
17
17
  "dev": "bundle --clean -f es -w",
18
18
  "start": "vite ./vite",
19
19
  "start1": "vite ./vite1",
@@ -24,11 +24,15 @@
24
24
  "@douyinfe/semi-icons": "latest",
25
25
  "@douyinfe/semi-icons-lab": "latest",
26
26
  "@arco-design/web-react": "^2.32.2",
27
- "@visactor/vchart-theme-utils": "1.11.0",
28
- "@visactor/vchart-theme": "1.11.0",
27
+ "@visactor/vchart-theme-utils": "1.11.1-alpha.2",
28
+ "@visactor/vchart-theme": "1.11.1-alpha.2",
29
29
  "@visactor/vchart": "1.11.0",
30
30
  "@visactor/react-vchart": "1.11.0"
31
31
  },
32
+ "peerDependencies": {
33
+ "react": ">=16.0.0",
34
+ "react-dom": ">=16.0.0"
35
+ },
32
36
  "devDependencies": {
33
37
  "@rushstack/eslint-patch": "~1.1.4",
34
38
  "react": "^18.0.0",