Remove withStyles

package.json

@@ -16,11 +16,12 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
     "@devbookhq/splitter": "^1.4.2",
-    "@iobroker/adapter-react-v5": "^6.0.9",
+    "@iobroker/adapter-react-v5": "^6.0.11",
     "@iobroker/type-detector": "^3.0.5",
     "@iobroker/types": "^6.0.5",
     "@iobroker/vis-2-widgets-react-dev": "^1.0.6",
     "@iobroker/vis-2-widgets-testing": "^1.0.3",
+    "@types/react-color": "^3.0.12",
     "@material-icons/svg": "^1.0.33",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.20",
@@ -62,6 +63,7 @@
     "react": "^18.3.1",
     "react-ace": "^11.0.1",
     "react-beautiful-dnd": "^13.1.1",
+    "react-color": "^2.19.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-preview": "^8.0.3",

packages/iobroker.vis-2/src/public/widgets/basic.html

@@ -2061,7 +2061,7 @@
 <script id="tplFrame"
         type="text/ejs"
         class="vis-tpl"
-        data-vis-prev='<div id="prev_tplFrame" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 80px; height: 80px; border: 3px dashed rgb(60, 152, 211); border-radius: 20px;"><div style="top: 30px; color: rgb(60, 152, 211); font-size: 16px; text-align: center; padding-top: 31px;">BORDER</div></div>'
+        data-vis-prev='<div id="prev_tplFrame" style=" position: relative; text-align: initial; padding: 4px"><div class="vis-widget_prev vis-widget-lock" style="width: 80px; height: 80px; border: 3px dashed rgb(60, 152, 211); border-radius: 20px; margin-top: -6px; margin-left: -6px"><div style="top: 30px; color: rgb(60, 152, 211); font-size: 16px; text-align: center; padding-top: 31px;">BORDER</div></div>'
         data-vis-set="basic"
         data-vis-type="static"
         data-vis-name="Border"

packages/iobroker.vis-2/src/src/Attributes/Scripts.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
+
+import type { ThemeType } from '@iobroker/adapter-react-v5';
 import { store } from '@/Store';
+import type { Project } from '@iobroker/types-vis-2';
 import CustomAceEditor from '../Components/CustomAceEditor';
 
 interface ScriptsProps {
-    changeProject: (project: any) => void;
-    themeType: 'dark' | 'light';
+    changeProject: (project: Project) => void;
+    themeType: ThemeType;
     editMode: boolean;
 }