@algorithm-shift/design-system 1.2.24 → 1.2.26

package/dist/index.mjs

@@ -239,7 +239,15 @@ var TextInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React2.useState("");
   const [error, setError] = React2.useState(null);
+  React2.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -256,9 +264,13 @@ var TextInput = ({ className, style, ...props }) => {
       Input,
       {
         type: "text",
-        className,
-        style,
-        value,
+        name: props.name,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
+        value: props.value || value,
         autoComplete: isAutocomplete ? "on" : "off",
         placeholder,
         onChange: handleChange,
@@ -475,6 +487,7 @@ var __iconNode14 = [
 var Search = createLucideIcon("search", __iconNode14);
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
+import { useEffect as useEffect2 } from "react";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -488,7 +501,15 @@ var NumberInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React3.useState("");
   const [error, setError] = React3.useState(null);
+  useEffect2(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -508,9 +529,13 @@ var NumberInput = ({ className, style, ...props }) => {
         {
           type: "number",
           id: "number-field",
-          value,
-          className,
-          style,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -542,7 +567,15 @@ var EmailInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React4.useState("");
   const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -561,9 +594,13 @@ var EmailInput = ({ className, style, ...props }) => {
         Input,
         {
           type: "email",
-          value,
-          className,
-          style,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -595,7 +632,15 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React5.useState("");
   const [error, setError] = React5.useState(null);
+  React5.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -615,9 +660,13 @@ var PasswordInput = ({ className, style, ...props }) => {
         {
           type: "password",
           id: "password-field",
-          className,
-          style,
-          value,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -667,7 +716,15 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React6.useState("");
   const [error, setError] = React6.useState(null);
+  React6.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -684,9 +741,13 @@ var Textarea2 = ({ className, style, ...props }) => {
       Textarea,
       {
         id: "textarea-field",
-        className,
-        style,
-        value,
+        name: props.name,
+        value: props.value || value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         autoComplete: isAutocomplete ? "on" : "off",
         placeholder,
         onChange: handleChange,
@@ -716,7 +777,15 @@ var UrlInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React7.useState("");
   const [error, setError] = React7.useState(null);
+  React7.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -734,11 +803,15 @@ var UrlInput = ({ className, style, ...props }) => {
       /* @__PURE__ */ jsx16(
         Input,
         {
-          type: "url",
-          className,
-          style,
           id: "url-field",
-          value,
+          type: "url",
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -885,6 +958,9 @@ var MultiCheckbox = ({ className, style, ...props }) => {
 };
 var MultiCheckbox_default = MultiCheckbox;
 
+// src/components/Inputs/RichText/RichText.tsx
+import { useEffect as useEffect7, useState as useState7 } from "react";
+
 // src/components/Global/TinyMceEditor.tsx
 import { useMemo, useRef } from "react";
 import { Editor } from "@tinymce/tinymce-react";
@@ -957,9 +1033,27 @@ function MyEditor({
 }
 
 // src/components/Inputs/RichText/RichText.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-function RichText({ className, style }) {
-  return /* @__PURE__ */ jsx24("div", { className, style, children: /* @__PURE__ */ jsx24(MyEditor, { isDefault: true }) });
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+function RichText({ className, style, ...props }) {
+  const [error, setError] = useState7(null);
+  useEffect7(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(className, error ? "border-red-500" : ""),
+      style: {
+        ...style,
+        borderColor: error ? "#f87171" : style?.borderColor
+      },
+      children: [
+        /* @__PURE__ */ jsx24(MyEditor, { onChange: (content) => props.onChange?.(content), value: props.value, isDefault: true }),
+        error && /* @__PURE__ */ jsx24("p", { className: "mt-1 text-xs text-red-500", children: error })
+      ]
+    }
+  );
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
@@ -967,7 +1061,7 @@ import * as React8 from "react";
 
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
@@ -984,7 +1078,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -1007,7 +1101,7 @@ function SelectContent({
   position = "popper",
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx25(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs12(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -1040,7 +1134,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -1092,7 +1186,7 @@ function SelectScrollDownButton({
 }
 
 // src/components/Global/SelectDropdown.tsx
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function SelectDropdown({
   options,
   placeholder = "Select an option",
@@ -1102,9 +1196,10 @@ function SelectDropdown({
   id,
   disabled,
   readOnly,
-  style
+  style,
+  name
 }) {
-  return /* @__PURE__ */ jsxs12(Select, { value, onValueChange: onChange, disabled, children: [
+  return /* @__PURE__ */ jsxs13(Select, { name, value, onValueChange: onChange, disabled, children: [
     /* @__PURE__ */ jsx26(
       SelectTrigger,
       {
@@ -1120,7 +1215,7 @@ function SelectDropdown({
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var Dropdown = ({ className, style, ...props }) => {
   const text = Array.isArray(props.text) ? props.text : [props.text ?? "Default"];
   const placeholder = props.placeholder ? props.placeholder : "Placeholder text";
@@ -1137,7 +1232,15 @@ var Dropdown = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React8.useState("");
   const [error, setError] = React8.useState(null);
+  React8.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (val) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(val);
+      return;
+    }
     setValue(val);
     if (isRequired && val.trim() === "") {
       setError(errorMessage);
@@ -1147,16 +1250,20 @@ var Dropdown = ({ className, style, ...props }) => {
       setError(null);
     }
   };
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
     /* @__PURE__ */ jsx27("div", { className: "flex gap-3 flex-col", children: /* @__PURE__ */ jsx27(
       SelectDropdown,
       {
         options: formatList,
         placeholder,
         id: "select-field",
-        value,
-        className,
-        style,
+        name: props.name,
+        value: props.value || value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         autoComplete: isAutocomplete ? "on" : "off",
         onChange: handleChange,
         disabled: isDisabled || !isEditable,
@@ -1200,10 +1307,10 @@ function Switch({
 }
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 var SwitchToggle = ({ className, style, ...props }) => {
   const text = Array.isArray(props.text) ? props.text : [props.text ?? "Subscribe"];
-  return /* @__PURE__ */ jsx29("div", { className, style, children: text?.map((item, index) => /* @__PURE__ */ jsxs14("div", { className: "flex items-center space-x-2 mb-2", children: [
+  return /* @__PURE__ */ jsx29("div", { className, style, children: text?.map((item, index) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center space-x-2 mb-2", children: [
     /* @__PURE__ */ jsx29(Switch, { id: `switch-${index}` }),
     /* @__PURE__ */ jsx29(Label, { htmlFor: `switch-${index}`, children: item })
   ] }, index)) });
@@ -1214,7 +1321,7 @@ var SwitchToggle_default = SwitchToggle;
 import * as React9 from "react";
 import { PhoneInput as PhoneInputField } from "react-international-phone";
 import "react-international-phone/style.css";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const [value, setValue] = React9.useState("");
@@ -1225,7 +1332,15 @@ var PhoneInput = ({ className, style, ...props }) => {
   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) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(val);
+      return;
+    }
     if (val.length > noOfCharacters) return;
     setValue(val);
     if (isRequired && val.trim() === "") {
@@ -1236,12 +1351,18 @@ var PhoneInput = ({ className, style, ...props }) => {
       setError(null);
     }
   };
-  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
     /* @__PURE__ */ jsx30(
       PhoneInputField,
       {
         defaultCountry: "in",
-        value,
+        name: props.name,
+        value: props.value || value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         onChange: (phone) => handleChange(phone),
         inputProps: {
           id: "phone-field",
@@ -1249,9 +1370,7 @@ var PhoneInput = ({ className, style, ...props }) => {
         },
         placeholder,
         disabled: isDisabled || !isEditable,
-        required: isRequired,
-        className,
-        style
+        required: isRequired
       }
     ),
     error && /* @__PURE__ */ jsx30("p", { className: "mt-1 text-xs text-red-500", children: error })
@@ -1261,7 +1380,7 @@ var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
 import * as React10 from "react";
-import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const regexPattern = props.regexPattern ?? "";
@@ -1274,7 +1393,15 @@ var SearchInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React10.useState("");
   const [error, setError] = React10.useState(null);
+  React10.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -1286,17 +1413,21 @@ var SearchInput = ({ className, style, ...props }) => {
       setError(null);
     }
   };
-  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex justify-start items-center relative", children: [
+  return /* @__PURE__ */ jsxs17(Fragment9, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex justify-start items-center relative", children: [
       /* @__PURE__ */ jsx31(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
       /* @__PURE__ */ jsx31(
         Input,
         {
           type: "text",
           id: "text-field",
-          className,
-          style,
-          value,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -1314,29 +1445,46 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useState as useState11 } from "react";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  return /* @__PURE__ */ jsxs17("div", { className: "d-flex items-center relative align-middle", children: [
-    /* @__PURE__ */ jsx32("div", { className: "bg-[#E9E9E9] absolute px-10 text-center top-1/2 h-full justify-center items-center flex w-10 -translate-y-1/2 text-[#383838] font-[500] text-[11px]", children: "Browse" }),
+  const [error, setError] = useState11(null);
+  useEffect11(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  return /* @__PURE__ */ jsxs18("div", { className: "d-flex items-center relative align-middle", children: [
     /* @__PURE__ */ jsx32(
       Input,
       {
         type: "file",
         id: "file",
+        name: props.name,
+        value: props.value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         autoComplete: "off",
         placeholder,
-        className,
-        style
+        onChange: (e) => {
+          if (props.hasFormContainer) {
+            props.onChange?.(e);
+            return;
+          }
+        }
       }
-    )
+    ),
+    error && /* @__PURE__ */ jsx32("p", { className: "mt-1 text-xs text-red-500", children: error })
   ] });
 };
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import React11 from "react";
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import React11, { useEffect as useEffect12 } from "react";
+import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
   const minimumDate = props.minimumDate ?? "none";
@@ -1365,7 +1513,15 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
+  useEffect12(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     setValue(val);
     if (isRequired && val.trim() === "") {
@@ -1374,8 +1530,8 @@ function DatePicker({ className, style, ...props }) {
       setError(null);
     }
   };
-  return /* @__PURE__ */ jsxs18(Fragment10, { children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex justify-start items-center relative", children: [
+  return /* @__PURE__ */ jsxs19(Fragment10, { children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex justify-start items-center relative", children: [
       /* @__PURE__ */ jsx33(Calendar, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
       /* @__PURE__ */ jsx33(
         Input,
@@ -1385,14 +1541,18 @@ function DatePicker({ className, style, ...props }) {
           autoComplete: isAutocomplete ? "on" : "off",
           onChange: handleChange,
           disabled: isDisabled || !isEditable,
-          value,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           readOnly: isReadonly,
           required: isRequired,
           placeholder,
           min: minDate,
-          max: maxDate,
-          className,
-          style
+          max: maxDate
         }
       )
     ] }),
@@ -1620,13 +1780,13 @@ function PopoverContent({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var DateRange = ({ className, style }) => {
   const [date, setDate] = React13.useState({
     from: /* @__PURE__ */ new Date(),
     to: addDays(/* @__PURE__ */ new Date(), 7)
   });
-  return /* @__PURE__ */ jsx36("div", { className, style, children: /* @__PURE__ */ jsxs19(Popover, { children: [
+  return /* @__PURE__ */ jsx36("div", { className, style, children: /* @__PURE__ */ jsxs20(Popover, { children: [
     /* @__PURE__ */ jsx36(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx36(
       Button,
       {
@@ -1636,7 +1796,7 @@ var DateRange = ({ className, style }) => {
           "w-[300px] justify-start text-left font-normal text-[11px]",
           !date && "text-muted-foreground"
         ),
-        children: date?.from ? date.to ? /* @__PURE__ */ jsxs19(Fragment11, { children: [
+        children: date?.from ? date.to ? /* @__PURE__ */ jsxs20(Fragment11, { children: [
           format(date.from, "LLL dd, y"),
           " -",
           " ",
@@ -1751,7 +1911,7 @@ function TableCell({ className, ...props }) {
 }
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 function DataTable({
   columns,
   rowActions,
@@ -1776,14 +1936,14 @@ function DataTable({
       onCellClick(rowData, columnId);
     }
   };
-  return /* @__PURE__ */ jsx38("div", { className: "overflow-hidden rounded-md border w-full", children: /* @__PURE__ */ jsxs20(Table, { children: [
+  return /* @__PURE__ */ jsx38("div", { className: "overflow-hidden rounded-md border w-full", children: /* @__PURE__ */ jsxs21(Table, { children: [
     /* @__PURE__ */ jsx38(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx38(TableRow, { children: headerGroup.headers.map((header) => {
       return /* @__PURE__ */ jsx38(TableHead, { children: header.isPlaceholder ? null : flexRender(
         header.column.columnDef.header,
         header.getContext()
       ) }, header.id);
     }) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx38(TableBody, { children: loading ? /* @__PURE__ */ jsx38(TableRow, { children: /* @__PURE__ */ jsx38(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ jsx38(Fragment12, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsx38(TableBody, { children: loading ? /* @__PURE__ */ jsx38(TableRow, { children: /* @__PURE__ */ jsx38(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ jsx38(Fragment12, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs21(
       TableRow,
       {
         "data-state": row.getIsSelected() && "selected",
@@ -1817,7 +1977,7 @@ function DataTable({
 }
 
 // src/components/ui/pagination.tsx
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
   return /* @__PURE__ */ jsx39(
     "nav",
@@ -1873,7 +2033,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -1891,7 +2051,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -1909,7 +2069,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "span",
     {
       "aria-hidden": true,
@@ -1925,7 +2085,7 @@ function PaginationEllipsis({
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -1967,7 +2127,7 @@ var CustomPagination = ({
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ jsx40(Pagination, { children: /* @__PURE__ */ jsxs22(PaginationContent, { children: [
+  return /* @__PURE__ */ jsx40(Pagination, { children: /* @__PURE__ */ jsxs23(PaginationContent, { children: [
     /* @__PURE__ */ jsx40(PaginationItem, { children: /* @__PURE__ */ jsx40(
       PaginationPrevious,
       {
@@ -1996,20 +2156,21 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 var Table2 = ({ columns, data, rowActions, className, style, pagination = false, itemsPerPage = 10, onPageChange }) => {
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const [currentPage, setCurrentPage] = useState11(1);
+  const [currentPage, setCurrentPage] = useState13(1);
   const enablePagination = pagination && rawData.length > itemsPerPage;
   const handlePageChange = (page) => {
     setCurrentPage(page);
     onPageChange?.(page);
   };
-  return /* @__PURE__ */ jsxs23("div", { className: `${className} space-y-3`, style, children: [
-    /* @__PURE__ */ jsx41(DataTable, { columns: rawColumns, data: rawData, rowActions: rawRowActions }),
+  const paginatedData = enablePagination ? rawData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage) : rawData;
+  return /* @__PURE__ */ jsxs24("div", { className: `${className} space-y-3`, style, children: [
+    /* @__PURE__ */ jsx41(DataTable, { columns: rawColumns, data: paginatedData, rowActions: rawRowActions }),
     enablePagination && /* @__PURE__ */ jsx41(
       Pagination_default,
       {
@@ -2024,7 +2185,7 @@ var Table_default = Table2;
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
@@ -2112,7 +2273,7 @@ function DropdownMenuSeparator({
 }
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var Tabs = ({ tabs, className, style, pathname, LinkComponent }) => {
   const rawTabs = Array.isArray(tabs) ? tabs : [];
   const baseClasses = "text-[12px] text-[#E9E9E9] p-2 text-center rounded-md transition-colors border-none outline-none focus:outline-none focus:ring-0 focus:ring-offset-0 cursor-pointer select-none ";
@@ -2130,8 +2291,8 @@ var Tabs = ({ tabs, className, style, pathname, LinkComponent }) => {
     ].join(" ");
     const hasDropdown = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
     if (hasDropdown) {
-      return /* @__PURE__ */ jsxs25(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxs25(
+      return /* @__PURE__ */ jsxs26(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxs26(
           DropdownMenuTrigger,
           {
             className: `${finalClasses} inline-flex items-center gap-1`,
@@ -2167,11 +2328,11 @@ var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
 import React14 from "react";
-import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
-  return /* @__PURE__ */ jsx44("div", { className, style, children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between bg-gray-50 p-2 rounded-lg border border-gray-200 w-full", children: [
+  return /* @__PURE__ */ jsx44("div", { className, style, children: /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between bg-gray-50 p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ jsx44("div", { className: "flex items-center", children: /* @__PURE__ */ jsx44("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx44("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx44("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx44("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs26(React14.Fragment, { children: [
+    /* @__PURE__ */ jsx44("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs27(React14.Fragment, { children: [
       /* @__PURE__ */ jsx44(
         "button",
         {
@@ -2195,9 +2356,9 @@ var Spacer = ({ className, style }) => {
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 var Profile = ({ profileType, showName, userName, className, style }) => {
-  return /* @__PURE__ */ jsx46("div", { className, style, children: /* @__PURE__ */ jsxs27("div", { className: "flex gap-2 items-center justify-between w-30 cursor-pointer", children: [
+  return /* @__PURE__ */ jsx46("div", { className, style, children: /* @__PURE__ */ jsxs28("div", { className: "flex gap-2 items-center justify-between w-30 cursor-pointer", children: [
     showName && /* @__PURE__ */ jsx46("h4", { className: "text-[#000000] dark:text-[#fff] text-[13px] font-[500] mb-0", children: userName }),
     profileType === "avatar" ? /* @__PURE__ */ jsx46(
       "img",
@@ -2213,9 +2374,9 @@ var Profile = ({ profileType, showName, userName, className, style }) => {
 var Profile_default = Profile;
 
 // src/components/Navigation/Notification/Notification.tsx
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 var Notification = ({ className, style, badgeType, badgeCount = 0, hideBadgeWhenZero }) => {
-  return /* @__PURE__ */ jsx47("div", { className, style, children: /* @__PURE__ */ jsxs28("div", { className: "w-[34px] h-[34px] bg-[#E9E9E9] rounded-md text-center flex items-center justify-center relative", children: [
+  return /* @__PURE__ */ jsx47("div", { className, style, children: /* @__PURE__ */ jsxs29("div", { className: "w-[34px] h-[34px] bg-[#E9E9E9] rounded-md text-center flex items-center justify-center relative", children: [
     /* @__PURE__ */ jsx47(
       "img",
       {
@@ -2297,7 +2458,7 @@ var AvatarFallback = React15.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
 function Navbar({
   style,
   badgeType,
@@ -2312,10 +2473,10 @@ function Navbar({
   ImageComponent
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
-  return /* @__PURE__ */ jsx50("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ jsxs29("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-2", children: [
+  return /* @__PURE__ */ jsx50("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ jsxs30("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-2", children: [
     LinkComponent && ImageComponent ? /* @__PURE__ */ jsx50(LinkComponent, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ jsx50(ImageComponent, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx50("span", { className: "font-semibold text-blue-700", children: "Logo" }) }) : /* @__PURE__ */ jsx50("span", { className: "font-semibold text-blue-700", children: "Logo" }),
-    /* @__PURE__ */ jsxs29("div", { className: "flex items-center space-x-3", children: [
-      !isMobileView ? /* @__PURE__ */ jsx50("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs29("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center space-x-3", children: [
+      !isMobileView ? /* @__PURE__ */ jsx50("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs30("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
         /* @__PURE__ */ jsx50(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
         /* @__PURE__ */ jsx50(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
       ] }) }) : /* @__PURE__ */ jsx50(
@@ -2327,14 +2488,14 @@ function Navbar({
           children: /* @__PURE__ */ jsx50(Search, { className: "h-5 w-5 text-gray-400" })
         }
       ),
-      /* @__PURE__ */ jsxs29("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
+      /* @__PURE__ */ jsxs30("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
         /* @__PURE__ */ jsx50(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx50(Bell, { className: "h-5 w-5 text-[#1C1B1F]" }) }),
         badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && badgeCount > 0 ? /* @__PURE__ */ jsx50("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ jsx50("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
       ] }),
-      /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx50(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx50(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center space-x-2", children: [
           !isMobileView && showName && /* @__PURE__ */ jsx50("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: "Akbar Sheriff" }),
-          !isMobileView ? /* @__PURE__ */ jsxs29(Fragment13, { children: [
+          !isMobileView ? /* @__PURE__ */ jsxs30(Fragment13, { children: [
             /* @__PURE__ */ jsx50(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx50(
               AvatarImage,
               {
@@ -2361,7 +2522,7 @@ function Navbar({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs29(DropdownMenuContent, { align: "end", className: "bg-white", children: [
+        /* @__PURE__ */ jsxs30(DropdownMenuContent, { align: "end", className: "bg-white", children: [
           /* @__PURE__ */ jsx50(DropdownMenuLabel, { className: "text-black", children: "My Account" }),
           /* @__PURE__ */ jsx50(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsx50(DropdownMenuItem, { className: "text-black", children: "Profile" }),
@@ -2375,20 +2536,20 @@ function Navbar({
 
 // src/components/Chart/BarChart.tsx
 import { BarChart, Bar, Area, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
-import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
 var ChartComponent = ({ className, style, ...props }) => {
   const data = Array.isArray(props?.data) ? props.data : [];
   const chartType = props.chartType || "bar";
   const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
-  return /* @__PURE__ */ jsx51("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ jsx51(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs30(BarChart, { data, children: [
+  return /* @__PURE__ */ jsx51("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ jsx51(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs31(BarChart, { data, children: [
     /* @__PURE__ */ jsx51(CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ jsx51(XAxis, { dataKey: "name" }),
     /* @__PURE__ */ jsx51(YAxis, {}),
     /* @__PURE__ */ jsx51(Tooltip, {}),
     /* @__PURE__ */ jsx51(Legend, { verticalAlign: legendsPosition, align: "center" }),
     /* @__PURE__ */ jsx51(Bar, { dataKey: "value", fill: "#00695C" })
-  ] }) : /* @__PURE__ */ jsxs30(AreaChart, { data, children: [
-    /* @__PURE__ */ jsx51("defs", { children: /* @__PURE__ */ jsxs30("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+  ] }) : /* @__PURE__ */ jsxs31(AreaChart, { data, children: [
+    /* @__PURE__ */ jsx51("defs", { children: /* @__PURE__ */ jsxs31("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
       /* @__PURE__ */ jsx51("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
       /* @__PURE__ */ jsx51("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
     ] }) }),
@@ -2412,7 +2573,7 @@ var BarChart_default = ChartComponent;
 
 // src/components/Chart/PieChart.tsx
 import { PieChart, Pie, Cell, ResponsiveContainer as ResponsiveContainer2, Tooltip as Tooltip2, LabelList } from "recharts";
-import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
 var DonutChart = ({ className, style, ...props }) => {
   const data = Array.isArray(props?.data) ? props.data : [];
   const total = data.reduce((sum, d) => sum + d.value, 0);
@@ -2423,7 +2584,7 @@ var DonutChart = ({ className, style, ...props }) => {
   const renderLabel = ({ value, x, y }) => {
     if (value == null) return null;
     const percentage = (Number(value) / total * 100).toFixed(0);
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       "text",
       {
         x,
@@ -2445,7 +2606,7 @@ var DonutChart = ({ className, style, ...props }) => {
   const wrapperClass = canvasMode ? forceDesktop ? "flex-row" : "flex-col" : "flex-col md:flex-row";
   const renderLegends = () => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx52(Fragment14, { children: data.map((d) => /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsx52(Fragment14, { children: data.map((d) => /* @__PURE__ */ jsxs32(
       "div",
       {
         className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",
@@ -2463,15 +2624,15 @@ var DonutChart = ({ className, style, ...props }) => {
       d.name
     )) });
   };
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: `relative flex items-center ${wrapperClass} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs31("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          data.length > 0 && /* @__PURE__ */ jsx52(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs31(PieChart, { children: [
-            /* @__PURE__ */ jsxs31(
+        /* @__PURE__ */ jsxs32("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
+          data.length > 0 && /* @__PURE__ */ jsx52(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs32(PieChart, { children: [
+            /* @__PURE__ */ jsxs32(
               Pie,
               {
                 data,
@@ -2497,7 +2658,7 @@ var DonutChart = ({ className, style, ...props }) => {
             ),
             /* @__PURE__ */ jsx52(Tooltip2, { formatter: (value, name) => [`${value}k`, name] })
           ] }) }),
-          /* @__PURE__ */ jsxs31("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
             total,
             "k"
           ] })
@@ -2511,9 +2672,9 @@ var DonutChart = ({ className, style, ...props }) => {
 var PieChart_default = DonutChart;
 
 // src/components/Blocks/EmailComposer.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ jsx53("div", { className, style, children: /* @__PURE__ */ jsxs32("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+  return /* @__PURE__ */ jsx53("div", { className, style, children: /* @__PURE__ */ jsxs33("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
     /* @__PURE__ */ jsx53("div", { className: "mb-3", children: /* @__PURE__ */ jsx53(
       "input",
       {
@@ -2523,7 +2684,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ jsx53("div", { className: "mb-3", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx53("div", { className: "mb-3", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx53(
         "input",
         {
@@ -2583,7 +2744,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
       }
     ) }),
     /* @__PURE__ */ jsx53("div", { className: "mb-4", children: /* @__PURE__ */ jsx53(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ jsxs32("div", { className: "flex justify-end gap-2", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ jsx53("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
       /* @__PURE__ */ jsx53("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
       /* @__PURE__ */ jsx53("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
@@ -2598,8 +2759,8 @@ export {
   DatePicker,
   DateRange_default as DateRange,
   Dropdown_default as Dropdown,
+  EmailInput_default as Email,
   EmailComposer,
-  EmailInput_default as EmailInput,
   FileInput_default as FileInput,
   Flex_default as FlexLayout,
   Grid_default as GridLayout,
@@ -2611,23 +2772,23 @@ export {
   Notification_default as Notification,
   NumberInput_default as NumberInput,
   Pagination_default as Pagination,
-  PasswordInput_default as PasswordInput,
-  PhoneInput_default as PhoneInput,
+  PasswordInput_default as Password,
+  PhoneInput_default as Phone,
   PieChart_default as PieChart,
   Profile_default as Profile,
-  RadioInput_default as RadioInput,
+  RadioInput_default as RadioGroup,
   RichText,
-  SearchInput_default as SearchInput,
+  SearchInput_default as Search,
   Shape_default as Shape,
   Spacer_default as Spacer,
   Stages_default as Stages,
   SwitchToggle_default as SwitchToggle,
   Table_default as Table,
   Tabs_default as Tabs,
-  TextInput_default as TextInput,
+  TextInput_default as Text,
   Textarea_default as Textarea,
   Typography_default as Typography,
-  UrlInput_default as UrlInput,
+  UrlInput_default as URL,
   cn
 };
 /*! Bundled license information: