@apexcura/ui-components 0.0.14-Beta99 → 0.0.15-Beta

package/dist/index.css

@@ -335,15 +335,35 @@ video {
 .visible {
   visibility: visible;
 }
+.fixed {
+  position: fixed;
+}
 .m-\[10px\] {
   margin: 10px;
 }
+.mr-3 {
+  margin-right: 0.75rem;
+}
 .flex {
   display: flex;
 }
 .table {
   display: table;
 }
+.h-5 {
+  height: 1.25rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -382,6 +402,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.opacity-25 {
+  opacity: 0.25;
+}
+.opacity-75 {
+  opacity: 0.75;
+}
 .shadow-\[0px_0px_1px_1px_\#919191\] {
   --tw-shadow: 0px 0px 1px 1px #919191;
   --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);

package/dist/index.d.mts

@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const Donut: (props: Object) => React$1.JSX.Element;
+declare const Donut: (props: ElementType) => React$1.JSX.Element;
 
 export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const Donut: (props: Object) => React$1.JSX.Element;
+declare const Donut: (props: ElementType) => React$1.JSX.Element;
 
 export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -378,7 +378,6 @@ var MultipleSelectElement = (props) => {
 
 // src/Components/Button.tsx
 var import_react11 = __toESM(require("react"));
-var import_antd10 = require("antd");
 var ButtonElement = (props) => {
   const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
   const [originalSvgContent, setOriginalSvgContent] = (0, import_react11.useState)(null);
@@ -418,7 +417,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, [props.icon, props.className]);
+  }, []);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -435,27 +434,26 @@ var ButtonElement = (props) => {
     }
   };
   return /* @__PURE__ */ import_react11.default.createElement(
-    import_antd10.Button,
+    "button",
     {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      loading: props.loading
+      disabled: props.loading
     },
-    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(
+    props.loading ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react11.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react11.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v8H4z" })), props.label) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, 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 }
       }
-    ),
-    props.label
+    ), props.label)
   );
 };
 
 // src/Components/AddMoreTable.tsx
 var import_react12 = __toESM(require("react"));
-var import_antd11 = require("antd");
+var import_antd10 = require("antd");
 var import_icons2 = require("@ant-design/icons");
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
@@ -550,13 +548,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_antd11.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_antd11.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react12.default.createElement(import_icons2.PlusOutlined, null)));
+          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)));
         } else {
           rowData[`${key}`] = renderInputElement(variable[key]);
         }
       });
     });
-    rowData.actions = /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement(import_antd11.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react12.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react12.default.createElement(import_antd11.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react12.default.createElement(import_icons2.PlusOutlined, null)));
+    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)));
     console.log("=====rowdata", rowData);
     return rowData;
   });
@@ -573,7 +571,7 @@ var AddMoreTable = (props) => {
     });
   }
   return /* @__PURE__ */ import_react12.default.createElement(
-    import_antd11.Table,
+    import_antd10.Table,
     {
       columns,
       dataSource,
@@ -612,25 +610,25 @@ var import_react17 = __toESM(require("react"));
 
 // src/Components/Notification.tsx
 var import_react14 = __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_react14.default.createElement(
-  import_antd12.Popover,
+  import_antd11.Popover,
   {
     className: props.className,
     content: /* @__PURE__ */ import_react14.default.createElement("div", { style: popoverContentStyle }, " ", /* @__PURE__ */ import_react14.default.createElement(
-      import_antd12.List,
+      import_antd11.List,
       {
         itemLayout: "horizontal",
         dataSource: props.items,
-        renderItem: (item, index) => /* @__PURE__ */ import_react14.default.createElement(import_antd12.List.Item, { key: item.text }, /* @__PURE__ */ import_react14.default.createElement(
-          import_antd12.List.Item.Meta,
+        renderItem: (item, index) => /* @__PURE__ */ import_react14.default.createElement(import_antd11.List.Item, { key: item.text }, /* @__PURE__ */ import_react14.default.createElement(
+          import_antd11.List.Item.Meta,
           {
-            avatar: /* @__PURE__ */ import_react14.default.createElement(import_antd12.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
+            avatar: /* @__PURE__ */ import_react14.default.createElement(import_antd11.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
             title: item.text,
             description: item.time
           }
@@ -640,7 +638,7 @@ var Notification = (props) => /* @__PURE__ */ import_react14.default.createEleme
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__PURE__ */ import_react14.default.createElement(import_antd12.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react14.default.createElement(import_antd12.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_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))))
 );
 
 // src/Components/SpanElement.tsx
@@ -649,9 +647,9 @@ var SpanElement = (props) => /* @__PURE__ */ import_react15.default.createElemen
 
 // src/Components/Profile.tsx
 var import_react16 = __toESM(require("react"));
-var import_antd13 = require("antd");
+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_antd13.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react16.default.createElement(import_icons3.UserOutlined, null) }), /* @__PURE__ */ import_react16.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react16.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react16.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
+var Profile = (props) => /* @__PURE__ */ import_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)));
 
 // src/Components/Navbar.tsx
 var Navbar = (props) => {
@@ -669,11 +667,11 @@ var Navbar = (props) => {
 
 // src/Components/TableElement.tsx
 var import_react20 = __toESM(require("react"));
-var import_antd15 = require("antd");
+var import_antd14 = require("antd");
 
 // src/Components/Model.tsx
 var import_react19 = __toESM(require("react"));
-var import_antd14 = require("antd");
+var import_antd13 = require("antd");
 
 // src/Components/ModelBody.tsx
 var import_react18 = __toESM(require("react"));
@@ -695,7 +693,7 @@ var ModelBody = (props) => {
 var ModelElement = (props) => {
   const { model, onCancel, selectedRecord, columns } = props;
   return /* @__PURE__ */ import_react19.default.createElement(
-    import_antd14.Modal,
+    import_antd13.Modal,
     {
       centered: true,
       open: model,
@@ -740,7 +738,8 @@ var TableElement = (props) => {
       {
         title: "#",
         dataIndex: "#",
-        key: "#"
+        key: "#",
+        fixed: "left"
       },
       ...thead.map((col, ind) => ({
         title: col.label,
@@ -798,7 +797,7 @@ var TableElement = (props) => {
     }
   } : void 0;
   return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
-    import_antd15.Table,
+    import_antd14.Table,
     {
       className: props.className,
       pagination: {
@@ -811,14 +810,15 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true
+      bordered: true,
+      scroll: { x: 1300 }
     }
   ), 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_antd16 = 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);
@@ -839,7 +839,7 @@ var DatePickerElement = (props) => {
     }
   };
   return /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement(
-    import_antd16.DatePicker,
+    import_antd15.DatePicker,
     {
       placeholder: props.placeholder,
       value: dateState,
@@ -851,10 +851,10 @@ var DatePickerElement = (props) => {
 
 // src/Components/DateRangePickerElement.tsx
 var import_react22 = __toESM(require("react"));
-var import_antd17 = require("antd");
+var import_antd16 = require("antd");
 var import_dayjs2 = __toESM(require("dayjs"));
 var DateRangePickerElement = (props) => {
-  const { RangePicker } = import_antd17.DatePicker;
+  const { RangePicker } = import_antd16.DatePicker;
   const handleChange = (dates, dateStrings) => {
     if (dates && props.onChange) {
       props.onChange(dateStrings);
@@ -868,7 +868,7 @@ var DateRangePickerElement = (props) => {
     { 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)()] }
   ];
-  return /* @__PURE__ */ import_react22.default.createElement(import_antd17.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
 // src/Components/Image.tsx
@@ -879,19 +879,19 @@ var Image = (props) => {
 
 // src/Components/SingleCheckbox.tsx
 var import_react24 = __toESM(require("react"));
-var import_antd18 = require("antd");
+var import_antd17 = require("antd");
 var SingleCheckbox = (props) => {
   const handleChange = (e) => {
     if (props.onChange) {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ import_react24.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ import_react24.default.createElement(import_antd17.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
 
 // src/Components/DropDownGroup.tsx
 var import_react25 = __toESM(require("react"));
-var import_antd19 = require("antd");
+var import_antd18 = require("antd");
 var DropDownGroup = (props) => {
   const [selectedValue, setSelectedValue] = (0, import_react25.useState)({
     firstValue: {},
@@ -926,7 +926,7 @@ var DropDownGroup = (props) => {
     });
   };
   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_antd19.Select,
+    import_antd18.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
@@ -934,7 +934,7 @@ var DropDownGroup = (props) => {
       className: props.className
     }
   ), /* @__PURE__ */ import_react25.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react25.default.createElement(
-    import_antd19.Select,
+    import_antd18.Select,
     {
       onChange: handleSecondChange,
       variant: props.variant,
@@ -946,10 +946,10 @@ var DropDownGroup = (props) => {
 
 // src/Components/FilesUpload.tsx
 var import_react26 = __toESM(require("react"));
-var import_antd20 = require("antd");
+var import_antd19 = require("antd");
 var import_icons4 = require("@ant-design/icons");
 var FileUpload = (props) => {
-  const { Dragger } = import_antd20.Upload;
+  const { Dragger } = import_antd19.Upload;
   const [files, setFiles] = (0, import_react26.useState)([]);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
@@ -985,23 +985,23 @@ var FileUpload = (props) => {
 
 // src/Components/TabsElement.tsx
 var import_react27 = __toESM(require("react"));
-var import_antd21 = 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_react27.default.createElement(import_antd21.Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
+  return /* @__PURE__ */ import_react27.default.createElement(import_antd20.Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
 };
 
 // src/Components/SwitchElement.tsx
 var import_react28 = __toESM(require("react"));
-var import_antd22 = require("antd");
+var import_antd21 = require("antd");
 var onChange = (checked) => {
   console.log(`switch to ${checked}`);
 };
-var SwitchElement = () => /* @__PURE__ */ import_react28.default.createElement(import_antd22.Switch, { defaultChecked: true, onChange });
+var SwitchElement = () => /* @__PURE__ */ import_react28.default.createElement(import_antd21.Switch, { defaultChecked: true, onChange });
 
 // src/Components/Upload.tsx
 var import_react29 = __toESM(require("react"));
@@ -1033,7 +1033,7 @@ var Upload2 = (props) => {
 
 // src/Components/OtpElement.tsx
 var import_react30 = __toESM(require("react"));
-var import_antd23 = require("antd");
+var import_antd22 = require("antd");
 var OtpElement = (props) => {
   const length = props.length;
   const [otp, setOtp] = (0, import_react30.useState)(Array(length).fill(""));
@@ -1073,7 +1073,7 @@ var OtpElement = (props) => {
     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_antd23.Input,
+    import_antd22.Input,
     {
       key: index,
       className: props.className,
@@ -1091,6 +1091,10 @@ var OtpElement = (props) => {
 var import_react31 = __toESM(require("react"));
 var import_highcharts = __toESM(require("highcharts"));
 var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
+var import_exporting = __toESM(require("highcharts/modules/exporting"));
+if (typeof import_highcharts.default === "object") {
+  (0, import_exporting.default)(import_highcharts.default);
+}
 var HighchartsChart = ({ options }) => {
   return /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options });
 };

package/dist/index.mjs

@@ -317,7 +317,6 @@ var MultipleSelectElement = (props) => {
 
 // src/Components/Button.tsx
 import React11, { useEffect, useState as useState4 } from "react";
-import { Button } from "antd";
 var ButtonElement = (props) => {
   const [svgContent, setSvgContent] = useState4(null);
   const [originalSvgContent, setOriginalSvgContent] = useState4(null);
@@ -357,7 +356,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, [props.icon, props.className]);
+  }, []);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -374,27 +373,26 @@ var ButtonElement = (props) => {
     }
   };
   return /* @__PURE__ */ React11.createElement(
-    Button,
+    "button",
     {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      loading: props.loading
+      disabled: props.loading
     },
-    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
+    props.loading ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React11.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v8H4z" })), props.label) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ),
-    props.label
+    ), props.label)
   );
 };
 
 // src/Components/AddMoreTable.tsx
 import React12, { useEffect as useEffect2, useState as useState5 } from "react";
-import { Table, Button as Button2 } from "antd";
+import { Table, Button } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
@@ -489,13 +487,13 @@ var AddMoreTable = (props) => {
     eachRow.variable_data.forEach((variable, subIndex) => {
       Object.keys(variable).forEach((key) => {
         if (key === "SubRows") {
-          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
         } else {
           rowData[`${key}`] = renderInputElement(variable[key]);
         }
       });
     });
-    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
     console.log("=====rowdata", rowData);
     return rowData;
   });
@@ -551,7 +549,7 @@ import React17 from "react";
 
 // src/Components/Notification.tsx
 import React14 from "react";
-import { Popover, Badge, Button as Button3, Avatar, List } from "antd";
+import { Popover, Badge, Button as Button2, Avatar, List } from "antd";
 import { IoIosNotifications } from "react-icons/io";
 var popoverContentStyle = {
   minWidth: "300px",
@@ -579,7 +577,7 @@ var Notification = (props) => /* @__PURE__ */ React14.createElement(
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__PURE__ */ React14.createElement(Button3, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
+  /* @__PURE__ */ React14.createElement(Button2, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
 );
 
 // src/Components/SpanElement.tsx
@@ -679,7 +677,8 @@ var TableElement = (props) => {
       {
         title: "#",
         dataIndex: "#",
-        key: "#"
+        key: "#",
+        fixed: "left"
       },
       ...thead.map((col, ind) => ({
         title: col.label,
@@ -750,7 +749,8 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true
+      bordered: true,
+      scroll: { x: 1300 }
     }
   ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -1030,6 +1030,10 @@ var OtpElement = (props) => {
 import React31 from "react";
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
+import HighchartsExporting from "highcharts/modules/exporting";
+if (typeof Highcharts === "object") {
+  HighchartsExporting(Highcharts);
+}
 var HighchartsChart = ({ options }) => {
   return /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta99",
+  "version": "0.0.15-Beta",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",