@apexcura/ui-components 0.0.14-Beta261 → 0.0.14-Beta262

package/dist/index.css

@@ -437,43 +437,43 @@ video {
 .bg-sky-700 .icon-active {
   filter: brightness(0) invert(1);
 }
-.submit:where(.css-dev-only-do-not-override-1r287do).ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
+.submit.ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
   color: #472D7A;
   background-color: white;
   border: solid 1px #472D7A;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper {
+.ant-radio-button-wrapper {
   border: 1px solid #919191;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-input-affix-wrapper {
+.ant-input-affix-wrapper {
   border: solid 1px #919191;
   width: 275px;
   height: 16px;
   padding: 16px;
   gap: 10px;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:hover {
+.ant-input-outlined:hover {
   border: solid 1px #919191;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus {
+.ant-input-outlined:focus {
   border: solid 1px #919191;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus-within {
+.ant-input-outlined:focus-within {
   border: solid 1px #919191;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
   display: none;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::after {
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::after {
   display: none;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:not(:first-child)::before {
+.ant-radio-button-wrapper:not(:first-child)::before {
   width: 0;
 }
-:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:first-child {
+.ant-radio-button-wrapper:first-child {
   border-inline-start: 1px solid rgb(145 145 145);
 }
-:where(.css-dev-only-do-not-override-m4timi).ant-tabs-top > .ant-tabs-nav {
+.ant-tabs-top > .ant-tabs-nav {
   margin: 0px;
 }
 .hover\:bg-\[\#F2F2F2\]:hover {

package/dist/index.js

@@ -748,109 +748,16 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-var import_react21 = __toESM(require("react"));
-var import_antd14 = require("antd");
-
-// src/Components/Model.tsx
-var import_react20 = __toESM(require("react"));
-var import_antd13 = require("antd");
-
-// src/Components/ModelBody.tsx
 var import_react19 = __toESM(require("react"));
-var import_moment = __toESM(require("moment"));
-var ModelBody = (props) => {
-  return /* @__PURE__ */ import_react19.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields[1].fields.map(
-    (eachField) => {
-      if (eachField.element === "div") {
-        return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, eachField.label), eachField.dateTime ? /* @__PURE__ */ import_react19.default.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          (0, import_moment.default)(eachField.dateTime).format("LT")
-        ) : "");
-      } else if (eachField.element === "input-radio") {
-        return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(RadioElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ import_react19.default.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          (0, import_moment.default)(eachField.dateTime).format("LT")
-        ) : "");
-      } else if (eachField.element === "button") {
-        return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(ButtonElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ import_react19.default.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          (0, import_moment.default)(eachField.dateTime).format("LT")
-        ) : "");
-      } else {
-        return null;
-      }
-    }
-  ));
-};
-
-// src/Components/Model.tsx
-var ModelElement = (props) => {
-  const { model, onCancel, modalContent } = props;
-  return /* @__PURE__ */ import_react20.default.createElement(
-    import_antd13.Modal,
-    {
-      centered: true,
-      open: model,
-      onCancel,
-      footer: null,
-      width: 850,
-      title: /* @__PURE__ */ import_react20.default.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexWrap: "wrap",
-            padding: "20px",
-            width: "full",
-            margin: "-10px"
-          }
-        },
-        modalContent && modalContent.fields[0].fields.map((eachField) => {
-          return /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontWeight: "500", padding: "10px" } }, /* @__PURE__ */ import_react20.default.createElement(
-            "span",
-            {
-              style: {
-                fontWeight: "200",
-                color: "gray",
-                paddingRight: "10px"
-              }
-            },
-            eachField.fields[0].label
-          ), eachField.fields[0].label !== "" ? eachField.fields[0].label : "--");
-        })
-      )
-    },
-    /* @__PURE__ */ import_react20.default.createElement(ModelBody, { ...props })
-  );
-};
-
-// src/Components/TableElement.tsx
+var import_antd13 = require("antd");
 var import_icons5 = require("@ant-design/icons");
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  const [selectedRecord, setSelectedRecord] = (0, import_react21.useState)({});
-  const [model, setModel] = (0, import_react21.useState)(false);
-  const [dataSource, setDataSource] = (0, import_react21.useState)([]);
+  const [selectedRecord, setSelectedRecord] = (0, import_react19.useState)({});
+  const [dataSource, setDataSource] = (0, import_react19.useState)([]);
+  console.log(selectedRecord);
   const defaultVal = props.value;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (tbody) {
       setDataSource(
         tbody.map((row, index) => ({
@@ -900,18 +807,17 @@ var TableElement = (props) => {
         dataIndex: "View",
         key: "View",
         render: (_, record) => {
-          return /* @__PURE__ */ import_react21.default.createElement(
+          return /* @__PURE__ */ import_react19.default.createElement(
             "a",
             {
               onClick: () => {
                 if (props.view) {
                   setSelectedRecord(record);
                   handleChange(record);
-                  setModel(true);
                 }
               }
             },
-            /* @__PURE__ */ import_react21.default.createElement(import_icons5.EyeOutlined, null)
+            /* @__PURE__ */ import_react19.default.createElement(import_icons5.EyeOutlined, null)
           );
         }
       });
@@ -944,8 +850,8 @@ var TableElement = (props) => {
       }
     }
   } : void 0;
-  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.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,
@@ -962,7 +868,6 @@ var TableElement = (props) => {
             if (props.view) {
               setSelectedRecord(record);
               handleChange(record);
-              setModel(true);
             }
           },
           style: { cursor: "pointer" }
@@ -975,27 +880,18 @@ var TableElement = (props) => {
       bordered: true,
       onChange: onChangeTable
     }
-  ), model && /* @__PURE__ */ import_react21.default.createElement(
-    ModelElement,
-    {
-      selectedRecord,
-      ...props,
-      columns,
-      model,
-      onCancel: () => setModel(false)
-    }
   ));
 };
 
 // src/Components/DatePicker.tsx
-var import_react22 = __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_moment2 = __toESM(require("moment"));
+var import_moment = __toESM(require("moment"));
 import_dayjs.default.extend(import_customParseFormat.default);
 var DatePickerElement = (props) => {
-  const [dateState, setDateState] = (0, import_react22.useState)("");
+  const [dateState, setDateState] = (0, import_react20.useState)("");
   const handleChange = (date, dateString) => {
     if (date) {
       const formattedDate = dateString;
@@ -1011,10 +907,10 @@ var DatePickerElement = (props) => {
     }
   };
   const disabledDate = (current) => {
-    return current && current > (0, import_moment2.default)();
+    return current && current > (0, import_moment.default)();
   };
-  return /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement(
-    import_antd15.DatePicker,
+  return /* @__PURE__ */ import_react20.default.createElement("div", null, /* @__PURE__ */ import_react20.default.createElement(
+    import_antd14.DatePicker,
     {
       disabledDate,
       placeholder: props.placeholder,
@@ -1026,13 +922,13 @@ var DatePickerElement = (props) => {
 };
 
 // src/Components/DateRangePickerElement.tsx
-var import_react23 = __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 import_moment3 = __toESM(require("moment"));
+var import_moment2 = __toESM(require("moment"));
 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 handleChange = (dates, dateStrings) => {
     if (dates) {
@@ -1048,9 +944,9 @@ var DateRangePickerElement = (props) => {
     { label: "Last 90 Days", value: [(0, import_dayjs2.default)().add(-90, "d"), (0, import_dayjs2.default)()] }
   ];
   const disabledDate = (current) => {
-    return current && current > (0, import_moment3.default)();
+    return current && current > (0, import_moment2.default)();
   };
-  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(import_antd15.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react21.default.createElement(
     RangePicker,
     {
       disabledDate,
@@ -1063,28 +959,28 @@ var DateRangePickerElement = (props) => {
 };
 
 // src/Components/Image.tsx
-var import_react24 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var Image = (props) => {
-  return /* @__PURE__ */ import_react24.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_react25 = __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_react25.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_react26 = __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_react26.useState)({
+  const [selectedValue, setSelectedValue] = (0, import_react24.useState)({
     firstValue: {},
     secondValue: {},
     temp: ""
@@ -1122,8 +1018,8 @@ var DropDownGroup = (props) => {
   const secondFilterOptions = (input, option) => {
     return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
   };
-  return /* @__PURE__ */ import_react26.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react26.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react26.default.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ import_react26.default.createElement(
-    import_antd18.Select,
+  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,
@@ -1132,8 +1028,8 @@ var DropDownGroup = (props) => {
       filterOption: firstFilterOptions,
       showSearch: true
     }
-  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react26.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,
@@ -1146,12 +1042,12 @@ var DropDownGroup = (props) => {
 };
 
 // src/Components/FilesUpload.tsx
-var import_react27 = __toESM(require("react"));
-var import_antd19 = require("antd");
+var import_react25 = __toESM(require("react"));
+var import_antd18 = require("antd");
 var import_icons6 = require("@ant-design/icons");
 var FileUpload = (props) => {
-  const { Dragger } = import_antd19.Upload;
-  const [files, setFiles] = (0, import_react27.useState)([]);
+  const { Dragger } = import_antd18.Upload;
+  const [files, setFiles] = (0, import_react25.useState)([]);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -1166,7 +1062,7 @@ var FileUpload = (props) => {
       onSuccess("ok");
     }, 0);
   };
-  return /* @__PURE__ */ import_react27.default.createElement("div", null, /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement("div", null, /* @__PURE__ */ import_react25.default.createElement(
     Dragger,
     {
       action: "",
@@ -1179,35 +1075,35 @@ 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, "Click or drag file to upload")
+    /* @__PURE__ */ import_react25.default.createElement("p", null, /* @__PURE__ */ import_react25.default.createElement(import_icons6.InboxOutlined, null)),
+    /* @__PURE__ */ import_react25.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_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_react28.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_react29 = __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_react29.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_react30 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var Upload2 = (props) => {
-  const [file, setFile] = (0, import_react30.useState)();
+  const [file, setFile] = (0, import_react28.useState)();
   const handleFileChange = (e) => {
     setFile(e.target.files[0]);
     if (props.onChange) {
@@ -1220,7 +1116,7 @@ var Upload2 = (props) => {
       return;
     }
   };
-  return /* @__PURE__ */ import_react30.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ import_react30.default.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ import_react30.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",
@@ -1233,12 +1129,12 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-var import_react31 = __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_react31.useState)(Array(length).fill(""));
-  const inputRefs = (0, import_react31.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 === "") {
@@ -1270,11 +1166,11 @@ var OtpElement = (props) => {
       });
     }
   };
-  (0, import_react31.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     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,
+  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,
@@ -1289,7 +1185,7 @@ var OtpElement = (props) => {
 };
 
 // src/Components/CircleDonut.tsx
-var import_react32 = __toESM(require("react"));
+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);
@@ -1366,11 +1262,11 @@ var CircleDonut = (props) => {
       ctx.restore();
     }
   };
-  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_2.Doughnut, { data, options, plugins: [centerTextPlugin] }));
+  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_react33 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 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);
@@ -1447,11 +1343,11 @@ var SemiCircleDonut = (props) => {
       ctx.restore();
     }
   };
-  return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react33.default.createElement(import_react_chartjs_22.Doughnut, { data, options, plugins: [centerTextPlugin] }));
+  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] }));
 };
 
 // src/Components/HorizontalBarChart.tsx
-var import_react34 = __toESM(require("react"));
+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);
@@ -1500,22 +1396,22 @@ var HorizontalBarChart = (props) => {
       }
     }
   };
-  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(import_react_chartjs_23.Bar, { data, options }));
+  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_react35 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_auto = __toESM(require("chart.js/auto"));
 var LineChart = (props) => {
-  const chartRef = (0, import_react35.useRef)(null);
-  const chartInstance = (0, import_react35.useRef)(null);
+  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_react35.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1573,16 +1469,16 @@ var LineChart = (props) => {
       }
     };
   }, [labels, data]);
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react35.default.createElement("canvas", { ref: chartRef }));
+  return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/DoubleBarChart.tsx
-var import_react36 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_auto2 = __toESM(require("chart.js/auto"));
 var DoubleBarChart = (props) => {
-  const chartRef = (0, import_react36.useRef)(null);
-  const chartInstance = (0, import_react36.useRef)(null);
-  (0, import_react36.useEffect)(() => {
+  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();
@@ -1651,11 +1547,11 @@ var DoubleBarChart = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ import_react36.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react36.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react36.default.createElement("canvas", { ref: chartRef }));
+  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_react37 = __toESM(require("react"));
+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);
@@ -1717,7 +1613,7 @@ var BarChart = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ import_react37.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react37.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react37.default.createElement(import_react_chartjs_24.Bar, { data, options }));
+  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 }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -682,107 +682,14 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React21, { useState as useState5, useEffect as useEffect2 } from "react";
+import React19, { useState as useState5, useEffect as useEffect2 } from "react";
 import { Table as Table2 } from "antd";
-
-// src/Components/Model.tsx
-import React20 from "react";
-import { Modal } from "antd";
-
-// src/Components/ModelBody.tsx
-import React19 from "react";
-import moment from "moment";
-var ModelBody = (props) => {
-  return /* @__PURE__ */ React19.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields[1].fields.map(
-    (eachField) => {
-      if (eachField.element === "div") {
-        return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("div", { className: eachField.className }, eachField.label), eachField.dateTime ? /* @__PURE__ */ React19.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          moment(eachField.dateTime).format("LT")
-        ) : "");
-      } else if (eachField.element === "input-radio") {
-        return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("div", { className: eachField.className }, /* @__PURE__ */ React19.createElement(RadioElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ React19.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          moment(eachField.dateTime).format("LT")
-        ) : "");
-      } else if (eachField.element === "button") {
-        return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("div", { className: eachField.className }, /* @__PURE__ */ React19.createElement(ButtonElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ React19.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          moment(eachField.dateTime).format("LT")
-        ) : "");
-      } else {
-        return null;
-      }
-    }
-  ));
-};
-
-// src/Components/Model.tsx
-var ModelElement = (props) => {
-  const { model, onCancel, modalContent } = props;
-  return /* @__PURE__ */ React20.createElement(
-    Modal,
-    {
-      centered: true,
-      open: model,
-      onCancel,
-      footer: null,
-      width: 850,
-      title: /* @__PURE__ */ React20.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexWrap: "wrap",
-            padding: "20px",
-            width: "full",
-            margin: "-10px"
-          }
-        },
-        modalContent && modalContent.fields[0].fields.map((eachField) => {
-          return /* @__PURE__ */ React20.createElement("p", { style: { fontWeight: "500", padding: "10px" } }, /* @__PURE__ */ React20.createElement(
-            "span",
-            {
-              style: {
-                fontWeight: "200",
-                color: "gray",
-                paddingRight: "10px"
-              }
-            },
-            eachField.fields[0].label
-          ), eachField.fields[0].label !== "" ? eachField.fields[0].label : "--");
-        })
-      )
-    },
-    /* @__PURE__ */ React20.createElement(ModelBody, { ...props })
-  );
-};
-
-// src/Components/TableElement.tsx
 import { EyeOutlined } from "@ant-design/icons";
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = useState5({});
-  const [model, setModel] = useState5(false);
   const [dataSource, setDataSource] = useState5([]);
+  console.log(selectedRecord);
   const defaultVal = props.value;
   useEffect2(() => {
     if (tbody) {
@@ -834,18 +741,17 @@ var TableElement = (props) => {
         dataIndex: "View",
         key: "View",
         render: (_, record) => {
-          return /* @__PURE__ */ React21.createElement(
+          return /* @__PURE__ */ React19.createElement(
             "a",
             {
               onClick: () => {
                 if (props.view) {
                   setSelectedRecord(record);
                   handleChange(record);
-                  setModel(true);
                 }
               }
             },
-            /* @__PURE__ */ React21.createElement(EyeOutlined, null)
+            /* @__PURE__ */ React19.createElement(EyeOutlined, null)
           );
         }
       });
@@ -878,7 +784,7 @@ var TableElement = (props) => {
       }
     }
   } : void 0;
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     Table2,
     {
       loading: props.loading,
@@ -896,7 +802,6 @@ var TableElement = (props) => {
             if (props.view) {
               setSelectedRecord(record);
               handleChange(record);
-              setModel(true);
             }
           },
           style: { cursor: "pointer" }
@@ -909,24 +814,15 @@ var TableElement = (props) => {
       bordered: true,
       onChange: onChangeTable
     }
-  ), model && /* @__PURE__ */ React21.createElement(
-    ModelElement,
-    {
-      selectedRecord,
-      ...props,
-      columns,
-      model,
-      onCancel: () => setModel(false)
-    }
   ));
 };
 
 // src/Components/DatePicker.tsx
-import React22, { useState as useState6 } from "react";
+import React20, { useState as useState6 } from "react";
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat.js";
-import moment2 from "moment";
+import moment from "moment";
 dayjs.extend(customParseFormat);
 var DatePickerElement = (props) => {
   const [dateState, setDateState] = useState6("");
@@ -945,9 +841,9 @@ var DatePickerElement = (props) => {
     }
   };
   const disabledDate = (current) => {
-    return current && current > moment2();
+    return current && current > moment();
   };
-  return /* @__PURE__ */ React22.createElement("div", null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React20.createElement("div", null, /* @__PURE__ */ React20.createElement(
     DatePicker,
     {
       disabledDate,
@@ -960,10 +856,10 @@ var DatePickerElement = (props) => {
 };
 
 // src/Components/DateRangePickerElement.tsx
-import React23 from "react";
+import React21 from "react";
 import { DatePicker as DatePicker2, Space } from "antd";
 import dayjs2 from "dayjs";
-import moment3 from "moment";
+import moment2 from "moment";
 var DateRangePickerElement = (props) => {
   const { value } = props;
   const { RangePicker } = DatePicker2;
@@ -982,9 +878,9 @@ var DateRangePickerElement = (props) => {
     { label: "Last 90 Days", value: [dayjs2().add(-90, "d"), dayjs2()] }
   ];
   const disabledDate = (current) => {
-    return current && current > moment3();
+    return current && current > moment2();
   };
-  return /* @__PURE__ */ React23.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React21.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React21.createElement(
     RangePicker,
     {
       disabledDate,
@@ -997,13 +893,13 @@ var DateRangePickerElement = (props) => {
 };
 
 // src/Components/Image.tsx
-import React24 from "react";
+import React22 from "react";
 var Image = (props) => {
-  return /* @__PURE__ */ React24.createElement("img", { className: props.className, src: props.img, alt: "image" });
+  return /* @__PURE__ */ React22.createElement("img", { className: props.className, src: props.img, alt: "image" });
 };
 
 // src/Components/SingleCheckbox.tsx
-import React25 from "react";
+import React23 from "react";
 import { Checkbox as Checkbox2 } from "antd";
 var SingleCheckbox = (props) => {
   const handleChange = (e) => {
@@ -1011,11 +907,11 @@ var SingleCheckbox = (props) => {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ React23.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
 
 // src/Components/DropDownGroup.tsx
-import React26, { useState as useState7 } from "react";
+import React24, { useState as useState7 } from "react";
 import { Select as Select4 } from "antd";
 var DropDownGroup = (props) => {
   const [selectedValue, setSelectedValue] = useState7({
@@ -1056,7 +952,7 @@ var DropDownGroup = (props) => {
   const secondFilterOptions = (input, option) => {
     return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
   };
-  return /* @__PURE__ */ React26.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React26.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React26.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React24.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React24.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React24.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ React24.createElement(
     Select4,
     {
       onChange: handleFirstChange,
@@ -1066,7 +962,7 @@ var DropDownGroup = (props) => {
       filterOption: firstFilterOptions,
       showSearch: true
     }
-  ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React24.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React24.createElement(
     Select4,
     {
       onChange: handleSecondChange,
@@ -1080,7 +976,7 @@ var DropDownGroup = (props) => {
 };
 
 // src/Components/FilesUpload.tsx
-import React27, { useState as useState8 } from "react";
+import React25, { useState as useState8 } from "react";
 import { Upload } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
 var FileUpload = (props) => {
@@ -1100,7 +996,7 @@ var FileUpload = (props) => {
       onSuccess("ok");
     }, 0);
   };
-  return /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement(
     Dragger,
     {
       action: "",
@@ -1113,13 +1009,13 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ React27.createElement("p", null, /* @__PURE__ */ React27.createElement(InboxOutlined, null)),
-    /* @__PURE__ */ React27.createElement("p", null, "Click or drag file to upload")
+    /* @__PURE__ */ React25.createElement("p", null, /* @__PURE__ */ React25.createElement(InboxOutlined, null)),
+    /* @__PURE__ */ React25.createElement("p", null, "Click or drag file to upload")
   ));
 };
 
 // src/Components/TabsElement.tsx
-import React28 from "react";
+import React26 from "react";
 import { Tabs } from "antd";
 var TabsElement = (props) => {
   const handleChange = (key) => {
@@ -1127,19 +1023,19 @@ var TabsElement = (props) => {
       props.onChange(props.options?.find((eachOption) => eachOption.key === key));
     }
   };
-  return /* @__PURE__ */ React28.createElement(Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
+  return /* @__PURE__ */ React26.createElement(Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
 };
 
 // src/Components/SwitchElement.tsx
-import React29 from "react";
+import React27 from "react";
 import { Switch } from "antd";
 var onChange = (checked) => {
   console.log(`switch to ${checked}`);
 };
-var SwitchElement = () => /* @__PURE__ */ React29.createElement(Switch, { defaultChecked: true, onChange });
+var SwitchElement = () => /* @__PURE__ */ React27.createElement(Switch, { defaultChecked: true, onChange });
 
 // src/Components/Upload.tsx
-import React30, { useState as useState9 } from "react";
+import React28, { useState as useState9 } from "react";
 var Upload2 = (props) => {
   const [file, setFile] = useState9();
   const handleFileChange = (e) => {
@@ -1154,7 +1050,7 @@ var Upload2 = (props) => {
       return;
     }
   };
-  return /* @__PURE__ */ React30.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ React30.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React28.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ React28.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ React28.createElement(
     "button",
     {
       type: "button",
@@ -1167,7 +1063,7 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React31, { useState as useState10, useRef, useEffect as useEffect3 } from "react";
+import React29, { useState as useState10, useRef, useEffect as useEffect3 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
@@ -1207,7 +1103,7 @@ var OtpElement = (props) => {
   useEffect3(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  return /* @__PURE__ */ React31.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React29.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React29.createElement(
     Input3,
     {
       key: index,
@@ -1223,7 +1119,7 @@ var OtpElement = (props) => {
 };
 
 // src/Components/CircleDonut.tsx
-import React32 from "react";
+import React30 from "react";
 import { Doughnut } from "react-chartjs-2";
 import {
   Chart as ChartJS,
@@ -1306,11 +1202,11 @@ var CircleDonut = (props) => {
       ctx.restore();
     }
   };
-  return /* @__PURE__ */ React32.createElement("div", { className: props.className }, /* @__PURE__ */ React32.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React32.createElement(Doughnut, { data, options, plugins: [centerTextPlugin] }));
+  return /* @__PURE__ */ React30.createElement("div", { className: props.className }, /* @__PURE__ */ React30.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React30.createElement(Doughnut, { data, options, plugins: [centerTextPlugin] }));
 };
 
 // src/Components/SemiCircleDonut.tsx
-import React33 from "react";
+import React31 from "react";
 import { Doughnut as Doughnut2 } from "react-chartjs-2";
 import {
   Chart as ChartJS2,
@@ -1393,11 +1289,11 @@ var SemiCircleDonut = (props) => {
       ctx.restore();
     }
   };
-  return /* @__PURE__ */ React33.createElement("div", { className: props.className }, /* @__PURE__ */ React33.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React33.createElement(Doughnut2, { data, options, plugins: [centerTextPlugin] }));
+  return /* @__PURE__ */ React31.createElement("div", { className: props.className }, /* @__PURE__ */ React31.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React31.createElement(Doughnut2, { data, options, plugins: [centerTextPlugin] }));
 };
 
 // src/Components/HorizontalBarChart.tsx
-import React34 from "react";
+import React32 from "react";
 import { Bar } from "react-chartjs-2";
 import {
   Chart as ChartJS3,
@@ -1452,11 +1348,11 @@ var HorizontalBarChart = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React34.createElement(Bar, { data, options }));
+  return /* @__PURE__ */ React32.createElement("div", { className: props.className }, /* @__PURE__ */ React32.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React32.createElement(Bar, { data, options }));
 };
 
 // src/Components/LineChart.tsx
-import React35, { useEffect as useEffect4, useRef as useRef2 } from "react";
+import React33, { useEffect as useEffect4, useRef as useRef2 } from "react";
 import Chart from "chart.js/auto";
 var LineChart = (props) => {
   const chartRef = useRef2(null);
@@ -1525,11 +1421,11 @@ var LineChart = (props) => {
       }
     };
   }, [labels, data]);
-  return /* @__PURE__ */ React35.createElement("div", { className: props.className }, /* @__PURE__ */ React35.createElement("canvas", { ref: chartRef }));
+  return /* @__PURE__ */ React33.createElement("div", { className: props.className }, /* @__PURE__ */ React33.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/DoubleBarChart.tsx
-import React36, { useEffect as useEffect5, useRef as useRef3 } from "react";
+import React34, { useEffect as useEffect5, useRef as useRef3 } from "react";
 import Chart2 from "chart.js/auto";
 var DoubleBarChart = (props) => {
   const chartRef = useRef3(null);
@@ -1603,11 +1499,11 @@ var DoubleBarChart = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React36.createElement("div", { className: props.className }, /* @__PURE__ */ React36.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React36.createElement("canvas", { ref: chartRef }));
+  return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/BarChart.tsx
-import React37 from "react";
+import React35 from "react";
 import { Bar as Bar2 } from "react-chartjs-2";
 import {
   Chart as ChartJS4,
@@ -1675,7 +1571,7 @@ var BarChart = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React37.createElement("div", { className: props.className }, /* @__PURE__ */ React37.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React37.createElement(Bar2, { data, options }));
+  return /* @__PURE__ */ React35.createElement("div", { className: props.className }, /* @__PURE__ */ React35.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React35.createElement(Bar2, { data, options }));
 };
 export {
   AddMoreTable,

package/package.json

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