diff --git a/.betterer.results b/.betterer.results
index d9317283aca..540406092ed 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -4506,45 +4506,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not re-export imported variable (\`CandlestickFieldMap\`)", "6"],
       [0, 0, 0, "Do not re-export imported variable (\`FieldConfig\`)", "7"]
     ],
-    "public/app/plugins/panel/canvas/components/CanvasTooltip.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/editor/element/APIEditor.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/editor/element/elementEditor.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
-    ],
-    "public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
-    ],
-    "public/app/plugins/panel/canvas/editor/panZoomHelp.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/globalStyles.ts:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/plugins/panel/dashlist/styles.ts:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
diff --git a/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx b/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx
index da5dbbfee7e..13cd8169daa 100644
--- a/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx
+++ b/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx
@@ -4,7 +4,7 @@ import { useOverlay } from '@react-aria/overlays';
 import React, { createRef } from 'react';
 
 import { GrafanaTheme2, LinkModel } from '@grafana/data/src';
-import { LinkButton, Portal, useStyles2, VerticalGroup, VizTooltipContainer } from '@grafana/ui';
+import { LinkButton, Portal, Stack, useStyles2, VizTooltipContainer } from '@grafana/ui';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { Scene } from 'app/features/canvas/runtime/scene';
 
@@ -34,7 +34,7 @@ export const CanvasTooltip = ({ scene }: Props) => {
     element.data?.links &&
     element.data?.links.length > 0 && (
       <div>
-        <VerticalGroup>
+        <Stack direction={'column'}>
           {element.data?.links?.map((link: LinkModel, i: number) => (
             <LinkButton
               key={i}
@@ -48,7 +48,7 @@ export const CanvasTooltip = ({ scene }: Props) => {
               {link.title}
             </LinkButton>
           ))}
-        </VerticalGroup>
+        </Stack>
       </div>
     );
 
diff --git a/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx b/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx
index dfab9004108..537122ed659 100644
--- a/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx
@@ -24,9 +24,13 @@ export interface APIEditorConfig {
   headerParams?: Array<[string, string]>;
 }
 
-const dummyStringSettings = {
+const dummyStringSettings: StandardEditorsRegistryItem<string, StringFieldConfigSettings> = {
+  id: '',
+  name: '',
+  description: '',
+  editor: StringValueEditor,
   settings: {},
-} as StandardEditorsRegistryItem<string, StringFieldConfigSettings>;
+};
 
 type Props = StandardEditorProps<APIEditorConfig>;
 
diff --git a/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx b/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx
index 7d46e7b701e..7d4bafd85b1 100644
--- a/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { HorizontalGroup, IconButton, Input, VerticalGroup } from '@grafana/ui';
+import { IconButton, Input, Stack } from '@grafana/ui';
 
 interface Props {
   onChange: (v: Array<[string, string]>) => void;
@@ -44,20 +44,20 @@ export const ParamsEditor = ({ value, onChange }: Props) => {
 
   return (
     <div>
-      <HorizontalGroup>
+      <Stack direction="row">
         <Input placeholder="Key" value={paramName} onChange={changeParamName} />
         <Input placeholder="Value" value={paramValue} onChange={changeParamValue} />
         <IconButton aria-label="add" name="plus-circle" onClick={addParam} disabled={isAddParamsDisabled} />
-      </HorizontalGroup>
-      <VerticalGroup>
+      </Stack>
+      <Stack direction="column">
         {Array.from(value || []).map((entry) => (
-          <HorizontalGroup key={entry[0]}>
+          <Stack key={entry[0]} direction="row">
             <Input disabled value={entry[0]} />
             <Input disabled value={entry[1]} />
             <IconButton aria-label="delete" onClick={removeParam(entry[0])} name="trash-alt" />
-          </HorizontalGroup>
+          </Stack>
         ))}
-      </VerticalGroup>
+      </Stack>
     </div>
   );
 };
diff --git a/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx b/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx
index c1719d3abce..e9611fbab5d 100644
--- a/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx
@@ -3,7 +3,7 @@ import { useObservable } from 'react-use';
 import { Subject } from 'rxjs';
 
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
-import { Field, HorizontalGroup, Icon, InlineField, InlineFieldRow, Select, VerticalGroup } from '@grafana/ui';
+import { Field, Icon, InlineField, InlineFieldRow, Select, Stack } from '@grafana/ui';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 import { HorizontalConstraint, Placement, VerticalConstraint } from 'app/features/canvas';
 
@@ -94,27 +94,27 @@ export function PlacementEditor({ item }: Props) {
       <QuickPositioning onPositionChange={onPositionChange} settings={settings} element={element} />
       <br />
       <Field label="Constraints">
-        <HorizontalGroup>
+        <Stack direction="row">
           <ConstraintSelectionBox
             onVerticalConstraintChange={onVerticalConstraintChange}
             onHorizontalConstraintChange={onHorizontalConstraintChange}
             currentConstraints={constraint}
           />
-          <VerticalGroup>
-            <HorizontalGroup>
+          <Stack direction="column">
+            <Stack direction="row">
               <Icon name="arrows-h" />
               <Select
                 options={horizontalOptions}
                 onChange={onHorizontalConstraintSelect}
                 value={constraint.horizontal}
               />
-            </HorizontalGroup>
-            <HorizontalGroup>
+            </Stack>
+            <Stack direction="row">
               <Icon name="arrows-v" />
               <Select options={verticalOptions} onChange={onVerticalConstraintSelect} value={constraint.vertical} />
-            </HorizontalGroup>
-          </VerticalGroup>
-        </HorizontalGroup>
+            </Stack>
+          </Stack>
+        </Stack>
       </Field>
 
       <br />
diff --git a/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx b/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx
index a78e6ac0fae..407a98a0516 100644
--- a/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx
@@ -71,6 +71,7 @@ export function getElementEditor(opts: CanvasEditorOptions): NestedPanelOptions<
 
       builder.addSelect({
         path: 'type',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
         name: undefined as any, // required, but hide space
         settings: {
           options: layerTypes,
diff --git a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
index 50acbf62220..e45303e75dd 100644
--- a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
+++ b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
@@ -131,7 +131,7 @@ interface EditorProps<T> {
   data?: DataFrame[];
 }
 
-function getOptionsPaneCategoryDescriptor<T = any>(
+function getOptionsPaneCategoryDescriptor<T extends object>(
   props: EditorProps<T>,
   supplier: PanelOptionsSupplier<T>
 ): OptionsPaneCategoryDescriptor {
@@ -157,7 +157,7 @@ function getOptionsPaneCategoryDescriptor<T = any>(
   const access: NestedValueAccess = {
     getValue: (path) => lodashGet(props.options, path),
     onChange: (path, value) => {
-      props.onChange(setOptionImmutably(props.options as any, path, value));
+      props.onChange(setOptionImmutably<T>(props.options, path, value));
     },
   };
 
diff --git a/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx
index acd0352795e..c6d78e7480f 100644
--- a/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx
@@ -5,7 +5,7 @@ import React, { Key, useEffect, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Button, HorizontalGroup, Icon, useStyles2, useTheme2 } from '@grafana/ui';
+import { Button, Icon, Stack, useStyles2, useTheme2 } from '@grafana/ui';
 import { AddLayerButton } from 'app/core/components/Layers/AddLayerButton';
 import { ElementState } from 'app/features/canvas/runtime/element';
 
@@ -147,7 +147,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<unknown, Tree
         multiple={true}
       />
 
-      <HorizontalGroup justify="space-between">
+      <Stack justifyContent="space-between" direction="row">
         <div className={styles.addLayerButton}>
           <AddLayerButton onChange={(sel) => onAddItem(sel, layer)} options={typeOptions} label={'Add item'} />
         </div>
@@ -161,7 +161,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<unknown, Tree
             Frame selection
           </Button>
         )}
-      </HorizontalGroup>
+      </Stack>
     </>
   );
 };
diff --git a/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx b/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx
index 5a8bc1257c2..59c9b40fd46 100644
--- a/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx
@@ -77,7 +77,9 @@ export function getLayerEditor(opts: InstanceState): NestedPanelOptions<LayerEdi
       });
 
       const ctx = { ...context, options };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
       optionBuilder.addBackground(builder as any, ctx);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
       optionBuilder.addBorder(builder as any, ctx);
 
       if (currentLayer && !currentLayer.isRoot()) {
diff --git a/public/app/plugins/panel/canvas/editor/panZoomHelp.tsx b/public/app/plugins/panel/canvas/editor/panZoomHelp.tsx
index 14b064ca1e7..e36131f12ce 100644
--- a/public/app/plugins/panel/canvas/editor/panZoomHelp.tsx
+++ b/public/app/plugins/panel/canvas/editor/panZoomHelp.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { StandardEditorProps, GrafanaTheme2 } from '@grafana/data';
-import { Alert, HorizontalGroup, Icon, VerticalGroup, useStyles2 } from '@grafana/ui';
+import { Alert, Icon, Stack, useStyles2 } from '@grafana/ui';
 
 const helpUrl = 'https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/canvas/';
 
@@ -11,7 +11,7 @@ export const PanZoomHelp = ({}: StandardEditorProps<string, unknown, unknown, un
 
   return (
     <>
-      <HorizontalGroup className={styles.hGroup}>
+      <Stack direction="row">
         <Alert
           title="Pan and zoom controls"
           severity="info"
@@ -24,7 +24,7 @@ export const PanZoomHelp = ({}: StandardEditorProps<string, unknown, unknown, un
             }
           }}
         >
-          <VerticalGroup>
+          <Stack direction="column">
             <ul>
               <li>
                 Pan:
@@ -36,9 +36,9 @@ export const PanZoomHelp = ({}: StandardEditorProps<string, unknown, unknown, un
               <li>Zoom: Scroll wheel</li>
               <li>Reset: Double click</li>
             </ul>
-          </VerticalGroup>
+          </Stack>
         </Alert>
-      </HorizontalGroup>
+      </Stack>
     </>
   );
 };
@@ -51,7 +51,4 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding: '2px',
     'ul > li': { marginLeft: '10px' },
   }),
-  hGroup: css({
-    '& div': { width: '100%' },
-  }),
 });
diff --git a/public/app/plugins/panel/canvas/globalStyles.ts b/public/app/plugins/panel/canvas/globalStyles.ts
index 6357ba6e897..a282d9d59d9 100644
--- a/public/app/plugins/panel/canvas/globalStyles.ts
+++ b/public/app/plugins/panel/canvas/globalStyles.ts
@@ -3,276 +3,253 @@ import { css } from '@emotion/react';
 import { GrafanaTheme2 } from '@grafana/data';
 
 export function getGlobalStyles(theme: GrafanaTheme2) {
-  return css`
-    .moveable-control-box {
-      z-index: 999;
-    }
-    ,
-    .rc-tree {
-      margin: 0;
-      margin-bottom: 15px;
-      border: 1px solid transparent;
-
-      &-focused:not(&-active-focused) {
-        border-color: cyan;
-      }
-
-      .rc-tree-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-      }
-
-      .rc-tree-treenode {
-        margin: 0;
-        padding: 1px;
-        line-height: 24px;
-        white-space: nowrap;
-        list-style: none;
-        outline: 0;
-
-        display: flex;
-        margin-bottom: 3px;
-        cursor: pointer;
-
-        .draggable {
-          color: #333;
-          -moz-user-select: none;
-          -khtml-user-select: none;
-          -webkit-user-select: none;
-          user-select: none;
-          /* Required to make elements draggable in old WebKit */
-          // -khtml-user-drag: element;
-          // -webkit-user-drag: element;
-        }
-
-        &.drop-container {
-          > .draggable::after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            box-shadow: inset 0 0 0 2px blue;
-            content: '';
-          }
-          & ~ .rc-tree-treenode {
-            border-left: 2px solid ${theme.components.input.borderColor};
-          }
-        }
-        &.drop-target {
-          & ~ .rc-tree-treenode {
-            border-left: none;
-          }
-        }
-        &.filter-node {
-          > .rc-tree-node-content-wrapper {
-            color: #a60000 !important;
-            font-weight: bold !important;
-          }
-        }
-        ul {
-          margin: 0;
-          padding: 0 0 0 18px;
-        }
-        .rc-tree-node-content-wrapper {
-          position: relative;
-          display: inline-block;
-          height: 24px;
-          margin: 0;
-          padding: 0;
-          text-decoration: none;
-          vertical-align: top;
-          cursor: grab;
-          flex-grow: 1;
-          display: flex;
-
-          border: 1px solid ${theme.components.input.borderColor};
-          border-radius: ${theme.shape.radius.default};
-          background: ${theme.colors.background.secondary};
-          min-height: ${theme.spacing.gridSize * 4}px;
-
-          &:hover {
-            border: 1px solid ${theme.components.input.borderHover};
-          }
-
-          &.rc-tree-node-selected {
-            border: 1px solid ${theme.colors.primary.border};
-            opacity: 1;
-          }
-        }
-
-        span {
-          &.rc-tree-checkbox,
-          &.rc-tree-iconEle {
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            margin-right: 2px;
-            line-height: 16px;
-            vertical-align: -0.125em;
-            background-color: transparent;
-            background-repeat: no-repeat;
-            background-attachment: scroll;
-            border: 0 none;
-            outline: none;
-            cursor: pointer;
-
-            &.rc-tree-icon__customize {
-              background-image: none;
-            }
-          }
-          &.rc-tree-switcher {
-            display: flex;
-            align-items: center;
-            width: 16px;
-            background-color: transparent;
-            background-repeat: no-repeat;
-            background-attachment: scroll;
-            border: 0 none;
-            outline: none;
-            cursor: pointer;
-
-            &.rc-tree-icon__customize {
-              background-image: none;
-            }
-          }
-          &.rc-tree-icon_loading {
-            margin-right: 2px;
-            vertical-align: top;
-            background: url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7')
-              no-repeat scroll 0 0 transparent;
-          }
-          &.rc-tree-switcher {
-            &.rc-tree-switcher-noop {
-              cursor: auto;
-            }
-            &.rc-tree-switcher_open {
-              background-position: -93px -56px;
-            }
-            &.rc-tree-switcher_close {
-              background-position: -75px -56px;
-            }
-          }
-          &.rc-tree-checkbox {
-            width: 13px;
-            height: 13px;
-            margin: 0 3px;
-            background-position: 0 0;
-            &-checked {
-              background-position: -14px 0;
-            }
-            &-indeterminate {
-              background-position: -14px -28px;
-            }
-            &-disabled {
-              background-position: 0 -56px;
-            }
-            &.rc-tree-checkbox-checked.rc-tree-checkbox-disabled {
-              background-position: -14px -56px;
-            }
-            &.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled {
-              position: relative;
-              background: #ccc;
-              border-radius: 3px;
-              &::after {
-                position: absolute;
-                top: 5px;
-                left: 3px;
-                width: 5px;
-                height: 0;
-                border: 2px solid #fff;
-                border-top: 0;
-                border-left: 0;
-                -webkit-transform: scale(1);
-                transform: scale(1);
-                content: ' ';
-              }
-            }
-          }
-        }
-      }
-      &:not(.rc-tree-show-line) {
-        .rc-tree-treenode {
-          .rc-tree-switcher-noop {
-            background: none;
-          }
-        }
-      }
-      &.rc-tree-show-line {
-        .rc-tree-treenode:not(:last-child) {
-          > ul {
-            background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0
-              repeat-y;
-          }
-          > .rc-tree-switcher-noop {
-            background-position: -56px -18px;
-          }
-        }
-        .rc-tree-treenode:last-child {
-          > .rc-tree-switcher-noop {
-            background-position: -56px -36px;
-          }
-        }
-      }
-      &-child-tree {
-        display: none;
-        &-open {
-          display: block;
-        }
-      }
-      &-treenode-disabled {
-        > span:not(.rc-tree-switcher),
-        > a,
-        > a span {
-          color: #767676;
-          cursor: not-allowed;
-        }
-      }
-      &-treenode-active {
-        background: rgba(0, 0, 0, 0.1);
-      }
-      &-node-selected {
-        opacity: 0.8;
-      }
-      &-icon__open {
-        margin-right: 2px;
-        vertical-align: top;
-        background-position: -110px -16px;
-      }
-      &-icon__close {
-        margin-right: 2px;
-        vertical-align: top;
-        background-position: -110px 0;
-      }
-      &-icon__docu {
-        margin-right: 2px;
-        vertical-align: top;
-        background-position: -110px -32px;
-      }
-      &-icon__customize {
-        margin-right: 2px;
-        vertical-align: top;
-      }
-      &-title {
-        display: inline-block;
-      }
-      &-indent {
-        display: inline-block;
-        height: 0;
-        vertical-align: bottom;
-      }
-      &-indent-unit {
-        display: inline-block;
-        width: 16px;
-      }
-
-      &-draggable-icon {
-        display: inline-flex;
-        justify-content: center;
-        width: 16px;
-      }
-    }
-  `;
+  return css({
+    '.moveable-control-box': {
+      zIndex: 999,
+    },
+    '.rc-tree': {
+      margin: 0,
+      marginBottom: '15px',
+      border: '1px solid transparent',
+      '&-focused:not(&-active-focused)': {
+        borderColor: 'cyan',
+      },
+      '.rc-tree-title': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+      },
+      '.rc-tree-treenode': {
+        margin: 0,
+        padding: '1px',
+        lineHeight: '24px',
+        whiteSpace: 'nowrap',
+        listStyle: 'none',
+        outline: 0,
+        display: 'flex',
+        marginBottom: '3px',
+        cursor: 'pointer',
+        '.draggable': {
+          color: '#333',
+          MozUserSelect: 'none',
+          KhtmlUserSelect: 'none',
+          WebkitUserSelect: 'none',
+          userSelect: 'none',
+        },
+        '&.drop-container': {
+          '> .draggable::after': {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            boxShadow: 'inset 0 0 0 2px blue',
+            content: '',
+          },
+          '& ~ .rc-tree-treenode': {
+            borderLeft: `2px solid ${theme.components.input.borderColor}`,
+          },
+        },
+        '&.drop-target': {
+          '& ~ .rc-tree-treenode': {
+            borderLeft: 'none',
+          },
+        },
+        '&.filter-node': {
+          '> .rc-tree-node-content-wrapper': {
+            color: '#a60000 !important',
+            fontWeight: 'bold !important',
+          },
+        },
+        ul: {
+          margin: 0,
+          padding: '0 0 0 18px',
+        },
+        '.rc-tree-node-content-wrapper': {
+          position: 'relative',
+          display: 'inline-block',
+          height: '24px',
+          margin: 0,
+          padding: 0,
+          textDecoration: 'none',
+          verticalAlign: 'top',
+          cursor: 'grab',
+          flexGrow: 1,
+          border: `1px solid ${theme.components.input.borderColor}`,
+          borderRadius: `${theme.shape.radius.default}`,
+          background: `${theme.colors.background.secondary}`,
+          minHeight: `${theme.spacing.gridSize * 4}px`,
+          '&:hover': {
+            border: `1px solid ${theme.components.input.borderHover}`,
+          },
+          '&.rc-tree-node-selected': {
+            border: `1px solid ${theme.colors.primary.border}`,
+            opacity: 1,
+          },
+        },
+        span: {
+          '&.rc-tree-checkbox, &.rc-tree-iconEle': {
+            display: 'inline-block',
+            width: '16px',
+            height: '16px',
+            marginRight: '2px',
+            lineHeight: '16px',
+            verticalAlign: '-0.125em',
+            backgroundColor: 'transparent',
+            backgroundRepeat: 'no-repeat',
+            backgroundAttachment: 'scroll',
+            border: '0 none',
+            outline: 'none',
+            cursor: 'pointer',
+            '&.rc-tree-icon__customize': {
+              backgroundImage: 'none',
+            },
+          },
+          '&.rc-tree-switcher': {
+            display: 'flex',
+            alignItems: 'center',
+            width: '16px',
+            backgroundColor: 'transparent',
+            backgroundRepeat: 'no-repeat',
+            backgroundAttachment: 'scroll',
+            border: '0 none',
+            outline: 'none',
+            cursor: 'pointer',
+            '&.rc-tree-icon__customize': {
+              backgroundImage: 'none',
+            },
+            '&.rc-tree-switcher-noop': {
+              cursor: 'auto',
+            },
+            '&.rc-tree-switcher_open': {
+              backgroundPosition: '-93px -56px',
+            },
+            '&.rc-tree-switcher_close': {
+              backgroundPosition: '-75px -56px',
+            },
+          },
+          '&.rc-tree-icon_loading': {
+            marginRight: '2px',
+            verticalAlign: 'top',
+            background:
+              "url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7') no-repeat scroll 0 0 transparent",
+          },
+          '&.rc-tree-checkbox': {
+            width: '13px',
+            height: '13px',
+            margin: '0 3px',
+            backgroundPosition: '0 0',
+            '&-checked': {
+              backgroundPosition: '-14px 0',
+            },
+            '&-indeterminate': {
+              backgroundPosition: '-14px -28px',
+            },
+            '&-disabled': {
+              backgroundPosition: '0 -56px',
+            },
+            '&.rc-tree-checkbox-checked.rc-tree-checkbox-disabled': {
+              backgroundPosition: '-14px -56px',
+            },
+            '&.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled': {
+              position: 'relative',
+              background: '#ccc',
+              borderRadius: '3px',
+              '&::after': {
+                position: 'absolute',
+                top: '5px',
+                left: '3px',
+                width: '5px',
+                height: 0,
+                border: '2px solid #fff',
+                borderTop: 0,
+                borderLeft: 0,
+                WebkitTransform: 'scale(1)',
+                transform: 'scale(1)',
+                content: ' ',
+              },
+            },
+          },
+        },
+      },
+      '&:not(.rc-tree-show-line)': {
+        '.rc-tree-treenode': {
+          '.rc-tree-switcher-noop': {
+            background: 'none',
+          },
+        },
+      },
+      '&.rc-tree-show-line': {
+        '.rc-tree-treenode:not(:last-child)': {
+          '> ul': {
+            background:
+              "url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y",
+          },
+          '> .rc-tree-switcher-noop': {
+            backgroundPosition: '-56px -18px',
+          },
+        },
+        '.rc-tree-treenode:last-child': {
+          '> .rc-tree-switcher-noop': {
+            backgroundPosition: '-56px -36px',
+          },
+        },
+      },
+      '&-child-tree': {
+        display: 'none',
+        '&-open': {
+          display: 'block',
+        },
+      },
+      '&-treenode-disabled': {
+        '> span:not(.rc-tree-switcher), > a, > a span': {
+          color: '#767676',
+          cursor: 'not-allowed',
+        },
+      },
+      '&-treenode-active': {
+        background: 'rgba(0, 0, 0, 0.1)',
+      },
+      '&-node-selected': {
+        opacity: 0.8,
+      },
+      '&-icon__open': {
+        marginRight: '2px',
+        verticalAlign: 'top',
+        backgroundPosition: '-110px -16px',
+      },
+      '&-icon__close': {
+        marginRight: '2px',
+        verticalAlign: 'top',
+        backgroundPosition: '-110px 0',
+      },
+      '&-icon__docu': {
+        marginRight: '2px',
+        verticalAlign: 'top',
+        backgroundPosition: '-110px -32px',
+      },
+      '&-icon__customize': {
+        marginRight: '2px',
+        verticalAlign: 'top',
+      },
+      '&-title': {
+        display: 'inline-block',
+      },
+      '&-indent': {
+        display: 'inline-block',
+        height: 0,
+        verticalAlign: 'bottom',
+      },
+      '&-indent-unit': {
+        display: 'inline-block',
+        width: '16px',
+      },
+      '&-draggable-icon': {
+        display: 'inline-flex',
+        justifyContent: 'center',
+        width: '16px',
+      },
+    },
+  });
 }