@perses-dev/components 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

package/dist/cjs/LineChart/LineChart.js

@@ -16,19 +16,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "LineChart", {
     enumerable: true,
-    get: ()=>LineChart
+    get: function() {
+        return LineChart;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _echart = require("../EChart");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _timeSeriesTooltip = require("../TimeSeriesTooltip");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _EChart = require("../EChart");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _TimeSeriesTooltip = require("../TimeSeriesTooltip");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("../utils");
 (0, _core.use)([
     _charts.LineChart,
@@ -43,15 +45,13 @@ const _utils = require("../utils");
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
-    var ref1;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+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, ()=>{
@@ -71,12 +71,10 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     // when chart undef, do not clear highlight series
                     return;
                 }
-                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+                (0, _utils.clearHighlightedSeries)(chartRef.current);
             }
         };
-    }, [
-        data.timeSeries.length
-    ]);
+    }, []);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
@@ -87,10 +85,10 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
-                var _startValue;
-                const startIndex = (_startValue = params.batch[0].startValue) !== null && _startValue !== void 0 ? _startValue : 0;
-                var _endValue;
-                const endIndex = (_endValue = params.batch[0].endValue) !== null && _endValue !== void 0 ? _endValue : data.xAxis.length - 1;
+                var _params_batch__startValue;
+                const startIndex = (_params_batch__startValue = params.batch[0].startValue) !== null && _params_batch__startValue !== void 0 ? _params_batch__startValue : 0;
+                var _params_batch__endValue;
+                const endIndex = (_params_batch__endValue = params.batch[0].endValue) !== null && _params_batch__endValue !== void 0 ? _params_batch__endValue : data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -118,8 +116,8 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
         if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
-        var _rangeMs;
-        const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
+        var _data_rangeMs;
+        const rangeMs = (_data_rangeMs = data.rangeMs) !== null && _data_rangeMs !== void 0 ? _data_rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -132,7 +130,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }
                 }
             },
-            yAxis: (0, _utils.getYAxes)(yAxis, unit),
+            yAxis: (0, _utils.getFormattedAxis)(yAxis, format),
             animation: false,
             tooltip: {
                 show: true,
@@ -165,7 +163,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
     }, [
         data,
         yAxis,
-        unit,
+        format,
         grid,
         legend,
         noDataOption,
@@ -173,13 +171,13 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         __experimentalEChartsOptionsOverride,
         noDataVariant
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             height
         },
         onClick: (e)=>{
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -232,7 +230,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                 setShowTooltip(false);
             }
             if (chartRef.current !== undefined) {
-                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+                (0, _utils.clearHighlightedSeries)(chartRef.current);
             }
         },
         onMouseEnter: ()=>{
@@ -253,18 +251,19 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             }
         },
         children: [
-            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.LineChartTooltip, {
+            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
-                unit: unit,
+                format: format,
                 onUnpinClick: ()=>{
                     setTooltipPinnedCoords(null);
                 },
                 containerId: chartsTheme.tooltipPortalContainerId
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
                 sx: {
                     width: '100%',
                     height: '100%'

package/dist/cjs/LineChart/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./LineChart"), exports);
-function _exportStar(from, to) {
+_export_star(require("./LineChart"), 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];
-            }
-        });
+        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/ModeSelector/ModeSelector.js

@@ -16,11 +16,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ModeSelector", {
     enumerable: true,
-    get: ()=>ModeSelector
+    get: function() {
+        return ModeSelector;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _optionsEditorLayout = require("../OptionsEditorLayout");
-const _settingsAutocomplete = require("../SettingsAutocomplete");
+const _jsxruntime = require("react/jsx-runtime");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
 const MODE_OPTIONS = [
     {
         id: 'value',
@@ -35,9 +37,9 @@ function ModeSelector({ disablePercentageMode , onChange , value ='value'  }) {
     const handleModeChange = (_, { id  })=>{
         onChange(id);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
         label: "Mode",
-        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
             value: MODE_OPTIONS.find((o)=>o.id === value),
             options: MODE_OPTIONS,
             getOptionLabel: (o)=>o.label,

package/dist/cjs/ModeSelector/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./ModeSelector"), exports);
-function _exportStar(from, to) {
+_export_star(require("./ModeSelector"), 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];
-            }
-        });
+        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/OptionsEditorLayout/OptionsEditorColumn.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "OptionsEditorColumn", {
     enumerable: true,
-    get: ()=>OptionsEditorColumn
+    get: function() {
+        return OptionsEditorColumn;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const OptionsEditorColumn = ({ children  })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
         item: true,
         xs: 4,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
             spacing: 3,
             children: children
         })

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "OptionsEditorControl", {
     enumerable: true,
-    get: ()=>OptionsEditorControl
+    get: function() {
+        return OptionsEditorControl;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
 const _utils = require("../utils");
-const _infoTooltip = require("../InfoTooltip");
-function _interopRequireDefault(obj) {
+const _InfoTooltip = require("../InfoTooltip");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -37,32 +39,32 @@ const OptionsEditorControl = ({ label , control , description  })=>{
     const controlProps = {
         id: controlId
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             direction: "row",
             alignItems: "center",
             justifyContent: "space-between",
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                     direction: "row",
                     alignItems: "center",
                     justifyContent: "center",
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormLabel, {
                             htmlFor: controlId,
                             children: label
                         }),
-                        description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+                        description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
                             description: description,
                             enterDelay: 100,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 size: "small",
                                 sx: (theme)=>({
                                         borderRadius: theme.shape.borderRadius,
                                         padding: '4x',
                                         margin: '0 2px'
                                     }),
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
                                     "aria-describedby": "info-tooltip",
                                     "aria-hidden": false,
                                     fontSize: "inherit",
@@ -74,7 +76,7 @@ const OptionsEditorControl = ({ label , control , description  })=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                     sx: {
                         width: '180px',
                         textAlign: 'right'

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -16,12 +16,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "OptionsEditorGrid", {
     enumerable: true,
-    get: ()=>OptionsEditorGrid
+    get: function() {
+        return OptionsEditorGrid;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const OptionsEditorGrid = ({ children  })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
         container: true,
         spacing: 8,
         children: children

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -16,31 +16,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "OptionsEditorGroup", {
     enumerable: true,
-    get: ()=>OptionsEditorGroup
+    get: function() {
+        return OptionsEditorGroup;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) {
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const OptionsEditorGroup = ({ title , children , icon  })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 display: "flex",
                 borderBottom: 1,
                 borderColor: "grey.300",
                 marginBottom: (theme)=>theme.spacing(1),
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                         variant: "overline",
                         component: "h4",
                         children: title
                     }),
-                    icon && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: {
                             marginLeft: 'auto'
                         },
@@ -48,7 +50,7 @@ const OptionsEditorGroup = ({ title , children , icon  })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 spacing: 1,
                 children: children
             })

package/dist/cjs/OptionsEditorLayout/index.js

@@ -14,18 +14,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./OptionsEditorColumn"), exports);
-_exportStar(require("./OptionsEditorControl"), exports);
-_exportStar(require("./OptionsEditorGrid"), exports);
-_exportStar(require("./OptionsEditorGroup"), exports);
-function _exportStar(from, to) {
+_export_star(require("./OptionsEditorColumn"), exports);
+_export_star(require("./OptionsEditorControl"), exports);
+_export_star(require("./OptionsEditorGrid"), exports);
+_export_star(require("./OptionsEditorGroup"), 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];
-            }
-        });
+        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/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -16,16 +16,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "RefreshIntervalPicker", {
     enumerable: true,
-    get: ()=>RefreshIntervalPicker
+    get: function() {
+        return RefreshIntervalPicker;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+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 formattedValue = value;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+    // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
+    const customInterval = (0, _react.useMemo)(()=>{
+        if (value && !timeOptions.some((option)=>option.value.pastDuration === value)) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                value: value,
+                children: value
+            });
+        }
+    }, [
+        timeOptions,
+        value
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
                 id: "refreshInterval",
                 value: formattedValue,
                 onChange: (event)=>{
@@ -41,10 +56,13 @@ function RefreshIntervalPicker(props) {
                         paddingY: 0
                     } : {}
                 },
-                children: timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                        value: item.value.pastDuration,
-                        children: item.display
-                    }, idx))
+                children: [
+                    timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: item.value.pastDuration,
+                            children: item.display
+                        }, idx)),
+                    customInterval
+                ]
             })
         })
     });

package/dist/cjs/RefreshIntervalPicker/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./RefreshIntervalPicker"), exports);
-function _exportStar(from, to) {
+_export_star(require("./RefreshIntervalPicker"), 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];
-            }
-        });
+        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/SettingsAutocomplete/SettingsAutocomplete.js

@@ -16,38 +16,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "SettingsAutocomplete", {
     enumerable: true,
-    get: ()=>SettingsAutocomplete
+    get: function() {
+        return SettingsAutocomplete;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+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 }) {
     const getOptionLabel = (option)=>{
-        var _label;
-        return (_label = option.label) !== null && _label !== void 0 ? _label : option.id;
+        var _option_label;
+        return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;
     };
     // Note: this component currently is not virtualized because it is specific
     // to being used for settings, which generally have a pretty small list of
     // options. If this changes to include values with many options, virtualization
     // should be added using react-virtuoso.
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
         isOptionEqualToValue: (option, value)=>option.id === value.id,
         getOptionDisabled: (option)=>!!option.disabled,
         getOptionLabel: getOptionLabel,
         options: options,
         renderInput: renderInput,
         renderOption: (props, option)=>{
-            return /*#__PURE__*/ (0, _jsxRuntime.jsx)("li", {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
                 ...props,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "body1",
                             component: "div",
                             children: getOptionLabel(option)
                         }),
-                        option.description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        option.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "body2",
                             component: "div",
                             color: (theme)=>theme.palette.text.secondary,

package/dist/cjs/SettingsAutocomplete/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./SettingsAutocomplete"), exports);
-function _exportStar(from, to) {
+_export_star(require("./SettingsAutocomplete"), 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];
-            }
-        });
+        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/SortSelector/SortSelector.js

@@ -16,11 +16,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "SortSelector", {
     enumerable: true,
-    get: ()=>SortSelector
+    get: function() {
+        return SortSelector;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _optionsEditorLayout = require("../OptionsEditorLayout");
-const _settingsAutocomplete = require("../SettingsAutocomplete");
+const _jsxruntime = require("react/jsx-runtime");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
 const SORT_OPTIONS = [
     {
         id: 'asc',
@@ -35,9 +37,9 @@ function SortSelector({ onChange , value ='desc'  }) {
     const handleSortChange = (_, { id  })=>{
         onChange(id);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
         label: "Sort",
-        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
             value: SORT_OPTIONS.find((o)=>o.id === value),
             options: SORT_OPTIONS,
             getOptionLabel: (o)=>o.label,