@perses-dev/dashboards 0.8.0 → 0.9.0

package/dist/components/Dashboard.js

@@ -1 +1,38 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Box}from"@mui/material";import{ErrorBoundary,ErrorAlert}from"@perses-dev/components";import{GridLayout,GridItemContent}from"./GridLayout";export function Dashboard(r){const{spec:o,...t}=r;return _jsx(Box,{...t,children:_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:o.layouts.map(((r,t)=>_jsx(GridLayout,{groupIndex:t,definition:r,renderGridItemContent:(r,t)=>_jsx(GridItemContent,{content:r.content,spec:o,groupIndex:t})},`${JSON.stringify(o.layouts)} ${t}`)))})})}
+// Copyright 2022 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
+import { GridLayout, GridItemContent } from './GridLayout';
+/**
+ * Renders a Dashboard for the provided Dashboard spec.
+ */ export function Dashboard(props) {
+    const { spec , ...others } = props;
+    return /*#__PURE__*/ _jsx(Box, {
+        ...others,
+        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorAlert,
+            children: spec.layouts.map((layout, idx)=>/*#__PURE__*/ _jsx(GridLayout, {
+                    groupIndex: idx,
+                    definition: layout,
+                    renderGridItemContent: (definition, groupIndex)=>/*#__PURE__*/ _jsx(GridItemContent, {
+                            content: definition.content,
+                            spec: spec,
+                            groupIndex: groupIndex
+                        })
+                }, `${JSON.stringify(spec.layouts)} ${idx}`))
+        })
+    });
+}
+
+//# sourceMappingURL=Dashboard.js.map

package/dist/components/Dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Dashboard.tsx"],"sourcesContent":["// Copyright 2022 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 { DashboardSpec } from '@perses-dev/core';\nimport { GridLayout, GridItemContent } from './GridLayout';\n\nexport interface DashboardProps extends BoxProps {\n  spec: DashboardSpec;\n}\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const { spec, ...others } = props;\n\n  return (\n    <Box {...others}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {spec.layouts.map((layout, idx) => (\n          <GridLayout\n            key={`${JSON.stringify(spec.layouts)} ${idx}`} // reset grid layout states when spec.layout changes\n            groupIndex={idx}\n            definition={layout}\n            renderGridItemContent={(definition, groupIndex) => (\n              <GridItemContent content={definition.content} spec={spec} groupIndex={groupIndex} />\n            )}\n          />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","GridLayout","GridItemContent","Dashboard","props","spec","others","FallbackComponent","layouts","map","layout","idx","groupIndex","definition","renderGridItemContent","content","JSON","stringify"],"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;AAEnE,SAASC,UAAU,EAAEC,eAAe,QAAQ,cAAc,CAAC;AAM3D;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,IAAI,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGF,KAAK,AAAC;IAElC,qBACE,KAACN,GAAG;QAAE,GAAGQ,MAAM;kBACb,cAAA,KAACP,aAAa;YAACQ,iBAAiB,EAAEP,UAAU;sBACzCK,IAAI,CAACG,OAAO,CAACC,GAAG,CAAC,CAACC,MAAM,EAAEC,GAAG,iBAC5B,KAACV,UAAU;oBAETW,UAAU,EAAED,GAAG;oBACfE,UAAU,EAAEH,MAAM;oBAClBI,qBAAqB,EAAE,CAACD,UAAU,EAAED,UAAU,iBAC5C,KAACV,eAAe;4BAACa,OAAO,EAAEF,UAAU,CAACE,OAAO;4BAAEV,IAAI,EAAEA,IAAI;4BAAEO,UAAU,EAAEA,UAAU;0BAAI,AACrF;mBALI,CAAC,EAAEI,IAAI,CAACC,SAAS,CAACZ,IAAI,CAACG,OAAO,CAAC,CAAC,CAAC,EAAEG,GAAG,CAAC,CAAC,CAM7C,AACH,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAmBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA2D5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA2E5D,CAAC"}

package/dist/components/DashboardToolbar.js

@@ -1 +1,154 @@
-import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Toolbar,Typography,Stack,Button,Box}from"@mui/material";import PencilIcon from"mdi-material-ui/PencilOutline";import AddIcon from"mdi-material-ui/Plus";import{useDashboardApp,useEditMode}from"../context";import{TimeRangeControls}from"../components";export const DashboardToolbar=n=>{const{dashboardName:o}=n,{isEditMode:i,setEditMode:t}=useEditMode(),{openPanelDrawer:a,openPanelGroupDialog:s}=useDashboardApp();return _jsx(Toolbar,{disableGutters:!0,sx:{display:"block",padding:n=>n.spacing(2,0)},children:i?_jsxs(_Fragment,{children:[_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsxs(Typography,{variant:"h2",children:["Edit ",o]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"outlined",onClick:()=>{t(!1)},children:"Cancel"}),_jsx(Button,{variant:"contained",children:"Save"})]})]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{display:"flex",justifyContent:"flex-end",width:"100%",padding:n=>n.spacing(2,0)},children:[_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>s(),children:"Add Group"}),_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>a({groupIndex:0}),children:"Add Panel"})]})]}):_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsx(Typography,{variant:"h2",children:o}),_jsxs(Stack,{direction:"row",spacing:2,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"contained",startIcon:_jsx(PencilIcon,{}),onClick:()=>{t(!0)},sx:{marginLeft:"auto"},children:"Edit"})]})]})})};
+// Copyright 2022 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typography, Stack, Button, Box } from '@mui/material';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';
+import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
+import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
+import { useDashboardApp, useEditMode } from '../context';
+import { TemplateVariableList, TimeRangeControls } from '../components';
+export const DashboardToolbar = (props)=>{
+    const { dashboardName  } = props;
+    const { isEditMode , setEditMode  } = useEditMode();
+    const { openPanelDrawer , openPanelGroupDialog  } = useDashboardApp();
+    const onEditButtonClick = ()=>{
+        setEditMode(true);
+    };
+    const onCancelButtonClick = ()=>{
+        setEditMode(false);
+    };
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        backgroundColor: (theme)=>theme.palette.primary.light + '20'
+                    },
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        padding: 2,
+                        display: "flex",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "h2",
+                                children: [
+                                    "Edit ",
+                                    dashboardName
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    marginLeft: 'auto'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        children: "Save"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "outlined",
+                                        onClick: onCancelButtonClick,
+                                        children: "Cancel"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%',
+                        padding: (theme)=>theme.spacing(2)
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: ErrorAlert,
+                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: 'row',
+                            spacing: 1,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    startIcon: /*#__PURE__*/ _jsx(AddPanelGroupIcon, {}),
+                                    onClick: ()=>openPanelGroupDialog(),
+                                    children: "Add Panel Group"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    startIcon: /*#__PURE__*/ _jsx(AddPanelIcon, {}),
+                                    onClick: ()=>openPanelDrawer({
+                                            groupIndex: 0
+                                        }),
+                                    children: "Add Panel"
+                                }),
+                                /*#__PURE__*/ _jsx(TimeRangeControls, {})
+                            ]
+                        })
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            padding: 2,
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h2",
+                            children: dashboardName
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 2,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outlined",
+                                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                                    onClick: onEditButtonClick,
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    children: "Edit"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingY: 2,
+                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                    })
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=DashboardToolbar.js.map

package/dist/components/DashboardToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardApp, useEditMode } from '../context';\nimport { TemplateVariableList, TimeRangeControls } from '../components';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openPanelDrawer, openPanelGroupDialog } = useDashboardApp();\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n  };\n\n  const onCancelButtonClick = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\">Save</Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={() => openPanelGroupDialog()}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={() => openPanelDrawer({ groupIndex: 0 })}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              <Button\n                variant=\"outlined\"\n                startIcon={<PencilIcon />}\n                onClick={onEditButtonClick}\n                sx={{ marginLeft: 'auto' }}\n              >\n                Edit\n              </Button>\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardApp","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","isEditMode","setEditMode","openPanelDrawer","openPanelGroupDialog","onEditButtonClick","onCancelButtonClick","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","FallbackComponent","startIcon","groupIndex","paddingY"],"mappings":"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"}

package/dist/components/GridLayout/GridItemContent.js

@@ -1 +1,35 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{ErrorAlert}from"@perses-dev/components";import{resolvePanelRef}from"@perses-dev/core";import{Panel}from"../Panel/Panel";export function GridItemContent(e){const{content:r,spec:n,groupIndex:o}=e;try{const{panelDefinition:e,panelsKey:t}=resolvePanelRef(n,r);return _jsx(Panel,{definition:e,groupIndex:o,panelKey:t})}catch(e){return _jsx(ErrorAlert,{error:e})}}
+// Copyright 2022 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorAlert } from '@perses-dev/components';
+import { resolvePanelRef } from '@perses-dev/core';
+import { Panel } from '../Panel/Panel';
+/**
+ * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
+ */ export function GridItemContent(props) {
+    const { content , spec , groupIndex  } = props;
+    try {
+        const { panelDefinition , panelsKey  } = resolvePanelRef(spec, content);
+        return /*#__PURE__*/ _jsx(Panel, {
+            definition: panelDefinition,
+            groupIndex: groupIndex,
+            panelKey: panelsKey
+        });
+    } catch (err) {
+        return /*#__PURE__*/ _jsx(ErrorAlert, {
+            error: err
+        });
+    }
+}
+
+//# sourceMappingURL=GridItemContent.js.map

package/dist/components/GridLayout/GridItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2022 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 { ErrorAlert } from '@perses-dev/components';\nimport { DashboardSpec, GridItemDefinition, resolvePanelRef } from '@perses-dev/core';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  spec: DashboardSpec;\n  content: GridItemDefinition['content'];\n  groupIndex: number;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { content, spec, groupIndex } = props;\n  try {\n    const { panelDefinition, panelsKey } = resolvePanelRef(spec, content);\n    return <Panel definition={panelDefinition} groupIndex={groupIndex} panelKey={panelsKey} />;\n  } catch (err) {\n    return <ErrorAlert error={err as Error} />;\n  }\n}\n"],"names":["ErrorAlert","resolvePanelRef","Panel","GridItemContent","props","content","spec","groupIndex","panelDefinition","panelsKey","definition","panelKey","err","error"],"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,UAAU,QAAQ,wBAAwB,CAAC;AACpD,SAA4CC,eAAe,QAAQ,kBAAkB,CAAC;AACtF,SAASC,KAAK,QAAQ,gBAAgB,CAAC;AAQvC;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGH,KAAK,AAAC;IAC5C,IAAI;QACF,MAAM,EAAEI,eAAe,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGR,eAAe,CAACK,IAAI,EAAED,OAAO,CAAC,AAAC;QACtE,qBAAO,KAACH,KAAK;YAACQ,UAAU,EAAEF,eAAe;YAAED,UAAU,EAAEA,UAAU;YAAEI,QAAQ,EAAEF,SAAS;UAAI,CAAC;IAC7F,EAAE,OAAOG,GAAG,EAAE;QACZ,qBAAO,KAACZ,UAAU;YAACa,KAAK,EAAED,GAAG;UAAa,CAAC;IAC7C,CAAC;AACH,CAAC"}

package/dist/components/GridLayout/GridLayout.js

@@ -1 +1,99 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useState}from"react";import{Responsive,WidthProvider}from"react-grid-layout";import{Box,Collapse,GlobalStyles}from"@mui/material";import{styles}from"../../css/styles";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(e){var s,i;const{groupIndex:o,definition:{spec:t},renderGridItemContent:r,...l}=e,[d,a]=useState(!!(null===(i=null===(s=t.display)||void 0===s?void 0:s.collapse)||void 0===i?void 0:i.open)),{isEditMode:n}=useEditMode(),p=[];return t.items.forEach(((e,s)=>{const{x:i,y:t,width:l,height:d}=e;p.push(_jsx("div",{"data-grid":{x:i,y:t,w:l,h:d},children:r(e,o)},s))})),_jsxs(_Fragment,{children:[_jsx(GlobalStyles,{styles}),_jsxs(Box,{...l,component:"section",sx:{"& + &":{marginTop:e=>e.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{groupIndex:o,title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:d,onToggleOpen:()=>a((e=>!e))}}),_jsx(Collapse,{in:d,unmountOnExit:!0,children:_jsx(ResponsiveGridLayout,{className:"layout",breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:24,md:24,sm:24,xs:24,xxs:2},rowHeight:30,draggableHandle:".drag-handle",resizeHandles:["se"],isDraggable:n,isResizable:n,children:p})})]})]})}
+// Copyright 2022 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Responsive, WidthProvider } from 'react-grid-layout';
+import { Box, Collapse, GlobalStyles } from '@mui/material';
+import { styles } from '../../css/styles';
+import { useEditMode } from '../../context';
+import { GridTitle } from './GridTitle';
+const ResponsiveGridLayout = WidthProvider(Responsive);
+/**
+ * Layout component that arranges children in a Grid based on the definition.
+ */ export function GridLayout(props) {
+    var ref, ref1;
+    const { groupIndex , definition: { spec  } , renderGridItemContent , ...others } = props;
+    var ref2;
+    const [isOpen, setIsOpen] = useState((ref2 = (ref = spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) !== null && ref2 !== void 0 ? ref2 : true);
+    const { isEditMode  } = useEditMode();
+    const gridItems = [];
+    spec.items.forEach((item, idx)=>{
+        const { x , y , width: w , height: h  } = item;
+        gridItems.push(/*#__PURE__*/ _jsx("div", {
+            "data-grid": {
+                x,
+                y,
+                w,
+                h
+            },
+            children: renderGridItemContent(item, groupIndex)
+        }, idx));
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(GlobalStyles, {
+                styles: styles
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                ...others,
+                component: "section",
+                sx: {
+                    '& + &': {
+                        marginTop: (theme)=>theme.spacing(1)
+                    }
+                },
+                children: [
+                    spec.display !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
+                        groupIndex: groupIndex,
+                        title: spec.display.title,
+                        collapse: spec.display.collapse === undefined ? undefined : {
+                            isOpen,
+                            onToggleOpen: ()=>setIsOpen((current)=>!current)
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Collapse, {
+                        in: isOpen,
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ _jsx(ResponsiveGridLayout, {
+                            className: "layout",
+                            breakpoints: {
+                                lg: 1200,
+                                md: 996,
+                                sm: 768,
+                                xs: 480,
+                                xxs: 0
+                            },
+                            cols: {
+                                lg: 24,
+                                md: 24,
+                                sm: 24,
+                                xs: 24,
+                                xxs: 2
+                            },
+                            rowHeight: 30,
+                            draggableHandle: '.drag-handle',
+                            resizeHandles: [
+                                'se'
+                            ],
+                            isDraggable: isEditMode,
+                            isResizable: isEditMode,
+                            children: gridItems
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=GridLayout.js.map

package/dist/components/GridLayout/GridLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2022 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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles } from '@mui/material';\nimport { GridDefinition, GridItemDefinition } from '@perses-dev/core';\nimport { styles } from '../../css/styles';\nimport { useEditMode } from '../../context';\nimport { GridTitle } from './GridTitle';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  groupIndex: number;\n  definition: GridDefinition;\n  renderGridItemContent: (definition: GridItemDefinition, groupIndex: number) => React.ReactNode;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const {\n    groupIndex,\n    definition: { spec },\n    renderGridItemContent,\n    ...others\n  } = props;\n\n  const [isOpen, setIsOpen] = useState(spec.display?.collapse?.open ?? true);\n\n  const { isEditMode } = useEditMode();\n\n  const gridItems: React.ReactNode[] = [];\n\n  spec.items.forEach((item, idx) => {\n    const { x, y, width: w, height: h } = item;\n\n    gridItems.push(\n      <div key={idx} data-grid={{ x, y, w, h }}>\n        {renderGridItemContent(item, groupIndex)}\n      </div>\n    );\n  });\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {spec.display !== undefined && (\n          <GridTitle\n            groupIndex={groupIndex}\n            title={spec.display.title}\n            collapse={\n              spec.display.collapse === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}\n            cols={{ lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n          >\n            {gridItems}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","styles","useEditMode","GridTitle","ResponsiveGridLayout","GridLayout","props","spec","groupIndex","definition","renderGridItemContent","others","isOpen","setIsOpen","display","collapse","open","isEditMode","gridItems","items","forEach","item","idx","x","y","width","w","height","h","push","div","data-grid","component","sx","marginTop","theme","spacing","undefined","title","onToggleOpen","current","in","unmountOnExit","className","breakpoints","lg","md","sm","xs","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable"],"mappings":"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"}

package/dist/components/GridLayout/GridTitle.js

@@ -1 +1,77 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Box,IconButton,Stack,Typography}from"@mui/material";import ExpandedIcon from"mdi-material-ui/ChevronUp";import CollapsedIcon from"mdi-material-ui/ChevronDown";import AddIcon from"mdi-material-ui/Plus";import PencilIcon from"mdi-material-ui/PencilOutline";import{useState}from"react";import{useDashboardApp,useEditMode}from"../../context";export function GridTitle(o){const{groupIndex:e,title:n,collapse:t}=o,[r,i]=useState(!1),{openPanelDrawer:a,openPanelGroupDialog:s}=useDashboardApp(),{isEditMode:d}=useEditMode(),c=_jsx(Typography,{variant:"h2",sx:{marginLeft:void 0!==t?1:void 0},children:n});return _jsx(Box,{sx:{display:"flex",justifyContent:"start",alignItems:"center",padding:o=>o.spacing(1),backgroundColor:o=>o.palette.background.default},onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),children:t?_jsxs(_Fragment,{children:[_jsx(IconButton,{onClick:t.onToggleOpen,children:t.isOpen?_jsx(ExpandedIcon,{}):_jsx(CollapsedIcon,{})}),c,d&&r&&_jsxs(Stack,{direction:"row",sx:{marginLeft:"auto"},children:[_jsx(IconButton,{onClick:()=>a({groupIndex:e}),children:_jsx(AddIcon,{})}),_jsx(IconButton,{onClick:()=>s(e),children:_jsx(PencilIcon,{})})]})]}):c})}
+// Copyright 2022 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, IconButton, Stack, Typography } from '@mui/material';
+import ExpandedIcon from 'mdi-material-ui/ChevronUp';
+import CollapsedIcon from 'mdi-material-ui/ChevronDown';
+import AddIcon from 'mdi-material-ui/Plus';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import { useState } from 'react';
+import { useDashboardApp, useEditMode } from '../../context';
+/**
+ * Renders the title for a Grid section, optionally also supporting expanding
+ * and collapsing
+ */ export function GridTitle(props) {
+    const { groupIndex , title , collapse  } = props;
+    const [isHovered, setIsHovered] = useState(false);
+    const { openPanelDrawer , openPanelGroupDialog  } = useDashboardApp();
+    const { isEditMode  } = useEditMode();
+    const text = /*#__PURE__*/ _jsx(Typography, {
+        variant: "h2",
+        sx: {
+            marginLeft: collapse !== undefined ? 1 : undefined
+        },
+        children: title
+    });
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+            padding: (theme)=>theme.spacing(1),
+            backgroundColor: (theme)=>theme.palette.background.default
+        },
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(IconButton, {
+                    onClick: collapse.onToggleOpen,
+                    children: collapse.isOpen ? /*#__PURE__*/ _jsx(ExpandedIcon, {}) : /*#__PURE__*/ _jsx(CollapsedIcon, {})
+                }),
+                text,
+                isEditMode && isHovered && /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    sx: {
+                        marginLeft: 'auto'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            onClick: ()=>openPanelDrawer({
+                                    groupIndex
+                                }),
+                            children: /*#__PURE__*/ _jsx(AddIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            onClick: ()=>openPanelGroupDialog(groupIndex),
+                            children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                        })
+                    ]
+                })
+            ]
+        }) : // If we don't need expand/collapse, just render the title text
+        text
+    });
+}
+
+//# sourceMappingURL=GridTitle.js.map

package/dist/components/GridLayout/GridTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2022 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, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { useState } from 'react';\nimport { useDashboardApp, useEditMode } from '../../context';\n\nexport interface GridTitleProps {\n  groupIndex: number;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { groupIndex, title, collapse } = props;\n\n  const [isHovered, setIsHovered] = useState(false);\n  const { openPanelDrawer, openPanelGroupDialog } = useDashboardApp();\n  const { isEditMode } = useEditMode();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: (theme) => theme.palette.background.default,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && isHovered && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton onClick={() => openPanelDrawer({ groupIndex })}>\n                <AddIcon />\n              </IconButton>\n              <IconButton onClick={() => openPanelGroupDialog(groupIndex)}>\n                <PencilIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddIcon","PencilIcon","useState","useDashboardApp","useEditMode","GridTitle","props","groupIndex","title","collapse","isHovered","setIsHovered","openPanelDrawer","openPanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","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;AAAA,SAASA,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACnE,OAAOC,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAOC,aAAa,MAAM,6BAA6B,CAAC;AACxD,OAAOC,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,eAAe,EAAEC,WAAW,QAAQ,eAAe,CAAC;AAW7D;;;CAGC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,UAAU,CAAA,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGH,KAAK,AAAC;IAE9C,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC,AAAC;IAClD,MAAM,EAAEU,eAAe,CAAA,EAAEC,oBAAoB,CAAA,EAAE,GAAGV,eAAe,EAAE,AAAC;IACpE,MAAM,EAAEW,UAAU,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IAErC,MAAMW,IAAI,iBACR,KAAClB,UAAU;QAACmB,OAAO,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,UAAU,EAAET,QAAQ,KAAKU,SAAS,GAAG,CAAC,GAAGA,SAAS;SAAE;kBAChFX,KAAK;MACK,AACd,AAAC;IAEF,qBACE,KAACd,GAAG;QACFuB,EAAE,EAAE;YACFG,OAAO,EAAE,MAAM;YACfC,cAAc,EAAE,OAAO;YACvBC,UAAU,EAAE,QAAQ;YACpBC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;YACpCC,eAAe,EAAE,CAACF,KAAK,GAAKA,KAAK,CAACG,OAAO,CAACC,UAAU,CAACC,OAAO;SAC7D;QACDC,YAAY,EAAE,IAAMnB,YAAY,CAAC,IAAI,CAAC;QACtCoB,YAAY,EAAE,IAAMpB,YAAY,CAAC,KAAK,CAAC;kBAEtCF,QAAQ,iBACP;;8BACE,KAACd,UAAU;oBAACqC,OAAO,EAAEvB,QAAQ,CAACwB,YAAY;8BACvCxB,QAAQ,CAACyB,MAAM,iBAAG,KAACpC,YAAY,KAAG,iBAAG,KAACC,aAAa,KAAG;kBAC5C;gBACZgB,IAAI;gBACJD,UAAU,IAAIJ,SAAS,kBACtB,MAACd,KAAK;oBAACuC,SAAS,EAAC,KAAK;oBAAClB,EAAE,EAAE;wBAAEC,UAAU,EAAE,MAAM;qBAAE;;sCAC/C,KAACvB,UAAU;4BAACqC,OAAO,EAAE,IAAMpB,eAAe,CAAC;oCAAEL,UAAU;iCAAE,CAAC;sCACxD,cAAA,KAACP,OAAO,KAAG;0BACA;sCACb,KAACL,UAAU;4BAACqC,OAAO,EAAE,IAAMnB,oBAAoB,CAACN,UAAU,CAAC;sCACzD,cAAA,KAACN,UAAU,KAAG;0BACH;;kBACP,AACT;;UACA,GAEH,+DAA+D;QAC/Dc,IAAI,AACL;MACG,CACN;AACJ,CAAC"}

package/dist/components/GridLayout/index.js

@@ -1 +1,16 @@
-export*from"./GridLayout";export*from"./GridItemContent";
+// Copyright 2022 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.
+export * from './GridLayout';
+export * from './GridItemContent';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/index.ts"],"sourcesContent":["// Copyright 2022 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 './GridLayout';\nexport * from './GridItemContent';\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,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2HtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2HtC"}