@torq-north/react-tools 1.4.1 → 1.4.3

package/dist/index.cjs

@@ -388,154 +388,6 @@ function FieldWrapper(_a) {
     return (jsxRuntime.jsxs(material.Stack, { direction: "row", alignItems: "center", children: [(icon || showSpace) && (jsxRuntime.jsx(material.Box, { minWidth: 32, color: "primary.main", mt: 2, mx: 1, children: icon })), children] }));
 }
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var cjs;
-var hasRequiredCjs;
-
-function requireCjs () {
-	if (hasRequiredCjs) return cjs;
-	hasRequiredCjs = 1;
-
-	var isMergeableObject = function isMergeableObject(value) {
-		return isNonNullObject(value)
-			&& !isSpecial(value)
-	};
-
-	function isNonNullObject(value) {
-		return !!value && typeof value === 'object'
-	}
-
-	function isSpecial(value) {
-		var stringValue = Object.prototype.toString.call(value);
-
-		return stringValue === '[object RegExp]'
-			|| stringValue === '[object Date]'
-			|| isReactElement(value)
-	}
-
-	// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
-	var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
-	var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
-
-	function isReactElement(value) {
-		return value.$$typeof === REACT_ELEMENT_TYPE
-	}
-
-	function emptyTarget(val) {
-		return Array.isArray(val) ? [] : {}
-	}
-
-	function cloneUnlessOtherwiseSpecified(value, options) {
-		return (options.clone !== false && options.isMergeableObject(value))
-			? deepmerge(emptyTarget(value), value, options)
-			: value
-	}
-
-	function defaultArrayMerge(target, source, options) {
-		return target.concat(source).map(function(element) {
-			return cloneUnlessOtherwiseSpecified(element, options)
-		})
-	}
-
-	function getMergeFunction(key, options) {
-		if (!options.customMerge) {
-			return deepmerge
-		}
-		var customMerge = options.customMerge(key);
-		return typeof customMerge === 'function' ? customMerge : deepmerge
-	}
-
-	function getEnumerableOwnPropertySymbols(target) {
-		return Object.getOwnPropertySymbols
-			? Object.getOwnPropertySymbols(target).filter(function(symbol) {
-				return Object.propertyIsEnumerable.call(target, symbol)
-			})
-			: []
-	}
-
-	function getKeys(target) {
-		return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
-	}
-
-	function propertyIsOnObject(object, property) {
-		try {
-			return property in object
-		} catch(_) {
-			return false
-		}
-	}
-
-	// Protects from prototype poisoning and unexpected merging up the prototype chain.
-	function propertyIsUnsafe(target, key) {
-		return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
-			&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
-				&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
-	}
-
-	function mergeObject(target, source, options) {
-		var destination = {};
-		if (options.isMergeableObject(target)) {
-			getKeys(target).forEach(function(key) {
-				destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
-			});
-		}
-		getKeys(source).forEach(function(key) {
-			if (propertyIsUnsafe(target, key)) {
-				return
-			}
-
-			if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
-				destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
-			} else {
-				destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
-			}
-		});
-		return destination
-	}
-
-	function deepmerge(target, source, options) {
-		options = options || {};
-		options.arrayMerge = options.arrayMerge || defaultArrayMerge;
-		options.isMergeableObject = options.isMergeableObject || isMergeableObject;
-		// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
-		// implementations can use it. The caller may not replace it.
-		options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
-
-		var sourceIsArray = Array.isArray(source);
-		var targetIsArray = Array.isArray(target);
-		var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
-
-		if (!sourceAndTargetTypesMatch) {
-			return cloneUnlessOtherwiseSpecified(source, options)
-		} else if (sourceIsArray) {
-			return options.arrayMerge(target, source, options)
-		} else {
-			return mergeObject(target, source, options)
-		}
-	}
-
-	deepmerge.all = function deepmergeAll(array, options) {
-		if (!Array.isArray(array)) {
-			throw new Error('first argument should be an array')
-		}
-
-		return array.reduce(function(prev, next) {
-			return deepmerge(prev, next, options)
-		}, {})
-	};
-
-	var deepmerge_1 = deepmerge;
-
-	cjs = deepmerge_1;
-	return cjs;
-}
-
-var cjsExports = requireCjs();
-var deepmerge = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);
-
 // https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-level-validation?file=/index.js:557-691
 function composeValidators() {
     var validators = [];
@@ -562,18 +414,12 @@ function TextFormField(_a) {
     var name = _a.name, label = _a.label, required = _a.required, multiline = _a.multiline, disabled = _a.disabled, placeholder = _a.placeholder, slotProps = _a.slotProps, helperText = _a.helperText, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
     var _d = reactFinalForm.useField(name, __assign({ format: format, validate: required
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
-    var textFieldProps = deepmerge({
-        fullWidth: true,
-        label: label,
-        required: required,
-        multiline: multiline,
-        disabled: disabled,
-        placeholder: placeholder,
-        error: meta.touched && meta.error,
-        helperText: (meta.touched && meta.error) || helperText,
-        slotProps: { input: input },
-    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {});
-    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(material.TextField, __assign({}, textFieldProps)) }));
+    var _e = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _e.slotProps, remainingTextFieldProps = __rest(_e, ["slotProps"]);
+    var inputSlotProp = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
+    var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: typeof inputSlotProp === "function"
+            ? function (ownerState) { return (__assign(__assign({}, input), inputSlotProp(ownerState))); }
+            : __assign(__assign({}, input), inputSlotProp) });
+    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(material.TextField, __assign({ fullWidth: true, label: label, required: required, multiline: multiline, disabled: disabled, placeholder: placeholder, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, slotProps: mergedSlotProps }, remainingTextFieldProps)) }));
 }
 
 function isGroup(o) {
@@ -620,32 +466,27 @@ function SelectFormField(_a) {
     var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _d = _a.validators, validators = _d === void 0 ? [] : _d;
     var _e = reactFinalForm.useField(name, __assign({ format: format, validate: required
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
-    var textFieldProps = deepmerge({
-        fullWidth: true,
-        select: true,
-        label: label,
-        required: required,
-        disabled: disabled,
-        error: meta.touched && meta.error,
-        helperText: (meta.touched && meta.error) || helperText,
-        value: value ? value : [],
-        onChange: onChange,
-        slotProps: {
-            input: otherInputProps,
-            select: {
-                endAdornment: isClearable ? (jsxRuntime.jsx(material.Box, { pr: 2, children: jsxRuntime.jsx(material.IconButton, { size: (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _b === void 0 ? void 0 : _b.size, onClick: function () { return onChange(undefined); }, children: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
-            },
-        },
-    }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _c !== void 0 ? _c : {});
+    var _g = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _g.slotProps, remainingTextFieldProps = __rest(_g, ["slotProps"]);
+    // SlotProps can be an object or a callback; we only support the object form here.
+    var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
+        ? undefined
+        : textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
+    var hasEndAdornment = isClearable || (inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment);
+    var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign({}, otherInputProps), inputSlotProps), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), (hasEndAdornment && {
+            endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment, " ", isClearable && (jsxRuntime.jsx(material.IconButton, { size: (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _c === void 0 ? void 0 : _c.size, onClick: function () { return onChange(undefined); }, children: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }))] })),
+        })) });
     var renderedOptions = React.useMemo(function () { return renderSelectOptions(options); }, [options]);
-    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.TextField, __assign({}, textFieldProps, { children: [renderedOptions, !options && jsxRuntime.jsx(material.MenuItem, {})] })) }));
+    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.TextField, __assign({ fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsxRuntime.jsx(material.MenuItem, {})] })) }));
 }
 
 function findTextFor(value, options) {
     for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
         var option = options_1[_i];
         if (isGroup(option)) {
-            return findTextFor(value, option.options);
+            var foundOption = findTextFor(value, option.options);
+            if (foundOption) {
+                return foundOption;
+            }
         }
         else if (typeof option === "string") {
             if (option === value) {
@@ -658,34 +499,22 @@ function findTextFor(value, options) {
             }
         }
     }
-    return "Unknown";
 }
 function MultiSelectFormField(_a) {
     var _b, _c;
     var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _d = _a.validators, validators = _d === void 0 ? [] : _d;
     var _e = reactFinalForm.useField(name, __assign({ format: format, validate: required
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
-    var textFieldProps = deepmerge({
-        fullWidth: true,
-        select: true,
-        label: label,
-        required: required,
-        disabled: disabled,
-        error: meta.touched && meta.error,
-        helperText: (meta.touched && meta.error) || helperText,
-        value: value ? value : [],
-        onChange: onChange,
-        slotProps: {
-            input: otherInputProps,
-            select: {
-                endAdornment: isClearable ? (jsxRuntime.jsx(material.Box, { pr: 2, children: jsxRuntime.jsx(material.IconButton, { size: (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _b === void 0 ? void 0 : _b.size, onClick: function () { return onChange([]); }, children: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
-                multiple: true,
-                renderValue: function (selected) { return (jsxRuntime.jsx(material.Box, { whiteSpace: "normal", children: selected.map(function (s) { return findTextFor(s, options); }).join(", ") })); },
-            },
-        },
-    }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _c !== void 0 ? _c : {});
+    var _g = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _g.slotProps, remainingTextFieldProps = __rest(_g, ["slotProps"]);
+    // SlotProps can be an object or a callback; we only support the object form here.
+    var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
+        ? undefined
+        : textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
+    var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign({}, otherInputProps), inputSlotProps), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment, " ", isClearable && (jsxRuntime.jsx(material.IconButton, { size: (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _c === void 0 ? void 0 : _c.size, onClick: function () { return onChange([]); }, children: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }))] })), multiple: true, renderValue: function (selected) { return (jsxRuntime.jsx(material.Box, { whiteSpace: "normal", children: selected
+                    .map(function (s) { var _a; return (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"; })
+                    .join(", ") })); } }) });
     var renderedOptions = React.useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
-    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.TextField, __assign({}, textFieldProps, { children: [renderedOptions, !options && jsxRuntime.jsx(material.MenuItem, {})] })) }));
+    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.TextField, __assign({ fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsxRuntime.jsx(material.MenuItem, {})] })) }));
 }
 
 var mustBeChecked = function (v) {
@@ -693,11 +522,10 @@ var mustBeChecked = function (v) {
 };
 
 var CheckboxFormField = function (_a) {
-    var _b;
-    var name = _a.name, label = _a.label, mustBeTrue = _a.mustBeTrue, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, icon = _a.icon, showSpace = _a.showSpace, _c = _a.validators, validators = _c === void 0 ? [] : _c, forceError = _a.forceError;
-    var _d = reactFinalForm.useField(name, __assign({ type: "checkbox", validate: mustBeTrue
-            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [mustBeChecked], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
-    var checkboxProps = deepmerge(__assign(__assign({}, input), { disabled: disabled }), (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.checkbox) !== null && _b !== void 0 ? _b : {});
+    var name = _a.name, label = _a.label, mustBeTrue = _a.mustBeTrue, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, icon = _a.icon, showSpace = _a.showSpace, _b = _a.validators, validators = _b === void 0 ? [] : _b, forceError = _a.forceError;
+    var _c = reactFinalForm.useField(name, __assign({ type: "checkbox", validate: mustBeTrue
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [mustBeChecked], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _c.input, meta = _c.meta;
+    var checkboxProps = __assign(__assign(__assign({}, input), { disabled: disabled }), slotProps === null || slotProps === void 0 ? void 0 : slotProps.checkbox);
     return (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.Checkbox, __assign({}, checkboxProps)) }), label: label, disabled: disabled }), ((meta.touched && meta.error) || helperText) && (jsxRuntime.jsx(material.FormHelperText, { disabled: disabled, error: (meta.touched && meta.error) || forceError, sx: { marginTop: 0, marginLeft: 2 }, children: meta.error || helperText }))] }));
 };
 
@@ -706,25 +534,11 @@ var DateFormField = function (_a) {
     var name = _a.name, label = _a.label, required = _a.required, icon = _a.icon, showSpace = _a.showSpace, slotProps = _a.slotProps, disabled = _a.disabled, helperText = _a.helperText, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c, _d = _a.formatAsDate, formatAsDate = _d === void 0 ? false : _d;
     var _e = reactFinalForm.useField(name, __assign({ format: format, validate: required
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _e.input, meta = _e.meta;
-    var datePickerProps = deepmerge({
-        label: label,
-        disabled: disabled,
-        views: ["year", "month", "day"],
-        slotProps: {
-            textField: {
-                fullWidth: true,
-                required: required,
-                color: meta.touched && meta.error ? "error" : undefined,
-                error: meta.touched && meta.error,
-                helperText: (meta.touched && meta.error) || helperText,
-                onFocus: input.onFocus,
-                onBlur: input.onBlur,
-            },
-        },
-    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {});
-    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DatePicker, __assign({ value: input.value ? dayjs(input.value) : null, onChange: function (value) {
+    var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {}), datePickerSlotProps = _f.slotProps, remainingDatePickerProps = __rest(_f, ["slotProps"]);
+    var mergedSlotProps = __assign(__assign({}, datePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, datePickerSlotProps === null || datePickerSlotProps === void 0 ? void 0 : datePickerSlotProps.textField) });
+    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DatePicker, __assign({ label: label, disabled: disabled, views: ["year", "month", "day"], value: input.value ? dayjs(input.value) : null, onChange: function (value) {
                 return input.onChange(formatAsDate ? value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD") : value === null || value === void 0 ? void 0 : value.toJSON());
-            } }, datePickerProps)) }));
+            }, slotProps: mergedSlotProps }, remainingDatePickerProps)) }));
 };
 
 var DateTimeFormField = function (_a) {
@@ -732,23 +546,9 @@ var DateTimeFormField = function (_a) {
     var name = _a.name, label = _a.label, required = _a.required, icon = _a.icon, showSpace = _a.showSpace, slotProps = _a.slotProps, disabled = _a.disabled, helperText = _a.helperText, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
     var _d = reactFinalForm.useField(name, __assign({ format: format, validate: required
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
-    var dateTimeProps = deepmerge({
-        label: label,
-        disabled: disabled,
-        views: ["year", "month", "day"],
-        slotProps: {
-            textField: {
-                fullWidth: true,
-                required: required,
-                color: meta.touched && meta.error ? "error" : undefined,
-                error: meta.touched && meta.error,
-                helperText: (meta.touched && meta.error) || helperText,
-                onFocus: input.onFocus,
-                onBlur: input.onBlur,
-            },
-        },
-    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {});
-    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DateTimePicker, __assign({ value: input.value ? dayjs(input.value) : null, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); } }, dateTimeProps)) }));
+    var _e = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {}), dateTimePickerSlotProps = _e.slotProps, remainingDateTimePickerProps = __rest(_e, ["slotProps"]);
+    var mergedSlotProps = __assign(__assign({}, dateTimePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, dateTimePickerSlotProps === null || dateTimePickerSlotProps === void 0 ? void 0 : dateTimePickerSlotProps.textField) });
+    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DateTimePicker, __assign({ label: label, disabled: disabled, value: input.value ? dayjs(input.value) : null, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); }, slotProps: mergedSlotProps }, remainingDateTimePickerProps)) }));
 };
 
 //Courtesy of https://stackoverflow.com/questions/58099124/how-to-use-custom-radio-component-with-react-final-form
@@ -876,6 +676,10 @@ function FileDisplay(_a) {
     return (jsxRuntime.jsx(material.Stack, { children: files.map(function (f) { return (jsxRuntime.jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 var propTypes = {exports: {}};
 
 var reactIs = {exports: {}};