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

package/dist/cjs/Table/Table.js

@@ -35,7 +35,7 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , onSortingChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection =DEFAULT_ROW_SELECTION , sorting =DEFAULT_SORTING , rowSelectionVariant ='standard' , ...otherProps }) {
+function Table({ data, columns, density = 'standard', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
@@ -77,7 +77,7 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
         return {
             id: 'checkboxRowSelect',
             size: 28,
-            header: ({ table  })=>{
+            header: ({ table })=>{
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
                     checked: table.getIsAllRowsSelected(),
                     indeterminate: table.getIsSomeRowsSelected(),
@@ -86,7 +86,7 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
                     density: density
                 });
             },
-            cell: ({ row , table  })=>{
+            cell: ({ row, table })=>{
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
                     checked: row.getIsSelected(),
                     indeterminate: row.getIsSomeSelected(),

package/dist/cjs/Table/TableCell.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _tablemodel = require("./model/table-model");
-const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
         padding: 0,
         backgroundColor: 'inherit',
         '&.MuiTableCell-head': {
@@ -39,7 +39,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
             borderRadius: 0
         }
     }));
-function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , description , ...otherProps }) {
+function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';

package/dist/cjs/Table/TableCheckbox.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "TableCheckbox", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function TableCheckbox({ color , density , ...otherProps }) {
+function TableCheckbox({ color, density, ...otherProps }) {
     const isCompact = density === 'compact';
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
         size: isCompact ? 'small' : 'medium',

package/dist/cjs/Table/TableHeaderCell.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "TableHeaderCell", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _TableCell = require("./TableCell");
-function TableHeaderCell({ onSort , sortDirection , nextSortDirection , children , ...cellProps }) {
+function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }) {
     const showSortLabel = !!onSort;
     const headerText = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         noWrap: true,

package/dist/cjs/Table/VirtualizedTable.js

@@ -33,7 +33,7 @@ const _TableHeaderCell = require("./TableHeaderCell");
 const _TableCell = require("./TableCell");
 const _VirtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
+function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -71,7 +71,7 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
             },
             TableHead: _TableHead.TableHead,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            TableRow: ({ item , ...props })=>{
+            TableRow: ({ item, ...props })=>{
                 const index = props['data-index'];
                 const row = rows[index];
                 if (!row) {

package/dist/cjs/Table/hooks/useTableKeyboardNav.js

@@ -34,7 +34,7 @@ const ARROW_KEYS = [
 function isArrowKey(key) {
     return ARROW_KEYS.includes(key);
 }
-function useTableKeyboardNav({ maxRows , maxColumns , onActiveCellChange  }) {
+function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
     const [activeCell, setActiveCell] = (0, _react.useState)(DEFAULT_ACTIVE_CELL);
     const [isActive, setIsActive] = (0, _react.useState)(false);
     const handleCellFocus = (cellPosition)=>{

package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "useVirtualizedTableKeyboardNav", {
     }
 });
 const _useTableKeyboardNav = require("./useTableKeyboardNav");
-function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns }) {
     const baseKeyboard = (0, _useTableKeyboardNav.useTableKeyboardNav)({
         maxRows,
         maxColumns,

package/dist/cjs/Table/model/table-model.js

@@ -35,7 +35,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
     const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
     return lineHeightNum + verticalPaddingNum * 2;
 }
-function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } = {}) {
+function getTableCellLayout(theme, density, { isLastColumn, isFirstColumn } = {}) {
     if (density === 'compact') {
         const paddingY = theme.spacing(0.5);
         const basePaddingX = theme.spacing(0.5);
@@ -65,7 +65,7 @@ function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } =
     };
 }
 function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
+    const tableCols = columns.map(({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.

package/dist/cjs/ThresholdsEditor/ThresholdColorPicker.js

@@ -31,7 +31,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function ThresholdColorPicker({ color , onColorChange , label  }) {
+function ThresholdColorPicker({ color, onColorChange, label }) {
     const [anchorEl, setAnchorEl] = _react.default.useState(null);
     const isOpen = Boolean(anchorEl);
     const openColorPicker = (event)=>{
@@ -40,7 +40,7 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
     const closeColorPicker = ()=>{
         setAnchorEl(null);
     };
-    const { thresholds: { defaultColor , palette  }  } = (0, _ChartsProvider.useChartsTheme)();
+    const { thresholds: { defaultColor, palette } } = (0, _ChartsProvider.useChartsTheme)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(ColorIconButton, {
@@ -83,7 +83,7 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
 }
 const ColorIconButton = (0, _material.styled)(_material.IconButton, {
     shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
-})(({ iconColor , isSelected  })=>({
+})(({ iconColor, isSelected })=>({
         backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
         color: iconColor
     }));

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -30,7 +30,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
+function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
     const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         flex: 1,

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -57,7 +57,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)) {
@@ -76,9 +78,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const DEFAULT_STEP = 10;
-function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
+function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
-    const { thresholds: { defaultColor , palette  }  } = chartsTheme;
+    const { thresholds: { defaultColor, palette } } = chartsTheme;
     var _thresholds_defaultColor;
     const defaultThresholdColor = (_thresholds_defaultColor = thresholds === null || thresholds === void 0 ? void 0 : thresholds.defaultColor) !== null && _thresholds_defaultColor !== void 0 ? _thresholds_defaultColor : defaultColor;
     const [steps, setSteps] = (0, _react.useState)(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
@@ -203,7 +205,7 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
             });
         }
     };
-    var _thresholds_mode, _step_color, _ref;
+    var _thresholds_mode;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_OptionsEditorLayout.OptionsEditorGroup, {
         title: "Thresholds",
         icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
@@ -248,8 +250,9 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                     ]
                 })
             }),
-            steps && steps.map((step, i)=>{
-                /*#__PURE__*/ return (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
+            steps && steps.map((step, i)=>/*#__PURE__*/ {
+                var _step_color, _ref;
+                return (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
                     inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
                     label: `T${i + 1}`,
                     color: (_ref = (_step_color = step.color) !== null && _step_color !== void 0 ? _step_color : palette[i]) !== null && _ref !== void 0 ? _ref : defaultThresholdColor,

package/dist/cjs/TimeChart/TimeChart.js

@@ -56,9 +56,9 @@ function _interop_require_default(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , format , grid , isStackedBar =false , tooltipConfig =_TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     var _option_tooltip;
-    const { chartsTheme , enablePinning , lastTooltipPinnedCoords , setLastTooltipPinnedCoords  } = (0, _ChartsProvider.useChartsContext)();
+    const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _ChartsProvider.useChartsContext)();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -66,7 +66,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
     const [pinnedCrosshair, setPinnedCrosshair] = (0, _react.useState)(null);
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
-    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = (0, _core.getCommonTimeScale)(data);
@@ -91,7 +91,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
     }
     (0, _react.useImperativeHandle)(ref, ()=>{
         return {
-            highlightSeries ({ name  }) {
+            highlightSeries ({ name }) {
                 if (!chartRef.current) {
                     // when chart undef, do not highlight series when hovering over legend
                     return;
@@ -140,7 +140,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         onDataZoom,
         setTooltipPinnedCoords
     ]);
-    const { noDataOption  } = chartsTheme;
+    const { noDataOption } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
@@ -329,7 +329,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             }
         },
         onMouseDown: (e)=>{
-            const { clientX  } = e;
+            const { clientX } = e;
             setIsDragging(true);
             setStartX(clientX);
         },
@@ -338,7 +338,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ 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/TimeSeriesTooltip/LineChartTooltip.js

@@ -34,10 +34,10 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , enablePinning =true , wrapLabels , format , onUnpinClick , pinnedPos , containerId  }) {
+const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef, chartData, enablePinning = true, wrapLabels, format, onUnpinClick, pinnedPos, containerId }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipmodel.useMousePosition)();
-    const { height , width , ref: tooltipRef  } = (0, _useresizeobserver.default)();
+    const { height, width, ref: tooltipRef } = (0, _useresizeobserver.default)();
     const transform = (0, _react.useRef)();
     const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null) return null;
@@ -65,13 +65,13 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     if (!isTooltipPinned) {
         transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0, containerElement);
     }
-    var _theme_palette_designSystem_grey_;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Portal, {
         container: containerElement,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             ref: tooltipRef,
             sx: (theme)=>{
                 var _theme_palette_designSystem;
+                var _theme_palette_designSystem_grey_;
                 return {
                     minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -26,7 +26,7 @@ const _SeriesMarker = require("./SeriesMarker");
 const _SeriesLabelsStack = require("./SeriesLabelsStack");
 const _tooltipmodel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , wrapLabels =true  } = props;
+    const { seriesName, formattedY, markerColor, totalSeries, emphasizeText = false, wrapLabels = true } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}

package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _SeriesMarker = require("./SeriesMarker");
 function SeriesLabelsStack(props) {
-    const { formattedY , markerColor , metricName , metricLabels  } = props;
+    const { formattedY, markerColor, metricName, metricLabels } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 0.5,
         children: [

package/dist/cjs/TimeSeriesTooltip/SeriesMarker.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 function SeriesMarker(props) {
-    const { markerColor , sx  } = props;
+    const { markerColor, sx } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: (0, _utils.combineSx)({
             display: 'inline-block',

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -34,11 +34,11 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , enablePinning =true , wrapLabels , format , onUnpinClick , pinnedPos  }) {
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, onUnpinClick, pinnedPos }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const transform = (0, _react.useRef)();
     const mousePos = (0, _tooltipmodel.useMousePosition)();
-    const { height , width , ref: tooltipRef  } = (0, _useresizeobserver.default)();
+    const { height, width, ref: tooltipRef } = (0, _useresizeobserver.default)();
     const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null || data === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -25,7 +25,7 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _SeriesInfo = require("./SeriesInfo");
 function TooltipContent(props) {
-    const { series , wrapLabels  } = props;
+    const { series, wrapLabels } = props;
     const sortedFocusedSeries = (0, _react.useMemo)(()=>{
         if (series === null) return null;
         return series.sort((a, b)=>a.y > b.y ? -1 : 1);
@@ -41,7 +41,7 @@ function TooltipContent(props) {
                 display: 'table',
                 padding: theme.spacing(0.5, 2)
             }),
-        children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
+        children: sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor })=>{
             if (datumIdx === null || seriesIdx === null) return null;
             const key = seriesIdx.toString() + datumIdx.toString();
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesInfo.SeriesInfo, {

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -32,7 +32,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , enablePinning =true , onShowAllClick , onUnpinClick  }) {
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning = true, onShowAllClick, onUnpinClick }) {
     var _nearbySeries_;
     var _nearbySeries__date;
     const seriesTimeMs = (_nearbySeries__date = (_nearbySeries_ = nearbySeries[0]) === null || _nearbySeries_ === void 0 ? void 0 : _nearbySeries_.date) !== null && _nearbySeries__date !== void 0 ? _nearbySeries__date : null;
@@ -64,10 +64,10 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
     // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
     const showAllSeriesToggle = enablePinning && totalSeries > 5;
     const pinTooltipHelpText = isTooltipPinned ? _tooltipmodel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipmodel.PIN_TOOLTIP_HELP_TEXT;
-    var _theme_palette_designSystem_grey_;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: (theme)=>{
             var _theme_palette_designSystem;
+            var _theme_palette_designSystem_grey_;
             return {
                 width: '100%',
                 maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,

package/dist/cjs/TimeSeriesTooltip/nearby-series.js

@@ -21,32 +21,32 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    INCREASE_NEARBY_SERIES_MULTIPLIER: function() {
-        return INCREASE_NEARBY_SERIES_MULTIPLIER;
-    },
     DYNAMIC_NEARBY_SERIES_MULTIPLIER: function() {
         return DYNAMIC_NEARBY_SERIES_MULTIPLIER;
     },
+    INCREASE_NEARBY_SERIES_MULTIPLIER: function() {
+        return INCREASE_NEARBY_SERIES_MULTIPLIER;
+    },
     SHOW_FEWER_SERIES_LIMIT: function() {
         return SHOW_FEWER_SERIES_LIMIT;
     },
     checkforNearbyTimeSeries: function() {
         return checkforNearbyTimeSeries;
     },
-    legacyCheckforNearbySeries: function() {
-        return legacyCheckforNearbySeries;
-    },
     getNearbySeriesData: function() {
         return getNearbySeriesData;
     },
-    legacyGetNearbySeriesData: function() {
-        return legacyGetNearbySeriesData;
+    getYBuffer: function() {
+        return getYBuffer;
     },
     isWithinPercentageRange: function() {
         return isWithinPercentageRange;
     },
-    getYBuffer: function() {
-        return getYBuffer;
+    legacyCheckforNearbySeries: function() {
+        return legacyCheckforNearbySeries;
+    },
+    legacyGetNearbySeriesData: function() {
+        return legacyGetNearbySeriesData;
     }
 });
 const _core = require("@perses-dev/core");
@@ -260,7 +260,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
     }
     return currentNearbySeriesData;
 }
-function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , chart , format , showAllSeries =false  }) {
+function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart, format, showAllSeries = false }) {
     if (chart === undefined || mousePos === null) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -299,7 +299,7 @@ function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , cha
     // no nearby series found
     return _tooltipmodel.EMPTY_TOOLTIP_DATA;
 }
-function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart , format , showAllSeries =false  }) {
+function legacyGetNearbySeriesData({ mousePos, pinnedPos, chartData, chart, format, showAllSeries = false }) {
     if (chart === undefined || mousePos === null) return [];
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -343,13 +343,13 @@ function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart ,
     }
     return [];
 }
-function isWithinPercentageRange({ valueToCheck , baseValue , percentage  }) {
+function isWithinPercentageRange({ valueToCheck, baseValue, percentage }) {
     const range = percentage / 100 * baseValue;
     const lowerBound = baseValue - range;
     const upperBound = baseValue + range;
     return valueToCheck >= lowerBound && valueToCheck <= upperBound;
 }
-function getYBuffer({ yInterval , totalSeries , showAllSeries =false  }) {
+function getYBuffer({ yInterval, totalSeries, showAllSeries = false }) {
     if (showAllSeries) {
         return yInterval * 10; // roughly correlates with grid so entire canvas is searched
     }

package/dist/cjs/TimeSeriesTooltip/tooltip-model.js

@@ -21,23 +21,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TOOLTIP_MIN_WIDTH: function() {
-        return TOOLTIP_MIN_WIDTH;
-    },
-    TOOLTIP_MAX_WIDTH: function() {
-        return TOOLTIP_MAX_WIDTH;
-    },
-    TOOLTIP_MAX_HEIGHT: function() {
-        return TOOLTIP_MAX_HEIGHT;
-    },
-    TOOLTIP_LABELS_MAX_WIDTH: function() {
-        return TOOLTIP_LABELS_MAX_WIDTH;
+    DEFAULT_TOOLTIP_CONFIG: function() {
+        return DEFAULT_TOOLTIP_CONFIG;
     },
-    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: function() {
-        return TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+    EMPHASIZED_SERIES_DESCRIPTION: function() {
+        return EMPHASIZED_SERIES_DESCRIPTION;
     },
-    TOOLTIP_PADDING: function() {
-        return TOOLTIP_PADDING;
+    EMPTY_TOOLTIP_DATA: function() {
+        return EMPTY_TOOLTIP_DATA;
     },
     FALLBACK_CHART_WIDTH: function() {
         return FALLBACK_CHART_WIDTH;
@@ -45,8 +36,11 @@ _export(exports, {
     NEARBY_SERIES_DESCRIPTION: function() {
         return NEARBY_SERIES_DESCRIPTION;
     },
-    EMPHASIZED_SERIES_DESCRIPTION: function() {
-        return EMPHASIZED_SERIES_DESCRIPTION;
+    PIN_TOOLTIP_HELP_TEXT: function() {
+        return PIN_TOOLTIP_HELP_TEXT;
+    },
+    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: function() {
+        return TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
     },
     TOOLTIP_BG_COLOR_FALLBACK: function() {
         return TOOLTIP_BG_COLOR_FALLBACK;
@@ -54,23 +48,29 @@ _export(exports, {
     TOOLTIP_DATE_FORMAT: function() {
         return TOOLTIP_DATE_FORMAT;
     },
-    defaultCursorData: function() {
-        return defaultCursorData;
+    TOOLTIP_LABELS_MAX_WIDTH: function() {
+        return TOOLTIP_LABELS_MAX_WIDTH;
     },
-    EMPTY_TOOLTIP_DATA: function() {
-        return EMPTY_TOOLTIP_DATA;
+    TOOLTIP_MAX_HEIGHT: function() {
+        return TOOLTIP_MAX_HEIGHT;
     },
-    useMousePosition: function() {
-        return useMousePosition;
+    TOOLTIP_MAX_WIDTH: function() {
+        return TOOLTIP_MAX_WIDTH;
     },
-    DEFAULT_TOOLTIP_CONFIG: function() {
-        return DEFAULT_TOOLTIP_CONFIG;
+    TOOLTIP_MIN_WIDTH: function() {
+        return TOOLTIP_MIN_WIDTH;
     },
-    PIN_TOOLTIP_HELP_TEXT: function() {
-        return PIN_TOOLTIP_HELP_TEXT;
+    TOOLTIP_PADDING: function() {
+        return TOOLTIP_PADDING;
     },
     UNPIN_TOOLTIP_HELP_TEXT: function() {
         return UNPIN_TOOLTIP_HELP_TEXT;
+    },
+    defaultCursorData: function() {
+        return defaultCursorData;
+    },
+    useMousePosition: function() {
+        return useMousePosition;
     }
 });
 const _react = require("react");

package/dist/cjs/ToolbarIconButton/ToolbarIconButton.js

@@ -0,0 +1,40 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolbarIconButton", {
+    enumerable: true,
+    get: function() {
+        return ToolbarIconButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function IconButton(props, ref) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledIconButton, {
+        ref: ref,
+        variant: "outlined",
+        color: "secondary",
+        ...props
+    });
+}
+const StyledIconButton = (0, _material.styled)(_material.Button)(({ theme })=>({
+        // Using a button with some adjusted styles because it is easier to inherit
+        // styling and variants from themes than with an IconButton.
+        padding: theme.spacing(0.5),
+        minWidth: 'auto'
+    }));
+const ToolbarIconButton = /*#__PURE__*/ (0, _react.forwardRef)(IconButton);

package/dist/cjs/ToolbarIconButton/index.js

@@ -0,0 +1,30 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./ToolbarIconButton"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/YAxisLabel.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "YAxisLabel", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function YAxisLabel({ name , height  }) {
+function YAxisLabel({ name, height }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             display: 'inline-block',