form-builder-pro 1.2.3 → 1.2.5

package/dist/index.mjs

@@ -8619,12 +8619,14 @@ var SectionList = class {
 // src/builder/FormBuilder.ts
 var advancedCssPanelState = /* @__PURE__ */ new Map();
 var FormBuilder = class {
-  // Cache to detect meaningful changes
+  // For requestAnimationFrame debouncing
   constructor(container, options = {}) {
     __publicField(this, "container");
     __publicField(this, "unsubscribe");
     __publicField(this, "options");
     __publicField(this, "lastRenderedSchemaHash", "");
+    // Cache to detect meaningful changes
+    __publicField(this, "pendingRenderId", null);
     __publicField(this, "activeTab", "fields");
     if (!container) {
       throw new Error("Builder container not found. Please ensure the container element exists before initializing FormBuilder.");
@@ -8782,34 +8784,43 @@ var FormBuilder = class {
   }
   setupSubscriptions() {
     let lastPreviewMode = null;
-    this.unsubscribe = formStore.subscribe(() => {
+    const performRender = () => {
+      this.pendingRenderId = null;
       const state = formStore.getState();
       const previewModeChanged = lastPreviewMode !== null && lastPreviewMode !== state.isPreviewMode;
       lastPreviewMode = state.isPreviewMode;
       const schemaHash = JSON.stringify({
         sections: state.schema.sections.map((s) => ({
           id: s.id,
-          title: s.title,
+          // Exclude title - prevents re-renders on section name typing
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
-            label: f.label,
+            // Exclude label - prevents re-renders on field name typing
             layout: f.layout,
-            width: f.width
-            // Exclude frequently changing text (placeholder, etc.) to prevent re-renders on typing
+            width: f.width,
+            css: f.css
           }))
         })),
         selectedField: state.selectedFieldId,
         isPreviewMode: state.isPreviewMode
-        // Include preview mode in hash
       });
       if (schemaHash !== this.lastRenderedSchemaHash || previewModeChanged) {
         this.lastRenderedSchemaHash = schemaHash;
         this.render();
       }
+    };
+    this.unsubscribe = formStore.subscribe(() => {
+      if (this.pendingRenderId == null) {
+        this.pendingRenderId = requestAnimationFrame(() => performRender.call(this));
+      }
     });
   }
   destroy() {
+    if (this.pendingRenderId != null) {
+      cancelAnimationFrame(this.pendingRenderId);
+      this.pendingRenderId = null;
+    }
     this.unsubscribe();
     this.container.innerHTML = "";
   }
@@ -8913,13 +8924,13 @@ var FormBuilder = class {
         main.appendChild(previewContainer2);
       }
     } else {
-      const toolboxWrapper = createElement("div", { className: "form-builder-toolbox-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-r md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-800" });
+      const toolboxWrapper = createElement("div", { className: "form-builder-toolbox-wrapper w-full md:w-[14rem] bg-white dark:bg-gray-900 border-r md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-800" });
       toolboxWrapper.appendChild(this.renderToolbox());
       main.appendChild(toolboxWrapper);
       const canvasWrapper2 = createElement("div", { className: "form-builder-canvas flex-1 overflow-y-auto" });
       canvasWrapper2.appendChild(this.renderCanvas(state));
       main.appendChild(canvasWrapper2);
-      const configWrapper = createElement("div", { className: "form-builder-config-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-l md:border-l border-t md:border-t-0 border-gray-200 dark:border-gray-800 overflow-hidden" });
+      const configWrapper = createElement("div", { className: "form-builder-config-wrapper w-full md:w-[17rem] bg-white dark:bg-gray-900 border-l md:border-l border-t md:border-t-0 border-gray-200 dark:border-gray-800 overflow-hidden" });
       configWrapper.appendChild(this.renderConfigPanel(state, focusState));
       main.appendChild(configWrapper);
     }
@@ -8958,12 +8969,12 @@ var FormBuilder = class {
     }
   }
   renderToolbar(state) {
-    const toolbar = createElement("div", { className: "flex items-center justify-between p-4 border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800" });
+    const toolbar = createElement("div", { className: "flex items-center justify-between p-2 pl-[95px] border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800" });
     const left = createElement("div", { className: "flex items-center " });
     left.appendChild(createElement("h1", { className: "text-xl font-semibold mb-2 text-primary hidden  mr-4", text: "" }));
     if (state.existingForms && state.existingForms.length > 0) {
       const formSelect = createElement("select", {
-        className: "px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm mr-2",
+        className: "px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm mr-2",
         onchange: (e) => {
           const formId = e.target.value;
           if (formId) {
@@ -9028,7 +9039,7 @@ var FormBuilder = class {
     }, [getIcon("Cog", 20)]);
     right.appendChild(settingsBtn);
     const clearBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-red-500 text-white rounded-md transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-[#f7a1a14d] text-red-500 rounded-md transition-colors",
       onclick: () => {
         if (confirm("Are you sure?")) {
           formStore.getState().setSchema({ id: "new", title: "New Form", formName: "newForm", sections: [] });
@@ -9036,7 +9047,7 @@ var FormBuilder = class {
       }
     }, [getIcon("Trash2", 16), createElement("span", { className: "", title: "Clear" })]);
     const previewBtn = createElement("button", {
-      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "bg-[#019FA2] text-white hover:bg-[#018a8d]" : "bg-[#3b497e] text-white hover:bg-[#2d3a62]"}`,
+      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "text-[#635bff] bg-[#e7e7ff] " : "text-[#635bff] bg-[#e7e7ff]"}`,
       onclick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -9045,7 +9056,7 @@ var FormBuilder = class {
       title: state.isPreviewMode ? "Exit Preview" : "Preview Form"
     }, [getIcon(state.isPreviewMode ? "X" : "Eye", 16)]);
     const saveBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-white bg-[#019FA2]  rounded-md shadow-sm transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff]  rounded-md shadow-sm transition-colors",
       onclick: () => {
         const schema = formStore.getState().schema;
         console.log("[Form Builder] Schema being sent to app:", JSON.stringify(schema, null, 2));
@@ -9053,7 +9064,7 @@ var FormBuilder = class {
           this.options.onSave(schema);
         }
       }
-    }, [getIcon("Save", 16), createElement("span", { className: "", text: "" })]);
+    }, [createElement("span", { className: "", text: "Save" })]);
     right.appendChild(clearBtn);
     right.appendChild(previewBtn);
     right.appendChild(saveBtn);
@@ -9061,24 +9072,29 @@ var FormBuilder = class {
     return toolbar;
   }
   renderToolbox() {
-    const toolbox = createElement("div", { className: "bg-[#847dff1a] dark:bg-gray-900 flex flex-col h-full" });
-    const tabs = createElement("div", { className: "flex border-b border-gray-200 dark:border-gray-800 p-1" });
-    const createTab = (id, label) => {
+    const toolbox = createElement("div", { className: " dark:bg-gray-900 flex flex-col h-full" });
+    const tabs = createElement("div", { className: "flex border-b border-gray-200 dark:border-gray-800 " });
+    const createTab = (id, label, icon, tooltip) => {
       const isActive = this.activeTab === id;
-      return createElement("button", {
-        className: `flex-1 py-3 text-sm font-medium transition-colors ${isActive ? "text-white bg-[#635bff] rounded " : "text-gray-500 hover:text-gray-700 dark:text-gray-400"}`,
-        text: label,
+      const btn = createElement("button", {
+        className: `flex-1 flex items-center justify-center  py-3 text-base font-bold transition-colors ${isActive ? "text-[#635bff] bg-[#e7e7ff]  " : "text-gray-500 hover:text-gray-700 dark:text-gray-400"}`,
+        title: tooltip || label,
+        "aria-label": tooltip || label,
         onclick: () => {
           this.activeTab = id;
           this.render();
         }
-      });
+      }, [
+        getIcon(icon || "ListBullet", 16),
+        createElement("span", { className: "hidden sm:inline-block", text: label })
+      ]);
+      return btn;
     };
-    tabs.appendChild(createTab("fields", "Fields"));
-    tabs.appendChild(createTab("templates", "Templates"));
-    tabs.appendChild(createTab("import", "Import"));
+    tabs.appendChild(createTab("fields", "", "ListBullet", "Field types"));
+    tabs.appendChild(createTab("templates", "", "DocumentText", "Saved templates"));
+    tabs.appendChild(createTab("import", "", "Upload", "Import sections"));
     toolbox.appendChild(tabs);
-    const content = createElement("div", { className: "flex-1 overflow-y-auto p-4 bg-white" });
+    const content = createElement("div", { className: "flex-1 overflow-y-auto p-4 bg-[#e7e7ff]" });
     if (this.activeTab === "fields") {
       const list = createElement("div", { className: "grid grid-cols-2 gap-3", id: "toolbox-list" });
       FIELD_TYPES.forEach((field) => {
@@ -9160,7 +9176,7 @@ var FormBuilder = class {
   }
   renderCanvas(state) {
     const canvas = createElement("div", {
-      className: "flex-1 dark:bg-gray-950 p-4 md:p-8 overflow-y-auto",
+      className: "flex-1 dark:bg-gray-950 p-4 md:p-4 overflow-y-auto",
       onclick: (e) => {
         if (e.target === canvas || e.target === canvas.firstElementChild) {
           formStore.getState().selectField(null);
@@ -9181,7 +9197,7 @@ var FormBuilder = class {
     const sectionList = new SectionList(state.schema, state.selectedFieldId);
     inner.appendChild(sectionList.getElement());
     const addSectionBtn = createElement("button", {
-      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-lg text-gray-500 bg-[#635bff] max-w-[180px] shadow-[0_17px_20px_-8px_rgba(77,91,236,0.231372549)] text-white transition-colors flex items-center justify-center font-medium",
+      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[180px]  text-white transition-colors flex items-center justify-center font-medium",
       onclick: () => formStore.getState().addSection()
     }, [getIcon("Plus", 20), createElement("span", { className: "ml-2", text: "Add Section" })]);
     inner.appendChild(addSectionBtn);
@@ -9191,7 +9207,7 @@ var FormBuilder = class {
   // Helper method to create a modern checkbox field with better UX
   createCheckboxField(label, checked, onChange, id) {
     const uniqueId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-    const container = createElement("div", { className: "flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer" });
+    const container = createElement("div", { className: "flex items-center gap-3 py-1 px-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer" });
     const checkbox = createElement("input", {
       type: "checkbox",
       id: uniqueId,
@@ -9228,11 +9244,11 @@ var FormBuilder = class {
       onclick: () => formStore.getState().selectField(null)
     }, [getIcon("X", 20)]));
     panel.appendChild(header);
-    const body = createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", id: "config-panel-body" });
+    const body = createElement("div", { className: "flex-1 overflow-y-auto p-4 px-2 space-y-3", id: "config-panel-body" });
     const labelGroup = createElement("div");
-    labelGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Label" }));
+    labelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Label" }));
     labelGroup.appendChild(createElement("input", {
-      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
       value: selectedField.label,
       "data-focus-id": `field-label-${selectedField.id}`,
       oninput: (e) => {
@@ -9241,9 +9257,9 @@ var FormBuilder = class {
     }));
     body.appendChild(labelGroup);
     const placeholderGroup = createElement("div");
-    placeholderGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Placeholder" }));
+    placeholderGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Placeholder" }));
     placeholderGroup.appendChild(createElement("input", {
-      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
       value: selectedField.placeholder || "",
       "data-focus-id": `field-placeholder-${selectedField.id}`,
       oninput: (e) => {
@@ -9272,7 +9288,7 @@ var FormBuilder = class {
       const isActive = currentSpan === span;
       const spanBtn = createElement("button", {
         type: "button",
-        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors cursor-pointer ${isActive ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
+        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors cursor-pointer ${isActive ? "bg-[#e7e7ff] text-[#635bff] font-semibold" : "bg-white border-2 border-[#e7e7ff] dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
         text: `${span}`,
         title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`
       });
@@ -9368,9 +9384,9 @@ var FormBuilder = class {
       };
       if (activeMasterTypes.length > 0) {
         const groupNameGroup = createElement("div", { className: "mb-4" });
-        groupNameGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Master List" }));
+        groupNameGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Master List" }));
         const groupNameSelect = createElement("select", {
-          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
           onchange: (e) => {
             const selectedEnumName = e.target.value;
             if (selectedEnumName) {
@@ -9456,9 +9472,9 @@ var FormBuilder = class {
       const optionSourceHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Option Source" });
       body.appendChild(optionSourceHeader);
       const optionSourceGroup = createElement("div", { className: "mb-4" });
-      optionSourceGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Source Type" }));
+      optionSourceGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Source Type" }));
       const optionSourceSelect = createElement("select", {
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: selectedField.optionSource || "STATIC",
         onchange: (e) => {
           const source = e.target.value;
@@ -9483,9 +9499,9 @@ var FormBuilder = class {
       body.appendChild(optionSourceGroup);
       if (selectedField.type === "select" && selectedField.optionSource === "LOOKUP") {
         const lookupSourceTypeGroup = createElement("div", { className: "mb-4" });
-        lookupSourceTypeGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source Type" }));
+        lookupSourceTypeGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source Type" }));
         const lookupSourceTypeSelect = createElement("select", {
-          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
           value: selectedField.lookupSourceType || "MODULE",
           onchange: (e) => {
             const lookupSourceType = e.target.value;
@@ -9504,9 +9520,9 @@ var FormBuilder = class {
         if (selectedField.lookupSourceType === "MODULE") {
           const moduleList = this.options.moduleList || [];
           const lookupSourceGroup = createElement("div", { className: "mb-4" });
-          lookupSourceGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source" }));
+          lookupSourceGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source" }));
           const lookupSourceSelect = createElement("select", {
-            className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+            className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
             value: selectedField.lookupSource || "",
             onchange: (e) => {
               const lookupSource = e.target.value;
@@ -9541,9 +9557,9 @@ var FormBuilder = class {
           const masterTypes = formStore.getState().masterTypes;
           const activeMasterTypes = masterTypes.filter((mt) => mt.active === true);
           const lookupSourceGroup = createElement("div", { className: "mb-4" });
-          lookupSourceGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source" }));
+          lookupSourceGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source" }));
           const lookupSourceSelect = createElement("select", {
-            className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+            className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
             value: selectedField.lookupSource || "",
             onchange: (e) => {
               const lookupSource = e.target.value;
@@ -9577,9 +9593,9 @@ var FormBuilder = class {
           body.appendChild(lookupSourceGroup);
         }
         const lookupValueFieldGroup = createElement("div", { className: "mb-4" });
-        lookupValueFieldGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Value Field" }));
+        lookupValueFieldGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Value Field" }));
         const lookupValueFieldSelect = createElement("select", {
-          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
           value: selectedField.lookupValueField || "",
           disabled: !selectedField.lookupSource,
           onchange: (e) => {
@@ -9602,9 +9618,9 @@ var FormBuilder = class {
         lookupValueFieldGroup.appendChild(lookupValueFieldSelect);
         body.appendChild(lookupValueFieldGroup);
         const lookupLabelFieldGroup = createElement("div", { className: "mb-4" });
-        lookupLabelFieldGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Label Field" }));
+        lookupLabelFieldGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Label Field" }));
         const lookupLabelFieldSelect = createElement("select", {
-          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
           value: selectedField.lookupLabelField || "",
           disabled: !selectedField.lookupSource,
           onchange: (e) => {
@@ -9768,10 +9784,10 @@ var FormBuilder = class {
     const validationElements = [];
     if (["text", "textarea", "email", "password"].includes(selectedField.type)) {
       const minLenGroup = createElement("div", { className: "mb-3" });
-      minLenGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Min Length" }));
+      minLenGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Length" }));
       minLenGroup.appendChild(createElement("input", {
         type: "number",
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: getRuleValue("minLength") || "",
         placeholder: "e.g. 3",
         onchange: (e) => {
@@ -9781,10 +9797,10 @@ var FormBuilder = class {
       }));
       validationElements.push(minLenGroup);
       const maxLenGroup = createElement("div", { className: "mb-3" });
-      maxLenGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Max Length" }));
+      maxLenGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Max Length" }));
       maxLenGroup.appendChild(createElement("input", {
         type: "number",
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: getRuleValue("maxLength") || "",
         placeholder: "e.g. 100",
         onchange: (e) => {
@@ -9794,7 +9810,7 @@ var FormBuilder = class {
       }));
       validationElements.push(maxLenGroup);
       const regexGroup = createElement("div", { className: "mb-3" });
-      regexGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Regex Pattern" }));
+      regexGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Regex Pattern" }));
       const updateExamples = (examplesList2, regex, preset) => {
         examplesList2.innerHTML = "";
         let testCases = [];
@@ -9860,7 +9876,7 @@ var FormBuilder = class {
         const presetGroup = createElement("div", { className: "mb-2" });
         presetGroup.appendChild(createElement("label", { className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1", text: "Regex Presets (Optional)" }));
         const presetSelect = createElement("select", {
-          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
           value: selectedPresetId,
           onchange: (e) => {
             const presetId = e.target.value;
@@ -9900,7 +9916,7 @@ var FormBuilder = class {
       }
       regexInput = createElement("input", {
         type: "text",
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: currentRegex,
         placeholder: selectedField.type === "email" ? "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$" : "e.g. ^[A-Z]+$",
         "data-focus-id": `field-regex-${selectedField.id}`,
@@ -9953,10 +9969,10 @@ var FormBuilder = class {
     }
     if (selectedField.type === "checkbox") {
       const minSelectedGroup = createElement("div", { className: "mb-3" });
-      minSelectedGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Min Selected" }));
+      minSelectedGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Selected" }));
       minSelectedGroup.appendChild(createElement("input", {
         type: "number",
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: getRuleValue("minSelected"),
         placeholder: "e.g. 1",
         min: "0",
@@ -9967,10 +9983,10 @@ var FormBuilder = class {
       }));
       validationElements.push(minSelectedGroup);
       const maxSelectedGroup = createElement("div", { className: "mb-3" });
-      maxSelectedGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Max Selected" }));
+      maxSelectedGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Max Selected" }));
       maxSelectedGroup.appendChild(createElement("input", {
         type: "number",
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: getRuleValue("maxSelected"),
         placeholder: "e.g. 2",
         min: "1",
@@ -9983,10 +9999,10 @@ var FormBuilder = class {
     }
     if (selectedField.type === "date") {
       const minDateGroup = createElement("div", { className: "mb-3" });
-      minDateGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Minimum Date" }));
+      minDateGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Minimum Date" }));
       minDateGroup.appendChild(createElement("input", {
         type: "date",
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: validationObj.minDate || "",
         onchange: (e) => {
           const val = e.target.value;
@@ -9995,10 +10011,10 @@ var FormBuilder = class {
       }));
       validationElements.push(minDateGroup);
       const maxDateGroup = createElement("div", { className: "mb-3" });
-      maxDateGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Maximum Date" }));
+      maxDateGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Maximum Date" }));
       maxDateGroup.appendChild(createElement("input", {
         type: "date",
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: validationObj.maxDate || "",
         onchange: (e) => {
           const val = e.target.value;
@@ -10037,9 +10053,9 @@ var FormBuilder = class {
       state2.updateField(selectedField.id, updatePayload);
     };
     const paddingGroup = createElement("div", { className: "mb-3" });
-    paddingGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Padding" }));
+    paddingGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Padding" }));
     const paddingSelect = createElement("select", {
-      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-sm",
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-sm",
       onchange: (e) => {
         updateStyleProp("padding", e.target.value);
       }
@@ -10058,7 +10074,7 @@ var FormBuilder = class {
     paddingGroup.appendChild(paddingSelect);
     body.appendChild(paddingGroup);
     const bgColorGroup = createElement("div", { className: "mb-3" });
-    bgColorGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Background Color" }));
+    bgColorGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Background Color" }));
     const bgColorRow = createElement("div", { className: "flex items-center gap-2" });
     const bgColorInput = createElement("input", {
       type: "color",
@@ -10083,7 +10099,7 @@ var FormBuilder = class {
     bgColorGroup.appendChild(bgColorRow);
     body.appendChild(bgColorGroup);
     const alignGroup = createElement("div", { className: "mb-3" });
-    alignGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Text Alignment" }));
+    alignGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Text Alignment" }));
     const alignButtonsRow = createElement("div", { className: "flex gap-1" });
     const alignments = [
       { value: "left", icon: "AlignLeft" },
@@ -10107,10 +10123,10 @@ var FormBuilder = class {
     alignGroup.appendChild(alignButtonsRow);
     body.appendChild(alignGroup);
     const cssClassGroup = createElement("div", { className: "mb-3" });
-    cssClassGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Custom CSS Class" }));
+    cssClassGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Custom CSS Class" }));
     cssClassGroup.appendChild(createElement("input", {
       type: "text",
-      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
       value: selectedField.css?.class || "",
       placeholder: "e.g. my-custom-class",
       "data-focus-id": `field-css-class-${selectedField.id}`,
@@ -10162,7 +10178,7 @@ var FormBuilder = class {
       initialCssStyleValue = preservedValue;
     }
     const cssStyleTextarea = createElement("textarea", {
-      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-xs font-mono",
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-xs font-mono",
       rows: 3,
       placeholder: '{"padding": "8px", "backgroundColor": "#f0f0f0"}',
       "data-focus-id": cssStyleId,