@apexcura/ui-components 0.0.15-Beta11 → 0.0.15-Beta13

package/dist/index.js

@@ -31,15 +31,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AddMoreTable: () => AddMoreTable,
+  BarChart: () => BarChart,
   ButtonElement: () => ButtonElement,
   CheckboxElement: () => CheckboxElement,
+  CircleDonut: () => CircleDonut,
   CkEditor: () => CkEditor,
+  ColorPickerElement: () => ColorPickerElement,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
-  Donut: () => Donut_default,
+  DivContainer: () => DivContainer,
+  DoubleBarChart: () => DoubleBarChart,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
+  HorizontalBarChart: () => HorizontalBarChart,
   Image: () => Image,
+  LineChart: () => LineChart,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
@@ -47,6 +53,7 @@ __export(src_exports, {
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
+  SemiCircleDonut: () => SemiCircleDonut,
   Sidebar: () => Sidebar,
   SingleCheckbox: () => SingleCheckbox,
   SingleSelectElement: () => SingleSelectElement,
@@ -160,20 +167,19 @@ var TextareaElement = (props) => {
       props.onChange(e.target.value);
     }
   };
+  const defaultMinRows = 2;
+  const defaultMaxRows = 6;
   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(
     TextArea,
     {
       placeholder: props.placeholder,
       allowClear: true,
-      defaultValue: props.defaultValue,
       disabled: props.disabled,
       id: props.name,
-      status: props.status,
+      autoSize: { minRows: props.minRows ? props.minRows : defaultMinRows, maxRows: props.maxRows ? props.maxRows : defaultMaxRows },
       className: props.className,
-      variant: props.variant,
       name: props.name,
       showCount: true,
-      maxLength: props.maxLength,
       onChange: (e) => {
         handleChange(e);
       }
@@ -184,13 +190,14 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 var import_react5 = __toESM(require("react"));
 var import_antd5 = require("antd");
+var filterOptions = (input, option) => {
+  return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+};
 var SelectElement = (props) => {
   const handleChange = (value) => {
-    console.log("++=====", typeof value);
     if (props.onChange) {
       if (typeof value === "string") {
         const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
-        console.log(filterOption2);
         props.onChange(filterOption2);
       } else {
         const selectedOptions = value ? value.map((eachVal) => {
@@ -200,21 +207,17 @@ var SelectElement = (props) => {
       }
     }
   };
-  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("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: props.name, className: props.className }, props.label), /* @__PURE__ */ import_react5.default.createElement(
     import_antd5.Select,
     {
-      mode: props.mode,
       options: props.options,
       placeholder: props.placeholder,
       allowClear: true,
-      defaultValue: props.defaultValue,
-      disabled: props.disabled,
-      id: props.name,
-      status: props.status,
-      style: props.styles,
+      filterOption: filterOptions,
+      showSearch: true,
       className: props.className,
-      variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange,
+      mode: props.mode
     }
   ));
 };
@@ -229,7 +232,6 @@ var RadioElement = (props) => {
   const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
   const handleChange = (option) => {
-    console.log(option);
     setSelectedValue(option);
     setIsDisabled(true);
     if (props.onChange) {
@@ -281,7 +283,7 @@ var CheckboxElement = (props) => {
     }
   };
   const onHandleAllChanges = (e) => {
-    const newList = e.target.checked ? props.options : [];
+    const newList = e.target.checked ? props.options : [""];
     setCheckedList(newList);
     if (props.onChange) {
       props.onChange(newList);
@@ -321,7 +323,6 @@ var CkEditor = (props) => {
 var import_react9 = __toESM(require("react"));
 var import_antd8 = require("antd");
 var onSearch = (value) => {
-  console.log("search:", value);
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
 var SingleSelectElement = (props) => {
@@ -377,87 +378,166 @@ var MultipleSelectElement = (props) => {
 };
 
 // src/Components/Button.tsx
+var import_react12 = __toESM(require("react"));
+
+// src/constants/icons.tsx
 var import_react11 = __toESM(require("react"));
-var ButtonElement = (props) => {
-  const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
-  const [originalSvgContent, setOriginalSvgContent] = (0, import_react11.useState)(null);
-  const [hoverColor, setHoverColor] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
-    if (props.icon) {
-      fetch(props.icon).then((response) => response.text()).then((data) => {
-        const tempDiv = document.createElement("div");
-        tempDiv.innerHTML = data;
-        const svgElement = tempDiv.querySelector("svg");
-        if (svgElement) {
-          const textColorClass = props.className?.match(/text-[\w-]+/g)?.[0];
-          const hoverColorClass = props.className?.match(/hover:text-[\w-]+/g)?.[0];
-          if (textColorClass) {
-            const tempSpan = document.createElement("span");
-            tempSpan.className = textColorClass;
-            document.body.appendChild(tempSpan);
-            const computedColor = getComputedStyle(tempSpan).color;
-            document.body.removeChild(tempSpan);
-            const paths = svgElement.querySelectorAll("path");
-            paths.forEach((path) => path.setAttribute("fill", computedColor));
-          }
-          if (hoverColorClass) {
-            const tempSpan = document.createElement("span");
-            tempSpan.className = hoverColorClass.replace("hover:", "");
-            document.body.appendChild(tempSpan);
-            const computedHoverColor = getComputedStyle(tempSpan).color;
-            document.body.removeChild(tempSpan);
-            setHoverColor(computedHoverColor);
-          }
-          svgElement.setAttribute(
-            "class",
-            `${props.iconsClassName ? props.iconsClassName : ""}`
-          );
-          setSvgContent(tempDiv.innerHTML);
-          setOriginalSvgContent(tempDiv.innerHTML);
-        }
-      }).catch((error) => console.error("Error fetching SVG:", error));
-    }
-  }, [props.icon, props.className]);
-  const handleMouseEnter = () => {
-    if (hoverColor && originalSvgContent) {
-      const tempDiv = document.createElement("div");
-      tempDiv.innerHTML = originalSvgContent;
-      const svgElement = tempDiv.querySelector("svg");
-      const paths = svgElement?.querySelectorAll("path");
-      paths?.forEach((path) => path.setAttribute("fill", hoverColor));
-      setSvgContent(tempDiv.innerHTML);
+var icons = {
+  download: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M6.39023 19.49H18.9902C19.2452 19.49 19.459 19.5763 19.6315 19.7488C19.804 19.9213 19.8902 20.135 19.8902 20.39C19.8902 20.645 19.804 20.8588 19.6315 21.0313C19.459 21.2038 19.2452 21.29 18.9902 21.29H6.39023C6.13523 21.29 5.92148 21.2038 5.74898 21.0313C5.57648 20.8588 5.49023 20.645 5.49023 20.39C5.49023 20.135 5.57648 19.9213 5.74898 19.7488C5.92148 19.5763 6.13523 19.49 6.39023 19.49ZM12.6902 17.1275C12.5552 17.1275 12.424 17.0975 12.2965 17.0375C12.169 16.9775 12.0602 16.8875 11.9702 16.7675L7.51523 11.0525C7.29023 10.7525 7.26023 10.4338 7.42523 10.0963C7.59023 9.75879 7.86023 9.59004 8.23523 9.59004H9.99023V4.19004C9.99023 3.93504 10.0765 3.72129 10.249 3.54879C10.4215 3.37629 10.6352 3.29004 10.8902 3.29004H14.4902C14.7452 3.29004 14.959 3.37629 15.1315 3.54879C15.304 3.72129 15.3902 3.93504 15.3902 4.19004V9.59004H17.1452C17.5202 9.59004 17.7902 9.75879 17.9552 10.0963C18.1202 10.4338 18.0902 10.7525 17.8652 11.0525L13.4102 16.7675C13.3202 16.8875 13.2115 16.9775 13.084 17.0375C12.9565 17.0975 12.8252 17.1275 12.6902 17.1275Z",
+      fill: "#505050"
     }
-  };
-  const handleMouseLeave = () => {
-    if (originalSvgContent) {
-      setSvgContent(originalSvgContent);
+  )),
+  save: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 27 27", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M18.4602 4.67108H6.6883C5.5994 4.67108 4.72632 5.55397 4.72632 6.63306V20.3669C4.72632 21.446 5.5994 22.3289 6.6883 22.3289H20.4222C21.5013 22.3289 22.3842 21.446 22.3842 20.3669V8.59505L18.4602 4.67108ZM13.5552 20.3669C11.9268 20.3669 10.6123 19.0524 10.6123 17.424C10.6123 15.7955 11.9268 14.481 13.5552 14.481C15.1837 14.481 16.4982 15.7955 16.4982 17.424C16.4982 19.0524 15.1837 20.3669 13.5552 20.3669ZM16.4982 10.557H6.6883V6.63306H16.4982V10.557Z",
+      fill: "#A3A3A3"
     }
-  };
-  return /* @__PURE__ */ import_react11.default.createElement(
+  )),
+  filter: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M3.92978 5.0621C6.21468 7.99174 10.4338 13.4212 10.4338 13.4212V20.208C10.4338 20.8301 10.9428 21.3391 11.5649 21.3391H13.8272C14.4493 21.3391 14.9584 20.8301 14.9584 20.208V13.4212C14.9584 13.4212 19.1662 7.99174 21.4511 5.0621C22.028 4.31555 21.4963 3.24097 20.5575 3.24097H4.82338C3.88454 3.24097 3.3529 4.31555 3.92978 5.0621Z",
+      fill: "#505050"
+    }
+  )),
+  logout: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M4.3457 3.87939C3.79342 3.87939 3.3457 4.32711 3.3457 4.87939V20.441C3.3457 20.9933 3.79342 21.441 4.3457 21.441H13.8618C14.4141 21.441 14.8618 20.9933 14.8618 20.441V15.1346C14.8618 14.8585 14.6379 14.6346 14.3618 14.6346H8.03954C7.48725 14.6346 7.03954 14.1869 7.03954 13.6346V10.7859C7.03954 10.2336 7.48725 9.78585 8.03954 9.78585H14.3618C14.6379 9.78585 14.8618 9.562 14.8618 9.28585V4.87939C14.8618 4.32711 14.4141 3.87939 13.8618 3.87939H4.3457Z",
+      fill: "#505050"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M16.6159 7.55579L15.2915 8.88016L17.7511 11.3397H8.10205V13.2317H17.7511L15.2915 15.6912L16.6159 17.0156L21.3458 12.2857L16.6159 7.55579Z",
+      fill: "#505050"
+    }
+  )),
+  patient: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M11.9997 15.8119C12.379 15.8119 12.7012 15.679 12.9664 15.4132C13.2322 15.148 13.3651 14.8258 13.3651 14.4465V13.5363H14.2753C14.6546 13.5363 14.9768 13.4034 15.242 13.1376C15.5078 12.8724 15.6407 12.5502 15.6407 12.1709C15.6407 11.7916 15.5078 11.4694 15.242 11.2042C14.9768 10.9384 14.6546 10.8055 14.2753 10.8055H13.3651V9.8953C13.3651 9.51604 13.2322 9.19381 12.9664 8.92863C12.7012 8.66284 12.379 8.52994 11.9997 8.52994C11.6204 8.52994 11.2982 8.66284 11.033 8.92863C10.7672 9.19381 10.6343 9.51604 10.6343 9.8953V10.8055H9.72409C9.34483 10.8055 9.0226 10.9384 8.75742 11.2042C8.49163 11.4694 8.35873 11.7916 8.35873 12.1709C8.35873 12.5502 8.49163 12.8724 8.75742 13.1376C9.0226 13.4034 9.34483 13.5363 9.72409 13.5363H10.6343V14.4465C10.6343 14.8258 10.7672 15.148 11.033 15.4132C11.2982 15.679 11.6204 15.8119 11.9997 15.8119ZM11.9997 21.6602H11.7721C11.6963 21.6602 11.628 21.645 11.5673 21.6146C9.57997 20.9926 7.94154 19.7599 6.65203 17.9163C5.36253 16.0734 4.71777 14.0369 4.71777 11.8068V7.50592C4.71777 7.12665 4.82791 6.78531 5.04819 6.4819C5.26786 6.17849 5.55216 5.95851 5.90109 5.82198L11.3625 3.77394C11.5749 3.69808 11.7873 3.66016 11.9997 3.66016C12.2121 3.66016 12.4245 3.69808 12.6369 3.77394L18.0983 5.82198C18.4472 5.95851 18.7318 6.17849 18.9521 6.4819C19.1718 6.78531 19.2816 7.12665 19.2816 7.50592V11.8068C19.2816 14.0369 18.6369 16.0734 17.3474 17.9163C16.0578 19.7599 14.4194 20.9926 12.4321 21.6146C12.3562 21.645 12.2121 21.6602 11.9997 21.6602Z",
+      fill: "#505050"
+    }
+  )),
+  refresh: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M18.346 5.64739C17.4032 4.69617 16.2589 3.96885 14.9974 3.51916C13.7359 3.06947 12.3895 2.90888 11.0577 3.04926C6.92991 3.46541 3.53322 6.81712 3.07208 10.9449C2.45347 16.3998 6.67122 21 11.9912 21C13.6897 21 15.3533 20.5181 16.7888 19.6102C18.2242 18.7023 19.3726 17.4058 20.1005 15.8712C20.4604 15.1176 19.9206 14.2516 19.0883 14.2516C18.6721 14.2516 18.2785 14.4765 18.0985 14.8477C17.4455 16.2525 16.3286 17.3896 14.9357 18.0676C13.5428 18.7456 11.9588 18.9232 10.4503 18.5706C7.95342 18.0195 5.94015 15.9837 5.41152 13.4868C5.18931 12.4996 5.19188 11.475 5.41905 10.4889C5.64622 9.50282 6.09217 8.58042 6.72392 7.78992C7.35566 6.99943 8.15704 6.36107 9.06878 5.92207C9.98052 5.48307 10.9793 5.25466 11.9912 5.25374C13.8583 5.25374 15.5229 6.0298 16.7376 7.25576L15.0392 8.95411C14.3307 9.66269 14.8255 10.8774 15.8265 10.8774H19.8643C20.4829 10.8774 20.9891 10.3713 20.9891 9.75267V5.71488C20.9891 4.71386 19.7744 4.20773 19.0658 4.91632L18.346 5.64739Z",
+      fill: "#595959"
+    }
+  )),
+  scheduler: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M19 4.58746H18V2.56927H16V4.58746H8V2.56927H6V4.58746H5C3.89 4.58746 3.01 5.49564 3.01 6.60564L3 20.7329C3 21.8429 3.89 22.7511 5 22.7511H19C20.1 22.7511 21 21.8429 21 20.7329V6.60564C21 5.49564 20.1 4.58746 19 4.58746ZM19 20.7329H5V10.642H19V20.7329ZM9 14.6784H7V12.6602H9V14.6784ZM13 14.6784H11V12.6602H13V14.6784ZM17 14.6784H15V12.6602H17V14.6784ZM9 18.7147H7V16.6965H9V18.7147ZM13 18.7147H11V16.6965H13V18.7147ZM17 18.7147H15V16.6965H17V18.7147Z",
+      fill: "#505050"
+    }
+  )),
+  add: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 26 27", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M21.4869 14.7981H13.9193V22.3657H11.3967V14.7981H3.8291V12.2755H11.3967V4.70789H13.9193V12.2755H21.4869V14.7981Z",
+      fill: "white"
+    }
+  )),
+  bot: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M5 21.6602C4.71667 21.6602 4.47917 21.5644 4.2875 21.3727C4.09583 21.181 4 20.9435 4 20.6602V16.6602C4 16.1102 4.19583 15.6394 4.5875 15.2477C4.97917 14.856 5.45 14.6602 6 14.6602H18C18.55 14.6602 19.0208 14.856 19.4125 15.2477C19.8042 15.6394 20 16.1102 20 16.6602V20.6602C20 20.9435 19.9042 21.181 19.7125 21.3727C19.5208 21.5644 19.2833 21.6602 19 21.6602H5ZM9 13.6602C7.61667 13.6602 6.4375 13.1727 5.4625 12.1977C4.4875 11.2227 4 10.0435 4 8.66019C4 7.27685 4.4875 6.09769 5.4625 5.12269C6.4375 4.14769 7.61667 3.66019 9 3.66019H15C16.3833 3.66019 17.5625 4.14769 18.5375 5.12269C19.5125 6.09769 20 7.27685 20 8.66019C20 10.0435 19.5125 11.2227 18.5375 12.1977C17.5625 13.1727 16.3833 13.6602 15 13.6602H9ZM9 9.66019C9.28333 9.66019 9.52083 9.56435 9.7125 9.37269C9.90417 9.18102 10 8.94352 10 8.66019C10 8.37685 9.90417 8.13935 9.7125 7.94769C9.52083 7.75602 9.28333 7.66019 9 7.66019C8.71667 7.66019 8.47917 7.75602 8.2875 7.94769C8.09583 8.13935 8 8.37685 8 8.66019C8 8.94352 8.09583 9.18102 8.2875 9.37269C8.47917 9.56435 8.71667 9.66019 9 9.66019ZM15 9.66019C15.2833 9.66019 15.5208 9.56435 15.7125 9.37269C15.9042 9.18102 16 8.94352 16 8.66019C16 8.37685 15.9042 8.13935 15.7125 7.94769C15.5208 7.75602 15.2833 7.66019 15 7.66019C14.7167 7.66019 14.4792 7.75602 14.2875 7.94769C14.0958 8.13935 14 8.37685 14 8.66019C14 8.94352 14.0958 9.18102 14.2875 9.37269C14.4792 9.56435 14.7167 9.66019 15 9.66019Z",
+      fill: "#505050"
+    }
+  )),
+  campaign: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M20.0152 13.5174C19.6907 13.5174 19.419 13.4074 19.1999 13.1876C18.98 12.9685 18.8701 12.6967 18.8701 12.3723C18.8701 12.0479 18.98 11.7757 19.1999 11.5559C19.419 11.3368 19.6907 11.2272 20.0152 11.2272H22.3053C22.6298 11.2272 22.9015 11.3368 23.1206 11.5559C23.3405 11.7757 23.4504 12.0479 23.4504 12.3723C23.4504 12.6967 23.3405 12.9685 23.1206 13.1876C22.9015 13.4074 22.6298 13.5174 22.3053 13.5174H20.0152ZM19.3281 20.8459L17.496 19.4718C17.2288 19.2809 17.0761 19.0328 17.038 18.7275C16.9998 18.4221 17.0761 18.1359 17.267 17.8687C17.4578 17.6015 17.7059 17.4488 18.0113 17.4106C18.3166 17.3725 18.6029 17.4488 18.8701 17.6397L20.7022 19.0138C20.9694 19.2046 21.1221 19.4527 21.1602 19.7581C21.1984 20.0634 21.1221 20.3497 20.9312 20.6169C20.7404 20.884 20.4923 21.0367 20.1869 21.0749C19.8816 21.1131 19.5953 21.0367 19.3281 20.8459ZM18.8701 7.10493C18.6029 7.29578 18.3166 7.37212 18.0113 7.33395C17.7059 7.29578 17.4578 7.1431 17.267 6.87592C17.0761 6.60873 16.9998 6.32246 17.038 6.01711C17.0761 5.71176 17.2288 5.46366 17.496 5.27281L19.3281 3.89871C19.5953 3.70787 19.8816 3.63153 20.1869 3.6697C20.4923 3.70787 20.7404 3.86055 20.9312 4.12773C21.1221 4.39492 21.1984 4.68118 21.1602 4.98654C21.1221 5.29189 20.9694 5.53999 20.7022 5.73084L18.8701 7.10493ZM3.98406 21.6602V15.8075H2.83899C2.20919 15.8075 1.67024 15.5831 1.22213 15.1342C0.773264 14.6861 0.548828 14.1472 0.548828 13.5174V11.2272C0.548828 10.5974 0.773264 10.0581 1.22213 9.60922C1.67024 9.16111 2.20919 8.93706 2.83899 8.93706H7.4193L11.3984 6.5324C11.7801 6.30338 12.1668 6.30338 12.5584 6.5324C12.9493 6.76141 13.1447 7.09539 13.1447 7.53434V17.2103C13.1447 17.6492 12.9493 17.9832 12.5584 18.2122C12.1668 18.4412 11.7801 18.4412 11.3984 18.2122L7.4193 15.8075H6.27422V21.6602H3.98406ZM14.2898 16.2083V8.53628C14.8051 8.99431 15.2203 9.55273 15.5356 10.2115C15.8501 10.8696 16.0074 11.5898 16.0074 12.3723C16.0074 13.1548 15.8501 13.875 15.5356 14.5331C15.2203 15.1919 14.8051 15.7503 14.2898 16.2083Z",
+      fill: "#505050"
+    }
+  )),
+  "chatbot-white-border": /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 33 34", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M20.7249 1.17695H21.1499V1.1766C27.1029 1.40539 31.8779 6.41961 31.8779 12.5765V22.1994C31.8779 28.3489 27.0016 33.3184 21.0054 33.3184H2.1677C1.21133 33.3184 0.425039 32.5301 0.425039 31.5332V12.296C0.425039 6.14663 5.3011 1.17695 11.306 1.17695H20.7249Z",
+      fill: "#472D7A",
+      stroke: "white",
+      "stroke-width": "0.850077"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M9.24976 13.3416C7.92364 13.3416 6.85254 14.4382 6.85254 15.7898C6.85254 17.1414 7.92364 18.238 9.24976 18.238C10.5759 18.238 11.647 17.1414 11.647 15.7898C11.647 14.4382 10.5759 13.3416 9.24976 13.3416Z",
+      fill: "white"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M23.2839 13.3416C21.9578 13.3416 20.8867 14.4382 20.8867 15.7898C20.8867 17.1414 21.9578 18.238 23.2839 18.238C24.6101 18.238 25.6812 17.1414 25.6812 15.7898C25.6812 14.4382 24.6101 13.3416 23.2839 13.3416Z",
+      fill: "white"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M19.5011 23.5C18.362 23.7125 17.1634 23.8316 15.9223 23.8316C14.6811 23.8316 13.4825 23.7125 12.3434 23.5C11.7399 23.3895 11.3743 24.2566 11.8844 24.6986C13.0405 25.7017 14.4261 26.2883 15.9223 26.2883C17.4184 26.2883 18.804 25.7017 19.9601 24.6986C20.4702 24.2566 20.1046 23.381 19.5011 23.5Z",
+      fill: "white"
+    }
+  )),
+  dashboard: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M5.3457 21.6602C4.7957 21.6602 4.3247 21.4645 3.9327 21.0732C3.54137 20.6812 3.3457 20.2102 3.3457 19.6602V5.66016C3.3457 5.11016 3.54137 4.63916 3.9327 4.24716C4.3247 3.85582 4.7957 3.66016 5.3457 3.66016H9.3457C9.8957 3.66016 10.3667 3.85582 10.7587 4.24716C11.15 4.63916 11.3457 5.11016 11.3457 5.66016V19.6602C11.3457 20.2102 11.15 20.6812 10.7587 21.0732C10.3667 21.4645 9.8957 21.6602 9.3457 21.6602H5.3457ZM15.3457 10.6602C14.7957 10.6602 14.325 10.4642 13.9337 10.0722C13.5417 9.68082 13.3457 9.21016 13.3457 8.66016V5.66016C13.3457 5.11016 13.5417 4.63916 13.9337 4.24716C14.325 3.85582 14.7957 3.66016 15.3457 3.66016H19.3457C19.8957 3.66016 20.3667 3.85582 20.7587 4.24716C21.15 4.63916 21.3457 5.11016 21.3457 5.66016V8.66016C21.3457 9.21016 21.15 9.68082 20.7587 10.0722C20.3667 10.4642 19.8957 10.6602 19.3457 10.6602H15.3457ZM15.3457 21.6602C14.7957 21.6602 14.325 21.4645 13.9337 21.0732C13.5417 20.6812 13.3457 20.2102 13.3457 19.6602V14.6602C13.3457 14.1102 13.5417 13.6392 13.9337 13.2472C14.325 12.8558 14.7957 12.6602 15.3457 12.6602H19.3457C19.8957 12.6602 20.3667 12.8558 20.7587 13.2472C21.15 13.6392 21.3457 14.1102 21.3457 14.6602V19.6602C21.3457 20.2102 21.15 20.6812 20.7587 21.0732C20.3667 21.4645 19.8957 21.6602 19.3457 21.6602H15.3457Z",
+      fill: "#505050"
+    }
+  )),
+  discard: /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 26 27", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M7.75303 22.3289C7.21349 22.3289 6.75177 22.137 6.36787 21.7531C5.98332 21.3685 5.79105 20.9065 5.79105 20.3669V7.61405C5.5131 7.61405 5.27995 7.52021 5.0916 7.33251C4.90391 7.14416 4.81006 6.91101 4.81006 6.63306C4.81006 6.35512 4.90391 6.12197 5.0916 5.93362C5.27995 5.74592 5.5131 5.65207 5.79105 5.65207H9.71501C9.71501 5.37413 9.80919 5.14098 9.99754 4.95263C10.1852 4.76493 10.4181 4.67108 10.696 4.67108H14.62C14.8979 4.67108 15.1311 4.76493 15.3194 4.95263C15.5071 5.14098 15.601 5.37413 15.601 5.65207H19.5249C19.8029 5.65207 20.0357 5.74592 20.2234 5.93362C20.4117 6.12197 20.5059 6.35512 20.5059 6.63306C20.5059 6.91101 20.4117 7.14416 20.2234 7.33251C20.0357 7.52021 19.8029 7.61405 19.5249 7.61405V20.3669C19.5249 20.9065 19.333 21.3685 18.9491 21.7531C18.5645 22.137 18.1025 22.3289 17.5629 22.3289H7.75303ZM9.71501 17.424C9.71501 17.7019 9.80919 17.9347 9.99754 18.1224C10.1852 18.3108 10.4181 18.405 10.696 18.405C10.974 18.405 11.2071 18.3108 11.3955 18.1224C11.5831 17.9347 11.677 17.7019 11.677 17.424V10.557C11.677 10.2791 11.5831 10.0459 11.3955 9.85758C11.2071 9.66988 10.974 9.57604 10.696 9.57604C10.4181 9.57604 10.1852 9.66988 9.99754 9.85758C9.80919 10.0459 9.71501 10.2791 9.71501 10.557V17.424ZM13.639 17.424C13.639 17.7019 13.7332 17.9347 13.9215 18.1224C14.1092 18.3108 14.342 18.405 14.62 18.405C14.8979 18.405 15.1311 18.3108 15.3194 18.1224C15.5071 17.9347 15.601 17.7019 15.601 17.424V10.557C15.601 10.2791 15.5071 10.0459 15.3194 9.85758C15.1311 9.66988 14.8979 9.57604 14.62 9.57604C14.342 9.57604 14.1092 9.66988 13.9215 9.85758C13.7332 10.0459 13.639 10.2791 13.639 10.557V17.424Z",
+      fill: "#A3A3A3"
+    }
+  )),
+  "discard-red": /* @__PURE__ */ import_react11.default.createElement("svg", { viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react11.default.createElement(
+    "path",
+    {
+      d: "M7.75254 21.4868C7.213 21.4868 6.75128 21.2948 6.36738 20.9109C5.98284 20.5264 5.79056 20.0643 5.79056 19.5248V6.77189C5.51261 6.77189 5.27947 6.67804 5.09111 6.49035C4.90342 6.302 4.80957 6.06885 4.80957 5.7909C4.80957 5.51295 4.90342 5.2798 5.09111 5.09145C5.27947 4.90376 5.51261 4.80991 5.79056 4.80991H9.71453C9.71453 4.53196 9.8087 4.29881 9.99705 4.11046C10.1847 3.92277 10.4176 3.82892 10.6955 3.82892H14.6195C14.8974 3.82892 15.1306 3.92277 15.3189 4.11046C15.5066 4.29881 15.6005 4.53196 15.6005 4.80991H19.5244C19.8024 4.80991 20.0352 4.90376 20.2229 5.09145C20.4113 5.2798 20.5054 5.51295 20.5054 5.7909C20.5054 6.06885 20.4113 6.302 20.2229 6.49035C20.0352 6.67804 19.8024 6.77189 19.5244 6.77189V19.5248C19.5244 20.0643 19.3325 20.5264 18.9486 20.9109C18.564 21.2948 18.102 21.4868 17.5625 21.4868H7.75254ZM9.71453 16.5818C9.71453 16.8597 9.8087 17.0926 9.99705 17.2803C10.1847 17.4686 10.4176 17.5628 10.6955 17.5628C10.9735 17.5628 11.2066 17.4686 11.395 17.2803C11.5827 17.0926 11.6765 16.8597 11.6765 16.5818V9.71486C11.6765 9.43692 11.5827 9.20377 11.395 9.01542C11.2066 8.82772 10.9735 8.73387 10.6955 8.73387C10.4176 8.73387 10.1847 8.82772 9.99705 9.01542C9.8087 9.20377 9.71453 9.43692 9.71453 9.71486V16.5818ZM13.6385 16.5818C13.6385 16.8597 13.7327 17.0926 13.921 17.2803C14.1087 17.4686 14.3415 17.5628 14.6195 17.5628C14.8974 17.5628 15.1306 17.4686 15.3189 17.2803C15.5066 17.0926 15.6005 16.8597 15.6005 16.5818V9.71486C15.6005 9.43692 15.5066 9.20377 15.3189 9.01542C15.1306 8.82772 14.8974 8.73387 14.6195 8.73387C14.3415 8.73387 14.1087 8.82772 13.921 9.01542C13.7327 9.20377 13.6385 9.43692 13.6385 9.71486V16.5818Z",
+      fill: "#D9363E"
+    }
+  ))
+};
+
+// src/Components/Button.tsx
+var ButtonElement = (props) => {
+  const textColorClass = props.className?.match(/text-[\w-]+/g)?.[0] === "text-white";
+  return /* @__PURE__ */ import_react12.default.createElement(
     "button",
     {
       onClick: props.onClick,
-      className: `${props.className ? props.className : ""}`,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
-    },
-    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
-      "span",
-      {
-        dangerouslySetInnerHTML: { __html: svgContent }
+      className: props.className ? props.className : "",
+      disabled: props.loading,
+      style: {
+        cursor: props.loading ? "no-drop" : "pointer"
       }
-    ),
+    },
+    /* @__PURE__ */ import_react12.default.createElement("span", { className: props.iconsClassName }, props.isSVGStylesOverride === false ? /* @__PURE__ */ import_react12.default.createElement("img", { src: props.icon, className: props.iconsClassName }) : icons[props.icon], /* @__PURE__ */ import_react12.default.createElement("style", null, textColorClass && `.${props.className?.match(/text-[\w-]+/g)?.[0]} path {
+            filter: brightness(0) invert(1);
+          }`, `.${props.className?.match(/text-[\w-]+/g)?.[0]}:hover path {
+            filter: brightness(0) invert(1);
+          }`)),
     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 import_icons3 = 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 = {
@@ -522,16 +602,15 @@ var AddMoreTable = (props) => {
       });
     });
   };
-  (0, import_react12.useEffect)(() => {
-    console.log(rows);
+  (0, import_react13.useEffect)(() => {
   }, [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, options1: [], options2: [], firstOptions: [], secondOptions: [] });
+      return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [], firstOptions: [], secondOptions: [] });
     } 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, options1: [], options2: [], firstOptions: [], secondOptions: [] });
+      return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [], firstOptions: [], secondOptions: [] });
     } else {
       return null;
     }
@@ -548,13 +627,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_icons3.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_icons3.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_icons3.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons3.PlusOutlined, null)));
     console.log("=====rowdata", rowData);
     return rowData;
   });
@@ -570,7 +649,7 @@ var AddMoreTable = (props) => {
       key: "actions"
     });
   }
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     import_antd10.Table,
     {
       columns,
@@ -582,53 +661,39 @@ var AddMoreTable = (props) => {
 };
 
 // src/Components/Sidebar.tsx
-var import_react13 = __toESM(require("react"));
-var Sidebar = (props) => {
-  const handleChange = (item) => {
-    if (props.onChange) {
-      props.onChange(item);
-    }
-  };
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: props.name }, /* @__PURE__ */ import_react13.default.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ import_react13.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react13.default.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
-    return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: item.label }, /* @__PURE__ */ import_react13.default.createElement(
-      ButtonElement,
-      {
-        ...item,
-        className: `${props.className} ${item.active ? props.activeClassName : ""}`,
-        iconsClassName: props.iconsClassName,
-        onClick: (e) => {
-          e.preventDefault();
-          handleChange(item);
-        }
-      }
-    ));
-  })));
+var import_react14 = __toESM(require("react"));
+var Sidebar = () => {
+  const [navToggle, setNavToggle] = (0, import_react14.useState)(false);
+  const [footerToggle, setFooterToggle] = (0, import_react14.useState)(false);
+  const handleNavToggle = () => setNavToggle(!navToggle);
+  const handleFooterToggle = () => setFooterToggle(!footerToggle);
+  return /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-bar" }, /* @__PURE__ */ import_react14.default.createElement("input", { id: "nav-toggle", type: "checkbox", checked: navToggle, onChange: handleNavToggle }), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-header" }, /* @__PURE__ */ import_react14.default.createElement("a", { id: "nav-title", href: "https://codepen.io", target: "_blank", rel: "noopener noreferrer" }, "C", /* @__PURE__ */ import_react14.default.createElement("i", { className: "fab fa-codepen" }), "DEPEN"), /* @__PURE__ */ import_react14.default.createElement("label", { htmlFor: "nav-toggle" }, /* @__PURE__ */ import_react14.default.createElement("span", { id: "nav-toggle-burger" })), /* @__PURE__ */ import_react14.default.createElement("hr", null)), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-palette" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Your Work")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-images" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Assets")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-thumbtack" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Pinned Items")), /* @__PURE__ */ import_react14.default.createElement("hr", null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-heart" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Following")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-chart-line" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Trending")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-fire" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Challenges")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-magic" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Spark")), /* @__PURE__ */ import_react14.default.createElement("hr", null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-gem" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Codepen Pro")), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content-highlight" })), /* @__PURE__ */ import_react14.default.createElement("input", { id: "nav-footer-toggle", type: "checkbox", checked: footerToggle, onChange: handleFooterToggle }), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-heading" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-avatar" }, /* @__PURE__ */ import_react14.default.createElement("img", { src: "https://gravatar.com/avatar/4474ca42d303761c2901fa819c4f2547", alt: "avatar" })), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-titlebox" }, /* @__PURE__ */ import_react14.default.createElement("a", { id: "nav-footer-title", href: "https://codepen.io/uahnbu/pens/public", target: "_blank", rel: "noopener noreferrer" }, "uahnbu"), /* @__PURE__ */ import_react14.default.createElement("span", { id: "nav-footer-subtitle" }, "Admin")), /* @__PURE__ */ import_react14.default.createElement("label", { htmlFor: "nav-footer-toggle" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-caret-up" }))), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")));
 };
 
 // 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
           }
@@ -638,107 +703,57 @@ 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 import_icons4 = require("@ant-design/icons");
+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_icons4.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_antd14 = require("antd");
-
-// src/Components/Model.tsx
 var import_react19 = __toESM(require("react"));
 var import_antd13 = require("antd");
-
-// src/Components/ModelBody.tsx
-var import_react18 = __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) => {
-    if (eachField.element === "div") {
-      return /* @__PURE__ */ import_react18.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 }));
-    } else if (eachField.element === "button") {
-      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(ButtonElement, { ...eachField }));
-    } else {
-      return null;
-    }
-  }));
-};
-
-// src/Components/Model.tsx
-var ModelElement = (props) => {
-  const { model, onCancel, selectedRecord, columns } = props;
-  return /* @__PURE__ */ import_react19.default.createElement(
-    import_antd13.Modal,
-    {
-      centered: true,
-      open: model,
-      onCancel,
-      footer: null,
-      width: 850,
-      title: /* @__PURE__ */ import_react19.default.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexWrap: "wrap",
-            padding: "20px",
-            width: "full",
-            margin: "-10px"
-          }
-        },
-        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)) : "";
-        })
-      )
-    },
-    /* @__PURE__ */ import_react19.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 handleChange = (record) => {
-    console.log("record", record);
-    if (props.onChange) {
-      props.onChange(record);
+  const [dataSource, setDataSource] = (0, import_react19.useState)([]);
+  (0, import_react19.useEffect)(() => {
+    if (tbody) {
+      setDataSource(
+        tbody.map((row, index) => ({
+          ...row,
+          key: index,
+          index: index + 1
+        }))
+      );
     }
-  };
+  }, [tbody]);
   let columns = [];
   if (thead) {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -749,40 +764,26 @@ var TableElement = (props) => {
         render: col.render,
         sorter: {
           compare: (a, b) => {
-            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
+            if (typeof a[col.key] === "number" && typeof b[col.key] === "number") {
               return a[col.key] - b[col.key];
-            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
+            } else if (typeof a[col.key] === "string" && typeof b[col.key] === "string") {
               return a[col.key].localeCompare(b[col.key]);
             }
           }
         }
       }))
     ];
-    if (props.view) {
-      columns.push({
-        title: "View",
-        dataIndex: "View",
-        key: "View",
-        render: (_, record) => /* @__PURE__ */ import_react20.default.createElement(
-          "a",
-          {
-            onClick: () => {
-              setSelectedRecord(record);
-              handleChange(record);
-              setModel(true);
-            }
-          },
-          "View"
-        )
-      });
-    }
   }
-  const dataSource = tbody && tbody.map((row, index) => ({
-    ...row,
-    key: index + 1,
-    [columns[0].key]: index + 1
-  }));
-  const count = dataSource ? dataSource.length : 0;
+  const onChangeTable = (pagination, filters, sorter, extra) => {
+    if (extra && extra.currentDataSource) {
+      setDataSource(
+        extra.currentDataSource.map((row, index) => ({
+          ...row,
+          index: index + 1
+        }))
+      );
+    }
+  };
   const onChangePage = (page, pageSize) => {
     if (props.onChange) {
       props.onChange({ name: "pagination", page, pageSize });
@@ -790,109 +791,156 @@ var TableElement = (props) => {
   };
   const rowSelectionConfig = props.rowSelection ? {
     onChange: (selectedRowKeys, selectedRows) => {
-      console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
       if (props.onChange) {
         props.onChange(selectedRows);
       }
     }
   } : void 0;
-  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
-    import_antd14.Table,
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
+    import_antd13.Table,
     {
+      loading: props.loading,
       className: props.className,
-      pagination: {
+      pagination: props.pagination ? {
+        current: props.value && props.value.page && props.value.page,
         showTotal: (total) => `Total: ${total} items`,
-        total: count,
-        showSizeChanger: count > 10,
+        total: props.count,
+        showSizeChanger: props.count ? props.count > 10 : 0 > 10,
         onChange: onChangePage
-      },
+      } : false,
       rowSelection: rowSelectionConfig,
       dataSource,
       columns,
       size: props.size,
-      bordered: true
+      bordered: true,
+      onChange: onChangeTable
     }
-  ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
+  ));
 };
 
 // src/Components/DatePicker.tsx
-var import_react21 = __toESM(require("react"));
-var import_antd15 = require("antd");
+var import_react20 = __toESM(require("react"));
+var import_antd14 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
+var import_moment = __toESM(require("moment"));
 import_dayjs.default.extend(import_customParseFormat.default);
 var DatePickerElement = (props) => {
-  const [dateState, setDateState] = (0, import_react21.useState)("");
+  const [dateState, setDateState] = (0, import_react20.useState)(null);
   const handleChange = (date, dateString) => {
     if (date) {
-      const formattedDate = dateString;
       setDateState(date);
       if (props.onChange) {
-        props.onChange(formattedDate);
+        props.onChange(dateString);
       }
     } else {
-      setDateState("");
+      setDateState(null);
       if (props.onChange) {
         props.onChange("");
       }
     }
   };
-  return /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement(
-    import_antd15.DatePicker,
+  const disabledDate = (current) => {
+    return current && current > (0, import_moment.default)();
+  };
+  return /* @__PURE__ */ import_react20.default.createElement("div", null, /* @__PURE__ */ import_react20.default.createElement(
+    import_antd14.DatePicker,
     {
+      disabledDate,
       placeholder: props.placeholder,
       value: dateState,
-      format: { format: "DD-MM-YYYY" },
-      onChange: handleChange
+      format: "DD-MM-YYYY",
+      onChange: handleChange,
+      picker: props.picker
     }
   ));
 };
 
 // src/Components/DateRangePickerElement.tsx
-var import_react22 = __toESM(require("react"));
-var import_antd16 = require("antd");
+var import_react21 = __toESM(require("react"));
+var import_antd15 = require("antd");
 var import_dayjs2 = __toESM(require("dayjs"));
 var DateRangePickerElement = (props) => {
-  const { RangePicker } = import_antd16.DatePicker;
+  const { value } = props;
+  const { RangePicker } = import_antd15.DatePicker;
+  const dateValues = value ? value.map((date) => (0, import_dayjs2.default)(date, "DD-MM-YYYY")) : null;
+  const today = (0, import_dayjs2.default)();
   const handleChange = (dates, dateStrings) => {
-    if (dates && props.onChange) {
-      props.onChange(dateStrings);
+    if (dates) {
+      let [start, end] = dates;
+      if (start && start.isBefore(today) && end && end.isAfter(today)) {
+        end = today;
+      }
+      const adjustedDates = [start, end].map(
+        (date) => date ? date.format("DD-MM-YYYY") : null
+      );
+      props.onChange && props.onChange(adjustedDates);
     } else {
-      console.log("Clear");
+      props.onChange && props.onChange("");
     }
   };
-  const rangePresets = [
-    { label: "Last 7 Days", value: [(0, import_dayjs2.default)().add(-7, "d"), (0, import_dayjs2.default)()] },
-    { label: "Last 14 Days", value: [(0, import_dayjs2.default)().add(-14, "d"), (0, import_dayjs2.default)()] },
-    { label: "Last 30 Days", value: [(0, import_dayjs2.default)().add(-30, "d"), (0, import_dayjs2.default)()] },
-    { label: "Last 90 Days", value: [(0, import_dayjs2.default)().add(-90, "d"), (0, import_dayjs2.default)()] }
+  let rangePresets = [
+    { label: "Last 7 Days", value: [(0, import_dayjs2.default)().subtract(6, "d"), today] },
+    { label: "Last 14 Days", value: [(0, import_dayjs2.default)().subtract(13, "d"), today] },
+    { label: "Last 30 Days", value: [(0, import_dayjs2.default)().subtract(29, "d"), today] },
+    { label: "Last 90 Days", value: [(0, import_dayjs2.default)().subtract(89, "d"), today] }
   ];
-  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  const disabledDate = (current) => {
+    if (props.weekrange) {
+      return current && current < today.subtract(7, "d") || current > today;
+    }
+    return current && current > today;
+  };
+  const handleCalendarChange = (dates) => {
+    if (dates) {
+      let [start, end] = dates;
+      if (start && start.isBefore(today) && end && end.isAfter(today)) {
+        end = today;
+      }
+      const adjustedDates = [start, end].map(
+        (date) => date ? date.format("DD-MM-YYYY") : null
+      );
+      props.onChange && props.onChange(adjustedDates);
+    } else {
+      props.onChange && props.onChange("");
+    }
+  };
+  return /* @__PURE__ */ import_react21.default.createElement(import_antd15.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react21.default.createElement(
+    RangePicker,
+    {
+      disabledDate,
+      ...!props.weekrange && { presets: rangePresets },
+      format: "DD-MM-YYYY",
+      onChange: handleChange,
+      onCalendarChange: handleCalendarChange,
+      value: dateValues
+    }
+  ));
 };
 
 // src/Components/Image.tsx
-var import_react23 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var Image = (props) => {
-  return /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" });
+  return /* @__PURE__ */ import_react22.default.createElement("img", { className: props.className, src: props.img, alt: "image" });
 };
 
 // src/Components/SingleCheckbox.tsx
-var import_react24 = __toESM(require("react"));
-var import_antd17 = require("antd");
+var import_react23 = __toESM(require("react"));
+var import_antd16 = require("antd");
 var SingleCheckbox = (props) => {
   const handleChange = (e) => {
     if (props.onChange) {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ import_react24.default.createElement(import_antd17.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
 
 // src/Components/DropDownGroup.tsx
-var import_react25 = __toESM(require("react"));
-var import_antd18 = require("antd");
+var import_react24 = __toESM(require("react"));
+var import_antd17 = require("antd");
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = (0, import_react25.useState)({
+  const [selectedValue, setSelectedValue] = (0, import_react24.useState)({
     firstValue: {},
     secondValue: {},
     temp: ""
@@ -924,32 +972,44 @@ var DropDownGroup = (props) => {
       return newValue;
     });
   };
-  return /* @__PURE__ */ import_react25.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react25.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react25.default.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ import_react25.default.createElement(
-    import_antd18.Select,
+  const firstFilterOptions = (input, option) => {
+    return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  };
+  const secondFilterOptions = (input, option) => {
+    return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  };
+  return /* @__PURE__ */ import_react24.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react24.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react24.default.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ import_react24.default.createElement(
+    import_antd17.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
       options: props.firstOptions,
-      className: props.className
+      className: props.className,
+      filterOption: firstFilterOptions,
+      showSearch: true
     }
-  ), /* @__PURE__ */ import_react25.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react25.default.createElement(
-    import_antd18.Select,
+  ), /* @__PURE__ */ import_react24.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react24.default.createElement(
+    import_antd17.Select,
     {
       onChange: handleSecondChange,
       variant: props.variant,
       options: props.secondOptions,
-      className: props.className
+      className: props.className,
+      filterOption: secondFilterOptions,
+      showSearch: true
     }
   )));
 };
 
 // src/Components/FilesUpload.tsx
-var import_react26 = __toESM(require("react"));
-var import_antd19 = require("antd");
-var import_icons4 = require("@ant-design/icons");
+var import_react25 = __toESM(require("react"));
+var import_antd18 = require("antd");
+var import_icons5 = require("@ant-design/icons");
 var FileUpload = (props) => {
-  const { Dragger } = import_antd19.Upload;
-  const [files, setFiles] = (0, import_react26.useState)([]);
+  const { Dragger } = import_antd18.Upload;
+  const [files, setFiles] = (0, import_react25.useState)(
+    props.value && props.value.length > 0 ? props.value : []
+  );
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -964,7 +1024,7 @@ var FileUpload = (props) => {
       onSuccess("ok");
     }, 0);
   };
-  return /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement("div", null, /* @__PURE__ */ import_react25.default.createElement(
     Dragger,
     {
       action: "",
@@ -977,48 +1037,47 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons4.InboxOutlined, null)),
-    /* @__PURE__ */ import_react26.default.createElement("p", null, "Click or drag file to upload")
+    /* @__PURE__ */ import_react25.default.createElement("p", null, /* @__PURE__ */ import_react25.default.createElement(import_icons5.InboxOutlined, null)),
+    /* @__PURE__ */ import_react25.default.createElement("p", null, "Click or drag file to upload")
   ));
 };
 
 // src/Components/TabsElement.tsx
-var import_react27 = __toESM(require("react"));
-var import_antd20 = require("antd");
+var import_react26 = __toESM(require("react"));
+var import_antd19 = require("antd");
 var TabsElement = (props) => {
   const handleChange = (key) => {
     if (props.onChange) {
       props.onChange(props.options?.find((eachOption) => eachOption.key === key));
     }
   };
-  return /* @__PURE__ */ import_react27.default.createElement(import_antd20.Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
+  return /* @__PURE__ */ import_react26.default.createElement(import_antd19.Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
 };
 
 // src/Components/SwitchElement.tsx
-var import_react28 = __toESM(require("react"));
-var import_antd21 = require("antd");
+var import_react27 = __toESM(require("react"));
+var import_antd20 = require("antd");
 var onChange = (checked) => {
-  console.log(`switch to ${checked}`);
 };
-var SwitchElement = () => /* @__PURE__ */ import_react28.default.createElement(import_antd21.Switch, { defaultChecked: true, onChange });
+var SwitchElement = () => /* @__PURE__ */ import_react27.default.createElement(import_antd20.Switch, { defaultChecked: true, onChange });
 
 // src/Components/Upload.tsx
-var import_react29 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var Upload2 = (props) => {
-  const [file, setFile] = (0, import_react29.useState)();
+  const [file, setFile] = (0, import_react28.useState)();
   const handleFileChange = (e) => {
     setFile(e.target.files[0]);
     if (props.onChange) {
+      console.log(e.target.files[0]);
       props.onChange(e.target.files[0]);
     }
   };
   const handleUpload = async () => {
     if (!file) {
-      console.error("No file selected");
       return;
     }
   };
-  return /* @__PURE__ */ import_react29.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ import_react29.default.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ import_react28.default.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ import_react28.default.createElement(
     "button",
     {
       type: "button",
@@ -1031,12 +1090,12 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-var import_react30 = __toESM(require("react"));
-var import_antd22 = require("antd");
+var import_react29 = __toESM(require("react"));
+var import_antd21 = require("antd");
 var OtpElement = (props) => {
   const length = props.length;
-  const [otp, setOtp] = (0, import_react30.useState)(Array(length).fill(""));
-  const inputRefs = (0, import_react30.useRef)([]);
+  const [otp, setOtp] = (0, import_react29.useState)(Array(length).fill(""));
+  const inputRefs = (0, import_react29.useRef)([]);
   const handleChange = (e, index) => {
     const value = e.target.value;
     if (/^[0-9]$/.test(value) || value === "") {
@@ -1068,11 +1127,11 @@ var OtpElement = (props) => {
       });
     }
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  return /* @__PURE__ */ import_react30.default.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ import_react30.default.createElement(
-    import_antd22.Input,
+  return /* @__PURE__ */ import_react29.default.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ import_react29.default.createElement(
+    import_antd21.Input,
     {
       key: index,
       className: props.className,
@@ -1086,72 +1145,479 @@ var OtpElement = (props) => {
   )));
 };
 
-// src/Components/Donut.tsx
+// src/Components/CircleDonut.tsx
+var import_react30 = __toESM(require("react"));
+var import_react_chartjs_2 = require("react-chartjs-2");
+var import_chart = require("chart.js");
+import_chart.Chart.register(import_chart.DoughnutController, import_chart.ArcElement, import_chart.Tooltip, import_chart.Legend);
+var CircleDonut = (props) => {
+  const data = {
+    labels: props.labels,
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: props.data,
+        backgroundColor: [
+          "#FFCB8A",
+          "#CADBBF",
+          "#8AC1BB",
+          "#FCB0CB",
+          "#CEB0FA"
+        ],
+        borderWidth: 0
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    cutout: "80%",
+    plugins: {
+      legend: {
+        position: "left",
+        labels: {
+          font: {
+            size: 10
+          },
+          boxWidth: 15,
+          generateLabels: (chart) => {
+            const dataset = chart.data.datasets[0];
+            return chart.data.labels.map((label, index) => {
+              const value = dataset.data[index];
+              return {
+                text: `${label}: ${value}`,
+                fillStyle: dataset.backgroundColor[index]
+              };
+            });
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 2;
+      ctx.save();
+      ctx.font = "7px Arial";
+      ctx.fillStyle = "blue";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("Total Sessions", centerX, centerY - 10);
+      ctx.font = "25px Arial";
+      ctx.fillStyle = "black";
+      ctx.fillText("85", centerX, centerY + 20);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ import_react30.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react30.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react30.default.createElement(import_react_chartjs_2.Doughnut, { data, options, plugins: [centerTextPlugin] }));
+};
+
+// src/Components/SemiCircleDonut.tsx
 var import_react31 = __toESM(require("react"));
-var import_highcharts = __toESM(require("highcharts"));
-var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
-var HighchartsChart = ({ options }) => {
-  return /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options });
+var import_react_chartjs_22 = require("react-chartjs-2");
+var import_chart2 = require("chart.js");
+import_chart2.Chart.register(import_chart2.DoughnutController, import_chart2.ArcElement, import_chart2.Tooltip, import_chart2.Legend);
+var SemiCircleDonut = (props) => {
+  const data = {
+    labels: [
+      "Registration",
+      "Book Appointment",
+      "Diagnostic Tests",
+      "Hospital Facility",
+      "Others, Prescriptions"
+    ],
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: [30, 10, 27, 40, 12],
+        backgroundColor: [
+          "#FFCB8A",
+          "#CADBBF",
+          "#8AC1BB",
+          "#FCB0CB",
+          "#CEB0FA"
+        ],
+        borderWidth: 0
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    circumference: 180,
+    rotation: -90,
+    cutout: "80%",
+    plugins: {
+      legend: {
+        display: false
+        // Disable the legend
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 1.5;
+      const maxWidth = width * 0.8;
+      ctx.save();
+      ctx.fillStyle = "black";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const drawText = (text, y, fontSize) => {
+        ctx.font = `${fontSize}px Arial`;
+        const textWidth = ctx.measureText(text).width;
+        if (textWidth > maxWidth) {
+          const newFontSize = fontSize * maxWidth / textWidth;
+          ctx.font = `${newFontSize}px Arial`;
+        }
+        ctx.fillText(text, centerX, y);
+      };
+      drawText(props.fillText1, centerY - 10, 16);
+      drawText(props.fillText2, centerY + 20, 8);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ import_react31.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react31.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react31.default.createElement(import_react_chartjs_22.Doughnut, { data, options, plugins: [centerTextPlugin] }));
 };
-console.log(HighchartsChart);
-console.log(typeof HighchartsChart);
-var Donut = (props) => {
-  const chartOptions = {
-    title: {
-      text: "Distribution of Students"
-    },
-    plotOptions: {
-      pie: {
-        innerSize: "70%",
-        dataLabels: {
-          enabled: false,
-          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
-        },
-        showInLegend: true
+
+// src/Components/HorizontalBarChart.tsx
+var import_react32 = __toESM(require("react"));
+var import_react_chartjs_23 = require("react-chartjs-2");
+var import_chart3 = require("chart.js");
+import_chart3.Chart.register(import_chart3.BarElement, import_chart3.CategoryScale, import_chart3.LinearScale, import_chart3.Tooltip);
+var HorizontalBarChart = (props) => {
+  const data = {
+    labels: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
+    datasets: [
+      {
+        data: [30, 10, 27, 40, 12, 24],
+        backgroundColor: "#6298D5",
+        barThickness: 15
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    indexAxis: "y",
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        }
       }
     },
-    series: [
-      {
-        type: "pie",
-        name: "Percentage",
-        data: [
-          {
-            name: "Girls",
-            y: 20,
-            color: "#FF6384"
-            // Custom color for Girls
+    plugins: {
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      },
+      legend: {
+        display: false
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react32.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react32.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react32.default.createElement(import_react_chartjs_23.Bar, { data, options }));
+};
+
+// src/Components/LineChart.tsx
+var import_react33 = __toESM(require("react"));
+var import_auto = __toESM(require("chart.js/auto"));
+var LineChart = (props) => {
+  const chartRef = (0, import_react33.useRef)(null);
+  const chartInstance = (0, import_react33.useRef)(null);
+  const data = [
+    { label: "ROI", data: [10, 13, 20, 15, 10] },
+    { label: "Engagement Rate", data: [20, 23, 30, 28, 20] },
+    { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
+  ];
+  const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
+  (0, import_react33.useEffect)(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new import_auto.default(chartRef.current, {
+        type: "line",
+        data: {
+          labels,
+          datasets: data.map((dataset, index) => ({
+            label: dataset.label,
+            data: dataset.data,
+            borderColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
+            backgroundColor: "rgba(0, 0, 0, 0)",
+            pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
+            pointBorderColor: "white",
+            pointStyle: "circle",
+            pointRadius: 3,
+            tension: 0.1,
+            fill: true
+          }))
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                usePointStyle: true
+              }
+            }
           },
-          {
-            name: "Boys",
-            y: 40,
-            color: "#36A2EB"
-            // Custom color for Boys
+          scales: {
+            x: {
+              grid: {
+                display: false
+              }
+            },
+            y: {
+              beginAtZero: true,
+              suggestedMax: 200,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              },
+              grid: {
+                display: true
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, [labels, data]);
+  return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement("canvas", { ref: chartRef }));
+};
+
+// src/Components/DoubleBarChart.tsx
+var import_react34 = __toESM(require("react"));
+var import_auto2 = __toESM(require("chart.js/auto"));
+var DoubleBarChart = (props) => {
+  const chartRef = (0, import_react34.useRef)(null);
+  const chartInstance = (0, import_react34.useRef)(null);
+  (0, import_react34.useEffect)(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new import_auto2.default(chartRef.current, {
+        type: "bar",
+        data: {
+          labels: [
+            "Summer Health Tips",
+            "New Services Launch",
+            "Discounts on Checkups",
+            "Wellness Webinar",
+            "LinkedIn Insights"
+          ],
+          datasets: [
+            {
+              label: "Engagement Rate",
+              data: [60, 70, 50, 80, 65],
+              // Example data for male
+              backgroundColor: "#93B8E2",
+              barThickness: 10
+            },
+            {
+              label: "Conversion Rate",
+              data: [70, 65, 75, 55, 85],
+              // Example data for female
+              backgroundColor: "#4484CD",
+              barThickness: 10
+            }
+          ]
+        },
+        options: {
+          scales: {
+            x: {
+              grid: {
+                display: false
+                // Display x-axis grid lines
+              }
+            },
+            y: {
+              beginAtZero: true,
+              suggestedMax: 100,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              },
+              grid: {
+                display: true
+              }
+            }
           },
-          {
-            name: "Students",
-            y: 40,
-            color: "#FFCE56"
-            // Custom color for Students
+          plugins: {
+            legend: {
+              labels: {
+                usePointStyle: true
+              }
+            }
           }
-        ]
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
+};
+
+// src/Components/BarChart.tsx
+var import_react35 = __toESM(require("react"));
+var import_react_chartjs_24 = require("react-chartjs-2");
+var import_chart4 = require("chart.js");
+import_chart4.Chart.register(import_chart4.BarElement, import_chart4.CategoryScale, import_chart4.LinearScale, import_chart4.Tooltip);
+var BarChart = (props) => {
+  const data = {
+    labels: [
+      "17 June",
+      "18 June",
+      "19 June",
+      "20 June",
+      "21 June",
+      "22 June",
+      "23 June"
+    ],
+    datasets: [
+      {
+        data: [30, 100, 270, 140, 120, 240],
+        backgroundColor: "#1565C0",
+        barThickness: 15
       }
     ]
   };
-  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { options: chartOptions }));
+  const options = {
+    responsive: true,
+    scales: {
+      x: {
+        beginAtZero: true,
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: true
+        },
+        ticks: {
+          min: 0,
+          max: 400,
+          stepSize: 200,
+          callback: function(value) {
+            return `${value}`;
+          }
+        }
+      }
+    },
+    plugins: {
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return ` ${label}: ${value}`;
+          }
+        }
+      },
+      legend: {
+        display: false
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react35.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react35.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react35.default.createElement(import_react_chartjs_24.Bar, { data, options }));
+};
+
+// src/Components/DivContainer.tsx
+var import_react36 = __toESM(require("react"));
+var DivContainer = (props) => {
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: props.className, onClick: props.onClick }, props.label);
+};
+
+// src/Components/ColorPickerElement.tsx
+var import_react37 = __toESM(require("react"));
+var import_antd22 = require("antd");
+var ColorPickerElement = (props) => {
+  const onHandleChange = (value, hex) => {
+    console.log(hex);
+    props.onChange && props.onChange(hex);
+  };
+  return /* @__PURE__ */ import_react37.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react37.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react37.default.createElement(
+    import_antd22.ColorPicker,
+    {
+      showText: true,
+      defaultValue: "#1677ff",
+      onChange: onHandleChange
+    }
+  ));
 };
-var Donut_default = Donut;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
+  BarChart,
   ButtonElement,
   CheckboxElement,
+  CircleDonut,
   CkEditor,
+  ColorPickerElement,
   DatePickerElement,
   DateRangePickerElement,
-  Donut,
+  DivContainer,
+  DoubleBarChart,
   DropDownGroup,
   FileUpload,
+  HorizontalBarChart,
   Image,
+  LineChart,
   MultipleSelectElement,
   Navbar,
   NumberElement,
@@ -1159,6 +1625,7 @@ var Donut_default = Donut;
   PasswordElement,
   RadioElement,
   SelectElement,
+  SemiCircleDonut,
   Sidebar,
   SingleCheckbox,
   SingleSelectElement,