formik-form-components 0.2.10 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +656 -67
  2. package/dist/index.js +2936 -793
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +2925 -783
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +11 -1
package/dist/index.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"
158
268
  }
159
- } : {}
269
+ },
270
+ "&.Mui-disabled": {
271
+ backgroundColor: "action.disabledBackground",
272
+ "& .MuiOutlinedInput-notchedOutline": {
273
+ borderColor: "action.disabled"
274
+ }
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,23 @@ 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
+ sx,
949
+ formControlSx,
950
+ textFieldSx,
951
+ chipSx,
952
+ errorSx
953
+ }) {
328
954
  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: [
955
+ const fieldError = _19__default.default.get(errors, name);
956
+ const isTouched = _19__default.default.get(touched, name);
957
+ const val = _19__default.default.get(values, name);
958
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
333
959
  /* @__PURE__ */ jsxRuntime.jsx(
334
960
  material.Autocomplete,
335
961
  {
@@ -338,24 +964,59 @@ function AppAutoComplete({ placeholder, name, label, options = [] }) {
338
964
  id: "tags-filled",
339
965
  options,
340
966
  freeSolo: true,
341
- renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(material.Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index })),
967
+ renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(material.Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index, sx: chipSx })),
342
968
  value: val,
343
969
  onChange: (event, newValue) => {
344
970
  setFieldValue(name, newValue, true);
345
971
  },
346
- renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...params, variant: "filled", label, placeholder })
972
+ renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
973
+ material.TextField,
974
+ {
975
+ ...params,
976
+ variant,
977
+ placeholder,
978
+ label,
979
+ error: isTouched && Boolean(fieldError),
980
+ sx: textFieldSx
981
+ }
982
+ ),
983
+ sx
347
984
  }
348
985
  ),
349
- fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
986
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(
987
+ material.Typography,
988
+ {
989
+ color: "error",
990
+ variant: "caption",
991
+ display: "block",
992
+ gutterBottom: true,
993
+ sx: {
994
+ color: "#FF5630",
995
+ ...errorSx
996
+ },
997
+ children: fieldError
998
+ }
999
+ )
350
1000
  ] });
351
1001
  }
352
- function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
1002
+ function AppAutoCompleter({
1003
+ placeholder,
1004
+ name,
1005
+ label,
1006
+ options,
1007
+ disabled,
1008
+ sx,
1009
+ formControlSx,
1010
+ textFieldSx,
1011
+ listboxSx,
1012
+ errorSx
1013
+ }) {
353
1014
  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);
1015
+ const fieldError = _19__default.default.get(errors, name);
1016
+ const isTouched = _19__default.default.get(touched, name);
1017
+ const value = _19__default.default.get(values, name);
357
1018
  const selectedOption = options.find((opt) => opt.value === value) || null;
358
- return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", children: [
1019
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
359
1020
  /* @__PURE__ */ jsxRuntime.jsx(
360
1021
  Autocomplete3__default.default,
361
1022
  {
@@ -365,96 +1026,192 @@ function AppAutoCompleter({ placeholder, name, label, options, disabled }) {
365
1026
  getOptionLabel: (option) => (option == null ? void 0 : option.label) || "",
366
1027
  isOptionEqualToValue: (option, value2) => option.value === value2.value,
367
1028
  autoHighlight: true,
368
- onChange: (_18, newValue) => {
1029
+ onChange: (_20, newValue) => {
369
1030
  setFieldValue(name, newValue ? newValue.value : null);
370
1031
  },
371
- renderOption: (props, option) => /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: option.value }, option.label),
1032
+ renderOption: (props, option) => /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
372
1033
  renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
373
1034
  material.TextField,
374
1035
  {
375
1036
  ...params,
376
1037
  label,
377
1038
  placeholder,
378
- error: Boolean(fieldError) && isTouched,
379
- helperText: isTouched && fieldError
380
- }
381
- ),
382
- disabled
383
- }
384
- ),
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,
1039
+ error: Boolean(fieldError) && isTouched,
1040
+ helperText: isTouched && fieldError,
1041
+ sx: textFieldSx
1042
+ }
1043
+ ),
1044
+ disabled,
1045
+ sx
1046
+ }
1047
+ ),
1048
+ fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(
1049
+ material.Typography,
447
1050
  {
448
- color: "#FF5630",
449
1051
  variant: "caption",
450
1052
  display: "block",
451
1053
  gutterBottom: true,
1054
+ sx: {
1055
+ color: "#FF5630",
1056
+ ...errorSx
1057
+ },
452
1058
  children: fieldError
453
1059
  }
454
1060
  )
455
1061
  ] });
1062
+ }
1063
+ var AppCheckBox = ({
1064
+ name,
1065
+ option,
1066
+ label,
1067
+ required = false,
1068
+ disabled = false,
1069
+ row = false,
1070
+ sx,
1071
+ checkboxSx,
1072
+ labelSx,
1073
+ errorSx,
1074
+ containerSx,
1075
+ iconSx,
1076
+ checkedSx,
1077
+ ...rest
1078
+ }) => {
1079
+ const { getFieldProps, setFieldValue, touched, errors } = formik.useFormikContext();
1080
+ const fieldError = _19__default.default.get(errors, name);
1081
+ const isTouched = _19__default.default.get(touched, name);
1082
+ material.useTheme();
1083
+ const value = getFieldProps(name).value;
1084
+ const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
1085
+ const handleChange = (itemName, isChecked) => {
1086
+ const newValue = isChecked ? [...checkedNames, itemName] : checkedNames.filter((n) => n !== itemName);
1087
+ setFieldValue(name, option.length === 1 ? isChecked : newValue);
1088
+ };
1089
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1090
+ material.Box,
1091
+ {
1092
+ sx: [{
1093
+ width: "100%",
1094
+ ...disabled && {
1095
+ opacity: 0.7,
1096
+ pointerEvents: "none"
1097
+ }
1098
+ }, ...Array.isArray(sx) ? sx : [sx]],
1099
+ children: [
1100
+ label && /* @__PURE__ */ jsxRuntime.jsx(
1101
+ Typography10__default.default,
1102
+ {
1103
+ variant: "subtitle2",
1104
+ gutterBottom: true,
1105
+ sx: [{
1106
+ color: "text.primary",
1107
+ fontWeight: "medium",
1108
+ ...required && {
1109
+ "&:after": {
1110
+ content: '" *"',
1111
+ color: "error.main"
1112
+ }
1113
+ },
1114
+ ...disabled && {
1115
+ color: "text.disabled"
1116
+ }
1117
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1118
+ children: label
1119
+ }
1120
+ ),
1121
+ /* @__PURE__ */ jsxRuntime.jsx(
1122
+ material.Box,
1123
+ {
1124
+ sx: [{
1125
+ display: "flex",
1126
+ flexDirection: row ? "row" : "column",
1127
+ flexWrap: row ? "wrap" : "nowrap",
1128
+ gap: 2,
1129
+ ...row ? {
1130
+ "& > *": {
1131
+ minWidth: "fit-content"
1132
+ }
1133
+ } : {}
1134
+ }, ...Array.isArray(containerSx) ? containerSx : [containerSx]],
1135
+ children: option.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
1136
+ material.Box,
1137
+ {
1138
+ sx: [{
1139
+ display: "flex",
1140
+ alignItems: "center",
1141
+ borderRadius: 1,
1142
+ transition: "background-color 0.2s",
1143
+ "&:hover": {
1144
+ backgroundColor: !disabled ? "action.hover" : "transparent"
1145
+ },
1146
+ px: 2,
1147
+ py: 1,
1148
+ ...disabled && {
1149
+ color: "text.disabled"
1150
+ }
1151
+ }],
1152
+ children: [
1153
+ /* @__PURE__ */ jsxRuntime.jsx(
1154
+ material.Checkbox,
1155
+ {
1156
+ ...getFieldProps(name),
1157
+ name,
1158
+ value: item.name,
1159
+ checked: checkedNames.includes(item.name),
1160
+ onChange: (e) => handleChange(item.name, e.target.checked),
1161
+ disabled: disabled || item.disabled,
1162
+ sx: [{
1163
+ color: "primary.main",
1164
+ "&.Mui-checked": {
1165
+ color: "primary.main",
1166
+ ...checkedSx
1167
+ },
1168
+ "& .MuiSvgIcon-root": {
1169
+ fontSize: 24,
1170
+ ...iconSx
1171
+ },
1172
+ "&.Mui-disabled": {
1173
+ color: "action.disabled"
1174
+ }
1175
+ }, ...Array.isArray(checkboxSx) ? checkboxSx : [checkboxSx]],
1176
+ ...rest
1177
+ }
1178
+ ),
1179
+ /* @__PURE__ */ jsxRuntime.jsx(
1180
+ Typography10__default.default,
1181
+ {
1182
+ variant: "body2",
1183
+ sx: [{
1184
+ color: disabled ? "text.disabled" : "text.primary",
1185
+ ...disabled && {
1186
+ color: "text.disabled"
1187
+ }
1188
+ }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
1189
+ children: item.label
1190
+ }
1191
+ )
1192
+ ]
1193
+ },
1194
+ item.name
1195
+ ))
1196
+ }
1197
+ ),
1198
+ isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
1199
+ Typography10__default.default,
1200
+ {
1201
+ variant: "caption",
1202
+ sx: [{
1203
+ display: "block",
1204
+ mt: 0.5,
1205
+ color: "error.main"
1206
+ }, ...Array.isArray(errorSx) ? errorSx : [errorSx]],
1207
+ children: fieldError
1208
+ }
1209
+ )
1210
+ ]
1211
+ }
1212
+ );
456
1213
  };
457
- var AppCheckBox_default = CheckboxField;
1214
+ var AppCheckBox_default = AppCheckBox;
458
1215
  var Iconify = react.forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
459
1216
  material.Box,
460
1217
  {
@@ -473,11 +1230,12 @@ function AppInputField({
473
1230
  type,
474
1231
  InputProps,
475
1232
  required,
1233
+ variant = "outlined",
476
1234
  ...otherProps
477
1235
  }) {
478
1236
  const { errors, getFieldProps, touched } = formik.useFormikContext();
479
- const fieldError = _17__default.default.get(errors, name);
480
- const isTouched = _17__default.default.get(touched, name);
1237
+ const fieldError = _19__default.default.get(errors, name);
1238
+ const isTouched = _19__default.default.get(touched, name);
481
1239
  const [showPassword, setShowPassword] = react.useState(false);
482
1240
  const handleShowPassword = () => {
483
1241
  setShowPassword(!showPassword);
@@ -487,6 +1245,7 @@ function AppInputField({
487
1245
  {
488
1246
  ...getFieldProps(name),
489
1247
  fullWidth: true,
1248
+ variant,
490
1249
  label: required === true ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
491
1250
  label,
492
1251
  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red", pl: 0.5 }, component: "span", children: "*" })
@@ -535,108 +1294,322 @@ function AppInputField({
535
1294
  }
536
1295
  );
537
1296
  }
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,
1297
+ var AppMultiSelector = react.forwardRef(
1298
+ ({
1299
+ multiple = true,
1300
+ name,
1301
+ label,
1302
+ options = [],
1303
+ required = false,
1304
+ variant = "outlined",
1305
+ disabled = false,
1306
+ maxSelections,
1307
+ showSelectedCount = true,
1308
+ showHelperText = false,
1309
+ helperText,
1310
+ sx,
1311
+ formControlSx,
1312
+ selectSx,
1313
+ labelSx,
1314
+ chipSx,
1315
+ checkboxSx,
1316
+ menuItemSx,
1317
+ errorSx,
1318
+ helperTextSx,
1319
+ iconSx,
1320
+ onChange: externalOnChange,
1321
+ onOpen,
1322
+ onClose,
1323
+ renderValue: externalRenderValue,
1324
+ renderMenuItem,
1325
+ ...otherProps
1326
+ }, ref) => {
1327
+ const theme = material.useTheme();
1328
+ const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
1329
+ const fieldError = _19__default.default.get(errors, name);
1330
+ const isTouched = _19__default.default.get(touched, name);
1331
+ const val = _19__default.default.get(values, name);
1332
+ const selectedValues = Array.isArray(val) ? val : [];
1333
+ const handleChange = (event, child) => {
1334
+ const newValue = event.target.value;
1335
+ if (maxSelections && newValue.length > maxSelections) {
1336
+ return;
1337
+ }
1338
+ setFieldValue(name, newValue, true);
1339
+ if (externalOnChange) {
1340
+ externalOnChange(event, child);
1341
+ }
1342
+ };
1343
+ const handleBlur = () => {
1344
+ setFieldTouched(name, true, true);
1345
+ };
1346
+ const defaultRenderValue = (selected) => /* @__PURE__ */ jsxRuntime.jsx(
1347
+ material.Box,
1348
+ {
1349
+ sx: { display: "flex", flexWrap: "wrap", gap: 0.5, minHeight: "24px" },
1350
+ children: selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Select options..." }) : selected.map((value) => {
1351
+ const option = options.find((obj) => obj.value === value);
1352
+ return option ? /* @__PURE__ */ jsxRuntime.jsx(
1353
+ material.Chip,
1354
+ {
1355
+ label: option.label,
1356
+ size: "small",
1357
+ sx: [
1358
+ {
1359
+ height: "24px",
1360
+ borderRadius: "4px",
1361
+ backgroundColor: "action.selected",
1362
+ "& .MuiChip-label": {
1363
+ px: 1
1364
+ },
1365
+ ...option.disabled && {
1366
+ opacity: 0.6
1367
+ }
1368
+ },
1369
+ chipSx
1370
+ ]
1371
+ },
1372
+ value
1373
+ ) : null;
1374
+ })
1375
+ }
1376
+ );
1377
+ const defaultRenderMenuItem = (option, isSelected) => /* @__PURE__ */ jsxRuntime.jsxs(
1378
+ material.MenuItem,
1379
+ {
1380
+ value: option.value,
1381
+ disabled: option.disabled,
1382
+ sx: [
587
1383
  {
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,
1384
+ "&.Mui-selected": {
1385
+ backgroundColor: "action.selected",
1386
+ "&:hover": {
1387
+ backgroundColor: "action.hover"
1388
+ }
1389
+ },
1390
+ "&.Mui-disabled": {
1391
+ opacity: 0.5
1392
+ },
1393
+ ...option.sx
1394
+ },
1395
+ menuItemSx
1396
+ ],
1397
+ children: [
1398
+ /* @__PURE__ */ jsxRuntime.jsx(
1399
+ material.Checkbox,
1400
+ {
1401
+ checked: isSelected,
1402
+ disabled: option.disabled,
1403
+ sx: [
599
1404
  {
600
- label: (_a = options.find((obj) => obj.value === value)) == null ? void 0 : _a.label,
601
- sx: { height: "20px", borderRadius: "2px" }
1405
+ color: "text.secondary",
1406
+ "&.Mui-checked": {
1407
+ color: "primary.main"
1408
+ },
1409
+ ...option.disabled && {
1410
+ color: "action.disabled"
1411
+ }
602
1412
  },
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
- }
1413
+ checkboxSx
1414
+ ]
1415
+ }
1416
+ ),
1417
+ /* @__PURE__ */ jsxRuntime.jsx(
1418
+ material.Typography,
1419
+ {
1420
+ variant: "body2",
1421
+ sx: [
1422
+ {
1423
+ color: option.disabled ? "text.disabled" : "text.primary",
1424
+ ...option.textSx
1425
+ }
1426
+ ],
1427
+ children: option.label || String(option.value)
1428
+ }
1429
+ )
1430
+ ]
1431
+ },
1432
+ option.value
1433
+ );
1434
+ const displayLabel = showSelectedCount && selectedValues.length > 0 ? `${label} (${selectedValues.length} selected)` : label;
1435
+ return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
1436
+ material.FormControl,
1437
+ {
1438
+ fullWidth: true,
1439
+ variant,
1440
+ error: isTouched && Boolean(fieldError),
1441
+ disabled,
1442
+ sx: [
1443
+ {
1444
+ "& .MuiInputLabel-root": {
1445
+ "&.Mui-focused": {
1446
+ color: "primary.main"
1447
+ },
1448
+ "&.Mui-error": {
1449
+ color: "error.main"
1450
+ },
1451
+ "&.Mui-disabled": {
1452
+ color: "text.disabled"
1453
+ }
1454
+ }
1455
+ },
1456
+ formControlSx
1457
+ ],
1458
+ children: [
1459
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
1460
+ material.InputLabel,
1461
+ {
1462
+ id: `select-${name}`,
1463
+ sx: [
1464
+ {
1465
+ color: "text.secondary",
1466
+ "&.Mui-focused": {
1467
+ color: "primary.main"
1468
+ },
1469
+ "&.Mui-disabled": {
1470
+ color: "text.disabled"
1471
+ }
1472
+ },
1473
+ labelSx
1474
+ ],
1475
+ children: [
1476
+ displayLabel,
1477
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1478
+ material.Typography,
1479
+ {
1480
+ component: "span",
1481
+ sx: {
1482
+ color: "error.main",
1483
+ ml: 0.5
1484
+ },
1485
+ children: "*"
1486
+ }
1487
+ )
1488
+ ]
1489
+ }
1490
+ ),
1491
+ /* @__PURE__ */ jsxRuntime.jsx(
1492
+ Select__default.default,
1493
+ {
1494
+ multiple,
1495
+ variant: "outlined",
1496
+ labelId: label ? `select-${name}` : void 0,
1497
+ label: label || void 0,
1498
+ value: selectedValues,
1499
+ onChange: handleChange,
1500
+ onBlur: handleBlur,
1501
+ onOpen,
1502
+ onClose,
1503
+ renderValue: externalRenderValue || defaultRenderValue,
1504
+ MenuProps: {
1505
+ PaperProps: {
1506
+ sx: {
1507
+ mt: 1,
1508
+ boxShadow: theme.shadows[3],
1509
+ "& .MuiMenuItem-root": {
1510
+ px: 2,
1511
+ py: 1
1512
+ }
1513
+ }
1514
+ }
1515
+ },
1516
+ sx: [
1517
+ {
1518
+ backgroundColor: "background.paper",
1519
+ color: "text.primary",
1520
+ "& .MuiSvgIcon-root": {
1521
+ color: "text.secondary",
1522
+ ...iconSx
1523
+ },
1524
+ "& .MuiSelect-icon": {
1525
+ color: "text.secondary"
1526
+ },
1527
+ "& .MuiOutlinedInput-notchedOutline": {
1528
+ borderColor: "divider"
1529
+ },
1530
+ "&:hover .MuiOutlinedInput-notchedOutline": {
1531
+ borderColor: "primary.main"
1532
+ },
1533
+ "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
1534
+ borderColor: "primary.main"
1535
+ },
1536
+ "&.Mui-error .MuiOutlinedInput-notchedOutline": {
1537
+ borderColor: "error.main"
1538
+ },
1539
+ "&.Mui-disabled": {
1540
+ backgroundColor: "action.disabledBackground",
1541
+ "& .MuiOutlinedInput-notchedOutline": {
1542
+ borderColor: "action.disabled"
1543
+ }
1544
+ },
1545
+ ...selectSx
1546
+ }
1547
+ ],
1548
+ error: Boolean(fieldError) && isTouched,
1549
+ ...otherProps,
1550
+ children: options.map((option) => {
1551
+ const isSelected = selectedValues.includes(option.value);
1552
+ return renderMenuItem ? renderMenuItem(option, isSelected) : defaultRenderMenuItem(option, isSelected);
1553
+ })
1554
+ }
1555
+ ),
1556
+ (showHelperText || isTouched && fieldError) && /* @__PURE__ */ jsxRuntime.jsx(
1557
+ material.FormHelperText,
1558
+ {
1559
+ sx: [
1560
+ {
1561
+ mx: 0,
1562
+ mt: 0.5,
1563
+ color: isTouched && fieldError ? "error.main" : "text.secondary",
1564
+ ...isTouched && fieldError ? errorSx : helperTextSx
1565
+ }
1566
+ ],
1567
+ children: isTouched && fieldError ? fieldError : helperText
1568
+ }
1569
+ )
1570
+ ]
1571
+ }
1572
+ ) });
1573
+ }
1574
+ );
1575
+ AppMultiSelector.displayName = "AppMultiSelector";
1576
+ var AppMultiSelector_default = AppMultiSelector;
619
1577
  var AppPhoneNoInput = ({
620
1578
  name,
621
1579
  label,
622
1580
  required,
1581
+ sx,
1582
+ containerSx,
1583
+ labelSx,
1584
+ inputSx,
1585
+ errorSx,
623
1586
  ...otherProps
624
1587
  }) => {
625
1588
  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: [
1589
+ const fieldError = _19__default.default.get(errors, name);
1590
+ const isTouched = _19__default.default.get(touched, name);
1591
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
629
1592
  label && /* @__PURE__ */ jsxRuntime.jsxs(
630
1593
  material.Typography,
631
1594
  {
632
1595
  variant: "subtitle2",
633
- sx: {
1596
+ sx: [{
634
1597
  mb: 0.5,
635
- color: isTouched && fieldError ? colors.red[500] : "text.primary"
636
- },
1598
+ color: isTouched && fieldError ? "error.main" : "text.primary"
1599
+ }, labelSx],
637
1600
  children: [
638
1601
  label,
639
- required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: colors.red[500], ml: 0.3 }, children: "*" })
1602
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1603
+ material.Typography,
1604
+ {
1605
+ component: "span",
1606
+ sx: {
1607
+ color: "error.main",
1608
+ ml: 0.3
1609
+ },
1610
+ children: "*"
1611
+ }
1612
+ )
640
1613
  ]
641
1614
  }
642
1615
  ),
@@ -647,8 +1620,13 @@ var AppPhoneNoInput = ({
647
1620
  specialLabel: "",
648
1621
  inputStyle: {
649
1622
  width: "100%",
650
- border: isTouched && fieldError ? `1px solid ${colors.red[500]}` : "1px solid #ccc",
651
- padding: "10px"
1623
+ border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
1624
+ padding: "10px",
1625
+ borderRadius: "4px",
1626
+ ...inputSx
1627
+ },
1628
+ containerStyle: {
1629
+ width: "100%"
652
1630
  },
653
1631
  ...otherProps,
654
1632
  ...getFieldProps(name),
@@ -660,8 +1638,11 @@ var AppPhoneNoInput = ({
660
1638
  material.Typography,
661
1639
  {
662
1640
  variant: "caption",
663
- color: "error",
664
- sx: { mt: 0.5, display: "block" },
1641
+ sx: [{
1642
+ mt: 0.5,
1643
+ display: "block",
1644
+ color: "error.main"
1645
+ }, errorSx],
665
1646
  children: [
666
1647
  String(fieldError),
667
1648
  " "
@@ -671,31 +1652,368 @@ var AppPhoneNoInput = ({
671
1652
  ] });
672
1653
  };
673
1654
  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);
1655
+ var AppRadioGroup = react.forwardRef(({
1656
+ name,
1657
+ options = [],
1658
+ label,
1659
+ required = false,
1660
+ disabled = false,
1661
+ row = false,
1662
+ sx,
1663
+ formControlSx,
1664
+ radioGroupSx,
1665
+ formLabelSx,
1666
+ radioSx,
1667
+ labelSx,
1668
+ errorSx,
1669
+ onChange,
1670
+ onBlur,
1671
+ ...rest
1672
+ }, ref) => {
1673
+ const { errors, touched, getFieldProps, setFieldValue } = formik.useFormikContext();
1674
+ const fieldError = _19__default.default.get(errors, name);
1675
+ const isTouched = _19__default.default.get(touched, name);
1676
+ const value = _19__default.default.get(getFieldProps(name), "value");
1677
+ const handleChange = (event) => {
1678
+ const newValue = event.target.value;
1679
+ setFieldValue(name, newValue);
1680
+ if (onChange) {
1681
+ onChange(event, newValue);
1682
+ }
1683
+ };
1684
+ const handleBlur = (event) => {
1685
+ if (onBlur) {
1686
+ onBlur(event);
1687
+ }
1688
+ };
1689
+ return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
1690
+ material.FormControl,
1691
+ {
1692
+ component: "fieldset",
1693
+ error: Boolean(fieldError) && isTouched,
1694
+ disabled,
1695
+ sx: [{
1696
+ width: "100%",
1697
+ "& .MuiFormGroup-root": {
1698
+ mt: 1
1699
+ }
1700
+ }, ...Array.isArray(formControlSx) ? formControlSx : [formControlSx]],
1701
+ children: [
1702
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
1703
+ material.FormLabel,
1704
+ {
1705
+ component: "legend",
1706
+ sx: [{
1707
+ color: "text.primary",
1708
+ mb: 1,
1709
+ "&.Mui-focused": {
1710
+ color: "text.primary"
1711
+ },
1712
+ "&.Mui-disabled": {
1713
+ color: "text.disabled"
1714
+ }
1715
+ }, ...Array.isArray(formLabelSx) ? formLabelSx : [formLabelSx]],
1716
+ children: [
1717
+ label,
1718
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1719
+ material.Typography,
1720
+ {
1721
+ component: "span",
1722
+ sx: {
1723
+ color: "error.main",
1724
+ ml: 0.5
1725
+ },
1726
+ children: "*"
1727
+ }
1728
+ )
1729
+ ]
1730
+ }
1731
+ ),
1732
+ /* @__PURE__ */ jsxRuntime.jsx(
1733
+ material.RadioGroup,
1734
+ {
1735
+ ...getFieldProps(name),
1736
+ value: value != null ? value : "",
1737
+ onChange: handleChange,
1738
+ onBlur: handleBlur,
1739
+ row,
1740
+ sx: [{
1741
+ "& .MuiFormControlLabel-root": {
1742
+ mr: row ? 3 : 0,
1743
+ mb: row ? 0 : 1,
1744
+ "&:last-of-type": {
1745
+ mb: 0
1746
+ }
1747
+ }
1748
+ }, ...Array.isArray(radioGroupSx) ? radioGroupSx : [radioGroupSx]],
1749
+ ...rest,
1750
+ children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
1751
+ material.FormControlLabel,
1752
+ {
1753
+ value: option.value,
1754
+ disabled: disabled || option.disabled,
1755
+ control: /* @__PURE__ */ jsxRuntime.jsx(
1756
+ material.Radio,
1757
+ {
1758
+ sx: [{
1759
+ color: "primary.main",
1760
+ "&.Mui-checked": {
1761
+ color: "primary.main"
1762
+ },
1763
+ "&.Mui-disabled": {
1764
+ color: "action.disabled"
1765
+ },
1766
+ ...radioSx,
1767
+ ...option.radioSx
1768
+ }]
1769
+ }
1770
+ ),
1771
+ label: /* @__PURE__ */ jsxRuntime.jsx(
1772
+ material.Typography,
1773
+ {
1774
+ variant: "body2",
1775
+ sx: [{
1776
+ color: disabled || option.disabled ? "text.disabled" : "text.primary",
1777
+ ...labelSx,
1778
+ ...option.labelSx
1779
+ }],
1780
+ children: option.label
1781
+ }
1782
+ ),
1783
+ sx: [{
1784
+ m: 0,
1785
+ mr: row ? 3 : 0,
1786
+ mb: row ? 0 : 1,
1787
+ "&:last-of-type": {
1788
+ mb: 0
1789
+ },
1790
+ ...option.sx
1791
+ }]
1792
+ },
1793
+ option.value
1794
+ ))
1795
+ }
1796
+ ),
1797
+ isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
1798
+ material.FormHelperText,
1799
+ {
1800
+ sx: [{
1801
+ color: "error.main",
1802
+ mx: 0,
1803
+ mt: 0.5,
1804
+ ...errorSx
1805
+ }],
1806
+ children: fieldError
1807
+ }
1808
+ )
1809
+ ]
1810
+ }
1811
+ ) });
1812
+ });
1813
+ AppRadioGroup.displayName = "AppRadioGroup";
1814
+ var AppRadioGroup_default = AppRadioGroup;
1815
+ var AppRating = react.forwardRef(({
1816
+ name,
1817
+ label,
1818
+ required = false,
1819
+ readOnly = false,
1820
+ disabled = false,
1821
+ max = 5,
1822
+ precision = 1,
1823
+ size = "medium",
1824
+ emptyIcon,
1825
+ icon,
1826
+ IconContainerComponent,
1827
+ getLabelText,
1828
+ onChange: externalOnChange,
1829
+ onChangeActive,
1830
+ sx,
1831
+ labelSx,
1832
+ ratingSx,
1833
+ errorSx,
1834
+ helperTextSx,
1835
+ showHelperText = false,
1836
+ helperText,
1837
+ labelComponent: LabelComponent = material.Typography,
1838
+ ratingComponent: RatingComponent = material.Rating,
1839
+ errorComponent: ErrorComponent = material.Typography,
1840
+ helperTextComponent: HelperTextComponent = material.FormHelperText,
1841
+ labelProps = {},
1842
+ ratingProps = {},
1843
+ errorProps = {},
1844
+ helperTextProps = {},
1845
+ className = "",
1846
+ labelClassName = "",
1847
+ ratingClassName = "",
1848
+ errorClassName = "",
1849
+ helperTextClassName = "",
1850
+ ...otherProps
1851
+ }, ref) => {
1852
+ material.useTheme();
1853
+ const { errors, touched, setFieldValue, values, setFieldTouched } = formik.useFormikContext();
1854
+ const val = _19__default.default.get(values, name);
1855
+ const fieldError = _19__default.default.get(errors, name);
1856
+ const isTouched = _19__default.default.get(touched, name);
1857
+ const hasError = Boolean(fieldError) && isTouched;
688
1858
  const handleChange = (event, newValue) => {
689
1859
  setFieldValue(name, newValue);
1860
+ setFieldTouched(name, true, false);
1861
+ if (externalOnChange) {
1862
+ externalOnChange(event, newValue);
1863
+ }
690
1864
  };
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
- }
1865
+ const handleBlur = () => {
1866
+ setFieldTouched(name, true, true);
1867
+ };
1868
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1869
+ material.Box,
1870
+ {
1871
+ ref,
1872
+ className: `app-rating ${className}`,
1873
+ sx: [
1874
+ {
1875
+ display: "flex",
1876
+ flexDirection: "column",
1877
+ width: "100%",
1878
+ "&:hover": {
1879
+ "& .MuiRating-iconEmpty": {
1880
+ color: "primary.light"
1881
+ }
1882
+ }
1883
+ },
1884
+ ...Array.isArray(sx) ? sx : [sx]
1885
+ ],
1886
+ ...otherProps,
1887
+ children: [
1888
+ /* @__PURE__ */ jsxRuntime.jsxs(
1889
+ material.Stack,
1890
+ {
1891
+ direction: "row",
1892
+ alignItems: "center",
1893
+ spacing: 1,
1894
+ sx: {
1895
+ "&.Mui-disabled": {
1896
+ opacity: 0.5,
1897
+ cursor: "not-allowed"
1898
+ }
1899
+ },
1900
+ className: disabled ? "Mui-disabled" : "",
1901
+ children: [
1902
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
1903
+ LabelComponent,
1904
+ {
1905
+ variant: "body2",
1906
+ color: hasError ? "error" : "text.primary",
1907
+ className: `app-rating-label ${labelClassName}`,
1908
+ sx: [
1909
+ {
1910
+ margin: 0,
1911
+ fontWeight: 500,
1912
+ ...disabled && {
1913
+ color: "text.disabled"
1914
+ }
1915
+ },
1916
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
1917
+ ],
1918
+ ...labelProps,
1919
+ children: [
1920
+ label,
1921
+ required && /* @__PURE__ */ jsxRuntime.jsx(
1922
+ material.Box,
1923
+ {
1924
+ component: "span",
1925
+ sx: {
1926
+ color: "error.main",
1927
+ ml: 0.5
1928
+ },
1929
+ children: "*"
1930
+ }
1931
+ )
1932
+ ]
1933
+ }
1934
+ ),
1935
+ /* @__PURE__ */ jsxRuntime.jsx(
1936
+ material.Box,
1937
+ {
1938
+ onBlur: handleBlur,
1939
+ sx: [
1940
+ {
1941
+ display: "inline-flex",
1942
+ "& .MuiRating-icon": {
1943
+ color: "primary.main"
1944
+ },
1945
+ "& .MuiRating-iconEmpty": {
1946
+ color: "action.disabled"
1947
+ },
1948
+ "& .MuiRating-iconFilled": {
1949
+ color: "primary.main"
1950
+ },
1951
+ "& .MuiRating-iconHover": {
1952
+ color: "primary.dark"
1953
+ },
1954
+ "&.Mui-disabled": {
1955
+ opacity: 0.5,
1956
+ cursor: "not-allowed"
1957
+ },
1958
+ ...hasError && {
1959
+ "& .MuiRating-icon": {
1960
+ color: "error.main"
1961
+ }
1962
+ }
1963
+ },
1964
+ ...Array.isArray(ratingSx) ? ratingSx : [ratingSx]
1965
+ ],
1966
+ className: `app-rating-stars ${ratingClassName} ${disabled ? "Mui-disabled" : ""}`,
1967
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1968
+ RatingComponent,
1969
+ {
1970
+ value: val != null ? val : null,
1971
+ onChange: handleChange,
1972
+ onChangeActive,
1973
+ max,
1974
+ precision,
1975
+ size,
1976
+ readOnly,
1977
+ disabled,
1978
+ emptyIcon,
1979
+ icon,
1980
+ IconContainerComponent,
1981
+ getLabelText,
1982
+ className: ratingClassName,
1983
+ ...ratingProps
1984
+ }
1985
+ )
1986
+ }
1987
+ )
1988
+ ]
1989
+ }
1990
+ ),
1991
+ (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
1992
+ HelperTextComponent,
1993
+ {
1994
+ error: hasError,
1995
+ sx: [
1996
+ {
1997
+ mx: 0,
1998
+ mt: 0.5,
1999
+ ...hasError && {
2000
+ color: "error.main",
2001
+ ...errorSx
2002
+ },
2003
+ ...helperTextSx
2004
+ }
2005
+ ],
2006
+ className: `app-rating-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`,
2007
+ ...helperTextProps,
2008
+ children: hasError ? fieldError : helperText
2009
+ }
2010
+ )
2011
+ ]
2012
+ }
2013
+ );
2014
+ });
2015
+ AppRating.displayName = "AppRating";
2016
+ var AppRating_default = AppRating;
699
2017
 
700
2018
  // node_modules/orderedmap/dist/index.js
701
2019
  function OrderedMap(content) {
@@ -879,7 +2197,7 @@ function findDiffEnd(a, b, posA, posB) {
879
2197
  posB -= size;
880
2198
  }
881
2199
  }
882
- var Fragment3 = class {
2200
+ var Fragment2 = class {
883
2201
  /**
884
2202
  @internal
885
2203
  */
@@ -947,7 +2265,7 @@ var Fragment3 = class {
947
2265
  }
948
2266
  for (; i < other.content.length; i++)
949
2267
  content.push(other.content[i]);
950
- return new Fragment3(content, this.size + other.size);
2268
+ return new Fragment2(content, this.size + other.size);
951
2269
  }
952
2270
  /**
953
2271
  Cut out the sub-fragment between the two given positions.
@@ -971,17 +2289,17 @@ var Fragment3 = class {
971
2289
  }
972
2290
  pos = end;
973
2291
  }
974
- return new Fragment3(result, size);
2292
+ return new Fragment2(result, size);
975
2293
  }
976
2294
  /**
977
2295
  @internal
978
2296
  */
979
2297
  cutByIndex(from, to) {
980
2298
  if (from == to)
981
- return Fragment3.empty;
2299
+ return Fragment2.empty;
982
2300
  if (from == 0 && to == this.content.length)
983
2301
  return this;
984
- return new Fragment3(this.content.slice(from, to));
2302
+ return new Fragment2(this.content.slice(from, to));
985
2303
  }
986
2304
  /**
987
2305
  Create a new fragment in which the node at the given index is
@@ -994,21 +2312,21 @@ var Fragment3 = class {
994
2312
  let copy2 = this.content.slice();
995
2313
  let size = this.size + node.nodeSize - current.nodeSize;
996
2314
  copy2[index] = node;
997
- return new Fragment3(copy2, size);
2315
+ return new Fragment2(copy2, size);
998
2316
  }
999
2317
  /**
1000
2318
  Create a new fragment by prepending the given node to this
1001
2319
  fragment.
1002
2320
  */
1003
2321
  addToStart(node) {
1004
- return new Fragment3([node].concat(this.content), this.size + node.nodeSize);
2322
+ return new Fragment2([node].concat(this.content), this.size + node.nodeSize);
1005
2323
  }
1006
2324
  /**
1007
2325
  Create a new fragment by appending the given node to this
1008
2326
  fragment.
1009
2327
  */
1010
2328
  addToEnd(node) {
1011
- return new Fragment3(this.content.concat(node), this.size + node.nodeSize);
2329
+ return new Fragment2(this.content.concat(node), this.size + node.nodeSize);
1012
2330
  }
1013
2331
  /**
1014
2332
  Compare this fragment to another one.
@@ -1127,10 +2445,10 @@ var Fragment3 = class {
1127
2445
  */
1128
2446
  static fromJSON(schema, value) {
1129
2447
  if (!value)
1130
- return Fragment3.empty;
2448
+ return Fragment2.empty;
1131
2449
  if (!Array.isArray(value))
1132
2450
  throw new RangeError("Invalid input for Fragment.fromJSON");
1133
- return new Fragment3(value.map(schema.nodeFromJSON));
2451
+ return new Fragment2(value.map(schema.nodeFromJSON));
1134
2452
  }
1135
2453
  /**
1136
2454
  Build a fragment from an array of nodes. Ensures that adjacent
@@ -1138,7 +2456,7 @@ var Fragment3 = class {
1138
2456
  */
1139
2457
  static fromArray(array) {
1140
2458
  if (!array.length)
1141
- return Fragment3.empty;
2459
+ return Fragment2.empty;
1142
2460
  let joined, size = 0;
1143
2461
  for (let i = 0; i < array.length; i++) {
1144
2462
  let node = array[i];
@@ -1151,7 +2469,7 @@ var Fragment3 = class {
1151
2469
  joined.push(node);
1152
2470
  }
1153
2471
  }
1154
- return new Fragment3(joined || array, size);
2472
+ return new Fragment2(joined || array, size);
1155
2473
  }
1156
2474
  /**
1157
2475
  Create a fragment from something that can be interpreted as a
@@ -1161,17 +2479,17 @@ var Fragment3 = class {
1161
2479
  */
1162
2480
  static from(nodes) {
1163
2481
  if (!nodes)
1164
- return Fragment3.empty;
1165
- if (nodes instanceof Fragment3)
2482
+ return Fragment2.empty;
2483
+ if (nodes instanceof Fragment2)
1166
2484
  return nodes;
1167
2485
  if (Array.isArray(nodes))
1168
2486
  return this.fromArray(nodes);
1169
2487
  if (nodes.attrs)
1170
- return new Fragment3([nodes], nodes.nodeSize);
2488
+ return new Fragment2([nodes], nodes.nodeSize);
1171
2489
  throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
1172
2490
  }
1173
2491
  };
1174
- Fragment3.empty = new Fragment3([], 0);
2492
+ Fragment2.empty = new Fragment2([], 0);
1175
2493
  var found = { index: 0, offset: 0 };
1176
2494
  function retIndex(index, offset) {
1177
2495
  found.index = index;
@@ -1276,7 +2594,7 @@ var Mark = class {
1276
2594
  */
1277
2595
  toJSON() {
1278
2596
  let obj = { type: this.type.name };
1279
- for (let _18 in this.attrs) {
2597
+ for (let _20 in this.attrs) {
1280
2598
  obj.attrs = this.attrs;
1281
2599
  break;
1282
2600
  }
@@ -1396,7 +2714,7 @@ var Slice = class {
1396
2714
  let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
1397
2715
  if (typeof openStart != "number" || typeof openEnd != "number")
1398
2716
  throw new RangeError("Invalid input for Slice.fromJSON");
1399
- return new Slice(Fragment3.fromJSON(schema, json.content), openStart, openEnd);
2717
+ return new Slice(Fragment2.fromJSON(schema, json.content), openStart, openEnd);
1400
2718
  }
1401
2719
  /**
1402
2720
  Create a slice from a fragment by taking the maximum possible
@@ -1411,7 +2729,7 @@ var Slice = class {
1411
2729
  return new Slice(fragment, openStart, openEnd);
1412
2730
  }
1413
2731
  };
1414
- Slice.empty = new Slice(Fragment3.empty, 0, 0);
2732
+ Slice.empty = new Slice(Fragment2.empty, 0, 0);
1415
2733
  function removeRange(content, from, to) {
1416
2734
  let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
1417
2735
  let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -1509,7 +2827,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
1509
2827
  addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
1510
2828
  }
1511
2829
  addRange($to, null, depth, content);
1512
- return new Fragment3(content);
2830
+ return new Fragment2(content);
1513
2831
  }
1514
2832
  function replaceTwoWay($from, $to, depth) {
1515
2833
  let content = [];
@@ -1519,13 +2837,13 @@ function replaceTwoWay($from, $to, depth) {
1519
2837
  addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
1520
2838
  }
1521
2839
  addRange($to, null, depth, content);
1522
- return new Fragment3(content);
2840
+ return new Fragment2(content);
1523
2841
  }
1524
2842
  function prepareSliceForReplace(slice, $along) {
1525
2843
  let extra = $along.depth - slice.openStart, parent = $along.node(extra);
1526
2844
  let node = parent.copy(slice.content);
1527
2845
  for (let i = extra - 1; i >= 0; i--)
1528
- node = $along.node(i).copy(Fragment3.from(node));
2846
+ node = $along.node(i).copy(Fragment2.from(node));
1529
2847
  return {
1530
2848
  start: node.resolveNoCache(slice.openStart + extra),
1531
2849
  end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -1864,7 +3182,7 @@ var Node = class {
1864
3182
  this.type = type;
1865
3183
  this.attrs = attrs;
1866
3184
  this.marks = marks;
1867
- this.content = content || Fragment3.empty;
3185
+ this.content = content || Fragment2.empty;
1868
3186
  }
1869
3187
  /**
1870
3188
  The array of this node's child nodes.
@@ -2169,7 +3487,7 @@ var Node = class {
2169
3487
  can optionally pass `start` and `end` indices into the
2170
3488
  replacement fragment.
2171
3489
  */
2172
- canReplace(from, to, replacement = Fragment3.empty, start = 0, end = replacement.childCount) {
3490
+ canReplace(from, to, replacement = Fragment2.empty, start = 0, end = replacement.childCount) {
2173
3491
  let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
2174
3492
  let two = one && one.matchFragment(this.content, to);
2175
3493
  if (!two || !two.validEnd)
@@ -2224,7 +3542,7 @@ var Node = class {
2224
3542
  */
2225
3543
  toJSON() {
2226
3544
  let obj = { type: this.type.name };
2227
- for (let _18 in this.attrs) {
3545
+ for (let _20 in this.attrs) {
2228
3546
  obj.attrs = this.attrs;
2229
3547
  break;
2230
3548
  }
@@ -2251,7 +3569,7 @@ var Node = class {
2251
3569
  throw new RangeError("Invalid text node in JSON");
2252
3570
  return schema.text(json.text, marks);
2253
3571
  }
2254
- let content = Fragment3.fromJSON(schema, json.content);
3572
+ let content = Fragment2.fromJSON(schema, json.content);
2255
3573
  let node = schema.nodeType(json.type).create(json.attrs, content, marks);
2256
3574
  node.type.checkAttrs(node.attrs);
2257
3575
  return node;
@@ -2393,7 +3711,7 @@ var ContentMatch = class {
2393
3711
  function search(match, types) {
2394
3712
  let finished = match.matchFragment(after, startIndex);
2395
3713
  if (finished && (!toEnd || finished.validEnd))
2396
- return Fragment3.from(types.map((tp) => tp.createAndFill()));
3714
+ return Fragment2.from(types.map((tp) => tp.createAndFill()));
2397
3715
  for (let i = 0; i < match.next.length; i++) {
2398
3716
  let { type, next } = match.next[i];
2399
3717
  if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -2845,7 +4163,7 @@ var NodeType = class {
2845
4163
  create(attrs = null, content, marks) {
2846
4164
  if (this.isText)
2847
4165
  throw new Error("NodeType.create can't construct text nodes");
2848
- return new Node(this, this.computeAttrs(attrs), Fragment3.from(content), Mark.setFrom(marks));
4166
+ return new Node(this, this.computeAttrs(attrs), Fragment2.from(content), Mark.setFrom(marks));
2849
4167
  }
2850
4168
  /**
2851
4169
  Like [`create`](https://prosemirror.net/docs/ref/#model.NodeType.create), but check the given content
@@ -2853,7 +4171,7 @@ var NodeType = class {
2853
4171
  if it doesn't match.
2854
4172
  */
2855
4173
  createChecked(attrs = null, content, marks) {
2856
- content = Fragment3.from(content);
4174
+ content = Fragment2.from(content);
2857
4175
  this.checkContent(content);
2858
4176
  return new Node(this, this.computeAttrs(attrs), content, Mark.setFrom(marks));
2859
4177
  }
@@ -2867,7 +4185,7 @@ var NodeType = class {
2867
4185
  */
2868
4186
  createAndFill(attrs = null, content, marks) {
2869
4187
  attrs = this.computeAttrs(attrs);
2870
- content = Fragment3.from(content);
4188
+ content = Fragment2.from(content);
2871
4189
  if (content.size) {
2872
4190
  let before = this.contentMatch.fillBefore(content);
2873
4191
  if (!before)
@@ -2875,7 +4193,7 @@ var NodeType = class {
2875
4193
  content = before.append(content);
2876
4194
  }
2877
4195
  let matched = this.contentMatch.matchFragment(content);
2878
- let after = matched && matched.fillBefore(Fragment3.empty, true);
4196
+ let after = matched && matched.fillBefore(Fragment2.empty, true);
2879
4197
  if (!after)
2880
4198
  return null;
2881
4199
  return new Node(this, attrs, content.append(after), Mark.setFrom(marks));
@@ -2953,7 +4271,7 @@ var NodeType = class {
2953
4271
  throw new RangeError("Schema is missing its top node type ('" + topType + "')");
2954
4272
  if (!result.text)
2955
4273
  throw new RangeError("Every schema needs a 'text' type");
2956
- for (let _18 in result.text.attrs)
4274
+ for (let _20 in result.text.attrs)
2957
4275
  throw new RangeError("The text node type should not have attributes");
2958
4276
  return result;
2959
4277
  }
@@ -3339,7 +4657,7 @@ var NodeContext = class {
3339
4657
  if (!this.match) {
3340
4658
  if (!this.type)
3341
4659
  return [];
3342
- let fill = this.type.contentMatch.fillBefore(Fragment3.from(node));
4660
+ let fill = this.type.contentMatch.fillBefore(Fragment2.from(node));
3343
4661
  if (fill) {
3344
4662
  this.match = this.type.contentMatch.matchFragment(fill);
3345
4663
  } else {
@@ -3365,9 +4683,9 @@ var NodeContext = class {
3365
4683
  this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m2[0].length));
3366
4684
  }
3367
4685
  }
3368
- let content = Fragment3.from(this.content);
4686
+ let content = Fragment2.from(this.content);
3369
4687
  if (!openEnd && this.match)
3370
- content = content.append(this.match.fillBefore(Fragment3.empty, true));
4688
+ content = content.append(this.match.fillBefore(Fragment2.empty, true));
3371
4689
  return this.type ? this.type.create(this.attrs, content, this.marks) : content;
3372
4690
  }
3373
4691
  inlineContext(node) {
@@ -4184,7 +5502,7 @@ function mapFragment(fragment, f, parent) {
4184
5502
  child = f(child, parent, i);
4185
5503
  mapped.push(child);
4186
5504
  }
4187
- return Fragment3.fromArray(mapped);
5505
+ return Fragment2.fromArray(mapped);
4188
5506
  }
4189
5507
  var AddMarkStep = class extends Step {
4190
5508
  /**
@@ -4301,7 +5619,7 @@ var AddNodeMarkStep = class extends Step {
4301
5619
  if (!node)
4302
5620
  return StepResult.fail("No node at mark step's position");
4303
5621
  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));
5622
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4305
5623
  }
4306
5624
  invert(doc2) {
4307
5625
  let node = doc2.nodeAt(this.pos);
@@ -4347,7 +5665,7 @@ var RemoveNodeMarkStep = class extends Step {
4347
5665
  if (!node)
4348
5666
  return StepResult.fail("No node at mark step's position");
4349
5667
  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));
5668
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
4351
5669
  }
4352
5670
  invert(doc2) {
4353
5671
  let node = doc2.nodeAt(this.pos);
@@ -4612,7 +5930,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4612
5930
  let m2, newline = /\r?\n|\r/g, slice;
4613
5931
  while (m2 = newline.exec(child.text)) {
4614
5932
  if (!slice)
4615
- slice = new Slice(Fragment3.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
5933
+ slice = new Slice(Fragment2.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
4616
5934
  replSteps.push(new ReplaceStep(cur + m2.index, cur + m2.index + m2[0].length, slice));
4617
5935
  }
4618
5936
  }
@@ -4620,7 +5938,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
4620
5938
  cur = end;
4621
5939
  }
4622
5940
  if (!match.validEnd) {
4623
- let fill = match.fillBefore(Fragment3.empty, true);
5941
+ let fill = match.fillBefore(Fragment2.empty, true);
4624
5942
  tr.replace(cur, cur, new Slice(fill, 0, 0));
4625
5943
  }
4626
5944
  for (let i = replSteps.length - 1; i >= 0; i--)
@@ -4650,20 +5968,20 @@ function lift(tr, range, target) {
4650
5968
  let { $from, $to, depth } = range;
4651
5969
  let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
4652
5970
  let start = gapStart, end = gapEnd;
4653
- let before = Fragment3.empty, openStart = 0;
5971
+ let before = Fragment2.empty, openStart = 0;
4654
5972
  for (let d = depth, splitting = false; d > target; d--)
4655
5973
  if (splitting || $from.index(d) > 0) {
4656
5974
  splitting = true;
4657
- before = Fragment3.from($from.node(d).copy(before));
5975
+ before = Fragment2.from($from.node(d).copy(before));
4658
5976
  openStart++;
4659
5977
  } else {
4660
5978
  start--;
4661
5979
  }
4662
- let after = Fragment3.empty, openEnd = 0;
5980
+ let after = Fragment2.empty, openEnd = 0;
4663
5981
  for (let d = depth, splitting = false; d > target; d--)
4664
5982
  if (splitting || $to.after(d + 1) < $to.end(d)) {
4665
5983
  splitting = true;
4666
- after = Fragment3.from($to.node(d).copy(after));
5984
+ after = Fragment2.from($to.node(d).copy(after));
4667
5985
  openEnd++;
4668
5986
  } else {
4669
5987
  end++;
@@ -4703,14 +6021,14 @@ function findWrappingInside(range, type) {
4703
6021
  return inside;
4704
6022
  }
4705
6023
  function wrap(tr, range, wrappers) {
4706
- let content = Fragment3.empty;
6024
+ let content = Fragment2.empty;
4707
6025
  for (let i = wrappers.length - 1; i >= 0; i--) {
4708
6026
  if (content.size) {
4709
6027
  let match = wrappers[i].type.contentMatch.matchFragment(content);
4710
6028
  if (!match || !match.validEnd)
4711
6029
  throw new RangeError("Wrapper type given to Transform.wrap does not form valid content of its parent wrapper");
4712
6030
  }
4713
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
6031
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
4714
6032
  }
4715
6033
  let start = range.start, end = range.end;
4716
6034
  tr.step(new ReplaceAroundStep(start, end, start, end, new Slice(content, 0, 0), wrappers.length, true));
@@ -4735,7 +6053,7 @@ function setBlockType(tr, from, to, type, attrs) {
4735
6053
  clearIncompatible(tr, tr.mapping.slice(mapFrom).map(pos, 1), type, void 0, convertNewlines === null);
4736
6054
  let mapping = tr.mapping.slice(mapFrom);
4737
6055
  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));
6056
+ 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
6057
  if (convertNewlines === true)
4740
6058
  replaceNewlines(tr, node, pos, mapFrom);
4741
6059
  return false;
@@ -4776,7 +6094,7 @@ function setNodeMarkup(tr, pos, type, attrs, marks) {
4776
6094
  return tr.replaceWith(pos, pos + node.nodeSize, newNode);
4777
6095
  if (!type.validContent(node.content))
4778
6096
  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));
6097
+ tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment2.from(newNode), 0, 0), 1, true));
4780
6098
  }
4781
6099
  function canSplit(doc2, pos, depth = 1, typesAfter) {
4782
6100
  let $pos = doc2.resolve(pos), base2 = $pos.depth - depth;
@@ -4800,11 +6118,11 @@ function canSplit(doc2, pos, depth = 1, typesAfter) {
4800
6118
  return $pos.node(base2).canReplaceWith(index, index, baseType ? baseType.type : $pos.node(base2 + 1).type);
4801
6119
  }
4802
6120
  function split(tr, pos, depth = 1, typesAfter) {
4803
- let $pos = tr.doc.resolve(pos), before = Fragment3.empty, after = Fragment3.empty;
6121
+ let $pos = tr.doc.resolve(pos), before = Fragment2.empty, after = Fragment2.empty;
4804
6122
  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));
6123
+ before = Fragment2.from($pos.node(d).copy(before));
4806
6124
  let typeAfter = typesAfter && typesAfter[i];
4807
- after = Fragment3.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
6125
+ after = Fragment2.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
4808
6126
  }
4809
6127
  tr.step(new ReplaceStep(pos, pos, new Slice(before.append(after), depth, depth), true));
4810
6128
  }
@@ -4919,7 +6237,7 @@ var Fitter = class {
4919
6237
  this.$to = $to;
4920
6238
  this.unplaced = unplaced;
4921
6239
  this.frontier = [];
4922
- this.placed = Fragment3.empty;
6240
+ this.placed = Fragment2.empty;
4923
6241
  for (let i = 0; i <= $from.depth; i++) {
4924
6242
  let node = $from.node(i);
4925
6243
  this.frontier.push({
@@ -4928,7 +6246,7 @@ var Fitter = class {
4928
6246
  });
4929
6247
  }
4930
6248
  for (let i = $from.depth; i > 0; i--)
4931
- this.placed = Fragment3.from($from.node(i).copy(this.placed));
6249
+ this.placed = Fragment2.from($from.node(i).copy(this.placed));
4932
6250
  }
4933
6251
  get depth() {
4934
6252
  return this.frontier.length - 1;
@@ -4985,7 +6303,7 @@ var Fitter = class {
4985
6303
  let first2 = fragment.firstChild;
4986
6304
  for (let frontierDepth = this.depth; frontierDepth >= 0; frontierDepth--) {
4987
6305
  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)))
6306
+ if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment2.from(first2), false)) : parent && type.compatibleContent(parent.type)))
4989
6307
  return { sliceDepth, frontierDepth, parent, inject };
4990
6308
  else if (pass == 2 && first2 && (wrap2 = match.findWrapping(first2.type)))
4991
6309
  return { sliceDepth, frontierDepth, parent, wrap: wrap2 };
@@ -5045,7 +6363,7 @@ var Fitter = class {
5045
6363
  let toEnd = taken == fragment.childCount;
5046
6364
  if (!toEnd)
5047
6365
  openEndCount = -1;
5048
- this.placed = addToFragment(this.placed, frontierDepth, Fragment3.from(add));
6366
+ this.placed = addToFragment(this.placed, frontierDepth, Fragment2.from(add));
5049
6367
  this.frontier[frontierDepth].match = match;
5050
6368
  if (toEnd && openEndCount < 0 && parent && parent.type == this.frontier[this.depth].type && this.frontier.length > 1)
5051
6369
  this.closeFrontierNode();
@@ -5102,12 +6420,12 @@ var Fitter = class {
5102
6420
  openFrontierNode(type, attrs = null, content) {
5103
6421
  let top = this.frontier[this.depth];
5104
6422
  top.match = top.match.matchType(type);
5105
- this.placed = addToFragment(this.placed, this.depth, Fragment3.from(type.create(attrs, content)));
6423
+ this.placed = addToFragment(this.placed, this.depth, Fragment2.from(type.create(attrs, content)));
5106
6424
  this.frontier.push({ type, match: type.contentMatch });
5107
6425
  }
5108
6426
  closeFrontierNode() {
5109
6427
  let open = this.frontier.pop();
5110
- let add = open.match.fillBefore(Fragment3.empty, true);
6428
+ let add = open.match.fillBefore(Fragment2.empty, true);
5111
6429
  if (add.childCount)
5112
6430
  this.placed = addToFragment(this.placed, this.frontier.length, add);
5113
6431
  }
@@ -5136,7 +6454,7 @@ function closeNodeStart(node, openStart, openEnd) {
5136
6454
  if (openStart > 0) {
5137
6455
  frag = node.type.contentMatch.fillBefore(frag).append(frag);
5138
6456
  if (openEnd <= 0)
5139
- frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment3.empty, true));
6457
+ frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment2.empty, true));
5140
6458
  }
5141
6459
  return node.copy(frag);
5142
6460
  }
@@ -5228,7 +6546,7 @@ function closeFragment(fragment, depth, oldOpen, newOpen, parent) {
5228
6546
  if (depth > newOpen) {
5229
6547
  let match = parent.contentMatchAt(0);
5230
6548
  let start = match.fillBefore(fragment).append(fragment);
5231
- fragment = start.append(match.matchFragment(start).fillBefore(Fragment3.empty, true));
6549
+ fragment = start.append(match.matchFragment(start).fillBefore(Fragment2.empty, true));
5232
6550
  }
5233
6551
  return fragment;
5234
6552
  }
@@ -5238,7 +6556,7 @@ function replaceRangeWith(tr, from, to, node) {
5238
6556
  if (point != null)
5239
6557
  from = to = point;
5240
6558
  }
5241
- tr.replaceRange(from, to, new Slice(Fragment3.from(node), 0, 0));
6559
+ tr.replaceRange(from, to, new Slice(Fragment2.from(node), 0, 0));
5242
6560
  }
5243
6561
  function deleteRange(tr, from, to) {
5244
6562
  let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
@@ -5286,7 +6604,7 @@ var AttrStep = class extends Step {
5286
6604
  attrs[name] = node.attrs[name];
5287
6605
  attrs[this.attr] = this.value;
5288
6606
  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));
6607
+ return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
5290
6608
  }
5291
6609
  getMap() {
5292
6610
  return StepMap.empty;
@@ -5421,7 +6739,7 @@ var Transform = class {
5421
6739
  fragment, node, or array of nodes.
5422
6740
  */
5423
6741
  replaceWith(from, to, content) {
5424
- return this.replace(from, to, new Slice(Fragment3.from(content), 0, 0));
6742
+ return this.replace(from, to, new Slice(Fragment2.from(content), 0, 0));
5425
6743
  }
5426
6744
  /**
5427
6745
  Delete the content between the given positions.
@@ -5923,7 +7241,7 @@ var NodeSelection = class extends Selection {
5923
7241
  return new NodeSelection($pos);
5924
7242
  }
5925
7243
  content() {
5926
- return new Slice(Fragment3.from(this.node), 0, 0);
7244
+ return new Slice(Fragment2.from(this.node), 0, 0);
5927
7245
  }
5928
7246
  eq(other) {
5929
7247
  return other instanceof NodeSelection && other.anchor == this.anchor;
@@ -6481,10 +7799,10 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6481
7799
  let canDelAfter = !isolated && $cut.parent.canReplace($cut.index(), $cut.index() + 1);
6482
7800
  if (canDelAfter && (conn = (match = before.contentMatchAt(before.childCount)).findWrapping(after.type)) && match.matchType(conn[0] || after.type).validEnd) {
6483
7801
  if (dispatch) {
6484
- let end = $cut.pos + after.nodeSize, wrap2 = Fragment3.empty;
7802
+ let end = $cut.pos + after.nodeSize, wrap2 = Fragment2.empty;
6485
7803
  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));
7804
+ wrap2 = Fragment2.from(conn[i].create(null, wrap2));
7805
+ wrap2 = Fragment2.from(before.copy(wrap2));
6488
7806
  let tr = state.tr.step(new ReplaceAroundStep($cut.pos - 1, end, $cut.pos, end, new Slice(wrap2, 1, 0), conn.length, true));
6489
7807
  let $joinAt = tr.doc.resolve(end + 2 * conn.length);
6490
7808
  if ($joinAt.nodeAfter && $joinAt.nodeAfter.type == before.type && canJoin(tr.doc, $joinAt.pos))
@@ -6513,9 +7831,9 @@ function deleteBarrier(state, $cut, dispatch, dir) {
6513
7831
  afterDepth++;
6514
7832
  if (at.canReplace(at.childCount, at.childCount, afterText.content)) {
6515
7833
  if (dispatch) {
6516
- let end = Fragment3.empty;
7834
+ let end = Fragment2.empty;
6517
7835
  for (let i = wrap2.length - 1; i >= 0; i--)
6518
- end = Fragment3.from(wrap2[i].copy(end));
7836
+ end = Fragment2.from(wrap2[i].copy(end));
6519
7837
  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
7838
  dispatch(tr.scrollIntoView());
6521
7839
  }
@@ -6620,9 +7938,9 @@ function wrapRangeInList(tr, range, listType, attrs = null) {
6620
7938
  return true;
6621
7939
  }
6622
7940
  function doWrapInList(tr, range, wrappers, joinBefore, listType) {
6623
- let content = Fragment3.empty;
7941
+ let content = Fragment2.empty;
6624
7942
  for (let i = wrappers.length - 1; i >= 0; i--)
6625
- content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
7943
+ content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
6626
7944
  tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
6627
7945
  let found2 = 0;
6628
7946
  for (let i = 0; i < wrappers.length; i++)
@@ -6656,7 +7974,7 @@ function liftListItem(itemType) {
6656
7974
  function liftToOuterList(state, dispatch, itemType, range) {
6657
7975
  let tr = state.tr, end = range.end, endOfList = range.$to.end(range.depth);
6658
7976
  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));
7977
+ tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment2.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
6660
7978
  range = new NodeRange(tr.doc.resolve(range.$from.pos), tr.doc.resolve(endOfList), range.depth);
6661
7979
  }
6662
7980
  const target = liftTarget(range);
@@ -6680,10 +7998,10 @@ function liftOutOfList(state, dispatch, range) {
6680
7998
  return false;
6681
7999
  let atStart = range.startIndex == 0, atEnd = range.endIndex == list.childCount;
6682
8000
  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))))
8001
+ if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment2.empty : Fragment2.from(list))))
6684
8002
  return false;
6685
8003
  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));
8004
+ 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
8005
  dispatch(tr.scrollIntoView());
6688
8006
  return true;
6689
8007
  }
@@ -6701,8 +8019,8 @@ function sinkListItem(itemType) {
6701
8019
  return false;
6702
8020
  if (dispatch) {
6703
8021
  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);
8022
+ let inner = Fragment2.from(nestedBefore ? itemType.create() : null);
8023
+ let slice = new Slice(Fragment2.from(itemType.create(null, Fragment2.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
6706
8024
  let before = range.start, after = range.end;
6707
8025
  dispatch(state.tr.step(new ReplaceAroundStep(before - (nestedBefore ? 3 : 1), after, before, after, slice, 1, true)).scrollIntoView());
6708
8026
  }
@@ -7321,7 +8639,7 @@ function elementFromString(value) {
7321
8639
  return removeWhitespaces(html);
7322
8640
  }
7323
8641
  function createNodeFromContent(content, schema, options) {
7324
- if (content instanceof Node || content instanceof Fragment3) {
8642
+ if (content instanceof Node || content instanceof Fragment2) {
7325
8643
  return content;
7326
8644
  }
7327
8645
  options = {
@@ -7335,7 +8653,7 @@ function createNodeFromContent(content, schema, options) {
7335
8653
  try {
7336
8654
  const isArrayContent = Array.isArray(content) && content.length > 0;
7337
8655
  if (isArrayContent) {
7338
- return Fragment3.fromArray(content.map((item) => schema.nodeFromJSON(item)));
8656
+ return Fragment2.fromArray(content.map((item) => schema.nodeFromJSON(item)));
7339
8657
  }
7340
8658
  const node = schema.nodeFromJSON(content);
7341
8659
  if (options.errorOnInvalidContent) {
@@ -7482,7 +8800,7 @@ var insertContentAt = (position, value, options) => ({ tr, dispatch, editor }) =
7482
8800
  if (isOnlyTextContent) {
7483
8801
  if (Array.isArray(value)) {
7484
8802
  newContent = value.map((v) => v.text || "").join("");
7485
- } else if (value instanceof Fragment3) {
8803
+ } else if (value instanceof Fragment2) {
7486
8804
  let text = "";
7487
8805
  value.forEach((node) => {
7488
8806
  if (node.text) {
@@ -7962,7 +9280,7 @@ function removeDuplicates(array, by = JSON.stringify) {
7962
9280
  function simplifyChangedRanges(changes) {
7963
9281
  const uniqueChanges = removeDuplicates(changes);
7964
9282
  return uniqueChanges.length === 1 ? uniqueChanges : uniqueChanges.filter((change, index) => {
7965
- const rest = uniqueChanges.filter((_18, i) => i !== index);
9283
+ const rest = uniqueChanges.filter((_20, i) => i !== index);
7966
9284
  return !rest.some((otherChange) => {
7967
9285
  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
9286
  });
@@ -8353,10 +9671,10 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8353
9671
  return false;
8354
9672
  }
8355
9673
  if (dispatch) {
8356
- let wrap2 = Fragment3.empty;
9674
+ let wrap2 = Fragment2.empty;
8357
9675
  const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
8358
9676
  for (let d = $from.depth - depthBefore; d >= $from.depth - 3; d -= 1) {
8359
- wrap2 = Fragment3.from($from.node(d).copy(wrap2));
9677
+ wrap2 = Fragment2.from($from.node(d).copy(wrap2));
8360
9678
  }
8361
9679
  const depthAfter = (
8362
9680
  // eslint-disable-next-line no-nested-ternary
@@ -8367,7 +9685,7 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
8367
9685
  ...overrideAttrs
8368
9686
  };
8369
9687
  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));
9688
+ wrap2 = wrap2.append(Fragment2.from(type.createAndFill(null, nextType2) || void 0));
8371
9689
  const start = $from.before($from.depth - (depthBefore - 1));
8372
9690
  tr.replace(start, $from.after(-depthAfter), new Slice(wrap2, 4 - depthBefore, 0));
8373
9691
  let sel = -1;
@@ -8987,7 +10305,7 @@ var Drop = Extension.create({
8987
10305
  new Plugin({
8988
10306
  key: new PluginKey("tiptapDrop"),
8989
10307
  props: {
8990
- handleDrop: (_18, e, slice, moved) => {
10308
+ handleDrop: (_20, e, slice, moved) => {
8991
10309
  this.editor.emit("drop", {
8992
10310
  editor: this.editor,
8993
10311
  event: e,
@@ -9789,8 +11107,23 @@ var Underline = Mark2.create({
9789
11107
  }
9790
11108
  });
9791
11109
  var index_default = Underline;
9792
- var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9793
- const theme = material.useTheme();
11110
+ var AppRichTextEditor = ({
11111
+ name,
11112
+ label,
11113
+ required = false,
11114
+ variant = "outlined",
11115
+ placeholder,
11116
+ sx,
11117
+ editorSx,
11118
+ toolbarSx,
11119
+ contentSx,
11120
+ errorSx,
11121
+ labelSx,
11122
+ buttonSx,
11123
+ activeButtonSx,
11124
+ dialogSx
11125
+ }) => {
11126
+ material.useTheme();
9794
11127
  const { values, setFieldValue } = formik.useFormikContext();
9795
11128
  const [linkDialogOpen, setLinkDialogOpen] = react.useState(false);
9796
11129
  const [linkUrl, setLinkUrl] = react.useState("");
@@ -9813,11 +11146,6 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9813
11146
  }, [values[name]]);
9814
11147
  if (!editor)
9815
11148
  return null;
9816
- const openLinkDialog = () => {
9817
- const previousUrl = editor.getAttributes("link").href || "";
9818
- setLinkUrl(previousUrl);
9819
- setLinkDialogOpen(true);
9820
- };
9821
11149
  const applyLink = () => {
9822
11150
  editor.chain().focus().extendMarkRange("link").setLink({ href: linkUrl }).run();
9823
11151
  setLinkDialogOpen(false);
@@ -9826,24 +11154,63 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9826
11154
  editor.chain().focus().unsetLink().run();
9827
11155
  setLinkDialogOpen(false);
9828
11156
  };
9829
- return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%" }, children: [
11157
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%", ...sx }, children: [
11158
+ /* @__PURE__ */ jsxRuntime.jsx(
11159
+ formik.ErrorMessage,
11160
+ {
11161
+ name,
11162
+ render: (msg) => /* @__PURE__ */ jsxRuntime.jsx(
11163
+ material.Typography,
11164
+ {
11165
+ variant: "caption",
11166
+ sx: [{
11167
+ color: "error.main",
11168
+ display: "block",
11169
+ mt: 0.5,
11170
+ ...errorSx
11171
+ }],
11172
+ children: msg
11173
+ }
11174
+ )
11175
+ }
11176
+ ),
9830
11177
  label && /* @__PURE__ */ jsxRuntime.jsxs(
9831
11178
  material.Typography,
9832
11179
  {
9833
11180
  variant: "button",
9834
- sx: { color: theme.palette.text.primary, mb: 1, display: "block" },
11181
+ sx: [{
11182
+ color: "text.primary",
11183
+ mb: 1,
11184
+ display: "block",
11185
+ ...labelSx
11186
+ }],
9835
11187
  children: [
9836
11188
  label,
9837
11189
  required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
9838
11190
  ]
9839
11191
  }
9840
11192
  ),
9841
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1, display: "flex", gap: 1, flexWrap: "wrap" }, children: [
11193
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
11194
+ mb: 1,
11195
+ display: "flex",
11196
+ gap: 1,
11197
+ flexWrap: "wrap",
11198
+ p: 1,
11199
+ bgcolor: "background.paper",
11200
+ borderRadius: 1,
11201
+ border: "1px solid",
11202
+ borderColor: "divider",
11203
+ ...toolbarSx
11204
+ }, children: [
9842
11205
  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(
9843
11206
  material.IconButton,
9844
11207
  {
9845
11208
  onClick: () => editor.chain().focus().toggleBold().run(),
9846
11209
  color: editor.isActive("bold") ? "primary" : "default",
11210
+ sx: {
11211
+ ...buttonSx,
11212
+ ...editor.isActive("bold") ? activeButtonSx : {}
11213
+ },
9847
11214
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatBoldIcon__default.default, {})
9848
11215
  }
9849
11216
  ) }),
@@ -9852,6 +11219,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9852
11219
  {
9853
11220
  onClick: () => editor.chain().focus().toggleItalic().run(),
9854
11221
  color: editor.isActive("italic") ? "primary" : "default",
11222
+ sx: {
11223
+ ...buttonSx,
11224
+ ...editor.isActive("italic") ? activeButtonSx : {}
11225
+ },
9855
11226
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatItalicIcon__default.default, {})
9856
11227
  }
9857
11228
  ) }),
@@ -9860,6 +11231,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9860
11231
  {
9861
11232
  onClick: () => editor.chain().focus().toggleUnderline().run(),
9862
11233
  color: editor.isActive("underline") ? "primary" : "default",
11234
+ sx: {
11235
+ ...buttonSx,
11236
+ ...editor.isActive("underline") ? activeButtonSx : {}
11237
+ },
9863
11238
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatUnderlinedIcon__default.default, {})
9864
11239
  }
9865
11240
  ) }),
@@ -9868,6 +11243,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9868
11243
  {
9869
11244
  onClick: () => editor.chain().focus().toggleStrike().run(),
9870
11245
  color: editor.isActive("strike") ? "primary" : "default",
11246
+ sx: {
11247
+ ...buttonSx,
11248
+ ...editor.isActive("strike") ? activeButtonSx : {}
11249
+ },
9871
11250
  children: /* @__PURE__ */ jsxRuntime.jsx(StrikethroughSIcon__default.default, {})
9872
11251
  }
9873
11252
  ) }),
@@ -9876,6 +11255,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9876
11255
  {
9877
11256
  onClick: () => editor.chain().focus().toggleBulletList().run(),
9878
11257
  color: editor.isActive("bulletList") ? "primary" : "default",
11258
+ sx: {
11259
+ ...buttonSx,
11260
+ ...editor.isActive("bulletList") ? activeButtonSx : {}
11261
+ },
9879
11262
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatListBulletedIcon__default.default, {})
9880
11263
  }
9881
11264
  ) }),
@@ -9884,6 +11267,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9884
11267
  {
9885
11268
  onClick: () => editor.chain().focus().toggleOrderedList().run(),
9886
11269
  color: editor.isActive("orderedList") ? "primary" : "default",
11270
+ sx: {
11271
+ ...buttonSx,
11272
+ ...editor.isActive("orderedList") ? activeButtonSx : {}
11273
+ },
9887
11274
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatListNumberedIcon__default.default, {})
9888
11275
  }
9889
11276
  ) }),
@@ -9892,6 +11279,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9892
11279
  {
9893
11280
  onClick: () => editor.chain().focus().setTextAlign("left").run(),
9894
11281
  color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
11282
+ sx: {
11283
+ ...buttonSx,
11284
+ ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
11285
+ },
9895
11286
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignLeftIcon__default.default, {})
9896
11287
  }
9897
11288
  ) }),
@@ -9900,6 +11291,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9900
11291
  {
9901
11292
  onClick: () => editor.chain().focus().setTextAlign("center").run(),
9902
11293
  color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
11294
+ sx: {
11295
+ ...buttonSx,
11296
+ ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
11297
+ },
9903
11298
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignCenterIcon__default.default, {})
9904
11299
  }
9905
11300
  ) }),
@@ -9908,6 +11303,10 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9908
11303
  {
9909
11304
  onClick: () => editor.chain().focus().setTextAlign("right").run(),
9910
11305
  color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
11306
+ sx: {
11307
+ ...buttonSx,
11308
+ ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
11309
+ },
9911
11310
  children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignRightIcon__default.default, {})
9912
11311
  }
9913
11312
  ) }),
@@ -9916,36 +11315,78 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9916
11315
  {
9917
11316
  onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
9918
11317
  color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
11318
+ sx: {
11319
+ ...buttonSx,
11320
+ ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
11321
+ },
9919
11322
  children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "1rem" } })
9920
11323
  }
9921
11324
  ) }),
9922
- /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsx(
11325
+ /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsxs(
9923
11326
  material.IconButton,
9924
11327
  {
9925
11328
  onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
9926
11329
  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, {})
11330
+ sx: {
11331
+ ...buttonSx,
11332
+ ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
11333
+ },
11334
+ children: [
11335
+ /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } }),
11336
+ /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {})
11337
+ ]
9936
11338
  }
9937
11339
  ) }),
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
11340
  /* @__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
11341
  ] }),
9941
11342
  /* @__PURE__ */ jsxRuntime.jsx(
9942
11343
  material.Box,
9943
11344
  {
9944
11345
  sx: {
9945
- border: `1px solid ${theme.palette.grey[400]}`,
11346
+ border: "1px solid",
11347
+ borderColor: "divider",
9946
11348
  borderRadius: 1,
11349
+ p: 2,
9947
11350
  minHeight: 200,
9948
- p: 2
11351
+ maxHeight: 400,
11352
+ overflowY: "auto",
11353
+ bgcolor: "background.paper",
11354
+ "& .ProseMirror": {
11355
+ outline: "none",
11356
+ minHeight: 150,
11357
+ "& > * + *": {
11358
+ mt: 2
11359
+ },
11360
+ "& h1": {
11361
+ fontSize: "2em",
11362
+ fontWeight: "bold",
11363
+ lineHeight: 1.2,
11364
+ color: "text.primary"
11365
+ },
11366
+ "& h2": {
11367
+ fontSize: "1.5em",
11368
+ fontWeight: "bold",
11369
+ lineHeight: 1.3,
11370
+ color: "text.primary"
11371
+ },
11372
+ "& p": {
11373
+ color: "text.primary",
11374
+ lineHeight: 1.6
11375
+ },
11376
+ "& ul, & ol": {
11377
+ pl: 3,
11378
+ color: "text.primary"
11379
+ },
11380
+ "& a": {
11381
+ color: "primary.main",
11382
+ textDecoration: "none",
11383
+ "&:hover": {
11384
+ textDecoration: "underline"
11385
+ }
11386
+ },
11387
+ ...contentSx
11388
+ },
11389
+ ...editorSx
9949
11390
  },
9950
11391
  children: /* @__PURE__ */ jsxRuntime.jsx(
9951
11392
  react$2.EditorContent,
@@ -9965,142 +11406,513 @@ var AppRichTextEditor = ({ name, label, required, placeholder }) => {
9965
11406
  children: /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name, component: "div" })
9966
11407
  }
9967
11408
  ),
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
- ] })
11409
+ /* @__PURE__ */ jsxRuntime.jsxs(
11410
+ material.Dialog,
11411
+ {
11412
+ open: linkDialogOpen,
11413
+ onClose: () => setLinkDialogOpen(false),
11414
+ PaperProps: {
11415
+ sx: {
11416
+ minWidth: 400,
11417
+ p: 2,
11418
+ bgcolor: "background.paper",
11419
+ borderRadius: 1,
11420
+ border: "1px solid",
11421
+ borderColor: "divider",
11422
+ "& .MuiDialogTitle-root": {
11423
+ borderBottom: "1px solid",
11424
+ borderColor: "divider",
11425
+ p: 2
11426
+ },
11427
+ "& .MuiDialogContent-root": {
11428
+ p: 2
11429
+ },
11430
+ "& .MuiDialogActions-root": {
11431
+ p: 2,
11432
+ borderTop: "1px solid",
11433
+ borderColor: "divider"
11434
+ },
11435
+ ...dialogSx
11436
+ }
11437
+ },
11438
+ children: [
11439
+ /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: "Insert Link" }),
11440
+ /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
11441
+ material.TextField,
11442
+ {
11443
+ autoFocus: true,
11444
+ margin: "dense",
11445
+ id: "url",
11446
+ label: "URL",
11447
+ type: "url",
11448
+ fullWidth: true,
11449
+ variant,
11450
+ value: linkUrl,
11451
+ onChange: (e) => setLinkUrl(e.target.value),
11452
+ placeholder: "https://example.com"
11453
+ }
11454
+ ) }),
11455
+ /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
11456
+ /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: removeLink, color: "error", children: "Remove" }),
11457
+ /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: () => setLinkDialogOpen(false), children: "Cancel" }),
11458
+ /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: applyLink, variant: "contained", children: "Apply" })
11459
+ ] })
11460
+ ]
11461
+ }
11462
+ )
9989
11463
  ] });
9990
11464
  };
9991
11465
  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"
11466
+ var AppSearchableMultiSelector = react.forwardRef(
11467
+ ({
11468
+ name,
11469
+ label,
11470
+ multiple = true,
11471
+ options = [],
11472
+ setSearchQuery,
11473
+ required = false,
11474
+ variant = "outlined",
11475
+ disabled = false,
11476
+ readOnly = false,
11477
+ showHelperText = false,
11478
+ helperText,
11479
+ maxSelections,
11480
+ showSelectedCount = false,
11481
+ sx,
11482
+ formControlSx,
11483
+ labelSx,
11484
+ inputSx,
11485
+ textFieldSx,
11486
+ autocompleteSx,
11487
+ listboxSx,
11488
+ optionSx,
11489
+ chipSx,
11490
+ errorSx,
11491
+ helperTextSx,
11492
+ selectedCountSx,
11493
+ renderInput: externalRenderInput,
11494
+ renderOption: externalRenderOption,
11495
+ renderTags: externalRenderTags,
11496
+ renderGroup: externalRenderGroup,
11497
+ labelComponent: LabelComponent = material.InputLabel,
11498
+ inputComponent: InputComponent = "input",
11499
+ errorComponent: ErrorComponent = material.Typography,
11500
+ helperTextComponent: HelperTextComponent = material.FormHelperText,
11501
+ labelProps = {},
11502
+ inputProps = {},
11503
+ textFieldProps = {},
11504
+ autocompleteProps = {},
11505
+ checkboxProps = {},
11506
+ chipProps = {},
11507
+ errorProps = {},
11508
+ helperTextProps = {},
11509
+ className = "",
11510
+ formControlClassName = "",
11511
+ labelClassName = "",
11512
+ inputClassName = "",
11513
+ textFieldClassName = "",
11514
+ autocompleteClassName = "",
11515
+ listboxClassName = "",
11516
+ optionClassName = "",
11517
+ chipClassName = "",
11518
+ errorClassName = "",
11519
+ helperTextClassName = "",
11520
+ onInputChange: externalOnInputChange,
11521
+ onChange: externalOnChange,
11522
+ onOpen,
11523
+ onClose,
11524
+ onBlur: externalOnBlur,
11525
+ onFocus: externalOnFocus,
11526
+ onClear,
11527
+ onMaxSelectionsReached,
11528
+ onRemove,
11529
+ onAdd,
11530
+ ...otherProps
11531
+ }, ref) => {
11532
+ material.useTheme();
11533
+ const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
11534
+ const fieldError = _19__default.default.get(errors, name);
11535
+ const isTouched = Boolean(_19__default.default.get(touched, name));
11536
+ const hasError = Boolean(fieldError) && isTouched;
11537
+ const val = _19__default.default.get(values, name);
11538
+ const selectedValues = Array.isArray(val) ? val : [];
11539
+ const selectedCount = selectedValues.length;
11540
+ const handleChange = (event, value, reason, details) => {
11541
+ const normalizedValue = (() => {
11542
+ if (value === null)
11543
+ return [];
11544
+ const arr = Array.isArray(value) ? value : [value];
11545
+ return arr.map(
11546
+ (item) => typeof item === "string" ? { value: item, label: item } : item
11547
+ );
11548
+ })();
11549
+ if (maxSelections && normalizedValue.length > maxSelections) {
11550
+ if (onMaxSelectionsReached) {
11551
+ onMaxSelectionsReached(maxSelections);
11552
+ }
11553
+ return;
11554
+ }
11555
+ if (reason === "selectOption" || reason === "removeOption") {
11556
+ const added = normalizedValue.filter(
11557
+ (item) => !selectedValues.some((v) => v.value === item.value)
11558
+ );
11559
+ const removed = selectedValues.filter(
11560
+ (item) => !normalizedValue.some((v) => v.value === item.value)
11561
+ );
11562
+ if (added.length > 0 && onAdd) {
11563
+ added.forEach((item) => onAdd(item));
11564
+ }
11565
+ if (removed.length > 0 && onRemove) {
11566
+ removed.forEach((item) => onRemove(item));
11567
+ }
11568
+ }
11569
+ setFieldValue(name, normalizedValue, true);
11570
+ if (externalOnChange) {
11571
+ externalOnChange(event, normalizedValue, reason);
11572
+ }
11573
+ };
11574
+ const handleInputChange = (event, value, reason) => {
11575
+ if (setSearchQuery) {
11576
+ setSearchQuery(value);
11577
+ }
11578
+ if (externalOnInputChange) {
11579
+ externalOnInputChange(event, value, reason);
11580
+ }
11581
+ };
11582
+ const handleBlur = (event) => {
11583
+ setFieldTouched(name, true, true);
11584
+ if (externalOnBlur) {
11585
+ externalOnBlur(event);
11586
+ }
11587
+ };
11588
+ const handleFocus = (event) => {
11589
+ if (externalOnFocus) {
11590
+ externalOnFocus(event);
11591
+ }
11592
+ };
11593
+ const filterOptions = (options2, { inputValue }) => {
11594
+ if (!inputValue)
11595
+ return options2;
11596
+ const inputValueLower = inputValue.toLowerCase();
11597
+ return options2.filter(
11598
+ (option) => {
11599
+ var _a, _b, _c, _d;
11600
+ 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));
11601
+ }
11602
+ );
11603
+ };
11604
+ const defaultRenderInput = (params) => /* @__PURE__ */ jsxRuntime.jsx(
11605
+ material.TextField,
11606
+ {
11607
+ ...params,
11608
+ variant,
11609
+ error: hasError,
11610
+ helperText: "",
11611
+ placeholder: "",
11612
+ inputRef: inputProps.ref,
11613
+ inputProps: {
11614
+ ...params.inputProps,
11615
+ ...inputProps,
11616
+ className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
10022
11617
  },
10023
- ".MuiInputLabel-root.Mui-focused": {
10024
- color: "text.primary"
11618
+ InputProps: {
11619
+ ...params.InputProps,
11620
+ ...textFieldProps.InputProps,
11621
+ className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
10025
11622
  },
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,
11623
+ sx: [
10038
11624
  {
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
- );
11625
+ "& .MuiOutlinedInput-root": {
11626
+ borderRadius: "8px",
11627
+ "& fieldset": {
11628
+ borderColor: hasError ? "error.main" : "divider"
11629
+ },
11630
+ "&:hover fieldset": {
11631
+ borderColor: hasError ? "error.main" : "text.primary"
11632
+ },
11633
+ "&.Mui-focused fieldset": {
11634
+ borderColor: hasError ? "error.main" : "primary.main"
11635
+ },
11636
+ "& .MuiInputLabel-root": {
11637
+ // Your label styles here
11638
+ }
11639
+ }
11640
+ },
11641
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11642
+ ],
11643
+ ...textFieldProps
11644
+ }
11645
+ );
11646
+ const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ react.createElement(
11647
+ "li",
11648
+ {
11649
+ ...props,
11650
+ key: option.value,
11651
+ className: `${props.className || ""} ${optionClassName}`.trim(),
11652
+ style: {
11653
+ ...props.style,
11654
+ opacity: option.disabled ? 0.5 : 1,
11655
+ pointerEvents: option.disabled ? "none" : "auto"
11656
+ }
11657
+ },
11658
+ /* @__PURE__ */ jsxRuntime.jsx(
11659
+ material.Checkbox,
11660
+ {
11661
+ checked: selected,
11662
+ disabled: option.disabled,
11663
+ sx: {
11664
+ color: "text.secondary",
11665
+ "&.Mui-checked": {
11666
+ color: "primary.main"
10051
11667
  },
10052
- onInputChange: (event, value) => {
10053
- setSearchQuery(value);
11668
+ "&.Mui-disabled": {
11669
+ color: "text.disabled"
10054
11670
  },
10055
- onChange: (e, newValue) => {
10056
- setFieldValue(name, newValue, true);
11671
+ mr: 1,
11672
+ ...checkboxProps.sx
11673
+ },
11674
+ ...checkboxProps
11675
+ }
11676
+ ),
11677
+ option.icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
11678
+ /* @__PURE__ */ jsxRuntime.jsx(
11679
+ material.Typography,
11680
+ {
11681
+ variant: "body2",
11682
+ sx: [
11683
+ {
11684
+ color: option.disabled ? "text.disabled" : "text.primary",
11685
+ ...option.textSx
10057
11686
  },
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,
11687
+ ...Array.isArray(optionSx) ? optionSx : [optionSx]
11688
+ ],
11689
+ children: option.label
11690
+ }
11691
+ )
11692
+ );
11693
+ 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) => {
11694
+ const { key, ...tagProps } = getTagProps({ index });
11695
+ return /* @__PURE__ */ react.createElement(
11696
+ material.Chip,
11697
+ {
11698
+ ...tagProps,
11699
+ key: option.value,
11700
+ label: option.label,
11701
+ disabled: disabled || option.disabled,
11702
+ sx: [
11703
+ {
11704
+ height: "24px",
11705
+ borderRadius: "4px",
11706
+ "& .MuiChip-deleteIcon": {
11707
+ color: "text.secondary",
11708
+ "&:hover": {
11709
+ color: "text.primary"
11710
+ }
11711
+ },
11712
+ ...chipSx
11713
+ },
11714
+ ...Array.isArray(chipSx) ? chipSx : [chipSx]
11715
+ ],
11716
+ className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
11717
+ ...chipProps
11718
+ }
11719
+ );
11720
+ }) });
11721
+ const renderSelectedCount = () => {
11722
+ if (!showSelectedCount || !multiple)
11723
+ return null;
11724
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11725
+ material.Typography,
11726
+ {
11727
+ variant: "caption",
11728
+ sx: [
11729
+ {
11730
+ mt: 0.5,
11731
+ color: "text.secondary",
11732
+ ...selectedCountSx
11733
+ },
11734
+ ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
11735
+ ],
11736
+ children: [
11737
+ `${selectedCount} selected`,
11738
+ maxSelections ? ` (max ${maxSelections})` : ""
11739
+ ]
11740
+ }
11741
+ );
11742
+ };
11743
+ return /* @__PURE__ */ jsxRuntime.jsx(
11744
+ material.Box,
11745
+ {
11746
+ ref,
11747
+ className: `app-searchable-multi-selector ${className}`.trim(),
11748
+ sx: [
11749
+ {
11750
+ width: "100%"
11751
+ },
11752
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
11753
+ ],
11754
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
11755
+ material.FormControl,
11756
+ {
11757
+ fullWidth: true,
11758
+ error: hasError,
11759
+ disabled,
11760
+ className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
11761
+ sx: [
10075
11762
  {
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
11763
+ "& .MuiAutocomplete-root": {
11764
+ "& .MuiOutlinedInput-root": {
11765
+ padding: "4px"
11766
+ },
11767
+ "& .MuiAutocomplete-input": {
11768
+ padding: "8.5px 4px"
11769
+ }
11770
+ }
11771
+ },
11772
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
11773
+ ],
11774
+ children: [
11775
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
11776
+ LabelComponent,
11777
+ {
11778
+ shrink: true,
11779
+ htmlFor: `autocomplete-${name}`,
11780
+ className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
11781
+ sx: [
11782
+ {
11783
+ mb: 1,
11784
+ color: hasError ? "error.main" : "text.primary",
11785
+ "&.Mui-focused": {
11786
+ color: hasError ? "error.main" : "primary.main"
11787
+ },
11788
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
11789
+ }
11790
+ ],
11791
+ ...labelProps,
11792
+ children: [
11793
+ label,
11794
+ required && /* @__PURE__ */ jsxRuntime.jsx(
11795
+ material.Box,
11796
+ {
11797
+ component: "span",
11798
+ sx: {
11799
+ color: "error.main",
11800
+ ml: 0.5
11801
+ },
11802
+ children: "*"
11803
+ }
11804
+ )
11805
+ ]
11806
+ }
11807
+ ),
11808
+ /* @__PURE__ */ jsxRuntime.jsx(
11809
+ material.Autocomplete,
11810
+ {
11811
+ multiple,
11812
+ id: `autocomplete-${name}`,
11813
+ options,
11814
+ value: selectedValues,
11815
+ filterOptions,
11816
+ onInputChange: handleInputChange,
11817
+ onChange: handleChange,
11818
+ onOpen,
11819
+ onClose,
11820
+ onBlur: handleBlur,
11821
+ onFocus: handleFocus,
11822
+ disableCloseOnSelect: multiple,
11823
+ readOnly,
11824
+ disabled,
11825
+ isOptionEqualToValue: (option, value) => option.value === value.value,
11826
+ getOptionLabel: (option) => typeof option === "string" ? option : option.label,
11827
+ getOptionDisabled: (option) => !!option.disabled,
11828
+ renderInput: externalRenderInput || defaultRenderInput,
11829
+ renderOption: externalRenderOption || defaultRenderOption,
11830
+ renderTags: externalRenderTags || defaultRenderTags,
11831
+ renderGroup: externalRenderGroup,
11832
+ ListboxProps: {
11833
+ className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
11834
+ sx: {
11835
+ "& .MuiAutocomplete-option": {
11836
+ px: 2,
11837
+ py: 1,
11838
+ '&[aria-selected="true"]': {
11839
+ backgroundColor: "action.selected",
11840
+ "&.Mui-focused": {
11841
+ backgroundColor: "action.hover"
11842
+ }
11843
+ },
11844
+ "&.Mui-focused": {
11845
+ backgroundColor: "action.hover"
11846
+ }
11847
+ },
11848
+ ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
11849
+ ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
11850
+ }
11851
+ },
11852
+ className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
11853
+ sx: [
11854
+ {
11855
+ "& .MuiAutocomplete-tag": {
11856
+ margin: 0,
11857
+ height: "auto"
11858
+ },
11859
+ "& .MuiAutocomplete-endAdornment": {
11860
+ right: 8
11861
+ }
11862
+ },
11863
+ ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
11864
+ ],
11865
+ ...autocompleteProps,
11866
+ ...otherProps
11867
+ }
11868
+ ),
11869
+ (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
11870
+ HelperTextComponent,
11871
+ {
11872
+ error: hasError,
11873
+ sx: [
11874
+ {
11875
+ mx: 0,
11876
+ mt: 0.5,
11877
+ ...hasError ? {
11878
+ color: "error.main",
11879
+ ...errorSx
11880
+ } : {
11881
+ color: "text.secondary",
11882
+ ...helperTextSx
11883
+ }
11884
+ }
11885
+ ],
11886
+ className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
11887
+ ...helperTextProps,
11888
+ children: hasError ? fieldError : helperText
11889
+ }
11890
+ ),
11891
+ renderSelectedCount()
11892
+ ]
10084
11893
  }
10085
11894
  )
10086
- ]
10087
- }
10088
- );
10089
- }
11895
+ }
11896
+ );
11897
+ }
11898
+ );
11899
+ AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
11900
+ var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
10090
11901
  function AppSearchableSelectInput({
10091
11902
  name,
10092
11903
  label,
10093
- required,
10094
11904
  options = [],
11905
+ required = false,
11906
+ variant = "outlined",
10095
11907
  placeholder,
10096
11908
  setSearchQuery,
10097
11909
  isResetRequired,
10098
11910
  ...otherProps
10099
11911
  }) {
10100
11912
  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);
11913
+ const fieldError = _19__default.default.get(errors, name);
11914
+ const isTouched = _19__default.default.get(touched, name);
11915
+ const val = _19__default.default.get(values, name);
10104
11916
  const selectedOption = options.find((option) => option.value === val) || null;
10105
11917
  const handleChange = (event, newValue) => {
10106
11918
  setFieldValue(name, newValue ? newValue.value : "");
@@ -10115,7 +11927,8 @@ function AppSearchableSelectInput({
10115
11927
  material.FormControl,
10116
11928
  {
10117
11929
  fullWidth: true,
10118
- variant: "outlined",
11930
+ variant,
11931
+ error: isTouched && Boolean(fieldError),
10119
11932
  sx: {
10120
11933
  padding: "0px !important",
10121
11934
  ".MuiAutocomplete-endAdornment": { right: "0 !important" },
@@ -10153,7 +11966,7 @@ function AppSearchableSelectInput({
10153
11966
  label,
10154
11967
  required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: " *" })
10155
11968
  ] }),
10156
- variant: "outlined",
11969
+ variant,
10157
11970
  placeholder,
10158
11971
  error: Boolean(fieldError) && isTouched,
10159
11972
  helperText: isTouched && fieldError ? fieldError : "",
@@ -10170,9 +11983,6 @@ function AppSearchableSelectInput({
10170
11983
  "& .MuiOutlinedInput-input": {
10171
11984
  color: "common.black"
10172
11985
  },
10173
- // '& .MuiOutlinedInput-notchedOutline': {
10174
- // borderColor: 'rgba(255,255,255,0.3)',
10175
- // },
10176
11986
  "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
10177
11987
  borderColor: "common.white"
10178
11988
  },
@@ -10188,72 +11998,413 @@ function AppSearchableSelectInput({
10188
11998
  }
10189
11999
  );
10190
12000
  }
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,
12001
+ var AppSelectInput = react.forwardRef(
12002
+ ({
12003
+ name,
12004
+ variant = "outlined",
12005
+ label,
12006
+ fullWidth = true,
12007
+ required = false,
12008
+ disabled = false,
12009
+ readOnly = false,
12010
+ options = [],
12011
+ showNoneOption = false,
12012
+ noneOptionText = "None",
12013
+ showHelperText = false,
12014
+ helperText,
12015
+ sx,
12016
+ formControlSx,
12017
+ selectSx,
12018
+ inputSx,
12019
+ labelSx,
12020
+ menuPaperSx,
12021
+ menuItemSx,
12022
+ selectedMenuItemSx,
12023
+ errorSx,
12024
+ helperTextSx,
12025
+ iconSx,
12026
+ labelComponent: LabelComponent = material.InputLabel,
12027
+ errorComponent: ErrorComponent = material.Typography,
12028
+ helperTextComponent: HelperTextComponent = material.FormHelperText,
12029
+ onChange: externalOnChange,
12030
+ onOpen,
12031
+ onClose,
12032
+ onBlur: externalOnBlur,
12033
+ renderValue,
12034
+ renderMenuItem,
12035
+ MenuProps,
12036
+ inputProps,
12037
+ ...otherProps
12038
+ }, ref) => {
12039
+ const theme = material.useTheme();
12040
+ const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
12041
+ const fieldError = _19__default.default.get(errors, name);
12042
+ const isTouched = _19__default.default.get(touched, name);
12043
+ const hasError = Boolean(fieldError) && isTouched;
12044
+ const value = _19__default.default.get(values, name);
12045
+ const handleChange = (event, child) => {
12046
+ setFieldValue(name, event.target.value, true);
12047
+ if (externalOnChange) {
12048
+ externalOnChange(event, child);
12049
+ }
12050
+ };
12051
+ const handleBlur = (event) => {
12052
+ setFieldTouched(name, true, true);
12053
+ if (externalOnBlur) {
12054
+ externalOnBlur(event);
12055
+ }
12056
+ };
12057
+ const renderDefaultMenuItem = (option, index) => {
12058
+ const MenuItemComponent = option.component || material.MenuItem;
12059
+ const menuItemProps = option.component ? option.componentProps : {};
12060
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12061
+ MenuItemComponent,
12062
+ {
12063
+ value: option.value,
12064
+ disabled: option.disabled,
12065
+ ...menuItemProps,
12066
+ sx: [
12067
+ {
12068
+ color: "text.primary",
12069
+ "&.Mui-selected": {
12070
+ backgroundColor: "action.selected",
12071
+ "&:hover": {
12072
+ backgroundColor: "action.hover"
12073
+ },
12074
+ ...selectedMenuItemSx
12075
+ },
12076
+ "&.Mui-disabled": {
12077
+ opacity: 0.5,
12078
+ pointerEvents: "none"
12079
+ },
12080
+ ...option.sx
12081
+ },
12082
+ ...Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx]
12083
+ ],
12084
+ children: [
12085
+ option.icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
12086
+ /* @__PURE__ */ jsxRuntime.jsx(
12087
+ material.Typography,
12088
+ {
12089
+ variant: "body2",
12090
+ sx: [
12091
+ {
12092
+ color: option.disabled ? "text.disabled" : "text.primary",
12093
+ ...option.textSx
12094
+ }
12095
+ ],
12096
+ children: option.label
12097
+ }
12098
+ )
12099
+ ]
12100
+ },
12101
+ `${option.value}-${index}`
12102
+ );
12103
+ };
12104
+ return /* @__PURE__ */ jsxRuntime.jsx(
12105
+ material.Box,
10206
12106
  {
10207
- id: `select-${name}`,
10208
- sx: {
10209
- color: "text.primary",
10210
- "&.Mui-focused": {
10211
- color: "text.primary"
12107
+ ref,
12108
+ className: "app-select-input",
12109
+ sx: [
12110
+ {
12111
+ "& .MuiInputLabel-root": {
12112
+ "&.Mui-focused": {
12113
+ color: hasError ? "error.main" : "primary.main"
12114
+ },
12115
+ "&.Mui-disabled": {
12116
+ color: "text.disabled"
12117
+ }
12118
+ }
12119
+ },
12120
+ ...Array.isArray(formControlSx) ? formControlSx : [formControlSx].filter(Boolean)
12121
+ ],
12122
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12123
+ material.FormControl,
12124
+ {
12125
+ fullWidth,
12126
+ variant,
12127
+ error: hasError,
12128
+ disabled,
12129
+ className: "app-select-form-control",
12130
+ sx: [
12131
+ {
12132
+ "& .MuiInputLabel-root": {
12133
+ "&.Mui-focused": {
12134
+ color: hasError ? "error.main" : "primary.main"
12135
+ },
12136
+ "&.Mui-disabled": {
12137
+ color: "text.disabled"
12138
+ }
12139
+ }
12140
+ },
12141
+ ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
12142
+ ],
12143
+ children: [
12144
+ label && /* @__PURE__ */ jsxRuntime.jsxs(
12145
+ LabelComponent,
12146
+ {
12147
+ id: `select-${name}-label`,
12148
+ htmlFor: `select-${name}`,
12149
+ className: "app-select-label",
12150
+ sx: [
12151
+ {
12152
+ color: hasError ? "error.main" : "text.secondary",
12153
+ "&.Mui-focused": {
12154
+ color: hasError ? "error.main" : "primary.main"
12155
+ },
12156
+ mb: 1,
12157
+ ...Array.isArray(labelSx) ? labelSx : [labelSx]
12158
+ }
12159
+ ],
12160
+ children: [
12161
+ label,
12162
+ required && /* @__PURE__ */ jsxRuntime.jsx(
12163
+ material.Box,
12164
+ {
12165
+ component: "span",
12166
+ sx: {
12167
+ color: "error.main",
12168
+ ml: 0.5
12169
+ },
12170
+ children: "*"
12171
+ }
12172
+ )
12173
+ ]
12174
+ }
12175
+ ),
12176
+ /* @__PURE__ */ jsxRuntime.jsxs(
12177
+ Select__default.default,
12178
+ {
12179
+ variant: "outlined",
12180
+ labelId: label ? `select-${name}-label` : void 0,
12181
+ id: `select-${name}`,
12182
+ name,
12183
+ value: value != null ? value : "",
12184
+ onChange: handleChange,
12185
+ onBlur: handleBlur,
12186
+ onOpen,
12187
+ onClose,
12188
+ renderValue,
12189
+ inputProps: {
12190
+ readOnly,
12191
+ ...inputProps
12192
+ },
12193
+ MenuProps: {
12194
+ PaperProps: {
12195
+ sx: [
12196
+ {
12197
+ mt: 1,
12198
+ boxShadow: theme.shadows[3],
12199
+ "& .MuiMenuItem-root": {
12200
+ px: 2,
12201
+ py: 1,
12202
+ "&.Mui-selected": {
12203
+ backgroundColor: "action.selected",
12204
+ "&:hover": {
12205
+ backgroundColor: "action.hover"
12206
+ }
12207
+ }
12208
+ },
12209
+ ...Array.isArray(menuPaperSx) ? menuPaperSx : [menuPaperSx]
12210
+ }
12211
+ ]
12212
+ },
12213
+ ...MenuProps
12214
+ },
12215
+ sx: [
12216
+ {
12217
+ // Your base styles here
12218
+ "&.Mui-disabled": {
12219
+ backgroundColor: "action.disabledBackground",
12220
+ "& .MuiOutlinedInput-notchedOutline": {
12221
+ borderColor: "action.disabled"
12222
+ },
12223
+ "& .MuiSelect-icon": {
12224
+ color: "action.disabled"
12225
+ }
12226
+ }
12227
+ },
12228
+ ...Array.isArray(selectSx) ? selectSx : selectSx ? [selectSx] : []
12229
+ ],
12230
+ ...otherProps,
12231
+ children: [
12232
+ showNoneOption && /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: noneOptionText }) }),
12233
+ options.map(
12234
+ (option, index) => renderMenuItem ? renderMenuItem(option, index) : renderDefaultMenuItem(option, index)
12235
+ )
12236
+ ]
12237
+ }
12238
+ ),
12239
+ (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
12240
+ HelperTextComponent,
12241
+ {
12242
+ error: hasError,
12243
+ sx: [
12244
+ {
12245
+ mx: 0,
12246
+ mt: 0.5,
12247
+ ...hasError ? {
12248
+ color: "error.main",
12249
+ ...errorSx
12250
+ } : {
12251
+ color: "text.secondary",
12252
+ ...helperTextSx
12253
+ }
12254
+ }
12255
+ ],
12256
+ children: hasError ? fieldError : helperText
12257
+ }
12258
+ )
12259
+ ]
10212
12260
  }
10213
- },
10214
- children: [
10215
- label,
10216
- " ",
10217
- required === true && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: "*" })
10218
- ]
12261
+ )
12262
+ }
12263
+ );
12264
+ }
12265
+ );
12266
+ AppSelectInput.displayName = "AppSelectInput";
12267
+ var AppSelectInput_default = AppSelectInput;
12268
+ var AppSimpleUploadFile = ({
12269
+ name,
12270
+ label = "Upload Files",
12271
+ accept = "image/*",
12272
+ multiple = false,
12273
+ disabled = false,
12274
+ required = false,
12275
+ maxFiles,
12276
+ maxSizeInBytes = 5 * 1024 * 1024,
12277
+ // 5MB
12278
+ sx,
12279
+ buttonSx,
12280
+ errorSx,
12281
+ onAdd,
12282
+ onRemove,
12283
+ onError
12284
+ }) => {
12285
+ const { setFieldValue, values, errors, touched } = formik.useFormikContext();
12286
+ const fieldValue = _19__default.default.get(values, name);
12287
+ const fieldError = _19__default.default.get(touched, name) ? _19__default.default.get(errors, name) : void 0;
12288
+ const handleChange = (event) => {
12289
+ const files = event.target.files;
12290
+ if (!files || files.length === 0)
12291
+ return;
12292
+ const newFiles = Array.from(files).map((file) => {
12293
+ if (file.size > maxSizeInBytes) {
12294
+ const errorMsg = `File ${file.name} exceeds maximum size of ${maxSizeInBytes / (1024 * 1024)}MB`;
12295
+ onError == null ? void 0 : onError(errorMsg);
12296
+ return null;
12297
+ }
12298
+ return Object.assign(file, {
12299
+ preview: URL.createObjectURL(file)
12300
+ });
12301
+ }).filter(Boolean);
12302
+ if (newFiles.length === 0)
12303
+ return;
12304
+ const currentFiles = fieldValue || [];
12305
+ const updatedFiles = multiple ? [...currentFiles, ...newFiles].slice(0, maxFiles || Infinity) : [newFiles[0]];
12306
+ setFieldValue(name, updatedFiles);
12307
+ newFiles.forEach((file) => onAdd == null ? void 0 : onAdd(file));
12308
+ event.target.value = "";
12309
+ };
12310
+ const handleRemove = (index) => {
12311
+ if (!fieldValue || index < 0 || index >= fieldValue.length)
12312
+ return;
12313
+ const fileToRemove = fieldValue[index];
12314
+ const newFiles = fieldValue.filter((_20, i) => i !== index);
12315
+ setFieldValue(name, newFiles);
12316
+ onRemove == null ? void 0 : onRemove(fileToRemove);
12317
+ if (fileToRemove.preview) {
12318
+ URL.revokeObjectURL(fileToRemove.preview);
12319
+ }
12320
+ };
12321
+ const handleClick = () => {
12322
+ const input = document.getElementById(
12323
+ `file-upload-${name}`
12324
+ );
12325
+ if (input)
12326
+ input.click();
12327
+ };
12328
+ const isMaxFilesReached = maxFiles !== void 0 && (fieldValue ? fieldValue.length >= maxFiles : false);
12329
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
12330
+ /* @__PURE__ */ jsxRuntime.jsx(
12331
+ "input",
12332
+ {
12333
+ id: `file-upload-${name}`,
12334
+ type: "file",
12335
+ accept,
12336
+ multiple,
12337
+ onChange: handleChange,
12338
+ style: { display: "none" }
10219
12339
  }
10220
12340
  ),
10221
12341
  /* @__PURE__ */ jsxRuntime.jsx(
10222
- Select__default.default,
12342
+ material.Button,
10223
12343
  {
10224
12344
  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"
12345
+ component: "span",
12346
+ disabled: disabled || isMaxFilesReached,
12347
+ onClick: handleClick,
12348
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon__default.default, { fontSize: "small" }),
12349
+ sx: [
12350
+ {
12351
+ mb: 1,
12352
+ "&:hover": {
12353
+ backgroundColor: "action.hover"
12354
+ }
10244
12355
  },
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))
12356
+ ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
12357
+ ],
12358
+ children: label
10252
12359
  }
10253
12360
  ),
10254
- isTouched === true && fieldError != null && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "#FF5630", variant: "caption", display: "block", gutterBottom: true, children: fieldError })
12361
+ fieldValue && fieldValue.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { spacing: 1, sx: { mt: 1 }, children: fieldValue.map((file, index) => /* @__PURE__ */ jsxRuntime.jsxs(
12362
+ material.Stack,
12363
+ {
12364
+ direction: "row",
12365
+ alignItems: "center",
12366
+ spacing: 1,
12367
+ sx: {
12368
+ p: 1,
12369
+ border: "1px solid",
12370
+ borderColor: "divider",
12371
+ borderRadius: 1
12372
+ },
12373
+ children: [
12374
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", noWrap: true, sx: { flex: 1 }, children: file.name }),
12375
+ /* @__PURE__ */ jsxRuntime.jsx(
12376
+ material.IconButton,
12377
+ {
12378
+ size: "small",
12379
+ onClick: () => handleRemove(index),
12380
+ disabled,
12381
+ sx: { p: 0.5 },
12382
+ children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
12383
+ }
12384
+ )
12385
+ ]
12386
+ },
12387
+ index
12388
+ )) }),
12389
+ fieldError && /* @__PURE__ */ jsxRuntime.jsx(
12390
+ material.Typography,
12391
+ {
12392
+ variant: "caption",
12393
+ color: "error",
12394
+ sx: [
12395
+ {
12396
+ display: "block",
12397
+ mt: 0.5,
12398
+ color: "error.main"
12399
+ },
12400
+ ...Array.isArray(errorSx) ? errorSx : [errorSx]
12401
+ ],
12402
+ children: fieldError
12403
+ }
12404
+ )
10255
12405
  ] });
10256
- }
12406
+ };
12407
+ var AppSimpleUploadFile_default = AppSimpleUploadFile;
10257
12408
 
10258
12409
  // src/file-thumbnail/utils.ts
10259
12410
  var FORMAT_PDF = ["pdf"];
@@ -10470,108 +12621,6 @@ function FileThumbnail({
10470
12621
  onDownload && /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onDownload })
10471
12622
  ] });
10472
12623
  }
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
12624
  function RejectionFiles({ fileRejections }) {
10576
12625
  if (!fileRejections.length) {
10577
12626
  return null;
@@ -11775,19 +13824,28 @@ async function blobToBase64(file) {
11775
13824
  };
11776
13825
  });
11777
13826
  }
11778
- var AppUploadFile = ({ name, ...rest }) => {
13827
+ var AppUploadFile = ({
13828
+ name,
13829
+ sx,
13830
+ uploadSx,
13831
+ errorSx,
13832
+ helperTextSx,
13833
+ previewSx,
13834
+ dropZoneSx,
13835
+ ...rest
13836
+ }) => {
11779
13837
  var _a, _b, _c, _d, _e;
11780
13838
  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);
13839
+ const fieldError = _19__default.default.get(errors, name);
13840
+ const isTouched = _19__default.default.get(touched, name);
13841
+ let val = _19__default.default.get(values, name);
11784
13842
  if (((_a = rest.multiple) != null ? _a : false) && typeof val === "string") {
11785
13843
  val = val ? [val] : [];
11786
- } else if (!((_b = rest.multiple) != null ? _b : false) && _17__default.default.isArray(val)) {
13844
+ } else if (!((_b = rest.multiple) != null ? _b : false) && _19__default.default.isArray(val)) {
11787
13845
  val = val[0];
11788
13846
  }
11789
13847
  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: [
13848
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
11791
13849
  /* @__PURE__ */ jsxRuntime.jsx(
11792
13850
  Upload,
11793
13851
  {
@@ -11796,6 +13854,23 @@ var AppUploadFile = ({ name, ...rest }) => {
11796
13854
  files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
11797
13855
  error: Boolean(fieldError) && isTouched,
11798
13856
  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),
13857
+ sx: [{
13858
+ "& .MuiDropzoneArea-root": {
13859
+ minHeight: 200,
13860
+ border: "2px dashed",
13861
+ borderColor: "divider",
13862
+ borderRadius: 1,
13863
+ "&:hover": {
13864
+ borderColor: "primary.main",
13865
+ backgroundColor: "action.hover"
13866
+ },
13867
+ ...dropZoneSx
13868
+ },
13869
+ "& .MuiDropzonePreviewList-root": {
13870
+ ...previewSx
13871
+ },
13872
+ ...uploadSx
13873
+ }],
11799
13874
  onDrop: (fileVal) => {
11800
13875
  (async () => {
11801
13876
  var _a2;
@@ -11830,20 +13905,48 @@ var AppUploadFile = ({ name, ...rest }) => {
11830
13905
  const afterFilter = val.filter((file) => {
11831
13906
  var _a2;
11832
13907
  if ((_a2 = file.file) != null ? _a2 : false) {
11833
- return !_17__default.default.isEqual(e, file.file);
13908
+ return !_19__default.default.isEqual(e, file.file);
11834
13909
  }
11835
- return !_17__default.default.isEqual(e, file);
13910
+ return !_19__default.default.isEqual(e, file);
11836
13911
  });
11837
13912
  setFieldValue(name, afterFilter, true);
11838
13913
  }
11839
13914
  }
11840
13915
  ),
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
- ] })
13916
+ Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsxRuntime.jsx(
13917
+ material.Typography,
13918
+ {
13919
+ variant: "caption",
13920
+ sx: [{
13921
+ color: "error.main",
13922
+ display: "block",
13923
+ mt: 0.5,
13924
+ ...errorSx
13925
+ }],
13926
+ gutterBottom: true,
13927
+ children: fieldError
13928
+ }
13929
+ ),
13930
+ rest.maxFiles != null && /* @__PURE__ */ jsxRuntime.jsxs(
13931
+ material.Typography,
13932
+ {
13933
+ variant: "caption",
13934
+ sx: [{
13935
+ display: "block",
13936
+ color: "text.secondary",
13937
+ mt: 0.5,
13938
+ ...helperTextSx
13939
+ }],
13940
+ gutterBottom: true,
13941
+ children: [
13942
+ "Maximum ",
13943
+ rest.maxFiles,
13944
+ " file",
13945
+ rest.maxFiles !== 1 ? "s" : "",
13946
+ " allowed"
13947
+ ]
13948
+ }
13949
+ )
11847
13950
  ] });
11848
13951
  };
11849
13952
  var AppUploadFile_default = AppUploadFile;
@@ -11851,6 +13954,16 @@ var SubmitButton = ({
11851
13954
  children,
11852
13955
  loading = false,
11853
13956
  disabled = false,
13957
+ fullWidth = false,
13958
+ variant = "contained",
13959
+ color = "primary",
13960
+ size = "medium",
13961
+ startIcon,
13962
+ endIcon,
13963
+ sx,
13964
+ buttonSx,
13965
+ loadingSx,
13966
+ disabledSx,
11854
13967
  ...rest
11855
13968
  }) => {
11856
13969
  const { submitForm, isSubmitting } = formik.useFormikContext();
@@ -11872,7 +13985,37 @@ var SubmitButton = ({
11872
13985
  type: "button",
11873
13986
  onClick: handleClick,
11874
13987
  disabled: isButtonDisabled,
11875
- startIcon: showLoading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20, color: "inherit" }) : void 0,
13988
+ fullWidth,
13989
+ variant,
13990
+ color,
13991
+ size,
13992
+ startIcon: showLoading ? /* @__PURE__ */ jsxRuntime.jsx(
13993
+ material.CircularProgress,
13994
+ {
13995
+ size: 20,
13996
+ color: "inherit",
13997
+ sx: [
13998
+ {
13999
+ "&.MuiCircularProgress-root": {
14000
+ width: "20px !important",
14001
+ height: "20px !important"
14002
+ }
14003
+ },
14004
+ ...Array.isArray(loadingSx) ? loadingSx : [loadingSx]
14005
+ ]
14006
+ }
14007
+ ) : startIcon,
14008
+ endIcon,
14009
+ sx: [
14010
+ {
14011
+ position: "relative",
14012
+ "&.Mui-disabled": {
14013
+ ...disabledSx
14014
+ },
14015
+ ...buttonSx
14016
+ },
14017
+ ...Array.isArray(sx) ? sx : [sx]
14018
+ ],
11876
14019
  children
11877
14020
  }
11878
14021
  );
@@ -11886,19 +14029,19 @@ exports.AppDateAndTimePicker = AppDateAndTimePicker_default;
11886
14029
  exports.AppDatePicker = AppDatePicker_default;
11887
14030
  exports.AppFormErrorMessage = AppFormErrorMessage_default;
11888
14031
  exports.AppInputField = AppInputField;
11889
- exports.AppMultiSelector = AppMultiSelector;
14032
+ exports.AppMultiSelector = AppMultiSelector_default;
11890
14033
  exports.AppPhoneNoInput = AppPhoneNoInput_default;
11891
- exports.AppRadioGroup = AppRadioGroup;
11892
- exports.AppRating = AppRating;
14034
+ exports.AppRadioGroup = AppRadioGroup_default;
14035
+ exports.AppRating = AppRating_default;
11893
14036
  exports.AppRichTextEditor = AppRichTextEditor_default;
11894
- exports.AppSearchableMultiSelector = AppSearchableMultiSelector;
14037
+ exports.AppSearchableMultiSelector = AppSearchableMultiSelector_default;
11895
14038
  exports.AppSearchableSelectInput = AppSearchableSelectInput;
11896
- exports.AppSelectInput = AppSelectInput;
14039
+ exports.AppSelectInput = AppSelectInput_default;
11897
14040
  exports.AppSimpleUploadFile = AppSimpleUploadFile_default;
11898
14041
  exports.AppSwitch = AppSwitch;
11899
14042
  exports.AppSwitchInput = AppSwitchInput;
11900
14043
  exports.AppTagsCreator = AppTagsCreator;
11901
- exports.AppTextArea = AppTextArea;
14044
+ exports.AppTextArea = AppTextArea_default;
11902
14045
  exports.AppUploadFile = AppUploadFile_default;
11903
14046
  exports.Form = Form_default;
11904
14047
  exports.Iconify = Iconify_default;