@veritone-ce/design-system 0.9.26 → 1.0.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 (11) hide show
  1. package/dist/assets/theme.js +147 -157
  2. package/dist/components/Button/Indicator.d.ts +0 -1
  3. package/dist/components/Button/Indicator.js +6 -17
  4. package/dist/components/Button/index.d.ts +0 -1
  5. package/dist/components/Button/index.js +7 -18
  6. package/dist/components/Button/useButtonProps.js +3 -14
  7. package/dist/components/ThemeProvider/index.d.ts +0 -1
  8. package/dist/components/ThemeProvider/index.js +2 -14
  9. package/dist/index.d.ts +1 -4
  10. package/dist/index.js +1 -4
  11. package/package.json +1 -1
package/dist/assets/theme.js CHANGED
@@ -1,14 +1,3 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import { createTheme } from '@mui/material';
14
3
  import '@fontsource/nunito-sans';
@@ -19,119 +8,120 @@ import InfoIcon from '@mui/icons-material/Info';
19
8
  import WarningIcon from '@mui/icons-material/Error';
20
9
  import ErrorIcon from '@mui/icons-material/Cancel';
21
10
  // create theme in steps https://mui.com/material-ui/customization/theming/#api
22
- var theme = createTheme({
11
+ let theme = createTheme({
23
12
  typography: {
24
13
  fontFamily: ['Nunito Sans', 'Helvetica', 'sans-serif'].join(','),
25
14
  h2: {
26
15
  fontSize: '1.429rem',
27
16
  lineHeight: '2.143rem',
28
- fontWeight: '700'
29
- }
17
+ fontWeight: '700',
18
+ },
30
19
  },
31
20
  palette: {
32
21
  primary: {
33
- main: '#214167'
22
+ main: '#214167',
34
23
  },
35
24
  secondary: {
36
25
  main: '#335B89',
37
- contrastText: '#ffffff'
26
+ contrastText: '#ffffff',
38
27
  },
39
28
  neutral: {
40
- main: '#5C6269'
29
+ main: '#5C6269',
41
30
  },
42
31
  button: {
43
32
  main: '#1871E8',
44
- hover: '#335B89'
33
+ hover: '#335B89',
45
34
  },
46
35
  success: {
47
- main: '#28BA3F'
36
+ main: '#28BA3F',
48
37
  },
49
38
  info: {
50
- main: '#325491'
39
+ main: '#325491',
51
40
  },
52
41
  warning: {
53
- main: '#FFBB0A'
42
+ main: '#FFBB0A',
54
43
  },
55
44
  error: {
56
- main: '#FF0000'
45
+ main: '#FF0000',
57
46
  },
58
- divider: '#214167'
47
+ divider: '#214167',
59
48
  },
60
- spacing: 10
49
+ spacing: 10,
61
50
  });
62
51
  theme = createTheme(theme, {
63
52
  components: {
64
53
  MuiButton: {
65
54
  defaultProps: {
66
55
  variant: 'contained',
67
- disableRipple: true
56
+ disableRipple: true,
68
57
  },
69
58
  styleOverrides: {
70
59
  // @ts-ignore
71
- root: function (_a) {
72
- var ownerState = _a.ownerState;
73
- return (__assign(__assign(__assign({ textTransform: 'none', fontWeight: '600', '&.Mui-disabled': {
74
- borderColor: "#E0E8F0"
75
- }, '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
76
- opacity: 0.3
77
- } }, (ownerState.variant === "contained" &&
78
- {
60
+ root: ({ ownerState }) => (Object.assign(Object.assign(Object.assign({ textTransform: 'none', fontWeight: '600', paddingTop: '7px', paddingBottom: '5px', '&.Mui-disabled': {
61
+ borderColor: `#E0E8F0`,
62
+ }, '& .MuiButton-startIcon': {
63
+ marginTop: '-1px',
64
+ }, '& .MuiButton-endIcon': {
65
+ marginTop: '-1px',
66
+ }, '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
67
+ opacity: 0.3,
68
+ } }, (ownerState.variant === `contained` &&
69
+ {
70
+ //@ts-ignore
71
+ backgroundColor: ownerState.color === `primary` ? theme.palette.button.main : theme.palette[ownerState.color].main,
72
+ ':hover': {
79
73
  //@ts-ignore
80
- backgroundColor: ownerState.color === "primary" ? theme.palette.button.main : theme.palette[ownerState.color].main,
81
- ':hover': {
82
- //@ts-ignore
83
- backgroundColor: ownerState.color === "primary" ? theme.palette.button.hover : theme.palette[ownerState.color]
84
- }
85
- })), (ownerState.variant === "outlined" &&
86
- {
74
+ backgroundColor: ownerState.color === `primary` ? theme.palette.button.hover : theme.palette[ownerState.color],
75
+ },
76
+ })), (ownerState.variant === `outlined` &&
77
+ {
78
+ //@ts-ignore
79
+ color: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
80
+ //@ts-ignore
81
+ borderColor: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
82
+ ':hover': {
87
83
  //@ts-ignore
88
- color: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
84
+ color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
89
85
  //@ts-ignore
90
- borderColor: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
91
- ':hover': {
92
- //@ts-ignore
93
- color: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color],
94
- //@ts-ignore
95
- borderColor: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color]
96
- }
97
- })), (ownerState.variant === "text" &&
98
- {
86
+ borderColor: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
87
+ },
88
+ })), (ownerState.variant === `text` &&
89
+ {
90
+ //@ts-ignore
91
+ color: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
92
+ ':hover': {
99
93
  //@ts-ignore
100
- color: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
101
- ':hover': {
102
- //@ts-ignore
103
- color: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color]
104
- }
105
- })));
106
- }
94
+ color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
95
+ },
96
+ }))),
107
97
  },
108
98
  variants: [
109
99
  {
110
100
  props: {
111
- variant: 'secondary'
101
+ variant: 'secondary',
112
102
  },
113
103
  style: sx({
114
104
  backgroundColor: 'white',
115
105
  color: theme.palette.neutral.main,
116
- border: "1px solid ".concat(theme.palette.neutral.main),
106
+ border: `1px solid ${theme.palette.neutral.main}`,
117
107
  ':hover': {
118
- border: "1px solid ".concat(theme.palette.primary.main),
108
+ border: `1px solid ${theme.palette.primary.main}`,
119
109
  color: theme.palette.primary.main,
120
- backgroundColor: 'white'
121
- }
122
- })
110
+ backgroundColor: 'white',
111
+ },
112
+ }),
123
113
  },
124
- ]
114
+ ],
125
115
  },
126
116
  MuiInputLabel: {
127
117
  styleOverrides: {
128
118
  root: sx({
129
- color: "#5C6269",
130
- fontSize: "14px",
131
- lineHeight: "21px",
132
- fontWeight: "600"
133
- })
134
- }
119
+ color: `#5C6269`,
120
+ fontSize: `14px`,
121
+ lineHeight: `21px`,
122
+ fontWeight: `600`,
123
+ }),
124
+ },
135
125
  },
136
126
  MuiFormHelperText: {
137
127
  styleOverrides: {
@@ -139,76 +129,76 @@ theme = createTheme(theme, {
139
129
  position: 'relative',
140
130
  marginLeft: 0,
141
131
  '&.Mui-error': {
142
- paddingLeft: "17px",
132
+ paddingLeft: `17px`,
143
133
  '&::before': {
144
- content: "\"\"",
145
- height: "12px",
134
+ content: `""`,
135
+ height: `12px`,
146
136
  width: '12px',
147
137
  position: 'absolute',
148
138
  left: 0,
149
- top: "50%",
150
- transform: "translate(0, -50%)",
139
+ top: `50%`,
140
+ transform: `translate(0, -50%)`,
151
141
  backgroundColor: theme.palette.error.main,
152
- borderRadius: "100%"
153
- }
154
- }
155
- })
156
- }
142
+ borderRadius: `100%`,
143
+ },
144
+ },
145
+ }),
146
+ },
157
147
  },
158
148
  MuiTextField: {
159
149
  defaultProps: {
160
- size: 'small'
150
+ size: 'small',
161
151
  },
162
152
  styleOverrides: {
163
153
  root: sx({
164
- color: "#2A323C",
154
+ color: `#2A323C`,
165
155
  '& .MuiOutlinedInput-root': {
166
156
  '& fieldset': {
167
- borderColor: "#E0E8F0"
157
+ borderColor: `#E0E8F0`,
168
158
  },
169
159
  '&:hover fieldset': {
170
- borderColor: "#335B89"
160
+ borderColor: `#335B89`,
171
161
  },
172
162
  '&.Mui-focused fieldset': {
173
- border: "1px solid #5C6269"
163
+ border: `1px solid #5C6269`,
174
164
  },
175
165
  '&.Mui-error fieldset': {
176
- borderColor: theme.palette.error.main
177
- }
178
- }
179
- })
180
- }
166
+ borderColor: theme.palette.error.main,
167
+ },
168
+ },
169
+ }),
170
+ },
181
171
  },
182
172
  MuiStepIcon: {
183
173
  styleOverrides: {
184
174
  root: {
185
- borderRadius: "100%",
186
- outline: "1px solid #465364",
187
- color: "white",
175
+ borderRadius: `100%`,
176
+ outline: `1px solid #465364`,
177
+ color: `white`,
188
178
  text: {
189
- fill: "#465364"
179
+ fill: `#465364`,
190
180
  },
191
181
  '&.Mui-active': {
192
- outline: "none",
182
+ outline: `none`,
193
183
  color: theme.palette.button.main,
194
184
  text: {
195
- fill: "white"
196
- }
197
- }
198
- }
199
- }
185
+ fill: `white`,
186
+ },
187
+ },
188
+ },
189
+ },
200
190
  },
201
191
  MuiDialogTitle: {
202
192
  styleOverrides: {
203
193
  root: {
204
- fontSize: "24px",
205
- lineHeight: "34px",
194
+ fontSize: `24px`,
195
+ lineHeight: `34px`,
206
196
  paddingTop: theme.spacing(3),
207
197
  paddingLeft: theme.spacing(3),
208
198
  paddingRight: theme.spacing(3),
209
- paddingBottom: theme.spacing(1)
210
- }
211
- }
199
+ paddingBottom: theme.spacing(1),
200
+ },
201
+ },
212
202
  },
213
203
  MuiDialogContent: {
214
204
  styleOverrides: {
@@ -216,115 +206,115 @@ theme = createTheme(theme, {
216
206
  paddingTop: 0,
217
207
  paddingLeft: theme.spacing(3),
218
208
  paddingRight: theme.spacing(3),
219
- paddingBottom: theme.spacing(1)
220
- }
221
- }
209
+ paddingBottom: theme.spacing(1),
210
+ },
211
+ },
222
212
  },
223
213
  MuiDialogActions: {
224
214
  styleOverrides: {
225
215
  root: {
226
- padding: theme.spacing(3)
227
- }
228
- }
216
+ padding: theme.spacing(3),
217
+ },
218
+ },
229
219
  },
230
220
  MuiLink: {
231
221
  defaultProps: {
232
- underline: "none",
233
- color: "#1871E8"
234
- }
222
+ underline: `none`,
223
+ color: `#1871E8`,
224
+ },
235
225
  },
236
226
  MuiSnackbar: {
237
227
  defaultProps: {
238
228
  autoHideDuration: 6000,
239
229
  anchorOrigin: {
240
- vertical: "top",
241
- horizontal: "right"
242
- }
230
+ vertical: `top`,
231
+ horizontal: `right`,
232
+ },
243
233
  },
244
234
  styleOverrides: {
245
235
  root: {
246
- width: "100%",
247
- maxWidth: "415px",
248
- position: "absolute"
249
- }
250
- }
236
+ width: `100%`,
237
+ maxWidth: `415px`,
238
+ position: `absolute`,
239
+ },
240
+ },
251
241
  },
252
242
  MuiAlert: {
253
243
  defaultProps: {
254
- variant: "outlined",
244
+ variant: `outlined`,
255
245
  iconMapping: {
256
246
  success: _jsx(CheckCircleIcon, {}),
257
247
  info: _jsx(InfoIcon, {}),
258
248
  warning: _jsx(WarningIcon, {}),
259
- error: _jsx(ErrorIcon, {})
260
- }
249
+ error: _jsx(ErrorIcon, {}),
250
+ },
261
251
  },
262
252
  styleOverrides: {
263
253
  root: {
264
- width: "100%",
265
- backgroundColor: "white",
266
- borderColor: "#D5DFE9",
267
- position: "relative",
268
- overflow: "hidden",
254
+ width: `100%`,
255
+ backgroundColor: `white`,
256
+ borderColor: `#D5DFE9`,
257
+ position: `relative`,
258
+ overflow: `hidden`,
269
259
  '&:after': {
270
260
  content: '""',
271
- position: "absolute",
272
- width: "4px",
261
+ position: `absolute`,
262
+ width: `4px`,
273
263
  left: 0,
274
264
  top: 0,
275
- bottom: 0
265
+ bottom: 0,
276
266
  },
277
267
  '&.MuiAlert-outlinedSuccess:after': {
278
- backgroundColor: theme.palette.success.main
268
+ backgroundColor: theme.palette.success.main,
279
269
  },
280
270
  '&.MuiAlert-outlinedInfo:after': {
281
- backgroundColor: theme.palette.info.main
271
+ backgroundColor: theme.palette.info.main,
282
272
  },
283
273
  '&.MuiAlert-outlinedWarning:after': {
284
- backgroundColor: theme.palette.warning.main
274
+ backgroundColor: theme.palette.warning.main,
285
275
  },
286
276
  '&.MuiAlert-outlinedError:after': {
287
- backgroundColor: theme.palette.error.main
277
+ backgroundColor: theme.palette.error.main,
288
278
  },
289
279
  '& .MuiAlert-icon': {
290
280
  opacity: 1,
291
- fontSize: 20
281
+ fontSize: 20,
292
282
  },
293
283
  '& .MuiAlert-message': {
294
- fontSize: "12px",
295
- lineHeight: "22px",
296
- color: "black"
297
- }
298
- }
299
- }
284
+ fontSize: `12px`,
285
+ lineHeight: `22px`,
286
+ color: `black`,
287
+ },
288
+ },
289
+ },
300
290
  },
301
291
  MuiCircularProgress: {
302
292
  styleOverrides: {
303
293
  root: {
304
- color: theme.palette.button.main
305
- }
306
- }
294
+ color: theme.palette.button.main,
295
+ },
296
+ },
307
297
  },
308
298
  MuiCardContent: {
309
299
  styleOverrides: {
310
300
  root: {
311
301
  padding: theme.spacing(2),
312
- paddingTop: theme.spacing(1)
313
- }
314
- }
302
+ paddingTop: theme.spacing(1),
303
+ },
304
+ },
315
305
  },
316
306
  MuiDataGrid: {
317
307
  styleOverrides: {
318
308
  root: {
319
309
  '& .MuiDataGrid-columnHeader:focus': {
320
- outline: 0
310
+ outline: 0,
321
311
  },
322
312
  '& .MuiDataGrid-cell:focus': {
323
- outline: 0
324
- }
325
- }
326
- }
327
- }
328
- }
313
+ outline: 0,
314
+ },
315
+ },
316
+ },
317
+ },
318
+ },
329
319
  });
330
320
  export default theme;
package/dist/components/Button/Indicator.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  declare const Indicator: () => JSX.Element;
3
2
  export default Indicator;
package/dist/components/Button/Indicator.js CHANGED
@@ -1,26 +1,15 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import { CircularProgress, Box } from '@mui/material';
14
- var Indicator = function () {
15
- return (_jsx(Box, __assign({ sx: {
16
- position: "absolute",
3
+ const Indicator = () => {
4
+ return (_jsx(Box, Object.assign({ sx: {
5
+ position: `absolute`,
17
6
  top: 0,
18
7
  left: 0,
19
8
  right: 0,
20
9
  bottom: 0,
21
- display: "grid",
22
- justifyItems: "center",
23
- alignItems: "center"
10
+ display: `grid`,
11
+ justifyItems: `center`,
12
+ alignItems: `center`,
24
13
  } }, { children: _jsx(CircularProgress, { size: 20 }) })));
25
14
  };
26
15
  export default Indicator;
package/dist/components/Button/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ButtonProps as MuiButtonProps } from '@mui/material';
3
2
  export declare type ButtonProps = {
4
3
  /**
package/dist/components/Button/index.js CHANGED
@@ -1,14 +1,3 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  var __rest = (this && this.__rest) || function (s, e) {
13
2
  var t = {};
14
3
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -27,12 +16,12 @@ import useButtonProps from './useButtonProps';
27
16
  /**
28
17
  - Use a button for common user click actions. Several variations available.
29
18
  **/
30
- var Button = function (_a) {
31
- var children = _a.children, props = __rest(_a, ["children"]);
32
- var _b = useButtonProps(props), isProcessing = _b.isProcessing, muiButtonProps = __rest(_b, ["isProcessing"]);
33
- return (_jsxs(Box, __assign({ sx: {
34
- display: "inline-flex",
35
- position: "relative"
36
- } }, { children: [_jsx(MuiButton, __assign({}, muiButtonProps, { children: children })), isProcessing ? _jsx(Indicator, {}) : null] })));
19
+ const Button = (_a) => {
20
+ var { children } = _a, props = __rest(_a, ["children"]);
21
+ const _b = useButtonProps(props), { isProcessing } = _b, muiButtonProps = __rest(_b, ["isProcessing"]);
22
+ return (_jsxs(Box, Object.assign({ sx: {
23
+ display: `inline-flex`,
24
+ position: `relative`,
25
+ } }, { children: [_jsx(MuiButton, Object.assign({}, muiButtonProps, { children: children })), isProcessing ? _jsx(Indicator, {}) : null] })));
37
26
  };
38
27
  export default Button;
package/dist/components/Button/useButtonProps.js CHANGED
@@ -1,14 +1,3 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  var __rest = (this && this.__rest) || function (s, e) {
13
2
  var t = {};
14
3
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
20
9
  }
21
10
  return t;
22
11
  };
23
- var useButtonProps = function (_a) {
24
- var _b = _a.isProcessing, isProcessing = _b === void 0 ? false : _b, props = __rest(_a, ["isProcessing"]);
25
- return __assign({ disabled: isProcessing || props.disabled, isProcessing: isProcessing }, props);
12
+ const useButtonProps = (_a) => {
13
+ var { isProcessing = false } = _a, props = __rest(_a, ["isProcessing"]);
14
+ return Object.assign({ disabled: isProcessing || props.disabled, isProcessing }, props);
26
15
  };
27
16
  export default useButtonProps;
package/dist/components/ThemeProvider/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ThemeProviderProps } from '@mui/system';
3
2
  declare const ThemeProvider: ({ children, }: Omit<ThemeProviderProps, 'theme'>) => JSX.Element;
4
3
  export default ThemeProvider;
package/dist/components/ThemeProvider/index.js CHANGED
@@ -1,19 +1,7 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import { ThemeProvider as MuiThemeProvider } from '@mui/system';
14
3
  import theme from '../../assets/theme';
15
- var ThemeProvider = function (_a) {
16
- var children = _a.children;
17
- return (_jsx(MuiThemeProvider, __assign({ theme: theme }, { children: children })));
4
+ const ThemeProvider = ({ children, }) => {
5
+ return (_jsx(MuiThemeProvider, Object.assign({ theme: theme }, { children: children })));
18
6
  };
19
7
  export default ThemeProvider;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,3 @@
1
- export * from './components/Button';
2
- export { default as Button } from "./components/Button";
3
- export * from './components/ThemeProvider';
1
+ export { default as Button } from './components/Button';
4
2
  export { default as ThemeProvider } from './components/ThemeProvider';
5
- export * from './assets/theme';
6
3
  export { default as theme } from './assets/theme';
package/dist/index.js CHANGED
@@ -1,6 +1,3 @@
1
- export * from './components/Button';
2
- export { default as Button } from "./components/Button";
3
- export * from './components/ThemeProvider';
1
+ export { default as Button } from './components/Button';
4
2
  export { default as ThemeProvider } from './components/ThemeProvider';
5
- export * from './assets/theme';
6
3
  export { default as theme } from './assets/theme';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veritone-ce/design-system",
3
- "version": "0.9.26",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "dependencies": {
6
6
  "@emotion/react": "^11.10.4",