form-builder-pro 1.2.2 → 1.2.4

package/dist/index.js

@@ -8795,9 +8795,12 @@ var FormBuilder = class {
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
-            label: f.label
-            // Exclude frequently changing text properties from hash
-            // to prevent re-renders on typing
+            label: f.label,
+            layout: f.layout,
+            width: f.width,
+            css: f.css
+            // Include css so style changes (textAlign, backgroundColor, etc.) trigger re-render
+            // Exclude frequently changing text (placeholder, etc.) to prevent re-renders on typing
           }))
         })),
         selectedField: state.selectedFieldId,
@@ -8914,13 +8917,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);
     }
@@ -8959,12 +8962,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) {
@@ -9029,7 +9032,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: [] });
@@ -9037,7 +9040,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();
@@ -9046,7 +9049,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));
@@ -9054,7 +9057,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);
@@ -9062,24 +9065,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) => {
@@ -9161,7 +9169,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);
@@ -9182,7 +9190,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);
@@ -9192,7 +9200,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,
@@ -9229,11 +9237,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) => {
@@ -9242,9 +9250,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) => {
@@ -9268,18 +9276,24 @@ var FormBuilder = class {
     layoutLabelRow.appendChild(spanValueDisplay);
     layoutGroup.appendChild(layoutLabelRow);
     const spanButtonsContainer = createElement("div", { className: "grid grid-cols-6 gap-2 mt-2" });
+    const fieldId = selectedField.id;
     for (let span = 1; span <= 12; span++) {
       const isActive = currentSpan === span;
       const spanBtn = createElement("button", {
         type: "button",
-        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors ${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)}%)`,
-        onclick: () => {
-          const layout = selectedField.layout || { row: 0, column: 0 };
-          formStore.getState().updateField(selectedField.id, {
+        title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`
+      });
+      spanBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const state2 = formStore.getState();
+        const field = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === fieldId);
+        if (field) {
+          const layout = field.layout || { row: 0, column: 0 };
+          state2.updateField(fieldId, {
             layout: { ...layout, span },
-            // Also update width for backward compatibility
             width: Math.round(span / 12 * 100)
           });
         }
@@ -9363,9 +9377,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) {
@@ -9451,9 +9465,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;
@@ -9478,9 +9492,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;
@@ -9499,9 +9513,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;
@@ -9536,9 +9550,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;
@@ -9572,9 +9586,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) => {
@@ -9597,9 +9611,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) => {
@@ -9763,10 +9777,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) => {
@@ -9776,10 +9790,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) => {
@@ -9789,7 +9803,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 = [];
@@ -9855,7 +9869,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;
@@ -9895,7 +9909,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}`,
@@ -9948,10 +9962,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",
@@ -9962,10 +9976,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",
@@ -9978,10 +9992,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;
@@ -9990,10 +10004,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;
@@ -10032,9 +10046,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);
       }
@@ -10053,7 +10067,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",
@@ -10078,7 +10092,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" },
@@ -10102,10 +10116,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}`,
@@ -10157,7 +10171,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,