@databrainhq/plugin 0.4.6 → 0.5.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import * as React$6 from "react";
-import React__default, { PureComponent, forwardRef, useRef, useEffect, useState, useMemo, useLayoutEffect, Fragment as Fragment$1, isValidElement, cloneElement as cloneElement$1, createElement as createElement$1, createContext as createContext$1, useContext, useReducer, createRef, useCallback, memo } from "react";
+import React__default, { PureComponent, forwardRef, useRef, useEffect, useState, useLayoutEffect, Fragment as Fragment$1, isValidElement, cloneElement as cloneElement$1, createElement as createElement$1, createContext as createContext$1, useContext, useMemo, useReducer, createRef, useCallback, memo } from "react";
 import require$$2$1 from "react-dom";
 function _setPrototypeOf$7(o2, p2) {
   _setPrototypeOf$7 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o3, p3) {
@@ -2512,87 +2512,75 @@ function useQuery(arg1, arg2, arg3) {
   var parsedOptions = parseQueryArgs(arg1, arg2, arg3);
   return useBaseQuery(parsedOptions, QueryObserver);
 }
-const container$e = "_container_11uys_1";
-const fixed = "_fixed_11uys_1";
-const absolute = "_absolute_11uys_1";
-const relative = "_relative_11uys_1";
-const sticky = "_sticky_11uys_1";
-const flex = "_flex_11uys_1";
-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 = {
+const container$e = "_container_gr5gv_1";
+const fixed = "_fixed_gr5gv_1";
+const absolute = "_absolute_gr5gv_1";
+const flex = "_flex_gr5gv_1";
+const table$4 = "_table_gr5gv_1";
+const grid = "_grid_gr5gv_1";
+const hidden = "_hidden_gr5gv_1";
+const transform = "_transform_gr5gv_1";
+const border = "_border_gr5gv_1";
+const shadow = "_shadow_gr5gv_1";
+const filter$1 = "_filter_gr5gv_347";
+const floatingFilterButton = "_floatingFilterButton_gr5gv_355";
+const floatingFilterButtonIcon = "_floatingFilterButtonIcon_gr5gv_363";
+const floatingButton = "_floatingButton_gr5gv_371";
+const floatingButtonIcon = "_floatingButtonIcon_gr5gv_379";
+const staticContainer = "_staticContainer_gr5gv_387";
+const floatingContainer = "_floatingContainer_gr5gv_395";
+var styles$A = {
   container: container$e,
-  "static": "_static_11uys_1",
+  "static": "_static_gr5gv_387",
   fixed,
   absolute,
-  relative,
-  sticky,
-  "top-0": "_top-0_11uys_1",
-  "left-2": "_left-2_11uys_1",
-  "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",
+  "left-2": "_left-2_gr5gv_1",
+  "top-1": "_top-1_gr5gv_1",
+  "mb-2": "_mb-2_gr5gv_1",
+  "mt-2": "_mt-2_gr5gv_1",
+  "mt-2.5": "_mt-2.5_gr5gv_1",
+  "mb-3": "_mb-3_gr5gv_1",
   flex,
   table: table$4,
   grid,
   hidden,
-  "h-screen": "_h-screen_11uys_1",
-  "h-full": "_h-full_11uys_1",
-  "h-[4%]": "_h-[4%]_11uys_1",
-  "h-10": "_h-10_11uys_1",
-  "h-14": "_h-14_11uys_1",
-  "h-80": "_h-80_11uys_1",
-  "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",
+  "h-screen": "_h-screen_gr5gv_1",
+  "h-full": "_h-full_gr5gv_1",
+  "h-80": "_h-80_gr5gv_1",
+  "w-screen": "_w-screen_gr5gv_1",
+  "w-full": "_w-full_gr5gv_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",
+  "flex-col": "_flex-col_gr5gv_1",
+  "items-center": "_items-center_gr5gv_1",
+  "justify-center": "_justify-center_gr5gv_1",
+  "gap-5": "_gap-5_gr5gv_1",
+  "divide-solid": "_divide-solid_gr5gv_1",
+  "overflow-y-auto": "_overflow-y-auto_gr5gv_1",
+  "overflow-x-hidden": "_overflow-x-hidden_gr5gv_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",
+  "border-2": "_border-2_gr5gv_1",
+  "p-4": "_p-4_gr5gv_1",
+  "p-2": "_p-2_gr5gv_1",
+  "text-center": "_text-center_gr5gv_1",
+  "text-lg": "_text-lg_gr5gv_1",
+  "text-6xl": "_text-6xl_gr5gv_1",
+  "text-sm": "_text-sm_gr5gv_1",
+  "text-xs": "_text-xs_gr5gv_1",
+  "text-blue-700": "_text-blue-700_gr5gv_1",
   shadow,
   filter: filter$1,
-  "!filter": "_!filter_11uys_1",
-  "embedDashboard-container": "_embedDashboard-container_11uys_157",
-  "embedDashboard-header": "_embedDashboard-header_11uys_165",
-  "embedDashboard-wrapper": "_embedDashboard-wrapper_11uys_173",
-  "alt-container": "_alt-container_11uys_181"
+  "!filter": "_!filter_gr5gv_1",
+  "embedDashboard-container": "_embedDashboard-container_gr5gv_307",
+  "embedDashboard-header-static": "_embedDashboard-header-static_gr5gv_315",
+  "embedDashboard-header-floating": "_embedDashboard-header-floating_gr5gv_323",
+  "embedDashboard-wrapper": "_embedDashboard-wrapper_gr5gv_331",
+  "alt-container": "_alt-container_gr5gv_339",
+  floatingFilterButton,
+  floatingFilterButtonIcon,
+  floatingButton,
+  floatingButtonIcon,
+  staticContainer,
+  floatingContainer
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n2) {
@@ -7855,271 +7843,14 @@ function WidthProvideRGL(ComposedComponent) {
   module.exports.Responsive.utils = responsiveUtils;
   module.exports.WidthProvider = WidthProvider.default;
 })(reactGridLayout);
-var styles$x = "";
-var styles$w = {
-  "MetricList-container": "_MetricList-container_7pasw_1",
-  "MetricList-wrapper": "_MetricList-wrapper_7pasw_9",
-  "noMetric-container": "_noMetric-container_7pasw_17",
-  "noMetric-wrapper": "_noMetric-wrapper_7pasw_25",
-  "alt-container": "_alt-container_7pasw_33"
-};
-const fetcher = (query, variables, options2) => {
-  return async () => {
-    const res = await fetch("https://backend.usedatabrain.com/v1/graphql", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-Hasura-Role": "anonymous",
-        ...options2
-      },
-      body: JSON.stringify({
-        query,
-        variables
-      })
-    });
-    const json = await res.json();
-    if (json.errors) {
-      const { message } = json.errors[0];
-      throw new Error(message);
-    }
-    return json.data;
-  };
+var styles$z = "";
+var styles$y = {
+  "MetricList-container": "_MetricList-container_1b506_1",
+  "MetricList-wrapper": "_MetricList-wrapper_1b506_9",
+  "noMetric-container": "_noMetric-container_1b506_17",
+  "noMetric-wrapper": "_noMetric-wrapper_1b506_25",
+  "alt-container": "_alt-container_1b506_33"
 };
-const CreateExternalMetricDocument = `
-    mutation CreateExternalMetric($chartOptions: jsonb = "", $companyId: uuid = "", $companyIntegrationId: uuid = "", $description: String = "", $inputFields: jsonb = "", $integrationName: String = "", $metricId: String = "", $metricQuery: String = "", $name: String = "", $outputColumns: String = "", $query: String = "", $isLive: Boolean, $clientId: String = "", $isCreatedByClient: Boolean = false, $createdBy: String = "", $timeGrain: String = "", $externalDashboardIds: [externalDashboardMetrics_insert_input!] = {}, $selectedGroupBy: jsonb = [], $isEnableGroupBy: Boolean = false, $groupBy: jsonb = {}) {
-  insert_externalMetrics_one(
-    object: {chartOptions: $chartOptions, companyId: $companyId, companyIntegrationId: $companyIntegrationId, description: $description, inputFields: $inputFields, integrationName: $integrationName, metricId: $metricId, metricQuery: $metricQuery, name: $name, outputColumns: $outputColumns, query: $query, isLive: $isLive, clientId: $clientId, isCreatedByClient: $isCreatedByClient, createdBy: $createdBy, timeGrain: $timeGrain, externalDashboardMetrics: {data: $externalDashboardIds}, selectedGroupBy: $selectedGroupBy, isEnableGroupBy: $isEnableGroupBy, groupBy: $groupBy}
-  ) {
-    id
-    externalDashboardMetrics {
-      externalDashboardId
-    }
-  }
-}
-    `;
-const useCreateExternalMetricMutation = (options2) => useMutation(
-  ["CreateExternalMetric"],
-  (variables) => fetcher(CreateExternalMetricDocument, variables)(),
-  options2
-);
-const FetchColumnDataDocument = `
-    mutation FetchColumnData($companyId: String = "", $tableName: String = "", $columnName: String = "") {
-  fetchColumnData(
-    input: {columnName: $columnName, companyId: $companyId, tableName: $tableName}
-  ) {
-    data {
-      label
-      value
-    }
-    error {
-      message
-    }
-  }
-}
-    `;
-const useFetchColumnDataMutation = (options2) => useMutation(
-  ["FetchColumnData"],
-  (variables) => fetcher(
-    FetchColumnDataDocument,
-    variables
-  )(),
-  options2
-);
-const GenerateDatasetMetricsDocument = `
-    mutation GenerateDatasetMetrics($companyId: String = "", $userInputs: json = "") {
-  generateDatasetMetrics(input: {companyId: $companyId, userInputs: $userInputs}) {
-    error
-    query
-    result
-  }
-}
-    `;
-const useGenerateDatasetMetricsMutation = (options2) => useMutation(
-  ["GenerateDatasetMetrics"],
-  (variables) => fetcher(GenerateDatasetMetricsDocument, variables)(),
-  options2
-);
-const CompanyIntegrationDocument = `
-    query CompanyIntegration($companyId: uuid = "") {
-  companyIntegrations(where: {companyId: {_eq: $companyId}}) {
-    companyId
-    id
-    integrationId
-    name
-  }
-}
-    `;
-const useCompanyIntegrationQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["CompanyIntegration"] : ["CompanyIntegration", variables],
-  fetcher(
-    CompanyIntegrationDocument,
-    variables
-  ),
-  options2
-);
-const CompanySubsetTableListDocument = `
-    query CompanySubsetTableList($companyId: uuid = "") {
-  companySubsetTables(where: {companyId: {_eq: $companyId}}) {
-    tableList
-  }
-}
-    `;
-const useCompanySubsetTableListQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["CompanySubsetTableList"] : ["CompanySubsetTableList", variables],
-  fetcher(
-    CompanySubsetTableListDocument,
-    variables
-  ),
-  options2
-);
-const EmbeddedDashboardMetricsDocument = `
-    query EmbeddedDashboardMetrics($where: externalDashboardMetrics_bool_exp) {
-  externalDashboardMetrics(where: $where) {
-    externalMetricId
-    externalDashboardId
-    externalMetric {
-      chartOptions
-      clientId
-      companyId
-      companyIntegrationId
-      createdAt
-      createdBy
-      description
-      id
-      inputFields
-      integrationName
-      isCreatedByClient
-      isLive
-      metricId
-      metricQuery
-      name
-      outputColumns
-      query
-      resizeAttributes
-      timeGrain
-      updatedAt
-      selectedGroupBy
-      isEnableGroupBy
-      groupBy
-    }
-  }
-}
-    `;
-const useEmbeddedDashboardMetricsQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["EmbeddedDashboardMetrics"] : ["EmbeddedDashboardMetrics", variables],
-  fetcher(EmbeddedDashboardMetricsDocument, variables),
-  options2
-);
-const GetExternalDashboardClientThemeDocument = `
-    query GetExternalDashboardClientTheme($companyId: uuid!, $clientId: String!) {
-  externalDashboardThemes(
-    where: {companyId: {_eq: $companyId}, externalDashboardThemeClients: {clientId: {_eq: $clientId}}}
-    limit: 1
-  ) {
-    colors
-    createdAt
-    id
-    name
-  }
-}
-    `;
-const useGetExternalDashboardClientThemeQuery = (variables, options2) => useQuery(
-  ["GetExternalDashboardClientTheme", variables],
-  fetcher(GetExternalDashboardClientThemeDocument, variables),
-  options2
-);
-const GetExternalDashboardIdDocument = `
-    query GetExternalDashboardId($externalDashboardId: String = "") {
-  externalDashboards(where: {externalDashboardId: {_eq: $externalDashboardId}}) {
-    id
-    filters
-  }
-}
-    `;
-const useGetExternalDashboardIdQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["GetExternalDashboardId"] : ["GetExternalDashboardId", variables],
-  fetcher(
-    GetExternalDashboardIdDocument,
-    variables
-  ),
-  options2
-);
-const ExternalDashboardListDocument = `
-    query ExternalDashboardList($companyId: uuid = "") {
-  externalDashboards(where: {companyId: {_eq: $companyId}}) {
-    externalDashboardId
-    name
-    id
-  }
-}
-    `;
-const useExternalDashboardListQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["ExternalDashboardList"] : ["ExternalDashboardList", variables],
-  fetcher(
-    ExternalDashboardListDocument,
-    variables
-  ),
-  options2
-);
-const GuestTokenParamsDocument = `
-    query GuestTokenParams($id: uuid = "") {
-  guestTokens_by_pk(id: $id) {
-    clientId
-    companyId
-    id
-    params
-  }
-}
-    `;
-const useGuestTokenParamsQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["GuestTokenParams"] : ["GuestTokenParams", variables],
-  fetcher(
-    GuestTokenParamsDocument,
-    variables
-  ),
-  options2
-);
-const PreviewTableDocument = `
-    mutation PreviewTable($companyId: String = "", $tableName: String = "", $limit: Int = 10) {
-  previewTable(
-    input: {companyId: $companyId, tableName: $tableName, limit: $limit}
-  ) {
-    data {
-      data
-      isError
-      name
-    }
-    error {
-      message
-    }
-  }
-}
-    `;
-const usePreviewTableMutation = (options2) => useMutation(
-  ["PreviewTable"],
-  (variables) => fetcher(
-    PreviewTableDocument,
-    variables
-  )(),
-  options2
-);
-const QueryExternalMetricDocument = `
-    query QueryExternalMetric($id: String = "", $clientId: String = "", $filterValues: json = "", $globalFilters: json = []) {
-  externalMetricQuery(
-    input: {externalMetricId: $id, clientId: $clientId, filterValues: $filterValues, globalFilters: $globalFilters}
-  ) {
-    data
-  }
-}
-    `;
-const useQueryExternalMetricQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["QueryExternalMetric"] : ["QueryExternalMetric", variables],
-  fetcher(
-    QueryExternalMetricDocument,
-    variables
-  ),
-  options2
-);
 var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -8168,21 +7899,21 @@ var classnames = { exports: {} };
   })();
 })(classnames);
 var classNames = classnames.exports;
-const primary = "_primary_iy5fw_1";
-const secondary = "_secondary_iy5fw_5";
-const tertiary = "_tertiary_iy5fw_10";
-var styles$v = {
+const primary = "_primary_xtxvk_1";
+const secondary = "_secondary_xtxvk_5";
+const tertiary = "_tertiary_xtxvk_10";
+var styles$x = {
   primary,
   secondary,
   tertiary,
-  "font-18": "_font-18_iy5fw_14",
-  "font-20": "_font-20_iy5fw_18",
-  "font-14": "_font-14_iy5fw_22",
-  "font-14a": "_font-14a_iy5fw_26",
-  "font-14b": "_font-14b_iy5fw_30",
-  "font-14c": "_font-14c_iy5fw_34",
-  "font-15": "_font-15_iy5fw_38",
-  "font-34": "_font-34_iy5fw_41"
+  "font-18": "_font-18_xtxvk_14",
+  "font-20": "_font-20_xtxvk_18",
+  "font-14": "_font-14_xtxvk_22",
+  "font-14a": "_font-14a_xtxvk_26",
+  "font-14b": "_font-14b_xtxvk_30",
+  "font-14c": "_font-14c_xtxvk_34",
+  "font-15": "_font-15_xtxvk_38",
+  "font-34": "_font-34_xtxvk_41"
 };
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -8236,13 +7967,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$x[styleClass]}`, className),
     onClick,
     children: children2
   });
 };
 const fullscreen = "_fullscreen_1wo1t_1";
-var styles$u = {
+var styles$w = {
   fullscreen
 };
 const SOMETHING_WENT_WRONG = "something went wrong, please try again";
@@ -16340,7 +16071,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 +16089,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 +16180,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 +16234,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 +22601,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 +22610,7 @@ function getTextRect(text2, font, align, verticalAlign, padding, rich, truncate2
       verticalAlign,
       padding,
       rich,
-      overflow: truncate2 ? "truncate" : null,
+      overflow: truncate ? "truncate" : null,
       lineHeight
     }
   });
@@ -93678,6 +93409,7 @@ const BoxPlot = ({
     option: option2
   });
 };
+var styles$v = ".tableContainer{position:relative;max-height:24rem;max-width:56rem;overflow:scroll;border-radius:var(--databrainhq-plugin-border-radiusMd);border-width:1px;border-style:solid;border-color:var(--databrainhq-plugin-color-gray300)}.heatMap{position:relative;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.label{white-space:nowrap}.heatMap td,.heatMap th{border-right-width:1px;border-bottom-width:1px;border-style:solid;border-color:var(--databrainhq-plugin-color-gray300);padding:.25rem;text-align:center}.heatMap thead th{position:sticky;top:0px}.heatMap thead th:first-child{left:0px;z-index:10;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.heatMap tbody th{position:sticky;left:0px;z-index:10;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tablechart{position:relative;display:flex;height:100%;padding:1rem}.tablechartWrapper{display:flex;height:100%;width:100%;flex-direction:column}.tablechartContainer{position:sticky;height:4%;width:100%;padding-left:.25rem}.tablechartTable{width:100%}.tablechartHeaderRow{position:sticky;top:0px;height:2.5rem;background-color:var(--databrainhq-plugin-color-primaryLight)}.tablechartHeaderCol{width:16rem}.tablechartHeaderCol>:not([hidden])~:not([hidden]){border-style:solid}.tablechartHeaderCol{border-left-width:1px;padding-left:1rem;padding-right:1rem}.tablechartBodyRow{height:3.5rem}.tablechartBodyCol>:not([hidden])~:not([hidden]){border-style:solid}.tablechartBodyCol{border-left-width:1px;padding-left:1rem;padding-right:1rem;text-align:center}\n";
 const TableChart = ({
   data
 }) => {
@@ -93697,18 +93429,18 @@ const TableChart = ({
     }
   }
   return /* @__PURE__ */ jsx("div", {
-    className: "h-full relative flex p-4",
+    className: styles$v.tablechart,
     children: /* @__PURE__ */ jsx("div", {
-      className: "w-full h-full flex flex-col",
+      className: styles$v.tablechartWrapper,
       children: /* @__PURE__ */ jsx("div", {
-        className: "pl-1 sticky w-full h-[4%]",
+        className: styles$v.tablechartContainer,
         children: /* @__PURE__ */ jsxs("table", {
-          className: "w-full",
+          className: styles$v.tablechartTable,
           children: [/* @__PURE__ */ jsx("thead", {
             children: /* @__PURE__ */ jsxs("tr", {
-              className: "sticky top-0 bg-[#EAEEFC] h-10",
+              className: styles$v.tablechartHeaderRow,
               children: [/* @__PURE__ */ jsx("th", {
-                className: "w-64 px-4 border-l divide-solid",
+                className: styles$v.tableChartHeaderCol,
                 scope: "col",
                 children: /* @__PURE__ */ jsx(Text, {
                   styleClass: "font-14c",
@@ -93717,7 +93449,7 @@ const TableChart = ({
                 })
               }, "num"), data == null ? void 0 : data.datasets.map((item) => {
                 return /* @__PURE__ */ jsx("th", {
-                  className: "w-64 px-4 border-l divide-solid",
+                  className: styles$v.tablechartHeaderCol,
                   scope: "col",
                   children: /* @__PURE__ */ jsx(Text, {
                     styleClass: "font-14c",
@@ -93729,9 +93461,9 @@ const TableChart = ({
             })
           }), /* @__PURE__ */ jsx("tbody", {
             children: modifiedData.map((item, i2) => /* @__PURE__ */ jsx("tr", {
-              className: "h-14",
+              className: styles$v.tablechartBodyRow,
               children: item.map((d2, index) => /* @__PURE__ */ jsx("td", {
-                className: "px-4 text-center border-l divide-solid",
+                className: styles$v.tablechartBodyCol,
                 children: /* @__PURE__ */ jsx(Text, {
                   styleClass: "font-14",
                   variant: "p",
@@ -94005,13 +93737,13 @@ const MetricChart = ({
     children: "No chart selected"
   });
 };
-const modal = "_modal_15wtw_1";
-const popup = "_popup_15wtw_9";
-const header$4 = "_header_15wtw_17";
-const headerTitle = "_headerTitle_15wtw_25";
-const content = "_content_15wtw_33";
-const footer = "_footer_15wtw_41";
-var styles$t = {
+const modal = "_modal_ul4ir_1";
+const popup = "_popup_ul4ir_9";
+const header$4 = "_header_ul4ir_17";
+const headerTitle = "_headerTitle_ul4ir_25";
+const content = "_content_ul4ir_33";
+const footer = "_footer_ul4ir_41";
+var styles$u = {
   modal,
   popup,
   header: header$4,
@@ -94019,18 +93751,18 @@ var styles$t = {
   content,
   footer
 };
-var styles$s = {
-  "btn-primary": "_btn-primary_14f0q_1",
-  "btn-secondary": "_btn-secondary_14f0q_5",
-  "btn-reject": "_btn-reject_14f0q_9",
-  "btn-outlined": "_btn-outlined_14f0q_14",
-  "btn-tertiary": "_btn-tertiary_14f0q_18",
-  "btn-default": "_btn-default_14f0q_22",
-  "btn-large": "_btn-large_14f0q_25",
-  "btn-small": "_btn-small_14f0q_28",
-  "btn-xs": "_btn-xs_14f0q_31",
-  "btn-medium": "_btn-medium_14f0q_34",
-  "btn-11rem": "_btn-11rem_14f0q_38"
+var styles$t = {
+  "btn-primary": "_btn-primary_1h5ze_1",
+  "btn-secondary": "_btn-secondary_1h5ze_5",
+  "btn-reject": "_btn-reject_1h5ze_9",
+  "btn-outlined": "_btn-outlined_1h5ze_14",
+  "btn-tertiary": "_btn-tertiary_1h5ze_18",
+  "btn-default": "_btn-default_1h5ze_22",
+  "btn-large": "_btn-large_1h5ze_25",
+  "btn-small": "_btn-small_1h5ze_28",
+  "btn-xs": "_btn-xs_1h5ze_31",
+  "btn-medium": "_btn-medium_1h5ze_34",
+  "btn-11rem": "_btn-11rem_1h5ze_38"
 };
 const Button = ({
   isDisabled = false,
@@ -94042,7 +93774,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 +93812,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 +93833,7 @@ const Modal = ({
           })]
         })
       }), /* @__PURE__ */ jsx("section", {
-        className: styles$t.content,
+        className: styles$u.content,
         children: children2
       })]
     })
@@ -94118,7 +93850,7 @@ const FullScreenChart = ({
     onClose: onCancel,
     headerTitle: "Chart Preview",
     children: /* @__PURE__ */ jsx("div", {
-      className: styles$u.fullscreen,
+      className: styles$w.fullscreen,
       children: chart && /* @__PURE__ */ jsx(MetricChart, {
         labels: chart.labels,
         data: chart.data,
@@ -94157,19 +93889,19 @@ const eosIconsLoading = (props) => /* @__PURE__ */ jsxs("svg", {
     })
   })]
 });
-const cardContainer = "_cardContainer_1km9m_1";
-const listHeader = "_listHeader_1km9m_9";
-const metricName = "_metricName_1km9m_17";
-const info = "_info_1km9m_25";
-const csvBtn = "_csvBtn_1km9m_33";
-const infoTooltip = "_infoTooltip_1km9m_41";
-const metricData = "_metricData_1km9m_57";
-const singleValueData = "_singleValueData_1km9m_65";
-const singleValue = "_singleValue_1km9m_65";
-const noData$1 = "_noData_1km9m_81";
-const loading = "_loading_1km9m_89";
-const fullScreen = "_fullScreen_1km9m_97";
-var styles$r = {
+const cardContainer = "_cardContainer_33mfg_1";
+const listHeader = "_listHeader_33mfg_9";
+const metricName = "_metricName_33mfg_17";
+const info = "_info_33mfg_25";
+const csvBtn = "_csvBtn_33mfg_33";
+const infoTooltip = "_infoTooltip_33mfg_41";
+const metricData = "_metricData_33mfg_57";
+const singleValueData = "_singleValueData_33mfg_65";
+const singleValue = "_singleValue_33mfg_65";
+const noData$1 = "_noData_33mfg_81";
+const loading = "_loading_33mfg_89";
+const fullScreen = "_fullScreen_33mfg_97";
+var styles$s = {
   cardContainer,
   listHeader,
   metricName,
@@ -94183,8 +93915,247 @@ var styles$r = {
   loading,
   fullScreen
 };
-const csvlink = "_csvlink_fci6i_1";
-var styles$q = {
+const fetcher = (query, variables, options2) => {
+  return async () => {
+    const res = await fetch("https://backend.usedatabrain.com/v1/graphql", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Hasura-Role": "anonymous",
+        ...options2
+      },
+      body: JSON.stringify({
+        query,
+        variables
+      })
+    });
+    const json = await res.json();
+    if (json.errors) {
+      const { message } = json.errors[0];
+      throw new Error(message);
+    }
+    return json.data;
+  };
+};
+const CreateExternalMetricDocument = `
+    mutation CreateExternalMetric($chartOptions: jsonb = "", $companyId: uuid = "", $companyIntegrationId: uuid = "", $description: String = "", $inputFields: jsonb = "", $integrationName: String = "", $metricId: String = "", $metricQuery: String = "", $name: String = "", $outputColumns: String = "", $query: String = "", $isLive: Boolean, $clientId: String = "", $isCreatedByClient: Boolean = false, $createdBy: String = "", $timeGrain: String = "", $externalDashboardIds: [externalDashboardMetrics_insert_input!] = {}, $selectedGroupBy: jsonb = [], $isEnableGroupBy: Boolean = false, $groupBy: jsonb = {}) {
+  insert_externalMetrics_one(
+    object: {chartOptions: $chartOptions, companyId: $companyId, companyIntegrationId: $companyIntegrationId, description: $description, inputFields: $inputFields, integrationName: $integrationName, metricId: $metricId, metricQuery: $metricQuery, name: $name, outputColumns: $outputColumns, query: $query, isLive: $isLive, clientId: $clientId, isCreatedByClient: $isCreatedByClient, createdBy: $createdBy, timeGrain: $timeGrain, externalDashboardMetrics: {data: $externalDashboardIds}, selectedGroupBy: $selectedGroupBy, isEnableGroupBy: $isEnableGroupBy, groupBy: $groupBy}
+  ) {
+    id
+    externalDashboardMetrics {
+      externalDashboardId
+    }
+  }
+}
+    `;
+const useCreateExternalMetricMutation = (options2) => useMutation(
+  ["CreateExternalMetric"],
+  (variables) => fetcher(CreateExternalMetricDocument, variables)(),
+  options2
+);
+const FetchColumnDataDocument = `
+    mutation FetchColumnData($companyId: String = "", $tableName: String = "", $columnName: String = "") {
+  fetchColumnData(
+    input: {columnName: $columnName, companyId: $companyId, tableName: $tableName}
+  ) {
+    data {
+      label
+      value
+    }
+    error {
+      message
+    }
+  }
+}
+    `;
+const useFetchColumnDataMutation = (options2) => useMutation(
+  ["FetchColumnData"],
+  (variables) => fetcher(
+    FetchColumnDataDocument,
+    variables
+  )(),
+  options2
+);
+const GenerateDatasetMetricsDocument = `
+    mutation GenerateDatasetMetrics($companyId: String = "", $userInputs: json = "") {
+  generateDatasetMetrics(input: {companyId: $companyId, userInputs: $userInputs}) {
+    error
+    query
+    result
+  }
+}
+    `;
+const useGenerateDatasetMetricsMutation = (options2) => useMutation(
+  ["GenerateDatasetMetrics"],
+  (variables) => fetcher(GenerateDatasetMetricsDocument, variables)(),
+  options2
+);
+const CompanyIntegrationDocument = `
+    query CompanyIntegration($companyId: uuid = "") {
+  companyIntegrations(where: {companyId: {_eq: $companyId}}) {
+    companyId
+    id
+    integrationId
+    name
+  }
+}
+    `;
+const useCompanyIntegrationQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["CompanyIntegration"] : ["CompanyIntegration", variables],
+  fetcher(
+    CompanyIntegrationDocument,
+    variables
+  ),
+  options2
+);
+const CompanySubsetTableListDocument = `
+    query CompanySubsetTableList($companyId: uuid = "") {
+  companySubsetTables(where: {companyId: {_eq: $companyId}}) {
+    tableList
+  }
+}
+    `;
+const useCompanySubsetTableListQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["CompanySubsetTableList"] : ["CompanySubsetTableList", variables],
+  fetcher(
+    CompanySubsetTableListDocument,
+    variables
+  ),
+  options2
+);
+const EmbeddedDashboardMetricsDocument = `
+    query EmbeddedDashboardMetrics($where: externalDashboardMetrics_bool_exp) {
+  externalDashboardMetrics(where: $where) {
+    externalMetricId
+    externalDashboardId
+    externalMetric {
+      chartOptions
+      clientId
+      companyId
+      companyIntegrationId
+      createdAt
+      createdBy
+      description
+      id
+      inputFields
+      integrationName
+      isCreatedByClient
+      isLive
+      metricId
+      metricQuery
+      name
+      outputColumns
+      query
+      resizeAttributes
+      timeGrain
+      updatedAt
+      selectedGroupBy
+      isEnableGroupBy
+      groupBy
+    }
+  }
+}
+    `;
+const useEmbeddedDashboardMetricsQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["EmbeddedDashboardMetrics"] : ["EmbeddedDashboardMetrics", variables],
+  fetcher(EmbeddedDashboardMetricsDocument, variables),
+  options2
+);
+const GetExternalDashboardIdDocument = `
+    query GetExternalDashboardId($externalDashboardId: String = "") {
+  externalDashboards(where: {externalDashboardId: {_eq: $externalDashboardId}}) {
+    id
+    filters
+  }
+}
+    `;
+const useGetExternalDashboardIdQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["GetExternalDashboardId"] : ["GetExternalDashboardId", variables],
+  fetcher(
+    GetExternalDashboardIdDocument,
+    variables
+  ),
+  options2
+);
+const ExternalDashboardListDocument = `
+    query ExternalDashboardList($companyId: uuid = "") {
+  externalDashboards(where: {companyId: {_eq: $companyId}}) {
+    externalDashboardId
+    name
+    id
+  }
+}
+    `;
+const useExternalDashboardListQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["ExternalDashboardList"] : ["ExternalDashboardList", variables],
+  fetcher(
+    ExternalDashboardListDocument,
+    variables
+  ),
+  options2
+);
+const GuestTokenParamsDocument = `
+    query GuestTokenParams($id: uuid = "") {
+  guestTokens_by_pk(id: $id) {
+    clientId
+    companyId
+    id
+    params
+  }
+}
+    `;
+const useGuestTokenParamsQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["GuestTokenParams"] : ["GuestTokenParams", variables],
+  fetcher(
+    GuestTokenParamsDocument,
+    variables
+  ),
+  options2
+);
+const PreviewTableDocument = `
+    mutation PreviewTable($companyId: String = "", $tableName: String = "", $limit: Int = 10) {
+  previewTable(
+    input: {companyId: $companyId, tableName: $tableName, limit: $limit}
+  ) {
+    data {
+      data
+      isError
+      name
+    }
+    error {
+      message
+    }
+  }
+}
+    `;
+const usePreviewTableMutation = (options2) => useMutation(
+  ["PreviewTable"],
+  (variables) => fetcher(
+    PreviewTableDocument,
+    variables
+  )(),
+  options2
+);
+const QueryExternalMetricDocument = `
+    query QueryExternalMetric($id: String = "", $clientId: String = "", $filterValues: json = "", $globalFilters: json = []) {
+  externalMetricQuery(
+    input: {externalMetricId: $id, clientId: $clientId, filterValues: $filterValues, globalFilters: $globalFilters}
+  ) {
+    data
+  }
+}
+    `;
+const useQueryExternalMetricQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["QueryExternalMetric"] : ["QueryExternalMetric", variables],
+  fetcher(
+    QueryExternalMetricDocument,
+    variables
+  ),
+  options2
+);
+const csvlink = "_csvlink_kxdgj_1";
+var styles$r = {
   csvlink
 };
 const objectArrayToCsvString = (array) => {
@@ -94221,7 +94192,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 +94455,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 +94492,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 +94509,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 +94599,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 +94626,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"
         })
@@ -94665,23 +94636,18 @@ const SingleValueCard = ({
 };
 const GridLayout = reactGridLayout.exports.WidthProvider(reactGridLayout.exports.Responsive);
 const ExternalMetricList = ({
+  chartColors,
   globalFilters,
   client,
-  company,
   isLiveMode,
   params,
   externalDashboardMetrics,
-  isMetricListLoading
+  isMetricListLoading,
+  breakpoint,
+  layoutCols
 }) => {
   const [isFullScreen, setFullScreen] = useState(false);
   const [fullScreenChart, setFullScreenChart] = useState();
-  const {
-    data: themeData
-  } = useGetExternalDashboardClientThemeQuery({
-    companyId: company,
-    clientId: client
-  });
-  const theme2 = useMemo(() => themeData == null ? void 0 : themeData.externalDashboardThemes[0], [themeData == null ? void 0 : themeData.externalDashboardThemes[0]]);
   const metricListData = externalDashboardMetrics == null ? void 0 : externalDashboardMetrics.map((data) => data.externalMetric);
   const adminMetrics = metricListData == null ? void 0 : metricListData.filter((data) => !data.isCreatedByClient);
   const clientMetrics = metricListData == null ? void 0 : metricListData.filter((data) => data.isCreatedByClient && data.clientId === client);
@@ -94693,7 +94659,7 @@ const ExternalMetricList = ({
   return /* @__PURE__ */ jsx(Fragment, {
     children: metricsList.length ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        className: styles$w["MetricList-container"],
+        className: styles$y["MetricList-container"],
         children: /* @__PURE__ */ jsx(GridLayout, {
           layouts: {
             lg: metricsList.map(({
@@ -94715,14 +94681,14 @@ const ExternalMetricList = ({
           isDroppable: false,
           rowHeight: 30,
           width: 1200,
-          breakpoints: {
+          breakpoints: breakpoint != null ? breakpoint : {
             lg: 1200,
             md: 996,
             sm: 768,
             xs: 480,
             xxs: 0
           },
-          cols: {
+          cols: layoutCols != null ? layoutCols : {
             lg: 12,
             md: 10,
             sm: 6,
@@ -94730,7 +94696,7 @@ const ExternalMetricList = ({
             xxs: 2
           },
           children: metricsList.map((metricItem) => /* @__PURE__ */ jsx("div", {
-            className: styles$w["MetricList-wrapper"],
+            className: styles$y["MetricList-wrapper"],
             children: metricItem.chartOptions.chartType === "single value" ? /* @__PURE__ */ jsx(SingleValueCard, {
               metricItem,
               client,
@@ -94744,7 +94710,7 @@ const ExternalMetricList = ({
               },
               client,
               param: params == null ? void 0 : params.find((obj) => obj.metricId === metricItem.metricId),
-              colors: theme2 == null ? void 0 : theme2.colors,
+              colors: chartColors,
               globalFilters
             })
           }, metricItem.id))
@@ -94756,9 +94722,9 @@ const ExternalMetricList = ({
       })]
     }) : /* @__PURE__ */ jsx(Fragment, {
       children: !isMetricListLoading ? /* @__PURE__ */ jsx("div", {
-        className: styles$w["noMetric-container"],
+        className: styles$y["noMetric-container"],
         children: /* @__PURE__ */ jsx("div", {
-          className: styles$w["noMetric-wrapper"],
+          className: styles$y["noMetric-wrapper"],
           children: /* @__PURE__ */ jsx(Text, {
             variant: "h2",
             styleClass: "primary",
@@ -94766,7 +94732,7 @@ const ExternalMetricList = ({
           })
         })
       }) : /* @__PURE__ */ jsx("div", {
-        className: styles$w["alt-container"],
+        className: styles$y["alt-container"],
         children: /* @__PURE__ */ jsx(eosIconsLoading, {
           style: {
             width: "50px",
@@ -94779,12 +94745,12 @@ const ExternalMetricList = ({
   });
 };
 var ExternalMetricList$1 = React__default.memo(ExternalMetricList);
-var styles$p = {
-  "header-container": "_header-container_2cp30_1",
-  "btn-container": "_btn-container_2cp30_5",
-  "back-btn": "_back-btn_2cp30_9",
-  "sql-btn": "_sql-btn_2cp30_13",
-  "save-btn": "_save-btn_2cp30_17"
+var styles$q = {
+  "header-container": "_header-container_pimqu_1",
+  "btn-container": "_btn-container_pimqu_5",
+  "back-btn": "_back-btn_pimqu_9",
+  "sql-btn": "_sql-btn_pimqu_13",
+  "save-btn": "_save-btn_pimqu_17"
 };
 const akarIconsArrowLeft = (props) => /* @__PURE__ */ jsx("svg", {
   viewBox: "0 0 24 24",
@@ -94837,15 +94803,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 +94819,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,36 +94838,40 @@ const Header = ({
     })]
   });
 };
-var styles$o = {
-  "create-btn": "_create-btn_fy7jc_1",
-  "modal-container": "_modal-container_fy7jc_5",
-  "query-modal": "_query-modal_fy7jc_9"
+const floatingCreateButton = "_floatingCreateButton_6ovk2_13";
+const floatingCreateButtonIcon = "_floatingCreateButtonIcon_6ovk2_17";
+var styles$p = {
+  "create-btn": "_create-btn_6ovk2_1",
+  "modal-container": "_modal-container_6ovk2_5",
+  "query-modal": "_query-modal_6ovk2_9",
+  floatingCreateButton,
+  floatingCreateButtonIcon
 };
 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,
   "col-container": "_col-container_hveoi_13",
   column
 };
-const container$c = "_container_1h5ex_1";
-const wrapper$2 = "_wrapper_1h5ex_5";
-const label$3 = "_label_1h5ex_9";
-const floatingLabel = "_floatingLabel_1h5ex_13";
-const dropdown$1 = "_dropdown_1h5ex_17";
-const options = "_options_1h5ex_21";
-const checkedOption = "_checkedOption_1h5ex_25";
-const option$1 = "_option_1h5ex_21";
-const icon$1 = "_icon_1h5ex_33";
-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 = {
+const container$c = "_container_np4zl_1";
+const wrapper$2 = "_wrapper_np4zl_5";
+const label$3 = "_label_np4zl_9";
+const floatingLabel = "_floatingLabel_np4zl_13";
+const dropdown$1 = "_dropdown_np4zl_17";
+const options = "_options_np4zl_21";
+const checkedOption = "_checkedOption_np4zl_25";
+const option$1 = "_option_np4zl_21";
+const icon$1 = "_icon_np4zl_33";
+const text$1 = "_text_np4zl_37";
+const floatingText = "_floatingText_np4zl_41";
+const search = "_search_np4zl_45";
+const loadMore$1 = "_loadMore_np4zl_49";
+var styles$n = {
   container: container$c,
   wrapper: wrapper$2,
   label: label$3,
@@ -96381,9 +96351,9 @@ function useForm(props = {}) {
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
-var styles$l = {
-  "searchTab-container": "_searchTab-container_10vte_1",
-  "searchTab-input": "_searchTab-input_10vte_5"
+var styles$m = {
+  "searchTab-container": "_searchTab-container_1peao_1",
+  "searchTab-input": "_searchTab-input_1peao_5"
 };
 const SearchTab = ({
   setSearchKeyword,
@@ -96398,13 +96368,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 +96446,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 +96490,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 +96517,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 +96537,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 +96799,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,44 +96810,44 @@ 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,
+          as,
           datatype
         }) => /* @__PURE__ */ jsxs("div", {
-          className: styles$n.column,
+          className: styles$o.column,
           children: [/* @__PURE__ */ jsx(DataType$1, {
             datatype
           }), /* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
-            children: name
+            children: as
           })]
-        }, name))
+        }, as))
       })]
     })]
   });
 };
 var Dataset$1 = React__default.memo(Dataset);
-const container$b = "_container_rnpgp_1";
-const header$2 = "_header_rnpgp_7";
-const headerText = "_headerText_rnpgp_13";
-const crossIcon$1 = "_crossIcon_rnpgp_19";
-const form$3 = "_form_rnpgp_25";
-const inputWrapper = "_inputWrapper_rnpgp_31";
-const input$2 = "_input_rnpgp_31";
-const selectWrapper = "_selectWrapper_rnpgp_43";
-const select = "_select_rnpgp_43";
-const series = "_series_rnpgp_55";
-const seriesWrapper = "_seriesWrapper_rnpgp_61";
-const valueLabelWrapper = "_valueLabelWrapper_rnpgp_67";
-var styles$k = {
+const container$b = "_container_13mal_1";
+const header$2 = "_header_13mal_7";
+const headerText = "_headerText_13mal_13";
+const crossIcon$1 = "_crossIcon_13mal_19";
+const form$3 = "_form_13mal_25";
+const inputWrapper = "_inputWrapper_13mal_31";
+const input$2 = "_input_13mal_31";
+const selectWrapper = "_selectWrapper_13mal_43";
+const select = "_select_13mal_43";
+const series = "_series_13mal_55";
+const seriesWrapper = "_seriesWrapper_13mal_61";
+const valueLabelWrapper = "_valueLabelWrapper_13mal_67";
+var styles$l = {
   container: container$b,
   header: header$2,
   headerText,
@@ -96891,12 +96861,12 @@ var styles$k = {
   seriesWrapper,
   valueLabelWrapper
 };
-const tab = "_tab_1afsd_1";
-const button$4 = "_button_1afsd_7";
-const activeTab = "_activeTab_1afsd_15";
-var styles$j = {
+const tab = "_tab_ksqsk_1";
+const button$5 = "_button_ksqsk_7";
+const activeTab = "_activeTab_ksqsk_15";
+var styles$k = {
   tab,
-  button: button$4,
+  button: button$5,
   activeTab
 };
 const Tab = ({
@@ -96905,29 +96875,29 @@ 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
     }))
   });
 };
-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 = {
+const label$2 = "_label_1xzvi_1";
+const checkboxLabel = "_checkboxLabel_1xzvi_13";
+const input$1 = "_input_1xzvi_7";
+const checkboxField = "_checkboxField_1xzvi_25";
+var styles$j = {
   label: label$2,
-  "inputField-container": "_inputField-container_qyktv_7",
+  "inputField-container": "_inputField-container_1xzvi_7",
   checkboxLabel,
   input: input$1,
   checkboxField
 };
-const error$3 = "_error_1oskr_1";
-var styles$h = {
+const error$3 = "_error_1csa7_1";
+var styles$i = {
   error: error$3
 };
 const Error$1 = ({
@@ -96936,7 +96906,7 @@ const Error$1 = ({
   return /* @__PURE__ */ jsx(Text, {
     variant: "p",
     styleClass: "custom",
-    className: styles$h.error,
+    className: styles$i.error,
     children: message
   });
 };
@@ -96962,7 +96932,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 +96944,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 +96964,7 @@ const InputField = ({
         onBlur,
         onChange,
         onKeyDown,
-        className: `${styles$i.input} ${inputClass}`,
+        className: `${styles$j.input} ${inputClass}`,
         placeholder,
         defaultValue,
         ...register2,
@@ -97869,37 +97839,37 @@ let Pe = "div", ie = S$1.RenderStrategy, oe = C$1(function(e$12, s2) {
   let n2 = useContext(A) !== null, m2 = s() !== null;
   return React__default.createElement(React__default.Fragment, null, !n2 && m2 ? React__default.createElement(J, { ref: s$12, ...e2 }) : React__default.createElement(oe, { ref: s$12, ...e2 }));
 }), Je = Object.assign(J, { Child: ye, Root: J });
-const listBoxButton = "_listBoxButton_1e3pa_5";
-const selectedOptionText = "_selectedOptionText_1e3pa_17";
-const transitionDiv = "_transitionDiv_1e3pa_21";
-const listboxButtonWrapper = "_listboxButtonWrapper_1e3pa_25";
-const arrowicon = "_arrowicon_1e3pa_28";
-const leave$1 = "_leave_1e3pa_31";
-const leaveFrom$1 = "_leaveFrom_1e3pa_34";
-const leaveTo$1 = "_leaveTo_1e3pa_37";
-const notAvailable = "_notAvailable_1e3pa_40";
-const option = "_option_1e3pa_43";
-const activeOption = "_activeOption_1e3pa_46";
-const optionSelected = "_optionSelected_1e3pa_49";
-const inactiveOption = "_inactiveOption_1e3pa_52";
-const optionLabel = "_optionLabel_1e3pa_55";
-const optionSubLabel = "_optionSubLabel_1e3pa_58";
-const selectedLabel = "_selectedLabel_1e3pa_61";
-const nonselectedLabel = "_nonselectedLabel_1e3pa_64";
-const check = "_check_1e3pa_67";
-const checkActive = "_checkActive_1e3pa_70";
-const checkInactive = "_checkInactive_1e3pa_73";
-const checkIcon$1 = "_checkIcon_1e3pa_76";
-const checkIconSelected = "_checkIconSelected_1e3pa_79";
-const checkIconUnselected = "_checkIconUnselected_1e3pa_82";
-const loadMore = "_loadMore_1e3pa_85";
-const selectedList = "_selectedList_1e3pa_88";
-const selectedListItem = "_selectedListItem_1e3pa_91";
+const listBoxButton = "_listBoxButton_syk7m_5";
+const selectedOptionText = "_selectedOptionText_syk7m_17";
+const transitionDiv = "_transitionDiv_syk7m_21";
+const listboxButtonWrapper = "_listboxButtonWrapper_syk7m_25";
+const arrowicon = "_arrowicon_syk7m_28";
+const leave$1 = "_leave_syk7m_31";
+const leaveFrom$1 = "_leaveFrom_syk7m_34";
+const leaveTo$1 = "_leaveTo_syk7m_37";
+const notAvailable = "_notAvailable_syk7m_40";
+const option = "_option_syk7m_43";
+const activeOption = "_activeOption_syk7m_46";
+const optionSelected = "_optionSelected_syk7m_49";
+const inactiveOption = "_inactiveOption_syk7m_52";
+const optionLabel = "_optionLabel_syk7m_55";
+const optionSubLabel = "_optionSubLabel_syk7m_58";
+const selectedLabel = "_selectedLabel_syk7m_61";
+const nonselectedLabel = "_nonselectedLabel_syk7m_64";
+const check = "_check_syk7m_67";
+const checkActive = "_checkActive_syk7m_70";
+const checkInactive = "_checkInactive_syk7m_73";
+const checkIcon$1 = "_checkIcon_syk7m_76";
+const checkIconSelected = "_checkIconSelected_syk7m_79";
+const checkIconUnselected = "_checkIconUnselected_syk7m_82";
+const loadMore = "_loadMore_syk7m_85";
+const selectedList = "_selectedList_syk7m_88";
+const selectedListItem = "_selectedListItem_syk7m_91";
 var style = {
-  "listBox-label": "_listBox-label_1e3pa_1",
-  "listBoxButton-container": "_listBoxButton-container_1e3pa_5",
+  "listBox-label": "_listBox-label_syk7m_1",
+  "listBoxButton-container": "_listBoxButton-container_syk7m_5",
   listBoxButton,
-  "listBox-option": "_listBox-option_1e3pa_13",
+  "listBox-option": "_listBox-option_syk7m_13",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -98209,16 +98179,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 +98198,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 +98213,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 +98224,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 +98235,7 @@ const ChartConfigure = ({
             }))
           })
         }), /* @__PURE__ */ jsx("div", {
-          className: styles$k.input,
+          className: styles$l.input,
           children: /* @__PURE__ */ jsx(InputField, {
             type: "number",
             label: "Right",
@@ -98292,9 +98262,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 +98275,7 @@ const ChartConfigure = ({
                 }))
               })
             }), /* @__PURE__ */ jsx("div", {
-              className: styles$k.input,
+              className: styles$l.input,
               children: /* @__PURE__ */ jsx(InputField, {
                 type: "number",
                 label: "Bottom",
@@ -98316,7 +98286,7 @@ const ChartConfigure = ({
                 }))
               })
             }), /* @__PURE__ */ jsx("div", {
-              className: styles$k.input,
+              className: styles$l.input,
               children: /* @__PURE__ */ jsx(InputField, {
                 type: "number",
                 label: "Left",
@@ -98327,7 +98297,7 @@ const ChartConfigure = ({
                 }))
               })
             }), /* @__PURE__ */ jsx("div", {
-              className: styles$k.input,
+              className: styles$l.input,
               children: /* @__PURE__ */ jsx(InputField, {
                 type: "number",
                 label: "Right",
@@ -98340,13 +98310,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 +98334,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 +98359,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 +98399,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: [{
@@ -98456,19 +98426,19 @@ 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 propertyButton = "_propertyButton_xpqpb_41";
-const settings = "_settings_xpqpb_49";
-const crossIcon = "_crossIcon_xpqpb_57";
-var styles$g = {
-  "chartButton-header": "_chartButton-header_xpqpb_1",
+const chartButtonContainer$1 = "_chartButtonContainer_1lfk7_9";
+const chartButtons$1 = "_chartButtons_1lfk7_17";
+const chartTypesButton = "_chartTypesButton_1lfk7_25";
+const button$4 = "_button_1lfk7_33";
+const propertyButton = "_propertyButton_1lfk7_41";
+const settings = "_settings_1lfk7_49";
+const crossIcon = "_crossIcon_1lfk7_57";
+var styles$h = {
+  "chartButton-header": "_chartButton-header_1lfk7_1",
   chartButtonContainer: chartButtonContainer$1,
   chartButtons: chartButtons$1,
   chartTypesButton,
-  button: button$3,
+  button: button$4,
   propertyButton,
   settings,
   crossIcon
@@ -98501,7 +98471,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 +98559,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 +98574,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 +98589,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 +98602,7 @@ const ChartConfig = ({
         type: "submit",
         variant: "primary",
         size: "default",
-        className: styles$f.doneBtn,
+        className: styles$g.doneBtn,
         onClick: () => {
           onSubmitSnakeyValues();
           setSettingsShow(false);
@@ -98644,10 +98614,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 +98627,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 +98647,7 @@ const ChartConfig = ({
             type: "submit",
             variant: "primary",
             size: "default",
-            className: styles$f.doneBtn,
+            className: styles$g.doneBtn,
             children: "Done"
           })]
         })]
@@ -98687,10 +98657,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 +98670,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 +98690,7 @@ const ChartConfig = ({
             type: "submit",
             variant: "primary",
             size: "default",
-            className: styles$f.doneBtn,
+            className: styles$g.doneBtn,
             children: "Done"
           })]
         })]
@@ -98731,7 +98701,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 +98713,7 @@ const ChartConfig = ({
         type: "button",
         variant: "primary",
         size: "default",
-        className: styles$f.doneBtn,
+        className: styles$g.doneBtn,
         onClick: () => setSettingsShow(false),
         children: "Done"
       })]
@@ -98751,11 +98721,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 +98740,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 +98767,7 @@ const ChartConfig = ({
           type: "submit",
           variant: "primary",
           size: "default",
-          className: styles$f.doneBtn,
+          className: styles$g.doneBtn,
           children: "Done"
         })]
       })]
@@ -99089,13 +99059,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 +99079,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 +99114,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 +99142,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, {
@@ -99198,35 +99168,35 @@ const ChartSettings = ({
     })]
   });
 };
-const searchCommand$1 = "_searchCommand_g94x7_9";
-const chartText = "_chartText_g94x7_25";
-const charts = "_charts_g94x7_33";
-const metricChart = "_metricChart_g94x7_41";
-const metricChartEmpty = "_metricChartEmpty_g94x7_49";
-const fullQuery = "_fullQuery_g94x7_73";
-const noQuery = "_noQuery_g94x7_81";
-const chartButtonContainer = "_chartButtonContainer_g94x7_105";
-const searchWrapper = "_searchWrapper_g94x7_113";
-const searchIcon = "_searchIcon_g94x7_121";
-const chartConfigure = "_chartConfigure_g94x7_129";
-const chartSettings = "_chartSettings_g94x7_137";
-const labels = "_labels_g94x7_145";
-const chartButtons = "_chartButtons_g94x7_153";
-const chartButton = "_chartButton_g94x7_97";
-var styles$e = {
-  "outputTab-header": "_outputTab-header_g94x7_1",
+const searchCommand$1 = "_searchCommand_jk2ki_9";
+const chartText = "_chartText_jk2ki_25";
+const charts = "_charts_jk2ki_33";
+const metricChart = "_metricChart_jk2ki_41";
+const metricChartEmpty = "_metricChartEmpty_jk2ki_49";
+const fullQuery = "_fullQuery_jk2ki_73";
+const noQuery = "_noQuery_jk2ki_81";
+const chartButtonContainer = "_chartButtonContainer_jk2ki_105";
+const searchWrapper = "_searchWrapper_jk2ki_113";
+const searchIcon = "_searchIcon_jk2ki_121";
+const chartConfigure = "_chartConfigure_jk2ki_129";
+const chartSettings = "_chartSettings_jk2ki_137";
+const labels = "_labels_jk2ki_145";
+const chartButtons = "_chartButtons_jk2ki_153";
+const chartButton = "_chartButton_jk2ki_97";
+var styles$f = {
+  "outputTab-header": "_outputTab-header_jk2ki_1",
   searchCommand: searchCommand$1,
-  "chartTab-container": "_chartTab-container_g94x7_17",
+  "chartTab-container": "_chartTab-container_jk2ki_17",
   chartText,
   charts,
   metricChart,
   metricChartEmpty,
-  "chartTab-wrapper": "_chartTab-wrapper_g94x7_57",
-  "chartTab-wrapper-head": "_chartTab-wrapper-head_g94x7_65",
+  "chartTab-wrapper": "_chartTab-wrapper_jk2ki_57",
+  "chartTab-wrapper-head": "_chartTab-wrapper-head_jk2ki_65",
   fullQuery,
   noQuery,
-  "tableTab-header": "_tableTab-header_g94x7_89",
-  "chartButton-header": "_chartButton-header_g94x7_97",
+  "tableTab-header": "_tableTab-header_jk2ki_89",
+  "chartButton-header": "_chartButton-header_jk2ki_97",
   chartButtonContainer,
   searchWrapper,
   searchIcon,
@@ -99294,9 +99264,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 +99275,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 +99297,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 +99332,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 +99341,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 +99361,7 @@ const ChartTab = ({
               setSettingsShow
             })
           }), isConfigureShow && /* @__PURE__ */ jsx("div", {
-            className: styles$e.chartConfigure,
+            className: styles$f.chartConfigure,
             children: /* @__PURE__ */ jsx(ChartConfigure, {
               setMargins,
               margins,
@@ -99424,21 +99394,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,23 +99443,25 @@ 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,
   table: table$3
 };
-const container$8 = "_container_m7ksd_1";
-const table$2 = "_table_m7ksd_9";
-const tableHead = "_tableHead_m7ksd_17";
-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 = {
+const container$8 = "_container_1uho5_1";
+const table$2 = "_table_1uho5_9";
+const tableHead = "_tableHead_1uho5_17";
+const tableRow$1 = "_tableRow_1uho5_25";
+const tableHeadCol$1 = "_tableHeadCol_1uho5_33";
+const tableRowCol$1 = "_tableRowCol_1uho5_41";
+const empty = "_empty_1uho5_49";
+const error$2 = "_error_1uho5_57";
+var styles$d = {
   container: container$8,
   table: table$2,
   tableHead,
+  tableRow: tableRow$1,
   tableHeadCol: tableHeadCol$1,
   tableRowCol: tableRowCol$1,
   empty,
@@ -99500,15 +99472,16 @@ 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", {
+          className: styles$d.tableRow,
           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 +99494,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 +99504,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 +99516,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
@@ -99564,36 +99537,36 @@ const InputTables = ({
     })
   });
 };
-const container$7 = "_container_1nrs1_1";
-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 = {
+const container$7 = "_container_12jmm_1";
+const header$1 = "_header_12jmm_5";
+const tabButton$1 = "_tabButton_12jmm_16";
+const selectedTab = "_selectedTab_12jmm_19";
+const table$1 = "_table_12jmm_22";
+var styles$c = {
   container: container$7,
   header: header$1,
-  "text-container": "_text-container_1nrs1_9",
-  "btn-container": "_btn-container_1nrs1_13",
+  "text-container": "_text-container_12jmm_9",
+  "btn-container": "_btn-container_12jmm_13",
   tabButton: tabButton$1,
   selectedTab,
   table: table$1
 };
-const tableData = "_tableData_1wybe_7";
-const tableHeadCol = "_tableHeadCol_1wybe_13";
-const tableRow = "_tableRow_1wybe_19";
-const tableRowCol = "_tableRowCol_1wybe_25";
-const row = "_row_1wybe_31";
-const container$6 = "_container_1wybe_37";
-const table = "_table_1wybe_1";
-const previewTable = "_previewTable_1wybe_49";
-const preview = "_preview_1wybe_49";
-const previewText = "_previewText_1wybe_61";
-const noData = "_noData_1wybe_67";
-const error$1 = "_error_1wybe_73";
-const errorMsg = "_errorMsg_1wybe_79";
-const tableIcon = "_tableIcon_1wybe_85";
-var styles$a = {
-  "table-loader-container": "_table-loader-container_1wybe_1",
+const tableData = "_tableData_1j4gc_7";
+const tableHeadCol = "_tableHeadCol_1j4gc_13";
+const tableRow = "_tableRow_1j4gc_19";
+const tableRowCol = "_tableRowCol_1j4gc_25";
+const row = "_row_1j4gc_31";
+const container$6 = "_container_1j4gc_37";
+const table = "_table_1j4gc_1";
+const previewTable = "_previewTable_1j4gc_49";
+const preview = "_preview_1j4gc_49";
+const previewText = "_previewText_1j4gc_61";
+const noData = "_noData_1j4gc_67";
+const error$1 = "_error_1j4gc_73";
+const errorMsg = "_errorMsg_1j4gc_79";
+const tableIcon = "_tableIcon_1j4gc_85";
+var styles$b = {
+  "table-loader-container": "_table-loader-container_1j4gc_1",
   tableData,
   tableHeadCol,
   tableRow,
@@ -99626,21 +99599,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 +99622,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 +99640,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 +99652,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 +99667,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 +99687,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 +99702,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 === OUTPUT_TABLE && styles$c.selectedTab}`,
           onClick: () => setSelectedTab(OUTPUT_TABLE),
           children: "Output Table"
         })]
@@ -99747,7 +99720,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,
@@ -99756,13 +99729,13 @@ const TableTab = ({
     })]
   });
 };
-const wrapper = "_wrapper_k8yqf_9";
-const searchCommand = "_searchCommand_k8yqf_12";
-const tabButton = "_tabButton_k8yqf_15";
-const tabActive = "_tabActive_k8yqf_18";
-var styles$9 = {
-  "main-container": "_main-container_k8yqf_1",
-  "outputTab-header": "_outputTab-header_k8yqf_5",
+const wrapper = "_wrapper_8x5tf_9";
+const searchCommand = "_searchCommand_8x5tf_12";
+const tabButton = "_tabButton_8x5tf_15";
+const tabActive = "_tabActive_8x5tf_18";
+var styles$a = {
+  "main-container": "_main-container_8x5tf_1",
+  "outputTab-header": "_outputTab-header_8x5tf_5",
   wrapper,
   searchCommand,
   tabButton,
@@ -99823,24 +99796,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,
@@ -99880,75 +99853,75 @@ const MetricOutput = ({
     })]
   });
 };
-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 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 = {
-  "form-container": "_form-container_1p48k_1",
-  "field-container": "_field-container_1p48k_5",
-  "field-label": "_field-label_1p48k_9",
-  "field-wrapper": "_field-wrapper_1p48k_13",
-  "field-inner-container": "_field-inner-container_1p48k_17",
-  "field-value": "_field-value_1p48k_21",
-  "field-add-btn": "_field-add-btn_1p48k_25",
-  "field-value-container": "_field-value-container_1p48k_29",
-  "field-prompt": "_field-prompt_1p48k_33",
+const group$1 = "_group_vmreb_1";
+const tooltipWrapper = "_tooltipWrapper_vmreb_37";
+const tooltip = "_tooltip_vmreb_37";
+const dropdown = "_dropdown_vmreb_49";
+const filterDropdown$1 = "_filterDropdown_vmreb_53";
+const filterValues = "_filterValues_vmreb_57";
+const columnText = "_columnText_vmreb_61";
+const disabled = "_disabled_vmreb_65";
+const checkIcon = "_checkIcon_vmreb_69";
+const generateButton = "_generateButton_vmreb_73";
+var styles$9 = {
+  "form-container": "_form-container_vmreb_1",
+  "field-container": "_field-container_vmreb_5",
+  "field-label": "_field-label_vmreb_9",
+  "field-wrapper": "_field-wrapper_vmreb_13",
+  "field-inner-container": "_field-inner-container_vmreb_17",
+  "field-value": "_field-value_vmreb_21",
+  "field-add-btn": "_field-add-btn_vmreb_25",
+  "field-value-container": "_field-value-container_vmreb_29",
+  "field-prompt": "_field-prompt_vmreb_33",
   group: group$1,
   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 inputLabel = "_inputLabel_1qsdd_13";
-const input = "_input_1qsdd_13";
-const menuContainer = "_menuContainer_1qsdd_25";
-const icon = "_icon_1qsdd_31";
-const container$5 = "_container_1qsdd_37";
-var styles$7 = {
-  button: button$2,
-  menu: menu$1,
+const button$3 = "_button_1qzqi_1";
+const menu$2 = "_menu_1qzqi_7";
+const inputLabel = "_inputLabel_1qzqi_13";
+const input = "_input_1qzqi_13";
+const menuContainer$1 = "_menuContainer_1qzqi_25";
+const icon = "_icon_1qzqi_31";
+const container$5 = "_container_1qzqi_37";
+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 buttonOpen = "_buttonOpen_1td7j_25";
-const menu = "_menu_1td7j_33";
-const enter = "_enter_1td7j_41";
-const enterFrom = "_enterFrom_1td7j_49";
-const enterTo = "_enterTo_1td7j_57";
-const leave = "_leave_1td7j_65";
-const leaveFrom = "_leaveFrom_1td7j_73";
-const leaveTo = "_leaveTo_1td7j_81";
-const center = "_center_1td7j_89";
-const top = "_top_1td7j_97";
-const bottom = "_bottom_1td7j_105";
-const left = "_left_1td7j_113";
-const right = "_right_1td7j_121";
-var styles$6 = {
+const container$4 = "_container_1qflp_1";
+const popover = "_popover_1qflp_9";
+const button$2 = "_button_1qflp_17";
+const buttonOpen = "_buttonOpen_1qflp_25";
+const menu$1 = "_menu_1qflp_33";
+const enter = "_enter_1qflp_41";
+const enterFrom = "_enterFrom_1qflp_49";
+const enterTo = "_enterTo_1qflp_57";
+const leave = "_leave_1qflp_65";
+const leaveFrom = "_leaveFrom_1qflp_73";
+const leaveTo = "_leaveTo_1qflp_81";
+const center = "_center_1qflp_89";
+const top = "_top_1qflp_97";
+const bottom = "_bottom_1qflp_105";
+const left = "_left_1qflp_113";
+const right = "_right_1qflp_121";
+var styles$7 = {
   container: container$4,
   popover,
-  button: button$1,
+  button: button$2,
   buttonOpen,
-  menu,
+  menu: menu$1,
   enter,
   enterFrom,
   enterTo,
@@ -99960,18 +99933,18 @@ var styles$6 = {
   bottom,
   left,
   right,
-  "left-top-end": "_left-top-end_1td7j_129",
-  "right-top-end": "_right-top-end_1td7j_137",
-  "left-bottom-end": "_left-bottom-end_1td7j_145",
-  "right-bottom-end": "_right-bottom-end_1td7j_153",
-  "top-left": "_top-left_1td7j_161",
-  "top-right": "_top-right_1td7j_169",
-  "bottom-left": "_bottom-left_1td7j_177",
-  "bottom-right": "_bottom-right_1td7j_185",
-  "left-top": "_left-top_1td7j_129",
-  "left-bottom": "_left-bottom_1td7j_145",
-  "right-top": "_right-top_1td7j_137",
-  "right-bottom": "_right-bottom_1td7j_153"
+  "left-top-end": "_left-top-end_1qflp_129",
+  "right-top-end": "_right-top-end_1qflp_137",
+  "left-bottom-end": "_left-bottom-end_1qflp_145",
+  "right-bottom-end": "_right-bottom-end_1qflp_153",
+  "top-left": "_top-left_1qflp_161",
+  "top-right": "_top-right_1qflp_169",
+  "bottom-left": "_bottom-left_1qflp_177",
+  "bottom-right": "_bottom-right_1qflp_185",
+  "left-top": "_left-top_1qflp_129",
+  "left-bottom": "_left-bottom_1qflp_145",
+  "right-top": "_right-top_1qflp_137",
+  "right-bottom": "_right-bottom_1qflp_153"
 };
 const PopoverMenu = ({
   className = "",
@@ -99991,26 +99964,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 +100041,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 +100064,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 +100333,7 @@ const ModalFooter = ({
   className
 }) => {
   return /* @__PURE__ */ jsx("section", {
-    className: `${styles$t.footer} ${className}`,
+    className: `${styles$u.footer} ${className}`,
     children: children2
   });
 };
@@ -100455,7 +100428,7 @@ const MetricForm = ({
     if (dateTimeColumnList.length) {
       setTimeColumn({
         value: dateTimeColumnList[0].name,
-        label: dateTimeColumnList[0].name
+        label: dateTimeColumnList[0].as
       });
     } else {
       setTimeColumn({
@@ -100542,26 +100515,27 @@ 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,
             options: dateTimeColumnList.map(({
-              name
+              name,
+              as
             }) => ({
               value: name,
-              label: name
+              label: as
             })),
             isDisabled: isDisableTimeColumn,
             labelVariant: "static",
@@ -100574,29 +100548,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 +100578,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 +100586,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 +100599,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,12 +100624,12 @@ 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, {
-                    value: `${metricAggregate.value}(${isBigQuery ? `${metricColumn.value}` : isMongoDb ? `\`${metricColumn.value}\`` : `"${metricColumn.value}"`})`,
-                    as: isBigQuery ? aliasValue || `_result` : aliasValue || `${metricAggregate.value}(${metricColumn.value})`
+                    value: `${metricAggregate.value}(${isBigQuery || isMySql ? `${metricColumn.value}` : isMongoDb ? `\`${metricColumn.value}\`` : `"${metricColumn.value}"`})`,
+                    as: isBigQuery ? aliasValue || `_result` : aliasValue || `${metricAggregate.value}(${metricColumn.label})`
                   }]);
                   setOpenMetric(false);
                 },
@@ -100676,22 +100650,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 +100673,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 +100681,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 +100694,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,13 +100713,13 @@ 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))
                     setColumns((prev) => [...prev, {
                       value: `${column2.value}`,
-                      as: aliasValue || `${column2.value}`
+                      as: aliasValue || `${column2.label}`
                     }]);
                   setOpenColumn(false);
                 },
@@ -100756,16 +100730,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 +100747,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 +100764,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 +100778,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 +100804,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 +100819,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 +100833,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 +100853,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,34 +100877,35 @@ 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: () => {
+        var _a2, _b2, _c2;
         setError("");
         setLoading(true);
         setData([]);
@@ -100942,8 +100917,26 @@ const MetricForm = ({
           companyId,
           userInputs: {
             columns: columns.map((c2) => isBigQuery || isMySql ? `${c2.value} AS ${c2.as} ` : isMongoDb ? `\`${c2.value}\` AS "${c2.as}"` : `"${c2.value}" AS "${c2.as}"`),
-            dimensions: isBigQuery || isMySql ? selectedDimensions : isMongoDb ? selectedDimensions.map((d2) => `\`${d2}\``) : selectedDimensions.map((d2) => `"${d2}"`),
-            metrics: metrics.map((m2) => isBigQuery || isMySql ? `${m2.value} AS ${m2.as}` : `${m2.value} AS "${m2.as}"`),
+            dimensions: isBigQuery || isMySql ? selectedDimensions.map((d2) => {
+              var _a3, _b3;
+              return {
+                name: (_a3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _a3.value,
+                as: (_b3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _b3.label
+              };
+            }) : isMongoDb ? selectedDimensions.map((d2) => {
+              var _a3, _b3;
+              return {
+                name: `\`${(_a3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _a3.value}\``,
+                as: (_b3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _b3.label
+              };
+            }) : selectedDimensions.map((d2) => {
+              var _a3, _b3;
+              return {
+                name: `"${(_a3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _a3.value}"`,
+                as: (_b3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _b3.label
+              };
+            }),
+            metrics: metrics.map((m2) => isBigQuery ? `${m2.value} AS ${m2.as}` : `${m2.value} AS "${m2.as}"`),
             sort: sort2,
             isSortDescending,
             filters: filters2,
@@ -100951,16 +100944,25 @@ const MetricForm = ({
             rowLimit: rowLimit.value,
             timeFilter: {
               filter: timeGrain,
-              column: isBigQuery || isMySql ? timeColumn.value : isMongoDb ? `\`${timeColumn.value}\`` : `"${timeColumn.value}"`,
+              column: isBigQuery || isMySql ? {
+                name: timeColumn.value,
+                as: (_a2 = columnList.find((c2) => c2.value === timeColumn.value)) == null ? void 0 : _a2.label
+              } : isMongoDb ? {
+                name: `\`${timeColumn.value}\``,
+                as: (_b2 = columnList.find((c2) => c2.value === timeColumn.value)) == null ? void 0 : _b2.label
+              } : {
+                name: `"${timeColumn.value}"`,
+                as: (_c2 = columnList.find((c2) => c2.value === timeColumn.value)) == null ? void 0 : _c2.label
+              },
               isInclude: isIncludeTime
             }
           }
         }, {
           onSuccess(data) {
-            var _a2, _b2, _c2;
-            const error2 = (_a2 = data.generateDatasetMetrics) == null ? void 0 : _a2.error;
-            const result = (_b2 = data.generateDatasetMetrics) == null ? void 0 : _b2.result;
-            const outputQuery = (_c2 = data.generateDatasetMetrics) == null ? void 0 : _c2.query;
+            var _a3, _b3, _c3;
+            const error2 = (_a3 = data.generateDatasetMetrics) == null ? void 0 : _a3.error;
+            const result = (_b3 = data.generateDatasetMetrics) == null ? void 0 : _b3.result;
+            const outputQuery = (_c3 = data.generateDatasetMetrics) == null ? void 0 : _c3.query;
             if (error2 || generateError) {
               setError(error2.message || SOMETHING_WENT_WRONG);
               setLoading(false);
@@ -100981,11 +100983,11 @@ const MetricForm = ({
   });
 };
 var MetricForm$1 = React__default.memo(MetricForm);
-const container$3 = "_container_n3hil_1";
-const header = "_header_n3hil_5";
-const enableGroupBy = "_enableGroupBy_n3hil_8";
-const enableGroupButton = "_enableGroupButton_n3hil_11";
-var styles$5 = {
+const container$3 = "_container_7zhjn_1";
+const header = "_header_7zhjn_5";
+const enableGroupBy = "_enableGroupBy_7zhjn_8";
+const enableGroupButton = "_enableGroupButton_7zhjn_11";
+var styles$6 = {
   container: container$3,
   header,
   enableGroupBy,
@@ -101006,14 +101008,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, {
@@ -101032,14 +101034,14 @@ const ConstructMetric = ({
   });
 };
 var ConstructMetric$1 = React__default.memo(ConstructMetric);
-const form$1 = "_form_2rli9_1";
-const container$2 = "_container_2rli9_7";
-const field = "_field_2rli9_13";
-const fieldLabel = "_fieldLabel_2rli9_19";
-const save = "_save_2rli9_25";
-const cancel = "_cancel_2rli9_31";
-const error = "_error_2rli9_37";
-var styles$4 = {
+const form$1 = "_form_qtwuf_1";
+const container$2 = "_container_qtwuf_7";
+const field = "_field_qtwuf_13";
+const fieldLabel = "_fieldLabel_qtwuf_19";
+const save = "_save_qtwuf_25";
+const cancel = "_cancel_qtwuf_31";
+const error = "_error_qtwuf_37";
+var styles$5 = {
   form: form$1,
   container: container$2,
   field,
@@ -101048,10 +101050,10 @@ var styles$4 = {
   cancel,
   error
 };
-const label$1 = "_label_xfwp3_1";
-const textarea = "_textarea_xfwp3_9";
-const resizable = "_resizable_xfwp3_17";
-var styles$3 = {
+const label$1 = "_label_1vo1x_1";
+const textarea = "_textarea_1vo1x_9";
+const resizable = "_resizable_1vo1x_17";
+var styles$4 = {
   label: label$1,
   textarea,
   resizable
@@ -101075,7 +101077,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 +101085,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,
@@ -101094,20 +101096,20 @@ const TextAreaField = ({
     })]
   });
 };
-const group = "_group_1yux9_1";
-const button = "_button_1yux9_7";
-const enabled = "_enabled_1yux9_19";
-const notenabled = "_notenabled_1yux9_25";
-const switchIcon = "_switchIcon_1yux9_31";
-const switchActive = "_switchActive_1yux9_37";
-const switchInactive = "_switchInactive_1yux9_43";
-const label = "_label_1yux9_49";
-const labelActive = "_labelActive_1yux9_55";
-const labelInactive = "_labelInactive_1yux9_61";
-var styles$2 = {
+const group = "_group_3fgum_1";
+const button$1 = "_button_3fgum_7";
+const enabled = "_enabled_3fgum_19";
+const notenabled = "_notenabled_3fgum_25";
+const switchIcon = "_switchIcon_3fgum_31";
+const switchActive = "_switchActive_3fgum_37";
+const switchInactive = "_switchInactive_3fgum_43";
+const label = "_label_3fgum_49";
+const labelActive = "_labelActive_3fgum_55";
+const labelInactive = "_labelInactive_3fgum_61";
+var styles$3 = {
   group,
-  button,
-  "switch": "_switch_1yux9_13",
+  button: button$1,
+  "switch": "_switch_3fgum_13",
   enabled,
   notenabled,
   switchIcon,
@@ -101128,22 +101130,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 +101185,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 +101218,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 +101226,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 +101237,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 +101251,7 @@ const ExternalMetric = ({
         type: "submit",
         variant: "primary",
         size: "small",
-        className: styles$4.save,
+        className: styles$5.save,
         isDisabled: !options2.length || !dashboardIds.length,
         children: "Save"
       })]
@@ -101429,11 +101431,22 @@ const useExternalMetric = ({
   };
   return { createExternalMetric, error: error2 };
 };
+const mdiPlus = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z"
+  })
+});
 const EmbeddedMetricCreation = ({
   clientId,
   companyId,
   mode,
-  externalDashboardId
+  externalDashboardId,
+  variant = "static"
 }) => {
   var _a2;
   const [isLoading, setLoading] = useState(false);
@@ -101476,10 +101489,11 @@ const EmbeddedMetricCreation = ({
   const columnList = useMemo(() => {
     var _a3;
     return ((_a3 = selectedTableData == null ? void 0 : selectedTableData.columns) == null ? void 0 : _a3.map(({
-      name
+      name,
+      as
     }) => ({
       value: name,
-      label: name
+      label: as
     }))) || [];
   }, [selectedTableData]);
   useEffect(() => {
@@ -101666,10 +101680,13 @@ const EmbeddedMetricCreation = ({
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Button, {
       type: "button",
-      variant: "primary",
+      variant: variant === "floating" ? "custom" : "primary",
       size: "large",
+      className: variant === "floating" ? styles$p.floatingCreateButton : "",
       onClick: () => setShowMetricCreateModal(true),
-      children: "Create Metric"
+      children: variant === "floating" ? /* @__PURE__ */ jsx(mdiPlus, {
+        className: styles$p.floatingCreateButtonIcon
+      }) : "Create Metric"
     }), /* @__PURE__ */ jsx(Modal$1, {
       headerTitle: "Create Metric",
       isOpen: isShowMetricCreateModal,
@@ -101683,7 +101700,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 +101758,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, {
@@ -101798,16 +101815,16 @@ const useEmbeddedDashboard = (token) => {
     }
   };
 };
-const container$1 = "_container_16xx4_1";
-const form = "_form_16xx4_7";
-const title = "_title_16xx4_13";
-const apply = "_apply_16xx4_19";
-const reset = "_reset_16xx4_25";
-const filters = "_filters_16xx4_31";
-const filterItem = "_filterItem_16xx4_37";
-const filterItemOperator = "_filterItemOperator_16xx4_43";
-const remove = "_remove_16xx4_49";
-var styles$1 = {
+const container$1 = "_container_lfh6d_1";
+const form = "_form_lfh6d_7";
+const title = "_title_lfh6d_13";
+const apply = "_apply_lfh6d_19";
+const reset = "_reset_lfh6d_25";
+const filters = "_filters_lfh6d_31";
+const filterItem = "_filterItem_lfh6d_37";
+const filterItemOperator = "_filterItemOperator_lfh6d_43";
+const remove = "_remove_lfh6d_49";
+var styles$2 = {
   container: container$1,
   form,
   title,
@@ -101818,6 +101835,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 +102010,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 +102047,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 +102060,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 +102073,7 @@ const FilterField = ({
             isSearchEnabled: true,
             label: "Filter Value",
             labelVariant: "static",
-            className: "mt-3",
+            className: styles$1.filterDropdown,
             autoSelected: false
           })
         })
@@ -102137,15 +102170,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 +102196,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, {})
             })]
@@ -102196,6 +102229,16 @@ const MetricFilters = ({
   });
 };
 var MetricFilters$1 = React__default.memo(MetricFilters);
+const icOutlineFilterAltOff = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "m16.95 6l-3.57 4.55l1.43 1.43c1.03-1.31 4.98-6.37 4.98-6.37A.998.998 0 0 0 19 4H6.83l2 2h8.12zM2.81 2.81L1.39 4.22L10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-2.17l5.78 5.78l1.41-1.41L2.81 2.81z"
+  })
+});
 const container = "_container_7vfcn_1";
 const windowIcon = "_windowIcon_7vfcn_7";
 var styles = {
@@ -102240,9 +102283,67 @@ const ErrorFallback = () => {
   });
 };
 var ErrorFallback$1 = React__default.memo(ErrorFallback);
+const applyTheme = (theme2) => {
+  const root = document.documentElement;
+  if (theme2.colors)
+    Object.entries(theme2.colors).forEach(([key, value]) => {
+      root.style.setProperty(`--databrainhq-plugin-color-${key}`, `${value}`);
+    });
+  if (theme2.border)
+    Object.entries(theme2.border).forEach(([key, value]) => {
+      root.style.setProperty(`--databrainhq-plugin-border-${key}`, `${value}`);
+    });
+  if (theme2.shadow)
+    Object.entries(theme2.shadow).forEach(([key, value]) => {
+      root.style.setProperty(`--databrainhq-plugin-shadow-${key}`, `${value}`);
+    });
+  if (theme2.typography)
+    Object.entries(theme2.typography).forEach(([key, value]) => {
+      root.style.setProperty(
+        `--databrainhq-plugin-typography-${key}`,
+        `${value}`
+      );
+    });
+  if (theme2.breakpoint)
+    Object.entries(theme2.breakpoint).forEach(([key, value]) => {
+      root.style.setProperty(
+        `--databrainhq-plugin-breakpoint-${key}`,
+        `${value}`
+      );
+    });
+};
+const akarIconsSettingsHorizontal = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsxs("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2,
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M3 5h4m14 0H11m-8 7h12m6 0h-2M3 19h2m16 0H9"
+    }), /* @__PURE__ */ jsx("circle", {
+      cx: 9,
+      cy: 5,
+      r: 2
+    }), /* @__PURE__ */ jsx("circle", {
+      cx: 17,
+      cy: 12,
+      r: 2
+    }), /* @__PURE__ */ jsx("circle", {
+      cx: 7,
+      cy: 19,
+      r: 2
+    })]
+  })
+});
 const queryClient = new QueryClient();
 const EmbeddedDashboard = React__default.memo(({
-  token
+  token,
+  options: options2,
+  theme: theme2
 }) => {
   var _a2, _b2;
   const {
@@ -102256,42 +102357,56 @@ const EmbeddedDashboard = React__default.memo(({
   });
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$y["embedDashboard-container"],
+      className: styles$A["embedDashboard-container"],
       children: [((_a2 = data.externalDashboard) == null ? void 0 : _a2.id) && !isLoading && /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsxs("div", {
-          className: styles$y["embedDashboard-header"],
-          children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(Button, {
-            type: "button",
-            variant: "custom",
-            className: styles$y.filter,
-            onClick: () => setShowFilters((s2) => !s2),
-            children: /* @__PURE__ */ jsx(icOutlineFilterAlt, {
-              color: "#182C60"
+          className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$A["embedDashboard-header-floating"] : styles$A["embedDashboard-header-static"],
+          children: [(options2 == null ? void 0 : options2.headerVariant) === "floating" && /* @__PURE__ */ jsx("span", {
+            className: styles$A.floatingButton,
+            children: /* @__PURE__ */ jsx(akarIconsSettingsHorizontal, {
+              className: styles$A.floatingButtonIcon
             })
-          }) : null, /* @__PURE__ */ jsx(EmbeddedMetricCreation, {
-            clientId: data.clientId,
-            companyId: data.companyId,
-            mode: data.mode,
-            externalDashboardId: data.externalDashboard.id
+          }), /* @__PURE__ */ jsxs("div", {
+            className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$A.floatingContainer : styles$A.staticContainer,
+            children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(Button, {
+              type: "button",
+              variant: "custom",
+              size: "large",
+              className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$A.floatingFilterButton : styles$A.filter,
+              onClick: () => setShowFilters((s2) => !s2),
+              children: isShowFilters ? /* @__PURE__ */ jsx(icOutlineFilterAltOff, {
+                className: styles$A.floatingFilterButtonIcon
+              }) : /* @__PURE__ */ jsx(icOutlineFilterAlt, {
+                className: styles$A.floatingFilterButtonIcon
+              })
+            }) : null, !(options2 == null ? void 0 : options2.disableMetricCreation) && /* @__PURE__ */ jsx(EmbeddedMetricCreation, {
+              clientId: data.clientId,
+              companyId: data.companyId,
+              mode: data.mode,
+              externalDashboardId: data.externalDashboard.id,
+              variant: options2 == null ? void 0 : options2.headerVariant
+            })]
           })]
         }), /* @__PURE__ */ jsxs("div", {
-          className: styles$y["embedDashboard-wrapper"],
+          className: styles$A["embedDashboard-wrapper"],
           children: [data.externalDashboard.filters.length && isShowFilters ? /* @__PURE__ */ jsx(MetricFilters$1, {
             companyId: data.companyId,
             filters: data.externalDashboard.filters,
             onApply: (values) => setGlobalFilters(values)
           }) : null, /* @__PURE__ */ jsx(ExternalMetricList$1, {
             client: data.clientId,
-            company: data.companyId,
             isLiveMode: data.mode,
             params: Array.isArray(data.rlsSettings) ? data.rlsSettings : [],
             externalDashboardMetrics: data.externalDashboardMetrics,
             isMetricListLoading: isLoading,
-            globalFilters
+            globalFilters,
+            breakpoint: theme2 == null ? void 0 : theme2.breakpoint,
+            layoutCols: theme2 == null ? void 0 : theme2.metricLayoutCols,
+            chartColors: options2 == null ? void 0 : options2.chartColors
           })]
         })]
       }), isLoading && /* @__PURE__ */ jsx("div", {
-        className: styles$y["alt-container"],
+        className: styles$A["alt-container"],
         children: /* @__PURE__ */ jsx(eosIconsLoading, {
           style: {
             width: "50px",
@@ -102300,21 +102415,31 @@ const EmbeddedDashboard = React__default.memo(({
           }
         })
       }), !isLoading && !((_b2 = data.externalDashboard) == null ? void 0 : _b2.id) && /* @__PURE__ */ jsx("div", {
-        className: styles$y["alt-container"],
+        className: styles$A["alt-container"],
         children: "Invalid token or Dashboard id"
       })]
     })
   });
 });
 const Dashboard = React__default.memo(({
-  token
-}) => /* @__PURE__ */ jsx(ErrorBoundary, {
-  FallbackComponent: ErrorFallback$1,
-  children: /* @__PURE__ */ jsx(QueryClientProvider, {
-    client: queryClient,
-    children: /* @__PURE__ */ jsx(EmbeddedDashboard, {
-      token
+  token,
+  options: options2,
+  theme: theme2
+}) => {
+  useEffect(() => {
+    if (!theme2 || !Object.keys(theme2).length)
+      return;
+    applyTheme(theme2);
+  }, [theme2]);
+  return /* @__PURE__ */ jsx(ErrorBoundary, {
+    FallbackComponent: ErrorFallback$1,
+    children: /* @__PURE__ */ jsx(QueryClientProvider, {
+      client: queryClient,
+      children: /* @__PURE__ */ jsx(EmbeddedDashboard, {
+        token,
+        options: options2
+      })
     })
-  })
-}));
+  });
+});
 export { Dashboard };