@databrainhq/plugin 0.9.8 → 0.9.9

package/dist/index.es.js

@@ -2648,17 +2648,17 @@ var classnames$1 = { exports: {} };
 })(classnames$1);
 var classnames = classnames$1.exports;
 var styles$K = {
-  "btn-primary": "_btn-primary_u81u9_1",
-  "btn-secondary": "_btn-secondary_u81u9_9",
-  "btn-reject": "_btn-reject_u81u9_17",
-  "btn-outlined": "_btn-outlined_u81u9_27",
-  "btn-tertiary": "_btn-tertiary_u81u9_35",
-  "btn-default": "_btn-default_u81u9_43",
-  "btn-large": "_btn-large_u81u9_49",
-  "btn-small": "_btn-small_u81u9_55",
-  "btn-xs": "_btn-xs_u81u9_61",
-  "btn-medium": "_btn-medium_u81u9_67",
-  "btn-11rem": "_btn-11rem_u81u9_75"
+  "btn-primary": "_btn-primary_17kvk_1",
+  "btn-secondary": "_btn-secondary_17kvk_5",
+  "btn-reject": "_btn-reject_17kvk_9",
+  "btn-outlined": "_btn-outlined_17kvk_14",
+  "btn-tertiary": "_btn-tertiary_17kvk_18",
+  "btn-default": "_btn-default_17kvk_22",
+  "btn-large": "_btn-large_17kvk_25",
+  "btn-small": "_btn-small_17kvk_28",
+  "btn-xs": "_btn-xs_17kvk_31",
+  "btn-medium": "_btn-medium_17kvk_34",
+  "btn-11rem": "_btn-11rem_17kvk_38"
 };
 var jsxRuntime$1 = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -4953,42 +4953,42 @@ let xe = "div", ne = S.RenderStrategy, re = C$2(function(e2, s2) {
   let n2 = useContext(F) !== null, m2 = s() !== null;
   return React__default.createElement(React__default.Fragment, null, !n2 && m2 ? React__default.createElement(q, { ref: s$12, ...e2 }) : React__default.createElement(re, { ref: s$12, ...e2 }));
 }), We = Object.assign(q, { Child: Pe, Root: q });
-const listBoxButton = "_listBoxButton_ln4ru_17";
-const selectedOptionText = "_selectedOptionText_ln4ru_49";
-const transitionDiv = "_transitionDiv_ln4ru_57";
-const listboxButtonWrapper = "_listboxButtonWrapper_ln4ru_65";
-const arrowicon = "_arrowicon_ln4ru_71";
-const leave$2 = "_leave_ln4ru_77";
-const leaveFrom$2 = "_leaveFrom_ln4ru_83";
-const leaveTo$2 = "_leaveTo_ln4ru_89";
-const notAvailable = "_notAvailable_ln4ru_95";
-const option$1 = "_option_ln4ru_101";
-const activeOption = "_activeOption_ln4ru_107";
-const optionSelected = "_optionSelected_ln4ru_113";
-const inactiveOption = "_inactiveOption_ln4ru_119";
-const optionLabel = "_optionLabel_ln4ru_125";
-const optionSubLabel = "_optionSubLabel_ln4ru_131";
-const selectedLabel = "_selectedLabel_ln4ru_137";
-const nonselectedLabel = "_nonselectedLabel_ln4ru_143";
-const check = "_check_ln4ru_149";
-const checkActive = "_checkActive_ln4ru_155";
-const checkInactive = "_checkInactive_ln4ru_161";
-const checkIcon$1 = "_checkIcon_ln4ru_167";
-const checkIconSelected = "_checkIconSelected_ln4ru_173";
-const checkIconUnselected = "_checkIconUnselected_ln4ru_179";
-const loadMore$1 = "_loadMore_ln4ru_185";
-const loadMoreIcon$1 = "_loadMoreIcon_ln4ru_191";
-const selectedList = "_selectedList_ln4ru_197";
-const selectedListItem = "_selectedListItem_ln4ru_203";
-const label$7 = "_label_ln4ru_209";
-const clientText$1 = "_clientText_ln4ru_215";
+const listBoxButton = "_listBoxButton_1jb3f_9";
+const selectedOptionText = "_selectedOptionText_1jb3f_25";
+const transitionDiv = "_transitionDiv_1jb3f_29";
+const listboxButtonWrapper = "_listboxButtonWrapper_1jb3f_33";
+const arrowicon = "_arrowicon_1jb3f_36";
+const leave$2 = "_leave_1jb3f_39";
+const leaveFrom$2 = "_leaveFrom_1jb3f_42";
+const leaveTo$2 = "_leaveTo_1jb3f_45";
+const notAvailable = "_notAvailable_1jb3f_48";
+const option$1 = "_option_1jb3f_51";
+const activeOption = "_activeOption_1jb3f_54";
+const optionSelected = "_optionSelected_1jb3f_57";
+const inactiveOption = "_inactiveOption_1jb3f_60";
+const optionLabel = "_optionLabel_1jb3f_63";
+const optionSubLabel = "_optionSubLabel_1jb3f_66";
+const selectedLabel = "_selectedLabel_1jb3f_69";
+const nonselectedLabel = "_nonselectedLabel_1jb3f_72";
+const check = "_check_1jb3f_75";
+const checkActive = "_checkActive_1jb3f_78";
+const checkInactive = "_checkInactive_1jb3f_81";
+const checkIcon$1 = "_checkIcon_1jb3f_84";
+const checkIconSelected = "_checkIconSelected_1jb3f_87";
+const checkIconUnselected = "_checkIconUnselected_1jb3f_90";
+const loadMore$1 = "_loadMore_1jb3f_93";
+const loadMoreIcon$1 = "_loadMoreIcon_1jb3f_96";
+const selectedList = "_selectedList_1jb3f_99";
+const selectedListItem = "_selectedListItem_1jb3f_102";
+const label$7 = "_label_1jb3f_105";
+const clientText$1 = "_clientText_1jb3f_108";
 var style = {
-  "listBox-label": "_listBox-label_ln4ru_1",
-  "listBox-labelFloating": "_listBox-labelFloating_ln4ru_9",
-  "listBoxButton-container": "_listBoxButton-container_ln4ru_17",
-  "listBoxButton-containerFloating": "_listBoxButton-containerFloating_ln4ru_25",
+  "listBox-label": "_listBox-label_1jb3f_1",
+  "listBox-labelFloating": "_listBox-labelFloating_1jb3f_5",
+  "listBoxButton-container": "_listBoxButton-container_1jb3f_9",
+  "listBoxButton-containerFloating": "_listBoxButton-containerFloating_1jb3f_13",
   listBoxButton,
-  "listBox-option": "_listBox-option_ln4ru_41",
+  "listBox-option": "_listBox-option_1jb3f_21",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -5018,22 +5018,22 @@ var style = {
   label: label$7,
   clientText: clientText$1
 };
-const primary$1 = "_primary_1ipyg_1";
-const secondary = "_secondary_1ipyg_9";
-const tertiary = "_tertiary_1ipyg_19";
+const primary$1 = "_primary_18yak_1";
+const secondary = "_secondary_18yak_5";
+const tertiary = "_tertiary_18yak_10";
 var styles$I = {
   primary: primary$1,
   secondary,
   tertiary,
-  "font-18": "_font-18_1ipyg_27",
-  "font-20": "_font-20_1ipyg_35",
-  "font-14": "_font-14_1ipyg_43",
-  "font-14a": "_font-14a_1ipyg_51",
-  "font-14b": "_font-14b_1ipyg_59",
-  "font-14c": "_font-14c_1ipyg_67",
-  "font-14d": "_font-14d_1ipyg_75",
-  "font-15": "_font-15_1ipyg_83",
-  "font-34": "_font-34_1ipyg_89"
+  "font-18": "_font-18_18yak_14",
+  "font-20": "_font-20_18yak_18",
+  "font-14": "_font-14_18yak_22",
+  "font-14a": "_font-14a_18yak_26",
+  "font-14b": "_font-14b_18yak_30",
+  "font-14c": "_font-14c_18yak_34",
+  "font-14d": "_font-14d_18yak_38",
+  "font-15": "_font-15_18yak_42",
+  "font-34": "_font-34_18yak_45"
 };
 const variants = {
   h1: "h1",
@@ -5061,10 +5061,10 @@ const Text = ({
     children: children2
   });
 };
-const search$1 = "_search_qirxg_1";
+const search$1 = "_search_1klck_1";
 var styles$H = {
-  "searchTab-container": "_searchTab-container_qirxg_1",
-  "searchTab-input": "_searchTab-input_qirxg_9",
+  "searchTab-container": "_searchTab-container_1klck_1",
+  "searchTab-input": "_searchTab-input_1klck_5",
   search: search$1
 };
 const iconoirSearch = (props) => /* @__PURE__ */ jsx("svg", {
@@ -7361,23 +7361,23 @@ const ExternalMetricForm = ({
     })]
   });
 };
-const container$d = "_container_1dkbf_1";
-const wrapper$2 = "_wrapper_1dkbf_9";
-const label$3 = "_label_1dkbf_17";
-const floatingLabel = "_floatingLabel_1dkbf_25";
-const floatingText = "_floatingText_1dkbf_31";
-const clientText = "_clientText_1dkbf_39";
-const normalText = "_normalText_1dkbf_47";
-const dropdown$1 = "_dropdown_1dkbf_55";
-const options = "_options_1dkbf_63";
-const checkedOption = "_checkedOption_1dkbf_71";
-const option = "_option_1dkbf_63";
-const icon$1 = "_icon_1dkbf_87";
-const text$1 = "_text_1dkbf_95";
-const search = "_search_1dkbf_103";
-const loadMore = "_loadMore_1dkbf_111";
-const loadMoreIcon = "_loadMoreIcon_1dkbf_119";
-const aboveList = "_aboveList_1dkbf_127";
+const container$d = "_container_1f7qx_1";
+const wrapper$2 = "_wrapper_1f7qx_5";
+const label$3 = "_label_1f7qx_9";
+const floatingLabel = "_floatingLabel_1f7qx_13";
+const floatingText = "_floatingText_1f7qx_16";
+const clientText = "_clientText_1f7qx_20";
+const normalText = "_normalText_1f7qx_24";
+const dropdown$1 = "_dropdown_1f7qx_28";
+const options = "_options_1f7qx_32";
+const checkedOption = "_checkedOption_1f7qx_36";
+const option = "_option_1f7qx_32";
+const icon$1 = "_icon_1f7qx_44";
+const text$1 = "_text_1f7qx_48";
+const search = "_search_1f7qx_52";
+const loadMore = "_loadMore_1f7qx_56";
+const loadMoreIcon = "_loadMoreIcon_1f7qx_60";
+const aboveList = "_aboveList_1f7qx_64";
 var styles$y = {
   container: container$d,
   wrapper: wrapper$2,
@@ -85673,46 +85673,50 @@ function getAccessorAttributes(accessor) {
     ...accessor
   };
 }
-const tableData = "_tableData_1bay1_7";
-const tableHeadCol$1 = "_tableHeadCol_1bay1_13";
-const tableRow$1 = "_tableRow_1bay1_19";
-const tableRowCol$1 = "_tableRowCol_1bay1_25";
-const row = "_row_1bay1_31";
-const container$b = "_container_1bay1_37";
-const table$2 = "_table_1bay1_1";
-const previewTable = "_previewTable_1bay1_49";
-const preview = "_preview_1bay1_49";
-const searchButton = "_searchButton_1bay1_61";
-const previewText = "_previewText_1bay1_67";
-const noData$1 = "_noData_1bay1_73";
-const error$2 = "_error_1bay1_79";
-const errorMsg = "_errorMsg_1bay1_85";
-const tableIcon = "_tableIcon_1bay1_91";
-const stripedRow = "_stripedRow_1bay1_97";
-const rowHover = "_rowHover_1bay1_103";
-const rightBorder = "_rightBorder_1bay1_109";
-const searchContainer = "_searchContainer_1bay1_115";
-const sortButton = "_sortButton_1bay1_121";
-const searchTab = "_searchTab_1bay1_127";
-const searchTabInput = "_searchTabInput_1bay1_133";
-const searchTabIcon = "_searchTabIcon_1bay1_139";
-const noDataHead = "_noDataHead_1bay1_145";
-const noDataBody = "_noDataBody_1bay1_151";
-const showSort = "_showSort_1bay1_157";
-const noSort = "_noSort_1bay1_163";
-const pagination = "_pagination_1bay1_169";
-const rowStyle = "_rowStyle_1bay1_175";
-const rowText = "_rowText_1bay1_181";
-const rowsDropdown = "_rowsDropdown_1bay1_187";
-const pageStyle = "_pageStyle_1bay1_193";
-const buttonContainer = "_buttonContainer_1bay1_199";
-const button$6 = "_button_1bay1_199";
-const paginationWrapper = "_paginationWrapper_1bay1_217";
-const current = "_current_1bay1_223";
+const tableData = "_tableData_2dwtv_7";
+const tableHeadCol$1 = "_tableHeadCol_2dwtv_13";
+const resizer = "_resizer_2dwtv_19";
+const resizing = "_resizing_2dwtv_31";
+const tableRow$1 = "_tableRow_2dwtv_37";
+const tableRowCol$1 = "_tableRowCol_2dwtv_43";
+const row = "_row_2dwtv_49";
+const container$b = "_container_2dwtv_55";
+const table$2 = "_table_2dwtv_1";
+const previewTable = "_previewTable_2dwtv_67";
+const preview = "_preview_2dwtv_67";
+const searchButton = "_searchButton_2dwtv_79";
+const previewText = "_previewText_2dwtv_85";
+const noData$1 = "_noData_2dwtv_91";
+const error$2 = "_error_2dwtv_97";
+const errorMsg = "_errorMsg_2dwtv_103";
+const tableIcon = "_tableIcon_2dwtv_109";
+const stripedRow = "_stripedRow_2dwtv_115";
+const rowHover = "_rowHover_2dwtv_121";
+const rightBorder = "_rightBorder_2dwtv_127";
+const searchContainer = "_searchContainer_2dwtv_133";
+const sortButton = "_sortButton_2dwtv_139";
+const searchTab = "_searchTab_2dwtv_145";
+const searchTabInput = "_searchTabInput_2dwtv_151";
+const searchTabIcon = "_searchTabIcon_2dwtv_157";
+const noDataHead = "_noDataHead_2dwtv_163";
+const noDataBody = "_noDataBody_2dwtv_169";
+const showSort = "_showSort_2dwtv_175";
+const noSort = "_noSort_2dwtv_181";
+const pagination = "_pagination_2dwtv_187";
+const rowStyle = "_rowStyle_2dwtv_193";
+const rowText = "_rowText_2dwtv_199";
+const rowsDropdown = "_rowsDropdown_2dwtv_205";
+const pageStyle = "_pageStyle_2dwtv_211";
+const buttonContainer = "_buttonContainer_2dwtv_217";
+const button$6 = "_button_2dwtv_217";
+const paginationWrapper = "_paginationWrapper_2dwtv_235";
+const current = "_current_2dwtv_241";
 var styles$u = {
-  "table-loader-container": "_table-loader-container_1bay1_1",
+  "table-loader-container": "_table-loader-container_2dwtv_1",
   tableData,
   tableHeadCol: tableHeadCol$1,
+  resizer,
+  resizing,
   tableRow: tableRow$1,
   tableRowCol: tableRowCol$1,
   row,
@@ -85802,6 +85806,50 @@ const eosIconsLoading = (props) => /* @__PURE__ */ jsxs("svg", {
     })
   })]
 });
+const carbonChevronSort = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 32 32",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "m16 28l-7-7l1.41-1.41L16 25.17l5.59-5.58L23 21l-7 7zm0-24l7 7l-1.41 1.41L16 6.83l-5.59 5.58L9 11l7-7z"
+  })
+});
+const carbonChevronSortUp = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 32 32",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "m16 4l7 7l-1.4 1.4L16 6.8l-5.6 5.6L9 11z"
+  })
+});
+const carbonChevronSortDown = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 32 32",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "m16 28l-7-7l1.4-1.4l5.6 5.6l5.6-5.6L23 21z"
+  })
+});
+const rowSizeList = [{
+  label: "Show 25",
+  value: "25"
+}, {
+  label: "Show 50",
+  value: "50"
+}, {
+  label: "Show 75",
+  value: "75"
+}, {
+  label: "Show 100",
+  value: "100"
+}];
+const columnHelper = createColumnHelper();
 const Table = ({
   data,
   isLoading,
@@ -85810,66 +85858,37 @@ const Table = ({
   tableName,
   className = ""
 }) => {
-  var _a2, _b2, _c2, _d;
-  const columnHelper = createColumnHelper();
-  const columns = [];
-  const tableData2 = (data == null ? void 0 : data.length) ? data : [];
-  const divStyle = {
-    width: "100%",
-    height: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "1.5rem" : "2.5rem",
-    fontSize: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "0.7rem" : "1rem",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: (tableSettings == null ? void 0 : tableSettings.contentAlignment) ? `${tableSettings.contentAlignment}` : ""
-  };
-  const headerStyle = {
-    width: "100%",
-    color: "#182c60",
-    fontSize: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "0.7rem" : "1rem",
-    height: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "1.5rem" : "2.5rem",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontWeight: "500"
-  };
+  const {
+    divStyle,
+    headerStyle
+  } = useMemo(() => {
+    const div2 = {
+      width: "100%",
+      height: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "1.5rem" : "2.5rem",
+      fontSize: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "0.7rem" : "1rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: (tableSettings == null ? void 0 : tableSettings.contentAlignment) ? `${tableSettings.contentAlignment}` : ""
+    };
+    const header2 = {
+      width: "100%",
+      color: "#182c60",
+      fontSize: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "0.7rem" : "1rem",
+      height: (tableSettings == null ? void 0 : tableSettings.lineGap) === "small" ? "1.5rem" : "2.5rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: "500"
+    };
+    return {
+      divStyle: div2,
+      headerStyle: header2
+    };
+  }, [tableSettings == null ? void 0 : tableSettings.lineGap, tableSettings == null ? void 0 : tableSettings.contentAlignment]);
   const [sorting, setSorting] = useState([]);
   const [rowSelection, setRowSelection] = useState({});
-  const [rowSize, setRowSize] = useState({
-    value: "25",
-    label: "Show 25"
-  });
-  const rowSizeList = [{
-    label: "Show 25",
-    value: "25"
-  }, {
-    label: "Show 50",
-    value: "50"
-  }, {
-    label: "Show 75",
-    value: "75"
-  }, {
-    label: "Show 100",
-    value: "100"
-  }];
+  const [rowSize, setRowSize] = useState((tableSettings == null ? void 0 : tableSettings.defaultRowSize) && rowSizeList.find((row2) => row2.value === tableSettings.defaultRowSize) || rowSizeList[0]);
   const [globalFilter, setGlobalFilter] = useState("");
-  let fetchData;
-  if (data) {
-    for (const key in data[0]) {
-      const colName = key;
-      const col = columnHelper.accessor(colName, {
-        header: () => key,
-        cell: (info) => info.getValue()
-      });
-      columns.push(col);
-    }
-    fetchData = async (options2) => {
-      await new Promise((r2) => setTimeout(r2, 500));
-      return {
-        rows: data.slice(options2.pageIndex * options2.pageSize, (options2.pageIndex + 1) * options2.pageSize),
-        pageCount: Math.ceil(data.length / options2.pageSize)
-      };
-    };
-  }
   const fuzzyFilter = (row2, columnId, value, addMeta) => {
     const itemRank = rankItem(row2.getValue(columnId), value);
     addMeta({
@@ -85877,29 +85896,28 @@ const Table = ({
     });
     return itemRank.passed;
   };
-  const [isHovered, setHovered] = useState("");
-  const [{
-    pageIndex,
-    pageSize
-  }, setPagination] = React__default.useState({
+  const [pagination2, setPagination] = useState({
     pageIndex: 0,
     pageSize: 10
   });
-  const fetchDataOptions = {
-    pageIndex,
-    pageSize
-  };
-  const dataQuery = useQuery(["data", fetchDataOptions], () => fetchData(fetchDataOptions), {
-    keepPreviousData: true
-  });
-  const pagination2 = React__default.useMemo(() => ({
-    pageIndex,
-    pageSize
-  }), [pageIndex, pageSize]);
+  const tableData2 = useMemo(() => {
+    if (!data)
+      return [];
+    const {
+      pageIndex,
+      pageSize
+    } = pagination2;
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  }, [pagination2, data, globalFilter]);
+  const columns = useMemo(() => {
+    return Object.keys((data == null ? void 0 : data[0]) || {}).map((colName) => columnHelper.accessor(colName, {
+      header: () => colName,
+      cell: (info) => info.getValue()
+    }));
+  }, [data == null ? void 0 : data[0]]);
   const table2 = useReactTable({
-    data: (_b2 = (_a2 = dataQuery.data) == null ? void 0 : _a2.rows) != null ? _b2 : tableData2,
+    data: globalFilter ? data || [] : tableData2,
     columns,
-    pageCount: (_d = (_c2 = dataQuery.data) == null ? void 0 : _c2.pageCount) != null ? _d : -1,
     filterFns: {
       fuzzy: fuzzyFilter
     },
@@ -85918,28 +85936,44 @@ const Table = ({
     onGlobalFilterChange: setGlobalFilter,
     onPaginationChange: setPagination,
     manualPagination: true,
-    debugTable: true
+    debugTable: true,
+    enableColumnResizing: true,
+    columnResizeMode: "onChange"
   });
   useEffect(() => {
     table2.setPageSize(Number(rowSize.value));
   }, [rowSize, table2]);
+  const pageMetaData = useMemo(() => {
+    const {
+      pageIndex,
+      pageSize
+    } = table2.getState().pagination;
+    const from = pageSize * pageIndex + 1;
+    const total = globalFilter ? table2.getRowModel().rows.length : (data == null ? void 0 : data.length) || 0;
+    const to = total <= pageSize * (pageIndex + 1) ? total : pageSize * (pageIndex + 1);
+    return {
+      from,
+      to,
+      total
+    };
+  }, [globalFilter, data, table2.getState().pagination, table2.getRowModel().rows.length]);
   return /* @__PURE__ */ jsx("div", {
     className: `${styles$u.container} ${className}`,
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$u.previewTable,
-      children: [/* @__PURE__ */ jsxs("div", {
-        className: (tableSettings == null ? void 0 : tableSettings.showTableTitle) ? styles$u.preview : styles$u.searchButton,
-        children: [(tableSettings == null ? void 0 : tableSettings.showTableTitle) && /* @__PURE__ */ jsx(Text, {
+      children: [(tableSettings == null ? void 0 : tableSettings.enableTableSearch) || (tableSettings == null ? void 0 : tableSettings.showTableTitle) ? /* @__PURE__ */ jsxs("div", {
+        className: tableSettings.showTableTitle ? styles$u.preview : styles$u.searchButton,
+        children: [tableSettings.showTableTitle && /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14c",
           variant: "h1",
           className: styles$u.previewText,
           children: tableName
-        }), (tableSettings == null ? void 0 : tableSettings.enableTableSearch) && /* @__PURE__ */ jsx(DebouncedInput, {
+        }), tableSettings.enableTableSearch && /* @__PURE__ */ jsx(DebouncedInput, {
           value: globalFilter,
           onChange: (value) => setGlobalFilter(String(value)),
           placeholder: "Search"
         })]
-      }), /* @__PURE__ */ jsxs("div", {
+      }) : null, /* @__PURE__ */ jsxs("div", {
         className: styles$u.tableData,
         children: [isLoading && !(data == null ? void 0 : data.length) && /* @__PURE__ */ jsx("div", {
           className: styles$u["table-loader-container"],
@@ -85957,37 +85991,47 @@ const Table = ({
               children: table2.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
                 className: styles$u.row,
                 children: headerGroup.headers.map((header2) => {
-                  var _a3;
-                  return /* @__PURE__ */ jsx("th", {
+                  var _a2;
+                  return /* @__PURE__ */ jsxs("th", {
                     className: styles$u.tableHeadCol,
                     colSpan: header2.colSpan,
-                    children: (tableSettings == null ? void 0 : tableSettings.enableSorting) ? /* @__PURE__ */ jsx("div", {
-                      className: header2.column.getCanSort() ? styles$u.sortButton : "",
-                      onClick: header2.column.getToggleSortingHandler(),
-                      onMouseOver: () => setHovered(header2.id),
-                      onMouseOut: () => setHovered(""),
-                      children: header2.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
-                        style: headerStyle,
-                        children: [flexRender(header2.column.columnDef.header, header2.getContext()), /* @__PURE__ */ jsx("div", {
-                          className: isHovered === header2.id ? styles$u.showSort : styles$u.noSort,
-                          children: (_a3 = {
-                            asc: " \u{1F53C}",
-                            desc: " \u{1F53D}"
-                          }[header2.column.getIsSorted()]) != null ? _a3 : null
-                        })]
-                      })
-                    }) : /* @__PURE__ */ jsx(Fragment, {
+                    style: {
+                      width: header2.getSize()
+                    },
+                    children: [/* @__PURE__ */ jsx("button", {
+                      onMouseDown: header2.getResizeHandler(),
+                      onTouchStart: header2.getResizeHandler(),
+                      className: `${styles$u.resizer} ${header2.column.getIsResizing() ? styles$u.resizing : ""}`,
+                      type: "button",
+                      title: "Resize Column"
+                    }), !(tableSettings == null ? void 0 : tableSettings.enableSorting) ? /* @__PURE__ */ jsx(Fragment, {
                       children: header2.isPlaceholder ? null : /* @__PURE__ */ jsx("div", {
                         style: headerStyle,
                         children: flexRender(header2.column.columnDef.header, header2.getContext())
                       })
-                    })
+                    }) : /* @__PURE__ */ jsxs("div", {
+                      className: header2.column.getCanSort() ? styles$u.sortButton : "",
+                      onClick: header2.column.getToggleSortingHandler(),
+                      children: [header2.isPlaceholder ? null : /* @__PURE__ */ jsx("div", {
+                        style: headerStyle,
+                        children: flexRender(header2.column.columnDef.header, header2.getContext())
+                      }), (_a2 = {
+                        asc: /* @__PURE__ */ jsx(carbonChevronSortUp, {
+                          color: "#182c60"
+                        }),
+                        desc: /* @__PURE__ */ jsx(carbonChevronSortDown, {
+                          color: "#182c60"
+                        })
+                      }[header2.column.getIsSorted()]) != null ? _a2 : /* @__PURE__ */ jsx(carbonChevronSort, {
+                        color: "#182c60"
+                      })]
+                    })]
                   }, header2.id);
                 })
               }, headerGroup.id))
             }), /* @__PURE__ */ jsx("tbody", {
-              children: table2.getRowModel().rows.map((row2) => /* @__PURE__ */ jsx("tr", {
-                className: `${styles$u.tableRow} ${(tableSettings == null ? void 0 : tableSettings.showRowHover) ? styles$u.rowHover : ""} ${(tableSettings == null ? void 0 : tableSettings.enableStripedRows) && Number(row2.id) % 2 !== 0 ? styles$u.stripedRow : ""}`,
+              children: (globalFilter ? table2.getRowModel().rows.slice(pagination2.pageSize * pagination2.pageIndex, pagination2.pageSize * (1 + pagination2.pageIndex)) : table2.getRowModel().rows).map((row2, index2) => /* @__PURE__ */ jsx("tr", {
+                className: `${styles$u.tableRow} ${(tableSettings == null ? void 0 : tableSettings.showRowHover) ? styles$u.rowHover : ""} ${(tableSettings == null ? void 0 : tableSettings.enableStripedRows) && Number(index2) % 2 !== 0 ? styles$u.stripedRow : ""}`,
                 children: row2.getVisibleCells().map((cell) => /* @__PURE__ */ jsxs("td", {
                   className: `${styles$u.tableRowCol} ${!(tableSettings == null ? void 0 : tableSettings.hideVerticalDivider) ? styles$u.rightBorder : ""}`,
                   children: [!!tableSettings && /* @__PURE__ */ jsx("div", {
@@ -86031,7 +86075,7 @@ const Table = ({
             children: error2
           })
         })]
-      }), data && /* @__PURE__ */ jsxs("div", {
+      }), data && !(tableSettings == null ? void 0 : tableSettings.disablePagination) && /* @__PURE__ */ jsxs("div", {
         className: styles$u.pagination,
         children: [/* @__PURE__ */ jsx("div", {
           className: styles$u.rowStyle,
@@ -86045,20 +86089,22 @@ const Table = ({
           })
         }), /* @__PURE__ */ jsxs("span", {
           className: styles$u.pageStyle,
-          children: [table2.getState().pagination.pageSize * table2.getState().pagination.pageIndex + 1, "-", data.length <= table2.getState().pagination.pageSize * (table2.getState().pagination.pageIndex + 1) ? data.length : table2.getState().pagination.pageSize * (table2.getState().pagination.pageIndex + 1), " ", "of ", data.length]
+          children: [pageMetaData.from, "-", pageMetaData.to, " of ", pageMetaData.total]
         }), /* @__PURE__ */ jsxs("div", {
           className: styles$u.buttonContainer,
           children: [/* @__PURE__ */ jsx(Button, {
             variant: "custom",
+            type: "button",
             className: styles$u.button,
             onClick: () => table2.previousPage(),
-            disabled: !table2.getCanPreviousPage(),
+            isDisabled: !table2.getCanPreviousPage(),
             children: "Prev"
           }), /* @__PURE__ */ jsx(Button, {
             variant: "custom",
+            type: "button",
             className: styles$u.button,
             onClick: () => table2.nextPage(),
-            disabled: !table2.getCanNextPage(),
+            isDisabled: !table2.getCanNextPage(),
             children: "Next"
           })]
         })]
@@ -86946,12 +86992,12 @@ const InfoTooltip = ({
   });
 };
 var styles$p = {
-  "header-container": "_header-container_1pbz4_1",
-  "btn-container": "_btn-container_1pbz4_9",
-  "back-btn": "_back-btn_1pbz4_17",
-  "sql-btn": "_sql-btn_1pbz4_25",
-  "save-btn": "_save-btn_1pbz4_33",
-  "save-btn-icon": "_save-btn-icon_1pbz4_41"
+  "header-container": "_header-container_t2r6v_1",
+  "btn-container": "_btn-container_t2r6v_5",
+  "back-btn": "_back-btn_t2r6v_9",
+  "sql-btn": "_sql-btn_t2r6v_13",
+  "save-btn": "_save-btn_t2r6v_17",
+  "save-btn-icon": "_save-btn-icon_t2r6v_21"
 };
 const Header = ({
   setShowMetricCreateModal,
@@ -87004,20 +87050,20 @@ const Header = ({
   });
 };
 var styles$o = {
-  "create-btn": "_create-btn_zxqu9_1",
-  "modal-container": "_modal-container_zxqu9_9",
-  "query-modal": "_query-modal_zxqu9_17"
+  "create-btn": "_create-btn_ihjk8_1",
+  "modal-container": "_modal-container_ihjk8_5",
+  "query-modal": "_query-modal_ihjk8_9"
 };
-const container$7 = "_container_u2z1d_1";
-const header$3 = "_header_u2z1d_9";
-const wrapper$1 = "_wrapper_u2z1d_17";
-const column = "_column_u2z1d_33";
-const columnText$1 = "_columnText_u2z1d_41";
+const container$7 = "_container_1q2ss_1";
+const header$3 = "_header_1q2ss_5";
+const wrapper$1 = "_wrapper_1q2ss_9";
+const column = "_column_1q2ss_17";
+const columnText$1 = "_columnText_1q2ss_21";
 var styles$n = {
   container: container$7,
   header: header$3,
   wrapper: wrapper$1,
-  "col-container": "_col-container_u2z1d_25",
+  "col-container": "_col-container_1q2ss_13",
   column,
   columnText: columnText$1
 };
@@ -87228,6 +87274,36 @@ const ChartConfigure = ({
                 }))
               })
             })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$m.seriesWrapper,
+            children: [/* @__PURE__ */ jsx(Text, {
+              variant: "h1",
+              styleClass: "font-14",
+              className: "font-medium",
+              children: "Default Row Size"
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$m.select,
+              children: /* @__PURE__ */ jsx(Select, {
+                value: tableSettings.defaultRowSize || "25",
+                options: [{
+                  label: "25",
+                  value: "25"
+                }, {
+                  label: "50",
+                  value: "50"
+                }, {
+                  label: "75",
+                  value: "75"
+                }, {
+                  label: "100",
+                  value: "100"
+                }],
+                onChange: (value) => setTableSettings((s2) => ({
+                  ...s2,
+                  defaultRowSize: value
+                }))
+              })
+            })]
           }), /* @__PURE__ */ jsxs("div", {
             className: styles$m.seriesCheckContainer,
             children: [/* @__PURE__ */ jsxs("div", {
@@ -87322,6 +87398,7 @@ const ChartConfigure = ({
             children: [/* @__PURE__ */ jsx(InputField, {
               type: "checkbox",
               label: "Enable Table sorting",
+              defaultChecked: true,
               checked: tableSettings.enableSorting,
               onChange: (e2) => setTableSettings((settings2) => ({
                 ...settings2,
@@ -87330,6 +87407,19 @@ const ChartConfigure = ({
             }), /* @__PURE__ */ jsx(InfoTooltip, {
               children: "Enable Table Sorting"
             })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$m.seriesCheck,
+            children: [/* @__PURE__ */ jsx(InputField, {
+              type: "checkbox",
+              label: "Disable Pagination",
+              checked: tableSettings.disablePagination,
+              onChange: (e2) => setTableSettings((settings2) => ({
+                ...settings2,
+                disablePagination: e2.target.checked
+              }))
+            }), /* @__PURE__ */ jsx(InfoTooltip, {
+              children: "Disable Pagination"
+            })]
           })]
         })]
       })]
@@ -88394,45 +88484,16 @@ const ChartTab = ({
     })]
   });
 };
-const container$5 = "_container_1r4rr_1";
+const container$5 = "_container_38zl3_1";
+const header$1 = "_header_38zl3_5";
+const tabButton$1 = "_tabButton_38zl3_16";
+const selectedTab = "_selectedTab_38zl3_19";
+const table$1 = "_table_38zl3_22";
 var styles$i = {
-  container: container$5
-};
-const InputTables = ({
-  previewTableDataList
-}) => {
-  return /* @__PURE__ */ jsx("div", {
-    className: styles$i.container,
-    children: previewTableDataList == null ? void 0 : previewTableDataList.map((table2) => /* @__PURE__ */ jsx(Table, {
-      data: table2.data,
-      error: table2.isError,
-      isLoading: false,
-      tableName: table2.name,
-      tableSettings: {
-        showTableTitle: true,
-        hideVerticalDivider: false,
-        showRowHover: false,
-        enableStripedRows: false,
-        enableTableSearch: false,
-        contentAlignment: "center",
-        enableFilter: false,
-        enableSorting: false,
-        lineGap: "",
-        showTableDesc: false
-      }
-    }, table2.name))
-  });
-};
-const container$4 = "_container_127xg_1";
-const header$1 = "_header_127xg_9";
-const tabButton$1 = "_tabButton_127xg_31";
-const selectedTab = "_selectedTab_127xg_37";
-const table$1 = "_table_127xg_43";
-var styles$h = {
-  container: container$4,
+  container: container$5,
   header: header$1,
-  "text-container": "_text-container_127xg_17",
-  "btn-container": "_btn-container_127xg_25",
+  "text-container": "_text-container_38zl3_9",
+  "btn-container": "_btn-container_38zl3_13",
   tabButton: tabButton$1,
   selectedTab,
   table: table$1
@@ -88465,11 +88526,11 @@ const TableTab = ({
     setSelectedTab(OUTPUT_TABLE);
   }, [isUpdateMetric]);
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$h.container,
+    className: styles$i.container,
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$h.header,
+      className: styles$i.header,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: styles$h["text-container"],
+        className: styles$i["text-container"],
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14c",
           variant: "h1",
@@ -88480,11 +88541,11 @@ const TableTab = ({
           children: "Preview your selected table & output table values"
         })]
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$h["btn-container"],
+        className: styles$i["btn-container"],
         children: [/* @__PURE__ */ jsxs(Button, {
           type: "button",
           variant: "custom",
-          className: styles$h.tabButton,
+          className: styles$i.tabButton,
           onClick: () => setSelectedTab(INPUT_TABLE),
           children: [selectedTab2 === INPUT_TABLE && /* @__PURE__ */ jsx("div", {
             style: buttonColor,
@@ -88493,7 +88554,7 @@ const TableTab = ({
         }), /* @__PURE__ */ jsxs(Button, {
           type: "button",
           variant: "custom",
-          className: styles$h.tabButton,
+          className: styles$i.tabButton,
           onClick: () => setSelectedTab(OUTPUT_TABLE),
           children: [selectedTab2 === OUTPUT_TABLE && /* @__PURE__ */ jsx("div", {
             style: buttonColor,
@@ -88501,30 +88562,60 @@ const TableTab = ({
           }), selectedTab2 !== OUTPUT_TABLE && "Output Table"]
         })]
       })]
-    }), selectedTab2 === INPUT_TABLE && /* @__PURE__ */ jsx(InputTables, {
-      previewTableDataList
+    }), selectedTab2 === INPUT_TABLE && /* @__PURE__ */ jsx("div", {
+      className: styles$i.table,
+      children: previewTableDataList == null ? void 0 : previewTableDataList.map((table2) => /* @__PURE__ */ jsx(Table, {
+        data: table2.data,
+        isLoading: false,
+        error: table2.isError,
+        tableName: table2.name,
+        tableSettings: {
+          showTableTitle: true,
+          hideVerticalDivider: false,
+          showRowHover: false,
+          enableStripedRows: false,
+          enableTableSearch: false,
+          contentAlignment: "center",
+          enableFilter: false,
+          enableSorting: true,
+          lineGap: "",
+          showTableDesc: false
+        }
+      }, table2.name))
     }), selectedTab2 === OUTPUT_TABLE && /* @__PURE__ */ jsx("div", {
-      className: styles$h.table,
+      className: styles$i.table,
       children: /* @__PURE__ */ jsx(Table, {
         data: outpuTableData,
         isLoading: isOutputLoading,
-        error: outputError
+        error: outputError,
+        tableSettings: {
+          showTableTitle: false,
+          hideVerticalDivider: false,
+          showRowHover: false,
+          enableStripedRows: false,
+          enableTableSearch: false,
+          contentAlignment: "center",
+          enableFilter: false,
+          enableSorting: true,
+          lineGap: "",
+          showTableDesc: false
+        }
       })
     })]
   });
 };
-const mainContainerUpdate = "_mainContainerUpdate_z1gwh_7";
-const wrapper = "_wrapper_z1gwh_23";
-const updateWrapper = "_updateWrapper_z1gwh_29";
-const updateWrapperContent = "_updateWrapperContent_z1gwh_35";
-const createWrapperContent = "_createWrapperContent_z1gwh_41";
-const searchCommand = "_searchCommand_z1gwh_47";
-const tabButton = "_tabButton_z1gwh_53";
-const tabActive = "_tabActive_z1gwh_59";
-var styles$g = {
-  "main-container": "_main-container_z1gwh_1",
+const mainContainerUpdate = "_mainContainerUpdate_70jy1_4";
+const wrapper = "_wrapper_70jy1_12";
+const updateWrapper = "_updateWrapper_70jy1_15";
+const updateWrapperContent = "_updateWrapperContent_70jy1_18";
+const createWrapperContent = "_createWrapperContent_70jy1_21";
+const searchCommand = "_searchCommand_70jy1_24";
+const tabButton = "_tabButton_70jy1_27";
+const tabActive = "_tabActive_70jy1_30";
+var styles$h = {
+  "main-container": "_main-container_70jy1_1",
   mainContainerUpdate,
-  "outputTab-header": "_outputTab-header_z1gwh_15",
+  "outputTab-header": "_outputTab-header_70jy1_8",
   wrapper,
   updateWrapper,
   updateWrapperContent,
@@ -88581,13 +88672,13 @@ const MetricOutput = ({
     tableName = item.name;
   });
   return /* @__PURE__ */ jsxs("div", {
-    className: `${styles$g["main-container"]} ${isUpdateMetric ? styles$g.mainContainerUpdate : ""}`,
+    className: `${styles$h["main-container"]} ${isUpdateMetric ? styles$h.mainContainerUpdate : ""}`,
     children: [!isUpdateMetric && /* @__PURE__ */ jsxs("div", {
-      className: styles$g["outputTab-header"],
+      className: styles$h["outputTab-header"],
       children: [/* @__PURE__ */ jsxs(Button, {
         type: "button",
         variant: "custom",
-        className: `${styles$g.tabButton} ${selectedTab2 === TABLE_TAB && styles$g.tabActive}`,
+        className: `${styles$h.tabButton} ${selectedTab2 === TABLE_TAB && styles$h.tabActive}`,
         onClick: () => setSelectedTab(TABLE_TAB),
         children: [/* @__PURE__ */ jsx(Icons, {
           name: "table-tab-icon"
@@ -88595,7 +88686,7 @@ const MetricOutput = ({
       }), /* @__PURE__ */ jsxs(Button, {
         type: "button",
         variant: "custom",
-        className: `${styles$g.tabButton} ${selectedTab2 === CHART_TAB && styles$g.tabActive}`,
+        className: `${styles$h.tabButton} ${selectedTab2 === CHART_TAB && styles$h.tabActive}`,
         onClick: () => setSelectedTab(CHART_TAB),
         children: [/* @__PURE__ */ jsx(Icons, {
           name: "visualization-icon"
@@ -88603,14 +88694,14 @@ const MetricOutput = ({
       }), moreTabs == null ? void 0 : moreTabs.map((tabObj) => /* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "custom",
-        className: `${styles$g.tabButton} ${selectedTab2 === tabObj.name && styles$g.tabActive}`,
+        className: `${styles$h.tabButton} ${selectedTab2 === tabObj.name && styles$h.tabActive}`,
         onClick: () => setSelectedTab(tabObj.name),
         children: tabObj.tab
       }, tabObj.name))]
     }), /* @__PURE__ */ jsxs("div", {
-      className: `${styles$g.wrapper} ${isUpdateMetric ? styles$g.updateWrapper : ""}`,
+      className: `${styles$h.wrapper} ${isUpdateMetric ? styles$h.updateWrapper : ""}`,
       children: [(selectedTab2 === TABLE_TAB || isUpdateMetric) && /* @__PURE__ */ jsx("div", {
-        className: isUpdateMetric ? styles$g.updateWrapperContent : styles$g.createWrapperContent,
+        className: isUpdateMetric ? styles$h.updateWrapperContent : styles$h.createWrapperContent,
         children: /* @__PURE__ */ jsx(TableTab, {
           outpuTableData: data,
           isOutputLoading: isLoading,
@@ -88619,7 +88710,7 @@ const MetricOutput = ({
           isUpdateMetric
         })
       }), (selectedTab2 === CHART_TAB || isUpdateMetric) && /* @__PURE__ */ jsx("div", {
-        className: isUpdateMetric ? styles$g.updateWrapperContent : styles$g.createWrapperContent,
+        className: isUpdateMetric ? styles$h.updateWrapperContent : styles$h.createWrapperContent,
         children: /* @__PURE__ */ jsx(ChartTab, {
           labels: labels2,
           funnelData,
@@ -88662,30 +88753,30 @@ const MetricOutput = ({
     })]
   });
 };
-const fieldValueIcon = "_fieldValueIcon_107sf_49";
-const fieldAddBtnIcon = "_fieldAddBtnIcon_107sf_65";
-const group = "_group_107sf_1";
-const tooltipWrapper = "_tooltipWrapper_107sf_89";
-const tooltip = "_tooltip_107sf_89";
-const dropdown = "_dropdown_107sf_113";
-const filterDropdown = "_filterDropdown_107sf_121";
-const filterValues = "_filterValues_107sf_129";
-const columnText = "_columnText_107sf_137";
-const disabled = "_disabled_107sf_145";
-const checkIcon = "_checkIcon_107sf_153";
-const generateButton = "_generateButton_107sf_161";
-var styles$f = {
-  "form-container": "_form-container_107sf_1",
-  "field-container": "_field-container_107sf_9",
-  "field-label": "_field-label_107sf_17",
-  "field-wrapper": "_field-wrapper_107sf_25",
-  "field-inner-container": "_field-inner-container_107sf_33",
-  "field-value": "_field-value_107sf_41",
+const fieldValueIcon = "_fieldValueIcon_14dsc_25";
+const fieldAddBtnIcon = "_fieldAddBtnIcon_14dsc_33";
+const group = "_group_14dsc_1";
+const tooltipWrapper = "_tooltipWrapper_14dsc_45";
+const tooltip = "_tooltip_14dsc_45";
+const dropdown = "_dropdown_14dsc_57";
+const filterDropdown = "_filterDropdown_14dsc_61";
+const filterValues = "_filterValues_14dsc_65";
+const columnText = "_columnText_14dsc_69";
+const disabled = "_disabled_14dsc_73";
+const checkIcon = "_checkIcon_14dsc_77";
+const generateButton = "_generateButton_14dsc_81";
+var styles$g = {
+  "form-container": "_form-container_14dsc_1",
+  "field-container": "_field-container_14dsc_5",
+  "field-label": "_field-label_14dsc_9",
+  "field-wrapper": "_field-wrapper_14dsc_13",
+  "field-inner-container": "_field-inner-container_14dsc_17",
+  "field-value": "_field-value_14dsc_21",
   fieldValueIcon,
-  "field-add-btn": "_field-add-btn_107sf_57",
+  "field-add-btn": "_field-add-btn_14dsc_29",
   fieldAddBtnIcon,
-  "field-value-container": "_field-value-container_107sf_73",
-  "field-prompt": "_field-prompt_107sf_81",
+  "field-value-container": "_field-value-container_14dsc_37",
+  "field-prompt": "_field-prompt_14dsc_41",
   group,
   tooltipWrapper,
   tooltip,
@@ -88696,12 +88787,12 @@ var styles$f = {
   disabled,
   checkIcon,
   generateButton,
-  "saved-container": "_saved-container_107sf_169",
-  "custom-container": "_custom-container_107sf_177",
-  "simple-container": "_simple-container_107sf_185",
-  "filter-dropdown": "_filter-dropdown_107sf_193",
-  "editor-field": "_editor-field_107sf_201",
-  "tab-border": "_tab-border_107sf_209"
+  "saved-container": "_saved-container_14dsc_85",
+  "custom-container": "_custom-container_14dsc_89",
+  "simple-container": "_simple-container_14dsc_93",
+  "filter-dropdown": "_filter-dropdown_14dsc_97",
+  "editor-field": "_editor-field_14dsc_101",
+  "tab-border": "_tab-border_14dsc_105"
 };
 const button$1 = "_button_18a2n_1";
 const menu$1 = "_menu_18a2n_7";
@@ -88710,8 +88801,8 @@ const input = "_input_18a2n_13";
 const label = "_label_18a2n_25";
 const menuContainer = "_menuContainer_18a2n_31";
 const icon = "_icon_18a2n_37";
-const container$3 = "_container_18a2n_43";
-var styles$e = {
+const container$4 = "_container_18a2n_43";
+var styles$f = {
   button: button$1,
   menu: menu$1,
   inputLabel,
@@ -88719,7 +88810,7 @@ var styles$e = {
   label,
   menuContainer,
   icon,
-  container: container$3
+  container: container$4
 };
 const timeGrainOptions = [{
   label: "Last Week",
@@ -88803,16 +88894,16 @@ const TimeGrainField = ({
       children: [isShowlabel ? /* @__PURE__ */ jsx(Text, {
         styleClass: "font-14c",
         variant: "p",
-        className: styles$e.label,
+        className: styles$f.label,
         children: "Time Grain"
       }) : null, /* @__PURE__ */ jsx(PopoverMenu, {
         className,
-        buttonClass: styles$e.button,
+        buttonClass: styles$f.button,
         isDisabled,
-        menuClass: styles$e.menu,
-        menuContainerClass: styles$e.menuContainer,
+        menuClass: styles$f.menu,
+        menuContainerClass: styles$f.menuContainer,
         button: /* @__PURE__ */ jsx(InputField, {
-          inputClass: styles$e.input,
+          inputClass: styles$f.input,
           type: "text",
           placeholder: "time range",
           register: register2 == null ? void 0 : register2("timeGrain"),
@@ -88827,12 +88918,12 @@ const TimeGrainField = ({
           })),
           isDisabled: true,
           icon: /* @__PURE__ */ jsx("span", {
-            className: styles$e.icon,
+            className: styles$f.icon,
             children: /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})
           })
         }),
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$e.container,
+          className: styles$f.container,
           children: [/* @__PURE__ */ jsx(Select, {
             options: timeGrainOptions,
             label: "Select Time Range",
@@ -116352,18 +116443,18 @@ const MetricForm = ({
     return false;
   };
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$f["form-container"],
+    className: styles$g["form-container"],
     children: [!isDisableTimeColumn && /* @__PURE__ */ jsxs("div", {
-      className: styles$f["field-container"],
+      className: styles$g["field-container"],
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$f["field-label"],
+        className: styles$g["field-label"],
         children: "Time Filter"
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$f["field-wrapper"],
+        className: styles$g["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$f["field-inner-container"],
+          className: styles$g["field-inner-container"],
           children: [/* @__PURE__ */ jsx(FloatingDropDown, {
             onChange: setTimeColumn,
             selectedOption: timeColumn,
@@ -116385,28 +116476,28 @@ const MetricForm = ({
           }), timeGrainValue && /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "custom",
-            className: styles$f["field-value"],
+            className: styles$g["field-value"],
             onClick: () => setTimeGrainValue(""),
             children: [timeGrainValue, " ", /* @__PURE__ */ jsx(Icons, {
               name: "close-icon",
-              className: styles$f.fieldValueIcon
+              className: styles$g.fieldValueIcon
             })]
           })]
         })
       })]
     }), !isDisableAddMetric && /* @__PURE__ */ jsxs("div", {
-      className: styles$f["field-container"],
+      className: styles$g["field-container"],
       children: [/* @__PURE__ */ jsxs(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$f["field-label"],
+        className: styles$g["field-label"],
         children: ["Metric Creation", /* @__PURE__ */ jsx(InfoTooltip, {
           children: "configure metric columns"
         })]
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$f["field-wrapper"],
+        className: styles$g["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$f["field-inner-container"],
+          className: styles$g["field-inner-container"],
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
@@ -116414,7 +116505,7 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$f["field-add-btn"],
+            className: styles$g["field-add-btn"],
             onClick: () => {
               setFieldConfigModal({
                 isShow: true,
@@ -116425,18 +116516,18 @@ const MetricForm = ({
             isDisabled: isDisableAddMetric,
             children: [/* @__PURE__ */ jsx(Icons, {
               name: "plus-icon",
-              className: styles$f.fieldAddBtnIcon
+              className: styles$g.fieldAddBtnIcon
             }), "Add Aggregate Column"]
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$f["field-value-container"],
+            className: styles$g["field-value-container"],
             children: metrics.map((metric) => /* @__PURE__ */ jsxs(Button, {
               type: "button",
               variant: "custom",
-              className: styles$f["field-value"],
+              className: styles$g["field-value"],
               onClick: () => setMetrics((prev) => prev.filter((m2) => m2.as !== metric.as)),
               children: [metric.as, " ", /* @__PURE__ */ jsx(Icons, {
                 name: "close-icon",
-                className: styles$f.fieldValueIcon
+                className: styles$g.fieldValueIcon
               })]
             }, metric.as))
           }), /* @__PURE__ */ jsx(Text, {
@@ -116454,13 +116545,13 @@ const MetricForm = ({
               setAliasValue("");
             },
             isDisabled: !!columns.length,
-            className: styles$f["field-add-btn"],
+            className: styles$g["field-add-btn"],
             children: [/* @__PURE__ */ jsx(Icons, {
               name: "plus-icon",
-              className: styles$f.fieldAddBtnIcon
+              className: styles$g.fieldAddBtnIcon
             }), " ", "Add New"]
           }), selectedDimensions.map((c2) => /* @__PURE__ */ jsxs("div", {
-            className: styles$f["field-value-container"],
+            className: styles$g["field-value-container"],
             children: [/* @__PURE__ */ jsx(Text, {
               variant: "p",
               styleClass: "font-14",
@@ -116470,7 +116561,7 @@ const MetricForm = ({
               type: "button",
               variant: "secondary",
               onClick: () => setSelectedDimensions((prev) => prev.filter((m2) => m2 !== c2)),
-              className: styles$f["field-value"],
+              className: styles$g["field-value"],
               children: /* @__PURE__ */ jsx(Icons, {
                 name: "close-icon"
               })
@@ -116479,18 +116570,18 @@ const MetricForm = ({
         })
       })]
     }), !isDisableAddColumn && /* @__PURE__ */ jsxs("div", {
-      className: styles$f["field-container"],
+      className: styles$g["field-container"],
       children: [/* @__PURE__ */ jsxs(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$f["field-label"],
+        className: styles$g["field-label"],
         children: ["Columns", /* @__PURE__ */ jsx(InfoTooltip, {
           children: "select columns for raw records query"
         })]
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$f["field-wrapper"],
+        className: styles$g["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$f["field-inner-container"],
+          className: styles$g["field-inner-container"],
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
@@ -116498,7 +116589,7 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$f["field-add-btn"],
+            className: styles$g["field-add-btn"],
             onClick: () => {
               setFieldConfigModal({
                 isShow: true,
@@ -116509,34 +116600,34 @@ const MetricForm = ({
             isDisabled: isDisableAddColumn,
             children: [/* @__PURE__ */ jsx(Icons, {
               name: "plus-icon",
-              className: styles$f.fieldAddBtnIcon
+              className: styles$g.fieldAddBtnIcon
             }), " ", "Add Column"]
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$f["field-value-container"],
+            className: styles$g["field-value-container"],
             children: columns.map((c2) => /* @__PURE__ */ jsxs(Button, {
               type: "button",
               variant: "custom",
-              className: styles$f["field-value"],
+              className: styles$g["field-value"],
               onClick: () => setColumns((prev) => prev.filter((m2) => m2.as !== c2.as)),
               children: [c2.as, " ", /* @__PURE__ */ jsx(Icons, {
                 name: "close-icon",
-                className: styles$f.fieldValueIcon
+                className: styles$g.fieldValueIcon
               })]
             }, c2.as))
           })]
         })
       })]
     }), /* @__PURE__ */ jsxs("div", {
-      className: styles$f["field-container"],
+      className: styles$g["field-container"],
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$f["field-label"],
+        className: styles$g["field-label"],
         children: "category filters"
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$f["field-wrapper"],
+        className: styles$g["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$f["field-inner-container"],
+          className: styles$g["field-inner-container"],
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
@@ -116544,7 +116635,7 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$f["field-add-btn"],
+            className: styles$g["field-add-btn"],
             onClick: () => {
               setFieldConfigModal({
                 isShow: true,
@@ -116554,18 +116645,18 @@ const MetricForm = ({
             },
             children: [/* @__PURE__ */ jsx(Icons, {
               name: "plus-icon",
-              className: styles$f.fieldAddBtnIcon
+              className: styles$g.fieldAddBtnIcon
             }), " Add Filter Category"]
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$f["field-value-container"],
+            className: styles$g["field-value-container"],
             children: filters2.map((filter2) => /* @__PURE__ */ jsxs(Button, {
               type: "button",
               variant: "custom",
-              className: styles$f["field-value"],
+              className: styles$g["field-value"],
               onClick: () => setFilters((prev) => prev.filter((m2) => m2 !== filter2)),
               children: [filter2, " ", /* @__PURE__ */ jsx(Icons, {
                 name: "close-icon",
-                className: styles$f.fieldValueIcon
+                className: styles$g.fieldValueIcon
               })]
             }, filter2))
           }), /* @__PURE__ */ jsx(Text, {
@@ -116575,7 +116666,7 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$f["field-add-btn"],
+            className: styles$g["field-add-btn"],
             onClick: () => {
               setFieldConfigModal({
                 isShow: true,
@@ -116585,16 +116676,16 @@ const MetricForm = ({
             },
             children: [sort2 ? /* @__PURE__ */ jsx(mdiCircleEditOutline, {}) : /* @__PURE__ */ jsx(Icons, {
               name: "plus-icon",
-              className: styles$f.fieldAddBtnIcon
+              className: styles$g.fieldAddBtnIcon
             }), " ", sort2 ? "Edit" : "Add", " Sort Category"]
           }), sort2 && /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "custom",
-            className: styles$f["field-value"],
+            className: styles$g["field-value"],
             onClick: () => setSort(""),
             children: [sort2, " ", /* @__PURE__ */ jsx(Icons, {
               name: "close-icon",
-              className: styles$f.fieldValueIcon
+              className: styles$g.fieldValueIcon
             })]
           })]
         })
@@ -116608,32 +116699,32 @@ const MetricForm = ({
     }), !columns.length && !!dateTimeColumnList.length && /* @__PURE__ */ jsxs(Text, {
       styleClass: "font-14",
       variant: "p",
-      className: styles$f.columnText,
+      className: styles$g.columnText,
       children: [/* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "custom",
         onClick: () => setIncludeTime((s2) => !s2),
         isDisabled: !timeColumn.value || !!columns.length,
         children: isIncludeTime ? /* @__PURE__ */ jsx(materialSymbolsCheckBoxRounded, {
-          className: styles$f.checkIcon
+          className: styles$g.checkIcon
         }) : /* @__PURE__ */ jsx(materialSymbolsCheckBoxOutlineBlank, {})
       }), "Include Time"]
     }), /* @__PURE__ */ jsxs(Text, {
       styleClass: "font-14",
       variant: "p",
-      className: styles$f.columnText,
+      className: styles$g.columnText,
       children: [/* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "custom",
         onClick: () => setSortDescending((s2) => !s2),
         children: isSortDescending ? /* @__PURE__ */ jsx(materialSymbolsCheckBoxRounded, {
-          className: styles$f.checkIcon
+          className: styles$g.checkIcon
         }) : /* @__PURE__ */ jsx(materialSymbolsCheckBoxOutlineBlank, {})
       }), "Sort Descending"]
     }), /* @__PURE__ */ jsx(Button, {
       type: "button",
       variant: "primary",
-      className: styles$f.generateButton,
+      className: styles$g.generateButton,
       isDisabled: isGeneratingDataset || isDisableGenerate,
       onClick: () => onGenerateMetric(),
       children: "Generate"
@@ -116649,10 +116740,10 @@ const MetricForm = ({
           activeTab: selectedTab2,
           options: configTabs,
           setActiveTab: setSeletedTab,
-          className: styles$f["tab-border"]
+          className: styles$g["tab-border"]
         })
       }), selectedTab2 === "simple" && /* @__PURE__ */ jsxs("div", {
-        className: styles$f["simple-container"],
+        className: styles$g["simple-container"],
         children: [fieldConfigModal.type === "filter" && /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsx(FloatingDropDown, {
             onChange: setFilterColumn,
@@ -116667,7 +116758,7 @@ const MetricForm = ({
             label: "Operator",
             labelVariant: "static"
           }), isInFilter ? /* @__PURE__ */ jsxs("div", {
-            className: styles$f["filter-dropdown"],
+            className: styles$g["filter-dropdown"],
             children: [/* @__PURE__ */ jsx(Text, {
               variant: "p",
               styleClass: "font-14",
@@ -116739,7 +116830,7 @@ const MetricForm = ({
           })
         })]
       }), selectedTab2 === "custom" && /* @__PURE__ */ jsxs("div", {
-        className: styles$f["custom-container"],
+        className: styles$g["custom-container"],
         children: [/* @__PURE__ */ jsx(InputField, {
           label: "name",
           labelClass: "mb-2",
@@ -116750,7 +116841,7 @@ const MetricForm = ({
             name: getColumnString(e2.target.value)
           })
         }), /* @__PURE__ */ jsxs("div", {
-          className: styles$f["editor-field"],
+          className: styles$g["editor-field"],
           children: [/* @__PURE__ */ jsx(Text, {
             styleClass: "font-14b",
             variant: "p",
@@ -116766,7 +116857,7 @@ const MetricForm = ({
           })]
         })]
       }), selectedTab2 === "saved" && /* @__PURE__ */ jsxs("div", {
-        className: styles$f["saved-container"],
+        className: styles$g["saved-container"],
         children: [/* @__PURE__ */ jsx(MultiFloatingDropDown, {
           onChange: (options2) => setSelectedCustomColumnList(options2),
           selectedOptions: selectedCustomColumnList,
@@ -116778,7 +116869,7 @@ const MetricForm = ({
           label: "custom",
           labelVariant: "floating"
         }), selectedCustomColumnList.map((c2) => /* @__PURE__ */ jsx("div", {
-          className: styles$f["field-value-container"],
+          className: styles$g["field-value-container"],
           children: /* @__PURE__ */ jsxs(Text, {
             variant: "p",
             styleClass: "font-14",
@@ -116806,12 +116897,12 @@ const MetricForm = ({
     })]
   });
 };
-const container$2 = "_container_1v000_1";
-const header = "_header_1v000_9";
-const enableGroupBy = "_enableGroupBy_1v000_15";
-const enableGroupButton = "_enableGroupButton_1v000_21";
-var styles$d = {
-  container: container$2,
+const container$3 = "_container_rofqe_1";
+const header = "_header_rofqe_5";
+const enableGroupBy = "_enableGroupBy_rofqe_8";
+const enableGroupButton = "_enableGroupButton_rofqe_11";
+var styles$e = {
+  container: container$3,
   header,
   enableGroupBy,
   enableGroupButton
@@ -116831,9 +116922,9 @@ const ConstructMetric = ({
   databaseId
 }) => {
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$d.container,
+    className: styles$e.container,
     children: [/* @__PURE__ */ jsx("div", {
-      className: styles$d.header,
+      className: styles$e.header,
       children: "Data"
     }), /* @__PURE__ */ jsx(MetricForm, {
       dateTimeColumnList,
@@ -117228,6 +117319,35 @@ const EmbeddedMetricCreation = ({
     })]
   });
 };
+const container$2 = "_container_epyr2_1";
+var styles$d = {
+  container: container$2
+};
+const InputTables = ({
+  previewTableDataList
+}) => {
+  return /* @__PURE__ */ jsx("div", {
+    className: styles$d.container,
+    children: previewTableDataList == null ? void 0 : previewTableDataList.map((table2) => /* @__PURE__ */ jsx(Table, {
+      data: table2.data,
+      error: table2.isError,
+      isLoading: false,
+      tableName: table2.name,
+      tableSettings: {
+        showTableTitle: true,
+        hideVerticalDivider: false,
+        showRowHover: false,
+        enableStripedRows: false,
+        enableTableSearch: false,
+        contentAlignment: "center",
+        enableFilter: false,
+        enableSorting: true,
+        lineGap: "",
+        showTableDesc: false
+      }
+    }, table2.name))
+  });
+};
 var reactGridLayout = { exports: {} };
 var ReactGridLayout$1 = {};
 function r(e2) {
@@ -121961,8 +122081,8 @@ const ChartImageDownloadButton = ({
     }), text2]
   });
 };
-const metricFilter = "_metricFilter_1xge8_1";
-const customContainer = "_customContainer_1xge8_7";
+const metricFilter = "_metricFilter_k2gef_1";
+const customContainer = "_customContainer_k2gef_4";
 var styles$9 = {
   metricFilter,
   customContainer
@@ -122065,24 +122185,24 @@ const MetricFilterDropDown = ({
     }) : void 0
   });
 };
-const container$1 = "_container_a6fvx_1";
-const popover = "_popover_a6fvx_9";
-const button = "_button_a6fvx_17";
-const buttonOpen = "_buttonOpen_a6fvx_25";
-const menu = "_menu_a6fvx_33";
-const enter = "_enter_a6fvx_41";
-const enterFrom = "_enterFrom_a6fvx_49";
-const enterTo = "_enterTo_a6fvx_57";
-const leave = "_leave_a6fvx_65";
-const leaveFrom = "_leaveFrom_a6fvx_73";
-const leaveTo = "_leaveTo_a6fvx_81";
-const center = "_center_a6fvx_89";
-const top = "_top_a6fvx_97";
-const bottom = "_bottom_a6fvx_105";
-const left = "_left_a6fvx_113";
-const right = "_right_a6fvx_121";
-const chartOptionBtn = "_chartOptionBtn_a6fvx_225";
-const chartpopup = "_chartpopup_a6fvx_233";
+const container$1 = "_container_14i90_1";
+const popover = "_popover_14i90_5";
+const button = "_button_14i90_9";
+const buttonOpen = "_buttonOpen_14i90_13";
+const menu = "_menu_14i90_17";
+const enter = "_enter_14i90_21";
+const enterFrom = "_enterFrom_14i90_25";
+const enterTo = "_enterTo_14i90_29";
+const leave = "_leave_14i90_33";
+const leaveFrom = "_leaveFrom_14i90_37";
+const leaveTo = "_leaveTo_14i90_41";
+const center = "_center_14i90_45";
+const top = "_top_14i90_49";
+const bottom = "_bottom_14i90_53";
+const left = "_left_14i90_57";
+const right = "_right_14i90_61";
+const chartOptionBtn = "_chartOptionBtn_14i90_113";
+const chartpopup = "_chartpopup_14i90_117";
 var styles$8 = {
   container: container$1,
   popover,
@@ -122100,23 +122220,23 @@ var styles$8 = {
   bottom,
   left,
   right,
-  "left-top-end": "_left-top-end_a6fvx_129",
-  "right-top-end": "_right-top-end_a6fvx_137",
-  "left-bottom-end": "_left-bottom-end_a6fvx_145",
-  "right-bottom-end": "_right-bottom-end_a6fvx_153",
-  "top-left": "_top-left_a6fvx_161",
-  "top-right": "_top-right_a6fvx_169",
-  "bottom-left": "_bottom-left_a6fvx_177",
-  "bottom-right": "_bottom-right_a6fvx_185",
-  "left-top": "_left-top_a6fvx_129",
-  "left-bottom": "_left-bottom_a6fvx_145",
-  "right-top": "_right-top_a6fvx_137",
-  "right-bottom": "_right-bottom_a6fvx_153",
+  "left-top-end": "_left-top-end_14i90_65",
+  "right-top-end": "_right-top-end_14i90_69",
+  "left-bottom-end": "_left-bottom-end_14i90_73",
+  "right-bottom-end": "_right-bottom-end_14i90_77",
+  "top-left": "_top-left_14i90_81",
+  "top-right": "_top-right_14i90_85",
+  "bottom-left": "_bottom-left_14i90_89",
+  "bottom-right": "_bottom-right_14i90_93",
+  "left-top": "_left-top_14i90_65",
+  "left-bottom": "_left-bottom_14i90_73",
+  "right-top": "_right-top_14i90_69",
+  "right-bottom": "_right-bottom_14i90_77",
   chartOptionBtn,
   chartpopup
 };
-const fullscreen = "_fullscreen_19jec_1";
-const loading = "_loading_19jec_9";
+const fullscreen = "_fullscreen_1gpy3_1";
+const loading = "_loading_1gpy3_5";
 var styles$7 = {
   fullscreen,
   loading
@@ -122299,8 +122419,8 @@ const ChartPopup = ({
 };
 var ChartPopup$1 = React__default.memo(ChartPopup);
 var styles$6 = {
-  "dbc-container": "_dbc-container_nmp4f_1",
-  "active-dimension": "_active-dimension_nmp4f_9"
+  "dbc-container": "_dbc-container_1dw7c_1",
+  "active-dimension": "_active-dimension_1dw7c_5"
 };
 const DrillBreadCrumb = ({
   dimensions,
@@ -124251,10 +124371,11 @@ var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   Dataset,
   Header,
   MetricOutput,
+  InputTables,
+  ChartConfigure,
+  ChartSettings,
   ChartTab,
   TableTab,
-  ChartSettings,
-  ChartConfigure,
   GridLayout,
   ExternalMetricList,
   MetricCard,
@@ -124296,33 +124417,33 @@ const mdiPlus = (props) => /* @__PURE__ */ jsx("svg", {
     d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z"
   })
 });
-const scheduleEmailButton = "_scheduleEmailButton_101bq_1";
+const scheduleEmailButton = "_scheduleEmailButton_13nzt_1";
 var styles$2 = {
   scheduleEmailButton
 };
 var styles$1 = {
-  "form-container": "_form-container_63pgj_1",
-  "form-wrapper": "_form-wrapper_63pgj_7",
-  "form-primary-text": "_form-primary-text_63pgj_15",
-  "week-days-container": "_week-days-container_63pgj_23",
-  "main-label": "_main-label_63pgj_29",
-  "time-element": "_time-element_63pgj_37",
-  "cancel-btn": "_cancel-btn_63pgj_45",
-  "delete-btn": "_delete-btn_63pgj_51",
-  "field-width": "_field-width_63pgj_57",
-  "timezone-field": "_timezone-field_63pgj_65",
-  "success-text": "_success-text_63pgj_73"
+  "form-container": "_form-container_1odg5_1",
+  "form-wrapper": "_form-wrapper_1odg5_4",
+  "form-primary-text": "_form-primary-text_1odg5_8",
+  "week-days-container": "_week-days-container_1odg5_12",
+  "main-label": "_main-label_1odg5_15",
+  "time-element": "_time-element_1odg5_19",
+  "cancel-btn": "_cancel-btn_1odg5_23",
+  "delete-btn": "_delete-btn_1odg5_26",
+  "field-width": "_field-width_1odg5_29",
+  "timezone-field": "_timezone-field_1odg5_33",
+  "success-text": "_success-text_1odg5_37"
 };
-const tag = "_tag_akdrv_1";
-const tagBtn = "_tagBtn_akdrv_13";
-const inputFieldContainer = "_inputFieldContainer_akdrv_21";
+const tag = "_tag_qld84_1";
+const tagBtn = "_tagBtn_qld84_7";
+const inputFieldContainer = "_inputFieldContainer_qld84_11";
 var styles = {
   tag,
-  "tag-text": "_tag-text_akdrv_7",
+  "tag-text": "_tag-text_qld84_4",
   tagBtn,
   inputFieldContainer,
-  "tag-container": "_tag-container_akdrv_29",
-  "cross-icon": "_cross-icon_akdrv_37"
+  "tag-container": "_tag-container_qld84_15",
+  "cross-icon": "_cross-icon_qld84_19"
 };
 const TagInputField = ({
   control,