@quillsql/react 2.16.18 → 2.16.20

package/dist/index.js

@@ -19665,18 +19665,18 @@ var require_pluralize = __commonJS({
 import {
   useContext as useContext20,
   useEffect as useEffect19,
-  useState as useState24,
+  useState as useState25,
   useMemo as useMemo16,
-  useRef as useRef14
+  useRef as useRef15
 } from "react";
 
 // src/Chart.tsx
 import {
-  useState as useState18,
+  useState as useState19,
   useEffect as useEffect16,
   useContext as useContext16,
   useMemo as useMemo13,
-  useRef as useRef12
+  useRef as useRef13
 } from "react";
 
 // src/utils/csv.ts
@@ -19990,6 +19990,7 @@ async function cleanDashboardItem({
     pivotRows: pivotTable ? pivotTable.rows : void 0,
     pivotColumns: pivotTable ? pivotTable.columns : void 0,
     compareRows: item.compareRows,
+    showLegend: item.showLegend ?? false,
     columns: processedColumns.map((column) => {
       return {
         field: column.field,
@@ -20256,6 +20257,7 @@ function createInitialFormData(columns) {
     ],
     xAxisLabel: "",
     chartType: firstNumberColumn ? "line" : "table",
+    showLegend: false,
     pivot: null,
     template: true,
     referenceLines: []
@@ -20343,7 +20345,8 @@ function extractAllReportValuesFromQuillInternalReport(reportInternal) {
     pivotRows: reportInternal.pivotRows,
     pivotColumns: reportInternal.pivotColumns,
     pivotRowCount: reportInternal.pivotRowCount,
-    filterMap: reportInternal.filterMap
+    filterMap: reportInternal.filterMap,
+    showLegend: reportInternal.showLegend
   };
 }
 async function fetchReportRows({
@@ -25527,8 +25530,8 @@ var BarList = React2.forwardRef((props, ref) => {
 var BarList_default = BarList;
 
 // src/components/Chart/PieChart.tsx
-import React3 from "react";
-import { Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
+import React4 from "react";
+import { Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 
 // src/utils/color.ts
 var DEFAULT_GRADIENT_COLORS = [
@@ -25887,476 +25890,9 @@ function HSLtoRGB(h, s, l) {
 // src/components/Chart/PieChart.tsx
 init_util();
 init_valueFormatter();
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var defaultValueFormatter = (value) => (value * 1).toFixed(1) + "%";
-var parseData2 = (data, colors, categoryKey, valueKey) => {
-  const maxItems = 20;
-  const slicedData = deepCopy(data).slice(0, maxItems);
-  const totalValue = slicedData.reduce(
-    (acc, dataPoint) => (
-      // Big(acc)
-      //   .add(Big(Number(dataPoint[valueKey]) ?? 0))
-      //   .toNumber(),
-      acc + parseFloat(dataPoint[valueKey] ?? "0")
-    ),
-    0
-  );
-  slicedData.forEach((dataPoint) => {
-    const rawValue = parseFloat(dataPoint[valueKey] ?? "0");
-    dataPoint[valueKey] = totalValue ? rawValue * 100 / totalValue : data.length > maxItems ? 100 / (maxItems + 1) : 100 / slicedData.length;
-    dataPoint[`raw_${valueKey}`] = parseFloat(rawValue.toFixed(2));
-  });
-  const parsedData = slicedData.map((dataPoint, idx) => {
-    const baseColor = colors.length > 0 ? idx < colors.length ? colors[idx] : colors[colors.length - 1] : "#808080";
-    return {
-      ...dataPoint,
-      color: baseColor,
-      fill: baseColor
-    };
-  });
-  if (data.length > maxItems) {
-    const otherData = data.slice(maxItems);
-    const otherSum = otherData.reduce(
-      (acc, dataPoint) => (
-        // Big(acc)
-        //   .add(Big(Number(dataPoint[valueKey])) ?? 0)
-        //   .toNumber(),
-        acc + parseFloat(dataPoint[valueKey] ?? "0")
-      ),
-      0
-    );
-    const otherColor = colors.length > 0 ? colors[colors.length - 1] : "#808080";
-    const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
-    parsedData.push({
-      [categoryKey]: "Other",
-      [valueKey]: normalizedOtherSum,
-      [`raw_${valueKey}`]: parseFloat(otherSum.toFixed(2)),
-      color: otherColor,
-      fill: otherColor
-    });
-  }
-  return parsedData;
-};
-var ChartTooltipFrame = ({
-  children,
-  theme
-}) => /* @__PURE__ */ jsx4(
-  "div",
-  {
-    style: {
-      borderStyle: "solid",
-      borderColor: theme?.borderColor || "#E5E7EB",
-      borderWidth: 1,
-      background: theme?.backgroundColor || "#ffffff",
-      fontSize: theme?.fontSize || "14px",
-      borderRadius: "6px",
-      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
-    },
-    children
-  }
-);
-var ChartTooltipRow = ({
-  value,
-  rawValue,
-  valueKey,
-  valueKeyLabel,
-  name: name2,
-  // color,
-  theme
-}) => /* @__PURE__ */ jsxs3(
-  "div",
-  {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      minWidth: 150,
-      position: "relative"
-    },
-    children: [
-      /* @__PURE__ */ jsx4(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%"
-            // paddingLeft: '24px',
-          },
-          children: /* @__PURE__ */ jsxs3(
-            "span",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between"
-              },
-              children: [
-                /* @__PURE__ */ jsx4(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      marginRight: "24px",
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "60px"
-                    },
-                    children: name2
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "40px",
-                      textAlign: "right"
-                    },
-                    children: value
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ),
-      (rawValue || valueKey) && /* @__PURE__ */ jsx4(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            // paddingLeft: '24px',
-            justifyContent: "space-between"
-          },
-          children: /* @__PURE__ */ jsxs3(
-            "span",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between"
-              },
-              children: [
-                /* @__PURE__ */ jsx4(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      marginRight: "24px",
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "60px"
-                    },
-                    children: valueKeyLabel || valueKey
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "40px",
-                      textAlign: "right"
-                    },
-                    children: rawValue
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    ]
-  }
-);
-var DonutChartTooltip = ({
-  active,
-  payload,
-  valueFormatter: valueFormatter2,
-  theme,
-  yAxisFields
-}) => {
-  if (active && payload[0]) {
-    const payloadRow = payload[0];
-    const rawValue = payloadRow.payload[`raw_${payloadRow.dataKey}`];
-    const field = yAxisFields?.find((f) => f.field === payloadRow.dataKey);
-    const formattedRawValue = quillFormat({
-      value: rawValue?.toString() || "",
-      format: field?.format || "string"
-    });
-    return /* @__PURE__ */ jsx4(ChartTooltipFrame, { theme, children: /* @__PURE__ */ jsx4(
-      "div",
-      {
-        style: {
-          paddingLeft: "1rem",
-          paddingRight: "1rem",
-          paddingTop: "8px",
-          paddingBottom: "8px"
-        },
-        children: /* @__PURE__ */ jsx4(
-          ChartTooltipRow,
-          {
-            value: valueFormatter2(payloadRow.value),
-            rawValue: rawValue ? formattedRawValue : void 0,
-            valueKey: payloadRow.dataKey,
-            valueKeyLabel: field?.label,
-            name: payloadRow.name,
-            color: payloadRow.payload.color,
-            theme
-          }
-        )
-      }
-    ) });
-  }
-  return null;
-};
-var renderCustomizedLabel = ({
-  cx,
-  cy,
-  name: name2,
-  midAngle,
-  outerRadius,
-  percent,
-  tooltipPayload,
-  theme,
-  yAxisFields
-}) => {
-  const RADIAN = Math.PI / 180;
-  const radius = outerRadius + 25;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
-  const category = tooltipPayload?.[0]?.dataKey;
-  const rawValue = tooltipPayload?.[0]?.payload?.[`raw_${category}`];
-  const displayValue = rawValue ? `${rawValue}` : `${(percent * 100).toFixed(0)}%`;
-  const isRightSide = x > cx;
-  const isTopSide = y < cy;
-  const field = yAxisFields?.find(
-    (f) => f.field === tooltipPayload?.[0]?.dataKey
-  );
-  const formattedDisplayValue = quillFormat({
-    value: displayValue?.toString() || "",
-    format: field?.format || "string"
-  });
-  const padding = 10;
-  let textX;
-  if (isRightSide) {
-    textX = x + padding;
-  } else {
-    const longestText = name2.length > displayValue.length ? name2 : displayValue;
-    const estimatedTextWidth = longestText.length * 7;
-    textX = x - padding - estimatedTextWidth;
-  }
-  return /* @__PURE__ */ jsx4("g", { children: isTopSide ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
-      "text",
-      {
-        x: textX,
-        y: y - 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "500",
-        fontFamily: theme?.fontFamily,
-        children: name2
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      "text",
-      {
-        x: textX,
-        y: y + 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "400",
-        fontFamily: theme?.fontFamily,
-        children: formattedDisplayValue
-      }
-    )
-  ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
-      "text",
-      {
-        x: textX,
-        y: y + 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "400",
-        fontFamily: theme?.fontFamily,
-        children: formattedDisplayValue
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      "text",
-      {
-        x: textX,
-        y: y - 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "500",
-        fontFamily: theme?.fontFamily,
-        children: name2
-      }
-    )
-  ] }) });
-};
-var PieChartWrapper = React3.forwardRef(
-  (props, ref) => {
-    const {
-      category = "pct_of_the_total",
-      index = "status",
-      data,
-      colors = [],
-      colorMap = {},
-      variant = "donut",
-      valueFormatter: valueFormatter2 = defaultValueFormatter,
-      className,
-      containerStyle,
-      theme,
-      onClickChartElement,
-      yAxisFields,
-      showLegend = false,
-      ...other
-    } = props;
-    const isDonut = variant == "donut";
-    if (!data || data.length === 0) {
-      return /* @__PURE__ */ jsx4(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flex: "1 0 auto",
-            // height: '100%',
-            margin: "auto",
-            justifyContent: "center",
-            alignItems: "center",
-            fontSize: 13,
-            fontFamily: theme?.fontFamily,
-            color: theme.secondaryTextColor,
-            ...containerStyle
-          },
-          className,
-          children: "No results"
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx4(
-      "div",
-      {
-        ref,
-        className,
-        style: {
-          width: "100%",
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center",
-          boxSizing: "content-box",
-          ...containerStyle
-        },
-        ...other,
-        children: /* @__PURE__ */ jsx4(
-          ResponsiveContainer,
-          {
-            width: "100%",
-            height: "100%",
-            minWidth: 0,
-            minHeight: 0,
-            children: /* @__PURE__ */ jsxs3(PieChart, { children: [
-              /* @__PURE__ */ jsx4(
-                Pie,
-                {
-                  data: parseData2(
-                    data,
-                    (() => {
-                      const colorArray = colorMap[category] && colorMap[category]["primary"] && colorMap[category]["primary"] || colors;
-                      const containsCssVars = colorArray.some(
-                        (color2) => typeof color2 === "string" && color2.includes("var(")
-                      );
-                      if (containsCssVars) {
-                        return Array.from({ length: data.length }).map(
-                          (_, idx) => colorArray[idx % colorArray.length] ?? colorArray[colorArray.length - 1] ?? "#808080"
-                        );
-                      }
-                      return colorArray.length >= data.length ? colorArray.slice(0, data.length) : generateArrayFromColor(colorArray, data.length);
-                    })(),
-                    index,
-                    category
-                  ),
-                  cx: "50%",
-                  cy: "50%",
-                  startAngle: 90,
-                  endAngle: -270,
-                  innerRadius: isDonut ? showLegend ? "50%" : "70%" : "0%",
-                  outerRadius: showLegend ? "70%" : "100%",
-                  paddingAngle: 0,
-                  dataKey: category,
-                  nameKey: index,
-                  isAnimationActive: true,
-                  onClick: onClickChartElement,
-                  labelLine: false,
-                  label: showLegend ? (props2) => renderCustomizedLabel({ ...props2, theme, yAxisFields }) : void 0
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                Tooltip,
-                {
-                  wrapperStyle: {
-                    outline: "none"
-                  },
-                  content: ({ active, payload }) => {
-                    return /* @__PURE__ */ jsx4(
-                      DonutChartTooltip,
-                      {
-                        active,
-                        payload,
-                        valueFormatter: valueFormatter2,
-                        theme,
-                        yAxisFields
-                      }
-                    );
-                  }
-                }
-              )
-            ] })
-          }
-        )
-      }
-    );
-  }
-);
-var PieChart_default = PieChartWrapper;
 
-// src/components/QuillTable.tsx
-init_valueFormatter();
-import { useContext as useContext5, useEffect as useEffect8, useState as useState9 } from "react";
+// src/components/Chart/CustomLegend.tsx
+import { useContext as useContext5, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState9 } from "react";
 
 // src/components/UiComponents.tsx
 import {
@@ -26368,54 +25904,54 @@ import {
 } from "react";
 
 // src/assets/ArrowDownHeadIcon.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 
 // src/assets/ArrowDownRightIcon.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 
 // src/assets/ArrowDownIcon.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/assets/ArrowRightIcon.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 
 // src/assets/ArrowRightHeadIcon.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 
 // src/assets/ArrowLeftHeadIcon.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 
 // src/assets/DoubleArrowLeftHeadIcon.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 
 // src/assets/DoubleArrowRightHeadIcon.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 
 // src/assets/ArrowUpHeadIcon.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 
 // src/assets/ArrowUpIcon.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 
 // src/assets/ArrowUpRightIcon.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 
 // src/assets/CalendarIcon.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 
 // src/assets/CalendarNormalIcon.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 
 // src/assets/ExclamationFilledIcon.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var ExclamationFilledIcon = ({ ...props }) => /* @__PURE__ */ jsx18(
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ExclamationFilledIcon = ({ ...props }) => /* @__PURE__ */ jsx17(
   "svg",
   {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    children: /* @__PURE__ */ jsx18(
+    children: /* @__PURE__ */ jsx17(
       "path",
       {
         fillRule: "evenodd",
@@ -26428,20 +25964,20 @@ var ExclamationFilledIcon = ({ ...props }) => /* @__PURE__ */ jsx18(
 var ExclamationFilledIcon_default = ExclamationFilledIcon;
 
 // src/assets/SearchIcon.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 
 // src/assets/XCircleIcon.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 
 // src/assets/RefreshIcon.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 
 // src/assets/FilterIcon.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 
 // src/assets/MoreIcon.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var MoreIcon = ({ ...props }) => /* @__PURE__ */ jsxs16(
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var MoreIcon = ({ ...props }) => /* @__PURE__ */ jsxs15(
   "svg",
   {
     width: "24",
@@ -26451,20 +25987,20 @@ var MoreIcon = ({ ...props }) => /* @__PURE__ */ jsxs16(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsx23("circle", { cx: "5", cy: "12", r: "2", fill: "currentColor" }),
-      /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
-      /* @__PURE__ */ jsx23("circle", { cx: "19", cy: "12", r: "2", fill: "currentColor" })
+      /* @__PURE__ */ jsx22("circle", { cx: "5", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx22("circle", { cx: "19", cy: "12", r: "2", fill: "currentColor" })
     ]
   }
 );
 var MoreIcon_default = MoreIcon;
 
 // src/assets/UpLeftArrowsIcon.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 
 // src/assets/XIcon.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var XIcon = ({ ...props }) => /* @__PURE__ */ jsx25(
+import { jsx as jsx24 } from "react/jsx-runtime";
+var XIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
   "svg",
   {
     ...props,
@@ -26472,7 +26008,7 @@ var XIcon = ({ ...props }) => /* @__PURE__ */ jsx25(
     viewBox: "0 0 24 24",
     height: "20",
     width: "20",
-    children: /* @__PURE__ */ jsx25(
+    children: /* @__PURE__ */ jsx24(
       "path",
       {
         fillRule: "evenodd",
@@ -26486,14 +26022,14 @@ var XIcon_default = XIcon;
 
 // src/components/Chart/ChartSkeleton.tsx
 import { useContext as useContext3 } from "react";
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
-var QuillLoadingSkeleton = () => /* @__PURE__ */ jsx26(ChartSkeleton, {});
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var QuillLoadingSkeleton = () => /* @__PURE__ */ jsx25(ChartSkeleton, {});
 function ChartSkeleton({
   className,
   containerStyle
 }) {
   const [theme] = useContext3(ThemeContext);
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       style: {
@@ -26503,7 +26039,7 @@ function ChartSkeleton({
         ...containerStyle
       },
       className,
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx25(
         "div",
         {
           style: {
@@ -26513,7 +26049,7 @@ function ChartSkeleton({
             borderRadius: 8,
             overflow: "hidden"
           },
-          children: /* @__PURE__ */ jsxs18(
+          children: /* @__PURE__ */ jsxs17(
             "svg",
             {
               width: "100%",
@@ -26521,7 +26057,7 @@ function ChartSkeleton({
               xmlns: "http://www.w3.org/2000/svg",
               xmlnsXlink: "http://www.w3.org/1999/xlink",
               children: [
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx25(
                   "rect",
                   {
                     width: "100%",
@@ -26529,7 +26065,7 @@ function ChartSkeleton({
                     fill: theme?.loadingStateBackgroundColor || "#F9F9FA"
                   }
                 ),
-                /* @__PURE__ */ jsx26("defs", { fill: theme?.loadingStateBackgroundColor || "#F9F9FA", children: /* @__PURE__ */ jsxs18(
+                /* @__PURE__ */ jsx25("defs", { fill: theme?.loadingStateBackgroundColor || "#F9F9FA", children: /* @__PURE__ */ jsxs17(
                   "linearGradient",
                   {
                     id: "skeletonGradient",
@@ -26539,10 +26075,10 @@ function ChartSkeleton({
                     y2: "0%",
                     gradientUnits: "userSpaceOnUse",
                     children: [
-                      /* @__PURE__ */ jsx26("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }),
-                      /* @__PURE__ */ jsx26("stop", { offset: "50%", stopColor: "#FEFEFE" }),
-                      /* @__PURE__ */ jsx26("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }),
-                      /* @__PURE__ */ jsx26(
+                      /* @__PURE__ */ jsx25("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }),
+                      /* @__PURE__ */ jsx25("stop", { offset: "50%", stopColor: "#FEFEFE" }),
+                      /* @__PURE__ */ jsx25("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }),
+                      /* @__PURE__ */ jsx25(
                         "animate",
                         {
                           attributeName: "x1",
@@ -26552,7 +26088,7 @@ function ChartSkeleton({
                           repeatCount: "indefinite"
                         }
                       ),
-                      /* @__PURE__ */ jsx26(
+                      /* @__PURE__ */ jsx25(
                         "animate",
                         {
                           attributeName: "x2",
@@ -26565,7 +26101,7 @@ function ChartSkeleton({
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx26("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx25("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: /* @__PURE__ */ jsx25(
                   "animate",
                   {
                     attributeName: "x",
@@ -26795,7 +26331,7 @@ var getScrollableParent = (element) => {
 };
 
 // src/components/UiComponents.tsx
-import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var QuillTextInput = forwardRef(
   ({
     id: id2,
@@ -26809,7 +26345,7 @@ var QuillTextInput = forwardRef(
     const [theme] = useContext4(ThemeContext);
     const isNumericWidth = typeof width === "number";
     const resolvedWidth = typeof width === "string" ? width : isNumericWidth ? width : "100%";
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs18(
       "label",
       {
         style: {
@@ -26822,7 +26358,7 @@ var QuillTextInput = forwardRef(
           flex: isNumericWidth ? "0 0 auto" : "1 1 auto"
         },
         children: [
-          label && /* @__PURE__ */ jsx27(
+          label && /* @__PURE__ */ jsx26(
             "div",
             {
               style: {
@@ -26835,7 +26371,7 @@ var QuillTextInput = forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx26(
             "input",
             {
               ref,
@@ -26877,12 +26413,12 @@ var MemoizedButton = ({
   isLoading
 }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     QuillToolTipPortal,
     {
       enabled: !!tooltipText && tooltipText !== "",
       text: tooltipText ?? "",
-      children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs18(
         "button",
         {
           className: disabled ? "quill-button-disabled" : "quill-button",
@@ -26908,7 +26444,7 @@ var MemoizedButton = ({
             justifyContent: "center"
           },
           children: [
-            /* @__PURE__ */ jsx27("style", { children: `
+            /* @__PURE__ */ jsx26("style", { children: `
       .quill-button {
         background-color: ${theme?.primaryButtonColor};
         color: ${theme?.primaryButtonTextColor ?? "white"};
@@ -26922,8 +26458,8 @@ var MemoizedButton = ({
         background-color: ${theme?.hoverPrimaryButtonColor};
         color: ${theme?.hoverPrimaryButtonTextColor ?? "white"};
       }` }),
-            isLoading ? /* @__PURE__ */ jsx27("div", { style: { position: "absolute" }, children: /* @__PURE__ */ jsx27(LoadingSpinner, {}) }) : null,
-            /* @__PURE__ */ jsxs19(
+            isLoading ? /* @__PURE__ */ jsx26("div", { style: { position: "absolute" }, children: /* @__PURE__ */ jsx26(LoadingSpinner, {}) }) : null,
+            /* @__PURE__ */ jsxs18(
               "div",
               {
                 style: {
@@ -26950,12 +26486,12 @@ var MemoizedSecondaryButton = ({
   width
 }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     QuillToolTip,
     {
       enabled: !!tooltipText && tooltipText !== "",
       text: tooltipText ?? "",
-      children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs18(
         "button",
         {
           className: "quill-secondary-button",
@@ -26982,7 +26518,7 @@ var MemoizedSecondaryButton = ({
           },
           disabled,
           children: [
-            /* @__PURE__ */ jsx27("style", { children: `
+            /* @__PURE__ */ jsx26("style", { children: `
       .quill-secondary-button {
         background-color: white;
       }
@@ -27002,8 +26538,8 @@ var MemoizedSecondaryButton = ({
         flex-shrink: 0;
       }
       ` }),
-            icon && /* @__PURE__ */ jsx27("div", { className: "icon-container", children: icon }),
-            label && /* @__PURE__ */ jsx27(
+            icon && /* @__PURE__ */ jsx26("div", { className: "icon-container", children: icon }),
+            label && /* @__PURE__ */ jsx26(
               "span",
               {
                 style: {
@@ -27024,7 +26560,7 @@ var MemoizedSecondaryButton = ({
 };
 var MemoizedHeader = ({ label }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "h1",
     {
       style: {
@@ -27042,7 +26578,7 @@ var MemoizedHeader = ({ label }) => {
 };
 var MemoizedSubHeader = ({ label }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "h2",
     {
       style: {
@@ -27061,7 +26597,7 @@ var MemoizedSubHeader = ({ label }) => {
 };
 var MemoizedLabel = ({ label }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "h1",
     {
       style: {
@@ -27084,7 +26620,7 @@ var MemoizedCheckbox = ({
   disabled
 }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "label",
     {
       style: {
@@ -27097,7 +26633,7 @@ var MemoizedCheckbox = ({
         ...containerStyle
       },
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           "input",
           {
             type: "checkbox",
@@ -27112,7 +26648,7 @@ var MemoizedCheckbox = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           "span",
           {
             style: {
@@ -27141,7 +26677,7 @@ var QuillTabs = ({
   options = DEFAULT_TAB_OPTIONS,
   value,
   onChange
-}) => /* @__PURE__ */ jsx27(
+}) => /* @__PURE__ */ jsx26(
   "div",
   {
     style: {
@@ -27152,7 +26688,7 @@ var QuillTabs = ({
       background: "#F9FAFB",
       padding: "5px"
     },
-    children: options.map((option, index) => /* @__PURE__ */ jsx27(
+    children: options.map((option, index) => /* @__PURE__ */ jsx26(
       "button",
       {
         onClick: () => {
@@ -27193,7 +26729,7 @@ var QuillTabs = ({
 );
 var MemoizedText = ({ label }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "p",
     {
       style: {
@@ -27264,15 +26800,15 @@ var MemoizedPopover = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs19("div", { style: containerStyle, children: [
+  return /* @__PURE__ */ jsxs18("div", { style: containerStyle, children: [
     triggerLabel,
-    !disabled && isOpen && /* @__PURE__ */ jsx27(
+    !disabled && isOpen && /* @__PURE__ */ jsx26(
       "div",
       {
         id: "quill-popover-modal",
         ref: modalRef,
         style: { position: "relative" },
-        children: /* @__PURE__ */ jsxs19(
+        children: /* @__PURE__ */ jsxs18(
           "div",
           {
             ref: popoverRef,
@@ -27289,7 +26825,7 @@ var MemoizedPopover = ({
               right: rightAlignment
             },
             children: [
-              popoverTitle && /* @__PURE__ */ jsx27(
+              popoverTitle && /* @__PURE__ */ jsx26(
                 "h1",
                 {
                   style: {
@@ -27325,8 +26861,8 @@ function MemoizedModal({
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsxs19(Fragment2, { children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs18(Fragment, { children: [
+    /* @__PURE__ */ jsx26(
       "div",
       {
         style: {
@@ -27342,7 +26878,7 @@ function MemoizedModal({
         onClick: () => setIsOpen(false)
       }
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx26(
       "div",
       {
         style: {
@@ -27365,7 +26901,7 @@ function MemoizedModal({
           maxWidth: "calc(100vw - 82px)",
           maxHeight: "calc(100vh - 82px)"
         },
-        children: /* @__PURE__ */ jsxs19(
+        children: /* @__PURE__ */ jsxs18(
           "div",
           {
             style: {
@@ -27379,7 +26915,7 @@ function MemoizedModal({
               fontFamily: theme?.fontFamily
             },
             children: [
-              /* @__PURE__ */ jsxs19(
+              /* @__PURE__ */ jsxs18(
                 "div",
                 {
                   id: "quill-modal-header",
@@ -27394,7 +26930,7 @@ function MemoizedModal({
                     borderBottom: "1px solid #E7E7E7"
                   },
                   children: [
-                    /* @__PURE__ */ jsx27(
+                    /* @__PURE__ */ jsx26(
                       "h2",
                       {
                         style: {
@@ -27408,11 +26944,11 @@ function MemoizedModal({
                         children: title
                       }
                     ),
-                    /* @__PURE__ */ jsx27(MemoizedDeleteButton, { onClick: () => setIsOpen(false) })
+                    /* @__PURE__ */ jsx26(MemoizedDeleteButton, { onClick: () => setIsOpen(false) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx26(
                 "div",
                 {
                   style: {
@@ -27433,7 +26969,7 @@ function MemoizedModal({
 }
 var MemoizedDeleteButton = ({
   onClick
-}) => /* @__PURE__ */ jsxs19(
+}) => /* @__PURE__ */ jsxs18(
   "button",
   {
     className: "quill-delete-button",
@@ -27450,18 +26986,18 @@ var MemoizedDeleteButton = ({
       borderRadius: 6
     },
     children: [
-      /* @__PURE__ */ jsx27("style", { children: `
+      /* @__PURE__ */ jsx26("style", { children: `
   .quill-delete-button {
       background-color: white;
   }
   .quill-delete-button:hover {
     background-color: #F4F4F5;
   }` }),
-      /* @__PURE__ */ jsx27(XIcon_default, { height: "20", width: "20", fill: "#6C727F" })
+      /* @__PURE__ */ jsx26(XIcon_default, { height: "20", width: "20", fill: "#6C727F" })
     ]
   }
 );
-var LoadingSpinner = () => /* @__PURE__ */ jsx27(
+var LoadingSpinner = () => /* @__PURE__ */ jsx26(
   "div",
   {
     style: {
@@ -27472,8 +27008,8 @@ var LoadingSpinner = () => /* @__PURE__ */ jsx27(
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ jsxs19("svg", { width: "24", height: "24", children: [
-      /* @__PURE__ */ jsx27(
+    children: /* @__PURE__ */ jsxs18("svg", { width: "24", height: "24", children: [
+      /* @__PURE__ */ jsx26(
         "circle",
         {
           cx: "12",
@@ -27485,7 +27021,7 @@ var LoadingSpinner = () => /* @__PURE__ */ jsx27(
           stroke: "#364153",
           fill: "none",
           transform: "rotate(-90 12 12)",
-          children: /* @__PURE__ */ jsx27(
+          children: /* @__PURE__ */ jsx26(
             "animateTransform",
             {
               attributeName: "transform",
@@ -27499,7 +27035,7 @@ var LoadingSpinner = () => /* @__PURE__ */ jsx27(
           )
         }
       ),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(
         "circle",
         {
           cx: "12",
@@ -27511,7 +27047,7 @@ var LoadingSpinner = () => /* @__PURE__ */ jsx27(
           stroke: "#ADB1B9",
           fill: "none",
           transform: "rotate(90 12 12)",
-          children: /* @__PURE__ */ jsx27(
+          children: /* @__PURE__ */ jsx26(
             "animateTransform",
             {
               attributeName: "transform",
@@ -27528,7 +27064,7 @@ var LoadingSpinner = () => /* @__PURE__ */ jsx27(
     ] })
   }
 );
-var QuillEmptyDashboardComponent = () => /* @__PURE__ */ jsx27("div", {});
+var QuillEmptyDashboardComponent = () => /* @__PURE__ */ jsx26("div", {});
 var defaultFilterContainerStyles = {
   display: "flex",
   width: "100%",
@@ -27540,9 +27076,9 @@ var QuillLoadingDashboardComponent = ({
   chartContainerStyle,
   LoadingComponent = QuillLoadingSkeleton
 }) => {
-  return /* @__PURE__ */ jsxs19("div", { style: { ...containerStyle, overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx27("div", { style: defaultFilterContainerStyles, children: /* @__PURE__ */ jsx27(LoadingComponent, {}) }),
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs18("div", { style: { ...containerStyle, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx26("div", { style: defaultFilterContainerStyles, children: /* @__PURE__ */ jsx26(LoadingComponent, {}) }),
+    /* @__PURE__ */ jsx26(
       "div",
       {
         style: {
@@ -27551,7 +27087,7 @@ var QuillLoadingDashboardComponent = ({
           gridTemplateRows: `repeat(${170}px)`,
           gap: 40
         },
-        children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx27("div", { style: chartContainerStyle, children: /* @__PURE__ */ jsx27(LoadingComponent, {}, index) }, index))
+        children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx26("div", { style: chartContainerStyle, children: /* @__PURE__ */ jsx26(LoadingComponent, {}, index) }, index))
       }
     )
   ] });
@@ -27559,7 +27095,7 @@ var QuillLoadingDashboardComponent = ({
 var QuillChartBuilderInputRowContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -27574,7 +27110,7 @@ var QuillChartBuilderInputRowContainer = ({
 var QuillChartBuilderInputColumnContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -27589,7 +27125,7 @@ var QuillChartBuilderInputColumnContainer = ({
 var QuillPivotRowContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -27604,7 +27140,7 @@ var QuillPivotRowContainer = ({
 var QuillPivotColumnContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -27619,7 +27155,7 @@ var QuillPivotColumnContainer = ({
 var QuillFilterContainerComponent = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -27679,8 +27215,8 @@ var QuillModalComponent = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs19("div", { style: { position: "relative" }, ref: modalRef, children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs18("div", { style: { position: "relative" }, ref: modalRef, children: [
+    /* @__PURE__ */ jsx26(
       MemoizedSecondaryButton,
       {
         onClick: () => {
@@ -27689,12 +27225,12 @@ var QuillModalComponent = ({
         label: triggerLabel || ""
       }
     ),
-    title && title === "Filters" ? isOpen && /* @__PURE__ */ jsx27(
+    title && title === "Filters" ? isOpen && /* @__PURE__ */ jsx26(
       "div",
       {
         id: "quill-popover-modal",
         style: { position: "relative", top: 10 },
-        children: /* @__PURE__ */ jsxs19(
+        children: /* @__PURE__ */ jsxs18(
           "div",
           {
             ref: popoverRef,
@@ -27711,7 +27247,7 @@ var QuillModalComponent = ({
               right: rightAlignment
             },
             children: [
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx26(
                 "h1",
                 {
                   style: {
@@ -27731,8 +27267,8 @@ var QuillModalComponent = ({
           }
         )
       }
-    ) : isOpen && /* @__PURE__ */ jsxs19("div", { children: [
-      /* @__PURE__ */ jsx27(
+    ) : isOpen && /* @__PURE__ */ jsxs18("div", { children: [
+      /* @__PURE__ */ jsx26(
         "div",
         {
           style: {
@@ -27750,7 +27286,7 @@ var QuillModalComponent = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(
         "div",
         {
           style: {
@@ -27771,7 +27307,7 @@ var QuillModalComponent = ({
             padding: 30,
             overflow: "auto"
           },
-          children: /* @__PURE__ */ jsxs19(
+          children: /* @__PURE__ */ jsxs18(
             "div",
             {
               style: {
@@ -27780,7 +27316,7 @@ var QuillModalComponent = ({
                 minWidth: "60vw"
               },
               children: [
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx26(
                   "h1",
                   {
                     style: {
@@ -27807,7 +27343,7 @@ var QuillModalComponent = ({
 var QuillChartBuilderFormContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -27830,7 +27366,7 @@ var QuillErrorMessageComponent = ({
   containerStyle
 }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       style: {
@@ -27848,7 +27384,7 @@ var QuillErrorMessageComponent = ({
         ...containerStyle
       },
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -27862,7 +27398,7 @@ var QuillErrorMessageComponent = ({
               marginRight: 8,
               color: "#D32F2F"
             },
-            children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx26(
               "path",
               {
                 strokeLinecap: "round",
@@ -27879,11 +27415,11 @@ var QuillErrorMessageComponent = ({
 };
 var QuillColumnSearchEmptyState = () => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" });
+  return /* @__PURE__ */ jsx26("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" });
 };
 var QuillLoadingComponent = () => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       style: {
@@ -27898,9 +27434,9 @@ var QuillLoadingComponent = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsx27("div", { style: { height: 100 } }),
-        /* @__PURE__ */ jsxs19("svg", { width: "24", height: "24", children: [
-          /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26("div", { style: { height: 100 } }),
+        /* @__PURE__ */ jsxs18("svg", { width: "24", height: "24", children: [
+          /* @__PURE__ */ jsx26(
             "circle",
             {
               cx: "12",
@@ -27912,7 +27448,7 @@ var QuillLoadingComponent = () => {
               stroke: theme?.primaryTextColor || "#364153",
               fill: "none",
               transform: "rotate(-90 12 12)",
-              children: /* @__PURE__ */ jsx27(
+              children: /* @__PURE__ */ jsx26(
                 "animateTransform",
                 {
                   attributeName: "transform",
@@ -27926,7 +27462,7 @@ var QuillLoadingComponent = () => {
               )
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx26(
             "circle",
             {
               cx: "12",
@@ -27938,7 +27474,7 @@ var QuillLoadingComponent = () => {
               stroke: "#ADB1B9",
               fill: "none",
               transform: "rotate(90 12 12)",
-              children: /* @__PURE__ */ jsx27(
+              children: /* @__PURE__ */ jsx26(
                 "animateTransform",
                 {
                   attributeName: "transform",
@@ -28028,7 +27564,7 @@ var OverflowContainer = ({
     opacity: showBottomShadow ? 1 : 0,
     ...shadowStyle
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       style: containerStyle,
@@ -28037,9 +27573,9 @@ var OverflowContainer = ({
       onTouchMove: checkOverflow,
       onMouseMove: checkOverflow,
       children: [
-        /* @__PURE__ */ jsx27("div", { style: topShadowStyle }),
+        /* @__PURE__ */ jsx26("div", { style: topShadowStyle }),
         children,
-        /* @__PURE__ */ jsx27("div", { style: bottomShadowStyle })
+        /* @__PURE__ */ jsx26("div", { style: bottomShadowStyle })
       ]
     }
   );
@@ -28053,8 +27589,8 @@ var QuillToolTip = ({
   displayBelow = false
 }) => {
   const [theme] = useContext4(ThemeContext);
-  return enabled ? /* @__PURE__ */ jsxs19("div", { className: "tooltip-container", style: { ...containerStyle }, children: [
-    /* @__PURE__ */ jsx27("style", { children: `
+  return enabled ? /* @__PURE__ */ jsxs18("div", { className: "tooltip-container", style: { ...containerStyle }, children: [
+    /* @__PURE__ */ jsx26("style", { children: `
         .tooltip-container {
           position: relative;
           display: inline-block;
@@ -28116,7 +27652,7 @@ var QuillToolTip = ({
           opacity: 1;
         }` }),
     children,
-    /* @__PURE__ */ jsx27("div", { className: "tooltip-text", style: { ...textStyle }, children: text })
+    /* @__PURE__ */ jsx26("div", { className: "tooltip-text", style: { ...textStyle }, children: text })
   ] }) : children;
 };
 var QuillToolTipPortal = ({
@@ -28171,9 +27707,9 @@ var QuillToolTipPortal = ({
     }
   }, [isOpen]);
   if (!enabled) {
-    return /* @__PURE__ */ jsx27(Fragment2, { children });
+    return /* @__PURE__ */ jsx26(Fragment, { children });
   }
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ref: triggerRef,
@@ -28187,7 +27723,7 @@ var QuillToolTipPortal = ({
       children: [
         children,
         isOpen && createPortal(
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs18(
             "div",
             {
               ref: tooltipRef,
@@ -28214,7 +27750,7 @@ var QuillToolTipPortal = ({
               },
               children: [
                 text,
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx26(
                   "div",
                   {
                     style: {
@@ -28229,7 +27765,7 @@ var QuillToolTipPortal = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx26(
                   "div",
                   {
                     style: {
@@ -28261,7 +27797,7 @@ var QuillChartBuilderCheckboxComponent = ({
   containerStyle
 }) => {
   const [theme] = useContext4(ThemeContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -28270,7 +27806,7 @@ var QuillChartBuilderCheckboxComponent = ({
         paddingBottom: 4,
         paddingLeft: 8,
         paddingRight: 8,
-        border: "1px solid #E7E7E7",
+        // border: '1px solid #E7E7E7',
         borderRadius: 4,
         display: "flex",
         alignItems: "center",
@@ -28279,7 +27815,7 @@ var QuillChartBuilderCheckboxComponent = ({
         pointerEvents: disabled ? "none" : "auto",
         ...containerStyle
       },
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx26(
         MemoizedCheckbox,
         {
           isChecked,
@@ -28359,7 +27895,7 @@ var QuillPortal = ({
     showModal
   );
   return createPortal(
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx26(
       "div",
       {
         style: {
@@ -28394,8 +27930,645 @@ var QuillPortal = ({
   );
 };
 
-// src/components/QuillTable.tsx
+// src/components/Chart/CustomLegend.tsx
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var getLegendLabel = (entry) => {
+  const label = entry?.payload?.name ?? entry?.value ?? entry?.dataKey ?? "";
+  return typeof label === "string" ? label : String(label ?? "");
+};
+var LegendItem = ({
+  entry,
+  index,
+  theme
+}) => /* @__PURE__ */ jsx27(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "baseline",
+      marginRight: "1rem"
+    },
+    children: /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx27(
+        "svg",
+        {
+          style: { marginRight: "0.5rem" },
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          children: /* @__PURE__ */ jsx27("rect", { width: "16", height: "16", rx: "3", fill: entry?.color })
+        }
+      ),
+      /* @__PURE__ */ jsx27(
+        "span",
+        {
+          style: {
+            color: theme?.secondaryTextColor,
+            fontFamily: theme?.fontFamily,
+            fontSize: theme?.fontSizeMedium || "14px",
+            whiteSpace: "nowrap"
+          },
+          children: getLegendLabel(entry)
+        }
+      )
+    ] })
+  },
+  `legend-${index}`
+);
+var getOuterWidth = (element) => {
+  if (!element) return 0;
+  const rect = element.getBoundingClientRect();
+  const styles = window.getComputedStyle(element);
+  const marginLeft = Number.parseFloat(styles.marginLeft || "0");
+  const marginRight = Number.parseFloat(styles.marginRight || "0");
+  return rect.width + marginLeft + marginRight;
+};
+var RenderLegend = ({
+  payload,
+  limit
+}) => {
+  const [theme] = useContext5(ThemeContext);
+  const [isOpen, setIsOpen] = useState9(false);
+  const [showSeeAll, setShowSeeAll] = useState9(false);
+  const [visibleCount, setVisibleCount] = useState9(null);
+  const containerRef = useRef5(null);
+  const seeAllMeasureRef = useRef5(null);
+  const seeAllTriggerRef = useRef5(null);
+  const itemRefs = useRef5([]);
+  if (!payload || payload.length === 0) return null;
+  const maxItems = limit ?? payload.length;
+  const measuredLimit = visibleCount ?? maxItems;
+  const visiblePayload = payload.slice(0, Math.min(maxItems, measuredLimit));
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+  useLayoutEffect2(() => {
+    if (!containerRef.current) return;
+    if (!payload.length) return;
+    const updateVisibleCount = () => {
+      const containerWidth = containerRef.current?.offsetWidth ?? 0;
+      if (!containerWidth) return;
+      const maxCount = Math.min(maxItems, payload.length);
+      const seeAllWidth = getOuterWidth(seeAllMeasureRef.current);
+      const computeCount = (reserveSeeAll) => {
+        const availableWidth = containerWidth - (reserveSeeAll ? seeAllWidth : 0);
+        if (availableWidth <= 0) return 1;
+        let totalWidth = 0;
+        let nextCount = 0;
+        for (let i = 0; i < maxCount; i += 1) {
+          const itemWidth = getOuterWidth(itemRefs.current[i] ?? null);
+          if (totalWidth + itemWidth > availableWidth) break;
+          totalWidth += itemWidth;
+          nextCount = i + 1;
+        }
+        return Math.max(1, nextCount);
+      };
+      const countWithSeeAll = computeCount(true);
+      const shouldShowSeeAll = payload.length > countWithSeeAll;
+      const finalCount = shouldShowSeeAll ? countWithSeeAll : computeCount(false);
+      setShowSeeAll(shouldShowSeeAll);
+      setVisibleCount(finalCount);
+    };
+    updateVisibleCount();
+    const observer = new ResizeObserver(updateVisibleCount);
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [payload.length, maxItems]);
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              visibility: "hidden",
+              height: 0,
+              overflow: "hidden",
+              pointerEvents: "none",
+              display: "flex",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              justifyContent: "space-between",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx27(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "flex-start",
+                    flexWrap: "nowrap"
+                  },
+                  children: payload.slice(0, maxItems).map((entry, index) => /* @__PURE__ */ jsx27(
+                    "div",
+                    {
+                      ref: (element) => {
+                        itemRefs.current[index] = element;
+                      },
+                      children: /* @__PURE__ */ jsx27(LegendItem, { entry, index, theme })
+                    },
+                    `legend-measure-${index}`
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx27(
+                "div",
+                {
+                  ref: seeAllMeasureRef,
+                  style: {
+                    color: theme?.secondaryTextColor,
+                    fontSize: theme?.fontSizeMedium || "14px",
+                    fontFamily: theme?.fontFamily,
+                    marginLeft: 10,
+                    display: "flex",
+                    alignItems: "baseline",
+                    flexShrink: 0,
+                    whiteSpace: "nowrap"
+                  },
+                  children: "See all"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx27(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              flexWrap: "nowrap"
+            },
+            children: visiblePayload.map((entry, index) => /* @__PURE__ */ jsx27(
+              LegendItem,
+              {
+                entry,
+                index,
+                theme
+              },
+              `legend-${index}`
+            ))
+          }
+        ),
+        showSeeAll && /* @__PURE__ */ jsx27("div", { onMouseEnter: handleOpen, onMouseLeave: handleClose, children: /* @__PURE__ */ jsx27(
+          MemoizedPopover,
+          {
+            isOpen,
+            setIsOpen,
+            triggerLabel: /* @__PURE__ */ jsx27(
+              "div",
+              {
+                ref: seeAllTriggerRef,
+                onClick: handleOpen,
+                onMouseEnter: handleOpen,
+                style: {
+                  cursor: "pointer",
+                  color: theme?.secondaryTextColor,
+                  fontSize: theme?.fontSizeMedium || "14px",
+                  fontFamily: theme?.fontFamily,
+                  marginLeft: 10,
+                  display: "flex",
+                  alignItems: "baseline",
+                  flexShrink: 0,
+                  whiteSpace: "nowrap"
+                },
+                children: "See all"
+              }
+            ),
+            popoverChildren: /* @__PURE__ */ jsx27(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexWrap: "wrap",
+                  alignItems: "center",
+                  minWidth: 260,
+                  maxWidth: 520,
+                  gap: "0.5rem"
+                },
+                children: payload.map((entry, index) => /* @__PURE__ */ jsx27(
+                  LegendItem,
+                  {
+                    entry,
+                    index,
+                    theme
+                  },
+                  `legend-popover-${index}`
+                ))
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/Chart/PieChart.tsx
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var defaultValueFormatter = (value) => (value * 1).toFixed(1) + "%";
+var parseData2 = (data, colors, categoryKey, valueKey) => {
+  const maxItems = 20;
+  const slicedData = deepCopy(data).slice(0, maxItems);
+  const totalValue = slicedData.reduce(
+    (acc, dataPoint) => (
+      // Big(acc)
+      //   .add(Big(Number(dataPoint[valueKey]) ?? 0))
+      //   .toNumber(),
+      acc + parseFloat(dataPoint[valueKey] ?? "0")
+    ),
+    0
+  );
+  slicedData.forEach((dataPoint) => {
+    const rawValue = parseFloat(dataPoint[valueKey] ?? "0");
+    dataPoint[valueKey] = totalValue ? rawValue * 100 / totalValue : data.length > maxItems ? 100 / (maxItems + 1) : 100 / slicedData.length;
+    dataPoint[`raw_${valueKey}`] = parseFloat(rawValue.toFixed(2));
+  });
+  const parsedData = slicedData.map((dataPoint, idx) => {
+    const baseColor = colors.length > 0 ? idx < colors.length ? colors[idx] : colors[colors.length - 1] : "#808080";
+    return {
+      ...dataPoint,
+      color: baseColor,
+      fill: baseColor
+    };
+  });
+  if (data.length > maxItems) {
+    const otherData = data.slice(maxItems);
+    const otherSum = otherData.reduce(
+      (acc, dataPoint) => (
+        // Big(acc)
+        //   .add(Big(Number(dataPoint[valueKey])) ?? 0)
+        //   .toNumber(),
+        acc + parseFloat(dataPoint[valueKey] ?? "0")
+      ),
+      0
+    );
+    const otherColor = colors.length > 0 ? colors[colors.length - 1] : "#808080";
+    const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
+    parsedData.push({
+      [categoryKey]: "Other",
+      [valueKey]: normalizedOtherSum,
+      [`raw_${valueKey}`]: parseFloat(otherSum.toFixed(2)),
+      color: otherColor,
+      fill: otherColor
+    });
+  }
+  return parsedData;
+};
+var ChartTooltipFrame = ({
+  children,
+  theme
+}) => /* @__PURE__ */ jsx28(
+  "div",
+  {
+    style: {
+      borderStyle: "solid",
+      borderColor: theme?.borderColor || "#E5E7EB",
+      borderWidth: 1,
+      background: theme?.backgroundColor || "#ffffff",
+      fontSize: theme?.fontSize || "14px",
+      borderRadius: "6px",
+      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+    },
+    children
+  }
+);
+var ChartTooltipRow = ({
+  value,
+  rawValue,
+  valueKey,
+  valueKeyLabel,
+  name: name2,
+  // color,
+  theme
+}) => /* @__PURE__ */ jsxs20(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      minWidth: 150,
+      position: "relative"
+    },
+    children: [
+      /* @__PURE__ */ jsx28(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%"
+            // paddingLeft: '24px',
+          },
+          children: /* @__PURE__ */ jsxs20(
+            "span",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx28(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      marginRight: "24px",
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "60px"
+                    },
+                    children: name2
+                  }
+                ),
+                /* @__PURE__ */ jsx28(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "40px",
+                      textAlign: "right"
+                    },
+                    children: value
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      (rawValue || valueKey) && /* @__PURE__ */ jsx28(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            // paddingLeft: '24px',
+            justifyContent: "space-between"
+          },
+          children: /* @__PURE__ */ jsxs20(
+            "span",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx28(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      marginRight: "24px",
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "60px"
+                    },
+                    children: valueKeyLabel || valueKey
+                  }
+                ),
+                /* @__PURE__ */ jsx28(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "40px",
+                      textAlign: "right"
+                    },
+                    children: rawValue
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ]
+  }
+);
+var DonutChartTooltip = ({
+  active,
+  payload,
+  valueFormatter: valueFormatter2,
+  theme,
+  yAxisFields
+}) => {
+  if (active && payload[0]) {
+    const payloadRow = payload[0];
+    const rawValue = payloadRow.payload[`raw_${payloadRow.dataKey}`];
+    const field = yAxisFields?.find((f) => f.field === payloadRow.dataKey);
+    const formattedRawValue = quillFormat({
+      value: rawValue?.toString() || "",
+      format: field?.format || "string"
+    });
+    return /* @__PURE__ */ jsx28(ChartTooltipFrame, { theme, children: /* @__PURE__ */ jsx28(
+      "div",
+      {
+        style: {
+          paddingLeft: "1rem",
+          paddingRight: "1rem",
+          paddingTop: "8px",
+          paddingBottom: "8px"
+        },
+        children: /* @__PURE__ */ jsx28(
+          ChartTooltipRow,
+          {
+            value: valueFormatter2(payloadRow.value),
+            rawValue: rawValue ? formattedRawValue : void 0,
+            valueKey: payloadRow.dataKey,
+            valueKeyLabel: field?.label,
+            name: payloadRow.name,
+            color: payloadRow.payload.color,
+            theme
+          }
+        )
+      }
+    ) });
+  }
+  return null;
+};
+var PieChartWrapper = React4.forwardRef(
+  (props, ref) => {
+    const {
+      category = "pct_of_the_total",
+      index = "status",
+      data,
+      colors = [],
+      colorMap = {},
+      variant = "donut",
+      valueFormatter: valueFormatter2 = defaultValueFormatter,
+      className,
+      containerStyle,
+      theme,
+      onClickChartElement,
+      yAxisFields,
+      showLegend = false,
+      ...other
+    } = props;
+    const isDonut = variant == "donut";
+    if (!data || data.length === 0) {
+      return /* @__PURE__ */ jsx28(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flex: "1 0 auto",
+            // height: '100%',
+            margin: "auto",
+            justifyContent: "center",
+            alignItems: "center",
+            fontSize: 13,
+            fontFamily: theme?.fontFamily,
+            color: theme.secondaryTextColor,
+            ...containerStyle
+          },
+          className,
+          children: "No results"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx28(
+      "div",
+      {
+        ref,
+        className,
+        style: {
+          width: "100%",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          boxSizing: "content-box",
+          ...containerStyle
+        },
+        ...other,
+        children: /* @__PURE__ */ jsx28(
+          ResponsiveContainer,
+          {
+            width: "100%",
+            height: "100%",
+            minWidth: 0,
+            minHeight: 0,
+            children: /* @__PURE__ */ jsxs20(PieChart, { children: [
+              /* @__PURE__ */ jsx28(
+                Pie,
+                {
+                  data: parseData2(
+                    data,
+                    (() => {
+                      const colorArray = colorMap[category] && colorMap[category]["primary"] && colorMap[category]["primary"] || colors;
+                      const containsCssVars = colorArray.some(
+                        (color2) => typeof color2 === "string" && color2.includes("var(")
+                      );
+                      if (containsCssVars) {
+                        return Array.from({ length: data.length }).map(
+                          (_, idx) => colorArray[idx % colorArray.length] ?? colorArray[colorArray.length - 1] ?? "#808080"
+                        );
+                      }
+                      return colorArray.length >= data.length ? colorArray.slice(0, data.length) : generateArrayFromColor(colorArray, data.length);
+                    })(),
+                    index,
+                    category
+                  ),
+                  cx: "50%",
+                  cy: "50%",
+                  startAngle: 90,
+                  endAngle: -270,
+                  innerRadius: isDonut ? showLegend ? "50%" : "70%" : "0%",
+                  outerRadius: showLegend ? "70%" : "100%",
+                  paddingAngle: 0,
+                  dataKey: category,
+                  nameKey: index,
+                  isAnimationActive: true,
+                  onClick: onClickChartElement,
+                  labelLine: false,
+                  label: false
+                }
+              ),
+              showLegend && /* @__PURE__ */ jsx28(
+                Legend,
+                {
+                  verticalAlign: "top",
+                  align: "left",
+                  fontSize: 11,
+                  color: theme.secondaryTextColor,
+                  wrapperStyle: {
+                    paddingBottom: 20,
+                    fontFamily: theme?.fontFamily
+                  },
+                  content: /* @__PURE__ */ jsx28(RenderLegend, { limit: 5 })
+                }
+              ),
+              /* @__PURE__ */ jsx28(
+                Tooltip,
+                {
+                  wrapperStyle: {
+                    outline: "none"
+                  },
+                  content: ({ active, payload }) => {
+                    return /* @__PURE__ */ jsx28(
+                      DonutChartTooltip,
+                      {
+                        active,
+                        payload,
+                        valueFormatter: valueFormatter2,
+                        theme,
+                        yAxisFields
+                      }
+                    );
+                  }
+                }
+              )
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+var PieChart_default = PieChartWrapper;
+
+// src/components/QuillTable.tsx
+init_valueFormatter();
+import { useContext as useContext6, useEffect as useEffect8, useState as useState10 } from "react";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 function QuillTable({
   rows,
   rowCount,
@@ -28424,13 +28597,13 @@ function QuillTable({
   borderTop,
   borderBottom
 }) {
-  const [activeRows, setActiveRows] = useState9([]);
-  const [maxPage, setMaxPage] = useState9(1);
-  const [sortColumn, setSortColumn] = useState9(sort?.field || "");
-  const [sortDirection, setSortDirection] = useState9(sort?.direction || "desc");
-  const [theme] = useContext5(ThemeContext);
-  const [isPaginating, setIsPaginating] = useState9(true);
-  const [initialLoad, setInitialLoad] = useState9(true);
+  const [activeRows, setActiveRows] = useState10([]);
+  const [maxPage, setMaxPage] = useState10(1);
+  const [sortColumn, setSortColumn] = useState10(sort?.field || "");
+  const [sortDirection, setSortDirection] = useState10(sort?.direction || "desc");
+  const [theme] = useContext6(ThemeContext);
+  const [isPaginating, setIsPaginating] = useState10(true);
+  const [initialLoad, setInitialLoad] = useState10(true);
   useEffect8(() => {
     setSortColumn(sort?.field || "");
     setSortDirection(sort?.direction || "desc");
@@ -28511,7 +28684,7 @@ function QuillTable({
     }
   };
   if (initialLoad) {
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       "div",
       {
         style: {
@@ -28519,11 +28692,11 @@ function QuillTable({
           ...containerStyle
         },
         className,
-        children: /* @__PURE__ */ jsx28(LoadingComponent, {})
+        children: /* @__PURE__ */ jsx29(LoadingComponent, {})
       }
     );
   }
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       style: {
@@ -28536,7 +28709,7 @@ function QuillTable({
         ...containerStyle
       },
       className,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx29(
         "div",
         {
           style: {
@@ -28555,7 +28728,7 @@ function QuillTable({
             outline: "none",
             position: "relative"
           },
-          children: /* @__PURE__ */ jsxs20(
+          children: /* @__PURE__ */ jsxs21(
             "div",
             {
               role: "table",
@@ -28569,8 +28742,8 @@ function QuillTable({
                 minHeight: "260px"
               },
               children: [
-                /* @__PURE__ */ jsx28("div", { style: { overflow: "auto", flexGrow: 1 }, children: /* @__PURE__ */ jsxs20("div", { style: { minWidth: "100%", display: "inline-block" }, children: [
-                  /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx29("div", { style: { overflow: "auto", flexGrow: 1 }, children: /* @__PURE__ */ jsxs21("div", { style: { minWidth: "100%", display: "inline-block" }, children: [
+                  /* @__PURE__ */ jsx29(
                     "div",
                     {
                       className: "thead",
@@ -28580,7 +28753,7 @@ function QuillTable({
                         zIndex: 1,
                         background: headerBackgroundColor ?? "white"
                       },
-                      children: /* @__PURE__ */ jsx28(
+                      children: /* @__PURE__ */ jsx29(
                         "div",
                         {
                           role: "row",
@@ -28593,7 +28766,7 @@ function QuillTable({
                             marginBottom: "-1px"
                             // avoid double border
                           },
-                          children: columns && columns.map((column, index) => /* @__PURE__ */ jsxs20(
+                          children: columns && columns.map((column, index) => /* @__PURE__ */ jsxs21(
                             "div",
                             {
                               onClick: (e) => {
@@ -28624,7 +28797,7 @@ function QuillTable({
                                 justifyContent: "space-between"
                               },
                               children: [
-                                /* @__PURE__ */ jsx28(
+                                /* @__PURE__ */ jsx29(
                                   "div",
                                   {
                                     "aria-haspopup": "dialog",
@@ -28649,7 +28822,7 @@ function QuillTable({
                                     children: hideLabels || !column.label ? column.field : column.label
                                   }
                                 ),
-                                column.field === sortColumn && /* @__PURE__ */ jsx28(
+                                column.field === sortColumn && /* @__PURE__ */ jsx29(
                                   "svg",
                                   {
                                     xmlns: "http://www.w3.org/2000/svg",
@@ -28660,7 +28833,7 @@ function QuillTable({
                                     style: {
                                       transform: sortDirection === "desc" ? "rotate(180deg)" : void 0
                                     },
-                                    children: /* @__PURE__ */ jsx28(
+                                    children: /* @__PURE__ */ jsx29(
                                       "path",
                                       {
                                         fillRule: "evenodd",
@@ -28678,15 +28851,15 @@ function QuillTable({
                       )
                     }
                   ),
-                  (isPaginating || isLoading) && /* @__PURE__ */ jsx28(
+                  (isPaginating || isLoading) && /* @__PURE__ */ jsx29(
                     "div",
                     {
                       className,
                       style: { position: "absolute", width: "100%" },
-                      children: /* @__PURE__ */ jsx28(LoadingComponent, {})
+                      children: /* @__PURE__ */ jsx29(LoadingComponent, {})
                     }
                   ),
-                  activeRows && activeRows.length === 0 || columns && columns.length === 0 ? /* @__PURE__ */ jsx28(
+                  activeRows && activeRows.length === 0 || columns && columns.length === 0 ? /* @__PURE__ */ jsx29(
                     "div",
                     {
                       style: {
@@ -28704,7 +28877,7 @@ function QuillTable({
                       },
                       children: emptyStateLabel
                     }
-                  ) : /* @__PURE__ */ jsx28("div", { role: "rowgroup", className: "tbody", children: activeRows && activeRows.map((row, rowIndex) => /* @__PURE__ */ jsx28(
+                  ) : /* @__PURE__ */ jsx29("div", { role: "rowgroup", className: "tbody", children: activeRows && activeRows.map((row, rowIndex) => /* @__PURE__ */ jsx29(
                     "div",
                     {
                       role: "row",
@@ -28715,7 +28888,7 @@ function QuillTable({
                         minWidth: "100px",
                         boxSizing: "border-box"
                       },
-                      children: columns && columns.map((column, columnIndex) => /* @__PURE__ */ jsx28(
+                      children: columns && columns.map((column, columnIndex) => /* @__PURE__ */ jsx29(
                         "div",
                         {
                           role: "cell",
@@ -28734,7 +28907,7 @@ function QuillTable({
                             borderBottom: rowIndex === activeRows?.length - 1 ? "1px solid #E7E7E7" : void 0,
                             userSelect: "none"
                           },
-                          children: /* @__PURE__ */ jsx28(
+                          children: /* @__PURE__ */ jsx29(
                             "div",
                             {
                               style: {
@@ -28746,7 +28919,7 @@ function QuillTable({
                                 userSelect: "none"
                               },
                               "data-testid": "static-cell",
-                              children: /* @__PURE__ */ jsx28(
+                              children: /* @__PURE__ */ jsx29(
                                 "div",
                                 {
                                   "aria-haspopup": "dialog",
@@ -28778,7 +28951,7 @@ function QuillTable({
                     "sqlrow" + rowIndex
                   )) })
                 ] }) }),
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx29(
                   "div",
                   {
                     style: {
@@ -28791,7 +28964,7 @@ function QuillTable({
                       marginTop: "-1px"
                       // avoid double border
                     },
-                    children: /* @__PURE__ */ jsxs20(
+                    children: /* @__PURE__ */ jsxs21(
                       "div",
                       {
                         style: {
@@ -28803,7 +28976,7 @@ function QuillTable({
                           height: 37
                         },
                         children: [
-                          !hideCSVDownloadButton ? /* @__PURE__ */ jsx28(
+                          !hideCSVDownloadButton ? /* @__PURE__ */ jsx29(
                             "button",
                             {
                               onClick: downloadCSV2,
@@ -28819,8 +28992,8 @@ function QuillTable({
                               },
                               children: "Download CSV"
                             }
-                          ) : /* @__PURE__ */ jsx28("div", {}),
-                          rows.length === 0 || isLoading ? null : /* @__PURE__ */ jsxs20(
+                          ) : /* @__PURE__ */ jsx29("div", {}),
+                          rows.length === 0 || isLoading ? null : /* @__PURE__ */ jsxs21(
                             "div",
                             {
                               style: {
@@ -28829,7 +29002,7 @@ function QuillTable({
                                 alignItems: "center"
                               },
                               children: [
-                                /* @__PURE__ */ jsxs20(
+                                /* @__PURE__ */ jsxs21(
                                   "div",
                                   {
                                     style: {
@@ -28844,8 +29017,8 @@ function QuillTable({
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ jsx28("div", { style: { width: 8 } }),
-                                /* @__PURE__ */ jsx28(
+                                /* @__PURE__ */ jsx29("div", { style: { width: 8 } }),
+                                /* @__PURE__ */ jsx29(
                                   "button",
                                   {
                                     onClick: (e) => {
@@ -28857,7 +29030,7 @@ function QuillTable({
                                       border: "none",
                                       background: "transparent"
                                     },
-                                    children: /* @__PURE__ */ jsx28(
+                                    children: /* @__PURE__ */ jsx29(
                                       "svg",
                                       {
                                         xmlns: "http://www.w3.org/2000/svg",
@@ -28865,7 +29038,7 @@ function QuillTable({
                                         fill: theme?.chartLabelFontFamily || theme?.fontFamily,
                                         height: "16px",
                                         width: "16px",
-                                        children: /* @__PURE__ */ jsx28(
+                                        children: /* @__PURE__ */ jsx29(
                                           "path",
                                           {
                                             fillRule: "evenodd",
@@ -28877,7 +29050,7 @@ function QuillTable({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsx28(
+                                /* @__PURE__ */ jsx29(
                                   "button",
                                   {
                                     onClick: (e) => {
@@ -28889,7 +29062,7 @@ function QuillTable({
                                       border: "none",
                                       background: "transparent"
                                     },
-                                    children: /* @__PURE__ */ jsx28(
+                                    children: /* @__PURE__ */ jsx29(
                                       "svg",
                                       {
                                         xmlns: "http://www.w3.org/2000/svg",
@@ -28897,7 +29070,7 @@ function QuillTable({
                                         fill: theme?.chartLabelFontFamily || theme?.fontFamily,
                                         height: "16px",
                                         width: "16px",
-                                        children: /* @__PURE__ */ jsx28(
+                                        children: /* @__PURE__ */ jsx29(
                                           "path",
                                           {
                                             fillRule: "evenodd",
@@ -28909,7 +29082,7 @@ function QuillTable({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsx28("div", { style: { width: 12 } })
+                                /* @__PURE__ */ jsx29("div", { style: { width: 12 } })
                               ]
                             }
                           )
@@ -28934,7 +29107,7 @@ import {
   CartesianGrid,
   ComposedChart,
   Customized,
-  Legend,
+  Legend as Legend2,
   ResponsiveContainer as ResponsiveContainer2,
   Tooltip as Tooltip2,
   XAxis,
@@ -29096,12 +29269,12 @@ var format_wo_yyyy2 = (value) => {
 import { format as format6, subDays as subDays2 } from "date-fns";
 
 // src/components/Chart/ChartTooltipFrame.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function ChartTooltipFrame2({
   children,
   theme
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       style: {
@@ -29121,7 +29294,7 @@ function ChartTooltipFrame2({
 }
 
 // src/components/Chart/ChartTooltipRow.tsx
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 function ChartTooltipRow2({
   value,
   name: name2,
@@ -29129,7 +29302,7 @@ function ChartTooltipRow2({
   theme,
   hideDot = false
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       style: {
@@ -29142,8 +29315,8 @@ function ChartTooltipRow2({
         paddingBottom: 2
       },
       children: [
-        /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center" }, children: [
-          !hideDot && /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsxs22("div", { style: { display: "flex", alignItems: "center" }, children: [
+          !hideDot && /* @__PURE__ */ jsx31(
             "span",
             {
               style: {
@@ -29160,7 +29333,7 @@ function ChartTooltipRow2({
               }
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             "p",
             {
               style: {
@@ -29175,7 +29348,7 @@ function ChartTooltipRow2({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "p",
           {
             style: {
@@ -29199,14 +29372,14 @@ function ChartTooltipRow2({
 }
 
 // src/components/Chart/ChartTooltipGroup.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 function ChartTooltipGroup({
   name: name2,
   items,
   theme,
   hideDot = false
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       style: {
@@ -29218,7 +29391,7 @@ function ChartTooltipGroup({
         marginRight: "24px"
       },
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "p",
           {
             style: {
@@ -29236,7 +29409,7 @@ function ChartTooltipGroup({
             children: name2.replaceAll("_", " ").toLowerCase()
           }
         ),
-        items.map(({ color: color2, value, name: name3 }, idx) => /* @__PURE__ */ jsx31(
+        items.map(({ color: color2, value, name: name3 }, idx) => /* @__PURE__ */ jsx32(
           ChartTooltipRow2,
           {
             value,
@@ -29254,9 +29427,9 @@ function ChartTooltipGroup({
 
 // src/components/Chart/ChartTooltip.tsx
 init_dates();
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
-var ChartTooltipPrimary = (props) => /* @__PURE__ */ jsxs23(ChartTooltipFrame2, { theme: props.theme, children: [
-  /* @__PURE__ */ jsx32(
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+var ChartTooltipPrimary = (props) => /* @__PURE__ */ jsxs24(ChartTooltipFrame2, { theme: props.theme, children: [
+  /* @__PURE__ */ jsx33(
     "div",
     {
       style: {
@@ -29274,7 +29447,7 @@ var ChartTooltipPrimary = (props) => /* @__PURE__ */ jsxs23(ChartTooltipFrame2,
         paddingTop: "8px",
         paddingBottom: "8px"
       },
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx33(
         "p",
         {
           style: {
@@ -29293,7 +29466,7 @@ var ChartTooltipPrimary = (props) => /* @__PURE__ */ jsxs23(ChartTooltipFrame2,
       )
     }
   ),
-  /* @__PURE__ */ jsx32(
+  /* @__PURE__ */ jsx33(
     "div",
     {
       style: {
@@ -29302,7 +29475,7 @@ var ChartTooltipPrimary = (props) => /* @__PURE__ */ jsxs23(ChartTooltipFrame2,
         paddingTop: "8px",
         paddingBottom: "8px"
       },
-      children: props.payload.map(({ color: color2, value, name: name2 }, idx) => /* @__PURE__ */ jsx32(
+      children: props.payload.map(({ color: color2, value, name: name2 }, idx) => /* @__PURE__ */ jsx33(
         ChartTooltipRow2,
         {
           value: props.valueFormatter(value, name2),
@@ -29383,8 +29556,8 @@ function ChartTooltipComparison(props) {
     presetLabel,
     convertComparisonRange(presetLabel, comparisonLabel)
   ) ?? {};
-  return /* @__PURE__ */ jsxs23(ChartTooltipFrame2, { theme: props.theme, children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs24(ChartTooltipFrame2, { theme: props.theme, children: [
+    /* @__PURE__ */ jsx33(
       "div",
       {
         style: {
@@ -29402,7 +29575,7 @@ function ChartTooltipComparison(props) {
           paddingTop: "8px",
           paddingBottom: "8px"
         },
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx33(
           "p",
           {
             style: {
@@ -29422,7 +29595,7 @@ function ChartTooltipComparison(props) {
         )
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       "div",
       {
         style: {
@@ -29434,7 +29607,7 @@ function ChartTooltipComparison(props) {
           flexDirection: "column",
           gap: 4
         },
-        children: Object.entries(newRows).map(([key, value], index) => /* @__PURE__ */ jsx32(
+        children: Object.entries(newRows).map(([key, value], index) => /* @__PURE__ */ jsx33(
           ChartTooltipGroup,
           {
             name: key,
@@ -29450,8 +29623,8 @@ function ChartTooltipComparison(props) {
 }
 function ChartTooltip(props) {
   if (!props.active || !props.payload) return null;
-  if (props.comparison) return /* @__PURE__ */ jsx32(ChartTooltipComparison, { ...props });
-  return /* @__PURE__ */ jsx32(ChartTooltipPrimary, { ...props });
+  if (props.comparison) return /* @__PURE__ */ jsx33(ChartTooltipComparison, { ...props });
+  return /* @__PURE__ */ jsx33(ChartTooltipPrimary, { ...props });
 }
 
 // src/utils/getDomain.ts
@@ -29527,7 +29700,7 @@ import { useMemo as useMemo4 } from "react";
 
 // src/components/Chart/CustomReferenceLine.tsx
 init_constants();
-import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function CustomReferenceLine({
   xAxisMap,
   yAxisMap,
@@ -29544,8 +29717,8 @@ function CustomReferenceLine({
   const y1 = yScale(referenceLine[0]);
   const y2 = yScale(referenceLine[1]);
   const textY = yScale(referenceLine[referenceLine.length - 1]) - 5;
-  return /* @__PURE__ */ jsxs24(Fragment3, { children: [
-    referenceLine.length === 2 && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs25(Fragment2, { children: [
+    referenceLine.length === 2 && /* @__PURE__ */ jsx34(
       "line",
       {
         x1: xMin,
@@ -29561,7 +29734,7 @@ function CustomReferenceLine({
     referenceLine.length > 2 && referenceLine.slice(1).map((point, index) => {
       const x1 = xMin + (xMax - xMin) * (index / (referenceLine.length - 1));
       const x2 = xMin + (xMax - xMin) * ((index + 1) / (referenceLine.length - 1));
-      return /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsx34(
         "line",
         {
           x1,
@@ -29576,7 +29749,7 @@ function CustomReferenceLine({
         index
       );
     }),
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs25(
       "text",
       {
         x: xMax - 5,
@@ -29599,56 +29772,6 @@ function CustomReferenceLine({
   ] });
 }
 
-// src/components/Chart/CustomLegend.tsx
-import { useContext as useContext6 } from "react";
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
-var RenderLegend = (props) => {
-  const { payload } = props;
-  const [theme] = useContext6(ThemeContext);
-  return /* @__PURE__ */ jsx34("div", { style: { display: "flex", justifyContent: "flex-start" }, children: payload.map((entry, index) => /* @__PURE__ */ jsxs25(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        marginRight: "1rem"
-      },
-      children: [
-        /* @__PURE__ */ jsx34(
-          "svg",
-          {
-            style: { marginRight: "0.5rem" },
-            width: "16",
-            height: "16",
-            viewBox: "0 0 16 16",
-            children: /* @__PURE__ */ jsx34(
-              "rect",
-              {
-                width: "16",
-                height: "16",
-                rx: "3",
-                fill: payload?.[index]?.color
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx34(
-          "span",
-          {
-            style: {
-              color: theme?.secondaryTextColor,
-              fontFamily: theme?.fontFamily,
-              fontSize: theme?.fontSizeMedium || "14px"
-            },
-            children: entry.value
-          }
-        )
-      ]
-    },
-    `legend-${index}`
-  )) });
-};
-
 // src/components/Chart/LineChart.tsx
 import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat) {
@@ -29767,7 +29890,7 @@ function LineChart({
               }
             ),
             showLegend && /* @__PURE__ */ jsx35(
-              Legend,
+              Legend2,
               {
                 verticalAlign: "top",
                 align: "left",
@@ -29986,7 +30109,7 @@ import {
   Bar,
   BarChart as ReChartsBarChart,
   Customized as Customized2,
-  Legend as Legend2
+  Legend as Legend3
 } from "recharts";
 
 // src/components/Chart/CustomBar.tsx
@@ -30157,7 +30280,7 @@ function BarChart({
                   }
                 ),
                 showLegend && /* @__PURE__ */ jsx37(
-                  Legend2,
+                  Legend3,
                   {
                     verticalAlign: "top",
                     align: "left",
@@ -30449,8 +30572,8 @@ import { useMemo as useMemo10 } from "react";
 import {
   useContext as useContext9,
   useEffect as useEffect10,
-  useRef as useRef6,
-  useState as useState11
+  useRef as useRef7,
+  useState as useState12
 } from "react";
 import {
   startOfMonth as startOfMonth3,
@@ -30471,8 +30594,8 @@ import {
 import {
   useContext as useContext8,
   useMemo as useMemo7,
-  useRef as useRef5,
-  useState as useState10,
+  useRef as useRef6,
+  useState as useState11,
   useEffect as useEffect9
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -30488,9 +30611,9 @@ function QuillSelectComponent({
   hideEmptyOption
 }) {
   const [theme] = useContext8(ThemeContext);
-  const [showModal, setShowModal] = useState10(false);
-  const modalRef = useRef5(null);
-  const buttonRef = useRef5(null);
+  const [showModal, setShowModal] = useState11(false);
+  const modalRef = useRef6(null);
+  const buttonRef = useRef6(null);
   useOnClickOutside_default(
     modalRef,
     (event) => {
@@ -30513,9 +30636,9 @@ function QuillSelectComponent({
   const nullLabel = useMemo7(() => {
     return sortedItems.some((item) => item.value === "-") ? "None" : "-";
   }, [sortedItems]);
-  const [popoverPosition, setPopoverPosition] = useState10(void 0);
-  const [z, setZ] = useState10(10);
-  const scrollableParentRef = useRef5(document.body);
+  const [popoverPosition, setPopoverPosition] = useState11(void 0);
+  const [z, setZ] = useState11(10);
+  const scrollableParentRef = useRef6(document.body);
   const updatePosition = () => {
     if (buttonRef.current) {
       requestAnimationFrame(() => {
@@ -30820,22 +30943,22 @@ function QuillDateRangePicker({
 }) {
   const [theme] = useContext9(ThemeContext);
   const [client] = useContext9(ClientContext);
-  const [anchorStartDate, setAnchorStartDate] = useState11(
+  const [anchorStartDate, setAnchorStartDate] = useState12(
     getAnchorStartDate(dateRange.startDate, dateRange.endDate)
   );
-  const [anchorEndDate, setAnchorEndDate] = useState11(
+  const [anchorEndDate, setAnchorEndDate] = useState12(
     getAnchorEndDate(dateRange.startDate, dateRange.endDate)
   );
-  const [localStartDate, setLocalStartDate] = useState11(
+  const [localStartDate, setLocalStartDate] = useState12(
     dateRange.startDate
   );
-  const [localEndDate, setLocalEndDate] = useState11(
+  const [localEndDate, setLocalEndDate] = useState12(
     dateRange.endDate
   );
-  const [localPreset, setLocalPreset] = useState11(preset);
-  const [showModal, setShowModal] = useState11(false);
-  const buttonRef = useRef6(null);
-  const modalRef = useRef6(null);
+  const [localPreset, setLocalPreset] = useState12(preset);
+  const [showModal, setShowModal] = useState12(false);
+  const buttonRef = useRef7(null);
+  const modalRef = useRef7(null);
   useEffect10(() => {
     setLocalEndDate(dateRange.endDate);
     setLocalStartDate(dateRange.startDate);
@@ -31351,11 +31474,11 @@ import React7, {
   useContext as useContext10,
   useEffect as useEffect11,
   useMemo as useMemo8,
-  useRef as useRef7,
-  useState as useState12
+  useRef as useRef8,
+  useState as useState13
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 function QuillMultiSelectComponentWithCombo({
   options,
   width,
@@ -31369,17 +31492,17 @@ function QuillMultiSelectComponentWithCombo({
   style: style2
 }) {
   const [theme] = useContext10(ThemeContext);
-  const [selectedOptions, setSelectedOptions] = useState12([]);
-  const [showModal, setShowModal] = useState12(false);
-  const modalRef = useRef7(null);
-  const buttonRef = useRef7(null);
-  const debounceTimeoutId = useRef7(null);
+  const [selectedOptions, setSelectedOptions] = useState13([]);
+  const [showModal, setShowModal] = useState13(false);
+  const modalRef = useRef8(null);
+  const buttonRef = useRef8(null);
+  const debounceTimeoutId = useRef8(null);
   const [searchQuery, setSearchQuery] = React7.useState("");
-  const [exceedsLimit, setExceedsLimit] = useState12(false);
-  const [popoverPosition, setPopoverPosition] = useState12(void 0);
-  const [z, setZ] = useState12(10);
-  const scrollableParentRef = useRef7(document.body);
-  const selectAllRef = useRef7(null);
+  const [exceedsLimit, setExceedsLimit] = useState13(false);
+  const [popoverPosition, setPopoverPosition] = useState13(void 0);
+  const [z, setZ] = useState13(10);
+  const scrollableParentRef = useRef8(document.body);
+  const selectAllRef = useRef8(null);
   let CheckboxState;
   ((CheckboxState2) => {
     CheckboxState2[CheckboxState2["SELECTED"] = 0] = "SELECTED";
@@ -31413,7 +31536,7 @@ function QuillMultiSelectComponentWithCombo({
       (elem) => elem.label ?? "-"
     ).join(", ");
   }, [options, value]);
-  const [selectAllCheckboxState, setSelectAllCheckboxState] = useState12(
+  const [selectAllCheckboxState, setSelectAllCheckboxState] = useState13(
     (() => {
       if (value.length === 0) {
         return 1 /* UNSELECTED */;
@@ -31669,7 +31792,7 @@ function QuillMultiSelectComponentWithCombo({
               ref: modalRef,
               "data-portal-ignore": "true",
               children: [
-                !exceedsLimit && options && options.length > 20 && /* @__PURE__ */ jsxs31(Fragment4, { children: [
+                !exceedsLimit && options && options.length > 20 && /* @__PURE__ */ jsxs31(Fragment3, { children: [
                   /* @__PURE__ */ jsx41(
                     ListboxTextInput,
                     {
@@ -31739,7 +31862,7 @@ function QuillMultiSelectComponentWithCombo({
                     ]
                   }
                 ),
-                !exceedsLimit && !isLoading ? /* @__PURE__ */ jsxs31(Fragment4, { children: [
+                !exceedsLimit && !isLoading ? /* @__PURE__ */ jsxs31(Fragment3, { children: [
                   searchQuery === "" && potentialOptions.length > 0 && /* @__PURE__ */ jsxs31(
                     "button",
                     {
@@ -32016,8 +32139,8 @@ var ListboxTextInput = ({
 import React8, {
   useContext as useContext11,
   useMemo as useMemo9,
-  useRef as useRef8,
-  useState as useState13
+  useRef as useRef9,
+  useState as useState14
 } from "react";
 import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 function QuillSelectComponentWithCombo({
@@ -32031,9 +32154,9 @@ function QuillSelectComponentWithCombo({
   disabled
 }) {
   const [theme] = useContext11(ThemeContext);
-  const [showModal, setShowModal] = useState13(false);
-  const modalRef = useRef8(null);
-  const buttonRef = useRef8(null);
+  const [showModal, setShowModal] = useState14(false);
+  const modalRef = useRef9(null);
+  const buttonRef = useRef9(null);
   const [searchQuery, setSearchQuery] = React8.useState("");
   const filteredItems = React8.useMemo(() => {
     if (searchQuery === "") {
@@ -32832,11 +32955,11 @@ var MetricDisplay = ({
 };
 
 // src/components/Dashboard/DataLoader.tsx
-import { useContext as useContext13, useEffect as useEffect12, useMemo as useMemo11, useRef as useRef9, useState as useState14 } from "react";
+import { useContext as useContext13, useEffect as useEffect12, useMemo as useMemo11, useRef as useRef10, useState as useState15 } from "react";
 init_paginationProcessing();
 init_tableProcessing();
 import equal2 from "fast-deep-equal";
-import { Fragment as Fragment5, jsx as jsx45 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx45 } from "react/jsx-runtime";
 var constructReportFromItem = (item) => {
   return {
     ...EMPTY_INTERNAL_REPORT,
@@ -32846,6 +32969,7 @@ var constructReportFromItem = (item) => {
     rows: [],
     columns: [],
     chartType: item.chartType,
+    showLegend: item.showLegend,
     dateField: item.dateField,
     pivot: item.pivot,
     xAxisLabel: item.xAxisLabel,
@@ -32951,10 +33075,10 @@ function DataLoader({
     ) : Object.values(reportFilters[item.id] ?? {}).map((f) => f.filter);
   }, [dashboardFilters, reportFilters, dashboardName, item.id]);
   const [schemaData] = useContext13(SchemaDataContext);
-  const [loading, setLoading] = useState14(true);
-  const [error, setError] = useState14(void 0);
-  const [previousPage, setPreviousPage] = useState14(0);
-  const [additionalProcessing, setAdditionalProcessing] = useState14(defaultAdditionalProcessing);
+  const [loading, setLoading] = useState15(true);
+  const [error, setError] = useState15(void 0);
+  const [previousPage, setPreviousPage] = useState15(0);
+  const [additionalProcessing, setAdditionalProcessing] = useState15(defaultAdditionalProcessing);
   const chartReport = useMemo11(() => {
     const report = (dashboardName ? dashboard : reports)[item.id];
     if (report) {
@@ -32971,17 +33095,17 @@ function DataLoader({
     reportFilters,
     dashboardFilters
   ]);
-  const previousFilters = useRef9(filters);
-  const previousUserFilters = useRef9(userFilters);
-  const previousTenants = useRef9(tenants);
-  const previousCustomFields = useRef9(schemaData.customFields);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState14(false);
-  const rowsRequestId = useRef9(0);
-  const rowsAbortController = useRef9(null);
-  const rowCountRequestId = useRef9(0);
-  const rowCountAbortController = useRef9(null);
-  const updateTableRowsRequestId = useRef9(0);
-  const updateTableRowsAbortController = useRef9(null);
+  const previousFilters = useRef10(filters);
+  const previousUserFilters = useRef10(userFilters);
+  const previousTenants = useRef10(tenants);
+  const previousCustomFields = useRef10(schemaData.customFields);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState15(false);
+  const rowsRequestId = useRef10(0);
+  const rowsAbortController = useRef10(null);
+  const rowCountRequestId = useRef10(0);
+  const rowCountAbortController = useRef10(null);
+  const updateTableRowsRequestId = useRef10(0);
+  const updateTableRowsAbortController = useRef10(null);
   const fetchRowCount = async (processing) => {
     if (!client || !filters) {
       if (!rowCountAbortController.current) return;
@@ -33340,7 +33464,7 @@ function DataLoader({
     (dashboardName ? dashboard : reports)[item.id]?.triggerReload,
     (dashboardName ? dashboard : reports)[item.id]?.error
   ]);
-  return /* @__PURE__ */ jsx45(Fragment5, { children: children({
+  return /* @__PURE__ */ jsx45(Fragment4, { children: children({
     isLoading: loading,
     error,
     onPageChange,
@@ -33376,17 +33500,17 @@ var ChartDataLoader = ({
       (f) => f.filter
     ) : Object.values(reportFilters[item.id] ?? {}).map((f) => f.filter);
   }, [dashboardFilters, reportFilters, dashboardName, item.id]);
-  const [loading, setLoading] = useState14(true);
-  const [error, setError] = useState14(void 0);
+  const [loading, setLoading] = useState15(true);
+  const [error, setError] = useState15(void 0);
   const [client] = useContext13(ClientContext);
   const [schemaData] = useContext13(SchemaDataContext);
-  const previousFilters = useRef9(filters);
-  const previousUserFilters = useRef9(userFilters);
-  const previousDateBucket = useRef9(dateBucket);
-  const previousTenants = useRef9(tenants);
-  const previousCustomFields = useRef9(schemaData.customFields);
-  const fetchReportAbortController = useRef9(null);
-  const rowsRequestId = useRef9(0);
+  const previousFilters = useRef10(filters);
+  const previousUserFilters = useRef10(userFilters);
+  const previousDateBucket = useRef10(dateBucket);
+  const previousTenants = useRef10(tenants);
+  const previousCustomFields = useRef10(schemaData.customFields);
+  const fetchReportAbortController = useRef10(null);
+  const rowsRequestId = useRef10(0);
   const chartReport = useMemo11(() => {
     const report = dashboardName ? dashboard[item.id] : reports[item.id];
     if (!report) {
@@ -33667,7 +33791,7 @@ import {
   Geography,
   useMapContext
 } from "react-simple-maps";
-import { useEffect as useEffect13, useMemo as useMemo12, useRef as useRef10, useState as useState15 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo12, useRef as useRef11, useState as useState16 } from "react";
 init_valueFormatter();
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var statesUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
@@ -33994,17 +34118,17 @@ function USMap({
   className,
   containerStyle
 }) {
-  const containerRef = useRef10(null);
-  const [hoveredState, setHoveredState] = useState15(
+  const containerRef = useRef11(null);
+  const [hoveredState, setHoveredState] = useState16(
     void 0
   );
-  const [hoveredCoords, setHoveredCoords] = useState15(void 0);
+  const [hoveredCoords, setHoveredCoords] = useState16(void 0);
   const mappedData = data.reduce((acc, curr) => {
     acc[curr[xAxisField]?.toString()] = curr;
     return acc;
   }, {});
   const measureField = yAxisFields[0]?.field ?? xAxisField;
-  const [scaleLog, setScaleLog] = useState15(null);
+  const [scaleLog, setScaleLog] = useState16(null);
   useEffect13(() => {
     import("d3-scale").then((scale) => {
       setScaleLog(() => scale.scaleLog);
@@ -34185,17 +34309,17 @@ function WorldMap({
   className,
   containerStyle
 }) {
-  const containerRef = useRef10(null);
-  const [hoveredCountry, setHoveredCountry] = useState15(
+  const containerRef = useRef11(null);
+  const [hoveredCountry, setHoveredCountry] = useState16(
     void 0
   );
-  const [hoveredCoords, setHoveredCoords] = useState15(void 0);
+  const [hoveredCoords, setHoveredCoords] = useState16(void 0);
   const mappedData = data.reduce((acc, curr) => {
     acc[curr[xAxisField]?.toString()] = curr;
     return acc;
   }, {});
   const measureField = yAxisFields[0]?.field ?? xAxisField;
-  const [scaleLog, setScaleLog] = useState15(null);
+  const [scaleLog, setScaleLog] = useState16(null);
   useEffect13(() => {
     import("d3-scale").then((scale) => {
       setScaleLog(() => scale.scaleLog);
@@ -34378,7 +34502,7 @@ function MapLayout({
   regionNames
 }) {
   const { projection } = useMapContext();
-  const [geoCentroid, setGeoCentroid] = useState15(null);
+  const [geoCentroid, setGeoCentroid] = useState16(null);
   useEffect13(() => {
     import("d3-geo").then((geo) => {
       setGeoCentroid(() => geo.geoCentroid);
@@ -34431,7 +34555,7 @@ function MapLayout({
 }
 
 // src/components/Chart/GaugeChart.tsx
-import { useEffect as useEffect14, useRef as useRef11, useState as useState16 } from "react";
+import { useEffect as useEffect14, useRef as useRef12, useState as useState17 } from "react";
 
 // ../../node_modules/d3-transition/src/selection/index.js
 import { selection as selection3 } from "d3-selection";
@@ -35705,19 +35829,19 @@ function D3Gauge({
   colors,
   isAnimationActive
 }) {
-  const containerRef = useRef11(null);
-  const svgRef = useRef11(null);
-  const gaugeGroupRef = useRef11(null);
-  const needleRef = useRef11(null);
-  const needleOutlineRef = useRef11(null);
-  const textRef = useRef11(null);
-  const previousPercentageRef = useRef11(0);
-  const firstMountRef = useRef11(true);
+  const containerRef = useRef12(null);
+  const svgRef = useRef12(null);
+  const gaugeGroupRef = useRef12(null);
+  const needleRef = useRef12(null);
+  const needleOutlineRef = useRef12(null);
+  const textRef = useRef12(null);
+  const previousPercentageRef = useRef12(0);
+  const firstMountRef = useRef12(true);
   const startAngle = -(3 * Math.PI) / 4;
   const totalAngle = 3 * Math.PI / 2;
-  const [arc, setArc] = useState16(null);
-  const [interpolate, setInterpolate] = useState16(null);
-  const [select, setSelect] = useState16(null);
+  const [arc, setArc] = useState17(null);
+  const [interpolate, setInterpolate] = useState17(null);
+  const [select, setSelect] = useState17(null);
   useEffect14(() => {
     import("d3-shape").then(({ arc: arc2 }) => {
       setArc(() => arc2);
@@ -35865,7 +35989,7 @@ function D3Gauge({
 
 // src/components/QuillComponentTables.tsx
 init_paginationProcessing();
-import { useState as useState17, useEffect as useEffect15, useContext as useContext15 } from "react";
+import { useState as useState18, useEffect as useEffect15, useContext as useContext15 } from "react";
 import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 var QuillTableSQLEditorComponent = ({
   rows,
@@ -35881,8 +36005,8 @@ var QuillTableSQLEditorComponent = ({
   setCurrentPage,
   hideLabels
 }) => {
-  const [sort, setSort] = useState17({ field: "", direction: "" });
-  const [page, setPage] = useState17(0);
+  const [sort, setSort] = useState18({ field: "", direction: "" });
+  const [page, setPage] = useState18(0);
   return /* @__PURE__ */ jsx48(
     QuillTable,
     {
@@ -35924,8 +36048,8 @@ var QuillTableReportBuilderComponent = ({
   setCurrentPage,
   disableSort
 }) => {
-  const [sort, setSort] = useState17({ field: "", direction: "" });
-  const [page, setPage] = useState17(0);
+  const [sort, setSort] = useState18({ field: "", direction: "" });
+  const [page, setPage] = useState18(0);
   useEffect15(() => {
     if (disableSort) {
       setSort({ field: "", direction: "" });
@@ -35978,9 +36102,9 @@ var QuillTableComponent = ({
   borderTop,
   borderBottom
 }) => {
-  const [sort, setSort] = useState17({ field: "", direction: "" });
-  const [page, setPage] = useState17(0);
-  const [initialLoad, setInitialLoad] = useState17(() => {
+  const [sort, setSort] = useState18({ field: "", direction: "" });
+  const [page, setPage] = useState18(0);
+  const [initialLoad, setInitialLoad] = useState18(() => {
     return !(rows && rows.length > 0 && !isLoading);
   });
   useEffect15(() => {
@@ -36050,9 +36174,9 @@ function QuillTableDashboardComponent({
   hideName
 }) {
   const [theme] = useContext15(ThemeContext);
-  const [initialLoad, setInitialLoad] = useState17(true);
+  const [initialLoad, setInitialLoad] = useState18(true);
   const { downloadCSV: downloadCSV2 } = useExport(report?.id);
-  const [page, setPage] = useState17(report?.pagination?.page ?? 0);
+  const [page, setPage] = useState18(report?.pagination?.page ?? 0);
   useEffect15(() => {
     if (!isLoading) {
       setInitialLoad(false);
@@ -36161,7 +36285,7 @@ function QuillTableDashboardComponent({
 }
 
 // src/Chart.tsx
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
 var MAX_ROWS_FOR_GENERIC_TABLE = 500;
 function sumByKey(arr, key) {
   return arr.reduce((acc, cur) => {
@@ -36237,11 +36361,11 @@ function Chart({
     filters,
     dashboardCustomFilters[allReportsById[reportId]?.dashboardName ?? ""]
   ]);
-  const previousFilters = useRef12(void 0);
+  const previousFilters = useRef13(void 0);
   if (!equal3(previousFilters.current, filters)) {
     previousFilters.current = filters;
   }
-  const [filterValues, setFilterValues] = useState18({});
+  const [filterValues, setFilterValues] = useState19({});
   useEffect16(() => {
     setFilterValues(
       Object.values(reportFilters[reportId] ?? {}).reduce((acc, f) => {
@@ -36311,7 +36435,7 @@ function Chart({
     [reportId, allReportsById]
   );
   const report = useMemo13(() => reports[reportId], [reports, reportId]);
-  const [loading, setLoading] = useState18(true);
+  const [loading, setLoading] = useState19(true);
   const [theme] = useContext16(ThemeContext);
   const colorMap = useMemo13(() => {
     if (mapColorsToFields && report && theme) {
@@ -36319,7 +36443,7 @@ function Chart({
     }
   }, [report, theme]);
   const [client, clientLoading] = useContext16(ClientContext);
-  const [error, setError] = useState18(void 0);
+  const [error, setError] = useState19(void 0);
   const updateFilter = (filter, value, comparison) => {
     let filterValue = {};
     if (filter.filterType === "string" /* String */) {
@@ -36489,8 +36613,8 @@ function Chart({
           },
           index
         )) }),
-        loading || !report ? /* @__PURE__ */ jsx49(LoadingComponent, {}) : /* @__PURE__ */ jsxs37(Fragment6, { children: [
-          ("table" === report.chartType || "metric" === report.chartType) && /* @__PURE__ */ jsx49(Fragment6, { children: /* @__PURE__ */ jsx49(
+        loading || !report ? /* @__PURE__ */ jsx49(LoadingComponent, {}) : /* @__PURE__ */ jsxs37(Fragment5, { children: [
+          ("table" === report.chartType || "metric" === report.chartType) && /* @__PURE__ */ jsx49(Fragment5, { children: /* @__PURE__ */ jsx49(
             DataLoader,
             {
               item: report,
@@ -36613,7 +36737,7 @@ var ChartDisplay = ({
   onClickChartElement,
   overrideTheme,
   referenceLines,
-  showLegend = false,
+  showLegend,
   tableRowsLoading = false
 }) => {
   const { downloadCSV: downloadCSV2 } = useExport(reportId);
@@ -36646,7 +36770,8 @@ var ChartDisplay = ({
     }
     return void 0;
   }, [config, specificReportFilters, specificDashboardFilters]);
-  const [page, setPage] = useState18(0);
+  const resolvedShowLegend = showLegend !== void 0 ? showLegend : config?.showLegend ?? false;
+  const [page, setPage] = useState19(0);
   if (loading) {
     return /* @__PURE__ */ jsx49("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx49(LoadingComponent, {}) });
   } else if (config && !["metric", "table", "gauge", "US map", "World map"].includes(
@@ -36681,7 +36806,7 @@ var ChartDisplay = ({
         colorMap,
         onClickChartElement,
         yAxisFields: config?.yAxisFields,
-        showLegend
+        showLegend: resolvedShowLegend
       }
     );
   }
@@ -36755,7 +36880,7 @@ var ChartDisplay = ({
         onClickChartElement,
         dateFilter: !hideDateRangeFilter ? dateFilter : void 0,
         referenceLines,
-        showLegend
+        showLegend: resolvedShowLegend
       }
     );
   }
@@ -36782,7 +36907,7 @@ var ChartDisplay = ({
         onClickChartElement,
         dateFilter: !hideDateRangeFilter ? dateFilter : void 0,
         referenceLines,
-        showLegend,
+        showLegend: resolvedShowLegend,
         stackedMode: true
       }
     );
@@ -36926,7 +37051,7 @@ var ChartDisplay = ({
       onClickChartElement,
       dateFilter: !hideDateRangeFilter ? dateFilter : void 0,
       referenceLines,
-      showLegend
+      showLegend: resolvedShowLegend
     }
   );
 };
@@ -37090,7 +37215,7 @@ function QuillChartComponent({
 }
 
 // src/components/Dashboard/TemplateChartComponent.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
 function QuillTemplateChartComponent({
   report,
@@ -37098,7 +37223,7 @@ function QuillTemplateChartComponent({
   children,
   isLoading
 }) {
-  const [isSelected, setIsSelected] = useState19(false);
+  const [isSelected, setIsSelected] = useState20(false);
   return /* @__PURE__ */ jsx52(
     "div",
     {
@@ -37128,13 +37253,13 @@ function QuillTemplateChartComponent({
 
 // src/components/Dashboard/DashboardSection.tsx
 import { useContext as useContext18 } from "react";
-import { Fragment as Fragment7, jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
 function DashboardSection({
   section,
   children
 }) {
   const [theme] = useContext18(ThemeContext);
-  return /* @__PURE__ */ jsxs39(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs39(Fragment6, { children: [
     section && /* @__PURE__ */ jsx53("div", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx53(
       "h1",
       {
@@ -37187,12 +37312,12 @@ import {
   useContext as useContext19,
   useEffect as useEffect17,
   useMemo as useMemo14,
-  useRef as useRef13,
-  useState as useState20
+  useRef as useRef14,
+  useState as useState21
 } from "react";
 init_util();
 init_tableProcessing();
-import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 var QuillSecondaryButton = ({ children, ...props }) => {
   const [theme] = useContext19(ThemeContext);
   return /* @__PURE__ */ jsx54(
@@ -37597,7 +37722,7 @@ var QuillSortPopover = ({
   setIsOpen,
   disabled
 }) => {
-  return /* @__PURE__ */ jsxs40(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
     /* @__PURE__ */ jsx54(
       QuillTag,
       {
@@ -37630,7 +37755,7 @@ var QuillLimitPopover = ({
   setIsOpen,
   disabled = false
 }) => {
-  return /* @__PURE__ */ jsxs40(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
     /* @__PURE__ */ jsx54(
       QuillTag,
       {
@@ -37683,10 +37808,10 @@ var FilterPopoverWrapper = ({
 }) => {
   const { tenants } = useContext19(TenantContext);
   const { eventTracking } = useContext19(EventTrackingContext);
-  const [isOpen, setIsOpen] = useState20(false);
-  const [uniqueValues, setUniqueValues] = useState20(void 0);
-  const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState20(false);
-  const prevFiltersRef = useRef13("");
+  const [isOpen, setIsOpen] = useState21(false);
+  const [uniqueValues, setUniqueValues] = useState21(void 0);
+  const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState21(false);
+  const prevFiltersRef = useRef14("");
   const columnInternals = useMemo14(() => {
     if (!tables) {
       return null;
@@ -37771,11 +37896,11 @@ var FilterPopoverWrapper = ({
 
 // src/components/ReportBuilder/FilterModal.tsx
 init_Filter();
-import { useState as useState21, useEffect as useEffect18, useMemo as useMemo15 } from "react";
+import { useState as useState22, useEffect as useEffect18, useMemo as useMemo15 } from "react";
 init_textProcessing();
 init_filterProcessing();
 import { format as format8, isValid as isValid5, parse as parse4, startOfToday as startOfToday2 } from "date-fns";
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
 function FilterModal({
   schema,
   tables,
@@ -37793,26 +37918,26 @@ function FilterModal({
   MultiSelectComponent,
   reportBuilderColumns
 }) {
-  const [field, setField] = useState21("");
-  const [fieldOptions, setFieldOptions] = useState21([]);
-  const [fieldValues, setFieldValues] = useState21([]);
-  const [type, setType] = useState21(null);
-  const [value, setValue] = useState21(void 0);
-  const [selectedOptions, setSelectedOptions] = useState21([]);
-  const [operator, setOperator] = useState21(
+  const [field, setField] = useState22("");
+  const [fieldOptions, setFieldOptions] = useState22([]);
+  const [fieldValues, setFieldValues] = useState22([]);
+  const [type, setType] = useState22(null);
+  const [value, setValue] = useState22(void 0);
+  const [selectedOptions, setSelectedOptions] = useState22([]);
+  const [operator, setOperator] = useState22(
     void 0
   );
-  const [operatorOptions, setOperatorOptions] = useState21([]);
-  const [unit, setUnit] = useState21("");
-  const [unitOptions, setUnitOptions] = useState21([]);
-  const [startDate, setStartDate] = useState21(
+  const [operatorOptions, setOperatorOptions] = useState22([]);
+  const [unit, setUnit] = useState22("");
+  const [unitOptions, setUnitOptions] = useState22([]);
+  const [startDate, setStartDate] = useState22(
     startOfToday2().toISOString().substring(0, 10)
   );
-  const [endDate, setEndDate] = useState21(
+  const [endDate, setEndDate] = useState22(
     startOfToday2().toISOString().substring(0, 10)
   );
-  const [filterInitialized, setFilterInitialized] = useState21(false);
-  const [table, setTable] = useState21(void 0);
+  const [filterInitialized, setFilterInitialized] = useState22(false);
+  const [table, setTable] = useState22(void 0);
   const memoizedFieldValuesMap = useMemo15(
     () => fieldValuesMap,
     [JSON.stringify(fieldValuesMap)]
@@ -38527,7 +38652,7 @@ function FilterModal({
                           }
                         ) });
                       default:
-                        return /* @__PURE__ */ jsx55(Fragment9, {});
+                        return /* @__PURE__ */ jsx55(Fragment8, {});
                     }
                   })()
                 ]
@@ -38573,7 +38698,7 @@ function FilterModal({
 }
 
 // src/components/Dashboard/TemplateMetricComponent.tsx
-import { useState as useState22 } from "react";
+import { useState as useState23 } from "react";
 import { jsx as jsx56 } from "react/jsx-runtime";
 function QuillTemplateMetricComponent({
   report,
@@ -38581,7 +38706,7 @@ function QuillTemplateMetricComponent({
   children,
   isLoading
 }) {
-  const [isSelected, setIsSelected] = useState22(false);
+  const [isSelected, setIsSelected] = useState23(false);
   return /* @__PURE__ */ jsx56(
     "div",
     {
@@ -38610,7 +38735,7 @@ function QuillTemplateMetricComponent({
 }
 
 // src/components/Dashboard/TemplateTableComponent.tsx
-import { useState as useState23 } from "react";
+import { useState as useState24 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 function QuillTemplateTableComponent({
   report,
@@ -38621,7 +38746,7 @@ function QuillTemplateTableComponent({
   onPageChange,
   onSortChange
 }) {
-  const [isSelected, setIsSelected] = useState23(false);
+  const [isSelected, setIsSelected] = useState24(false);
   return /* @__PURE__ */ jsx57(
     "div",
     {
@@ -38749,7 +38874,7 @@ async function addTemplatesToDashboard(name2, newTemplates, client, dashboardDat
 }
 
 // src/Dashboard.tsx
-import { Fragment as Fragment10, jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
 var defaultChartContainerStyles = {
   display: "flex",
   width: "100%",
@@ -38836,8 +38961,8 @@ function Dashboard({
   templateDashboardName,
   pagination = { rowsPerPage: 10, rowsPerRequest: 50 }
 }) {
-  const [userFilters, setUserFilters] = useState24({});
-  const [selectedSection, setSelectedSection] = useState24("");
+  const [userFilters, setUserFilters] = useState25({});
+  const [selectedSection, setSelectedSection] = useState25("");
   const dataLoaderUserFilters = useMemo16(() => {
     return (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(
       Object.values(userFilters)
@@ -38941,7 +39066,7 @@ function Dashboard({
     });
     return map;
   }, [data?.sections, data?.sectionOrder]);
-  const mounted = useRef14(false);
+  const mounted = useRef15(false);
   useEffect19(() => {
     if (!mounted.current) {
       mounted.current = true;
@@ -38968,31 +39093,31 @@ function Dashboard({
   const { dispatch: dashboardFiltersDispatch } = useContext20(
     DashboardFiltersContext
   );
-  const [fieldValuesMap, setFieldValuesMap] = useState24({});
-  const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState24(false);
-  const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState24(false);
-  const [filterListIsOpen, setFilterListIsOpen] = useState24(false);
+  const [fieldValuesMap, setFieldValuesMap] = useState25({});
+  const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState25(false);
+  const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState25(false);
+  const [filterListIsOpen, setFilterListIsOpen] = useState25(false);
   const [
     filterListAddFilterPopoverIsOpen,
     setFilterListAddFilterPopoverIsOpen
-  ] = useState24(false);
+  ] = useState25(false);
   const presetOptions = useMemo16(() => {
     return populatedDashboardFilters?.[0]?.filterType === "date_range" ? convertPresetOptionsToSelectableList(
       populatedDashboardFilters[0].presetOptions ?? [],
       populatedDashboardFilters[0].defaultPresetRanges ?? []
     ) : defaultOptionsV2;
   }, [populatedDashboardFilters]);
-  const [filterValues, setFilterValues] = useState24({});
-  const prevNameRef = useRef14(name2);
-  const prevFlagsRef = useRef14(flags);
-  const prevClientRef = useRef14(client?.publicKey ?? "");
-  const addFilterPopoverButtonRef = useRef14(null);
-  const viewFiltersPopoverButtonRef = useRef14(null);
-  const previousFilters = useRef14(filters);
+  const [filterValues, setFilterValues] = useState25({});
+  const prevNameRef = useRef15(name2);
+  const prevFlagsRef = useRef15(flags);
+  const prevClientRef = useRef15(client?.publicKey ?? "");
+  const addFilterPopoverButtonRef = useRef15(null);
+  const viewFiltersPopoverButtonRef = useRef15(null);
+  const previousFilters = useRef15(filters);
   if (!equal4(previousFilters.current, filters)) {
     previousFilters.current = filters;
   }
-  const isInitialLoadOfDashboardRef = useRef14(false);
+  const isInitialLoadOfDashboardRef = useRef15(false);
   const referencedTables = useMemo16(() => {
     const sections = data?.sections || {};
     const tables2 = Object.values(sections).flatMap(
@@ -39020,7 +39145,7 @@ function Dashboard({
       prevFlagsRef.current = flags;
     });
   }, [name2, isClientLoading]);
-  const tenantMounted = useRef14(false);
+  const tenantMounted = useRef15(false);
   useEffect19(() => {
     if (!tenantMounted.current) {
       tenantMounted.current = true;
@@ -39562,7 +39687,7 @@ function Dashboard({
       return /* @__PURE__ */ jsx58(
         DashboardSectionContainerComponent,
         {
-          children: section === "" ? /* @__PURE__ */ jsxs42(Fragment10, { children: [
+          children: section === "" ? /* @__PURE__ */ jsxs42(Fragment9, { children: [
             (metrics[section]?.length ?? 0) > 0 && /* @__PURE__ */ jsx58(DashboardSectionComponent, { section, children: metrics[section]?.map((item) => {
               return /* @__PURE__ */ jsx58(
                 DataLoader,
@@ -39704,7 +39829,7 @@ function Dashboard({
                   data: data2,
                   rowCount,
                   rowCountIsLoading
-                }) => /* @__PURE__ */ jsx58(Fragment10, { children: /* @__PURE__ */ jsx58(
+                }) => /* @__PURE__ */ jsx58(Fragment9, { children: /* @__PURE__ */ jsx58(
                   TableComponent,
                   {
                     report: data2,
@@ -39920,10 +40045,10 @@ function QuillDashboardTemplate({
   const { dashboardConfig, dashboardConfigDispatch } = useContext20(
     DashboardConfigContext
   );
-  const [addItemModalIsOpen, setAddItemModalIsOpen] = useState24(false);
-  const [selectedTemplates, setSelectedTemplates] = useState24([]);
-  const [selectingTemplate, setSelectingTemplate] = useState24(false);
-  const [submittingTemplate, setSubmittingTemplate] = useState24(false);
+  const [addItemModalIsOpen, setAddItemModalIsOpen] = useState25(false);
+  const [selectedTemplates, setSelectedTemplates] = useState25([]);
+  const [selectingTemplate, setSelectingTemplate] = useState25(false);
+  const [submittingTemplate, setSubmittingTemplate] = useState25(false);
   const templateSections = data?.sections;
   const onSubmitTemplates = async () => {
     setSubmittingTemplate(true);
@@ -40070,7 +40195,7 @@ import {
   useContext as useContext21,
   useEffect as useEffect20,
   useMemo as useMemo17,
-  useState as useState25
+  useState as useState26
 } from "react";
 init_Filter();
 init_paginationProcessing();
@@ -40088,7 +40213,7 @@ var Table = ({
   const [schemaData] = useContext21(SchemaDataContext);
   const { eventTracking } = useContext21(EventTrackingContext);
   const { allReportsById } = useAllReports();
-  const [loading, setLoading] = useState25(false);
+  const [loading, setLoading] = useState26(false);
   const report = useMemo17(() => {
     return props.reportId ? allReportsById[props.reportId] : null;
   }, [allReportsById[props.reportId ?? ""]]);
@@ -40175,7 +40300,7 @@ var Table = ({
     clientLoading,
     !reports[props.reportId ?? ""]
   ]);
-  const [page, setPage] = useState25(0);
+  const [page, setPage] = useState26(0);
   if ("rows" in data && "columns" in data) {
     return /* @__PURE__ */ jsx60(
       QuillTable,
@@ -40236,10 +40361,10 @@ var Table_default = Table;
 
 // src/SQLEditor.tsx
 import {
-  useState as useState31,
+  useState as useState32,
   useContext as useContext28,
   useEffect as useEffect25,
-  useRef as useRef19,
+  useRef as useRef20,
   useMemo as useMemo22,
   useCallback as useCallback4
 } from "react";
@@ -40248,8 +40373,8 @@ import MonacoEditor from "@monaco-editor/react";
 // src/ChartBuilder.tsx
 import {
   useEffect as useEffect23,
-  useRef as useRef18,
-  useState as useState29,
+  useRef as useRef19,
+  useState as useState30,
   useContext as useContext26,
   useMemo as useMemo21,
   useCallback as useCallback3
@@ -40276,9 +40401,9 @@ import {
   useCallback as useCallback2,
   useContext as useContext23,
   useMemo as useMemo18,
-  useState as useState26,
+  useState as useState27,
   useEffect as useEffect21,
-  useRef as useRef15
+  useRef as useRef16
 } from "react";
 
 // src/internals/ReportBuilder/PivotList.tsx
@@ -40743,44 +40868,44 @@ var PivotModal = ({
   reportBuilderState
 }) => {
   const { getToken, quillFetchWithToken } = useContext23(FetchContext);
-  const [isLoading, setIsLoading] = useState26(false);
-  const [previewLoading, setPreviewLoading] = useState26(false);
-  const [selectedPivotType, setSelectedPivotType] = useState26("recommended");
-  const [errors, setErrors] = useState26([]);
+  const [isLoading, setIsLoading] = useState27(false);
+  const [previewLoading, setPreviewLoading] = useState27(false);
+  const [selectedPivotType, setSelectedPivotType] = useState27("recommended");
+  const [errors, setErrors] = useState27([]);
   const [client] = useContext23(ClientContext);
   const [schemaData] = useContext23(SchemaDataContext);
   const { tenants } = useContext23(TenantContext);
   const { eventTracking } = useContext23(EventTrackingContext);
-  const rowFieldRef = useRef15(null);
-  const colFieldRef = useRef15(null);
-  const [pivotCardWidth, setPivotCardWidth] = useState26(420);
-  const [samplePivotTable, setSamplePivotTable] = useState26(null);
-  const [hasNoRecommendedPivots, sethasNoRecommendedPivots] = useState26(false);
-  const [isFetchingPivots, setIsFetchingPivots] = useState26(false);
-  const [allowedColumnFields, setAllowedColumnFields] = useState26([]);
-  const [allowedRowFields, setAllowedRowFields] = useState26([]);
-  const [allowedValueFields, setAllowedValueFields] = useState26([]);
-  const [uniqueValues, setUniqueValues] = useState26(initialUniqueValues);
-  const buttonRef = useRef15(null);
-  const [dateRanges, setDateRanges] = useState26({});
-  const [pivotError, setPivotError] = useState26("");
-  const [limitInput, setLimitInput] = useState26(
+  const rowFieldRef = useRef16(null);
+  const colFieldRef = useRef16(null);
+  const [pivotCardWidth, setPivotCardWidth] = useState27(420);
+  const [samplePivotTable, setSamplePivotTable] = useState27(null);
+  const [hasNoRecommendedPivots, sethasNoRecommendedPivots] = useState27(false);
+  const [isFetchingPivots, setIsFetchingPivots] = useState27(false);
+  const [allowedColumnFields, setAllowedColumnFields] = useState27([]);
+  const [allowedRowFields, setAllowedRowFields] = useState27([]);
+  const [allowedValueFields, setAllowedValueFields] = useState27([]);
+  const [uniqueValues, setUniqueValues] = useState27(initialUniqueValues);
+  const buttonRef = useRef16(null);
+  const [dateRanges, setDateRanges] = useState27({});
+  const [pivotError, setPivotError] = useState27("");
+  const [limitInput, setLimitInput] = useState27(
     pivotLimit?.toString() ?? "100"
   );
-  const [sortFieldInput, setSortFieldInput] = useState26(
+  const [sortFieldInput, setSortFieldInput] = useState27(
     pivotSort?.sortField ?? ""
   );
-  const [sortDirectionInput, setSortDirectionInput] = useState26(
+  const [sortDirectionInput, setSortDirectionInput] = useState27(
     pivotSort?.sortDirection ?? "ASC"
   );
-  const [showLimitInput, setShowLimitInput] = useState26(!!pivotLimit);
-  const [showSortInput, setShowSortInput] = useState26(!!pivotSort);
-  const [availableHeight, setAvailableHeight] = useState26(0);
-  const [pivotModalTopHeight, setPivotModalTopHeight] = useState26(450);
-  const [popoverPosition, setPopoverPosition] = useState26(
+  const [showLimitInput, setShowLimitInput] = useState27(!!pivotLimit);
+  const [showSortInput, setShowSortInput] = useState27(!!pivotSort);
+  const [availableHeight, setAvailableHeight] = useState27(0);
+  const [pivotModalTopHeight, setPivotModalTopHeight] = useState27(450);
+  const [popoverPosition, setPopoverPosition] = useState27(
     "bottom"
   );
-  const popoverRef = useRef15(null);
+  const popoverRef = useRef16(null);
   const getDistinctValues = async (fetchDistinct) => {
     if (!client) {
       return {
@@ -41065,7 +41190,7 @@ var PivotModal = ({
       return map;
     }, {});
   }, [columns]);
-  const [selectedPivotTable, setSelectedPivotTable] = useState26(null);
+  const [selectedPivotTable, setSelectedPivotTable] = useState27(null);
   useEffect21(() => {
     const fetchPivotTables = async () => {
       if (selectedPivotIndex === -1) {
@@ -41118,7 +41243,7 @@ var PivotModal = ({
     };
     fetchPivotTables();
   }, [selectedPivotIndex, data, dateRange, createdPivots]);
-  const previousUniqueValuesRef = useRef15();
+  const previousUniqueValuesRef = useRef16();
   useEffect21(() => {
     if (!uniqueValuesIsLoading && !equal5(uniqueValues, previousUniqueValuesRef.current)) {
       previousUniqueValuesRef.current = uniqueValues;
@@ -41594,10 +41719,10 @@ var PivotModal = ({
       }
     }, 500);
   };
-  const [recommendedPivotTables, setRecommendedPivotTables] = useState26(
+  const [recommendedPivotTables, setRecommendedPivotTables] = useState27(
     []
   );
-  const [createdPivotTables, setCreatedPivotTables] = useState26([]);
+  const [createdPivotTables, setCreatedPivotTables] = useState27([]);
   useEffect21(() => {
     const fetchPivotTables = async () => {
       const pts = await Promise.all(
@@ -42497,18 +42622,18 @@ var validateReport = (formData, dashboardData, defaultDateFilter, allTables) =>
 
 // src/components/Chart/InternalChart.tsx
 import {
-  useState as useState27,
+  useState as useState28,
   useEffect as useEffect22,
   useContext as useContext24,
   useMemo as useMemo19,
-  useRef as useRef16,
-  useLayoutEffect as useLayoutEffect2
+  useRef as useRef17,
+  useLayoutEffect as useLayoutEffect3
 } from "react";
 import { differenceInHours as differenceInHours2 } from "date-fns";
 init_Filter();
 init_filterProcessing();
 init_dateRangePickerUtils();
-import { Fragment as Fragment11, jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
 var MULTISELECT_REQUEST_DEBOUNCE_MS = 1e3;
 var TogglePrimitive = ({
   value,
@@ -42622,8 +42747,8 @@ function InternalChart({
   const { reportFilters } = useContext24(ReportFiltersContext);
   const { dashboardConfig } = useContext24(DashboardConfigContext);
   const { eventTracking } = useContext24(EventTrackingContext);
-  const [filtersPopoverOpen, setFiltersPopoverOpen] = useState27(false);
-  const filtersButtonRef = useRef16(null);
+  const [filtersPopoverOpen, setFiltersPopoverOpen] = useState28(false);
+  const filtersButtonRef = useRef17(null);
   const currentReportFilters = useMemo19(() => {
     const dashFilters = dashboardConfig[report?.dashboardName ?? ""]?.config.filters;
     if (!dashFilters)
@@ -42651,10 +42776,10 @@ function InternalChart({
       reportDateFilter.defaultPresetRanges ?? []
     ) : defaultOptionsV2;
   }, [reportDateFilter]);
-  const [filterValues, setFilterValues] = useState27({});
-  const multiselectDebounceRef = useRef16({});
-  const latestMultiselectValueRef = useRef16({});
-  const [lockedFilters, setLockedFilters] = useState27(
+  const [filterValues, setFilterValues] = useState28({});
+  const multiselectDebounceRef = useRef17({});
+  const latestMultiselectValueRef = useRef17({});
+  const [lockedFilters, setLockedFilters] = useState28(
     {}
   );
   useEffect22(() => {
@@ -42814,9 +42939,9 @@ function InternalChart({
     }
     onDashboardFilterChange(filter.label, filterValue);
   };
-  const [filtersExpanded, setFiltersExpanded] = useState27(false);
-  const filtersContainerRef = useRef16(null);
-  const [visibleFilters, setVisibleFilters] = useState27([]);
+  const [filtersExpanded, setFiltersExpanded] = useState28(false);
+  const filtersContainerRef = useRef17(null);
+  const [visibleFilters, setVisibleFilters] = useState28([]);
   const filtersOverflowing = useMemo19(() => {
     return visibleFilters.some((visible) => visible);
   }, [visibleFilters]);
@@ -42832,7 +42957,7 @@ function InternalChart({
     });
     setVisibleFilters(newVisibleItems);
   };
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     requestAnimationFrame(() => measureItems());
     const handleResize = () => {
       measureItems();
@@ -43008,7 +43133,7 @@ function InternalChart({
             )
           }
         ),
-        loading && (!report || report.chartType !== "table") || !report ? /* @__PURE__ */ jsx64(LoadingComponent, {}) : /* @__PURE__ */ jsxs46(Fragment11, { children: [
+        loading && (!report || report.chartType !== "table") || !report ? /* @__PURE__ */ jsx64(LoadingComponent, {}) : /* @__PURE__ */ jsxs46(Fragment10, { children: [
           "metric" === report.chartType && /* @__PURE__ */ jsx64(
             "div",
             {
@@ -43081,10 +43206,10 @@ init_dates();
 import React13, {
   useContext as useContext25,
   useMemo as useMemo20,
-  useRef as useRef17,
-  useState as useState28
+  useRef as useRef18,
+  useState as useState29
 } from "react";
-import { Fragment as Fragment12, jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
 function QuillMultiSelectSectionList({
   options,
   width,
@@ -43100,10 +43225,10 @@ function QuillMultiSelectSectionList({
   owner
 }) {
   const [theme] = useContext25(ThemeContext);
-  const [showModal, setShowModal] = useState28(false);
-  const modalRef = useRef17(null);
-  const buttonRef = useRef17(null);
-  const debounceTimeoutId = useRef17(null);
+  const [showModal, setShowModal] = useState29(false);
+  const modalRef = useRef18(null);
+  const buttonRef = useRef18(null);
+  const debounceTimeoutId = useRef18(null);
   const [searchQuery, setSearchQuery] = React13.useState("");
   useOnClickOutside_default(
     modalRef,
@@ -43297,7 +43422,7 @@ function QuillMultiSelectSectionList({
             },
             ref: modalRef,
             children: [
-              options && optionsLength > 20 && /* @__PURE__ */ jsxs47(Fragment12, { children: [
+              options && optionsLength > 20 && /* @__PURE__ */ jsxs47(Fragment11, { children: [
                 /* @__PURE__ */ jsx65(
                   ListboxTextInput2,
                   {
@@ -43610,7 +43735,7 @@ init_constants();
 init_pivotConstructor();
 var import_pluralize = __toESM(require_pluralize(), 1);
 init_pivotProcessing();
-import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
 var CHART_TYPES = [
   "column",
   "stacked",
@@ -43885,15 +44010,15 @@ function createReportFromForm(formData, report, eventTracking, selectedPivotTabl
   return newReport;
 }
 function ChartBuilderWithModal(props) {
-  const parentRef = useRef18(null);
-  const [modalWidth, setModalWidth] = useState29(200);
-  const [modalHeight, setModalHeight] = useState29(200);
+  const parentRef = useRef19(null);
+  const [modalWidth, setModalWidth] = useState30(200);
+  const [modalHeight, setModalHeight] = useState30(200);
   const { isOpen, setIsOpen, title, isHorizontalView } = props;
   const Modal = props.ModalComponent ?? MemoizedModal;
   const { dashboardReports: dashboard } = useDashboardReports(
     props.destinationDashboard
   );
-  const [filtersEnabledState, setFiltersEnabledState] = useState29(
+  const [filtersEnabledState, setFiltersEnabledState] = useState30(
     !!props.reportId
   );
   useEffect23(() => {
@@ -44031,13 +44156,13 @@ function ChartBuilder({
     }
     return map;
   }, [report]);
-  const [windowWidth, setWindowWidth] = useState29(1200);
-  const [rows, setRows] = useState29(() => report?.rows ?? []);
-  const [itemQuery, setItemQuery] = useState29(report?.itemQuery);
-  const [rowCount, setRowCount] = useState29(report?.rowCount ?? 0);
-  const [maxPage, setMaxPage] = useState29(0);
+  const [windowWidth, setWindowWidth] = useState30(1200);
+  const [rows, setRows] = useState30(() => report?.rows ?? []);
+  const [itemQuery, setItemQuery] = useState30(report?.itemQuery);
+  const [rowCount, setRowCount] = useState30(report?.rowCount ?? 0);
+  const [maxPage, setMaxPage] = useState30(0);
   const thisReportLoadingState = reportId ? reportsLoadingState[reportId] : void 0;
-  const [isLoading, setIsLoading] = useState29(() => {
+  const [isLoading, setIsLoading] = useState30(() => {
     if (reportId) {
       if (report?.rows && report.rows.length > 0) return false;
       if (report?.pivotRows && report.pivotRows.length > 0) return false;
@@ -44047,13 +44172,13 @@ function ChartBuilder({
     }
     return false;
   });
-  const [rowCountIsLoading, setRowCountIsLoading] = useState29(false);
-  const [isSubmitting, setIsSubmitting] = useState29(false);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState30(false);
+  const [isSubmitting, setIsSubmitting] = useState30(false);
   const MIN_FORM_WIDTH = 700;
-  const [pivotCardWidth, setPivotCardWidth] = useState29(MIN_FORM_WIDTH);
-  const [formWidth, setFormWidth] = useState29(MIN_FORM_WIDTH);
-  const inputRef = useRef18(null);
-  const selectRef = useRef18(null);
+  const [pivotCardWidth, setPivotCardWidth] = useState30(MIN_FORM_WIDTH);
+  const [formWidth, setFormWidth] = useState30(MIN_FORM_WIDTH);
+  const inputRef = useRef19(null);
+  const selectRef = useRef19(null);
   const processColumns = (columns2) => {
     if (schemaData.schemaWithCustomFields) {
       const newProcessedColumns = columns2?.map((col) => {
@@ -44108,12 +44233,12 @@ function ChartBuilder({
     }
     return columns2;
   };
-  const [columns, setColumns] = useState29(
+  const [columns, setColumns] = useState30(
     processColumns(report?.columnInternal ?? [])
   );
-  const [currentPage, setCurrentPage] = useState29(0);
-  const parentRef = useRef18(null);
-  const deleteRef = useRef18(null);
+  const [currentPage, setCurrentPage] = useState30(0);
+  const parentRef = useRef19(null);
+  const deleteRef = useRef19(null);
   const modalPadding = 20;
   const deleteButtonMargin = -12;
   const { dashboardFilters } = useContext26(DashboardFiltersContext);
@@ -44158,7 +44283,7 @@ function ChartBuilder({
       window.removeEventListener("resize", handleResize);
     };
   }, [isOpen]);
-  const [dashboardOptions, setDashboardOptions] = useState29([]);
+  const [dashboardOptions, setDashboardOptions] = useState30([]);
   const {
     reportFilters,
     loadFiltersForReport,
@@ -44166,8 +44291,8 @@ function ChartBuilder({
     abortLoadingFilters
   } = useContext26(ReportFiltersContext);
   const { reportsDispatch } = useContext26(ReportsContext);
-  const initialFilters = useRef18(reportFilters[report?.id ?? TEMP_REPORT_ID]);
-  const [reportFiltersLoaded, setReportFiltersLoaded] = useState29(!filtersEnabled);
+  const initialFilters = useRef19(reportFilters[report?.id ?? TEMP_REPORT_ID]);
+  const [reportFiltersLoaded, setReportFiltersLoaded] = useState30(!filtersEnabled);
   const hasExistingData = useMemo21(() => {
     return report?.rows && report.rows.length > 0 || report?.pivotRows && report.pivotRows.length > 0;
   }, [report?.rows, report?.pivotRows]);
@@ -44204,20 +44329,20 @@ function ChartBuilder({
       (f) => f.filter
     );
   }, [reportFilters, report?.id]);
-  const [showFilterModal, setShowFilterModal] = useState29(false);
-  const [filterIssues, setFilterIssues] = useState29([]);
-  const [showPivotPopover, setShowPivotPopover] = useState29(false);
-  const [isEdittingPivot, setIsEdittingPivot] = useState29(false);
-  const [selectedPivotIndex, setSelectedPivotIndex] = useState29(-1);
-  const [tableName, setTableName] = useState29(void 0);
-  const [includeCustomFields, setIncludeCustomFields] = useState29(
+  const [showFilterModal, setShowFilterModal] = useState30(false);
+  const [filterIssues, setFilterIssues] = useState30([]);
+  const [showPivotPopover, setShowPivotPopover] = useState30(false);
+  const [isEdittingPivot, setIsEdittingPivot] = useState30(false);
+  const [selectedPivotIndex, setSelectedPivotIndex] = useState30(-1);
+  const [tableName, setTableName] = useState30(void 0);
+  const [includeCustomFields, setIncludeCustomFields] = useState30(
     report ? !!report.includeCustomFields : !!client?.featureFlags?.customFieldsEnabled
   );
   const selectedTable = schemaData.schema?.find(
     (t) => t.displayName === tableName
   );
-  const [pivotPopUpTitle, setPivotPopUpTitle] = useState29("Add pivot");
-  const [pivotError, setPivotError] = useState29(void 0);
+  const [pivotPopUpTitle, setPivotPopUpTitle] = useState30("Add pivot");
+  const [pivotError, setPivotError] = useState30(void 0);
   const pivotData = report?.pivotRows && report?.pivotColumns ? {
     rows: report.pivotRows,
     columns: report.pivotColumns,
@@ -44227,19 +44352,19 @@ function ChartBuilder({
   } : void 0;
   const destinationDashboardName = report?.dashboardName || destinationDashboard;
   const query = report?.queryString;
-  const [loadingFormData, setLoadingFormData] = useState29(false);
-  const [triggeredEditChart, setTriggeredEditChart] = useState29(false);
-  const [createdPivots, setCreatedPivots] = useState29(
+  const [loadingFormData, setLoadingFormData] = useState30(false);
+  const [triggeredEditChart, setTriggeredEditChart] = useState30(false);
+  const [createdPivots, setCreatedPivots] = useState30(
     report?.pivot ? [report.pivot] : cp
   );
-  const [recommendedPivots, setRecommendedPivots] = useState29(rp);
-  const [pivotRowField, setPivotRowField] = useState29(
+  const [recommendedPivots, setRecommendedPivots] = useState30(rp);
+  const [pivotRowField, setPivotRowField] = useState30(
     report?.pivot?.rowField
   );
-  const [pivotColumnField, setPivotColumnField] = useState29(
+  const [pivotColumnField, setPivotColumnField] = useState30(
     report?.pivot?.columnField
   );
-  const [pivotAggregations, setPivotAggregations] = useState29(
+  const [pivotAggregations, setPivotAggregations] = useState30(
     report?.pivot?.aggregations ?? [
       {
         valueField: report?.pivot?.valueField,
@@ -44248,10 +44373,10 @@ function ChartBuilder({
       }
     ]
   );
-  const [pivotLimit, setPivotLimit] = useState29(
+  const [pivotLimit, setPivotLimit] = useState30(
     report?.pivot?.rowLimit
   );
-  const [pivotSort, setPivotSort] = useState29(
+  const [pivotSort, setPivotSort] = useState30(
     report?.pivot?.sort && report?.pivot?.sortDirection && report?.pivot?.sortField ? {
       sortField: report.pivot.sortField,
       sortDirection: report.pivot.sortDirection
@@ -44264,18 +44389,18 @@ function ChartBuilder({
       rowsPerRequest: report?.chartType === "table" ? 50 : 500
     }
   };
-  const [currentProcessing, setCurrentProcessing] = useState29(baseProcessing);
-  const [customTenantAccess, setCustomTenantAccess] = useState29(() => {
+  const [currentProcessing, setCurrentProcessing] = useState30(baseProcessing);
+  const [customTenantAccess, setCustomTenantAccess] = useState30(() => {
     const value = report?.flags === null ? false : !!Object.values(report?.flags ?? {}).length;
     return value;
   });
-  const [dateFieldOptions, setDateFieldOptions] = useState29([]);
-  const [allTables, setAllTables] = useState29([]);
-  const [customFieldTableRef, setCustomFieldTableRef] = useState29(false);
-  const [referencedColumns, setReferencedColumns] = useState29({});
-  const [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = useState29({});
-  const [referencedTablesLoaded, setReferencedTablesLoaded] = useState29(false);
-  const [filterMap, setFilterMap] = useState29(report?.filterMap ?? {});
+  const [dateFieldOptions, setDateFieldOptions] = useState30([]);
+  const [allTables, setAllTables] = useState30([]);
+  const [customFieldTableRef, setCustomFieldTableRef] = useState30(false);
+  const [referencedColumns, setReferencedColumns] = useState30({});
+  const [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = useState30({});
+  const [referencedTablesLoaded, setReferencedTablesLoaded] = useState30(false);
+  const [filterMap, setFilterMap] = useState30(report?.filterMap ?? {});
   const canonicalFilterMap = useMemo21(() => {
     return Object.fromEntries(
       Object.entries(filterMap).filter(
@@ -44302,7 +44427,7 @@ function ChartBuilder({
       {}
     );
   }, [specificDashboardFilters, filterMap, allTables, referencedTablesLoaded]);
-  const [formFlags, setFormFlags] = useState29(
+  const [formFlags, setFormFlags] = useState30(
     report?.flags ? Object.fromEntries(
       Object.entries(report.flags).map(([key, value]) => {
         if (value === ALL_TENANTS) {
@@ -44319,7 +44444,7 @@ function ChartBuilder({
       })
     ) : void 0
   );
-  const [defaultDateField, setDefaultDateField] = useState29({
+  const [defaultDateField, setDefaultDateField] = useState30({
     table: dateFieldOptions[0]?.name || "",
     field: dateFieldOptions[0]?.columns[0]?.field || ""
   });
@@ -44343,6 +44468,7 @@ function ChartBuilder({
     ],
     xAxisLabel: "",
     chartType: firstNumberColumn ? "line" : "table",
+    showLegend: report?.showLegend ?? false,
     pivot: null,
     dateField: defaultDateField,
     template: true,
@@ -44458,7 +44584,7 @@ function ChartBuilder({
       };
     }
   };
-  const initializedRef = useRef18(false);
+  const initializedRef = useRef19(false);
   const getCurrentSection = () => {
     let id2 = report?.id ?? "";
     if (id2 === "" || id2 === TEMP_REPORT_ID) {
@@ -44505,7 +44631,7 @@ function ChartBuilder({
     }
     return chartBuilderData;
   };
-  const [formData, setFormData] = useState29(
+  const [formData, setFormData] = useState30(
     formFormDataFromReport(report, destinationSection ?? getCurrentSection())
   );
   const reportCustomFields = useMemo21(() => {
@@ -44559,7 +44685,7 @@ function ChartBuilder({
     const columnsObservedInRows = rows[0] ? Object.keys(rows[0]) : [];
     return columns.filter((col) => !columnsObservedInRows.includes(col.field));
   }, [rows]);
-  const [chartTypes, setChartTypes] = useState29(
+  const [chartTypes, setChartTypes] = useState30(
     (() => {
       const data = formFormDataFromReport(
         report,
@@ -44787,7 +44913,7 @@ function ChartBuilder({
       }));
     }
   }, [report?.triggerReload, report?.columns, formData.columns.length]);
-  const ranMountQuery = useRef18(false);
+  const ranMountQuery = useRef19(false);
   useEffect23(() => {
     if (runQueryOnMount && reportFiltersLoaded && filtersEnabled && !ranMountQuery.current) {
       ranMountQuery.current = true;
@@ -44813,7 +44939,7 @@ function ChartBuilder({
       {}
     ) ?? {};
   }, [client?.allTenantTypes]);
-  const [selectedPivotTable, setSelectedPivotTable] = useState29(pivotData);
+  const [selectedPivotTable, setSelectedPivotTable] = useState30(pivotData);
   const getDefaultXAxisFormat = useCallback3(
     (form) => {
       if (form.pivot?.rowField) {
@@ -45021,7 +45147,7 @@ function ChartBuilder({
       return handleRunQuery(baseProcessing, updatedFilters);
     });
   };
-  const filtersEnabledRef = useRef18(filtersEnabled);
+  const filtersEnabledRef = useRef19(filtersEnabled);
   useEffect23(() => {
     if (filtersEnabledRef.current !== filtersEnabled) {
       filtersEnabledRef.current = filtersEnabled;
@@ -45966,7 +46092,7 @@ function ChartBuilder({
                             width: 200
                           }
                         ) }),
-                        hideChartType ? /* @__PURE__ */ jsx66("div", { style: { width: 200 } }) : /* @__PURE__ */ jsxs48(Fragment13, { children: [
+                        hideChartType ? /* @__PURE__ */ jsx66("div", { style: { width: 200 } }) : /* @__PURE__ */ jsxs48(Fragment12, { children: [
                           /* @__PURE__ */ jsx66(
                             "div",
                             {
@@ -46308,6 +46434,19 @@ function ChartBuilder({
                             ) })
                           ] })
                         ] }),
+                        ["line", "column", "stacked", "pie"].includes(
+                          (chartData.chartType ?? "").toLowerCase()
+                        ) && /* @__PURE__ */ jsxs48("div", { children: [
+                          /* @__PURE__ */ jsx66(SubHeaderComponent, { label: "Legend" }),
+                          /* @__PURE__ */ jsx66(ChartBuilderInputRowContainer, { children: /* @__PURE__ */ jsx66(
+                            CheckboxComponent,
+                            {
+                              isChecked: !!formData.showLegend,
+                              label: "Show legend",
+                              onChange: () => handleChange(!formData.showLegend, "showLegend")
+                            }
+                          ) })
+                        ] }),
                         client?.featureFlags?.["referenceLines"] && (chartData.chartType === "line" || chartData.chartType === "column") && /* @__PURE__ */ jsxs48("div", { children: [
                           /* @__PURE__ */ jsx66(SubHeaderComponent, { label: "Reference Lines" }),
                           /* @__PURE__ */ jsxs48(ChartBuilderInputColumnContainer, { children: [
@@ -46343,7 +46482,7 @@ function ChartBuilder({
                                         )
                                       }
                                     ),
-                                    refLine.label === REFERENCE_LINE && /* @__PURE__ */ jsxs48(Fragment13, { children: [
+                                    refLine.label === REFERENCE_LINE && /* @__PURE__ */ jsxs48(Fragment12, { children: [
                                       /* @__PURE__ */ jsx66(
                                         TextInputComponent,
                                         {
@@ -47040,7 +47179,7 @@ function ChartBuilder({
                                     label: "Delete"
                                   }
                                 ),
-                                !hideSubmitButton && /* @__PURE__ */ jsxs48(Fragment13, { children: [
+                                !hideSubmitButton && /* @__PURE__ */ jsxs48(Fragment12, { children: [
                                   hideDiscardChanges ? null : /* @__PURE__ */ jsx66(
                                     SecondaryButtonComponent,
                                     {
@@ -47811,7 +47950,7 @@ function reconcileReportWithColumns(report, columns, previousReport) {
 }
 
 // src/hooks/useLongLoading.tsx
-import { useContext as useContext27, useEffect as useEffect24, useState as useState30 } from "react";
+import { useContext as useContext27, useEffect as useEffect24, useState as useState31 } from "react";
 function useLongLoading(isLoading, meta) {
   const {
     origin,
@@ -47819,8 +47958,8 @@ function useLongLoading(isLoading, meta) {
     abnormalLoadTime = 15e3,
     loadDescription
   } = meta;
-  const [isLongLoading, setIsLongLoading] = useState30(false);
-  const [isAbnormalLoading, setIsAbnormalLoading] = useState30(false);
+  const [isLongLoading, setIsLongLoading] = useState31(false);
+  const [isAbnormalLoading, setIsAbnormalLoading] = useState31(false);
   const { eventTracking } = useContext27(EventTrackingContext);
   useEffect24(() => {
     let longTimer = null;
@@ -48004,8 +48143,8 @@ function SQLEditor({
   onRequestAddVirtualTable
 }) {
   const computedButtonLabel = addToDashboardButtonLabel === "Add to dashboard" ? reportId || report?.id ? "Save changes" : "Add to dashboard" : addToDashboardButtonLabel;
-  const [sqlPrompt, setSqlPrompt] = useState31("");
-  const sqlPromptFormRef = useRef19(null);
+  const [sqlPrompt, setSqlPrompt] = useState32("");
+  const sqlPromptFormRef = useRef20(null);
   const sqlPromptInputWidth = useResponsiveFirstChildWidth_default(sqlPromptFormRef, {
     gap: 12,
     initialWidth: 320,
@@ -48027,9 +48166,9 @@ function SQLEditor({
   const destinationDashboardConfig = useMemo22(() => {
     return dashboards?.find((d) => d.name === destinationDashboard);
   }, [dashboards, destinationDashboard]);
-  const [query, setQuery] = useState31(defaultQuery);
-  const [rows, setRows] = useState31([]);
-  const [columns, setColumns] = useState31([]);
+  const [query, setQuery] = useState32(defaultQuery);
+  const [rows, setRows] = useState32([]);
+  const [columns, setColumns] = useState32([]);
   const [schemaData] = useContext28(SchemaDataContext);
   const { dashboardFilters } = useContext28(DashboardFiltersContext);
   const specificDashboardFilters = useMemo22(() => {
@@ -48037,27 +48176,27 @@ function SQLEditor({
       dashboardFilters[report?.dashboardName ?? destinationDashboard ?? ""] ?? {}
     ).map((f) => f.filter);
   }, [dashboardFilters, destinationDashboard]);
-  const [errorMessage, setErrorMessage] = useState31("");
-  const [sqlResponseLoading, setSqlResponseLoading] = useState31(false);
+  const [errorMessage, setErrorMessage] = useState32("");
+  const [sqlResponseLoading, setSqlResponseLoading] = useState32(false);
   useLongLoading(sqlResponseLoading, {
     origin: "SQLEditor",
     loadDescription: "Loading SQL response"
   });
-  const [sqlQueryLoading, setSqlQueryLoading] = useState31(false);
+  const [sqlQueryLoading, setSqlQueryLoading] = useState32(false);
   useLongLoading(sqlQueryLoading, {
     origin: "SQLEditor",
     loadDescription: "Loading SQL query"
   });
-  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState31(false);
-  const [displayTable, setDisplayTable] = useState31(false);
-  const [formattedRows, setFormattedRows] = useState31([]);
-  const [rowCount, setRowCount] = useState31(void 0);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState31(false);
-  const [maxPage, setMaxPage] = useState31(1);
-  const [tableSearchQuery, setTableSearchQuery] = useState31("");
-  const [lastSuccessfulQuery, setLastSuccessfulQuery] = useState31("");
-  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState31(false);
-  const [tempReport, setTempReport] = useState31(() => {
+  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState32(false);
+  const [displayTable, setDisplayTable] = useState32(false);
+  const [formattedRows, setFormattedRows] = useState32([]);
+  const [rowCount, setRowCount] = useState32(void 0);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState32(false);
+  const [maxPage, setMaxPage] = useState32(1);
+  const [tableSearchQuery, setTableSearchQuery] = useState32("");
+  const [lastSuccessfulQuery, setLastSuccessfulQuery] = useState32("");
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState32(false);
+  const [tempReport, setTempReport] = useState32(() => {
     const contextReport = reportId ? allReportsById[reportId] : void 0;
     const initial = {
       ...EMPTY_INTERNAL_REPORT,
@@ -48065,8 +48204,8 @@ function SQLEditor({
     };
     return initial;
   });
-  const tableRef = useRef19(null);
-  const [cachedHeight, setCachedHeight] = useState31(0);
+  const tableRef = useRef20(null);
+  const [cachedHeight, setCachedHeight] = useState32(0);
   const DEFAULT_ROWS_PER_PAGE = 5;
   const ROW_HEIGHT = 37;
   const TABLE_TAB_HEIGHT = 75;
@@ -48143,8 +48282,8 @@ function SQLEditor({
       rowsPerPage * 10
     )
   };
-  const [currentPage, setCurrentPage] = useState31(0);
-  const [currentSort, setCurrentSort] = useState31(void 0);
+  const [currentPage, setCurrentPage] = useState32(0);
+  const [currentSort, setCurrentSort] = useState32(void 0);
   const currentProcessing = useMemo22(() => {
     return {
       page: {
@@ -49065,9 +49204,9 @@ var SQLEditorComponent = ({
   loading,
   LoadingComponent = QuillLoadingComponent
 }) => {
-  const [editorKey, setEditorKey] = useState31(0);
+  const [editorKey, setEditorKey] = useState32(0);
   const { eventTracking } = useContext28(EventTrackingContext);
-  const currentProvider = useRef19(null);
+  const currentProvider = useRef20(null);
   useEffect25(() => {
     if (currentProvider.current) {
       currentProvider.current.dispose();
@@ -49309,7 +49448,7 @@ function SchemaItem({
   index,
   onClick
 }) {
-  const [isOpen, setIsOpen] = useState31(index === 0);
+  const [isOpen, setIsOpen] = useState32(index === 0);
   const schemaContainerStyle = {
     display: "flex",
     flexDirection: "column"
@@ -49539,13 +49678,13 @@ function SchemaItem({
 import {
   useContext as useContext32,
   useEffect as useEffect29,
-  useRef as useRef21,
-  useState as useState37
+  useRef as useRef22,
+  useState as useState38
 } from "react";
 init_constants();
 
 // src/hooks/useReportBuilder.tsx
-import { useContext as useContext29, useEffect as useEffect26, useMemo as useMemo23, useState as useState32 } from "react";
+import { useContext as useContext29, useEffect as useEffect26, useMemo as useMemo23, useState as useState33 } from "react";
 init_tableProcessing();
 init_ReportBuilder();
 init_constants();
@@ -49596,18 +49735,18 @@ var useReportBuilderInternal = ({
     rowsPerPage: _rowsPerPage,
     rowsPerRequest: _rowsPerRequest
   };
-  const [openPopover, setOpenPopover] = useState32(null);
-  const [aiPrompt, setAiPrompt] = useState32("");
-  const [reportBuilderLoading, setReportBuilderLoading] = useState32(false);
-  const [tableLoading, setTableLoading] = useState32(false);
-  const [errorMessage, setErrorMessage] = useState32("");
-  const [unresolvedReportMessage, setUnresolvedReportMessage] = useState32("");
-  const [tables, setTables] = useState32([]);
-  const [columns, setColumns] = useState32([]);
-  const [filterStack, setFilterStack] = useState32([]);
-  const [pivot, setPivot] = useState32(null);
-  const [sort, setSort] = useState32([]);
-  const [limit, setLimit] = useState32(null);
+  const [openPopover, setOpenPopover] = useState33(null);
+  const [aiPrompt, setAiPrompt] = useState33("");
+  const [reportBuilderLoading, setReportBuilderLoading] = useState33(false);
+  const [tableLoading, setTableLoading] = useState33(false);
+  const [errorMessage, setErrorMessage] = useState33("");
+  const [unresolvedReportMessage, setUnresolvedReportMessage] = useState33("");
+  const [tables, setTables] = useState33([]);
+  const [columns, setColumns] = useState33([]);
+  const [filterStack, setFilterStack] = useState33([]);
+  const [pivot, setPivot] = useState33(null);
+  const [sort, setSort] = useState33([]);
+  const [limit, setLimit] = useState33(null);
   const reportBuilderState = useMemo23(() => {
     return {
       tables,
@@ -49618,28 +49757,28 @@ var useReportBuilderInternal = ({
       limit
     };
   }, [columns, filterStack, limit, pivot, sort, tables]);
-  const [stateStack, setStateStack] = useState32([]);
-  const [poppedStateStack, setPoppedStateStack] = useState32([]);
-  const [unfilteredUniqueValues, setUnfilteredUniqueValues] = useState32({});
-  const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = useState32(false);
-  const [filteredUniqueValues, setFilteredUniqueValues] = useState32(null);
-  const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = useState32(false);
-  const [columnUniqueValues, setColumnUniqueValues] = useState32({});
-  const [dateRanges, setDateRanges] = useState32(null);
-  const [tempReport, setTempReport] = useState32({
+  const [stateStack, setStateStack] = useState33([]);
+  const [poppedStateStack, setPoppedStateStack] = useState33([]);
+  const [unfilteredUniqueValues, setUnfilteredUniqueValues] = useState33({});
+  const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = useState33(false);
+  const [filteredUniqueValues, setFilteredUniqueValues] = useState33(null);
+  const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = useState33(false);
+  const [columnUniqueValues, setColumnUniqueValues] = useState33({});
+  const [dateRanges, setDateRanges] = useState33(null);
+  const [tempReport, setTempReport] = useState33({
     ...EMPTY_INTERNAL_REPORT,
     pagination: REPORT_BUILDER_PAGINATION
   });
-  const [currentProcessing, setCurrentProcessing] = useState32({
+  const [currentProcessing, setCurrentProcessing] = useState33({
     page: REPORT_BUILDER_PAGINATION
   });
-  const [previousPage, setPreviousPage] = useState32(0);
-  const [reportColumns, setReportColumns] = useState32([]);
-  const [reportRows, setReportRows] = useState32([]);
-  const [formattedRows, setFormattedRows] = useState32([]);
-  const [pivotData, setPivotData] = useState32(null);
-  const [numberOfRows, setNumberOfRows] = useState32(0);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState32(false);
+  const [previousPage, setPreviousPage] = useState33(0);
+  const [reportColumns, setReportColumns] = useState33([]);
+  const [reportRows, setReportRows] = useState33([]);
+  const [formattedRows, setFormattedRows] = useState33([]);
+  const [pivotData, setPivotData] = useState33(null);
+  const [numberOfRows, setNumberOfRows] = useState33(0);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState33(false);
   const reportColumnsToStateColumns = useMemo23(() => {
     const positionMap = {};
     columns.forEach((column, index) => {
@@ -49658,28 +49797,28 @@ var useReportBuilderInternal = ({
       }
     });
   }, [columns, reportColumns]);
-  const [pivotRowField, setPivotRowField] = useState32(
+  const [pivotRowField, setPivotRowField] = useState33(
     void 0
   );
-  const [pivotColumnField, setPivotColumnField] = useState32(
+  const [pivotColumnField, setPivotColumnField] = useState33(
     void 0
   );
-  const [pivotAggregations, setPivotAggregations] = useState32([]);
-  const [pivotLimit, setPivotLimit] = useState32(void 0);
-  const [pivotSort, setPivotSort] = useState32(void 0);
-  const [pivotHint, setPivotHint] = useState32("");
-  const [pivotError, setPivotError] = useState32("");
-  const [createdPivots, setCreatedPivots] = useState32([]);
-  const [recommendedPivots, setRecommendedPivots] = useState32([]);
-  const [pivotPopUpTitle, setPivotPopUpTitle] = useState32("Add pivot");
-  const [showPivotPopover, setShowPivotPopover] = useState32(false);
-  const [isEditingPivot, setIsEditingPivot] = useState32(false);
-  const [selectedPivotIndex, setSelectedPivotIndex] = useState32(-1);
+  const [pivotAggregations, setPivotAggregations] = useState33([]);
+  const [pivotLimit, setPivotLimit] = useState33(void 0);
+  const [pivotSort, setPivotSort] = useState33(void 0);
+  const [pivotHint, setPivotHint] = useState33("");
+  const [pivotError, setPivotError] = useState33("");
+  const [createdPivots, setCreatedPivots] = useState33([]);
+  const [recommendedPivots, setRecommendedPivots] = useState33([]);
+  const [pivotPopUpTitle, setPivotPopUpTitle] = useState33("Add pivot");
+  const [showPivotPopover, setShowPivotPopover] = useState33(false);
+  const [isEditingPivot, setIsEditingPivot] = useState33(false);
+  const [selectedPivotIndex, setSelectedPivotIndex] = useState33(-1);
   const [
     pivotRecommendationsEnabledState,
     setPivotRecommendationsEnabledState
-  ] = useState32(pivotRecommendationsEnabled);
-  const [askAILoading, setAskAILoading] = useState32(false);
+  ] = useState33(pivotRecommendationsEnabled);
+  const [askAILoading, setAskAILoading] = useState33(false);
   const loading = reportBuilderLoading || tableLoading;
   useLongLoading(reportBuilderLoading, {
     origin: "ReportBuilder",
@@ -51061,7 +51200,7 @@ var useReportBuilder = ({
 init_ReportBuilder();
 
 // src/components/ReportBuilder/AddColumnModal.tsx
-import { useState as useState33, useRef as useRef20, useMemo as useMemo24, useEffect as useEffect27, useContext as useContext30 } from "react";
+import { useState as useState34, useRef as useRef21, useMemo as useMemo24, useEffect as useEffect27, useContext as useContext30 } from "react";
 import {
   DndContext as DndContext2,
   closestCenter as closestCenter2,
@@ -51096,14 +51235,14 @@ function AddColumnModal({
   LoadingComponent = QuillLoadingComponent,
   onRequestAddVirtualTable
 }) {
-  const [primaryTable, setPrimaryTable] = useState33(
+  const [primaryTable, setPrimaryTable] = useState34(
     selectedTables[0]?.name
   );
   const [theme] = useContext30(ThemeContext);
-  const [search, setSearch] = useState33("");
-  const [initialLoad, setInitialLoad] = useState33(true);
-  const textInputContainerRef = useRef20(null);
-  const [modalSelectedColumns, setModalSelectedColumns] = useState33(
+  const [search, setSearch] = useState34("");
+  const [initialLoad, setInitialLoad] = useState34(true);
+  const textInputContainerRef = useRef21(null);
+  const [modalSelectedColumns, setModalSelectedColumns] = useState34(
     selectedColumns.map((col) => `${col.table}.${col.field}`)
   );
   const columnOptions = useMemo24(() => {
@@ -51130,7 +51269,7 @@ function AddColumnModal({
       })
     );
   }, [schema, primaryTable]);
-  const [orderedColumnNames, setOrderedColumnNames] = useState33([]);
+  const [orderedColumnNames, setOrderedColumnNames] = useState34([]);
   const isSelectedAllColumns = columnOptions.length === modalSelectedColumns.length;
   const searchResults = useMemo24(() => {
     return orderedColumnNames.filter((column) => {
@@ -52026,7 +52165,7 @@ var AddFilters = ({
 };
 
 // src/internals/ReportBuilder/PivotForm.tsx
-import { useContext as useContext31, useEffect as useEffect28, useState as useState34 } from "react";
+import { useContext as useContext31, useEffect as useEffect28, useState as useState35 } from "react";
 init_textProcessing();
 init_pivotProcessing();
 import { jsx as jsx74, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -52055,21 +52194,21 @@ function PivotForm({
   isLoading,
   pivotHint
 }) {
-  const [allowedColumnFields, setAllowedColumnFields] = useState34([]);
-  const [allowedRowFields, setAllowedRowFields] = useState34([]);
-  const [allowedValueFields, setAllowedValueFields] = useState34([]);
+  const [allowedColumnFields, setAllowedColumnFields] = useState35([]);
+  const [allowedRowFields, setAllowedRowFields] = useState35([]);
+  const [allowedValueFields, setAllowedValueFields] = useState35([]);
   const [theme] = useContext31(ThemeContext);
-  const [limitInput, setLimitInput] = useState34(
+  const [limitInput, setLimitInput] = useState35(
     pivotLimit?.toString() ?? ""
   );
-  const [sortFieldInput, setSortFieldInput] = useState34(
+  const [sortFieldInput, setSortFieldInput] = useState35(
     pivotSort?.sortField ?? ""
   );
-  const [sortDirectionInput, setSortDirectionInput] = useState34(
+  const [sortDirectionInput, setSortDirectionInput] = useState35(
     pivotSort?.sortDirection ?? ""
   );
-  const [showLimitInput, setShowLimitInput] = useState34(!!pivotLimit);
-  const [showSortInput, setShowSortInput] = useState34(!!pivotSort);
+  const [showLimitInput, setShowLimitInput] = useState35(!!pivotLimit);
+  const [showSortInput, setShowSortInput] = useState35(!!pivotSort);
   useEffect28(() => {
     if (uniqueValues) {
       const possibleColumns = getPossiblePivotFieldOptions(
@@ -52698,8 +52837,8 @@ var AddPivot = ({
 };
 
 // src/components/ReportBuilder/AddLimitPopover.tsx
-import { useState as useState35 } from "react";
-import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs56 } from "react/jsx-runtime";
+import { useState as useState36 } from "react";
+import { Fragment as Fragment13, jsx as jsx76, jsxs as jsxs56 } from "react/jsx-runtime";
 var LimitSentence = ({
   limit,
   handleDelete,
@@ -52713,7 +52852,7 @@ var LimitSentence = ({
   SecondaryButton = MemoizedSecondaryButton,
   disabled = false
 }) => {
-  const [isOpen, setIsOpen] = useState35(false);
+  const [isOpen, setIsOpen] = useState36(false);
   const handleClickDelete = () => {
     setOpenPopover(null);
     handleDelete();
@@ -52755,7 +52894,7 @@ var AddLimitPopover = ({
   Button = MemoizedButton,
   SecondaryButton = MemoizedSecondaryButton
 }) => {
-  const [limit, setLimit] = useState35(initialLimit.toString());
+  const [limit, setLimit] = useState36(initialLimit.toString());
   const MAX_LIMIT = 2147483647;
   return /* @__PURE__ */ jsxs56("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
     /* @__PURE__ */ jsx76(
@@ -52790,7 +52929,7 @@ var AddLimitPopover = ({
           justifyContent: "end",
           gap: 12
         },
-        children: isEdit ? /* @__PURE__ */ jsxs56(Fragment14, { children: [
+        children: isEdit ? /* @__PURE__ */ jsxs56(Fragment13, { children: [
           /* @__PURE__ */ jsx76(SecondaryButton, { onClick: onDelete, label: "Delete" }),
           /* @__PURE__ */ jsx76(
             Button,
@@ -52996,9 +53135,9 @@ var AddLimit = ({
 };
 
 // src/components/ReportBuilder/AddSortPopover.tsx
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 init_textProcessing();
-import { Fragment as Fragment15, jsx as jsx78, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx78, jsxs as jsxs58 } from "react/jsx-runtime";
 var SORT_VALUE_TO_LABEL = {
   ASC: "ascending",
   DESC: "descending",
@@ -53020,7 +53159,7 @@ var SortSentence = ({
   SecondaryButton = MemoizedSecondaryButton,
   disabled = false
 }) => {
-  const [isOpen, setIsOpen] = useState36(false);
+  const [isOpen, setIsOpen] = useState37(false);
   const handleSetIsOpen = (isOpen2) => {
     setIsOpen(isOpen2);
   };
@@ -53072,8 +53211,8 @@ var AddSortPopover = ({
   Button = MemoizedButton,
   SecondaryButton = MemoizedSecondaryButton
 }) => {
-  const [sortColumn, setSortColumn] = useState36(column || "");
-  const [sortDirection, setSortDirection] = useState36(
+  const [sortColumn, setSortColumn] = useState37(column || "");
+  const [sortDirection, setSortDirection] = useState37(
     direction || "ASC"
   );
   return /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
@@ -53131,7 +53270,7 @@ var AddSortPopover = ({
           justifyContent: "end",
           gap: 12
         },
-        children: isEdit ? /* @__PURE__ */ jsxs58(Fragment15, { children: [
+        children: isEdit ? /* @__PURE__ */ jsxs58(Fragment14, { children: [
           /* @__PURE__ */ jsx78(SecondaryButton, { onClick: onDelete, label: "Delete" }),
           /* @__PURE__ */ jsx78(
             Button,
@@ -53492,7 +53631,7 @@ var ReportTable = ({
 };
 
 // src/ReportBuilder.tsx
-import { Fragment as Fragment16, jsx as jsx82, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx82, jsxs as jsxs61 } from "react/jsx-runtime";
 function ReportBuilder({
   initialTableName = "",
   onSubmitEditReport = () => void 0,
@@ -53554,11 +53693,11 @@ function ReportBuilder({
   const [theme] = useContext32(ThemeContext);
   const [client] = useContext32(ClientContext);
   const { getToken } = useContext32(FetchContext);
-  const parentRef = useRef21(null);
-  const askAIFormRef = useRef21(null);
-  const [isCopying, setIsCopying] = useState37(false);
-  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState37(false);
-  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState37(false);
+  const parentRef = useRef22(null);
+  const askAIFormRef = useRef22(null);
+  const [isCopying, setIsCopying] = useState38(false);
+  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState38(false);
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState38(false);
   const reportBuilder = useReportBuilderInternal({
     reportId,
     initialTableName,
@@ -53916,7 +54055,7 @@ function ReportBuilder({
                           disabled: poppedStateStack.length < 1 || loading
                         }
                       ),
-                      columns.length > 0 && /* @__PURE__ */ jsxs61(Fragment16, { children: [
+                      columns.length > 0 && /* @__PURE__ */ jsxs61(Fragment15, { children: [
                         onDiscardChanges && /* @__PURE__ */ jsx82(
                           SecondaryButtonComponent,
                           {
@@ -54062,8 +54201,8 @@ import {
   useContext as useContext33,
   useEffect as useEffect30,
   useMemo as useMemo26,
-  useRef as useRef22,
-  useState as useState38
+  useRef as useRef23,
+  useState as useState39
 } from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
 function ChartEditor({
@@ -54111,9 +54250,9 @@ function ChartEditor({
   onClickChartElement,
   onClickChartError
 }) {
-  const parentRef = useRef22(null);
-  const [modalWidth, setModalWidth] = useState38(200);
-  const [modalHeight, setModalHeight] = useState38(200);
+  const parentRef = useRef23(null);
+  const [modalWidth, setModalWidth] = useState39(200);
+  const [modalHeight, setModalHeight] = useState39(200);
   const { allReportsById } = useAllReports();
   const report = allReportsById[reportId];
   const resolvedDashboard = useMemo26(
@@ -54136,8 +54275,8 @@ function ChartEditor({
       (f) => f.filter
     );
   }, [dashboardFilters, report?.dashboardName]);
-  const [filtersEnabled, setFiltersEnabled] = useState38(true);
-  const [chartBuilderKey, setChartBuilderKey] = useState38(0);
+  const [filtersEnabled, setFiltersEnabled] = useState39(true);
+  const [chartBuilderKey, setChartBuilderKey] = useState39(0);
   const dateFilter = Object.values(specificDashboardFilters).find(
     (filter) => filter.filterType === "date_range"
   );
@@ -54301,7 +54440,7 @@ function StaticChart(props) {
     reportId,
     onClickChartElement,
     containerStyle,
-    showLegend = false,
+    showLegend,
     className
   } = props;
   const {
@@ -54417,7 +54556,7 @@ var useTenants = (dashboardName) => {
 };
 
 // src/hooks/useQuill.ts
-import { useContext as useContext35, useEffect as useEffect32, useMemo as useMemo27, useState as useState39 } from "react";
+import { useContext as useContext35, useEffect as useEffect32, useMemo as useMemo27, useState as useState40 } from "react";
 init_paginationProcessing();
 init_tableProcessing();
 init_dataProcessing();
@@ -54440,9 +54579,9 @@ var useQuill = (reportId, pagination) => {
   const [client, isClientLoading] = useContext35(ClientContext);
   const { tenants } = useContext35(TenantContext);
   const { eventTracking } = useContext35(EventTrackingContext);
-  const [loading, setLoading] = useState39(true);
-  const [error, setError] = useState39(void 0);
-  const [previousPage, setPreviousPage] = useState39(0);
+  const [loading, setLoading] = useState40(true);
+  const [error, setError] = useState40(void 0);
+  const [previousPage, setPreviousPage] = useState40(0);
   const processedReport = useMemo27(() => {
     return reportId && allReportsById[reportId] ? convertInternalReportToReport(
       mergeComparisonRange(allReportsById[reportId]),
@@ -54451,7 +54590,7 @@ var useQuill = (reportId, pagination) => {
       "useQuill"
     ) : void 0;
   }, [reportId, reportId && allReportsById[reportId], specificReportFilters]);
-  const [additionalProcessing, setAdditionProcessing] = useState39(
+  const [additionalProcessing, setAdditionProcessing] = useState40(
     pagination ? {
       page: pagination
     } : void 0
@@ -54667,7 +54806,7 @@ var useMemoizedRows = (reportId) => {
 };
 
 // src/hooks/useAskQuill.tsx
-import { useContext as useContext36, useEffect as useEffect33, useState as useState40 } from "react";
+import { useContext as useContext36, useEffect as useEffect33, useState as useState41 } from "react";
 init_astProcessing();
 init_astFilterProcessing();
 init_pivotProcessing();
@@ -54700,8 +54839,8 @@ var useAskQuill = (dashboardName) => {
   const { tenants } = useContext36(TenantContext);
   const { getToken } = useContext36(FetchContext);
   const { eventTracking } = useContext36(EventTrackingContext);
-  const [astInfo, setAstInfo] = useState40(void 0);
-  const [data, setData] = useState40({
+  const [astInfo, setAstInfo] = useState41(void 0);
+  const [data, setData] = useState41({
     rows: [],
     columns: [],
     pivot: null,
@@ -54711,9 +54850,9 @@ var useAskQuill = (dashboardName) => {
     pivotColumnFields: [],
     pivotValueFields: []
   });
-  const [loading, setLoading] = useState40(false);
-  const [error, setError] = useState40(void 0);
-  const [ask, setAsk] = useState40(
+  const [loading, setLoading] = useState41(false);
+  const [error, setError] = useState41(void 0);
+  const [ask, setAsk] = useState41(
     async () => void 0
   );
   const askHelper = async (query) => {
@@ -54927,13 +55066,13 @@ var useAskQuill = (dashboardName) => {
 };
 
 // src/hooks/useVirtualTables.tsx
-import { useContext as useContext37, useState as useState41 } from "react";
+import { useContext as useContext37, useState as useState42 } from "react";
 var useVirtualTables = () => {
   const [schemaData, setSchemaData] = useContext37(SchemaDataContext);
   const { tenants } = useContext37(TenantContext);
   const { getToken, quillFetchWithToken } = useContext37(FetchContext);
   const { eventTracking } = useContext37(EventTrackingContext);
-  const [loadingTables, setLoadingTables] = useState41({});
+  const [loadingTables, setLoadingTables] = useState42({});
   const handleReload = async (client, caller) => {
     setSchemaData({ ...schemaData, isSchemaLoading: true });
     setLoadingTables(