@iobroker/adapter-react-v5 7.0.2 → 7.1.1

package/src/Prompt.tsx

@@ -12,7 +12,9 @@ function printPrompt(): void {
 `;
 
     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(
+        '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 :)');
 }

package/src/Theme.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { createTheme, alpha, PaletteOptions as PaletteOptionsMui } from '@mui/material/styles';
+import { type CSSProperties } from 'react';
+import { createTheme, alpha, type 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';
+import type { SimplePaletteColorOptions } from '@mui/material/styles/createPalette';
+import type { ThemeOptions as ThemeOptionsMui } from '@mui/material/styles/createTheme';
+import type { IobTheme, ThemeName, ThemeType } from './types';
 
 const step = (16 - 5) / 23 / 100;
 
@@ -63,14 +63,12 @@ function getElevation(
 
 /**
  * Get all 24 elevations of the given color and overlay.
+ *
+ * @param color color in the format '#rrggbb' or '#rgb'
+ * @param overlay overlay color in the format '#rrggbb' or '#rgb'
  */
-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> = {};
+function getElevations(color: string, overlay: string): Record<string, CSSProperties> {
+    const elevations: Record<string, CSSProperties> = {};
 
     for (let i = 1; i <= 24; i++) {
         elevations[`elevation${i}`] = {
@@ -167,10 +165,10 @@ interface PaletteOptions extends PaletteOptionsMui {
 interface ThemeOptions extends ThemeOptionsMui {
     name: ThemeName;
     palette?: PaletteOptions;
-    toolbar?: React.CSSProperties;
+    toolbar?: CSSProperties;
     saveToolbar?: {
         background: string;
-        button: React.CSSProperties;
+        button: CSSProperties;
     };
 }
 
@@ -261,7 +259,6 @@ function customTheme(type: ThemeName, overrides?: Record<string, any>): IobTheme
                     secondary: '#ffffff',
                 },
             },
-
         };
     } else if (type === 'colored') {
         localOverrides = {
@@ -327,7 +324,6 @@ function customTheme(type: ThemeName, overrides?: Record<string, any>): IobTheme
                 },
                 expert: '#BD1B24',
             },
-
         };
     } else if (type === 'DX') {
         localOverrides = {
@@ -365,7 +361,6 @@ function customTheme(type: ThemeName, overrides?: Record<string, any>): IobTheme
                     disabled: '#007AFEAA',
                 },
             },
-
         };
     } else {
         localOverrides = {
@@ -419,7 +414,7 @@ function customTheme(type: ThemeName, overrides?: Record<string, any>): IobTheme
 
     const theme: IobTheme = createTheme(options) as IobTheme;
 
-    const palette: PaletteOptions = (theme.palette as PaletteOptions);
+    const palette: PaletteOptions = theme.palette as PaletteOptions;
 
     return createTheme(theme, {
         ...(overrides || undefined),
@@ -431,25 +426,23 @@ function customTheme(type: ThemeName, overrides?: Record<string, any>): IobTheme
                         props: { variant: 'contained', color: 'grey' },
                         style: {
                             backgroundColor: palette.grey?.[300],
-                            color: palette.getContrastText && palette.grey?.[300]? palette.getContrastText(palette.grey[300]) : undefined,
+                            color:
+                                palette.getContrastText && 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)',
+                            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)',
+                                    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,

package/src/icons/IconAdapter.tsx

@@ -2,19 +2,21 @@ 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>;
+const IconAdapter = (props: IconProps): React.JSX.Element => (
+    <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

@@ -2,19 +2,21 @@ 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>;
+const IconAlias = (props: IconProps): React.JSX.Element => (
+    <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

@@ -1,21 +1,60 @@
 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>;
+const IconChannel = (props: IconProps): React.JSX.Element => (
+    <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

@@ -3,20 +3,22 @@ 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>;
+const IconClearFilter = (props: IconProps): React.JSX.Element => (
+    <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

@@ -2,16 +2,21 @@ 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>;
+const IconClosed = (props: IconProps): React.JSX.Element => (
+    <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

@@ -1,16 +1,21 @@
 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>;
+const IconCopy = (props: IconProps): React.JSX.Element => (
+    <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

@@ -1,27 +1,126 @@
 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>;
+const IconDevice = (props: IconProps): React.JSX.Element => (
+    <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

@@ -2,16 +2,21 @@ 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>;
+const IconDocument = (props: IconProps): React.JSX.Element => (
+    <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;

package/src/icons/IconDocumentReadOnly.tsx

@@ -2,17 +2,26 @@ import React from 'react';
 import type IconProps from './IconProps';
 
 // Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
-const IconDocumentReadOnly = (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="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" />
-    <path fill="currentColor" stroke="null" d="m261,270l-12,0l0,-24c0,-33.12 -26.88,-60 -60,-60s-60,26.88 -60,60l0,24l-12,0c-13.2,0 -24,10.8 -24,24l0,120c0,13.2 10.8,24 24,24l144,0c13.2,0 24,-10.8 24,-24l0,-120c0,-13.2 -10.8,-24 -24,-24zm-72,108c-13.2,0 -24,-10.8 -24,-24s10.8,-24 24,-24s24,10.8 24,24s-10.8,24 -24,24zm37.2,-108l-74.4,0l0,-24c0,-20.52 16.68,-37.2 37.2,-37.2c20.52,0 37.2,16.68 37.2,37.2l0,24z" />
-</svg>;
+const IconDocumentReadOnly = (props: IconProps): React.JSX.Element => (
+    <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="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"
+        />
+        <path
+            fill="currentColor"
+            stroke="null"
+            d="m261,270l-12,0l0,-24c0,-33.12 -26.88,-60 -60,-60s-60,26.88 -60,60l0,24l-12,0c-13.2,0 -24,10.8 -24,24l0,120c0,13.2 10.8,24 24,24l144,0c13.2,0 24,-10.8 24,-24l0,-120c0,-13.2 -10.8,-24 -24,-24zm-72,108c-13.2,0 -24,-10.8 -24,-24s10.8,-24 24,-24s24,10.8 24,24s-10.8,24 -24,24zm37.2,-108l-74.4,0l0,-24c0,-20.52 16.68,-37.2 37.2,-37.2c20.52,0 37.2,16.68 37.2,37.2l0,24z"
+        />
+    </svg>
+);
 
 export default IconDocumentReadOnly;