@apexcura/ui-components 0.0.16-Beta62 → 0.0.16-Beta63

package/dist/index.js

@@ -775,74 +775,26 @@ var AddMoreTable = (props) => {
 
 // src/Components/Sidebar.tsx
 var import_react16 = __toESM(require("react"));
-var import_antd11 = require("antd");
-var { Sider } = import_antd11.Layout;
 var Sidebar = (props) => {
-  const [collapsed, setCollapsed] = (0, import_react16.useState)(false);
-  const [selectedKey, setSelectedKey] = (0, import_react16.useState)(props.value);
   const handleChange = (item) => {
-    console.log(item);
-    setSelectedKey(item.key);
     if (props.onChange) {
-      props.onChange(item.key);
+      props.onChange(item);
     }
   };
-  (0, import_react16.useEffect)(() => {
-    if (props.value) {
-      setSelectedKey(props.value);
-    }
-  }, [props.value]);
-  function getItem(label, key, icon, children, item) {
-    return {
-      key,
-      icon: icon ? /* @__PURE__ */ import_react16.default.createElement(
-        "span",
-        {
-          className: props.iconsClassName,
-          style: selectedKey === key ? {
-            filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
-          } : {}
-        },
-        icon
-      ) : null,
-      children,
-      label
-    };
-  }
-  function mapItems(items2, parentKey = "") {
-    return items2.map((eachItem, index) => {
-      const key = parentKey ? `${parentKey}-${index}` : index.toString();
-      const childItems = eachItem.items ? mapItems(eachItem.items, key) : void 0;
-      return getItem(
-        eachItem.label,
-        key,
-        eachItem.icon ? icons[eachItem.icon] || /* @__PURE__ */ import_react16.default.createElement("img", { src: eachItem.icon, alt: "" }) : null,
-        childItems,
-        eachItem
-      );
-    });
-  }
-  const items = props.items ? mapItems(props.items) : [];
-  return /* @__PURE__ */ import_react16.default.createElement(import_antd11.Layout, { style: { minHeight: "100vh" } }, /* @__PURE__ */ import_react16.default.createElement(
-    Sider,
-    {
-      theme: "light",
-      collapsible: true,
-      collapsed,
-      onCollapse: (value) => setCollapsed(value)
-    },
-    /* @__PURE__ */ import_react16.default.createElement("div", { className: "demo-logo-vertical" }),
-    /* @__PURE__ */ import_react16.default.createElement("img", { src: props.img, alt: "", className: props.imgClassName }),
-    /* @__PURE__ */ import_react16.default.createElement(
-      import_antd11.Menu,
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, { key: props.name }, /* @__PURE__ */ import_react16.default.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ import_react16.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react16.default.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, { key: item.label }, /* @__PURE__ */ import_react16.default.createElement(
+      ButtonElement,
       {
-        mode: "inline",
-        items,
-        selectedKeys: [selectedKey],
-        onClick: (item) => handleChange(item)
+        ...item,
+        className: item.active ? props.activeClassName : props.className,
+        iconsClassName: props.iconsClassName,
+        onClick: (e) => {
+          e.preventDefault();
+          handleChange(item);
+        }
       }
-    )
-  ));
+    ));
+  })));
 };
 
 // src/Components/Navbar.tsx
@@ -850,25 +802,25 @@ var import_react20 = __toESM(require("react"));
 
 // src/Components/Notification.tsx
 var import_react17 = __toESM(require("react"));
-var import_antd12 = require("antd");
+var import_antd11 = require("antd");
 var import_io = require("react-icons/io");
 var popoverContentStyle = {
   minWidth: "300px",
   maxWidth: "100%"
 };
 var Notification = (props) => /* @__PURE__ */ import_react17.default.createElement(
-  import_antd12.Popover,
+  import_antd11.Popover,
   {
     className: props.className,
     content: /* @__PURE__ */ import_react17.default.createElement("div", { style: popoverContentStyle }, " ", /* @__PURE__ */ import_react17.default.createElement(
-      import_antd12.List,
+      import_antd11.List,
       {
         itemLayout: "horizontal",
         dataSource: props.items,
-        renderItem: (item, index) => /* @__PURE__ */ import_react17.default.createElement(import_antd12.List.Item, { key: item.text }, /* @__PURE__ */ import_react17.default.createElement(
-          import_antd12.List.Item.Meta,
+        renderItem: (item, index) => /* @__PURE__ */ import_react17.default.createElement(import_antd11.List.Item, { key: item.text }, /* @__PURE__ */ import_react17.default.createElement(
+          import_antd11.List.Item.Meta,
           {
-            avatar: /* @__PURE__ */ import_react17.default.createElement(import_antd12.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
+            avatar: /* @__PURE__ */ import_react17.default.createElement(import_antd11.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
             title: item.text,
             description: item.time
           }
@@ -878,7 +830,7 @@ var Notification = (props) => /* @__PURE__ */ import_react17.default.createEleme
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__PURE__ */ import_react17.default.createElement(import_antd12.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react17.default.createElement(import_antd12.Badge, { size: "small", count: props.count }, /* @__PURE__ */ import_react17.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react17.default.createElement(import_io.IoIosNotifications, null))))
+  /* @__PURE__ */ import_react17.default.createElement(import_antd11.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react17.default.createElement(import_antd11.Badge, { size: "small", count: props.count }, /* @__PURE__ */ import_react17.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react17.default.createElement(import_io.IoIosNotifications, null))))
 );
 
 // src/Components/SpanElement.tsx
@@ -887,9 +839,9 @@ var SpanElement = (props) => /* @__PURE__ */ import_react18.default.createElemen
 
 // src/Components/Profile.tsx
 var import_react19 = __toESM(require("react"));
-var import_antd13 = require("antd");
-var import_icons5 = require("@ant-design/icons");
-var Profile = (props) => /* @__PURE__ */ import_react19.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react19.default.createElement(import_antd13.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react19.default.createElement(import_icons5.UserOutlined, null) }), /* @__PURE__ */ import_react19.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react19.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react19.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
+var import_antd12 = require("antd");
+var import_icons4 = require("@ant-design/icons");
+var Profile = (props) => /* @__PURE__ */ import_react19.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react19.default.createElement(import_antd12.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react19.default.createElement(import_icons4.UserOutlined, null) }), /* @__PURE__ */ import_react19.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react19.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react19.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
 
 // src/Components/Navbar.tsx
 var Navbar = (props) => {
@@ -907,7 +859,7 @@ var Navbar = (props) => {
 
 // src/Components/TableElement.tsx
 var import_react21 = __toESM(require("react"));
-var import_antd14 = require("antd");
+var import_antd13 = require("antd");
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [dataSource, setDataSource] = (0, import_react21.useState)([]);
@@ -966,7 +918,7 @@ var TableElement = (props) => {
     }
   } : void 0;
   return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
-    import_antd14.Table,
+    import_antd13.Table,
     {
       loading: props.loading,
       className: props.className,
@@ -988,7 +940,7 @@ var TableElement = (props) => {
 
 // src/Components/DatePicker.tsx
 var import_react22 = __toESM(require("react"));
-var import_antd15 = require("antd");
+var import_antd14 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
 import_dayjs.default.extend(import_customParseFormat.default);
@@ -1014,7 +966,7 @@ var DatePickerElement = (props) => {
     return current && current > (0, import_dayjs.default)().endOf("day");
   };
   return /* @__PURE__ */ import_react22.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react22.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label, " ", props.required ? /* @__PURE__ */ import_react22.default.createElement("span", { style: { color: "red" } }, "*") : ""), /* @__PURE__ */ import_react22.default.createElement(
-    import_antd15.DatePicker,
+    import_antd14.DatePicker,
     {
       disabledDate,
       className: props.className,
@@ -1029,11 +981,11 @@ var DatePickerElement = (props) => {
 
 // src/Components/DateRangePickerElement.tsx
 var import_react23 = __toESM(require("react"));
-var import_antd16 = require("antd");
+var import_antd15 = require("antd");
 var import_dayjs2 = __toESM(require("dayjs"));
 var DateRangePickerElement = (props) => {
   const { value } = props;
-  const { RangePicker } = import_antd16.DatePicker;
+  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) => {
@@ -1064,7 +1016,7 @@ var DateRangePickerElement = (props) => {
     }
     return current && current > today;
   };
-  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(import_antd15.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(
     RangePicker,
     {
       disabledDate,
@@ -1084,19 +1036,19 @@ var Image = (props) => {
 
 // src/Components/SingleCheckbox.tsx
 var import_react25 = __toESM(require("react"));
-var import_antd17 = require("antd");
+var import_antd16 = require("antd");
 var SingleCheckbox = (props) => {
   const handleChange = (e) => {
     if (props.onChange) {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ import_react25.default.createElement(import_antd17.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ import_react25.default.createElement(import_antd16.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
 
 // src/Components/DropDownGroup.tsx
 var import_react26 = __toESM(require("react"));
-var import_antd18 = require("antd");
+var import_antd17 = require("antd");
 var DropDownGroup = (props) => {
   const [selectedValue, setSelectedValue] = (0, import_react26.useState)({
     firstValue: props.value.firstValue,
@@ -1135,7 +1087,7 @@ var DropDownGroup = (props) => {
     return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
   };
   return /* @__PURE__ */ import_react26.default.createElement("div", null, props.label && /* @__PURE__ */ import_react26.default.createElement("p", { className: props.labelClassName }, props.label, " ", props.required ? /* @__PURE__ */ import_react26.default.createElement("span", { style: { color: "red" } }, "*") : ""), /* @__PURE__ */ import_react26.default.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ import_react26.default.createElement(
-    import_antd18.Select,
+    import_antd17.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
@@ -1147,7 +1099,7 @@ var DropDownGroup = (props) => {
       showSearch: true
     }
   ), /* @__PURE__ */ import_react26.default.createElement("div", { style: { borderLeft: "1px solid gray" } }), /* @__PURE__ */ import_react26.default.createElement(
-    import_antd18.Select,
+    import_antd17.Select,
     {
       onChange: handleSecondChange,
       variant: props.variant,
@@ -1162,11 +1114,11 @@ var DropDownGroup = (props) => {
 };
 
 // src/Components/FilesUpload.tsx
-var import_antd19 = require("antd");
-var import_icons6 = require("@ant-design/icons");
+var import_antd18 = require("antd");
+var import_icons5 = require("@ant-design/icons");
 var import_react27 = __toESM(require("react"));
 var FileUpload = (props) => {
-  const { Dragger } = import_antd19.Upload;
+  const { Dragger } = import_antd18.Upload;
   const initialFiles = Array.isArray(props.value) ? props.value : [];
   const [files, setFiles] = (0, import_react27.useState)(initialFiles);
   const handleChange = ({ fileList }) => {
@@ -1199,31 +1151,31 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react27.default.createElement("p", null, /* @__PURE__ */ import_react27.default.createElement(import_icons6.InboxOutlined, null)),
+    /* @__PURE__ */ import_react27.default.createElement("p", null, /* @__PURE__ */ import_react27.default.createElement(import_icons5.InboxOutlined, null)),
     /* @__PURE__ */ import_react27.default.createElement("p", null, "Click or drag file to upload")
   ));
 };
 
 // src/Components/TabsElement.tsx
 var import_react28 = __toESM(require("react"));
-var import_antd20 = require("antd");
+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_react28.default.createElement(import_antd20.Tabs, { defaultActiveKey: props.value, className: props.containerClassName, items: props.options, onChange: handleChange });
+  return /* @__PURE__ */ import_react28.default.createElement(import_antd19.Tabs, { defaultActiveKey: props.value, className: props.containerClassName, items: props.options, onChange: handleChange });
 };
 
 // src/Components/SwitchElement.tsx
 var import_react29 = __toESM(require("react"));
-var import_antd21 = require("antd");
+var import_antd20 = require("antd");
 var SwitchElement = (props) => {
   const onChange = (checked) => {
     props.onChange && props.onChange(checked);
   };
-  return /* @__PURE__ */ import_react29.default.createElement(import_antd21.Switch, { value: props.value, checkedChildren: props.checkedChildren, unCheckedChildren: props.unCheckedChildren, onChange });
+  return /* @__PURE__ */ import_react29.default.createElement(import_antd20.Switch, { value: props.value, checkedChildren: props.checkedChildren, unCheckedChildren: props.unCheckedChildren, onChange });
 };
 
 // src/Components/Upload.tsx
@@ -1256,7 +1208,7 @@ var Upload2 = (props) => {
 
 // src/Components/OtpElement.tsx
 var import_react31 = __toESM(require("react"));
-var import_antd22 = require("antd");
+var import_antd21 = require("antd");
 var OtpElement = (props) => {
   const length = props.length;
   const [otp, setOtp] = (0, import_react31.useState)(Array(length).fill(""));
@@ -1296,7 +1248,7 @@ var OtpElement = (props) => {
     inputRefs.current[0]?.focus();
   }, []);
   return /* @__PURE__ */ import_react31.default.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ import_react31.default.createElement(
-    import_antd22.Input,
+    import_antd21.Input,
     {
       key: index,
       className: props.className,
@@ -1750,7 +1702,7 @@ var DivContainer = (props) => {
 
 // src/Components/ColorPickerElement.tsx
 var import_react39 = __toESM(require("react"));
-var import_antd23 = require("antd");
+var import_antd22 = require("antd");
 var ColorPickerElement = (props) => {
   const [val, setVal] = (0, import_react39.useState)(props.value);
   (0, import_react39.useEffect)(() => {
@@ -1762,7 +1714,7 @@ var ColorPickerElement = (props) => {
     props.onChange && props.onChange(hex);
   };
   return /* @__PURE__ */ import_react39.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react39.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label, " ", props.required ? /* @__PURE__ */ import_react39.default.createElement("span", { style: { color: "red" } }, "*") : ""), /* @__PURE__ */ import_react39.default.createElement("br", null), /* @__PURE__ */ import_react39.default.createElement(
-    import_antd23.ColorPicker,
+    import_antd22.ColorPicker,
     {
       className: props.className,
       showText: true,
@@ -1774,9 +1726,9 @@ var ColorPickerElement = (props) => {
 
 // src/Components/NotificationAlert.tsx
 var import_react40 = __toESM(require("react"));
-var import_antd24 = require("antd");
+var import_antd23 = require("antd");
 var NotificationAlert = (props) => {
-  const [api, contextHolder] = import_antd24.notification.useNotification();
+  const [api, contextHolder] = import_antd23.notification.useNotification();
   const openNotificationType = (pauseOnHover, type) => {
     api[type]({
       message: props.message,
@@ -1804,12 +1756,12 @@ var NotificationAlert = (props) => {
 
 // src/Components/TooltipElement.tsx
 var import_react41 = __toESM(require("react"));
-var import_antd25 = require("antd");
-var TooltipElement = (props) => /* @__PURE__ */ import_react41.default.createElement(import_antd25.Tooltip, { title: props.title }, /* @__PURE__ */ import_react41.default.createElement("span", { className: props.className }, props.description));
+var import_antd24 = require("antd");
+var TooltipElement = (props) => /* @__PURE__ */ import_react41.default.createElement(import_antd24.Tooltip, { title: props.title }, /* @__PURE__ */ import_react41.default.createElement("span", { className: props.className }, props.description));
 
 // src/Components/DateTimePicker.tsx
 var import_react42 = __toESM(require("react"));
-var import_antd26 = require("antd");
+var import_antd25 = require("antd");
 var import_dayjs3 = __toESM(require("dayjs"));
 var import_customParseFormat2 = __toESM(require("dayjs/plugin/customParseFormat.js"));
 import_dayjs3.default.extend(import_customParseFormat2.default);
@@ -1866,7 +1818,7 @@ var DateTimePickerElement = (props) => {
     return {};
   };
   return /* @__PURE__ */ import_react42.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react42.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label, " ", props.required ? /* @__PURE__ */ import_react42.default.createElement("span", { style: { color: "red" } }, "*") : ""), /* @__PURE__ */ import_react42.default.createElement(
-    import_antd26.DatePicker,
+    import_antd25.DatePicker,
     {
       disabledTime,
       disabledDate,

package/dist/index.mjs

@@ -702,75 +702,27 @@ var AddMoreTable = (props) => {
 };
 
 // src/Components/Sidebar.tsx
-import React15, { useEffect as useEffect2, useState as useState5 } from "react";
-import { Layout, Menu } from "antd";
-var { Sider } = Layout;
+import React15 from "react";
 var Sidebar = (props) => {
-  const [collapsed, setCollapsed] = useState5(false);
-  const [selectedKey, setSelectedKey] = useState5(props.value);
   const handleChange = (item) => {
-    console.log(item);
-    setSelectedKey(item.key);
     if (props.onChange) {
-      props.onChange(item.key);
+      props.onChange(item);
     }
   };
-  useEffect2(() => {
-    if (props.value) {
-      setSelectedKey(props.value);
-    }
-  }, [props.value]);
-  function getItem(label, key, icon, children, item) {
-    return {
-      key,
-      icon: icon ? /* @__PURE__ */ React15.createElement(
-        "span",
-        {
-          className: props.iconsClassName,
-          style: selectedKey === key ? {
-            filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
-          } : {}
-        },
-        icon
-      ) : null,
-      children,
-      label
-    };
-  }
-  function mapItems(items2, parentKey = "") {
-    return items2.map((eachItem, index) => {
-      const key = parentKey ? `${parentKey}-${index}` : index.toString();
-      const childItems = eachItem.items ? mapItems(eachItem.items, key) : void 0;
-      return getItem(
-        eachItem.label,
-        key,
-        eachItem.icon ? icons[eachItem.icon] || /* @__PURE__ */ React15.createElement("img", { src: eachItem.icon, alt: "" }) : null,
-        childItems,
-        eachItem
-      );
-    });
-  }
-  const items = props.items ? mapItems(props.items) : [];
-  return /* @__PURE__ */ React15.createElement(Layout, { style: { minHeight: "100vh" } }, /* @__PURE__ */ React15.createElement(
-    Sider,
-    {
-      theme: "light",
-      collapsible: true,
-      collapsed,
-      onCollapse: (value) => setCollapsed(value)
-    },
-    /* @__PURE__ */ React15.createElement("div", { className: "demo-logo-vertical" }),
-    /* @__PURE__ */ React15.createElement("img", { src: props.img, alt: "", className: props.imgClassName }),
-    /* @__PURE__ */ React15.createElement(
-      Menu,
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, { key: props.name }, /* @__PURE__ */ React15.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ React15.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ React15.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, { key: item.label }, /* @__PURE__ */ React15.createElement(
+      ButtonElement,
       {
-        mode: "inline",
-        items,
-        selectedKeys: [selectedKey],
-        onClick: (item) => handleChange(item)
+        ...item,
+        className: item.active ? props.activeClassName : props.className,
+        iconsClassName: props.iconsClassName,
+        onClick: (e) => {
+          e.preventDefault();
+          handleChange(item);
+        }
       }
-    )
-  ));
+    ));
+  })));
 };
 
 // src/Components/Navbar.tsx
@@ -834,12 +786,12 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState6, useEffect as useEffect3 } from "react";
+import React20, { useState as useState5, useEffect as useEffect2 } from "react";
 import { Table as Table2 } from "antd";
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  const [dataSource, setDataSource] = useState6([]);
-  useEffect3(() => {
+  const [dataSource, setDataSource] = useState5([]);
+  useEffect2(() => {
     if (tbody) {
       setDataSource(
         tbody.map((row, index) => ({
@@ -915,13 +867,13 @@ var TableElement = (props) => {
 };
 
 // src/Components/DatePicker.tsx
-import React21, { useState as useState7 } from "react";
+import React21, { useState as useState6 } from "react";
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat.js";
 dayjs.extend(customParseFormat);
 var DatePickerElement = (props) => {
-  const [dateState, setDateState] = useState7(props.value);
+  const [dateState, setDateState] = useState6(props.value);
   const handleChange = (date, dateString) => {
     if (date) {
       setDateState(date);
@@ -1023,10 +975,10 @@ var SingleCheckbox = (props) => {
 };
 
 // src/Components/DropDownGroup.tsx
-import React25, { useState as useState8 } from "react";
+import React25, { useState as useState7 } from "react";
 import { Select as Select4 } from "antd";
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = useState8({
+  const [selectedValue, setSelectedValue] = useState7({
     firstValue: props.value.firstValue,
     secondValue: props.value.secondValue
   });
@@ -1092,11 +1044,11 @@ var DropDownGroup = (props) => {
 // src/Components/FilesUpload.tsx
 import { Upload } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
-import React26, { useState as useState9 } from "react";
+import React26, { useState as useState8 } from "react";
 var FileUpload = (props) => {
   const { Dragger } = Upload;
   const initialFiles = Array.isArray(props.value) ? props.value : [];
-  const [files, setFiles] = useState9(initialFiles);
+  const [files, setFiles] = useState8(initialFiles);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -1155,9 +1107,9 @@ var SwitchElement = (props) => {
 };
 
 // src/Components/Upload.tsx
-import React29, { useState as useState10 } from "react";
+import React29, { useState as useState9 } from "react";
 var Upload2 = (props) => {
-  const [file, setFile] = useState10();
+  const [file, setFile] = useState9();
   const handleFileChange = (e) => {
     setFile(e.target.files[0]);
     if (props.onChange) {
@@ -1183,11 +1135,11 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React30, { useState as useState11, useRef as useRef2, useEffect as useEffect4 } from "react";
+import React30, { useState as useState10, useRef as useRef2, useEffect as useEffect3 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
-  const [otp, setOtp] = useState11(Array(length).fill(""));
+  const [otp, setOtp] = useState10(Array(length).fill(""));
   const inputRefs = useRef2([]);
   const handleChange = (e, index) => {
     const value = e.target.value;
@@ -1220,7 +1172,7 @@ var OtpElement = (props) => {
       });
     }
   };
-  useEffect4(() => {
+  useEffect3(() => {
     inputRefs.current[0]?.focus();
   }, []);
   return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
@@ -1472,7 +1424,7 @@ var HorizontalBarChart = (props) => {
 };
 
 // src/Components/LineChart.tsx
-import React34, { useEffect as useEffect5, useRef as useRef3 } from "react";
+import React34, { useEffect as useEffect4, useRef as useRef3 } from "react";
 import Chart from "chart.js/auto";
 var LineChart = (props) => {
   const chartRef = useRef3(null);
@@ -1483,7 +1435,7 @@ var LineChart = (props) => {
     { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
-  useEffect5(() => {
+  useEffect4(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1545,12 +1497,12 @@ var LineChart = (props) => {
 };
 
 // src/Components/DoubleBarChart.tsx
-import React35, { useEffect as useEffect6, useRef as useRef4 } from "react";
+import React35, { useEffect as useEffect5, useRef as useRef4 } from "react";
 import Chart2 from "chart.js/auto";
 var DoubleBarChart = (props) => {
   const chartRef = useRef4(null);
   const chartInstance = useRef4(null);
-  useEffect6(() => {
+  useEffect5(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1701,11 +1653,11 @@ var DivContainer = (props) => {
 };
 
 // src/Components/ColorPickerElement.tsx
-import React38, { useEffect as useEffect7, useState as useState12 } from "react";
+import React38, { useEffect as useEffect6, useState as useState11 } from "react";
 import { ColorPicker } from "antd";
 var ColorPickerElement = (props) => {
-  const [val, setVal] = useState12(props.value);
-  useEffect7(() => {
+  const [val, setVal] = useState11(props.value);
+  useEffect6(() => {
     if (props.value) {
       setVal(props.value);
     }
@@ -1760,13 +1712,13 @@ import { Tooltip as Tooltip5 } from "antd";
 var TooltipElement = (props) => /* @__PURE__ */ React40.createElement(Tooltip5, { title: props.title }, /* @__PURE__ */ React40.createElement("span", { className: props.className }, props.description));
 
 // src/Components/DateTimePicker.tsx
-import React41, { useState as useState13 } from "react";
+import React41, { useState as useState12 } from "react";
 import { DatePicker as DatePicker3 } from "antd";
 import dayjs3 from "dayjs";
 import customParseFormat2 from "dayjs/plugin/customParseFormat.js";
 dayjs3.extend(customParseFormat2);
 var DateTimePickerElement = (props) => {
-  const [dateState, setDateState] = useState13(props.value);
+  const [dateState, setDateState] = useState12(props.value);
   const handleChange = (date, dateString) => {
     if (date) {
       setDateState(date);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.16-Beta62",
+  "version": "0.0.16-Beta63",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",