@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: `calc(${height}px / 2)`,\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAOhD,OAAO,SAASC,WAAW,EAAEC,KAAI,EAAEC,OAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,IAAI;YACFC,SAAS;YACTC,UAAUH;YACVI,UAAU;YACVC,KAAK,CAAC,KAAK,EAAEL,OAAO,OAAO,CAAC;YAC5BM,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACZ;YACCa,SAAQ;YACRC,cAAW;YACXV,IAAI;gBACFW,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAECf;;;AAIT"}
+{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: `calc(${height}px / 2)`,\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAOhD,OAAO,SAASC,WAAW,EAAEC,IAAI,EAAEC,MAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,IAAI;YACFC,SAAS;YACTC,UAAUH;YACVI,UAAU;YACVC,KAAK,CAAC,KAAK,EAAEL,OAAO,OAAO,CAAC;YAC5BM,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACZ;YACCa,SAAQ;YACRC,cAAW;YACXV,IAAI;gBACFW,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAECf;;;AAIT"}

package/dist/cjs/BarChart/BarChart.js

@@ -42,9 +42,9 @@ const _utils = require("../utils");
 const BAR_WIN_WIDTH = 14;
 const BAR_GAP = 6;
 function BarChart(props) {
-    const { width , height , data , format ={
+    const { width, height, data, format = {
         unit: 'decimal'
-    } , mode ='value'  } = props;
+    }, mode = 'value' } = props;
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const option = (0, _react.useMemo)(()=>{
         if (data == null || !data.length) return chartsTheme.noDataOption;

package/dist/cjs/ColorPicker/ColorPicker.js

@@ -51,7 +51,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -69,7 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ColorPicker = ({ color , onChange , palette  })=>{
+const ColorPicker = ({ color, onChange, palette })=>{
     // value is the visible value for the controlled text input
     const [value, setValue] = (0, _react.useState)(color);
     const handleColorChange = (color)=>{

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -31,9 +31,9 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function ContentWithLegend({ children , legendProps , width , height , spacing =0 , legendSize , minChildrenWidth =100 , minChildrenHeight =100  }) {
+function ContentWithLegend({ children, legendProps, width, height, spacing = 0, legendSize, minChildrenWidth = 100, minChildrenHeight = 100 }) {
     const theme = (0, _material.useTheme)();
-    const { content , legend , margin  } = (0, _contentwithlegendmodel.getContentWithLegendLayout)({
+    const { content, legend, margin } = (0, _contentwithlegendmodel.getContentWithLegendLayout)({
         width,
         height,
         legendProps,

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -47,7 +47,7 @@ const TABLE_LEGEND_SIZE = {
 const PANEL_HEIGHT_LG_BREAKPOINT = 300;
 const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
-function getContentWithLegendLayout({ width , height , legendProps , legendSize , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+function getContentWithLegendLayout({ width, height, legendProps, legendSize, minChildrenHeight, minChildrenWidth, spacing, theme }) {
     const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
@@ -68,7 +68,7 @@ function getContentWithLegendLayout({ width , height , legendProps , legendSize
     if (!hasLegend) {
         return noLegendLayout;
     }
-    const { position  } = legendOptions;
+    const { position } = legendOptions;
     const mode = (0, _core.getLegendMode)(legendOptions.mode);
     let legendWidth;
     let legendHeight;

package/dist/cjs/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -28,8 +28,8 @@ const _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
 const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
-    const { formatWithUserTimeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel })=>{
+    const { formatWithUserTimeZone } = (0, _TimeZoneProvider.useTimeZone)();
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not

package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js

@@ -27,7 +27,7 @@ const _core = require("@perses-dev/core");
 const _AbsoluteTimePicker = require("./AbsoluteTimePicker");
 const _TimeRangeSelector = require("./TimeRangeSelector");
 function DateTimeRangePicker(props) {
-    const { value , onChange , timeOptions , height  } = props;
+    const { value, onChange, timeOptions, height } = props;
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
     const anchorEl = (0, _react.useRef)();
     const convertedTimeRange = (0, _react.useMemo)(()=>{

package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js

@@ -33,8 +33,8 @@ function _interop_require_default(obj) {
 }
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 function TimeRangeSelector(props) {
-    const { value , timeOptions , onSelectChange , onCustomClick , height  } = props;
-    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+    const { value, timeOptions, onSelectChange, onCustomClick, height } = props;
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
     const formattedValue = !(0, _core.isRelativeTimeRange)(value) ? (0, _utils.formatAbsoluteRange)(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
         value: formattedValue,

package/dist/cjs/DateTimeRangePicker/utils.js

@@ -21,11 +21,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    validateDateRange: function() {
-        return validateDateRange;
-    },
     formatAbsoluteRange: function() {
         return formatAbsoluteRange;
+    },
+    validateDateRange: function() {
+        return validateDateRange;
     }
 });
 const _datefns = require("date-fns");

package/dist/cjs/Dialog/Dialog.js

@@ -30,7 +30,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const Header = ({ children , onClose , ...props })=>{
+const Header = ({ children, onClose, ...props })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
@@ -46,7 +46,7 @@ const Header = ({ children , onClose , ...props })=>{
         ]
     });
 };
-const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
+const Content = ({ children, width = 500, sx, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
         dividers: true,
         ...props,
         sx: (0, _utils.combineSx)({
@@ -54,13 +54,13 @@ const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ (0, _
         }, sx),
         children: children
     });
-const PrimaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+const PrimaryButton = ({ children, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
         variant: "contained",
         type: "submit",
         ...props,
         children: children
     });
-const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+const SecondaryButton = ({ children, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
         variant: "outlined",
         color: "secondary",
         ...props,
@@ -86,7 +86,7 @@ const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxruntime
         right: theme.spacing(0.5)
     };
 };
-const Dialog = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Dialog, {
+const Dialog = ({ children, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Dialog, {
         ...props,
         children: children
     });

package/dist/cjs/Dialog/DiscardChangesConfirmationDialog.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _Dialog = require("./Dialog");
 const DiscardChangesConfirmationDialog = (props)=>{
-    const { description , isOpen , onCancel , onDiscardChanges  } = props;
+    const { description, isOpen, onCancel, onDiscardChanges } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Dialog.Dialog, {
         open: isOpen,
         "aria-labelledby": "discard-dialog",

package/dist/cjs/Drawer/Drawer.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 const DRAWER_DEFAULT_WIDTH = 1080;
-const Drawer = ({ anchor ='right' , isOpen , onClose , PaperProps , children , ...rest })=>{
+const Drawer = ({ anchor = 'right', isOpen, onClose, PaperProps, children, ...rest })=>{
     const isSmaller = (0, _material.useMediaQuery)(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Drawer, {
         ...rest,

package/dist/cjs/EChart/EChart.js

@@ -52,7 +52,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -86,7 +88,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , syncGroup , onChartInitialized  }) {
+const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized }) {
     const initialOption = (0, _react.useRef)(option);
     const prevOption = (0, _react.useRef)(option);
     const containerRef = (0, _react.useRef)(null);

package/dist/cjs/ErrorAlert.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "ErrorAlert", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 function ErrorAlert(props) {
-    const { error  } = props;
+    const { error } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
         severity: "error",
         children: error.message

package/dist/cjs/FontSizeSelector/FontSizeSelector.js

@@ -115,8 +115,8 @@ const FONT_SIZE_OPTIONS = [
         value: 192
     }
 ];
-function FontSizeSelector({ value , onChange  }) {
-    const handleFontSizeChange = (_, { value  })=>{
+function FontSizeSelector({ value, onChange }) {
+    const handleFontSizeChange = (_, { value })=>{
         onChange(value);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {

package/dist/cjs/FormatControls/FormatControls.js

@@ -66,7 +66,7 @@ const DECIMAL_PLACES_OPTIONS = [
 function getOptionByDecimalPlaces(decimalPlaces) {
     return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimalPlaces === decimalPlaces);
 }
-function FormatControls({ value , onChange , disabled =false  }) {
+function FormatControls({ value, onChange, disabled = false }) {
     const hasDecimalPlaces = (0, _core.isUnitWithDecimalPlaces)(value);
     const hasShortValues = (0, _core.isUnitWithShortValues)(value);
     const handleKindChange = (_, newValue)=>{
@@ -74,7 +74,7 @@ function FormatControls({ value , onChange , disabled =false  }) {
             unit: newValue.id
         });
     };
-    const handleDecimalPlacesChange = (_, { decimalPlaces  })=>{
+    const handleDecimalPlacesChange = (_, { decimalPlaces })=>{
         if (hasDecimalPlaces) {
             onChange({
                 ...value,

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -47,7 +47,7 @@ const PROGRESS_WIDTH = 16;
 // adjusts when to show pointer icon
 const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChart(props) {
-    const { width , height , data , format , axisLine , max  } = props;
+    const { width, height, data, format, axisLine, max } = props;
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -28,7 +28,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
+const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
     // Wrap children in a span to cover the following use cases:
     //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.
     //  - Non-element tooltip children (e.g. text). The tooltip needs something that
@@ -51,7 +51,7 @@ const InfoTooltip = ({ id , title , description , placement , children , enterDe
         children: wrappedChildren
     });
 };
-const TooltipContent = ({ title , description  })=>{
+const TooltipContent = ({ title, description })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -72,12 +72,12 @@ const TooltipContent = ({ title , description  })=>{
         ]
     });
 };
-const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+const StyledTooltip = (0, _material.styled)(({ className, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
         ...props,
         classes: {
             popper: className
         }
-    }))(({ theme  })=>({
+    }))(({ theme })=>({
         [`& .${_material.tooltipClasses.tooltip}`]: {
             backgroundColor: theme.palette.background.tooltip,
             color: theme.palette.text.primary,

package/dist/cjs/Legend/CompactLegend.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _ListLegendItem = require("./ListLegendItem");
 const _legendmodel = require("./legend-model");
-function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
+function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         component: "ul",
         sx: {

package/dist/cjs/Legend/Legend.js

@@ -33,7 +33,7 @@ const _TableLegend = require("./TableLegend");
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
+function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{

package/dist/cjs/Legend/LegendColorBadge.js

@@ -29,7 +29,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color , sx , ...others }) {
+const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color, sx, ...others }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         sx: (0, _utils.combineSx)({

package/dist/cjs/Legend/ListLegend.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _reactvirtuoso = require("react-virtuoso");
 const _ListLegendItem = require("./ListLegendItem");
 const _legendmodel = require("./legend-model");
-function ListLegend({ items , height , width , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
+function ListLegend({ items, height, width, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {

package/dist/cjs/Legend/ListLegendItem.js

@@ -46,7 +46,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -64,7 +66,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
     function handleTextMouseOver() {
         if (truncateLabel) {
@@ -92,18 +94,14 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         dense: true,
         key: item.id,
         onClick: handleClick,
-        onMouseOver: (e)=>{
-            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+        onMouseOver: (e)=>onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
                 id: item.id,
                 index
-            });
-        },
-        onMouseOut: (e)=>{
-            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+            }),
+        onMouseOut: (e)=>onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
                 id: item.id,
                 index
-            });
-        },
+            }),
         selected: isVisuallySelected,
         ref: ref,
         children: [

package/dist/cjs/Legend/TableLegend.js

@@ -31,7 +31,7 @@ const COLUMNS = [
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
-        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        cell: ({ getValue })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                 title: getValue(),
                 children: getValue()
             })
@@ -43,7 +43,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
+function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns = [], sorting, onSortingChange }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.

package/dist/cjs/LineChart/LineChart.js

@@ -45,18 +45,18 @@ const _utils = require("../utils");
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , format , grid , legend , tooltipConfig =_TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     var _option_tooltip;
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
-    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     (0, _react.useImperativeHandle)(ref, ()=>{
         return {
-            highlightSeries ({ id  }) {
+            highlightSeries ({ id }) {
                 if (!chartRef.current) {
                     // when chart undef, do not highlight series when hovering over legend
                     return;
@@ -110,7 +110,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const { noDataOption  } = chartsTheme;
+    const { noDataOption } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
@@ -202,7 +202,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             }
         },
         onMouseDown: (e)=>{
-            const { clientX  } = e;
+            const { clientX } = e;
             setIsDragging(true);
             setStartX(clientX);
         },
@@ -211,7 +211,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             if (!(e.target instanceof HTMLCanvasElement)) {
                 return;
             }
-            const { clientX  } = e;
+            const { clientX } = e;
             if (isDragging) {
                 const deltaX = clientX - startX;
                 if (deltaX > 0) {

package/dist/cjs/ModeSelector/ModeSelector.js

@@ -33,8 +33,8 @@ const MODE_OPTIONS = [
         label: 'Percentage'
     }
 ];
-function ModeSelector({ disablePercentageMode , onChange , value ='value'  }) {
-    const handleModeChange = (_, { id  })=>{
+function ModeSelector({ disablePercentageMode, onChange, value = 'value' }) {
+    const handleModeChange = (_, { id })=>{
         onChange(id);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "OptionsEditorColumn", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const OptionsEditorColumn = ({ children  })=>{
+const OptionsEditorColumn = ({ children })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
         item: true,
         xs: 4,

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -31,7 +31,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const OptionsEditorControl = ({ label , control , description  })=>{
+const OptionsEditorControl = ({ label, control, description })=>{
     // Make sure we have a unique ID we can use for associating labels and
     // controls for a11y.
     const generatedControlId = (0, _utils.useId)('EditorSectionControl');

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "OptionsEditorGrid", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const OptionsEditorGrid = ({ children  })=>{
+const OptionsEditorGrid = ({ children })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
         container: true,
         spacing: 8,

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -28,7 +28,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const OptionsEditorGroup = ({ title , children , icon  })=>{
+const OptionsEditorGroup = ({ title, children, icon })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {

package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 function RefreshIntervalPicker(props) {
-    const { value , onChange , timeOptions , height  } = props;
+    const { value, onChange, timeOptions, height } = props;
     const formattedValue = value;
     // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
     const customInterval = (0, _react.useMemo)(()=>{

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -22,9 +22,9 @@ Object.defineProperty(exports, "SettingsAutocomplete", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
         ...params
-    }) , ...otherProps }) {
+    }), ...otherProps }) {
     const getOptionLabel = (option)=>{
         var _option_label;
         return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;

package/dist/cjs/SortSelector/SortSelector.js

@@ -33,8 +33,8 @@ const SORT_OPTIONS = [
         label: 'Descending'
     }
 ];
-function SortSelector({ onChange , value ='desc'  }) {
-    const handleSortChange = (_, { id  })=>{
+function SortSelector({ onChange, value = 'desc' }) {
+    const handleSortChange = (_, { id })=>{
         onChange(id);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {

package/dist/cjs/StatChart/StatChart.js

@@ -51,7 +51,7 @@ const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
 function StatChart(props) {
     var _data_seriesData, _data_seriesData1;
-    const { width , height , data , format , color , sparkline , showSeriesName , valueFontSize  } = props;
+    const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     let formattedValue = '';
     if (data.calculatedValue === null) {
@@ -185,7 +185,7 @@ function StatChart(props) {
 }
 const SeriesName = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
-})(({ theme , padding , fontSize  })=>({
+})(({ theme, padding, fontSize })=>({
         color: theme.palette.text.secondary,
         padding: `${padding}px`,
         fontSize: `${fontSize}px`,
@@ -195,7 +195,7 @@ const SeriesName = (0, _material.styled)(_material.Typography, {
     }));
 const Value = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
-})(({ theme , color , padding , fontSize , sparkline  })=>({
+})(({ theme, color, padding, fontSize, sparkline })=>({
         color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,

package/dist/cjs/StatChart/calculateFontSize.js

@@ -31,9 +31,9 @@ function getGlobalCanvasContext() {
     }
     return canvasContext;
 }
-function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
+function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride }) {
     const ctx = getGlobalCanvasContext();
-    const { echartsTheme  } = (0, _ChartsProvider.useChartsTheme)();
+    const { echartsTheme } = (0, _ChartsProvider.useChartsTheme)();
     // if user has selected a font size in the settings, use it instead of calculating the optimal size
     if (fontSizeOverride !== undefined) {
         return Number(fontSizeOverride);

package/dist/cjs/Table/InnerTable.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "InnerTable", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
-const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme  })=>({
+const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme })=>({
         // This value is needed to have a consistent table layout when scrolling.
         tableLayout: 'fixed',
         borderCollapse: 'separate',
@@ -33,7 +33,7 @@ const TABLE_DENSITY_CONFIG = {
     compact: 'small',
     standard: 'medium'
 };
-const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , ...otherProps }, ref) {
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density, ...otherProps }, ref) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTable, {
         ...otherProps,
         tabIndex: -1,