From bc5c32350415c8834052932b8cdd7c3cb232d499 Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Wed, 15 Feb 2023 09:16:58 +0100
Subject: [PATCH] FEATURE: Commandbar for modules

Wrapped as webcomponent to prevent the module styles from interfering.
Icons are now provided as prop to the CommandBar to allow using the react-ui-components in the UI and some custom implementation in the modules as the ui component is too heavy.
---
 ...uild-essentials-npm-8.2.3-d9fe30a4f4.patch |  19 -
 ...uild-essentials-npm-8.2.6-787ecaf75f.patch |  17 +
 package.json                                  |   4 +-
 packages/commandbar/package.json              |   2 +-
 packages/commandbar/src/CommandBar.tsx        |   5 +-
 packages/commandbar/src/Variables.module.css  |   4 +-
 .../CommandBarDialog.module.css               |  17 +
 .../CommandBarFooter.module.css               |   2 +
 .../CommandBarFooter/CommandBarFooter.tsx     |  21 +-
 .../CommandBarHeader.module.css               |   1 +
 .../CommandBarHeader/CommandBarHeader.tsx     |  11 +-
 .../components/CommandList/CommandList.tsx    |   2 +
 .../CommandListItem.module.css                |   5 +
 .../CommandListItem/CommandListItem.tsx       |   6 +-
 .../CommandResultsView.module.css             |  35 ++
 .../CommandResultsView/CommandResultsView.tsx |   6 +-
 .../src/components/Icon/Icon.module.css       |   5 -
 .../commandbar/src/components/Icon/Icon.tsx   |  20 --
 .../IconWrapper/IconWrapper.module.css        |  12 +
 .../components/IconWrapper/IconWrapper.tsx    |  13 +
 .../components/SearchBox/SearchBox.module.css |   3 +-
 .../src/components/SearchBox/SearchBox.tsx    |  11 +-
 .../ToggleButton/ToggleButton.module.css      |   4 +-
 packages/commandbar/src/components/index.ts   |   4 +-
 .../src/state/CommandBarStateProvider.tsx     |  19 +-
 packages/commandbar/src/typings/global.d.ts   |   3 +
 packages/dev-server/src/index.tsx             |  13 +
 packages/module-plugin/package.json           |   3 +-
 .../module-plugin/src/ModulePlugin.module.css |  27 +-
 packages/module-plugin/src/index.tsx          | 134 ++++---
 packages/ui-plugin/package.json               |   5 +-
 packages/ui-plugin/src/CommandBarUiPlugin.tsx |   4 +
 yarn.lock                                     | 328 ++++++++++++------
 33 files changed, 552 insertions(+), 213 deletions(-)
 delete mode 100644 .yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch
 create mode 100644 .yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch
 delete mode 100644 packages/commandbar/src/components/Icon/Icon.module.css
 delete mode 100644 packages/commandbar/src/components/Icon/Icon.tsx
 create mode 100644 packages/commandbar/src/components/IconWrapper/IconWrapper.module.css
 create mode 100644 packages/commandbar/src/components/IconWrapper/IconWrapper.tsx

diff --git a/.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch b/.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch
deleted file mode 100644
index 53f5ec8..0000000
--- a/.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch
+++ /dev/null
@@ -1,19 +0,0 @@
-diff --git a/src/webpack.config.js b/src/webpack.config.js
-index 2fa005bffa952dcdbe5ff657d54c9f090f60f1d0..5dfe3e872f077e440bf903d038e8a4a77039e24f 100644
---- a/src/webpack.config.js
-+++ b/src/webpack.config.js
-@@ -123,14 +123,6 @@ const webpackConfig = {
-                             },
-                             importLoaders: 1
-                         }
--                    },
--                    {
--                        loader: 'postcss-loader',
--                        options: {
--                            config: {
--                                path: path.join(__dirname, 'postcss.config.js')
--                            }
--                        }
-                     }
-                 ]
-             },
diff --git a/.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch b/.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch
new file mode 100644
index 0000000..2e65478
--- /dev/null
+++ b/.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch
@@ -0,0 +1,17 @@
+diff --git a/src/postcss.config.js b/src/postcss.config.js
+index 7d74e8f86c90e5afe0b66c159918e0b6d53fcd96..17b22e59f103325cf7a3804d0c3fbfee7fbc45ff 100644
+--- a/src/postcss.config.js
++++ b/src/postcss.config.js
+@@ -4,9 +4,9 @@ const styleVars = styles.generateCssVarsObject(styles.config);
+ module.exports = {
+     plugins: [
+         require('autoprefixer'),
+-        require('postcss-css-variables')({
+-            variables: Object.assign(styleVars)
+-        }),
++        // require('postcss-css-variables')({
++        //     variables: Object.assign(styleVars)
++        // }),
+         require('postcss-import')(),
+         require('postcss-nested')(),
+         require('postcss-hexrgba')()
diff --git a/package.json b/package.json
index c9604e3..59237e3 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@neos-commandbar/ui-plugin": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
+    "@types/react": "^16.14.35",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.47.1",
     "eslint": "^8.30.0",
@@ -51,6 +51,6 @@
   ],
   "flat": true,
   "resolutions": {
-    "@neos-project/build-essentials@^8.2.3": "patch:@neos-project/build-essentials@npm%3A7.3.10#./.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch"
+    "@neos-project/build-essentials@^8.2.6": "patch:@neos-project/build-essentials@npm%3A8.2.6#./.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch"
   }
 }
diff --git a/packages/commandbar/package.json b/packages/commandbar/package.json
index 632af44..b49aa8a 100644
--- a/packages/commandbar/package.json
+++ b/packages/commandbar/package.json
@@ -2,7 +2,7 @@
   "name": "@neos-commandbar/commandbar",
   "version": "1.0.0",
   "dependencies": {
-    "@neos-project/react-ui-components": "^8.2.3",
+    "classnames": "^2.3.2",
     "fuzzy-search": "^3.2.1",
     "react": "^16.14.0"
   },
diff --git a/packages/commandbar/src/CommandBar.tsx b/packages/commandbar/src/CommandBar.tsx
index 2a070f1..630238a 100644
--- a/packages/commandbar/src/CommandBar.tsx
+++ b/packages/commandbar/src/CommandBar.tsx
@@ -10,11 +10,12 @@ type CommandBarProps = {
     open: boolean;
     toggleOpen: () => void;
     onDrag?: (state: boolean) => void;
+    IconComponent: React.FC<IconProps>;
 };
 
-const CommandBar: React.FC<CommandBarProps> = ({ commands, open, toggleOpen, onDrag }) => {
+const CommandBar: React.FC<CommandBarProps> = ({ commands, open, toggleOpen, onDrag, IconComponent }) => {
     return (
-        <CommandBarStateProvider commands={commands}>
+        <CommandBarStateProvider commands={commands} IconComponent={IconComponent}>
             <CommandBarDialog onDrag={onDrag} open={open} toggleOpen={toggleOpen} />
         </CommandBarStateProvider>
     );
diff --git a/packages/commandbar/src/Variables.module.css b/packages/commandbar/src/Variables.module.css
index 76b69e4..8f27054 100644
--- a/packages/commandbar/src/Variables.module.css
+++ b/packages/commandbar/src/Variables.module.css
@@ -19,9 +19,11 @@
     --dialog-blur: 5px;
 
     /* Neos UI colors */
-    --grayLight: #3f3f3f;
+    --grayLight: #999;
     --grayLighter: #eee;
     --grayMedium: #323232;
+    --grayDark: #3f3f3f;
+    --gray: #555;
     --textSubtleLight: #adadad;
     --textOnGray: #fff;
     --textOnWhite: #252525;
diff --git a/packages/commandbar/src/components/CommandBarDialog/CommandBarDialog.module.css b/packages/commandbar/src/components/CommandBarDialog/CommandBarDialog.module.css
index 515bc87..d6e3e7b 100644
--- a/packages/commandbar/src/components/CommandBarDialog/CommandBarDialog.module.css
+++ b/packages/commandbar/src/components/CommandBarDialog/CommandBarDialog.module.css
@@ -31,6 +31,23 @@
     font-size: 90%;
 }
 
+.commandBar ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+.commandBar ::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+.commandBar ::-webkit-scrollbar-thumb {
+    background-color: var(--grayLight);
+}
+
+.commandBar ::-webkit-scrollbar-corner {
+    background-color: var(--grayDark);
+}
+
 .resultsWrap {
     display: grid;
     grid-template-rows: 0fr;
diff --git a/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.module.css b/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.module.css
index 44f7b5e..c1bbc6a 100644
--- a/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.module.css
+++ b/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.module.css
@@ -12,11 +12,13 @@
 .breadcrumb {
     display: flex;
     gap: 1rem;
+    --icon-size: 0.875em;
 }
 
 .activity {
     display: flex;
     gap: 1rem;
+    --icon-size: 0.875em;
 }
 
 .madeWithLove {
diff --git a/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.tsx b/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.tsx
index 1aa6098..5c0f8e5 100644
--- a/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.tsx
+++ b/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 
-import Icon from '../Icon/Icon';
 import { useCommandBarState } from '../../state';
 
 import * as styles from './CommandBarFooter.module.css';
+import IconWrapper from '../IconWrapper/IconWrapper';
 
 const CommandBarFooter: React.FC = () => {
     const {
         state: { activeCommandId, activeCommandMessage, commands, result, selectedCommandGroup, expanded },
+        Icon,
     } = useCommandBarState();
 
     if (!expanded) return null;
@@ -18,7 +19,14 @@ const CommandBarFooter: React.FC = () => {
         <footer className={styles.commandBarFooter}>
             {activeCommandId ? (
                 <span className={styles.activity}>
-                    <Icon icon="circle-notch" spin={true} />
+                    <IconWrapper>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path
+                                fill="currentColor"
+                                d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"
+                            />
+                        </svg>
+                    </IconWrapper>
                     <em>
                         {runningCommand.name} ‒ {activeCommandMessage}
                     </em>
@@ -29,7 +37,14 @@ const CommandBarFooter: React.FC = () => {
                     <small>{commands[selectedCommandGroup].name}</small>
                 </span>
             ) : (
-                <Icon icon="neos" />
+                <IconWrapper>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                        <path
+                            fill="currentColor"
+                            d="M415.44 512h-95.11L212.12 357.46v91.1L125.69 512H28V29.82L68.47 0h108.05l123.74 176.13V63.45L386.69 0h97.69v461.5zM38.77 35.27V496l72-52.88V194l215.5 307.64h84.79l52.35-38.17h-78.27L69 13zm82.54 466.61 80-58.78v-101l-79.76-114.4v220.94L49 501.89h72.34zM80.63 10.77l310.6 442.57h82.37V10.77h-79.75v317.56L170.91 10.77zM311 191.65l72 102.81V15.93l-72 53v122.72z"
+                        />
+                    </svg>
+                </IconWrapper>
             )}
             <a
                 href="https://helzle.it"
diff --git a/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.module.css b/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.module.css
index 7c8f546..c93a2a1 100644
--- a/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.module.css
+++ b/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.module.css
@@ -16,6 +16,7 @@
     color: white;
     cursor: pointer;
     transition: background-color 0.1s ease-in-out;
+    display: flex;
 }
 
 .backButton:hover {
diff --git a/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.tsx b/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.tsx
index 9237b01..3a9bd6f 100644
--- a/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.tsx
+++ b/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { useCommandBarState } from '../../state';
-import Icon from '../Icon/Icon';
 import SearchBox from '../SearchBox/SearchBox';
 
 import * as styles from './CommandBarHeader.module.css';
 import { STATUS } from '../../state/commandBarMachine';
+import IconWrapper from '../IconWrapper/IconWrapper';
 
 const CommandBarHeader: React.FC = () => {
     const {
@@ -22,7 +22,14 @@ const CommandBarHeader: React.FC = () => {
                     className={styles.backButton}
                     title="Back"
                 >
-                    <Icon icon="arrow-left" />
+                    <IconWrapper>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                            <path
+                                fill="currentColor"
+                                d="m257.5 445.1-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
+                            />
+                        </svg>
+                    </IconWrapper>
                 </button>
             )}
             <SearchBox />
diff --git a/packages/commandbar/src/components/CommandList/CommandList.tsx b/packages/commandbar/src/components/CommandList/CommandList.tsx
index b80856c..20290b1 100644
--- a/packages/commandbar/src/components/CommandList/CommandList.tsx
+++ b/packages/commandbar/src/components/CommandList/CommandList.tsx
@@ -17,6 +17,7 @@ const CommandList: React.FC<CommandListingProps> = ({
 }) => {
     const {
         state: { commands, highlightedItem, availableCommandIds, activeCommandId, status, searchWord },
+        Icon,
     } = useCommandBarState();
     const { executeCommand } = useCommandInput();
     const selectedElementRef = React.useRef(null);
@@ -33,6 +34,7 @@ const CommandList: React.FC<CommandListingProps> = ({
                     {availableCommandIds.map((commandId, index) => (
                         <CommandListItem
                             key={commandId}
+                            Icon={Icon}
                             highlightRef={highlightedItem === index ? selectedElementRef : null}
                             command={commands[commandId]}
                             onItemSelect={executeCommand}
diff --git a/packages/commandbar/src/components/CommandListItem/CommandListItem.module.css b/packages/commandbar/src/components/CommandListItem/CommandListItem.module.css
index dee410f..6e49e11 100644
--- a/packages/commandbar/src/components/CommandListItem/CommandListItem.module.css
+++ b/packages/commandbar/src/components/CommandListItem/CommandListItem.module.css
@@ -8,6 +8,7 @@
     transition: background-color 0.1s ease-in-out, opacity 0.1s ease-in-out;
     background-color: transparent;
     user-select: none;
+    --icon-size: 0.875em;
 }
 
 .commandListItem:hover {
@@ -35,3 +36,7 @@
     white-space:pre-wrap;
     font-size: 0.9em;
 }
+
+.type {
+    max-width: 30%;
+}
diff --git a/packages/commandbar/src/components/CommandListItem/CommandListItem.tsx b/packages/commandbar/src/components/CommandListItem/CommandListItem.tsx
index 6bdf285..ab849c1 100644
--- a/packages/commandbar/src/components/CommandListItem/CommandListItem.tsx
+++ b/packages/commandbar/src/components/CommandListItem/CommandListItem.tsx
@@ -1,7 +1,6 @@
 import React, { LegacyRef } from 'react';
 
 import * as styles from './CommandListItem.module.css';
-import Icon from '../Icon/Icon';
 
 type CommandListItemProps = {
     command: ProcessedCommandItem;
@@ -10,6 +9,7 @@ type CommandListItemProps = {
     highlightRef?: React.Ref<HTMLLIElement>;
     runningCommandId?: CommandId;
     disabled?: boolean;
+    Icon: React.FC<IconProps>;
 };
 
 function getCommandType({ subCommandIds, category, canHandleQueries, action }: ProcessedCommandItem): string {
@@ -33,7 +33,7 @@ function getCommandType({ subCommandIds, category, canHandleQueries, action }: P
 }
 
 const CommandListItem: React.FC<CommandListItemProps> = React.forwardRef(
-    ({ command, onItemSelect, highlighted, disabled }, highlightRef: LegacyRef<HTMLLIElement>) => {
+    ({ command, onItemSelect, highlighted, disabled, Icon }, highlightRef: LegacyRef<HTMLLIElement>) => {
         const { id, name, description, icon } = command;
 
         const commandType = getCommandType(command);
@@ -57,7 +57,7 @@ const CommandListItem: React.FC<CommandListItemProps> = React.forwardRef(
                         </span>
                     )}
                 </span>
-                <small>{commandType}</small>
+                <small className={styles.type}>{commandType}</small>
             </li>
         );
     }
diff --git a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.module.css b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.module.css
index eb465fe..ca16601 100644
--- a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.module.css
+++ b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.module.css
@@ -2,3 +2,38 @@
     max-width: 100%;
     overflow: auto;
 }
+
+.results {
+    min-height: 0;
+    transition: opacity 0.3s ease-in;
+    overflow-y: auto;
+    max-height: 60vh;
+    height: 100%;
+}
+
+.results h6 {
+    color: var(--color-light-text);
+    margin: 0.5rem;
+    font-size: 0.9em;
+    font-weight: normal;
+    user-select: none;
+}
+
+.results ul {
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    margin: 0;
+}
+
+.noResults {
+    padding: 0.5rem;
+}
+
+.disabled {
+    opacity: 0.5 !important;
+    pointer-events: none;
+    user-select: none;
+}
diff --git a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx
index 57aaa80..32b3147 100644
--- a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx
+++ b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx
@@ -8,6 +8,7 @@ import * as styles from './CommandResultsView.module.css';
 const CommandResultsView: React.FC = () => {
     const {
         state: { result, highlightedOption, activeCommandId },
+        Icon,
     } = useCommandBarState();
     const { executeCommand } = useCommandInput();
     const selectedElementRef = React.useRef(null);
@@ -25,16 +26,17 @@ const CommandResultsView: React.FC = () => {
             {message && <h6>{message}</h6>}
             {view ? <div>{view}</div> : ''}
             {options && (
-                <nav className={[styles.results, !!result && styles.disabled].join(' ')}>
+                <nav className={[styles.results].join(' ')}>
                     <ul>
                         {Object.keys(options).map((commandId, index) => (
                             <CommandListItem
                                 key={commandId}
-                                ref={highlightedOption === index ? selectedElementRef : null}
+                                highlightRef={highlightedOption === index ? selectedElementRef : null}
                                 command={options[commandId]}
                                 onItemSelect={executeCommand}
                                 highlighted={highlightedOption === index}
                                 runningCommandId={activeCommandId}
+                                Icon={Icon}
                             />
                         ))}
                     </ul>
diff --git a/packages/commandbar/src/components/Icon/Icon.module.css b/packages/commandbar/src/components/Icon/Icon.module.css
deleted file mode 100644
index b48cc89..0000000
--- a/packages/commandbar/src/components/Icon/Icon.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.iconWrap {
-    width: var(--icon-size);
-    display: inline-block;
-    text-align: center;
-}
diff --git a/packages/commandbar/src/components/Icon/Icon.tsx b/packages/commandbar/src/components/Icon/Icon.tsx
deleted file mode 100644
index 98d02cf..0000000
--- a/packages/commandbar/src/components/Icon/Icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import { Icon as NeosIcon } from '@neos-project/react-ui-components';
-
-import * as styles from './Icon.module.css';
-
-type IconProps = {
-    icon: string;
-    spin?: boolean;
-};
-
-const Icon: React.FC<IconProps> = ({ icon, spin = false }) => {
-    return (
-        <span className={styles.iconWrap}>
-            <NeosIcon icon={icon} spin={spin} />
-        </span>
-    );
-};
-
-export default React.memo(Icon);
diff --git a/packages/commandbar/src/components/IconWrapper/IconWrapper.module.css b/packages/commandbar/src/components/IconWrapper/IconWrapper.module.css
new file mode 100644
index 0000000..f76bd74
--- /dev/null
+++ b/packages/commandbar/src/components/IconWrapper/IconWrapper.module.css
@@ -0,0 +1,12 @@
+.iconWrap {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    display: inline-block;
+    text-align: center;
+}
+
+.iconWrap svg {
+    max-width: 100%;
+    max-height: 100%;
+    display: inline-block;
+}
diff --git a/packages/commandbar/src/components/IconWrapper/IconWrapper.tsx b/packages/commandbar/src/components/IconWrapper/IconWrapper.tsx
new file mode 100644
index 0000000..3feab3f
--- /dev/null
+++ b/packages/commandbar/src/components/IconWrapper/IconWrapper.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import * as styles from './IconWrapper.module.css';
+
+type IconWrapperProps = {
+    children: JSX.Element;
+};
+
+const IconWrapper: React.FC<IconWrapperProps> = ({ children }) => {
+    return <span className={styles.iconWrap}>{children}</span>;
+};
+
+export default React.memo(IconWrapper);
diff --git a/packages/commandbar/src/components/SearchBox/SearchBox.module.css b/packages/commandbar/src/components/SearchBox/SearchBox.module.css
index b81bd94..0aac1f0 100644
--- a/packages/commandbar/src/components/SearchBox/SearchBox.module.css
+++ b/packages/commandbar/src/components/SearchBox/SearchBox.module.css
@@ -27,8 +27,7 @@
 }
 
 .expandButton svg {
-    font-size: 120%;
-    color: var(--textOnGray);
+    color: var(--grayLighter);
     transition: color 0.1s ease-in-out;
 }
 
diff --git a/packages/commandbar/src/components/SearchBox/SearchBox.tsx b/packages/commandbar/src/components/SearchBox/SearchBox.tsx
index 1ae58a2..736a078 100644
--- a/packages/commandbar/src/components/SearchBox/SearchBox.tsx
+++ b/packages/commandbar/src/components/SearchBox/SearchBox.tsx
@@ -4,7 +4,7 @@ import { useCommandBarState } from '../../state';
 import { STATUS } from '../../state/commandBarMachine';
 
 import * as styles from './SearchBox.module.css';
-import Icon from '../Icon/Icon';
+import IconWrapper from '../IconWrapper/IconWrapper';
 
 const SearchBox: React.FC = () => {
     const {
@@ -49,7 +49,14 @@ const SearchBox: React.FC = () => {
             />
             {!expanded && (
                 <button className={styles.expandButton} onClick={actions.EXPAND} title="Expand to show all commands">
-                    <Icon icon="caret-down" />
+                    <IconWrapper>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                            <path
+                                fill="currentColor"
+                                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                            />
+                        </svg>
+                    </IconWrapper>
                 </button>
             )}
         </>
diff --git a/packages/commandbar/src/components/ToggleButton/ToggleButton.module.css b/packages/commandbar/src/components/ToggleButton/ToggleButton.module.css
index cf9de82..49628e6 100644
--- a/packages/commandbar/src/components/ToggleButton/ToggleButton.module.css
+++ b/packages/commandbar/src/components/ToggleButton/ToggleButton.module.css
@@ -1,5 +1,5 @@
 .toggleButton {
-    background-color: var(--grayLight);
+    background-color: var(--grayDark);
     border: 1px solid var(--grayMedium);
     color: var(--textSubtleLight);
     border-radius: 6px;
@@ -24,7 +24,7 @@
 }
 
 .buttonIcon {
-    background-color: var(--grayMedium);
+    background-color: var(--gray);
     border-radius: 3px;
     color: var(--textOnGray);
     font-size: 80%;
diff --git a/packages/commandbar/src/components/index.ts b/packages/commandbar/src/components/index.ts
index 49e4e81..ad623ad 100644
--- a/packages/commandbar/src/components/index.ts
+++ b/packages/commandbar/src/components/index.ts
@@ -3,7 +3,7 @@ import CommandBarHeader from './CommandBarHeader/CommandBarHeader';
 import CommandList from './CommandList/CommandList';
 import CommandListItem from './CommandListItem/CommandListItem';
 import CommandResultsView from './CommandResultsView/CommandResultsView';
-import Icon from './Icon/Icon';
+import IconWrapper from './IconWrapper/IconWrapper';
 import SearchBox from './SearchBox/SearchBox';
 import ToggleButton from './ToggleButton/ToggleButton';
 
@@ -13,7 +13,7 @@ export {
     CommandList,
     CommandListItem,
     CommandResultsView,
-    Icon,
+    IconWrapper,
     SearchBox,
     ToggleButton,
 };
diff --git a/packages/commandbar/src/state/CommandBarStateProvider.tsx b/packages/commandbar/src/state/CommandBarStateProvider.tsx
index 09bdf32..c7a5338 100644
--- a/packages/commandbar/src/state/CommandBarStateProvider.tsx
+++ b/packages/commandbar/src/state/CommandBarStateProvider.tsx
@@ -1,23 +1,26 @@
-import React, { createContext, useContext, useMemo, useReducer } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react';
 
 import { commandBarReducer, CommandBarState } from './commandBarReducer';
 import { flattenCommands } from '../helpers';
 import { STATUS, TRANSITION } from './commandBarMachine';
+import { IconWrapper } from '../components';
 
 interface CommandBarContextProps {
     commands: HierarchicalCommandList;
-    children: React.ReactElement;
+    children: JSX.Element;
+    IconComponent: React.FC<IconProps>;
 }
 
 interface CommandBarContextValues {
     state: CommandBarState;
     actions: Record<TRANSITION, (...any) => void>;
+    Icon: Renderable<IconProps>;
 }
 
 const CommandBarContext = createContext({} as CommandBarContextValues);
 export const useCommandBarState = (): CommandBarContextValues => useContext(CommandBarContext);
 
-export const CommandBarStateProvider: React.FC<CommandBarContextProps> = ({ commands, children }) => {
+export const CommandBarStateProvider: React.FC<CommandBarContextProps> = ({ commands, children, IconComponent }) => {
     const [state, dispatch] = useReducer(commandBarReducer, {
         status: STATUS.COLLAPSED,
         availableCommandIds: Object.keys(commands),
@@ -55,5 +58,13 @@ export const CommandBarStateProvider: React.FC<CommandBarContextProps> = ({ comm
         };
     }, []);
 
-    return <CommandBarContext.Provider value={{ state, actions }}>{children}</CommandBarContext.Provider>;
+    const Icon: React.FC<IconProps> = useCallback(({ icon, spin = false }) => {
+        return (
+            <IconWrapper>
+                <IconComponent icon={icon} spin={spin} />
+            </IconWrapper>
+        );
+    }, []);
+
+    return <CommandBarContext.Provider value={{ state, actions, Icon }}>{children}</CommandBarContext.Provider>;
 };
diff --git a/packages/commandbar/src/typings/global.d.ts b/packages/commandbar/src/typings/global.d.ts
index 71e71f2..5a64042 100644
--- a/packages/commandbar/src/typings/global.d.ts
+++ b/packages/commandbar/src/typings/global.d.ts
@@ -9,6 +9,9 @@ type CommandBarConfig = {
     };
 };
 
+type Renderable<Props> = React.FC<Props>;
+type IconProps = { icon: string; spin?: boolean };
+
 // Nested command list for simpler definition by the user
 type HierarchicalCommandList = Record<CommandId, CommandItem>;
 
diff --git a/packages/dev-server/src/index.tsx b/packages/dev-server/src/index.tsx
index ce14bed..da65f6e 100644
--- a/packages/dev-server/src/index.tsx
+++ b/packages/dev-server/src/index.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
+
 import { CommandBar, logger } from '@neos-commandbar/commandbar';
 
 (() => {
@@ -26,6 +27,17 @@ import { CommandBar, logger } from '@neos-commandbar/commandbar';
         ],
     };
 
+    const IconComponent: React.FC<IconProps> = () => {
+        return (
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path
+                    fill="currentColor"
+                    d="M509.5 184.6 458.9 32.8C452.4 13.2 434.1 0 413.4 0H272v192h238.7c-.4-2.5-.4-5-1.2-7.4zM240 0H98.6c-20.7 0-39 13.2-45.5 32.8L2.5 184.6c-.8 2.4-.8 4.9-1.2 7.4H240V0zM0 224v240c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V224H0z"
+                />
+            </svg>
+        );
+    };
+
     const App = () => {
         const [sideBarLeftOpen, setSideBarLeftOpen] = useState(false);
         const [sideBarRightOpen, setSideBarRightOpen] = useState(false);
@@ -224,6 +236,7 @@ import { CommandBar, logger } from '@neos-commandbar/commandbar';
                     commands={commands}
                     open={commandBarOpen}
                     toggleOpen={() => setCommandBarOpen((prev) => !prev)}
+                    IconComponent={IconComponent}
                 />
             </div>
         );
diff --git a/packages/module-plugin/package.json b/packages/module-plugin/package.json
index 36775b1..a80d2fc 100644
--- a/packages/module-plugin/package.json
+++ b/packages/module-plugin/package.json
@@ -4,7 +4,8 @@
   "dependencies": {
     "@neos-commandbar/commandbar": "*",
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "react-shadow-dom-retarget-events": "^1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.0",
diff --git a/packages/module-plugin/src/ModulePlugin.module.css b/packages/module-plugin/src/ModulePlugin.module.css
index bea5267..8f91921 100644
--- a/packages/module-plugin/src/ModulePlugin.module.css
+++ b/packages/module-plugin/src/ModulePlugin.module.css
@@ -2,6 +2,31 @@
     display: flex;
     align-items: center;
     height: 41px;
-    font-size: 0.8rem !important;
+    font-size: 14px !important;
+    line-height: 20px;
     margin: 0 1rem;
 }
+
+.fullScreenLayer {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: 9999;
+    display: none;
+}
+
+.open {
+    display: block;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% {  transform: rotate(359deg); }
+}
+
+.spin {
+    animation: spin 2s linear infinite;
+}
diff --git a/packages/module-plugin/src/index.tsx b/packages/module-plugin/src/index.tsx
index 40ba4f6..aad90b6 100644
--- a/packages/module-plugin/src/index.tsx
+++ b/packages/module-plugin/src/index.tsx
@@ -1,57 +1,111 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
+import * as retargetEvents from 'react-shadow-dom-retarget-events';
 
 import * as styles from './ModulePlugin.module.css';
 
-// FIXME: Replace with import from main when esm build issue is fixed
-import { ToggleButton } from '@neos-commandbar/commandbar/src/components';
-import { logger } from '@neos-commandbar/commandbar/src/helpers';
+import { ToggleButton, logger, CommandBar } from '@neos-commandbar/commandbar';
 
 const ENDPOINT_COMMANDS = '/neos/service/data-source/shel-neos-commandbar-commands';
 
+const IconComponent: React.FC<IconProps> = ({ icon, spin = false }) => {
+    return (
+        <svg className={spin ? styles.spin : ''} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+                fill="currentColor"
+                d="M509.5 184.6 458.9 32.8C452.4 13.2 434.1 0 413.4 0H272v192h238.7c-.4-2.5-.4-5-1.2-7.4zM240 0H98.6c-20.7 0-39 13.2-45.5 32.8L2.5 184.6c-.8 2.4-.8 4.9-1.2 7.4H240V0zM0 224v240c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V224H0z"
+            />
+        </svg>
+    );
+};
+
+const App: React.FC = () => {
+    const [initialized, setInitialized] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const [commands, setCommands] = useState<HierarchicalCommandList>({});
+
+    const handleToggle = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+
+    // Load commands
+    useEffect(() => {
+        fetch(ENDPOINT_COMMANDS, {
+            credentials: 'include',
+        })
+            .then((res) => res.json())
+            .then((commands: ModuleCommands) => {
+                setCommands({ ...commands });
+                setInitialized(true);
+                logger.debug(
+                    '[CommandBar] Initialized command bar for backend modules with the following commands:',
+                    Object.keys(commands)
+                );
+            })
+            .catch((e) => {
+                logger.error('[CommandBar]', e);
+            });
+    }, []);
+
+    return (
+        <div className={styles.pluginWrap}>
+            <ToggleButton handleToggle={handleToggle} disabled={!initialized} />
+            {initialized && (
+                <div
+                    className={[styles.fullScreenLayer, open && styles.open].join(' ')}
+                    onDragOver={(e) => e.preventDefault()}
+                    style={dragging ? { pointerEvents: 'all' } : null}
+                >
+                    <CommandBar
+                        commands={commands}
+                        open={open}
+                        toggleOpen={handleToggle}
+                        onDrag={setDragging}
+                        IconComponent={IconComponent}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+class CommandBarContainer extends HTMLElement {
+    mountPoint: HTMLDivElement;
+
+    createApp() {
+        return React.createElement(App, {}, React.createElement('slot'));
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        this.mountPoint = document.createElement('div');
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.appendChild(this.mountPoint);
+
+        const style = document.createElement('link');
+        style.setAttribute('rel', 'stylesheet');
+        style.setAttribute('href', this.getAttribute('styleuri'));
+        shadowRoot.append(style);
+
+        ReactDOM.render(this.createApp(), this.mountPoint);
+        retargetEvents(shadowRoot);
+    }
+}
+customElements.define('command-bar-container', CommandBarContainer);
+
 window.addEventListener('load', async (): Promise<void> => {
     while (!window.NeosCMS?.I18n?.initialized) {
         await new Promise((resolve) => setTimeout(resolve, 50));
     }
 
+    const commandBarStyleTag = document.querySelector(
+        'link[rel="stylesheet"][href*="Shel.Neos.CommandBar"]'
+    ) as HTMLLinkElement;
+
     const topBarLeft = document.querySelector('.neos-top-bar-left');
-    const pluginContainer = document.createElement('div');
+    const pluginContainer = document.createElement('command-bar-container');
     pluginContainer.id = 'shel-neos-commandbar';
+    pluginContainer.setAttribute('styleuri', commandBarStyleTag.href);
     topBarLeft.appendChild(pluginContainer);
-
-    const App: React.FC = () => {
-        const [initialized, setInitialized] = useState(false);
-        const [commands, setCommands] = useState<HierarchicalCommandList>({});
-
-        const handleToggle = useCallback(() => {
-            alert('Command bar for backend modules not implemented yet');
-        }, []);
-
-        // Load commands
-        useEffect(() => {
-            fetch(ENDPOINT_COMMANDS, {
-                credentials: 'include',
-            })
-                .then((res) => res.json())
-                .then((commands: ModuleCommands) => {
-                    setCommands({ ...commands });
-                    setInitialized(true);
-                    logger.debug(
-                        '[CommandBar] Initialized command bar for backend modules with the following commands:',
-                        Object.keys(commands)
-                    );
-                })
-                .catch((e) => {
-                    logger.error('[CommandBar]', e);
-                });
-        }, []);
-
-        return (
-            <div className={styles.pluginWrap}>
-                <ToggleButton handleToggle={handleToggle} disabled={!initialized} />
-            </div>
-        );
-    };
-
-    ReactDOM.render(<App />, pluginContainer);
 });
diff --git a/packages/ui-plugin/package.json b/packages/ui-plugin/package.json
index d1952c2..9077838 100644
--- a/packages/ui-plugin/package.json
+++ b/packages/ui-plugin/package.json
@@ -3,12 +3,13 @@
   "version": "1.0.0",
   "dependencies": {
     "@neos-commandbar/commandbar": "*",
+    "@neos-project/react-ui-components": "^8.2.6",
     "react-redux": "^7.2.9",
     "redux-actions": "^0.12.0"
   },
   "devDependencies": {
-    "@neos-project/build-essentials": "^8.2.3",
-    "@neos-project/neos-ui-extensibility": "^8.2.3"
+    "@neos-project/build-essentials": "^8.2.6",
+    "@neos-project/neos-ui-extensibility": "^8.2.6"
   },
   "source": "src/index.html",
   "scripts": {
diff --git a/packages/ui-plugin/src/CommandBarUiPlugin.tsx b/packages/ui-plugin/src/CommandBarUiPlugin.tsx
index 2d9f404..c4bcd7f 100644
--- a/packages/ui-plugin/src/CommandBarUiPlugin.tsx
+++ b/packages/ui-plugin/src/CommandBarUiPlugin.tsx
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import { neos } from '@neos-project/neos-ui-decorators';
 // @ts-ignore
 import { selectors, actions } from '@neos-project/neos-ui-redux-store';
+import { Icon } from '@neos-project/react-ui-components';
 
 import * as styles from './CommandBarUiPlugin.module.css';
 import { CommandBar, logger, ToggleButton } from '@neos-commandbar/commandbar';
@@ -53,6 +54,8 @@ const ENDPOINT_COMMANDS = 'service/data-source/shel-neos-commandbar-commands';
 const ENDPOINT_SEARCH_NODES = 'service/data-source/shel-neos-commandbar-search-nodes';
 const ENDPOINT_SEARCH_NEOS_DOCS = 'service/data-source/shel-neos-commandbar-search-neos-docs';
 
+const IconComponent: React.FC<IconProps> = ({ icon, spin = false }) => <Icon icon={icon} spin={spin} />;
+
 class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, CommandBarUiPluginState> {
     static propTypes = {
         config: PropTypes.object.isRequired,
@@ -382,6 +385,7 @@ class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, Co
                             commands={commands}
                             toggleOpen={toggleCommandBar}
                             onDrag={this.setDragging}
+                            IconComponent={IconComponent}
                         />
                     </div>
                 )}
diff --git a/yarn.lock b/yarn.lock
index a99bce4..f0dde42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -217,7 +217,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.13":
+  version: 7.20.13
+  resolution: "@babel/runtime@npm:7.20.13"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: 09b7a97a05c80540db6c9e4ddf8c5d2ebb06cae5caf3a87e33c33f27f8c4d49d9c67a2d72f1570e796045288fad569f98a26ceba0c4f5fad2af84b6ad855c4fb
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.9.2":
   version: 7.20.7
   resolution: "@babel/runtime@npm:7.20.7"
   dependencies:
@@ -580,8 +589,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@neos-commandbar/commandbar@workspace:packages/commandbar"
   dependencies:
-    "@neos-project/react-ui-components": ^8.2.3
     "@types/react-redux": ^7.1.25
+    classnames: ^2.3.2
     fuzzy-search: ^3.2.1
     react: ^16.14.0
   languageName: unknown
@@ -608,6 +617,7 @@ __metadata:
     parcel: ^2.8.2
     react: ^16.14.0
     react-dom: ^16.14.0
+    react-shadow-dom-retarget-events: ^1.1.0
   languageName: unknown
   linkType: soft
 
@@ -616,110 +626,123 @@ __metadata:
   resolution: "@neos-commandbar/ui-plugin@workspace:packages/ui-plugin"
   dependencies:
     "@neos-commandbar/commandbar": "*"
-    "@neos-project/build-essentials": ^8.2.3
-    "@neos-project/neos-ui-extensibility": ^8.2.3
+    "@neos-project/build-essentials": ^8.2.6
+    "@neos-project/neos-ui-extensibility": ^8.2.6
+    "@neos-project/react-ui-components": ^8.2.6
     react-redux: ^7.2.9
     redux-actions: ^0.12.0
   languageName: unknown
   linkType: soft
 
-"@neos-project/build-essentials@npm:7.3.10":
-  version: 7.3.10
-  resolution: "@neos-project/build-essentials@npm:7.3.10"
+"@neos-project/build-essentials@npm:8.2.6":
+  version: 8.2.6
+  resolution: "@neos-project/build-essentials@npm:8.2.6"
   dependencies:
     "@ckeditor/ckeditor5-dev-utils": ^12.0.1
+    autoprefixer: ^9.8.6
     babel-core: ^6.26.3
-    babel-eslint: ^7.1.1
     babel-loader: ^7.1.2
     check-dependencies: ^1.0.1
     cpx: ^1.3.1
     cross-env: ^6.0.3
     css-loader: ^3.4.1
     eslint: ^5.3.0
-    lodash.upperfirst: ^4.3.0
+    file-loader: ^5.0.2
+    json-loader: ^0.5.7
     mini-css-extract-plugin: ^0.5.0
+    null-loader: ^0.1.1
     postcss-css-variables: ^0.14.0
     postcss-hexrgba: ^1.0.1
     postcss-import: ^12.0.1
     postcss-loader: ^3.0.0
     postcss-nested: ^4.2.1
+    raw-loader: ^0.5
     rimraf: ^2.5.4
+    source-map-loader: ^0.2.4
+    string-replace-loader: ^2.1.1
+    style-loader: ^2.0.0
     stylelint: ^13.7.2
     terser-webpack-plugin: ^2.3.1
     ts-jest: ^23.10.5
     ts-loader: ^6.0.0
-    tslib: ^1.9.3
     tslint: ^5.11.0
     tslint-config-prettier: ^1.15.0
     tslint-react: ^3.6.0
-    typescript: ^3.2.2
+    typescript: ^4.6.4
     url-loader: ^3.0.0
     watch: ^1.0.2
     webpack: ^4.41.5
     webpack-livereload-plugin: ^2.2.0
   bin:
-    check-dependencies: node_modules/.bin/check-dependencies
-    cpx: node_modules/.bin/cpx
-    cross-env: node_modules/.bin/cross-env
-    eslint: node_modules/.bin/eslint
-    rimraf: node_modules/.bin/rimraf
-    stylelint: node_modules/.bin/stylelint
-    watch: node_modules/.bin/watch
-    webpack: node_modules/.bin/webpack
-  checksum: 5b8244dd2139a041fefc4b22197f6bf70c0eb9e1ec36ac01f07c02616b22f793b3418abcbc181244b7739771fd1d3e666cae2c2c3dcdbb7881a83632f18a48ab
+    check-dependencies: ../../node_modules/.bin/check-dependencies
+    cpx: ../../node_modules/.bin/cpx
+    cross-env: ../../node_modules/.bin/cross-env
+    eslint: ../../node_modules/.bin/eslint
+    jest: ../../node_modules/.bin/jest
+    rimraf: ../../node_modules/.bin/rimraf
+    stylelint: ../../node_modules/.bin/stylelint
+    watch: ../../node_modules/.bin/watch
+    webpack: ../../node_modules/.bin/webpack
+  checksum: 55bcc79e5608639ce80a583061810fdc9d87b241c4e97e8dd549628d8ac2d00aed15ba5174475cb764e095fb5263d3e5c4d78aae12123a49933fabca633e40af
   languageName: node
   linkType: hard
 
-"@neos-project/build-essentials@patch:@neos-project/build-essentials@npm%3A7.3.10#./.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch::locator=neos-commandbar%40workspace%3A.":
-  version: 7.3.10
-  resolution: "@neos-project/build-essentials@patch:@neos-project/build-essentials@npm%3A7.3.10#./.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch::version=7.3.10&hash=b13881&locator=neos-commandbar%40workspace%3A."
+"@neos-project/build-essentials@patch:@neos-project/build-essentials@npm%3A8.2.6#./.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch::locator=neos-commandbar%40workspace%3A.":
+  version: 8.2.6
+  resolution: "@neos-project/build-essentials@patch:@neos-project/build-essentials@npm%3A8.2.6#./.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch::version=8.2.6&hash=4d0168&locator=neos-commandbar%40workspace%3A."
   dependencies:
     "@ckeditor/ckeditor5-dev-utils": ^12.0.1
+    autoprefixer: ^9.8.6
     babel-core: ^6.26.3
-    babel-eslint: ^7.1.1
     babel-loader: ^7.1.2
     check-dependencies: ^1.0.1
     cpx: ^1.3.1
     cross-env: ^6.0.3
     css-loader: ^3.4.1
     eslint: ^5.3.0
-    lodash.upperfirst: ^4.3.0
+    file-loader: ^5.0.2
+    json-loader: ^0.5.7
     mini-css-extract-plugin: ^0.5.0
+    null-loader: ^0.1.1
     postcss-css-variables: ^0.14.0
     postcss-hexrgba: ^1.0.1
     postcss-import: ^12.0.1
     postcss-loader: ^3.0.0
     postcss-nested: ^4.2.1
+    raw-loader: ^0.5
     rimraf: ^2.5.4
+    source-map-loader: ^0.2.4
+    string-replace-loader: ^2.1.1
+    style-loader: ^2.0.0
     stylelint: ^13.7.2
     terser-webpack-plugin: ^2.3.1
     ts-jest: ^23.10.5
     ts-loader: ^6.0.0
-    tslib: ^1.9.3
     tslint: ^5.11.0
     tslint-config-prettier: ^1.15.0
     tslint-react: ^3.6.0
-    typescript: ^3.2.2
+    typescript: ^4.6.4
     url-loader: ^3.0.0
     watch: ^1.0.2
     webpack: ^4.41.5
     webpack-livereload-plugin: ^2.2.0
   bin:
-    check-dependencies: node_modules/.bin/check-dependencies
-    cpx: node_modules/.bin/cpx
-    cross-env: node_modules/.bin/cross-env
-    eslint: node_modules/.bin/eslint
-    rimraf: node_modules/.bin/rimraf
-    stylelint: node_modules/.bin/stylelint
-    watch: node_modules/.bin/watch
-    webpack: node_modules/.bin/webpack
-  checksum: 064d5f18a49b039b7eca1fb6fa837ab36ec329eeab122a025ee56942a3b66af9beb1d409a2bf0a40b9ab59ac211c936da9dbab0600efcc0456379be598f4f72f
+    check-dependencies: ../../node_modules/.bin/check-dependencies
+    cpx: ../../node_modules/.bin/cpx
+    cross-env: ../../node_modules/.bin/cross-env
+    eslint: ../../node_modules/.bin/eslint
+    jest: ../../node_modules/.bin/jest
+    rimraf: ../../node_modules/.bin/rimraf
+    stylelint: ../../node_modules/.bin/stylelint
+    watch: ../../node_modules/.bin/watch
+    webpack: ../../node_modules/.bin/webpack
+  checksum: a5e618a19127512aba781f5e8db815f4365f7b3c0bacf60f05318b6350ff9063a9f1f2cd30d9b33471e8136cead087699afe2b34e2a3d1ba15da567c0f01398f
   languageName: node
   linkType: hard
 
-"@neos-project/neos-ui-extensibility@npm:^8.2.3":
-  version: 8.2.3
-  resolution: "@neos-project/neos-ui-extensibility@npm:8.2.3"
+"@neos-project/neos-ui-extensibility@npm:^8.2.6":
+  version: 8.2.6
+  resolution: "@neos-project/neos-ui-extensibility@npm:8.2.6"
   dependencies:
     "@neos-project/positional-array-sorter": 8.1.4
     babel-plugin-transform-decorators-legacy: ^1.3.4
@@ -734,7 +757,7 @@ __metadata:
     webpack: ^4.41.5
   bin:
     neos-react-scripts: ./bin/neos-react-scripts.js
-  checksum: d0434d88fb72df0255b3011b2b9c55260805fad329a7084944b6e746a251cf47baa7bd351a1bebf9e31143b8431dfe30cdedaae5c8a0b11af5f53d92abe605a5
+  checksum: 2f1d06b05f21d9b916458da780dff1bf245772a285027ca0e9e538bb3fac68a836f9506f19d50cf896d298b37b59f2a6b39ca77b194201199452d60b459327ee
   languageName: node
   linkType: hard
 
@@ -745,9 +768,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@neos-project/react-ui-components@npm:^8.2.3":
-  version: 8.2.3
-  resolution: "@neos-project/react-ui-components@npm:8.2.3"
+"@neos-project/react-ui-components@npm:^8.2.6":
+  version: 8.2.6
+  resolution: "@neos-project/react-ui-components@npm:8.2.6"
   dependencies:
     "@fortawesome/fontawesome-svg-core": ^1.2.35
     "@fortawesome/free-brands-svg-icons": ^5.15.3
@@ -781,7 +804,7 @@ __metadata:
     prop-types: ^15.5.10
     react: ^16.12.0
     react-dom: ^16.0.0
-  checksum: efb6fe57b9d0c73f3cd2b4eb7fdb86335db77b48230932331a1e5e2e8d0d35b1dfbaae32d4a99d6a494193b2feaaf8e382c60707712167bf5f6297e95a0b8d0d
+  checksum: e0dbc592009e72f0f5afc3805aa6dfc9725261b485b6693453dc870bf7eb647d3f2fe7156a061cd71e863bf3b6cfc7d7a335af800d0bb6dc95b220a283480a78
   languageName: node
   linkType: hard
 
@@ -1615,7 +1638,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
   checksum: 527bddfe62db9012fccd7627794bd4c71beb77601861055d87e3ee464f2217c85fca7a4b56ae677478367bbd248dbde13553312b7d4dbc702a2f2bbf60c4018d
@@ -1692,7 +1715,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^18.0.26":
+"@types/react@npm:*":
   version: 18.0.26
   resolution: "@types/react@npm:18.0.26"
   dependencies:
@@ -1703,6 +1726,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^16.14.35":
+  version: 16.14.35
+  resolution: "@types/react@npm:16.14.35"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: ed9c551a7d50d073a5fb0295c1d939536c66c3286d42b6c94c20749464492ed95a408e6d3694bf49df0012da69e22202065c8c2fac0406356972a7fcb4960dd3
+  languageName: node
+  linkType: hard
+
 "@types/scheduler@npm:*":
   version: 0.16.2
   resolution: "@types/scheduler@npm:0.16.2"
@@ -2149,7 +2183,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.1.0, ajv@npm:^6.10.0, ajv@npm:^6.10.2, ajv@npm:^6.12.4, ajv@npm:^6.9.1":
+"ajv@npm:^6.1.0, ajv@npm:^6.10.0, ajv@npm:^6.10.2, ajv@npm:^6.12.4, ajv@npm:^6.12.5, ajv@npm:^6.9.1":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -2506,7 +2540,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:^2.6.4":
+"async@npm:^2.5.0, async@npm:^2.6.4":
   version: 2.6.4
   resolution: "async@npm:2.6.4"
   dependencies:
@@ -2541,7 +2575,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-code-frame@npm:^6.22.0, babel-code-frame@npm:^6.26.0":
+"babel-code-frame@npm:^6.26.0":
   version: 6.26.0
   resolution: "babel-code-frame@npm:6.26.0"
   dependencies:
@@ -2579,18 +2613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-eslint@npm:^7.1.1":
-  version: 7.2.3
-  resolution: "babel-eslint@npm:7.2.3"
-  dependencies:
-    babel-code-frame: ^6.22.0
-    babel-traverse: ^6.23.1
-    babel-types: ^6.23.0
-    babylon: ^6.17.0
-  checksum: b66fdebe24b553f8667e037d9bc7ad8ae4934d3beee1a8e488c033ca0e582816c0da4bb1405adbf549c6ff07069040e63572585a9333d470e5953d88e5a6bc22
-  languageName: node
-  linkType: hard
-
 "babel-generator@npm:^6.26.0":
   version: 6.26.1
   resolution: "babel-generator@npm:6.26.1"
@@ -3471,7 +3493,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-traverse@npm:^6.23.1, babel-traverse@npm:^6.24.1, babel-traverse@npm:^6.26.0":
+"babel-traverse@npm:^6.24.1, babel-traverse@npm:^6.26.0":
   version: 6.26.0
   resolution: "babel-traverse@npm:6.26.0"
   dependencies:
@@ -3488,7 +3510,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-types@npm:^6.19.0, babel-types@npm:^6.23.0, babel-types@npm:^6.24.1, babel-types@npm:^6.26.0":
+"babel-types@npm:^6.19.0, babel-types@npm:^6.24.1, babel-types@npm:^6.26.0":
   version: 6.26.0
   resolution: "babel-types@npm:6.26.0"
   dependencies:
@@ -3500,7 +3522,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babylon@npm:^6.17.0, babylon@npm:^6.18.0":
+"babylon@npm:^6.18.0":
   version: 6.18.0
   resolution: "babylon@npm:6.18.0"
   bin:
@@ -4064,9 +4086,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30000929":
-  version: 1.0.30001445
-  resolution: "caniuse-lite@npm:1.0.30001445"
-  checksum: f98ca67829c3c52af5af0a62b8510432b2ad9594437d24ad460a6eb1a23d93e7a31631b1f550fbbe482ad05c467aa00da710a41699eb13d1f246d7db4147ab79
+  version: 1.0.30001452
+  resolution: "caniuse-lite@npm:1.0.30001452"
+  checksum: de02aad7b71112409f30de53e8080bef0fe612ed95bba8b14fb830f59683e8caabc27bdd520563686965be77f2cb56e239e44b920144630b91d7fe9911ba8ad5
   languageName: node
   linkType: hard
 
@@ -4263,7 +4285,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.3":
+"classnames@npm:^2.2.3, classnames@npm:^2.3.2":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
   checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
@@ -4460,9 +4482,9 @@ __metadata:
   linkType: hard
 
 "content-type@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "content-type@npm:1.0.4"
-  checksum: 3d93585fda985d1554eca5ebd251994327608d2e200978fdbfba21c0c679914d5faf266d17027de44b34a72c7b0745b18584ecccaa7e1fdfb6a68ac7114f12e0
+  version: 1.0.5
+  resolution: "content-type@npm:1.0.5"
+  checksum: 566271e0a251642254cde0f845f9dd4f9856e52d988f4eb0d0dcffbb7a1f8ec98de7a5215fc628f3bce30fe2fb6fd2bc064b562d721658c59b544e2d34ea2766
   languageName: node
   linkType: hard
 
@@ -4518,9 +4540,9 @@ __metadata:
   linkType: hard
 
 "core-js@npm:^3.1.2":
-  version: 3.27.1
-  resolution: "core-js@npm:3.27.1"
-  checksum: d50b5f88aea4302512ad9446c18e90f4d35dea1e6d8d3f87337690677061565ff11a670f1e0c87de57aa6074375fbb25ed5784076c040d3c4de8b4bce7d2ebeb
+  version: 3.28.0
+  resolution: "core-js@npm:3.28.0"
+  checksum: 3155fd0ec16d0089106b145e9595280a4ea4bde0d7ff26aa14364cd4f1c203baf6620c3025acd284f363d08b9f21104101692766ca9a36ffeee7307bdf3e1881
   languageName: node
   linkType: hard
 
@@ -5280,7 +5302,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.3.103, electron-to-chromium@npm:^1.4.251":
+"electron-to-chromium@npm:^1.3.103":
+  version: 1.4.296
+  resolution: "electron-to-chromium@npm:1.4.296"
+  checksum: ab156f23a5f8ef452f5a5764e42d98c89d3a225ab4660c165235a4f62ab86c114d2ab8af872f14a52b48b7a41e8db9d11b497260ac9199724c8f848b4b433e46
+  languageName: node
+  linkType: hard
+
+"electron-to-chromium@npm:^1.4.251":
   version: 1.4.284
   resolution: "electron-to-chromium@npm:1.4.284"
   checksum: be496e9dca6509dbdbb54dc32146fc99f8eb716d28a7ee8ccd3eba0066561df36fc51418d8bd7cf5a5891810bf56c0def3418e74248f51ea4a843d423603d10a
@@ -6097,6 +6126,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-loader@npm:^5.0.2":
+  version: 5.1.0
+  resolution: "file-loader@npm:5.1.0"
+  dependencies:
+    loader-utils: ^1.4.0
+    schema-utils: ^2.5.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 236f835d62bb8478d9128464dfa4b25845b99df2a37728ec3684c4e7384164444534f83ca11555370cc8087b603ec991ab57f6b45c642b27296120c31638b7c0
+  languageName: node
+  linkType: hard
+
 "file-uri-to-path@npm:1.0.0":
   version: 1.0.0
   resolution: "file-uri-to-path@npm:1.0.0"
@@ -8041,6 +8082,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-loader@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "json-loader@npm:0.5.7"
+  checksum: c7d054edf7fd5338847f49008df3cdf744f64507584dff3e6d28f500604eedd9130ca1639caa61747b36ab141e7e8db0e86f8514b2244b6d8b0eb634f1154875
+  languageName: node
+  linkType: hard
+
 "json-parse-better-errors@npm:^1.0.1, json-parse-better-errors@npm:^1.0.2":
   version: 1.0.2
   resolution: "json-parse-better-errors@npm:1.0.2"
@@ -8083,7 +8131,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:2.x":
+"json5@npm:2.x, json5@npm:^2.1.2":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -8418,7 +8466,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^1.0.2, loader-utils@npm:^1.1.0, loader-utils@npm:^1.2.3":
+"loader-utils@npm:^1.0.2, loader-utils@npm:^1.1.0, loader-utils@npm:^1.2.3, loader-utils@npm:^1.4.0":
   version: 1.4.2
   resolution: "loader-utils@npm:1.4.2"
   dependencies:
@@ -8429,6 +8477,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loader-utils@npm:^2.0.0":
+  version: 2.0.4
+  resolution: "loader-utils@npm:2.0.4"
+  dependencies:
+    big.js: ^5.2.2
+    emojis-list: ^3.0.0
+    json5: ^2.1.2
+  checksum: a5281f5fff1eaa310ad5e1164095689443630f3411e927f95031ab4fb83b4a98f388185bb1fe949e8ab8d4247004336a625e9255c22122b815bb9a4c5d8fc3b7
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -8551,13 +8610,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.upperfirst@npm:^4.3.0":
-  version: 4.3.1
-  resolution: "lodash.upperfirst@npm:4.3.1"
-  checksum: cadec6955900afe1928cc60cdc4923a79c2ef991e42665419cc81630ed9b4f952a1093b222e0141ab31cbc4dba549f97ec28ff67929d71e01861c97188a5fa83
-  languageName: node
-  linkType: hard
-
 "lodash@npm:^4.13.1, lodash@npm:^4.17.10, lodash@npm:^4.17.11, lodash@npm:^4.17.12, lodash@npm:^4.17.14, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -9340,7 +9392,7 @@ __metadata:
     "@neos-commandbar/dev-server": "workspace:*"
     "@neos-commandbar/module-plugin": "workspace:*"
     "@neos-commandbar/ui-plugin": "workspace:*"
-    "@types/react": ^18.0.26
+    "@types/react": ^16.14.35
     "@typescript-eslint/eslint-plugin": ^5.47.1
     "@typescript-eslint/parser": ^5.47.1
     eslint: ^8.30.0
@@ -9568,6 +9620,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"null-loader@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "null-loader@npm:0.1.1"
+  checksum: e43ade50abf536ec142f2697d8fd85fc02e7397ab52dbe202b325171142023561665ccf05242ca88ebc20cf8ddb2dc8d27bef1ca44f721e9a40646c4267d67dd
+  languageName: node
+  linkType: hard
+
 "nullthrows@npm:^1.1.1":
   version: 1.1.1
   resolution: "nullthrows@npm:1.1.1"
@@ -11200,6 +11259,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"raw-loader@npm:^0.5":
+  version: 0.5.1
+  resolution: "raw-loader@npm:0.5.1"
+  checksum: 8051ec0b804ee72fbeee9a0f6183df8c0f764ba23a78ed5229c981cfb3a560dabc7926670fb0125b1c3831998d053ae39d578f3fb46187538226ceedad8cf1ab
+  languageName: node
+  linkType: hard
+
 "react-close-on-escape@npm:^3.0.0":
   version: 3.0.0
   resolution: "react-close-on-escape@npm:3.0.0"
@@ -11419,6 +11485,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-shadow-dom-retarget-events@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "react-shadow-dom-retarget-events@npm:1.1.0"
+  checksum: 8af3cf0c7a1517b70db2b7899942ad45cd3157cf5788788c2464d6180f2c68ca73d8c8fe00f107b85857dad0abf2f244100cb69f1032be19b3e1f63d82c4c10f
+  languageName: node
+  linkType: hard
+
 "react-svg@npm:^11.1.2":
   version: 11.2.5
   resolution: "react-svg@npm:11.2.5"
@@ -11580,7 +11653,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redux@npm:^4.0.0, redux@npm:^4.0.4":
+"redux@npm:^4.0.0":
   version: 4.2.0
   resolution: "redux@npm:4.2.0"
   dependencies:
@@ -11589,6 +11662,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redux@npm:^4.0.4":
+  version: 4.2.1
+  resolution: "redux@npm:4.2.1"
+  dependencies:
+    "@babel/runtime": ^7.9.2
+  checksum: f63b9060c3a1d930ae775252bb6e579b42415aee7a23c4114e21a0b4ba7ec12f0ec76936c00f546893f06e139819f0e2855e0d55ebfce34ca9c026241a6950dd
+  languageName: node
+  linkType: hard
+
 "regenerate@npm:^1.2.1":
   version: 1.4.2
   resolution: "regenerate@npm:1.4.2"
@@ -12075,7 +12157,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^2.5.0, schema-utils@npm:^2.6.6, schema-utils@npm:^2.7.0":
+"schema-utils@npm:^2.5.0, schema-utils@npm:^2.6.5, schema-utils@npm:^2.6.6, schema-utils@npm:^2.7.0":
   version: 2.7.1
   resolution: "schema-utils@npm:2.7.1"
   dependencies:
@@ -12086,6 +12168,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"schema-utils@npm:^3.0.0":
+  version: 3.1.1
+  resolution: "schema-utils@npm:3.1.1"
+  dependencies:
+    "@types/json-schema": ^7.0.8
+    ajv: ^6.12.5
+    ajv-keywords: ^3.5.2
+  checksum: fb73f3d759d43ba033c877628fe9751620a26879f6301d3dbeeb48cf2a65baec5cdf99da65d1bf3b4ff5444b2e59cbe4f81c2456b5e0d2ba7d7fd4aed5da29ce
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.3.0, semver@npm:^5.4.1, semver@npm:^5.5, semver@npm:^5.5.0, semver@npm:^5.5.1, semver@npm:^5.6.0, semver@npm:^5.7.0, semver@npm:^5.7.1":
   version: 5.7.1
   resolution: "semver@npm:5.7.1"
@@ -12381,6 +12474,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-loader@npm:^0.2.4":
+  version: 0.2.4
+  resolution: "source-map-loader@npm:0.2.4"
+  dependencies:
+    async: ^2.5.0
+    loader-utils: ^1.1.0
+  checksum: ec67c402ba4559641af01bdf351816ae2fcfee2e0b5948477f86bc59dbc06d791eaca64e34428469b2c8a88e6ea7ec14c540daee706925a75a0b7ba2152e984c
+  languageName: node
+  linkType: hard
+
 "source-map-resolve@npm:^0.5.0":
   version: 0.5.3
   resolution: "source-map-resolve@npm:0.5.3"
@@ -12585,6 +12688,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-replace-loader@npm:^2.1.1":
+  version: 2.3.0
+  resolution: "string-replace-loader@npm:2.3.0"
+  dependencies:
+    loader-utils: ^1.2.3
+    schema-utils: ^2.6.5
+  peerDependencies:
+    webpack: 1 || 2 || 3 || 4
+  checksum: ad52b00a331489bff2fef874124db0adb6e59c0b98e64c5529cc84f24b4eeac25e2f8cc9bc92b2032bbf927f59670ba07e3bd06a754f25e4fae0c1b9d307ede7
+  languageName: node
+  linkType: hard
+
 "string-template@npm:~0.2.1":
   version: 0.2.1
   resolution: "string-template@npm:0.2.1"
@@ -12762,6 +12877,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-loader@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "style-loader@npm:2.0.0"
+  dependencies:
+    loader-utils: ^2.0.0
+    schema-utils: ^3.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 21425246a5a8f14d1625a657a3a56f8a323193fa341a71af818a2ed2a429efa2385a328b4381cf2f12c2d0e6380801eb9e0427ed9c3a10ff95c86e383184d632
+  languageName: node
+  linkType: hard
+
 "style-search@npm:^0.1.0":
   version: 0.1.0
   resolution: "style-search@npm:0.1.0"
@@ -13270,14 +13397,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0, tslib@npm:^1.9.3":
+"tslib@npm:^1.8.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
+"tslib@npm:^2.1.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^2.3.0, tslib@npm:^2.4.0":
   version: 2.4.1
   resolution: "tslib@npm:2.4.1"
   checksum: 19480d6e0313292bd6505d4efe096a6b31c70e21cf08b5febf4da62e95c265c8f571f7b36fcc3d1a17e068032f59c269fab3459d6cd3ed6949eafecf64315fca
@@ -13445,13 +13579,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^3.2.2":
-  version: 3.9.10
-  resolution: "typescript@npm:3.9.10"
+"typescript@npm:^4.6.4":
+  version: 4.9.5
+  resolution: "typescript@npm:4.9.5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 46c842e2cd4797b88b66ef06c9c41dd21da48b95787072ccf39d5f2aa3124361bc4c966aa1c7f709fae0509614d76751455b5231b12dbb72eb97a31369e1ff92
+  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
   languageName: node
   linkType: hard
 
@@ -13465,13 +13599,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^3.2.2#~builtin<compat/typescript>":
-  version: 3.9.10
-  resolution: "typescript@patch:typescript@npm%3A3.9.10#~builtin<compat/typescript>::version=3.9.10&hash=3bd3d3"
+"typescript@patch:typescript@^4.6.4#~builtin<compat/typescript>":
+  version: 4.9.5
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=ad5954"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: dc7141ab555b23a8650a6787f98845fc11692063d02b75ff49433091b3af2fe3d773650dea18389d7c21f47d620fb3b110ea363dab4ab039417a6ccbbaf96fc2
+  checksum: 8f6260acc86b56bfdda6004bc53f32ea548f543e8baef7071c8e34d29d292f3e375c8416556c8de10b24deef6933cd1c16a8233dc84a3dd43a13a13265d0faab
   languageName: node
   linkType: hard