diff --git a/.eslintignore b/.eslintignore
index 733bce16cd9..b2bde7768da 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,7 +10,6 @@ packages/cli/dist
 
 # build results for main package
 packages/main/dist
-packages/main/ssr
 packages/main/wrappers
 
 # i18n defaults
diff --git a/.github/workflows/docs-stable.yml b/.github/workflows/docs-stable.yml
index 2604b554e5a..7de95417229 100644
--- a/.github/workflows/docs-stable.yml
+++ b/.github/workflows/docs-stable.yml
@@ -35,10 +35,6 @@ jobs:
 
       - name: Build Storybook
         run: |
-          # TODO remove as soon as https://github.com/recharts/recharts/issues/4558 is resolved
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
           yarn build:storybook
           yarn build:storybook-sitemap --basePath "v${{ env.MAJOR_VERSION }}"
         env:
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 7c7ec765030..1e5e8ebecfe 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -73,12 +73,12 @@ jobs:
       - name: Install
         run: yarn install --immutable
 
-      - name: Install 18
-        if: ${{ matrix.react == '18' }}
+      - name: Install 19
+        if: ${{ matrix.react == '19' }}
         run: |
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
+          echo "$(jq '.resolutions += {"@types/react": "npm:types-react@rc", "@types/react-dom": "npm:types-react-dom@rc" }' package.json)" > package.json
+          yarn add react@rc react-dom@rc
+          yarn
 
       - name: Build
         run: yarn build
@@ -122,10 +122,6 @@ jobs:
       - name: Install and Build
         run: |
           yarn install --immutable
-          # TODO remove as soon as https://github.com/recharts/recharts/issues/4558 is resolved
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
           yarn build:storybook
         env:
           NODE_OPTIONS: '--max-old-space-size=4096'
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 175147cf31d..927035103d0 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -20,6 +20,7 @@ jobs:
           - cypress-commands
           - main/src/components
           - main/src/internal
+          - compat
         react: ['18', '19']
       fail-fast: false
     steps:
@@ -34,12 +35,12 @@ jobs:
       - name: Install
         run: yarn install --immutable
 
-      - name: Install 18
-        if: ${{ matrix.react == '18' }}
+      - name: Install 19
+        if: ${{ matrix.react == '19' }}
         run: |
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
+          yarn set resolution "@types/react@npm:*" "npm:types-react@rc"
+          yarn set resolution "@types/react-dom@npm:*" "npm:types-react-dom@rc"
+          yarn add react@rc react-dom@rc
 
       - name: Cypress run
         if: ${{ (matrix.react == '19' && matrix.spec == 'charts') != true }}
diff --git a/.storybook/addons/version-switch/manager.ts b/.storybook/addons/version-switch/manager.ts
new file mode 100644
index 00000000000..f6f1a4e12c1
--- /dev/null
+++ b/.storybook/addons/version-switch/manager.ts
@@ -0,0 +1 @@
+import '../../components/VersionSwitch.js';
diff --git a/.storybook/components/VersionSwitch.tsx b/.storybook/components/VersionSwitch.tsx
new file mode 100644
index 00000000000..670d12cda30
--- /dev/null
+++ b/.storybook/components/VersionSwitch.tsx
@@ -0,0 +1,60 @@
+import { IconButton } from '@storybook/components';
+import { addons, types } from '@storybook/manager-api';
+import { ActionSheet, Button } from '@ui5/webcomponents-react';
+import * as React from 'react';
+
+const ADDON_ID = 'version-switch';
+const TOOL_ID = `${ADDON_ID}/toolbar`;
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(TOOL_ID, {
+    type: types.TOOLEXTRA,
+    title: 'Version Switch',
+    render: () => {
+      const [open, setOpen] = React.useState(false);
+
+      const handleVersionSelect = (e) => {
+        const { slug } = e.target.dataset;
+        window.location.href = `https://sap.github.io/ui5-webcomponents-react/${slug}/`;
+      };
+
+      const activeVersionSlug =
+        window.location.pathname.replace('/ui5-webcomponents-react/', '').replaceAll('/', '') || 'nightly';
+      const activeVersion = activeVersionSlug.at(0).toUpperCase() + activeVersionSlug.slice(1);
+      return (
+        <>
+          <IconButton
+            active
+            key={TOOL_ID}
+            id={TOOL_ID}
+            title="Version Switch"
+            style={{ order: -1 }}
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            Version: {activeVersion}
+          </IconButton>
+          <ActionSheet
+            placement="Bottom"
+            open={open}
+            opener={TOOL_ID}
+            onClose={() => {
+              setOpen(false);
+            }}
+          >
+            <Button onClick={handleVersionSelect} data-slug={'v2'}>
+              Version 2
+            </Button>
+            <Button onClick={handleVersionSelect} data-slug={'v1'}>
+              Version 1
+            </Button>
+            <Button onClick={handleVersionSelect} data-slug={'nightly'}>
+              🚧 Nightly
+            </Button>
+          </ActionSheet>
+        </>
+      );
+    }
+  });
+});
diff --git a/.storybook/main.ts b/.storybook/main.ts
index e9594230f95..f366011e086 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -6,6 +6,7 @@ import { isChromatic } from './utils';
 const isDevMode = process.env.NODE_ENV === 'development';
 
 const addons = [
+  './addons/version-switch',
   {
     name: '@storybook/addon-essentials',
     options: {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b13e7b8c736..6f3917dbf30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.3...v2.0.0) (2024-08-23)
+
+### Bug Fixes
+
+- add runtime index to global Modal and Style store ([#6248](https://github.com/SAP/ui5-webcomponents-react/issues/6248)) ([8184b4e](https://github.com/SAP/ui5-webcomponents-react/commit/8184b4e98fea38ec1b1ba40a43fb31651bba8ac8))
+- **AnalyticalTable:** ensure loading indicator displays correctly across all browsers ([#6244](https://github.com/SAP/ui5-webcomponents-react/issues/6244)) ([4fb6008](https://github.com/SAP/ui5-webcomponents-react/commit/4fb600806ea9451b20f4c3478cbbd44a10214a13)), closes [#6243](https://github.com/SAP/ui5-webcomponents-react/issues/6243)
+
+### chore
+
+- **charts:** remove MicroBarChart ([#6249](https://github.com/SAP/ui5-webcomponents-react/issues/6249)) ([93439fb](https://github.com/SAP/ui5-webcomponents-react/commit/93439fb97f14db4dbc642014b3735bf3bb7a94f9))
+- remove dedicated SSR build ([#6253](https://github.com/SAP/ui5-webcomponents-react/issues/6253)) ([3f3b465](https://github.com/SAP/ui5-webcomponents-react/commit/3f3b465d7ad86ebf16ff4cb966c45e149235054c))
+
+### Code Refactoring
+
+- **AnalyticalTable:** remove `selectedFlatRows` & add `rowsById` to `onRowSelect` ([#6255](https://github.com/SAP/ui5-webcomponents-react/issues/6255)) ([ee2785c](https://github.com/SAP/ui5-webcomponents-react/commit/ee2785c349a97616c3de173c1731ee1d2b399837))
+
+### Features
+
+- **AnalyticalTable - TypeScript:** improve instance & prop types ([#6256](https://github.com/SAP/ui5-webcomponents-react/issues/6256)) ([796f7c1](https://github.com/SAP/ui5-webcomponents-react/commit/796f7c131d0719c00993fb75228e6766ec2290a8))
+
+### BREAKING CHANGES
+
+- **AnalyticalTable - TypeScript:** The internal table instance types were updated, leading
+  to stricter types, so depending on your implementation, you might
+  encounter ts-errors.
+- the dedicated build for Server Side Rendering in the `ssr` folder has been removed as the UI5 Web Components now natively support being imported in Node.js environments. You can import all components from `@ui5/webcomponents-react`.
+- **AnalyticalTable:** `selectedFlatRows` has been removed from the `detail`
+  object of `onRowSelect`.
+- **charts:** the `MicroBarChart` component as been removed as this is a legacy component which is not covered by design specs anymore.
+
 # [2.0.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2024-08-21)
 
 ### Bug Fixes
diff --git a/README.md b/README.md
index cba3a20892d..aa92e00f0c5 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,10 @@ To consume `ui5-webcomponents-react`, you need to install the npm modules and re
 npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
 ```
 
+## Ongoing Support for Version 1.x
+
+We will continue to support version 1.x until the end of the year, focusing on bug fixes to ensure continuity for our existing users.
+
 <!-- *********************************************************************** -->
 
 ## Getting Started
diff --git a/docs/Guidelines.md b/docs/Guidelines.md
index d6c59ef44b6..f7f23a46745 100644
--- a/docs/Guidelines.md
+++ b/docs/Guidelines.md
@@ -3,11 +3,11 @@
 ## Requirements
 
 - [Yarn](https://yarnpkg.com)
-- [Node.js](https://nodejs.org/) (**version 14 or higher** ⚠️)
+- [Node.js](https://nodejs.org/) (**[LTS](https://github.com/nodejs/release?tab=readme-ov-file#release-schedule) version** ⚠️)
 
 ## Setup your local development environment
 
-Please make sure you have installed `node` 14 or higher (check by running `node -v`) and yarn v1 (check by running `yarn -v`).
+Please make sure you have installed a [LTS](https://github.com/nodejs/release?tab=readme-ov-file#release-schedule) `node` version (check by running `node -v`) and yarn v1 (check by running `yarn -v`).
 
 First, you need to clone the git repository by running
 
@@ -22,7 +22,7 @@ Then, go into that cloned directory and run `yarn install`. At this point, you a
   This starts the local storybook, so you can check if your components are rendered correctly. _If the storybook doesn't open automatically after executing the command, you can use this link: http://localhost:6006/_
 - `yarn test` <br />
   This command is running all tests in the project.
-- `yarn test:cypress:open` <br />
+- `yarn test:open` <br />
   This command is opening all cypress tests in Chrome.
 - `yarn build` <br />
   This command executes the full build of the project.
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 99eb596e843..7009d890a1c 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -17,6 +17,13 @@ or the [changelog](?path=/docs/change-log--page)._
 
 <TableOfContent headingSelector="h2, h3" />
 
+## UI5 Web Components Migration Guide
+
+The breaking changes listed here only affect our codebase. Changes related solely to the underlying web component are **not** tracked here.
+For a complete list of breaking changes in UI5 Web Components, please refer to their [Migration Guide](https://sap.github.io/ui5-webcomponents/docs/migration-guides/to-version-2/).
+
+_**Note:** Our `codemod` covers changes from ui5-webcomponents as well._
+
 ## Codemod
 
 To make the migration to UI5 Web Components (for React) v2 easier,
@@ -184,6 +191,7 @@ You can find a more detailed documentation [here](?path=/docs/knowledge-base-com
 - `TableGroupRow` has been removed.
 - `NotificationAction` has been removed. You can use the `Menu` component instead.
 - `SelectMenu` and `SelectMenuOption` have been removed. The `Select` and `Option` now allow custom content.
+- `MicroBarChart` has been removed (from `@ui5/webcomponents-react-charts`) as it is not covered by design specs anymore.
 
 ## Renamed Components
 
@@ -530,15 +538,36 @@ function MyComponent() {
 
 ### AnalyticalTable
 
+**TypeScript Changes:**
+
+The internal table instance types were updated, leading to stricter types, so depending on your implementation, you might encounter ts-errors.
+
 **Renamed or Changed Props:**
 
 - `alwaysShowSubComponent` has been removed, please use `subComponentsBehavior` with `AnalyticalTableSubComponentsBehavior.Visibe` instead.
-- The default value of `sortable` (`true`) has been removed. To allow sorting in your table please set `sorting` to `true` yourself.
+- The default value of `sortable` (`true`) has been removed. To allow sorting in your table please set `sortable` to `true` yourself.
 
 **Removed Props:**
 
 - `portalContainer` has been removed as it's no longer needed due to the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) used in the `Popover` ui5 web component.
 
+**Changed Events:**
+
+- `onRowSelect`: Since calculating `selectedFlatRows` was very costly, it has been removed from the `detail` event object. If you still want to use it, you can calculate it yourself:
+
+```js
+const handleOnRowSelect = (event) => {
+  const { selectedRowIds, rowsById } = event.detail;
+  const selectedFlatRows = Object.keys(selectedRowIds).reduce((acc, key) => {
+    if (selectedRowIds[key]) {
+      acc.push(rowsById[key]);
+    }
+    return acc;
+  }, []);
+  console.log(selectedFlatRows);
+};
+```
+
 **Renamed Enums:**
 
 Names of the following enums have changed:
@@ -1166,17 +1195,17 @@ The prop `titleText` is now required.
 
 For better alignment with the UI5 Web Components the `active` prop has been renamed to `interactive`.
 
-### ThemeProvider
-
-The prop `withoutModalsProvider` has been removed.
-In order to provide a place for the `Modals` helper to mount the popovers, you have to render the new `Modals` component in your application tree.
-
 ### SelectDialog
 
 - `mode` has been renamed to `selectionMode`
 - `onAfterClose` has been renamed to `onClose`
 - `onAfterOpen` has been renamed to `onOpen`
 
+### ThemeProvider
+
+The prop `withoutModalsProvider` has been removed.
+In order to provide a place for the `Modals` helper to mount the popovers, you have to render the new `Modals` component in your application tree.
+
 ### VariantManagement
 
 The `portalContainer` prop has been removed as it is no longer needed.
diff --git a/docs/Welcome.mdx b/docs/Welcome.mdx
index 055b4c92488..13aaf4cd6f6 100644
--- a/docs/Welcome.mdx
+++ b/docs/Welcome.mdx
@@ -29,6 +29,10 @@ In addition to that, UI5 Web Components for React is providing complex component
 - [Node.js](https://nodejs.org/) (**LTS version**)
 - If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.
 
+## Ongoing Support for Version 1.x
+
+We will continue to support version 1.x until the end of the year, focusing on bug fixes to ensure continuity for our existing users.
+
 ## Getting Started
 
 ### Tutorial
diff --git a/docs/knowledge-base/Public-Utils.mdx b/docs/knowledge-base/Public-Utils.mdx
index 540bb048574..7fe3822e975 100644
--- a/docs/knowledge-base/Public-Utils.mdx
+++ b/docs/knowledge-base/Public-Utils.mdx
@@ -75,9 +75,22 @@ The `Device` allows you to detect information about the environment where your a
 
 <Source code={`import { ThemingParameters } from '@ui5/webcomponents-react-base';`} />
 
-By using our `ThemingParameters`, you can define the look and feel of your application without the need to hard-code any
-colors. You can e.g. set `ThemingParameters.sapBackgroundColor` as a `background-color` and you'll always get the correct
-background color for your current theme.
+By using the global `--sap...` CSS variables, you can define the look and feel of your application without the need to hard-code any
+colors. The `ThemingParameters` is an JS object containing all available CSS variables mapped to their name.
+
+Example:
+
+```jsx
+<div style={{ background: ThemingParameters.sapBackgroundColor }} />
+```
+
+Is equivalent to:
+
+```jsx
+<div style={{ background: 'var(--sapBackgroundColor)' }} />
+```
+
+**Note:** We don't recommend excessive use of inline-style!
 
 <ThemeableCSSVars />
 
diff --git a/lerna.json b/lerna.json
index ba68f4c7c8d..9755e248c34 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "npmClient": "yarn",
   "command": {
     "version": {
diff --git a/package.json b/package.json
index 25453f309b8..f863afba94a 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,12 @@
     "start:watcher": "lerna run watch:css",
     "start:storybook": "storybook dev -p 6006",
     "setup": "lerna run build:i18n && lerna run build:css && lerna run build:css-bundle && rimraf node_modules/@types/mocha",
-    "build": "yarn setup && tsc --build tsconfig.build.json && lerna run build:client && lerna run build:wrapper && lerna run build:ssr",
-    "build:storybook": "lerna run build:i18n && yarn create-cypress-commands-docs && storybook build -o .out",
+    "build": "yarn setup && tsc --build tsconfig.build.json && lerna run build:client && lerna run build:wrapper",
+    "build:storybook": "yarn build && yarn create-cypress-commands-docs && storybook build -o .out",
     "build:storybook-sitemap": "node ./scripts/create-storybook-sitemap.js --directory .out",
     "test:prepare": "rimraf temp && lerna run build",
-    "test:cypress": "cypress run --component --browser chrome",
-    "test:cypress:open": "CYPRESS_COVERAGE=false cypress open --component --browser chrome",
-    "test": "yarn test:prepare && yarn test:cypress",
+    "test:open": "CYPRESS_COVERAGE=false cypress open --component --browser chrome",
+    "test": "yarn test:prepare && cypress run --component --browser chrome",
     "clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out && lerna run clean",
     "clean:remove-modules": "yarn clean && rimraf node_modules",
     "prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json,md}\"",
@@ -44,8 +43,8 @@
     "@ui5/webcomponents-compat": "2.1.2",
     "@ui5/webcomponents-fiori": "2.1.2",
     "@ui5/webcomponents-icons": "2.1.2",
-    "react": "19.0.0-rc-f38c22b244-20240704",
-    "react-dom": "19.0.0-rc-f38c22b244-20240704",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "tocbot": "4.29.0"
   },
@@ -60,8 +59,8 @@
     "@testing-library/cypress": "^10.0.0",
     "@types/jscodeshift": "^0.11.11",
     "@types/node": "^20.0.0",
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.6",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
@@ -111,8 +110,6 @@
     ]
   },
   "resolutions": {
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
     "tocbot": "4.29.0",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0"
   },
diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md
index a01100b39ba..12478ce6b14 100644
--- a/packages/base/CHANGELOG.md
+++ b/packages/base/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.3...v2.0.0) (2024-08-23)
+
+### Bug Fixes
+
+- add runtime index to global Modal and Style store ([#6248](https://github.com/SAP/ui5-webcomponents-react/issues/6248)) ([8184b4e](https://github.com/SAP/ui5-webcomponents-react/commit/8184b4e98fea38ec1b1ba40a43fb31651bba8ac8))
+
 # [2.0.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2024-08-21)
 
 ### Features
diff --git a/packages/base/package.json b/packages/base/package.json
index 8f869c20c48..62ceb069e7d 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react-base",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "description": "Base for ui5-webcomponents-react",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/base/src/stores/I18nStore.ts b/packages/base/src/stores/I18nStore.ts
index 7f8e9a8e26f..8253a447054 100644
--- a/packages/base/src/stores/I18nStore.ts
+++ b/packages/base/src/stores/I18nStore.ts
@@ -1,14 +1,16 @@
 import type I18nBundle from '@ui5/webcomponents-base/dist/i18nBundle.js';
 import { getI18nBundle } from '@ui5/webcomponents-base/dist/i18nBundle.js';
 
+globalThis['@ui5/webcomponents-react'] ??= {};
+const STORE_LOCATION = globalThis['@ui5/webcomponents-react'];
 const STORE_SYMBOL_LISTENERS = Symbol.for('@ui5/webcomponents-react/I18nStore/Listeners');
 const STORE_SYMBOL = Symbol.for('@ui5/webcomponents-react/I18nStore');
 
 const initialStore: Record<string, I18nBundle> = {};
 
 function getListeners(): Array<() => void> {
-  globalThis[STORE_SYMBOL_LISTENERS] ??= [];
-  return globalThis[STORE_SYMBOL_LISTENERS];
+  STORE_LOCATION[STORE_SYMBOL_LISTENERS] ??= [];
+  return STORE_LOCATION[STORE_SYMBOL_LISTENERS];
 }
 
 function emitChange() {
@@ -18,15 +20,15 @@ function emitChange() {
 }
 
 function getSnapshot(): Record<string, I18nBundle> {
-  globalThis[STORE_SYMBOL] ??= initialStore;
-  return globalThis[STORE_SYMBOL];
+  STORE_LOCATION[STORE_SYMBOL] ??= initialStore;
+  return STORE_LOCATION[STORE_SYMBOL];
 }
 
 function subscribe(listener: () => void) {
   const listeners = getListeners();
-  globalThis[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
+  STORE_LOCATION[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
   return () => {
-    globalThis[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
+    STORE_LOCATION[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
   };
 }
 
@@ -40,8 +42,8 @@ export const I18nStore = {
     const bundles = getSnapshot();
     if (!bundles.hasOwnProperty(bundleName)) {
       void getI18nBundle(bundleName).then((bundle) => {
-        globalThis[STORE_SYMBOL] = {
-          ...globalThis[STORE_SYMBOL],
+        STORE_LOCATION[STORE_SYMBOL] = {
+          ...STORE_LOCATION[STORE_SYMBOL],
           [bundleName]: bundle
         };
         emitChange();
@@ -52,7 +54,7 @@ export const I18nStore = {
     const bundles = getSnapshot();
     const newBundles = await Promise.all(Object.keys(bundles).map((bundleName) => getI18nBundle(bundleName)));
 
-    globalThis[STORE_SYMBOL] = newBundles.reduce(
+    STORE_LOCATION[STORE_SYMBOL] = newBundles.reduce(
       (acc, bundle) => ({
         ...acc,
         [bundle.packageName]: bundle
diff --git a/packages/base/src/stores/StyleStore.ts b/packages/base/src/stores/StyleStore.ts
index 7567c2be422..7f302dc5c10 100644
--- a/packages/base/src/stores/StyleStore.ts
+++ b/packages/base/src/stores/StyleStore.ts
@@ -1,5 +1,15 @@
-const STORE_SYMBOL_LISTENERS = Symbol.for('@ui5/webcomponents-react/StyleStore/Listeners');
-const STORE_SYMBOL = Symbol.for('@ui5/webcomponents-react/StyleStore');
+import { getCurrentRuntimeIndex } from '@ui5/webcomponents-base/dist/Runtimes.js';
+
+globalThis['@ui5/webcomponents-react'] ??= {};
+const STORE_LOCATION = globalThis['@ui5/webcomponents-react'];
+
+function getStyleStoreListenersSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/StyleStore-${getCurrentRuntimeIndex()}/Listeners`);
+}
+
+function getStyleStoreSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/StyleStore-${getCurrentRuntimeIndex()}`);
+}
 
 interface IStyleStore {
   staticCssInjected: boolean;
@@ -12,8 +22,8 @@ const initialStore: IStyleStore = {
 };
 
 function getListeners(): Array<() => void> {
-  globalThis[STORE_SYMBOL_LISTENERS] ??= [];
-  return globalThis[STORE_SYMBOL_LISTENERS];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] ??= [];
+  return STORE_LOCATION[getStyleStoreListenersSymbol()];
 }
 
 function emitChange() {
@@ -23,15 +33,15 @@ function emitChange() {
 }
 
 function getSnapshot(): IStyleStore {
-  globalThis[STORE_SYMBOL] ??= initialStore;
-  return globalThis[STORE_SYMBOL];
+  STORE_LOCATION[getStyleStoreSymbol()] ??= initialStore;
+  return STORE_LOCATION[getStyleStoreSymbol()];
 }
 
 function subscribe(listener: () => void) {
   const listeners = getListeners();
-  globalThis[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] = [...listeners, listener];
   return () => {
-    globalThis[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
+    STORE_LOCATION[getStyleStoreListenersSymbol()] = listeners.filter((l) => l !== listener);
   };
 }
 
@@ -43,7 +53,7 @@ export const StyleStore = {
   },
   setStaticCssInjected: (staticCssInjected: boolean) => {
     const curr = getSnapshot();
-    globalThis[STORE_SYMBOL] = {
+    STORE_LOCATION[getStyleStoreSymbol()] = {
       ...curr,
       staticCssInjected
     };
diff --git a/packages/charts/CHANGELOG.md b/packages/charts/CHANGELOG.md
index 861331b4fbd..f0d204659e1 100644
--- a/packages/charts/CHANGELOG.md
+++ b/packages/charts/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.3...v2.0.0) (2024-08-23)
+
+### chore
+
+- **charts:** remove MicroBarChart ([#6249](https://github.com/SAP/ui5-webcomponents-react/issues/6249)) ([93439fb](https://github.com/SAP/ui5-webcomponents-react/commit/93439fb97f14db4dbc642014b3735bf3bb7a94f9))
+
+### BREAKING CHANGES
+
+- **charts:** the `MicroBarChart` component as been removed as this is a legacy component which is not covered by design specs anymore.
+
 # [2.0.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2024-08-21)
 
 ### Features
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 923decefb89..452df506049 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react-charts",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "description": "Charts for ui5-webcomponents-react",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index a4e427e8faf..06076a948b5 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -236,7 +236,8 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <BarChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
index afd965a0588..2ed7cfc71c5 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -281,7 +281,8 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ComposedChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 7f772cea0c0..90b2314ba73 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -235,7 +235,8 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ColumnChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index f568f481bcd..a8323caee5c 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -286,7 +286,8 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ComposedChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 20483364799..3a80ed20430 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -224,7 +224,8 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <LineChartLib
         syncId={syncId}
         margin={marginChart}
diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.cy.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.cy.tsx
deleted file mode 100644
index 03c115717b9..00000000000
--- a/packages/charts/src/components/MicroBarChart/MicroBarChart.cy.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { MicroBarChart } from './MicroBarChart.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
-
-const text1 = 'January';
-const text2 = 'February';
-const text3 = 'March';
-
-const dataset = [
-  { value: 10, label: text1 },
-  { value: 100, label: text2 },
-  { value: 70, label: text3 }
-];
-
-const dimension = {
-  accessor: 'label'
-};
-
-const measure = {
-  accessor: 'value'
-};
-
-describe('MicroBarChart', () => {
-  it('Basic', () => {
-    cy.mount(<MicroBarChart dataset={dataset} dimension={dimension} measure={measure} />);
-    cy.get('.recharts-responsive-container').should('be.visible');
-    cy.get('[data-component-name="MicroBarChartValueBar"]').should('have.length', 3);
-
-    cy.findByText(text1).should('be.visible');
-    cy.findByText(text2).should('be.visible');
-    cy.findByText(text3).should('be.visible');
-  });
-
-  it('Dimension Formatter', () => {
-    cy.mount(
-      <MicroBarChart
-        dataset={dataset}
-        dimension={{ ...dimension, formatter: (label) => `${label} - formatted` }}
-        measure={measure}
-      />
-    );
-    cy.get('.recharts-responsive-container').should('be.visible');
-    cy.get('[data-component-name="MicroBarChartValueBar"]').should('have.length', 3);
-
-    cy.findByText(`${text1} - formatted`).should('be.visible');
-    cy.findByText(`${text2} - formatted`).should('be.visible');
-    cy.findByText(`${text3} - formatted`).should('be.visible');
-  });
-
-  it('click handlers', () => {
-    const onClick = cy.spy().as('onClick');
-    cy.mount(<MicroBarChart dataset={dataset} dimension={dimension} measure={measure} onDataPointClick={onClick} />);
-
-    cy.findByText('January').click();
-    cy.get('@onClick')
-      .should('have.been.calledOnce')
-      .and(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: Cypress.sinon.match({
-            payload: dataset[0]
-          })
-        })
-      );
-  });
-
-  it('Loading Placeholder', () => {
-    cy.mount(<MicroBarChart dataset={[]} dimension={dimension} measure={measure} />);
-    cy.get('.recharts-bar').should('not.exist');
-    cy.contains('Loading...').should('exist');
-  });
-
-  cypressPassThroughTestsFactory(MicroBarChart, { dimension, measure });
-});
diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.mdx b/packages/charts/src/components/MicroBarChart/MicroBarChart.mdx
deleted file mode 100644
index 5bf989a1056..00000000000
--- a/packages/charts/src/components/MicroBarChart/MicroBarChart.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
-import { Canvas, Meta } from '@storybook/addon-docs';
-import * as ComponentStories from './MicroBarChart.stories';
-
-<Meta of={ComponentStories} />
-
-<DocsHeader />
-
-<br />
-
-## Example
-
-<Canvas of={ComponentStories.Default} />
-
-## Properties
-
-<ControlsWithNote of={ComponentStories.Default} />
-
-<br />
-<br />
-
-## More Examples
-
-### With Formatter
-
-<Canvas of={ComponentStories.WithFormatter} />
-
-### Loading Placeholder
-
-<Canvas of={ComponentStories.LoadingPlaceholder} />
-
-<Footer />
diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css b/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css
deleted file mode 100644
index abaf2cd6efb..00000000000
--- a/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  width: 100%;
-  height: 100%;
-  justify-content: space-around;
-}
-
-.barContainer {
-  cursor: auto;
-}
-
-.barContainerActive {
-  cursor: pointer;
-
-  &:active {
-    opacity: 0.3 !important;
-  }
-}
-
-.labelContainer {
-  display: flex;
-  justify-content: space-between;
-}
-
-.valueContainer {
-  display: flex;
-  background-color: var(--sapContent_Placeholderloading_Background);
-}
-
-.valueBar {
-  height: 100%;
-}
-
-.label {
-  color: var(--sapContent_LabelColor);
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: var(--sapFontSmallSize);
-  max-width: 70%;
-}
-
-.text {
-  padding-inline-start: 6px;
-  display: inline-block;
-  overflow: hidden;
-  font-size: var(--sapFontSmallSize);
-  box-sizing: border-box;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: var(--sapTextColor);
-  text-align: right;
-}
diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.stories.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.stories.tsx
deleted file mode 100644
index b8e7816318d..00000000000
--- a/packages/charts/src/components/MicroBarChart/MicroBarChart.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MicroBarChart } from './MicroBarChart.js';
-
-const meta = {
-  title: 'MicroBarChart',
-  component: MicroBarChart,
-  args: {
-    dimension: {
-      accessor: 'name'
-    },
-    measure: { accessor: 'data' },
-    dataset: [
-      {
-        name: 'January',
-        data: 100
-      },
-      {
-        name: 'February',
-        data: 300
-      },
-      {
-        name: 'March',
-        data: 530
-      },
-      {
-        name: 'April',
-        data: 200
-      }
-    ]
-  },
-  argTypes: {
-    dataset: { control: { disable: true } }
-  }
-} satisfies Meta<typeof MicroBarChart>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithFormatter: Story = {
-  args: {
-    measure: {
-      accessor: 'data',
-      colors: ['#f0ab00', 'var(--sapHighlightColor)'],
-      formatter: (d) => (d > 200 ? 'over 200' : 'lower'),
-      width: 16
-    }
-  }
-};
-
-export const LoadingPlaceholder: Story = {
-  args: {
-    dataset: []
-  }
-};
diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
deleted file mode 100644
index 270347af4f3..00000000000
--- a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-'use client';
-
-import { enrichEventWithDetails, ThemingParameters, useStylesheet } from '@ui5/webcomponents-react-base';
-import { clsx } from 'clsx';
-import type { CSSProperties } from 'react';
-import { createElement, forwardRef, useCallback, useMemo } from 'react';
-import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
-import type { IChartDimension } from '../../interfaces/IChartDimension.js';
-import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
-import { ChartContainer } from '../../internal/ChartContainer.js';
-import { defaultFormatter } from '../../internal/defaults.js';
-import { BarChartPlaceholder } from '../BarChart/Placeholder.js';
-import { classNames, styleData } from './MicroBarChart.module.css.js';
-
-interface MeasureConfig extends Omit<IChartMeasure, 'color'> {
-  /**
-   * array of any valid CSS Color or CSS Variable. Defaults to the `sapChart_OrderedColor_` colors
-   */
-  colors?: CSSProperties['color'][];
-  /**
-   * Bar Opacity
-   * @default 1
-   */
-  opacity?: number;
-  /**
-   * Bar Width
-   * @default auto
-   */
-  width?: number;
-}
-
-export interface MicroBarChartProps
-  extends Omit<
-    IChartBaseProps,
-    | 'noLegend'
-    | 'onLegendClick'
-    | 'noAnimation'
-    | 'chartConfig'
-    | 'children'
-    | 'tooltipConfig'
-    | 'onClick'
-    | 'measures'
-    | 'dimensions'
-  > {
-  /**
-   * A object which contains the configuration of the dimension.
-   *
-   * **Required Properties**
-   * - `accessor`: string containing the path to the dataset key the dimension should display. Supports object structures by using <code>'parent.child'</code>.
-   *   Can also be a getter.
-   *
-   * **Optional Properties**
-   * - `formatter`: function will be called for each data label and allows you to format it according to your needs
-   *
-   */
-  dimension: IChartDimension;
-  /**
-   * An array of config objects. Each object is defining one bar in the chart.
-   *
-   * **Required properties**
-   * - `accessor`: string containing the path to the dataset key this bar should display. Supports object structures by using <code>'parent.child'</code>.
-   * Can also be a getter.
-   *
-   * **Optional properties**
-   *
-   * - `formatter`: function will be called for each data label and allows you to format it according to your needs
-   * - `colors`: array of any valid CSS Color or CSS Variable. Defaults to the `sapChart_OrderedColor_` colors
-   * - `width`: bar width in pixel, defaults to `4`
-   * - `opacity`: bar opacity, defaults to `1`
-   * - `hideDataLabel`: flag whether the data labels should be hidden in the chart for this column.
-   * - `DataLabel`: a custom component to be used for the data label
-   */
-  measure: MeasureConfig;
-  /**
-   * An optional number for the maxValue of the valueBar.
-   * Default is the highest number of the corresponding accessor in the dataset.
-   */
-  maxValue?: number;
-}
-
-const resolveColor = (index: number, color = null) => {
-  if (color) {
-    return ThemingParameters[color] ?? color;
-  }
-  return ThemingParameters[`sapChart_Sequence_${(index % 11) + 1}`];
-};
-
-/**
- * The `MicroBarChart` compares different values of the same category to each other by displaying them in a compact way.
- */
-const MicroBarChart = forwardRef<HTMLDivElement, MicroBarChartProps>((props, ref) => {
-  const { loading, loadingDelay, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props;
-
-  useStylesheet(styleData, MicroBarChart.displayName);
-
-  const dimension = useMemo<IChartDimension>(
-    () => ({
-      formatter: defaultFormatter,
-      ...props.dimension
-    }),
-    [props.dimension]
-  );
-  const measure: MeasureConfig = useMemo(
-    () => ({
-      formatter: defaultFormatter,
-      ...props.measure
-    }),
-    [props.measure]
-  );
-
-  const maxValue = useMemo(() => {
-    if (dataset) {
-      const maxDatasetValue = Math.max(...dataset?.map((item) => getValueByDataKey(item, measure.accessor)));
-      return props.maxValue ?? maxDatasetValue;
-    }
-    return 0;
-  }, [dataset, measure, props.maxValue]);
-
-  const barHeight = measure?.width ? `${measure.width}px` : '4px';
-
-  const onBarClick = useCallback(
-    (item, index) => (e) => {
-      if (typeof onDataPointClick === 'function') {
-        onDataPointClick(
-          enrichEventWithDetails(e, {
-            dataKey: measure.accessor,
-            value: getValueByDataKey(item, measure.accessor),
-            payload: item,
-            dataIndex: index
-          })
-        );
-      }
-    },
-    [measure.accessor, onDataPointClick]
-  );
-  const barContainerClasses = clsx(classNames.barContainer, onDataPointClick && classNames.barContainerActive);
-  const { maxValue: _0, dimension: _1, measure: _2, ...propsWithoutOmitted } = rest;
-  return (
-    <ChartContainer
-      dataset={dataset}
-      loading={loading}
-      loadingDelay={loadingDelay}
-      Placeholder={ChartPlaceholder ?? BarChartPlaceholder}
-      ref={ref}
-      style={style}
-      className={className}
-      slot={slot}
-      resizeDebounce={250}
-      {...propsWithoutOmitted}
-    >
-      <div className={classNames.container}>
-        {dataset?.map((item, index) => {
-          const dimensionValue = getValueByDataKey(item, dimension.accessor);
-          const measureValue = getValueByDataKey(item, measure.accessor);
-          const formattedDimension = dimension.formatter(dimensionValue);
-          let formattedMeasure: any = '';
-          if (!measure.hideDataLabel) {
-            if (measure.DataLabel) {
-              formattedMeasure = createElement(measure.DataLabel, {
-                value: measureValue,
-                config: measure,
-                formattedValue: measure.formatter(measureValue)
-              });
-            } else {
-              formattedMeasure = measure.formatter(measureValue);
-            }
-          }
-          return (
-            <div key={dimensionValue} className={barContainerClasses} onClick={onBarClick(item, index)}>
-              <div className={classNames.labelContainer}>
-                <span className={classNames.label} title={formattedDimension}>
-                  {formattedDimension}
-                </span>
-                <span className={classNames.text} title={formattedMeasure}>
-                  {measure.hideDataLabel ? '' : formattedMeasure}
-                </span>
-              </div>
-              <div
-                className={classNames.valueContainer}
-                style={{
-                  opacity: measure?.opacity ?? 1,
-                  height: barHeight
-                }}
-              >
-                <div
-                  className={classNames.valueBar}
-                  data-component-name="MicroBarChartValueBar"
-                  style={{
-                    width: `${(measureValue / maxValue) * 100}%`,
-                    backgroundColor: resolveColor(index, measure?.colors?.[index])
-                  }}
-                />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </ChartContainer>
-  );
-});
-
-MicroBarChart.displayName = 'MicroBarChart';
-
-export { MicroBarChart };
diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
index e34281bc1ac..5164c9e2cb6 100644
--- a/packages/charts/src/components/PieChart/PieChart.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -276,7 +276,8 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <PieChartLib
         onClick={onClickInternal}
         margin={chartConfig.margin}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 73863551ce0..d007e5e9c77 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -175,7 +175,8 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <RadarChartLib
         onClick={onClickInternal}
         data={dataset}
diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx
index ccf8bc04dd0..16196433c88 100644
--- a/packages/charts/src/components/RadialChart/RadialChart.tsx
+++ b/packages/charts/src/components/RadialChart/RadialChart.tsx
@@ -141,7 +141,8 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
       style={style}
       {...rest}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <RadialBarChart
         onClick={onClickInternal}
         innerRadius="90%"
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
index 66dd0b10e9f..652d08a3eec 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.tsx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
@@ -226,7 +226,8 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ScatterChartLib
         onClick={onClickInternal}
         margin={marginChart}
diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
index bc0a185c767..51b721b9454 100644
--- a/packages/charts/src/index.ts
+++ b/packages/charts/src/index.ts
@@ -12,7 +12,6 @@ import { ComposedChartPlaceholder } from './components/ComposedChart/Placeholder
 import { DonutChart } from './components/DonutChart/DonutChart.js';
 import { LineChart } from './components/LineChart/LineChart.js';
 import { LineChartPlaceholder } from './components/LineChart/Placeholder.js';
-import { MicroBarChart } from './components/MicroBarChart/MicroBarChart.js';
 import { PieChart } from './components/PieChart/PieChart.js';
 import { PieChartPlaceholder } from './components/PieChart/Placeholder.js';
 import { RadarChart } from './components/RadarChart/RadarChart.js';
@@ -31,7 +30,6 @@ export {
   ComposedChart,
   DonutChart,
   LineChart,
-  MicroBarChart,
   PieChart,
   RadarChart,
   RadialChart,
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 50ccc2bf83a..e5f307a49f9 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.3...v2.0.0) (2024-08-23)
+
+### chore
+
+- remove dedicated SSR build ([#6253](https://github.com/SAP/ui5-webcomponents-react/issues/6253)) ([3f3b465](https://github.com/SAP/ui5-webcomponents-react/commit/3f3b465d7ad86ebf16ff4cb966c45e149235054c))
+
+### BREAKING CHANGES
+
+- the dedicated build for Server Side Rendering in the `ssr` folder has been removed as the UI5 Web Components now natively support being imported in Node.js environments. You can import all components from `@ui5/webcomponents-react`.
+
 # [2.0.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2024-08-21)
 
 ### Code Refactoring
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 0f423de21e3..bc9d084ebd3 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -3,7 +3,7 @@
   "description": "CLI for UI5 Web Components for React",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
diff --git a/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts b/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts
index be7a76f8840..4583f9582b2 100644
--- a/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts
+++ b/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts
@@ -7,7 +7,6 @@ import { WebComponentWrapper } from './WebComponentWrapper.js';
 export class ComponentRenderer extends AbstractRenderer {
   public phase = RenderingPhase.component;
 
-  private dynamicImportPath: string | undefined;
   private attributes: CEM.ClassField[] = [];
   private slots: CEM.Slot[] = [];
   private events: CEM.Event[] = [];
@@ -16,11 +15,6 @@ export class ComponentRenderer extends AbstractRenderer {
   private isAbstract: boolean = false;
   private since: string | undefined;
 
-  setDynamicImportPath(value: string) {
-    this.dynamicImportPath = value;
-    return this;
-  }
-
   setAttributes(attrs: CEM.ClassField[]) {
     this.attributes.push(...attrs);
     return this;
@@ -98,8 +92,7 @@ export class ComponentRenderer extends AbstractRenderer {
         [${this.events
           ?.map((event) => `'${event.name}'`)
           .toSorted((a, b) => a.localeCompare(b))
-          .join(', ')}],
-        () => import('${this.dynamicImportPath}') 
+          .join(', ')}]
     );
     
     ${context.componentName}.displayName = '${context.componentName}';
diff --git a/packages/cli/src/scripts/create-wrappers/main.ts b/packages/cli/src/scripts/create-wrappers/main.ts
index b867a8776dd..0b217f702a6 100644
--- a/packages/cli/src/scripts/create-wrappers/main.ts
+++ b/packages/cli/src/scripts/create-wrappers/main.ts
@@ -63,7 +63,6 @@ export default async function createWrappers(packageName: string, outDir: string
         .setAttributes(attributes)
         .setSlots(declaration.slots ?? [])
         .setEvents(declaration.events ?? [])
-        .setDynamicImportPath(webComponentImport)
         .setNote(options.additionalComponentNote ?? '')
         .setIsAbstract(declaration._ui5abstract ?? false)
         .setSince(declaration._ui5since)
diff --git a/packages/compat/CHANGELOG.md b/packages/compat/CHANGELOG.md
index 619db0c8196..d1f4df29856 100644
--- a/packages/compat/CHANGELOG.md
+++ b/packages/compat/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.3...v2.0.0) (2024-08-23)
+
+### chore
+
+- remove dedicated SSR build ([#6253](https://github.com/SAP/ui5-webcomponents-react/issues/6253)) ([3f3b465](https://github.com/SAP/ui5-webcomponents-react/commit/3f3b465d7ad86ebf16ff4cb966c45e149235054c))
+
+### BREAKING CHANGES
+
+- the dedicated build for Server Side Rendering in the `ssr` folder has been removed as the UI5 Web Components now natively support being imported in Node.js environments. You can import all components from `@ui5/webcomponents-react`.
+
 # [2.0.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2024-08-21)
 
 ### Features
diff --git a/packages/compat/package.json b/packages/compat/package.json
index 6ab26d777e8..d6b853c4ea7 100644
--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react-compat",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "description": "React Wrapper for UI5 Web Components Compat package",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/compat/src/components/Loader/Loader.cy.tsx b/packages/compat/src/components/Loader/Loader.cy.tsx
index bc24a99d998..3cc3af470ce 100644
--- a/packages/compat/src/components/Loader/Loader.cy.tsx
+++ b/packages/compat/src/components/Loader/Loader.cy.tsx
@@ -1,4 +1,4 @@
-import { LoaderType } from '../../enums/index.js';
+import { LoaderType } from '../../enums/LoaderType.js';
 import { Loader } from './index.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
diff --git a/packages/compat/src/components/Table/index.tsx b/packages/compat/src/components/Table/index.tsx
index 1f7e0b815fc..4afc55872b9 100644
--- a/packages/compat/src/components/Table/index.tsx
+++ b/packages/compat/src/components/Table/index.tsx
@@ -265,8 +265,7 @@ const Table = withWebComponent<TablePropTypes, TableDomRef>(
   ],
   ['busy', 'hideNoData', 'stickyColumnHeader'],
   ['columns'],
-  ['load-more', 'popin-change', 'row-click', 'selection-change'],
-  () => import('@ui5/webcomponents-compat/dist/Table.js')
+  ['load-more', 'popin-change', 'row-click', 'selection-change']
 );
 
 Table.displayName = 'Table';
diff --git a/packages/compat/src/components/TableCell/index.tsx b/packages/compat/src/components/TableCell/index.tsx
index bd93ea534b1..57699d54475 100644
--- a/packages/compat/src/components/TableCell/index.tsx
+++ b/packages/compat/src/components/TableCell/index.tsx
@@ -21,14 +21,7 @@ interface TableCellPropTypes extends TableCellAttributes, Omit<CommonProps, 'chi
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
-const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>(
-  'ui5-table-cell',
-  [],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableCell.js')
-);
+const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>('ui5-table-cell', [], [], [], []);
 
 TableCell.displayName = 'TableCell';
 
diff --git a/packages/compat/src/components/TableColumn/index.tsx b/packages/compat/src/components/TableColumn/index.tsx
index 99d08846650..ba3c2df561f 100644
--- a/packages/compat/src/components/TableColumn/index.tsx
+++ b/packages/compat/src/components/TableColumn/index.tsx
@@ -67,8 +67,7 @@ const TableColumn = withWebComponent<TableColumnPropTypes, TableColumnDomRef>(
   ['minWidth', 'popinDisplay', 'popinText'],
   ['demandPopin'],
   [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableColumn.js')
+  []
 );
 
 TableColumn.displayName = 'TableColumn';
diff --git a/packages/compat/src/components/TableGroupRow/index.tsx b/packages/compat/src/components/TableGroupRow/index.tsx
index e3e5d079145..874f4b8dbb4 100644
--- a/packages/compat/src/components/TableGroupRow/index.tsx
+++ b/packages/compat/src/components/TableGroupRow/index.tsx
@@ -30,8 +30,7 @@ const TableGroupRow = withWebComponent<TableGroupRowPropTypes, TableGroupRowDomR
   [],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableGroupRow.js')
+  []
 );
 
 TableGroupRow.displayName = 'TableGroupRow';
diff --git a/packages/compat/src/components/TableRow/index.tsx b/packages/compat/src/components/TableRow/index.tsx
index 9b9ebd85fd7..831226f5ce3 100644
--- a/packages/compat/src/components/TableRow/index.tsx
+++ b/packages/compat/src/components/TableRow/index.tsx
@@ -56,8 +56,7 @@ const TableRow = withWebComponent<TableRowPropTypes, TableRowDomRef>(
   ['type'],
   ['navigated', 'selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableRow.js')
+  []
 );
 
 TableRow.displayName = 'TableRow';
diff --git a/packages/compat/src/components/Toolbar/OverflowPopover.tsx b/packages/compat/src/components/Toolbar/OverflowPopover.tsx
index 019eff9d66d..2a0bc18f115 100644
--- a/packages/compat/src/components/Toolbar/OverflowPopover.tsx
+++ b/packages/compat/src/components/Toolbar/OverflowPopover.tsx
@@ -9,7 +9,6 @@ import type {
   ToggleButtonPropTypes
 } from '@ui5/webcomponents-react';
 import { Popover, ToggleButton } from '@ui5/webcomponents-react';
-import { useCanRenderPortal } from '@ui5/webcomponents-react/dist/internal/ssr.js';
 import { stopPropagation } from '@ui5/webcomponents-react/dist/internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '@ui5/webcomponents-react/dist/internal/utils.js';
 import { Device, useSyncRef } from '@ui5/webcomponents-react-base';
@@ -110,7 +109,10 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
     }
   };
 
-  const canRenderPortal = useCanRenderPortal();
+  const [canRenderPortal, setCanRenderPortal] = useState(false);
+  useEffect(() => {
+    setCanRenderPortal(true);
+  }, []);
 
   const accessibleRole = (() => {
     if (a11yConfig?.overflowPopover?.contentRole) {
diff --git a/packages/cypress-commands/CHANGELOG.md b/packages/cypress-commands/CHANGELOG.md
index 401069570be..259c651f4b3 100644
--- a/packages/cypress-commands/CHANGELOG.md
+++ b/packages/cypress-commands/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.3...v2.0.0) (2024-08-23)
+
+**Note:** Version bump only for package @ui5/webcomponents-cypress-commands
+
 # [2.0.0-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.0...v2.0.0-rc.1) (2024-07-19)
 
 **Note:** Version bump only for package @ui5/webcomponents-cypress-commands
diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json
index 69c7c05fcdb..fd704bece07 100644
--- a/packages/cypress-commands/package.json
+++ b/packages/cypress-commands/package.json
@@ -3,7 +3,7 @@
   "description": "Cypress Custom Commands and Queries for UI5 Web Components",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md
index 5bb55eeb59a..f4c5263d40a 100644
--- a/packages/main/CHANGELOG.md
+++ b/packages/main/CHANGELOG.md
@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.3...v2.0.0) (2024-08-23)
+
+### Bug Fixes
+
+- add runtime index to global Modal and Style store ([#6248](https://github.com/SAP/ui5-webcomponents-react/issues/6248)) ([8184b4e](https://github.com/SAP/ui5-webcomponents-react/commit/8184b4e98fea38ec1b1ba40a43fb31651bba8ac8))
+- **AnalyticalTable:** ensure loading indicator displays correctly across all browsers ([#6244](https://github.com/SAP/ui5-webcomponents-react/issues/6244)) ([4fb6008](https://github.com/SAP/ui5-webcomponents-react/commit/4fb600806ea9451b20f4c3478cbbd44a10214a13)), closes [#6243](https://github.com/SAP/ui5-webcomponents-react/issues/6243)
+
+### chore
+
+- remove dedicated SSR build ([#6253](https://github.com/SAP/ui5-webcomponents-react/issues/6253)) ([3f3b465](https://github.com/SAP/ui5-webcomponents-react/commit/3f3b465d7ad86ebf16ff4cb966c45e149235054c))
+
+### Code Refactoring
+
+- **AnalyticalTable:** remove `selectedFlatRows` & add `rowsById` to `onRowSelect` ([#6255](https://github.com/SAP/ui5-webcomponents-react/issues/6255)) ([ee2785c](https://github.com/SAP/ui5-webcomponents-react/commit/ee2785c349a97616c3de173c1731ee1d2b399837))
+
+### Features
+
+- **AnalyticalTable - TypeScript:** improve instance & prop types ([#6256](https://github.com/SAP/ui5-webcomponents-react/issues/6256)) ([796f7c1](https://github.com/SAP/ui5-webcomponents-react/commit/796f7c131d0719c00993fb75228e6766ec2290a8))
+
+### BREAKING CHANGES
+
+- **AnalyticalTable - TypeScript:** The internal table instance types were updated, leading
+  to stricter types, so depending on your implementation, you might
+  encounter ts-errors.
+- the dedicated build for Server Side Rendering in the `ssr` folder has been removed as the UI5 Web Components now natively support being imported in Node.js environments. You can import all components from `@ui5/webcomponents-react`.
+- **AnalyticalTable:** `selectedFlatRows` has been removed from the `detail`
+  object of `onRowSelect`.
+
 # [2.0.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2024-08-21)
 
 ### Bug Fixes
diff --git a/packages/main/package.json b/packages/main/package.json
index 7e2b0bb7281..a778f1b1f6c 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "description": "React Wrapper for UI5 Web Components and additional components",
   "type": "module",
   "main": "dist/index.js",
@@ -10,17 +10,13 @@
     ".": {
       "types": "./dist/index.d.ts",
       "browser": "./dist/index.js",
-      "node": "./ssr/index.js",
+      "node": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./wrappers": {
       "types": "./wrappers/index.d.ts",
       "default": "./wrappers/index.js"
     },
-    "./ssr": {
-      "types": "./ssr/index.d.ts",
-      "default": "./ssr/index.js"
-    },
     "./package.json": "./package.json",
     "./styles.css": "./dist/css/index.css",
     "./dist": "./dist/index.js",
@@ -42,10 +38,9 @@
     "./dist/json-imports/*"
   ],
   "scripts": {
-    "clean": "rimraf dist tmp wrappers ssr",
+    "clean": "rimraf dist tmp wrappers",
     "build:i18n": "node scripts/generateI18n.mjs",
     "build:client": "babel src --out-dir dist --extensions .ts,.tsx --env-name client && tsc --project tsconfig.build.json --declarationDir dist",
-    "build:ssr": "babel src --out-dir ssr --extensions .ts,.tsx --env-name ssr && tsc --project tsconfig.build.json --declarationDir ssr",
     "build:wrapper": "babel src --out-dir wrappers --extensions .ts,.tsx --env-name wrapper && tsc --project tsconfig.build.json --declarationDir wrappers",
     "build:css": "postcss --base src --dir dist/css src/**/*.css",
     "build:css-bundle": "node ../../config/merge-css-modules.js",
@@ -87,7 +82,6 @@
   "files": [
     "dist",
     "wrappers",
-    "ssr",
     "CHANGELOG.md",
     "LICENSE",
     "NOTICE.txt",
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index c007a9349a1..4d76a5fab07 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -470,12 +470,18 @@ describe('AnalyticalTable', () => {
             filterable
             columns={columns}
             onRowSelect={(e) => {
-              const { allRowsSelected, isSelected, row, selectedFlatRows, selectedRowIds } = e.detail;
+              const { allRowsSelected, isSelected, row, rowsById, selectedRowIds } = e.detail;
+              const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+                if (selectedRowIds[key]) {
+                  acc.push(rowsById[key]);
+                }
+                return acc;
+              }, []);
               setRelevantPayload({
                 allRowsSelected,
                 isSelected,
                 row: row.id,
-                selectedFlatRows: selectedFlatRows.map((item) => ({
+                selectedFlatRows: selectedRowIdsArrayMapped.map((item) => ({
                   id: item?.id
                 })),
                 selectedRowIds
@@ -582,7 +588,14 @@ describe('AnalyticalTable', () => {
             columns={columns}
             globalFilterValue={globalFilterVal}
             onRowSelect={(e) => {
-              setSelectedFlatRows(e.detail.selectedFlatRows.map((item) => item.id));
+              const { selectedRowIds: _selectedRowIds, rowsById } = e.detail;
+              const selectedRowIdsArrayMapped = Object.keys(_selectedRowIds).reduce((acc, key) => {
+                if (_selectedRowIds[key]) {
+                  acc.push(rowsById[key]);
+                }
+                return acc;
+              }, []);
+              setSelectedFlatRows(selectedRowIdsArrayMapped.map((item) => item.id));
               setSelectedRowIdsCb(e.detail.selectedRowIds);
               setAllRowsSelected(e.detail.allRowsSelected);
               onRowSelect(e);
@@ -591,7 +604,8 @@ describe('AnalyticalTable', () => {
             selectedRowIds={selectedRowIds}
           />
           <p>
-            "event.detail.selectedFlatRows:"<span data-testid="payload">{JSON.stringify(selectedFlatRows)}</span>
+            "selectedFlatRows (state - not part of event):"
+            <span data-testid="payload">{JSON.stringify(selectedFlatRows)}</span>
           </p>
           <p>
             "e.detail.selectedRowIds:"<span data-testid="payloadRowsById">{JSON.stringify(selectedRowIdsCb)}</span>
@@ -610,6 +624,7 @@ describe('AnalyticalTable', () => {
     cy.findByText('Name-1').click();
     cy.findByText('Name-5').click();
     cy.findByText('Name-5').click();
+
     cy.findByTestId('payload').should('have.text', '["0","1"]');
     cy.findByTestId('payloadRowsById').should('have.text', '{"0":true,"1":true}');
     cy.findByTestId('payloadAllRowsSelected').should('have.text', 'false');
@@ -806,12 +821,18 @@ describe('AnalyticalTable', () => {
             columns={columns}
             tableInstance={tableInstance}
             onRowSelect={(e) => {
-              const { allRowsSelected, isSelected, row, selectedFlatRows, selectedRowIds } = e.detail;
+              const { allRowsSelected, isSelected, row, rowsById, selectedRowIds } = e.detail;
+              const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+                if (selectedRowIds[key]) {
+                  acc.push(rowsById[key]);
+                }
+                return acc;
+              }, []);
               setRelevantPayload({
                 allRowsSelected,
                 isSelected,
                 row: row.id,
-                selectedFlatRows: selectedFlatRows.map((item) => ({
+                selectedFlatRows: selectedRowIdsArrayMapped.map((item) => ({
                   id: item?.id
                 })),
                 selectedRowIds
@@ -2398,11 +2419,19 @@ describe('AnalyticalTable', () => {
     const TestComp = () => {
       const [stringifiedPl, setStringifiedPl] = useState('');
       const handleSelect = (e) => {
-        const { allRowsSelected, selectedFlatRows, selectedRowIds } = e.detail;
+        const { allRowsSelected, rowsById, selectedRowIds } = e.detail;
+
+        const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+          if (selectedRowIds[key]) {
+            acc.push(rowsById[key]);
+          }
+          return acc;
+        }, []);
+
         setStringifiedPl(
           JSON.stringify({
             selectedRowIds,
-            selectedFlatRows: selectedFlatRows.map((item) => ({
+            selectedFlatRows: selectedRowIdsArrayMapped.map((item) => ({
               id: item?.id
             })),
             allRowsSelected
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
index 12e2251bd58..7f48b1ff244 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
@@ -41,13 +41,17 @@
   position: relative;
 }
 
+.busyIndicator {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  height: 100%;
+}
+
 .overlay {
   position: absolute;
   z-index: 1;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   background: var(--sapGroup_ContentBackground);
   opacity: 0.8;
 
@@ -158,7 +162,7 @@
   color: var(--sapList_TextColor);
   border-block-end: 1px solid var(--sapList_BorderColor);
   /* needed for vertical virtualization*/
-  margin-bottom: -1px;
+  margin-block-end: -1px;
   box-sizing: border-box;
   display: flex;
 
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
index a5d2d0ff717..d4108b2ed20 100644
--- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
@@ -1,12 +1,13 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
 import { clsx } from 'clsx';
-import type { MutableRefObject, ReactNode } from 'react';
+import type { MutableRefObject } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
 import { AnalyticalTableSubComponentsBehavior } from '../../../enums/index.js';
 import type {
   AnalyticalTablePropTypes,
   DivWithCustomScrollProp,
   ScrollToRefType,
+  TableInstance,
   TriggerScrollState
 } from '../types/index.js';
 import { getSubRowsByString } from '../util/index.js';
@@ -16,12 +17,12 @@ import { RowSubComponent as SubComponent } from './RowSubComponent.js';
 interface VirtualTableBodyProps {
   classes: Record<string, string>;
   prepareRow: (row: unknown) => void;
-  rows: Record<string, any>[];
+  rows: TableInstance['rows'];
   isTreeTable?: AnalyticalTablePropTypes['isTreeTable'];
   internalRowHeight: number;
   alternateRowColor?: AnalyticalTablePropTypes['alternateRowColor'];
   visibleColumns: Record<string, unknown>[];
-  renderRowSubComponent: (row?: Record<string, unknown>) => ReactNode;
+  renderRowSubComponent: AnalyticalTablePropTypes['renderRowSubComponent'];
   popInRowHeight: number;
   isRtl: boolean;
   markNavigatedRow?: AnalyticalTablePropTypes['markNavigatedRow'];
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts b/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts
index e533eefe0c9..9754074d8c4 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts
@@ -1,6 +1,6 @@
 import type { KeyboardEventHandler } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 interface UpdatedCellProptypes {
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
@@ -10,7 +10,7 @@ interface UpdatedCellProptypes {
   role?: string;
 }
 
-const setCellProps = (cellProps, { cell, instance }) => {
+const setCellProps = (cellProps, { cell, instance }: { cell: TableInstance['cell']; instance: TableInstance }) => {
   const { column, row, value } = cell;
   const columnIndex = instance.visibleColumns.findIndex(({ id }) => id === column.id);
   const { alwaysShowSubComponent, renderRowSubComponent, translatableTexts, selectionMode, selectionBehavior } =
@@ -69,7 +69,10 @@ const setCellProps = (cellProps, { cell, instance }) => {
   return [cellProps, updatedCellProps];
 };
 
-const setHeaderProps = (headerProps, { column, instance }) => {
+const setHeaderProps = (
+  headerProps,
+  { column, instance }: { column: TableInstance['column']; instance: TableInstance }
+) => {
   const { translatableTexts } = instance.webComponentsReactProperties;
 
   if (!column) {
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
index db5ebae8b85..ac977a806c4 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx
@@ -1,9 +1,9 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
 
-function setResizerProps(props, { instance, header }) {
+function setResizerProps(props, { instance, header }: { instance: TableInstance; header: TableInstance['header'] }) {
   const { dispatch, virtualRowsRange, rows, webComponentsReactProperties } = instance;
   const { onAutoResize, tableRef, isTreeTable } = webComponentsReactProperties;
   const { autoResizable, id: accessor } = header;
@@ -109,7 +109,7 @@ const setCellProps = (
     cell: {
       column: { id }
     }
-  }
+  }: { cell: TableInstance['cell'] }
 ) => {
   return [props, { ['data-column-id-cell']: id }];
 };
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
index e2f8cc1d3e4..6a4dd67d0dd 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
@@ -1,5 +1,5 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const getColumnId = (column) => {
   return typeof column.accessor === 'string' ? column.accessor : column.id;
@@ -7,7 +7,7 @@ const getColumnId = (column) => {
 
 function getHeaderProps(
   props: Record<string, unknown>,
-  { instance: { dispatch, state, columns, setColumnOrder, webComponentsReactProperties } }
+  { instance: { dispatch, state, columns, setColumnOrder, webComponentsReactProperties } }: { instance: TableInstance }
 ) {
   const { columnOrder, columnResizing, isRtl, dndColumn } = state;
   const { onColumnsReorder } = webComponentsReactProperties;
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts b/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts
index 80215fe6abc..1da53eb611a 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { AnalyticalTableScaleWidthMode } from '../../../enums/index.js';
 import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
-import type { AnalyticalTableColumnDefinition, ReactTableHooks } from '../types/index.js';
+import type { AnalyticalTableColumnDefinition, ReactTableHooks, TableInstance } from '../types/index.js';
 
 const ROW_SAMPLE_SIZE = 20;
 const MAX_WIDTH = 700;
@@ -206,7 +206,7 @@ const smartColumns = (columns: AnalyticalTableColumnDefinition[], instance, hidd
   });
 };
 
-const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
+const columns = (columns: TableInstance['columns'], { instance }: { instance: TableInstance }) => {
   if (!instance.state || !instance.rows) {
     return columns;
   }
@@ -231,7 +231,7 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
       }
       return column ?? false;
     })
-    .filter(Boolean);
+    .filter(Boolean) as TableInstance['columns'];
   if (scaleWidthMode === AnalyticalTableScaleWidthMode.Smart) {
     return smartColumns(columns, instance, hiddenColumns);
   }
@@ -296,7 +296,7 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
         }
         return false;
       })
-      .filter(Boolean);
+      .filter(Boolean) as number[];
 
     const fixedWidth = columnsWithFixedWidth.reduce((acc, val) => acc + val, 0);
     // check if columns are visible and table has width
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts
index e3070b31ba8..e6025774abc 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { actions } from 'react-table';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ColumnType, ReactTableHooks, TableInstance } from '../types/index.js';
 import { getLeafHeaders } from '../util/index.js';
 
 const CELL_DATA_ATTRIBUTES = ['visibleColumnIndex', 'columnIndex', 'rowIndex', 'visibleRowIndex'];
@@ -62,7 +62,10 @@ const navigateFromActiveSubCompItem = (currentlyFocusedCell, e) => {
   setFocus(currentlyFocusedCell, recursiveSubComponentElementSearch(e.target));
 };
 
-const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns, state } }) => {
+const useGetTableProps = (
+  tableProps,
+  { instance: { webComponentsReactProperties, data, columns, state } }: { instance: TableInstance }
+) => {
   const { showOverlay, tableRef } = webComponentsReactProperties;
   const currentlyFocusedCell = useRef<HTMLDivElement>(null);
   const noData = data.length === 0;
@@ -171,7 +174,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
         switch (e.key) {
           case 'End': {
             e.preventDefault();
-            const visibleColumns: HTMLDivElement[] = tableRef.current.querySelector(
+            const visibleColumns = tableRef.current.querySelector(
               `div[data-component-name="AnalyticalTableHeaderRow"]`
             ).children;
 
@@ -346,7 +349,10 @@ function getPayload(e, column) {
   return { clientX, columnId, columnWidth, headerIdWidths };
 }
 
-const setHeaderProps = (headerProps, { instance: { dispatch }, column }) => {
+const setHeaderProps = (
+  headerProps,
+  { instance: { dispatch }, column }: { instance: TableInstance; column: ColumnType }
+) => {
   // resize col with keyboard
   const handleKeyDown = (e) => {
     if (typeof headerProps.onKeyDown === 'function') {
diff --git a/packages/main/src/components/AnalyticalTable/hooks/usePopIn.ts b/packages/main/src/components/AnalyticalTable/hooks/usePopIn.ts
index ace95a4911e..85ea39b83c0 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/usePopIn.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/usePopIn.ts
@@ -1,8 +1,11 @@
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
-const popInVisibleColumnsDeps = (deps, { instance: { state } }) => [...deps, state.tableClientWidth];
+const popInVisibleColumnsDeps = (deps, { instance: { state } }: { instance: TableInstance }) => [
+  ...deps,
+  state.tableClientWidth
+];
 
-const popInVisibleColumns = (cols, { instance }) => {
+const popInVisibleColumns = (cols, { instance }: { instance: TableInstance }) => {
   const { state, dispatch } = instance;
 
   const tableClientWidth = state.isScrollable
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx
index e03cec2f107..21cda06a291 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx
@@ -1,6 +1,6 @@
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { IndicationColor } from '../../../enums/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const baseStyles = {
   width: '100%',
@@ -18,7 +18,7 @@ const HighlightColors = {
  */
 const Header = () => <div style={{ width: '6px' }} />;
 
-const Cell = (instance) => {
+const Cell = (instance: TableInstance) => {
   const { cell, webComponentsReactProperties } = instance;
   const styleClass = HighlightColors[cell?.value]
     ? webComponentsReactProperties.classes[HighlightColors[cell.value].toLowerCase()]
@@ -29,11 +29,17 @@ const Cell = (instance) => {
 /*
  * TABLE HOOKS
  */
-const columnsDeps = (deps, { instance: { webComponentsReactProperties } }) => {
+const columnsDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
   return [...deps, webComponentsReactProperties.withRowHighlight, webComponentsReactProperties.highlightField];
 };
-const visibleColumnsDeps = (deps, { instance }) => [...deps, instance.webComponentsReactProperties.withRowHighlight];
-const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {
+const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
+  ...deps,
+  instance.webComponentsReactProperties.withRowHighlight
+];
+const visibleColumns = (
+  currentVisibleColumns,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   if (!webComponentsReactProperties.withRowHighlight) {
     return currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_highlight_column');
   }
@@ -42,7 +48,7 @@ const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactP
   return [highlightColumn, ...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_highlight_column')];
 };
 
-const columns = (currentColumns, { instance }) => {
+const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
   const { withRowHighlight, highlightField } = instance.webComponentsReactProperties;
 
   if (!withRowHighlight) {
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx
index 61bfe7381af..f5758e0a79d 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx
@@ -1,4 +1,4 @@
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const baseStyles = {
   width: '100%',
@@ -27,14 +27,17 @@ const Cell = (instance) => {
 /*
  * TABLE HOOKS
  */
-const columnsDeps = (deps, { instance: { webComponentsReactProperties } }) => {
+const columnsDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
   return [...deps, webComponentsReactProperties.withNavigationHighlight];
 };
-const visibleColumnsDeps = (deps, { instance }) => [
+const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
   ...deps,
   instance.webComponentsReactProperties.withNavigationHighlight
 ];
-const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {
+const visibleColumns = (
+  currentVisibleColumns,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   if (!webComponentsReactProperties.withNavigationHighlight) {
     return currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_navigation_column');
   }
@@ -43,7 +46,7 @@ const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactP
   return [...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_navigation_column'), highlightColumn];
 };
 
-const columns = (currentColumns, { instance }) => {
+const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
   const { withNavigationHighlight } = instance.webComponentsReactProperties;
 
   if (!withNavigationHighlight) {
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx
index 1a08989258d..5e40b52d5b4 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx
@@ -2,7 +2,7 @@ import { CssSizeVariablesNames, enrichEventWithDetails } from '@ui5/webcomponent
 import type { CSSProperties } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
 import { CheckBox } from '../../../webComponents/CheckBox/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const customCheckBoxStyling = {
   verticalAlign: 'middle',
@@ -14,7 +14,7 @@ const customCheckBoxStyling = {
  * COMPONENTS
  */
 
-const Header = (instance) => {
+const Header = (instance: TableInstance) => {
   const {
     getToggleAllRowsSelectedProps,
     webComponentsReactProperties: { selectionMode }
@@ -59,9 +59,8 @@ function getNextSelectedRowIds(rowsById) {
   }, {});
 }
 
-const headerProps = (props, { instance }) => {
+const headerProps = (props, { instance }: { instance: TableInstance }) => {
   const {
-    flatRows,
     webComponentsReactProperties: {
       onRowSelect,
       selectionMode,
@@ -70,10 +69,13 @@ const headerProps = (props, { instance }) => {
     toggleAllRowsSelected,
     isAllRowsSelected,
     rowsById,
+    preFilteredRowsById,
     dispatch,
     state: { filters, globalFilter }
   } = instance;
   const style = { ...props.style, cursor: 'pointer', display: 'flex', justifyContent: 'center' };
+  const isFiltered = filters?.length > 0 || !!globalFilter;
+  const _rowsById = isFiltered ? preFilteredRowsById : rowsById;
   if (
     props.key === 'header___ui5wcr__internal_selection_column' &&
     selectionMode === AnalyticalTableSelectionMode.Multiple
@@ -83,7 +85,6 @@ const headerProps = (props, { instance }) => {
         props.onClick(e);
       }
       toggleAllRowsSelected(!isAllRowsSelected);
-      const isFiltered = filters?.length > 0 || !!globalFilter;
       if (typeof onRowSelect === 'function') {
         if (isFiltered) {
           dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row: undefined, selectAll: true, fired: true } });
@@ -91,8 +92,8 @@ const headerProps = (props, { instance }) => {
           onRowSelect(
             // cannot use instance.selectedFlatRows here as it only returns all rows on the first level
             enrichEventWithDetails(e, {
+              rowsById: _rowsById,
               allRowsSelected: !isAllRowsSelected,
-              selectedFlatRows: !isAllRowsSelected ? flatRows : [],
               selectedRowIds: !isAllRowsSelected ? getNextSelectedRowIds(rowsById) : {}
             })
           );
@@ -127,17 +128,20 @@ const headerProps = (props, { instance }) => {
   return props;
 };
 
-const columnDeps = (deps, { instance: { webComponentsReactProperties } }) => {
+const columnDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
   return [...deps, webComponentsReactProperties.selectionMode, webComponentsReactProperties.selectionBehavior];
 };
 
-const visibleColumnsDeps = (deps, { instance }) => [
+const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
   ...deps,
   instance.webComponentsReactProperties.selectionMode,
   instance.webComponentsReactProperties.selectionBehavior
 ];
 
-const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {
+const visibleColumns = (
+  currentVisibleColumns,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   if (
     webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.None ||
     webComponentsReactProperties.selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly
@@ -148,7 +152,7 @@ const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactP
   const selectionColumn = currentVisibleColumns.find(({ id }) => id === '__ui5wcr__internal_selection_column');
   return [selectionColumn, ...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_selection_column')];
 };
-const columns = (currentColumns, { instance }) => {
+const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
   const { webComponentsReactProperties } = instance;
   const { selectionMode, selectionBehavior, tableRef } = webComponentsReactProperties;
 
@@ -186,7 +190,7 @@ const columns = (currentColumns, { instance }) => {
   ];
 };
 
-const getCellProps = (props, { cell }) => {
+const getCellProps = (props, { cell }: { cell: TableInstance['cell'] }) => {
   if (cell.column.id === '__ui5wcr__internal_selection_column') {
     const style = { ...props.style, cursor: 'pointer', justifyContent: 'center' };
     return [props, { style }];
@@ -194,7 +198,10 @@ const getCellProps = (props, { cell }) => {
   return props;
 };
 
-const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
+const setToggleAllRowsSelectedProps = (
+  props,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   const { classes } = webComponentsReactProperties;
   return [props, { className: classes.checkBox, title: undefined }];
 };
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts b/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts
index 3ecaa7d0036..4042ec49b5d 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts
@@ -1,10 +1,10 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { useEffect } from 'react';
 import { AnalyticalTableSelectionMode } from '../../../enums/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 export const useSelectionChangeCallback = (hooks: ReactTableHooks) => {
-  hooks.useControlledState.push((state, { instance }) => {
+  hooks.useControlledState.push((state, { instance }: { instance: TableInstance }) => {
     const { selectedRowPayload, selectedRowIds, filters, globalFilter } = state;
     const { rowsById, preFilteredRowsById, webComponentsReactProperties, dispatch } = instance;
     const isFiltered = filters?.length > 0 || !!globalFilter;
@@ -14,35 +14,28 @@ export const useSelectionChangeCallback = (hooks: ReactTableHooks) => {
       if (selectedRowPayload?.fired) {
         const { event: e, row: selRow, selectAll } = selectedRowPayload;
         const row = rowsById[selRow?.id];
+        // when selecting a row on a filtered table, `preFilteredRowsById` has to be used, otherwise filtered out rows are undefined
+        const _rowsById = isFiltered ? preFilteredRowsById : rowsById;
 
         if (row || selectAll) {
           const payload = {
             row: row,
+            rowsById: _rowsById,
             isSelected: row?.isSelected,
-            selectedFlatRows: row?.isSelected ? [row] : [],
             allRowsSelected: false,
             selectedRowIds
           };
 
           if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Multiple) {
-            // when selecting a row on a filtered table, `preFilteredRowsById` has to be used, otherwise filtered out rows are undefined
-            const tempRowsById = isFiltered ? preFilteredRowsById : rowsById;
-            const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
-              if (selectedRowIds[key]) {
-                acc.push(tempRowsById[key]);
-              }
-              return acc;
-            }, []);
-
-            payload.selectedFlatRows = selectedRowIdsArrayMapped;
-            if (selectedRowIdsArrayMapped.length === Object.keys(tempRowsById).length) {
+            if (Object.keys(selectedRowIds).length === Object.keys(_rowsById).length) {
               payload.allRowsSelected = true;
             }
+
             if (selectAll) {
               dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row, selectAll: false, fired: false } });
               webComponentsReactProperties?.onRowSelect(
                 enrichEventWithDetails(e, {
-                  selectedFlatRows: payload.selectedFlatRows,
+                  rowsById: payload.rowsById,
                   allRowsSelected: payload.allRowsSelected,
                   selectedRowIds: payload.selectedRowIds
                 })
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts
index 31b0893bc42..10bc559d3ac 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts
@@ -1,9 +1,9 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
 import { getTagNameWithoutScopingSuffix } from '../../../internal/utils.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 
-const getRowProps = (rowProps, { row, instance }) => {
+const getRowProps = (rowProps, { row, instance }: { row: RowType; instance: TableInstance }) => {
   const { webComponentsReactProperties, toggleRowSelected, selectedFlatRows, dispatch } = instance;
   const handleRowSelect = (e) => {
     const isSelectionCell = e.target.dataset.selectionCell === 'true';
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
index c72f46e3259..34d20910cc4 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
@@ -1,9 +1,9 @@
 import type { CSSProperties } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ColumnType, ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 import { getSubRowsByString, resolveCellAlignment } from '../util/index.js';
 
-const getHeaderGroupProps = (headerGroupProps, { instance }) => {
+const getHeaderGroupProps = (headerGroupProps, { instance }: { instance: TableInstance }) => {
   const { classes } = instance.webComponentsReactProperties;
   return [
     headerGroupProps,
@@ -13,7 +13,7 @@ const getHeaderGroupProps = (headerGroupProps, { instance }) => {
   ];
 };
 
-const getHeaderProps = (columnProps, { instance, column }) => {
+const getHeaderProps = (columnProps, { instance, column }: { instance: TableInstance; column: ColumnType }) => {
   const hasPopover = column.canGroupBy || column.canSort || column.canFilter;
   const { classes } = instance.webComponentsReactProperties;
   const style: CSSProperties = {
@@ -43,11 +43,15 @@ const getHeaderProps = (columnProps, { instance, column }) => {
 
 const ROW_SELECTION_ATTRIBUTE = 'data-is-selected';
 
-const getRowProps = (rowProps, { instance, row, userProps }) => {
+const getRowProps = (
+  rowProps,
+  { instance, row, userProps }: { instance: TableInstance; row: RowType; userProps: Record<string, any> }
+) => {
   const { webComponentsReactProperties } = instance;
   const { classes, selectionBehavior, selectionMode, alternateRowColor, subRowsKey } = webComponentsReactProperties;
   let className = classes.tr;
   const rowCanBeSelected = [AnalyticalTableSelectionMode.Single, AnalyticalTableSelectionMode.Multiple].includes(
+    //@ts-expect-error: we know that "None" is not in the array...
     selectionMode
   );
   if (
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
index 62a0646325d..53db247a4d2 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
@@ -1,7 +1,10 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 
-const getToggleRowExpandedProps = (rowProps, { row, instance, userProps }) => {
+const getToggleRowExpandedProps = (
+  rowProps,
+  { row, instance, userProps }: { row: RowType; instance: TableInstance; userProps: Record<string, any> }
+) => {
   const { manualGroupBy } = instance;
   const { onRowExpandChange, isTreeTable, renderRowSubComponent, alwaysShowSubComponent } =
     instance.webComponentsReactProperties;
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useVisibleColumnsWidth.ts b/packages/main/src/components/AnalyticalTable/hooks/useVisibleColumnsWidth.ts
index fb686083ea7..9846423b9fc 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useVisibleColumnsWidth.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useVisibleColumnsWidth.ts
@@ -1,6 +1,6 @@
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
-const getVisibleColumnsWidth = (instance) => {
+const getVisibleColumnsWidth = (instance: TableInstance) => {
   const visibleColumnsWidth = instance.visibleColumns.map((item) => item.totalWidth);
   Object.assign(instance, { visibleColumnsWidth });
 };
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index bddd5056894..21ca02d9af1 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -46,7 +46,6 @@ import {
   SELECT_PRESS_SPACE,
   UNSELECT_PRESS_SPACE
 } from '../../i18n/i18n-defaults.js';
-import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
 import { BusyIndicator } from '../../webComponents/BusyIndicator/index.js';
 import { Text } from '../../webComponents/Text/index.js';
 import { FlexBox } from '../FlexBox/index.js';
@@ -95,19 +94,6 @@ const measureElement = (el: HTMLElement) => {
   return el.offsetHeight;
 };
 
-//todo: add feature request for parts or even a fix if this turns out to be a bug
-addCustomCSSWithScoping(
-  'ui5-busy-indicator',
-  `
-:host([data-component-name="AnalyticalTableBusyIndicator"]) .ui5-busy-indicator-root {
-  display: initial;
-}
-:host([data-component-name="AnalyticalTableBusyIndicator"]) .ui5-busy-indicator-busy-area:focus {
-border-radius: 0;
-}
-`
-);
-
 /**
  * The `AnalyticalTable` provides a set of convenient functions for responsive table design, including virtualization of rows and columns, infinite scrolling and customizable columns that will, unless otherwise defined, distribute the available space equally among themselves.
  * It also provides several possibilities for working with the data, including sorting, filtering, grouping and aggregation.
@@ -717,143 +703,152 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           </TitleBar>
         )}
         {extension && <div ref={extensionRef}>{extension}</div>}
-        <BusyIndicator active={loading} delay={loadingDelay} data-component-name="AnalyticalTableBusyIndicator">
-          <FlexBox
-            className={classNames.tableContainerWithScrollBar}
-            data-component-name="AnalyticalTableContainerWithScrollbar"
-          >
-            {showOverlay && (
-              <>
-                <span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden>
-                  {invalidTableA11yText}
-                </span>
-                <div
-                  tabIndex={0}
-                  aria-labelledby={`${titleBarId} ${invalidTableTextId}`}
-                  role="region"
-                  data-component-name="AnalyticalTableOverlay"
-                  className={classNames.overlay}
-                />
-              </>
-            )}
-            <div
-              aria-labelledby={titleBarId}
-              {...getTableProps()}
-              tabIndex={showOverlay ? -1 : 0}
-              role="grid"
-              aria-rowcount={rows.length}
-              aria-colcount={visibleColumns.length}
-              data-per-page={internalVisibleRowCount}
-              data-component-name="AnalyticalTableContainer"
-              ref={tableRef}
-              className={tableClasses}
+        <FlexBox
+          className={classNames.tableContainerWithScrollBar}
+          data-component-name="AnalyticalTableContainerWithScrollbar"
+        >
+          {loading && (
+            <BusyIndicator
+              className={classNames.busyIndicator}
+              active={true}
+              delay={loadingDelay}
+              data-component-name="AnalyticalTableBusyIndicator"
             >
-              <div className={classNames.tableHeaderBackgroundElement} />
-              <div className={classNames.tableBodyBackgroundElement} />
-              {headerGroups.map((headerGroup) => {
-                let headerProps: Record<string, unknown> = {};
-                if (headerGroup.getHeaderGroupProps) {
-                  headerProps = headerGroup.getHeaderGroupProps();
-                }
-                return (
-                  tableRef.current && (
-                    <ColumnHeaderContainer
-                      ref={headerRef}
-                      key={headerProps.key as string}
-                      resizeInfo={tableState.columnResizing}
-                      headerProps={headerProps}
-                      headerGroup={headerGroup}
-                      onSort={onSort}
-                      onGroupByChanged={onGroupByChanged}
-                      isRtl={isRtl}
-                      columnVirtualizer={columnVirtualizer}
-                      uniqueId={uniqueId}
-                      showVerticalEndBorder={showVerticalEndBorder}
-                    />
-                  )
-                );
-              })}
-              {loading && rows?.length === 0 && (
-                <TablePlaceholder columns={visibleColumns} rows={minRows} style={noDataStyles} />
-              )}
-              {!loading && rows?.length === 0 && (
-                <NoDataComponent
-                  noDataText={noDataTextLocal}
-                  className={classNames.noDataContainer}
-                  style={noDataStyles}
-                />
-              )}
-              {rows?.length > 0 && tableRef.current && (
-                <VirtualTableBodyContainer
-                  rowCollapsedFlag={tableState.rowCollapsed}
-                  dispatch={dispatch}
-                  tableBodyHeight={tableBodyHeight}
-                  totalColumnsWidth={columnVirtualizer.getTotalSize()}
-                  parentRef={parentRef}
-                  classes={classNames}
-                  infiniteScroll={infiniteScroll}
-                  infiniteScrollThreshold={infiniteScrollThreshold}
-                  onLoadMore={handleOnLoadMore}
-                  internalRowHeight={internalRowHeight}
-                  popInRowHeight={popInRowHeight}
-                  rows={rows}
-                  handleExternalScroll={handleBodyScroll}
-                  visibleRows={internalVisibleRowCount}
-                >
-                  <VirtualTableBody
-                    scrollContainerRef={scrollContainerRef}
-                    classes={classNames}
-                    prepareRow={prepareRow}
-                    rows={rows}
-                    scrollToRef={scrollToRef}
-                    isTreeTable={isTreeTable}
-                    internalRowHeight={internalRowHeight}
-                    popInRowHeight={popInRowHeight}
-                    alternateRowColor={alternateRowColor}
-                    visibleColumns={visibleColumns}
-                    renderRowSubComponent={renderRowSubComponent}
-                    alwaysShowSubComponent={alwaysShowSubComponent}
-                    markNavigatedRow={markNavigatedRow}
+              {/*todo: This is necessary; otherwise, the overlay bg color will not be applied. https://github.com/SAP/ui5-webcomponents/issues/9723 */}
+              <span />
+            </BusyIndicator>
+          )}
+          {showOverlay && (
+            <>
+              <span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden>
+                {invalidTableA11yText}
+              </span>
+              <div
+                tabIndex={0}
+                aria-labelledby={`${titleBarId} ${invalidTableTextId}`}
+                role="region"
+                data-component-name="AnalyticalTableOverlay"
+                className={classNames.overlay}
+              />
+            </>
+          )}
+          <div
+            aria-labelledby={titleBarId}
+            {...getTableProps()}
+            tabIndex={showOverlay ? -1 : 0}
+            role="grid"
+            aria-rowcount={rows.length}
+            aria-colcount={visibleColumns.length}
+            data-per-page={internalVisibleRowCount}
+            data-component-name="AnalyticalTableContainer"
+            ref={tableRef}
+            className={tableClasses}
+          >
+            <div className={classNames.tableHeaderBackgroundElement} />
+            <div className={classNames.tableBodyBackgroundElement} />
+            {headerGroups.map((headerGroup) => {
+              let headerProps: Record<string, unknown> = {};
+              if (headerGroup.getHeaderGroupProps) {
+                headerProps = headerGroup.getHeaderGroupProps();
+              }
+              return (
+                tableRef.current && (
+                  <ColumnHeaderContainer
+                    ref={headerRef}
+                    key={headerProps.key as string}
+                    resizeInfo={tableState.columnResizing}
+                    headerProps={headerProps}
+                    headerGroup={headerGroup}
+                    onSort={onSort}
+                    onGroupByChanged={onGroupByChanged}
                     isRtl={isRtl}
-                    subComponentsHeight={tableState.subComponentsHeight}
-                    dispatch={dispatch}
                     columnVirtualizer={columnVirtualizer}
-                    manualGroupBy={reactTableOptions?.manualGroupBy as boolean | undefined}
-                    subRowsKey={subRowsKey}
-                    subComponentsBehavior={subComponentsBehavior}
-                    triggerScroll={tableState.triggerScroll}
-                    rowVirtualizer={rowVirtualizer}
+                    uniqueId={uniqueId}
+                    showVerticalEndBorder={showVerticalEndBorder}
                   />
-                </VirtualTableBodyContainer>
-              )}
-            </div>
-            {(additionalEmptyRowsCount || tableState.isScrollable === undefined || tableState.isScrollable) && (
-              <VerticalScrollbar
+                )
+              );
+            })}
+            {loading && rows?.length === 0 && (
+              <TablePlaceholder columns={visibleColumns} rows={minRows} style={noDataStyles} />
+            )}
+            {!loading && rows?.length === 0 && (
+              <NoDataComponent
+                noDataText={noDataTextLocal}
+                className={classNames.noDataContainer}
+                style={noDataStyles}
+              />
+            )}
+            {rows?.length > 0 && tableRef.current && (
+              <VirtualTableBodyContainer
+                rowCollapsedFlag={tableState.rowCollapsed}
+                dispatch={dispatch}
                 tableBodyHeight={tableBodyHeight}
-                internalRowHeight={internalHeaderRowHeight}
-                tableRef={tableRef}
-                handleVerticalScrollBarScroll={handleVerticalScrollBarScroll}
-                ref={verticalScrollBarRef}
-                scrollContainerRef={scrollContainerRef}
+                totalColumnsWidth={columnVirtualizer.getTotalSize()}
                 parentRef={parentRef}
-                nativeScrollbar={className?.includes('ui5-content-native-scrollbars')}
-              />
+                classes={classNames}
+                infiniteScroll={infiniteScroll}
+                infiniteScrollThreshold={infiniteScrollThreshold}
+                onLoadMore={handleOnLoadMore}
+                internalRowHeight={internalRowHeight}
+                popInRowHeight={popInRowHeight}
+                rows={rows}
+                handleExternalScroll={handleBodyScroll}
+                visibleRows={internalVisibleRowCount}
+              >
+                <VirtualTableBody
+                  scrollContainerRef={scrollContainerRef}
+                  classes={classNames}
+                  prepareRow={prepareRow}
+                  rows={rows}
+                  scrollToRef={scrollToRef}
+                  isTreeTable={isTreeTable}
+                  internalRowHeight={internalRowHeight}
+                  popInRowHeight={popInRowHeight}
+                  alternateRowColor={alternateRowColor}
+                  visibleColumns={visibleColumns}
+                  renderRowSubComponent={renderRowSubComponent}
+                  alwaysShowSubComponent={alwaysShowSubComponent}
+                  markNavigatedRow={markNavigatedRow}
+                  isRtl={isRtl}
+                  subComponentsHeight={tableState.subComponentsHeight}
+                  dispatch={dispatch}
+                  columnVirtualizer={columnVirtualizer}
+                  manualGroupBy={reactTableOptions?.manualGroupBy as boolean | undefined}
+                  subRowsKey={subRowsKey}
+                  subComponentsBehavior={subComponentsBehavior}
+                  triggerScroll={tableState.triggerScroll}
+                  rowVirtualizer={rowVirtualizer}
+                />
+              </VirtualTableBodyContainer>
             )}
-          </FlexBox>
-          {visibleRowCountMode === AnalyticalTableVisibleRowCountMode.Interactive && (
-            <VerticalResizer
-              popInRowHeight={popInRowHeight}
-              hasPopInColumns={tableState?.popInColumns?.length > 0}
-              analyticalTableRef={analyticalTableRef}
-              dispatch={dispatch}
-              extensionsHeight={extensionsHeight}
-              internalRowHeight={internalRowHeight}
-              rowsLength={rows.length}
-              visibleRows={internalVisibleRowCount}
-              handleOnLoadMore={handleOnLoadMore}
+          </div>
+          {(additionalEmptyRowsCount || tableState.isScrollable === undefined || tableState.isScrollable) && (
+            <VerticalScrollbar
+              tableBodyHeight={tableBodyHeight}
+              internalRowHeight={internalHeaderRowHeight}
+              tableRef={tableRef}
+              handleVerticalScrollBarScroll={handleVerticalScrollBarScroll}
+              ref={verticalScrollBarRef}
+              scrollContainerRef={scrollContainerRef}
+              parentRef={parentRef}
+              nativeScrollbar={className?.includes('ui5-content-native-scrollbars')}
             />
           )}
-        </BusyIndicator>
+        </FlexBox>
+        {visibleRowCountMode === AnalyticalTableVisibleRowCountMode.Interactive && (
+          <VerticalResizer
+            popInRowHeight={popInRowHeight}
+            hasPopInColumns={tableState?.popInColumns?.length > 0}
+            analyticalTableRef={analyticalTableRef}
+            dispatch={dispatch}
+            extensionsHeight={extensionsHeight}
+            internalRowHeight={internalRowHeight}
+            rowsLength={rows.length}
+            visibleRows={internalVisibleRowCount}
+            handleOnLoadMore={handleOnLoadMore}
+          />
+        )}
       </div>
       <Text
         aria-hidden="true"
diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx b/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx
index 2e8168d4e2b..6b33b2bbac2 100644
--- a/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx
+++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 
 type onIndeterminateChange = (e: {
   indeterminateRowsById: Record<string | number, boolean>;
@@ -77,7 +77,7 @@ const getIndeterminate = (rows, rowsById, state) => {
  * @param {event} onIndeterminateChange Fired when the indeterminate state of rows is changed.
  */
 export const useIndeterminateRowSelection = (onIndeterminateChange?: onIndeterminateChange) => {
-  const toggleRowProps = (rowProps, { row, instance }) => {
+  const toggleRowProps = (rowProps, { row, instance }: { row: RowType; instance: TableInstance }) => {
     let indeterminate: boolean;
     if (instance.isAllRowsSelected) {
       indeterminate = false;
@@ -117,7 +117,7 @@ export const useIndeterminateRowSelection = (onIndeterminateChange?: onIndetermi
     }
   };
 
-  const useInstanceAfterData = (instance) => {
+  const useInstanceAfterData = (instance: TableInstance) => {
     const {
       data,
       dispatch,
diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useManualRowSelect.ts b/packages/main/src/components/AnalyticalTable/pluginHooks/useManualRowSelect.ts
index 443c454b343..141b723d82f 100644
--- a/packages/main/src/components/AnalyticalTable/pluginHooks/useManualRowSelect.ts
+++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useManualRowSelect.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 /**
  * A plugin hook for manual row selection.
@@ -9,7 +9,13 @@ import type { ReactTableHooks } from '../types/index.js';
  * @param {string} manualRowSelectedKey - If this key is found on the original data row, and it is true, this row will be manually selected. __Defaults to `"isSelected"`__.
  */
 export const useManualRowSelect = (manualRowSelectedKey = 'isSelected') => {
-  const instanceAfterData = ({ flatRows, toggleRowSelected }) => {
+  const instanceAfterData = ({
+    flatRows,
+    toggleRowSelected
+  }: {
+    flatRows: TableInstance['flatRows'];
+    toggleRowSelected: TableInstance['toggleRowSelected'];
+  }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       flatRows.forEach(({ id, original }) => {
diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useOnColumnResize.ts b/packages/main/src/components/AnalyticalTable/pluginHooks/useOnColumnResize.ts
index 4a4868470b7..c38b80acd33 100644
--- a/packages/main/src/components/AnalyticalTable/pluginHooks/useOnColumnResize.ts
+++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useOnColumnResize.ts
@@ -2,7 +2,7 @@
 
 import { debounce } from '@ui5/webcomponents-react-base';
 import { useEffect, useRef } from 'react';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 interface useOnColumnResizeOptions {
   /**
@@ -30,7 +30,7 @@ type useOnColumnResizeFunc = (e: { columnWidth: number; header: Record<string, a
 export const useOnColumnResize = (callback: useOnColumnResizeFunc, options?: useOnColumnResizeOptions) => {
   const debouncedEvent = debounce(callback, options?.wait ?? 100);
 
-  const useInstance = (instance) => {
+  const useInstance = (instance: TableInstance) => {
     const { state, columns } = instance;
     const { columnResizing } = state;
     const { isResizingColumn, columnWidths } = columnResizing;
diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx
index c689aeab0aa..8b80872c428 100644
--- a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx
+++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx
@@ -1,7 +1,7 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
 import { CheckBox } from '../../../webComponents/CheckBox/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 import { getBy } from '../util/index.js';
 
 type DisableRowSelectionType = string | ((row: Record<any, any>) => boolean);
@@ -16,7 +16,7 @@ const headerProps = (
     instance: {
       webComponentsReactProperties: { selectionMode }
     }
-  }
+  }: { instance: TableInstance }
 ) => {
   if (
     props.key === 'header___ui5wcr__internal_selection_column' &&
@@ -28,7 +28,7 @@ const headerProps = (
   return props;
 };
 
-const columns = (columns) => {
+const columns = (columns: TableInstance['columns']) => {
   return columns.map((column) => {
     if (column.id === '__ui5wcr__internal_selection_column') {
       return {
@@ -80,7 +80,7 @@ export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionT
       ? disableRowSelection
       : (d) => getBy(d.original, disableRowSelection, undefined);
 
-  const getRowProps = (rowProps, { row, instance }) => {
+  const getRowProps = (rowProps, { row, instance }: { row: RowType; instance: TableInstance }) => {
     const { webComponentsReactProperties } = instance;
     if (disableRowAccessor(row) === true) {
       row.disableSelect = true;
@@ -120,7 +120,10 @@ export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionT
     return [...deps, disableRowSelection];
   };
 
-  const cellProps = (cellProps, { cell: { row, column }, instance }) => {
+  const cellProps = (
+    cellProps,
+    { cell: { row, column }, instance }: { cell: TableInstance['cell']; instance: TableInstance }
+  ) => {
     const { selectionMode, selectionBehavior } = instance.webComponentsReactProperties;
     if (
       disableRowAccessor(row) === true &&
@@ -140,7 +143,7 @@ export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionT
     return cellProps;
   };
 
-  const toggleRowSelectedProps = (rowProps, { row }) => {
+  const toggleRowSelectedProps = (rowProps, { row }: { row: RowType }) => {
     if (disableRowAccessor(row) === true) {
       const { title: _0, ...updatedRowProps } = rowProps;
       return updatedRowProps;
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index 0f85ef6f7bc..43b062d4287 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -1,6 +1,6 @@
 import type { ScrollToOptions } from '@tanstack/react-virtual';
 import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
-import type { ComponentType, ReactNode, Ref } from 'react';
+import type { ComponentType, MutableRefObject, ReactNode, Ref } from 'react';
 import type {
   AnalyticalTableScaleWidthMode,
   AnalyticalTableScrollMode,
@@ -14,6 +14,210 @@ import type {
 } from '../../../enums/index.js';
 import type { CommonProps } from '../../../types/index.js';
 
+export interface ColumnType extends Omit<AnalyticalTableColumnDefinition, 'id'> {
+  id?: string;
+  Expandable?: any;
+  Grouped?: any;
+  RepeatedValue?: any;
+  canFilter?: boolean;
+  canGroupBy?: boolean;
+  canResize?: boolean;
+  canSort?: boolean;
+  depth?: number;
+  filterValue?: any;
+  filteredRows?: Record<string, any>[];
+  getFooterProps?: (props?: any) => any;
+  getGroupByToggleProps?: (props?: any) => any;
+  getHeaderProps?: (props?: any) => any;
+  getSortByToggleProps?: (props?: any) => any;
+  getToggleHiddenProps?: (props?: any) => any;
+  groupedIndex?: number;
+  isGrouped?: boolean;
+  isResizing?: boolean;
+  isSorted?: boolean;
+  isSortedDesc?: boolean;
+  isVisible?: boolean;
+  originalWidth?: number;
+  parent?: any;
+  preFilteredRows?: Record<string, RowType>[];
+  render?: any;
+  setFilter?: (val: string) => void;
+  sortDescFirst?: boolean;
+  sortedIndex?: number;
+  toggleHidden?: (hidden?: boolean) => void;
+  totalFlexWidth?: number;
+  totalLeft?: number;
+  totalMaxWidth?: number;
+  totalMinWidth?: number;
+  totalVisibleHeaderCount?: number;
+  totalWidth?: number;
+  [key: string]: any;
+}
+
+export interface TableInstance {
+  allColumns?: ColumnType[];
+  allColumnsHidden?: boolean;
+  columns?: ColumnType[];
+  data?: Record<string, any>[];
+  defaultColumn?: Record<string, any>;
+  disableFilters?: boolean;
+  disableGlobalFilter?: boolean;
+  disableGroupBy?: boolean;
+  disableSortBy?: boolean;
+  dispatch?: (action: any) => void;
+  expandedDepth?: number;
+  expandedRows?: RowType[];
+  filteredFlatRows?: RowType[];
+  filteredRows?: RowType[];
+  filteredRowsById?: Record<string, RowType>;
+  flatHeaders?: ColumnType[];
+  flatRows?: RowType[];
+  footerGroups?: Record<string, any>[];
+  getHooks?: () => any[];
+  getRowId?: (row: RowType, index: number, parent?: any) => string;
+  getSubRows?: (row: RowType, relativeIndex?: number) => RowType[];
+  getTableBodyProps?: any;
+  getTableProps?: any;
+  getToggleAllPageRowsSelectedProps?: any;
+  getToggleAllRowsExpandedProps?: any;
+  getToggleAllRowsSelectedProps?: any;
+  getToggleHideAllColumnsProps?: any;
+  globalFilteredFlatRows?: RowType[];
+  globalFilteredRows?: RowType[];
+  globalFilteredRowsById?: Record<string, RowType>;
+  groupedFlatRows?: RowType[];
+  groupedRows?: RowType[];
+  groupedRowsById?: Record<string, RowType>;
+  headerGroups?: Record<string, any>[];
+  headers?: ColumnType[];
+  initialRows?: RowType[];
+  initialState?: Record<string, any>;
+  isAllPageRowsSelected?: boolean;
+  isAllRowsExpanded?: boolean;
+  isAllRowsSelected?: boolean;
+  nonGroupedFlatRows?: RowType[];
+  nonGroupedRowsById?: Record<string, RowType>;
+  onlyGroupedFlatRows?: RowType[];
+  onlyGroupedRowsById?: Record<string, RowType>;
+  plugins?: any[];
+  preExpandedRows?: RowType[];
+  preFilteredFlatRows?: RowType[];
+  preFilteredRows?: RowType[];
+  preFilteredRowsById?: Record<string, RowType>;
+  preGlobalFilteredFlatRows?: RowType[];
+  preGlobalFilteredRows?: RowType[];
+  preGlobalFilteredRowsById?: Record<string, RowType>;
+  preGroupedFlatRow?: RowType[];
+  preGroupedRows?: RowType[];
+  preGroupedRowsById?: Record<string, RowType>;
+  preSortedFlatRows?: RowType[];
+  preSortedRows?: RowType[];
+  prepareRow?: (row: RowType) => void;
+  resetResizing?: any;
+  rows?: RowType[];
+  rowsById?: Record<string, RowType>;
+  selectSubRows?: boolean;
+  selectedFlatRows?: RowType[];
+  setAllFilters?: (filtersObjectArray: Record<string, any>[]) => void;
+  setColumnOrder?: any;
+  setFilter?: (columnId: string, filterValue: string) => void;
+  setGlobalFilter?: (filterValue: string) => void;
+  setGroupBy?: (columnIds: string[]) => void;
+  setHiddenColumns?: (columnIds: string[]) => void;
+  setSortBy?: any;
+  sortTypes?: Record<string, any>;
+  sortedFlatRows?: Record<string, RowType>[];
+  sortedRows?: Record<string, RowType>[];
+  state?: AnalyticalTableState & Record<string, any>;
+  stateReducer?: (
+    state: TableInstance['state'],
+    action: any,
+    _prevState: TableInstance['state'],
+    instance: TableInstance
+  ) => TableInstance['state'];
+  toggleAllPageRowsSelected?: (selected?: boolean) => void;
+  toggleAllRowsExpanded?: (expanded?: boolean) => void;
+  toggleAllRowsSelected?: (selected?: boolean) => void;
+  toggleGroupBy?: (columnId: string, value: boolean) => void;
+  toggleHideAllColumns?: (hidden?: boolean) => void;
+  toggleHideColumn?: (columnId: string, hidden?: boolean) => void;
+  toggleRowExpanded?: (rowPath: string, expanded?: boolean) => void;
+  toggleRowSelected?: (rowPath: string, selected?: boolean) => void;
+  toggleSortBy?: (columnId: string, desc: boolean, multi?: boolean) => void;
+  totalColumnsMaxWidth?: number;
+  totalColumnsMinWidth?: number;
+  totalColumnsWidth?: number;
+  useControlledState?: any;
+  virtualRowsRange?: {
+    startIndex: number;
+    endIndex: number;
+  };
+  visibleColumns?: ColumnType[];
+  visibleColumnsWidth?: number[];
+  webComponentsReactProperties?: WCRPropertiesType;
+  [key: string]: any;
+}
+
+export interface WCRPropertiesType {
+  selectionMode: AnalyticalTablePropTypes['selectionMode'];
+  onRowSelect?: AnalyticalTablePropTypes['onRowSelect'];
+  translatableTexts: {
+    selectAllText: string;
+    deselectAllText: string;
+    expandA11yText: string;
+    collapseA11yText: string;
+    selectA11yText: string;
+    unselectA11yText: string;
+    expandNodeA11yText: string;
+    collapseNodeA11yText: string;
+    filteredA11yText: string;
+    groupedA11yText: string;
+  };
+  tagNamesWhichShouldNotSelectARow: Set<string>;
+  tableRef: MutableRefObject<DivWithCustomScrollProp>;
+  selectionBehavior: AnalyticalTablePropTypes['selectionBehavior'];
+  classes: Record<string, string>;
+  onAutoResize: AnalyticalTablePropTypes['onAutoResize'];
+  onRowClick: AnalyticalTablePropTypes['onRowClick'];
+  onRowExpandChange: AnalyticalTablePropTypes['onRowExpandChange'];
+  isTreeTable: AnalyticalTablePropTypes['isTreeTable'];
+  alternateRowColor: AnalyticalTablePropTypes['alternateRowColor'];
+  scaleWidthMode: AnalyticalTablePropTypes['scaleWidthMode'];
+  loading: AnalyticalTablePropTypes['loading'];
+  withRowHighlight: AnalyticalTablePropTypes['withRowHighlight'];
+  highlightField: AnalyticalTablePropTypes['highlightField'];
+  withNavigationHighlight: AnalyticalTablePropTypes['withNavigationHighlight'];
+  markNavigatedRow: AnalyticalTablePropTypes['markNavigatedRow'];
+  renderRowSubComponent: AnalyticalTablePropTypes['renderRowSubComponent'];
+  alwaysShowSubComponent: boolean;
+  showOverlay: AnalyticalTablePropTypes['showOverlay'];
+  uniqueId: string;
+  subRowsKey: AnalyticalTablePropTypes['subRowsKey'];
+  onColumnsReorder: AnalyticalTablePropTypes['onColumnsReorder'];
+}
+
+export interface RowType {
+  allCells: Record<string, any>[];
+  canExpand: boolean;
+  cells: Record<string, any>[];
+  depth: number;
+  getRowProps: (props?: any) => any;
+  getToggleRowExpandedProps: (userProps?: any) => any;
+  getToggleRowSelectedProps: (userProps?: any) => any;
+  id: string;
+  index: number;
+  isExpanded: boolean;
+  isSelected: boolean;
+  isSomeSelected: boolean;
+  original: Record<string, any>;
+  originalSubRows: Record<string, any>[];
+  subRows: Record<string, any>[];
+  toggleRowExpanded: (isExpanded?: boolean) => void;
+  toggleRowSelected: (isSelected?: boolean) => void;
+  values: Record<string, any>;
+  [key: string]: any;
+}
+
 export interface ScrollToRefType {
   horizontalScrollToOffset: (offset: number, options: Omit<ScrollToOptions, 'smoothScroll'>) => void;
   horizontalScrollToIndex: (item: number, options: Omit<ScrollToOptions, 'smoothScroll'>) => void;
@@ -123,7 +327,7 @@ export interface AnalyticalTableColumnDefinition {
    * __Note__: You can also specify deeply nested values with accessors like `info.hobby` or even `address[0].street`
    * __Note__: If no `accessor` is set, or the `accessor` is a function, the `id` property has to be set.
    */
-  accessor?: string | ((row: any, rowIndex: number) => any);
+  accessor?: string | ((row: RowType, rowIndex: number) => any);
   /**
    * Defines the unique ID for the column. It is used by reference in things like sorting, grouping, filtering etc.
    *
@@ -213,7 +417,7 @@ export interface AnalyticalTableColumnDefinition {
   /**
    * When attempting to group/aggregate non-primitive cell values (e.g. arrays of items) you will likely need to resolve a stable primitive value like a number or string to use in normal row aggregations. This property can be used to aggregate or simply access the value to be used in aggregations eg. count-ing the unique number of items in a cell's array value before sum-ing that count across the table.
    */
-  aggregateValue?: string | ((values, row, column) => any);
+  aggregateValue?: string | ((values, row: RowType, column) => any);
   /**
    * Disable groupBy for this column.
    */
@@ -469,7 +673,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * @default `"status"`
    */
-  highlightField?: string | ((row: Record<any, any>) => HighlightColor);
+  highlightField?: string | ((row: RowType) => HighlightColor);
   /**
    * Defines whether columns are filterable.
    *
@@ -579,7 +783,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * __Note:__ This prop updates the internal table state and must therefore be memoized!
    */
-  selectedRowIds?: { [key: string]: boolean };
+  selectedRowIds?: Record<string, boolean>;
   /**
    * Defines whether the table should act as tree-table.
    */
@@ -601,7 +805,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * __Note:__ Subcomponents can affect performance, especially when used in a tree table (`isTreeTable={true}`). If you face performance issues, please try memoizing your subcomponent.
    */
-  renderRowSubComponent?: (row?: any) => ReactNode;
+  renderRowSubComponent?: (row?: RowType) => ReactNode;
   /**
    * Defines the rendering and height calculation behavior of subcomponents when `renderRowSubComponent` is used.
    *
@@ -622,32 +826,42 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * __Must be memoized!__
    */
-  markNavigatedRow?: (row?: Record<any, any>) => boolean;
+  markNavigatedRow?: (row?: RowType) => boolean;
   /**
    * Fired when the sorting of the rows changes.
    */
-  onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
+  onSort?: (e: CustomEvent<{ column: ColumnType; sortDirection: string }>) => void;
   /**
    * Fired when the grouping of the rows changes.
    */
-  onGroup?: (e: CustomEvent<{ column: unknown; groupedColumns: string[] }>) => void;
+  onGroup?: (e: CustomEvent<{ column: ColumnType; groupedColumns: string[] }>) => void;
   /**
    * Fired when a row is selected or unselected.
    */
   onRowSelect?: (
     e?: CustomEvent<{
-      allRowsSelected: boolean;
-      row?: Record<string, unknown>;
+      /**
+       * Selected row object.
+       *
+       * __Note:__ If the event is invoked by select-all press, this property is not available.
+       */
+      row?: RowType;
+      /**
+       * Defines if the row is selected.
+       *
+       * __Note:__ If the event invoked by select-all press, this property is not available.
+       */
       isSelected?: boolean;
-      selectedFlatRows: Record<string, unknown>[];
-      selectedRowIds: Record<string | number, boolean>;
+      allRowsSelected: boolean;
+      rowsById: Record<string, RowType>;
+      selectedRowIds: Record<string, boolean>;
       nativeDetail: number;
     }>
   ) => void;
   /**
    * Fired when a row is clicked
    */
-  onRowClick?: OnRowClickEvent;
+  onRowClick?: (e: OnRowClickEvent) => void;
   /**
    * Fired when a row is expanded or collapsed
    */
@@ -692,5 +906,5 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * **Note**: Use this prop with care, some properties might have an impact on the internal `AnalyticalTable` implementation.
    */
-  tableInstance?: Ref<Record<string, any>>;
+  tableInstance?: Ref<TableInstance>;
 }
diff --git a/packages/main/src/internal/ModalStore.ts b/packages/main/src/internal/ModalStore.ts
index 7734c1c1a53..fb67b0beaaa 100644
--- a/packages/main/src/internal/ModalStore.ts
+++ b/packages/main/src/internal/ModalStore.ts
@@ -1,7 +1,16 @@
+import { getCurrentRuntimeIndex } from '@ui5/webcomponents-base/dist/Runtimes.js';
 import type { ComponentType, RefCallback, RefObject } from 'react';
 
-const STORE_SYMBOL_LISTENERS = Symbol.for('@ui5/webcomponents-react/Modals/Listeners');
-const STORE_SYMBOL = Symbol.for('@ui5/webcomponents-react/Modals');
+globalThis['@ui5/webcomponents-react'] ??= {};
+const STORE_LOCATION = globalThis['@ui5/webcomponents-react'];
+
+function getStyleStoreListenersSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/Modals-${getCurrentRuntimeIndex()}/Listeners`);
+}
+
+function getStyleStoreSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/Modals-${getCurrentRuntimeIndex()}`);
+}
 
 type IModal = {
   Component: ComponentType;
@@ -14,8 +23,8 @@ type IModal = {
 const initialStore: IModal[] = [];
 
 function getListeners(): Array<() => void> {
-  globalThis[STORE_SYMBOL_LISTENERS] ??= [];
-  return globalThis[STORE_SYMBOL_LISTENERS];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] ??= [];
+  return STORE_LOCATION[getStyleStoreListenersSymbol()];
 }
 
 function emitChange() {
@@ -25,15 +34,15 @@ function emitChange() {
 }
 
 function getSnapshot(): IModal[] {
-  globalThis[STORE_SYMBOL] ??= initialStore;
-  return globalThis[STORE_SYMBOL];
+  STORE_LOCATION[getStyleStoreSymbol()] ??= initialStore;
+  return STORE_LOCATION[getStyleStoreSymbol()];
 }
 
 function subscribe(listener: () => void) {
   const listeners = getListeners();
-  globalThis[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] = [...listeners, listener];
   return () => {
-    globalThis[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
+    STORE_LOCATION[getStyleStoreListenersSymbol()] = listeners.filter((l) => l !== listener);
   };
 }
 
@@ -44,11 +53,11 @@ export const ModalStore = {
     return initialStore;
   },
   addModal(config: IModal) {
-    globalThis[STORE_SYMBOL] = [...getSnapshot(), config];
+    STORE_LOCATION[getStyleStoreSymbol()] = [...getSnapshot(), config];
     emitChange();
   },
   removeModal(id: string) {
-    globalThis[STORE_SYMBOL] = getSnapshot().filter((modal) => modal.id !== id);
+    STORE_LOCATION[getStyleStoreSymbol()] = getSnapshot().filter((modal) => modal.id !== id);
     emitChange();
   }
 };
diff --git a/packages/main/src/internal/ssr.ts b/packages/main/src/internal/ssr.ts
deleted file mode 100644
index 6e6f9c8cc24..00000000000
--- a/packages/main/src/internal/ssr.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { EffectCallback } from 'react';
-import { useEffect, useState } from 'react';
-
-export function useServerSideEffect(effect: EffectCallback) {
-  useEffect(effect, []);
-}
-
-export function useCanRenderPortal() {
-  const [allowed, setAllowed] = useState(false);
-
-  useEffect(() => {
-    setAllowed(true);
-  }, []);
-
-  return allowed;
-}
diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx
index 014b52830ac..cafaf767fac 100644
--- a/packages/main/src/internal/withWebComponent.tsx
+++ b/packages/main/src/internal/withWebComponent.tsx
@@ -5,7 +5,6 @@ import { useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-
 import type { ComponentType, ReactElement, ReactNode, Ref } from 'react';
 import { cloneElement, forwardRef, Fragment, isValidElement, useEffect, useState, version } from 'react';
 import type { CommonProps, Ui5DomRef } from '../types/index.js';
-import { useServerSideEffect } from './ssr.js';
 import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, parseSemVer } from './utils.js';
 
 const createEventPropName = (eventName: string) => `on${capitalizeFirstLetter(kebabToCamelCase(eventName))}`;
@@ -32,8 +31,7 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
   regularProperties: string[],
   booleanProperties: string[],
   slotProperties: string[],
-  eventProperties: string[],
-  loader: () => Promise<unknown>
+  eventProperties: string[]
 ) => {
   const webComponentsSupported = parseSemVer(version).major >= 19;
   // displayName will be assigned in the individual files
@@ -48,10 +46,6 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
 
     const [isDefined, setIsDefined] = useState(definedWebComponents.has(Component));
 
-    useServerSideEffect(() => {
-      void loader();
-    });
-
     // regular props (no booleans, no slots and no events)
     const regularProps = regularProperties.reduce((acc, name) => {
       if (rest.hasOwnProperty(name) && isPrimitiveAttribute(rest[name])) {
diff --git a/packages/main/src/webComponents/Avatar/index.tsx b/packages/main/src/webComponents/Avatar/index.tsx
index 0fe066e8960..27749cfeaaa 100644
--- a/packages/main/src/webComponents/Avatar/index.tsx
+++ b/packages/main/src/webComponents/Avatar/index.tsx
@@ -160,8 +160,7 @@ const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
   ['accessibilityAttributes', 'accessibleName', 'colorScheme', 'fallbackIcon', 'icon', 'initials', 'shape', 'size'],
   ['disabled', 'interactive'],
   ['badge'],
-  [],
-  () => import('@ui5/webcomponents/dist/Avatar.js')
+  []
 );
 
 Avatar.displayName = 'Avatar';
diff --git a/packages/main/src/webComponents/AvatarGroup/index.tsx b/packages/main/src/webComponents/AvatarGroup/index.tsx
index 855fd712d2a..62f0714daa6 100644
--- a/packages/main/src/webComponents/AvatarGroup/index.tsx
+++ b/packages/main/src/webComponents/AvatarGroup/index.tsx
@@ -144,8 +144,7 @@ const AvatarGroup = withWebComponent<AvatarGroupPropTypes, AvatarGroupDomRef>(
   ['accessibilityAttributes', 'type'],
   [],
   ['overflowButton'],
-  ['click', 'overflow'],
-  () => import('@ui5/webcomponents/dist/AvatarGroup.js')
+  ['click', 'overflow']
 );
 
 AvatarGroup.displayName = 'AvatarGroup';
diff --git a/packages/main/src/webComponents/Bar/index.tsx b/packages/main/src/webComponents/Bar/index.tsx
index 670a3b1cadf..6984045de46 100644
--- a/packages/main/src/webComponents/Bar/index.tsx
+++ b/packages/main/src/webComponents/Bar/index.tsx
@@ -73,14 +73,7 @@ interface BarPropTypes
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
-const Bar = withWebComponent<BarPropTypes, BarDomRef>(
-  'ui5-bar',
-  ['design'],
-  [],
-  ['endContent', 'startContent'],
-  [],
-  () => import('@ui5/webcomponents/dist/Bar.js')
-);
+const Bar = withWebComponent<BarPropTypes, BarDomRef>('ui5-bar', ['design'], [], ['endContent', 'startContent'], []);
 
 Bar.displayName = 'Bar';
 
diff --git a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx
index d5bdd31c759..1eaec90547a 100644
--- a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx
+++ b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx
@@ -59,8 +59,7 @@ const BarcodeScannerDialog = withWebComponent<BarcodeScannerDialogPropTypes, Bar
   [],
   ['open'],
   [],
-  ['close', 'scan-error', 'scan-success'],
-  () => import('@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js')
+  ['close', 'scan-error', 'scan-success']
 );
 
 BarcodeScannerDialog.displayName = 'BarcodeScannerDialog';
diff --git a/packages/main/src/webComponents/Breadcrumbs/index.tsx b/packages/main/src/webComponents/Breadcrumbs/index.tsx
index 6bc99a59cbc..213124ae764 100644
--- a/packages/main/src/webComponents/Breadcrumbs/index.tsx
+++ b/packages/main/src/webComponents/Breadcrumbs/index.tsx
@@ -76,8 +76,7 @@ const Breadcrumbs = withWebComponent<BreadcrumbsPropTypes, BreadcrumbsDomRef>(
   ['design', 'separators'],
   [],
   [],
-  ['item-click'],
-  () => import('@ui5/webcomponents/dist/Breadcrumbs.js')
+  ['item-click']
 );
 
 Breadcrumbs.displayName = 'Breadcrumbs';
diff --git a/packages/main/src/webComponents/BreadcrumbsItem/index.tsx b/packages/main/src/webComponents/BreadcrumbsItem/index.tsx
index 943e1f81a96..8bc9e1ba58d 100644
--- a/packages/main/src/webComponents/BreadcrumbsItem/index.tsx
+++ b/packages/main/src/webComponents/BreadcrumbsItem/index.tsx
@@ -61,8 +61,7 @@ const BreadcrumbsItem = withWebComponent<BreadcrumbsItemPropTypes, BreadcrumbsIt
   ['accessibleName', 'href', 'target'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/BreadcrumbsItem.js')
+  []
 );
 
 BreadcrumbsItem.displayName = 'BreadcrumbsItem';
diff --git a/packages/main/src/webComponents/BusyIndicator/index.tsx b/packages/main/src/webComponents/BusyIndicator/index.tsx
index f7dc9bf42ad..39581337089 100644
--- a/packages/main/src/webComponents/BusyIndicator/index.tsx
+++ b/packages/main/src/webComponents/BusyIndicator/index.tsx
@@ -84,8 +84,7 @@ const BusyIndicator = withWebComponent<BusyIndicatorPropTypes, BusyIndicatorDomR
   ['delay', 'size', 'text', 'textPlacement'],
   ['active'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/BusyIndicator.js')
+  []
 );
 
 BusyIndicator.displayName = 'BusyIndicator';
diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx
index dcaf29a1b4b..633b7ff00a8 100644
--- a/packages/main/src/webComponents/Button/index.tsx
+++ b/packages/main/src/webComponents/Button/index.tsx
@@ -177,8 +177,7 @@ const Button = withWebComponent<ButtonPropTypes, ButtonDomRef>(
   ],
   ['disabled', 'submits'],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/Button.js')
+  ['click']
 );
 
 Button.displayName = 'Button';
diff --git a/packages/main/src/webComponents/Calendar/index.tsx b/packages/main/src/webComponents/Calendar/index.tsx
index 5509fc280eb..c64439e0a71 100644
--- a/packages/main/src/webComponents/Calendar/index.tsx
+++ b/packages/main/src/webComponents/Calendar/index.tsx
@@ -206,8 +206,7 @@ const Calendar = withWebComponent<CalendarPropTypes, CalendarDomRef>(
   ['formatPattern', 'maxDate', 'minDate', 'primaryCalendarType', 'secondaryCalendarType', 'selectionMode'],
   ['hideWeekNumbers'],
   ['calendarLegend', 'specialDates'],
-  ['selection-change'],
-  () => import('@ui5/webcomponents/dist/Calendar.js')
+  ['selection-change']
 );
 
 Calendar.displayName = 'Calendar';
diff --git a/packages/main/src/webComponents/CalendarDate/index.tsx b/packages/main/src/webComponents/CalendarDate/index.tsx
index ddbff50821c..4896c7ac361 100644
--- a/packages/main/src/webComponents/CalendarDate/index.tsx
+++ b/packages/main/src/webComponents/CalendarDate/index.tsx
@@ -22,14 +22,7 @@ interface CalendarDatePropTypes extends CalendarDateAttributes, Omit<CommonProps
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  * @abstract
  */
-const CalendarDate = withWebComponent<CalendarDatePropTypes, CalendarDateDomRef>(
-  'ui5-date',
-  ['value'],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarDate.js')
-);
+const CalendarDate = withWebComponent<CalendarDatePropTypes, CalendarDateDomRef>('ui5-date', ['value'], [], [], []);
 
 CalendarDate.displayName = 'CalendarDate';
 
diff --git a/packages/main/src/webComponents/CalendarDateRange/index.tsx b/packages/main/src/webComponents/CalendarDateRange/index.tsx
index d1eb4eb9ede..d936b7a1109 100644
--- a/packages/main/src/webComponents/CalendarDateRange/index.tsx
+++ b/packages/main/src/webComponents/CalendarDateRange/index.tsx
@@ -37,8 +37,7 @@ const CalendarDateRange = withWebComponent<CalendarDateRangePropTypes, CalendarD
   ['endValue', 'startValue'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarDateRange.js')
+  []
 );
 
 CalendarDateRange.displayName = 'CalendarDateRange';
diff --git a/packages/main/src/webComponents/CalendarLegend/index.tsx b/packages/main/src/webComponents/CalendarLegend/index.tsx
index c2984a1f504..00ab241ddac 100644
--- a/packages/main/src/webComponents/CalendarLegend/index.tsx
+++ b/packages/main/src/webComponents/CalendarLegend/index.tsx
@@ -58,8 +58,7 @@ const CalendarLegend = withWebComponent<CalendarLegendPropTypes, CalendarLegendD
   [],
   ['hideNonWorkingDay', 'hideSelectedDay', 'hideToday', 'hideWorkingDay'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarLegend.js')
+  []
 );
 
 CalendarLegend.displayName = 'CalendarLegend';
diff --git a/packages/main/src/webComponents/CalendarLegendItem/index.tsx b/packages/main/src/webComponents/CalendarLegendItem/index.tsx
index df3a5aeee91..06d03610184 100644
--- a/packages/main/src/webComponents/CalendarLegendItem/index.tsx
+++ b/packages/main/src/webComponents/CalendarLegendItem/index.tsx
@@ -45,8 +45,7 @@ const CalendarLegendItem = withWebComponent<CalendarLegendItemPropTypes, Calenda
   ['text', 'type'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarLegendItem.js')
+  []
 );
 
 CalendarLegendItem.displayName = 'CalendarLegendItem';
diff --git a/packages/main/src/webComponents/Card/index.tsx b/packages/main/src/webComponents/Card/index.tsx
index 11dd4cc9b62..3e305b239cd 100644
--- a/packages/main/src/webComponents/Card/index.tsx
+++ b/packages/main/src/webComponents/Card/index.tsx
@@ -78,8 +78,7 @@ const Card = withWebComponent<CardPropTypes, CardDomRef>(
   ['accessibleName', 'accessibleNameRef', 'loadingDelay'],
   ['loading'],
   ['header'],
-  [],
-  () => import('@ui5/webcomponents/dist/Card.js')
+  []
 );
 
 Card.displayName = 'Card';
diff --git a/packages/main/src/webComponents/CardHeader/index.tsx b/packages/main/src/webComponents/CardHeader/index.tsx
index 710af0a0946..92083eedaa7 100644
--- a/packages/main/src/webComponents/CardHeader/index.tsx
+++ b/packages/main/src/webComponents/CardHeader/index.tsx
@@ -82,8 +82,7 @@ const CardHeader = withWebComponent<CardHeaderPropTypes, CardHeaderDomRef>(
   ['additionalText', 'subtitleText', 'titleText'],
   ['interactive'],
   ['action', 'avatar'],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/CardHeader.js')
+  ['click']
 );
 
 CardHeader.displayName = 'CardHeader';
diff --git a/packages/main/src/webComponents/Carousel/index.tsx b/packages/main/src/webComponents/Carousel/index.tsx
index 476462c8aa5..836c89ce734 100644
--- a/packages/main/src/webComponents/Carousel/index.tsx
+++ b/packages/main/src/webComponents/Carousel/index.tsx
@@ -194,8 +194,7 @@ const Carousel = withWebComponent<CarouselPropTypes, CarouselDomRef>(
   ],
   ['cyclic', 'hideNavigationArrows', 'hidePageIndicator'],
   [],
-  ['navigate'],
-  () => import('@ui5/webcomponents/dist/Carousel.js')
+  ['navigate']
 );
 
 Carousel.displayName = 'Carousel';
diff --git a/packages/main/src/webComponents/CheckBox/index.tsx b/packages/main/src/webComponents/CheckBox/index.tsx
index 66fda0dd13f..8518a596914 100644
--- a/packages/main/src/webComponents/CheckBox/index.tsx
+++ b/packages/main/src/webComponents/CheckBox/index.tsx
@@ -163,8 +163,7 @@ const CheckBox = withWebComponent<CheckBoxPropTypes, CheckBoxDomRef>(
   ['accessibleName', 'accessibleNameRef', 'name', 'text', 'valueState', 'wrappingType'],
   ['checked', 'disabled', 'displayOnly', 'indeterminate', 'readonly', 'required'],
   [],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/CheckBox.js')
+  ['change']
 );
 
 CheckBox.displayName = 'CheckBox';
diff --git a/packages/main/src/webComponents/ColorPalette/index.tsx b/packages/main/src/webComponents/ColorPalette/index.tsx
index c4244fd8585..cf02dc17015 100644
--- a/packages/main/src/webComponents/ColorPalette/index.tsx
+++ b/packages/main/src/webComponents/ColorPalette/index.tsx
@@ -38,8 +38,7 @@ const ColorPalette = withWebComponent<ColorPalettePropTypes, ColorPaletteDomRef>
   [],
   [],
   [],
-  ['item-click'],
-  () => import('@ui5/webcomponents/dist/ColorPalette.js')
+  ['item-click']
 );
 
 ColorPalette.displayName = 'ColorPalette';
diff --git a/packages/main/src/webComponents/ColorPaletteItem/index.tsx b/packages/main/src/webComponents/ColorPaletteItem/index.tsx
index faa3e6b434b..6c53b50c93c 100644
--- a/packages/main/src/webComponents/ColorPaletteItem/index.tsx
+++ b/packages/main/src/webComponents/ColorPaletteItem/index.tsx
@@ -40,8 +40,7 @@ const ColorPaletteItem = withWebComponent<ColorPaletteItemPropTypes, ColorPalett
   ['value'],
   ['selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/ColorPaletteItem.js')
+  []
 );
 
 ColorPaletteItem.displayName = 'ColorPaletteItem';
diff --git a/packages/main/src/webComponents/ColorPalettePopover/index.tsx b/packages/main/src/webComponents/ColorPalettePopover/index.tsx
index 7d25d09ff62..154c44fc0b2 100644
--- a/packages/main/src/webComponents/ColorPalettePopover/index.tsx
+++ b/packages/main/src/webComponents/ColorPalettePopover/index.tsx
@@ -99,8 +99,7 @@ const ColorPalettePopover = withWebComponent<ColorPalettePopoverPropTypes, Color
   ['defaultColor', 'opener'],
   ['open', 'showDefaultColor', 'showMoreColors', 'showRecentColors'],
   [],
-  ['close', 'item-click'],
-  () => import('@ui5/webcomponents/dist/ColorPalettePopover.js')
+  ['close', 'item-click']
 );
 
 ColorPalettePopover.displayName = 'ColorPalettePopover';
diff --git a/packages/main/src/webComponents/ColorPicker/index.tsx b/packages/main/src/webComponents/ColorPicker/index.tsx
index fd24af638d0..87e0b317af3 100644
--- a/packages/main/src/webComponents/ColorPicker/index.tsx
+++ b/packages/main/src/webComponents/ColorPicker/index.tsx
@@ -58,8 +58,7 @@ const ColorPicker = withWebComponent<ColorPickerPropTypes, ColorPickerDomRef>(
   ['name', 'value'],
   [],
   [],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/ColorPicker.js')
+  ['change']
 );
 
 ColorPicker.displayName = 'ColorPicker';
diff --git a/packages/main/src/webComponents/ComboBox/index.tsx b/packages/main/src/webComponents/ComboBox/index.tsx
index 295568a3869..2caa98bd9f9 100644
--- a/packages/main/src/webComponents/ComboBox/index.tsx
+++ b/packages/main/src/webComponents/ComboBox/index.tsx
@@ -200,8 +200,7 @@ const ComboBox = withWebComponent<ComboBoxPropTypes, ComboBoxDomRef>(
   ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'value', 'valueState'],
   ['disabled', 'loading', 'noTypeahead', 'readonly', 'required', 'showClearIcon'],
   ['icon', 'valueStateMessage'],
-  ['change', 'input', 'selection-change'],
-  () => import('@ui5/webcomponents/dist/ComboBox.js')
+  ['change', 'input', 'selection-change']
 );
 
 ComboBox.displayName = 'ComboBox';
diff --git a/packages/main/src/webComponents/ComboBoxItem/index.tsx b/packages/main/src/webComponents/ComboBoxItem/index.tsx
index 54c7879e917..2681d9ab3a8 100644
--- a/packages/main/src/webComponents/ComboBoxItem/index.tsx
+++ b/packages/main/src/webComponents/ComboBoxItem/index.tsx
@@ -33,8 +33,7 @@ const ComboBoxItem = withWebComponent<ComboBoxItemPropTypes, ComboBoxItemDomRef>
   ['additionalText', 'text'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/ComboBoxItem.js')
+  []
 );
 
 ComboBoxItem.displayName = 'ComboBoxItem';
diff --git a/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx b/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx
index 6b20e0e446c..71ab8dd8199 100644
--- a/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx
+++ b/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx
@@ -36,8 +36,7 @@ const ComboBoxItemGroup = withWebComponent<ComboBoxItemGroupPropTypes, ComboBoxI
   ['headerText'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/ComboBoxItemGroup.js')
+  []
 );
 
 ComboBoxItemGroup.displayName = 'ComboBoxItemGroup';
diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx
index 66ac4605370..b89dc4e0dea 100644
--- a/packages/main/src/webComponents/DatePicker/index.tsx
+++ b/packages/main/src/webComponents/DatePicker/index.tsx
@@ -287,8 +287,7 @@ const DatePicker = withWebComponent<DatePickerPropTypes, DatePickerDomRef>(
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change'],
-  () => import('@ui5/webcomponents/dist/DatePicker.js')
+  ['change', 'input', 'value-state-change']
 );
 
 DatePicker.displayName = 'DatePicker';
diff --git a/packages/main/src/webComponents/DateRangePicker/index.tsx b/packages/main/src/webComponents/DateRangePicker/index.tsx
index 5089f5e866c..1ae422ac55f 100644
--- a/packages/main/src/webComponents/DateRangePicker/index.tsx
+++ b/packages/main/src/webComponents/DateRangePicker/index.tsx
@@ -262,8 +262,7 @@ const DateRangePicker = withWebComponent<DateRangePickerPropTypes, DateRangePick
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change'],
-  () => import('@ui5/webcomponents/dist/DateRangePicker.js')
+  ['change', 'input', 'value-state-change']
 );
 
 DateRangePicker.displayName = 'DateRangePicker';
diff --git a/packages/main/src/webComponents/DateTimePicker/index.tsx b/packages/main/src/webComponents/DateTimePicker/index.tsx
index 5b74fae6369..9b8e8521c4b 100644
--- a/packages/main/src/webComponents/DateTimePicker/index.tsx
+++ b/packages/main/src/webComponents/DateTimePicker/index.tsx
@@ -269,8 +269,7 @@ const DateTimePicker = withWebComponent<DateTimePickerPropTypes, DateTimePickerD
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change'],
-  () => import('@ui5/webcomponents/dist/DateTimePicker.js')
+  ['change', 'input', 'value-state-change']
 );
 
 DateTimePicker.displayName = 'DateTimePicker';
diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx
index 98959e75b48..f602fadf1d8 100644
--- a/packages/main/src/webComponents/Dialog/index.tsx
+++ b/packages/main/src/webComponents/Dialog/index.tsx
@@ -247,8 +247,7 @@ const Dialog = withWebComponent<DialogPropTypes, DialogDomRef>(
   ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'headerText', 'initialFocus', 'state'],
   ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'stretch'],
   ['footer', 'header'],
-  ['before-close', 'before-open', 'close', 'open'],
-  () => import('@ui5/webcomponents/dist/Dialog.js')
+  ['before-close', 'before-open', 'close', 'open']
 );
 
 Dialog.displayName = 'Dialog';
diff --git a/packages/main/src/webComponents/DynamicPage/index.tsx b/packages/main/src/webComponents/DynamicPage/index.tsx
index e98fdee0519..72953146a81 100644
--- a/packages/main/src/webComponents/DynamicPage/index.tsx
+++ b/packages/main/src/webComponents/DynamicPage/index.tsx
@@ -149,8 +149,7 @@ const DynamicPage = withWebComponent<DynamicPagePropTypes, DynamicPageDomRef>(
   [],
   ['headerPinned', 'headerSnapped', 'hidePinButton', 'showFooter'],
   ['footerArea', 'headerArea', 'titleArea'],
-  ['pin-button-toggle', 'title-toggle'],
-  () => import('@ui5/webcomponents-fiori/dist/DynamicPage.js')
+  ['pin-button-toggle', 'title-toggle']
 );
 
 DynamicPage.displayName = 'DynamicPage';
diff --git a/packages/main/src/webComponents/DynamicPageHeader/index.tsx b/packages/main/src/webComponents/DynamicPageHeader/index.tsx
index d163238720e..a4fe93bf64f 100644
--- a/packages/main/src/webComponents/DynamicPageHeader/index.tsx
+++ b/packages/main/src/webComponents/DynamicPageHeader/index.tsx
@@ -44,8 +44,7 @@ const DynamicPageHeader = withWebComponent<DynamicPageHeaderPropTypes, DynamicPa
   [],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/DynamicPageHeader.js')
+  []
 );
 
 DynamicPageHeader.displayName = 'DynamicPageHeader';
diff --git a/packages/main/src/webComponents/DynamicPageTitle/index.tsx b/packages/main/src/webComponents/DynamicPageTitle/index.tsx
index 622daf37a4a..e9daa369e0b 100644
--- a/packages/main/src/webComponents/DynamicPageTitle/index.tsx
+++ b/packages/main/src/webComponents/DynamicPageTitle/index.tsx
@@ -144,8 +144,7 @@ const DynamicPageTitle = withWebComponent<DynamicPageTitlePropTypes, DynamicPage
   [],
   [],
   ['actionsBar', 'breadcrumbs', 'heading', 'navigationBar', 'snappedHeading', 'snappedSubheading', 'subheading'],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/DynamicPageTitle.js')
+  []
 );
 
 DynamicPageTitle.displayName = 'DynamicPageTitle';
diff --git a/packages/main/src/webComponents/DynamicSideContent/index.tsx b/packages/main/src/webComponents/DynamicSideContent/index.tsx
index 2f2e5517992..04ae841dbbc 100644
--- a/packages/main/src/webComponents/DynamicSideContent/index.tsx
+++ b/packages/main/src/webComponents/DynamicSideContent/index.tsx
@@ -153,8 +153,7 @@ const DynamicSideContent = withWebComponent<DynamicSideContentPropTypes, Dynamic
   ['sideContentFallDown', 'sideContentPosition', 'sideContentVisibility'],
   ['equalSplit', 'hideMainContent', 'hideSideContent'],
   ['sideContent'],
-  ['layout-change'],
-  () => import('@ui5/webcomponents-fiori/dist/DynamicSideContent.js')
+  ['layout-change']
 );
 
 DynamicSideContent.displayName = 'DynamicSideContent';
diff --git a/packages/main/src/webComponents/FileUploader/index.tsx b/packages/main/src/webComponents/FileUploader/index.tsx
index cd4a779cd8b..036e1f9ee1e 100644
--- a/packages/main/src/webComponents/FileUploader/index.tsx
+++ b/packages/main/src/webComponents/FileUploader/index.tsx
@@ -124,8 +124,7 @@ const FileUploader = withWebComponent<FileUploaderPropTypes, FileUploaderDomRef>
   ['accept', 'name', 'placeholder', 'value', 'valueState'],
   ['disabled', 'hideInput', 'multiple'],
   ['valueStateMessage'],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/FileUploader.js')
+  ['change']
 );
 
 FileUploader.displayName = 'FileUploader';
diff --git a/packages/main/src/webComponents/FilterItem/index.tsx b/packages/main/src/webComponents/FilterItem/index.tsx
index 7705b722914..ac66421a97e 100644
--- a/packages/main/src/webComponents/FilterItem/index.tsx
+++ b/packages/main/src/webComponents/FilterItem/index.tsx
@@ -47,8 +47,7 @@ const FilterItem = withWebComponent<FilterItemPropTypes, FilterItemDomRef>(
   ['additionalText', 'text'],
   [],
   ['values'],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/FilterItem.js')
+  []
 );
 
 FilterItem.displayName = 'FilterItem';
diff --git a/packages/main/src/webComponents/FilterItemOption/index.tsx b/packages/main/src/webComponents/FilterItemOption/index.tsx
index eed69dc27e2..0df400343cd 100644
--- a/packages/main/src/webComponents/FilterItemOption/index.tsx
+++ b/packages/main/src/webComponents/FilterItemOption/index.tsx
@@ -38,8 +38,7 @@ const FilterItemOption = withWebComponent<FilterItemOptionPropTypes, FilterItemO
   ['text'],
   ['selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/FilterItemOption.js')
+  []
 );
 
 FilterItemOption.displayName = 'FilterItemOption';
diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx
index 8439fe4951e..360ab00eeb9 100644
--- a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx
+++ b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx
@@ -180,8 +180,7 @@ const FlexibleColumnLayout = withWebComponent<FlexibleColumnLayoutPropTypes, Fle
   ['accessibilityAttributes', 'layout'],
   ['disableResizing'],
   ['endColumn', 'midColumn', 'startColumn'],
-  ['layout-change'],
-  () => import('@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js')
+  ['layout-change']
 );
 
 FlexibleColumnLayout.displayName = 'FlexibleColumnLayout';
diff --git a/packages/main/src/webComponents/Form/index.tsx b/packages/main/src/webComponents/Form/index.tsx
index 9e32b91545e..a1ba89db1e8 100644
--- a/packages/main/src/webComponents/Form/index.tsx
+++ b/packages/main/src/webComponents/Form/index.tsx
@@ -159,8 +159,7 @@ const Form = withWebComponent<FormPropTypes, FormDomRef>(
   ['headerText', 'itemSpacing', 'labelSpan', 'layout'],
   [],
   ['header'],
-  [],
-  () => import('@ui5/webcomponents/dist/Form.js')
+  []
 );
 
 Form.displayName = 'Form';
diff --git a/packages/main/src/webComponents/FormGroup/index.tsx b/packages/main/src/webComponents/FormGroup/index.tsx
index 40e4eb63ac0..1954e3492a4 100644
--- a/packages/main/src/webComponents/FormGroup/index.tsx
+++ b/packages/main/src/webComponents/FormGroup/index.tsx
@@ -55,8 +55,7 @@ const FormGroup = withWebComponent<FormGroupPropTypes, FormGroupDomRef>(
   ['columnSpan', 'headerText'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/FormGroup.js')
+  []
 );
 
 FormGroup.displayName = 'FormGroup';
diff --git a/packages/main/src/webComponents/FormItem/index.tsx b/packages/main/src/webComponents/FormItem/index.tsx
index a6724c3c974..ff9d1c5c5be 100644
--- a/packages/main/src/webComponents/FormItem/index.tsx
+++ b/packages/main/src/webComponents/FormItem/index.tsx
@@ -62,8 +62,7 @@ const FormItem = withWebComponent<FormItemPropTypes, FormItemDomRef>(
   ['columnSpan'],
   [],
   ['labelContent'],
-  [],
-  () => import('@ui5/webcomponents/dist/FormItem.js')
+  []
 );
 
 FormItem.displayName = 'FormItem';
diff --git a/packages/main/src/webComponents/Icon/index.tsx b/packages/main/src/webComponents/Icon/index.tsx
index 7f3fc907209..1bd8c9bed7a 100644
--- a/packages/main/src/webComponents/Icon/index.tsx
+++ b/packages/main/src/webComponents/Icon/index.tsx
@@ -139,8 +139,7 @@ const Icon = withWebComponent<IconPropTypes, IconDomRef>(
   ['accessibleName', 'design', 'mode', 'name'],
   ['showTooltip'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/Icon.js')
+  []
 );
 
 Icon.displayName = 'Icon';
diff --git a/packages/main/src/webComponents/IllustratedMessage/index.tsx b/packages/main/src/webComponents/IllustratedMessage/index.tsx
index 2e707881335..ee4910498c0 100644
--- a/packages/main/src/webComponents/IllustratedMessage/index.tsx
+++ b/packages/main/src/webComponents/IllustratedMessage/index.tsx
@@ -149,8 +149,7 @@ const IllustratedMessage = withWebComponent<IllustratedMessagePropTypes, Illustr
   ['accessibleNameRef', 'design', 'name', 'subtitleText', 'titleText'],
   [],
   ['subtitle', 'title'],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/IllustratedMessage.js')
+  []
 );
 
 IllustratedMessage.displayName = 'IllustratedMessage';
diff --git a/packages/main/src/webComponents/Input/index.tsx b/packages/main/src/webComponents/Input/index.tsx
index 309b52e8a89..1de197ab311 100644
--- a/packages/main/src/webComponents/Input/index.tsx
+++ b/packages/main/src/webComponents/Input/index.tsx
@@ -273,8 +273,7 @@ const Input = withWebComponent<InputPropTypes, InputDomRef>(
   ['accessibleName', 'accessibleNameRef', 'maxlength', 'name', 'placeholder', 'type', 'value', 'valueState'],
   ['disabled', 'noTypeahead', 'open', 'readonly', 'required', 'showClearIcon', 'showSuggestions'],
   ['icon', 'valueStateMessage'],
-  ['change', 'close', 'input', 'open', 'select', 'selection-change'],
-  () => import('@ui5/webcomponents/dist/Input.js')
+  ['change', 'close', 'input', 'open', 'select', 'selection-change']
 );
 
 Input.displayName = 'Input';
diff --git a/packages/main/src/webComponents/Label/index.tsx b/packages/main/src/webComponents/Label/index.tsx
index 43b9f9844d6..fa9e9980bf6 100644
--- a/packages/main/src/webComponents/Label/index.tsx
+++ b/packages/main/src/webComponents/Label/index.tsx
@@ -72,8 +72,7 @@ const Label = withWebComponent<LabelPropTypes, LabelDomRef>(
   ['for', 'wrappingType'],
   ['required', 'showColon'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/Label.js')
+  []
 );
 
 Label.displayName = 'Label';
diff --git a/packages/main/src/webComponents/Link/index.tsx b/packages/main/src/webComponents/Link/index.tsx
index 855601e82c4..33785576907 100644
--- a/packages/main/src/webComponents/Link/index.tsx
+++ b/packages/main/src/webComponents/Link/index.tsx
@@ -200,8 +200,7 @@ const Link = withWebComponent<LinkPropTypes, LinkDomRef>(
   ],
   ['disabled'],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/Link.js')
+  ['click']
 );
 
 Link.displayName = 'Link';
diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx
index 32454b4bf53..f0c0ceba050 100644
--- a/packages/main/src/webComponents/List/index.tsx
+++ b/packages/main/src/webComponents/List/index.tsx
@@ -287,8 +287,7 @@ const List = withWebComponent<ListPropTypes, ListDomRef>(
   ],
   ['indent', 'loading'],
   ['header'],
-  ['item-click', 'item-close', 'item-delete', 'item-toggle', 'load-more', 'move-over', 'move', 'selection-change'],
-  () => import('@ui5/webcomponents/dist/List.js')
+  ['item-click', 'item-close', 'item-delete', 'item-toggle', 'load-more', 'move-over', 'move', 'selection-change']
 );
 
 List.displayName = 'List';
diff --git a/packages/main/src/webComponents/ListItemCustom/index.tsx b/packages/main/src/webComponents/ListItemCustom/index.tsx
index 17e5b359bf3..29089d0761e 100644
--- a/packages/main/src/webComponents/ListItemCustom/index.tsx
+++ b/packages/main/src/webComponents/ListItemCustom/index.tsx
@@ -127,8 +127,7 @@ const ListItemCustom = withWebComponent<ListItemCustomPropTypes, ListItemCustomD
   ['accessibilityAttributes', 'accessibleName', 'highlight', 'tooltip', 'type'],
   ['movable', 'navigated', 'selected'],
   ['deleteButton'],
-  ['detail-click'],
-  () => import('@ui5/webcomponents/dist/ListItemCustom.js')
+  ['detail-click']
 );
 
 ListItemCustom.displayName = 'ListItemCustom';
diff --git a/packages/main/src/webComponents/ListItemGroup/index.tsx b/packages/main/src/webComponents/ListItemGroup/index.tsx
index 0652dee489b..c80da4f7001 100644
--- a/packages/main/src/webComponents/ListItemGroup/index.tsx
+++ b/packages/main/src/webComponents/ListItemGroup/index.tsx
@@ -81,8 +81,7 @@ const ListItemGroup = withWebComponent<ListItemGroupPropTypes, ListItemGroupDomR
   ['headerAccessibleName', 'headerText'],
   [],
   ['header'],
-  ['move-over', 'move'],
-  () => import('@ui5/webcomponents/dist/ListItemGroup.js')
+  ['move-over', 'move']
 );
 
 ListItemGroup.displayName = 'ListItemGroup';
diff --git a/packages/main/src/webComponents/ListItemStandard/index.tsx b/packages/main/src/webComponents/ListItemStandard/index.tsx
index 9f28fc42871..8d7b9a0a89c 100644
--- a/packages/main/src/webComponents/ListItemStandard/index.tsx
+++ b/packages/main/src/webComponents/ListItemStandard/index.tsx
@@ -193,8 +193,7 @@ const ListItemStandard = withWebComponent<ListItemStandardPropTypes, ListItemSta
   ],
   ['iconEnd', 'movable', 'navigated', 'selected'],
   ['deleteButton', 'image'],
-  ['detail-click'],
-  () => import('@ui5/webcomponents/dist/ListItemStandard.js')
+  ['detail-click']
 );
 
 ListItemStandard.displayName = 'ListItemStandard';
diff --git a/packages/main/src/webComponents/MediaGallery/index.tsx b/packages/main/src/webComponents/MediaGallery/index.tsx
index 52834142e44..2dce042c173 100644
--- a/packages/main/src/webComponents/MediaGallery/index.tsx
+++ b/packages/main/src/webComponents/MediaGallery/index.tsx
@@ -118,8 +118,7 @@ const MediaGallery = withWebComponent<MediaGalleryPropTypes, MediaGalleryDomRef>
   ['layout', 'menuHorizontalAlign', 'menuVerticalAlign'],
   ['interactiveDisplayArea', 'showAllThumbnails'],
   [],
-  ['display-area-click', 'overflow-click', 'selection-change'],
-  () => import('@ui5/webcomponents-fiori/dist/MediaGallery.js')
+  ['display-area-click', 'overflow-click', 'selection-change']
 );
 
 MediaGallery.displayName = 'MediaGallery';
diff --git a/packages/main/src/webComponents/MediaGalleryItem/index.tsx b/packages/main/src/webComponents/MediaGalleryItem/index.tsx
index 52f93107da8..e6fc64500c8 100644
--- a/packages/main/src/webComponents/MediaGalleryItem/index.tsx
+++ b/packages/main/src/webComponents/MediaGalleryItem/index.tsx
@@ -72,8 +72,7 @@ const MediaGalleryItem = withWebComponent<MediaGalleryItemPropTypes, MediaGaller
   ['layout'],
   ['disabled', 'selected'],
   ['thumbnail'],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/MediaGalleryItem.js')
+  []
 );
 
 MediaGalleryItem.displayName = 'MediaGalleryItem';
diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx
index 4f039b67ed8..e2fbda22677 100644
--- a/packages/main/src/webComponents/Menu/index.tsx
+++ b/packages/main/src/webComponents/Menu/index.tsx
@@ -145,8 +145,7 @@ const Menu = withWebComponent<MenuPropTypes, MenuDomRef>(
   ['headerText', 'loadingDelay', 'opener'],
   ['loading', 'open'],
   [],
-  ['before-close', 'before-open', 'close', 'item-click', 'open'],
-  () => import('@ui5/webcomponents/dist/Menu.js')
+  ['before-close', 'before-open', 'close', 'item-click', 'open']
 );
 
 Menu.displayName = 'Menu';
diff --git a/packages/main/src/webComponents/MenuItem/index.tsx b/packages/main/src/webComponents/MenuItem/index.tsx
index bbf77cc991d..5b62bd705ce 100644
--- a/packages/main/src/webComponents/MenuItem/index.tsx
+++ b/packages/main/src/webComponents/MenuItem/index.tsx
@@ -222,8 +222,7 @@ const MenuItem = withWebComponent<MenuItemPropTypes, MenuItemDomRef>(
   ],
   ['disabled', 'loading', 'navigated', 'selected'],
   ['deleteButton', 'endContent'],
-  ['detail-click'],
-  () => import('@ui5/webcomponents/dist/MenuItem.js')
+  ['detail-click']
 );
 
 MenuItem.displayName = 'MenuItem';
diff --git a/packages/main/src/webComponents/MenuSeparator/index.tsx b/packages/main/src/webComponents/MenuSeparator/index.tsx
index 20568192efb..0e86bd9c161 100644
--- a/packages/main/src/webComponents/MenuSeparator/index.tsx
+++ b/packages/main/src/webComponents/MenuSeparator/index.tsx
@@ -22,8 +22,7 @@ const MenuSeparator = withWebComponent<MenuSeparatorPropTypes, MenuSeparatorDomR
   [],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/MenuSeparator.js')
+  []
 );
 
 MenuSeparator.displayName = 'MenuSeparator';
diff --git a/packages/main/src/webComponents/MessageStrip/index.tsx b/packages/main/src/webComponents/MessageStrip/index.tsx
index 110aa67a2cc..7da751813cc 100644
--- a/packages/main/src/webComponents/MessageStrip/index.tsx
+++ b/packages/main/src/webComponents/MessageStrip/index.tsx
@@ -101,8 +101,7 @@ const MessageStrip = withWebComponent<MessageStripPropTypes, MessageStripDomRef>
   ['colorScheme', 'design'],
   ['hideCloseButton', 'hideIcon'],
   ['icon'],
-  ['close'],
-  () => import('@ui5/webcomponents/dist/MessageStrip.js')
+  ['close']
 );
 
 MessageStrip.displayName = 'MessageStrip';
diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx
index e87a1123c91..66b4942e91e 100644
--- a/packages/main/src/webComponents/MultiComboBox/index.tsx
+++ b/packages/main/src/webComponents/MultiComboBox/index.tsx
@@ -238,8 +238,7 @@ const MultiComboBox = withWebComponent<MultiComboBoxPropTypes, MultiComboBoxDomR
   ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'value', 'valueState'],
   ['disabled', 'noTypeahead', 'noValidation', 'readonly', 'required', 'showClearIcon', 'showSelectAll'],
   ['icon', 'valueStateMessage'],
-  ['change', 'close', 'input', 'open', 'selection-change'],
-  () => import('@ui5/webcomponents/dist/MultiComboBox.js')
+  ['change', 'close', 'input', 'open', 'selection-change']
 );
 
 MultiComboBox.displayName = 'MultiComboBox';
diff --git a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx
index dd8fc3137a5..578ea25ab73 100644
--- a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx
+++ b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx
@@ -41,8 +41,7 @@ const MultiComboBoxItem = withWebComponent<MultiComboBoxItemPropTypes, MultiComb
   ['additionalText', 'text'],
   ['selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/MultiComboBoxItem.js')
+  []
 );
 
 MultiComboBoxItem.displayName = 'MultiComboBoxItem';
diff --git a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx
index 322395a983f..47217231b62 100644
--- a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx
+++ b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx
@@ -38,8 +38,7 @@ const MultiComboBoxItemGroup = withWebComponent<MultiComboBoxItemGroupPropTypes,
   ['headerText'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/MultiComboBoxItemGroup.js')
+  []
 );
 
 MultiComboBoxItemGroup.displayName = 'MultiComboBoxItemGroup';
diff --git a/packages/main/src/webComponents/MultiInput/index.tsx b/packages/main/src/webComponents/MultiInput/index.tsx
index d78fc33aa56..a70783dbafe 100644
--- a/packages/main/src/webComponents/MultiInput/index.tsx
+++ b/packages/main/src/webComponents/MultiInput/index.tsx
@@ -287,8 +287,7 @@ const MultiInput = withWebComponent<MultiInputPropTypes, MultiInputDomRef>(
   ['accessibleName', 'accessibleNameRef', 'maxlength', 'name', 'placeholder', 'type', 'value', 'valueState'],
   ['disabled', 'noTypeahead', 'open', 'readonly', 'required', 'showClearIcon', 'showSuggestions', 'showValueHelpIcon'],
   ['icon', 'tokens', 'valueStateMessage'],
-  ['change', 'close', 'input', 'open', 'select', 'selection-change', 'token-delete', 'value-help-trigger'],
-  () => import('@ui5/webcomponents/dist/MultiInput.js')
+  ['change', 'close', 'input', 'open', 'select', 'selection-change', 'token-delete', 'value-help-trigger']
 );
 
 MultiInput.displayName = 'MultiInput';
diff --git a/packages/main/src/webComponents/NotificationList/index.tsx b/packages/main/src/webComponents/NotificationList/index.tsx
index 184cad594b0..69f17e96350 100644
--- a/packages/main/src/webComponents/NotificationList/index.tsx
+++ b/packages/main/src/webComponents/NotificationList/index.tsx
@@ -77,8 +77,7 @@ const NotificationList = withWebComponent<NotificationListPropTypes, Notificatio
   ['noDataText'],
   [],
   [],
-  ['item-click', 'item-close', 'item-toggle'],
-  () => import('@ui5/webcomponents-fiori/dist/NotificationList.js')
+  ['item-click', 'item-close', 'item-toggle']
 );
 
 NotificationList.displayName = 'NotificationList';
diff --git a/packages/main/src/webComponents/NotificationListGroupItem/index.tsx b/packages/main/src/webComponents/NotificationListGroupItem/index.tsx
index 1c40f9c572f..2ffed974944 100644
--- a/packages/main/src/webComponents/NotificationListGroupItem/index.tsx
+++ b/packages/main/src/webComponents/NotificationListGroupItem/index.tsx
@@ -88,8 +88,7 @@ const NotificationListGroupItem = withWebComponent<NotificationListGroupItemProp
   ['loadingDelay', 'titleText'],
   ['collapsed', 'loading', 'read'],
   [],
-  ['toggle'],
-  () => import('@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js')
+  ['toggle']
 );
 
 NotificationListGroupItem.displayName = 'NotificationListGroupItem';
diff --git a/packages/main/src/webComponents/NotificationListItem/index.tsx b/packages/main/src/webComponents/NotificationListItem/index.tsx
index 5b98c3c0434..8dd96466bb0 100644
--- a/packages/main/src/webComponents/NotificationListItem/index.tsx
+++ b/packages/main/src/webComponents/NotificationListItem/index.tsx
@@ -168,8 +168,7 @@ const NotificationListItem = withWebComponent<NotificationListItemPropTypes, Not
   ['importance', 'loadingDelay', 'state', 'titleText', 'wrappingType'],
   ['loading', 'read', 'showClose'],
   ['avatar', 'footnotes', 'menu'],
-  ['close'],
-  () => import('@ui5/webcomponents-fiori/dist/NotificationListItem.js')
+  ['close']
 );
 
 NotificationListItem.displayName = 'NotificationListItem';
diff --git a/packages/main/src/webComponents/Option/index.tsx b/packages/main/src/webComponents/Option/index.tsx
index 72f5d528f57..64d0a98a0ec 100644
--- a/packages/main/src/webComponents/Option/index.tsx
+++ b/packages/main/src/webComponents/Option/index.tsx
@@ -67,8 +67,7 @@ const Option = withWebComponent<OptionPropTypes, OptionDomRef>(
   ['additionalText', 'icon', 'tooltip', 'value'],
   ['selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/Option.js')
+  []
 );
 
 Option.displayName = 'Option';
diff --git a/packages/main/src/webComponents/OptionCustom/index.tsx b/packages/main/src/webComponents/OptionCustom/index.tsx
index 79a4b53dae3..6d0fd9efa03 100644
--- a/packages/main/src/webComponents/OptionCustom/index.tsx
+++ b/packages/main/src/webComponents/OptionCustom/index.tsx
@@ -62,8 +62,7 @@ const OptionCustom = withWebComponent<OptionCustomPropTypes, OptionCustomDomRef>
   ['displayText', 'tooltip', 'value'],
   ['selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/OptionCustom.js')
+  []
 );
 
 OptionCustom.displayName = 'OptionCustom';
diff --git a/packages/main/src/webComponents/Page/index.tsx b/packages/main/src/webComponents/Page/index.tsx
index 5b3084b47f0..1be29665a19 100644
--- a/packages/main/src/webComponents/Page/index.tsx
+++ b/packages/main/src/webComponents/Page/index.tsx
@@ -95,8 +95,7 @@ const Page = withWebComponent<PagePropTypes, PageDomRef>(
   ['backgroundDesign'],
   ['fixedFooter', 'hideFooter', 'noScrolling'],
   ['footer', 'header'],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/Page.js')
+  []
 );
 
 Page.displayName = 'Page';
diff --git a/packages/main/src/webComponents/Panel/index.tsx b/packages/main/src/webComponents/Panel/index.tsx
index 2d981bd6f48..6d575faf9d1 100644
--- a/packages/main/src/webComponents/Panel/index.tsx
+++ b/packages/main/src/webComponents/Panel/index.tsx
@@ -146,8 +146,7 @@ const Panel = withWebComponent<PanelPropTypes, PanelDomRef>(
   ['accessibleName', 'accessibleRole', 'headerLevel', 'headerText'],
   ['collapsed', 'fixed', 'noAnimation', 'stickyHeader'],
   ['header'],
-  ['toggle'],
-  () => import('@ui5/webcomponents/dist/Panel.js')
+  ['toggle']
 );
 
 Panel.displayName = 'Panel';
diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx
index f806217eef9..cff174663a4 100644
--- a/packages/main/src/webComponents/Popover/index.tsx
+++ b/packages/main/src/webComponents/Popover/index.tsx
@@ -234,8 +234,7 @@ const Popover = withWebComponent<PopoverPropTypes, PopoverDomRef>(
   ],
   ['allowTargetOverlap', 'hideArrow', 'modal', 'open', 'preventFocusRestore', 'preventInitialFocus'],
   ['footer', 'header'],
-  ['before-close', 'before-open', 'close', 'open'],
-  () => import('@ui5/webcomponents/dist/Popover.js')
+  ['before-close', 'before-open', 'close', 'open']
 );
 
 Popover.displayName = 'Popover';
diff --git a/packages/main/src/webComponents/ProductSwitch/index.tsx b/packages/main/src/webComponents/ProductSwitch/index.tsx
index 20ed707f709..4a1c2bfeb3a 100644
--- a/packages/main/src/webComponents/ProductSwitch/index.tsx
+++ b/packages/main/src/webComponents/ProductSwitch/index.tsx
@@ -40,8 +40,7 @@ const ProductSwitch = withWebComponent<ProductSwitchPropTypes, ProductSwitchDomR
   [],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/ProductSwitch.js')
+  []
 );
 
 ProductSwitch.displayName = 'ProductSwitch';
diff --git a/packages/main/src/webComponents/ProductSwitchItem/index.tsx b/packages/main/src/webComponents/ProductSwitchItem/index.tsx
index 7bc53a3b16b..5fec409b8ac 100644
--- a/packages/main/src/webComponents/ProductSwitchItem/index.tsx
+++ b/packages/main/src/webComponents/ProductSwitchItem/index.tsx
@@ -86,8 +86,7 @@ const ProductSwitchItem = withWebComponent<ProductSwitchItemPropTypes, ProductSw
   ['icon', 'subtitleText', 'target', 'targetSrc', 'titleText'],
   [],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents-fiori/dist/ProductSwitchItem.js')
+  ['click']
 );
 
 ProductSwitchItem.displayName = 'ProductSwitchItem';
diff --git a/packages/main/src/webComponents/ProgressIndicator/index.tsx b/packages/main/src/webComponents/ProgressIndicator/index.tsx
index f256f6c8cd3..d9c775b4cdc 100644
--- a/packages/main/src/webComponents/ProgressIndicator/index.tsx
+++ b/packages/main/src/webComponents/ProgressIndicator/index.tsx
@@ -69,8 +69,7 @@ const ProgressIndicator = withWebComponent<ProgressIndicatorPropTypes, ProgressI
   ['accessibleName', 'displayValue', 'value', 'valueState'],
   ['hideValue'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/ProgressIndicator.js')
+  []
 );
 
 ProgressIndicator.displayName = 'ProgressIndicator';
diff --git a/packages/main/src/webComponents/RadioButton/index.tsx b/packages/main/src/webComponents/RadioButton/index.tsx
index be33ee412e4..9f31e7b9826 100644
--- a/packages/main/src/webComponents/RadioButton/index.tsx
+++ b/packages/main/src/webComponents/RadioButton/index.tsx
@@ -138,8 +138,7 @@ const RadioButton = withWebComponent<RadioButtonPropTypes, RadioButtonDomRef>(
   ['accessibleName', 'accessibleNameRef', 'name', 'text', 'value', 'valueState', 'wrappingType'],
   ['checked', 'disabled', 'readonly', 'required'],
   [],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/RadioButton.js')
+  ['change']
 );
 
 RadioButton.displayName = 'RadioButton';
diff --git a/packages/main/src/webComponents/RangeSlider/index.tsx b/packages/main/src/webComponents/RangeSlider/index.tsx
index decf230bc25..e516c720e47 100644
--- a/packages/main/src/webComponents/RangeSlider/index.tsx
+++ b/packages/main/src/webComponents/RangeSlider/index.tsx
@@ -151,8 +151,7 @@ const RangeSlider = withWebComponent<RangeSliderPropTypes, RangeSliderDomRef>(
   ['accessibleName', 'endValue', 'labelInterval', 'max', 'min', 'name', 'startValue', 'step'],
   ['disabled', 'showTickmarks', 'showTooltip'],
   [],
-  ['change', 'input'],
-  () => import('@ui5/webcomponents/dist/RangeSlider.js')
+  ['change', 'input']
 );
 
 RangeSlider.displayName = 'RangeSlider';
diff --git a/packages/main/src/webComponents/RatingIndicator/index.tsx b/packages/main/src/webComponents/RatingIndicator/index.tsx
index d977e08d478..835edf25289 100644
--- a/packages/main/src/webComponents/RatingIndicator/index.tsx
+++ b/packages/main/src/webComponents/RatingIndicator/index.tsx
@@ -114,8 +114,7 @@ const RatingIndicator = withWebComponent<RatingIndicatorPropTypes, RatingIndicat
   ['accessibleName', 'accessibleNameRef', 'max', 'tooltip', 'value'],
   ['disabled', 'readonly', 'required'],
   [],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/RatingIndicator.js')
+  ['change']
 );
 
 RatingIndicator.displayName = 'RatingIndicator';
diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx
index 11ab96fdec7..5bbd44954da 100644
--- a/packages/main/src/webComponents/ResponsivePopover/index.tsx
+++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx
@@ -222,8 +222,7 @@ const ResponsivePopover = withWebComponent<ResponsivePopoverPropTypes, Responsiv
   ],
   ['allowTargetOverlap', 'hideArrow', 'modal', 'open', 'preventFocusRestore', 'preventInitialFocus'],
   ['footer', 'header'],
-  ['before-close', 'before-open', 'close', 'open'],
-  () => import('@ui5/webcomponents/dist/ResponsivePopover.js')
+  ['before-close', 'before-open', 'close', 'open']
 );
 
 ResponsivePopover.displayName = 'ResponsivePopover';
diff --git a/packages/main/src/webComponents/SegmentedButton/index.tsx b/packages/main/src/webComponents/SegmentedButton/index.tsx
index cdaba7dbcc0..c3d6c88241d 100644
--- a/packages/main/src/webComponents/SegmentedButton/index.tsx
+++ b/packages/main/src/webComponents/SegmentedButton/index.tsx
@@ -69,8 +69,7 @@ const SegmentedButton = withWebComponent<SegmentedButtonPropTypes, SegmentedButt
   ['accessibleName', 'selectionMode'],
   [],
   [],
-  ['selection-change'],
-  () => import('@ui5/webcomponents/dist/SegmentedButton.js')
+  ['selection-change']
 );
 
 SegmentedButton.displayName = 'SegmentedButton';
diff --git a/packages/main/src/webComponents/SegmentedButtonItem/index.tsx b/packages/main/src/webComponents/SegmentedButtonItem/index.tsx
index 7e8678d1257..96347ed87d1 100644
--- a/packages/main/src/webComponents/SegmentedButtonItem/index.tsx
+++ b/packages/main/src/webComponents/SegmentedButtonItem/index.tsx
@@ -85,8 +85,7 @@ const SegmentedButtonItem = withWebComponent<SegmentedButtonItemPropTypes, Segme
   ['accessibleName', 'accessibleNameRef', 'icon', 'tooltip'],
   ['disabled', 'selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/SegmentedButtonItem.js')
+  []
 );
 
 SegmentedButtonItem.displayName = 'SegmentedButtonItem';
diff --git a/packages/main/src/webComponents/Select/index.tsx b/packages/main/src/webComponents/Select/index.tsx
index 594f4be7ef3..c806f10e0df 100644
--- a/packages/main/src/webComponents/Select/index.tsx
+++ b/packages/main/src/webComponents/Select/index.tsx
@@ -207,8 +207,7 @@ const Select = withWebComponent<SelectPropTypes, SelectDomRef>(
   ['accessibleName', 'accessibleNameRef', 'name', 'value', 'valueState'],
   ['disabled', 'readonly', 'required'],
   ['label', 'valueStateMessage'],
-  ['change', 'close', 'live-change', 'open'],
-  () => import('@ui5/webcomponents/dist/Select.js')
+  ['change', 'close', 'live-change', 'open']
 );
 
 Select.displayName = 'Select';
diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx
index 9a856a926df..4cec75e4928 100644
--- a/packages/main/src/webComponents/ShellBar/index.tsx
+++ b/packages/main/src/webComponents/ShellBar/index.tsx
@@ -310,8 +310,7 @@ const ShellBar = withWebComponent<ShellBarPropTypes, ShellBarDomRef>(
     'product-switch-click',
     'profile-click',
     'search-button-click'
-  ],
-  () => import('@ui5/webcomponents-fiori/dist/ShellBar.js')
+  ]
 );
 
 ShellBar.displayName = 'ShellBar';
diff --git a/packages/main/src/webComponents/ShellBarItem/index.tsx b/packages/main/src/webComponents/ShellBarItem/index.tsx
index 8b2a243a380..805fd850843 100644
--- a/packages/main/src/webComponents/ShellBarItem/index.tsx
+++ b/packages/main/src/webComponents/ShellBarItem/index.tsx
@@ -54,8 +54,7 @@ const ShellBarItem = withWebComponent<ShellBarItemPropTypes, ShellBarItemDomRef>
   ['count', 'icon', 'text'],
   [],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents-fiori/dist/ShellBarItem.js')
+  ['click']
 );
 
 ShellBarItem.displayName = 'ShellBarItem';
diff --git a/packages/main/src/webComponents/SideNavigation/index.tsx b/packages/main/src/webComponents/SideNavigation/index.tsx
index a2d8fad6f65..14a630bd46f 100644
--- a/packages/main/src/webComponents/SideNavigation/index.tsx
+++ b/packages/main/src/webComponents/SideNavigation/index.tsx
@@ -98,8 +98,7 @@ const SideNavigation = withWebComponent<SideNavigationPropTypes, SideNavigationD
   [],
   ['collapsed'],
   ['fixedItems', 'header'],
-  ['selection-change'],
-  () => import('@ui5/webcomponents-fiori/dist/SideNavigation.js')
+  ['selection-change']
 );
 
 SideNavigation.displayName = 'SideNavigation';
diff --git a/packages/main/src/webComponents/SideNavigationGroup/index.tsx b/packages/main/src/webComponents/SideNavigationGroup/index.tsx
index b50e3b80e1b..246df00dc90 100644
--- a/packages/main/src/webComponents/SideNavigationGroup/index.tsx
+++ b/packages/main/src/webComponents/SideNavigationGroup/index.tsx
@@ -66,8 +66,7 @@ const SideNavigationGroup = withWebComponent<SideNavigationGroupPropTypes, SideN
   ['text', 'tooltip'],
   ['disabled', 'expanded'],
   [],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/SideNavigationGroup.js')
+  []
 );
 
 SideNavigationGroup.displayName = 'SideNavigationGroup';
diff --git a/packages/main/src/webComponents/SideNavigationItem/index.tsx b/packages/main/src/webComponents/SideNavigationItem/index.tsx
index 78921a856db..1eefda53dad 100644
--- a/packages/main/src/webComponents/SideNavigationItem/index.tsx
+++ b/packages/main/src/webComponents/SideNavigationItem/index.tsx
@@ -114,8 +114,7 @@ const SideNavigationItem = withWebComponent<SideNavigationItemPropTypes, SideNav
   ['href', 'icon', 'target', 'text', 'tooltip'],
   ['disabled', 'expanded', 'selected'],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents-fiori/dist/SideNavigationItem.js')
+  ['click']
 );
 
 SideNavigationItem.displayName = 'SideNavigationItem';
diff --git a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx
index a31e7577c94..9b46eef8fcb 100644
--- a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx
+++ b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx
@@ -103,8 +103,7 @@ const SideNavigationSubItem = withWebComponent<SideNavigationSubItemPropTypes, S
   ['href', 'icon', 'target', 'text', 'tooltip'],
   ['disabled', 'selected'],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js')
+  ['click']
 );
 
 SideNavigationSubItem.displayName = 'SideNavigationSubItem';
diff --git a/packages/main/src/webComponents/Slider/index.tsx b/packages/main/src/webComponents/Slider/index.tsx
index 189177ceacb..f41a15f04dd 100644
--- a/packages/main/src/webComponents/Slider/index.tsx
+++ b/packages/main/src/webComponents/Slider/index.tsx
@@ -143,8 +143,7 @@ const Slider = withWebComponent<SliderPropTypes, SliderDomRef>(
   ['accessibleName', 'labelInterval', 'max', 'min', 'name', 'step', 'value'],
   ['disabled', 'showTickmarks', 'showTooltip'],
   [],
-  ['change', 'input'],
-  () => import('@ui5/webcomponents/dist/Slider.js')
+  ['change', 'input']
 );
 
 Slider.displayName = 'Slider';
diff --git a/packages/main/src/webComponents/SortItem/index.tsx b/packages/main/src/webComponents/SortItem/index.tsx
index 44e982eadf6..a9452288425 100644
--- a/packages/main/src/webComponents/SortItem/index.tsx
+++ b/packages/main/src/webComponents/SortItem/index.tsx
@@ -31,14 +31,7 @@ interface SortItemPropTypes extends SortItemAttributes, Omit<CommonProps, keyof
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  * @abstract
  */
-const SortItem = withWebComponent<SortItemPropTypes, SortItemDomRef>(
-  'ui5-sort-item',
-  ['text'],
-  ['selected'],
-  [],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/SortItem.js')
-);
+const SortItem = withWebComponent<SortItemPropTypes, SortItemDomRef>('ui5-sort-item', ['text'], ['selected'], [], []);
 
 SortItem.displayName = 'SortItem';
 
diff --git a/packages/main/src/webComponents/SpecialCalendarDate/index.tsx b/packages/main/src/webComponents/SpecialCalendarDate/index.tsx
index e790307d900..1c63f481d34 100644
--- a/packages/main/src/webComponents/SpecialCalendarDate/index.tsx
+++ b/packages/main/src/webComponents/SpecialCalendarDate/index.tsx
@@ -39,8 +39,7 @@ const SpecialCalendarDate = withWebComponent<SpecialCalendarDatePropTypes, Speci
   ['type', 'value'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/SpecialCalendarDate.js')
+  []
 );
 
 SpecialCalendarDate.displayName = 'SpecialCalendarDate';
diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx
index 55f7ae7355d..beb8f94bee0 100644
--- a/packages/main/src/webComponents/SplitButton/index.tsx
+++ b/packages/main/src/webComponents/SplitButton/index.tsx
@@ -112,8 +112,7 @@ const SplitButton = withWebComponent<SplitButtonPropTypes, SplitButtonDomRef>(
   ['accessibleName', 'design', 'icon'],
   ['activeArrowButton', 'disabled'],
   [],
-  ['arrow-click', 'click'],
-  () => import('@ui5/webcomponents/dist/SplitButton.js')
+  ['arrow-click', 'click']
 );
 
 SplitButton.displayName = 'SplitButton';
diff --git a/packages/main/src/webComponents/StepInput/index.tsx b/packages/main/src/webComponents/StepInput/index.tsx
index 834de7a46d9..38fb1d65049 100644
--- a/packages/main/src/webComponents/StepInput/index.tsx
+++ b/packages/main/src/webComponents/StepInput/index.tsx
@@ -178,8 +178,7 @@ const StepInput = withWebComponent<StepInputPropTypes, StepInputDomRef>(
   ],
   ['disabled', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'value-state-change'],
-  () => import('@ui5/webcomponents/dist/StepInput.js')
+  ['change', 'value-state-change']
 );
 
 StepInput.displayName = 'StepInput';
diff --git a/packages/main/src/webComponents/SuggestionItem/index.tsx b/packages/main/src/webComponents/SuggestionItem/index.tsx
index b97808149cb..f356e6e60ae 100644
--- a/packages/main/src/webComponents/SuggestionItem/index.tsx
+++ b/packages/main/src/webComponents/SuggestionItem/index.tsx
@@ -33,8 +33,7 @@ const SuggestionItem = withWebComponent<SuggestionItemPropTypes, SuggestionItemD
   ['additionalText', 'text'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/SuggestionItem.js')
+  []
 );
 
 SuggestionItem.displayName = 'SuggestionItem';
diff --git a/packages/main/src/webComponents/SuggestionItemCustom/index.tsx b/packages/main/src/webComponents/SuggestionItemCustom/index.tsx
index 9e87c9327e6..fb4c8fe528c 100644
--- a/packages/main/src/webComponents/SuggestionItemCustom/index.tsx
+++ b/packages/main/src/webComponents/SuggestionItemCustom/index.tsx
@@ -40,8 +40,7 @@ const SuggestionItemCustom = withWebComponent<SuggestionItemCustomPropTypes, Sug
   ['text'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/SuggestionItemCustom.js')
+  []
 );
 
 SuggestionItemCustom.displayName = 'SuggestionItemCustom';
diff --git a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx
index 48db843f3e3..c4b3bb53c1a 100644
--- a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx
+++ b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx
@@ -78,8 +78,7 @@ const SuggestionItemGroup = withWebComponent<SuggestionItemGroupPropTypes, Sugge
   ['headerAccessibleName', 'headerText'],
   [],
   ['header'],
-  ['move-over', 'move'],
-  () => import('@ui5/webcomponents/dist/SuggestionItemGroup.js')
+  ['move-over', 'move']
 );
 
 SuggestionItemGroup.displayName = 'SuggestionItemGroup';
diff --git a/packages/main/src/webComponents/Switch/index.tsx b/packages/main/src/webComponents/Switch/index.tsx
index 0baaa251e90..d5bc372d01a 100644
--- a/packages/main/src/webComponents/Switch/index.tsx
+++ b/packages/main/src/webComponents/Switch/index.tsx
@@ -132,8 +132,7 @@ const Switch = withWebComponent<SwitchPropTypes, SwitchDomRef>(
   ['accessibleName', 'accessibleNameRef', 'design', 'name', 'textOff', 'textOn', 'tooltip'],
   ['checked', 'disabled', 'required'],
   [],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/Switch.js')
+  ['change']
 );
 
 Switch.displayName = 'Switch';
diff --git a/packages/main/src/webComponents/Tab/index.tsx b/packages/main/src/webComponents/Tab/index.tsx
index 419b19e3a67..7ce6faa06b8 100644
--- a/packages/main/src/webComponents/Tab/index.tsx
+++ b/packages/main/src/webComponents/Tab/index.tsx
@@ -101,8 +101,7 @@ const Tab = withWebComponent<TabPropTypes, TabDomRef>(
   ['additionalText', 'design', 'icon', 'text'],
   ['disabled', 'selected'],
   ['items'],
-  [],
-  () => import('@ui5/webcomponents/dist/Tab.js')
+  []
 );
 
 Tab.displayName = 'Tab';
diff --git a/packages/main/src/webComponents/TabContainer/index.tsx b/packages/main/src/webComponents/TabContainer/index.tsx
index 59c988c44a8..cb2ee5ca1e3 100644
--- a/packages/main/src/webComponents/TabContainer/index.tsx
+++ b/packages/main/src/webComponents/TabContainer/index.tsx
@@ -179,8 +179,7 @@ const TabContainer = withWebComponent<TabContainerPropTypes, TabContainerDomRef>
   ['contentBackgroundDesign', 'headerBackgroundDesign', 'overflowMode', 'tabLayout'],
   ['collapsed'],
   ['overflowButton', 'startOverflowButton'],
-  ['move-over', 'move', 'tab-select'],
-  () => import('@ui5/webcomponents/dist/TabContainer.js')
+  ['move-over', 'move', 'tab-select']
 );
 
 TabContainer.displayName = 'TabContainer';
diff --git a/packages/main/src/webComponents/TabSeparator/index.tsx b/packages/main/src/webComponents/TabSeparator/index.tsx
index 93a7fa8e1cd..5e08e3b85cb 100644
--- a/packages/main/src/webComponents/TabSeparator/index.tsx
+++ b/packages/main/src/webComponents/TabSeparator/index.tsx
@@ -24,14 +24,7 @@ interface TabSeparatorPropTypes extends TabSeparatorAttributes, CommonProps {}
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  * @abstract
  */
-const TabSeparator = withWebComponent<TabSeparatorPropTypes, TabSeparatorDomRef>(
-  'ui5-tab-separator',
-  [],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents/dist/TabSeparator.js')
-);
+const TabSeparator = withWebComponent<TabSeparatorPropTypes, TabSeparatorDomRef>('ui5-tab-separator', [], [], [], []);
 
 TabSeparator.displayName = 'TabSeparator';
 
diff --git a/packages/main/src/webComponents/Table/index.tsx b/packages/main/src/webComponents/Table/index.tsx
index e94e082abff..7c296f92a4b 100644
--- a/packages/main/src/webComponents/Table/index.tsx
+++ b/packages/main/src/webComponents/Table/index.tsx
@@ -178,8 +178,7 @@ const Table = withWebComponent<TablePropTypes, TableDomRef>(
   ['accessibleName', 'accessibleNameRef', 'loadingDelay', 'noDataText', 'overflowMode'],
   ['loading'],
   ['features', 'headerRow', 'nodata'],
-  ['row-click'],
-  () => import('@ui5/webcomponents/dist/Table.js')
+  ['row-click']
 );
 
 Table.displayName = 'Table';
diff --git a/packages/main/src/webComponents/TableCell/index.tsx b/packages/main/src/webComponents/TableCell/index.tsx
index fb40fa35d64..1209f49cc2c 100644
--- a/packages/main/src/webComponents/TableCell/index.tsx
+++ b/packages/main/src/webComponents/TableCell/index.tsx
@@ -26,14 +26,7 @@ interface TableCellPropTypes extends TableCellAttributes, Omit<CommonProps, 'chi
  *
  * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
  */
-const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>(
-  'ui5-table-cell',
-  [],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents/dist/TableCell.js')
-);
+const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>('ui5-table-cell', [], [], [], []);
 
 TableCell.displayName = 'TableCell';
 
diff --git a/packages/main/src/webComponents/TableGrowing/index.tsx b/packages/main/src/webComponents/TableGrowing/index.tsx
index 21d9820489c..2f5da70a24a 100644
--- a/packages/main/src/webComponents/TableGrowing/index.tsx
+++ b/packages/main/src/webComponents/TableGrowing/index.tsx
@@ -78,8 +78,7 @@ const TableGrowing = withWebComponent<TableGrowingPropTypes, TableGrowingDomRef>
   ['growingSubText', 'growingText', 'type'],
   [],
   [],
-  ['load-more'],
-  () => import('@ui5/webcomponents/dist/TableGrowing.js')
+  ['load-more']
 );
 
 TableGrowing.displayName = 'TableGrowing';
diff --git a/packages/main/src/webComponents/TableHeaderCell/index.tsx b/packages/main/src/webComponents/TableHeaderCell/index.tsx
index 76f6030beed..c253efa1765 100644
--- a/packages/main/src/webComponents/TableHeaderCell/index.tsx
+++ b/packages/main/src/webComponents/TableHeaderCell/index.tsx
@@ -66,8 +66,7 @@ const TableHeaderCell = withWebComponent<TableHeaderCellPropTypes, TableHeaderCe
   ['importance', 'maxWidth', 'minWidth', 'width'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/TableHeaderCell.js')
+  []
 );
 
 TableHeaderCell.displayName = 'TableHeaderCell';
diff --git a/packages/main/src/webComponents/TableHeaderRow/index.tsx b/packages/main/src/webComponents/TableHeaderRow/index.tsx
index a47c2bb6476..aa4df405a31 100644
--- a/packages/main/src/webComponents/TableHeaderRow/index.tsx
+++ b/packages/main/src/webComponents/TableHeaderRow/index.tsx
@@ -46,8 +46,7 @@ const TableHeaderRow = withWebComponent<TableHeaderRowPropTypes, TableHeaderRowD
   [],
   ['sticky'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/TableHeaderRow.js')
+  []
 );
 
 TableHeaderRow.displayName = 'TableHeaderRow';
diff --git a/packages/main/src/webComponents/TableRow/index.tsx b/packages/main/src/webComponents/TableRow/index.tsx
index 9d7cf2741f9..5565efc84ca 100644
--- a/packages/main/src/webComponents/TableRow/index.tsx
+++ b/packages/main/src/webComponents/TableRow/index.tsx
@@ -49,8 +49,7 @@ const TableRow = withWebComponent<TableRowPropTypes, TableRowDomRef>(
   ['rowKey'],
   ['interactive', 'navigated'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/TableRow.js')
+  []
 );
 
 TableRow.displayName = 'TableRow';
diff --git a/packages/main/src/webComponents/TableSelection/index.tsx b/packages/main/src/webComponents/TableSelection/index.tsx
index 8bb9a40fc57..c8c81aedd65 100644
--- a/packages/main/src/webComponents/TableSelection/index.tsx
+++ b/packages/main/src/webComponents/TableSelection/index.tsx
@@ -62,8 +62,7 @@ const TableSelection = withWebComponent<TableSelectionPropTypes, TableSelectionD
   ['mode', 'selected'],
   [],
   [],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/TableSelection.js')
+  ['change']
 );
 
 TableSelection.displayName = 'TableSelection';
diff --git a/packages/main/src/webComponents/Tag/index.tsx b/packages/main/src/webComponents/Tag/index.tsx
index 223f1d31822..893a08c0435 100644
--- a/packages/main/src/webComponents/Tag/index.tsx
+++ b/packages/main/src/webComponents/Tag/index.tsx
@@ -113,8 +113,7 @@ const Tag = withWebComponent<TagPropTypes, TagDomRef>(
   ['colorScheme', 'design', 'size', 'wrappingType'],
   ['hideStateIcon', 'interactive'],
   ['icon'],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/Tag.js')
+  ['click']
 );
 
 Tag.displayName = 'Tag';
diff --git a/packages/main/src/webComponents/Text/index.tsx b/packages/main/src/webComponents/Text/index.tsx
index b8636ec92b0..e6751727b9a 100644
--- a/packages/main/src/webComponents/Text/index.tsx
+++ b/packages/main/src/webComponents/Text/index.tsx
@@ -47,14 +47,7 @@ interface TextPropTypes extends TextAttributes, Omit<CommonProps, keyof TextAttr
  *
  * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
  */
-const Text = withWebComponent<TextPropTypes, TextDomRef>(
-  'ui5-text',
-  ['maxLines'],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents/dist/Text.js')
-);
+const Text = withWebComponent<TextPropTypes, TextDomRef>('ui5-text', ['maxLines'], [], [], []);
 
 Text.displayName = 'Text';
 
diff --git a/packages/main/src/webComponents/TextArea/index.tsx b/packages/main/src/webComponents/TextArea/index.tsx
index 4881e952f81..1866cda28d0 100644
--- a/packages/main/src/webComponents/TextArea/index.tsx
+++ b/packages/main/src/webComponents/TextArea/index.tsx
@@ -188,8 +188,7 @@ const TextArea = withWebComponent<TextAreaPropTypes, TextAreaDomRef>(
   ],
   ['disabled', 'growing', 'readonly', 'required', 'showExceededText'],
   ['valueStateMessage'],
-  ['change', 'input', 'scroll', 'select'],
-  () => import('@ui5/webcomponents/dist/TextArea.js')
+  ['change', 'input', 'scroll', 'select']
 );
 
 TextArea.displayName = 'TextArea';
diff --git a/packages/main/src/webComponents/TimePicker/index.tsx b/packages/main/src/webComponents/TimePicker/index.tsx
index 8c51928e6e6..89d835b7cb5 100644
--- a/packages/main/src/webComponents/TimePicker/index.tsx
+++ b/packages/main/src/webComponents/TimePicker/index.tsx
@@ -225,8 +225,7 @@ const TimePicker = withWebComponent<TimePickerPropTypes, TimePickerDomRef>(
   ['accessibleName', 'accessibleNameRef', 'formatPattern', 'name', 'placeholder', 'value', 'valueState'],
   ['disabled', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'close', 'input', 'open'],
-  () => import('@ui5/webcomponents/dist/TimePicker.js')
+  ['change', 'close', 'input', 'open']
 );
 
 TimePicker.displayName = 'TimePicker';
diff --git a/packages/main/src/webComponents/Timeline/index.tsx b/packages/main/src/webComponents/Timeline/index.tsx
index 58e808016c1..8d552bff746 100644
--- a/packages/main/src/webComponents/Timeline/index.tsx
+++ b/packages/main/src/webComponents/Timeline/index.tsx
@@ -45,8 +45,7 @@ const Timeline = withWebComponent<TimelinePropTypes, TimelineDomRef>(
   ['accessibleName', 'layout'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/Timeline.js')
+  []
 );
 
 Timeline.displayName = 'Timeline';
diff --git a/packages/main/src/webComponents/TimelineGroupItem/index.tsx b/packages/main/src/webComponents/TimelineGroupItem/index.tsx
index f219ff6f051..37929804f54 100644
--- a/packages/main/src/webComponents/TimelineGroupItem/index.tsx
+++ b/packages/main/src/webComponents/TimelineGroupItem/index.tsx
@@ -49,8 +49,7 @@ const TimelineGroupItem = withWebComponent<TimelineGroupItemPropTypes, TimelineG
   ['groupName'],
   ['collapsed'],
   [],
-  ['toggle'],
-  () => import('@ui5/webcomponents-fiori/dist/TimelineGroupItem.js')
+  ['toggle']
 );
 
 TimelineGroupItem.displayName = 'TimelineGroupItem';
diff --git a/packages/main/src/webComponents/TimelineItem/index.tsx b/packages/main/src/webComponents/TimelineItem/index.tsx
index f2da041efc5..847319bf36b 100644
--- a/packages/main/src/webComponents/TimelineItem/index.tsx
+++ b/packages/main/src/webComponents/TimelineItem/index.tsx
@@ -69,8 +69,7 @@ const TimelineItem = withWebComponent<TimelineItemPropTypes, TimelineItemDomRef>
   ['icon', 'name', 'subtitleText', 'titleText'],
   ['nameClickable'],
   [],
-  ['name-click'],
-  () => import('@ui5/webcomponents-fiori/dist/TimelineItem.js')
+  ['name-click']
 );
 
 TimelineItem.displayName = 'TimelineItem';
diff --git a/packages/main/src/webComponents/Title/index.tsx b/packages/main/src/webComponents/Title/index.tsx
index edc827fb1aa..9f591c3bb49 100644
--- a/packages/main/src/webComponents/Title/index.tsx
+++ b/packages/main/src/webComponents/Title/index.tsx
@@ -53,14 +53,7 @@ interface TitlePropTypes extends TitleAttributes, Omit<CommonProps, keyof TitleA
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
-const Title = withWebComponent<TitlePropTypes, TitleDomRef>(
-  'ui5-title',
-  ['level', 'size', 'wrappingType'],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents/dist/Title.js')
-);
+const Title = withWebComponent<TitlePropTypes, TitleDomRef>('ui5-title', ['level', 'size', 'wrappingType'], [], [], []);
 
 Title.displayName = 'Title';
 
diff --git a/packages/main/src/webComponents/Toast/index.tsx b/packages/main/src/webComponents/Toast/index.tsx
index bf4288cca70..c3c60db358a 100644
--- a/packages/main/src/webComponents/Toast/index.tsx
+++ b/packages/main/src/webComponents/Toast/index.tsx
@@ -77,8 +77,7 @@ const Toast = withWebComponent<ToastPropTypes, ToastDomRef>(
   ['duration', 'placement'],
   ['open'],
   [],
-  ['close'],
-  () => import('@ui5/webcomponents/dist/Toast.js')
+  ['close']
 );
 
 Toast.displayName = 'Toast';
diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx
index 164d6932c37..289b88c7dc5 100644
--- a/packages/main/src/webComponents/ToggleButton/index.tsx
+++ b/packages/main/src/webComponents/ToggleButton/index.tsx
@@ -177,8 +177,7 @@ const ToggleButton = withWebComponent<ToggleButtonPropTypes, ToggleButtonDomRef>
   ],
   ['disabled', 'pressed', 'submits'],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/ToggleButton.js')
+  ['click']
 );
 
 ToggleButton.displayName = 'ToggleButton';
diff --git a/packages/main/src/webComponents/Token/index.tsx b/packages/main/src/webComponents/Token/index.tsx
index 537006a7fda..09b38d31268 100644
--- a/packages/main/src/webComponents/Token/index.tsx
+++ b/packages/main/src/webComponents/Token/index.tsx
@@ -41,14 +41,7 @@ interface TokenPropTypes extends TokenAttributes, Omit<CommonProps, keyof TokenA
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
-const Token = withWebComponent<TokenPropTypes, TokenDomRef>(
-  'ui5-token',
-  ['text'],
-  ['selected'],
-  ['closeIcon'],
-  [],
-  () => import('@ui5/webcomponents/dist/Token.js')
-);
+const Token = withWebComponent<TokenPropTypes, TokenDomRef>('ui5-token', ['text'], ['selected'], ['closeIcon'], []);
 
 Token.displayName = 'Token';
 
diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx
index 6508e031e19..9ae85ed7425 100644
--- a/packages/main/src/webComponents/Tokenizer/index.tsx
+++ b/packages/main/src/webComponents/Tokenizer/index.tsx
@@ -90,8 +90,7 @@ const Tokenizer = withWebComponent<TokenizerPropTypes, TokenizerDomRef>(
   ['accessibleName', 'accessibleNameRef'],
   ['disabled', 'readonly'],
   [],
-  ['selection-change', 'token-delete'],
-  () => import('@ui5/webcomponents/dist/Tokenizer.js')
+  ['selection-change', 'token-delete']
 );
 
 Tokenizer.displayName = 'Tokenizer';
diff --git a/packages/main/src/webComponents/Toolbar/index.tsx b/packages/main/src/webComponents/Toolbar/index.tsx
index 772b656df71..8dd273a4bef 100644
--- a/packages/main/src/webComponents/Toolbar/index.tsx
+++ b/packages/main/src/webComponents/Toolbar/index.tsx
@@ -73,8 +73,7 @@ const Toolbar = withWebComponent<ToolbarPropTypes, ToolbarDomRef>(
   ['accessibleName', 'accessibleNameRef', 'alignContent', 'design'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/Toolbar.js')
+  []
 );
 
 Toolbar.displayName = 'Toolbar';
diff --git a/packages/main/src/webComponents/ToolbarButton/index.tsx b/packages/main/src/webComponents/ToolbarButton/index.tsx
index e501bddb93c..204736486e0 100644
--- a/packages/main/src/webComponents/ToolbarButton/index.tsx
+++ b/packages/main/src/webComponents/ToolbarButton/index.tsx
@@ -153,8 +153,7 @@ const ToolbarButton = withWebComponent<ToolbarButtonPropTypes, ToolbarButtonDomR
   ],
   ['disabled', 'preventOverflowClosing'],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/ToolbarButton.js')
+  ['click']
 );
 
 ToolbarButton.displayName = 'ToolbarButton';
diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx
index c6d3f6da963..bad3350afb8 100644
--- a/packages/main/src/webComponents/ToolbarSelect/index.tsx
+++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx
@@ -108,8 +108,7 @@ const ToolbarSelect = withWebComponent<ToolbarSelectPropTypes, ToolbarSelectDomR
   ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'valueState', 'width'],
   ['disabled', 'preventOverflowClosing'],
   [],
-  ['change', 'close', 'open'],
-  () => import('@ui5/webcomponents/dist/ToolbarSelect.js')
+  ['change', 'close', 'open']
 );
 
 ToolbarSelect.displayName = 'ToolbarSelect';
diff --git a/packages/main/src/webComponents/ToolbarSelectOption/index.tsx b/packages/main/src/webComponents/ToolbarSelectOption/index.tsx
index 83513f6926f..f4d2b84f450 100644
--- a/packages/main/src/webComponents/ToolbarSelectOption/index.tsx
+++ b/packages/main/src/webComponents/ToolbarSelectOption/index.tsx
@@ -39,8 +39,7 @@ const ToolbarSelectOption = withWebComponent<ToolbarSelectOptionPropTypes, Toolb
   [],
   ['selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/ToolbarSelectOption.js')
+  []
 );
 
 ToolbarSelectOption.displayName = 'ToolbarSelectOption';
diff --git a/packages/main/src/webComponents/ToolbarSeparator/index.tsx b/packages/main/src/webComponents/ToolbarSeparator/index.tsx
index 5e5a9372ef6..f0b911bd352 100644
--- a/packages/main/src/webComponents/ToolbarSeparator/index.tsx
+++ b/packages/main/src/webComponents/ToolbarSeparator/index.tsx
@@ -41,8 +41,7 @@ const ToolbarSeparator = withWebComponent<ToolbarSeparatorPropTypes, ToolbarSepa
   ['overflowPriority'],
   ['preventOverflowClosing'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/ToolbarSeparator.js')
+  []
 );
 
 ToolbarSeparator.displayName = 'ToolbarSeparator';
diff --git a/packages/main/src/webComponents/ToolbarSpacer/index.tsx b/packages/main/src/webComponents/ToolbarSpacer/index.tsx
index 61239f7dc06..d926ef87888 100644
--- a/packages/main/src/webComponents/ToolbarSpacer/index.tsx
+++ b/packages/main/src/webComponents/ToolbarSpacer/index.tsx
@@ -47,8 +47,7 @@ const ToolbarSpacer = withWebComponent<ToolbarSpacerPropTypes, ToolbarSpacerDomR
   ['overflowPriority', 'width'],
   ['preventOverflowClosing'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/ToolbarSpacer.js')
+  []
 );
 
 ToolbarSpacer.displayName = 'ToolbarSpacer';
diff --git a/packages/main/src/webComponents/Tree/index.tsx b/packages/main/src/webComponents/Tree/index.tsx
index 1194c1155c0..d2252b69c06 100644
--- a/packages/main/src/webComponents/Tree/index.tsx
+++ b/packages/main/src/webComponents/Tree/index.tsx
@@ -188,8 +188,7 @@ const Tree = withWebComponent<TreePropTypes, TreeDomRef>(
   ['accessibleName', 'accessibleNameRef', 'footerText', 'headerText', 'noDataText', 'selectionMode'],
   [],
   ['header'],
-  ['item-click', 'item-delete', 'item-mouseout', 'item-mouseover', 'item-toggle', 'selection-change'],
-  () => import('@ui5/webcomponents/dist/Tree.js')
+  ['item-click', 'item-delete', 'item-mouseout', 'item-mouseover', 'item-toggle', 'selection-change']
 );
 
 Tree.displayName = 'Tree';
diff --git a/packages/main/src/webComponents/TreeItem/index.tsx b/packages/main/src/webComponents/TreeItem/index.tsx
index 237976397f3..9220da551ad 100644
--- a/packages/main/src/webComponents/TreeItem/index.tsx
+++ b/packages/main/src/webComponents/TreeItem/index.tsx
@@ -208,8 +208,7 @@ const TreeItem = withWebComponent<TreeItemPropTypes, TreeItemDomRef>(
   ],
   ['expanded', 'hasChildren', 'indeterminate', 'movable', 'navigated', 'selected'],
   ['deleteButton'],
-  ['detail-click'],
-  () => import('@ui5/webcomponents/dist/TreeItem.js')
+  ['detail-click']
 );
 
 TreeItem.displayName = 'TreeItem';
diff --git a/packages/main/src/webComponents/TreeItemCustom/index.tsx b/packages/main/src/webComponents/TreeItemCustom/index.tsx
index 495a6e5abc6..e1dc795b7e3 100644
--- a/packages/main/src/webComponents/TreeItemCustom/index.tsx
+++ b/packages/main/src/webComponents/TreeItemCustom/index.tsx
@@ -207,8 +207,7 @@ const TreeItemCustom = withWebComponent<TreeItemCustomPropTypes, TreeItemCustomD
   ['accessibilityAttributes', 'accessibleName', 'additionalTextState', 'highlight', 'icon', 'tooltip', 'type'],
   ['expanded', 'hasChildren', 'hideSelectionElement', 'indeterminate', 'movable', 'navigated', 'selected'],
   ['content', 'deleteButton'],
-  ['detail-click'],
-  () => import('@ui5/webcomponents/dist/TreeItemCustom.js')
+  ['detail-click']
 );
 
 TreeItemCustom.displayName = 'TreeItemCustom';
diff --git a/packages/main/src/webComponents/UploadCollection/index.tsx b/packages/main/src/webComponents/UploadCollection/index.tsx
index 4f98e44e838..727221e071c 100644
--- a/packages/main/src/webComponents/UploadCollection/index.tsx
+++ b/packages/main/src/webComponents/UploadCollection/index.tsx
@@ -111,8 +111,7 @@ const UploadCollection = withWebComponent<UploadCollectionPropTypes, UploadColle
   ['accessibleName', 'noDataDescription', 'noDataText', 'selectionMode'],
   ['hideDragOverlay'],
   ['header'],
-  ['drop', 'item-delete', 'selection-change'],
-  () => import('@ui5/webcomponents-fiori/dist/UploadCollection.js')
+  ['drop', 'item-delete', 'selection-change']
 );
 
 UploadCollection.displayName = 'UploadCollection';
diff --git a/packages/main/src/webComponents/UploadCollectionItem/index.tsx b/packages/main/src/webComponents/UploadCollectionItem/index.tsx
index b1756e7fcf0..08e2acda515 100644
--- a/packages/main/src/webComponents/UploadCollectionItem/index.tsx
+++ b/packages/main/src/webComponents/UploadCollectionItem/index.tsx
@@ -234,8 +234,7 @@ const UploadCollectionItem = withWebComponent<UploadCollectionItemPropTypes, Upl
     'selected'
   ],
   ['deleteButton', 'thumbnail'],
-  ['detail-click', 'file-name-click', 'rename', 'retry', 'terminate'],
-  () => import('@ui5/webcomponents-fiori/dist/UploadCollectionItem.js')
+  ['detail-click', 'file-name-click', 'rename', 'retry', 'terminate']
 );
 
 UploadCollectionItem.displayName = 'UploadCollectionItem';
diff --git a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx
index 3e9dd73f3c1..d0541f6dedf 100644
--- a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx
+++ b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx
@@ -133,8 +133,7 @@ const ViewSettingsDialog = withWebComponent<ViewSettingsDialogPropTypes, ViewSet
   [],
   ['open', 'sortDescending'],
   ['filterItems', 'sortItems'],
-  ['before-open', 'cancel', 'close', 'confirm', 'open'],
-  () => import('@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js')
+  ['before-open', 'cancel', 'close', 'confirm', 'open']
 );
 
 ViewSettingsDialog.displayName = 'ViewSettingsDialog';
diff --git a/packages/main/src/webComponents/Wizard/index.tsx b/packages/main/src/webComponents/Wizard/index.tsx
index dee9b3a5548..3861ddd0367 100644
--- a/packages/main/src/webComponents/Wizard/index.tsx
+++ b/packages/main/src/webComponents/Wizard/index.tsx
@@ -116,8 +116,7 @@ const Wizard = withWebComponent<WizardPropTypes, WizardDomRef>(
   ['contentLayout'],
   [],
   [],
-  ['step-change'],
-  () => import('@ui5/webcomponents-fiori/dist/Wizard.js')
+  ['step-change']
 );
 
 Wizard.displayName = 'Wizard';
diff --git a/packages/main/src/webComponents/WizardStep/index.tsx b/packages/main/src/webComponents/WizardStep/index.tsx
index 92d11bda3c3..c1ca5c9a532 100644
--- a/packages/main/src/webComponents/WizardStep/index.tsx
+++ b/packages/main/src/webComponents/WizardStep/index.tsx
@@ -95,8 +95,7 @@ const WizardStep = withWebComponent<WizardStepPropTypes, WizardStepDomRef>(
   ['icon', 'subtitleText', 'titleText'],
   ['branching', 'disabled', 'selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents-fiori/dist/WizardStep.js')
+  []
 );
 
 WizardStep.displayName = 'WizardStep';
diff --git a/yarn.lock b/yarn.lock
index 842b2862688..3a5afcdc477 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5859,6 +5859,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:*":
+  version: 15.7.12
+  resolution: "@types/prop-types@npm:15.7.12"
+  checksum: 10c0/1babcc7db6a1177779f8fde0ccc78d64d459906e6ef69a4ed4dd6339c920c2e05b074ee5a92120fe4e9d9f1a01c952f843ebd550bee2332fc2ef81d1706878f8
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*":
   version: 6.9.7
   resolution: "@types/qs@npm:6.9.7"
@@ -5880,21 +5887,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:types-react-dom@rc":
-  version: 19.0.0-rc.0
-  resolution: "types-react-dom@npm:19.0.0-rc.0"
+"@types/react-dom@npm:^18.3.0":
+  version: 18.3.0
+  resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
     "@types/react": "npm:*"
-  checksum: 10c0/a05f48aec358142f167f4765ed25e4a8185926fe24421c6f0e9af7bbd3029055e01198a300543621c7dd0c045ac84a536e71a74b3ad6d5d95300e4584ab8a0aa
+  checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b
   languageName: node
   linkType: hard
 
-"@types/react@npm:types-react@rc":
-  version: 19.0.0-rc.0
-  resolution: "types-react@npm:19.0.0-rc.0"
+"@types/react@npm:*, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.3.4":
+  version: 18.3.4
+  resolution: "@types/react@npm:18.3.4"
   dependencies:
+    "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/b8c035f3f6354b2b1e24473ec2fb981afab9db726177755cdc6a610f607e8d89ca2297f4a80be1464013aa073a5496627fa0a0125f60af12daa769ad508cf3ea
+  checksum: 10c0/5c52e1e6f540cff21e3c2a5212066d02e005f6fb21e4a536a29097fae878db9f407cd7a4b43778f51359349c5f692e08bc77ddb5f5cecbfca9ca4d4e3c91a48e
   languageName: node
   linkType: hard
 
@@ -19065,17 +19073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:19.0.0-rc-f38c22b244-20240704":
-  version: 19.0.0-rc-f38c22b244-20240704
-  resolution: "react-dom@npm:19.0.0-rc-f38c22b244-20240704"
-  dependencies:
-    scheduler: "npm:0.25.0-rc-f38c22b244-20240704"
-  peerDependencies:
-    react: 19.0.0-rc-f38c22b244-20240704
-  checksum: 10c0/fecc3111fdd257686f720a3fa2b61d52bc17e208eee8fcf96928216de1dddfd6684e28d7bc6148ec9d9b9a35f5e75d513b4fd7b3011cc66a1cab6acb371aa264
-  languageName: node
-  linkType: hard
-
 "react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -19088,6 +19085,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+    scheduler: "npm:^0.23.2"
+  peerDependencies:
+    react: ^18.3.1
+  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
+  languageName: node
+  linkType: hard
+
 "react-element-to-jsx-string@npm:^15.0.0":
   version: 15.0.0
   resolution: "react-element-to-jsx-string@npm:15.0.0"
@@ -19175,13 +19184,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:19.0.0-rc-f38c22b244-20240704":
-  version: 19.0.0-rc-f38c22b244-20240704
-  resolution: "react@npm:19.0.0-rc-f38c22b244-20240704"
-  checksum: 10c0/fe2a5365016ab8dc4e0ffc285cc107a73df7829c524ded753390c6c05346b4ec6dbdcb40843182f91a7cfbee735ad707f349ed524c4626417fc14078637410d6
-  languageName: node
-  linkType: hard
-
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -19191,6 +19193,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+  languageName: node
+  linkType: hard
+
 "read-cache@npm:^1.0.0":
   version: 1.0.0
   resolution: "read-cache@npm:1.0.0"
@@ -20068,13 +20079,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.25.0-rc-f38c22b244-20240704":
-  version: 0.25.0-rc-f38c22b244-20240704
-  resolution: "scheduler@npm:0.25.0-rc-f38c22b244-20240704"
-  checksum: 10c0/370f144cac09f27ed12d8cad81972f1551206da9fd2c6e64a6e797bb5bb258c655192d8502f2f9e71140f6b3ee93f964534e59301e2fe50950a643f4d3d8c233
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -20084,6 +20088,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -21946,8 +21959,8 @@ __metadata:
     "@testing-library/cypress": "npm:^10.0.0"
     "@types/jscodeshift": "npm:^0.11.11"
     "@types/node": "npm:^20.0.0"
-    "@types/react": "npm:types-react@rc"
-    "@types/react-dom": "npm:types-react-dom@rc"
+    "@types/react": "npm:^18.3.4"
+    "@types/react-dom": "npm:^18.3.0"
     "@types/use-sync-external-store": "npm:^0.0.6"
     "@typescript-eslint/eslint-plugin": "npm:^7.0.0"
     "@typescript-eslint/parser": "npm:^7.0.0"
@@ -21983,8 +21996,8 @@ __metadata:
     postcss-modules: "npm:^6.0.0"
     postcss-nesting: "npm:^13.0.0"
     prettier: "npm:^3.0.0"
-    react: "npm:19.0.0-rc-f38c22b244-20240704"
-    react-dom: "npm:19.0.0-rc-f38c22b244-20240704"
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.3.1"
     remark-gfm: "npm:^4.0.0"
     rimraf: "npm:^6.0.0"
     storybook: "npm:8.2.9"