refactor(base): move internals to internal dir (#7770)

Lukas742 · MarcusNotheis · web-flow · commit b3a0ce329f4f · 2025-09-24T12:13:31.000Z
Co-authored-by: Marcus Notheis &lt;marcus.notheis@sap.com&gt;
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -50,7 +50,7 @@ jobs:
         run: yarn install --immutable
 
   test:
-    needs: ['install']
+    needs: ['build']
     uses: './.github/workflows/test.yml'
 
   build:
@@ -83,6 +83,11 @@ jobs:
       - name: Build
         run: yarn build
 
+      - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: build-${{ matrix.react }}
+          path: packages/*/dist
+
   lint:
     needs: ['install']
     runs-on: ubuntu-latest
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -41,8 +41,13 @@ jobs:
           yarn add "@types/react@18" "@types/react-dom@18" --dev
           yarn add react@18 react-dom@18
 
+      - uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5.0.0
+        with:
+          name: build-${{ matrix.react }}
+          path: packages
+
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@b8ba51a856ba5f4c15cf39007636d4ab04f23e3c # v6.10.2
         with:
           browser: chrome
           component: true
diff --git a/.storybook/components/ProjectTemplate.tsx b/.storybook/components/ProjectTemplate.tsx
@@ -12,7 +12,7 @@ import {
   Text,
   ThemeProvider,
 } from '@ui5/webcomponents-react';
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import { useRef, useState } from 'react';
diff --git a/REUSE.toml b/REUSE.toml
@@ -16,19 +16,19 @@ SPDX-FileCopyrightText = "2016-2025 Recharts Group"
 SPDX-License-Identifier = "MIT"
 
 [[annotations]]
-path = "packages/base/src/hooks/useIsomorphicLayoutEffect.ts"
+path = "packages/base/src/internal/hooks/useIsomorphicLayoutEffect.ts"
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2019 Tanner Linsley"
 SPDX-License-Identifier = "MIT"
 
 [[annotations]]
-path = "packages/base/src/utils/debounce.ts"
+path = "packages/base/src/internal/utils/debounce.ts"
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2009-2021 Jeremy Ashkenas, Julian Gonggrijp, and DocumentCloud and Investigative Reporters & Editors"
 SPDX-License-Identifier = "MIT"
 
 [[annotations]]
-path = "packages/base/src/utils/throttle.ts"
+path = "packages/base/src/internal/utils/throttle.ts"
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2009-2021 Jeremy Ashkenas, Julian Gonggrijp, and DocumentCloud and Investigative Reporters & Editors"
 SPDX-License-Identifier = "MIT"
diff --git a/package.json b/package.json
@@ -15,15 +15,15 @@
     "build:storybook-sitemap": "node ./scripts/create-storybook-sitemap.js --directory .out",
     "test:prepare": "rimraf temp && lerna run build",
     "test:open": "CYPRESS_COVERAGE=false cypress open --component --browser chrome",
-    "test": "yarn test:prepare && cypress run --component --browser chrome",
+    "test": "yarn test:prepare && cypress run --component --browser chrome --spec packages",
     "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.js \"**/*\"",
     "lint": "eslint .",
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)'",
     "wrappers:fiori": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)'",
-    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components",
+    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/withWebComponent' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components",
     "wrappers:ai": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-ai --out ./packages/ai/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)' && prettier --log-level silent --write ./packages/ai/src/components",
     "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
     "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx",
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -15,7 +15,6 @@
     "./dist": "./dist/index.js",
     "./dist/*": "./dist/*",
     "./dist/*.js": "./dist/*.js",
-    "./internal/addCustomCSSWithScoping.js": "./dist/utils/addCustomCSSWithScoping.js",
     "./Device": {
       "types": "./dist/Device/index.d.ts",
       "default": "./dist/Device/index.js"
@@ -29,28 +28,49 @@
       "default": "./dist/generated/VersionInfo.js"
     },
     "./I18nStore": {
-      "types": "./dist/stores/I18nStore.d.ts",
-      "default": "./dist/stores/I18nStore.js"
+      "types": "./dist/internal/stores/I18nStore.d.ts",
+      "default": "./dist/internal/stores/I18nStore.js"
     },
     "./StyleStore": {
-      "types": "./dist/stores/StyleStore.d.ts",
-      "default": "./dist/stores/StyleStore.js"
+      "types": "./dist/internal/stores/StyleStore.d.ts",
+      "default": "./dist/internal/stores/StyleStore.js"
     },
     "./CssSizeVariables": {
-      "types": "./dist/styling/CssSizeVariables.d.ts",
-      "default": "./dist/styling/CssSizeVariables.js"
+      "types": "./dist/internal/styling/CssSizeVariables.d.ts",
+      "default": "./dist/internal/styling/CssSizeVariables.js"
     },
     "./ThemingParameters": {
       "types": "./dist/styling/ThemingParameters.d.ts",
       "default": "./dist/styling/ThemingParameters.js"
     },
     "./withWebComponent": {
-      "types": "./dist/wrapper/withWebComponent.d.ts",
-      "default": "./dist/wrapper/withWebComponent.js"
+      "types": "./dist/internal/wrapper/withWebComponent.d.ts",
+      "default": "./dist/internal/wrapper/withWebComponent.js"
     },
     "./utils": {
-      "types": "./dist/utils/index.d.ts",
-      "default": "./dist/utils/index.js"
+      "types": "./dist/internal/utils/index.d.ts",
+      "default": "./dist/internal/utils/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/index.js"
+    },
+    "./internal/addCustomCSSWithScoping.js": "./dist/internal/utils/addCustomCSSWithScoping.js",
+    "./internal/hooks": {
+      "types": "./dist/internal/hooks/index.d.ts",
+      "default": "./dist/internal/hooks/index.js"
+    },
+    "./internal/types": {
+      "types": "./dist/internal/types/index.d.ts",
+      "default": "./dist/internal/types/index.js"
+    },
+    "./internal/utils": {
+      "types": "./dist/internal/utils/index.d.ts",
+      "default": "./dist/internal/utils/index.js"
+    },
+    "./internal/*": {
+      "types": "./dist/internal/*.d.ts",
+      "default": "./dist/internal/*.js"
     }
   },
   "homepage": "https://ui5.github.io/webcomponents-react",
diff --git a/packages/base/src/hooks/index.ts b/packages/base/src/hooks/index.ts
@@ -1,17 +1,4 @@
-import { useCurrentTheme } from './useCurrentTheme.js';
 import { useI18nBundle } from './useI18nBundle.js';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
-import { useIsRTL } from './useIsRTL.js';
-import { useStylesheet } from './useStylesheet.js';
-import { useSyncRef } from './useSyncRef.js';
 import { useViewportRange } from './useViewportRange.js';
 
-export {
-  useI18nBundle,
-  useIsomorphicLayoutEffect,
-  useIsRTL,
-  useSyncRef,
-  useViewportRange,
-  useStylesheet,
-  useCurrentTheme,
-};
+export { useI18nBundle, useViewportRange };
diff --git a/packages/base/src/hooks/useI18nBundle.ts b/packages/base/src/hooks/useI18nBundle.ts
@@ -2,7 +2,7 @@
 
 import I18nBundle from '@ui5/webcomponents-base/dist/i18nBundle.js';
 import { useEffect, useSyncExternalStore } from 'react';
-import { I18nStore } from '../stores/I18nStore.js';
+import { I18nStore } from '../internal/stores/I18nStore.js';
 
 const defaultBundle = new I18nBundle('defaultBundle');
 
diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
@@ -1,15 +1,17 @@
 import * as Device from './Device/index.js';
 import VersionInfo from './generated/VersionInfo.js';
 import * as hooks from './hooks/index.js';
-import { I18nStore } from './stores/I18nStore.js';
-import { StyleStore } from './stores/StyleStore.js';
+import { I18nStore } from './internal/stores/I18nStore.js';
+import { StyleStore } from './internal/stores/StyleStore.js';
+import { withWebComponent } from './internal/wrapper/withWebComponent.js';
+import type { WithWebComponentPropTypes } from './internal/wrapper/withWebComponent.js';
 import { ThemingParameters } from './styling/ThemingParameters.js';
-import { withWebComponent } from './wrapper/withWebComponent.js';
-import type { WithWebComponentPropTypes } from './wrapper/withWebComponent.js';
 
-export * from './styling/CssSizeVariables.js';
-export * from './utils/index.js';
+export * from './internal/styling/CssSizeVariables.js';
+export * from './internal/utils/index.js';
 export * from './hooks/index.js';
+export * from './internal/hooks/index.js';
+export type * from './internal/types/index.js';
 export type * from './types/index.js';
 
 export { I18nStore, StyleStore, ThemingParameters, Device, hooks, withWebComponent };
diff --git a/packages/base/src/internal/hooks/index.ts b/packages/base/src/internal/hooks/index.ts
@@ -0,0 +1,7 @@
+import { useCurrentTheme } from './useCurrentTheme.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useIsRTL } from './useIsRTL.js';
+import { useStylesheet } from './useStylesheet.js';
+import { useSyncRef } from './useSyncRef.js';
+
+export { useIsomorphicLayoutEffect, useIsRTL, useSyncRef, useStylesheet, useCurrentTheme };
diff --git a/packages/base/src/internal/hooks/useCurrentTheme.ts b/packages/base/src/internal/hooks/useCurrentTheme.ts
diff --git a/packages/base/src/internal/hooks/useIsRTL.ts b/packages/base/src/internal/hooks/useIsRTL.ts
@@ -3,7 +3,7 @@
 import { attachDirectionChange, detachDirectionChange } from '@ui5/webcomponents-base/dist/locale/directionChange.js';
 import type { RefObject } from 'react';
 import { useRef, useState } from 'react';
-import { useIsomorphicLayoutEffect } from '../hooks/index.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 
 const useIsRTL = <RefType extends HTMLElement>(elementRef: RefObject<RefType>): boolean => {
   const [isRTL, setRTL] = useState(false); // initial value is always LTR (also for SSR)
diff --git a/packages/base/src/internal/hooks/useIsomorphicLayoutEffect.ts b/packages/base/src/internal/hooks/useIsomorphicLayoutEffect.ts
diff --git a/packages/base/src/internal/hooks/useStylesheet.cy.tsx b/packages/base/src/internal/hooks/useStylesheet.cy.tsx
diff --git a/packages/base/src/internal/hooks/useStylesheet.ts b/packages/base/src/internal/hooks/useStylesheet.ts
diff --git a/packages/base/src/internal/hooks/useSyncRef.ts b/packages/base/src/internal/hooks/useSyncRef.ts
diff --git a/packages/base/src/internal/stores/I18nStore.ts b/packages/base/src/internal/stores/I18nStore.ts
diff --git a/packages/base/src/internal/stores/StyleStore.ts b/packages/base/src/internal/stores/StyleStore.ts
diff --git a/packages/base/src/internal/styling/CssSizeVariables.ts b/packages/base/src/internal/styling/CssSizeVariables.ts
@@ -1,4 +1,4 @@
-import { ThemingParameters } from './ThemingParameters.js';
+import { ThemingParameters } from '../../styling/ThemingParameters.js';
 
 export enum CssSizeVariablesNames {
   ui5WcrBarHeight = '--_ui5wcr-BarHeight',
diff --git a/packages/base/src/internal/types/CommonProps.ts b/packages/base/src/internal/types/CommonProps.ts
@@ -1,5 +1,8 @@
 import type { CSSProperties, HTMLAttributes } from 'react';
 
+/**
+ * ⚠️ __INTERNAL__ use only! This interface is not part of the public API.
+ */
 export interface CommonProps<T = HTMLElement> extends Omit<HTMLAttributes<T>, 'dangerouslySetInnerHTML'> {
   /**
    * Element style which will be appended to the most outer element of a component.
diff --git a/packages/base/src/internal/types/Ui5CustomEvent.ts b/packages/base/src/internal/types/Ui5CustomEvent.ts
@@ -1,3 +1,6 @@
+/**
+ * ⚠️ __INTERNAL__ use only! This interface is not part of the public API.
+ */
 export interface Ui5CustomEvent<EventTarget = HTMLElement, Detail = never>
   extends Omit<CustomEvent<Detail>, 'target' | 'currentTarget'> {
   target: EventTarget;
diff --git a/packages/base/src/internal/types/Ui5DomRef.ts b/packages/base/src/internal/types/Ui5DomRef.ts
diff --git a/packages/base/src/internal/types/index.ts b/packages/base/src/internal/types/index.ts
@@ -0,0 +1,13 @@
+import type { ReactNode, ReactPortal } from 'react';
+/**
+ * ⚠️ __INTERNAL__ use only! This type is not part of the public API.
+ */
+export type ReducedReactNode = Exclude<ReactNode, string | number | boolean | ReactPortal | Iterable<ReactNode>>;
+/**
+ * ⚠️ __INTERNAL__ use only! This type is not part of the public API.
+ */
+export type ReducedReactNodeWithBoolean = Exclude<ReactNode, string | number | ReactPortal | Iterable<ReactNode>>;
+
+export type { CommonProps } from './CommonProps.js';
+export type { Ui5CustomEvent } from './Ui5CustomEvent.js';
+export type { Ui5DomRef } from './Ui5DomRef.js';
diff --git a/packages/base/src/internal/utils/addCustomCSSWithScoping.ts b/packages/base/src/internal/utils/addCustomCSSWithScoping.ts
diff --git a/packages/base/src/internal/utils/debounce.cy.ts b/packages/base/src/internal/utils/debounce.cy.ts
@@ -1,4 +1,4 @@
-import { debounce } from './debounce';
+import { debounce } from './debounce.js';
 
 describe('debounce', function () {
   it('will be called debounced', () => {
diff --git a/packages/base/src/internal/utils/debounce.ts b/packages/base/src/internal/utils/debounce.ts
diff --git a/packages/base/src/internal/utils/index.ts b/packages/base/src/internal/utils/index.ts
@@ -66,6 +66,7 @@ export function getUi5TagWithSuffix(baseTagName: string) {
 
 export { debounce } from './debounce.js';
 export { throttle } from './throttle.js';
+export { addCustomCSSWithScoping } from './addCustomCSSWithScoping.js';
 /**
  * ⚠️ __INTERNAL__ use only! This function is not part of the public API.
  */
diff --git a/packages/base/src/internal/utils/throttle.cy.ts b/packages/base/src/internal/utils/throttle.cy.ts
@@ -1,4 +1,4 @@
-import { throttle } from './throttle';
+import { throttle } from './throttle.js';
 
 const throttledHello = (options?) => {
   const mockFn = cy.spy().as('throttle');
diff --git a/packages/base/src/internal/utils/throttle.ts b/packages/base/src/internal/utils/throttle.ts
diff --git a/packages/base/src/internal/wrapper/withWebComponent.cy.tsx b/packages/base/src/internal/wrapper/withWebComponent.cy.tsx
diff --git a/packages/base/src/internal/wrapper/withWebComponent.tsx b/packages/base/src/internal/wrapper/withWebComponent.tsx
diff --git a/packages/base/src/types/index.ts b/packages/base/src/types/index.ts
@@ -1,7 +1,5 @@
-import type { ReactElement, ReactNode, ReactPortal } from 'react';
-
-export type ReducedReactNode = Exclude<ReactNode, string | number | boolean | ReactPortal | Iterable<ReactNode>>;
-export type ReducedReactNodeWithBoolean = Exclude<ReactNode, string | number | ReactPortal | Iterable<ReactNode>>;
+import type { ReactElement } from 'react';
+import type { ReducedReactNode } from '../internal/types/index.js';
 
 type InternalUI5WCSlotsNode =
   | ReducedReactNode
@@ -10,7 +8,3 @@ type InternalUI5WCSlotsNode =
   | ReactElement /* necessary for React v16 & v17 ReactNode type*/;
 
 export type UI5WCSlotsNode = InternalUI5WCSlotsNode | InternalUI5WCSlotsNode[];
-
-export type { CommonProps } from './CommonProps.js';
-export type { Ui5CustomEvent } from './Ui5CustomEvent.js';
-export type { Ui5DomRef } from './Ui5DomRef.js';
diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx
@@ -1,7 +1,7 @@
 import { BusyIndicator, Label } from '@ui5/webcomponents-react';
 import type { CommonProps } from '@ui5/webcomponents-react';
 import { useStylesheet } from '@ui5/webcomponents-react-base';
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import { clsx } from 'clsx';
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 import { Component, forwardRef } from 'react';
diff --git a/packages/compat/src/components/Table/index.tsx b/packages/compat/src/components/Table/index.tsx
@@ -10,7 +10,7 @@ import type TableGrowingMode from '@ui5/webcomponents-compat/dist/types/TableGro
 import type TableMode from '@ui5/webcomponents-compat/dist/types/TableMode.js';
 import { getCompatCustomElementsScopingSuffix } from '@ui5/webcomponents-compat/dist/utils/CompatCustomElementsScope.js';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
-import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js';
+import { withWebComponent } from '@ui5/webcomponents-react-base/withWebComponent';
 import type { ReactNode } from 'react';
 
 const compatScopingSuffix = getCompatCustomElementsScopingSuffix();
diff --git a/packages/compat/src/components/TableCell/index.tsx b/packages/compat/src/components/TableCell/index.tsx
@@ -3,7 +3,7 @@
 import '@ui5/webcomponents-compat/dist/TableCell.js';
 import { getCompatCustomElementsScopingSuffix } from '@ui5/webcomponents-compat/dist/utils/CompatCustomElementsScope.js';
 import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
-import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js';
+import { withWebComponent } from '@ui5/webcomponents-react-base/withWebComponent';
 import type { ReactNode } from 'react';
 
 const compatScopingSuffix = getCompatCustomElementsScopingSuffix();
diff --git a/packages/compat/src/components/TableColumn/index.tsx b/packages/compat/src/components/TableColumn/index.tsx
@@ -4,7 +4,7 @@ import '@ui5/webcomponents-compat/dist/TableColumn.js';
 import type TableColumnPopinDisplay from '@ui5/webcomponents-compat/dist/types/TableColumnPopinDisplay.js';
 import { getCompatCustomElementsScopingSuffix } from '@ui5/webcomponents-compat/dist/utils/CompatCustomElementsScope.js';
 import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
-import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js';
+import { withWebComponent } from '@ui5/webcomponents-react-base/withWebComponent';
 import type { ReactNode } from 'react';
 
 const compatScopingSuffix = getCompatCustomElementsScopingSuffix();
diff --git a/packages/compat/src/components/TableGroupRow/index.tsx b/packages/compat/src/components/TableGroupRow/index.tsx
@@ -3,7 +3,7 @@
 import '@ui5/webcomponents-compat/dist/TableGroupRow.js';
 import { getCompatCustomElementsScopingSuffix } from '@ui5/webcomponents-compat/dist/utils/CompatCustomElementsScope.js';
 import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
-import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js';
+import { withWebComponent } from '@ui5/webcomponents-react-base/withWebComponent';
 import type { ReactNode } from 'react';
 
 const compatScopingSuffix = getCompatCustomElementsScopingSuffix();
diff --git a/packages/compat/src/components/TableRow/index.tsx b/packages/compat/src/components/TableRow/index.tsx
@@ -4,7 +4,7 @@ import '@ui5/webcomponents-compat/dist/TableRow.js';
 import type TableRowType from '@ui5/webcomponents-compat/dist/types/TableRowType.js';
 import { getCompatCustomElementsScopingSuffix } from '@ui5/webcomponents-compat/dist/utils/CompatCustomElementsScope.js';
 import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
-import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js';
+import { withWebComponent } from '@ui5/webcomponents-react-base/withWebComponent';
 import type { ReactNode } from 'react';
 
 const compatScopingSuffix = getCompatCustomElementsScopingSuffix();
diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx
@@ -3,7 +3,7 @@
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { isPhone } from '@ui5/webcomponents-base/dist/Device.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import { clsx } from 'clsx';
 import type { ReactElement } from 'react';
 import { forwardRef, useEffect, useReducer, useRef, useState } from 'react';
diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx
@@ -5,7 +5,7 @@ import group2Icon from '@ui5/webcomponents-icons/dist/group-2.js';
 import listIcon from '@ui5/webcomponents-icons/dist/list.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import type { ReactElement, RefObject } from 'react';
 import { Children, cloneElement, useEffect, useId, useReducer, useRef, useState } from 'react';
 import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
diff --git a/packages/main/src/webComponents/ExpandableText/index.tsx b/packages/main/src/webComponents/ExpandableText/index.tsx
@@ -5,7 +5,7 @@ import type ExpandableTextOverflowMode from '@ui5/webcomponents/dist/types/Expan
 import type TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 
 //todo: remove once ExpandableText supports setting white-space
 addCustomCSSWithScoping(
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
@@ -3,7 +3,7 @@
     "target": "ES2021",
     "lib": ["es2022", "dom"],
     "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events", "chai"],
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "composite": true
   },
diff --git a/vite.config.ts b/vite.config.ts
