@databrainhq/plugin 0.4.6 → 0.4.7

package/dist/index.es.js

@@ -2522,11 +2522,9 @@ const table$4 = "_table_11uys_1";
 const grid = "_grid_11uys_1";
 const hidden = "_hidden_11uys_1";
 const transform = "_transform_11uys_1";
-const truncate = "_truncate_11uys_1";
-const border = "_border_11uys_1";
 const shadow = "_shadow_11uys_1";
 const filter$1 = "_filter_11uys_189";
-var styles$y = {
+var styles$z = {
   container: container$e,
   "static": "_static_11uys_1",
   fixed,
@@ -2538,9 +2536,8 @@ var styles$y = {
   "top-1": "_top-1_11uys_1",
   "mb-2": "_mb-2_11uys_1",
   "mt-2": "_mt-2_11uys_1",
-  "mb-3": "_mb-3_11uys_1",
-  "mt-3": "_mt-3_11uys_1",
   "mt-2.5": "_mt-2.5_11uys_1",
+  "mb-3": "_mb-3_11uys_1",
   flex,
   table: table$4,
   grid,
@@ -2554,37 +2551,26 @@ var styles$y = {
   "w-screen": "_w-screen_11uys_1",
   "w-full": "_w-full_11uys_1",
   "w-64": "_w-64_11uys_1",
-  "w-44": "_w-44_11uys_1",
-  "w-60": "_w-60_11uys_1",
   transform,
   "flex-col": "_flex-col_11uys_1",
   "items-center": "_items-center_11uys_1",
   "justify-center": "_justify-center_11uys_1",
-  "justify-between": "_justify-between_11uys_1",
   "gap-5": "_gap-5_11uys_1",
   "divide-solid": "_divide-solid_11uys_1",
   "overflow-y-auto": "_overflow-y-auto_11uys_1",
   "overflow-x-hidden": "_overflow-x-hidden_11uys_1",
-  truncate,
-  "rounded-md": "_rounded-md_11uys_1",
   "border-2": "_border-2_11uys_1",
-  border,
   "border-l": "_border-l_11uys_1",
   "bg-[#EAEEFC]": "_bg-[#EAEEFC]_11uys_1",
   "p-4": "_p-4_11uys_1",
-  "p-3": "_p-3_11uys_1",
   "p-2": "_p-2_11uys_1",
   "px-4": "_px-4_11uys_1",
-  "px-2": "_px-2_11uys_1",
-  "py-1.5": "_py-1.5_11uys_1",
-  "py-1": "_py-1_11uys_1",
   "pl-1": "_pl-1_11uys_1",
   "text-center": "_text-center_11uys_1",
   "text-lg": "_text-lg_11uys_1",
   "text-6xl": "_text-6xl_11uys_1",
   "text-sm": "_text-sm_11uys_1",
   "text-xs": "_text-xs_11uys_1",
-  "text-gray-400": "_text-gray-400_11uys_1",
   "text-blue-700": "_text-blue-700_11uys_1",
   shadow,
   filter: filter$1,
@@ -7855,8 +7841,8 @@ function WidthProvideRGL(ComposedComponent) {
   module.exports.Responsive.utils = responsiveUtils;
   module.exports.WidthProvider = WidthProvider.default;
 })(reactGridLayout);
-var styles$x = "";
-var styles$w = {
+var styles$y = "";
+var styles$x = {
   "MetricList-container": "_MetricList-container_7pasw_1",
   "MetricList-wrapper": "_MetricList-wrapper_7pasw_9",
   "noMetric-container": "_noMetric-container_7pasw_17",
@@ -8171,7 +8157,7 @@ var classNames = classnames.exports;
 const primary = "_primary_iy5fw_1";
 const secondary = "_secondary_iy5fw_5";
 const tertiary = "_tertiary_iy5fw_10";
-var styles$v = {
+var styles$w = {
   primary,
   secondary,
   tertiary,
@@ -8236,13 +8222,13 @@ const Text = ({
 }) => {
   const Tag = variants[variant];
   return /* @__PURE__ */ jsx(Tag, {
-    className: classNames(styleClass === "custom" ? null : `${styles$v[styleClass]}`, className),
+    className: classNames(styleClass === "custom" ? null : `${styles$w[styleClass]}`, className),
     onClick,
     children: children2
   });
 };
 const fullscreen = "_fullscreen_1wo1t_1";
-var styles$u = {
+var styles$v = {
   fullscreen
 };
 const SOMETHING_WENT_WRONG = "something went wrong, please try again";
@@ -16340,7 +16326,7 @@ function parsePlainText(text2, style2) {
   var overflow = style2.overflow;
   var padding = style2.padding;
   var font = style2.font;
-  var truncate2 = overflow === "truncate";
+  var truncate = overflow === "truncate";
   var calculatedLineHeight = getLineHeight(font);
   var lineHeight = retrieve2(style2.lineHeight, calculatedLineHeight);
   var bgColorDrawn = !!style2.backgroundColor;
@@ -16358,7 +16344,7 @@ function parsePlainText(text2, style2) {
     var lineCount = Math.floor(height / lineHeight);
     lines = lines.slice(0, lineCount);
   }
-  if (text2 && truncate2 && width != null) {
+  if (text2 && truncate && width != null) {
     var options2 = prepareTruncateOptions(width, font, style2.ellipsis, {
       minChar: style2.truncateMinChar,
       placeholder: style2.placeholder
@@ -16449,7 +16435,7 @@ function parseRichText(text2, style2) {
   var calculatedHeight = 0;
   var calculatedWidth = 0;
   var stlPadding = style2.padding;
-  var truncate2 = overflow === "truncate";
+  var truncate = overflow === "truncate";
   var truncateLine = style2.lineOverflow === "truncate";
   function finishLine(line2, lineWidth2, lineHeight2) {
     line2.width = lineWidth2;
@@ -16503,7 +16489,7 @@ function parseRichText(text2, style2) {
               }
             }
           }
-          var remainTruncWidth = truncate2 && topWidth != null ? topWidth - lineWidth : null;
+          var remainTruncWidth = truncate && topWidth != null ? topWidth - lineWidth : null;
           if (remainTruncWidth != null && remainTruncWidth < token.width) {
             if (!tokenWidthNotSpecified || remainTruncWidth < paddingH) {
               token.text = "";
@@ -22870,7 +22856,7 @@ function secondsSetterName(isUTC) {
 function millisecondsSetterName(isUTC) {
   return isUTC ? "setUTCMilliseconds" : "setMilliseconds";
 }
-function getTextRect(text2, font, align, verticalAlign, padding, rich, truncate2, lineHeight) {
+function getTextRect(text2, font, align, verticalAlign, padding, rich, truncate, lineHeight) {
   var textEl = new ZRText$1({
     style: {
       text: text2,
@@ -22879,7 +22865,7 @@ function getTextRect(text2, font, align, verticalAlign, padding, rich, truncate2
       verticalAlign,
       padding,
       rich,
-      overflow: truncate2 ? "truncate" : null,
+      overflow: truncate ? "truncate" : null,
       lineHeight
     }
   });
@@ -84063,14 +84049,14 @@ class LineController extends DatasetController {
   getMaxOverflow() {
     const meta = this._cachedMeta;
     const dataset = meta.dataset;
-    const border2 = dataset.options && dataset.options.borderWidth || 0;
+    const border = dataset.options && dataset.options.borderWidth || 0;
     const data = meta.data || [];
     if (!data.length) {
-      return border2;
+      return border;
     }
     const firstPoint = data[0].size(this.resolveDataElementOptions(0));
     const lastPoint = data[data.length - 1].size(this.resolveDataElementOptions(data.length - 1));
-    return Math.max(border2, firstPoint, lastPoint) / 2;
+    return Math.max(border, firstPoint, lastPoint) / 2;
   }
   draw() {
     const meta = this._cachedMeta;
@@ -86039,13 +86025,13 @@ class ScatterController extends DatasetController {
       return max3 > 0 && max3;
     }
     const dataset = meta.dataset;
-    const border2 = dataset.options && dataset.options.borderWidth || 0;
+    const border = dataset.options && dataset.options.borderWidth || 0;
     if (!data.length) {
-      return border2;
+      return border;
     }
     const firstPoint = data[0].size(this.resolveDataElementOptions(0));
     const lastPoint = data[data.length - 1].size(this.resolveDataElementOptions(data.length - 1));
-    return Math.max(border2, firstPoint, lastPoint) / 2;
+    return Math.max(border, firstPoint, lastPoint) / 2;
   }
 }
 ScatterController.id = "scatter";
@@ -88785,7 +88771,7 @@ function boundingRects(bar) {
   const bounds = getBarBounds(bar);
   const width = bounds.right - bounds.left;
   const height = bounds.bottom - bounds.top;
-  const border2 = parseBorderWidth(bar, width / 2, height / 2);
+  const border = parseBorderWidth(bar, width / 2, height / 2);
   const radius = parseBorderRadius(bar, width / 2, height / 2);
   return {
     outer: {
@@ -88796,15 +88782,15 @@ function boundingRects(bar) {
       radius
     },
     inner: {
-      x: bounds.left + border2.l,
-      y: bounds.top + border2.t,
-      w: width - border2.l - border2.r,
-      h: height - border2.t - border2.b,
+      x: bounds.left + border.l,
+      y: bounds.top + border.t,
+      w: width - border.l - border.r,
+      h: height - border.t - border.b,
       radius: {
-        topLeft: Math.max(0, radius.topLeft - Math.max(border2.t, border2.l)),
-        topRight: Math.max(0, radius.topRight - Math.max(border2.t, border2.r)),
-        bottomLeft: Math.max(0, radius.bottomLeft - Math.max(border2.b, border2.l)),
-        bottomRight: Math.max(0, radius.bottomRight - Math.max(border2.b, border2.r))
+        topLeft: Math.max(0, radius.topLeft - Math.max(border.t, border.l)),
+        topRight: Math.max(0, radius.topRight - Math.max(border.t, border.r)),
+        bottomLeft: Math.max(0, radius.bottomLeft - Math.max(border.b, border.l)),
+        bottomRight: Math.max(0, radius.bottomRight - Math.max(border.b, border.r))
       }
     }
   };
@@ -94011,7 +93997,7 @@ const header$4 = "_header_15wtw_17";
 const headerTitle = "_headerTitle_15wtw_25";
 const content = "_content_15wtw_33";
 const footer = "_footer_15wtw_41";
-var styles$t = {
+var styles$u = {
   modal,
   popup,
   header: header$4,
@@ -94019,7 +94005,7 @@ var styles$t = {
   content,
   footer
 };
-var styles$s = {
+var styles$t = {
   "btn-primary": "_btn-primary_14f0q_1",
   "btn-secondary": "_btn-secondary_14f0q_5",
   "btn-reject": "_btn-reject_14f0q_9",
@@ -94042,7 +94028,7 @@ const Button = ({
   onClick,
   title: title2
 }) => {
-  const btnClasses = classNames(className, styles$s[`btn-${variant}`], size === "none" ? null : styles$s[`btn-${size}`]);
+  const btnClasses = classNames(className, styles$t[`btn-${variant}`], size === "none" ? null : styles$t[`btn-${size}`]);
   return /* @__PURE__ */ jsx("button", {
     type: type3,
     className: variant === "custom" ? className : btnClasses,
@@ -94080,18 +94066,18 @@ const Modal = ({
   if (!isOpen)
     return null;
   return require$$2$1.createPortal(/* @__PURE__ */ jsx("div", {
-    className: styles$t.modal,
+    className: styles$u.modal,
     onClick: onClose,
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$t.popup,
+      className: styles$u.popup,
       onClick: (e2) => {
         e2.stopPropagation();
       },
       children: [/* @__PURE__ */ jsx("section", {
-        className: styles$t.header,
+        className: styles$u.header,
         children: customHeader || /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsxs("span", {
-            className: styles$t.headerTitle,
+            className: styles$u.headerTitle,
             children: [icon2, headerTitle2]
           }), /* @__PURE__ */ jsx(Button, {
             variant: "custom",
@@ -94101,7 +94087,7 @@ const Modal = ({
           })]
         })
       }), /* @__PURE__ */ jsx("section", {
-        className: styles$t.content,
+        className: styles$u.content,
         children: children2
       })]
     })
@@ -94118,7 +94104,7 @@ const FullScreenChart = ({
     onClose: onCancel,
     headerTitle: "Chart Preview",
     children: /* @__PURE__ */ jsx("div", {
-      className: styles$u.fullscreen,
+      className: styles$v.fullscreen,
       children: chart && /* @__PURE__ */ jsx(MetricChart, {
         labels: chart.labels,
         data: chart.data,
@@ -94169,7 +94155,7 @@ const singleValue = "_singleValue_1km9m_65";
 const noData$1 = "_noData_1km9m_81";
 const loading = "_loading_1km9m_89";
 const fullScreen = "_fullScreen_1km9m_97";
-var styles$r = {
+var styles$s = {
   cardContainer,
   listHeader,
   metricName,
@@ -94184,7 +94170,7 @@ var styles$r = {
   fullScreen
 };
 const csvlink = "_csvlink_fci6i_1";
-var styles$q = {
+var styles$r = {
   csvlink
 };
 const objectArrayToCsvString = (array) => {
@@ -94221,7 +94207,7 @@ const CsvDownloadButton = ({
   return /* @__PURE__ */ jsx("a", {
     href: objectArrayToCsvString(data),
     download: `${fileName}.csv`,
-    className: classNames(styles$q.csvlink, className),
+    className: classNames(styles$r.csvlink, className),
     target: "_self",
     children: /* @__PURE__ */ jsx(laFileDownload, {})
   });
@@ -94484,22 +94470,22 @@ const MetricCard = ({
   };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$r.cardContainer,
+      className: styles$s.cardContainer,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: styles$r.listHeader,
+        className: styles$s.listHeader,
         children: [/* @__PURE__ */ jsx(Text, {
           variant: "h1",
           styleClass: "primary",
-          className: styles$r.metricName,
+          className: styles$s.metricName,
           children: metricItem.name
         }), /* @__PURE__ */ jsxs("span", {
-          className: styles$r.info,
+          className: styles$s.info,
           children: [/* @__PURE__ */ jsx(akarIconsInfo, {}), /* @__PURE__ */ jsx("span", {
-            className: styles$r.infoTooltip,
+            className: styles$s.infoTooltip,
             children: metricItem.description || metricItem.name
           })]
         }), /* @__PURE__ */ jsx(Button, {
-          className: styles$r.fullScreen,
+          className: styles$s.fullScreen,
           type: "button",
           variant: "secondary",
           onClick: () => onMaximize({
@@ -94521,12 +94507,12 @@ const MetricCard = ({
           children: /* @__PURE__ */ jsx(ggMinimize, {})
         })]
       }), chartType2 && /* @__PURE__ */ jsxs("div", {
-        className: styles$r.metricData,
+        className: styles$s.metricData,
         children: [!isQueryLoading && !dataDb.length ? /* @__PURE__ */ jsx("div", {
-          className: styles$r.noData,
+          className: styles$s.noData,
           children: "No Data Available"
         }) : null, isQueryLoading && /* @__PURE__ */ jsx("div", {
-          className: styles$r.loading,
+          className: styles$s.loading,
           children: /* @__PURE__ */ jsx(eosIconsLoading, {
             style: {
               width: "50px",
@@ -94538,7 +94524,7 @@ const MetricCard = ({
           children: [/* @__PURE__ */ jsx(CsvDownloadButton$1, {
             data: dataDb,
             fileName: metricItem.name,
-            className: styles$r.csvBtn
+            className: styles$s.csvBtn
           }), /* @__PURE__ */ jsx(MetricChart, {
             labels: labels2,
             data: {
@@ -94628,23 +94614,23 @@ const SingleValueCard = ({
   }, [singleValueData2, valueLength]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$r.cardContainer,
+      className: styles$s.cardContainer,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: styles$r.listHeader,
+        className: styles$s.listHeader,
         children: [/* @__PURE__ */ jsx(Text, {
           variant: "h1",
           styleClass: "primary",
-          className: styles$r.metricName,
+          className: styles$s.metricName,
           children: metricItem.name
         }), /* @__PURE__ */ jsxs("span", {
-          className: styles$r.info,
+          className: styles$s.info,
           children: [/* @__PURE__ */ jsx(akarIconsInfo, {}), /* @__PURE__ */ jsx("span", {
-            className: styles$r.infoTooltip,
+            className: styles$s.infoTooltip,
             children: metricItem.description || metricItem.name
           })]
         })]
       }), chartType2 && /* @__PURE__ */ jsx("div", {
-        className: `${styles$r.metricData} ${styles$r.singleValueData}`,
+        className: `${styles$s.metricData} ${styles$s.singleValueData}`,
         children: isQueryLoading ? /* @__PURE__ */ jsx(eosIconsLoading, {
           style: {
             width: "50px",
@@ -94655,7 +94641,7 @@ const SingleValueCard = ({
           children: singleValueData2.length ? /* @__PURE__ */ jsx(Text, {
             styleClass: "font-14c",
             variant: "p",
-            className: styles$r.singleValue,
+            className: styles$s.singleValue,
             children: valueLength > 3 ? convertedValue : singleValueData2[0]
           }) : "No Data Available"
         })
@@ -94693,7 +94679,7 @@ const ExternalMetricList = ({
   return /* @__PURE__ */ jsx(Fragment, {
     children: metricsList.length ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        className: styles$w["MetricList-container"],
+        className: styles$x["MetricList-container"],
         children: /* @__PURE__ */ jsx(GridLayout, {
           layouts: {
             lg: metricsList.map(({
@@ -94730,7 +94716,7 @@ const ExternalMetricList = ({
             xxs: 2
           },
           children: metricsList.map((metricItem) => /* @__PURE__ */ jsx("div", {
-            className: styles$w["MetricList-wrapper"],
+            className: styles$x["MetricList-wrapper"],
             children: metricItem.chartOptions.chartType === "single value" ? /* @__PURE__ */ jsx(SingleValueCard, {
               metricItem,
               client,
@@ -94756,9 +94742,9 @@ const ExternalMetricList = ({
       })]
     }) : /* @__PURE__ */ jsx(Fragment, {
       children: !isMetricListLoading ? /* @__PURE__ */ jsx("div", {
-        className: styles$w["noMetric-container"],
+        className: styles$x["noMetric-container"],
         children: /* @__PURE__ */ jsx("div", {
-          className: styles$w["noMetric-wrapper"],
+          className: styles$x["noMetric-wrapper"],
           children: /* @__PURE__ */ jsx(Text, {
             variant: "h2",
             styleClass: "primary",
@@ -94766,7 +94752,7 @@ const ExternalMetricList = ({
           })
         })
       }) : /* @__PURE__ */ jsx("div", {
-        className: styles$w["alt-container"],
+        className: styles$x["alt-container"],
         children: /* @__PURE__ */ jsx(eosIconsLoading, {
           style: {
             width: "50px",
@@ -94779,7 +94765,7 @@ const ExternalMetricList = ({
   });
 };
 var ExternalMetricList$1 = React__default.memo(ExternalMetricList);
-var styles$p = {
+var styles$q = {
   "header-container": "_header-container_2cp30_1",
   "btn-container": "_btn-container_2cp30_5",
   "back-btn": "_back-btn_2cp30_9",
@@ -94837,15 +94823,15 @@ const Header = ({
   setShowSqlModal
 }) => {
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$p["header-container"],
+    className: styles$q["header-container"],
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$p["btn-container"],
+      className: styles$q["btn-container"],
       children: [/* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "custom",
         size: "default",
         onClick: () => setShowMetricCreateModal(false),
-        className: styles$p["back-btn"],
+        className: styles$q["back-btn"],
         children: /* @__PURE__ */ jsx(akarIconsArrowLeft, {})
       }), /* @__PURE__ */ jsx(Text, {
         variant: "h1",
@@ -94853,18 +94839,18 @@ const Header = ({
         children: Heading
       })]
     }), /* @__PURE__ */ jsxs("div", {
-      className: styles$p["btn-container"],
+      className: styles$q["btn-container"],
       children: [/* @__PURE__ */ jsxs(Button, {
         type: "button",
         variant: "custom",
-        className: styles$p["sql-btn"],
+        className: styles$q["sql-btn"],
         onClick: () => setShowSqlModal(true),
         isDisabled: isDisableSqlBtn,
         children: [/* @__PURE__ */ jsx(materialSymbolsCode, {}), "SQL"]
       }), /* @__PURE__ */ jsxs(Button, {
         type: "submit",
         variant: "primary",
-        className: styles$p["save-btn"],
+        className: styles$q["save-btn"],
         isDisabled: isDisableSaveBtn,
         onClick: () => setShowSaveMetricModal(true),
         children: [/* @__PURE__ */ jsx(lucideSave, {}), "Save to Dashboard"]
@@ -94872,7 +94858,7 @@ const Header = ({
     })]
   });
 };
-var styles$o = {
+var styles$p = {
   "create-btn": "_create-btn_fy7jc_1",
   "modal-container": "_modal-container_fy7jc_5",
   "query-modal": "_query-modal_fy7jc_9"
@@ -94881,7 +94867,7 @@ const container$d = "_container_hveoi_1";
 const header$3 = "_header_hveoi_5";
 const wrapper$3 = "_wrapper_hveoi_9";
 const column = "_column_hveoi_17";
-var styles$n = {
+var styles$o = {
   container: container$d,
   header: header$3,
   wrapper: wrapper$3,
@@ -94901,7 +94887,7 @@ const text$1 = "_text_1h5ex_37";
 const floatingText = "_floatingText_1h5ex_41";
 const search = "_search_1h5ex_45";
 const loadMore$1 = "_loadMore_1h5ex_49";
-var styles$m = {
+var styles$n = {
   container: container$c,
   wrapper: wrapper$2,
   label: label$3,
@@ -96381,7 +96367,7 @@ function useForm(props = {}) {
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
-var styles$l = {
+var styles$m = {
   "searchTab-container": "_searchTab-container_10vte_1",
   "searchTab-input": "_searchTab-input_10vte_5"
 };
@@ -96398,13 +96384,13 @@ const SearchTab = ({
     setSearchKeyword(keyword == null ? void 0 : keyword.toLowerCase());
   }, [setSearchKeyword, watch, keyword]);
   return /* @__PURE__ */ jsx("div", {
-    className: `${styles$l["searchTab-container"]} ${className}`,
+    className: `${styles$m["searchTab-container"]} ${className}`,
     children: /* @__PURE__ */ jsx("form", {
-      className: styles$l["searchTab-wrapper"],
+      className: styles$m["searchTab-wrapper"],
       children: /* @__PURE__ */ jsx("input", {
         placeholder: "Search here...",
         ...register2("searchKeyword"),
-        className: styles$l["searchTab-input"]
+        className: styles$m["searchTab-input"]
       })
     })
   });
@@ -96476,40 +96462,40 @@ const FloatingDropDown = ({
     onOutsideClick: () => setIsShow(false)
   });
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames(styles$m.container, className),
+    className: classNames(styles$n.container, className),
     ref: wrapperRef,
     children: [label2 ? /* @__PURE__ */ jsx(Text, {
       variant: "span",
       styleClass: labelVariant === "floating" ? "custom" : "font-14",
-      className: `${styles$m.label} ${labelVariant === "floating" ? styles$m.floatingLabel : ""}`,
+      className: `${styles$n.label} ${labelVariant === "floating" ? styles$n.floatingLabel : ""}`,
       children: label2
     }) : null, /* @__PURE__ */ jsxs(Button, {
       type: "button",
       variant: "custom",
       isDisabled,
-      className: styles$m.wrapper,
+      className: styles$n.wrapper,
       onClick: () => setIsShow(!isShow),
       children: [/* @__PURE__ */ jsxs(Text, {
         variant: "p",
         styleClass: "font-14",
-        className: `${styles$m.text} ${labelVariant === "floating" ? styles$m.floatingText : ""}`,
+        className: `${styles$n.text} ${labelVariant === "floating" ? styles$n.floatingText : ""}`,
         children: [Icon && /* @__PURE__ */ jsx(Icon, {
-          className: styles$m.icon
+          className: styles$n.icon
         }), selectedOption.label || "Select An Option"]
       }), /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})]
     }), isShow && !isDisabled && /* @__PURE__ */ jsxs("div", {
-      className: styles$m.dropdown,
+      className: styles$n.dropdown,
       children: [isSearchEnabled && /* @__PURE__ */ jsx(SearchTab, {
-        className: styles$m.search,
+        className: styles$n.search,
         setSearchKeyword
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$m.options,
+        className: styles$n.options,
         children: [(searchKeyword ? options2.filter((opt) => opt.label.toLowerCase().includes(searchKeyword)) : options2.slice(0, limit)).map((option2) => {
           const isSelected = option2.value === selectedOption.value;
           return /* @__PURE__ */ jsx(Button, {
             type: "button",
             variant: "custom",
-            className: isSelected ? styles$m.checkedOption : styles$m.option,
+            className: isSelected ? styles$n.checkedOption : styles$n.option,
             onClick: () => {
               onChange(option2);
               setIsShow(false);
@@ -96520,7 +96506,7 @@ const FloatingDropDown = ({
           variant: "secondary",
           type: "button",
           onClick: () => setLimit((prev) => prev + 20),
-          className: styles$m.loadMore,
+          className: styles$n.loadMore,
           children: "Load More"
         })]
       }), children2]
@@ -96547,18 +96533,18 @@ const MultiFloatingDropDown = React__default.memo(({
     onOutsideClick: () => setIsShow(false)
   });
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames(styles$m.container, className),
+    className: classNames(styles$n.container, className),
     ref: wrapperRef,
     children: [label2 ? /* @__PURE__ */ jsx(Text, {
       variant: "span",
       styleClass: labelVariant === "floating" ? "custom" : "font-14",
-      className: `${styles$m.label} ${labelVariant === "floating" ? "absolute left-2 top-1 text-xs" : ""}`,
+      className: `${styles$n.label} ${labelVariant === "floating" ? "absolute left-2 top-1 text-xs" : ""}`,
       children: label2
     }) : null, /* @__PURE__ */ jsxs(Button, {
       type: "button",
       variant: "custom",
       isDisabled,
-      className: styles$m.wrapper,
+      className: styles$n.wrapper,
       onClick: () => setIsShow(!isShow),
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "p",
@@ -96567,18 +96553,18 @@ const MultiFloatingDropDown = React__default.memo(({
         children: "Select 1 or more option"
       }), /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})]
     }), isShow && !isDisabled && /* @__PURE__ */ jsxs("div", {
-      className: styles$m.dropdown,
+      className: styles$n.dropdown,
       children: [isSearchEnabled && /* @__PURE__ */ jsx(SearchTab, {
         className: "p-2 mb-3",
         setSearchKeyword
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$m.options,
+        className: styles$n.options,
         children: [(searchKeyword ? options2.filter((opt) => opt.label.toLowerCase().includes(searchKeyword)) : options2.slice(0, limit)).map((option2) => {
           const isSelected = !!selectedOptions.find((opt) => opt.value === option2.value);
           return /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "custom",
-            className: isSelected ? styles$m.checkedOption : styles$m.option,
+            className: isSelected ? styles$n.checkedOption : styles$n.option,
             onClick: () => {
               const updatedOptions = isSelected ? selectedOptions.filter((opt) => opt.value !== option2.value) : [...selectedOptions, option2];
               onChange(updatedOptions);
@@ -96829,9 +96815,9 @@ const Dataset = ({
   columnList
 }) => {
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$n.container,
+    className: styles$o.container,
     children: [/* @__PURE__ */ jsx("div", {
-      className: styles$n.header,
+      className: styles$o.header,
       children: /* @__PURE__ */ jsx(FloatingDropDown$1, {
         onChange: setselectTable,
         selectedOption: selectTable,
@@ -96840,18 +96826,18 @@ const Dataset = ({
         labelVariant: "static"
       })
     }), /* @__PURE__ */ jsxs("div", {
-      className: styles$n.wrapper,
+      className: styles$o.wrapper,
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "h1",
         styleClass: "primary",
         children: "Columns"
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$n["col-container"],
+        className: styles$o["col-container"],
         children: columnList.map(({
           name,
           datatype
         }) => /* @__PURE__ */ jsxs("div", {
-          className: styles$n.column,
+          className: styles$o.column,
           children: [/* @__PURE__ */ jsx(DataType$1, {
             datatype
           }), /* @__PURE__ */ jsx(Text, {
@@ -96877,7 +96863,7 @@ const select = "_select_rnpgp_43";
 const series = "_series_rnpgp_55";
 const seriesWrapper = "_seriesWrapper_rnpgp_61";
 const valueLabelWrapper = "_valueLabelWrapper_rnpgp_67";
-var styles$k = {
+var styles$l = {
   container: container$b,
   header: header$2,
   headerText,
@@ -96892,11 +96878,11 @@ var styles$k = {
   valueLabelWrapper
 };
 const tab = "_tab_1afsd_1";
-const button$4 = "_button_1afsd_7";
+const button$5 = "_button_1afsd_7";
 const activeTab = "_activeTab_1afsd_15";
-var styles$j = {
+var styles$k = {
   tab,
-  button: button$4,
+  button: button$5,
   activeTab
 };
 const Tab = ({
@@ -96905,11 +96891,11 @@ const Tab = ({
   setActiveTab
 }) => {
   return /* @__PURE__ */ jsx("div", {
-    className: styles$j.tab,
+    className: styles$k.tab,
     children: options2.map((option2) => /* @__PURE__ */ jsx(Button, {
       variant: "custom",
       type: "button",
-      className: `${styles$j.button} ${activeTab2 === option2 && styles$j.activeTab}`,
+      className: `${styles$k.button} ${activeTab2 === option2 && styles$k.activeTab}`,
       onClick: () => setActiveTab(option2),
       children: option2
     }))
@@ -96919,7 +96905,7 @@ const label$2 = "_label_qyktv_1";
 const checkboxLabel = "_checkboxLabel_qyktv_13";
 const input$1 = "_input_qyktv_7";
 const checkboxField = "_checkboxField_qyktv_25";
-var styles$i = {
+var styles$j = {
   label: label$2,
   "inputField-container": "_inputField-container_qyktv_7",
   checkboxLabel,
@@ -96927,7 +96913,7 @@ var styles$i = {
   checkboxField
 };
 const error$3 = "_error_1oskr_1";
-var styles$h = {
+var styles$i = {
   error: error$3
 };
 const Error$1 = ({
@@ -96936,7 +96922,7 @@ const Error$1 = ({
   return /* @__PURE__ */ jsx(Text, {
     variant: "p",
     styleClass: "custom",
-    className: styles$h.error,
+    className: styles$i.error,
     children: message
   });
 };
@@ -96962,7 +96948,7 @@ const InputField = ({
   className
 }) => {
   return type3 === "checkbox" ? /* @__PURE__ */ jsxs("div", {
-    className: `${styles$i.checkboxField} ${className != null ? className : ""}`,
+    className: `${styles$j.checkboxField} ${className != null ? className : ""}`,
     children: [/* @__PURE__ */ jsx("input", {
       type: "checkbox",
       name,
@@ -96974,17 +96960,17 @@ const InputField = ({
       disabled: isDisabled
     }), label2 ? /* @__PURE__ */ jsxs("label", {
       htmlFor: label2,
-      className: `${styles$i.checkboxLabel} ${labelClass}`,
+      className: `${styles$j.checkboxLabel} ${labelClass}`,
       children: [icon2, " ", label2]
     }) : null]
   }) : /* @__PURE__ */ jsxs("div", {
-    className: `${styles$i["inputField-container"]} ${className != null ? className : ""}`,
+    className: `${styles$j["inputField-container"]} ${className != null ? className : ""}`,
     children: [label2 ? /* @__PURE__ */ jsx("label", {
       htmlFor: label2,
-      className: `${styles$i.label} ${labelClass}`,
+      className: `${styles$j.label} ${labelClass}`,
       children: label2
     }) : null, /* @__PURE__ */ jsxs("div", {
-      className: styles$i.inputWrapper,
+      className: styles$j.inputWrapper,
       children: [/* @__PURE__ */ jsx("input", {
         id: id2,
         value,
@@ -96994,7 +96980,7 @@ const InputField = ({
         onBlur,
         onChange,
         onKeyDown,
-        className: `${styles$i.input} ${inputClass}`,
+        className: `${styles$j.input} ${inputClass}`,
         placeholder,
         defaultValue,
         ...register2,
@@ -98209,16 +98195,16 @@ const ChartConfigure = ({
   const TabList = ["margins", "legend", "series"];
   const [activeTab2, setActiveTab] = useState("margins");
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$k.container,
+    className: styles$l.container,
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$k.header,
+      className: styles$l.header,
       children: [/* @__PURE__ */ jsxs(Text, {
         styleClass: "font-14c",
         variant: "h1",
-        className: styles$k.headerText,
+        className: styles$l.headerText,
         children: [/* @__PURE__ */ jsx(grommetIconsConfigure, {}), "Chart Configure"]
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$k.crossIcon,
+        className: styles$l.crossIcon,
         children: /* @__PURE__ */ jsx(akarIconsCross, {
           onClick: () => setConfigureShow(false)
         })
@@ -98228,11 +98214,11 @@ const ChartConfigure = ({
       activeTab: activeTab2,
       setActiveTab
     }), /* @__PURE__ */ jsxs("form", {
-      className: styles$k.form,
+      className: styles$l.form,
       children: [activeTab2 === "margins" && /* @__PURE__ */ jsxs("div", {
-        className: styles$k.inputWrapper,
+        className: styles$l.inputWrapper,
         children: [/* @__PURE__ */ jsx("div", {
-          className: styles$k.input,
+          className: styles$l.input,
           children: /* @__PURE__ */ jsx(InputField, {
             type: "number",
             label: "Top",
@@ -98243,7 +98229,7 @@ const ChartConfigure = ({
             defaultValue: margins.marginTop
           })
         }), /* @__PURE__ */ jsx("div", {
-          className: styles$k.input,
+          className: styles$l.input,
           children: /* @__PURE__ */ jsx(InputField, {
             type: "number",
             label: "Bottom",
@@ -98254,7 +98240,7 @@ const ChartConfigure = ({
             defaultValue: margins.marginBottom
           })
         }), /* @__PURE__ */ jsx("div", {
-          className: styles$k.input,
+          className: styles$l.input,
           children: /* @__PURE__ */ jsx(InputField, {
             type: "number",
             label: "Left",
@@ -98265,7 +98251,7 @@ const ChartConfigure = ({
             }))
           })
         }), /* @__PURE__ */ jsx("div", {
-          className: styles$k.input,
+          className: styles$l.input,
           children: /* @__PURE__ */ jsx(InputField, {
             type: "number",
             label: "Right",
@@ -98292,9 +98278,9 @@ const ChartConfigure = ({
             styleClass: "primary",
             children: "Position"
           }), /* @__PURE__ */ jsxs("div", {
-            className: styles$k.inputWrapper,
+            className: styles$l.inputWrapper,
             children: [/* @__PURE__ */ jsx("div", {
-              className: styles$k.input,
+              className: styles$l.input,
               children: /* @__PURE__ */ jsx(InputField, {
                 type: "number",
                 label: "Top",
@@ -98305,7 +98291,7 @@ const ChartConfigure = ({
                 }))
               })
             }), /* @__PURE__ */ jsx("div", {
-              className: styles$k.input,
+              className: styles$l.input,
               children: /* @__PURE__ */ jsx(InputField, {
                 type: "number",
                 label: "Bottom",
@@ -98316,7 +98302,7 @@ const ChartConfigure = ({
                 }))
               })
             }), /* @__PURE__ */ jsx("div", {
-              className: styles$k.input,
+              className: styles$l.input,
               children: /* @__PURE__ */ jsx(InputField, {
                 type: "number",
                 label: "Left",
@@ -98327,7 +98313,7 @@ const ChartConfigure = ({
                 }))
               })
             }), /* @__PURE__ */ jsx("div", {
-              className: styles$k.input,
+              className: styles$l.input,
               children: /* @__PURE__ */ jsx(InputField, {
                 type: "number",
                 label: "Right",
@@ -98340,13 +98326,13 @@ const ChartConfigure = ({
             })]
           })]
         }), /* @__PURE__ */ jsxs("div", {
-          className: styles$k.selectWrapper,
+          className: styles$l.selectWrapper,
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "h1",
             styleClass: "primary",
             children: "Appearance"
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$k.select,
+            className: styles$l.select,
             children: /* @__PURE__ */ jsx(Select, {
               value: legendSettings.position,
               options: [{
@@ -98364,15 +98350,15 @@ const ChartConfigure = ({
           })]
         })]
       }), activeTab2 === "series" && /* @__PURE__ */ jsxs("div", {
-        className: styles$k.series,
+        className: styles$l.series,
         children: [/* @__PURE__ */ jsxs("div", {
-          className: styles$k.seriesWrapper,
+          className: styles$l.seriesWrapper,
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "h1",
             styleClass: "primary",
             children: "Chart Type"
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$k.select,
+            className: styles$l.select,
             children: /* @__PURE__ */ jsx(Select, {
               value: chartType2 === "bar" || chartType2 === "line" || chartType2 === "area" ? chartType2 : "",
               options: [{
@@ -98389,13 +98375,13 @@ const ChartConfigure = ({
             })
           })]
         }), /* @__PURE__ */ jsxs("div", {
-          className: styles$k.seriesWrapper,
+          className: styles$l.seriesWrapper,
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "h1",
             styleClass: "primary",
             children: "Value labels"
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$k.valueLabelWrapper,
+            className: styles$l.valueLabelWrapper,
             children: /* @__PURE__ */ jsx(Select, {
               value: labelSettings.position,
               options: [{
@@ -98429,13 +98415,13 @@ const ChartConfigure = ({
             })
           })]
         }), /* @__PURE__ */ jsxs("div", {
-          className: styles$k.seriesWrapper,
+          className: styles$l.seriesWrapper,
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "h1",
             styleClass: "primary",
             children: "Axis"
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$k.select,
+            className: styles$l.select,
             children: /* @__PURE__ */ jsx(Select, {
               value: axisSettings.axis,
               options: [{
@@ -98459,16 +98445,16 @@ const ChartConfigure = ({
 const chartButtonContainer$1 = "_chartButtonContainer_xpqpb_9";
 const chartButtons$1 = "_chartButtons_xpqpb_17";
 const chartTypesButton = "_chartTypesButton_xpqpb_25";
-const button$3 = "_button_xpqpb_33";
+const button$4 = "_button_xpqpb_33";
 const propertyButton = "_propertyButton_xpqpb_41";
 const settings = "_settings_xpqpb_49";
 const crossIcon = "_crossIcon_xpqpb_57";
-var styles$g = {
+var styles$h = {
   "chartButton-header": "_chartButton-header_xpqpb_1",
   chartButtonContainer: chartButtonContainer$1,
   chartButtons: chartButtons$1,
   chartTypesButton,
-  button: button$3,
+  button: button$4,
   propertyButton,
   settings,
   crossIcon
@@ -98501,7 +98487,7 @@ const plus = "_plus_jdb8o_61";
 const plusIcon = "_plusIcon_jdb8o_67";
 const form$2 = "_form_jdb8o_73";
 const chartType = "_chartType_jdb8o_79";
-var styles$f = {
+var styles$g = {
   chartOptions,
   chartOption,
   chartOptionBtn,
@@ -98589,12 +98575,12 @@ const ChartConfig = ({
   };
   if (chartType2 === SANKEY) {
     return /* @__PURE__ */ jsxs("div", {
-      className: styles$f.container,
+      className: styles$g.container,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: styles$f.field,
+        className: styles$g.field,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$f.fieldText,
+          className: styles$g.fieldText,
           variant: "h4",
           children: "Source"
         }), /* @__PURE__ */ jsx(Select, {
@@ -98604,10 +98590,10 @@ const ChartConfig = ({
           value: source
         })]
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$f.field,
+        className: styles$g.field,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$f.fieldText,
+          className: styles$g.fieldText,
           variant: "h4",
           children: "Target"
         }), /* @__PURE__ */ jsx(Select, {
@@ -98619,7 +98605,7 @@ const ChartConfig = ({
       }), /* @__PURE__ */ jsxs("div", {
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$f.fieldText,
+          className: styles$g.fieldText,
           variant: "h4",
           children: "Value"
         }), /* @__PURE__ */ jsx(Select, {
@@ -98632,7 +98618,7 @@ const ChartConfig = ({
         type: "submit",
         variant: "primary",
         size: "default",
-        className: styles$f.doneBtn,
+        className: styles$g.doneBtn,
         onClick: () => {
           onSubmitSnakeyValues();
           setSettingsShow(false);
@@ -98644,10 +98630,10 @@ const ChartConfig = ({
   if (chartType2 === DOUGHNUT) {
     return /* @__PURE__ */ jsx(Fragment, {
       children: !!(chartType2 === DOUGHNUT || PIE) && /* @__PURE__ */ jsxs("div", {
-        className: styles$f.container,
+        className: styles$g.container,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$f.field,
+          className: styles$g.field,
           variant: "h4",
           children: "Dimension"
         }), /* @__PURE__ */ jsx(Select, {
@@ -98657,18 +98643,18 @@ const ChartConfig = ({
           value: xAxis
         }), /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$f.measureText,
+          className: styles$g.measureText,
           variant: "h4",
           children: "Measure"
         }), /* @__PURE__ */ jsx("div", {
-          className: styles$f.plus,
+          className: styles$g.plus,
           children: /* @__PURE__ */ jsx(akarIconsCirclePlus, {
-            className: `${styles$f.plusIcon} ${showAddButton}`,
+            className: `${styles$g.plusIcon} ${showAddButton}`,
             onClick: () => addSelectField()
           })
         }), /* @__PURE__ */ jsxs("form", {
           onSubmit: handleSubmit(onSubmitOptions),
-          className: styles$f.form,
+          className: styles$g.form,
           children: [selectField.map((field2) => /* @__PURE__ */ jsx(SelectField, {
             value: field2.value,
             options: options2,
@@ -98677,7 +98663,7 @@ const ChartConfig = ({
             type: "submit",
             variant: "primary",
             size: "default",
-            className: styles$f.doneBtn,
+            className: styles$g.doneBtn,
             children: "Done"
           })]
         })]
@@ -98687,10 +98673,10 @@ const ChartConfig = ({
   if (chartType2 === PIE) {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: ["(", /* @__PURE__ */ jsxs("div", {
-        className: styles$f.container,
+        className: styles$g.container,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$f.field,
+          className: styles$g.field,
           variant: "h4",
           children: "Dimension"
         }), /* @__PURE__ */ jsx(Select, {
@@ -98700,18 +98686,18 @@ const ChartConfig = ({
           value: xAxis
         }), /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$f.measureText,
+          className: styles$g.measureText,
           variant: "h4",
           children: "Measure"
         }), /* @__PURE__ */ jsx("div", {
-          className: styles$f.plus,
+          className: styles$g.plus,
           children: /* @__PURE__ */ jsx(akarIconsCirclePlus, {
-            className: `${styles$f.plusIcon} ${showAddButton}`,
+            className: `${styles$g.plusIcon} ${showAddButton}`,
             onClick: () => addSelectField()
           })
         }), /* @__PURE__ */ jsxs("form", {
           onSubmit: handleSubmit(onSubmitOptions),
-          className: styles$f.form,
+          className: styles$g.form,
           children: [selectField.map((field2) => /* @__PURE__ */ jsx(SelectField, {
             value: field2.value,
             options: options2,
@@ -98720,7 +98706,7 @@ const ChartConfig = ({
             type: "submit",
             variant: "primary",
             size: "default",
-            className: styles$f.doneBtn,
+            className: styles$g.doneBtn,
             children: "Done"
           })]
         })]
@@ -98731,7 +98717,7 @@ const ChartConfig = ({
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(Text, {
         styleClass: "font-14",
-        className: `${styles$f.singleValueMeasure}`,
+        className: `${styles$g.singleValueMeasure}`,
         variant: "h4",
         children: "Measure"
       }), /* @__PURE__ */ jsx(Select, {
@@ -98743,7 +98729,7 @@ const ChartConfig = ({
         type: "button",
         variant: "primary",
         size: "default",
-        className: styles$f.doneBtn,
+        className: styles$g.doneBtn,
         onClick: () => setSettingsShow(false),
         children: "Done"
       })]
@@ -98751,11 +98737,11 @@ const ChartConfig = ({
   }
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$f.container,
+      className: styles$g.container,
       children: [chartType2 !== "gauge" && chartType2 !== BOXPLOT && chartType2 !== "table" && /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsxs(Text, {
           styleClass: "font-14",
-          className: styles$f.field,
+          className: styles$g.field,
           variant: "h4",
           children: [chartType2 !== "funnel" && chartType2 !== "row" && "X-axis", chartType2 === "funnel" && "Step", chartType2 === "row" && "Y-axis"]
         }), chartType2 === "funnel" ? /* @__PURE__ */ jsx(Select, {
@@ -98770,20 +98756,20 @@ const ChartConfig = ({
           value: xAxis
         })]
       }), /* @__PURE__ */ jsxs("div", {
-        className: `${styles$f.chartType}
-            ${chartType2 !== "gauge" ? styles$f.measureText : ""}`,
+        className: `${styles$g.chartType}
+            ${chartType2 !== "gauge" ? styles$g.measureText : ""}`,
         children: [/* @__PURE__ */ jsxs(Text, {
           styleClass: "font-14",
           variant: "h1",
-          className: styles$f.field,
+          className: styles$g.field,
           children: [chartType2 !== "funnel" && chartType2 !== "gauge" && chartType2 !== "row" && chartType2 !== "boxplot" && chartType2 !== "table" && "Y-axis", (chartType2 === "funnel" || chartType2 === "gauge" || chartType2 === "boxplot" || chartType2 === "table") && "Measure", chartType2 === "row" && "X-axis"]
         }), chartType2 !== "funnel" && chartType2 !== "gauge" && /* @__PURE__ */ jsx(akarIconsCirclePlus, {
-          className: `${styles$f.plusIcon} ${showAddButton}`,
+          className: `${styles$g.plusIcon} ${showAddButton}`,
           onClick: () => addSelectField()
         })]
       }), /* @__PURE__ */ jsxs("form", {
         onSubmit: handleSubmit(onSubmitOptions),
-        className: styles$f.form,
+        className: styles$g.form,
         children: [chartType2 === "funnel" || chartType2 === "gauge" ? /* @__PURE__ */ jsx(Select, {
           label: "",
           options: options2,
@@ -98797,7 +98783,7 @@ const ChartConfig = ({
           type: "submit",
           variant: "primary",
           size: "default",
-          className: styles$f.doneBtn,
+          className: styles$g.doneBtn,
           children: "Done"
         })]
       })]
@@ -99089,13 +99075,13 @@ const ChartModalOptions = ({
     icon: materialSymbolsBackupTable
   }];
   return /* @__PURE__ */ jsx("div", {
-    className: styles$f.chartOptions,
+    className: styles$g.chartOptions,
     children: chartOptions2.map((option2) => /* @__PURE__ */ jsxs("div", {
-      className: styles$f.chartOption,
+      className: styles$g.chartOption,
       children: [/* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "custom",
-        className: styles$f.chartOptionBtn,
+        className: styles$g.chartOptionBtn,
         onClick: () => {
           setChartType(option2.name.toLowerCase());
         },
@@ -99109,7 +99095,7 @@ const ChartModalOptions = ({
       }, option2.name), /* @__PURE__ */ jsx(Text, {
         variant: "p",
         styleClass: "tertiary",
-        className: styles$f.chartOptionText,
+        className: styles$g.chartOptionText,
         children: option2.name
       })]
     }, option2.name))
@@ -99144,27 +99130,27 @@ const ChartSettings = ({
   const [isShowChartOptions, setShowChartOptions] = useState(true);
   const [isShowChartProperties, setShowChartProperties] = useState(true);
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$g.chartButtonContainer,
+    className: styles$h.chartButtonContainer,
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$g["chartButton-header"],
+      className: styles$h["chartButton-header"],
       children: [/* @__PURE__ */ jsxs(Text, {
         styleClass: "font-14c",
         variant: "h1",
-        className: styles$g.settings,
+        className: styles$h.settings,
         children: [/* @__PURE__ */ jsx(mdiMixerSettingsVertical, {}), "Chart Settings"]
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$g.crossIcon,
+        className: styles$h.crossIcon,
         children: /* @__PURE__ */ jsx(akarIconsCross, {
           onClick: () => setSettingsShow(false)
         })
       })]
     }), /* @__PURE__ */ jsxs("div", {
-      className: styles$g.chartButtons,
+      className: styles$h.chartButtons,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: `${styles$g.button} ${styles$g.chartTypesButton}`,
+        className: `${styles$h.button} ${styles$h.chartTypesButton}`,
         children: [/* @__PURE__ */ jsxs(Button, {
           type: "button",
-          className: styles$g.propertyButton,
+          className: styles$h.propertyButton,
           variant: "secondary",
           onClick: () => setShowChartOptions((p2) => !p2),
           children: ["Chart Types", /* @__PURE__ */ jsx(mdiChevronDown, {})]
@@ -99172,11 +99158,11 @@ const ChartSettings = ({
           setChartType
         })]
       }), chartType2 && /* @__PURE__ */ jsxs("div", {
-        className: styles$g.button,
+        className: styles$h.button,
         children: [/* @__PURE__ */ jsxs(Button, {
           type: "button",
           variant: "secondary",
-          className: styles$g.propertyButton,
+          className: styles$h.propertyButton,
           onClick: () => setShowChartProperties((p2) => !p2),
           children: ["Chart Properties", /* @__PURE__ */ jsx(mdiChevronDown, {})]
         }), isShowChartProperties && /* @__PURE__ */ jsx(ChartConfig$1, {
@@ -99213,7 +99199,7 @@ const chartSettings = "_chartSettings_g94x7_137";
 const labels = "_labels_g94x7_145";
 const chartButtons = "_chartButtons_g94x7_153";
 const chartButton = "_chartButton_g94x7_97";
-var styles$e = {
+var styles$f = {
   "outputTab-header": "_outputTab-header_g94x7_1",
   searchCommand: searchCommand$1,
   "chartTab-container": "_chartTab-container_g94x7_17",
@@ -99294,9 +99280,9 @@ const ChartTab = ({
   const [isConfigureShow, setConfigureShow] = useState(false);
   const [isShowFullScreen, setShowFullScreen] = useState(false);
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$e["chartTab-container"],
+    className: styles$f["chartTab-container"],
     children: [!(data == null ? void 0 : data.length) && isLoading && /* @__PURE__ */ jsx("div", {
-      className: styles$e["loader-container"],
+      className: styles$f["loader-container"],
       children: /* @__PURE__ */ jsx(eosIconsLoading, {
         style: {
           width: "50px",
@@ -99305,21 +99291,21 @@ const ChartTab = ({
         }
       })
     }), !(data == null ? void 0 : data.length) && !isLoading && /* @__PURE__ */ jsxs("div", {
-      className: styles$e.metricChartEmpty,
+      className: styles$f.metricChartEmpty,
       children: [/* @__PURE__ */ jsx("div", {
-        className: styles$e.searchWrapper,
+        className: styles$f.searchWrapper,
         children: /* @__PURE__ */ jsx(akarIconsSearch, {
-          className: styles$e.searchIcon
+          className: styles$f.searchIcon
         })
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$e.message,
+        className: styles$f.message,
         children: /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14b",
           variant: "p",
           children: "Uh-oh, Nothing to display"
         })
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$e.chartButton,
+        className: styles$f.chartButton,
         children: /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14a",
           variant: "p",
@@ -99327,33 +99313,33 @@ const ChartTab = ({
         })
       })]
     }), !!(data == null ? void 0 : data.length) && !isLoading && /* @__PURE__ */ jsxs("div", {
-      className: styles$e.metricChart,
+      className: styles$f.metricChart,
       children: [/* @__PURE__ */ jsx(Text, {
         styleClass: "primary",
         variant: "p",
         className: "",
         children: "Preview"
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$e["chartTab-wrapper"],
+        className: styles$f["chartTab-wrapper"],
         children: [/* @__PURE__ */ jsxs("div", {
-          className: styles$e["chartTab-wrapper-head"],
+          className: styles$f["chartTab-wrapper-head"],
           children: [/* @__PURE__ */ jsx(Text, {
             styleClass: "primary",
             variant: "p",
             className: "",
             children: "Charts"
           }), /* @__PURE__ */ jsxs("div", {
-            className: styles$e.chartButtons,
+            className: styles$f.chartButtons,
             children: [/* @__PURE__ */ jsx(Button, {
               type: "button",
               variant: "custom",
-              className: (labels2 == null ? void 0 : labels2.length) ? styles$e.sqlfullQuery : styles$e.noQuery,
+              className: (labels2 == null ? void 0 : labels2.length) ? styles$f.sqlfullQuery : styles$f.noQuery,
               onClick: (labels2 == null ? void 0 : labels2.length) ? () => setShowFullScreen(true) : void 0,
               children: /* @__PURE__ */ jsx(fluentFullScreenMinimize16Filled, {})
             }), /* @__PURE__ */ jsx(Button, {
               type: "button",
               variant: "custom",
-              className: styles$e.chartButton,
+              className: styles$f.chartButton,
               onClick: () => {
                 setConfigureShow(false);
                 setSettingsShow(!isSettingsShow);
@@ -99362,7 +99348,7 @@ const ChartTab = ({
             }), /* @__PURE__ */ jsx(Button, {
               type: "button",
               variant: "custom",
-              className: styles$e.chartButton,
+              className: styles$f.chartButton,
               onClick: () => {
                 setSettingsShow(false);
                 setConfigureShow(!isConfigureShow);
@@ -99371,9 +99357,9 @@ const ChartTab = ({
             })]
           })]
         }), (labels2 == null ? void 0 : labels2.length) ? /* @__PURE__ */ jsxs("div", {
-          className: styles$e.labels,
+          className: styles$f.labels,
           children: [isSettingsShow && /* @__PURE__ */ jsx("div", {
-            className: styles$e.chartSettings,
+            className: styles$f.chartSettings,
             children: /* @__PURE__ */ jsx(ChartSettings, {
               chartType: chartType2,
               setChartType,
@@ -99391,7 +99377,7 @@ const ChartTab = ({
               setSettingsShow
             })
           }), isConfigureShow && /* @__PURE__ */ jsx("div", {
-            className: styles$e.chartConfigure,
+            className: styles$f.chartConfigure,
             children: /* @__PURE__ */ jsx(ChartConfigure, {
               setMargins,
               margins,
@@ -99424,21 +99410,21 @@ const ChartTab = ({
             enableSaveAs: true
           })]
         }) : /* @__PURE__ */ jsxs("div", {
-          className: styles$e.metricChartEmpty,
+          className: styles$f.metricChartEmpty,
           children: [/* @__PURE__ */ jsx("div", {
-            className: styles$e.searchWrapper,
+            className: styles$f.searchWrapper,
             children: /* @__PURE__ */ jsx(akarIconsSearch, {
-              className: styles$e.searchIcon
+              className: styles$f.searchIcon
             })
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$e.message,
+            className: styles$f.message,
             children: /* @__PURE__ */ jsx(Text, {
               styleClass: "font-14b",
               variant: "p",
               children: "Uh-oh, Nothing to display"
             })
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$e.chartButton,
+            className: styles$f.chartButton,
             children: /* @__PURE__ */ jsx(Text, {
               styleClass: "font-14a",
               variant: "p",
@@ -99473,7 +99459,7 @@ const container$9 = "_container_1jc0r_1";
 const wrapper$1 = "_wrapper_1jc0r_5";
 const text = "_text_1jc0r_9";
 const table$3 = "_table_1jc0r_12";
-var styles$d = {
+var styles$e = {
   container: container$9,
   wrapper: wrapper$1,
   text,
@@ -99486,7 +99472,7 @@ const tableHeadCol$1 = "_tableHeadCol_m7ksd_25";
 const tableRowCol$1 = "_tableRowCol_m7ksd_33";
 const empty = "_empty_m7ksd_41";
 const error$2 = "_error_m7ksd_49";
-var styles$c = {
+var styles$d = {
   container: container$8,
   table: table$2,
   tableHead,
@@ -99500,15 +99486,15 @@ const MetricTable = ({
   isError
 }) => {
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$c.container,
+    className: styles$d.container,
     children: [!!(data == null ? void 0 : data.length) && !isError && /* @__PURE__ */ jsxs("table", {
-      className: styles$c.table,
+      className: styles$d.table,
       children: [/* @__PURE__ */ jsx("thead", {
-        className: styles$c.tableHead,
+        className: styles$d.tableHead,
         children: /* @__PURE__ */ jsx("tr", {
           children: Object.keys(data[0]).map((item) => {
             return /* @__PURE__ */ jsx("th", {
-              className: styles$c.tableHeadCol,
+              className: styles$d.tableHeadCol,
               scope: "col",
               children: /* @__PURE__ */ jsx(Text, {
                 styleClass: "font-14c",
@@ -99521,7 +99507,7 @@ const MetricTable = ({
       }), /* @__PURE__ */ jsx("tbody", {
         children: data == null ? void 0 : data.map((item, i2) => /* @__PURE__ */ jsx("tr", {
           children: Object.keys(data[0]).map((d2, index) => /* @__PURE__ */ jsx("td", {
-            className: styles$c.tableRowCol,
+            className: styles$d.tableRowCol,
             children: /* @__PURE__ */ jsx(Text, {
               styleClass: "font-14",
               variant: "p",
@@ -99531,10 +99517,10 @@ const MetricTable = ({
         }, i2))
       })]
     }), !(data == null ? void 0 : data.length) && !isError && /* @__PURE__ */ jsx("div", {
-      className: styles$c.empty,
+      className: styles$d.empty,
       children: "Table is empty"
     }), isError && /* @__PURE__ */ jsx("div", {
-      className: styles$c.error,
+      className: styles$d.error,
       children: data.message
     })]
   });
@@ -99543,18 +99529,18 @@ const InputTables = ({
   previewTableDataList
 }) => {
   return /* @__PURE__ */ jsx("div", {
-    className: styles$d.container,
+    className: styles$e.container,
     children: /* @__PURE__ */ jsx("div", {
-      className: styles$d.wrapper,
+      className: styles$e.wrapper,
       children: previewTableDataList == null ? void 0 : previewTableDataList.map((table2) => /* @__PURE__ */ jsxs("div", {
-        className: styles$d.text,
+        className: styles$e.text,
         children: [/* @__PURE__ */ jsx(Text, {
           variant: "h1",
           styleClass: "primary",
           className: "",
           children: table2.name
         }), /* @__PURE__ */ jsx("div", {
-          className: styles$d.table,
+          className: styles$e.table,
           children: /* @__PURE__ */ jsx(MetricTable, {
             data: table2.data,
             isError: table2.isError
@@ -99569,7 +99555,7 @@ const header$1 = "_header_1nrs1_5";
 const tabButton$1 = "_tabButton_1nrs1_16";
 const selectedTab = "_selectedTab_1nrs1_19";
 const table$1 = "_table_1nrs1_22";
-var styles$b = {
+var styles$c = {
   container: container$7,
   header: header$1,
   "text-container": "_text-container_1nrs1_9",
@@ -99592,7 +99578,7 @@ const noData = "_noData_1wybe_67";
 const error$1 = "_error_1wybe_73";
 const errorMsg = "_errorMsg_1wybe_79";
 const tableIcon = "_tableIcon_1wybe_85";
-var styles$a = {
+var styles$b = {
   "table-loader-container": "_table-loader-container_1wybe_1",
   tableData,
   tableHeadCol,
@@ -99626,21 +99612,21 @@ const Table = ({
   error: error2
 }) => {
   return /* @__PURE__ */ jsx("div", {
-    className: styles$a.container,
+    className: styles$b.container,
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$a.previewTable,
+      className: styles$b.previewTable,
       children: [/* @__PURE__ */ jsx("div", {
-        className: styles$a.preview,
+        className: styles$b.preview,
         children: /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14c",
           variant: "h1",
-          className: styles$a.previewText,
+          className: styles$b.previewText,
           children: "Preview"
         })
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$a.tableData,
+        className: styles$b.tableData,
         children: [isLoading && !(data == null ? void 0 : data.length) && /* @__PURE__ */ jsx("div", {
-          className: styles$a["table-loader-container"],
+          className: styles$b["table-loader-container"],
           children: /* @__PURE__ */ jsx(eosIconsLoading, {
             style: {
               width: "50px",
@@ -99649,13 +99635,13 @@ const Table = ({
             }
           })
         }), !!(data == null ? void 0 : data.length) && !isLoading && /* @__PURE__ */ jsxs("table", {
-          className: styles$a.table,
+          className: styles$b.table,
           children: [/* @__PURE__ */ jsx("thead", {
             children: /* @__PURE__ */ jsx("tr", {
-              className: styles$a.row,
+              className: styles$b.row,
               children: Object.keys(data[0]).map((item) => {
                 return /* @__PURE__ */ jsx("th", {
-                  className: styles$a.tableHeadCol,
+                  className: styles$b.tableHeadCol,
                   scope: "col",
                   children: /* @__PURE__ */ jsx(Text, {
                     styleClass: "font-14c",
@@ -99667,9 +99653,9 @@ const Table = ({
             })
           }), /* @__PURE__ */ jsx("tbody", {
             children: data.map((item, i2) => /* @__PURE__ */ jsx("tr", {
-              className: styles$a.tableRow,
+              className: styles$b.tableRow,
               children: Object.keys(data[0]).map((d2, index) => /* @__PURE__ */ jsx("td", {
-                className: styles$a.tableRowCol,
+                className: styles$b.tableRowCol,
                 children: /* @__PURE__ */ jsx(Text, {
                   styleClass: "font-14",
                   variant: "p",
@@ -99679,9 +99665,9 @@ const Table = ({
             }, i2))
           })]
         }), !(data == null ? void 0 : data.length) && !isLoading && !error2.length && /* @__PURE__ */ jsxs("div", {
-          className: styles$a.noData,
+          className: styles$b.noData,
           children: [/* @__PURE__ */ jsx(teenyiconsTableOutline, {
-            className: styles$a.tableIcon,
+            className: styles$b.tableIcon,
             width: "60px",
             height: "60px"
           }), /* @__PURE__ */ jsx(Text, {
@@ -99694,10 +99680,10 @@ const Table = ({
             children: "Run your query to preview data"
           })]
         }), error2 && /* @__PURE__ */ jsx("div", {
-          className: styles$a.error,
+          className: styles$b.error,
           children: /* @__PURE__ */ jsx(Text, {
             styleClass: "primary",
-            className: styles$a.errorMsg,
+            className: styles$b.errorMsg,
             variant: "p",
             children: error2
           })
@@ -99714,11 +99700,11 @@ const TableTab = ({
 }) => {
   const [selectedTab2, setSelectedTab] = useState(OUTPUT_TABLE);
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$b.container,
+    className: styles$c.container,
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$b.header,
+      className: styles$c.header,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: styles$b["text-container"],
+        className: styles$c["text-container"],
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14c",
           variant: "h1",
@@ -99729,17 +99715,17 @@ const TableTab = ({
           children: "Preview your selected table & output table values"
         })]
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$b["btn-container"],
+        className: styles$c["btn-container"],
         children: [/* @__PURE__ */ jsx(Button, {
           type: "button",
           variant: "custom",
-          className: `${styles$b.tabButton} ${selectedTab2 === INPUT_TABLE && styles$b.selectedTab}`,
+          className: `${styles$c.tabButton} ${selectedTab2 === INPUT_TABLE && styles$c.selectedTab}`,
           onClick: () => setSelectedTab(INPUT_TABLE),
           children: "Input Table"
         }), /* @__PURE__ */ jsx(Button, {
           type: "button",
           variant: "custom",
-          className: `${styles$b.tabButton} ${selectedTab2 === INPUT_TABLE && styles$b.selectedTab}`,
+          className: `${styles$c.tabButton} ${selectedTab2 === INPUT_TABLE && styles$c.selectedTab}`,
           onClick: () => setSelectedTab(OUTPUT_TABLE),
           children: "Output Table"
         })]
@@ -99747,7 +99733,7 @@ const TableTab = ({
     }), selectedTab2 === INPUT_TABLE && /* @__PURE__ */ jsx(InputTables, {
       previewTableDataList
     }), selectedTab2 === OUTPUT_TABLE && /* @__PURE__ */ jsx("div", {
-      className: styles$b.table,
+      className: styles$c.table,
       children: /* @__PURE__ */ jsx(Table, {
         data: outpuTableData,
         isLoading: isOutputLoading,
@@ -99760,7 +99746,7 @@ const wrapper = "_wrapper_k8yqf_9";
 const searchCommand = "_searchCommand_k8yqf_12";
 const tabButton = "_tabButton_k8yqf_15";
 const tabActive = "_tabActive_k8yqf_18";
-var styles$9 = {
+var styles$a = {
   "main-container": "_main-container_k8yqf_1",
   "outputTab-header": "_outputTab-header_k8yqf_5",
   wrapper,
@@ -99823,24 +99809,24 @@ const MetricOutput = ({
 }) => {
   const [selectedTab2, setSelectedTab] = useState(TABLE_TAB);
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$9["main-container"],
+    className: styles$a["main-container"],
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$9["outputTab-header"],
+      className: styles$a["outputTab-header"],
       children: [/* @__PURE__ */ jsxs(Button, {
         type: "button",
         variant: "custom",
-        className: `${styles$9.tabButton} ${selectedTab2 === TABLE_TAB && styles$9.tabActive}`,
+        className: `${styles$a.tabButton} ${selectedTab2 === TABLE_TAB && styles$a.tabActive}`,
         onClick: () => setSelectedTab(TABLE_TAB),
         children: [/* @__PURE__ */ jsx(materialSymbolsTableViewSharp, {}), " Tables"]
       }), /* @__PURE__ */ jsxs(Button, {
         type: "button",
         variant: "custom",
-        className: `${styles$9.tabButton} ${selectedTab2 === CHART_TAB && styles$9.tabActive}`,
+        className: `${styles$a.tabButton} ${selectedTab2 === CHART_TAB && styles$a.tabActive}`,
         onClick: () => setSelectedTab(CHART_TAB),
         children: [/* @__PURE__ */ jsx(phChartLineUpDuotone, {}), "Visualizations"]
       })]
     }), /* @__PURE__ */ jsxs("div", {
-      className: styles$9.wrapper,
+      className: styles$a.wrapper,
       children: [selectedTab2 === TABLE_TAB && /* @__PURE__ */ jsx(TableTab, {
         outpuTableData: data,
         isOutputLoading: isLoading,
@@ -99884,13 +99870,13 @@ const group$1 = "_group_1p48k_1";
 const tooltipWrapper = "_tooltipWrapper_1p48k_37";
 const tooltip = "_tooltip_1p48k_37";
 const dropdown = "_dropdown_1p48k_49";
-const filterDropdown = "_filterDropdown_1p48k_53";
+const filterDropdown$1 = "_filterDropdown_1p48k_53";
 const filterValues = "_filterValues_1p48k_57";
 const columnText = "_columnText_1p48k_61";
 const disabled = "_disabled_1p48k_65";
 const checkIcon = "_checkIcon_1p48k_69";
 const generateButton = "_generateButton_1p48k_73";
-var styles$8 = {
+var styles$9 = {
   "form-container": "_form-container_1p48k_1",
   "field-container": "_field-container_1p48k_5",
   "field-label": "_field-label_1p48k_9",
@@ -99904,34 +99890,34 @@ var styles$8 = {
   tooltipWrapper,
   tooltip,
   dropdown,
-  filterDropdown,
+  filterDropdown: filterDropdown$1,
   filterValues,
   columnText,
   disabled,
   checkIcon,
   generateButton
 };
-const button$2 = "_button_1qsdd_1";
-const menu$1 = "_menu_1qsdd_7";
+const button$3 = "_button_1qsdd_1";
+const menu$2 = "_menu_1qsdd_7";
 const inputLabel = "_inputLabel_1qsdd_13";
 const input = "_input_1qsdd_13";
-const menuContainer = "_menuContainer_1qsdd_25";
+const menuContainer$1 = "_menuContainer_1qsdd_25";
 const icon = "_icon_1qsdd_31";
 const container$5 = "_container_1qsdd_37";
-var styles$7 = {
-  button: button$2,
-  menu: menu$1,
+var styles$8 = {
+  button: button$3,
+  menu: menu$2,
   inputLabel,
   input,
-  menuContainer,
+  menuContainer: menuContainer$1,
   icon,
   container: container$5
 };
 const container$4 = "_container_1td7j_1";
 const popover = "_popover_1td7j_9";
-const button$1 = "_button_1td7j_17";
+const button$2 = "_button_1td7j_17";
 const buttonOpen = "_buttonOpen_1td7j_25";
-const menu = "_menu_1td7j_33";
+const menu$1 = "_menu_1td7j_33";
 const enter = "_enter_1td7j_41";
 const enterFrom = "_enterFrom_1td7j_49";
 const enterTo = "_enterTo_1td7j_57";
@@ -99943,12 +99929,12 @@ const top = "_top_1td7j_97";
 const bottom = "_bottom_1td7j_105";
 const left = "_left_1td7j_113";
 const right = "_right_1td7j_121";
-var styles$6 = {
+var styles$7 = {
   container: container$4,
   popover,
-  button: button$1,
+  button: button$2,
   buttonOpen,
-  menu,
+  menu: menu$1,
   enter,
   enterFrom,
   enterTo,
@@ -99991,26 +99977,26 @@ const PopoverMenu = ({
   });
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: `${styles$6.container} ${className}`,
+      className: `${styles$7.container} ${className}`,
       ref: wrapperRef,
       children: [/* @__PURE__ */ jsx(Button, {
-        className: `${buttonClass} ${isOpen ? styles$6.buttonOpen : ""} ${styles$6.button}`,
+        className: `${buttonClass} ${isOpen ? styles$7.buttonOpen : ""} ${styles$7.button}`,
         type: "button",
         variant: "custom",
         onClick: () => !isDisabled && setOpen((prev) => !prev),
         children: button2
       }), !isDisabled ? /* @__PURE__ */ jsx("div", {
-        className: `${styles$6.popover} ${styles$6[position2]} ${menuContainerClass}`,
+        className: `${styles$7.popover} ${styles$7[position2]} ${menuContainerClass}`,
         children: /* @__PURE__ */ jsx(Je, {
           as: "div",
-          className: `${styles$6.menu} ${menuClass}`,
+          className: `${styles$7.menu} ${menuClass}`,
           show: isOpen,
-          enter: styles$6.enter,
-          enterFrom: styles$6.enterFrom,
-          enterTo: styles$6.enterTo,
-          leave: styles$6.leave,
-          leaveFrom: styles$6.leaveFrom,
-          leaveTo: styles$6.leaveTo,
+          enter: styles$7.enter,
+          enterFrom: styles$7.enterFrom,
+          enterTo: styles$7.enterTo,
+          leave: styles$7.leave,
+          leaveFrom: styles$7.leaveFrom,
+          leaveTo: styles$7.leaveTo,
           children: children2
         })
       }) : null]
@@ -100068,14 +100054,14 @@ const TimeGrainField = ({
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx(PopoverMenu$1, {
       className,
-      buttonClass: styles$7.button,
+      buttonClass: styles$8.button,
       isDisabled,
-      menuClass: styles$7.menu,
-      menuContainerClass: styles$7.menuContainer,
+      menuClass: styles$8.menu,
+      menuContainerClass: styles$8.menuContainer,
       button: /* @__PURE__ */ jsx(InputField, {
         label: isShowlabel ? "Time Grain" : "",
-        labelClass: styles$7.inputLabel,
-        inputClass: styles$7.input,
+        labelClass: styles$8.inputLabel,
+        inputClass: styles$8.input,
         type: "text",
         defaultValue: timeGrainValue,
         placeholder: "time range",
@@ -100091,12 +100077,12 @@ const TimeGrainField = ({
         })),
         isDisabled: true,
         icon: /* @__PURE__ */ jsx("span", {
-          className: styles$7.icon,
+          className: styles$8.icon,
           children: /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})
         })
       }),
       children: /* @__PURE__ */ jsxs("div", {
-        className: styles$7.container,
+        className: styles$8.container,
         children: [/* @__PURE__ */ jsx(Select, {
           options: timeGrainOptions,
           defaultValue: state.value,
@@ -100360,7 +100346,7 @@ const ModalFooter = ({
   className
 }) => {
   return /* @__PURE__ */ jsx("section", {
-    className: `${styles$t.footer} ${className}`,
+    className: `${styles$u.footer} ${className}`,
     children: children2
   });
 };
@@ -100542,18 +100528,18 @@ const MetricForm = ({
       setSelectedGroupBy(selectedDimensions);
   }, [selectedDimensions, isEnableGroupBy]);
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$8["form-container"],
+    className: styles$9["form-container"],
     children: [!isDisableTimeColumn && /* @__PURE__ */ jsxs("div", {
-      className: styles$8["field-container"],
+      className: styles$9["field-container"],
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$8["field-label"],
+        className: styles$9["field-label"],
         children: "Time Filter"
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$8["field-wrapper"],
+        className: styles$9["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$8["field-inner-container"],
+          className: styles$9["field-inner-container"],
           children: [/* @__PURE__ */ jsx(FloatingDropDown$1, {
             onChange: setTimeColumn,
             selectedOption: timeColumn,
@@ -100574,29 +100560,29 @@ const MetricForm = ({
           }), timeGrainValue && /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "custom",
-            className: styles$8["field-value"],
+            className: styles$9["field-value"],
             onClick: () => setTimeGrainValue(""),
             children: [timeGrainValue, " ", /* @__PURE__ */ jsx(radixIconsCross2, {})]
           })]
         })
       })]
     }), !isDisableAddMetric && /* @__PURE__ */ jsxs("div", {
-      className: styles$8["field-container"],
+      className: styles$9["field-container"],
       children: [/* @__PURE__ */ jsxs(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$8["field-label"],
+        className: styles$9["field-label"],
         children: ["Metric Creation", /* @__PURE__ */ jsxs("span", {
-          className: styles$8.tooltipWrapper,
+          className: styles$9.tooltipWrapper,
           children: [/* @__PURE__ */ jsx(akarIconsInfo, {}), /* @__PURE__ */ jsx("span", {
-            className: styles$8.tooltip,
+            className: styles$9.tooltip,
             children: "configure metric columns"
           })]
         })]
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$8["field-wrapper"],
+        className: styles$9["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$8["field-inner-container"],
+          className: styles$9["field-inner-container"],
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
@@ -100604,7 +100590,7 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$8["field-add-btn"],
+            className: styles$9["field-add-btn"],
             onClick: () => {
               setOpenMetric(true);
               setAliasValue("");
@@ -100612,11 +100598,11 @@ const MetricForm = ({
             isDisabled: isDisableAddMetric,
             children: [/* @__PURE__ */ jsx(lucidePlusCircle, {}), " Add Aggregate Column"]
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$8["field-value-container"],
+            className: styles$9["field-value-container"],
             children: metrics.map((metric) => /* @__PURE__ */ jsxs(Button, {
               type: "button",
               variant: "custom",
-              className: styles$8["field-value"],
+              className: styles$9["field-value"],
               onClick: () => setMetrics((prev) => prev.filter((m2) => m2.as !== metric.as)),
               children: [metric.as, " ", /* @__PURE__ */ jsx(radixIconsCross2, {})]
             }, metric.as))
@@ -100625,7 +100611,7 @@ const MetricForm = ({
             isOpen: isOpenMetric,
             onClose: () => setOpenMetric(false),
             children: [/* @__PURE__ */ jsxs("div", {
-              className: styles$8.dropdown,
+              className: styles$9.dropdown,
               children: [/* @__PURE__ */ jsx(FloatingDropDown$1, {
                 onChange: setMetricColumn,
                 selectedOption: metricColumn,
@@ -100650,7 +100636,7 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
-                className: styles$8.disabled,
+                className: styles$9.disabled,
                 isDisabled: !metricAggregate.value || !metricColumn.value,
                 onClick: () => {
                   setMetrics((prev) => [...prev, {
@@ -100676,22 +100662,22 @@ const MetricForm = ({
         })
       })]
     }), !isDisableAddColumn && /* @__PURE__ */ jsxs("div", {
-      className: styles$8["field-container"],
+      className: styles$9["field-container"],
       children: [/* @__PURE__ */ jsxs(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$8["field-label"],
+        className: styles$9["field-label"],
         children: ["Columns", /* @__PURE__ */ jsxs("span", {
-          className: styles$8.tooltipWrapper,
+          className: styles$9.tooltipWrapper,
           children: [/* @__PURE__ */ jsx(akarIconsInfo, {}), /* @__PURE__ */ jsx("span", {
-            className: styles$8.tooltip,
+            className: styles$9.tooltip,
             children: "select columns for raw records query"
           })]
         })]
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$8["field-wrapper"],
+        className: styles$9["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$8["field-inner-container"],
+          className: styles$9["field-inner-container"],
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
@@ -100699,7 +100685,7 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$8["field-add-btn"],
+            className: styles$9["field-add-btn"],
             onClick: () => {
               setOpenColumn(true);
               setAliasValue("");
@@ -100707,11 +100693,11 @@ const MetricForm = ({
             isDisabled: isDisableAddColumn,
             children: [/* @__PURE__ */ jsx(lucidePlusCircle, {}), " Add Column"]
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$8["field-value-container"],
+            className: styles$9["field-value-container"],
             children: columns.map((c2) => /* @__PURE__ */ jsxs(Button, {
               type: "button",
               variant: "custom",
-              className: styles$8["field-value"],
+              className: styles$9["field-value"],
               onClick: () => setColumns((prev) => prev.filter((m2) => m2.as !== c2.as)),
               children: [c2.as, " ", /* @__PURE__ */ jsx(radixIconsCross2, {})]
             }, c2.as))
@@ -100720,7 +100706,7 @@ const MetricForm = ({
             isOpen: isOpenColumn,
             onClose: () => setOpenColumn(false),
             children: [/* @__PURE__ */ jsxs("div", {
-              className: styles$8.dropdown,
+              className: styles$9.dropdown,
               children: [/* @__PURE__ */ jsx(FloatingDropDown$1, {
                 onChange: setColumn,
                 selectedOption: column2,
@@ -100739,7 +100725,7 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
-                className: styles$8.disabled,
+                className: styles$9.disabled,
                 isDisabled: !column2.value,
                 onClick: () => {
                   if (!columns.find((c2) => c2.as === aliasValue))
@@ -100756,16 +100742,16 @@ const MetricForm = ({
         })
       })]
     }), /* @__PURE__ */ jsxs("div", {
-      className: styles$8["field-container"],
+      className: styles$9["field-container"],
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "h1",
         styleClass: "custom",
-        className: styles$8["field-label"],
+        className: styles$9["field-label"],
         children: "category filters"
       }), /* @__PURE__ */ jsx("div", {
-        className: styles$8["field-wrapper"],
+        className: styles$9["field-wrapper"],
         children: /* @__PURE__ */ jsxs("div", {
-          className: styles$8["field-inner-container"],
+          className: styles$9["field-inner-container"],
           children: [/* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
@@ -100773,15 +100759,15 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$8["field-add-btn"],
+            className: styles$9["field-add-btn"],
             onClick: () => setOpenFilter(true),
             children: [/* @__PURE__ */ jsx(lucidePlusCircle, {}), " Add Filter Category"]
           }), /* @__PURE__ */ jsx("div", {
-            className: styles$8["field-value-container"],
+            className: styles$9["field-value-container"],
             children: filters2.map((filter2) => /* @__PURE__ */ jsxs(Button, {
               type: "button",
               variant: "custom",
-              className: styles$8["field-value"],
+              className: styles$9["field-value"],
               onClick: () => setFilters((prev) => prev.filter((m2) => m2 !== filter2)),
               children: [filter2, " ", /* @__PURE__ */ jsx(radixIconsCross2, {})]
             }, filter2))
@@ -100790,7 +100776,7 @@ const MetricForm = ({
             isOpen: isOpenFilter,
             onClose: () => setOpenFilter(false),
             children: [/* @__PURE__ */ jsxs("div", {
-              className: styles$8.filterDropdown,
+              className: styles$9.filterDropdown,
               children: [/* @__PURE__ */ jsx(FloatingDropDown$1, {
                 onChange: setFilterColumn,
                 selectedOption: filterColumn,
@@ -100804,7 +100790,7 @@ const MetricForm = ({
                 labelVariant: "static",
                 label: "Operator"
               }), isInFilter ? /* @__PURE__ */ jsxs("div", {
-                className: styles$8.filterValue,
+                className: styles$9.filterValue,
                 children: [/* @__PURE__ */ jsx(Text, {
                   variant: "p",
                   styleClass: "font-14",
@@ -100830,7 +100816,7 @@ const MetricForm = ({
                 variant: "primary",
                 size: "small",
                 isDisabled: !filterColumn.value || !operator.value || !isFilterValue,
-                className: styles$8.disabled,
+                className: styles$9.disabled,
                 onClick: () => {
                   setFilters((prev) => [...prev, `${isBigQuery || isMySql ? `${filterColumn.value}` : isMongoDb ? `\`${filterColumn.value}\`` : `"${filterColumn.value}"`} ${operator.value} ${isInFilter ? `(${selectedFilterValues.map((f2) => `'${f2}'`).join(", ")})` : `${filterValue.value ? `'${filterValue.value}'` : ""}`}`]);
                   setOpenFilter(false);
@@ -100845,13 +100831,13 @@ const MetricForm = ({
           }), /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "secondary",
-            className: styles$8["field-add-btn"],
+            className: styles$9["field-add-btn"],
             onClick: () => setOpenSort(true),
             children: [sort2 ? /* @__PURE__ */ jsx(mdiCircleEditOutline, {}) : /* @__PURE__ */ jsx(lucidePlusCircle, {}), " ", sort2 ? "Edit" : "Add", " Sort Category"]
           }), sort2 && /* @__PURE__ */ jsxs(Button, {
             type: "button",
             variant: "custom",
-            className: styles$8["field-value"],
+            className: styles$9["field-value"],
             onClick: () => setSort(""),
             children: [sort2, " ", /* @__PURE__ */ jsx(radixIconsCross2, {})]
           }), /* @__PURE__ */ jsxs(Modal$1, {
@@ -100859,7 +100845,7 @@ const MetricForm = ({
             isOpen: isOpenSort,
             onClose: () => setOpenSort(false),
             children: [/* @__PURE__ */ jsxs("div", {
-              className: styles$8.dropdown,
+              className: styles$9.dropdown,
               children: [/* @__PURE__ */ jsx(FloatingDropDown$1, {
                 onChange: setSortColumn,
                 selectedOption: sortColumn,
@@ -100879,7 +100865,7 @@ const MetricForm = ({
                 variant: "primary",
                 size: "small",
                 isDisabled: !sortColumn.value || isDisableSorting,
-                className: styles$8.disabled,
+                className: styles$9.disabled,
                 onClick: () => {
                   if (!columns.length) {
                     setSort(`${sortAggregate.value}(${isBigQuery || isMySql ? `${sortColumn.value}` : isMongoDb ? `\`${sortColumn.value}\`` : `"${sortColumn.value}"`})`);
@@ -100903,32 +100889,32 @@ const MetricForm = ({
     }), !columns.length && !!dateTimeColumnList.length && /* @__PURE__ */ jsxs(Text, {
       styleClass: "font-14",
       variant: "p",
-      className: styles$8.columnText,
+      className: styles$9.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$8.checkIcon
+          className: styles$9.checkIcon
         }) : /* @__PURE__ */ jsx(materialSymbolsCheckBoxOutlineBlank, {})
       }), "Include Time"]
     }), /* @__PURE__ */ jsxs(Text, {
       styleClass: "font-14",
       variant: "p",
-      className: styles$8.columnText,
+      className: styles$9.columnText,
       children: [/* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "custom",
         onClick: () => setSortDescending((s2) => !s2),
         children: isSortDescending ? /* @__PURE__ */ jsx(materialSymbolsCheckBoxRounded, {
-          className: styles$8.checkIcon
+          className: styles$9.checkIcon
         }) : /* @__PURE__ */ jsx(materialSymbolsCheckBoxOutlineBlank, {})
       }), "Sort Descending"]
     }), /* @__PURE__ */ jsx(Button, {
       type: "button",
       variant: "primary",
-      className: styles$8.generateButton,
+      className: styles$9.generateButton,
       isDisabled: isGeneratingDataset || isDisableGenerate,
       onClick: () => {
         setError("");
@@ -100985,7 +100971,7 @@ const container$3 = "_container_n3hil_1";
 const header = "_header_n3hil_5";
 const enableGroupBy = "_enableGroupBy_n3hil_8";
 const enableGroupButton = "_enableGroupButton_n3hil_11";
-var styles$5 = {
+var styles$6 = {
   container: container$3,
   header,
   enableGroupBy,
@@ -101006,14 +100992,14 @@ const ConstructMetric = ({
   setSelectedGroupBy
 }) => {
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$5.container,
+    className: styles$6.container,
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$5.header,
+      className: styles$6.header,
       children: ["Data", setEnableGroupBy && /* @__PURE__ */ jsxs(Button, {
         type: "button",
         variant: "custom",
         onClick: () => setEnableGroupBy(!isEnableGroupBy),
-        className: `${isEnableGroupBy && styles$5.enableGroupBy} ${styles$5.enableGroupButton}`,
+        className: `${isEnableGroupBy && styles$6.enableGroupBy} ${styles$6.enableGroupButton}`,
         children: [isEnableGroupBy ? "Disable" : "Enable", " Drill down"]
       })]
     }), /* @__PURE__ */ jsx(MetricForm$1, {
@@ -101039,7 +101025,7 @@ const fieldLabel = "_fieldLabel_2rli9_19";
 const save = "_save_2rli9_25";
 const cancel = "_cancel_2rli9_31";
 const error = "_error_2rli9_37";
-var styles$4 = {
+var styles$5 = {
   form: form$1,
   container: container$2,
   field,
@@ -101051,7 +101037,7 @@ var styles$4 = {
 const label$1 = "_label_xfwp3_1";
 const textarea = "_textarea_xfwp3_9";
 const resizable = "_resizable_xfwp3_17";
-var styles$3 = {
+var styles$4 = {
   label: label$1,
   textarea,
   resizable
@@ -101075,7 +101061,7 @@ const TextAreaField = ({
     className,
     children: [/* @__PURE__ */ jsx("label", {
       htmlFor: id2,
-      className: styles$3.label,
+      className: styles$4.label,
       children: label2
     }), /* @__PURE__ */ jsx("textarea", {
       id: id2,
@@ -101083,7 +101069,7 @@ const TextAreaField = ({
       rows,
       cols,
       placeholder,
-      className: classNames(styles$3.textarea, `${resizable2 ? null : styles$3.resizable}`),
+      className: classNames(styles$4.textarea, `${resizable2 ? null : styles$4.resizable}`),
       defaultValue,
       ...register2,
       value,
@@ -101095,7 +101081,7 @@ const TextAreaField = ({
   });
 };
 const group = "_group_1yux9_1";
-const button = "_button_1yux9_7";
+const button$1 = "_button_1yux9_7";
 const enabled = "_enabled_1yux9_19";
 const notenabled = "_notenabled_1yux9_25";
 const switchIcon = "_switchIcon_1yux9_31";
@@ -101104,9 +101090,9 @@ const switchInactive = "_switchInactive_1yux9_43";
 const label = "_label_1yux9_49";
 const labelActive = "_labelActive_1yux9_55";
 const labelInactive = "_labelInactive_1yux9_61";
-var styles$2 = {
+var styles$3 = {
   group,
-  button,
+  button: button$1,
   "switch": "_switch_1yux9_13",
   enabled,
   notenabled,
@@ -101128,22 +101114,22 @@ const SwitchButton = ({
 }) => {
   return /* @__PURE__ */ jsxs(Pe$1.Group, {
     as: "span",
-    className: `${styles$2.group} ${className}`,
+    className: `${styles$3.group} ${className}`,
     children: [label2 ? /* @__PURE__ */ jsx(Pe$1.Description, {
       className: labelClassName,
       children: label2
     }) : null, /* @__PURE__ */ jsxs("div", {
-      className: styles$2.button,
+      className: styles$3.button,
       children: [/* @__PURE__ */ jsx(Pe$1, {
         checked: enabled2,
         onChange,
-        className: `${enabled2 ? styles$2.enabled : styles$2.notenabled} ${styles$2.switch}`,
+        className: `${enabled2 ? styles$3.enabled : styles$3.notenabled} ${styles$3.switch}`,
         defaultChecked: defaultEnabled,
         children: /* @__PURE__ */ jsx("span", {
-          className: `${enabled2 ? styles$2.switchActive : styles$2.switchInactive} ${styles$2.switchIcon}`
+          className: `${enabled2 ? styles$3.switchActive : styles$3.switchInactive} ${styles$3.switchIcon}`
         })
       }), /* @__PURE__ */ jsx(Pe$1.Label, {
-        className: `${styles$2.label} ${enabled2 ? styles$2.labelActive : styles$2.labelInactive}`,
+        className: `${styles$3.label} ${enabled2 ? styles$3.labelActive : styles$3.labelInactive}`,
         children: placeholder
       })]
     })]
@@ -101183,12 +101169,12 @@ const ExternalMetric = ({
     label: dash.name
   }))) != null ? _b2 : [];
   return /* @__PURE__ */ jsxs("form", {
-    className: styles$4.form,
+    className: styles$5.form,
     onSubmit: submitMetric,
     children: [/* @__PURE__ */ jsxs("div", {
-      className: styles$4.container,
+      className: styles$5.container,
       children: [/* @__PURE__ */ jsx("div", {
-        className: styles$4.field,
+        className: styles$5.field,
         children: /* @__PURE__ */ jsx(MultiSelect, {
           label: "Dashboards",
           options: options2,
@@ -101216,7 +101202,7 @@ const ExternalMetric = ({
         }),
         defaultValue: defaultValues == null ? void 0 : defaultValues.metricId
       }), /* @__PURE__ */ jsx(TextAreaField, {
-        className: styles$4.field,
+        className: styles$5.field,
         id: "desc",
         placeholder: "What is the name of metric?",
         label: "Description",
@@ -101224,8 +101210,8 @@ const ExternalMetric = ({
         register: register2("description"),
         defaultValue: defaultValues == null ? void 0 : defaultValues.description
       }), !isEmbedded && /* @__PURE__ */ jsx(ToggleButton, {
-        className: styles$4.field,
-        labelClassName: styles$4.fieldLabel,
+        className: styles$5.field,
+        labelClassName: styles$5.fieldLabel,
         enabled: isLiveMode,
         onChange: setLiveMode,
         label: "Publish Type",
@@ -101235,13 +101221,13 @@ const ExternalMetric = ({
     }), !!error2 && /* @__PURE__ */ jsx(Text, {
       variant: "p",
       styleClass: "font-14",
-      className: styles$4.error,
+      className: styles$5.error,
       children: error2
     }), /* @__PURE__ */ jsxs(ModalFooter$1, {
       children: [/* @__PURE__ */ jsx(Button, {
         type: "reset",
         variant: "secondary",
-        className: styles$4.cancel,
+        className: styles$5.cancel,
         onClick: onCancel,
         size: "default",
         children: "Cancel"
@@ -101249,7 +101235,7 @@ const ExternalMetric = ({
         type: "submit",
         variant: "primary",
         size: "small",
-        className: styles$4.save,
+        className: styles$5.save,
         isDisabled: !options2.length || !dashboardIds.length,
         children: "Save"
       })]
@@ -101683,7 +101669,7 @@ const EmbeddedMetricCreation = ({
         setShowSaveMetricModal
       }),
       children: /* @__PURE__ */ jsxs("div", {
-        className: styles$o["modal-container"],
+        className: styles$p["modal-container"],
         children: [/* @__PURE__ */ jsx(Dataset$1, {
           setselectTable: setSelectTable,
           selectTable,
@@ -101741,7 +101727,7 @@ const EmbeddedMetricCreation = ({
       isOpen: isShowSqlModal,
       onClose: () => setShowSqlModal(false),
       children: /* @__PURE__ */ jsx("div", {
-        className: styles$o["query-modal"],
+        className: styles$p["query-modal"],
         children: query
       })
     }), /* @__PURE__ */ jsx(Modal$1, {
@@ -101807,7 +101793,7 @@ const filters = "_filters_16xx4_31";
 const filterItem = "_filterItem_16xx4_37";
 const filterItemOperator = "_filterItemOperator_16xx4_43";
 const remove = "_remove_16xx4_49";
-var styles$1 = {
+var styles$2 = {
   container: container$1,
   form,
   title,
@@ -101818,6 +101804,22 @@ var styles$1 = {
   filterItemOperator,
   remove
 };
+const button = "_button_wt9rw_1";
+const menu = "_menu_wt9rw_7";
+const menuContainer = "_menuContainer_wt9rw_13";
+const buttonText = "_buttonText_wt9rw_19";
+const buttonIcon = "_buttonIcon_wt9rw_25";
+const filterName = "_filterName_wt9rw_31";
+const filterDropdown = "_filterDropdown_wt9rw_37";
+var styles$1 = {
+  button,
+  menu,
+  menuContainer,
+  buttonText,
+  buttonIcon,
+  filterName,
+  filterDropdown
+};
 const getFormattedDataType = (datatype) => {
   if (NUMBER_TYPES.includes(datatype.toLowerCase()))
     return "number";
@@ -101977,23 +101979,23 @@ const FilterField = ({
   }, [isResetted]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs(PopoverMenu$1, {
-      buttonClass: "flex border rounded-md px-2 py-1.5 items-center justify-between w-44",
-      menuClass: "p-3 w-60",
+      buttonClass: styles$1.button,
+      menuClass: styles$1.menu,
       position: "bottom-left",
-      menuContainerClass: "w-full",
+      menuContainerClass: styles$1.menuContainer,
       button: /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx("span", {
-          className: "truncate",
+          className: styles$1.buttonText,
           children: filter2.name
         }), /* @__PURE__ */ jsx("span", {
-          className: "text-lg text-gray-400",
+          className: styles$1.buttonIcon,
           children: /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})
         })]
       }),
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "p",
         styleClass: "font-14",
-        className: "mb-3",
+        className: styles$1.filterName,
         children: filter2.name
       }), /* @__PURE__ */ jsx(FloatingDropDown$1, {
         label: "Operator",
@@ -102014,7 +102016,7 @@ const FilterField = ({
           onChange: setOption,
           label: "Filter Value",
           labelVariant: "static",
-          className: "mt-3"
+          className: styles$1.filterDropdown
         }) : /* @__PURE__ */ jsx(Fragment, {
           children: isInFilterOperator(operator.value) ? /* @__PURE__ */ jsx(MultiFilterDropdown, {
             selectedOptions: multiOptions,
@@ -102027,7 +102029,7 @@ const FilterField = ({
             isSearchEnabled: true,
             label: "Filter Value",
             labelVariant: "static",
-            className: "mt-3",
+            className: styles$1.filterDropdown,
             autoSelected: false
           }) : /* @__PURE__ */ jsx(FilterDropDown$1, {
             selectedOption: option2,
@@ -102040,7 +102042,7 @@ const FilterField = ({
             isSearchEnabled: true,
             label: "Filter Value",
             labelVariant: "static",
-            className: "mt-3",
+            className: styles$1.filterDropdown,
             autoSelected: false
           })
         })
@@ -102137,15 +102139,15 @@ const MetricFilters = ({
   };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$1.container,
+      className: styles$2.container,
       children: [/* @__PURE__ */ jsxs("form", {
-        className: styles$1.form,
+        className: styles$2.form,
         onSubmit: handleSubmit,
         onReset: resetFilters,
         children: [/* @__PURE__ */ jsx(Text, {
           variant: "p",
           styleClass: "font-18",
-          className: styles$1.title,
+          className: styles$2.title,
           children: "Filters:"
         }), filters2[0].columns.map((col) => /* @__PURE__ */ jsx(FilterField$1, {
           tableName: filters2[0].tableName,
@@ -102163,29 +102165,29 @@ const MetricFilters = ({
         }, col.name)), /* @__PURE__ */ jsxs(Button, {
           type: "submit",
           variant: "outlined",
-          className: styles$1.apply,
+          className: styles$2.apply,
           children: [/* @__PURE__ */ jsx(icOutlineFilterAlt, {}), " Apply Filters"]
         }), /* @__PURE__ */ jsxs(Button, {
           type: "reset",
           variant: "secondary",
-          className: styles$1.reset,
+          className: styles$2.reset,
           children: [/* @__PURE__ */ jsx(grommetIconsPowerReset, {}), " Reset Filters"]
         })]
       }), appliedfilters.length ? /* @__PURE__ */ jsx("ul", {
-        className: styles$1.filters,
+        className: styles$2.filters,
         children: appliedfilters.map((filter2) => {
           var _a2;
           return /* @__PURE__ */ jsxs("li", {
-            className: styles$1.filterItem,
+            className: styles$2.filterItem,
             children: [filter2.column, /* @__PURE__ */ jsx("span", {
-              className: styles$1.filterItemOperator,
+              className: styles$2.filterItemOperator,
               children: ((_a2 = operatorList.find((op) => op.value === filter2.operator)) == null ? void 0 : _a2.label) || ""
             }), !isNullFilterOperator(filter2.operator) ? /* @__PURE__ */ jsx(Fragment, {
               children: Array.isArray(filter2.value) ? `[${filter2.value.map((v4) => v4).join(",")}]` : filter2.value
             }) : null, /* @__PURE__ */ jsx(Button, {
               type: "button",
               variant: "custom",
-              className: styles$1.remove,
+              className: styles$2.remove,
               onClick: () => setAppliedFilters((prev) => prev.filter((a2) => a2.column !== filter2.column)),
               children: /* @__PURE__ */ jsx(carbonClose, {})
             })]
@@ -102256,14 +102258,14 @@ const EmbeddedDashboard = React__default.memo(({
   });
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$y["embedDashboard-container"],
+      className: styles$z["embedDashboard-container"],
       children: [((_a2 = data.externalDashboard) == null ? void 0 : _a2.id) && !isLoading && /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsxs("div", {
-          className: styles$y["embedDashboard-header"],
+          className: styles$z["embedDashboard-header"],
           children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(Button, {
             type: "button",
             variant: "custom",
-            className: styles$y.filter,
+            className: styles$z.filter,
             onClick: () => setShowFilters((s2) => !s2),
             children: /* @__PURE__ */ jsx(icOutlineFilterAlt, {
               color: "#182C60"
@@ -102275,7 +102277,7 @@ const EmbeddedDashboard = React__default.memo(({
             externalDashboardId: data.externalDashboard.id
           })]
         }), /* @__PURE__ */ jsxs("div", {
-          className: styles$y["embedDashboard-wrapper"],
+          className: styles$z["embedDashboard-wrapper"],
           children: [data.externalDashboard.filters.length && isShowFilters ? /* @__PURE__ */ jsx(MetricFilters$1, {
             companyId: data.companyId,
             filters: data.externalDashboard.filters,
@@ -102291,7 +102293,7 @@ const EmbeddedDashboard = React__default.memo(({
           })]
         })]
       }), isLoading && /* @__PURE__ */ jsx("div", {
-        className: styles$y["alt-container"],
+        className: styles$z["alt-container"],
         children: /* @__PURE__ */ jsx(eosIconsLoading, {
           style: {
             width: "50px",
@@ -102300,7 +102302,7 @@ const EmbeddedDashboard = React__default.memo(({
           }
         })
       }), !isLoading && !((_b2 = data.externalDashboard) == null ? void 0 : _b2.id) && /* @__PURE__ */ jsx("div", {
-        className: styles$y["alt-container"],
+        className: styles$z["alt-container"],
         children: "Invalid token or Dashboard id"
       })]
     })