@rjsf/daisyui 6.0.0-beta.9 → 6.0.1

package/dist/{index.js → index.cjs}

@@ -34,11 +34,10 @@ module.exports = __toCommonJS(index_exports);
 var import_core4 = require("@rjsf/core");
 
 // src/theme/Theme.tsx
-var import_react19 = require("react");
+var import_react15 = require("react");
 var import_core2 = require("@rjsf/core");
 
 // src/templates/ArrayFieldItemButtonsTemplate/ArrayFieldItemButtonsTemplate.tsx
-var import_react = require("react");
 var import_utils = require("@rjsf/utils");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ArrayFieldItemButtonsTemplate(props) {
@@ -48,20 +47,16 @@ function ArrayFieldItemButtonsTemplate(props) {
     hasMoveDown,
     hasMoveUp,
     hasRemove,
-    idSchema,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
+    fieldPathId,
+    onCopyItem,
+    onRemoveItem,
+    onMoveDownItem,
+    onMoveUpItem,
     readonly,
     registry,
     uiSchema
   } = props;
   const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
-  const onCopyClick = (0, import_react.useMemo)(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = (0, import_react.useMemo)(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = (0, import_react.useMemo)(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = (0, import_react.useMemo)(() => onReorderClick(index, index + 1), [index, onReorderClick]);
   const renderMany = [hasMoveUp || hasMoveDown, hasCopy, hasRemove].filter(Boolean).length > 1;
   const btnClass = renderMany ? "join-item btn btn-sm px-2" : "btn btn-sm px-2 rounded-sm";
   const removeBtnClass = renderMany ? "join-item btn btn-sm btn-error px-2" : "btn btn-sm btn-error px-2 rounded-sm";
@@ -70,10 +65,10 @@ function ArrayFieldItemButtonsTemplate(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         MoveUpButton2,
         {
-          id: (0, import_utils.buttonId)(idSchema, "moveUp"),
+          id: (0, import_utils.buttonId)(fieldPathId, "moveUp"),
           className: `rjsf-array-item-move-up ${btnClass}`,
           disabled: disabled || readonly || !hasMoveUp,
-          onClick: onArrowUpClick,
+          onClick: onMoveUpItem,
           uiSchema,
           registry
         }
@@ -81,10 +76,10 @@ function ArrayFieldItemButtonsTemplate(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         MoveDownButton2,
         {
-          id: (0, import_utils.buttonId)(idSchema, "moveDown"),
+          id: (0, import_utils.buttonId)(fieldPathId, "moveDown"),
           className: `rjsf-array-item-move-down ${btnClass}`,
           disabled: disabled || readonly || !hasMoveDown,
-          onClick: onArrowDownClick,
+          onClick: onMoveDownItem,
           uiSchema,
           registry
         }
@@ -93,10 +88,10 @@ function ArrayFieldItemButtonsTemplate(props) {
     hasCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CopyButton2,
       {
-        id: (0, import_utils.buttonId)(idSchema, "copy"),
+        id: (0, import_utils.buttonId)(fieldPathId, "copy"),
         className: `rjsf-array-item-copy ${btnClass}`,
         disabled: disabled || readonly,
-        onClick: onCopyClick,
+        onClick: onCopyItem,
         uiSchema,
         registry
       }
@@ -104,10 +99,10 @@ function ArrayFieldItemButtonsTemplate(props) {
     hasRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       RemoveButton2,
       {
-        id: (0, import_utils.buttonId)(idSchema, "remove"),
+        id: (0, import_utils.buttonId)(fieldPathId, "remove"),
         className: `rjsf-array-item-remove ${removeBtnClass}`,
         disabled: disabled || readonly,
-        onClick: onRemoveClick,
+        onClick: onRemoveItem,
         uiSchema,
         registry
       }
@@ -139,7 +134,7 @@ function ArrayFieldItemTemplate(props) {
 }
 
 // src/templates/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 var import_utils3 = require("@rjsf/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ArrayFieldTemplate(props) {
@@ -147,8 +142,9 @@ function ArrayFieldTemplate(props) {
     canAdd,
     className,
     disabled,
-    idSchema,
+    fieldPathId,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     registry,
@@ -163,20 +159,16 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils3.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = (0, import_utils3.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  const handleAddClick = (0, import_react2.useCallback)(
+  const handleAddClick = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -188,18 +180,19 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldTitleTemplate,
       {
-        idSchema,
+        fieldPathId,
         title: uiOptions.title || title,
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldDescriptionTemplate,
       {
-        idSchema,
+        fieldPathId,
         description: uiOptions.description || schema.description,
         schema,
         uiSchema,
@@ -207,14 +200,15 @@ function ArrayFieldTemplate(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "rjsf-array-item-list", children: [
-        items && items.map(({ key, ...itemProps }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...itemProps, index, totalItems: items.length }, key)),
+        items,
         items && items.length === 0 && canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center italic text-base-content/70", children: import_utils3.TranslatableString.EmptyArray })
       ] }),
       canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         AddButton2,
         {
-          id: (0, import_utils3.buttonId)(idSchema, "add"),
+          id: (0, import_utils3.buttonId)(fieldPathId, "add"),
           className: "rjsf-array-item-add btn btn-primary btn-sm",
           onClick: handleAddClick,
           disabled: disabled || readonly,
@@ -227,12 +221,14 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/templates/BaseInputTemplate/BaseInputTemplate.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_utils4 = require("@rjsf/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
+    multiple,
     value,
     required,
     disabled,
@@ -249,17 +245,23 @@ function BaseInputTemplate(props) {
     placeholder
   } = props;
   const inputProps = (0, import_utils4.getInputProps)(schema, type, options);
+  let className = "input input-bordered";
+  let isMulti = multiple;
+  if (type === "file") {
+    isMulti = schema.type === "array" || Boolean(options.multiple);
+    className = "file-input w-full";
+  }
   const { step, min, max, accept, ...rest } = inputProps;
   const htmlInputProps = { step, min, max, accept, ...schema.examples ? { list: (0, import_utils4.examplesId)(id) } : void 0 };
-  const _onChange = (0, import_react3.useCallback)(
+  const _onChange = (0, import_react2.useCallback)(
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options]
   );
-  const _onBlur = (0, import_react3.useCallback)(
+  const _onBlur = (0, import_react2.useCallback)(
     ({ target }) => onBlur && onBlur(id, target.value),
     [onBlur, id]
   );
-  const _onFocus = (0, import_react3.useCallback)(
+  const _onFocus = (0, import_react2.useCallback)(
     ({ target }) => onFocus && onFocus(id, target.value),
     [onFocus, id]
   );
@@ -270,13 +272,14 @@ function BaseInputTemplate(props) {
         "input",
         {
           id,
-          name: id,
+          name: htmlName || id,
           value: value || value === 0 ? value : "",
           placeholder,
           required,
           disabled: disabled || readonly,
           autoFocus: autofocus,
-          className: "input input-bordered",
+          className,
+          multiple: isMulti,
           ...rest,
           ...htmlInputProps,
           onChange: onChangeOverride || _onChange,
@@ -298,7 +301,7 @@ var import_fontawesome_svg_core = require("@fortawesome/fontawesome-svg-core");
 var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
 
 // src/templates/ButtonTemplates/DaisyUIButton.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_react_fontawesome = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DaisyUIButton(props) {
@@ -306,7 +309,7 @@ function DaisyUIButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className, "aria-label": props.title, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_fontawesome.FontAwesomeIcon, { icon, className: "h-5 w-5" }) });
 }
 DaisyUIButton.displayName = "DaisyUIButton";
-var DaisyUIButton_default = (0, import_react4.memo)(DaisyUIButton);
+var DaisyUIButton_default = (0, import_react3.memo)(DaisyUIButton);
 
 // src/templates/ButtonTemplates/AddButton.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -322,11 +325,11 @@ function AddButton({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DaisyUIButton_default,
     {
+      title: translateString(import_utils5.TranslatableString.AddButton),
       ...otherProps,
       iconType: "info",
       icon: import_free_solid_svg_icons.faPlus,
       className: "btn-add col-xs-12 btn-primary btn-primary-content",
-      title: translateString(import_utils5.TranslatableString.AddButton),
       onClick,
       disabled,
       registry
@@ -361,7 +364,7 @@ function CopyButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DaisyUIButton_default, { ...props, title: translateString(import_utils7.TranslatableString.CopyButton), icon: import_free_solid_svg_icons2.faCopy });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DaisyUIButton_default, { title: translateString(import_utils7.TranslatableString.CopyButton), ...props, icon: import_free_solid_svg_icons2.faCopy });
 }
 function MoveDownButton(props) {
   const {
@@ -370,8 +373,8 @@ function MoveDownButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DaisyUIButton_default,
     {
-      ...props,
       title: translateString(import_utils7.TranslatableString.MoveDownButton),
+      ...props,
       icon: import_free_solid_svg_icons2.faArrowDown
     }
   );
@@ -383,8 +386,8 @@ function MoveUpButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DaisyUIButton_default,
     {
-      ...props,
       title: translateString(import_utils7.TranslatableString.MoveUpButton),
+      ...props,
       icon: import_free_solid_svg_icons2.faArrowUp
     }
   );
@@ -396,8 +399,8 @@ function RemoveButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DaisyUIButton_default,
     {
-      ...props,
       title: translateString(import_utils7.TranslatableString.RemoveButton),
+      ...props,
       iconType: "danger",
       icon: import_free_solid_svg_icons2.faTrash
     }
@@ -437,6 +440,7 @@ function FieldHelpTemplate(props) {
 }
 
 // src/templates/FieldTemplate/FieldTemplate.tsx
+var import_utils8 = require("@rjsf/utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function FieldTemplate(props) {
   const {
@@ -444,37 +448,61 @@ function FieldTemplate(props) {
     label,
     children,
     errors,
-    formContext,
     formData,
     help,
     hideError,
     displayLabel,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     classNames,
-    // Destructure props we don't want to pass to div
-    onKeyChange,
-    onDropPropertyClick,
     uiSchema,
     schema,
     readonly,
     required,
+    registry,
+    // Destructure props we don't want to pass to div
+    description,
     rawErrors,
     rawHelp,
     rawDescription,
     hidden,
     onChange,
-    registry,
     ...divProps
   } = props;
   const isCheckbox = schema.type === "boolean";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `field-template mb-3 ${classNames || ""}`, ...divProps, children: [
-    displayLabel && !isCheckbox && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: id, className: "label", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "label-text font-medium", children: [
+  const uiOptions = (0, import_utils8.getUiOptions)(uiSchema);
+  const WrapIfAdditionalTemplate2 = (0, import_utils8.getTemplate)(
+    "WrapIfAdditionalTemplate",
+    registry,
+    uiOptions
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    WrapIfAdditionalTemplate2,
+    {
+      classNames,
+      disabled: divProps.disabled,
+      id,
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-error ml-1", children: "*" })
-    ] }) }),
-    children,
-    errors,
-    help
-  ] });
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
+      readonly,
+      required,
+      schema,
+      uiSchema,
+      registry,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `field-template mb-3 ${classNames || ""}`, ...divProps, children: [
+        displayLabel && !isCheckbox && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: id, className: "label", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "label-text font-medium", children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-error ml-1", children: "*" })
+        ] }) }),
+        children,
+        errors,
+        help
+      ] })
+    }
+  );
 }
 
 // src/templates/GridTemplate/GridTemplate.tsx
@@ -487,9 +515,19 @@ function GridTemplate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-wrap gap-4", ...rest, children });
 }
 
-// src/templates/ObjectFieldTemplate/ObjectFieldTemplate.tsx
-var import_utils8 = require("@rjsf/utils");
+// src/templates/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function MultiSchemaFieldTemplate(props) {
+  const { optionSchemaField, selector } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4 border rounded-sm shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mb-4", children: selector }),
+    optionSchemaField
+  ] });
+}
+
+// src/templates/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+var import_utils9 = require("@rjsf/utils");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -499,62 +537,66 @@ function ObjectFieldTemplate(props) {
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry
   } = props;
-  const uiOptions = (0, import_utils8.getUiOptions)(uiSchema);
-  const TitleFieldTemplate = (0, import_utils8.getTemplate)("TitleFieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = (0, import_utils8.getTemplate)(
+  const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
+  const TitleFieldTemplate = (0, import_utils9.getTemplate)("TitleFieldTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = (0, import_utils9.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  const isRoot = idSchema.$id === "root";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `form-control ${isRoot ? "bg-base-100 p-6 rounded-xl shadow-lg" : ""}`, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const isRoot = fieldPathId.$id === "root";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `form-control ${isRoot ? "bg-base-100 p-6 rounded-xl shadow-lg" : ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       TitleFieldTemplate,
       {
-        id: (0, import_utils8.titleId)(idSchema),
+        id: (0, import_utils9.titleId)(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils8.descriptionId)(idSchema),
+        id: (0, import_utils9.descriptionId)(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `grid grid-cols-1 gap-${description ? 3 : 4} ${isRoot ? "" : "mb-4"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `grid grid-cols-1 gap-${description ? 3 : 4} ${isRoot ? "" : "mb-4"}`, children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       properties.map(
-        (element, index) => element.hidden ? element.content : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        (element, index) => element.hidden ? element.content : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "div",
           {
-            className: idSchema.$id === "root" && element.name === "tasks" ? "mt-2" : "",
+            className: fieldPathId.$id === "root" && element.name === "tasks" ? "mt-2" : "",
             children: element.content
           },
-          `${idSchema.$id}-${element.name}-${index}`
+          `${fieldPathId.$id}-${element.name}-${index}`
         )
       ),
-      (0, import_utils8.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      (0, import_utils9.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         AddButton2,
         {
-          id: (0, import_utils8.buttonId)(idSchema, "add"),
+          id: (0, import_utils9.buttonId)(fieldPathId, "add"),
           className: "rjsf-object-property-expand btn btn-primary btn-sm",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -564,22 +606,61 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/templates/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      DaisyUIButton_default,
+      {
+        id,
+        registry,
+        iconType: "info",
+        icon: import_free_solid_svg_icons3.faPlus,
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("em", { id, children: label });
+}
+
 // src/templates/TitleField/TitleField.tsx
-var import_utils9 = require("@rjsf/utils");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_utils10 = require("@rjsf/utils");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function TitleField(props) {
-  const { id, title, uiSchema } = props;
-  const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id, className: "title-field mb-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "text-3xl font-bold text-primary mb-2", children: uiOptions.title || title }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "divider divider-primary" })
+  const { id, title, uiSchema, optionalDataControl } = props;
+  const uiOptions = (0, import_utils10.getUiOptions)(uiSchema);
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "text-3xl font-bold text-primary mb-2", children: uiOptions.title || title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-auto", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex justify-end", children: optionalDataControl })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { id, className: "title-field mb-6", children: [
+    heading,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "divider divider-primary my-0" })
   ] });
 }
 
 // src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-var import_react5 = require("react");
-var import_utils10 = require("@rjsf/utils");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_utils11 = require("@rjsf/utils");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -590,47 +671,48 @@ function WrapIfAdditionalTemplate(props) {
     readonly,
     required,
     schema,
-    onKeyChange,
-    onDropPropertyClick,
+    uiSchema,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     ...rest
   } = props;
-  const { translateString } = registry;
-  const handleBlur = (0, import_react5.useCallback)(
-    (event) => {
-      onKeyChange(event.target.value);
-    },
-    [onKeyChange]
-  );
-  const handleRemove = (0, import_react5.useCallback)(() => {
-    onDropPropertyClick(label)();
-  }, [onDropPropertyClick, label]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `wrap-if-additional-template ${classNames}`, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const additional = import_utils11.ADDITIONAL_PROPERTY_FLAG in schema;
+  const { templates, translateString } = registry;
+  const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
+  const keyLabel = translateString(import_utils11.TranslatableString.KeyLabel, [label]);
+  if (!additional) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: classNames, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `wrap-if-additional-template ${classNames}`, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-baseline", style: { justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: `${id}-key`, className: "label", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "label-text", children: keyLabel }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
         {
           type: "text",
           className: "input input-bordered",
           id: `${id}-key`,
-          onBlur: handleBlur,
+          onBlur: onKeyRenameBlur,
           defaultValue: label,
           disabled: disabled || readonly
         }
-      ),
-      schema.additionalProperties && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "button",
-        {
-          id: (0, import_utils10.buttonId)(id, "remove"),
-          className: "rjsf-array-item-remove btn btn-danger ml-2",
-          onClick: handleRemove,
-          disabled: disabled || readonly,
-          children: translateString(import_utils10.TranslatableString.RemoveButton)
-        }
       )
     ] }),
-    children
-  ] });
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex self-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      RemoveButton2,
+      {
+        id: (0, import_utils11.buttonId)(id, "remove"),
+        className: "rjsf-object-property-remove",
+        disabled: disabled || readonly,
+        onClick: onRemoveProperty,
+        uiSchema,
+        registry
+      }
+    ) })
+  ] }) });
 }
 
 // src/templates/Templates.tsx
@@ -654,7 +736,9 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -662,168 +746,42 @@ function generateTemplates() {
 var Templates_default = generateTemplates();
 
 // src/widgets/AltDateTimeWidget/AltDateTimeWidget.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function AltDateTimeWidget({
   time = true,
   ...props
 }) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AltDateWidget2, { time, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AltDateWidget2, { time, ...props });
 }
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/widgets/AltDateWidget/AltDateWidget.tsx
-var import_react6 = require("react");
-var import_utils11 = require("@rjsf/utils");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function readyForChange(state, time = false) {
-  return state.year && state.month && state.day && (!time || state.hour && state.minute && state.second);
-}
-function getDateElementProps(state, time, yearsRange, format3 = "YMD") {
-  const rangeOptions = yearsRange ?? [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2];
-  const formats = {
-    YMD: ["year", "month", "day"],
-    MDY: ["month", "day", "year"],
-    DMY: ["day", "month", "year"]
-  };
-  const dateElements = formats[format3].map((key) => ({
-    type: key,
-    value: state[key],
-    range: key === "year" ? rangeOptions : key === "month" ? [1, 12] : key === "day" ? [1, 31] : [0, 59]
-  }));
-  if (time) {
-    dateElements.push(
-      { type: "hour", value: state.hour, range: [0, 23] },
-      { type: "minute", value: state.minute, range: [0, 59] },
-      { type: "second", value: state.second, range: [0, 59] }
-    );
-  }
-  return dateElements;
-}
-function DateElement({
-  type,
-  range,
-  value,
-  select,
-  rootId,
-  name,
-  disabled,
-  readonly,
-  autofocus,
-  registry,
-  onBlur,
-  onFocus
-}) {
-  const id = `${rootId}_${type}`;
-  const { SelectWidget: SelectWidget2 } = registry.widgets;
-  const handleChange = (0, import_react6.useCallback)(
-    (value2) => {
-      select(type, value2);
-    },
-    [select, type]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    SelectWidget2,
-    {
-      schema: { type: "integer" },
-      id,
-      name,
-      className: "select select-bordered select-sm w-full",
-      options: { enumOptions: (0, import_utils11.dateRangeOptions)(range[0], range[1]) },
-      placeholder: type,
-      value,
-      disabled,
-      readonly,
-      autofocus,
-      onChange: handleChange,
-      onBlur,
-      onFocus,
-      registry,
-      label: "",
-      "aria-describedby": (0, import_utils11.ariaDescribedByIds)(rootId),
-      required: false
-    }
-  );
-}
-function convertToRJSFDateObject(dateObj) {
-  return {
-    year: dateObj.year ? parseInt(dateObj.year) : 0,
-    month: dateObj.month ? parseInt(dateObj.month) : 0,
-    day: dateObj.day ? parseInt(dateObj.day) : 0,
-    hour: dateObj.hour ? parseInt(dateObj.hour) : 0,
-    minute: dateObj.minute ? parseInt(dateObj.minute) : 0,
-    second: dateObj.second ? parseInt(dateObj.second) : 0
-  };
-}
-function AltDateWidget({
-  time = false,
-  disabled = false,
-  readonly = false,
-  autofocus = false,
-  options = {},
-  id,
-  name,
-  registry,
-  onBlur,
-  onFocus,
-  onChange,
-  value
-}) {
+var import_utils12 = require("@rjsf/utils");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function AltDateWidget(props) {
+  const {
+    disabled = false,
+    readonly = false,
+    autofocus = false,
+    options = {},
+    id,
+    name,
+    registry,
+    onBlur,
+    onFocus
+  } = props;
   const { translateString } = registry;
-  const [lastValue, setLastValue] = (0, import_react6.useState)(value);
-  const initialState = (0, import_utils11.parseDateString)(value, time);
-  const dateReducer = (state2, action) => {
-    return { ...state2, ...action };
-  };
-  const [state, setState] = (0, import_react6.useReducer)(dateReducer, initialState);
-  (0, import_react6.useEffect)(() => {
-    const rjsfDateObj = convertToRJSFDateObject(state);
-    const stateValue = (0, import_utils11.toDateString)(rjsfDateObj, time);
-    if (readyForChange(state, time) && stateValue !== value) {
-      onChange(stateValue);
-    } else if (lastValue !== value) {
-      setLastValue(value);
-      setState((0, import_utils11.parseDateString)(value, time));
-    }
-  }, [time, value, onChange, state, lastValue]);
-  const handleChange = (0, import_react6.useCallback)((property, value2) => {
-    setState({ [property]: value2 });
-  }, []);
-  const handleSetNow = (0, import_react6.useCallback)(
-    (event) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      const nextState = (0, import_utils11.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), time);
-      const rjsfDateObj = convertToRJSFDateObject(nextState);
-      onChange((0, import_utils11.toDateString)(rjsfDateObj, time));
-    },
-    [disabled, readonly, time, onChange]
-  );
-  const handleClear = (0, import_react6.useCallback)(
-    (event) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      onChange(void 0);
-    },
-    [disabled, readonly, onChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid grid-cols-3 gap-2", children: getDateElementProps(
-      state,
-      time,
-      options.yearsRange,
-      options.format
-    ).map((elemProps, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "form-control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "label", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "label-text capitalize", children: elemProps.type }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        DateElement,
+  const { elements, handleChange, handleClear, handleSetNow } = (0, import_utils12.useAltDateWidgetProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-3 gap-2", children: elements.map((elemProps, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "form-control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "label", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "label-text capitalize", children: elemProps.type }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_utils12.DateElement,
         {
           rootId: id,
           name,
+          className: "select select-bordered select-sm",
           select: handleChange,
           type: elemProps.type,
           range: elemProps.range,
@@ -837,25 +795,25 @@ function AltDateWidget({
         }
       )
     ] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-start space-x-2", children: [
-      (options.hideNowButton !== void 0 ? !options.hideNowButton : true) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-start space-x-2", children: [
+      (options.hideNowButton !== void 0 ? !options.hideNowButton : true) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "button",
         {
           type: "button",
           className: "btn btn-sm btn-primary",
           onClick: handleSetNow,
           disabled: disabled || readonly,
-          children: translateString(import_utils11.TranslatableString.NowLabel)
+          children: translateString(import_utils12.TranslatableString.NowLabel)
         }
       ),
-      (options.hideClearButton !== void 0 ? !options.hideClearButton : true) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      (options.hideClearButton !== void 0 ? !options.hideClearButton : true) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "button",
         {
           type: "button",
           className: "btn btn-sm btn-secondary",
           onClick: handleClear,
           disabled: disabled || readonly,
-          children: translateString(import_utils11.TranslatableString.ClearLabel)
+          children: translateString(import_utils12.TranslatableString.ClearLabel)
         }
       )
     ] })
@@ -863,12 +821,13 @@ function AltDateWidget({
 }
 
 // src/widgets/CheckboxWidget/CheckboxWidget.tsx
-var import_react7 = require("react");
-var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_utils13 = require("@rjsf/utils");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -883,33 +842,34 @@ function CheckboxWidget(props) {
     onFocus,
     onBlur
   } = props;
-  const DescriptionFieldTemplate = (0, import_utils12.getTemplate)(
+  const DescriptionFieldTemplate = (0, import_utils13.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     options
   );
   const description = options.description || schema.description;
-  const handleFocus = (0, import_react7.useCallback)(() => {
+  const handleFocus = (0, import_react4.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  const handleBlur = (0, import_react7.useCallback)(() => {
+  const handleBlur = (0, import_react4.useCallback)(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (event) => {
       onChange(event.target.checked);
     },
     [onChange]
   );
-  const input = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const input = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "input",
     {
       type: "checkbox",
       id,
+      name: htmlName || id,
       checked: value,
       required,
       disabled: disabled || readonly,
@@ -919,32 +879,33 @@ function CheckboxWidget(props) {
       className: "checkbox"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "form-control", children: [
-    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "form-control", children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils12.descriptionId)(id),
+        id: (0, import_utils13.descriptionId)(id),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    hideLabel || !label ? input : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "label cursor-pointer justify-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mr-2", children: input }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "label-text", children: [
+    hideLabel || !label ? input : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "label cursor-pointer justify-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mr-2", children: input }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "label-text", children: [
         label,
-        required && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-error ml-1", children: "*" })
+        required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-error ml-1", children: "*" })
       ] })
     ] })
   ] });
 }
 
 // src/widgets/CheckboxesWidget/CheckboxesWidget.tsx
-var import_react8 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function CheckboxesWidget({
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -956,7 +917,7 @@ function CheckboxesWidget({
 }) {
   const { enumOptions } = options;
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-  const isChecked = (0, import_react8.useCallback)(
+  const isChecked = (0, import_react5.useCallback)(
     (option) => {
       if (!Array.isArray(value)) {
         return false;
@@ -968,7 +929,7 @@ function CheckboxesWidget({
     },
     [value, isEnumeratedObject]
   );
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react5.useCallback)(
     (event) => {
       const index = Number(event.target.dataset.index);
       const option = enumOptions?.[index];
@@ -985,7 +946,7 @@ function CheckboxesWidget({
     },
     [onChange, value, isChecked, isEnumeratedObject, enumOptions]
   );
-  const handleFocus = (0, import_react8.useCallback)(
+  const handleFocus = (0, import_react5.useCallback)(
     (event) => {
       if (onFocus) {
         const index = Number(event.target.dataset.index);
@@ -997,7 +958,7 @@ function CheckboxesWidget({
     },
     [onFocus, id, enumOptions]
   );
-  const handleBlur = (0, import_react8.useCallback)(
+  const handleBlur = (0, import_react5.useCallback)(
     (event) => {
       if (onBlur) {
         const index = Number(event.target.dataset.index);
@@ -1009,14 +970,14 @@ function CheckboxesWidget({
     },
     [onBlur, id, enumOptions]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center cursor-pointer gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center cursor-pointer gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "input",
       {
         type: "checkbox",
         id: `${id}-${option.value}`,
         className: "checkbox",
-        name: id,
+        name: htmlName || id,
         checked: isChecked(option),
         required,
         disabled: disabled || readonly,
@@ -1026,25 +987,25 @@ function CheckboxesWidget({
         onBlur: handleBlur
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "label-text", children: option.label })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "label-text", children: option.label })
   ] }, option.value)) }) });
 }
 
 // src/widgets/DateTimeWidget/DateTimeWidget.tsx
-var import_react9 = require("react");
-var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
+var import_react6 = require("react");
+var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_date_fns = require("date-fns");
 var import_react_day_picker = require("react-day-picker");
 var import_style = require("react-day-picker/dist/style.css");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function useDatePickerState(initialDate) {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [month, setMonth] = (0, import_react9.useState)(initialDate ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const [month, setMonth] = (0, import_react6.useState)(initialDate ?? /* @__PURE__ */ new Date());
   return { isOpen, setIsOpen, month, setMonth };
 }
 function useClickOutside(ref, callback) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -1089,11 +1050,11 @@ function DateTimePickerPopup({ selectedDate, month, onMonthChange, onSelect, onT
     ...dayPickerStyles.modifiers,
     "custom-today": "btn btn-outline btn-info min-h-0 h-full"
   };
-  const handleClick = (0, import_react9.useCallback)((e) => {
+  const handleClick = (0, import_react6.useCallback)((e) => {
     e.stopPropagation();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_react_day_picker.DayPicker,
       {
         mode: "single",
@@ -1110,9 +1071,9 @@ function DateTimePickerPopup({ selectedDate, month, onMonthChange, onSelect, onT
         modifiersClassNames: customModifiersClassNames
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mt-3 border-t border-base-300 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "form-control w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "label", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "label-text", children: "Time" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-3 border-t border-base-300 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "form-control w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { className: "label", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "label-text", children: "Time" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
           type: "time",
@@ -1125,17 +1086,17 @@ function DateTimePickerPopup({ selectedDate, month, onMonthChange, onSelect, onT
     ] }) })
   ] });
 }
-var MemoizedDateTimePickerPopup = (0, import_react9.memo)(DateTimePickerPopup);
+var MemoizedDateTimePickerPopup = (0, import_react6.memo)(DateTimePickerPopup);
 function DateTimeWidget(props) {
   const { id, value, onChange, onFocus, onBlur, schema } = props;
-  const initialDate = (0, import_react9.useMemo)(() => value ? new Date(value) : void 0, [value]);
-  const [localDate, setLocalDate] = (0, import_react9.useState)(initialDate);
-  (0, import_react9.useEffect)(() => {
+  const initialDate = (0, import_react6.useMemo)(() => value ? new Date(value) : void 0, [value]);
+  const [localDate, setLocalDate] = (0, import_react6.useState)(initialDate);
+  (0, import_react6.useEffect)(() => {
     setLocalDate(initialDate);
   }, [initialDate]);
   const { isOpen, setIsOpen, month, setMonth } = useDatePickerState(initialDate);
-  const containerRef = (0, import_react9.useRef)(null);
-  const inputRef = (0, import_react9.useRef)(null);
+  const containerRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
   useClickOutside(containerRef, () => {
     if (isOpen) {
       setIsOpen(false);
@@ -1145,13 +1106,13 @@ function DateTimeWidget(props) {
       }
     }
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (localDate) {
       setMonth(localDate);
     }
   }, [localDate, setMonth]);
-  const handleMonthChange = (0, import_react9.useCallback)((date) => setMonth(date), [setMonth]);
-  const handleSelect = (0, import_react9.useCallback)(
+  const handleMonthChange = (0, import_react6.useCallback)((date) => setMonth(date), [setMonth]);
+  const handleSelect = (0, import_react6.useCallback)(
     (date) => {
       if (date) {
         if (localDate) {
@@ -1162,7 +1123,7 @@ function DateTimeWidget(props) {
     },
     [localDate]
   );
-  const handleTimeChange = (0, import_react9.useCallback)(
+  const handleTimeChange = (0, import_react6.useCallback)(
     (e) => {
       if (localDate) {
         const [hours, minutes] = e.target.value.split(":");
@@ -1173,7 +1134,7 @@ function DateTimeWidget(props) {
     },
     [localDate]
   );
-  const togglePicker = (0, import_react9.useCallback)(
+  const togglePicker = (0, import_react6.useCallback)(
     (e) => {
       e.stopPropagation();
       setIsOpen((prev) => !prev);
@@ -1183,17 +1144,17 @@ function DateTimeWidget(props) {
     },
     [isOpen, id, onFocus, setIsOpen, value]
   );
-  const handleFocus = (0, import_react9.useCallback)(() => {
+  const handleFocus = (0, import_react6.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [id, onFocus, value]);
-  const handleBlur = (0, import_react9.useCallback)(() => {
+  const handleBlur = (0, import_react6.useCallback)(() => {
     if (!isOpen && onBlur) {
       onBlur(id, value);
     }
   }, [id, onBlur, value, isOpen]);
-  const handleKeyDown = (0, import_react9.useCallback)(
+  const handleKeyDown = (0, import_react6.useCallback)(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         togglePicker(e);
@@ -1201,10 +1162,10 @@ function DateTimeWidget(props) {
     },
     [togglePicker]
   );
-  const handleContainerClick = (0, import_react9.useCallback)((e) => {
+  const handleContainerClick = (0, import_react6.useCallback)((e) => {
     e.stopPropagation();
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -1215,16 +1176,16 @@ function DateTimeWidget(props) {
     };
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
-  }, [id, isOpen, onBlur, value]);
-  const handleDoneClick = (0, import_react9.useCallback)(() => {
+  }, [id, isOpen, setIsOpen, onBlur, value]);
+  const handleDoneClick = (0, import_react6.useCallback)(() => {
     setIsOpen(false);
     onChange(localDate ? localDate.toISOString() : "");
     if (onBlur) {
       onBlur(id, value);
     }
     inputRef.current?.focus();
-  }, [localDate, onChange, onBlur, id, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "form-control my-4 w-full relative", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  }, [localDate, onChange, onBlur, id, value, setIsOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "form-control my-4 w-full relative", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: "w-full",
@@ -1234,7 +1195,7 @@ function DateTimeWidget(props) {
       onBlur: handleBlur,
       ref: inputRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             id,
@@ -1245,19 +1206,19 @@ function DateTimeWidget(props) {
             "aria-expanded": isOpen,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: localDate && (0, import_date_fns.isValid)(localDate) ? "" : "text-base-content/50", children: localDate && (0, import_date_fns.isValid)(localDate) ? (0, import_date_fns.format)(localDate, "PP p") : schema.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faCalendar, className: "ml-2 h-4 w-4 text-primary" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: localDate && (0, import_date_fns.isValid)(localDate) ? "" : "text-base-content/50", children: localDate && (0, import_date_fns.isValid)(localDate) ? (0, import_date_fns.format)(localDate, "PP p") : schema.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons4.faCalendar, className: "ml-2 h-4 w-4 text-primary" })
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             ref: containerRef,
             className: "absolute z-[100] mt-2 w-full max-w-xs bg-base-100 border border-base-300 shadow-lg rounded-box",
             onClick: handleContainerClick,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 MemoizedDateTimePickerPopup,
                 {
                   selectedDate: localDate,
@@ -1267,7 +1228,7 @@ function DateTimeWidget(props) {
                   onTimeChange: handleTimeChange
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "p-3 flex justify-end border-t border-base-300", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: "btn btn-sm btn-primary", onClick: handleDoneClick, children: "Done" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "p-3 flex justify-end border-t border-base-300", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "btn btn-sm btn-primary", onClick: handleDoneClick, children: "Done" }) })
             ]
           }
         )
@@ -1277,20 +1238,20 @@ function DateTimeWidget(props) {
 }
 
 // src/widgets/DateWidget/DateWidget.tsx
-var import_react10 = require("react");
-var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
+var import_react7 = require("react");
+var import_free_solid_svg_icons5 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_date_fns2 = require("date-fns");
 var import_react_day_picker2 = require("react-day-picker");
 var import_style2 = require("react-day-picker/dist/style.css");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function useDatePickerState2(initialDate) {
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const [month, setMonth] = (0, import_react10.useState)(initialDate ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const [month, setMonth] = (0, import_react7.useState)(initialDate ?? /* @__PURE__ */ new Date());
   return { isOpen, setIsOpen, month, setMonth };
 }
 function useClickOutside2(ref, callback) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -1335,7 +1296,7 @@ function DatePickerPopup({ selectedDate, month, onMonthChange, onSelect }) {
     ...dayPickerStyles2.modifiers,
     "custom-today": "btn btn-outline btn-info min-h-0 h-full"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "p-3", style: { minWidth: "320px", minHeight: "350px" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "p-3", style: { minWidth: "320px", minHeight: "350px" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_react_day_picker2.DayPicker,
     {
       mode: "single",
@@ -1353,17 +1314,17 @@ function DatePickerPopup({ selectedDate, month, onMonthChange, onSelect }) {
     }
   ) });
 }
-var MemoizedDatePickerPopup = (0, import_react10.memo)(DatePickerPopup);
+var MemoizedDatePickerPopup = (0, import_react7.memo)(DatePickerPopup);
 function DateWidget(props) {
   const { id, value, onChange, onFocus, onBlur, schema } = props;
-  const initialDate = (0, import_react10.useMemo)(() => value ? new Date(value) : void 0, [value]);
-  const [localDate, setLocalDate] = (0, import_react10.useState)(initialDate);
-  (0, import_react10.useEffect)(() => {
+  const initialDate = (0, import_react7.useMemo)(() => value ? new Date(value) : void 0, [value]);
+  const [localDate, setLocalDate] = (0, import_react7.useState)(initialDate);
+  (0, import_react7.useEffect)(() => {
     setLocalDate(initialDate);
   }, [initialDate]);
   const { isOpen, setIsOpen, month, setMonth } = useDatePickerState2(initialDate);
-  const containerRef = (0, import_react10.useRef)(null);
-  const inputRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react7.useRef)(null);
+  const inputRef = (0, import_react7.useRef)(null);
   useClickOutside2(containerRef, () => {
     if (isOpen) {
       setIsOpen(false);
@@ -1373,19 +1334,19 @@ function DateWidget(props) {
       }
     }
   });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (localDate) {
       setMonth(localDate);
     }
   }, [localDate, setMonth]);
-  const handleMonthChange = (0, import_react10.useCallback)((date) => setMonth(date), [setMonth]);
-  const handleSelect = (0, import_react10.useCallback)((date) => {
+  const handleMonthChange = (0, import_react7.useCallback)((date) => setMonth(date), [setMonth]);
+  const handleSelect = (0, import_react7.useCallback)((date) => {
     if (date) {
       date.setHours(0, 0, 0, 0);
       setLocalDate(date);
     }
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let portalContainer = document.getElementById("date-picker-portal");
     if (!portalContainer) {
       portalContainer = document.createElement("div");
@@ -1417,7 +1378,7 @@ function DateWidget(props) {
     }
     return { doc, win };
   };
-  const renderCalendar = (0, import_react10.useCallback)(() => {
+  const renderCalendar = (0, import_react7.useCallback)(() => {
     if (!containerRef.current || !inputRef.current) {
       return;
     }
@@ -1435,7 +1396,7 @@ function DateWidget(props) {
     }
     containerRef.current.style.zIndex = "99999";
   }, [containerRef, inputRef]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -1447,7 +1408,7 @@ function DateWidget(props) {
       window.removeEventListener("scroll", renderCalendar);
     };
   }, [isOpen, renderCalendar]);
-  const togglePicker = (0, import_react10.useCallback)(
+  const togglePicker = (0, import_react7.useCallback)(
     (e) => {
       e.stopPropagation();
       setIsOpen((prev) => !prev);
@@ -1457,17 +1418,17 @@ function DateWidget(props) {
     },
     [isOpen, id, onFocus, setIsOpen, value]
   );
-  const handleFocus = (0, import_react10.useCallback)(() => {
+  const handleFocus = (0, import_react7.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [id, onFocus, value]);
-  const handleBlur = (0, import_react10.useCallback)(() => {
+  const handleBlur = (0, import_react7.useCallback)(() => {
     if (!isOpen && onBlur) {
       onBlur(id, value);
     }
   }, [id, onBlur, value, isOpen]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -1478,16 +1439,16 @@ function DateWidget(props) {
     };
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
-  }, [id, isOpen, onBlur, value]);
-  const handleDoneClick = (0, import_react10.useCallback)(() => {
+  }, [id, isOpen, setIsOpen, onBlur, value]);
+  const handleDoneClick = (0, import_react7.useCallback)(() => {
     setIsOpen(false);
     onChange(localDate ? localDate.toISOString() : "");
     if (onBlur) {
       onBlur(id, value);
     }
     inputRef.current?.focus();
-  }, [localDate, onChange, onBlur, id, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "form-control my-4 w-full relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  }, [localDate, onChange, onBlur, id, value, setIsOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "form-control my-4 w-full relative", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: "w-full",
@@ -1501,7 +1462,7 @@ function DateWidget(props) {
       onBlur: handleBlur,
       ref: inputRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "div",
           {
             id,
@@ -1512,12 +1473,12 @@ function DateWidget(props) {
             "aria-expanded": isOpen,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: localDate && (0, import_date_fns2.isValid)(localDate) ? "" : "text-base-content/50", children: localDate && (0, import_date_fns2.isValid)(localDate) ? (0, import_date_fns2.format)(localDate, "PP") : schema.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons4.faCalendar, className: "ml-2 h-4 w-4 text-primary" })
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: localDate && (0, import_date_fns2.isValid)(localDate) ? "" : "text-base-content/50", children: localDate && (0, import_date_fns2.isValid)(localDate) ? (0, import_date_fns2.format)(localDate, "PP") : schema.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons5.faCalendar, className: "ml-2 h-4 w-4 text-primary" })
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "div",
           {
             ref: containerRef,
@@ -1528,7 +1489,7 @@ function DateWidget(props) {
             },
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 MemoizedDatePickerPopup,
                 {
                   selectedDate: localDate,
@@ -1537,7 +1498,7 @@ function DateWidget(props) {
                   onSelect: handleSelect
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "p-3 flex justify-end border-t border-base-300", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: "btn btn-sm btn-primary", onClick: handleDoneClick, children: "Done" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "p-3 flex justify-end border-t border-base-300", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "btn btn-sm btn-primary", onClick: handleDoneClick, children: "Done" }) })
             ]
           }
         )
@@ -1546,65 +1507,12 @@ function DateWidget(props) {
   ) });
 }
 
-// src/widgets/FileWidget/FileWidget.tsx
-var import_react11 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function FileWidget(props) {
-  const { id, required, disabled, readonly, schema, onChange, onFocus, onBlur, options = {} } = props;
-  const isMulti = schema.type === "array" || Boolean(options.multiple);
-  const accept = typeof options.accept === "string" ? options.accept : void 0;
-  const handleChange = (0, import_react11.useCallback)(
-    (event) => {
-      if (!event.target.files) {
-        return;
-      }
-      const fileList = Array.from(event.target.files);
-      if (isMulti) {
-        onChange(fileList);
-      } else {
-        onChange(fileList[0] || null);
-      }
-    },
-    [onChange, isMulti]
-  );
-  const handleFocus = (0, import_react11.useCallback)(
-    (event) => {
-      if (onFocus) {
-        onFocus(id, event.target.files ? Array.from(event.target.files) : null);
-      }
-    },
-    [onFocus, id]
-  );
-  const handleBlur = (0, import_react11.useCallback)(
-    (event) => {
-      if (onBlur) {
-        onBlur(id, event.target.files ? Array.from(event.target.files) : null);
-      }
-    },
-    [onBlur, id]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "input",
-    {
-      id,
-      type: "file",
-      className: "file-input w-full",
-      required,
-      disabled: disabled || readonly,
-      onChange: handleChange,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      multiple: isMulti,
-      accept
-    }
-  );
-}
-
 // src/widgets/RadioWidget/RadioWidget.tsx
-var import_react12 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -1625,7 +1533,7 @@ function RadioWidget({
     }
     return value === option.value;
   };
-  const handleFocus = (0, import_react12.useCallback)(
+  const handleFocus = (0, import_react8.useCallback)(
     (event) => {
       if (onFocus) {
         const index = Number(event.target.dataset.index);
@@ -1635,7 +1543,7 @@ function RadioWidget({
     },
     [onFocus, id, enumOptions]
   );
-  const handleBlur = (0, import_react12.useCallback)(
+  const handleBlur = (0, import_react8.useCallback)(
     (event) => {
       if (onBlur) {
         const index = Number(event.target.dataset.index);
@@ -1645,7 +1553,7 @@ function RadioWidget({
     },
     [onBlur, id, enumOptions]
   );
-  const handleChange = (0, import_react12.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (event) => {
       const index = Number(event.target.dataset.index);
       const option = enumOptions?.[index];
@@ -1656,14 +1564,14 @@ function RadioWidget({
     },
     [onChange, isEnumeratedObject, enumOptions]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center cursor-pointer gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center cursor-pointer gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "input",
       {
         type: "radio",
         id: `${id}-${option.value}`,
         className: "radio",
-        name: id,
+        name: htmlName || id,
         value: getValue(option),
         checked: isChecked(option),
         required,
@@ -1674,13 +1582,13 @@ function RadioWidget({
         onBlur: handleBlur
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "label-text", children: option.label })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "label-text", children: option.label })
   ] }, option.value)) }) });
 }
 
 // src/widgets/RangeWidget/RangeWidget.tsx
-var import_react13 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function RangeWidget({
   id,
   value,
@@ -1702,14 +1610,14 @@ function RangeWidget({
       onBlur(id, event.target.value);
     }
   };
-  const handleChange = (0, import_react13.useCallback)(
+  const handleChange = (0, import_react9.useCallback)(
     (event) => {
       onChange(event.target.value);
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "input",
       {
         type: "range",
@@ -1726,13 +1634,13 @@ function RangeWidget({
         onBlur: handleBlur
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "label-text ml-4", children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "label-text ml-4", children: value })
   ] }) });
 }
 
 // src/widgets/RatingWidget/RatingWidget.tsx
-var import_react14 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function RatingWidget({
   id,
   value,
@@ -1751,13 +1659,13 @@ function RatingWidget({
   const min = schema.minimum || 0;
   const maskClass = shape === "heart" ? "mask-heart" : "mask-star-2";
   const sizeClass = size === "md" ? "" : `rating-${size}`;
-  const _onChange = (0, import_react14.useCallback)(
+  const _onChange = (0, import_react10.useCallback)(
     ({ target: { value: value2 } }) => {
       onChange(parseInt(value2));
     },
     [onChange]
   );
-  const handleFocus = (0, import_react14.useCallback)(
+  const handleFocus = (0, import_react10.useCallback)(
     (event) => {
       if (onFocus) {
         const starValue = Number(event.target.value);
@@ -1766,7 +1674,7 @@ function RatingWidget({
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react14.useCallback)(
+  const handleBlur = (0, import_react10.useCallback)(
     (event) => {
       if (onBlur) {
         const starValue = Number(event.target.value);
@@ -1783,9 +1691,9 @@ function RatingWidget({
     const colorIdx = Math.min(index, colors.length - 1);
     return `bg-${colors[colorIdx]}-400`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "form-control w-full", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `rating gap-1 ${sizeClass}`, children: [...Array(numStars)].map((_, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "form-control w-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `rating gap-1 ${sizeClass}`, children: [...Array(numStars)].map((_, index) => {
     const starValue = min + index;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "input",
       {
         type: "radio",
@@ -1807,9 +1715,9 @@ function RatingWidget({
 }
 
 // src/widgets/SelectWidget/SelectWidget.tsx
-var import_react15 = require("react");
-var import_utils13 = require("@rjsf/utils");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_utils14 = require("@rjsf/utils");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function SelectWidget({
   schema,
   id,
@@ -1839,7 +1747,7 @@ function SelectWidget({
     return String(val);
   };
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-  const handleOptionClick = (0, import_react15.useCallback)(
+  const handleOptionClick = (0, import_react11.useCallback)(
     (event) => {
       const index = Number(event.currentTarget.dataset.value);
       if (isNaN(index)) {
@@ -1847,40 +1755,40 @@ function SelectWidget({
       }
       if (multiple) {
         const currentValue = Array.isArray(value) ? value : [];
-        const optionValue = isEnumeratedObject ? enumOptions[index].value : (0, import_utils13.enumOptionsValueForIndex)(String(index), enumOptions, optEmptyVal);
+        const optionValue = isEnumeratedObject ? enumOptions[index].value : (0, import_utils14.enumOptionsValueForIndex)(String(index), enumOptions, optEmptyVal);
         const newValue = currentValue.includes(optionValue) ? currentValue.filter((v) => v !== optionValue) : [...currentValue, optionValue];
         onChange(newValue);
       } else {
         onChange(
-          isEnumeratedObject ? enumOptions[index].value : (0, import_utils13.enumOptionsValueForIndex)(String(index), enumOptions, optEmptyVal)
+          isEnumeratedObject ? enumOptions[index].value : (0, import_utils14.enumOptionsValueForIndex)(String(index), enumOptions, optEmptyVal)
         );
       }
     },
     [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange]
   );
-  const _onBlur = (0, import_react15.useCallback)(
+  const _onBlur = (0, import_react11.useCallback)(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
-        onBlur(id, (0, import_utils13.enumOptionsValueForIndex)(dataValue, enumOptions, optEmptyVal));
+        onBlur(id, (0, import_utils14.enumOptionsValueForIndex)(dataValue, enumOptions, optEmptyVal));
       }
     },
     [onBlur, id, enumOptions, optEmptyVal]
   );
-  const _onFocus = (0, import_react15.useCallback)(
+  const _onFocus = (0, import_react11.useCallback)(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
-        onFocus(id, (0, import_utils13.enumOptionsValueForIndex)(dataValue, enumOptions, optEmptyVal));
+        onFocus(id, (0, import_utils14.enumOptionsValueForIndex)(dataValue, enumOptions, optEmptyVal));
       }
     },
     [onFocus, id, enumOptions, optEmptyVal]
   );
-  const selectedIndexes = (0, import_utils13.enumOptionsIndexForValue)(value, enumOptions, multiple);
+  const selectedIndexes = (0, import_utils14.enumOptionsIndexForValue)(value, enumOptions, multiple);
   const selectedValues = Array.isArray(selectedIndexes) ? selectedIndexes : [selectedIndexes];
   const optionsList = enumOptions || (Array.isArray(schema.examples) ? schema.examples.map((example) => ({ value: example, label: example })) : []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "form-control w-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "dropdown w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "form-control w-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "dropdown w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "div",
       {
         tabIndex: 0,
@@ -1889,12 +1797,12 @@ function SelectWidget({
         onBlur: _onBlur,
         onFocus: _onFocus,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate", children: selectedValues.length > 0 ? selectedValues.map((index) => optionsList[Number(index)]?.label).join(", ") : placeholder || label || "Select..." }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ml-2", children: "\u25BC" })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "truncate", children: selectedValues.length > 0 ? selectedValues.map((index) => optionsList[Number(index)]?.label).join(", ") : placeholder || label || "Select..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ml-2", children: "\u25BC" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg", children: optionsList.map(({ label: label2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg", children: optionsList.map(({ label: label2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "li",
       {
         role: "button",
@@ -1902,8 +1810,8 @@ function SelectWidget({
         className: `px-4 py-2 hover:bg-base-200 cursor-pointer ${selectedValues.includes(String(i)) ? "bg-primary/10" : ""}`,
         onClick: handleOptionClick,
         "data-value": i,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
-          multiple && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+          multiple && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "input",
             {
               type: "checkbox",
@@ -1912,7 +1820,7 @@ function SelectWidget({
               readOnly: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: isEnumeratedObject ? label2 : getDisplayValue(label2) })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: isEnumeratedObject ? label2 : getDisplayValue(label2) })
         ] })
       },
       i
@@ -1921,11 +1829,11 @@ function SelectWidget({
 }
 
 // src/widgets/TextareaWidget/TextareaWidget.tsx
-var import_react16 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function TextareaWidget(props) {
-  const { id, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
-  const handleFocus = (0, import_react16.useCallback)(
+  const { id, htmlName, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
+  const handleFocus = (0, import_react12.useCallback)(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.value);
@@ -1933,7 +1841,7 @@ function TextareaWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react16.useCallback)(
+  const handleBlur = (0, import_react12.useCallback)(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.value);
@@ -1941,17 +1849,18 @@ function TextareaWidget(props) {
     },
     [onBlur, id]
   );
-  const handleChange = (0, import_react16.useCallback)(
+  const handleChange = (0, import_react12.useCallback)(
     (event) => {
       onChange(event.target.value);
     },
     [onChange]
   );
   const rows = options?.rows || 5;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "textarea",
     {
       id,
+      name: htmlName || id,
       value: value || "",
       required,
       disabled: disabled || readonly,
@@ -1966,11 +1875,11 @@ function TextareaWidget(props) {
 }
 
 // src/widgets/TimeWidget/TimeWidget.tsx
-var import_react17 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function TimeWidget(props) {
   const { id, value, onChange, onFocus, onBlur, required, disabled, readonly } = props;
-  const handleFocus = (0, import_react17.useCallback)(
+  const handleFocus = (0, import_react13.useCallback)(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.value);
@@ -1978,7 +1887,7 @@ function TimeWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react17.useCallback)(
+  const handleBlur = (0, import_react13.useCallback)(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.value);
@@ -1986,13 +1895,13 @@ function TimeWidget(props) {
     },
     [onBlur, id]
   );
-  const handleChange = (0, import_react17.useCallback)(
+  const handleChange = (0, import_react13.useCallback)(
     (event) => {
       onChange(event.target.value);
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "input",
     {
       type: "time",
@@ -2010,27 +1919,27 @@ function TimeWidget(props) {
 }
 
 // src/widgets/ToggleWidget/ToggleWidget.tsx
-var import_react18 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ToggleWidget({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, options }) {
-  const _onChange = (0, import_react18.useCallback)(
+  const _onChange = (0, import_react14.useCallback)(
     ({ target: { checked } }) => onChange(checked),
     [onChange]
   );
-  const handleFocus = (0, import_react18.useCallback)(() => {
+  const handleFocus = (0, import_react14.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  const handleBlur = (0, import_react18.useCallback)(() => {
+  const handleBlur = (0, import_react14.useCallback)(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
   const { size = "md" } = options;
   const sizeClass = size !== "md" ? `toggle-${size}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "cursor-pointer label my-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "cursor-pointer label my-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "input",
       {
         type: "checkbox",
@@ -2045,7 +1954,7 @@ function ToggleWidget({ id, value, required, disabled, readonly, autofocus, onCh
         className: `toggle ${sizeClass}`
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "label-text", children: options.label })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "label-text", children: options.label })
   ] }) });
 }
 
@@ -2058,7 +1967,6 @@ function generateWidgets() {
     CheckboxWidget,
     DateTimeWidget,
     DateWidget,
-    FileWidget,
     RadioWidget,
     RangeWidget,
     RatingWidget,
@@ -2071,7 +1979,7 @@ function generateWidgets() {
 var Widgets_default = generateWidgets;
 
 // src/theme/Theme.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function generateTheme() {
   const { fields } = (0, import_core2.getDefaultRegistry)();
   const generatedWidgets = generateWidgets();
@@ -2087,29 +1995,29 @@ function generateTheme() {
 }
 var Theme = generateTheme();
 var Theme_default = Theme;
-var ThemeContext = (0, import_react19.createContext)({
+var ThemeContext = (0, import_react15.createContext)({
   theme: "night",
   setTheme: () => {
   }
 });
 function ThemeProvider({ children }) {
-  const [theme, setTheme] = (0, import_react19.useState)(() => {
+  const [theme, setTheme] = (0, import_react15.useState)(() => {
     try {
       return localStorage.getItem("daisyui-theme") || "cupcake";
     } catch {
       return "cupcake";
     }
   });
-  const handleSetTheme = (0, import_react19.useCallback)((newTheme) => {
+  const handleSetTheme = (0, import_react15.useCallback)((newTheme) => {
     try {
       localStorage.setItem("daisyui-theme", newTheme);
       setTheme(newTheme);
     } catch {
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ThemeContext.Provider, { value: { theme, setTheme: handleSetTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ThemeContext.Provider, { value: { theme, setTheme: handleSetTheme }, children });
 }
-var useTheme = () => (0, import_react19.useContext)(ThemeContext);
+var useTheme = () => (0, import_react15.useContext)(ThemeContext);
 
 // src/DaisyUIForm.tsx
 var import_core3 = require("@rjsf/core");
@@ -2117,8 +2025,8 @@ var DaisyUIForm = (0, import_core3.withTheme)(Theme_default);
 var DaisyUIForm_default = DaisyUIForm;
 
 // src/DaisyUIFrameProvider.tsx
-var import_react20 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function DaisyUIFrameComponent(props) {
   const { children, subtheme = {}, document: document2 } = props;
   const theme = (() => {
@@ -2132,7 +2040,7 @@ function DaisyUIFrameComponent(props) {
       return "cupcake";
     }
   })();
-  (0, import_react20.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (document2) {
       const configScript = document2.createElement("script");
       configScript.textContent = `
@@ -2167,14 +2075,14 @@ function DaisyUIFrameComponent(props) {
     }
     return void 0;
   }, [document2]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { "data-theme": theme, className: "daisy-ui-theme", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { "data-theme": theme, className: "daisy-ui-theme", children });
 }
 var __createDaisyUIFrameProvider = (props) => {
   return function DaisyUIFrame({ document: document2 }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DaisyUIFrameComponent, { document: document2, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DaisyUIFrameComponent, { document: document2, ...props });
   };
 };
 
 // src/index.ts
 var index_default = (0, import_core4.withTheme)(Theme_default);
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map