diff --git a/.eslintrc.yml b/.eslintrc.yml
index 424118c319a..7e8184400fc 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -41,17 +41,16 @@ rules:
         order: asc
         caseInsensitive: true
   import/no-duplicates: 'error'
-  import/no-unresolved: 'error'
+  import/no-unresolved: 'off'
 overrides:
   # add config for all TypeScript files
   - files:
       - '*.ts'
       - '*.tsx'
     parserOptions:
-      project:
-        - './tsconfig.spec.json'
-        - './tsconfig.node.json'
-        - './packages/*/tsconfig.json'
+      EXPERIMENTAL_useProjectService:
+        # TODO https://github.com/typescript-eslint/typescript-eslint/issues/9450
+        maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 1000
     plugins:
       - '@typescript-eslint'
     extends:
@@ -124,7 +123,6 @@ overrides:
     rules:
       '@typescript-eslint/no-empty-function': 'off'
       'import/order': 'warn'
-      'import/no-unresolved': 'off'
       'react/no-unescaped-entities': 'off'
       '@typescript-eslint/unbound-method': 'warn'
       'react/display-name': 'off'
diff --git a/packages/cypress-commands/CommandsAndQueries.tsx b/.storybook/components/CommandsAndQueries.tsx
similarity index 100%
rename from packages/cypress-commands/CommandsAndQueries.tsx
rename to .storybook/components/CommandsAndQueries.tsx
diff --git a/.storybook/components/index.ts b/.storybook/components/index.ts
index d23a2c05d41..0e534af2725 100644
--- a/.storybook/components/index.ts
+++ b/.storybook/components/index.ts
@@ -6,3 +6,4 @@ export * from './ProductsTable';
 export * from './ProjectTemplate';
 export * from './TableOfContent';
 export * from './LabelWithWrapping';
+export * from './CommandsAndQueries';
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
index e208c0ca86c..ec1f7b77652 100644
--- a/.storybook/utils.ts
+++ b/.storybook/utils.ts
@@ -1,7 +1,10 @@
 import { DocsContext } from '@storybook/blocks';
 import { useContext, useMemo } from 'react';
+// @ts-expect-error: storybook can handle this
 import cemFiori from './custom-element-manifests/fiori.json';
+// @ts-expect-error: storybook can handle this
 import cemMain from './custom-element-manifests/main.json';
+
 export const isChromatic = process.env.STORYBOOK_ENV === 'chromatic';
 
 export const MAPPED_THEMES = [
@@ -23,19 +26,22 @@ export const excludePropsForAbstract = ['className', 'style'];
 
 export function useGetCem() {
   const docsContext = useContext(DocsContext);
+  // @ts-expect-error: private but existing
   const { attachedCSFFiles } = docsContext;
 
-  const storyTagsSet: Set<string> | undefined = attachedCSFFiles?.size
-    ? Array.from(attachedCSFFiles).reduce((acc, cur) => {
-        const tags: string[] | undefined = cur?.meta?.tags;
-        if (tags?.length) {
-          tags.forEach((tag) => {
-            acc.add(tag);
-          });
-        }
-        return acc;
-      }, new Set<string>())
-    : undefined;
+  const storyTagsSet = new Set<string>();
+
+  if (attachedCSFFiles?.size) {
+    Array.from(attachedCSFFiles).forEach((cur) => {
+      // @ts-expect-error: private but existing
+      const tags: string[] | undefined = cur?.meta?.tags;
+      if (tags?.length) {
+        tags.forEach((tag) => {
+          storyTagsSet.add(tag);
+        });
+      }
+    });
+  }
 
   const storyTags = storyTagsSet?.size ? Array.from(storyTagsSet) : [];
   const packageAnnotation = storyTags?.find((tag) => tag.startsWith('package:'));
@@ -46,6 +52,7 @@ export function useGetCem() {
       return cemFiori;
   }
 }
+
 const replaceSubComps = {
   ListItemBase: ['ListItemStandard', 'ListItemCustom', 'ListItemGroup'],
   InputSuggestionItem: ['SuggestionItem', 'SuggestionGroupItem'],
@@ -83,6 +90,7 @@ function findSubComponentsRecursively(moduleName: string, cem: any): string[] {
 
   return Array.from(subComponentsSet);
 }
+
 export function useGetSubComponentsOfModule(moduleName: string) {
   const cem = useGetCem(); // Assuming useGetCem() is defined elsewhere
   return useMemo(() => {
diff --git a/cypress.config.ts b/cypress.config.ts
index cf3008c3a05..1926aa3aea4 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,4 +1,4 @@
-import codeCoverageTask from '@cypress/code-coverage/task';
+import codeCoverageTask from '@cypress/code-coverage/task.js';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
diff --git a/docs/Formhandling.mdx b/docs/Formhandling.mdx
index bdc11338f00..bbc0f63102c 100644
--- a/docs/Formhandling.mdx
+++ b/docs/Formhandling.mdx
@@ -21,7 +21,7 @@ You can then create a form with UI5 Web Components for React as follows. Also, y
     <summary>Show code</summary>
 
 ```jsx
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   ThemeProvider,
   Form,
diff --git a/docs/Welcome.mdx b/docs/Welcome.mdx
index 37abfbd943a..cbbc628f8cd 100644
--- a/docs/Welcome.mdx
+++ b/docs/Welcome.mdx
@@ -148,7 +148,7 @@ You can find all available interfaces of the main package [here](https://github.
 Small app with a popover opened by clicking a button including type declarations:
 
 ```tsx
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import type { ButtonPropTypes, PopoverDomRef, PopoverPropTypes } from '@ui5/webcomponents-react';
 import { ThemeProvider, Button, Popover } from '@ui5/webcomponents-react';
 
diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx
index 499fa40f68e..1701e505bd5 100644
--- a/docs/knowledge-base/Styling.mdx
+++ b/docs/knowledge-base/Styling.mdx
@@ -77,7 +77,6 @@ In order to reuse our central styling approach, you can import the `ThemingParam
 You can then create a custom component by following this recipe:
 
 ```tsx
-import React from 'react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import './MyCustomElement.css';
 
diff --git a/package.json b/package.json
index 1bc5919c6ff..cf2332f5a68 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,14 @@
     "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 && lerna run build:client && lerna run build:wrapper && lerna run build:ssr",
+    "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: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",
-    "clean": "tsc --build --clean && rimraf temp .out && lerna run clean",
+    "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}\"",
     "lint": "eslint packages --ext .ts,.tsx",
diff --git a/packages/base/src/hooks/useStylesheet.cy.tsx b/packages/base/src/hooks/useStylesheet.cy.tsx
index 768080eb2e9..8c1b9dcc9b1 100644
--- a/packages/base/src/hooks/useStylesheet.cy.tsx
+++ b/packages/base/src/hooks/useStylesheet.cy.tsx
@@ -1,9 +1,10 @@
+import { ObjectStatus } from '@ui5/webcomponents-react';
 import { useReducer } from 'react';
-import { ObjectStatus } from '@/packages/main/src';
 
 interface CondRenderCompProps {
   testid?: string;
 }
+
 const CondRenderComp = ({ testid }: CondRenderCompProps) => {
   const [visible, toggle] = useReducer((prev) => !prev, true);
   return (
diff --git a/packages/base/tsconfig.build.json b/packages/base/tsconfig.build.json
new file mode 100644
index 00000000000..087137a4e3c
--- /dev/null
+++ b/packages/base/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx"]
+}
diff --git a/packages/base/tsconfig.json b/packages/base/tsconfig.json
index fb2958c502b..77ecddb1c36 100644
--- a/packages/base/tsconfig.json
+++ b/packages/base/tsconfig.json
@@ -1,15 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
     "strict": true,
-    "noImplicitAny": false,
-    "rootDir": "./src"
+    "noImplicitAny": false
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx"]
+  "include": ["src"]
 }
diff --git a/packages/charts/src/components/LineChart/LineChart.stories.tsx b/packages/charts/src/components/LineChart/LineChart.stories.tsx
index 2fff420a1de..4ebe61c6f48 100644
--- a/packages/charts/src/components/LineChart/LineChart.stories.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { LineChart } from './LineChart.js';
 
diff --git a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx b/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx
index 129de7703c2..01df003343f 100644
--- a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx
+++ b/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import React from 'react';
 import { Invention, TimingFigure } from './examples/Annotations.js';
 import { dummyDataSet, dummyDiscreteDataSet, inventionDataset, schedulingEDFData } from './examples/Dataset.js';
 import { TimelineChart } from './TimelineChart.js';
diff --git a/packages/charts/tsconfig.build.json b/packages/charts/tsconfig.build.json
new file mode 100644
index 00000000000..0604991aae0
--- /dev/null
+++ b/packages/charts/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "references": [
+    {
+      "path": "../base/tsconfig.build.json"
+    },
+    {
+      "path": "../main/tsconfig.build.json"
+    }
+  ],
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+}
diff --git a/packages/charts/tsconfig.json b/packages/charts/tsconfig.json
index d9595df4b37..3a30b0c87a8 100644
--- a/packages/charts/tsconfig.json
+++ b/packages/charts/tsconfig.json
@@ -1,21 +1,12 @@
 {
   "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src"
-  },
   "references": [
     {
-      "path": "../base"
+      "path": "../base/tsconfig.json"
     },
     {
-      "path": "../main"
+      "path": "../main/tsconfig.json"
     }
   ],
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+  "include": ["src"]
 }
diff --git a/packages/cli/tsconfig.build.json b/packages/cli/tsconfig.build.json
new file mode 100644
index 00000000000..fc8520e7376
--- /dev/null
+++ b/packages/cli/tsconfig.build.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index d43f5335060..fb2b71c6908 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -3,13 +3,7 @@
   "compilerOptions": {
     "target": "es2022",
     "lib": ["ES2023", "dom"],
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
     "noEmitOnError": true,
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src",
     "strict": true,
     "types": ["node"],
     "skipLibCheck": true
diff --git a/packages/compat/tsconfig.build.json b/packages/compat/tsconfig.build.json
new file mode 100644
index 00000000000..0604991aae0
--- /dev/null
+++ b/packages/compat/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "references": [
+    {
+      "path": "../base/tsconfig.build.json"
+    },
+    {
+      "path": "../main/tsconfig.build.json"
+    }
+  ],
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+}
diff --git a/packages/compat/tsconfig.json b/packages/compat/tsconfig.json
index f925a869df1..69bb5f8ccbf 100644
--- a/packages/compat/tsconfig.json
+++ b/packages/compat/tsconfig.json
@@ -1,12 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src",
     "strict": true,
     "noImplicitAny": false,
     "strictNullChecks": false,
@@ -14,12 +8,11 @@
   },
   "references": [
     {
-      "path": "../base"
+      "path": "../base/tsconfig.json"
     },
     {
-      "path": "../main"
+      "path": "../main/tsconfig.json"
     }
   ],
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+  "include": ["src/**/*"]
 }
diff --git a/packages/cypress-commands/Commands.mdx b/packages/cypress-commands/Commands.mdx
index 8fab554ead0..7e4ec531a6b 100644
--- a/packages/cypress-commands/Commands.mdx
+++ b/packages/cypress-commands/Commands.mdx
@@ -1,7 +1,6 @@
-import { Footer, TableOfContent } from '@sb/components';
+import { CommandsAndQueries, Footer, TableOfContent } from '@sb/components';
 import { Meta } from '@storybook/addon-docs';
 import API from './api.json';
-import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 
 <Meta title="Commands" />
 
@@ -12,7 +11,7 @@ import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 Here you can find all available Commands of the `@ui5/webcomponents-cypress-commands` package.
 
 <CommandsAndQueries
-  api={API.children.find((file) => file.name === 'src/commands')?.children?.[0]?.children?.[0]?.children ?? []}
+  api={API.children.find((file) => file.name === 'commands')?.children?.[0]?.children?.[0]?.children ?? []}
 />
 
 <Footer />
diff --git a/packages/cypress-commands/Queries.mdx b/packages/cypress-commands/Queries.mdx
index 8a26cce225b..0ff9e874cc4 100644
--- a/packages/cypress-commands/Queries.mdx
+++ b/packages/cypress-commands/Queries.mdx
@@ -1,7 +1,6 @@
-import { Footer, TableOfContent } from '@sb/components';
+import { CommandsAndQueries, Footer, TableOfContent } from '@sb/components';
 import { Meta } from '@storybook/addon-docs';
 import API from './api.json';
-import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 
 <Meta title="Queries" />
 
@@ -12,7 +11,7 @@ import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 Here you can find all available Queries of the `@ui5/webcomponents-cypress-commands` package.
 
 <CommandsAndQueries
-  api={API.children.find((file) => file.name === 'src/queries')?.children?.[0]?.children?.[0]?.children ?? []}
+  api={API.children.find((file) => file.name === 'queries')?.children?.[0]?.children?.[0]?.children ?? []}
 />
 
 <Footer />
diff --git a/packages/cypress-commands/tsconfig.build.json b/packages/cypress-commands/tsconfig.build.json
new file mode 100644
index 00000000000..fc8520e7376
--- /dev/null
+++ b/packages/cypress-commands/tsconfig.build.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}
diff --git a/packages/cypress-commands/tsconfig.json b/packages/cypress-commands/tsconfig.json
index 42ed5e4e817..8fa7868a413 100644
--- a/packages/cypress-commands/tsconfig.json
+++ b/packages/cypress-commands/tsconfig.json
@@ -4,10 +4,6 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noEmitOnError": true,
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src",
     "types": ["cypress"],
     "strict": true,
     "skipLibCheck": true
diff --git a/packages/cypress-commands/tsconfig.typedoc.json b/packages/cypress-commands/tsconfig.typedoc.json
index c28247523bd..b90fc83e04c 100644
--- a/packages/cypress-commands/tsconfig.typedoc.json
+++ b/packages/cypress-commands/tsconfig.typedoc.json
@@ -1,7 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "."
-  },
-  "include": ["src", "CommandsAndQueries.tsx"]
+  "include": ["src"]
 }
diff --git a/packages/main/.babelrc.json b/packages/main/.babelrc.json
index 1ddb1355e66..e72ed3c8b69 100644
--- a/packages/main/.babelrc.json
+++ b/packages/main/.babelrc.json
@@ -48,5 +48,5 @@
       ]
     }
   },
-  "ignore": ["**/*.cy.ts", "**/*.cy.tsx", "**/CodeGen.tsx", "**/*.stories.tsx"]
+  "ignore": ["dist", "**/*.cy.ts", "**/*.cy.tsx", "**/CodeGen.tsx", "**/*.stories.tsx"]
 }
diff --git a/packages/main/package.json b/packages/main/package.json
index 96c30abadfc..5001b157a95 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -44,9 +44,9 @@
   "scripts": {
     "clean": "rimraf dist tmp wrappers ssr",
     "build:i18n": "node scripts/generateI18n.mjs",
-    "build:client": "babel src --out-dir dist --extensions .ts,.tsx --env-name client && tsc --declarationDir dist",
-    "build:ssr": "babel src --out-dir ssr --extensions .ts,.tsx --env-name ssr && tsc --declarationDir ssr",
-    "build:wrapper": "babel src --out-dir wrappers --extensions .ts,.tsx --env-name wrapper && tsc --declarationDir wrappers",
+    "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",
     "watch:css": "yarn build:css --watch"
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
index 885010c8f59..ae9a3d02925 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import '@ui5/webcomponents-icons/dist/delete.js';
 import '@ui5/webcomponents-icons/dist/edit.js';
 import '@ui5/webcomponents-icons/dist/settings.js';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   AnalyticalTableScaleWidthMode,
   AnalyticalTableSelectionBehavior,
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx
index af88ed9c7dd..ea01d7c24b2 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx
@@ -4,7 +4,7 @@ import dataManualSelect from '@sb/mockData/FriendsManualSelect25.json';
 import dataTree from '@sb/mockData/FriendsTree.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import InputType from '@ui5/webcomponents/dist/types/InputType.js';
-import React, { useReducer, useState } from 'react';
+import { useReducer, useState } from 'react';
 import { AnalyticalTableSelectionMode, FlexBoxAlignItems, FlexBoxDirection } from '../../enums';
 import { Button, CheckBox, Input, Label, ToggleButton, Text } from '../../webComponents';
 import { FlexBox } from '../FlexBox';
diff --git a/packages/main/src/components/Grid/Grid.stories.tsx b/packages/main/src/components/Grid/Grid.stories.tsx
index 045bc5dda11..214f9aa9074 100644
--- a/packages/main/src/components/Grid/Grid.stories.tsx
+++ b/packages/main/src/components/Grid/Grid.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Grid } from './index.js';
 
 const meta = {
diff --git a/packages/main/src/components/Modals/Modals.stories.tsx b/packages/main/src/components/Modals/Modals.stories.tsx
index 1e587894078..a5454027dd0 100644
--- a/packages/main/src/components/Modals/Modals.stories.tsx
+++ b/packages/main/src/components/Modals/Modals.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { MessageBoxType } from '../../enums/index.js';
 import { Bar, Button, MenuItem } from '../../webComponents/index.js';
 import { Modals } from './index.js';
diff --git a/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx b/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx
index 6a8eaba6abd..2b2d6a4c059 100644
--- a/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx
+++ b/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx
@@ -1,7 +1,7 @@
 import { SplitterElementContent } from '@sb/components/SplitterElementContent';
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button, FlexBox, Label, SegmentedButton, SegmentedButtonItem, SplitterElement, Text } from '../..';
 import { SplitterLayout } from './index.js';
 
diff --git a/packages/main/src/internal/utils.cy.tsx b/packages/main/src/internal/utils.cy.tsx
index e3cfc27f430..a314e41eb95 100644
--- a/packages/main/src/internal/utils.cy.tsx
+++ b/packages/main/src/internal/utils.cy.tsx
@@ -1,4 +1,4 @@
-import ValueState from '@ui5/webcomponents-base/dist/types/ValueState';
+import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { expect } from 'chai';
 import { Fragment, useRef } from 'react';
 import {
@@ -15,8 +15,8 @@ import {
   Title
 } from '../index.js';
 import { useGetHeaderHeight } from '../webComponents/DynamicPage/helpers.js';
-import { flattenFragments } from './utils';
-import type { DynamicPageDomRef } from '@/packages/main/src';
+import type { DynamicPageDomRef } from '../webComponents/DynamicPage/index.js';
+import { flattenFragments } from './utils.js';
 import './DynamicPageStickyHeader.css';
 
 describe('utils', function () {
diff --git a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx
index be56851eac8..7901937d506 100644
--- a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx
+++ b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx
@@ -1,6 +1,6 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../Button';
 import { ColorPaletteItem } from '../ColorPaletteItem';
diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
index 99933cfead7..a87f826c1fc 100644
--- a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
+++ b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
@@ -4,22 +4,22 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js';
 import { spacing } from '@ui5/webcomponents-react-base';
 import { useState } from 'react';
-import { FlexBox } from '../../components/FlexBox';
-import { Toolbar } from '../../components/Toolbar';
-import { ToolbarSpacer } from '../../components/ToolbarSpacer';
-import { FlexBoxDirection, ToolbarDesign } from '../../enums';
-import { Text } from '../../webComponents/Text';
-import { Avatar } from '../Avatar';
-import { Button } from '../Button';
-import { Card } from '../Card';
-import { Label } from '../Label';
-import { List } from '../List';
-import { ListItemStandard } from '../ListItemStandard';
-import { RatingIndicator } from '../RatingIndicator';
-import { ShellBar } from '../ShellBar';
-import { Title } from '../Title';
-import { FlexibleColumnLayout } from './index';
-import { CardHeader } from '@ui5/webcomponents-react';
+import { FlexBox } from '../../components/FlexBox/index.js';
+import { Toolbar } from '../../components/Toolbar/index.js';
+import { ToolbarSpacer } from '../../components/ToolbarSpacer/index.js';
+import { FlexBoxDirection, ToolbarDesign } from '../../enums/index.js';
+import { Text } from '../../webComponents/Text/index.js';
+import { Avatar } from '../Avatar/index.js';
+import { Button } from '../Button/index.js';
+import { Card } from '../Card/index.js';
+import { CardHeader } from '../CardHeader/index.js';
+import { Label } from '../Label/index.js';
+import { List } from '../List/index.js';
+import { ListItemStandard } from '../ListItemStandard/index.js';
+import { RatingIndicator } from '../RatingIndicator/index.js';
+import { ShellBar } from '../ShellBar/index.js';
+import { Title } from '../Title/index.js';
+import { FlexibleColumnLayout } from './index.js';
 
 const meta = {
   title: 'Layouts & Floorplans / FlexibleColumnLayout',
diff --git a/packages/main/src/webComponents/Icon/Icon.stories.tsx b/packages/main/src/webComponents/Icon/Icon.stories.tsx
index 4dcc316f40a..ad1694f9fa3 100644
--- a/packages/main/src/webComponents/Icon/Icon.stories.tsx
+++ b/packages/main/src/webComponents/Icon/Icon.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-expect-error: storybook can load json
 import cem from '@sb/custom-element-manifests/main.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
diff --git a/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx b/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx
index c2ca8c3e058..60fa57903c8 100644
--- a/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx
+++ b/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import MediaGalleryLayout from '@ui5/webcomponents-fiori/dist/types/MediaGalleryLayout.js';
 import MediaGalleryMenuHorizontalAlign from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuHorizontalAlign.js';
 import MediaGalleryMenuVerticalAlign from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuVerticalAlign.js';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { MediaGalleryItem } from '../MediaGalleryItem/index.js';
 import { Toast } from '../Toast/index.js';
 import { MediaGallery } from './index.js';
diff --git a/packages/main/src/webComponents/Menu/Menu.stories.tsx b/packages/main/src/webComponents/Menu/Menu.stories.tsx
index 2f64d5c3f0e..0802400fbaf 100644
--- a/packages/main/src/webComponents/Menu/Menu.stories.tsx
+++ b/packages/main/src/webComponents/Menu/Menu.stories.tsx
@@ -1,6 +1,6 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button } from '../Button/index.js';
 import { MenuItem } from '../MenuItem/index.js';
 import { Menu } from './index.js';
diff --git a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx
index bcb33914cdf..ff4d594840f 100644
--- a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx
+++ b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx
@@ -1,9 +1,7 @@
-// @ts-expect-error: png's are not typed
 import image from '@sb/demoImages/Person.png';
 import type { Meta, StoryObj } from '@storybook/react';
 import addIcon from '@ui5/webcomponents-icons/dist/add.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
-import React from 'react';
 import { Avatar, Icon, Input, ListItemStandard, ShellBarItem } from '../index';
 import { ShellBar } from './index';
 
diff --git a/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx b/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx
index 7278bf786f3..dbee41dde6f 100644
--- a/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx
+++ b/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx
@@ -28,7 +28,7 @@ To use this functionality the `onDrop` handler has to be manually adjusted.<br/>
 This example shows, how to dynamically render a `UploadCollectionItem` by dropping files into the `UploadCollection`:
 
 ```jsx
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Icon, Text, UploadCollection, UploadCollectionItem } from '@ui5/webcomponents-react';
 
 export const UploadCollectionComponent = () => {
diff --git a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx
index 2c3fab1869f..4896912d5bd 100644
--- a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx
+++ b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx
@@ -1,6 +1,6 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import type { ViewSettingsDialogPropTypes } from '../../index';
 import { Button, FilterItem, FilterItemOption, SortItem } from '../../index';
diff --git a/packages/main/tsconfig.build.json b/packages/main/tsconfig.build.json
new file mode 100644
index 00000000000..6442c817f23
--- /dev/null
+++ b/packages/main/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "references": [
+    {
+      "path": "../base/tsconfig.build.json"
+    }
+  ],
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+}
diff --git a/packages/main/tsconfig.json b/packages/main/tsconfig.json
index 4d627c0a456..b0314282d66 100644
--- a/packages/main/tsconfig.json
+++ b/packages/main/tsconfig.json
@@ -1,12 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src",
     "strict": true,
     "noImplicitAny": false,
     "strictNullChecks": false,
@@ -15,9 +9,8 @@
   },
   "references": [
     {
-      "path": "../base"
+      "path": "../base/tsconfig.json"
     }
   ],
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+  "include": ["src"]
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index ee735594d67..51bb3f1c522 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1,21 +1,21 @@
 {
   "compilerOptions": {
-    "module": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "target": "ES2021",
     "lib": ["ES2022", "dom"],
     "jsx": "react-jsx",
-    "baseUrl": ".",
-    "rootDir": ".",
+    "baseUrl": "${configDir}/src",
+    "rootDir": "${configDir}/src",
     "composite": true,
     "paths": {
+      "@/*": ["./*"],
       "@sb/*": ["./.storybook/*"],
       "@ui5/webcomponents-cypress-commands": ["./packages/cypress-commands/src/index.ts"],
       "@ui5/webcomponents-react": ["./packages/main/src/index.ts"],
       "@ui5/webcomponents-react-base": ["./packages/base/src/index.ts"],
-      "@ui5/webcomponents-react-charts": ["./packages/charts/src/index.ts"],
-      "@ui5/webcomponents-react/*": ["./packages/main/src/*"]
+      "@ui5/webcomponents-react-charts": ["./packages/charts/src/index.ts"]
     },
-    "moduleResolution": "node",
     "forceConsistentCasingInFileNames": true,
     "strict": false,
     "allowSyntheticDefaultImports": true,
@@ -24,6 +24,8 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "declaration": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "outDir": "${configDir}/dist",
+    "declarationDir": "${configDir}/dist"
   }
 }
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 00000000000..7b79d30c347
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.base.json",
+  "references": [
+    {
+      "path": "./packages/base/tsconfig.build.json"
+    },
+    {
+      "path": "./packages/main/tsconfig.build.json"
+    },
+    {
+      "path": "./packages/charts/tsconfig.build.json"
+    },
+    {
+      "path": "./packages/cypress-commands/tsconfig.build.json"
+    },
+    {
+      "path": "./packages/cli/tsconfig.build.json"
+    },
+    {
+      "path": "./packages/compat/tsconfig.build.json"
+    }
+  ],
+  "files": []
+}
diff --git a/tsconfig.json b/tsconfig.json
index 0e71aac30ef..4485c146700 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,23 +2,26 @@
   "extends": "./tsconfig.base.json",
   "references": [
     {
-      "path": "./packages/base"
+      "path": "./packages/base/tsconfig.json"
     },
     {
-      "path": "./packages/main"
+      "path": "./packages/main/tsconfig.json"
     },
     {
-      "path": "./packages/charts"
+      "path": "./packages/charts/tsconfig.json"
     },
     {
-      "path": "./packages/cypress-commands"
+      "path": "./packages/cypress-commands/tsconfig.json"
     },
     {
-      "path": "./packages/cli"
+      "path": "./packages/cli/tsconfig.json"
     },
     {
-      "path": "./packages/compat"
+      "path": "./packages/compat/tsconfig.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
     }
   ],
-  "files": []
+  "files": ["vite.config.ts", ".storybook", "docs", "types.d.ts"]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
deleted file mode 100644
index e2e4ab42447..00000000000
--- a/tsconfig.node.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "vite.config.ts",
-    ".storybook",
-    "docs",
-    "packages/**/*.stories.tsx",
-    "packages/cypress-commands/CommandsAndQueries.tsx"
-  ]
-}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 555caf318d4..1f2a528e3db 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -4,19 +4,7 @@
     "lib": ["es2022", "dom"],
     "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"],
     "moduleResolution": "Node",
-    "jsx": "react-jsx",
-    "paths": {
-      "@/*": ["./*"]
-    }
+    "jsx": "react-jsx"
   },
-  "include": [
-    "cypress/**/*.ts",
-    "cypress/**/*.tsx",
-    "**/*.cy.ts",
-    "**/*.cy.tsx",
-    "cypress.config.ts",
-    "docs/knowledge-base/*.tsx",
-    "docs/knowledgeBaseExamples/*.tsx",
-    "vite.config.ts"
-  ]
+  "include": ["cypress", "**/*.cy.ts", "**/*.cy.tsx", "cypress.config.ts"]
 }
diff --git a/types.d.ts b/types.d.ts
index fdb899939c1..5e225d56803 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, Context, Dispatch } from 'react';
+import type { ComponentType, Context, Dispatch } from 'react';
 
 interface UpdateModalStateAction {
   type: 'set' | 'reset';
@@ -30,3 +30,17 @@ declare module '*.md' {
   const content: string;
   export default content;
 }
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.module.css' {
+  const content: Record<string, string>;
+  export default content;
+}