@apexcura/ui-components 0.0.16-Beta30 → 0.0.16-Beta31

package/dist/index.js

@@ -773,26 +773,60 @@ var AddMoreTable = (props) => {
 
 // src/Components/Sidebar.tsx
 var import_react16 = __toESM(require("react"));
-var Sidebar = (props) => {
-  const handleChange = (item) => {
-    if (props.onChange) {
-      props.onChange(item);
-    }
+var import_antd11 = require("antd");
+var { Header, Content, Footer, Sider } = import_antd11.Layout;
+function getItem(label, key, icon, children) {
+  return {
+    key,
+    icon,
+    children,
+    label
   };
-  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,
+}
+var Sidebar = (props) => {
+  const [collapsed, setCollapsed] = (0, import_react16.useState)(false);
+  const {
+    token: { colorBgContainer, borderRadiusLG }
+  } = import_antd11.theme.useToken();
+  const items = props.items?.map((eachItem, index) => {
+    return getItem(
+      eachItem.label,
+      index.toString(),
+      icons[eachItem.icon],
+      eachItem.children?.map(
+        (child, childIndex) => getItem(child.label, `${index}-${childIndex}`, icons[child.icon])
+      )
+    );
+  });
+  return /* @__PURE__ */ import_react16.default.createElement(import_antd11.Layout, { style: { minHeight: "100vh" } }, /* @__PURE__ */ import_react16.default.createElement(
+    Sider,
+    {
+      collapsible: true,
+      collapsed,
+      onCollapse: (value) => setCollapsed(value)
+    },
+    /* @__PURE__ */ import_react16.default.createElement("div", { className: "demo-logo-vertical" }),
+    /* @__PURE__ */ import_react16.default.createElement(
+      import_antd11.Menu,
       {
-        ...item,
-        className: item.active ? props.activeClassName : props.className,
-        iconsClassName: props.iconsClassName,
-        onClick: (e) => {
-          e.preventDefault();
-          handleChange(item);
-        }
+        theme: "dark",
+        defaultSelectedKeys: ["1"],
+        mode: "inline",
+        items
+      }
+    )
+  ), /* @__PURE__ */ import_react16.default.createElement(import_antd11.Layout, null, /* @__PURE__ */ import_react16.default.createElement(Header, { style: { padding: 0, background: colorBgContainer } }), /* @__PURE__ */ import_react16.default.createElement(Content, { style: { margin: "0 16px" } }, /* @__PURE__ */ import_react16.default.createElement(import_antd11.Breadcrumb, { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react16.default.createElement(import_antd11.Breadcrumb.Item, null, "User"), /* @__PURE__ */ import_react16.default.createElement(import_antd11.Breadcrumb.Item, null, "Bill")), /* @__PURE__ */ import_react16.default.createElement(
+    "div",
+    {
+      style: {
+        padding: 24,
+        minHeight: 360,
+        background: colorBgContainer,
+        borderRadius: borderRadiusLG
       }
-    ));
-  })));
+    },
+    "Bill is a cat."
+  )), /* @__PURE__ */ import_react16.default.createElement(Footer, { style: { textAlign: "center" } }, "Ant Design \xA9", (/* @__PURE__ */ new Date()).getFullYear(), " Created by Ant UED")));
 };
 
 // src/Components/Navbar.tsx
@@ -800,25 +834,25 @@ var import_react20 = __toESM(require("react"));
 
 // src/Components/Notification.tsx
 var import_react17 = __toESM(require("react"));
-var import_antd11 = require("antd");
+var import_antd12 = require("antd");
 var import_io = require("react-icons/io");
 var popoverContentStyle = {
   minWidth: "300px",
   maxWidth: "100%"
 };
 var Notification = (props) => /* @__PURE__ */ import_react17.default.createElement(
-  import_antd11.Popover,
+  import_antd12.Popover,
   {
     className: props.className,
     content: /* @__PURE__ */ import_react17.default.createElement("div", { style: popoverContentStyle }, " ", /* @__PURE__ */ import_react17.default.createElement(
-      import_antd11.List,
+      import_antd12.List,
       {
         itemLayout: "horizontal",
         dataSource: props.items,
-        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,
+        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,
           {
-            avatar: /* @__PURE__ */ import_react17.default.createElement(import_antd11.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
+            avatar: /* @__PURE__ */ import_react17.default.createElement(import_antd12.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
             title: item.text,
             description: item.time
           }
@@ -828,7 +862,7 @@ var Notification = (props) => /* @__PURE__ */ import_react17.default.createEleme
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__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))))
+  /* @__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))))
 );
 
 // src/Components/SpanElement.tsx
@@ -837,9 +871,9 @@ var SpanElement = (props) => /* @__PURE__ */ import_react18.default.createElemen
 
 // src/Components/Profile.tsx
 var import_react19 = __toESM(require("react"));
-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)));
+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)));
 
 // src/Components/Navbar.tsx
 var Navbar = (props) => {
@@ -857,7 +891,7 @@ var Navbar = (props) => {
 
 // src/Components/TableElement.tsx
 var import_react21 = __toESM(require("react"));
-var import_antd13 = require("antd");
+var import_antd14 = require("antd");
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [dataSource, setDataSource] = (0, import_react21.useState)([]);
@@ -916,7 +950,7 @@ var TableElement = (props) => {
     }
   } : void 0;
   return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
-    import_antd13.Table,
+    import_antd14.Table,
     {
       loading: props.loading,
       className: props.className,
@@ -938,7 +972,7 @@ var TableElement = (props) => {
 
 // src/Components/DatePicker.tsx
 var import_react22 = __toESM(require("react"));
-var import_antd14 = require("antd");
+var import_antd15 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
 import_dayjs.default.extend(import_customParseFormat.default);
@@ -995,7 +1029,7 @@ var DatePickerElement = (props) => {
     return {};
   };
   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_antd14.DatePicker,
+    import_antd15.DatePicker,
     {
       disabledTime,
       disabledDate,
@@ -1012,11 +1046,11 @@ var DatePickerElement = (props) => {
 
 // src/Components/DateRangePickerElement.tsx
 var import_react23 = __toESM(require("react"));
-var import_antd15 = require("antd");
+var import_antd16 = require("antd");
 var import_dayjs2 = __toESM(require("dayjs"));
 var DateRangePickerElement = (props) => {
   const { value } = props;
-  const { RangePicker } = import_antd15.DatePicker;
+  const { RangePicker } = import_antd16.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) => {
@@ -1047,7 +1081,7 @@ var DateRangePickerElement = (props) => {
     }
     return current && current > today;
   };
-  return /* @__PURE__ */ import_react23.default.createElement(import_antd15.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(
     RangePicker,
     {
       disabledDate,
@@ -1067,19 +1101,19 @@ var Image = (props) => {
 
 // src/Components/SingleCheckbox.tsx
 var import_react25 = __toESM(require("react"));
-var import_antd16 = require("antd");
+var import_antd17 = require("antd");
 var SingleCheckbox = (props) => {
   const handleChange = (e) => {
     if (props.onChange) {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ import_react25.default.createElement(import_antd16.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ import_react25.default.createElement(import_antd17.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
 
 // src/Components/DropDownGroup.tsx
 var import_react26 = __toESM(require("react"));
-var import_antd17 = require("antd");
+var import_antd18 = require("antd");
 var DropDownGroup = (props) => {
   const [selectedValue, setSelectedValue] = (0, import_react26.useState)({
     firstValue: props.value.firstValue,
@@ -1118,7 +1152,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_antd17.Select,
+    import_antd18.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
@@ -1130,7 +1164,7 @@ var DropDownGroup = (props) => {
       showSearch: true
     }
   ), /* @__PURE__ */ import_react26.default.createElement("div", { style: { borderLeft: "1px solid gray" } }), /* @__PURE__ */ import_react26.default.createElement(
-    import_antd17.Select,
+    import_antd18.Select,
     {
       onChange: handleSecondChange,
       variant: props.variant,
@@ -1145,11 +1179,11 @@ var DropDownGroup = (props) => {
 };
 
 // src/Components/FilesUpload.tsx
-var import_antd18 = require("antd");
-var import_icons5 = require("@ant-design/icons");
+var import_antd19 = require("antd");
+var import_icons6 = require("@ant-design/icons");
 var import_react27 = __toESM(require("react"));
 var FileUpload = (props) => {
-  const { Dragger } = import_antd18.Upload;
+  const { Dragger } = import_antd19.Upload;
   const initialFiles = Array.isArray(props.value) ? props.value : [];
   const [files, setFiles] = (0, import_react27.useState)(initialFiles);
   const handleChange = ({ fileList }) => {
@@ -1182,31 +1216,31 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react27.default.createElement("p", null, /* @__PURE__ */ import_react27.default.createElement(import_icons5.InboxOutlined, null)),
+    /* @__PURE__ */ import_react27.default.createElement("p", null, /* @__PURE__ */ import_react27.default.createElement(import_icons6.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_antd19 = require("antd");
+var import_antd20 = 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_antd19.Tabs, { defaultActiveKey: props.value, className: props.containerClassName, items: props.options, onChange: handleChange });
+  return /* @__PURE__ */ import_react28.default.createElement(import_antd20.Tabs, { defaultActiveKey: props.value, className: props.containerClassName, items: props.options, onChange: handleChange });
 };
 
 // src/Components/SwitchElement.tsx
 var import_react29 = __toESM(require("react"));
-var import_antd20 = require("antd");
+var import_antd21 = require("antd");
 var SwitchElement = (props) => {
   const onChange = (checked) => {
     props.onChange && props.onChange(checked);
   };
-  return /* @__PURE__ */ import_react29.default.createElement(import_antd20.Switch, { value: props.value, checkedChildren: props.checkedChildren, unCheckedChildren: props.unCheckedChildren, onChange });
+  return /* @__PURE__ */ import_react29.default.createElement(import_antd21.Switch, { value: props.value, checkedChildren: props.checkedChildren, unCheckedChildren: props.unCheckedChildren, onChange });
 };
 
 // src/Components/Upload.tsx
@@ -1239,7 +1273,7 @@ var Upload2 = (props) => {
 
 // src/Components/OtpElement.tsx
 var import_react31 = __toESM(require("react"));
-var import_antd21 = require("antd");
+var import_antd22 = require("antd");
 var OtpElement = (props) => {
   const length = props.length;
   const [otp, setOtp] = (0, import_react31.useState)(Array(length).fill(""));
@@ -1279,7 +1313,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_antd21.Input,
+    import_antd22.Input,
     {
       key: index,
       className: props.className,
@@ -1733,7 +1767,7 @@ var DivContainer = (props) => {
 
 // src/Components/ColorPickerElement.tsx
 var import_react39 = __toESM(require("react"));
-var import_antd22 = require("antd");
+var import_antd23 = require("antd");
 var ColorPickerElement = (props) => {
   const [val, setVal] = (0, import_react39.useState)(props.value);
   (0, import_react39.useEffect)(() => {
@@ -1745,7 +1779,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_antd22.ColorPicker,
+    import_antd23.ColorPicker,
     {
       className: props.className,
       showText: true,
@@ -1757,9 +1791,9 @@ var ColorPickerElement = (props) => {
 
 // src/Components/NotificationAlert.tsx
 var import_react40 = __toESM(require("react"));
-var import_antd23 = require("antd");
+var import_antd24 = require("antd");
 var NotificationAlert = (props) => {
-  const [api, contextHolder] = import_antd23.notification.useNotification();
+  const [api, contextHolder] = import_antd24.notification.useNotification();
   const openNotificationType = (pauseOnHover, type) => {
     api[type]({
       message: props.message,
@@ -1787,8 +1821,8 @@ var NotificationAlert = (props) => {
 
 // src/Components/TooltipElement.tsx
 var import_react41 = __toESM(require("react"));
-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));
+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));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,

package/dist/index.mjs

@@ -701,27 +701,61 @@ var AddMoreTable = (props) => {
 };
 
 // src/Components/Sidebar.tsx
-import React15 from "react";
-var Sidebar = (props) => {
-  const handleChange = (item) => {
-    if (props.onChange) {
-      props.onChange(item);
-    }
+import React15, { useState as useState5 } from "react";
+import { Breadcrumb, Layout, Menu, theme } from "antd";
+var { Header, Content, Footer, Sider } = Layout;
+function getItem(label, key, icon, children) {
+  return {
+    key,
+    icon,
+    children,
+    label
   };
-  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,
+}
+var Sidebar = (props) => {
+  const [collapsed, setCollapsed] = useState5(false);
+  const {
+    token: { colorBgContainer, borderRadiusLG }
+  } = theme.useToken();
+  const items = props.items?.map((eachItem, index) => {
+    return getItem(
+      eachItem.label,
+      index.toString(),
+      icons[eachItem.icon],
+      eachItem.children?.map(
+        (child, childIndex) => getItem(child.label, `${index}-${childIndex}`, icons[child.icon])
+      )
+    );
+  });
+  return /* @__PURE__ */ React15.createElement(Layout, { style: { minHeight: "100vh" } }, /* @__PURE__ */ React15.createElement(
+    Sider,
+    {
+      collapsible: true,
+      collapsed,
+      onCollapse: (value) => setCollapsed(value)
+    },
+    /* @__PURE__ */ React15.createElement("div", { className: "demo-logo-vertical" }),
+    /* @__PURE__ */ React15.createElement(
+      Menu,
       {
-        ...item,
-        className: item.active ? props.activeClassName : props.className,
-        iconsClassName: props.iconsClassName,
-        onClick: (e) => {
-          e.preventDefault();
-          handleChange(item);
-        }
+        theme: "dark",
+        defaultSelectedKeys: ["1"],
+        mode: "inline",
+        items
+      }
+    )
+  ), /* @__PURE__ */ React15.createElement(Layout, null, /* @__PURE__ */ React15.createElement(Header, { style: { padding: 0, background: colorBgContainer } }), /* @__PURE__ */ React15.createElement(Content, { style: { margin: "0 16px" } }, /* @__PURE__ */ React15.createElement(Breadcrumb, { style: { margin: "16px 0" } }, /* @__PURE__ */ React15.createElement(Breadcrumb.Item, null, "User"), /* @__PURE__ */ React15.createElement(Breadcrumb.Item, null, "Bill")), /* @__PURE__ */ React15.createElement(
+    "div",
+    {
+      style: {
+        padding: 24,
+        minHeight: 360,
+        background: colorBgContainer,
+        borderRadius: borderRadiusLG
       }
-    ));
-  })));
+    },
+    "Bill is a cat."
+  )), /* @__PURE__ */ React15.createElement(Footer, { style: { textAlign: "center" } }, "Ant Design \xA9", (/* @__PURE__ */ new Date()).getFullYear(), " Created by Ant UED")));
 };
 
 // src/Components/Navbar.tsx
@@ -785,11 +819,11 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState5, useEffect as useEffect2 } from "react";
+import React20, { useState as useState6, useEffect as useEffect2 } from "react";
 import { Table as Table2 } from "antd";
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  const [dataSource, setDataSource] = useState5([]);
+  const [dataSource, setDataSource] = useState6([]);
   useEffect2(() => {
     if (tbody) {
       setDataSource(
@@ -866,13 +900,13 @@ var TableElement = (props) => {
 };
 
 // src/Components/DatePicker.tsx
-import React21, { useState as useState6 } from "react";
+import React21, { useState as useState7 } 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] = useState6(props.value);
+  const [dateState, setDateState] = useState7(props.value);
   const handleChange = (date, dateString) => {
     if (date) {
       setDateState(date);
@@ -1007,10 +1041,10 @@ var SingleCheckbox = (props) => {
 };
 
 // src/Components/DropDownGroup.tsx
-import React25, { useState as useState7 } from "react";
+import React25, { useState as useState8 } from "react";
 import { Select as Select4 } from "antd";
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = useState7({
+  const [selectedValue, setSelectedValue] = useState8({
     firstValue: props.value.firstValue,
     secondValue: props.value.secondValue
   });
@@ -1076,11 +1110,11 @@ var DropDownGroup = (props) => {
 // src/Components/FilesUpload.tsx
 import { Upload } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
-import React26, { useState as useState8 } from "react";
+import React26, { useState as useState9 } from "react";
 var FileUpload = (props) => {
   const { Dragger } = Upload;
   const initialFiles = Array.isArray(props.value) ? props.value : [];
-  const [files, setFiles] = useState8(initialFiles);
+  const [files, setFiles] = useState9(initialFiles);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -1139,9 +1173,9 @@ var SwitchElement = (props) => {
 };
 
 // src/Components/Upload.tsx
-import React29, { useState as useState9 } from "react";
+import React29, { useState as useState10 } from "react";
 var Upload2 = (props) => {
-  const [file, setFile] = useState9();
+  const [file, setFile] = useState10();
   const handleFileChange = (e) => {
     setFile(e.target.files[0]);
     if (props.onChange) {
@@ -1167,11 +1201,11 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React30, { useState as useState10, useRef as useRef2, useEffect as useEffect3 } from "react";
+import React30, { useState as useState11, useRef as useRef2, useEffect as useEffect3 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
-  const [otp, setOtp] = useState10(Array(length).fill(""));
+  const [otp, setOtp] = useState11(Array(length).fill(""));
   const inputRefs = useRef2([]);
   const handleChange = (e, index) => {
     const value = e.target.value;
@@ -1685,10 +1719,10 @@ var DivContainer = (props) => {
 };
 
 // src/Components/ColorPickerElement.tsx
-import React38, { useEffect as useEffect6, useState as useState11 } from "react";
+import React38, { useEffect as useEffect6, useState as useState12 } from "react";
 import { ColorPicker } from "antd";
 var ColorPickerElement = (props) => {
-  const [val, setVal] = useState11(props.value);
+  const [val, setVal] = useState12(props.value);
   useEffect6(() => {
     if (props.value) {
       setVal(props.value);

package/package.json

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