@perses-dev/components 0.16.0 → 0.18.0

package/dist/theme/palette/success.js

@@ -0,0 +1,26 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { green } from './colors';
+export const success = (mode)=>{
+    return mode === 'light' ? {
+        main: green[500],
+        dark: green[700],
+        light: green[50]
+    } : {
+        main: green[400],
+        dark: green[800],
+        light: green[300]
+    };
+};
+
+//# sourceMappingURL=success.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/palette/success.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PaletteMode, SimplePaletteColorOptions } from '@mui/material';\nimport { green } from './colors';\n\nexport const success = (mode: PaletteMode): SimplePaletteColorOptions => {\n  return mode === 'light'\n    ? {\n        main: green[500],\n        dark: green[700],\n        light: green[50],\n      }\n    : {\n        main: green[400],\n        dark: green[800],\n        light: green[300],\n      };\n};\n"],"names":["green","success","mode","main","dark","light"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,KAAK,QAAQ,UAAU,CAAC;AAEjC,OAAO,MAAMC,OAAO,GAAG,CAACC,IAAiB,GAAgC;IACvE,OAAOA,IAAI,KAAK,OAAO,GACnB;QACEC,IAAI,EAAEH,KAAK,CAAC,GAAG,CAAC;QAChBI,IAAI,EAAEJ,KAAK,CAAC,GAAG,CAAC;QAChBK,KAAK,EAAEL,KAAK,CAAC,EAAE,CAAC;KACjB,GACD;QACEG,IAAI,EAAEH,KAAK,CAAC,GAAG,CAAC;QAChBI,IAAI,EAAEJ,KAAK,CAAC,GAAG,CAAC;QAChBK,KAAK,EAAEL,KAAK,CAAC,GAAG,CAAC;KAClB,CAAC;AACR,CAAC,CAAC"}

package/dist/theme/palette/text.d.ts

@@ -0,0 +1,3 @@
+import { PaletteOptions, PaletteMode } from '@mui/material';
+export declare const text: (mode: PaletteMode) => PaletteOptions['text'];
+//# sourceMappingURL=text.d.ts.map

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

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

package/dist/theme/palette/text.js

@@ -0,0 +1,36 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { grey, white, blue } from './colors';
+export const text = (mode)=>{
+    const navigation = grey[800];
+    const accent = grey[300];
+    return mode === 'light' ? {
+        navigation,
+        accent,
+        primary: grey[800],
+        secondary: grey[700],
+        disabled: grey[300],
+        link: blue[500],
+        linkHover: blue[600]
+    } : {
+        navigation,
+        accent,
+        primary: white,
+        secondary: grey[50],
+        disabled: grey[600],
+        link: blue[400],
+        linkHover: blue[500]
+    };
+};
+
+//# sourceMappingURL=text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/palette/text.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PaletteOptions, PaletteMode } from '@mui/material';\nimport { grey, white, blue } from './colors';\n\nexport const text = (mode: PaletteMode): PaletteOptions['text'] => {\n  const navigation = grey[800];\n  const accent = grey[300];\n  return mode === 'light'\n    ? {\n        navigation,\n        accent,\n        primary: grey[800],\n        secondary: grey[700],\n        disabled: grey[300],\n        link: blue[500],\n        linkHover: blue[600],\n      }\n    : {\n        navigation,\n        accent,\n        primary: white,\n        secondary: grey[50],\n        disabled: grey[600],\n        link: blue[400],\n        linkHover: blue[500],\n      };\n};\n"],"names":["grey","white","blue","text","mode","navigation","accent","primary","secondary","disabled","link","linkHover"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,IAAI,EAAEC,KAAK,EAAEC,IAAI,QAAQ,UAAU,CAAC;AAE7C,OAAO,MAAMC,IAAI,GAAG,CAACC,IAAiB,GAA6B;IACjE,MAAMC,UAAU,GAAGL,IAAI,CAAC,GAAG,CAAC,AAAC;IAC7B,MAAMM,MAAM,GAAGN,IAAI,CAAC,GAAG,CAAC,AAAC;IACzB,OAAOI,IAAI,KAAK,OAAO,GACnB;QACEC,UAAU;QACVC,MAAM;QACNC,OAAO,EAAEP,IAAI,CAAC,GAAG,CAAC;QAClBQ,SAAS,EAAER,IAAI,CAAC,GAAG,CAAC;QACpBS,QAAQ,EAAET,IAAI,CAAC,GAAG,CAAC;QACnBU,IAAI,EAAER,IAAI,CAAC,GAAG,CAAC;QACfS,SAAS,EAAET,IAAI,CAAC,GAAG,CAAC;KACrB,GACD;QACEG,UAAU;QACVC,MAAM;QACNC,OAAO,EAAEN,KAAK;QACdO,SAAS,EAAER,IAAI,CAAC,EAAE,CAAC;QACnBS,QAAQ,EAAET,IAAI,CAAC,GAAG,CAAC;QACnBU,IAAI,EAAER,IAAI,CAAC,GAAG,CAAC;QACfS,SAAS,EAAET,IAAI,CAAC,GAAG,CAAC;KACrB,CAAC;AACR,CAAC,CAAC"}

package/dist/theme/palette/warning.d.ts

@@ -0,0 +1,3 @@
+import { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
+export declare const warning: (mode: PaletteMode) => SimplePaletteColorOptions;
+//# sourceMappingURL=warning.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"warning.d.ts","sourceRoot":"","sources":["../../../src/theme/palette/warning.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAGvE,eAAO,MAAM,OAAO,SAAU,WAAW,KAAG,yBAY3C,CAAC"}

package/dist/theme/palette/warning.js

@@ -0,0 +1,26 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { orange } from './colors';
+export const warning = (mode)=>{
+    return mode === 'light' ? {
+        main: orange[500],
+        dark: orange[700],
+        light: orange[50]
+    } : {
+        main: orange[400],
+        dark: orange[800],
+        light: orange[300]
+    };
+};
+
+//# sourceMappingURL=warning.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/palette/warning.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PaletteMode, SimplePaletteColorOptions } from '@mui/material';\nimport { orange } from './colors';\n\nexport const warning = (mode: PaletteMode): SimplePaletteColorOptions => {\n  return mode === 'light'\n    ? {\n        main: orange[500],\n        dark: orange[700],\n        light: orange[50],\n      }\n    : {\n        main: orange[400],\n        dark: orange[800],\n        light: orange[300],\n      };\n};\n"],"names":["orange","warning","mode","main","dark","light"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,MAAM,QAAQ,UAAU,CAAC;AAElC,OAAO,MAAMC,OAAO,GAAG,CAACC,IAAiB,GAAgC;IACvE,OAAOA,IAAI,KAAK,OAAO,GACnB;QACEC,IAAI,EAAEH,MAAM,CAAC,GAAG,CAAC;QACjBI,IAAI,EAAEJ,MAAM,CAAC,GAAG,CAAC;QACjBK,KAAK,EAAEL,MAAM,CAAC,EAAE,CAAC;KAClB,GACD;QACEG,IAAI,EAAEH,MAAM,CAAC,GAAG,CAAC;QACjBI,IAAI,EAAEJ,MAAM,CAAC,GAAG,CAAC;QACjBK,KAAK,EAAEL,MAAM,CAAC,GAAG,CAAC;KACnB,CAAC;AACR,CAAC,CAAC"}

package/dist/theme/theme.d.ts

@@ -0,0 +1,13 @@
+import { PaletteMode } from '@mui/material';
+/**
+ * Gets theme used by all components for the provided mode. For more details, see:
+ *   - Base colors, typography, sizing - go/chrono-ui-theme
+ *   - Material UI defaults: https://material-ui.com/customization/default-theme/
+ *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables
+ *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css
+ *
+ * Need to reinstantiate the theme everytime to support switching between light and dark themes
+ * https://github.com/mui-org/material-ui/issues/18831
+ */
+export declare function getTheme(mode: PaletteMode): import("@mui/material").Theme;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,WAAW,EAAgB,MAAM,eAAe,CAAC;AAIvE;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,iCAQzC"}

package/dist/theme/theme.js

@@ -0,0 +1,48 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { createTheme } from '@mui/material';
+import { getPaletteOptions } from './palette/palette-options';
+import { typography } from './typography';
+/**
+ * Gets theme used by all components for the provided mode. For more details, see:
+ *   - Base colors, typography, sizing - go/chrono-ui-theme
+ *   - Material UI defaults: https://material-ui.com/customization/default-theme/
+ *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables
+ *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css
+ *
+ * Need to reinstantiate the theme everytime to support switching between light and dark themes
+ * https://github.com/mui-org/material-ui/issues/18831
+ */ export function getTheme(mode) {
+    const theme = createTheme({
+        palette: getPaletteOptions(mode),
+        typography,
+        mixins: {},
+        components
+    });
+    return theme;
+}
+// Overrides for component default prop values and styles go here
+const components = {
+    MuiFormControl: {
+        defaultProps: {
+            size: 'small'
+        }
+    },
+    MuiTextField: {
+        defaultProps: {
+            size: 'small'
+        }
+    }
+};
+
+//# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createTheme, PaletteMode, ThemeOptions } from '@mui/material';\nimport { getPaletteOptions } from './palette/palette-options';\nimport { typography } from './typography';\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode) {\n  const theme = createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n  });\n  return theme;\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n};\n"],"names":["createTheme","getPaletteOptions","typography","getTheme","mode","theme","palette","mixins","components","MuiFormControl","defaultProps","size","MuiTextField"],"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,WAAW,QAAmC,eAAe,CAAC;AACvE,SAASC,iBAAiB,QAAQ,2BAA2B,CAAC;AAC9D,SAASC,UAAU,QAAQ,cAAc,CAAC;AAE1C;;;;;;;;;CASC,GACD,OAAO,SAASC,QAAQ,CAACC,IAAiB,EAAE;IAC1C,MAAMC,KAAK,GAAGL,WAAW,CAAC;QACxBM,OAAO,EAAEL,iBAAiB,CAACG,IAAI,CAAC;QAChCF,UAAU;QACVK,MAAM,EAAE,EAAE;QACVC,UAAU;KACX,CAAC,AAAC;IACH,OAAOH,KAAK,CAAC;AACf,CAAC;AAED,iEAAiE;AACjE,MAAMG,UAAU,GAA+B;IAC7CC,cAAc,EAAE;QACdC,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;IACDC,YAAY,EAAE;QACZF,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;CACF,AAAC"}

package/dist/theme/types/ThemeExtension.d.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.
+// Allows extending Lab types/components also
+export { };
+
+//# sourceMappingURL=ThemeExtension.d.js.map

package/dist/theme/types/ThemeExtension.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/types/ThemeExtension.d.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n// Allows extending Lab types/components also\nimport type {} from '@mui/lab/themeAugmentation';\n\n// Use Typescript interface augmentation to extend the MUI type definition\ndeclare module '@mui/material' {\n  interface Color {\n    150: string;\n    250: string;\n    350: string;\n    450: string;\n    550: string;\n    650: string;\n    750: string;\n    850: string;\n    950: string;\n  }\n}\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,6CAA6C;AAC7C,WAeC"}

package/dist/theme/typography.d.ts

@@ -0,0 +1,10 @@
+import '@fontsource/lato/300.css';
+import '@fontsource/lato/400.css';
+import '@fontsource/lato/700.css';
+import '@fontsource/lato/900.css';
+import { ThemeOptions } from '@mui/material';
+/**
+ * Theme typography options that are the same across both the dark and light themes.
+ */
+export declare const typography: ThemeOptions['typography'];
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAaA,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAS7C;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAqEjD,CAAC"}

package/dist/theme/typography.js

@@ -0,0 +1,92 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import '@fontsource/lato/300.css';
+import '@fontsource/lato/400.css';
+import '@fontsource/lato/700.css';
+import '@fontsource/lato/900.css';
+// Font weights need to correspond with the imports at the top of the file
+// (Lato supports 100, 300, 400, 700, 900)
+const fontWeightLight = 300;
+const fontWeightRegular = 400;
+const fontWeightMedium = 700;
+const fontWeightBold = 900;
+/**
+ * Theme typography options that are the same across both the dark and light themes.
+ */ export const typography = {
+    fontFamily: '"Lato", sans-serif',
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightBold,
+    h1: {
+        fontSize: '1.5rem',
+        fontWeight: fontWeightMedium,
+        lineHeight: '32px'
+    },
+    h2: {
+        fontSize: '1.25rem',
+        fontWeight: fontWeightMedium,
+        lineHeight: '28px'
+    },
+    h3: {
+        fontSize: '1rem',
+        fontWeight: fontWeightMedium,
+        lineHeight: '24px'
+    },
+    h4: {
+        fontSize: '0.875rem',
+        fontWeight: fontWeightMedium,
+        lineHeight: '22px'
+    },
+    h5: undefined,
+    h6: undefined,
+    body1: {
+        fontSize: '0.875rem',
+        fontWeight: fontWeightRegular,
+        lineHeight: '20px'
+    },
+    body2: {
+        fontSize: '0.75rem',
+        fontWeight: fontWeightRegular,
+        lineHeight: '18px'
+    },
+    subtitle1: {
+        fontSize: '1rem',
+        fontWeight: fontWeightRegular,
+        lineHeight: '24px',
+        letterSpacing: '0.02rem'
+    },
+    subtitle2: {
+        fontSize: '0.875rem',
+        fontWeight: fontWeightMedium,
+        lineHeight: '22px',
+        letterSpacing: '0.03rem',
+        textTransform: 'uppercase'
+    },
+    button: {
+        // 14px
+        fontSize: '0.875rem',
+        fontWeight: fontWeightMedium,
+        // 20 px
+        lineHeight: '1.25rem',
+        textTransform: 'none',
+        letterSpacing: '0.03rem'
+    },
+    caption: {
+        fontSize: '0.6875rem',
+        fontWeight: fontWeightRegular,
+        lineHeight: '16px'
+    }
+};
+
+//# sourceMappingURL=typography.js.map

package/dist/theme/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/typography.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport '@fontsource/lato/300.css';\nimport '@fontsource/lato/400.css';\nimport '@fontsource/lato/700.css';\nimport '@fontsource/lato/900.css';\nimport { ThemeOptions } from '@mui/material';\n\n// Font weights need to correspond with the imports at the top of the file\n// (Lato supports 100, 300, 400, 700, 900)\nconst fontWeightLight = 300;\nconst fontWeightRegular = 400;\nconst fontWeightMedium = 700;\nconst fontWeightBold = 900;\n\n/**\n * Theme typography options that are the same across both the dark and light themes.\n */\nexport const typography: ThemeOptions['typography'] = {\n  fontFamily: '\"Lato\", sans-serif',\n\n  fontWeightLight,\n  fontWeightRegular,\n  fontWeightMedium,\n  fontWeightBold,\n\n  h1: {\n    fontSize: '1.5rem', // 24px\n    fontWeight: fontWeightMedium,\n    lineHeight: '32px',\n  },\n  h2: {\n    fontSize: '1.25rem', // 20px\n    fontWeight: fontWeightMedium,\n    lineHeight: '28px',\n  },\n  h3: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightMedium,\n    lineHeight: '24px',\n  },\n  h4: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n  },\n  h5: undefined,\n  h6: undefined,\n\n  body1: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightRegular,\n    lineHeight: '20px',\n  },\n  body2: {\n    fontSize: '0.75rem', // 12px\n    fontWeight: fontWeightRegular,\n    lineHeight: '18px',\n  },\n  subtitle1: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightRegular,\n    lineHeight: '24px',\n    letterSpacing: '0.02rem',\n  },\n  subtitle2: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n    letterSpacing: '0.03rem',\n    textTransform: 'uppercase',\n  },\n\n  button: {\n    // 14px\n    fontSize: '0.875rem',\n    fontWeight: fontWeightMedium,\n    // 20 px\n    lineHeight: '1.25rem',\n    textTransform: 'none',\n    letterSpacing: '0.03rem',\n  },\n  caption: {\n    fontSize: '0.6875rem', // 11px\n    fontWeight: fontWeightRegular,\n    lineHeight: '16px',\n  },\n};\n"],"names":["fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","undefined","h6","body1","body2","subtitle1","letterSpacing","subtitle2","textTransform","button","caption"],"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,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAGlC,0EAA0E;AAC1E,0CAA0C;AAC1C,MAAMA,eAAe,GAAG,GAAG,AAAC;AAC5B,MAAMC,iBAAiB,GAAG,GAAG,AAAC;AAC9B,MAAMC,gBAAgB,GAAG,GAAG,AAAC;AAC7B,MAAMC,cAAc,GAAG,GAAG,AAAC;AAE3B;;CAEC,GACD,OAAO,MAAMC,UAAU,GAA+B;IACpDC,UAAU,EAAE,oBAAoB;IAEhCL,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC,cAAc;IAEdG,EAAE,EAAE;QACFC,QAAQ,EAAE,QAAQ;QAClBC,UAAU,EAAEN,gBAAgB;QAC5BO,UAAU,EAAE,MAAM;KACnB;IACDC,EAAE,EAAE;QACFH,QAAQ,EAAE,SAAS;QACnBC,UAAU,EAAEN,gBAAgB;QAC5BO,UAAU,EAAE,MAAM;KACnB;IACDE,EAAE,EAAE;QACFJ,QAAQ,EAAE,MAAM;QAChBC,UAAU,EAAEN,gBAAgB;QAC5BO,UAAU,EAAE,MAAM;KACnB;IACDG,EAAE,EAAE;QACFL,QAAQ,EAAE,UAAU;QACpBC,UAAU,EAAEN,gBAAgB;QAC5BO,UAAU,EAAE,MAAM;KACnB;IACDI,EAAE,EAAEC,SAAS;IACbC,EAAE,EAAED,SAAS;IAEbE,KAAK,EAAE;QACLT,QAAQ,EAAE,UAAU;QACpBC,UAAU,EAAEP,iBAAiB;QAC7BQ,UAAU,EAAE,MAAM;KACnB;IACDQ,KAAK,EAAE;QACLV,QAAQ,EAAE,SAAS;QACnBC,UAAU,EAAEP,iBAAiB;QAC7BQ,UAAU,EAAE,MAAM;KACnB;IACDS,SAAS,EAAE;QACTX,QAAQ,EAAE,MAAM;QAChBC,UAAU,EAAEP,iBAAiB;QAC7BQ,UAAU,EAAE,MAAM;QAClBU,aAAa,EAAE,SAAS;KACzB;IACDC,SAAS,EAAE;QACTb,QAAQ,EAAE,UAAU;QACpBC,UAAU,EAAEN,gBAAgB;QAC5BO,UAAU,EAAE,MAAM;QAClBU,aAAa,EAAE,SAAS;QACxBE,aAAa,EAAE,WAAW;KAC3B;IAEDC,MAAM,EAAE;QACN,OAAO;QACPf,QAAQ,EAAE,UAAU;QACpBC,UAAU,EAAEN,gBAAgB;QAC5B,QAAQ;QACRO,UAAU,EAAE,SAAS;QACrBY,aAAa,EAAE,MAAM;QACrBF,aAAa,EAAE,SAAS;KACzB;IACDI,OAAO,EAAE;QACPhB,QAAQ,EAAE,WAAW;QACrBC,UAAU,EAAEP,iBAAiB;QAC7BQ,UAAU,EAAE,MAAM;KACnB;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -32,8 +32,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
+    "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "^0.16.0",
+    "@perses-dev/core": "^0.18.0",
     "date-fns": "^2.28.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
@@ -42,7 +43,7 @@
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
-    "@mui/material": "^5.6.0",
+    "@mui/material": "^5.10.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },