formik-form-components 0.2.11 → 0.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +659 -67
  2. package/dist/index.js +2975 -804
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +3004 -834
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,22 +1,22 @@
1
1
  'use strict';
2
2
 
3
3
  var formik = require('formik');
4
+ var react = require('react');
4
5
  var material = require('@mui/material');
5
6
  var DatePicker = require('@mui/x-date-pickers/DatePicker');
6
7
  var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
7
8
  var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
9
+ var dayjs = require('dayjs');
8
10
  var demo = require('@mui/x-date-pickers/internals/demo');
11
+ var _19 = require('lodash');
9
12
  var jsxRuntime = require('react/jsx-runtime');
10
13
  var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
11
- var _17 = require('lodash');
12
- var react = require('react');
13
14
  var Autocomplete3 = require('@mui/material/Autocomplete');
14
- var Typography9 = require('@mui/material/Typography');
15
+ var Typography10 = require('@mui/material/Typography');
15
16
  var react$1 = require('@iconify/react');
16
17
  var Select = require('@mui/material/Select');
17
18
  var PhoneInput = require('react-phone-input-2');
18
19
  require('react-phone-input-2/lib/style.css');
19
- var colors = require('@mui/material/colors');
20
20
  var react$2 = require('@tiptap/react');
21
21
  var StarterKit = require('@tiptap/starter-kit');
22
22
  var Link = require('@tiptap/extension-link');
@@ -31,9 +31,10 @@ var FormatAlignLeftIcon = require('@mui/icons-material/FormatAlignLeft');
31
31
  var FormatAlignCenterIcon = require('@mui/icons-material/FormatAlignCenter');
32
32
  var FormatAlignRightIcon = require('@mui/icons-material/FormatAlignRight');
33
33
  var TitleIcon = require('@mui/icons-material/Title');
34
- var LinkIcon = require('@mui/icons-material/Link');
35
34
  var UndoIcon = require('@mui/icons-material/Undo');
36
35
  var RedoIcon = require('@mui/icons-material/Redo');
36
+ var CloudUploadIcon = require('@mui/icons-material/CloudUpload');
37
+ var CloseIcon = require('@mui/icons-material/Close');
37
38
  var styles = require('@mui/material/styles');
38
39
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
39
40
  var framerMotion = require('framer-motion');
@@ -42,9 +43,9 @@ var reactI18next = require('react-i18next');
42
43
 
43
44
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
44
45
 
45
- var _17__default = /*#__PURE__*/_interopDefault(_17);
46
+ var _19__default = /*#__PURE__*/_interopDefault(_19);
46
47
  var Autocomplete3__default = /*#__PURE__*/_interopDefault(Autocomplete3);
47
- var Typography9__default = /*#__PURE__*/_interopDefault(Typography9);
48
+ var Typography10__default = /*#__PURE__*/_interopDefault(Typography10);
48
49
  var Select__default = /*#__PURE__*/_interopDefault(Select);
49
50
  var PhoneInput__default = /*#__PURE__*/_interopDefault(PhoneInput);
50
51
  var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
@@ -60,261 +61,875 @@ var FormatAlignLeftIcon__default = /*#__PURE__*/_interopDefault(FormatAlignLeftI
60
61
  var FormatAlignCenterIcon__default = /*#__PURE__*/_interopDefault(FormatAlignCenterIcon);
61
62
  var FormatAlignRightIcon__default = /*#__PURE__*/_interopDefault(FormatAlignRightIcon);
62
63
  var TitleIcon__default = /*#__PURE__*/_interopDefault(TitleIcon);
63
- var LinkIcon__default = /*#__PURE__*/_interopDefault(LinkIcon);
64
64
  var UndoIcon__default = /*#__PURE__*/_interopDefault(UndoIcon);
65
65
  var RedoIcon__default = /*#__PURE__*/_interopDefault(RedoIcon);
66
+ var CloudUploadIcon__default = /*#__PURE__*/_interopDefault(CloudUploadIcon);
67
+ var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
66
68
 
67
69
  // src/Form/index.tsx
68
- var AppDatePicker = ({
69
- name,
70
- label,
71
- required,
72
- disablePast,
73
- ...otherProps
74
- }) => {
75
- const theme = material.useTheme();
76
- const { values, setFieldValue, touched, errors } = formik.useFormikContext();
77
- const fieldValue = values[name];
78
- const fieldError = errors[name];
79
- const fieldTouched = touched[name];
80
- const textFieldSx = {
81
- "& .MuiOutlinedInput-root": {
82
- backgroundColor: theme.palette.common.white,
83
- color: theme.palette.text.secondary,
84
- "&.Mui-focused": {
85
- "& .MuiOutlinedInput-notchedOutline": {
86
- borderColor: theme.palette.primary.main
87
- }
88
- },
89
- ...fieldTouched && fieldError ? {
90
- backgroundColor: "#FFF2EF",
91
- "& .MuiOutlinedInput-input": {
92
- color: "#FF5A35"
93
- }
94
- } : {}
95
- },
96
- "& .MuiOutlinedInput-notchedOutline": {
97
- borderColor: fieldTouched && fieldError ? "#FF5630" : theme.palette.grey[400]
98
- },
99
- "&:hover .MuiOutlinedInput-notchedOutline": {
100
- borderColor: fieldTouched && fieldError ? "#FF5630" : theme.palette.primary.main
101
- }
102
- };
103
- return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { spacing: 1, children: [
104
- /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "button", sx: { color: theme.palette.text.primary, mb: 1, display: "block" }, children: [
105
- label,
106
- required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
107
- ] }),
108
- /* @__PURE__ */ jsxRuntime.jsx(demo.DemoContainer, { components: ["DatePicker"], children: /* @__PURE__ */ jsxRuntime.jsx(
70
+ var AppDatePicker = react.forwardRef(
71
+ ({
72
+ name,
73
+ label,
74
+ required = false,
75
+ disabled = false,
76
+ variant = "outlined",
77
+ showIcon = true,
78
+ format = "DD/MM/YYYY",
79
+ sx,
80
+ formControlSx,
81
+ textFieldSx,
82
+ labelSx,
83
+ inputSx,
84
+ errorSx,
85
+ iconSx,
86
+ onChange: externalOnChange,
87
+ onBlur: externalOnBlur,
88
+ ...otherProps
89
+ }, ref) => {
90
+ const { values, setFieldValue, touched, errors, setFieldTouched } = formik.useFormikContext();
91
+ const fieldValue = _19__default.default.get(values, name);
92
+ const fieldError = _19__default.default.get(errors, name);
93
+ const isTouched = _19__default.default.get(touched, name);
94
+ const handleChange = (newValue, context) => {
95
+ setFieldValue(name, newValue);
96
+ if (externalOnChange) {
97
+ externalOnChange(newValue, context);
98
+ }
99
+ };
100
+ const handleBlur = (event) => {
101
+ setFieldTouched(name, true);
102
+ if (externalOnBlur) {
103
+ externalOnBlur(event);
104
+ }
105
+ };
106
+ return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsx(demo.DemoContainer, { components: ["DatePicker"], children: /* @__PURE__ */ jsxRuntime.jsx(
109
107
  DatePicker.DatePicker,
110
108
  {
111
- value: fieldValue ? new Date(fieldValue) : null,
112
- disablePast,
113
- onChange: (newValue) => {
114
- setFieldValue(name, newValue || "");
115
- },
109
+ label,
110
+ value: fieldValue ? fieldValue instanceof dayjs.Dayjs ? fieldValue : null : null,
111
+ onChange: handleChange,
112
+ format,
113
+ disabled,
116
114
  slotProps: {
117
115
  textField: {
118
116
  fullWidth: true,
119
- variant: "outlined",
120
- error: fieldTouched && Boolean(fieldError),
121
- sx: textFieldSx,
122
- helperText: fieldTouched && fieldError ? fieldError : void 0,
123
- FormHelperTextProps: {
124
- sx: {
125
- color: "error.main",
126
- marginLeft: 0,
127
- marginTop: 0.5
117
+ variant,
118
+ error: isTouched && Boolean(fieldError),
119
+ helperText: isTouched && fieldError ? fieldError : void 0,
120
+ onBlur: handleBlur,
121
+ sx: [
122
+ {
123
+ "& .MuiOutlinedInput-root": {
124
+ backgroundColor: "background.paper",
125
+ "&.Mui-focused": {
126
+ "& .MuiOutlinedInput-notchedOutline": {
127
+ borderColor: "primary.main"
128
+ }
129
+ },
130
+ "&.Mui-error": {
131
+ backgroundColor: "error.lighter",
132
+ "& .MuiOutlinedInput-input": {
133
+ color: "error.main"
134
+ }
135
+ },
136
+ "&.Mui-disabled": {
137
+ backgroundColor: "action.disabledBackground",
138
+ "& .MuiOutlinedInput-notchedOutline": {
139
+ borderColor: "action.disabled"
140
+ }
141
+ },
142
+ ...inputSx
143
+ },
144
+ "& .MuiOutlinedInput-notchedOutline": {
145
+ borderColor: isTouched && fieldError ? "error.main" : "divider"
146
+ },
147
+ "&:hover .MuiOutlinedInput-notchedOutline": {
148
+ borderColor: isTouched && fieldError ? "error.main" : "primary.main"
149
+ },
150
+ ...textFieldSx
128
151
  }
152
+ ],
153
+ FormHelperTextProps: {
154
+ sx: [
155
+ {
156
+ color: "error.main",
157
+ mx: 0,
158
+ mt: 0.5,
159
+ ...errorSx
160
+ }
161
+ ]
162
+ },
163
+ InputLabelProps: {
164
+ sx: [
165
+ {
166
+ color: "text.secondary",
167
+ "&.Mui-focused": {
168
+ color: "primary.main"
169
+ },
170
+ "&.Mui-error": {
171
+ color: "error.main"
172
+ },
173
+ ...labelSx
174
+ }
175
+ ]
176
+ },
177
+ InputProps: {
178
+ endAdornment: showIcon ? /* @__PURE__ */ jsxRuntime.jsx(
179
+ material.Box,
180
+ {
181
+ component: "span",
182
+ sx: [
183
+ {
184
+ color: "text.secondary",
185
+ "&:hover": {
186
+ color: "primary.main"
187
+ },
188
+ "&.Mui-disabled": {
189
+ color: "action.disabled"
190
+ },
191
+ ...iconSx
192
+ }
193
+ ]
194
+ }
195
+ ) : null
129
196
  }
130
197
  }
131
198
  },
132
199
  ...otherProps
133
200
  }
134
- ) }),
135
- fieldTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", sx: { mt: 0.5, display: "none" }, children: fieldError })
136
- ] }) });
137
- };
201
+ ) }) }) });
202
+ }
203
+ );
204
+ AppDatePicker.displayName = "AppDatePicker";
138
205
  var AppDatePicker_default = AppDatePicker;
139
- var AppDateAndTimePicker = ({ name, label, required, ...otherProps }) => {
206
+ var AppDateAndTimePicker = react.forwardRef((props, ref) => {
207
+ const {
208
+ name,
209
+ label,
210
+ required = false,
211
+ disabled = false,
212
+ minDate = null,
213
+ maxDate = null,
214
+ format = "DD/MM/YYYY hh:mm A",
215
+ variant = "outlined",
216
+ sx,
217
+ formControlSx,
218
+ textFieldSx,
219
+ labelSx,
220
+ inputSx,
221
+ errorSx,
222
+ helperTextSx,
223
+ showHelperText = false,
224
+ helperText,
225
+ onChange: externalOnChange,
226
+ onBlur,
227
+ ...otherProps
228
+ } = props;
140
229
  const theme = material.useTheme();
141
- const { errors, touched, values, setFieldValue } = formik.useFormikContext();
142
- const fieldError = _17.get(errors, name);
143
- const isTouched = _17.get(touched, name);
144
- const val = _17.get(values, name);
145
- const textFieldSx = {
230
+ const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
231
+ const fieldError = _19.get(errors, name);
232
+ const isTouched = _19.get(touched, name);
233
+ const val = _19.get(values, name);
234
+ const handleChange = (value) => {
235
+ setFieldValue(name, value);
236
+ if (externalOnChange) {
237
+ externalOnChange(value);
238
+ }
239
+ };
240
+ const handleBlur = () => {
241
+ setFieldTouched(name, true);
242
+ };
243
+ const handleTextFieldBlur = (event) => {
244
+ handleBlur();
245
+ if (onBlur) {
246
+ onBlur(event);
247
+ }
248
+ };
249
+ const sxArray = sx ? Array.isArray(sx) ? sx : [sx] : [];
250
+ const formControlSxArray = formControlSx ? Array.isArray(formControlSx) ? formControlSx : [formControlSx] : [];
251
+ const labelSxArray = labelSx ? Array.isArray(labelSx) ? labelSx : [labelSx] : [];
252
+ const textFieldSxArray = textFieldSx ? Array.isArray(textFieldSx) ? textFieldSx : [textFieldSx] : [];
253
+ const helperTextSxArray = helperTextSx ? Array.isArray(helperTextSx) ? helperTextSx : [helperTextSx] : [];
254
+ const errorSxArray = errorSx ? Array.isArray(errorSx) ? errorSx : [errorSx] : [];
255
+ const baseTextFieldSx = {
146
256
  "& .MuiOutlinedInput-root": {
147
- backgroundColor: theme.palette.common.white,
148
- color: theme.palette.text.secondary,
257
+ backgroundColor: "background.paper",
258
+ color: "text.primary",
149
259
  "&.Mui-focused": {
150
260
  "& .MuiOutlinedInput-notchedOutline": {
151
- borderColor: theme.palette.primary.main
261
+ borderColor: "primary.main"
152
262
  }
153
263
  },
154
- ...isTouched && fieldError ? {
155
- backgroundColor: "#FFF2EF",
264
+ "&.Mui-error": {
265
+ backgroundColor: `${theme.palette.error.light}15`,
156
266
  "& .MuiOutlinedInput-input": {
157
- color: "#FF5A35"
267
+ color: "error.main"
268
+ }
269
+ },
270
+ "&.Mui-disabled": {
271
+ backgroundColor: "action.disabledBackground",
272
+ "& .MuiOutlinedInput-notchedOutline": {
273
+ borderColor: "action.disabled"
158
274
  }
159
- } : {}
275
+ },
276
+ ...inputSx
160
277
  },
161
278
  "& .MuiOutlinedInput-notchedOutline": {
162
- borderColor: isTouched && fieldError ? "#FF5630" : theme.palette.grey[400]
279
+ borderColor: isTouched && fieldError ? "error.main" : "divider"
163
280
  },
164
281
  "&:hover .MuiOutlinedInput-notchedOutline": {
165
- borderColor: isTouched && fieldError ? "#FF5630" : theme.palette.primary.main
282
+ borderColor: isTouched && fieldError ? theme.palette.error.main : theme.palette.primary.main
166
283
  }
167
284
  };
168
- return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", children: [
169
- /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(demo.DemoContainer, { components: ["DateTimePicker"], children: /* @__PURE__ */ jsxRuntime.jsx(
170
- DateTimePicker.DateTimePicker,
171
- {
172
- value: val ? new Date(val) : null,
173
- label,
174
- onChange: (newValue) => {
175
- setFieldValue(name, newValue || "", true);
176
- },
177
- slotProps: {
178
- textField: {
179
- fullWidth: true,
180
- error: isTouched && Boolean(fieldError),
181
- sx: textFieldSx,
182
- variant: "outlined",
183
- helperText: isTouched && fieldError ? fieldError : void 0,
184
- FormHelperTextProps: {
185
- sx: {
186
- color: "error.main",
187
- marginLeft: 0,
188
- marginTop: 0.5
189
- }
285
+ const textFieldHelperText = isTouched && fieldError ? fieldError : showHelperText && helperText ? helperText : "";
286
+ const showFormHelperText = showHelperText && helperText && !(isTouched && fieldError);
287
+ return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: sxArray, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
288
+ material.FormControl,
289
+ {
290
+ fullWidth: true,
291
+ error: isTouched && Boolean(fieldError),
292
+ disabled,
293
+ sx: [
294
+ {
295
+ "& .MuiInputLabel-root": {
296
+ "&.Mui-focused": {
297
+ color: "primary.main"
298
+ },
299
+ "&.Mui-error": {
300
+ color: "error.main"
301
+ },
302
+ "&.Mui-disabled": {
303
+ color: "text.disabled"
190
304
  }
191
305
  }
192
306
  },
193
- ...otherProps
194
- }
195
- ) }) }),
196
- isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", sx: { mt: 0.5, display: "none" }, children: fieldError })
197
- ] });
198
- };
307
+ ...formControlSxArray
308
+ ],
309
+ children: [
310
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
311
+ material.Typography,
312
+ {
313
+ variant: "subtitle2",
314
+ sx: [
315
+ {
316
+ mb: 1,
317
+ color: isTouched && fieldError ? "error.main" : "text.primary",
318
+ "&.Mui-disabled": {
319
+ color: "text.disabled"
320
+ }
321
+ },
322
+ ...labelSxArray
323
+ ],
324
+ children: [
325
+ label,
326
+ required && /* @__PURE__ */ jsxRuntime.jsx(
327
+ material.Typography,
328
+ {
329
+ component: "span",
330
+ sx: {
331
+ color: "error.main",
332
+ ml: 0.5
333
+ },
334
+ children: "*"
335
+ }
336
+ )
337
+ ]
338
+ }
339
+ ),
340
+ /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(
341
+ DateTimePicker.DateTimePicker,
342
+ {
343
+ value: val,
344
+ onChange: handleChange,
345
+ minDate,
346
+ maxDate,
347
+ format,
348
+ disabled,
349
+ slotProps: {
350
+ textField: {
351
+ fullWidth: true,
352
+ variant,
353
+ error: isTouched && Boolean(fieldError),
354
+ helperText: textFieldHelperText,
355
+ onBlur: handleTextFieldBlur,
356
+ sx: [baseTextFieldSx, ...textFieldSxArray],
357
+ placeholder: otherProps.placeholder,
358
+ ...otherProps
359
+ },
360
+ actionBar: {
361
+ actions: ["clear", "today"]
362
+ }
363
+ },
364
+ ...otherProps
365
+ }
366
+ ) }),
367
+ showFormHelperText && /* @__PURE__ */ jsxRuntime.jsx(
368
+ material.FormHelperText,
369
+ {
370
+ sx: [
371
+ {
372
+ mx: 0,
373
+ mt: 0.5,
374
+ color: "text.secondary"
375
+ },
376
+ ...helperTextSxArray
377
+ ],
378
+ children: helperText
379
+ }
380
+ ),
381
+ isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
382
+ material.FormHelperText,
383
+ {
384
+ sx: [
385
+ {
386
+ mx: 0,
387
+ mt: 0.5,
388
+ color: "error.main"
389
+ },
390
+ ...errorSxArray
391
+ ],
392
+ children: fieldError
393
+ }
394
+ )
395
+ ]
396
+ }
397
+ ) });
398
+ });
399
+ AppDateAndTimePicker.displayName = "AppDateAndTimePicker";
199
400
  var AppDateAndTimePicker_default = AppDateAndTimePicker;
200
- function AppFormErrorMessage({ name, alwaysShow = false }) {
401
+ function AppFormErrorMessage({
402
+ name,
403
+ alwaysShow = false,
404
+ sx,
405
+ containerSx,
406
+ textSx
407
+ }) {
201
408
  const { errors, touched } = formik.useFormikContext();
202
- const fieldError = _17__default.default.get(errors, name);
203
- const isTouched = _17__default.default.get(touched, name);
409
+ const fieldError = _19__default.default.get(errors, name);
410
+ const isTouched = _19__default.default.get(touched, name);
204
411
  const showError = fieldError && typeof fieldError === "string";
205
412
  if (alwaysShow) {
206
- return showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: fieldError }) }) }) : null;
413
+ return showError ? /* @__PURE__ */ jsxRuntime.jsx(
414
+ material.Box,
415
+ {
416
+ sx: [{
417
+ mt: 0.5,
418
+ ...containerSx
419
+ }, sx],
420
+ children: /* @__PURE__ */ jsxRuntime.jsx(
421
+ material.Typography,
422
+ {
423
+ variant: "caption",
424
+ color: "error",
425
+ sx: [{
426
+ fontSize: "0.75rem",
427
+ display: "block",
428
+ ...textSx
429
+ }],
430
+ children: fieldError
431
+ }
432
+ )
433
+ }
434
+ ) : null;
207
435
  }
208
436
  if (isTouched && showError) {
209
- return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: fieldError }) }) });
437
+ return /* @__PURE__ */ jsxRuntime.jsx(
438
+ material.Box,
439
+ {
440
+ sx: [{
441
+ mt: 0.5,
442
+ ...containerSx
443
+ }, sx],
444
+ children: /* @__PURE__ */ jsxRuntime.jsx(
445
+ material.Typography,
446
+ {
447
+ variant: "caption",
448
+ color: "error",
449
+ sx: [{
450
+ fontSize: "0.75rem",
451
+ display: "block",
452
+ ...textSx
453
+ }],
454
+ children: fieldError
455
+ }
456
+ )
457
+ }
458
+ );
210
459
  }
211
460
  return null;
212
461
  }
213
462
  var AppFormErrorMessage_default = AppFormErrorMessage;
214
- function AppTextArea({ name, label }) {
215
- const { errors, getFieldProps, touched } = formik.useFormikContext();
216
- const fieldError = _17__default.default.get(errors, name);
217
- const isTouched = _17__default.default.get(touched, name);
218
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
463
+ var AppTextArea = react.forwardRef(({
464
+ name,
465
+ label,
466
+ placeholder = "Enter text...",
467
+ variant = "outlined",
468
+ rows = 4,
469
+ maxLength,
470
+ required = false,
471
+ disabled = false,
472
+ readOnly = false,
473
+ showCount = false,
474
+ sx,
475
+ textFieldSx,
476
+ labelSx,
477
+ inputSx,
478
+ errorSx,
479
+ counterSx,
480
+ onChange,
481
+ onFocus,
482
+ onBlur,
483
+ ...rest
484
+ }, ref) => {
485
+ var _a, _b, _c, _d;
486
+ const { errors, getFieldProps, touched, setFieldValue } = formik.useFormikContext();
487
+ const fieldError = _19__default.default.get(errors, name);
488
+ const isTouched = _19__default.default.get(touched, name);
489
+ const value = _19__default.default.get(getFieldProps(name), "value", "");
490
+ const handleChange = (e) => {
491
+ const newValue = e.target.value;
492
+ if (maxLength && newValue.length > maxLength)
493
+ return;
494
+ if (onChange) {
495
+ onChange(newValue);
496
+ }
497
+ setFieldValue(name, newValue);
498
+ };
499
+ const handleFocus = (e) => {
500
+ if (onFocus)
501
+ onFocus(e);
502
+ };
503
+ const handleBlur = (e) => {
504
+ if (onBlur)
505
+ onBlur(e);
506
+ };
507
+ const characterCount = (value == null ? void 0 : value.length) || 0;
508
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, ref, children: [
219
509
  /* @__PURE__ */ jsxRuntime.jsx(
220
510
  material.TextField,
221
511
  {
222
512
  ...getFieldProps(name),
223
513
  fullWidth: true,
224
- sx: { width: "100%" },
225
- placeholder: "Description",
514
+ variant,
226
515
  multiline: true,
227
- rows: 4,
516
+ rows,
517
+ placeholder,
518
+ disabled,
519
+ inputProps: {
520
+ maxLength,
521
+ readOnly,
522
+ ...rest.inputProps
523
+ },
524
+ InputProps: {
525
+ ...rest.InputProps,
526
+ sx: [{
527
+ "& .MuiOutlinedInput-notchedOutline": {
528
+ borderColor: "divider"
529
+ },
530
+ "&:hover .MuiOutlinedInput-notchedOutline": {
531
+ borderColor: "primary.main"
532
+ },
533
+ "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
534
+ borderColor: "primary.main"
535
+ },
536
+ "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
537
+ borderColor: "action.disabled"
538
+ },
539
+ ...inputSx
540
+ }, ...Array.isArray((_a = rest.InputProps) == null ? void 0 : _a.sx) ? rest.InputProps.sx : [(_b = rest.InputProps) == null ? void 0 : _b.sx]]
541
+ },
542
+ FormHelperTextProps: {
543
+ ...rest.FormHelperTextProps,
544
+ sx: [{
545
+ m: 0,
546
+ mt: 0.5,
547
+ ...errorSx
548
+ }, ...Array.isArray((_c = rest.FormHelperTextProps) == null ? void 0 : _c.sx) ? rest.FormHelperTextProps.sx : [(_d = rest.FormHelperTextProps) == null ? void 0 : _d.sx]]
549
+ },
550
+ label: label && /* @__PURE__ */ jsxRuntime.jsxs(
551
+ material.Typography,
552
+ {
553
+ variant: "body2",
554
+ component: "span",
555
+ sx: [{
556
+ color: "text.primary",
557
+ ...disabled && {
558
+ color: "text.disabled"
559
+ }
560
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
561
+ children: [
562
+ label,
563
+ required && /* @__PURE__ */ jsxRuntime.jsx(
564
+ material.Typography,
565
+ {
566
+ component: "span",
567
+ sx: {
568
+ color: "error.main",
569
+ ml: 0.5
570
+ },
571
+ children: "*"
572
+ }
573
+ )
574
+ ]
575
+ }
576
+ ),
228
577
  error: Boolean(fieldError) && isTouched,
229
- label: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", component: "p", children: [
230
- label,
231
- " ",
232
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
233
- ] })
578
+ helperText: isTouched && fieldError,
579
+ onChange: handleChange,
580
+ onFocus: handleFocus,
581
+ onBlur: handleBlur,
582
+ sx: [{
583
+ "& .MuiOutlinedInput-root": {
584
+ backgroundColor: "background.paper",
585
+ "&:hover .MuiOutlinedInput-notchedOutline": {
586
+ borderColor: "primary.main"
587
+ }
588
+ },
589
+ "& .MuiInputBase-input": {
590
+ color: "text.primary"
591
+ },
592
+ "& .MuiInputLabel-root": {
593
+ color: "text.secondary",
594
+ "&.Mui-focused": {
595
+ color: "primary.main"
596
+ }
597
+ },
598
+ ...textFieldSx
599
+ }, ...Array.isArray(rest.sx) ? rest.sx : [rest.sx]],
600
+ ...rest
234
601
  }
235
602
  ),
236
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", sx: { ml: "0 !important" }, variant: "caption", display: "block", gutterBottom: true, children: fieldError })
603
+ (showCount || maxLength) && /* @__PURE__ */ jsxRuntime.jsxs(
604
+ material.Typography,
605
+ {
606
+ variant: "caption",
607
+ sx: [{
608
+ display: "block",
609
+ textAlign: "right",
610
+ mt: 0.5,
611
+ color: "text.secondary",
612
+ ...maxLength && characterCount > maxLength * 0.9 && {
613
+ color: "error.main"
614
+ }
615
+ }, ...Array.isArray(counterSx) ? counterSx : [counterSx]],
616
+ children: [
617
+ characterCount,
618
+ maxLength ? ` / ${maxLength}` : ""
619
+ ]
620
+ }
621
+ )
237
622
  ] });
238
- }
623
+ });
624
+ AppTextArea.displayName = "AppTextArea";
625
+ var AppTextArea_default = AppTextArea;
239
626
  function AppTagsCreator({
240
627
  placeholder,
241
628
  name,
242
629
  multiple,
243
630
  label,
244
631
  options = [],
245
- disabled
632
+ disabled,
633
+ sx,
634
+ formControlSx,
635
+ textFieldSx,
636
+ chipSx,
637
+ listboxSx,
638
+ errorSx,
639
+ chipContainerSx,
640
+ inputSx
246
641
  }) {
247
642
  const { errors, touched, getFieldProps, values, setFieldValue, setTouched } = formik.useFormikContext();
248
- const fieldError = _17__default.default.get(errors, name);
249
- const isTouched = _17__default.default.get(touched, name);
250
- const val = _17__default.default.get(values, name);
251
- return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", children: [
252
- /* @__PURE__ */ jsxRuntime.jsx(
253
- material.Autocomplete,
254
- {
255
- ...getFieldProps(name),
256
- multiple,
257
- id: "tags-filled",
258
- options,
259
- disabled,
260
- autoHighlight: true,
261
- freeSolo: true,
262
- onBlur: (event) => setFieldValue(name, event.target.value, true),
263
- renderTags: (value, getTagProps) => value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ react.createElement(material.Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index })),
264
- value: val,
265
- onChange: (event, newValue) => {
266
- setTouched({ ...touched, [name]: true });
267
- setFieldValue(name, newValue, true);
268
- },
269
- renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...params, variant: "filled", label, placeholder })
270
- }
271
- ),
272
- fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
273
- ] });
643
+ const fieldError = _19__default.default.get(errors, name);
644
+ const isTouched = _19__default.default.get(touched, name);
645
+ const val = _19__default.default.get(values, name);
646
+ return /* @__PURE__ */ jsxRuntime.jsxs(
647
+ material.FormControl,
648
+ {
649
+ fullWidth: true,
650
+ variant: "filled",
651
+ sx: formControlSx,
652
+ children: [
653
+ /* @__PURE__ */ jsxRuntime.jsx(
654
+ material.Autocomplete,
655
+ {
656
+ ...getFieldProps(name),
657
+ multiple,
658
+ id: "tags-filled",
659
+ options,
660
+ disabled,
661
+ autoHighlight: true,
662
+ freeSolo: true,
663
+ onBlur: (event) => setFieldValue(name, event.target.value, true),
664
+ renderTags: (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
665
+ display: "flex",
666
+ flexWrap: "wrap",
667
+ gap: 0.5,
668
+ ...chipContainerSx
669
+ }, children: value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ react.createElement(
670
+ material.Chip,
671
+ {
672
+ variant: "outlined",
673
+ label: option,
674
+ ...getTagProps({ index }),
675
+ key: index,
676
+ sx: {
677
+ "& .MuiChip-deleteIcon": {
678
+ color: "text.secondary",
679
+ "&:hover": {
680
+ color: "error.main"
681
+ }
682
+ },
683
+ ...chipSx
684
+ }
685
+ }
686
+ )) }),
687
+ value: val,
688
+ onChange: (event, newValue) => {
689
+ setTouched({ ...touched, [name]: true });
690
+ setFieldValue(name, newValue, true);
691
+ },
692
+ renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
693
+ material.TextField,
694
+ {
695
+ ...params,
696
+ variant: "filled",
697
+ label,
698
+ placeholder,
699
+ sx: {
700
+ "& .MuiFilledInput-root": {
701
+ backgroundColor: "background.paper",
702
+ "&:hover": {
703
+ backgroundColor: "action.hover"
704
+ },
705
+ "&.Mui-focused": {
706
+ backgroundColor: "background.paper"
707
+ }
708
+ },
709
+ ...textFieldSx
710
+ },
711
+ InputProps: {
712
+ ...params.InputProps,
713
+ sx: inputSx
714
+ }
715
+ }
716
+ ),
717
+ sx: {
718
+ "& .MuiAutocomplete-listbox": {
719
+ "& li": {
720
+ '&[data-focus="true"]': {
721
+ backgroundColor: "action.hover"
722
+ },
723
+ '&[aria-selected="true"]': {
724
+ backgroundColor: "action.selected"
725
+ },
726
+ '&[aria-selected="true"].Mui-focused': {
727
+ backgroundColor: "action.hover"
728
+ }
729
+ },
730
+ ...listboxSx
731
+ },
732
+ ...sx
733
+ }
734
+ }
735
+ ),
736
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(
737
+ material.Typography,
738
+ {
739
+ variant: "caption",
740
+ sx: [{
741
+ color: "error.main",
742
+ display: "block",
743
+ mt: 0.5,
744
+ ...errorSx
745
+ }],
746
+ gutterBottom: true,
747
+ children: fieldError
748
+ }
749
+ )
750
+ ]
751
+ }
752
+ );
274
753
  }
275
754
  function AppSwitchInput({
276
755
  name,
277
756
  label,
278
757
  className = "",
279
- style = {},
280
- inputStyle = {},
758
+ sx,
759
+ containerSx,
760
+ switchSx,
761
+ labelSx,
762
+ errorSx,
763
+ labelPlacement = "start",
764
+ disabled = false,
281
765
  ...otherProps
282
766
  }) {
283
767
  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
284
- const hasError = Boolean(touched == null ? void 0 : touched[name]) && Boolean(errors[name]);
285
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `my-2 ${className} d-flex `, style, children: [
286
- label != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "text.primary", children: label }),
287
- /* @__PURE__ */ jsxRuntime.jsx(
288
- material.Switch,
289
- {
290
- id: name,
291
- checked: Boolean(values[name]),
292
- onChange: () => void setFieldValue(name, values[name] === false ? true : false),
293
- style: inputStyle,
294
- ...otherProps
295
- }
296
- ),
297
- hasError && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: errors[name] })
298
- ] });
768
+ const fieldError = _19__default.default.get(errors, name);
769
+ const isTouched = _19__default.default.get(touched, name);
770
+ return /* @__PURE__ */ jsxRuntime.jsxs(
771
+ material.Box,
772
+ {
773
+ className,
774
+ sx: [{
775
+ display: "flex",
776
+ flexDirection: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
777
+ alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
778
+ justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
779
+ gap: 1,
780
+ my: 1,
781
+ ...containerSx
782
+ }, sx],
783
+ children: [
784
+ label && /* @__PURE__ */ jsxRuntime.jsx(
785
+ material.Typography,
786
+ {
787
+ variant: "body2",
788
+ sx: [{
789
+ color: "text.primary",
790
+ order: labelPlacement === "start" ? 0 : 1,
791
+ ...labelSx
792
+ }],
793
+ children: label
794
+ }
795
+ ),
796
+ /* @__PURE__ */ jsxRuntime.jsx(
797
+ material.Switch,
798
+ {
799
+ id: name,
800
+ checked: Boolean(values[name]),
801
+ disabled,
802
+ onChange: () => {
803
+ setFieldValue(name, !values[name], true);
804
+ },
805
+ sx: [{
806
+ "& .MuiSwitch-switchBase": {
807
+ color: "text.secondary",
808
+ "&.Mui-checked": {
809
+ color: "primary.main",
810
+ "& + .MuiSwitch-track": {
811
+ backgroundColor: "primary.main",
812
+ opacity: 0.5
813
+ }
814
+ },
815
+ "&.Mui-disabled": {
816
+ color: "action.disabled",
817
+ "& + .MuiSwitch-track": {
818
+ backgroundColor: "action.disabledBackground"
819
+ }
820
+ }
821
+ },
822
+ ...switchSx
823
+ }],
824
+ ...otherProps
825
+ }
826
+ ),
827
+ isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(
828
+ material.Typography,
829
+ {
830
+ variant: "caption",
831
+ sx: [{
832
+ color: "error.main",
833
+ display: "block",
834
+ mt: 0.5,
835
+ ...errorSx
836
+ }],
837
+ gutterBottom: true,
838
+ children: fieldError
839
+ }
840
+ )
841
+ ]
842
+ }
843
+ );
299
844
  }
300
- function AppSwitch({ name, label }) {
845
+ function AppSwitch({
846
+ name,
847
+ label,
848
+ sx,
849
+ containerSx,
850
+ switchSx,
851
+ labelSx,
852
+ errorSx,
853
+ labelPlacement = "start",
854
+ disabled = false,
855
+ ...otherProps
856
+ }) {
301
857
  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
302
- const fieldValue = _17__default.default.get(values, name);
303
- const fieldError = _17__default.default.get(errors, name);
304
- const isTouched = _17__default.default.get(touched, name);
305
- return /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row-reverse", alignItems: "center", spacing: 1, children: [
306
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: label }),
307
- /* @__PURE__ */ jsxRuntime.jsx(
308
- material.Switch,
309
- {
310
- checked: fieldValue,
311
- onChange: () => {
312
- setFieldValue(name, !fieldValue, true);
313
- }
314
- }
315
- ),
316
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
317
- ] });
858
+ const fieldValue = _19__default.default.get(values, name);
859
+ const fieldError = _19__default.default.get(errors, name);
860
+ const isTouched = _19__default.default.get(touched, name);
861
+ return /* @__PURE__ */ jsxRuntime.jsxs(
862
+ material.Stack,
863
+ {
864
+ direction: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
865
+ alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
866
+ justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
867
+ spacing: 1,
868
+ sx: [{
869
+ width: "100%",
870
+ ...labelPlacement === "top" || labelPlacement === "bottom" ? { alignItems: "flex-start" } : {},
871
+ ...containerSx
872
+ }, sx],
873
+ children: [
874
+ /* @__PURE__ */ jsxRuntime.jsx(
875
+ material.Typography,
876
+ {
877
+ variant: "body2",
878
+ sx: [{
879
+ color: "text.primary",
880
+ order: labelPlacement === "start" ? 0 : 1,
881
+ ...labelSx
882
+ }],
883
+ children: label
884
+ }
885
+ ),
886
+ /* @__PURE__ */ jsxRuntime.jsx(
887
+ material.Switch,
888
+ {
889
+ checked: fieldValue,
890
+ disabled,
891
+ onChange: () => {
892
+ setFieldValue(name, !fieldValue, true);
893
+ },
894
+ sx: [{
895
+ "& .MuiSwitch-switchBase": {
896
+ color: "text.secondary",
897
+ "&.Mui-checked": {
898
+ color: "primary.main",
899
+ "& + .MuiSwitch-track": {
900
+ backgroundColor: "primary.main",
901
+ opacity: 0.5
902
+ }
903
+ },
904
+ "&.Mui-disabled": {
905
+ color: "action.disabled",
906
+ "& + .MuiSwitch-track": {
907
+ backgroundColor: "action.disabledBackground"
908
+ }
909
+ }
910
+ },
911
+ ...switchSx
912
+ }],
913
+ ...otherProps
914
+ }
915
+ ),
916
+ isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(
917
+ material.Typography,
918
+ {
919
+ variant: "caption",
920
+ sx: [{
921
+ color: "error.main",
922
+ display: "block",
923
+ mt: 0.5,
924
+ ...errorSx
925
+ }],
926
+ gutterBottom: true,
927
+ children: fieldError
928
+ }
929
+ )
930
+ ]
931
+ }
932
+ );
318
933
  }
319
934
  var Form = ({
320
935
  children,
@@ -324,12 +939,26 @@ var Form = ({
324
939
  return /* @__PURE__ */ jsxRuntime.jsx(formik.Formik, { ...props, children: (formikProps) => /* @__PURE__ */ jsxRuntime.jsx(formik.Form, { className, children: typeof children === "function" ? children(formikProps) : children }) });
325
940
  };
326
941
  var Form_default = Form;
327
- function AppAutoComplete({ placeholder, name, label, options = [] }) {
942
+ function AppAutoComplete({
943
+ placeholder,
944
+ name,
945
+ variant = "outlined",
946
+ label,
947
+ options = [],
948
+ value: propValue,
949
+ onChange: propOnChange,
950
+ sx,
951
+ formControlSx,
952
+ textFieldSx,
953
+ chipSx,
954
+ errorSx
955
+ }) {
328
956
  const { errors, touched, getFieldProps, values, setFieldValue } = formik.useFormikContext();
329
- const fieldError = _17__default.default.get(errors, name);
330
- const isTouched = _17__default.default.get(touched, name);
331
- const val = _17__default.default.get(values, name);
332
- return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", children: [
957
+ const fieldError = _19__default.default.get(errors, name);
958
+ const isTouched = _19__default.default.get(touched, name);
959
+ const formikValue = _19__default.default.get(values, name);
960
+ const val = propValue !== void 0 ? propValue : formikValue || [];
961
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
333
962
  /* @__PURE__ */ jsxRuntime.jsx(
334
963
  material.Autocomplete,
335
964
  {
@@ -338,24 +967,72 @@ function AppAutoComplete({ placeholder, name, label, options = [] }) {
338
967
  id: "tags-filled",
339
968
  options,
340
969
  freeSolo: true,
341
- renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(material.Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index })),
970
+ renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(
971
+ material.Chip,
972
+ {
973
+ variant: "outlined",
974
+ label: option,
975
+ ...getTagProps({ index }),
976
+ key: index,
977
+ sx: chipSx
978
+ }
979
+ )),
342
980
  value: val,
343
- onChange: (event, newValue) => {
344
- setFieldValue(name, newValue, true);
981
+ onChange: (event, newValue, reason, details) => {
982
+ if (propOnChange) {
983
+ propOnChange(event, newValue, reason, details);
984
+ } else {
985
+ setFieldValue(name, newValue, true);
986
+ }
345
987
  },
346
- renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...params, variant: "filled", label, placeholder })
988
+ renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
989
+ material.TextField,
990
+ {
991
+ ...params,
992
+ variant,
993
+ placeholder,
994
+ label,
995
+ error: isTouched && Boolean(fieldError),
996
+ sx: textFieldSx
997
+ }
998
+ ),
999
+ sx
347
1000
  }
348
1001
  ),
349
- fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
1002
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(
1003
+ material.Typography,
1004
+ {
1005
+ color: "error",
1006
+ variant: "caption",
1007
+ display: "block",
1008
+ gutterBottom: true,
1009
+ sx: {
1010
+ color: "#FF5630",
1011
+ ...errorSx
1012
+ },
1013
+ children: fieldError
1014
+ }
1015
+ )
350
1016
  ] });
351
1017
  }
352
- function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
1018
+ function AppAutoCompleter({
1019
+ placeholder,
1020
+ name,
1021
+ label,
1022
+ options,
1023
+ disabled,
1024
+ sx,
1025
+ formControlSx,
1026
+ textFieldSx,
1027
+ listboxSx,
1028
+ errorSx
1029
+ }) {
353
1030
  const { errors, touched, values, setFieldValue } = formik.useFormikContext();
354
- const fieldError = _17__default.default.get(errors, name);
355
- const isTouched = _17__default.default.get(touched, name);
356
- const value = _17__default.default.get(values, name);
1031
+ const fieldError = _19__default.default.get(errors, name);
1032
+ const isTouched = _19__default.default.get(touched, name);
1033
+ const value = _19__default.default.get(values, name);
357
1034
  const selectedOption = options.find((opt) => opt.value === value) || null;
358
- return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", children: [
1035
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
359
1036
  /* @__PURE__ */ jsxRuntime.jsx(
360
1037
  Autocomplete3__default.default,
361
1038
  {
@@ -365,10 +1042,10 @@ function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
365
1042
  getOptionLabel: (option) => (option == null ? void 0 : option.label) || "",
366
1043
  isOptionEqualToValue: (option, value2) => option.value === value2.value,
367
1044
  autoHighlight: true,
368
- onChange: (_18, newValue) => {
1045
+ onChange: (_20, newValue) => {
369
1046
  setFieldValue(name, newValue ? newValue.value : null);
370
1047
  },
371
- renderOption: (props, option) => /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: option.value }, option.label),
1048
+ renderOption: (props, option) => /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
372
1049
  renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
373
1050
  material.TextField,
374
1051
  {
@@ -376,85 +1053,181 @@ function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
376
1053
  label,
377
1054
  placeholder,
378
1055
  error: Boolean(fieldError) && isTouched,
379
- helperText: isTouched && fieldError
1056
+ helperText: isTouched && fieldError,
1057
+ sx: textFieldSx
380
1058
  }
381
1059
  ),
382
- disabled
1060
+ disabled,
1061
+ sx
383
1062
  }
384
1063
  ),
385
- fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
386
- ] });
387
- }
388
- var CheckboxField = ({ name, option, ...rest }) => {
389
- const { getFieldProps, setFieldValue, touched, errors } = formik.useFormikContext();
390
- const fieldError = _17__default.default.get(errors, name);
391
- const isTouched = _17__default.default.get(touched, name);
392
- let value = getFieldProps(name).value;
393
- const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
394
- const theme = material.useTheme();
395
- return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%" }, children: [
396
- /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
397
- display: "grid",
398
- gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)" },
399
- gap: 2
400
- }, children: option.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
401
- material.Box,
402
- {
403
- sx: {
404
- display: "flex",
405
- flexDirection: "row",
406
- alignItems: "center",
407
- px: 2,
408
- py: 1,
409
- borderRadius: 1
410
- },
411
- children: [
412
- /* @__PURE__ */ jsxRuntime.jsx(
413
- material.Checkbox,
414
- {
415
- ...rest,
416
- ...getFieldProps(name),
417
- name,
418
- value: item.name,
419
- checked: checkedNames.includes(item.name),
420
- onChange: (e) => {
421
- const newValue = e.target.checked ? [...checkedNames, item.name] : checkedNames.filter((n) => n !== item.name);
422
- if (option.length === 1) {
423
- setFieldValue(name, e.target.checked);
424
- } else {
425
- setFieldValue(name, newValue);
426
- }
427
- }
428
- }
429
- ),
430
- /* @__PURE__ */ jsxRuntime.jsx(
431
- Typography9__default.default,
432
- {
433
- variant: "button",
434
- color: "initial",
435
- sx: {
436
- color: theme.palette.text.primary
437
- },
438
- children: item.label
439
- }
440
- )
441
- ]
442
- },
443
- item.name
444
- )) }),
445
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(
446
- Typography9__default.default,
1064
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(
1065
+ material.Typography,
447
1066
  {
448
- color: "#FF5630",
449
1067
  variant: "caption",
450
1068
  display: "block",
451
1069
  gutterBottom: true,
1070
+ sx: {
1071
+ color: "#FF5630",
1072
+ ...errorSx
1073
+ },
452
1074
  children: fieldError
453
1075
  }
454
1076
  )
455
1077
  ] });
1078
+ }
1079
+ var AppCheckBox = ({
1080
+ name,
1081
+ option,
1082
+ label,
1083
+ required = false,
1084
+ disabled = false,
1085
+ row = false,
1086
+ sx,
1087
+ checkboxSx,
1088
+ labelSx,
1089
+ errorSx,
1090
+ containerSx,
1091
+ iconSx,
1092
+ checkedSx,
1093
+ ...rest
1094
+ }) => {
1095
+ const { getFieldProps, setFieldValue, touched, errors } = formik.useFormikContext();
1096
+ const fieldError = _19__default.default.get(errors, name);
1097
+ const isTouched = _19__default.default.get(touched, name);
1098
+ material.useTheme();
1099
+ const value = getFieldProps(name).value;
1100
+ const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
1101
+ const handleChange = (itemName, isChecked) => {
1102
+ const newValue = isChecked ? [...checkedNames, itemName] : checkedNames.filter((n) => n !== itemName);
1103
+ setFieldValue(name, option.length === 1 ? isChecked : newValue);
1104
+ };
1105
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1106
+ material.Box,
1107
+ {
1108
+ sx: [{
1109
+ width: "100%",
1110
+ ...disabled && {
1111
+ opacity: 0.7,
1112
+ pointerEvents: "none"
1113
+ }
1114
+ }, ...Array.isArray(sx) ? sx : [sx]],
1115
+ children: [
1116
+ label && /* @__PURE__ */ jsxRuntime.jsx(
1117
+ Typography10__default.default,
1118
+ {
1119
+ variant: "subtitle2",
1120
+ gutterBottom: true,
1121
+ sx: [{
1122
+ color: "text.primary",
1123
+ fontWeight: "medium",
1124
+ ...required && {
1125
+ "&:after": {
1126
+ content: '" *"',
1127
+ color: "error.main"
1128
+ }
1129
+ },
1130
+ ...disabled && {
1131
+ color: "text.disabled"
1132
+ }
1133
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1134
+ children: label
1135
+ }
1136
+ ),
1137
+ /* @__PURE__ */ jsxRuntime.jsx(
1138
+ material.Box,
1139
+ {
1140
+ sx: [{
1141
+ display: "flex",
1142
+ flexDirection: row ? "row" : "column",
1143
+ flexWrap: row ? "wrap" : "nowrap",
1144
+ gap: 2,
1145
+ ...row ? {
1146
+ "& > *": {
1147
+ minWidth: "fit-content"
1148
+ }
1149
+ } : {}
1150
+ }, ...Array.isArray(containerSx) ? containerSx : [containerSx]],
1151
+ children: option.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
1152
+ material.Box,
1153
+ {
1154
+ sx: [{
1155
+ display: "flex",
1156
+ alignItems: "center",
1157
+ borderRadius: 1,
1158
+ transition: "background-color 0.2s",
1159
+ "&:hover": {
1160
+ backgroundColor: !disabled ? "action.hover" : "transparent"
1161
+ },
1162
+ px: 2,
1163
+ py: 1,
1164
+ ...disabled && {
1165
+ color: "text.disabled"
1166
+ }
1167
+ }],
1168
+ children: [
1169
+ /* @__PURE__ */ jsxRuntime.jsx(
1170
+ material.Checkbox,
1171
+ {
1172
+ ...getFieldProps(name),
1173
+ name,
1174
+ value: item.name,
1175
+ checked: checkedNames.includes(item.name),
1176
+ onChange: (e) => handleChange(item.name, e.target.checked),
1177
+ disabled: disabled || item.disabled,
1178
+ sx: [{
1179
+ color: "primary.main",
1180
+ "&.Mui-checked": {
1181
+ color: "primary.main",
1182
+ ...checkedSx
1183
+ },
1184
+ "& .MuiSvgIcon-root": {
1185
+ fontSize: 24,
1186
+ ...iconSx
1187
+ },
1188
+ "&.Mui-disabled": {
1189
+ color: "action.disabled"
1190
+ }
1191
+ }, ...Array.isArray(checkboxSx) ? checkboxSx : [checkboxSx]],
1192
+ ...rest
1193
+ }
1194
+ ),
1195
+ /* @__PURE__ */ jsxRuntime.jsx(
1196
+ Typography10__default.default,
1197
+ {
1198
+ variant: "body2",
1199
+ sx: [{
1200
+ color: disabled ? "text.disabled" : "text.primary",
1201
+ ...disabled && {
1202
+ color: "text.disabled"
1203
+ }
1204
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1205
+ children: item.label
1206
+ }
1207
+ )
1208
+ ]
1209
+ },
1210
+ item.name
1211
+ ))
1212
+ }
1213
+ ),
1214
+ isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
1215
+ Typography10__default.default,
1216
+ {
1217
+ variant: "caption",
1218
+ sx: [{
1219
+ display: "block",
1220
+ mt: 0.5,
1221
+ color: "error.main"
1222
+ }, ...Array.isArray(errorSx) ? errorSx : [errorSx]],
1223
+ children: fieldError
1224
+ }
1225
+ )
1226
+ ]
1227
+ }
1228
+ );
456
1229
  };
457
- var AppCheckBox_default = CheckboxField;
1230
+ var AppCheckBox_default = AppCheckBox;
458
1231
  var Iconify = react.forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
459
1232
  material.Box,
460
1233
  {
@@ -473,11 +1246,12 @@ function AppInputField({
473
1246
  type,
474
1247
  InputProps,
475
1248
  required,
1249
+ variant = "outlined",
476
1250
  ...otherProps
477
1251
  }) {
478
1252
  const { errors, getFieldProps, touched } = formik.useFormikContext();
479
- const fieldError = _17__default.default.get(errors, name);
480
- const isTouched = _17__default.default.get(touched, name);
1253
+ const fieldError = _19__default.default.get(errors, name);
1254
+ const isTouched = _19__default.default.get(touched, name);
481
1255
  const [showPassword, setShowPassword] = react.useState(false);
482
1256
  const handleShowPassword = () => {
483
1257
  setShowPassword(!showPassword);
@@ -487,6 +1261,7 @@ function AppInputField({
487
1261
  {
488
1262
  ...getFieldProps(name),
489
1263
  fullWidth: true,
1264
+ variant,
490
1265
  label: required === true ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
491
1266
  label,
492
1267
  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red", pl: 0.5 }, component: "span", children: "*" })
@@ -535,108 +1310,322 @@ function AppInputField({
535
1310
  }
536
1311
  );
537
1312
  }
538
- function AppMultiSelector({
539
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
540
- multiple = true,
541
- name,
542
- label,
543
- options = [],
544
- required,
545
- ...otherProps
546
- }) {
547
- const { errors, touched, getFieldProps, values } = formik.useFormikContext();
548
- const fieldError = _17__default.default.get(errors, name);
549
- const isTouched = _17__default.default.get(touched, name);
550
- const val = _17__default.default.get(values, name);
551
- const selectedValues = Array.isArray(val) ? val : [];
552
- return /* @__PURE__ */ jsxRuntime.jsxs(
553
- material.FormControl,
554
- {
555
- fullWidth: true,
556
- variant: "filled",
557
- sx: (theme) => ({
558
- "& .MuiOutlinedInput-root": {
559
- borderRadius: "8px",
560
- color: theme.palette.common.black,
561
- background: theme.palette.common.white
562
- },
563
- "& .MuiSvgIcon-root": {
564
- color: theme.palette.common.black
565
- },
566
- "& .MuiSelect-icon": {
567
- color: theme.palette.common.black
568
- },
569
- ".MuiInputLabel-root": {
570
- color: "text.primary"
571
- },
572
- ".MuiInputLabel-root.Mui-focused": {
573
- color: "text.primary"
574
- },
575
- "& .MuiSelect-select": {
576
- color: "text.primary"
577
- }
578
- }),
579
- children: [
580
- /* @__PURE__ */ jsxRuntime.jsxs(material.InputLabel, { id: `select-${name}`, children: [
581
- label,
582
- " ",
583
- required === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: "*" })
584
- ] }),
585
- /* @__PURE__ */ jsxRuntime.jsx(
586
- Select__default.default,
1313
+ var AppMultiSelector = react.forwardRef(
1314
+ ({
1315
+ multiple = true,
1316
+ name,
1317
+ label,
1318
+ options = [],
1319
+ required = false,
1320
+ variant = "outlined",
1321
+ disabled = false,
1322
+ maxSelections,
1323
+ showSelectedCount = true,
1324
+ showHelperText = false,
1325
+ helperText,
1326
+ sx,
1327
+ formControlSx,
1328
+ selectSx,
1329
+ labelSx,
1330
+ chipSx,
1331
+ checkboxSx,
1332
+ menuItemSx,
1333
+ errorSx,
1334
+ helperTextSx,
1335
+ iconSx,
1336
+ onChange: externalOnChange,
1337
+ onOpen,
1338
+ onClose,
1339
+ renderValue: externalRenderValue,
1340
+ renderMenuItem,
1341
+ ...otherProps
1342
+ }, ref) => {
1343
+ const theme = material.useTheme();
1344
+ const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
1345
+ const fieldError = _19__default.default.get(errors, name);
1346
+ const isTouched = _19__default.default.get(touched, name);
1347
+ const val = _19__default.default.get(values, name);
1348
+ const selectedValues = Array.isArray(val) ? val : [];
1349
+ const handleChange = (event, child) => {
1350
+ const newValue = event.target.value;
1351
+ if (maxSelections && newValue.length > maxSelections) {
1352
+ return;
1353
+ }
1354
+ setFieldValue(name, newValue, true);
1355
+ if (externalOnChange) {
1356
+ externalOnChange(event, child);
1357
+ }
1358
+ };
1359
+ const handleBlur = () => {
1360
+ setFieldTouched(name, true, true);
1361
+ };
1362
+ const defaultRenderValue = (selected) => /* @__PURE__ */ jsxRuntime.jsx(
1363
+ material.Box,
1364
+ {
1365
+ sx: { display: "flex", flexWrap: "wrap", gap: 0.5, minHeight: "24px" },
1366
+ children: selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Select options..." }) : selected.map((value) => {
1367
+ const option = options.find((obj) => obj.value === value);
1368
+ return option ? /* @__PURE__ */ jsxRuntime.jsx(
1369
+ material.Chip,
1370
+ {
1371
+ label: option.label,
1372
+ size: "small",
1373
+ sx: [
1374
+ {
1375
+ height: "24px",
1376
+ borderRadius: "4px",
1377
+ backgroundColor: "action.selected",
1378
+ "& .MuiChip-label": {
1379
+ px: 1
1380
+ },
1381
+ ...option.disabled && {
1382
+ opacity: 0.6
1383
+ }
1384
+ },
1385
+ chipSx
1386
+ ]
1387
+ },
1388
+ value
1389
+ ) : null;
1390
+ })
1391
+ }
1392
+ );
1393
+ const defaultRenderMenuItem = (option, isSelected) => /* @__PURE__ */ jsxRuntime.jsxs(
1394
+ material.MenuItem,
1395
+ {
1396
+ value: option.value,
1397
+ disabled: option.disabled,
1398
+ sx: [
587
1399
  {
588
- multiple: true,
589
- variant: "outlined",
590
- labelId: `select-${name}`,
591
- label,
592
- ...getFieldProps(name),
593
- value: selectedValues,
594
- sx: { borderRadius: "0px" },
595
- renderValue: (selected) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selected.map((value) => {
596
- var _a;
597
- return /* @__PURE__ */ jsxRuntime.jsx(
598
- material.Chip,
1400
+ "&.Mui-selected": {
1401
+ backgroundColor: "action.selected",
1402
+ "&:hover": {
1403
+ backgroundColor: "action.hover"
1404
+ }
1405
+ },
1406
+ "&.Mui-disabled": {
1407
+ opacity: 0.5
1408
+ },
1409
+ ...option.sx
1410
+ },
1411
+ menuItemSx
1412
+ ],
1413
+ children: [
1414
+ /* @__PURE__ */ jsxRuntime.jsx(
1415
+ material.Checkbox,
1416
+ {
1417
+ checked: isSelected,
1418
+ disabled: option.disabled,
1419
+ sx: [
599
1420
  {
600
- label: (_a = options.find((obj) => obj.value === value)) == null ? void 0 : _a.label,
601
- sx: { height: "20px", borderRadius: "2px" }
1421
+ color: "text.secondary",
1422
+ "&.Mui-checked": {
1423
+ color: "primary.main"
1424
+ },
1425
+ ...option.disabled && {
1426
+ color: "action.disabled"
1427
+ }
602
1428
  },
603
- value
604
- );
605
- }) }),
606
- error: Boolean(fieldError) && isTouched,
607
- ...otherProps,
608
- children: options.map((single, i) => /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { value: single.value, children: [
609
- /* @__PURE__ */ jsxRuntime.jsx(material.Checkbox, { checked: selectedValues.indexOf(single.value) > -1 }),
610
- single.label || single.value
611
- ] }, i))
612
- }
613
- ),
614
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
615
- ]
616
- }
617
- );
618
- }
1429
+ checkboxSx
1430
+ ]
1431
+ }
1432
+ ),
1433
+ /* @__PURE__ */ jsxRuntime.jsx(
1434
+ material.Typography,
1435
+ {
1436
+ variant: "body2",
1437
+ sx: [
1438
+ {
1439
+ color: option.disabled ? "text.disabled" : "text.primary",
1440
+ ...option.textSx
1441
+ }
1442
+ ],
1443
+ children: option.label || String(option.value)
1444
+ }
1445
+ )
1446
+ ]
1447
+ },
1448
+ option.value
1449
+ );
1450
+ const displayLabel = showSelectedCount && selectedValues.length > 0 ? `${label} (${selectedValues.length} selected)` : label;
1451
+ return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
1452
+ material.FormControl,
1453
+ {
1454
+ fullWidth: true,
1455
+ variant,
1456
+ error: isTouched && Boolean(fieldError),
1457
+ disabled,
1458
+ sx: [
1459
+ {
1460
+ "& .MuiInputLabel-root": {
1461
+ "&.Mui-focused": {
1462
+ color: "primary.main"
1463
+ },
1464
+ "&.Mui-error": {
1465
+ color: "error.main"
1466
+ },
1467
+ "&.Mui-disabled": {
1468
+ color: "text.disabled"
1469
+ }
1470
+ }
1471
+ },
1472
+ formControlSx
1473
+ ],
1474
+ children: [
1475
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
1476
+ material.InputLabel,
1477
+ {
1478
+ id: `select-${name}`,
1479
+ sx: [
1480
+ {
1481
+ color: "text.secondary",
1482
+ "&.Mui-focused": {
1483
+ color: "primary.main"
1484
+ },
1485
+ "&.Mui-disabled": {
1486
+ color: "text.disabled"
1487
+ }
1488
+ },
1489
+ labelSx
1490
+ ],
1491
+ children: [
1492
+ displayLabel,
1493
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1494
+ material.Typography,
1495
+ {
1496
+ component: "span",
1497
+ sx: {
1498
+ color: "error.main",
1499
+ ml: 0.5
1500
+ },
1501
+ children: "*"
1502
+ }
1503
+ )
1504
+ ]
1505
+ }
1506
+ ),
1507
+ /* @__PURE__ */ jsxRuntime.jsx(
1508
+ Select__default.default,
1509
+ {
1510
+ multiple,
1511
+ variant: "outlined",
1512
+ labelId: label ? `select-${name}` : void 0,
1513
+ label: label || void 0,
1514
+ value: selectedValues,
1515
+ onChange: handleChange,
1516
+ onBlur: handleBlur,
1517
+ onOpen,
1518
+ onClose,
1519
+ renderValue: externalRenderValue || defaultRenderValue,
1520
+ MenuProps: {
1521
+ PaperProps: {
1522
+ sx: {
1523
+ mt: 1,
1524
+ boxShadow: theme.shadows[3],
1525
+ "& .MuiMenuItem-root": {
1526
+ px: 2,
1527
+ py: 1
1528
+ }
1529
+ }
1530
+ }
1531
+ },
1532
+ sx: [
1533
+ {
1534
+ backgroundColor: "background.paper",
1535
+ color: "text.primary",
1536
+ "& .MuiSvgIcon-root": {
1537
+ color: "text.secondary",
1538
+ ...iconSx
1539
+ },
1540
+ "& .MuiSelect-icon": {
1541
+ color: "text.secondary"
1542
+ },
1543
+ "& .MuiOutlinedInput-notchedOutline": {
1544
+ borderColor: "divider"
1545
+ },
1546
+ "&:hover .MuiOutlinedInput-notchedOutline": {
1547
+ borderColor: "primary.main"
1548
+ },
1549
+ "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
1550
+ borderColor: "primary.main"
1551
+ },
1552
+ "&.Mui-error .MuiOutlinedInput-notchedOutline": {
1553
+ borderColor: "error.main"
1554
+ },
1555
+ "&.Mui-disabled": {
1556
+ backgroundColor: "action.disabledBackground",
1557
+ "& .MuiOutlinedInput-notchedOutline": {
1558
+ borderColor: "action.disabled"
1559
+ }
1560
+ },
1561
+ ...selectSx
1562
+ }
1563
+ ],
1564
+ error: Boolean(fieldError) && isTouched,
1565
+ ...otherProps,
1566
+ children: options.map((option) => {
1567
+ const isSelected = selectedValues.includes(option.value);
1568
+ return renderMenuItem ? renderMenuItem(option, isSelected) : defaultRenderMenuItem(option, isSelected);
1569
+ })
1570
+ }
1571
+ ),
1572
+ (showHelperText || isTouched && fieldError) && /* @__PURE__ */ jsxRuntime.jsx(
1573
+ material.FormHelperText,
1574
+ {
1575
+ sx: [
1576
+ {
1577
+ mx: 0,
1578
+ mt: 0.5,
1579
+ color: isTouched && fieldError ? "error.main" : "text.secondary",
1580
+ ...isTouched && fieldError ? errorSx : helperTextSx
1581
+ }
1582
+ ],
1583
+ children: isTouched && fieldError ? fieldError : helperText
1584
+ }
1585
+ )
1586
+ ]
1587
+ }
1588
+ ) });
1589
+ }
1590
+ );
1591
+ AppMultiSelector.displayName = "AppMultiSelector";
1592
+ var AppMultiSelector_default = AppMultiSelector;
619
1593
  var AppPhoneNoInput = ({
620
1594
  name,
621
1595
  label,
622
1596
  required,
1597
+ sx,
1598
+ containerSx,
1599
+ labelSx,
1600
+ inputSx,
1601
+ errorSx,
623
1602
  ...otherProps
624
1603
  }) => {
625
1604
  const { values, errors, touched, setFieldValue, getFieldProps } = formik.useFormikContext();
626
- const fieldError = _17__default.default.get(errors, name);
627
- const isTouched = _17__default.default.get(touched, name);
628
- return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 2 }, children: [
1605
+ const fieldError = _19__default.default.get(errors, name);
1606
+ const isTouched = _19__default.default.get(touched, name);
1607
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
629
1608
  label && /* @__PURE__ */ jsxRuntime.jsxs(
630
1609
  material.Typography,
631
1610
  {
632
1611
  variant: "subtitle2",
633
- sx: {
1612
+ sx: [{
634
1613
  mb: 0.5,
635
- color: isTouched && fieldError ? colors.red[500] : "text.primary"
636
- },
1614
+ color: isTouched && fieldError ? "error.main" : "text.primary"
1615
+ }, labelSx],
637
1616
  children: [
638
1617
  label,
639
- required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: colors.red[500], ml: 0.3 }, children: "*" })
1618
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1619
+ material.Typography,
1620
+ {
1621
+ component: "span",
1622
+ sx: {
1623
+ color: "error.main",
1624
+ ml: 0.3
1625
+ },
1626
+ children: "*"
1627
+ }
1628
+ )
640
1629
  ]
641
1630
  }
642
1631
  ),
@@ -647,8 +1636,13 @@ var AppPhoneNoInput = ({
647
1636
  specialLabel: "",
648
1637
  inputStyle: {
649
1638
  width: "100%",
650
- border: isTouched && fieldError ? `1px solid ${colors.red[500]}` : "1px solid #ccc",
651
- padding: "10px"
1639
+ border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
1640
+ padding: "10px",
1641
+ borderRadius: "4px",
1642
+ ...inputSx
1643
+ },
1644
+ containerStyle: {
1645
+ width: "100%"
652
1646
  },
653
1647
  ...otherProps,
654
1648
  ...getFieldProps(name),
@@ -660,8 +1654,11 @@ var AppPhoneNoInput = ({
660
1654
  material.Typography,
661
1655
  {
662
1656
  variant: "caption",
663
- color: "error",
664
- sx: { mt: 0.5, display: "block" },
1657
+ sx: [{
1658
+ mt: 0.5,
1659
+ display: "block",
1660
+ color: "error.main"
1661
+ }, errorSx],
665
1662
  children: [
666
1663
  String(fieldError),
667
1664
  " "
@@ -671,31 +1668,368 @@ var AppPhoneNoInput = ({
671
1668
  ] });
672
1669
  };
673
1670
  var AppPhoneNoInput_default = AppPhoneNoInput;
674
- function AppRadioGroup({ name, options, ...rest }) {
675
- const { errors, touched, getFieldProps } = formik.useFormikContext();
676
- const fieldError = _17__default.default.get(errors, name);
677
- const isTouched = _17__default.default.get(touched, name);
678
- return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { children: [
679
- /* @__PURE__ */ jsxRuntime.jsx(material.RadioGroup, { ...rest, ...getFieldProps(name), children: options.map((p) => /* @__PURE__ */ jsxRuntime.jsx(material.FormControlLabel, { value: p == null ? void 0 : p.value, control: /* @__PURE__ */ jsxRuntime.jsx(material.Radio, {}), label: p == null ? void 0 : p.label }, p == null ? void 0 : p.value)) }),
680
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
681
- ] });
682
- }
683
- function AppRating({ name, label }) {
684
- const { errors, touched, setFieldValue, values } = formik.useFormikContext();
685
- const val = _17__default.default.get(values, name);
686
- const fieldError = _17__default.default.get(errors, name);
687
- const isTouched = _17__default.default.get(touched, name);
1671
+ var AppRadioGroup = react.forwardRef(({
1672
+ name,
1673
+ options = [],
1674
+ label,
1675
+ required = false,
1676
+ disabled = false,
1677
+ row = false,
1678
+ sx,
1679
+ formControlSx,
1680
+ radioGroupSx,
1681
+ formLabelSx,
1682
+ radioSx,
1683
+ labelSx,
1684
+ errorSx,
1685
+ onChange,
1686
+ onBlur,
1687
+ ...rest
1688
+ }, ref) => {
1689
+ const { errors, touched, getFieldProps, setFieldValue } = formik.useFormikContext();
1690
+ const fieldError = _19__default.default.get(errors, name);
1691
+ const isTouched = _19__default.default.get(touched, name);
1692
+ const value = _19__default.default.get(getFieldProps(name), "value");
1693
+ const handleChange = (event) => {
1694
+ const newValue = event.target.value;
1695
+ setFieldValue(name, newValue);
1696
+ if (onChange) {
1697
+ onChange(event, newValue);
1698
+ }
1699
+ };
1700
+ const handleBlur = (event) => {
1701
+ if (onBlur) {
1702
+ onBlur(event);
1703
+ }
1704
+ };
1705
+ return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
1706
+ material.FormControl,
1707
+ {
1708
+ component: "fieldset",
1709
+ error: Boolean(fieldError) && isTouched,
1710
+ disabled,
1711
+ sx: [{
1712
+ width: "100%",
1713
+ "& .MuiFormGroup-root": {
1714
+ mt: 1
1715
+ }
1716
+ }, ...Array.isArray(formControlSx) ? formControlSx : [formControlSx]],
1717
+ children: [
1718
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
1719
+ material.FormLabel,
1720
+ {
1721
+ component: "legend",
1722
+ sx: [{
1723
+ color: "text.primary",
1724
+ mb: 1,
1725
+ "&.Mui-focused": {
1726
+ color: "text.primary"
1727
+ },
1728
+ "&.Mui-disabled": {
1729
+ color: "text.disabled"
1730
+ }
1731
+ }, ...Array.isArray(formLabelSx) ? formLabelSx : [formLabelSx]],
1732
+ children: [
1733
+ label,
1734
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1735
+ material.Typography,
1736
+ {
1737
+ component: "span",
1738
+ sx: {
1739
+ color: "error.main",
1740
+ ml: 0.5
1741
+ },
1742
+ children: "*"
1743
+ }
1744
+ )
1745
+ ]
1746
+ }
1747
+ ),
1748
+ /* @__PURE__ */ jsxRuntime.jsx(
1749
+ material.RadioGroup,
1750
+ {
1751
+ ...getFieldProps(name),
1752
+ value: value != null ? value : "",
1753
+ onChange: handleChange,
1754
+ onBlur: handleBlur,
1755
+ row,
1756
+ sx: [{
1757
+ "& .MuiFormControlLabel-root": {
1758
+ mr: row ? 3 : 0,
1759
+ mb: row ? 0 : 1,
1760
+ "&:last-of-type": {
1761
+ mb: 0
1762
+ }
1763
+ }
1764
+ }, ...Array.isArray(radioGroupSx) ? radioGroupSx : [radioGroupSx]],
1765
+ ...rest,
1766
+ children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
1767
+ material.FormControlLabel,
1768
+ {
1769
+ value: option.value,
1770
+ disabled: disabled || option.disabled,
1771
+ control: /* @__PURE__ */ jsxRuntime.jsx(
1772
+ material.Radio,
1773
+ {
1774
+ sx: [{
1775
+ color: "primary.main",
1776
+ "&.Mui-checked": {
1777
+ color: "primary.main"
1778
+ },
1779
+ "&.Mui-disabled": {
1780
+ color: "action.disabled"
1781
+ },
1782
+ ...radioSx,
1783
+ ...option.radioSx
1784
+ }]
1785
+ }
1786
+ ),
1787
+ label: /* @__PURE__ */ jsxRuntime.jsx(
1788
+ material.Typography,
1789
+ {
1790
+ variant: "body2",
1791
+ sx: [{
1792
+ color: disabled || option.disabled ? "text.disabled" : "text.primary",
1793
+ ...labelSx,
1794
+ ...option.labelSx
1795
+ }],
1796
+ children: option.label
1797
+ }
1798
+ ),
1799
+ sx: [{
1800
+ m: 0,
1801
+ mr: row ? 3 : 0,
1802
+ mb: row ? 0 : 1,
1803
+ "&:last-of-type": {
1804
+ mb: 0
1805
+ },
1806
+ ...option.sx
1807
+ }]
1808
+ },
1809
+ option.value
1810
+ ))
1811
+ }
1812
+ ),
1813
+ isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
1814
+ material.FormHelperText,
1815
+ {
1816
+ sx: [{
1817
+ color: "error.main",
1818
+ mx: 0,
1819
+ mt: 0.5,
1820
+ ...errorSx
1821
+ }],
1822
+ children: fieldError
1823
+ }
1824
+ )
1825
+ ]
1826
+ }
1827
+ ) });
1828
+ });
1829
+ AppRadioGroup.displayName = "AppRadioGroup";
1830
+ var AppRadioGroup_default = AppRadioGroup;
1831
+ var AppRating = react.forwardRef(({
1832
+ name,
1833
+ label,
1834
+ required = false,
1835
+ readOnly = false,
1836
+ disabled = false,
1837
+ max = 5,
1838
+ precision = 1,
1839
+ size = "medium",
1840
+ emptyIcon,
1841
+ icon,
1842
+ IconContainerComponent,
1843
+ getLabelText,
1844
+ onChange: externalOnChange,
1845
+ onChangeActive,
1846
+ sx,
1847
+ labelSx,
1848
+ ratingSx,
1849
+ errorSx,
1850
+ helperTextSx,
1851
+ showHelperText = false,
1852
+ helperText,
1853
+ labelComponent: LabelComponent = material.Typography,
1854
+ ratingComponent: RatingComponent = material.Rating,
1855
+ errorComponent: ErrorComponent = material.Typography,
1856
+ helperTextComponent: HelperTextComponent = material.FormHelperText,
1857
+ labelProps = {},
1858
+ ratingProps = {},
1859
+ errorProps = {},
1860
+ helperTextProps = {},
1861
+ className = "",
1862
+ labelClassName = "",
1863
+ ratingClassName = "",
1864
+ errorClassName = "",
1865
+ helperTextClassName = "",
1866
+ ...otherProps
1867
+ }, ref) => {
1868
+ material.useTheme();
1869
+ const { errors, touched, setFieldValue, values, setFieldTouched } = formik.useFormikContext();
1870
+ const val = _19__default.default.get(values, name);
1871
+ const fieldError = _19__default.default.get(errors, name);
1872
+ const isTouched = _19__default.default.get(touched, name);
1873
+ const hasError = Boolean(fieldError) && isTouched;
688
1874
  const handleChange = (event, newValue) => {
689
1875
  setFieldValue(name, newValue);
1876
+ setFieldTouched(name, true, false);
1877
+ if (externalOnChange) {
1878
+ externalOnChange(event, newValue);
1879
+ }
690
1880
  };
691
- return /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { children: [
692
- /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", alignItems: "center", children: [
693
- label && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { mx: 1 }, children: label }),
694
- /* @__PURE__ */ jsxRuntime.jsx(material.Rating, { value: val, onChange: handleChange }, val)
695
- ] }),
696
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
697
- ] });
698
- }
1881
+ const handleBlur = () => {
1882
+ setFieldTouched(name, true, true);
1883
+ };
1884
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1885
+ material.Box,
1886
+ {
1887
+ ref,
1888
+ className: `app-rating ${className}`,
1889
+ sx: [
1890
+ {
1891
+ display: "flex",
1892
+ flexDirection: "column",
1893
+ width: "100%",
1894
+ "&:hover": {
1895
+ "& .MuiRating-iconEmpty": {
1896
+ color: "primary.light"
1897
+ }
1898
+ }
1899
+ },
1900
+ ...Array.isArray(sx) ? sx : [sx]
1901
+ ],
1902
+ ...otherProps,
1903
+ children: [
1904
+ /* @__PURE__ */ jsxRuntime.jsxs(
1905
+ material.Stack,
1906
+ {
1907
+ direction: "row",
1908
+ alignItems: "center",
1909
+ spacing: 1,
1910
+ sx: {
1911
+ "&.Mui-disabled": {
1912
+ opacity: 0.5,
1913
+ cursor: "not-allowed"
1914
+ }
1915
+ },
1916
+ className: disabled ? "Mui-disabled" : "",
1917
+ children: [
1918
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
1919
+ LabelComponent,
1920
+ {
1921
+ variant: "body2",
1922
+ color: hasError ? "error" : "text.primary",
1923
+ className: `app-rating-label ${labelClassName}`,
1924
+ sx: [
1925
+ {
1926
+ margin: 0,
1927
+ fontWeight: 500,
1928
+ ...disabled && {
1929
+ color: "text.disabled"
1930
+ }
1931
+ },
1932
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
1933
+ ],
1934
+ ...labelProps,
1935
+ children: [
1936
+ label,
1937
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1938
+ material.Box,
1939
+ {
1940
+ component: "span",
1941
+ sx: {
1942
+ color: "error.main",
1943
+ ml: 0.5
1944
+ },
1945
+ children: "*"
1946
+ }
1947
+ )
1948
+ ]
1949
+ }
1950
+ ),
1951
+ /* @__PURE__ */ jsxRuntime.jsx(
1952
+ material.Box,
1953
+ {
1954
+ onBlur: handleBlur,
1955
+ sx: [
1956
+ {
1957
+ display: "inline-flex",
1958
+ "& .MuiRating-icon": {
1959
+ color: "primary.main"
1960
+ },
1961
+ "& .MuiRating-iconEmpty": {
1962
+ color: "action.disabled"
1963
+ },
1964
+ "& .MuiRating-iconFilled": {
1965
+ color: "primary.main"
1966
+ },
1967
+ "& .MuiRating-iconHover": {
1968
+ color: "primary.dark"
1969
+ },
1970
+ "&.Mui-disabled": {
1971
+ opacity: 0.5,
1972
+ cursor: "not-allowed"
1973
+ },
1974
+ ...hasError && {
1975
+ "& .MuiRating-icon": {
1976
+ color: "error.main"
1977
+ }
1978
+ }
1979
+ },
1980
+ ...Array.isArray(ratingSx) ? ratingSx : [ratingSx]
1981
+ ],
1982
+ className: `app-rating-stars ${ratingClassName} ${disabled ? "Mui-disabled" : ""}`,
1983
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1984
+ RatingComponent,
1985
+ {
1986
+ value: val != null ? val : null,
1987
+ onChange: handleChange,
1988
+ onChangeActive,
1989
+ max,
1990
+ precision,
1991
+ size,
1992
+ readOnly,
1993
+ disabled,
1994
+ emptyIcon,
1995
+ icon,
1996
+ IconContainerComponent,
1997
+ getLabelText,
1998
+ className: ratingClassName,
1999
+ ...ratingProps
2000
+ }
2001
+ )
2002
+ }
2003
+ )
2004
+ ]
2005
+ }
2006
+ ),
2007
+ (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
2008
+ HelperTextComponent,
2009
+ {
2010
+ error: hasError,
2011
+ sx: [
2012
+ {
2013
+ mx: 0,
2014
+ mt: 0.5,
2015
+ ...hasError && {
2016
+ color: "error.main",
2017
+ ...errorSx
2018
+ },
2019
+ ...helperTextSx
2020
+ }
2021
+ ],
2022
+ className: `app-rating-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`,
2023
+ ...helperTextProps,
2024
+ children: hasError ? fieldError : helperText
2025
+ }
2026
+ )
2027
+ ]
2028
+ }
2029
+ );
2030
+ });
2031
+ AppRating.displayName = "AppRating";
2032
+ var AppRating_default = AppRating;
699
2033
 
700
2034
  // node_modules/orderedmap/dist/index.js
701
2035
  function OrderedMap(content) {
@@ -879,7 +2213,7 @@ function findDiffEnd(a, b, posA, posB) {
879
2213
  posB -= size;
880
2214
  }
881
2215
  }
882
- var Fragment3 = class {
2216
+ var Fragment2 = class {
883
2217
  /**
884
2218
  @internal
885
2219
  */
@@ -947,7 +2281,7 @@ var Fragment3 = class {
947
2281
  }
948
2282
  for (; i < other.content.length; i++)
949
2283
  content.push(other.content[i]);
950
- return new Fragment3(content, this.size + other.size);
2284
+ return new Fragment2(content, this.size + other.size);
951
2285
  }
952
2286
  /**
953
2287
  Cut out the sub-fragment between the two given positions.
@@ -971,17 +2305,17 @@ var Fragment3 = class {
971
2305
  }
972
2306
  pos = end;
973
2307
  }
974
- return new Fragment3(result, size);
2308
+ return new Fragment2(result, size);
975
2309
  }
976
2310
  /**
977
2311
  @internal
978
2312
  */
979
2313
  cutByIndex(from, to) {
980
2314
  if (from == to)
981
- return Fragment3.empty;
2315
+ return Fragment2.empty;
982
2316
  if (from == 0 && to == this.content.length)
983
2317
  return this;
984
- return new Fragment3(this.content.slice(from, to));
2318
+ return new Fragment2(this.content.slice(from, to));
985
2319
  }
986
2320
  /**
987
2321
  Create a new fragment in which the node at the given index is
@@ -994,21 +2328,21 @@ var Fragment3 = class {
994
2328
  let copy2 = this.content.slice();
995
2329
  let size = this.size + node.nodeSize - current.nodeSize;
996
2330
  copy2[index] = node;
997
- return new Fragment3(copy2, size);
2331
+ return new Fragment2(copy2, size);
998
2332
  }
999
2333
  /**
1000
2334
  Create a new fragment by prepending the given node to this
1001
2335
  fragment.
1002
2336
  */
1003
2337
  addToStart(node) {
1004
- return new Fragment3([node].concat(this.content), this.size + node.nodeSize);
2338
+ return new Fragment2([node].concat(this.content), this.size + node.nodeSize);
1005
2339
  }
1006
2340
  /**
1007
2341
  Create a new fragment by appending the given node to this
1008
2342
  fragment.
1009
2343
  */
1010
2344
  addToEnd(node) {
1011
- return new Fragment3(this.content.concat(node), this.size + node.nodeSize);
2345
+ return new Fragment2(this.content.concat(node), this.size + node.nodeSize);
1012
2346
  }
1013
2347
  /**
1014
2348
  Compare this fragment to another one.
@@ -1127,10 +2461,10 @@ var Fragment3 = class {
1127
2461
  */
1128
2462
  static fromJSON(schema, value) {
1129
2463
  if (!value)
1130
- return Fragment3.empty;
2464
+ return Fragment2.empty;
1131
2465
  if (!Array.isArray(value))
1132
2466
  throw new RangeError("Invalid input for Fragment.fromJSON");
1133
- return new Fragment3(value.map(schema.nodeFromJSON));
2467
+ return new Fragment2(value.map(schema.nodeFromJSON));
1134
2468
  }
1135
2469
  /**
1136
2470
  Build a fragment from an array of nodes. Ensures that adjacent
@@ -1138,7 +2472,7 @@ var Fragment3 = class {
1138
2472
  */
1139
2473
  static fromArray(array) {
1140
2474
  if (!array.length)
1141
- return Fragment3.empty;
2475
+ return Fragment2.empty;
1142
2476
  let joined, size = 0;
1143
2477
  for (let i = 0; i < array.length; i++) {
1144
2478
  let node = array[i];
@@ -1151,7 +2485,7 @@ var Fragment3 = class {
1151
2485
  joined.push(node);
1152
2486
  }
1153
2487
  }
1154
- return new Fragment3(joined || array, size);
2488
+ return new Fragment2(joined || array, size);
1155
2489
  }
1156
2490
  /**
1157
2491
  Create a fragment from something that can be interpreted as a
@@ -1161,17 +2495,17 @@ var Fragment3 = class {
1161
2495
  */
1162
2496
  static from(nodes) {
1163
2497
  if (!nodes)
1164
- return Fragment3.empty;
1165
- if (nodes instanceof Fragment3)
2498
+ return Fragment2.empty;
2499
+ if (nodes instanceof Fragment2)
1166
2500
  return nodes;
1167
2501
  if (Array.isArray(nodes))
1168
2502
  return this.fromArray(nodes);
1169
2503
  if (nodes.attrs)
1170
- return new Fragment3([nodes], nodes.nodeSize);
2504
+ return new Fragment2([nodes], nodes.nodeSize);
1171
2505
  throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
1172
2506
  }
1173
2507
  };
1174
- Fragment3.empty = new Fragment3([], 0);
2508
+ Fragment2.empty = new Fragment2([], 0);
1175
2509
  var found = { index: 0, offset: 0 };
1176
2510
  function retIndex(index, offset) {
1177
2511
  found.index = index;
@@ -1276,7 +2610,7 @@ var Mark = class {
1276
2610
  */
1277
2611
  toJSON() {
1278
2612
  let obj = { type: this.type.name };
1279
- for (let _18 in this.attrs) {
2613
+ for (let _20 in this.attrs) {
1280
2614
  obj.attrs = this.attrs;
1281
2615
  break;
1282
2616
  }
@@ -1396,7 +2730,7 @@ var Slice = class {
1396
2730
  let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
1397
2731
  if (typeof openStart != "number" || typeof openEnd != "number")
1398
2732
  throw new RangeError("Invalid input for Slice.fromJSON");
1399
- return new Slice(Fragment3.fromJSON(schema, json.content), openStart, openEnd);
2733
+ return new Slice(Fragment2.fromJSON(schema, json.content), openStart, openEnd);
1400
2734
  }
1401
2735
  /**
1402
2736
  Create a slice from a fragment by taking the maximum possible
@@ -1411,7 +2745,7 @@ var Slice = class {
1411
2745
  return new Slice(fragment, openStart, openEnd);
1412
2746
  }
1413
2747
  };
1414
- Slice.empty = new Slice(Fragment3.empty, 0, 0);
2748
+ Slice.empty = new Slice(Fragment2.empty, 0, 0);
1415
2749
  function removeRange(content, from, to) {
1416
2750
  let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
1417
2751
  let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -1509,7 +2843,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
1509
2843
  addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
1510
2844
  }
1511
2845
  addRange($to, null, depth, content);
1512
- return new Fragment3(content);
2846
+ return new Fragment2(content);
1513
2847
  }
1514
2848
  function replaceTwoWay($from, $to, depth) {
1515
2849
  let content = [];
@@ -1519,13 +2853,13 @@ function replaceTwoWay($from, $to, depth) {
1519
2853
  addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
1520
2854
  }
1521
2855
  addRange($to, null, depth, content);
1522
- return new Fragment3(content);
2856
+ return new Fragment2(content);
1523
2857
  }
1524
2858
  function prepareSliceForReplace(slice, $along) {
1525
2859
  let extra = $along.depth - slice.openStart, parent = $along.node(extra);
1526
2860
  let node = parent.copy(slice.content);
1527
2861
  for (let i = extra - 1; i >= 0; i--)
1528
- node = $along.node(i).copy(Fragment3.from(node));
2862
+ node = $along.node(i).copy(Fragment2.from(node));
1529
2863
  return {
1530
2864
  start: node.resolveNoCache(slice.openStart + extra),
1531
2865
  end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -1864,7 +3198,7 @@ var Node = class {
1864
3198
  this.type = type;
1865
3199
  this.attrs = attrs;
1866
3200
  this.marks = marks;
1867
- this.content = content || Fragment3.empty;
3201
+ this.content = content || Fragment2.empty;
1868
3202
  }
1869
3203
  /**
1870
3204
  The array of this node's child nodes.
@@ -2169,7 +3503,7 @@ var Node = class {
2169
3503
  can optionally pass `start` and `end` indices into the
2170
3504
  replacement fragment.
2171
3505
  */
2172
- canReplace(from, to, replacement = Fragment3.empty, start = 0, end = replacement.childCount) {
3506
+ canReplace(from, to, replacement = Fragment2.empty, start = 0, end = replacement.childCount) {
2173
3507
  let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
2174
3508
  let two = one && one.matchFragment(this.content, to);
2175
3509
  if (!two || !two.validEnd)
@@ -2224,7 +3558,7 @@ var Node = class {
2224
3558
  */
2225
3559
  toJSON() {
2226
3560
  let obj = { type: this.type.name };
2227
- for (let _18 in this.attrs) {
3561
+ for (let _20 in this.attrs) {
2228
3562
  obj.attrs = this.attrs;
2229
3563
  break;
2230
3564
  }
@@ -2251,7 +3585,7 @@ var Node = class {
2251
3585
  throw new RangeError("Invalid text node in JSON");
2252
3586
  return schema.text(json.text, marks);
2253
3587
  }
2254
- let content = Fragment3.fromJSON(schema, json.content);
3588
+ let content = Fragment2.fromJSON(schema, json.content);
2255
3589
  let node = schema.nodeType(json.type).create(json.attrs, content, marks);
2256
3590
  node.type.checkAttrs(node.attrs);
2257
3591
  return node;
@@ -2393,7 +3727,7 @@ var ContentMatch = class {
2393
3727
  function search(match, types) {
2394
3728
  let finished = match.matchFragment(after, startIndex);
2395
3729
  if (finished && (!toEnd || finished.validEnd))
2396
- return Fragment3.from(types.map((tp) => tp.createAndFill()));
3730
+ return Fragment2.from(types.map((tp) => tp.createAndFill()));
2397
3731
  for (let i = 0; i < match.next.length; i++) {
2398
3732
  let { type, next } = match.next[i];
2399
3733
  if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -2845,7 +4179,7 @@ var NodeType = class {
2845
4179
  create(attrs = null, content, marks) {
2846
4180
  if (this.isText)
2847
4181
  throw new Error("NodeType.create can't construct text nodes");
2848
- return new Node(this, this.computeAttrs(attrs), Fragment3.from(content), Mark.setFrom(marks));
4182
+ return new Node(this, this.computeAttrs(attrs), Fragment2.from(content), Mark.setFrom(marks));
2849
4183
  }
2850
4184
  /**
2851
4185
  Like [`create`](https://prosemirror.net/docs/ref/#model.NodeType.create), but check the given content
@@ -2853,7 +4187,7 @@ var NodeType = class {
2853
4187
  if it doesn't match.
2854
4188
  */
2855
4189
  createChecked(attrs = null, content, marks) {
2856
- content = Fragment3.from(content);
4190
+ content = Fragment2.from(content);
2857
4191
  this.checkContent(content);
2858
4192
  return new Node(this, this.computeAttrs(attrs), content, Mark.setFrom(marks));
2859
4193
  }
@@ -2867,7 +4201,7 @@ var NodeType = class {
2867
4201
  */
2868
4202
  createAndFill(attrs = null, content, marks) {
2869
4203
  attrs = this.computeAttrs(attrs);
2870
- content = Fragment3.from(content);
4204
+ content = Fragment2.from(content);
2871
4205
  if (content.size) {
2872
4206
  let before = this.contentMatch.fillBefore(content);
2873
4207
  if (!before)
@@ -2875,7 +4209,7 @@ var NodeType = class {
2875
4209
  content = before.append(content);
2876
4210
  }
2877
4211
  let matched = this.contentMatch.matchFragment(content);
2878
- let after = matched && matched.fillBefore(Fragment3.empty, true);
4212
+ let after = matched && matched.fillBefore(Fragment2.empty, true);
2879
4213
  if (!after)
2880
4214
  return null;
2881
4215
  return new Node(this, attrs, content.append(after), Mark.setFrom(marks));
@@ -2953,7 +4287,7 @@ var NodeType = class {
2953
4287
  throw new RangeError("Schema is missing its top node type ('" + topType + "')");
2954
4288
  if (!result.text)
2955
4289
  throw new RangeError("Every schema needs a 'text' type");
2956
- for (let _18 in result.text.attrs)
4290
+ for (let _20 in result.text.attrs)
2957
4291
  throw new RangeError("The text node type should not have attributes");
2958
4292
  return result;
2959
4293
  }
@@ -3339,7 +4673,7 @@ var NodeContext = class {
3339
4673
  if (!this.match) {
3340
4674
  if (!this.type)
3341
4675
  return [];
3342
- let fill = this.type.contentMatch.fillBefore(Fragment3.from(node));
4676
+ let fill = this.type.contentMatch.fillBefore(Fragment2.from(node));
3343
4677
  if (fill) {
3344
4678
  this.match = this.type.contentMatch.matchFragment(fill);
3345
4679
  } else {
@@ -3365,9 +4699,9 @@ var NodeContext = class {
3365
4699
  this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m2[0].length));
3366
4700
  }
3367
4701
  }
3368
- let content = Fragment3.from(this.content);
4702
+ let content = Fragment2.from(this.content);
3369
4703
  if (!openEnd && this.match)
3370
- content = content.append(this.match.fillBefore(Fragment3.empty, true));
4704
+ content = content.append(this.match.fillBefore(Fragment2.empty, true));
3371
4705
  return this.type ? this.type.create(this.attrs, content, this.marks) : content;
3372
4706
  }
3373
4707
  inlineContext(node) {
@@ -4184,7 +5518,7 @@ function mapFragment(fragment, f, parent) {
4184
5518
  child = f(child, parent, i);
4185
5519
  mapped.push(child);
4186
5520
  }
4187
- return Fragment3.fromArray(mapped);
5521
+ return Fragment2.fromArray(mapped);
4188
5522
  }
4189
5523
  var AddMarkStep = class extends Step {
4190
5524
  /**
@@ -4301,7 +5635,7 @@ var AddNodeMarkStep = class extends Step {
4301
5635
  if (!node)
4302
5636
  return StepResult.fail("No node at mark step's position");
4303
5637
  let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
4304
- return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
5638
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4305
5639
  }
4306
5640
  invert(doc2) {
4307
5641
  let node = doc2.nodeAt(this.pos);
@@ -4347,7 +5681,7 @@ var RemoveNodeMarkStep = class extends Step {
4347
5681
  if (!node)
4348
5682
  return StepResult.fail("No node at mark step's position");
4349
5683
  let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
4350
- return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
5684
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4351
5685
  }
4352
5686
  invert(doc2) {
4353
5687
  let node = doc2.nodeAt(this.pos);
@@ -4612,7 +5946,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4612
5946
  let m2, newline = /\r?\n|\r/g, slice;
4613
5947
  while (m2 = newline.exec(child.text)) {
4614
5948
  if (!slice)
4615
- slice = new Slice(Fragment3.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
5949
+ slice = new Slice(Fragment2.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
4616
5950
  replSteps.push(new ReplaceStep(cur + m2.index, cur + m2.index + m2[0].length, slice));
4617
5951
  }
4618
5952
  }
@@ -4620,7 +5954,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4620
5954
  cur = end;
4621
5955
  }
4622
5956
  if (!match.validEnd) {
4623
- let fill = match.fillBefore(Fragment3.empty, true);
5957
+ let fill = match.fillBefore(Fragment2.empty, true);
4624
5958
  tr.replace(cur, cur, new Slice(fill, 0, 0));
4625
5959
  }
4626
5960
  for (let i = replSteps.length - 1; i >= 0; i--)
@@ -4650,20 +5984,20 @@ function lift(tr, range, target) {
4650
5984
  let { $from, $to, depth } = range;
4651
5985
  let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
4652
5986
  let start = gapStart, end = gapEnd;
4653
- let before = Fragment3.empty, openStart = 0;
5987
+ let before = Fragment2.empty, openStart = 0;
4654
5988
  for (let d = depth, splitting = false; d > target; d--)
4655
5989
  if (splitting || $from.index(d) > 0) {
4656
5990
  splitting = true;
4657
- before = Fragment3.from($from.node(d).copy(before));
5991
+ before = Fragment2.from($from.node(d).copy(before));
4658
5992
  openStart++;
4659
5993
  } else {
4660
5994
  start--;
4661
5995
  }
4662
- let after = Fragment3.empty, openEnd = 0;
5996
+ let after = Fragment2.empty, openEnd = 0;
4663
5997
  for (let d = depth, splitting = false; d > target; d--)
4664
5998
  if (splitting || $to.after(d + 1) < $to.end(d)) {
4665
5999
  splitting = true;
4666
- after = Fragment3.from($to.node(d).copy(after));
6000
+ after = Fragment2.from($to.node(d).copy(after));
4667
6001
  openEnd++;
4668
6002
  } else {
4669
6003
  end++;
@@ -4703,14 +6037,14 @@ function findWrappingInside(range, type) {
4703
6037
  return inside;
4704
6038
  }
4705
6039
  function wrap(tr, range, wrappers) {
4706
- let content = Fragment3.empty;
6040
+ let content = Fragment2.empty;
4707
6041
  for (let i = wrappers.length - 1; i >= 0; i--) {
4708
6042
  if (content.size) {
4709
6043
  let match = wrappers[i].type.contentMatch.matchFragment(content);
4710
6044
  if (!match || !match.validEnd)
4711
6045
  throw new RangeError("Wrapper type given to Transform.wrap does not form valid content of its parent wrapper");
4712
6046
  }
4713
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
6047
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
4714
6048
  }
4715
6049
  let start = range.start, end = range.end;
4716
6050
  tr.step(new ReplaceAroundStep(start, end, start, end, new Slice(content, 0, 0), wrappers.length, true));
@@ -4735,7 +6069,7 @@ function setBlockType(tr, from, to, type, attrs) {
4735
6069
  clearIncompatible(tr, tr.mapping.slice(mapFrom).map(pos, 1), type, void 0, convertNewlines === null);
4736
6070
  let mapping = tr.mapping.slice(mapFrom);
4737
6071
  let startM = mapping.map(pos, 1), endM = mapping.map(pos + node.nodeSize, 1);
4738
- tr.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice(Fragment3.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
6072
+ tr.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice(Fragment2.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
4739
6073
  if (convertNewlines === true)
4740
6074
  replaceNewlines(tr, node, pos, mapFrom);
4741
6075
  return false;
@@ -4776,7 +6110,7 @@ function setNodeMarkup(tr, pos, type, attrs, marks) {
4776
6110
  return tr.replaceWith(pos, pos + node.nodeSize, newNode);
4777
6111
  if (!type.validContent(node.content))
4778
6112
  throw new RangeError("Invalid content for node type " + type.name);
4779
- tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment3.from(newNode), 0, 0), 1, true));
6113
+ tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment2.from(newNode), 0, 0), 1, true));
4780
6114
  }
4781
6115
  function canSplit(doc2, pos, depth = 1, typesAfter) {
4782
6116
  let $pos = doc2.resolve(pos), base2 = $pos.depth - depth;
@@ -4800,11 +6134,11 @@ function canSplit(doc2, pos, depth = 1, typesAfter) {
4800
6134
  return $pos.node(base2).canReplaceWith(index, index, baseType ? baseType.type : $pos.node(base2 + 1).type);
4801
6135
  }
4802
6136
  function split(tr, pos, depth = 1, typesAfter) {
4803
- let $pos = tr.doc.resolve(pos), before = Fragment3.empty, after = Fragment3.empty;
6137
+ let $pos = tr.doc.resolve(pos), before = Fragment2.empty, after = Fragment2.empty;
4804
6138
  for (let d = $pos.depth, e = $pos.depth - depth, i = depth - 1; d > e; d--, i--) {
4805
- before = Fragment3.from($pos.node(d).copy(before));
6139
+ before = Fragment2.from($pos.node(d).copy(before));
4806
6140
  let typeAfter = typesAfter && typesAfter[i];
4807
- after = Fragment3.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
6141
+ after = Fragment2.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
4808
6142
  }
4809
6143
  tr.step(new ReplaceStep(pos, pos, new Slice(before.append(after), depth, depth), true));
4810
6144
  }
@@ -4919,7 +6253,7 @@ var Fitter = class {
4919
6253
  this.$to = $to;
4920
6254
  this.unplaced = unplaced;
4921
6255
  this.frontier = [];
4922
- this.placed = Fragment3.empty;
6256
+ this.placed = Fragment2.empty;
4923
6257
  for (let i = 0; i <= $from.depth; i++) {
4924
6258
  let node = $from.node(i);
4925
6259
  this.frontier.push({
@@ -4928,7 +6262,7 @@ var Fitter = class {
4928
6262
  });
4929
6263
  }
4930
6264
  for (let i = $from.depth; i > 0; i--)
4931
- this.placed = Fragment3.from($from.node(i).copy(this.placed));
6265
+ this.placed = Fragment2.from($from.node(i).copy(this.placed));
4932
6266
  }
4933
6267
  get depth() {
4934
6268
  return this.frontier.length - 1;
@@ -4985,7 +6319,7 @@ var Fitter = class {
4985
6319
  let first2 = fragment.firstChild;
4986
6320
  for (let frontierDepth = this.depth; frontierDepth >= 0; frontierDepth--) {
4987
6321
  let { type, match } = this.frontier[frontierDepth], wrap2, inject = null;
4988
- if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment3.from(first2), false)) : parent && type.compatibleContent(parent.type)))
6322
+ if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment2.from(first2), false)) : parent && type.compatibleContent(parent.type)))
4989
6323
  return { sliceDepth, frontierDepth, parent, inject };
4990
6324
  else if (pass == 2 && first2 && (wrap2 = match.findWrapping(first2.type)))
4991
6325
  return { sliceDepth, frontierDepth, parent, wrap: wrap2 };
@@ -5045,7 +6379,7 @@ var Fitter = class {
5045
6379
  let toEnd = taken == fragment.childCount;
5046
6380
  if (!toEnd)
5047
6381
  openEndCount = -1;
5048
- this.placed = addToFragment(this.placed, frontierDepth, Fragment3.from(add));
6382
+ this.placed = addToFragment(this.placed, frontierDepth, Fragment2.from(add));
5049
6383
  this.frontier[frontierDepth].match = match;
5050
6384
  if (toEnd && openEndCount < 0 && parent && parent.type == this.frontier[this.depth].type && this.frontier.length > 1)
5051
6385
  this.closeFrontierNode();
@@ -5102,12 +6436,12 @@ var Fitter = class {
5102
6436
  openFrontierNode(type, attrs = null, content) {
5103
6437
  let top = this.frontier[this.depth];
5104
6438
  top.match = top.match.matchType(type);
5105
- this.placed = addToFragment(this.placed, this.depth, Fragment3.from(type.create(attrs, content)));
6439
+ this.placed = addToFragment(this.placed, this.depth, Fragment2.from(type.create(attrs, content)));
5106
6440
  this.frontier.push({ type, match: type.contentMatch });
5107
6441
  }
5108
6442
  closeFrontierNode() {
5109
6443
  let open = this.frontier.pop();
5110
- let add = open.match.fillBefore(Fragment3.empty, true);
6444
+ let add = open.match.fillBefore(Fragment2.empty, true);
5111
6445
  if (add.childCount)
5112
6446
  this.placed = addToFragment(this.placed, this.frontier.length, add);
5113
6447
  }
@@ -5136,7 +6470,7 @@ function closeNodeStart(node, openStart, openEnd) {
5136
6470
  if (openStart > 0) {
5137
6471
  frag = node.type.contentMatch.fillBefore(frag).append(frag);
5138
6472
  if (openEnd <= 0)
5139
- frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment3.empty, true));
6473
+ frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment2.empty, true));
5140
6474
  }
5141
6475
  return node.copy(frag);
5142
6476
  }
@@ -5228,7 +6562,7 @@ function closeFragment(fragment, depth, oldOpen, newOpen, parent) {
5228
6562
  if (depth > newOpen) {
5229
6563
  let match = parent.contentMatchAt(0);
5230
6564
  let start = match.fillBefore(fragment).append(fragment);
5231
- fragment = start.append(match.matchFragment(start).fillBefore(Fragment3.empty, true));
6565
+ fragment = start.append(match.matchFragment(start).fillBefore(Fragment2.empty, true));
5232
6566
  }
5233
6567
  return fragment;
5234
6568
  }
@@ -5238,7 +6572,7 @@ function replaceRangeWith(tr, from, to, node) {
5238
6572
  if (point != null)
5239
6573
  from = to = point;
5240
6574
  }
5241
- tr.replaceRange(from, to, new Slice(Fragment3.from(node), 0, 0));
6575
+ tr.replaceRange(from, to, new Slice(Fragment2.from(node), 0, 0));
5242
6576
  }
5243
6577
  function deleteRange(tr, from, to) {
5244
6578
  let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
@@ -5286,7 +6620,7 @@ var AttrStep = class extends Step {
5286
6620
  attrs[name] = node.attrs[name];
5287
6621
  attrs[this.attr] = this.value;
5288
6622
  let updated = node.type.create(attrs, null, node.marks);
5289
- return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
6623
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
5290
6624
  }
5291
6625
  getMap() {
5292
6626
  return StepMap.empty;
@@ -5421,7 +6755,7 @@ var Transform = class {
5421
6755
  fragment, node, or array of nodes.
5422
6756
  */
5423
6757
  replaceWith(from, to, content) {
5424
- return this.replace(from, to, new Slice(Fragment3.from(content), 0, 0));
6758
+ return this.replace(from, to, new Slice(Fragment2.from(content), 0, 0));
5425
6759
  }
5426
6760
  /**
5427
6761
  Delete the content between the given positions.
@@ -5923,7 +7257,7 @@ var NodeSelection = class extends Selection {
5923
7257
  return new NodeSelection($pos);
5924
7258
  }
5925
7259
  content() {
5926
- return new Slice(Fragment3.from(this.node), 0, 0);
7260
+ return new Slice(Fragment2.from(this.node), 0, 0);
5927
7261
  }
5928
7262
  eq(other) {
5929
7263
  return other instanceof NodeSelection && other.anchor == this.anchor;
@@ -6481,10 +7815,10 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6481
7815
  let canDelAfter = !isolated && $cut.parent.canReplace($cut.index(), $cut.index() + 1);
6482
7816
  if (canDelAfter && (conn = (match = before.contentMatchAt(before.childCount)).findWrapping(after.type)) && match.matchType(conn[0] || after.type).validEnd) {
6483
7817
  if (dispatch) {
6484
- let end = $cut.pos + after.nodeSize, wrap2 = Fragment3.empty;
7818
+ let end = $cut.pos + after.nodeSize, wrap2 = Fragment2.empty;
6485
7819
  for (let i = conn.length - 1; i >= 0; i--)
6486
- wrap2 = Fragment3.from(conn[i].create(null, wrap2));
6487
- wrap2 = Fragment3.from(before.copy(wrap2));
7820
+ wrap2 = Fragment2.from(conn[i].create(null, wrap2));
7821
+ wrap2 = Fragment2.from(before.copy(wrap2));
6488
7822
  let tr = state.tr.step(new ReplaceAroundStep($cut.pos - 1, end, $cut.pos, end, new Slice(wrap2, 1, 0), conn.length, true));
6489
7823
  let $joinAt = tr.doc.resolve(end + 2 * conn.length);
6490
7824
  if ($joinAt.nodeAfter && $joinAt.nodeAfter.type == before.type && canJoin(tr.doc, $joinAt.pos))
@@ -6513,9 +7847,9 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6513
7847
  afterDepth++;
6514
7848
  if (at.canReplace(at.childCount, at.childCount, afterText.content)) {
6515
7849
  if (dispatch) {
6516
- let end = Fragment3.empty;
7850
+ let end = Fragment2.empty;
6517
7851
  for (let i = wrap2.length - 1; i >= 0; i--)
6518
- end = Fragment3.from(wrap2[i].copy(end));
7852
+ end = Fragment2.from(wrap2[i].copy(end));
6519
7853
  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));
6520
7854
  dispatch(tr.scrollIntoView());
6521
7855
  }
@@ -6620,9 +7954,9 @@ function wrapRangeInList(tr, range, listType, attrs = null) {
6620
7954
  return true;
6621
7955
  }
6622
7956
  function doWrapInList(tr, range, wrappers, joinBefore, listType) {
6623
- let content = Fragment3.empty;
7957
+ let content = Fragment2.empty;
6624
7958
  for (let i = wrappers.length - 1; i >= 0; i--)
6625
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
7959
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
6626
7960
  tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
6627
7961
  let found2 = 0;
6628
7962
  for (let i = 0; i < wrappers.length; i++)
@@ -6656,7 +7990,7 @@ function liftListItem(itemType) {
6656
7990
  function liftToOuterList(state, dispatch, itemType, range) {
6657
7991
  let tr = state.tr, end = range.end, endOfList = range.$to.end(range.depth);
6658
7992
  if (end < endOfList) {
6659
- tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment3.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
7993
+ tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment2.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
6660
7994
  range = new NodeRange(tr.doc.resolve(range.$from.pos), tr.doc.resolve(endOfList), range.depth);
6661
7995
  }
6662
7996
  const target = liftTarget(range);
@@ -6680,10 +8014,10 @@ function liftOutOfList(state, dispatch, range) {
6680
8014
  return false;
6681
8015
  let atStart = range.startIndex == 0, atEnd = range.endIndex == list.childCount;
6682
8016
  let parent = $start.node(-1), indexBefore = $start.index(-1);
6683
- if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment3.empty : Fragment3.from(list))))
8017
+ if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment2.empty : Fragment2.from(list))))
6684
8018
  return false;
6685
8019
  let start = $start.pos, end = start + item.nodeSize;
6686
- 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));
8020
+ 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));
6687
8021
  dispatch(tr.scrollIntoView());
6688
8022
  return true;
6689
8023
  }
@@ -6701,8 +8035,8 @@ function sinkListItem(itemType) {
6701
8035
  return false;
6702
8036
  if (dispatch) {
6703
8037
  let nestedBefore = nodeBefore.lastChild && nodeBefore.lastChild.type == parent.type;
6704
- let inner = Fragment3.from(nestedBefore ? itemType.create() : null);
6705
- let slice = new Slice(Fragment3.from(itemType.create(null, Fragment3.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
8038
+ let inner = Fragment2.from(nestedBefore ? itemType.create() : null);
8039
+ let slice = new Slice(Fragment2.from(itemType.create(null, Fragment2.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
6706
8040
  let before = range.start, after = range.end;
6707
8041
  dispatch(state.tr.step(new ReplaceAroundStep(before - (nestedBefore ? 3 : 1), after, before, after, slice, 1, true)).scrollIntoView());
6708
8042
  }
@@ -7321,7 +8655,7 @@ function elementFromString(value) {
7321
8655
  return removeWhitespaces(html);
7322
8656
  }
7323
8657
  function createNodeFromContent(content, schema, options) {
7324
- if (content instanceof Node || content instanceof Fragment3) {
8658
+ if (content instanceof Node || content instanceof Fragment2) {
7325
8659
  return content;
7326
8660
  }
7327
8661
  options = {
@@ -7335,7 +8669,7 @@ function createNodeFromContent(content, schema, options) {
7335
8669
  try {
7336
8670
  const isArrayContent = Array.isArray(content) && content.length > 0;
7337
8671
  if (isArrayContent) {
7338
- return Fragment3.fromArray(content.map((item) => schema.nodeFromJSON(item)));
8672
+ return Fragment2.fromArray(content.map((item) => schema.nodeFromJSON(item)));
7339
8673
  }
7340
8674
  const node = schema.nodeFromJSON(content);
7341
8675
  if (options.errorOnInvalidContent) {
@@ -7482,7 +8816,7 @@ var insertContentAt = (position, value, options) => ({ tr, dispatch, editor }) =
7482
8816
  if (isOnlyTextContent) {
7483
8817
  if (Array.isArray(value)) {
7484
8818
  newContent = value.map((v) => v.text || "").join("");
7485
- } else if (value instanceof Fragment3) {
8819
+ } else if (value instanceof Fragment2) {
7486
8820
  let text = "";
7487
8821
  value.forEach((node) => {
7488
8822
  if (node.text) {
@@ -7962,7 +9296,7 @@ function removeDuplicates(array, by = JSON.stringify) {
7962
9296
  function simplifyChangedRanges(changes) {
7963
9297
  const uniqueChanges = removeDuplicates(changes);
7964
9298
  return uniqueChanges.length === 1 ? uniqueChanges : uniqueChanges.filter((change, index) => {
7965
- const rest = uniqueChanges.filter((_18, i) => i !== index);
9299
+ const rest = uniqueChanges.filter((_20, i) => i !== index);
7966
9300
  return !rest.some((otherChange) => {
7967
9301
  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;
7968
9302
  });
@@ -8353,10 +9687,10 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8353
9687
  return false;
8354
9688
  }
8355
9689
  if (dispatch) {
8356
- let wrap2 = Fragment3.empty;
9690
+ let wrap2 = Fragment2.empty;
8357
9691
  const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
8358
9692
  for (let d = $from.depth - depthBefore; d >= $from.depth - 3; d -= 1) {
8359
- wrap2 = Fragment3.from($from.node(d).copy(wrap2));
9693
+ wrap2 = Fragment2.from($from.node(d).copy(wrap2));
8360
9694
  }
8361
9695
  const depthAfter = (
8362
9696
  // eslint-disable-next-line no-nested-ternary
@@ -8367,7 +9701,7 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8367
9701
  ...overrideAttrs
8368
9702
  };
8369
9703
  const nextType2 = ((_a = type.contentMatch.defaultType) == null ? void 0 : _a.createAndFill(newNextTypeAttributes2)) || void 0;
8370
- wrap2 = wrap2.append(Fragment3.from(type.createAndFill(null, nextType2) || void 0));
9704
+ wrap2 = wrap2.append(Fragment2.from(type.createAndFill(null, nextType2) || void 0));
8371
9705
  const start = $from.before($from.depth - (depthBefore - 1));
8372
9706
  tr.replace(start, $from.after(-depthAfter), new Slice(wrap2, 4 - depthBefore, 0));
8373
9707
  let sel = -1;
@@ -8987,7 +10321,7 @@ var Drop = Extension.create({
8987
10321
  new Plugin({
8988
10322
  key: new PluginKey("tiptapDrop"),
8989
10323
  props: {
8990
- handleDrop: (_18, e, slice, moved) => {
10324
+ handleDrop: (_20, e, slice, moved) => {
8991
10325
  this.editor.emit("drop", {
8992
10326
  editor: this.editor,
8993
10327
  event: e,
@@ -9789,8 +11123,23 @@ var Underline = Mark2.create({
9789
11123
  }
9790
11124
  });
9791
11125
  var index_default = Underline;
9792
- var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9793
- const theme = material.useTheme();
11126
+ var AppRichTextEditor = ({
11127
+ name,
11128
+ label,
11129
+ required = false,
11130
+ variant = "outlined",
11131
+ placeholder,
11132
+ sx,
11133
+ editorSx,
11134
+ toolbarSx,
11135
+ contentSx,
11136
+ errorSx,
11137
+ labelSx,
11138
+ buttonSx,
11139
+ activeButtonSx,
11140
+ dialogSx
11141
+ }) => {
11142
+ material.useTheme();
9794
11143
  const { values, setFieldValue } = formik.useFormikContext();
9795
11144
  const [linkDialogOpen, setLinkDialogOpen] = react.useState(false);
9796
11145
  const [linkUrl, setLinkUrl] = react.useState("");
@@ -9813,11 +11162,6 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9813
11162
  }, [values[name]]);
9814
11163
  if (!editor)
9815
11164
  return null;
9816
- const openLinkDialog = () => {
9817
- const previousUrl = editor.getAttributes("link").href || "";
9818
- setLinkUrl(previousUrl);
9819
- setLinkDialogOpen(true);
9820
- };
9821
11165
  const applyLink = () => {
9822
11166
  editor.chain().focus().extendMarkRange("link").setLink({ href: linkUrl }).run();
9823
11167
  setLinkDialogOpen(false);
@@ -9826,24 +11170,63 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9826
11170
  editor.chain().focus().unsetLink().run();
9827
11171
  setLinkDialogOpen(false);
9828
11172
  };
9829
- return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%" }, children: [
11173
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%", ...sx }, children: [
11174
+ /* @__PURE__ */ jsxRuntime.jsx(
11175
+ formik.ErrorMessage,
11176
+ {
11177
+ name,
11178
+ render: (msg) => /* @__PURE__ */ jsxRuntime.jsx(
11179
+ material.Typography,
11180
+ {
11181
+ variant: "caption",
11182
+ sx: [{
11183
+ color: "error.main",
11184
+ display: "block",
11185
+ mt: 0.5,
11186
+ ...errorSx
11187
+ }],
11188
+ children: msg
11189
+ }
11190
+ )
11191
+ }
11192
+ ),
9830
11193
  label && /* @__PURE__ */ jsxRuntime.jsxs(
9831
11194
  material.Typography,
9832
11195
  {
9833
11196
  variant: "button",
9834
- sx: { color: theme.palette.text.primary, mb: 1, display: "block" },
11197
+ sx: [{
11198
+ color: "text.primary",
11199
+ mb: 1,
11200
+ display: "block",
11201
+ ...labelSx
11202
+ }],
9835
11203
  children: [
9836
11204
  label,
9837
11205
  required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
9838
11206
  ]
9839
11207
  }
9840
11208
  ),
9841
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1, display: "flex", gap: 1, flexWrap: "wrap" }, children: [
11209
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
11210
+ mb: 1,
11211
+ display: "flex",
11212
+ gap: 1,
11213
+ flexWrap: "wrap",
11214
+ p: 1,
11215
+ bgcolor: "background.paper",
11216
+ borderRadius: 1,
11217
+ border: "1px solid",
11218
+ borderColor: "divider",
11219
+ ...toolbarSx
11220
+ }, children: [
9842
11221
  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(
9843
11222
  material.IconButton,
9844
11223
  {
9845
11224
  onClick: () => editor.chain().focus().toggleBold().run(),
9846
11225
  color: editor.isActive("bold") ? "primary" : "default",
11226
+ sx: {
11227
+ ...buttonSx,
11228
+ ...editor.isActive("bold") ? activeButtonSx : {}
11229
+ },
9847
11230
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatBoldIcon__default.default, {})
9848
11231
  }
9849
11232
  ) }),
@@ -9852,6 +11235,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9852
11235
  {
9853
11236
  onClick: () => editor.chain().focus().toggleItalic().run(),
9854
11237
  color: editor.isActive("italic") ? "primary" : "default",
11238
+ sx: {
11239
+ ...buttonSx,
11240
+ ...editor.isActive("italic") ? activeButtonSx : {}
11241
+ },
9855
11242
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatItalicIcon__default.default, {})
9856
11243
  }
9857
11244
  ) }),
@@ -9860,6 +11247,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9860
11247
  {
9861
11248
  onClick: () => editor.chain().focus().toggleUnderline().run(),
9862
11249
  color: editor.isActive("underline") ? "primary" : "default",
11250
+ sx: {
11251
+ ...buttonSx,
11252
+ ...editor.isActive("underline") ? activeButtonSx : {}
11253
+ },
9863
11254
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatUnderlinedIcon__default.default, {})
9864
11255
  }
9865
11256
  ) }),
@@ -9868,6 +11259,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9868
11259
  {
9869
11260
  onClick: () => editor.chain().focus().toggleStrike().run(),
9870
11261
  color: editor.isActive("strike") ? "primary" : "default",
11262
+ sx: {
11263
+ ...buttonSx,
11264
+ ...editor.isActive("strike") ? activeButtonSx : {}
11265
+ },
9871
11266
  children: /* @__PURE__ */ jsxRuntime.jsx(StrikethroughSIcon__default.default, {})
9872
11267
  }
9873
11268
  ) }),
@@ -9876,6 +11271,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9876
11271
  {
9877
11272
  onClick: () => editor.chain().focus().toggleBulletList().run(),
9878
11273
  color: editor.isActive("bulletList") ? "primary" : "default",
11274
+ sx: {
11275
+ ...buttonSx,
11276
+ ...editor.isActive("bulletList") ? activeButtonSx : {}
11277
+ },
9879
11278
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatListBulletedIcon__default.default, {})
9880
11279
  }
9881
11280
  ) }),
@@ -9884,6 +11283,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9884
11283
  {
9885
11284
  onClick: () => editor.chain().focus().toggleOrderedList().run(),
9886
11285
  color: editor.isActive("orderedList") ? "primary" : "default",
11286
+ sx: {
11287
+ ...buttonSx,
11288
+ ...editor.isActive("orderedList") ? activeButtonSx : {}
11289
+ },
9887
11290
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatListNumberedIcon__default.default, {})
9888
11291
  }
9889
11292
  ) }),
@@ -9892,6 +11295,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9892
11295
  {
9893
11296
  onClick: () => editor.chain().focus().setTextAlign("left").run(),
9894
11297
  color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
11298
+ sx: {
11299
+ ...buttonSx,
11300
+ ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
11301
+ },
9895
11302
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignLeftIcon__default.default, {})
9896
11303
  }
9897
11304
  ) }),
@@ -9900,6 +11307,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9900
11307
  {
9901
11308
  onClick: () => editor.chain().focus().setTextAlign("center").run(),
9902
11309
  color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
11310
+ sx: {
11311
+ ...buttonSx,
11312
+ ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
11313
+ },
9903
11314
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignCenterIcon__default.default, {})
9904
11315
  }
9905
11316
  ) }),
@@ -9908,6 +11319,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9908
11319
  {
9909
11320
  onClick: () => editor.chain().focus().setTextAlign("right").run(),
9910
11321
  color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
11322
+ sx: {
11323
+ ...buttonSx,
11324
+ ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
11325
+ },
9911
11326
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignRightIcon__default.default, {})
9912
11327
  }
9913
11328
  ) }),
@@ -9916,36 +11331,78 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9916
11331
  {
9917
11332
  onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
9918
11333
  color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
11334
+ sx: {
11335
+ ...buttonSx,
11336
+ ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
11337
+ },
9919
11338
  children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "1rem" } })
9920
11339
  }
9921
11340
  ) }),
9922
- /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsx(
11341
+ /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsxs(
9923
11342
  material.IconButton,
9924
11343
  {
9925
11344
  onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
9926
11345
  color: editor.isActive("heading", { level: 2 }) ? "primary" : "default",
9927
- children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } })
9928
- }
9929
- ) }),
9930
- /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Insert Link", children: /* @__PURE__ */ jsxRuntime.jsx(
9931
- material.IconButton,
9932
- {
9933
- onClick: openLinkDialog,
9934
- color: editor.isActive("link") ? "primary" : "default",
9935
- children: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon__default.default, {})
11346
+ sx: {
11347
+ ...buttonSx,
11348
+ ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
11349
+ },
11350
+ children: [
11351
+ /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } }),
11352
+ /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {})
11353
+ ]
9936
11354
  }
9937
11355
  ) }),
9938
- /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Undo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().undo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {}) }) }),
9939
11356
  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(RedoIcon__default.default, {}) }) })
9940
11357
  ] }),
9941
11358
  /* @__PURE__ */ jsxRuntime.jsx(
9942
11359
  material.Box,
9943
11360
  {
9944
11361
  sx: {
9945
- border: `1px solid ${theme.palette.grey[400]}`,
11362
+ border: "1px solid",
11363
+ borderColor: "divider",
9946
11364
  borderRadius: 1,
11365
+ p: 2,
9947
11366
  minHeight: 200,
9948
- p: 2
11367
+ maxHeight: 400,
11368
+ overflowY: "auto",
11369
+ bgcolor: "background.paper",
11370
+ "& .ProseMirror": {
11371
+ outline: "none",
11372
+ minHeight: 150,
11373
+ "& > * + *": {
11374
+ mt: 2
11375
+ },
11376
+ "& h1": {
11377
+ fontSize: "2em",
11378
+ fontWeight: "bold",
11379
+ lineHeight: 1.2,
11380
+ color: "text.primary"
11381
+ },
11382
+ "& h2": {
11383
+ fontSize: "1.5em",
11384
+ fontWeight: "bold",
11385
+ lineHeight: 1.3,
11386
+ color: "text.primary"
11387
+ },
11388
+ "& p": {
11389
+ color: "text.primary",
11390
+ lineHeight: 1.6
11391
+ },
11392
+ "& ul, & ol": {
11393
+ pl: 3,
11394
+ color: "text.primary"
11395
+ },
11396
+ "& a": {
11397
+ color: "primary.main",
11398
+ textDecoration: "none",
11399
+ "&:hover": {
11400
+ textDecoration: "underline"
11401
+ }
11402
+ },
11403
+ ...contentSx
11404
+ },
11405
+ ...editorSx
9949
11406
  },
9950
11407
  children: /* @__PURE__ */ jsxRuntime.jsx(
9951
11408
  react$2.EditorContent,
@@ -9965,142 +11422,513 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9965
11422
  children: /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name, component: "div" })
9966
11423
  }
9967
11424
  ),
9968
- /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open: linkDialogOpen, onClose: () => setLinkDialogOpen(false), children: [
9969
- /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: "Insert Link" }),
9970
- /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
9971
- material.TextField,
9972
- {
9973
- autoFocus: true,
9974
- margin: "dense",
9975
- label: "URL",
9976
- type: "url",
9977
- fullWidth: true,
9978
- variant: "outlined",
9979
- value: linkUrl,
9980
- onChange: (e) => setLinkUrl(e.target.value)
9981
- }
9982
- ) }),
9983
- /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
9984
- /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: removeLink, color: "error", children: "Remove" }),
9985
- /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: () => setLinkDialogOpen(false), children: "Cancel" }),
9986
- /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: applyLink, variant: "contained", children: "Apply" })
9987
- ] })
9988
- ] })
11425
+ /* @__PURE__ */ jsxRuntime.jsxs(
11426
+ material.Dialog,
11427
+ {
11428
+ open: linkDialogOpen,
11429
+ onClose: () => setLinkDialogOpen(false),
11430
+ PaperProps: {
11431
+ sx: {
11432
+ minWidth: 400,
11433
+ p: 2,
11434
+ bgcolor: "background.paper",
11435
+ borderRadius: 1,
11436
+ border: "1px solid",
11437
+ borderColor: "divider",
11438
+ "& .MuiDialogTitle-root": {
11439
+ borderBottom: "1px solid",
11440
+ borderColor: "divider",
11441
+ p: 2
11442
+ },
11443
+ "& .MuiDialogContent-root": {
11444
+ p: 2
11445
+ },
11446
+ "& .MuiDialogActions-root": {
11447
+ p: 2,
11448
+ borderTop: "1px solid",
11449
+ borderColor: "divider"
11450
+ },
11451
+ ...dialogSx
11452
+ }
11453
+ },
11454
+ children: [
11455
+ /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: "Insert Link" }),
11456
+ /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
11457
+ material.TextField,
11458
+ {
11459
+ autoFocus: true,
11460
+ margin: "dense",
11461
+ id: "url",
11462
+ label: "URL",
11463
+ type: "url",
11464
+ fullWidth: true,
11465
+ variant,
11466
+ value: linkUrl,
11467
+ onChange: (e) => setLinkUrl(e.target.value),
11468
+ placeholder: "https://example.com"
11469
+ }
11470
+ ) }),
11471
+ /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
11472
+ /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: removeLink, color: "error", children: "Remove" }),
11473
+ /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: () => setLinkDialogOpen(false), children: "Cancel" }),
11474
+ /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: applyLink, variant: "contained", children: "Apply" })
11475
+ ] })
11476
+ ]
11477
+ }
11478
+ )
9989
11479
  ] });
9990
11480
  };
9991
11481
  var AppRichTextEditor_default = AppRichTextEditor;
9992
- function AppSearchableMultiSelector({
9993
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
9994
- multiple = true,
9995
- name,
9996
- label,
9997
- options = [],
9998
- required,
9999
- setSearchQuery
10000
- }) {
10001
- const { values, setFieldValue, errors, touched } = formik.useFormikContext();
10002
- const fieldError = _17__default.default.get(errors, name);
10003
- const isTouched = Boolean(_17__default.default.get(touched, name));
10004
- const val = _17__default.default.get(values, name);
10005
- return /* @__PURE__ */ jsxRuntime.jsxs(
10006
- material.FormControl,
10007
- {
10008
- fullWidth: true,
10009
- sx: (theme) => ({
10010
- "& .MuiOutlinedInput-root": {
10011
- borderRadius: "8px",
10012
- color: theme.palette.common.black
10013
- },
10014
- "& .MuiSvgIcon-root": {
10015
- color: theme.palette.common.black
10016
- },
10017
- "& .MuiSelect-icon": {
10018
- color: theme.palette.common.black
10019
- },
10020
- ".MuiInputLabel-root": {
10021
- color: "text.primary"
11482
+ var AppSearchableMultiSelector = react.forwardRef(
11483
+ ({
11484
+ name,
11485
+ label,
11486
+ multiple = true,
11487
+ options = [],
11488
+ setSearchQuery,
11489
+ required = false,
11490
+ variant = "outlined",
11491
+ disabled = false,
11492
+ readOnly = false,
11493
+ showHelperText = false,
11494
+ helperText,
11495
+ maxSelections,
11496
+ showSelectedCount = false,
11497
+ sx,
11498
+ formControlSx,
11499
+ labelSx,
11500
+ inputSx,
11501
+ textFieldSx,
11502
+ autocompleteSx,
11503
+ listboxSx,
11504
+ optionSx,
11505
+ chipSx,
11506
+ errorSx,
11507
+ helperTextSx,
11508
+ selectedCountSx,
11509
+ renderInput: externalRenderInput,
11510
+ renderOption: externalRenderOption,
11511
+ renderTags: externalRenderTags,
11512
+ renderGroup: externalRenderGroup,
11513
+ labelComponent: LabelComponent = material.InputLabel,
11514
+ inputComponent: InputComponent = "input",
11515
+ errorComponent: ErrorComponent = material.Typography,
11516
+ helperTextComponent: HelperTextComponent = material.FormHelperText,
11517
+ labelProps = {},
11518
+ inputProps = {},
11519
+ textFieldProps = {},
11520
+ autocompleteProps = {},
11521
+ checkboxProps = {},
11522
+ chipProps = {},
11523
+ errorProps = {},
11524
+ helperTextProps = {},
11525
+ className = "",
11526
+ formControlClassName = "",
11527
+ labelClassName = "",
11528
+ inputClassName = "",
11529
+ textFieldClassName = "",
11530
+ autocompleteClassName = "",
11531
+ listboxClassName = "",
11532
+ optionClassName = "",
11533
+ chipClassName = "",
11534
+ errorClassName = "",
11535
+ helperTextClassName = "",
11536
+ onInputChange: externalOnInputChange,
11537
+ onChange: externalOnChange,
11538
+ onOpen,
11539
+ onClose,
11540
+ onBlur: externalOnBlur,
11541
+ onFocus: externalOnFocus,
11542
+ onClear,
11543
+ onMaxSelectionsReached,
11544
+ onRemove,
11545
+ onAdd,
11546
+ ...otherProps
11547
+ }, ref) => {
11548
+ material.useTheme();
11549
+ const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
11550
+ const fieldError = _19__default.default.get(errors, name);
11551
+ const isTouched = Boolean(_19__default.default.get(touched, name));
11552
+ const hasError = Boolean(fieldError) && isTouched;
11553
+ const val = _19__default.default.get(values, name);
11554
+ const selectedValues = Array.isArray(val) ? val : [];
11555
+ const selectedCount = selectedValues.length;
11556
+ const handleChange = (event, value, reason, details) => {
11557
+ const normalizedValue = (() => {
11558
+ if (value === null)
11559
+ return [];
11560
+ const arr = Array.isArray(value) ? value : [value];
11561
+ return arr.map(
11562
+ (item) => typeof item === "string" ? { value: item, label: item } : item
11563
+ );
11564
+ })();
11565
+ if (maxSelections && normalizedValue.length > maxSelections) {
11566
+ if (onMaxSelectionsReached) {
11567
+ onMaxSelectionsReached(maxSelections);
11568
+ }
11569
+ return;
11570
+ }
11571
+ if (reason === "selectOption" || reason === "removeOption") {
11572
+ const added = normalizedValue.filter(
11573
+ (item) => !selectedValues.some((v) => v.value === item.value)
11574
+ );
11575
+ const removed = selectedValues.filter(
11576
+ (item) => !normalizedValue.some((v) => v.value === item.value)
11577
+ );
11578
+ if (added.length > 0 && onAdd) {
11579
+ added.forEach((item) => onAdd(item));
11580
+ }
11581
+ if (removed.length > 0 && onRemove) {
11582
+ removed.forEach((item) => onRemove(item));
11583
+ }
11584
+ }
11585
+ setFieldValue(name, normalizedValue, true);
11586
+ if (externalOnChange) {
11587
+ externalOnChange(event, normalizedValue, reason);
11588
+ }
11589
+ };
11590
+ const handleInputChange = (event, value, reason) => {
11591
+ if (setSearchQuery) {
11592
+ setSearchQuery(value);
11593
+ }
11594
+ if (externalOnInputChange) {
11595
+ externalOnInputChange(event, value, reason);
11596
+ }
11597
+ };
11598
+ const handleBlur = (event) => {
11599
+ setFieldTouched(name, true, true);
11600
+ if (externalOnBlur) {
11601
+ externalOnBlur(event);
11602
+ }
11603
+ };
11604
+ const handleFocus = (event) => {
11605
+ if (externalOnFocus) {
11606
+ externalOnFocus(event);
11607
+ }
11608
+ };
11609
+ const filterOptions = (options2, { inputValue }) => {
11610
+ if (!inputValue)
11611
+ return options2;
11612
+ const inputValueLower = inputValue.toLowerCase();
11613
+ return options2.filter(
11614
+ (option) => {
11615
+ var _a, _b, _c, _d;
11616
+ 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));
11617
+ }
11618
+ );
11619
+ };
11620
+ const defaultRenderInput = (params) => /* @__PURE__ */ jsxRuntime.jsx(
11621
+ material.TextField,
11622
+ {
11623
+ ...params,
11624
+ variant,
11625
+ error: hasError,
11626
+ helperText: "",
11627
+ placeholder: "",
11628
+ inputRef: inputProps.ref,
11629
+ inputProps: {
11630
+ ...params.inputProps,
11631
+ ...inputProps,
11632
+ className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
10022
11633
  },
10023
- ".MuiInputLabel-root.Mui-focused": {
10024
- color: "text.primary"
11634
+ InputProps: {
11635
+ ...params.InputProps,
11636
+ ...textFieldProps.InputProps,
11637
+ className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
10025
11638
  },
10026
- "& .MuiSelect-select": {
10027
- color: "text.primary"
10028
- }
10029
- }),
10030
- children: [
10031
- /* @__PURE__ */ jsxRuntime.jsxs(material.InputLabel, { sx: { mb: 1 }, shrink: true, htmlFor: `autocomplete-${name}`, children: [
10032
- label,
10033
- " ",
10034
- required === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: "*" })
10035
- ] }),
10036
- /* @__PURE__ */ jsxRuntime.jsx(
10037
- material.Autocomplete,
11639
+ sx: [
10038
11640
  {
10039
- multiple: true,
10040
- id: `autocomplete-${name}`,
10041
- options: options || [],
10042
- value: val,
10043
- defaultValue: val,
10044
- filterOptions: (options2, { inputValue }) => {
10045
- return options2.filter(
10046
- (option) => {
10047
- var _a, _b, _c, _d;
10048
- 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()));
10049
- }
10050
- );
11641
+ "& .MuiOutlinedInput-root": {
11642
+ borderRadius: "8px",
11643
+ "& fieldset": {
11644
+ borderColor: hasError ? "error.main" : "divider"
11645
+ },
11646
+ "&:hover fieldset": {
11647
+ borderColor: hasError ? "error.main" : "text.primary"
11648
+ },
11649
+ "&.Mui-focused fieldset": {
11650
+ borderColor: hasError ? "error.main" : "primary.main"
11651
+ },
11652
+ "& .MuiInputLabel-root": {
11653
+ // Your label styles here
11654
+ }
11655
+ }
11656
+ },
11657
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11658
+ ],
11659
+ ...textFieldProps
11660
+ }
11661
+ );
11662
+ const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ react.createElement(
11663
+ "li",
11664
+ {
11665
+ ...props,
11666
+ key: option.value,
11667
+ className: `${props.className || ""} ${optionClassName}`.trim(),
11668
+ style: {
11669
+ ...props.style,
11670
+ opacity: option.disabled ? 0.5 : 1,
11671
+ pointerEvents: option.disabled ? "none" : "auto"
11672
+ }
11673
+ },
11674
+ /* @__PURE__ */ jsxRuntime.jsx(
11675
+ material.Checkbox,
11676
+ {
11677
+ checked: selected,
11678
+ disabled: option.disabled,
11679
+ sx: {
11680
+ color: "text.secondary",
11681
+ "&.Mui-checked": {
11682
+ color: "primary.main"
10051
11683
  },
10052
- onInputChange: (event, value) => {
10053
- setSearchQuery(value);
11684
+ "&.Mui-disabled": {
11685
+ color: "text.disabled"
10054
11686
  },
10055
- onChange: (e, newValue) => {
10056
- setFieldValue(name, newValue, true);
11687
+ mr: 1,
11688
+ ...checkboxProps.sx
11689
+ },
11690
+ ...checkboxProps
11691
+ }
11692
+ ),
11693
+ option.icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
11694
+ /* @__PURE__ */ jsxRuntime.jsx(
11695
+ material.Typography,
11696
+ {
11697
+ variant: "body2",
11698
+ sx: [
11699
+ {
11700
+ color: option.disabled ? "text.disabled" : "text.primary",
11701
+ ...option.textSx
10057
11702
  },
10058
- sx: { ".MuiAutocomplete-input": { p: "0 !important" } },
10059
- renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
10060
- /* @__PURE__ */ jsxRuntime.jsx(material.Checkbox, { checked: selected, sx: { mr: 1 } }),
10061
- option.label
10062
- ] }),
10063
- renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
10064
- material.TextField,
10065
- {
10066
- ...params,
10067
- variant: "outlined",
10068
- error: Boolean(fieldError) && isTouched,
10069
- helperText: isTouched && typeof fieldError === "string" ? fieldError : "",
10070
- placeholder: ""
10071
- }
10072
- ),
10073
- renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ react.createElement(
10074
- material.Chip,
11703
+ ...Array.isArray(optionSx) ? optionSx : [optionSx]
11704
+ ],
11705
+ children: option.label
11706
+ }
11707
+ )
11708
+ );
11709
+ const defaultRenderTags = (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
11710
+ const { key, ...tagProps } = getTagProps({ index });
11711
+ return /* @__PURE__ */ react.createElement(
11712
+ material.Chip,
11713
+ {
11714
+ ...tagProps,
11715
+ key: option.value,
11716
+ label: option.label,
11717
+ disabled: disabled || option.disabled,
11718
+ sx: [
11719
+ {
11720
+ height: "24px",
11721
+ borderRadius: "4px",
11722
+ "& .MuiChip-deleteIcon": {
11723
+ color: "text.secondary",
11724
+ "&:hover": {
11725
+ color: "text.primary"
11726
+ }
11727
+ },
11728
+ ...chipSx
11729
+ },
11730
+ ...Array.isArray(chipSx) ? chipSx : [chipSx]
11731
+ ],
11732
+ className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
11733
+ ...chipProps
11734
+ }
11735
+ );
11736
+ }) });
11737
+ const renderSelectedCount = () => {
11738
+ if (!showSelectedCount || !multiple)
11739
+ return null;
11740
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11741
+ material.Typography,
11742
+ {
11743
+ variant: "caption",
11744
+ sx: [
11745
+ {
11746
+ mt: 0.5,
11747
+ color: "text.secondary",
11748
+ ...selectedCountSx
11749
+ },
11750
+ ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
11751
+ ],
11752
+ children: [
11753
+ `${selectedCount} selected`,
11754
+ maxSelections ? ` (max ${maxSelections})` : ""
11755
+ ]
11756
+ }
11757
+ );
11758
+ };
11759
+ return /* @__PURE__ */ jsxRuntime.jsx(
11760
+ material.Box,
11761
+ {
11762
+ ref,
11763
+ className: `app-searchable-multi-selector ${className}`.trim(),
11764
+ sx: [
11765
+ {
11766
+ width: "100%"
11767
+ },
11768
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11769
+ ],
11770
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
11771
+ material.FormControl,
11772
+ {
11773
+ fullWidth: true,
11774
+ error: hasError,
11775
+ disabled,
11776
+ className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
11777
+ sx: [
10075
11778
  {
10076
- label: option.label,
10077
- ...getTagProps({ index }),
10078
- key: option.value,
10079
- sx: { height: "20px", borderRadius: "2px", margin: "0px 3px 0px 0px !important" }
10080
- }
10081
- )),
10082
- disableCloseOnSelect: true,
10083
- isOptionEqualToValue: (option, value) => option.value === value.value
11779
+ "& .MuiAutocomplete-root": {
11780
+ "& .MuiOutlinedInput-root": {
11781
+ padding: "4px"
11782
+ },
11783
+ "& .MuiAutocomplete-input": {
11784
+ padding: "8.5px 4px"
11785
+ }
11786
+ }
11787
+ },
11788
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
11789
+ ],
11790
+ children: [
11791
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
11792
+ LabelComponent,
11793
+ {
11794
+ shrink: true,
11795
+ htmlFor: `autocomplete-${name}`,
11796
+ className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
11797
+ sx: [
11798
+ {
11799
+ mb: 1,
11800
+ color: hasError ? "error.main" : "text.primary",
11801
+ "&.Mui-focused": {
11802
+ color: hasError ? "error.main" : "primary.main"
11803
+ },
11804
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
11805
+ }
11806
+ ],
11807
+ ...labelProps,
11808
+ children: [
11809
+ label,
11810
+ required && /* @__PURE__ */ jsxRuntime.jsx(
11811
+ material.Box,
11812
+ {
11813
+ component: "span",
11814
+ sx: {
11815
+ color: "error.main",
11816
+ ml: 0.5
11817
+ },
11818
+ children: "*"
11819
+ }
11820
+ )
11821
+ ]
11822
+ }
11823
+ ),
11824
+ /* @__PURE__ */ jsxRuntime.jsx(
11825
+ material.Autocomplete,
11826
+ {
11827
+ multiple,
11828
+ id: `autocomplete-${name}`,
11829
+ options,
11830
+ value: selectedValues,
11831
+ filterOptions,
11832
+ onInputChange: handleInputChange,
11833
+ onChange: handleChange,
11834
+ onOpen,
11835
+ onClose,
11836
+ onBlur: handleBlur,
11837
+ onFocus: handleFocus,
11838
+ disableCloseOnSelect: multiple,
11839
+ readOnly,
11840
+ disabled,
11841
+ isOptionEqualToValue: (option, value) => option.value === value.value,
11842
+ getOptionLabel: (option) => typeof option === "string" ? option : option.label,
11843
+ getOptionDisabled: (option) => !!option.disabled,
11844
+ renderInput: externalRenderInput || defaultRenderInput,
11845
+ renderOption: externalRenderOption || defaultRenderOption,
11846
+ renderTags: externalRenderTags || defaultRenderTags,
11847
+ renderGroup: externalRenderGroup,
11848
+ ListboxProps: {
11849
+ className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
11850
+ sx: {
11851
+ "& .MuiAutocomplete-option": {
11852
+ px: 2,
11853
+ py: 1,
11854
+ '&[aria-selected="true"]': {
11855
+ backgroundColor: "action.selected",
11856
+ "&.Mui-focused": {
11857
+ backgroundColor: "action.hover"
11858
+ }
11859
+ },
11860
+ "&.Mui-focused": {
11861
+ backgroundColor: "action.hover"
11862
+ }
11863
+ },
11864
+ ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
11865
+ ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
11866
+ }
11867
+ },
11868
+ className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
11869
+ sx: [
11870
+ {
11871
+ "& .MuiAutocomplete-tag": {
11872
+ margin: 0,
11873
+ height: "auto"
11874
+ },
11875
+ "& .MuiAutocomplete-endAdornment": {
11876
+ right: 8
11877
+ }
11878
+ },
11879
+ ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
11880
+ ],
11881
+ ...autocompleteProps,
11882
+ ...otherProps
11883
+ }
11884
+ ),
11885
+ (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
11886
+ HelperTextComponent,
11887
+ {
11888
+ error: hasError,
11889
+ sx: [
11890
+ {
11891
+ mx: 0,
11892
+ mt: 0.5,
11893
+ ...hasError ? {
11894
+ color: "error.main",
11895
+ ...errorSx
11896
+ } : {
11897
+ color: "text.secondary",
11898
+ ...helperTextSx
11899
+ }
11900
+ }
11901
+ ],
11902
+ className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
11903
+ ...helperTextProps,
11904
+ children: hasError ? fieldError : helperText
11905
+ }
11906
+ ),
11907
+ renderSelectedCount()
11908
+ ]
10084
11909
  }
10085
11910
  )
10086
- ]
10087
- }
10088
- );
10089
- }
11911
+ }
11912
+ );
11913
+ }
11914
+ );
11915
+ AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
11916
+ var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
10090
11917
  function AppSearchableSelectInput({
10091
11918
  name,
10092
11919
  label,
10093
- required,
10094
11920
  options = [],
11921
+ required = false,
11922
+ variant = "outlined",
10095
11923
  placeholder,
10096
11924
  setSearchQuery,
10097
11925
  isResetRequired,
10098
11926
  ...otherProps
10099
11927
  }) {
10100
11928
  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
10101
- const fieldError = _17__default.default.get(errors, name);
10102
- const isTouched = _17__default.default.get(touched, name);
10103
- const val = _17__default.default.get(values, name);
11929
+ const fieldError = _19__default.default.get(errors, name);
11930
+ const isTouched = _19__default.default.get(touched, name);
11931
+ const val = _19__default.default.get(values, name);
10104
11932
  const selectedOption = options.find((option) => option.value === val) || null;
10105
11933
  const handleChange = (event, newValue) => {
10106
11934
  setFieldValue(name, newValue ? newValue.value : "");
@@ -10115,7 +11943,8 @@ function AppSearchableSelectInput({
10115
11943
  material.FormControl,
10116
11944
  {
10117
11945
  fullWidth: true,
10118
- variant: "outlined",
11946
+ variant,
11947
+ error: isTouched && Boolean(fieldError),
10119
11948
  sx: {
10120
11949
  padding: "0px !important",
10121
11950
  ".MuiAutocomplete-endAdornment": { right: "0 !important" },
@@ -10153,7 +11982,7 @@ function AppSearchableSelectInput({
10153
11982
  label,
10154
11983
  required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: " *" })
10155
11984
  ] }),
10156
- variant: "outlined",
11985
+ variant,
10157
11986
  placeholder,
10158
11987
  error: Boolean(fieldError) && isTouched,
10159
11988
  helperText: isTouched && fieldError ? fieldError : "",
@@ -10170,9 +11999,6 @@ function AppSearchableSelectInput({
10170
11999
  "& .MuiOutlinedInput-input": {
10171
12000
  color: "common.black"
10172
12001
  },
10173
- // '& .MuiOutlinedInput-notchedOutline': {
10174
- // borderColor: 'rgba(255,255,255,0.3)',
10175
- // },
10176
12002
  "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
10177
12003
  borderColor: "common.white"
10178
12004
  },
@@ -10188,72 +12014,413 @@ function AppSearchableSelectInput({
10188
12014
  }
10189
12015
  );
10190
12016
  }
10191
- function AppSelectInput({
10192
- name,
10193
- label,
10194
- fullWidth = true,
10195
- required,
10196
- options = [],
10197
- ...otherProps
10198
- }) {
10199
- const { errors, touched, getFieldProps, values } = formik.useFormikContext();
10200
- const fieldError = _17__default.default.get(errors, name);
10201
- const isTouched = _17__default.default.get(touched, name);
10202
- const val = _17__default.default.get(values, name);
10203
- return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth, variant: "outlined", children: [
10204
- /* @__PURE__ */ jsxRuntime.jsxs(
10205
- material.InputLabel,
12017
+ var AppSelectInput = react.forwardRef(
12018
+ ({
12019
+ name,
12020
+ variant = "outlined",
12021
+ label,
12022
+ fullWidth = true,
12023
+ required = false,
12024
+ disabled = false,
12025
+ readOnly = false,
12026
+ options = [],
12027
+ showNoneOption = false,
12028
+ noneOptionText = "None",
12029
+ showHelperText = false,
12030
+ helperText,
12031
+ sx,
12032
+ formControlSx,
12033
+ selectSx,
12034
+ inputSx,
12035
+ labelSx,
12036
+ menuPaperSx,
12037
+ menuItemSx,
12038
+ selectedMenuItemSx,
12039
+ errorSx,
12040
+ helperTextSx,
12041
+ iconSx,
12042
+ labelComponent: LabelComponent = material.InputLabel,
12043
+ errorComponent: ErrorComponent = material.Typography,
12044
+ helperTextComponent: HelperTextComponent = material.FormHelperText,
12045
+ onChange: externalOnChange,
12046
+ onOpen,
12047
+ onClose,
12048
+ onBlur: externalOnBlur,
12049
+ renderValue,
12050
+ renderMenuItem,
12051
+ MenuProps,
12052
+ inputProps,
12053
+ ...otherProps
12054
+ }, ref) => {
12055
+ const theme = material.useTheme();
12056
+ const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
12057
+ const fieldError = _19__default.default.get(errors, name);
12058
+ const isTouched = _19__default.default.get(touched, name);
12059
+ const hasError = Boolean(fieldError) && isTouched;
12060
+ const value = _19__default.default.get(values, name);
12061
+ const handleChange = (event, child) => {
12062
+ setFieldValue(name, event.target.value, true);
12063
+ if (externalOnChange) {
12064
+ externalOnChange(event, child);
12065
+ }
12066
+ };
12067
+ const handleBlur = (event) => {
12068
+ setFieldTouched(name, true, true);
12069
+ if (externalOnBlur) {
12070
+ externalOnBlur(event);
12071
+ }
12072
+ };
12073
+ const renderDefaultMenuItem = (option, index) => {
12074
+ const MenuItemComponent = option.component || material.MenuItem;
12075
+ const menuItemProps = option.component ? option.componentProps : {};
12076
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12077
+ MenuItemComponent,
12078
+ {
12079
+ value: option.value,
12080
+ disabled: option.disabled,
12081
+ ...menuItemProps,
12082
+ sx: [
12083
+ {
12084
+ color: "text.primary",
12085
+ "&.Mui-selected": {
12086
+ backgroundColor: "action.selected",
12087
+ "&:hover": {
12088
+ backgroundColor: "action.hover"
12089
+ },
12090
+ ...selectedMenuItemSx
12091
+ },
12092
+ "&.Mui-disabled": {
12093
+ opacity: 0.5,
12094
+ pointerEvents: "none"
12095
+ },
12096
+ ...option.sx
12097
+ },
12098
+ ...Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx]
12099
+ ],
12100
+ children: [
12101
+ option.icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
12102
+ /* @__PURE__ */ jsxRuntime.jsx(
12103
+ material.Typography,
12104
+ {
12105
+ variant: "body2",
12106
+ sx: [
12107
+ {
12108
+ color: option.disabled ? "text.disabled" : "text.primary",
12109
+ ...option.textSx
12110
+ }
12111
+ ],
12112
+ children: option.label
12113
+ }
12114
+ )
12115
+ ]
12116
+ },
12117
+ `${option.value}-${index}`
12118
+ );
12119
+ };
12120
+ return /* @__PURE__ */ jsxRuntime.jsx(
12121
+ material.Box,
10206
12122
  {
10207
- id: `select-${name}`,
10208
- sx: {
10209
- color: "text.primary",
10210
- "&.Mui-focused": {
10211
- color: "text.primary"
12123
+ ref,
12124
+ className: "app-select-input",
12125
+ sx: [
12126
+ {
12127
+ "& .MuiInputLabel-root": {
12128
+ "&.Mui-focused": {
12129
+ color: hasError ? "error.main" : "primary.main"
12130
+ },
12131
+ "&.Mui-disabled": {
12132
+ color: "text.disabled"
12133
+ }
12134
+ }
12135
+ },
12136
+ ...Array.isArray(formControlSx) ? formControlSx : [formControlSx].filter(Boolean)
12137
+ ],
12138
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12139
+ material.FormControl,
12140
+ {
12141
+ fullWidth,
12142
+ variant,
12143
+ error: hasError,
12144
+ disabled,
12145
+ className: "app-select-form-control",
12146
+ sx: [
12147
+ {
12148
+ "& .MuiInputLabel-root": {
12149
+ "&.Mui-focused": {
12150
+ color: hasError ? "error.main" : "primary.main"
12151
+ },
12152
+ "&.Mui-disabled": {
12153
+ color: "text.disabled"
12154
+ }
12155
+ }
12156
+ },
12157
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
12158
+ ],
12159
+ children: [
12160
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
12161
+ LabelComponent,
12162
+ {
12163
+ id: `select-${name}-label`,
12164
+ htmlFor: `select-${name}`,
12165
+ className: "app-select-label",
12166
+ sx: [
12167
+ {
12168
+ color: hasError ? "error.main" : "text.secondary",
12169
+ "&.Mui-focused": {
12170
+ color: hasError ? "error.main" : "primary.main"
12171
+ },
12172
+ mb: 1,
12173
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
12174
+ }
12175
+ ],
12176
+ children: [
12177
+ label,
12178
+ required && /* @__PURE__ */ jsxRuntime.jsx(
12179
+ material.Box,
12180
+ {
12181
+ component: "span",
12182
+ sx: {
12183
+ color: "error.main",
12184
+ ml: 0.5
12185
+ },
12186
+ children: "*"
12187
+ }
12188
+ )
12189
+ ]
12190
+ }
12191
+ ),
12192
+ /* @__PURE__ */ jsxRuntime.jsxs(
12193
+ Select__default.default,
12194
+ {
12195
+ variant: "outlined",
12196
+ labelId: label ? `select-${name}-label` : void 0,
12197
+ id: `select-${name}`,
12198
+ name,
12199
+ value: value != null ? value : "",
12200
+ onChange: handleChange,
12201
+ onBlur: handleBlur,
12202
+ onOpen,
12203
+ onClose,
12204
+ renderValue,
12205
+ inputProps: {
12206
+ readOnly,
12207
+ ...inputProps
12208
+ },
12209
+ MenuProps: {
12210
+ PaperProps: {
12211
+ sx: [
12212
+ {
12213
+ mt: 1,
12214
+ boxShadow: theme.shadows[3],
12215
+ "& .MuiMenuItem-root": {
12216
+ px: 2,
12217
+ py: 1,
12218
+ "&.Mui-selected": {
12219
+ backgroundColor: "action.selected",
12220
+ "&:hover": {
12221
+ backgroundColor: "action.hover"
12222
+ }
12223
+ }
12224
+ },
12225
+ ...Array.isArray(menuPaperSx) ? menuPaperSx : [menuPaperSx]
12226
+ }
12227
+ ]
12228
+ },
12229
+ ...MenuProps
12230
+ },
12231
+ sx: [
12232
+ {
12233
+ // Your base styles here
12234
+ "&.Mui-disabled": {
12235
+ backgroundColor: "action.disabledBackground",
12236
+ "& .MuiOutlinedInput-notchedOutline": {
12237
+ borderColor: "action.disabled"
12238
+ },
12239
+ "& .MuiSelect-icon": {
12240
+ color: "action.disabled"
12241
+ }
12242
+ }
12243
+ },
12244
+ ...Array.isArray(selectSx) ? selectSx : selectSx ? [selectSx] : []
12245
+ ],
12246
+ ...otherProps,
12247
+ children: [
12248
+ showNoneOption && /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: noneOptionText }) }),
12249
+ options.map(
12250
+ (option, index) => renderMenuItem ? renderMenuItem(option, index) : renderDefaultMenuItem(option, index)
12251
+ )
12252
+ ]
12253
+ }
12254
+ ),
12255
+ (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
12256
+ HelperTextComponent,
12257
+ {
12258
+ error: hasError,
12259
+ sx: [
12260
+ {
12261
+ mx: 0,
12262
+ mt: 0.5,
12263
+ ...hasError ? {
12264
+ color: "error.main",
12265
+ ...errorSx
12266
+ } : {
12267
+ color: "text.secondary",
12268
+ ...helperTextSx
12269
+ }
12270
+ }
12271
+ ],
12272
+ children: hasError ? fieldError : helperText
12273
+ }
12274
+ )
12275
+ ]
10212
12276
  }
10213
- },
10214
- children: [
10215
- label,
10216
- " ",
10217
- required === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: "*" })
10218
- ]
12277
+ )
12278
+ }
12279
+ );
12280
+ }
12281
+ );
12282
+ AppSelectInput.displayName = "AppSelectInput";
12283
+ var AppSelectInput_default = AppSelectInput;
12284
+ var AppSimpleUploadFile = ({
12285
+ name,
12286
+ label = "Upload Files",
12287
+ accept = "image/*",
12288
+ multiple = false,
12289
+ disabled = false,
12290
+ required = false,
12291
+ maxFiles,
12292
+ maxSizeInBytes = 5 * 1024 * 1024,
12293
+ // 5MB
12294
+ sx,
12295
+ buttonSx,
12296
+ errorSx,
12297
+ onAdd,
12298
+ onRemove,
12299
+ onError
12300
+ }) => {
12301
+ const { setFieldValue, values, errors, touched } = formik.useFormikContext();
12302
+ const fieldValue = _19__default.default.get(values, name);
12303
+ const fieldError = _19__default.default.get(touched, name) ? _19__default.default.get(errors, name) : void 0;
12304
+ const handleChange = (event) => {
12305
+ const files = event.target.files;
12306
+ if (!files || files.length === 0)
12307
+ return;
12308
+ const newFiles = Array.from(files).map((file) => {
12309
+ if (file.size > maxSizeInBytes) {
12310
+ const errorMsg = `File ${file.name} exceeds maximum size of ${maxSizeInBytes / (1024 * 1024)}MB`;
12311
+ onError == null ? void 0 : onError(errorMsg);
12312
+ return null;
12313
+ }
12314
+ return Object.assign(file, {
12315
+ preview: URL.createObjectURL(file)
12316
+ });
12317
+ }).filter(Boolean);
12318
+ if (newFiles.length === 0)
12319
+ return;
12320
+ const currentFiles = fieldValue || [];
12321
+ const updatedFiles = multiple ? [...currentFiles, ...newFiles].slice(0, maxFiles || Infinity) : [newFiles[0]];
12322
+ setFieldValue(name, updatedFiles);
12323
+ newFiles.forEach((file) => onAdd == null ? void 0 : onAdd(file));
12324
+ event.target.value = "";
12325
+ };
12326
+ const handleRemove = (index) => {
12327
+ if (!fieldValue || index < 0 || index >= fieldValue.length)
12328
+ return;
12329
+ const fileToRemove = fieldValue[index];
12330
+ const newFiles = fieldValue.filter((_20, i) => i !== index);
12331
+ setFieldValue(name, newFiles);
12332
+ onRemove == null ? void 0 : onRemove(fileToRemove);
12333
+ if (fileToRemove.preview) {
12334
+ URL.revokeObjectURL(fileToRemove.preview);
12335
+ }
12336
+ };
12337
+ const handleClick = () => {
12338
+ const input = document.getElementById(
12339
+ `file-upload-${name}`
12340
+ );
12341
+ if (input)
12342
+ input.click();
12343
+ };
12344
+ const isMaxFilesReached = maxFiles !== void 0 && (fieldValue ? fieldValue.length >= maxFiles : false);
12345
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
12346
+ /* @__PURE__ */ jsxRuntime.jsx(
12347
+ "input",
12348
+ {
12349
+ id: `file-upload-${name}`,
12350
+ type: "file",
12351
+ accept,
12352
+ multiple,
12353
+ onChange: handleChange,
12354
+ style: { display: "none" }
10219
12355
  }
10220
12356
  ),
10221
12357
  /* @__PURE__ */ jsxRuntime.jsx(
10222
- Select__default.default,
12358
+ material.Button,
10223
12359
  {
10224
12360
  variant: "outlined",
10225
- labelId: `select-${name}`,
10226
- id: "demo-simple-select",
10227
- label,
10228
- ...getFieldProps(name),
10229
- value: val,
10230
- sx: {
10231
- backgroundColor: "common.white",
10232
- color: "common.black",
10233
- "& .MuiSvgIcon-root": {
10234
- color: "common.black"
10235
- },
10236
- "& .MuiSelect-icon": {
10237
- color: "common.black"
10238
- },
10239
- "react-tel-input": {
10240
- backgroundColor: (theme) => `${theme.palette.common.white} !important`
10241
- },
10242
- "& .MuiInputBase-input.MuiOutlinedInput-input": {
10243
- color: "common.black"
12361
+ component: "span",
12362
+ disabled: disabled || isMaxFilesReached,
12363
+ onClick: handleClick,
12364
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon__default.default, { fontSize: "small" }),
12365
+ sx: [
12366
+ {
12367
+ mb: 1,
12368
+ "&:hover": {
12369
+ backgroundColor: "action.hover"
12370
+ }
10244
12371
  },
10245
- "& .MuiInputBase-input": {
10246
- color: (theme) => theme.palette.common.black
10247
- }
10248
- },
10249
- error: Boolean(fieldError) && isTouched,
10250
- ...otherProps,
10251
- children: options == null ? void 0 : options.map((single, i) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: single.value, children: single.label || single.value }, i))
12372
+ ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
12373
+ ],
12374
+ children: label
10252
12375
  }
10253
12376
  ),
10254
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
12377
+ fieldValue && fieldValue.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { spacing: 1, sx: { mt: 1 }, children: fieldValue.map((file, index) => /* @__PURE__ */ jsxRuntime.jsxs(
12378
+ material.Stack,
12379
+ {
12380
+ direction: "row",
12381
+ alignItems: "center",
12382
+ spacing: 1,
12383
+ sx: {
12384
+ p: 1,
12385
+ border: "1px solid",
12386
+ borderColor: "divider",
12387
+ borderRadius: 1
12388
+ },
12389
+ children: [
12390
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", noWrap: true, sx: { flex: 1 }, children: file.name }),
12391
+ /* @__PURE__ */ jsxRuntime.jsx(
12392
+ material.IconButton,
12393
+ {
12394
+ size: "small",
12395
+ onClick: () => handleRemove(index),
12396
+ disabled,
12397
+ sx: { p: 0.5 },
12398
+ children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
12399
+ }
12400
+ )
12401
+ ]
12402
+ },
12403
+ index
12404
+ )) }),
12405
+ fieldError && /* @__PURE__ */ jsxRuntime.jsx(
12406
+ material.Typography,
12407
+ {
12408
+ variant: "caption",
12409
+ color: "error",
12410
+ sx: [
12411
+ {
12412
+ display: "block",
12413
+ mt: 0.5,
12414
+ color: "error.main"
12415
+ },
12416
+ ...Array.isArray(errorSx) ? errorSx : [errorSx]
12417
+ ],
12418
+ children: fieldError
12419
+ }
12420
+ )
10255
12421
  ] });
10256
- }
12422
+ };
12423
+ var AppSimpleUploadFile_default = AppSimpleUploadFile;
10257
12424
 
10258
12425
  // src/file-thumbnail/utils.ts
10259
12426
  var FORMAT_PDF = ["pdf"];
@@ -10470,108 +12637,6 @@ function FileThumbnail({
10470
12637
  onDownload && /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onDownload })
10471
12638
  ] });
10472
12639
  }
10473
- var AppSimpleUploadFile = ({ name, multiple }) => {
10474
- const { errors, setFieldValue, values } = formik.useFormikContext();
10475
- const fieldError = _17__default.default.get(errors, name);
10476
- let val = _17__default.default.get(values, name);
10477
- if (multiple === true && typeof val === "string") {
10478
- val = val ? [val] : [];
10479
- } else if (multiple === false && _17__default.default.isArray(val)) {
10480
- val = val[0];
10481
- }
10482
- const valueArray = multiple === true ? val : val ? [val] : [];
10483
- const onchange = (event) => {
10484
- const { files } = event.target;
10485
- if (!files || files.length === 0)
10486
- return;
10487
- if (multiple === true) {
10488
- const existingFiles = Array.isArray(val) ? val : [];
10489
- setFieldValue(name, [...existingFiles, ...Array.from(files)], true);
10490
- } else {
10491
- setFieldValue(name, files == null ? void 0 : files[0], true);
10492
- }
10493
- event.target.value = "";
10494
- };
10495
- const handleDelete = (fileToDelete) => {
10496
- if (multiple === false) {
10497
- setFieldValue(name, void 0, true);
10498
- return;
10499
- }
10500
- const filteredFiles = val.filter((file) => {
10501
- if (file.file) {
10502
- return !_17__default.default.isEqual(fileToDelete, file.file);
10503
- }
10504
- return !_17__default.default.isEqual(fileToDelete, file);
10505
- });
10506
- setFieldValue(name, filteredFiles, true);
10507
- };
10508
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
10509
- /* @__PURE__ */ jsxRuntime.jsx(
10510
- "input",
10511
- {
10512
- id: `attachment-input-${name}`,
10513
- type: "file",
10514
- multiple,
10515
- onChange: onchange,
10516
- style: { display: "none" }
10517
- }
10518
- ),
10519
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `attachment-input-${name}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
10520
- material.Button,
10521
- {
10522
- variant: "text",
10523
- color: "primary",
10524
- component: "span",
10525
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "fontisto:upload", sx: { mr: 1 } }),
10526
- sx: {
10527
- ":hover": {
10528
- backgroundColor: "transparent"
10529
- }
10530
- },
10531
- children: [
10532
- "Upload Attachments",
10533
- " "
10534
- ]
10535
- }
10536
- ) }),
10537
- /* @__PURE__ */ jsxRuntime.jsx(
10538
- material.Stack,
10539
- {
10540
- sx: {
10541
- display: "flex",
10542
- flexFlow: "row wrap",
10543
- alignItems: "baseline"
10544
- },
10545
- rowGap: 1,
10546
- columnGap: 1,
10547
- children: valueArray.map((file) => {
10548
- const { key, name: title } = fileData(file);
10549
- return /* @__PURE__ */ jsxRuntime.jsx(
10550
- material.Chip,
10551
- {
10552
- label: title,
10553
- onDelete: () => handleDelete(file),
10554
- sx: {
10555
- border: "2px dashed #ffab00",
10556
- backgroundColor: "lightyellow",
10557
- borderRadius: 0,
10558
- ".MuiChip-deleteIcon": {
10559
- color: "red"
10560
- },
10561
- ".MuiChip-deleteIcon:hover": {
10562
- color: "red"
10563
- }
10564
- }
10565
- },
10566
- key
10567
- );
10568
- })
10569
- }
10570
- ),
10571
- fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
10572
- ] });
10573
- };
10574
- var AppSimpleUploadFile_default = AppSimpleUploadFile;
10575
12640
  function RejectionFiles({ fileRejections }) {
10576
12641
  if (!fileRejections.length) {
10577
12642
  return null;
@@ -11775,27 +13840,63 @@ async function blobToBase64(file) {
11775
13840
  };
11776
13841
  });
11777
13842
  }
11778
- var AppUploadFile = ({ name, ...rest }) => {
11779
- var _a, _b, _c, _d, _e;
13843
+ var AppUploadFile = ({
13844
+ name,
13845
+ sx,
13846
+ uploadSx,
13847
+ errorSx,
13848
+ helperTextSx,
13849
+ previewSx,
13850
+ dropZoneSx,
13851
+ ...rest
13852
+ }) => {
13853
+ var _a, _b;
11780
13854
  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
11781
- const fieldError = _17__default.default.get(errors, name);
11782
- const isTouched = _17__default.default.get(touched, name);
11783
- let val = _17__default.default.get(values, name);
13855
+ const fieldError = _19__default.default.get(errors, name);
13856
+ const isTouched = _19__default.default.get(touched, name);
13857
+ let val = _19__default.default.get(values, name);
11784
13858
  if (((_a = rest.multiple) != null ? _a : false) && typeof val === "string") {
11785
13859
  val = val ? [val] : [];
11786
- } else if (!((_b = rest.multiple) != null ? _b : false) && _17__default.default.isArray(val)) {
13860
+ } else if (!((_b = rest.multiple) != null ? _b : false) && _19__default.default.isArray(val)) {
11787
13861
  val = val[0];
11788
13862
  }
11789
- const value = ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
11790
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
13863
+ const formatValue = (val2) => {
13864
+ if (rest.multiple) {
13865
+ return (Array.isArray(val2) ? val2 : []).map((item) => ({
13866
+ ...(item == null ? void 0 : item.file) ? item : { file: item, preview: item == null ? void 0 : item.preview }
13867
+ }));
13868
+ }
13869
+ return (val2 == null ? void 0 : val2.file) ? val2 : val2 ? { file: val2, preview: val2.preview } : null;
13870
+ };
13871
+ const formattedValue = formatValue(val);
13872
+ const currentFiles = Array.isArray(val) ? val : [];
13873
+ const isMaxFilesReached = rest.maxFiles !== null && rest.maxFiles !== void 0 && currentFiles.length >= rest.maxFiles;
13874
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
11791
13875
  /* @__PURE__ */ jsxRuntime.jsx(
11792
13876
  Upload,
11793
13877
  {
11794
13878
  ...rest,
11795
- file: ((_d = rest.multiple) != null ? _d : false) ? void 0 : value,
11796
- files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
13879
+ file: rest.multiple ? void 0 : formattedValue,
13880
+ files: rest.multiple ? formattedValue : void 0,
11797
13881
  error: Boolean(fieldError) && isTouched,
11798
- 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),
13882
+ disabled: isMaxFilesReached,
13883
+ sx: [{
13884
+ "& .MuiDropzoneArea-root": {
13885
+ minHeight: 200,
13886
+ border: "2px dashed",
13887
+ borderColor: "divider",
13888
+ borderRadius: 1,
13889
+ "&:hover": {
13890
+ borderColor: "primary.main",
13891
+ backgroundColor: "action.hover"
13892
+ },
13893
+ ...dropZoneSx
13894
+ },
13895
+ "& .MuiDropzonePreviewList-root": {
13896
+ ...previewSx
13897
+ },
13898
+ ...uploadSx
13899
+ }],
11799
13900
  onDrop: (fileVal) => {
11800
13901
  (async () => {
11801
13902
  var _a2;
@@ -11808,7 +13909,7 @@ var AppUploadFile = ({ name, ...rest }) => {
11808
13909
  };
11809
13910
  })
11810
13911
  );
11811
- const currentValue = Array.isArray(value) ? value : [];
13912
+ const currentValue = Array.isArray(val) ? [...val] : [];
11812
13913
  if (rest.multiple === true) {
11813
13914
  if (currentValue.length >= ((_a2 = rest.maxFiles) != null ? _a2 : Infinity))
11814
13915
  return;
@@ -11823,27 +13924,57 @@ var AppUploadFile = ({ name, ...rest }) => {
11823
13924
  if ((_a2 = rest.multiple) != null ? _a2 : false) {
11824
13925
  setFieldValue(name, [], true);
11825
13926
  } else {
11826
- setFieldValue(name, "", true);
13927
+ setFieldValue(name, null, true);
11827
13928
  }
11828
13929
  },
11829
- onRemove: (e) => {
11830
- const afterFilter = val.filter((file) => {
11831
- var _a2;
11832
- if ((_a2 = file.file) != null ? _a2 : false) {
11833
- return !_17__default.default.isEqual(e, file.file);
11834
- }
11835
- return !_17__default.default.isEqual(e, file);
11836
- });
11837
- setFieldValue(name, afterFilter, true);
13930
+ onRemove: (fileToRemove) => {
13931
+ if (rest.multiple) {
13932
+ const currentFiles2 = Array.isArray(val) ? [...val] : [];
13933
+ const filteredFiles = currentFiles2.filter((file) => {
13934
+ const fileObj = (file == null ? void 0 : file.file) ? file.file : file;
13935
+ return !_19__default.default.isEqual(fileObj, fileToRemove);
13936
+ });
13937
+ setFieldValue(name, filteredFiles, true);
13938
+ } else {
13939
+ setFieldValue(name, null, true);
13940
+ }
11838
13941
  }
11839
13942
  }
11840
13943
  ),
11841
- Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError }),
11842
- rest.maxFiles != null && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", display: "block", gutterBottom: true, children: [
11843
- "Maximum ",
11844
- rest.maxFiles,
11845
- " file allowed"
11846
- ] })
13944
+ Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsxRuntime.jsx(
13945
+ material.Typography,
13946
+ {
13947
+ variant: "caption",
13948
+ sx: [{
13949
+ color: "error.main",
13950
+ display: "block",
13951
+ mt: 0.5,
13952
+ ...errorSx
13953
+ }],
13954
+ gutterBottom: true,
13955
+ children: fieldError
13956
+ }
13957
+ ),
13958
+ rest.maxFiles != null && /* @__PURE__ */ jsxRuntime.jsxs(
13959
+ material.Typography,
13960
+ {
13961
+ variant: "caption",
13962
+ sx: [{
13963
+ display: "block",
13964
+ color: "text.secondary",
13965
+ mt: 0.5,
13966
+ ...helperTextSx
13967
+ }],
13968
+ gutterBottom: true,
13969
+ children: [
13970
+ "Maximum ",
13971
+ rest.maxFiles,
13972
+ " file",
13973
+ rest.maxFiles !== 1 ? "s" : "",
13974
+ " allowed"
13975
+ ]
13976
+ }
13977
+ )
11847
13978
  ] });
11848
13979
  };
11849
13980
  var AppUploadFile_default = AppUploadFile;
@@ -11851,6 +13982,16 @@ var SubmitButton = ({
11851
13982
  children,
11852
13983
  loading = false,
11853
13984
  disabled = false,
13985
+ fullWidth = false,
13986
+ variant = "contained",
13987
+ color = "primary",
13988
+ size = "medium",
13989
+ startIcon,
13990
+ endIcon,
13991
+ sx,
13992
+ buttonSx,
13993
+ loadingSx,
13994
+ disabledSx,
11854
13995
  ...rest
11855
13996
  }) => {
11856
13997
  const { submitForm, isSubmitting } = formik.useFormikContext();
@@ -11872,7 +14013,37 @@ var SubmitButton = ({
11872
14013
  type: "button",
11873
14014
  onClick: handleClick,
11874
14015
  disabled: isButtonDisabled,
11875
- startIcon: showLoading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20, color: "inherit" }) : void 0,
14016
+ fullWidth,
14017
+ variant,
14018
+ color,
14019
+ size,
14020
+ startIcon: showLoading ? /* @__PURE__ */ jsxRuntime.jsx(
14021
+ material.CircularProgress,
14022
+ {
14023
+ size: 20,
14024
+ color: "inherit",
14025
+ sx: [
14026
+ {
14027
+ "&.MuiCircularProgress-root": {
14028
+ width: "20px !important",
14029
+ height: "20px !important"
14030
+ }
14031
+ },
14032
+ ...Array.isArray(loadingSx) ? loadingSx : [loadingSx]
14033
+ ]
14034
+ }
14035
+ ) : startIcon,
14036
+ endIcon,
14037
+ sx: [
14038
+ {
14039
+ position: "relative",
14040
+ "&.Mui-disabled": {
14041
+ ...disabledSx
14042
+ },
14043
+ ...buttonSx
14044
+ },
14045
+ ...Array.isArray(sx) ? sx : [sx]
14046
+ ],
11876
14047
  children
11877
14048
  }
11878
14049
  );
@@ -11886,19 +14057,19 @@ exports.AppDateAndTimePicker = AppDateAndTimePicker_default;
11886
14057
  exports.AppDatePicker = AppDatePicker_default;
11887
14058
  exports.AppFormErrorMessage = AppFormErrorMessage_default;
11888
14059
  exports.AppInputField = AppInputField;
11889
- exports.AppMultiSelector = AppMultiSelector;
14060
+ exports.AppMultiSelector = AppMultiSelector_default;
11890
14061
  exports.AppPhoneNoInput = AppPhoneNoInput_default;
11891
- exports.AppRadioGroup = AppRadioGroup;
11892
- exports.AppRating = AppRating;
14062
+ exports.AppRadioGroup = AppRadioGroup_default;
14063
+ exports.AppRating = AppRating_default;
11893
14064
  exports.AppRichTextEditor = AppRichTextEditor_default;
11894
- exports.AppSearchableMultiSelector = AppSearchableMultiSelector;
14065
+ exports.AppSearchableMultiSelector = AppSearchableMultiSelector_default;
11895
14066
  exports.AppSearchableSelectInput = AppSearchableSelectInput;
11896
- exports.AppSelectInput = AppSelectInput;
14067
+ exports.AppSelectInput = AppSelectInput_default;
11897
14068
  exports.AppSimpleUploadFile = AppSimpleUploadFile_default;
11898
14069
  exports.AppSwitch = AppSwitch;
11899
14070
  exports.AppSwitchInput = AppSwitchInput;
11900
14071
  exports.AppTagsCreator = AppTagsCreator;
11901
- exports.AppTextArea = AppTextArea;
14072
+ exports.AppTextArea = AppTextArea_default;
11902
14073
  exports.AppUploadFile = AppUploadFile_default;
11903
14074
  exports.Form = Form_default;
11904
14075
  exports.Iconify = Iconify_default;