@apexcura/ui-components 0.0.13-Beta68 → 0.0.13-Beta7

package/dist/index.js

@@ -36,8 +36,6 @@ __export(src_exports, {
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
-  Image: () => Image,
-  MultiSelect: () => MultiSelect,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
@@ -45,7 +43,6 @@ __export(src_exports, {
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
   Sidebar: () => Sidebar,
-  SingleCheckbox: () => SingleCheckbox,
   SingleSelectElement: () => SingleSelectElement,
   TableElement: () => TableElement,
   TextElement: () => TextElement,
@@ -58,12 +55,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var TextElement = (props) => {
-  const handleChange = (e) => {
-    if (props.onChange) {
-      props.onChange(e.target.value);
-    }
-  };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
       placeholder: props.placeholder,
@@ -79,9 +71,7 @@ var TextElement = (props) => {
       className: props.className,
       variant: props.variant,
       name: props.name,
-      onChange: (e) => {
-        handleChange(e);
-      }
+      onChange: (e) => props.onChange(e.target.value)
     }
   ));
 };
@@ -90,46 +80,36 @@ var TextElement = (props) => {
 var import_react2 = __toESM(require("react"));
 var import_icons = require("@ant-design/icons");
 var import_antd2 = require("antd");
-var PasswordElement = (props) => {
+var PasswordElement = ({ inputData }) => {
   const [passwordVisible, setPasswordVisible] = (0, import_react2.useState)(false);
   const handleVisibilityToggle = () => {
     setPasswordVisible((prev) => !prev);
   };
-  const handleChange = (e) => {
-    if (props.onChange) {
-      props.onChange(e.target.value);
-    }
-  };
   const renderVisibilityIcon = (visible) => visible ? /* @__PURE__ */ import_react2.default.createElement(import_icons.EyeTwoTone, null) : /* @__PURE__ */ import_react2.default.createElement(import_icons.EyeInvisibleOutlined, null);
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ import_react2.default.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react2.default.createElement(
+  const renderPasswordInput = () => /* @__PURE__ */ import_react2.default.createElement(
     import_antd2.Input.Password,
     {
-      placeholder: props.placeholder,
-      className: props.className,
-      type: props.type,
-      onChange: (e) => {
-        handleChange(e);
-      },
+      placeholder: inputData.placeholder,
+      id: inputData.id,
+      prefix: inputData.prefix,
+      addonBefore: inputData.addonBefore,
+      type: inputData.type,
       iconRender: renderVisibilityIcon,
-      visibilityToggle: {
-        visible: passwordVisible,
-        onVisibleChange: handleVisibilityToggle
-      }
+      visibilityToggle: { visible: passwordVisible, onVisibleChange: handleVisibilityToggle }
     }
-  ));
+  );
+  return /* @__PURE__ */ import_react2.default.createElement(import_antd2.Space, { direction: "vertical" }, renderPasswordInput(), /* @__PURE__ */ import_react2.default.createElement(import_antd2.Space, { direction: "horizontal" }, renderPasswordInput(), /* @__PURE__ */ import_react2.default.createElement(import_antd2.Button, { style: { width: 80 }, onClick: handleVisibilityToggle }, passwordVisible ? "Hide" : "Show")));
 };
 
 // src/Components/NumberElement.tsx
 var import_react3 = __toESM(require("react"));
 var import_antd3 = require("antd");
 var NumberElement = (props) => {
-  const handleChange = (e) => {
+  const handleInputChange = (e) => {
     const newValue = e.target.value.replace(/[^0-9]/g, "");
-    if (props.onChange) {
-      props.onChange(newValue);
-    }
+    props.onChange(newValue);
   };
-  return /* @__PURE__ */ import_react3.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     import_antd3.Input,
     {
       placeholder: props.placeholder,
@@ -144,11 +124,9 @@ var NumberElement = (props) => {
       className: props.className,
       variant: props.variant,
       name: props.name,
-      onChange: (e) => {
-        handleChange(e);
-      }
+      onChange: handleInputChange
     }
-  ));
+  );
 };
 
 // src/Components/TextareaElement.tsx
@@ -156,12 +134,7 @@ var import_react4 = __toESM(require("react"));
 var import_antd4 = require("antd");
 var { TextArea } = import_antd4.Input;
 var TextareaElement = (props) => {
-  const handleChange = (e) => {
-    if (props.onChange) {
-      props.onChange(e.target.value);
-    }
-  };
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
     TextArea,
     {
       placeholder: props.placeholder,
@@ -175,9 +148,7 @@ var TextareaElement = (props) => {
       name: props.name,
       showCount: true,
       maxLength: props.maxLength,
-      onChange: (e) => {
-        handleChange(e);
-      }
+      onChange: (e) => props.onChange(e.target.value)
     }
   ));
 };
@@ -185,18 +156,24 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 var import_react5 = __toESM(require("react"));
 var import_antd5 = require("antd");
+var labelRender = (props) => {
+  const { label, value } = props;
+  if (label) {
+    return value;
+  }
+  return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
+};
 var SelectElement = (props) => {
   const handleChange = (value) => {
-    console.log("sigleselectvalue----", value);
     if (props.onChange) {
-      const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
-      props.onChange(filterOption2);
+      props.onChange(value);
     }
   };
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     import_antd5.Select,
     {
-      options: props.options,
+      labelRender,
+      options: props.fieldNames,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -208,7 +185,7 @@ var SelectElement = (props) => {
       variant: props.variant,
       onChange: handleChange
     }
-  ));
+  );
 };
 
 // src/Components/RadioElement.tsx
@@ -268,7 +245,9 @@ var CheckboxElement = (props) => {
   const handleChange = (list) => {
     setCheckedList(list);
     if (props.onChange) {
-      const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
+      const selectedOptions = list.map((value) => {
+        return { id: list.indexOf(value), value };
+      });
       props.onChange(selectedOptions);
     }
   };
@@ -290,7 +269,7 @@ var CheckboxElement = (props) => {
       checked: checkAll
     },
     "Check all"
-  ), /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
     CheckboxGroup,
     {
       disabled: props.disabled,
@@ -304,13 +283,59 @@ var CheckboxElement = (props) => {
 };
 
 // src/Components/CkEditor.tsx
-var import_react8 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_tinymce_react = require("@tinymce/tinymce-react");
+var import_react9 = __toESM(require("react"));
 var CkEditor = (props) => {
-  return /* @__PURE__ */ import_react8.default.createElement("div", null);
+  const editorRef = (0, import_react8.useRef)(null);
+  const log = () => {
+    if (editorRef.current) {
+      let content = editorRef.current.getContent();
+      if (props.onChange) {
+        props.onChange(content);
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement(
+    import_tinymce_react.Editor,
+    {
+      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
+      onInit: (_evt, editor) => {
+        if (editor) editorRef.current = editor;
+      },
+      initialValue: "<p>This is the initial content of the editor.</p>",
+      init: {
+        height: 500,
+        menubar: false,
+        plugins: [
+          "advlist",
+          "autolink",
+          "lists",
+          "link",
+          "image",
+          "charmap",
+          "preview",
+          "anchor",
+          "searchreplace",
+          "visualblocks",
+          "code",
+          "fullscreen",
+          "insertdatetime",
+          "media",
+          "table",
+          "code",
+          "help",
+          "wordcount"
+        ],
+        toolbar: "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+        content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
+      }
+    }
+  ), /* @__PURE__ */ import_react9.default.createElement("button", { onClick: log }, "Log editor content"));
 };
 
 // src/Components/Select/SingleSelectElement.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_antd8 = require("antd");
 var onSearch = (value) => {
   console.log("search:", value);
@@ -319,14 +344,12 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
 var SingleSelectElement = (props) => {
   const handleChange = (values) => {
     if (props.onChange) {
-      const option = props.dropDownOptions?.find(
-        (option2) => String(option2.title) === values
-      );
+      const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
       const selectedOption = { id: option?.id, value: values };
       props.onChange([selectedOption]);
     }
   };
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     import_antd8.Select,
     {
       showSearch: true,
@@ -335,17 +358,13 @@ var SingleSelectElement = (props) => {
       onChange: handleChange,
       onSearch,
       filterOption,
-      options: props.dropDownOptions?.map((eachOption) => ({
-        label: String(eachOption.title),
-        value: String(eachOption.title),
-        id: String(eachOption.id)
-      }))
+      options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
     }
   );
 };
 
 // src/Components/Select/MultipleSelectElement.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_antd9 = require("antd");
 var MultipleSelectElement = (props) => {
   const handleChange = (values) => {
@@ -357,7 +376,7 @@ var MultipleSelectElement = (props) => {
       props.onChange(selectedOptions);
     }
   };
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     import_antd9.Select,
     {
       mode: "multiple",
@@ -369,26 +388,26 @@ var MultipleSelectElement = (props) => {
 };
 
 // src/Components/Button.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var ButtonElement = (props) => {
-  return /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "button",
     {
       onClick: () => props.onClick && props.onClick(),
       className: `${props.className ? props.className : ""}`
     },
-    props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { src: props.icon }),
+    props.icon && /* @__PURE__ */ import_react12.default.createElement("img", { src: props.icon }),
     props.label
   );
 };
 
 // src/Components/AddMoreTable.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_antd10 = require("antd");
 var import_icons2 = require("@ant-design/icons");
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
-  const [rows, setRows] = (0, import_react12.useState)(tbody || []);
+  const [rows, setRows] = (0, import_react13.useState)(tbody || []);
   const onHandleRows = () => {
     const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
     let newRow = {
@@ -453,16 +472,16 @@ var AddMoreTable = (props) => {
       });
     });
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     console.log(rows);
   }, [rows]);
   const renderInputElement = (element, value) => {
     if (!element) return null;
     const { element: type, label } = element;
     if (type === "single-select") {
-      return /* @__PURE__ */ import_react12.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
+      return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
     } else if (type === "textarea") {
-      return /* @__PURE__ */ import_react12.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
+      return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
     } else {
       return null;
     }
@@ -479,13 +498,13 @@ var AddMoreTable = (props) => {
     eachRow.variable_data.forEach((variable, subIndex) => {
       Object.keys(variable).forEach((key) => {
         if (key === "SubRows") {
-          rowData[`${key}`] = /* @__PURE__ */ import_react12.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react12.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react12.default.createElement(import_icons2.PlusOutlined, null)));
+          rowData[`${key}`] = /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
         } else {
           rowData[`${key}`] = renderInputElement(variable[key]);
         }
       });
     });
-    rowData.actions = /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react12.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react12.default.createElement(import_icons2.PlusOutlined, null)));
+    rowData.actions = /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
     console.log("=====rowdata", rowData);
     return rowData;
   });
@@ -501,7 +520,7 @@ var AddMoreTable = (props) => {
       key: "actions"
     });
   }
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     import_antd10.Table,
     {
       columns,
@@ -513,44 +532,44 @@ var AddMoreTable = (props) => {
 };
 
 // src/Components/Sidebar.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var Sidebar = (props) => {
   const handleChange = (item) => {
     if (props.onChange) {
       props.onChange(item);
     }
   };
-  return /* @__PURE__ */ import_react13.default.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react13.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
-    return /* @__PURE__ */ import_react13.default.createElement("li", { onClick: () => {
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react14.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ import_react14.default.createElement("li", { onClick: () => {
       handleChange(item);
-    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react13.default.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ import_react13.default.createElement("p", null, item.label));
+    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react14.default.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ import_react14.default.createElement("p", null, item.label));
   })));
 };
 
 // src/Components/Navbar.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 
 // src/Components/Notification.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_antd11 = require("antd");
 var import_io = require("react-icons/io");
 var popoverContentStyle = {
   minWidth: "300px",
   maxWidth: "100%"
 };
-var Notification = (props) => /* @__PURE__ */ import_react14.default.createElement(
+var Notification = (props) => /* @__PURE__ */ import_react15.default.createElement(
   import_antd11.Popover,
   {
     className: props.className,
-    content: /* @__PURE__ */ import_react14.default.createElement("div", { style: popoverContentStyle }, " ", /* @__PURE__ */ import_react14.default.createElement(
+    content: /* @__PURE__ */ import_react15.default.createElement("div", { style: popoverContentStyle }, " ", /* @__PURE__ */ import_react15.default.createElement(
       import_antd11.List,
       {
         itemLayout: "horizontal",
         dataSource: props.items,
-        renderItem: (item, index) => /* @__PURE__ */ import_react14.default.createElement(import_antd11.List.Item, { key: item.text }, /* @__PURE__ */ import_react14.default.createElement(
+        renderItem: (item, index) => /* @__PURE__ */ import_react15.default.createElement(import_antd11.List.Item, { key: item.text }, /* @__PURE__ */ import_react15.default.createElement(
           import_antd11.List.Item.Meta,
           {
-            avatar: /* @__PURE__ */ import_react14.default.createElement(import_antd11.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
+            avatar: /* @__PURE__ */ import_react15.default.createElement(import_antd11.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
             title: item.text,
             description: item.time
           }
@@ -560,51 +579,51 @@ var Notification = (props) => /* @__PURE__ */ import_react14.default.createEleme
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__PURE__ */ import_react14.default.createElement(import_antd11.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react14.default.createElement(import_antd11.Badge, { size: "small", count: props.count }, /* @__PURE__ */ import_react14.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react14.default.createElement(import_io.IoIosNotifications, null))))
+  /* @__PURE__ */ import_react15.default.createElement(import_antd11.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react15.default.createElement(import_antd11.Badge, { size: "small", count: props.count }, /* @__PURE__ */ import_react15.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react15.default.createElement(import_io.IoIosNotifications, null))))
 );
 
 // src/Components/SpanElement.tsx
-var import_react15 = __toESM(require("react"));
-var SpanElement = (props) => /* @__PURE__ */ import_react15.default.createElement("span", { className: props.className }, props.label);
+var import_react16 = __toESM(require("react"));
+var SpanElement = (props) => /* @__PURE__ */ import_react16.default.createElement("span", { className: props.className }, props.label);
 
 // src/Components/Profile.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_antd12 = require("antd");
 var import_icons3 = require("@ant-design/icons");
-var Profile = (props) => /* @__PURE__ */ import_react16.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react16.default.createElement(import_antd12.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react16.default.createElement(import_icons3.UserOutlined, null) }), /* @__PURE__ */ import_react16.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react16.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react16.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
+var Profile = (props) => /* @__PURE__ */ import_react17.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react17.default.createElement(import_antd12.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react17.default.createElement(import_icons3.UserOutlined, null) }), /* @__PURE__ */ import_react17.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react17.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react17.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
 
 // src/Components/Navbar.tsx
 var Navbar = (props) => {
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className: `${props.className}`, key: props.name }, props.items && props.items.map((item) => {
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: `${props.className}`, key: props.name }, props.items && props.items.map((item) => {
     if (item.element === "span") {
-      return /* @__PURE__ */ import_react17.default.createElement(SpanElement, { ...item });
+      return /* @__PURE__ */ import_react18.default.createElement(SpanElement, { ...item });
     } else if (item.element === "notifications") {
-      return /* @__PURE__ */ import_react17.default.createElement(Notification, { ...item });
+      return /* @__PURE__ */ import_react18.default.createElement(Notification, { ...item });
     } else if (item.name === "profile") {
-      return /* @__PURE__ */ import_react17.default.createElement(Profile, { ...item });
+      return /* @__PURE__ */ import_react18.default.createElement(Profile, { ...item });
     }
     return null;
   }));
 };
 
 // src/Components/TableElement.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_antd14 = require("antd");
 
 // src/Components/Model.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_antd13 = require("antd");
 
 // src/Components/ModelBody.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var ModelBody = (props) => {
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
+  return /* @__PURE__ */ import_react19.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
     if (eachField.element === "div") {
-      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, eachField.label);
+      return /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, eachField.label);
     } else if (eachField.element === "input-radio") {
-      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(RadioElement, { ...eachField }));
+      return /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(RadioElement, { ...eachField }));
     } else if (eachField.element === "button") {
-      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(ButtonElement, { ...eachField }));
+      return /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(ButtonElement, { ...eachField }));
     } else {
       return null;
     }
@@ -614,7 +633,7 @@ var ModelBody = (props) => {
 // src/Components/Model.tsx
 var ModelElement = (props) => {
   const { model, onCancel, selectedRecord, columns } = props;
-  return /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     import_antd13.Modal,
     {
       centered: true,
@@ -622,7 +641,7 @@ var ModelElement = (props) => {
       onCancel,
       footer: null,
       width: 850,
-      title: /* @__PURE__ */ import_react19.default.createElement(
+      title: /* @__PURE__ */ import_react20.default.createElement(
         "div",
         {
           style: {
@@ -635,19 +654,19 @@ var ModelElement = (props) => {
         },
         Object.entries(selectedRecord).map(([key, value]) => {
           const record = columns.filter((eachColumn) => eachColumn.key === key);
-          return record.length > 0 ? /* @__PURE__ */ import_react19.default.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value)) : "";
+          return record.length > 0 ? /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ import_react20.default.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value)) : "";
         })
       )
     },
-    /* @__PURE__ */ import_react19.default.createElement(ModelBody, { ...props })
+    /* @__PURE__ */ import_react20.default.createElement(ModelBody, { ...props })
   );
 };
 
 // src/Components/TableElement.tsx
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  const [selectedRecord, setSelectedRecord] = (0, import_react20.useState)({});
-  const [model, setModel] = (0, import_react20.useState)(false);
+  const [selectedRecord, setSelectedRecord] = (0, import_react21.useState)({});
+  const [model, setModel] = (0, import_react21.useState)(false);
   const handleChange = (record) => {
     if (props.onChange) {
       props.onChange(record);
@@ -682,7 +701,7 @@ var TableElement = (props) => {
     [columns[0].key]: index + 1
   }));
   const count = dataSource ? dataSource.length : 0;
-  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
     import_antd14.Table,
     {
       pagination: {
@@ -705,16 +724,16 @@ var TableElement = (props) => {
         };
       }
     }
-  ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
+  ), model && /* @__PURE__ */ import_react21.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
 
 // src/Components/DatePicker.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_antd15 = require("antd");
 var import_icons4 = require("@ant-design/icons");
 var import_moment = __toESM(require("moment"));
 var DatePickerElement = (props) => {
-  const [date, setDate] = (0, import_react21.useState)(null);
+  const [date, setDate] = (0, import_react22.useState)(null);
   const handleChange = (date2, dateString) => {
     console.log("date---------", date2);
     console.log("datestring", dateString);
@@ -749,7 +768,7 @@ var DatePickerElement = (props) => {
       props.onChange(newDate.format("lll"));
     }
   };
-  return /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("button", { onClick: onHandleDecrement }, /* @__PURE__ */ import_react21.default.createElement(import_icons4.LeftOutlined, null)), /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleDecrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.LeftOutlined, null)), /* @__PURE__ */ import_react22.default.createElement(
     import_antd15.DatePicker,
     {
       placeholder: props.placeholder,
@@ -757,11 +776,11 @@ var DatePickerElement = (props) => {
       variant: "borderless",
       onChange: handleChange
     }
-  ), /* @__PURE__ */ import_react21.default.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ import_react21.default.createElement(import_icons4.RightOutlined, null)));
+  ), /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.RightOutlined, null)));
 };
 
 // src/Components/DateRangePickerElement.tsx
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_antd16 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
 var DateRangePickerElement = (props) => {
@@ -779,175 +798,33 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [(0, import_dayjs.default)().add(-30, "d"), (0, import_dayjs.default)()] },
     { label: "Last 90 Days", value: [(0, import_dayjs.default)().add(-90, "d"), (0, import_dayjs.default)()] }
   ];
-  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
 // src/Components/UploadElement.tsx
-var import_react23 = __toESM(require("react"));
-var import_antd17 = require("antd");
+var import_react24 = __toESM(require("react"));
 var import_icons5 = require("@ant-design/icons");
-var UploadElement = (props) => {
-  const [files, setFiles] = (0, import_react23.useState)([]);
-  const [previewTitle, setPreviewTitle] = (0, import_react23.useState)(null);
-  const [previewOpen, setPreviewOpen] = (0, import_react23.useState)(false);
-  const [previewType, setPreviewType] = (0, import_react23.useState)(null);
-  const [previewImage, setPreviewImage] = (0, import_react23.useState)(null);
-  const uploadChange = (fileList) => {
-    if (!fileList || fileList.length === 0) return;
-    console.log("------------", props.value);
-    const newFileList = [...files];
-    console.log(newFileList);
-    for (let i = 0; i < fileList.length; i++) {
-      const selectedFile = fileList[i];
-      const isCorrectFile = ["image/png", "image/jpg", "image/jpeg"].includes(
-        selectedFile.type
-      );
-      if (!isCorrectFile) {
-        import_antd17.Modal.error({
-          title: `(${selectedFile.name}) is an invalid file.`,
-          content: `Please upload files with the following extensions only (.png/.jpg/.jpeg)`,
-          zIndex: 1022
-        });
-        return;
-      }
-      const newFile = {
-        uid: `id${Math.random().toString(16).slice(2)}`,
-        name: selectedFile.name,
-        status: "done",
-        type: selectedFile.type,
-        size: selectedFile.size,
-        url: URL.createObjectURL(selectedFile),
-        originFileObj: selectedFile
-      };
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target?.result) {
-          newFile.thumbUrl = e.target.result.toString();
-        }
-      };
-      reader.readAsDataURL(selectedFile);
-      newFileList.push(newFile);
-    }
-    setFiles(newFileList);
-    props.onChange && props.onChange({
-      name: props.name,
-      value: newFileList
-    });
-  };
-  const handleCancel = () => {
-    setPreviewImage(null);
-    setPreviewType(null);
-    setPreviewOpen(false);
-    setPreviewTitle(null);
-  };
-  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "native-camera-lib" }, /* @__PURE__ */ import_react23.default.createElement("p", { className: "flat-label text-capitalize" }, props.label), /* @__PURE__ */ import_react23.default.createElement("label", { className: "native-camera-button" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "ant-btn" }, /* @__PURE__ */ import_react23.default.createElement(import_icons5.UploadOutlined, null), " ", props.max_count ? `Upload (Max:${props.max_count})` : "Upload"), /* @__PURE__ */ import_react23.default.createElement(
-    "input",
-    {
-      id: "upload",
-      type: "file",
-      accept: "image/*;capture=camera",
-      multiple: true,
-      onChange: (e) => uploadChange(e.target.files)
+var import_antd17 = require("antd");
+var uploadProps = {
+  name: "file",
+  multiple: true,
+  action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
+  headers: {
+    authorization: "authorization-text"
+  },
+  onChange(info) {
+    if (info.file.status !== "uploading") {
+      console.log(info.file, info.fileList);
     }
-  )), /* @__PURE__ */ import_react23.default.createElement(
-    import_antd17.Upload,
-    null,
-    props.list_type === "picture-card" && /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement(import_icons5.PlusOutlined, null), /* @__PURE__ */ import_react23.default.createElement("div", { style: { marginTop: 8 } }, "Upload ", /* @__PURE__ */ import_react23.default.createElement("small", { className: "d-flex" }, "(Max:", props.max_count, ")"))),
-    props.list_type === "picture" && /* @__PURE__ */ import_react23.default.createElement(import_antd17.Button, { icon: /* @__PURE__ */ import_react23.default.createElement(import_icons5.UploadOutlined, null) }, props.feildData.max_count ? `Upload (Max:${props.max_count})` : "Upload")
-  ), props.errors && props.errors.length > 0 && props.errors.map(
-    (error, eKey) => /* @__PURE__ */ import_react23.default.createElement("small", { key: eKey, className: "text-danger animated flash" }, error.message)
-  ), /* @__PURE__ */ import_react23.default.createElement(
-    import_antd17.Modal,
-    {
-      open: previewOpen,
-      width: "100%",
-      zIndex: 1025,
-      centered: true,
-      maskClosable: false,
-      title: previewTitle,
-      footer: null,
-      onCancel: handleCancel,
-      destroyOnClose: true
-    },
-    /* @__PURE__ */ import_react23.default.createElement(import_antd17.Tooltip, { title: "Close", placement: "bottom" }, /* @__PURE__ */ import_react23.default.createElement(
-      import_icons5.CloseOutlined,
-      {
-        className: "border popup-close",
-        onClick: handleCancel
-      }
-    )),
-    previewType === "application/pdf" || previewType === "pdf" ? /* @__PURE__ */ import_react23.default.createElement(
-      "iframe",
-      {
-        title: "document",
-        style: { width: "95vw", height: "40vw" },
-        src: `${previewImage}#toolbar=0`
-      }
-    ) : /* @__PURE__ */ import_react23.default.createElement(
-      "img",
-      {
-        alt: "image",
-        src: previewImage || void 0,
-        className: "d-flex mx-auto w-100"
-      }
-    )
-  )));
-};
-
-// src/Components/Image.tsx
-var import_react24 = __toESM(require("react"));
-var Image = (props) => {
-  return /* @__PURE__ */ import_react24.default.createElement("div", null, /* @__PURE__ */ import_react24.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
-};
-
-// src/Components/SingleCheckbox.tsx
-var import_react25 = __toESM(require("react"));
-var import_antd18 = require("antd");
-var SingleCheckbox = (props) => {
-  const handleChange = (e) => {
-    if (props.onChange) {
-      props.onChange(e.target.checked);
+    if (info.file.status === "done") {
+      import_antd17.message.success(`${info.file.name} file uploaded successfully`);
+    } else if (info.file.status === "error") {
+      import_antd17.message.error(`${info.file.name} file upload failed.`);
     }
-  };
-  return /* @__PURE__ */ import_react25.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  }
 };
-
-// src/Components/MultiSelect.tsx
-var import_react26 = __toESM(require("react"));
-var import_antd19 = require("antd");
-var MultiSelect = (props) => {
-  const [selectedValue, setSelectedValue] = (0, import_react26.useState)({ firstValue: {}, secondValue: {} });
-  const handleFirstChange = (value) => {
-    if (props.onChange) {
-      const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
-      console.log("filterOption1--------", filterOption2);
-      setSelectedValue((prev) => ({ ...prev, firstValue: filterOption2 && filterOption2 }));
-      props.onChange(selectedValue.firstValue && selectedValue);
-    }
-  };
-  const handleSecondChange = (value) => {
-    if (props.onChange) {
-      const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
-      console.log("filterOption2--------", filterOption2);
-      setSelectedValue((prev) => ({ ...prev, secondValue: filterOption2 && filterOption2 }));
-      props.onChange(selectedValue.secondValue && selectedValue);
-    }
-  };
-  return /* @__PURE__ */ import_react26.default.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ import_react26.default.createElement(
-    import_antd19.Select,
-    {
-      onChange: handleFirstChange,
-      variant: props.variant,
-      options: props.options
-    }
-  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react26.default.createElement(
-    import_antd19.Select,
-    {
-      onChange: handleSecondChange,
-      variant: props.variant,
-      options: props.options
-    }
-  ));
+var UploadElement = (props) => {
+  return /* @__PURE__ */ import_react24.default.createElement(import_antd17.Upload, { ...uploadProps }, /* @__PURE__ */ import_react24.default.createElement(import_antd17.Button, { icon: /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null) }, "Click to Upload"));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -957,8 +834,6 @@ var MultiSelect = (props) => {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
-  Image,
-  MultiSelect,
   MultipleSelectElement,
   Navbar,
   NumberElement,
@@ -966,7 +841,6 @@ var MultiSelect = (props) => {
   RadioElement,
   SelectElement,
   Sidebar,
-  SingleCheckbox,
   SingleSelectElement,
   TableElement,
   TextElement,