@perses-dev/components 0.46.0-rc1 → 0.47.0-rc0

package/dist/AlignSelector/AlignSelector.d.ts

@@ -0,0 +1,8 @@
+import { ButtonGroupProps } from '@mui/material';
+export type AlignOption = 'left' | 'center' | 'right';
+export interface AlignSelectorProps extends Omit<ButtonGroupProps, 'onChange'> {
+    onChange: (align: AlignOption) => void;
+    value?: AlignOption;
+}
+export declare function AlignSelector({ onChange, value, ...props }: AlignSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AlignSelector.d.ts.map

package/dist/AlignSelector/AlignSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlignSelector.d.ts","sourceRoot":"","sources":["../../src/AlignSelector/AlignSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAuB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAc,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CA0BvF"}

package/dist/AlignSelector/AlignSelector.js

@@ -0,0 +1,45 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup } from '@mui/material';
+export function AlignSelector({ onChange, value = 'left', ...props }) {
+    const handleSortChange = (option)=>{
+        onChange(option);
+    };
+    return /*#__PURE__*/ _jsxs(ButtonGroup, {
+        "aria-label": "Alignement",
+        sx: {
+            margin: 1
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange('left'),
+                variant: value === 'left' ? 'contained' : 'outlined',
+                children: "Left"
+            }, "left"),
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange('center'),
+                variant: value === 'center' ? 'contained' : 'outlined',
+                children: "Center"
+            }, "center"),
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange('right'),
+                variant: value === 'right' ? 'contained' : 'outlined',
+                children: "Right"
+            }, "right")
+        ]
+    });
+}
+
+//# sourceMappingURL=AlignSelector.js.map

package/dist/AlignSelector/AlignSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AlignSelector/AlignSelector.tsx"],"sourcesContent":["// Copyright 2024 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, ButtonGroup, ButtonGroupProps } from '@mui/material';\n\nexport type AlignOption = 'left' | 'center' | 'right';\n\nexport interface AlignSelectorProps extends Omit<ButtonGroupProps, 'onChange'> {\n  onChange: (align: AlignOption) => void;\n  value?: AlignOption;\n}\n\nexport function AlignSelector({ onChange, value = 'left', ...props }: AlignSelectorProps) {\n  const handleSortChange = (option: AlignOption) => {\n    onChange(option);\n  };\n\n  return (\n    <ButtonGroup aria-label=\"Alignement\" sx={{ margin: 1 }} {...props}>\n      <Button key=\"left\" onClick={() => handleSortChange('left')} variant={value === 'left' ? 'contained' : 'outlined'}>\n        Left\n      </Button>\n      <Button\n        key=\"center\"\n        onClick={() => handleSortChange('center')}\n        variant={value === 'center' ? 'contained' : 'outlined'}\n      >\n        Center\n      </Button>\n      <Button\n        key=\"right\"\n        onClick={() => handleSortChange('right')}\n        variant={value === 'right' ? 'contained' : 'outlined'}\n      >\n        Right\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["Button","ButtonGroup","AlignSelector","onChange","value","props","handleSortChange","option","aria-label","sx","margin","onClick","variant"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,WAAW,QAA0B,gBAAgB;AAStE,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAAEC,QAAQ,MAAM,EAAE,GAAGC,OAA2B;IACtF,MAAMC,mBAAmB,CAACC;QACxBJ,SAASI;IACX;IAEA,qBACE,MAACN;QAAYO,cAAW;QAAaC,IAAI;YAAEC,QAAQ;QAAE;QAAI,GAAGL,KAAK;;0BAC/D,KAACL;gBAAkBW,SAAS,IAAML,iBAAiB;gBAASM,SAASR,UAAU,SAAS,cAAc;0BAAY;eAAtG;0BAGZ,KAACJ;gBAECW,SAAS,IAAML,iBAAiB;gBAChCM,SAASR,UAAU,WAAW,cAAc;0BAC7C;eAHK;0BAMN,KAACJ;gBAECW,SAAS,IAAML,iBAAiB;gBAChCM,SAASR,UAAU,UAAU,cAAc;0BAC5C;eAHK;;;AAQZ"}

package/dist/AlignSelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AlignSelector';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AlignSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC"}

package/dist/AlignSelector/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './AlignSelector';
+
+//# sourceMappingURL=index.js.map

package/dist/AlignSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AlignSelector/index.ts"],"sourcesContent":["// Copyright 2024 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';\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"}

package/dist/ColorPicker/OptionsColorPicker.d.ts

@@ -0,0 +1,7 @@
+export interface OptionsColorPickerProps {
+    label: string;
+    color: string;
+    onColorChange: (color: string) => void;
+}
+export declare function OptionsColorPicker({ color, onColorChange, label }: OptionsColorPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OptionsColorPicker.d.ts.map

package/dist/ColorPicker/OptionsColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/OptionsColorPicker.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CA8C1F"}

package/dist/{ThresholdsEditor/ThresholdColorPicker.js → ColorPicker/OptionsColorPicker.js}

@@ -15,8 +15,8 @@ import React from 'react';
 import { styled, IconButton, Popover } from '@mui/material';
 import CircleIcon from 'mdi-material-ui/Circle';
 import { useChartsTheme } from '../context/ChartsProvider';
-import { ColorPicker } from '../ColorPicker';
-export function ThresholdColorPicker({ color, onColorChange, label }) {
+import { ColorPicker } from './ColorPicker';
+export function OptionsColorPicker({ color, onColorChange, label }) {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const isOpen = Boolean(anchorEl);
     const openColorPicker = (event)=>{
@@ -30,14 +30,14 @@ export function ThresholdColorPicker({ color, onColorChange, label }) {
         children: [
             /*#__PURE__*/ _jsx(ColorIconButton, {
                 size: "small",
-                "aria-label": `change threshold ${label} color`,
+                "aria-label": `change ${label} color`,
                 isSelected: isOpen,
                 iconColor: color,
                 onClick: openColorPicker,
                 children: /*#__PURE__*/ _jsx(CircleIcon, {})
             }),
             /*#__PURE__*/ _jsx(Popover, {
-                "data-testid": "threshold color picker",
+                "data-testid": "options color picker",
                 open: isOpen,
                 anchorEl: anchorEl,
                 onClose: closeColorPicker,
@@ -73,4 +73,4 @@ const ColorIconButton = styled(IconButton, {
         color: iconColor
     }));
 
-//# sourceMappingURL=ThresholdColorPicker.js.map
+//# sourceMappingURL=OptionsColorPicker.js.map

package/dist/ColorPicker/OptionsColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ColorPicker/OptionsColorPicker.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 React from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface OptionsColorPickerProps {\n  label: string;\n  color: string;\n  onColorChange: (color: string) => void;\n}\n\nexport function OptionsColorPicker({ color, onColorChange, label }: OptionsColorPickerProps) {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = () => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"options color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        PaperProps={{ sx: { padding: (theme) => theme.spacing(2) } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} onChange={onColorChange} palette={[defaultColor, ...palette]} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["React","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","OptionsColorPicker","color","onColorChange","label","anchorEl","setAnchorEl","useState","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","PaperProps","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,OAAOA,WAAW,QAAQ;AAC1B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C,OAAO,SAASC,mBAAmB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAA2B;IACzF,MAAM,CAACC,UAAUC,YAAY,GAAGZ,MAAMa,QAAQ,CAA2B;IACzE,MAAMC,SAASC,QAAQJ;IAEvB,MAAMK,kBAAkB,CAACC;QACvBL,YAAYK,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBP,YAAY;IACd;IAEA,MAAM,EACJQ,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGjB;IAEJ,qBACE;;0BACE,KAACkB;gBACCC,MAAK;gBACLC,cAAY,CAAC,OAAO,EAAEf,MAAM,MAAM,CAAC;gBACnCgB,YAAYZ;gBACZa,WAAWnB;gBACXoB,SAASZ;0BAET,cAAA,KAACZ;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMhB;gBACNH,UAAUA;gBACVoB,SAASZ;gBACTa,YAAY;oBAAEC,IAAI;wBAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;oBAAG;gBAAE;gBAC3DC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACjC;oBAAYE,OAAOA;oBAAOiC,UAAUhC;oBAAea,SAAS;wBAACD;2BAAiBC;qBAAQ;;;;;AAI/F;AAEA,MAAMC,kBAAkBtB,OAAOC,YAAY;IACzCwC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEhB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCkB,iBAAiBlB,cAAcC,YAAY,CAAC,EAAEA,UAAU,EAAE,CAAC,GAAG;QAC9DnB,OAAOmB;IACT,CAAA"}

package/dist/ColorPicker/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ColorPicker';
+export * from './OptionsColorPicker';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC"}

package/dist/ColorPicker/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './ColorPicker';
+export * from './OptionsColorPicker';
 
 //# sourceMappingURL=index.js.map

package/dist/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/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 './ColorPicker';\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,gBAAgB"}
+{"version":3,"sources":["../../src/ColorPicker/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 './ColorPicker';\nexport * from './OptionsColorPicker';\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,gBAAgB;AAC9B,cAAc,uBAAuB"}

package/dist/DensitySelector/DensitySelector.d.ts

@@ -0,0 +1,7 @@
+export type DensityOption = 'compact' | 'standard' | 'comfortable';
+export interface DensitySelectorProps {
+    onChange: (density: DensityOption) => void;
+    value?: DensityOption;
+}
+export declare function DensitySelector({ onChange, value }: DensitySelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DensitySelector.d.ts.map

package/dist/DensitySelector/DensitySelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DensitySelector.d.ts","sourceRoot":"","sources":["../../src/DensitySelector/DensitySelector.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAkB,EAAE,EAAE,oBAAoB,2CAmBrF"}

package/dist/DensitySelector/DensitySelector.js

@@ -0,0 +1,46 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OptionsEditorControl } from '../OptionsEditorLayout';
+import { SettingsAutocomplete } from '../SettingsAutocomplete';
+const DENSITY_OPTIONS = [
+    {
+        id: 'compact',
+        label: 'Compact'
+    },
+    {
+        id: 'standard',
+        label: 'Standard'
+    },
+    {
+        id: 'comfortable',
+        label: 'Comfortable'
+    }
+];
+export function DensitySelector({ onChange, value = 'standard' }) {
+    const handleSortChange = (_, { id })=>{
+        onChange(id);
+    };
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: "Density",
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+            value: DENSITY_OPTIONS.find((o)=>o.id === value),
+            options: DENSITY_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleSortChange,
+            disableClearable: true
+        })
+    });
+}
+
+//# sourceMappingURL=DensitySelector.js.map

package/dist/DensitySelector/DensitySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DensitySelector/DensitySelector.tsx"],"sourcesContent":["// Copyright 2024 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 { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst DENSITY_OPTIONS: Array<{ id: DensityOption; label: string }> = [\n  { id: 'compact', label: 'Compact' },\n  { id: 'standard', label: 'Standard' },\n  { id: 'comfortable', label: 'Comfortable' },\n];\n\nexport type DensityOption = 'compact' | 'standard' | 'comfortable';\n\nexport interface DensitySelectorProps {\n  onChange: (density: DensityOption) => void;\n  value?: DensityOption;\n}\n\nexport function DensitySelector({ onChange, value = 'standard' }: DensitySelectorProps) {\n  const handleSortChange = (_: unknown, { id }: { id: DensityOption }) => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Density\"\n      control={\n        <SettingsAutocomplete\n          value={DENSITY_OPTIONS.find((o) => o.id === value)}\n          options={DENSITY_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","DENSITY_OPTIONS","id","label","DensitySelector","onChange","value","handleSortChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,kBAA+D;IACnE;QAAEC,IAAI;QAAWC,OAAO;IAAU;IAClC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;CAC3C;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,UAAU,EAAwB;IACpF,MAAMC,mBAAmB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACjEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}

package/dist/DensitySelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DensitySelector';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DensitySelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,mBAAmB,CAAC"}

package/dist/DensitySelector/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './DensitySelector';
+
+//# sourceMappingURL=index.js.map

package/dist/DensitySelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DensitySelector/index.ts"],"sourcesContent":["// Copyright 2024 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 './DensitySelector';\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,oBAAoB"}

package/dist/Dialog/Dialog.d.ts

@@ -7,17 +7,12 @@ export interface DialogHeaderProps extends DialogTitleProps {
     onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 export type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;
-export interface DialogContentProps extends MuiDialogContentProps {
-    /**
-     * @default 500
-     */
-    width?: number;
-}
+export type DialogContentProps = MuiDialogContentProps;
 export declare const Dialog: {
     ({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
     Header: ({ children, onClose, ...props }: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
     Form: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
-    Content: ({ children, width, sx, ...props }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, sx, ...props }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
     PrimaryButton: ({ children, ...props }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element;
     SecondaryButton: ({ children, ...props }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element;
     Actions: typeof DialogActions;

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGhB,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqDD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAnDT,iBAAiB;;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGhB,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAuDvD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CArDT,iBAAiB;;0CAerB,kBAAkB;4CAMhB,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}

package/dist/Dialog/Dialog.js

@@ -19,6 +19,10 @@ const Header = ({ children, onClose, ...props })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(DialogTitle, {
+                style: {
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden'
+                },
                 ...props,
                 children: children
             }),
@@ -31,11 +35,12 @@ const Header = ({ children, onClose, ...props })=>{
         ]
     });
 };
-const Content = ({ children, width = 500, sx, ...props })=>/*#__PURE__*/ _jsx(DialogContent, {
+const Content = ({ children, sx, ...props })=>/*#__PURE__*/ _jsx(DialogContent, {
         dividers: true,
         ...props,
         sx: combineSx({
-            width: `${width}px`
+            minWidth: `500px`,
+            textWrap: 'balance'
         }, sx),
         children: children
     });

package/dist/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.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 React from 'react';\nimport {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  styled,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n  /**\n   * @default 500\n   */\n  width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle {...props}>{children}</DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"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,OAAOA,WAAW,QAAQ;AAC1B,SACEC,MAAM,EAENC,UAAUC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,EACVC,MAAM,QAED,gBAAgB;AACvB,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAkBrC,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,OAA0B;IAChE,qBACE;;0BACE,KAACR;gBAAa,GAAGQ,KAAK;0BAAGF;;YACxBC,yBACC,KAACN;gBAAWQ,cAAW;gBAAQC,SAASH;gBAASI,IAAIC;0BACnD,cAAA,KAACT;;;;AAKX;AAEA,MAAMU,UAAU,CAAC,EAAEP,QAAQ,EAAEQ,QAAQ,GAAG,EAAEH,EAAE,EAAE,GAAGH,OAA2B,iBAC1E,KAACT;QAAcgB,QAAQ;QAAE,GAAGP,KAAK;QAAEG,IAAIP,UAAU;YAAEU,OAAO,CAAC,EAAEA,MAAM,EAAE,CAAC;QAAC,GAAGH;kBACvEL;;AAIL,MAAMU,gBAAgB,CAAC,EAAEV,QAAQ,EAAE,GAAGE,OAA0B,iBAC9D,KAACb;QAAOsB,SAAQ;QAAYC,MAAK;QAAU,GAAGV,KAAK;kBAChDF;;AAIL,MAAMa,kBAAkB,CAAC,EAAEb,QAAQ,EAAE,GAAGE,OAA0B,iBAChE,KAACb;QAAOsB,SAAQ;QAAWG,OAAM;QAAa,GAAGZ,KAAK;kBACnDF;;AAIL;;;;;CAKC,GACD,MAAMe,OAAOnB,OAAO,QAAQ;IAC1BoB,WAAW;IACXC,SAAS;IACTC,eAAe;AACjB;AAEA;;;CAGC,GACD,MAAMZ,6BAA6B,CAACa;IAClC,OAAO;QAAEC,UAAU;QAAYC,KAAKF,MAAMG,OAAO,CAAC;QAAMC,OAAOJ,MAAMG,OAAO,CAAC;IAAK;AACpF;AAEA,OAAO,MAAMhC,SAAS,CAAC,EAAEU,QAAQ,EAAE,GAAGE,OAAoB,iBAAK,KAACX;QAAW,GAAGW,KAAK;kBAAGF;OAAsB;AAE5GV,OAAOS,MAAM,GAAGA;AAChBT,OAAOyB,IAAI,GAAGA;AACdzB,OAAOiB,OAAO,GAAGA;AACjBjB,OAAOoB,aAAa,GAAGA;AACvBpB,OAAOuB,eAAe,GAAGA;AACzBvB,OAAOkC,OAAO,GAAGhC"}
+{"version":3,"sources":["../../src/Dialog/Dialog.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 React from 'react';\nimport {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  styled,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport type DialogContentProps = MuiDialogContentProps;\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} {...props}>\n        {children}\n      </DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ minWidth: `500px`, textWrap: 'balance' }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","style","textOverflow","overflow","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","dividers","minWidth","textWrap","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"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,OAAOA,WAAW,QAAQ;AAC1B,SACEC,MAAM,EAENC,UAAUC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,EACVC,MAAM,QAED,gBAAgB;AACvB,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAarC,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,OAA0B;IAChE,qBACE;;0BACE,KAACR;gBAAYS,OAAO;oBAAEC,cAAc;oBAAYC,UAAU;gBAAS;gBAAI,GAAGH,KAAK;0BAC5EF;;YAEFC,yBACC,KAACN;gBAAWW,cAAW;gBAAQC,SAASN;gBAASO,IAAIC;0BACnD,cAAA,KAACZ;;;;AAKX;AAEA,MAAMa,UAAU,CAAC,EAAEV,QAAQ,EAAEQ,EAAE,EAAE,GAAGN,OAA2B,iBAC7D,KAACT;QAAckB,QAAQ;QAAE,GAAGT,KAAK;QAAEM,IAAIV,UAAU;YAAEc,UAAU,CAAC,KAAK,CAAC;YAAEC,UAAU;QAAU,GAAGL;kBAC1FR;;AAIL,MAAMc,gBAAgB,CAAC,EAAEd,QAAQ,EAAE,GAAGE,OAA0B,iBAC9D,KAACb;QAAO0B,SAAQ;QAAYC,MAAK;QAAU,GAAGd,KAAK;kBAChDF;;AAIL,MAAMiB,kBAAkB,CAAC,EAAEjB,QAAQ,EAAE,GAAGE,OAA0B,iBAChE,KAACb;QAAO0B,SAAQ;QAAWG,OAAM;QAAa,GAAGhB,KAAK;kBACnDF;;AAIL;;;;;CAKC,GACD,MAAMmB,OAAOvB,OAAO,QAAQ;IAC1BwB,WAAW;IACXC,SAAS;IACTC,eAAe;AACjB;AAEA;;;CAGC,GACD,MAAMb,6BAA6B,CAACc;IAClC,OAAO;QAAEC,UAAU;QAAYC,KAAKF,MAAMG,OAAO,CAAC;QAAMC,OAAOJ,MAAMG,OAAO,CAAC;IAAK;AACpF;AAEA,OAAO,MAAMpC,SAAS,CAAC,EAAEU,QAAQ,EAAE,GAAGE,OAAoB,iBAAK,KAACX;QAAW,GAAGW,KAAK;kBAAGF;OAAsB;AAE5GV,OAAOS,MAAM,GAAGA;AAChBT,OAAO6B,IAAI,GAAGA;AACd7B,OAAOoB,OAAO,GAAGA;AACjBpB,OAAOwB,aAAa,GAAGA;AACvBxB,OAAO2B,eAAe,GAAGA;AACzB3B,OAAOsC,OAAO,GAAGpC"}

package/dist/LinksEditor/LinksEditor.d.ts

@@ -1,3 +1,8 @@
 import { HTMLAttributes } from 'react';
-export declare function LinksEditor({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+import { Control } from 'react-hook-form';
+import { PanelEditorValues } from '@perses-dev/core';
+export interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {
+    control: Control<PanelEditorValues>;
+}
+export declare function LinksEditor({ control, ...props }: LinksEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LinksEditor.d.ts.map

package/dist/LinksEditor/LinksEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinksEditor.d.ts","sourceRoot":"","sources":["../../src/LinksEditor/LinksEditor.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAY,cAAc,EAAE,MAAM,OAAO,CAAC;AAMxD,wBAAgB,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,2CA6BvE"}
+{"version":3,"file":"LinksEditor.d.ts","sourceRoot":"","sources":["../../src/LinksEditor/LinksEditor.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAY,cAAc,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAA6B,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACrC;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CA8BlE"}

package/dist/LinksEditor/LinksEditor.js

@@ -16,9 +16,10 @@ import { Checkbox, Divider, FormControlLabel, IconButton, Stack, TextField, Typo
 import { Controller, useFieldArray } from 'react-hook-form';
 import PlusIcon from 'mdi-material-ui/Plus';
 import MinusIcon from 'mdi-material-ui/Minus';
-export function LinksEditor({ ...props }) {
+export function LinksEditor({ control, ...props }) {
     const { fields, append, remove } = useFieldArray({
-        name: 'links'
+        control: control,
+        name: 'panelDefinition.spec.links'
     });
     return /*#__PURE__*/ _jsxs(Stack, {
         ...props,
@@ -32,6 +33,7 @@ export function LinksEditor({ ...props }) {
                             alignItems: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(LinkControl, {
+                                    control: control,
                                     index: index
                                 }),
                                 /*#__PURE__*/ _jsx(IconButton, {
@@ -65,7 +67,7 @@ export function LinksEditor({ ...props }) {
         ]
     });
 }
-function LinkControl({ index }) {
+function LinkControl({ control, index }) {
     return /*#__PURE__*/ _jsxs(Stack, {
         gap: 2,
         flexGrow: 1,
@@ -75,7 +77,8 @@ function LinkControl({ index }) {
                 gap: 2,
                 children: [
                     /*#__PURE__*/ _jsx(Controller, {
-                        name: `links.${index}.url`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.url`,
                         render: ({ field, fieldState })=>{
                             var _fieldState_error;
                             return /*#__PURE__*/ _jsx(TextField, {
@@ -92,7 +95,8 @@ function LinkControl({ index }) {
                         }
                     }),
                     /*#__PURE__*/ _jsx(Controller, {
-                        name: `links.${index}.name`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.name`,
                         render: ({ field, fieldState })=>{
                             var _fieldState_error;
                             return /*#__PURE__*/ _jsx(TextField, {
@@ -109,7 +113,8 @@ function LinkControl({ index }) {
                         }
                     }),
                     /*#__PURE__*/ _jsx(Controller, {
-                        name: `links.${index}.tooltip`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.tooltip`,
                         render: ({ field, fieldState })=>{
                             var _fieldState_error;
                             return /*#__PURE__*/ _jsx(TextField, {
@@ -133,7 +138,8 @@ function LinkControl({ index }) {
                 alignItems: "center",
                 children: [
                     /*#__PURE__*/ _jsx(Controller, {
-                        name: `links.${index}.renderVariables`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.renderVariables`,
                         render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
                                 label: "Render Variables",
                                 control: /*#__PURE__*/ _jsx(Checkbox, {
@@ -144,7 +150,8 @@ function LinkControl({ index }) {
                             })
                     }),
                     /*#__PURE__*/ _jsx(Controller, {
-                        name: `links.${index}.targetBlank`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.targetBlank`,
                         render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
                                 label: "Open in new tab",
                                 control: /*#__PURE__*/ _jsx(Checkbox, {

package/dist/LinksEditor/LinksEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinksEditor/LinksEditor.tsx"],"sourcesContent":["// Copyright 2024 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 React, { Fragment, HTMLAttributes } from 'react';\nimport { Checkbox, Divider, FormControlLabel, IconButton, Stack, TextField, Typography } from '@mui/material';\nimport { Controller, useFieldArray } from 'react-hook-form';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport MinusIcon from 'mdi-material-ui/Minus';\n\nexport function LinksEditor({ ...props }: HTMLAttributes<HTMLDivElement>) {\n  const { fields, append, remove } = useFieldArray({\n    name: 'links',\n  });\n\n  return (\n    <Stack {...props} gap={3}>\n      {fields && fields.length > 0 ? (\n        fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <Stack direction=\"row\" gap={1} alignItems=\"center\">\n              <LinkControl index={index} />\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => remove(index)}>\n                <MinusIcon />\n              </IconButton>\n            </Stack>\n            <Divider />\n          </Fragment>\n        ))\n      ) : (\n        <Typography variant=\"subtitle1\" mb={2} fontStyle=\"italic\">\n          No links defined\n        </Typography>\n      )}\n      <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => append({ url: '' })}>\n        <PlusIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction LinkControl({ index }: { index: number }) {\n  return (\n    <Stack gap={2} flexGrow={1}>\n      <Stack direction=\"row\" gap={2}>\n        <Controller\n          name={`links.${index}.url`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              required\n              fullWidth\n              label=\"URL\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          name={`links.${index}.name`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Name\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          name={`links.${index}.tooltip`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Tooltip\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n      </Stack>\n      <Stack gap={2} direction=\"row\" alignItems=\"center\">\n        <Controller\n          name={`links.${index}.renderVariables`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Render Variables\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n        <Controller\n          name={`links.${index}.targetBlank`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Open in new tab\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["React","Fragment","Checkbox","Divider","FormControlLabel","IconButton","Stack","TextField","Typography","Controller","useFieldArray","PlusIcon","MinusIcon","LinksEditor","props","fields","append","remove","name","gap","length","map","field","index","direction","alignItems","LinkControl","style","width","height","onClick","id","variant","mb","fontStyle","url","flexGrow","render","fieldState","required","fullWidth","label","error","helperText","message","onChange","event","defaultValue","control","checked","value","e","target"],"mappings":"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"}
+{"version":3,"sources":["../../src/LinksEditor/LinksEditor.tsx"],"sourcesContent":["// Copyright 2024 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 React, { Fragment, HTMLAttributes } from 'react';\nimport { Checkbox, Divider, FormControlLabel, IconButton, Stack, TextField, Typography } from '@mui/material';\nimport { Controller, useFieldArray, Control } from 'react-hook-form';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport { PanelEditorValues } from '@perses-dev/core';\n\nexport interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {\n  control: Control<PanelEditorValues>;\n}\n\nexport function LinksEditor({ control, ...props }: LinksEditorProps) {\n  const { fields, append, remove } = useFieldArray({\n    control: control,\n    name: 'panelDefinition.spec.links',\n  });\n\n  return (\n    <Stack {...props} gap={3}>\n      {fields && fields.length > 0 ? (\n        fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <Stack direction=\"row\" gap={1} alignItems=\"center\">\n              <LinkControl control={control} index={index} />\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => remove(index)}>\n                <MinusIcon />\n              </IconButton>\n            </Stack>\n            <Divider />\n          </Fragment>\n        ))\n      ) : (\n        <Typography variant=\"subtitle1\" mb={2} fontStyle=\"italic\">\n          No links defined\n        </Typography>\n      )}\n      <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => append({ url: '' })}>\n        <PlusIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction LinkControl({ control, index }: { control: Control<PanelEditorValues>; index: number }) {\n  return (\n    <Stack gap={2} flexGrow={1}>\n      <Stack direction=\"row\" gap={2}>\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.url`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              required\n              fullWidth\n              label=\"URL\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.name`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Name\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.tooltip`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Tooltip\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n      </Stack>\n      <Stack gap={2} direction=\"row\" alignItems=\"center\">\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.renderVariables`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Render Variables\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.targetBlank`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Open in new tab\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["React","Fragment","Checkbox","Divider","FormControlLabel","IconButton","Stack","TextField","Typography","Controller","useFieldArray","PlusIcon","MinusIcon","LinksEditor","control","props","fields","append","remove","name","gap","length","map","field","index","direction","alignItems","LinkControl","style","width","height","onClick","id","variant","mb","fontStyle","url","flexGrow","render","fieldState","required","fullWidth","label","error","helperText","message","onChange","event","defaultValue","checked","value","e","target"],"mappings":"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"}

package/dist/Overlay/Overlay.d.ts

@@ -0,0 +1,15 @@
+import { SkeletonOwnProps } from '@mui/material';
+interface TextOverlayProps {
+    message: string;
+}
+export declare function TextOverlay(props: TextOverlayProps): import("react/jsx-runtime").JSX.Element;
+interface NoDataOverlayProps {
+    resource: string;
+}
+export declare function NoDataOverlay(props: NoDataOverlayProps): import("react/jsx-runtime").JSX.Element;
+interface LoadingOverlayProps {
+    variant?: SkeletonOwnProps['variant'];
+}
+export declare function LoadingOverlay(props: LoadingOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Overlay.d.ts.map

package/dist/Overlay/Overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAY,gBAAgB,EAAqB,MAAM,eAAe,CAAC;AAE9E,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAQlD;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAItD;AAED,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;CACvC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAQxD"}

package/dist/Overlay/Overlay.js

@@ -0,0 +1,52 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton, Stack, Typography } from '@mui/material';
+export function TextOverlay(props) {
+    const { message } = props;
+    return /*#__PURE__*/ _jsx(Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ _jsx(Typography, {
+            children: message
+        })
+    });
+}
+export function NoDataOverlay(props) {
+    const { resource } = props;
+    return /*#__PURE__*/ _jsx(TextOverlay, {
+        message: `No ${resource}`
+    });
+}
+export function LoadingOverlay(props) {
+    const { variant = 'rounded' } = props;
+    return /*#__PURE__*/ _jsx(Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '0 10px'
+        },
+        children: /*#__PURE__*/ _jsx(Skeleton, {
+            variant: variant,
+            width: "100%",
+            height: "30%",
+            "aria-label": "Loading..."
+        })
+    });
+}
+
+//# sourceMappingURL=Overlay.js.map

package/dist/Overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Overlay/Overlay.tsx"],"sourcesContent":["// Copyright 2024 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 { Skeleton, SkeletonOwnProps, Stack, Typography } from '@mui/material';\n\ninterface TextOverlayProps {\n  message: string;\n}\n\nexport function TextOverlay(props: TextOverlayProps) {\n  const { message } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>\n      <Typography>{message}</Typography>\n    </Stack>\n  );\n}\n\ninterface NoDataOverlayProps {\n  resource: string;\n}\n\nexport function NoDataOverlay(props: NoDataOverlayProps) {\n  const { resource } = props;\n\n  return <TextOverlay message={`No ${resource}`} />;\n}\n\ninterface LoadingOverlayProps {\n  variant?: SkeletonOwnProps['variant'];\n}\n\nexport function LoadingOverlay(props: LoadingOverlayProps) {\n  const { variant = 'rounded' } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center', padding: '0 10px' }}>\n      <Skeleton variant={variant} width=\"100%\" height=\"30%\" aria-label=\"Loading...\" />\n    </Stack>\n  );\n}\n"],"names":["Skeleton","Stack","Typography","TextOverlay","props","message","sx","height","alignItems","justifyContent","NoDataOverlay","resource","LoadingOverlay","variant","padding","width","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,SAASA,QAAQ,EAAoBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAM9E,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;QAAS;kBAC1E,cAAA,KAACP;sBAAYG;;;AAGnB;AAMA,OAAO,SAASK,cAAcN,KAAyB;IACrD,MAAM,EAAEO,QAAQ,EAAE,GAAGP;IAErB,qBAAO,KAACD;QAAYE,SAAS,CAAC,GAAG,EAAEM,SAAS,CAAC;;AAC/C;AAMA,OAAO,SAASC,eAAeR,KAA0B;IACvD,MAAM,EAAES,UAAU,SAAS,EAAE,GAAGT;IAEhC,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;YAAUK,SAAS;QAAS;kBAC7F,cAAA,KAACd;YAASa,SAASA;YAASE,OAAM;YAAOR,QAAO;YAAMS,cAAW;;;AAGvE"}

package/dist/Overlay/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Overlay';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Overlay/index.ts"],"names":[],"mappings":"AAaA,cAAc,WAAW,CAAC"}