@rjsf/mui 6.4.2 → 6.5.0

package/dist/index.cjs

@@ -49,6 +49,24 @@ var import_core4 = require("@rjsf/core");
 var import_Add = __toESM(require("@mui/icons-material/Add"), 1);
 var import_IconButton = __toESM(require("@mui/material/IconButton"), 1);
 var import_utils = require("@rjsf/utils");
+
+// src/util.ts
+function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
+  const muiProps = options?.mui || {};
+  if (rjsfSlotPropsOnly) {
+    const { rjsfSlotProps } = muiProps;
+    return { rjsfSlotProps };
+  }
+  if (propsToFilter) {
+    return Object.keys(muiProps).filter((key) => propsToFilter.includes(key)).reduce((obj, key) => {
+      obj[key] = muiProps[key];
+      return obj;
+    }, {});
+  }
+  return muiProps;
+}
+
+// src/AddButton/AddButton.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function AddButton({
   uiSchema,
@@ -56,7 +74,16 @@ function AddButton({
   ...props
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.default, { title: translateString(import_utils.TranslatableString.AddItemButton), ...props, color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Add.default, {}) });
+  const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
+  const muiProps = getMuiProps(uiOptions, [
+    "color",
+    "disableFocusRipple",
+    "disableRipple",
+    "edge",
+    "size",
+    "sx"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.default, { title: translateString(import_utils.TranslatableString.AddItemButton), ...props, color: "primary", ...muiProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Add.default, {}) });
 }
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -80,9 +107,18 @@ function ArrayFieldItemTemplate(props) {
     fontWeight: "bold",
     minWidth: 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Grid.default, { container: true, alignItems: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid.default, { size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 }, style: { overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { mb: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Paper.default, { elevation: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { p: 2, children }) }) }) }),
-    hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid.default, { sx: { mt: hasDescription ? -5 : -1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Grid.default, { container: true, alignItems: "center", ...muiSlotProps?.arrayItemGridContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_Grid.default,
+      {
+        size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
+        style: { overflow: "auto" },
+        ...muiSlotProps?.arrayItemGridItem,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { mb: 2, ...muiSlotProps?.arrayItemOuterBox, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Paper.default, { elevation: 2, ...muiSlotProps?.arrayItemPaper, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { p: 2, ...muiSlotProps?.arrayItemInnerBox, children }) }) })
+      }
+    ),
+    hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid.default, { sx: { mt: hasDescription ? -5 : -1.5 }, ...muiSlotProps?.arrayItemToolbarGrid, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
   ] });
 }
 
@@ -122,7 +158,8 @@ function ArrayFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Paper2.default, { elevation: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Box2.default, { p: 2, children: [
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Paper2.default, { elevation: 2, ...muiSlotProps?.arrayPaper, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Box2.default, { p: 2, ...muiSlotProps?.arrayBox, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldTitleTemplate,
       {
@@ -147,7 +184,7 @@ function ArrayFieldTemplate(props) {
     ),
     !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     items,
-    canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box2.default, { mt: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { container: true, justifyContent: "flex-end", ...muiSlotProps?.arrayAddButtonGridContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { ...muiSlotProps?.arrayAddButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box2.default, { mt: 2, ...muiSlotProps?.arrayAddButtonBox, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       AddButton2,
       {
         id: (0, import_utils3.buttonId)(fieldPathId, "add"),
@@ -202,8 +239,11 @@ function BaseInputTemplate(props) {
   } = props;
   const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
   const { step, min, max, accept, ...rest } = (0, import_utils4.getInputProps)(schema, type, options);
+  const muiProps = getMuiProps(options);
+  const { slotProps: muiSlotProps, ...otherMuiProps } = muiProps;
   const htmlInputProps = {
     ...slotProps?.htmlInput,
+    ...muiSlotProps?.htmlInput,
     step,
     min,
     max,
@@ -213,7 +253,7 @@ function BaseInputTemplate(props) {
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? { ...slotProps?.inputLabel, ...InputLabelProps, shrink: true } : { ...slotProps?.inputLabel, ...InputLabelProps };
+  const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps, shrink: true } : { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps };
   const _onClear = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
@@ -222,7 +262,7 @@ function BaseInputTemplate(props) {
     },
     [onChange, options.emptyValue]
   );
-  const inputProps = { ...InputProps, ...slotProps?.input };
+  const inputProps = { ...InputProps, ...slotProps?.input, ...muiSlotProps?.input };
   if (options.allowClearTextInputs && value && !readonly && !disabled) {
     const clearAdornment = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClearButton2, { registry, onClick: _onClear }) });
     inputProps.endAdornment = !inputProps.endAdornment ? clearAdornment : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
@@ -243,6 +283,7 @@ function BaseInputTemplate(props) {
         disabled: disabled || readonly,
         slotProps: {
           ...slotProps,
+          ...muiSlotProps,
           input: inputProps,
           htmlInput: htmlInputProps,
           inputLabel: DisplayInputLabelProps
@@ -253,7 +294,7 @@ function BaseInputTemplate(props) {
         onChange: onChangeOverride || _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
-        ...textFieldProps,
+        ...{ ...otherMuiProps, ...textFieldProps },
         "aria-describedby": (0, import_utils4.ariaDescribedByIds)(id, !!schema.examples)
       }
     ),
@@ -263,12 +304,16 @@ function BaseInputTemplate(props) {
 
 // src/DescriptionField/DescriptionField.tsx
 var import_Typography = __toESM(require("@mui/material/Typography"), 1);
+var import_utils5 = require("@rjsf/utils");
 var import_core2 = require("@rjsf/core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DescriptionField(props) {
   const { id, description, registry, uiSchema } = props;
+  const uiOptions = (0, import_utils5.getUiOptions)(uiSchema);
+  const muiProps = getMuiProps(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
   if (description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Typography.default, { id, variant: "subtitle2", style: { marginTop: "5px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.RichDescription, { description, registry, uiSchema }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Typography.default, { id, variant: "subtitle2", style: { marginTop: "5px" }, ...muiSlotProps?.descTypography, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.RichDescription, { description, registry, uiSchema }) });
   }
   return null;
 }
@@ -282,19 +327,22 @@ var import_ListItemIcon = __toESM(require("@mui/material/ListItemIcon"), 1);
 var import_ListItemText = __toESM(require("@mui/material/ListItemText"), 1);
 var import_Paper3 = __toESM(require("@mui/material/Paper"), 1);
 var import_Typography2 = __toESM(require("@mui/material/Typography"), 1);
-var import_utils5 = require("@rjsf/utils");
+var import_utils6 = require("@rjsf/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function ErrorList({
   errors,
-  registry
+  registry,
+  uiSchema
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Paper3.default, { elevation: 2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Box3.default, { mb: 2, p: 2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Typography2.default, { variant: "h6", children: translateString(import_utils5.TranslatableString.ErrorsLabel) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_List.default, { dense: true, children: errors.map((error, i) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ListItem.default, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemIcon.default, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Error.default, { color: "error" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemText.default, { primary: error.stack })
+  const uiOptions = (0, import_utils6.getUiOptions)(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Paper3.default, { elevation: 2, ...muiSlotProps?.errorPaper, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Box3.default, { mb: 2, p: 2, ...muiSlotProps?.errorBox, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Typography2.default, { variant: "h6", ...muiSlotProps?.errorTypography, children: translateString(import_utils6.TranslatableString.ErrorsLabel) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_List.default, { dense: true, ...muiSlotProps?.errorList, children: errors.map((error, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ListItem.default, { ...muiSlotProps?.errorListItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemIcon.default, { ...muiSlotProps?.errorListItemIcon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Error.default, { color: "error" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemText.default, { primary: error.stack, ...muiSlotProps?.errorListItemText })
       ] }, i);
     }) })
   ] }) });
@@ -307,11 +355,20 @@ var import_ArrowUpward = __toESM(require("@mui/icons-material/ArrowUpward"), 1);
 var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"), 1);
 var import_Remove = __toESM(require("@mui/icons-material/Remove"), 1);
 var import_Clear = __toESM(require("@mui/icons-material/Clear"), 1);
-var import_utils6 = require("@rjsf/utils");
+var import_utils7 = require("@rjsf/utils");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function MuiIconButton(props) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_IconButton2.default, { ...otherProps, size: "small", color, children: icon });
+  const uiOptions = (0, import_utils7.getUiOptions)(uiSchema);
+  const muiProps = getMuiProps(uiOptions, [
+    "color",
+    "disableFocusRipple",
+    "disableRipple",
+    "edge",
+    "size",
+    "sx"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_IconButton2.default, { ...muiProps, ...otherProps, size: "small", color, children: icon });
 }
 function CopyButton(props) {
   const {
@@ -320,7 +377,7 @@ function CopyButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MuiIconButton,
     {
-      title: translateString(import_utils6.TranslatableString.CopyButton),
+      title: translateString(import_utils7.TranslatableString.CopyButton),
       ...props,
       icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ContentCopy.default, { fontSize: "small" })
     }
@@ -333,7 +390,7 @@ function MoveDownButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MuiIconButton,
     {
-      title: translateString(import_utils6.TranslatableString.MoveDownButton),
+      title: translateString(import_utils7.TranslatableString.MoveDownButton),
       ...props,
       icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ArrowDownward.default, { fontSize: "small" })
     }
@@ -346,7 +403,7 @@ function MoveUpButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MuiIconButton,
     {
-      title: translateString(import_utils6.TranslatableString.MoveUpButton),
+      title: translateString(import_utils7.TranslatableString.MoveUpButton),
       ...props,
       icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ArrowUpward.default, { fontSize: "small" })
     }
@@ -360,7 +417,7 @@ function RemoveButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MuiIconButton,
     {
-      title: translateString(import_utils6.TranslatableString.RemoveButton),
+      title: translateString(import_utils7.TranslatableString.RemoveButton),
       ...otherProps,
       color: "error",
       icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Remove.default, { fontSize: iconType === "default" ? void 0 : "small" })
@@ -375,7 +432,7 @@ function ClearButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MuiIconButton,
     {
-      title: translateString(import_utils6.TranslatableString.ClearButton),
+      title: translateString(import_utils7.TranslatableString.ClearButton),
       ...otherProps,
       icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Clear.default, { fontSize: iconType === "default" ? void 0 : "small" })
     }
@@ -386,22 +443,25 @@ function ClearButton(props) {
 var import_ListItem2 = __toESM(require("@mui/material/ListItem"), 1);
 var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"), 1);
 var import_List2 = __toESM(require("@mui/material/List"), 1);
-var import_utils7 = require("@rjsf/utils");
+var import_utils8 = require("@rjsf/utils");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function FieldErrorTemplate(props) {
-  const { errors = [], fieldPathId } = props;
+  const { errors = [], fieldPathId, uiSchema } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = (0, import_utils7.errorId)(fieldPathId);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_List2.default, { id, dense: true, disablePadding: true, children: errors.map((error, i) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ListItem2.default, { disableGutters: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_FormHelperText.default, { component: "div", id: `${id}-${i}`, children: error }) }, i);
+  const id = (0, import_utils8.errorId)(fieldPathId);
+  const uiOptions = (0, import_utils8.getUiOptions)(uiSchema);
+  const muiProps = getMuiProps(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_List2.default, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ListItem2.default, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_FormHelperText.default, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i);
   }) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
 var import_core3 = require("@rjsf/core");
-var import_utils8 = require("@rjsf/utils");
+var import_utils9 = require("@rjsf/utils");
 var import_FormHelperText2 = __toESM(require("@mui/material/FormHelperText"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
@@ -409,13 +469,25 @@ function FieldHelpTemplate(props) {
   if (!help) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_FormHelperText2.default, { component: "div", id: (0, import_utils8.helpId)(fieldPathId), style: { marginTop: "5px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.RichHelp, { help, registry, uiSchema }) });
+  const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
+  const muiProps = getMuiProps(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_FormHelperText2.default,
+    {
+      component: "div",
+      id: (0, import_utils9.helpId)(fieldPathId),
+      style: { marginTop: "5px" },
+      ...muiSlotProps?.helpFormHelperText,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.RichHelp, { help, registry, uiSchema })
+    }
+  );
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
 var import_FormControl = __toESM(require("@mui/material/FormControl"), 1);
 var import_Typography3 = __toESM(require("@mui/material/Typography"), 1);
-var import_utils9 = require("@rjsf/utils");
+var import_utils10 = require("@rjsf/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function FieldTemplate(props) {
   const {
@@ -441,8 +513,8 @@ function FieldTemplate(props) {
     uiSchema,
     registry
   } = props;
-  const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
-  const WrapIfAdditionalTemplate2 = (0, import_utils9.getTemplate)(
+  const uiOptions = (0, import_utils10.getUiOptions)(uiSchema);
+  const WrapIfAdditionalTemplate2 = (0, import_utils10.getTemplate)(
     "WrapIfAdditionalTemplate",
     registry,
     uiOptions
@@ -451,6 +523,7 @@ function FieldTemplate(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "none" }, children });
   }
   const isCheckbox = uiOptions.widget === "checkbox";
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     WrapIfAdditionalTemplate2,
     {
@@ -469,12 +542,23 @@ function FieldTemplate(props) {
       schema,
       uiSchema,
       registry,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_FormControl.default, { fullWidth: true, error: rawErrors.length ? true : false, required, children: [
-        children,
-        displayLabel && !isCheckbox && rawDescription ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_Typography3.default, { variant: "caption", color: "textSecondary", children: description }) : null,
-        errors,
-        help
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        import_FormControl.default,
+        {
+          fullWidth: true,
+          error: rawErrors.length ? true : false,
+          required,
+          ...muiSlotProps?.fieldFormControl,
+          sx: otherMuiProps.sx,
+          className: otherMuiProps.className,
+          children: [
+            children,
+            displayLabel && !isCheckbox && rawDescription ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_Typography3.default, { variant: "caption", color: "textSecondary", ...muiSlotProps?.fieldTypography, children: description }) : null,
+            errors,
+            help
+          ]
+        }
+      )
     }
   );
 }
@@ -490,18 +574,21 @@ function GridTemplate(props) {
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 var import_Box4 = __toESM(require("@mui/material/Box"), 1);
 var import_FormControl2 = __toESM(require("@mui/material/FormControl"), 1);
+var import_utils11 = require("@rjsf/utils");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function MultiSchemaFieldTemplate(props) {
-  const { optionSchemaField, selector } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Box4.default, { sx: { mb: 2 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_FormControl2.default, { fullWidth: true, sx: { mb: 2 }, children: selector }),
+  const { optionSchemaField, selector, uiSchema } = props;
+  const uiOptions = (0, import_utils11.getUiOptions)(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Box4.default, { sx: { mb: 2 }, ...muiSlotProps?.multiBox, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_FormControl2.default, { fullWidth: true, sx: { mb: 2 }, ...muiSlotProps?.multiFormControl, children: selector }),
     optionSchemaField
   ] });
 }
 
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 var import_Grid4 = __toESM(require("@mui/material/Grid"), 1);
-var import_utils10 = require("@rjsf/utils");
+var import_utils12 = require("@rjsf/utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
@@ -519,9 +606,9 @@ function ObjectFieldTemplate(props) {
     onAddProperty,
     registry
   } = props;
-  const uiOptions = (0, import_utils10.getUiOptions)(uiSchema);
-  const TitleFieldTemplate = (0, import_utils10.getTemplate)("TitleFieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = (0, import_utils10.getTemplate)(
+  const uiOptions = (0, import_utils12.getUiOptions)(uiSchema);
+  const TitleFieldTemplate = (0, import_utils12.getTemplate)("TitleFieldTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = (0, import_utils12.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     uiOptions
@@ -530,11 +617,12 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TitleFieldTemplate,
       {
-        id: (0, import_utils10.titleId)(fieldPathId),
+        id: (0, import_utils12.titleId)(fieldPathId),
         title,
         required,
         schema,
@@ -546,27 +634,27 @@ function ObjectFieldTemplate(props) {
     description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils10.descriptionId)(fieldPathId),
+        id: (0, import_utils12.descriptionId)(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Grid4.default, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Grid4.default, { container: true, spacing: 2, style: { marginTop: "10px" }, ...muiSlotProps?.objectGridContainer, children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       properties.map(
         (element, index) => (
           // Remove the <Grid> if the inner element is hidden as the <Grid>
           // itself would otherwise still take up space.
-          element.hidden ? element.content : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
+          element.hidden ? element.content : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { size: { xs: 12 }, style: { marginBottom: "10px" }, ...muiSlotProps?.objectGridItem, children: element.content }, index)
         )
       )
     ] }),
-    (0, import_utils10.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    (0, import_utils12.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { container: true, justifyContent: "flex-end", ...muiSlotProps?.objectAddButtonGridContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { ...muiSlotProps?.objectAddButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       AddButton2,
       {
-        id: (0, import_utils10.buttonId)(fieldPathId, "add"),
+        id: (0, import_utils12.buttonId)(fieldPathId, "add"),
         className: "rjsf-object-property-expand",
         onClick: onAddProperty,
         disabled: disabled || readonly,
@@ -581,13 +669,14 @@ function ObjectFieldTemplate(props) {
 var import_Add2 = __toESM(require("@mui/icons-material/Add"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function OptionalDataControlsTemplate(props) {
-  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  const { id, registry, label, onAddClick, onRemoveClick, uiSchema } = props;
   if (onAddClick) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       MuiIconButton,
       {
         id,
         registry,
+        uiSchema,
         className: "rjsf-add-optional-data",
         onClick: onAddClick,
         title: label,
@@ -600,6 +689,7 @@ function OptionalDataControlsTemplate(props) {
       {
         id,
         registry,
+        uiSchema,
         className: "rjsf-remove-optional-data",
         onClick: onRemoveClick,
         title: label
@@ -612,14 +702,27 @@ function OptionalDataControlsTemplate(props) {
 // src/SubmitButton/SubmitButton.tsx
 var import_Box5 = __toESM(require("@mui/material/Box"), 1);
 var import_Button = __toESM(require("@mui/material/Button"), 1);
-var import_utils11 = require("@rjsf/utils");
+var import_utils13 = require("@rjsf/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function SubmitButton({ uiSchema }) {
-  const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils11.getSubmitButtonOptions)(uiSchema);
+  const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils13.getSubmitButtonOptions)(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box5.default, { marginTop: 3, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Button.default, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
+  const uiOptions = (0, import_utils13.getUiOptions)(uiSchema);
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box5.default, { marginTop: 3, ...muiSlotProps?.submitBox, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_Button.default,
+    {
+      type: "submit",
+      variant: "contained",
+      color: "primary",
+      ...submitButtonProps,
+      ...otherMuiProps,
+      ...muiSlotProps?.submitButton,
+      children: submitText
+    }
+  ) });
 }
 
 // src/TitleField/TitleField.tsx
@@ -627,29 +730,29 @@ var import_Box6 = __toESM(require("@mui/material/Box"), 1);
 var import_Divider = __toESM(require("@mui/material/Divider"), 1);
 var import_Grid5 = __toESM(require("@mui/material/Grid"), 1);
 var import_Typography4 = __toESM(require("@mui/material/Typography"), 1);
+var import_utils14 = require("@rjsf/utils");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function TitleField({
-  id,
-  title,
-  optionalDataControl
-}) {
-  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Typography4.default, { variant: "h5", children: title });
+function TitleField(props) {
+  const { id, title, optionalDataControl, uiSchema } = props;
+  const uiOptions = (0, import_utils14.getUiOptions)(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Typography4.default, { variant: "h5", ...muiSlotProps?.titleTypography, children: title });
   if (optionalDataControl) {
-    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Grid5.default, { container: true, spacing: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { size: "grow", children: heading }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { justifyContent: "flex-end", children: optionalDataControl })
+    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Grid5.default, { container: true, spacing: 0, ...muiSlotProps?.titleGridContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { size: "grow", ...muiSlotProps?.titleGridItem, children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { justifyContent: "flex-end", ...muiSlotProps?.titleOptionalDataGridItem, children: optionalDataControl })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Box6.default, { id, mb: 1, mt: 1, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Box6.default, { id, mb: 1, mt: 1, ...muiSlotProps?.titleBox, children: [
     heading,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Divider.default, {})
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Divider.default, { ...muiSlotProps?.titleDivider })
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 var import_Grid6 = __toESM(require("@mui/material/Grid"), 1);
 var import_TextField2 = __toESM(require("@mui/material/TextField"), 1);
-var import_utils12 = require("@rjsf/utils");
+var import_utils15 = require("@rjsf/utils");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
   const {
@@ -670,47 +773,64 @@ function WrapIfAdditionalTemplate(props) {
   } = props;
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
-  const keyLabel = translateString(import_utils12.TranslatableString.KeyLabel, [label]);
-  const additional = import_utils12.ADDITIONAL_PROPERTY_FLAG in schema;
+  const keyLabel = translateString(import_utils15.TranslatableString.KeyLabel, [label]);
+  const additional = import_utils15.ADDITIONAL_PROPERTY_FLAG in schema;
   const btnStyle = {
     flex: 1,
     paddingLeft: 6,
     paddingRight: 6,
     fontWeight: "bold"
   };
+  const uiOptions = (0, import_utils15.getUiOptions)(uiSchema);
+  const { rjsfSlotProps } = getMuiProps(uiOptions);
+  const muiSlotProps = rjsfSlotProps;
   if (!additional) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Grid6.default, { container: true, alignItems: "flex-start", spacing: 2, className: classNames, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: 5.5, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_TextField2.default,
-      {
-        fullWidth: true,
-        required,
-        label: displayLabel ? keyLabel : void 0,
-        defaultValue: label,
-        disabled: disabled || readonly,
-        id: `${id}-key`,
-        name: `${id}-key`,
-        onBlur: !readonly ? onKeyRenameBlur : void 0,
-        type: "text"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: 5.5, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { sx: { mt: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      RemoveButton2,
-      {
-        id: (0, import_utils12.buttonId)(id, "remove"),
-        className: "rjsf-object-property-remove",
-        iconType: "default",
-        style: btnStyle,
-        disabled: disabled || readonly,
-        onClick: onRemoveProperty,
-        uiSchema,
-        registry
-      }
-    ) })
-  ] }, `${id}-key`);
+  const { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = muiSlotProps || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_Grid6.default,
+    {
+      container: true,
+      alignItems: "flex-start",
+      spacing: 2,
+      className: classNames,
+      style,
+      ...wrapGridContainer,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: 5.5, ...wrapKeyGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_TextField2.default,
+          {
+            fullWidth: true,
+            required,
+            label: displayLabel ? keyLabel : void 0,
+            defaultValue: label,
+            disabled: disabled || readonly,
+            id: `${id}-key`,
+            name: `${id}-key`,
+            onBlur: !readonly ? onKeyRenameBlur : void 0,
+            type: "text"
+          },
+          label
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: 5.5, ...wrapChildrenGridItem, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { sx: { mt: 1.5 }, ...wrapRemoveButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          RemoveButton2,
+          {
+            id: (0, import_utils15.buttonId)(id, "remove"),
+            className: "rjsf-object-property-remove",
+            iconType: "default",
+            style: btnStyle,
+            disabled: disabled || readonly,
+            onClick: onRemoveProperty,
+            uiSchema,
+            registry
+          }
+        ) })
+      ]
+    },
+    `${id}-key`
+  );
 }
 
 // src/Templates/Templates.ts
@@ -746,7 +866,7 @@ var Templates_default = generateTemplates();
 // src/CheckboxWidget/CheckboxWidget.tsx
 var import_Checkbox = __toESM(require("@mui/material/Checkbox"), 1);
 var import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"), 1);
-var import_utils13 = require("@rjsf/utils");
+var import_utils16 = require("@rjsf/utils");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
@@ -766,21 +886,22 @@ function CheckboxWidget(props) {
     options,
     uiSchema
   } = props;
-  const DescriptionFieldTemplate = (0, import_utils13.getTemplate)(
+  const DescriptionFieldTemplate = (0, import_utils16.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     options
   );
-  const required = (0, import_utils13.schemaRequiresTrueValue)(schema);
+  const required = (0, import_utils16.schemaRequiresTrueValue)(schema);
   const _onChange = (_, checked) => onChange(checked);
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
   const description = options.description ?? schema.description;
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils13.descriptionId)(id),
+        id: (0, import_utils16.descriptionId)(id),
         description,
         schema,
         uiSchema,
@@ -790,6 +911,8 @@ function CheckboxWidget(props) {
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_FormControlLabel.default,
       {
+        ...otherMuiProps,
+        ...muiSlotProps?.formControlLabel,
         control: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_Checkbox.default,
           {
@@ -802,10 +925,11 @@ function CheckboxWidget(props) {
             onChange: _onChange,
             onBlur: _onBlur,
             onFocus: _onFocus,
-            "aria-describedby": (0, import_utils13.ariaDescribedByIds)(id)
+            "aria-describedby": (0, import_utils16.ariaDescribedByIds)(id),
+            ...muiSlotProps?.checkbox
           }
         ),
-        label: (0, import_utils13.labelValue)(label, hideLabel, false)
+        label: (0, import_utils16.labelValue)(label, hideLabel, false)
       }
     )
   ] });
@@ -816,46 +940,51 @@ var import_Checkbox2 = __toESM(require("@mui/material/Checkbox"), 1);
 var import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"), 1);
 var import_FormGroup = __toESM(require("@mui/material/FormGroup"), 1);
 var import_FormLabel = __toESM(require("@mui/material/FormLabel"), 1);
-var import_utils14 = require("@rjsf/utils");
+var import_utils17 = require("@rjsf/utils");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-function CheckboxesWidget({
-  label,
-  hideLabel,
-  id,
-  htmlName,
-  disabled,
-  options,
-  value,
-  autofocus,
-  readonly,
-  required,
-  onChange,
-  onBlur,
-  onFocus
-}) {
+var import_react2 = require("react");
+function CheckboxesWidget(props) {
+  const {
+    label,
+    hideLabel,
+    id,
+    htmlName,
+    disabled,
+    options,
+    value,
+    autofocus,
+    readonly,
+    required,
+    onChange,
+    onBlur,
+    onFocus
+  } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = (0, import_utils17.getOptionValueFormat)(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
   const _onChange = (index) => ({ target: { checked } }) => {
     if (checked) {
-      onChange((0, import_utils14.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
+      onChange((0, import_utils17.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
     } else {
-      onChange((0, import_utils14.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
+      onChange((0, import_utils17.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
     }
   };
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils14.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils14.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, (0, import_utils17.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, (0, import_utils17.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    (0, import_utils14.labelValue)(
+    (0, import_utils17.labelValue)(
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormLabel.default, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormGroup.default, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-      const checked = (0, import_utils14.enumOptionsIsSelected)(option.value, checkboxesValues);
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormGroup.default, { ...otherMuiProps, ...muiSlotProps?.formGroup, id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+      const checked = (0, import_utils17.enumOptionsIsSelected)(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
       const checkbox = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         import_Checkbox2.default,
         {
-          id: (0, import_utils14.optionId)(id, index),
+          ...muiSlotProps?.checkbox,
+          id: (0, import_utils17.optionId)(id, index),
           name: htmlName || id,
           checked,
           disabled: disabled || itemDisabled || readonly,
@@ -863,10 +992,18 @@ function CheckboxesWidget({
           onChange: _onChange(index),
           onBlur: _onBlur,
           onFocus: _onFocus,
-          "aria-describedby": (0, import_utils14.ariaDescribedByIds)(id)
+          "aria-describedby": (0, import_utils17.ariaDescribedByIds)(id)
+        }
+      );
+      return /* @__PURE__ */ (0, import_react2.createElement)(
+        import_FormControlLabel2.default,
+        {
+          ...muiSlotProps?.formControlLabel,
+          control: checkbox,
+          key: index,
+          label: option.label
         }
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormControlLabel2.default, { control: checkbox, label: option.label }, index);
     }) })
   ] });
 }
@@ -876,55 +1013,49 @@ var import_FormControlLabel3 = __toESM(require("@mui/material/FormControlLabel")
 var import_FormLabel2 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_Radio = __toESM(require("@mui/material/Radio"), 1);
 var import_RadioGroup = __toESM(require("@mui/material/RadioGroup"), 1);
-var import_utils15 = require("@rjsf/utils");
+var import_utils18 = require("@rjsf/utils");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function RadioWidget({
-  id,
-  htmlName,
-  options,
-  value,
-  required,
-  disabled,
-  readonly,
-  label,
-  hideLabel,
-  onChange,
-  onBlur,
-  onFocus
-}) {
+var import_react3 = require("react");
+function RadioWidget(props) {
+  const { id, htmlName, options, value, required, disabled, readonly, label, hideLabel, onChange, onBlur, onFocus } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const _onChange = (_, value2) => onChange((0, import_utils15.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils15.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils15.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const optionValueFormat = (0, import_utils18.getOptionValueFormat)(options);
+  const _onChange = (_, value2) => onChange((0, import_utils18.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const row = options ? options.inline : false;
-  const selectedIndex = (0, import_utils15.enumOptionsIndexForValue)(value, enumOptions) ?? null;
+  const selectValue = (0, import_utils18.enumOptionSelectedValue)(value, enumOptions, false, optionValueFormat, "");
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    (0, import_utils15.labelValue)(
+    (0, import_utils18.labelValue)(
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_FormLabel2.default, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_RadioGroup.default,
       {
+        ...otherMuiProps,
+        ...muiSlotProps?.radioGroup,
         id,
         name: htmlName || id,
-        value: selectedIndex,
+        value: selectValue,
         row,
         onChange: _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
-        "aria-describedby": (0, import_utils15.ariaDescribedByIds)(id),
+        "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          const radio = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          const radio = /* @__PURE__ */ (0, import_react3.createElement)(
             import_FormControlLabel3.default,
             {
-              control: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Radio.default, { name: htmlName || id, id: (0, import_utils15.optionId)(id, index), color: "primary" }),
+              ...muiSlotProps?.formControlLabel,
+              control: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Radio.default, { ...muiSlotProps?.radio, name: htmlName || id, id: (0, import_utils18.optionId)(id, index), color: "primary" }),
               label: option.label,
-              value: String(index),
+              value: (0, import_utils18.enumOptionValueEncoder)(option.value, index, optionValueFormat),
+              key: index,
               disabled: disabled || itemDisabled || readonly
-            },
-            index
+            }
           );
           return radio;
         })
@@ -936,18 +1067,19 @@ function RadioWidget({
 // src/RangeWidget/RangeWidget.tsx
 var import_FormLabel3 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_Slider = __toESM(require("@mui/material/Slider"), 1);
-var import_utils16 = require("@rjsf/utils");
+var import_utils19 = require("@rjsf/utils");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
-  const sliderProps = { value, label, id, name: id, ...(0, import_utils16.rangeSpec)(schema) };
+  const sliderProps = { value, label, id, name: id, ...(0, import_utils19.rangeSpec)(schema) };
   const _onChange = (_, value2) => {
     onChange(value2 ?? options.emptyValue);
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    (0, import_utils16.labelValue)(
+    (0, import_utils19.labelValue)(
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_FormLabel3.default, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
@@ -959,8 +1091,10 @@ function RangeWidget(props) {
         onBlur: _onBlur,
         onFocus: _onFocus,
         valueLabelDisplay: "auto",
+        ...otherMuiProps,
+        ...muiSlotProps?.slider,
         ...sliderProps,
-        "aria-describedby": (0, import_utils16.ariaDescribedByIds)(id)
+        "aria-describedby": (0, import_utils19.ariaDescribedByIds)(id)
       }
     )
   ] });
@@ -969,51 +1103,53 @@ function RangeWidget(props) {
 // src/SelectWidget/SelectWidget.tsx
 var import_MenuItem = __toESM(require("@mui/material/MenuItem"), 1);
 var import_TextField3 = __toESM(require("@mui/material/TextField"), 1);
-var import_utils17 = require("@rjsf/utils");
+var import_utils20 = require("@rjsf/utils");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function SelectWidget({
-  schema,
-  id,
-  name,
-  // remove this from textFieldProps
-  htmlName,
-  options,
-  label,
-  hideLabel,
-  required,
-  disabled,
-  placeholder,
-  readonly,
-  value,
-  multiple,
-  autofocus,
-  onChange,
-  onBlur,
-  onFocus,
-  errorSchema,
-  rawErrors = [],
-  registry,
-  uiSchema,
-  hideError,
-  ...textFieldProps
-}) {
+function SelectWidget(props) {
+  const {
+    schema,
+    id,
+    name,
+    // remove this from textFieldProps
+    htmlName,
+    options,
+    label,
+    hideLabel,
+    required,
+    disabled,
+    placeholder,
+    readonly,
+    value,
+    multiple,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    errorSchema,
+    rawErrors = [],
+    registry,
+    uiSchema,
+    hideError,
+    ...textFieldProps
+  } = props;
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
-  multiple = typeof multiple === "undefined" ? false : !!multiple;
-  const emptyValue = multiple ? [] : "";
-  const isEmpty = typeof value === "undefined" || multiple && value.length < 1 || !multiple && value === emptyValue;
-  const _onChange = ({ target: { value: value2 } }) => onChange((0, import_utils17.enumOptionsValueForIndex)(value2, enumOptions, optEmptyVal));
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils17.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils17.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
-  const selectedIndexes = (0, import_utils17.enumOptionsIndexForValue)(value, enumOptions, multiple);
+  const optionValueFormat = (0, import_utils20.getOptionValueFormat)(options);
+  const isMultiple = typeof multiple === "undefined" ? false : !!multiple;
+  const emptyValue = isMultiple ? [] : "";
+  const isEmpty = typeof value === "undefined" || isMultiple && value.length < 1 || !isMultiple && value === emptyValue;
+  const _onChange = ({ target: { value: value2 } }) => onChange((0, import_utils20.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, optEmptyVal));
+  const _onBlur = ({ target }) => onBlur(id, (0, import_utils20.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const _onFocus = ({ target }) => onFocus(id, (0, import_utils20.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
-  const showPlaceholderOption = !multiple && schema.default === void 0;
+  const showPlaceholderOption = !isMultiple && schema.default === void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     import_TextField3.default,
     {
       id,
       name: htmlName || id,
-      label: (0, import_utils17.labelValue)(label || void 0, hideLabel, void 0),
-      value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
+      label: (0, import_utils20.labelValue)(label || void 0, hideLabel, void 0),
+      value: (0, import_utils20.enumOptionSelectedValue)(value, enumOptions, isMultiple, optionValueFormat, emptyValue),
       required,
       disabled: disabled || readonly,
       autoFocus: autofocus,
@@ -1023,22 +1159,25 @@ function SelectWidget({
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
-      ...textFieldRemainingProps,
+      ...{ ...otherMuiProps, ...textFieldRemainingProps },
       select: true,
-      InputLabelProps: {
-        ...InputLabelProps,
-        shrink: !isEmpty
-      },
-      SelectProps: {
-        ...SelectProps,
-        multiple
+      slotProps: {
+        ...muiSlotProps,
+        inputLabel: {
+          ...muiSlotProps?.inputLabel,
+          shrink: !isEmpty
+        },
+        select: {
+          ...muiSlotProps?.select,
+          multiple
+        }
       },
-      "aria-describedby": (0, import_utils17.ariaDescribedByIds)(id),
+      "aria-describedby": (0, import_utils20.ariaDescribedByIds)(id),
       children: [
         showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_MenuItem.default, { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
           const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_MenuItem.default, { value: String(i), disabled: disabled2, children: label2 }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_MenuItem.default, { value: (0, import_utils20.enumOptionValueEncoder)(value2, i, optionValueFormat), disabled: disabled2, children: label2 }, i);
         })
       ]
     }
@@ -1046,11 +1185,11 @@ function SelectWidget({
 }
 
 // src/TextareaWidget/TextareaWidget.tsx
-var import_utils18 = require("@rjsf/utils");
+var import_utils21 = require("@rjsf/utils");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function TextareaWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils18.getTemplate)("BaseInputTemplate", registry, options);
+  const BaseInputTemplate2 = (0, import_utils21.getTemplate)("BaseInputTemplate", registry, options);
   let rows = 5;
   if (typeof options.rows === "string" || typeof options.rows === "number") {
     rows = options.rows;