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

package/dist/cjs/validation/panel.js

@@ -0,0 +1,29 @@
+// 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, "panelEditorValidationSchema", {
+    enumerable: true,
+    get: function() {
+        return panelEditorValidationSchema;
+    }
+});
+const _zod = require("zod");
+const panelEditorValidationSchema = _zod.z.object({
+    name: _zod.z.string().nonempty('Required'),
+    groupId: _zod.z.number(),
+    description: _zod.z.string().optional(),
+    type: _zod.z.string().nonempty('Required')
+});

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -16,19 +16,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DashboardApp", {
     enumerable: true,
-    get: ()=>DashboardApp
+    get: function() {
+        return DashboardApp;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly ,  } = props;
-    const { setEditMode  } = (0, _context.useEditMode)();
+    const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isCreating  } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
+    const { setSavedDatasources  } = (0, _pluginsystem.useDatasourceStore)();
     const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleDiscardChanges = ()=>{
         // Reset to the original spec and exit edit mode
@@ -44,6 +49,8 @@ const DashboardApp = (props)=>{
     const onEditButtonClick = ()=>{
         setEditMode(true);
         setOriginalDashboard(dashboard);
+        var _dashboard_spec_datasources;
+        setSavedDatasources((_dashboard_spec_datasources = dashboard.spec.datasources) !== null && _dashboard_spec_datasources !== void 0 ? _dashboard_spec_datasources : {});
     };
     const onCancelButtonClick = ()=>{
         // check if dashboard has been modified
@@ -60,7 +67,7 @@ const DashboardApp = (props)=>{
             });
         }
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             flexGrow: 1,
             overflowX: 'hidden',
@@ -69,7 +76,7 @@ const DashboardApp = (props)=>{
             flexDirection: 'column'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardToolbar, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
                 dashboardTitleComponent: dashboardTitleComponent,
                 initialVariableIsSticky: initialVariableIsSticky,
@@ -78,28 +85,35 @@ const DashboardApp = (props)=>{
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     padding: (theme)=>theme.spacing(2),
                     height: '100%'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.Dashboard, {
                             emptyDashboardProps: {
                                 onEditButtonClick,
                                 ...emptyDashboardProps
                             }
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
+                        chartsTheme: chartsTheme,
+                        enablePinning: false,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelDrawer, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DeletePanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DeletePanelDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EditJsonDialog, {
+                        isReadonly: !isEditMode,
+                        disableMetadataEdition: !isCreating
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
                 ]
             })
         ]

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -16,39 +16,82 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ViewDashboard", {
     enumerable: true,
-    get: ()=>ViewDashboard
+    get: function() {
+        return ViewDashboard;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
 const _context = require("../../context");
-const _dashboardApp = require("./DashboardApp");
+const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , externalVariableDefinitions , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , isCreating , sx , ...others } = props;
     const { spec  } = dashboardResource;
-    var _duration;
-    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : _core.DEFAULT_DASHBOARD_DURATION;
-    var _refreshInterval;
-    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
-    const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
-    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashhboardRefreshInterval);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
+    var _spec_duration;
+    const dashboardDuration = (_spec_duration = spec.duration) !== null && _spec_duration !== void 0 ? _spec_duration : _core.DEFAULT_DASHBOARD_DURATION;
+    var _spec_refreshInterval;
+    const dashboardRefreshInterval = (_spec_refreshInterval = spec.refreshInterval) !== null && _spec_refreshInterval !== void 0 ? _spec_refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+    const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
+    const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
+    const { data  } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
+    const builtinVariables = (0, _react.useMemo)(()=>{
+        const result = [
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__dashboard',
+                    value: ()=>dashboardResource.metadata.name,
+                    source: 'Dashboard',
+                    display: {
+                        name: '__dashboard',
+                        description: 'The name of the current dashboard',
+                        hidden: true
+                    }
+                }
+            },
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__project',
+                    value: ()=>dashboardResource.metadata.project,
+                    source: 'Dashboard',
+                    display: {
+                        name: '__project',
+                        description: 'The name of the current dashboard project',
+                        hidden: true
+                    }
+                }
+            }
+        ];
+        if (data) {
+            data.forEach((def)=>result.push(def));
+        }
+        return result;
+    }, [
+        dashboardResource.metadata.name,
+        dashboardResource.metadata.project,
+        data
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DashboardProvider, {
             initialState: {
                 dashboardResource,
                 isEditMode: !!isEditing
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
                 initialTimeRange: initialTimeRange,
                 initialRefreshInterval: initialRefreshInterval,
-                enabledURLParams: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.TemplateVariableProviderWithQueryParams, {
                     initialVariableDefinitions: spec.variables,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    externalVariableDefinitions: externalVariableDefinitions,
+                    builtinVariables: builtinVariables,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: (0, _components.combineSx)({
                             display: 'flex',
                             width: '100%',
@@ -57,16 +100,17 @@ function ViewDashboard(props) {
                             overflow: 'hidden'
                         }, sx),
                         ...others,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
                                 dashboardTitleComponent: dashboardTitleComponent,
                                 emptyDashboardProps: emptyDashboardProps,
                                 onSave: onSave,
                                 onDiscard: onDiscard,
                                 initialVariableIsSticky: initialVariableIsSticky,
-                                isReadonly: isReadonly
+                                isReadonly: isReadonly,
+                                isCreating: isCreating
                             })
                         })
                     })

package/dist/cjs/views/ViewDashboard/index.js

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./ViewDashboard"), exports);
-function _exportStar(from, to) {
+_export_star(require("./ViewDashboard"), 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/components/AddGroupButton/AddGroupButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAU1B,CAAC"}
+{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAe1B,CAAC"}

package/dist/components/AddGroupButton/AddGroupButton.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import { InfoTooltip } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboardActions } from '../../context';
 export const AddGroupButton = ()=>{
     const { openAddPanelGroup  } = useDashboardActions();
@@ -24,6 +24,7 @@ export const AddGroupButton = ()=>{
             startIcon: /*#__PURE__*/ _jsx(AddGroupIcon, {}),
             onClick: openAddPanelGroup,
             "aria-label": TOOLTIP_TEXT.addGroup,
+            sx: editButtonStyle,
             children: "Panel Group"
         })
     });

package/dist/components/AddGroupButton/AddGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = () => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button startIcon={<AddGroupIcon />} onClick={openAddPanelGroup} aria-label={TOOLTIP_TEXT.addGroup}>\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label"],"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;AAAA,SAASA,MAAM,QAAQ,eAAe,CAAC;AACvC,OAAOC,YAAY,MAAM,gCAAgC,CAAC;AAC1D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAEpD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGF,mBAAmB,EAAE,AAAC;IAEpD,qBACE,KAACF,WAAW;QAACK,WAAW,EAAEJ,YAAY,CAACK,QAAQ;kBAC7C,cAAA,KAACR,MAAM;YAACS,SAAS,gBAAE,KAACR,YAAY,KAAG;YAAES,OAAO,EAAEJ,iBAAiB;YAAEK,YAAU,EAAER,YAAY,CAACK,QAAQ;sBAAE,aAEpG;UAAS;MACG,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = () => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button\n        startIcon={<AddGroupIcon />}\n        onClick={openAddPanelGroup}\n        aria-label={TOOLTIP_TEXT.addGroup}\n        sx={editButtonStyle}\n      >\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label","sx"],"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,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,kBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM;kBACrC,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM;YACzBI,IAAIT;sBACL;;;AAKP,EAAE"}

package/dist/components/AddGroupButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddGroupButton/index.ts"],"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\nexport * from './AddGroupButton';\n"],"names":[],"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,cAAc,kBAAkB,CAAC"}
+{"version":3,"sources":["../../../src/components/AddGroupButton/index.ts"],"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\nexport * from './AddGroupButton';\n"],"names":[],"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,cAAc,mBAAmB"}

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { InfoTooltip } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboardActions } from '../../context';
 export const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' , fullWidth  })=>{
     const { openAddPanel  } = useDashboardActions();
@@ -27,10 +27,7 @@ export const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Pa
             variant: variant,
             color: color,
             fullWidth: fullWidth,
-            sx: {
-                whiteSpace: 'nowrap',
-                minWidth: 'auto'
-            },
+            sx: editButtonStyle,
             children: label
         })
     });

package/dist/components/AddPanelButton/AddPanelButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps) => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx","whiteSpace","minWidth"],"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;AAAA,SAASA,MAAM,QAAqB,eAAe,CAAC;AACpD,OAAOC,YAAY,MAAM,qCAAqC,CAAC;AAC/D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAmBpD,OAAO,MAAMC,cAAc,GAAG,CAAC,EAC7BC,OAAO,EAAG,MAAM,CAAA,EAChBC,KAAK,EAAG,SAAS,CAAA,EACjBC,KAAK,EAAG,OAAO,CAAA,EACfC,SAAS,CAAA,EACW,GAAK;IACzB,MAAM,EAAEC,YAAY,CAAA,EAAE,GAAGN,mBAAmB,EAAE,AAAC;IAE/C,qBACE,KAACF,WAAW;QAACS,WAAW,EAAER,YAAY,CAACS,QAAQ;kBAC7C,cAAA,KAACZ,MAAM;YACLa,SAAS,gBAAE,KAACZ,YAAY,KAAG;YAC3Ba,OAAO,EAAEJ,YAAY;YACrBK,YAAU,EAAEZ,YAAY,CAACS,QAAQ;YACjCN,OAAO,EAAEA,OAAO;YAChBC,KAAK,EAAEA,KAAK;YACZE,SAAS,EAAEA,SAAS;YACpBO,EAAE,EAAE;gBAAEC,UAAU,EAAE,QAAQ;gBAAEC,QAAQ,EAAE,MAAM;aAAE;sBAE7CV,KAAK;UACC;MACG,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps) => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={editButtonStyle}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx"],"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,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAU,OAAM,EAChBC,OAAQ,UAAS,EACjBC,OAAQ,QAAO,EACfC,UAAS,EACW;IACpB,MAAM,EAAEC,aAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU;kBACrC,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU;YACzBN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}

package/dist/components/AddPanelButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/index.ts"],"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\nexport * from './AddPanelButton';\n"],"names":[],"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,cAAc,kBAAkB,CAAC"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/index.ts"],"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\nexport * from './AddPanelButton';\n"],"names":[],"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,cAAc,mBAAmB"}

package/dist/components/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout key={panelGroupId} panelGroupId={panelGroupId} panelOptions={panelOptions} />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","map","panelGroupId"],"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;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAA6B,mBAAmB,CAAC;AAYxE;;CAEC,GACD,OAAO,SAASC,SAAS,CAAC,EAAEC,mBAAmB,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGC,QAAQ,EAAkB,EAAE;IAC5F,MAAMC,aAAa,GAAGP,gBAAgB,EAAE,AAAC;IACzC,MAAMQ,OAAO,GAAG,CAACD,aAAa,CAACE,MAAM,AAAC;IAEtC,qBACE,KAACZ,GAAG;QAAE,GAAGS,QAAQ;QAAEI,EAAE,EAAE;YAAEC,MAAM,EAAE,MAAM;SAAE;kBACvC,cAAA,MAACb,aAAa;YAACc,iBAAiB,EAAEb,UAAU;;gBACzCS,OAAO,kBACN,KAACX,GAAG;oBAACa,EAAE,EAAE;wBAAEC,MAAM,EAAE,MAAM;wBAAEE,OAAO,EAAE,MAAM;wBAAEC,UAAU,EAAE,QAAQ;qBAAE;8BAChE,cAAA,KAACZ,cAAc;wBAAE,GAAGE,mBAAmB;sBAAI;kBACvC,AACP;gBACA,CAACI,OAAO,IACPD,aAAa,CAACQ,GAAG,CAAC,CAACC,YAAY,iBAC7B,KAACf,UAAU;wBAAoBe,YAAY,EAAEA,YAAY;wBAAEX,YAAY,EAAEA,YAAY;uBAApEW,YAAY,CAA4D,AAC1F,CAAC;;UACU;MACZ,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout key={panelGroupId} panelGroupId={panelGroupId} panelOptions={panelOptions} />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","map","panelGroupId"],"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,QAAkB,gBAAgB;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAA6B,oBAAoB;AAYxE;;CAEC,GACD,OAAO,SAASC,UAAU,EAAEC,oBAAmB,EAAEC,aAAY,EAAE,GAAGC,UAA0B;IAC1F,MAAMC,gBAAgBP;IACtB,MAAMQ,UAAU,CAACD,cAAcE;IAE/B,qBACE,KAACZ;QAAK,GAAGS,QAAQ;QAAEI,IAAI;YAAEC,QAAQ;QAAO;kBACtC,cAAA,MAACb;YAAcc,mBAAmBb;;gBAC/BS,yBACC,KAACX;oBAAIa,IAAI;wBAAEC,QAAQ;wBAAQE,SAAS;wBAAQC,YAAY;oBAAS;8BAC/D,cAAA,KAACZ;wBAAgB,GAAGE,mBAAmB;;;gBAG1C,CAACI,WACAD,cAAcQ,IAAI,CAACC,6BACjB,KAACf;wBAA8Be,cAAcA;wBAAcX,cAAcA;uBAAxDW;;;;AAK7B"}

package/dist/components/Dashboard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/index.ts"],"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\nexport * from './Dashboard';\n"],"names":[],"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,cAAc,aAAa,CAAC"}
+{"version":3,"sources":["../../../src/components/Dashboard/index.ts"],"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\nexport * from './Dashboard';\n"],"names":[],"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,cAAc,cAAc"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA2B,OAAO,EAAE,KAAK,EAAoB,MAAM,eAAe,CAAC;AAM1F,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAgCxE"}
+{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":";AAcA,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAuExE"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { AppBar, Box, IconButton, useScrollTrigger } from '@mui/material';
+import { AppBar, Box, IconButton, Stack, useMediaQuery, useScrollTrigger, useTheme } from '@mui/material';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
 import { TemplateVariableList } from '../Variables';
@@ -23,6 +23,7 @@ export function DashboardStickyToolbar(props) {
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
     // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
     /*#__PURE__*/ _jsx(Box, {
@@ -39,24 +40,52 @@ export function DashboardStickyToolbar(props) {
             children: /*#__PURE__*/ _jsxs(Box, {
                 display: "flex",
                 justifyContent: "space-between",
+                sx: {
+                    flexDirection: isBiggerThanMd ? 'row' : 'column'
+                },
                 children: [
                     /*#__PURE__*/ _jsxs(Box, {
                         display: "flex",
-                        flexWrap: "wrap",
-                        alignItems: "start",
-                        my: isSticky ? 2 : 0,
-                        ml: isSticky ? 2 : 0,
+                        flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
+                        maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
+                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
+                        ,
+                        pt: 1,
+                        pl: isSticky ? 1 : 0,
+                        mt: isSticky && isBiggerThanMd ? 0.5 : 0,
+                        ml: isSticky && isBiggerThanMd ? 0.5 : 0,
+                        sx: {
+                            overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',
+                            // Firefox:
+                            scrollbarWidth: 'thin',
+                            // Safari and Chrome:
+                            '&::-webkit-scrollbar': {
+                                height: '8px',
+                                backgroundColor: (theme)=>theme.palette.grey['300']
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                                background: (theme)=>theme.palette.grey['600']
+                            }
+                        },
+                        gap: 1,
                         children: [
                             /*#__PURE__*/ _jsx(TemplateVariableList, {}),
                             props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
+                                style: {
+                                    width: 'fit-content',
+                                    height: 'fit-content'
+                                },
                                 onClick: ()=>setIsPin(!isPin),
                                 children: isPin ? /*#__PURE__*/ _jsx(PinOutline, {}) : /*#__PURE__*/ _jsx(PinOffOutline, {})
                             })
                         ]
                     }),
-                    isSticky && /*#__PURE__*/ _jsx(Box, {
-                        my: 2,
-                        mr: 2,
+                    isSticky && /*#__PURE__*/ _jsx(Stack, {
+                        m: isBiggerThanMd ? 1.5 : 1,
+                        mt: isBiggerThanMd ? 1.5 : 0,
+                        ml: isBiggerThanMd ? 1.5 : 'auto',
+                        direction: "row",
+                        justifyContent: "end",
                         children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
                     })
                 ]

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 { useState } from 'react';\nimport { AppBar, Box, IconButton, SxProps, Theme, useScrollTrigger } from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box display=\"flex\" justifyContent=\"space-between\">\n          <Box display=\"flex\" flexWrap=\"wrap\" alignItems=\"start\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n            <TemplateVariableList></TemplateVariableList>\n            {props.initialVariableIsSticky && (\n              <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Box my={2} mr={2}>\n              <TimeRangeControls></TimeRangeControls>\n            </Box>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","useScrollTrigger","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexWrap","alignItems","my","ml","onClick","mr"],"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;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,EAAEC,GAAG,EAAEC,UAAU,EAAkBC,gBAAgB,QAAQ,eAAe,CAAC;AAC1F,OAAOC,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAOC,aAAa,MAAM,+BAA+B,CAAC;AAC1D,SAASC,oBAAoB,QAAQ,cAAc,CAAC;AACpD,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AAOzD,OAAO,SAASC,sBAAsB,CAACC,KAAkC,EAAE;IACzE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAACU,KAAK,CAACG,uBAAuB,CAAC,AAAC;IAElE,MAAMC,aAAa,GAAGV,gBAAgB,CAAC;QAAEW,iBAAiB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpE,MAAMC,QAAQ,GAAGF,aAAa,IAAIJ,KAAK,CAACG,uBAAuB,IAAIF,KAAK,AAAC;IAEzE,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACT,GAAG;QAACe,YAAY,EAAE,CAAC,CAAC;QAAEC,aAAW,EAAC,eAAe;kBAChD,cAAA,KAACjB,MAAM;YACLkB,KAAK,EAAC,SAAS;YACfC,QAAQ,EAAEJ,QAAQ,GAAG,OAAO,GAAG,QAAQ;YACvCK,SAAS,EAAEL,QAAQ,GAAG,CAAC,GAAG,CAAC;YAC3BM,EAAE,EAAE;gBAAEC,eAAe,EAAE,SAAS;gBAAE,GAAGb,KAAK,CAACY,EAAE;aAAE;sBAE/C,cAAA,MAACpB,GAAG;gBAACsB,OAAO,EAAC,MAAM;gBAACC,cAAc,EAAC,eAAe;;kCAChD,MAACvB,GAAG;wBAACsB,OAAO,EAAC,MAAM;wBAACE,QAAQ,EAAC,MAAM;wBAACC,UAAU,EAAC,OAAO;wBAACC,EAAE,EAAEZ,QAAQ,GAAG,CAAC,GAAG,CAAC;wBAAEa,EAAE,EAAEb,QAAQ,GAAG,CAAC,GAAG,CAAC;;0CAC/F,KAACT,oBAAoB,KAAwB;4BAC5CG,KAAK,CAACG,uBAAuB,kBAC5B,KAACV,UAAU;gCAAC2B,OAAO,EAAE,IAAMlB,QAAQ,CAAC,CAACD,KAAK,CAAC;0CAAGA,KAAK,iBAAG,KAACN,UAAU,KAAG,iBAAG,KAACC,aAAa,KAAG;8BAAc,AACvG;;sBACG;oBACLU,QAAQ,kBACP,KAACd,GAAG;wBAAC0B,EAAE,EAAE,CAAC;wBAAEG,EAAE,EAAE,CAAC;kCACf,cAAA,KAACvB,iBAAiB,KAAqB;sBACnC,AACP;;cACG;UACC;MACL,EACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 { useState } from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            maxHeight=\"150px\" // Limit the vertical space used to ~3 rows of variables\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <TemplateVariableList></TemplateVariableList>\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls></TimeRangeControls>\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","maxHeight","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"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,QAAQ,QAAQ,QAAQ;AACjC,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,uBAAuB;AAOzD,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG;IAEzC,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,2BAA2BF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,YAAYC,GAAG;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,WAAU,QAAQ,wDAAwD;;wBAC1EC,IAAI;wBACJC,IAAIlB,WAAW,IAAI;wBACnBmB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCmB,IAAIpB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFY,WAAW,CAACrB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXqB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRb,iBAAiB,CAACc,QAAUA,MAAMC,QAAQC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,QAAQC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACrC;4BACAG,MAAMG,yCACL,KAACb;gCAAW6C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMnC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC+C,GAAG/B,iBAAiB,MAAM;wBAC1BkB,IAAIlB,iBAAiB,MAAM;wBAC3BmB,IAAInB,iBAAiB,MAAM;wBAC3BgC,WAAU;wBACVrB,gBAAe;kCAEf,cAAA,KAACpB;;;;;;AAOf"}

package/dist/components/DashboardStickyToolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/index.ts"],"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\nexport * from './DashboardStickyToolbar';\n"],"names":[],"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,cAAc,0BAA0B,CAAC"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/index.ts"],"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\nexport * from './DashboardStickyToolbar';\n"],"names":[],"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,cAAc,2BAA2B"}

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAgG5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAY7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA8F5D,CAAC"}