@databrainhq/plugin 0.9.5 → 0.9.6

package/dist/index.es.js

@@ -2515,7 +2515,7 @@ function useQuery(arg1, arg2, arg3) {
 const container$h = "_container_12kmo_1";
 const fixed = "_fixed_12kmo_1";
 const flex = "_flex_12kmo_1";
-const table$4 = "_table_12kmo_1";
+const table$3 = "_table_12kmo_1";
 const grid = "_grid_12kmo_1";
 const hidden = "_hidden_12kmo_1";
 const transform = "_transform_12kmo_1";
@@ -2542,7 +2542,8 @@ var styles$L = {
   "ml-[40px]": "_ml-[40px]_12kmo_1",
   "mb-2": "_mb-2_12kmo_1",
   flex,
-  table: table$4,
+  table: table$3,
+  "!table": "_!table_12kmo_1",
   grid,
   hidden,
   "h-screen": "_h-screen_12kmo_1",
@@ -2647,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 = {};
@@ -4952,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,
@@ -5017,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",
@@ -5060,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", {
@@ -6527,7 +6528,7 @@ const TextAreaField = ({
   });
 };
 const group$1 = "_group_13otg_1";
-const button$6 = "_button_13otg_9";
+const button$7 = "_button_13otg_9";
 const checkbox = "_checkbox_13otg_17";
 const enabled = "_enabled_13otg_43";
 const notenabled = "_notenabled_13otg_59";
@@ -6536,7 +6537,7 @@ const labelActive = "_labelActive_13otg_83";
 const labelInactive = "_labelInactive_13otg_91";
 var styles$A = {
   group: group$1,
-  button: button$6,
+  button: button$7,
   checkbox,
   "switch": "_switch_13otg_25",
   enabled,
@@ -7321,25 +7322,26 @@ const ExternalMetricForm = ({
     })]
   });
 };
-const container$d = "_container_1brv3_1";
-const wrapper$3 = "_wrapper_1brv3_9";
-const label$3 = "_label_1brv3_17";
-const floatingLabel = "_floatingLabel_1brv3_25";
-const floatingText = "_floatingText_1brv3_31";
-const clientText = "_clientText_1brv3_39";
-const normalText = "_normalText_1brv3_47";
-const dropdown$1 = "_dropdown_1brv3_55";
-const options = "_options_1brv3_63";
-const checkedOption = "_checkedOption_1brv3_71";
-const option = "_option_1brv3_63";
-const icon$1 = "_icon_1brv3_87";
-const text$2 = "_text_1brv3_95";
-const search = "_search_1brv3_103";
-const loadMore = "_loadMore_1brv3_111";
-const loadMoreIcon = "_loadMoreIcon_1brv3_119";
+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$3,
+  wrapper: wrapper$2,
   label: label$3,
   floatingLabel,
   floatingText,
@@ -7350,10 +7352,11 @@ var styles$y = {
   checkedOption,
   option,
   icon: icon$1,
-  text: text$2,
+  text: text$1,
   search,
   loadMore,
-  loadMoreIcon
+  loadMoreIcon,
+  aboveList
 };
 const useEmbeddedDashboard = (token) => {
   var _a2, _b2;
@@ -8070,12 +8073,14 @@ const FloatingDropDown = ({
   selectedOption: selectedOption2,
   onChange,
   className,
+  buttonClass,
   options: options2,
   isDisabled,
   children: children2,
   icon: icon2,
   isSearchEnabled,
-  closeControl
+  closeControl,
+  dropdownAbove
 }) => {
   const [isShow, setIsShow] = useState(false);
   const wrapperRef = useRef(null);
@@ -8102,7 +8107,7 @@ const FloatingDropDown = ({
       type: "button",
       variant: "custom",
       isDisabled,
-      className: styles$y.wrapper,
+      className: classnames(styles$y.wrapper, buttonClass),
       onClick: () => setIsShow(!isShow),
       children: [/* @__PURE__ */ jsxs(Text, {
         variant: "p",
@@ -8111,7 +8116,7 @@ const FloatingDropDown = ({
         children: [icon2, selectedOption2.label || selectedOption2.value || "Select An Option"]
       }), /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})]
     }), isShow && !isDisabled && /* @__PURE__ */ jsxs("div", {
-      className: styles$y.dropdown,
+      className: `${dropdownAbove ? styles$y.aboveList : styles$y.dropdown}`,
       children: [isSearchEnabled && /* @__PURE__ */ jsx(SearchTab, {
         className: styles$y.search,
         setSearchKeyword
@@ -19902,9 +19907,9 @@ function blurSeriesFromHighlightPayload(seriesModel, payload, api) {
   var el = data.getItemGraphicEl(dataIndex);
   if (!el) {
     var count2 = data.count();
-    var current = 0;
-    while (!el && current < count2) {
-      el = data.getItemGraphicEl(current++);
+    var current2 = 0;
+    while (!el && current2 < count2) {
+      el = data.getItemGraphicEl(current2++);
     }
   }
   if (el) {
@@ -25754,13 +25759,13 @@ var Task = function() {
 }();
 var iterator = function() {
   var end2;
-  var current;
+  var current2;
   var modBy;
   var modDataCount;
   var winCount;
   var it = {
     reset: function(s2, e2, sStep, sCount) {
-      current = s2;
+      current2 = s2;
       end2 = e2;
       modBy = sStep;
       modDataCount = sCount;
@@ -25770,12 +25775,12 @@ var iterator = function() {
   };
   return it;
   function sequentialNext() {
-    return current < end2 ? current++ : null;
+    return current2 < end2 ? current2++ : null;
   }
   function modNext() {
-    var dataIndex = current % winCount * modBy + Math.ceil(current / winCount);
-    var result = current >= end2 ? null : dataIndex < modDataCount ? dataIndex : current;
-    current++;
+    var dataIndex = current2 % winCount * modBy + Math.ceil(current2 / winCount);
+    var result = current2 >= end2 ? null : dataIndex < modDataCount ? dataIndex : current2;
+    current2++;
     return result;
   }
 }();
@@ -40910,7 +40915,7 @@ var LineView = function(_super) {
         var point = [symbol.x, symbol.y];
         var start2 = void 0;
         var end2 = void 0;
-        var current = void 0;
+        var current2 = void 0;
         if (clipShape) {
           if (isCoordSysPolar) {
             var polarClip = clipShape;
@@ -40918,26 +40923,26 @@ var LineView = function(_super) {
             if (isHorizontalOrRadial) {
               start2 = polarClip.startAngle;
               end2 = polarClip.endAngle;
-              current = -coord[1] / 180 * Math.PI;
+              current2 = -coord[1] / 180 * Math.PI;
             } else {
               start2 = polarClip.r0;
               end2 = polarClip.r;
-              current = coord[0];
+              current2 = coord[0];
             }
           } else {
             var gridClip = clipShape;
             if (isHorizontalOrRadial) {
               start2 = gridClip.x;
               end2 = gridClip.x + gridClip.width;
-              current = symbol.x;
+              current2 = symbol.x;
             } else {
               start2 = gridClip.y + gridClip.height;
               end2 = gridClip.y;
-              current = symbol.y;
+              current2 = symbol.y;
             }
           }
         }
-        var ratio = end2 === start2 ? 0 : (current - start2) / (end2 - start2);
+        var ratio = end2 === start2 ? 0 : (current2 - start2) / (end2 - start2);
         if (isAxisInverse) {
           ratio = 1 - ratio;
         }
@@ -41071,17 +41076,17 @@ var LineView = function(_super) {
     var polygon = this._polygon;
     var seriesModel = data.hostModel;
     var diff2 = lineAnimationDiff(this._data, data, this._stackedOnPoints, stackedOnPoints, this._coordSys, coordSys, this._valueOrigin);
-    var current = diff2.current;
+    var current2 = diff2.current;
     var stackedOnCurrent = diff2.stackedOnCurrent;
     var next = diff2.next;
     var stackedOnNext = diff2.stackedOnNext;
     if (step) {
-      current = turnPointsIntoStep(diff2.current, coordSys, step, connectNulls);
+      current2 = turnPointsIntoStep(diff2.current, coordSys, step, connectNulls);
       stackedOnCurrent = turnPointsIntoStep(diff2.stackedOnCurrent, coordSys, step, connectNulls);
       next = turnPointsIntoStep(diff2.next, coordSys, step, connectNulls);
       stackedOnNext = turnPointsIntoStep(diff2.stackedOnNext, coordSys, step, connectNulls);
     }
-    if (getBoundingDiff(current, next) > 3e3 || polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3e3) {
+    if (getBoundingDiff(current2, next) > 3e3 || polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3e3) {
       polyline.stopAnimation();
       polyline.setShape({
         points: next
@@ -41096,20 +41101,20 @@ var LineView = function(_super) {
       return;
     }
     polyline.shape.__points = diff2.current;
-    polyline.shape.points = current;
+    polyline.shape.points = current2;
     var target = {
       shape: {
         points: next
       }
     };
-    if (diff2.current !== current) {
+    if (diff2.current !== current2) {
       target.shape.__points = diff2.next;
     }
     polyline.stopAnimation();
     updateProps$1(polyline, target, seriesModel);
     if (polygon) {
       polygon.setShape({
-        points: current,
+        points: current2,
         stackedOnPoints: stackedOnCurrent
       });
       polygon.stopAnimation();
@@ -44862,15 +44867,15 @@ function fixMinMaxLabelShow(axisModel, labelEls, tickEls) {
 function ignoreEl(el) {
   el && (el.ignore = true);
 }
-function isTwoLabelOverlapped(current, next) {
-  var firstRect = current && current.getBoundingRect().clone();
+function isTwoLabelOverlapped(current2, next) {
+  var firstRect = current2 && current2.getBoundingRect().clone();
   var nextRect = next && next.getBoundingRect().clone();
   if (!firstRect || !nextRect) {
     return;
   }
   var mRotationBack = identity([]);
-  rotate(mRotationBack, mRotationBack, -current.rotation);
-  firstRect.applyTransform(mul([], mRotationBack, current.getLocalTransform()));
+  rotate(mRotationBack, mRotationBack, -current2.rotation);
+  firstRect.applyTransform(mul([], mRotationBack, current2.getLocalTransform()));
   nextRect.applyTransform(mul([], mRotationBack, next.getLocalTransform()));
   return firstRect.intersect(nextRect);
 }
@@ -48842,8 +48847,8 @@ var GeoView = function(_super) {
   };
   GeoView2.prototype._handleRegionClick = function(e2) {
     var eventData;
-    findEventDispatcher(e2.target, function(current) {
-      return (eventData = getECData(current).eventData) != null;
+    findEventDispatcher(e2.target, function(current2) {
+      return (eventData = getECData(current2).eventData) != null;
     }, true);
     if (eventData) {
       this._api.dispatchAction({
@@ -50328,11 +50333,11 @@ function enableAriaDecalForTree(seriesModel) {
   var tree = data.tree;
   var decalPaletteScope2 = {};
   tree.eachNode(function(node) {
-    var current = node;
-    while (current && current.depth > 1) {
-      current = current.parentNode;
+    var current2 = node;
+    while (current2 && current2.depth > 1) {
+      current2 = current2.parentNode;
     }
-    var decal = getDecalFromPalette(seriesModel.ecModel, current.name || current.dataIndex + "", decalPaletteScope2);
+    var decal = getDecalFromPalette(seriesModel.ecModel, current2.name || current2.dataIndex + "", decalPaletteScope2);
     node.setVisual("decal", decal);
   });
 }
@@ -62003,11 +62008,11 @@ function sort(children2, sortOrder) {
 function sunburstVisual(ecModel) {
   var paletteScope = {};
   function pickColor(node, seriesModel, treeHeight) {
-    var current = node;
-    while (current && current.depth > 1) {
-      current = current.parentNode;
+    var current2 = node;
+    while (current2 && current2.depth > 1) {
+      current2 = current2.parentNode;
     }
-    var color2 = seriesModel.getColorFromPalette(current.name || current.dataIndex + "", paletteScope);
+    var color2 = seriesModel.getColorFromPalette(current2.name || current2.dataIndex + "", paletteScope);
     if (node.depth > 1 && isString$1(color2)) {
       color2 = lift(color2, (node.depth - 1) / (treeHeight - 1) * 0.5);
     }
@@ -68446,8 +68451,8 @@ var DataView = function(_super) {
       viewMain.appendChild(textarea2);
     }
     var blockMetaList = result.meta;
-    var buttonContainer = document.createElement("div");
-    buttonContainer.style.cssText = "position:absolute;bottom:5px;left:0;right:0";
+    var buttonContainer2 = document.createElement("div");
+    buttonContainer2.style.cssText = "position:absolute;bottom:5px;left:0;right:0";
     var buttonStyle = "float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px";
     var closeButton = document.createElement("div");
     var refreshButton = document.createElement("div");
@@ -68486,11 +68491,11 @@ var DataView = function(_super) {
     closeButton.innerHTML = lang[1];
     refreshButton.innerHTML = lang[2];
     refreshButton.style.cssText = closeButton.style.cssText = buttonStyle;
-    !model.get("readOnly") && buttonContainer.appendChild(refreshButton);
-    buttonContainer.appendChild(closeButton);
+    !model.get("readOnly") && buttonContainer2.appendChild(refreshButton);
+    buttonContainer2.appendChild(closeButton);
     root2.appendChild(header2);
     root2.appendChild(viewMain);
-    root2.appendChild(buttonContainer);
+    root2.appendChild(buttonContainer2);
     viewMain.style.height = container2.clientHeight - 80 + "px";
     container2.appendChild(root2);
     this._dom = root2;
@@ -73916,10 +73921,10 @@ var ScrollableLegendView = function(_super) {
     var pageText = controllerGroup.childOfName("pageText");
     var pageFormatter = legendModel.get("pageFormatter");
     var pageIndex = pageInfo.pageIndex;
-    var current = pageIndex != null ? pageIndex + 1 : 0;
+    var current2 = pageIndex != null ? pageIndex + 1 : 0;
     var total = pageInfo.pageCount;
-    pageText && pageFormatter && pageText.setStyle("text", isString$1(pageFormatter) ? pageFormatter.replace("{current}", current == null ? "" : current + "").replace("{total}", total == null ? "" : total + "") : pageFormatter({
-      current,
+    pageText && pageFormatter && pageText.setStyle("text", isString$1(pageFormatter) ? pageFormatter.replace("{current}", current2 == null ? "" : current2 + "").replace("{total}", total == null ? "" : total + "") : pageFormatter({
+      current: current2,
       total
     }));
   };
@@ -81606,7 +81611,7 @@ const StackedBarChart = ({
     children: /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
-        height: "300px"
+        height: "90%"
       },
       option: option2,
       onEvents: {
@@ -84029,7 +84034,7 @@ const alphanumeric = (rowA, rowB, columnId) => {
 const alphanumericCaseSensitive = (rowA, rowB, columnId) => {
   return compareAlphanumeric(toString$1(rowA.getValue(columnId)), toString$1(rowB.getValue(columnId)));
 };
-const text$1 = (rowA, rowB, columnId) => {
+const text = (rowA, rowB, columnId) => {
   return compareBasic(toString$1(rowA.getValue(columnId)).toLowerCase(), toString$1(rowB.getValue(columnId)).toLowerCase());
 };
 const textCaseSensitive = (rowA, rowB, columnId) => {
@@ -84091,7 +84096,7 @@ function compareAlphanumeric(aStr, bStr) {
 const sortingFns = {
   alphanumeric,
   alphanumericCaseSensitive,
-  text: text$1,
+  text,
   textCaseSensitive,
   datetime,
   basic
@@ -85626,41 +85631,51 @@ function getAccessorAttributes(accessor) {
     ...accessor
   };
 }
-const tableData = "_tableData_17lmd_7";
-const tableHeadCol$1 = "_tableHeadCol_17lmd_13";
-const tableRow$1 = "_tableRow_17lmd_19";
-const tableRowCol$1 = "_tableRowCol_17lmd_25";
-const row = "_row_17lmd_31";
-const container$b = "_container_17lmd_37";
-const table$3 = "_table_17lmd_1";
-const previewTable = "_previewTable_17lmd_49";
-const preview = "_preview_17lmd_49";
-const searchButton = "_searchButton_17lmd_61";
-const previewText = "_previewText_17lmd_67";
-const noData$1 = "_noData_17lmd_73";
-const error$2 = "_error_17lmd_79";
-const errorMsg = "_errorMsg_17lmd_85";
-const tableIcon = "_tableIcon_17lmd_91";
-const stripedRow = "_stripedRow_17lmd_97";
-const rowHover = "_rowHover_17lmd_103";
-const rightBorder = "_rightBorder_17lmd_109";
-const searchContainer = "_searchContainer_17lmd_115";
-const sortButton = "_sortButton_17lmd_121";
-const debounceInput = "_debounceInput_17lmd_127";
-const searchTab = "_searchTab_17lmd_133";
-const noDataHead = "_noDataHead_17lmd_139";
-const noDataBody = "_noDataBody_17lmd_145";
-const showSort = "_showSort_17lmd_151";
-const noSort = "_noSort_17lmd_157";
+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";
 var styles$u = {
-  "table-loader-container": "_table-loader-container_17lmd_1",
+  "table-loader-container": "_table-loader-container_1bay1_1",
   tableData,
   tableHeadCol: tableHeadCol$1,
   tableRow: tableRow$1,
   tableRowCol: tableRowCol$1,
   row,
   container: container$b,
-  table: table$3,
+  table: table$2,
   previewTable,
   preview,
   searchButton,
@@ -85674,12 +85689,22 @@ var styles$u = {
   rightBorder,
   searchContainer,
   sortButton,
-  debounceInput,
   searchTab,
+  searchTabInput,
+  searchTabIcon,
   noDataHead,
   noDataBody,
   showSort,
-  noSort
+  noSort,
+  pagination,
+  rowStyle,
+  rowText,
+  rowsDropdown,
+  pageStyle,
+  buttonContainer,
+  button: button$6,
+  paginationWrapper,
+  current
 };
 const DebouncedInput = ({
   value: initialValue,
@@ -85697,11 +85722,19 @@ const DebouncedInput = ({
     }, debounce2);
     return () => clearTimeout(timeout);
   }, [debounce2, onChange, value]);
-  return /* @__PURE__ */ jsx("input", {
-    ...props,
-    value,
-    onChange: (e2) => setValue(e2.target.value),
-    className: styles$u.searchTab
+  return /* @__PURE__ */ jsxs("div", {
+    className: `${styles$u.searchTab} ${props.className || ""}`,
+    children: [/* @__PURE__ */ jsx("input", {
+      ...props,
+      value,
+      onChange: (e2) => setValue(e2.target.value),
+      className: styles$u.searchTabInput
+    }), /* @__PURE__ */ jsx(iconoirSearch, {
+      className: styles$u.searchTabIcon,
+      color: "#C7C7C7",
+      width: "30px",
+      height: "30px"
+    })]
   });
 };
 var TableIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI3MS4xMSwxNzkuNzJsLS4wOSwyMC4zM3MuMTksNC4wNS4zOCw0LjUyLjc1LDEuODgsMS40MSwyLjM1LDEuMjcuOTksMi4yMSwxLjMyLDEuMTguNjEsMi42NC42MSwyMi42OC4wNSwyMi42OC4wNWwtMjkuMjItMjkuMThaIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMjAzLjcxIiB5MT0iMjA4LjAxIiB4Mj0iMjM0LjkyIiB5Mj0iMjA4LjAxIi8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMjAzLjcxIiB5MT0iMTk3LjM0IiB4Mj0iMjQ4LjA0IiB5Mj0iMTk3LjM0Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIyMDIuMyIgeT0iMjMwLjM2IiB3aWR0aD0iODkuOTUiIGhlaWdodD0iNjIuNjciIHJ4PSIzLjIxIiByeT0iMy4yMSIvPjxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTMwMC40OSwyMDguOTl2OTkuOTljMCwzLjU1LTIuODgsNi40My02LjQzLDYuNDNoLTkzLjIzYy0zLjU1LDAtNi40My0yLjg4LTYuNDMtNi40M3YtMTIzLjA3YzAtMy41NSwyLjg4LTYuNDMsNi40My02LjQzaDcwLjI5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMjcxLjE1LDE3OS40OHYyMi45MWMwLDMuNTUsMi44OCw2LjQzLDYuNDMsNi40M2gyMi45MXMtMjkuMzQtMjkuNDgtMjkuMzQtMjkuMzRaIi8+PC9nPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTMwNS40OSwyMTMuOTl2OTkuOTljMCwzLjU1LTIuODgsNi40My02LjQzLDYuNDNoLTkzLjIzYy0yLjk1LDAtNS40My0xLjk4LTYuMTktNC42OSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTMwNS40OSwyMTMuODJzLTIuMTMtMi4xNC01LjI0LTUuMjYiLz48cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0xOTkuNTQsMzE1LjUzcy4yOCwxLjA0LjY2LDEuNi41NiwxLjA4LDEuMzIsMS42OSwyLjEyLDEuNDYsMi40LDEuNTEsMi43My4yNCwzLjg2LjE5LDIwLjM4LS4wOSwyMC4zOC0uMDloMjMuNjdzMTcuMDQtLjA1LDE3LjA0LS4wNWwxNy42OS4xNCwxMi43NS0uMTRzMS45OC0uMTksMi43OC0uNzEsMS42NS0xLjA0LDIuMTItMS44NCwxLjIyLTEuODQsMS4yNy0yLjM1LjE0LTE0LjQuMTQtMTQuNGwtLjE5LTExLjYyLjA5LTExLjk1di0yMi4xMnMtLjA1LTE4LjEyLS4wNS0xOC4xMnYtMjMuMzRzLTUuMDQtNS4yMi01LjA0LTUuMjJsLjA1LDI1LjYuMTQsMjguOTktLjA1LDEzLjg0LS4wNSw5Ljc0djEwLjRzMCw5Ljc5LDAsOS43OWMwLDAsLjE5LDMuMDYtLjQ3LDQuMDlzLTEuMzYsMi4zNS0yLjIxLDIuOTYtMi4wNywxLjE4LTQuNzEsMS4yMi0xNC44Ny4wNS0xNC44Ny4wNWwtMjEuNzktLjA1aC0xNi4wNWwtMjUuODguMDUtMTUuMDEuMTRaIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMjAyLjYzIiB5MT0iMjM5LjAzIiB4Mj0iMjkyLjAxIiB5Mj0iMjM5LjAzIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMjE5LjUiIHkxPSIyMzAuNjEiIHgyPSIyMTkuNzkiIHkyPSIyOTMuMDkiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIyMzcuNzYiIHkxPSIyMzAuNTMiIHgyPSIyMzguMDUiIHkyPSIyOTMiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIyNTYuMDIiIHkxPSIyMzAuNDUiIHgyPSIyNTYuMzEiIHkyPSIyOTIuOTIiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIyNzQuMjgiIHkxPSIyMzAuMzYiIHgyPSIyNzQuNTciIHkyPSIyOTIuODQiLz48Zz48cmVjdCBjbGFzcz0iY2xzLTUiIHg9IjIwNi4xNyIgeT0iMjMyLjc5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy01IiB4PSIyMjQuMjMiIHk9IjIzMi43OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNSIgeD0iMjQyLjY5IiB5PSIyMzIuNzkiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTUiIHg9IjI2MC42MiIgeT0iMjMyLjc5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy01IiB4PSIyNzguODMiIHk9IjIzMi43OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjQ0LjA4IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI0NC4wOCIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNDQuMDgiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjQ0LjA4IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI0NC4wOCIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjUyLjU1IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI1Mi41NSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNTIuNTUiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjUyLjU1IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI1Mi41NSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjYxLjAyIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI2MS4wMiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNjEuMDIiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjYxLjAyIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI2MS4wMiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjY5LjQ5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI2OS40OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNjkuNDkiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjY5LjQ5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI2OS40OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjc3Ljk2IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI3Ny45NiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNzcuOTYiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjc3Ljk2IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI3Ny45NiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjg2LjQzIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI4Ni40MyIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyODYuNDMiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjg2LjQzIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI4Ni40MyIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48L3N2Zz4=";
@@ -85732,8 +85765,10 @@ const Table = ({
   isLoading,
   error: error2,
   tableSettings,
-  tableName
+  tableName,
+  className = ""
 }) => {
+  var _a2, _b2, _c2, _d;
   const columnHelper = createColumnHelper();
   const columns = [];
   const tableData2 = (data == null ? void 0 : data.length) ? data : [];
@@ -85757,7 +85792,25 @@ const Table = ({
   };
   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 [globalFilter, setGlobalFilter] = useState("");
+  let fetchData;
   if (data) {
     for (const key in data[0]) {
       const colName = key;
@@ -85767,6 +85820,13 @@ const Table = ({
       });
       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);
@@ -85775,15 +85835,36 @@ const Table = ({
     });
     return itemRank.passed;
   };
+  const [isHovered, setHovered] = useState("");
+  const [{
+    pageIndex,
+    pageSize
+  }, setPagination] = React__default.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 table2 = useReactTable({
-    data: tableData2,
+    data: (_b2 = (_a2 = dataQuery.data) == null ? void 0 : _a2.rows) != null ? _b2 : tableData2,
     columns,
+    pageCount: (_d = (_c2 = dataQuery.data) == null ? void 0 : _c2.pageCount) != null ? _d : -1,
     filterFns: {
       fuzzy: fuzzyFilter
     },
     state: {
       sorting,
-      globalFilter
+      globalFilter,
+      pagination: pagination2
     },
     enableGlobalFilter: true,
     onRowSelectionChange: setRowSelection,
@@ -85793,11 +85874,15 @@ const Table = ({
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
     onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    manualPagination: true,
     debugTable: true
   });
-  const [isHovered, setHovered] = useState("");
+  useEffect(() => {
+    table2.setPageSize(Number(rowSize.value));
+  }, [rowSize, table2]);
   return /* @__PURE__ */ jsx("div", {
-    className: styles$u.container,
+    className: `${styles$u.container} ${className}`,
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$u.previewTable,
       children: [/* @__PURE__ */ jsxs("div", {
@@ -85807,13 +85892,10 @@ const Table = ({
           variant: "h1",
           className: styles$u.previewText,
           children: tableName
-        }), (tableSettings == null ? void 0 : tableSettings.enableTableSearch) && /* @__PURE__ */ jsx("div", {
-          children: /* @__PURE__ */ jsx(DebouncedInput, {
-            value: globalFilter,
-            onChange: (value) => setGlobalFilter(String(value)),
-            className: styles$u.debounceInput,
-            placeholder: "Search"
-          })
+        }), (tableSettings == null ? void 0 : tableSettings.enableTableSearch) && /* @__PURE__ */ jsx(DebouncedInput, {
+          value: globalFilter,
+          onChange: (value) => setGlobalFilter(String(value)),
+          placeholder: "Search"
         })]
       }), /* @__PURE__ */ jsxs("div", {
         className: styles$u.tableData,
@@ -85826,58 +85908,60 @@ const Table = ({
               color: "blue"
             }
           })
-        }), !!(data == null ? void 0 : data.length) && !isLoading && /* @__PURE__ */ jsxs("table", {
-          className: styles$u.table,
-          children: [/* @__PURE__ */ jsx("thead", {
-            children: table2.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
-              className: styles$u.row,
-              children: headerGroup.headers.map((header2) => {
-                var _a2;
-                return /* @__PURE__ */ jsx("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: (_a2 = {
-                          asc: " \u{1F53C}",
-                          desc: " \u{1F53D}"
-                        }[header2.column.getIsSorted()]) != null ? _a2 : null
-                      })]
-                    })
-                  }) : /* @__PURE__ */ jsx(Fragment, {
-                    children: header2.isPlaceholder ? null : /* @__PURE__ */ jsx("div", {
-                      style: headerStyle,
-                      children: flexRender(header2.column.columnDef.header, header2.getContext())
+        }), !!(data == null ? void 0 : data.length) && !isLoading && /* @__PURE__ */ jsx(Fragment, {
+          children: /* @__PURE__ */ jsxs("table", {
+            className: styles$u.table,
+            children: [/* @__PURE__ */ jsx("thead", {
+              children: table2.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
+                className: styles$u.row,
+                children: headerGroup.headers.map((header2) => {
+                  var _a3;
+                  return /* @__PURE__ */ jsx("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, {
+                      children: header2.isPlaceholder ? null : /* @__PURE__ */ jsx("div", {
+                        style: headerStyle,
+                        children: flexRender(header2.column.columnDef.header, header2.getContext())
+                      })
                     })
-                  })
-                }, 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) && row2.id % 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", {
-                  style: divStyle,
-                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                }), !tableSettings && /* @__PURE__ */ jsx("div", {
-                  style: {
-                    textAlign: "center",
-                    width: "100%"
-                  },
-                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                })]
-              }, cell.id))
-            }, row2.id))
-          })]
+                  }, 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: 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", {
+                    style: divStyle,
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                  }), !tableSettings && /* @__PURE__ */ jsx("div", {
+                    style: {
+                      textAlign: "center",
+                      width: "100%"
+                    },
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                  })]
+                }, cell.id))
+              }, row2.id))
+            })]
+          })
         }), !(data == null ? void 0 : data.length) && !isLoading && !error2.length && /* @__PURE__ */ jsxs("div", {
           className: styles$u.noData,
           children: [/* @__PURE__ */ jsx("img", {
@@ -85905,6 +85989,37 @@ const Table = ({
             children: error2
           })
         })]
+      }), data && /* @__PURE__ */ jsxs("div", {
+        className: styles$u.pagination,
+        children: [/* @__PURE__ */ jsx("div", {
+          className: styles$u.rowStyle,
+          children: /* @__PURE__ */ jsx(FloatingDropDown, {
+            onChange: setRowSize,
+            selectedOption: rowSize,
+            options: rowSizeList,
+            labelVariant: "static",
+            dropdownAbove: true,
+            buttonClass: styles$u.rowsDropdown
+          })
+        }), /* @__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]
+        }), /* @__PURE__ */ jsxs("div", {
+          className: styles$u.buttonContainer,
+          children: [/* @__PURE__ */ jsx(Button, {
+            variant: "custom",
+            className: styles$u.button,
+            onClick: () => table2.previousPage(),
+            disabled: !table2.getCanPreviousPage(),
+            children: "Prev"
+          }), /* @__PURE__ */ jsx(Button, {
+            variant: "custom",
+            className: styles$u.button,
+            onClick: () => table2.nextPage(),
+            disabled: !table2.getCanNextPage(),
+            children: "Next"
+          })]
+        })]
       })]
     })
   });
@@ -86789,12 +86904,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,
@@ -86847,20 +86962,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$2 = "_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$2,
-  "col-container": "_col-container_u2z1d_25",
+  wrapper: wrapper$1,
+  "col-container": "_col-container_1q2ss_13",
   column,
   columnText: columnText$1
 };
@@ -88237,52 +88352,45 @@ const ChartTab = ({
     })]
   });
 };
-const container$5 = "_container_wjdaz_1";
-const wrapper$1 = "_wrapper_wjdaz_9";
-const text = "_text_wjdaz_17";
-const table$2 = "_table_wjdaz_23";
+const container$5 = "_container_epyr2_1";
 var styles$i = {
-  container: container$5,
-  wrapper: wrapper$1,
-  text,
-  table: table$2
+  container: container$5
 };
 const InputTables = ({
   previewTableDataList
 }) => {
   return /* @__PURE__ */ jsx("div", {
     className: styles$i.container,
-    children: /* @__PURE__ */ jsx("div", {
-      className: styles$i.wrapper,
-      children: previewTableDataList == null ? void 0 : previewTableDataList.map((table2) => /* @__PURE__ */ jsxs("div", {
-        className: styles$i.text,
-        children: [/* @__PURE__ */ jsx(Text, {
-          variant: "h1",
-          styleClass: "primary",
-          className: "",
-          children: table2.name
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$i.table,
-          children: /* @__PURE__ */ jsx(Table, {
-            data: table2.data,
-            error: table2.isError,
-            isLoading: false
-          })
-        })]
-      }, table2.name))
-    })
+    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";
+const container$4 = "_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$h = {
   container: container$4,
   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
@@ -88363,18 +88471,18 @@ const TableTab = ({
     })]
   });
 };
-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";
+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$g = {
-  "main-container": "_main-container_z1gwh_1",
+  "main-container": "_main-container_70jy1_1",
   mainContainerUpdate,
-  "outputTab-header": "_outputTab-header_z1gwh_15",
+  "outputTab-header": "_outputTab-header_70jy1_8",
   wrapper,
   updateWrapper,
   updateWrapperContent,
@@ -88512,30 +88620,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";
+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$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",
+  "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,
@@ -88546,12 +88654,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";
@@ -116656,10 +116764,10 @@ const MetricForm = ({
     })]
   });
 };
-const container$2 = "_container_1v000_1";
-const header = "_header_1v000_9";
-const enableGroupBy = "_enableGroupBy_1v000_15";
-const enableGroupButton = "_enableGroupButton_1v000_21";
+const container$2 = "_container_rofqe_1";
+const header = "_header_rofqe_5";
+const enableGroupBy = "_enableGroupBy_rofqe_8";
+const enableGroupButton = "_enableGroupButton_rofqe_11";
 var styles$d = {
   container: container$2,
   header,
@@ -120050,7 +120158,7 @@ var GridItem = /* @__PURE__ */ function(_React$Component) {
   }, {
     key: "mixinResizable",
     value: function mixinResizable(child, position2, isResizable) {
-      var _this$props6 = this.props, cols = _this$props6.cols, x2 = _this$props6.x, minW2 = _this$props6.minW, minH2 = _this$props6.minH, maxW2 = _this$props6.maxW, maxH2 = _this$props6.maxH, transformScale = _this$props6.transformScale, resizeHandles = _this$props6.resizeHandles, resizeHandle = _this$props6.resizeHandle;
+      var _this$props6 = this.props, cols = _this$props6.cols, x2 = _this$props6.x, minW2 = _this$props6.minW, minH2 = _this$props6.minH, maxW2 = _this$props6.maxW, maxH2 = _this$props6.maxH, transformScale = _this$props6.transformScale, resizeHandles = _this$props6.resizeHandles, resizeHandle2 = _this$props6.resizeHandle;
       var positionParams = this.getPositionParams();
       var maxWidth = (0, _calculateUtils$1.calcGridItemPosition)(positionParams, 0, 0, cols - x2, 0).width;
       var mins = (0, _calculateUtils$1.calcGridItemPosition)(positionParams, 0, 0, minW2, minH2);
@@ -120073,7 +120181,7 @@ var GridItem = /* @__PURE__ */ function(_React$Component) {
           onResize: this.onResize,
           transformScale,
           resizeHandles,
-          handle: resizeHandle
+          handle: resizeHandle2
         },
         child
       );
@@ -120790,7 +120898,7 @@ var ReactGridLayout = /* @__PURE__ */ function(_React$Component) {
       var l2 = (0, _utils$2.getLayoutItem)(this.state.layout, String(child.key));
       if (!l2)
         return null;
-      var _this$props8 = this.props, width = _this$props8.width, cols = _this$props8.cols, margin = _this$props8.margin, containerPadding = _this$props8.containerPadding, rowHeight = _this$props8.rowHeight, maxRows = _this$props8.maxRows, isDraggable = _this$props8.isDraggable, isResizable = _this$props8.isResizable, isBounded = _this$props8.isBounded, useCSSTransforms = _this$props8.useCSSTransforms, transformScale = _this$props8.transformScale, draggableCancel = _this$props8.draggableCancel, draggableHandle = _this$props8.draggableHandle, resizeHandles = _this$props8.resizeHandles, resizeHandle = _this$props8.resizeHandle;
+      var _this$props8 = this.props, width = _this$props8.width, cols = _this$props8.cols, margin = _this$props8.margin, containerPadding = _this$props8.containerPadding, rowHeight = _this$props8.rowHeight, maxRows = _this$props8.maxRows, isDraggable = _this$props8.isDraggable, isResizable = _this$props8.isResizable, isBounded = _this$props8.isBounded, useCSSTransforms = _this$props8.useCSSTransforms, transformScale = _this$props8.transformScale, draggableCancel = _this$props8.draggableCancel, draggableHandle = _this$props8.draggableHandle, resizeHandles = _this$props8.resizeHandles, resizeHandle2 = _this$props8.resizeHandle;
       var _this$state3 = this.state, mounted = _this$state3.mounted, droppingPosition = _this$state3.droppingPosition;
       var draggable = typeof l2.isDraggable === "boolean" ? l2.isDraggable : !l2.static && isDraggable;
       var resizable2 = typeof l2.isResizable === "boolean" ? l2.isResizable : !l2.static && isResizable;
@@ -120829,7 +120937,7 @@ var ReactGridLayout = /* @__PURE__ */ function(_React$Component) {
         static: l2.static,
         droppingPosition: isDroppingItem ? droppingPosition : void 0,
         resizeHandles: resizeHandlesOptions,
-        resizeHandle
+        resizeHandle: resizeHandle2
       }, child);
     }
   }, {
@@ -121626,48 +121734,51 @@ function WidthProvideRGL(ComposedComponent) {
   module.exports.WidthProvider = WidthProvider.default;
 })(reactGridLayout);
 var styles$c = "";
-const fullscreen$2 = "_fullscreen_1en1r_49";
+const resizeHandle = "_resizeHandle_170un_17";
+const fullscreen$2 = "_fullscreen_170un_57";
 var styles$b = {
-  "MetricList-container": "_MetricList-container_1en1r_1",
-  "MetricList-wrapper": "_MetricList-wrapper_1en1r_9",
-  "MetricList-wrapper-move": "_MetricList-wrapper-move_1en1r_17",
-  "noMetric-container": "_noMetric-container_1en1r_25",
-  "noMetric-wrapper": "_noMetric-wrapper_1en1r_33",
-  "alt-container": "_alt-container_1en1r_41",
+  "MetricList-container": "_MetricList-container_170un_1",
+  "MetricList-wrapper": "_MetricList-wrapper_170un_9",
+  resizeHandle,
+  "MetricList-wrapper-move": "_MetricList-wrapper-move_170un_25",
+  "noMetric-container": "_noMetric-container_170un_33",
+  "noMetric-wrapper": "_noMetric-wrapper_170un_41",
+  "alt-container": "_alt-container_170un_49",
   fullscreen: fullscreen$2
 };
-const cardContainer = "_cardContainer_1u57p_1";
-const listHeader = "_listHeader_1u57p_9";
-const metricName = "_metricName_1u57p_17";
-const metricTitle = "_metricTitle_1u57p_25";
-const metricDescription = "_metricDescription_1u57p_33";
-const popup = "_popup_1u57p_41";
-const metricFilter$1 = "_metricFilter_1u57p_49";
-const popupIcon = "_popupIcon_1u57p_57";
-const popupMenu = "_popupMenu_1u57p_65";
-const popupItem = "_popupItem_1u57p_73";
-const popupItemIcon = "_popupItemIcon_1u57p_81";
-const csvBtn = "_csvBtn_1u57p_89";
-const deleteBtn = "_deleteBtn_1u57p_97";
-const metricData = "_metricData_1u57p_105";
-const singleValueData = "_singleValueData_1u57p_113";
-const singleValue = "_singleValue_1u57p_113";
-const noData = "_noData_1u57p_129";
-const noDataContent = "_noDataContent_1u57p_137";
-const noDataText = "_noDataText_1u57p_145";
-const loading$1 = "_loading_1u57p_153";
-const features = "_features_1u57p_161";
-const fullscreen$1 = "_fullscreen_1u57p_169";
-const deleteModal = "_deleteModal_1u57p_177";
-const cancelBtn = "_cancelBtn_1u57p_185";
-const warningIcon = "_warningIcon_1u57p_193";
-const downloadCsv = "_downloadCsv_1u57p_201";
-const downloadCsvWrapper = "_downloadCsvWrapper_1u57p_209";
-const downloadCsvHeader = "_downloadCsvHeader_1u57p_215";
-const downloadCsvFooter = "_downloadCsvFooter_1u57p_221";
-const downloadCsvCancelBtn = "_downloadCsvCancelBtn_1u57p_229";
-const downloadCsvNote = "_downloadCsvNote_1u57p_237";
-const downloadCsvNoteText = "_downloadCsvNoteText_1u57p_245";
+const cardContainer = "_cardContainer_2m9mz_1";
+const listHeader = "_listHeader_2m9mz_9";
+const metricName = "_metricName_2m9mz_17";
+const metricTitle = "_metricTitle_2m9mz_25";
+const metricDescription = "_metricDescription_2m9mz_33";
+const popup = "_popup_2m9mz_41";
+const metricFilter$1 = "_metricFilter_2m9mz_49";
+const popupIcon = "_popupIcon_2m9mz_57";
+const popupMenu = "_popupMenu_2m9mz_65";
+const popupItem = "_popupItem_2m9mz_73";
+const popupItemIcon = "_popupItemIcon_2m9mz_81";
+const csvBtn = "_csvBtn_2m9mz_89";
+const deleteBtn = "_deleteBtn_2m9mz_97";
+const metricData = "_metricData_2m9mz_105";
+const metricTable = "_metricTable_2m9mz_113";
+const singleValueData = "_singleValueData_2m9mz_121";
+const singleValue = "_singleValue_2m9mz_121";
+const noData = "_noData_2m9mz_137";
+const noDataContent = "_noDataContent_2m9mz_145";
+const noDataText = "_noDataText_2m9mz_153";
+const loading$1 = "_loading_2m9mz_161";
+const features = "_features_2m9mz_169";
+const fullscreen$1 = "_fullscreen_2m9mz_177";
+const deleteModal = "_deleteModal_2m9mz_185";
+const cancelBtn = "_cancelBtn_2m9mz_193";
+const warningIcon = "_warningIcon_2m9mz_201";
+const downloadCsv = "_downloadCsv_2m9mz_209";
+const downloadCsvWrapper = "_downloadCsvWrapper_2m9mz_217";
+const downloadCsvHeader = "_downloadCsvHeader_2m9mz_225";
+const downloadCsvFooter = "_downloadCsvFooter_2m9mz_233";
+const downloadCsvCancelBtn = "_downloadCsvCancelBtn_2m9mz_241";
+const downloadCsvNote = "_downloadCsvNote_2m9mz_249";
+const downloadCsvNoteText = "_downloadCsvNoteText_2m9mz_257";
 var styles$a = {
   cardContainer,
   listHeader,
@@ -121683,6 +121794,7 @@ var styles$a = {
   csvBtn,
   deleteBtn,
   metricData,
+  metricTable,
   singleValueData,
   singleValue,
   noData,
@@ -121701,8 +121813,8 @@ var styles$a = {
   downloadCsvCancelBtn,
   downloadCsvNote,
   downloadCsvNoteText,
-  "tab-border-bottom": "_tab-border-bottom_1u57p_253",
-  "download-info-text": "_download-info-text_1u57p_261"
+  "tab-border-bottom": "_tab-border-bottom_2m9mz_265",
+  "download-info-text": "_download-info-text_2m9mz_273"
 };
 var NoData = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6I2RhZGVkZjt9LmNscy03e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIxMC41LDIwMC44M2MuNC0uNjYuNjgtMS40LjgyLTIuMiwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguNDMtNC41Ni0yLjA5LTkuNjgtNi44Ni0xMC42Ni0uMDEsMC0uMDMsMC0uMDQsMC0yLjQtLjQ5LTUuMDItLjIyLTcuNDUtLjIyaC00NC4yMmMtLjUyLDAtMi4zMy0uMzEtMi43NywwbC0yNC4yOCwxNy4yMmgtNjEuNjFjLTMuOTcsMC02Ljk5LDMuNTYtNi4zNCw3LjQ3bDkuNzUsNTkuNDJjLjUxLDMuMTEsMy4yLDUuMzksNi4zNCw1LjM5aDExNy44NiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIwNywxMTQuNDN2LTguNTRjMC0zLjU1LTIuODgtNi40My02LjQzLTYuNDNoLTE3LjE5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTAzLjQ3LDk5LjQ2aC0xNS4xMmMtMy41NSwwLTYuNDMsMi44OC02LjQzLDYuNDN2MjUuNDgiLz48Zz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxMTQuMTIiIHkxPSI5NC4wOCIgeDI9IjE0NC44NCIgeTI9Ijk0LjA4Ii8+PGc+PHJlY3QgY2xhc3M9ImNscy02IiB4PSIxMTIuNjEiIHk9IjEwMi40MyIgd2lkdGg9IjE4Ljk3IiBoZWlnaHQ9IjMuMiIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMTM3LjYxIiB5PSIxMDIuNDMiIHdpZHRoPSI4LjkiIGhlaWdodD0iMy4yIi8+PC9nPjwvZz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNjQuOTgsODEuNDZsLS4wOCwxNi4yOHMuMTUsMy4yNC4zLDMuNjIuNiwxLjUxLDEuMTMsMS44OCwxLjAyLjc5LDEuNzcsMS4wNi45NC40OSwyLjExLjQ5LDE4LjE3LjA0LDE4LjE3LjA0bC0yMy40MS0yMy4zN1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xODguNTEsMTA0LjkxdjkuNTIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xMDMuNTMsMTMxLjM3di00NC45NWMwLTIuODQsMi4zLTUuMTUsNS4xNS01LjE1LDE4Ljc3LDAsMzcuNTQsMCw1Ni4zMSwwIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTY1LjAxLDgxLjI3djE4LjM1YzAsMi44NCwyLjMxLDUuMTUsNS4xNSw1LjE1aDE4LjM1cy0yMy41LTIzLjYyLTIzLjUtMjMuNVoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMjQuOTYiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMzEuMjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xOTIuNTcsMTgzLjMzYzkuNjIsOS42MiwzMC4yOCwzMC4yOCwzMC4yOCwzMC4yOCwxLjE3LDEuMTcsMS4xNywzLjA3LDAsNC4yNHMtMy4wNywxLjE3LTQuMjQsMGMwLDAtMjAuNTgtMjAuNTgtMzAuMjItMzAuMjIiLz48Zz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNjguNjYsMTcwLjkzYy0uNzQsMC0xLjM0LjI0LTEuODEuNzItLjQ3LjQ4LS43MSwxLjA5LS43MSwxLjgzcy4yNCwxLjMyLjcxLDEuODFjLjQ3LjQ5LDEuMDcuNzQsMS44MS43NHMxLjM0LS4yNSwxLjgxLS43NGMuNDctLjQ5LjcxLTEuMS43MS0xLjgxcy0uMjQtMS4zNC0uNzEtMS44M2MtLjQ3LS40OC0xLjA4LS43Mi0xLjgxLS43MloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNzQuNjksMTUzLjc3Yy0uNjItMS4wMi0xLjQ5LTEuODItMi42LTIuNC0xLjEyLS41Ny0yLjQtLjg2LTMuODUtLjg2LTEuNjgsMC0zLjE3LjQtNC40NywxLjE5cy0yLjI5LDEuOTQtMi45OCwzLjQzbDIuNzYsMi4yOGMuNDYtMS4wNiwxLjA3LTEuODYsMS44NS0yLjQuNzctLjU0LDEuNjUtLjgxLDIuNjQtLjgxLjc2LDAsMS40MS4xNCwxLjk3LjQxLjU1LjI4Ljk4LjY3LDEuMjgsMS4xNy4zLjUxLjQ1LDEuMS40NSwxLjc5cy0uMTYsMS4yOS0uNDcsMS44MWMtLjMxLjUyLS43NS45Mi0xLjMxLDEuMjEtLjU2LjI5LTEuMjIuNDMtMS45OC40M2gtLjkzdjYuNjZoMy4yOGwuMjYtMy43M2MuNzEtLjI0LDEuMzctLjU1LDEuOTUtLjkzLjk5LS42NCwxLjc1LTEuNDUsMi4yOS0yLjQxLjU0LS45Ny44MS0yLjA3LjgxLTMuMzEsMC0xLjMzLS4zMS0yLjUxLS45My0zLjU0WiIvPjwvZz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im04NS41NSwyMDMuOTdjLjY4LDIuODksMy4yNiw0Ljk2LDYuMjYsNC45NmgxMTcuNzMiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMTUuMzcsMjA2LjA0Yy40Ny0uNzEuOC0xLjUyLjk1LTIuNCwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguMzktNC4xNi0xLjY4LTguNzktNS42Ny0xMC4zMSIvPjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIyMy41MSwxMjAuMDhzLjQ5LDEuNjIuNTMsMS43My4zMiwyLjQ0LjMyLDIuNDRsLS4wNCwxLjkxLTEuMzgsNy4xMy0zLjM5LDE5LjMxLTIuODksMTUuOTItMi45NiwxNi43Ni0yLjQ0LDEzLjE2LS45MiwyLjY1LDQuOTgsNS4xNS44NS0yLjE1LjgxLTQuMDYsMS40OC04LjMzLDIuODItMTUuNzEsMi4xNS0xMi4xMSwxLjk0LTExLjM2LDIuNzUtMTQuNzUuODgtNC42OS4yOC0yLjU4LjA3LTIuMTItLjYtMi43NS0xLjI0LTIuMzYtMS4wOS0xLjU5LTIuMDEtMS4zMS0uOTItLjI4WiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNyIgcG9pbnRzPSI4NS42OCAyMDMuOTMgMjA0LjU1IDIwMy44NCAyMDkuMzUgMjA4LjczIDE0OC40OCAyMDguODggOTAuOTUgMjA5LjAyIDg5LjUgMjA4LjY2IDg3Ljk4IDIwNy45MiA4Ni44MiAyMDYuNTggODYuMDEgMjA1LjAzIDg1LjY4IDIwMy45MyIvPjwvc3ZnPg==";
 const materialSymbolsArchiveOutline = (props) => /* @__PURE__ */ jsx("svg", {
@@ -121771,8 +121883,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
@@ -121875,24 +121987,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,
@@ -121910,23 +122022,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
@@ -122109,8 +122221,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,
@@ -122516,11 +122628,8 @@ const MetricCard = ({
             })]
           })]
         })]
-      }), (drillDownSettings == null ? void 0 : drillDownSettings.isEnableGroupBy) && /* @__PURE__ */ jsx(DrillBreadCrumb, {
-        dimensions: drillDownSettings.selectedDimensions,
-        drilledLevel
       }), chartType2 && /* @__PURE__ */ jsxs("div", {
-        className: styles$a.metricData,
+        className: `${styles$a.metricData} ${chartType2 === "table" ? styles$a.metricTable : ""}`,
         onContextMenu: (e2) => {
           e2.preventDefault();
         },
@@ -122547,6 +122656,9 @@ const MetricCard = ({
               color: "blue"
             }
           })
+        }), (drillDownSettings == null ? void 0 : drillDownSettings.isEnableGroupBy) && /* @__PURE__ */ jsx(DrillBreadCrumb, {
+          dimensions: drillDownSettings.selectedDimensions,
+          drilledLevel
         }), (chartParams == null ? void 0 : chartParams.name) && columnName && /* @__PURE__ */ jsx(ChartPopup$1, {
           isOpen: isShowChartPopup,
           setOpen: setShowChartPopup,
@@ -123045,16 +123157,15 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
     }
   };
   const csvDownloadUrls = useMemo(() => {
-    var _a2;
-    if ((_a2 = RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls) == null ? void 0 : _a2.length) {
-      const urls = getUrls(RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls[0].urls);
+    if (RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls.length) {
+      const urls = getUrls(RawCsvUrlsData.externalMetricRawCsvUrls[0].urls);
       return {
         urls,
         lastUpdatedAt: timeAgo(
-          Date.parse(RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls[0].lastUpdatedAt)
+          Date.parse(RawCsvUrlsData.externalMetricRawCsvUrls[0].lastUpdatedAt)
         ),
         isExpired: urls.length ? isLinkExpired(urls[0]).isExpired : true,
-        error: RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls[0].error,
+        error: RawCsvUrlsData.externalMetricRawCsvUrls[0].error,
         expireUrlIn: urls.length ? isLinkExpired(urls[0]).secondsLeft : 0
       };
     }
@@ -123491,12 +123602,19 @@ const ExternalMetricList = ({
         x: (cardLayout == null ? void 0 : cardLayout.x) || metric.resizeAttributes.xAxis || 0,
         y: (cardLayout == null ? void 0 : cardLayout.y) || metric.resizeAttributes.yAxis || 0,
         minW: 3,
-        minH: 6,
-        maxH: 15
+        minH: metric.chartOptions.chartType !== "single value" ? 8 : 5,
+        maxH: metric.chartOptions.chartType === "table" ? Infinity : 15
       };
     });
     return [allMetricList, layoutAttributes];
   }, [externalDashboardMetrics, layout3]);
+  useEffect(() => {
+    if (!metricsList.length || !metricsLayout.length)
+      return;
+    document.querySelectorAll(".react-resizable-handle").forEach((el) => {
+      el.classList.add(styles$b.resizeHandle);
+    });
+  }, [metricsList.length && metricsLayout.length]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: metricsList.length && metricsLayout.length ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsxs("div", {
@@ -123807,33 +123925,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,