@databrainhq/plugin 0.8.1 → 0.8.2

package/dist/index.es.js

@@ -2641,17 +2641,17 @@ var classnames$1 = { exports: {} };
 })(classnames$1);
 var classnames = classnames$1.exports;
 var styles$E = {
-  "btn-primary": "_btn-primary_1gon7_1",
-  "btn-secondary": "_btn-secondary_1gon7_5",
-  "btn-reject": "_btn-reject_1gon7_9",
-  "btn-outlined": "_btn-outlined_1gon7_14",
-  "btn-tertiary": "_btn-tertiary_1gon7_18",
-  "btn-default": "_btn-default_1gon7_22",
-  "btn-large": "_btn-large_1gon7_25",
-  "btn-small": "_btn-small_1gon7_28",
-  "btn-xs": "_btn-xs_1gon7_31",
-  "btn-medium": "_btn-medium_1gon7_34",
-  "btn-11rem": "_btn-11rem_1gon7_38"
+  "btn-primary": "_btn-primary_17kvk_1",
+  "btn-secondary": "_btn-secondary_17kvk_5",
+  "btn-reject": "_btn-reject_17kvk_9",
+  "btn-outlined": "_btn-outlined_17kvk_14",
+  "btn-tertiary": "_btn-tertiary_17kvk_18",
+  "btn-default": "_btn-default_17kvk_22",
+  "btn-large": "_btn-large_17kvk_25",
+  "btn-small": "_btn-small_17kvk_28",
+  "btn-xs": "_btn-xs_17kvk_31",
+  "btn-medium": "_btn-medium_17kvk_34",
+  "btn-11rem": "_btn-11rem_17kvk_38"
 };
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -6687,8 +6687,10 @@ const useCompanySubsetTableDataMutation = (options2) => useMutation(
   options2
 );
 const EmbeddedDashboardMetricsDocument = `
-    query EmbeddedDashboardMetrics($where: externalDashboardMetrics_bool_exp) {
-  externalDashboardMetrics(where: $where) {
+    query EmbeddedDashboardMetrics($externalDashboardId: String! = "") {
+  externalDashboardMetrics(
+    where: {externalDashboard: {externalDashboardId: {_eq: $externalDashboardId}}, externalMetric: {isMarkedDeleted: {_eq: false}}}
+  ) {
     externalMetricId
     externalDashboardId
     externalMetric {
@@ -7028,20 +7030,16 @@ const useEmbeddedDashboard = (token) => {
     isLoading: isExternalDashboardMetricsDataLoading
   } = useEmbeddedDashboardMetricsQuery(
     {
-      where: {
-        externalDashboard: {
-          externalDashboardId: { _eq: externalDashboardId },
-          externalDashboardMetrics: {
-            externalMetric: { isMarkedDeleted: { _eq: false } }
-          }
-        }
-      }
+      externalDashboardId
     },
     { enabled: !!externalDashboardId }
   );
-  const { data: idData, isLoading: isLoadingId } = useGetExternalDashboardIdQuery({ externalDashboardId });
+  const { data: idData, isLoading: isLoadingId } = useGetExternalDashboardIdQuery(
+    { externalDashboardId },
+    { enabled: !!externalDashboardId }
+  );
   const externalDashboardMetrics = externalDashboardMetricsData == null ? void 0 : externalDashboardMetricsData.externalDashboardMetrics;
-  const { data: accessData, isLoading: isLoadingAccessData } = useMetricAccessQuery({ companyId });
+  const { data: accessData, isLoading: isLoadingAccessData } = useMetricAccessQuery({ companyId }, { enabled: !!companyId });
   const isAllowedToCreateMetrics = (accessData == null ? void 0 : accessData.companySubsetTables.length) ? accessData.companySubsetTables[0].isAllowMetricCreation && !isTestKey : false;
   const isAllowedToDeleteMetrics = (accessData == null ? void 0 : accessData.companySubsetTables.length) ? accessData.companySubsetTables[0].isAllowMetricDeletion && !isTestKey : false;
   return {
@@ -7052,6 +7050,7 @@ const useEmbeddedDashboard = (token) => {
       mode,
       externalDashboardMetrics,
       externalDashboard: idData == null ? void 0 : idData.externalDashboards[0],
+      externalDashboardId,
       rlsSettings,
       companyTenancyType: companyTenancyType || "TABLE",
       isAllowedToCreateMetrics,
@@ -7323,13 +7322,92 @@ const useOutsideAlerter = ({
     };
   }, [wrapRef, onOutsideClick]);
 };
+const useApplyAdminTheme = (adminTheme) => {
+  useEffect(() => {
+    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j;
+    if (!adminTheme) {
+      const adminStyles2 = document.querySelector("#dbn-admin-styles");
+      if (adminStyles2)
+        document.head.removeChild(adminStyles2);
+      return;
+    }
+    const adminStyles = document.getElementById("dbn-admin-styles") || document.createElement("style");
+    adminStyles.setAttribute("type", "text/css");
+    adminStyles.setAttribute("id", "dbn-admin-styles");
+    let style2 = "";
+    if ((_a2 = adminTheme.general.fontFamily) == null ? void 0 : _a2.trim()) {
+      style2 = `
+      #dbn-dashboard { 
+        font-family: ${adminTheme.general.fontFamily} !important;
+      }`;
+    }
+    if ((_b2 = adminTheme.dashboard.backgroundColor) == null ? void 0 : _b2.trim()) {
+      style2 = `${style2}
+      #dbn-dashboard {
+        background-color: ${adminTheme.dashboard.backgroundColor} !important;
+      }`;
+    }
+    if ((_c2 = adminTheme.dashboard.ctaColor) == null ? void 0 : _c2.trim()) {
+      style2 = `${style2} 
+      .dbn-btn-primary {
+        background-color: ${adminTheme.dashboard.ctaColor} !important;
+      }`;
+    }
+    if ((_d = adminTheme.dashboard.ctaTextColor) == null ? void 0 : _d.trim()) {
+      style2 = `${style2} 
+      .dbn-btn-primary {
+        color: ${adminTheme.dashboard.ctaTextColor} !important;
+      }`;
+    }
+    if ((_e = adminTheme.cardTitle.fontWeight) == null ? void 0 : _e.trim()) {
+      style2 = `${style2} 
+      .dbn-metric-card-title {
+        font-weight: ${adminTheme.cardTitle.fontWeight} !important;
+      }`;
+    }
+    if ((_f = adminTheme.cardTitle.fontSize) == null ? void 0 : _f.trim()) {
+      style2 = `${style2} 
+      .dbn-metric-card-title {
+        font-size: ${adminTheme.cardTitle.fontSize} !important;
+      }`;
+    }
+    if ((_g = adminTheme.cardTitle.color) == null ? void 0 : _g.trim()) {
+      style2 = `${style2} 
+      .dbn-metric-card-title {
+        color: ${adminTheme.cardTitle.color} !important;
+      }`;
+    }
+    if ((_h = adminTheme.cardDescription.fontWeight) == null ? void 0 : _h.trim()) {
+      style2 = `${style2} 
+      .dbn-metric-card-description {
+        font-weight: ${adminTheme.cardDescription.fontWeight} !important;
+      }`;
+    }
+    if ((_i = adminTheme.cardDescription.fontSize) == null ? void 0 : _i.trim()) {
+      style2 = `${style2} 
+      .dbn-metric-card-description {
+        font-size: ${adminTheme.cardDescription.fontSize} !important;
+      }`;
+    }
+    if ((_j = adminTheme.cardDescription.color) == null ? void 0 : _j.trim()) {
+      style2 = `${style2} 
+      .dbn-metric-card-description {
+        color: ${adminTheme.cardDescription.color} !important;
+      }`;
+    }
+    adminStyles.innerHTML = "";
+    adminStyles.innerHTML = style2;
+    document.head.appendChild(adminStyles);
+  }, [adminTheme]);
+};
 var index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   useEmbeddedDashboard,
   useExternalMetric,
   useGenerateDatasetMetrics,
   useGenerateEmbeddedMetric,
-  useOutsideAlerter
+  useOutsideAlerter,
+  useApplyAdminTheme
 }, Symbol.toStringTag, { value: "Module" }));
 const materialSymbolsKeyboardArrowDown = (props) => /* @__PURE__ */ jsx("svg", {
   viewBox: "0 0 24 24",
@@ -82531,22 +82609,6 @@ var styles$k = {
   "save-btn": "_save-btn_t2r6v_17",
   "save-btn-icon": "_save-btn-icon_t2r6v_21"
 };
-const ThemeContext = createContext(null);
-const useGlobalTheme = () => {
-  return useContext(ThemeContext);
-};
-const GlobalThemeProvider = ({
-  children: children2
-}) => {
-  const [globalTheme, setGlobalTheme] = useState();
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-    value: {
-      globalTheme,
-      setGlobalTheme
-    },
-    children: children2
-  });
-};
 const Header = ({
   setShowMetricCreateModal,
   isDisableSaveBtn,
@@ -82555,20 +82617,6 @@ const Header = ({
   setShowSaveMetricModal,
   setShowSqlModal
 }) => {
-  const {
-    globalTheme
-  } = useGlobalTheme();
-  const saveDashboardStyle = useMemo(() => {
-    var _a2, _b2;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a2 = globalTheme.dashboard.ctaColor) == null ? void 0 : _a2.trim())
-      style2.backgroundColor = globalTheme.dashboard.ctaColor.trim() || void 0;
-    if ((_b2 = globalTheme.dashboard.ctaTextColor) == null ? void 0 : _b2.trim())
-      style2.color = globalTheme.dashboard.ctaTextColor.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$k["header-container"],
     children: [/* @__PURE__ */ jsxs("div", {
@@ -82604,10 +82652,8 @@ const Header = ({
         className: styles$k["save-btn"],
         isDisabled: isDisableSaveBtn,
         onClick: () => setShowSaveMetricModal(true),
-        style: saveDashboardStyle,
         children: [/* @__PURE__ */ jsx(Icons, {
-          name: "save-icon",
-          className: styles$k["save-btn-icon"]
+          name: "save-icon"
         }), "Save to Dashboard"]
       })]
     })]
@@ -83810,13 +83856,10 @@ const ChartTab = ({
   setBackGroundColor,
   headerChild,
   tableSettings,
-  setTableSettings
+  setTableSettings,
+  chartColors
 }) => {
-  var _a2, _b2, _c2, _d;
   const chartRef = useRef(null);
-  const {
-    globalTheme
-  } = useGlobalTheme();
   const [isSettingsShow, setSettingsShow] = useState(false);
   const [isShowFullScreen, setShowFullScreen] = useState(false);
   const handleChartRightClick = (params) => {
@@ -83941,7 +83984,7 @@ const ChartTab = ({
             sankeyData,
             singleValueData: singleValueData2,
             margins,
-            colors: globalTheme ? (_b2 = (_a2 = globalTheme.chart.palettes) == null ? void 0 : _a2.find((palette) => palette.name === globalTheme.chart.selected)) == null ? void 0 : _b2.colors : void 0,
+            colors: chartColors,
             legendSettings,
             labelSettings,
             axisSettings,
@@ -83999,7 +84042,7 @@ const ChartTab = ({
         sankeyData,
         singleValueData: singleValueData2,
         margins,
-        colors: globalTheme ? (_d = (_c2 = globalTheme.chart.palettes) == null ? void 0 : _c2.find((palette) => palette === globalTheme.chart.selected)) == null ? void 0 : _d.colors : void 0,
+        colors: chartColors,
         legendSettings,
         labelSettings,
         axisSettings,
@@ -84383,7 +84426,8 @@ const MetricOutput = ({
   isEnableGroupBy,
   backGroundColor,
   setBackGroundColor,
-  moreTabs
+  moreTabs,
+  chartColors
 }) => {
   var _a2;
   const [selectedTab2, setSelectedTab] = useState(TABLE_TAB);
@@ -84457,7 +84501,8 @@ const MetricOutput = ({
         backGroundColor,
         setBackGroundColor,
         tableSettings,
-        setTableSettings
+        setTableSettings,
+        chartColors
       }), (_a2 = moreTabs == null ? void 0 : moreTabs.find((tabObj) => tabObj.name === selectedTab2)) == null ? void 0 : _a2.tabContent]
     })]
   });
@@ -84980,9 +85025,6 @@ const MetricForm = ({
   clientId,
   clientColumn
 }) => {
-  const {
-    globalTheme
-  } = useGlobalTheme();
   const [metrics, setMetrics] = useState([]);
   const [timeGrainValue, setTimeGrainValue] = useState("");
   const [timeColumn, setTimeColumn] = useState({
@@ -85148,17 +85190,6 @@ const MetricForm = ({
     if (isEnableGroupBy)
       setSelectedGroupBy(selectedDimensions);
   }, [selectedDimensions, isEnableGroupBy]);
-  const primaryButtonStyle = useMemo(() => {
-    var _a2, _b2;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a2 = globalTheme.dashboard.ctaColor) == null ? void 0 : _a2.trim())
-      style2.backgroundColor = globalTheme.dashboard.ctaColor.trim() || void 0;
-    if ((_b2 = globalTheme.dashboard.ctaTextColor) == null ? void 0 : _b2.trim())
-      style2.color = globalTheme.dashboard.ctaTextColor.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$8["form-container"],
     children: [!isDisableTimeColumn && /* @__PURE__ */ jsxs("div", {
@@ -85274,7 +85305,6 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
-                style: primaryButtonStyle,
                 className: styles$8.disabled,
                 isDisabled: !metricAggregate.value || !metricColumn.value,
                 onClick: () => {
@@ -85366,7 +85396,6 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
-                style: primaryButtonStyle,
                 className: styles$8.disabled,
                 isDisabled: !column2.value,
                 onClick: () => {
@@ -85464,7 +85493,6 @@ const MetricForm = ({
                 variant: "primary",
                 size: "small",
                 isDisabled: !filterColumn.value || !operator.value || !isFilterValue,
-                style: primaryButtonStyle,
                 className: styles$8.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}'` : ""}`}`]);
@@ -85521,7 +85549,6 @@ const MetricForm = ({
                 size: "small",
                 isDisabled: !sortColumn.value || isDisableSorting,
                 className: styles$8.disabled,
-                style: primaryButtonStyle,
                 onClick: () => {
                   if (!columns.length) {
                     setSort(`${sortAggregate.value}(${isBigQuery || isMySql ? `${sortColumn.value}` : isMongoDb ? `\`${sortColumn.value}\`` : `"${sortColumn.value}"`})`);
@@ -85572,7 +85599,6 @@ const MetricForm = ({
       variant: "primary",
       className: styles$8.generateButton,
       isDisabled: isGeneratingDataset || isDisableGenerate,
-      style: primaryButtonStyle,
       onClick: () => {
         var _a2, _b2, _c2;
         setError("");
@@ -85722,12 +85748,10 @@ const EmbeddedMetricCreation = ({
   companyId,
   mode,
   externalDashboardId,
-  variant = "static"
+  variant = "static",
+  chartColors
 }) => {
   var _a2;
-  const {
-    globalTheme
-  } = useGlobalTheme();
   const [isLoading, setLoading] = useState(false);
   const [error2, setError] = useState("");
   const [data2, setData] = useState();
@@ -85985,17 +86009,6 @@ const EmbeddedMetricCreation = ({
       updateGroupData(data2, [selectedGroupBy[0]], selectedGroupBy, setGroupedData);
     }
   }, [groupedData, isEnableGroupBy, selectedGroupBy]);
-  const createMetricStyle = useMemo(() => {
-    var _a3, _b2;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a3 = globalTheme.dashboard.ctaColor) == null ? void 0 : _a3.trim())
-      style2.backgroundColor = globalTheme.dashboard.ctaColor.trim() || void 0;
-    if ((_b2 = globalTheme.dashboard.ctaTextColor) == null ? void 0 : _b2.trim())
-      style2.color = globalTheme.dashboard.ctaTextColor.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Button, {
       type: "button",
@@ -86003,7 +86016,6 @@ const EmbeddedMetricCreation = ({
       size: "large",
       className: variant === "floating" ? styles$j.floatingCreateButton : "",
       onClick: () => setShowMetricCreateModal(true),
-      style: createMetricStyle,
       children: variant === "floating" ? /* @__PURE__ */ jsx(mdiPlus, {
         className: styles$j.floatingCreateButtonIcon
       }) : "Create Metric"
@@ -86079,7 +86091,8 @@ const EmbeddedMetricCreation = ({
           customSettings,
           setCustomSettings,
           tableSettings,
-          setTableSettings
+          setTableSettings,
+          chartColors
         })]
       })
     }), /* @__PURE__ */ jsx(Modal, {
@@ -91360,34 +91373,36 @@ var styles$4 = {
   "noMetric-wrapper": "_noMetric-wrapper_1b506_25",
   "alt-container": "_alt-container_1b506_33"
 };
-const cardContainer = "_cardContainer_btizd_1";
-const listHeader = "_listHeader_btizd_9";
-const metricName = "_metricName_btizd_17";
-const metricDescription = "_metricDescription_btizd_25";
-const popup = "_popup_btizd_33";
-const metricFilter$1 = "_metricFilter_btizd_41";
-const popupIcon = "_popupIcon_btizd_49";
-const popupMenu = "_popupMenu_btizd_57";
-const popupItem = "_popupItem_btizd_65";
-const popupItemIcon = "_popupItemIcon_btizd_73";
-const csvBtn = "_csvBtn_btizd_81";
-const deleteBtn = "_deleteBtn_btizd_89";
-const metricData = "_metricData_btizd_97";
-const singleValueData = "_singleValueData_btizd_105";
-const singleValue = "_singleValue_btizd_105";
-const noData = "_noData_btizd_121";
-const noDataContent = "_noDataContent_btizd_129";
-const noDataText = "_noDataText_btizd_137";
-const loading$1 = "_loading_btizd_145";
-const features = "_features_btizd_153";
-const fullscreen$1 = "_fullscreen_btizd_161";
-const deleteModal = "_deleteModal_btizd_169";
-const cancelBtn = "_cancelBtn_btizd_177";
-const warningIcon = "_warningIcon_btizd_185";
+const cardContainer = "_cardContainer_1ax68_1";
+const listHeader = "_listHeader_1ax68_9";
+const metricName = "_metricName_1ax68_17";
+const metricTitle = "_metricTitle_1ax68_25";
+const metricDescription = "_metricDescription_1ax68_33";
+const popup = "_popup_1ax68_41";
+const metricFilter$1 = "_metricFilter_1ax68_49";
+const popupIcon = "_popupIcon_1ax68_57";
+const popupMenu = "_popupMenu_1ax68_65";
+const popupItem = "_popupItem_1ax68_73";
+const popupItemIcon = "_popupItemIcon_1ax68_81";
+const csvBtn = "_csvBtn_1ax68_89";
+const deleteBtn = "_deleteBtn_1ax68_97";
+const metricData = "_metricData_1ax68_105";
+const singleValueData = "_singleValueData_1ax68_113";
+const singleValue = "_singleValue_1ax68_113";
+const noData = "_noData_1ax68_129";
+const noDataContent = "_noDataContent_1ax68_137";
+const noDataText = "_noDataText_1ax68_145";
+const loading$1 = "_loading_1ax68_153";
+const features = "_features_1ax68_161";
+const fullscreen$1 = "_fullscreen_1ax68_169";
+const deleteModal = "_deleteModal_1ax68_177";
+const cancelBtn = "_cancelBtn_1ax68_185";
+const warningIcon = "_warningIcon_1ax68_193";
 var styles$3 = {
   cardContainer,
   listHeader,
   metricName,
+  metricTitle,
   metricDescription,
   popup,
   metricFilter: metricFilter$1,
@@ -91809,7 +91824,7 @@ const useUnderlyingData = ({
   }) => {
     const sqlQuery = getSqlStatement({
       query,
-      limit: "100",
+      limit: "5000",
       clientName,
       tenancyType,
       values
@@ -91853,11 +91868,8 @@ const MetricCard = ({
   renderHeaderName,
   onDelete
 }) => {
-  var _a2, _b2, _c2;
+  var _a2;
   const chartRef = useRef(null);
-  const {
-    globalTheme
-  } = useGlobalTheme();
   const filterValues2 = {};
   if (param == null ? void 0 : param.values) {
     for (const key in param.values) {
@@ -92112,32 +92124,6 @@ const MetricCard = ({
       } : rls));
     }
   };
-  const titleStyle = useMemo(() => {
-    var _a3, _b3, _c3;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a3 = globalTheme.cardTitle.fontWeight) == null ? void 0 : _a3.trim())
-      style2.fontWeight = globalTheme.cardTitle.fontWeight.trim() || void 0;
-    if ((_b3 = globalTheme.cardTitle.color) == null ? void 0 : _b3.trim())
-      style2.color = globalTheme.cardTitle.color.trim() || void 0;
-    if ((_c3 = globalTheme.cardTitle.fontSize) == null ? void 0 : _c3.trim())
-      style2.color = globalTheme.cardTitle.fontSize.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
-  const descriptionStyle = useMemo(() => {
-    var _a3, _b3, _c3;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a3 = globalTheme.cardDescription.fontWeight) == null ? void 0 : _a3.trim())
-      style2.fontWeight = globalTheme.cardDescription.fontWeight.trim() || void 0;
-    if ((_b3 = globalTheme.cardDescription.color) == null ? void 0 : _b3.trim())
-      style2.color = globalTheme.cardDescription.color.trim() || void 0;
-    if ((_c3 = globalTheme.cardDescription.fontSize) == null ? void 0 : _c3.trim())
-      style2.color = globalTheme.cardDescription.fontSize.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
   const [isShowChartPopup, setShowChartPopup] = useState(false);
   const [chartParams, setChartParams] = useState();
   const handleChartRightClick = (params) => {
@@ -92171,22 +92157,22 @@ const MetricCard = ({
       },
       children: [/* @__PURE__ */ jsxs("div", {
         className: styles$3.listHeader,
-        children: [/* @__PURE__ */ jsxs(Text, {
-          variant: "h3",
-          styleClass: "primary",
+        children: [/* @__PURE__ */ jsxs("div", {
           className: styles$3.metricName,
-          style: titleStyle,
-          children: [renderHeaderName ? renderHeaderName(metricItem.name) : /* @__PURE__ */ jsx(Button, {
+          children: [/* @__PURE__ */ jsx(Button, {
             type: "button",
             variant: "custom",
             isDisabled: !clickBehaviourConfigs.card.isEnable,
             className: "disabled:cursor-text",
             onClick: () => handleCardClick(clickBehaviourConfigs, metricItem.metricId, metricItem.id),
-            style: titleStyle,
-            children: metricItem.name
+            children: /* @__PURE__ */ jsx(Text, {
+              variant: "h3",
+              styleClass: "primary",
+              className: `${styles$3.metricTitle} dbn-metric-card-title`,
+              children: renderHeaderName ? renderHeaderName(metricItem.name) : metricItem.name
+            })
           }), metricItem.description && /* @__PURE__ */ jsx("span", {
-            className: styles$3.metricDescription,
-            style: descriptionStyle,
+            className: `${styles$3.metricDescription} dbn-metric-card-description`,
             children: metricItem.description
           })]
         }), /* @__PURE__ */ jsxs("div", {
@@ -92206,32 +92192,29 @@ const MetricCard = ({
               type: "button",
               variant: "custom",
               className: styles$3.popupItem,
-              onClick: () => {
-                var _a3, _b3;
-                return onMaximize({
+              onClick: () => onMaximize({
+                labels: labels2,
+                data: {
                   labels: labels2,
-                  data: {
-                    labels: labels2,
-                    datasets
-                  },
-                  chartType: chartType2,
-                  funnelData,
-                  sankeyData,
-                  singleValueData: singleValueData2,
-                  margins,
-                  colors: globalTheme ? (_b3 = (_a3 = globalTheme.chart.palettes) == null ? void 0 : _a3.find((palette) => palette.name === globalTheme.chart.selected)) == null ? void 0 : _b3.colors : colors2,
-                  legendSettings,
-                  labelSettings,
-                  axisSettings,
-                  customSettings,
-                  backGroundColor,
-                  tableSettings,
-                  enableSaveAs: true,
-                  chartClickConfig: clickBehaviourConfigs.chart,
-                  chartRef,
-                  handleChartRightClick
-                });
-              },
+                  datasets
+                },
+                chartType: chartType2,
+                funnelData,
+                sankeyData,
+                singleValueData: singleValueData2,
+                margins,
+                colors: colors2,
+                legendSettings,
+                labelSettings,
+                axisSettings,
+                customSettings,
+                backGroundColor,
+                tableSettings,
+                enableSaveAs: true,
+                chartClickConfig: clickBehaviourConfigs.chart,
+                chartRef,
+                handleChartRightClick
+              }),
               children: [/* @__PURE__ */ jsx(Icons, {
                 name: "fullscreen-icon",
                 className: styles$3.popupItemIcon
@@ -92314,7 +92297,7 @@ const MetricCard = ({
           axisSettings,
           tableSettings,
           enableSaveAs: true,
-          colors: globalTheme ? (_c2 = (_b2 = globalTheme.chart.palettes) == null ? void 0 : _b2.find((palette) => palette.name === globalTheme.chart.selected)) == null ? void 0 : _c2.colors : colors2,
+          colors: colors2,
           updateGroup,
           isEnableGroupBy,
           customSettings,
@@ -92352,9 +92335,6 @@ const SingleValueCard = ({
   onDelete
 }) => {
   var _a2;
-  const {
-    globalTheme
-  } = useGlobalTheme();
   const filterValues2 = {};
   if (param == null ? void 0 : param.values) {
     for (const key in param.values) {
@@ -92472,53 +92452,27 @@ const SingleValueCard = ({
       } : rls));
     }
   };
-  const titleStyle = useMemo(() => {
-    var _a3, _b2, _c2;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a3 = globalTheme.cardTitle.fontWeight) == null ? void 0 : _a3.trim())
-      style2.fontWeight = globalTheme.cardTitle.fontWeight.trim() || void 0;
-    if ((_b2 = globalTheme.cardTitle.color) == null ? void 0 : _b2.trim())
-      style2.color = globalTheme.cardTitle.color.trim() || void 0;
-    if ((_c2 = globalTheme.cardTitle.fontSize) == null ? void 0 : _c2.trim())
-      style2.color = globalTheme.cardTitle.fontSize.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
-  const descriptionStyle = useMemo(() => {
-    var _a3, _b2, _c2;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a3 = globalTheme.cardDescription.fontWeight) == null ? void 0 : _a3.trim())
-      style2.fontWeight = globalTheme.cardDescription.fontWeight.trim() || void 0;
-    if ((_b2 = globalTheme.cardDescription.color) == null ? void 0 : _b2.trim())
-      style2.color = globalTheme.cardDescription.color.trim() || void 0;
-    if ((_c2 = globalTheme.cardDescription.fontSize) == null ? void 0 : _c2.trim())
-      style2.color = globalTheme.cardDescription.fontSize.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$3.cardContainer,
       children: [/* @__PURE__ */ jsxs("div", {
         className: styles$3.listHeader,
-        children: [/* @__PURE__ */ jsxs(Text, {
-          variant: "h3",
-          styleClass: "primary",
+        children: [/* @__PURE__ */ jsxs("div", {
           className: styles$3.metricName,
-          style: titleStyle,
-          children: [renderHeaderName ? renderHeaderName(metricItem.name) : /* @__PURE__ */ jsx(Button, {
+          children: [/* @__PURE__ */ jsx(Button, {
             type: "button",
             variant: "custom",
             isDisabled: !clickBehaviourConfigs.card.isEnable,
             className: "disabled:cursor-text",
             onClick: () => handleCardClick(clickBehaviourConfigs, metricItem.metricId, metricItem.id),
-            style: titleStyle,
-            children: metricItem.name
+            children: /* @__PURE__ */ jsx(Text, {
+              variant: "h3",
+              styleClass: "primary",
+              className: `${styles$3.metricTitle} dbn-metric-card-title`,
+              children: renderHeaderName ? renderHeaderName(metricItem.name) : metricItem.name
+            })
           }), metricItem.description && /* @__PURE__ */ jsx("span", {
-            className: styles$3.metricDescription,
-            style: descriptionStyle,
+            className: `${styles$3.metricDescription} dbn-metric-card-description`,
             children: metricItem.description
           })]
         }), /* @__PURE__ */ jsxs("div", {
@@ -92658,17 +92612,31 @@ const DeleteMetricModal = ({
   isOpen,
   onClose,
   onSuccess,
-  metricId
+  metricId,
+  dashboardId
 }) => {
+  const queryClient2 = useQueryClient();
   const {
     mutateAsync: deleteMetric,
     isLoading
   } = useMarkDeleteMetricMutation();
   const handleDeleteMetric = async () => {
+    if (!metricId || !dashboardId)
+      return;
     await deleteMetric({
       id: metricId
     }, {
       onSuccess: () => {
+        queryClient2.setQueryData(["EmbeddedDashboardMetrics", {
+          dashboardId
+        }], (prev) => {
+          var _a2;
+          const externalDashboardMetrics = (_a2 = prev == null ? void 0 : prev.externalDashboardMetrics) == null ? void 0 : _a2.filter((exDm) => exDm.externalMetricId !== metricId);
+          return {
+            ...prev,
+            externalDashboardMetrics
+          };
+        });
         onSuccess();
       }
     });
@@ -92698,8 +92666,9 @@ const DeleteMetricModal = ({
         variant: "reject",
         type: "button",
         size: "default",
+        isDisabled: isLoading,
         onClick: handleDeleteMetric,
-        children: isLoading ? "Delete..." : "Delete"
+        children: isLoading ? "Deleting..." : "Delete"
       })]
     })]
   });
@@ -92716,7 +92685,8 @@ const ExternalMetricList = ({
   breakpoint,
   layoutCols,
   params,
-  companyTenancyType = "TABLE"
+  companyTenancyType = "TABLE",
+  externalDashboardId
 }) => {
   const [isFullScreen, setFullScreen] = useState(false);
   const [deleteModal2, setDeleteModal] = useState({
@@ -92816,7 +92786,8 @@ const ExternalMetricList = ({
         onClose: () => setDeleteModal({
           id: "",
           show: false
-        })
+        }),
+        dashboardId: externalDashboardId
       }) : null]
     }) : /* @__PURE__ */ jsx(Fragment, {
       children: !isMetricListLoading ? /* @__PURE__ */ jsx("div", {
@@ -92918,38 +92889,31 @@ const EmbeddedDashboard = React__default.memo(({
     data: data2,
     isLoading
   } = useEmbeddedDashboard(token);
-  const {
-    globalTheme,
-    setGlobalTheme
-  } = useGlobalTheme();
   const [isShowFilters, setShowFilters] = useState(false);
   const [globalFilters, setGlobalFilters] = useState({
     tableName: "",
     filters: []
   });
-  useGetThemesQuery({
+  const {
+    data: adminThemeData
+  } = useGetThemesQuery({
     companyId: data2.companyId
   }, {
-    enabled: !!data2.companyId,
-    onSuccess: (res) => {
-      setGlobalTheme(res.themes[0]);
-    }
-  });
-  const embedDashboardStyle = useMemo(() => {
-    var _a3, _b3;
-    if (!globalTheme)
-      return void 0;
-    const style2 = {};
-    if ((_a3 = globalTheme.dashboard.backgroundColor) == null ? void 0 : _a3.trim())
-      style2.backgroundColor = globalTheme.dashboard.backgroundColor.trim() || void 0;
-    if ((_b3 = globalTheme.general.fontFamily) == null ? void 0 : _b3.trim())
-      style2.fontFamily = globalTheme.general.fontFamily.trim() || void 0;
-    return style2;
-  }, [globalTheme]);
+    enabled: !!data2.companyId
+  });
+  const [adminTheme, adminThemeChartColors] = useMemo(() => {
+    var _a3, _b3, _c2, _d;
+    const colors2 = (_d = (_c2 = (_b3 = (_a3 = adminThemeData == null ? void 0 : adminThemeData.themes[0]) == null ? void 0 : _a3.chart) == null ? void 0 : _b3.palettes) == null ? void 0 : _c2.find((palette) => {
+      var _a4, _b4;
+      return palette.name === ((_b4 = (_a4 = adminThemeData.themes[0]) == null ? void 0 : _a4.chart) == null ? void 0 : _b4.selected);
+    })) == null ? void 0 : _d.colors;
+    return [adminThemeData == null ? void 0 : adminThemeData.themes[0], colors2];
+  }, [adminThemeData == null ? void 0 : adminThemeData.themes[0]]);
+  useApplyAdminTheme(adminTheme);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$F["embedDashboard-container"],
-      style: embedDashboardStyle,
+      id: "dbn-dashboard",
       children: [((_a2 = data2.externalDashboard) == null ? void 0 : _a2.id) && !isLoading && /* @__PURE__ */ jsxs(Fragment, {
         children: [!(options2 == null ? void 0 : options2.disableMetricCreation) && !data2.externalDashboard.filters.length && !data2.isAllowedToCreateMetrics ? null : /* @__PURE__ */ jsxs("div", {
           className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$F["embedDashboard-header-floating"] : styles$F["embedDashboard-header-static"],
@@ -92976,7 +92940,8 @@ const EmbeddedDashboard = React__default.memo(({
               companyId: data2.companyId,
               mode: data2.mode,
               externalDashboardId: data2.externalDashboard.id,
-              variant: options2 == null ? void 0 : options2.headerVariant
+              variant: options2 == null ? void 0 : options2.headerVariant,
+              chartColors: adminThemeChartColors != null ? adminThemeChartColors : options2 == null ? void 0 : options2.chartColors
             })]
           })]
         }), /* @__PURE__ */ jsxs("div", {
@@ -92988,13 +92953,14 @@ const EmbeddedDashboard = React__default.memo(({
           }) : null, /* @__PURE__ */ jsx(ExternalMetricList, {
             client: data2.clientId,
             isLiveMode: data2.mode,
+            externalDashboardId: data2.externalDashboardId,
             isAllowedToDeleteMetrics: data2.isAllowedToDeleteMetrics,
             externalDashboardMetrics: data2.externalDashboardMetrics,
             isMetricListLoading: isLoading,
             globalFilters,
             breakpoint: theme2 == null ? void 0 : theme2.breakpoint,
             layoutCols: theme2 == null ? void 0 : theme2.metricLayoutCols,
-            chartColors: options2 == null ? void 0 : options2.chartColors,
+            chartColors: adminThemeChartColors != null ? adminThemeChartColors : options2 == null ? void 0 : options2.chartColors,
             params: Array.isArray(data2.rlsSettings) ? data2.rlsSettings : [],
             companyTenancyType: data2.companyTenancyType
           })]
@@ -93029,9 +92995,7 @@ const PluginProvider = ({
     FallbackComponent: ErrorFallback,
     children: /* @__PURE__ */ jsx(QueryClientProvider, {
       client: queryClient,
-      children: /* @__PURE__ */ jsx(GlobalThemeProvider, {
-        children: children2
-      })
+      children: children2
     })
   });
 };