@iobroker/adapter-react-v5 6.1.3 → 6.1.5

package/src/Prompt.tsx

@@ -0,0 +1,20 @@
+/**
+ * Print the ioBroker welcome screen to the developer console.
+ */
+function printPrompt(): void {
+    const prompt = `
+██╗ ██████╗ ██████╗ ██████╗  ██████╗ ██╗  ██╗███████╗██████╗ 
+██║██╔═══██╗██╔══██╗██╔══██╗██╔═══██╗██║ ██╔╝██╔════╝██╔══██╗
+██║██║   ██║██████╔╝██████╔╝██║   ██║█████╔╝ █████╗  ██████╔╝
+██║██║   ██║██╔══██╗██╔══██╗██║   ██║██╔═██╗ ██╔══╝  ██╔══██╗
+██║╚██████╔╝██████╔╝██║  ██║╚██████╔╝██║  ██╗███████╗██║  ██║
+╚═╝ ╚═════╝ ╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝
+`;
+
+    console.log(prompt);
+    console.log('Nice to see you here! :) Join our dev community here https://github.com/ioBroker/ioBroker or here https://github.com/iobroker-community-adapters');
+    console.log('Help us to create open source project with reactJS!');
+    console.log('See you :)');
+}
+
+export default printPrompt;

package/src/Theme.tsx

@@ -0,0 +1,479 @@
+import React from 'react';
+import { createTheme, alpha, PaletteOptions as PaletteOptionsMui } from '@mui/material/styles';
+import { orange, grey } from '@mui/material/colors';
+
+import { SimplePaletteColorOptions } from '@mui/material/styles/createPalette';
+import { ThemeOptions as ThemeOptionsMui } from '@mui/material/styles/createTheme';
+import { type IobTheme, type ThemeName, ThemeType } from './types';
+
+const step = (16 - 5) / 23 / 100;
+
+/**
+ * Convert hex color in the format '#rrggbb' or '#rgb' to an RGB object.
+ */
+function toInt(hex: string): { r: number; g: number; b: number } {
+    const rgb: { r: number; g: number; b: number } = {
+        r: 0,
+        g: 0,
+        b: 0,
+    };
+
+    if (hex.length === 7) {
+        rgb.r = parseInt(hex.substr(1, 2), 16);
+        rgb.g = parseInt(hex.substr(3, 2), 16);
+        rgb.b = parseInt(hex.substr(5, 2), 16);
+    } else if (hex.length === 4) {
+        const r = hex.substr(1, 1);
+        const g = hex.substr(2, 1);
+        const b = hex.substr(3, 1);
+
+        rgb.r = parseInt(r + r, 16);
+        rgb.g = parseInt(g + g, 16);
+        rgb.b = parseInt(b + b, 16);
+    }
+
+    return rgb;
+}
+
+/**
+ * Convert an RGB object to a hex color string in the format '#rrggbb'.
+ */
+function toHex(int: { r: number; g: number; b: number }): string {
+    return `#${Math.round(int.r).toString(16)}${Math.round(int.g).toString(16)}${Math.round(int.b).toString(16)}`;
+}
+
+/** Returns the hex color string in the format '#rrggbb' */
+function getElevation(
+    /** color in the format '#rrggbb' or '#rgb' */
+    color: string,
+    /** overlay color in the format '#rrggbb' or '#rgb' */
+    overlayColor: string,
+    /** elevation as an integer starting with 1 */
+    elevation: number,
+): string {
+    const rgb: { r: number; g: number; b: number } = toInt(color);
+    const overlay: { r: number; g: number; b: number } = toInt(overlayColor);
+
+    rgb.r += overlay.r * (0.05 + step * (elevation - 1));
+    rgb.g += overlay.g * (0.05 + step * (elevation - 1));
+    rgb.b += overlay.b * (0.05 + step * (elevation - 1));
+
+    return toHex(rgb);
+}
+
+/**
+ * Get all 24 elevations of the given color and overlay.
+ */
+function getElevations(
+    /** color in the format '#rrggbb' or '#rgb' */
+    color: string,
+    /** overlay color in the format '#rrggbb' or '#rgb' */
+    overlay: string,
+): Record<string, React.CSSProperties> {
+    const elevations: Record<string, React.CSSProperties> = {};
+
+    for (let i = 1; i <= 24; i++) {
+        elevations[`elevation${i}`] = {
+            backgroundColor: getElevation(color, overlay, i),
+        };
+    }
+
+    return elevations;
+}
+
+// const buttonsPalette = () => ({
+//     palette: {
+//         // mode: "dark",
+//         grey: {
+//             main: grey[300],
+//             dark: grey[400],
+//         },
+//     },
+// });
+
+// const buttonsTheme = theme => ({
+//     components: {
+//         MuiButton: {
+//             variants: [
+//                 {
+//                     props: { variant: 'contained', color: 'grey' },
+//                     style: {
+//                         color: theme.palette.getContrastText(theme.palette.grey[300]),
+//                     },
+//                 },
+//                 {
+//                     props: { variant: 'outlined', color: 'grey' },
+//                     style: {
+//                         color: theme.palette.text.primary,
+//                         borderColor:
+//                             theme.palette.mode === 'light'
+//                                 ? 'rgba(0, 0, 0, 0.23)'
+//                                 : 'rgba(255, 255, 255, 0.23)',
+//                         '&.Mui-disabled': {
+//                             border: `1px solid ${theme.palette.action.disabledBackground}`,
+//                         },
+//                         '&:hover': {
+//                             borderColor:
+//                                 theme.palette.mode === 'light'
+//                                     ? 'rgba(0, 0, 0, 0.23)'
+//                                     : 'rgba(255, 255, 255, 0.23)',
+//                             backgroundColor: alpha(
+//                                 theme.palette.text.primary,
+//                                 theme.palette.action.hoverOpacity,
+//                             ),
+//                         },
+//                     },
+//                 },
+//                 {
+//                     props: { color: 'grey', variant: 'text' },
+//                     style: {
+//                         color: 'black',
+//                         '&:hover': {
+//                             backgroundColor: alpha(
+//                                 theme.palette.text.primary,
+//                                 theme.palette.action.hoverOpacity,
+//                             ),
+//                         },
+//                     },
+//                 },
+//             ],
+//         },
+//     },
+// });
+
+interface PaletteOptions extends PaletteOptionsMui {
+    mode: ThemeType;
+    expert: string;
+    grey?: {
+        main?: string;
+        dark?: string;
+        50?: string;
+        100?: string;
+        200?: string;
+        300?: string;
+        400?: string;
+        500?: string;
+        600?: string;
+        700?: string;
+        800?: string;
+        900?: string;
+        A100?: string;
+        A200?: string;
+        A400?: string;
+        A700?: string;
+    };
+}
+
+interface ThemeOptions extends ThemeOptionsMui {
+    name: ThemeName;
+    palette?: PaletteOptions;
+    toolbar?: React.CSSProperties;
+    saveToolbar?: {
+        background: string;
+        button: React.CSSProperties;
+    };
+}
+
+/**
+ * The theme creation factory function.
+ */
+function customTheme(type: ThemeName, overrides?: Record<string, any>): IobTheme {
+    let options: ThemeOptions;
+    let localOverrides: Record<string, any>;
+
+    if (type === 'dark') {
+        localOverrides = {
+            MuiAppBar: {
+                colorDefault: {
+                    backgroundColor: '#272727',
+                },
+            },
+            MuiLink: {
+                root: {
+                    textTransform: 'uppercase',
+                    transition: 'color .3s ease',
+                    color: orange[200],
+                    '&:hover': {
+                        color: orange[100],
+                    },
+                },
+            },
+            MuiPaper: getElevations('#121212', '#fff'),
+        };
+
+        options = {
+            name: type,
+            palette: {
+                mode: 'dark',
+                background: {
+                    paper: '#121212',
+                    default: '#121212',
+                },
+                primary: {
+                    main: '#4dabf5',
+                },
+                secondary: {
+                    main: '#436a93',
+                },
+                expert: '#14bb00',
+                text: {
+                    primary: '#ffffff',
+                    secondary: '#ffffff',
+                },
+            },
+        };
+    } else if (type === 'blue') {
+        localOverrides = {
+            MuiAppBar: {
+                colorDefault: {
+                    backgroundColor: '#3399CC',
+                },
+            },
+            MuiLink: {
+                root: {
+                    textTransform: 'uppercase',
+                    transition: 'color .3s ease',
+                    color: orange[400],
+                    '&:hover': {
+                        color: orange[300],
+                    },
+                },
+            },
+        };
+
+        options = {
+            name: type,
+            palette: {
+                mode: 'dark',
+                background: {
+                    paper: '#151d21',
+                    default: '#151d21',
+                },
+                primary: {
+                    main: '#4dabf5',
+                },
+                secondary: {
+                    main: '#436a93',
+                },
+                expert: '#14bb00',
+                text: {
+                    primary: '#ffffff',
+                    secondary: '#ffffff',
+                },
+            },
+
+        };
+    } else if (type === 'colored') {
+        localOverrides = {
+            MuiAppBar: {
+                colorDefault: {
+                    backgroundColor: '#2a3135',
+                },
+            },
+            MuiLink: {
+                root: {
+                    textTransform: 'uppercase',
+                    transition: 'color .3s ease',
+                    color: orange[200],
+                    '&:hover': {
+                        color: orange[100],
+                    },
+                },
+            },
+            MuiPaper: getElevations('#151d21', '#fff'),
+        };
+
+        options = {
+            name: type,
+            palette: {
+                mode: 'light',
+                primary: {
+                    main: '#3399CC',
+                },
+                secondary: {
+                    main: '#164477',
+                },
+                expert: '#96fc96',
+            },
+
+        };
+    } else if (type === 'PT') {
+        localOverrides = {
+            MuiAppBar: {
+                colorDefault: {
+                    backgroundColor: '#0F99DE',
+                },
+            },
+            MuiLink: {
+                root: {
+                    textTransform: 'uppercase',
+                    transition: 'color .3s ease',
+                    color: orange[400],
+                    '&:hover': {
+                        color: orange[300],
+                    },
+                },
+            },
+        };
+
+        options = {
+            name: type,
+            palette: {
+                mode: 'light',
+                primary: {
+                    main: '#0F99DE',
+                },
+                secondary: {
+                    main: '#88A536',
+                },
+                expert: '#BD1B24',
+            },
+
+        };
+    } else if (type === 'DX') {
+        localOverrides = {
+            MuiAppBar: {
+                colorDefault: {
+                    backgroundColor: '#a9a9a9',
+                },
+            },
+            MuiLink: {
+                root: {
+                    textTransform: 'uppercase',
+                    transition: 'color .3s ease',
+                    color: orange[400],
+                    '&:hover': {
+                        color: orange[300],
+                    },
+                },
+            },
+        };
+
+        options = {
+            name: type,
+            palette: {
+                mode: 'light',
+                primary: {
+                    main: '#F5F5F7',
+                },
+                secondary: {
+                    main: '#a9a9a9',
+                },
+                expert: '#BD1B24',
+                text: {
+                    primary: '#007AFE',
+                    secondary: '#007AFE',
+                    disabled: '#007AFEAA',
+                },
+            },
+
+        };
+    } else {
+        localOverrides = {
+            MuiLink: {
+                root: {
+                    textTransform: 'uppercase',
+                    transition: 'color .3s ease',
+                    color: orange[400],
+                    '&:hover': {
+                        color: orange[300],
+                    },
+                },
+            },
+        };
+
+        options = {
+            name: type,
+            palette: {
+                mode: 'light',
+                primary: {
+                    main: '#3399CC',
+                    dark: '#256c97',
+                    light: '#76d0fd',
+                },
+                secondary: {
+                    main: '#164477',
+                },
+                expert: '#14bb00',
+            },
+        };
+    }
+
+    options.toolbar = {
+        height: 48,
+    };
+
+    options.saveToolbar = {
+        background: (options.palette?.primary as SimplePaletteColorOptions)?.main,
+        button: {
+            borderRadius: 3,
+            height: 32,
+        },
+    };
+
+    if (options.palette) {
+        options.palette.grey = {
+            main: grey[300],
+            dark: grey[400],
+        };
+    }
+
+    const theme: IobTheme = createTheme(options) as IobTheme;
+
+    const palette: PaletteOptions = (theme.palette as PaletteOptions);
+
+    return createTheme(theme, {
+        ...(overrides || undefined),
+        components: {
+            ...localOverrides,
+            MuiButton: {
+                variants: [
+                    {
+                        props: { variant: 'contained', color: 'grey' },
+                        style: {
+                            color: palette.getContrastText && palette.grey && palette.grey[300] ? palette.getContrastText(palette.grey[300]) : undefined,
+                        },
+                    },
+                    {
+                        props: { variant: 'outlined', color: 'grey' },
+                        style: {
+                            color: palette.text?.primary,
+                            borderColor:
+                                palette.mode === 'light'
+                                    ? 'rgba(0, 0, 0, 0.23)'
+                                    : 'rgba(255, 255, 255, 0.23)',
+                            '&.Mui-disabled': {
+                                border: `1px solid ${palette.action?.disabledBackground}`,
+                            },
+                            '&:hover': {
+                                borderColor:
+                                    palette.mode === 'light'
+                                        ? 'rgba(0, 0, 0, 0.23)'
+                                        : 'rgba(255, 255, 255, 0.23)',
+                                backgroundColor: alpha(
+                                    palette.text?.primary || '',
+                                    palette.action?.hoverOpacity || 0.04,
+                                ),
+                            },
+                        },
+                    },
+                    {
+                        props: { variant: 'text', color: 'grey' },
+                        style: {
+                            color: palette.text?.primary,
+                            '&:hover': {
+                                backgroundColor: alpha(
+                                    palette.text?.primary || '',
+                                    palette.action?.hoverOpacity || 0.04,
+                                ),
+                            },
+                        },
+                    },
+                ],
+            },
+            ...(overrides?.components || undefined),
+        },
+    }) as IobTheme;
+}
+
+export default customTheme;

package/src/icons/IconAdapter.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+// Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
+const IconAdapter = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={e => props.onClick && props.onClick(e)}
+    viewBox="0 0 512 512"
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <path
+        fill="currentColor"
+        d="M448 0L320 96v62.06l-83.03 83.03c6.79 4.25 13.27 9.06 19.07 14.87 5.8 5.8 10.62 12.28 14.87 19.07L353.94 192H416l96-128-64-64zM128 278.59L10.92 395.67c-14.55 14.55-14.55 38.15 0 52.71l52.7 52.7c14.56 14.56 38.15 14.56 52.71 0L233.41 384c29.11-29.11 29.11-76.3 0-105.41s-76.3-29.11-105.41 0z"
+    />
+</svg>;
+
+export default IconAdapter;

package/src/icons/IconAlias.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+// Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
+const IconAlias = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={e => props.onClick && props.onClick(e)}
+    viewBox="0 0 512 512"
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <path
+        fill="currentColor"
+        d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"
+    />
+</svg>;
+
+export default IconAlias;

package/src/icons/IconChannel.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+const IconChannel = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={e => props.onClick && props.onClick(e)}
+    viewBox="0 0 320 320"
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <g fill="currentColor">
+        <rect rx="32" height="272" width="267" y="25" x="25" strokeWidth="15" stroke="currentColor" fill="none" />
+        <ellipse stroke="currentColor" ry="26" rx="26" cy="248" cx="160" fill="none" strokeWidth="15" />
+        <line y2="201.94531" x2="159.5" y1="46.94531" x1="159.5" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" fill="none" />
+        <rect height="27" width="50" y="79.7979" x="133.5" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" fill="#fff" />
+    </g>
+</svg>;
+
+export default IconChannel;

package/src/icons/IconClearFilter.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+// Copyright Apache 2.0 https://raw.githubusercontent.com/material-icons/material-icons/master/svg/filter_alt/baseline.svg
+// https://github.com/material-icons/material-icons/blob/master/LICENSE
+const IconClearFilter = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={e => props.onClick && props.onClick(e)}
+    viewBox="0 0 24 24"
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <path
+        fill="currentColor"
+        stroke="currentColor"
+        d="M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39A.998.998 0 0 0 18.95 4H5.04c-.83 0-1.3.95-.79 1.61z"
+    />
+</svg>;
+
+export default IconClearFilter;

package/src/icons/IconClosed.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+// Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
+const IconClosed = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={e => props.onClick && props.onClick(e)}
+    viewBox="0 0 650 512"
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <path fill="currentColor" d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" />
+</svg>;
+
+export default IconClosed;

package/src/icons/IconCopy.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+const IconCopy = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={e => props.onClick && props.onClick(e)}
+    viewBox="0 0 512 512"
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z" />
+</svg>;
+
+export default IconCopy;

package/src/icons/IconDevice.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+const IconDevice = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={e => props.onClick && props.onClick(e)}
+    viewBox="0 0 320 320"
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <g fill="currentColor">
+        <rect rx="32" height="272" width="267" y="25" x="25" strokeWidth="15" stroke="currentColor" fill="none" />
+        <ellipse stroke="currentColor" ry="26" rx="26" cy="252" cx="160" fillOpacity="null" strokeOpacity="null" strokeWidth="15" fill="#fff" />
+        <line y2="201.94531" x2="159.5" y1="46.94531" x1="159.5" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" fill="none" />
+        <rect height="27" width="50" y="140.83068" x="133.5" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" fill="#fff" />
+        <ellipse stroke="currentColor" ry="26" rx="26" cy="251" cx="241" fillOpacity="null" strokeOpacity="null" strokeWidth="15" fill="#fff" />
+        <line y2="200.94531" x2="240.5" y1="45.94531" x1="240.5" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" fill="none" />
+        <rect height="27" width="50" y="78.7979" x="214.5" strokeWidth="15" stroke="currentColor" fill="#fff" />
+        <ellipse stroke="currentColor" ry="26" rx="26" cy="252" cx="84" fillOpacity="null" strokeOpacity="null" strokeWidth="15" fill="#fff" />
+        <line y2="201.94531" x2="83.5" y1="46.94531" x1="83.5" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" fill="none" />
+        <rect height="27" width="50" y="79.7979" x="57.5" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" fill="#fff" />
+    </g>
+</svg>;
+
+export default IconDevice;

package/src/icons/IconDocument.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type IconProps from './IconProps';
+
+// Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
+const IconDocument = (props: IconProps) => <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    onClick={e => props.onClick && props.onClick(e)}
+    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+    className={props.className}
+    style={props.style}
+>
+    <path fill="currentColor" d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z" />
+</svg>;
+
+export default IconDocument;