@perses-dev/components 0.17.0 → 0.18.0

package/dist/InfoTooltip/InfoTooltip.js

@@ -62,14 +62,14 @@ const StyledTooltip = styled(({ className , ...props })=>/*#__PURE__*/ _jsx(MuiT
         }
     }))(({ theme  })=>({
         [`& .${tooltipClasses.tooltip}`]: {
-            backgroundColor: theme.palette.grey[100],
+            backgroundColor: theme.palette.background.tooltip,
             color: theme.palette.text.primary,
             maxWidth: '300px',
             padding: theme.spacing(1),
             boxShadow: theme.shadows[1]
         },
         [`& .${tooltipClasses.arrow}`]: {
-            color: theme.palette.grey[100]
+            color: theme.palette.background.tooltip
         }
     }));
 

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport enum TooltipPlacement {\n  Top = 'top',\n  Left = 'left',\n  Right = 'right',\n  Bottom = 'bottom',\n}\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n}\n\nexport const InfoTooltip = ({ id, title, description, placement, children }: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement}\n      title={<TooltipContent title={title} description={description} />}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.grey[100],\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.grey[100],\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","TooltipPlacement","Top","Left","Right","Bottom","InfoTooltip","id","title","description","placement","children","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","grey","maxWidth","padding","spacing","boxShadow","shadows"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SACEC,MAAM,EAENC,OAAO,IAAIC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,eAAe,CAAC;WAEhB,gBAKN;UALWC,gBAAgB;IAAhBA,gBAAgB,CAC1BC,KAAG,IAAG,KAAK;IADDD,gBAAgB,CAE1BE,MAAI,IAAG,MAAM;IAFHF,gBAAgB,CAG1BG,OAAK,IAAG,OAAO;IAHLH,gBAAgB,CAI1BI,QAAM,IAAG,QAAQ;GAJPJ,gBAAgB,KAAhBA,gBAAgB;AAe5B,OAAO,MAAMK,WAAW,GAAG,CAAC,EAAEC,EAAE,CAAA,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAEC,QAAQ,CAAA,EAAoB,GAAK;IAChG,qBACE,KAACC,aAAa;QACZC,KAAK;QACLN,EAAE,EAAEA,EAAE;QACNG,SAAS,EAAEA,SAAS;QACpBF,KAAK,gBAAE,KAACM,cAAc;YAACN,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;UAAI;kBAEjE,cAAA,KAACM,KAAG;sBAAEJ,QAAQ;UAAO;MACP,CAChB;AACJ,CAAC,CAAC;AAEF,MAAMG,cAAc,GAAG,CAAC,EAAEN,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAmD,GAAK;IAClG,qBACE;;YACGD,KAAK,kBACJ,KAACR,UAAU;gBACTgB,OAAO,EAAC,OAAO;gBACfC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,UAAU,EAAEL,KAAK,CAACM,UAAU,CAACC,gBAAgB;qBAC9C,CAAA,AAAC;0BAEDjB,KAAK;cACK,AACd;0BACD,KAACR,UAAU;gBACTgB,OAAO,EAAC,SAAS;gBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;qBAClC,CAAA,AAAC;0BAEDb,WAAW;cACD;;MACZ,CACH;AACJ,CAAC,AAAC;AAEF,MAAMG,aAAa,GAAGhB,MAAM,CAAC,CAAC,EAAE8B,SAAS,CAAA,EAAE,GAAGC,KAAK,EAAmB,iBACpE,KAAC7B,UAAU;QAAE,GAAG6B,KAAK;QAAEC,OAAO,EAAE;YAAEC,MAAM,EAAEH,SAAS;SAAE;MAAI,AAC1D,CAAC,CAAC,CAAC,EAAER,KAAK,CAAA,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEnB,cAAc,CAAC+B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,eAAe,EAAEb,KAAK,CAACE,OAAO,CAACY,IAAI,CAAC,GAAG,CAAC;YACxCb,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,QAAQ,EAAE,OAAO;YACjBC,OAAO,EAAEhB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC;YACzBC,SAAS,EAAElB,KAAK,CAACmB,OAAO,CAAC,CAAC,CAAC;SAC5B;QACD,CAAC,CAAC,GAAG,EAAEtC,cAAc,CAACc,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BM,KAAK,EAAED,KAAK,CAACE,OAAO,CAACY,IAAI,CAAC,GAAG,CAAC;SAC/B;KACF,CAAA,AAAC,CAAC,AAAC"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport enum TooltipPlacement {\n  Top = 'top',\n  Left = 'left',\n  Right = 'right',\n  Bottom = 'bottom',\n}\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n}\n\nexport const InfoTooltip = ({ id, title, description, placement, children }: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement}\n      title={<TooltipContent title={title} description={description} />}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","TooltipPlacement","Top","Left","Right","Bottom","InfoTooltip","id","title","description","placement","children","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SACEC,MAAM,EAENC,OAAO,IAAIC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,eAAe,CAAC;WAEhB,gBAKN;UALWC,gBAAgB;IAAhBA,gBAAgB,CAC1BC,KAAG,IAAG,KAAK;IADDD,gBAAgB,CAE1BE,MAAI,IAAG,MAAM;IAFHF,gBAAgB,CAG1BG,OAAK,IAAG,OAAO;IAHLH,gBAAgB,CAI1BI,QAAM,IAAG,QAAQ;GAJPJ,gBAAgB,KAAhBA,gBAAgB;AAe5B,OAAO,MAAMK,WAAW,GAAG,CAAC,EAAEC,EAAE,CAAA,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAEC,QAAQ,CAAA,EAAoB,GAAK;IAChG,qBACE,KAACC,aAAa;QACZC,KAAK;QACLN,EAAE,EAAEA,EAAE;QACNG,SAAS,EAAEA,SAAS;QACpBF,KAAK,gBAAE,KAACM,cAAc;YAACN,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;UAAI;kBAEjE,cAAA,KAACM,KAAG;sBAAEJ,QAAQ;UAAO;MACP,CAChB;AACJ,CAAC,CAAC;AAEF,MAAMG,cAAc,GAAG,CAAC,EAAEN,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAmD,GAAK;IAClG,qBACE;;YACGD,KAAK,kBACJ,KAACR,UAAU;gBACTgB,OAAO,EAAC,OAAO;gBACfC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,UAAU,EAAEL,KAAK,CAACM,UAAU,CAACC,gBAAgB;qBAC9C,CAAA,AAAC;0BAEDjB,KAAK;cACK,AACd;0BACD,KAACR,UAAU;gBACTgB,OAAO,EAAC,SAAS;gBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;qBAClC,CAAA,AAAC;0BAEDb,WAAW;cACD;;MACZ,CACH;AACJ,CAAC,AAAC;AAEF,MAAMG,aAAa,GAAGhB,MAAM,CAAC,CAAC,EAAE8B,SAAS,CAAA,EAAE,GAAGC,KAAK,EAAmB,iBACpE,KAAC7B,UAAU;QAAE,GAAG6B,KAAK;QAAEC,OAAO,EAAE;YAAEC,MAAM,EAAEH,SAAS;SAAE;MAAI,AAC1D,CAAC,CAAC,CAAC,EAAER,KAAK,CAAA,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEnB,cAAc,CAAC+B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,eAAe,EAAEb,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;YACjDX,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,QAAQ,EAAE,OAAO;YACjBC,OAAO,EAAEhB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC;YACzBC,SAAS,EAAElB,KAAK,CAACmB,OAAO,CAAC,CAAC,CAAC;SAC5B;QACD,CAAC,CAAC,GAAG,EAAEtC,cAAc,CAACc,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BM,KAAK,EAAED,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;SACxC;KACF,CAAA,AAAC,CAAC,AAAC"}

package/dist/JSONEditor.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface JSONEditorProps<Spec> {
     value: Spec;
-    onChange: (next: Spec) => void;
+    onChange?: (next: Spec) => void;
 }
 export declare function JSONEditor<T>(props: JSONEditorProps<T>): JSX.Element;
 export {};

package/dist/JSONEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":";AAgBA,UAAU,eAAe,CAAC,IAAI;IAC5B,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAgCtD"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":";AAgBA,UAAU,eAAe,CAAC,IAAI;IAC5B,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAmCtD"}

package/dist/JSONEditor.js

@@ -33,11 +33,14 @@ export function JSONEditor(props) {
         onChange: (event)=>{
             setValue(event.target.value);
         },
+        maxRows: 20,
         onBlur: ()=>{
             try {
                 const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
                 setInvalidJSON(false);
-                props.onChange(json);
+                if (props.onChange !== undefined) {
+                    props.onChange(json);
+                }
             } catch (e) {
                 setInvalidJSON(true);
             }

package/dist/JSONEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/JSONEditor.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 { useEffect, useState } from 'react';\nimport { TextField } from '@mui/material';\n\ninterface JSONEditorProps<Spec> {\n  value: Spec;\n  onChange: (next: Spec) => void;\n}\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>) {\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [invalidJSON, setInvalidJSON] = useState(false);\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n    setInvalidJSON(false);\n  }, [props.value]);\n\n  // TODO: replace with CodeMirror editor\n  return (\n    <TextField\n      label=\"JSON\"\n      error={invalidJSON}\n      helperText={invalidJSON ? 'Invalid JSON' : ''}\n      multiline\n      fullWidth\n      value={value}\n      onChange={(event) => {\n        setValue(event.target.value);\n      }}\n      onBlur={() => {\n        try {\n          const json = JSON.parse(value ?? '{}');\n          setInvalidJSON(false);\n          props.onChange(json);\n        } catch (e) {\n          setInvalidJSON(true);\n        }\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useState","TextField","JSONEditor","props","value","setValue","JSON","stringify","invalidJSON","setInvalidJSON","label","error","helperText","multiline","fullWidth","onChange","event","target","onBlur","json","parse","e"],"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,SAAS,QAAQ,eAAe,CAAC;AAO1C,OAAO,SAASC,UAAU,CAAIC,KAAyB,EAAE;IACvD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAAC,IAAMM,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,AAAC;IAC/E,MAAM,CAACI,WAAW,EAAEC,cAAc,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC,AAAC;IAEtDD,SAAS,CAAC,IAAM;QACdM,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/CK,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE;QAACN,KAAK,CAACC,KAAK;KAAC,CAAC,CAAC;IAElB,uCAAuC;IACvC,qBACE,KAACH,SAAS;QACRS,KAAK,EAAC,MAAM;QACZC,KAAK,EAAEH,WAAW;QAClBI,UAAU,EAAEJ,WAAW,GAAG,cAAc,GAAG,EAAE;QAC7CK,SAAS;QACTC,SAAS;QACTV,KAAK,EAAEA,KAAK;QACZW,QAAQ,EAAE,CAACC,KAAK,GAAK;YACnBX,QAAQ,CAACW,KAAK,CAACC,MAAM,CAACb,KAAK,CAAC,CAAC;QAC/B,CAAC;QACDc,MAAM,EAAE,IAAM;YACZ,IAAI;gBACF,MAAMC,IAAI,GAAGb,IAAI,CAACc,KAAK,CAAChB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAAC,AAAC;gBACvCK,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtBN,KAAK,CAACY,QAAQ,CAACI,IAAI,CAAC,CAAC;YACvB,EAAE,OAAOE,CAAC,EAAE;gBACVZ,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;MACD,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../src/JSONEditor.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 { useEffect, useState } from 'react';\nimport { TextField } from '@mui/material';\n\ninterface JSONEditorProps<Spec> {\n  value: Spec;\n  onChange?: (next: Spec) => void;\n}\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>) {\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [invalidJSON, setInvalidJSON] = useState(false);\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n    setInvalidJSON(false);\n  }, [props.value]);\n\n  // TODO: replace with CodeMirror editor\n  return (\n    <TextField\n      label=\"JSON\"\n      error={invalidJSON}\n      helperText={invalidJSON ? 'Invalid JSON' : ''}\n      multiline\n      fullWidth\n      value={value}\n      onChange={(event) => {\n        setValue(event.target.value);\n      }}\n      maxRows={20}\n      onBlur={() => {\n        try {\n          const json = JSON.parse(value ?? '{}');\n          setInvalidJSON(false);\n          if (props.onChange !== undefined) {\n            props.onChange(json);\n          }\n        } catch (e) {\n          setInvalidJSON(true);\n        }\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useState","TextField","JSONEditor","props","value","setValue","JSON","stringify","invalidJSON","setInvalidJSON","label","error","helperText","multiline","fullWidth","onChange","event","target","maxRows","onBlur","json","parse","undefined","e"],"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,SAAS,QAAQ,eAAe,CAAC;AAO1C,OAAO,SAASC,UAAU,CAAIC,KAAyB,EAAE;IACvD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAAC,IAAMM,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,AAAC;IAC/E,MAAM,CAACI,WAAW,EAAEC,cAAc,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC,AAAC;IAEtDD,SAAS,CAAC,IAAM;QACdM,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/CK,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE;QAACN,KAAK,CAACC,KAAK;KAAC,CAAC,CAAC;IAElB,uCAAuC;IACvC,qBACE,KAACH,SAAS;QACRS,KAAK,EAAC,MAAM;QACZC,KAAK,EAAEH,WAAW;QAClBI,UAAU,EAAEJ,WAAW,GAAG,cAAc,GAAG,EAAE;QAC7CK,SAAS;QACTC,SAAS;QACTV,KAAK,EAAEA,KAAK;QACZW,QAAQ,EAAE,CAACC,KAAK,GAAK;YACnBX,QAAQ,CAACW,KAAK,CAACC,MAAM,CAACb,KAAK,CAAC,CAAC;QAC/B,CAAC;QACDc,OAAO,EAAE,EAAE;QACXC,MAAM,EAAE,IAAM;YACZ,IAAI;gBACF,MAAMC,IAAI,GAAGd,IAAI,CAACe,KAAK,CAACjB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAAC,AAAC;gBACvCK,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,IAAIN,KAAK,CAACY,QAAQ,KAAKO,SAAS,EAAE;oBAChCnB,KAAK,CAACY,QAAQ,CAACK,IAAI,CAAC,CAAC;gBACvB,CAAC;YACH,EAAE,OAAOG,CAAC,EAAE;gBACVd,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;MACD,CACF;AACJ,CAAC"}

package/dist/Legend/CompactLegend.js

@@ -18,11 +18,18 @@ import { ListLegendItem } from './ListLegendItem';
  * which corresponds to when legend.position is `bottom`
  */ export function CompactLegend({ height , items  }) {
     return /*#__PURE__*/ _jsx(Box, {
+        component: "ul",
         sx: {
             width: '100%',
             height,
-            paddingTop: 1,
-            overflowY: 'scroll'
+            padding: [
+                0,
+                1,
+                0,
+                0
+            ],
+            overflowY: 'scroll',
+            margin: 0
         },
         children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.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 } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom`\n */\nexport function CompactLegend({ height, items }: CompactLegendProps) {\n  return (\n    <Box sx={{ width: '100%', height, paddingTop: 1, overflowY: 'scroll' }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","sx","width","paddingTop","overflowY","map","item","float","paddingRight","id"],"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,QAAQ,eAAe,CAAC;AAEpC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;CAGC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEH,MAAM;YAAEI,UAAU,EAAE,CAAC;YAAEC,SAAS,EAAE,QAAQ;SAAE;kBACnEJ,KAAK,CAACK,GAAG,CAAC,CAACC,IAAI,iBACd,KAACT,cAAc;gBAEbS,IAAI,EAAEA,IAAI;gBACVL,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbK,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.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 } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom`\n */\nexport function CompactLegend({ height, items }: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","component","sx","width","padding","overflowY","margin","map","item","float","paddingRight","id"],"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,QAAQ,eAAe,CAAC;AAEpC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;CAGC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEJ,MAAM;YAAEK,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,iBACd,KAACX,cAAc;gBAEbW,IAAI,EAAEA,IAAI;gBACVN,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbM,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,mBAAoB,SAAQ,aAAa;IACjD,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAuBzB,CAAC"}
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,mBAAoB,SAAQ,aAAa;IACjD,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAsBzB,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -24,7 +24,6 @@ export const ListLegendItem = /*#__PURE__*/ React.memo(function ListLegendItem({
             cursor: 'pointer'
         }, sx),
         dense: true,
-        "data-testid": `legend-item-${item.color}`,
         key: item.id,
         onClick: item.onClick,
         selected: item.isSelected,

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.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 React from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item, sx, ...others }: ListLegendItemProps) {\n  return (\n    <ListItem\n      {...others}\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      data-testid={`legend-item-${item.color}`}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItem","memo","item","sx","others","padding","cursor","dense","data-testid","color","key","id","onClick","selected","isSelected","display","alignItems","primary","label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGN,KAAK,CAACO,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAuB,EAAE;IAC7G,qBACE,eAACP,QAAQ;QACN,GAAGO,MAAM;QACVD,EAAE,EAAEL,SAAS,CACX;YACEO,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDH,EAAE,CACH;QACDI,KAAK,EAAE,IAAI;QACXC,aAAW,EAAE,CAAC,YAAY,EAAEN,IAAI,CAACO,KAAK,CAAC,CAAC;QACxCC,GAAG,EAAER,IAAI,CAACS,EAAE;QACZC,OAAO,EAAEV,IAAI,CAACU,OAAO;QACrBC,QAAQ,EAAEX,IAAI,CAACY,UAAU;;0BAEzB,KAACnB,GAAG;gBAACQ,EAAE,EAAE;oBAAEY,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACjB,gBAAgB;oBAACU,KAAK,EAAEP,IAAI,CAACO,KAAK;kBAAI;cACnC;0BACN,KAACb,YAAY;gBAACqB,OAAO,EAAEf,IAAI,CAACgB,KAAK;cAAiB;;MACzC,CACX;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.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 React from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item, sx, ...others }: ListLegendItemProps) {\n  return (\n    <ListItem\n      {...others}\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItem","memo","item","sx","others","padding","cursor","dense","key","id","onClick","selected","isSelected","display","alignItems","color","primary","label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGN,KAAK,CAACO,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAuB,EAAE;IAC7G,qBACE,eAACP,QAAQ;QACN,GAAGO,MAAM;QACVD,EAAE,EAAEL,SAAS,CACX;YACEO,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDH,EAAE,CACH;QACDI,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEN,IAAI,CAACO,EAAE;QACZC,OAAO,EAAER,IAAI,CAACQ,OAAO;QACrBC,QAAQ,EAAET,IAAI,CAACU,UAAU;;0BAEzB,KAACjB,GAAG;gBAACQ,EAAE,EAAE;oBAAEU,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACf,gBAAgB;oBAACgB,KAAK,EAAEb,IAAI,CAACa,KAAK;kBAAI;cACnC;0BACN,KAACnB,YAAY;gBAACoB,OAAO,EAAEd,IAAI,CAACe,KAAK;cAAiB;;MACzC,CACX;AACJ,CAAC,CAAC,CAAC"}

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -81,13 +81,13 @@ const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PUR
         }
     }))(({ theme  })=>({
         [`& .${_material.tooltipClasses.tooltip}`]: {
-            backgroundColor: theme.palette.grey[100],
+            backgroundColor: theme.palette.background.tooltip,
             color: theme.palette.text.primary,
             maxWidth: '300px',
             padding: theme.spacing(1),
             boxShadow: theme.shadows[1]
         },
         [`& .${_material.tooltipClasses.arrow}`]: {
-            color: theme.palette.grey[100]
+            color: theme.palette.background.tooltip
         }
     }));

package/dist/cjs/JSONEditor.js

@@ -41,11 +41,14 @@ function JSONEditor(props) {
         onChange: (event)=>{
             setValue(event.target.value);
         },
+        maxRows: 20,
         onBlur: ()=>{
             try {
                 const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
                 setInvalidJSON(false);
-                props.onChange(json);
+                if (props.onChange !== undefined) {
+                    props.onChange(json);
+                }
             } catch (e) {
                 setInvalidJSON(true);
             }

package/dist/cjs/Legend/CompactLegend.js

@@ -23,11 +23,18 @@ const _material = require("@mui/material");
 const _listLegendItem = require("./ListLegendItem");
 function CompactLegend({ height , items  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        component: "ul",
         sx: {
             width: '100%',
             height,
-            paddingTop: 1,
-            overflowY: 'scroll'
+            padding: [
+                0,
+                1,
+                0,
+                0
+            ],
+            overflowY: 'scroll',
+            margin: 0
         },
         children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,

package/dist/cjs/Legend/ListLegendItem.js

@@ -70,7 +70,6 @@ const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem
             cursor: 'pointer'
         }, sx),
         dense: true,
-        "data-testid": `legend-item-${item.color}`,
         key: item.id,
         onClick: item.onClick,
         selected: item.isSelected,

package/dist/cjs/index.js

@@ -32,6 +32,7 @@ _exportStar(require("./context/ChartsThemeProvider"), exports);
 _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./test-utils"), exports);
+_exportStar(require("./theme"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/theme/index.js

@@ -0,0 +1,28 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./theme"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -0,0 +1,40 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "background", {
+    enumerable: true,
+    get: ()=>background
+});
+const _colors = require("./colors");
+const background = (mode)=>{
+    const navigation = _colors.blue[150];
+    const overlay = 'rgba(21, 23, 33, 0.75)'; // grey[900] with opacity 75%
+    return mode === 'light' ? {
+        navigation,
+        overlay,
+        default: _colors.grey[50],
+        paper: _colors.white,
+        tooltip: _colors.grey[100],
+        border: _colors.grey[100]
+    } : {
+        navigation,
+        overlay,
+        default: _colors.grey[900],
+        paper: _colors.grey[850],
+        tooltip: _colors.grey[700],
+        border: _colors.grey[600]
+    };
+};

package/dist/cjs/theme/palette/colors/blue.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "blue", {
+    enumerable: true,
+    get: ()=>blue
+});
+const blue = {
+    50: '#E7F1FC',
+    100: '#D0E3FA',
+    150: '#B8D5F7',
+    200: '#A1C7F5',
+    300: '#72ABF0',
+    400: '#438FEB',
+    500: '#1473E6',
+    600: '#105CB8',
+    700: '#0C458A',
+    800: '#082E5C',
+    850: '#062345',
+    900: '#04172E',
+    950: '#020C17'
+};

package/dist/cjs/theme/palette/colors/common.js

@@ -0,0 +1,28 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    white: ()=>white,
+    black: ()=>black
+});
+const white = '#FFFFFF';
+const black = '#000000';

package/dist/cjs/theme/palette/colors/green.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "green", {
+    enumerable: true,
+    get: ()=>green
+});
+const green = {
+    50: '#EAF9F1',
+    100: '#D5F2E3',
+    150: '#C1ECD4',
+    200: '#ACE5C6',
+    300: '#82D9AA',
+    400: '#59CC8D',
+    500: '#2FBF71',
+    600: '#26995A',
+    700: '#1C7344',
+    800: '#134C2D',
+    850: '#0E3922',
+    900: '#092617',
+    950: '#05130B'
+};

package/dist/cjs/theme/palette/colors/grey.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "grey", {
+    enumerable: true,
+    get: ()=>grey
+});
+const grey = {
+    50: '#F0F1F6',
+    100: '#E1E3ED',
+    150: '#D2D5E4',
+    200: '#C3C7DB',
+    300: '#A4ACC8',
+    400: '#8690B6',
+    500: '#717CA4',
+    600: '#535D83',
+    700: '#3E4662',
+    800: '#2A2E42',
+    850: '#1F2331',
+    900: '#151721',
+    950: '#0A0C10'
+};

package/dist/cjs/theme/palette/colors/index.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./blue"), exports);
+_exportStar(require("./common"), exports);
+_exportStar(require("./green"), exports);
+_exportStar(require("./grey"), exports);
+_exportStar(require("./orange"), exports);
+_exportStar(require("./purple"), exports);
+_exportStar(require("./red"), exports);
+_exportStar(require("./types"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/theme/palette/colors/orange.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "orange", {
+    enumerable: true,
+    get: ()=>orange
+});
+const orange = {
+    50: '#FFF5E8',
+    100: '#FFECD2',
+    150: '#FFE2BB',
+    200: '#FFD9A4',
+    300: '#FFC577',
+    400: '#FFB249',
+    500: '#FF9F1C',
+    600: '#CC7F16',
+    700: '#995F11',
+    800: '#66400B',
+    850: '#4D3008',
+    900: '#332006',
+    950: '#1A1003'
+};

package/dist/cjs/theme/palette/colors/purple.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "purple", {
+    enumerable: true,
+    get: ()=>purple
+});
+const purple = {
+    50: '#EFE9FD',
+    100: '#E0D2FC',
+    150: '#D0BCFA',
+    200: '#C1A6F8',
+    300: '#A179F5',
+    400: '#824DF1',
+    500: '#6320EE',
+    600: '#4F1ABE',
+    700: '#3B138F',
+    800: '#280D5F',
+    850: '#1E0A47',
+    900: '#140630',
+    950: '#0A0318'
+};

package/dist/cjs/theme/palette/colors/red.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "red", {
+    enumerable: true,
+    get: ()=>red
+});
+const red = {
+    50: '#FDEDED',
+    100: '#FBDADA',
+    150: '#F9C8C8',
+    200: '#F7B5B5',
+    300: '#F29191',
+    400: '#EE6C6C',
+    500: '#EA4747',
+    600: '#BD3939',
+    700: '#902B2B',
+    800: '#621D1D',
+    850: '#4C1616',
+    900: '#350F0F',
+    950: '#1F0808'
+};

package/dist/cjs/theme/palette/colors/types.js

@@ -0,0 +1,16 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});