@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-histogram-types-78c5104

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -34,7 +34,7 @@ const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _EChart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
@@ -48,14 +48,12 @@ const PROGRESS_WIDTH = 16;
 const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChart(props) {
     const { width, height, data, format, axisLine, max } = props;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const chartsTheme = (0, _context.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
-        var _chartsTheme_echartsTheme_textStyle;
         if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
         const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
-        var _chartsTheme_echartsTheme_textStyle_color;
         return {
             title: {
                 show: false
@@ -91,7 +89,7 @@ function GaugeChart(props) {
                             color: [
                                 [
                                     1,
-                                    '#e1e5e9'
+                                    'rgba(127,127,127,0.35)'
                                 ]
                             ],
                             width: PROGRESS_WIDTH
@@ -185,7 +183,7 @@ function GaugeChart(props) {
                             // https://echarts.apache.org/en/option.html#series-gauge.data.title
                             title: {
                                 show: true,
-                                color: (_chartsTheme_echartsTheme_textStyle_color = (_chartsTheme_echartsTheme_textStyle = chartsTheme.echartsTheme.textStyle) === null || _chartsTheme_echartsTheme_textStyle === void 0 ? void 0 : _chartsTheme_echartsTheme_textStyle.color) !== null && _chartsTheme_echartsTheme_textStyle_color !== void 0 ? _chartsTheme_echartsTheme_textStyle_color : 'inherit',
+                                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit',
                                 offsetCenter: [
                                     0,
                                     '55%'
@@ -223,8 +221,7 @@ function getResponsiveValueSize(value, format, width, height) {
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
     const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, format) : `${value}`;
-    var _formattedValue_length;
-    const valueCharacters = (_formattedValue_length = formattedValue.length) !== null && _formattedValue_length !== void 0 ? _formattedValue_length : 2;
+    const valueCharacters = formattedValue.length ?? 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
     return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
 }

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -21,13 +21,7 @@ Object.defineProperty(exports, "InfoTooltip", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 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.
@@ -41,13 +35,13 @@ const InfoTooltip = ({ id, title, description, placement, children, enterDelay,
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement !== null && placement !== void 0 ? placement : 'top',
+        placement: placement ?? 'top',
         title: /*#__PURE__*/ (0, _jsxruntime.jsx)(TooltipContent, {
             title: title,
             description: description
         }),
-        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
-        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
+        enterDelay: enterDelay ?? 500,
+        enterNextDelay: enterNextDelay ?? 500,
         children: wrappedChildren
     });
 };
@@ -65,7 +59,8 @@ const TooltipContent = ({ title, description })=>{
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "caption",
                 sx: (theme)=>({
-                        color: theme.palette.text.primary
+                        color: theme.palette.text.primary,
+                        whiteSpace: 'pre-line'
                     }),
                 children: description
             })

package/dist/cjs/JSONEditor.js

@@ -36,11 +36,6 @@ function JSONEditor(props) {
     const isDarkMode = theme.palette.mode === 'dark';
     const [value, setValue] = (0, _react.useState)(()=>JSON.stringify(props.value, null, 2));
     const [lastProcessedValue, setLastProcessedValue] = (0, _react.useState)(value);
-    (0, _react.useEffect)(()=>{
-        setValue(JSON.stringify(props.value, null, 2));
-    }, [
-        props.value
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
         ...props,
         style: {
@@ -55,6 +50,10 @@ function JSONEditor(props) {
         value: value,
         onChange: (newValue)=>{
             setValue(newValue);
+            // Trigger the provided onChange callback in real-time
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
         },
         onBlur: ()=>{
             // Don't trigger the provided onChange if the last processed value is equal to the current value.

package/dist/cjs/Legend/Legend.js

@@ -102,9 +102,11 @@ function Legend({ width, height, options, data, selectedItems, onSelectedItemsCh
     }
     if (options.position === 'right') {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            sx: {
+            style: {
                 width: width,
-                height: height,
+                height: height
+            },
+            sx: {
                 position: 'absolute',
                 top: 0,
                 right: 0
@@ -114,9 +116,11 @@ function Legend({ width, height, options, data, selectedItems, onSelectedItemsCh
     }
     // Position bottom
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: {
+        style: {
             width: width,
-            height: height,
+            height: height
+        },
+        sx: {
             position: 'absolute',
             bottom: 0
         },

package/dist/cjs/Legend/LegendColorBadge.js

@@ -21,15 +21,10 @@ Object.defineProperty(exports, "LegendColorBadge", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _utils = require("../utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color, sx, ...others }) {
+const LegendColorBadge = /*#__PURE__*/ (0, _react.memo)(function LegendColorBadge({ color, sx, ...others }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         sx: (0, _utils.combineSx)({

package/dist/cjs/Legend/ListLegendItem.js

@@ -21,51 +21,10 @@ Object.defineProperty(exports, "ListLegendItem", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 const _LegendColorBadge = require("./LegendColorBadge");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 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() {
@@ -79,26 +38,23 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }
     }
     const handleClick = (e)=>{
-        var _item_onClick;
         onClick(e, item.id);
-        (_item_onClick = item.onClick) === null || _item_onClick === void 0 ? void 0 : _item_onClick.call(item, e);
+        item.onClick?.(e);
     };
-    return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ListItemButton, {
         ...others,
-        component: "div",
         role: "listitem",
         sx: (0, _utils.combineSx)({
             padding: 0,
             cursor: 'pointer'
         }, sx),
         dense: true,
-        key: item.id,
         onClick: handleClick,
-        onMouseOver: (e)=>onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+        onMouseOver: (e)=>onMouseOver?.(e, {
                 id: item.id,
                 index
             }),
-        onMouseOut: (e)=>onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+        onMouseOut: (e)=>onMouseOut?.(e, {
                 id: item.id,
                 index
             }),
@@ -125,4 +81,4 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         ]
     });
 });
-const ListLegendItem = /*#__PURE__*/ _react.default.memo(ListLegendItemBase);
+const ListLegendItem = /*#__PURE__*/ (0, _react.memo)(ListLegendItemBase);

package/dist/cjs/Legend/TableLegend.js

@@ -75,6 +75,7 @@ function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsCh
         data: items,
         columns: columns,
         density: "compact",
+        defaultColumnWidth: "auto",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
         checkboxSelection: true,

package/dist/cjs/LineChart/LineChart.js

@@ -28,9 +28,8 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _EChart = require("../EChart");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _TimeSeriesTooltip = require("../TimeSeriesTooltip");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("../utils");
 (0, _core.use)([
     _charts.LineChart,
@@ -46,12 +45,11 @@ const _utils = require("../utils");
     _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) {
-    var _option_tooltip;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const chartsTheme = (0, _context.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, _context.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     (0, _react.useImperativeHandle)(ref, ()=>{
@@ -85,10 +83,8 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
-                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 startIndex = params.batch[0].startValue ?? 0;
+                const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -116,8 +112,7 @@ 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 _data_rangeMs;
-        const rangeMs = (_data_rangeMs = data.rangeMs) !== null && _data_rangeMs !== void 0 ? _data_rangeMs : (0, _utils.getDateRange)(data.xAxis);
+        const rangeMs = data.rangeMs ?? (0, _utils.getDateRange)(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -172,7 +167,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         noDataVariant
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
+        style: {
             height
         },
         onClick: (e)=>{
@@ -251,7 +246,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             }
         },
         children: [
-            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, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,

package/dist/cjs/LinksEditor/LinksEditor.js

@@ -0,0 +1,174 @@
+// Copyright 2024 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, "LinksEditor", {
+    enumerable: true,
+    get: function() {
+        return LinksEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _reacthookform = require("react-hook-form");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _Minus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Minus"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function LinksEditor({ control, ...props }) {
+    const { fields, append, remove } = (0, _reacthookform.useFieldArray)({
+        control: control,
+        name: 'panelDefinition.spec.links'
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        ...props,
+        gap: 3,
+        children: [
+            fields && fields.length > 0 ? fields.map((field, index)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            gap: 1,
+                            alignItems: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(LinkControl, {
+                                    control: control,
+                                    index: index
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                    style: {
+                                        width: 'fit-content',
+                                        height: 'fit-content'
+                                    },
+                                    onClick: ()=>remove(index),
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {})
+                    ]
+                }, field.id)) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "subtitle1",
+                mb: 2,
+                fontStyle: "italic",
+                children: "No links defined"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                style: {
+                    width: 'fit-content',
+                    height: 'fit-content'
+                },
+                onClick: ()=>append({
+                        url: ''
+                    }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+            })
+        ]
+    });
+}
+function LinkControl({ control, index }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        gap: 2,
+        flexGrow: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.url`,
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...field,
+                                required: true,
+                                fullWidth: true,
+                                label: "URL",
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                onChange: (event)=>{
+                                    field.onChange(event);
+                                }
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.name`,
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...field,
+                                fullWidth: true,
+                                label: "Name",
+                                defaultValue: "",
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                onChange: (event)=>{
+                                    field.onChange(event);
+                                }
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.tooltip`,
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...field,
+                                fullWidth: true,
+                                label: "Tooltip",
+                                defaultValue: "",
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                onChange: (event)=>{
+                                    field.onChange(event);
+                                }
+                            })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                gap: 2,
+                direction: "row",
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.renderVariables`,
+                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                label: "Render Variables",
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                    ...field,
+                                    checked: field.value,
+                                    onChange: (e)=>field.onChange(e.target.checked)
+                                })
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.targetBlank`,
+                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                label: "Open in new tab",
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                    ...field,
+                                    checked: field.value,
+                                    onChange: (e)=>field.onChange(e.target.checked)
+                                })
+                            })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/cjs/LinksEditor/index.js

@@ -0,0 +1,30 @@
+// Copyright 2024 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("./LinksEditor"), 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/Overlay/Overlay.js

@@ -0,0 +1,71 @@
+// Copyright 2024 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LoadingOverlay: function() {
+        return LoadingOverlay;
+    },
+    NoDataOverlay: function() {
+        return NoDataOverlay;
+    },
+    TextOverlay: function() {
+        return TextOverlay;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function TextOverlay(props) {
+    const { message } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            children: message
+        })
+    });
+}
+function NoDataOverlay(props) {
+    const { resource } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextOverlay, {
+        message: `No ${resource}`
+    });
+}
+function LoadingOverlay(props) {
+    const { variant = 'rounded' } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            px: 1
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            variant: variant,
+            width: "100%",
+            height: "30%",
+            "aria-label": "Loading..."
+        })
+    });
+}

package/dist/cjs/Overlay/index.js

@@ -0,0 +1,30 @@
+// Copyright 2024 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("./Overlay"), 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;
+}