formik-form-components 0.2.10 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +656 -67
  2. package/dist/index.js +2936 -793
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +2925 -783
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +11 -1
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,23 @@ 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
+ sx,
922
+ formControlSx,
923
+ textFieldSx,
924
+ chipSx,
925
+ errorSx
926
+ }) {
302
927
  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: [
928
+ const fieldError = _19.get(errors, name);
929
+ const isTouched = _19.get(touched, name);
930
+ const val = _19.get(values, name);
931
+ return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
307
932
  /* @__PURE__ */ jsx(
308
933
  Autocomplete,
309
934
  {
@@ -312,24 +937,59 @@ function AppAutoComplete({ placeholder, name, label, options = [] }) {
312
937
  id: "tags-filled",
313
938
  options,
314
939
  freeSolo: true,
315
- renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index })),
940
+ renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index, sx: chipSx })),
316
941
  value: val,
317
942
  onChange: (event, newValue) => {
318
943
  setFieldValue(name, newValue, true);
319
944
  },
320
- renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, variant: "filled", label, placeholder })
945
+ renderInput: (params) => /* @__PURE__ */ jsx(
946
+ TextField,
947
+ {
948
+ ...params,
949
+ variant,
950
+ placeholder,
951
+ label,
952
+ error: isTouched && Boolean(fieldError),
953
+ sx: textFieldSx
954
+ }
955
+ ),
956
+ sx
321
957
  }
322
958
  ),
323
- fieldError != null && isTouched === true && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
959
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsx(
960
+ Typography,
961
+ {
962
+ color: "error",
963
+ variant: "caption",
964
+ display: "block",
965
+ gutterBottom: true,
966
+ sx: {
967
+ color: "#FF5630",
968
+ ...errorSx
969
+ },
970
+ children: fieldError
971
+ }
972
+ )
324
973
  ] });
325
974
  }
326
- function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
975
+ function AppAutoCompleter({
976
+ placeholder,
977
+ name,
978
+ label,
979
+ options,
980
+ disabled,
981
+ sx,
982
+ formControlSx,
983
+ textFieldSx,
984
+ listboxSx,
985
+ errorSx
986
+ }) {
327
987
  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);
988
+ const fieldError = _19.get(errors, name);
989
+ const isTouched = _19.get(touched, name);
990
+ const value = _19.get(values, name);
331
991
  const selectedOption = options.find((opt) => opt.value === value) || null;
332
- return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", children: [
992
+ return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
333
993
  /* @__PURE__ */ jsx(
334
994
  Autocomplete3,
335
995
  {
@@ -339,10 +999,10 @@ function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
339
999
  getOptionLabel: (option) => (option == null ? void 0 : option.label) || "",
340
1000
  isOptionEqualToValue: (option, value2) => option.value === value2.value,
341
1001
  autoHighlight: true,
342
- onChange: (_18, newValue) => {
1002
+ onChange: (_20, newValue) => {
343
1003
  setFieldValue(name, newValue ? newValue.value : null);
344
1004
  },
345
- renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.value }, option.label),
1005
+ renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
346
1006
  renderInput: (params) => /* @__PURE__ */ jsx(
347
1007
  TextField,
348
1008
  {
@@ -350,85 +1010,181 @@ function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
350
1010
  label,
351
1011
  placeholder,
352
1012
  error: Boolean(fieldError) && isTouched,
353
- helperText: isTouched && fieldError
1013
+ helperText: isTouched && fieldError,
1014
+ sx: textFieldSx
354
1015
  }
355
1016
  ),
356
- disabled
1017
+ disabled,
1018
+ sx
357
1019
  }
358
1020
  ),
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,
1021
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsx(
1022
+ Typography,
421
1023
  {
422
- color: "#FF5630",
423
1024
  variant: "caption",
424
1025
  display: "block",
425
1026
  gutterBottom: true,
1027
+ sx: {
1028
+ color: "#FF5630",
1029
+ ...errorSx
1030
+ },
426
1031
  children: fieldError
427
1032
  }
428
1033
  )
429
1034
  ] });
1035
+ }
1036
+ var AppCheckBox = ({
1037
+ name,
1038
+ option,
1039
+ label,
1040
+ required = false,
1041
+ disabled = false,
1042
+ row = false,
1043
+ sx,
1044
+ checkboxSx,
1045
+ labelSx,
1046
+ errorSx,
1047
+ containerSx,
1048
+ iconSx,
1049
+ checkedSx,
1050
+ ...rest
1051
+ }) => {
1052
+ const { getFieldProps, setFieldValue, touched, errors } = useFormikContext();
1053
+ const fieldError = _19.get(errors, name);
1054
+ const isTouched = _19.get(touched, name);
1055
+ useTheme();
1056
+ const value = getFieldProps(name).value;
1057
+ const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
1058
+ const handleChange = (itemName, isChecked) => {
1059
+ const newValue = isChecked ? [...checkedNames, itemName] : checkedNames.filter((n) => n !== itemName);
1060
+ setFieldValue(name, option.length === 1 ? isChecked : newValue);
1061
+ };
1062
+ return /* @__PURE__ */ jsxs(
1063
+ Box,
1064
+ {
1065
+ sx: [{
1066
+ width: "100%",
1067
+ ...disabled && {
1068
+ opacity: 0.7,
1069
+ pointerEvents: "none"
1070
+ }
1071
+ }, ...Array.isArray(sx) ? sx : [sx]],
1072
+ children: [
1073
+ label && /* @__PURE__ */ jsx(
1074
+ Typography10,
1075
+ {
1076
+ variant: "subtitle2",
1077
+ gutterBottom: true,
1078
+ sx: [{
1079
+ color: "text.primary",
1080
+ fontWeight: "medium",
1081
+ ...required && {
1082
+ "&:after": {
1083
+ content: '" *"',
1084
+ color: "error.main"
1085
+ }
1086
+ },
1087
+ ...disabled && {
1088
+ color: "text.disabled"
1089
+ }
1090
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1091
+ children: label
1092
+ }
1093
+ ),
1094
+ /* @__PURE__ */ jsx(
1095
+ Box,
1096
+ {
1097
+ sx: [{
1098
+ display: "flex",
1099
+ flexDirection: row ? "row" : "column",
1100
+ flexWrap: row ? "wrap" : "nowrap",
1101
+ gap: 2,
1102
+ ...row ? {
1103
+ "& > *": {
1104
+ minWidth: "fit-content"
1105
+ }
1106
+ } : {}
1107
+ }, ...Array.isArray(containerSx) ? containerSx : [containerSx]],
1108
+ children: option.map((item) => /* @__PURE__ */ jsxs(
1109
+ Box,
1110
+ {
1111
+ sx: [{
1112
+ display: "flex",
1113
+ alignItems: "center",
1114
+ borderRadius: 1,
1115
+ transition: "background-color 0.2s",
1116
+ "&:hover": {
1117
+ backgroundColor: !disabled ? "action.hover" : "transparent"
1118
+ },
1119
+ px: 2,
1120
+ py: 1,
1121
+ ...disabled && {
1122
+ color: "text.disabled"
1123
+ }
1124
+ }],
1125
+ children: [
1126
+ /* @__PURE__ */ jsx(
1127
+ Checkbox,
1128
+ {
1129
+ ...getFieldProps(name),
1130
+ name,
1131
+ value: item.name,
1132
+ checked: checkedNames.includes(item.name),
1133
+ onChange: (e) => handleChange(item.name, e.target.checked),
1134
+ disabled: disabled || item.disabled,
1135
+ sx: [{
1136
+ color: "primary.main",
1137
+ "&.Mui-checked": {
1138
+ color: "primary.main",
1139
+ ...checkedSx
1140
+ },
1141
+ "& .MuiSvgIcon-root": {
1142
+ fontSize: 24,
1143
+ ...iconSx
1144
+ },
1145
+ "&.Mui-disabled": {
1146
+ color: "action.disabled"
1147
+ }
1148
+ }, ...Array.isArray(checkboxSx) ? checkboxSx : [checkboxSx]],
1149
+ ...rest
1150
+ }
1151
+ ),
1152
+ /* @__PURE__ */ jsx(
1153
+ Typography10,
1154
+ {
1155
+ variant: "body2",
1156
+ sx: [{
1157
+ color: disabled ? "text.disabled" : "text.primary",
1158
+ ...disabled && {
1159
+ color: "text.disabled"
1160
+ }
1161
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1162
+ children: item.label
1163
+ }
1164
+ )
1165
+ ]
1166
+ },
1167
+ item.name
1168
+ ))
1169
+ }
1170
+ ),
1171
+ isTouched && fieldError && /* @__PURE__ */ jsx(
1172
+ Typography10,
1173
+ {
1174
+ variant: "caption",
1175
+ sx: [{
1176
+ display: "block",
1177
+ mt: 0.5,
1178
+ color: "error.main"
1179
+ }, ...Array.isArray(errorSx) ? errorSx : [errorSx]],
1180
+ children: fieldError
1181
+ }
1182
+ )
1183
+ ]
1184
+ }
1185
+ );
430
1186
  };
431
- var AppCheckBox_default = CheckboxField;
1187
+ var AppCheckBox_default = AppCheckBox;
432
1188
  var Iconify = forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsx(
433
1189
  Box,
434
1190
  {
@@ -447,11 +1203,12 @@ function AppInputField({
447
1203
  type,
448
1204
  InputProps,
449
1205
  required,
1206
+ variant = "outlined",
450
1207
  ...otherProps
451
1208
  }) {
452
1209
  const { errors, getFieldProps, touched } = useFormikContext();
453
- const fieldError = _17.get(errors, name);
454
- const isTouched = _17.get(touched, name);
1210
+ const fieldError = _19.get(errors, name);
1211
+ const isTouched = _19.get(touched, name);
455
1212
  const [showPassword, setShowPassword] = useState(false);
456
1213
  const handleShowPassword = () => {
457
1214
  setShowPassword(!showPassword);
@@ -461,6 +1218,7 @@ function AppInputField({
461
1218
  {
462
1219
  ...getFieldProps(name),
463
1220
  fullWidth: true,
1221
+ variant,
464
1222
  label: required === true ? /* @__PURE__ */ jsxs(Fragment, { children: [
465
1223
  label,
466
1224
  /* @__PURE__ */ jsx(Typography, { sx: { color: "red", pl: 0.5 }, component: "span", children: "*" })
@@ -509,108 +1267,322 @@ function AppInputField({
509
1267
  }
510
1268
  );
511
1269
  }
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"
551
- }
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,
1270
+ var AppMultiSelector = forwardRef(
1271
+ ({
1272
+ multiple = true,
1273
+ name,
1274
+ label,
1275
+ options = [],
1276
+ required = false,
1277
+ variant = "outlined",
1278
+ disabled = false,
1279
+ maxSelections,
1280
+ showSelectedCount = true,
1281
+ showHelperText = false,
1282
+ helperText,
1283
+ sx,
1284
+ formControlSx,
1285
+ selectSx,
1286
+ labelSx,
1287
+ chipSx,
1288
+ checkboxSx,
1289
+ menuItemSx,
1290
+ errorSx,
1291
+ helperTextSx,
1292
+ iconSx,
1293
+ onChange: externalOnChange,
1294
+ onOpen,
1295
+ onClose,
1296
+ renderValue: externalRenderValue,
1297
+ renderMenuItem,
1298
+ ...otherProps
1299
+ }, ref) => {
1300
+ const theme = useTheme();
1301
+ const { errors, touched, values, setFieldValue, setFieldTouched } = useFormikContext();
1302
+ const fieldError = _19.get(errors, name);
1303
+ const isTouched = _19.get(touched, name);
1304
+ const val = _19.get(values, name);
1305
+ const selectedValues = Array.isArray(val) ? val : [];
1306
+ const handleChange = (event, child) => {
1307
+ const newValue = event.target.value;
1308
+ if (maxSelections && newValue.length > maxSelections) {
1309
+ return;
1310
+ }
1311
+ setFieldValue(name, newValue, true);
1312
+ if (externalOnChange) {
1313
+ externalOnChange(event, child);
1314
+ }
1315
+ };
1316
+ const handleBlur = () => {
1317
+ setFieldTouched(name, true, true);
1318
+ };
1319
+ const defaultRenderValue = (selected) => /* @__PURE__ */ jsx(
1320
+ Box,
1321
+ {
1322
+ sx: { display: "flex", flexWrap: "wrap", gap: 0.5, minHeight: "24px" },
1323
+ children: selected.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Select options..." }) : selected.map((value) => {
1324
+ const option = options.find((obj) => obj.value === value);
1325
+ return option ? /* @__PURE__ */ jsx(
1326
+ Chip,
1327
+ {
1328
+ label: option.label,
1329
+ size: "small",
1330
+ sx: [
1331
+ {
1332
+ height: "24px",
1333
+ borderRadius: "4px",
1334
+ backgroundColor: "action.selected",
1335
+ "& .MuiChip-label": {
1336
+ px: 1
1337
+ },
1338
+ ...option.disabled && {
1339
+ opacity: 0.6
1340
+ }
1341
+ },
1342
+ chipSx
1343
+ ]
1344
+ },
1345
+ value
1346
+ ) : null;
1347
+ })
1348
+ }
1349
+ );
1350
+ const defaultRenderMenuItem = (option, isSelected) => /* @__PURE__ */ jsxs(
1351
+ MenuItem,
1352
+ {
1353
+ value: option.value,
1354
+ disabled: option.disabled,
1355
+ sx: [
561
1356
  {
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,
1357
+ "&.Mui-selected": {
1358
+ backgroundColor: "action.selected",
1359
+ "&:hover": {
1360
+ backgroundColor: "action.hover"
1361
+ }
1362
+ },
1363
+ "&.Mui-disabled": {
1364
+ opacity: 0.5
1365
+ },
1366
+ ...option.sx
1367
+ },
1368
+ menuItemSx
1369
+ ],
1370
+ children: [
1371
+ /* @__PURE__ */ jsx(
1372
+ Checkbox,
1373
+ {
1374
+ checked: isSelected,
1375
+ disabled: option.disabled,
1376
+ sx: [
573
1377
  {
574
- label: (_a = options.find((obj) => obj.value === value)) == null ? void 0 : _a.label,
575
- sx: { height: "20px", borderRadius: "2px" }
1378
+ color: "text.secondary",
1379
+ "&.Mui-checked": {
1380
+ color: "primary.main"
1381
+ },
1382
+ ...option.disabled && {
1383
+ color: "action.disabled"
1384
+ }
576
1385
  },
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
- ]
590
- }
591
- );
592
- }
1386
+ checkboxSx
1387
+ ]
1388
+ }
1389
+ ),
1390
+ /* @__PURE__ */ jsx(
1391
+ Typography,
1392
+ {
1393
+ variant: "body2",
1394
+ sx: [
1395
+ {
1396
+ color: option.disabled ? "text.disabled" : "text.primary",
1397
+ ...option.textSx
1398
+ }
1399
+ ],
1400
+ children: option.label || String(option.value)
1401
+ }
1402
+ )
1403
+ ]
1404
+ },
1405
+ option.value
1406
+ );
1407
+ const displayLabel = showSelectedCount && selectedValues.length > 0 ? `${label} (${selectedValues.length} selected)` : label;
1408
+ return /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsxs(
1409
+ FormControl,
1410
+ {
1411
+ fullWidth: true,
1412
+ variant,
1413
+ error: isTouched && Boolean(fieldError),
1414
+ disabled,
1415
+ sx: [
1416
+ {
1417
+ "& .MuiInputLabel-root": {
1418
+ "&.Mui-focused": {
1419
+ color: "primary.main"
1420
+ },
1421
+ "&.Mui-error": {
1422
+ color: "error.main"
1423
+ },
1424
+ "&.Mui-disabled": {
1425
+ color: "text.disabled"
1426
+ }
1427
+ }
1428
+ },
1429
+ formControlSx
1430
+ ],
1431
+ children: [
1432
+ label && /* @__PURE__ */ jsxs(
1433
+ InputLabel,
1434
+ {
1435
+ id: `select-${name}`,
1436
+ sx: [
1437
+ {
1438
+ color: "text.secondary",
1439
+ "&.Mui-focused": {
1440
+ color: "primary.main"
1441
+ },
1442
+ "&.Mui-disabled": {
1443
+ color: "text.disabled"
1444
+ }
1445
+ },
1446
+ labelSx
1447
+ ],
1448
+ children: [
1449
+ displayLabel,
1450
+ required && /* @__PURE__ */ jsx(
1451
+ Typography,
1452
+ {
1453
+ component: "span",
1454
+ sx: {
1455
+ color: "error.main",
1456
+ ml: 0.5
1457
+ },
1458
+ children: "*"
1459
+ }
1460
+ )
1461
+ ]
1462
+ }
1463
+ ),
1464
+ /* @__PURE__ */ jsx(
1465
+ Select,
1466
+ {
1467
+ multiple,
1468
+ variant: "outlined",
1469
+ labelId: label ? `select-${name}` : void 0,
1470
+ label: label || void 0,
1471
+ value: selectedValues,
1472
+ onChange: handleChange,
1473
+ onBlur: handleBlur,
1474
+ onOpen,
1475
+ onClose,
1476
+ renderValue: externalRenderValue || defaultRenderValue,
1477
+ MenuProps: {
1478
+ PaperProps: {
1479
+ sx: {
1480
+ mt: 1,
1481
+ boxShadow: theme.shadows[3],
1482
+ "& .MuiMenuItem-root": {
1483
+ px: 2,
1484
+ py: 1
1485
+ }
1486
+ }
1487
+ }
1488
+ },
1489
+ sx: [
1490
+ {
1491
+ backgroundColor: "background.paper",
1492
+ color: "text.primary",
1493
+ "& .MuiSvgIcon-root": {
1494
+ color: "text.secondary",
1495
+ ...iconSx
1496
+ },
1497
+ "& .MuiSelect-icon": {
1498
+ color: "text.secondary"
1499
+ },
1500
+ "& .MuiOutlinedInput-notchedOutline": {
1501
+ borderColor: "divider"
1502
+ },
1503
+ "&:hover .MuiOutlinedInput-notchedOutline": {
1504
+ borderColor: "primary.main"
1505
+ },
1506
+ "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
1507
+ borderColor: "primary.main"
1508
+ },
1509
+ "&.Mui-error .MuiOutlinedInput-notchedOutline": {
1510
+ borderColor: "error.main"
1511
+ },
1512
+ "&.Mui-disabled": {
1513
+ backgroundColor: "action.disabledBackground",
1514
+ "& .MuiOutlinedInput-notchedOutline": {
1515
+ borderColor: "action.disabled"
1516
+ }
1517
+ },
1518
+ ...selectSx
1519
+ }
1520
+ ],
1521
+ error: Boolean(fieldError) && isTouched,
1522
+ ...otherProps,
1523
+ children: options.map((option) => {
1524
+ const isSelected = selectedValues.includes(option.value);
1525
+ return renderMenuItem ? renderMenuItem(option, isSelected) : defaultRenderMenuItem(option, isSelected);
1526
+ })
1527
+ }
1528
+ ),
1529
+ (showHelperText || isTouched && fieldError) && /* @__PURE__ */ jsx(
1530
+ FormHelperText,
1531
+ {
1532
+ sx: [
1533
+ {
1534
+ mx: 0,
1535
+ mt: 0.5,
1536
+ color: isTouched && fieldError ? "error.main" : "text.secondary",
1537
+ ...isTouched && fieldError ? errorSx : helperTextSx
1538
+ }
1539
+ ],
1540
+ children: isTouched && fieldError ? fieldError : helperText
1541
+ }
1542
+ )
1543
+ ]
1544
+ }
1545
+ ) });
1546
+ }
1547
+ );
1548
+ AppMultiSelector.displayName = "AppMultiSelector";
1549
+ var AppMultiSelector_default = AppMultiSelector;
593
1550
  var AppPhoneNoInput = ({
594
1551
  name,
595
1552
  label,
596
1553
  required,
1554
+ sx,
1555
+ containerSx,
1556
+ labelSx,
1557
+ inputSx,
1558
+ errorSx,
597
1559
  ...otherProps
598
1560
  }) => {
599
1561
  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: [
1562
+ const fieldError = _19.get(errors, name);
1563
+ const isTouched = _19.get(touched, name);
1564
+ return /* @__PURE__ */ jsxs(Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
603
1565
  label && /* @__PURE__ */ jsxs(
604
1566
  Typography,
605
1567
  {
606
1568
  variant: "subtitle2",
607
- sx: {
1569
+ sx: [{
608
1570
  mb: 0.5,
609
- color: isTouched && fieldError ? red[500] : "text.primary"
610
- },
1571
+ color: isTouched && fieldError ? "error.main" : "text.primary"
1572
+ }, labelSx],
611
1573
  children: [
612
1574
  label,
613
- required && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: red[500], ml: 0.3 }, children: "*" })
1575
+ required && /* @__PURE__ */ jsx(
1576
+ Typography,
1577
+ {
1578
+ component: "span",
1579
+ sx: {
1580
+ color: "error.main",
1581
+ ml: 0.3
1582
+ },
1583
+ children: "*"
1584
+ }
1585
+ )
614
1586
  ]
615
1587
  }
616
1588
  ),
@@ -621,8 +1593,13 @@ var AppPhoneNoInput = ({
621
1593
  specialLabel: "",
622
1594
  inputStyle: {
623
1595
  width: "100%",
624
- border: isTouched && fieldError ? `1px solid ${red[500]}` : "1px solid #ccc",
625
- padding: "10px"
1596
+ border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
1597
+ padding: "10px",
1598
+ borderRadius: "4px",
1599
+ ...inputSx
1600
+ },
1601
+ containerStyle: {
1602
+ width: "100%"
626
1603
  },
627
1604
  ...otherProps,
628
1605
  ...getFieldProps(name),
@@ -634,8 +1611,11 @@ var AppPhoneNoInput = ({
634
1611
  Typography,
635
1612
  {
636
1613
  variant: "caption",
637
- color: "error",
638
- sx: { mt: 0.5, display: "block" },
1614
+ sx: [{
1615
+ mt: 0.5,
1616
+ display: "block",
1617
+ color: "error.main"
1618
+ }, errorSx],
639
1619
  children: [
640
1620
  String(fieldError),
641
1621
  " "
@@ -645,31 +1625,368 @@ var AppPhoneNoInput = ({
645
1625
  ] });
646
1626
  };
647
1627
  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);
1628
+ var AppRadioGroup = forwardRef(({
1629
+ name,
1630
+ options = [],
1631
+ label,
1632
+ required = false,
1633
+ disabled = false,
1634
+ row = false,
1635
+ sx,
1636
+ formControlSx,
1637
+ radioGroupSx,
1638
+ formLabelSx,
1639
+ radioSx,
1640
+ labelSx,
1641
+ errorSx,
1642
+ onChange,
1643
+ onBlur,
1644
+ ...rest
1645
+ }, ref) => {
1646
+ const { errors, touched, getFieldProps, setFieldValue } = useFormikContext();
1647
+ const fieldError = _19.get(errors, name);
1648
+ const isTouched = _19.get(touched, name);
1649
+ const value = _19.get(getFieldProps(name), "value");
1650
+ const handleChange = (event) => {
1651
+ const newValue = event.target.value;
1652
+ setFieldValue(name, newValue);
1653
+ if (onChange) {
1654
+ onChange(event, newValue);
1655
+ }
1656
+ };
1657
+ const handleBlur = (event) => {
1658
+ if (onBlur) {
1659
+ onBlur(event);
1660
+ }
1661
+ };
1662
+ return /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsxs(
1663
+ FormControl,
1664
+ {
1665
+ component: "fieldset",
1666
+ error: Boolean(fieldError) && isTouched,
1667
+ disabled,
1668
+ sx: [{
1669
+ width: "100%",
1670
+ "& .MuiFormGroup-root": {
1671
+ mt: 1
1672
+ }
1673
+ }, ...Array.isArray(formControlSx) ? formControlSx : [formControlSx]],
1674
+ children: [
1675
+ label && /* @__PURE__ */ jsxs(
1676
+ FormLabel,
1677
+ {
1678
+ component: "legend",
1679
+ sx: [{
1680
+ color: "text.primary",
1681
+ mb: 1,
1682
+ "&.Mui-focused": {
1683
+ color: "text.primary"
1684
+ },
1685
+ "&.Mui-disabled": {
1686
+ color: "text.disabled"
1687
+ }
1688
+ }, ...Array.isArray(formLabelSx) ? formLabelSx : [formLabelSx]],
1689
+ children: [
1690
+ label,
1691
+ required && /* @__PURE__ */ jsx(
1692
+ Typography,
1693
+ {
1694
+ component: "span",
1695
+ sx: {
1696
+ color: "error.main",
1697
+ ml: 0.5
1698
+ },
1699
+ children: "*"
1700
+ }
1701
+ )
1702
+ ]
1703
+ }
1704
+ ),
1705
+ /* @__PURE__ */ jsx(
1706
+ RadioGroup,
1707
+ {
1708
+ ...getFieldProps(name),
1709
+ value: value != null ? value : "",
1710
+ onChange: handleChange,
1711
+ onBlur: handleBlur,
1712
+ row,
1713
+ sx: [{
1714
+ "& .MuiFormControlLabel-root": {
1715
+ mr: row ? 3 : 0,
1716
+ mb: row ? 0 : 1,
1717
+ "&:last-of-type": {
1718
+ mb: 0
1719
+ }
1720
+ }
1721
+ }, ...Array.isArray(radioGroupSx) ? radioGroupSx : [radioGroupSx]],
1722
+ ...rest,
1723
+ children: options.map((option) => /* @__PURE__ */ jsx(
1724
+ FormControlLabel,
1725
+ {
1726
+ value: option.value,
1727
+ disabled: disabled || option.disabled,
1728
+ control: /* @__PURE__ */ jsx(
1729
+ Radio,
1730
+ {
1731
+ sx: [{
1732
+ color: "primary.main",
1733
+ "&.Mui-checked": {
1734
+ color: "primary.main"
1735
+ },
1736
+ "&.Mui-disabled": {
1737
+ color: "action.disabled"
1738
+ },
1739
+ ...radioSx,
1740
+ ...option.radioSx
1741
+ }]
1742
+ }
1743
+ ),
1744
+ label: /* @__PURE__ */ jsx(
1745
+ Typography,
1746
+ {
1747
+ variant: "body2",
1748
+ sx: [{
1749
+ color: disabled || option.disabled ? "text.disabled" : "text.primary",
1750
+ ...labelSx,
1751
+ ...option.labelSx
1752
+ }],
1753
+ children: option.label
1754
+ }
1755
+ ),
1756
+ sx: [{
1757
+ m: 0,
1758
+ mr: row ? 3 : 0,
1759
+ mb: row ? 0 : 1,
1760
+ "&:last-of-type": {
1761
+ mb: 0
1762
+ },
1763
+ ...option.sx
1764
+ }]
1765
+ },
1766
+ option.value
1767
+ ))
1768
+ }
1769
+ ),
1770
+ isTouched && fieldError && /* @__PURE__ */ jsx(
1771
+ FormHelperText,
1772
+ {
1773
+ sx: [{
1774
+ color: "error.main",
1775
+ mx: 0,
1776
+ mt: 0.5,
1777
+ ...errorSx
1778
+ }],
1779
+ children: fieldError
1780
+ }
1781
+ )
1782
+ ]
1783
+ }
1784
+ ) });
1785
+ });
1786
+ AppRadioGroup.displayName = "AppRadioGroup";
1787
+ var AppRadioGroup_default = AppRadioGroup;
1788
+ var AppRating = forwardRef(({
1789
+ name,
1790
+ label,
1791
+ required = false,
1792
+ readOnly = false,
1793
+ disabled = false,
1794
+ max = 5,
1795
+ precision = 1,
1796
+ size = "medium",
1797
+ emptyIcon,
1798
+ icon,
1799
+ IconContainerComponent,
1800
+ getLabelText,
1801
+ onChange: externalOnChange,
1802
+ onChangeActive,
1803
+ sx,
1804
+ labelSx,
1805
+ ratingSx,
1806
+ errorSx,
1807
+ helperTextSx,
1808
+ showHelperText = false,
1809
+ helperText,
1810
+ labelComponent: LabelComponent = Typography,
1811
+ ratingComponent: RatingComponent = Rating,
1812
+ errorComponent: ErrorComponent = Typography,
1813
+ helperTextComponent: HelperTextComponent = FormHelperText,
1814
+ labelProps = {},
1815
+ ratingProps = {},
1816
+ errorProps = {},
1817
+ helperTextProps = {},
1818
+ className = "",
1819
+ labelClassName = "",
1820
+ ratingClassName = "",
1821
+ errorClassName = "",
1822
+ helperTextClassName = "",
1823
+ ...otherProps
1824
+ }, ref) => {
1825
+ useTheme();
1826
+ const { errors, touched, setFieldValue, values, setFieldTouched } = useFormikContext();
1827
+ const val = _19.get(values, name);
1828
+ const fieldError = _19.get(errors, name);
1829
+ const isTouched = _19.get(touched, name);
1830
+ const hasError = Boolean(fieldError) && isTouched;
662
1831
  const handleChange = (event, newValue) => {
663
1832
  setFieldValue(name, newValue);
1833
+ setFieldTouched(name, true, false);
1834
+ if (externalOnChange) {
1835
+ externalOnChange(event, newValue);
1836
+ }
664
1837
  };
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
- }
1838
+ const handleBlur = () => {
1839
+ setFieldTouched(name, true, true);
1840
+ };
1841
+ return /* @__PURE__ */ jsxs(
1842
+ Box,
1843
+ {
1844
+ ref,
1845
+ className: `app-rating ${className}`,
1846
+ sx: [
1847
+ {
1848
+ display: "flex",
1849
+ flexDirection: "column",
1850
+ width: "100%",
1851
+ "&:hover": {
1852
+ "& .MuiRating-iconEmpty": {
1853
+ color: "primary.light"
1854
+ }
1855
+ }
1856
+ },
1857
+ ...Array.isArray(sx) ? sx : [sx]
1858
+ ],
1859
+ ...otherProps,
1860
+ children: [
1861
+ /* @__PURE__ */ jsxs(
1862
+ Stack,
1863
+ {
1864
+ direction: "row",
1865
+ alignItems: "center",
1866
+ spacing: 1,
1867
+ sx: {
1868
+ "&.Mui-disabled": {
1869
+ opacity: 0.5,
1870
+ cursor: "not-allowed"
1871
+ }
1872
+ },
1873
+ className: disabled ? "Mui-disabled" : "",
1874
+ children: [
1875
+ label && /* @__PURE__ */ jsxs(
1876
+ LabelComponent,
1877
+ {
1878
+ variant: "body2",
1879
+ color: hasError ? "error" : "text.primary",
1880
+ className: `app-rating-label ${labelClassName}`,
1881
+ sx: [
1882
+ {
1883
+ margin: 0,
1884
+ fontWeight: 500,
1885
+ ...disabled && {
1886
+ color: "text.disabled"
1887
+ }
1888
+ },
1889
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
1890
+ ],
1891
+ ...labelProps,
1892
+ children: [
1893
+ label,
1894
+ required && /* @__PURE__ */ jsx(
1895
+ Box,
1896
+ {
1897
+ component: "span",
1898
+ sx: {
1899
+ color: "error.main",
1900
+ ml: 0.5
1901
+ },
1902
+ children: "*"
1903
+ }
1904
+ )
1905
+ ]
1906
+ }
1907
+ ),
1908
+ /* @__PURE__ */ jsx(
1909
+ Box,
1910
+ {
1911
+ onBlur: handleBlur,
1912
+ sx: [
1913
+ {
1914
+ display: "inline-flex",
1915
+ "& .MuiRating-icon": {
1916
+ color: "primary.main"
1917
+ },
1918
+ "& .MuiRating-iconEmpty": {
1919
+ color: "action.disabled"
1920
+ },
1921
+ "& .MuiRating-iconFilled": {
1922
+ color: "primary.main"
1923
+ },
1924
+ "& .MuiRating-iconHover": {
1925
+ color: "primary.dark"
1926
+ },
1927
+ "&.Mui-disabled": {
1928
+ opacity: 0.5,
1929
+ cursor: "not-allowed"
1930
+ },
1931
+ ...hasError && {
1932
+ "& .MuiRating-icon": {
1933
+ color: "error.main"
1934
+ }
1935
+ }
1936
+ },
1937
+ ...Array.isArray(ratingSx) ? ratingSx : [ratingSx]
1938
+ ],
1939
+ className: `app-rating-stars ${ratingClassName} ${disabled ? "Mui-disabled" : ""}`,
1940
+ children: /* @__PURE__ */ jsx(
1941
+ RatingComponent,
1942
+ {
1943
+ value: val != null ? val : null,
1944
+ onChange: handleChange,
1945
+ onChangeActive,
1946
+ max,
1947
+ precision,
1948
+ size,
1949
+ readOnly,
1950
+ disabled,
1951
+ emptyIcon,
1952
+ icon,
1953
+ IconContainerComponent,
1954
+ getLabelText,
1955
+ className: ratingClassName,
1956
+ ...ratingProps
1957
+ }
1958
+ )
1959
+ }
1960
+ )
1961
+ ]
1962
+ }
1963
+ ),
1964
+ (showHelperText || hasError) && /* @__PURE__ */ jsx(
1965
+ HelperTextComponent,
1966
+ {
1967
+ error: hasError,
1968
+ sx: [
1969
+ {
1970
+ mx: 0,
1971
+ mt: 0.5,
1972
+ ...hasError && {
1973
+ color: "error.main",
1974
+ ...errorSx
1975
+ },
1976
+ ...helperTextSx
1977
+ }
1978
+ ],
1979
+ className: `app-rating-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`,
1980
+ ...helperTextProps,
1981
+ children: hasError ? fieldError : helperText
1982
+ }
1983
+ )
1984
+ ]
1985
+ }
1986
+ );
1987
+ });
1988
+ AppRating.displayName = "AppRating";
1989
+ var AppRating_default = AppRating;
673
1990
 
674
1991
  // node_modules/orderedmap/dist/index.js
675
1992
  function OrderedMap(content) {
@@ -853,7 +2170,7 @@ function findDiffEnd(a, b, posA, posB) {
853
2170
  posB -= size;
854
2171
  }
855
2172
  }
856
- var Fragment3 = class {
2173
+ var Fragment2 = class {
857
2174
  /**
858
2175
  @internal
859
2176
  */
@@ -921,7 +2238,7 @@ var Fragment3 = class {
921
2238
  }
922
2239
  for (; i < other.content.length; i++)
923
2240
  content.push(other.content[i]);
924
- return new Fragment3(content, this.size + other.size);
2241
+ return new Fragment2(content, this.size + other.size);
925
2242
  }
926
2243
  /**
927
2244
  Cut out the sub-fragment between the two given positions.
@@ -945,17 +2262,17 @@ var Fragment3 = class {
945
2262
  }
946
2263
  pos = end;
947
2264
  }
948
- return new Fragment3(result, size);
2265
+ return new Fragment2(result, size);
949
2266
  }
950
2267
  /**
951
2268
  @internal
952
2269
  */
953
2270
  cutByIndex(from, to) {
954
2271
  if (from == to)
955
- return Fragment3.empty;
2272
+ return Fragment2.empty;
956
2273
  if (from == 0 && to == this.content.length)
957
2274
  return this;
958
- return new Fragment3(this.content.slice(from, to));
2275
+ return new Fragment2(this.content.slice(from, to));
959
2276
  }
960
2277
  /**
961
2278
  Create a new fragment in which the node at the given index is
@@ -968,21 +2285,21 @@ var Fragment3 = class {
968
2285
  let copy2 = this.content.slice();
969
2286
  let size = this.size + node.nodeSize - current.nodeSize;
970
2287
  copy2[index] = node;
971
- return new Fragment3(copy2, size);
2288
+ return new Fragment2(copy2, size);
972
2289
  }
973
2290
  /**
974
2291
  Create a new fragment by prepending the given node to this
975
2292
  fragment.
976
2293
  */
977
2294
  addToStart(node) {
978
- return new Fragment3([node].concat(this.content), this.size + node.nodeSize);
2295
+ return new Fragment2([node].concat(this.content), this.size + node.nodeSize);
979
2296
  }
980
2297
  /**
981
2298
  Create a new fragment by appending the given node to this
982
2299
  fragment.
983
2300
  */
984
2301
  addToEnd(node) {
985
- return new Fragment3(this.content.concat(node), this.size + node.nodeSize);
2302
+ return new Fragment2(this.content.concat(node), this.size + node.nodeSize);
986
2303
  }
987
2304
  /**
988
2305
  Compare this fragment to another one.
@@ -1101,10 +2418,10 @@ var Fragment3 = class {
1101
2418
  */
1102
2419
  static fromJSON(schema, value) {
1103
2420
  if (!value)
1104
- return Fragment3.empty;
2421
+ return Fragment2.empty;
1105
2422
  if (!Array.isArray(value))
1106
2423
  throw new RangeError("Invalid input for Fragment.fromJSON");
1107
- return new Fragment3(value.map(schema.nodeFromJSON));
2424
+ return new Fragment2(value.map(schema.nodeFromJSON));
1108
2425
  }
1109
2426
  /**
1110
2427
  Build a fragment from an array of nodes. Ensures that adjacent
@@ -1112,7 +2429,7 @@ var Fragment3 = class {
1112
2429
  */
1113
2430
  static fromArray(array) {
1114
2431
  if (!array.length)
1115
- return Fragment3.empty;
2432
+ return Fragment2.empty;
1116
2433
  let joined, size = 0;
1117
2434
  for (let i = 0; i < array.length; i++) {
1118
2435
  let node = array[i];
@@ -1125,7 +2442,7 @@ var Fragment3 = class {
1125
2442
  joined.push(node);
1126
2443
  }
1127
2444
  }
1128
- return new Fragment3(joined || array, size);
2445
+ return new Fragment2(joined || array, size);
1129
2446
  }
1130
2447
  /**
1131
2448
  Create a fragment from something that can be interpreted as a
@@ -1135,17 +2452,17 @@ var Fragment3 = class {
1135
2452
  */
1136
2453
  static from(nodes) {
1137
2454
  if (!nodes)
1138
- return Fragment3.empty;
1139
- if (nodes instanceof Fragment3)
2455
+ return Fragment2.empty;
2456
+ if (nodes instanceof Fragment2)
1140
2457
  return nodes;
1141
2458
  if (Array.isArray(nodes))
1142
2459
  return this.fromArray(nodes);
1143
2460
  if (nodes.attrs)
1144
- return new Fragment3([nodes], nodes.nodeSize);
2461
+ return new Fragment2([nodes], nodes.nodeSize);
1145
2462
  throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
1146
2463
  }
1147
2464
  };
1148
- Fragment3.empty = new Fragment3([], 0);
2465
+ Fragment2.empty = new Fragment2([], 0);
1149
2466
  var found = { index: 0, offset: 0 };
1150
2467
  function retIndex(index, offset) {
1151
2468
  found.index = index;
@@ -1250,7 +2567,7 @@ var Mark = class {
1250
2567
  */
1251
2568
  toJSON() {
1252
2569
  let obj = { type: this.type.name };
1253
- for (let _18 in this.attrs) {
2570
+ for (let _20 in this.attrs) {
1254
2571
  obj.attrs = this.attrs;
1255
2572
  break;
1256
2573
  }
@@ -1370,7 +2687,7 @@ var Slice = class {
1370
2687
  let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
1371
2688
  if (typeof openStart != "number" || typeof openEnd != "number")
1372
2689
  throw new RangeError("Invalid input for Slice.fromJSON");
1373
- return new Slice(Fragment3.fromJSON(schema, json.content), openStart, openEnd);
2690
+ return new Slice(Fragment2.fromJSON(schema, json.content), openStart, openEnd);
1374
2691
  }
1375
2692
  /**
1376
2693
  Create a slice from a fragment by taking the maximum possible
@@ -1385,7 +2702,7 @@ var Slice = class {
1385
2702
  return new Slice(fragment, openStart, openEnd);
1386
2703
  }
1387
2704
  };
1388
- Slice.empty = new Slice(Fragment3.empty, 0, 0);
2705
+ Slice.empty = new Slice(Fragment2.empty, 0, 0);
1389
2706
  function removeRange(content, from, to) {
1390
2707
  let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
1391
2708
  let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -1483,7 +2800,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
1483
2800
  addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
1484
2801
  }
1485
2802
  addRange($to, null, depth, content);
1486
- return new Fragment3(content);
2803
+ return new Fragment2(content);
1487
2804
  }
1488
2805
  function replaceTwoWay($from, $to, depth) {
1489
2806
  let content = [];
@@ -1493,13 +2810,13 @@ function replaceTwoWay($from, $to, depth) {
1493
2810
  addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
1494
2811
  }
1495
2812
  addRange($to, null, depth, content);
1496
- return new Fragment3(content);
2813
+ return new Fragment2(content);
1497
2814
  }
1498
2815
  function prepareSliceForReplace(slice, $along) {
1499
2816
  let extra = $along.depth - slice.openStart, parent = $along.node(extra);
1500
2817
  let node = parent.copy(slice.content);
1501
2818
  for (let i = extra - 1; i >= 0; i--)
1502
- node = $along.node(i).copy(Fragment3.from(node));
2819
+ node = $along.node(i).copy(Fragment2.from(node));
1503
2820
  return {
1504
2821
  start: node.resolveNoCache(slice.openStart + extra),
1505
2822
  end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -1838,7 +3155,7 @@ var Node = class {
1838
3155
  this.type = type;
1839
3156
  this.attrs = attrs;
1840
3157
  this.marks = marks;
1841
- this.content = content || Fragment3.empty;
3158
+ this.content = content || Fragment2.empty;
1842
3159
  }
1843
3160
  /**
1844
3161
  The array of this node's child nodes.
@@ -2143,7 +3460,7 @@ var Node = class {
2143
3460
  can optionally pass `start` and `end` indices into the
2144
3461
  replacement fragment.
2145
3462
  */
2146
- canReplace(from, to, replacement = Fragment3.empty, start = 0, end = replacement.childCount) {
3463
+ canReplace(from, to, replacement = Fragment2.empty, start = 0, end = replacement.childCount) {
2147
3464
  let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
2148
3465
  let two = one && one.matchFragment(this.content, to);
2149
3466
  if (!two || !two.validEnd)
@@ -2198,7 +3515,7 @@ var Node = class {
2198
3515
  */
2199
3516
  toJSON() {
2200
3517
  let obj = { type: this.type.name };
2201
- for (let _18 in this.attrs) {
3518
+ for (let _20 in this.attrs) {
2202
3519
  obj.attrs = this.attrs;
2203
3520
  break;
2204
3521
  }
@@ -2225,7 +3542,7 @@ var Node = class {
2225
3542
  throw new RangeError("Invalid text node in JSON");
2226
3543
  return schema.text(json.text, marks);
2227
3544
  }
2228
- let content = Fragment3.fromJSON(schema, json.content);
3545
+ let content = Fragment2.fromJSON(schema, json.content);
2229
3546
  let node = schema.nodeType(json.type).create(json.attrs, content, marks);
2230
3547
  node.type.checkAttrs(node.attrs);
2231
3548
  return node;
@@ -2367,7 +3684,7 @@ var ContentMatch = class {
2367
3684
  function search(match, types) {
2368
3685
  let finished = match.matchFragment(after, startIndex);
2369
3686
  if (finished && (!toEnd || finished.validEnd))
2370
- return Fragment3.from(types.map((tp) => tp.createAndFill()));
3687
+ return Fragment2.from(types.map((tp) => tp.createAndFill()));
2371
3688
  for (let i = 0; i < match.next.length; i++) {
2372
3689
  let { type, next } = match.next[i];
2373
3690
  if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -2819,7 +4136,7 @@ var NodeType = class {
2819
4136
  create(attrs = null, content, marks) {
2820
4137
  if (this.isText)
2821
4138
  throw new Error("NodeType.create can't construct text nodes");
2822
- return new Node(this, this.computeAttrs(attrs), Fragment3.from(content), Mark.setFrom(marks));
4139
+ return new Node(this, this.computeAttrs(attrs), Fragment2.from(content), Mark.setFrom(marks));
2823
4140
  }
2824
4141
  /**
2825
4142
  Like [`create`](https://prosemirror.net/docs/ref/#model.NodeType.create), but check the given content
@@ -2827,7 +4144,7 @@ var NodeType = class {
2827
4144
  if it doesn't match.
2828
4145
  */
2829
4146
  createChecked(attrs = null, content, marks) {
2830
- content = Fragment3.from(content);
4147
+ content = Fragment2.from(content);
2831
4148
  this.checkContent(content);
2832
4149
  return new Node(this, this.computeAttrs(attrs), content, Mark.setFrom(marks));
2833
4150
  }
@@ -2841,7 +4158,7 @@ var NodeType = class {
2841
4158
  */
2842
4159
  createAndFill(attrs = null, content, marks) {
2843
4160
  attrs = this.computeAttrs(attrs);
2844
- content = Fragment3.from(content);
4161
+ content = Fragment2.from(content);
2845
4162
  if (content.size) {
2846
4163
  let before = this.contentMatch.fillBefore(content);
2847
4164
  if (!before)
@@ -2849,7 +4166,7 @@ var NodeType = class {
2849
4166
  content = before.append(content);
2850
4167
  }
2851
4168
  let matched = this.contentMatch.matchFragment(content);
2852
- let after = matched && matched.fillBefore(Fragment3.empty, true);
4169
+ let after = matched && matched.fillBefore(Fragment2.empty, true);
2853
4170
  if (!after)
2854
4171
  return null;
2855
4172
  return new Node(this, attrs, content.append(after), Mark.setFrom(marks));
@@ -2927,7 +4244,7 @@ var NodeType = class {
2927
4244
  throw new RangeError("Schema is missing its top node type ('" + topType + "')");
2928
4245
  if (!result.text)
2929
4246
  throw new RangeError("Every schema needs a 'text' type");
2930
- for (let _18 in result.text.attrs)
4247
+ for (let _20 in result.text.attrs)
2931
4248
  throw new RangeError("The text node type should not have attributes");
2932
4249
  return result;
2933
4250
  }
@@ -3313,7 +4630,7 @@ var NodeContext = class {
3313
4630
  if (!this.match) {
3314
4631
  if (!this.type)
3315
4632
  return [];
3316
- let fill = this.type.contentMatch.fillBefore(Fragment3.from(node));
4633
+ let fill = this.type.contentMatch.fillBefore(Fragment2.from(node));
3317
4634
  if (fill) {
3318
4635
  this.match = this.type.contentMatch.matchFragment(fill);
3319
4636
  } else {
@@ -3339,9 +4656,9 @@ var NodeContext = class {
3339
4656
  this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m2[0].length));
3340
4657
  }
3341
4658
  }
3342
- let content = Fragment3.from(this.content);
4659
+ let content = Fragment2.from(this.content);
3343
4660
  if (!openEnd && this.match)
3344
- content = content.append(this.match.fillBefore(Fragment3.empty, true));
4661
+ content = content.append(this.match.fillBefore(Fragment2.empty, true));
3345
4662
  return this.type ? this.type.create(this.attrs, content, this.marks) : content;
3346
4663
  }
3347
4664
  inlineContext(node) {
@@ -4158,7 +5475,7 @@ function mapFragment(fragment, f, parent) {
4158
5475
  child = f(child, parent, i);
4159
5476
  mapped.push(child);
4160
5477
  }
4161
- return Fragment3.fromArray(mapped);
5478
+ return Fragment2.fromArray(mapped);
4162
5479
  }
4163
5480
  var AddMarkStep = class extends Step {
4164
5481
  /**
@@ -4275,7 +5592,7 @@ var AddNodeMarkStep = class extends Step {
4275
5592
  if (!node)
4276
5593
  return StepResult.fail("No node at mark step's position");
4277
5594
  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));
5595
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4279
5596
  }
4280
5597
  invert(doc2) {
4281
5598
  let node = doc2.nodeAt(this.pos);
@@ -4321,7 +5638,7 @@ var RemoveNodeMarkStep = class extends Step {
4321
5638
  if (!node)
4322
5639
  return StepResult.fail("No node at mark step's position");
4323
5640
  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));
5641
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4325
5642
  }
4326
5643
  invert(doc2) {
4327
5644
  let node = doc2.nodeAt(this.pos);
@@ -4586,7 +5903,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4586
5903
  let m2, newline = /\r?\n|\r/g, slice;
4587
5904
  while (m2 = newline.exec(child.text)) {
4588
5905
  if (!slice)
4589
- slice = new Slice(Fragment3.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
5906
+ slice = new Slice(Fragment2.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
4590
5907
  replSteps.push(new ReplaceStep(cur + m2.index, cur + m2.index + m2[0].length, slice));
4591
5908
  }
4592
5909
  }
@@ -4594,7 +5911,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4594
5911
  cur = end;
4595
5912
  }
4596
5913
  if (!match.validEnd) {
4597
- let fill = match.fillBefore(Fragment3.empty, true);
5914
+ let fill = match.fillBefore(Fragment2.empty, true);
4598
5915
  tr.replace(cur, cur, new Slice(fill, 0, 0));
4599
5916
  }
4600
5917
  for (let i = replSteps.length - 1; i >= 0; i--)
@@ -4624,20 +5941,20 @@ function lift(tr, range, target) {
4624
5941
  let { $from, $to, depth } = range;
4625
5942
  let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
4626
5943
  let start = gapStart, end = gapEnd;
4627
- let before = Fragment3.empty, openStart = 0;
5944
+ let before = Fragment2.empty, openStart = 0;
4628
5945
  for (let d = depth, splitting = false; d > target; d--)
4629
5946
  if (splitting || $from.index(d) > 0) {
4630
5947
  splitting = true;
4631
- before = Fragment3.from($from.node(d).copy(before));
5948
+ before = Fragment2.from($from.node(d).copy(before));
4632
5949
  openStart++;
4633
5950
  } else {
4634
5951
  start--;
4635
5952
  }
4636
- let after = Fragment3.empty, openEnd = 0;
5953
+ let after = Fragment2.empty, openEnd = 0;
4637
5954
  for (let d = depth, splitting = false; d > target; d--)
4638
5955
  if (splitting || $to.after(d + 1) < $to.end(d)) {
4639
5956
  splitting = true;
4640
- after = Fragment3.from($to.node(d).copy(after));
5957
+ after = Fragment2.from($to.node(d).copy(after));
4641
5958
  openEnd++;
4642
5959
  } else {
4643
5960
  end++;
@@ -4677,14 +5994,14 @@ function findWrappingInside(range, type) {
4677
5994
  return inside;
4678
5995
  }
4679
5996
  function wrap(tr, range, wrappers) {
4680
- let content = Fragment3.empty;
5997
+ let content = Fragment2.empty;
4681
5998
  for (let i = wrappers.length - 1; i >= 0; i--) {
4682
5999
  if (content.size) {
4683
6000
  let match = wrappers[i].type.contentMatch.matchFragment(content);
4684
6001
  if (!match || !match.validEnd)
4685
6002
  throw new RangeError("Wrapper type given to Transform.wrap does not form valid content of its parent wrapper");
4686
6003
  }
4687
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
6004
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
4688
6005
  }
4689
6006
  let start = range.start, end = range.end;
4690
6007
  tr.step(new ReplaceAroundStep(start, end, start, end, new Slice(content, 0, 0), wrappers.length, true));
@@ -4709,7 +6026,7 @@ function setBlockType(tr, from, to, type, attrs) {
4709
6026
  clearIncompatible(tr, tr.mapping.slice(mapFrom).map(pos, 1), type, void 0, convertNewlines === null);
4710
6027
  let mapping = tr.mapping.slice(mapFrom);
4711
6028
  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));
6029
+ 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
6030
  if (convertNewlines === true)
4714
6031
  replaceNewlines(tr, node, pos, mapFrom);
4715
6032
  return false;
@@ -4750,7 +6067,7 @@ function setNodeMarkup(tr, pos, type, attrs, marks) {
4750
6067
  return tr.replaceWith(pos, pos + node.nodeSize, newNode);
4751
6068
  if (!type.validContent(node.content))
4752
6069
  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));
6070
+ tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment2.from(newNode), 0, 0), 1, true));
4754
6071
  }
4755
6072
  function canSplit(doc2, pos, depth = 1, typesAfter) {
4756
6073
  let $pos = doc2.resolve(pos), base2 = $pos.depth - depth;
@@ -4774,11 +6091,11 @@ function canSplit(doc2, pos, depth = 1, typesAfter) {
4774
6091
  return $pos.node(base2).canReplaceWith(index, index, baseType ? baseType.type : $pos.node(base2 + 1).type);
4775
6092
  }
4776
6093
  function split(tr, pos, depth = 1, typesAfter) {
4777
- let $pos = tr.doc.resolve(pos), before = Fragment3.empty, after = Fragment3.empty;
6094
+ let $pos = tr.doc.resolve(pos), before = Fragment2.empty, after = Fragment2.empty;
4778
6095
  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));
6096
+ before = Fragment2.from($pos.node(d).copy(before));
4780
6097
  let typeAfter = typesAfter && typesAfter[i];
4781
- after = Fragment3.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
6098
+ after = Fragment2.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
4782
6099
  }
4783
6100
  tr.step(new ReplaceStep(pos, pos, new Slice(before.append(after), depth, depth), true));
4784
6101
  }
@@ -4893,7 +6210,7 @@ var Fitter = class {
4893
6210
  this.$to = $to;
4894
6211
  this.unplaced = unplaced;
4895
6212
  this.frontier = [];
4896
- this.placed = Fragment3.empty;
6213
+ this.placed = Fragment2.empty;
4897
6214
  for (let i = 0; i <= $from.depth; i++) {
4898
6215
  let node = $from.node(i);
4899
6216
  this.frontier.push({
@@ -4902,7 +6219,7 @@ var Fitter = class {
4902
6219
  });
4903
6220
  }
4904
6221
  for (let i = $from.depth; i > 0; i--)
4905
- this.placed = Fragment3.from($from.node(i).copy(this.placed));
6222
+ this.placed = Fragment2.from($from.node(i).copy(this.placed));
4906
6223
  }
4907
6224
  get depth() {
4908
6225
  return this.frontier.length - 1;
@@ -4959,7 +6276,7 @@ var Fitter = class {
4959
6276
  let first2 = fragment.firstChild;
4960
6277
  for (let frontierDepth = this.depth; frontierDepth >= 0; frontierDepth--) {
4961
6278
  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)))
6279
+ if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment2.from(first2), false)) : parent && type.compatibleContent(parent.type)))
4963
6280
  return { sliceDepth, frontierDepth, parent, inject };
4964
6281
  else if (pass == 2 && first2 && (wrap2 = match.findWrapping(first2.type)))
4965
6282
  return { sliceDepth, frontierDepth, parent, wrap: wrap2 };
@@ -5019,7 +6336,7 @@ var Fitter = class {
5019
6336
  let toEnd = taken == fragment.childCount;
5020
6337
  if (!toEnd)
5021
6338
  openEndCount = -1;
5022
- this.placed = addToFragment(this.placed, frontierDepth, Fragment3.from(add));
6339
+ this.placed = addToFragment(this.placed, frontierDepth, Fragment2.from(add));
5023
6340
  this.frontier[frontierDepth].match = match;
5024
6341
  if (toEnd && openEndCount < 0 && parent && parent.type == this.frontier[this.depth].type && this.frontier.length > 1)
5025
6342
  this.closeFrontierNode();
@@ -5076,12 +6393,12 @@ var Fitter = class {
5076
6393
  openFrontierNode(type, attrs = null, content) {
5077
6394
  let top = this.frontier[this.depth];
5078
6395
  top.match = top.match.matchType(type);
5079
- this.placed = addToFragment(this.placed, this.depth, Fragment3.from(type.create(attrs, content)));
6396
+ this.placed = addToFragment(this.placed, this.depth, Fragment2.from(type.create(attrs, content)));
5080
6397
  this.frontier.push({ type, match: type.contentMatch });
5081
6398
  }
5082
6399
  closeFrontierNode() {
5083
6400
  let open = this.frontier.pop();
5084
- let add = open.match.fillBefore(Fragment3.empty, true);
6401
+ let add = open.match.fillBefore(Fragment2.empty, true);
5085
6402
  if (add.childCount)
5086
6403
  this.placed = addToFragment(this.placed, this.frontier.length, add);
5087
6404
  }
@@ -5110,7 +6427,7 @@ function closeNodeStart(node, openStart, openEnd) {
5110
6427
  if (openStart > 0) {
5111
6428
  frag = node.type.contentMatch.fillBefore(frag).append(frag);
5112
6429
  if (openEnd <= 0)
5113
- frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment3.empty, true));
6430
+ frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment2.empty, true));
5114
6431
  }
5115
6432
  return node.copy(frag);
5116
6433
  }
@@ -5202,7 +6519,7 @@ function closeFragment(fragment, depth, oldOpen, newOpen, parent) {
5202
6519
  if (depth > newOpen) {
5203
6520
  let match = parent.contentMatchAt(0);
5204
6521
  let start = match.fillBefore(fragment).append(fragment);
5205
- fragment = start.append(match.matchFragment(start).fillBefore(Fragment3.empty, true));
6522
+ fragment = start.append(match.matchFragment(start).fillBefore(Fragment2.empty, true));
5206
6523
  }
5207
6524
  return fragment;
5208
6525
  }
@@ -5212,7 +6529,7 @@ function replaceRangeWith(tr, from, to, node) {
5212
6529
  if (point != null)
5213
6530
  from = to = point;
5214
6531
  }
5215
- tr.replaceRange(from, to, new Slice(Fragment3.from(node), 0, 0));
6532
+ tr.replaceRange(from, to, new Slice(Fragment2.from(node), 0, 0));
5216
6533
  }
5217
6534
  function deleteRange(tr, from, to) {
5218
6535
  let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
@@ -5260,7 +6577,7 @@ var AttrStep = class extends Step {
5260
6577
  attrs[name] = node.attrs[name];
5261
6578
  attrs[this.attr] = this.value;
5262
6579
  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));
6580
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
5264
6581
  }
5265
6582
  getMap() {
5266
6583
  return StepMap.empty;
@@ -5395,7 +6712,7 @@ var Transform = class {
5395
6712
  fragment, node, or array of nodes.
5396
6713
  */
5397
6714
  replaceWith(from, to, content) {
5398
- return this.replace(from, to, new Slice(Fragment3.from(content), 0, 0));
6715
+ return this.replace(from, to, new Slice(Fragment2.from(content), 0, 0));
5399
6716
  }
5400
6717
  /**
5401
6718
  Delete the content between the given positions.
@@ -5897,7 +7214,7 @@ var NodeSelection = class extends Selection {
5897
7214
  return new NodeSelection($pos);
5898
7215
  }
5899
7216
  content() {
5900
- return new Slice(Fragment3.from(this.node), 0, 0);
7217
+ return new Slice(Fragment2.from(this.node), 0, 0);
5901
7218
  }
5902
7219
  eq(other) {
5903
7220
  return other instanceof NodeSelection && other.anchor == this.anchor;
@@ -6455,10 +7772,10 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6455
7772
  let canDelAfter = !isolated && $cut.parent.canReplace($cut.index(), $cut.index() + 1);
6456
7773
  if (canDelAfter && (conn = (match = before.contentMatchAt(before.childCount)).findWrapping(after.type)) && match.matchType(conn[0] || after.type).validEnd) {
6457
7774
  if (dispatch) {
6458
- let end = $cut.pos + after.nodeSize, wrap2 = Fragment3.empty;
7775
+ let end = $cut.pos + after.nodeSize, wrap2 = Fragment2.empty;
6459
7776
  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));
7777
+ wrap2 = Fragment2.from(conn[i].create(null, wrap2));
7778
+ wrap2 = Fragment2.from(before.copy(wrap2));
6462
7779
  let tr = state.tr.step(new ReplaceAroundStep($cut.pos - 1, end, $cut.pos, end, new Slice(wrap2, 1, 0), conn.length, true));
6463
7780
  let $joinAt = tr.doc.resolve(end + 2 * conn.length);
6464
7781
  if ($joinAt.nodeAfter && $joinAt.nodeAfter.type == before.type && canJoin(tr.doc, $joinAt.pos))
@@ -6487,9 +7804,9 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6487
7804
  afterDepth++;
6488
7805
  if (at.canReplace(at.childCount, at.childCount, afterText.content)) {
6489
7806
  if (dispatch) {
6490
- let end = Fragment3.empty;
7807
+ let end = Fragment2.empty;
6491
7808
  for (let i = wrap2.length - 1; i >= 0; i--)
6492
- end = Fragment3.from(wrap2[i].copy(end));
7809
+ end = Fragment2.from(wrap2[i].copy(end));
6493
7810
  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
7811
  dispatch(tr.scrollIntoView());
6495
7812
  }
@@ -6594,9 +7911,9 @@ function wrapRangeInList(tr, range, listType, attrs = null) {
6594
7911
  return true;
6595
7912
  }
6596
7913
  function doWrapInList(tr, range, wrappers, joinBefore, listType) {
6597
- let content = Fragment3.empty;
7914
+ let content = Fragment2.empty;
6598
7915
  for (let i = wrappers.length - 1; i >= 0; i--)
6599
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
7916
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
6600
7917
  tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
6601
7918
  let found2 = 0;
6602
7919
  for (let i = 0; i < wrappers.length; i++)
@@ -6630,7 +7947,7 @@ function liftListItem(itemType) {
6630
7947
  function liftToOuterList(state, dispatch, itemType, range) {
6631
7948
  let tr = state.tr, end = range.end, endOfList = range.$to.end(range.depth);
6632
7949
  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));
7950
+ tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment2.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
6634
7951
  range = new NodeRange(tr.doc.resolve(range.$from.pos), tr.doc.resolve(endOfList), range.depth);
6635
7952
  }
6636
7953
  const target = liftTarget(range);
@@ -6654,10 +7971,10 @@ function liftOutOfList(state, dispatch, range) {
6654
7971
  return false;
6655
7972
  let atStart = range.startIndex == 0, atEnd = range.endIndex == list.childCount;
6656
7973
  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))))
7974
+ if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment2.empty : Fragment2.from(list))))
6658
7975
  return false;
6659
7976
  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));
7977
+ 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
7978
  dispatch(tr.scrollIntoView());
6662
7979
  return true;
6663
7980
  }
@@ -6675,8 +7992,8 @@ function sinkListItem(itemType) {
6675
7992
  return false;
6676
7993
  if (dispatch) {
6677
7994
  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);
7995
+ let inner = Fragment2.from(nestedBefore ? itemType.create() : null);
7996
+ let slice = new Slice(Fragment2.from(itemType.create(null, Fragment2.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
6680
7997
  let before = range.start, after = range.end;
6681
7998
  dispatch(state.tr.step(new ReplaceAroundStep(before - (nestedBefore ? 3 : 1), after, before, after, slice, 1, true)).scrollIntoView());
6682
7999
  }
@@ -7295,7 +8612,7 @@ function elementFromString(value) {
7295
8612
  return removeWhitespaces(html);
7296
8613
  }
7297
8614
  function createNodeFromContent(content, schema, options) {
7298
- if (content instanceof Node || content instanceof Fragment3) {
8615
+ if (content instanceof Node || content instanceof Fragment2) {
7299
8616
  return content;
7300
8617
  }
7301
8618
  options = {
@@ -7309,7 +8626,7 @@ function createNodeFromContent(content, schema, options) {
7309
8626
  try {
7310
8627
  const isArrayContent = Array.isArray(content) && content.length > 0;
7311
8628
  if (isArrayContent) {
7312
- return Fragment3.fromArray(content.map((item) => schema.nodeFromJSON(item)));
8629
+ return Fragment2.fromArray(content.map((item) => schema.nodeFromJSON(item)));
7313
8630
  }
7314
8631
  const node = schema.nodeFromJSON(content);
7315
8632
  if (options.errorOnInvalidContent) {
@@ -7456,7 +8773,7 @@ var insertContentAt = (position, value, options) => ({ tr, dispatch, editor }) =
7456
8773
  if (isOnlyTextContent) {
7457
8774
  if (Array.isArray(value)) {
7458
8775
  newContent = value.map((v) => v.text || "").join("");
7459
- } else if (value instanceof Fragment3) {
8776
+ } else if (value instanceof Fragment2) {
7460
8777
  let text = "";
7461
8778
  value.forEach((node) => {
7462
8779
  if (node.text) {
@@ -7936,7 +9253,7 @@ function removeDuplicates(array, by = JSON.stringify) {
7936
9253
  function simplifyChangedRanges(changes) {
7937
9254
  const uniqueChanges = removeDuplicates(changes);
7938
9255
  return uniqueChanges.length === 1 ? uniqueChanges : uniqueChanges.filter((change, index) => {
7939
- const rest = uniqueChanges.filter((_18, i) => i !== index);
9256
+ const rest = uniqueChanges.filter((_20, i) => i !== index);
7940
9257
  return !rest.some((otherChange) => {
7941
9258
  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
9259
  });
@@ -8327,10 +9644,10 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8327
9644
  return false;
8328
9645
  }
8329
9646
  if (dispatch) {
8330
- let wrap2 = Fragment3.empty;
9647
+ let wrap2 = Fragment2.empty;
8331
9648
  const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
8332
9649
  for (let d = $from.depth - depthBefore; d >= $from.depth - 3; d -= 1) {
8333
- wrap2 = Fragment3.from($from.node(d).copy(wrap2));
9650
+ wrap2 = Fragment2.from($from.node(d).copy(wrap2));
8334
9651
  }
8335
9652
  const depthAfter = (
8336
9653
  // eslint-disable-next-line no-nested-ternary
@@ -8341,7 +9658,7 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8341
9658
  ...overrideAttrs
8342
9659
  };
8343
9660
  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));
9661
+ wrap2 = wrap2.append(Fragment2.from(type.createAndFill(null, nextType2) || void 0));
8345
9662
  const start = $from.before($from.depth - (depthBefore - 1));
8346
9663
  tr.replace(start, $from.after(-depthAfter), new Slice(wrap2, 4 - depthBefore, 0));
8347
9664
  let sel = -1;
@@ -8961,7 +10278,7 @@ var Drop = Extension.create({
8961
10278
  new Plugin({
8962
10279
  key: new PluginKey("tiptapDrop"),
8963
10280
  props: {
8964
- handleDrop: (_18, e, slice, moved) => {
10281
+ handleDrop: (_20, e, slice, moved) => {
8965
10282
  this.editor.emit("drop", {
8966
10283
  editor: this.editor,
8967
10284
  event: e,
@@ -9763,8 +11080,23 @@ var Underline = Mark2.create({
9763
11080
  }
9764
11081
  });
9765
11082
  var index_default = Underline;
9766
- var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9767
- const theme = useTheme$1();
11083
+ var AppRichTextEditor = ({
11084
+ name,
11085
+ label,
11086
+ required = false,
11087
+ variant = "outlined",
11088
+ placeholder,
11089
+ sx,
11090
+ editorSx,
11091
+ toolbarSx,
11092
+ contentSx,
11093
+ errorSx,
11094
+ labelSx,
11095
+ buttonSx,
11096
+ activeButtonSx,
11097
+ dialogSx
11098
+ }) => {
11099
+ useTheme();
9768
11100
  const { values, setFieldValue } = useFormikContext();
9769
11101
  const [linkDialogOpen, setLinkDialogOpen] = useState(false);
9770
11102
  const [linkUrl, setLinkUrl] = useState("");
@@ -9787,11 +11119,6 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9787
11119
  }, [values[name]]);
9788
11120
  if (!editor)
9789
11121
  return null;
9790
- const openLinkDialog = () => {
9791
- const previousUrl = editor.getAttributes("link").href || "";
9792
- setLinkUrl(previousUrl);
9793
- setLinkDialogOpen(true);
9794
- };
9795
11122
  const applyLink = () => {
9796
11123
  editor.chain().focus().extendMarkRange("link").setLink({ href: linkUrl }).run();
9797
11124
  setLinkDialogOpen(false);
@@ -9800,24 +11127,63 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9800
11127
  editor.chain().focus().unsetLink().run();
9801
11128
  setLinkDialogOpen(false);
9802
11129
  };
9803
- return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
11130
+ return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...sx }, children: [
11131
+ /* @__PURE__ */ jsx(
11132
+ ErrorMessage,
11133
+ {
11134
+ name,
11135
+ render: (msg) => /* @__PURE__ */ jsx(
11136
+ Typography,
11137
+ {
11138
+ variant: "caption",
11139
+ sx: [{
11140
+ color: "error.main",
11141
+ display: "block",
11142
+ mt: 0.5,
11143
+ ...errorSx
11144
+ }],
11145
+ children: msg
11146
+ }
11147
+ )
11148
+ }
11149
+ ),
9804
11150
  label && /* @__PURE__ */ jsxs(
9805
11151
  Typography,
9806
11152
  {
9807
11153
  variant: "button",
9808
- sx: { color: theme.palette.text.primary, mb: 1, display: "block" },
11154
+ sx: [{
11155
+ color: "text.primary",
11156
+ mb: 1,
11157
+ display: "block",
11158
+ ...labelSx
11159
+ }],
9809
11160
  children: [
9810
11161
  label,
9811
11162
  required && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
9812
11163
  ]
9813
11164
  }
9814
11165
  ),
9815
- /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, display: "flex", gap: 1, flexWrap: "wrap" }, children: [
11166
+ /* @__PURE__ */ jsxs(Box, { sx: {
11167
+ mb: 1,
11168
+ display: "flex",
11169
+ gap: 1,
11170
+ flexWrap: "wrap",
11171
+ p: 1,
11172
+ bgcolor: "background.paper",
11173
+ borderRadius: 1,
11174
+ border: "1px solid",
11175
+ borderColor: "divider",
11176
+ ...toolbarSx
11177
+ }, children: [
9816
11178
  /* @__PURE__ */ jsx(Tooltip, { title: "Bold", children: /* @__PURE__ */ jsx(
9817
11179
  IconButton,
9818
11180
  {
9819
11181
  onClick: () => editor.chain().focus().toggleBold().run(),
9820
11182
  color: editor.isActive("bold") ? "primary" : "default",
11183
+ sx: {
11184
+ ...buttonSx,
11185
+ ...editor.isActive("bold") ? activeButtonSx : {}
11186
+ },
9821
11187
  children: /* @__PURE__ */ jsx(FormatBoldIcon, {})
9822
11188
  }
9823
11189
  ) }),
@@ -9826,6 +11192,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9826
11192
  {
9827
11193
  onClick: () => editor.chain().focus().toggleItalic().run(),
9828
11194
  color: editor.isActive("italic") ? "primary" : "default",
11195
+ sx: {
11196
+ ...buttonSx,
11197
+ ...editor.isActive("italic") ? activeButtonSx : {}
11198
+ },
9829
11199
  children: /* @__PURE__ */ jsx(FormatItalicIcon, {})
9830
11200
  }
9831
11201
  ) }),
@@ -9834,6 +11204,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9834
11204
  {
9835
11205
  onClick: () => editor.chain().focus().toggleUnderline().run(),
9836
11206
  color: editor.isActive("underline") ? "primary" : "default",
11207
+ sx: {
11208
+ ...buttonSx,
11209
+ ...editor.isActive("underline") ? activeButtonSx : {}
11210
+ },
9837
11211
  children: /* @__PURE__ */ jsx(FormatUnderlinedIcon, {})
9838
11212
  }
9839
11213
  ) }),
@@ -9842,6 +11216,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9842
11216
  {
9843
11217
  onClick: () => editor.chain().focus().toggleStrike().run(),
9844
11218
  color: editor.isActive("strike") ? "primary" : "default",
11219
+ sx: {
11220
+ ...buttonSx,
11221
+ ...editor.isActive("strike") ? activeButtonSx : {}
11222
+ },
9845
11223
  children: /* @__PURE__ */ jsx(StrikethroughSIcon, {})
9846
11224
  }
9847
11225
  ) }),
@@ -9850,6 +11228,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9850
11228
  {
9851
11229
  onClick: () => editor.chain().focus().toggleBulletList().run(),
9852
11230
  color: editor.isActive("bulletList") ? "primary" : "default",
11231
+ sx: {
11232
+ ...buttonSx,
11233
+ ...editor.isActive("bulletList") ? activeButtonSx : {}
11234
+ },
9853
11235
  children: /* @__PURE__ */ jsx(FormatListBulletedIcon, {})
9854
11236
  }
9855
11237
  ) }),
@@ -9858,6 +11240,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9858
11240
  {
9859
11241
  onClick: () => editor.chain().focus().toggleOrderedList().run(),
9860
11242
  color: editor.isActive("orderedList") ? "primary" : "default",
11243
+ sx: {
11244
+ ...buttonSx,
11245
+ ...editor.isActive("orderedList") ? activeButtonSx : {}
11246
+ },
9861
11247
  children: /* @__PURE__ */ jsx(FormatListNumberedIcon, {})
9862
11248
  }
9863
11249
  ) }),
@@ -9866,6 +11252,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9866
11252
  {
9867
11253
  onClick: () => editor.chain().focus().setTextAlign("left").run(),
9868
11254
  color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
11255
+ sx: {
11256
+ ...buttonSx,
11257
+ ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
11258
+ },
9869
11259
  children: /* @__PURE__ */ jsx(FormatAlignLeftIcon, {})
9870
11260
  }
9871
11261
  ) }),
@@ -9874,6 +11264,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9874
11264
  {
9875
11265
  onClick: () => editor.chain().focus().setTextAlign("center").run(),
9876
11266
  color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
11267
+ sx: {
11268
+ ...buttonSx,
11269
+ ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
11270
+ },
9877
11271
  children: /* @__PURE__ */ jsx(FormatAlignCenterIcon, {})
9878
11272
  }
9879
11273
  ) }),
@@ -9882,6 +11276,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9882
11276
  {
9883
11277
  onClick: () => editor.chain().focus().setTextAlign("right").run(),
9884
11278
  color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
11279
+ sx: {
11280
+ ...buttonSx,
11281
+ ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
11282
+ },
9885
11283
  children: /* @__PURE__ */ jsx(FormatAlignRightIcon, {})
9886
11284
  }
9887
11285
  ) }),
@@ -9890,36 +11288,78 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9890
11288
  {
9891
11289
  onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
9892
11290
  color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
11291
+ sx: {
11292
+ ...buttonSx,
11293
+ ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
11294
+ },
9893
11295
  children: /* @__PURE__ */ jsx(TitleIcon, { sx: { fontSize: "1rem" } })
9894
11296
  }
9895
11297
  ) }),
9896
- /* @__PURE__ */ jsx(Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsx(
11298
+ /* @__PURE__ */ jsx(Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxs(
9897
11299
  IconButton,
9898
11300
  {
9899
11301
  onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
9900
11302
  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, {})
11303
+ sx: {
11304
+ ...buttonSx,
11305
+ ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
11306
+ },
11307
+ children: [
11308
+ /* @__PURE__ */ jsx(TitleIcon, { sx: { fontSize: "0.85rem" } }),
11309
+ /* @__PURE__ */ jsx(UndoIcon, {})
11310
+ ]
9910
11311
  }
9911
11312
  ) }),
9912
- /* @__PURE__ */ jsx(Tooltip, { title: "Undo", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => editor.chain().focus().undo().run(), children: /* @__PURE__ */ jsx(UndoIcon, {}) }) }),
9913
11313
  /* @__PURE__ */ jsx(Tooltip, { title: "Redo", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsx(RedoIcon, {}) }) })
9914
11314
  ] }),
9915
11315
  /* @__PURE__ */ jsx(
9916
11316
  Box,
9917
11317
  {
9918
11318
  sx: {
9919
- border: `1px solid ${theme.palette.grey[400]}`,
11319
+ border: "1px solid",
11320
+ borderColor: "divider",
9920
11321
  borderRadius: 1,
11322
+ p: 2,
9921
11323
  minHeight: 200,
9922
- p: 2
11324
+ maxHeight: 400,
11325
+ overflowY: "auto",
11326
+ bgcolor: "background.paper",
11327
+ "& .ProseMirror": {
11328
+ outline: "none",
11329
+ minHeight: 150,
11330
+ "& > * + *": {
11331
+ mt: 2
11332
+ },
11333
+ "& h1": {
11334
+ fontSize: "2em",
11335
+ fontWeight: "bold",
11336
+ lineHeight: 1.2,
11337
+ color: "text.primary"
11338
+ },
11339
+ "& h2": {
11340
+ fontSize: "1.5em",
11341
+ fontWeight: "bold",
11342
+ lineHeight: 1.3,
11343
+ color: "text.primary"
11344
+ },
11345
+ "& p": {
11346
+ color: "text.primary",
11347
+ lineHeight: 1.6
11348
+ },
11349
+ "& ul, & ol": {
11350
+ pl: 3,
11351
+ color: "text.primary"
11352
+ },
11353
+ "& a": {
11354
+ color: "primary.main",
11355
+ textDecoration: "none",
11356
+ "&:hover": {
11357
+ textDecoration: "underline"
11358
+ }
11359
+ },
11360
+ ...contentSx
11361
+ },
11362
+ ...editorSx
9923
11363
  },
9924
11364
  children: /* @__PURE__ */ jsx(
9925
11365
  EditorContent,
@@ -9939,142 +11379,513 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9939
11379
  children: /* @__PURE__ */ jsx(ErrorMessage, { name, component: "div" })
9940
11380
  }
9941
11381
  ),
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
- ] })
11382
+ /* @__PURE__ */ jsxs(
11383
+ Dialog,
11384
+ {
11385
+ open: linkDialogOpen,
11386
+ onClose: () => setLinkDialogOpen(false),
11387
+ PaperProps: {
11388
+ sx: {
11389
+ minWidth: 400,
11390
+ p: 2,
11391
+ bgcolor: "background.paper",
11392
+ borderRadius: 1,
11393
+ border: "1px solid",
11394
+ borderColor: "divider",
11395
+ "& .MuiDialogTitle-root": {
11396
+ borderBottom: "1px solid",
11397
+ borderColor: "divider",
11398
+ p: 2
11399
+ },
11400
+ "& .MuiDialogContent-root": {
11401
+ p: 2
11402
+ },
11403
+ "& .MuiDialogActions-root": {
11404
+ p: 2,
11405
+ borderTop: "1px solid",
11406
+ borderColor: "divider"
11407
+ },
11408
+ ...dialogSx
11409
+ }
11410
+ },
11411
+ children: [
11412
+ /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Link" }),
11413
+ /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
11414
+ TextField,
11415
+ {
11416
+ autoFocus: true,
11417
+ margin: "dense",
11418
+ id: "url",
11419
+ label: "URL",
11420
+ type: "url",
11421
+ fullWidth: true,
11422
+ variant,
11423
+ value: linkUrl,
11424
+ onChange: (e) => setLinkUrl(e.target.value),
11425
+ placeholder: "https://example.com"
11426
+ }
11427
+ ) }),
11428
+ /* @__PURE__ */ jsxs(DialogActions, { children: [
11429
+ /* @__PURE__ */ jsx(Button, { onClick: removeLink, color: "error", children: "Remove" }),
11430
+ /* @__PURE__ */ jsx(Button, { onClick: () => setLinkDialogOpen(false), children: "Cancel" }),
11431
+ /* @__PURE__ */ jsx(Button, { onClick: applyLink, variant: "contained", children: "Apply" })
11432
+ ] })
11433
+ ]
11434
+ }
11435
+ )
9963
11436
  ] });
9964
11437
  };
9965
11438
  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"
11439
+ var AppSearchableMultiSelector = forwardRef(
11440
+ ({
11441
+ name,
11442
+ label,
11443
+ multiple = true,
11444
+ options = [],
11445
+ setSearchQuery,
11446
+ required = false,
11447
+ variant = "outlined",
11448
+ disabled = false,
11449
+ readOnly = false,
11450
+ showHelperText = false,
11451
+ helperText,
11452
+ maxSelections,
11453
+ showSelectedCount = false,
11454
+ sx,
11455
+ formControlSx,
11456
+ labelSx,
11457
+ inputSx,
11458
+ textFieldSx,
11459
+ autocompleteSx,
11460
+ listboxSx,
11461
+ optionSx,
11462
+ chipSx,
11463
+ errorSx,
11464
+ helperTextSx,
11465
+ selectedCountSx,
11466
+ renderInput: externalRenderInput,
11467
+ renderOption: externalRenderOption,
11468
+ renderTags: externalRenderTags,
11469
+ renderGroup: externalRenderGroup,
11470
+ labelComponent: LabelComponent = InputLabel,
11471
+ inputComponent: InputComponent = "input",
11472
+ errorComponent: ErrorComponent = Typography,
11473
+ helperTextComponent: HelperTextComponent = FormHelperText,
11474
+ labelProps = {},
11475
+ inputProps = {},
11476
+ textFieldProps = {},
11477
+ autocompleteProps = {},
11478
+ checkboxProps = {},
11479
+ chipProps = {},
11480
+ errorProps = {},
11481
+ helperTextProps = {},
11482
+ className = "",
11483
+ formControlClassName = "",
11484
+ labelClassName = "",
11485
+ inputClassName = "",
11486
+ textFieldClassName = "",
11487
+ autocompleteClassName = "",
11488
+ listboxClassName = "",
11489
+ optionClassName = "",
11490
+ chipClassName = "",
11491
+ errorClassName = "",
11492
+ helperTextClassName = "",
11493
+ onInputChange: externalOnInputChange,
11494
+ onChange: externalOnChange,
11495
+ onOpen,
11496
+ onClose,
11497
+ onBlur: externalOnBlur,
11498
+ onFocus: externalOnFocus,
11499
+ onClear,
11500
+ onMaxSelectionsReached,
11501
+ onRemove,
11502
+ onAdd,
11503
+ ...otherProps
11504
+ }, ref) => {
11505
+ useTheme();
11506
+ const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
11507
+ const fieldError = _19.get(errors, name);
11508
+ const isTouched = Boolean(_19.get(touched, name));
11509
+ const hasError = Boolean(fieldError) && isTouched;
11510
+ const val = _19.get(values, name);
11511
+ const selectedValues = Array.isArray(val) ? val : [];
11512
+ const selectedCount = selectedValues.length;
11513
+ const handleChange = (event, value, reason, details) => {
11514
+ const normalizedValue = (() => {
11515
+ if (value === null)
11516
+ return [];
11517
+ const arr = Array.isArray(value) ? value : [value];
11518
+ return arr.map(
11519
+ (item) => typeof item === "string" ? { value: item, label: item } : item
11520
+ );
11521
+ })();
11522
+ if (maxSelections && normalizedValue.length > maxSelections) {
11523
+ if (onMaxSelectionsReached) {
11524
+ onMaxSelectionsReached(maxSelections);
11525
+ }
11526
+ return;
11527
+ }
11528
+ if (reason === "selectOption" || reason === "removeOption") {
11529
+ const added = normalizedValue.filter(
11530
+ (item) => !selectedValues.some((v) => v.value === item.value)
11531
+ );
11532
+ const removed = selectedValues.filter(
11533
+ (item) => !normalizedValue.some((v) => v.value === item.value)
11534
+ );
11535
+ if (added.length > 0 && onAdd) {
11536
+ added.forEach((item) => onAdd(item));
11537
+ }
11538
+ if (removed.length > 0 && onRemove) {
11539
+ removed.forEach((item) => onRemove(item));
11540
+ }
11541
+ }
11542
+ setFieldValue(name, normalizedValue, true);
11543
+ if (externalOnChange) {
11544
+ externalOnChange(event, normalizedValue, reason);
11545
+ }
11546
+ };
11547
+ const handleInputChange = (event, value, reason) => {
11548
+ if (setSearchQuery) {
11549
+ setSearchQuery(value);
11550
+ }
11551
+ if (externalOnInputChange) {
11552
+ externalOnInputChange(event, value, reason);
11553
+ }
11554
+ };
11555
+ const handleBlur = (event) => {
11556
+ setFieldTouched(name, true, true);
11557
+ if (externalOnBlur) {
11558
+ externalOnBlur(event);
11559
+ }
11560
+ };
11561
+ const handleFocus = (event) => {
11562
+ if (externalOnFocus) {
11563
+ externalOnFocus(event);
11564
+ }
11565
+ };
11566
+ const filterOptions = (options2, { inputValue }) => {
11567
+ if (!inputValue)
11568
+ return options2;
11569
+ const inputValueLower = inputValue.toLowerCase();
11570
+ return options2.filter(
11571
+ (option) => {
11572
+ var _a, _b, _c, _d;
11573
+ 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));
11574
+ }
11575
+ );
11576
+ };
11577
+ const defaultRenderInput = (params) => /* @__PURE__ */ jsx(
11578
+ TextField,
11579
+ {
11580
+ ...params,
11581
+ variant,
11582
+ error: hasError,
11583
+ helperText: "",
11584
+ placeholder: "",
11585
+ inputRef: inputProps.ref,
11586
+ inputProps: {
11587
+ ...params.inputProps,
11588
+ ...inputProps,
11589
+ className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
9996
11590
  },
9997
- ".MuiInputLabel-root.Mui-focused": {
9998
- color: "text.primary"
11591
+ InputProps: {
11592
+ ...params.InputProps,
11593
+ ...textFieldProps.InputProps,
11594
+ className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
9999
11595
  },
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,
11596
+ sx: [
10012
11597
  {
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
- );
11598
+ "& .MuiOutlinedInput-root": {
11599
+ borderRadius: "8px",
11600
+ "& fieldset": {
11601
+ borderColor: hasError ? "error.main" : "divider"
11602
+ },
11603
+ "&:hover fieldset": {
11604
+ borderColor: hasError ? "error.main" : "text.primary"
11605
+ },
11606
+ "&.Mui-focused fieldset": {
11607
+ borderColor: hasError ? "error.main" : "primary.main"
11608
+ },
11609
+ "& .MuiInputLabel-root": {
11610
+ // Your label styles here
11611
+ }
11612
+ }
11613
+ },
11614
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11615
+ ],
11616
+ ...textFieldProps
11617
+ }
11618
+ );
11619
+ const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ createElement(
11620
+ "li",
11621
+ {
11622
+ ...props,
11623
+ key: option.value,
11624
+ className: `${props.className || ""} ${optionClassName}`.trim(),
11625
+ style: {
11626
+ ...props.style,
11627
+ opacity: option.disabled ? 0.5 : 1,
11628
+ pointerEvents: option.disabled ? "none" : "auto"
11629
+ }
11630
+ },
11631
+ /* @__PURE__ */ jsx(
11632
+ Checkbox,
11633
+ {
11634
+ checked: selected,
11635
+ disabled: option.disabled,
11636
+ sx: {
11637
+ color: "text.secondary",
11638
+ "&.Mui-checked": {
11639
+ color: "primary.main"
10025
11640
  },
10026
- onInputChange: (event, value) => {
10027
- setSearchQuery(value);
11641
+ "&.Mui-disabled": {
11642
+ color: "text.disabled"
10028
11643
  },
10029
- onChange: (e, newValue) => {
10030
- setFieldValue(name, newValue, true);
11644
+ mr: 1,
11645
+ ...checkboxProps.sx
11646
+ },
11647
+ ...checkboxProps
11648
+ }
11649
+ ),
11650
+ option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
11651
+ /* @__PURE__ */ jsx(
11652
+ Typography,
11653
+ {
11654
+ variant: "body2",
11655
+ sx: [
11656
+ {
11657
+ color: option.disabled ? "text.disabled" : "text.primary",
11658
+ ...option.textSx
10031
11659
  },
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,
11660
+ ...Array.isArray(optionSx) ? optionSx : [optionSx]
11661
+ ],
11662
+ children: option.label
11663
+ }
11664
+ )
11665
+ );
11666
+ const defaultRenderTags = (value, getTagProps) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
11667
+ const { key, ...tagProps } = getTagProps({ index });
11668
+ return /* @__PURE__ */ createElement(
11669
+ Chip,
11670
+ {
11671
+ ...tagProps,
11672
+ key: option.value,
11673
+ label: option.label,
11674
+ disabled: disabled || option.disabled,
11675
+ sx: [
11676
+ {
11677
+ height: "24px",
11678
+ borderRadius: "4px",
11679
+ "& .MuiChip-deleteIcon": {
11680
+ color: "text.secondary",
11681
+ "&:hover": {
11682
+ color: "text.primary"
11683
+ }
11684
+ },
11685
+ ...chipSx
11686
+ },
11687
+ ...Array.isArray(chipSx) ? chipSx : [chipSx]
11688
+ ],
11689
+ className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
11690
+ ...chipProps
11691
+ }
11692
+ );
11693
+ }) });
11694
+ const renderSelectedCount = () => {
11695
+ if (!showSelectedCount || !multiple)
11696
+ return null;
11697
+ return /* @__PURE__ */ jsxs(
11698
+ Typography,
11699
+ {
11700
+ variant: "caption",
11701
+ sx: [
11702
+ {
11703
+ mt: 0.5,
11704
+ color: "text.secondary",
11705
+ ...selectedCountSx
11706
+ },
11707
+ ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
11708
+ ],
11709
+ children: [
11710
+ `${selectedCount} selected`,
11711
+ maxSelections ? ` (max ${maxSelections})` : ""
11712
+ ]
11713
+ }
11714
+ );
11715
+ };
11716
+ return /* @__PURE__ */ jsx(
11717
+ Box,
11718
+ {
11719
+ ref,
11720
+ className: `app-searchable-multi-selector ${className}`.trim(),
11721
+ sx: [
11722
+ {
11723
+ width: "100%"
11724
+ },
11725
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11726
+ ],
11727
+ children: /* @__PURE__ */ jsxs(
11728
+ FormControl,
11729
+ {
11730
+ fullWidth: true,
11731
+ error: hasError,
11732
+ disabled,
11733
+ className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
11734
+ sx: [
10049
11735
  {
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
11736
+ "& .MuiAutocomplete-root": {
11737
+ "& .MuiOutlinedInput-root": {
11738
+ padding: "4px"
11739
+ },
11740
+ "& .MuiAutocomplete-input": {
11741
+ padding: "8.5px 4px"
11742
+ }
11743
+ }
11744
+ },
11745
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
11746
+ ],
11747
+ children: [
11748
+ label && /* @__PURE__ */ jsxs(
11749
+ LabelComponent,
11750
+ {
11751
+ shrink: true,
11752
+ htmlFor: `autocomplete-${name}`,
11753
+ className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
11754
+ sx: [
11755
+ {
11756
+ mb: 1,
11757
+ color: hasError ? "error.main" : "text.primary",
11758
+ "&.Mui-focused": {
11759
+ color: hasError ? "error.main" : "primary.main"
11760
+ },
11761
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
11762
+ }
11763
+ ],
11764
+ ...labelProps,
11765
+ children: [
11766
+ label,
11767
+ required && /* @__PURE__ */ jsx(
11768
+ Box,
11769
+ {
11770
+ component: "span",
11771
+ sx: {
11772
+ color: "error.main",
11773
+ ml: 0.5
11774
+ },
11775
+ children: "*"
11776
+ }
11777
+ )
11778
+ ]
11779
+ }
11780
+ ),
11781
+ /* @__PURE__ */ jsx(
11782
+ Autocomplete,
11783
+ {
11784
+ multiple,
11785
+ id: `autocomplete-${name}`,
11786
+ options,
11787
+ value: selectedValues,
11788
+ filterOptions,
11789
+ onInputChange: handleInputChange,
11790
+ onChange: handleChange,
11791
+ onOpen,
11792
+ onClose,
11793
+ onBlur: handleBlur,
11794
+ onFocus: handleFocus,
11795
+ disableCloseOnSelect: multiple,
11796
+ readOnly,
11797
+ disabled,
11798
+ isOptionEqualToValue: (option, value) => option.value === value.value,
11799
+ getOptionLabel: (option) => typeof option === "string" ? option : option.label,
11800
+ getOptionDisabled: (option) => !!option.disabled,
11801
+ renderInput: externalRenderInput || defaultRenderInput,
11802
+ renderOption: externalRenderOption || defaultRenderOption,
11803
+ renderTags: externalRenderTags || defaultRenderTags,
11804
+ renderGroup: externalRenderGroup,
11805
+ ListboxProps: {
11806
+ className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
11807
+ sx: {
11808
+ "& .MuiAutocomplete-option": {
11809
+ px: 2,
11810
+ py: 1,
11811
+ '&[aria-selected="true"]': {
11812
+ backgroundColor: "action.selected",
11813
+ "&.Mui-focused": {
11814
+ backgroundColor: "action.hover"
11815
+ }
11816
+ },
11817
+ "&.Mui-focused": {
11818
+ backgroundColor: "action.hover"
11819
+ }
11820
+ },
11821
+ ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
11822
+ ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
11823
+ }
11824
+ },
11825
+ className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
11826
+ sx: [
11827
+ {
11828
+ "& .MuiAutocomplete-tag": {
11829
+ margin: 0,
11830
+ height: "auto"
11831
+ },
11832
+ "& .MuiAutocomplete-endAdornment": {
11833
+ right: 8
11834
+ }
11835
+ },
11836
+ ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
11837
+ ],
11838
+ ...autocompleteProps,
11839
+ ...otherProps
11840
+ }
11841
+ ),
11842
+ (showHelperText || hasError) && /* @__PURE__ */ jsx(
11843
+ HelperTextComponent,
11844
+ {
11845
+ error: hasError,
11846
+ sx: [
11847
+ {
11848
+ mx: 0,
11849
+ mt: 0.5,
11850
+ ...hasError ? {
11851
+ color: "error.main",
11852
+ ...errorSx
11853
+ } : {
11854
+ color: "text.secondary",
11855
+ ...helperTextSx
11856
+ }
11857
+ }
11858
+ ],
11859
+ className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
11860
+ ...helperTextProps,
11861
+ children: hasError ? fieldError : helperText
11862
+ }
11863
+ ),
11864
+ renderSelectedCount()
11865
+ ]
10058
11866
  }
10059
11867
  )
10060
- ]
10061
- }
10062
- );
10063
- }
11868
+ }
11869
+ );
11870
+ }
11871
+ );
11872
+ AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
11873
+ var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
10064
11874
  function AppSearchableSelectInput({
10065
11875
  name,
10066
11876
  label,
10067
- required,
10068
11877
  options = [],
11878
+ required = false,
11879
+ variant = "outlined",
10069
11880
  placeholder,
10070
11881
  setSearchQuery,
10071
11882
  isResetRequired,
10072
11883
  ...otherProps
10073
11884
  }) {
10074
11885
  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);
11886
+ const fieldError = _19.get(errors, name);
11887
+ const isTouched = _19.get(touched, name);
11888
+ const val = _19.get(values, name);
10078
11889
  const selectedOption = options.find((option) => option.value === val) || null;
10079
11890
  const handleChange = (event, newValue) => {
10080
11891
  setFieldValue(name, newValue ? newValue.value : "");
@@ -10089,7 +11900,8 @@ function AppSearchableSelectInput({
10089
11900
  FormControl,
10090
11901
  {
10091
11902
  fullWidth: true,
10092
- variant: "outlined",
11903
+ variant,
11904
+ error: isTouched && Boolean(fieldError),
10093
11905
  sx: {
10094
11906
  padding: "0px !important",
10095
11907
  ".MuiAutocomplete-endAdornment": { right: "0 !important" },
@@ -10127,7 +11939,7 @@ function AppSearchableSelectInput({
10127
11939
  label,
10128
11940
  required && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: " *" })
10129
11941
  ] }),
10130
- variant: "outlined",
11942
+ variant,
10131
11943
  placeholder,
10132
11944
  error: Boolean(fieldError) && isTouched,
10133
11945
  helperText: isTouched && fieldError ? fieldError : "",
@@ -10144,9 +11956,6 @@ function AppSearchableSelectInput({
10144
11956
  "& .MuiOutlinedInput-input": {
10145
11957
  color: "common.black"
10146
11958
  },
10147
- // '& .MuiOutlinedInput-notchedOutline': {
10148
- // borderColor: 'rgba(255,255,255,0.3)',
10149
- // },
10150
11959
  "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
10151
11960
  borderColor: "common.white"
10152
11961
  },
@@ -10162,72 +11971,413 @@ function AppSearchableSelectInput({
10162
11971
  }
10163
11972
  );
10164
11973
  }
10165
- function AppSelectInput({
10166
- 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,
11974
+ var AppSelectInput = forwardRef(
11975
+ ({
11976
+ name,
11977
+ variant = "outlined",
11978
+ label,
11979
+ fullWidth = true,
11980
+ required = false,
11981
+ disabled = false,
11982
+ readOnly = false,
11983
+ options = [],
11984
+ showNoneOption = false,
11985
+ noneOptionText = "None",
11986
+ showHelperText = false,
11987
+ helperText,
11988
+ sx,
11989
+ formControlSx,
11990
+ selectSx,
11991
+ inputSx,
11992
+ labelSx,
11993
+ menuPaperSx,
11994
+ menuItemSx,
11995
+ selectedMenuItemSx,
11996
+ errorSx,
11997
+ helperTextSx,
11998
+ iconSx,
11999
+ labelComponent: LabelComponent = InputLabel,
12000
+ errorComponent: ErrorComponent = Typography,
12001
+ helperTextComponent: HelperTextComponent = FormHelperText,
12002
+ onChange: externalOnChange,
12003
+ onOpen,
12004
+ onClose,
12005
+ onBlur: externalOnBlur,
12006
+ renderValue,
12007
+ renderMenuItem,
12008
+ MenuProps,
12009
+ inputProps,
12010
+ ...otherProps
12011
+ }, ref) => {
12012
+ const theme = useTheme();
12013
+ const { errors, touched, values, setFieldValue, setFieldTouched } = useFormikContext();
12014
+ const fieldError = _19.get(errors, name);
12015
+ const isTouched = _19.get(touched, name);
12016
+ const hasError = Boolean(fieldError) && isTouched;
12017
+ const value = _19.get(values, name);
12018
+ const handleChange = (event, child) => {
12019
+ setFieldValue(name, event.target.value, true);
12020
+ if (externalOnChange) {
12021
+ externalOnChange(event, child);
12022
+ }
12023
+ };
12024
+ const handleBlur = (event) => {
12025
+ setFieldTouched(name, true, true);
12026
+ if (externalOnBlur) {
12027
+ externalOnBlur(event);
12028
+ }
12029
+ };
12030
+ const renderDefaultMenuItem = (option, index) => {
12031
+ const MenuItemComponent = option.component || MenuItem;
12032
+ const menuItemProps = option.component ? option.componentProps : {};
12033
+ return /* @__PURE__ */ jsxs(
12034
+ MenuItemComponent,
12035
+ {
12036
+ value: option.value,
12037
+ disabled: option.disabled,
12038
+ ...menuItemProps,
12039
+ sx: [
12040
+ {
12041
+ color: "text.primary",
12042
+ "&.Mui-selected": {
12043
+ backgroundColor: "action.selected",
12044
+ "&:hover": {
12045
+ backgroundColor: "action.hover"
12046
+ },
12047
+ ...selectedMenuItemSx
12048
+ },
12049
+ "&.Mui-disabled": {
12050
+ opacity: 0.5,
12051
+ pointerEvents: "none"
12052
+ },
12053
+ ...option.sx
12054
+ },
12055
+ ...Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx]
12056
+ ],
12057
+ children: [
12058
+ option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
12059
+ /* @__PURE__ */ jsx(
12060
+ Typography,
12061
+ {
12062
+ variant: "body2",
12063
+ sx: [
12064
+ {
12065
+ color: option.disabled ? "text.disabled" : "text.primary",
12066
+ ...option.textSx
12067
+ }
12068
+ ],
12069
+ children: option.label
12070
+ }
12071
+ )
12072
+ ]
12073
+ },
12074
+ `${option.value}-${index}`
12075
+ );
12076
+ };
12077
+ return /* @__PURE__ */ jsx(
12078
+ Box,
10180
12079
  {
10181
- id: `select-${name}`,
10182
- sx: {
10183
- color: "text.primary",
10184
- "&.Mui-focused": {
10185
- color: "text.primary"
12080
+ ref,
12081
+ className: "app-select-input",
12082
+ sx: [
12083
+ {
12084
+ "& .MuiInputLabel-root": {
12085
+ "&.Mui-focused": {
12086
+ color: hasError ? "error.main" : "primary.main"
12087
+ },
12088
+ "&.Mui-disabled": {
12089
+ color: "text.disabled"
12090
+ }
12091
+ }
12092
+ },
12093
+ ...Array.isArray(formControlSx) ? formControlSx : [formControlSx].filter(Boolean)
12094
+ ],
12095
+ children: /* @__PURE__ */ jsxs(
12096
+ FormControl,
12097
+ {
12098
+ fullWidth,
12099
+ variant,
12100
+ error: hasError,
12101
+ disabled,
12102
+ className: "app-select-form-control",
12103
+ sx: [
12104
+ {
12105
+ "& .MuiInputLabel-root": {
12106
+ "&.Mui-focused": {
12107
+ color: hasError ? "error.main" : "primary.main"
12108
+ },
12109
+ "&.Mui-disabled": {
12110
+ color: "text.disabled"
12111
+ }
12112
+ }
12113
+ },
12114
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
12115
+ ],
12116
+ children: [
12117
+ label && /* @__PURE__ */ jsxs(
12118
+ LabelComponent,
12119
+ {
12120
+ id: `select-${name}-label`,
12121
+ htmlFor: `select-${name}`,
12122
+ className: "app-select-label",
12123
+ sx: [
12124
+ {
12125
+ color: hasError ? "error.main" : "text.secondary",
12126
+ "&.Mui-focused": {
12127
+ color: hasError ? "error.main" : "primary.main"
12128
+ },
12129
+ mb: 1,
12130
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
12131
+ }
12132
+ ],
12133
+ children: [
12134
+ label,
12135
+ required && /* @__PURE__ */ jsx(
12136
+ Box,
12137
+ {
12138
+ component: "span",
12139
+ sx: {
12140
+ color: "error.main",
12141
+ ml: 0.5
12142
+ },
12143
+ children: "*"
12144
+ }
12145
+ )
12146
+ ]
12147
+ }
12148
+ ),
12149
+ /* @__PURE__ */ jsxs(
12150
+ Select,
12151
+ {
12152
+ variant: "outlined",
12153
+ labelId: label ? `select-${name}-label` : void 0,
12154
+ id: `select-${name}`,
12155
+ name,
12156
+ value: value != null ? value : "",
12157
+ onChange: handleChange,
12158
+ onBlur: handleBlur,
12159
+ onOpen,
12160
+ onClose,
12161
+ renderValue,
12162
+ inputProps: {
12163
+ readOnly,
12164
+ ...inputProps
12165
+ },
12166
+ MenuProps: {
12167
+ PaperProps: {
12168
+ sx: [
12169
+ {
12170
+ mt: 1,
12171
+ boxShadow: theme.shadows[3],
12172
+ "& .MuiMenuItem-root": {
12173
+ px: 2,
12174
+ py: 1,
12175
+ "&.Mui-selected": {
12176
+ backgroundColor: "action.selected",
12177
+ "&:hover": {
12178
+ backgroundColor: "action.hover"
12179
+ }
12180
+ }
12181
+ },
12182
+ ...Array.isArray(menuPaperSx) ? menuPaperSx : [menuPaperSx]
12183
+ }
12184
+ ]
12185
+ },
12186
+ ...MenuProps
12187
+ },
12188
+ sx: [
12189
+ {
12190
+ // Your base styles here
12191
+ "&.Mui-disabled": {
12192
+ backgroundColor: "action.disabledBackground",
12193
+ "& .MuiOutlinedInput-notchedOutline": {
12194
+ borderColor: "action.disabled"
12195
+ },
12196
+ "& .MuiSelect-icon": {
12197
+ color: "action.disabled"
12198
+ }
12199
+ }
12200
+ },
12201
+ ...Array.isArray(selectSx) ? selectSx : selectSx ? [selectSx] : []
12202
+ ],
12203
+ ...otherProps,
12204
+ children: [
12205
+ showNoneOption && /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: noneOptionText }) }),
12206
+ options.map(
12207
+ (option, index) => renderMenuItem ? renderMenuItem(option, index) : renderDefaultMenuItem(option, index)
12208
+ )
12209
+ ]
12210
+ }
12211
+ ),
12212
+ (showHelperText || hasError) && /* @__PURE__ */ jsx(
12213
+ HelperTextComponent,
12214
+ {
12215
+ error: hasError,
12216
+ sx: [
12217
+ {
12218
+ mx: 0,
12219
+ mt: 0.5,
12220
+ ...hasError ? {
12221
+ color: "error.main",
12222
+ ...errorSx
12223
+ } : {
12224
+ color: "text.secondary",
12225
+ ...helperTextSx
12226
+ }
12227
+ }
12228
+ ],
12229
+ children: hasError ? fieldError : helperText
12230
+ }
12231
+ )
12232
+ ]
10186
12233
  }
10187
- },
10188
- children: [
10189
- label,
10190
- " ",
10191
- required === true && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: "*" })
10192
- ]
12234
+ )
12235
+ }
12236
+ );
12237
+ }
12238
+ );
12239
+ AppSelectInput.displayName = "AppSelectInput";
12240
+ var AppSelectInput_default = AppSelectInput;
12241
+ var AppSimpleUploadFile = ({
12242
+ name,
12243
+ label = "Upload Files",
12244
+ accept = "image/*",
12245
+ multiple = false,
12246
+ disabled = false,
12247
+ required = false,
12248
+ maxFiles,
12249
+ maxSizeInBytes = 5 * 1024 * 1024,
12250
+ // 5MB
12251
+ sx,
12252
+ buttonSx,
12253
+ errorSx,
12254
+ onAdd,
12255
+ onRemove,
12256
+ onError
12257
+ }) => {
12258
+ const { setFieldValue, values, errors, touched } = useFormikContext();
12259
+ const fieldValue = _19.get(values, name);
12260
+ const fieldError = _19.get(touched, name) ? _19.get(errors, name) : void 0;
12261
+ const handleChange = (event) => {
12262
+ const files = event.target.files;
12263
+ if (!files || files.length === 0)
12264
+ return;
12265
+ const newFiles = Array.from(files).map((file) => {
12266
+ if (file.size > maxSizeInBytes) {
12267
+ const errorMsg = `File ${file.name} exceeds maximum size of ${maxSizeInBytes / (1024 * 1024)}MB`;
12268
+ onError == null ? void 0 : onError(errorMsg);
12269
+ return null;
12270
+ }
12271
+ return Object.assign(file, {
12272
+ preview: URL.createObjectURL(file)
12273
+ });
12274
+ }).filter(Boolean);
12275
+ if (newFiles.length === 0)
12276
+ return;
12277
+ const currentFiles = fieldValue || [];
12278
+ const updatedFiles = multiple ? [...currentFiles, ...newFiles].slice(0, maxFiles || Infinity) : [newFiles[0]];
12279
+ setFieldValue(name, updatedFiles);
12280
+ newFiles.forEach((file) => onAdd == null ? void 0 : onAdd(file));
12281
+ event.target.value = "";
12282
+ };
12283
+ const handleRemove = (index) => {
12284
+ if (!fieldValue || index < 0 || index >= fieldValue.length)
12285
+ return;
12286
+ const fileToRemove = fieldValue[index];
12287
+ const newFiles = fieldValue.filter((_20, i) => i !== index);
12288
+ setFieldValue(name, newFiles);
12289
+ onRemove == null ? void 0 : onRemove(fileToRemove);
12290
+ if (fileToRemove.preview) {
12291
+ URL.revokeObjectURL(fileToRemove.preview);
12292
+ }
12293
+ };
12294
+ const handleClick = () => {
12295
+ const input = document.getElementById(
12296
+ `file-upload-${name}`
12297
+ );
12298
+ if (input)
12299
+ input.click();
12300
+ };
12301
+ const isMaxFilesReached = maxFiles !== void 0 && (fieldValue ? fieldValue.length >= maxFiles : false);
12302
+ return /* @__PURE__ */ jsxs(Box, { sx, children: [
12303
+ /* @__PURE__ */ jsx(
12304
+ "input",
12305
+ {
12306
+ id: `file-upload-${name}`,
12307
+ type: "file",
12308
+ accept,
12309
+ multiple,
12310
+ onChange: handleChange,
12311
+ style: { display: "none" }
10193
12312
  }
10194
12313
  ),
10195
12314
  /* @__PURE__ */ jsx(
10196
- Select,
12315
+ Button,
10197
12316
  {
10198
12317
  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"
12318
+ component: "span",
12319
+ disabled: disabled || isMaxFilesReached,
12320
+ onClick: handleClick,
12321
+ startIcon: /* @__PURE__ */ jsx(CloudUploadIcon, { fontSize: "small" }),
12322
+ sx: [
12323
+ {
12324
+ mb: 1,
12325
+ "&:hover": {
12326
+ backgroundColor: "action.hover"
12327
+ }
10218
12328
  },
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))
12329
+ ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
12330
+ ],
12331
+ children: label
10226
12332
  }
10227
12333
  ),
10228
- isTouched === true && fieldError != null && /* @__PURE__ */ jsx(Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
12334
+ fieldValue && fieldValue.length > 0 && /* @__PURE__ */ jsx(Stack, { spacing: 1, sx: { mt: 1 }, children: fieldValue.map((file, index) => /* @__PURE__ */ jsxs(
12335
+ Stack,
12336
+ {
12337
+ direction: "row",
12338
+ alignItems: "center",
12339
+ spacing: 1,
12340
+ sx: {
12341
+ p: 1,
12342
+ border: "1px solid",
12343
+ borderColor: "divider",
12344
+ borderRadius: 1
12345
+ },
12346
+ children: [
12347
+ /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { flex: 1 }, children: file.name }),
12348
+ /* @__PURE__ */ jsx(
12349
+ IconButton,
12350
+ {
12351
+ size: "small",
12352
+ onClick: () => handleRemove(index),
12353
+ disabled,
12354
+ sx: { p: 0.5 },
12355
+ children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
12356
+ }
12357
+ )
12358
+ ]
12359
+ },
12360
+ index
12361
+ )) }),
12362
+ fieldError && /* @__PURE__ */ jsx(
12363
+ Typography,
12364
+ {
12365
+ variant: "caption",
12366
+ color: "error",
12367
+ sx: [
12368
+ {
12369
+ display: "block",
12370
+ mt: 0.5,
12371
+ color: "error.main"
12372
+ },
12373
+ ...Array.isArray(errorSx) ? errorSx : [errorSx]
12374
+ ],
12375
+ children: fieldError
12376
+ }
12377
+ )
10229
12378
  ] });
10230
- }
12379
+ };
12380
+ var AppSimpleUploadFile_default = AppSimpleUploadFile;
10231
12381
 
10232
12382
  // src/file-thumbnail/utils.ts
10233
12383
  var FORMAT_PDF = ["pdf"];
@@ -10354,7 +12504,7 @@ function fileData(file) {
10354
12504
  };
10355
12505
  }
10356
12506
  function DownloadButton({ onDownload }) {
10357
- const theme = useTheme();
12507
+ const theme = useTheme$1();
10358
12508
  return /* @__PURE__ */ jsx(
10359
12509
  IconButton,
10360
12510
  {
@@ -10444,108 +12594,6 @@ function FileThumbnail({
10444
12594
  onDownload && /* @__PURE__ */ jsx(DownloadButton, { onDownload })
10445
12595
  ] });
10446
12596
  }
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
12597
  function RejectionFiles({ fileRejections }) {
10550
12598
  if (!fileRejections.length) {
10551
12599
  return null;
@@ -11009,7 +13057,7 @@ function SingleFilePreview({ file }) {
11009
13057
  );
11010
13058
  }
11011
13059
  function BackgroundIllustration() {
11012
- const theme = useTheme();
13060
+ const theme = useTheme$1();
11013
13061
  const PRIMARY_MAIN = theme.palette.primary.main;
11014
13062
  return /* @__PURE__ */ jsxs(Fragment, { children: [
11015
13063
  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "BG", x1: "19.496%", x2: "77.479%", y1: "71.822%", y2: "16.69%", children: [
@@ -11029,7 +13077,7 @@ function BackgroundIllustration() {
11029
13077
  }
11030
13078
  var BackgroundIllustration_default = memo(BackgroundIllustration);
11031
13079
  function UploadIllustration({ ...other }) {
11032
- const theme = useTheme();
13080
+ const theme = useTheme$1();
11033
13081
  const PRIMARY_MAIN = theme.palette.primary.main;
11034
13082
  const PRIMARY_DARK = theme.palette.primary.dark;
11035
13083
  const PRIMARY_DARKER = theme.palette.primary.dark;
@@ -11749,19 +13797,28 @@ async function blobToBase64(file) {
11749
13797
  };
11750
13798
  });
11751
13799
  }
11752
- var AppUploadFile = ({ name, ...rest }) => {
13800
+ var AppUploadFile = ({
13801
+ name,
13802
+ sx,
13803
+ uploadSx,
13804
+ errorSx,
13805
+ helperTextSx,
13806
+ previewSx,
13807
+ dropZoneSx,
13808
+ ...rest
13809
+ }) => {
11753
13810
  var _a, _b, _c, _d, _e;
11754
13811
  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);
13812
+ const fieldError = _19.get(errors, name);
13813
+ const isTouched = _19.get(touched, name);
13814
+ let val = _19.get(values, name);
11758
13815
  if (((_a = rest.multiple) != null ? _a : false) && typeof val === "string") {
11759
13816
  val = val ? [val] : [];
11760
- } else if (!((_b = rest.multiple) != null ? _b : false) && _17.isArray(val)) {
13817
+ } else if (!((_b = rest.multiple) != null ? _b : false) && _19.isArray(val)) {
11761
13818
  val = val[0];
11762
13819
  }
11763
13820
  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: [
13821
+ return /* @__PURE__ */ jsxs(Box, { sx, children: [
11765
13822
  /* @__PURE__ */ jsx(
11766
13823
  Upload,
11767
13824
  {
@@ -11770,6 +13827,23 @@ var AppUploadFile = ({ name, ...rest }) => {
11770
13827
  files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
11771
13828
  error: Boolean(fieldError) && isTouched,
11772
13829
  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),
13830
+ sx: [{
13831
+ "& .MuiDropzoneArea-root": {
13832
+ minHeight: 200,
13833
+ border: "2px dashed",
13834
+ borderColor: "divider",
13835
+ borderRadius: 1,
13836
+ "&:hover": {
13837
+ borderColor: "primary.main",
13838
+ backgroundColor: "action.hover"
13839
+ },
13840
+ ...dropZoneSx
13841
+ },
13842
+ "& .MuiDropzonePreviewList-root": {
13843
+ ...previewSx
13844
+ },
13845
+ ...uploadSx
13846
+ }],
11773
13847
  onDrop: (fileVal) => {
11774
13848
  (async () => {
11775
13849
  var _a2;
@@ -11804,20 +13878,48 @@ var AppUploadFile = ({ name, ...rest }) => {
11804
13878
  const afterFilter = val.filter((file) => {
11805
13879
  var _a2;
11806
13880
  if ((_a2 = file.file) != null ? _a2 : false) {
11807
- return !_17.isEqual(e, file.file);
13881
+ return !_19.isEqual(e, file.file);
11808
13882
  }
11809
- return !_17.isEqual(e, file);
13883
+ return !_19.isEqual(e, file);
11810
13884
  });
11811
13885
  setFieldValue(name, afterFilter, true);
11812
13886
  }
11813
13887
  }
11814
13888
  ),
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
- ] })
13889
+ Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsx(
13890
+ Typography,
13891
+ {
13892
+ variant: "caption",
13893
+ sx: [{
13894
+ color: "error.main",
13895
+ display: "block",
13896
+ mt: 0.5,
13897
+ ...errorSx
13898
+ }],
13899
+ gutterBottom: true,
13900
+ children: fieldError
13901
+ }
13902
+ ),
13903
+ rest.maxFiles != null && /* @__PURE__ */ jsxs(
13904
+ Typography,
13905
+ {
13906
+ variant: "caption",
13907
+ sx: [{
13908
+ display: "block",
13909
+ color: "text.secondary",
13910
+ mt: 0.5,
13911
+ ...helperTextSx
13912
+ }],
13913
+ gutterBottom: true,
13914
+ children: [
13915
+ "Maximum ",
13916
+ rest.maxFiles,
13917
+ " file",
13918
+ rest.maxFiles !== 1 ? "s" : "",
13919
+ " allowed"
13920
+ ]
13921
+ }
13922
+ )
11821
13923
  ] });
11822
13924
  };
11823
13925
  var AppUploadFile_default = AppUploadFile;
@@ -11825,6 +13927,16 @@ var SubmitButton = ({
11825
13927
  children,
11826
13928
  loading = false,
11827
13929
  disabled = false,
13930
+ fullWidth = false,
13931
+ variant = "contained",
13932
+ color = "primary",
13933
+ size = "medium",
13934
+ startIcon,
13935
+ endIcon,
13936
+ sx,
13937
+ buttonSx,
13938
+ loadingSx,
13939
+ disabledSx,
11828
13940
  ...rest
11829
13941
  }) => {
11830
13942
  const { submitForm, isSubmitting } = useFormikContext();
@@ -11846,13 +13958,43 @@ var SubmitButton = ({
11846
13958
  type: "button",
11847
13959
  onClick: handleClick,
11848
13960
  disabled: isButtonDisabled,
11849
- startIcon: showLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : void 0,
13961
+ fullWidth,
13962
+ variant,
13963
+ color,
13964
+ size,
13965
+ startIcon: showLoading ? /* @__PURE__ */ jsx(
13966
+ CircularProgress,
13967
+ {
13968
+ size: 20,
13969
+ color: "inherit",
13970
+ sx: [
13971
+ {
13972
+ "&.MuiCircularProgress-root": {
13973
+ width: "20px !important",
13974
+ height: "20px !important"
13975
+ }
13976
+ },
13977
+ ...Array.isArray(loadingSx) ? loadingSx : [loadingSx]
13978
+ ]
13979
+ }
13980
+ ) : startIcon,
13981
+ endIcon,
13982
+ sx: [
13983
+ {
13984
+ position: "relative",
13985
+ "&.Mui-disabled": {
13986
+ ...disabledSx
13987
+ },
13988
+ ...buttonSx
13989
+ },
13990
+ ...Array.isArray(sx) ? sx : [sx]
13991
+ ],
11850
13992
  children
11851
13993
  }
11852
13994
  );
11853
13995
  };
11854
13996
  var SubmitButton_default = SubmitButton;
11855
13997
 
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 };
13998
+ 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
13999
  //# sourceMappingURL=out.js.map
11858
14000
  //# sourceMappingURL=index.mjs.map