diff --git a/packages/scesim-editor/.babelrc.json b/packages/scesim-editor/.babelrc.json
new file mode 100644
index 00000000000..9164ce7ce48
--- /dev/null
+++ b/packages/scesim-editor/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/packages/scesim-editor/.storybook/main.ts b/packages/scesim-editor/.storybook/main.ts
new file mode 100644
index 00000000000..b8169c7262a
--- /dev/null
+++ b/packages/scesim-editor/.storybook/main.ts
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { baseConfig } from "@kie-tools/storybook-base/dist/config/baseConfig";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { env } from "../env";
+const buildEnv: any = env; // build-env is not typed
+
+const config = {
+  ...baseConfig(buildEnv.webpack.dev),
+};
+
+export default config;
diff --git a/packages/scesim-editor/dev-webapp/src/index.tsx b/packages/scesim-editor/.storybook/manager.ts
similarity index 79%
rename from packages/scesim-editor/dev-webapp/src/index.tsx
rename to packages/scesim-editor/.storybook/manager.ts
index 83646ad2986..8c06121c273 100644
--- a/packages/scesim-editor/dev-webapp/src/index.tsx
+++ b/packages/scesim-editor/.storybook/manager.ts
@@ -17,11 +17,9 @@
  * under the License.
  */
 
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { addons } from "@storybook/manager-api";
+import { KieToolsTheme } from "@kie-tools/storybook-base/dist/config/theme";
 
-import { DevWebApp } from "./DevWebApp";
-
-import "./index.css";
-
-ReactDOM.render(<DevWebApp />, document.getElementById("dev-webapp"));
+addons.setConfig({
+  theme: KieToolsTheme,
+});
diff --git a/packages/scesim-editor/.storybook/preview.tsx b/packages/scesim-editor/.storybook/preview.tsx
new file mode 100644
index 00000000000..4e7e10ae856
--- /dev/null
+++ b/packages/scesim-editor/.storybook/preview.tsx
@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    options: {
+      storySort: {
+        order: [
+          "Dev",
+          "SceSim Editor",
+          ["Overview", "*", ["Overview", "*", ["Overview", "*"]]],
+          "Features",
+          ["Overview", "*", ["Overview", "*", ["Overview", "*"]]],
+          "Use Cases",
+          ["Overview", "*", ["Overview", "*", ["Overview", "*"]]],
+        ],
+      },
+    },
+    docs: {
+      toc: {
+        headingSelector: "h2, h3",
+      },
+    },
+  },
+
+  // It should be Story() to be possible to use "preview-api" inside stories; (https://github.com/storybookjs/storybook/issues/22132)
+  decorators: [
+    (Story) => (
+      <div data-testid="test-scenario-editor" style={{ margin: "1em" }}>
+        {Story()}
+      </div>
+    ),
+  ],
+};
+
+export default preview;
diff --git a/packages/scesim-editor/dev-webapp/src/DevWebApp.tsx b/packages/scesim-editor/dev-webapp/src/DevWebApp.tsx
deleted file mode 100644
index b4708c9e8d4..00000000000
--- a/packages/scesim-editor/dev-webapp/src/DevWebApp.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-import { TestScenarioEditor, TestScenarioEditorRef } from "../../src/TestScenarioEditor";
-
-import { Button } from "@patternfly/react-core/dist/js/components/Button";
-import { Dropdown, DropdownToggle, DropdownItem } from "@patternfly/react-core/dist/js/components/Dropdown";
-import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-
-import { LOAN_PRE_QUALIFICATION, TRAFFIC_VIOLATION } from "./ExternalDmnModels";
-import { IS_OLD_ENOUGH_RULE, TRAFFIC_VIOLATION_DMN } from "./ExternalScesimModels";
-
-import "./DevWebApp.css";
-
-export function DevWebApp() {
-  const ref = useRef<TestScenarioEditorRef>(null);
-  const [isExampleDropdownOpen, setExampleDropdownIsOpen] = useState(false);
-
-  useEffect(() => {
-    /* Simulating a call from "Foundation" code */
-    setTimeout(() => {
-      ref.current?.setContent("Untitled.scesim", "");
-    }, 1000);
-  }, [ref]);
-
-  const onDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault(); // Necessary to disable the browser's default 'onDrop' handling.
-
-    if (e.dataTransfer.items) {
-      // Use DataTransferItemList interface to access the file(s)
-      [...e.dataTransfer.items].forEach((item, i) => {
-        if (item.kind === "file") {
-          const fileName = item.getAsFile()?.name;
-          const reader = new FileReader();
-          reader.addEventListener("load", ({ target }) =>
-            ref.current?.setContent(fileName ?? "", target?.result as string)
-          );
-          reader.readAsText(item.getAsFile() as any);
-        }
-      });
-    }
-  }, []);
-
-  const onDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault(); // Necessary to disable the browser's default 'onDrop' handling.
-  }, []);
-
-  const reset = useCallback(() => {
-    ref.current?.setContent("Untitled.scesim", "");
-  }, []);
-
-  const copyAsXml = useCallback(() => {
-    navigator.clipboard.writeText(ref.current?.getContent() || "");
-  }, []);
-
-  const downloadRef = useRef<HTMLAnchorElement>(null);
-  const downloadAsXml = useCallback(() => {
-    if (downloadRef.current) {
-      const fileBlob = new Blob([ref.current?.getContent() || ""], { type: "text/xml" });
-      downloadRef.current.download = `scesim-${makeid(10)}.scesim`;
-      downloadRef.current.href = URL.createObjectURL(fileBlob);
-      downloadRef.current.click();
-    }
-  }, []);
-
-  const onOpenStaticScesimExample = useCallback((fileName: string, content: string) => {
-    ref.current?.setContent(fileName, content);
-  }, []);
-
-  const dropdownExamplesItems = [
-    <DropdownItem
-      key="TrafficViolationTest.scesim"
-      component="button"
-      onClick={() => onOpenStaticScesimExample("TrafficViolationTest.scesim", TRAFFIC_VIOLATION_DMN)}
-    >
-      DMN-Based: TrafficViolationTest
-    </DropdownItem>,
-    <DropdownItem
-      key="AreTheyOldEnoughTest.scesim"
-      component="button"
-      onClick={() => onOpenStaticScesimExample("AreTheyOldEnoughTest.scesim", IS_OLD_ENOUGH_RULE)}
-    >
-      Rule-Based: AreTheyOldEnoughTest
-    </DropdownItem>,
-  ];
-
-  const onExampleDropdownToggle = useCallback((isOpen: boolean) => {
-    setExampleDropdownIsOpen(isOpen);
-  }, []);
-
-  const onExampleDropdownSelect = useCallback(() => {
-    setExampleDropdownIsOpen(false);
-    const element = document.getElementById("toggle-basic");
-    element?.focus();
-  }, []);
-
-  // const onRequestExternalModelByPath = useCallback<Promise<string[]>>(async (path) => {
-  //   return availableModelsByPath[path] ?? null;
-  // }, []);
-
-  // const onRequestExternalModelsAvailableToInclude =
-  //   useCallback<DmnEditor.OnRequestExternalModelsAvailableToInclude>(async () => {
-  //     return Object.keys(availableModelsByPath);
-  //   }, []);
-
-  return (
-    <>
-      <Page onDragOver={onDragOver} onDrop={onDrop}>
-        <PageSection aria-label={"dev-app-header"} variant={"light"} isFilled={false} padding={{ default: "padding" }}>
-          <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
-            <FlexItem shrink={{ default: "shrink" }}>
-              <h3>Test Scenario Editor :: Dev WebApp</h3>
-            </FlexItem>
-            <FlexItem>
-              <h5>(Drag & drop a file anywhere to open it)</h5>
-            </FlexItem>
-            <FlexItem shrink={{ default: "shrink" }}>
-              &nbsp; &nbsp;
-              <Dropdown
-                className="dev-webapp--example-dropdown"
-                onSelect={onExampleDropdownSelect}
-                toggle={
-                  <DropdownToggle id="toggle-basic" onToggle={onExampleDropdownToggle}>
-                    Examples
-                  </DropdownToggle>
-                }
-                isOpen={isExampleDropdownOpen}
-                dropdownItems={dropdownExamplesItems}
-              />
-              &nbsp; &nbsp;
-              <Button onClick={reset} variant="tertiary">
-                Reset
-              </Button>
-              &nbsp; &nbsp;
-              <Button onClick={copyAsXml} variant="tertiary">
-                Copy as XML
-              </Button>
-              &nbsp; &nbsp;
-              <Button onClick={downloadAsXml} variant="tertiary">
-                Download as XML
-              </Button>
-            </FlexItem>
-          </Flex>
-          <a ref={downloadRef} />
-        </PageSection>
-        <hr />
-        <PageSection
-          aria-label={"dev-app-body"}
-          className={"section-body"}
-          isFilled={true}
-          hasOverflowScroll={true}
-          variant={"light"}
-        >
-          <TestScenarioEditor ref={ref} />
-        </PageSection>
-      </Page>
-    </>
-  );
-}
-
-function makeid(length: number) {
-  let result = "";
-  const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  let counter = 0;
-  while (counter < length) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    counter += 1;
-  }
-  return result;
-}
diff --git a/packages/scesim-editor/dev-webapp/static/favicon.ico b/packages/scesim-editor/dev-webapp/static/favicon.ico
deleted file mode 100644
index 39237098444..00000000000
Binary files a/packages/scesim-editor/dev-webapp/static/favicon.ico and /dev/null differ
diff --git a/packages/scesim-editor/dev-webapp/static/index.html b/packages/scesim-editor/dev-webapp/static/index.html
deleted file mode 100644
index f0fe70c26ed..00000000000
--- a/packages/scesim-editor/dev-webapp/static/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you under the Apache License, Version 2.0 (the
-  ~ "License"); you may not use this file except in compliance
-  ~ with the License.  You may obtain a copy of the License at
-  ~ 
-  ~   http://www.apache.org/licenses/LICENSE-2.0
-  ~ 
-  ~ Unless required by applicable law or agreed to in writing,
-  ~ software distributed under the License is distributed on an
-  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  ~ KIND, either express or implied.  See the License for the
-  ~ specific language governing permissions and limitations
-  ~ under the License.      
--->
-
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8" />
-    <title>Test Scenario Editor - Dev WebApp</title>
-    <meta id="appName" name="application-name" content="Test Scenario Editor" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="./favicon.ico" />
-  </head>
-
-  <body>
-    <noscript>Enabling JavaScript is required to run this app.</noscript>
-    <div id="dev-webapp" style="height: 100vh"></div>
-    <script src="index.js"></script>
-  </body>
-</html>
diff --git a/packages/scesim-editor/dev-webapp/tsconfig.json b/packages/scesim-editor/dev-webapp/tsconfig.json
deleted file mode 100644
index bcebbbcef62..00000000000
--- a/packages/scesim-editor/dev-webapp/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "lib": ["DOM.Iterable", "es6", "dom", "es2018.promise", "es2019", "esnext"]
-  }
-}
diff --git a/packages/scesim-editor/dev-webapp/webpack.config.js b/packages/scesim-editor/dev-webapp/webpack.config.js
deleted file mode 100644
index 619256f5817..00000000000
--- a/packages/scesim-editor/dev-webapp/webpack.config.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-const path = require("path");
-const CopyPlugin = require("copy-webpack-plugin");
-const { merge } = require("webpack-merge");
-const common = require("@kie-tools-core/webpack-base/webpack.common.config");
-const patternflyBase = require("@kie-tools-core/patternfly-base");
-const { env } = require("../env");
-const buildEnv = env;
-
-module.exports = (env) =>
-  merge(common(env), {
-    mode: "development",
-    entry: {
-      index: path.resolve(__dirname, "./src/index.tsx"),
-    },
-    output: {
-      path: path.resolve(__dirname, "../dist-dev-webapp"),
-    },
-    plugins: [
-      new CopyPlugin({
-        patterns: [{ from: path.resolve(__dirname, "./static"), to: "./" }],
-      }),
-    ],
-    module: {
-      rules: [
-        {
-          test: /\.ttf$/,
-          use: ["file-loader"],
-        },
-        ...patternflyBase.webpackModuleRules,
-      ],
-    },
-    devServer: {
-      historyApiFallback: true,
-      compress: true,
-      port: buildEnv.scesimEditor.dev.port,
-      open: false,
-      hot: true,
-      client: {
-        overlay: true,
-      },
-    },
-  });
diff --git a/packages/scesim-editor/env/index.js b/packages/scesim-editor/env/index.js
index aeb68d94f63..4c6cafcef0c 100644
--- a/packages/scesim-editor/env/index.js
+++ b/packages/scesim-editor/env/index.js
@@ -19,13 +19,13 @@
 
 const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
 
-module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+module.exports = composeEnv([require("@kie-tools/root-env/env"), require("@kie-tools-core/webpack-base/env")], {
   vars: varsWithName({}),
   get env() {
     return {
       scesimEditor: {
-        dev: {
-          port: 9004,
+        storybook: {
+          port: "9902",
         },
       },
     };
diff --git a/packages/scesim-editor/package.json b/packages/scesim-editor/package.json
index 9a306a8388a..a23ac9a88d7 100644
--- a/packages/scesim-editor/package.json
+++ b/packages/scesim-editor/package.json
@@ -6,11 +6,16 @@
   "keywords": [],
   "scripts": {
     "build:dev": "rimraf dist && tsc -p tsconfig.json",
-    "build:prod": "rimraf dist && pnpm lint && tsc -p tsconfig.json && pnpm test && pnpm test:e2e",
+    "build:prod": "rimraf dist && pnpm lint && tsc -p tsconfig.json && pnpm test:e2e",
+    "build:storybook": "storybook build -o dist-storybook",
     "lint": "run-script-if --bool \"$(build-env linters.run)\" --then \"kie-tools--eslint ./src\"",
-    "start": "webpack serve -c ./dev-webapp/webpack.config.js --host 0.0.0.0 --env dev",
-    "test": "echo 'No Tests to run at this moment.'",
-    "test:e2e": "echo 'No IT Tests to run at this moment.'"
+    "powershell": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command",
+    "start": "run-script-os",
+    "start:linux:darwin": "cross-env STORYBOOK_PORT=$(build-env scesimEditor.storybook.port) pnpm storybook-base --storybookArgs=\"dev --no-open\"",
+    "start:win32": "pnpm powershell \"cross-env STORYBOOK_PORT=$(build-env scesimEditor.storybook.port) pnpm storybook-base --storybookArgs='dev --no-open'",
+    "test:e2e": "run-script-if --ignore-errors \"$(build-env endToEndTests.ignoreFailures)\" --bool \"$(build-env endToEndTests.run)\" --then \"pnpm rimraf ./dist-e2e-tests\" \"pnpm test:e2e:run\"",
+    "test:e2e:open": "pnpm exec playwright show-report dist-e2e-tests/reports",
+    "test:e2e:run": "pnpm exec playwright test"
   },
   "dependencies": {
     "@kie-tools-core/i18n": "workspace:*",
@@ -31,18 +36,32 @@
     "@babel/core": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.22.5",
     "@kie-tools-core/webpack-base": "workspace:*",
     "@kie-tools/eslint": "workspace:*",
+    "@kie-tools/playwright-base": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/storybook-base": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
+    "@playwright/test": "^1.38.1",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/preview-api": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
     "@types/lodash": "^4.14.168",
+    "@types/node": "^18.13.0",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/react-table": "^7.0.25",
     "@types/uuid": "^8.3.0",
     "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
     "file-loader": "^6.2.0",
     "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "storybook": "^7.3.2",
+    "ts-jest": "^26.5.6",
     "typescript": "^4.6.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^4.10.0",
diff --git a/packages/scesim-editor/playwright.config.ts b/packages/scesim-editor/playwright.config.ts
new file mode 100644
index 00000000000..b837bceb451
--- /dev/null
+++ b/packages/scesim-editor/playwright.config.ts
@@ -0,0 +1,50 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { defineConfig } from "@playwright/test";
+import playwrightBaseConfig from "@kie-tools/playwright-base/playwright.config";
+import merge from "lodash/merge";
+import { env } from "./env";
+
+const buildEnv: any = env;
+
+const customConfig = defineConfig({
+  use: {
+    baseURL: `http://localhost:${buildEnv.scesimEditor.storybook.port}`,
+  },
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "pnpm start",
+    url: `http://localhost:${buildEnv.scesimEditor.storybook.port}/iframe.html?args=&id=misc-empty--empty&viewMode=story`,
+    reuseExistingServer: !process.env.CI || true,
+    stdout: "pipe",
+    timeout: 180000,
+  },
+
+  expect: {
+    toHaveScreenshot: {
+      // An acceptable ratio of pixels that are different to the
+      // total amount of pixels, between 0 and 1.
+      maxDiffPixelRatio: 0.001,
+    },
+  },
+});
+
+export default defineConfig(merge(playwrightBaseConfig, customConfig));
diff --git a/packages/scesim-editor/dev-webapp/src/DevWebApp.css b/packages/scesim-editor/stories/dev/DevWebApp.css
similarity index 95%
rename from packages/scesim-editor/dev-webapp/src/DevWebApp.css
rename to packages/scesim-editor/stories/dev/DevWebApp.css
index 0488bb7cbfa..56cf69df0c8 100644
--- a/packages/scesim-editor/dev-webapp/src/DevWebApp.css
+++ b/packages/scesim-editor/stories/dev/DevWebApp.css
@@ -23,7 +23,3 @@
   --pf-c-page__main-section--PaddingBottom: 0px;
   --pf-c-page__main-section--PaddingLeft: 0px;
 }
-
-.dev-webapp--example-dropdown {
-  z-index: 99999;
-}
diff --git a/packages/scesim-editor/stories/dev/DevWebApp.stories.tsx b/packages/scesim-editor/stories/dev/DevWebApp.stories.tsx
new file mode 100644
index 00000000000..9d17767d2bf
--- /dev/null
+++ b/packages/scesim-editor/stories/dev/DevWebApp.stories.tsx
@@ -0,0 +1,194 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useCallback, useRef, useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SceSimEditorWrapper, SceSimEditorWrapperProps } from "../scesimEditorStoriesWrapper";
+import { Button, Flex, FlexItem, Page, PageSection } from "@patternfly/react-core/dist/js";
+import { TestScenarioEditorRef } from "../../src/TestScenarioEditor";
+import { SceSimMarshaller } from "../../../scesim-marshaller/src/index";
+import { SceSimModel, getMarshaller } from "@kie-tools/scesim-marshaller";
+import { emptySceSim } from "../misc/empty/Empty.stories";
+import { isOldEnoughDrl } from "../useCases/IsOldEnoughRule.stories";
+import { trafficViolationDmn } from "../useCases/TrafficViolationDmn.stories";
+import { useArgs } from "@storybook/preview-api";
+
+import "./DevWebApp.css";
+
+type DevWebAppProps = SceSimEditorWrapperProps;
+
+function DevWebApp(props: DevWebAppProps) {
+  const ref = useRef<TestScenarioEditorRef>(null);
+  const [args, updateArgs] = useArgs<DevWebAppProps>();
+
+  const [state, setState] = useState<{ marshaller: SceSimMarshaller; stack: SceSimModel[]; pointer: number }>(() => {
+    const emptySceSimMarshaller = getMarshaller(emptySceSim);
+    return {
+      marshaller: emptySceSimMarshaller,
+      stack: [emptySceSimMarshaller.parser.parse()],
+      pointer: 0,
+    };
+  });
+
+  const onSelectModel = useCallback((newModel) => {
+    const model = getMarshaller(newModel).parser.parse();
+    setState((prev) => {
+      const newStack = prev.stack.slice(0, prev.pointer + 1);
+      return {
+        ...prev,
+        stack: [...newStack, model],
+        pointer: newStack.length,
+      };
+    });
+  }, []);
+
+  const onDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault(); // Necessary to disable the browser's default 'onDrop' handling.
+
+    if (e.dataTransfer.items) {
+      // Use DataTransferItemList interface to access the file(s)
+      [...e.dataTransfer.items].forEach((item, i) => {
+        if (item.kind === "file") {
+          const fileName = item.getAsFile()?.name;
+          const reader = new FileReader();
+          reader.addEventListener("load", ({ target }) =>
+            ref.current?.setContent(fileName ?? "", target?.result as string)
+          );
+          reader.readAsText(item.getAsFile() as any);
+        }
+      });
+    }
+  }, []);
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault(); // Necessary to disable the browser's default 'onDrop' handling.
+  }, []);
+
+  const reset = useCallback(() => {
+    const marshaller = getMarshaller(emptySceSim);
+    setState({
+      marshaller,
+      stack: [marshaller.parser.parse()],
+      pointer: 0,
+    });
+  }, []);
+
+  const currentModel = state.stack[state.pointer];
+
+  const downloadRef = useRef<HTMLAnchorElement>(null);
+  const downloadAsXml = useCallback(() => {
+    if (downloadRef.current) {
+      const fileBlob = new Blob([state.marshaller.builder.build(currentModel)], { type: "text/xml" });
+      downloadRef.current.download = `scesim-${makeid(10)}.scesim`;
+      downloadRef.current.href = URL.createObjectURL(fileBlob);
+      downloadRef.current.click();
+    }
+  }, [currentModel, state.marshaller.builder]);
+
+  const copyAsXml = useCallback(() => {
+    navigator.clipboard.writeText(state.marshaller.builder.build(currentModel));
+  }, [currentModel, state.marshaller.builder]);
+
+  useEffect(() => {
+    updateArgs({ content: state.marshaller.builder.build(state.stack[state.stack.length - 1]) });
+  }, [state.marshaller.builder, state.stack, updateArgs]);
+
+  useEffect(() => {
+    onSelectModel(args.content);
+  }, [args.content, onSelectModel]);
+
+  return (
+    <>
+      <div>
+        <Page onDragOver={onDragOver} onDrop={onDrop}>
+          <PageSection
+            aria-label={"dev-app-header"}
+            variant={"light"}
+            isFilled={false}
+            padding={{ default: "padding" }}
+          >
+            <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
+              <FlexItem shrink={{ default: "shrink" }}>
+                <h3>Test Scenario Editor :: Dev WebApp</h3>
+              </FlexItem>
+              <FlexItem>
+                <h5>(Drag & drop a file anywhere to open it)</h5>
+              </FlexItem>
+              <FlexItem shrink={{ default: "shrink" }}>
+                <Button onClick={() => onSelectModel(emptySceSim)}>Empty</Button>
+                &nbsp; &nbsp;
+                <Button onClick={() => onSelectModel(isOldEnoughDrl)}>Are They Old Enough?</Button>
+                &nbsp; &nbsp;
+                <Button onClick={() => onSelectModel(trafficViolationDmn)}>Traffic Violation</Button>
+                &nbsp; &nbsp; | &nbsp; &nbsp;
+                <button onClick={reset}>Reset</button>
+                &nbsp; &nbsp;
+                <button onClick={copyAsXml}>Copy as XML</button>
+                &nbsp; &nbsp;
+                <button onClick={downloadAsXml}>Download as XML</button>
+              </FlexItem>
+            </Flex>
+            <a ref={downloadRef} />
+          </PageSection>
+          <hr />
+          <PageSection
+            aria-label={"dev-app-body"}
+            className={"section-body"}
+            isFilled={true}
+            hasOverflowScroll={true}
+            variant={"light"}
+          >
+            {SceSimEditorWrapper({
+              pathRelativeToTheWorkspaceRoot: "dev.scesim",
+              content: state.marshaller.builder.build(state.stack[state.stack.length - 1]),
+            })}
+          </PageSection>
+        </Page>
+      </div>
+    </>
+  );
+}
+
+function makeid(length: number) {
+  let result = "";
+  const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return result;
+}
+
+const meta: Meta<DevWebAppProps> = {
+  title: "Dev/Web App",
+  component: DevWebApp,
+};
+
+export default meta;
+type Story = StoryObj<DevWebAppProps>;
+
+export const WebApp: Story = {
+  render: (args) => DevWebApp(args),
+  args: {
+    pathRelativeToTheWorkspaceRoot: "dev.scesim",
+    content: emptySceSim,
+  },
+};
diff --git a/packages/scesim-editor/dev-webapp/src/AvailableDMNModels.ts b/packages/scesim-editor/stories/examples/AvailableDMNModels.ts
similarity index 100%
rename from packages/scesim-editor/dev-webapp/src/AvailableDMNModels.ts
rename to packages/scesim-editor/stories/examples/AvailableDMNModels.ts
diff --git a/packages/scesim-editor/dev-webapp/src/ExternalDmnModels.ts b/packages/scesim-editor/stories/examples/ExternalDmnModels.ts
similarity index 100%
rename from packages/scesim-editor/dev-webapp/src/ExternalDmnModels.ts
rename to packages/scesim-editor/stories/examples/ExternalDmnModels.ts
diff --git a/packages/scesim-editor/stories/features/Resizing/Resizing.mdx b/packages/scesim-editor/stories/features/Resizing/Resizing.mdx
new file mode 100644
index 00000000000..70eed4ee0e2
--- /dev/null
+++ b/packages/scesim-editor/stories/features/Resizing/Resizing.mdx
@@ -0,0 +1,37 @@
+{/* Licensed to the Apache Software Foundation (ASF) under one */}
+{/* or more contributor license agreements. See the NOTICE file */}
+{/* distributed with this work for additional information */}
+{/* regarding copyright ownership. The ASF licenses this file */}
+{/* to you under the Apache License, Version 2.0 (the */}
+{/* "License"); you may not use this file except in compliance */}
+{/* with the License. You may obtain a copy of the License at */}
+{/*  */}
+{/* http://www.apache.org/licenses/LICENSE-2.0 */}
+{/*  */}
+{/* Unless required by applicable law or agreed to in writing, */}
+{/* software distributed under the License is distributed on an */}
+{/* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY */}
+{/* KIND, either express or implied. See the License for the */}
+{/* specific language governing permissions and limitations */}
+{/* under the License. */}
+
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Features/Resizing/Overview" />
+
+# Resizing
+
+The SceSim Editor gives the possibility to resize every cell in a column.
+The resize operation recursively affects all sub columns that are part of the same column
+keeping the resize operation consistent.
+
+To perform the resize operation hover the mouse on a cell of the desired column.
+A resize handle on the right side of the cell will appear. Left-clicking on it and dragging
+will resize the cell. The minimum depends on the expression or column. It does not have a maximum width.
+
+# Reset
+
+To reset the size of a column hover the mouse on a cell of the column.
+The resize handle on the right side of the cell will appear. Double left-clicking on it will
+reset the column size to the default value. It's important to notice that the default size
+can vary depending on sub columns.
diff --git a/packages/scesim-editor/stories/misc/empty/Empty.mdx b/packages/scesim-editor/stories/misc/empty/Empty.mdx
new file mode 100644
index 00000000000..39c4e063ddd
--- /dev/null
+++ b/packages/scesim-editor/stories/misc/empty/Empty.mdx
@@ -0,0 +1,46 @@
+{/* Licensed to the Apache Software Foundation (ASF) under one */}
+{/* or more contributor license agreements. See the NOTICE file */}
+{/* distributed with this work for additional information */}
+{/* regarding copyright ownership. The ASF licenses this file */}
+{/* to you under the Apache License, Version 2.0 (the */}
+{/* "License"); you may not use this file except in compliance */}
+{/* with the License. You may obtain a copy of the License at */}
+{/*  */}
+{/* http://www.apache.org/licenses/LICENSE-2.0 */}
+{/*  */}
+{/* Unless required by applicable law or agreed to in writing, */}
+{/* software distributed under the License is distributed on an */}
+{/* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY */}
+{/* KIND, either express or implied. See the License for the */}
+{/* specific language governing permissions and limitations */}
+{/* under the License. */}
+
+import { Meta, Story } from "@storybook/blocks";
+import * as Empty from "./Empty.stories";
+
+<Meta title="MDX/Empty" of={Empty} />
+
+# Empty
+
+To start off, use contextual menus in the table to insert or edit or delete new columns and rows.
+
+Before defining the individual test scenarios, verify the instance and field mappings for each column. If any changes are necessary, use the DMN Nodes selector to update the mapping.
+
+If the same GIVEN data is shared with the multiple test scenarios, you can use the Background tab to define them only once. The way to create a column in the Background tab is the same as of the Test Scenario tab.
+
+Now, define the test scenarios. Each cell of the table must contain a valid expression.
+
+Values in the GIVEN part of the table are evaluated as literal expressions, whereas values in the EXPECT section are evaluated as unary expressions. The correctness of these unary tests is verified using the results from a DMN evaluation.
+
+DMN-based scenarios use the FEEL expression language. Supported data types are:
+
+- numbers and strings (strings must be delimited by quotation marks), for example "John Doe" or ""
+- boolean values (true, false, and null)
+- dates and time, for example date("2019-05-13") or time("14:10:00+02:00")
+- Days and time duration, for example duration("P1DT23H12M30S")
+- Years and months duration, for example duration("P3Y5M")
+- functions
+- contexts, for example \{x : 5, even : false, type : "integer number"\}
+- ranges and lists, for example [1 .. 10] or [2, 3, 4, 5]
+- In EXPECT section the type could also just a boolean with the result of the assertion and you can use ? identifier to access value to check.
+- An empty cell is skipped from the evaluation.
diff --git a/packages/scesim-editor/stories/misc/empty/Empty.stories.tsx b/packages/scesim-editor/stories/misc/empty/Empty.stories.tsx
new file mode 100644
index 00000000000..af7a17fc235
--- /dev/null
+++ b/packages/scesim-editor/stories/misc/empty/Empty.stories.tsx
@@ -0,0 +1,191 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { SceSimEditorWrapper, SceSimEditorWrapperProps } from "../../scesimEditorStoriesWrapper";
+import { TestScenarioEditor } from "../../../src/TestScenarioEditor";
+
+export const emptySceSim = `<?xml version="1.0" encoding="UTF-8"?>
+<ScenarioSimulationModel version="1.8">
+  <simulation>
+    <scesimModelDescriptor>
+      <factMappings>
+        <FactMapping>
+          <expressionElements/>
+          <expressionIdentifier>
+            <name>Index</name>
+            <type>OTHER</type>
+          </expressionIdentifier>
+          <factIdentifier>
+            <name>#</name>
+            <className>java.lang.Integer</className>
+          </factIdentifier>
+          <className>java.lang.Integer</className>
+          <factAlias>#</factAlias>
+          <columnWidth>70</columnWidth>
+          <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        </FactMapping>
+        <FactMapping>
+          <expressionElements/>
+          <expressionIdentifier>
+            <name>Description</name>
+            <type>OTHER</type>
+          </expressionIdentifier>
+          <factIdentifier>
+            <name>Scenario description</name>
+            <className>java.lang.String</className>
+          </factIdentifier>
+          <className>java.lang.String</className>
+          <factAlias>Scenario description</factAlias>
+          <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+          <columnWidth>300</columnWidth>
+        </FactMapping>
+        <FactMapping>
+          <expressionElements/>
+          <expressionIdentifier>
+            <name>1|1</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <factIdentifier>
+            <name>Empty</name>
+            <className>java.lang.Void</className>
+          </factIdentifier>
+          <className>java.lang.Void</className>
+          <factAlias>INSTANCE-1</factAlias>
+          <expressionAlias>PROPERTY</expressionAlias>
+          <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+          <columnWidth>150</columnWidth>
+        </FactMapping>
+        <FactMapping>
+          <expressionElements/>
+          <expressionIdentifier>
+            <name>1|2</name>
+            <type>EXPECT</type>
+          </expressionIdentifier>
+          <factIdentifier>
+            <name>Empty</name>
+            <className>java.lang.Void</className>
+          </factIdentifier>
+          <className>java.lang.Void</className>
+          <factAlias>INSTANCE-2</factAlias>
+          <expressionAlias>PROPERTY</expressionAlias>
+          <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+          <columnWidth>150</columnWidth>
+        </FactMapping>
+      </factMappings>
+    </scesimModelDescriptor>
+    <scesimData>
+      <Scenario>
+        <factMappingValues>
+          <FactMappingValue>
+            <factIdentifier>
+              <name>Scenario description</name>
+              <className>java.lang.String</className>
+            </factIdentifier>
+            <expressionIdentifier>
+              <name>Description</name>
+              <type>OTHER</type>
+            </expressionIdentifier>
+          </FactMappingValue>
+          <FactMappingValue>
+            <factIdentifier>
+              <name>Empty</name>
+              <className>java.lang.Void</className>
+            </factIdentifier>
+            <expressionIdentifier>
+              <name>1|1</name>
+              <type>GIVEN</type>
+            </expressionIdentifier>
+          </FactMappingValue>
+          <FactMappingValue>
+            <factIdentifier>
+              <name>Empty</name>
+              <className>java.lang.Void</className>
+            </factIdentifier>
+            <expressionIdentifier>
+              <name>1|2</name>
+              <type>EXPECT</type>
+            </expressionIdentifier>
+          </FactMappingValue>
+        </factMappingValues>
+      </Scenario>
+    </scesimData>
+  </simulation>
+  <background>
+    <scesimModelDescriptor>
+      <factMappings>
+        <FactMapping>
+          <expressionElements/>
+          <expressionIdentifier>
+            <name>1|1</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <factIdentifier>
+            <name>Empty</name>
+            <className>java.lang.Void</className>
+          </factIdentifier>
+          <className>java.lang.Void</className>
+          <factAlias>INSTANCE-1</factAlias>
+          <expressionAlias>PROPERTY</expressionAlias>
+          <columnWidth>150</columnWidth>
+          <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        </FactMapping>
+      </factMappings>
+    </scesimModelDescriptor>
+    <scesimData>
+      <BackgroundData>
+        <factMappingValues>
+          <FactMappingValue>
+            <factIdentifier>
+              <name>Empty</name>
+              <className>java.lang.Void</className>
+            </factIdentifier>
+            <expressionIdentifier>
+              <name>1|1</name>
+              <type>GIVEN</type>
+            </expressionIdentifier>
+          </FactMappingValue>
+        </factMappingValues>
+      </BackgroundData>
+    </scesimData>
+  </background>
+  <settings>
+    <skipFromBuild>false</skipFromBuild>
+  </settings>
+  <imports>
+    <imports/>
+  </imports>
+</ScenarioSimulationModel>`;
+
+const meta: Meta<{}> = {
+  title: "Misc/Empty",
+  component: TestScenarioEditor,
+  includeStories: /^[A-Z]/,
+};
+
+export default meta;
+type Story = StoryObj<SceSimEditorWrapperProps>;
+
+export const Empty: Story = {
+  render: (args) => SceSimEditorWrapper(args),
+  args: {
+    pathRelativeToTheWorkspaceRoot: "empty.scesim",
+    content: emptySceSim,
+  },
+};
diff --git a/packages/scesim-editor/stories/scesimEditor/SceSimEditor.mdx b/packages/scesim-editor/stories/scesimEditor/SceSimEditor.mdx
new file mode 100644
index 00000000000..33f1a2e32a8
--- /dev/null
+++ b/packages/scesim-editor/stories/scesimEditor/SceSimEditor.mdx
@@ -0,0 +1,30 @@
+{/* Licensed to the Apache Software Foundation (ASF) under one */}
+{/* or more contributor license agreements. See the NOTICE file */}
+{/* distributed with this work for additional information */}
+{/* regarding copyright ownership. The ASF licenses this file */}
+{/* to you under the Apache License, Version 2.0 (the */}
+{/* "License"); you may not use this file except in compliance */}
+{/* with the License. You may obtain a copy of the License at */}
+{/*  */}
+{/* http://www.apache.org/licenses/LICENSE-2.0 */}
+{/*  */}
+{/* Unless required by applicable law or agreed to in writing, */}
+{/* software distributed under the License is distributed on an */}
+{/* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY */}
+{/* KIND, either express or implied. See the License for the */}
+{/* specific language governing permissions and limitations */}
+{/* under the License. */}
+
+import { Meta } from "@storybook/blocks";
+
+<Meta title="SceSim Editor/Overview" />
+
+# SceSim Editor
+
+    Before deploying them into a production environment, test scenarios enable you to validate the functionality of
+    - Business rules and business rule data (for rules-based test scenarios)
+    - DMN models (for DMN-based test scenarios)
+
+    With a test scenario, you use data from your project to set given conditions and expected results based on one or more defined business rules. When you run the scenario, the expected results and actual results of the rule instance are compared.
+
+    If the expected results match the actual results, the test is successful. If the expected results do not match the actual results, then the test fails.
diff --git a/packages/scesim-editor/stories/scesimEditorStoriesWrapper.tsx b/packages/scesim-editor/stories/scesimEditorStoriesWrapper.tsx
new file mode 100644
index 00000000000..656adba6208
--- /dev/null
+++ b/packages/scesim-editor/stories/scesimEditorStoriesWrapper.tsx
@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import { useEffect, useRef } from "react";
+import { TestScenarioEditor, TestScenarioEditorRef } from "../src/TestScenarioEditor";
+
+export interface SceSimEditorWrapperProps {
+  pathRelativeToTheWorkspaceRoot: string;
+  content: string;
+}
+
+export function SceSimEditorWrapper(props: SceSimEditorWrapperProps) {
+  const ref = useRef<TestScenarioEditorRef>(null);
+
+  useEffect(() => {
+    /* Simulating a call from "Foundation" code */
+    ref.current?.setContent(props.pathRelativeToTheWorkspaceRoot, props.content);
+  }, [ref, props.content, props.pathRelativeToTheWorkspaceRoot]);
+
+  return (
+    <div>
+      <TestScenarioEditor ref={ref} />
+    </div>
+  );
+}
diff --git a/packages/scesim-editor/stories/useCases/IsOldEnoughRule.stories.tsx b/packages/scesim-editor/stories/useCases/IsOldEnoughRule.stories.tsx
new file mode 100644
index 00000000000..86592e1a75d
--- /dev/null
+++ b/packages/scesim-editor/stories/useCases/IsOldEnoughRule.stories.tsx
@@ -0,0 +1,405 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TestScenarioEditor } from "../../src/TestScenarioEditor";
+import { SceSimEditorWrapper, SceSimEditorWrapperProps } from "../scesimEditorStoriesWrapper";
+
+export const isOldEnoughDrl = `<ScenarioSimulationModel version="1.8" xmlns="https://kie.org/scesim/1.8">
+<simulation>
+  <scesimModelDescriptor>
+    <factMappings>
+      <FactMapping>
+        <expressionElements/>
+        <expressionIdentifier>
+          <name>Index</name>
+          <type>OTHER</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>#</name>
+          <className>java.lang.Integer</className>
+        </factIdentifier>
+        <className>java.lang.Integer</className>
+        <factAlias>#</factAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>70.0</columnWidth>
+      </FactMapping>
+      <FactMapping>
+        <expressionElements/>
+        <expressionIdentifier>
+          <name>Description</name>
+          <type>OTHER</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>Scenario description</name>
+          <className>java.lang.String</className>
+        </factIdentifier>
+        <className>java.lang.String</className>
+        <factAlias>Scenario description</factAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>300.0</columnWidth>
+      </FactMapping>
+      <FactMapping>
+        <expressionElements>
+          <ExpressionElement>
+            <step>Applicant</step>
+          </ExpressionElement>
+          <ExpressionElement>
+            <step>age</step>
+          </ExpressionElement>
+        </expressionElements>
+        <expressionIdentifier>
+          <name>1|1</name>
+          <type>GIVEN</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>1|1</name>
+          <className>mortgages.mortgages.Applicant</className>
+        </factIdentifier>
+        <className>java.lang.Integer</className>
+        <factAlias>Applicant</factAlias>
+        <expressionAlias>age</expressionAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>212.60000000000002</columnWidth>
+      </FactMapping>
+      <FactMapping>
+        <expressionElements>
+          <ExpressionElement>
+            <step>LoanApplication</step>
+          </ExpressionElement>
+          <ExpressionElement>
+            <step>approved</step>
+          </ExpressionElement>
+        </expressionElements>
+        <expressionIdentifier>
+          <name>1591876615315</name>
+          <type>GIVEN</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>1591622209590</name>
+          <className>mortgages.mortgages.LoanApplication</className>
+        </factIdentifier>
+        <className>java.lang.Boolean</className>
+        <factAlias>LoanApplication</factAlias>
+        <expressionAlias>approved</expressionAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>212.60000000000002</columnWidth>
+      </FactMapping>
+      <FactMapping>
+        <expressionElements>
+          <ExpressionElement>
+            <step>IncomeSource</step>
+          </ExpressionElement>
+          <ExpressionElement>
+            <step>amount</step>
+          </ExpressionElement>
+        </expressionElements>
+        <expressionIdentifier>
+          <name>1591622221147</name>
+          <type>GIVEN</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>1591622221147</name>
+          <className>mortgages.mortgages.IncomeSource</className>
+        </factIdentifier>
+        <className>java.lang.Integer</className>
+        <factAlias>IncomeSource</factAlias>
+        <expressionAlias>amount</expressionAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>212.60000000000002</columnWidth>
+      </FactMapping>
+      <FactMapping>
+        <expressionElements>
+          <ExpressionElement>
+            <step>LoanApplication</step>
+          </ExpressionElement>
+          <ExpressionElement>
+            <step>approved</step>
+          </ExpressionElement>
+        </expressionElements>
+        <expressionIdentifier>
+          <name>1|2</name>
+          <type>EXPECT</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>1591622209590</name>
+          <className>mortgages.mortgages.LoanApplication</className>
+        </factIdentifier>
+        <className>java.lang.Boolean</className>
+        <factAlias>LoanApplication</factAlias>
+        <expressionAlias>approved</expressionAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>212.60000000000002</columnWidth>
+      </FactMapping>
+      <FactMapping>
+        <expressionElements>
+          <ExpressionElement>
+            <step>LoanApplication</step>
+          </ExpressionElement>
+          <ExpressionElement>
+            <step>explanation</step>
+          </ExpressionElement>
+        </expressionElements>
+        <expressionIdentifier>
+          <name>1591874776961</name>
+          <type>EXPECT</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>1591622209590</name>
+          <className>mortgages.mortgages.LoanApplication</className>
+        </factIdentifier>
+        <className>java.lang.String</className>
+        <factAlias>LoanApplication</factAlias>
+        <expressionAlias>explanation</expressionAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>212.60000000000002</columnWidth>
+      </FactMapping>
+    </factMappings>
+  </scesimModelDescriptor>
+  <scesimData>
+    <Scenario>
+      <factMappingValues>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>Scenario description</name>
+            <className>java.lang.String</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>Description</name>
+            <type>OTHER</type>
+          </expressionIdentifier>
+          <rawValue class="string">Young Bob want a loan</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>#</name>
+            <className>java.lang.Integer</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>Index</name>
+            <type>OTHER</type>
+          </expressionIdentifier>
+          <rawValue class="string">1</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1|1</name>
+            <className>mortgages.mortgages.Applicant</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1|1</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <rawValue class="string">17</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622221147</name>
+            <className>mortgages.mortgages.IncomeSource</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1591622221147</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <rawValue class="string">0</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622209590</name>
+            <className>mortgages.mortgages.LoanApplication</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1|2</name>
+            <type>EXPECT</type>
+          </expressionIdentifier>
+          <rawValue class="string">false</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622209590</name>
+            <className>mortgages.mortgages.LoanApplication</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1591874776961</name>
+            <type>EXPECT</type>
+          </expressionIdentifier>
+          <rawValue class="string">Underage</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622209590</name>
+            <className>mortgages.mortgages.LoanApplication</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1591876615315</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <rawValue class="string">true</rawValue>
+        </FactMappingValue>
+      </factMappingValues>
+    </Scenario>
+    <Scenario>
+      <factMappingValues>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>Scenario description</name>
+            <className>java.lang.String</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>Description</name>
+            <type>OTHER</type>
+          </expressionIdentifier>
+          <rawValue class="string">Adult Anna  want a loan</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>#</name>
+            <className>java.lang.Integer</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>Index</name>
+            <type>OTHER</type>
+          </expressionIdentifier>
+          <rawValue class="string">2</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1|1</name>
+            <className>mortgages.mortgages.Applicant</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1|1</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <rawValue class="string">27</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622221147</name>
+            <className>mortgages.mortgages.IncomeSource</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1591622221147</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <rawValue class="string">0</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622209590</name>
+            <className>mortgages.mortgages.LoanApplication</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1|2</name>
+            <type>EXPECT</type>
+          </expressionIdentifier>
+          <rawValue class="string">true</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622209590</name>
+            <className>mortgages.mortgages.LoanApplication</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1591874776961</name>
+            <type>EXPECT</type>
+          </expressionIdentifier>
+          <rawValue class="string">null</rawValue>
+        </FactMappingValue>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>1591622209590</name>
+            <className>mortgages.mortgages.LoanApplication</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1591876615315</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+          <rawValue class="string">true</rawValue>
+        </FactMappingValue>
+      </factMappingValues>
+    </Scenario>
+  </scesimData>
+</simulation>
+<background>
+  <scesimModelDescriptor>
+    <factMappings>
+      <FactMapping>
+        <expressionElements/>
+        <expressionIdentifier>
+          <name>1|1</name>
+          <type>GIVEN</type>
+        </expressionIdentifier>
+        <factIdentifier>
+          <name>Empty</name>
+          <className>java.lang.Void</className>
+        </factIdentifier>
+        <className>java.lang.Void</className>
+        <factAlias>INSTANCE 1</factAlias>
+        <expressionAlias>PROPERTY 1</expressionAlias>
+        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
+        <columnWidth>114.0</columnWidth>
+      </FactMapping>
+    </factMappings>
+  </scesimModelDescriptor>
+  <scesimData>
+    <BackgroundData>
+      <factMappingValues>
+        <FactMappingValue>
+          <factIdentifier>
+            <name>Empty</name>
+            <className>java.lang.Void</className>
+          </factIdentifier>
+          <expressionIdentifier>
+            <name>1|1</name>
+            <type>GIVEN</type>
+          </expressionIdentifier>
+        </FactMappingValue>
+      </factMappingValues>
+    </BackgroundData>
+  </scesimData>
+</background>
+<settings>
+  <type>RULE</type>
+  <skipFromBuild>false</skipFromBuild>
+  <stateless>false</stateless>
+</settings>
+<imports>
+  <imports/>
+</imports>
+</ScenarioSimulationModel>
+`;
+
+const meta: Meta<{}> = {
+  title: "Use Cases/Is Old Enough",
+  component: TestScenarioEditor,
+  includeStories: /^[A-Z]/,
+};
+
+export default meta;
+type Story = StoryObj<SceSimEditorWrapperProps>;
+
+export const IsOldEnough: Story = {
+  render: (args) => SceSimEditorWrapper(args),
+  args: {
+    pathRelativeToTheWorkspaceRoot: "isOldEnough.scesim",
+    content: isOldEnoughDrl,
+  },
+};
diff --git a/packages/scesim-editor/dev-webapp/src/ExternalScesimModels.ts b/packages/scesim-editor/stories/useCases/TrafficViolationDmn.stories.tsx
similarity index 68%
rename from packages/scesim-editor/dev-webapp/src/ExternalScesimModels.ts
rename to packages/scesim-editor/stories/useCases/TrafficViolationDmn.stories.tsx
index 97e76557085..031704f4650 100644
--- a/packages/scesim-editor/dev-webapp/src/ExternalScesimModels.ts
+++ b/packages/scesim-editor/stories/useCases/TrafficViolationDmn.stories.tsx
@@ -17,372 +17,12 @@
  * under the License.
  */
 
-export const IS_OLD_ENOUGH_RULE = `<ScenarioSimulationModel version="1.8" xmlns="https://kie.org/scesim/1.8">
-<simulation>
-  <scesimModelDescriptor>
-    <factMappings>
-      <FactMapping>
-        <expressionElements/>
-        <expressionIdentifier>
-          <name>Index</name>
-          <type>OTHER</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>#</name>
-          <className>java.lang.Integer</className>
-        </factIdentifier>
-        <className>java.lang.Integer</className>
-        <factAlias>#</factAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>70.0</columnWidth>
-      </FactMapping>
-      <FactMapping>
-        <expressionElements/>
-        <expressionIdentifier>
-          <name>Description</name>
-          <type>OTHER</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>Scenario description</name>
-          <className>java.lang.String</className>
-        </factIdentifier>
-        <className>java.lang.String</className>
-        <factAlias>Scenario description</factAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>300.0</columnWidth>
-      </FactMapping>
-      <FactMapping>
-        <expressionElements>
-          <ExpressionElement>
-            <step>Applicant</step>
-          </ExpressionElement>
-          <ExpressionElement>
-            <step>age</step>
-          </ExpressionElement>
-        </expressionElements>
-        <expressionIdentifier>
-          <name>1|1</name>
-          <type>GIVEN</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>1|1</name>
-          <className>mortgages.mortgages.Applicant</className>
-        </factIdentifier>
-        <className>java.lang.Integer</className>
-        <factAlias>Applicant</factAlias>
-        <expressionAlias>age</expressionAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>212.60000000000002</columnWidth>
-      </FactMapping>
-      <FactMapping>
-        <expressionElements>
-          <ExpressionElement>
-            <step>LoanApplication</step>
-          </ExpressionElement>
-          <ExpressionElement>
-            <step>approved</step>
-          </ExpressionElement>
-        </expressionElements>
-        <expressionIdentifier>
-          <name>1591876615315</name>
-          <type>GIVEN</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>1591622209590</name>
-          <className>mortgages.mortgages.LoanApplication</className>
-        </factIdentifier>
-        <className>java.lang.Boolean</className>
-        <factAlias>LoanApplication</factAlias>
-        <expressionAlias>approved</expressionAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>212.60000000000002</columnWidth>
-      </FactMapping>
-      <FactMapping>
-        <expressionElements>
-          <ExpressionElement>
-            <step>IncomeSource</step>
-          </ExpressionElement>
-          <ExpressionElement>
-            <step>amount</step>
-          </ExpressionElement>
-        </expressionElements>
-        <expressionIdentifier>
-          <name>1591622221147</name>
-          <type>GIVEN</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>1591622221147</name>
-          <className>mortgages.mortgages.IncomeSource</className>
-        </factIdentifier>
-        <className>java.lang.Integer</className>
-        <factAlias>IncomeSource</factAlias>
-        <expressionAlias>amount</expressionAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>212.60000000000002</columnWidth>
-      </FactMapping>
-      <FactMapping>
-        <expressionElements>
-          <ExpressionElement>
-            <step>LoanApplication</step>
-          </ExpressionElement>
-          <ExpressionElement>
-            <step>approved</step>
-          </ExpressionElement>
-        </expressionElements>
-        <expressionIdentifier>
-          <name>1|2</name>
-          <type>EXPECT</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>1591622209590</name>
-          <className>mortgages.mortgages.LoanApplication</className>
-        </factIdentifier>
-        <className>java.lang.Boolean</className>
-        <factAlias>LoanApplication</factAlias>
-        <expressionAlias>approved</expressionAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>212.60000000000002</columnWidth>
-      </FactMapping>
-      <FactMapping>
-        <expressionElements>
-          <ExpressionElement>
-            <step>LoanApplication</step>
-          </ExpressionElement>
-          <ExpressionElement>
-            <step>explanation</step>
-          </ExpressionElement>
-        </expressionElements>
-        <expressionIdentifier>
-          <name>1591874776961</name>
-          <type>EXPECT</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>1591622209590</name>
-          <className>mortgages.mortgages.LoanApplication</className>
-        </factIdentifier>
-        <className>java.lang.String</className>
-        <factAlias>LoanApplication</factAlias>
-        <expressionAlias>explanation</expressionAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>212.60000000000002</columnWidth>
-      </FactMapping>
-    </factMappings>
-  </scesimModelDescriptor>
-  <scesimData>
-    <Scenario>
-      <factMappingValues>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>Scenario description</name>
-            <className>java.lang.String</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>Description</name>
-            <type>OTHER</type>
-          </expressionIdentifier>
-          <rawValue class="string">Young Bob want a loan</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>#</name>
-            <className>java.lang.Integer</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>Index</name>
-            <type>OTHER</type>
-          </expressionIdentifier>
-          <rawValue class="string">1</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1|1</name>
-            <className>mortgages.mortgages.Applicant</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1|1</name>
-            <type>GIVEN</type>
-          </expressionIdentifier>
-          <rawValue class="string">17</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622221147</name>
-            <className>mortgages.mortgages.IncomeSource</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1591622221147</name>
-            <type>GIVEN</type>
-          </expressionIdentifier>
-          <rawValue class="string">0</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622209590</name>
-            <className>mortgages.mortgages.LoanApplication</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1|2</name>
-            <type>EXPECT</type>
-          </expressionIdentifier>
-          <rawValue class="string">false</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622209590</name>
-            <className>mortgages.mortgages.LoanApplication</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1591874776961</name>
-            <type>EXPECT</type>
-          </expressionIdentifier>
-          <rawValue class="string">Underage</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622209590</name>
-            <className>mortgages.mortgages.LoanApplication</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1591876615315</name>
-            <type>GIVEN</type>
-          </expressionIdentifier>
-          <rawValue class="string">true</rawValue>
-        </FactMappingValue>
-      </factMappingValues>
-    </Scenario>
-    <Scenario>
-      <factMappingValues>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>Scenario description</name>
-            <className>java.lang.String</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>Description</name>
-            <type>OTHER</type>
-          </expressionIdentifier>
-          <rawValue class="string">Adult Anna  want a loan</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>#</name>
-            <className>java.lang.Integer</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>Index</name>
-            <type>OTHER</type>
-          </expressionIdentifier>
-          <rawValue class="string">2</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1|1</name>
-            <className>mortgages.mortgages.Applicant</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1|1</name>
-            <type>GIVEN</type>
-          </expressionIdentifier>
-          <rawValue class="string">27</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622221147</name>
-            <className>mortgages.mortgages.IncomeSource</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1591622221147</name>
-            <type>GIVEN</type>
-          </expressionIdentifier>
-          <rawValue class="string">0</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622209590</name>
-            <className>mortgages.mortgages.LoanApplication</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1|2</name>
-            <type>EXPECT</type>
-          </expressionIdentifier>
-          <rawValue class="string">true</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622209590</name>
-            <className>mortgages.mortgages.LoanApplication</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1591874776961</name>
-            <type>EXPECT</type>
-          </expressionIdentifier>
-          <rawValue class="string">null</rawValue>
-        </FactMappingValue>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>1591622209590</name>
-            <className>mortgages.mortgages.LoanApplication</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1591876615315</name>
-            <type>GIVEN</type>
-          </expressionIdentifier>
-          <rawValue class="string">true</rawValue>
-        </FactMappingValue>
-      </factMappingValues>
-    </Scenario>
-  </scesimData>
-</simulation>
-<background>
-  <scesimModelDescriptor>
-    <factMappings>
-      <FactMapping>
-        <expressionElements/>
-        <expressionIdentifier>
-          <name>1|1</name>
-          <type>GIVEN</type>
-        </expressionIdentifier>
-        <factIdentifier>
-          <name>Empty</name>
-          <className>java.lang.Void</className>
-        </factIdentifier>
-        <className>java.lang.Void</className>
-        <factAlias>INSTANCE 1</factAlias>
-        <expressionAlias>PROPERTY 1</expressionAlias>
-        <factMappingValueType>NOT_EXPRESSION</factMappingValueType>
-        <columnWidth>114.0</columnWidth>
-      </FactMapping>
-    </factMappings>
-  </scesimModelDescriptor>
-  <scesimData>
-    <BackgroundData>
-      <factMappingValues>
-        <FactMappingValue>
-          <factIdentifier>
-            <name>Empty</name>
-            <className>java.lang.Void</className>
-          </factIdentifier>
-          <expressionIdentifier>
-            <name>1|1</name>
-            <type>GIVEN</type>
-          </expressionIdentifier>
-        </FactMappingValue>
-      </factMappingValues>
-    </BackgroundData>
-  </scesimData>
-</background>
-<settings>
-  <type>RULE</type>
-  <skipFromBuild>false</skipFromBuild>
-  <stateless>false</stateless>
-</settings>
-<imports>
-  <imports/>
-</imports>
-</ScenarioSimulationModel>
-`;
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TestScenarioEditor } from "../../src/TestScenarioEditor";
+import { SceSimEditorWrapper, SceSimEditorWrapperProps } from "../scesimEditorStoriesWrapper";
 
-export const TRAFFIC_VIOLATION_DMN = `<?xml version="1.0" encoding="UTF-8"?>
+export const trafficViolationDmn = `<?xml version="1.0" encoding="UTF-8"?>
 <ScenarioSimulationModel version="1.8" xmlns="https://kie.org/scesim/1.8">
   <simulation>
     <scesimModelDescriptor>
@@ -1148,3 +788,20 @@ export const TRAFFIC_VIOLATION_DMN = `<?xml version="1.0" encoding="UTF-8"?>
     <imports/>
   </imports>
 </ScenarioSimulationModel>`;
+
+const meta: Meta<{}> = {
+  title: "Use Cases/Traffic Violation",
+  component: TestScenarioEditor,
+  includeStories: /^[A-Z]/,
+};
+
+export default meta;
+type Story = StoryObj<SceSimEditorWrapperProps>;
+
+export const TrafficViolation: Story = {
+  render: (args) => SceSimEditorWrapper(args),
+  args: {
+    pathRelativeToTheWorkspaceRoot: "trafficViolation.scesim",
+    content: trafficViolationDmn,
+  },
+};
diff --git a/packages/scesim-editor/stories/useCases/useCases.mdx b/packages/scesim-editor/stories/useCases/useCases.mdx
new file mode 100644
index 00000000000..fcc3863a8a8
--- /dev/null
+++ b/packages/scesim-editor/stories/useCases/useCases.mdx
@@ -0,0 +1,22 @@
+{/* Licensed to the Apache Software Foundation (ASF) under one */}
+{/* or more contributor license agreements. See the NOTICE file */}
+{/* distributed with this work for additional information */}
+{/* regarding copyright ownership. The ASF licenses this file */}
+{/* to you under the Apache License, Version 2.0 (the */}
+{/* "License"); you may not use this file except in compliance */}
+{/* with the License. You may obtain a copy of the License at */}
+{/*  */}
+{/* http://www.apache.org/licenses/LICENSE-2.0 */}
+{/*  */}
+{/* Unless required by applicable law or agreed to in writing, */}
+{/* software distributed under the License is distributed on an */}
+{/* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY */}
+{/* KIND, either express or implied. See the License for the */}
+{/* specific language governing permissions and limitations */}
+{/* under the License. */}
+
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Use Cases/Overview" />
+
+# Placeholder
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/backgroundTable.ts b/packages/scesim-editor/tests/e2e/__fixtures__/backgroundTable.ts
new file mode 100644
index 00000000000..b35f81838ec
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/backgroundTable.ts
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ProjectName } from "@kie-tools/playwright-base/projectNames";
+import { Page } from "@playwright/test";
+
+export class BackgroundTable {
+  constructor(public page: Page, public projectName: ProjectName) {}
+
+  public get() {
+    return this.page.getByLabel("Background");
+  }
+
+  public async fill(args: { content: string; column: number }) {
+    await this.page.getByLabel("Background").getByTestId("monaco-container").nth(args.column).dblclick();
+    if (this.projectName === ProjectName.GOOGLE_CHROME) {
+      // Google Chrome's fill function is not always erasing the input content
+      await this.page.getByLabel("Editor content;Press Alt+F1 for Accessibility Options.").press("Control+A");
+    }
+    // FEEL text input selector when the monaco editor is selected.
+    await this.page.getByLabel("Editor content;Press Alt+F1 for Accessibility Options.").fill(args.content);
+    await this.page.keyboard.press("Home");
+    await this.page.keyboard.press("Enter");
+  }
+}
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/base.ts b/packages/scesim-editor/tests/e2e/__fixtures__/base.ts
new file mode 100644
index 00000000000..6db66072646
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/base.ts
@@ -0,0 +1,76 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test as base } from "@playwright/test";
+import { Clipboard } from "./clipboard";
+import { Resizing } from "./resizing";
+import { UseCases } from "./useCases";
+import { ProjectName } from "@kie-tools/playwright-base/projectNames";
+import { Editor } from "./editor";
+import { TestScenarioTable } from "./testScenarioTable";
+import { BackgroundTable } from "./backgroundTable";
+import { Table } from "./table";
+import { ContextMenu } from "./contextMenu";
+import { SelectorPanel } from "./selectorPanel";
+
+type SceSimEditorFixtures = {
+  testScenarioTable: TestScenarioTable;
+  backgroundTable: BackgroundTable;
+  editor: Editor;
+  clipboard: Clipboard;
+  resizing: Resizing;
+  table: Table;
+  useCases: UseCases;
+  contextMenu: ContextMenu;
+  selectorPanel: SelectorPanel;
+};
+
+export const test = base.extend<SceSimEditorFixtures>({
+  testScenarioTable: async ({ page }, use, testInfo) => {
+    await use(new TestScenarioTable(page, testInfo.project.name as ProjectName));
+  },
+  backgroundTable: async ({ page }, use, testInfo) => {
+    await use(new BackgroundTable(page, testInfo.project.name as ProjectName));
+  },
+  editor: async ({ page, selectorPanel, baseURL }, use) => {
+    await use(new Editor(page, selectorPanel, baseURL));
+  },
+  clipboard: async ({ browserName, context, page }, use) => {
+    const clipboard = new Clipboard(page);
+    clipboard.setup(context, browserName);
+    await use(clipboard);
+  },
+  resizing: async ({ page }, use) => {
+    await use(new Resizing(page));
+  },
+  table: async ({ page }, use) => {
+    await use(new Table(page));
+  },
+  contextMenu: async ({ page }, use) => {
+    await use(new ContextMenu(page));
+  },
+  selectorPanel: async ({ page }, use) => {
+    await use(new SelectorPanel(page));
+  },
+  useCases: async ({ page, selectorPanel, baseURL }, use) => {
+    await use(new UseCases(page, selectorPanel, baseURL));
+  },
+});
+
+export { expect } from "@playwright/test";
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/clipboard.ts b/packages/scesim-editor/tests/e2e/__fixtures__/clipboard.ts
new file mode 100644
index 00000000000..b639ac2f8ca
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/clipboard.ts
@@ -0,0 +1,47 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BrowserContext, Page } from "@playwright/test";
+
+export class Clipboard {
+  constructor(public page: Page) {}
+
+  public async copy() {
+    const modifier = process.platform === "darwin" ? "Meta" : "Control";
+    await this.page.keyboard.press(`${modifier}+KeyC`);
+  }
+
+  public async cut() {
+    const modifier = process.platform === "darwin" ? "Meta" : "Control";
+    await this.page.keyboard.press(`${modifier}+KeyX`);
+  }
+
+  public async paste() {
+    const modifier = process.platform === "darwin" ? "Meta" : "Control";
+    await this.page.keyboard.press(`${modifier}+KeyV`);
+  }
+
+  public async setup(context: BrowserContext, browserName: string) {
+    if (browserName === "chromium") {
+      await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+    }
+  }
+
+  public use() {}
+}
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/contextMenu.ts b/packages/scesim-editor/tests/e2e/__fixtures__/contextMenu.ts
new file mode 100644
index 00000000000..fd704301e8b
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/contextMenu.ts
@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Page } from "@playwright/test";
+
+export enum HeadingType {
+  SELECTION = "SELECTION",
+  SCENARIO = "SCENARIO",
+  FIELD = "FIELD",
+  INSTANCE = "INSTANCE",
+}
+
+export enum MenuItem {
+  DELETE_SCENARIO = "Delete",
+  DELETE_INSTANCE = "Delete Instance",
+  DELETE_FIELD = "Delete Field",
+  COPY = "copy",
+  CUT = "cut",
+  PASTE = "paste",
+  RESET = "reset",
+}
+
+export class ContextMenu {
+  constructor(public page: Page) {}
+
+  public async openOnCell(args: { rowNumber: string; columnNumber: number }) {
+    await this.page
+      .getByRole("row", { name: args.rowNumber })
+      .getByTestId("monaco-container")
+      .nth(args.columnNumber)
+      .click({ button: "right" });
+  }
+
+  public async openOnInstance(args: { name: string }) {
+    await this.page.getByRole("columnheader", { name: args.name }).click({ button: "right" });
+  }
+
+  public async openOnProperty(args: { name: string; columnNumber: number }) {
+    await this.page.getByRole("columnheader", { name: args.name }).nth(args.columnNumber).click({ button: "right" });
+  }
+
+  public async clickMenuItem(args: { menuItem: MenuItem }) {
+    await this.page.getByRole("menuitem", { name: `${args.menuItem}` }).click();
+  }
+
+  public getHeading(args: { heading: HeadingType }) {
+    return this.page.getByRole("heading", { name: `${args.heading}`, exact: true });
+  }
+}
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/editor.ts b/packages/scesim-editor/tests/e2e/__fixtures__/editor.ts
new file mode 100644
index 00000000000..debf3c1daec
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/editor.ts
@@ -0,0 +1,62 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Page } from "@playwright/test";
+import { SelectorPanel } from "./selectorPanel";
+
+export enum AssetType {
+  DECISION,
+  RULE,
+}
+
+export class Editor {
+  constructor(public page: Page, public selectorPanel: SelectorPanel, public baseURL?: string) {
+    this.page = page;
+    this.baseURL = baseURL;
+  }
+
+  public getIframeURL(iframeId: string) {
+    return `iframe.html?id=${iframeId}&viewMode=story`;
+  }
+
+  public async openEmpty() {
+    await this.page.goto(`${this.baseURL}/${this.getIframeURL(`misc-empty--empty`)}` ?? "");
+  }
+
+  public async createTestScenario(type: AssetType) {
+    await this.openEmpty();
+    type === AssetType.DECISION
+      ? await this.page.locator("#asset-type-select").selectOption("DMN")
+      : await this.page.locator("#asset-type-select").selectOption("RULE");
+    await this.page.getByRole("button", { name: "Create" }).click();
+    await this.selectorPanel.close();
+  }
+
+  public async switchToTestScenarioTable() {
+    await this.page.getByRole("tab", { name: "Test Scenario" }).click();
+  }
+
+  public async switchToBackgroundTable() {
+    await this.page.getByRole("tab", { name: "Background" }).click();
+  }
+
+  public get() {
+    return this.page.getByTestId("test-scenario-editor");
+  }
+}
diff --git a/packages/scesim-editor/dev-webapp/src/index.css b/packages/scesim-editor/tests/e2e/__fixtures__/resizing.ts
similarity index 74%
rename from packages/scesim-editor/dev-webapp/src/index.css
rename to packages/scesim-editor/tests/e2e/__fixtures__/resizing.ts
index 2827b01dcea..3f5d45647b3 100644
--- a/packages/scesim-editor/dev-webapp/src/index.css
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/resizing.ts
@@ -6,30 +6,24 @@
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
- * 
+ *
  *  http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
- * under the License. 
+ * under the License.
  */
 
-* {
-  box-sizing: border-box;
-}
-
-html {
-  height: 100vh;
-  margin: 0;
-}
+import { Page, Locator } from "@playwright/test";
 
-body {
-  margin: 0;
-}
+export class Resizing {
+  constructor(public page: Page) {}
 
-#dev-webapp {
-  height: 100%;
+  public async reset(target: Locator) {
+    await target.hover();
+    await target.getByTestId("resizer-handle").dblclick();
+  }
 }
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/selectorPanel.ts b/packages/scesim-editor/tests/e2e/__fixtures__/selectorPanel.ts
new file mode 100644
index 00000000000..ca29af1c90a
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/selectorPanel.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Page } from "@playwright/test";
+
+export class SelectorPanel {
+  constructor(public page: Page) {}
+
+  public async open() {
+    await this.page.getByRole("button").first().click();
+  }
+
+  public async close() {
+    await this.page.getByLabel("Close drawer panel").click();
+  }
+}
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/table.ts b/packages/scesim-editor/tests/e2e/__fixtures__/table.ts
new file mode 100644
index 00000000000..99ba5e2bcb5
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/table.ts
@@ -0,0 +1,151 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Page } from "@playwright/test";
+
+export enum AddRowPosition {
+  ABOVE,
+  BELOW,
+}
+
+export enum AddColumnPosition {
+  LEFT,
+  RIGHT,
+}
+
+export enum Type {
+  ARROW,
+  KEYBOARD_SHORTCUT,
+}
+
+export class Table {
+  constructor(public page: Page) {}
+
+  public async addRow(args: { targetCellName: string; position: AddRowPosition }) {
+    await this.page.getByRole("cell", { name: args.targetCellName, exact: true }).click({ button: "right" });
+    args.position === AddRowPosition.BELOW
+      ? await this.page.getByRole("menuitem", { name: "Insert Below" }).click()
+      : await this.page.getByRole("menuitem", { name: "Insert Above" }).click();
+  }
+
+  public async addPropertyColumn(args: { targetCellName: string; position: AddColumnPosition; nth: number }) {
+    await this.page.getByRole("columnheader", { name: args.targetCellName }).nth(args.nth).click({ button: "right" });
+    args.position === AddColumnPosition.LEFT
+      ? await this.page.getByRole("menuitem", { name: "Insert Field Left" }).click()
+      : await this.page.getByRole("menuitem", { name: "Insert Field Right" }).click();
+  }
+
+  public async addInstanceColumn(args: { targetCellName: string; position: AddColumnPosition }) {
+    await this.page.getByRole("columnheader", { name: args.targetCellName }).click({ button: "right" });
+    args.position === AddColumnPosition.LEFT
+      ? await this.page.getByRole("menuitem", { name: "Insert Instance Left" }).click()
+      : await this.page.getByRole("menuitem", { name: "Insert Instance Right" }).click();
+  }
+  public async selectCell(args: { rowNumber: string; columnNumber: number }) {
+    await this.page
+      .getByRole("row", { name: args.rowNumber })
+      .getByTestId("monaco-container")
+      .nth(args.columnNumber)
+      .click();
+  }
+  public getColumnHeader(args: { name: string }) {
+    return this.page.getByRole("columnheader", { name: args.name });
+  }
+
+  public getCell(args: { rowNumber: string; columnNumber: number }) {
+    return this.page.getByRole("row", { name: args.rowNumber }).nth(args.columnNumber);
+  }
+  public async deleteCellContent(args: { rowNumber: string; columnNumber: number }) {
+    await this.page
+      .getByRole("row", { name: args.rowNumber })
+      .getByTestId("monaco-container")
+      .nth(args.columnNumber)
+      .click();
+    await this.page.keyboard.press("Delete");
+  }
+  public async deselectCell(args: { rowNumber: string; columnNumber: number }) {
+    await this.page
+      .getByRole("row", { name: args.rowNumber, exact: true })
+      .getByTestId("monaco-container")
+      .nth(args.columnNumber)
+      .press("Escape");
+  }
+  public async navigateLeft(args: { rowNumber: string; columnNumber: number; type: Type }) {
+    args.type === Type.ARROW
+      ? await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("ArrowLeft")
+      : await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("Shift+Tab");
+  }
+  public async navigateRight(args: { rowNumber: string; columnNumber: number; type: Type }) {
+    args.type === Type.ARROW
+      ? await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("ArrowRight")
+      : await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("Tab");
+  }
+  public async navigateUp(args: { rowNumber: string; columnNumber: number; type: Type }) {
+    args.type === Type.ARROW
+      ? await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("ArrowUp")
+      : (await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("Shift+Enter"),
+        await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("Shift+Enter"));
+  }
+  public async navigateDown(args: { rowNumber: string; columnNumber: number; type: Type }) {
+    args.type === Type.ARROW
+      ? await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("ArrowDown")
+      : (await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("Enter+Enter"),
+        await this.page
+          .getByRole("row", { name: args.rowNumber, exact: true })
+          .getByTestId("monaco-container")
+          .nth(args.columnNumber)
+          .press("Enter+Enter"));
+  }
+}
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/testScenarioTable.ts b/packages/scesim-editor/tests/e2e/__fixtures__/testScenarioTable.ts
new file mode 100644
index 00000000000..0a3acfcc0ae
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/testScenarioTable.ts
@@ -0,0 +1,45 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ProjectName } from "@kie-tools/playwright-base/projectNames";
+import { Page } from "@playwright/test";
+
+export class TestScenarioTable {
+  constructor(public page: Page, public projectName: ProjectName) {}
+
+  public get() {
+    return this.page.getByLabel("Test Scenario");
+  }
+
+  public async fill(args: { content: string; rowLocatorInfo: string; column: number }) {
+    await this.page
+      .getByRole("row", { name: args.rowLocatorInfo, exact: true })
+      .getByTestId("monaco-container")
+      .nth(args.column)
+      .dblclick();
+    if (this.projectName === ProjectName.GOOGLE_CHROME) {
+      // Google Chrome's fill function is not always erasing the input content
+      await this.page.getByLabel("Editor content;Press Alt+F1 for Accessibility Options.").press("Control+A");
+    }
+    // FEEL text input selector when the monaco editor is selected.
+    await this.page.getByLabel("Editor content;Press Alt+F1 for Accessibility Options.").fill(args.content);
+    await this.page.keyboard.press("Home");
+    await this.page.keyboard.press("Enter");
+  }
+}
diff --git a/packages/scesim-editor/tests/e2e/__fixtures__/useCases.ts b/packages/scesim-editor/tests/e2e/__fixtures__/useCases.ts
new file mode 100644
index 00000000000..7471d21afaf
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/__fixtures__/useCases.ts
@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Page } from "@playwright/test";
+import { SelectorPanel } from "./selectorPanel";
+
+export class UseCases {
+  constructor(public page: Page, public selectorPanel: SelectorPanel, public baseURL?: string) {
+    this.page = page;
+    this.baseURL = baseURL;
+  }
+
+  public getIframeURL(iframeId: string) {
+    return `iframe.html?id=${iframeId}&viewMode=story`;
+  }
+
+  public async openTrafficViolationTest() {
+    await this.page.goto(
+      `${this.baseURL}/${this.getIframeURL(`use-cases-traffic-violation--traffic-violation`)}` ?? ""
+    );
+    await this.selectorPanel.close();
+  }
+
+  public async openAreTheyOldEnoughTest() {
+    await this.page.goto(`${this.baseURL}/${this.getIframeURL(`use-cases-is-old-enough--is-old-enough`)}` ?? "");
+    await this.selectorPanel.close();
+  }
+}
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-escaped-screenshot.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-escaped-screenshot.png
new file mode 100644
index 00000000000..a41bade5723
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-escaped-screenshot.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-down.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-down.png
new file mode 100644
index 00000000000..5c6a05b676b
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-down.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-left.png
new file mode 100644
index 00000000000..589f8d3d7ad
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-right.png
new file mode 100644
index 00000000000..978cd14d6ef
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-up.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-up.png
new file mode 100644
index 00000000000..3a39e411e16
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/features/keyboard/navigation-screenshot-up.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/create-a-new-test-scenario.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/create-a-new-test-scenario.png
new file mode 100644
index 00000000000..ef417466819
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/create-a-new-test-scenario.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/empty-background-table.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/empty-background-table.png
new file mode 100644
index 00000000000..5f7dc6cdce1
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/empty-background-table.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/empty-test-scenario-table.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/empty-test-scenario-table.png
new file mode 100644
index 00000000000..5de6e4b1d41
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/misc/emptyExpression/empty-test-scenario-table.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-instance-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-instance-column-left.png
new file mode 100644
index 00000000000..c83c362826a
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-instance-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-instance-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-instance-column-right.png
new file mode 100644
index 00000000000..7ec27d1eca9
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-instance-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-property-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-property-column-left.png
new file mode 100644
index 00000000000..22897e5af6b
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-property-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-property-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-property-column-right.png
new file mode 100644
index 00000000000..eda83129fa0
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-add-property-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-decision.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-decision.png
new file mode 100644
index 00000000000..80bfe015090
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-decision.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-rule.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-rule.png
new file mode 100644
index 00000000000..80bfe015090
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/backgroundTable/background-table-rule.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png
new file mode 100644
index 00000000000..85de21ac98a
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png
new file mode 100644
index 00000000000..8729509d142
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png
new file mode 100644
index 00000000000..1d20330e488
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png
new file mode 100644
index 00000000000..8b0ba32892c
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-decision.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-decision.png
new file mode 100644
index 00000000000..023a860f1cb
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-decision.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-rule.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-rule.png
new file mode 100644
index 00000000000..023a860f1cb
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/scesimEditor/testScenarioTable/test-scenario-table-rule.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/useCases/are-they-old-enough-test.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/useCases/are-they-old-enough-test.png
new file mode 100644
index 00000000000..5183063e9c7
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/useCases/are-they-old-enough-test.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/useCases/traffic-violation-test.png b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/useCases/traffic-violation-test.png
new file mode 100644
index 00000000000..3ebcd79c414
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/Google-Chrome/useCases/traffic-violation-test.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-escaped-screenshot.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-escaped-screenshot.png
new file mode 100644
index 00000000000..a8f3e344b4b
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-escaped-screenshot.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-down.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-down.png
new file mode 100644
index 00000000000..e3b640a0203
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-down.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-left.png
new file mode 100644
index 00000000000..1159df10af7
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-right.png
new file mode 100644
index 00000000000..691ca5d0c0c
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-up.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-up.png
new file mode 100644
index 00000000000..f176b001a94
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/features/keyboard/navigation-screenshot-up.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/create-a-new-test-scenario.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/create-a-new-test-scenario.png
new file mode 100644
index 00000000000..e85c3f76dec
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/create-a-new-test-scenario.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/empty-background-table.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/empty-background-table.png
new file mode 100644
index 00000000000..c1d39f6c827
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/empty-background-table.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/empty-test-scenario-table.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/empty-test-scenario-table.png
new file mode 100644
index 00000000000..fbcfa6e887e
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/misc/emptyExpression/empty-test-scenario-table.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-instance-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-instance-column-left.png
new file mode 100644
index 00000000000..01d655995a5
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-instance-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-instance-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-instance-column-right.png
new file mode 100644
index 00000000000..e2b8db6ecdf
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-instance-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-property-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-property-column-left.png
new file mode 100644
index 00000000000..d9de6efe744
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-property-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-property-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-property-column-right.png
new file mode 100644
index 00000000000..45bf76b9d15
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-add-property-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-decision.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-decision.png
new file mode 100644
index 00000000000..b90a56d70fa
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-decision.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-rule.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-rule.png
new file mode 100644
index 00000000000..256e6bb11c8
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/backgroundTable/background-table-rule.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png
new file mode 100644
index 00000000000..15b2ec435d0
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png
new file mode 100644
index 00000000000..6b1f945cc0d
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png
new file mode 100644
index 00000000000..0af3a17d45d
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png
new file mode 100644
index 00000000000..ffd486b5305
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-decision.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-decision.png
new file mode 100644
index 00000000000..196fb87c25b
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-decision.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-rule.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-rule.png
new file mode 100644
index 00000000000..0749d6ef2cf
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/scesimEditor/testScenarioTable/test-scenario-table-rule.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/useCases/are-they-old-enough-test.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/useCases/are-they-old-enough-test.png
new file mode 100644
index 00000000000..c1f6a2c559b
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/useCases/are-they-old-enough-test.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/chromium/useCases/traffic-violation-test.png b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/useCases/traffic-violation-test.png
new file mode 100644
index 00000000000..b3e9aa6e9ba
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/chromium/useCases/traffic-violation-test.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-escaped-screenshot.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-escaped-screenshot.png
new file mode 100644
index 00000000000..e387cfbb24a
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-escaped-screenshot.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-down.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-down.png
new file mode 100644
index 00000000000..32284c1802c
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-down.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-left.png
new file mode 100644
index 00000000000..922e37c139c
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-right.png
new file mode 100644
index 00000000000..bee9dedbf2b
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-up.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-up.png
new file mode 100644
index 00000000000..216df91f3da
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/features/keyboard/navigation-screenshot-up.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/create-a-new-test-scenario.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/create-a-new-test-scenario.png
new file mode 100644
index 00000000000..30c67fbe4bf
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/create-a-new-test-scenario.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/empty-background-table.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/empty-background-table.png
new file mode 100644
index 00000000000..7b37375dd1d
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/empty-background-table.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/empty-test-scenario-table.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/empty-test-scenario-table.png
new file mode 100644
index 00000000000..a730e53ade3
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/misc/emptyExpression/empty-test-scenario-table.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-instance-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-instance-column-left.png
new file mode 100644
index 00000000000..a3a6f131ca8
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-instance-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-instance-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-instance-column-right.png
new file mode 100644
index 00000000000..1ae0fd99b44
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-instance-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-property-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-property-column-left.png
new file mode 100644
index 00000000000..f2d141889c6
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-property-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-property-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-property-column-right.png
new file mode 100644
index 00000000000..334246efb77
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-add-property-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-decision.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-decision.png
new file mode 100644
index 00000000000..c50e12daf79
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-decision.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-rule.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-rule.png
new file mode 100644
index 00000000000..c50e12daf79
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/backgroundTable/background-table-rule.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png
new file mode 100644
index 00000000000..cf3c7db2527
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png
new file mode 100644
index 00000000000..94678c6c76f
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-instance-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png
new file mode 100644
index 00000000000..d0da6d09b34
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-left.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png
new file mode 100644
index 00000000000..adfc068f831
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-add-property-column-right.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-decision.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-decision.png
new file mode 100644
index 00000000000..2753ab10260
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-decision.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-rule.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-rule.png
new file mode 100644
index 00000000000..2753ab10260
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/scesimEditor/testScenarioTable/test-scenario-table-rule.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/useCases/are-they-old-enough-test.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/useCases/are-they-old-enough-test.png
new file mode 100644
index 00000000000..425ac3f8c40
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/useCases/are-they-old-enough-test.png differ
diff --git a/packages/scesim-editor/tests/e2e/__screenshots__/webkit/useCases/traffic-violation-test.png b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/useCases/traffic-violation-test.png
new file mode 100644
index 00000000000..8cf98371a50
Binary files /dev/null and b/packages/scesim-editor/tests/e2e/__screenshots__/webkit/useCases/traffic-violation-test.png differ
diff --git a/packages/scesim-editor/tests/e2e/features/keyboard/keyboard.spec.ts b/packages/scesim-editor/tests/e2e/features/keyboard/keyboard.spec.ts
new file mode 100644
index 00000000000..98e522db959
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/features/keyboard/keyboard.spec.ts
@@ -0,0 +1,78 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { expect, test } from "../../__fixtures__/base";
+import { AssetType } from "../../__fixtures__/editor";
+import { AddRowPosition, Type } from "../../__fixtures__/table";
+
+test.describe("Keyboard", () => {
+  test.describe("Keyboard shortcuts navigation", () => {
+    test("should correctly navigate the table using keyboard shortcuts", async ({
+      editor,
+      table,
+      testScenarioTable,
+    }) => {
+      await editor.createTestScenario(AssetType.RULE);
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+      await table.selectCell({ rowNumber: "1", columnNumber: 0 });
+
+      await table.navigateRight({ rowNumber: "1", columnNumber: 0, type: Type.KEYBOARD_SHORTCUT });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-right.png");
+
+      await table.navigateDown({ rowNumber: "1", columnNumber: 1, type: Type.KEYBOARD_SHORTCUT });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-down.png");
+
+      await table.navigateLeft({ rowNumber: "2", columnNumber: 1, type: Type.KEYBOARD_SHORTCUT });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-left.png");
+
+      await table.navigateUp({ rowNumber: "2", columnNumber: 0, type: Type.KEYBOARD_SHORTCUT });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-up.png");
+
+      await table.deselectCell({ rowNumber: "2", columnNumber: 0 });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-escaped-screenshot.png");
+    });
+  });
+
+  test.describe("Arrow key navigation", () => {
+    test("should correctly navigate the table using arrow keys", async ({ editor, table, testScenarioTable }) => {
+      await editor.createTestScenario(AssetType.DECISION);
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+      await table.selectCell({ rowNumber: "1", columnNumber: 0 });
+
+      await table.navigateRight({ rowNumber: "1", columnNumber: 0, type: Type.ARROW });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-right.png");
+
+      await table.navigateDown({ rowNumber: "1", columnNumber: 1, type: Type.ARROW });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-down.png");
+
+      await table.navigateLeft({ rowNumber: "2", columnNumber: 1, type: Type.ARROW });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-left.png");
+
+      await table.navigateUp({ rowNumber: "2", columnNumber: 0, type: Type.ARROW });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-screenshot-up.png");
+
+      await table.deselectCell({ rowNumber: "2", columnNumber: 0 });
+      await expect(testScenarioTable.get()).toHaveScreenshot("navigation-escaped-screenshot.png");
+    });
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/features/selection/contextMenu.spec.ts b/packages/scesim-editor/tests/e2e/features/selection/contextMenu.spec.ts
new file mode 100644
index 00000000000..435f3e1b957
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/features/selection/contextMenu.spec.ts
@@ -0,0 +1,99 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../../__fixtures__/base";
+import { MenuItem } from "../../__fixtures__/contextMenu";
+import { AssetType } from "../../__fixtures__/editor";
+
+test.describe("Selection", () => {
+  test.describe("Context menu", () => {
+    test.beforeEach(async ({ editor, testScenarioTable }) => {
+      await editor.createTestScenario(AssetType.RULE);
+      await testScenarioTable.fill({ content: '"test"', rowLocatorInfo: "1", column: 1 });
+    });
+
+    test.describe(() => {
+      test.beforeEach(async ({ clipboard, context, browserName }) => {
+        test.skip(
+          browserName !== "chromium",
+          "Playwright Webkit doesn't support clipboard permissions: https://github.com/microsoft/playwright/issues/13037"
+        );
+        clipboard.setup(context, browserName);
+      });
+
+      test("should use copy from selection context menu", async ({ clipboard, contextMenu, table }) => {
+        await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+        await contextMenu.clickMenuItem({ menuItem: MenuItem.COPY });
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+
+        await table.deleteCellContent({ rowNumber: "1", columnNumber: 1 });
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).not.toContainText("test");
+
+        await clipboard.paste();
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+      });
+
+      test("should use cut from selection context menu", async ({ clipboard, contextMenu, table }) => {
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+        await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+        await contextMenu.clickMenuItem({ menuItem: MenuItem.CUT });
+
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).not.toContainText("test");
+        await table.selectCell({ rowNumber: "1", columnNumber: 1 });
+
+        await clipboard.paste();
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+      });
+
+      test("should use copy and paste from selection context menu", async ({ contextMenu, table }) => {
+        await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+        await contextMenu.clickMenuItem({ menuItem: MenuItem.COPY });
+
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+
+        await table.deleteCellContent({ rowNumber: "1", columnNumber: 1 });
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).not.toContainText("test");
+
+        await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+        await contextMenu.clickMenuItem({ menuItem: MenuItem.PASTE });
+
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+      });
+
+      test("should use cut and paste from selection context menu", async ({ contextMenu, table }) => {
+        await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+        await contextMenu.clickMenuItem({ menuItem: MenuItem.CUT });
+
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).not.toContainText("test");
+
+        await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+        await contextMenu.clickMenuItem({ menuItem: MenuItem.PASTE });
+
+        await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+      });
+    });
+
+    test("should use reset from selection context menu", async ({ contextMenu, table }) => {
+      await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+      await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.RESET });
+      await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).not.toContainText("test");
+    });
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/misc/emptyExpression/emptyExpression.spec.ts b/packages/scesim-editor/tests/e2e/misc/emptyExpression/emptyExpression.spec.ts
new file mode 100644
index 00000000000..41605e2709b
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/misc/emptyExpression/emptyExpression.spec.ts
@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../../__fixtures__/base";
+import { AssetType } from "../../__fixtures__/editor";
+
+test.describe("Empty editor", () => {
+  test("should render editor correctly", async ({ editor, testScenarioTable, backgroundTable }) => {
+    await editor.openEmpty();
+    await expect(editor.get()).toHaveScreenshot("create-a-new-test-scenario.png");
+
+    await editor.createTestScenario(AssetType.DECISION);
+    await expect(testScenarioTable.get()).toHaveScreenshot("empty-test-scenario-table.png");
+
+    await editor.switchToBackgroundTable();
+    await expect(backgroundTable.get()).toHaveScreenshot("empty-background-table.png");
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/scesimEditor/backgroundTable/contextMenu.spec.ts b/packages/scesim-editor/tests/e2e/scesimEditor/backgroundTable/contextMenu.spec.ts
new file mode 100644
index 00000000000..abbc00b45c3
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/scesimEditor/backgroundTable/contextMenu.spec.ts
@@ -0,0 +1,116 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../../__fixtures__/base";
+import { HeadingType, MenuItem } from "../../__fixtures__/contextMenu";
+import { AssetType } from "../../__fixtures__/editor";
+import { AddColumnPosition } from "../../__fixtures__/table";
+
+test.describe("Background table context menu", () => {
+  test.describe("Context menu checks", () => {
+    test.beforeEach(async ({ editor, backgroundTable, table }) => {
+      await editor.createTestScenario(AssetType.DECISION);
+      await editor.switchToBackgroundTable();
+      await table.addPropertyColumn({
+        targetCellName: "PROPERTY (<Undefined>)",
+        position: AddColumnPosition.RIGHT,
+        nth: 0,
+      });
+      await backgroundTable.fill({ content: "test", column: 1 });
+    });
+
+    test("should render select context menu", async ({ contextMenu }) => {
+      await contextMenu.openOnCell({ rowNumber: "test test", columnNumber: 0 });
+      await expect(contextMenu.getHeading({ heading: HeadingType.SELECTION })).toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.SCENARIO })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.FIELD })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.INSTANCE })).not.toBeAttached();
+    });
+
+    test("should render field context menu", async ({ contextMenu }) => {
+      await contextMenu.openOnProperty({ name: "PROPERTY (<Undefined>)", columnNumber: 1 });
+      await expect(contextMenu.getHeading({ heading: HeadingType.SELECTION })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.SCENARIO })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.FIELD })).toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.INSTANCE })).not.toBeAttached();
+    });
+
+    test("should render instance context menu", async ({ contextMenu }) => {
+      await contextMenu.openOnInstance({ name: "INSTANCE-1 (<Undefined>)" });
+      await expect(contextMenu.getHeading({ heading: HeadingType.SELECTION })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.SCENARIO })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.FIELD })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.INSTANCE })).toBeAttached();
+    });
+
+    test("should add and delete instance column left", async ({ table, backgroundTable, contextMenu }) => {
+      await table.addInstanceColumn({
+        targetCellName: "INSTANCE-1 (<Undefined>)",
+        position: AddColumnPosition.LEFT,
+      });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).toBeAttached();
+      await expect(backgroundTable.get()).toHaveScreenshot("background-table-add-instance-column-left.png");
+
+      await contextMenu.openOnInstance({ name: "INSTANCE-3 (<Undefined>)" });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_INSTANCE });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).not.toBeAttached();
+    });
+
+    test("should add and delete instance column right", async ({ table, backgroundTable, contextMenu }) => {
+      await table.addInstanceColumn({
+        targetCellName: "INSTANCE-1 (<Undefined>)",
+        position: AddColumnPosition.RIGHT,
+      });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).toBeAttached();
+      await expect(backgroundTable.get()).toHaveScreenshot("background-table-add-instance-column-right.png");
+
+      await contextMenu.openOnInstance({ name: "INSTANCE-3 (<Undefined>)" });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_INSTANCE });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).not.toBeAttached();
+    });
+
+    test("should add and delete property column left", async ({ table, backgroundTable, contextMenu }) => {
+      await table.addPropertyColumn({
+        targetCellName: "PROPERTY (<Undefined>)",
+        position: AddColumnPosition.LEFT,
+        nth: 0,
+      });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).toBeAttached();
+      await expect(backgroundTable.get()).toHaveScreenshot("background-table-add-property-column-left.png");
+
+      await contextMenu.openOnProperty({ name: "PROPERTY (<Undefined>)", columnNumber: 1 });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_FIELD });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).not.toBeAttached();
+    });
+
+    test("should add and delete property column right", async ({ table, backgroundTable, contextMenu }) => {
+      await table.addPropertyColumn({
+        targetCellName: "PROPERTY (<Undefined>)",
+        position: AddColumnPosition.RIGHT,
+        nth: 0,
+      });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).toBeAttached();
+      await expect(backgroundTable.get()).toHaveScreenshot("background-table-add-property-column-right.png");
+
+      await contextMenu.openOnProperty({ name: "PROPERTY (<Undefined>)", columnNumber: 1 });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_FIELD });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).not.toBeAttached();
+    });
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/scesimEditor/backgroundTable/populate.spec.ts b/packages/scesim-editor/tests/e2e/scesimEditor/backgroundTable/populate.spec.ts
new file mode 100644
index 00000000000..6d9f56201f8
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/scesimEditor/backgroundTable/populate.spec.ts
@@ -0,0 +1,118 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../../__fixtures__/base";
+import { AssetType } from "../../__fixtures__/editor";
+import { AddColumnPosition } from "../../__fixtures__/table";
+
+test.describe("Populate decision background table", () => {
+  test("should correctly populate a decision-based background table", async ({
+    editor,
+    resizing,
+    table,
+    backgroundTable,
+  }) => {
+    await editor.createTestScenario(AssetType.DECISION);
+    await editor.switchToBackgroundTable();
+    await backgroundTable.fill({ content: "{foo}", column: 0 });
+
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+
+    await backgroundTable.fill({ content: "[foo]", column: 1 });
+    await backgroundTable.fill({ content: '"foo"', column: 2 });
+    await backgroundTable.fill({ content: ",./123981275980172957129517", column: 3 });
+    await backgroundTable.fill({ content: "{foo}{foo}f", column: 4 });
+    await backgroundTable.fill({ content: "=1-205=-1205=-0125-0215215", column: 5 });
+
+    await resizing.reset(table.getColumnHeader({ name: "INSTANCE-1 (<Undefined>)" }));
+    await expect(backgroundTable.get()).toHaveScreenshot("background-table-decision.png");
+  });
+});
+
+test.describe("Populate rule background table", () => {
+  test("should correctly populate a rule-based background table", async ({
+    editor,
+    resizing,
+    table,
+    backgroundTable,
+  }) => {
+    await editor.createTestScenario(AssetType.RULE);
+    await editor.switchToBackgroundTable();
+    await backgroundTable.fill({ content: "{foo}", column: 0 });
+
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+    await table.addPropertyColumn({
+      targetCellName: "PROPERTY (<Undefined>)",
+      position: AddColumnPosition.RIGHT,
+      nth: 0,
+    });
+
+    await backgroundTable.fill({ content: "[foo]", column: 1 });
+    await backgroundTable.fill({ content: '"foo"', column: 2 });
+    await backgroundTable.fill({ content: ",./123981275980172957129517", column: 3 });
+    await backgroundTable.fill({ content: "{foo}{foo}f", column: 4 });
+    await backgroundTable.fill({ content: "=1-205=-1205=-0125-0215215", column: 5 });
+
+    await resizing.reset(table.getColumnHeader({ name: "INSTANCE-1 (<Undefined>)" }));
+    await expect(backgroundTable.get()).toHaveScreenshot("background-table-rule.png");
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/scesimEditor/testScenarioTable/contextMenu.spec.ts b/packages/scesim-editor/tests/e2e/scesimEditor/testScenarioTable/contextMenu.spec.ts
new file mode 100644
index 00000000000..b75099894c7
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/scesimEditor/testScenarioTable/contextMenu.spec.ts
@@ -0,0 +1,129 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../../__fixtures__/base";
+import { HeadingType, MenuItem } from "../../__fixtures__/contextMenu";
+import { AssetType } from "../../__fixtures__/editor";
+import { AddColumnPosition, AddRowPosition } from "../../__fixtures__/table";
+
+test.describe("Test scenario table context menu", () => {
+  test.describe("Context menu checks", () => {
+    test.beforeEach(async ({ editor, testScenarioTable, table }) => {
+      await editor.createTestScenario(AssetType.RULE);
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.ABOVE });
+      await testScenarioTable.fill({ content: "test", rowLocatorInfo: "1", column: 1 });
+    });
+
+    test("should render select context menu", async ({ contextMenu }) => {
+      await contextMenu.openOnCell({ rowNumber: "1", columnNumber: 1 });
+      await expect(contextMenu.getHeading({ heading: HeadingType.SELECTION })).toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.SCENARIO })).toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.FIELD })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.INSTANCE })).not.toBeAttached();
+    });
+
+    test("should render field context menu", async ({ contextMenu }) => {
+      await contextMenu.openOnProperty({ name: "PROPERTY (<Undefined>)", columnNumber: 1 });
+      await expect(contextMenu.getHeading({ heading: HeadingType.SELECTION })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.SCENARIO })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.FIELD })).toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.INSTANCE })).not.toBeAttached();
+    });
+
+    test("should render instance context menu", async ({ contextMenu }) => {
+      await contextMenu.openOnInstance({ name: "INSTANCE-1 (<Undefined>)" });
+      await expect(contextMenu.getHeading({ heading: HeadingType.SELECTION })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.SCENARIO })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.FIELD })).not.toBeAttached();
+      await expect(contextMenu.getHeading({ heading: HeadingType.INSTANCE })).toBeAttached();
+    });
+
+    test("should add and delete instance column left", async ({ contextMenu, table, testScenarioTable }) => {
+      await table.addInstanceColumn({
+        targetCellName: "INSTANCE-1 (<Undefined>)",
+        position: AddColumnPosition.LEFT,
+      });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).toBeAttached();
+      await expect(testScenarioTable.get()).toHaveScreenshot("test-scenario-table-add-instance-column-left.png");
+
+      await contextMenu.openOnInstance({ name: "INSTANCE-3 (<Undefined>)" });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_INSTANCE });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).not.toBeAttached();
+    });
+
+    test("should add and delete instance column right", async ({ contextMenu, table, testScenarioTable }) => {
+      await table.addInstanceColumn({
+        targetCellName: "INSTANCE-1 (<Undefined>)",
+        position: AddColumnPosition.RIGHT,
+      });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).toBeAttached();
+      await expect(testScenarioTable.get()).toHaveScreenshot("test-scenario-table-add-instance-column-right.png");
+
+      await contextMenu.openOnInstance({ name: "INSTANCE-3 (<Undefined>)" });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_INSTANCE });
+      await expect(table.getColumnHeader({ name: "INSTANCE-3 (<Undefined>)" })).not.toBeAttached();
+    });
+
+    test("should add and delete property column left", async ({ contextMenu, table, testScenarioTable }) => {
+      await table.addPropertyColumn({
+        targetCellName: "PROPERTY (<Undefined>)",
+        position: AddColumnPosition.LEFT,
+        nth: 0,
+      });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).toBeAttached();
+      await expect(testScenarioTable.get()).toHaveScreenshot("test-scenario-table-add-property-column-left.png");
+
+      await contextMenu.openOnProperty({ name: "PROPERTY (<Undefined>)", columnNumber: 1 });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_FIELD });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).not.toBeAttached();
+    });
+
+    test("should add and delete property column right", async ({ contextMenu, table, testScenarioTable }) => {
+      await table.addPropertyColumn({
+        targetCellName: "PROPERTY (<Undefined>)",
+        position: AddColumnPosition.RIGHT,
+        nth: 0,
+      });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).toBeAttached();
+      await expect(testScenarioTable.get()).toHaveScreenshot("test-scenario-table-add-property-column-right.png");
+
+      await contextMenu.openOnProperty({ name: "PROPERTY (<Undefined>)", columnNumber: 1 });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_FIELD });
+      await expect(table.getColumnHeader({ name: "PROPERTY (<Undefined>)" }).nth(2)).not.toBeAttached();
+    });
+
+    test("should add and delete row below", async ({ table, contextMenu }) => {
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+      await expect(table.getCell({ rowNumber: "1", columnNumber: 1 })).toContainText("test");
+
+      await contextMenu.openOnCell({ rowNumber: "3", columnNumber: 0 });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_SCENARIO });
+      await expect(table.getCell({ rowNumber: "3", columnNumber: 0 })).not.toBeAttached();
+    });
+
+    test("should add and delete row above", async ({ table, contextMenu }) => {
+      await table.addRow({ targetCellName: "1", position: AddRowPosition.ABOVE });
+      await expect(table.getCell({ rowNumber: "2", columnNumber: 1 })).toContainText("test");
+
+      await contextMenu.openOnCell({ rowNumber: "3", columnNumber: 0 });
+      await contextMenu.clickMenuItem({ menuItem: MenuItem.DELETE_SCENARIO });
+      await expect(table.getCell({ rowNumber: "3", columnNumber: 0 })).not.toBeAttached();
+    });
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/scesimEditor/testScenarioTable/populate.spec.ts b/packages/scesim-editor/tests/e2e/scesimEditor/testScenarioTable/populate.spec.ts
new file mode 100644
index 00000000000..c8e313feba4
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/scesimEditor/testScenarioTable/populate.spec.ts
@@ -0,0 +1,187 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../../__fixtures__/base";
+import { AssetType } from "../../__fixtures__/editor";
+import { AddRowPosition } from "../../__fixtures__/table";
+
+test.describe("Populate decision test scenario table", () => {
+  test("should correctly populate decision-based a test scenario table", async ({
+    editor,
+    resizing,
+    table,
+    testScenarioTable,
+  }) => {
+    await editor.createTestScenario(AssetType.DECISION);
+    await testScenarioTable.fill({ content: "Scenario one", rowLocatorInfo: "1", column: 0 });
+    await testScenarioTable.fill({
+      content: "date and time(5, 10)",
+      rowLocatorInfo: "1 Scenario one Scenario one",
+      column: 1,
+    });
+    await testScenarioTable.fill({
+      content: "100",
+      rowLocatorInfo: "1 Scenario one Scenario one date and time(5, 10) date and time(5, 10)",
+      column: 2,
+    });
+
+    await resizing.reset(table.getColumnHeader({ name: "GIVEN" }));
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+
+    await testScenarioTable.fill({ content: "{foo}", rowLocatorInfo: "2", column: 0 });
+    await testScenarioTable.fill({ content: '"foo"', rowLocatorInfo: "3", column: 0 });
+    await testScenarioTable.fill({ content: "[foo]", rowLocatorInfo: "4", column: 0 });
+    await testScenarioTable.fill({ content: ",./123", rowLocatorInfo: "5", column: 0 });
+    await testScenarioTable.fill({ content: '"6789"', rowLocatorInfo: "6", column: 0 });
+
+    await testScenarioTable.fill({ content: '"foo"', rowLocatorInfo: "2 {foo} {foo}", column: 1 });
+    await testScenarioTable.fill({ content: "[foo]", rowLocatorInfo: '3 "foo" "foo"', column: 1 });
+    await testScenarioTable.fill({
+      content: ",./123",
+      rowLocatorInfo: "4 [foo] [foo]",
+      column: 1,
+    });
+    await testScenarioTable.fill({
+      content: "Scenario two",
+      rowLocatorInfo: "5 ,./123 ,./123",
+      column: 1,
+    });
+    await testScenarioTable.fill({
+      content: '"129587289157"',
+      rowLocatorInfo: '6 "6789" "6789"',
+      column: 1,
+    });
+
+    await testScenarioTable.fill({
+      content: '"foo"',
+      rowLocatorInfo: '2 {foo} {foo} "foo" "foo"',
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: ",./123",
+      rowLocatorInfo: '3 "foo" "foo" [foo] [foo]',
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: '"12859728917589"',
+      rowLocatorInfo: "4 [foo] [foo] ,./123 ,./123",
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: "Scenario date and time(213,456 , )",
+      rowLocatorInfo: "5 ,./123 ,./123 Scenario two Scenario two",
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: "{foofoo}{foofoo}",
+      rowLocatorInfo: '6 "6789" "6789" "129587289157" "129587289157"',
+      column: 2,
+    });
+
+    await resizing.reset(table.getColumnHeader({ name: "EXPECT" }));
+    await expect(testScenarioTable.get()).toHaveScreenshot("test-scenario-table-decision.png");
+  });
+});
+
+test.describe("Populate rule test scenario table", () => {
+  test("should correctly populate a rule-based test scenario table", async ({
+    editor,
+    resizing,
+    table,
+    testScenarioTable,
+  }) => {
+    await editor.createTestScenario(AssetType.RULE);
+
+    await testScenarioTable.fill({ content: "Scenario one", rowLocatorInfo: "1", column: 0 });
+    await testScenarioTable.fill({
+      content: "date and time(5, 10)",
+      rowLocatorInfo: "1 Scenario one Scenario one",
+      column: 1,
+    });
+    await testScenarioTable.fill({
+      content: "100",
+      rowLocatorInfo: "1 Scenario one Scenario one date and time(5, 10) date and time(5, 10)",
+      column: 2,
+    });
+
+    await resizing.reset(table.getColumnHeader({ name: "GIVEN" }));
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+    await table.addRow({ targetCellName: "1", position: AddRowPosition.BELOW });
+
+    await testScenarioTable.fill({ content: "{foo}", rowLocatorInfo: "2", column: 0 });
+    await testScenarioTable.fill({ content: '"foo"', rowLocatorInfo: "3", column: 0 });
+    await testScenarioTable.fill({ content: "[foo]", rowLocatorInfo: "4", column: 0 });
+    await testScenarioTable.fill({ content: ",./123", rowLocatorInfo: "5", column: 0 });
+    await testScenarioTable.fill({ content: '"6789"', rowLocatorInfo: "6", column: 0 });
+
+    await testScenarioTable.fill({ content: '"foo"', rowLocatorInfo: "2 {foo} {foo}", column: 1 });
+    await testScenarioTable.fill({ content: "[foo]", rowLocatorInfo: '3 "foo" "foo"', column: 1 });
+    await testScenarioTable.fill({
+      content: ",./123",
+      rowLocatorInfo: "4 [foo] [foo]",
+      column: 1,
+    });
+    await testScenarioTable.fill({
+      content: "Scenario two",
+      rowLocatorInfo: "5 ,./123 ,./123",
+      column: 1,
+    });
+    await testScenarioTable.fill({
+      content: '"129587289157"',
+      rowLocatorInfo: '6 "6789" "6789"',
+      column: 1,
+    });
+
+    await testScenarioTable.fill({
+      content: '"foo"',
+      rowLocatorInfo: '2 {foo} {foo} "foo" "foo"',
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: ",./123",
+      rowLocatorInfo: '3 "foo" "foo" [foo] [foo]',
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: '"12859728917589"',
+      rowLocatorInfo: "4 [foo] [foo] ,./123 ,./123",
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: "Scenario date and time(213,456 , )",
+      rowLocatorInfo: "5 ,./123 ,./123 Scenario two Scenario two",
+      column: 2,
+    });
+    await testScenarioTable.fill({
+      content: "{foofoo}{foofoo}",
+      rowLocatorInfo: '6 "6789" "6789" "129587289157" "129587289157"',
+      column: 2,
+    });
+
+    await resizing.reset(table.getColumnHeader({ name: "EXPECT" }));
+    await expect(testScenarioTable.get()).toHaveScreenshot("test-scenario-table-rule.png");
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/useCases/areTheyOldEnough.spec.ts b/packages/scesim-editor/tests/e2e/useCases/areTheyOldEnough.spec.ts
new file mode 100644
index 00000000000..96c95411a6f
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/useCases/areTheyOldEnough.spec.ts
@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../__fixtures__/base";
+
+test.describe("Check are they old enough test case", () => {
+  test("should render are they old enough test correctly", async ({ useCases, testScenarioTable }) => {
+    await useCases.openAreTheyOldEnoughTest();
+    await expect(testScenarioTable.get()).toHaveScreenshot("are-they-old-enough-test.png");
+  });
+});
diff --git a/packages/scesim-editor/tests/e2e/useCases/trafficViolation.spec.ts b/packages/scesim-editor/tests/e2e/useCases/trafficViolation.spec.ts
new file mode 100644
index 00000000000..18174b0db0e
--- /dev/null
+++ b/packages/scesim-editor/tests/e2e/useCases/trafficViolation.spec.ts
@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { test, expect } from "../__fixtures__/base";
+
+test.describe("Check traffic violation test case", () => {
+  test("should render traffic violation test correctly", async ({ useCases, testScenarioTable }) => {
+    await useCases.openTrafficViolationTest();
+    await expect(testScenarioTable.get()).toHaveScreenshot("traffic-violation-test.png");
+  });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c0ef4d28b8..fe0daab74c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8885,21 +8885,51 @@ importers:
       "@babel/preset-react":
         specifier: ^7.16.0
         version: 7.16.0(@babel/core@7.18.10)
+      "@babel/preset-typescript":
+        specifier: ^7.22.5
+        version: 7.23.0(@babel/core@7.18.10)
       "@kie-tools-core/webpack-base":
         specifier: workspace:*
         version: link:../webpack-base
       "@kie-tools/eslint":
         specifier: workspace:*
         version: link:../eslint
+      "@kie-tools/playwright-base":
+        specifier: workspace:*
+        version: link:../playwright-base
       "@kie-tools/root-env":
         specifier: workspace:*
         version: link:../root-env
+      "@kie-tools/storybook-base":
+        specifier: workspace:*
+        version: link:../storybook-base
       "@kie-tools/tsconfig":
         specifier: workspace:*
         version: link:../tsconfig
+      "@playwright/test":
+        specifier: ^1.38.1
+        version: 1.38.1
+      "@storybook/addon-links":
+        specifier: ^7.3.2
+        version: 7.6.13(react@17.0.2)
+      "@storybook/blocks":
+        specifier: ^7.3.2
+        version: 7.6.13(@types/react-dom@17.0.8)(@types/react@17.0.21)(react-dom@17.0.2)(react@17.0.2)
+      "@storybook/preview-api":
+        specifier: ^7.3.2
+        version: 7.6.13
+      "@storybook/react":
+        specifier: ^7.3.2
+        version: 7.6.13(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)
+      "@storybook/react-webpack5":
+        specifier: ^7.3.2
+        version: 7.6.13(@babel/core@7.18.10)(@swc/core@1.3.92)(esbuild@0.18.20)(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)(webpack-cli@4.10.0)(webpack-dev-server@4.15.1)
       "@types/lodash":
         specifier: ^4.14.168
         version: 4.14.169
+      "@types/node":
+        specifier: ^18.13.0
+        version: 18.17.18
       "@types/react":
         specifier: ^17.0.6
         version: 17.0.21
@@ -8915,18 +8945,30 @@ importers:
       copy-webpack-plugin:
         specifier: ^11.0.0
         version: 11.0.0(webpack@5.88.2)
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
       file-loader:
         specifier: ^6.2.0
         version: 6.2.0(webpack@5.88.2)
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
+      run-script-os:
+        specifier: ^1.1.6
+        version: 1.1.6
+      storybook:
+        specifier: ^7.3.2
+        version: 7.6.13
+      ts-jest:
+        specifier: ^26.5.6
+        version: 26.5.6(jest@26.6.3)(typescript@4.8.4)
       typescript:
         specifier: ^4.6.2
         version: 4.8.4
       webpack:
         specifier: ^5.88.2
-        version: 5.88.2(webpack-cli@4.10.0)
+        version: 5.88.2(@swc/core@1.3.92)(esbuild@0.18.20)(webpack-cli@4.10.0)
       webpack-cli:
         specifier: ^4.10.0
         version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.88.2)
@@ -14229,44 +14271,6 @@ packages:
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-create-class-features-plugin@7.21.8(@babel/core@7.16.12):
-    resolution:
-      { integrity: sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw== }
-    engines: { node: ">=6.9.0" }
-    peerDependencies:
-      "@babel/core": ^7.0.0
-    dependencies:
-      "@babel/core": 7.16.12
-      "@babel/helper-annotate-as-pure": 7.22.5
-      "@babel/helper-environment-visitor": 7.22.20
-      "@babel/helper-function-name": 7.23.0
-      "@babel/helper-member-expression-to-functions": 7.23.0
-      "@babel/helper-optimise-call-expression": 7.22.5
-      "@babel/helper-replace-supers": 7.22.20(@babel/core@7.16.12)
-      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
-      "@babel/helper-split-export-declaration": 7.22.6
-      semver: 6.3.1
-    dev: true
-
-  /@babel/helper-create-class-features-plugin@7.21.8(@babel/core@7.23.9):
-    resolution:
-      { integrity: sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw== }
-    engines: { node: ">=6.9.0" }
-    peerDependencies:
-      "@babel/core": ^7.0.0
-    dependencies:
-      "@babel/core": 7.23.9
-      "@babel/helper-annotate-as-pure": 7.22.5
-      "@babel/helper-environment-visitor": 7.22.20
-      "@babel/helper-function-name": 7.23.0
-      "@babel/helper-member-expression-to-functions": 7.23.0
-      "@babel/helper-optimise-call-expression": 7.22.5
-      "@babel/helper-replace-supers": 7.22.20(@babel/core@7.23.9)
-      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
-      "@babel/helper-split-export-declaration": 7.22.6
-      semver: 6.3.1
-    dev: true
-
   /@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.16.12):
     resolution:
       { integrity: sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg== }
@@ -14549,15 +14553,6 @@ packages:
       "@babel/types": 7.23.9
     dev: true
 
-  /@babel/helper-function-name@7.21.0:
-    resolution:
-      { integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg== }
-    engines: { node: ">=6.9.0" }
-    dependencies:
-      "@babel/template": 7.23.9
-      "@babel/types": 7.23.9
-    dev: true
-
   /@babel/helper-function-name@7.23.0:
     resolution:
       { integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw== }
@@ -14613,7 +14608,7 @@ packages:
     dependencies:
       "@babel/helper-environment-visitor": 7.21.5
       "@babel/helper-module-imports": 7.22.15
-      "@babel/helper-simple-access": 7.21.5
+      "@babel/helper-simple-access": 7.22.5
       "@babel/helper-split-export-declaration": 7.18.6
       "@babel/helper-validator-identifier": 7.22.20
       "@babel/template": 7.23.9
@@ -14715,14 +14710,6 @@ packages:
       "@babel/helper-validator-identifier": 7.22.20
     dev: true
 
-  /@babel/helper-optimise-call-expression@7.18.6:
-    resolution:
-      { integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA== }
-    engines: { node: ">=6.9.0" }
-    dependencies:
-      "@babel/types": 7.23.9
-    dev: true
-
   /@babel/helper-optimise-call-expression@7.22.5:
     resolution:
       { integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw== }
@@ -14816,21 +14803,6 @@ packages:
       "@babel/helper-wrap-function": 7.22.20
     dev: true
 
-  /@babel/helper-replace-supers@7.21.5:
-    resolution:
-      { integrity: sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg== }
-    engines: { node: ">=6.9.0" }
-    dependencies:
-      "@babel/helper-environment-visitor": 7.22.20
-      "@babel/helper-member-expression-to-functions": 7.23.0
-      "@babel/helper-optimise-call-expression": 7.22.5
-      "@babel/template": 7.23.9
-      "@babel/traverse": 7.23.9
-      "@babel/types": 7.23.9
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/helper-replace-supers@7.22.20(@babel/core@7.16.12):
     resolution:
       { integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw== }
@@ -14883,14 +14855,6 @@ packages:
       "@babel/helper-optimise-call-expression": 7.22.5
     dev: true
 
-  /@babel/helper-simple-access@7.21.5:
-    resolution:
-      { integrity: sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg== }
-    engines: { node: ">=6.9.0" }
-    dependencies:
-      "@babel/types": 7.23.9
-    dev: true
-
   /@babel/helper-simple-access@7.22.5:
     resolution:
       { integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w== }
@@ -14899,14 +14863,6 @@ packages:
       "@babel/types": 7.23.9
     dev: true
 
-  /@babel/helper-skip-transparent-expression-wrappers@7.20.0:
-    resolution:
-      { integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg== }
-    engines: { node: ">=6.9.0" }
-    dependencies:
-      "@babel/types": 7.23.9
-    dev: true
-
   /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
     resolution:
       { integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q== }
@@ -15170,7 +15126,7 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-skip-transparent-expression-wrappers": 7.20.0
+      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
       "@babel/plugin-proposal-optional-chaining": 7.21.0(@babel/core@7.16.12)
     dev: true
 
@@ -15183,7 +15139,7 @@ packages:
     dependencies:
       "@babel/core": 7.23.9
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-skip-transparent-expression-wrappers": 7.20.0
+      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
       "@babel/plugin-proposal-optional-chaining": 7.21.0(@babel/core@7.23.9)
     dev: true
 
@@ -15312,7 +15268,7 @@ packages:
       "@babel/core": ^7.0.0-0
     dependencies:
       "@babel/core": 7.16.12
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.16.12)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.16.12)
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
@@ -15324,7 +15280,7 @@ packages:
       "@babel/core": ^7.0.0-0
     dependencies:
       "@babel/core": 7.23.9
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.23.9)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.23.9)
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
@@ -15362,7 +15318,7 @@ packages:
       "@babel/core": ^7.12.0
     dependencies:
       "@babel/core": 7.16.12
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.16.12)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.16.12)
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/plugin-syntax-class-static-block": 7.14.5(@babel/core@7.16.12)
     dev: true
@@ -15375,7 +15331,7 @@ packages:
       "@babel/core": ^7.12.0
     dependencies:
       "@babel/core": 7.23.9
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.23.9)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.23.9)
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/plugin-syntax-class-static-block": 7.14.5(@babel/core@7.23.9)
     dev: true
@@ -15734,7 +15690,7 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-skip-transparent-expression-wrappers": 7.20.0
+      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
       "@babel/plugin-syntax-optional-chaining": 7.8.3(@babel/core@7.16.12)
     dev: true
 
@@ -15747,7 +15703,7 @@ packages:
     dependencies:
       "@babel/core": 7.23.9
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-skip-transparent-expression-wrappers": 7.20.0
+      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
       "@babel/plugin-syntax-optional-chaining": 7.8.3(@babel/core@7.23.9)
     dev: true
 
@@ -15801,7 +15757,7 @@ packages:
       "@babel/core": ^7.0.0-0
     dependencies:
       "@babel/core": 7.16.12
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.16.12)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.16.12)
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
@@ -15813,7 +15769,7 @@ packages:
       "@babel/core": ^7.0.0-0
     dependencies:
       "@babel/core": 7.23.9
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.23.9)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.23.9)
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
@@ -15839,7 +15795,7 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-annotate-as-pure": 7.22.5
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.16.12)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.16.12)
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/plugin-syntax-private-property-in-object": 7.14.5(@babel/core@7.16.12)
     dev: true
@@ -15853,7 +15809,7 @@ packages:
     dependencies:
       "@babel/core": 7.23.9
       "@babel/helper-annotate-as-pure": 7.22.5
-      "@babel/helper-create-class-features-plugin": 7.21.8(@babel/core@7.23.9)
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.23.9)
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/plugin-syntax-private-property-in-object": 7.14.5(@babel/core@7.23.9)
     dev: true
@@ -16181,6 +16137,17 @@ packages:
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-flow@7.22.5(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-plugin-utils": 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-flow@7.22.5(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ== }
@@ -16723,6 +16690,17 @@ packages:
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-plugin-utils": 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ== }
@@ -17171,15 +17149,13 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-annotate-as-pure": 7.22.5
-      "@babel/helper-environment-visitor": 7.21.5
-      "@babel/helper-function-name": 7.21.0
-      "@babel/helper-optimise-call-expression": 7.18.6
+      "@babel/helper-environment-visitor": 7.22.20
+      "@babel/helper-function-name": 7.23.0
+      "@babel/helper-optimise-call-expression": 7.22.5
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-replace-supers": 7.21.5
-      "@babel/helper-split-export-declaration": 7.18.6
+      "@babel/helper-replace-supers": 7.22.20(@babel/core@7.16.12)
+      "@babel/helper-split-export-declaration": 7.22.6
       globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /@babel/plugin-transform-classes@7.16.7(@babel/core@7.23.9):
@@ -17191,15 +17167,13 @@ packages:
     dependencies:
       "@babel/core": 7.23.9
       "@babel/helper-annotate-as-pure": 7.22.5
-      "@babel/helper-environment-visitor": 7.21.5
-      "@babel/helper-function-name": 7.21.0
-      "@babel/helper-optimise-call-expression": 7.18.6
+      "@babel/helper-environment-visitor": 7.22.20
+      "@babel/helper-function-name": 7.23.0
+      "@babel/helper-optimise-call-expression": 7.22.5
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-replace-supers": 7.21.5
-      "@babel/helper-split-export-declaration": 7.18.6
+      "@babel/helper-replace-supers": 7.22.20(@babel/core@7.23.9)
+      "@babel/helper-split-export-declaration": 7.22.6
       globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /@babel/plugin-transform-classes@7.21.0(@babel/core@7.18.10):
@@ -17730,6 +17704,18 @@ packages:
       "@babel/plugin-syntax-flow": 7.22.5(@babel/core@7.16.12)
     dev: true
 
+  /@babel/plugin-transform-flow-strip-types@7.22.5(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-plugin-utils": 7.22.5
+      "@babel/plugin-syntax-flow": 7.22.5(@babel/core@7.18.10)
+    dev: true
+
   /@babel/plugin-transform-flow-strip-types@7.22.5(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA== }
@@ -17831,7 +17817,7 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-compilation-targets": 7.23.6
-      "@babel/helper-function-name": 7.21.0
+      "@babel/helper-function-name": 7.23.0
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
@@ -17844,7 +17830,7 @@ packages:
     dependencies:
       "@babel/core": 7.23.9
       "@babel/helper-compilation-targets": 7.23.6
-      "@babel/helper-function-name": 7.21.0
+      "@babel/helper-function-name": 7.23.0
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
@@ -18188,7 +18174,7 @@ packages:
       "@babel/core": 7.16.12
       "@babel/helper-module-transforms": 7.23.3(@babel/core@7.16.12)
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-simple-access": 7.21.5
+      "@babel/helper-simple-access": 7.22.5
       babel-plugin-dynamic-import-node: 2.3.3
     dev: true
 
@@ -18202,7 +18188,7 @@ packages:
       "@babel/core": 7.23.9
       "@babel/helper-module-transforms": 7.23.3(@babel/core@7.23.9)
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-simple-access": 7.21.5
+      "@babel/helper-simple-access": 7.22.5
       babel-plugin-dynamic-import-node: 2.3.3
     dev: true
 
@@ -18219,41 +18205,41 @@ packages:
       "@babel/helper-simple-access": 7.22.5
     dev: true
 
-  /@babel/plugin-transform-modules-commonjs@7.23.0(@babel/core@7.16.12):
+  /@babel/plugin-transform-modules-commonjs@7.23.0(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ== }
     engines: { node: ">=6.9.0" }
     peerDependencies:
       "@babel/core": ^7.0.0-0
     dependencies:
-      "@babel/core": 7.16.12
-      "@babel/helper-module-transforms": 7.23.3(@babel/core@7.16.12)
+      "@babel/core": 7.23.0
+      "@babel/helper-module-transforms": 7.23.3(@babel/core@7.23.0)
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/helper-simple-access": 7.22.5
     dev: true
 
-  /@babel/plugin-transform-modules-commonjs@7.23.0(@babel/core@7.23.0):
+  /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.16.12):
     resolution:
-      { integrity: sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ== }
+      { integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA== }
     engines: { node: ">=6.9.0" }
     peerDependencies:
       "@babel/core": ^7.0.0-0
     dependencies:
-      "@babel/core": 7.23.0
-      "@babel/helper-module-transforms": 7.23.3(@babel/core@7.23.0)
+      "@babel/core": 7.16.12
+      "@babel/helper-module-transforms": 7.23.3(@babel/core@7.16.12)
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/helper-simple-access": 7.22.5
     dev: true
 
-  /@babel/plugin-transform-modules-commonjs@7.23.0(@babel/core@7.23.9):
+  /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.18.10):
     resolution:
-      { integrity: sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ== }
+      { integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA== }
     engines: { node: ">=6.9.0" }
     peerDependencies:
       "@babel/core": ^7.0.0-0
     dependencies:
-      "@babel/core": 7.23.9
-      "@babel/helper-module-transforms": 7.23.3(@babel/core@7.23.9)
+      "@babel/core": 7.18.10
+      "@babel/helper-module-transforms": 7.23.3(@babel/core@7.18.10)
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/helper-simple-access": 7.22.5
     dev: true
@@ -18692,9 +18678,7 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-replace-supers": 7.21.5
-    transitivePeerDependencies:
-      - supports-color
+      "@babel/helper-replace-supers": 7.22.20(@babel/core@7.16.12)
     dev: true
 
   /@babel/plugin-transform-object-super@7.16.7(@babel/core@7.23.9):
@@ -18706,9 +18690,7 @@ packages:
     dependencies:
       "@babel/core": 7.23.9
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-replace-supers": 7.21.5
-    transitivePeerDependencies:
-      - supports-color
+      "@babel/helper-replace-supers": 7.22.20(@babel/core@7.23.9)
     dev: true
 
   /@babel/plugin-transform-object-super@7.18.6(@babel/core@7.18.10):
@@ -19121,6 +19103,17 @@ packages:
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
+  /@babel/plugin-transform-react-display-name@7.22.5(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-plugin-utils": 7.22.5
+    dev: true
+
   /@babel/plugin-transform-react-display-name@7.22.5(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw== }
@@ -19187,6 +19180,17 @@ packages:
       "@babel/plugin-transform-react-jsx": 7.22.15(@babel/core@7.16.12)
     dev: true
 
+  /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/plugin-transform-react-jsx": 7.22.15(@babel/core@7.18.10)
+    dev: true
+
   /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A== }
@@ -19362,6 +19366,18 @@ packages:
       "@babel/helper-plugin-utils": 7.22.5
     dev: true
 
+  /@babel/plugin-transform-react-pure-annotations@7.22.5(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-annotate-as-pure": 7.22.5
+      "@babel/helper-plugin-utils": 7.22.5
+    dev: true
+
   /@babel/plugin-transform-react-pure-annotations@7.22.5(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA== }
@@ -19615,7 +19631,7 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-skip-transparent-expression-wrappers": 7.20.0
+      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
     dev: true
 
   /@babel/plugin-transform-spread@7.16.7(@babel/core@7.23.9):
@@ -19627,7 +19643,7 @@ packages:
     dependencies:
       "@babel/core": 7.23.9
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-skip-transparent-expression-wrappers": 7.20.0
+      "@babel/helper-skip-transparent-expression-wrappers": 7.22.5
     dev: true
 
   /@babel/plugin-transform-spread@7.20.7(@babel/core@7.18.10):
@@ -19890,6 +19906,20 @@ packages:
       "@babel/plugin-syntax-typescript": 7.22.5(@babel/core@7.16.12)
     dev: true
 
+  /@babel/plugin-transform-typescript@7.22.15(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-1uirS0TnijxvQLnlv5wQBwOX3E1wCFX7ITv+9pBV2wKEk4K+M5tqDaoNXnTH8tjEIYHLO98MwiTWO04Ggz4XuA== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-annotate-as-pure": 7.22.5
+      "@babel/helper-create-class-features-plugin": 7.22.15(@babel/core@7.18.10)
+      "@babel/helper-plugin-utils": 7.22.5
+      "@babel/plugin-syntax-typescript": 7.22.5(@babel/core@7.18.10)
+    dev: true
+
   /@babel/plugin-transform-typescript@7.22.15(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-1uirS0TnijxvQLnlv5wQBwOX3E1wCFX7ITv+9pBV2wKEk4K+M5tqDaoNXnTH8tjEIYHLO98MwiTWO04Ggz4XuA== }
@@ -20676,6 +20706,19 @@ packages:
       "@babel/plugin-transform-flow-strip-types": 7.22.5(@babel/core@7.16.12)
     dev: true
 
+  /@babel/preset-flow@7.22.15(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-dB5aIMqpkgbTfN5vDdTRPzjqtWiZcRESNR88QYnoPR+bmdYoluOzMX9tQerTv0XzSgZYctPfO1oc0N5zdog1ew== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-plugin-utils": 7.22.5
+      "@babel/helper-validator-option": 7.23.5
+      "@babel/plugin-transform-flow-strip-types": 7.22.5(@babel/core@7.18.10)
+    dev: true
+
   /@babel/preset-flow@7.22.15(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-dB5aIMqpkgbTfN5vDdTRPzjqtWiZcRESNR88QYnoPR+bmdYoluOzMX9tQerTv0XzSgZYctPfO1oc0N5zdog1ew== }
@@ -20832,6 +20875,22 @@ packages:
       "@babel/plugin-transform-react-pure-annotations": 7.22.5(@babel/core@7.16.12)
     dev: true
 
+  /@babel/preset-react@7.22.15(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-Csy1IJ2uEh/PecCBXXoZGAZBeCATTuePzCSB7dLYWS0vOEj6CNpjxIhW4duWwZodBNueH7QO14WbGn8YyeuN9w== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-plugin-utils": 7.22.5
+      "@babel/helper-validator-option": 7.23.5
+      "@babel/plugin-transform-react-display-name": 7.22.5(@babel/core@7.18.10)
+      "@babel/plugin-transform-react-jsx": 7.22.15(@babel/core@7.18.10)
+      "@babel/plugin-transform-react-jsx-development": 7.22.5(@babel/core@7.18.10)
+      "@babel/plugin-transform-react-pure-annotations": 7.22.5(@babel/core@7.18.10)
+    dev: true
+
   /@babel/preset-react@7.22.15(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-Csy1IJ2uEh/PecCBXXoZGAZBeCATTuePzCSB7dLYWS0vOEj6CNpjxIhW4duWwZodBNueH7QO14WbGn8YyeuN9w== }
@@ -20873,12 +20932,27 @@ packages:
     dependencies:
       "@babel/core": 7.16.12
       "@babel/helper-plugin-utils": 7.22.5
-      "@babel/helper-validator-option": 7.22.15
+      "@babel/helper-validator-option": 7.23.5
       "@babel/plugin-syntax-jsx": 7.22.5(@babel/core@7.16.12)
-      "@babel/plugin-transform-modules-commonjs": 7.23.0(@babel/core@7.16.12)
+      "@babel/plugin-transform-modules-commonjs": 7.23.3(@babel/core@7.16.12)
       "@babel/plugin-transform-typescript": 7.22.15(@babel/core@7.16.12)
     dev: true
 
+  /@babel/preset-typescript@7.23.0(@babel/core@7.18.10):
+    resolution:
+      { integrity: sha512-6P6VVa/NM/VlAYj5s2Aq/gdVg8FSENCg3wlZ6Qau9AcPaoF5LbN1nyGlR9DTRIw9PpxI94e+ReydsJHcjwAweg== }
+    engines: { node: ">=6.9.0" }
+    peerDependencies:
+      "@babel/core": ^7.0.0-0
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/helper-plugin-utils": 7.22.5
+      "@babel/helper-validator-option": 7.23.5
+      "@babel/plugin-syntax-jsx": 7.22.5(@babel/core@7.18.10)
+      "@babel/plugin-transform-modules-commonjs": 7.23.3(@babel/core@7.18.10)
+      "@babel/plugin-transform-typescript": 7.22.15(@babel/core@7.18.10)
+    dev: true
+
   /@babel/preset-typescript@7.23.0(@babel/core@7.23.0):
     resolution:
       { integrity: sha512-6P6VVa/NM/VlAYj5s2Aq/gdVg8FSENCg3wlZ6Qau9AcPaoF5LbN1nyGlR9DTRIw9PpxI94e+ReydsJHcjwAweg== }
@@ -20890,7 +20964,7 @@ packages:
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/helper-validator-option": 7.23.5
       "@babel/plugin-syntax-jsx": 7.22.5(@babel/core@7.23.0)
-      "@babel/plugin-transform-modules-commonjs": 7.23.0(@babel/core@7.23.0)
+      "@babel/plugin-transform-modules-commonjs": 7.23.3(@babel/core@7.23.0)
       "@babel/plugin-transform-typescript": 7.22.15(@babel/core@7.23.0)
     dev: true
 
@@ -20905,7 +20979,7 @@ packages:
       "@babel/helper-plugin-utils": 7.22.5
       "@babel/helper-validator-option": 7.23.5
       "@babel/plugin-syntax-jsx": 7.22.5(@babel/core@7.23.9)
-      "@babel/plugin-transform-modules-commonjs": 7.23.0(@babel/core@7.23.9)
+      "@babel/plugin-transform-modules-commonjs": 7.23.3(@babel/core@7.23.9)
       "@babel/plugin-transform-typescript": 7.22.15(@babel/core@7.23.9)
     dev: true
 
@@ -21190,9 +21264,9 @@ packages:
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      "@csstools/selector-specificity": 2.2.0(postcss-selector-parser@6.0.10)
+      "@csstools/selector-specificity": 2.2.0(postcss-selector-parser@6.0.16)
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /@csstools/postcss-color-function@1.1.1(postcss@8.4.16):
@@ -21248,9 +21322,9 @@ packages:
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      "@csstools/selector-specificity": 2.2.0(postcss-selector-parser@6.0.10)
+      "@csstools/selector-specificity": 2.2.0(postcss-selector-parser@6.0.16)
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /@csstools/postcss-nested-calc@1.0.0(postcss@8.4.16):
@@ -21341,14 +21415,14 @@ packages:
       postcss: 8.4.16
     dev: true
 
-  /@csstools/selector-specificity@2.2.0(postcss-selector-parser@6.0.10):
+  /@csstools/selector-specificity@2.2.0(postcss-selector-parser@6.0.16):
     resolution:
       { integrity: sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw== }
     engines: { node: ^14 || ^16 || >=18 }
     peerDependencies:
       postcss-selector-parser: ^6.0.10
     dependencies:
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /@cypress/request@3.0.1:
@@ -27645,6 +27719,57 @@ packages:
       - webpack-plugin-serve
     dev: true
 
+  /@storybook/preset-react-webpack@7.6.13(@babel/core@7.18.10)(@swc/core@1.3.92)(esbuild@0.18.20)(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)(webpack-cli@4.10.0)(webpack-dev-server@4.15.1):
+    resolution:
+      { integrity: sha512-ywQfwR4+uUHslbPYPkhGnp50eFL5c8QM5YE7gVd6ue58+nUXu984T5+WcRR62rqoycO2q7CdfASlb72S8PFkEA== }
+    engines: { node: ">=16.0.0" }
+    peerDependencies:
+      "@babel/core": ^7.22.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: "*"
+    peerDependenciesMeta:
+      "@babel/core":
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      "@babel/core": 7.18.10
+      "@babel/preset-flow": 7.22.15(@babel/core@7.18.10)
+      "@babel/preset-react": 7.22.15(@babel/core@7.18.10)
+      "@pmmmwh/react-refresh-webpack-plugin": 0.5.11(react-refresh@0.14.0)(webpack-dev-server@4.15.1)(webpack@5.88.2)
+      "@storybook/core-webpack": 7.6.13
+      "@storybook/docs-tools": 7.6.13
+      "@storybook/node-logger": 7.6.13
+      "@storybook/react": 7.6.13(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)
+      "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0(typescript@4.8.4)(webpack@5.88.2)
+      "@types/node": 18.17.18
+      "@types/semver": 7.5.2
+      babel-plugin-add-react-displayname: 0.0.5
+      fs-extra: 11.1.1
+      magic-string: 0.30.7
+      react: 17.0.2
+      react-docgen: 7.0.3
+      react-dom: 17.0.2(react@17.0.2)
+      react-refresh: 0.14.0
+      semver: 7.5.4
+      typescript: 4.8.4
+      webpack: 5.88.2(@swc/core@1.3.92)(esbuild@0.18.20)(webpack-cli@4.10.0)
+    transitivePeerDependencies:
+      - "@swc/core"
+      - "@types/webpack"
+      - encoding
+      - esbuild
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+    dev: true
+
   /@storybook/preset-react-webpack@7.6.13(@babel/core@7.23.0)(@swc/core@1.3.92)(esbuild@0.18.20)(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)(webpack-cli@4.10.0)(webpack-dev-server@4.15.1):
     resolution:
       { integrity: sha512-ywQfwR4+uUHslbPYPkhGnp50eFL5c8QM5YE7gVd6ue58+nUXu984T5+WcRR62rqoycO2q7CdfASlb72S8PFkEA== }
@@ -27870,6 +27995,45 @@ packages:
       - webpack-plugin-serve
     dev: true
 
+  /@storybook/react-webpack5@7.6.13(@babel/core@7.18.10)(@swc/core@1.3.92)(esbuild@0.18.20)(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)(webpack-cli@4.10.0)(webpack-dev-server@4.15.1):
+    resolution:
+      { integrity: sha512-TAoAZzZSV6/uE2qhDIf9bB90LBkHR3NnoUJN5pD/SS1wbNt8une1ufhDabfT6JiaBUPiNAg1Gl5Exct+WyBB9A== }
+    engines: { node: ">=16.0.0" }
+    peerDependencies:
+      "@babel/core": ^7.22.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: "*"
+    peerDependenciesMeta:
+      "@babel/core":
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      "@babel/core": 7.18.10
+      "@storybook/builder-webpack5": 7.6.13(esbuild@0.18.20)(typescript@4.8.4)(webpack-cli@4.10.0)
+      "@storybook/preset-react-webpack": 7.6.13(@babel/core@7.18.10)(@swc/core@1.3.92)(esbuild@0.18.20)(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)(webpack-cli@4.10.0)(webpack-dev-server@4.15.1)
+      "@storybook/react": 7.6.13(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)
+      "@types/node": 18.17.18
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+      typescript: 4.8.4
+    transitivePeerDependencies:
+      - "@swc/core"
+      - "@swc/helpers"
+      - "@types/webpack"
+      - encoding
+      - esbuild
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+    dev: true
+
   /@storybook/react-webpack5@7.6.13(@babel/core@7.23.0)(@swc/core@1.3.92)(esbuild@0.18.20)(react-dom@17.0.2)(react@17.0.2)(typescript@4.8.4)(webpack-cli@4.10.0)(webpack-dev-server@4.15.1):
     resolution:
       { integrity: sha512-TAoAZzZSV6/uE2qhDIf9bB90LBkHR3NnoUJN5pD/SS1wbNt8une1ufhDabfT6JiaBUPiNAg1Gl5Exct+WyBB9A== }
@@ -33400,7 +33564,7 @@ packages:
     dependencies:
       css-select: 4.3.0
       css-what: 5.1.0
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
       domhandler: 4.3.1
       domutils: 2.8.0
     dev: true
@@ -34337,7 +34501,7 @@ packages:
       css-select: 4.3.0
       parse5: 6.0.1
       parse5-htmlparser2-tree-adapter: 6.0.1
-      postcss: 8.4.16
+      postcss: 8.4.38
       pretty-bytes: 5.6.0
     dev: true
 
@@ -34426,7 +34590,7 @@ packages:
       postcss: ^8.4
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /css-declaration-sorter@7.2.0(postcss@8.4.38):
@@ -34448,7 +34612,7 @@ packages:
       postcss: ^8.4
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /css-loader@5.2.7(webpack@5.88.2):
@@ -34478,12 +34642,12 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.16)
-      postcss: 8.4.16
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.16)
-      postcss-modules-local-by-default: 4.0.0(postcss@8.4.16)
-      postcss-modules-scope: 3.0.0(postcss@8.4.16)
-      postcss-modules-values: 4.0.0(postcss@8.4.16)
+      icss-utils: 5.1.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.38)
+      postcss-modules-local-by-default: 4.0.0(postcss@8.4.38)
+      postcss-modules-scope: 3.0.0(postcss@8.4.38)
+      postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
       semver: 7.5.4
       webpack: 5.76.1
@@ -34496,12 +34660,12 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.16)
-      postcss: 8.4.16
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.16)
-      postcss-modules-local-by-default: 4.0.0(postcss@8.4.16)
-      postcss-modules-scope: 3.0.0(postcss@8.4.16)
-      postcss-modules-values: 4.0.0(postcss@8.4.16)
+      icss-utils: 5.1.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.38)
+      postcss-modules-local-by-default: 4.0.0(postcss@8.4.38)
+      postcss-modules-scope: 3.0.0(postcss@8.4.38)
+      postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
       semver: 7.5.4
       webpack: 5.88.2(@swc/core@1.3.92)(esbuild@0.18.20)(webpack-cli@4.10.0)
@@ -34590,7 +34754,7 @@ packages:
     engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: ">=7.0.0" }
     dependencies:
       mdn-data: 2.0.28
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /css-tree@2.3.1:
@@ -34599,7 +34763,7 @@ packages:
     engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0 }
     dependencies:
       mdn-data: 2.0.30
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /css-what@5.1.0:
@@ -35903,7 +36067,7 @@ packages:
     resolution:
       { integrity: sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig== }
     dependencies:
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
       domhandler: 4.3.1
       entities: 2.2.0
     dev: true
@@ -35923,11 +36087,6 @@ packages:
     engines: { node: ">=10" }
     dev: true
 
-  /domelementtype@2.2.0:
-    resolution:
-      { integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A== }
-    dev: true
-
   /domelementtype@2.3.0:
     resolution:
       { integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== }
@@ -35955,7 +36114,7 @@ packages:
       { integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ== }
     engines: { node: ">= 4" }
     dependencies:
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
     dev: true
 
   /domhandler@5.0.3:
@@ -35976,7 +36135,7 @@ packages:
       { integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A== }
     dependencies:
       dom-serializer: 1.3.2
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
       domhandler: 4.3.1
     dev: true
 
@@ -36393,7 +36552,7 @@ packages:
       is-regex: 1.1.4
       is-shared-array-buffer: 1.0.3
       is-string: 1.0.7
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
       is-weakref: 1.0.2
       object-inspect: 1.13.1
       object-keys: 1.1.1
@@ -36434,7 +36593,7 @@ packages:
       is-regex: 1.1.4
       is-shared-array-buffer: 1.0.3
       is-string: 1.0.7
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
       is-weakref: 1.0.2
       object-inspect: 1.13.1
       object-keys: 1.1.1
@@ -39458,7 +39617,7 @@ packages:
     resolution:
       { integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A== }
     dependencies:
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
       domhandler: 4.3.1
       domutils: 2.8.0
       entities: 2.2.0
@@ -39749,14 +39908,14 @@ packages:
       postcss: 8.4.12
     dev: true
 
-  /icss-utils@5.1.0(postcss@8.4.16):
+  /icss-utils@5.1.0(postcss@8.4.38):
     resolution:
       { integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.38
     dev: true
 
   /identity-obj-proxy@3.0.0:
@@ -40472,20 +40631,12 @@ packages:
     dependencies:
       has-symbols: 1.0.3
 
-  /is-typed-array@1.1.12:
-    resolution:
-      { integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg== }
-    engines: { node: ">= 0.4" }
-    dependencies:
-      which-typed-array: 1.1.15
-
   /is-typed-array@1.1.13:
     resolution:
       { integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw== }
     engines: { node: ">= 0.4" }
     dependencies:
       which-typed-array: 1.1.15
-    dev: true
 
   /is-typedarray@1.0.0:
     resolution:
@@ -43790,13 +43941,6 @@ packages:
     hasBin: true
     dev: true
 
-  /nanoid@3.3.6:
-    resolution:
-      { integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== }
-    engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
-    hasBin: true
-    dev: true
-
   /nanoid@3.3.7:
     resolution:
       { integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== }
@@ -45480,7 +45624,7 @@ packages:
       postcss: ^8.2
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-calc@9.0.1(postcss@8.4.38):
@@ -45595,7 +45739,7 @@ packages:
       postcss: ^8.3
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-dir-pseudo-class@6.0.5(postcss@8.4.16):
@@ -45606,7 +45750,7 @@ packages:
       postcss: ^8.2
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-discard-comments@6.0.2(postcss@8.4.38):
@@ -45680,7 +45824,7 @@ packages:
       postcss: ^8.4
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-focus-within@5.0.4(postcss@8.4.16):
@@ -45691,7 +45835,7 @@ packages:
       postcss: ^8.4
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-font-variant@5.0.0(postcss@8.4.16):
@@ -45877,14 +46021,14 @@ packages:
       postcss: 8.4.12
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.16):
+  /postcss-modules-extract-imports@3.0.0(postcss@8.4.38):
     resolution:
       { integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.38
     dev: true
 
   /postcss-modules-local-by-default@4.0.0(postcss@8.4.12):
@@ -45896,20 +46040,20 @@ packages:
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.12)
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-local-by-default@4.0.0(postcss@8.4.16):
+  /postcss-modules-local-by-default@4.0.0(postcss@8.4.38):
     resolution:
       { integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ== }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.16)
-      postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      icss-utils: 5.1.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-selector-parser: 6.0.16
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -45921,18 +46065,18 @@ packages:
       postcss: ^8.1.0
     dependencies:
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.16):
+  /postcss-modules-scope@3.0.0(postcss@8.4.38):
     resolution:
       { integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg== }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss: 8.4.38
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-modules-values@4.0.0(postcss@8.4.12):
@@ -45946,15 +46090,15 @@ packages:
       postcss: 8.4.12
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.16):
+  /postcss-modules-values@4.0.0(postcss@8.4.38):
     resolution:
       { integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.16)
-      postcss: 8.4.16
+      icss-utils: 5.1.0(postcss@8.4.38)
+      postcss: 8.4.38
     dev: true
 
   /postcss-nesting@10.2.0(postcss@8.4.16):
@@ -45964,9 +46108,9 @@ packages:
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      "@csstools/selector-specificity": 2.2.0(postcss-selector-parser@6.0.10)
+      "@csstools/selector-specificity": 2.2.0(postcss-selector-parser@6.0.16)
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-normalize-charset@6.0.2(postcss@8.4.38):
@@ -46188,7 +46332,7 @@ packages:
       postcss: ^8.2
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-reduce-initial@6.1.0(postcss@8.4.38):
@@ -46231,16 +46375,7 @@ packages:
       postcss: ^8.2
     dependencies:
       postcss: 8.4.16
-      postcss-selector-parser: 6.0.10
-    dev: true
-
-  /postcss-selector-parser@6.0.10:
-    resolution:
-      { integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w== }
-    engines: { node: ">=4" }
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /postcss-selector-parser@6.0.16:
@@ -46285,9 +46420,9 @@ packages:
       { integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg== }
     engines: { node: ^10 || ^12 || >=14 }
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /postcss@8.4.16:
@@ -46295,9 +46430,9 @@ packages:
       { integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ== }
     engines: { node: ^10 || ^12 || >=14 }
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /postcss@8.4.38:
@@ -48427,7 +48562,7 @@ packages:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.7.0
       loader-utils: 2.0.4
-      postcss: 8.4.16
+      postcss: 8.4.38
       source-map: 0.6.1
     dev: true
 
@@ -48845,7 +48980,7 @@ packages:
     dependencies:
       chokidar: 3.5.3
       immutable: 4.0.0
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /sax@1.2.4:
@@ -49560,7 +49695,7 @@ packages:
     dependencies:
       abab: 2.0.6
       iconv-lite: 0.6.3
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
       webpack: 5.76.1
     dev: true
 
@@ -51241,7 +51376,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
     dev: true
 
   /typed-array-buffer@1.0.2:
@@ -51262,7 +51397,7 @@ packages:
       call-bind: 1.0.7
       for-each: 0.3.3
       has-proto: 1.0.3
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
     dev: true
 
   /typed-array-byte-length@1.0.1:
@@ -51286,7 +51421,7 @@ packages:
       call-bind: 1.0.7
       for-each: 0.3.3
       has-proto: 1.0.3
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
     dev: true
 
   /typed-array-byte-offset@1.0.2:
@@ -51308,7 +51443,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       for-each: 0.3.3
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
 
   /typed-array-length@1.0.6:
     resolution:
@@ -51899,7 +52034,7 @@ packages:
       inherits: 2.0.4
       is-arguments: 1.1.1
       is-generator-function: 1.0.10
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
       which-typed-array: 1.1.15
     dev: true