@perses-dev/components 0.48.0-rc0 → 0.49.0-rc.0

package/dist/cjs/TransformsEditor/TransformEditorContainer.js

@@ -0,0 +1,133 @@
+// 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, "TransformEditorContainer", {
+    enumerable: true,
+    get: function() {
+        return TransformEditorContainer;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
+const _EyeOffOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/EyeOffOutline"));
+const _EyeOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/EyeOutline"));
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _core = require("@perses-dev/core");
+const _TransformEditor = require("./TransformEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TransformEditorContainer({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props }) {
+    var _value_spec, _value_spec1;
+    function handleTransformDisable() {
+        var _value_spec;
+        onChange({
+            ...value,
+            spec: {
+                ...value.spec,
+                disabled: !((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled)
+            }
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                borderBottom: 1,
+                borderColor: (theme)=>theme.palette.divider,
+                justifyContent: "space-between",
+                gap: 4,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                "data-testid": `transform-toggle#${index}`,
+                                size: "small",
+                                onClick: ()=>onCollapse(!isCollapsed),
+                                children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                variant: "overline",
+                                component: "h4",
+                                sx: {
+                                    textTransform: 'none'
+                                },
+                                children: value.kind ? /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                        children: _core.TRANSFORM_TEXT[value.kind]
+                                    })
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                    children: "Select a transformation kind"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                        title: ((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled) ? 'Enable transformation' : 'Disable transformation',
+                                        placement: "top",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                            size: "small",
+                                            sx: {
+                                                marginLeft: 'auto'
+                                            },
+                                            onClick: handleTransformDisable,
+                                            children: ((_value_spec1 = value.spec) === null || _value_spec1 === void 0 ? void 0 : _value_spec1.disabled) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOffOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOutline.default, {})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                                        flexItem: true,
+                                        orientation: "vertical",
+                                        variant: "middle"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                title: "Remove transformation",
+                                placement: "top",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                    size: "small",
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    onClick: onDelete,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TransformEditor.TransformEditor, {
+                value: value,
+                onChange: onChange
+            })
+        ]
+    });
+}

package/dist/cjs/TransformsEditor/TransformsEditor.js

@@ -0,0 +1,106 @@
+// 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, "TransformsEditor", {
+    enumerable: true,
+    get: function() {
+        return TransformsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _TransformEditorContainer = require("./TransformEditorContainer");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TransformsEditor({ value, onChange, ...props }) {
+    const [transformsCollapsed, setTransformsCollapsed] = (0, _react.useState)(value.map(()=>true));
+    function handleTransformChange(index, transform) {
+        const updatedTransforms = [
+            ...value
+        ];
+        updatedTransforms[index] = transform;
+        onChange(updatedTransforms);
+    }
+    function handleTransformAdd() {
+        const updatedTransforms = [
+            ...value
+        ];
+        // @ts-expect-error: Unknown transform
+        updatedTransforms.push({
+            kind: '',
+            spec: {}
+        });
+        onChange(updatedTransforms);
+        setTransformsCollapsed((prev)=>{
+            prev.push(false);
+            return [
+                ...prev
+            ];
+        });
+    }
+    function handleTransformDelete(index) {
+        const updatedTransforms = [
+            ...value
+        ];
+        updatedTransforms.splice(index, 1);
+        onChange(updatedTransforms);
+        setTransformsCollapsed((prev)=>{
+            prev.splice(index, 1);
+            return [
+                ...prev
+            ];
+        });
+    }
+    function handleTransformCollapseExpand(index, collapsed) {
+        setTransformsCollapsed((prev)=>{
+            prev[index] = collapsed;
+            return [
+                ...prev
+            ];
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        gap: 1,
+        ...props,
+        children: [
+            value.map((transform, i)=>{
+                var _transformsCollapsed_i;
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TransformEditorContainer.TransformEditorContainer, {
+                    index: i,
+                    value: transform,
+                    isCollapsed: (_transformsCollapsed_i = transformsCollapsed[i]) !== null && _transformsCollapsed_i !== void 0 ? _transformsCollapsed_i : true,
+                    onChange: (updatedTransform)=>handleTransformChange(i, updatedTransform),
+                    onDelete: ()=>handleTransformDelete(i),
+                    onCollapse: (collapsed)=>handleTransformCollapseExpand(i, collapsed)
+                }, i);
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                variant: "contained",
+                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                sx: {
+                    marginTop: 1
+                },
+                onClick: handleTransformAdd,
+                children: "Add Transformation"
+            })
+        ]
+    });
+}

package/dist/cjs/TransformsEditor/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("./TransformsEditor"), 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/index.js

@@ -50,6 +50,7 @@ _export_star(require("./utils"), exports);
 _export_star(require("./model"), exports);
 _export_star(require("./test-utils"), exports);
 _export_star(require("./theme"), exports);
+_export_star(require("./TransformsEditor"), exports);
 _export_star(require("./RefreshIntervalPicker"), exports);
 _export_star(require("./PieChart"), exports);
 function _export_star(from, to) {

package/dist/cjs/theme/palette/background.js

@@ -29,6 +29,7 @@ const background = (mode)=>{
         overlay,
         default: _colors.white,
         paper: _colors.grey[50],
+        code: _colors.grey[50],
         tooltip: _colors.grey[100],
         lighter: _colors.grey[50],
         border: _colors.grey[100]
@@ -37,6 +38,7 @@ const background = (mode)=>{
         overlay,
         default: _colors.grey[900],
         paper: _colors.grey[850],
+        code: _colors.grey[800],
         tooltip: _colors.grey[600],
         lighter: _colors.grey[700],
         border: _colors.grey[600]

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export * from './utils';
 export * from './model';
 export * from './test-utils';
 export * from './theme';
+export * from './TransformsEditor';
 export * from './RefreshIntervalPicker';
 export * from './PieChart';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -46,6 +46,7 @@ export * from './utils';
 export * from './model';
 export * from './test-utils';
 export * from './theme';
+export * from './TransformsEditor';
 export * from './RefreshIntervalPicker';
 export * from './PieChart';
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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 './AlignSelector';\nexport * from './BarChart';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './Dialog';\nexport * from './DensitySelector';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './LinksEditor';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './Overlay';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeRangeSelector';\nexport * from './TimeSeriesTooltip';\nexport * from './ToolbarIconButton';\nexport * from './FormatControls';\nexport * from './YAxisLabel';\nexport * from './context';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\nexport * from './PieChart';\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;AAChC,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,qBAAqB;AACnC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,wBAAwB;AACtC,cAAc,YAAY;AAC1B,cAAc,yBAAyB;AACvC,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,0BAA0B;AACxC,cAAc,aAAa"}
+{"version":3,"sources":["../src/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 './AlignSelector';\nexport * from './BarChart';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './Dialog';\nexport * from './DensitySelector';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './LinksEditor';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './Overlay';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeRangeSelector';\nexport * from './TimeSeriesTooltip';\nexport * from './ToolbarIconButton';\nexport * from './FormatControls';\nexport * from './YAxisLabel';\nexport * from './context';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './TransformsEditor';\nexport * from './RefreshIntervalPicker';\nexport * from './PieChart';\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;AAChC,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,qBAAqB;AACnC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,wBAAwB;AACtC,cAAc,YAAY;AAC1B,cAAc,yBAAyB;AACvC,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,0BAA0B;AACxC,cAAc,aAAa"}

package/dist/theme/index.d.ts

@@ -8,6 +8,7 @@ declare module '@mui/material/styles/createPalette' {
         overlay: string;
         border: string;
         lighter: string;
+        code: string;
     }
     interface TypeText {
         navigation: string;

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAG7B,OAAO,QAAQ,oCAAoC,CAAC;IAClD,UAAU,cAAc;QACtB,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB;IAED,UAAU,QAAQ;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB;CACF;AAED,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf;;;;WAIG;QACH,YAAY,EAAE;YACZ,IAAI,EAAE,WAAW,CAAC;YAClB,KAAK,EAAE,WAAW,CAAC;YACnB,IAAI,EAAE,WAAW,CAAC;YAClB,MAAM,EAAE,WAAW,CAAC;YACpB,MAAM,EAAE,WAAW,CAAC;YACpB,GAAG,EAAE,WAAW,CAAC;SAClB,CAAC;KACH;IAED,UAAU,cAAc;QACtB,YAAY,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;KACxC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAG7B,OAAO,QAAQ,oCAAoC,CAAC;IAClD,UAAU,cAAc;QACtB,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;KACd;IAED,UAAU,QAAQ;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB;CACF;AAED,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf;;;;WAIG;QACH,YAAY,EAAE;YACZ,IAAI,EAAE,WAAW,CAAC;YAClB,KAAK,EAAE,WAAW,CAAC;YACnB,IAAI,EAAE,WAAW,CAAC;YAClB,MAAM,EAAE,WAAW,CAAC;YACpB,MAAM,EAAE,WAAW,CAAC;YACpB,GAAG,EAAE,WAAW,CAAC;SAClB,CAAC;KACH;IAED,UAAU,cAAc;QACtB,YAAY,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;KACxC;CACF"}

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/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\nimport type {} from './types/ThemeExtension';\nimport { PersesColor } from './palette';\n\nexport * from './theme';\nexport * from './typography';\n\n//Use Typescript interface augmentation to extend the MUI type definition\ndeclare module '@mui/material/styles/createPalette' {\n  interface TypeBackground {\n    navigation: string;\n    tooltip: string;\n    overlay: string;\n    border: string;\n    lighter: string;\n  }\n\n  interface TypeText {\n    navigation: string;\n    accent: string;\n    link: string;\n    linkHover: string;\n  }\n}\n\ndeclare module '@mui/material/styles' {\n  interface Palette {\n    /**\n     * The base colors from Perses design system. Use sparingly since\n     * this is meant as an escape hatch when the theme's other semantic colors\n     * won't get you what you need.\n     */\n    designSystem: {\n      blue: PersesColor;\n      green: PersesColor;\n      grey: PersesColor;\n      orange: PersesColor;\n      purple: PersesColor;\n      red: PersesColor;\n    };\n  }\n\n  interface PaletteOptions {\n    designSystem?: Palette['designSystem'];\n  }\n}\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;AAKjC,cAAc,UAAU;AACxB,cAAc,eAAe"}
+{"version":3,"sources":["../../src/theme/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\nimport type {} from './types/ThemeExtension';\nimport { PersesColor } from './palette';\n\nexport * from './theme';\nexport * from './typography';\n\n//Use Typescript interface augmentation to extend the MUI type definition\ndeclare module '@mui/material/styles/createPalette' {\n  interface TypeBackground {\n    navigation: string;\n    tooltip: string;\n    overlay: string;\n    border: string;\n    lighter: string;\n    code: string;\n  }\n\n  interface TypeText {\n    navigation: string;\n    accent: string;\n    link: string;\n    linkHover: string;\n  }\n}\n\ndeclare module '@mui/material/styles' {\n  interface Palette {\n    /**\n     * The base colors from Perses design system. Use sparingly since\n     * this is meant as an escape hatch when the theme's other semantic colors\n     * won't get you what you need.\n     */\n    designSystem: {\n      blue: PersesColor;\n      green: PersesColor;\n      grey: PersesColor;\n      orange: PersesColor;\n      purple: PersesColor;\n      red: PersesColor;\n    };\n  }\n\n  interface PaletteOptions {\n    designSystem?: Palette['designSystem'];\n  }\n}\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;AAKjC,cAAc,UAAU;AACxB,cAAc,eAAe"}

package/dist/theme/palette/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/theme/palette/background.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG5D,eAAO,MAAM,UAAU,SAAU,WAAW,KAAG,cAAc,CAAC,YAAY,CAsBzE,CAAC"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/theme/palette/background.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG5D,eAAO,MAAM,UAAU,SAAU,WAAW,KAAG,cAAc,CAAC,YAAY,CAwBzE,CAAC"}

package/dist/theme/palette/background.js

@@ -19,6 +19,7 @@ export const background = (mode)=>{
         overlay,
         default: white,
         paper: grey[50],
+        code: grey[50],
         tooltip: grey[100],
         lighter: grey[50],
         border: grey[100]
@@ -27,6 +28,7 @@ export const background = (mode)=>{
         overlay,
         default: grey[900],
         paper: grey[850],
+        code: grey[800],
         tooltip: grey[600],
         lighter: grey[700],
         border: grey[600]

package/dist/theme/palette/background.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/palette/background.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\nimport { PaletteMode, PaletteOptions } from '@mui/material';\nimport { blue, grey, white } from './colors';\n\nexport const background = (mode: PaletteMode): PaletteOptions['background'] => {\n  const navigation = blue[150];\n  const overlay = 'rgba(21, 23, 33, 0.75)'; // grey[900] with opacity 75%\n  return mode === 'light'\n    ? {\n        navigation,\n        overlay,\n        default: white,\n        paper: grey[50],\n        tooltip: grey[100],\n        lighter: grey[50],\n        border: grey[100],\n      }\n    : {\n        navigation,\n        overlay,\n        default: grey[900],\n        paper: grey[850],\n        tooltip: grey[600],\n        lighter: grey[700],\n        border: grey[600],\n      };\n};\n"],"names":["blue","grey","white","background","mode","navigation","overlay","default","paper","tooltip","lighter","border"],"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;AAGjC,SAASA,IAAI,EAAEC,IAAI,EAAEC,KAAK,QAAQ,WAAW;AAE7C,OAAO,MAAMC,aAAa,CAACC;IACzB,MAAMC,aAAaL,IAAI,CAAC,IAAI;IAC5B,MAAMM,UAAU,0BAA0B,6BAA6B;IACvE,OAAOF,SAAS,UACZ;QACEC;QACAC;QACAC,SAASL;QACTM,OAAOP,IAAI,CAAC,GAAG;QACfQ,SAASR,IAAI,CAAC,IAAI;QAClBS,SAAST,IAAI,CAAC,GAAG;QACjBU,QAAQV,IAAI,CAAC,IAAI;IACnB,IACA;QACEI;QACAC;QACAC,SAASN,IAAI,CAAC,IAAI;QAClBO,OAAOP,IAAI,CAAC,IAAI;QAChBQ,SAASR,IAAI,CAAC,IAAI;QAClBS,SAAST,IAAI,CAAC,IAAI;QAClBU,QAAQV,IAAI,CAAC,IAAI;IACnB;AACN,EAAE"}
+{"version":3,"sources":["../../../src/theme/palette/background.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\nimport { PaletteMode, PaletteOptions } from '@mui/material';\nimport { blue, grey, white } from './colors';\n\nexport const background = (mode: PaletteMode): PaletteOptions['background'] => {\n  const navigation = blue[150];\n  const overlay = 'rgba(21, 23, 33, 0.75)'; // grey[900] with opacity 75%\n  return mode === 'light'\n    ? {\n        navigation,\n        overlay,\n        default: white,\n        paper: grey[50],\n        code: grey[50],\n        tooltip: grey[100],\n        lighter: grey[50],\n        border: grey[100],\n      }\n    : {\n        navigation,\n        overlay,\n        default: grey[900],\n        paper: grey[850],\n        code: grey[800],\n        tooltip: grey[600],\n        lighter: grey[700],\n        border: grey[600],\n      };\n};\n"],"names":["blue","grey","white","background","mode","navigation","overlay","default","paper","code","tooltip","lighter","border"],"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;AAGjC,SAASA,IAAI,EAAEC,IAAI,EAAEC,KAAK,QAAQ,WAAW;AAE7C,OAAO,MAAMC,aAAa,CAACC;IACzB,MAAMC,aAAaL,IAAI,CAAC,IAAI;IAC5B,MAAMM,UAAU,0BAA0B,6BAA6B;IACvE,OAAOF,SAAS,UACZ;QACEC;QACAC;QACAC,SAASL;QACTM,OAAOP,IAAI,CAAC,GAAG;QACfQ,MAAMR,IAAI,CAAC,GAAG;QACdS,SAAST,IAAI,CAAC,IAAI;QAClBU,SAASV,IAAI,CAAC,GAAG;QACjBW,QAAQX,IAAI,CAAC,IAAI;IACnB,IACA;QACEI;QACAC;QACAC,SAASN,IAAI,CAAC,IAAI;QAClBO,OAAOP,IAAI,CAAC,IAAI;QAChBQ,MAAMR,IAAI,CAAC,IAAI;QACfS,SAAST,IAAI,CAAC,IAAI;QAClBU,SAASV,IAAI,CAAC,IAAI;QAClBW,QAAQX,IAAI,CAAC,IAAI;IACnB;AACN,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.48.0-rc0",
+  "version": "0.49.0-rc.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,7 +36,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^6.12.1",
-    "@perses-dev/core": "0.48.0-rc0",
+    "@perses-dev/core": "0.49.0-rc.0",
     "@tanstack/react-table": "^8.19.2",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
@@ -53,7 +53,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.48.0-rc0"
+    "@perses-dev/storybook": "0.49.0-rc.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.15.20",