formanitor 0.0.50 → 0.1.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import * as React15 from 'react';
 import React15__default, { createContext, useContext, useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, ChevronUp, Check, Circle, X, Image, Upload, Trash2, Plus, Loader2, PenTool, Mic, Undo, Redo, ChevronRight, Calendar as Calendar$1, ChevronLeft, RefreshCw, Clock, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { ChevronDown, ChevronUp, Check, Circle, X, Image, Upload, Trash2, Plus, Loader2, PenTool, Mic, Undo, Redo, ChevronRight, Calendar as Calendar$1, ChevronLeft, RefreshCw, Clock, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered } from 'lucide-react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import { useEditor, EditorContent } from '@tiptap/react';
@@ -1891,6 +1891,9 @@ function useField(fieldId) {
     setTouched
   };
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 function RecordingWave() {
   const bars = [
     { dur: "0.6s", values: "3;10;3", yValues: "4.5;0;4.5", delay: "0s" },
@@ -1957,9 +1960,6 @@ function VoiceMicButton({ fieldId, onTranscriptReady }) {
     }
   );
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var Input = React15.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -2030,6 +2030,41 @@ function getThemeConfig(fieldType, themeName) {
   if (!registry) return void 0;
   return registry[themeName];
 }
+function isLabelVisible(fieldDef) {
+  return fieldDef.style?.labelVisible !== false;
+}
+function FieldRequiredIndicator({
+  fieldDef
+}) {
+  if (!fieldDef.required) return null;
+  if (fieldDef.style?.showRequiredAsterisk === false) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-red-500",
+        fieldDef.style?.classNames?.requiredIndicator
+      ),
+      "aria-hidden": true,
+      children: "*"
+    }
+  );
+}
+function fieldWrapperClass(fieldDef, ...defaults) {
+  return cn(...defaults, fieldDef.style?.classNames?.wrapper);
+}
+function fieldLabelClass(fieldDef, ...defaults) {
+  return cn(...defaults, fieldDef.style?.classNames?.label);
+}
+function fieldControlClass(fieldDef, ...defaults) {
+  return cn(...defaults, fieldDef.style?.classNames?.control);
+}
+function fieldDescriptionClass(fieldDef, ...defaults) {
+  return cn(...defaults, fieldDef.style?.classNames?.description);
+}
+function fieldErrorClass(fieldDef, ...defaults) {
+  return cn(...defaults, fieldDef.style?.classNames?.error);
+}
 var TextWidget = ({ fieldId }) => {
   const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
   const { state } = useForm();
@@ -2047,34 +2082,50 @@ var TextWidget = ({ fieldId }) => {
   const wrapperClass = theme?.wrapperClassName ?? "space-y-2";
   const labelClass = theme?.labelClassName;
   const inputClass = cn(theme?.inputClassName, showError && "border-red-500");
+  const showLabel = isLabelVisible(fieldDef);
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
     " ",
-    fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
-  const labelEl = theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent });
+  const labelEl = showLabel ? theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: labelContent }) : null;
   const placeholder = typeof fieldDef.placeholder === "string" && fieldDef.placeholder.trim() ? fieldDef.placeholder : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClass, isTextarea && "flex h-full min-h-0 flex-col"), children: [
-    hasVoice ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      labelEl,
-      /* @__PURE__ */ jsx(VoiceMicButton, { fieldId, onTranscriptReady: setValue })
-    ] }) : labelEl,
-    /* @__PURE__ */ jsx(
-      Component,
-      {
-        id: fieldId,
-        value: value || "",
-        onChange: (e) => setValue(fieldDef.type === "number" ? Number(e.target.value) : e.target.value),
-        onBlur: setTouched,
-        disabled,
-        type: fieldDef.type === "number" ? "number" : "text",
-        className: cn(inputClass, isTextarea && height == null && "min-h-[80px] flex-1"),
-        placeholder,
-        ...isTextarea && { height }
-      }
-    ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: fieldWrapperClass(
+        fieldDef,
+        wrapperClass,
+        isTextarea && "flex h-full min-h-0 flex-col"
+      ),
+      children: [
+        hasVoice ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          labelEl,
+          /* @__PURE__ */ jsx(VoiceMicButton, { fieldId, onTranscriptReady: setValue })
+        ] }) : labelEl,
+        /* @__PURE__ */ jsx(
+          Component,
+          {
+            id: fieldId,
+            value: value || "",
+            onChange: (e) => setValue(fieldDef.type === "number" ? Number(e.target.value) : e.target.value),
+            onBlur: setTouched,
+            disabled,
+            type: fieldDef.type === "number" ? "number" : "text",
+            className: fieldControlClass(
+              fieldDef,
+              inputClass,
+              isTextarea && height == null && "min-h-[80px] flex-1"
+            ),
+            placeholder,
+            "aria-label": !showLabel ? fieldDef.label : void 0,
+            ...isTextarea && { height }
+          }
+        ),
+        showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
+      ]
+    }
+  );
 };
 var buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -2338,24 +2389,28 @@ var RichTextWidget = ({ fieldId }) => {
     }
   }, [stringValue, editor]);
   if (!fieldDef) return null;
+  const showLabel = isLabelVisible(fieldDef);
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
     " ",
-    fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
-  const labelEl = /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent });
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  const labelEl = /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: labelContent });
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
     hasVoice ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      labelEl,
+      showLabel ? labelEl : null,
       /* @__PURE__ */ jsx(VoiceMicButton, { fieldId, onTranscriptReady: setValue })
-    ] }) : labelEl,
+    ] }) : showLabel ? labelEl : null,
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(
-          "rounded-md border border-input bg-background text-sm ring-offset-background overflow-hidden",
-          showError && "border-red-500",
-          disabled && "opacity-60"
+        className: fieldControlClass(
+          fieldDef,
+          cn(
+            "rounded-md border border-input bg-background text-sm ring-offset-background overflow-hidden",
+            showError && "border-red-500",
+            disabled && "opacity-60"
+          )
         ),
         children: [
           /* @__PURE__ */ jsx(RichTextToolbar, { editor, disabled }),
@@ -2381,7 +2436,7 @@ var RichTextWidget = ({ fieldId }) => {
         ]
       }
     ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var Select = SelectPrimitive.Root;
@@ -2547,12 +2602,13 @@ var SelectWidget = ({ fieldId }) => {
   if (!fieldDef) return null;
   const schemaPlaceholder = typeof fieldDef.placeholder === "string" && fieldDef.placeholder.trim() ? fieldDef.placeholder : void 0;
   const selectPlaceholder = loading ? "Loading..." : schemaPlaceholder ?? "Select...";
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  const showLabel = isLabelVisible(fieldDef);
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
       " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
     /* @__PURE__ */ jsxs(
       Select,
       {
@@ -2564,12 +2620,22 @@ var SelectWidget = ({ fieldId }) => {
           setTouched();
         },
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { id: fieldId, className: showError ? "border-red-500" : "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder }) }),
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              id: fieldId,
+              className: fieldControlClass(
+                fieldDef,
+                showError ? "border-red-500" : ""
+              ),
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder })
+            }
+          ),
           /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt.value), children: opt.label }, String(opt.value))) })
         ]
       }
     ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var Checkbox = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -2616,34 +2682,44 @@ var MultiSelectWidget = ({ fieldId }) => {
     setTouched();
   };
   if (!fieldDef) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { children: [
+  const showLabel = isLabelVisible(fieldDef);
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
       " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: `border rounded-md p-3 space-y-2 ${showError ? "border-red-500" : ""} ${disabled ? "opacity-50 pointer-events-none" : ""}`, children: [
-      loading && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: "Loading options..." }),
-      !loading && options.map((opt) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            id: `${fieldId}-${opt.value}`,
-            checked: currentValues.includes(opt.value),
-            onCheckedChange: () => toggleValue(opt.value)
-          }
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: fieldControlClass(
+          fieldDef,
+          `border rounded-md p-3 space-y-2 ${showError ? "border-red-500" : ""} ${disabled ? "opacity-50 pointer-events-none" : ""}`
         ),
-        /* @__PURE__ */ jsx(
-          "label",
-          {
-            htmlFor: `${fieldId}-${opt.value}`,
-            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-            children: opt.label
-          }
-        )
-      ] }, String(opt.value)))
-    ] }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+        children: [
+          loading && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: "Loading options..." }),
+          !loading && options.map((opt) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: `${fieldId}-${opt.value}`,
+                checked: currentValues.includes(opt.value),
+                onCheckedChange: () => toggleValue(opt.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: `${fieldId}-${opt.value}`,
+                className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                children: opt.label
+              }
+            )
+          ] }, String(opt.value)))
+        ]
+      }
+    ),
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var Table = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
@@ -2982,22 +3058,26 @@ var DateWidget = ({ fieldId }) => {
   const { state } = useForm();
   const showError = !!error && (touched || state.submitAttempted);
   if (!fieldDef) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  const showLabel = isLabelVisible(fieldDef);
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
       " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
     /* @__PURE__ */ jsx("div", { onBlur: () => setTouched(), children: /* @__PURE__ */ jsx(
       DatePicker,
       {
         date: value ? new Date(value) : void 0,
         setDate: (date) => setValue(date ? date.toISOString() : void 0),
         placeholder: fieldDef.placeholder,
-        className: showError ? "border-red-500 w-full" : "w-full"
+        className: fieldControlClass(
+          fieldDef,
+          showError ? "border-red-500 w-full" : "w-full"
+        )
       }
     ) }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 function parseTimeString(value) {
@@ -3114,6 +3194,7 @@ var DateTimeWidget = ({ fieldId }) => {
   const showError = !!error && (touched || state.submitAttempted);
   if (!fieldDef) return null;
   const currentDate = value ? new Date(value) : void 0;
+  const showLabel = isLabelVisible(fieldDef);
   const handleChange = (date) => {
     if (!date) {
       setValue(void 0);
@@ -3121,12 +3202,12 @@ var DateTimeWidget = ({ fieldId }) => {
     }
     setValue(date.toISOString());
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
       " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -3138,12 +3219,15 @@ var DateTimeWidget = ({ fieldId }) => {
             dateTime: currentDate,
             setDateTime: handleChange,
             placeholder: fieldDef.placeholder,
-            className: showError ? "border-red-500 w-full" : "w-full"
+            className: fieldControlClass(
+              fieldDef,
+              showError ? "border-red-500 w-full" : "w-full"
+            )
           }
         )
       }
     ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 function extractImageDisplayUrl(value) {
@@ -3174,13 +3258,15 @@ var ImageUploadWidget = ({ fieldId }) => {
     }
   };
   if (!fieldDef) return null;
+  const showLabel = isLabelVisible(fieldDef);
   const uploadHandler = store.getUploadHandler();
   if (!uploadHandler) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+    return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+      showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
         fieldDef.label,
-        fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-      ] }),
+        " ",
+        /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+      ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "border-2 border-red-300 rounded-lg p-4 bg-red-50", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: "Upload handler not configured. Please provide an onUpload function in FormProvider config." }) })
     ] });
   }
@@ -3248,49 +3334,59 @@ var ImageUploadWidget = ({ fieldId }) => {
   const handleUploadClick = () => {
     fileInputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "border-2 border-dashed border-gray-300 rounded-lg p-4", children: preview ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: preview,
-          alt: "Uploaded image",
-          className: "max-w-full max-h-48 mx-auto rounded-lg"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "destructive",
-          size: "sm",
-          className: "absolute top-2 right-2",
-          onClick: handleRemove,
-          disabled: disabled || isUploading,
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-      /* @__PURE__ */ jsx(Image, { className: "h-12 w-12 mx-auto text-gray-400 mb-4" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Click to upload an image or drag and drop" }),
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          onClick: handleUploadClick,
-          disabled: disabled || isUploading,
-          children: [
-            /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 mr-2" }),
-            isUploading ? "Uploading..." : "Choose Image"
-          ]
-        }
-      )
-    ] }) }),
+      " ",
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: fieldControlClass(
+          fieldDef,
+          "border-2 border-dashed border-gray-300 rounded-lg p-4"
+        ),
+        children: preview ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview,
+              alt: "Uploaded image",
+              className: "max-w-full max-h-48 mx-auto rounded-lg"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "destructive",
+              size: "sm",
+              className: "absolute top-2 right-2",
+              onClick: handleRemove,
+              disabled: disabled || isUploading,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+          /* @__PURE__ */ jsx(Image, { className: "h-12 w-12 mx-auto text-gray-400 mb-4" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Click to upload an image or drag and drop" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: handleUploadClick,
+              disabled: disabled || isUploading,
+              children: [
+                /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 mr-2" }),
+                isUploading ? "Uploading..." : "Choose Image"
+              ]
+            }
+          )
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -3302,8 +3398,8 @@ var ImageUploadWidget = ({ fieldId }) => {
         disabled: disabled || isUploading
       }
     ),
-    fieldDef.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: fieldDef.description }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    fieldDef.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(fieldDef, "text-xs text-gray-500"), children: fieldDef.description }),
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 function urlLooksLikePdf(url) {
@@ -3345,13 +3441,15 @@ var MediaUploadWidget = ({ fieldId }) => {
     }
   };
   if (!fieldDef) return null;
+  const showLabel = isLabelVisible(fieldDef);
   const uploadHandler = store.getUploadHandler();
   if (!uploadHandler) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+    return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+      showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
         fieldDef.label,
-        fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-      ] }),
+        " ",
+        /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+      ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "border-2 border-red-300 rounded-lg p-4 bg-red-50", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: "Upload handler not configured. Please provide an onUpload function in FormProvider config." }) })
     ] });
   }
@@ -3434,56 +3532,66 @@ var MediaUploadWidget = ({ fieldId }) => {
   const handleUploadClick = () => {
     fileInputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "border-2 border-dashed border-gray-300 rounded-lg p-4", children: preview ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      previewIsPdf ? /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          src: preview,
-          title: "Uploaded PDF",
-          className: "w-full max-h-48 min-h-36 rounded-lg border border-gray-200 bg-white"
-        }
-      ) : /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: preview,
-          alt: "Uploaded image",
-          className: "max-w-full max-h-48 mx-auto rounded-lg"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "destructive",
-          size: "sm",
-          className: "absolute top-2 right-2",
-          onClick: handleRemove,
-          disabled: disabled || isUploading,
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-      /* @__PURE__ */ jsx(Image, { className: "h-12 w-12 mx-auto text-gray-400 mb-4" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Click to upload an image or PDF, or drag and drop" }),
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          onClick: handleUploadClick,
-          disabled: disabled || isUploading,
-          children: [
-            /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 mr-2" }),
-            isUploading ? "Uploading..." : "Choose Image"
-          ]
-        }
-      )
-    ] }) }),
+      " ",
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: fieldControlClass(
+          fieldDef,
+          "border-2 border-dashed border-gray-300 rounded-lg p-4"
+        ),
+        children: preview ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          previewIsPdf ? /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: preview,
+              title: "Uploaded PDF",
+              className: "w-full max-h-48 min-h-36 rounded-lg border border-gray-200 bg-white"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview,
+              alt: "Uploaded image",
+              className: "max-w-full max-h-48 mx-auto rounded-lg"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "destructive",
+              size: "sm",
+              className: "absolute top-2 right-2",
+              onClick: handleRemove,
+              disabled: disabled || isUploading,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+          /* @__PURE__ */ jsx(Image, { className: "h-12 w-12 mx-auto text-gray-400 mb-4" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Click to upload an image or PDF, or drag and drop" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: handleUploadClick,
+              disabled: disabled || isUploading,
+              children: [
+                /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 mr-2" }),
+                isUploading ? "Uploading..." : "Choose Image"
+              ]
+            }
+          )
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -3495,8 +3603,8 @@ var MediaUploadWidget = ({ fieldId }) => {
         disabled: disabled || isUploading
       }
     ),
-    fieldDef.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: fieldDef.description }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    fieldDef.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(fieldDef, "text-xs text-gray-500"), children: fieldDef.description }),
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
@@ -3685,23 +3793,34 @@ var SignatureUploadWidget = ({ fieldId }) => {
   };
   confirmSignatureRef.current = confirmSignature;
   const canClear = showPreview ? !disabled : hasDrawing || isConfirmed;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { children: [
+  const showLabel = isLabelVisible(fieldDef);
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+      " ",
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
     showPreview ? (
       /* ── Preview mode: existing signature from backend ── */
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx("div", { className: "border border-gray-200 rounded bg-white flex items-center justify-start p-2", children: /* @__PURE__ */ jsx(
-          "img",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            src: displayUrl,
-            alt: "Signature",
-            className: "object-contain max-w-full",
-            style: { width: 400, height: 200 }
+            className: fieldControlClass(
+              fieldDef,
+              "border border-gray-200 rounded bg-white flex items-center justify-start p-2"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: displayUrl,
+                alt: "Signature",
+                className: "object-contain max-w-full",
+                style: { width: 400, height: 200 }
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -3724,7 +3843,10 @@ var SignatureUploadWidget = ({ fieldId }) => {
             "canvas",
             {
               ref: canvasRef,
-              className: `border rounded touch-none ${isConfirmed ? "border-green-300 cursor-default" : "border-gray-200 cursor-crosshair"}`,
+              className: fieldControlClass(
+                fieldDef,
+                `border rounded touch-none ${isConfirmed ? "border-green-300 cursor-default" : "border-gray-200 cursor-crosshair"}`
+              ),
               onMouseDown: startDrawing,
               onMouseMove: draw,
               onMouseUp: stopDrawing,
@@ -3769,7 +3891,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
         ] })
       ] })
     ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 function Upload3({
@@ -3782,7 +3904,8 @@ function Upload3({
   formatsLabel,
   placeholder = "Upload File",
   beforeUploadContent,
-  id: idProp
+  id: idProp,
+  listLayout = false
 }) {
   const inputRef = React15__default.useRef(null);
   const generatedId = React15__default.useId();
@@ -3823,19 +3946,33 @@ function Upload3({
           "label",
           {
             htmlFor: inputId,
-            className: cn("cursor-pointer w-full", disabled && "cursor-not-allowed"),
-            children: /* @__PURE__ */ jsx("div", { children: count > 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center text-sm font-semibold text-gray-700", children: [
+            className: cn(
+              "cursor-pointer w-full",
+              disabled && "cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ jsx("div", { children: count > 0 && !listLayout ? /* @__PURE__ */ jsxs("div", { className: "text-center text-sm font-semibold text-gray-700", children: [
               count,
               " file",
               count === 1 ? "" : "s",
               " selected"
             ] }) : beforeUploadContent ? beforeUploadContent : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-              /* @__PURE__ */ jsx(Upload, { size: 16, className: "rotate-180" }),
-              /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold mt-0.5 text-gray-700", children: placeholder }),
-              formatsText ? /* @__PURE__ */ jsxs("div", { className: "mt-3 text-[10px]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm text-black font-normal leading-[120%] tracking-[-0.28px] text-center", children: [
+                "Upload your surgery prescription",
+                /* @__PURE__ */ jsx("br", {}),
+                "and medical records"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Upload,
+                {
+                  size: 20,
+                  className: "rotate-180 text-[#727272] mt-4"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "text-xs mt-1 text-text-shades-2", children: placeholder }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-2 text-10px leading-[140%] text-[#989898]", children: [
                 "Supported formats - ",
                 formatsText
-              ] }) : null
+              ] })
             ] }) })
           }
         )
@@ -3862,6 +3999,26 @@ function matchesAccept(file, accept) {
     return type === token;
   });
 }
+function basenameKey(key) {
+  const parts = key.split("/");
+  return parts[parts.length - 1] || key;
+}
+function fileRows(listLayout, localFiles, value) {
+  if (!listLayout) return [];
+  if (localFiles && localFiles.length > 0) {
+    return Array.from(localFiles).map((f, i) => ({ label: f.name, index: i }));
+  }
+  if (Array.isArray(value) && value.length > 0) {
+    return value.map((k, i) => ({
+      label: basenameKey(String(k)),
+      index: i
+    }));
+  }
+  if (value !== null && value !== void 0 && value !== "") {
+    return [{ label: basenameKey(String(value)), index: 0 }];
+  }
+  return [];
+}
 var FormFileUploadWidget = ({
   fieldId
 }) => {
@@ -3871,22 +4028,55 @@ var FormFileUploadWidget = ({
   const [localFiles, setLocalFiles] = useState(null);
   const [isUploading, setIsUploading] = useState(false);
   const showError = !!error && (touched || state.submitAttempted);
+  const listLayout = fieldDef?.type === "file_upload" && fieldDef.list === true;
+  const rows = useMemo(
+    () => fileRows(listLayout, localFiles, value),
+    [listLayout, localFiles, value]
+  );
   if (!fieldDef || fieldDef.type !== "file_upload") return null;
   const def = fieldDef;
   const accept = def.accept ?? "*/*";
   const maxSize = def.maxSize ?? 10 * 1024 * 1024;
   const allowMultiple = def.multiple === true;
   const uploadHandler = store.getUploadHandler();
+  const showLabel = isLabelVisible(fieldDef);
   if (!uploadHandler) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+    return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+      showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
         fieldDef.label,
-        fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-      ] }),
+        " ",
+        /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+      ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "border-2 border-red-300 rounded-lg p-4 bg-red-50", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: "Upload handler not configured. Please provide an onUpload function in FormProvider config." }) })
     ] });
   }
   const hasStoredValue = value !== null && value !== void 0 && value !== "" && !(Array.isArray(value) && value.length === 0);
+  const removeFileAt = (index) => {
+    setTouched();
+    if (disabled || isUploading) return;
+    const hadLocal = localFiles != null && localFiles.length > 0;
+    if (hadLocal) {
+      const next = Array.from(localFiles).filter((_, i) => i !== index);
+      if (next.length === 0) {
+        setLocalFiles(null);
+        setValue(null);
+        return;
+      }
+      setLocalFiles(fileListFromArray(next));
+      if (allowMultiple && Array.isArray(value)) {
+        setValue(value.filter((_, i) => i !== index));
+      } else {
+        setValue(null);
+      }
+      return;
+    }
+    if (allowMultiple && Array.isArray(value)) {
+      const next = value.filter((_, i) => i !== index);
+      setValue(next.length ? next : null);
+      return;
+    }
+    setValue(null);
+  };
   const handleChange = async (files) => {
     setTouched();
     if (!files || files.length === 0) {
@@ -3933,11 +4123,12 @@ var FormFileUploadWidget = ({
       store.decrementPendingUploads();
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+      " ",
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
     /* @__PURE__ */ jsx(
       Upload3,
       {
@@ -3946,14 +4137,39 @@ var FormFileUploadWidget = ({
         value: localFiles,
         onChange: handleChange,
         disabled: disabled || isUploading,
+        listLayout,
         placeholder: isUploading ? "Uploading..." : def.uploadPlaceholder ?? "Upload File",
         formatsLabel: def.uploadFormats,
-        className: isUploading ? "opacity-70" : void 0
+        className: fieldControlClass(
+          fieldDef,
+          isUploading ? "opacity-70" : void 0
+        )
       }
     ),
-    hasStoredValue && /* @__PURE__ */ jsx("p", { className: "text-xs text-green-600", children: allowMultiple && Array.isArray(value) ? `${value.length} file(s) uploaded` : "File uploaded" }),
-    fieldDef.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: fieldDef.description }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    listLayout && rows.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2 mt-2 list-none p-0 m-0", children: rows.map((row) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center justify-between rounded-md bg-white/50 px-3 py-2.5 text-sm text-[#191919] font-normal tracking-[-0.28px]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate pr-2", children: row.label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || isUploading,
+              onClick: () => removeFileAt(row.index),
+              className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-400 text-white hover:bg-gray-500 disabled:opacity-50",
+              "aria-label": `Remove ${row.label}`,
+              children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 2.5 })
+            }
+          )
+        ]
+      },
+      `${row.index}-${row.label}`
+    )) }) : null,
+    hasStoredValue && !listLayout ? /* @__PURE__ */ jsx("p", { className: "text-xs text-green-600", children: allowMultiple && Array.isArray(value) ? `${value.length} file(s) uploaded` : "File uploaded" }) : null,
+    fieldDef.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(fieldDef, "text-xs text-gray-500"), children: fieldDef.description }),
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var EditableTableWidget = ({
@@ -4264,12 +4480,22 @@ var RadioWidget = ({ fieldId }) => {
     setValue(opt ? opt.value : val);
     setTouched();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { className: showError ? "text-red-600" : "", children: [
-      fieldDef.label,
-      " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+  const showLabel = isLabelVisible(fieldDef);
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(
+      Label,
+      {
+        className: fieldLabelClass(
+          fieldDef,
+          showError ? "text-red-600" : ""
+        ),
+        children: [
+          fieldDef.label,
+          " ",
+          /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+        ]
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       RadioGroup,
       {
@@ -4297,7 +4523,7 @@ var RadioWidget = ({ fieldId }) => {
       }
     ),
     loading && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Loading options..." }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 function isOptionSelected(selected, optValue) {
@@ -4329,16 +4555,29 @@ var CheckboxWidget = ({ fieldId }) => {
     setTouched();
   };
   if (!fieldDef) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { className: showError ? "text-red-600" : "", children: [
-      fieldDef.label,
-      " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+  const showLabel = isLabelVisible(fieldDef);
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(
+      Label,
+      {
+        className: fieldLabelClass(
+          fieldDef,
+          showError ? "text-red-600" : ""
+        ),
+        children: [
+          fieldDef.label,
+          " ",
+          /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+        ]
+      }
+    ) : null,
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `border rounded-md p-3 space-y-2 ${showError ? "border-red-500" : ""} ${disabled || loading ? "opacity-50 pointer-events-none" : ""}`,
+        className: fieldControlClass(
+          fieldDef,
+          `border rounded-md p-3 space-y-2 ${showError ? "border-red-500" : ""} ${disabled || loading ? "opacity-50 pointer-events-none" : ""}`
+        ),
         children: [
           loading && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading options..." }),
           !loading && options.map((opt) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
@@ -4363,8 +4602,8 @@ var CheckboxWidget = ({ fieldId }) => {
         ]
       }
     ),
-    fieldDef.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDef.description }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    fieldDef.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(fieldDef, "text-xs text-muted-foreground"), children: fieldDef.description }),
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var AISuggestionsContext = createContext({});
@@ -5858,24 +6097,31 @@ var HiddenVitalsWidget = ({ fieldId }) => {
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
     " ",
-    fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, "aria-hidden": "true", children: [
-    theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent }),
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        id: fieldId,
-        value: value ?? "",
-        onChange: (e) => setValue(e.target.value),
-        onBlur: setTouched,
-        disabled,
-        className: inputClass,
-        ...height != null && { height }
-      }
-    ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: fieldWrapperClass(fieldDef, wrapperClass),
+      "aria-hidden": "true",
+      children: [
+        theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: labelContent }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: fieldId,
+            value: value ?? "",
+            onChange: (e) => setValue(e.target.value),
+            onBlur: setTouched,
+            disabled,
+            className: fieldControlClass(fieldDef, inputClass),
+            ...height != null && { height }
+          }
+        ),
+        showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
+      ]
+    }
+  );
 };
 function normalizeOptions(response) {
   if (Array.isArray(response)) {
@@ -5960,10 +6206,10 @@ var ReferralWidget = ({ fieldId }) => {
     [selectedItems, setValue, setTouched]
   );
   if (!fieldDef) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       "Referral to ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
     ] }),
     loading && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Loading..." }),
     !loading && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -5978,7 +6224,14 @@ var ReferralWidget = ({ fieldId }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { id: fieldId, className: showError ? "border-red-500" : "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select specializations..." }) }),
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                id: fieldId,
+                className: fieldControlClass(fieldDef, showError ? "border-red-500" : ""),
+                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select specializations..." })
+              }
+            ),
             /* @__PURE__ */ jsxs(SelectContent, { children: [
               availableOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)),
               availableOptions.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-2 px-2 text-sm text-muted-foreground", children: "All specializations selected" })
@@ -6022,7 +6275,7 @@ var ReferralWidget = ({ fieldId }) => {
       selectedItems.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "No specializations selected" }),
       selectedItems.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: "Click a chip to mark as urgent" })
     ] }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var Card = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -6521,29 +6774,41 @@ var SmartTextareaWidget = ({ fieldId }) => {
   const wrapperClass = theme?.wrapperClassName ?? "space-y-2";
   const labelClass = theme?.labelClassName;
   const inputClass = cn(theme?.inputClassName, showError && "border-red-500");
+  const showLabel = isLabelVisible(def);
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     def.label,
     " ",
-    def.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef: def }),
     isProcessing && /* @__PURE__ */ jsx(Loader2, { className: "inline-block ml-1.5 h-3 w-3 animate-spin text-muted-foreground" })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
-    theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent }),
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        id: fieldId,
-        value: textValue,
-        onChange: handleTextChange,
-        onBlur: setTouched,
-        disabled,
-        placeholder: def.placeholder,
-        className: inputClass,
-        ...height != null ? { height } : {}
-      }
-    ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
-  ] });
+  const labelEl = showLabel ? theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(def, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(def), children: labelContent }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: fieldWrapperClass(
+        def,
+        wrapperClass
+      ),
+      children: [
+        labelEl,
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: fieldId,
+            value: textValue,
+            onChange: handleTextChange,
+            onBlur: setTouched,
+            disabled,
+            placeholder: def.placeholder,
+            className: fieldControlClass(def, inputClass),
+            "aria-label": !showLabel ? def.label : void 0,
+            ...height != null ? { height } : {}
+          }
+        ),
+        showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(def, "text-xs text-red-500"), children: error })
+      ]
+    }
+  );
 };
 function normalizeDiagnosisGrades(payload) {
   const result = [];
@@ -6663,10 +6928,11 @@ var DiagnosisTextareaWidget = ({ fieldId }) => {
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     def.label,
     " ",
-    def.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef: def })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
-    theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent }),
+  const showLabel = isLabelVisible(def);
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(def, wrapperClass), children: [
+    showLabel ? theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(def, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(def), children: labelContent }) : null,
     /* @__PURE__ */ jsx(
       Textarea,
       {
@@ -6676,7 +6942,8 @@ var DiagnosisTextareaWidget = ({ fieldId }) => {
         onBlur: setTouched,
         disabled,
         placeholder: def.placeholder,
-        className: inputClass,
+        className: fieldControlClass(def, inputClass),
+        "aria-label": !showLabel ? def.label : void 0,
         ...def.height != null ? { height: def.height } : {}
       }
     ),
@@ -6710,7 +6977,7 @@ var DiagnosisTextareaWidget = ({ fieldId }) => {
         ] }, group.condition))
       }
     ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(def, "text-xs text-red-500"), children: error })
   ] });
 };
 var Switch = React15.forwardRef(
@@ -10030,7 +10297,7 @@ var OrthopedicExamWidget = ({ fieldId }) => {
   return /* @__PURE__ */ jsxs("div", { className: `space-y-4 relative ${disabled ? "opacity-60 pointer-events-none" : ""}`, children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium", children: [
       fieldDef.label,
-      fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" }) : null
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-muted-foreground", children: "Concern" }),
@@ -10221,26 +10488,30 @@ var MarMedicationOrdersWidget = ({ fieldId }) => {
   const theme = getThemeConfig("textarea", fieldDef.theme);
   const wrapperClass = theme?.wrapperClassName ?? "space-y-2";
   const labelClass = theme?.labelClassName;
+  const showLabel = isLabelVisible(fieldDef);
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
     " ",
-    fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
-  const labelEl = theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent });
+  const labelEl = showLabel ? theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: labelContent }) : null;
   const text = typeof value === "string" ? value : value == null ? "" : String(value);
   const hasHandler = typeof handlers.onOpenMedicationOrders === "function";
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, wrapperClass), children: [
     labelEl,
-    fieldDef.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: fieldDef.description }),
+    fieldDef.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(fieldDef, "text-sm text-muted-foreground"), children: fieldDef.description }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           id: fieldId,
-          className: cn(
-            "min-h-[80px] flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm whitespace-pre-wrap",
-            showError && "border-red-500",
-            !text && "text-muted-foreground"
+          className: fieldControlClass(
+            fieldDef,
+            cn(
+              "min-h-[80px] flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm whitespace-pre-wrap",
+              showError && "border-red-500",
+              !text && "text-muted-foreground"
+            )
           ),
           style: height != null ? { minHeight: height } : void 0,
           "aria-readonly": "true",
@@ -10259,7 +10530,7 @@ var MarMedicationOrdersWidget = ({ fieldId }) => {
         }
       )
     ] }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 function parseFieldValue(value) {
@@ -10339,22 +10610,25 @@ var DischargeMedicationOrdersWidget = ({ fieldId }) => {
     [orders, display_lines, setTouched, setValue]
   );
   if (!visible || !fieldDef) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium", children: [
+      /* @__PURE__ */ jsxs(Label, { className: fieldLabelClass(fieldDef, "text-sm font-medium"), children: [
         fieldDef.label,
         " ",
-        fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+        /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
       ] }),
       /* @__PURE__ */ jsx(Button, { type: "button", onClick: onAdd, disabled: disabled || !handlers.onOpenDischargeMedicationOrders, children: "Add medicine" })
     ] }),
-    fieldDef.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: fieldDef.description }),
+    fieldDef.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(fieldDef, "text-sm text-muted-foreground"), children: fieldDef.description }),
     orders.length === 0 ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(
-          "rounded-md border border-input bg-background px-3 py-3 text-sm text-muted-foreground",
-          showError && "border-red-500"
+        className: fieldControlClass(
+          fieldDef,
+          cn(
+            "rounded-md border border-input bg-background px-3 py-3 text-sm text-muted-foreground",
+            showError && "border-red-500"
+          )
         ),
         children: "No medicines added."
       }
@@ -10403,7 +10677,7 @@ var DischargeMedicationOrdersWidget = ({ fieldId }) => {
         ] })
       ] }, o.id);
     }) }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var DEFAULT_TOKEN_SEPARATOR2 = ", ";
@@ -10505,13 +10779,15 @@ var SuggestionTextareaWidget = ({ fieldId }) => {
   const wrapperClass = theme?.wrapperClassName ?? "space-y-2";
   const labelClass = theme?.labelClassName;
   const inputClass = cn(theme?.inputClassName, showError && "border-red-500");
+  const inputWithStyle = fieldControlClass(def, inputClass);
   const height = def.height != null ? typeof def.height === "string" ? Number(def.height) || void 0 : def.height : void 0;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     def.label,
     " ",
-    def.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef: def })
   ] });
-  const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { children: labelContent });
+  const showLabel = isLabelVisible(def);
+  const labelEl = showLabel ? theme ? /* @__PURE__ */ jsx(Label, { className: fieldLabelClass(def, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: fieldLabelClass(def), children: labelContent }) : null;
   const onChipClick = (optValue) => {
     if (disabled) return;
     setValue(toggleSuggestionTokenInText(textValue, String(optValue), appendSeparator, chipAllowedSet));
@@ -10535,7 +10811,7 @@ var SuggestionTextareaWidget = ({ fieldId }) => {
     disabled && "pointer-events-none opacity-50"
   );
   const textareaShellClass = cn(
-    inputClass,
+    inputWithStyle,
     hasShell && cn(
       "mt-0 rounded-t-none rounded-b-md border-0 shadow-none focus-visible:ring-offset-0",
       isHighlightLabel ? "border-t-0" : "min-h-[80px]"
@@ -10557,12 +10833,12 @@ var SuggestionTextareaWidget = ({ fieldId }) => {
       String(opt.value)
     );
   });
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(def, wrapperClass), children: [
     hasVoice ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       labelEl,
       /* @__PURE__ */ jsx(VoiceMicButton, { fieldId, onTranscriptReady: setValue })
     ] }) : labelEl,
-    def.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: def.description }),
+    def.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(def, "text-xs text-muted-foreground"), children: def.description }),
     hasShell ? /* @__PURE__ */ jsxs("div", { className: suggestionShellClass, children: [
       hasSuggestions && /* @__PURE__ */ jsx("div", { className: chipsRowClass, role: "group", "aria-label": suggestionsAria, children: suggestionButtons }),
       hasEmbedded && /* @__PURE__ */ jsx("div", { className: embeddedRowClass, children: embeddedFieldIds.map((id) => /* @__PURE__ */ jsx(EmbeddedSchemaField, { fieldId: id }, id)) }),
@@ -10576,7 +10852,8 @@ var SuggestionTextareaWidget = ({ fieldId }) => {
           disabled,
           className: textareaShellClass,
           placeholder: def.placeholder,
-          style: height != null && Number.isFinite(height) ? { minHeight: height } : void 0
+          style: height != null && Number.isFinite(height) ? { minHeight: height } : void 0,
+          "aria-label": !showLabel ? def.label : void 0
         }
       )
     ] }) : /* @__PURE__ */ jsx(
@@ -10587,12 +10864,13 @@ var SuggestionTextareaWidget = ({ fieldId }) => {
         onChange: (e) => setValue(e.target.value),
         onBlur: setTouched,
         disabled,
-        className: inputClass,
+        className: inputWithStyle,
         placeholder: def.placeholder,
-        style: height != null && Number.isFinite(height) ? { minHeight: height } : void 0
+        style: height != null && Number.isFinite(height) ? { minHeight: height } : void 0,
+        "aria-label": !showLabel ? def.label : void 0
       }
     ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(def, "text-xs text-red-500"), children: error })
   ] });
 };
 var EMPTY_GRADES = { NO: 0, NC: 0, C: 0, PSC: 0 };
@@ -11359,23 +11637,27 @@ var SliderWidget = ({ fieldId }) => {
   const theme = getThemeConfig("textarea", def.theme);
   const wrapperClass = theme?.wrapperClassName ?? "space-y-2";
   const labelClass = theme?.labelClassName;
+  const showLabel = isLabelVisible(def);
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     def.label,
     " ",
-    def.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef: def }),
     /* @__PURE__ */ jsxs("span", { className: "ml-2 text-muted-foreground font-normal tabular-nums", children: [
       num2,
       "/",
       max
     ] })
   ] });
-  const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { children: labelContent });
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+  const labelEl = showLabel ? theme ? /* @__PURE__ */ jsx(Label, { className: fieldLabelClass(def, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: fieldLabelClass(def), children: labelContent }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(def, wrapperClass), children: [
     labelEl,
     /* @__PURE__ */ jsx(
       Slider,
       {
-        className: cn("py-1", showError && "opacity-90 ring-1 ring-red-500 rounded"),
+        className: fieldControlClass(
+          def,
+          cn("py-1", showError && "opacity-90 ring-1 ring-red-500 rounded")
+        ),
         disabled,
         min,
         max,
@@ -11385,10 +11667,11 @@ var SliderWidget = ({ fieldId }) => {
           const n = v[0] ?? min;
           setValue(n);
           setTouched();
-        }
+        },
+        "aria-label": !showLabel ? `${def.label} ${num2}/${max}` : void 0
       }
     ),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(def, "text-xs text-red-500"), children: error })
   ] });
 };
 var CHIEF_CHIPS_FIELD = "chief_complaints_chips";
@@ -11501,7 +11784,7 @@ var GsSmartHistoryWidget = ({ fieldId }) => {
   const labelClass = theme?.labelClassName;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -11904,7 +12187,7 @@ var GsExaminationWidget = ({ fieldId }) => {
   const labelClass = theme?.labelClassName;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -12315,7 +12598,7 @@ var GsGradingWidget = ({ fieldId }) => {
   const labelClass = theme?.labelClassName;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -12374,6 +12657,7 @@ var PainScaleFlagsWidget = ({ fieldId }) => {
   const theme = getThemeConfig("textarea", def.theme);
   const wrapperClass = theme?.wrapperClassName ?? "space-y-2";
   const labelClass = theme?.labelClassName;
+  const showLabel = isLabelVisible(def);
   const update = (next) => {
     setValue(normalizePainScaleFlags(next, { min, max }));
     setTouched();
@@ -12389,16 +12673,16 @@ var PainScaleFlagsWidget = ({ fieldId }) => {
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     def.label,
     " ",
-    def.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef: def })
   ] });
-  const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { children: labelContent });
+  const labelEl = showLabel ? theme ? /* @__PURE__ */ jsx(Label, { className: fieldLabelClass(def, labelClass), children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: fieldLabelClass(def), children: labelContent }) : null;
   const bodyClass = cn(
     "-mt-1 flex min-w-0 flex-col border-t border-[#D0D0D0] bg-white px-3 py-3",
     disabled && "pointer-events-none opacity-60"
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClass, "h-full min-h-0 flex flex-col"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(def, cn(wrapperClass, "h-full min-h-0 flex flex-col")), children: [
     labelEl,
-    def.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: def.description }),
+    def.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(def, "text-xs text-muted-foreground"), children: def.description }),
     /* @__PURE__ */ jsx("div", { className: cn(bodyClass, "min-h-0 flex-1"), children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-slate-700", children: [
@@ -12484,7 +12768,7 @@ var PainScaleFlagsWidget = ({ fieldId }) => {
         ] }) : null
       ] }) : null
     ] }) }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(def, "text-xs text-red-500"), children: error })
   ] });
 };
 var CHIEF_CHIPS_FIELD3 = "chief_complaints_chips";
@@ -12639,7 +12923,7 @@ var UrologySmartHistoryWidget = ({ fieldId }) => {
   const labelClass = theme?.labelClassName;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -13002,7 +13286,7 @@ var UrologyExaminationWidget = ({ fieldId }) => {
   const labelClass = theme?.labelClassName;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -13228,7 +13512,7 @@ var UrologyPathwayWidget = ({ fieldId }) => {
   const subtitle = fieldDef.meta && typeof fieldDef.meta === "object" && fieldDef.meta !== null ? String(fieldDef.meta.subtitle ?? "") : "";
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -13423,7 +13707,7 @@ var OBGExaminationWidget = ({ fieldId }) => {
   const labelClass = theme?.labelClassName;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -13556,7 +13840,7 @@ var OBGPathwayWidget = ({ fieldId }) => {
   const labelClass = theme?.labelClassName;
   const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     fieldDef.label,
-    fieldDef.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
   ] });
   const labelEl = theme ? /* @__PURE__ */ jsx(Label, { className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: labelContent });
   const bodyClass = cn(
@@ -14044,6 +14328,7 @@ var PhoneInputWidget = ({ fieldId }) => {
     return () => clearTimeout(t);
   }, [resendCooldown]);
   if (!fieldDef) return null;
+  const showLabel = isLabelVisible(fieldDef);
   const placeholder = typeof fieldDef.placeholder === "string" && fieldDef.placeholder.trim() ? fieldDef.placeholder : "Enter 10-digit mobile number";
   const handleChange = (e) => {
     const digits = e.target.value.replace(/\D/g, "").slice(0, 10);
@@ -14125,12 +14410,12 @@ var PhoneInputWidget = ({ fieldId }) => {
       isResendingRef.current = false;
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
       " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -14144,11 +14429,15 @@ var PhoneInputWidget = ({ fieldId }) => {
           disabled: disabled || status === "sending",
           placeholder,
           maxLength: 10,
-          className: cn(
-            showError && "border-red-500",
-            status === "sent" && "border-green-500 pr-9",
-            status === "sending" && "pr-9"
-          )
+          className: fieldControlClass(
+            fieldDef,
+            cn(
+              showError && "border-red-500",
+              status === "sent" && "border-green-500 pr-9",
+              status === "sending" && "pr-9"
+            )
+          ),
+          "aria-label": !showLabel ? fieldDef.label : void 0
         }
       ),
       status === "sending" && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxs(
@@ -14201,7 +14490,7 @@ var PhoneInputWidget = ({ fieldId }) => {
       "OTP sent to +91",
       rawPhone
     ] }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error }),
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error }),
     status === "sent" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: "Didn't receive it?" }),
       /* @__PURE__ */ jsx(
@@ -14234,6 +14523,7 @@ var OtpInputWidget = ({ fieldId }) => {
   const isVerifyingRef = useRef(false);
   const showError = !!error && (touched || state.submitAttempted) && status !== "verifying" && status !== "verified";
   if (!fieldDef) return null;
+  const showLabel = isLabelVisible(fieldDef);
   const placeholder = typeof fieldDef.placeholder === "string" && fieldDef.placeholder.trim() ? fieldDef.placeholder : "Enter 4-digit OTP";
   const handleChange = (e) => {
     const digits = e.target.value.replace(/\D/g, "").slice(0, 4);
@@ -14287,12 +14577,12 @@ var OtpInputWidget = ({ fieldId }) => {
       isVerifyingRef.current = false;
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-2"), children: [
+    showLabel ? /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, className: fieldLabelClass(fieldDef), children: [
       fieldDef.label,
       " ",
-      fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-    ] }),
+      /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -14306,12 +14596,16 @@ var OtpInputWidget = ({ fieldId }) => {
           disabled: disabled || status === "verifying" || status === "verified",
           placeholder,
           maxLength: 4,
-          className: cn(
-            "tracking-widest text-center text-lg",
-            showError && "border-red-500",
-            status === "verified" && "border-green-500 pr-9",
-            status === "verifying" && "pr-9"
-          )
+          className: fieldControlClass(
+            fieldDef,
+            cn(
+              "tracking-widest text-center text-lg",
+              showError && "border-red-500",
+              status === "verified" && "border-green-500 pr-9",
+              status === "verifying" && "pr-9"
+            )
+          ),
+          "aria-label": !showLabel ? fieldDef.label : void 0
         }
       ),
       status === "verifying" && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxs(
@@ -14361,7 +14655,7 @@ var OtpInputWidget = ({ fieldId }) => {
       ) })
     ] }),
     status === "verified" && /* @__PURE__ */ jsx("p", { className: "text-xs text-green-600", children: "Mobile number verified successfully" }),
-    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+    showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
 var FieldRenderer = ({ fieldId }) => {
@@ -14465,7 +14759,8 @@ function renderWidget(fieldId, fieldDef) {
       const { value, setValue, setTouched, disabled } = useField(fieldId);
       const store = useFormStore();
       const excludes = fieldDef.excludes ?? [];
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      const showLabel = isLabelVisible(fieldDef);
+      return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "flex items-center gap-3"), children: [
         /* @__PURE__ */ jsx(
           Switch,
           {
@@ -14478,7 +14773,20 @@ function renderWidget(fieldId, fieldDef) {
             }
           }
         ),
-        /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium leading-none cursor-pointer select-none", children: fieldDef.label })
+        showLabel ? /* @__PURE__ */ jsxs(
+          Label,
+          {
+            className: fieldLabelClass(
+              fieldDef,
+              "text-sm font-medium leading-none cursor-pointer select-none"
+            ),
+            children: [
+              fieldDef.label,
+              " ",
+              /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+            ]
+          }
+        ) : null
       ] });
     }
     case "suggestion_textarea":
@@ -14497,10 +14805,19 @@ function renderWidget(fieldId, fieldDef) {
       const size = def.size ?? "regular";
       const labelClass = size === "large" ? "text-base" : "text-sm";
       const descClass = size === "large" ? "text-sm" : "text-xs";
-      return /* @__PURE__ */ jsxs("div", { className: `${labelClass} text-muted-foreground`, children: [
-        def.label,
-        def.description && /* @__PURE__ */ jsx("p", { className: `mt-1 ${descClass} opacity-90`, children: def.description })
-      ] });
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: fieldWrapperClass(
+            def,
+            cn(labelClass, "text-muted-foreground")
+          ),
+          children: [
+            def.label,
+            def.description && /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(def, cn("mt-1", descClass, "opacity-90")), children: def.description })
+          ]
+        }
+      );
     }
     default:
       return /* @__PURE__ */ jsxs("div", { className: "text-red-500", children: [
@@ -15999,6 +16316,6 @@ function createUploadHandler(options) {
   };
 }
 
-export { AddInvestigationField, AddMedicationField, DifferentialDiagnosis, DynamicForm, DynamicFormV2, EMAIL_REGEX, FieldRenderer, FormControls, FormFileUploadWidget, FormProvider, FormStore, ImageUploadWidget, MAR_MEDICATION_ORDERS_META_KEY, MediaUploadWidget, MultiStepForm, ReadOnlyForm, ReadOnlyImageUpload, ReadOnlyMediaUpload, ReadOnlySignature, ReadOnlyTable, RichTextWidget, SignatureUploadWidget, SmartForm, SmartTextareaWidget, Upload3 as Upload, createUploadHandler, evaluateRules, fieldMetaRequestsMarMedicationOrdersButton, useField, useFieldHandlers, useForm, useFormStore, useFrequentItems, usePackages, useSmartKeywords, validateField, validateForm };
+export { AddInvestigationField, AddMedicationField, DifferentialDiagnosis, DynamicForm, DynamicFormV2, EMAIL_REGEX, FieldRenderer, FieldRequiredIndicator, FormControls, FormFileUploadWidget, FormProvider, FormStore, ImageUploadWidget, MAR_MEDICATION_ORDERS_META_KEY, MediaUploadWidget, MultiStepForm, ReadOnlyForm, ReadOnlyImageUpload, ReadOnlyMediaUpload, ReadOnlySignature, ReadOnlyTable, RichTextWidget, SignatureUploadWidget, SmartForm, SmartTextareaWidget, Upload3 as Upload, createUploadHandler, evaluateRules, fieldControlClass, fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldMetaRequestsMarMedicationOrdersButton, fieldWrapperClass, isLabelVisible, useField, useFieldHandlers, useForm, useFormStore, useFrequentItems, usePackages, useSmartKeywords, validateField, validateForm };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map