@bygd/nc-report-ui 0.1.35 → 0.1.37

package/dist/default/esm/index.js

@@ -1,31 +1,27 @@
 import * as React from 'react';
 import React__default, { useEffect, useMemo, useState, useRef, useContext, createContext } from 'react';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import { CircularProgress } from '@material-ui/core';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import { Chart as Chart$1 } from 'react-google-charts';
 import numeral from 'numeral';
 import axios from 'axios';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import nunjucks from 'nunjucks';
-import FormControl$2 from '@material-ui/core/FormControl';
-import Select$1 from '@material-ui/core/Select';
-import MenuItem$1 from '@material-ui/core/MenuItem';
+import FormControl$1 from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 import { useInView } from 'react-intersection-observer';
-import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText, Snackbar, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Box as Box$2, Typography as Typography$1, Tooltip as Tooltip$1, IconButton as IconButton$1, Paper as Paper$1, Tabs, Tab, Badge } from '@mui/material';
+import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText, Snackbar, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Box as Box$1, Typography as Typography$1, Tooltip as Tooltip$1, IconButton as IconButton$1, Paper as Paper$1, Tabs, Tab, Badge } from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import Box from '@mui/material/Box';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl$1 from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
 import EventEmitter from 'eventemitter3';
-import Grid from '@material-ui/core/Grid';
-import Box$1 from '@material-ui/core/Box';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import Container from '@material-ui/core/Container';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Container from '@mui/material/Container';
 import InsertChartOutlinedIcon from '@mui/icons-material/InsertChartOutlined';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
 import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
@@ -79,19 +75,16 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-const useStyles$1 = makeStyles(theme => ({
-  root: {
-    width: "100%",
-    "& > * + *": {
-      marginTop: theme.spacing(2)
-    }
-  }
-}));
 function LinearIndeterminate(props) {
-  const classes = useStyles$1();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classes.root
-  }, props), /*#__PURE__*/React__default.createElement(CircularProgress, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({}, props, {
+    sx: {
+      width: "100%",
+      "& > * + *": {
+        mt: 2
+      },
+      ...(props?.sx || {})
+    }
+  }), /*#__PURE__*/React__default.createElement(CircularProgress, {
     style: {
       color: "rgb(70, 134, 128)"
     } // custom color
@@ -469,55 +462,44 @@ const Api = {
   }
 };
 
-const useStyles = makeStyles(theme => ({
-  headerRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 13
-  },
-  headerCell: {
-    backgroundColor: "#ffffff !important",
-    padding: "12px 16px !important",
-    borderBottom: "1px solid #e5e7eb !important",
-    borderRight: "none !important",
-    fontWeight: "600 !important",
-    color: "#6b7280 !important",
-    textAlign: "left !important",
-    whiteSpace: "nowrap"
-  },
-  tableRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 14,
-    backgroundColor: "#ffffff",
-    "& a": {
-      color: "#468682",
-      textDecoration: "underline"
-    },
-    "& a:hover": {
-      color: "#305f5c"
-    }
-  },
-  oddTableRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 14,
-    backgroundColor: "#ffffff",
-    "& a": {
-      color: "#468682",
-      textDecoration: "underline"
-    },
-    "& a:hover": {
-      color: "#305f5c"
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
     }
-  },
-  hoverTableRow: {
-    backgroundColor: "#f9fafb !important"
-  },
-  tableCell: {
-    padding: "12px 16px !important",
-    borderBottom: "1px solid #f1f2f4 !important",
-    borderRight: "none !important",
-    color: "#1f2937"
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
   }
-}));
+}
+
+var css_248z = "/* Google Charts Table styling — class names here are referenced from\n * GoogleChart.js via the `cssClassNames` option and must stay in sync. */\n\n.ncGcHeaderRow {\n  font-size: 13px;\n}\n\n.ncGcHeaderCell {\n  background-color: #ffffff !important;\n  padding: 12px 16px !important;\n  border-bottom: 1px solid #e5e7eb !important;\n  border-right: none !important;\n  font-weight: 600 !important;\n  color: #6b7280 !important;\n  text-align: left !important;\n  white-space: nowrap;\n}\n\n.ncGcTableRow,\n.ncGcOddTableRow {\n  font-size: 14px;\n  background-color: #ffffff;\n}\n\n.ncGcTableRow a,\n.ncGcOddTableRow a {\n  color: #468682;\n  text-decoration: underline;\n}\n\n.ncGcTableRow a:hover,\n.ncGcOddTableRow a:hover {\n  color: #305f5c;\n}\n\n.ncGcHoverTableRow {\n  background-color: #f9fafb !important;\n}\n\n.ncGcTableCell {\n  padding: 12px 16px !important;\n  border-bottom: 1px solid #f1f2f4 !important;\n  border-right: none !important;\n  color: #1f2937;\n}\n";
+styleInject(css_248z);
+
+const tableClassNames = {
+  headerRow: "ncGcHeaderRow",
+  headerCell: "ncGcHeaderCell",
+  tableRow: "ncGcTableRow",
+  oddTableRow: "ncGcOddTableRow",
+  hoverTableRow: "ncGcHoverTableRow",
+  tableCell: "ncGcTableCell"
+};
 const dateRangeFormats = {
   none: "YYYY-MM-dd",
   day: "MMM dd",
@@ -536,7 +518,6 @@ function GoogleChart({
   params
 }) {
   const [data, setData] = React__default.useState([]);
-  const classes = useStyles();
   const [dateRanges, setDateRanges] = React__default.useState([]);
   useEffect(() => {
     (async () => {
@@ -558,7 +539,7 @@ function GoogleChart({
     if (chart?.doc.chart?.type === "Table") {
       return {
         ...chart?.doc.chart?.options,
-        cssClassNames: classes,
+        cssClassNames: tableClassNames,
         allowHtml: true
       };
     } else if (chart?.doc.chart?.type === "AreaChart") {
@@ -679,6 +660,7 @@ function LabelChart({
   view,
   report,
   schema,
+  onViewChange,
   onNavigate
 }) {
   const [data, setData] = React__default.useState([]);
@@ -705,7 +687,25 @@ function LabelChart({
     }
   }, [chart, source, view, report, schema]);
   const nextView = chart?.doc?.chart?.options?.nextView;
-  const canNavigate = typeof nextView === "number" && typeof onNavigate === "function";
+  const canChangeView = typeof nextView === "number" && typeof onViewChange === "function";
+  const navTarget = chart?.doc?.chart?.options?.onNavigate;
+  const canNavigate = !!navTarget?.url && typeof onNavigate === "function";
+  const handleNavigate = () => {
+    let ctx;
+    if (navTarget?.ctx != null) {
+      if (typeof navTarget.ctx === "string") {
+        try {
+          ctx = JSON.parse(navTarget.ctx);
+        } catch (e) {
+          console.warn("LabelChart onNavigate: failed to parse ctx as JSON", e);
+          ctx = navTarget.ctx;
+        }
+      } else {
+        ctx = navTarget.ctx;
+      }
+    }
+    onNavigate(navTarget.url, ctx);
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: "flex",
@@ -723,15 +723,26 @@ function LabelChart({
     }
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h6"
-  }, value?.f || value), canNavigate && /*#__PURE__*/React__default.createElement(Link, {
+  }, value?.f || value), canChangeView && /*#__PURE__*/React__default.createElement(Link, {
     component: "button",
     variant: "h6",
-    onClick: () => onNavigate(nextView),
+    onClick: () => onViewChange(nextView),
     style: {
       lineHeight: 1,
       fontSize: "2rem"
     }
-  }, "\xBB")), /*#__PURE__*/React__default.createElement(Typography, {
+  }, "\xBB"), canNavigate && /*#__PURE__*/React__default.createElement(Link, {
+    component: "button",
+    onClick: handleNavigate,
+    style: {
+      lineHeight: 1,
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    "aria-label": "navigate"
+  }, /*#__PURE__*/React__default.createElement(OpenInNewIcon, {
+    fontSize: "small"
+  }))), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "caption"
   }, subText));
 }
@@ -1295,6 +1306,7 @@ var Chart = ({
       dashboard: dashboard,
       query: currentQuery,
       params: props.params,
+      onViewChange: props.onViewChange,
       onNavigate: props.onNavigate
     }));
   };
@@ -1456,7 +1468,10 @@ var Chart = ({
     style: {
       flexGrow: 1
     }
-  }), /*#__PURE__*/React__default.createElement("div", null, chart?.doc?.view?.length > 1 && /*#__PURE__*/React__default.createElement(FormControl$2, null, /*#__PURE__*/React__default.createElement(Select$1, {
+  }), /*#__PURE__*/React__default.createElement("div", null, chart?.doc?.view?.length > 1 && /*#__PURE__*/React__default.createElement(FormControl$1, {
+    variant: "standard"
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    variant: "standard",
     labelId: "date-range-select-label",
     id: "date-range-select",
     value: activeViewIndex,
@@ -1465,7 +1480,7 @@ var Chart = ({
       fontSize: "12px"
     },
     disableUnderline: true
-  }, chart.doc.view.map((item, index) => /*#__PURE__*/React__default.createElement(MenuItem$1, {
+  }, chart.doc.view.map((item, index) => /*#__PURE__*/React__default.createElement(MenuItem, {
     key: index,
     value: index
   }, item.title)))))), /*#__PURE__*/React__default.createElement("div", {
@@ -1588,14 +1603,15 @@ function ColumnItem({
   cache,
   dashboard,
   schema,
-  params
+  params,
+  onNavigate
 }) {
   const views = Array.isArray(column.views) ? column.views : null;
   const [activeIndex, setActiveIndex] = React__default.useState(0);
   if (views && views.length > 0) {
     const safeIndex = Math.min(activeIndex, views.length - 1);
     const active = views[safeIndex];
-    const toolbar = /*#__PURE__*/React__default.createElement(Box$1, {
+    const toolbar = /*#__PURE__*/React__default.createElement(Box, {
       display: "flex"
     }, views.map((v, i) => {
       const Icon = resolveViewIcon(v.icon);
@@ -1616,9 +1632,10 @@ function ColumnItem({
       })));
     }));
     return /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 12,
-      md: md
+      size: {
+        xs: 12,
+        md
+      }
     }, /*#__PURE__*/React__default.createElement(Chart, {
       api: api,
       cache: cache,
@@ -1629,15 +1646,17 @@ function ColumnItem({
       filter: active.filter,
       params: params,
       headerActions: toolbar,
-      onNavigate: i => {
+      onViewChange: i => {
         if (typeof i === "number" && i >= 0 && i < views.length) setActiveIndex(i);
-      }
+      },
+      onNavigate: onNavigate
     }));
   }
   return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    md: md
+    size: {
+      xs: 12,
+      md
+    }
   }, /*#__PURE__*/React__default.createElement(Chart, {
     api: api,
     cache: cache,
@@ -1646,13 +1665,15 @@ function ColumnItem({
     schema: schema,
     title: column.title,
     filter: column.filter,
-    params: params
+    params: params,
+    onNavigate: onNavigate
   }));
 }
 function Dashboard({
   id,
   api,
-  params
+  params,
+  onNavigate
 }) {
   const dashboardId = id || "dynamic_dashboard";
   const reportingContext = useReportingContextOptional();
@@ -1770,8 +1791,9 @@ function Dashboard({
       /*#__PURE__*/
       // Row 2 is special: nested grid inside a full-width container
       React__default.createElement(Grid, {
-        item: true,
-        xs: 12
+        size: {
+          xs: 12
+        }
       }, /*#__PURE__*/React__default.createElement(Grid, {
         container: true,
         spacing: 3
@@ -1783,7 +1805,8 @@ function Dashboard({
         cache: cache.current,
         dashboard: dashboard,
         schema: schema,
-        params: finalParams
+        params: finalParams,
+        onNavigate: onNavigate
       })))) :
       // All other rows behave normally
       row.columns.map((column, i) => /*#__PURE__*/React__default.createElement(ColumnItem, {
@@ -1794,7 +1817,8 @@ function Dashboard({
         cache: cache.current,
         dashboard: dashboard,
         schema: schema,
-        params: finalParams
+        params: finalParams,
+        onNavigate: onNavigate
       })));
     })))
   );
@@ -2063,7 +2087,7 @@ const ReportDefinitionsList = ({
     disableColumnMenu: true,
     renderCell: params => {
       const isUserOverride = params.row.source === "user-override";
-      return /*#__PURE__*/React__default.createElement(Box$2, {
+      return /*#__PURE__*/React__default.createElement(Box$1, {
         sx: {
           display: "flex",
           gap: 1
@@ -2120,7 +2144,7 @@ const ReportDefinitionsList = ({
     onSelectReport(params.row.id);
   };
   if (loading) {
-    return /*#__PURE__*/React__default.createElement(Box$2, {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -2128,7 +2152,7 @@ const ReportDefinitionsList = ({
     }, /*#__PURE__*/React__default.createElement(CircularProgress$1, null));
   }
   if (error) {
-    return /*#__PURE__*/React__default.createElement(Box$2, {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
@@ -2143,14 +2167,14 @@ const ReportDefinitionsList = ({
       onClick: loadReportDefinitions
     }, "Retry"));
   }
-  return /*#__PURE__*/React__default.createElement(Box$2, {
+  return /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       p: 3,
       display: "flex",
       flexDirection: "column",
       fontFamily: "system-ui"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -2170,7 +2194,7 @@ const ReportDefinitionsList = ({
     },
     startIcon: /*#__PURE__*/React__default.createElement(AddIcon, null),
     onClick: onAddNew
-  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       flex: 1,
       width: "100%",
@@ -2412,11 +2436,11 @@ const ProviderSelection = ({
     }
     return dropdowns;
   };
-  return /*#__PURE__*/React__default.createElement(Box$2, null, selectionChain.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
+  return /*#__PURE__*/React__default.createElement(Box$1, null, selectionChain.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       marginBottom: 2
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -2599,7 +2623,7 @@ const SortableChip$1 = ({
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: setNodeRef,
     style: style
-  }, attributes), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
     ref: containerRef,
     sx: {
       display: "flex",
@@ -2616,7 +2640,7 @@ const SortableChip$1 = ({
         opacity: 1 // show icons on hover
       }
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, _extends({}, listeners, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -2630,7 +2654,7 @@ const SortableChip$1 = ({
       cursor: "grab",
       color: "rgba(110, 110, 110, 0.62)"
     }
-  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       minWidth: 0
     }
@@ -2649,7 +2673,7 @@ const SortableChip$1 = ({
       overflow: "hidden",
       textOverflow: "ellipsis"
     }
-  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -2689,11 +2713,11 @@ const SortableChip$1 = ({
     }
   }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$2, {
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       flex: 1
     }
-  }), /*#__PURE__*/React__default.createElement(Box$2, {
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -2725,7 +2749,7 @@ const SortableChip$1 = ({
       minWidth: '200px',
       maxWidth: '400px'
     }
-  }), /*#__PURE__*/React__default.createElement(Box$2, {
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -2764,7 +2788,7 @@ const SortableChip$1 = ({
     "aria-label": "reset title"
   }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$2, {
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       flex: 1
     }
@@ -3019,7 +3043,7 @@ const Dimensions = ({
     }
     return pathParts.join(" → ");
   };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$2, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-start",
@@ -3061,7 +3085,7 @@ const Dimensions = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       mb: 3
     }
@@ -3079,7 +3103,7 @@ const Dimensions = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -3115,7 +3139,7 @@ const Dimensions = ({
         opacity: 0.5
       }
     }
-  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -3158,7 +3182,7 @@ const Dimensions = ({
         boxShadow: "none"
       }
     }
-  }, "Save Dimension"))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Save Dimension"))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       marginTop: 0
     }
@@ -3183,7 +3207,7 @@ const Dimensions = ({
   }, /*#__PURE__*/React__default.createElement(SortableContext, {
     items: savedDimensions.map((_, index) => index),
     strategy: verticalListSortingStrategy
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       flexDirection: "column",
@@ -3351,7 +3375,7 @@ const SortableChip = ({
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: setNodeRef,
     style: style
-  }, attributes), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
     ref: containerRef,
     sx: {
       display: "flex",
@@ -3368,7 +3392,7 @@ const SortableChip = ({
         opacity: 1 // show icons on hover
       }
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, _extends({}, listeners, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -3382,7 +3406,7 @@ const SortableChip = ({
       cursor: "grab",
       color: "rgba(110, 110, 110, 0.62)"
     }
-  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source && /*#__PURE__*/React__default.createElement(Box$2, {
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: 'flex',
       alignItems: 'center',
@@ -3390,7 +3414,7 @@ const SortableChip = ({
     }
   }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
     source: source
-  })), /*#__PURE__*/React__default.createElement(Box$2, {
+  })), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       minWidth: 0
     }
@@ -3409,7 +3433,7 @@ const SortableChip = ({
       overflow: "hidden",
       textOverflow: "ellipsis"
     }
-  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -3440,11 +3464,11 @@ const SortableChip = ({
     }
   }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$2, {
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       flex: 1
     }
-  }), /*#__PURE__*/React__default.createElement(Box$2, {
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -3476,7 +3500,7 @@ const SortableChip = ({
       minWidth: '200px',
       maxWidth: '400px'
     }
-  }), /*#__PURE__*/React__default.createElement(Box$2, {
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -3515,7 +3539,7 @@ const SortableChip = ({
     "aria-label": "reset title"
   }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$2, {
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       flex: 1
     }
@@ -3756,7 +3780,7 @@ const Metrics = ({
     }
     return pathParts.join(' → ');
   };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$2, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-start",
@@ -3798,7 +3822,7 @@ const Metrics = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       mb: 3
     }
@@ -3816,7 +3840,7 @@ const Metrics = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: 'flex',
       alignItems: 'center',
@@ -3852,7 +3876,7 @@ const Metrics = ({
         opacity: 0.5
       }
     }
-  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -3895,7 +3919,7 @@ const Metrics = ({
         boxShadow: "none"
       }
     }
-  }, "Save Metric"))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Save Metric"))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       marginTop: 0
     }
@@ -3914,7 +3938,7 @@ const Metrics = ({
   }, /*#__PURE__*/React__default.createElement(SortableContext, {
     items: savedMetrics.map((_, index) => index),
     strategy: verticalListSortingStrategy
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: 'flex',
       flexDirection: 'column',
@@ -4535,7 +4559,7 @@ const Filters = ({
 
   // Convert savedFilters object to array for display
   const filterEntries = Object.entries(savedFilters);
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$2, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-start",
@@ -4598,7 +4622,7 @@ const Filters = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       mb: 3
     }
@@ -4616,7 +4640,7 @@ const Filters = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       mb: 3
     }
@@ -4643,7 +4667,7 @@ const Filters = ({
       }
     }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
       dateAdapter: AdapterDayjs
-    }, /*#__PURE__*/React__default.createElement(Box$2, {
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: 'flex',
         gap: 2,
@@ -4675,7 +4699,7 @@ const Filters = ({
           clearable: true
         }
       }
-    }))) : /*#__PURE__*/React__default.createElement(Box$2, {
+    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         width: '400px'
       }
@@ -4692,7 +4716,7 @@ const Filters = ({
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
     })));
-  })(), /*#__PURE__*/React__default.createElement(Box$2, {
+  })(), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -4760,7 +4784,7 @@ const Filters = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Dimension from Report"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Select Dimension from Report"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       mb: 3
     }
@@ -4789,7 +4813,7 @@ const Filters = ({
       }
     }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
       dateAdapter: AdapterDayjs
-    }, /*#__PURE__*/React__default.createElement(Box$2, {
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: 'flex',
         gap: 2,
@@ -4821,7 +4845,7 @@ const Filters = ({
           clearable: true
         }
       }
-    }))) : /*#__PURE__*/React__default.createElement(Box$2, {
+    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         width: '400px'
       }
@@ -4838,7 +4862,7 @@ const Filters = ({
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
     })));
-  })(), /*#__PURE__*/React__default.createElement(Box$2, {
+  })(), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -4887,7 +4911,7 @@ const Filters = ({
         boxShadow: "none"
       }
     }
-  }, "Save Filter"))), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Save Filter"))), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       marginTop: 0
     }
@@ -4899,7 +4923,7 @@ const Filters = ({
       marginBottom: 1,
       color: "rgb(37, 37, 37)"
     }
-  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: 'flex',
       flexDirection: 'column',
@@ -4932,9 +4956,9 @@ const Filters = ({
     // Use filter title override if exists, otherwise use dimension title override, otherwise use default dimension title
     const displayLabel = titleOverrides[fullPath] || dimensionTitleOverrides[fullPath] || filter.dimensionTitle;
     const hasCustomTitle = !!titleOverrides[fullPath];
-    return /*#__PURE__*/React__default.createElement(Box$2, {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
       key: fullPath
-    }, /*#__PURE__*/React__default.createElement(Box$2, {
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: "flex",
         alignItems: "center",
@@ -4950,7 +4974,7 @@ const Filters = ({
           opacity: 1
         }
       }
-    }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
+    }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: 'flex',
         alignItems: 'center',
@@ -4966,7 +4990,7 @@ const Filters = ({
         color: "#1a1a1a",
         fontSize: "14px"
       }
-    }, displayLabel), /*#__PURE__*/React__default.createElement(Box$2, {
+    }, displayLabel), /*#__PURE__*/React__default.createElement(Box$1, {
       className: "hover-icons",
       sx: {
         display: "flex",
@@ -5025,7 +5049,7 @@ const Filters = ({
       sx: {
         flex: 1
       }
-    }), /*#__PURE__*/React__default.createElement(Box$2, {
+    }), /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: "flex",
         gap: 0.5
@@ -5074,7 +5098,7 @@ const Filters = ({
       }
     }, "Edit ", isDate ? 'Date Range' : 'Values', " for: ", dimensionTitleOverrides[fullPath] || filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
       dateAdapter: AdapterDayjs
-    }, /*#__PURE__*/React__default.createElement(Box$2, {
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: 'flex',
         gap: 2,
@@ -5107,7 +5131,7 @@ const Filters = ({
           clearable: true
         }
       }
-    }))) : /*#__PURE__*/React__default.createElement(Box$2, {
+    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         width: '400px',
         marginBottom: 2
@@ -5124,7 +5148,7 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
-    })), /*#__PURE__*/React__default.createElement(Box$2, {
+    })), /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: 'flex',
         gap: 1,
@@ -5261,7 +5285,7 @@ const ReportDataGrid = ({
         flex: 1,
         minWidth: 150,
         type: metricDef?.type === 'integer' || metricDef?.type === 'currency' ? 'number' : 'string',
-        renderHeader: () => /*#__PURE__*/React__default.createElement(Box$2, {
+        renderHeader: () => /*#__PURE__*/React__default.createElement(Box$1, {
           sx: {
             display: 'flex',
             alignItems: 'center',
@@ -5316,7 +5340,7 @@ const ReportDataGrid = ({
     }
   };
   if (loading) {
-    return /*#__PURE__*/React__default.createElement(Box$2, {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -5324,7 +5348,7 @@ const ReportDataGrid = ({
     }, /*#__PURE__*/React__default.createElement(CircularProgress$1, null));
   }
   if (!reportData || reportData.length === 0) {
-    return /*#__PURE__*/React__default.createElement(Box$2, {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -5334,7 +5358,7 @@ const ReportDataGrid = ({
       color: "textSecondary"
     }, "No data available. Run a report to see results."));
   }
-  return /*#__PURE__*/React__default.createElement(Box$2, {
+  return /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       height: 600,
       width: '100%'
@@ -5372,7 +5396,7 @@ function TabPanel({
     hidden: value !== index,
     id: `report-tabpanel-${index}`,
     "aria-labelledby": `report-tab-${index}`
-  }, value === index && /*#__PURE__*/React__default.createElement(Box$2, {
+  }, value === index && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       py: 3
     }
@@ -6229,12 +6253,12 @@ const ReportBuilder = ({
     }
   };
   const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0);
-  return /*#__PURE__*/React__default.createElement(Box$2, {
+  return /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       p: 3,
       fontFamily: "system-ui"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       justifyContent: "space-between",
@@ -6247,7 +6271,7 @@ const ReportBuilder = ({
     variant: "outlined",
     startIcon: /*#__PURE__*/React__default.createElement(ArrowBackIcon, null),
     onClick: onBackToList
-  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$2, {
+  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       mt: 2,
       p: 3,
@@ -6260,7 +6284,7 @@ const ReportBuilder = ({
       gap: 3,
       boxShadow: "0px 2px 4px rgba(0,0,0,0.02)"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       gap: 4,
@@ -6303,7 +6327,7 @@ const ReportBuilder = ({
       fontFamily: "system-ui"
     },
     disabled: !!reportDefinitionId
-  }))), /*#__PURE__*/React__default.createElement(Box$2, {
+  }))), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: "flex",
       gap: 2,
@@ -6371,7 +6395,7 @@ const ReportBuilder = ({
         backgroundColor: "rgba(46, 125, 50, 0.04)"
       }
     }
-  }, saving ? "Saving..." : reportDefinitionId ? "Update Report" : "Save Report"))), selectedProvider && /*#__PURE__*/React__default.createElement(Box$2, {
+  }, saving ? "Saving..." : reportDefinitionId ? "Update Report" : "Save Report"))), selectedProvider && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       mt: 2,
       fontFamily: "system-ui",
@@ -6380,7 +6404,7 @@ const ReportBuilder = ({
       py: 2,
       borderRadius: "8px"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       borderBottom: 1,
       borderColor: "rgba(70, 134, 127, 0.27)"