formik-form-components 0.2.11 → 0.2.13

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.
package/dist/index.mjs CHANGED
@@ -1,20 +1,20 @@
1
1
  import { useFormikContext, Formik, Form as Form$1, ErrorMessage } from 'formik';
2
- import { Box, TextField, Typography, FormControl, Autocomplete, Chip, Switch, Stack, InputAdornment, IconButton, InputLabel, MenuItem, Checkbox, RadioGroup, FormControlLabel, Radio, Rating, useTheme as useTheme$1, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
2
+ import { forwardRef, memo, createElement, useState, useEffect } from 'react';
3
+ import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, InputLabel, FormLabel, RadioGroup, FormControlLabel, Radio, Stack, Rating, Autocomplete, MenuItem, Chip, Switch, InputAdornment, IconButton, Checkbox, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
3
4
  import { DatePicker } from '@mui/x-date-pickers/DatePicker';
4
5
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
5
6
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
7
+ import { Dayjs } from 'dayjs';
6
8
  import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
9
+ import _19, { get } from 'lodash';
7
10
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
11
  import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
9
- import _17, { get } from 'lodash';
10
- import { forwardRef, memo, createElement, useState, useEffect } from 'react';
11
12
  import Autocomplete3 from '@mui/material/Autocomplete';
12
- import Typography9 from '@mui/material/Typography';
13
+ import Typography10 from '@mui/material/Typography';
13
14
  import { Icon } from '@iconify/react';
14
15
  import Select from '@mui/material/Select';
15
16
  import PhoneInput from 'react-phone-input-2';
16
17
  import 'react-phone-input-2/lib/style.css';
17
- import { red } from '@mui/material/colors';
18
18
  import { useEditor, EditorContent } from '@tiptap/react';
19
19
  import StarterKit from '@tiptap/starter-kit';
20
20
  import Link from '@tiptap/extension-link';
@@ -29,266 +29,880 @@ import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
29
29
  import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
30
30
  import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
31
31
  import TitleIcon from '@mui/icons-material/Title';
32
- import LinkIcon from '@mui/icons-material/Link';
33
32
  import UndoIcon from '@mui/icons-material/Undo';
34
33
  import RedoIcon from '@mui/icons-material/Redo';
35
- import { styled, alpha, useTheme } from '@mui/material/styles';
34
+ import CloudUploadIcon from '@mui/icons-material/CloudUpload';
35
+ import CloseIcon from '@mui/icons-material/Close';
36
+ import { styled, alpha, useTheme as useTheme$1 } from '@mui/material/styles';
36
37
  import { LazyLoadImage } from 'react-lazy-load-image-component';
37
38
  import { AnimatePresence, m } from 'framer-motion';
38
39
  import { useDropzone } from 'react-dropzone';
39
40
  import { useTranslation } from 'react-i18next';
40
41
 
41
42
  // src/Form/index.tsx
42
- var AppDatePicker = ({
43
- name,
44
- label,
45
- required,
46
- disablePast,
47
- ...otherProps
48
- }) => {
49
- const theme = useTheme$1();
50
- const { values, setFieldValue, touched, errors } = useFormikContext();
51
- const fieldValue = values[name];
52
- const fieldError = errors[name];
53
- const fieldTouched = touched[name];
54
- const textFieldSx = {
55
- "& .MuiOutlinedInput-root": {
56
- backgroundColor: theme.palette.common.white,
57
- color: theme.palette.text.secondary,
58
- "&.Mui-focused": {
59
- "& .MuiOutlinedInput-notchedOutline": {
60
- borderColor: theme.palette.primary.main
61
- }
62
- },
63
- ...fieldTouched && fieldError ? {
64
- backgroundColor: "#FFF2EF",
65
- "& .MuiOutlinedInput-input": {
66
- color: "#FF5A35"
67
- }
68
- } : {}
69
- },
70
- "& .MuiOutlinedInput-notchedOutline": {
71
- borderColor: fieldTouched && fieldError ? "#FF5630" : theme.palette.grey[400]
72
- },
73
- "&:hover .MuiOutlinedInput-notchedOutline": {
74
- borderColor: fieldTouched && fieldError ? "#FF5630" : theme.palette.primary.main
75
- }
76
- };
77
- return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
78
- /* @__PURE__ */ jsxs(Typography, { variant: "button", sx: { color: theme.palette.text.primary, mb: 1, display: "block" }, children: [
79
- label,
80
- required && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
81
- ] }),
82
- /* @__PURE__ */ jsx(DemoContainer, { components: ["DatePicker"], children: /* @__PURE__ */ jsx(
43
+ var AppDatePicker = forwardRef(
44
+ ({
45
+ name,
46
+ label,
47
+ required = false,
48
+ disabled = false,
49
+ variant = "outlined",
50
+ showIcon = true,
51
+ format = "DD/MM/YYYY",
52
+ sx,
53
+ formControlSx,
54
+ textFieldSx,
55
+ labelSx,
56
+ inputSx,
57
+ errorSx,
58
+ iconSx,
59
+ onChange: externalOnChange,
60
+ onBlur: externalOnBlur,
61
+ ...otherProps
62
+ }, ref) => {
63
+ const { values, setFieldValue, touched, errors, setFieldTouched } = useFormikContext();
64
+ const fieldValue = _19.get(values, name);
65
+ const fieldError = _19.get(errors, name);
66
+ const isTouched = _19.get(touched, name);
67
+ const handleChange = (newValue, context) => {
68
+ setFieldValue(name, newValue);
69
+ if (externalOnChange) {
70
+ externalOnChange(newValue, context);
71
+ }
72
+ };
73
+ const handleBlur = (event) => {
74
+ setFieldTouched(name, true);
75
+ if (externalOnBlur) {
76
+ externalOnBlur(event);
77
+ }
78
+ };
79
+ return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsx(DemoContainer, { components: ["DatePicker"], children: /* @__PURE__ */ jsx(
83
80
  DatePicker,
84
81
  {
85
- value: fieldValue ? new Date(fieldValue) : null,
86
- disablePast,
87
- onChange: (newValue) => {
88
- setFieldValue(name, newValue || "");
89
- },
82
+ label,
83
+ value: fieldValue ? fieldValue instanceof Dayjs ? fieldValue : null : null,
84
+ onChange: handleChange,
85
+ format,
86
+ disabled,
90
87
  slotProps: {
91
88
  textField: {
92
89
  fullWidth: true,
93
- variant: "outlined",
94
- error: fieldTouched && Boolean(fieldError),
95
- sx: textFieldSx,
96
- helperText: fieldTouched && fieldError ? fieldError : void 0,
97
- FormHelperTextProps: {
98
- sx: {
99
- color: "error.main",
100
- marginLeft: 0,
101
- marginTop: 0.5
90
+ variant,
91
+ error: isTouched && Boolean(fieldError),
92
+ helperText: isTouched && fieldError ? fieldError : void 0,
93
+ onBlur: handleBlur,
94
+ sx: [
95
+ {
96
+ "& .MuiOutlinedInput-root": {
97
+ backgroundColor: "background.paper",
98
+ "&.Mui-focused": {
99
+ "& .MuiOutlinedInput-notchedOutline": {
100
+ borderColor: "primary.main"
101
+ }
102
+ },
103
+ "&.Mui-error": {
104
+ backgroundColor: "error.lighter",
105
+ "& .MuiOutlinedInput-input": {
106
+ color: "error.main"
107
+ }
108
+ },
109
+ "&.Mui-disabled": {
110
+ backgroundColor: "action.disabledBackground",
111
+ "& .MuiOutlinedInput-notchedOutline": {
112
+ borderColor: "action.disabled"
113
+ }
114
+ },
115
+ ...inputSx
116
+ },
117
+ "& .MuiOutlinedInput-notchedOutline": {
118
+ borderColor: isTouched && fieldError ? "error.main" : "divider"
119
+ },
120
+ "&:hover .MuiOutlinedInput-notchedOutline": {
121
+ borderColor: isTouched && fieldError ? "error.main" : "primary.main"
122
+ },
123
+ ...textFieldSx
102
124
  }
125
+ ],
126
+ FormHelperTextProps: {
127
+ sx: [
128
+ {
129
+ color: "error.main",
130
+ mx: 0,
131
+ mt: 0.5,
132
+ ...errorSx
133
+ }
134
+ ]
135
+ },
136
+ InputLabelProps: {
137
+ sx: [
138
+ {
139
+ color: "text.secondary",
140
+ "&.Mui-focused": {
141
+ color: "primary.main"
142
+ },
143
+ "&.Mui-error": {
144
+ color: "error.main"
145
+ },
146
+ ...labelSx
147
+ }
148
+ ]
149
+ },
150
+ InputProps: {
151
+ endAdornment: showIcon ? /* @__PURE__ */ jsx(
152
+ Box,
153
+ {
154
+ component: "span",
155
+ sx: [
156
+ {
157
+ color: "text.secondary",
158
+ "&:hover": {
159
+ color: "primary.main"
160
+ },
161
+ "&.Mui-disabled": {
162
+ color: "action.disabled"
163
+ },
164
+ ...iconSx
165
+ }
166
+ ]
167
+ }
168
+ ) : null
103
169
  }
104
170
  }
105
171
  },
106
172
  ...otherProps
107
173
  }
108
- ) }),
109
- fieldTouched && fieldError && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 0.5, display: "none" }, children: fieldError })
110
- ] }) });
111
- };
174
+ ) }) }) });
175
+ }
176
+ );
177
+ AppDatePicker.displayName = "AppDatePicker";
112
178
  var AppDatePicker_default = AppDatePicker;
113
- var AppDateAndTimePicker = ({ name, label, required, ...otherProps }) => {
114
- const theme = useTheme$1();
115
- const { errors, touched, values, setFieldValue } = useFormikContext();
179
+ var AppDateAndTimePicker = forwardRef((props, ref) => {
180
+ const {
181
+ name,
182
+ label,
183
+ required = false,
184
+ disabled = false,
185
+ minDate = null,
186
+ maxDate = null,
187
+ format = "DD/MM/YYYY hh:mm A",
188
+ variant = "outlined",
189
+ sx,
190
+ formControlSx,
191
+ textFieldSx,
192
+ labelSx,
193
+ inputSx,
194
+ errorSx,
195
+ helperTextSx,
196
+ showHelperText = false,
197
+ helperText,
198
+ onChange: externalOnChange,
199
+ onBlur,
200
+ ...otherProps
201
+ } = props;
202
+ const theme = useTheme();
203
+ const { errors, touched, values, setFieldValue, setFieldTouched } = useFormikContext();
116
204
  const fieldError = get(errors, name);
117
205
  const isTouched = get(touched, name);
118
206
  const val = get(values, name);
119
- const textFieldSx = {
207
+ const handleChange = (value) => {
208
+ setFieldValue(name, value);
209
+ if (externalOnChange) {
210
+ externalOnChange(value);
211
+ }
212
+ };
213
+ const handleBlur = () => {
214
+ setFieldTouched(name, true);
215
+ };
216
+ const handleTextFieldBlur = (event) => {
217
+ handleBlur();
218
+ if (onBlur) {
219
+ onBlur(event);
220
+ }
221
+ };
222
+ const sxArray = sx ? Array.isArray(sx) ? sx : [sx] : [];
223
+ const formControlSxArray = formControlSx ? Array.isArray(formControlSx) ? formControlSx : [formControlSx] : [];
224
+ const labelSxArray = labelSx ? Array.isArray(labelSx) ? labelSx : [labelSx] : [];
225
+ const textFieldSxArray = textFieldSx ? Array.isArray(textFieldSx) ? textFieldSx : [textFieldSx] : [];
226
+ const helperTextSxArray = helperTextSx ? Array.isArray(helperTextSx) ? helperTextSx : [helperTextSx] : [];
227
+ const errorSxArray = errorSx ? Array.isArray(errorSx) ? errorSx : [errorSx] : [];
228
+ const baseTextFieldSx = {
120
229
  "& .MuiOutlinedInput-root": {
121
- backgroundColor: theme.palette.common.white,
122
- color: theme.palette.text.secondary,
230
+ backgroundColor: "background.paper",
231
+ color: "text.primary",
123
232
  "&.Mui-focused": {
124
233
  "& .MuiOutlinedInput-notchedOutline": {
125
- borderColor: theme.palette.primary.main
234
+ borderColor: "primary.main"
126
235
  }
127
236
  },
128
- ...isTouched && fieldError ? {
129
- backgroundColor: "#FFF2EF",
237
+ "&.Mui-error": {
238
+ backgroundColor: `${theme.palette.error.light}15`,
130
239
  "& .MuiOutlinedInput-input": {
131
- color: "#FF5A35"
240
+ color: "error.main"
241
+ }
242
+ },
243
+ "&.Mui-disabled": {
244
+ backgroundColor: "action.disabledBackground",
245
+ "& .MuiOutlinedInput-notchedOutline": {
246
+ borderColor: "action.disabled"
132
247
  }
133
- } : {}
248
+ },
249
+ ...inputSx
134
250
  },
135
251
  "& .MuiOutlinedInput-notchedOutline": {
136
- borderColor: isTouched && fieldError ? "#FF5630" : theme.palette.grey[400]
252
+ borderColor: isTouched && fieldError ? "error.main" : "divider"
137
253
  },
138
254
  "&:hover .MuiOutlinedInput-notchedOutline": {
139
- borderColor: isTouched && fieldError ? "#FF5630" : theme.palette.primary.main
255
+ borderColor: isTouched && fieldError ? theme.palette.error.main : theme.palette.primary.main
140
256
  }
141
257
  };
142
- return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", children: [
143
- /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(DemoContainer, { components: ["DateTimePicker"], children: /* @__PURE__ */ jsx(
144
- DateTimePicker,
145
- {
146
- value: val ? new Date(val) : null,
147
- label,
148
- onChange: (newValue) => {
149
- setFieldValue(name, newValue || "", true);
150
- },
151
- slotProps: {
152
- textField: {
153
- fullWidth: true,
154
- error: isTouched && Boolean(fieldError),
155
- sx: textFieldSx,
156
- variant: "outlined",
157
- helperText: isTouched && fieldError ? fieldError : void 0,
158
- FormHelperTextProps: {
159
- sx: {
160
- color: "error.main",
161
- marginLeft: 0,
162
- marginTop: 0.5
163
- }
258
+ const textFieldHelperText = isTouched && fieldError ? fieldError : showHelperText && helperText ? helperText : "";
259
+ const showFormHelperText = showHelperText && helperText && !(isTouched && fieldError);
260
+ return /* @__PURE__ */ jsx(Box, { sx: sxArray, ref, children: /* @__PURE__ */ jsxs(
261
+ FormControl,
262
+ {
263
+ fullWidth: true,
264
+ error: isTouched && Boolean(fieldError),
265
+ disabled,
266
+ sx: [
267
+ {
268
+ "& .MuiInputLabel-root": {
269
+ "&.Mui-focused": {
270
+ color: "primary.main"
271
+ },
272
+ "&.Mui-error": {
273
+ color: "error.main"
274
+ },
275
+ "&.Mui-disabled": {
276
+ color: "text.disabled"
164
277
  }
165
278
  }
166
279
  },
167
- ...otherProps
168
- }
169
- ) }) }),
170
- isTouched && fieldError && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 0.5, display: "none" }, children: fieldError })
171
- ] });
172
- };
280
+ ...formControlSxArray
281
+ ],
282
+ children: [
283
+ label && /* @__PURE__ */ jsxs(
284
+ Typography,
285
+ {
286
+ variant: "subtitle2",
287
+ sx: [
288
+ {
289
+ mb: 1,
290
+ color: isTouched && fieldError ? "error.main" : "text.primary",
291
+ "&.Mui-disabled": {
292
+ color: "text.disabled"
293
+ }
294
+ },
295
+ ...labelSxArray
296
+ ],
297
+ children: [
298
+ label,
299
+ required && /* @__PURE__ */ jsx(
300
+ Typography,
301
+ {
302
+ component: "span",
303
+ sx: {
304
+ color: "error.main",
305
+ ml: 0.5
306
+ },
307
+ children: "*"
308
+ }
309
+ )
310
+ ]
311
+ }
312
+ ),
313
+ /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(
314
+ DateTimePicker,
315
+ {
316
+ value: val,
317
+ onChange: handleChange,
318
+ minDate,
319
+ maxDate,
320
+ format,
321
+ disabled,
322
+ slotProps: {
323
+ textField: {
324
+ fullWidth: true,
325
+ variant,
326
+ error: isTouched && Boolean(fieldError),
327
+ helperText: textFieldHelperText,
328
+ onBlur: handleTextFieldBlur,
329
+ sx: [baseTextFieldSx, ...textFieldSxArray],
330
+ placeholder: otherProps.placeholder,
331
+ ...otherProps
332
+ },
333
+ actionBar: {
334
+ actions: ["clear", "today"]
335
+ }
336
+ },
337
+ ...otherProps
338
+ }
339
+ ) }),
340
+ showFormHelperText && /* @__PURE__ */ jsx(
341
+ FormHelperText,
342
+ {
343
+ sx: [
344
+ {
345
+ mx: 0,
346
+ mt: 0.5,
347
+ color: "text.secondary"
348
+ },
349
+ ...helperTextSxArray
350
+ ],
351
+ children: helperText
352
+ }
353
+ ),
354
+ isTouched && fieldError && /* @__PURE__ */ jsx(
355
+ FormHelperText,
356
+ {
357
+ sx: [
358
+ {
359
+ mx: 0,
360
+ mt: 0.5,
361
+ color: "error.main"
362
+ },
363
+ ...errorSxArray
364
+ ],
365
+ children: fieldError
366
+ }
367
+ )
368
+ ]
369
+ }
370
+ ) });
371
+ });
372
+ AppDateAndTimePicker.displayName = "AppDateAndTimePicker";
173
373
  var AppDateAndTimePicker_default = AppDateAndTimePicker;
174
- function AppFormErrorMessage({ name, alwaysShow = false }) {
374
+ function AppFormErrorMessage({
375
+ name,
376
+ alwaysShow = false,
377
+ sx,
378
+ containerSx,
379
+ textSx
380
+ }) {
175
381
  const { errors, touched } = useFormikContext();
176
- const fieldError = _17.get(errors, name);
177
- const isTouched = _17.get(touched, name);
382
+ const fieldError = _19.get(errors, name);
383
+ const isTouched = _19.get(touched, name);
178
384
  const showError = fieldError && typeof fieldError === "string";
179
385
  if (alwaysShow) {
180
- return showError ? /* @__PURE__ */ jsx("div", { style: { marginTop: 1 }, children: /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: fieldError }) }) }) : null;
386
+ return showError ? /* @__PURE__ */ jsx(
387
+ Box,
388
+ {
389
+ sx: [{
390
+ mt: 0.5,
391
+ ...containerSx
392
+ }, sx],
393
+ children: /* @__PURE__ */ jsx(
394
+ Typography,
395
+ {
396
+ variant: "caption",
397
+ color: "error",
398
+ sx: [{
399
+ fontSize: "0.75rem",
400
+ display: "block",
401
+ ...textSx
402
+ }],
403
+ children: fieldError
404
+ }
405
+ )
406
+ }
407
+ ) : null;
181
408
  }
182
409
  if (isTouched && showError) {
183
- return /* @__PURE__ */ jsx("div", { style: { marginTop: 1 }, children: /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: fieldError }) }) });
410
+ return /* @__PURE__ */ jsx(
411
+ Box,
412
+ {
413
+ sx: [{
414
+ mt: 0.5,
415
+ ...containerSx
416
+ }, sx],
417
+ children: /* @__PURE__ */ jsx(
418
+ Typography,
419
+ {
420
+ variant: "caption",
421
+ color: "error",
422
+ sx: [{
423
+ fontSize: "0.75rem",
424
+ display: "block",
425
+ ...textSx
426
+ }],
427
+ children: fieldError
428
+ }
429
+ )
430
+ }
431
+ );
184
432
  }
185
433
  return null;
186
434
  }
187
435
  var AppFormErrorMessage_default = AppFormErrorMessage;
188
- function AppTextArea({ name, label }) {
189
- const { errors, getFieldProps, touched } = useFormikContext();
190
- const fieldError = _17.get(errors, name);
191
- const isTouched = _17.get(touched, name);
192
- return /* @__PURE__ */ jsxs(Fragment, { children: [
436
+ var AppTextArea = forwardRef(({
437
+ name,
438
+ label,
439
+ placeholder = "Enter text...",
440
+ variant = "outlined",
441
+ rows = 4,
442
+ maxLength,
443
+ required = false,
444
+ disabled = false,
445
+ readOnly = false,
446
+ showCount = false,
447
+ sx,
448
+ textFieldSx,
449
+ labelSx,
450
+ inputSx,
451
+ errorSx,
452
+ counterSx,
453
+ onChange,
454
+ onFocus,
455
+ onBlur,
456
+ ...rest
457
+ }, ref) => {
458
+ var _a, _b, _c, _d;
459
+ const { errors, getFieldProps, touched, setFieldValue } = useFormikContext();
460
+ const fieldError = _19.get(errors, name);
461
+ const isTouched = _19.get(touched, name);
462
+ const value = _19.get(getFieldProps(name), "value", "");
463
+ const handleChange = (e) => {
464
+ const newValue = e.target.value;
465
+ if (maxLength && newValue.length > maxLength)
466
+ return;
467
+ if (onChange) {
468
+ onChange(newValue);
469
+ }
470
+ setFieldValue(name, newValue);
471
+ };
472
+ const handleFocus = (e) => {
473
+ if (onFocus)
474
+ onFocus(e);
475
+ };
476
+ const handleBlur = (e) => {
477
+ if (onBlur)
478
+ onBlur(e);
479
+ };
480
+ const characterCount = (value == null ? void 0 : value.length) || 0;
481
+ return /* @__PURE__ */ jsxs(Box, { sx, ref, children: [
193
482
  /* @__PURE__ */ jsx(
194
483
  TextField,
195
484
  {
196
485
  ...getFieldProps(name),
197
486
  fullWidth: true,
198
- sx: { width: "100%" },
199
- placeholder: "Description",
487
+ variant,
200
488
  multiline: true,
201
- rows: 4,
489
+ rows,
490
+ placeholder,
491
+ disabled,
492
+ inputProps: {
493
+ maxLength,
494
+ readOnly,
495
+ ...rest.inputProps
496
+ },
497
+ InputProps: {
498
+ ...rest.InputProps,
499
+ sx: [{
500
+ "& .MuiOutlinedInput-notchedOutline": {
501
+ borderColor: "divider"
502
+ },
503
+ "&:hover .MuiOutlinedInput-notchedOutline": {
504
+ borderColor: "primary.main"
505
+ },
506
+ "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
507
+ borderColor: "primary.main"
508
+ },
509
+ "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
510
+ borderColor: "action.disabled"
511
+ },
512
+ ...inputSx
513
+ }, ...Array.isArray((_a = rest.InputProps) == null ? void 0 : _a.sx) ? rest.InputProps.sx : [(_b = rest.InputProps) == null ? void 0 : _b.sx]]
514
+ },
515
+ FormHelperTextProps: {
516
+ ...rest.FormHelperTextProps,
517
+ sx: [{
518
+ m: 0,
519
+ mt: 0.5,
520
+ ...errorSx
521
+ }, ...Array.isArray((_c = rest.FormHelperTextProps) == null ? void 0 : _c.sx) ? rest.FormHelperTextProps.sx : [(_d = rest.FormHelperTextProps) == null ? void 0 : _d.sx]]
522
+ },
523
+ label: label && /* @__PURE__ */ jsxs(
524
+ Typography,
525
+ {
526
+ variant: "body2",
527
+ component: "span",
528
+ sx: [{
529
+ color: "text.primary",
530
+ ...disabled && {
531
+ color: "text.disabled"
532
+ }
533
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
534
+ children: [
535
+ label,
536
+ required && /* @__PURE__ */ jsx(
537
+ Typography,
538
+ {
539
+ component: "span",
540
+ sx: {
541
+ color: "error.main",
542
+ ml: 0.5
543
+ },
544
+ children: "*"
545
+ }
546
+ )
547
+ ]
548
+ }
549
+ ),
202
550
  error: Boolean(fieldError) && isTouched,
203
- label: /* @__PURE__ */ jsxs(Typography, { variant: "caption", component: "p", children: [
204
- label,
205
- " ",
206
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
207
- ] })
551
+ helperText: isTouched && fieldError,
552
+ onChange: handleChange,
553
+ onFocus: handleFocus,
554
+ onBlur: handleBlur,
555
+ sx: [{
556
+ "& .MuiOutlinedInput-root": {
557
+ backgroundColor: "background.paper",
558
+ "&:hover .MuiOutlinedInput-notchedOutline": {
559
+ borderColor: "primary.main"
560
+ }
561
+ },
562
+ "& .MuiInputBase-input": {
563
+ color: "text.primary"
564
+ },
565
+ "& .MuiInputLabel-root": {
566
+ color: "text.secondary",
567
+ "&.Mui-focused": {
568
+ color: "primary.main"
569
+ }
570
+ },
571
+ ...textFieldSx
572
+ }, ...Array.isArray(rest.sx) ? rest.sx : [rest.sx]],
573
+ ...rest
208
574
  }
209
575
  ),
210
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", sx: { ml: "0 !important" }, variant: "caption", display: "block", gutterBottom: true, children: fieldError })
576
+ (showCount || maxLength) && /* @__PURE__ */ jsxs(
577
+ Typography,
578
+ {
579
+ variant: "caption",
580
+ sx: [{
581
+ display: "block",
582
+ textAlign: "right",
583
+ mt: 0.5,
584
+ color: "text.secondary",
585
+ ...maxLength && characterCount > maxLength * 0.9 && {
586
+ color: "error.main"
587
+ }
588
+ }, ...Array.isArray(counterSx) ? counterSx : [counterSx]],
589
+ children: [
590
+ characterCount,
591
+ maxLength ? ` / ${maxLength}` : ""
592
+ ]
593
+ }
594
+ )
211
595
  ] });
212
- }
596
+ });
597
+ AppTextArea.displayName = "AppTextArea";
598
+ var AppTextArea_default = AppTextArea;
213
599
  function AppTagsCreator({
214
600
  placeholder,
215
601
  name,
216
602
  multiple,
217
603
  label,
218
604
  options = [],
219
- disabled
605
+ disabled,
606
+ sx,
607
+ formControlSx,
608
+ textFieldSx,
609
+ chipSx,
610
+ listboxSx,
611
+ errorSx,
612
+ chipContainerSx,
613
+ inputSx
220
614
  }) {
221
615
  const { errors, touched, getFieldProps, values, setFieldValue, setTouched } = useFormikContext();
222
- const fieldError = _17.get(errors, name);
223
- const isTouched = _17.get(touched, name);
224
- const val = _17.get(values, name);
225
- return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", children: [
226
- /* @__PURE__ */ jsx(
227
- Autocomplete,
228
- {
229
- ...getFieldProps(name),
230
- multiple,
231
- id: "tags-filled",
232
- options,
233
- disabled,
234
- autoHighlight: true,
235
- freeSolo: true,
236
- onBlur: (event) => setFieldValue(name, event.target.value, true),
237
- renderTags: (value, getTagProps) => value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index })),
238
- value: val,
239
- onChange: (event, newValue) => {
240
- setTouched({ ...touched, [name]: true });
241
- setFieldValue(name, newValue, true);
242
- },
243
- renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, variant: "filled", label, placeholder })
244
- }
245
- ),
246
- fieldError != null && isTouched === true && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
247
- ] });
616
+ const fieldError = _19.get(errors, name);
617
+ const isTouched = _19.get(touched, name);
618
+ const val = _19.get(values, name);
619
+ return /* @__PURE__ */ jsxs(
620
+ FormControl,
621
+ {
622
+ fullWidth: true,
623
+ variant: "filled",
624
+ sx: formControlSx,
625
+ children: [
626
+ /* @__PURE__ */ jsx(
627
+ Autocomplete,
628
+ {
629
+ ...getFieldProps(name),
630
+ multiple,
631
+ id: "tags-filled",
632
+ options,
633
+ disabled,
634
+ autoHighlight: true,
635
+ freeSolo: true,
636
+ onBlur: (event) => setFieldValue(name, event.target.value, true),
637
+ renderTags: (value, getTagProps) => /* @__PURE__ */ jsx(Box, { sx: {
638
+ display: "flex",
639
+ flexWrap: "wrap",
640
+ gap: 0.5,
641
+ ...chipContainerSx
642
+ }, children: value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ createElement(
643
+ Chip,
644
+ {
645
+ variant: "outlined",
646
+ label: option,
647
+ ...getTagProps({ index }),
648
+ key: index,
649
+ sx: {
650
+ "& .MuiChip-deleteIcon": {
651
+ color: "text.secondary",
652
+ "&:hover": {
653
+ color: "error.main"
654
+ }
655
+ },
656
+ ...chipSx
657
+ }
658
+ }
659
+ )) }),
660
+ value: val,
661
+ onChange: (event, newValue) => {
662
+ setTouched({ ...touched, [name]: true });
663
+ setFieldValue(name, newValue, true);
664
+ },
665
+ renderInput: (params) => /* @__PURE__ */ jsx(
666
+ TextField,
667
+ {
668
+ ...params,
669
+ variant: "filled",
670
+ label,
671
+ placeholder,
672
+ sx: {
673
+ "& .MuiFilledInput-root": {
674
+ backgroundColor: "background.paper",
675
+ "&:hover": {
676
+ backgroundColor: "action.hover"
677
+ },
678
+ "&.Mui-focused": {
679
+ backgroundColor: "background.paper"
680
+ }
681
+ },
682
+ ...textFieldSx
683
+ },
684
+ InputProps: {
685
+ ...params.InputProps,
686
+ sx: inputSx
687
+ }
688
+ }
689
+ ),
690
+ sx: {
691
+ "& .MuiAutocomplete-listbox": {
692
+ "& li": {
693
+ '&[data-focus="true"]': {
694
+ backgroundColor: "action.hover"
695
+ },
696
+ '&[aria-selected="true"]': {
697
+ backgroundColor: "action.selected"
698
+ },
699
+ '&[aria-selected="true"].Mui-focused': {
700
+ backgroundColor: "action.hover"
701
+ }
702
+ },
703
+ ...listboxSx
704
+ },
705
+ ...sx
706
+ }
707
+ }
708
+ ),
709
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsx(
710
+ Typography,
711
+ {
712
+ variant: "caption",
713
+ sx: [{
714
+ color: "error.main",
715
+ display: "block",
716
+ mt: 0.5,
717
+ ...errorSx
718
+ }],
719
+ gutterBottom: true,
720
+ children: fieldError
721
+ }
722
+ )
723
+ ]
724
+ }
725
+ );
248
726
  }
249
727
  function AppSwitchInput({
250
728
  name,
251
729
  label,
252
730
  className = "",
253
- style = {},
254
- inputStyle = {},
731
+ sx,
732
+ containerSx,
733
+ switchSx,
734
+ labelSx,
735
+ errorSx,
736
+ labelPlacement = "start",
737
+ disabled = false,
255
738
  ...otherProps
256
739
  }) {
257
740
  const { errors, touched, setFieldValue, values } = useFormikContext();
258
- const hasError = Boolean(touched == null ? void 0 : touched[name]) && Boolean(errors[name]);
259
- return /* @__PURE__ */ jsxs("div", { className: `my-2 ${className} d-flex `, style, children: [
260
- label != null && /* @__PURE__ */ jsx(Typography, { color: "text.primary", children: label }),
261
- /* @__PURE__ */ jsx(
262
- Switch,
263
- {
264
- id: name,
265
- checked: Boolean(values[name]),
266
- onChange: () => void setFieldValue(name, values[name] === false ? true : false),
267
- style: inputStyle,
268
- ...otherProps
269
- }
270
- ),
271
- hasError && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: errors[name] })
272
- ] });
741
+ const fieldError = _19.get(errors, name);
742
+ const isTouched = _19.get(touched, name);
743
+ return /* @__PURE__ */ jsxs(
744
+ Box,
745
+ {
746
+ className,
747
+ sx: [{
748
+ display: "flex",
749
+ flexDirection: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
750
+ alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
751
+ justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
752
+ gap: 1,
753
+ my: 1,
754
+ ...containerSx
755
+ }, sx],
756
+ children: [
757
+ label && /* @__PURE__ */ jsx(
758
+ Typography,
759
+ {
760
+ variant: "body2",
761
+ sx: [{
762
+ color: "text.primary",
763
+ order: labelPlacement === "start" ? 0 : 1,
764
+ ...labelSx
765
+ }],
766
+ children: label
767
+ }
768
+ ),
769
+ /* @__PURE__ */ jsx(
770
+ Switch,
771
+ {
772
+ id: name,
773
+ checked: Boolean(values[name]),
774
+ disabled,
775
+ onChange: () => {
776
+ setFieldValue(name, !values[name], true);
777
+ },
778
+ sx: [{
779
+ "& .MuiSwitch-switchBase": {
780
+ color: "text.secondary",
781
+ "&.Mui-checked": {
782
+ color: "primary.main",
783
+ "& + .MuiSwitch-track": {
784
+ backgroundColor: "primary.main",
785
+ opacity: 0.5
786
+ }
787
+ },
788
+ "&.Mui-disabled": {
789
+ color: "action.disabled",
790
+ "& + .MuiSwitch-track": {
791
+ backgroundColor: "action.disabledBackground"
792
+ }
793
+ }
794
+ },
795
+ ...switchSx
796
+ }],
797
+ ...otherProps
798
+ }
799
+ ),
800
+ isTouched === true && fieldError != null && /* @__PURE__ */ jsx(
801
+ Typography,
802
+ {
803
+ variant: "caption",
804
+ sx: [{
805
+ color: "error.main",
806
+ display: "block",
807
+ mt: 0.5,
808
+ ...errorSx
809
+ }],
810
+ gutterBottom: true,
811
+ children: fieldError
812
+ }
813
+ )
814
+ ]
815
+ }
816
+ );
273
817
  }
274
- function AppSwitch({ name, label }) {
818
+ function AppSwitch({
819
+ name,
820
+ label,
821
+ sx,
822
+ containerSx,
823
+ switchSx,
824
+ labelSx,
825
+ errorSx,
826
+ labelPlacement = "start",
827
+ disabled = false,
828
+ ...otherProps
829
+ }) {
275
830
  const { errors, touched, setFieldValue, values } = useFormikContext();
276
- const fieldValue = _17.get(values, name);
277
- const fieldError = _17.get(errors, name);
278
- const isTouched = _17.get(touched, name);
279
- return /* @__PURE__ */ jsxs(Stack, { direction: "row-reverse", alignItems: "center", spacing: 1, children: [
280
- /* @__PURE__ */ jsx(Typography, { children: label }),
281
- /* @__PURE__ */ jsx(
282
- Switch,
283
- {
284
- checked: fieldValue,
285
- onChange: () => {
286
- setFieldValue(name, !fieldValue, true);
287
- }
288
- }
289
- ),
290
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
291
- ] });
831
+ const fieldValue = _19.get(values, name);
832
+ const fieldError = _19.get(errors, name);
833
+ const isTouched = _19.get(touched, name);
834
+ return /* @__PURE__ */ jsxs(
835
+ Stack,
836
+ {
837
+ direction: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
838
+ alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
839
+ justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
840
+ spacing: 1,
841
+ sx: [{
842
+ width: "100%",
843
+ ...labelPlacement === "top" || labelPlacement === "bottom" ? { alignItems: "flex-start" } : {},
844
+ ...containerSx
845
+ }, sx],
846
+ children: [
847
+ /* @__PURE__ */ jsx(
848
+ Typography,
849
+ {
850
+ variant: "body2",
851
+ sx: [{
852
+ color: "text.primary",
853
+ order: labelPlacement === "start" ? 0 : 1,
854
+ ...labelSx
855
+ }],
856
+ children: label
857
+ }
858
+ ),
859
+ /* @__PURE__ */ jsx(
860
+ Switch,
861
+ {
862
+ checked: fieldValue,
863
+ disabled,
864
+ onChange: () => {
865
+ setFieldValue(name, !fieldValue, true);
866
+ },
867
+ sx: [{
868
+ "& .MuiSwitch-switchBase": {
869
+ color: "text.secondary",
870
+ "&.Mui-checked": {
871
+ color: "primary.main",
872
+ "& + .MuiSwitch-track": {
873
+ backgroundColor: "primary.main",
874
+ opacity: 0.5
875
+ }
876
+ },
877
+ "&.Mui-disabled": {
878
+ color: "action.disabled",
879
+ "& + .MuiSwitch-track": {
880
+ backgroundColor: "action.disabledBackground"
881
+ }
882
+ }
883
+ },
884
+ ...switchSx
885
+ }],
886
+ ...otherProps
887
+ }
888
+ ),
889
+ isTouched === true && fieldError != null && /* @__PURE__ */ jsx(
890
+ Typography,
891
+ {
892
+ variant: "caption",
893
+ sx: [{
894
+ color: "error.main",
895
+ display: "block",
896
+ mt: 0.5,
897
+ ...errorSx
898
+ }],
899
+ gutterBottom: true,
900
+ children: fieldError
901
+ }
902
+ )
903
+ ]
904
+ }
905
+ );
292
906
  }
293
907
  var Form = ({
294
908
  children,
@@ -298,12 +912,26 @@ var Form = ({
298
912
  return /* @__PURE__ */ jsx(Formik, { ...props, children: (formikProps) => /* @__PURE__ */ jsx(Form$1, { className, children: typeof children === "function" ? children(formikProps) : children }) });
299
913
  };
300
914
  var Form_default = Form;
301
- function AppAutoComplete({ placeholder, name, label, options = [] }) {
915
+ function AppAutoComplete({
916
+ placeholder,
917
+ name,
918
+ variant = "outlined",
919
+ label,
920
+ options = [],
921
+ value: propValue,
922
+ onChange: propOnChange,
923
+ sx,
924
+ formControlSx,
925
+ textFieldSx,
926
+ chipSx,
927
+ errorSx
928
+ }) {
302
929
  const { errors, touched, getFieldProps, values, setFieldValue } = useFormikContext();
303
- const fieldError = _17.get(errors, name);
304
- const isTouched = _17.get(touched, name);
305
- const val = _17.get(values, name);
306
- return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", children: [
930
+ const fieldError = _19.get(errors, name);
931
+ const isTouched = _19.get(touched, name);
932
+ const formikValue = _19.get(values, name);
933
+ const val = propValue !== void 0 ? propValue : formikValue || [];
934
+ return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
307
935
  /* @__PURE__ */ jsx(
308
936
  Autocomplete,
309
937
  {
@@ -312,24 +940,72 @@ function AppAutoComplete({ placeholder, name, label, options = [] }) {
312
940
  id: "tags-filled",
313
941
  options,
314
942
  freeSolo: true,
315
- renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index })),
943
+ renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ createElement(
944
+ Chip,
945
+ {
946
+ variant: "outlined",
947
+ label: option,
948
+ ...getTagProps({ index }),
949
+ key: index,
950
+ sx: chipSx
951
+ }
952
+ )),
316
953
  value: val,
317
- onChange: (event, newValue) => {
318
- setFieldValue(name, newValue, true);
954
+ onChange: (event, newValue, reason, details) => {
955
+ if (propOnChange) {
956
+ propOnChange(event, newValue, reason, details);
957
+ } else {
958
+ setFieldValue(name, newValue, true);
959
+ }
319
960
  },
320
- renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, variant: "filled", label, placeholder })
961
+ renderInput: (params) => /* @__PURE__ */ jsx(
962
+ TextField,
963
+ {
964
+ ...params,
965
+ variant,
966
+ placeholder,
967
+ label,
968
+ error: isTouched && Boolean(fieldError),
969
+ sx: textFieldSx
970
+ }
971
+ ),
972
+ sx
321
973
  }
322
974
  ),
323
- fieldError != null && isTouched === true && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
975
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsx(
976
+ Typography,
977
+ {
978
+ color: "error",
979
+ variant: "caption",
980
+ display: "block",
981
+ gutterBottom: true,
982
+ sx: {
983
+ color: "#FF5630",
984
+ ...errorSx
985
+ },
986
+ children: fieldError
987
+ }
988
+ )
324
989
  ] });
325
990
  }
326
- function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
991
+ function AppAutoCompleter({
992
+ placeholder,
993
+ name,
994
+ label,
995
+ options,
996
+ disabled,
997
+ sx,
998
+ formControlSx,
999
+ textFieldSx,
1000
+ listboxSx,
1001
+ errorSx
1002
+ }) {
327
1003
  const { errors, touched, values, setFieldValue } = useFormikContext();
328
- const fieldError = _17.get(errors, name);
329
- const isTouched = _17.get(touched, name);
330
- const value = _17.get(values, name);
1004
+ const fieldError = _19.get(errors, name);
1005
+ const isTouched = _19.get(touched, name);
1006
+ const value = _19.get(values, name);
331
1007
  const selectedOption = options.find((opt) => opt.value === value) || null;
332
- return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", children: [
1008
+ return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
333
1009
  /* @__PURE__ */ jsx(
334
1010
  Autocomplete3,
335
1011
  {
@@ -339,10 +1015,10 @@ function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
339
1015
  getOptionLabel: (option) => (option == null ? void 0 : option.label) || "",
340
1016
  isOptionEqualToValue: (option, value2) => option.value === value2.value,
341
1017
  autoHighlight: true,
342
- onChange: (_18, newValue) => {
1018
+ onChange: (_20, newValue) => {
343
1019
  setFieldValue(name, newValue ? newValue.value : null);
344
1020
  },
345
- renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.value }, option.label),
1021
+ renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
346
1022
  renderInput: (params) => /* @__PURE__ */ jsx(
347
1023
  TextField,
348
1024
  {
@@ -350,85 +1026,181 @@ function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
350
1026
  label,
351
1027
  placeholder,
352
1028
  error: Boolean(fieldError) && isTouched,
353
- helperText: isTouched && fieldError
1029
+ helperText: isTouched && fieldError,
1030
+ sx: textFieldSx
354
1031
  }
355
1032
  ),
356
- disabled
1033
+ disabled,
1034
+ sx
357
1035
  }
358
1036
  ),
359
- fieldError != null && isTouched === true && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
360
- ] });
361
- }
362
- var CheckboxField = ({ name, option, ...rest }) => {
363
- const { getFieldProps, setFieldValue, touched, errors } = useFormikContext();
364
- const fieldError = _17.get(errors, name);
365
- const isTouched = _17.get(touched, name);
366
- let value = getFieldProps(name).value;
367
- const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
368
- const theme = useTheme$1();
369
- return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
370
- /* @__PURE__ */ jsx(Box, { sx: {
371
- display: "grid",
372
- gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)" },
373
- gap: 2
374
- }, children: option.map((item) => /* @__PURE__ */ jsxs(
375
- Box,
376
- {
377
- sx: {
378
- display: "flex",
379
- flexDirection: "row",
380
- alignItems: "center",
381
- px: 2,
382
- py: 1,
383
- borderRadius: 1
384
- },
385
- children: [
386
- /* @__PURE__ */ jsx(
387
- Checkbox,
388
- {
389
- ...rest,
390
- ...getFieldProps(name),
391
- name,
392
- value: item.name,
393
- checked: checkedNames.includes(item.name),
394
- onChange: (e) => {
395
- const newValue = e.target.checked ? [...checkedNames, item.name] : checkedNames.filter((n) => n !== item.name);
396
- if (option.length === 1) {
397
- setFieldValue(name, e.target.checked);
398
- } else {
399
- setFieldValue(name, newValue);
400
- }
401
- }
402
- }
403
- ),
404
- /* @__PURE__ */ jsx(
405
- Typography9,
406
- {
407
- variant: "button",
408
- color: "initial",
409
- sx: {
410
- color: theme.palette.text.primary
411
- },
412
- children: item.label
413
- }
414
- )
415
- ]
416
- },
417
- item.name
418
- )) }),
419
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(
420
- Typography9,
1037
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsx(
1038
+ Typography,
421
1039
  {
422
- color: "#FF5630",
423
1040
  variant: "caption",
424
1041
  display: "block",
425
1042
  gutterBottom: true,
1043
+ sx: {
1044
+ color: "#FF5630",
1045
+ ...errorSx
1046
+ },
426
1047
  children: fieldError
427
1048
  }
428
1049
  )
429
1050
  ] });
1051
+ }
1052
+ var AppCheckBox = ({
1053
+ name,
1054
+ option,
1055
+ label,
1056
+ required = false,
1057
+ disabled = false,
1058
+ row = false,
1059
+ sx,
1060
+ checkboxSx,
1061
+ labelSx,
1062
+ errorSx,
1063
+ containerSx,
1064
+ iconSx,
1065
+ checkedSx,
1066
+ ...rest
1067
+ }) => {
1068
+ const { getFieldProps, setFieldValue, touched, errors } = useFormikContext();
1069
+ const fieldError = _19.get(errors, name);
1070
+ const isTouched = _19.get(touched, name);
1071
+ useTheme();
1072
+ const value = getFieldProps(name).value;
1073
+ const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
1074
+ const handleChange = (itemName, isChecked) => {
1075
+ const newValue = isChecked ? [...checkedNames, itemName] : checkedNames.filter((n) => n !== itemName);
1076
+ setFieldValue(name, option.length === 1 ? isChecked : newValue);
1077
+ };
1078
+ return /* @__PURE__ */ jsxs(
1079
+ Box,
1080
+ {
1081
+ sx: [{
1082
+ width: "100%",
1083
+ ...disabled && {
1084
+ opacity: 0.7,
1085
+ pointerEvents: "none"
1086
+ }
1087
+ }, ...Array.isArray(sx) ? sx : [sx]],
1088
+ children: [
1089
+ label && /* @__PURE__ */ jsx(
1090
+ Typography10,
1091
+ {
1092
+ variant: "subtitle2",
1093
+ gutterBottom: true,
1094
+ sx: [{
1095
+ color: "text.primary",
1096
+ fontWeight: "medium",
1097
+ ...required && {
1098
+ "&:after": {
1099
+ content: '" *"',
1100
+ color: "error.main"
1101
+ }
1102
+ },
1103
+ ...disabled && {
1104
+ color: "text.disabled"
1105
+ }
1106
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1107
+ children: label
1108
+ }
1109
+ ),
1110
+ /* @__PURE__ */ jsx(
1111
+ Box,
1112
+ {
1113
+ sx: [{
1114
+ display: "flex",
1115
+ flexDirection: row ? "row" : "column",
1116
+ flexWrap: row ? "wrap" : "nowrap",
1117
+ gap: 2,
1118
+ ...row ? {
1119
+ "& > *": {
1120
+ minWidth: "fit-content"
1121
+ }
1122
+ } : {}
1123
+ }, ...Array.isArray(containerSx) ? containerSx : [containerSx]],
1124
+ children: option.map((item) => /* @__PURE__ */ jsxs(
1125
+ Box,
1126
+ {
1127
+ sx: [{
1128
+ display: "flex",
1129
+ alignItems: "center",
1130
+ borderRadius: 1,
1131
+ transition: "background-color 0.2s",
1132
+ "&:hover": {
1133
+ backgroundColor: !disabled ? "action.hover" : "transparent"
1134
+ },
1135
+ px: 2,
1136
+ py: 1,
1137
+ ...disabled && {
1138
+ color: "text.disabled"
1139
+ }
1140
+ }],
1141
+ children: [
1142
+ /* @__PURE__ */ jsx(
1143
+ Checkbox,
1144
+ {
1145
+ ...getFieldProps(name),
1146
+ name,
1147
+ value: item.name,
1148
+ checked: checkedNames.includes(item.name),
1149
+ onChange: (e) => handleChange(item.name, e.target.checked),
1150
+ disabled: disabled || item.disabled,
1151
+ sx: [{
1152
+ color: "primary.main",
1153
+ "&.Mui-checked": {
1154
+ color: "primary.main",
1155
+ ...checkedSx
1156
+ },
1157
+ "& .MuiSvgIcon-root": {
1158
+ fontSize: 24,
1159
+ ...iconSx
1160
+ },
1161
+ "&.Mui-disabled": {
1162
+ color: "action.disabled"
1163
+ }
1164
+ }, ...Array.isArray(checkboxSx) ? checkboxSx : [checkboxSx]],
1165
+ ...rest
1166
+ }
1167
+ ),
1168
+ /* @__PURE__ */ jsx(
1169
+ Typography10,
1170
+ {
1171
+ variant: "body2",
1172
+ sx: [{
1173
+ color: disabled ? "text.disabled" : "text.primary",
1174
+ ...disabled && {
1175
+ color: "text.disabled"
1176
+ }
1177
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1178
+ children: item.label
1179
+ }
1180
+ )
1181
+ ]
1182
+ },
1183
+ item.name
1184
+ ))
1185
+ }
1186
+ ),
1187
+ isTouched && fieldError && /* @__PURE__ */ jsx(
1188
+ Typography10,
1189
+ {
1190
+ variant: "caption",
1191
+ sx: [{
1192
+ display: "block",
1193
+ mt: 0.5,
1194
+ color: "error.main"
1195
+ }, ...Array.isArray(errorSx) ? errorSx : [errorSx]],
1196
+ children: fieldError
1197
+ }
1198
+ )
1199
+ ]
1200
+ }
1201
+ );
430
1202
  };
431
- var AppCheckBox_default = CheckboxField;
1203
+ var AppCheckBox_default = AppCheckBox;
432
1204
  var Iconify = forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsx(
433
1205
  Box,
434
1206
  {
@@ -447,11 +1219,12 @@ function AppInputField({
447
1219
  type,
448
1220
  InputProps,
449
1221
  required,
1222
+ variant = "outlined",
450
1223
  ...otherProps
451
1224
  }) {
452
1225
  const { errors, getFieldProps, touched } = useFormikContext();
453
- const fieldError = _17.get(errors, name);
454
- const isTouched = _17.get(touched, name);
1226
+ const fieldError = _19.get(errors, name);
1227
+ const isTouched = _19.get(touched, name);
455
1228
  const [showPassword, setShowPassword] = useState(false);
456
1229
  const handleShowPassword = () => {
457
1230
  setShowPassword(!showPassword);
@@ -461,6 +1234,7 @@ function AppInputField({
461
1234
  {
462
1235
  ...getFieldProps(name),
463
1236
  fullWidth: true,
1237
+ variant,
464
1238
  label: required === true ? /* @__PURE__ */ jsxs(Fragment, { children: [
465
1239
  label,
466
1240
  /* @__PURE__ */ jsx(Typography, { sx: { color: "red", pl: 0.5 }, component: "span", children: "*" })
@@ -496,121 +1270,335 @@ function AppInputField({
496
1270
  "& input:-webkit-autofill": {
497
1271
  WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
498
1272
  WebkitTextFillColor: "inherit !important",
499
- transition: "background-color 9999s ease-in-out 0s !important",
500
- caretColor: "inherit"
501
- }
502
- },
503
- helperText: isTouched && fieldError,
504
- type: type === "password" ? showPassword ? "text" : "password" : type,
505
- InputProps: type === "password" ? {
506
- endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { onClick: handleShowPassword, edge: "end", children: /* @__PURE__ */ jsx(Iconify_default, { icon: showPassword ? "viewIcon" : "viewOff" }) }) })
507
- } : InputProps,
508
- ...otherProps
509
- }
510
- );
511
- }
512
- function AppMultiSelector({
513
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
514
- multiple = true,
515
- name,
516
- label,
517
- options = [],
518
- required,
519
- ...otherProps
520
- }) {
521
- const { errors, touched, getFieldProps, values } = useFormikContext();
522
- const fieldError = _17.get(errors, name);
523
- const isTouched = _17.get(touched, name);
524
- const val = _17.get(values, name);
525
- const selectedValues = Array.isArray(val) ? val : [];
526
- return /* @__PURE__ */ jsxs(
527
- FormControl,
528
- {
529
- fullWidth: true,
530
- variant: "filled",
531
- sx: (theme) => ({
532
- "& .MuiOutlinedInput-root": {
533
- borderRadius: "8px",
534
- color: theme.palette.common.black,
535
- background: theme.palette.common.white
536
- },
537
- "& .MuiSvgIcon-root": {
538
- color: theme.palette.common.black
539
- },
540
- "& .MuiSelect-icon": {
541
- color: theme.palette.common.black
542
- },
543
- ".MuiInputLabel-root": {
544
- color: "text.primary"
545
- },
546
- ".MuiInputLabel-root.Mui-focused": {
547
- color: "text.primary"
548
- },
549
- "& .MuiSelect-select": {
550
- color: "text.primary"
1273
+ transition: "background-color 9999s ease-in-out 0s !important",
1274
+ caretColor: "inherit"
551
1275
  }
552
- }),
553
- children: [
554
- /* @__PURE__ */ jsxs(InputLabel, { id: `select-${name}`, children: [
555
- label,
556
- " ",
557
- required === true && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: "*" })
558
- ] }),
559
- /* @__PURE__ */ jsx(
560
- Select,
561
- {
562
- multiple: true,
563
- variant: "outlined",
564
- labelId: `select-${name}`,
565
- label,
566
- ...getFieldProps(name),
567
- value: selectedValues,
568
- sx: { borderRadius: "0px" },
569
- renderValue: (selected) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selected.map((value) => {
570
- var _a;
571
- return /* @__PURE__ */ jsx(
572
- Chip,
573
- {
574
- label: (_a = options.find((obj) => obj.value === value)) == null ? void 0 : _a.label,
575
- sx: { height: "20px", borderRadius: "2px" }
576
- },
577
- value
578
- );
579
- }) }),
580
- error: Boolean(fieldError) && isTouched,
581
- ...otherProps,
582
- children: options.map((single, i) => /* @__PURE__ */ jsxs(MenuItem, { value: single.value, children: [
583
- /* @__PURE__ */ jsx(Checkbox, { checked: selectedValues.indexOf(single.value) > -1 }),
584
- single.label || single.value
585
- ] }, i))
586
- }
587
- ),
588
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
589
- ]
1276
+ },
1277
+ helperText: isTouched && fieldError,
1278
+ type: type === "password" ? showPassword ? "text" : "password" : type,
1279
+ InputProps: type === "password" ? {
1280
+ endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { onClick: handleShowPassword, edge: "end", children: /* @__PURE__ */ jsx(Iconify_default, { icon: showPassword ? "viewIcon" : "viewOff" }) }) })
1281
+ } : InputProps,
1282
+ ...otherProps
590
1283
  }
591
1284
  );
592
1285
  }
1286
+ var AppMultiSelector = forwardRef(
1287
+ ({
1288
+ multiple = true,
1289
+ name,
1290
+ label,
1291
+ options = [],
1292
+ required = false,
1293
+ variant = "outlined",
1294
+ disabled = false,
1295
+ maxSelections,
1296
+ showSelectedCount = true,
1297
+ showHelperText = false,
1298
+ helperText,
1299
+ sx,
1300
+ formControlSx,
1301
+ selectSx,
1302
+ labelSx,
1303
+ chipSx,
1304
+ checkboxSx,
1305
+ menuItemSx,
1306
+ errorSx,
1307
+ helperTextSx,
1308
+ iconSx,
1309
+ onChange: externalOnChange,
1310
+ onOpen,
1311
+ onClose,
1312
+ renderValue: externalRenderValue,
1313
+ renderMenuItem,
1314
+ ...otherProps
1315
+ }, ref) => {
1316
+ const theme = useTheme();
1317
+ const { errors, touched, values, setFieldValue, setFieldTouched } = useFormikContext();
1318
+ const fieldError = _19.get(errors, name);
1319
+ const isTouched = _19.get(touched, name);
1320
+ const val = _19.get(values, name);
1321
+ const selectedValues = Array.isArray(val) ? val : [];
1322
+ const handleChange = (event, child) => {
1323
+ const newValue = event.target.value;
1324
+ if (maxSelections && newValue.length > maxSelections) {
1325
+ return;
1326
+ }
1327
+ setFieldValue(name, newValue, true);
1328
+ if (externalOnChange) {
1329
+ externalOnChange(event, child);
1330
+ }
1331
+ };
1332
+ const handleBlur = () => {
1333
+ setFieldTouched(name, true, true);
1334
+ };
1335
+ const defaultRenderValue = (selected) => /* @__PURE__ */ jsx(
1336
+ Box,
1337
+ {
1338
+ sx: { display: "flex", flexWrap: "wrap", gap: 0.5, minHeight: "24px" },
1339
+ children: selected.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Select options..." }) : selected.map((value) => {
1340
+ const option = options.find((obj) => obj.value === value);
1341
+ return option ? /* @__PURE__ */ jsx(
1342
+ Chip,
1343
+ {
1344
+ label: option.label,
1345
+ size: "small",
1346
+ sx: [
1347
+ {
1348
+ height: "24px",
1349
+ borderRadius: "4px",
1350
+ backgroundColor: "action.selected",
1351
+ "& .MuiChip-label": {
1352
+ px: 1
1353
+ },
1354
+ ...option.disabled && {
1355
+ opacity: 0.6
1356
+ }
1357
+ },
1358
+ chipSx
1359
+ ]
1360
+ },
1361
+ value
1362
+ ) : null;
1363
+ })
1364
+ }
1365
+ );
1366
+ const defaultRenderMenuItem = (option, isSelected) => /* @__PURE__ */ jsxs(
1367
+ MenuItem,
1368
+ {
1369
+ value: option.value,
1370
+ disabled: option.disabled,
1371
+ sx: [
1372
+ {
1373
+ "&.Mui-selected": {
1374
+ backgroundColor: "action.selected",
1375
+ "&:hover": {
1376
+ backgroundColor: "action.hover"
1377
+ }
1378
+ },
1379
+ "&.Mui-disabled": {
1380
+ opacity: 0.5
1381
+ },
1382
+ ...option.sx
1383
+ },
1384
+ menuItemSx
1385
+ ],
1386
+ children: [
1387
+ /* @__PURE__ */ jsx(
1388
+ Checkbox,
1389
+ {
1390
+ checked: isSelected,
1391
+ disabled: option.disabled,
1392
+ sx: [
1393
+ {
1394
+ color: "text.secondary",
1395
+ "&.Mui-checked": {
1396
+ color: "primary.main"
1397
+ },
1398
+ ...option.disabled && {
1399
+ color: "action.disabled"
1400
+ }
1401
+ },
1402
+ checkboxSx
1403
+ ]
1404
+ }
1405
+ ),
1406
+ /* @__PURE__ */ jsx(
1407
+ Typography,
1408
+ {
1409
+ variant: "body2",
1410
+ sx: [
1411
+ {
1412
+ color: option.disabled ? "text.disabled" : "text.primary",
1413
+ ...option.textSx
1414
+ }
1415
+ ],
1416
+ children: option.label || String(option.value)
1417
+ }
1418
+ )
1419
+ ]
1420
+ },
1421
+ option.value
1422
+ );
1423
+ const displayLabel = showSelectedCount && selectedValues.length > 0 ? `${label} (${selectedValues.length} selected)` : label;
1424
+ return /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsxs(
1425
+ FormControl,
1426
+ {
1427
+ fullWidth: true,
1428
+ variant,
1429
+ error: isTouched && Boolean(fieldError),
1430
+ disabled,
1431
+ sx: [
1432
+ {
1433
+ "& .MuiInputLabel-root": {
1434
+ "&.Mui-focused": {
1435
+ color: "primary.main"
1436
+ },
1437
+ "&.Mui-error": {
1438
+ color: "error.main"
1439
+ },
1440
+ "&.Mui-disabled": {
1441
+ color: "text.disabled"
1442
+ }
1443
+ }
1444
+ },
1445
+ formControlSx
1446
+ ],
1447
+ children: [
1448
+ label && /* @__PURE__ */ jsxs(
1449
+ InputLabel,
1450
+ {
1451
+ id: `select-${name}`,
1452
+ sx: [
1453
+ {
1454
+ color: "text.secondary",
1455
+ "&.Mui-focused": {
1456
+ color: "primary.main"
1457
+ },
1458
+ "&.Mui-disabled": {
1459
+ color: "text.disabled"
1460
+ }
1461
+ },
1462
+ labelSx
1463
+ ],
1464
+ children: [
1465
+ displayLabel,
1466
+ required && /* @__PURE__ */ jsx(
1467
+ Typography,
1468
+ {
1469
+ component: "span",
1470
+ sx: {
1471
+ color: "error.main",
1472
+ ml: 0.5
1473
+ },
1474
+ children: "*"
1475
+ }
1476
+ )
1477
+ ]
1478
+ }
1479
+ ),
1480
+ /* @__PURE__ */ jsx(
1481
+ Select,
1482
+ {
1483
+ multiple,
1484
+ variant: "outlined",
1485
+ labelId: label ? `select-${name}` : void 0,
1486
+ label: label || void 0,
1487
+ value: selectedValues,
1488
+ onChange: handleChange,
1489
+ onBlur: handleBlur,
1490
+ onOpen,
1491
+ onClose,
1492
+ renderValue: externalRenderValue || defaultRenderValue,
1493
+ MenuProps: {
1494
+ PaperProps: {
1495
+ sx: {
1496
+ mt: 1,
1497
+ boxShadow: theme.shadows[3],
1498
+ "& .MuiMenuItem-root": {
1499
+ px: 2,
1500
+ py: 1
1501
+ }
1502
+ }
1503
+ }
1504
+ },
1505
+ sx: [
1506
+ {
1507
+ backgroundColor: "background.paper",
1508
+ color: "text.primary",
1509
+ "& .MuiSvgIcon-root": {
1510
+ color: "text.secondary",
1511
+ ...iconSx
1512
+ },
1513
+ "& .MuiSelect-icon": {
1514
+ color: "text.secondary"
1515
+ },
1516
+ "& .MuiOutlinedInput-notchedOutline": {
1517
+ borderColor: "divider"
1518
+ },
1519
+ "&:hover .MuiOutlinedInput-notchedOutline": {
1520
+ borderColor: "primary.main"
1521
+ },
1522
+ "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
1523
+ borderColor: "primary.main"
1524
+ },
1525
+ "&.Mui-error .MuiOutlinedInput-notchedOutline": {
1526
+ borderColor: "error.main"
1527
+ },
1528
+ "&.Mui-disabled": {
1529
+ backgroundColor: "action.disabledBackground",
1530
+ "& .MuiOutlinedInput-notchedOutline": {
1531
+ borderColor: "action.disabled"
1532
+ }
1533
+ },
1534
+ ...selectSx
1535
+ }
1536
+ ],
1537
+ error: Boolean(fieldError) && isTouched,
1538
+ ...otherProps,
1539
+ children: options.map((option) => {
1540
+ const isSelected = selectedValues.includes(option.value);
1541
+ return renderMenuItem ? renderMenuItem(option, isSelected) : defaultRenderMenuItem(option, isSelected);
1542
+ })
1543
+ }
1544
+ ),
1545
+ (showHelperText || isTouched && fieldError) && /* @__PURE__ */ jsx(
1546
+ FormHelperText,
1547
+ {
1548
+ sx: [
1549
+ {
1550
+ mx: 0,
1551
+ mt: 0.5,
1552
+ color: isTouched && fieldError ? "error.main" : "text.secondary",
1553
+ ...isTouched && fieldError ? errorSx : helperTextSx
1554
+ }
1555
+ ],
1556
+ children: isTouched && fieldError ? fieldError : helperText
1557
+ }
1558
+ )
1559
+ ]
1560
+ }
1561
+ ) });
1562
+ }
1563
+ );
1564
+ AppMultiSelector.displayName = "AppMultiSelector";
1565
+ var AppMultiSelector_default = AppMultiSelector;
593
1566
  var AppPhoneNoInput = ({
594
1567
  name,
595
1568
  label,
596
1569
  required,
1570
+ sx,
1571
+ containerSx,
1572
+ labelSx,
1573
+ inputSx,
1574
+ errorSx,
597
1575
  ...otherProps
598
1576
  }) => {
599
1577
  const { values, errors, touched, setFieldValue, getFieldProps } = useFormikContext();
600
- const fieldError = _17.get(errors, name);
601
- const isTouched = _17.get(touched, name);
602
- return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
1578
+ const fieldError = _19.get(errors, name);
1579
+ const isTouched = _19.get(touched, name);
1580
+ return /* @__PURE__ */ jsxs(Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
603
1581
  label && /* @__PURE__ */ jsxs(
604
1582
  Typography,
605
1583
  {
606
1584
  variant: "subtitle2",
607
- sx: {
1585
+ sx: [{
608
1586
  mb: 0.5,
609
- color: isTouched && fieldError ? red[500] : "text.primary"
610
- },
1587
+ color: isTouched && fieldError ? "error.main" : "text.primary"
1588
+ }, labelSx],
611
1589
  children: [
612
1590
  label,
613
- required && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: red[500], ml: 0.3 }, children: "*" })
1591
+ required && /* @__PURE__ */ jsx(
1592
+ Typography,
1593
+ {
1594
+ component: "span",
1595
+ sx: {
1596
+ color: "error.main",
1597
+ ml: 0.3
1598
+ },
1599
+ children: "*"
1600
+ }
1601
+ )
614
1602
  ]
615
1603
  }
616
1604
  ),
@@ -621,8 +1609,13 @@ var AppPhoneNoInput = ({
621
1609
  specialLabel: "",
622
1610
  inputStyle: {
623
1611
  width: "100%",
624
- border: isTouched && fieldError ? `1px solid ${red[500]}` : "1px solid #ccc",
625
- padding: "10px"
1612
+ border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
1613
+ padding: "10px",
1614
+ borderRadius: "4px",
1615
+ ...inputSx
1616
+ },
1617
+ containerStyle: {
1618
+ width: "100%"
626
1619
  },
627
1620
  ...otherProps,
628
1621
  ...getFieldProps(name),
@@ -634,8 +1627,11 @@ var AppPhoneNoInput = ({
634
1627
  Typography,
635
1628
  {
636
1629
  variant: "caption",
637
- color: "error",
638
- sx: { mt: 0.5, display: "block" },
1630
+ sx: [{
1631
+ mt: 0.5,
1632
+ display: "block",
1633
+ color: "error.main"
1634
+ }, errorSx],
639
1635
  children: [
640
1636
  String(fieldError),
641
1637
  " "
@@ -645,31 +1641,368 @@ var AppPhoneNoInput = ({
645
1641
  ] });
646
1642
  };
647
1643
  var AppPhoneNoInput_default = AppPhoneNoInput;
648
- function AppRadioGroup({ name, options, ...rest }) {
649
- const { errors, touched, getFieldProps } = useFormikContext();
650
- const fieldError = _17.get(errors, name);
651
- const isTouched = _17.get(touched, name);
652
- return /* @__PURE__ */ jsxs(FormControl, { children: [
653
- /* @__PURE__ */ jsx(RadioGroup, { ...rest, ...getFieldProps(name), children: options.map((p) => /* @__PURE__ */ jsx(FormControlLabel, { value: p == null ? void 0 : p.value, control: /* @__PURE__ */ jsx(Radio, {}), label: p == null ? void 0 : p.label }, p == null ? void 0 : p.value)) }),
654
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
655
- ] });
656
- }
657
- function AppRating({ name, label }) {
658
- const { errors, touched, setFieldValue, values } = useFormikContext();
659
- const val = _17.get(values, name);
660
- const fieldError = _17.get(errors, name);
661
- const isTouched = _17.get(touched, name);
1644
+ var AppRadioGroup = forwardRef(({
1645
+ name,
1646
+ options = [],
1647
+ label,
1648
+ required = false,
1649
+ disabled = false,
1650
+ row = false,
1651
+ sx,
1652
+ formControlSx,
1653
+ radioGroupSx,
1654
+ formLabelSx,
1655
+ radioSx,
1656
+ labelSx,
1657
+ errorSx,
1658
+ onChange,
1659
+ onBlur,
1660
+ ...rest
1661
+ }, ref) => {
1662
+ const { errors, touched, getFieldProps, setFieldValue } = useFormikContext();
1663
+ const fieldError = _19.get(errors, name);
1664
+ const isTouched = _19.get(touched, name);
1665
+ const value = _19.get(getFieldProps(name), "value");
1666
+ const handleChange = (event) => {
1667
+ const newValue = event.target.value;
1668
+ setFieldValue(name, newValue);
1669
+ if (onChange) {
1670
+ onChange(event, newValue);
1671
+ }
1672
+ };
1673
+ const handleBlur = (event) => {
1674
+ if (onBlur) {
1675
+ onBlur(event);
1676
+ }
1677
+ };
1678
+ return /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsxs(
1679
+ FormControl,
1680
+ {
1681
+ component: "fieldset",
1682
+ error: Boolean(fieldError) && isTouched,
1683
+ disabled,
1684
+ sx: [{
1685
+ width: "100%",
1686
+ "& .MuiFormGroup-root": {
1687
+ mt: 1
1688
+ }
1689
+ }, ...Array.isArray(formControlSx) ? formControlSx : [formControlSx]],
1690
+ children: [
1691
+ label && /* @__PURE__ */ jsxs(
1692
+ FormLabel,
1693
+ {
1694
+ component: "legend",
1695
+ sx: [{
1696
+ color: "text.primary",
1697
+ mb: 1,
1698
+ "&.Mui-focused": {
1699
+ color: "text.primary"
1700
+ },
1701
+ "&.Mui-disabled": {
1702
+ color: "text.disabled"
1703
+ }
1704
+ }, ...Array.isArray(formLabelSx) ? formLabelSx : [formLabelSx]],
1705
+ children: [
1706
+ label,
1707
+ required && /* @__PURE__ */ jsx(
1708
+ Typography,
1709
+ {
1710
+ component: "span",
1711
+ sx: {
1712
+ color: "error.main",
1713
+ ml: 0.5
1714
+ },
1715
+ children: "*"
1716
+ }
1717
+ )
1718
+ ]
1719
+ }
1720
+ ),
1721
+ /* @__PURE__ */ jsx(
1722
+ RadioGroup,
1723
+ {
1724
+ ...getFieldProps(name),
1725
+ value: value != null ? value : "",
1726
+ onChange: handleChange,
1727
+ onBlur: handleBlur,
1728
+ row,
1729
+ sx: [{
1730
+ "& .MuiFormControlLabel-root": {
1731
+ mr: row ? 3 : 0,
1732
+ mb: row ? 0 : 1,
1733
+ "&:last-of-type": {
1734
+ mb: 0
1735
+ }
1736
+ }
1737
+ }, ...Array.isArray(radioGroupSx) ? radioGroupSx : [radioGroupSx]],
1738
+ ...rest,
1739
+ children: options.map((option) => /* @__PURE__ */ jsx(
1740
+ FormControlLabel,
1741
+ {
1742
+ value: option.value,
1743
+ disabled: disabled || option.disabled,
1744
+ control: /* @__PURE__ */ jsx(
1745
+ Radio,
1746
+ {
1747
+ sx: [{
1748
+ color: "primary.main",
1749
+ "&.Mui-checked": {
1750
+ color: "primary.main"
1751
+ },
1752
+ "&.Mui-disabled": {
1753
+ color: "action.disabled"
1754
+ },
1755
+ ...radioSx,
1756
+ ...option.radioSx
1757
+ }]
1758
+ }
1759
+ ),
1760
+ label: /* @__PURE__ */ jsx(
1761
+ Typography,
1762
+ {
1763
+ variant: "body2",
1764
+ sx: [{
1765
+ color: disabled || option.disabled ? "text.disabled" : "text.primary",
1766
+ ...labelSx,
1767
+ ...option.labelSx
1768
+ }],
1769
+ children: option.label
1770
+ }
1771
+ ),
1772
+ sx: [{
1773
+ m: 0,
1774
+ mr: row ? 3 : 0,
1775
+ mb: row ? 0 : 1,
1776
+ "&:last-of-type": {
1777
+ mb: 0
1778
+ },
1779
+ ...option.sx
1780
+ }]
1781
+ },
1782
+ option.value
1783
+ ))
1784
+ }
1785
+ ),
1786
+ isTouched && fieldError && /* @__PURE__ */ jsx(
1787
+ FormHelperText,
1788
+ {
1789
+ sx: [{
1790
+ color: "error.main",
1791
+ mx: 0,
1792
+ mt: 0.5,
1793
+ ...errorSx
1794
+ }],
1795
+ children: fieldError
1796
+ }
1797
+ )
1798
+ ]
1799
+ }
1800
+ ) });
1801
+ });
1802
+ AppRadioGroup.displayName = "AppRadioGroup";
1803
+ var AppRadioGroup_default = AppRadioGroup;
1804
+ var AppRating = forwardRef(({
1805
+ name,
1806
+ label,
1807
+ required = false,
1808
+ readOnly = false,
1809
+ disabled = false,
1810
+ max = 5,
1811
+ precision = 1,
1812
+ size = "medium",
1813
+ emptyIcon,
1814
+ icon,
1815
+ IconContainerComponent,
1816
+ getLabelText,
1817
+ onChange: externalOnChange,
1818
+ onChangeActive,
1819
+ sx,
1820
+ labelSx,
1821
+ ratingSx,
1822
+ errorSx,
1823
+ helperTextSx,
1824
+ showHelperText = false,
1825
+ helperText,
1826
+ labelComponent: LabelComponent = Typography,
1827
+ ratingComponent: RatingComponent = Rating,
1828
+ errorComponent: ErrorComponent = Typography,
1829
+ helperTextComponent: HelperTextComponent = FormHelperText,
1830
+ labelProps = {},
1831
+ ratingProps = {},
1832
+ errorProps = {},
1833
+ helperTextProps = {},
1834
+ className = "",
1835
+ labelClassName = "",
1836
+ ratingClassName = "",
1837
+ errorClassName = "",
1838
+ helperTextClassName = "",
1839
+ ...otherProps
1840
+ }, ref) => {
1841
+ useTheme();
1842
+ const { errors, touched, setFieldValue, values, setFieldTouched } = useFormikContext();
1843
+ const val = _19.get(values, name);
1844
+ const fieldError = _19.get(errors, name);
1845
+ const isTouched = _19.get(touched, name);
1846
+ const hasError = Boolean(fieldError) && isTouched;
662
1847
  const handleChange = (event, newValue) => {
663
1848
  setFieldValue(name, newValue);
1849
+ setFieldTouched(name, true, false);
1850
+ if (externalOnChange) {
1851
+ externalOnChange(event, newValue);
1852
+ }
664
1853
  };
665
- return /* @__PURE__ */ jsxs(Stack, { children: [
666
- /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
667
- label && /* @__PURE__ */ jsx(Typography, { sx: { mx: 1 }, children: label }),
668
- /* @__PURE__ */ jsx(Rating, { value: val, onChange: handleChange }, val)
669
- ] }),
670
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
671
- ] });
672
- }
1854
+ const handleBlur = () => {
1855
+ setFieldTouched(name, true, true);
1856
+ };
1857
+ return /* @__PURE__ */ jsxs(
1858
+ Box,
1859
+ {
1860
+ ref,
1861
+ className: `app-rating ${className}`,
1862
+ sx: [
1863
+ {
1864
+ display: "flex",
1865
+ flexDirection: "column",
1866
+ width: "100%",
1867
+ "&:hover": {
1868
+ "& .MuiRating-iconEmpty": {
1869
+ color: "primary.light"
1870
+ }
1871
+ }
1872
+ },
1873
+ ...Array.isArray(sx) ? sx : [sx]
1874
+ ],
1875
+ ...otherProps,
1876
+ children: [
1877
+ /* @__PURE__ */ jsxs(
1878
+ Stack,
1879
+ {
1880
+ direction: "row",
1881
+ alignItems: "center",
1882
+ spacing: 1,
1883
+ sx: {
1884
+ "&.Mui-disabled": {
1885
+ opacity: 0.5,
1886
+ cursor: "not-allowed"
1887
+ }
1888
+ },
1889
+ className: disabled ? "Mui-disabled" : "",
1890
+ children: [
1891
+ label && /* @__PURE__ */ jsxs(
1892
+ LabelComponent,
1893
+ {
1894
+ variant: "body2",
1895
+ color: hasError ? "error" : "text.primary",
1896
+ className: `app-rating-label ${labelClassName}`,
1897
+ sx: [
1898
+ {
1899
+ margin: 0,
1900
+ fontWeight: 500,
1901
+ ...disabled && {
1902
+ color: "text.disabled"
1903
+ }
1904
+ },
1905
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
1906
+ ],
1907
+ ...labelProps,
1908
+ children: [
1909
+ label,
1910
+ required && /* @__PURE__ */ jsx(
1911
+ Box,
1912
+ {
1913
+ component: "span",
1914
+ sx: {
1915
+ color: "error.main",
1916
+ ml: 0.5
1917
+ },
1918
+ children: "*"
1919
+ }
1920
+ )
1921
+ ]
1922
+ }
1923
+ ),
1924
+ /* @__PURE__ */ jsx(
1925
+ Box,
1926
+ {
1927
+ onBlur: handleBlur,
1928
+ sx: [
1929
+ {
1930
+ display: "inline-flex",
1931
+ "& .MuiRating-icon": {
1932
+ color: "primary.main"
1933
+ },
1934
+ "& .MuiRating-iconEmpty": {
1935
+ color: "action.disabled"
1936
+ },
1937
+ "& .MuiRating-iconFilled": {
1938
+ color: "primary.main"
1939
+ },
1940
+ "& .MuiRating-iconHover": {
1941
+ color: "primary.dark"
1942
+ },
1943
+ "&.Mui-disabled": {
1944
+ opacity: 0.5,
1945
+ cursor: "not-allowed"
1946
+ },
1947
+ ...hasError && {
1948
+ "& .MuiRating-icon": {
1949
+ color: "error.main"
1950
+ }
1951
+ }
1952
+ },
1953
+ ...Array.isArray(ratingSx) ? ratingSx : [ratingSx]
1954
+ ],
1955
+ className: `app-rating-stars ${ratingClassName} ${disabled ? "Mui-disabled" : ""}`,
1956
+ children: /* @__PURE__ */ jsx(
1957
+ RatingComponent,
1958
+ {
1959
+ value: val != null ? val : null,
1960
+ onChange: handleChange,
1961
+ onChangeActive,
1962
+ max,
1963
+ precision,
1964
+ size,
1965
+ readOnly,
1966
+ disabled,
1967
+ emptyIcon,
1968
+ icon,
1969
+ IconContainerComponent,
1970
+ getLabelText,
1971
+ className: ratingClassName,
1972
+ ...ratingProps
1973
+ }
1974
+ )
1975
+ }
1976
+ )
1977
+ ]
1978
+ }
1979
+ ),
1980
+ (showHelperText || hasError) && /* @__PURE__ */ jsx(
1981
+ HelperTextComponent,
1982
+ {
1983
+ error: hasError,
1984
+ sx: [
1985
+ {
1986
+ mx: 0,
1987
+ mt: 0.5,
1988
+ ...hasError && {
1989
+ color: "error.main",
1990
+ ...errorSx
1991
+ },
1992
+ ...helperTextSx
1993
+ }
1994
+ ],
1995
+ className: `app-rating-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`,
1996
+ ...helperTextProps,
1997
+ children: hasError ? fieldError : helperText
1998
+ }
1999
+ )
2000
+ ]
2001
+ }
2002
+ );
2003
+ });
2004
+ AppRating.displayName = "AppRating";
2005
+ var AppRating_default = AppRating;
673
2006
 
674
2007
  // node_modules/orderedmap/dist/index.js
675
2008
  function OrderedMap(content) {
@@ -853,7 +2186,7 @@ function findDiffEnd(a, b, posA, posB) {
853
2186
  posB -= size;
854
2187
  }
855
2188
  }
856
- var Fragment3 = class {
2189
+ var Fragment2 = class {
857
2190
  /**
858
2191
  @internal
859
2192
  */
@@ -921,7 +2254,7 @@ var Fragment3 = class {
921
2254
  }
922
2255
  for (; i < other.content.length; i++)
923
2256
  content.push(other.content[i]);
924
- return new Fragment3(content, this.size + other.size);
2257
+ return new Fragment2(content, this.size + other.size);
925
2258
  }
926
2259
  /**
927
2260
  Cut out the sub-fragment between the two given positions.
@@ -945,17 +2278,17 @@ var Fragment3 = class {
945
2278
  }
946
2279
  pos = end;
947
2280
  }
948
- return new Fragment3(result, size);
2281
+ return new Fragment2(result, size);
949
2282
  }
950
2283
  /**
951
2284
  @internal
952
2285
  */
953
2286
  cutByIndex(from, to) {
954
2287
  if (from == to)
955
- return Fragment3.empty;
2288
+ return Fragment2.empty;
956
2289
  if (from == 0 && to == this.content.length)
957
2290
  return this;
958
- return new Fragment3(this.content.slice(from, to));
2291
+ return new Fragment2(this.content.slice(from, to));
959
2292
  }
960
2293
  /**
961
2294
  Create a new fragment in which the node at the given index is
@@ -968,21 +2301,21 @@ var Fragment3 = class {
968
2301
  let copy2 = this.content.slice();
969
2302
  let size = this.size + node.nodeSize - current.nodeSize;
970
2303
  copy2[index] = node;
971
- return new Fragment3(copy2, size);
2304
+ return new Fragment2(copy2, size);
972
2305
  }
973
2306
  /**
974
2307
  Create a new fragment by prepending the given node to this
975
2308
  fragment.
976
2309
  */
977
2310
  addToStart(node) {
978
- return new Fragment3([node].concat(this.content), this.size + node.nodeSize);
2311
+ return new Fragment2([node].concat(this.content), this.size + node.nodeSize);
979
2312
  }
980
2313
  /**
981
2314
  Create a new fragment by appending the given node to this
982
2315
  fragment.
983
2316
  */
984
2317
  addToEnd(node) {
985
- return new Fragment3(this.content.concat(node), this.size + node.nodeSize);
2318
+ return new Fragment2(this.content.concat(node), this.size + node.nodeSize);
986
2319
  }
987
2320
  /**
988
2321
  Compare this fragment to another one.
@@ -1101,10 +2434,10 @@ var Fragment3 = class {
1101
2434
  */
1102
2435
  static fromJSON(schema, value) {
1103
2436
  if (!value)
1104
- return Fragment3.empty;
2437
+ return Fragment2.empty;
1105
2438
  if (!Array.isArray(value))
1106
2439
  throw new RangeError("Invalid input for Fragment.fromJSON");
1107
- return new Fragment3(value.map(schema.nodeFromJSON));
2440
+ return new Fragment2(value.map(schema.nodeFromJSON));
1108
2441
  }
1109
2442
  /**
1110
2443
  Build a fragment from an array of nodes. Ensures that adjacent
@@ -1112,7 +2445,7 @@ var Fragment3 = class {
1112
2445
  */
1113
2446
  static fromArray(array) {
1114
2447
  if (!array.length)
1115
- return Fragment3.empty;
2448
+ return Fragment2.empty;
1116
2449
  let joined, size = 0;
1117
2450
  for (let i = 0; i < array.length; i++) {
1118
2451
  let node = array[i];
@@ -1125,7 +2458,7 @@ var Fragment3 = class {
1125
2458
  joined.push(node);
1126
2459
  }
1127
2460
  }
1128
- return new Fragment3(joined || array, size);
2461
+ return new Fragment2(joined || array, size);
1129
2462
  }
1130
2463
  /**
1131
2464
  Create a fragment from something that can be interpreted as a
@@ -1135,17 +2468,17 @@ var Fragment3 = class {
1135
2468
  */
1136
2469
  static from(nodes) {
1137
2470
  if (!nodes)
1138
- return Fragment3.empty;
1139
- if (nodes instanceof Fragment3)
2471
+ return Fragment2.empty;
2472
+ if (nodes instanceof Fragment2)
1140
2473
  return nodes;
1141
2474
  if (Array.isArray(nodes))
1142
2475
  return this.fromArray(nodes);
1143
2476
  if (nodes.attrs)
1144
- return new Fragment3([nodes], nodes.nodeSize);
2477
+ return new Fragment2([nodes], nodes.nodeSize);
1145
2478
  throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
1146
2479
  }
1147
2480
  };
1148
- Fragment3.empty = new Fragment3([], 0);
2481
+ Fragment2.empty = new Fragment2([], 0);
1149
2482
  var found = { index: 0, offset: 0 };
1150
2483
  function retIndex(index, offset) {
1151
2484
  found.index = index;
@@ -1250,7 +2583,7 @@ var Mark = class {
1250
2583
  */
1251
2584
  toJSON() {
1252
2585
  let obj = { type: this.type.name };
1253
- for (let _18 in this.attrs) {
2586
+ for (let _20 in this.attrs) {
1254
2587
  obj.attrs = this.attrs;
1255
2588
  break;
1256
2589
  }
@@ -1370,7 +2703,7 @@ var Slice = class {
1370
2703
  let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
1371
2704
  if (typeof openStart != "number" || typeof openEnd != "number")
1372
2705
  throw new RangeError("Invalid input for Slice.fromJSON");
1373
- return new Slice(Fragment3.fromJSON(schema, json.content), openStart, openEnd);
2706
+ return new Slice(Fragment2.fromJSON(schema, json.content), openStart, openEnd);
1374
2707
  }
1375
2708
  /**
1376
2709
  Create a slice from a fragment by taking the maximum possible
@@ -1385,7 +2718,7 @@ var Slice = class {
1385
2718
  return new Slice(fragment, openStart, openEnd);
1386
2719
  }
1387
2720
  };
1388
- Slice.empty = new Slice(Fragment3.empty, 0, 0);
2721
+ Slice.empty = new Slice(Fragment2.empty, 0, 0);
1389
2722
  function removeRange(content, from, to) {
1390
2723
  let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
1391
2724
  let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -1483,7 +2816,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
1483
2816
  addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
1484
2817
  }
1485
2818
  addRange($to, null, depth, content);
1486
- return new Fragment3(content);
2819
+ return new Fragment2(content);
1487
2820
  }
1488
2821
  function replaceTwoWay($from, $to, depth) {
1489
2822
  let content = [];
@@ -1493,13 +2826,13 @@ function replaceTwoWay($from, $to, depth) {
1493
2826
  addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
1494
2827
  }
1495
2828
  addRange($to, null, depth, content);
1496
- return new Fragment3(content);
2829
+ return new Fragment2(content);
1497
2830
  }
1498
2831
  function prepareSliceForReplace(slice, $along) {
1499
2832
  let extra = $along.depth - slice.openStart, parent = $along.node(extra);
1500
2833
  let node = parent.copy(slice.content);
1501
2834
  for (let i = extra - 1; i >= 0; i--)
1502
- node = $along.node(i).copy(Fragment3.from(node));
2835
+ node = $along.node(i).copy(Fragment2.from(node));
1503
2836
  return {
1504
2837
  start: node.resolveNoCache(slice.openStart + extra),
1505
2838
  end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -1838,7 +3171,7 @@ var Node = class {
1838
3171
  this.type = type;
1839
3172
  this.attrs = attrs;
1840
3173
  this.marks = marks;
1841
- this.content = content || Fragment3.empty;
3174
+ this.content = content || Fragment2.empty;
1842
3175
  }
1843
3176
  /**
1844
3177
  The array of this node's child nodes.
@@ -2143,7 +3476,7 @@ var Node = class {
2143
3476
  can optionally pass `start` and `end` indices into the
2144
3477
  replacement fragment.
2145
3478
  */
2146
- canReplace(from, to, replacement = Fragment3.empty, start = 0, end = replacement.childCount) {
3479
+ canReplace(from, to, replacement = Fragment2.empty, start = 0, end = replacement.childCount) {
2147
3480
  let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
2148
3481
  let two = one && one.matchFragment(this.content, to);
2149
3482
  if (!two || !two.validEnd)
@@ -2198,7 +3531,7 @@ var Node = class {
2198
3531
  */
2199
3532
  toJSON() {
2200
3533
  let obj = { type: this.type.name };
2201
- for (let _18 in this.attrs) {
3534
+ for (let _20 in this.attrs) {
2202
3535
  obj.attrs = this.attrs;
2203
3536
  break;
2204
3537
  }
@@ -2225,7 +3558,7 @@ var Node = class {
2225
3558
  throw new RangeError("Invalid text node in JSON");
2226
3559
  return schema.text(json.text, marks);
2227
3560
  }
2228
- let content = Fragment3.fromJSON(schema, json.content);
3561
+ let content = Fragment2.fromJSON(schema, json.content);
2229
3562
  let node = schema.nodeType(json.type).create(json.attrs, content, marks);
2230
3563
  node.type.checkAttrs(node.attrs);
2231
3564
  return node;
@@ -2367,7 +3700,7 @@ var ContentMatch = class {
2367
3700
  function search(match, types) {
2368
3701
  let finished = match.matchFragment(after, startIndex);
2369
3702
  if (finished && (!toEnd || finished.validEnd))
2370
- return Fragment3.from(types.map((tp) => tp.createAndFill()));
3703
+ return Fragment2.from(types.map((tp) => tp.createAndFill()));
2371
3704
  for (let i = 0; i < match.next.length; i++) {
2372
3705
  let { type, next } = match.next[i];
2373
3706
  if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -2819,7 +4152,7 @@ var NodeType = class {
2819
4152
  create(attrs = null, content, marks) {
2820
4153
  if (this.isText)
2821
4154
  throw new Error("NodeType.create can't construct text nodes");
2822
- return new Node(this, this.computeAttrs(attrs), Fragment3.from(content), Mark.setFrom(marks));
4155
+ return new Node(this, this.computeAttrs(attrs), Fragment2.from(content), Mark.setFrom(marks));
2823
4156
  }
2824
4157
  /**
2825
4158
  Like [`create`](https://prosemirror.net/docs/ref/#model.NodeType.create), but check the given content
@@ -2827,7 +4160,7 @@ var NodeType = class {
2827
4160
  if it doesn't match.
2828
4161
  */
2829
4162
  createChecked(attrs = null, content, marks) {
2830
- content = Fragment3.from(content);
4163
+ content = Fragment2.from(content);
2831
4164
  this.checkContent(content);
2832
4165
  return new Node(this, this.computeAttrs(attrs), content, Mark.setFrom(marks));
2833
4166
  }
@@ -2841,7 +4174,7 @@ var NodeType = class {
2841
4174
  */
2842
4175
  createAndFill(attrs = null, content, marks) {
2843
4176
  attrs = this.computeAttrs(attrs);
2844
- content = Fragment3.from(content);
4177
+ content = Fragment2.from(content);
2845
4178
  if (content.size) {
2846
4179
  let before = this.contentMatch.fillBefore(content);
2847
4180
  if (!before)
@@ -2849,7 +4182,7 @@ var NodeType = class {
2849
4182
  content = before.append(content);
2850
4183
  }
2851
4184
  let matched = this.contentMatch.matchFragment(content);
2852
- let after = matched && matched.fillBefore(Fragment3.empty, true);
4185
+ let after = matched && matched.fillBefore(Fragment2.empty, true);
2853
4186
  if (!after)
2854
4187
  return null;
2855
4188
  return new Node(this, attrs, content.append(after), Mark.setFrom(marks));
@@ -2927,7 +4260,7 @@ var NodeType = class {
2927
4260
  throw new RangeError("Schema is missing its top node type ('" + topType + "')");
2928
4261
  if (!result.text)
2929
4262
  throw new RangeError("Every schema needs a 'text' type");
2930
- for (let _18 in result.text.attrs)
4263
+ for (let _20 in result.text.attrs)
2931
4264
  throw new RangeError("The text node type should not have attributes");
2932
4265
  return result;
2933
4266
  }
@@ -3313,7 +4646,7 @@ var NodeContext = class {
3313
4646
  if (!this.match) {
3314
4647
  if (!this.type)
3315
4648
  return [];
3316
- let fill = this.type.contentMatch.fillBefore(Fragment3.from(node));
4649
+ let fill = this.type.contentMatch.fillBefore(Fragment2.from(node));
3317
4650
  if (fill) {
3318
4651
  this.match = this.type.contentMatch.matchFragment(fill);
3319
4652
  } else {
@@ -3339,9 +4672,9 @@ var NodeContext = class {
3339
4672
  this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m2[0].length));
3340
4673
  }
3341
4674
  }
3342
- let content = Fragment3.from(this.content);
4675
+ let content = Fragment2.from(this.content);
3343
4676
  if (!openEnd && this.match)
3344
- content = content.append(this.match.fillBefore(Fragment3.empty, true));
4677
+ content = content.append(this.match.fillBefore(Fragment2.empty, true));
3345
4678
  return this.type ? this.type.create(this.attrs, content, this.marks) : content;
3346
4679
  }
3347
4680
  inlineContext(node) {
@@ -4158,7 +5491,7 @@ function mapFragment(fragment, f, parent) {
4158
5491
  child = f(child, parent, i);
4159
5492
  mapped.push(child);
4160
5493
  }
4161
- return Fragment3.fromArray(mapped);
5494
+ return Fragment2.fromArray(mapped);
4162
5495
  }
4163
5496
  var AddMarkStep = class extends Step {
4164
5497
  /**
@@ -4275,7 +5608,7 @@ var AddNodeMarkStep = class extends Step {
4275
5608
  if (!node)
4276
5609
  return StepResult.fail("No node at mark step's position");
4277
5610
  let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
4278
- return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
5611
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4279
5612
  }
4280
5613
  invert(doc2) {
4281
5614
  let node = doc2.nodeAt(this.pos);
@@ -4321,7 +5654,7 @@ var RemoveNodeMarkStep = class extends Step {
4321
5654
  if (!node)
4322
5655
  return StepResult.fail("No node at mark step's position");
4323
5656
  let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
4324
- return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
5657
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4325
5658
  }
4326
5659
  invert(doc2) {
4327
5660
  let node = doc2.nodeAt(this.pos);
@@ -4586,7 +5919,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4586
5919
  let m2, newline = /\r?\n|\r/g, slice;
4587
5920
  while (m2 = newline.exec(child.text)) {
4588
5921
  if (!slice)
4589
- slice = new Slice(Fragment3.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
5922
+ slice = new Slice(Fragment2.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
4590
5923
  replSteps.push(new ReplaceStep(cur + m2.index, cur + m2.index + m2[0].length, slice));
4591
5924
  }
4592
5925
  }
@@ -4594,7 +5927,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4594
5927
  cur = end;
4595
5928
  }
4596
5929
  if (!match.validEnd) {
4597
- let fill = match.fillBefore(Fragment3.empty, true);
5930
+ let fill = match.fillBefore(Fragment2.empty, true);
4598
5931
  tr.replace(cur, cur, new Slice(fill, 0, 0));
4599
5932
  }
4600
5933
  for (let i = replSteps.length - 1; i >= 0; i--)
@@ -4624,20 +5957,20 @@ function lift(tr, range, target) {
4624
5957
  let { $from, $to, depth } = range;
4625
5958
  let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
4626
5959
  let start = gapStart, end = gapEnd;
4627
- let before = Fragment3.empty, openStart = 0;
5960
+ let before = Fragment2.empty, openStart = 0;
4628
5961
  for (let d = depth, splitting = false; d > target; d--)
4629
5962
  if (splitting || $from.index(d) > 0) {
4630
5963
  splitting = true;
4631
- before = Fragment3.from($from.node(d).copy(before));
5964
+ before = Fragment2.from($from.node(d).copy(before));
4632
5965
  openStart++;
4633
5966
  } else {
4634
5967
  start--;
4635
5968
  }
4636
- let after = Fragment3.empty, openEnd = 0;
5969
+ let after = Fragment2.empty, openEnd = 0;
4637
5970
  for (let d = depth, splitting = false; d > target; d--)
4638
5971
  if (splitting || $to.after(d + 1) < $to.end(d)) {
4639
5972
  splitting = true;
4640
- after = Fragment3.from($to.node(d).copy(after));
5973
+ after = Fragment2.from($to.node(d).copy(after));
4641
5974
  openEnd++;
4642
5975
  } else {
4643
5976
  end++;
@@ -4677,14 +6010,14 @@ function findWrappingInside(range, type) {
4677
6010
  return inside;
4678
6011
  }
4679
6012
  function wrap(tr, range, wrappers) {
4680
- let content = Fragment3.empty;
6013
+ let content = Fragment2.empty;
4681
6014
  for (let i = wrappers.length - 1; i >= 0; i--) {
4682
6015
  if (content.size) {
4683
6016
  let match = wrappers[i].type.contentMatch.matchFragment(content);
4684
6017
  if (!match || !match.validEnd)
4685
6018
  throw new RangeError("Wrapper type given to Transform.wrap does not form valid content of its parent wrapper");
4686
6019
  }
4687
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
6020
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
4688
6021
  }
4689
6022
  let start = range.start, end = range.end;
4690
6023
  tr.step(new ReplaceAroundStep(start, end, start, end, new Slice(content, 0, 0), wrappers.length, true));
@@ -4709,7 +6042,7 @@ function setBlockType(tr, from, to, type, attrs) {
4709
6042
  clearIncompatible(tr, tr.mapping.slice(mapFrom).map(pos, 1), type, void 0, convertNewlines === null);
4710
6043
  let mapping = tr.mapping.slice(mapFrom);
4711
6044
  let startM = mapping.map(pos, 1), endM = mapping.map(pos + node.nodeSize, 1);
4712
- tr.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice(Fragment3.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
6045
+ tr.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice(Fragment2.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
4713
6046
  if (convertNewlines === true)
4714
6047
  replaceNewlines(tr, node, pos, mapFrom);
4715
6048
  return false;
@@ -4750,7 +6083,7 @@ function setNodeMarkup(tr, pos, type, attrs, marks) {
4750
6083
  return tr.replaceWith(pos, pos + node.nodeSize, newNode);
4751
6084
  if (!type.validContent(node.content))
4752
6085
  throw new RangeError("Invalid content for node type " + type.name);
4753
- tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment3.from(newNode), 0, 0), 1, true));
6086
+ tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment2.from(newNode), 0, 0), 1, true));
4754
6087
  }
4755
6088
  function canSplit(doc2, pos, depth = 1, typesAfter) {
4756
6089
  let $pos = doc2.resolve(pos), base2 = $pos.depth - depth;
@@ -4774,11 +6107,11 @@ function canSplit(doc2, pos, depth = 1, typesAfter) {
4774
6107
  return $pos.node(base2).canReplaceWith(index, index, baseType ? baseType.type : $pos.node(base2 + 1).type);
4775
6108
  }
4776
6109
  function split(tr, pos, depth = 1, typesAfter) {
4777
- let $pos = tr.doc.resolve(pos), before = Fragment3.empty, after = Fragment3.empty;
6110
+ let $pos = tr.doc.resolve(pos), before = Fragment2.empty, after = Fragment2.empty;
4778
6111
  for (let d = $pos.depth, e = $pos.depth - depth, i = depth - 1; d > e; d--, i--) {
4779
- before = Fragment3.from($pos.node(d).copy(before));
6112
+ before = Fragment2.from($pos.node(d).copy(before));
4780
6113
  let typeAfter = typesAfter && typesAfter[i];
4781
- after = Fragment3.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
6114
+ after = Fragment2.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
4782
6115
  }
4783
6116
  tr.step(new ReplaceStep(pos, pos, new Slice(before.append(after), depth, depth), true));
4784
6117
  }
@@ -4893,7 +6226,7 @@ var Fitter = class {
4893
6226
  this.$to = $to;
4894
6227
  this.unplaced = unplaced;
4895
6228
  this.frontier = [];
4896
- this.placed = Fragment3.empty;
6229
+ this.placed = Fragment2.empty;
4897
6230
  for (let i = 0; i <= $from.depth; i++) {
4898
6231
  let node = $from.node(i);
4899
6232
  this.frontier.push({
@@ -4902,7 +6235,7 @@ var Fitter = class {
4902
6235
  });
4903
6236
  }
4904
6237
  for (let i = $from.depth; i > 0; i--)
4905
- this.placed = Fragment3.from($from.node(i).copy(this.placed));
6238
+ this.placed = Fragment2.from($from.node(i).copy(this.placed));
4906
6239
  }
4907
6240
  get depth() {
4908
6241
  return this.frontier.length - 1;
@@ -4959,7 +6292,7 @@ var Fitter = class {
4959
6292
  let first2 = fragment.firstChild;
4960
6293
  for (let frontierDepth = this.depth; frontierDepth >= 0; frontierDepth--) {
4961
6294
  let { type, match } = this.frontier[frontierDepth], wrap2, inject = null;
4962
- if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment3.from(first2), false)) : parent && type.compatibleContent(parent.type)))
6295
+ if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment2.from(first2), false)) : parent && type.compatibleContent(parent.type)))
4963
6296
  return { sliceDepth, frontierDepth, parent, inject };
4964
6297
  else if (pass == 2 && first2 && (wrap2 = match.findWrapping(first2.type)))
4965
6298
  return { sliceDepth, frontierDepth, parent, wrap: wrap2 };
@@ -5019,7 +6352,7 @@ var Fitter = class {
5019
6352
  let toEnd = taken == fragment.childCount;
5020
6353
  if (!toEnd)
5021
6354
  openEndCount = -1;
5022
- this.placed = addToFragment(this.placed, frontierDepth, Fragment3.from(add));
6355
+ this.placed = addToFragment(this.placed, frontierDepth, Fragment2.from(add));
5023
6356
  this.frontier[frontierDepth].match = match;
5024
6357
  if (toEnd && openEndCount < 0 && parent && parent.type == this.frontier[this.depth].type && this.frontier.length > 1)
5025
6358
  this.closeFrontierNode();
@@ -5076,12 +6409,12 @@ var Fitter = class {
5076
6409
  openFrontierNode(type, attrs = null, content) {
5077
6410
  let top = this.frontier[this.depth];
5078
6411
  top.match = top.match.matchType(type);
5079
- this.placed = addToFragment(this.placed, this.depth, Fragment3.from(type.create(attrs, content)));
6412
+ this.placed = addToFragment(this.placed, this.depth, Fragment2.from(type.create(attrs, content)));
5080
6413
  this.frontier.push({ type, match: type.contentMatch });
5081
6414
  }
5082
6415
  closeFrontierNode() {
5083
6416
  let open = this.frontier.pop();
5084
- let add = open.match.fillBefore(Fragment3.empty, true);
6417
+ let add = open.match.fillBefore(Fragment2.empty, true);
5085
6418
  if (add.childCount)
5086
6419
  this.placed = addToFragment(this.placed, this.frontier.length, add);
5087
6420
  }
@@ -5110,7 +6443,7 @@ function closeNodeStart(node, openStart, openEnd) {
5110
6443
  if (openStart > 0) {
5111
6444
  frag = node.type.contentMatch.fillBefore(frag).append(frag);
5112
6445
  if (openEnd <= 0)
5113
- frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment3.empty, true));
6446
+ frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment2.empty, true));
5114
6447
  }
5115
6448
  return node.copy(frag);
5116
6449
  }
@@ -5202,7 +6535,7 @@ function closeFragment(fragment, depth, oldOpen, newOpen, parent) {
5202
6535
  if (depth > newOpen) {
5203
6536
  let match = parent.contentMatchAt(0);
5204
6537
  let start = match.fillBefore(fragment).append(fragment);
5205
- fragment = start.append(match.matchFragment(start).fillBefore(Fragment3.empty, true));
6538
+ fragment = start.append(match.matchFragment(start).fillBefore(Fragment2.empty, true));
5206
6539
  }
5207
6540
  return fragment;
5208
6541
  }
@@ -5212,7 +6545,7 @@ function replaceRangeWith(tr, from, to, node) {
5212
6545
  if (point != null)
5213
6546
  from = to = point;
5214
6547
  }
5215
- tr.replaceRange(from, to, new Slice(Fragment3.from(node), 0, 0));
6548
+ tr.replaceRange(from, to, new Slice(Fragment2.from(node), 0, 0));
5216
6549
  }
5217
6550
  function deleteRange(tr, from, to) {
5218
6551
  let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
@@ -5260,7 +6593,7 @@ var AttrStep = class extends Step {
5260
6593
  attrs[name] = node.attrs[name];
5261
6594
  attrs[this.attr] = this.value;
5262
6595
  let updated = node.type.create(attrs, null, node.marks);
5263
- return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
6596
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
5264
6597
  }
5265
6598
  getMap() {
5266
6599
  return StepMap.empty;
@@ -5395,7 +6728,7 @@ var Transform = class {
5395
6728
  fragment, node, or array of nodes.
5396
6729
  */
5397
6730
  replaceWith(from, to, content) {
5398
- return this.replace(from, to, new Slice(Fragment3.from(content), 0, 0));
6731
+ return this.replace(from, to, new Slice(Fragment2.from(content), 0, 0));
5399
6732
  }
5400
6733
  /**
5401
6734
  Delete the content between the given positions.
@@ -5897,7 +7230,7 @@ var NodeSelection = class extends Selection {
5897
7230
  return new NodeSelection($pos);
5898
7231
  }
5899
7232
  content() {
5900
- return new Slice(Fragment3.from(this.node), 0, 0);
7233
+ return new Slice(Fragment2.from(this.node), 0, 0);
5901
7234
  }
5902
7235
  eq(other) {
5903
7236
  return other instanceof NodeSelection && other.anchor == this.anchor;
@@ -6455,10 +7788,10 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6455
7788
  let canDelAfter = !isolated && $cut.parent.canReplace($cut.index(), $cut.index() + 1);
6456
7789
  if (canDelAfter && (conn = (match = before.contentMatchAt(before.childCount)).findWrapping(after.type)) && match.matchType(conn[0] || after.type).validEnd) {
6457
7790
  if (dispatch) {
6458
- let end = $cut.pos + after.nodeSize, wrap2 = Fragment3.empty;
7791
+ let end = $cut.pos + after.nodeSize, wrap2 = Fragment2.empty;
6459
7792
  for (let i = conn.length - 1; i >= 0; i--)
6460
- wrap2 = Fragment3.from(conn[i].create(null, wrap2));
6461
- wrap2 = Fragment3.from(before.copy(wrap2));
7793
+ wrap2 = Fragment2.from(conn[i].create(null, wrap2));
7794
+ wrap2 = Fragment2.from(before.copy(wrap2));
6462
7795
  let tr = state.tr.step(new ReplaceAroundStep($cut.pos - 1, end, $cut.pos, end, new Slice(wrap2, 1, 0), conn.length, true));
6463
7796
  let $joinAt = tr.doc.resolve(end + 2 * conn.length);
6464
7797
  if ($joinAt.nodeAfter && $joinAt.nodeAfter.type == before.type && canJoin(tr.doc, $joinAt.pos))
@@ -6487,9 +7820,9 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6487
7820
  afterDepth++;
6488
7821
  if (at.canReplace(at.childCount, at.childCount, afterText.content)) {
6489
7822
  if (dispatch) {
6490
- let end = Fragment3.empty;
7823
+ let end = Fragment2.empty;
6491
7824
  for (let i = wrap2.length - 1; i >= 0; i--)
6492
- end = Fragment3.from(wrap2[i].copy(end));
7825
+ end = Fragment2.from(wrap2[i].copy(end));
6493
7826
  let tr = state.tr.step(new ReplaceAroundStep($cut.pos - wrap2.length, $cut.pos + after.nodeSize, $cut.pos + afterDepth, $cut.pos + after.nodeSize - afterDepth, new Slice(end, wrap2.length, 0), 0, true));
6494
7827
  dispatch(tr.scrollIntoView());
6495
7828
  }
@@ -6594,9 +7927,9 @@ function wrapRangeInList(tr, range, listType, attrs = null) {
6594
7927
  return true;
6595
7928
  }
6596
7929
  function doWrapInList(tr, range, wrappers, joinBefore, listType) {
6597
- let content = Fragment3.empty;
7930
+ let content = Fragment2.empty;
6598
7931
  for (let i = wrappers.length - 1; i >= 0; i--)
6599
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
7932
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
6600
7933
  tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
6601
7934
  let found2 = 0;
6602
7935
  for (let i = 0; i < wrappers.length; i++)
@@ -6630,7 +7963,7 @@ function liftListItem(itemType) {
6630
7963
  function liftToOuterList(state, dispatch, itemType, range) {
6631
7964
  let tr = state.tr, end = range.end, endOfList = range.$to.end(range.depth);
6632
7965
  if (end < endOfList) {
6633
- tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment3.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
7966
+ tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment2.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
6634
7967
  range = new NodeRange(tr.doc.resolve(range.$from.pos), tr.doc.resolve(endOfList), range.depth);
6635
7968
  }
6636
7969
  const target = liftTarget(range);
@@ -6654,10 +7987,10 @@ function liftOutOfList(state, dispatch, range) {
6654
7987
  return false;
6655
7988
  let atStart = range.startIndex == 0, atEnd = range.endIndex == list.childCount;
6656
7989
  let parent = $start.node(-1), indexBefore = $start.index(-1);
6657
- if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment3.empty : Fragment3.from(list))))
7990
+ if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment2.empty : Fragment2.from(list))))
6658
7991
  return false;
6659
7992
  let start = $start.pos, end = start + item.nodeSize;
6660
- tr.step(new ReplaceAroundStep(start - (atStart ? 1 : 0), end + (atEnd ? 1 : 0), start + 1, end - 1, new Slice((atStart ? Fragment3.empty : Fragment3.from(list.copy(Fragment3.empty))).append(atEnd ? Fragment3.empty : Fragment3.from(list.copy(Fragment3.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), atStart ? 0 : 1));
7993
+ tr.step(new ReplaceAroundStep(start - (atStart ? 1 : 0), end + (atEnd ? 1 : 0), start + 1, end - 1, new Slice((atStart ? Fragment2.empty : Fragment2.from(list.copy(Fragment2.empty))).append(atEnd ? Fragment2.empty : Fragment2.from(list.copy(Fragment2.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), atStart ? 0 : 1));
6661
7994
  dispatch(tr.scrollIntoView());
6662
7995
  return true;
6663
7996
  }
@@ -6675,8 +8008,8 @@ function sinkListItem(itemType) {
6675
8008
  return false;
6676
8009
  if (dispatch) {
6677
8010
  let nestedBefore = nodeBefore.lastChild && nodeBefore.lastChild.type == parent.type;
6678
- let inner = Fragment3.from(nestedBefore ? itemType.create() : null);
6679
- let slice = new Slice(Fragment3.from(itemType.create(null, Fragment3.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
8011
+ let inner = Fragment2.from(nestedBefore ? itemType.create() : null);
8012
+ let slice = new Slice(Fragment2.from(itemType.create(null, Fragment2.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
6680
8013
  let before = range.start, after = range.end;
6681
8014
  dispatch(state.tr.step(new ReplaceAroundStep(before - (nestedBefore ? 3 : 1), after, before, after, slice, 1, true)).scrollIntoView());
6682
8015
  }
@@ -7295,7 +8628,7 @@ function elementFromString(value) {
7295
8628
  return removeWhitespaces(html);
7296
8629
  }
7297
8630
  function createNodeFromContent(content, schema, options) {
7298
- if (content instanceof Node || content instanceof Fragment3) {
8631
+ if (content instanceof Node || content instanceof Fragment2) {
7299
8632
  return content;
7300
8633
  }
7301
8634
  options = {
@@ -7309,7 +8642,7 @@ function createNodeFromContent(content, schema, options) {
7309
8642
  try {
7310
8643
  const isArrayContent = Array.isArray(content) && content.length > 0;
7311
8644
  if (isArrayContent) {
7312
- return Fragment3.fromArray(content.map((item) => schema.nodeFromJSON(item)));
8645
+ return Fragment2.fromArray(content.map((item) => schema.nodeFromJSON(item)));
7313
8646
  }
7314
8647
  const node = schema.nodeFromJSON(content);
7315
8648
  if (options.errorOnInvalidContent) {
@@ -7456,7 +8789,7 @@ var insertContentAt = (position, value, options) => ({ tr, dispatch, editor }) =
7456
8789
  if (isOnlyTextContent) {
7457
8790
  if (Array.isArray(value)) {
7458
8791
  newContent = value.map((v) => v.text || "").join("");
7459
- } else if (value instanceof Fragment3) {
8792
+ } else if (value instanceof Fragment2) {
7460
8793
  let text = "";
7461
8794
  value.forEach((node) => {
7462
8795
  if (node.text) {
@@ -7936,7 +9269,7 @@ function removeDuplicates(array, by = JSON.stringify) {
7936
9269
  function simplifyChangedRanges(changes) {
7937
9270
  const uniqueChanges = removeDuplicates(changes);
7938
9271
  return uniqueChanges.length === 1 ? uniqueChanges : uniqueChanges.filter((change, index) => {
7939
- const rest = uniqueChanges.filter((_18, i) => i !== index);
9272
+ const rest = uniqueChanges.filter((_20, i) => i !== index);
7940
9273
  return !rest.some((otherChange) => {
7941
9274
  return change.oldRange.from >= otherChange.oldRange.from && change.oldRange.to <= otherChange.oldRange.to && change.newRange.from >= otherChange.newRange.from && change.newRange.to <= otherChange.newRange.to;
7942
9275
  });
@@ -8327,10 +9660,10 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8327
9660
  return false;
8328
9661
  }
8329
9662
  if (dispatch) {
8330
- let wrap2 = Fragment3.empty;
9663
+ let wrap2 = Fragment2.empty;
8331
9664
  const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
8332
9665
  for (let d = $from.depth - depthBefore; d >= $from.depth - 3; d -= 1) {
8333
- wrap2 = Fragment3.from($from.node(d).copy(wrap2));
9666
+ wrap2 = Fragment2.from($from.node(d).copy(wrap2));
8334
9667
  }
8335
9668
  const depthAfter = (
8336
9669
  // eslint-disable-next-line no-nested-ternary
@@ -8341,7 +9674,7 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8341
9674
  ...overrideAttrs
8342
9675
  };
8343
9676
  const nextType2 = ((_a = type.contentMatch.defaultType) == null ? void 0 : _a.createAndFill(newNextTypeAttributes2)) || void 0;
8344
- wrap2 = wrap2.append(Fragment3.from(type.createAndFill(null, nextType2) || void 0));
9677
+ wrap2 = wrap2.append(Fragment2.from(type.createAndFill(null, nextType2) || void 0));
8345
9678
  const start = $from.before($from.depth - (depthBefore - 1));
8346
9679
  tr.replace(start, $from.after(-depthAfter), new Slice(wrap2, 4 - depthBefore, 0));
8347
9680
  let sel = -1;
@@ -8961,7 +10294,7 @@ var Drop = Extension.create({
8961
10294
  new Plugin({
8962
10295
  key: new PluginKey("tiptapDrop"),
8963
10296
  props: {
8964
- handleDrop: (_18, e, slice, moved) => {
10297
+ handleDrop: (_20, e, slice, moved) => {
8965
10298
  this.editor.emit("drop", {
8966
10299
  editor: this.editor,
8967
10300
  event: e,
@@ -9763,8 +11096,23 @@ var Underline = Mark2.create({
9763
11096
  }
9764
11097
  });
9765
11098
  var index_default = Underline;
9766
- var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9767
- const theme = useTheme$1();
11099
+ var AppRichTextEditor = ({
11100
+ name,
11101
+ label,
11102
+ required = false,
11103
+ variant = "outlined",
11104
+ placeholder,
11105
+ sx,
11106
+ editorSx,
11107
+ toolbarSx,
11108
+ contentSx,
11109
+ errorSx,
11110
+ labelSx,
11111
+ buttonSx,
11112
+ activeButtonSx,
11113
+ dialogSx
11114
+ }) => {
11115
+ useTheme();
9768
11116
  const { values, setFieldValue } = useFormikContext();
9769
11117
  const [linkDialogOpen, setLinkDialogOpen] = useState(false);
9770
11118
  const [linkUrl, setLinkUrl] = useState("");
@@ -9787,11 +11135,6 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9787
11135
  }, [values[name]]);
9788
11136
  if (!editor)
9789
11137
  return null;
9790
- const openLinkDialog = () => {
9791
- const previousUrl = editor.getAttributes("link").href || "";
9792
- setLinkUrl(previousUrl);
9793
- setLinkDialogOpen(true);
9794
- };
9795
11138
  const applyLink = () => {
9796
11139
  editor.chain().focus().extendMarkRange("link").setLink({ href: linkUrl }).run();
9797
11140
  setLinkDialogOpen(false);
@@ -9800,24 +11143,63 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9800
11143
  editor.chain().focus().unsetLink().run();
9801
11144
  setLinkDialogOpen(false);
9802
11145
  };
9803
- return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
11146
+ return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...sx }, children: [
11147
+ /* @__PURE__ */ jsx(
11148
+ ErrorMessage,
11149
+ {
11150
+ name,
11151
+ render: (msg) => /* @__PURE__ */ jsx(
11152
+ Typography,
11153
+ {
11154
+ variant: "caption",
11155
+ sx: [{
11156
+ color: "error.main",
11157
+ display: "block",
11158
+ mt: 0.5,
11159
+ ...errorSx
11160
+ }],
11161
+ children: msg
11162
+ }
11163
+ )
11164
+ }
11165
+ ),
9804
11166
  label && /* @__PURE__ */ jsxs(
9805
11167
  Typography,
9806
11168
  {
9807
11169
  variant: "button",
9808
- sx: { color: theme.palette.text.primary, mb: 1, display: "block" },
11170
+ sx: [{
11171
+ color: "text.primary",
11172
+ mb: 1,
11173
+ display: "block",
11174
+ ...labelSx
11175
+ }],
9809
11176
  children: [
9810
11177
  label,
9811
11178
  required && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
9812
11179
  ]
9813
11180
  }
9814
11181
  ),
9815
- /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, display: "flex", gap: 1, flexWrap: "wrap" }, children: [
11182
+ /* @__PURE__ */ jsxs(Box, { sx: {
11183
+ mb: 1,
11184
+ display: "flex",
11185
+ gap: 1,
11186
+ flexWrap: "wrap",
11187
+ p: 1,
11188
+ bgcolor: "background.paper",
11189
+ borderRadius: 1,
11190
+ border: "1px solid",
11191
+ borderColor: "divider",
11192
+ ...toolbarSx
11193
+ }, children: [
9816
11194
  /* @__PURE__ */ jsx(Tooltip, { title: "Bold", children: /* @__PURE__ */ jsx(
9817
11195
  IconButton,
9818
11196
  {
9819
11197
  onClick: () => editor.chain().focus().toggleBold().run(),
9820
11198
  color: editor.isActive("bold") ? "primary" : "default",
11199
+ sx: {
11200
+ ...buttonSx,
11201
+ ...editor.isActive("bold") ? activeButtonSx : {}
11202
+ },
9821
11203
  children: /* @__PURE__ */ jsx(FormatBoldIcon, {})
9822
11204
  }
9823
11205
  ) }),
@@ -9826,6 +11208,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9826
11208
  {
9827
11209
  onClick: () => editor.chain().focus().toggleItalic().run(),
9828
11210
  color: editor.isActive("italic") ? "primary" : "default",
11211
+ sx: {
11212
+ ...buttonSx,
11213
+ ...editor.isActive("italic") ? activeButtonSx : {}
11214
+ },
9829
11215
  children: /* @__PURE__ */ jsx(FormatItalicIcon, {})
9830
11216
  }
9831
11217
  ) }),
@@ -9834,6 +11220,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9834
11220
  {
9835
11221
  onClick: () => editor.chain().focus().toggleUnderline().run(),
9836
11222
  color: editor.isActive("underline") ? "primary" : "default",
11223
+ sx: {
11224
+ ...buttonSx,
11225
+ ...editor.isActive("underline") ? activeButtonSx : {}
11226
+ },
9837
11227
  children: /* @__PURE__ */ jsx(FormatUnderlinedIcon, {})
9838
11228
  }
9839
11229
  ) }),
@@ -9842,6 +11232,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9842
11232
  {
9843
11233
  onClick: () => editor.chain().focus().toggleStrike().run(),
9844
11234
  color: editor.isActive("strike") ? "primary" : "default",
11235
+ sx: {
11236
+ ...buttonSx,
11237
+ ...editor.isActive("strike") ? activeButtonSx : {}
11238
+ },
9845
11239
  children: /* @__PURE__ */ jsx(StrikethroughSIcon, {})
9846
11240
  }
9847
11241
  ) }),
@@ -9850,6 +11244,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9850
11244
  {
9851
11245
  onClick: () => editor.chain().focus().toggleBulletList().run(),
9852
11246
  color: editor.isActive("bulletList") ? "primary" : "default",
11247
+ sx: {
11248
+ ...buttonSx,
11249
+ ...editor.isActive("bulletList") ? activeButtonSx : {}
11250
+ },
9853
11251
  children: /* @__PURE__ */ jsx(FormatListBulletedIcon, {})
9854
11252
  }
9855
11253
  ) }),
@@ -9858,6 +11256,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9858
11256
  {
9859
11257
  onClick: () => editor.chain().focus().toggleOrderedList().run(),
9860
11258
  color: editor.isActive("orderedList") ? "primary" : "default",
11259
+ sx: {
11260
+ ...buttonSx,
11261
+ ...editor.isActive("orderedList") ? activeButtonSx : {}
11262
+ },
9861
11263
  children: /* @__PURE__ */ jsx(FormatListNumberedIcon, {})
9862
11264
  }
9863
11265
  ) }),
@@ -9866,6 +11268,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9866
11268
  {
9867
11269
  onClick: () => editor.chain().focus().setTextAlign("left").run(),
9868
11270
  color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
11271
+ sx: {
11272
+ ...buttonSx,
11273
+ ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
11274
+ },
9869
11275
  children: /* @__PURE__ */ jsx(FormatAlignLeftIcon, {})
9870
11276
  }
9871
11277
  ) }),
@@ -9874,6 +11280,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9874
11280
  {
9875
11281
  onClick: () => editor.chain().focus().setTextAlign("center").run(),
9876
11282
  color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
11283
+ sx: {
11284
+ ...buttonSx,
11285
+ ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
11286
+ },
9877
11287
  children: /* @__PURE__ */ jsx(FormatAlignCenterIcon, {})
9878
11288
  }
9879
11289
  ) }),
@@ -9882,6 +11292,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9882
11292
  {
9883
11293
  onClick: () => editor.chain().focus().setTextAlign("right").run(),
9884
11294
  color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
11295
+ sx: {
11296
+ ...buttonSx,
11297
+ ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
11298
+ },
9885
11299
  children: /* @__PURE__ */ jsx(FormatAlignRightIcon, {})
9886
11300
  }
9887
11301
  ) }),
@@ -9890,36 +11304,78 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9890
11304
  {
9891
11305
  onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
9892
11306
  color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
11307
+ sx: {
11308
+ ...buttonSx,
11309
+ ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
11310
+ },
9893
11311
  children: /* @__PURE__ */ jsx(TitleIcon, { sx: { fontSize: "1rem" } })
9894
11312
  }
9895
11313
  ) }),
9896
- /* @__PURE__ */ jsx(Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsx(
11314
+ /* @__PURE__ */ jsx(Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxs(
9897
11315
  IconButton,
9898
11316
  {
9899
11317
  onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
9900
11318
  color: editor.isActive("heading", { level: 2 }) ? "primary" : "default",
9901
- children: /* @__PURE__ */ jsx(TitleIcon, { sx: { fontSize: "0.85rem" } })
9902
- }
9903
- ) }),
9904
- /* @__PURE__ */ jsx(Tooltip, { title: "Insert Link", children: /* @__PURE__ */ jsx(
9905
- IconButton,
9906
- {
9907
- onClick: openLinkDialog,
9908
- color: editor.isActive("link") ? "primary" : "default",
9909
- children: /* @__PURE__ */ jsx(LinkIcon, {})
11319
+ sx: {
11320
+ ...buttonSx,
11321
+ ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
11322
+ },
11323
+ children: [
11324
+ /* @__PURE__ */ jsx(TitleIcon, { sx: { fontSize: "0.85rem" } }),
11325
+ /* @__PURE__ */ jsx(UndoIcon, {})
11326
+ ]
9910
11327
  }
9911
11328
  ) }),
9912
- /* @__PURE__ */ jsx(Tooltip, { title: "Undo", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => editor.chain().focus().undo().run(), children: /* @__PURE__ */ jsx(UndoIcon, {}) }) }),
9913
11329
  /* @__PURE__ */ jsx(Tooltip, { title: "Redo", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsx(RedoIcon, {}) }) })
9914
11330
  ] }),
9915
11331
  /* @__PURE__ */ jsx(
9916
11332
  Box,
9917
11333
  {
9918
11334
  sx: {
9919
- border: `1px solid ${theme.palette.grey[400]}`,
11335
+ border: "1px solid",
11336
+ borderColor: "divider",
9920
11337
  borderRadius: 1,
11338
+ p: 2,
9921
11339
  minHeight: 200,
9922
- p: 2
11340
+ maxHeight: 400,
11341
+ overflowY: "auto",
11342
+ bgcolor: "background.paper",
11343
+ "& .ProseMirror": {
11344
+ outline: "none",
11345
+ minHeight: 150,
11346
+ "& > * + *": {
11347
+ mt: 2
11348
+ },
11349
+ "& h1": {
11350
+ fontSize: "2em",
11351
+ fontWeight: "bold",
11352
+ lineHeight: 1.2,
11353
+ color: "text.primary"
11354
+ },
11355
+ "& h2": {
11356
+ fontSize: "1.5em",
11357
+ fontWeight: "bold",
11358
+ lineHeight: 1.3,
11359
+ color: "text.primary"
11360
+ },
11361
+ "& p": {
11362
+ color: "text.primary",
11363
+ lineHeight: 1.6
11364
+ },
11365
+ "& ul, & ol": {
11366
+ pl: 3,
11367
+ color: "text.primary"
11368
+ },
11369
+ "& a": {
11370
+ color: "primary.main",
11371
+ textDecoration: "none",
11372
+ "&:hover": {
11373
+ textDecoration: "underline"
11374
+ }
11375
+ },
11376
+ ...contentSx
11377
+ },
11378
+ ...editorSx
9923
11379
  },
9924
11380
  children: /* @__PURE__ */ jsx(
9925
11381
  EditorContent,
@@ -9939,142 +11395,513 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9939
11395
  children: /* @__PURE__ */ jsx(ErrorMessage, { name, component: "div" })
9940
11396
  }
9941
11397
  ),
9942
- /* @__PURE__ */ jsxs(Dialog, { open: linkDialogOpen, onClose: () => setLinkDialogOpen(false), children: [
9943
- /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Link" }),
9944
- /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
9945
- TextField,
9946
- {
9947
- autoFocus: true,
9948
- margin: "dense",
9949
- label: "URL",
9950
- type: "url",
9951
- fullWidth: true,
9952
- variant: "outlined",
9953
- value: linkUrl,
9954
- onChange: (e) => setLinkUrl(e.target.value)
9955
- }
9956
- ) }),
9957
- /* @__PURE__ */ jsxs(DialogActions, { children: [
9958
- /* @__PURE__ */ jsx(Button, { onClick: removeLink, color: "error", children: "Remove" }),
9959
- /* @__PURE__ */ jsx(Button, { onClick: () => setLinkDialogOpen(false), children: "Cancel" }),
9960
- /* @__PURE__ */ jsx(Button, { onClick: applyLink, variant: "contained", children: "Apply" })
9961
- ] })
9962
- ] })
11398
+ /* @__PURE__ */ jsxs(
11399
+ Dialog,
11400
+ {
11401
+ open: linkDialogOpen,
11402
+ onClose: () => setLinkDialogOpen(false),
11403
+ PaperProps: {
11404
+ sx: {
11405
+ minWidth: 400,
11406
+ p: 2,
11407
+ bgcolor: "background.paper",
11408
+ borderRadius: 1,
11409
+ border: "1px solid",
11410
+ borderColor: "divider",
11411
+ "& .MuiDialogTitle-root": {
11412
+ borderBottom: "1px solid",
11413
+ borderColor: "divider",
11414
+ p: 2
11415
+ },
11416
+ "& .MuiDialogContent-root": {
11417
+ p: 2
11418
+ },
11419
+ "& .MuiDialogActions-root": {
11420
+ p: 2,
11421
+ borderTop: "1px solid",
11422
+ borderColor: "divider"
11423
+ },
11424
+ ...dialogSx
11425
+ }
11426
+ },
11427
+ children: [
11428
+ /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Link" }),
11429
+ /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
11430
+ TextField,
11431
+ {
11432
+ autoFocus: true,
11433
+ margin: "dense",
11434
+ id: "url",
11435
+ label: "URL",
11436
+ type: "url",
11437
+ fullWidth: true,
11438
+ variant,
11439
+ value: linkUrl,
11440
+ onChange: (e) => setLinkUrl(e.target.value),
11441
+ placeholder: "https://example.com"
11442
+ }
11443
+ ) }),
11444
+ /* @__PURE__ */ jsxs(DialogActions, { children: [
11445
+ /* @__PURE__ */ jsx(Button, { onClick: removeLink, color: "error", children: "Remove" }),
11446
+ /* @__PURE__ */ jsx(Button, { onClick: () => setLinkDialogOpen(false), children: "Cancel" }),
11447
+ /* @__PURE__ */ jsx(Button, { onClick: applyLink, variant: "contained", children: "Apply" })
11448
+ ] })
11449
+ ]
11450
+ }
11451
+ )
9963
11452
  ] });
9964
11453
  };
9965
11454
  var AppRichTextEditor_default = AppRichTextEditor;
9966
- function AppSearchableMultiSelector({
9967
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
9968
- multiple = true,
9969
- name,
9970
- label,
9971
- options = [],
9972
- required,
9973
- setSearchQuery
9974
- }) {
9975
- const { values, setFieldValue, errors, touched } = useFormikContext();
9976
- const fieldError = _17.get(errors, name);
9977
- const isTouched = Boolean(_17.get(touched, name));
9978
- const val = _17.get(values, name);
9979
- return /* @__PURE__ */ jsxs(
9980
- FormControl,
9981
- {
9982
- fullWidth: true,
9983
- sx: (theme) => ({
9984
- "& .MuiOutlinedInput-root": {
9985
- borderRadius: "8px",
9986
- color: theme.palette.common.black
9987
- },
9988
- "& .MuiSvgIcon-root": {
9989
- color: theme.palette.common.black
9990
- },
9991
- "& .MuiSelect-icon": {
9992
- color: theme.palette.common.black
9993
- },
9994
- ".MuiInputLabel-root": {
9995
- color: "text.primary"
11455
+ var AppSearchableMultiSelector = forwardRef(
11456
+ ({
11457
+ name,
11458
+ label,
11459
+ multiple = true,
11460
+ options = [],
11461
+ setSearchQuery,
11462
+ required = false,
11463
+ variant = "outlined",
11464
+ disabled = false,
11465
+ readOnly = false,
11466
+ showHelperText = false,
11467
+ helperText,
11468
+ maxSelections,
11469
+ showSelectedCount = false,
11470
+ sx,
11471
+ formControlSx,
11472
+ labelSx,
11473
+ inputSx,
11474
+ textFieldSx,
11475
+ autocompleteSx,
11476
+ listboxSx,
11477
+ optionSx,
11478
+ chipSx,
11479
+ errorSx,
11480
+ helperTextSx,
11481
+ selectedCountSx,
11482
+ renderInput: externalRenderInput,
11483
+ renderOption: externalRenderOption,
11484
+ renderTags: externalRenderTags,
11485
+ renderGroup: externalRenderGroup,
11486
+ labelComponent: LabelComponent = InputLabel,
11487
+ inputComponent: InputComponent = "input",
11488
+ errorComponent: ErrorComponent = Typography,
11489
+ helperTextComponent: HelperTextComponent = FormHelperText,
11490
+ labelProps = {},
11491
+ inputProps = {},
11492
+ textFieldProps = {},
11493
+ autocompleteProps = {},
11494
+ checkboxProps = {},
11495
+ chipProps = {},
11496
+ errorProps = {},
11497
+ helperTextProps = {},
11498
+ className = "",
11499
+ formControlClassName = "",
11500
+ labelClassName = "",
11501
+ inputClassName = "",
11502
+ textFieldClassName = "",
11503
+ autocompleteClassName = "",
11504
+ listboxClassName = "",
11505
+ optionClassName = "",
11506
+ chipClassName = "",
11507
+ errorClassName = "",
11508
+ helperTextClassName = "",
11509
+ onInputChange: externalOnInputChange,
11510
+ onChange: externalOnChange,
11511
+ onOpen,
11512
+ onClose,
11513
+ onBlur: externalOnBlur,
11514
+ onFocus: externalOnFocus,
11515
+ onClear,
11516
+ onMaxSelectionsReached,
11517
+ onRemove,
11518
+ onAdd,
11519
+ ...otherProps
11520
+ }, ref) => {
11521
+ useTheme();
11522
+ const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
11523
+ const fieldError = _19.get(errors, name);
11524
+ const isTouched = Boolean(_19.get(touched, name));
11525
+ const hasError = Boolean(fieldError) && isTouched;
11526
+ const val = _19.get(values, name);
11527
+ const selectedValues = Array.isArray(val) ? val : [];
11528
+ const selectedCount = selectedValues.length;
11529
+ const handleChange = (event, value, reason, details) => {
11530
+ const normalizedValue = (() => {
11531
+ if (value === null)
11532
+ return [];
11533
+ const arr = Array.isArray(value) ? value : [value];
11534
+ return arr.map(
11535
+ (item) => typeof item === "string" ? { value: item, label: item } : item
11536
+ );
11537
+ })();
11538
+ if (maxSelections && normalizedValue.length > maxSelections) {
11539
+ if (onMaxSelectionsReached) {
11540
+ onMaxSelectionsReached(maxSelections);
11541
+ }
11542
+ return;
11543
+ }
11544
+ if (reason === "selectOption" || reason === "removeOption") {
11545
+ const added = normalizedValue.filter(
11546
+ (item) => !selectedValues.some((v) => v.value === item.value)
11547
+ );
11548
+ const removed = selectedValues.filter(
11549
+ (item) => !normalizedValue.some((v) => v.value === item.value)
11550
+ );
11551
+ if (added.length > 0 && onAdd) {
11552
+ added.forEach((item) => onAdd(item));
11553
+ }
11554
+ if (removed.length > 0 && onRemove) {
11555
+ removed.forEach((item) => onRemove(item));
11556
+ }
11557
+ }
11558
+ setFieldValue(name, normalizedValue, true);
11559
+ if (externalOnChange) {
11560
+ externalOnChange(event, normalizedValue, reason);
11561
+ }
11562
+ };
11563
+ const handleInputChange = (event, value, reason) => {
11564
+ if (setSearchQuery) {
11565
+ setSearchQuery(value);
11566
+ }
11567
+ if (externalOnInputChange) {
11568
+ externalOnInputChange(event, value, reason);
11569
+ }
11570
+ };
11571
+ const handleBlur = (event) => {
11572
+ setFieldTouched(name, true, true);
11573
+ if (externalOnBlur) {
11574
+ externalOnBlur(event);
11575
+ }
11576
+ };
11577
+ const handleFocus = (event) => {
11578
+ if (externalOnFocus) {
11579
+ externalOnFocus(event);
11580
+ }
11581
+ };
11582
+ const filterOptions = (options2, { inputValue }) => {
11583
+ if (!inputValue)
11584
+ return options2;
11585
+ const inputValueLower = inputValue.toLowerCase();
11586
+ return options2.filter(
11587
+ (option) => {
11588
+ var _a, _b, _c, _d;
11589
+ return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || String(option.value).toLowerCase().includes(inputValueLower) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValueLower)) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValueLower));
11590
+ }
11591
+ );
11592
+ };
11593
+ const defaultRenderInput = (params) => /* @__PURE__ */ jsx(
11594
+ TextField,
11595
+ {
11596
+ ...params,
11597
+ variant,
11598
+ error: hasError,
11599
+ helperText: "",
11600
+ placeholder: "",
11601
+ inputRef: inputProps.ref,
11602
+ inputProps: {
11603
+ ...params.inputProps,
11604
+ ...inputProps,
11605
+ className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
9996
11606
  },
9997
- ".MuiInputLabel-root.Mui-focused": {
9998
- color: "text.primary"
11607
+ InputProps: {
11608
+ ...params.InputProps,
11609
+ ...textFieldProps.InputProps,
11610
+ className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
9999
11611
  },
10000
- "& .MuiSelect-select": {
10001
- color: "text.primary"
10002
- }
10003
- }),
10004
- children: [
10005
- /* @__PURE__ */ jsxs(InputLabel, { sx: { mb: 1 }, shrink: true, htmlFor: `autocomplete-${name}`, children: [
10006
- label,
10007
- " ",
10008
- required === true && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: "*" })
10009
- ] }),
10010
- /* @__PURE__ */ jsx(
10011
- Autocomplete,
11612
+ sx: [
10012
11613
  {
10013
- multiple: true,
10014
- id: `autocomplete-${name}`,
10015
- options: options || [],
10016
- value: val,
10017
- defaultValue: val,
10018
- filterOptions: (options2, { inputValue }) => {
10019
- return options2.filter(
10020
- (option) => {
10021
- var _a, _b, _c, _d;
10022
- return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || String(option.value).toLowerCase().includes(inputValue.toLowerCase()) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValue.toLowerCase())) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValue.toLowerCase())) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValue.toLowerCase()));
10023
- }
10024
- );
11614
+ "& .MuiOutlinedInput-root": {
11615
+ borderRadius: "8px",
11616
+ "& fieldset": {
11617
+ borderColor: hasError ? "error.main" : "divider"
11618
+ },
11619
+ "&:hover fieldset": {
11620
+ borderColor: hasError ? "error.main" : "text.primary"
11621
+ },
11622
+ "&.Mui-focused fieldset": {
11623
+ borderColor: hasError ? "error.main" : "primary.main"
11624
+ },
11625
+ "& .MuiInputLabel-root": {
11626
+ // Your label styles here
11627
+ }
11628
+ }
11629
+ },
11630
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11631
+ ],
11632
+ ...textFieldProps
11633
+ }
11634
+ );
11635
+ const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ createElement(
11636
+ "li",
11637
+ {
11638
+ ...props,
11639
+ key: option.value,
11640
+ className: `${props.className || ""} ${optionClassName}`.trim(),
11641
+ style: {
11642
+ ...props.style,
11643
+ opacity: option.disabled ? 0.5 : 1,
11644
+ pointerEvents: option.disabled ? "none" : "auto"
11645
+ }
11646
+ },
11647
+ /* @__PURE__ */ jsx(
11648
+ Checkbox,
11649
+ {
11650
+ checked: selected,
11651
+ disabled: option.disabled,
11652
+ sx: {
11653
+ color: "text.secondary",
11654
+ "&.Mui-checked": {
11655
+ color: "primary.main"
10025
11656
  },
10026
- onInputChange: (event, value) => {
10027
- setSearchQuery(value);
11657
+ "&.Mui-disabled": {
11658
+ color: "text.disabled"
10028
11659
  },
10029
- onChange: (e, newValue) => {
10030
- setFieldValue(name, newValue, true);
11660
+ mr: 1,
11661
+ ...checkboxProps.sx
11662
+ },
11663
+ ...checkboxProps
11664
+ }
11665
+ ),
11666
+ option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
11667
+ /* @__PURE__ */ jsx(
11668
+ Typography,
11669
+ {
11670
+ variant: "body2",
11671
+ sx: [
11672
+ {
11673
+ color: option.disabled ? "text.disabled" : "text.primary",
11674
+ ...option.textSx
10031
11675
  },
10032
- sx: { ".MuiAutocomplete-input": { p: "0 !important" } },
10033
- renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxs("li", { ...props, children: [
10034
- /* @__PURE__ */ jsx(Checkbox, { checked: selected, sx: { mr: 1 } }),
10035
- option.label
10036
- ] }),
10037
- renderInput: (params) => /* @__PURE__ */ jsx(
10038
- TextField,
10039
- {
10040
- ...params,
10041
- variant: "outlined",
10042
- error: Boolean(fieldError) && isTouched,
10043
- helperText: isTouched && typeof fieldError === "string" ? fieldError : "",
10044
- placeholder: ""
10045
- }
10046
- ),
10047
- renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ createElement(
10048
- Chip,
11676
+ ...Array.isArray(optionSx) ? optionSx : [optionSx]
11677
+ ],
11678
+ children: option.label
11679
+ }
11680
+ )
11681
+ );
11682
+ const defaultRenderTags = (value, getTagProps) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
11683
+ const { key, ...tagProps } = getTagProps({ index });
11684
+ return /* @__PURE__ */ createElement(
11685
+ Chip,
11686
+ {
11687
+ ...tagProps,
11688
+ key: option.value,
11689
+ label: option.label,
11690
+ disabled: disabled || option.disabled,
11691
+ sx: [
11692
+ {
11693
+ height: "24px",
11694
+ borderRadius: "4px",
11695
+ "& .MuiChip-deleteIcon": {
11696
+ color: "text.secondary",
11697
+ "&:hover": {
11698
+ color: "text.primary"
11699
+ }
11700
+ },
11701
+ ...chipSx
11702
+ },
11703
+ ...Array.isArray(chipSx) ? chipSx : [chipSx]
11704
+ ],
11705
+ className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
11706
+ ...chipProps
11707
+ }
11708
+ );
11709
+ }) });
11710
+ const renderSelectedCount = () => {
11711
+ if (!showSelectedCount || !multiple)
11712
+ return null;
11713
+ return /* @__PURE__ */ jsxs(
11714
+ Typography,
11715
+ {
11716
+ variant: "caption",
11717
+ sx: [
11718
+ {
11719
+ mt: 0.5,
11720
+ color: "text.secondary",
11721
+ ...selectedCountSx
11722
+ },
11723
+ ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
11724
+ ],
11725
+ children: [
11726
+ `${selectedCount} selected`,
11727
+ maxSelections ? ` (max ${maxSelections})` : ""
11728
+ ]
11729
+ }
11730
+ );
11731
+ };
11732
+ return /* @__PURE__ */ jsx(
11733
+ Box,
11734
+ {
11735
+ ref,
11736
+ className: `app-searchable-multi-selector ${className}`.trim(),
11737
+ sx: [
11738
+ {
11739
+ width: "100%"
11740
+ },
11741
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11742
+ ],
11743
+ children: /* @__PURE__ */ jsxs(
11744
+ FormControl,
11745
+ {
11746
+ fullWidth: true,
11747
+ error: hasError,
11748
+ disabled,
11749
+ className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
11750
+ sx: [
10049
11751
  {
10050
- label: option.label,
10051
- ...getTagProps({ index }),
10052
- key: option.value,
10053
- sx: { height: "20px", borderRadius: "2px", margin: "0px 3px 0px 0px !important" }
10054
- }
10055
- )),
10056
- disableCloseOnSelect: true,
10057
- isOptionEqualToValue: (option, value) => option.value === value.value
11752
+ "& .MuiAutocomplete-root": {
11753
+ "& .MuiOutlinedInput-root": {
11754
+ padding: "4px"
11755
+ },
11756
+ "& .MuiAutocomplete-input": {
11757
+ padding: "8.5px 4px"
11758
+ }
11759
+ }
11760
+ },
11761
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
11762
+ ],
11763
+ children: [
11764
+ label && /* @__PURE__ */ jsxs(
11765
+ LabelComponent,
11766
+ {
11767
+ shrink: true,
11768
+ htmlFor: `autocomplete-${name}`,
11769
+ className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
11770
+ sx: [
11771
+ {
11772
+ mb: 1,
11773
+ color: hasError ? "error.main" : "text.primary",
11774
+ "&.Mui-focused": {
11775
+ color: hasError ? "error.main" : "primary.main"
11776
+ },
11777
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
11778
+ }
11779
+ ],
11780
+ ...labelProps,
11781
+ children: [
11782
+ label,
11783
+ required && /* @__PURE__ */ jsx(
11784
+ Box,
11785
+ {
11786
+ component: "span",
11787
+ sx: {
11788
+ color: "error.main",
11789
+ ml: 0.5
11790
+ },
11791
+ children: "*"
11792
+ }
11793
+ )
11794
+ ]
11795
+ }
11796
+ ),
11797
+ /* @__PURE__ */ jsx(
11798
+ Autocomplete,
11799
+ {
11800
+ multiple,
11801
+ id: `autocomplete-${name}`,
11802
+ options,
11803
+ value: selectedValues,
11804
+ filterOptions,
11805
+ onInputChange: handleInputChange,
11806
+ onChange: handleChange,
11807
+ onOpen,
11808
+ onClose,
11809
+ onBlur: handleBlur,
11810
+ onFocus: handleFocus,
11811
+ disableCloseOnSelect: multiple,
11812
+ readOnly,
11813
+ disabled,
11814
+ isOptionEqualToValue: (option, value) => option.value === value.value,
11815
+ getOptionLabel: (option) => typeof option === "string" ? option : option.label,
11816
+ getOptionDisabled: (option) => !!option.disabled,
11817
+ renderInput: externalRenderInput || defaultRenderInput,
11818
+ renderOption: externalRenderOption || defaultRenderOption,
11819
+ renderTags: externalRenderTags || defaultRenderTags,
11820
+ renderGroup: externalRenderGroup,
11821
+ ListboxProps: {
11822
+ className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
11823
+ sx: {
11824
+ "& .MuiAutocomplete-option": {
11825
+ px: 2,
11826
+ py: 1,
11827
+ '&[aria-selected="true"]': {
11828
+ backgroundColor: "action.selected",
11829
+ "&.Mui-focused": {
11830
+ backgroundColor: "action.hover"
11831
+ }
11832
+ },
11833
+ "&.Mui-focused": {
11834
+ backgroundColor: "action.hover"
11835
+ }
11836
+ },
11837
+ ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
11838
+ ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
11839
+ }
11840
+ },
11841
+ className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
11842
+ sx: [
11843
+ {
11844
+ "& .MuiAutocomplete-tag": {
11845
+ margin: 0,
11846
+ height: "auto"
11847
+ },
11848
+ "& .MuiAutocomplete-endAdornment": {
11849
+ right: 8
11850
+ }
11851
+ },
11852
+ ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
11853
+ ],
11854
+ ...autocompleteProps,
11855
+ ...otherProps
11856
+ }
11857
+ ),
11858
+ (showHelperText || hasError) && /* @__PURE__ */ jsx(
11859
+ HelperTextComponent,
11860
+ {
11861
+ error: hasError,
11862
+ sx: [
11863
+ {
11864
+ mx: 0,
11865
+ mt: 0.5,
11866
+ ...hasError ? {
11867
+ color: "error.main",
11868
+ ...errorSx
11869
+ } : {
11870
+ color: "text.secondary",
11871
+ ...helperTextSx
11872
+ }
11873
+ }
11874
+ ],
11875
+ className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
11876
+ ...helperTextProps,
11877
+ children: hasError ? fieldError : helperText
11878
+ }
11879
+ ),
11880
+ renderSelectedCount()
11881
+ ]
10058
11882
  }
10059
11883
  )
10060
- ]
10061
- }
10062
- );
10063
- }
11884
+ }
11885
+ );
11886
+ }
11887
+ );
11888
+ AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
11889
+ var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
10064
11890
  function AppSearchableSelectInput({
10065
11891
  name,
10066
11892
  label,
10067
- required,
10068
11893
  options = [],
11894
+ required = false,
11895
+ variant = "outlined",
10069
11896
  placeholder,
10070
11897
  setSearchQuery,
10071
11898
  isResetRequired,
10072
11899
  ...otherProps
10073
11900
  }) {
10074
11901
  const { errors, touched, setFieldValue, values } = useFormikContext();
10075
- const fieldError = _17.get(errors, name);
10076
- const isTouched = _17.get(touched, name);
10077
- const val = _17.get(values, name);
11902
+ const fieldError = _19.get(errors, name);
11903
+ const isTouched = _19.get(touched, name);
11904
+ const val = _19.get(values, name);
10078
11905
  const selectedOption = options.find((option) => option.value === val) || null;
10079
11906
  const handleChange = (event, newValue) => {
10080
11907
  setFieldValue(name, newValue ? newValue.value : "");
@@ -10089,7 +11916,8 @@ function AppSearchableSelectInput({
10089
11916
  FormControl,
10090
11917
  {
10091
11918
  fullWidth: true,
10092
- variant: "outlined",
11919
+ variant,
11920
+ error: isTouched && Boolean(fieldError),
10093
11921
  sx: {
10094
11922
  padding: "0px !important",
10095
11923
  ".MuiAutocomplete-endAdornment": { right: "0 !important" },
@@ -10127,107 +11955,445 @@ function AppSearchableSelectInput({
10127
11955
  label,
10128
11956
  required && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: " *" })
10129
11957
  ] }),
10130
- variant: "outlined",
11958
+ variant,
10131
11959
  placeholder,
10132
11960
  error: Boolean(fieldError) && isTouched,
10133
11961
  helperText: isTouched && fieldError ? fieldError : "",
10134
11962
  FormHelperTextProps: {
10135
11963
  sx: { color: "#FF5630" }
10136
11964
  },
10137
- sx: {
10138
- "& .MuiInputLabel-root": {
10139
- color: "text.primary"
10140
- },
10141
- "& .MuiInputLabel-root.Mui-focused": {
10142
- color: "text.primary"
10143
- },
10144
- "& .MuiOutlinedInput-input": {
10145
- color: "common.black"
10146
- },
10147
- // '& .MuiOutlinedInput-notchedOutline': {
10148
- // borderColor: 'rgba(255,255,255,0.3)',
10149
- // },
10150
- "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
10151
- borderColor: "common.white"
10152
- },
10153
- "& .MuiSvgIcon-root": {
10154
- color: "common.black"
10155
- }
11965
+ sx: {
11966
+ "& .MuiInputLabel-root": {
11967
+ color: "text.primary"
11968
+ },
11969
+ "& .MuiInputLabel-root.Mui-focused": {
11970
+ color: "text.primary"
11971
+ },
11972
+ "& .MuiOutlinedInput-input": {
11973
+ color: "common.black"
11974
+ },
11975
+ "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
11976
+ borderColor: "common.white"
11977
+ },
11978
+ "& .MuiSvgIcon-root": {
11979
+ color: "common.black"
11980
+ }
11981
+ }
11982
+ }
11983
+ ),
11984
+ ...otherProps
11985
+ }
11986
+ )
11987
+ }
11988
+ );
11989
+ }
11990
+ var AppSelectInput = forwardRef(
11991
+ ({
11992
+ name,
11993
+ variant = "outlined",
11994
+ label,
11995
+ fullWidth = true,
11996
+ required = false,
11997
+ disabled = false,
11998
+ readOnly = false,
11999
+ options = [],
12000
+ showNoneOption = false,
12001
+ noneOptionText = "None",
12002
+ showHelperText = false,
12003
+ helperText,
12004
+ sx,
12005
+ formControlSx,
12006
+ selectSx,
12007
+ inputSx,
12008
+ labelSx,
12009
+ menuPaperSx,
12010
+ menuItemSx,
12011
+ selectedMenuItemSx,
12012
+ errorSx,
12013
+ helperTextSx,
12014
+ iconSx,
12015
+ labelComponent: LabelComponent = InputLabel,
12016
+ errorComponent: ErrorComponent = Typography,
12017
+ helperTextComponent: HelperTextComponent = FormHelperText,
12018
+ onChange: externalOnChange,
12019
+ onOpen,
12020
+ onClose,
12021
+ onBlur: externalOnBlur,
12022
+ renderValue,
12023
+ renderMenuItem,
12024
+ MenuProps,
12025
+ inputProps,
12026
+ ...otherProps
12027
+ }, ref) => {
12028
+ const theme = useTheme();
12029
+ const { errors, touched, values, setFieldValue, setFieldTouched } = useFormikContext();
12030
+ const fieldError = _19.get(errors, name);
12031
+ const isTouched = _19.get(touched, name);
12032
+ const hasError = Boolean(fieldError) && isTouched;
12033
+ const value = _19.get(values, name);
12034
+ const handleChange = (event, child) => {
12035
+ setFieldValue(name, event.target.value, true);
12036
+ if (externalOnChange) {
12037
+ externalOnChange(event, child);
12038
+ }
12039
+ };
12040
+ const handleBlur = (event) => {
12041
+ setFieldTouched(name, true, true);
12042
+ if (externalOnBlur) {
12043
+ externalOnBlur(event);
12044
+ }
12045
+ };
12046
+ const renderDefaultMenuItem = (option, index) => {
12047
+ const MenuItemComponent = option.component || MenuItem;
12048
+ const menuItemProps = option.component ? option.componentProps : {};
12049
+ return /* @__PURE__ */ jsxs(
12050
+ MenuItemComponent,
12051
+ {
12052
+ value: option.value,
12053
+ disabled: option.disabled,
12054
+ ...menuItemProps,
12055
+ sx: [
12056
+ {
12057
+ color: "text.primary",
12058
+ "&.Mui-selected": {
12059
+ backgroundColor: "action.selected",
12060
+ "&:hover": {
12061
+ backgroundColor: "action.hover"
12062
+ },
12063
+ ...selectedMenuItemSx
12064
+ },
12065
+ "&.Mui-disabled": {
12066
+ opacity: 0.5,
12067
+ pointerEvents: "none"
12068
+ },
12069
+ ...option.sx
12070
+ },
12071
+ ...Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx]
12072
+ ],
12073
+ children: [
12074
+ option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
12075
+ /* @__PURE__ */ jsx(
12076
+ Typography,
12077
+ {
12078
+ variant: "body2",
12079
+ sx: [
12080
+ {
12081
+ color: option.disabled ? "text.disabled" : "text.primary",
12082
+ ...option.textSx
12083
+ }
12084
+ ],
12085
+ children: option.label
12086
+ }
12087
+ )
12088
+ ]
12089
+ },
12090
+ `${option.value}-${index}`
12091
+ );
12092
+ };
12093
+ return /* @__PURE__ */ jsx(
12094
+ Box,
12095
+ {
12096
+ ref,
12097
+ className: "app-select-input",
12098
+ sx: [
12099
+ {
12100
+ "& .MuiInputLabel-root": {
12101
+ "&.Mui-focused": {
12102
+ color: hasError ? "error.main" : "primary.main"
12103
+ },
12104
+ "&.Mui-disabled": {
12105
+ color: "text.disabled"
10156
12106
  }
10157
12107
  }
10158
- ),
10159
- ...otherProps
10160
- }
10161
- )
10162
- }
10163
- );
10164
- }
10165
- function AppSelectInput({
12108
+ },
12109
+ ...Array.isArray(formControlSx) ? formControlSx : [formControlSx].filter(Boolean)
12110
+ ],
12111
+ children: /* @__PURE__ */ jsxs(
12112
+ FormControl,
12113
+ {
12114
+ fullWidth,
12115
+ variant,
12116
+ error: hasError,
12117
+ disabled,
12118
+ className: "app-select-form-control",
12119
+ sx: [
12120
+ {
12121
+ "& .MuiInputLabel-root": {
12122
+ "&.Mui-focused": {
12123
+ color: hasError ? "error.main" : "primary.main"
12124
+ },
12125
+ "&.Mui-disabled": {
12126
+ color: "text.disabled"
12127
+ }
12128
+ }
12129
+ },
12130
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
12131
+ ],
12132
+ children: [
12133
+ label && /* @__PURE__ */ jsxs(
12134
+ LabelComponent,
12135
+ {
12136
+ id: `select-${name}-label`,
12137
+ htmlFor: `select-${name}`,
12138
+ className: "app-select-label",
12139
+ sx: [
12140
+ {
12141
+ color: hasError ? "error.main" : "text.secondary",
12142
+ "&.Mui-focused": {
12143
+ color: hasError ? "error.main" : "primary.main"
12144
+ },
12145
+ mb: 1,
12146
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
12147
+ }
12148
+ ],
12149
+ children: [
12150
+ label,
12151
+ required && /* @__PURE__ */ jsx(
12152
+ Box,
12153
+ {
12154
+ component: "span",
12155
+ sx: {
12156
+ color: "error.main",
12157
+ ml: 0.5
12158
+ },
12159
+ children: "*"
12160
+ }
12161
+ )
12162
+ ]
12163
+ }
12164
+ ),
12165
+ /* @__PURE__ */ jsxs(
12166
+ Select,
12167
+ {
12168
+ variant: "outlined",
12169
+ labelId: label ? `select-${name}-label` : void 0,
12170
+ id: `select-${name}`,
12171
+ name,
12172
+ value: value != null ? value : "",
12173
+ onChange: handleChange,
12174
+ onBlur: handleBlur,
12175
+ onOpen,
12176
+ onClose,
12177
+ renderValue,
12178
+ inputProps: {
12179
+ readOnly,
12180
+ ...inputProps
12181
+ },
12182
+ MenuProps: {
12183
+ PaperProps: {
12184
+ sx: [
12185
+ {
12186
+ mt: 1,
12187
+ boxShadow: theme.shadows[3],
12188
+ "& .MuiMenuItem-root": {
12189
+ px: 2,
12190
+ py: 1,
12191
+ "&.Mui-selected": {
12192
+ backgroundColor: "action.selected",
12193
+ "&:hover": {
12194
+ backgroundColor: "action.hover"
12195
+ }
12196
+ }
12197
+ },
12198
+ ...Array.isArray(menuPaperSx) ? menuPaperSx : [menuPaperSx]
12199
+ }
12200
+ ]
12201
+ },
12202
+ ...MenuProps
12203
+ },
12204
+ sx: [
12205
+ {
12206
+ // Your base styles here
12207
+ "&.Mui-disabled": {
12208
+ backgroundColor: "action.disabledBackground",
12209
+ "& .MuiOutlinedInput-notchedOutline": {
12210
+ borderColor: "action.disabled"
12211
+ },
12212
+ "& .MuiSelect-icon": {
12213
+ color: "action.disabled"
12214
+ }
12215
+ }
12216
+ },
12217
+ ...Array.isArray(selectSx) ? selectSx : selectSx ? [selectSx] : []
12218
+ ],
12219
+ ...otherProps,
12220
+ children: [
12221
+ showNoneOption && /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: noneOptionText }) }),
12222
+ options.map(
12223
+ (option, index) => renderMenuItem ? renderMenuItem(option, index) : renderDefaultMenuItem(option, index)
12224
+ )
12225
+ ]
12226
+ }
12227
+ ),
12228
+ (showHelperText || hasError) && /* @__PURE__ */ jsx(
12229
+ HelperTextComponent,
12230
+ {
12231
+ error: hasError,
12232
+ sx: [
12233
+ {
12234
+ mx: 0,
12235
+ mt: 0.5,
12236
+ ...hasError ? {
12237
+ color: "error.main",
12238
+ ...errorSx
12239
+ } : {
12240
+ color: "text.secondary",
12241
+ ...helperTextSx
12242
+ }
12243
+ }
12244
+ ],
12245
+ children: hasError ? fieldError : helperText
12246
+ }
12247
+ )
12248
+ ]
12249
+ }
12250
+ )
12251
+ }
12252
+ );
12253
+ }
12254
+ );
12255
+ AppSelectInput.displayName = "AppSelectInput";
12256
+ var AppSelectInput_default = AppSelectInput;
12257
+ var AppSimpleUploadFile = ({
10166
12258
  name,
10167
- label,
10168
- fullWidth = true,
10169
- required,
10170
- options = [],
10171
- ...otherProps
10172
- }) {
10173
- const { errors, touched, getFieldProps, values } = useFormikContext();
10174
- const fieldError = _17.get(errors, name);
10175
- const isTouched = _17.get(touched, name);
10176
- const val = _17.get(values, name);
10177
- return /* @__PURE__ */ jsxs(FormControl, { fullWidth, variant: "outlined", children: [
10178
- /* @__PURE__ */ jsxs(
10179
- InputLabel,
12259
+ label = "Upload Files",
12260
+ accept = "image/*",
12261
+ multiple = false,
12262
+ disabled = false,
12263
+ required = false,
12264
+ maxFiles,
12265
+ maxSizeInBytes = 5 * 1024 * 1024,
12266
+ // 5MB
12267
+ sx,
12268
+ buttonSx,
12269
+ errorSx,
12270
+ onAdd,
12271
+ onRemove,
12272
+ onError
12273
+ }) => {
12274
+ const { setFieldValue, values, errors, touched } = useFormikContext();
12275
+ const fieldValue = _19.get(values, name);
12276
+ const fieldError = _19.get(touched, name) ? _19.get(errors, name) : void 0;
12277
+ const handleChange = (event) => {
12278
+ const files = event.target.files;
12279
+ if (!files || files.length === 0)
12280
+ return;
12281
+ const newFiles = Array.from(files).map((file) => {
12282
+ if (file.size > maxSizeInBytes) {
12283
+ const errorMsg = `File ${file.name} exceeds maximum size of ${maxSizeInBytes / (1024 * 1024)}MB`;
12284
+ onError == null ? void 0 : onError(errorMsg);
12285
+ return null;
12286
+ }
12287
+ return Object.assign(file, {
12288
+ preview: URL.createObjectURL(file)
12289
+ });
12290
+ }).filter(Boolean);
12291
+ if (newFiles.length === 0)
12292
+ return;
12293
+ const currentFiles = fieldValue || [];
12294
+ const updatedFiles = multiple ? [...currentFiles, ...newFiles].slice(0, maxFiles || Infinity) : [newFiles[0]];
12295
+ setFieldValue(name, updatedFiles);
12296
+ newFiles.forEach((file) => onAdd == null ? void 0 : onAdd(file));
12297
+ event.target.value = "";
12298
+ };
12299
+ const handleRemove = (index) => {
12300
+ if (!fieldValue || index < 0 || index >= fieldValue.length)
12301
+ return;
12302
+ const fileToRemove = fieldValue[index];
12303
+ const newFiles = fieldValue.filter((_20, i) => i !== index);
12304
+ setFieldValue(name, newFiles);
12305
+ onRemove == null ? void 0 : onRemove(fileToRemove);
12306
+ if (fileToRemove.preview) {
12307
+ URL.revokeObjectURL(fileToRemove.preview);
12308
+ }
12309
+ };
12310
+ const handleClick = () => {
12311
+ const input = document.getElementById(
12312
+ `file-upload-${name}`
12313
+ );
12314
+ if (input)
12315
+ input.click();
12316
+ };
12317
+ const isMaxFilesReached = maxFiles !== void 0 && (fieldValue ? fieldValue.length >= maxFiles : false);
12318
+ return /* @__PURE__ */ jsxs(Box, { sx, children: [
12319
+ /* @__PURE__ */ jsx(
12320
+ "input",
10180
12321
  {
10181
- id: `select-${name}`,
10182
- sx: {
10183
- color: "text.primary",
10184
- "&.Mui-focused": {
10185
- color: "text.primary"
10186
- }
10187
- },
10188
- children: [
10189
- label,
10190
- " ",
10191
- required === true && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: "*" })
10192
- ]
12322
+ id: `file-upload-${name}`,
12323
+ type: "file",
12324
+ accept,
12325
+ multiple,
12326
+ onChange: handleChange,
12327
+ style: { display: "none" }
10193
12328
  }
10194
12329
  ),
10195
12330
  /* @__PURE__ */ jsx(
10196
- Select,
12331
+ Button,
10197
12332
  {
10198
12333
  variant: "outlined",
10199
- labelId: `select-${name}`,
10200
- id: "demo-simple-select",
10201
- label,
10202
- ...getFieldProps(name),
10203
- value: val,
10204
- sx: {
10205
- backgroundColor: "common.white",
10206
- color: "common.black",
10207
- "& .MuiSvgIcon-root": {
10208
- color: "common.black"
10209
- },
10210
- "& .MuiSelect-icon": {
10211
- color: "common.black"
10212
- },
10213
- "react-tel-input": {
10214
- backgroundColor: (theme) => `${theme.palette.common.white} !important`
10215
- },
10216
- "& .MuiInputBase-input.MuiOutlinedInput-input": {
10217
- color: "common.black"
12334
+ component: "span",
12335
+ disabled: disabled || isMaxFilesReached,
12336
+ onClick: handleClick,
12337
+ startIcon: /* @__PURE__ */ jsx(CloudUploadIcon, { fontSize: "small" }),
12338
+ sx: [
12339
+ {
12340
+ mb: 1,
12341
+ "&:hover": {
12342
+ backgroundColor: "action.hover"
12343
+ }
10218
12344
  },
10219
- "& .MuiInputBase-input": {
10220
- color: (theme) => theme.palette.common.black
10221
- }
10222
- },
10223
- error: Boolean(fieldError) && isTouched,
10224
- ...otherProps,
10225
- children: options == null ? void 0 : options.map((single, i) => /* @__PURE__ */ jsx(MenuItem, { value: single.value, children: single.label || single.value }, i))
12345
+ ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
12346
+ ],
12347
+ children: label
10226
12348
  }
10227
12349
  ),
10228
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
12350
+ fieldValue && fieldValue.length > 0 && /* @__PURE__ */ jsx(Stack, { spacing: 1, sx: { mt: 1 }, children: fieldValue.map((file, index) => /* @__PURE__ */ jsxs(
12351
+ Stack,
12352
+ {
12353
+ direction: "row",
12354
+ alignItems: "center",
12355
+ spacing: 1,
12356
+ sx: {
12357
+ p: 1,
12358
+ border: "1px solid",
12359
+ borderColor: "divider",
12360
+ borderRadius: 1
12361
+ },
12362
+ children: [
12363
+ /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { flex: 1 }, children: file.name }),
12364
+ /* @__PURE__ */ jsx(
12365
+ IconButton,
12366
+ {
12367
+ size: "small",
12368
+ onClick: () => handleRemove(index),
12369
+ disabled,
12370
+ sx: { p: 0.5 },
12371
+ children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
12372
+ }
12373
+ )
12374
+ ]
12375
+ },
12376
+ index
12377
+ )) }),
12378
+ fieldError && /* @__PURE__ */ jsx(
12379
+ Typography,
12380
+ {
12381
+ variant: "caption",
12382
+ color: "error",
12383
+ sx: [
12384
+ {
12385
+ display: "block",
12386
+ mt: 0.5,
12387
+ color: "error.main"
12388
+ },
12389
+ ...Array.isArray(errorSx) ? errorSx : [errorSx]
12390
+ ],
12391
+ children: fieldError
12392
+ }
12393
+ )
10229
12394
  ] });
10230
- }
12395
+ };
12396
+ var AppSimpleUploadFile_default = AppSimpleUploadFile;
10231
12397
 
10232
12398
  // src/file-thumbnail/utils.ts
10233
12399
  var FORMAT_PDF = ["pdf"];
@@ -10354,7 +12520,7 @@ function fileData(file) {
10354
12520
  };
10355
12521
  }
10356
12522
  function DownloadButton({ onDownload }) {
10357
- const theme = useTheme();
12523
+ const theme = useTheme$1();
10358
12524
  return /* @__PURE__ */ jsx(
10359
12525
  IconButton,
10360
12526
  {
@@ -10444,108 +12610,6 @@ function FileThumbnail({
10444
12610
  onDownload && /* @__PURE__ */ jsx(DownloadButton, { onDownload })
10445
12611
  ] });
10446
12612
  }
10447
- var AppSimpleUploadFile = ({ name, multiple }) => {
10448
- const { errors, setFieldValue, values } = useFormikContext();
10449
- const fieldError = _17.get(errors, name);
10450
- let val = _17.get(values, name);
10451
- if (multiple === true && typeof val === "string") {
10452
- val = val ? [val] : [];
10453
- } else if (multiple === false && _17.isArray(val)) {
10454
- val = val[0];
10455
- }
10456
- const valueArray = multiple === true ? val : val ? [val] : [];
10457
- const onchange = (event) => {
10458
- const { files } = event.target;
10459
- if (!files || files.length === 0)
10460
- return;
10461
- if (multiple === true) {
10462
- const existingFiles = Array.isArray(val) ? val : [];
10463
- setFieldValue(name, [...existingFiles, ...Array.from(files)], true);
10464
- } else {
10465
- setFieldValue(name, files == null ? void 0 : files[0], true);
10466
- }
10467
- event.target.value = "";
10468
- };
10469
- const handleDelete = (fileToDelete) => {
10470
- if (multiple === false) {
10471
- setFieldValue(name, void 0, true);
10472
- return;
10473
- }
10474
- const filteredFiles = val.filter((file) => {
10475
- if (file.file) {
10476
- return !_17.isEqual(fileToDelete, file.file);
10477
- }
10478
- return !_17.isEqual(fileToDelete, file);
10479
- });
10480
- setFieldValue(name, filteredFiles, true);
10481
- };
10482
- return /* @__PURE__ */ jsxs(Fragment, { children: [
10483
- /* @__PURE__ */ jsx(
10484
- "input",
10485
- {
10486
- id: `attachment-input-${name}`,
10487
- type: "file",
10488
- multiple,
10489
- onChange: onchange,
10490
- style: { display: "none" }
10491
- }
10492
- ),
10493
- /* @__PURE__ */ jsx("label", { htmlFor: `attachment-input-${name}`, children: /* @__PURE__ */ jsxs(
10494
- Button,
10495
- {
10496
- variant: "text",
10497
- color: "primary",
10498
- component: "span",
10499
- startIcon: /* @__PURE__ */ jsx(Iconify_default, { icon: "fontisto:upload", sx: { mr: 1 } }),
10500
- sx: {
10501
- ":hover": {
10502
- backgroundColor: "transparent"
10503
- }
10504
- },
10505
- children: [
10506
- "Upload Attachments",
10507
- " "
10508
- ]
10509
- }
10510
- ) }),
10511
- /* @__PURE__ */ jsx(
10512
- Stack,
10513
- {
10514
- sx: {
10515
- display: "flex",
10516
- flexFlow: "row wrap",
10517
- alignItems: "baseline"
10518
- },
10519
- rowGap: 1,
10520
- columnGap: 1,
10521
- children: valueArray.map((file) => {
10522
- const { key, name: title } = fileData(file);
10523
- return /* @__PURE__ */ jsx(
10524
- Chip,
10525
- {
10526
- label: title,
10527
- onDelete: () => handleDelete(file),
10528
- sx: {
10529
- border: "2px dashed #ffab00",
10530
- backgroundColor: "lightyellow",
10531
- borderRadius: 0,
10532
- ".MuiChip-deleteIcon": {
10533
- color: "red"
10534
- },
10535
- ".MuiChip-deleteIcon:hover": {
10536
- color: "red"
10537
- }
10538
- }
10539
- },
10540
- key
10541
- );
10542
- })
10543
- }
10544
- ),
10545
- fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
10546
- ] });
10547
- };
10548
- var AppSimpleUploadFile_default = AppSimpleUploadFile;
10549
12613
  function RejectionFiles({ fileRejections }) {
10550
12614
  if (!fileRejections.length) {
10551
12615
  return null;
@@ -11009,7 +13073,7 @@ function SingleFilePreview({ file }) {
11009
13073
  );
11010
13074
  }
11011
13075
  function BackgroundIllustration() {
11012
- const theme = useTheme();
13076
+ const theme = useTheme$1();
11013
13077
  const PRIMARY_MAIN = theme.palette.primary.main;
11014
13078
  return /* @__PURE__ */ jsxs(Fragment, { children: [
11015
13079
  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "BG", x1: "19.496%", x2: "77.479%", y1: "71.822%", y2: "16.69%", children: [
@@ -11029,7 +13093,7 @@ function BackgroundIllustration() {
11029
13093
  }
11030
13094
  var BackgroundIllustration_default = memo(BackgroundIllustration);
11031
13095
  function UploadIllustration({ ...other }) {
11032
- const theme = useTheme();
13096
+ const theme = useTheme$1();
11033
13097
  const PRIMARY_MAIN = theme.palette.primary.main;
11034
13098
  const PRIMARY_DARK = theme.palette.primary.dark;
11035
13099
  const PRIMARY_DARKER = theme.palette.primary.dark;
@@ -11749,27 +13813,63 @@ async function blobToBase64(file) {
11749
13813
  };
11750
13814
  });
11751
13815
  }
11752
- var AppUploadFile = ({ name, ...rest }) => {
11753
- var _a, _b, _c, _d, _e;
13816
+ var AppUploadFile = ({
13817
+ name,
13818
+ sx,
13819
+ uploadSx,
13820
+ errorSx,
13821
+ helperTextSx,
13822
+ previewSx,
13823
+ dropZoneSx,
13824
+ ...rest
13825
+ }) => {
13826
+ var _a, _b;
11754
13827
  const { errors, touched, setFieldValue, values } = useFormikContext();
11755
- const fieldError = _17.get(errors, name);
11756
- const isTouched = _17.get(touched, name);
11757
- let val = _17.get(values, name);
13828
+ const fieldError = _19.get(errors, name);
13829
+ const isTouched = _19.get(touched, name);
13830
+ let val = _19.get(values, name);
11758
13831
  if (((_a = rest.multiple) != null ? _a : false) && typeof val === "string") {
11759
13832
  val = val ? [val] : [];
11760
- } else if (!((_b = rest.multiple) != null ? _b : false) && _17.isArray(val)) {
13833
+ } else if (!((_b = rest.multiple) != null ? _b : false) && _19.isArray(val)) {
11761
13834
  val = val[0];
11762
13835
  }
11763
- const value = ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
11764
- return /* @__PURE__ */ jsxs(Fragment, { children: [
13836
+ const formatValue = (val2) => {
13837
+ if (rest.multiple) {
13838
+ return (Array.isArray(val2) ? val2 : []).map((item) => ({
13839
+ ...(item == null ? void 0 : item.file) ? item : { file: item, preview: item == null ? void 0 : item.preview }
13840
+ }));
13841
+ }
13842
+ return (val2 == null ? void 0 : val2.file) ? val2 : val2 ? { file: val2, preview: val2.preview } : null;
13843
+ };
13844
+ const formattedValue = formatValue(val);
13845
+ const currentFiles = Array.isArray(val) ? val : [];
13846
+ const isMaxFilesReached = rest.maxFiles !== null && rest.maxFiles !== void 0 && currentFiles.length >= rest.maxFiles;
13847
+ return /* @__PURE__ */ jsxs(Box, { sx, children: [
11765
13848
  /* @__PURE__ */ jsx(
11766
13849
  Upload,
11767
13850
  {
11768
13851
  ...rest,
11769
- file: ((_d = rest.multiple) != null ? _d : false) ? void 0 : value,
11770
- files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
13852
+ file: rest.multiple ? void 0 : formattedValue,
13853
+ files: rest.multiple ? formattedValue : void 0,
11771
13854
  error: Boolean(fieldError) && isTouched,
11772
- disabled: (rest == null ? void 0 : rest.maxFiles) !== null && (rest == null ? void 0 : rest.maxFiles) !== void 0 && (value == null ? void 0 : value.length) >= (rest == null ? void 0 : rest.maxFiles),
13855
+ disabled: isMaxFilesReached,
13856
+ sx: [{
13857
+ "& .MuiDropzoneArea-root": {
13858
+ minHeight: 200,
13859
+ border: "2px dashed",
13860
+ borderColor: "divider",
13861
+ borderRadius: 1,
13862
+ "&:hover": {
13863
+ borderColor: "primary.main",
13864
+ backgroundColor: "action.hover"
13865
+ },
13866
+ ...dropZoneSx
13867
+ },
13868
+ "& .MuiDropzonePreviewList-root": {
13869
+ ...previewSx
13870
+ },
13871
+ ...uploadSx
13872
+ }],
11773
13873
  onDrop: (fileVal) => {
11774
13874
  (async () => {
11775
13875
  var _a2;
@@ -11782,7 +13882,7 @@ var AppUploadFile = ({ name, ...rest }) => {
11782
13882
  };
11783
13883
  })
11784
13884
  );
11785
- const currentValue = Array.isArray(value) ? value : [];
13885
+ const currentValue = Array.isArray(val) ? [...val] : [];
11786
13886
  if (rest.multiple === true) {
11787
13887
  if (currentValue.length >= ((_a2 = rest.maxFiles) != null ? _a2 : Infinity))
11788
13888
  return;
@@ -11797,27 +13897,57 @@ var AppUploadFile = ({ name, ...rest }) => {
11797
13897
  if ((_a2 = rest.multiple) != null ? _a2 : false) {
11798
13898
  setFieldValue(name, [], true);
11799
13899
  } else {
11800
- setFieldValue(name, "", true);
13900
+ setFieldValue(name, null, true);
11801
13901
  }
11802
13902
  },
11803
- onRemove: (e) => {
11804
- const afterFilter = val.filter((file) => {
11805
- var _a2;
11806
- if ((_a2 = file.file) != null ? _a2 : false) {
11807
- return !_17.isEqual(e, file.file);
11808
- }
11809
- return !_17.isEqual(e, file);
11810
- });
11811
- setFieldValue(name, afterFilter, true);
13903
+ onRemove: (fileToRemove) => {
13904
+ if (rest.multiple) {
13905
+ const currentFiles2 = Array.isArray(val) ? [...val] : [];
13906
+ const filteredFiles = currentFiles2.filter((file) => {
13907
+ const fileObj = (file == null ? void 0 : file.file) ? file.file : file;
13908
+ return !_19.isEqual(fileObj, fileToRemove);
13909
+ });
13910
+ setFieldValue(name, filteredFiles, true);
13911
+ } else {
13912
+ setFieldValue(name, null, true);
13913
+ }
11812
13914
  }
11813
13915
  }
11814
13916
  ),
11815
- Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError }),
11816
- rest.maxFiles != null && /* @__PURE__ */ jsxs(Typography, { variant: "caption", display: "block", gutterBottom: true, children: [
11817
- "Maximum ",
11818
- rest.maxFiles,
11819
- " file allowed"
11820
- ] })
13917
+ Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsx(
13918
+ Typography,
13919
+ {
13920
+ variant: "caption",
13921
+ sx: [{
13922
+ color: "error.main",
13923
+ display: "block",
13924
+ mt: 0.5,
13925
+ ...errorSx
13926
+ }],
13927
+ gutterBottom: true,
13928
+ children: fieldError
13929
+ }
13930
+ ),
13931
+ rest.maxFiles != null && /* @__PURE__ */ jsxs(
13932
+ Typography,
13933
+ {
13934
+ variant: "caption",
13935
+ sx: [{
13936
+ display: "block",
13937
+ color: "text.secondary",
13938
+ mt: 0.5,
13939
+ ...helperTextSx
13940
+ }],
13941
+ gutterBottom: true,
13942
+ children: [
13943
+ "Maximum ",
13944
+ rest.maxFiles,
13945
+ " file",
13946
+ rest.maxFiles !== 1 ? "s" : "",
13947
+ " allowed"
13948
+ ]
13949
+ }
13950
+ )
11821
13951
  ] });
11822
13952
  };
11823
13953
  var AppUploadFile_default = AppUploadFile;
@@ -11825,6 +13955,16 @@ var SubmitButton = ({
11825
13955
  children,
11826
13956
  loading = false,
11827
13957
  disabled = false,
13958
+ fullWidth = false,
13959
+ variant = "contained",
13960
+ color = "primary",
13961
+ size = "medium",
13962
+ startIcon,
13963
+ endIcon,
13964
+ sx,
13965
+ buttonSx,
13966
+ loadingSx,
13967
+ disabledSx,
11828
13968
  ...rest
11829
13969
  }) => {
11830
13970
  const { submitForm, isSubmitting } = useFormikContext();
@@ -11846,13 +13986,43 @@ var SubmitButton = ({
11846
13986
  type: "button",
11847
13987
  onClick: handleClick,
11848
13988
  disabled: isButtonDisabled,
11849
- startIcon: showLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : void 0,
13989
+ fullWidth,
13990
+ variant,
13991
+ color,
13992
+ size,
13993
+ startIcon: showLoading ? /* @__PURE__ */ jsx(
13994
+ CircularProgress,
13995
+ {
13996
+ size: 20,
13997
+ color: "inherit",
13998
+ sx: [
13999
+ {
14000
+ "&.MuiCircularProgress-root": {
14001
+ width: "20px !important",
14002
+ height: "20px !important"
14003
+ }
14004
+ },
14005
+ ...Array.isArray(loadingSx) ? loadingSx : [loadingSx]
14006
+ ]
14007
+ }
14008
+ ) : startIcon,
14009
+ endIcon,
14010
+ sx: [
14011
+ {
14012
+ position: "relative",
14013
+ "&.Mui-disabled": {
14014
+ ...disabledSx
14015
+ },
14016
+ ...buttonSx
14017
+ },
14018
+ ...Array.isArray(sx) ? sx : [sx]
14019
+ ],
11850
14020
  children
11851
14021
  }
11852
14022
  );
11853
14023
  };
11854
14024
  var SubmitButton_default = SubmitButton;
11855
14025
 
11856
- export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
14026
+ export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector_default as AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup_default as AppRadioGroup, AppRating_default as AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSearchableMultiSelector_default as AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput_default as AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea_default as AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
11857
14027
  //# sourceMappingURL=out.js.map
11858
14028
  //# sourceMappingURL=index.mjs.map