@algorithm-shift/design-system 1.2.41 → 1.2.43

package/dist/index.js

@@ -43,7 +43,8 @@ __export(index_exports, {
   EmailComposer: () => EmailComposer,
   FileInput: () => FileInput_default,
   FlexLayout: () => Flex_default,
-  Form: () => Wrapper_default,
+  Form: () => Form_default,
+  FormWrapper: () => Wrapper_default,
   GridLayout: () => Grid_default,
   Image: () => Image_default,
   Modal: () => Modal_default,
@@ -677,9 +678,6 @@ function SplitButton({ style, textContent, className, list = [], LinkComponent }
   ] });
 }
 
-// src/components/Inputs/TextInput/TextInput.tsx
-var React2 = __toESM(require("react"));
-
 // src/components/ui/input.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
@@ -707,11 +705,6 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React2.useState(null);
-  React2.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -721,10 +714,10 @@ var TextInput = ({ className, style, ...props }) => {
       {
         type: "text",
         name: props.name,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         value: props.value,
         autoComplete: isAutocomplete ? "on" : "off",
@@ -734,14 +727,12 @@ var TextInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
-var React3 = __toESM(require("react"));
-var import_react4 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -749,11 +740,6 @@ var NumberInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React3.useState(null);
-  (0, import_react4.useEffect)(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -767,10 +753,10 @@ var NumberInput = ({ className, style, ...props }) => {
           id: props.name || "number-field",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -780,13 +766,12 @@ var NumberInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
-var React4 = __toESM(require("react"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -794,11 +779,6 @@ var EmailInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React4.useState(null);
-  React4.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -811,10 +791,10 @@ var EmailInput = ({ className, style, ...props }) => {
           type: "email",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -824,13 +804,12 @@ var EmailInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-var React5 = __toESM(require("react"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -838,11 +817,6 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React5.useState(null);
-  React5.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -856,10 +830,10 @@ var PasswordInput = ({ className, style, ...props }) => {
           id: props.name || "password-field",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -869,14 +843,11 @@ var PasswordInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var PasswordInput_default = PasswordInput;
 
-// src/components/Inputs/Textarea/Textarea.tsx
-var React6 = __toESM(require("react"));
-
 // src/components/ui/textarea.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Textarea({ className, ...props }) {
@@ -901,11 +872,6 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React6.useState(null);
-  React6.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -916,10 +882,10 @@ var Textarea2 = ({ className, style, ...props }) => {
         id: "textarea-field",
         name: props.name,
         value: props.value,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         autoComplete: isAutocomplete ? "on" : "off",
         placeholder,
@@ -928,13 +894,12 @@ var Textarea2 = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
-var React7 = __toESM(require("react"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -942,11 +907,6 @@ var UrlInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React7.useState(null);
-  React7.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -960,10 +920,10 @@ var UrlInput = ({ className, style, ...props }) => {
           type: "url",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -973,14 +933,11 @@ var UrlInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var UrlInput_default = UrlInput;
 
-// src/components/Inputs/Checkbox/Checkbox.tsx
-var import_react5 = require("react");
-
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -1035,11 +992,6 @@ var CheckboxInput = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
-  const [error, setError] = (0, import_react5.useState)(null);
-  (0, import_react5.useEffect)(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -1056,14 +1008,11 @@ var CheckboxInput = ({ className, style, ...props }) => {
       ),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label2, { htmlFor: props.name || "checkbox", children: text })
     ] }) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Checkbox_default = CheckboxInput;
 
-// src/components/Inputs/RadioInput/RadioInput.tsx
-var import_react6 = require("react");
-
 // src/components/ui/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -1117,11 +1066,6 @@ var RadioInput = ({
   dataLabel,
   ...props
 }) => {
-  const [error, setError] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const options = (data || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
@@ -1145,13 +1089,13 @@ var RadioInput = ({
         ]
       }
     ) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-var import_react7 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var MultiCheckbox = ({
   className,
@@ -1164,12 +1108,12 @@ var MultiCheckbox = ({
   isEditable = true,
   isDisabled = false
 }) => {
-  const [value, setValue] = (0, import_react7.useState)(propValue);
+  const [value, setValue] = (0, import_react4.useState)(propValue);
   const options = (data || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (key, checked) => {
       setValue((prev) => {
         const newValue = { ...prev, [key]: checked };
@@ -1204,11 +1148,8 @@ var MultiCheckbox = ({
 };
 var MultiCheckbox_default = MultiCheckbox;
 
-// src/components/Inputs/RichText/RichText.tsx
-var import_react9 = require("react");
-
 // src/components/Global/TinyMceEditor.tsx
-var import_react8 = require("react");
+var import_react5 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function MyEditor({
@@ -1216,7 +1157,7 @@ function MyEditor({
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react8.useRef)(null);
+  const editorRef = (0, import_react5.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -1228,7 +1169,7 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react8.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react5.useMemo)(() => {
     let toolbar = "undo redo | formatselect | bold italic forecolor";
     if (isDefault) {
       toolbar = "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help";
@@ -1281,30 +1222,22 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function RichText({ className, style, ...props }) {
-  const [error, setError] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
-      className: cn(className, error ? "border-red-500" : ""),
+      className: cn(className, props.errorMessage ? "border-red-500" : ""),
       style: {
         ...style,
-        borderColor: error ? "#f87171" : style?.borderColor
+        borderColor: props.errorMessage ? "#f87171" : style?.borderColor
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MyEditor, { onChange: (content) => props.onChange?.(content), value: props.value, isDefault: true }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+        props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
       ]
     }
   );
 }
 
-// src/components/Inputs/Dropdown/Dropdown.tsx
-var React8 = __toESM(require("react"));
-
 // src/components/ui/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -1439,11 +1372,6 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  const [error, setError] = React8.useState(null);
-  React8.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -1459,10 +1387,10 @@ var Dropdown = ({ className, style, ...props }) => {
         SelectTrigger,
         {
           id: props.name || "select-field",
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           "aria-readonly": isReadonly,
           children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectValue, { placeholder })
@@ -1470,14 +1398,11 @@ var Dropdown = ({ className, style, ...props }) => {
       ),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectContent, { children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Dropdown_default = Dropdown;
 
-// src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-var import_react10 = require("react");
-
 // src/components/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -1512,11 +1437,6 @@ var import_jsx_runtime31 = require("react/jsx-runtime");
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  const [error, setError] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -1533,13 +1453,12 @@ var SwitchToggle = ({ className, style, ...props }) => {
       ),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label2, { htmlFor: props.name || "switch", children: props.text })
     ] }) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-var React9 = __toESM(require("react"));
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -1547,11 +1466,6 @@ var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  const [error, setError] = React9.useState(null);
-  React9.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (val) => {
     props.onChange?.(val);
   };
@@ -1562,10 +1476,10 @@ var PhoneInput = ({ className, style, ...props }) => {
         defaultCountry: "in",
         name: props.name,
         value: props.value,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         onChange: (phone) => handleChange(phone),
         inputProps: {
@@ -1575,13 +1489,12 @@ var PhoneInput = ({ className, style, ...props }) => {
         disabled: isDisabled || !isEditable
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-var React10 = __toESM(require("react"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1589,11 +1502,6 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React10.useState(null);
-  React10.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -1607,10 +1515,10 @@ var SearchInput = ({ className, style, ...props }) => {
           id: props.name || "text-field",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -1620,21 +1528,15 @@ var SearchInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-var import_react11 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  const [error, setError] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Input,
@@ -1643,10 +1545,10 @@ var FileInput = ({ className, style, ...props }) => {
         id: "file",
         name: props.name,
         value: props.value,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         autoComplete: "off",
         placeholder,
@@ -1655,13 +1557,12 @@ var FileInput = ({ className, style, ...props }) => {
         }
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var import_react12 = __toESM(require("react"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1673,7 +1574,6 @@ function DatePicker({ className, style, ...props }) {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = import_react12.default.useState(null);
   const resolveDate = (option, customOption) => {
     if (!option) return void 0;
     switch (option) {
@@ -1688,10 +1588,6 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  (0, import_react12.useEffect)(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -1710,12 +1606,12 @@ function DatePicker({ className, style, ...props }) {
           value: props.value,
           className: cn(
             className,
-            error ? "border-red-500" : "",
+            props.errorMessage ? "border-red-500" : "",
             "appearance-auto"
           ),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           readOnly: isReadonly,
           placeholder,
@@ -1724,16 +1620,16 @@ function DatePicker({ className, style, ...props }) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-var React13 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
 
 // src/components/ui/calendar.tsx
-var React12 = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var import_react_day_picker = require("react-day-picker");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function Calendar2({
@@ -1888,8 +1784,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  const ref = React12.useRef(null);
-  React12.useEffect(() => {
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -1950,18 +1846,13 @@ function PopoverContent({
 // src/components/Inputs/DateRange/DateRange.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var DateRange = ({ className, style, ...props }) => {
-  const [error, setError] = React13.useState(null);
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React13.useState(
+  const [date, setDate] = React3.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: (0, import_date_fns.addDays)(/* @__PURE__ */ new Date(), 7)
     }
   );
-  React13.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     setDate(value);
     if (value) {
@@ -1998,13 +1889,12 @@ var DateRange = ({ className, style, ...props }) => {
         }
       ) })
     ] }) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-var React14 = __toESM(require("react"));
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -2012,11 +1902,6 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React14.useState(null);
-  React14.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -2028,7 +1913,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
           "flex justify-start items-center relative border border-input rounded-md bg-transparent focus-within:ring-2 focus-within:ring-ring focus-within:border-primary",
           className,
           "p-0 m-0",
-          error ? "border-red-500" : ""
+          props.errorMessage ? "border-red-500" : ""
         ),
         children: [
           prepend && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
@@ -2045,7 +1930,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
               ),
               style: {
                 ...style,
-                borderColor: error ? "#f87171" : style?.borderColor
+                borderColor: props.errorMessage ? "#f87171" : style?.borderColor
               },
               autoComplete: isAutocomplete ? "on" : "off",
               placeholder,
@@ -2058,7 +1943,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
         ]
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInputGroup_default = TextInputGroup;
@@ -2397,7 +2282,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_react13 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var Table2 = ({
   columns,
@@ -2414,7 +2299,7 @@ var Table2 = ({
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const [currentPage, setCurrentPage] = (0, import_react13.useState)(1);
+  const [currentPage, setCurrentPage] = (0, import_react6.useState)(1);
   const enablePagination = pagination && rawData.length > itemsPerPage;
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -2535,12 +2420,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, LinkComponent, pathname, can
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react14 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center justify-between bg-gray-50 p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react14.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react7.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "button",
         {
@@ -2573,10 +2458,10 @@ var import_jsx_runtime49 = require("react/jsx-runtime");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React16 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var Avatar = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var Avatar = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -2588,7 +2473,7 @@ var Avatar = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var AvatarImage = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -2597,7 +2482,7 @@ var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var AvatarFallback = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -2961,7 +2846,7 @@ function showSonnerToast({
 }
 
 // src/components/StateManagment/StateContext.tsx
-var import_react15 = require("react");
+var import_react8 = require("react");
 
 // src/components/StateManagment/stateReducer.ts
 function stateReducer(state, action) {
@@ -2975,17 +2860,17 @@ function stateReducer(state, action) {
 
 // src/components/StateManagment/StateContext.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var StateContext = (0, import_react15.createContext)(null);
+var StateContext = (0, import_react8.createContext)(null);
 function StateProvider({ children }) {
-  const [state, dispatch] = (0, import_react15.useReducer)(stateReducer, {});
+  const [state, dispatch] = (0, import_react8.useReducer)(stateReducer, {});
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateContext.Provider, { value: { state, dispatch }, children });
 }
 function useAppState() {
-  return (0, import_react15.useContext)(StateContext);
+  return (0, import_react8.useContext)(StateContext);
 }
 
-// src/components/Form/Wrapper.tsx
-var import_react16 = __toESM(require("react"));
+// src/components/Form/Form.tsx
+var import_react9 = __toESM(require("react"));
 var import_zod = require("@hookform/resolvers/zod");
 var import_react_hook_form = require("react-hook-form");
 var import_zod2 = require("zod");
@@ -3058,14 +2943,14 @@ function generateZodSchema(data) {
   }, {});
   return import_zod2.z.object(fields);
 }
-var FormWrapper = ({
+var Form = ({
   validation,
   defaultValues,
   children,
   onSubmit,
   onReset
 }) => {
-  const schema = (0, import_react16.useMemo)(() => {
+  const schema = (0, import_react9.useMemo)(() => {
     if (!validation || validation.length === 0) return null;
     return generateZodSchema(validation);
   }, [validation]);
@@ -3093,9 +2978,9 @@ var FormWrapper = ({
       className: cn(
         "space-y-4 min-h-[100px] h-auto flex justify-between flex-col"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "min-h-[50px]", children: import_react16.default.Children.map(children, (child) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "min-h-[50px]", children: import_react9.default.Children.map(children, (child) => {
         const processChild = (child2) => {
-          if (import_react16.default.isValidElement(child2)) {
+          if (import_react9.default.isValidElement(child2)) {
             const node = child2.props?.node;
             if (node?.category === "Form Controls") {
               const name = node.properties?.name || "unnamed";
@@ -3106,7 +2991,7 @@ var FormWrapper = ({
                   control,
                   render: ({ field: controllerField }) => {
                     const childElement = child2;
-                    return import_react16.default.cloneElement(childElement, {
+                    return import_react9.default.cloneElement(childElement, {
                       input: {
                         ...controllerField,
                         value: controllerField.value || "",
@@ -3122,11 +3007,11 @@ var FormWrapper = ({
             }
             if (child2.props?.children) {
               const childElement = child2;
-              return import_react16.default.cloneElement(childElement, {
-                children: import_react16.default.Children.map(childElement.props.children, processChild)
+              return import_react9.default.cloneElement(childElement, {
+                children: import_react9.default.Children.map(childElement.props.children, processChild)
               });
             }
-            return import_react16.default.cloneElement(child2);
+            return import_react9.default.cloneElement(child2);
           }
           return child2;
         };
@@ -3135,6 +3020,116 @@ var FormWrapper = ({
     }
   );
 };
+var Form_default = Form;
+
+// src/components/Form/Wrapper.tsx
+var import_react10 = require("react");
+var import_zod3 = require("@hookform/resolvers/zod");
+var import_react_hook_form2 = require("react-hook-form");
+var import_zod4 = require("zod");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function generateZodSchema2(data) {
+  const fields = data.reduce((acc, f) => {
+    const name = f.name || "unnamed";
+    const message = f.message || `${name} is invalid`;
+    const passwordLen = f.passwordLength;
+    let fieldSchema = import_zod4.z.string({ message });
+    switch (f.type) {
+      case "Text":
+      case "Search":
+        fieldSchema = import_zod4.z.string({ message });
+        if (f?.min && f?.min !== "") fieldSchema = fieldSchema.min(f.min);
+        else if (f.isRequired) fieldSchema = fieldSchema.min(1, { message: `${message}. Cannot be empty` });
+        if (f?.max && f?.max !== "") fieldSchema = fieldSchema.max(f.max);
+        if (f?.email) fieldSchema = fieldSchema.email();
+        if (f?.url) fieldSchema = fieldSchema.url();
+        if (f?.regex) fieldSchema = fieldSchema.regex(new RegExp(f.regex));
+        break;
+      case "Email":
+        fieldSchema = import_zod4.z.email({ message });
+        break;
+      case "Password":
+        fieldSchema = import_zod4.z.string({ message }).min(passwordLen, { message: `Password must be at least ${passwordLen} characters long` });
+        break;
+      case "Phone":
+        fieldSchema = import_zod4.z.string().transform((val) => val.replace(/\D/g, "")).transform((val) => val.slice(-10)).refine((val) => {
+          return val.length === 10;
+        }, {
+          message: "Phone number must be 10 digits long"
+        });
+        break;
+      case "DatePicker":
+        fieldSchema = import_zod4.z.iso.date({ message });
+        break;
+      case "FileInput":
+        fieldSchema = import_zod4.z.instanceof(File, { message: "Please select a file" });
+        if (f?.maxSize) {
+          fieldSchema = fieldSchema.refine(
+            (file) => file.size <= f.maxSize,
+            { message: `File size must be less than ${f.maxSize / 1024 / 1024}MB` }
+          );
+        }
+        if (f?.acceptedTypes) {
+          fieldSchema = fieldSchema.refine(
+            (file) => f.acceptedTypes.includes(file.type),
+            { message: `File type must be one of: ${f.acceptedTypes.join(", ")}` }
+          );
+        }
+        break;
+      case "Checkbox":
+        fieldSchema = import_zod4.z.boolean({ message });
+        break;
+      case "Dropdown":
+        fieldSchema = import_zod4.z.string({ message });
+        break;
+      case "NumberInput":
+        fieldSchema = import_zod4.z.number({ message });
+        if (f?.min !== void 0) fieldSchema = fieldSchema.min(f.min);
+        if (f?.max !== void 0) fieldSchema = fieldSchema.max(f.max);
+        break;
+      default:
+        fieldSchema = import_zod4.z.any();
+    }
+    if (!f.isRequired) fieldSchema = fieldSchema.optional();
+    acc[name] = fieldSchema;
+    return acc;
+  }, {});
+  return import_zod4.z.object(fields);
+}
+var FormWrapper = ({
+  validation,
+  defaultValues,
+  children,
+  onSubmit,
+  onReset
+}) => {
+  const schema = (0, import_react10.useMemo)(() => {
+    if (!validation || validation.length === 0) return null;
+    return generateZodSchema2(validation);
+  }, [validation]);
+  const form = (0, import_react_hook_form2.useForm)({
+    resolver: schema ? (0, import_zod3.zodResolver)(schema) : void 0,
+    defaultValues
+  });
+  const formSubmit = (data) => {
+    if (onSubmit) onSubmit(data);
+  };
+  const handleReset = () => {
+    form.reset();
+    if (onReset) onReset();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "form",
+    {
+      onSubmit: form.handleSubmit(formSubmit),
+      onReset: handleReset,
+      className: cn(
+        "space-y-4 min-h-[100px] h-auto flex justify-between flex-col"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "min-h-[50px]", children: typeof children === "function" ? children(form) : children })
+    }
+  );
+};
 var Wrapper_default = FormWrapper;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -3152,6 +3147,7 @@ var Wrapper_default = FormWrapper;
   FileInput,
   FlexLayout,
   Form,
+  FormWrapper,
   GridLayout,
   Image,
   Modal,