@yakad/ui 1.2.75-beta → 1.2.77-beta

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 (98) hide show
  1. package/appBar/appBar.d.ts +3 -3
  2. package/appBar/appBar.js +8 -8
  3. package/appBar/appBar.module.css +15 -15
  4. package/appBar/appBar.tsx +15 -15
  5. package/button/button.d.ts +13 -13
  6. package/button/button.js +27 -27
  7. package/button/button.module.css +170 -170
  8. package/button/button.tsx +87 -87
  9. package/card/card.d.ts +3 -3
  10. package/card/card.js +8 -8
  11. package/card/card.module.css +11 -11
  12. package/card/card.tsx +15 -15
  13. package/clickAwayListener/clickAwayListener.d.ts +6 -6
  14. package/clickAwayListener/clickAwayListener.js +16 -16
  15. package/clickAwayListener/clickAwayListener.tsx +27 -27
  16. package/codeField/codeField.d.ts +8 -8
  17. package/codeField/codeField.js +9 -9
  18. package/codeField/codeField.module.css +23 -23
  19. package/codeField/codeField.tsx +32 -32
  20. package/container/container.d.ts +8 -8
  21. package/container/container.js +8 -8
  22. package/container/container.module.css +24 -24
  23. package/container/container.tsx +27 -27
  24. package/declarations.d.ts +1 -1
  25. package/footer/footer.d.ts +3 -3
  26. package/footer/footer.js +8 -8
  27. package/footer/footer.module.css +9 -9
  28. package/footer/footer.tsx +15 -15
  29. package/form/form.d.ts +3 -3
  30. package/form/form.js +11 -11
  31. package/form/form.module.css +6 -6
  32. package/form/form.tsx +23 -23
  33. package/gridContainer/gridContainer.d.ts +7 -7
  34. package/gridContainer/gridContainer.js +10 -10
  35. package/gridContainer/gridContainer.module.css +6 -5
  36. package/gridContainer/gridContainer.tsx +28 -28
  37. package/gridItem/gridItem.d.ts +10 -10
  38. package/gridItem/gridItem.js +9 -9
  39. package/gridItem/gridItem.module.css +192 -192
  40. package/gridItem/gridItem.tsx +31 -31
  41. package/hr/hr.d.ts +8 -8
  42. package/hr/hr.js +11 -11
  43. package/hr/hr.module.css +19 -19
  44. package/hr/hr.tsx +32 -32
  45. package/index.d.ts +24 -24
  46. package/index.js +24 -24
  47. package/index.tsx +48 -48
  48. package/inputField/inputField.d.ts +12 -12
  49. package/inputField/inputField.js +10 -10
  50. package/inputField/inputField.module.css +167 -167
  51. package/inputField/inputField.tsx +38 -38
  52. package/list/list.d.ts +7 -7
  53. package/list/list.js +8 -8
  54. package/list/list.module.css +22 -22
  55. package/list/list.tsx +25 -25
  56. package/listItem/listItem.d.ts +3 -3
  57. package/listItem/listItem.js +6 -6
  58. package/listItem/listItem.module.css +6 -6
  59. package/listItem/listItem.tsx +12 -12
  60. package/loading/loading.d.ts +7 -7
  61. package/loading/loading.js +9 -9
  62. package/loading/loading.module.css +91 -91
  63. package/loading/loading.tsx +25 -25
  64. package/main/main.d.ts +6 -6
  65. package/main/main.js +9 -9
  66. package/main/main.module.css +19 -19
  67. package/main/main.tsx +25 -25
  68. package/navigation/navigation.d.ts +7 -7
  69. package/navigation/navigation.js +8 -8
  70. package/navigation/navigation.module.css +61 -61
  71. package/navigation/navigation.tsx +24 -24
  72. package/package.json +31 -31
  73. package/page/page.d.ts +3 -3
  74. package/page/page.js +8 -8
  75. package/page/page.module.css +10 -10
  76. package/page/page.tsx +15 -15
  77. package/row/row.d.ts +3 -3
  78. package/row/row.js +8 -8
  79. package/row/row.module.css +7 -7
  80. package/row/row.tsx +15 -15
  81. package/spacer/spacer.d.ts +3 -3
  82. package/spacer/spacer.js +6 -6
  83. package/spacer/spacer.module.css +5 -5
  84. package/spacer/spacer.tsx +8 -8
  85. package/stack/stack.d.ts +3 -3
  86. package/stack/stack.js +8 -8
  87. package/stack/stack.module.css +6 -6
  88. package/stack/stack.tsx +15 -15
  89. package/svgIcon/svgIcon.d.ts +6 -6
  90. package/svgIcon/svgIcon.js +11 -11
  91. package/svgIcon/svgIcon.module.css +5 -5
  92. package/svgIcon/svgIcon.tsx +26 -26
  93. package/theme/theme.d.ts +9 -9
  94. package/theme/theme.js +11 -11
  95. package/theme/theme.module.css +397 -397
  96. package/theme/theme.tsx +29 -29
  97. package/theme/zoom.css +3 -3
  98. package/tsconfig.json +13 -13
@@ -1,192 +1,192 @@
1
- .xl1 {
2
- grid-column: span 1;
3
- }
4
- .xl2 {
5
- grid-column: span 2;
6
- }
7
- .xl3 {
8
- grid-column: span 3;
9
- }
10
- .xl4 {
11
- grid-column: span 4;
12
- }
13
- .xl5 {
14
- grid-column: span 5;
15
- }
16
- .xl6 {
17
- grid-column: span 6;
18
- }
19
- .xl7 {
20
- grid-column: span 7;
21
- }
22
- .xl8 {
23
- grid-column: span 8;
24
- }
25
- .xl9 {
26
- grid-column: span 9;
27
- }
28
- .xl10 {
29
- grid-column: span 10;
30
- }
31
- .xl11 {
32
- grid-column: span 11;
33
- }
34
- .xl12 {
35
- grid-column: span 12;
36
- }
37
-
38
- @media screen and (max-width: 1200px) {
39
- .lg1 {
40
- grid-column: span 1;
41
- }
42
- .lg2 {
43
- grid-column: span 2;
44
- }
45
- .lg3 {
46
- grid-column: span 3;
47
- }
48
- .lg4 {
49
- grid-column: span 4;
50
- }
51
- .lg5 {
52
- grid-column: span 5;
53
- }
54
- .lg6 {
55
- grid-column: span 6;
56
- }
57
- .lg7 {
58
- grid-column: span 7;
59
- }
60
- .lg8 {
61
- grid-column: span 8;
62
- }
63
- .lg9 {
64
- grid-column: span 9;
65
- }
66
- .lg10 {
67
- grid-column: span 10;
68
- }
69
- .lg11 {
70
- grid-column: span 11;
71
- }
72
- .lg12 {
73
- grid-column: span 12;
74
- }
75
- }
76
-
77
- @media screen and (max-width: 900px) {
78
- .md1 {
79
- grid-column: span 1;
80
- }
81
- .md2 {
82
- grid-column: span 2;
83
- }
84
- .md3 {
85
- grid-column: span 3;
86
- }
87
- .md4 {
88
- grid-column: span 4;
89
- }
90
- .md5 {
91
- grid-column: span 5;
92
- }
93
- .md6 {
94
- grid-column: span 6;
95
- }
96
- .md7 {
97
- grid-column: span 7;
98
- }
99
- .md8 {
100
- grid-column: span 8;
101
- }
102
- .md9 {
103
- grid-column: span 9;
104
- }
105
- .md10 {
106
- grid-column: span 10;
107
- }
108
- .md11 {
109
- grid-column: span 11;
110
- }
111
- .md12 {
112
- grid-column: span 12;
113
- }
114
- }
115
-
116
- @media screen and (max-width: 600px) {
117
- .sm1 {
118
- grid-column: span 1;
119
- }
120
- .sm2 {
121
- grid-column: span 2;
122
- }
123
- .sm3 {
124
- grid-column: span 3;
125
- }
126
- .sm4 {
127
- grid-column: span 4;
128
- }
129
- .sm5 {
130
- grid-column: span 5;
131
- }
132
- .sm6 {
133
- grid-column: span 6;
134
- }
135
- .sm7 {
136
- grid-column: span 7;
137
- }
138
- .sm8 {
139
- grid-column: span 8;
140
- }
141
- .sm9 {
142
- grid-column: span 9;
143
- }
144
- .sm10 {
145
- grid-column: span 10;
146
- }
147
- .sm11 {
148
- grid-column: span 11;
149
- }
150
- .sm12 {
151
- grid-column: span 12;
152
- }
153
- }
154
-
155
- @media screen and (max-width: 444px) {
156
- .xs1 {
157
- grid-column: span 1;
158
- }
159
- .xs2 {
160
- grid-column: span 2;
161
- }
162
- .xs3 {
163
- grid-column: span 3;
164
- }
165
- .xs4 {
166
- grid-column: span 4;
167
- }
168
- .xs5 {
169
- grid-column: span 5;
170
- }
171
- .xs6 {
172
- grid-column: span 6;
173
- }
174
- .xs7 {
175
- grid-column: span 7;
176
- }
177
- .xs8 {
178
- grid-column: span 8;
179
- }
180
- .xs9 {
181
- grid-column: span 9;
182
- }
183
- .xs10 {
184
- grid-column: span 10;
185
- }
186
- .xs11 {
187
- grid-column: span 11;
188
- }
189
- .xs12 {
190
- grid-column: span 12;
191
- }
192
- }
1
+ .xl1 {
2
+ grid-column: span 1;
3
+ }
4
+ .xl2 {
5
+ grid-column: span 2;
6
+ }
7
+ .xl3 {
8
+ grid-column: span 3;
9
+ }
10
+ .xl4 {
11
+ grid-column: span 4;
12
+ }
13
+ .xl5 {
14
+ grid-column: span 5;
15
+ }
16
+ .xl6 {
17
+ grid-column: span 6;
18
+ }
19
+ .xl7 {
20
+ grid-column: span 7;
21
+ }
22
+ .xl8 {
23
+ grid-column: span 8;
24
+ }
25
+ .xl9 {
26
+ grid-column: span 9;
27
+ }
28
+ .xl10 {
29
+ grid-column: span 10;
30
+ }
31
+ .xl11 {
32
+ grid-column: span 11;
33
+ }
34
+ .xl12 {
35
+ grid-column: span 12;
36
+ }
37
+
38
+ @media screen and (max-width: 1200px) {
39
+ .lg1 {
40
+ grid-column: span 1;
41
+ }
42
+ .lg2 {
43
+ grid-column: span 2;
44
+ }
45
+ .lg3 {
46
+ grid-column: span 3;
47
+ }
48
+ .lg4 {
49
+ grid-column: span 4;
50
+ }
51
+ .lg5 {
52
+ grid-column: span 5;
53
+ }
54
+ .lg6 {
55
+ grid-column: span 6;
56
+ }
57
+ .lg7 {
58
+ grid-column: span 7;
59
+ }
60
+ .lg8 {
61
+ grid-column: span 8;
62
+ }
63
+ .lg9 {
64
+ grid-column: span 9;
65
+ }
66
+ .lg10 {
67
+ grid-column: span 10;
68
+ }
69
+ .lg11 {
70
+ grid-column: span 11;
71
+ }
72
+ .lg12 {
73
+ grid-column: span 12;
74
+ }
75
+ }
76
+
77
+ @media screen and (max-width: 900px) {
78
+ .md1 {
79
+ grid-column: span 1;
80
+ }
81
+ .md2 {
82
+ grid-column: span 2;
83
+ }
84
+ .md3 {
85
+ grid-column: span 3;
86
+ }
87
+ .md4 {
88
+ grid-column: span 4;
89
+ }
90
+ .md5 {
91
+ grid-column: span 5;
92
+ }
93
+ .md6 {
94
+ grid-column: span 6;
95
+ }
96
+ .md7 {
97
+ grid-column: span 7;
98
+ }
99
+ .md8 {
100
+ grid-column: span 8;
101
+ }
102
+ .md9 {
103
+ grid-column: span 9;
104
+ }
105
+ .md10 {
106
+ grid-column: span 10;
107
+ }
108
+ .md11 {
109
+ grid-column: span 11;
110
+ }
111
+ .md12 {
112
+ grid-column: span 12;
113
+ }
114
+ }
115
+
116
+ @media screen and (max-width: 600px) {
117
+ .sm1 {
118
+ grid-column: span 1;
119
+ }
120
+ .sm2 {
121
+ grid-column: span 2;
122
+ }
123
+ .sm3 {
124
+ grid-column: span 3;
125
+ }
126
+ .sm4 {
127
+ grid-column: span 4;
128
+ }
129
+ .sm5 {
130
+ grid-column: span 5;
131
+ }
132
+ .sm6 {
133
+ grid-column: span 6;
134
+ }
135
+ .sm7 {
136
+ grid-column: span 7;
137
+ }
138
+ .sm8 {
139
+ grid-column: span 8;
140
+ }
141
+ .sm9 {
142
+ grid-column: span 9;
143
+ }
144
+ .sm10 {
145
+ grid-column: span 10;
146
+ }
147
+ .sm11 {
148
+ grid-column: span 11;
149
+ }
150
+ .sm12 {
151
+ grid-column: span 12;
152
+ }
153
+ }
154
+
155
+ @media screen and (max-width: 444px) {
156
+ .xs1 {
157
+ grid-column: span 1;
158
+ }
159
+ .xs2 {
160
+ grid-column: span 2;
161
+ }
162
+ .xs3 {
163
+ grid-column: span 3;
164
+ }
165
+ .xs4 {
166
+ grid-column: span 4;
167
+ }
168
+ .xs5 {
169
+ grid-column: span 5;
170
+ }
171
+ .xs6 {
172
+ grid-column: span 6;
173
+ }
174
+ .xs7 {
175
+ grid-column: span 7;
176
+ }
177
+ .xs8 {
178
+ grid-column: span 8;
179
+ }
180
+ .xs9 {
181
+ grid-column: span 9;
182
+ }
183
+ .xs10 {
184
+ grid-column: span 10;
185
+ }
186
+ .xs11 {
187
+ grid-column: span 11;
188
+ }
189
+ .xs12 {
190
+ grid-column: span 12;
191
+ }
192
+ }
@@ -1,31 +1,31 @@
1
- import React from "react";
2
- import { joinClassNames, joinStyles } from "@yakad/lib";
3
- import styles from "./gridItem.module.css";
4
-
5
- interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
6
- xs?: number;
7
- sm?: number;
8
- md?: number;
9
- lg?: number;
10
- xl?: number;
11
- }
12
-
13
- // Custom Button Element
14
- function GridItem(props: GridItemProps) {
15
- const joinedClassNames = joinClassNames(
16
- props.xl ? styles["xl" + props.xl] : "",
17
- props.lg ? styles["lg" + props.lg] : "",
18
- props.md ? styles["md" + props.md] : "",
19
- props.sm ? styles["sm" + props.sm] : "",
20
- props.xs ? styles["xs" + props.xs] : "",
21
- props.className!
22
- );
23
-
24
- return (
25
- <div {...props} className={joinedClassNames}>
26
- {props.children}
27
- </div>
28
- );
29
- }
30
-
31
- export default GridItem;
1
+ import React from "react";
2
+ import { joinClassNames, joinStyles } from "@yakad/lib";
3
+ import styles from "./gridItem.module.css";
4
+
5
+ interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
6
+ xs?: number;
7
+ sm?: number;
8
+ md?: number;
9
+ lg?: number;
10
+ xl?: number;
11
+ }
12
+
13
+ // Custom Button Element
14
+ function GridItem(props: GridItemProps) {
15
+ const joinedClassNames = joinClassNames(
16
+ props.xl ? styles["xl" + props.xl] : "",
17
+ props.lg ? styles["lg" + props.lg] : "",
18
+ props.md ? styles["md" + props.md] : "",
19
+ props.sm ? styles["sm" + props.sm] : "",
20
+ props.xs ? styles["xs" + props.xs] : "",
21
+ props.className!
22
+ );
23
+
24
+ return (
25
+ <div {...props} className={joinedClassNames}>
26
+ {props.children}
27
+ </div>
28
+ );
29
+ }
30
+
31
+ export default GridItem;
package/hr/hr.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import React from "react";
2
- interface HrProps extends React.HTMLAttributes<HTMLElement> {
3
- variant?: "dotted" | "dashed" | "shortLine";
4
- height?: number;
5
- marginTopBottom?: number;
6
- }
7
- declare function Hr(props: HrProps): JSX.Element;
8
- export default Hr;
1
+ import React from "react";
2
+ interface HrProps extends React.HTMLAttributes<HTMLElement> {
3
+ variant?: "dotted" | "dashed" | "shortLine";
4
+ height?: number;
5
+ marginTopBottom?: number;
6
+ }
7
+ declare function Hr(props: HrProps): JSX.Element;
8
+ export default Hr;
package/hr/hr.js CHANGED
@@ -1,12 +1,12 @@
1
- import React from "react";
2
- import { joinClassNames, joinStyles } from "@yakad/lib";
3
- import styles from "./hr.module.css";
4
- function Hr(props) {
5
- const joinedClassNames = joinClassNames(styles.hr, props.variant ? styles[props.variant] : "", props.className);
6
- const joinedStyles = joinStyles(props.height ? { borderTopWidth: props.height + "rem" } : {}, props.marginTopBottom
7
- ? joinStyles({ marginTop: props.marginTopBottom + "rem" }, { marginBottom: props.marginTopBottom + "rem" })
8
- : {}, props.style);
9
- return React.createElement("hr", { ...props, className: joinedClassNames, style: joinedStyles });
10
- }
11
- export default Hr;
1
+ import React from "react";
2
+ import { joinClassNames, joinStyles } from "@yakad/lib";
3
+ import styles from "./hr.module.css";
4
+ function Hr(props) {
5
+ const joinedClassNames = joinClassNames(styles.hr, props.variant ? styles[props.variant] : "", props.className);
6
+ const joinedStyles = joinStyles(props.height ? { borderTopWidth: props.height + "rem" } : {}, props.marginTopBottom
7
+ ? joinStyles({ marginTop: props.marginTopBottom + "rem" }, { marginBottom: props.marginTopBottom + "rem" })
8
+ : {}, props.style);
9
+ return React.createElement("hr", { ...props, className: joinedClassNames, style: joinedStyles });
10
+ }
11
+ export default Hr;
12
12
  //# sourceMappingURL=hr.js.map
package/hr/hr.module.css CHANGED
@@ -1,19 +1,19 @@
1
- .hr {
2
- width: calc(100% - 1rem);
3
- height: 0;
4
- padding: 0;
5
- margin: 0.5rem auto;
6
- background: none;
7
- border: none;
8
- border-top: 0.1rem solid rgb(var(--primaryContainerColor, 211 227 253));
9
- }
10
- .dotted {
11
- border-top: 0.4rem dotted rgb(var(--primaryContainerColor, 211 227 253));
12
- }
13
- .dashed {
14
- border-top: 0.2rem dashed rgb(var(--primaryContainerColor, 211 227 253));
15
- }
16
- .shortLine {
17
- width: 30rem;
18
- max-width: 80%;
19
- }
1
+ .hr {
2
+ width: calc(100% - 1rem);
3
+ height: 0;
4
+ padding: 0;
5
+ margin: 1rem auto;
6
+ background: none;
7
+ border: none;
8
+ border-top: 0.1rem solid rgb(var(--primaryContainerColor, 211 227 253));
9
+ }
10
+ .dotted {
11
+ border-top: 0.4rem dotted rgb(var(--primaryContainerColor, 211 227 253));
12
+ }
13
+ .dashed {
14
+ border-top: 0.2rem dashed rgb(var(--primaryContainerColor, 211 227 253));
15
+ }
16
+ .shortLine {
17
+ width: 30rem;
18
+ max-width: 80%;
19
+ }
package/hr/hr.tsx CHANGED
@@ -1,32 +1,32 @@
1
- import React from "react";
2
- import { joinClassNames, joinStyles } from "@yakad/lib";
3
- import styles from "./hr.module.css";
4
-
5
- interface HrProps extends React.HTMLAttributes<HTMLElement> {
6
- variant?: "dotted" | "dashed" | "shortLine";
7
- height?: number;
8
- marginTopBottom?: number;
9
- }
10
-
11
- function Hr(props: HrProps) {
12
- const joinedClassNames = joinClassNames(
13
- styles.hr,
14
- props.variant ? styles[props.variant] : "",
15
- props.className!
16
- );
17
-
18
- const joinedStyles = joinStyles(
19
- props.height ? { borderTopWidth: props.height + "rem" } : {},
20
- props.marginTopBottom
21
- ? joinStyles(
22
- { marginTop: props.marginTopBottom + "rem" },
23
- { marginBottom: props.marginTopBottom + "rem" }
24
- )
25
- : {},
26
- props.style!
27
- );
28
-
29
- return <hr {...props} className={joinedClassNames} style={joinedStyles}></hr>;
30
- }
31
-
32
- export default Hr;
1
+ import React from "react";
2
+ import { joinClassNames, joinStyles } from "@yakad/lib";
3
+ import styles from "./hr.module.css";
4
+
5
+ interface HrProps extends React.HTMLAttributes<HTMLElement> {
6
+ variant?: "dotted" | "dashed" | "shortLine";
7
+ height?: number;
8
+ marginTopBottom?: number;
9
+ }
10
+
11
+ function Hr(props: HrProps) {
12
+ const joinedClassNames = joinClassNames(
13
+ styles.hr,
14
+ props.variant ? styles[props.variant] : "",
15
+ props.className!
16
+ );
17
+
18
+ const joinedStyles = joinStyles(
19
+ props.height ? { borderTopWidth: props.height + "rem" } : {},
20
+ props.marginTopBottom
21
+ ? joinStyles(
22
+ { marginTop: props.marginTopBottom + "rem" },
23
+ { marginBottom: props.marginTopBottom + "rem" }
24
+ )
25
+ : {},
26
+ props.style!
27
+ );
28
+
29
+ return <hr {...props} className={joinedClassNames} style={joinedStyles}></hr>;
30
+ }
31
+
32
+ export default Hr;
package/index.d.ts CHANGED
@@ -1,24 +1,24 @@
1
- import Button from "./button/button";
2
- import AppBar from "./appBar/appBar";
3
- import Card from "./card/card";
4
- import Container from "./container/container";
5
- import Footer from "./footer/footer";
6
- import Form from "./form/form";
7
- import GridContainer from "./gridContainer/gridContainer";
8
- import GridItem from "./gridItem/gridItem";
9
- import Hr from "./hr/hr";
10
- import List from "./list/list";
11
- import ListItem from "./listItem/listItem";
12
- import Main from "./main/main";
13
- import Navigation from "./navigation/navigation";
14
- import Page from "./page/page";
15
- import Row from "./row/row";
16
- import Spacer from "./spacer/spacer";
17
- import Stack from "./stack/stack";
18
- import SvgIcon from "./svgIcon/svgIcon";
19
- import Loading from "./loading/loading";
20
- import CodeField from "./codeField/codeField";
21
- import InputField from "./inputField/inputField";
22
- import Theme from "./theme/theme";
23
- import ClickAwayListener from "./clickAwayListener/clickAwayListener";
24
- export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, };
1
+ import Button from "./button/button";
2
+ import AppBar from "./appBar/appBar";
3
+ import Card from "./card/card";
4
+ import Container from "./container/container";
5
+ import Footer from "./footer/footer";
6
+ import Form from "./form/form";
7
+ import GridContainer from "./gridContainer/gridContainer";
8
+ import GridItem from "./gridItem/gridItem";
9
+ import Hr from "./hr/hr";
10
+ import List from "./list/list";
11
+ import ListItem from "./listItem/listItem";
12
+ import Main from "./main/main";
13
+ import Navigation from "./navigation/navigation";
14
+ import Page from "./page/page";
15
+ import Row from "./row/row";
16
+ import Spacer from "./spacer/spacer";
17
+ import Stack from "./stack/stack";
18
+ import SvgIcon from "./svgIcon/svgIcon";
19
+ import Loading from "./loading/loading";
20
+ import CodeField from "./codeField/codeField";
21
+ import InputField from "./inputField/inputField";
22
+ import Theme from "./theme/theme";
23
+ import ClickAwayListener from "./clickAwayListener/clickAwayListener";
24
+ export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, };