@quillsql/react 2.16.4 → 2.16.5

package/dist/index.js

@@ -19405,19 +19405,19 @@ var require_pluralize = __commonJS({
 // src/Dashboard.tsx
 import {
   useContext as useContext20,
-  useEffect as useEffect18,
-  useState as useState23,
+  useEffect as useEffect19,
+  useState as useState24,
   useMemo as useMemo16,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
 
 // src/Chart.tsx
 import {
-  useState as useState17,
-  useEffect as useEffect15,
+  useState as useState18,
+  useEffect as useEffect16,
   useContext as useContext16,
   useMemo as useMemo13,
-  useRef as useRef11
+  useRef as useRef12
 } from "react";
 
 // src/utils/csv.ts
@@ -25559,15 +25559,15 @@ var PieChart_default = PieChartWrapper;
 
 // src/components/QuillTable.tsx
 init_valueFormatter();
-import { useContext as useContext5, useEffect as useEffect7, useState as useState8 } from "react";
+import { useContext as useContext5, useEffect as useEffect8, useState as useState9 } from "react";
 
 // src/components/UiComponents.tsx
 import {
   forwardRef,
   useContext as useContext4,
-  useEffect as useEffect6,
-  useRef as useRef3,
-  useState as useState7
+  useEffect as useEffect7,
+  useRef as useRef4,
+  useState as useState8
 } from "react";
 
 // src/assets/ArrowDownHeadIcon.tsx
@@ -25819,6 +25819,146 @@ import { useEffect as useEffect4, useState as useState5 } from "react";
 // src/hooks/useSelectOnKeyDown.tsx
 import { useEffect as useEffect5, useState as useState6 } from "react";
 
+// src/hooks/useResponsiveFirstChildWidth.ts
+import {
+  useEffect as useEffect6,
+  useLayoutEffect,
+  useRef as useRef3,
+  useState as useState7
+} from "react";
+var DEFAULT_MIN_WIDTH = 0;
+var parseNumericValue = (value) => {
+  if (!value) {
+    return 0;
+  }
+  const parsed = parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+var getHorizontalGap = (element, explicitGap) => {
+  if (typeof explicitGap === "number") {
+    return explicitGap;
+  }
+  const computedStyle = window.getComputedStyle(element);
+  const columnGap = parseNumericValue(computedStyle.columnGap);
+  if (columnGap > 0) {
+    return columnGap;
+  }
+  const genericGap = parseNumericValue(computedStyle.gap);
+  return genericGap;
+};
+var calculateFirstChildWidth = (element, options) => {
+  const { gap, minWidth, maxWidth } = options;
+  const computedStyle = window.getComputedStyle(element);
+  const horizontalPadding = parseNumericValue(computedStyle.paddingLeft) + parseNumericValue(computedStyle.paddingRight);
+  const availableWidth = Math.max(
+    0,
+    element.clientWidth - horizontalPadding
+  );
+  const children = Array.from(element.children);
+  if (!children.length) {
+    return Math.max(minWidth ?? DEFAULT_MIN_WIDTH, 0);
+  }
+  const siblings = children.slice(1);
+  const gapCount = Math.max(children.length - 1, 0);
+  const effectiveGap = getHorizontalGap(element, gap) * gapCount;
+  let siblingsWidth = 0;
+  siblings.forEach((child) => {
+    const rect = child.getBoundingClientRect();
+    const childStyle = window.getComputedStyle(child);
+    siblingsWidth += rect.width + parseNumericValue(childStyle.marginLeft) + parseNumericValue(childStyle.marginRight);
+  });
+  const rawWidth = Math.max(0, availableWidth - siblingsWidth - effectiveGap);
+  const min2 = Math.max(minWidth ?? DEFAULT_MIN_WIDTH, 0);
+  const max2 = typeof maxWidth === "number" && Number.isFinite(maxWidth) ? Math.max(maxWidth, min2) : void 0;
+  const clampedWidth = max2 !== void 0 ? Math.min(Math.max(rawWidth, min2), max2) : Math.max(rawWidth, min2);
+  return Math.floor(clampedWidth);
+};
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect6;
+var useResponsiveFirstChildWidth = (containerRef, options = {}) => {
+  const {
+    gap,
+    initialWidth = -1,
+    minWidth = DEFAULT_MIN_WIDTH,
+    maxWidth
+  } = options;
+  const [width, setWidth] = useState7(initialWidth);
+  const previousWidthRef = useRef3(initialWidth);
+  useIsomorphicLayoutEffect(() => {
+    const element = containerRef?.current ?? null;
+    if (!element || typeof window === "undefined") {
+      return;
+    }
+    let frameId = null;
+    const updateWidth = () => {
+      if (!element.isConnected) {
+        return;
+      }
+      const nextWidth = calculateFirstChildWidth(element, {
+        gap,
+        minWidth,
+        maxWidth
+      });
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+      }
+      frameId = window.requestAnimationFrame(() => {
+        frameId = null;
+        if (Math.abs(previousWidthRef.current - nextWidth) > 0.5) {
+          previousWidthRef.current = nextWidth;
+          setWidth(nextWidth);
+        }
+      });
+    };
+    if (typeof ResizeObserver === "undefined") {
+      updateWidth();
+      const handleResize = () => updateWidth();
+      window.addEventListener("resize", handleResize);
+      return () => {
+        if (frameId !== null) {
+          cancelAnimationFrame(frameId);
+        }
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      updateWidth();
+    });
+    const observeChildren = () => {
+      resizeObserver.observe(element);
+      Array.from(element.children).forEach((child) => {
+        resizeObserver.observe(child);
+      });
+    };
+    observeChildren();
+    updateWidth();
+    const mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            resizeObserver.observe(node);
+          }
+        });
+        mutation.removedNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            resizeObserver.unobserve(node);
+          }
+        });
+      });
+      updateWidth();
+    });
+    mutationObserver.observe(element, { childList: true });
+    return () => {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [containerRef?.current, gap, minWidth, maxWidth]);
+  return width;
+};
+var useResponsiveFirstChildWidth_default = useResponsiveFirstChildWidth;
+
 // src/components/UiComponents.tsx
 import { createPortal } from "react-dom";
 
@@ -25850,14 +25990,19 @@ var QuillTextInput = forwardRef(
     disabled
   }, ref) => {
     const [theme] = useContext4(ThemeContext);
+    const isNumericWidth = typeof width === "number";
+    const resolvedWidth = typeof width === "string" ? width : isNumericWidth ? width : "100%";
     return /* @__PURE__ */ jsxs18(
       "label",
       {
         style: {
           position: "relative",
           borderRadius: "6px",
-          width,
-          minWidth: width
+          display: "flex",
+          flexDirection: "column",
+          width: resolvedWidth,
+          minWidth: isNumericWidth ? width : 0,
+          flex: isNumericWidth ? "0 0 auto" : "1 1 auto"
         },
         children: [
           label && /* @__PURE__ */ jsx26(
@@ -25879,6 +26024,7 @@ var QuillTextInput = forwardRef(
               ref,
               style: {
                 display: "flex",
+                flex: "1 1 auto",
                 height: 40,
                 minHeight: 40,
                 maxHeight: 40,
@@ -25890,8 +26036,8 @@ var QuillTextInput = forwardRef(
                 backgroundColor: theme?.backgroundColor,
                 color: theme?.primaryTextColor,
                 fontFamily: theme?.fontFamily,
-                width,
-                minWidth: width
+                width: "100%",
+                minWidth: 0
               },
               id: id2,
               value,
@@ -26261,10 +26407,10 @@ var MemoizedPopover = ({
   titlePaddingLeft = 0
 }) => {
   const [theme] = useContext4(ThemeContext);
-  const [rightAlignment, setRightAlignment] = useState7("auto");
-  const modalRef = useRef3(null);
-  const popoverRef = useRef3(null);
-  useEffect6(() => {
+  const [rightAlignment, setRightAlignment] = useState8("auto");
+  const modalRef = useRef4(null);
+  const popoverRef = useRef4(null);
+  useEffect7(() => {
     const listener = (event) => {
       const target = event.target;
       if (modalRef.current?.contains(target) || target.closest("[data-portal-ignore]") || ignoredRefs?.some(
@@ -26283,7 +26429,7 @@ var MemoizedPopover = ({
       document.removeEventListener("mousedown", listener);
     };
   }, [isOpen, ignoredRefs, setIsOpen, modalRef]);
-  useEffect6(() => {
+  useEffect7(() => {
     updatePopoverPosition();
     window.addEventListener("resize", updatePopoverPosition);
     return () => {
@@ -26679,10 +26825,10 @@ var QuillModalComponent = ({
   title
 }) => {
   const [theme] = useContext4(ThemeContext);
-  const [rightAlignment, setRightAlignment] = useState7("auto");
-  const modalRef = useRef3(null);
-  const popoverRef = useRef3(null);
-  useEffect6(() => {
+  const [rightAlignment, setRightAlignment] = useState8("auto");
+  const modalRef = useRef4(null);
+  const popoverRef = useRef4(null);
+  useEffect7(() => {
     const listener = (event) => {
       if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
         if (setIsOpen) setIsOpen(false);
@@ -26697,7 +26843,7 @@ var QuillModalComponent = ({
       document.removeEventListener("mousedown", listener);
     };
   }, [modalRef, setIsOpen, isOpen]);
-  useEffect6(() => {
+  useEffect7(() => {
     updatePopoverPosition();
     window.addEventListener("resize", updatePopoverPosition);
     return () => {
@@ -26994,9 +27140,9 @@ var OverflowContainer = ({
   children,
   style: style2
 }) => {
-  const containerRef = useRef3(null);
-  const [showTopShadow, setShowTopShadow] = useState7(false);
-  const [showBottomShadow, setShowBottomShadow] = useState7(false);
+  const containerRef = useRef4(null);
+  const [showTopShadow, setShowTopShadow] = useState8(false);
+  const [showBottomShadow, setShowBottomShadow] = useState8(false);
   const checkOverflow = () => {
     const container = containerRef.current;
     if (container) {
@@ -27007,7 +27153,7 @@ var OverflowContainer = ({
       );
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     const container = containerRef.current;
     if (container) {
       checkOverflow();
@@ -27161,10 +27307,10 @@ var QuillToolTipPortal = ({
   mirror = false
 }) => {
   const [theme] = useContext4(ThemeContext);
-  const [isOpen, setIsOpen] = useState7(false);
-  const tooltipRef = useRef3(null);
-  const triggerRef = useRef3(null);
-  const [tooltipPosition, setTooltipPosition] = useState7(void 0);
+  const [isOpen, setIsOpen] = useState8(false);
+  const tooltipRef = useRef4(null);
+  const triggerRef = useRef4(null);
+  const [tooltipPosition, setTooltipPosition] = useState8(void 0);
   const updatePosition = () => {
     if (triggerRef.current && tooltipRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
@@ -27189,7 +27335,7 @@ var QuillToolTipPortal = ({
       setTooltipPosition({ top, left });
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (isOpen) {
       const timer2 = setTimeout(() => {
         updatePosition();
@@ -27332,10 +27478,10 @@ var QuillPortal = ({
   showModal,
   setShowModal
 }) => {
-  const modalRef = useRef3(null);
-  const [popoverPosition, setPopoverPosition] = useState7(void 0);
-  const [z, setZ] = useState7(10);
-  const scrollableParentRef = useRef3(document.body);
+  const modalRef = useRef4(null);
+  const [popoverPosition, setPopoverPosition] = useState8(void 0);
+  const [z, setZ] = useState8(10);
+  const scrollableParentRef = useRef4(document.body);
   const updatePosition = () => {
     if (anchorRef.current) {
       requestAnimationFrame(() => {
@@ -27353,7 +27499,7 @@ var QuillPortal = ({
       });
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     let resizeObserver;
     let mutationObserver;
     if (showModal && anchorRef.current) {
@@ -27450,18 +27596,18 @@ function QuillTable({
   hideLabels,
   disableSort
 }) {
-  const [activeRows, setActiveRows] = useState8([]);
-  const [maxPage, setMaxPage] = useState8(1);
-  const [sortColumn, setSortColumn] = useState8(sort?.field || "");
-  const [sortDirection, setSortDirection] = useState8(sort?.direction || "desc");
+  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] = useState8(true);
-  const [initialLoad, setInitialLoad] = useState8(true);
-  useEffect7(() => {
+  const [isPaginating, setIsPaginating] = useState9(true);
+  const [initialLoad, setInitialLoad] = useState9(true);
+  useEffect8(() => {
     setSortColumn(sort?.field || "");
     setSortDirection(sort?.direction || "desc");
   }, [sort]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (rows?.length === 0 && isLoading) {
       return;
     }
@@ -27493,7 +27639,7 @@ function QuillTable({
     rowCount,
     isLoading
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (rows.length <= currentPage * rowsPerPage) {
       onPageChange && onPageChange(0);
       setMaxPage(1);
@@ -29459,9 +29605,9 @@ import { useMemo as useMemo10 } from "react";
 // src/DateRangePicker/QuillDateRangePicker.tsx
 import {
   useContext as useContext9,
-  useEffect as useEffect9,
-  useRef as useRef5,
-  useState as useState10
+  useEffect as useEffect10,
+  useRef as useRef6,
+  useState as useState11
 } from "react";
 import {
   startOfMonth as startOfMonth2,
@@ -29482,9 +29628,9 @@ import {
 import {
   useContext as useContext8,
   useMemo as useMemo7,
-  useRef as useRef4,
-  useState as useState9,
-  useEffect as useEffect8
+  useRef as useRef5,
+  useState as useState10,
+  useEffect as useEffect9
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -29499,9 +29645,9 @@ function QuillSelectComponent({
   hideEmptyOption
 }) {
   const [theme] = useContext8(ThemeContext);
-  const [showModal, setShowModal] = useState9(false);
-  const modalRef = useRef4(null);
-  const buttonRef = useRef4(null);
+  const [showModal, setShowModal] = useState10(false);
+  const modalRef = useRef5(null);
+  const buttonRef = useRef5(null);
   useOnClickOutside_default(
     modalRef,
     (event) => {
@@ -29524,9 +29670,9 @@ function QuillSelectComponent({
   const nullLabel = useMemo7(() => {
     return sortedItems.some((item) => item.value === "-") ? "None" : "-";
   }, [sortedItems]);
-  const [popoverPosition, setPopoverPosition] = useState9(void 0);
-  const [z, setZ] = useState9(10);
-  const scrollableParentRef = useRef4(document.body);
+  const [popoverPosition, setPopoverPosition] = useState10(void 0);
+  const [z, setZ] = useState10(10);
+  const scrollableParentRef = useRef5(document.body);
   const updatePosition = () => {
     if (buttonRef.current) {
       requestAnimationFrame(() => {
@@ -29544,7 +29690,7 @@ function QuillSelectComponent({
       });
     }
   };
-  useEffect8(() => {
+  useEffect9(() => {
     let resizeObserver;
     let mutationObserver;
     if (showModal && buttonRef.current) {
@@ -29825,23 +29971,23 @@ function QuillDateRangePicker({
 }) {
   const [theme] = useContext9(ThemeContext);
   const [client] = useContext9(ClientContext);
-  const [anchorStartDate, setAnchorStartDate] = useState10(
+  const [anchorStartDate, setAnchorStartDate] = useState11(
     getAnchorStartDate(dateRange.startDate, dateRange.endDate)
   );
-  const [anchorEndDate, setAnchorEndDate] = useState10(
+  const [anchorEndDate, setAnchorEndDate] = useState11(
     getAnchorEndDate(dateRange.startDate, dateRange.endDate)
   );
-  const [localStartDate, setLocalStartDate] = useState10(
+  const [localStartDate, setLocalStartDate] = useState11(
     dateRange.startDate
   );
-  const [localEndDate, setLocalEndDate] = useState10(
+  const [localEndDate, setLocalEndDate] = useState11(
     dateRange.endDate
   );
-  const [localPreset, setLocalPreset] = useState10(preset);
-  const [showModal, setShowModal] = useState10(false);
-  const buttonRef = useRef5(null);
-  const modalRef = useRef5(null);
-  useEffect9(() => {
+  const [localPreset, setLocalPreset] = useState11(preset);
+  const [showModal, setShowModal] = useState11(false);
+  const buttonRef = useRef6(null);
+  const modalRef = useRef6(null);
+  useEffect10(() => {
     setLocalEndDate(dateRange.endDate);
     setLocalStartDate(dateRange.startDate);
     setLocalPreset(preset || "");
@@ -30354,10 +30500,10 @@ function getAnchorEndDate(startDate, endDate) {
 // src/components/QuillMultiSelectWithCombo.tsx
 import React7, {
   useContext as useContext10,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useMemo as useMemo8,
-  useRef as useRef6,
-  useState as useState11
+  useRef as useRef7,
+  useState as useState12
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -30374,17 +30520,17 @@ function QuillMultiSelectComponentWithCombo({
   style: style2
 }) {
   const [theme] = useContext10(ThemeContext);
-  const [selectedOptions, setSelectedOptions] = useState11([]);
-  const [showModal, setShowModal] = useState11(false);
-  const modalRef = useRef6(null);
-  const buttonRef = useRef6(null);
-  const debounceTimeoutId = useRef6(null);
+  const [selectedOptions, setSelectedOptions] = useState12([]);
+  const [showModal, setShowModal] = useState12(false);
+  const modalRef = useRef7(null);
+  const buttonRef = useRef7(null);
+  const debounceTimeoutId = useRef7(null);
   const [searchQuery, setSearchQuery] = React7.useState("");
-  const [exceedsLimit, setExceedsLimit] = useState11(false);
-  const [popoverPosition, setPopoverPosition] = useState11(void 0);
-  const [z, setZ] = useState11(10);
-  const scrollableParentRef = useRef6(document.body);
-  const selectAllRef = useRef6(null);
+  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);
   let CheckboxState;
   ((CheckboxState2) => {
     CheckboxState2[CheckboxState2["SELECTED"] = 0] = "SELECTED";
@@ -30418,7 +30564,7 @@ function QuillMultiSelectComponentWithCombo({
       (elem) => elem.label ?? "-"
     ).join(", ");
   }, [options, value]);
-  const [selectAllCheckboxState, setSelectAllCheckboxState] = useState11(
+  const [selectAllCheckboxState, setSelectAllCheckboxState] = useState12(
     (() => {
       if (value.length === 0) {
         return 1 /* UNSELECTED */;
@@ -30429,12 +30575,12 @@ function QuillMultiSelectComponentWithCombo({
       return 2 /* INDETERMINATE */;
     })()
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (selectAllRef.current) {
       selectAllRef.current.indeterminate = selectAllCheckboxState === 2 /* INDETERMINATE */;
     }
   }, [selectAllCheckboxState, showModal]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (options.length > 0 && options?.[0]?.value === "EXCEEDS_LIMIT") {
       setExceedsLimit(true);
     } else {
@@ -30449,7 +30595,7 @@ function QuillMultiSelectComponentWithCombo({
     },
     showModal
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!value) {
       setSelectedOptions([]);
     } else {
@@ -30514,7 +30660,7 @@ function QuillMultiSelectComponentWithCombo({
       });
     }
   };
-  useEffect10(() => {
+  useEffect11(() => {
     let resizeObserver;
     let mutationObserver;
     if (showModal && buttonRef.current) {
@@ -31021,8 +31167,8 @@ var ListboxTextInput = ({
 import React8, {
   useContext as useContext11,
   useMemo as useMemo9,
-  useRef as useRef7,
-  useState as useState12
+  useRef as useRef8,
+  useState as useState13
 } from "react";
 import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 function QuillSelectComponentWithCombo({
@@ -31036,9 +31182,9 @@ function QuillSelectComponentWithCombo({
   disabled
 }) {
   const [theme] = useContext11(ThemeContext);
-  const [showModal, setShowModal] = useState12(false);
-  const modalRef = useRef7(null);
-  const buttonRef = useRef7(null);
+  const [showModal, setShowModal] = useState13(false);
+  const modalRef = useRef8(null);
+  const buttonRef = useRef8(null);
   const [searchQuery, setSearchQuery] = React8.useState("");
   const filteredItems = React8.useMemo(() => {
     if (searchQuery === "") {
@@ -31826,7 +31972,7 @@ var MetricDisplay = ({
 };
 
 // src/components/Dashboard/DataLoader.tsx
-import { useContext as useContext13, useEffect as useEffect11, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
+import { useContext as useContext13, useEffect as useEffect12, useMemo as useMemo11, useRef as useRef9, useState as useState14 } from "react";
 init_paginationProcessing();
 init_tableProcessing();
 import equal2 from "fast-deep-equal";
@@ -31945,10 +32091,10 @@ function DataLoader({
     ) : Object.values(reportFilters[item.id] ?? {}).map((f) => f.filter);
   }, [dashboardFilters, reportFilters, dashboardName, item.id]);
   const [schemaData] = useContext13(SchemaDataContext);
-  const [loading, setLoading] = useState13(true);
-  const [error, setError] = useState13(void 0);
-  const [previousPage, setPreviousPage] = useState13(0);
-  const [additionalProcessing, setAdditionalProcessing] = useState13(defaultAdditionalProcessing);
+  const [loading, setLoading] = useState14(true);
+  const [error, setError] = useState14(void 0);
+  const [previousPage, setPreviousPage] = useState14(0);
+  const [additionalProcessing, setAdditionalProcessing] = useState14(defaultAdditionalProcessing);
   const chartReport = useMemo11(() => {
     const report = (dashboardName ? dashboard : reports)[item.id];
     if (report) {
@@ -31965,17 +32111,17 @@ function DataLoader({
     reportFilters,
     dashboardFilters
   ]);
-  const previousFilters = useRef8(filters);
-  const previousUserFilters = useRef8(userFilters);
-  const previousTenants = useRef8(tenants);
-  const previousCustomFields = useRef8(schemaData.customFields);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState13(false);
-  const rowsRequestId = useRef8(0);
-  const rowsAbortController = useRef8(null);
-  const rowCountRequestId = useRef8(0);
-  const rowCountAbortController = useRef8(null);
-  const updateTableRowsRequestId = useRef8(0);
-  const updateTableRowsAbortController = useRef8(null);
+  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 fetchRowCount = async (processing) => {
     if (!client || !filters) {
       if (!rowCountAbortController.current) return;
@@ -32242,7 +32388,7 @@ function DataLoader({
       }
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (schemaData.isSchemaLoading || filterValuesEquivalent(
       previousFilters.current ?? contextFilters,
       filters
@@ -32272,7 +32418,7 @@ function DataLoader({
     schemaData.customFields,
     schemaData.isSchemaLoading
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     const tempReport = (dashboardName ? dashboard : reports)[item.id];
     if (tempReport?.triggerReload) {
       fetchReportHelper(additionalProcessing);
@@ -32315,17 +32461,17 @@ var ChartDataLoader = ({
       (f) => f.filter
     ) : Object.values(reportFilters[item.id] ?? {}).map((f) => f.filter);
   }, [dashboardFilters, reportFilters, dashboardName, item.id]);
-  const [loading, setLoading] = useState13(true);
-  const [error, setError] = useState13(void 0);
+  const [loading, setLoading] = useState14(true);
+  const [error, setError] = useState14(void 0);
   const [client] = useContext13(ClientContext);
   const [schemaData] = useContext13(SchemaDataContext);
-  const previousFilters = useRef8(filters);
-  const previousUserFilters = useRef8(userFilters);
-  const previousDateBucket = useRef8(dateBucket);
-  const previousTenants = useRef8(tenants);
-  const previousCustomFields = useRef8(schemaData.customFields);
-  const fetchReportAbortController = useRef8(null);
-  const rowsRequestId = useRef8(0);
+  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 chartReport = useMemo11(() => {
     const report = dashboardName ? dashboard[item.id] : reports[item.id];
     if (!report) {
@@ -32438,7 +32584,7 @@ var ChartDataLoader = ({
       }
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (!filters) {
       return;
     }
@@ -32473,7 +32619,7 @@ var ChartDataLoader = ({
     schemaData.customFields,
     schemaData.isSchemaLoading
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     const tempReport = (dashboardName ? dashboard : reports)[item.id];
     if (tempReport && tempReport.triggerReload) {
       fetchReportHelper();
@@ -32555,7 +32701,7 @@ import {
   Geography,
   useMapContext
 } from "react-simple-maps";
-import { useEffect as useEffect12, useMemo as useMemo12, useRef as useRef9, useState as useState14 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo12, useRef as useRef10, useState as useState15 } from "react";
 init_valueFormatter();
 import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var statesUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
@@ -32882,18 +33028,18 @@ function USMap({
   className,
   containerStyle
 }) {
-  const containerRef = useRef9(null);
-  const [hoveredState, setHoveredState] = useState14(
+  const containerRef = useRef10(null);
+  const [hoveredState, setHoveredState] = useState15(
     void 0
   );
-  const [hoveredCoords, setHoveredCoords] = useState14(void 0);
+  const [hoveredCoords, setHoveredCoords] = useState15(void 0);
   const mappedData = data.reduce((acc, curr) => {
     acc[curr[xAxisField]?.toString()] = curr;
     return acc;
   }, {});
   const measureField = yAxisFields[0]?.field ?? xAxisField;
-  const [scaleLog, setScaleLog] = useState14(null);
-  useEffect12(() => {
+  const [scaleLog, setScaleLog] = useState15(null);
+  useEffect13(() => {
     import("d3-scale").then((scale) => {
       setScaleLog(() => scale.scaleLog);
     });
@@ -33073,18 +33219,18 @@ function WorldMap({
   className,
   containerStyle
 }) {
-  const containerRef = useRef9(null);
-  const [hoveredCountry, setHoveredCountry] = useState14(
+  const containerRef = useRef10(null);
+  const [hoveredCountry, setHoveredCountry] = useState15(
     void 0
   );
-  const [hoveredCoords, setHoveredCoords] = useState14(void 0);
+  const [hoveredCoords, setHoveredCoords] = useState15(void 0);
   const mappedData = data.reduce((acc, curr) => {
     acc[curr[xAxisField]?.toString()] = curr;
     return acc;
   }, {});
   const measureField = yAxisFields[0]?.field ?? xAxisField;
-  const [scaleLog, setScaleLog] = useState14(null);
-  useEffect12(() => {
+  const [scaleLog, setScaleLog] = useState15(null);
+  useEffect13(() => {
     import("d3-scale").then((scale) => {
       setScaleLog(() => scale.scaleLog);
     });
@@ -33266,8 +33412,8 @@ function MapLayout({
   regionNames
 }) {
   const { projection } = useMapContext();
-  const [geoCentroid, setGeoCentroid] = useState14(null);
-  useEffect12(() => {
+  const [geoCentroid, setGeoCentroid] = useState15(null);
+  useEffect13(() => {
     import("d3-geo").then((geo) => {
       setGeoCentroid(() => geo.geoCentroid);
     });
@@ -33319,7 +33465,7 @@ function MapLayout({
 }
 
 // src/components/Chart/GaugeChart.tsx
-import { useEffect as useEffect13, useRef as useRef10, useState as useState15 } from "react";
+import { useEffect as useEffect14, useRef as useRef11, useState as useState16 } from "react";
 
 // ../../node_modules/d3-transition/src/selection/index.js
 import { selection as selection3 } from "d3-selection";
@@ -34593,20 +34739,20 @@ function D3Gauge({
   colors,
   isAnimationActive
 }) {
-  const containerRef = useRef10(null);
-  const svgRef = useRef10(null);
-  const gaugeGroupRef = useRef10(null);
-  const needleRef = useRef10(null);
-  const needleOutlineRef = useRef10(null);
-  const textRef = useRef10(null);
-  const previousPercentageRef = useRef10(0);
-  const firstMountRef = useRef10(true);
+  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 startAngle = -(3 * Math.PI) / 4;
   const totalAngle = 3 * Math.PI / 2;
-  const [arc, setArc] = useState15(null);
-  const [interpolate, setInterpolate] = useState15(null);
-  const [select, setSelect] = useState15(null);
-  useEffect13(() => {
+  const [arc, setArc] = useState16(null);
+  const [interpolate, setInterpolate] = useState16(null);
+  const [select, setSelect] = useState16(null);
+  useEffect14(() => {
     import("d3-shape").then(({ arc: arc2 }) => {
       setArc(() => arc2);
     });
@@ -34617,7 +34763,7 @@ function D3Gauge({
       setSelect(() => select2);
     });
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!containerRef.current || !select) return;
     const container = containerRef.current;
     select(container).select("svg").remove();
@@ -34634,7 +34780,7 @@ function D3Gauge({
       svgRef.current = null;
     };
   }, [colors, select]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!containerRef.current || !svgRef.current || !gaugeGroupRef.current || !needleRef.current || !needleOutlineRef.current || !textRef.current || !arc || !interpolate || !select)
       return;
     const rect = containerRef.current.getBoundingClientRect();
@@ -34734,7 +34880,7 @@ function D3Gauge({
     arc,
     interpolate
   ]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!containerRef.current) return;
     const observer = new ResizeObserver(() => {
       previousPercentageRef.current = percentage;
@@ -34753,7 +34899,7 @@ function D3Gauge({
 
 // src/components/QuillComponentTables.tsx
 init_paginationProcessing();
-import { useState as useState16, useEffect as useEffect14, useContext as useContext15 } from "react";
+import { useState as useState17, useEffect as useEffect15, useContext as useContext15 } from "react";
 import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var QuillTableSQLEditorComponent = ({
   rows,
@@ -34769,8 +34915,8 @@ var QuillTableSQLEditorComponent = ({
   setCurrentPage,
   hideLabels
 }) => {
-  const [sort, setSort] = useState16({ field: "", direction: "" });
-  const [page, setPage] = useState16(0);
+  const [sort, setSort] = useState17({ field: "", direction: "" });
+  const [page, setPage] = useState17(0);
   return /* @__PURE__ */ jsx47(
     QuillTable,
     {
@@ -34812,9 +34958,9 @@ var QuillTableReportBuilderComponent = ({
   setCurrentPage,
   disableSort
 }) => {
-  const [sort, setSort] = useState16({ field: "", direction: "" });
-  const [page, setPage] = useState16(0);
-  useEffect14(() => {
+  const [sort, setSort] = useState17({ field: "", direction: "" });
+  const [page, setPage] = useState17(0);
+  useEffect15(() => {
     if (disableSort) {
       setSort({ field: "", direction: "" });
     }
@@ -34858,15 +35004,15 @@ var QuillTableComponent = ({
   currentPage,
   hideLabels
 }) => {
-  const [sort, setSort] = useState16({ field: "", direction: "" });
-  const [page, setPage] = useState16(0);
-  const [initialLoad, setInitialLoad] = useState16(true);
-  useEffect14(() => {
+  const [sort, setSort] = useState17({ field: "", direction: "" });
+  const [page, setPage] = useState17(0);
+  const [initialLoad, setInitialLoad] = useState17(true);
+  useEffect15(() => {
     if (initialLoad && !isLoading) {
       setInitialLoad(false);
     }
   }, [isLoading]);
-  useEffect14(() => {
+  useEffect15(() => {
     setPage(currentPage || 0);
   }, [currentPage]);
   if (initialLoad) {
@@ -34920,15 +35066,15 @@ function QuillTableDashboardComponent({
   hideName
 }) {
   const [theme] = useContext15(ThemeContext);
-  const [initialLoad, setInitialLoad] = useState16(true);
+  const [initialLoad, setInitialLoad] = useState17(true);
   const { downloadCSV: downloadCSV2 } = useExport(report?.id);
-  const [page, setPage] = useState16(0);
-  useEffect14(() => {
+  const [page, setPage] = useState17(0);
+  useEffect15(() => {
     if (!isLoading) {
       setInitialLoad(false);
     }
   }, [isLoading]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (rowCountIsLoading) {
       setPage(0);
     }
@@ -35102,12 +35248,12 @@ function Chart({
     filters,
     dashboardCustomFilters[allReportsById[reportId]?.dashboardName ?? ""]
   ]);
-  const previousFilters = useRef11(void 0);
+  const previousFilters = useRef12(void 0);
   if (!equal3(previousFilters.current, filters)) {
     previousFilters.current = filters;
   }
-  const [filterValues, setFilterValues] = useState17({});
-  useEffect15(() => {
+  const [filterValues, setFilterValues] = useState18({});
+  useEffect16(() => {
     setFilterValues(
       Object.values(reportFilters[reportId] ?? {}).reduce((acc, f) => {
         acc[f.filter.label] = f.filter.filterType === "string" ? f.filter.stringFilterType === "multiselect" ? { values: f.filter.values, operator: "IN" } : { selectedValue: f.filter.selectedValue } : f.filter.filterType === "date_range" ? {
@@ -35122,7 +35268,7 @@ function Chart({
       }, {})
     );
   }, [reportFilters[reportId]]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (equal3(customReportFilters[reportId] ?? [], filters ?? [])) {
       return;
     }
@@ -35138,7 +35284,7 @@ function Chart({
       });
     };
   }, [filters]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (reportDateFilter) {
       const customDateFilter = previousFilters.current?.find(
         (f) => f.filterType === "date" /* Date */
@@ -35176,7 +35322,7 @@ function Chart({
     [reportId, allReportsById]
   );
   const report = useMemo13(() => reports[reportId], [reports, reportId]);
-  const [loading, setLoading] = useState17(true);
+  const [loading, setLoading] = useState18(true);
   const [theme] = useContext16(ThemeContext);
   const colorMap = useMemo13(() => {
     if (mapColorsToFields && report && theme) {
@@ -35184,7 +35330,7 @@ function Chart({
     }
   }, [report, theme]);
   const [client, clientLoading] = useContext16(ClientContext);
-  const [error, setError] = useState17(void 0);
+  const [error, setError] = useState18(void 0);
   const updateFilter = (filter, value, comparison) => {
     let filterValue = {};
     if (filter.filterType === "string" /* String */) {
@@ -35294,7 +35440,7 @@ function Chart({
       setLoading(false);
     }
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (reportId === void 0 || reportId === "" || clientLoading || isDashboardsLoading) {
       return;
     }
@@ -35511,7 +35657,7 @@ var ChartDisplay = ({
     }
     return void 0;
   }, [config, specificReportFilters, specificDashboardFilters]);
-  const [page, setPage] = useState17(0);
+  const [page, setPage] = useState18(0);
   if (loading) {
     return /* @__PURE__ */ jsx48("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx48(LoadingComponent, {}) });
   } else if (config && !["metric", "table", "gauge", "US map", "World map"].includes(
@@ -35955,7 +36101,7 @@ function QuillChartComponent({
 }
 
 // src/components/Dashboard/TemplateChartComponent.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 function QuillTemplateChartComponent({
   report,
@@ -35963,7 +36109,7 @@ function QuillTemplateChartComponent({
   children,
   isLoading
 }) {
-  const [isSelected, setIsSelected] = useState18(false);
+  const [isSelected, setIsSelected] = useState19(false);
   return /* @__PURE__ */ jsx51(
     "div",
     {
@@ -36050,10 +36196,10 @@ init_filterProcessing();
 import {
   forwardRef as forwardRef2,
   useContext as useContext19,
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useMemo as useMemo14,
-  useRef as useRef12,
-  useState as useState19
+  useRef as useRef13,
+  useState as useState20
 } from "react";
 init_util();
 init_tableProcessing();
@@ -36548,10 +36694,10 @@ var FilterPopoverWrapper = ({
 }) => {
   const { tenants } = useContext19(TenantContext);
   const { eventTracking } = useContext19(EventTrackingContext);
-  const [isOpen, setIsOpen] = useState19(false);
-  const [uniqueValues, setUniqueValues] = useState19(void 0);
-  const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState19(false);
-  const prevFiltersRef = useRef12("");
+  const [isOpen, setIsOpen] = useState20(false);
+  const [uniqueValues, setUniqueValues] = useState20(void 0);
+  const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState20(false);
+  const prevFiltersRef = useRef13("");
   const columnInternals = useMemo14(() => {
     if (!tables) {
       return null;
@@ -36566,7 +36712,7 @@ var FilterPopoverWrapper = ({
     });
     return relevantColumns;
   }, [schema, tables]);
-  useEffect16(() => {
+  useEffect17(() => {
     const currentFiltersString = JSON.stringify(priorFilters);
     if (currentFiltersString !== prevFiltersRef.current) {
       prevFiltersRef.current = currentFiltersString;
@@ -36636,7 +36782,7 @@ var FilterPopoverWrapper = ({
 
 // src/components/ReportBuilder/FilterModal.tsx
 init_Filter();
-import { useState as useState20, useEffect as useEffect17, useMemo as useMemo15 } from "react";
+import { useState as useState21, 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";
@@ -36658,32 +36804,32 @@ function FilterModal({
   MultiSelectComponent,
   reportBuilderColumns
 }) {
-  const [field, setField] = useState20("");
-  const [fieldOptions, setFieldOptions] = useState20([]);
-  const [fieldValues, setFieldValues] = useState20([]);
-  const [type, setType] = useState20(null);
-  const [value, setValue] = useState20(void 0);
-  const [selectedOptions, setSelectedOptions] = useState20([]);
-  const [operator, setOperator] = useState20(
+  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(
     void 0
   );
-  const [operatorOptions, setOperatorOptions] = useState20([]);
-  const [unit, setUnit] = useState20("");
-  const [unitOptions, setUnitOptions] = useState20([]);
-  const [startDate, setStartDate] = useState20(
+  const [operatorOptions, setOperatorOptions] = useState21([]);
+  const [unit, setUnit] = useState21("");
+  const [unitOptions, setUnitOptions] = useState21([]);
+  const [startDate, setStartDate] = useState21(
     startOfToday2().toISOString().substring(0, 10)
   );
-  const [endDate, setEndDate] = useState20(
+  const [endDate, setEndDate] = useState21(
     startOfToday2().toISOString().substring(0, 10)
   );
-  const [filterInitialized, setFilterInitialized] = useState20(false);
-  const [table, setTable] = useState20(void 0);
+  const [filterInitialized, setFilterInitialized] = useState21(false);
+  const [table, setTable] = useState21(void 0);
   const memoizedFieldValuesMap = useMemo15(
     () => fieldValuesMap,
     [JSON.stringify(fieldValuesMap)]
   );
   const memoizedFilter = useMemo15(() => filter, [JSON.stringify(filter)]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!filter) {
       onFieldChange(field, fieldOptions, table);
     }
@@ -36728,7 +36874,7 @@ function FilterModal({
     ],
     [FieldType.Null]: [NullOperator.IsNotNull, NullOperator.IsNull]
   };
-  useEffect17(() => {
+  useEffect18(() => {
     if (filter) {
       setField(filter.field);
       setTable(filter.table);
@@ -36756,7 +36902,7 @@ function FilterModal({
       }
     }
   }, [memoizedFilter]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (schema) {
       const fo = schema.flatMap((table2) => {
         if (tables && !tables.includes(table2.name)) {
@@ -37438,7 +37584,7 @@ function FilterModal({
 }
 
 // src/components/Dashboard/TemplateMetricComponent.tsx
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 import { jsx as jsx55 } from "react/jsx-runtime";
 function QuillTemplateMetricComponent({
   report,
@@ -37446,7 +37592,7 @@ function QuillTemplateMetricComponent({
   children,
   isLoading
 }) {
-  const [isSelected, setIsSelected] = useState21(false);
+  const [isSelected, setIsSelected] = useState22(false);
   return /* @__PURE__ */ jsx55(
     "div",
     {
@@ -37475,7 +37621,7 @@ function QuillTemplateMetricComponent({
 }
 
 // src/components/Dashboard/TemplateTableComponent.tsx
-import { useState as useState22 } from "react";
+import { useState as useState23 } from "react";
 import { jsx as jsx56 } from "react/jsx-runtime";
 function QuillTemplateTableComponent({
   report,
@@ -37486,7 +37632,7 @@ function QuillTemplateTableComponent({
   onPageChange,
   onSortChange
 }) {
-  const [isSelected, setIsSelected] = useState22(false);
+  const [isSelected, setIsSelected] = useState23(false);
   return /* @__PURE__ */ jsx56(
     "div",
     {
@@ -37701,14 +37847,14 @@ function Dashboard({
   templateDashboardName,
   pagination = { rowsPerPage: 10, rowsPerRequest: 50 }
 }) {
-  const [userFilters, setUserFilters] = useState23({});
-  const [selectedSection, setSelectedSection] = useState23("");
+  const [userFilters, setUserFilters] = useState24({});
+  const [selectedSection, setSelectedSection] = useState24("");
   const dataLoaderUserFilters = useMemo16(() => {
     return (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(
       Object.values(userFilters)
     );
   }, [filters, userFilters]);
-  useEffect18(() => {
+  useEffect19(() => {
     onUserFiltersUpdated?.(Object.values(userFilters));
   }, [userFilters]);
   const {
@@ -37806,8 +37952,8 @@ function Dashboard({
     });
     return map;
   }, [data?.sections, data?.sectionOrder]);
-  const mounted = useRef13(false);
-  useEffect18(() => {
+  const mounted = useRef14(false);
+  useEffect19(() => {
     if (!mounted.current) {
       mounted.current = true;
       return;
@@ -37819,7 +37965,7 @@ function Dashboard({
       filters: populatedDashboardFilters ?? []
     });
   }, [filters, userFilters]);
-  useEffect18(() => {
+  useEffect19(() => {
     customFilterDispatch({
       type: "ADD_CUSTOM_DASHBOARD_FILTERS",
       dashboardName: name2,
@@ -37833,31 +37979,31 @@ function Dashboard({
   const { dispatch: dashboardFiltersDispatch } = useContext20(
     DashboardFiltersContext
   );
-  const [fieldValuesMap, setFieldValuesMap] = useState23({});
-  const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState23(false);
-  const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState23(false);
-  const [filterListIsOpen, setFilterListIsOpen] = useState23(false);
+  const [fieldValuesMap, setFieldValuesMap] = useState24({});
+  const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState24(false);
+  const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState24(false);
+  const [filterListIsOpen, setFilterListIsOpen] = useState24(false);
   const [
     filterListAddFilterPopoverIsOpen,
     setFilterListAddFilterPopoverIsOpen
-  ] = useState23(false);
+  ] = useState24(false);
   const presetOptions = useMemo16(() => {
     return populatedDashboardFilters?.[0]?.filterType === "date_range" ? convertPresetOptionsToSelectableList(
       populatedDashboardFilters[0].presetOptions ?? [],
       populatedDashboardFilters[0].defaultPresetRanges ?? []
     ) : defaultOptionsV2;
   }, [populatedDashboardFilters]);
-  const [filterValues, setFilterValues] = useState23({});
-  const prevNameRef = useRef13(name2);
-  const prevFlagsRef = useRef13(flags);
-  const prevClientRef = useRef13(client?.publicKey ?? "");
-  const addFilterPopoverButtonRef = useRef13(null);
-  const viewFiltersPopoverButtonRef = useRef13(null);
-  const previousFilters = useRef13(filters);
+  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);
   if (!equal4(previousFilters.current, filters)) {
     previousFilters.current = filters;
   }
-  const isInitialLoadOfDashboardRef = useRef13(false);
+  const isInitialLoadOfDashboardRef = useRef14(false);
   const referencedTables = useMemo16(() => {
     const sections = data?.sections || {};
     const tables2 = Object.values(sections).flatMap(
@@ -37865,7 +38011,7 @@ function Dashboard({
     ).flat();
     return Array.from(new Set(tables2));
   }, [data?.sections]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (prevNameRef.current === name2 && Object.values(data?.sections ?? {}).flat().length) {
       return;
     }
@@ -37885,8 +38031,8 @@ function Dashboard({
       prevFlagsRef.current = flags;
     });
   }, [name2, isClientLoading]);
-  const tenantMounted = useRef13(false);
-  useEffect18(() => {
+  const tenantMounted = useRef14(false);
+  useEffect19(() => {
     if (!tenantMounted.current) {
       tenantMounted.current = true;
       return;
@@ -37905,7 +38051,7 @@ function Dashboard({
       isInitialLoadOfDashboardRef.current = false;
     });
   }, [flags]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (prevClientRef.current === client?.publicKey) {
       return;
     }
@@ -37920,7 +38066,7 @@ function Dashboard({
       isInitialLoadOfDashboardRef.current = false;
     });
   }, [client?.publicKey]);
-  useEffect18(() => {
+  useEffect19(() => {
     setFilterValues(
       Object.values(populatedDashboardFilters ?? {}).reduce((acc, f) => {
         acc[f.label] = f.filterType === "string" ? f.stringFilterType === "multiselect" ? { values: f.values, operator: "IN" } : { selectedValue: f.selectedValue } : f.filterType === "date_range" ? {
@@ -37935,7 +38081,7 @@ function Dashboard({
       }, {})
     );
   }, [populatedDashboardFilters]);
-  useEffect18(() => {
+  useEffect19(() => {
     const dashboardDateFilter = populatedDashboardFilters?.find(
       (f) => f.filterType === "date_range"
     );
@@ -37972,7 +38118,7 @@ function Dashboard({
       });
     }
   }, [previousFilters.current]);
-  useEffect18(() => {
+  useEffect19(() => {
     const fetchData = async () => {
       setFieldValuesIsLoaded(false);
       const newFieldValues = {};
@@ -38133,7 +38279,7 @@ function Dashboard({
       [filter.field]: filter
     }));
   };
-  useEffect18(() => {
+  useEffect19(() => {
     if (onChangeLoading && isLoading) {
       onChangeLoading(isLoading);
     }
@@ -38778,10 +38924,10 @@ function QuillDashboardTemplate({
   const { dashboardConfig, dashboardConfigDispatch } = useContext20(
     DashboardConfigContext
   );
-  const [addItemModalIsOpen, setAddItemModalIsOpen] = useState23(false);
-  const [selectedTemplates, setSelectedTemplates] = useState23([]);
-  const [selectingTemplate, setSelectingTemplate] = useState23(false);
-  const [submittingTemplate, setSubmittingTemplate] = useState23(false);
+  const [addItemModalIsOpen, setAddItemModalIsOpen] = useState24(false);
+  const [selectedTemplates, setSelectedTemplates] = useState24([]);
+  const [selectingTemplate, setSelectingTemplate] = useState24(false);
+  const [submittingTemplate, setSubmittingTemplate] = useState24(false);
   const templateSections = data?.sections;
   const onSubmitTemplates = async () => {
     setSubmittingTemplate(true);
@@ -38926,9 +39072,9 @@ var QuillProvider_default = QuillProvider;
 // src/Table.tsx
 import {
   useContext as useContext21,
-  useEffect as useEffect19,
+  useEffect as useEffect20,
   useMemo as useMemo17,
-  useState as useState24
+  useState as useState25
 } from "react";
 init_Filter();
 init_paginationProcessing();
@@ -38946,7 +39092,7 @@ var Table = ({
   const [schemaData] = useContext21(SchemaDataContext);
   const { eventTracking } = useContext21(EventTrackingContext);
   const { allReportsById } = useAllReports();
-  const [loading, setLoading] = useState24(false);
+  const [loading, setLoading] = useState25(false);
   const report = useMemo17(() => {
     return props.reportId ? allReportsById[props.reportId] : null;
   }, [allReportsById[props.reportId ?? ""]]);
@@ -38999,7 +39145,7 @@ var Table = ({
       setLoading(false);
     }
   };
-  useEffect19(() => {
+  useEffect20(() => {
     if (props.reportId === void 0 || props.reportId === "" || clientLoading) {
       return;
     }
@@ -39033,7 +39179,7 @@ var Table = ({
     clientLoading,
     !reports[props.reportId ?? ""]
   ]);
-  const [page, setPage] = useState24(0);
+  const [page, setPage] = useState25(0);
   if ("rows" in data && "columns" in data) {
     return /* @__PURE__ */ jsx59(
       QuillTable,
@@ -39094,10 +39240,10 @@ var Table_default = Table;
 
 // src/SQLEditor.tsx
 import {
-  useState as useState30,
+  useState as useState31,
   useContext as useContext28,
-  useEffect as useEffect24,
-  useRef as useRef18,
+  useEffect as useEffect25,
+  useRef as useRef19,
   useMemo as useMemo22,
   useCallback as useCallback3
 } from "react";
@@ -39105,9 +39251,9 @@ import MonacoEditor from "@monaco-editor/react";
 
 // src/ChartBuilder.tsx
 import {
-  useEffect as useEffect22,
-  useRef as useRef17,
-  useState as useState28,
+  useEffect as useEffect23,
+  useRef as useRef18,
+  useState as useState29,
   useContext as useContext26,
   useMemo as useMemo21
 } from "react";
@@ -39133,9 +39279,9 @@ import {
   useCallback as useCallback2,
   useContext as useContext23,
   useMemo as useMemo18,
-  useState as useState25,
-  useEffect as useEffect20,
-  useRef as useRef14
+  useState as useState26,
+  useEffect as useEffect21,
+  useRef as useRef15
 } from "react";
 
 // src/internals/ReportBuilder/PivotList.tsx
@@ -39599,44 +39745,44 @@ var PivotModal = ({
   reportBuilderState
 }) => {
   const { getToken, quillFetchWithToken } = useContext23(FetchContext);
-  const [isLoading, setIsLoading] = useState25(false);
-  const [previewLoading, setPreviewLoading] = useState25(false);
-  const [selectedPivotType, setSelectedPivotType] = useState25("recommended");
-  const [errors, setErrors] = useState25([]);
+  const [isLoading, setIsLoading] = useState26(false);
+  const [previewLoading, setPreviewLoading] = useState26(false);
+  const [selectedPivotType, setSelectedPivotType] = useState26("recommended");
+  const [errors, setErrors] = useState26([]);
   const [client] = useContext23(ClientContext);
   const [schemaData] = useContext23(SchemaDataContext);
   const { tenants } = useContext23(TenantContext);
   const { eventTracking } = useContext23(EventTrackingContext);
-  const rowFieldRef = useRef14(null);
-  const colFieldRef = useRef14(null);
-  const [pivotCardWidth, setPivotCardWidth] = useState25(420);
-  const [samplePivotTable, setSamplePivotTable] = useState25(null);
-  const [hasNoRecommendedPivots, sethasNoRecommendedPivots] = useState25(false);
-  const [isFetchingPivots, setIsFetchingPivots] = useState25(false);
-  const [allowedColumnFields, setAllowedColumnFields] = useState25([]);
-  const [allowedRowFields, setAllowedRowFields] = useState25([]);
-  const [allowedValueFields, setAllowedValueFields] = useState25([]);
-  const [uniqueValues, setUniqueValues] = useState25(initialUniqueValues);
-  const buttonRef = useRef14(null);
-  const [dateRanges, setDateRanges] = useState25({});
-  const [pivotError, setPivotError] = useState25("");
-  const [limitInput, setLimitInput] = useState25(
+  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(
     pivotLimit?.toString() ?? "100"
   );
-  const [sortFieldInput, setSortFieldInput] = useState25(
+  const [sortFieldInput, setSortFieldInput] = useState26(
     pivotSort?.sortField ?? ""
   );
-  const [sortDirectionInput, setSortDirectionInput] = useState25(
+  const [sortDirectionInput, setSortDirectionInput] = useState26(
     pivotSort?.sortDirection ?? "ASC"
   );
-  const [showLimitInput, setShowLimitInput] = useState25(!!pivotLimit);
-  const [showSortInput, setShowSortInput] = useState25(!!pivotSort);
-  const [availableHeight, setAvailableHeight] = useState25(0);
-  const [pivotModalTopHeight, setPivotModalTopHeight] = useState25(450);
-  const [popoverPosition, setPopoverPosition] = useState25(
+  const [showLimitInput, setShowLimitInput] = useState26(!!pivotLimit);
+  const [showSortInput, setShowSortInput] = useState26(!!pivotSort);
+  const [availableHeight, setAvailableHeight] = useState26(0);
+  const [pivotModalTopHeight, setPivotModalTopHeight] = useState26(450);
+  const [popoverPosition, setPopoverPosition] = useState26(
     "bottom"
   );
-  const popoverRef = useRef14(null);
+  const popoverRef = useRef15(null);
   const getDistinctValues = async (fetchDistinct) => {
     if (!client) {
       return {
@@ -39723,7 +39869,7 @@ var PivotModal = ({
       setDateRanges(dateRangeByColumn || {});
     }
   };
-  useEffect20(() => {
+  useEffect21(() => {
     const calculatePivotCardSize = () => {
       if (rowFieldRef.current && colFieldRef.current) {
         const rowFieldSize = rowFieldRef.current?.getBoundingClientRect();
@@ -39744,7 +39890,7 @@ var PivotModal = ({
       }, 500);
     }
   }, [showUpdatePivot, isOpen]);
-  useEffect20(() => {
+  useEffect21(() => {
     const fetchPivotData = async () => {
       if (pivotRowField && data && columns && pivotAggregations?.every((p) => p?.valueField && p?.aggregationType)) {
         const pivot = {
@@ -39890,7 +40036,7 @@ var PivotModal = ({
     };
     fetchPivotData();
   }, [initialSelectedPivotTable]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (pivotRowField && data && columns) {
       getDistinctValues();
       getAllDateRangesByColumn();
@@ -39898,7 +40044,7 @@ var PivotModal = ({
       getDistinctValues();
     }
   }, [initialSelectedPivotTable, columns, data, pivotRowField]);
-  useEffect20(() => {
+  useEffect21(() => {
     setAllowedFields(initialUniqueValues || {});
     setUniqueValues(initialUniqueValues);
   }, [initialUniqueValues, columns]);
@@ -39921,8 +40067,8 @@ var PivotModal = ({
       return map;
     }, {});
   }, [columns]);
-  const [selectedPivotTable, setSelectedPivotTable] = useState25(null);
-  useEffect20(() => {
+  const [selectedPivotTable, setSelectedPivotTable] = useState26(null);
+  useEffect21(() => {
     const fetchPivotTables = async () => {
       if (selectedPivotIndex === -1) {
         return null;
@@ -39974,8 +40120,8 @@ var PivotModal = ({
     };
     fetchPivotTables();
   }, [selectedPivotIndex, data, dateRange, createdPivots]);
-  const previousUniqueValuesRef = useRef14();
-  useEffect20(() => {
+  const previousUniqueValuesRef = useRef15();
+  useEffect21(() => {
     if (!uniqueValuesIsLoading && !equal5(uniqueValues, previousUniqueValuesRef.current)) {
       previousUniqueValuesRef.current = uniqueValues;
       setRecommendedPivotTables([]);
@@ -40450,11 +40596,11 @@ var PivotModal = ({
       }
     }, 500);
   };
-  const [recommendedPivotTables, setRecommendedPivotTables] = useState25(
+  const [recommendedPivotTables, setRecommendedPivotTables] = useState26(
     []
   );
-  const [createdPivotTables, setCreatedPivotTables] = useState25([]);
-  useEffect20(() => {
+  const [createdPivotTables, setCreatedPivotTables] = useState26([]);
+  useEffect21(() => {
     const fetchPivotTables = async () => {
       const pts = await Promise.all(
         createdPivots.map(async (p) => {
@@ -40527,7 +40673,7 @@ var PivotModal = ({
       setPopoverPosition("bottom");
     }
   };
-  useEffect20(() => {
+  useEffect21(() => {
     handleResize();
     window.addEventListener("resize", handleResize);
     const parentElement = parentRef?.current;
@@ -41353,12 +41499,12 @@ var validateReport = (formData, dashboardData, defaultDateFilter, allTables) =>
 
 // src/components/Chart/InternalChart.tsx
 import {
-  useState as useState26,
-  useEffect as useEffect21,
+  useState as useState27,
+  useEffect as useEffect22,
   useContext as useContext24,
   useMemo as useMemo19,
-  useRef as useRef15,
-  useLayoutEffect
+  useRef as useRef16,
+  useLayoutEffect as useLayoutEffect2
 } from "react";
 import { differenceInHours as differenceInHours2 } from "date-fns";
 init_Filter();
@@ -41503,8 +41649,8 @@ function InternalChart({
       reportDateFilter.defaultPresetRanges ?? []
     ) : defaultOptionsV2;
   }, [reportDateFilter]);
-  const [filterValues, setFilterValues] = useState26({});
-  useEffect21(() => {
+  const [filterValues, setFilterValues] = useState27({});
+  useEffect22(() => {
     if (reportDateFilter) {
       const customDateFilter = filters?.find(
         (f) => f.filterType === "date" /* Date */
@@ -41612,9 +41758,9 @@ function InternalChart({
     }));
     onDashboardFilterChange(filter.label, filterValue);
   };
-  const [filtersExpanded, setFiltersExpanded] = useState26(false);
-  const filtersContainerRef = useRef15(null);
-  const [visibleFilters, setVisibleFilters] = useState26([]);
+  const [filtersExpanded, setFiltersExpanded] = useState27(false);
+  const filtersContainerRef = useRef16(null);
+  const [visibleFilters, setVisibleFilters] = useState27([]);
   const filtersOverflowing = useMemo19(() => {
     return visibleFilters.some((visible) => visible);
   }, [visibleFilters]);
@@ -41630,7 +41776,7 @@ function InternalChart({
     });
     setVisibleFilters(newVisibleItems);
   };
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     requestAnimationFrame(() => measureItems());
     const handleResize = () => {
       measureItems();
@@ -41912,8 +42058,8 @@ init_dates();
 import React13, {
   useContext as useContext25,
   useMemo as useMemo20,
-  useRef as useRef16,
-  useState as useState27
+  useRef as useRef17,
+  useState as useState28
 } from "react";
 import { Fragment as Fragment12, jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
 function QuillMultiSelectSectionList({
@@ -41931,10 +42077,10 @@ function QuillMultiSelectSectionList({
   owner
 }) {
   const [theme] = useContext25(ThemeContext);
-  const [showModal, setShowModal] = useState27(false);
-  const modalRef = useRef16(null);
-  const buttonRef = useRef16(null);
-  const debounceTimeoutId = useRef16(null);
+  const [showModal, setShowModal] = useState28(false);
+  const modalRef = useRef17(null);
+  const buttonRef = useRef17(null);
+  const debounceTimeoutId = useRef17(null);
   const [searchQuery, setSearchQuery] = React13.useState("");
   useOnClickOutside_default(
     modalRef,
@@ -42716,18 +42862,18 @@ function createReportFromForm(formData, report, eventTracking, selectedPivotTabl
   return newReport;
 }
 function ChartBuilderWithModal(props) {
-  const parentRef = useRef17(null);
-  const [modalWidth, setModalWidth] = useState28(200);
-  const [modalHeight, setModalHeight] = useState28(200);
+  const parentRef = useRef18(null);
+  const [modalWidth, setModalWidth] = useState29(200);
+  const [modalHeight, setModalHeight] = useState29(200);
   const { isOpen, setIsOpen, title, isHorizontalView } = props;
   const Modal = props.ModalComponent ?? MemoizedModal;
   const { dashboardReports: dashboard } = useDashboardReports(
     props.destinationDashboard
   );
-  const [filtersEnabledState, setFiltersEnabledState] = useState28(
+  const [filtersEnabledState, setFiltersEnabledState] = useState29(
     !!props.reportId
   );
-  useEffect22(() => {
+  useEffect23(() => {
     function handleResize() {
       const screenSize = window.innerWidth;
       if (screenSize >= 1200) {
@@ -42846,19 +42992,19 @@ function ChartBuilder({
     const resolvedReport = reportId && !tempReport ? allReportsById[reportId] : tempReport;
     return resolvedReport;
   }, [reportId, tempReport, allReportsById]);
-  const [windowWidth, setWindowWidth] = useState28(1200);
-  const [rows, setRows] = useState28(report?.rows ?? []);
-  const [itemQuery, setItemQuery] = useState28(report?.itemQuery);
-  const [rowCount, setRowCount] = useState28(report?.rowCount ?? 0);
-  const [maxPage, setMaxPage] = useState28(0);
-  const [isLoading, setIsLoading] = useState28(false);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState28(false);
-  const [isSubmitting, setIsSubmitting] = useState28(false);
-  const MIN_FORM_WIDTH = 710;
-  const [pivotCardWidth, setPivotCardWidth] = useState28(MIN_FORM_WIDTH);
-  const [formWidth, setFormWidth] = useState28(MIN_FORM_WIDTH);
-  const inputRef = useRef17(null);
-  const selectRef = useRef17(null);
+  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 [isLoading, setIsLoading] = useState29(false);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState29(false);
+  const [isSubmitting, setIsSubmitting] = useState29(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 processColumns = (columns2) => {
     if (schemaData.schemaWithCustomFields) {
       const newProcessedColumns = columns2?.map((col) => {
@@ -42888,12 +43034,12 @@ function ChartBuilder({
     }
     return columns2;
   };
-  const [processedColumns, setProcessedColumns] = useState28(
+  const [processedColumns, setProcessedColumns] = useState29(
     processColumns(report?.columnInternal ?? [])
   );
-  const [currentPage, setCurrentPage] = useState28(0);
-  const parentRef = useRef17(null);
-  const deleteRef = useRef17(null);
+  const [currentPage, setCurrentPage] = useState29(0);
+  const parentRef = useRef18(null);
+  const deleteRef = useRef18(null);
   const modalPadding = 20;
   const deleteButtonMargin = -12;
   const { dashboardFilters } = useContext26(DashboardFiltersContext);
@@ -42915,7 +43061,7 @@ function ChartBuilder({
       setFilterIssues([]);
     }
   };
-  useEffect22(() => {
+  useEffect23(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
       if (inputRef.current && selectRef.current) {
@@ -42938,7 +43084,7 @@ function ChartBuilder({
       window.removeEventListener("resize", handleResize);
     };
   }, [isOpen]);
-  const [dashboardOptions, setDashboardOptions] = useState28([]);
+  const [dashboardOptions, setDashboardOptions] = useState29([]);
   const {
     reportFilters,
     loadFiltersForReport,
@@ -42946,9 +43092,9 @@ function ChartBuilder({
     abortLoadingFilters
   } = useContext26(ReportFiltersContext);
   const { reportsDispatch } = useContext26(ReportsContext);
-  const initialFilters = useRef17(reportFilters[report?.id ?? TEMP_REPORT_ID]);
-  const [reportFiltersLoaded, setReportFiltersLoaded] = useState28(!filtersEnabled);
-  useEffect22(() => {
+  const initialFilters = useRef18(reportFilters[report?.id ?? TEMP_REPORT_ID]);
+  const [reportFiltersLoaded, setReportFiltersLoaded] = useState29(!filtersEnabled);
+  useEffect23(() => {
     if (!reportFilters[report?.id ?? TEMP_REPORT_ID]) {
       loadFiltersForReport(
         report?.id ?? TEMP_REPORT_ID,
@@ -42981,20 +43127,20 @@ function ChartBuilder({
       (f) => f.filter
     );
   }, [reportFilters, report?.id]);
-  const [showFilterModal, setShowFilterModal] = useState28(false);
-  const [filterIssues, setFilterIssues] = useState28([]);
-  const [showPivotPopover, setShowPivotPopover] = useState28(false);
-  const [isEdittingPivot, setIsEdittingPivot] = useState28(false);
-  const [selectedPivotIndex, setSelectedPivotIndex] = useState28(-1);
-  const [tableName, setTableName] = useState28(void 0);
-  const [includeCustomFields, setIncludeCustomFields] = useState28(
+  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(
     report ? !!report.includeCustomFields : !!client?.featureFlags?.customFieldsEnabled
   );
   const selectedTable = schemaData.schema?.find(
     (t) => t.displayName === tableName
   );
-  const [pivotPopUpTitle, setPivotPopUpTitle] = useState28("Add pivot");
-  const [pivotError, setPivotError] = useState28(void 0);
+  const [pivotPopUpTitle, setPivotPopUpTitle] = useState29("Add pivot");
+  const [pivotError, setPivotError] = useState29(void 0);
   const pivotData = report?.pivotRows && report?.pivotColumns ? {
     rows: report.pivotRows,
     columns: report.pivotColumns,
@@ -43005,19 +43151,19 @@ function ChartBuilder({
   const columns = report?.columnInternal ?? [];
   const destinationDashboardName = report?.dashboardName || destinationDashboard;
   const query = report?.queryString;
-  const [loadingFormData, setLoadingFormData] = useState28(false);
-  const [triggeredEditChart, setTriggeredEditChart] = useState28(false);
-  const [createdPivots, setCreatedPivots] = useState28(
+  const [loadingFormData, setLoadingFormData] = useState29(false);
+  const [triggeredEditChart, setTriggeredEditChart] = useState29(false);
+  const [createdPivots, setCreatedPivots] = useState29(
     report?.pivot ? [report.pivot] : cp
   );
-  const [recommendedPivots, setRecommendedPivots] = useState28(rp);
-  const [pivotRowField, setPivotRowField] = useState28(
+  const [recommendedPivots, setRecommendedPivots] = useState29(rp);
+  const [pivotRowField, setPivotRowField] = useState29(
     report?.pivot?.rowField
   );
-  const [pivotColumnField, setPivotColumnField] = useState28(
+  const [pivotColumnField, setPivotColumnField] = useState29(
     report?.pivot?.columnField
   );
-  const [pivotAggregations, setPivotAggregations] = useState28(
+  const [pivotAggregations, setPivotAggregations] = useState29(
     report?.pivot?.aggregations ?? [
       {
         valueField: report?.pivot?.valueField,
@@ -43026,10 +43172,10 @@ function ChartBuilder({
       }
     ]
   );
-  const [pivotLimit, setPivotLimit] = useState28(
+  const [pivotLimit, setPivotLimit] = useState29(
     report?.pivot?.rowLimit
   );
-  const [pivotSort, setPivotSort] = useState28(
+  const [pivotSort, setPivotSort] = useState29(
     report?.pivot?.sort && report?.pivot?.sortDirection && report?.pivot?.sortField ? {
       sortField: report.pivot.sortField,
       sortDirection: report.pivot.sortDirection
@@ -43042,16 +43188,17 @@ function ChartBuilder({
       rowsPerRequest: report?.chartType === "table" ? 50 : 500
     }
   };
-  const [currentProcessing, setCurrentProcessing] = useState28(baseProcessing);
-  const [customTenantAccess, setCustomTenantAccess] = useState28(
+  const [currentProcessing, setCurrentProcessing] = useState29(baseProcessing);
+  const [customTenantAccess, setCustomTenantAccess] = useState29(
     report?.flags === null ? false : !!Object.values(report?.flags ?? {}).length
   );
-  const [dateFieldOptions, setDateFieldOptions] = useState28([]);
-  const [allTables, setAllTables] = useState28([]);
-  const [customFieldTableRef, setCustomFieldTableRef] = useState28(false);
-  const [referencedColumns, setReferencedColumns] = useState28({});
-  const [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = useState28({});
-  const [filterMap, setFilterMap] = useState28(report?.filterMap ?? {});
+  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 canonicalFilterMap = useMemo21(() => {
     return Object.fromEntries(
       Object.entries(filterMap).filter(
@@ -43062,7 +43209,7 @@ function ChartBuilder({
   const validFilter = useMemo21(() => {
     return specificDashboardFilters.reduce(
       (acc, filter) => {
-        if (filter.filterType === "date_range" || filter.filterType === "tenant") {
+        if (filter.filterType === "date_range" || filter.filterType === "tenant" || !referencedTablesLoaded) {
           acc[filter.label] = true;
           return acc;
         }
@@ -43077,8 +43224,8 @@ function ChartBuilder({
       },
       {}
     );
-  }, [specificDashboardFilters, filterMap, allTables]);
-  const [formFlags, setFormFlags] = useState28(
+  }, [specificDashboardFilters, filterMap, allTables, referencedTablesLoaded]);
+  const [formFlags, setFormFlags] = useState29(
     report?.flags ? Object.fromEntries(
       Object.entries(report.flags).map(([key, value]) => {
         if (value === ALL_TENANTS) {
@@ -43095,7 +43242,7 @@ function ChartBuilder({
       })
     ) : void 0
   );
-  const [defaultDateField, setDefaultDateField] = useState28({
+  const [defaultDateField, setDefaultDateField] = useState29({
     table: dateFieldOptions[0]?.name || "",
     field: dateFieldOptions[0]?.columns[0]?.field || ""
   });
@@ -43274,7 +43421,7 @@ function ChartBuilder({
     }
     return chartBuilderData;
   };
-  const [formData, setFormData] = useState28(
+  const [formData, setFormData] = useState29(
     formFormDataFromReport(report, destinationSection ?? getCurrentSection())
   );
   const reportCustomFields = useMemo21(() => {
@@ -43328,7 +43475,7 @@ function ChartBuilder({
     const columnsObservedInRows = rows[0] ? Object.keys(rows[0]) : [];
     return columns.filter((col) => !columnsObservedInRows.includes(col.field));
   }, [rows]);
-  const [chartTypes, setChartTypes] = useState28(
+  const [chartTypes, setChartTypes] = useState29(
     (() => {
       const data = formFormDataFromReport(
         report,
@@ -43397,12 +43544,12 @@ function ChartBuilder({
     customFieldsInTabularColumns,
     chartBuilderFormDataContainsCustomFields
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!loadingFormData && triggeredEditChart) {
       editChart();
     }
   }, [loadingFormData]);
-  useEffect22(() => {
+  useEffect23(() => {
     async function getFormData() {
       if (!client) {
         return;
@@ -43443,6 +43590,7 @@ function ChartBuilder({
         setLoadingFormData(false);
         return;
       }
+      setReferencedTablesLoaded(false);
       const result = await getReferencedTables(
         client,
         curSchemaData,
@@ -43520,12 +43668,13 @@ function ChartBuilder({
         curFormData.dateField ?? dateField,
         tableNames
       );
+      setReferencedTablesLoaded(true);
       setLoadingFormData(false);
     }
     getFormData();
   }, []);
-  const ranMountQuery = useRef17(false);
-  useEffect22(() => {
+  const ranMountQuery = useRef18(false);
+  useEffect23(() => {
     if (runQueryOnMount && reportFiltersLoaded && filtersEnabled && !ranMountQuery.current) {
       ranMountQuery.current = true;
       handleRunQuery(baseProcessing, currentDashboardFilters);
@@ -43550,7 +43699,7 @@ function ChartBuilder({
       {}
     ) ?? {};
   }, [client?.allTenantTypes]);
-  const [selectedPivotTable, setSelectedPivotTable] = useState28(pivotData);
+  const [selectedPivotTable, setSelectedPivotTable] = useState29(pivotData);
   const pivotCardTable = useMemo21(() => {
     return {
       pivot: formData.pivot,
@@ -43735,8 +43884,8 @@ function ChartBuilder({
       handleRunQuery(baseProcessing, updatedFilters);
     });
   };
-  const filtersEnabledRef = useRef17(filtersEnabled);
-  useEffect22(() => {
+  const filtersEnabledRef = useRef18(filtersEnabled);
+  useEffect23(() => {
     if (filtersEnabledRef.current !== filtersEnabled) {
       filtersEnabledRef.current = filtersEnabled;
       setCurrentPage(0);
@@ -45479,16 +45628,22 @@ function ChartBuilder({
                                   )
                                 }
                               ),
-                              (!formData.dateField?.table || !formData.dateField?.field) && /* @__PURE__ */ jsx65("div", { style: { marginBottom: 8, marginTop: "auto" }, children: /* @__PURE__ */ jsx65(
-                                ExclamationFilledIcon_default,
+                              referencedTablesLoaded && (!formData.dateField?.table || !formData.dateField?.field) && /* @__PURE__ */ jsx65(
+                                "div",
                                 {
-                                  height: 28,
-                                  width: 28,
-                                  style: {
-                                    color: "#dc143c"
-                                  }
+                                  style: { marginBottom: 8, marginTop: "auto" },
+                                  children: /* @__PURE__ */ jsx65(
+                                    ExclamationFilledIcon_default,
+                                    {
+                                      height: 28,
+                                      width: 28,
+                                      style: {
+                                        color: "#dc143c"
+                                      }
+                                    }
+                                  )
                                 }
-                              ) })
+                              )
                             ] }),
                             specificDashboardFilters.length > 0 && /* @__PURE__ */ jsx65(
                               "div",
@@ -45559,10 +45714,13 @@ function ChartBuilder({
                                       hideEmptyOption: true
                                     }
                                   ),
-                                  !validFilter[filter.label] && /* @__PURE__ */ jsx65(
+                                  referencedTablesLoaded && !validFilter[filter.label] && /* @__PURE__ */ jsx65(
                                     "div",
                                     {
-                                      style: { marginBottom: 8, marginTop: "auto" },
+                                      style: {
+                                        marginBottom: 8,
+                                        marginTop: "auto"
+                                      },
                                       children: /* @__PURE__ */ jsx65(
                                         ExclamationFilledIcon_default,
                                         {
@@ -45851,21 +46009,6 @@ function DashboardFilterModal({
   );
 }
 
-// src/utils/width.ts
-var updateFirstChildWidth = (containerRef, setState, options = { gap: 0 }) => {
-  if (containerRef.current) {
-    const element = containerRef.current;
-    const totalWidth = element.getBoundingClientRect().width;
-    const gapWidth = options.gap * (element.childElementCount - 1);
-    let siblingsWidth = 0;
-    const children = Array.from(containerRef.current.children);
-    for (let i = 1; i < children.length; i++) {
-      siblingsWidth += children[i].getBoundingClientRect().width;
-    }
-    setState(totalWidth - siblingsWidth - gapWidth);
-  }
-};
-
 // src/SQLEditor.tsx
 init_tableProcessing();
 init_queryConstructor();
@@ -46209,7 +46352,7 @@ init_astProcessing();
 init_constants();
 
 // src/hooks/useLongLoading.tsx
-import { useContext as useContext27, useEffect as useEffect23, useState as useState29 } from "react";
+import { useContext as useContext27, useEffect as useEffect24, useState as useState30 } from "react";
 function useLongLoading(isLoading, meta) {
   const {
     origin,
@@ -46217,10 +46360,10 @@ function useLongLoading(isLoading, meta) {
     abnormalLoadTime = 15e3,
     loadDescription
   } = meta;
-  const [isLongLoading, setIsLongLoading] = useState29(false);
-  const [isAbnormalLoading, setIsAbnormalLoading] = useState29(false);
+  const [isLongLoading, setIsLongLoading] = useState30(false);
+  const [isAbnormalLoading, setIsAbnormalLoading] = useState30(false);
   const { eventTracking } = useContext27(EventTrackingContext);
-  useEffect23(() => {
+  useEffect24(() => {
     let longTimer = null;
     let abnormalTimer = null;
     if (isLoading) {
@@ -46382,7 +46525,7 @@ function SQLEditor({
   onDiscardChanges,
   onSaveChanges,
   onCloseChartBuilder,
-  isChartBuilderEnabled = false,
+  isChartBuilderEnabled = true,
   isAdminEnabled = false,
   chartBuilderOptions,
   chartBuilderTitle,
@@ -46402,7 +46545,14 @@ function SQLEditor({
   onRequestAddVirtualTable
 }) {
   const computedButtonLabel = addToDashboardButtonLabel === "Add to dashboard" ? reportId || report?.id ? "Save changes" : "Add to dashboard" : addToDashboardButtonLabel;
-  const [sqlPrompt, setSqlPrompt] = useState30("");
+  const [sqlPrompt, setSqlPrompt] = useState31("");
+  const sqlPromptFormRef = useRef19(null);
+  const sqlPromptInputWidth = useResponsiveFirstChildWidth_default(sqlPromptFormRef, {
+    gap: 12,
+    initialWidth: 320,
+    minWidth: 160
+  });
+  const normalizedSqlPromptWidth = sqlPromptInputWidth > 0 ? sqlPromptInputWidth : 160;
   const [client] = useContext28(ClientContext);
   const [theme] = useContext28(ThemeContext);
   const { tenants, flags } = useContext28(TenantContext);
@@ -46418,9 +46568,9 @@ function SQLEditor({
   const destinationDashboardConfig = useMemo22(() => {
     return dashboards?.find((d) => d.name === destinationDashboard);
   }, [dashboards, destinationDashboard]);
-  const [query, setQuery] = useState30(defaultQuery);
-  const [rows, setRows] = useState30([]);
-  const [columns, setColumns] = useState30([]);
+  const [query, setQuery] = useState31(defaultQuery);
+  const [rows, setRows] = useState31([]);
+  const [columns, setColumns] = useState31([]);
   const [schemaData] = useContext28(SchemaDataContext);
   const { dashboardFilters } = useContext28(DashboardFiltersContext);
   const specificDashboardFilters = useMemo22(() => {
@@ -46428,37 +46578,32 @@ function SQLEditor({
       dashboardFilters[report?.dashboardName ?? destinationDashboard ?? ""] ?? {}
     ).map((f) => f.filter);
   }, [dashboardFilters, destinationDashboard]);
-  const [errorMessage, setErrorMessage] = useState30("");
-  const [sqlResponseLoading, setSqlResponseLoading] = useState30(false);
+  const [errorMessage, setErrorMessage] = useState31("");
+  const [sqlResponseLoading, setSqlResponseLoading] = useState31(false);
   useLongLoading(sqlResponseLoading, {
     origin: "SQLEditor",
     loadDescription: "Loading SQL response"
   });
-  const [sqlQueryLoading, setSqlQueryLoading] = useState30(false);
+  const [sqlQueryLoading, setSqlQueryLoading] = useState31(false);
   useLongLoading(sqlQueryLoading, {
     origin: "SQLEditor",
     loadDescription: "Loading SQL query"
   });
-  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState30(false);
-  const [displayTable, setDisplayTable] = useState30(false);
-  const [formattedRows, setFormattedRows] = useState30([]);
-  const formRef = useRef18(null);
-  const sidebarRef = useRef18(null);
-  const [searchBarWidth, setSearchBarWidth] = useState30(200);
-  const [showSearchBar, setShowSearchBar] = useState30(false);
-  const [filterBarWidth, setFilterBarWidth] = useState30(200);
-  const [rowCount, setRowCount] = useState30(void 0);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState30(false);
-  const [maxPage, setMaxPage] = useState30(1);
-  const [tableSearchQuery, setTableSearchQuery] = useState30("");
-  const [lastSuccessfulQuery, setLastSuccessfulQuery] = useState30("");
-  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState30(false);
-  const [tempReport, setTempReport] = useState30({
+  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({
     ...EMPTY_INTERNAL_REPORT,
     ...report
   });
-  const tableRef = useRef18(null);
-  const [cachedHeight, setCachedHeight] = useState30(0);
+  const tableRef = useRef19(null);
+  const [cachedHeight, setCachedHeight] = useState31(0);
   const DEFAULT_ROWS_PER_PAGE = 5;
   const ROW_HEIGHT = 37;
   const TABLE_TAB_HEIGHT = 75;
@@ -46472,17 +46617,17 @@ function SQLEditor({
     schemaData.schemaWithCustomFields,
     destinationDashboardConfig?.tenantKeys
   ]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (tableRef.current) {
       setCachedHeight(tableRef.current.clientHeight);
     }
   }, [tableRef.current?.clientHeight]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!data && !dashboardIsLoading) {
       reload();
     }
   }, [data, dashboardIsLoading]);
-  useEffect24(() => {
+  useEffect25(() => {
     const loadReport = async () => {
       let reportToLoad;
       if (!client) {
@@ -46535,8 +46680,8 @@ function SQLEditor({
       rowsPerPage * 10
     )
   };
-  const [currentPage, setCurrentPage] = useState30(0);
-  const [currentSort, setCurrentSort] = useState30(void 0);
+  const [currentPage, setCurrentPage] = useState31(0);
+  const [currentSort, setCurrentSort] = useState31(void 0);
   const currentProcessing = useMemo22(() => {
     return {
       page: {
@@ -46557,29 +46702,14 @@ function SQLEditor({
       );
     }) ?? [];
   }, [tableSearchQuery, schemaData.schemaWithCustomFields]);
-  useEffect24(() => {
-    function handleResize() {
-      updateFirstChildWidth(formRef, setSearchBarWidth, { gap: 12 });
-      updateFirstChildWidth(sidebarRef, setFilterBarWidth, { gap: 12 });
-      setShowSearchBar(true);
-    }
-    (async () => {
-      await new Promise((resolve) => setTimeout(resolve, 30));
-      handleResize();
-    })();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     if (client) {
       setRows([]);
       setColumns([]);
       setDisplayTable(false);
     }
   }, [client?.publicKey]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (isChartBuilderOpen === false) {
       onCloseChartBuilder && onCloseChartBuilder();
     }
@@ -46840,7 +46970,7 @@ function SQLEditor({
     }
     return getTablesHelper(getSelectFromAST(resp.ast), dbTables, skipStar);
   };
-  useEffect24(() => {
+  useEffect25(() => {
     if (onChangeQuery) {
       onChangeQuery(query || "");
     }
@@ -46897,7 +47027,11 @@ function SQLEditor({
                                 style: {
                                   paddingTop: 16,
                                   paddingLeft: "20px",
-                                  paddingRight: "30px"
+                                  paddingRight: "30px",
+                                  width: "100%",
+                                  maxWidth: 350,
+                                  minWidth: 250,
+                                  boxSizing: "border-box"
                                 },
                                 children: /* @__PURE__ */ jsx66(
                                   TextInputComponent,
@@ -46908,7 +47042,7 @@ function SQLEditor({
                                     },
                                     value: tableSearchQuery,
                                     id: "edit-name",
-                                    width: filterBarWidth
+                                    width: "100%"
                                   }
                                 )
                               }
@@ -46928,7 +47062,7 @@ function SQLEditor({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsxs48(
+                      /* @__PURE__ */ jsx66(
                         "div",
                         {
                           style: {
@@ -46940,391 +47074,385 @@ function SQLEditor({
                             height: "100%",
                             overflowX: "hidden"
                           },
-                          children: [
-                            /* @__PURE__ */ jsx66(
-                              "div",
-                              {
-                                style: {
-                                  display: "flex",
-                                  flexDirection: "column",
-                                  overflow: addToDashboardButtonLabel === "Add to dashboard" ? "visible" : "auto",
-                                  height: "100%"
-                                },
-                                children: /* @__PURE__ */ jsxs48(OverflowContainer, { children: [
-                                  /* @__PURE__ */ jsxs48(
-                                    "form",
-                                    {
-                                      ref: formRef,
-                                      onSubmit: (e) => {
-                                        e.preventDefault();
-                                        if (sqlPrompt.trim().length > 500) {
-                                          return;
-                                        }
-                                        debounceRunSqlPrompt();
-                                      },
-                                      style: {
-                                        display: "flex",
-                                        visibility: showSearchBar ? "visible" : "hidden",
-                                        flexDirection: "row",
-                                        gap: 12,
-                                        paddingTop: 16,
-                                        paddingBottom: 16
-                                      },
-                                      children: [
-                                        /* @__PURE__ */ jsx66(
-                                          TextInputComponent,
-                                          {
-                                            id: "ai-search",
-                                            value: sqlPrompt,
-                                            width: searchBarWidth,
-                                            onChange: (e) => setSqlPrompt(e.target.value),
-                                            placeholder: "Ask a question..."
-                                          }
-                                        ),
-                                        /* @__PURE__ */ jsx66(
-                                          QuillToolTip,
-                                          {
-                                            text: "Prompt must be less than 500 characters",
-                                            enabled: sqlPrompt.trim().length > 500,
-                                            displayBelow: true,
-                                            textStyle: {
-                                              maxWidth: "77px",
-                                              whiteSpace: "normal"
-                                            },
-                                            children: /* @__PURE__ */ jsx66(
-                                              ButtonComponent,
-                                              {
-                                                onClick: debounceRunSqlPrompt,
-                                                label: "Ask AI",
-                                                isLoading: sqlResponseLoading,
-                                                disabled: sqlPrompt.trim().length > 500
-                                              }
-                                            )
-                                          }
-                                        )
-                                      ]
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx66(
-                                    "div",
-                                    {
-                                      style: {
-                                        minHeight: "max(210px, 20vh)",
-                                        maxHeight: "30%",
-                                        height: "20vh"
-                                      },
-                                      children: /* @__PURE__ */ jsx66(
-                                        SQLEditorComponent,
+                          children: /* @__PURE__ */ jsx66(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                overflow: addToDashboardButtonLabel === "Add to dashboard" ? "visible" : "auto",
+                                height: "100%"
+                              },
+                              children: /* @__PURE__ */ jsxs48(OverflowContainer, { children: [
+                                /* @__PURE__ */ jsxs48(
+                                  "form",
+                                  {
+                                    ref: sqlPromptFormRef,
+                                    onSubmit: (e) => {
+                                      e.preventDefault();
+                                      if (sqlPrompt.trim().length > 500) {
+                                        return;
+                                      }
+                                      debounceRunSqlPrompt();
+                                    },
+                                    style: {
+                                      display: "flex",
+                                      flexDirection: "row",
+                                      gap: 12,
+                                      paddingTop: 16,
+                                      paddingBottom: 16,
+                                      flexWrap: "wrap",
+                                      alignItems: "stretch",
+                                      visibility: normalizedSqlPromptWidth > 0 ? "visible" : "hidden"
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx66(
+                                        TextInputComponent,
                                         {
-                                          query: query || "",
-                                          schema: filteredSchema,
-                                          databaseType: client?.databaseType ?? "postgresql",
-                                          clientName: client?.publicKey || "",
-                                          setQuery,
-                                          handleRunQuery: () => {
-                                            handleRunQuery(currentProcessing, true);
-                                          },
-                                          handleFixWithAI,
-                                          isNewQueryEnabled,
-                                          runQueryOnMount,
-                                          handleClearQuery,
-                                          theme,
-                                          defineEditorTheme,
-                                          setEditorTheme,
-                                          setEditorMounted: () => {
-                                          },
-                                          ButtonComponent,
-                                          SecondaryButtonComponent,
-                                          loading: sqlResponseLoading && schemaData.isSchemaLoading && dashboardIsLoading,
-                                          LoadingComponent
+                                          id: "ai-search",
+                                          value: sqlPrompt,
+                                          width: normalizedSqlPromptWidth,
+                                          onChange: (e) => setSqlPrompt(e.target.value),
+                                          placeholder: "Ask a question..."
                                         }
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx66(
-                                    "div",
-                                    {
-                                      style: {
-                                        display: "flex",
-                                        flexDirection: "row",
-                                        width: "100%",
-                                        justifyContent: addToDashboardButtonLabel === "Add to dashboard" ? "flex-end" : "flex-start"
-                                      },
-                                      children: /* @__PURE__ */ jsx66(
-                                        "div",
+                                      ),
+                                      /* @__PURE__ */ jsx66(
+                                        QuillToolTip,
                                         {
-                                          style: {
-                                            display: "flex",
-                                            flexDirection: "row",
-                                            alignItems: "center",
-                                            height: 70
+                                          text: "Prompt must be less than 500 characters",
+                                          enabled: sqlPrompt.trim().length > 500,
+                                          displayBelow: true,
+                                          textStyle: {
+                                            maxWidth: "77px",
+                                            whiteSpace: "normal"
                                           },
-                                          children: /* @__PURE__ */ jsxs48("div", { style: { display: "flex", gap: 12 }, children: [
-                                            computedButtonLabel === "Add to dashboard" ? /* @__PURE__ */ jsx66(
-                                              SecondaryButtonComponent,
-                                              {
-                                                onClick: () => {
-                                                  handleRunQuery(
-                                                    {
-                                                      page: pagination,
-                                                      sort: void 0
-                                                    },
-                                                    true,
-                                                    false,
-                                                    true
-                                                  );
-                                                },
-                                                label: "Run query"
-                                              }
-                                            ) : /* @__PURE__ */ jsx66(
-                                              ButtonComponent,
-                                              {
-                                                onClick: () => {
-                                                  handleRunQuery(
-                                                    {
-                                                      page: pagination,
-                                                      sort: void 0
-                                                    },
-                                                    true,
-                                                    false,
-                                                    true
-                                                  );
-                                                },
-                                                label: "Run query"
-                                              }
-                                            ),
-                                            isAdminEnabled && !report && /* @__PURE__ */ jsx66(
-                                              SecondaryButtonComponent,
-                                              {
-                                                disabled: !!errorMessage || !(lastSuccessfulQuery === query) || !query,
-                                                onClick: async () => {
-                                                  const isSelectStar = isSimpleSelectStarQuery(
-                                                    query ?? ""
-                                                  );
-                                                  let tables = [];
-                                                  let customFieldColumns = [];
-                                                  if (client && isSelectStar && schemaData.customFields) {
-                                                    const { referencedTablesAndColumns } = await getReferencedTables(
-                                                      client,
-                                                      query ?? "",
-                                                      schemaData.schemaWithCustomFields,
-                                                      isSelectStar
-                                                    );
-                                                    tables = referencedTablesAndColumns.map(
-                                                      (ref) => ref.name
-                                                    );
-                                                    customFieldColumns = tables.map((table) => {
-                                                      return (schemaData.customFields?.[table] ?? []).map((field) => field.field);
-                                                    }).flat();
-                                                  }
-                                                  setTempReport({
-                                                    ...tempReport,
-                                                    id: TEMP_REPORT_ID,
-                                                    rows,
-                                                    columns: isSelectStar ? (
-                                                      // so Automatic Custom Fields can be applied
-                                                      columns.filter(
-                                                        (col) => {
-                                                          return !customFieldColumns.includes(
-                                                            col.field
-                                                          );
-                                                        }
-                                                      )
-                                                    ) : columns,
-                                                    includeCustomFields: isSelectStar,
-                                                    columnInternal: columns,
-                                                    rowCount: rowCount ?? 0,
-                                                    queryString: query ?? "",
-                                                    chartType: "table",
-                                                    dashboardName: destinationDashboard
-                                                  });
-                                                  setIsSaveQueryModalOpen(true);
-                                                },
-                                                label: "Save query"
-                                              }
-                                            ),
-                                            isNewQueryEnabled && /* @__PURE__ */ jsx66(
-                                              SecondaryButtonComponent,
-                                              {
-                                                onClick: handleClearQuery,
-                                                label: "Clear query"
-                                              }
-                                            ),
-                                            computedButtonLabel === "Add to dashboard" && /* @__PURE__ */ jsx66(
-                                              ButtonComponent,
-                                              {
-                                                onClick: async () => {
-                                                  onSaveChanges && onSaveChanges();
-                                                  const isSelectStar = isSimpleSelectStarQuery(
-                                                    query ?? ""
-                                                  );
-                                                  let tables = [];
-                                                  let customFieldColumns = [];
-                                                  if (client && isSelectStar && schemaData.customFields) {
-                                                    const { referencedTablesAndColumns } = await getReferencedTables(
-                                                      client,
-                                                      query ?? "",
-                                                      filteredSchema,
-                                                      isSelectStar
-                                                    );
-                                                    tables = referencedTablesAndColumns.map(
-                                                      (ref) => ref.name
-                                                    );
-                                                    customFieldColumns = tables.map((table) => {
-                                                      return (schemaData.customFields?.[table] ?? []).map((field) => field.field);
-                                                    }).flat();
-                                                  }
-                                                  const newTempReport = {
-                                                    ...tempReport,
-                                                    id: reportId || report?.id || TEMP_REPORT_ID,
-                                                    rows,
-                                                    columns: isSelectStar ? (
-                                                      // so Automatic Custom Fields can be applied
-                                                      columns.filter(
-                                                        (col) => {
-                                                          return !customFieldColumns.includes(
-                                                            col.field
-                                                          );
-                                                        }
-                                                      )
-                                                    ) : columns,
-                                                    includeCustomFields: isSelectStar,
-                                                    columnInternal: columns,
-                                                    rowCount: rowCount ?? 0,
-                                                    queryString: query ?? "",
-                                                    dashboardName: report?.dashboardName ?? destinationDashboard
-                                                  };
-                                                  setTempReport(newTempReport);
-                                                  setIsChartBuilderOpen(true);
-                                                },
-                                                label: computedButtonLabel,
-                                                disabled: !!errorMessage || !(lastSuccessfulQuery === query) || !query,
-                                                tooltipText: !!errorMessage || !(lastSuccessfulQuery === query) ? "Please run a query" : ""
-                                              }
-                                            )
-                                          ] })
+                                          children: /* @__PURE__ */ jsx66(
+                                            ButtonComponent,
+                                            {
+                                              onClick: debounceRunSqlPrompt,
+                                              label: "Ask AI",
+                                              isLoading: sqlResponseLoading,
+                                              disabled: sqlPrompt.trim().length > 500
+                                            }
+                                          )
                                         }
                                       )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxs48(
-                                    "div",
-                                    {
-                                      style: {
-                                        display: "flex",
-                                        flexDirection: "column",
-                                        // height: '100%',
-                                        padding: 0,
-                                        margin: 0,
-                                        border: "none",
-                                        outline: "none"
-                                      },
-                                      children: [
-                                        errorMessage && /* @__PURE__ */ jsx66(
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx66(
+                                  "div",
+                                  {
+                                    style: {
+                                      minHeight: "max(210px, 20vh)",
+                                      maxHeight: "30%",
+                                      height: "20vh"
+                                    },
+                                    children: /* @__PURE__ */ jsx66(
+                                      SQLEditorComponent,
+                                      {
+                                        query: query || "",
+                                        schema: filteredSchema,
+                                        databaseType: client?.databaseType ?? "postgresql",
+                                        clientName: client?.publicKey || "",
+                                        setQuery,
+                                        handleRunQuery: () => {
+                                          handleRunQuery(currentProcessing, true);
+                                        },
+                                        handleFixWithAI,
+                                        isNewQueryEnabled,
+                                        runQueryOnMount,
+                                        handleClearQuery,
+                                        theme,
+                                        defineEditorTheme,
+                                        setEditorTheme,
+                                        setEditorMounted: () => {
+                                        },
+                                        ButtonComponent,
+                                        SecondaryButtonComponent,
+                                        loading: sqlResponseLoading && schemaData.isSchemaLoading && dashboardIsLoading,
+                                        LoadingComponent
+                                      }
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx66(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      flexDirection: "row",
+                                      width: "100%",
+                                      justifyContent: addToDashboardButtonLabel === "Add to dashboard" ? "flex-end" : "flex-start"
+                                    },
+                                    children: /* @__PURE__ */ jsx66(
+                                      "div",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          flexDirection: "row",
+                                          alignItems: "center",
+                                          height: 70
+                                        },
+                                        children: /* @__PURE__ */ jsxs48(
                                           "div",
                                           {
                                             style: {
-                                              fontFamily: theme?.fontFamily,
-                                              color: theme?.primaryTextColor,
-                                              fontSize: 15,
-                                              fontWeight: "400",
-                                              width: "100%"
+                                              display: "flex",
+                                              gap: 12
                                             },
-                                            children: /* @__PURE__ */ jsxs48(
-                                              "div",
-                                              {
-                                                style: {
-                                                  display: "flex",
-                                                  flexDirection: "row",
-                                                  justifyContent: "space-between",
-                                                  gap: 12,
-                                                  background: "rgba(0,0,0,0.02)",
-                                                  // TODO: change color
-                                                  color: theme?.primaryTextColor,
-                                                  fontFamily: theme?.fontFamily,
-                                                  borderRadius: 6,
-                                                  padding: 20,
-                                                  marginBottom: 15,
-                                                  width: "100%",
-                                                  alignItems: "center"
-                                                },
-                                                children: [
-                                                  errorMessage,
-                                                  errorMessage !== "No data found" && errorMessage !== "No query found" && /* @__PURE__ */ jsx66(
-                                                    SecondaryButtonComponent,
+                                            children: [
+                                              computedButtonLabel === "Add to dashboard" ? /* @__PURE__ */ jsx66(
+                                                SecondaryButtonComponent,
+                                                {
+                                                  onClick: () => {
+                                                    handleRunQuery(
+                                                      {
+                                                        page: pagination,
+                                                        sort: void 0
+                                                      },
+                                                      true,
+                                                      false,
+                                                      true
+                                                    );
+                                                  },
+                                                  label: "Run query"
+                                                }
+                                              ) : /* @__PURE__ */ jsx66(
+                                                SecondaryButtonComponent,
+                                                {
+                                                  onClick: () => {
+                                                    handleRunQuery(
+                                                      {
+                                                        page: pagination,
+                                                        sort: void 0
+                                                      },
+                                                      true,
+                                                      false,
+                                                      true
+                                                    );
+                                                  },
+                                                  label: "Run query"
+                                                }
+                                              ),
+                                              isChartBuilderEnabled && /* @__PURE__ */ jsx66(
+                                                "div",
+                                                {
+                                                  style: {
+                                                    display: "flex",
+                                                    flexDirection: "row",
+                                                    alignItems: "center",
+                                                    justifyContent: "flex-end",
+                                                    width: "100%"
+                                                  },
+                                                  children: computedButtonLabel !== "Add to dashboard" ? /* @__PURE__ */ jsx66(
+                                                    ButtonComponent,
                                                     {
-                                                      onClick: handleFixWithAI,
-                                                      label: "Fix with AI"
+                                                      onClick: async () => {
+                                                        onSaveChanges && onSaveChanges();
+                                                        setIsChartBuilderOpen(true);
+                                                      },
+                                                      label: computedButtonLabel,
+                                                      disabled: !!errorMessage || !(lastSuccessfulQuery === query)
+                                                    }
+                                                  ) : /* @__PURE__ */ jsx66(
+                                                    ButtonComponent,
+                                                    {
+                                                      onClick: async () => {
+                                                        onSaveChanges && onSaveChanges();
+                                                        const isSelectStar = isSimpleSelectStarQuery(query ?? "");
+                                                        let tables = [];
+                                                        let customFieldColumns = [];
+                                                        if (client && isSelectStar && schemaData.customFields) {
+                                                          const { referencedTablesAndColumns } = await getReferencedTables(
+                                                            client,
+                                                            query ?? "",
+                                                            filteredSchema,
+                                                            isSelectStar
+                                                          );
+                                                          tables = referencedTablesAndColumns.map(
+                                                            (ref) => ref.name
+                                                          );
+                                                          customFieldColumns = tables.map((table) => {
+                                                            return (schemaData.customFields?.[table] ?? []).map((field) => field.field);
+                                                          }).flat();
+                                                        }
+                                                        const newTempReport = {
+                                                          ...tempReport,
+                                                          id: reportId || report?.id || TEMP_REPORT_ID,
+                                                          rows,
+                                                          columns: isSelectStar ? (
+                                                            // so Automatic Custom Fields can be applied
+                                                            columns.filter(
+                                                              (col) => {
+                                                                return !customFieldColumns.includes(
+                                                                  col.field
+                                                                );
+                                                              }
+                                                            )
+                                                          ) : columns,
+                                                          includeCustomFields: isSelectStar,
+                                                          columnInternal: columns,
+                                                          rowCount: rowCount ?? 0,
+                                                          queryString: query ?? "",
+                                                          dashboardName: report?.dashboardName ?? destinationDashboard
+                                                        };
+                                                        setTempReport(newTempReport);
+                                                        setIsChartBuilderOpen(true);
+                                                      },
+                                                      label: computedButtonLabel,
+                                                      disabled: !!errorMessage || !(lastSuccessfulQuery === query) || !query,
+                                                      tooltipText: !!errorMessage || !(lastSuccessfulQuery === query) ? "Please run a query" : ""
                                                     }
                                                   )
-                                                ]
-                                              }
-                                            )
-                                          }
-                                        ),
-                                        errorMessage || !displayTable ? null : /* @__PURE__ */ jsx66("div", { ref: tableRef, children: /* @__PURE__ */ jsx66(
-                                          TableComponent,
-                                          {
-                                            isLoading: sqlQueryLoading,
-                                            rows: formattedRows,
-                                            columns,
-                                            rowCount,
-                                            rowsPerPage,
-                                            rowCountIsLoading,
-                                            onPageChange,
-                                            onSortChange,
-                                            containerStyle: {
-                                              height: "calc(100vh - max(210px, 20vh) - 310px)",
-                                              minHeight: `calc(${DEFAULT_ROWS_PER_PAGE} * ${ROW_HEIGHT}px + ${TABLE_TAB_HEIGHT}px)`,
-                                              // at least 10 rows tall
-                                              maxHeight: "calc(100vh - max(210px, 20vh) - 310px)"
-                                            },
-                                            currentPage,
-                                            setCurrentPage
+                                                }
+                                              ),
+                                              isAdminEnabled && !report && /* @__PURE__ */ jsx66(
+                                                SecondaryButtonComponent,
+                                                {
+                                                  disabled: !!errorMessage || !(lastSuccessfulQuery === query) || !query,
+                                                  onClick: async () => {
+                                                    const isSelectStar = isSimpleSelectStarQuery(
+                                                      query ?? ""
+                                                    );
+                                                    let tables = [];
+                                                    let customFieldColumns = [];
+                                                    if (client && isSelectStar && schemaData.customFields) {
+                                                      const { referencedTablesAndColumns } = await getReferencedTables(
+                                                        client,
+                                                        query ?? "",
+                                                        schemaData.schemaWithCustomFields,
+                                                        isSelectStar
+                                                      );
+                                                      tables = referencedTablesAndColumns.map(
+                                                        (ref) => ref.name
+                                                      );
+                                                      customFieldColumns = tables.map((table) => {
+                                                        return (schemaData.customFields?.[table] ?? []).map((field) => field.field);
+                                                      }).flat();
+                                                    }
+                                                    setTempReport({
+                                                      ...tempReport,
+                                                      id: TEMP_REPORT_ID,
+                                                      rows,
+                                                      columns: isSelectStar ? (
+                                                        // so Automatic Custom Fields can be applied
+                                                        columns.filter(
+                                                          (col) => {
+                                                            return !customFieldColumns.includes(
+                                                              col.field
+                                                            );
+                                                          }
+                                                        )
+                                                      ) : columns,
+                                                      includeCustomFields: isSelectStar,
+                                                      columnInternal: columns,
+                                                      rowCount: rowCount ?? 0,
+                                                      queryString: query ?? "",
+                                                      chartType: "table",
+                                                      dashboardName: destinationDashboard
+                                                    });
+                                                    setIsSaveQueryModalOpen(true);
+                                                  },
+                                                  label: "Save query"
+                                                }
+                                              ),
+                                              isNewQueryEnabled && /* @__PURE__ */ jsx66(
+                                                SecondaryButtonComponent,
+                                                {
+                                                  onClick: handleClearQuery,
+                                                  label: "Clear query"
+                                                }
+                                              )
+                                            ]
                                           }
-                                        ) })
-                                      ]
-                                    }
-                                  )
-                                ] })
-                              }
-                            ),
-                            isChartBuilderEnabled && /* @__PURE__ */ jsxs48(
-                              "div",
-                              {
-                                style: {
-                                  display: "flex",
-                                  flexDirection: "row",
-                                  alignItems: "center",
-                                  justifyContent: "flex-end",
-                                  width: "100%",
-                                  gap: 12,
-                                  marginTop: 15,
-                                  marginBottom: 5
-                                },
-                                children: [
-                                  onDiscardChanges && /* @__PURE__ */ jsx66(
-                                    SecondaryButtonComponent,
-                                    {
-                                      onClick: onDiscardChanges,
-                                      label: "Discard changes"
-                                    }
-                                  ),
-                                  computedButtonLabel !== "Add to dashboard" && /* @__PURE__ */ jsx66(
-                                    ButtonComponent,
-                                    {
-                                      onClick: async () => {
-                                        onSaveChanges && onSaveChanges();
-                                        setIsChartBuilderOpen(true);
-                                      },
-                                      label: computedButtonLabel,
-                                      disabled: !!errorMessage || !(lastSuccessfulQuery === query)
-                                    }
-                                  )
-                                ]
-                              }
-                            )
-                          ]
+                                        )
+                                      }
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs48(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      flexDirection: "column",
+                                      // height: '100%',
+                                      padding: 0,
+                                      margin: 0,
+                                      border: "none",
+                                      outline: "none"
+                                    },
+                                    children: [
+                                      errorMessage && /* @__PURE__ */ jsx66(
+                                        "div",
+                                        {
+                                          style: {
+                                            fontFamily: theme?.fontFamily,
+                                            color: theme?.primaryTextColor,
+                                            fontSize: 15,
+                                            fontWeight: "400",
+                                            width: "100%"
+                                          },
+                                          children: /* @__PURE__ */ jsxs48(
+                                            "div",
+                                            {
+                                              style: {
+                                                display: "flex",
+                                                flexDirection: "row",
+                                                justifyContent: "space-between",
+                                                gap: 12,
+                                                background: "rgba(0,0,0,0.02)",
+                                                // TODO: change color
+                                                color: theme?.primaryTextColor,
+                                                fontFamily: theme?.fontFamily,
+                                                borderRadius: 6,
+                                                padding: 20,
+                                                marginBottom: 15,
+                                                width: "100%",
+                                                alignItems: "center"
+                                              },
+                                              children: [
+                                                errorMessage,
+                                                errorMessage !== "No data found" && errorMessage !== "No query found" && /* @__PURE__ */ jsx66(
+                                                  SecondaryButtonComponent,
+                                                  {
+                                                    onClick: handleFixWithAI,
+                                                    label: "Fix with AI"
+                                                  }
+                                                )
+                                              ]
+                                            }
+                                          )
+                                        }
+                                      ),
+                                      errorMessage || !displayTable ? null : /* @__PURE__ */ jsx66("div", { ref: tableRef, children: /* @__PURE__ */ jsx66(
+                                        TableComponent,
+                                        {
+                                          isLoading: sqlQueryLoading,
+                                          rows: formattedRows,
+                                          columns,
+                                          rowCount,
+                                          rowsPerPage,
+                                          rowCountIsLoading,
+                                          onPageChange,
+                                          onSortChange,
+                                          containerStyle: {
+                                            height: "calc(100vh - max(210px, 20vh) - 310px)",
+                                            minHeight: `calc(${DEFAULT_ROWS_PER_PAGE} * ${ROW_HEIGHT}px + ${TABLE_TAB_HEIGHT}px)`,
+                                            // at least 10 rows tall
+                                            maxHeight: "calc(100vh - max(210px, 20vh) - 310px)"
+                                          },
+                                          currentPage,
+                                          setCurrentPage
+                                        }
+                                      ) })
+                                    ]
+                                  }
+                                )
+                              ] })
+                            }
+                          )
                         }
                       )
                     ]
@@ -47468,10 +47596,10 @@ var SQLEditorComponent = ({
   loading,
   LoadingComponent = QuillLoadingComponent
 }) => {
-  const [editorKey, setEditorKey] = useState30(0);
+  const [editorKey, setEditorKey] = useState31(0);
   const { eventTracking } = useContext28(EventTrackingContext);
-  const currentProvider = useRef18(null);
-  useEffect24(() => {
+  const currentProvider = useRef19(null);
+  useEffect25(() => {
     if (currentProvider.current) {
       currentProvider.current.dispose();
       if (schema && schema.length !== 0) {
@@ -47712,7 +47840,7 @@ function SchemaItem({
   index,
   onClick
 }) {
-  const [isOpen, setIsOpen] = useState30(index === 0);
+  const [isOpen, setIsOpen] = useState31(index === 0);
   const schemaContainerStyle = {
     display: "flex",
     flexDirection: "column"
@@ -47941,14 +48069,14 @@ function SchemaItem({
 // src/ReportBuilder.tsx
 import {
   useContext as useContext32,
-  useEffect as useEffect28,
-  useRef as useRef20,
-  useState as useState36
+  useEffect as useEffect29,
+  useRef as useRef21,
+  useState as useState37
 } from "react";
 init_constants();
 
 // src/hooks/useReportBuilder.tsx
-import { useContext as useContext29, useEffect as useEffect25, useMemo as useMemo23, useState as useState31 } from "react";
+import { useContext as useContext29, useEffect as useEffect26, useMemo as useMemo23, useState as useState32 } from "react";
 init_tableProcessing();
 init_ReportBuilder();
 init_constants();
@@ -47999,18 +48127,18 @@ var useReportBuilderInternal = ({
     rowsPerPage: _rowsPerPage,
     rowsPerRequest: _rowsPerRequest
   };
-  const [openPopover, setOpenPopover] = useState31(null);
-  const [aiPrompt, setAiPrompt] = useState31("");
-  const [reportBuilderLoading, setReportBuilderLoading] = useState31(false);
-  const [tableLoading, setTableLoading] = useState31(false);
-  const [errorMessage, setErrorMessage] = useState31("");
-  const [unresolvedReportMessage, setUnresolvedReportMessage] = useState31("");
-  const [tables, setTables] = useState31([]);
-  const [columns, setColumns] = useState31([]);
-  const [filterStack, setFilterStack] = useState31([]);
-  const [pivot, setPivot] = useState31(null);
-  const [sort, setSort] = useState31([]);
-  const [limit, setLimit] = useState31(null);
+  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 reportBuilderState = useMemo23(() => {
     return {
       tables,
@@ -48021,28 +48149,28 @@ var useReportBuilderInternal = ({
       limit
     };
   }, [columns, filterStack, limit, pivot, sort, tables]);
-  const [stateStack, setStateStack] = useState31([]);
-  const [poppedStateStack, setPoppedStateStack] = useState31([]);
-  const [unfilteredUniqueValues, setUnfilteredUniqueValues] = useState31({});
-  const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = useState31(false);
-  const [filteredUniqueValues, setFilteredUniqueValues] = useState31(null);
-  const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = useState31(false);
-  const [columnUniqueValues, setColumnUniqueValues] = useState31({});
-  const [dateRanges, setDateRanges] = useState31(null);
-  const [tempReport, setTempReport] = useState31({
+  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({
     ...EMPTY_INTERNAL_REPORT,
     pagination: REPORT_BUILDER_PAGINATION
   });
-  const [currentProcessing, setCurrentProcessing] = useState31({
+  const [currentProcessing, setCurrentProcessing] = useState32({
     page: REPORT_BUILDER_PAGINATION
   });
-  const [previousPage, setPreviousPage] = useState31(0);
-  const [reportColumns, setReportColumns] = useState31([]);
-  const [reportRows, setReportRows] = useState31([]);
-  const [formattedRows, setFormattedRows] = useState31([]);
-  const [pivotData, setPivotData] = useState31(null);
-  const [numberOfRows, setNumberOfRows] = useState31(0);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState31(false);
+  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 reportColumnsToStateColumns = useMemo23(() => {
     const positionMap = {};
     columns.forEach((column, index) => {
@@ -48061,28 +48189,28 @@ var useReportBuilderInternal = ({
       }
     });
   }, [columns, reportColumns]);
-  const [pivotRowField, setPivotRowField] = useState31(
+  const [pivotRowField, setPivotRowField] = useState32(
     void 0
   );
-  const [pivotColumnField, setPivotColumnField] = useState31(
+  const [pivotColumnField, setPivotColumnField] = useState32(
     void 0
   );
-  const [pivotAggregations, setPivotAggregations] = useState31([]);
-  const [pivotLimit, setPivotLimit] = useState31(void 0);
-  const [pivotSort, setPivotSort] = useState31(void 0);
-  const [pivotHint, setPivotHint] = useState31("");
-  const [pivotError, setPivotError] = useState31("");
-  const [createdPivots, setCreatedPivots] = useState31([]);
-  const [recommendedPivots, setRecommendedPivots] = useState31([]);
-  const [pivotPopUpTitle, setPivotPopUpTitle] = useState31("Add pivot");
-  const [showPivotPopover, setShowPivotPopover] = useState31(false);
-  const [isEditingPivot, setIsEditingPivot] = useState31(false);
-  const [selectedPivotIndex, setSelectedPivotIndex] = useState31(-1);
+  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 [
     pivotRecommendationsEnabledState,
     setPivotRecommendationsEnabledState
-  ] = useState31(pivotRecommendationsEnabled);
-  const [askAILoading, setAskAILoading] = useState31(false);
+  ] = useState32(pivotRecommendationsEnabled);
+  const [askAILoading, setAskAILoading] = useState32(false);
   const loading = reportBuilderLoading || tableLoading;
   useLongLoading(reportBuilderLoading, {
     origin: "ReportBuilder",
@@ -49166,7 +49294,7 @@ var useReportBuilderInternal = ({
       flags: tempReport?.flags
     });
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (!client) {
       return;
     }
@@ -49179,7 +49307,7 @@ var useReportBuilderInternal = ({
       clearAllState();
     }
   }, [client]);
-  useEffect25(() => {
+  useEffect26(() => {
     const loadChart = async () => {
       let report;
       if (!client) {
@@ -49236,7 +49364,7 @@ var useReportBuilderInternal = ({
       loadChart();
     }
   }, [allReportsById[reportId || ""], client]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (initialTableName) {
       const tableColumns = filteredSchema.find((table) => {
         return table.name === initialTableName;
@@ -49256,7 +49384,7 @@ var useReportBuilderInternal = ({
       }
     }
   }, [filteredSchema, initialTableName]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!data && !dashboardIsLoading) {
       reload();
     }
@@ -49464,7 +49592,7 @@ var useReportBuilder = ({
 init_ReportBuilder();
 
 // src/components/ReportBuilder/AddColumnModal.tsx
-import { useState as useState32, useRef as useRef19, useMemo as useMemo24, useEffect as useEffect26, useContext as useContext30 } from "react";
+import { useState as useState33, useRef as useRef20, useMemo as useMemo24, useEffect as useEffect27, useContext as useContext30 } from "react";
 import {
   DndContext as DndContext2,
   closestCenter as closestCenter2,
@@ -49499,14 +49627,14 @@ function AddColumnModal({
   LoadingComponent = QuillLoadingComponent,
   onRequestAddVirtualTable
 }) {
-  const [primaryTable, setPrimaryTable] = useState32(
+  const [primaryTable, setPrimaryTable] = useState33(
     selectedTables[0]?.name
   );
   const [theme] = useContext30(ThemeContext);
-  const [search, setSearch] = useState32("");
-  const [initialLoad, setInitialLoad] = useState32(true);
-  const textInputContainerRef = useRef19(null);
-  const [modalSelectedColumns, setModalSelectedColumns] = useState32(
+  const [search, setSearch] = useState33("");
+  const [initialLoad, setInitialLoad] = useState33(true);
+  const textInputContainerRef = useRef20(null);
+  const [modalSelectedColumns, setModalSelectedColumns] = useState33(
     selectedColumns.map((col) => `${col.table}.${col.field}`)
   );
   const columnOptions = useMemo24(() => {
@@ -49533,20 +49661,20 @@ function AddColumnModal({
       })
     );
   }, [schema, primaryTable]);
-  const [orderedColumnNames, setOrderedColumnNames] = useState32([]);
+  const [orderedColumnNames, setOrderedColumnNames] = useState33([]);
   const isSelectedAllColumns = columnOptions.length === modalSelectedColumns.length;
   const searchResults = useMemo24(() => {
     return orderedColumnNames.filter((column) => {
       return columnOptions.includes(column) && (search.length === 0 || column.toLowerCase().includes(search.toLowerCase()) || snakeAndCamelCaseToTitleCase(column).toLowerCase().includes(search.toLowerCase()));
     });
   }, [search, columnOptions, orderedColumnNames]);
-  useEffect26(() => {
+  useEffect27(() => {
     const remainingColumns = columnOptions.filter(
       (col) => !modalSelectedColumns.includes(col)
     );
     setOrderedColumnNames([...modalSelectedColumns, ...remainingColumns]);
   }, [columnOptions]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!schemaLoading && initialLoad) {
       setTimeout(() => setInitialLoad(false), 200);
     }
@@ -50429,7 +50557,7 @@ var AddFilters = ({
 };
 
 // src/internals/ReportBuilder/PivotForm.tsx
-import { useContext as useContext31, useEffect as useEffect27, useState as useState33 } from "react";
+import { useContext as useContext31, useEffect as useEffect28, useState as useState34 } from "react";
 init_textProcessing();
 init_pivotProcessing();
 import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
@@ -50458,22 +50586,22 @@ function PivotForm({
   isLoading,
   pivotHint
 }) {
-  const [allowedColumnFields, setAllowedColumnFields] = useState33([]);
-  const [allowedRowFields, setAllowedRowFields] = useState33([]);
-  const [allowedValueFields, setAllowedValueFields] = useState33([]);
+  const [allowedColumnFields, setAllowedColumnFields] = useState34([]);
+  const [allowedRowFields, setAllowedRowFields] = useState34([]);
+  const [allowedValueFields, setAllowedValueFields] = useState34([]);
   const [theme] = useContext31(ThemeContext);
-  const [limitInput, setLimitInput] = useState33(
+  const [limitInput, setLimitInput] = useState34(
     pivotLimit?.toString() ?? ""
   );
-  const [sortFieldInput, setSortFieldInput] = useState33(
+  const [sortFieldInput, setSortFieldInput] = useState34(
     pivotSort?.sortField ?? ""
   );
-  const [sortDirectionInput, setSortDirectionInput] = useState33(
+  const [sortDirectionInput, setSortDirectionInput] = useState34(
     pivotSort?.sortDirection ?? ""
   );
-  const [showLimitInput, setShowLimitInput] = useState33(!!pivotLimit);
-  const [showSortInput, setShowSortInput] = useState33(!!pivotSort);
-  useEffect27(() => {
+  const [showLimitInput, setShowLimitInput] = useState34(!!pivotLimit);
+  const [showSortInput, setShowSortInput] = useState34(!!pivotSort);
+  useEffect28(() => {
     if (uniqueValues) {
       const possibleColumns = getPossiblePivotFieldOptions(
         columns,
@@ -50484,12 +50612,12 @@ function PivotForm({
       setAllowedValueFields(possibleColumns.valueFields);
     }
   }, [columns, uniqueValues]);
-  useEffect27(() => {
+  useEffect28(() => {
     setSortFieldInput(pivotSort?.sortField ?? "");
     setSortDirectionInput(pivotSort?.sortDirection ?? "");
     setShowSortInput(!!pivotSort);
   }, [pivotSort]);
-  useEffect27(() => {
+  useEffect28(() => {
     setLimitInput(pivotLimit?.toString() ?? "");
     setShowLimitInput(!!pivotLimit);
   }, [pivotLimit]);
@@ -51101,7 +51229,7 @@ var AddPivot = ({
 };
 
 // src/components/ReportBuilder/AddLimitPopover.tsx
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 import { Fragment as Fragment14, jsx as jsx75, jsxs as jsxs55 } from "react/jsx-runtime";
 var LimitSentence = ({
   limit,
@@ -51116,7 +51244,7 @@ var LimitSentence = ({
   SecondaryButton = MemoizedSecondaryButton,
   disabled = false
 }) => {
-  const [isOpen, setIsOpen] = useState34(false);
+  const [isOpen, setIsOpen] = useState35(false);
   const handleClickDelete = () => {
     setOpenPopover(null);
     handleDelete();
@@ -51158,7 +51286,7 @@ var AddLimitPopover = ({
   Button = MemoizedButton,
   SecondaryButton = MemoizedSecondaryButton
 }) => {
-  const [limit, setLimit] = useState34(initialLimit.toString());
+  const [limit, setLimit] = useState35(initialLimit.toString());
   const MAX_LIMIT = 2147483647;
   return /* @__PURE__ */ jsxs55("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
     /* @__PURE__ */ jsx75(
@@ -51399,7 +51527,7 @@ var AddLimit = ({
 };
 
 // src/components/ReportBuilder/AddSortPopover.tsx
-import { useState as useState35 } from "react";
+import { useState as useState36 } from "react";
 init_textProcessing();
 import { Fragment as Fragment15, jsx as jsx77, jsxs as jsxs57 } from "react/jsx-runtime";
 var SORT_VALUE_TO_LABEL = {
@@ -51423,7 +51551,7 @@ var SortSentence = ({
   SecondaryButton = MemoizedSecondaryButton,
   disabled = false
 }) => {
-  const [isOpen, setIsOpen] = useState35(false);
+  const [isOpen, setIsOpen] = useState36(false);
   const handleSetIsOpen = (isOpen2) => {
     setIsOpen(isOpen2);
   };
@@ -51475,8 +51603,8 @@ var AddSortPopover = ({
   Button = MemoizedButton,
   SecondaryButton = MemoizedSecondaryButton
 }) => {
-  const [sortColumn, setSortColumn] = useState35(column || "");
-  const [sortDirection, setSortDirection] = useState35(
+  const [sortColumn, setSortColumn] = useState36(column || "");
+  const [sortDirection, setSortDirection] = useState36(
     direction || "ASC"
   );
   return /* @__PURE__ */ jsxs57("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
@@ -51957,12 +52085,11 @@ function ReportBuilder({
   const [theme] = useContext32(ThemeContext);
   const [client] = useContext32(ClientContext);
   const { getToken } = useContext32(FetchContext);
-  const parentRef = useRef20(null);
-  const askAIContainerRef = useRef20(null);
-  const [askAIInputWidth, setAskAIInputWidth] = useState36(-1);
-  const [isCopying, setIsCopying] = useState36(false);
-  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState36(false);
-  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState36(false);
+  const parentRef = useRef21(null);
+  const askAIFormRef = useRef21(null);
+  const [isCopying, setIsCopying] = useState37(false);
+  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState37(false);
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState37(false);
   const reportBuilder = useReportBuilderInternal({
     reportId,
     initialTableName,
@@ -52002,6 +52129,12 @@ function ReportBuilder({
     onSaveQuery,
     onSaveReport
   } = reportBuilder;
+  const askAIInputWidth = useResponsiveFirstChildWidth_default(askAIFormRef, {
+    gap: 12,
+    initialWidth: 320,
+    minWidth: 160
+  });
+  const normalizedAskAIInputWidth = askAIInputWidth > 0 ? askAIInputWidth : 160;
   const copySQLToClipboard = async () => {
     let query = "";
     if (pivot && pivotData) {
@@ -52024,17 +52157,7 @@ function ReportBuilder({
       setTimeout(() => setIsCopying(false), 800);
     }
   };
-  useEffect28(() => {
-    function handleResize() {
-      updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
-    }
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  useEffect28(() => {
+  useEffect29(() => {
     if (isChartBuilderOpen === false) {
       onCloseChartBuilder && onCloseChartBuilder();
     }
@@ -52152,10 +52275,10 @@ function ReportBuilder({
                 /* @__PURE__ */ jsx81("div", { style: { width: "100%", minHeight: "30vh" } })
               ] }),
               /* @__PURE__ */ jsxs60(ContainerComponent, { children: [
-                isAIEnabled && /* @__PURE__ */ jsx81(
+                isAIEnabled && /* @__PURE__ */ jsxs60(
                   "form",
                   {
-                    ref: askAIContainerRef,
+                    ref: askAIFormRef,
                     onSubmit: (event) => {
                       event.preventDefault();
                     },
@@ -52163,15 +52286,17 @@ function ReportBuilder({
                       display: "flex",
                       flexDirection: "row",
                       gap: 12,
-                      visibility: askAIInputWidth === -1 ? "hidden" : "visible"
+                      flexWrap: "wrap",
+                      alignItems: "stretch",
+                      visibility: normalizedAskAIInputWidth > 0 ? "visible" : "hidden"
                     },
-                    children: /* @__PURE__ */ jsxs60(Fragment16, { children: [
+                    children: [
                       /* @__PURE__ */ jsx81(
                         TextInputComponent,
                         {
                           id: "ask_ai_input_bar",
                           value: aiPrompt,
-                          width: askAIInputWidth,
+                          width: normalizedAskAIInputWidth,
                           onChange: (e) => setAiPrompt(e.target.value),
                           placeholder: "Ask a question..."
                         }
@@ -52209,7 +52334,7 @@ function ReportBuilder({
                           disabled: columns.length === 0 || loading
                         }
                       )
-                    ] })
+                    ]
                   }
                 ),
                 columns.length > 0 && /* @__PURE__ */ jsx81(
@@ -52466,10 +52591,10 @@ function ReportBuilder({
 // src/ChartEditor.tsx
 import {
   useContext as useContext33,
-  useEffect as useEffect29,
+  useEffect as useEffect30,
   useMemo as useMemo26,
-  useRef as useRef21,
-  useState as useState37
+  useRef as useRef22,
+  useState as useState38
 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
 function ChartEditor({
@@ -52517,9 +52642,9 @@ function ChartEditor({
   onClickChartElement,
   onClickChartError
 }) {
-  const parentRef = useRef21(null);
-  const [modalWidth, setModalWidth] = useState37(200);
-  const [modalHeight, setModalHeight] = useState37(200);
+  const parentRef = useRef22(null);
+  const [modalWidth, setModalWidth] = useState38(200);
+  const [modalHeight, setModalHeight] = useState38(200);
   const { addReport } = useDashboardReports(destinationDashboard);
   const { allReportsById } = useAllReports();
   const { tenants, flags } = useContext33(TenantContext);
@@ -52537,15 +52662,15 @@ function ChartEditor({
       (f) => f.filter
     );
   }, [dashboardFilters]);
-  const [filtersEnabled, setFiltersEnabled] = useState37(true);
-  const [chartBuilderKey, setChartBuilderKey] = useState37(0);
+  const [filtersEnabled, setFiltersEnabled] = useState38(true);
+  const [chartBuilderKey, setChartBuilderKey] = useState38(0);
   const dateFilter = Object.values(specificDashboardFilters).find(
     (filter) => filter.filterType === "date_range"
   );
   const dateRange = useMemo26(() => {
     return dateFilter?.startDate ? { start: dateFilter.startDate, end: dateFilter.endDate } : void 0;
   }, [dateFilter]);
-  useEffect29(() => {
+  useEffect30(() => {
     function handleResize() {
       const screenSize = window.innerWidth;
       if (screenSize >= 1200) {
@@ -52593,7 +52718,7 @@ function ChartEditor({
     }
     addReport(report2);
   };
-  useEffect29(() => {
+  useEffect30(() => {
     if (!isClientLoading && !report) {
       fetchReportHelper();
     }
@@ -52741,7 +52866,7 @@ function StaticChart({
 init_valueFormatter();
 
 // src/hooks/useTenants.ts
-import { useContext as useContext34, useEffect as useEffect30 } from "react";
+import { useContext as useContext34, useEffect as useEffect31 } from "react";
 var useTenants = (dashboardName) => {
   const {
     tenants,
@@ -52755,12 +52880,12 @@ var useTenants = (dashboardName) => {
     getMappedTenantsForDashboard,
     getViewerTenantsByOwner
   } = useContext34(TenantContext);
-  useEffect30(() => {
+  useEffect31(() => {
     if (dashboardName) {
       fetchViewerTenantsForDashboard(dashboardName);
     }
   }, [dashboardName, fetchViewerTenantsForDashboard]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (dashboardName) {
       fetchMappedTenantsForDashboard(dashboardName);
     }
@@ -52779,7 +52904,7 @@ var useTenants = (dashboardName) => {
 };
 
 // src/hooks/useQuill.ts
-import { useContext as useContext35, useEffect as useEffect31, useMemo as useMemo27, useState as useState38 } from "react";
+import { useContext as useContext35, useEffect as useEffect32, useMemo as useMemo27, useState as useState39 } from "react";
 init_paginationProcessing();
 init_tableProcessing();
 init_dataProcessing();
@@ -52802,9 +52927,9 @@ var useQuill = (reportId, pagination) => {
   const [client, isClientLoading] = useContext35(ClientContext);
   const { tenants } = useContext35(TenantContext);
   const { eventTracking } = useContext35(EventTrackingContext);
-  const [loading, setLoading] = useState38(true);
-  const [error, setError] = useState38(void 0);
-  const [previousPage, setPreviousPage] = useState38(0);
+  const [loading, setLoading] = useState39(true);
+  const [error, setError] = useState39(void 0);
+  const [previousPage, setPreviousPage] = useState39(0);
   const processedReport = useMemo27(() => {
     return reportId && allReportsById[reportId] ? convertInternalReportToReport(
       mergeComparisonRange(allReportsById[reportId]),
@@ -52813,7 +52938,7 @@ var useQuill = (reportId, pagination) => {
       "useQuill"
     ) : void 0;
   }, [reportId, reportId && allReportsById[reportId], specificReportFilters]);
-  const [additionalProcessing, setAdditionProcessing] = useState38(
+  const [additionalProcessing, setAdditionProcessing] = useState39(
     pagination ? {
       page: pagination
     } : void 0
@@ -52962,7 +53087,7 @@ var useQuill = (reportId, pagination) => {
       setLoading(false);
     }
   };
-  useEffect31(() => {
+  useEffect32(() => {
     if (isClientLoading) return;
     if (reportId && specificReportFilters) {
       fetchReportHelper(reportId, {
@@ -53029,7 +53154,7 @@ var useMemoizedRows = (reportId) => {
 };
 
 // src/hooks/useAskQuill.tsx
-import { useContext as useContext36, useEffect as useEffect32, useState as useState39 } from "react";
+import { useContext as useContext36, useEffect as useEffect33, useState as useState40 } from "react";
 init_astProcessing();
 init_astFilterProcessing();
 init_pivotProcessing();
@@ -53062,8 +53187,8 @@ var useAskQuill = (dashboardName) => {
   const { tenants } = useContext36(TenantContext);
   const { getToken } = useContext36(FetchContext);
   const { eventTracking } = useContext36(EventTrackingContext);
-  const [astInfo, setAstInfo] = useState39(void 0);
-  const [data, setData] = useState39({
+  const [astInfo, setAstInfo] = useState40(void 0);
+  const [data, setData] = useState40({
     rows: [],
     columns: [],
     pivot: null,
@@ -53073,9 +53198,9 @@ var useAskQuill = (dashboardName) => {
     pivotColumnFields: [],
     pivotValueFields: []
   });
-  const [loading, setLoading] = useState39(false);
-  const [error, setError] = useState39(void 0);
-  const [ask, setAsk] = useState39(
+  const [loading, setLoading] = useState40(false);
+  const [error, setError] = useState40(void 0);
+  const [ask, setAsk] = useState40(
     async () => void 0
   );
   const askHelper = async (query) => {
@@ -53275,7 +53400,7 @@ var useAskQuill = (dashboardName) => {
     });
     setLoading(false);
   };
-  useEffect32(() => {
+  useEffect33(() => {
     setAsk(() => askHelper);
   }, [schemaData.schema]);
   return {
@@ -53289,13 +53414,13 @@ var useAskQuill = (dashboardName) => {
 };
 
 // src/hooks/useVirtualTables.tsx
-import { useContext as useContext37, useState as useState40 } from "react";
+import { useContext as useContext37, useState as useState41 } 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] = useState40({});
+  const [loadingTables, setLoadingTables] = useState41({});
   const handleReload = async (client, caller) => {
     setSchemaData({ ...schemaData, isSchemaLoading: true });
     setLoadingTables(