diff --git a/.github/workflows/build-pr.yml b/.github/workflows/build-pr.yml
index d1db873558..346064baa9 100644
--- a/.github/workflows/build-pr.yml
+++ b/.github/workflows/build-pr.yml
@@ -67,6 +67,43 @@ jobs:
       - name: Run TSLint
         run: |
           yarn workspace @telekom/scale-components lint
+  type-check-react:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22
+
+      - name: Restore Lerna
+        id: yarn-cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install project dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn
+
+      - name: Run Lerna bootstrap
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: |
+          yarn bootstrap
+
+      - name: Build Stencil components
+        run: |
+          yarn workspace @telekom/scale-components build
+
+      - name: Build React wrappers
+        run: |
+          yarn workspace @telekom/scale-components-react build
+
+      - name: Type-check React wrapper props
+        run: |
+          yarn workspace @telekom/scale-components-react test:types
   unit-tests:
     runs-on: ubuntu-22.04
     steps:
diff --git a/packages/components-react/__tests__/types.test.tsx b/packages/components-react/__tests__/types.test.tsx
new file mode 100644
index 0000000000..d029ab8c6d
--- /dev/null
+++ b/packages/components-react/__tests__/types.test.tsx
@@ -0,0 +1,142 @@
+/**
+ * Type-level test for Scale React wrapper components.
+ * This file is type-checked only (tsc --noEmit), never executed.
+ * It verifies that generated React wrappers expose Stencil @Prop() as React props.
+ */
+
+import {
+  ScaleAlert,
+  ScaleButton,
+  ScaleTag,
+  ScaleTextField,
+  ScaleSwitch,
+  ScaleCheckbox,
+  ScaleSlider,
+  ScaleProgressBar,
+  ScaleCollapsible,
+  ScaleDropdownSelect,
+  ScaleDropdownSelectItem,
+  ScaleRadioButton,
+  ScaleRadioButtonGroup,
+  ScaleDatePicker,
+  ScaleTextarea,
+  ScaleRatingStars,
+  ScaleTelekomHeader,
+  ScaleTelekomNavItem,
+} from '../dist/index';
+import React from 'react';
+
+// Helper: assert that a JSX expression is valid (compile-time only)
+function expectValidJSX(_jsx: React.ReactElement): void {}
+
+// --- ScaleAlert ---
+expectValidJSX(<ScaleAlert variant="informational" opened headline="Test" />);
+expectValidJSX(<ScaleAlert icon="info" size="small" />);
+
+// --- ScaleButton ---
+expectValidJSX(<ScaleButton variant="secondary" size="small" disabled />);
+expectValidJSX(<ScaleButton type="submit">Submit</ScaleButton>);
+
+// --- ScaleTag ---
+expectValidJSX(
+  <ScaleTag size="small" color="green">
+    Active
+  </ScaleTag>
+);
+expectValidJSX(<ScaleTag dismissable type="strong" />);
+
+// --- ScaleTextField ---
+expectValidJSX(<ScaleTextField label="Name" value="John" required />);
+expectValidJSX(
+  <ScaleTextField label="Email" type="email" helperText="Enter email" />
+);
+
+// --- ScaleSwitch ---
+expectValidJSX(<ScaleSwitch label="Dark Mode" checked />);
+
+// --- ScaleCheckbox ---
+expectValidJSX(<ScaleCheckbox label="Accept terms" checked />);
+expectValidJSX(<ScaleCheckbox indeterminate disabled />);
+
+// --- ScaleSlider ---
+expectValidJSX(
+  <ScaleSlider
+    label="Volume"
+    min={0}
+    max={100}
+    value={50}
+    showValue
+    innerAriaValueText="50%"
+  />
+);
+
+// --- ScaleProgressBar ---
+expectValidJSX(
+  <ScaleProgressBar percentage={75} percentageStart={0} showStatus />
+);
+
+// --- ScaleCollapsible ---
+expectValidJSX(
+  <ScaleCollapsible expanded>
+    <div>Content</div>
+  </ScaleCollapsible>
+);
+
+// --- ScaleDropdownSelect + Item ---
+expectValidJSX(
+  <ScaleDropdownSelect label="Choose" value="a">
+    <ScaleDropdownSelectItem value="a" selected>
+      Option A
+    </ScaleDropdownSelectItem>
+    <ScaleDropdownSelectItem value="b">Option B</ScaleDropdownSelectItem>
+  </ScaleDropdownSelect>
+);
+
+// --- ScaleRadioButtonGroup + ScaleRadioButton ---
+expectValidJSX(
+  <ScaleRadioButtonGroup label="Choice">
+    <ScaleRadioButton label="Option 1" value="1" checked />
+    <ScaleRadioButton label="Option 2" value="2" />
+  </ScaleRadioButtonGroup>
+);
+
+// --- ScaleDatePicker ---
+expectValidJSX(<ScaleDatePicker label="Start date" value="2026-01-01" />);
+
+// --- ScaleTextarea ---
+expectValidJSX(<ScaleTextarea label="Message" rows={5} required />);
+
+// --- ScaleRatingStars ---
+expectValidJSX(
+  <ScaleRatingStars
+    size="large"
+    rating={4}
+    max={5}
+    label="Rating"
+    ariaLabelTranslation="$value out of $max"
+    disabled={false}
+    hideLabel={false}
+    readonly={false}
+  />
+);
+
+// --- ScaleTelekomHeader ---
+expectValidJSX(
+  <ScaleTelekomHeader appName="My App" appNameLink="/">
+    <div>Nav</div>
+  </ScaleTelekomHeader>
+);
+
+// --- ScaleTelekomNavItem ---
+expectValidJSX(
+  <ScaleTelekomNavItem active>
+    <a href="/">Home</a>
+  </ScaleTelekomNavItem>
+);
+
+// --- Negative tests: unknown props should NOT compile ---
+// @ts-expect-error — nonExistentProp is not a valid prop
+expectValidJSX(<ScaleAlert nonExistentProp="x" />);
+
+// @ts-expect-error — nonExistentProp is not a valid prop
+expectValidJSX(<ScaleButton nonExistentProp={42} />);
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index e7882fff6d..11c41094c3 100755
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -17,7 +17,8 @@
     "zip": "zip -vr telekom-scale-components-react-$npm_package_version.zip dist/ -x '*.DS_Store'",
     "clean": "rimraf dist",
     "format": "prettier --write \"package.json\"",
-    "rollup": "rollup -c"
+    "rollup": "rollup -c",
+    "test:types": "tsc --noEmit --project tsconfig.test.json"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
@@ -47,7 +48,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@stencil/react-output-target": "^1.1.1",
+    "@stencil/react-output-target": "~1.5.1",
     "@types/vfile-message": "^2.0.0"
   },
   "peerDependencies": {
diff --git a/packages/components-react/src/components.server.ts b/packages/components-react/src/components.server.ts
index 061e9ce573..274706b490 100644
--- a/packages/components-react/src/components.server.ts
+++ b/packages/components-react/src/components.server.ts
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
@@ -7,456 +9,459 @@
 
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent, type HydrateModule, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
-import { type BeforeCloseEventDetail, type CollapsibleEventDetail, type ComboboxChangeEventDetail, type DataGridEditEventDetail, type DataGridSortedEventDetail, type DuetDatePickerChangeEvent, type DuetDatePickerFocusEvent, type InputChangeEventDetail, type PaginationEventDetail, type ScaleChipCustomEvent, type ScaleCollapsibleCustomEvent, type ScaleComboboxCustomEvent, type ScaleDataGridCustomEvent, type ScaleDatePickerCustomEvent, type ScaleDropdownCustomEvent, type ScaleInputCustomEvent, type ScaleMenuFlyoutItemCustomEvent, type ScaleMenuFlyoutListCustomEvent, type ScaleModalCustomEvent, type ScaleNotificationCustomEvent, type ScalePaginationCustomEvent, type ScaleRadioButtonCustomEvent, type ScaleTagCustomEvent, type ScaleTextFieldCustomEvent, type ScaleTextareaCustomEvent } from "@telekom/scale-components";
-import { AppLogo as AppLogoElement, defineCustomElement as defineAppLogo } from "@telekom/scale-components/dist/components/app-logo.js";
-import { AppMegaMenu as AppMegaMenuElement, defineCustomElement as defineAppMegaMenu } from "@telekom/scale-components/dist/components/app-mega-menu.js";
-import { AppNavigationMainMobile as AppNavigationMainMobileElement, defineCustomElement as defineAppNavigationMainMobile } from "@telekom/scale-components/dist/components/app-navigation-main-mobile.js";
-import { AppNavigationSectorMobile as AppNavigationSectorMobileElement, defineCustomElement as defineAppNavigationSectorMobile } from "@telekom/scale-components/dist/components/app-navigation-sector-mobile.js";
-import { AppNavigationUserMenu as AppNavigationUserMenuElement, defineCustomElement as defineAppNavigationUserMenu } from "@telekom/scale-components/dist/components/app-navigation-user-menu.js";
-import { ScaleAccordion as ScaleAccordionElement, defineCustomElement as defineScaleAccordion } from "@telekom/scale-components/dist/components/scale-accordion.js";
-import { ScaleAlert as ScaleAlertElement, defineCustomElement as defineScaleAlert } from "@telekom/scale-components/dist/components/scale-alert.js";
-import { ScaleAppFooter as ScaleAppFooterElement, defineCustomElement as defineScaleAppFooter } from "@telekom/scale-components/dist/components/scale-app-footer.js";
-import { ScaleAppHeader as ScaleAppHeaderElement, defineCustomElement as defineScaleAppHeader } from "@telekom/scale-components/dist/components/scale-app-header.js";
-import { ScaleAppShell as ScaleAppShellElement, defineCustomElement as defineScaleAppShell } from "@telekom/scale-components/dist/components/scale-app-shell.js";
-import { ScaleBadge as ScaleBadgeElement, defineCustomElement as defineScaleBadge } from "@telekom/scale-components/dist/components/scale-badge.js";
-import { ScaleBreadcrumb as ScaleBreadcrumbElement, defineCustomElement as defineScaleBreadcrumb } from "@telekom/scale-components/dist/components/scale-breadcrumb.js";
-import { ScaleButton as ScaleButtonElement, defineCustomElement as defineScaleButton } from "@telekom/scale-components/dist/components/scale-button.js";
-import { ScaleCallout as ScaleCalloutElement, defineCustomElement as defineScaleCallout } from "@telekom/scale-components/dist/components/scale-callout.js";
-import { ScaleCard as ScaleCardElement, defineCustomElement as defineScaleCard } from "@telekom/scale-components/dist/components/scale-card.js";
-import { ScaleCarousel as ScaleCarouselElement, defineCustomElement as defineScaleCarousel } from "@telekom/scale-components/dist/components/scale-carousel.js";
-import { ScaleChartStackCard as ScaleChartStackCardElement, defineCustomElement as defineScaleChartStackCard } from "@telekom/scale-components/dist/components/scale-chart-stack-card.js";
-import { ScaleCheckboxGroup as ScaleCheckboxGroupElement, defineCustomElement as defineScaleCheckboxGroup } from "@telekom/scale-components/dist/components/scale-checkbox-group.js";
-import { ScaleCheckbox as ScaleCheckboxElement, defineCustomElement as defineScaleCheckbox } from "@telekom/scale-components/dist/components/scale-checkbox.js";
-import { ScaleChip as ScaleChipElement, defineCustomElement as defineScaleChip } from "@telekom/scale-components/dist/components/scale-chip.js";
-import { ScaleCollapsible as ScaleCollapsibleElement, defineCustomElement as defineScaleCollapsible } from "@telekom/scale-components/dist/components/scale-collapsible.js";
-import { ScaleCombobox as ScaleComboboxElement, defineCustomElement as defineScaleCombobox } from "@telekom/scale-components/dist/components/scale-combobox.js";
-import { ScaleDataGrid as ScaleDataGridElement, defineCustomElement as defineScaleDataGrid } from "@telekom/scale-components/dist/components/scale-data-grid.js";
-import { ScaleDatePicker as ScaleDatePickerElement, defineCustomElement as defineScaleDatePicker } from "@telekom/scale-components/dist/components/scale-date-picker.js";
-import { ScaleDivider as ScaleDividerElement, defineCustomElement as defineScaleDivider } from "@telekom/scale-components/dist/components/scale-divider.js";
-import { ScaleDropdownSelectItem as ScaleDropdownSelectItemElement, defineCustomElement as defineScaleDropdownSelectItem } from "@telekom/scale-components/dist/components/scale-dropdown-select-item.js";
-import { ScaleDropdownSelect as ScaleDropdownSelectElement, defineCustomElement as defineScaleDropdownSelect } from "@telekom/scale-components/dist/components/scale-dropdown-select.js";
-import { ScaleDropdown as ScaleDropdownElement, defineCustomElement as defineScaleDropdown } from "@telekom/scale-components/dist/components/scale-dropdown.js";
-import { ScaleGridItem as ScaleGridItemElement, defineCustomElement as defineScaleGridItem } from "@telekom/scale-components/dist/components/scale-grid-item.js";
-import { ScaleGrid as ScaleGridElement, defineCustomElement as defineScaleGrid } from "@telekom/scale-components/dist/components/scale-grid.js";
-import { ScaleHelperText as ScaleHelperTextElement, defineCustomElement as defineScaleHelperText } from "@telekom/scale-components/dist/components/scale-helper-text.js";
-import { ScaleIconActionAddCard as ScaleIconActionAddCardElement, defineCustomElement as defineScaleIconActionAddCard } from "@telekom/scale-components/dist/components/scale-icon-action-add-card.js";
-import { ScaleIconActionAdd as ScaleIconActionAddElement, defineCustomElement as defineScaleIconActionAdd } from "@telekom/scale-components/dist/components/scale-icon-action-add.js";
-import { ScaleIconActionArrange as ScaleIconActionArrangeElement, defineCustomElement as defineScaleIconActionArrange } from "@telekom/scale-components/dist/components/scale-icon-action-arrange.js";
-import { ScaleIconActionArrowDown as ScaleIconActionArrowDownElement, defineCustomElement as defineScaleIconActionArrowDown } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-down.js";
-import { ScaleIconActionArrowLeft as ScaleIconActionArrowLeftElement, defineCustomElement as defineScaleIconActionArrowLeft } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-left.js";
-import { ScaleIconActionArrowRight as ScaleIconActionArrowRightElement, defineCustomElement as defineScaleIconActionArrowRight } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-right.js";
-import { ScaleIconActionArrowUp as ScaleIconActionArrowUpElement, defineCustomElement as defineScaleIconActionArrowUp } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-up.js";
-import { ScaleIconActionAutoLogin as ScaleIconActionAutoLoginElement, defineCustomElement as defineScaleIconActionAutoLogin } from "@telekom/scale-components/dist/components/scale-icon-action-auto-login.js";
-import { ScaleIconActionBackspace as ScaleIconActionBackspaceElement, defineCustomElement as defineScaleIconActionBackspace } from "@telekom/scale-components/dist/components/scale-icon-action-backspace.js";
-import { ScaleIconActionBackward as ScaleIconActionBackwardElement, defineCustomElement as defineScaleIconActionBackward } from "@telekom/scale-components/dist/components/scale-icon-action-backward.js";
-import { ScaleIconActionChangelog as ScaleIconActionChangelogElement, defineCustomElement as defineScaleIconActionChangelog } from "@telekom/scale-components/dist/components/scale-icon-action-changelog.js";
-import { ScaleIconActionCheckmark as ScaleIconActionCheckmarkElement, defineCustomElement as defineScaleIconActionCheckmark } from "@telekom/scale-components/dist/components/scale-icon-action-checkmark.js";
-import { ScaleIconActionCircleAdd as ScaleIconActionCircleAddElement, defineCustomElement as defineScaleIconActionCircleAdd } from "@telekom/scale-components/dist/components/scale-icon-action-circle-add.js";
-import { ScaleIconActionCircleClose as ScaleIconActionCircleCloseElement, defineCustomElement as defineScaleIconActionCircleClose } from "@telekom/scale-components/dist/components/scale-icon-action-circle-close.js";
-import { ScaleIconActionClose as ScaleIconActionCloseElement, defineCustomElement as defineScaleIconActionClose } from "@telekom/scale-components/dist/components/scale-icon-action-close.js";
-import { ScaleIconActionCompare as ScaleIconActionCompareElement, defineCustomElement as defineScaleIconActionCompare } from "@telekom/scale-components/dist/components/scale-icon-action-compare.js";
-import { ScaleIconActionCopyPaste as ScaleIconActionCopyPasteElement, defineCustomElement as defineScaleIconActionCopyPaste } from "@telekom/scale-components/dist/components/scale-icon-action-copy-paste.js";
-import { ScaleIconActionCutPaste as ScaleIconActionCutPasteElement, defineCustomElement as defineScaleIconActionCutPaste } from "@telekom/scale-components/dist/components/scale-icon-action-cut-paste.js";
-import { ScaleIconActionDisabledMicrophone as ScaleIconActionDisabledMicrophoneElement, defineCustomElement as defineScaleIconActionDisabledMicrophone } from "@telekom/scale-components/dist/components/scale-icon-action-disabled-microphone.js";
-import { ScaleIconActionDownloadFromCloud as ScaleIconActionDownloadFromCloudElement, defineCustomElement as defineScaleIconActionDownloadFromCloud } from "@telekom/scale-components/dist/components/scale-icon-action-download-from-cloud.js";
-import { ScaleIconActionDownload as ScaleIconActionDownloadElement, defineCustomElement as defineScaleIconActionDownload } from "@telekom/scale-components/dist/components/scale-icon-action-download.js";
-import { ScaleIconActionDragAndDrop as ScaleIconActionDragAndDropElement, defineCustomElement as defineScaleIconActionDragAndDrop } from "@telekom/scale-components/dist/components/scale-icon-action-drag-and-drop.js";
-import { ScaleIconActionEdit as ScaleIconActionEditElement, defineCustomElement as defineScaleIconActionEdit } from "@telekom/scale-components/dist/components/scale-icon-action-edit.js";
-import { ScaleIconActionExport as ScaleIconActionExportElement, defineCustomElement as defineScaleIconActionExport } from "@telekom/scale-components/dist/components/scale-icon-action-export.js";
-import { ScaleIconActionFastForwardNb as ScaleIconActionFastForwardNbElement, defineCustomElement as defineScaleIconActionFastForwardNb } from "@telekom/scale-components/dist/components/scale-icon-action-fast-forward-nb.js";
-import { ScaleIconActionFastForward as ScaleIconActionFastForwardElement, defineCustomElement as defineScaleIconActionFastForward } from "@telekom/scale-components/dist/components/scale-icon-action-fast-forward.js";
-import { ScaleIconActionFavorite as ScaleIconActionFavoriteElement, defineCustomElement as defineScaleIconActionFavorite } from "@telekom/scale-components/dist/components/scale-icon-action-favorite.js";
-import { ScaleIconActionFilter2 as ScaleIconActionFilter2Element, defineCustomElement as defineScaleIconActionFilter2 } from "@telekom/scale-components/dist/components/scale-icon-action-filter-2.js";
-import { ScaleIconActionFilter as ScaleIconActionFilterElement, defineCustomElement as defineScaleIconActionFilter } from "@telekom/scale-components/dist/components/scale-icon-action-filter.js";
-import { ScaleIconActionForward as ScaleIconActionForwardElement, defineCustomElement as defineScaleIconActionForward } from "@telekom/scale-components/dist/components/scale-icon-action-forward.js";
-import { ScaleIconActionFullScreen as ScaleIconActionFullScreenElement, defineCustomElement as defineScaleIconActionFullScreen } from "@telekom/scale-components/dist/components/scale-icon-action-full-screen.js";
-import { ScaleIconActionHidePassword as ScaleIconActionHidePasswordElement, defineCustomElement as defineScaleIconActionHidePassword } from "@telekom/scale-components/dist/components/scale-icon-action-hide-password.js";
-import { ScaleIconActionImport as ScaleIconActionImportElement, defineCustomElement as defineScaleIconActionImport } from "@telekom/scale-components/dist/components/scale-icon-action-import.js";
-import { ScaleIconActionInstall as ScaleIconActionInstallElement, defineCustomElement as defineScaleIconActionInstall } from "@telekom/scale-components/dist/components/scale-icon-action-install.js";
-import { ScaleIconActionLaunch as ScaleIconActionLaunchElement, defineCustomElement as defineScaleIconActionLaunch } from "@telekom/scale-components/dist/components/scale-icon-action-launch.js";
-import { ScaleIconActionLightDarkMode as ScaleIconActionLightDarkModeElement, defineCustomElement as defineScaleIconActionLightDarkMode } from "@telekom/scale-components/dist/components/scale-icon-action-light-dark-mode.js";
-import { ScaleIconActionLink as ScaleIconActionLinkElement, defineCustomElement as defineScaleIconActionLink } from "@telekom/scale-components/dist/components/scale-icon-action-link.js";
-import { ScaleIconActionLogout as ScaleIconActionLogoutElement, defineCustomElement as defineScaleIconActionLogout } from "@telekom/scale-components/dist/components/scale-icon-action-logout.js";
-import { ScaleIconActionLoop as ScaleIconActionLoopElement, defineCustomElement as defineScaleIconActionLoop } from "@telekom/scale-components/dist/components/scale-icon-action-loop.js";
-import { ScaleIconActionMenu as ScaleIconActionMenuElement, defineCustomElement as defineScaleIconActionMenu } from "@telekom/scale-components/dist/components/scale-icon-action-menu.js";
-import { ScaleIconActionMicrophone as ScaleIconActionMicrophoneElement, defineCustomElement as defineScaleIconActionMicrophone } from "@telekom/scale-components/dist/components/scale-icon-action-microphone.js";
-import { ScaleIconActionMinimizeScreen as ScaleIconActionMinimizeScreenElement, defineCustomElement as defineScaleIconActionMinimizeScreen } from "@telekom/scale-components/dist/components/scale-icon-action-minimize-screen.js";
-import { ScaleIconActionMinusCircle as ScaleIconActionMinusCircleElement, defineCustomElement as defineScaleIconActionMinusCircle } from "@telekom/scale-components/dist/components/scale-icon-action-minus-circle.js";
-import { ScaleIconActionMinus as ScaleIconActionMinusElement, defineCustomElement as defineScaleIconActionMinus } from "@telekom/scale-components/dist/components/scale-icon-action-minus.js";
-import { ScaleIconActionMore as ScaleIconActionMoreElement, defineCustomElement as defineScaleIconActionMore } from "@telekom/scale-components/dist/components/scale-icon-action-more.js";
-import { ScaleIconActionMove as ScaleIconActionMoveElement, defineCustomElement as defineScaleIconActionMove } from "@telekom/scale-components/dist/components/scale-icon-action-move.js";
-import { ScaleIconActionMute as ScaleIconActionMuteElement, defineCustomElement as defineScaleIconActionMute } from "@telekom/scale-components/dist/components/scale-icon-action-mute.js";
-import { ScaleIconActionNotification as ScaleIconActionNotificationElement, defineCustomElement as defineScaleIconActionNotification } from "@telekom/scale-components/dist/components/scale-icon-action-notification.js";
-import { ScaleIconActionPauseNb as ScaleIconActionPauseNbElement, defineCustomElement as defineScaleIconActionPauseNb } from "@telekom/scale-components/dist/components/scale-icon-action-pause-nb.js";
-import { ScaleIconActionPause as ScaleIconActionPauseElement, defineCustomElement as defineScaleIconActionPause } from "@telekom/scale-components/dist/components/scale-icon-action-pause.js";
-import { ScaleIconActionPin as ScaleIconActionPinElement, defineCustomElement as defineScaleIconActionPin } from "@telekom/scale-components/dist/components/scale-icon-action-pin.js";
-import { ScaleIconActionPlayNb as ScaleIconActionPlayNbElement, defineCustomElement as defineScaleIconActionPlayNb } from "@telekom/scale-components/dist/components/scale-icon-action-play-nb.js";
-import { ScaleIconActionPlay as ScaleIconActionPlayElement, defineCustomElement as defineScaleIconActionPlay } from "@telekom/scale-components/dist/components/scale-icon-action-play.js";
-import { ScaleIconActionPopUpWindow as ScaleIconActionPopUpWindowElement, defineCustomElement as defineScaleIconActionPopUpWindow } from "@telekom/scale-components/dist/components/scale-icon-action-pop-up-window.js";
-import { ScaleIconActionPower as ScaleIconActionPowerElement, defineCustomElement as defineScaleIconActionPower } from "@telekom/scale-components/dist/components/scale-icon-action-power.js";
-import { ScaleIconActionPreviousNb as ScaleIconActionPreviousNbElement, defineCustomElement as defineScaleIconActionPreviousNb } from "@telekom/scale-components/dist/components/scale-icon-action-previous-nb.js";
-import { ScaleIconActionPrint as ScaleIconActionPrintElement, defineCustomElement as defineScaleIconActionPrint } from "@telekom/scale-components/dist/components/scale-icon-action-print.js";
-import { ScaleIconActionPublish as ScaleIconActionPublishElement, defineCustomElement as defineScaleIconActionPublish } from "@telekom/scale-components/dist/components/scale-icon-action-publish.js";
-import { ScaleIconActionRandom as ScaleIconActionRandomElement, defineCustomElement as defineScaleIconActionRandom } from "@telekom/scale-components/dist/components/scale-icon-action-random.js";
-import { ScaleIconActionRecordNb as ScaleIconActionRecordNbElement, defineCustomElement as defineScaleIconActionRecordNb } from "@telekom/scale-components/dist/components/scale-icon-action-record-nb.js";
-import { ScaleIconActionRefresh as ScaleIconActionRefreshElement, defineCustomElement as defineScaleIconActionRefresh } from "@telekom/scale-components/dist/components/scale-icon-action-refresh.js";
-import { ScaleIconActionRemove as ScaleIconActionRemoveElement, defineCustomElement as defineScaleIconActionRemove } from "@telekom/scale-components/dist/components/scale-icon-action-remove.js";
-import { ScaleIconActionReplyAll as ScaleIconActionReplyAllElement, defineCustomElement as defineScaleIconActionReplyAll } from "@telekom/scale-components/dist/components/scale-icon-action-reply-all.js";
-import { ScaleIconActionReplyForward as ScaleIconActionReplyForwardElement, defineCustomElement as defineScaleIconActionReplyForward } from "@telekom/scale-components/dist/components/scale-icon-action-reply-forward.js";
-import { ScaleIconActionReply as ScaleIconActionReplyElement, defineCustomElement as defineScaleIconActionReply } from "@telekom/scale-components/dist/components/scale-icon-action-reply.js";
-import { ScaleIconActionRestart as ScaleIconActionRestartElement, defineCustomElement as defineScaleIconActionRestart } from "@telekom/scale-components/dist/components/scale-icon-action-restart.js";
-import { ScaleIconActionSearch as ScaleIconActionSearchElement, defineCustomElement as defineScaleIconActionSearch } from "@telekom/scale-components/dist/components/scale-icon-action-search.js";
-import { ScaleIconActionSend as ScaleIconActionSendElement, defineCustomElement as defineScaleIconActionSend } from "@telekom/scale-components/dist/components/scale-icon-action-send.js";
-import { ScaleIconActionShare as ScaleIconActionShareElement, defineCustomElement as defineScaleIconActionShare } from "@telekom/scale-components/dist/components/scale-icon-action-share.js";
-import { ScaleIconActionShoppingCart as ScaleIconActionShoppingCartElement, defineCustomElement as defineScaleIconActionShoppingCart } from "@telekom/scale-components/dist/components/scale-icon-action-shopping-cart.js";
-import { ScaleIconActionShowPassword as ScaleIconActionShowPasswordElement, defineCustomElement as defineScaleIconActionShowPassword } from "@telekom/scale-components/dist/components/scale-icon-action-show-password.js";
-import { ScaleIconActionSort as ScaleIconActionSortElement, defineCustomElement as defineScaleIconActionSort } from "@telekom/scale-components/dist/components/scale-icon-action-sort.js";
-import { ScaleIconActionSoundOn as ScaleIconActionSoundOnElement, defineCustomElement as defineScaleIconActionSoundOn } from "@telekom/scale-components/dist/components/scale-icon-action-sound-on.js";
-import { ScaleIconActionStar as ScaleIconActionStarElement, defineCustomElement as defineScaleIconActionStar } from "@telekom/scale-components/dist/components/scale-icon-action-star.js";
-import { ScaleIconActionStreamOn as ScaleIconActionStreamOnElement, defineCustomElement as defineScaleIconActionStreamOn } from "@telekom/scale-components/dist/components/scale-icon-action-stream-on.js";
-import { ScaleIconActionSuccess as ScaleIconActionSuccessElement, defineCustomElement as defineScaleIconActionSuccess } from "@telekom/scale-components/dist/components/scale-icon-action-success.js";
-import { ScaleIconActionThumbsDown as ScaleIconActionThumbsDownElement, defineCustomElement as defineScaleIconActionThumbsDown } from "@telekom/scale-components/dist/components/scale-icon-action-thumbs-down.js";
-import { ScaleIconActionThumbsUp as ScaleIconActionThumbsUpElement, defineCustomElement as defineScaleIconActionThumbsUp } from "@telekom/scale-components/dist/components/scale-icon-action-thumbs-up.js";
-import { ScaleIconActionTilesAdd as ScaleIconActionTilesAddElement, defineCustomElement as defineScaleIconActionTilesAdd } from "@telekom/scale-components/dist/components/scale-icon-action-tiles-add.js";
-import { ScaleIconActionUploadToCloud as ScaleIconActionUploadToCloudElement, defineCustomElement as defineScaleIconActionUploadToCloud } from "@telekom/scale-components/dist/components/scale-icon-action-upload-to-cloud.js";
-import { ScaleIconActionUpload as ScaleIconActionUploadElement, defineCustomElement as defineScaleIconActionUpload } from "@telekom/scale-components/dist/components/scale-icon-action-upload.js";
-import { ScaleIconActionVolumeDown as ScaleIconActionVolumeDownElement, defineCustomElement as defineScaleIconActionVolumeDown } from "@telekom/scale-components/dist/components/scale-icon-action-volume-down.js";
-import { ScaleIconActionVolumeUp as ScaleIconActionVolumeUpElement, defineCustomElement as defineScaleIconActionVolumeUp } from "@telekom/scale-components/dist/components/scale-icon-action-volume-up.js";
-import { ScaleIconActionZoomIn as ScaleIconActionZoomInElement, defineCustomElement as defineScaleIconActionZoomIn } from "@telekom/scale-components/dist/components/scale-icon-action-zoom-in.js";
-import { ScaleIconActionZoomOut as ScaleIconActionZoomOutElement, defineCustomElement as defineScaleIconActionZoomOut } from "@telekom/scale-components/dist/components/scale-icon-action-zoom-out.js";
-import { ScaleIconAlertAntivirusProtection as ScaleIconAlertAntivirusProtectionElement, defineCustomElement as defineScaleIconAlertAntivirusProtection } from "@telekom/scale-components/dist/components/scale-icon-alert-antivirus-protection.js";
-import { ScaleIconAlertCompliance as ScaleIconAlertComplianceElement, defineCustomElement as defineScaleIconAlertCompliance } from "@telekom/scale-components/dist/components/scale-icon-alert-compliance.js";
-import { ScaleIconAlertCyberSecurity as ScaleIconAlertCyberSecurityElement, defineCustomElement as defineScaleIconAlertCyberSecurity } from "@telekom/scale-components/dist/components/scale-icon-alert-cyber-security.js";
-import { ScaleIconAlertError as ScaleIconAlertErrorElement, defineCustomElement as defineScaleIconAlertError } from "@telekom/scale-components/dist/components/scale-icon-alert-error.js";
-import { ScaleIconAlertHelp as ScaleIconAlertHelpElement, defineCustomElement as defineScaleIconAlertHelp } from "@telekom/scale-components/dist/components/scale-icon-alert-help.js";
-import { ScaleIconAlertHighPriorityEmail as ScaleIconAlertHighPriorityEmailElement, defineCustomElement as defineScaleIconAlertHighPriorityEmail } from "@telekom/scale-components/dist/components/scale-icon-alert-high-priority-email.js";
-import { ScaleIconAlertImprintDataprivacy as ScaleIconAlertImprintDataprivacyElement, defineCustomElement as defineScaleIconAlertImprintDataprivacy } from "@telekom/scale-components/dist/components/scale-icon-alert-imprint-dataprivacy.js";
-import { ScaleIconAlertInformation as ScaleIconAlertInformationElement, defineCustomElement as defineScaleIconAlertInformation } from "@telekom/scale-components/dist/components/scale-icon-alert-information.js";
-import { ScaleIconAlertLegal as ScaleIconAlertLegalElement, defineCustomElement as defineScaleIconAlertLegal } from "@telekom/scale-components/dist/components/scale-icon-alert-legal.js";
-import { ScaleIconAlertNetworkDisrupted as ScaleIconAlertNetworkDisruptedElement, defineCustomElement as defineScaleIconAlertNetworkDisrupted } from "@telekom/scale-components/dist/components/scale-icon-alert-network-disrupted.js";
-import { ScaleIconAlertPasswordBreaking as ScaleIconAlertPasswordBreakingElement, defineCustomElement as defineScaleIconAlertPasswordBreaking } from "@telekom/scale-components/dist/components/scale-icon-alert-password-breaking.js";
-import { ScaleIconAlertSecurity as ScaleIconAlertSecurityElement, defineCustomElement as defineScaleIconAlertSecurity } from "@telekom/scale-components/dist/components/scale-icon-alert-security.js";
-import { ScaleIconAlertTrafficDisruption as ScaleIconAlertTrafficDisruptionElement, defineCustomElement as defineScaleIconAlertTrafficDisruption } from "@telekom/scale-components/dist/components/scale-icon-alert-traffic-disruption.js";
-import { ScaleIconAlertUnknown as ScaleIconAlertUnknownElement, defineCustomElement as defineScaleIconAlertUnknown } from "@telekom/scale-components/dist/components/scale-icon-alert-unknown.js";
-import { ScaleIconAlertWarning as ScaleIconAlertWarningElement, defineCustomElement as defineScaleIconAlertWarning } from "@telekom/scale-components/dist/components/scale-icon-alert-warning.js";
-import { ScaleIconCommunicationAvailable as ScaleIconCommunicationAvailableElement, defineCustomElement as defineScaleIconCommunicationAvailable } from "@telekom/scale-components/dist/components/scale-icon-communication-available.js";
-import { ScaleIconCommunicationBlog as ScaleIconCommunicationBlogElement, defineCustomElement as defineScaleIconCommunicationBlog } from "@telekom/scale-components/dist/components/scale-icon-communication-blog.js";
-import { ScaleIconCommunicationCallIncoming as ScaleIconCommunicationCallIncomingElement, defineCustomElement as defineScaleIconCommunicationCallIncoming } from "@telekom/scale-components/dist/components/scale-icon-communication-call-incoming.js";
-import { ScaleIconCommunicationCallOutgoing as ScaleIconCommunicationCallOutgoingElement, defineCustomElement as defineScaleIconCommunicationCallOutgoing } from "@telekom/scale-components/dist/components/scale-icon-communication-call-outgoing.js";
-import { ScaleIconCommunicationChatBadge as ScaleIconCommunicationChatBadgeElement, defineCustomElement as defineScaleIconCommunicationChatBadge } from "@telekom/scale-components/dist/components/scale-icon-communication-chat-badge.js";
-import { ScaleIconCommunicationChat as ScaleIconCommunicationChatElement, defineCustomElement as defineScaleIconCommunicationChat } from "@telekom/scale-components/dist/components/scale-icon-communication-chat.js";
-import { ScaleIconCommunicationEmail as ScaleIconCommunicationEmailElement, defineCustomElement as defineScaleIconCommunicationEmail } from "@telekom/scale-components/dist/components/scale-icon-communication-email.js";
-import { ScaleIconCommunicationEndCall as ScaleIconCommunicationEndCallElement, defineCustomElement as defineScaleIconCommunicationEndCall } from "@telekom/scale-components/dist/components/scale-icon-communication-end-call.js";
-import { ScaleIconCommunicationFeedback as ScaleIconCommunicationFeedbackElement, defineCustomElement as defineScaleIconCommunicationFeedback } from "@telekom/scale-components/dist/components/scale-icon-communication-feedback.js";
-import { ScaleIconCommunicationFlightMode as ScaleIconCommunicationFlightModeElement, defineCustomElement as defineScaleIconCommunicationFlightMode } from "@telekom/scale-components/dist/components/scale-icon-communication-flight-mode.js";
-import { ScaleIconCommunicationHappyPerson as ScaleIconCommunicationHappyPersonElement, defineCustomElement as defineScaleIconCommunicationHappyPerson } from "@telekom/scale-components/dist/components/scale-icon-communication-happy-person.js";
-import { ScaleIconCommunicationInbox as ScaleIconCommunicationInboxElement, defineCustomElement as defineScaleIconCommunicationInbox } from "@telekom/scale-components/dist/components/scale-icon-communication-inbox.js";
-import { ScaleIconCommunicationLandingMobileContactClient as ScaleIconCommunicationLandingMobileContactClientElement, defineCustomElement as defineScaleIconCommunicationLandingMobileContactClient } from "@telekom/scale-components/dist/components/scale-icon-communication-landing-mobile-contact-client.js";
-import { ScaleIconCommunicationLoyaltyEarned as ScaleIconCommunicationLoyaltyEarnedElement, defineCustomElement as defineScaleIconCommunicationLoyaltyEarned } from "@telekom/scale-components/dist/components/scale-icon-communication-loyalty-earned.js";
-import { ScaleIconCommunicationLoyaltyLost as ScaleIconCommunicationLoyaltyLostElement, defineCustomElement as defineScaleIconCommunicationLoyaltyLost } from "@telekom/scale-components/dist/components/scale-icon-communication-loyalty-lost.js";
-import { ScaleIconCommunicationMailOpened as ScaleIconCommunicationMailOpenedElement, defineCustomElement as defineScaleIconCommunicationMailOpened } from "@telekom/scale-components/dist/components/scale-icon-communication-mail-opened.js";
-import { ScaleIconCommunicationMessageIncoming as ScaleIconCommunicationMessageIncomingElement, defineCustomElement as defineScaleIconCommunicationMessageIncoming } from "@telekom/scale-components/dist/components/scale-icon-communication-message-incoming.js";
-import { ScaleIconCommunicationMessageOutgoing as ScaleIconCommunicationMessageOutgoingElement, defineCustomElement as defineScaleIconCommunicationMessageOutgoing } from "@telekom/scale-components/dist/components/scale-icon-communication-message-outgoing.js";
-import { ScaleIconCommunicationMessage as ScaleIconCommunicationMessageElement, defineCustomElement as defineScaleIconCommunicationMessage } from "@telekom/scale-components/dist/components/scale-icon-communication-message.js";
-import { ScaleIconCommunicationMmsIncoming as ScaleIconCommunicationMmsIncomingElement, defineCustomElement as defineScaleIconCommunicationMmsIncoming } from "@telekom/scale-components/dist/components/scale-icon-communication-mms-incoming.js";
-import { ScaleIconCommunicationMmsOutgoing as ScaleIconCommunicationMmsOutgoingElement, defineCustomElement as defineScaleIconCommunicationMmsOutgoing } from "@telekom/scale-components/dist/components/scale-icon-communication-mms-outgoing.js";
-import { ScaleIconCommunicationMobilePhoneNumber as ScaleIconCommunicationMobilePhoneNumberElement, defineCustomElement as defineScaleIconCommunicationMobilePhoneNumber } from "@telekom/scale-components/dist/components/scale-icon-communication-mobile-phone-number.js";
-import { ScaleIconCommunicationNetworkSignal as ScaleIconCommunicationNetworkSignalElement, defineCustomElement as defineScaleIconCommunicationNetworkSignal } from "@telekom/scale-components/dist/components/scale-icon-communication-network-signal.js";
-import { ScaleIconCommunicationNewEmail as ScaleIconCommunicationNewEmailElement, defineCustomElement as defineScaleIconCommunicationNewEmail } from "@telekom/scale-components/dist/components/scale-icon-communication-new-email.js";
-import { ScaleIconCommunicationOutbox as ScaleIconCommunicationOutboxElement, defineCustomElement as defineScaleIconCommunicationOutbox } from "@telekom/scale-components/dist/components/scale-icon-communication-outbox.js";
-import { ScaleIconCommunicationPhoneNumber as ScaleIconCommunicationPhoneNumberElement, defineCustomElement as defineScaleIconCommunicationPhoneNumber } from "@telekom/scale-components/dist/components/scale-icon-communication-phone-number.js";
-import { ScaleIconCommunicationRecipient as ScaleIconCommunicationRecipientElement, defineCustomElement as defineScaleIconCommunicationRecipient } from "@telekom/scale-components/dist/components/scale-icon-communication-recipient.js";
-import { ScaleIconCommunicationSaveEmailsToDrafts as ScaleIconCommunicationSaveEmailsToDraftsElement, defineCustomElement as defineScaleIconCommunicationSaveEmailsToDrafts } from "@telekom/scale-components/dist/components/scale-icon-communication-save-emails-to-drafts.js";
-import { ScaleIconCommunicationSms as ScaleIconCommunicationSmsElement, defineCustomElement as defineScaleIconCommunicationSms } from "@telekom/scale-components/dist/components/scale-icon-communication-sms.js";
-import { ScaleIconCommunicationSpam as ScaleIconCommunicationSpamElement, defineCustomElement as defineScaleIconCommunicationSpam } from "@telekom/scale-components/dist/components/scale-icon-communication-spam.js";
-import { ScaleIconCommunicationVoiceMessage as ScaleIconCommunicationVoiceMessageElement, defineCustomElement as defineScaleIconCommunicationVoiceMessage } from "@telekom/scale-components/dist/components/scale-icon-communication-voice-message.js";
-import { ScaleIconContent2faGoogleAuth as ScaleIconContent2faGoogleAuthElement, defineCustomElement as defineScaleIconContent2faGoogleAuth } from "@telekom/scale-components/dist/components/scale-icon-content-2fa-google-auth.js";
-import { ScaleIconContentAchievement as ScaleIconContentAchievementElement, defineCustomElement as defineScaleIconContentAchievement } from "@telekom/scale-components/dist/components/scale-icon-content-achievement.js";
-import { ScaleIconContentAndroid as ScaleIconContentAndroidElement, defineCustomElement as defineScaleIconContentAndroid } from "@telekom/scale-components/dist/components/scale-icon-content-android.js";
-import { ScaleIconContentApple as ScaleIconContentAppleElement, defineCustomElement as defineScaleIconContentApple } from "@telekom/scale-components/dist/components/scale-icon-content-apple.js";
-import { ScaleIconContentApplications as ScaleIconContentApplicationsElement, defineCustomElement as defineScaleIconContentApplications } from "@telekom/scale-components/dist/components/scale-icon-content-applications.js";
-import { ScaleIconContentAvailableKeychain as ScaleIconContentAvailableKeychainElement, defineCustomElement as defineScaleIconContentAvailableKeychain } from "@telekom/scale-components/dist/components/scale-icon-content-available-keychain.js";
-import { ScaleIconContentBank as ScaleIconContentBankElement, defineCustomElement as defineScaleIconContentBank } from "@telekom/scale-components/dist/components/scale-icon-content-bank.js";
-import { ScaleIconContentBiometric as ScaleIconContentBiometricElement, defineCustomElement as defineScaleIconContentBiometric } from "@telekom/scale-components/dist/components/scale-icon-content-biometric.js";
-import { ScaleIconContentBirthday as ScaleIconContentBirthdayElement, defineCustomElement as defineScaleIconContentBirthday } from "@telekom/scale-components/dist/components/scale-icon-content-birthday.js";
-import { ScaleIconContentBookmark as ScaleIconContentBookmarkElement, defineCustomElement as defineScaleIconContentBookmark } from "@telekom/scale-components/dist/components/scale-icon-content-bookmark.js";
-import { ScaleIconContentCalendar as ScaleIconContentCalendarElement, defineCustomElement as defineScaleIconContentCalendar } from "@telekom/scale-components/dist/components/scale-icon-content-calendar.js";
-import { ScaleIconContentClipboard as ScaleIconContentClipboardElement, defineCustomElement as defineScaleIconContentClipboard } from "@telekom/scale-components/dist/components/scale-icon-content-clipboard.js";
-import { ScaleIconContentClock as ScaleIconContentClockElement, defineCustomElement as defineScaleIconContentClock } from "@telekom/scale-components/dist/components/scale-icon-content-clock.js";
-import { ScaleIconContentCloudSecurity as ScaleIconContentCloudSecurityElement, defineCustomElement as defineScaleIconContentCloudSecurity } from "@telekom/scale-components/dist/components/scale-icon-content-cloud-security.js";
-import { ScaleIconContentCodeScanner as ScaleIconContentCodeScannerElement, defineCustomElement as defineScaleIconContentCodeScanner } from "@telekom/scale-components/dist/components/scale-icon-content-code-scanner.js";
-import { ScaleIconContentColorSelection as ScaleIconContentColorSelectionElement, defineCustomElement as defineScaleIconContentColorSelection } from "@telekom/scale-components/dist/components/scale-icon-content-color-selection.js";
-import { ScaleIconContentCountry as ScaleIconContentCountryElement, defineCustomElement as defineScaleIconContentCountry } from "@telekom/scale-components/dist/components/scale-icon-content-country.js";
-import { ScaleIconContentCreditCard as ScaleIconContentCreditCardElement, defineCustomElement as defineScaleIconContentCreditCard } from "@telekom/scale-components/dist/components/scale-icon-content-credit-card.js";
-import { ScaleIconContentDataVisualisation as ScaleIconContentDataVisualisationElement, defineCustomElement as defineScaleIconContentDataVisualisation } from "@telekom/scale-components/dist/components/scale-icon-content-data-visualisation.js";
-import { ScaleIconContentDelivery as ScaleIconContentDeliveryElement, defineCustomElement as defineScaleIconContentDelivery } from "@telekom/scale-components/dist/components/scale-icon-content-delivery.js";
-import { ScaleIconContentDigitalBanking as ScaleIconContentDigitalBankingElement, defineCustomElement as defineScaleIconContentDigitalBanking } from "@telekom/scale-components/dist/components/scale-icon-content-digital-banking.js";
-import { ScaleIconContentDigitalMedia as ScaleIconContentDigitalMediaElement, defineCustomElement as defineScaleIconContentDigitalMedia } from "@telekom/scale-components/dist/components/scale-icon-content-digital-media.js";
-import { ScaleIconContentDiscount as ScaleIconContentDiscountElement, defineCustomElement as defineScaleIconContentDiscount } from "@telekom/scale-components/dist/components/scale-icon-content-discount.js";
-import { ScaleIconContentESim as ScaleIconContentESimElement, defineCustomElement as defineScaleIconContentESim } from "@telekom/scale-components/dist/components/scale-icon-content-e-sim.js";
-import { ScaleIconContentEu as ScaleIconContentEuElement, defineCustomElement as defineScaleIconContentEu } from "@telekom/scale-components/dist/components/scale-icon-content-eu.js";
-import { ScaleIconContentFaceMask as ScaleIconContentFaceMaskElement, defineCustomElement as defineScaleIconContentFaceMask } from "@telekom/scale-components/dist/components/scale-icon-content-face-mask.js";
-import { ScaleIconContentFeatures as ScaleIconContentFeaturesElement, defineCustomElement as defineScaleIconContentFeatures } from "@telekom/scale-components/dist/components/scale-icon-content-features.js";
-import { ScaleIconContentFlexibleTariffs as ScaleIconContentFlexibleTariffsElement, defineCustomElement as defineScaleIconContentFlexibleTariffs } from "@telekom/scale-components/dist/components/scale-icon-content-flexible-tariffs.js";
-import { ScaleIconContentFolder as ScaleIconContentFolderElement, defineCustomElement as defineScaleIconContentFolder } from "@telekom/scale-components/dist/components/scale-icon-content-folder.js";
-import { ScaleIconContentFood as ScaleIconContentFoodElement, defineCustomElement as defineScaleIconContentFood } from "@telekom/scale-components/dist/components/scale-icon-content-food.js";
-import { ScaleIconContentGenderDiverse as ScaleIconContentGenderDiverseElement, defineCustomElement as defineScaleIconContentGenderDiverse } from "@telekom/scale-components/dist/components/scale-icon-content-gender-diverse.js";
-import { ScaleIconContentGenderFemale as ScaleIconContentGenderFemaleElement, defineCustomElement as defineScaleIconContentGenderFemale } from "@telekom/scale-components/dist/components/scale-icon-content-gender-female.js";
-import { ScaleIconContentGenderMale as ScaleIconContentGenderMaleElement, defineCustomElement as defineScaleIconContentGenderMale } from "@telekom/scale-components/dist/components/scale-icon-content-gender-male.js";
-import { ScaleIconContentHalfRating as ScaleIconContentHalfRatingElement, defineCustomElement as defineScaleIconContentHalfRating } from "@telekom/scale-components/dist/components/scale-icon-content-half-rating.js";
-import { ScaleIconContentHeart as ScaleIconContentHeartElement, defineCustomElement as defineScaleIconContentHeart } from "@telekom/scale-components/dist/components/scale-icon-content-heart.js";
-import { ScaleIconContentHeight as ScaleIconContentHeightElement, defineCustomElement as defineScaleIconContentHeight } from "@telekom/scale-components/dist/components/scale-icon-content-height.js";
-import { ScaleIconContentHistory as ScaleIconContentHistoryElement, defineCustomElement as defineScaleIconContentHistory } from "@telekom/scale-components/dist/components/scale-icon-content-history.js";
-import { ScaleIconContentHourGlass as ScaleIconContentHourGlassElement, defineCustomElement as defineScaleIconContentHourGlass } from "@telekom/scale-components/dist/components/scale-icon-content-hour-glass.js";
-import { ScaleIconContentIban as ScaleIconContentIbanElement, defineCustomElement as defineScaleIconContentIban } from "@telekom/scale-components/dist/components/scale-icon-content-iban.js";
-import { ScaleIconContentId as ScaleIconContentIdElement, defineCustomElement as defineScaleIconContentId } from "@telekom/scale-components/dist/components/scale-icon-content-id.js";
-import { ScaleIconContentInStock as ScaleIconContentInStockElement, defineCustomElement as defineScaleIconContentInStock } from "@telekom/scale-components/dist/components/scale-icon-content-in-stock.js";
-import { ScaleIconContentInternationalSms as ScaleIconContentInternationalSmsElement, defineCustomElement as defineScaleIconContentInternationalSms } from "@telekom/scale-components/dist/components/scale-icon-content-international-sms.js";
-import { ScaleIconContentInternational as ScaleIconContentInternationalElement, defineCustomElement as defineScaleIconContentInternational } from "@telekom/scale-components/dist/components/scale-icon-content-international.js";
-import { ScaleIconContentInterview as ScaleIconContentInterviewElement, defineCustomElement as defineScaleIconContentInterview } from "@telekom/scale-components/dist/components/scale-icon-content-interview.js";
-import { ScaleIconContentKey as ScaleIconContentKeyElement, defineCustomElement as defineScaleIconContentKey } from "@telekom/scale-components/dist/components/scale-icon-content-key.js";
-import { ScaleIconContentLanguage as ScaleIconContentLanguageElement, defineCustomElement as defineScaleIconContentLanguage } from "@telekom/scale-components/dist/components/scale-icon-content-language.js";
-import { ScaleIconContentLock as ScaleIconContentLockElement, defineCustomElement as defineScaleIconContentLock } from "@telekom/scale-components/dist/components/scale-icon-content-lock.js";
-import { ScaleIconContentLoyalty as ScaleIconContentLoyaltyElement, defineCustomElement as defineScaleIconContentLoyalty } from "@telekom/scale-components/dist/components/scale-icon-content-loyalty.js";
-import { ScaleIconContentMediaFolder as ScaleIconContentMediaFolderElement, defineCustomElement as defineScaleIconContentMediaFolder } from "@telekom/scale-components/dist/components/scale-icon-content-media-folder.js";
-import { ScaleIconContentMoneyAt as ScaleIconContentMoneyAtElement, defineCustomElement as defineScaleIconContentMoneyAt } from "@telekom/scale-components/dist/components/scale-icon-content-money-at.js";
-import { ScaleIconContentMusic as ScaleIconContentMusicElement, defineCustomElement as defineScaleIconContentMusic } from "@telekom/scale-components/dist/components/scale-icon-content-music.js";
-import { ScaleIconContentNews as ScaleIconContentNewsElement, defineCustomElement as defineScaleIconContentNews } from "@telekom/scale-components/dist/components/scale-icon-content-news.js";
-import { ScaleIconContentOutOfStock as ScaleIconContentOutOfStockElement, defineCustomElement as defineScaleIconContentOutOfStock } from "@telekom/scale-components/dist/components/scale-icon-content-out-of-stock.js";
-import { ScaleIconContentPersonWalking as ScaleIconContentPersonWalkingElement, defineCustomElement as defineScaleIconContentPersonWalking } from "@telekom/scale-components/dist/components/scale-icon-content-person-walking.js";
-import { ScaleIconContentPrepaidActivate as ScaleIconContentPrepaidActivateElement, defineCustomElement as defineScaleIconContentPrepaidActivate } from "@telekom/scale-components/dist/components/scale-icon-content-prepaid-activate.js";
-import { ScaleIconContentPriceTag as ScaleIconContentPriceTagElement, defineCustomElement as defineScaleIconContentPriceTag } from "@telekom/scale-components/dist/components/scale-icon-content-price-tag.js";
-import { ScaleIconContentRatings as ScaleIconContentRatingsElement, defineCustomElement as defineScaleIconContentRatings } from "@telekom/scale-components/dist/components/scale-icon-content-ratings.js";
-import { ScaleIconContentRoute as ScaleIconContentRouteElement, defineCustomElement as defineScaleIconContentRoute } from "@telekom/scale-components/dist/components/scale-icon-content-route.js";
-import { ScaleIconContentRss as ScaleIconContentRssElement, defineCustomElement as defineScaleIconContentRss } from "@telekom/scale-components/dist/components/scale-icon-content-rss.js";
-import { ScaleIconContentShop as ScaleIconContentShopElement, defineCustomElement as defineScaleIconContentShop } from "@telekom/scale-components/dist/components/scale-icon-content-shop.js";
-import { ScaleIconContentSignal as ScaleIconContentSignalElement, defineCustomElement as defineScaleIconContentSignal } from "@telekom/scale-components/dist/components/scale-icon-content-signal.js";
-import { ScaleIconContentSimCard as ScaleIconContentSimCardElement, defineCustomElement as defineScaleIconContentSimCard } from "@telekom/scale-components/dist/components/scale-icon-content-sim-card.js";
-import { ScaleIconContentSmile as ScaleIconContentSmileElement, defineCustomElement as defineScaleIconContentSmile } from "@telekom/scale-components/dist/components/scale-icon-content-smile.js";
-import { ScaleIconContentSortIndicatorDown as ScaleIconContentSortIndicatorDownElement, defineCustomElement as defineScaleIconContentSortIndicatorDown } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-down.js";
-import { ScaleIconContentSortIndicatorMiniDown as ScaleIconContentSortIndicatorMiniDownElement, defineCustomElement as defineScaleIconContentSortIndicatorMiniDown } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-mini-down.js";
-import { ScaleIconContentSortIndicatorUpMini as ScaleIconContentSortIndicatorUpMiniElement, defineCustomElement as defineScaleIconContentSortIndicatorUpMini } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-up-mini.js";
-import { ScaleIconContentSortIndicatorUp as ScaleIconContentSortIndicatorUpElement, defineCustomElement as defineScaleIconContentSortIndicatorUp } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-up.js";
-import { ScaleIconContentStatusInactive as ScaleIconContentStatusInactiveElement, defineCustomElement as defineScaleIconContentStatusInactive } from "@telekom/scale-components/dist/components/scale-icon-content-status-inactive.js";
-import { ScaleIconContentStatusRecurring as ScaleIconContentStatusRecurringElement, defineCustomElement as defineScaleIconContentStatusRecurring } from "@telekom/scale-components/dist/components/scale-icon-content-status-recurring.js";
-import { ScaleIconContentStopwatch as ScaleIconContentStopwatchElement, defineCustomElement as defineScaleIconContentStopwatch } from "@telekom/scale-components/dist/components/scale-icon-content-stopwatch.js";
-import { ScaleIconContentSupportChat as ScaleIconContentSupportChatElement, defineCustomElement as defineScaleIconContentSupportChat } from "@telekom/scale-components/dist/components/scale-icon-content-support-chat.js";
-import { ScaleIconContentSustainable as ScaleIconContentSustainableElement, defineCustomElement as defineScaleIconContentSustainable } from "@telekom/scale-components/dist/components/scale-icon-content-sustainable.js";
-import { ScaleIconContentTariffs as ScaleIconContentTariffsElement, defineCustomElement as defineScaleIconContentTariffs } from "@telekom/scale-components/dist/components/scale-icon-content-tariffs.js";
-import { ScaleIconContentThreats as ScaleIconContentThreatsElement, defineCustomElement as defineScaleIconContentThreats } from "@telekom/scale-components/dist/components/scale-icon-content-threats.js";
-import { ScaleIconContentTodoList as ScaleIconContentTodoListElement, defineCustomElement as defineScaleIconContentTodoList } from "@telekom/scale-components/dist/components/scale-icon-content-todo-list.js";
-import { ScaleIconContentTransport as ScaleIconContentTransportElement, defineCustomElement as defineScaleIconContentTransport } from "@telekom/scale-components/dist/components/scale-icon-content-transport.js";
-import { ScaleIconContentUnlock as ScaleIconContentUnlockElement, defineCustomElement as defineScaleIconContentUnlock } from "@telekom/scale-components/dist/components/scale-icon-content-unlock.js";
-import { ScaleIconContentVoucher as ScaleIconContentVoucherElement, defineCustomElement as defineScaleIconContentVoucher } from "@telekom/scale-components/dist/components/scale-icon-content-voucher.js";
-import { ScaleIconContentWaiting as ScaleIconContentWaitingElement, defineCustomElement as defineScaleIconContentWaiting } from "@telekom/scale-components/dist/components/scale-icon-content-waiting.js";
-import { ScaleIconContentWallet as ScaleIconContentWalletElement, defineCustomElement as defineScaleIconContentWallet } from "@telekom/scale-components/dist/components/scale-icon-content-wallet.js";
-import { ScaleIconDeviceAddDevice as ScaleIconDeviceAddDeviceElement, defineCustomElement as defineScaleIconDeviceAddDevice } from "@telekom/scale-components/dist/components/scale-icon-device-add-device.js";
-import { ScaleIconDeviceCamera as ScaleIconDeviceCameraElement, defineCustomElement as defineScaleIconDeviceCamera } from "@telekom/scale-components/dist/components/scale-icon-device-camera.js";
-import { ScaleIconDeviceChangeCamera as ScaleIconDeviceChangeCameraElement, defineCustomElement as defineScaleIconDeviceChangeCamera } from "@telekom/scale-components/dist/components/scale-icon-device-change-camera.js";
-import { ScaleIconDeviceComputer as ScaleIconDeviceComputerElement, defineCustomElement as defineScaleIconDeviceComputer } from "@telekom/scale-components/dist/components/scale-icon-device-computer.js";
-import { ScaleIconDeviceDeviceController as ScaleIconDeviceDeviceControllerElement, defineCustomElement as defineScaleIconDeviceDeviceController } from "@telekom/scale-components/dist/components/scale-icon-device-device-controller.js";
-import { ScaleIconDeviceDeviceEthernet as ScaleIconDeviceDeviceEthernetElement, defineCustomElement as defineScaleIconDeviceDeviceEthernet } from "@telekom/scale-components/dist/components/scale-icon-device-device-ethernet.js";
-import { ScaleIconDeviceDeviceMesh as ScaleIconDeviceDeviceMeshElement, defineCustomElement as defineScaleIconDeviceDeviceMesh } from "@telekom/scale-components/dist/components/scale-icon-device-device-mesh.js";
-import { ScaleIconDeviceDevicePhone as ScaleIconDeviceDevicePhoneElement, defineCustomElement as defineScaleIconDeviceDevicePhone } from "@telekom/scale-components/dist/components/scale-icon-device-device-phone.js";
-import { ScaleIconDeviceDeviceRouter as ScaleIconDeviceDeviceRouterElement, defineCustomElement as defineScaleIconDeviceDeviceRouter } from "@telekom/scale-components/dist/components/scale-icon-device-device-router.js";
-import { ScaleIconDeviceDeviceTv as ScaleIconDeviceDeviceTvElement, defineCustomElement as defineScaleIconDeviceDeviceTv } from "@telekom/scale-components/dist/components/scale-icon-device-device-tv.js";
-import { ScaleIconDeviceDeviceWatch as ScaleIconDeviceDeviceWatchElement, defineCustomElement as defineScaleIconDeviceDeviceWatch } from "@telekom/scale-components/dist/components/scale-icon-device-device-watch.js";
-import { ScaleIconDeviceDongle as ScaleIconDeviceDongleElement, defineCustomElement as defineScaleIconDeviceDongle } from "@telekom/scale-components/dist/components/scale-icon-device-dongle.js";
-import { ScaleIconDeviceFax as ScaleIconDeviceFaxElement, defineCustomElement as defineScaleIconDeviceFax } from "@telekom/scale-components/dist/components/scale-icon-device-fax.js";
-import { ScaleIconDeviceFixedLineServices as ScaleIconDeviceFixedLineServicesElement, defineCustomElement as defineScaleIconDeviceFixedLineServices } from "@telekom/scale-components/dist/components/scale-icon-device-fixed-line-services.js";
-import { ScaleIconDeviceGameController as ScaleIconDeviceGameControllerElement, defineCustomElement as defineScaleIconDeviceGameController } from "@telekom/scale-components/dist/components/scale-icon-device-game-controller.js";
-import { ScaleIconDeviceMediaReceiver as ScaleIconDeviceMediaReceiverElement, defineCustomElement as defineScaleIconDeviceMediaReceiver } from "@telekom/scale-components/dist/components/scale-icon-device-media-receiver.js";
-import { ScaleIconDeviceMobileData as ScaleIconDeviceMobileDataElement, defineCustomElement as defineScaleIconDeviceMobileData } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-data.js";
-import { ScaleIconDeviceMobileDevicesCombination as ScaleIconDeviceMobileDevicesCombinationElement, defineCustomElement as defineScaleIconDeviceMobileDevicesCombination } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-devices-combination.js";
-import { ScaleIconDeviceMobileEquipment as ScaleIconDeviceMobileEquipmentElement, defineCustomElement as defineScaleIconDeviceMobileEquipment } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-equipment.js";
-import { ScaleIconDeviceMobilePhoneInsurance as ScaleIconDeviceMobilePhoneInsuranceElement, defineCustomElement as defineScaleIconDeviceMobilePhoneInsurance } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-phone-insurance.js";
-import { ScaleIconDeviceMobileServices as ScaleIconDeviceMobileServicesElement, defineCustomElement as defineScaleIconDeviceMobileServices } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-services.js";
-import { ScaleIconDeviceNoCamera as ScaleIconDeviceNoCameraElement, defineCustomElement as defineScaleIconDeviceNoCamera } from "@telekom/scale-components/dist/components/scale-icon-device-no-camera.js";
-import { ScaleIconDevicePhoneWithMobilePlan as ScaleIconDevicePhoneWithMobilePlanElement, defineCustomElement as defineScaleIconDevicePhoneWithMobilePlan } from "@telekom/scale-components/dist/components/scale-icon-device-phone-with-mobile-plan.js";
-import { ScaleIconDevicePhoneWithoutMobilePlan as ScaleIconDevicePhoneWithoutMobilePlanElement, defineCustomElement as defineScaleIconDevicePhoneWithoutMobilePlan } from "@telekom/scale-components/dist/components/scale-icon-device-phone-without-mobile-plan.js";
-import { ScaleIconDevicePhotoCamera as ScaleIconDevicePhotoCameraElement, defineCustomElement as defineScaleIconDevicePhotoCamera } from "@telekom/scale-components/dist/components/scale-icon-device-photo-camera.js";
-import { ScaleIconDeviceRemoteController as ScaleIconDeviceRemoteControllerElement, defineCustomElement as defineScaleIconDeviceRemoteController } from "@telekom/scale-components/dist/components/scale-icon-device-remote-controller.js";
-import { ScaleIconDeviceReplacementMobilephone as ScaleIconDeviceReplacementMobilephoneElement, defineCustomElement as defineScaleIconDeviceReplacementMobilephone } from "@telekom/scale-components/dist/components/scale-icon-device-replacement-mobilephone.js";
-import { ScaleIconDeviceScreenRotate as ScaleIconDeviceScreenRotateElement, defineCustomElement as defineScaleIconDeviceScreenRotate } from "@telekom/scale-components/dist/components/scale-icon-device-screen-rotate.js";
-import { ScaleIconDeviceServer as ScaleIconDeviceServerElement, defineCustomElement as defineScaleIconDeviceServer } from "@telekom/scale-components/dist/components/scale-icon-device-server.js";
-import { ScaleIconDeviceSmartSpeaker as ScaleIconDeviceSmartSpeakerElement, defineCustomElement as defineScaleIconDeviceSmartSpeaker } from "@telekom/scale-components/dist/components/scale-icon-device-smart-speaker.js";
-import { ScaleIconDeviceTablet as ScaleIconDeviceTabletElement, defineCustomElement as defineScaleIconDeviceTablet } from "@telekom/scale-components/dist/components/scale-icon-device-tablet.js";
-import { ScaleIconDeviceTvAndMobile as ScaleIconDeviceTvAndMobileElement, defineCustomElement as defineScaleIconDeviceTvAndMobile } from "@telekom/scale-components/dist/components/scale-icon-device-tv-and-mobile.js";
-import { ScaleIconDeviceTwitchingClosedState as ScaleIconDeviceTwitchingClosedStateElement, defineCustomElement as defineScaleIconDeviceTwitchingClosedState } from "@telekom/scale-components/dist/components/scale-icon-device-twitching-closed-state.js";
-import { ScaleIconDeviceTwitchingOpenState as ScaleIconDeviceTwitchingOpenStateElement, defineCustomElement as defineScaleIconDeviceTwitchingOpenState } from "@telekom/scale-components/dist/components/scale-icon-device-twitching-open-state.js";
-import { ScaleIconHomeHome as ScaleIconHomeHomeElement, defineCustomElement as defineScaleIconHomeHome } from "@telekom/scale-components/dist/components/scale-icon-home-home.js";
-import { ScaleIconHomeInternetAtHome as ScaleIconHomeInternetAtHomeElement, defineCustomElement as defineScaleIconHomeInternetAtHome } from "@telekom/scale-components/dist/components/scale-icon-home-internet-at-home.js";
-import { ScaleIconHomeIot as ScaleIconHomeIotElement, defineCustomElement as defineScaleIconHomeIot } from "@telekom/scale-components/dist/components/scale-icon-home-iot.js";
-import { ScaleIconHomeLightBulb as ScaleIconHomeLightBulbElement, defineCustomElement as defineScaleIconHomeLightBulb } from "@telekom/scale-components/dist/components/scale-icon-home-light-bulb.js";
-import { ScaleIconHomeNetworkSecure as ScaleIconHomeNetworkSecureElement, defineCustomElement as defineScaleIconHomeNetworkSecure } from "@telekom/scale-components/dist/components/scale-icon-home-network-secure.js";
-import { ScaleIconHomeNoWifi as ScaleIconHomeNoWifiElement, defineCustomElement as defineScaleIconHomeNoWifi } from "@telekom/scale-components/dist/components/scale-icon-home-no-wifi.js";
-import { ScaleIconHomePowerSocket as ScaleIconHomePowerSocketElement, defineCustomElement as defineScaleIconHomePowerSocket } from "@telekom/scale-components/dist/components/scale-icon-home-power-socket.js";
-import { ScaleIconHomePreferredWifi as ScaleIconHomePreferredWifiElement, defineCustomElement as defineScaleIconHomePreferredWifi } from "@telekom/scale-components/dist/components/scale-icon-home-preferred-wifi.js";
-import { ScaleIconHomeReducedWifi as ScaleIconHomeReducedWifiElement, defineCustomElement as defineScaleIconHomeReducedWifi } from "@telekom/scale-components/dist/components/scale-icon-home-reduced-wifi.js";
-import { ScaleIconHomeSlowWifi as ScaleIconHomeSlowWifiElement, defineCustomElement as defineScaleIconHomeSlowWifi } from "@telekom/scale-components/dist/components/scale-icon-home-slow-wifi.js";
-import { ScaleIconHomeSmarthome as ScaleIconHomeSmarthomeElement, defineCustomElement as defineScaleIconHomeSmarthome } from "@telekom/scale-components/dist/components/scale-icon-home-smarthome.js";
-import { ScaleIconHomeUnableToConnectToRouter as ScaleIconHomeUnableToConnectToRouterElement, defineCustomElement as defineScaleIconHomeUnableToConnectToRouter } from "@telekom/scale-components/dist/components/scale-icon-home-unable-to-connect-to-router.js";
-import { ScaleIconHomeWifiConnected as ScaleIconHomeWifiConnectedElement, defineCustomElement as defineScaleIconHomeWifiConnected } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-connected.js";
-import { ScaleIconHomeWifiConnectionError as ScaleIconHomeWifiConnectionErrorElement, defineCustomElement as defineScaleIconHomeWifiConnectionError } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-connection-error.js";
-import { ScaleIconHomeWifiManualLogin as ScaleIconHomeWifiManualLoginElement, defineCustomElement as defineScaleIconHomeWifiManualLogin } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-manual-login.js";
-import { ScaleIconHomeWifiNoWiredInternet as ScaleIconHomeWifiNoWiredInternetElement, defineCustomElement as defineScaleIconHomeWifiNoWiredInternet } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-no-wired-internet.js";
-import { ScaleIconHomeWifi as ScaleIconHomeWifiElement, defineCustomElement as defineScaleIconHomeWifi } from "@telekom/scale-components/dist/components/scale-icon-home-wifi.js";
-import { ScaleIconNavigationCircleTopUp as ScaleIconNavigationCircleTopUpElement, defineCustomElement as defineScaleIconNavigationCircleTopUp } from "@telekom/scale-components/dist/components/scale-icon-navigation-circle-top-up.js";
-import { ScaleIconNavigationCollapseDown as ScaleIconNavigationCollapseDownElement, defineCustomElement as defineScaleIconNavigationCollapseDown } from "@telekom/scale-components/dist/components/scale-icon-navigation-collapse-down.js";
-import { ScaleIconNavigationCollapseUp as ScaleIconNavigationCollapseUpElement, defineCustomElement as defineScaleIconNavigationCollapseUp } from "@telekom/scale-components/dist/components/scale-icon-navigation-collapse-up.js";
-import { ScaleIconNavigationDoubleLeft as ScaleIconNavigationDoubleLeftElement, defineCustomElement as defineScaleIconNavigationDoubleLeft } from "@telekom/scale-components/dist/components/scale-icon-navigation-double-left.js";
-import { ScaleIconNavigationDoubleRight as ScaleIconNavigationDoubleRightElement, defineCustomElement as defineScaleIconNavigationDoubleRight } from "@telekom/scale-components/dist/components/scale-icon-navigation-double-right.js";
-import { ScaleIconNavigationExternalLink as ScaleIconNavigationExternalLinkElement, defineCustomElement as defineScaleIconNavigationExternalLink } from "@telekom/scale-components/dist/components/scale-icon-navigation-external-link.js";
-import { ScaleIconNavigationInternalLink as ScaleIconNavigationInternalLinkElement, defineCustomElement as defineScaleIconNavigationInternalLink } from "@telekom/scale-components/dist/components/scale-icon-navigation-internal-link.js";
-import { ScaleIconNavigationLeftCondensed as ScaleIconNavigationLeftCondensedElement, defineCustomElement as defineScaleIconNavigationLeftCondensed } from "@telekom/scale-components/dist/components/scale-icon-navigation-left-condensed.js";
-import { ScaleIconNavigationLeft as ScaleIconNavigationLeftElement, defineCustomElement as defineScaleIconNavigationLeft } from "@telekom/scale-components/dist/components/scale-icon-navigation-left.js";
-import { ScaleIconNavigationLocation as ScaleIconNavigationLocationElement, defineCustomElement as defineScaleIconNavigationLocation } from "@telekom/scale-components/dist/components/scale-icon-navigation-location.js";
-import { ScaleIconNavigationMap as ScaleIconNavigationMapElement, defineCustomElement as defineScaleIconNavigationMap } from "@telekom/scale-components/dist/components/scale-icon-navigation-map.js";
-import { ScaleIconNavigationMyLocation as ScaleIconNavigationMyLocationElement, defineCustomElement as defineScaleIconNavigationMyLocation } from "@telekom/scale-components/dist/components/scale-icon-navigation-my-location.js";
-import { ScaleIconNavigationRightCondensed as ScaleIconNavigationRightCondensedElement, defineCustomElement as defineScaleIconNavigationRightCondensed } from "@telekom/scale-components/dist/components/scale-icon-navigation-right-condensed.js";
-import { ScaleIconNavigationRight as ScaleIconNavigationRightElement, defineCustomElement as defineScaleIconNavigationRight } from "@telekom/scale-components/dist/components/scale-icon-navigation-right.js";
-import { ScaleIconNavigationStart as ScaleIconNavigationStartElement, defineCustomElement as defineScaleIconNavigationStart } from "@telekom/scale-components/dist/components/scale-icon-navigation-start.js";
-import { ScaleIconNavigationTopUp as ScaleIconNavigationTopUpElement, defineCustomElement as defineScaleIconNavigationTopUp } from "@telekom/scale-components/dist/components/scale-icon-navigation-top-up.js";
-import { ScaleIconProcessOrderStatus as ScaleIconProcessOrderStatusElement, defineCustomElement as defineScaleIconProcessOrderStatus } from "@telekom/scale-components/dist/components/scale-icon-process-order-status.js";
-import { ScaleIconProcessProcessing as ScaleIconProcessProcessingElement, defineCustomElement as defineScaleIconProcessProcessing } from "@telekom/scale-components/dist/components/scale-icon-process-processing.js";
-import { ScaleIconProcessSepaTransaction as ScaleIconProcessSepaTransactionElement, defineCustomElement as defineScaleIconProcessSepaTransaction } from "@telekom/scale-components/dist/components/scale-icon-process-sepa-transaction.js";
-import { ScaleIconServiceDevicesService as ScaleIconServiceDevicesServiceElement, defineCustomElement as defineScaleIconServiceDevicesService } from "@telekom/scale-components/dist/components/scale-icon-service-devices-service.js";
-import { ScaleIconServiceMaintanance as ScaleIconServiceMaintananceElement, defineCustomElement as defineScaleIconServiceMaintanance } from "@telekom/scale-components/dist/components/scale-icon-service-maintanance.js";
-import { ScaleIconServiceManual as ScaleIconServiceManualElement, defineCustomElement as defineScaleIconServiceManual } from "@telekom/scale-components/dist/components/scale-icon-service-manual.js";
-import { ScaleIconServiceOneTimePassword as ScaleIconServiceOneTimePasswordElement, defineCustomElement as defineScaleIconServiceOneTimePassword } from "@telekom/scale-components/dist/components/scale-icon-service-one-time-password.js";
-import { ScaleIconServiceServices as ScaleIconServiceServicesElement, defineCustomElement as defineScaleIconServiceServices } from "@telekom/scale-components/dist/components/scale-icon-service-services.js";
-import { ScaleIconServiceSettings as ScaleIconServiceSettingsElement, defineCustomElement as defineScaleIconServiceSettings } from "@telekom/scale-components/dist/components/scale-icon-service-settings.js";
-import { ScaleIconServiceSupport as ScaleIconServiceSupportElement, defineCustomElement as defineScaleIconServiceSupport } from "@telekom/scale-components/dist/components/scale-icon-service-support.js";
-import { ScaleIconServiceVpn as ScaleIconServiceVpnElement, defineCustomElement as defineScaleIconServiceVpn } from "@telekom/scale-components/dist/components/scale-icon-service-vpn.js";
-import { ScaleIconTProduct2faTelekomApp as ScaleIconTProduct2faTelekomAppElement, defineCustomElement as defineScaleIconTProduct2faTelekomApp } from "@telekom/scale-components/dist/components/scale-icon-t-product-2fa-telekom-app.js";
-import { ScaleIconTProductMagentaCloud as ScaleIconTProductMagentaCloudElement, defineCustomElement as defineScaleIconTProductMagentaCloud } from "@telekom/scale-components/dist/components/scale-icon-t-product-magenta-cloud.js";
-import { ScaleIconTProductMagentaTv as ScaleIconTProductMagentaTvElement, defineCustomElement as defineScaleIconTProductMagentaTv } from "@telekom/scale-components/dist/components/scale-icon-t-product-magenta-tv.js";
-import { ScaleIconTProductMagentaone as ScaleIconTProductMagentaoneElement, defineCustomElement as defineScaleIconTProductMagentaone } from "@telekom/scale-components/dist/components/scale-icon-t-product-magentaone.js";
-import { ScaleIconTProductMeasureInternetSpeed as ScaleIconTProductMeasureInternetSpeedElement, defineCustomElement as defineScaleIconTProductMeasureInternetSpeed } from "@telekom/scale-components/dist/components/scale-icon-t-product-measure-internet-speed.js";
-import { ScaleIconTProductSeamlessConnectivity as ScaleIconTProductSeamlessConnectivityElement, defineCustomElement as defineScaleIconTProductSeamlessConnectivity } from "@telekom/scale-components/dist/components/scale-icon-t-product-seamless-connectivity.js";
-import { ScaleIconTProductTelekom1t1 as ScaleIconTProductTelekom1t1Element, defineCustomElement as defineScaleIconTProductTelekom1t1 } from "@telekom/scale-components/dist/components/scale-icon-t-product-telekom-1t1.js";
-import { ScaleIconTProductTelekomPlan as ScaleIconTProductTelekomPlanElement, defineCustomElement as defineScaleIconTProductTelekomPlan } from "@telekom/scale-components/dist/components/scale-icon-t-product-telekom-plan.js";
-import { ScaleIconTProductTelekomShopB as ScaleIconTProductTelekomShopBElement, defineCustomElement as defineScaleIconTProductTelekomShopB } from "@telekom/scale-components/dist/components/scale-icon-t-product-telekom-shop-b.js";
-import { ScaleIconTProductUsage as ScaleIconTProductUsageElement, defineCustomElement as defineScaleIconTProductUsage } from "@telekom/scale-components/dist/components/scale-icon-t-product-usage.js";
-import { ScaleIconTProductVoice as ScaleIconTProductVoiceElement, defineCustomElement as defineScaleIconTProductVoice } from "@telekom/scale-components/dist/components/scale-icon-t-product-voice.js";
-import { ScaleIconUserFileAdmin as ScaleIconUserFileAdminElement, defineCustomElement as defineScaleIconUserFileAdmin } from "@telekom/scale-components/dist/components/scale-icon-user-file-admin.js";
-import { ScaleIconUserFileAnalytics as ScaleIconUserFileAnalyticsElement, defineCustomElement as defineScaleIconUserFileAnalytics } from "@telekom/scale-components/dist/components/scale-icon-user-file-analytics.js";
-import { ScaleIconUserFileAttachment as ScaleIconUserFileAttachmentElement, defineCustomElement as defineScaleIconUserFileAttachment } from "@telekom/scale-components/dist/components/scale-icon-user-file-attachment.js";
-import { ScaleIconUserFileAudioFile as ScaleIconUserFileAudioFileElement, defineCustomElement as defineScaleIconUserFileAudioFile } from "@telekom/scale-components/dist/components/scale-icon-user-file-audio-file.js";
-import { ScaleIconUserFileBilling as ScaleIconUserFileBillingElement, defineCustomElement as defineScaleIconUserFileBilling } from "@telekom/scale-components/dist/components/scale-icon-user-file-billing.js";
-import { ScaleIconUserFileBoy as ScaleIconUserFileBoyElement, defineCustomElement as defineScaleIconUserFileBoy } from "@telekom/scale-components/dist/components/scale-icon-user-file-boy.js";
-import { ScaleIconUserFileBussinesUsers as ScaleIconUserFileBussinesUsersElement, defineCustomElement as defineScaleIconUserFileBussinesUsers } from "@telekom/scale-components/dist/components/scale-icon-user-file-bussines-users.js";
-import { ScaleIconUserFileCommunities as ScaleIconUserFileCommunitiesElement, defineCustomElement as defineScaleIconUserFileCommunities } from "@telekom/scale-components/dist/components/scale-icon-user-file-communities.js";
-import { ScaleIconUserFileContactsFromCloud as ScaleIconUserFileContactsFromCloudElement, defineCustomElement as defineScaleIconUserFileContactsFromCloud } from "@telekom/scale-components/dist/components/scale-icon-user-file-contacts-from-cloud.js";
-import { ScaleIconUserFileContacts as ScaleIconUserFileContactsElement, defineCustomElement as defineScaleIconUserFileContacts } from "@telekom/scale-components/dist/components/scale-icon-user-file-contacts.js";
-import { ScaleIconUserFileContracts as ScaleIconUserFileContractsElement, defineCustomElement as defineScaleIconUserFileContracts } from "@telekom/scale-components/dist/components/scale-icon-user-file-contracts.js";
-import { ScaleIconUserFileDraftFile as ScaleIconUserFileDraftFileElement, defineCustomElement as defineScaleIconUserFileDraftFile } from "@telekom/scale-components/dist/components/scale-icon-user-file-draft-file.js";
-import { ScaleIconUserFileFamilies as ScaleIconUserFileFamiliesElement, defineCustomElement as defineScaleIconUserFileFamilies } from "@telekom/scale-components/dist/components/scale-icon-user-file-families.js";
-import { ScaleIconUserFileFamily as ScaleIconUserFileFamilyElement, defineCustomElement as defineScaleIconUserFileFamily } from "@telekom/scale-components/dist/components/scale-icon-user-file-family.js";
-import { ScaleIconUserFileFileCollection as ScaleIconUserFileFileCollectionElement, defineCustomElement as defineScaleIconUserFileFileCollection } from "@telekom/scale-components/dist/components/scale-icon-user-file-file-collection.js";
-import { ScaleIconUserFileFile as ScaleIconUserFileFileElement, defineCustomElement as defineScaleIconUserFileFile } from "@telekom/scale-components/dist/components/scale-icon-user-file-file.js";
-import { ScaleIconUserFileGirl as ScaleIconUserFileGirlElement, defineCustomElement as defineScaleIconUserFileGirl } from "@telekom/scale-components/dist/components/scale-icon-user-file-girl.js";
-import { ScaleIconUserFileHandshake as ScaleIconUserFileHandshakeElement, defineCustomElement as defineScaleIconUserFileHandshake } from "@telekom/scale-components/dist/components/scale-icon-user-file-handshake.js";
-import { ScaleIconUserFileHtmlFile as ScaleIconUserFileHtmlFileElement, defineCustomElement as defineScaleIconUserFileHtmlFile } from "@telekom/scale-components/dist/components/scale-icon-user-file-html-file.js";
-import { ScaleIconUserFileIdCard as ScaleIconUserFileIdCardElement, defineCustomElement as defineScaleIconUserFileIdCard } from "@telekom/scale-components/dist/components/scale-icon-user-file-id-card.js";
-import { ScaleIconUserFileImageFile as ScaleIconUserFileImageFileElement, defineCustomElement as defineScaleIconUserFileImageFile } from "@telekom/scale-components/dist/components/scale-icon-user-file-image-file.js";
-import { ScaleIconUserFileLogout as ScaleIconUserFileLogoutElement, defineCustomElement as defineScaleIconUserFileLogout } from "@telekom/scale-components/dist/components/scale-icon-user-file-logout.js";
-import { ScaleIconUserFileMan as ScaleIconUserFileManElement, defineCustomElement as defineScaleIconUserFileMan } from "@telekom/scale-components/dist/components/scale-icon-user-file-man.js";
-import { ScaleIconUserFilePdfFile as ScaleIconUserFilePdfFileElement, defineCustomElement as defineScaleIconUserFilePdfFile } from "@telekom/scale-components/dist/components/scale-icon-user-file-pdf-file.js";
-import { ScaleIconUserFileSwitchUsers as ScaleIconUserFileSwitchUsersElement, defineCustomElement as defineScaleIconUserFileSwitchUsers } from "@telekom/scale-components/dist/components/scale-icon-user-file-switch-users.js";
-import { ScaleIconUserFileUser as ScaleIconUserFileUserElement, defineCustomElement as defineScaleIconUserFileUser } from "@telekom/scale-components/dist/components/scale-icon-user-file-user.js";
-import { ScaleIconUserFileVideos as ScaleIconUserFileVideosElement, defineCustomElement as defineScaleIconUserFileVideos } from "@telekom/scale-components/dist/components/scale-icon-user-file-videos.js";
-import { ScaleIconUserFileWoman as ScaleIconUserFileWomanElement, defineCustomElement as defineScaleIconUserFileWoman } from "@telekom/scale-components/dist/components/scale-icon-user-file-woman.js";
-import { ScaleIconWeatherCloudyRain as ScaleIconWeatherCloudyRainElement, defineCustomElement as defineScaleIconWeatherCloudyRain } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-rain.js";
-import { ScaleIconWeatherCloudySleet as ScaleIconWeatherCloudySleetElement, defineCustomElement as defineScaleIconWeatherCloudySleet } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-sleet.js";
-import { ScaleIconWeatherCloudySnow as ScaleIconWeatherCloudySnowElement, defineCustomElement as defineScaleIconWeatherCloudySnow } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-snow.js";
-import { ScaleIconWeatherCloudyThunderRain as ScaleIconWeatherCloudyThunderRainElement, defineCustomElement as defineScaleIconWeatherCloudyThunderRain } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-thunder-rain.js";
-import { ScaleIconWeatherCloudyThunderSnow as ScaleIconWeatherCloudyThunderSnowElement, defineCustomElement as defineScaleIconWeatherCloudyThunderSnow } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-thunder-snow.js";
-import { ScaleIconWeatherCloudy as ScaleIconWeatherCloudyElement, defineCustomElement as defineScaleIconWeatherCloudy } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy.js";
-import { ScaleIconWeatherHeavySleet as ScaleIconWeatherHeavySleetElement, defineCustomElement as defineScaleIconWeatherHeavySleet } from "@telekom/scale-components/dist/components/scale-icon-weather-heavy-sleet.js";
-import { ScaleIconWeatherHeavySnow as ScaleIconWeatherHeavySnowElement, defineCustomElement as defineScaleIconWeatherHeavySnow } from "@telekom/scale-components/dist/components/scale-icon-weather-heavy-snow.js";
-import { ScaleIconWeatherMoonClear as ScaleIconWeatherMoonClearElement, defineCustomElement as defineScaleIconWeatherMoonClear } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-clear.js";
-import { ScaleIconWeatherMoonCloudyA as ScaleIconWeatherMoonCloudyAElement, defineCustomElement as defineScaleIconWeatherMoonCloudyA } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-cloudy-a.js";
-import { ScaleIconWeatherMoonCloudyB as ScaleIconWeatherMoonCloudyBElement, defineCustomElement as defineScaleIconWeatherMoonCloudyB } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-cloudy-b.js";
-import { ScaleIconWeatherMoonRain as ScaleIconWeatherMoonRainElement, defineCustomElement as defineScaleIconWeatherMoonRain } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-rain.js";
-import { ScaleIconWeatherMoonSleet as ScaleIconWeatherMoonSleetElement, defineCustomElement as defineScaleIconWeatherMoonSleet } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-sleet.js";
-import { ScaleIconWeatherMoonSnow as ScaleIconWeatherMoonSnowElement, defineCustomElement as defineScaleIconWeatherMoonSnow } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-snow.js";
-import { ScaleIconWeatherMoonThunderRain as ScaleIconWeatherMoonThunderRainElement, defineCustomElement as defineScaleIconWeatherMoonThunderRain } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-thunder-rain.js";
-import { ScaleIconWeatherMoonThunderSnow as ScaleIconWeatherMoonThunderSnowElement, defineCustomElement as defineScaleIconWeatherMoonThunderSnow } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-thunder-snow.js";
-import { ScaleIconWeatherOvercast as ScaleIconWeatherOvercastElement, defineCustomElement as defineScaleIconWeatherOvercast } from "@telekom/scale-components/dist/components/scale-icon-weather-overcast.js";
-import { ScaleIconWeatherRain as ScaleIconWeatherRainElement, defineCustomElement as defineScaleIconWeatherRain } from "@telekom/scale-components/dist/components/scale-icon-weather-rain.js";
-import { ScaleIconWeatherSunny as ScaleIconWeatherSunnyElement, defineCustomElement as defineScaleIconWeatherSunny } from "@telekom/scale-components/dist/components/scale-icon-weather-sunny.js";
-import { ScaleIconWeatherThunderRain as ScaleIconWeatherThunderRainElement, defineCustomElement as defineScaleIconWeatherThunderRain } from "@telekom/scale-components/dist/components/scale-icon-weather-thunder-rain.js";
-import { ScaleIconWeatherThunderSnow as ScaleIconWeatherThunderSnowElement, defineCustomElement as defineScaleIconWeatherThunderSnow } from "@telekom/scale-components/dist/components/scale-icon-weather-thunder-snow.js";
-import { ScaleIcon as ScaleIconElement, defineCustomElement as defineScaleIcon } from "@telekom/scale-components/dist/components/scale-icon.js";
-import { ScaleInput as ScaleInputElement, defineCustomElement as defineScaleInput } from "@telekom/scale-components/dist/components/scale-input.js";
-import { ScaleLink as ScaleLinkElement, defineCustomElement as defineScaleLink } from "@telekom/scale-components/dist/components/scale-link.js";
-import { ScaleListItem as ScaleListItemElement, defineCustomElement as defineScaleListItem } from "@telekom/scale-components/dist/components/scale-list-item.js";
-import { ScaleList as ScaleListElement, defineCustomElement as defineScaleList } from "@telekom/scale-components/dist/components/scale-list.js";
-import { ScaleLoadingSpinner as ScaleLoadingSpinnerElement, defineCustomElement as defineScaleLoadingSpinner } from "@telekom/scale-components/dist/components/scale-loading-spinner.js";
-import { ScaleLogoSvg as ScaleLogoSvgElement, defineCustomElement as defineScaleLogoSvg } from "@telekom/scale-components/dist/components/scale-logo-svg.js";
-import { ScaleLogo as ScaleLogoElement, defineCustomElement as defineScaleLogo } from "@telekom/scale-components/dist/components/scale-logo.js";
-import { ScaleMenuFlyoutDivider as ScaleMenuFlyoutDividerElement, defineCustomElement as defineScaleMenuFlyoutDivider } from "@telekom/scale-components/dist/components/scale-menu-flyout-divider.js";
-import { ScaleMenuFlyoutItem as ScaleMenuFlyoutItemElement, defineCustomElement as defineScaleMenuFlyoutItem } from "@telekom/scale-components/dist/components/scale-menu-flyout-item.js";
-import { ScaleMenuFlyoutList as ScaleMenuFlyoutListElement, defineCustomElement as defineScaleMenuFlyoutList } from "@telekom/scale-components/dist/components/scale-menu-flyout-list.js";
-import { ScaleMenuFlyout as ScaleMenuFlyoutElement, defineCustomElement as defineScaleMenuFlyout } from "@telekom/scale-components/dist/components/scale-menu-flyout.js";
-import { ScaleModal as ScaleModalElement, defineCustomElement as defineScaleModal } from "@telekom/scale-components/dist/components/scale-modal.js";
-import { ScaleNavIcon as ScaleNavIconElement, defineCustomElement as defineScaleNavIcon } from "@telekom/scale-components/dist/components/scale-nav-icon.js";
-import { ScaleNavMain as ScaleNavMainElement, defineCustomElement as defineScaleNavMain } from "@telekom/scale-components/dist/components/scale-nav-main.js";
-import { ScaleNavSegment as ScaleNavSegmentElement, defineCustomElement as defineScaleNavSegment } from "@telekom/scale-components/dist/components/scale-nav-segment.js";
-import { ScaleNotificationBadge as ScaleNotificationBadgeElement, defineCustomElement as defineScaleNotificationBadge } from "@telekom/scale-components/dist/components/scale-notification-badge.js";
-import { ScaleNotificationBanner as ScaleNotificationBannerElement, defineCustomElement as defineScaleNotificationBanner } from "@telekom/scale-components/dist/components/scale-notification-banner.js";
-import { ScaleNotificationMessage as ScaleNotificationMessageElement, defineCustomElement as defineScaleNotificationMessage } from "@telekom/scale-components/dist/components/scale-notification-message.js";
-import { ScaleNotificationToast as ScaleNotificationToastElement, defineCustomElement as defineScaleNotificationToast } from "@telekom/scale-components/dist/components/scale-notification-toast.js";
-import { ScaleNotification as ScaleNotificationElement, defineCustomElement as defineScaleNotification } from "@telekom/scale-components/dist/components/scale-notification.js";
-import { ScalePagination as ScalePaginationElement, defineCustomElement as defineScalePagination } from "@telekom/scale-components/dist/components/scale-pagination.js";
-import { ScaleProgressBar as ScaleProgressBarElement, defineCustomElement as defineScaleProgressBar } from "@telekom/scale-components/dist/components/scale-progress-bar.js";
-import { ScaleRadioButtonGroup as ScaleRadioButtonGroupElement, defineCustomElement as defineScaleRadioButtonGroup } from "@telekom/scale-components/dist/components/scale-radio-button-group.js";
-import { ScaleRadioButton as ScaleRadioButtonElement, defineCustomElement as defineScaleRadioButton } from "@telekom/scale-components/dist/components/scale-radio-button.js";
-import { ScaleRatingStars as ScaleRatingStarsElement, defineCustomElement as defineScaleRatingStars } from "@telekom/scale-components/dist/components/scale-rating-stars.js";
-import { ScaleSegment as ScaleSegmentElement, defineCustomElement as defineScaleSegment } from "@telekom/scale-components/dist/components/scale-segment.js";
-import { ScaleSegmentedButton as ScaleSegmentedButtonElement, defineCustomElement as defineScaleSegmentedButton } from "@telekom/scale-components/dist/components/scale-segmented-button.js";
-import { ScaleSidebarNavCollapsible as ScaleSidebarNavCollapsibleElement, defineCustomElement as defineScaleSidebarNavCollapsible } from "@telekom/scale-components/dist/components/scale-sidebar-nav-collapsible.js";
-import { ScaleSidebarNavItem as ScaleSidebarNavItemElement, defineCustomElement as defineScaleSidebarNavItem } from "@telekom/scale-components/dist/components/scale-sidebar-nav-item.js";
-import { ScaleSidebarNav as ScaleSidebarNavElement, defineCustomElement as defineScaleSidebarNav } from "@telekom/scale-components/dist/components/scale-sidebar-nav.js";
-import { ScaleSlider as ScaleSliderElement, defineCustomElement as defineScaleSlider } from "@telekom/scale-components/dist/components/scale-slider.js";
-import { ScaleSsrSlotFix as ScaleSsrSlotFixElement, defineCustomElement as defineScaleSsrSlotFix } from "@telekom/scale-components/dist/components/scale-ssr-slot-fix.js";
-import { ScaleSwitch as ScaleSwitchElement, defineCustomElement as defineScaleSwitch } from "@telekom/scale-components/dist/components/scale-switch.js";
-import { ScaleTabHeader as ScaleTabHeaderElement, defineCustomElement as defineScaleTabHeader } from "@telekom/scale-components/dist/components/scale-tab-header.js";
-import { ScaleTabNav as ScaleTabNavElement, defineCustomElement as defineScaleTabNav } from "@telekom/scale-components/dist/components/scale-tab-nav.js";
-import { ScaleTabPanel as ScaleTabPanelElement, defineCustomElement as defineScaleTabPanel } from "@telekom/scale-components/dist/components/scale-tab-panel.js";
-import { ScaleTable as ScaleTableElement, defineCustomElement as defineScaleTable } from "@telekom/scale-components/dist/components/scale-table.js";
-import { ScaleTag as ScaleTagElement, defineCustomElement as defineScaleTag } from "@telekom/scale-components/dist/components/scale-tag.js";
-import { ScaleTelekomAppShell as ScaleTelekomAppShellElement, defineCustomElement as defineScaleTelekomAppShell } from "@telekom/scale-components/dist/components/scale-telekom-app-shell.js";
-import { ScaleTelekomFooterContent as ScaleTelekomFooterContentElement, defineCustomElement as defineScaleTelekomFooterContent } from "@telekom/scale-components/dist/components/scale-telekom-footer-content.js";
-import { ScaleTelekomFooterDataBackCompat as ScaleTelekomFooterDataBackCompatElement, defineCustomElement as defineScaleTelekomFooterDataBackCompat } from "@telekom/scale-components/dist/components/scale-telekom-footer-data-back-compat.js";
-import { ScaleTelekomFooterExtendedNavigationColumn as ScaleTelekomFooterExtendedNavigationColumnElement, defineCustomElement as defineScaleTelekomFooterExtendedNavigationColumn } from "@telekom/scale-components/dist/components/scale-telekom-footer-extended-navigation-column.js";
-import { ScaleTelekomFooterExtendedNavigation as ScaleTelekomFooterExtendedNavigationElement, defineCustomElement as defineScaleTelekomFooterExtendedNavigation } from "@telekom/scale-components/dist/components/scale-telekom-footer-extended-navigation.js";
-import { ScaleTelekomFooter as ScaleTelekomFooterElement, defineCustomElement as defineScaleTelekomFooter } from "@telekom/scale-components/dist/components/scale-telekom-footer.js";
-import { ScaleTelekomHeaderDataBackCompat as ScaleTelekomHeaderDataBackCompatElement, defineCustomElement as defineScaleTelekomHeaderDataBackCompat } from "@telekom/scale-components/dist/components/scale-telekom-header-data-back-compat.js";
-import { ScaleTelekomHeader as ScaleTelekomHeaderElement, defineCustomElement as defineScaleTelekomHeader } from "@telekom/scale-components/dist/components/scale-telekom-header.js";
-import { ScaleTelekomMegaMenuColumn as ScaleTelekomMegaMenuColumnElement, defineCustomElement as defineScaleTelekomMegaMenuColumn } from "@telekom/scale-components/dist/components/scale-telekom-mega-menu-column.js";
-import { ScaleTelekomMegaMenu as ScaleTelekomMegaMenuElement, defineCustomElement as defineScaleTelekomMegaMenu } from "@telekom/scale-components/dist/components/scale-telekom-mega-menu.js";
-import { ScaleTelekomMobileFlyoutCanvas as ScaleTelekomMobileFlyoutCanvasElement, defineCustomElement as defineScaleTelekomMobileFlyoutCanvas } from "@telekom/scale-components/dist/components/scale-telekom-mobile-flyout-canvas.js";
-import { ScaleTelekomMobileMenuItem as ScaleTelekomMobileMenuItemElement, defineCustomElement as defineScaleTelekomMobileMenuItem } from "@telekom/scale-components/dist/components/scale-telekom-mobile-menu-item.js";
-import { ScaleTelekomMobileMenu as ScaleTelekomMobileMenuElement, defineCustomElement as defineScaleTelekomMobileMenu } from "@telekom/scale-components/dist/components/scale-telekom-mobile-menu.js";
-import { ScaleTelekomNavFlyout as ScaleTelekomNavFlyoutElement, defineCustomElement as defineScaleTelekomNavFlyout } from "@telekom/scale-components/dist/components/scale-telekom-nav-flyout.js";
-import { ScaleTelekomNavItem as ScaleTelekomNavItemElement, defineCustomElement as defineScaleTelekomNavItem } from "@telekom/scale-components/dist/components/scale-telekom-nav-item.js";
-import { ScaleTelekomNavList as ScaleTelekomNavListElement, defineCustomElement as defineScaleTelekomNavList } from "@telekom/scale-components/dist/components/scale-telekom-nav-list.js";
-import { ScaleTelekomProfileMenu as ScaleTelekomProfileMenuElement, defineCustomElement as defineScaleTelekomProfileMenu } from "@telekom/scale-components/dist/components/scale-telekom-profile-menu.js";
-import { ScaleTextField as ScaleTextFieldElement, defineCustomElement as defineScaleTextField } from "@telekom/scale-components/dist/components/scale-text-field.js";
-import { ScaleTextarea as ScaleTextareaElement, defineCustomElement as defineScaleTextarea } from "@telekom/scale-components/dist/components/scale-textarea.js";
-import { ScaleToast as ScaleToastElement, defineCustomElement as defineScaleToast } from "@telekom/scale-components/dist/components/scale-toast.js";
-import { ScaleToggleButton as ScaleToggleButtonElement, defineCustomElement as defineScaleToggleButton } from "@telekom/scale-components/dist/components/scale-toggle-button.js";
-import { ScaleToggleGroup as ScaleToggleGroupElement, defineCustomElement as defineScaleToggleGroup } from "@telekom/scale-components/dist/components/scale-toggle-group.js";
-import { ScaleTooltip as ScaleTooltipElement, defineCustomElement as defineScaleTooltip } from "@telekom/scale-components/dist/components/scale-tooltip.js";
-import React from 'react';
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from "@telekom/scale-components";
+import { type AppNavigationMainMobileCustomEvent, type AppNavigationUserMenuCustomEvent, type BeforeCloseEventDetail, type CollapsibleEventDetail, type ComboboxChangeEventDetail, type DataGridEditEventDetail, type DataGridSortedEventDetail, type DuetDatePickerChangeEvent, type DuetDatePickerFocusEvent, type InputChangeEventDetail, type PaginationEventDetail, type ScaleCheckboxCustomEvent, type ScaleChipCustomEvent, type ScaleCollapsibleCustomEvent, type ScaleComboboxCustomEvent, type ScaleDataGridCustomEvent, type ScaleDatePickerCustomEvent, type ScaleDropdownCustomEvent, type ScaleDropdownSelectCustomEvent, type ScaleInputCustomEvent, type ScaleMenuFlyoutItemCustomEvent, type ScaleMenuFlyoutListCustomEvent, type ScaleModalCustomEvent, type ScaleNotificationBannerCustomEvent, type ScaleNotificationCustomEvent, type ScaleNotificationMessageCustomEvent, type ScaleNotificationToastCustomEvent, type ScalePaginationCustomEvent, type ScaleRadioButtonCustomEvent, type ScaleRatingStarsCustomEvent, type ScaleSegmentCustomEvent, type ScaleSegmentedButtonCustomEvent, type ScaleSliderCustomEvent, type ScaleSwitchCustomEvent, type ScaleTabHeaderCustomEvent, type ScaleTagCustomEvent, type ScaleTelekomMobileFlyoutCanvasCustomEvent, type ScaleTelekomMobileMenuCustomEvent, type ScaleTelekomMobileMenuItemCustomEvent, type ScaleTelekomNavFlyoutCustomEvent, type ScaleTextFieldCustomEvent, type ScaleTextareaCustomEvent, type ScaleToggleButtonCustomEvent, type ScaleToggleGroupCustomEvent, type ScaleTooltipCustomEvent } from "@telekom/scale-components";
+import type { JSX } from "@telekom/scale-components/dist/components";
+import { AppLogo as AppLogoElement } from "@telekom/scale-components/dist/components/app-logo.js";
+import { AppMegaMenu as AppMegaMenuElement } from "@telekom/scale-components/dist/components/app-mega-menu.js";
+import { AppNavigationMainMobile as AppNavigationMainMobileElement } from "@telekom/scale-components/dist/components/app-navigation-main-mobile.js";
+import { AppNavigationSectorMobile as AppNavigationSectorMobileElement } from "@telekom/scale-components/dist/components/app-navigation-sector-mobile.js";
+import { AppNavigationUserMenu as AppNavigationUserMenuElement } from "@telekom/scale-components/dist/components/app-navigation-user-menu.js";
+import { ScaleAccordion as ScaleAccordionElement } from "@telekom/scale-components/dist/components/scale-accordion.js";
+import { ScaleAlert as ScaleAlertElement } from "@telekom/scale-components/dist/components/scale-alert.js";
+import { ScaleAppFooter as ScaleAppFooterElement } from "@telekom/scale-components/dist/components/scale-app-footer.js";
+import { ScaleAppHeader as ScaleAppHeaderElement } from "@telekom/scale-components/dist/components/scale-app-header.js";
+import { ScaleAppShell as ScaleAppShellElement } from "@telekom/scale-components/dist/components/scale-app-shell.js";
+import { ScaleBadge as ScaleBadgeElement } from "@telekom/scale-components/dist/components/scale-badge.js";
+import { ScaleBreadcrumb as ScaleBreadcrumbElement } from "@telekom/scale-components/dist/components/scale-breadcrumb.js";
+import { ScaleButton as ScaleButtonElement } from "@telekom/scale-components/dist/components/scale-button.js";
+import { ScaleCallout as ScaleCalloutElement } from "@telekom/scale-components/dist/components/scale-callout.js";
+import { ScaleCard as ScaleCardElement } from "@telekom/scale-components/dist/components/scale-card.js";
+import { ScaleCarousel as ScaleCarouselElement } from "@telekom/scale-components/dist/components/scale-carousel.js";
+import { ScaleChartStackCard as ScaleChartStackCardElement } from "@telekom/scale-components/dist/components/scale-chart-stack-card.js";
+import { ScaleCheckboxGroup as ScaleCheckboxGroupElement } from "@telekom/scale-components/dist/components/scale-checkbox-group.js";
+import { ScaleCheckbox as ScaleCheckboxElement } from "@telekom/scale-components/dist/components/scale-checkbox.js";
+import { ScaleChip as ScaleChipElement } from "@telekom/scale-components/dist/components/scale-chip.js";
+import { ScaleCollapsible as ScaleCollapsibleElement } from "@telekom/scale-components/dist/components/scale-collapsible.js";
+import { ScaleCombobox as ScaleComboboxElement } from "@telekom/scale-components/dist/components/scale-combobox.js";
+import { ScaleDataGrid as ScaleDataGridElement } from "@telekom/scale-components/dist/components/scale-data-grid.js";
+import { ScaleDatePicker as ScaleDatePickerElement } from "@telekom/scale-components/dist/components/scale-date-picker.js";
+import { ScaleDivider as ScaleDividerElement } from "@telekom/scale-components/dist/components/scale-divider.js";
+import { ScaleDropdownSelectItem as ScaleDropdownSelectItemElement } from "@telekom/scale-components/dist/components/scale-dropdown-select-item.js";
+import { ScaleDropdownSelect as ScaleDropdownSelectElement } from "@telekom/scale-components/dist/components/scale-dropdown-select.js";
+import { ScaleDropdown as ScaleDropdownElement } from "@telekom/scale-components/dist/components/scale-dropdown.js";
+import { ScaleGridItem as ScaleGridItemElement } from "@telekom/scale-components/dist/components/scale-grid-item.js";
+import { ScaleGrid as ScaleGridElement } from "@telekom/scale-components/dist/components/scale-grid.js";
+import { ScaleHelperText as ScaleHelperTextElement } from "@telekom/scale-components/dist/components/scale-helper-text.js";
+import { ScaleIconActionAddCard as ScaleIconActionAddCardElement } from "@telekom/scale-components/dist/components/scale-icon-action-add-card.js";
+import { ScaleIconActionAdd as ScaleIconActionAddElement } from "@telekom/scale-components/dist/components/scale-icon-action-add.js";
+import { ScaleIconActionArrange as ScaleIconActionArrangeElement } from "@telekom/scale-components/dist/components/scale-icon-action-arrange.js";
+import { ScaleIconActionArrowDown as ScaleIconActionArrowDownElement } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-down.js";
+import { ScaleIconActionArrowLeft as ScaleIconActionArrowLeftElement } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-left.js";
+import { ScaleIconActionArrowRight as ScaleIconActionArrowRightElement } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-right.js";
+import { ScaleIconActionArrowUp as ScaleIconActionArrowUpElement } from "@telekom/scale-components/dist/components/scale-icon-action-arrow-up.js";
+import { ScaleIconActionAutoLogin as ScaleIconActionAutoLoginElement } from "@telekom/scale-components/dist/components/scale-icon-action-auto-login.js";
+import { ScaleIconActionBackspace as ScaleIconActionBackspaceElement } from "@telekom/scale-components/dist/components/scale-icon-action-backspace.js";
+import { ScaleIconActionBackward as ScaleIconActionBackwardElement } from "@telekom/scale-components/dist/components/scale-icon-action-backward.js";
+import { ScaleIconActionChangelog as ScaleIconActionChangelogElement } from "@telekom/scale-components/dist/components/scale-icon-action-changelog.js";
+import { ScaleIconActionCheckmark as ScaleIconActionCheckmarkElement } from "@telekom/scale-components/dist/components/scale-icon-action-checkmark.js";
+import { ScaleIconActionCircleAdd as ScaleIconActionCircleAddElement } from "@telekom/scale-components/dist/components/scale-icon-action-circle-add.js";
+import { ScaleIconActionCircleClose as ScaleIconActionCircleCloseElement } from "@telekom/scale-components/dist/components/scale-icon-action-circle-close.js";
+import { ScaleIconActionClose as ScaleIconActionCloseElement } from "@telekom/scale-components/dist/components/scale-icon-action-close.js";
+import { ScaleIconActionCompare as ScaleIconActionCompareElement } from "@telekom/scale-components/dist/components/scale-icon-action-compare.js";
+import { ScaleIconActionCopyPaste as ScaleIconActionCopyPasteElement } from "@telekom/scale-components/dist/components/scale-icon-action-copy-paste.js";
+import { ScaleIconActionCutPaste as ScaleIconActionCutPasteElement } from "@telekom/scale-components/dist/components/scale-icon-action-cut-paste.js";
+import { ScaleIconActionDisabledMicrophone as ScaleIconActionDisabledMicrophoneElement } from "@telekom/scale-components/dist/components/scale-icon-action-disabled-microphone.js";
+import { ScaleIconActionDownloadFromCloud as ScaleIconActionDownloadFromCloudElement } from "@telekom/scale-components/dist/components/scale-icon-action-download-from-cloud.js";
+import { ScaleIconActionDownload as ScaleIconActionDownloadElement } from "@telekom/scale-components/dist/components/scale-icon-action-download.js";
+import { ScaleIconActionDragAndDrop as ScaleIconActionDragAndDropElement } from "@telekom/scale-components/dist/components/scale-icon-action-drag-and-drop.js";
+import { ScaleIconActionEdit as ScaleIconActionEditElement } from "@telekom/scale-components/dist/components/scale-icon-action-edit.js";
+import { ScaleIconActionExport as ScaleIconActionExportElement } from "@telekom/scale-components/dist/components/scale-icon-action-export.js";
+import { ScaleIconActionFastForwardNb as ScaleIconActionFastForwardNbElement } from "@telekom/scale-components/dist/components/scale-icon-action-fast-forward-nb.js";
+import { ScaleIconActionFastForward as ScaleIconActionFastForwardElement } from "@telekom/scale-components/dist/components/scale-icon-action-fast-forward.js";
+import { ScaleIconActionFavorite as ScaleIconActionFavoriteElement } from "@telekom/scale-components/dist/components/scale-icon-action-favorite.js";
+import { ScaleIconActionFilter2 as ScaleIconActionFilter2Element } from "@telekom/scale-components/dist/components/scale-icon-action-filter-2.js";
+import { ScaleIconActionFilter as ScaleIconActionFilterElement } from "@telekom/scale-components/dist/components/scale-icon-action-filter.js";
+import { ScaleIconActionForward as ScaleIconActionForwardElement } from "@telekom/scale-components/dist/components/scale-icon-action-forward.js";
+import { ScaleIconActionFullScreen as ScaleIconActionFullScreenElement } from "@telekom/scale-components/dist/components/scale-icon-action-full-screen.js";
+import { ScaleIconActionHidePassword as ScaleIconActionHidePasswordElement } from "@telekom/scale-components/dist/components/scale-icon-action-hide-password.js";
+import { ScaleIconActionImport as ScaleIconActionImportElement } from "@telekom/scale-components/dist/components/scale-icon-action-import.js";
+import { ScaleIconActionInstall as ScaleIconActionInstallElement } from "@telekom/scale-components/dist/components/scale-icon-action-install.js";
+import { ScaleIconActionLaunch as ScaleIconActionLaunchElement } from "@telekom/scale-components/dist/components/scale-icon-action-launch.js";
+import { ScaleIconActionLightDarkMode as ScaleIconActionLightDarkModeElement } from "@telekom/scale-components/dist/components/scale-icon-action-light-dark-mode.js";
+import { ScaleIconActionLink as ScaleIconActionLinkElement } from "@telekom/scale-components/dist/components/scale-icon-action-link.js";
+import { ScaleIconActionLogout as ScaleIconActionLogoutElement } from "@telekom/scale-components/dist/components/scale-icon-action-logout.js";
+import { ScaleIconActionLoop as ScaleIconActionLoopElement } from "@telekom/scale-components/dist/components/scale-icon-action-loop.js";
+import { ScaleIconActionMenu as ScaleIconActionMenuElement } from "@telekom/scale-components/dist/components/scale-icon-action-menu.js";
+import { ScaleIconActionMicrophone as ScaleIconActionMicrophoneElement } from "@telekom/scale-components/dist/components/scale-icon-action-microphone.js";
+import { ScaleIconActionMinimizeScreen as ScaleIconActionMinimizeScreenElement } from "@telekom/scale-components/dist/components/scale-icon-action-minimize-screen.js";
+import { ScaleIconActionMinusCircle as ScaleIconActionMinusCircleElement } from "@telekom/scale-components/dist/components/scale-icon-action-minus-circle.js";
+import { ScaleIconActionMinus as ScaleIconActionMinusElement } from "@telekom/scale-components/dist/components/scale-icon-action-minus.js";
+import { ScaleIconActionMore as ScaleIconActionMoreElement } from "@telekom/scale-components/dist/components/scale-icon-action-more.js";
+import { ScaleIconActionMove as ScaleIconActionMoveElement } from "@telekom/scale-components/dist/components/scale-icon-action-move.js";
+import { ScaleIconActionMute as ScaleIconActionMuteElement } from "@telekom/scale-components/dist/components/scale-icon-action-mute.js";
+import { ScaleIconActionNotification as ScaleIconActionNotificationElement } from "@telekom/scale-components/dist/components/scale-icon-action-notification.js";
+import { ScaleIconActionPauseNb as ScaleIconActionPauseNbElement } from "@telekom/scale-components/dist/components/scale-icon-action-pause-nb.js";
+import { ScaleIconActionPause as ScaleIconActionPauseElement } from "@telekom/scale-components/dist/components/scale-icon-action-pause.js";
+import { ScaleIconActionPin as ScaleIconActionPinElement } from "@telekom/scale-components/dist/components/scale-icon-action-pin.js";
+import { ScaleIconActionPlayNb as ScaleIconActionPlayNbElement } from "@telekom/scale-components/dist/components/scale-icon-action-play-nb.js";
+import { ScaleIconActionPlay as ScaleIconActionPlayElement } from "@telekom/scale-components/dist/components/scale-icon-action-play.js";
+import { ScaleIconActionPopUpWindow as ScaleIconActionPopUpWindowElement } from "@telekom/scale-components/dist/components/scale-icon-action-pop-up-window.js";
+import { ScaleIconActionPower as ScaleIconActionPowerElement } from "@telekom/scale-components/dist/components/scale-icon-action-power.js";
+import { ScaleIconActionPreviousNb as ScaleIconActionPreviousNbElement } from "@telekom/scale-components/dist/components/scale-icon-action-previous-nb.js";
+import { ScaleIconActionPrint as ScaleIconActionPrintElement } from "@telekom/scale-components/dist/components/scale-icon-action-print.js";
+import { ScaleIconActionPublish as ScaleIconActionPublishElement } from "@telekom/scale-components/dist/components/scale-icon-action-publish.js";
+import { ScaleIconActionRandom as ScaleIconActionRandomElement } from "@telekom/scale-components/dist/components/scale-icon-action-random.js";
+import { ScaleIconActionRecordNb as ScaleIconActionRecordNbElement } from "@telekom/scale-components/dist/components/scale-icon-action-record-nb.js";
+import { ScaleIconActionRefresh as ScaleIconActionRefreshElement } from "@telekom/scale-components/dist/components/scale-icon-action-refresh.js";
+import { ScaleIconActionRemove as ScaleIconActionRemoveElement } from "@telekom/scale-components/dist/components/scale-icon-action-remove.js";
+import { ScaleIconActionReplyAll as ScaleIconActionReplyAllElement } from "@telekom/scale-components/dist/components/scale-icon-action-reply-all.js";
+import { ScaleIconActionReplyForward as ScaleIconActionReplyForwardElement } from "@telekom/scale-components/dist/components/scale-icon-action-reply-forward.js";
+import { ScaleIconActionReply as ScaleIconActionReplyElement } from "@telekom/scale-components/dist/components/scale-icon-action-reply.js";
+import { ScaleIconActionRestart as ScaleIconActionRestartElement } from "@telekom/scale-components/dist/components/scale-icon-action-restart.js";
+import { ScaleIconActionSearch as ScaleIconActionSearchElement } from "@telekom/scale-components/dist/components/scale-icon-action-search.js";
+import { ScaleIconActionSend as ScaleIconActionSendElement } from "@telekom/scale-components/dist/components/scale-icon-action-send.js";
+import { ScaleIconActionShare as ScaleIconActionShareElement } from "@telekom/scale-components/dist/components/scale-icon-action-share.js";
+import { ScaleIconActionShoppingCart as ScaleIconActionShoppingCartElement } from "@telekom/scale-components/dist/components/scale-icon-action-shopping-cart.js";
+import { ScaleIconActionShowPassword as ScaleIconActionShowPasswordElement } from "@telekom/scale-components/dist/components/scale-icon-action-show-password.js";
+import { ScaleIconActionSort as ScaleIconActionSortElement } from "@telekom/scale-components/dist/components/scale-icon-action-sort.js";
+import { ScaleIconActionSoundOn as ScaleIconActionSoundOnElement } from "@telekom/scale-components/dist/components/scale-icon-action-sound-on.js";
+import { ScaleIconActionStar as ScaleIconActionStarElement } from "@telekom/scale-components/dist/components/scale-icon-action-star.js";
+import { ScaleIconActionStreamOn as ScaleIconActionStreamOnElement } from "@telekom/scale-components/dist/components/scale-icon-action-stream-on.js";
+import { ScaleIconActionSuccess as ScaleIconActionSuccessElement } from "@telekom/scale-components/dist/components/scale-icon-action-success.js";
+import { ScaleIconActionThumbsDown as ScaleIconActionThumbsDownElement } from "@telekom/scale-components/dist/components/scale-icon-action-thumbs-down.js";
+import { ScaleIconActionThumbsUp as ScaleIconActionThumbsUpElement } from "@telekom/scale-components/dist/components/scale-icon-action-thumbs-up.js";
+import { ScaleIconActionTilesAdd as ScaleIconActionTilesAddElement } from "@telekom/scale-components/dist/components/scale-icon-action-tiles-add.js";
+import { ScaleIconActionUploadToCloud as ScaleIconActionUploadToCloudElement } from "@telekom/scale-components/dist/components/scale-icon-action-upload-to-cloud.js";
+import { ScaleIconActionUpload as ScaleIconActionUploadElement } from "@telekom/scale-components/dist/components/scale-icon-action-upload.js";
+import { ScaleIconActionVolumeDown as ScaleIconActionVolumeDownElement } from "@telekom/scale-components/dist/components/scale-icon-action-volume-down.js";
+import { ScaleIconActionVolumeUp as ScaleIconActionVolumeUpElement } from "@telekom/scale-components/dist/components/scale-icon-action-volume-up.js";
+import { ScaleIconActionZoomIn as ScaleIconActionZoomInElement } from "@telekom/scale-components/dist/components/scale-icon-action-zoom-in.js";
+import { ScaleIconActionZoomOut as ScaleIconActionZoomOutElement } from "@telekom/scale-components/dist/components/scale-icon-action-zoom-out.js";
+import { ScaleIconAlertAntivirusProtection as ScaleIconAlertAntivirusProtectionElement } from "@telekom/scale-components/dist/components/scale-icon-alert-antivirus-protection.js";
+import { ScaleIconAlertCompliance as ScaleIconAlertComplianceElement } from "@telekom/scale-components/dist/components/scale-icon-alert-compliance.js";
+import { ScaleIconAlertCyberSecurity as ScaleIconAlertCyberSecurityElement } from "@telekom/scale-components/dist/components/scale-icon-alert-cyber-security.js";
+import { ScaleIconAlertError as ScaleIconAlertErrorElement } from "@telekom/scale-components/dist/components/scale-icon-alert-error.js";
+import { ScaleIconAlertHelp as ScaleIconAlertHelpElement } from "@telekom/scale-components/dist/components/scale-icon-alert-help.js";
+import { ScaleIconAlertHighPriorityEmail as ScaleIconAlertHighPriorityEmailElement } from "@telekom/scale-components/dist/components/scale-icon-alert-high-priority-email.js";
+import { ScaleIconAlertImprintDataprivacy as ScaleIconAlertImprintDataprivacyElement } from "@telekom/scale-components/dist/components/scale-icon-alert-imprint-dataprivacy.js";
+import { ScaleIconAlertInformation as ScaleIconAlertInformationElement } from "@telekom/scale-components/dist/components/scale-icon-alert-information.js";
+import { ScaleIconAlertLegal as ScaleIconAlertLegalElement } from "@telekom/scale-components/dist/components/scale-icon-alert-legal.js";
+import { ScaleIconAlertNetworkDisrupted as ScaleIconAlertNetworkDisruptedElement } from "@telekom/scale-components/dist/components/scale-icon-alert-network-disrupted.js";
+import { ScaleIconAlertPasswordBreaking as ScaleIconAlertPasswordBreakingElement } from "@telekom/scale-components/dist/components/scale-icon-alert-password-breaking.js";
+import { ScaleIconAlertSecurity as ScaleIconAlertSecurityElement } from "@telekom/scale-components/dist/components/scale-icon-alert-security.js";
+import { ScaleIconAlertTrafficDisruption as ScaleIconAlertTrafficDisruptionElement } from "@telekom/scale-components/dist/components/scale-icon-alert-traffic-disruption.js";
+import { ScaleIconAlertUnknown as ScaleIconAlertUnknownElement } from "@telekom/scale-components/dist/components/scale-icon-alert-unknown.js";
+import { ScaleIconAlertWarning as ScaleIconAlertWarningElement } from "@telekom/scale-components/dist/components/scale-icon-alert-warning.js";
+import { ScaleIconCommunicationAvailable as ScaleIconCommunicationAvailableElement } from "@telekom/scale-components/dist/components/scale-icon-communication-available.js";
+import { ScaleIconCommunicationBlog as ScaleIconCommunicationBlogElement } from "@telekom/scale-components/dist/components/scale-icon-communication-blog.js";
+import { ScaleIconCommunicationCallIncoming as ScaleIconCommunicationCallIncomingElement } from "@telekom/scale-components/dist/components/scale-icon-communication-call-incoming.js";
+import { ScaleIconCommunicationCallOutgoing as ScaleIconCommunicationCallOutgoingElement } from "@telekom/scale-components/dist/components/scale-icon-communication-call-outgoing.js";
+import { ScaleIconCommunicationChatBadge as ScaleIconCommunicationChatBadgeElement } from "@telekom/scale-components/dist/components/scale-icon-communication-chat-badge.js";
+import { ScaleIconCommunicationChat as ScaleIconCommunicationChatElement } from "@telekom/scale-components/dist/components/scale-icon-communication-chat.js";
+import { ScaleIconCommunicationEmail as ScaleIconCommunicationEmailElement } from "@telekom/scale-components/dist/components/scale-icon-communication-email.js";
+import { ScaleIconCommunicationEndCall as ScaleIconCommunicationEndCallElement } from "@telekom/scale-components/dist/components/scale-icon-communication-end-call.js";
+import { ScaleIconCommunicationFeedback as ScaleIconCommunicationFeedbackElement } from "@telekom/scale-components/dist/components/scale-icon-communication-feedback.js";
+import { ScaleIconCommunicationFlightMode as ScaleIconCommunicationFlightModeElement } from "@telekom/scale-components/dist/components/scale-icon-communication-flight-mode.js";
+import { ScaleIconCommunicationHappyPerson as ScaleIconCommunicationHappyPersonElement } from "@telekom/scale-components/dist/components/scale-icon-communication-happy-person.js";
+import { ScaleIconCommunicationInbox as ScaleIconCommunicationInboxElement } from "@telekom/scale-components/dist/components/scale-icon-communication-inbox.js";
+import { ScaleIconCommunicationLandingMobileContactClient as ScaleIconCommunicationLandingMobileContactClientElement } from "@telekom/scale-components/dist/components/scale-icon-communication-landing-mobile-contact-client.js";
+import { ScaleIconCommunicationLoyaltyEarned as ScaleIconCommunicationLoyaltyEarnedElement } from "@telekom/scale-components/dist/components/scale-icon-communication-loyalty-earned.js";
+import { ScaleIconCommunicationLoyaltyLost as ScaleIconCommunicationLoyaltyLostElement } from "@telekom/scale-components/dist/components/scale-icon-communication-loyalty-lost.js";
+import { ScaleIconCommunicationMailOpened as ScaleIconCommunicationMailOpenedElement } from "@telekom/scale-components/dist/components/scale-icon-communication-mail-opened.js";
+import { ScaleIconCommunicationMessageIncoming as ScaleIconCommunicationMessageIncomingElement } from "@telekom/scale-components/dist/components/scale-icon-communication-message-incoming.js";
+import { ScaleIconCommunicationMessageOutgoing as ScaleIconCommunicationMessageOutgoingElement } from "@telekom/scale-components/dist/components/scale-icon-communication-message-outgoing.js";
+import { ScaleIconCommunicationMessage as ScaleIconCommunicationMessageElement } from "@telekom/scale-components/dist/components/scale-icon-communication-message.js";
+import { ScaleIconCommunicationMmsIncoming as ScaleIconCommunicationMmsIncomingElement } from "@telekom/scale-components/dist/components/scale-icon-communication-mms-incoming.js";
+import { ScaleIconCommunicationMmsOutgoing as ScaleIconCommunicationMmsOutgoingElement } from "@telekom/scale-components/dist/components/scale-icon-communication-mms-outgoing.js";
+import { ScaleIconCommunicationMobilePhoneNumber as ScaleIconCommunicationMobilePhoneNumberElement } from "@telekom/scale-components/dist/components/scale-icon-communication-mobile-phone-number.js";
+import { ScaleIconCommunicationNetworkSignal as ScaleIconCommunicationNetworkSignalElement } from "@telekom/scale-components/dist/components/scale-icon-communication-network-signal.js";
+import { ScaleIconCommunicationNewEmail as ScaleIconCommunicationNewEmailElement } from "@telekom/scale-components/dist/components/scale-icon-communication-new-email.js";
+import { ScaleIconCommunicationOutbox as ScaleIconCommunicationOutboxElement } from "@telekom/scale-components/dist/components/scale-icon-communication-outbox.js";
+import { ScaleIconCommunicationPhoneNumber as ScaleIconCommunicationPhoneNumberElement } from "@telekom/scale-components/dist/components/scale-icon-communication-phone-number.js";
+import { ScaleIconCommunicationRecipient as ScaleIconCommunicationRecipientElement } from "@telekom/scale-components/dist/components/scale-icon-communication-recipient.js";
+import { ScaleIconCommunicationSaveEmailsToDrafts as ScaleIconCommunicationSaveEmailsToDraftsElement } from "@telekom/scale-components/dist/components/scale-icon-communication-save-emails-to-drafts.js";
+import { ScaleIconCommunicationSms as ScaleIconCommunicationSmsElement } from "@telekom/scale-components/dist/components/scale-icon-communication-sms.js";
+import { ScaleIconCommunicationSpam as ScaleIconCommunicationSpamElement } from "@telekom/scale-components/dist/components/scale-icon-communication-spam.js";
+import { ScaleIconCommunicationVoiceMessage as ScaleIconCommunicationVoiceMessageElement } from "@telekom/scale-components/dist/components/scale-icon-communication-voice-message.js";
+import { ScaleIconContent2faGoogleAuth as ScaleIconContent2faGoogleAuthElement } from "@telekom/scale-components/dist/components/scale-icon-content-2fa-google-auth.js";
+import { ScaleIconContentAchievement as ScaleIconContentAchievementElement } from "@telekom/scale-components/dist/components/scale-icon-content-achievement.js";
+import { ScaleIconContentAndroid as ScaleIconContentAndroidElement } from "@telekom/scale-components/dist/components/scale-icon-content-android.js";
+import { ScaleIconContentApple as ScaleIconContentAppleElement } from "@telekom/scale-components/dist/components/scale-icon-content-apple.js";
+import { ScaleIconContentApplications as ScaleIconContentApplicationsElement } from "@telekom/scale-components/dist/components/scale-icon-content-applications.js";
+import { ScaleIconContentAvailableKeychain as ScaleIconContentAvailableKeychainElement } from "@telekom/scale-components/dist/components/scale-icon-content-available-keychain.js";
+import { ScaleIconContentBank as ScaleIconContentBankElement } from "@telekom/scale-components/dist/components/scale-icon-content-bank.js";
+import { ScaleIconContentBiometric as ScaleIconContentBiometricElement } from "@telekom/scale-components/dist/components/scale-icon-content-biometric.js";
+import { ScaleIconContentBirthday as ScaleIconContentBirthdayElement } from "@telekom/scale-components/dist/components/scale-icon-content-birthday.js";
+import { ScaleIconContentBookmark as ScaleIconContentBookmarkElement } from "@telekom/scale-components/dist/components/scale-icon-content-bookmark.js";
+import { ScaleIconContentCalendar as ScaleIconContentCalendarElement } from "@telekom/scale-components/dist/components/scale-icon-content-calendar.js";
+import { ScaleIconContentClipboard as ScaleIconContentClipboardElement } from "@telekom/scale-components/dist/components/scale-icon-content-clipboard.js";
+import { ScaleIconContentClock as ScaleIconContentClockElement } from "@telekom/scale-components/dist/components/scale-icon-content-clock.js";
+import { ScaleIconContentCloudSecurity as ScaleIconContentCloudSecurityElement } from "@telekom/scale-components/dist/components/scale-icon-content-cloud-security.js";
+import { ScaleIconContentCodeScanner as ScaleIconContentCodeScannerElement } from "@telekom/scale-components/dist/components/scale-icon-content-code-scanner.js";
+import { ScaleIconContentColorSelection as ScaleIconContentColorSelectionElement } from "@telekom/scale-components/dist/components/scale-icon-content-color-selection.js";
+import { ScaleIconContentCountry as ScaleIconContentCountryElement } from "@telekom/scale-components/dist/components/scale-icon-content-country.js";
+import { ScaleIconContentCreditCard as ScaleIconContentCreditCardElement } from "@telekom/scale-components/dist/components/scale-icon-content-credit-card.js";
+import { ScaleIconContentDataVisualisation as ScaleIconContentDataVisualisationElement } from "@telekom/scale-components/dist/components/scale-icon-content-data-visualisation.js";
+import { ScaleIconContentDelivery as ScaleIconContentDeliveryElement } from "@telekom/scale-components/dist/components/scale-icon-content-delivery.js";
+import { ScaleIconContentDigitalBanking as ScaleIconContentDigitalBankingElement } from "@telekom/scale-components/dist/components/scale-icon-content-digital-banking.js";
+import { ScaleIconContentDigitalMedia as ScaleIconContentDigitalMediaElement } from "@telekom/scale-components/dist/components/scale-icon-content-digital-media.js";
+import { ScaleIconContentDiscount as ScaleIconContentDiscountElement } from "@telekom/scale-components/dist/components/scale-icon-content-discount.js";
+import { ScaleIconContentESim as ScaleIconContentESimElement } from "@telekom/scale-components/dist/components/scale-icon-content-e-sim.js";
+import { ScaleIconContentEu as ScaleIconContentEuElement } from "@telekom/scale-components/dist/components/scale-icon-content-eu.js";
+import { ScaleIconContentFaceMask as ScaleIconContentFaceMaskElement } from "@telekom/scale-components/dist/components/scale-icon-content-face-mask.js";
+import { ScaleIconContentFeatures as ScaleIconContentFeaturesElement } from "@telekom/scale-components/dist/components/scale-icon-content-features.js";
+import { ScaleIconContentFlexibleTariffs as ScaleIconContentFlexibleTariffsElement } from "@telekom/scale-components/dist/components/scale-icon-content-flexible-tariffs.js";
+import { ScaleIconContentFolder as ScaleIconContentFolderElement } from "@telekom/scale-components/dist/components/scale-icon-content-folder.js";
+import { ScaleIconContentFood as ScaleIconContentFoodElement } from "@telekom/scale-components/dist/components/scale-icon-content-food.js";
+import { ScaleIconContentGenderDiverse as ScaleIconContentGenderDiverseElement } from "@telekom/scale-components/dist/components/scale-icon-content-gender-diverse.js";
+import { ScaleIconContentGenderFemale as ScaleIconContentGenderFemaleElement } from "@telekom/scale-components/dist/components/scale-icon-content-gender-female.js";
+import { ScaleIconContentGenderMale as ScaleIconContentGenderMaleElement } from "@telekom/scale-components/dist/components/scale-icon-content-gender-male.js";
+import { ScaleIconContentHalfRating as ScaleIconContentHalfRatingElement } from "@telekom/scale-components/dist/components/scale-icon-content-half-rating.js";
+import { ScaleIconContentHeart as ScaleIconContentHeartElement } from "@telekom/scale-components/dist/components/scale-icon-content-heart.js";
+import { ScaleIconContentHeight as ScaleIconContentHeightElement } from "@telekom/scale-components/dist/components/scale-icon-content-height.js";
+import { ScaleIconContentHistory as ScaleIconContentHistoryElement } from "@telekom/scale-components/dist/components/scale-icon-content-history.js";
+import { ScaleIconContentHourGlass as ScaleIconContentHourGlassElement } from "@telekom/scale-components/dist/components/scale-icon-content-hour-glass.js";
+import { ScaleIconContentIban as ScaleIconContentIbanElement } from "@telekom/scale-components/dist/components/scale-icon-content-iban.js";
+import { ScaleIconContentId as ScaleIconContentIdElement } from "@telekom/scale-components/dist/components/scale-icon-content-id.js";
+import { ScaleIconContentInStock as ScaleIconContentInStockElement } from "@telekom/scale-components/dist/components/scale-icon-content-in-stock.js";
+import { ScaleIconContentInternationalSms as ScaleIconContentInternationalSmsElement } from "@telekom/scale-components/dist/components/scale-icon-content-international-sms.js";
+import { ScaleIconContentInternational as ScaleIconContentInternationalElement } from "@telekom/scale-components/dist/components/scale-icon-content-international.js";
+import { ScaleIconContentInterview as ScaleIconContentInterviewElement } from "@telekom/scale-components/dist/components/scale-icon-content-interview.js";
+import { ScaleIconContentKey as ScaleIconContentKeyElement } from "@telekom/scale-components/dist/components/scale-icon-content-key.js";
+import { ScaleIconContentLanguage as ScaleIconContentLanguageElement } from "@telekom/scale-components/dist/components/scale-icon-content-language.js";
+import { ScaleIconContentLock as ScaleIconContentLockElement } from "@telekom/scale-components/dist/components/scale-icon-content-lock.js";
+import { ScaleIconContentLoyalty as ScaleIconContentLoyaltyElement } from "@telekom/scale-components/dist/components/scale-icon-content-loyalty.js";
+import { ScaleIconContentMediaFolder as ScaleIconContentMediaFolderElement } from "@telekom/scale-components/dist/components/scale-icon-content-media-folder.js";
+import { ScaleIconContentMoneyAt as ScaleIconContentMoneyAtElement } from "@telekom/scale-components/dist/components/scale-icon-content-money-at.js";
+import { ScaleIconContentMusic as ScaleIconContentMusicElement } from "@telekom/scale-components/dist/components/scale-icon-content-music.js";
+import { ScaleIconContentNews as ScaleIconContentNewsElement } from "@telekom/scale-components/dist/components/scale-icon-content-news.js";
+import { ScaleIconContentOutOfStock as ScaleIconContentOutOfStockElement } from "@telekom/scale-components/dist/components/scale-icon-content-out-of-stock.js";
+import { ScaleIconContentPersonWalking as ScaleIconContentPersonWalkingElement } from "@telekom/scale-components/dist/components/scale-icon-content-person-walking.js";
+import { ScaleIconContentPrepaidActivate as ScaleIconContentPrepaidActivateElement } from "@telekom/scale-components/dist/components/scale-icon-content-prepaid-activate.js";
+import { ScaleIconContentPriceTag as ScaleIconContentPriceTagElement } from "@telekom/scale-components/dist/components/scale-icon-content-price-tag.js";
+import { ScaleIconContentRatings as ScaleIconContentRatingsElement } from "@telekom/scale-components/dist/components/scale-icon-content-ratings.js";
+import { ScaleIconContentRoute as ScaleIconContentRouteElement } from "@telekom/scale-components/dist/components/scale-icon-content-route.js";
+import { ScaleIconContentRss as ScaleIconContentRssElement } from "@telekom/scale-components/dist/components/scale-icon-content-rss.js";
+import { ScaleIconContentShop as ScaleIconContentShopElement } from "@telekom/scale-components/dist/components/scale-icon-content-shop.js";
+import { ScaleIconContentSignal as ScaleIconContentSignalElement } from "@telekom/scale-components/dist/components/scale-icon-content-signal.js";
+import { ScaleIconContentSimCard as ScaleIconContentSimCardElement } from "@telekom/scale-components/dist/components/scale-icon-content-sim-card.js";
+import { ScaleIconContentSmile as ScaleIconContentSmileElement } from "@telekom/scale-components/dist/components/scale-icon-content-smile.js";
+import { ScaleIconContentSortIndicatorDown as ScaleIconContentSortIndicatorDownElement } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-down.js";
+import { ScaleIconContentSortIndicatorMiniDown as ScaleIconContentSortIndicatorMiniDownElement } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-mini-down.js";
+import { ScaleIconContentSortIndicatorUpMini as ScaleIconContentSortIndicatorUpMiniElement } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-up-mini.js";
+import { ScaleIconContentSortIndicatorUp as ScaleIconContentSortIndicatorUpElement } from "@telekom/scale-components/dist/components/scale-icon-content-sort-indicator-up.js";
+import { ScaleIconContentStatusInactive as ScaleIconContentStatusInactiveElement } from "@telekom/scale-components/dist/components/scale-icon-content-status-inactive.js";
+import { ScaleIconContentStatusRecurring as ScaleIconContentStatusRecurringElement } from "@telekom/scale-components/dist/components/scale-icon-content-status-recurring.js";
+import { ScaleIconContentStopwatch as ScaleIconContentStopwatchElement } from "@telekom/scale-components/dist/components/scale-icon-content-stopwatch.js";
+import { ScaleIconContentSupportChat as ScaleIconContentSupportChatElement } from "@telekom/scale-components/dist/components/scale-icon-content-support-chat.js";
+import { ScaleIconContentSustainable as ScaleIconContentSustainableElement } from "@telekom/scale-components/dist/components/scale-icon-content-sustainable.js";
+import { ScaleIconContentTariffs as ScaleIconContentTariffsElement } from "@telekom/scale-components/dist/components/scale-icon-content-tariffs.js";
+import { ScaleIconContentThreats as ScaleIconContentThreatsElement } from "@telekom/scale-components/dist/components/scale-icon-content-threats.js";
+import { ScaleIconContentTodoList as ScaleIconContentTodoListElement } from "@telekom/scale-components/dist/components/scale-icon-content-todo-list.js";
+import { ScaleIconContentTransport as ScaleIconContentTransportElement } from "@telekom/scale-components/dist/components/scale-icon-content-transport.js";
+import { ScaleIconContentUnlock as ScaleIconContentUnlockElement } from "@telekom/scale-components/dist/components/scale-icon-content-unlock.js";
+import { ScaleIconContentVoucher as ScaleIconContentVoucherElement } from "@telekom/scale-components/dist/components/scale-icon-content-voucher.js";
+import { ScaleIconContentWaiting as ScaleIconContentWaitingElement } from "@telekom/scale-components/dist/components/scale-icon-content-waiting.js";
+import { ScaleIconContentWallet as ScaleIconContentWalletElement } from "@telekom/scale-components/dist/components/scale-icon-content-wallet.js";
+import { ScaleIconDeviceAddDevice as ScaleIconDeviceAddDeviceElement } from "@telekom/scale-components/dist/components/scale-icon-device-add-device.js";
+import { ScaleIconDeviceCamera as ScaleIconDeviceCameraElement } from "@telekom/scale-components/dist/components/scale-icon-device-camera.js";
+import { ScaleIconDeviceChangeCamera as ScaleIconDeviceChangeCameraElement } from "@telekom/scale-components/dist/components/scale-icon-device-change-camera.js";
+import { ScaleIconDeviceComputer as ScaleIconDeviceComputerElement } from "@telekom/scale-components/dist/components/scale-icon-device-computer.js";
+import { ScaleIconDeviceDeviceController as ScaleIconDeviceDeviceControllerElement } from "@telekom/scale-components/dist/components/scale-icon-device-device-controller.js";
+import { ScaleIconDeviceDeviceEthernet as ScaleIconDeviceDeviceEthernetElement } from "@telekom/scale-components/dist/components/scale-icon-device-device-ethernet.js";
+import { ScaleIconDeviceDeviceMesh as ScaleIconDeviceDeviceMeshElement } from "@telekom/scale-components/dist/components/scale-icon-device-device-mesh.js";
+import { ScaleIconDeviceDevicePhone as ScaleIconDeviceDevicePhoneElement } from "@telekom/scale-components/dist/components/scale-icon-device-device-phone.js";
+import { ScaleIconDeviceDeviceRouter as ScaleIconDeviceDeviceRouterElement } from "@telekom/scale-components/dist/components/scale-icon-device-device-router.js";
+import { ScaleIconDeviceDeviceTv as ScaleIconDeviceDeviceTvElement } from "@telekom/scale-components/dist/components/scale-icon-device-device-tv.js";
+import { ScaleIconDeviceDeviceWatch as ScaleIconDeviceDeviceWatchElement } from "@telekom/scale-components/dist/components/scale-icon-device-device-watch.js";
+import { ScaleIconDeviceDongle as ScaleIconDeviceDongleElement } from "@telekom/scale-components/dist/components/scale-icon-device-dongle.js";
+import { ScaleIconDeviceFax as ScaleIconDeviceFaxElement } from "@telekom/scale-components/dist/components/scale-icon-device-fax.js";
+import { ScaleIconDeviceFixedLineServices as ScaleIconDeviceFixedLineServicesElement } from "@telekom/scale-components/dist/components/scale-icon-device-fixed-line-services.js";
+import { ScaleIconDeviceGameController as ScaleIconDeviceGameControllerElement } from "@telekom/scale-components/dist/components/scale-icon-device-game-controller.js";
+import { ScaleIconDeviceMediaReceiver as ScaleIconDeviceMediaReceiverElement } from "@telekom/scale-components/dist/components/scale-icon-device-media-receiver.js";
+import { ScaleIconDeviceMobileData as ScaleIconDeviceMobileDataElement } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-data.js";
+import { ScaleIconDeviceMobileDevicesCombination as ScaleIconDeviceMobileDevicesCombinationElement } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-devices-combination.js";
+import { ScaleIconDeviceMobileEquipment as ScaleIconDeviceMobileEquipmentElement } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-equipment.js";
+import { ScaleIconDeviceMobilePhoneInsurance as ScaleIconDeviceMobilePhoneInsuranceElement } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-phone-insurance.js";
+import { ScaleIconDeviceMobileServices as ScaleIconDeviceMobileServicesElement } from "@telekom/scale-components/dist/components/scale-icon-device-mobile-services.js";
+import { ScaleIconDeviceNoCamera as ScaleIconDeviceNoCameraElement } from "@telekom/scale-components/dist/components/scale-icon-device-no-camera.js";
+import { ScaleIconDevicePhoneWithMobilePlan as ScaleIconDevicePhoneWithMobilePlanElement } from "@telekom/scale-components/dist/components/scale-icon-device-phone-with-mobile-plan.js";
+import { ScaleIconDevicePhoneWithoutMobilePlan as ScaleIconDevicePhoneWithoutMobilePlanElement } from "@telekom/scale-components/dist/components/scale-icon-device-phone-without-mobile-plan.js";
+import { ScaleIconDevicePhotoCamera as ScaleIconDevicePhotoCameraElement } from "@telekom/scale-components/dist/components/scale-icon-device-photo-camera.js";
+import { ScaleIconDeviceRemoteController as ScaleIconDeviceRemoteControllerElement } from "@telekom/scale-components/dist/components/scale-icon-device-remote-controller.js";
+import { ScaleIconDeviceReplacementMobilephone as ScaleIconDeviceReplacementMobilephoneElement } from "@telekom/scale-components/dist/components/scale-icon-device-replacement-mobilephone.js";
+import { ScaleIconDeviceScreenRotate as ScaleIconDeviceScreenRotateElement } from "@telekom/scale-components/dist/components/scale-icon-device-screen-rotate.js";
+import { ScaleIconDeviceServer as ScaleIconDeviceServerElement } from "@telekom/scale-components/dist/components/scale-icon-device-server.js";
+import { ScaleIconDeviceSmartSpeaker as ScaleIconDeviceSmartSpeakerElement } from "@telekom/scale-components/dist/components/scale-icon-device-smart-speaker.js";
+import { ScaleIconDeviceTablet as ScaleIconDeviceTabletElement } from "@telekom/scale-components/dist/components/scale-icon-device-tablet.js";
+import { ScaleIconDeviceTvAndMobile as ScaleIconDeviceTvAndMobileElement } from "@telekom/scale-components/dist/components/scale-icon-device-tv-and-mobile.js";
+import { ScaleIconDeviceTwitchingClosedState as ScaleIconDeviceTwitchingClosedStateElement } from "@telekom/scale-components/dist/components/scale-icon-device-twitching-closed-state.js";
+import { ScaleIconDeviceTwitchingOpenState as ScaleIconDeviceTwitchingOpenStateElement } from "@telekom/scale-components/dist/components/scale-icon-device-twitching-open-state.js";
+import { ScaleIconHomeHome as ScaleIconHomeHomeElement } from "@telekom/scale-components/dist/components/scale-icon-home-home.js";
+import { ScaleIconHomeInternetAtHome as ScaleIconHomeInternetAtHomeElement } from "@telekom/scale-components/dist/components/scale-icon-home-internet-at-home.js";
+import { ScaleIconHomeIot as ScaleIconHomeIotElement } from "@telekom/scale-components/dist/components/scale-icon-home-iot.js";
+import { ScaleIconHomeLightBulb as ScaleIconHomeLightBulbElement } from "@telekom/scale-components/dist/components/scale-icon-home-light-bulb.js";
+import { ScaleIconHomeNetworkSecure as ScaleIconHomeNetworkSecureElement } from "@telekom/scale-components/dist/components/scale-icon-home-network-secure.js";
+import { ScaleIconHomeNoWifi as ScaleIconHomeNoWifiElement } from "@telekom/scale-components/dist/components/scale-icon-home-no-wifi.js";
+import { ScaleIconHomePowerSocket as ScaleIconHomePowerSocketElement } from "@telekom/scale-components/dist/components/scale-icon-home-power-socket.js";
+import { ScaleIconHomePreferredWifi as ScaleIconHomePreferredWifiElement } from "@telekom/scale-components/dist/components/scale-icon-home-preferred-wifi.js";
+import { ScaleIconHomeReducedWifi as ScaleIconHomeReducedWifiElement } from "@telekom/scale-components/dist/components/scale-icon-home-reduced-wifi.js";
+import { ScaleIconHomeSlowWifi as ScaleIconHomeSlowWifiElement } from "@telekom/scale-components/dist/components/scale-icon-home-slow-wifi.js";
+import { ScaleIconHomeSmarthome as ScaleIconHomeSmarthomeElement } from "@telekom/scale-components/dist/components/scale-icon-home-smarthome.js";
+import { ScaleIconHomeUnableToConnectToRouter as ScaleIconHomeUnableToConnectToRouterElement } from "@telekom/scale-components/dist/components/scale-icon-home-unable-to-connect-to-router.js";
+import { ScaleIconHomeWifiConnected as ScaleIconHomeWifiConnectedElement } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-connected.js";
+import { ScaleIconHomeWifiConnectionError as ScaleIconHomeWifiConnectionErrorElement } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-connection-error.js";
+import { ScaleIconHomeWifiManualLogin as ScaleIconHomeWifiManualLoginElement } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-manual-login.js";
+import { ScaleIconHomeWifiNoWiredInternet as ScaleIconHomeWifiNoWiredInternetElement } from "@telekom/scale-components/dist/components/scale-icon-home-wifi-no-wired-internet.js";
+import { ScaleIconHomeWifi as ScaleIconHomeWifiElement } from "@telekom/scale-components/dist/components/scale-icon-home-wifi.js";
+import { ScaleIconNavigationCircleTopUp as ScaleIconNavigationCircleTopUpElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-circle-top-up.js";
+import { ScaleIconNavigationCollapseDown as ScaleIconNavigationCollapseDownElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-collapse-down.js";
+import { ScaleIconNavigationCollapseUp as ScaleIconNavigationCollapseUpElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-collapse-up.js";
+import { ScaleIconNavigationDoubleLeft as ScaleIconNavigationDoubleLeftElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-double-left.js";
+import { ScaleIconNavigationDoubleRight as ScaleIconNavigationDoubleRightElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-double-right.js";
+import { ScaleIconNavigationExternalLink as ScaleIconNavigationExternalLinkElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-external-link.js";
+import { ScaleIconNavigationInternalLink as ScaleIconNavigationInternalLinkElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-internal-link.js";
+import { ScaleIconNavigationLeftCondensed as ScaleIconNavigationLeftCondensedElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-left-condensed.js";
+import { ScaleIconNavigationLeft as ScaleIconNavigationLeftElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-left.js";
+import { ScaleIconNavigationLocation as ScaleIconNavigationLocationElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-location.js";
+import { ScaleIconNavigationMap as ScaleIconNavigationMapElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-map.js";
+import { ScaleIconNavigationMyLocation as ScaleIconNavigationMyLocationElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-my-location.js";
+import { ScaleIconNavigationRightCondensed as ScaleIconNavigationRightCondensedElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-right-condensed.js";
+import { ScaleIconNavigationRight as ScaleIconNavigationRightElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-right.js";
+import { ScaleIconNavigationStart as ScaleIconNavigationStartElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-start.js";
+import { ScaleIconNavigationTopUp as ScaleIconNavigationTopUpElement } from "@telekom/scale-components/dist/components/scale-icon-navigation-top-up.js";
+import { ScaleIconProcessOrderStatus as ScaleIconProcessOrderStatusElement } from "@telekom/scale-components/dist/components/scale-icon-process-order-status.js";
+import { ScaleIconProcessProcessing as ScaleIconProcessProcessingElement } from "@telekom/scale-components/dist/components/scale-icon-process-processing.js";
+import { ScaleIconProcessSepaTransaction as ScaleIconProcessSepaTransactionElement } from "@telekom/scale-components/dist/components/scale-icon-process-sepa-transaction.js";
+import { ScaleIconServiceDevicesService as ScaleIconServiceDevicesServiceElement } from "@telekom/scale-components/dist/components/scale-icon-service-devices-service.js";
+import { ScaleIconServiceMaintanance as ScaleIconServiceMaintananceElement } from "@telekom/scale-components/dist/components/scale-icon-service-maintanance.js";
+import { ScaleIconServiceManual as ScaleIconServiceManualElement } from "@telekom/scale-components/dist/components/scale-icon-service-manual.js";
+import { ScaleIconServiceOneTimePassword as ScaleIconServiceOneTimePasswordElement } from "@telekom/scale-components/dist/components/scale-icon-service-one-time-password.js";
+import { ScaleIconServiceServices as ScaleIconServiceServicesElement } from "@telekom/scale-components/dist/components/scale-icon-service-services.js";
+import { ScaleIconServiceSettings as ScaleIconServiceSettingsElement } from "@telekom/scale-components/dist/components/scale-icon-service-settings.js";
+import { ScaleIconServiceSupport as ScaleIconServiceSupportElement } from "@telekom/scale-components/dist/components/scale-icon-service-support.js";
+import { ScaleIconServiceVpn as ScaleIconServiceVpnElement } from "@telekom/scale-components/dist/components/scale-icon-service-vpn.js";
+import { ScaleIconTProduct2faTelekomApp as ScaleIconTProduct2faTelekomAppElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-2fa-telekom-app.js";
+import { ScaleIconTProductMagentaCloud as ScaleIconTProductMagentaCloudElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-magenta-cloud.js";
+import { ScaleIconTProductMagentaTv as ScaleIconTProductMagentaTvElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-magenta-tv.js";
+import { ScaleIconTProductMagentaone as ScaleIconTProductMagentaoneElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-magentaone.js";
+import { ScaleIconTProductMeasureInternetSpeed as ScaleIconTProductMeasureInternetSpeedElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-measure-internet-speed.js";
+import { ScaleIconTProductSeamlessConnectivity as ScaleIconTProductSeamlessConnectivityElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-seamless-connectivity.js";
+import { ScaleIconTProductTelekom1t1 as ScaleIconTProductTelekom1t1Element } from "@telekom/scale-components/dist/components/scale-icon-t-product-telekom-1t1.js";
+import { ScaleIconTProductTelekomPlan as ScaleIconTProductTelekomPlanElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-telekom-plan.js";
+import { ScaleIconTProductTelekomShopB as ScaleIconTProductTelekomShopBElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-telekom-shop-b.js";
+import { ScaleIconTProductUsage as ScaleIconTProductUsageElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-usage.js";
+import { ScaleIconTProductVoice as ScaleIconTProductVoiceElement } from "@telekom/scale-components/dist/components/scale-icon-t-product-voice.js";
+import { ScaleIconUserFileAdmin as ScaleIconUserFileAdminElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-admin.js";
+import { ScaleIconUserFileAnalytics as ScaleIconUserFileAnalyticsElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-analytics.js";
+import { ScaleIconUserFileAttachment as ScaleIconUserFileAttachmentElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-attachment.js";
+import { ScaleIconUserFileAudioFile as ScaleIconUserFileAudioFileElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-audio-file.js";
+import { ScaleIconUserFileBilling as ScaleIconUserFileBillingElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-billing.js";
+import { ScaleIconUserFileBoy as ScaleIconUserFileBoyElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-boy.js";
+import { ScaleIconUserFileBussinesUsers as ScaleIconUserFileBussinesUsersElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-bussines-users.js";
+import { ScaleIconUserFileCommunities as ScaleIconUserFileCommunitiesElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-communities.js";
+import { ScaleIconUserFileContactsFromCloud as ScaleIconUserFileContactsFromCloudElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-contacts-from-cloud.js";
+import { ScaleIconUserFileContacts as ScaleIconUserFileContactsElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-contacts.js";
+import { ScaleIconUserFileContracts as ScaleIconUserFileContractsElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-contracts.js";
+import { ScaleIconUserFileDraftFile as ScaleIconUserFileDraftFileElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-draft-file.js";
+import { ScaleIconUserFileFamilies as ScaleIconUserFileFamiliesElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-families.js";
+import { ScaleIconUserFileFamily as ScaleIconUserFileFamilyElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-family.js";
+import { ScaleIconUserFileFileCollection as ScaleIconUserFileFileCollectionElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-file-collection.js";
+import { ScaleIconUserFileFile as ScaleIconUserFileFileElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-file.js";
+import { ScaleIconUserFileGirl as ScaleIconUserFileGirlElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-girl.js";
+import { ScaleIconUserFileHandshake as ScaleIconUserFileHandshakeElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-handshake.js";
+import { ScaleIconUserFileHtmlFile as ScaleIconUserFileHtmlFileElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-html-file.js";
+import { ScaleIconUserFileIdCard as ScaleIconUserFileIdCardElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-id-card.js";
+import { ScaleIconUserFileImageFile as ScaleIconUserFileImageFileElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-image-file.js";
+import { ScaleIconUserFileLogout as ScaleIconUserFileLogoutElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-logout.js";
+import { ScaleIconUserFileMan as ScaleIconUserFileManElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-man.js";
+import { ScaleIconUserFilePdfFile as ScaleIconUserFilePdfFileElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-pdf-file.js";
+import { ScaleIconUserFileSwitchUsers as ScaleIconUserFileSwitchUsersElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-switch-users.js";
+import { ScaleIconUserFileUser as ScaleIconUserFileUserElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-user.js";
+import { ScaleIconUserFileVideos as ScaleIconUserFileVideosElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-videos.js";
+import { ScaleIconUserFileWoman as ScaleIconUserFileWomanElement } from "@telekom/scale-components/dist/components/scale-icon-user-file-woman.js";
+import { ScaleIconWeatherCloudyRain as ScaleIconWeatherCloudyRainElement } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-rain.js";
+import { ScaleIconWeatherCloudySleet as ScaleIconWeatherCloudySleetElement } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-sleet.js";
+import { ScaleIconWeatherCloudySnow as ScaleIconWeatherCloudySnowElement } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-snow.js";
+import { ScaleIconWeatherCloudyThunderRain as ScaleIconWeatherCloudyThunderRainElement } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-thunder-rain.js";
+import { ScaleIconWeatherCloudyThunderSnow as ScaleIconWeatherCloudyThunderSnowElement } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy-thunder-snow.js";
+import { ScaleIconWeatherCloudy as ScaleIconWeatherCloudyElement } from "@telekom/scale-components/dist/components/scale-icon-weather-cloudy.js";
+import { ScaleIconWeatherHeavySleet as ScaleIconWeatherHeavySleetElement } from "@telekom/scale-components/dist/components/scale-icon-weather-heavy-sleet.js";
+import { ScaleIconWeatherHeavySnow as ScaleIconWeatherHeavySnowElement } from "@telekom/scale-components/dist/components/scale-icon-weather-heavy-snow.js";
+import { ScaleIconWeatherMoonClear as ScaleIconWeatherMoonClearElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-clear.js";
+import { ScaleIconWeatherMoonCloudyA as ScaleIconWeatherMoonCloudyAElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-cloudy-a.js";
+import { ScaleIconWeatherMoonCloudyB as ScaleIconWeatherMoonCloudyBElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-cloudy-b.js";
+import { ScaleIconWeatherMoonRain as ScaleIconWeatherMoonRainElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-rain.js";
+import { ScaleIconWeatherMoonSleet as ScaleIconWeatherMoonSleetElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-sleet.js";
+import { ScaleIconWeatherMoonSnow as ScaleIconWeatherMoonSnowElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-snow.js";
+import { ScaleIconWeatherMoonThunderRain as ScaleIconWeatherMoonThunderRainElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-thunder-rain.js";
+import { ScaleIconWeatherMoonThunderSnow as ScaleIconWeatherMoonThunderSnowElement } from "@telekom/scale-components/dist/components/scale-icon-weather-moon-thunder-snow.js";
+import { ScaleIconWeatherOvercast as ScaleIconWeatherOvercastElement } from "@telekom/scale-components/dist/components/scale-icon-weather-overcast.js";
+import { ScaleIconWeatherRain as ScaleIconWeatherRainElement } from "@telekom/scale-components/dist/components/scale-icon-weather-rain.js";
+import { ScaleIconWeatherSunny as ScaleIconWeatherSunnyElement } from "@telekom/scale-components/dist/components/scale-icon-weather-sunny.js";
+import { ScaleIconWeatherThunderRain as ScaleIconWeatherThunderRainElement } from "@telekom/scale-components/dist/components/scale-icon-weather-thunder-rain.js";
+import { ScaleIconWeatherThunderSnow as ScaleIconWeatherThunderSnowElement } from "@telekom/scale-components/dist/components/scale-icon-weather-thunder-snow.js";
+import { ScaleIcon as ScaleIconElement } from "@telekom/scale-components/dist/components/scale-icon.js";
+import { ScaleInput as ScaleInputElement } from "@telekom/scale-components/dist/components/scale-input.js";
+import { ScaleLink as ScaleLinkElement } from "@telekom/scale-components/dist/components/scale-link.js";
+import { ScaleListItem as ScaleListItemElement } from "@telekom/scale-components/dist/components/scale-list-item.js";
+import { ScaleList as ScaleListElement } from "@telekom/scale-components/dist/components/scale-list.js";
+import { ScaleLoadingSpinner as ScaleLoadingSpinnerElement } from "@telekom/scale-components/dist/components/scale-loading-spinner.js";
+import { ScaleLogoSvg as ScaleLogoSvgElement } from "@telekom/scale-components/dist/components/scale-logo-svg.js";
+import { ScaleLogo as ScaleLogoElement } from "@telekom/scale-components/dist/components/scale-logo.js";
+import { ScaleMenuFlyoutDivider as ScaleMenuFlyoutDividerElement } from "@telekom/scale-components/dist/components/scale-menu-flyout-divider.js";
+import { ScaleMenuFlyoutItem as ScaleMenuFlyoutItemElement } from "@telekom/scale-components/dist/components/scale-menu-flyout-item.js";
+import { ScaleMenuFlyoutList as ScaleMenuFlyoutListElement } from "@telekom/scale-components/dist/components/scale-menu-flyout-list.js";
+import { ScaleMenuFlyout as ScaleMenuFlyoutElement } from "@telekom/scale-components/dist/components/scale-menu-flyout.js";
+import { ScaleModal as ScaleModalElement } from "@telekom/scale-components/dist/components/scale-modal.js";
+import { ScaleNavIcon as ScaleNavIconElement } from "@telekom/scale-components/dist/components/scale-nav-icon.js";
+import { ScaleNavMain as ScaleNavMainElement } from "@telekom/scale-components/dist/components/scale-nav-main.js";
+import { ScaleNavSegment as ScaleNavSegmentElement } from "@telekom/scale-components/dist/components/scale-nav-segment.js";
+import { ScaleNotificationBadge as ScaleNotificationBadgeElement } from "@telekom/scale-components/dist/components/scale-notification-badge.js";
+import { ScaleNotificationBanner as ScaleNotificationBannerElement } from "@telekom/scale-components/dist/components/scale-notification-banner.js";
+import { ScaleNotificationMessage as ScaleNotificationMessageElement } from "@telekom/scale-components/dist/components/scale-notification-message.js";
+import { ScaleNotificationToast as ScaleNotificationToastElement } from "@telekom/scale-components/dist/components/scale-notification-toast.js";
+import { ScaleNotification as ScaleNotificationElement } from "@telekom/scale-components/dist/components/scale-notification.js";
+import { ScalePagination as ScalePaginationElement } from "@telekom/scale-components/dist/components/scale-pagination.js";
+import { ScaleProgressBar as ScaleProgressBarElement } from "@telekom/scale-components/dist/components/scale-progress-bar.js";
+import { ScaleRadioButtonGroup as ScaleRadioButtonGroupElement } from "@telekom/scale-components/dist/components/scale-radio-button-group.js";
+import { ScaleRadioButton as ScaleRadioButtonElement } from "@telekom/scale-components/dist/components/scale-radio-button.js";
+import { ScaleRatingStars as ScaleRatingStarsElement } from "@telekom/scale-components/dist/components/scale-rating-stars.js";
+import { ScaleSegment as ScaleSegmentElement } from "@telekom/scale-components/dist/components/scale-segment.js";
+import { ScaleSegmentedButton as ScaleSegmentedButtonElement } from "@telekom/scale-components/dist/components/scale-segmented-button.js";
+import { ScaleSidebarNavCollapsible as ScaleSidebarNavCollapsibleElement } from "@telekom/scale-components/dist/components/scale-sidebar-nav-collapsible.js";
+import { ScaleSidebarNavItem as ScaleSidebarNavItemElement } from "@telekom/scale-components/dist/components/scale-sidebar-nav-item.js";
+import { ScaleSidebarNav as ScaleSidebarNavElement } from "@telekom/scale-components/dist/components/scale-sidebar-nav.js";
+import { ScaleSlider as ScaleSliderElement } from "@telekom/scale-components/dist/components/scale-slider.js";
+import { ScaleSsrSlotFix as ScaleSsrSlotFixElement } from "@telekom/scale-components/dist/components/scale-ssr-slot-fix.js";
+import { ScaleSwitch as ScaleSwitchElement } from "@telekom/scale-components/dist/components/scale-switch.js";
+import { ScaleTabHeader as ScaleTabHeaderElement } from "@telekom/scale-components/dist/components/scale-tab-header.js";
+import { ScaleTabNav as ScaleTabNavElement } from "@telekom/scale-components/dist/components/scale-tab-nav.js";
+import { ScaleTabPanel as ScaleTabPanelElement } from "@telekom/scale-components/dist/components/scale-tab-panel.js";
+import { ScaleTable as ScaleTableElement } from "@telekom/scale-components/dist/components/scale-table.js";
+import { ScaleTag as ScaleTagElement } from "@telekom/scale-components/dist/components/scale-tag.js";
+import { ScaleTelekomAppShell as ScaleTelekomAppShellElement } from "@telekom/scale-components/dist/components/scale-telekom-app-shell.js";
+import { ScaleTelekomFooterContent as ScaleTelekomFooterContentElement } from "@telekom/scale-components/dist/components/scale-telekom-footer-content.js";
+import { ScaleTelekomFooterDataBackCompat as ScaleTelekomFooterDataBackCompatElement } from "@telekom/scale-components/dist/components/scale-telekom-footer-data-back-compat.js";
+import { ScaleTelekomFooterExtendedNavigationColumn as ScaleTelekomFooterExtendedNavigationColumnElement } from "@telekom/scale-components/dist/components/scale-telekom-footer-extended-navigation-column.js";
+import { ScaleTelekomFooterExtendedNavigation as ScaleTelekomFooterExtendedNavigationElement } from "@telekom/scale-components/dist/components/scale-telekom-footer-extended-navigation.js";
+import { ScaleTelekomFooter as ScaleTelekomFooterElement } from "@telekom/scale-components/dist/components/scale-telekom-footer.js";
+import { ScaleTelekomHeaderDataBackCompat as ScaleTelekomHeaderDataBackCompatElement } from "@telekom/scale-components/dist/components/scale-telekom-header-data-back-compat.js";
+import { ScaleTelekomHeader as ScaleTelekomHeaderElement } from "@telekom/scale-components/dist/components/scale-telekom-header.js";
+import { ScaleTelekomMegaMenuColumn as ScaleTelekomMegaMenuColumnElement } from "@telekom/scale-components/dist/components/scale-telekom-mega-menu-column.js";
+import { ScaleTelekomMegaMenu as ScaleTelekomMegaMenuElement } from "@telekom/scale-components/dist/components/scale-telekom-mega-menu.js";
+import { ScaleTelekomMobileFlyoutCanvas as ScaleTelekomMobileFlyoutCanvasElement } from "@telekom/scale-components/dist/components/scale-telekom-mobile-flyout-canvas.js";
+import { ScaleTelekomMobileMenuItem as ScaleTelekomMobileMenuItemElement } from "@telekom/scale-components/dist/components/scale-telekom-mobile-menu-item.js";
+import { ScaleTelekomMobileMenu as ScaleTelekomMobileMenuElement } from "@telekom/scale-components/dist/components/scale-telekom-mobile-menu.js";
+import { ScaleTelekomNavFlyout as ScaleTelekomNavFlyoutElement } from "@telekom/scale-components/dist/components/scale-telekom-nav-flyout.js";
+import { ScaleTelekomNavItem as ScaleTelekomNavItemElement } from "@telekom/scale-components/dist/components/scale-telekom-nav-item.js";
+import { ScaleTelekomNavList as ScaleTelekomNavListElement } from "@telekom/scale-components/dist/components/scale-telekom-nav-list.js";
+import { ScaleTelekomProfileMenu as ScaleTelekomProfileMenuElement } from "@telekom/scale-components/dist/components/scale-telekom-profile-menu.js";
+import { ScaleTextField as ScaleTextFieldElement } from "@telekom/scale-components/dist/components/scale-text-field.js";
+import { ScaleTextarea as ScaleTextareaElement } from "@telekom/scale-components/dist/components/scale-textarea.js";
+import { ScaleToast as ScaleToastElement } from "@telekom/scale-components/dist/components/scale-toast.js";
+import { ScaleToggleButton as ScaleToggleButtonElement } from "@telekom/scale-components/dist/components/scale-toggle-button.js";
+import { ScaleToggleGroup as ScaleToggleGroupElement } from "@telekom/scale-components/dist/components/scale-toggle-group.js";
+import { ScaleTooltip as ScaleTooltipElement } from "@telekom/scale-components/dist/components/scale-tooltip.js";
 
 export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
 
 export type AppLogoEvents = NonNullable<unknown>;
 
-export const AppLogo: StencilReactComponent<AppLogoElement, AppLogoEvents> = /*@__PURE__*/ createComponent<AppLogoElement, AppLogoEvents>({
+export const AppLogo: StencilReactComponent<AppLogoElement, AppLogoEvents, JSX.AppLogo> = /*@__PURE__*/ createComponent<AppLogoElement, AppLogoEvents, JSX.AppLogo>({
     tagName: 'app-logo',
     properties: {
         href: 'href',
@@ -467,17 +472,13 @@ export const AppLogo: StencilReactComponent<AppLogoElement, AppLogoEvents> = /*@
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: AppLogoElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as AppLogoEvents,
-    defineCustomElement: defineAppLogo
+    clientModule: clientComponents.AppLogo as StencilReactComponent<AppLogoElement, AppLogoEvents, JSX.AppLogo>,
+    serializeShadowRoot
 });
 
 export type AppMegaMenuEvents = NonNullable<unknown>;
 
-export const AppMegaMenu: StencilReactComponent<AppMegaMenuElement, AppMegaMenuEvents> = /*@__PURE__*/ createComponent<AppMegaMenuElement, AppMegaMenuEvents>({
+export const AppMegaMenu: StencilReactComponent<AppMegaMenuElement, AppMegaMenuEvents, JSX.AppMegaMenu> = /*@__PURE__*/ createComponent<AppMegaMenuElement, AppMegaMenuEvents, JSX.AppMegaMenu>({
     tagName: 'app-mega-menu',
     properties: {
         navigation: 'navigation',
@@ -487,17 +488,13 @@ export const AppMegaMenu: StencilReactComponent<AppMegaMenuElement, AppMegaMenuE
         active: 'active'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: AppMegaMenuElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as AppMegaMenuEvents,
-    defineCustomElement: defineAppMegaMenu
+    clientModule: clientComponents.AppMegaMenu as StencilReactComponent<AppMegaMenuElement, AppMegaMenuEvents, JSX.AppMegaMenu>,
+    serializeShadowRoot
 });
 
-export type AppNavigationMainMobileEvents = { onCloseMenu: EventName<CustomEvent<any>> };
+export type AppNavigationMainMobileEvents = { onCloseMenu: EventName<AppNavigationMainMobileCustomEvent<any>> };
 
-export const AppNavigationMainMobile: StencilReactComponent<AppNavigationMainMobileElement, AppNavigationMainMobileEvents> = /*@__PURE__*/ createComponent<AppNavigationMainMobileElement, AppNavigationMainMobileEvents>({
+export const AppNavigationMainMobile: StencilReactComponent<AppNavigationMainMobileElement, AppNavigationMainMobileEvents, JSX.AppNavigationMainMobile> = /*@__PURE__*/ createComponent<AppNavigationMainMobileElement, AppNavigationMainMobileEvents, JSX.AppNavigationMainMobile>({
     tagName: 'app-navigation-main-mobile',
     properties: {
         hide: 'hide',
@@ -505,17 +502,13 @@ export const AppNavigationMainMobile: StencilReactComponent<AppNavigationMainMob
         activeRouteId: 'active-route-id'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: AppNavigationMainMobileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCloseMenu: 'closeMenu' } as AppNavigationMainMobileEvents,
-    defineCustomElement: defineAppNavigationMainMobile
+    clientModule: clientComponents.AppNavigationMainMobile as StencilReactComponent<AppNavigationMainMobileElement, AppNavigationMainMobileEvents, JSX.AppNavigationMainMobile>,
+    serializeShadowRoot
 });
 
 export type AppNavigationSectorMobileEvents = NonNullable<unknown>;
 
-export const AppNavigationSectorMobile: StencilReactComponent<AppNavigationSectorMobileElement, AppNavigationSectorMobileEvents> = /*@__PURE__*/ createComponent<AppNavigationSectorMobileElement, AppNavigationSectorMobileEvents>({
+export const AppNavigationSectorMobile: StencilReactComponent<AppNavigationSectorMobileElement, AppNavigationSectorMobileEvents, JSX.AppNavigationSectorMobile> = /*@__PURE__*/ createComponent<AppNavigationSectorMobileElement, AppNavigationSectorMobileEvents, JSX.AppNavigationSectorMobile>({
     tagName: 'app-navigation-sector-mobile',
     properties: {
         hide: 'hide',
@@ -523,17 +516,13 @@ export const AppNavigationSectorMobile: StencilReactComponent<AppNavigationSecto
         activeSectorId: 'active-sector-id'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: AppNavigationSectorMobileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as AppNavigationSectorMobileEvents,
-    defineCustomElement: defineAppNavigationSectorMobile
+    clientModule: clientComponents.AppNavigationSectorMobile as StencilReactComponent<AppNavigationSectorMobileElement, AppNavigationSectorMobileEvents, JSX.AppNavigationSectorMobile>,
+    serializeShadowRoot
 });
 
-export type AppNavigationUserMenuEvents = { onCloseMenu: EventName<CustomEvent<any>> };
+export type AppNavigationUserMenuEvents = { onCloseMenu: EventName<AppNavigationUserMenuCustomEvent<any>> };
 
-export const AppNavigationUserMenu: StencilReactComponent<AppNavigationUserMenuElement, AppNavigationUserMenuEvents> = /*@__PURE__*/ createComponent<AppNavigationUserMenuElement, AppNavigationUserMenuEvents>({
+export const AppNavigationUserMenu: StencilReactComponent<AppNavigationUserMenuElement, AppNavigationUserMenuEvents, JSX.AppNavigationUserMenu> = /*@__PURE__*/ createComponent<AppNavigationUserMenuElement, AppNavigationUserMenuEvents, JSX.AppNavigationUserMenu>({
     tagName: 'app-navigation-user-menu',
     properties: {
         hide: 'hide',
@@ -541,17 +530,13 @@ export const AppNavigationUserMenu: StencilReactComponent<AppNavigationUserMenuE
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: AppNavigationUserMenuElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCloseMenu: 'closeMenu' } as AppNavigationUserMenuEvents,
-    defineCustomElement: defineAppNavigationUserMenu
+    clientModule: clientComponents.AppNavigationUserMenu as StencilReactComponent<AppNavigationUserMenuElement, AppNavigationUserMenuEvents, JSX.AppNavigationUserMenu>,
+    serializeShadowRoot
 });
 
 export type ScaleAccordionEvents = NonNullable<unknown>;
 
-export const ScaleAccordion: StencilReactComponent<ScaleAccordionElement, ScaleAccordionEvents> = /*@__PURE__*/ createComponent<ScaleAccordionElement, ScaleAccordionEvents>({
+export const ScaleAccordion: StencilReactComponent<ScaleAccordionElement, ScaleAccordionEvents, JSX.ScaleAccordion> = /*@__PURE__*/ createComponent<ScaleAccordionElement, ScaleAccordionEvents, JSX.ScaleAccordion>({
     tagName: 'scale-accordion',
     properties: {
         styles: 'styles',
@@ -561,17 +546,13 @@ export const ScaleAccordion: StencilReactComponent<ScaleAccordionElement, ScaleA
         iconLocation: 'icon-location'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleAccordionElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleAccordionEvents,
-    defineCustomElement: defineScaleAccordion
+    clientModule: clientComponents.ScaleAccordion as StencilReactComponent<ScaleAccordionElement, ScaleAccordionEvents, JSX.ScaleAccordion>,
+    serializeShadowRoot
 });
 
 export type ScaleAlertEvents = NonNullable<unknown>;
 
-export const ScaleAlert: StencilReactComponent<ScaleAlertElement, ScaleAlertEvents> = /*@__PURE__*/ createComponent<ScaleAlertElement, ScaleAlertEvents>({
+export const ScaleAlert: StencilReactComponent<ScaleAlertElement, ScaleAlertEvents, JSX.ScaleAlert> = /*@__PURE__*/ createComponent<ScaleAlertElement, ScaleAlertEvents, JSX.ScaleAlert>({
     tagName: 'scale-alert',
     properties: {
         size: 'size',
@@ -583,17 +564,13 @@ export const ScaleAlert: StencilReactComponent<ScaleAlertElement, ScaleAlertEven
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleAlertElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleAlertEvents,
-    defineCustomElement: defineScaleAlert
+    clientModule: clientComponents.ScaleAlert as StencilReactComponent<ScaleAlertElement, ScaleAlertEvents, JSX.ScaleAlert>,
+    serializeShadowRoot
 });
 
 export type ScaleAppFooterEvents = NonNullable<unknown>;
 
-export const ScaleAppFooter: StencilReactComponent<ScaleAppFooterElement, ScaleAppFooterEvents> = /*@__PURE__*/ createComponent<ScaleAppFooterElement, ScaleAppFooterEvents>({
+export const ScaleAppFooter: StencilReactComponent<ScaleAppFooterElement, ScaleAppFooterEvents, JSX.ScaleAppFooter> = /*@__PURE__*/ createComponent<ScaleAppFooterElement, ScaleAppFooterEvents, JSX.ScaleAppFooter>({
     tagName: 'scale-app-footer',
     properties: {
         footerNavigation: 'footer-navigation',
@@ -606,17 +583,13 @@ export const ScaleAppFooter: StencilReactComponent<ScaleAppFooterElement, ScaleA
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleAppFooterElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleAppFooterEvents,
-    defineCustomElement: defineScaleAppFooter
+    clientModule: clientComponents.ScaleAppFooter as StencilReactComponent<ScaleAppFooterElement, ScaleAppFooterEvents, JSX.ScaleAppFooter>,
+    serializeShadowRoot
 });
 
 export type ScaleAppHeaderEvents = NonNullable<unknown>;
 
-export const ScaleAppHeader: StencilReactComponent<ScaleAppHeaderElement, ScaleAppHeaderEvents> = /*@__PURE__*/ createComponent<ScaleAppHeaderElement, ScaleAppHeaderEvents>({
+export const ScaleAppHeader: StencilReactComponent<ScaleAppHeaderElement, ScaleAppHeaderEvents, JSX.ScaleAppHeader> = /*@__PURE__*/ createComponent<ScaleAppHeaderElement, ScaleAppHeaderEvents, JSX.ScaleAppHeader>({
     tagName: 'scale-app-header',
     properties: {
         logoHref: 'logo-href',
@@ -641,17 +614,13 @@ export const ScaleAppHeader: StencilReactComponent<ScaleAppHeaderElement, ScaleA
         mobileMenuVisible: 'mobile-menu-visible'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleAppHeaderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleAppHeaderEvents,
-    defineCustomElement: defineScaleAppHeader
+    clientModule: clientComponents.ScaleAppHeader as StencilReactComponent<ScaleAppHeaderElement, ScaleAppHeaderEvents, JSX.ScaleAppHeader>,
+    serializeShadowRoot
 });
 
 export type ScaleAppShellEvents = NonNullable<unknown>;
 
-export const ScaleAppShell: StencilReactComponent<ScaleAppShellElement, ScaleAppShellEvents> = /*@__PURE__*/ createComponent<ScaleAppShellElement, ScaleAppShellEvents>({
+export const ScaleAppShell: StencilReactComponent<ScaleAppShellElement, ScaleAppShellEvents, JSX.ScaleAppShell> = /*@__PURE__*/ createComponent<ScaleAppShellElement, ScaleAppShellEvents, JSX.ScaleAppShell>({
     tagName: 'scale-app-shell',
     properties: {
         portalName: 'portal-name',
@@ -673,17 +642,13 @@ export const ScaleAppShell: StencilReactComponent<ScaleAppShellElement, ScaleApp
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleAppShellElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleAppShellEvents,
-    defineCustomElement: defineScaleAppShell
+    clientModule: clientComponents.ScaleAppShell as StencilReactComponent<ScaleAppShellElement, ScaleAppShellEvents, JSX.ScaleAppShell>,
+    serializeShadowRoot
 });
 
 export type ScaleBadgeEvents = NonNullable<unknown>;
 
-export const ScaleBadge: StencilReactComponent<ScaleBadgeElement, ScaleBadgeEvents> = /*@__PURE__*/ createComponent<ScaleBadgeElement, ScaleBadgeEvents>({
+export const ScaleBadge: StencilReactComponent<ScaleBadgeElement, ScaleBadgeEvents, JSX.ScaleBadge> = /*@__PURE__*/ createComponent<ScaleBadgeElement, ScaleBadgeEvents, JSX.ScaleBadge>({
     tagName: 'scale-badge',
     properties: {
         count: 'count',
@@ -692,34 +657,26 @@ export const ScaleBadge: StencilReactComponent<ScaleBadgeElement, ScaleBadgeEven
         ariaLabelTranslation: 'aria-label-translation'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleBadgeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleBadgeEvents,
-    defineCustomElement: defineScaleBadge
+    clientModule: clientComponents.ScaleBadge as StencilReactComponent<ScaleBadgeElement, ScaleBadgeEvents, JSX.ScaleBadge>,
+    serializeShadowRoot
 });
 
 export type ScaleBreadcrumbEvents = NonNullable<unknown>;
 
-export const ScaleBreadcrumb: StencilReactComponent<ScaleBreadcrumbElement, ScaleBreadcrumbEvents> = /*@__PURE__*/ createComponent<ScaleBreadcrumbElement, ScaleBreadcrumbEvents>({
+export const ScaleBreadcrumb: StencilReactComponent<ScaleBreadcrumbElement, ScaleBreadcrumbEvents, JSX.ScaleBreadcrumb> = /*@__PURE__*/ createComponent<ScaleBreadcrumbElement, ScaleBreadcrumbEvents, JSX.ScaleBreadcrumb>({
     tagName: 'scale-breadcrumb',
     properties: {
         separator: 'separator',
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleBreadcrumbElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleBreadcrumbEvents,
-    defineCustomElement: defineScaleBreadcrumb
+    clientModule: clientComponents.ScaleBreadcrumb as StencilReactComponent<ScaleBreadcrumbElement, ScaleBreadcrumbEvents, JSX.ScaleBreadcrumb>,
+    serializeShadowRoot
 });
 
 export type ScaleButtonEvents = NonNullable<unknown>;
 
-export const ScaleButton: StencilReactComponent<ScaleButtonElement, ScaleButtonEvents> = /*@__PURE__*/ createComponent<ScaleButtonElement, ScaleButtonEvents>({
+export const ScaleButton: StencilReactComponent<ScaleButtonElement, ScaleButtonEvents, JSX.ScaleButton> = /*@__PURE__*/ createComponent<ScaleButtonElement, ScaleButtonEvents, JSX.ScaleButton>({
     tagName: 'scale-button',
     properties: {
         size: 'size',
@@ -738,17 +695,13 @@ export const ScaleButton: StencilReactComponent<ScaleButtonElement, ScaleButtonE
         innerAriaLabel: 'inner-aria-label'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleButtonEvents,
-    defineCustomElement: defineScaleButton
+    clientModule: clientComponents.ScaleButton as StencilReactComponent<ScaleButtonElement, ScaleButtonEvents, JSX.ScaleButton>,
+    serializeShadowRoot
 });
 
 export type ScaleCalloutEvents = NonNullable<unknown>;
 
-export const ScaleCallout: StencilReactComponent<ScaleCalloutElement, ScaleCalloutEvents> = /*@__PURE__*/ createComponent<ScaleCalloutElement, ScaleCalloutEvents>({
+export const ScaleCallout: StencilReactComponent<ScaleCalloutElement, ScaleCalloutEvents, JSX.ScaleCallout> = /*@__PURE__*/ createComponent<ScaleCalloutElement, ScaleCalloutEvents, JSX.ScaleCallout>({
     tagName: 'scale-callout',
     properties: {
         variant: 'variant',
@@ -760,17 +713,13 @@ export const ScaleCallout: StencilReactComponent<ScaleCalloutElement, ScaleCallo
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleCalloutElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleCalloutEvents,
-    defineCustomElement: defineScaleCallout
+    clientModule: clientComponents.ScaleCallout as StencilReactComponent<ScaleCalloutElement, ScaleCalloutEvents, JSX.ScaleCallout>,
+    serializeShadowRoot
 });
 
 export type ScaleCardEvents = NonNullable<unknown>;
 
-export const ScaleCard: StencilReactComponent<ScaleCardElement, ScaleCardEvents> = /*@__PURE__*/ createComponent<ScaleCardElement, ScaleCardEvents>({
+export const ScaleCard: StencilReactComponent<ScaleCardElement, ScaleCardEvents, JSX.ScaleCard> = /*@__PURE__*/ createComponent<ScaleCardElement, ScaleCardEvents, JSX.ScaleCard>({
     tagName: 'scale-card',
     properties: {
         to: 'to',
@@ -780,51 +729,39 @@ export const ScaleCard: StencilReactComponent<ScaleCardElement, ScaleCardEvents>
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleCardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleCardEvents,
-    defineCustomElement: defineScaleCard
+    clientModule: clientComponents.ScaleCard as StencilReactComponent<ScaleCardElement, ScaleCardEvents, JSX.ScaleCard>,
+    serializeShadowRoot
 });
 
 export type ScaleCarouselEvents = NonNullable<unknown>;
 
-export const ScaleCarousel: StencilReactComponent<ScaleCarouselElement, ScaleCarouselEvents> = /*@__PURE__*/ createComponent<ScaleCarouselElement, ScaleCarouselEvents>({
+export const ScaleCarousel: StencilReactComponent<ScaleCarouselElement, ScaleCarouselEvents, JSX.ScaleCarousel> = /*@__PURE__*/ createComponent<ScaleCarouselElement, ScaleCarouselEvents, JSX.ScaleCarousel>({
     tagName: 'scale-carousel',
     properties: {
         vertical: 'vertical',
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleCarouselElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleCarouselEvents,
-    defineCustomElement: defineScaleCarousel
+    clientModule: clientComponents.ScaleCarousel as StencilReactComponent<ScaleCarouselElement, ScaleCarouselEvents, JSX.ScaleCarousel>,
+    serializeShadowRoot
 });
 
 export type ScaleChartStackCardEvents = NonNullable<unknown>;
 
-export const ScaleChartStackCard: StencilReactComponent<ScaleChartStackCardElement, ScaleChartStackCardEvents> = /*@__PURE__*/ createComponent<ScaleChartStackCardElement, ScaleChartStackCardEvents>({
+export const ScaleChartStackCard: StencilReactComponent<ScaleChartStackCardElement, ScaleChartStackCardEvents, JSX.ScaleChartStackCard> = /*@__PURE__*/ createComponent<ScaleChartStackCardElement, ScaleChartStackCardEvents, JSX.ScaleChartStackCard>({
     tagName: 'scale-chart-stack-card',
     properties: {
         data: 'data',
         heading: 'heading'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleChartStackCardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleChartStackCardEvents,
-    defineCustomElement: defineScaleChartStackCard
+    clientModule: clientComponents.ScaleChartStackCard as StencilReactComponent<ScaleChartStackCardElement, ScaleChartStackCardEvents, JSX.ScaleChartStackCard>,
+    serializeShadowRoot
 });
 
-export type ScaleCheckboxEvents = { onScaleChange: EventName<CustomEvent<any>> };
+export type ScaleCheckboxEvents = { onScaleChange: EventName<ScaleCheckboxCustomEvent<any>> };
 
-export const ScaleCheckbox: StencilReactComponent<ScaleCheckboxElement, ScaleCheckboxEvents> = /*@__PURE__*/ createComponent<ScaleCheckboxElement, ScaleCheckboxEvents>({
+export const ScaleCheckbox: StencilReactComponent<ScaleCheckboxElement, ScaleCheckboxEvents, JSX.ScaleCheckbox> = /*@__PURE__*/ createComponent<ScaleCheckboxElement, ScaleCheckboxEvents, JSX.ScaleCheckbox>({
     tagName: 'scale-checkbox',
     properties: {
         name: 'name',
@@ -845,17 +782,13 @@ export const ScaleCheckbox: StencilReactComponent<ScaleCheckboxElement, ScaleChe
         dataQa: 'data-qa'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleCheckboxElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleChange: 'scale-change' } as ScaleCheckboxEvents,
-    defineCustomElement: defineScaleCheckbox
+    clientModule: clientComponents.ScaleCheckbox as StencilReactComponent<ScaleCheckboxElement, ScaleCheckboxEvents, JSX.ScaleCheckbox>,
+    serializeShadowRoot
 });
 
 export type ScaleCheckboxGroupEvents = NonNullable<unknown>;
 
-export const ScaleCheckboxGroup: StencilReactComponent<ScaleCheckboxGroupElement, ScaleCheckboxGroupEvents> = /*@__PURE__*/ createComponent<ScaleCheckboxGroupElement, ScaleCheckboxGroupEvents>({
+export const ScaleCheckboxGroup: StencilReactComponent<ScaleCheckboxGroupElement, ScaleCheckboxGroupEvents, JSX.ScaleCheckboxGroup> = /*@__PURE__*/ createComponent<ScaleCheckboxGroupElement, ScaleCheckboxGroupEvents, JSX.ScaleCheckboxGroup>({
     tagName: 'scale-checkbox-group',
     properties: {
         name: 'name',
@@ -871,12 +804,8 @@ export const ScaleCheckboxGroup: StencilReactComponent<ScaleCheckboxGroupElement
         unselectText: 'unselect-text'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleCheckboxGroupElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleCheckboxGroupEvents,
-    defineCustomElement: defineScaleCheckboxGroup
+    clientModule: clientComponents.ScaleCheckboxGroup as StencilReactComponent<ScaleCheckboxGroupElement, ScaleCheckboxGroupEvents, JSX.ScaleCheckboxGroup>,
+    serializeShadowRoot
 });
 
 export type ScaleChipEvents = {
@@ -884,7 +813,7 @@ export type ScaleChipEvents = {
     onScaleClose: EventName<ScaleChipCustomEvent<MouseEvent>>
 };
 
-export const ScaleChip: StencilReactComponent<ScaleChipElement, ScaleChipEvents> = /*@__PURE__*/ createComponent<ScaleChipElement, ScaleChipEvents>({
+export const ScaleChip: StencilReactComponent<ScaleChipElement, ScaleChipEvents, JSX.ScaleChip> = /*@__PURE__*/ createComponent<ScaleChipElement, ScaleChipEvents, JSX.ScaleChip>({
     tagName: 'scale-chip',
     properties: {
         variant: 'variant',
@@ -900,20 +829,13 @@ export const ScaleChip: StencilReactComponent<ScaleChipElement, ScaleChipEvents>
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleChipElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleChange: 'scale-change',
-        onScaleClose: 'scale-close'
-    } as ScaleChipEvents,
-    defineCustomElement: defineScaleChip
+    clientModule: clientComponents.ScaleChip as StencilReactComponent<ScaleChipElement, ScaleChipEvents, JSX.ScaleChip>,
+    serializeShadowRoot
 });
 
 export type ScaleCollapsibleEvents = { onScaleExpand: EventName<ScaleCollapsibleCustomEvent<CollapsibleEventDetail>> };
 
-export const ScaleCollapsible: StencilReactComponent<ScaleCollapsibleElement, ScaleCollapsibleEvents> = /*@__PURE__*/ createComponent<ScaleCollapsibleElement, ScaleCollapsibleEvents>({
+export const ScaleCollapsible: StencilReactComponent<ScaleCollapsibleElement, ScaleCollapsibleEvents, JSX.ScaleCollapsible> = /*@__PURE__*/ createComponent<ScaleCollapsibleElement, ScaleCollapsibleEvents, JSX.ScaleCollapsible>({
     tagName: 'scale-collapsible',
     properties: {
         expanded: 'expanded',
@@ -922,17 +844,13 @@ export const ScaleCollapsible: StencilReactComponent<ScaleCollapsibleElement, Sc
         iconLocation: 'icon-location'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleCollapsibleElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleExpand: 'scale-expand' } as ScaleCollapsibleEvents,
-    defineCustomElement: defineScaleCollapsible
+    clientModule: clientComponents.ScaleCollapsible as StencilReactComponent<ScaleCollapsibleElement, ScaleCollapsibleEvents, JSX.ScaleCollapsible>,
+    serializeShadowRoot
 });
 
 export type ScaleComboboxEvents = { onScaleChange: EventName<ScaleComboboxCustomEvent<ComboboxChangeEventDetail>> };
 
-export const ScaleCombobox: StencilReactComponent<ScaleComboboxElement, ScaleComboboxEvents> = /*@__PURE__*/ createComponent<ScaleComboboxElement, ScaleComboboxEvents>({
+export const ScaleCombobox: StencilReactComponent<ScaleComboboxElement, ScaleComboboxEvents, JSX.ScaleCombobox> = /*@__PURE__*/ createComponent<ScaleComboboxElement, ScaleComboboxEvents, JSX.ScaleCombobox>({
     tagName: 'scale-combobox',
     properties: {
         styles: 'styles',
@@ -952,21 +870,17 @@ export const ScaleCombobox: StencilReactComponent<ScaleComboboxElement, ScaleCom
         filterFunction: 'filter-function'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleComboboxElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleChange: 'scale-change' } as ScaleComboboxEvents,
-    defineCustomElement: defineScaleCombobox
+    clientModule: clientComponents.ScaleCombobox as StencilReactComponent<ScaleComboboxElement, ScaleComboboxEvents, JSX.ScaleCombobox>,
+    serializeShadowRoot
 });
 
 export type ScaleDataGridEvents = {
     onScaleEdit: EventName<ScaleDataGridCustomEvent<DataGridEditEventDetail>>,
     onScaleSort: EventName<ScaleDataGridCustomEvent<DataGridSortedEventDetail>>,
-    onScaleSelection: EventName<CustomEvent<any[]>>
+    onScaleSelection: EventName<ScaleDataGridCustomEvent<any[]>>
 };
 
-export const ScaleDataGrid: StencilReactComponent<ScaleDataGridElement, ScaleDataGridEvents> = /*@__PURE__*/ createComponent<ScaleDataGridElement, ScaleDataGridEvents>({
+export const ScaleDataGrid: StencilReactComponent<ScaleDataGridElement, ScaleDataGridEvents, JSX.ScaleDataGrid> = /*@__PURE__*/ createComponent<ScaleDataGridElement, ScaleDataGridEvents, JSX.ScaleDataGrid>({
     tagName: 'scale-data-grid',
     properties: {
         fields: 'fields',
@@ -989,16 +903,8 @@ export const ScaleDataGrid: StencilReactComponent<ScaleDataGridElement, ScaleDat
         localization: 'localization'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleDataGridElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleEdit: 'scale-edit',
-        onScaleSort: 'scale-sort',
-        onScaleSelection: 'scale-selection'
-    } as ScaleDataGridEvents,
-    defineCustomElement: defineScaleDataGrid
+    clientModule: clientComponents.ScaleDataGrid as StencilReactComponent<ScaleDataGridElement, ScaleDataGridEvents, JSX.ScaleDataGrid>,
+    serializeShadowRoot
 });
 
 export type ScaleDatePickerEvents = {
@@ -1007,7 +913,7 @@ export type ScaleDatePickerEvents = {
     onScaleFocus: EventName<ScaleDatePickerCustomEvent<DuetDatePickerFocusEvent>>
 };
 
-export const ScaleDatePicker: StencilReactComponent<ScaleDatePickerElement, ScaleDatePickerEvents> = /*@__PURE__*/ createComponent<ScaleDatePickerElement, ScaleDatePickerEvents>({
+export const ScaleDatePicker: StencilReactComponent<ScaleDatePickerElement, ScaleDatePickerEvents, JSX.ScaleDatePicker> = /*@__PURE__*/ createComponent<ScaleDatePickerElement, ScaleDatePickerEvents, JSX.ScaleDatePicker>({
     tagName: 'scale-date-picker',
     properties: {
         name: 'name',
@@ -1035,44 +941,32 @@ export const ScaleDatePicker: StencilReactComponent<ScaleDatePickerElement, Scal
         ariaDetailsId: 'aria-details-id'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleDatePickerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleChange: 'scale-change',
-        onScaleBlur: 'scale-blur',
-        onScaleFocus: 'scale-focus'
-    } as ScaleDatePickerEvents,
-    defineCustomElement: defineScaleDatePicker
+    clientModule: clientComponents.ScaleDatePicker as StencilReactComponent<ScaleDatePickerElement, ScaleDatePickerEvents, JSX.ScaleDatePicker>,
+    serializeShadowRoot
 });
 
 export type ScaleDividerEvents = NonNullable<unknown>;
 
-export const ScaleDivider: StencilReactComponent<ScaleDividerElement, ScaleDividerEvents> = /*@__PURE__*/ createComponent<ScaleDividerElement, ScaleDividerEvents>({
+export const ScaleDivider: StencilReactComponent<ScaleDividerElement, ScaleDividerEvents, JSX.ScaleDivider> = /*@__PURE__*/ createComponent<ScaleDividerElement, ScaleDividerEvents, JSX.ScaleDivider>({
     tagName: 'scale-divider',
     properties: {
         vertical: 'vertical',
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleDividerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleDividerEvents,
-    defineCustomElement: defineScaleDivider
+    clientModule: clientComponents.ScaleDivider as StencilReactComponent<ScaleDividerElement, ScaleDividerEvents, JSX.ScaleDivider>,
+    serializeShadowRoot
 });
 
 export type ScaleDropdownEvents = {
     onScaleInput: EventName<ScaleDropdownCustomEvent<KeyboardEvent>>,
     onScaleChange: EventName<ScaleDropdownCustomEvent<InputChangeEventDetail>>,
-    onScaleFocus: EventName<CustomEvent<void>>,
-    onScaleBlur: EventName<CustomEvent<void>>,
+    onScaleFocus: EventName<ScaleDropdownCustomEvent<void>>,
+    onScaleBlur: EventName<ScaleDropdownCustomEvent<void>>,
     onScaleKeydown: EventName<ScaleDropdownCustomEvent<KeyboardEvent>>
 };
 
-export const ScaleDropdown: StencilReactComponent<ScaleDropdownElement, ScaleDropdownEvents> = /*@__PURE__*/ createComponent<ScaleDropdownElement, ScaleDropdownEvents>({
+export const ScaleDropdown: StencilReactComponent<ScaleDropdownElement, ScaleDropdownEvents, JSX.ScaleDropdown> = /*@__PURE__*/ createComponent<ScaleDropdownElement, ScaleDropdownEvents, JSX.ScaleDropdown>({
     tagName: 'scale-dropdown',
     properties: {
         name: 'name',
@@ -1095,28 +989,18 @@ export const ScaleDropdown: StencilReactComponent<ScaleDropdownElement, ScaleDro
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleDropdownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleInput: 'scale-input',
-        onScaleChange: 'scale-change',
-        onScaleFocus: 'scale-focus',
-        onScaleBlur: 'scale-blur',
-        onScaleKeydown: 'scale-keydown'
-    } as ScaleDropdownEvents,
-    defineCustomElement: defineScaleDropdown
+    clientModule: clientComponents.ScaleDropdown as StencilReactComponent<ScaleDropdownElement, ScaleDropdownEvents, JSX.ScaleDropdown>,
+    serializeShadowRoot
 });
 
 export type ScaleDropdownSelectEvents = {
-    onScaleChange: EventName<CustomEvent<void>>,
-    onScaleFocus: EventName<CustomEvent<void>>,
-    onScaleBlur: EventName<CustomEvent<void>>,
-    onScaleKeydown: EventName<CustomEvent<void>>
+    onScaleChange: EventName<ScaleDropdownSelectCustomEvent<void>>,
+    onScaleFocus: EventName<ScaleDropdownSelectCustomEvent<void>>,
+    onScaleBlur: EventName<ScaleDropdownSelectCustomEvent<void>>,
+    onScaleKeydown: EventName<ScaleDropdownSelectCustomEvent<void>>
 };
 
-export const ScaleDropdownSelect: StencilReactComponent<ScaleDropdownSelectElement, ScaleDropdownSelectEvents> = /*@__PURE__*/ createComponent<ScaleDropdownSelectElement, ScaleDropdownSelectEvents>({
+export const ScaleDropdownSelect: StencilReactComponent<ScaleDropdownSelectElement, ScaleDropdownSelectEvents, JSX.ScaleDropdownSelect> = /*@__PURE__*/ createComponent<ScaleDropdownSelectElement, ScaleDropdownSelectEvents, JSX.ScaleDropdownSelect>({
     tagName: 'scale-dropdown-select',
     properties: {
         comboboxId: 'combobox-id',
@@ -1137,22 +1021,13 @@ export const ScaleDropdownSelect: StencilReactComponent<ScaleDropdownSelectEleme
         allowClear: 'allow-clear'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleDropdownSelectElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleChange: 'scale-change',
-        onScaleFocus: 'scale-focus',
-        onScaleBlur: 'scale-blur',
-        onScaleKeydown: 'scale-keydown'
-    } as ScaleDropdownSelectEvents,
-    defineCustomElement: defineScaleDropdownSelect
+    clientModule: clientComponents.ScaleDropdownSelect as StencilReactComponent<ScaleDropdownSelectElement, ScaleDropdownSelectEvents, JSX.ScaleDropdownSelect>,
+    serializeShadowRoot
 });
 
 export type ScaleDropdownSelectItemEvents = NonNullable<unknown>;
 
-export const ScaleDropdownSelectItem: StencilReactComponent<ScaleDropdownSelectItemElement, ScaleDropdownSelectItemEvents> = /*@__PURE__*/ createComponent<ScaleDropdownSelectItemElement, ScaleDropdownSelectItemEvents>({
+export const ScaleDropdownSelectItem: StencilReactComponent<ScaleDropdownSelectItemElement, ScaleDropdownSelectItemEvents, JSX.ScaleDropdownSelectItem> = /*@__PURE__*/ createComponent<ScaleDropdownSelectItemElement, ScaleDropdownSelectItemEvents, JSX.ScaleDropdownSelectItem>({
     tagName: 'scale-dropdown-select-item',
     properties: {
         selected: 'selected',
@@ -1161,17 +1036,13 @@ export const ScaleDropdownSelectItem: StencilReactComponent<ScaleDropdownSelectI
         disabled: 'disabled'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleDropdownSelectItemElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleDropdownSelectItemEvents,
-    defineCustomElement: defineScaleDropdownSelectItem
+    clientModule: clientComponents.ScaleDropdownSelectItem as StencilReactComponent<ScaleDropdownSelectItemElement, ScaleDropdownSelectItemEvents, JSX.ScaleDropdownSelectItem>,
+    serializeShadowRoot
 });
 
 export type ScaleGridEvents = NonNullable<unknown>;
 
-export const ScaleGrid: StencilReactComponent<ScaleGridElement, ScaleGridEvents> = /*@__PURE__*/ createComponent<ScaleGridElement, ScaleGridEvents>({
+export const ScaleGrid: StencilReactComponent<ScaleGridElement, ScaleGridEvents, JSX.ScaleGrid> = /*@__PURE__*/ createComponent<ScaleGridElement, ScaleGridEvents, JSX.ScaleGrid>({
     tagName: 'scale-grid',
     properties: {
         columns: 'columns',
@@ -1181,34 +1052,26 @@ export const ScaleGrid: StencilReactComponent<ScaleGridElement, ScaleGridEvents>
         maxWidth: 'max-width'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleGridElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleGridEvents,
-    defineCustomElement: defineScaleGrid
+    clientModule: clientComponents.ScaleGrid as StencilReactComponent<ScaleGridElement, ScaleGridEvents, JSX.ScaleGrid>,
+    serializeShadowRoot
 });
 
 export type ScaleGridItemEvents = NonNullable<unknown>;
 
-export const ScaleGridItem: StencilReactComponent<ScaleGridItemElement, ScaleGridItemEvents> = /*@__PURE__*/ createComponent<ScaleGridItemElement, ScaleGridItemEvents>({
+export const ScaleGridItem: StencilReactComponent<ScaleGridItemElement, ScaleGridItemEvents, JSX.ScaleGridItem> = /*@__PURE__*/ createComponent<ScaleGridItemElement, ScaleGridItemEvents, JSX.ScaleGridItem>({
     tagName: 'scale-grid-item',
     properties: {
         size: 'size',
         offset: 'offset'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleGridItemElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleGridItemEvents,
-    defineCustomElement: defineScaleGridItem
+    clientModule: clientComponents.ScaleGridItem as StencilReactComponent<ScaleGridItemElement, ScaleGridItemEvents, JSX.ScaleGridItem>,
+    serializeShadowRoot
 });
 
 export type ScaleHelperTextEvents = NonNullable<unknown>;
 
-export const ScaleHelperText: StencilReactComponent<ScaleHelperTextElement, ScaleHelperTextEvents> = /*@__PURE__*/ createComponent<ScaleHelperTextElement, ScaleHelperTextEvents>({
+export const ScaleHelperText: StencilReactComponent<ScaleHelperTextElement, ScaleHelperTextEvents, JSX.ScaleHelperText> = /*@__PURE__*/ createComponent<ScaleHelperTextElement, ScaleHelperTextEvents, JSX.ScaleHelperText>({
     tagName: 'scale-helper-text',
     properties: {
         helperText: 'helper-text',
@@ -1216,17 +1079,13 @@ export const ScaleHelperText: StencilReactComponent<ScaleHelperTextElement, Scal
         variant: 'variant'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleHelperTextElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleHelperTextEvents,
-    defineCustomElement: defineScaleHelperText
+    clientModule: clientComponents.ScaleHelperText as StencilReactComponent<ScaleHelperTextElement, ScaleHelperTextEvents, JSX.ScaleHelperText>,
+    serializeShadowRoot
 });
 
 export type ScaleIconEvents = NonNullable<unknown>;
 
-export const ScaleIcon: StencilReactComponent<ScaleIconElement, ScaleIconEvents> = /*@__PURE__*/ createComponent<ScaleIconElement, ScaleIconEvents>({
+export const ScaleIcon: StencilReactComponent<ScaleIconElement, ScaleIconEvents, JSX.ScaleIcon> = /*@__PURE__*/ createComponent<ScaleIconElement, ScaleIconEvents, JSX.ScaleIcon>({
     tagName: 'scale-icon',
     properties: {
         name: 'name',
@@ -1239,17 +1098,13 @@ export const ScaleIcon: StencilReactComponent<ScaleIconElement, ScaleIconEvents>
         accessibilityTitle: 'accessibility-title'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconEvents,
-    defineCustomElement: defineScaleIcon
+    clientModule: clientComponents.ScaleIcon as StencilReactComponent<ScaleIconElement, ScaleIconEvents, JSX.ScaleIcon>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionAddEvents = NonNullable<unknown>;
 
-export const ScaleIconActionAdd: StencilReactComponent<ScaleIconActionAddElement, ScaleIconActionAddEvents> = /*@__PURE__*/ createComponent<ScaleIconActionAddElement, ScaleIconActionAddEvents>({
+export const ScaleIconActionAdd: StencilReactComponent<ScaleIconActionAddElement, ScaleIconActionAddEvents, JSX.ScaleIconActionAdd> = /*@__PURE__*/ createComponent<ScaleIconActionAddElement, ScaleIconActionAddEvents, JSX.ScaleIconActionAdd>({
     tagName: 'scale-icon-action-add',
     properties: {
         size: 'size',
@@ -1261,17 +1116,13 @@ export const ScaleIconActionAdd: StencilReactComponent<ScaleIconActionAddElement
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionAddElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionAddEvents,
-    defineCustomElement: defineScaleIconActionAdd
+    clientModule: clientComponents.ScaleIconActionAdd as StencilReactComponent<ScaleIconActionAddElement, ScaleIconActionAddEvents, JSX.ScaleIconActionAdd>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionAddCardEvents = NonNullable<unknown>;
 
-export const ScaleIconActionAddCard: StencilReactComponent<ScaleIconActionAddCardElement, ScaleIconActionAddCardEvents> = /*@__PURE__*/ createComponent<ScaleIconActionAddCardElement, ScaleIconActionAddCardEvents>({
+export const ScaleIconActionAddCard: StencilReactComponent<ScaleIconActionAddCardElement, ScaleIconActionAddCardEvents, JSX.ScaleIconActionAddCard> = /*@__PURE__*/ createComponent<ScaleIconActionAddCardElement, ScaleIconActionAddCardEvents, JSX.ScaleIconActionAddCard>({
     tagName: 'scale-icon-action-add-card',
     properties: {
         size: 'size',
@@ -1283,17 +1134,13 @@ export const ScaleIconActionAddCard: StencilReactComponent<ScaleIconActionAddCar
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionAddCardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionAddCardEvents,
-    defineCustomElement: defineScaleIconActionAddCard
+    clientModule: clientComponents.ScaleIconActionAddCard as StencilReactComponent<ScaleIconActionAddCardElement, ScaleIconActionAddCardEvents, JSX.ScaleIconActionAddCard>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionArrangeEvents = NonNullable<unknown>;
 
-export const ScaleIconActionArrange: StencilReactComponent<ScaleIconActionArrangeElement, ScaleIconActionArrangeEvents> = /*@__PURE__*/ createComponent<ScaleIconActionArrangeElement, ScaleIconActionArrangeEvents>({
+export const ScaleIconActionArrange: StencilReactComponent<ScaleIconActionArrangeElement, ScaleIconActionArrangeEvents, JSX.ScaleIconActionArrange> = /*@__PURE__*/ createComponent<ScaleIconActionArrangeElement, ScaleIconActionArrangeEvents, JSX.ScaleIconActionArrange>({
     tagName: 'scale-icon-action-arrange',
     properties: {
         size: 'size',
@@ -1305,17 +1152,13 @@ export const ScaleIconActionArrange: StencilReactComponent<ScaleIconActionArrang
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionArrangeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionArrangeEvents,
-    defineCustomElement: defineScaleIconActionArrange
+    clientModule: clientComponents.ScaleIconActionArrange as StencilReactComponent<ScaleIconActionArrangeElement, ScaleIconActionArrangeEvents, JSX.ScaleIconActionArrange>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionArrowDownEvents = NonNullable<unknown>;
 
-export const ScaleIconActionArrowDown: StencilReactComponent<ScaleIconActionArrowDownElement, ScaleIconActionArrowDownEvents> = /*@__PURE__*/ createComponent<ScaleIconActionArrowDownElement, ScaleIconActionArrowDownEvents>({
+export const ScaleIconActionArrowDown: StencilReactComponent<ScaleIconActionArrowDownElement, ScaleIconActionArrowDownEvents, JSX.ScaleIconActionArrowDown> = /*@__PURE__*/ createComponent<ScaleIconActionArrowDownElement, ScaleIconActionArrowDownEvents, JSX.ScaleIconActionArrowDown>({
     tagName: 'scale-icon-action-arrow-down',
     properties: {
         size: 'size',
@@ -1327,17 +1170,13 @@ export const ScaleIconActionArrowDown: StencilReactComponent<ScaleIconActionArro
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionArrowDownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionArrowDownEvents,
-    defineCustomElement: defineScaleIconActionArrowDown
+    clientModule: clientComponents.ScaleIconActionArrowDown as StencilReactComponent<ScaleIconActionArrowDownElement, ScaleIconActionArrowDownEvents, JSX.ScaleIconActionArrowDown>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionArrowLeftEvents = NonNullable<unknown>;
 
-export const ScaleIconActionArrowLeft: StencilReactComponent<ScaleIconActionArrowLeftElement, ScaleIconActionArrowLeftEvents> = /*@__PURE__*/ createComponent<ScaleIconActionArrowLeftElement, ScaleIconActionArrowLeftEvents>({
+export const ScaleIconActionArrowLeft: StencilReactComponent<ScaleIconActionArrowLeftElement, ScaleIconActionArrowLeftEvents, JSX.ScaleIconActionArrowLeft> = /*@__PURE__*/ createComponent<ScaleIconActionArrowLeftElement, ScaleIconActionArrowLeftEvents, JSX.ScaleIconActionArrowLeft>({
     tagName: 'scale-icon-action-arrow-left',
     properties: {
         size: 'size',
@@ -1349,17 +1188,13 @@ export const ScaleIconActionArrowLeft: StencilReactComponent<ScaleIconActionArro
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionArrowLeftElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionArrowLeftEvents,
-    defineCustomElement: defineScaleIconActionArrowLeft
+    clientModule: clientComponents.ScaleIconActionArrowLeft as StencilReactComponent<ScaleIconActionArrowLeftElement, ScaleIconActionArrowLeftEvents, JSX.ScaleIconActionArrowLeft>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionArrowRightEvents = NonNullable<unknown>;
 
-export const ScaleIconActionArrowRight: StencilReactComponent<ScaleIconActionArrowRightElement, ScaleIconActionArrowRightEvents> = /*@__PURE__*/ createComponent<ScaleIconActionArrowRightElement, ScaleIconActionArrowRightEvents>({
+export const ScaleIconActionArrowRight: StencilReactComponent<ScaleIconActionArrowRightElement, ScaleIconActionArrowRightEvents, JSX.ScaleIconActionArrowRight> = /*@__PURE__*/ createComponent<ScaleIconActionArrowRightElement, ScaleIconActionArrowRightEvents, JSX.ScaleIconActionArrowRight>({
     tagName: 'scale-icon-action-arrow-right',
     properties: {
         size: 'size',
@@ -1371,17 +1206,13 @@ export const ScaleIconActionArrowRight: StencilReactComponent<ScaleIconActionArr
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionArrowRightElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionArrowRightEvents,
-    defineCustomElement: defineScaleIconActionArrowRight
+    clientModule: clientComponents.ScaleIconActionArrowRight as StencilReactComponent<ScaleIconActionArrowRightElement, ScaleIconActionArrowRightEvents, JSX.ScaleIconActionArrowRight>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionArrowUpEvents = NonNullable<unknown>;
 
-export const ScaleIconActionArrowUp: StencilReactComponent<ScaleIconActionArrowUpElement, ScaleIconActionArrowUpEvents> = /*@__PURE__*/ createComponent<ScaleIconActionArrowUpElement, ScaleIconActionArrowUpEvents>({
+export const ScaleIconActionArrowUp: StencilReactComponent<ScaleIconActionArrowUpElement, ScaleIconActionArrowUpEvents, JSX.ScaleIconActionArrowUp> = /*@__PURE__*/ createComponent<ScaleIconActionArrowUpElement, ScaleIconActionArrowUpEvents, JSX.ScaleIconActionArrowUp>({
     tagName: 'scale-icon-action-arrow-up',
     properties: {
         size: 'size',
@@ -1393,17 +1224,13 @@ export const ScaleIconActionArrowUp: StencilReactComponent<ScaleIconActionArrowU
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionArrowUpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionArrowUpEvents,
-    defineCustomElement: defineScaleIconActionArrowUp
+    clientModule: clientComponents.ScaleIconActionArrowUp as StencilReactComponent<ScaleIconActionArrowUpElement, ScaleIconActionArrowUpEvents, JSX.ScaleIconActionArrowUp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionAutoLoginEvents = NonNullable<unknown>;
 
-export const ScaleIconActionAutoLogin: StencilReactComponent<ScaleIconActionAutoLoginElement, ScaleIconActionAutoLoginEvents> = /*@__PURE__*/ createComponent<ScaleIconActionAutoLoginElement, ScaleIconActionAutoLoginEvents>({
+export const ScaleIconActionAutoLogin: StencilReactComponent<ScaleIconActionAutoLoginElement, ScaleIconActionAutoLoginEvents, JSX.ScaleIconActionAutoLogin> = /*@__PURE__*/ createComponent<ScaleIconActionAutoLoginElement, ScaleIconActionAutoLoginEvents, JSX.ScaleIconActionAutoLogin>({
     tagName: 'scale-icon-action-auto-login',
     properties: {
         size: 'size',
@@ -1415,17 +1242,13 @@ export const ScaleIconActionAutoLogin: StencilReactComponent<ScaleIconActionAuto
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionAutoLoginElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionAutoLoginEvents,
-    defineCustomElement: defineScaleIconActionAutoLogin
+    clientModule: clientComponents.ScaleIconActionAutoLogin as StencilReactComponent<ScaleIconActionAutoLoginElement, ScaleIconActionAutoLoginEvents, JSX.ScaleIconActionAutoLogin>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionBackspaceEvents = NonNullable<unknown>;
 
-export const ScaleIconActionBackspace: StencilReactComponent<ScaleIconActionBackspaceElement, ScaleIconActionBackspaceEvents> = /*@__PURE__*/ createComponent<ScaleIconActionBackspaceElement, ScaleIconActionBackspaceEvents>({
+export const ScaleIconActionBackspace: StencilReactComponent<ScaleIconActionBackspaceElement, ScaleIconActionBackspaceEvents, JSX.ScaleIconActionBackspace> = /*@__PURE__*/ createComponent<ScaleIconActionBackspaceElement, ScaleIconActionBackspaceEvents, JSX.ScaleIconActionBackspace>({
     tagName: 'scale-icon-action-backspace',
     properties: {
         size: 'size',
@@ -1437,17 +1260,13 @@ export const ScaleIconActionBackspace: StencilReactComponent<ScaleIconActionBack
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionBackspaceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionBackspaceEvents,
-    defineCustomElement: defineScaleIconActionBackspace
+    clientModule: clientComponents.ScaleIconActionBackspace as StencilReactComponent<ScaleIconActionBackspaceElement, ScaleIconActionBackspaceEvents, JSX.ScaleIconActionBackspace>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionBackwardEvents = NonNullable<unknown>;
 
-export const ScaleIconActionBackward: StencilReactComponent<ScaleIconActionBackwardElement, ScaleIconActionBackwardEvents> = /*@__PURE__*/ createComponent<ScaleIconActionBackwardElement, ScaleIconActionBackwardEvents>({
+export const ScaleIconActionBackward: StencilReactComponent<ScaleIconActionBackwardElement, ScaleIconActionBackwardEvents, JSX.ScaleIconActionBackward> = /*@__PURE__*/ createComponent<ScaleIconActionBackwardElement, ScaleIconActionBackwardEvents, JSX.ScaleIconActionBackward>({
     tagName: 'scale-icon-action-backward',
     properties: {
         size: 'size',
@@ -1459,17 +1278,13 @@ export const ScaleIconActionBackward: StencilReactComponent<ScaleIconActionBackw
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionBackwardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionBackwardEvents,
-    defineCustomElement: defineScaleIconActionBackward
+    clientModule: clientComponents.ScaleIconActionBackward as StencilReactComponent<ScaleIconActionBackwardElement, ScaleIconActionBackwardEvents, JSX.ScaleIconActionBackward>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionChangelogEvents = NonNullable<unknown>;
 
-export const ScaleIconActionChangelog: StencilReactComponent<ScaleIconActionChangelogElement, ScaleIconActionChangelogEvents> = /*@__PURE__*/ createComponent<ScaleIconActionChangelogElement, ScaleIconActionChangelogEvents>({
+export const ScaleIconActionChangelog: StencilReactComponent<ScaleIconActionChangelogElement, ScaleIconActionChangelogEvents, JSX.ScaleIconActionChangelog> = /*@__PURE__*/ createComponent<ScaleIconActionChangelogElement, ScaleIconActionChangelogEvents, JSX.ScaleIconActionChangelog>({
     tagName: 'scale-icon-action-changelog',
     properties: {
         size: 'size',
@@ -1481,17 +1296,13 @@ export const ScaleIconActionChangelog: StencilReactComponent<ScaleIconActionChan
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionChangelogElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionChangelogEvents,
-    defineCustomElement: defineScaleIconActionChangelog
+    clientModule: clientComponents.ScaleIconActionChangelog as StencilReactComponent<ScaleIconActionChangelogElement, ScaleIconActionChangelogEvents, JSX.ScaleIconActionChangelog>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionCheckmarkEvents = NonNullable<unknown>;
 
-export const ScaleIconActionCheckmark: StencilReactComponent<ScaleIconActionCheckmarkElement, ScaleIconActionCheckmarkEvents> = /*@__PURE__*/ createComponent<ScaleIconActionCheckmarkElement, ScaleIconActionCheckmarkEvents>({
+export const ScaleIconActionCheckmark: StencilReactComponent<ScaleIconActionCheckmarkElement, ScaleIconActionCheckmarkEvents, JSX.ScaleIconActionCheckmark> = /*@__PURE__*/ createComponent<ScaleIconActionCheckmarkElement, ScaleIconActionCheckmarkEvents, JSX.ScaleIconActionCheckmark>({
     tagName: 'scale-icon-action-checkmark',
     properties: {
         size: 'size',
@@ -1503,17 +1314,13 @@ export const ScaleIconActionCheckmark: StencilReactComponent<ScaleIconActionChec
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionCheckmarkElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionCheckmarkEvents,
-    defineCustomElement: defineScaleIconActionCheckmark
+    clientModule: clientComponents.ScaleIconActionCheckmark as StencilReactComponent<ScaleIconActionCheckmarkElement, ScaleIconActionCheckmarkEvents, JSX.ScaleIconActionCheckmark>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionCircleAddEvents = NonNullable<unknown>;
 
-export const ScaleIconActionCircleAdd: StencilReactComponent<ScaleIconActionCircleAddElement, ScaleIconActionCircleAddEvents> = /*@__PURE__*/ createComponent<ScaleIconActionCircleAddElement, ScaleIconActionCircleAddEvents>({
+export const ScaleIconActionCircleAdd: StencilReactComponent<ScaleIconActionCircleAddElement, ScaleIconActionCircleAddEvents, JSX.ScaleIconActionCircleAdd> = /*@__PURE__*/ createComponent<ScaleIconActionCircleAddElement, ScaleIconActionCircleAddEvents, JSX.ScaleIconActionCircleAdd>({
     tagName: 'scale-icon-action-circle-add',
     properties: {
         size: 'size',
@@ -1525,17 +1332,13 @@ export const ScaleIconActionCircleAdd: StencilReactComponent<ScaleIconActionCirc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionCircleAddElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionCircleAddEvents,
-    defineCustomElement: defineScaleIconActionCircleAdd
+    clientModule: clientComponents.ScaleIconActionCircleAdd as StencilReactComponent<ScaleIconActionCircleAddElement, ScaleIconActionCircleAddEvents, JSX.ScaleIconActionCircleAdd>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionCircleCloseEvents = NonNullable<unknown>;
 
-export const ScaleIconActionCircleClose: StencilReactComponent<ScaleIconActionCircleCloseElement, ScaleIconActionCircleCloseEvents> = /*@__PURE__*/ createComponent<ScaleIconActionCircleCloseElement, ScaleIconActionCircleCloseEvents>({
+export const ScaleIconActionCircleClose: StencilReactComponent<ScaleIconActionCircleCloseElement, ScaleIconActionCircleCloseEvents, JSX.ScaleIconActionCircleClose> = /*@__PURE__*/ createComponent<ScaleIconActionCircleCloseElement, ScaleIconActionCircleCloseEvents, JSX.ScaleIconActionCircleClose>({
     tagName: 'scale-icon-action-circle-close',
     properties: {
         size: 'size',
@@ -1547,17 +1350,13 @@ export const ScaleIconActionCircleClose: StencilReactComponent<ScaleIconActionCi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionCircleCloseElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionCircleCloseEvents,
-    defineCustomElement: defineScaleIconActionCircleClose
+    clientModule: clientComponents.ScaleIconActionCircleClose as StencilReactComponent<ScaleIconActionCircleCloseElement, ScaleIconActionCircleCloseEvents, JSX.ScaleIconActionCircleClose>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionCloseEvents = NonNullable<unknown>;
 
-export const ScaleIconActionClose: StencilReactComponent<ScaleIconActionCloseElement, ScaleIconActionCloseEvents> = /*@__PURE__*/ createComponent<ScaleIconActionCloseElement, ScaleIconActionCloseEvents>({
+export const ScaleIconActionClose: StencilReactComponent<ScaleIconActionCloseElement, ScaleIconActionCloseEvents, JSX.ScaleIconActionClose> = /*@__PURE__*/ createComponent<ScaleIconActionCloseElement, ScaleIconActionCloseEvents, JSX.ScaleIconActionClose>({
     tagName: 'scale-icon-action-close',
     properties: {
         size: 'size',
@@ -1569,17 +1368,13 @@ export const ScaleIconActionClose: StencilReactComponent<ScaleIconActionCloseEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionCloseElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionCloseEvents,
-    defineCustomElement: defineScaleIconActionClose
+    clientModule: clientComponents.ScaleIconActionClose as StencilReactComponent<ScaleIconActionCloseElement, ScaleIconActionCloseEvents, JSX.ScaleIconActionClose>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionCompareEvents = NonNullable<unknown>;
 
-export const ScaleIconActionCompare: StencilReactComponent<ScaleIconActionCompareElement, ScaleIconActionCompareEvents> = /*@__PURE__*/ createComponent<ScaleIconActionCompareElement, ScaleIconActionCompareEvents>({
+export const ScaleIconActionCompare: StencilReactComponent<ScaleIconActionCompareElement, ScaleIconActionCompareEvents, JSX.ScaleIconActionCompare> = /*@__PURE__*/ createComponent<ScaleIconActionCompareElement, ScaleIconActionCompareEvents, JSX.ScaleIconActionCompare>({
     tagName: 'scale-icon-action-compare',
     properties: {
         size: 'size',
@@ -1591,17 +1386,13 @@ export const ScaleIconActionCompare: StencilReactComponent<ScaleIconActionCompar
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionCompareElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionCompareEvents,
-    defineCustomElement: defineScaleIconActionCompare
+    clientModule: clientComponents.ScaleIconActionCompare as StencilReactComponent<ScaleIconActionCompareElement, ScaleIconActionCompareEvents, JSX.ScaleIconActionCompare>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionCopyPasteEvents = NonNullable<unknown>;
 
-export const ScaleIconActionCopyPaste: StencilReactComponent<ScaleIconActionCopyPasteElement, ScaleIconActionCopyPasteEvents> = /*@__PURE__*/ createComponent<ScaleIconActionCopyPasteElement, ScaleIconActionCopyPasteEvents>({
+export const ScaleIconActionCopyPaste: StencilReactComponent<ScaleIconActionCopyPasteElement, ScaleIconActionCopyPasteEvents, JSX.ScaleIconActionCopyPaste> = /*@__PURE__*/ createComponent<ScaleIconActionCopyPasteElement, ScaleIconActionCopyPasteEvents, JSX.ScaleIconActionCopyPaste>({
     tagName: 'scale-icon-action-copy-paste',
     properties: {
         size: 'size',
@@ -1613,17 +1404,13 @@ export const ScaleIconActionCopyPaste: StencilReactComponent<ScaleIconActionCopy
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionCopyPasteElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionCopyPasteEvents,
-    defineCustomElement: defineScaleIconActionCopyPaste
+    clientModule: clientComponents.ScaleIconActionCopyPaste as StencilReactComponent<ScaleIconActionCopyPasteElement, ScaleIconActionCopyPasteEvents, JSX.ScaleIconActionCopyPaste>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionCutPasteEvents = NonNullable<unknown>;
 
-export const ScaleIconActionCutPaste: StencilReactComponent<ScaleIconActionCutPasteElement, ScaleIconActionCutPasteEvents> = /*@__PURE__*/ createComponent<ScaleIconActionCutPasteElement, ScaleIconActionCutPasteEvents>({
+export const ScaleIconActionCutPaste: StencilReactComponent<ScaleIconActionCutPasteElement, ScaleIconActionCutPasteEvents, JSX.ScaleIconActionCutPaste> = /*@__PURE__*/ createComponent<ScaleIconActionCutPasteElement, ScaleIconActionCutPasteEvents, JSX.ScaleIconActionCutPaste>({
     tagName: 'scale-icon-action-cut-paste',
     properties: {
         size: 'size',
@@ -1635,17 +1422,13 @@ export const ScaleIconActionCutPaste: StencilReactComponent<ScaleIconActionCutPa
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionCutPasteElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionCutPasteEvents,
-    defineCustomElement: defineScaleIconActionCutPaste
+    clientModule: clientComponents.ScaleIconActionCutPaste as StencilReactComponent<ScaleIconActionCutPasteElement, ScaleIconActionCutPasteEvents, JSX.ScaleIconActionCutPaste>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionDisabledMicrophoneEvents = NonNullable<unknown>;
 
-export const ScaleIconActionDisabledMicrophone: StencilReactComponent<ScaleIconActionDisabledMicrophoneElement, ScaleIconActionDisabledMicrophoneEvents> = /*@__PURE__*/ createComponent<ScaleIconActionDisabledMicrophoneElement, ScaleIconActionDisabledMicrophoneEvents>({
+export const ScaleIconActionDisabledMicrophone: StencilReactComponent<ScaleIconActionDisabledMicrophoneElement, ScaleIconActionDisabledMicrophoneEvents, JSX.ScaleIconActionDisabledMicrophone> = /*@__PURE__*/ createComponent<ScaleIconActionDisabledMicrophoneElement, ScaleIconActionDisabledMicrophoneEvents, JSX.ScaleIconActionDisabledMicrophone>({
     tagName: 'scale-icon-action-disabled-microphone',
     properties: {
         size: 'size',
@@ -1657,17 +1440,13 @@ export const ScaleIconActionDisabledMicrophone: StencilReactComponent<ScaleIconA
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionDisabledMicrophoneElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionDisabledMicrophoneEvents,
-    defineCustomElement: defineScaleIconActionDisabledMicrophone
+    clientModule: clientComponents.ScaleIconActionDisabledMicrophone as StencilReactComponent<ScaleIconActionDisabledMicrophoneElement, ScaleIconActionDisabledMicrophoneEvents, JSX.ScaleIconActionDisabledMicrophone>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionDownloadEvents = NonNullable<unknown>;
 
-export const ScaleIconActionDownload: StencilReactComponent<ScaleIconActionDownloadElement, ScaleIconActionDownloadEvents> = /*@__PURE__*/ createComponent<ScaleIconActionDownloadElement, ScaleIconActionDownloadEvents>({
+export const ScaleIconActionDownload: StencilReactComponent<ScaleIconActionDownloadElement, ScaleIconActionDownloadEvents, JSX.ScaleIconActionDownload> = /*@__PURE__*/ createComponent<ScaleIconActionDownloadElement, ScaleIconActionDownloadEvents, JSX.ScaleIconActionDownload>({
     tagName: 'scale-icon-action-download',
     properties: {
         size: 'size',
@@ -1679,17 +1458,13 @@ export const ScaleIconActionDownload: StencilReactComponent<ScaleIconActionDownl
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionDownloadElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionDownloadEvents,
-    defineCustomElement: defineScaleIconActionDownload
+    clientModule: clientComponents.ScaleIconActionDownload as StencilReactComponent<ScaleIconActionDownloadElement, ScaleIconActionDownloadEvents, JSX.ScaleIconActionDownload>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionDownloadFromCloudEvents = NonNullable<unknown>;
 
-export const ScaleIconActionDownloadFromCloud: StencilReactComponent<ScaleIconActionDownloadFromCloudElement, ScaleIconActionDownloadFromCloudEvents> = /*@__PURE__*/ createComponent<ScaleIconActionDownloadFromCloudElement, ScaleIconActionDownloadFromCloudEvents>({
+export const ScaleIconActionDownloadFromCloud: StencilReactComponent<ScaleIconActionDownloadFromCloudElement, ScaleIconActionDownloadFromCloudEvents, JSX.ScaleIconActionDownloadFromCloud> = /*@__PURE__*/ createComponent<ScaleIconActionDownloadFromCloudElement, ScaleIconActionDownloadFromCloudEvents, JSX.ScaleIconActionDownloadFromCloud>({
     tagName: 'scale-icon-action-download-from-cloud',
     properties: {
         size: 'size',
@@ -1701,17 +1476,13 @@ export const ScaleIconActionDownloadFromCloud: StencilReactComponent<ScaleIconAc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionDownloadFromCloudElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionDownloadFromCloudEvents,
-    defineCustomElement: defineScaleIconActionDownloadFromCloud
+    clientModule: clientComponents.ScaleIconActionDownloadFromCloud as StencilReactComponent<ScaleIconActionDownloadFromCloudElement, ScaleIconActionDownloadFromCloudEvents, JSX.ScaleIconActionDownloadFromCloud>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionDragAndDropEvents = NonNullable<unknown>;
 
-export const ScaleIconActionDragAndDrop: StencilReactComponent<ScaleIconActionDragAndDropElement, ScaleIconActionDragAndDropEvents> = /*@__PURE__*/ createComponent<ScaleIconActionDragAndDropElement, ScaleIconActionDragAndDropEvents>({
+export const ScaleIconActionDragAndDrop: StencilReactComponent<ScaleIconActionDragAndDropElement, ScaleIconActionDragAndDropEvents, JSX.ScaleIconActionDragAndDrop> = /*@__PURE__*/ createComponent<ScaleIconActionDragAndDropElement, ScaleIconActionDragAndDropEvents, JSX.ScaleIconActionDragAndDrop>({
     tagName: 'scale-icon-action-drag-and-drop',
     properties: {
         size: 'size',
@@ -1723,17 +1494,13 @@ export const ScaleIconActionDragAndDrop: StencilReactComponent<ScaleIconActionDr
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionDragAndDropElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionDragAndDropEvents,
-    defineCustomElement: defineScaleIconActionDragAndDrop
+    clientModule: clientComponents.ScaleIconActionDragAndDrop as StencilReactComponent<ScaleIconActionDragAndDropElement, ScaleIconActionDragAndDropEvents, JSX.ScaleIconActionDragAndDrop>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionEditEvents = NonNullable<unknown>;
 
-export const ScaleIconActionEdit: StencilReactComponent<ScaleIconActionEditElement, ScaleIconActionEditEvents> = /*@__PURE__*/ createComponent<ScaleIconActionEditElement, ScaleIconActionEditEvents>({
+export const ScaleIconActionEdit: StencilReactComponent<ScaleIconActionEditElement, ScaleIconActionEditEvents, JSX.ScaleIconActionEdit> = /*@__PURE__*/ createComponent<ScaleIconActionEditElement, ScaleIconActionEditEvents, JSX.ScaleIconActionEdit>({
     tagName: 'scale-icon-action-edit',
     properties: {
         size: 'size',
@@ -1745,17 +1512,13 @@ export const ScaleIconActionEdit: StencilReactComponent<ScaleIconActionEditEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionEditElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionEditEvents,
-    defineCustomElement: defineScaleIconActionEdit
+    clientModule: clientComponents.ScaleIconActionEdit as StencilReactComponent<ScaleIconActionEditElement, ScaleIconActionEditEvents, JSX.ScaleIconActionEdit>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionExportEvents = NonNullable<unknown>;
 
-export const ScaleIconActionExport: StencilReactComponent<ScaleIconActionExportElement, ScaleIconActionExportEvents> = /*@__PURE__*/ createComponent<ScaleIconActionExportElement, ScaleIconActionExportEvents>({
+export const ScaleIconActionExport: StencilReactComponent<ScaleIconActionExportElement, ScaleIconActionExportEvents, JSX.ScaleIconActionExport> = /*@__PURE__*/ createComponent<ScaleIconActionExportElement, ScaleIconActionExportEvents, JSX.ScaleIconActionExport>({
     tagName: 'scale-icon-action-export',
     properties: {
         size: 'size',
@@ -1767,17 +1530,13 @@ export const ScaleIconActionExport: StencilReactComponent<ScaleIconActionExportE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionExportElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionExportEvents,
-    defineCustomElement: defineScaleIconActionExport
+    clientModule: clientComponents.ScaleIconActionExport as StencilReactComponent<ScaleIconActionExportElement, ScaleIconActionExportEvents, JSX.ScaleIconActionExport>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionFastForwardEvents = NonNullable<unknown>;
 
-export const ScaleIconActionFastForward: StencilReactComponent<ScaleIconActionFastForwardElement, ScaleIconActionFastForwardEvents> = /*@__PURE__*/ createComponent<ScaleIconActionFastForwardElement, ScaleIconActionFastForwardEvents>({
+export const ScaleIconActionFastForward: StencilReactComponent<ScaleIconActionFastForwardElement, ScaleIconActionFastForwardEvents, JSX.ScaleIconActionFastForward> = /*@__PURE__*/ createComponent<ScaleIconActionFastForwardElement, ScaleIconActionFastForwardEvents, JSX.ScaleIconActionFastForward>({
     tagName: 'scale-icon-action-fast-forward',
     properties: {
         size: 'size',
@@ -1789,17 +1548,13 @@ export const ScaleIconActionFastForward: StencilReactComponent<ScaleIconActionFa
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionFastForwardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionFastForwardEvents,
-    defineCustomElement: defineScaleIconActionFastForward
+    clientModule: clientComponents.ScaleIconActionFastForward as StencilReactComponent<ScaleIconActionFastForwardElement, ScaleIconActionFastForwardEvents, JSX.ScaleIconActionFastForward>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionFastForwardNbEvents = NonNullable<unknown>;
 
-export const ScaleIconActionFastForwardNb: StencilReactComponent<ScaleIconActionFastForwardNbElement, ScaleIconActionFastForwardNbEvents> = /*@__PURE__*/ createComponent<ScaleIconActionFastForwardNbElement, ScaleIconActionFastForwardNbEvents>({
+export const ScaleIconActionFastForwardNb: StencilReactComponent<ScaleIconActionFastForwardNbElement, ScaleIconActionFastForwardNbEvents, JSX.ScaleIconActionFastForwardNb> = /*@__PURE__*/ createComponent<ScaleIconActionFastForwardNbElement, ScaleIconActionFastForwardNbEvents, JSX.ScaleIconActionFastForwardNb>({
     tagName: 'scale-icon-action-fast-forward-nb',
     properties: {
         size: 'size',
@@ -1811,17 +1566,13 @@ export const ScaleIconActionFastForwardNb: StencilReactComponent<ScaleIconAction
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionFastForwardNbElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionFastForwardNbEvents,
-    defineCustomElement: defineScaleIconActionFastForwardNb
+    clientModule: clientComponents.ScaleIconActionFastForwardNb as StencilReactComponent<ScaleIconActionFastForwardNbElement, ScaleIconActionFastForwardNbEvents, JSX.ScaleIconActionFastForwardNb>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionFavoriteEvents = NonNullable<unknown>;
 
-export const ScaleIconActionFavorite: StencilReactComponent<ScaleIconActionFavoriteElement, ScaleIconActionFavoriteEvents> = /*@__PURE__*/ createComponent<ScaleIconActionFavoriteElement, ScaleIconActionFavoriteEvents>({
+export const ScaleIconActionFavorite: StencilReactComponent<ScaleIconActionFavoriteElement, ScaleIconActionFavoriteEvents, JSX.ScaleIconActionFavorite> = /*@__PURE__*/ createComponent<ScaleIconActionFavoriteElement, ScaleIconActionFavoriteEvents, JSX.ScaleIconActionFavorite>({
     tagName: 'scale-icon-action-favorite',
     properties: {
         size: 'size',
@@ -1833,17 +1584,13 @@ export const ScaleIconActionFavorite: StencilReactComponent<ScaleIconActionFavor
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionFavoriteElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionFavoriteEvents,
-    defineCustomElement: defineScaleIconActionFavorite
+    clientModule: clientComponents.ScaleIconActionFavorite as StencilReactComponent<ScaleIconActionFavoriteElement, ScaleIconActionFavoriteEvents, JSX.ScaleIconActionFavorite>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionFilterEvents = NonNullable<unknown>;
 
-export const ScaleIconActionFilter: StencilReactComponent<ScaleIconActionFilterElement, ScaleIconActionFilterEvents> = /*@__PURE__*/ createComponent<ScaleIconActionFilterElement, ScaleIconActionFilterEvents>({
+export const ScaleIconActionFilter: StencilReactComponent<ScaleIconActionFilterElement, ScaleIconActionFilterEvents, JSX.ScaleIconActionFilter> = /*@__PURE__*/ createComponent<ScaleIconActionFilterElement, ScaleIconActionFilterEvents, JSX.ScaleIconActionFilter>({
     tagName: 'scale-icon-action-filter',
     properties: {
         size: 'size',
@@ -1855,17 +1602,13 @@ export const ScaleIconActionFilter: StencilReactComponent<ScaleIconActionFilterE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionFilterElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionFilterEvents,
-    defineCustomElement: defineScaleIconActionFilter
+    clientModule: clientComponents.ScaleIconActionFilter as StencilReactComponent<ScaleIconActionFilterElement, ScaleIconActionFilterEvents, JSX.ScaleIconActionFilter>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionFilter2Events = NonNullable<unknown>;
 
-export const ScaleIconActionFilter2: StencilReactComponent<ScaleIconActionFilter2Element, ScaleIconActionFilter2Events> = /*@__PURE__*/ createComponent<ScaleIconActionFilter2Element, ScaleIconActionFilter2Events>({
+export const ScaleIconActionFilter2: StencilReactComponent<ScaleIconActionFilter2Element, ScaleIconActionFilter2Events, JSX.ScaleIconActionFilter2> = /*@__PURE__*/ createComponent<ScaleIconActionFilter2Element, ScaleIconActionFilter2Events, JSX.ScaleIconActionFilter2>({
     tagName: 'scale-icon-action-filter-2',
     properties: {
         size: 'size',
@@ -1877,17 +1620,13 @@ export const ScaleIconActionFilter2: StencilReactComponent<ScaleIconActionFilter
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionFilter2Element,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionFilter2Events,
-    defineCustomElement: defineScaleIconActionFilter2
+    clientModule: clientComponents.ScaleIconActionFilter2 as StencilReactComponent<ScaleIconActionFilter2Element, ScaleIconActionFilter2Events, JSX.ScaleIconActionFilter2>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionForwardEvents = NonNullable<unknown>;
 
-export const ScaleIconActionForward: StencilReactComponent<ScaleIconActionForwardElement, ScaleIconActionForwardEvents> = /*@__PURE__*/ createComponent<ScaleIconActionForwardElement, ScaleIconActionForwardEvents>({
+export const ScaleIconActionForward: StencilReactComponent<ScaleIconActionForwardElement, ScaleIconActionForwardEvents, JSX.ScaleIconActionForward> = /*@__PURE__*/ createComponent<ScaleIconActionForwardElement, ScaleIconActionForwardEvents, JSX.ScaleIconActionForward>({
     tagName: 'scale-icon-action-forward',
     properties: {
         size: 'size',
@@ -1899,17 +1638,13 @@ export const ScaleIconActionForward: StencilReactComponent<ScaleIconActionForwar
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionForwardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionForwardEvents,
-    defineCustomElement: defineScaleIconActionForward
+    clientModule: clientComponents.ScaleIconActionForward as StencilReactComponent<ScaleIconActionForwardElement, ScaleIconActionForwardEvents, JSX.ScaleIconActionForward>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionFullScreenEvents = NonNullable<unknown>;
 
-export const ScaleIconActionFullScreen: StencilReactComponent<ScaleIconActionFullScreenElement, ScaleIconActionFullScreenEvents> = /*@__PURE__*/ createComponent<ScaleIconActionFullScreenElement, ScaleIconActionFullScreenEvents>({
+export const ScaleIconActionFullScreen: StencilReactComponent<ScaleIconActionFullScreenElement, ScaleIconActionFullScreenEvents, JSX.ScaleIconActionFullScreen> = /*@__PURE__*/ createComponent<ScaleIconActionFullScreenElement, ScaleIconActionFullScreenEvents, JSX.ScaleIconActionFullScreen>({
     tagName: 'scale-icon-action-full-screen',
     properties: {
         size: 'size',
@@ -1921,17 +1656,13 @@ export const ScaleIconActionFullScreen: StencilReactComponent<ScaleIconActionFul
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionFullScreenElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionFullScreenEvents,
-    defineCustomElement: defineScaleIconActionFullScreen
+    clientModule: clientComponents.ScaleIconActionFullScreen as StencilReactComponent<ScaleIconActionFullScreenElement, ScaleIconActionFullScreenEvents, JSX.ScaleIconActionFullScreen>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionHidePasswordEvents = NonNullable<unknown>;
 
-export const ScaleIconActionHidePassword: StencilReactComponent<ScaleIconActionHidePasswordElement, ScaleIconActionHidePasswordEvents> = /*@__PURE__*/ createComponent<ScaleIconActionHidePasswordElement, ScaleIconActionHidePasswordEvents>({
+export const ScaleIconActionHidePassword: StencilReactComponent<ScaleIconActionHidePasswordElement, ScaleIconActionHidePasswordEvents, JSX.ScaleIconActionHidePassword> = /*@__PURE__*/ createComponent<ScaleIconActionHidePasswordElement, ScaleIconActionHidePasswordEvents, JSX.ScaleIconActionHidePassword>({
     tagName: 'scale-icon-action-hide-password',
     properties: {
         size: 'size',
@@ -1943,17 +1674,13 @@ export const ScaleIconActionHidePassword: StencilReactComponent<ScaleIconActionH
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionHidePasswordElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionHidePasswordEvents,
-    defineCustomElement: defineScaleIconActionHidePassword
+    clientModule: clientComponents.ScaleIconActionHidePassword as StencilReactComponent<ScaleIconActionHidePasswordElement, ScaleIconActionHidePasswordEvents, JSX.ScaleIconActionHidePassword>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionImportEvents = NonNullable<unknown>;
 
-export const ScaleIconActionImport: StencilReactComponent<ScaleIconActionImportElement, ScaleIconActionImportEvents> = /*@__PURE__*/ createComponent<ScaleIconActionImportElement, ScaleIconActionImportEvents>({
+export const ScaleIconActionImport: StencilReactComponent<ScaleIconActionImportElement, ScaleIconActionImportEvents, JSX.ScaleIconActionImport> = /*@__PURE__*/ createComponent<ScaleIconActionImportElement, ScaleIconActionImportEvents, JSX.ScaleIconActionImport>({
     tagName: 'scale-icon-action-import',
     properties: {
         size: 'size',
@@ -1965,17 +1692,13 @@ export const ScaleIconActionImport: StencilReactComponent<ScaleIconActionImportE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionImportElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionImportEvents,
-    defineCustomElement: defineScaleIconActionImport
+    clientModule: clientComponents.ScaleIconActionImport as StencilReactComponent<ScaleIconActionImportElement, ScaleIconActionImportEvents, JSX.ScaleIconActionImport>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionInstallEvents = NonNullable<unknown>;
 
-export const ScaleIconActionInstall: StencilReactComponent<ScaleIconActionInstallElement, ScaleIconActionInstallEvents> = /*@__PURE__*/ createComponent<ScaleIconActionInstallElement, ScaleIconActionInstallEvents>({
+export const ScaleIconActionInstall: StencilReactComponent<ScaleIconActionInstallElement, ScaleIconActionInstallEvents, JSX.ScaleIconActionInstall> = /*@__PURE__*/ createComponent<ScaleIconActionInstallElement, ScaleIconActionInstallEvents, JSX.ScaleIconActionInstall>({
     tagName: 'scale-icon-action-install',
     properties: {
         size: 'size',
@@ -1987,17 +1710,13 @@ export const ScaleIconActionInstall: StencilReactComponent<ScaleIconActionInstal
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionInstallElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionInstallEvents,
-    defineCustomElement: defineScaleIconActionInstall
+    clientModule: clientComponents.ScaleIconActionInstall as StencilReactComponent<ScaleIconActionInstallElement, ScaleIconActionInstallEvents, JSX.ScaleIconActionInstall>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionLaunchEvents = NonNullable<unknown>;
 
-export const ScaleIconActionLaunch: StencilReactComponent<ScaleIconActionLaunchElement, ScaleIconActionLaunchEvents> = /*@__PURE__*/ createComponent<ScaleIconActionLaunchElement, ScaleIconActionLaunchEvents>({
+export const ScaleIconActionLaunch: StencilReactComponent<ScaleIconActionLaunchElement, ScaleIconActionLaunchEvents, JSX.ScaleIconActionLaunch> = /*@__PURE__*/ createComponent<ScaleIconActionLaunchElement, ScaleIconActionLaunchEvents, JSX.ScaleIconActionLaunch>({
     tagName: 'scale-icon-action-launch',
     properties: {
         size: 'size',
@@ -2009,17 +1728,13 @@ export const ScaleIconActionLaunch: StencilReactComponent<ScaleIconActionLaunchE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionLaunchElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionLaunchEvents,
-    defineCustomElement: defineScaleIconActionLaunch
+    clientModule: clientComponents.ScaleIconActionLaunch as StencilReactComponent<ScaleIconActionLaunchElement, ScaleIconActionLaunchEvents, JSX.ScaleIconActionLaunch>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionLightDarkModeEvents = NonNullable<unknown>;
 
-export const ScaleIconActionLightDarkMode: StencilReactComponent<ScaleIconActionLightDarkModeElement, ScaleIconActionLightDarkModeEvents> = /*@__PURE__*/ createComponent<ScaleIconActionLightDarkModeElement, ScaleIconActionLightDarkModeEvents>({
+export const ScaleIconActionLightDarkMode: StencilReactComponent<ScaleIconActionLightDarkModeElement, ScaleIconActionLightDarkModeEvents, JSX.ScaleIconActionLightDarkMode> = /*@__PURE__*/ createComponent<ScaleIconActionLightDarkModeElement, ScaleIconActionLightDarkModeEvents, JSX.ScaleIconActionLightDarkMode>({
     tagName: 'scale-icon-action-light-dark-mode',
     properties: {
         size: 'size',
@@ -2031,17 +1746,13 @@ export const ScaleIconActionLightDarkMode: StencilReactComponent<ScaleIconAction
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionLightDarkModeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionLightDarkModeEvents,
-    defineCustomElement: defineScaleIconActionLightDarkMode
+    clientModule: clientComponents.ScaleIconActionLightDarkMode as StencilReactComponent<ScaleIconActionLightDarkModeElement, ScaleIconActionLightDarkModeEvents, JSX.ScaleIconActionLightDarkMode>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionLinkEvents = NonNullable<unknown>;
 
-export const ScaleIconActionLink: StencilReactComponent<ScaleIconActionLinkElement, ScaleIconActionLinkEvents> = /*@__PURE__*/ createComponent<ScaleIconActionLinkElement, ScaleIconActionLinkEvents>({
+export const ScaleIconActionLink: StencilReactComponent<ScaleIconActionLinkElement, ScaleIconActionLinkEvents, JSX.ScaleIconActionLink> = /*@__PURE__*/ createComponent<ScaleIconActionLinkElement, ScaleIconActionLinkEvents, JSX.ScaleIconActionLink>({
     tagName: 'scale-icon-action-link',
     properties: {
         size: 'size',
@@ -2053,17 +1764,13 @@ export const ScaleIconActionLink: StencilReactComponent<ScaleIconActionLinkEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionLinkElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionLinkEvents,
-    defineCustomElement: defineScaleIconActionLink
+    clientModule: clientComponents.ScaleIconActionLink as StencilReactComponent<ScaleIconActionLinkElement, ScaleIconActionLinkEvents, JSX.ScaleIconActionLink>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionLogoutEvents = NonNullable<unknown>;
 
-export const ScaleIconActionLogout: StencilReactComponent<ScaleIconActionLogoutElement, ScaleIconActionLogoutEvents> = /*@__PURE__*/ createComponent<ScaleIconActionLogoutElement, ScaleIconActionLogoutEvents>({
+export const ScaleIconActionLogout: StencilReactComponent<ScaleIconActionLogoutElement, ScaleIconActionLogoutEvents, JSX.ScaleIconActionLogout> = /*@__PURE__*/ createComponent<ScaleIconActionLogoutElement, ScaleIconActionLogoutEvents, JSX.ScaleIconActionLogout>({
     tagName: 'scale-icon-action-logout',
     properties: {
         size: 'size',
@@ -2075,17 +1782,13 @@ export const ScaleIconActionLogout: StencilReactComponent<ScaleIconActionLogoutE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionLogoutElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionLogoutEvents,
-    defineCustomElement: defineScaleIconActionLogout
+    clientModule: clientComponents.ScaleIconActionLogout as StencilReactComponent<ScaleIconActionLogoutElement, ScaleIconActionLogoutEvents, JSX.ScaleIconActionLogout>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionLoopEvents = NonNullable<unknown>;
 
-export const ScaleIconActionLoop: StencilReactComponent<ScaleIconActionLoopElement, ScaleIconActionLoopEvents> = /*@__PURE__*/ createComponent<ScaleIconActionLoopElement, ScaleIconActionLoopEvents>({
+export const ScaleIconActionLoop: StencilReactComponent<ScaleIconActionLoopElement, ScaleIconActionLoopEvents, JSX.ScaleIconActionLoop> = /*@__PURE__*/ createComponent<ScaleIconActionLoopElement, ScaleIconActionLoopEvents, JSX.ScaleIconActionLoop>({
     tagName: 'scale-icon-action-loop',
     properties: {
         size: 'size',
@@ -2097,17 +1800,13 @@ export const ScaleIconActionLoop: StencilReactComponent<ScaleIconActionLoopEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionLoopElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionLoopEvents,
-    defineCustomElement: defineScaleIconActionLoop
+    clientModule: clientComponents.ScaleIconActionLoop as StencilReactComponent<ScaleIconActionLoopElement, ScaleIconActionLoopEvents, JSX.ScaleIconActionLoop>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMenuEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMenu: StencilReactComponent<ScaleIconActionMenuElement, ScaleIconActionMenuEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMenuElement, ScaleIconActionMenuEvents>({
+export const ScaleIconActionMenu: StencilReactComponent<ScaleIconActionMenuElement, ScaleIconActionMenuEvents, JSX.ScaleIconActionMenu> = /*@__PURE__*/ createComponent<ScaleIconActionMenuElement, ScaleIconActionMenuEvents, JSX.ScaleIconActionMenu>({
     tagName: 'scale-icon-action-menu',
     properties: {
         size: 'size',
@@ -2119,17 +1818,13 @@ export const ScaleIconActionMenu: StencilReactComponent<ScaleIconActionMenuEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMenuElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMenuEvents,
-    defineCustomElement: defineScaleIconActionMenu
+    clientModule: clientComponents.ScaleIconActionMenu as StencilReactComponent<ScaleIconActionMenuElement, ScaleIconActionMenuEvents, JSX.ScaleIconActionMenu>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMicrophoneEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMicrophone: StencilReactComponent<ScaleIconActionMicrophoneElement, ScaleIconActionMicrophoneEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMicrophoneElement, ScaleIconActionMicrophoneEvents>({
+export const ScaleIconActionMicrophone: StencilReactComponent<ScaleIconActionMicrophoneElement, ScaleIconActionMicrophoneEvents, JSX.ScaleIconActionMicrophone> = /*@__PURE__*/ createComponent<ScaleIconActionMicrophoneElement, ScaleIconActionMicrophoneEvents, JSX.ScaleIconActionMicrophone>({
     tagName: 'scale-icon-action-microphone',
     properties: {
         size: 'size',
@@ -2141,17 +1836,13 @@ export const ScaleIconActionMicrophone: StencilReactComponent<ScaleIconActionMic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMicrophoneElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMicrophoneEvents,
-    defineCustomElement: defineScaleIconActionMicrophone
+    clientModule: clientComponents.ScaleIconActionMicrophone as StencilReactComponent<ScaleIconActionMicrophoneElement, ScaleIconActionMicrophoneEvents, JSX.ScaleIconActionMicrophone>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMinimizeScreenEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMinimizeScreen: StencilReactComponent<ScaleIconActionMinimizeScreenElement, ScaleIconActionMinimizeScreenEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMinimizeScreenElement, ScaleIconActionMinimizeScreenEvents>({
+export const ScaleIconActionMinimizeScreen: StencilReactComponent<ScaleIconActionMinimizeScreenElement, ScaleIconActionMinimizeScreenEvents, JSX.ScaleIconActionMinimizeScreen> = /*@__PURE__*/ createComponent<ScaleIconActionMinimizeScreenElement, ScaleIconActionMinimizeScreenEvents, JSX.ScaleIconActionMinimizeScreen>({
     tagName: 'scale-icon-action-minimize-screen',
     properties: {
         size: 'size',
@@ -2163,17 +1854,13 @@ export const ScaleIconActionMinimizeScreen: StencilReactComponent<ScaleIconActio
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMinimizeScreenElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMinimizeScreenEvents,
-    defineCustomElement: defineScaleIconActionMinimizeScreen
+    clientModule: clientComponents.ScaleIconActionMinimizeScreen as StencilReactComponent<ScaleIconActionMinimizeScreenElement, ScaleIconActionMinimizeScreenEvents, JSX.ScaleIconActionMinimizeScreen>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMinusEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMinus: StencilReactComponent<ScaleIconActionMinusElement, ScaleIconActionMinusEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMinusElement, ScaleIconActionMinusEvents>({
+export const ScaleIconActionMinus: StencilReactComponent<ScaleIconActionMinusElement, ScaleIconActionMinusEvents, JSX.ScaleIconActionMinus> = /*@__PURE__*/ createComponent<ScaleIconActionMinusElement, ScaleIconActionMinusEvents, JSX.ScaleIconActionMinus>({
     tagName: 'scale-icon-action-minus',
     properties: {
         size: 'size',
@@ -2185,17 +1872,13 @@ export const ScaleIconActionMinus: StencilReactComponent<ScaleIconActionMinusEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMinusElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMinusEvents,
-    defineCustomElement: defineScaleIconActionMinus
+    clientModule: clientComponents.ScaleIconActionMinus as StencilReactComponent<ScaleIconActionMinusElement, ScaleIconActionMinusEvents, JSX.ScaleIconActionMinus>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMinusCircleEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMinusCircle: StencilReactComponent<ScaleIconActionMinusCircleElement, ScaleIconActionMinusCircleEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMinusCircleElement, ScaleIconActionMinusCircleEvents>({
+export const ScaleIconActionMinusCircle: StencilReactComponent<ScaleIconActionMinusCircleElement, ScaleIconActionMinusCircleEvents, JSX.ScaleIconActionMinusCircle> = /*@__PURE__*/ createComponent<ScaleIconActionMinusCircleElement, ScaleIconActionMinusCircleEvents, JSX.ScaleIconActionMinusCircle>({
     tagName: 'scale-icon-action-minus-circle',
     properties: {
         size: 'size',
@@ -2207,17 +1890,13 @@ export const ScaleIconActionMinusCircle: StencilReactComponent<ScaleIconActionMi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMinusCircleElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMinusCircleEvents,
-    defineCustomElement: defineScaleIconActionMinusCircle
+    clientModule: clientComponents.ScaleIconActionMinusCircle as StencilReactComponent<ScaleIconActionMinusCircleElement, ScaleIconActionMinusCircleEvents, JSX.ScaleIconActionMinusCircle>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMoreEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMore: StencilReactComponent<ScaleIconActionMoreElement, ScaleIconActionMoreEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMoreElement, ScaleIconActionMoreEvents>({
+export const ScaleIconActionMore: StencilReactComponent<ScaleIconActionMoreElement, ScaleIconActionMoreEvents, JSX.ScaleIconActionMore> = /*@__PURE__*/ createComponent<ScaleIconActionMoreElement, ScaleIconActionMoreEvents, JSX.ScaleIconActionMore>({
     tagName: 'scale-icon-action-more',
     properties: {
         size: 'size',
@@ -2229,17 +1908,13 @@ export const ScaleIconActionMore: StencilReactComponent<ScaleIconActionMoreEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMoreElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMoreEvents,
-    defineCustomElement: defineScaleIconActionMore
+    clientModule: clientComponents.ScaleIconActionMore as StencilReactComponent<ScaleIconActionMoreElement, ScaleIconActionMoreEvents, JSX.ScaleIconActionMore>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMoveEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMove: StencilReactComponent<ScaleIconActionMoveElement, ScaleIconActionMoveEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMoveElement, ScaleIconActionMoveEvents>({
+export const ScaleIconActionMove: StencilReactComponent<ScaleIconActionMoveElement, ScaleIconActionMoveEvents, JSX.ScaleIconActionMove> = /*@__PURE__*/ createComponent<ScaleIconActionMoveElement, ScaleIconActionMoveEvents, JSX.ScaleIconActionMove>({
     tagName: 'scale-icon-action-move',
     properties: {
         size: 'size',
@@ -2251,17 +1926,13 @@ export const ScaleIconActionMove: StencilReactComponent<ScaleIconActionMoveEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMoveElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMoveEvents,
-    defineCustomElement: defineScaleIconActionMove
+    clientModule: clientComponents.ScaleIconActionMove as StencilReactComponent<ScaleIconActionMoveElement, ScaleIconActionMoveEvents, JSX.ScaleIconActionMove>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionMuteEvents = NonNullable<unknown>;
 
-export const ScaleIconActionMute: StencilReactComponent<ScaleIconActionMuteElement, ScaleIconActionMuteEvents> = /*@__PURE__*/ createComponent<ScaleIconActionMuteElement, ScaleIconActionMuteEvents>({
+export const ScaleIconActionMute: StencilReactComponent<ScaleIconActionMuteElement, ScaleIconActionMuteEvents, JSX.ScaleIconActionMute> = /*@__PURE__*/ createComponent<ScaleIconActionMuteElement, ScaleIconActionMuteEvents, JSX.ScaleIconActionMute>({
     tagName: 'scale-icon-action-mute',
     properties: {
         size: 'size',
@@ -2273,17 +1944,13 @@ export const ScaleIconActionMute: StencilReactComponent<ScaleIconActionMuteEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionMuteElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionMuteEvents,
-    defineCustomElement: defineScaleIconActionMute
+    clientModule: clientComponents.ScaleIconActionMute as StencilReactComponent<ScaleIconActionMuteElement, ScaleIconActionMuteEvents, JSX.ScaleIconActionMute>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionNotificationEvents = NonNullable<unknown>;
 
-export const ScaleIconActionNotification: StencilReactComponent<ScaleIconActionNotificationElement, ScaleIconActionNotificationEvents> = /*@__PURE__*/ createComponent<ScaleIconActionNotificationElement, ScaleIconActionNotificationEvents>({
+export const ScaleIconActionNotification: StencilReactComponent<ScaleIconActionNotificationElement, ScaleIconActionNotificationEvents, JSX.ScaleIconActionNotification> = /*@__PURE__*/ createComponent<ScaleIconActionNotificationElement, ScaleIconActionNotificationEvents, JSX.ScaleIconActionNotification>({
     tagName: 'scale-icon-action-notification',
     properties: {
         size: 'size',
@@ -2295,17 +1962,13 @@ export const ScaleIconActionNotification: StencilReactComponent<ScaleIconActionN
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionNotificationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionNotificationEvents,
-    defineCustomElement: defineScaleIconActionNotification
+    clientModule: clientComponents.ScaleIconActionNotification as StencilReactComponent<ScaleIconActionNotificationElement, ScaleIconActionNotificationEvents, JSX.ScaleIconActionNotification>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPauseEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPause: StencilReactComponent<ScaleIconActionPauseElement, ScaleIconActionPauseEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPauseElement, ScaleIconActionPauseEvents>({
+export const ScaleIconActionPause: StencilReactComponent<ScaleIconActionPauseElement, ScaleIconActionPauseEvents, JSX.ScaleIconActionPause> = /*@__PURE__*/ createComponent<ScaleIconActionPauseElement, ScaleIconActionPauseEvents, JSX.ScaleIconActionPause>({
     tagName: 'scale-icon-action-pause',
     properties: {
         size: 'size',
@@ -2317,17 +1980,13 @@ export const ScaleIconActionPause: StencilReactComponent<ScaleIconActionPauseEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPauseElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPauseEvents,
-    defineCustomElement: defineScaleIconActionPause
+    clientModule: clientComponents.ScaleIconActionPause as StencilReactComponent<ScaleIconActionPauseElement, ScaleIconActionPauseEvents, JSX.ScaleIconActionPause>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPauseNbEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPauseNb: StencilReactComponent<ScaleIconActionPauseNbElement, ScaleIconActionPauseNbEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPauseNbElement, ScaleIconActionPauseNbEvents>({
+export const ScaleIconActionPauseNb: StencilReactComponent<ScaleIconActionPauseNbElement, ScaleIconActionPauseNbEvents, JSX.ScaleIconActionPauseNb> = /*@__PURE__*/ createComponent<ScaleIconActionPauseNbElement, ScaleIconActionPauseNbEvents, JSX.ScaleIconActionPauseNb>({
     tagName: 'scale-icon-action-pause-nb',
     properties: {
         size: 'size',
@@ -2339,17 +1998,13 @@ export const ScaleIconActionPauseNb: StencilReactComponent<ScaleIconActionPauseN
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPauseNbElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPauseNbEvents,
-    defineCustomElement: defineScaleIconActionPauseNb
+    clientModule: clientComponents.ScaleIconActionPauseNb as StencilReactComponent<ScaleIconActionPauseNbElement, ScaleIconActionPauseNbEvents, JSX.ScaleIconActionPauseNb>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPinEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPin: StencilReactComponent<ScaleIconActionPinElement, ScaleIconActionPinEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPinElement, ScaleIconActionPinEvents>({
+export const ScaleIconActionPin: StencilReactComponent<ScaleIconActionPinElement, ScaleIconActionPinEvents, JSX.ScaleIconActionPin> = /*@__PURE__*/ createComponent<ScaleIconActionPinElement, ScaleIconActionPinEvents, JSX.ScaleIconActionPin>({
     tagName: 'scale-icon-action-pin',
     properties: {
         size: 'size',
@@ -2361,17 +2016,13 @@ export const ScaleIconActionPin: StencilReactComponent<ScaleIconActionPinElement
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPinElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPinEvents,
-    defineCustomElement: defineScaleIconActionPin
+    clientModule: clientComponents.ScaleIconActionPin as StencilReactComponent<ScaleIconActionPinElement, ScaleIconActionPinEvents, JSX.ScaleIconActionPin>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPlayEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPlay: StencilReactComponent<ScaleIconActionPlayElement, ScaleIconActionPlayEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPlayElement, ScaleIconActionPlayEvents>({
+export const ScaleIconActionPlay: StencilReactComponent<ScaleIconActionPlayElement, ScaleIconActionPlayEvents, JSX.ScaleIconActionPlay> = /*@__PURE__*/ createComponent<ScaleIconActionPlayElement, ScaleIconActionPlayEvents, JSX.ScaleIconActionPlay>({
     tagName: 'scale-icon-action-play',
     properties: {
         size: 'size',
@@ -2383,17 +2034,13 @@ export const ScaleIconActionPlay: StencilReactComponent<ScaleIconActionPlayEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPlayElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPlayEvents,
-    defineCustomElement: defineScaleIconActionPlay
+    clientModule: clientComponents.ScaleIconActionPlay as StencilReactComponent<ScaleIconActionPlayElement, ScaleIconActionPlayEvents, JSX.ScaleIconActionPlay>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPlayNbEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPlayNb: StencilReactComponent<ScaleIconActionPlayNbElement, ScaleIconActionPlayNbEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPlayNbElement, ScaleIconActionPlayNbEvents>({
+export const ScaleIconActionPlayNb: StencilReactComponent<ScaleIconActionPlayNbElement, ScaleIconActionPlayNbEvents, JSX.ScaleIconActionPlayNb> = /*@__PURE__*/ createComponent<ScaleIconActionPlayNbElement, ScaleIconActionPlayNbEvents, JSX.ScaleIconActionPlayNb>({
     tagName: 'scale-icon-action-play-nb',
     properties: {
         size: 'size',
@@ -2405,17 +2052,13 @@ export const ScaleIconActionPlayNb: StencilReactComponent<ScaleIconActionPlayNbE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPlayNbElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPlayNbEvents,
-    defineCustomElement: defineScaleIconActionPlayNb
+    clientModule: clientComponents.ScaleIconActionPlayNb as StencilReactComponent<ScaleIconActionPlayNbElement, ScaleIconActionPlayNbEvents, JSX.ScaleIconActionPlayNb>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPopUpWindowEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPopUpWindow: StencilReactComponent<ScaleIconActionPopUpWindowElement, ScaleIconActionPopUpWindowEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPopUpWindowElement, ScaleIconActionPopUpWindowEvents>({
+export const ScaleIconActionPopUpWindow: StencilReactComponent<ScaleIconActionPopUpWindowElement, ScaleIconActionPopUpWindowEvents, JSX.ScaleIconActionPopUpWindow> = /*@__PURE__*/ createComponent<ScaleIconActionPopUpWindowElement, ScaleIconActionPopUpWindowEvents, JSX.ScaleIconActionPopUpWindow>({
     tagName: 'scale-icon-action-pop-up-window',
     properties: {
         size: 'size',
@@ -2427,17 +2070,13 @@ export const ScaleIconActionPopUpWindow: StencilReactComponent<ScaleIconActionPo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPopUpWindowElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPopUpWindowEvents,
-    defineCustomElement: defineScaleIconActionPopUpWindow
+    clientModule: clientComponents.ScaleIconActionPopUpWindow as StencilReactComponent<ScaleIconActionPopUpWindowElement, ScaleIconActionPopUpWindowEvents, JSX.ScaleIconActionPopUpWindow>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPowerEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPower: StencilReactComponent<ScaleIconActionPowerElement, ScaleIconActionPowerEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPowerElement, ScaleIconActionPowerEvents>({
+export const ScaleIconActionPower: StencilReactComponent<ScaleIconActionPowerElement, ScaleIconActionPowerEvents, JSX.ScaleIconActionPower> = /*@__PURE__*/ createComponent<ScaleIconActionPowerElement, ScaleIconActionPowerEvents, JSX.ScaleIconActionPower>({
     tagName: 'scale-icon-action-power',
     properties: {
         size: 'size',
@@ -2449,17 +2088,13 @@ export const ScaleIconActionPower: StencilReactComponent<ScaleIconActionPowerEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPowerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPowerEvents,
-    defineCustomElement: defineScaleIconActionPower
+    clientModule: clientComponents.ScaleIconActionPower as StencilReactComponent<ScaleIconActionPowerElement, ScaleIconActionPowerEvents, JSX.ScaleIconActionPower>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPreviousNbEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPreviousNb: StencilReactComponent<ScaleIconActionPreviousNbElement, ScaleIconActionPreviousNbEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPreviousNbElement, ScaleIconActionPreviousNbEvents>({
+export const ScaleIconActionPreviousNb: StencilReactComponent<ScaleIconActionPreviousNbElement, ScaleIconActionPreviousNbEvents, JSX.ScaleIconActionPreviousNb> = /*@__PURE__*/ createComponent<ScaleIconActionPreviousNbElement, ScaleIconActionPreviousNbEvents, JSX.ScaleIconActionPreviousNb>({
     tagName: 'scale-icon-action-previous-nb',
     properties: {
         size: 'size',
@@ -2471,17 +2106,13 @@ export const ScaleIconActionPreviousNb: StencilReactComponent<ScaleIconActionPre
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPreviousNbElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPreviousNbEvents,
-    defineCustomElement: defineScaleIconActionPreviousNb
+    clientModule: clientComponents.ScaleIconActionPreviousNb as StencilReactComponent<ScaleIconActionPreviousNbElement, ScaleIconActionPreviousNbEvents, JSX.ScaleIconActionPreviousNb>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPrintEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPrint: StencilReactComponent<ScaleIconActionPrintElement, ScaleIconActionPrintEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPrintElement, ScaleIconActionPrintEvents>({
+export const ScaleIconActionPrint: StencilReactComponent<ScaleIconActionPrintElement, ScaleIconActionPrintEvents, JSX.ScaleIconActionPrint> = /*@__PURE__*/ createComponent<ScaleIconActionPrintElement, ScaleIconActionPrintEvents, JSX.ScaleIconActionPrint>({
     tagName: 'scale-icon-action-print',
     properties: {
         size: 'size',
@@ -2493,17 +2124,13 @@ export const ScaleIconActionPrint: StencilReactComponent<ScaleIconActionPrintEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPrintElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPrintEvents,
-    defineCustomElement: defineScaleIconActionPrint
+    clientModule: clientComponents.ScaleIconActionPrint as StencilReactComponent<ScaleIconActionPrintElement, ScaleIconActionPrintEvents, JSX.ScaleIconActionPrint>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionPublishEvents = NonNullable<unknown>;
 
-export const ScaleIconActionPublish: StencilReactComponent<ScaleIconActionPublishElement, ScaleIconActionPublishEvents> = /*@__PURE__*/ createComponent<ScaleIconActionPublishElement, ScaleIconActionPublishEvents>({
+export const ScaleIconActionPublish: StencilReactComponent<ScaleIconActionPublishElement, ScaleIconActionPublishEvents, JSX.ScaleIconActionPublish> = /*@__PURE__*/ createComponent<ScaleIconActionPublishElement, ScaleIconActionPublishEvents, JSX.ScaleIconActionPublish>({
     tagName: 'scale-icon-action-publish',
     properties: {
         size: 'size',
@@ -2515,17 +2142,13 @@ export const ScaleIconActionPublish: StencilReactComponent<ScaleIconActionPublis
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionPublishElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionPublishEvents,
-    defineCustomElement: defineScaleIconActionPublish
+    clientModule: clientComponents.ScaleIconActionPublish as StencilReactComponent<ScaleIconActionPublishElement, ScaleIconActionPublishEvents, JSX.ScaleIconActionPublish>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionRandomEvents = NonNullable<unknown>;
 
-export const ScaleIconActionRandom: StencilReactComponent<ScaleIconActionRandomElement, ScaleIconActionRandomEvents> = /*@__PURE__*/ createComponent<ScaleIconActionRandomElement, ScaleIconActionRandomEvents>({
+export const ScaleIconActionRandom: StencilReactComponent<ScaleIconActionRandomElement, ScaleIconActionRandomEvents, JSX.ScaleIconActionRandom> = /*@__PURE__*/ createComponent<ScaleIconActionRandomElement, ScaleIconActionRandomEvents, JSX.ScaleIconActionRandom>({
     tagName: 'scale-icon-action-random',
     properties: {
         size: 'size',
@@ -2537,17 +2160,13 @@ export const ScaleIconActionRandom: StencilReactComponent<ScaleIconActionRandomE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionRandomElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionRandomEvents,
-    defineCustomElement: defineScaleIconActionRandom
+    clientModule: clientComponents.ScaleIconActionRandom as StencilReactComponent<ScaleIconActionRandomElement, ScaleIconActionRandomEvents, JSX.ScaleIconActionRandom>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionRecordNbEvents = NonNullable<unknown>;
 
-export const ScaleIconActionRecordNb: StencilReactComponent<ScaleIconActionRecordNbElement, ScaleIconActionRecordNbEvents> = /*@__PURE__*/ createComponent<ScaleIconActionRecordNbElement, ScaleIconActionRecordNbEvents>({
+export const ScaleIconActionRecordNb: StencilReactComponent<ScaleIconActionRecordNbElement, ScaleIconActionRecordNbEvents, JSX.ScaleIconActionRecordNb> = /*@__PURE__*/ createComponent<ScaleIconActionRecordNbElement, ScaleIconActionRecordNbEvents, JSX.ScaleIconActionRecordNb>({
     tagName: 'scale-icon-action-record-nb',
     properties: {
         size: 'size',
@@ -2559,17 +2178,13 @@ export const ScaleIconActionRecordNb: StencilReactComponent<ScaleIconActionRecor
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionRecordNbElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionRecordNbEvents,
-    defineCustomElement: defineScaleIconActionRecordNb
+    clientModule: clientComponents.ScaleIconActionRecordNb as StencilReactComponent<ScaleIconActionRecordNbElement, ScaleIconActionRecordNbEvents, JSX.ScaleIconActionRecordNb>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionRefreshEvents = NonNullable<unknown>;
 
-export const ScaleIconActionRefresh: StencilReactComponent<ScaleIconActionRefreshElement, ScaleIconActionRefreshEvents> = /*@__PURE__*/ createComponent<ScaleIconActionRefreshElement, ScaleIconActionRefreshEvents>({
+export const ScaleIconActionRefresh: StencilReactComponent<ScaleIconActionRefreshElement, ScaleIconActionRefreshEvents, JSX.ScaleIconActionRefresh> = /*@__PURE__*/ createComponent<ScaleIconActionRefreshElement, ScaleIconActionRefreshEvents, JSX.ScaleIconActionRefresh>({
     tagName: 'scale-icon-action-refresh',
     properties: {
         size: 'size',
@@ -2581,17 +2196,13 @@ export const ScaleIconActionRefresh: StencilReactComponent<ScaleIconActionRefres
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionRefreshElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionRefreshEvents,
-    defineCustomElement: defineScaleIconActionRefresh
+    clientModule: clientComponents.ScaleIconActionRefresh as StencilReactComponent<ScaleIconActionRefreshElement, ScaleIconActionRefreshEvents, JSX.ScaleIconActionRefresh>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionRemoveEvents = NonNullable<unknown>;
 
-export const ScaleIconActionRemove: StencilReactComponent<ScaleIconActionRemoveElement, ScaleIconActionRemoveEvents> = /*@__PURE__*/ createComponent<ScaleIconActionRemoveElement, ScaleIconActionRemoveEvents>({
+export const ScaleIconActionRemove: StencilReactComponent<ScaleIconActionRemoveElement, ScaleIconActionRemoveEvents, JSX.ScaleIconActionRemove> = /*@__PURE__*/ createComponent<ScaleIconActionRemoveElement, ScaleIconActionRemoveEvents, JSX.ScaleIconActionRemove>({
     tagName: 'scale-icon-action-remove',
     properties: {
         size: 'size',
@@ -2603,17 +2214,13 @@ export const ScaleIconActionRemove: StencilReactComponent<ScaleIconActionRemoveE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionRemoveElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionRemoveEvents,
-    defineCustomElement: defineScaleIconActionRemove
+    clientModule: clientComponents.ScaleIconActionRemove as StencilReactComponent<ScaleIconActionRemoveElement, ScaleIconActionRemoveEvents, JSX.ScaleIconActionRemove>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionReplyEvents = NonNullable<unknown>;
 
-export const ScaleIconActionReply: StencilReactComponent<ScaleIconActionReplyElement, ScaleIconActionReplyEvents> = /*@__PURE__*/ createComponent<ScaleIconActionReplyElement, ScaleIconActionReplyEvents>({
+export const ScaleIconActionReply: StencilReactComponent<ScaleIconActionReplyElement, ScaleIconActionReplyEvents, JSX.ScaleIconActionReply> = /*@__PURE__*/ createComponent<ScaleIconActionReplyElement, ScaleIconActionReplyEvents, JSX.ScaleIconActionReply>({
     tagName: 'scale-icon-action-reply',
     properties: {
         size: 'size',
@@ -2625,17 +2232,13 @@ export const ScaleIconActionReply: StencilReactComponent<ScaleIconActionReplyEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionReplyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionReplyEvents,
-    defineCustomElement: defineScaleIconActionReply
+    clientModule: clientComponents.ScaleIconActionReply as StencilReactComponent<ScaleIconActionReplyElement, ScaleIconActionReplyEvents, JSX.ScaleIconActionReply>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionReplyAllEvents = NonNullable<unknown>;
 
-export const ScaleIconActionReplyAll: StencilReactComponent<ScaleIconActionReplyAllElement, ScaleIconActionReplyAllEvents> = /*@__PURE__*/ createComponent<ScaleIconActionReplyAllElement, ScaleIconActionReplyAllEvents>({
+export const ScaleIconActionReplyAll: StencilReactComponent<ScaleIconActionReplyAllElement, ScaleIconActionReplyAllEvents, JSX.ScaleIconActionReplyAll> = /*@__PURE__*/ createComponent<ScaleIconActionReplyAllElement, ScaleIconActionReplyAllEvents, JSX.ScaleIconActionReplyAll>({
     tagName: 'scale-icon-action-reply-all',
     properties: {
         size: 'size',
@@ -2647,17 +2250,13 @@ export const ScaleIconActionReplyAll: StencilReactComponent<ScaleIconActionReply
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionReplyAllElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionReplyAllEvents,
-    defineCustomElement: defineScaleIconActionReplyAll
+    clientModule: clientComponents.ScaleIconActionReplyAll as StencilReactComponent<ScaleIconActionReplyAllElement, ScaleIconActionReplyAllEvents, JSX.ScaleIconActionReplyAll>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionReplyForwardEvents = NonNullable<unknown>;
 
-export const ScaleIconActionReplyForward: StencilReactComponent<ScaleIconActionReplyForwardElement, ScaleIconActionReplyForwardEvents> = /*@__PURE__*/ createComponent<ScaleIconActionReplyForwardElement, ScaleIconActionReplyForwardEvents>({
+export const ScaleIconActionReplyForward: StencilReactComponent<ScaleIconActionReplyForwardElement, ScaleIconActionReplyForwardEvents, JSX.ScaleIconActionReplyForward> = /*@__PURE__*/ createComponent<ScaleIconActionReplyForwardElement, ScaleIconActionReplyForwardEvents, JSX.ScaleIconActionReplyForward>({
     tagName: 'scale-icon-action-reply-forward',
     properties: {
         size: 'size',
@@ -2669,17 +2268,13 @@ export const ScaleIconActionReplyForward: StencilReactComponent<ScaleIconActionR
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionReplyForwardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionReplyForwardEvents,
-    defineCustomElement: defineScaleIconActionReplyForward
+    clientModule: clientComponents.ScaleIconActionReplyForward as StencilReactComponent<ScaleIconActionReplyForwardElement, ScaleIconActionReplyForwardEvents, JSX.ScaleIconActionReplyForward>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionRestartEvents = NonNullable<unknown>;
 
-export const ScaleIconActionRestart: StencilReactComponent<ScaleIconActionRestartElement, ScaleIconActionRestartEvents> = /*@__PURE__*/ createComponent<ScaleIconActionRestartElement, ScaleIconActionRestartEvents>({
+export const ScaleIconActionRestart: StencilReactComponent<ScaleIconActionRestartElement, ScaleIconActionRestartEvents, JSX.ScaleIconActionRestart> = /*@__PURE__*/ createComponent<ScaleIconActionRestartElement, ScaleIconActionRestartEvents, JSX.ScaleIconActionRestart>({
     tagName: 'scale-icon-action-restart',
     properties: {
         size: 'size',
@@ -2691,17 +2286,13 @@ export const ScaleIconActionRestart: StencilReactComponent<ScaleIconActionRestar
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionRestartElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionRestartEvents,
-    defineCustomElement: defineScaleIconActionRestart
+    clientModule: clientComponents.ScaleIconActionRestart as StencilReactComponent<ScaleIconActionRestartElement, ScaleIconActionRestartEvents, JSX.ScaleIconActionRestart>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionSearchEvents = NonNullable<unknown>;
 
-export const ScaleIconActionSearch: StencilReactComponent<ScaleIconActionSearchElement, ScaleIconActionSearchEvents> = /*@__PURE__*/ createComponent<ScaleIconActionSearchElement, ScaleIconActionSearchEvents>({
+export const ScaleIconActionSearch: StencilReactComponent<ScaleIconActionSearchElement, ScaleIconActionSearchEvents, JSX.ScaleIconActionSearch> = /*@__PURE__*/ createComponent<ScaleIconActionSearchElement, ScaleIconActionSearchEvents, JSX.ScaleIconActionSearch>({
     tagName: 'scale-icon-action-search',
     properties: {
         size: 'size',
@@ -2713,17 +2304,13 @@ export const ScaleIconActionSearch: StencilReactComponent<ScaleIconActionSearchE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionSearchElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionSearchEvents,
-    defineCustomElement: defineScaleIconActionSearch
+    clientModule: clientComponents.ScaleIconActionSearch as StencilReactComponent<ScaleIconActionSearchElement, ScaleIconActionSearchEvents, JSX.ScaleIconActionSearch>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionSendEvents = NonNullable<unknown>;
 
-export const ScaleIconActionSend: StencilReactComponent<ScaleIconActionSendElement, ScaleIconActionSendEvents> = /*@__PURE__*/ createComponent<ScaleIconActionSendElement, ScaleIconActionSendEvents>({
+export const ScaleIconActionSend: StencilReactComponent<ScaleIconActionSendElement, ScaleIconActionSendEvents, JSX.ScaleIconActionSend> = /*@__PURE__*/ createComponent<ScaleIconActionSendElement, ScaleIconActionSendEvents, JSX.ScaleIconActionSend>({
     tagName: 'scale-icon-action-send',
     properties: {
         size: 'size',
@@ -2735,17 +2322,13 @@ export const ScaleIconActionSend: StencilReactComponent<ScaleIconActionSendEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionSendElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionSendEvents,
-    defineCustomElement: defineScaleIconActionSend
+    clientModule: clientComponents.ScaleIconActionSend as StencilReactComponent<ScaleIconActionSendElement, ScaleIconActionSendEvents, JSX.ScaleIconActionSend>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionShareEvents = NonNullable<unknown>;
 
-export const ScaleIconActionShare: StencilReactComponent<ScaleIconActionShareElement, ScaleIconActionShareEvents> = /*@__PURE__*/ createComponent<ScaleIconActionShareElement, ScaleIconActionShareEvents>({
+export const ScaleIconActionShare: StencilReactComponent<ScaleIconActionShareElement, ScaleIconActionShareEvents, JSX.ScaleIconActionShare> = /*@__PURE__*/ createComponent<ScaleIconActionShareElement, ScaleIconActionShareEvents, JSX.ScaleIconActionShare>({
     tagName: 'scale-icon-action-share',
     properties: {
         size: 'size',
@@ -2757,17 +2340,13 @@ export const ScaleIconActionShare: StencilReactComponent<ScaleIconActionShareEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionShareElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionShareEvents,
-    defineCustomElement: defineScaleIconActionShare
+    clientModule: clientComponents.ScaleIconActionShare as StencilReactComponent<ScaleIconActionShareElement, ScaleIconActionShareEvents, JSX.ScaleIconActionShare>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionShoppingCartEvents = NonNullable<unknown>;
 
-export const ScaleIconActionShoppingCart: StencilReactComponent<ScaleIconActionShoppingCartElement, ScaleIconActionShoppingCartEvents> = /*@__PURE__*/ createComponent<ScaleIconActionShoppingCartElement, ScaleIconActionShoppingCartEvents>({
+export const ScaleIconActionShoppingCart: StencilReactComponent<ScaleIconActionShoppingCartElement, ScaleIconActionShoppingCartEvents, JSX.ScaleIconActionShoppingCart> = /*@__PURE__*/ createComponent<ScaleIconActionShoppingCartElement, ScaleIconActionShoppingCartEvents, JSX.ScaleIconActionShoppingCart>({
     tagName: 'scale-icon-action-shopping-cart',
     properties: {
         size: 'size',
@@ -2779,17 +2358,13 @@ export const ScaleIconActionShoppingCart: StencilReactComponent<ScaleIconActionS
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionShoppingCartElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionShoppingCartEvents,
-    defineCustomElement: defineScaleIconActionShoppingCart
+    clientModule: clientComponents.ScaleIconActionShoppingCart as StencilReactComponent<ScaleIconActionShoppingCartElement, ScaleIconActionShoppingCartEvents, JSX.ScaleIconActionShoppingCart>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionShowPasswordEvents = NonNullable<unknown>;
 
-export const ScaleIconActionShowPassword: StencilReactComponent<ScaleIconActionShowPasswordElement, ScaleIconActionShowPasswordEvents> = /*@__PURE__*/ createComponent<ScaleIconActionShowPasswordElement, ScaleIconActionShowPasswordEvents>({
+export const ScaleIconActionShowPassword: StencilReactComponent<ScaleIconActionShowPasswordElement, ScaleIconActionShowPasswordEvents, JSX.ScaleIconActionShowPassword> = /*@__PURE__*/ createComponent<ScaleIconActionShowPasswordElement, ScaleIconActionShowPasswordEvents, JSX.ScaleIconActionShowPassword>({
     tagName: 'scale-icon-action-show-password',
     properties: {
         size: 'size',
@@ -2801,17 +2376,13 @@ export const ScaleIconActionShowPassword: StencilReactComponent<ScaleIconActionS
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionShowPasswordElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionShowPasswordEvents,
-    defineCustomElement: defineScaleIconActionShowPassword
+    clientModule: clientComponents.ScaleIconActionShowPassword as StencilReactComponent<ScaleIconActionShowPasswordElement, ScaleIconActionShowPasswordEvents, JSX.ScaleIconActionShowPassword>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionSortEvents = NonNullable<unknown>;
 
-export const ScaleIconActionSort: StencilReactComponent<ScaleIconActionSortElement, ScaleIconActionSortEvents> = /*@__PURE__*/ createComponent<ScaleIconActionSortElement, ScaleIconActionSortEvents>({
+export const ScaleIconActionSort: StencilReactComponent<ScaleIconActionSortElement, ScaleIconActionSortEvents, JSX.ScaleIconActionSort> = /*@__PURE__*/ createComponent<ScaleIconActionSortElement, ScaleIconActionSortEvents, JSX.ScaleIconActionSort>({
     tagName: 'scale-icon-action-sort',
     properties: {
         size: 'size',
@@ -2823,17 +2394,13 @@ export const ScaleIconActionSort: StencilReactComponent<ScaleIconActionSortEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionSortElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionSortEvents,
-    defineCustomElement: defineScaleIconActionSort
+    clientModule: clientComponents.ScaleIconActionSort as StencilReactComponent<ScaleIconActionSortElement, ScaleIconActionSortEvents, JSX.ScaleIconActionSort>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionSoundOnEvents = NonNullable<unknown>;
 
-export const ScaleIconActionSoundOn: StencilReactComponent<ScaleIconActionSoundOnElement, ScaleIconActionSoundOnEvents> = /*@__PURE__*/ createComponent<ScaleIconActionSoundOnElement, ScaleIconActionSoundOnEvents>({
+export const ScaleIconActionSoundOn: StencilReactComponent<ScaleIconActionSoundOnElement, ScaleIconActionSoundOnEvents, JSX.ScaleIconActionSoundOn> = /*@__PURE__*/ createComponent<ScaleIconActionSoundOnElement, ScaleIconActionSoundOnEvents, JSX.ScaleIconActionSoundOn>({
     tagName: 'scale-icon-action-sound-on',
     properties: {
         size: 'size',
@@ -2845,17 +2412,13 @@ export const ScaleIconActionSoundOn: StencilReactComponent<ScaleIconActionSoundO
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionSoundOnElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionSoundOnEvents,
-    defineCustomElement: defineScaleIconActionSoundOn
+    clientModule: clientComponents.ScaleIconActionSoundOn as StencilReactComponent<ScaleIconActionSoundOnElement, ScaleIconActionSoundOnEvents, JSX.ScaleIconActionSoundOn>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionStarEvents = NonNullable<unknown>;
 
-export const ScaleIconActionStar: StencilReactComponent<ScaleIconActionStarElement, ScaleIconActionStarEvents> = /*@__PURE__*/ createComponent<ScaleIconActionStarElement, ScaleIconActionStarEvents>({
+export const ScaleIconActionStar: StencilReactComponent<ScaleIconActionStarElement, ScaleIconActionStarEvents, JSX.ScaleIconActionStar> = /*@__PURE__*/ createComponent<ScaleIconActionStarElement, ScaleIconActionStarEvents, JSX.ScaleIconActionStar>({
     tagName: 'scale-icon-action-star',
     properties: {
         size: 'size',
@@ -2867,17 +2430,13 @@ export const ScaleIconActionStar: StencilReactComponent<ScaleIconActionStarEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionStarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionStarEvents,
-    defineCustomElement: defineScaleIconActionStar
+    clientModule: clientComponents.ScaleIconActionStar as StencilReactComponent<ScaleIconActionStarElement, ScaleIconActionStarEvents, JSX.ScaleIconActionStar>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionStreamOnEvents = NonNullable<unknown>;
 
-export const ScaleIconActionStreamOn: StencilReactComponent<ScaleIconActionStreamOnElement, ScaleIconActionStreamOnEvents> = /*@__PURE__*/ createComponent<ScaleIconActionStreamOnElement, ScaleIconActionStreamOnEvents>({
+export const ScaleIconActionStreamOn: StencilReactComponent<ScaleIconActionStreamOnElement, ScaleIconActionStreamOnEvents, JSX.ScaleIconActionStreamOn> = /*@__PURE__*/ createComponent<ScaleIconActionStreamOnElement, ScaleIconActionStreamOnEvents, JSX.ScaleIconActionStreamOn>({
     tagName: 'scale-icon-action-stream-on',
     properties: {
         size: 'size',
@@ -2889,17 +2448,13 @@ export const ScaleIconActionStreamOn: StencilReactComponent<ScaleIconActionStrea
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionStreamOnElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionStreamOnEvents,
-    defineCustomElement: defineScaleIconActionStreamOn
+    clientModule: clientComponents.ScaleIconActionStreamOn as StencilReactComponent<ScaleIconActionStreamOnElement, ScaleIconActionStreamOnEvents, JSX.ScaleIconActionStreamOn>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionSuccessEvents = NonNullable<unknown>;
 
-export const ScaleIconActionSuccess: StencilReactComponent<ScaleIconActionSuccessElement, ScaleIconActionSuccessEvents> = /*@__PURE__*/ createComponent<ScaleIconActionSuccessElement, ScaleIconActionSuccessEvents>({
+export const ScaleIconActionSuccess: StencilReactComponent<ScaleIconActionSuccessElement, ScaleIconActionSuccessEvents, JSX.ScaleIconActionSuccess> = /*@__PURE__*/ createComponent<ScaleIconActionSuccessElement, ScaleIconActionSuccessEvents, JSX.ScaleIconActionSuccess>({
     tagName: 'scale-icon-action-success',
     properties: {
         size: 'size',
@@ -2911,17 +2466,13 @@ export const ScaleIconActionSuccess: StencilReactComponent<ScaleIconActionSucces
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionSuccessElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionSuccessEvents,
-    defineCustomElement: defineScaleIconActionSuccess
+    clientModule: clientComponents.ScaleIconActionSuccess as StencilReactComponent<ScaleIconActionSuccessElement, ScaleIconActionSuccessEvents, JSX.ScaleIconActionSuccess>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionThumbsDownEvents = NonNullable<unknown>;
 
-export const ScaleIconActionThumbsDown: StencilReactComponent<ScaleIconActionThumbsDownElement, ScaleIconActionThumbsDownEvents> = /*@__PURE__*/ createComponent<ScaleIconActionThumbsDownElement, ScaleIconActionThumbsDownEvents>({
+export const ScaleIconActionThumbsDown: StencilReactComponent<ScaleIconActionThumbsDownElement, ScaleIconActionThumbsDownEvents, JSX.ScaleIconActionThumbsDown> = /*@__PURE__*/ createComponent<ScaleIconActionThumbsDownElement, ScaleIconActionThumbsDownEvents, JSX.ScaleIconActionThumbsDown>({
     tagName: 'scale-icon-action-thumbs-down',
     properties: {
         size: 'size',
@@ -2933,17 +2484,13 @@ export const ScaleIconActionThumbsDown: StencilReactComponent<ScaleIconActionThu
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionThumbsDownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionThumbsDownEvents,
-    defineCustomElement: defineScaleIconActionThumbsDown
+    clientModule: clientComponents.ScaleIconActionThumbsDown as StencilReactComponent<ScaleIconActionThumbsDownElement, ScaleIconActionThumbsDownEvents, JSX.ScaleIconActionThumbsDown>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionThumbsUpEvents = NonNullable<unknown>;
 
-export const ScaleIconActionThumbsUp: StencilReactComponent<ScaleIconActionThumbsUpElement, ScaleIconActionThumbsUpEvents> = /*@__PURE__*/ createComponent<ScaleIconActionThumbsUpElement, ScaleIconActionThumbsUpEvents>({
+export const ScaleIconActionThumbsUp: StencilReactComponent<ScaleIconActionThumbsUpElement, ScaleIconActionThumbsUpEvents, JSX.ScaleIconActionThumbsUp> = /*@__PURE__*/ createComponent<ScaleIconActionThumbsUpElement, ScaleIconActionThumbsUpEvents, JSX.ScaleIconActionThumbsUp>({
     tagName: 'scale-icon-action-thumbs-up',
     properties: {
         size: 'size',
@@ -2955,17 +2502,13 @@ export const ScaleIconActionThumbsUp: StencilReactComponent<ScaleIconActionThumb
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionThumbsUpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionThumbsUpEvents,
-    defineCustomElement: defineScaleIconActionThumbsUp
+    clientModule: clientComponents.ScaleIconActionThumbsUp as StencilReactComponent<ScaleIconActionThumbsUpElement, ScaleIconActionThumbsUpEvents, JSX.ScaleIconActionThumbsUp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionTilesAddEvents = NonNullable<unknown>;
 
-export const ScaleIconActionTilesAdd: StencilReactComponent<ScaleIconActionTilesAddElement, ScaleIconActionTilesAddEvents> = /*@__PURE__*/ createComponent<ScaleIconActionTilesAddElement, ScaleIconActionTilesAddEvents>({
+export const ScaleIconActionTilesAdd: StencilReactComponent<ScaleIconActionTilesAddElement, ScaleIconActionTilesAddEvents, JSX.ScaleIconActionTilesAdd> = /*@__PURE__*/ createComponent<ScaleIconActionTilesAddElement, ScaleIconActionTilesAddEvents, JSX.ScaleIconActionTilesAdd>({
     tagName: 'scale-icon-action-tiles-add',
     properties: {
         size: 'size',
@@ -2977,17 +2520,13 @@ export const ScaleIconActionTilesAdd: StencilReactComponent<ScaleIconActionTiles
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionTilesAddElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionTilesAddEvents,
-    defineCustomElement: defineScaleIconActionTilesAdd
+    clientModule: clientComponents.ScaleIconActionTilesAdd as StencilReactComponent<ScaleIconActionTilesAddElement, ScaleIconActionTilesAddEvents, JSX.ScaleIconActionTilesAdd>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionUploadEvents = NonNullable<unknown>;
 
-export const ScaleIconActionUpload: StencilReactComponent<ScaleIconActionUploadElement, ScaleIconActionUploadEvents> = /*@__PURE__*/ createComponent<ScaleIconActionUploadElement, ScaleIconActionUploadEvents>({
+export const ScaleIconActionUpload: StencilReactComponent<ScaleIconActionUploadElement, ScaleIconActionUploadEvents, JSX.ScaleIconActionUpload> = /*@__PURE__*/ createComponent<ScaleIconActionUploadElement, ScaleIconActionUploadEvents, JSX.ScaleIconActionUpload>({
     tagName: 'scale-icon-action-upload',
     properties: {
         size: 'size',
@@ -2999,17 +2538,13 @@ export const ScaleIconActionUpload: StencilReactComponent<ScaleIconActionUploadE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionUploadElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionUploadEvents,
-    defineCustomElement: defineScaleIconActionUpload
+    clientModule: clientComponents.ScaleIconActionUpload as StencilReactComponent<ScaleIconActionUploadElement, ScaleIconActionUploadEvents, JSX.ScaleIconActionUpload>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionUploadToCloudEvents = NonNullable<unknown>;
 
-export const ScaleIconActionUploadToCloud: StencilReactComponent<ScaleIconActionUploadToCloudElement, ScaleIconActionUploadToCloudEvents> = /*@__PURE__*/ createComponent<ScaleIconActionUploadToCloudElement, ScaleIconActionUploadToCloudEvents>({
+export const ScaleIconActionUploadToCloud: StencilReactComponent<ScaleIconActionUploadToCloudElement, ScaleIconActionUploadToCloudEvents, JSX.ScaleIconActionUploadToCloud> = /*@__PURE__*/ createComponent<ScaleIconActionUploadToCloudElement, ScaleIconActionUploadToCloudEvents, JSX.ScaleIconActionUploadToCloud>({
     tagName: 'scale-icon-action-upload-to-cloud',
     properties: {
         size: 'size',
@@ -3021,17 +2556,13 @@ export const ScaleIconActionUploadToCloud: StencilReactComponent<ScaleIconAction
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionUploadToCloudElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionUploadToCloudEvents,
-    defineCustomElement: defineScaleIconActionUploadToCloud
+    clientModule: clientComponents.ScaleIconActionUploadToCloud as StencilReactComponent<ScaleIconActionUploadToCloudElement, ScaleIconActionUploadToCloudEvents, JSX.ScaleIconActionUploadToCloud>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionVolumeDownEvents = NonNullable<unknown>;
 
-export const ScaleIconActionVolumeDown: StencilReactComponent<ScaleIconActionVolumeDownElement, ScaleIconActionVolumeDownEvents> = /*@__PURE__*/ createComponent<ScaleIconActionVolumeDownElement, ScaleIconActionVolumeDownEvents>({
+export const ScaleIconActionVolumeDown: StencilReactComponent<ScaleIconActionVolumeDownElement, ScaleIconActionVolumeDownEvents, JSX.ScaleIconActionVolumeDown> = /*@__PURE__*/ createComponent<ScaleIconActionVolumeDownElement, ScaleIconActionVolumeDownEvents, JSX.ScaleIconActionVolumeDown>({
     tagName: 'scale-icon-action-volume-down',
     properties: {
         size: 'size',
@@ -3043,17 +2574,13 @@ export const ScaleIconActionVolumeDown: StencilReactComponent<ScaleIconActionVol
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionVolumeDownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionVolumeDownEvents,
-    defineCustomElement: defineScaleIconActionVolumeDown
+    clientModule: clientComponents.ScaleIconActionVolumeDown as StencilReactComponent<ScaleIconActionVolumeDownElement, ScaleIconActionVolumeDownEvents, JSX.ScaleIconActionVolumeDown>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionVolumeUpEvents = NonNullable<unknown>;
 
-export const ScaleIconActionVolumeUp: StencilReactComponent<ScaleIconActionVolumeUpElement, ScaleIconActionVolumeUpEvents> = /*@__PURE__*/ createComponent<ScaleIconActionVolumeUpElement, ScaleIconActionVolumeUpEvents>({
+export const ScaleIconActionVolumeUp: StencilReactComponent<ScaleIconActionVolumeUpElement, ScaleIconActionVolumeUpEvents, JSX.ScaleIconActionVolumeUp> = /*@__PURE__*/ createComponent<ScaleIconActionVolumeUpElement, ScaleIconActionVolumeUpEvents, JSX.ScaleIconActionVolumeUp>({
     tagName: 'scale-icon-action-volume-up',
     properties: {
         size: 'size',
@@ -3065,17 +2592,13 @@ export const ScaleIconActionVolumeUp: StencilReactComponent<ScaleIconActionVolum
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionVolumeUpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionVolumeUpEvents,
-    defineCustomElement: defineScaleIconActionVolumeUp
+    clientModule: clientComponents.ScaleIconActionVolumeUp as StencilReactComponent<ScaleIconActionVolumeUpElement, ScaleIconActionVolumeUpEvents, JSX.ScaleIconActionVolumeUp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionZoomInEvents = NonNullable<unknown>;
 
-export const ScaleIconActionZoomIn: StencilReactComponent<ScaleIconActionZoomInElement, ScaleIconActionZoomInEvents> = /*@__PURE__*/ createComponent<ScaleIconActionZoomInElement, ScaleIconActionZoomInEvents>({
+export const ScaleIconActionZoomIn: StencilReactComponent<ScaleIconActionZoomInElement, ScaleIconActionZoomInEvents, JSX.ScaleIconActionZoomIn> = /*@__PURE__*/ createComponent<ScaleIconActionZoomInElement, ScaleIconActionZoomInEvents, JSX.ScaleIconActionZoomIn>({
     tagName: 'scale-icon-action-zoom-in',
     properties: {
         size: 'size',
@@ -3087,17 +2610,13 @@ export const ScaleIconActionZoomIn: StencilReactComponent<ScaleIconActionZoomInE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionZoomInElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionZoomInEvents,
-    defineCustomElement: defineScaleIconActionZoomIn
+    clientModule: clientComponents.ScaleIconActionZoomIn as StencilReactComponent<ScaleIconActionZoomInElement, ScaleIconActionZoomInEvents, JSX.ScaleIconActionZoomIn>,
+    serializeShadowRoot
 });
 
 export type ScaleIconActionZoomOutEvents = NonNullable<unknown>;
 
-export const ScaleIconActionZoomOut: StencilReactComponent<ScaleIconActionZoomOutElement, ScaleIconActionZoomOutEvents> = /*@__PURE__*/ createComponent<ScaleIconActionZoomOutElement, ScaleIconActionZoomOutEvents>({
+export const ScaleIconActionZoomOut: StencilReactComponent<ScaleIconActionZoomOutElement, ScaleIconActionZoomOutEvents, JSX.ScaleIconActionZoomOut> = /*@__PURE__*/ createComponent<ScaleIconActionZoomOutElement, ScaleIconActionZoomOutEvents, JSX.ScaleIconActionZoomOut>({
     tagName: 'scale-icon-action-zoom-out',
     properties: {
         size: 'size',
@@ -3109,17 +2628,13 @@ export const ScaleIconActionZoomOut: StencilReactComponent<ScaleIconActionZoomOu
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconActionZoomOutElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconActionZoomOutEvents,
-    defineCustomElement: defineScaleIconActionZoomOut
+    clientModule: clientComponents.ScaleIconActionZoomOut as StencilReactComponent<ScaleIconActionZoomOutElement, ScaleIconActionZoomOutEvents, JSX.ScaleIconActionZoomOut>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertAntivirusProtectionEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertAntivirusProtection: StencilReactComponent<ScaleIconAlertAntivirusProtectionElement, ScaleIconAlertAntivirusProtectionEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertAntivirusProtectionElement, ScaleIconAlertAntivirusProtectionEvents>({
+export const ScaleIconAlertAntivirusProtection: StencilReactComponent<ScaleIconAlertAntivirusProtectionElement, ScaleIconAlertAntivirusProtectionEvents, JSX.ScaleIconAlertAntivirusProtection> = /*@__PURE__*/ createComponent<ScaleIconAlertAntivirusProtectionElement, ScaleIconAlertAntivirusProtectionEvents, JSX.ScaleIconAlertAntivirusProtection>({
     tagName: 'scale-icon-alert-antivirus-protection',
     properties: {
         size: 'size',
@@ -3131,17 +2646,13 @@ export const ScaleIconAlertAntivirusProtection: StencilReactComponent<ScaleIconA
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertAntivirusProtectionElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertAntivirusProtectionEvents,
-    defineCustomElement: defineScaleIconAlertAntivirusProtection
+    clientModule: clientComponents.ScaleIconAlertAntivirusProtection as StencilReactComponent<ScaleIconAlertAntivirusProtectionElement, ScaleIconAlertAntivirusProtectionEvents, JSX.ScaleIconAlertAntivirusProtection>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertComplianceEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertCompliance: StencilReactComponent<ScaleIconAlertComplianceElement, ScaleIconAlertComplianceEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertComplianceElement, ScaleIconAlertComplianceEvents>({
+export const ScaleIconAlertCompliance: StencilReactComponent<ScaleIconAlertComplianceElement, ScaleIconAlertComplianceEvents, JSX.ScaleIconAlertCompliance> = /*@__PURE__*/ createComponent<ScaleIconAlertComplianceElement, ScaleIconAlertComplianceEvents, JSX.ScaleIconAlertCompliance>({
     tagName: 'scale-icon-alert-compliance',
     properties: {
         size: 'size',
@@ -3153,17 +2664,13 @@ export const ScaleIconAlertCompliance: StencilReactComponent<ScaleIconAlertCompl
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertComplianceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertComplianceEvents,
-    defineCustomElement: defineScaleIconAlertCompliance
+    clientModule: clientComponents.ScaleIconAlertCompliance as StencilReactComponent<ScaleIconAlertComplianceElement, ScaleIconAlertComplianceEvents, JSX.ScaleIconAlertCompliance>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertCyberSecurityEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertCyberSecurity: StencilReactComponent<ScaleIconAlertCyberSecurityElement, ScaleIconAlertCyberSecurityEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertCyberSecurityElement, ScaleIconAlertCyberSecurityEvents>({
+export const ScaleIconAlertCyberSecurity: StencilReactComponent<ScaleIconAlertCyberSecurityElement, ScaleIconAlertCyberSecurityEvents, JSX.ScaleIconAlertCyberSecurity> = /*@__PURE__*/ createComponent<ScaleIconAlertCyberSecurityElement, ScaleIconAlertCyberSecurityEvents, JSX.ScaleIconAlertCyberSecurity>({
     tagName: 'scale-icon-alert-cyber-security',
     properties: {
         size: 'size',
@@ -3175,17 +2682,13 @@ export const ScaleIconAlertCyberSecurity: StencilReactComponent<ScaleIconAlertCy
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertCyberSecurityElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertCyberSecurityEvents,
-    defineCustomElement: defineScaleIconAlertCyberSecurity
+    clientModule: clientComponents.ScaleIconAlertCyberSecurity as StencilReactComponent<ScaleIconAlertCyberSecurityElement, ScaleIconAlertCyberSecurityEvents, JSX.ScaleIconAlertCyberSecurity>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertErrorEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertError: StencilReactComponent<ScaleIconAlertErrorElement, ScaleIconAlertErrorEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertErrorElement, ScaleIconAlertErrorEvents>({
+export const ScaleIconAlertError: StencilReactComponent<ScaleIconAlertErrorElement, ScaleIconAlertErrorEvents, JSX.ScaleIconAlertError> = /*@__PURE__*/ createComponent<ScaleIconAlertErrorElement, ScaleIconAlertErrorEvents, JSX.ScaleIconAlertError>({
     tagName: 'scale-icon-alert-error',
     properties: {
         size: 'size',
@@ -3197,17 +2700,13 @@ export const ScaleIconAlertError: StencilReactComponent<ScaleIconAlertErrorEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertErrorElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertErrorEvents,
-    defineCustomElement: defineScaleIconAlertError
+    clientModule: clientComponents.ScaleIconAlertError as StencilReactComponent<ScaleIconAlertErrorElement, ScaleIconAlertErrorEvents, JSX.ScaleIconAlertError>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertHelpEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertHelp: StencilReactComponent<ScaleIconAlertHelpElement, ScaleIconAlertHelpEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertHelpElement, ScaleIconAlertHelpEvents>({
+export const ScaleIconAlertHelp: StencilReactComponent<ScaleIconAlertHelpElement, ScaleIconAlertHelpEvents, JSX.ScaleIconAlertHelp> = /*@__PURE__*/ createComponent<ScaleIconAlertHelpElement, ScaleIconAlertHelpEvents, JSX.ScaleIconAlertHelp>({
     tagName: 'scale-icon-alert-help',
     properties: {
         size: 'size',
@@ -3219,17 +2718,13 @@ export const ScaleIconAlertHelp: StencilReactComponent<ScaleIconAlertHelpElement
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertHelpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertHelpEvents,
-    defineCustomElement: defineScaleIconAlertHelp
+    clientModule: clientComponents.ScaleIconAlertHelp as StencilReactComponent<ScaleIconAlertHelpElement, ScaleIconAlertHelpEvents, JSX.ScaleIconAlertHelp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertHighPriorityEmailEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertHighPriorityEmail: StencilReactComponent<ScaleIconAlertHighPriorityEmailElement, ScaleIconAlertHighPriorityEmailEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertHighPriorityEmailElement, ScaleIconAlertHighPriorityEmailEvents>({
+export const ScaleIconAlertHighPriorityEmail: StencilReactComponent<ScaleIconAlertHighPriorityEmailElement, ScaleIconAlertHighPriorityEmailEvents, JSX.ScaleIconAlertHighPriorityEmail> = /*@__PURE__*/ createComponent<ScaleIconAlertHighPriorityEmailElement, ScaleIconAlertHighPriorityEmailEvents, JSX.ScaleIconAlertHighPriorityEmail>({
     tagName: 'scale-icon-alert-high-priority-email',
     properties: {
         size: 'size',
@@ -3241,17 +2736,13 @@ export const ScaleIconAlertHighPriorityEmail: StencilReactComponent<ScaleIconAle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertHighPriorityEmailElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertHighPriorityEmailEvents,
-    defineCustomElement: defineScaleIconAlertHighPriorityEmail
+    clientModule: clientComponents.ScaleIconAlertHighPriorityEmail as StencilReactComponent<ScaleIconAlertHighPriorityEmailElement, ScaleIconAlertHighPriorityEmailEvents, JSX.ScaleIconAlertHighPriorityEmail>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertImprintDataprivacyEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertImprintDataprivacy: StencilReactComponent<ScaleIconAlertImprintDataprivacyElement, ScaleIconAlertImprintDataprivacyEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertImprintDataprivacyElement, ScaleIconAlertImprintDataprivacyEvents>({
+export const ScaleIconAlertImprintDataprivacy: StencilReactComponent<ScaleIconAlertImprintDataprivacyElement, ScaleIconAlertImprintDataprivacyEvents, JSX.ScaleIconAlertImprintDataprivacy> = /*@__PURE__*/ createComponent<ScaleIconAlertImprintDataprivacyElement, ScaleIconAlertImprintDataprivacyEvents, JSX.ScaleIconAlertImprintDataprivacy>({
     tagName: 'scale-icon-alert-imprint-dataprivacy',
     properties: {
         size: 'size',
@@ -3263,17 +2754,13 @@ export const ScaleIconAlertImprintDataprivacy: StencilReactComponent<ScaleIconAl
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertImprintDataprivacyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertImprintDataprivacyEvents,
-    defineCustomElement: defineScaleIconAlertImprintDataprivacy
+    clientModule: clientComponents.ScaleIconAlertImprintDataprivacy as StencilReactComponent<ScaleIconAlertImprintDataprivacyElement, ScaleIconAlertImprintDataprivacyEvents, JSX.ScaleIconAlertImprintDataprivacy>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertInformationEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertInformation: StencilReactComponent<ScaleIconAlertInformationElement, ScaleIconAlertInformationEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertInformationElement, ScaleIconAlertInformationEvents>({
+export const ScaleIconAlertInformation: StencilReactComponent<ScaleIconAlertInformationElement, ScaleIconAlertInformationEvents, JSX.ScaleIconAlertInformation> = /*@__PURE__*/ createComponent<ScaleIconAlertInformationElement, ScaleIconAlertInformationEvents, JSX.ScaleIconAlertInformation>({
     tagName: 'scale-icon-alert-information',
     properties: {
         size: 'size',
@@ -3285,17 +2772,13 @@ export const ScaleIconAlertInformation: StencilReactComponent<ScaleIconAlertInfo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertInformationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertInformationEvents,
-    defineCustomElement: defineScaleIconAlertInformation
+    clientModule: clientComponents.ScaleIconAlertInformation as StencilReactComponent<ScaleIconAlertInformationElement, ScaleIconAlertInformationEvents, JSX.ScaleIconAlertInformation>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertLegalEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertLegal: StencilReactComponent<ScaleIconAlertLegalElement, ScaleIconAlertLegalEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertLegalElement, ScaleIconAlertLegalEvents>({
+export const ScaleIconAlertLegal: StencilReactComponent<ScaleIconAlertLegalElement, ScaleIconAlertLegalEvents, JSX.ScaleIconAlertLegal> = /*@__PURE__*/ createComponent<ScaleIconAlertLegalElement, ScaleIconAlertLegalEvents, JSX.ScaleIconAlertLegal>({
     tagName: 'scale-icon-alert-legal',
     properties: {
         size: 'size',
@@ -3307,17 +2790,13 @@ export const ScaleIconAlertLegal: StencilReactComponent<ScaleIconAlertLegalEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertLegalElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertLegalEvents,
-    defineCustomElement: defineScaleIconAlertLegal
+    clientModule: clientComponents.ScaleIconAlertLegal as StencilReactComponent<ScaleIconAlertLegalElement, ScaleIconAlertLegalEvents, JSX.ScaleIconAlertLegal>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertNetworkDisruptedEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertNetworkDisrupted: StencilReactComponent<ScaleIconAlertNetworkDisruptedElement, ScaleIconAlertNetworkDisruptedEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertNetworkDisruptedElement, ScaleIconAlertNetworkDisruptedEvents>({
+export const ScaleIconAlertNetworkDisrupted: StencilReactComponent<ScaleIconAlertNetworkDisruptedElement, ScaleIconAlertNetworkDisruptedEvents, JSX.ScaleIconAlertNetworkDisrupted> = /*@__PURE__*/ createComponent<ScaleIconAlertNetworkDisruptedElement, ScaleIconAlertNetworkDisruptedEvents, JSX.ScaleIconAlertNetworkDisrupted>({
     tagName: 'scale-icon-alert-network-disrupted',
     properties: {
         size: 'size',
@@ -3329,17 +2808,13 @@ export const ScaleIconAlertNetworkDisrupted: StencilReactComponent<ScaleIconAler
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertNetworkDisruptedElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertNetworkDisruptedEvents,
-    defineCustomElement: defineScaleIconAlertNetworkDisrupted
+    clientModule: clientComponents.ScaleIconAlertNetworkDisrupted as StencilReactComponent<ScaleIconAlertNetworkDisruptedElement, ScaleIconAlertNetworkDisruptedEvents, JSX.ScaleIconAlertNetworkDisrupted>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertPasswordBreakingEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertPasswordBreaking: StencilReactComponent<ScaleIconAlertPasswordBreakingElement, ScaleIconAlertPasswordBreakingEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertPasswordBreakingElement, ScaleIconAlertPasswordBreakingEvents>({
+export const ScaleIconAlertPasswordBreaking: StencilReactComponent<ScaleIconAlertPasswordBreakingElement, ScaleIconAlertPasswordBreakingEvents, JSX.ScaleIconAlertPasswordBreaking> = /*@__PURE__*/ createComponent<ScaleIconAlertPasswordBreakingElement, ScaleIconAlertPasswordBreakingEvents, JSX.ScaleIconAlertPasswordBreaking>({
     tagName: 'scale-icon-alert-password-breaking',
     properties: {
         size: 'size',
@@ -3351,17 +2826,13 @@ export const ScaleIconAlertPasswordBreaking: StencilReactComponent<ScaleIconAler
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertPasswordBreakingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertPasswordBreakingEvents,
-    defineCustomElement: defineScaleIconAlertPasswordBreaking
+    clientModule: clientComponents.ScaleIconAlertPasswordBreaking as StencilReactComponent<ScaleIconAlertPasswordBreakingElement, ScaleIconAlertPasswordBreakingEvents, JSX.ScaleIconAlertPasswordBreaking>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertSecurityEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertSecurity: StencilReactComponent<ScaleIconAlertSecurityElement, ScaleIconAlertSecurityEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertSecurityElement, ScaleIconAlertSecurityEvents>({
+export const ScaleIconAlertSecurity: StencilReactComponent<ScaleIconAlertSecurityElement, ScaleIconAlertSecurityEvents, JSX.ScaleIconAlertSecurity> = /*@__PURE__*/ createComponent<ScaleIconAlertSecurityElement, ScaleIconAlertSecurityEvents, JSX.ScaleIconAlertSecurity>({
     tagName: 'scale-icon-alert-security',
     properties: {
         size: 'size',
@@ -3373,17 +2844,13 @@ export const ScaleIconAlertSecurity: StencilReactComponent<ScaleIconAlertSecurit
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertSecurityElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertSecurityEvents,
-    defineCustomElement: defineScaleIconAlertSecurity
+    clientModule: clientComponents.ScaleIconAlertSecurity as StencilReactComponent<ScaleIconAlertSecurityElement, ScaleIconAlertSecurityEvents, JSX.ScaleIconAlertSecurity>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertTrafficDisruptionEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertTrafficDisruption: StencilReactComponent<ScaleIconAlertTrafficDisruptionElement, ScaleIconAlertTrafficDisruptionEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertTrafficDisruptionElement, ScaleIconAlertTrafficDisruptionEvents>({
+export const ScaleIconAlertTrafficDisruption: StencilReactComponent<ScaleIconAlertTrafficDisruptionElement, ScaleIconAlertTrafficDisruptionEvents, JSX.ScaleIconAlertTrafficDisruption> = /*@__PURE__*/ createComponent<ScaleIconAlertTrafficDisruptionElement, ScaleIconAlertTrafficDisruptionEvents, JSX.ScaleIconAlertTrafficDisruption>({
     tagName: 'scale-icon-alert-traffic-disruption',
     properties: {
         size: 'size',
@@ -3395,17 +2862,13 @@ export const ScaleIconAlertTrafficDisruption: StencilReactComponent<ScaleIconAle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertTrafficDisruptionElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertTrafficDisruptionEvents,
-    defineCustomElement: defineScaleIconAlertTrafficDisruption
+    clientModule: clientComponents.ScaleIconAlertTrafficDisruption as StencilReactComponent<ScaleIconAlertTrafficDisruptionElement, ScaleIconAlertTrafficDisruptionEvents, JSX.ScaleIconAlertTrafficDisruption>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertUnknownEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertUnknown: StencilReactComponent<ScaleIconAlertUnknownElement, ScaleIconAlertUnknownEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertUnknownElement, ScaleIconAlertUnknownEvents>({
+export const ScaleIconAlertUnknown: StencilReactComponent<ScaleIconAlertUnknownElement, ScaleIconAlertUnknownEvents, JSX.ScaleIconAlertUnknown> = /*@__PURE__*/ createComponent<ScaleIconAlertUnknownElement, ScaleIconAlertUnknownEvents, JSX.ScaleIconAlertUnknown>({
     tagName: 'scale-icon-alert-unknown',
     properties: {
         size: 'size',
@@ -3417,17 +2880,13 @@ export const ScaleIconAlertUnknown: StencilReactComponent<ScaleIconAlertUnknownE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertUnknownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertUnknownEvents,
-    defineCustomElement: defineScaleIconAlertUnknown
+    clientModule: clientComponents.ScaleIconAlertUnknown as StencilReactComponent<ScaleIconAlertUnknownElement, ScaleIconAlertUnknownEvents, JSX.ScaleIconAlertUnknown>,
+    serializeShadowRoot
 });
 
 export type ScaleIconAlertWarningEvents = NonNullable<unknown>;
 
-export const ScaleIconAlertWarning: StencilReactComponent<ScaleIconAlertWarningElement, ScaleIconAlertWarningEvents> = /*@__PURE__*/ createComponent<ScaleIconAlertWarningElement, ScaleIconAlertWarningEvents>({
+export const ScaleIconAlertWarning: StencilReactComponent<ScaleIconAlertWarningElement, ScaleIconAlertWarningEvents, JSX.ScaleIconAlertWarning> = /*@__PURE__*/ createComponent<ScaleIconAlertWarningElement, ScaleIconAlertWarningEvents, JSX.ScaleIconAlertWarning>({
     tagName: 'scale-icon-alert-warning',
     properties: {
         size: 'size',
@@ -3439,17 +2898,13 @@ export const ScaleIconAlertWarning: StencilReactComponent<ScaleIconAlertWarningE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconAlertWarningElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconAlertWarningEvents,
-    defineCustomElement: defineScaleIconAlertWarning
+    clientModule: clientComponents.ScaleIconAlertWarning as StencilReactComponent<ScaleIconAlertWarningElement, ScaleIconAlertWarningEvents, JSX.ScaleIconAlertWarning>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationAvailableEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationAvailable: StencilReactComponent<ScaleIconCommunicationAvailableElement, ScaleIconCommunicationAvailableEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationAvailableElement, ScaleIconCommunicationAvailableEvents>({
+export const ScaleIconCommunicationAvailable: StencilReactComponent<ScaleIconCommunicationAvailableElement, ScaleIconCommunicationAvailableEvents, JSX.ScaleIconCommunicationAvailable> = /*@__PURE__*/ createComponent<ScaleIconCommunicationAvailableElement, ScaleIconCommunicationAvailableEvents, JSX.ScaleIconCommunicationAvailable>({
     tagName: 'scale-icon-communication-available',
     properties: {
         size: 'size',
@@ -3461,17 +2916,13 @@ export const ScaleIconCommunicationAvailable: StencilReactComponent<ScaleIconCom
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationAvailableElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationAvailableEvents,
-    defineCustomElement: defineScaleIconCommunicationAvailable
+    clientModule: clientComponents.ScaleIconCommunicationAvailable as StencilReactComponent<ScaleIconCommunicationAvailableElement, ScaleIconCommunicationAvailableEvents, JSX.ScaleIconCommunicationAvailable>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationBlogEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationBlog: StencilReactComponent<ScaleIconCommunicationBlogElement, ScaleIconCommunicationBlogEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationBlogElement, ScaleIconCommunicationBlogEvents>({
+export const ScaleIconCommunicationBlog: StencilReactComponent<ScaleIconCommunicationBlogElement, ScaleIconCommunicationBlogEvents, JSX.ScaleIconCommunicationBlog> = /*@__PURE__*/ createComponent<ScaleIconCommunicationBlogElement, ScaleIconCommunicationBlogEvents, JSX.ScaleIconCommunicationBlog>({
     tagName: 'scale-icon-communication-blog',
     properties: {
         size: 'size',
@@ -3483,17 +2934,13 @@ export const ScaleIconCommunicationBlog: StencilReactComponent<ScaleIconCommunic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationBlogElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationBlogEvents,
-    defineCustomElement: defineScaleIconCommunicationBlog
+    clientModule: clientComponents.ScaleIconCommunicationBlog as StencilReactComponent<ScaleIconCommunicationBlogElement, ScaleIconCommunicationBlogEvents, JSX.ScaleIconCommunicationBlog>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationCallIncomingEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationCallIncoming: StencilReactComponent<ScaleIconCommunicationCallIncomingElement, ScaleIconCommunicationCallIncomingEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationCallIncomingElement, ScaleIconCommunicationCallIncomingEvents>({
+export const ScaleIconCommunicationCallIncoming: StencilReactComponent<ScaleIconCommunicationCallIncomingElement, ScaleIconCommunicationCallIncomingEvents, JSX.ScaleIconCommunicationCallIncoming> = /*@__PURE__*/ createComponent<ScaleIconCommunicationCallIncomingElement, ScaleIconCommunicationCallIncomingEvents, JSX.ScaleIconCommunicationCallIncoming>({
     tagName: 'scale-icon-communication-call-incoming',
     properties: {
         size: 'size',
@@ -3505,17 +2952,13 @@ export const ScaleIconCommunicationCallIncoming: StencilReactComponent<ScaleIcon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationCallIncomingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationCallIncomingEvents,
-    defineCustomElement: defineScaleIconCommunicationCallIncoming
+    clientModule: clientComponents.ScaleIconCommunicationCallIncoming as StencilReactComponent<ScaleIconCommunicationCallIncomingElement, ScaleIconCommunicationCallIncomingEvents, JSX.ScaleIconCommunicationCallIncoming>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationCallOutgoingEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationCallOutgoing: StencilReactComponent<ScaleIconCommunicationCallOutgoingElement, ScaleIconCommunicationCallOutgoingEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationCallOutgoingElement, ScaleIconCommunicationCallOutgoingEvents>({
+export const ScaleIconCommunicationCallOutgoing: StencilReactComponent<ScaleIconCommunicationCallOutgoingElement, ScaleIconCommunicationCallOutgoingEvents, JSX.ScaleIconCommunicationCallOutgoing> = /*@__PURE__*/ createComponent<ScaleIconCommunicationCallOutgoingElement, ScaleIconCommunicationCallOutgoingEvents, JSX.ScaleIconCommunicationCallOutgoing>({
     tagName: 'scale-icon-communication-call-outgoing',
     properties: {
         size: 'size',
@@ -3527,17 +2970,13 @@ export const ScaleIconCommunicationCallOutgoing: StencilReactComponent<ScaleIcon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationCallOutgoingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationCallOutgoingEvents,
-    defineCustomElement: defineScaleIconCommunicationCallOutgoing
+    clientModule: clientComponents.ScaleIconCommunicationCallOutgoing as StencilReactComponent<ScaleIconCommunicationCallOutgoingElement, ScaleIconCommunicationCallOutgoingEvents, JSX.ScaleIconCommunicationCallOutgoing>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationChatEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationChat: StencilReactComponent<ScaleIconCommunicationChatElement, ScaleIconCommunicationChatEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationChatElement, ScaleIconCommunicationChatEvents>({
+export const ScaleIconCommunicationChat: StencilReactComponent<ScaleIconCommunicationChatElement, ScaleIconCommunicationChatEvents, JSX.ScaleIconCommunicationChat> = /*@__PURE__*/ createComponent<ScaleIconCommunicationChatElement, ScaleIconCommunicationChatEvents, JSX.ScaleIconCommunicationChat>({
     tagName: 'scale-icon-communication-chat',
     properties: {
         size: 'size',
@@ -3549,17 +2988,13 @@ export const ScaleIconCommunicationChat: StencilReactComponent<ScaleIconCommunic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationChatElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationChatEvents,
-    defineCustomElement: defineScaleIconCommunicationChat
+    clientModule: clientComponents.ScaleIconCommunicationChat as StencilReactComponent<ScaleIconCommunicationChatElement, ScaleIconCommunicationChatEvents, JSX.ScaleIconCommunicationChat>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationChatBadgeEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationChatBadge: StencilReactComponent<ScaleIconCommunicationChatBadgeElement, ScaleIconCommunicationChatBadgeEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationChatBadgeElement, ScaleIconCommunicationChatBadgeEvents>({
+export const ScaleIconCommunicationChatBadge: StencilReactComponent<ScaleIconCommunicationChatBadgeElement, ScaleIconCommunicationChatBadgeEvents, JSX.ScaleIconCommunicationChatBadge> = /*@__PURE__*/ createComponent<ScaleIconCommunicationChatBadgeElement, ScaleIconCommunicationChatBadgeEvents, JSX.ScaleIconCommunicationChatBadge>({
     tagName: 'scale-icon-communication-chat-badge',
     properties: {
         size: 'size',
@@ -3571,17 +3006,13 @@ export const ScaleIconCommunicationChatBadge: StencilReactComponent<ScaleIconCom
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationChatBadgeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationChatBadgeEvents,
-    defineCustomElement: defineScaleIconCommunicationChatBadge
+    clientModule: clientComponents.ScaleIconCommunicationChatBadge as StencilReactComponent<ScaleIconCommunicationChatBadgeElement, ScaleIconCommunicationChatBadgeEvents, JSX.ScaleIconCommunicationChatBadge>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationEmailEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationEmail: StencilReactComponent<ScaleIconCommunicationEmailElement, ScaleIconCommunicationEmailEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationEmailElement, ScaleIconCommunicationEmailEvents>({
+export const ScaleIconCommunicationEmail: StencilReactComponent<ScaleIconCommunicationEmailElement, ScaleIconCommunicationEmailEvents, JSX.ScaleIconCommunicationEmail> = /*@__PURE__*/ createComponent<ScaleIconCommunicationEmailElement, ScaleIconCommunicationEmailEvents, JSX.ScaleIconCommunicationEmail>({
     tagName: 'scale-icon-communication-email',
     properties: {
         size: 'size',
@@ -3593,17 +3024,13 @@ export const ScaleIconCommunicationEmail: StencilReactComponent<ScaleIconCommuni
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationEmailElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationEmailEvents,
-    defineCustomElement: defineScaleIconCommunicationEmail
+    clientModule: clientComponents.ScaleIconCommunicationEmail as StencilReactComponent<ScaleIconCommunicationEmailElement, ScaleIconCommunicationEmailEvents, JSX.ScaleIconCommunicationEmail>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationEndCallEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationEndCall: StencilReactComponent<ScaleIconCommunicationEndCallElement, ScaleIconCommunicationEndCallEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationEndCallElement, ScaleIconCommunicationEndCallEvents>({
+export const ScaleIconCommunicationEndCall: StencilReactComponent<ScaleIconCommunicationEndCallElement, ScaleIconCommunicationEndCallEvents, JSX.ScaleIconCommunicationEndCall> = /*@__PURE__*/ createComponent<ScaleIconCommunicationEndCallElement, ScaleIconCommunicationEndCallEvents, JSX.ScaleIconCommunicationEndCall>({
     tagName: 'scale-icon-communication-end-call',
     properties: {
         size: 'size',
@@ -3615,17 +3042,13 @@ export const ScaleIconCommunicationEndCall: StencilReactComponent<ScaleIconCommu
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationEndCallElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationEndCallEvents,
-    defineCustomElement: defineScaleIconCommunicationEndCall
+    clientModule: clientComponents.ScaleIconCommunicationEndCall as StencilReactComponent<ScaleIconCommunicationEndCallElement, ScaleIconCommunicationEndCallEvents, JSX.ScaleIconCommunicationEndCall>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationFeedbackEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationFeedback: StencilReactComponent<ScaleIconCommunicationFeedbackElement, ScaleIconCommunicationFeedbackEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationFeedbackElement, ScaleIconCommunicationFeedbackEvents>({
+export const ScaleIconCommunicationFeedback: StencilReactComponent<ScaleIconCommunicationFeedbackElement, ScaleIconCommunicationFeedbackEvents, JSX.ScaleIconCommunicationFeedback> = /*@__PURE__*/ createComponent<ScaleIconCommunicationFeedbackElement, ScaleIconCommunicationFeedbackEvents, JSX.ScaleIconCommunicationFeedback>({
     tagName: 'scale-icon-communication-feedback',
     properties: {
         size: 'size',
@@ -3637,17 +3060,13 @@ export const ScaleIconCommunicationFeedback: StencilReactComponent<ScaleIconComm
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationFeedbackElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationFeedbackEvents,
-    defineCustomElement: defineScaleIconCommunicationFeedback
+    clientModule: clientComponents.ScaleIconCommunicationFeedback as StencilReactComponent<ScaleIconCommunicationFeedbackElement, ScaleIconCommunicationFeedbackEvents, JSX.ScaleIconCommunicationFeedback>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationFlightModeEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationFlightMode: StencilReactComponent<ScaleIconCommunicationFlightModeElement, ScaleIconCommunicationFlightModeEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationFlightModeElement, ScaleIconCommunicationFlightModeEvents>({
+export const ScaleIconCommunicationFlightMode: StencilReactComponent<ScaleIconCommunicationFlightModeElement, ScaleIconCommunicationFlightModeEvents, JSX.ScaleIconCommunicationFlightMode> = /*@__PURE__*/ createComponent<ScaleIconCommunicationFlightModeElement, ScaleIconCommunicationFlightModeEvents, JSX.ScaleIconCommunicationFlightMode>({
     tagName: 'scale-icon-communication-flight-mode',
     properties: {
         size: 'size',
@@ -3659,17 +3078,13 @@ export const ScaleIconCommunicationFlightMode: StencilReactComponent<ScaleIconCo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationFlightModeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationFlightModeEvents,
-    defineCustomElement: defineScaleIconCommunicationFlightMode
+    clientModule: clientComponents.ScaleIconCommunicationFlightMode as StencilReactComponent<ScaleIconCommunicationFlightModeElement, ScaleIconCommunicationFlightModeEvents, JSX.ScaleIconCommunicationFlightMode>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationHappyPersonEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationHappyPerson: StencilReactComponent<ScaleIconCommunicationHappyPersonElement, ScaleIconCommunicationHappyPersonEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationHappyPersonElement, ScaleIconCommunicationHappyPersonEvents>({
+export const ScaleIconCommunicationHappyPerson: StencilReactComponent<ScaleIconCommunicationHappyPersonElement, ScaleIconCommunicationHappyPersonEvents, JSX.ScaleIconCommunicationHappyPerson> = /*@__PURE__*/ createComponent<ScaleIconCommunicationHappyPersonElement, ScaleIconCommunicationHappyPersonEvents, JSX.ScaleIconCommunicationHappyPerson>({
     tagName: 'scale-icon-communication-happy-person',
     properties: {
         size: 'size',
@@ -3681,17 +3096,13 @@ export const ScaleIconCommunicationHappyPerson: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationHappyPersonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationHappyPersonEvents,
-    defineCustomElement: defineScaleIconCommunicationHappyPerson
+    clientModule: clientComponents.ScaleIconCommunicationHappyPerson as StencilReactComponent<ScaleIconCommunicationHappyPersonElement, ScaleIconCommunicationHappyPersonEvents, JSX.ScaleIconCommunicationHappyPerson>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationInboxEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationInbox: StencilReactComponent<ScaleIconCommunicationInboxElement, ScaleIconCommunicationInboxEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationInboxElement, ScaleIconCommunicationInboxEvents>({
+export const ScaleIconCommunicationInbox: StencilReactComponent<ScaleIconCommunicationInboxElement, ScaleIconCommunicationInboxEvents, JSX.ScaleIconCommunicationInbox> = /*@__PURE__*/ createComponent<ScaleIconCommunicationInboxElement, ScaleIconCommunicationInboxEvents, JSX.ScaleIconCommunicationInbox>({
     tagName: 'scale-icon-communication-inbox',
     properties: {
         size: 'size',
@@ -3703,17 +3114,13 @@ export const ScaleIconCommunicationInbox: StencilReactComponent<ScaleIconCommuni
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationInboxElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationInboxEvents,
-    defineCustomElement: defineScaleIconCommunicationInbox
+    clientModule: clientComponents.ScaleIconCommunicationInbox as StencilReactComponent<ScaleIconCommunicationInboxElement, ScaleIconCommunicationInboxEvents, JSX.ScaleIconCommunicationInbox>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationLandingMobileContactClientEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationLandingMobileContactClient: StencilReactComponent<ScaleIconCommunicationLandingMobileContactClientElement, ScaleIconCommunicationLandingMobileContactClientEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationLandingMobileContactClientElement, ScaleIconCommunicationLandingMobileContactClientEvents>({
+export const ScaleIconCommunicationLandingMobileContactClient: StencilReactComponent<ScaleIconCommunicationLandingMobileContactClientElement, ScaleIconCommunicationLandingMobileContactClientEvents, JSX.ScaleIconCommunicationLandingMobileContactClient> = /*@__PURE__*/ createComponent<ScaleIconCommunicationLandingMobileContactClientElement, ScaleIconCommunicationLandingMobileContactClientEvents, JSX.ScaleIconCommunicationLandingMobileContactClient>({
     tagName: 'scale-icon-communication-landing-mobile-contact-client',
     properties: {
         size: 'size',
@@ -3725,17 +3132,13 @@ export const ScaleIconCommunicationLandingMobileContactClient: StencilReactCompo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationLandingMobileContactClientElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationLandingMobileContactClientEvents,
-    defineCustomElement: defineScaleIconCommunicationLandingMobileContactClient
+    clientModule: clientComponents.ScaleIconCommunicationLandingMobileContactClient as StencilReactComponent<ScaleIconCommunicationLandingMobileContactClientElement, ScaleIconCommunicationLandingMobileContactClientEvents, JSX.ScaleIconCommunicationLandingMobileContactClient>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationLoyaltyEarnedEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationLoyaltyEarned: StencilReactComponent<ScaleIconCommunicationLoyaltyEarnedElement, ScaleIconCommunicationLoyaltyEarnedEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationLoyaltyEarnedElement, ScaleIconCommunicationLoyaltyEarnedEvents>({
+export const ScaleIconCommunicationLoyaltyEarned: StencilReactComponent<ScaleIconCommunicationLoyaltyEarnedElement, ScaleIconCommunicationLoyaltyEarnedEvents, JSX.ScaleIconCommunicationLoyaltyEarned> = /*@__PURE__*/ createComponent<ScaleIconCommunicationLoyaltyEarnedElement, ScaleIconCommunicationLoyaltyEarnedEvents, JSX.ScaleIconCommunicationLoyaltyEarned>({
     tagName: 'scale-icon-communication-loyalty-earned',
     properties: {
         size: 'size',
@@ -3747,17 +3150,13 @@ export const ScaleIconCommunicationLoyaltyEarned: StencilReactComponent<ScaleIco
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationLoyaltyEarnedElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationLoyaltyEarnedEvents,
-    defineCustomElement: defineScaleIconCommunicationLoyaltyEarned
+    clientModule: clientComponents.ScaleIconCommunicationLoyaltyEarned as StencilReactComponent<ScaleIconCommunicationLoyaltyEarnedElement, ScaleIconCommunicationLoyaltyEarnedEvents, JSX.ScaleIconCommunicationLoyaltyEarned>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationLoyaltyLostEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationLoyaltyLost: StencilReactComponent<ScaleIconCommunicationLoyaltyLostElement, ScaleIconCommunicationLoyaltyLostEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationLoyaltyLostElement, ScaleIconCommunicationLoyaltyLostEvents>({
+export const ScaleIconCommunicationLoyaltyLost: StencilReactComponent<ScaleIconCommunicationLoyaltyLostElement, ScaleIconCommunicationLoyaltyLostEvents, JSX.ScaleIconCommunicationLoyaltyLost> = /*@__PURE__*/ createComponent<ScaleIconCommunicationLoyaltyLostElement, ScaleIconCommunicationLoyaltyLostEvents, JSX.ScaleIconCommunicationLoyaltyLost>({
     tagName: 'scale-icon-communication-loyalty-lost',
     properties: {
         size: 'size',
@@ -3769,17 +3168,13 @@ export const ScaleIconCommunicationLoyaltyLost: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationLoyaltyLostElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationLoyaltyLostEvents,
-    defineCustomElement: defineScaleIconCommunicationLoyaltyLost
+    clientModule: clientComponents.ScaleIconCommunicationLoyaltyLost as StencilReactComponent<ScaleIconCommunicationLoyaltyLostElement, ScaleIconCommunicationLoyaltyLostEvents, JSX.ScaleIconCommunicationLoyaltyLost>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationMailOpenedEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationMailOpened: StencilReactComponent<ScaleIconCommunicationMailOpenedElement, ScaleIconCommunicationMailOpenedEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMailOpenedElement, ScaleIconCommunicationMailOpenedEvents>({
+export const ScaleIconCommunicationMailOpened: StencilReactComponent<ScaleIconCommunicationMailOpenedElement, ScaleIconCommunicationMailOpenedEvents, JSX.ScaleIconCommunicationMailOpened> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMailOpenedElement, ScaleIconCommunicationMailOpenedEvents, JSX.ScaleIconCommunicationMailOpened>({
     tagName: 'scale-icon-communication-mail-opened',
     properties: {
         size: 'size',
@@ -3791,17 +3186,13 @@ export const ScaleIconCommunicationMailOpened: StencilReactComponent<ScaleIconCo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationMailOpenedElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationMailOpenedEvents,
-    defineCustomElement: defineScaleIconCommunicationMailOpened
+    clientModule: clientComponents.ScaleIconCommunicationMailOpened as StencilReactComponent<ScaleIconCommunicationMailOpenedElement, ScaleIconCommunicationMailOpenedEvents, JSX.ScaleIconCommunicationMailOpened>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationMessageEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationMessage: StencilReactComponent<ScaleIconCommunicationMessageElement, ScaleIconCommunicationMessageEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMessageElement, ScaleIconCommunicationMessageEvents>({
+export const ScaleIconCommunicationMessage: StencilReactComponent<ScaleIconCommunicationMessageElement, ScaleIconCommunicationMessageEvents, JSX.ScaleIconCommunicationMessage> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMessageElement, ScaleIconCommunicationMessageEvents, JSX.ScaleIconCommunicationMessage>({
     tagName: 'scale-icon-communication-message',
     properties: {
         size: 'size',
@@ -3813,17 +3204,13 @@ export const ScaleIconCommunicationMessage: StencilReactComponent<ScaleIconCommu
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationMessageElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationMessageEvents,
-    defineCustomElement: defineScaleIconCommunicationMessage
+    clientModule: clientComponents.ScaleIconCommunicationMessage as StencilReactComponent<ScaleIconCommunicationMessageElement, ScaleIconCommunicationMessageEvents, JSX.ScaleIconCommunicationMessage>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationMessageIncomingEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationMessageIncoming: StencilReactComponent<ScaleIconCommunicationMessageIncomingElement, ScaleIconCommunicationMessageIncomingEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMessageIncomingElement, ScaleIconCommunicationMessageIncomingEvents>({
+export const ScaleIconCommunicationMessageIncoming: StencilReactComponent<ScaleIconCommunicationMessageIncomingElement, ScaleIconCommunicationMessageIncomingEvents, JSX.ScaleIconCommunicationMessageIncoming> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMessageIncomingElement, ScaleIconCommunicationMessageIncomingEvents, JSX.ScaleIconCommunicationMessageIncoming>({
     tagName: 'scale-icon-communication-message-incoming',
     properties: {
         size: 'size',
@@ -3835,17 +3222,13 @@ export const ScaleIconCommunicationMessageIncoming: StencilReactComponent<ScaleI
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationMessageIncomingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationMessageIncomingEvents,
-    defineCustomElement: defineScaleIconCommunicationMessageIncoming
+    clientModule: clientComponents.ScaleIconCommunicationMessageIncoming as StencilReactComponent<ScaleIconCommunicationMessageIncomingElement, ScaleIconCommunicationMessageIncomingEvents, JSX.ScaleIconCommunicationMessageIncoming>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationMessageOutgoingEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationMessageOutgoing: StencilReactComponent<ScaleIconCommunicationMessageOutgoingElement, ScaleIconCommunicationMessageOutgoingEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMessageOutgoingElement, ScaleIconCommunicationMessageOutgoingEvents>({
+export const ScaleIconCommunicationMessageOutgoing: StencilReactComponent<ScaleIconCommunicationMessageOutgoingElement, ScaleIconCommunicationMessageOutgoingEvents, JSX.ScaleIconCommunicationMessageOutgoing> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMessageOutgoingElement, ScaleIconCommunicationMessageOutgoingEvents, JSX.ScaleIconCommunicationMessageOutgoing>({
     tagName: 'scale-icon-communication-message-outgoing',
     properties: {
         size: 'size',
@@ -3857,17 +3240,13 @@ export const ScaleIconCommunicationMessageOutgoing: StencilReactComponent<ScaleI
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationMessageOutgoingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationMessageOutgoingEvents,
-    defineCustomElement: defineScaleIconCommunicationMessageOutgoing
+    clientModule: clientComponents.ScaleIconCommunicationMessageOutgoing as StencilReactComponent<ScaleIconCommunicationMessageOutgoingElement, ScaleIconCommunicationMessageOutgoingEvents, JSX.ScaleIconCommunicationMessageOutgoing>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationMmsIncomingEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationMmsIncoming: StencilReactComponent<ScaleIconCommunicationMmsIncomingElement, ScaleIconCommunicationMmsIncomingEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMmsIncomingElement, ScaleIconCommunicationMmsIncomingEvents>({
+export const ScaleIconCommunicationMmsIncoming: StencilReactComponent<ScaleIconCommunicationMmsIncomingElement, ScaleIconCommunicationMmsIncomingEvents, JSX.ScaleIconCommunicationMmsIncoming> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMmsIncomingElement, ScaleIconCommunicationMmsIncomingEvents, JSX.ScaleIconCommunicationMmsIncoming>({
     tagName: 'scale-icon-communication-mms-incoming',
     properties: {
         size: 'size',
@@ -3879,17 +3258,13 @@ export const ScaleIconCommunicationMmsIncoming: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationMmsIncomingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationMmsIncomingEvents,
-    defineCustomElement: defineScaleIconCommunicationMmsIncoming
+    clientModule: clientComponents.ScaleIconCommunicationMmsIncoming as StencilReactComponent<ScaleIconCommunicationMmsIncomingElement, ScaleIconCommunicationMmsIncomingEvents, JSX.ScaleIconCommunicationMmsIncoming>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationMmsOutgoingEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationMmsOutgoing: StencilReactComponent<ScaleIconCommunicationMmsOutgoingElement, ScaleIconCommunicationMmsOutgoingEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMmsOutgoingElement, ScaleIconCommunicationMmsOutgoingEvents>({
+export const ScaleIconCommunicationMmsOutgoing: StencilReactComponent<ScaleIconCommunicationMmsOutgoingElement, ScaleIconCommunicationMmsOutgoingEvents, JSX.ScaleIconCommunicationMmsOutgoing> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMmsOutgoingElement, ScaleIconCommunicationMmsOutgoingEvents, JSX.ScaleIconCommunicationMmsOutgoing>({
     tagName: 'scale-icon-communication-mms-outgoing',
     properties: {
         size: 'size',
@@ -3901,17 +3276,13 @@ export const ScaleIconCommunicationMmsOutgoing: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationMmsOutgoingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationMmsOutgoingEvents,
-    defineCustomElement: defineScaleIconCommunicationMmsOutgoing
+    clientModule: clientComponents.ScaleIconCommunicationMmsOutgoing as StencilReactComponent<ScaleIconCommunicationMmsOutgoingElement, ScaleIconCommunicationMmsOutgoingEvents, JSX.ScaleIconCommunicationMmsOutgoing>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationMobilePhoneNumberEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationMobilePhoneNumber: StencilReactComponent<ScaleIconCommunicationMobilePhoneNumberElement, ScaleIconCommunicationMobilePhoneNumberEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMobilePhoneNumberElement, ScaleIconCommunicationMobilePhoneNumberEvents>({
+export const ScaleIconCommunicationMobilePhoneNumber: StencilReactComponent<ScaleIconCommunicationMobilePhoneNumberElement, ScaleIconCommunicationMobilePhoneNumberEvents, JSX.ScaleIconCommunicationMobilePhoneNumber> = /*@__PURE__*/ createComponent<ScaleIconCommunicationMobilePhoneNumberElement, ScaleIconCommunicationMobilePhoneNumberEvents, JSX.ScaleIconCommunicationMobilePhoneNumber>({
     tagName: 'scale-icon-communication-mobile-phone-number',
     properties: {
         size: 'size',
@@ -3923,17 +3294,13 @@ export const ScaleIconCommunicationMobilePhoneNumber: StencilReactComponent<Scal
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationMobilePhoneNumberElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationMobilePhoneNumberEvents,
-    defineCustomElement: defineScaleIconCommunicationMobilePhoneNumber
+    clientModule: clientComponents.ScaleIconCommunicationMobilePhoneNumber as StencilReactComponent<ScaleIconCommunicationMobilePhoneNumberElement, ScaleIconCommunicationMobilePhoneNumberEvents, JSX.ScaleIconCommunicationMobilePhoneNumber>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationNetworkSignalEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationNetworkSignal: StencilReactComponent<ScaleIconCommunicationNetworkSignalElement, ScaleIconCommunicationNetworkSignalEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationNetworkSignalElement, ScaleIconCommunicationNetworkSignalEvents>({
+export const ScaleIconCommunicationNetworkSignal: StencilReactComponent<ScaleIconCommunicationNetworkSignalElement, ScaleIconCommunicationNetworkSignalEvents, JSX.ScaleIconCommunicationNetworkSignal> = /*@__PURE__*/ createComponent<ScaleIconCommunicationNetworkSignalElement, ScaleIconCommunicationNetworkSignalEvents, JSX.ScaleIconCommunicationNetworkSignal>({
     tagName: 'scale-icon-communication-network-signal',
     properties: {
         size: 'size',
@@ -3945,17 +3312,13 @@ export const ScaleIconCommunicationNetworkSignal: StencilReactComponent<ScaleIco
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationNetworkSignalElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationNetworkSignalEvents,
-    defineCustomElement: defineScaleIconCommunicationNetworkSignal
+    clientModule: clientComponents.ScaleIconCommunicationNetworkSignal as StencilReactComponent<ScaleIconCommunicationNetworkSignalElement, ScaleIconCommunicationNetworkSignalEvents, JSX.ScaleIconCommunicationNetworkSignal>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationNewEmailEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationNewEmail: StencilReactComponent<ScaleIconCommunicationNewEmailElement, ScaleIconCommunicationNewEmailEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationNewEmailElement, ScaleIconCommunicationNewEmailEvents>({
+export const ScaleIconCommunicationNewEmail: StencilReactComponent<ScaleIconCommunicationNewEmailElement, ScaleIconCommunicationNewEmailEvents, JSX.ScaleIconCommunicationNewEmail> = /*@__PURE__*/ createComponent<ScaleIconCommunicationNewEmailElement, ScaleIconCommunicationNewEmailEvents, JSX.ScaleIconCommunicationNewEmail>({
     tagName: 'scale-icon-communication-new-email',
     properties: {
         size: 'size',
@@ -3967,17 +3330,13 @@ export const ScaleIconCommunicationNewEmail: StencilReactComponent<ScaleIconComm
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationNewEmailElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationNewEmailEvents,
-    defineCustomElement: defineScaleIconCommunicationNewEmail
+    clientModule: clientComponents.ScaleIconCommunicationNewEmail as StencilReactComponent<ScaleIconCommunicationNewEmailElement, ScaleIconCommunicationNewEmailEvents, JSX.ScaleIconCommunicationNewEmail>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationOutboxEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationOutbox: StencilReactComponent<ScaleIconCommunicationOutboxElement, ScaleIconCommunicationOutboxEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationOutboxElement, ScaleIconCommunicationOutboxEvents>({
+export const ScaleIconCommunicationOutbox: StencilReactComponent<ScaleIconCommunicationOutboxElement, ScaleIconCommunicationOutboxEvents, JSX.ScaleIconCommunicationOutbox> = /*@__PURE__*/ createComponent<ScaleIconCommunicationOutboxElement, ScaleIconCommunicationOutboxEvents, JSX.ScaleIconCommunicationOutbox>({
     tagName: 'scale-icon-communication-outbox',
     properties: {
         size: 'size',
@@ -3989,17 +3348,13 @@ export const ScaleIconCommunicationOutbox: StencilReactComponent<ScaleIconCommun
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationOutboxElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationOutboxEvents,
-    defineCustomElement: defineScaleIconCommunicationOutbox
+    clientModule: clientComponents.ScaleIconCommunicationOutbox as StencilReactComponent<ScaleIconCommunicationOutboxElement, ScaleIconCommunicationOutboxEvents, JSX.ScaleIconCommunicationOutbox>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationPhoneNumberEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationPhoneNumber: StencilReactComponent<ScaleIconCommunicationPhoneNumberElement, ScaleIconCommunicationPhoneNumberEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationPhoneNumberElement, ScaleIconCommunicationPhoneNumberEvents>({
+export const ScaleIconCommunicationPhoneNumber: StencilReactComponent<ScaleIconCommunicationPhoneNumberElement, ScaleIconCommunicationPhoneNumberEvents, JSX.ScaleIconCommunicationPhoneNumber> = /*@__PURE__*/ createComponent<ScaleIconCommunicationPhoneNumberElement, ScaleIconCommunicationPhoneNumberEvents, JSX.ScaleIconCommunicationPhoneNumber>({
     tagName: 'scale-icon-communication-phone-number',
     properties: {
         size: 'size',
@@ -4011,17 +3366,13 @@ export const ScaleIconCommunicationPhoneNumber: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationPhoneNumberElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationPhoneNumberEvents,
-    defineCustomElement: defineScaleIconCommunicationPhoneNumber
+    clientModule: clientComponents.ScaleIconCommunicationPhoneNumber as StencilReactComponent<ScaleIconCommunicationPhoneNumberElement, ScaleIconCommunicationPhoneNumberEvents, JSX.ScaleIconCommunicationPhoneNumber>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationRecipientEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationRecipient: StencilReactComponent<ScaleIconCommunicationRecipientElement, ScaleIconCommunicationRecipientEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationRecipientElement, ScaleIconCommunicationRecipientEvents>({
+export const ScaleIconCommunicationRecipient: StencilReactComponent<ScaleIconCommunicationRecipientElement, ScaleIconCommunicationRecipientEvents, JSX.ScaleIconCommunicationRecipient> = /*@__PURE__*/ createComponent<ScaleIconCommunicationRecipientElement, ScaleIconCommunicationRecipientEvents, JSX.ScaleIconCommunicationRecipient>({
     tagName: 'scale-icon-communication-recipient',
     properties: {
         size: 'size',
@@ -4033,17 +3384,13 @@ export const ScaleIconCommunicationRecipient: StencilReactComponent<ScaleIconCom
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationRecipientElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationRecipientEvents,
-    defineCustomElement: defineScaleIconCommunicationRecipient
+    clientModule: clientComponents.ScaleIconCommunicationRecipient as StencilReactComponent<ScaleIconCommunicationRecipientElement, ScaleIconCommunicationRecipientEvents, JSX.ScaleIconCommunicationRecipient>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationSaveEmailsToDraftsEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationSaveEmailsToDrafts: StencilReactComponent<ScaleIconCommunicationSaveEmailsToDraftsElement, ScaleIconCommunicationSaveEmailsToDraftsEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationSaveEmailsToDraftsElement, ScaleIconCommunicationSaveEmailsToDraftsEvents>({
+export const ScaleIconCommunicationSaveEmailsToDrafts: StencilReactComponent<ScaleIconCommunicationSaveEmailsToDraftsElement, ScaleIconCommunicationSaveEmailsToDraftsEvents, JSX.ScaleIconCommunicationSaveEmailsToDrafts> = /*@__PURE__*/ createComponent<ScaleIconCommunicationSaveEmailsToDraftsElement, ScaleIconCommunicationSaveEmailsToDraftsEvents, JSX.ScaleIconCommunicationSaveEmailsToDrafts>({
     tagName: 'scale-icon-communication-save-emails-to-drafts',
     properties: {
         size: 'size',
@@ -4055,17 +3402,13 @@ export const ScaleIconCommunicationSaveEmailsToDrafts: StencilReactComponent<Sca
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationSaveEmailsToDraftsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationSaveEmailsToDraftsEvents,
-    defineCustomElement: defineScaleIconCommunicationSaveEmailsToDrafts
+    clientModule: clientComponents.ScaleIconCommunicationSaveEmailsToDrafts as StencilReactComponent<ScaleIconCommunicationSaveEmailsToDraftsElement, ScaleIconCommunicationSaveEmailsToDraftsEvents, JSX.ScaleIconCommunicationSaveEmailsToDrafts>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationSmsEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationSms: StencilReactComponent<ScaleIconCommunicationSmsElement, ScaleIconCommunicationSmsEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationSmsElement, ScaleIconCommunicationSmsEvents>({
+export const ScaleIconCommunicationSms: StencilReactComponent<ScaleIconCommunicationSmsElement, ScaleIconCommunicationSmsEvents, JSX.ScaleIconCommunicationSms> = /*@__PURE__*/ createComponent<ScaleIconCommunicationSmsElement, ScaleIconCommunicationSmsEvents, JSX.ScaleIconCommunicationSms>({
     tagName: 'scale-icon-communication-sms',
     properties: {
         size: 'size',
@@ -4077,17 +3420,13 @@ export const ScaleIconCommunicationSms: StencilReactComponent<ScaleIconCommunica
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationSmsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationSmsEvents,
-    defineCustomElement: defineScaleIconCommunicationSms
+    clientModule: clientComponents.ScaleIconCommunicationSms as StencilReactComponent<ScaleIconCommunicationSmsElement, ScaleIconCommunicationSmsEvents, JSX.ScaleIconCommunicationSms>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationSpamEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationSpam: StencilReactComponent<ScaleIconCommunicationSpamElement, ScaleIconCommunicationSpamEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationSpamElement, ScaleIconCommunicationSpamEvents>({
+export const ScaleIconCommunicationSpam: StencilReactComponent<ScaleIconCommunicationSpamElement, ScaleIconCommunicationSpamEvents, JSX.ScaleIconCommunicationSpam> = /*@__PURE__*/ createComponent<ScaleIconCommunicationSpamElement, ScaleIconCommunicationSpamEvents, JSX.ScaleIconCommunicationSpam>({
     tagName: 'scale-icon-communication-spam',
     properties: {
         size: 'size',
@@ -4099,17 +3438,13 @@ export const ScaleIconCommunicationSpam: StencilReactComponent<ScaleIconCommunic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationSpamElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationSpamEvents,
-    defineCustomElement: defineScaleIconCommunicationSpam
+    clientModule: clientComponents.ScaleIconCommunicationSpam as StencilReactComponent<ScaleIconCommunicationSpamElement, ScaleIconCommunicationSpamEvents, JSX.ScaleIconCommunicationSpam>,
+    serializeShadowRoot
 });
 
 export type ScaleIconCommunicationVoiceMessageEvents = NonNullable<unknown>;
 
-export const ScaleIconCommunicationVoiceMessage: StencilReactComponent<ScaleIconCommunicationVoiceMessageElement, ScaleIconCommunicationVoiceMessageEvents> = /*@__PURE__*/ createComponent<ScaleIconCommunicationVoiceMessageElement, ScaleIconCommunicationVoiceMessageEvents>({
+export const ScaleIconCommunicationVoiceMessage: StencilReactComponent<ScaleIconCommunicationVoiceMessageElement, ScaleIconCommunicationVoiceMessageEvents, JSX.ScaleIconCommunicationVoiceMessage> = /*@__PURE__*/ createComponent<ScaleIconCommunicationVoiceMessageElement, ScaleIconCommunicationVoiceMessageEvents, JSX.ScaleIconCommunicationVoiceMessage>({
     tagName: 'scale-icon-communication-voice-message',
     properties: {
         size: 'size',
@@ -4121,17 +3456,13 @@ export const ScaleIconCommunicationVoiceMessage: StencilReactComponent<ScaleIcon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconCommunicationVoiceMessageElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconCommunicationVoiceMessageEvents,
-    defineCustomElement: defineScaleIconCommunicationVoiceMessage
+    clientModule: clientComponents.ScaleIconCommunicationVoiceMessage as StencilReactComponent<ScaleIconCommunicationVoiceMessageElement, ScaleIconCommunicationVoiceMessageEvents, JSX.ScaleIconCommunicationVoiceMessage>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContent2faGoogleAuthEvents = NonNullable<unknown>;
 
-export const ScaleIconContent2faGoogleAuth: StencilReactComponent<ScaleIconContent2faGoogleAuthElement, ScaleIconContent2faGoogleAuthEvents> = /*@__PURE__*/ createComponent<ScaleIconContent2faGoogleAuthElement, ScaleIconContent2faGoogleAuthEvents>({
+export const ScaleIconContent2faGoogleAuth: StencilReactComponent<ScaleIconContent2faGoogleAuthElement, ScaleIconContent2faGoogleAuthEvents, JSX.ScaleIconContent2faGoogleAuth> = /*@__PURE__*/ createComponent<ScaleIconContent2faGoogleAuthElement, ScaleIconContent2faGoogleAuthEvents, JSX.ScaleIconContent2faGoogleAuth>({
     tagName: 'scale-icon-content-2fa-google-auth',
     properties: {
         size: 'size',
@@ -4143,17 +3474,13 @@ export const ScaleIconContent2faGoogleAuth: StencilReactComponent<ScaleIconConte
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContent2faGoogleAuthElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContent2faGoogleAuthEvents,
-    defineCustomElement: defineScaleIconContent2faGoogleAuth
+    clientModule: clientComponents.ScaleIconContent2faGoogleAuth as StencilReactComponent<ScaleIconContent2faGoogleAuthElement, ScaleIconContent2faGoogleAuthEvents, JSX.ScaleIconContent2faGoogleAuth>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentAchievementEvents = NonNullable<unknown>;
 
-export const ScaleIconContentAchievement: StencilReactComponent<ScaleIconContentAchievementElement, ScaleIconContentAchievementEvents> = /*@__PURE__*/ createComponent<ScaleIconContentAchievementElement, ScaleIconContentAchievementEvents>({
+export const ScaleIconContentAchievement: StencilReactComponent<ScaleIconContentAchievementElement, ScaleIconContentAchievementEvents, JSX.ScaleIconContentAchievement> = /*@__PURE__*/ createComponent<ScaleIconContentAchievementElement, ScaleIconContentAchievementEvents, JSX.ScaleIconContentAchievement>({
     tagName: 'scale-icon-content-achievement',
     properties: {
         size: 'size',
@@ -4165,17 +3492,13 @@ export const ScaleIconContentAchievement: StencilReactComponent<ScaleIconContent
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentAchievementElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentAchievementEvents,
-    defineCustomElement: defineScaleIconContentAchievement
+    clientModule: clientComponents.ScaleIconContentAchievement as StencilReactComponent<ScaleIconContentAchievementElement, ScaleIconContentAchievementEvents, JSX.ScaleIconContentAchievement>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentAndroidEvents = NonNullable<unknown>;
 
-export const ScaleIconContentAndroid: StencilReactComponent<ScaleIconContentAndroidElement, ScaleIconContentAndroidEvents> = /*@__PURE__*/ createComponent<ScaleIconContentAndroidElement, ScaleIconContentAndroidEvents>({
+export const ScaleIconContentAndroid: StencilReactComponent<ScaleIconContentAndroidElement, ScaleIconContentAndroidEvents, JSX.ScaleIconContentAndroid> = /*@__PURE__*/ createComponent<ScaleIconContentAndroidElement, ScaleIconContentAndroidEvents, JSX.ScaleIconContentAndroid>({
     tagName: 'scale-icon-content-android',
     properties: {
         size: 'size',
@@ -4187,17 +3510,13 @@ export const ScaleIconContentAndroid: StencilReactComponent<ScaleIconContentAndr
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentAndroidElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentAndroidEvents,
-    defineCustomElement: defineScaleIconContentAndroid
+    clientModule: clientComponents.ScaleIconContentAndroid as StencilReactComponent<ScaleIconContentAndroidElement, ScaleIconContentAndroidEvents, JSX.ScaleIconContentAndroid>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentAppleEvents = NonNullable<unknown>;
 
-export const ScaleIconContentApple: StencilReactComponent<ScaleIconContentAppleElement, ScaleIconContentAppleEvents> = /*@__PURE__*/ createComponent<ScaleIconContentAppleElement, ScaleIconContentAppleEvents>({
+export const ScaleIconContentApple: StencilReactComponent<ScaleIconContentAppleElement, ScaleIconContentAppleEvents, JSX.ScaleIconContentApple> = /*@__PURE__*/ createComponent<ScaleIconContentAppleElement, ScaleIconContentAppleEvents, JSX.ScaleIconContentApple>({
     tagName: 'scale-icon-content-apple',
     properties: {
         size: 'size',
@@ -4209,17 +3528,13 @@ export const ScaleIconContentApple: StencilReactComponent<ScaleIconContentAppleE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentAppleElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentAppleEvents,
-    defineCustomElement: defineScaleIconContentApple
+    clientModule: clientComponents.ScaleIconContentApple as StencilReactComponent<ScaleIconContentAppleElement, ScaleIconContentAppleEvents, JSX.ScaleIconContentApple>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentApplicationsEvents = NonNullable<unknown>;
 
-export const ScaleIconContentApplications: StencilReactComponent<ScaleIconContentApplicationsElement, ScaleIconContentApplicationsEvents> = /*@__PURE__*/ createComponent<ScaleIconContentApplicationsElement, ScaleIconContentApplicationsEvents>({
+export const ScaleIconContentApplications: StencilReactComponent<ScaleIconContentApplicationsElement, ScaleIconContentApplicationsEvents, JSX.ScaleIconContentApplications> = /*@__PURE__*/ createComponent<ScaleIconContentApplicationsElement, ScaleIconContentApplicationsEvents, JSX.ScaleIconContentApplications>({
     tagName: 'scale-icon-content-applications',
     properties: {
         size: 'size',
@@ -4231,17 +3546,13 @@ export const ScaleIconContentApplications: StencilReactComponent<ScaleIconConten
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentApplicationsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentApplicationsEvents,
-    defineCustomElement: defineScaleIconContentApplications
+    clientModule: clientComponents.ScaleIconContentApplications as StencilReactComponent<ScaleIconContentApplicationsElement, ScaleIconContentApplicationsEvents, JSX.ScaleIconContentApplications>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentAvailableKeychainEvents = NonNullable<unknown>;
 
-export const ScaleIconContentAvailableKeychain: StencilReactComponent<ScaleIconContentAvailableKeychainElement, ScaleIconContentAvailableKeychainEvents> = /*@__PURE__*/ createComponent<ScaleIconContentAvailableKeychainElement, ScaleIconContentAvailableKeychainEvents>({
+export const ScaleIconContentAvailableKeychain: StencilReactComponent<ScaleIconContentAvailableKeychainElement, ScaleIconContentAvailableKeychainEvents, JSX.ScaleIconContentAvailableKeychain> = /*@__PURE__*/ createComponent<ScaleIconContentAvailableKeychainElement, ScaleIconContentAvailableKeychainEvents, JSX.ScaleIconContentAvailableKeychain>({
     tagName: 'scale-icon-content-available-keychain',
     properties: {
         size: 'size',
@@ -4253,17 +3564,13 @@ export const ScaleIconContentAvailableKeychain: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentAvailableKeychainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentAvailableKeychainEvents,
-    defineCustomElement: defineScaleIconContentAvailableKeychain
+    clientModule: clientComponents.ScaleIconContentAvailableKeychain as StencilReactComponent<ScaleIconContentAvailableKeychainElement, ScaleIconContentAvailableKeychainEvents, JSX.ScaleIconContentAvailableKeychain>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentBankEvents = NonNullable<unknown>;
 
-export const ScaleIconContentBank: StencilReactComponent<ScaleIconContentBankElement, ScaleIconContentBankEvents> = /*@__PURE__*/ createComponent<ScaleIconContentBankElement, ScaleIconContentBankEvents>({
+export const ScaleIconContentBank: StencilReactComponent<ScaleIconContentBankElement, ScaleIconContentBankEvents, JSX.ScaleIconContentBank> = /*@__PURE__*/ createComponent<ScaleIconContentBankElement, ScaleIconContentBankEvents, JSX.ScaleIconContentBank>({
     tagName: 'scale-icon-content-bank',
     properties: {
         size: 'size',
@@ -4275,17 +3582,13 @@ export const ScaleIconContentBank: StencilReactComponent<ScaleIconContentBankEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentBankElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentBankEvents,
-    defineCustomElement: defineScaleIconContentBank
+    clientModule: clientComponents.ScaleIconContentBank as StencilReactComponent<ScaleIconContentBankElement, ScaleIconContentBankEvents, JSX.ScaleIconContentBank>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentBiometricEvents = NonNullable<unknown>;
 
-export const ScaleIconContentBiometric: StencilReactComponent<ScaleIconContentBiometricElement, ScaleIconContentBiometricEvents> = /*@__PURE__*/ createComponent<ScaleIconContentBiometricElement, ScaleIconContentBiometricEvents>({
+export const ScaleIconContentBiometric: StencilReactComponent<ScaleIconContentBiometricElement, ScaleIconContentBiometricEvents, JSX.ScaleIconContentBiometric> = /*@__PURE__*/ createComponent<ScaleIconContentBiometricElement, ScaleIconContentBiometricEvents, JSX.ScaleIconContentBiometric>({
     tagName: 'scale-icon-content-biometric',
     properties: {
         size: 'size',
@@ -4297,17 +3600,13 @@ export const ScaleIconContentBiometric: StencilReactComponent<ScaleIconContentBi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentBiometricElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentBiometricEvents,
-    defineCustomElement: defineScaleIconContentBiometric
+    clientModule: clientComponents.ScaleIconContentBiometric as StencilReactComponent<ScaleIconContentBiometricElement, ScaleIconContentBiometricEvents, JSX.ScaleIconContentBiometric>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentBirthdayEvents = NonNullable<unknown>;
 
-export const ScaleIconContentBirthday: StencilReactComponent<ScaleIconContentBirthdayElement, ScaleIconContentBirthdayEvents> = /*@__PURE__*/ createComponent<ScaleIconContentBirthdayElement, ScaleIconContentBirthdayEvents>({
+export const ScaleIconContentBirthday: StencilReactComponent<ScaleIconContentBirthdayElement, ScaleIconContentBirthdayEvents, JSX.ScaleIconContentBirthday> = /*@__PURE__*/ createComponent<ScaleIconContentBirthdayElement, ScaleIconContentBirthdayEvents, JSX.ScaleIconContentBirthday>({
     tagName: 'scale-icon-content-birthday',
     properties: {
         size: 'size',
@@ -4319,17 +3618,13 @@ export const ScaleIconContentBirthday: StencilReactComponent<ScaleIconContentBir
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentBirthdayElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentBirthdayEvents,
-    defineCustomElement: defineScaleIconContentBirthday
+    clientModule: clientComponents.ScaleIconContentBirthday as StencilReactComponent<ScaleIconContentBirthdayElement, ScaleIconContentBirthdayEvents, JSX.ScaleIconContentBirthday>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentBookmarkEvents = NonNullable<unknown>;
 
-export const ScaleIconContentBookmark: StencilReactComponent<ScaleIconContentBookmarkElement, ScaleIconContentBookmarkEvents> = /*@__PURE__*/ createComponent<ScaleIconContentBookmarkElement, ScaleIconContentBookmarkEvents>({
+export const ScaleIconContentBookmark: StencilReactComponent<ScaleIconContentBookmarkElement, ScaleIconContentBookmarkEvents, JSX.ScaleIconContentBookmark> = /*@__PURE__*/ createComponent<ScaleIconContentBookmarkElement, ScaleIconContentBookmarkEvents, JSX.ScaleIconContentBookmark>({
     tagName: 'scale-icon-content-bookmark',
     properties: {
         size: 'size',
@@ -4341,17 +3636,13 @@ export const ScaleIconContentBookmark: StencilReactComponent<ScaleIconContentBoo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentBookmarkElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentBookmarkEvents,
-    defineCustomElement: defineScaleIconContentBookmark
+    clientModule: clientComponents.ScaleIconContentBookmark as StencilReactComponent<ScaleIconContentBookmarkElement, ScaleIconContentBookmarkEvents, JSX.ScaleIconContentBookmark>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentCalendarEvents = NonNullable<unknown>;
 
-export const ScaleIconContentCalendar: StencilReactComponent<ScaleIconContentCalendarElement, ScaleIconContentCalendarEvents> = /*@__PURE__*/ createComponent<ScaleIconContentCalendarElement, ScaleIconContentCalendarEvents>({
+export const ScaleIconContentCalendar: StencilReactComponent<ScaleIconContentCalendarElement, ScaleIconContentCalendarEvents, JSX.ScaleIconContentCalendar> = /*@__PURE__*/ createComponent<ScaleIconContentCalendarElement, ScaleIconContentCalendarEvents, JSX.ScaleIconContentCalendar>({
     tagName: 'scale-icon-content-calendar',
     properties: {
         size: 'size',
@@ -4363,17 +3654,13 @@ export const ScaleIconContentCalendar: StencilReactComponent<ScaleIconContentCal
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentCalendarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentCalendarEvents,
-    defineCustomElement: defineScaleIconContentCalendar
+    clientModule: clientComponents.ScaleIconContentCalendar as StencilReactComponent<ScaleIconContentCalendarElement, ScaleIconContentCalendarEvents, JSX.ScaleIconContentCalendar>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentClipboardEvents = NonNullable<unknown>;
 
-export const ScaleIconContentClipboard: StencilReactComponent<ScaleIconContentClipboardElement, ScaleIconContentClipboardEvents> = /*@__PURE__*/ createComponent<ScaleIconContentClipboardElement, ScaleIconContentClipboardEvents>({
+export const ScaleIconContentClipboard: StencilReactComponent<ScaleIconContentClipboardElement, ScaleIconContentClipboardEvents, JSX.ScaleIconContentClipboard> = /*@__PURE__*/ createComponent<ScaleIconContentClipboardElement, ScaleIconContentClipboardEvents, JSX.ScaleIconContentClipboard>({
     tagName: 'scale-icon-content-clipboard',
     properties: {
         size: 'size',
@@ -4385,17 +3672,13 @@ export const ScaleIconContentClipboard: StencilReactComponent<ScaleIconContentCl
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentClipboardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentClipboardEvents,
-    defineCustomElement: defineScaleIconContentClipboard
+    clientModule: clientComponents.ScaleIconContentClipboard as StencilReactComponent<ScaleIconContentClipboardElement, ScaleIconContentClipboardEvents, JSX.ScaleIconContentClipboard>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentClockEvents = NonNullable<unknown>;
 
-export const ScaleIconContentClock: StencilReactComponent<ScaleIconContentClockElement, ScaleIconContentClockEvents> = /*@__PURE__*/ createComponent<ScaleIconContentClockElement, ScaleIconContentClockEvents>({
+export const ScaleIconContentClock: StencilReactComponent<ScaleIconContentClockElement, ScaleIconContentClockEvents, JSX.ScaleIconContentClock> = /*@__PURE__*/ createComponent<ScaleIconContentClockElement, ScaleIconContentClockEvents, JSX.ScaleIconContentClock>({
     tagName: 'scale-icon-content-clock',
     properties: {
         size: 'size',
@@ -4407,17 +3690,13 @@ export const ScaleIconContentClock: StencilReactComponent<ScaleIconContentClockE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentClockElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentClockEvents,
-    defineCustomElement: defineScaleIconContentClock
+    clientModule: clientComponents.ScaleIconContentClock as StencilReactComponent<ScaleIconContentClockElement, ScaleIconContentClockEvents, JSX.ScaleIconContentClock>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentCloudSecurityEvents = NonNullable<unknown>;
 
-export const ScaleIconContentCloudSecurity: StencilReactComponent<ScaleIconContentCloudSecurityElement, ScaleIconContentCloudSecurityEvents> = /*@__PURE__*/ createComponent<ScaleIconContentCloudSecurityElement, ScaleIconContentCloudSecurityEvents>({
+export const ScaleIconContentCloudSecurity: StencilReactComponent<ScaleIconContentCloudSecurityElement, ScaleIconContentCloudSecurityEvents, JSX.ScaleIconContentCloudSecurity> = /*@__PURE__*/ createComponent<ScaleIconContentCloudSecurityElement, ScaleIconContentCloudSecurityEvents, JSX.ScaleIconContentCloudSecurity>({
     tagName: 'scale-icon-content-cloud-security',
     properties: {
         size: 'size',
@@ -4429,17 +3708,13 @@ export const ScaleIconContentCloudSecurity: StencilReactComponent<ScaleIconConte
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentCloudSecurityElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentCloudSecurityEvents,
-    defineCustomElement: defineScaleIconContentCloudSecurity
+    clientModule: clientComponents.ScaleIconContentCloudSecurity as StencilReactComponent<ScaleIconContentCloudSecurityElement, ScaleIconContentCloudSecurityEvents, JSX.ScaleIconContentCloudSecurity>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentCodeScannerEvents = NonNullable<unknown>;
 
-export const ScaleIconContentCodeScanner: StencilReactComponent<ScaleIconContentCodeScannerElement, ScaleIconContentCodeScannerEvents> = /*@__PURE__*/ createComponent<ScaleIconContentCodeScannerElement, ScaleIconContentCodeScannerEvents>({
+export const ScaleIconContentCodeScanner: StencilReactComponent<ScaleIconContentCodeScannerElement, ScaleIconContentCodeScannerEvents, JSX.ScaleIconContentCodeScanner> = /*@__PURE__*/ createComponent<ScaleIconContentCodeScannerElement, ScaleIconContentCodeScannerEvents, JSX.ScaleIconContentCodeScanner>({
     tagName: 'scale-icon-content-code-scanner',
     properties: {
         size: 'size',
@@ -4451,17 +3726,13 @@ export const ScaleIconContentCodeScanner: StencilReactComponent<ScaleIconContent
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentCodeScannerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentCodeScannerEvents,
-    defineCustomElement: defineScaleIconContentCodeScanner
+    clientModule: clientComponents.ScaleIconContentCodeScanner as StencilReactComponent<ScaleIconContentCodeScannerElement, ScaleIconContentCodeScannerEvents, JSX.ScaleIconContentCodeScanner>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentColorSelectionEvents = NonNullable<unknown>;
 
-export const ScaleIconContentColorSelection: StencilReactComponent<ScaleIconContentColorSelectionElement, ScaleIconContentColorSelectionEvents> = /*@__PURE__*/ createComponent<ScaleIconContentColorSelectionElement, ScaleIconContentColorSelectionEvents>({
+export const ScaleIconContentColorSelection: StencilReactComponent<ScaleIconContentColorSelectionElement, ScaleIconContentColorSelectionEvents, JSX.ScaleIconContentColorSelection> = /*@__PURE__*/ createComponent<ScaleIconContentColorSelectionElement, ScaleIconContentColorSelectionEvents, JSX.ScaleIconContentColorSelection>({
     tagName: 'scale-icon-content-color-selection',
     properties: {
         size: 'size',
@@ -4473,17 +3744,13 @@ export const ScaleIconContentColorSelection: StencilReactComponent<ScaleIconCont
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentColorSelectionElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentColorSelectionEvents,
-    defineCustomElement: defineScaleIconContentColorSelection
+    clientModule: clientComponents.ScaleIconContentColorSelection as StencilReactComponent<ScaleIconContentColorSelectionElement, ScaleIconContentColorSelectionEvents, JSX.ScaleIconContentColorSelection>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentCountryEvents = NonNullable<unknown>;
 
-export const ScaleIconContentCountry: StencilReactComponent<ScaleIconContentCountryElement, ScaleIconContentCountryEvents> = /*@__PURE__*/ createComponent<ScaleIconContentCountryElement, ScaleIconContentCountryEvents>({
+export const ScaleIconContentCountry: StencilReactComponent<ScaleIconContentCountryElement, ScaleIconContentCountryEvents, JSX.ScaleIconContentCountry> = /*@__PURE__*/ createComponent<ScaleIconContentCountryElement, ScaleIconContentCountryEvents, JSX.ScaleIconContentCountry>({
     tagName: 'scale-icon-content-country',
     properties: {
         size: 'size',
@@ -4495,17 +3762,13 @@ export const ScaleIconContentCountry: StencilReactComponent<ScaleIconContentCoun
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentCountryElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentCountryEvents,
-    defineCustomElement: defineScaleIconContentCountry
+    clientModule: clientComponents.ScaleIconContentCountry as StencilReactComponent<ScaleIconContentCountryElement, ScaleIconContentCountryEvents, JSX.ScaleIconContentCountry>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentCreditCardEvents = NonNullable<unknown>;
 
-export const ScaleIconContentCreditCard: StencilReactComponent<ScaleIconContentCreditCardElement, ScaleIconContentCreditCardEvents> = /*@__PURE__*/ createComponent<ScaleIconContentCreditCardElement, ScaleIconContentCreditCardEvents>({
+export const ScaleIconContentCreditCard: StencilReactComponent<ScaleIconContentCreditCardElement, ScaleIconContentCreditCardEvents, JSX.ScaleIconContentCreditCard> = /*@__PURE__*/ createComponent<ScaleIconContentCreditCardElement, ScaleIconContentCreditCardEvents, JSX.ScaleIconContentCreditCard>({
     tagName: 'scale-icon-content-credit-card',
     properties: {
         size: 'size',
@@ -4517,17 +3780,13 @@ export const ScaleIconContentCreditCard: StencilReactComponent<ScaleIconContentC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentCreditCardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentCreditCardEvents,
-    defineCustomElement: defineScaleIconContentCreditCard
+    clientModule: clientComponents.ScaleIconContentCreditCard as StencilReactComponent<ScaleIconContentCreditCardElement, ScaleIconContentCreditCardEvents, JSX.ScaleIconContentCreditCard>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentDataVisualisationEvents = NonNullable<unknown>;
 
-export const ScaleIconContentDataVisualisation: StencilReactComponent<ScaleIconContentDataVisualisationElement, ScaleIconContentDataVisualisationEvents> = /*@__PURE__*/ createComponent<ScaleIconContentDataVisualisationElement, ScaleIconContentDataVisualisationEvents>({
+export const ScaleIconContentDataVisualisation: StencilReactComponent<ScaleIconContentDataVisualisationElement, ScaleIconContentDataVisualisationEvents, JSX.ScaleIconContentDataVisualisation> = /*@__PURE__*/ createComponent<ScaleIconContentDataVisualisationElement, ScaleIconContentDataVisualisationEvents, JSX.ScaleIconContentDataVisualisation>({
     tagName: 'scale-icon-content-data-visualisation',
     properties: {
         size: 'size',
@@ -4539,17 +3798,13 @@ export const ScaleIconContentDataVisualisation: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentDataVisualisationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentDataVisualisationEvents,
-    defineCustomElement: defineScaleIconContentDataVisualisation
+    clientModule: clientComponents.ScaleIconContentDataVisualisation as StencilReactComponent<ScaleIconContentDataVisualisationElement, ScaleIconContentDataVisualisationEvents, JSX.ScaleIconContentDataVisualisation>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentDeliveryEvents = NonNullable<unknown>;
 
-export const ScaleIconContentDelivery: StencilReactComponent<ScaleIconContentDeliveryElement, ScaleIconContentDeliveryEvents> = /*@__PURE__*/ createComponent<ScaleIconContentDeliveryElement, ScaleIconContentDeliveryEvents>({
+export const ScaleIconContentDelivery: StencilReactComponent<ScaleIconContentDeliveryElement, ScaleIconContentDeliveryEvents, JSX.ScaleIconContentDelivery> = /*@__PURE__*/ createComponent<ScaleIconContentDeliveryElement, ScaleIconContentDeliveryEvents, JSX.ScaleIconContentDelivery>({
     tagName: 'scale-icon-content-delivery',
     properties: {
         size: 'size',
@@ -4561,17 +3816,13 @@ export const ScaleIconContentDelivery: StencilReactComponent<ScaleIconContentDel
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentDeliveryElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentDeliveryEvents,
-    defineCustomElement: defineScaleIconContentDelivery
+    clientModule: clientComponents.ScaleIconContentDelivery as StencilReactComponent<ScaleIconContentDeliveryElement, ScaleIconContentDeliveryEvents, JSX.ScaleIconContentDelivery>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentDigitalBankingEvents = NonNullable<unknown>;
 
-export const ScaleIconContentDigitalBanking: StencilReactComponent<ScaleIconContentDigitalBankingElement, ScaleIconContentDigitalBankingEvents> = /*@__PURE__*/ createComponent<ScaleIconContentDigitalBankingElement, ScaleIconContentDigitalBankingEvents>({
+export const ScaleIconContentDigitalBanking: StencilReactComponent<ScaleIconContentDigitalBankingElement, ScaleIconContentDigitalBankingEvents, JSX.ScaleIconContentDigitalBanking> = /*@__PURE__*/ createComponent<ScaleIconContentDigitalBankingElement, ScaleIconContentDigitalBankingEvents, JSX.ScaleIconContentDigitalBanking>({
     tagName: 'scale-icon-content-digital-banking',
     properties: {
         size: 'size',
@@ -4583,17 +3834,13 @@ export const ScaleIconContentDigitalBanking: StencilReactComponent<ScaleIconCont
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentDigitalBankingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentDigitalBankingEvents,
-    defineCustomElement: defineScaleIconContentDigitalBanking
+    clientModule: clientComponents.ScaleIconContentDigitalBanking as StencilReactComponent<ScaleIconContentDigitalBankingElement, ScaleIconContentDigitalBankingEvents, JSX.ScaleIconContentDigitalBanking>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentDigitalMediaEvents = NonNullable<unknown>;
 
-export const ScaleIconContentDigitalMedia: StencilReactComponent<ScaleIconContentDigitalMediaElement, ScaleIconContentDigitalMediaEvents> = /*@__PURE__*/ createComponent<ScaleIconContentDigitalMediaElement, ScaleIconContentDigitalMediaEvents>({
+export const ScaleIconContentDigitalMedia: StencilReactComponent<ScaleIconContentDigitalMediaElement, ScaleIconContentDigitalMediaEvents, JSX.ScaleIconContentDigitalMedia> = /*@__PURE__*/ createComponent<ScaleIconContentDigitalMediaElement, ScaleIconContentDigitalMediaEvents, JSX.ScaleIconContentDigitalMedia>({
     tagName: 'scale-icon-content-digital-media',
     properties: {
         size: 'size',
@@ -4605,17 +3852,13 @@ export const ScaleIconContentDigitalMedia: StencilReactComponent<ScaleIconConten
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentDigitalMediaElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentDigitalMediaEvents,
-    defineCustomElement: defineScaleIconContentDigitalMedia
+    clientModule: clientComponents.ScaleIconContentDigitalMedia as StencilReactComponent<ScaleIconContentDigitalMediaElement, ScaleIconContentDigitalMediaEvents, JSX.ScaleIconContentDigitalMedia>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentDiscountEvents = NonNullable<unknown>;
 
-export const ScaleIconContentDiscount: StencilReactComponent<ScaleIconContentDiscountElement, ScaleIconContentDiscountEvents> = /*@__PURE__*/ createComponent<ScaleIconContentDiscountElement, ScaleIconContentDiscountEvents>({
+export const ScaleIconContentDiscount: StencilReactComponent<ScaleIconContentDiscountElement, ScaleIconContentDiscountEvents, JSX.ScaleIconContentDiscount> = /*@__PURE__*/ createComponent<ScaleIconContentDiscountElement, ScaleIconContentDiscountEvents, JSX.ScaleIconContentDiscount>({
     tagName: 'scale-icon-content-discount',
     properties: {
         size: 'size',
@@ -4627,17 +3870,13 @@ export const ScaleIconContentDiscount: StencilReactComponent<ScaleIconContentDis
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentDiscountElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentDiscountEvents,
-    defineCustomElement: defineScaleIconContentDiscount
+    clientModule: clientComponents.ScaleIconContentDiscount as StencilReactComponent<ScaleIconContentDiscountElement, ScaleIconContentDiscountEvents, JSX.ScaleIconContentDiscount>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentESimEvents = NonNullable<unknown>;
 
-export const ScaleIconContentESim: StencilReactComponent<ScaleIconContentESimElement, ScaleIconContentESimEvents> = /*@__PURE__*/ createComponent<ScaleIconContentESimElement, ScaleIconContentESimEvents>({
+export const ScaleIconContentESim: StencilReactComponent<ScaleIconContentESimElement, ScaleIconContentESimEvents, JSX.ScaleIconContentESim> = /*@__PURE__*/ createComponent<ScaleIconContentESimElement, ScaleIconContentESimEvents, JSX.ScaleIconContentESim>({
     tagName: 'scale-icon-content-e-sim',
     properties: {
         size: 'size',
@@ -4649,17 +3888,13 @@ export const ScaleIconContentESim: StencilReactComponent<ScaleIconContentESimEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentESimElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentESimEvents,
-    defineCustomElement: defineScaleIconContentESim
+    clientModule: clientComponents.ScaleIconContentESim as StencilReactComponent<ScaleIconContentESimElement, ScaleIconContentESimEvents, JSX.ScaleIconContentESim>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentEuEvents = NonNullable<unknown>;
 
-export const ScaleIconContentEu: StencilReactComponent<ScaleIconContentEuElement, ScaleIconContentEuEvents> = /*@__PURE__*/ createComponent<ScaleIconContentEuElement, ScaleIconContentEuEvents>({
+export const ScaleIconContentEu: StencilReactComponent<ScaleIconContentEuElement, ScaleIconContentEuEvents, JSX.ScaleIconContentEu> = /*@__PURE__*/ createComponent<ScaleIconContentEuElement, ScaleIconContentEuEvents, JSX.ScaleIconContentEu>({
     tagName: 'scale-icon-content-eu',
     properties: {
         size: 'size',
@@ -4671,17 +3906,13 @@ export const ScaleIconContentEu: StencilReactComponent<ScaleIconContentEuElement
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentEuElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentEuEvents,
-    defineCustomElement: defineScaleIconContentEu
+    clientModule: clientComponents.ScaleIconContentEu as StencilReactComponent<ScaleIconContentEuElement, ScaleIconContentEuEvents, JSX.ScaleIconContentEu>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentFaceMaskEvents = NonNullable<unknown>;
 
-export const ScaleIconContentFaceMask: StencilReactComponent<ScaleIconContentFaceMaskElement, ScaleIconContentFaceMaskEvents> = /*@__PURE__*/ createComponent<ScaleIconContentFaceMaskElement, ScaleIconContentFaceMaskEvents>({
+export const ScaleIconContentFaceMask: StencilReactComponent<ScaleIconContentFaceMaskElement, ScaleIconContentFaceMaskEvents, JSX.ScaleIconContentFaceMask> = /*@__PURE__*/ createComponent<ScaleIconContentFaceMaskElement, ScaleIconContentFaceMaskEvents, JSX.ScaleIconContentFaceMask>({
     tagName: 'scale-icon-content-face-mask',
     properties: {
         size: 'size',
@@ -4693,17 +3924,13 @@ export const ScaleIconContentFaceMask: StencilReactComponent<ScaleIconContentFac
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentFaceMaskElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentFaceMaskEvents,
-    defineCustomElement: defineScaleIconContentFaceMask
+    clientModule: clientComponents.ScaleIconContentFaceMask as StencilReactComponent<ScaleIconContentFaceMaskElement, ScaleIconContentFaceMaskEvents, JSX.ScaleIconContentFaceMask>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentFeaturesEvents = NonNullable<unknown>;
 
-export const ScaleIconContentFeatures: StencilReactComponent<ScaleIconContentFeaturesElement, ScaleIconContentFeaturesEvents> = /*@__PURE__*/ createComponent<ScaleIconContentFeaturesElement, ScaleIconContentFeaturesEvents>({
+export const ScaleIconContentFeatures: StencilReactComponent<ScaleIconContentFeaturesElement, ScaleIconContentFeaturesEvents, JSX.ScaleIconContentFeatures> = /*@__PURE__*/ createComponent<ScaleIconContentFeaturesElement, ScaleIconContentFeaturesEvents, JSX.ScaleIconContentFeatures>({
     tagName: 'scale-icon-content-features',
     properties: {
         size: 'size',
@@ -4715,17 +3942,13 @@ export const ScaleIconContentFeatures: StencilReactComponent<ScaleIconContentFea
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentFeaturesElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentFeaturesEvents,
-    defineCustomElement: defineScaleIconContentFeatures
+    clientModule: clientComponents.ScaleIconContentFeatures as StencilReactComponent<ScaleIconContentFeaturesElement, ScaleIconContentFeaturesEvents, JSX.ScaleIconContentFeatures>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentFlexibleTariffsEvents = NonNullable<unknown>;
 
-export const ScaleIconContentFlexibleTariffs: StencilReactComponent<ScaleIconContentFlexibleTariffsElement, ScaleIconContentFlexibleTariffsEvents> = /*@__PURE__*/ createComponent<ScaleIconContentFlexibleTariffsElement, ScaleIconContentFlexibleTariffsEvents>({
+export const ScaleIconContentFlexibleTariffs: StencilReactComponent<ScaleIconContentFlexibleTariffsElement, ScaleIconContentFlexibleTariffsEvents, JSX.ScaleIconContentFlexibleTariffs> = /*@__PURE__*/ createComponent<ScaleIconContentFlexibleTariffsElement, ScaleIconContentFlexibleTariffsEvents, JSX.ScaleIconContentFlexibleTariffs>({
     tagName: 'scale-icon-content-flexible-tariffs',
     properties: {
         size: 'size',
@@ -4737,17 +3960,13 @@ export const ScaleIconContentFlexibleTariffs: StencilReactComponent<ScaleIconCon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentFlexibleTariffsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentFlexibleTariffsEvents,
-    defineCustomElement: defineScaleIconContentFlexibleTariffs
+    clientModule: clientComponents.ScaleIconContentFlexibleTariffs as StencilReactComponent<ScaleIconContentFlexibleTariffsElement, ScaleIconContentFlexibleTariffsEvents, JSX.ScaleIconContentFlexibleTariffs>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentFolderEvents = NonNullable<unknown>;
 
-export const ScaleIconContentFolder: StencilReactComponent<ScaleIconContentFolderElement, ScaleIconContentFolderEvents> = /*@__PURE__*/ createComponent<ScaleIconContentFolderElement, ScaleIconContentFolderEvents>({
+export const ScaleIconContentFolder: StencilReactComponent<ScaleIconContentFolderElement, ScaleIconContentFolderEvents, JSX.ScaleIconContentFolder> = /*@__PURE__*/ createComponent<ScaleIconContentFolderElement, ScaleIconContentFolderEvents, JSX.ScaleIconContentFolder>({
     tagName: 'scale-icon-content-folder',
     properties: {
         size: 'size',
@@ -4759,17 +3978,13 @@ export const ScaleIconContentFolder: StencilReactComponent<ScaleIconContentFolde
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentFolderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentFolderEvents,
-    defineCustomElement: defineScaleIconContentFolder
+    clientModule: clientComponents.ScaleIconContentFolder as StencilReactComponent<ScaleIconContentFolderElement, ScaleIconContentFolderEvents, JSX.ScaleIconContentFolder>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentFoodEvents = NonNullable<unknown>;
 
-export const ScaleIconContentFood: StencilReactComponent<ScaleIconContentFoodElement, ScaleIconContentFoodEvents> = /*@__PURE__*/ createComponent<ScaleIconContentFoodElement, ScaleIconContentFoodEvents>({
+export const ScaleIconContentFood: StencilReactComponent<ScaleIconContentFoodElement, ScaleIconContentFoodEvents, JSX.ScaleIconContentFood> = /*@__PURE__*/ createComponent<ScaleIconContentFoodElement, ScaleIconContentFoodEvents, JSX.ScaleIconContentFood>({
     tagName: 'scale-icon-content-food',
     properties: {
         size: 'size',
@@ -4781,17 +3996,13 @@ export const ScaleIconContentFood: StencilReactComponent<ScaleIconContentFoodEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentFoodElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentFoodEvents,
-    defineCustomElement: defineScaleIconContentFood
+    clientModule: clientComponents.ScaleIconContentFood as StencilReactComponent<ScaleIconContentFoodElement, ScaleIconContentFoodEvents, JSX.ScaleIconContentFood>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentGenderDiverseEvents = NonNullable<unknown>;
 
-export const ScaleIconContentGenderDiverse: StencilReactComponent<ScaleIconContentGenderDiverseElement, ScaleIconContentGenderDiverseEvents> = /*@__PURE__*/ createComponent<ScaleIconContentGenderDiverseElement, ScaleIconContentGenderDiverseEvents>({
+export const ScaleIconContentGenderDiverse: StencilReactComponent<ScaleIconContentGenderDiverseElement, ScaleIconContentGenderDiverseEvents, JSX.ScaleIconContentGenderDiverse> = /*@__PURE__*/ createComponent<ScaleIconContentGenderDiverseElement, ScaleIconContentGenderDiverseEvents, JSX.ScaleIconContentGenderDiverse>({
     tagName: 'scale-icon-content-gender-diverse',
     properties: {
         size: 'size',
@@ -4803,17 +4014,13 @@ export const ScaleIconContentGenderDiverse: StencilReactComponent<ScaleIconConte
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentGenderDiverseElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentGenderDiverseEvents,
-    defineCustomElement: defineScaleIconContentGenderDiverse
+    clientModule: clientComponents.ScaleIconContentGenderDiverse as StencilReactComponent<ScaleIconContentGenderDiverseElement, ScaleIconContentGenderDiverseEvents, JSX.ScaleIconContentGenderDiverse>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentGenderFemaleEvents = NonNullable<unknown>;
 
-export const ScaleIconContentGenderFemale: StencilReactComponent<ScaleIconContentGenderFemaleElement, ScaleIconContentGenderFemaleEvents> = /*@__PURE__*/ createComponent<ScaleIconContentGenderFemaleElement, ScaleIconContentGenderFemaleEvents>({
+export const ScaleIconContentGenderFemale: StencilReactComponent<ScaleIconContentGenderFemaleElement, ScaleIconContentGenderFemaleEvents, JSX.ScaleIconContentGenderFemale> = /*@__PURE__*/ createComponent<ScaleIconContentGenderFemaleElement, ScaleIconContentGenderFemaleEvents, JSX.ScaleIconContentGenderFemale>({
     tagName: 'scale-icon-content-gender-female',
     properties: {
         size: 'size',
@@ -4825,17 +4032,13 @@ export const ScaleIconContentGenderFemale: StencilReactComponent<ScaleIconConten
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentGenderFemaleElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentGenderFemaleEvents,
-    defineCustomElement: defineScaleIconContentGenderFemale
+    clientModule: clientComponents.ScaleIconContentGenderFemale as StencilReactComponent<ScaleIconContentGenderFemaleElement, ScaleIconContentGenderFemaleEvents, JSX.ScaleIconContentGenderFemale>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentGenderMaleEvents = NonNullable<unknown>;
 
-export const ScaleIconContentGenderMale: StencilReactComponent<ScaleIconContentGenderMaleElement, ScaleIconContentGenderMaleEvents> = /*@__PURE__*/ createComponent<ScaleIconContentGenderMaleElement, ScaleIconContentGenderMaleEvents>({
+export const ScaleIconContentGenderMale: StencilReactComponent<ScaleIconContentGenderMaleElement, ScaleIconContentGenderMaleEvents, JSX.ScaleIconContentGenderMale> = /*@__PURE__*/ createComponent<ScaleIconContentGenderMaleElement, ScaleIconContentGenderMaleEvents, JSX.ScaleIconContentGenderMale>({
     tagName: 'scale-icon-content-gender-male',
     properties: {
         size: 'size',
@@ -4847,17 +4050,13 @@ export const ScaleIconContentGenderMale: StencilReactComponent<ScaleIconContentG
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentGenderMaleElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentGenderMaleEvents,
-    defineCustomElement: defineScaleIconContentGenderMale
+    clientModule: clientComponents.ScaleIconContentGenderMale as StencilReactComponent<ScaleIconContentGenderMaleElement, ScaleIconContentGenderMaleEvents, JSX.ScaleIconContentGenderMale>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentHalfRatingEvents = NonNullable<unknown>;
 
-export const ScaleIconContentHalfRating: StencilReactComponent<ScaleIconContentHalfRatingElement, ScaleIconContentHalfRatingEvents> = /*@__PURE__*/ createComponent<ScaleIconContentHalfRatingElement, ScaleIconContentHalfRatingEvents>({
+export const ScaleIconContentHalfRating: StencilReactComponent<ScaleIconContentHalfRatingElement, ScaleIconContentHalfRatingEvents, JSX.ScaleIconContentHalfRating> = /*@__PURE__*/ createComponent<ScaleIconContentHalfRatingElement, ScaleIconContentHalfRatingEvents, JSX.ScaleIconContentHalfRating>({
     tagName: 'scale-icon-content-half-rating',
     properties: {
         size: 'size',
@@ -4869,17 +4068,13 @@ export const ScaleIconContentHalfRating: StencilReactComponent<ScaleIconContentH
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentHalfRatingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentHalfRatingEvents,
-    defineCustomElement: defineScaleIconContentHalfRating
+    clientModule: clientComponents.ScaleIconContentHalfRating as StencilReactComponent<ScaleIconContentHalfRatingElement, ScaleIconContentHalfRatingEvents, JSX.ScaleIconContentHalfRating>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentHeartEvents = NonNullable<unknown>;
 
-export const ScaleIconContentHeart: StencilReactComponent<ScaleIconContentHeartElement, ScaleIconContentHeartEvents> = /*@__PURE__*/ createComponent<ScaleIconContentHeartElement, ScaleIconContentHeartEvents>({
+export const ScaleIconContentHeart: StencilReactComponent<ScaleIconContentHeartElement, ScaleIconContentHeartEvents, JSX.ScaleIconContentHeart> = /*@__PURE__*/ createComponent<ScaleIconContentHeartElement, ScaleIconContentHeartEvents, JSX.ScaleIconContentHeart>({
     tagName: 'scale-icon-content-heart',
     properties: {
         size: 'size',
@@ -4891,17 +4086,13 @@ export const ScaleIconContentHeart: StencilReactComponent<ScaleIconContentHeartE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentHeartElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentHeartEvents,
-    defineCustomElement: defineScaleIconContentHeart
+    clientModule: clientComponents.ScaleIconContentHeart as StencilReactComponent<ScaleIconContentHeartElement, ScaleIconContentHeartEvents, JSX.ScaleIconContentHeart>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentHeightEvents = NonNullable<unknown>;
 
-export const ScaleIconContentHeight: StencilReactComponent<ScaleIconContentHeightElement, ScaleIconContentHeightEvents> = /*@__PURE__*/ createComponent<ScaleIconContentHeightElement, ScaleIconContentHeightEvents>({
+export const ScaleIconContentHeight: StencilReactComponent<ScaleIconContentHeightElement, ScaleIconContentHeightEvents, JSX.ScaleIconContentHeight> = /*@__PURE__*/ createComponent<ScaleIconContentHeightElement, ScaleIconContentHeightEvents, JSX.ScaleIconContentHeight>({
     tagName: 'scale-icon-content-height',
     properties: {
         size: 'size',
@@ -4913,17 +4104,13 @@ export const ScaleIconContentHeight: StencilReactComponent<ScaleIconContentHeigh
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentHeightElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentHeightEvents,
-    defineCustomElement: defineScaleIconContentHeight
+    clientModule: clientComponents.ScaleIconContentHeight as StencilReactComponent<ScaleIconContentHeightElement, ScaleIconContentHeightEvents, JSX.ScaleIconContentHeight>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentHistoryEvents = NonNullable<unknown>;
 
-export const ScaleIconContentHistory: StencilReactComponent<ScaleIconContentHistoryElement, ScaleIconContentHistoryEvents> = /*@__PURE__*/ createComponent<ScaleIconContentHistoryElement, ScaleIconContentHistoryEvents>({
+export const ScaleIconContentHistory: StencilReactComponent<ScaleIconContentHistoryElement, ScaleIconContentHistoryEvents, JSX.ScaleIconContentHistory> = /*@__PURE__*/ createComponent<ScaleIconContentHistoryElement, ScaleIconContentHistoryEvents, JSX.ScaleIconContentHistory>({
     tagName: 'scale-icon-content-history',
     properties: {
         size: 'size',
@@ -4935,17 +4122,13 @@ export const ScaleIconContentHistory: StencilReactComponent<ScaleIconContentHist
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentHistoryElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentHistoryEvents,
-    defineCustomElement: defineScaleIconContentHistory
+    clientModule: clientComponents.ScaleIconContentHistory as StencilReactComponent<ScaleIconContentHistoryElement, ScaleIconContentHistoryEvents, JSX.ScaleIconContentHistory>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentHourGlassEvents = NonNullable<unknown>;
 
-export const ScaleIconContentHourGlass: StencilReactComponent<ScaleIconContentHourGlassElement, ScaleIconContentHourGlassEvents> = /*@__PURE__*/ createComponent<ScaleIconContentHourGlassElement, ScaleIconContentHourGlassEvents>({
+export const ScaleIconContentHourGlass: StencilReactComponent<ScaleIconContentHourGlassElement, ScaleIconContentHourGlassEvents, JSX.ScaleIconContentHourGlass> = /*@__PURE__*/ createComponent<ScaleIconContentHourGlassElement, ScaleIconContentHourGlassEvents, JSX.ScaleIconContentHourGlass>({
     tagName: 'scale-icon-content-hour-glass',
     properties: {
         size: 'size',
@@ -4957,17 +4140,13 @@ export const ScaleIconContentHourGlass: StencilReactComponent<ScaleIconContentHo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentHourGlassElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentHourGlassEvents,
-    defineCustomElement: defineScaleIconContentHourGlass
+    clientModule: clientComponents.ScaleIconContentHourGlass as StencilReactComponent<ScaleIconContentHourGlassElement, ScaleIconContentHourGlassEvents, JSX.ScaleIconContentHourGlass>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentIbanEvents = NonNullable<unknown>;
 
-export const ScaleIconContentIban: StencilReactComponent<ScaleIconContentIbanElement, ScaleIconContentIbanEvents> = /*@__PURE__*/ createComponent<ScaleIconContentIbanElement, ScaleIconContentIbanEvents>({
+export const ScaleIconContentIban: StencilReactComponent<ScaleIconContentIbanElement, ScaleIconContentIbanEvents, JSX.ScaleIconContentIban> = /*@__PURE__*/ createComponent<ScaleIconContentIbanElement, ScaleIconContentIbanEvents, JSX.ScaleIconContentIban>({
     tagName: 'scale-icon-content-iban',
     properties: {
         size: 'size',
@@ -4979,17 +4158,13 @@ export const ScaleIconContentIban: StencilReactComponent<ScaleIconContentIbanEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentIbanElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentIbanEvents,
-    defineCustomElement: defineScaleIconContentIban
+    clientModule: clientComponents.ScaleIconContentIban as StencilReactComponent<ScaleIconContentIbanElement, ScaleIconContentIbanEvents, JSX.ScaleIconContentIban>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentIdEvents = NonNullable<unknown>;
 
-export const ScaleIconContentId: StencilReactComponent<ScaleIconContentIdElement, ScaleIconContentIdEvents> = /*@__PURE__*/ createComponent<ScaleIconContentIdElement, ScaleIconContentIdEvents>({
+export const ScaleIconContentId: StencilReactComponent<ScaleIconContentIdElement, ScaleIconContentIdEvents, JSX.ScaleIconContentId> = /*@__PURE__*/ createComponent<ScaleIconContentIdElement, ScaleIconContentIdEvents, JSX.ScaleIconContentId>({
     tagName: 'scale-icon-content-id',
     properties: {
         size: 'size',
@@ -5001,17 +4176,13 @@ export const ScaleIconContentId: StencilReactComponent<ScaleIconContentIdElement
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentIdElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentIdEvents,
-    defineCustomElement: defineScaleIconContentId
+    clientModule: clientComponents.ScaleIconContentId as StencilReactComponent<ScaleIconContentIdElement, ScaleIconContentIdEvents, JSX.ScaleIconContentId>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentInStockEvents = NonNullable<unknown>;
 
-export const ScaleIconContentInStock: StencilReactComponent<ScaleIconContentInStockElement, ScaleIconContentInStockEvents> = /*@__PURE__*/ createComponent<ScaleIconContentInStockElement, ScaleIconContentInStockEvents>({
+export const ScaleIconContentInStock: StencilReactComponent<ScaleIconContentInStockElement, ScaleIconContentInStockEvents, JSX.ScaleIconContentInStock> = /*@__PURE__*/ createComponent<ScaleIconContentInStockElement, ScaleIconContentInStockEvents, JSX.ScaleIconContentInStock>({
     tagName: 'scale-icon-content-in-stock',
     properties: {
         size: 'size',
@@ -5023,17 +4194,13 @@ export const ScaleIconContentInStock: StencilReactComponent<ScaleIconContentInSt
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentInStockElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentInStockEvents,
-    defineCustomElement: defineScaleIconContentInStock
+    clientModule: clientComponents.ScaleIconContentInStock as StencilReactComponent<ScaleIconContentInStockElement, ScaleIconContentInStockEvents, JSX.ScaleIconContentInStock>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentInternationalEvents = NonNullable<unknown>;
 
-export const ScaleIconContentInternational: StencilReactComponent<ScaleIconContentInternationalElement, ScaleIconContentInternationalEvents> = /*@__PURE__*/ createComponent<ScaleIconContentInternationalElement, ScaleIconContentInternationalEvents>({
+export const ScaleIconContentInternational: StencilReactComponent<ScaleIconContentInternationalElement, ScaleIconContentInternationalEvents, JSX.ScaleIconContentInternational> = /*@__PURE__*/ createComponent<ScaleIconContentInternationalElement, ScaleIconContentInternationalEvents, JSX.ScaleIconContentInternational>({
     tagName: 'scale-icon-content-international',
     properties: {
         size: 'size',
@@ -5045,17 +4212,13 @@ export const ScaleIconContentInternational: StencilReactComponent<ScaleIconConte
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentInternationalElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentInternationalEvents,
-    defineCustomElement: defineScaleIconContentInternational
+    clientModule: clientComponents.ScaleIconContentInternational as StencilReactComponent<ScaleIconContentInternationalElement, ScaleIconContentInternationalEvents, JSX.ScaleIconContentInternational>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentInternationalSmsEvents = NonNullable<unknown>;
 
-export const ScaleIconContentInternationalSms: StencilReactComponent<ScaleIconContentInternationalSmsElement, ScaleIconContentInternationalSmsEvents> = /*@__PURE__*/ createComponent<ScaleIconContentInternationalSmsElement, ScaleIconContentInternationalSmsEvents>({
+export const ScaleIconContentInternationalSms: StencilReactComponent<ScaleIconContentInternationalSmsElement, ScaleIconContentInternationalSmsEvents, JSX.ScaleIconContentInternationalSms> = /*@__PURE__*/ createComponent<ScaleIconContentInternationalSmsElement, ScaleIconContentInternationalSmsEvents, JSX.ScaleIconContentInternationalSms>({
     tagName: 'scale-icon-content-international-sms',
     properties: {
         size: 'size',
@@ -5067,17 +4230,13 @@ export const ScaleIconContentInternationalSms: StencilReactComponent<ScaleIconCo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentInternationalSmsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentInternationalSmsEvents,
-    defineCustomElement: defineScaleIconContentInternationalSms
+    clientModule: clientComponents.ScaleIconContentInternationalSms as StencilReactComponent<ScaleIconContentInternationalSmsElement, ScaleIconContentInternationalSmsEvents, JSX.ScaleIconContentInternationalSms>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentInterviewEvents = NonNullable<unknown>;
 
-export const ScaleIconContentInterview: StencilReactComponent<ScaleIconContentInterviewElement, ScaleIconContentInterviewEvents> = /*@__PURE__*/ createComponent<ScaleIconContentInterviewElement, ScaleIconContentInterviewEvents>({
+export const ScaleIconContentInterview: StencilReactComponent<ScaleIconContentInterviewElement, ScaleIconContentInterviewEvents, JSX.ScaleIconContentInterview> = /*@__PURE__*/ createComponent<ScaleIconContentInterviewElement, ScaleIconContentInterviewEvents, JSX.ScaleIconContentInterview>({
     tagName: 'scale-icon-content-interview',
     properties: {
         size: 'size',
@@ -5089,17 +4248,13 @@ export const ScaleIconContentInterview: StencilReactComponent<ScaleIconContentIn
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentInterviewElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentInterviewEvents,
-    defineCustomElement: defineScaleIconContentInterview
+    clientModule: clientComponents.ScaleIconContentInterview as StencilReactComponent<ScaleIconContentInterviewElement, ScaleIconContentInterviewEvents, JSX.ScaleIconContentInterview>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentKeyEvents = NonNullable<unknown>;
 
-export const ScaleIconContentKey: StencilReactComponent<ScaleIconContentKeyElement, ScaleIconContentKeyEvents> = /*@__PURE__*/ createComponent<ScaleIconContentKeyElement, ScaleIconContentKeyEvents>({
+export const ScaleIconContentKey: StencilReactComponent<ScaleIconContentKeyElement, ScaleIconContentKeyEvents, JSX.ScaleIconContentKey> = /*@__PURE__*/ createComponent<ScaleIconContentKeyElement, ScaleIconContentKeyEvents, JSX.ScaleIconContentKey>({
     tagName: 'scale-icon-content-key',
     properties: {
         size: 'size',
@@ -5111,17 +4266,13 @@ export const ScaleIconContentKey: StencilReactComponent<ScaleIconContentKeyEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentKeyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentKeyEvents,
-    defineCustomElement: defineScaleIconContentKey
+    clientModule: clientComponents.ScaleIconContentKey as StencilReactComponent<ScaleIconContentKeyElement, ScaleIconContentKeyEvents, JSX.ScaleIconContentKey>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentLanguageEvents = NonNullable<unknown>;
 
-export const ScaleIconContentLanguage: StencilReactComponent<ScaleIconContentLanguageElement, ScaleIconContentLanguageEvents> = /*@__PURE__*/ createComponent<ScaleIconContentLanguageElement, ScaleIconContentLanguageEvents>({
+export const ScaleIconContentLanguage: StencilReactComponent<ScaleIconContentLanguageElement, ScaleIconContentLanguageEvents, JSX.ScaleIconContentLanguage> = /*@__PURE__*/ createComponent<ScaleIconContentLanguageElement, ScaleIconContentLanguageEvents, JSX.ScaleIconContentLanguage>({
     tagName: 'scale-icon-content-language',
     properties: {
         size: 'size',
@@ -5133,17 +4284,13 @@ export const ScaleIconContentLanguage: StencilReactComponent<ScaleIconContentLan
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentLanguageElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentLanguageEvents,
-    defineCustomElement: defineScaleIconContentLanguage
+    clientModule: clientComponents.ScaleIconContentLanguage as StencilReactComponent<ScaleIconContentLanguageElement, ScaleIconContentLanguageEvents, JSX.ScaleIconContentLanguage>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentLockEvents = NonNullable<unknown>;
 
-export const ScaleIconContentLock: StencilReactComponent<ScaleIconContentLockElement, ScaleIconContentLockEvents> = /*@__PURE__*/ createComponent<ScaleIconContentLockElement, ScaleIconContentLockEvents>({
+export const ScaleIconContentLock: StencilReactComponent<ScaleIconContentLockElement, ScaleIconContentLockEvents, JSX.ScaleIconContentLock> = /*@__PURE__*/ createComponent<ScaleIconContentLockElement, ScaleIconContentLockEvents, JSX.ScaleIconContentLock>({
     tagName: 'scale-icon-content-lock',
     properties: {
         size: 'size',
@@ -5155,17 +4302,13 @@ export const ScaleIconContentLock: StencilReactComponent<ScaleIconContentLockEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentLockElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentLockEvents,
-    defineCustomElement: defineScaleIconContentLock
+    clientModule: clientComponents.ScaleIconContentLock as StencilReactComponent<ScaleIconContentLockElement, ScaleIconContentLockEvents, JSX.ScaleIconContentLock>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentLoyaltyEvents = NonNullable<unknown>;
 
-export const ScaleIconContentLoyalty: StencilReactComponent<ScaleIconContentLoyaltyElement, ScaleIconContentLoyaltyEvents> = /*@__PURE__*/ createComponent<ScaleIconContentLoyaltyElement, ScaleIconContentLoyaltyEvents>({
+export const ScaleIconContentLoyalty: StencilReactComponent<ScaleIconContentLoyaltyElement, ScaleIconContentLoyaltyEvents, JSX.ScaleIconContentLoyalty> = /*@__PURE__*/ createComponent<ScaleIconContentLoyaltyElement, ScaleIconContentLoyaltyEvents, JSX.ScaleIconContentLoyalty>({
     tagName: 'scale-icon-content-loyalty',
     properties: {
         size: 'size',
@@ -5177,17 +4320,13 @@ export const ScaleIconContentLoyalty: StencilReactComponent<ScaleIconContentLoya
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentLoyaltyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentLoyaltyEvents,
-    defineCustomElement: defineScaleIconContentLoyalty
+    clientModule: clientComponents.ScaleIconContentLoyalty as StencilReactComponent<ScaleIconContentLoyaltyElement, ScaleIconContentLoyaltyEvents, JSX.ScaleIconContentLoyalty>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentMediaFolderEvents = NonNullable<unknown>;
 
-export const ScaleIconContentMediaFolder: StencilReactComponent<ScaleIconContentMediaFolderElement, ScaleIconContentMediaFolderEvents> = /*@__PURE__*/ createComponent<ScaleIconContentMediaFolderElement, ScaleIconContentMediaFolderEvents>({
+export const ScaleIconContentMediaFolder: StencilReactComponent<ScaleIconContentMediaFolderElement, ScaleIconContentMediaFolderEvents, JSX.ScaleIconContentMediaFolder> = /*@__PURE__*/ createComponent<ScaleIconContentMediaFolderElement, ScaleIconContentMediaFolderEvents, JSX.ScaleIconContentMediaFolder>({
     tagName: 'scale-icon-content-media-folder',
     properties: {
         size: 'size',
@@ -5199,17 +4338,13 @@ export const ScaleIconContentMediaFolder: StencilReactComponent<ScaleIconContent
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentMediaFolderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentMediaFolderEvents,
-    defineCustomElement: defineScaleIconContentMediaFolder
+    clientModule: clientComponents.ScaleIconContentMediaFolder as StencilReactComponent<ScaleIconContentMediaFolderElement, ScaleIconContentMediaFolderEvents, JSX.ScaleIconContentMediaFolder>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentMoneyAtEvents = NonNullable<unknown>;
 
-export const ScaleIconContentMoneyAt: StencilReactComponent<ScaleIconContentMoneyAtElement, ScaleIconContentMoneyAtEvents> = /*@__PURE__*/ createComponent<ScaleIconContentMoneyAtElement, ScaleIconContentMoneyAtEvents>({
+export const ScaleIconContentMoneyAt: StencilReactComponent<ScaleIconContentMoneyAtElement, ScaleIconContentMoneyAtEvents, JSX.ScaleIconContentMoneyAt> = /*@__PURE__*/ createComponent<ScaleIconContentMoneyAtElement, ScaleIconContentMoneyAtEvents, JSX.ScaleIconContentMoneyAt>({
     tagName: 'scale-icon-content-money-at',
     properties: {
         size: 'size',
@@ -5221,17 +4356,13 @@ export const ScaleIconContentMoneyAt: StencilReactComponent<ScaleIconContentMone
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentMoneyAtElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentMoneyAtEvents,
-    defineCustomElement: defineScaleIconContentMoneyAt
+    clientModule: clientComponents.ScaleIconContentMoneyAt as StencilReactComponent<ScaleIconContentMoneyAtElement, ScaleIconContentMoneyAtEvents, JSX.ScaleIconContentMoneyAt>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentMusicEvents = NonNullable<unknown>;
 
-export const ScaleIconContentMusic: StencilReactComponent<ScaleIconContentMusicElement, ScaleIconContentMusicEvents> = /*@__PURE__*/ createComponent<ScaleIconContentMusicElement, ScaleIconContentMusicEvents>({
+export const ScaleIconContentMusic: StencilReactComponent<ScaleIconContentMusicElement, ScaleIconContentMusicEvents, JSX.ScaleIconContentMusic> = /*@__PURE__*/ createComponent<ScaleIconContentMusicElement, ScaleIconContentMusicEvents, JSX.ScaleIconContentMusic>({
     tagName: 'scale-icon-content-music',
     properties: {
         size: 'size',
@@ -5243,17 +4374,13 @@ export const ScaleIconContentMusic: StencilReactComponent<ScaleIconContentMusicE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentMusicElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentMusicEvents,
-    defineCustomElement: defineScaleIconContentMusic
+    clientModule: clientComponents.ScaleIconContentMusic as StencilReactComponent<ScaleIconContentMusicElement, ScaleIconContentMusicEvents, JSX.ScaleIconContentMusic>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentNewsEvents = NonNullable<unknown>;
 
-export const ScaleIconContentNews: StencilReactComponent<ScaleIconContentNewsElement, ScaleIconContentNewsEvents> = /*@__PURE__*/ createComponent<ScaleIconContentNewsElement, ScaleIconContentNewsEvents>({
+export const ScaleIconContentNews: StencilReactComponent<ScaleIconContentNewsElement, ScaleIconContentNewsEvents, JSX.ScaleIconContentNews> = /*@__PURE__*/ createComponent<ScaleIconContentNewsElement, ScaleIconContentNewsEvents, JSX.ScaleIconContentNews>({
     tagName: 'scale-icon-content-news',
     properties: {
         size: 'size',
@@ -5265,17 +4392,13 @@ export const ScaleIconContentNews: StencilReactComponent<ScaleIconContentNewsEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentNewsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentNewsEvents,
-    defineCustomElement: defineScaleIconContentNews
+    clientModule: clientComponents.ScaleIconContentNews as StencilReactComponent<ScaleIconContentNewsElement, ScaleIconContentNewsEvents, JSX.ScaleIconContentNews>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentOutOfStockEvents = NonNullable<unknown>;
 
-export const ScaleIconContentOutOfStock: StencilReactComponent<ScaleIconContentOutOfStockElement, ScaleIconContentOutOfStockEvents> = /*@__PURE__*/ createComponent<ScaleIconContentOutOfStockElement, ScaleIconContentOutOfStockEvents>({
+export const ScaleIconContentOutOfStock: StencilReactComponent<ScaleIconContentOutOfStockElement, ScaleIconContentOutOfStockEvents, JSX.ScaleIconContentOutOfStock> = /*@__PURE__*/ createComponent<ScaleIconContentOutOfStockElement, ScaleIconContentOutOfStockEvents, JSX.ScaleIconContentOutOfStock>({
     tagName: 'scale-icon-content-out-of-stock',
     properties: {
         size: 'size',
@@ -5287,17 +4410,13 @@ export const ScaleIconContentOutOfStock: StencilReactComponent<ScaleIconContentO
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentOutOfStockElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentOutOfStockEvents,
-    defineCustomElement: defineScaleIconContentOutOfStock
+    clientModule: clientComponents.ScaleIconContentOutOfStock as StencilReactComponent<ScaleIconContentOutOfStockElement, ScaleIconContentOutOfStockEvents, JSX.ScaleIconContentOutOfStock>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentPersonWalkingEvents = NonNullable<unknown>;
 
-export const ScaleIconContentPersonWalking: StencilReactComponent<ScaleIconContentPersonWalkingElement, ScaleIconContentPersonWalkingEvents> = /*@__PURE__*/ createComponent<ScaleIconContentPersonWalkingElement, ScaleIconContentPersonWalkingEvents>({
+export const ScaleIconContentPersonWalking: StencilReactComponent<ScaleIconContentPersonWalkingElement, ScaleIconContentPersonWalkingEvents, JSX.ScaleIconContentPersonWalking> = /*@__PURE__*/ createComponent<ScaleIconContentPersonWalkingElement, ScaleIconContentPersonWalkingEvents, JSX.ScaleIconContentPersonWalking>({
     tagName: 'scale-icon-content-person-walking',
     properties: {
         size: 'size',
@@ -5309,17 +4428,13 @@ export const ScaleIconContentPersonWalking: StencilReactComponent<ScaleIconConte
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentPersonWalkingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentPersonWalkingEvents,
-    defineCustomElement: defineScaleIconContentPersonWalking
+    clientModule: clientComponents.ScaleIconContentPersonWalking as StencilReactComponent<ScaleIconContentPersonWalkingElement, ScaleIconContentPersonWalkingEvents, JSX.ScaleIconContentPersonWalking>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentPrepaidActivateEvents = NonNullable<unknown>;
 
-export const ScaleIconContentPrepaidActivate: StencilReactComponent<ScaleIconContentPrepaidActivateElement, ScaleIconContentPrepaidActivateEvents> = /*@__PURE__*/ createComponent<ScaleIconContentPrepaidActivateElement, ScaleIconContentPrepaidActivateEvents>({
+export const ScaleIconContentPrepaidActivate: StencilReactComponent<ScaleIconContentPrepaidActivateElement, ScaleIconContentPrepaidActivateEvents, JSX.ScaleIconContentPrepaidActivate> = /*@__PURE__*/ createComponent<ScaleIconContentPrepaidActivateElement, ScaleIconContentPrepaidActivateEvents, JSX.ScaleIconContentPrepaidActivate>({
     tagName: 'scale-icon-content-prepaid-activate',
     properties: {
         size: 'size',
@@ -5331,17 +4446,13 @@ export const ScaleIconContentPrepaidActivate: StencilReactComponent<ScaleIconCon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentPrepaidActivateElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentPrepaidActivateEvents,
-    defineCustomElement: defineScaleIconContentPrepaidActivate
+    clientModule: clientComponents.ScaleIconContentPrepaidActivate as StencilReactComponent<ScaleIconContentPrepaidActivateElement, ScaleIconContentPrepaidActivateEvents, JSX.ScaleIconContentPrepaidActivate>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentPriceTagEvents = NonNullable<unknown>;
 
-export const ScaleIconContentPriceTag: StencilReactComponent<ScaleIconContentPriceTagElement, ScaleIconContentPriceTagEvents> = /*@__PURE__*/ createComponent<ScaleIconContentPriceTagElement, ScaleIconContentPriceTagEvents>({
+export const ScaleIconContentPriceTag: StencilReactComponent<ScaleIconContentPriceTagElement, ScaleIconContentPriceTagEvents, JSX.ScaleIconContentPriceTag> = /*@__PURE__*/ createComponent<ScaleIconContentPriceTagElement, ScaleIconContentPriceTagEvents, JSX.ScaleIconContentPriceTag>({
     tagName: 'scale-icon-content-price-tag',
     properties: {
         size: 'size',
@@ -5353,17 +4464,13 @@ export const ScaleIconContentPriceTag: StencilReactComponent<ScaleIconContentPri
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentPriceTagElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentPriceTagEvents,
-    defineCustomElement: defineScaleIconContentPriceTag
+    clientModule: clientComponents.ScaleIconContentPriceTag as StencilReactComponent<ScaleIconContentPriceTagElement, ScaleIconContentPriceTagEvents, JSX.ScaleIconContentPriceTag>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentRatingsEvents = NonNullable<unknown>;
 
-export const ScaleIconContentRatings: StencilReactComponent<ScaleIconContentRatingsElement, ScaleIconContentRatingsEvents> = /*@__PURE__*/ createComponent<ScaleIconContentRatingsElement, ScaleIconContentRatingsEvents>({
+export const ScaleIconContentRatings: StencilReactComponent<ScaleIconContentRatingsElement, ScaleIconContentRatingsEvents, JSX.ScaleIconContentRatings> = /*@__PURE__*/ createComponent<ScaleIconContentRatingsElement, ScaleIconContentRatingsEvents, JSX.ScaleIconContentRatings>({
     tagName: 'scale-icon-content-ratings',
     properties: {
         size: 'size',
@@ -5375,17 +4482,13 @@ export const ScaleIconContentRatings: StencilReactComponent<ScaleIconContentRati
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentRatingsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentRatingsEvents,
-    defineCustomElement: defineScaleIconContentRatings
+    clientModule: clientComponents.ScaleIconContentRatings as StencilReactComponent<ScaleIconContentRatingsElement, ScaleIconContentRatingsEvents, JSX.ScaleIconContentRatings>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentRouteEvents = NonNullable<unknown>;
 
-export const ScaleIconContentRoute: StencilReactComponent<ScaleIconContentRouteElement, ScaleIconContentRouteEvents> = /*@__PURE__*/ createComponent<ScaleIconContentRouteElement, ScaleIconContentRouteEvents>({
+export const ScaleIconContentRoute: StencilReactComponent<ScaleIconContentRouteElement, ScaleIconContentRouteEvents, JSX.ScaleIconContentRoute> = /*@__PURE__*/ createComponent<ScaleIconContentRouteElement, ScaleIconContentRouteEvents, JSX.ScaleIconContentRoute>({
     tagName: 'scale-icon-content-route',
     properties: {
         size: 'size',
@@ -5397,17 +4500,13 @@ export const ScaleIconContentRoute: StencilReactComponent<ScaleIconContentRouteE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentRouteElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentRouteEvents,
-    defineCustomElement: defineScaleIconContentRoute
+    clientModule: clientComponents.ScaleIconContentRoute as StencilReactComponent<ScaleIconContentRouteElement, ScaleIconContentRouteEvents, JSX.ScaleIconContentRoute>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentRssEvents = NonNullable<unknown>;
 
-export const ScaleIconContentRss: StencilReactComponent<ScaleIconContentRssElement, ScaleIconContentRssEvents> = /*@__PURE__*/ createComponent<ScaleIconContentRssElement, ScaleIconContentRssEvents>({
+export const ScaleIconContentRss: StencilReactComponent<ScaleIconContentRssElement, ScaleIconContentRssEvents, JSX.ScaleIconContentRss> = /*@__PURE__*/ createComponent<ScaleIconContentRssElement, ScaleIconContentRssEvents, JSX.ScaleIconContentRss>({
     tagName: 'scale-icon-content-rss',
     properties: {
         size: 'size',
@@ -5419,17 +4518,13 @@ export const ScaleIconContentRss: StencilReactComponent<ScaleIconContentRssEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentRssElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentRssEvents,
-    defineCustomElement: defineScaleIconContentRss
+    clientModule: clientComponents.ScaleIconContentRss as StencilReactComponent<ScaleIconContentRssElement, ScaleIconContentRssEvents, JSX.ScaleIconContentRss>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentShopEvents = NonNullable<unknown>;
 
-export const ScaleIconContentShop: StencilReactComponent<ScaleIconContentShopElement, ScaleIconContentShopEvents> = /*@__PURE__*/ createComponent<ScaleIconContentShopElement, ScaleIconContentShopEvents>({
+export const ScaleIconContentShop: StencilReactComponent<ScaleIconContentShopElement, ScaleIconContentShopEvents, JSX.ScaleIconContentShop> = /*@__PURE__*/ createComponent<ScaleIconContentShopElement, ScaleIconContentShopEvents, JSX.ScaleIconContentShop>({
     tagName: 'scale-icon-content-shop',
     properties: {
         size: 'size',
@@ -5441,17 +4536,13 @@ export const ScaleIconContentShop: StencilReactComponent<ScaleIconContentShopEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentShopElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentShopEvents,
-    defineCustomElement: defineScaleIconContentShop
+    clientModule: clientComponents.ScaleIconContentShop as StencilReactComponent<ScaleIconContentShopElement, ScaleIconContentShopEvents, JSX.ScaleIconContentShop>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSignalEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSignal: StencilReactComponent<ScaleIconContentSignalElement, ScaleIconContentSignalEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSignalElement, ScaleIconContentSignalEvents>({
+export const ScaleIconContentSignal: StencilReactComponent<ScaleIconContentSignalElement, ScaleIconContentSignalEvents, JSX.ScaleIconContentSignal> = /*@__PURE__*/ createComponent<ScaleIconContentSignalElement, ScaleIconContentSignalEvents, JSX.ScaleIconContentSignal>({
     tagName: 'scale-icon-content-signal',
     properties: {
         size: 'size',
@@ -5463,17 +4554,13 @@ export const ScaleIconContentSignal: StencilReactComponent<ScaleIconContentSigna
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSignalElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSignalEvents,
-    defineCustomElement: defineScaleIconContentSignal
+    clientModule: clientComponents.ScaleIconContentSignal as StencilReactComponent<ScaleIconContentSignalElement, ScaleIconContentSignalEvents, JSX.ScaleIconContentSignal>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSimCardEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSimCard: StencilReactComponent<ScaleIconContentSimCardElement, ScaleIconContentSimCardEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSimCardElement, ScaleIconContentSimCardEvents>({
+export const ScaleIconContentSimCard: StencilReactComponent<ScaleIconContentSimCardElement, ScaleIconContentSimCardEvents, JSX.ScaleIconContentSimCard> = /*@__PURE__*/ createComponent<ScaleIconContentSimCardElement, ScaleIconContentSimCardEvents, JSX.ScaleIconContentSimCard>({
     tagName: 'scale-icon-content-sim-card',
     properties: {
         size: 'size',
@@ -5485,17 +4572,13 @@ export const ScaleIconContentSimCard: StencilReactComponent<ScaleIconContentSimC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSimCardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSimCardEvents,
-    defineCustomElement: defineScaleIconContentSimCard
+    clientModule: clientComponents.ScaleIconContentSimCard as StencilReactComponent<ScaleIconContentSimCardElement, ScaleIconContentSimCardEvents, JSX.ScaleIconContentSimCard>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSmileEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSmile: StencilReactComponent<ScaleIconContentSmileElement, ScaleIconContentSmileEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSmileElement, ScaleIconContentSmileEvents>({
+export const ScaleIconContentSmile: StencilReactComponent<ScaleIconContentSmileElement, ScaleIconContentSmileEvents, JSX.ScaleIconContentSmile> = /*@__PURE__*/ createComponent<ScaleIconContentSmileElement, ScaleIconContentSmileEvents, JSX.ScaleIconContentSmile>({
     tagName: 'scale-icon-content-smile',
     properties: {
         size: 'size',
@@ -5507,17 +4590,13 @@ export const ScaleIconContentSmile: StencilReactComponent<ScaleIconContentSmileE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSmileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSmileEvents,
-    defineCustomElement: defineScaleIconContentSmile
+    clientModule: clientComponents.ScaleIconContentSmile as StencilReactComponent<ScaleIconContentSmileElement, ScaleIconContentSmileEvents, JSX.ScaleIconContentSmile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSortIndicatorDownEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSortIndicatorDown: StencilReactComponent<ScaleIconContentSortIndicatorDownElement, ScaleIconContentSortIndicatorDownEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorDownElement, ScaleIconContentSortIndicatorDownEvents>({
+export const ScaleIconContentSortIndicatorDown: StencilReactComponent<ScaleIconContentSortIndicatorDownElement, ScaleIconContentSortIndicatorDownEvents, JSX.ScaleIconContentSortIndicatorDown> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorDownElement, ScaleIconContentSortIndicatorDownEvents, JSX.ScaleIconContentSortIndicatorDown>({
     tagName: 'scale-icon-content-sort-indicator-down',
     properties: {
         size: 'size',
@@ -5529,17 +4608,13 @@ export const ScaleIconContentSortIndicatorDown: StencilReactComponent<ScaleIconC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSortIndicatorDownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSortIndicatorDownEvents,
-    defineCustomElement: defineScaleIconContentSortIndicatorDown
+    clientModule: clientComponents.ScaleIconContentSortIndicatorDown as StencilReactComponent<ScaleIconContentSortIndicatorDownElement, ScaleIconContentSortIndicatorDownEvents, JSX.ScaleIconContentSortIndicatorDown>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSortIndicatorMiniDownEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSortIndicatorMiniDown: StencilReactComponent<ScaleIconContentSortIndicatorMiniDownElement, ScaleIconContentSortIndicatorMiniDownEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorMiniDownElement, ScaleIconContentSortIndicatorMiniDownEvents>({
+export const ScaleIconContentSortIndicatorMiniDown: StencilReactComponent<ScaleIconContentSortIndicatorMiniDownElement, ScaleIconContentSortIndicatorMiniDownEvents, JSX.ScaleIconContentSortIndicatorMiniDown> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorMiniDownElement, ScaleIconContentSortIndicatorMiniDownEvents, JSX.ScaleIconContentSortIndicatorMiniDown>({
     tagName: 'scale-icon-content-sort-indicator-mini-down',
     properties: {
         size: 'size',
@@ -5551,17 +4626,13 @@ export const ScaleIconContentSortIndicatorMiniDown: StencilReactComponent<ScaleI
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSortIndicatorMiniDownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSortIndicatorMiniDownEvents,
-    defineCustomElement: defineScaleIconContentSortIndicatorMiniDown
+    clientModule: clientComponents.ScaleIconContentSortIndicatorMiniDown as StencilReactComponent<ScaleIconContentSortIndicatorMiniDownElement, ScaleIconContentSortIndicatorMiniDownEvents, JSX.ScaleIconContentSortIndicatorMiniDown>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSortIndicatorUpEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSortIndicatorUp: StencilReactComponent<ScaleIconContentSortIndicatorUpElement, ScaleIconContentSortIndicatorUpEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorUpElement, ScaleIconContentSortIndicatorUpEvents>({
+export const ScaleIconContentSortIndicatorUp: StencilReactComponent<ScaleIconContentSortIndicatorUpElement, ScaleIconContentSortIndicatorUpEvents, JSX.ScaleIconContentSortIndicatorUp> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorUpElement, ScaleIconContentSortIndicatorUpEvents, JSX.ScaleIconContentSortIndicatorUp>({
     tagName: 'scale-icon-content-sort-indicator-up',
     properties: {
         size: 'size',
@@ -5573,17 +4644,13 @@ export const ScaleIconContentSortIndicatorUp: StencilReactComponent<ScaleIconCon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSortIndicatorUpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSortIndicatorUpEvents,
-    defineCustomElement: defineScaleIconContentSortIndicatorUp
+    clientModule: clientComponents.ScaleIconContentSortIndicatorUp as StencilReactComponent<ScaleIconContentSortIndicatorUpElement, ScaleIconContentSortIndicatorUpEvents, JSX.ScaleIconContentSortIndicatorUp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSortIndicatorUpMiniEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSortIndicatorUpMini: StencilReactComponent<ScaleIconContentSortIndicatorUpMiniElement, ScaleIconContentSortIndicatorUpMiniEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorUpMiniElement, ScaleIconContentSortIndicatorUpMiniEvents>({
+export const ScaleIconContentSortIndicatorUpMini: StencilReactComponent<ScaleIconContentSortIndicatorUpMiniElement, ScaleIconContentSortIndicatorUpMiniEvents, JSX.ScaleIconContentSortIndicatorUpMini> = /*@__PURE__*/ createComponent<ScaleIconContentSortIndicatorUpMiniElement, ScaleIconContentSortIndicatorUpMiniEvents, JSX.ScaleIconContentSortIndicatorUpMini>({
     tagName: 'scale-icon-content-sort-indicator-up-mini',
     properties: {
         size: 'size',
@@ -5595,17 +4662,13 @@ export const ScaleIconContentSortIndicatorUpMini: StencilReactComponent<ScaleIco
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSortIndicatorUpMiniElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSortIndicatorUpMiniEvents,
-    defineCustomElement: defineScaleIconContentSortIndicatorUpMini
+    clientModule: clientComponents.ScaleIconContentSortIndicatorUpMini as StencilReactComponent<ScaleIconContentSortIndicatorUpMiniElement, ScaleIconContentSortIndicatorUpMiniEvents, JSX.ScaleIconContentSortIndicatorUpMini>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentStatusInactiveEvents = NonNullable<unknown>;
 
-export const ScaleIconContentStatusInactive: StencilReactComponent<ScaleIconContentStatusInactiveElement, ScaleIconContentStatusInactiveEvents> = /*@__PURE__*/ createComponent<ScaleIconContentStatusInactiveElement, ScaleIconContentStatusInactiveEvents>({
+export const ScaleIconContentStatusInactive: StencilReactComponent<ScaleIconContentStatusInactiveElement, ScaleIconContentStatusInactiveEvents, JSX.ScaleIconContentStatusInactive> = /*@__PURE__*/ createComponent<ScaleIconContentStatusInactiveElement, ScaleIconContentStatusInactiveEvents, JSX.ScaleIconContentStatusInactive>({
     tagName: 'scale-icon-content-status-inactive',
     properties: {
         size: 'size',
@@ -5617,17 +4680,13 @@ export const ScaleIconContentStatusInactive: StencilReactComponent<ScaleIconCont
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentStatusInactiveElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentStatusInactiveEvents,
-    defineCustomElement: defineScaleIconContentStatusInactive
+    clientModule: clientComponents.ScaleIconContentStatusInactive as StencilReactComponent<ScaleIconContentStatusInactiveElement, ScaleIconContentStatusInactiveEvents, JSX.ScaleIconContentStatusInactive>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentStatusRecurringEvents = NonNullable<unknown>;
 
-export const ScaleIconContentStatusRecurring: StencilReactComponent<ScaleIconContentStatusRecurringElement, ScaleIconContentStatusRecurringEvents> = /*@__PURE__*/ createComponent<ScaleIconContentStatusRecurringElement, ScaleIconContentStatusRecurringEvents>({
+export const ScaleIconContentStatusRecurring: StencilReactComponent<ScaleIconContentStatusRecurringElement, ScaleIconContentStatusRecurringEvents, JSX.ScaleIconContentStatusRecurring> = /*@__PURE__*/ createComponent<ScaleIconContentStatusRecurringElement, ScaleIconContentStatusRecurringEvents, JSX.ScaleIconContentStatusRecurring>({
     tagName: 'scale-icon-content-status-recurring',
     properties: {
         size: 'size',
@@ -5639,17 +4698,13 @@ export const ScaleIconContentStatusRecurring: StencilReactComponent<ScaleIconCon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentStatusRecurringElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentStatusRecurringEvents,
-    defineCustomElement: defineScaleIconContentStatusRecurring
+    clientModule: clientComponents.ScaleIconContentStatusRecurring as StencilReactComponent<ScaleIconContentStatusRecurringElement, ScaleIconContentStatusRecurringEvents, JSX.ScaleIconContentStatusRecurring>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentStopwatchEvents = NonNullable<unknown>;
 
-export const ScaleIconContentStopwatch: StencilReactComponent<ScaleIconContentStopwatchElement, ScaleIconContentStopwatchEvents> = /*@__PURE__*/ createComponent<ScaleIconContentStopwatchElement, ScaleIconContentStopwatchEvents>({
+export const ScaleIconContentStopwatch: StencilReactComponent<ScaleIconContentStopwatchElement, ScaleIconContentStopwatchEvents, JSX.ScaleIconContentStopwatch> = /*@__PURE__*/ createComponent<ScaleIconContentStopwatchElement, ScaleIconContentStopwatchEvents, JSX.ScaleIconContentStopwatch>({
     tagName: 'scale-icon-content-stopwatch',
     properties: {
         size: 'size',
@@ -5661,17 +4716,13 @@ export const ScaleIconContentStopwatch: StencilReactComponent<ScaleIconContentSt
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentStopwatchElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentStopwatchEvents,
-    defineCustomElement: defineScaleIconContentStopwatch
+    clientModule: clientComponents.ScaleIconContentStopwatch as StencilReactComponent<ScaleIconContentStopwatchElement, ScaleIconContentStopwatchEvents, JSX.ScaleIconContentStopwatch>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSupportChatEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSupportChat: StencilReactComponent<ScaleIconContentSupportChatElement, ScaleIconContentSupportChatEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSupportChatElement, ScaleIconContentSupportChatEvents>({
+export const ScaleIconContentSupportChat: StencilReactComponent<ScaleIconContentSupportChatElement, ScaleIconContentSupportChatEvents, JSX.ScaleIconContentSupportChat> = /*@__PURE__*/ createComponent<ScaleIconContentSupportChatElement, ScaleIconContentSupportChatEvents, JSX.ScaleIconContentSupportChat>({
     tagName: 'scale-icon-content-support-chat',
     properties: {
         size: 'size',
@@ -5683,17 +4734,13 @@ export const ScaleIconContentSupportChat: StencilReactComponent<ScaleIconContent
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSupportChatElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSupportChatEvents,
-    defineCustomElement: defineScaleIconContentSupportChat
+    clientModule: clientComponents.ScaleIconContentSupportChat as StencilReactComponent<ScaleIconContentSupportChatElement, ScaleIconContentSupportChatEvents, JSX.ScaleIconContentSupportChat>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentSustainableEvents = NonNullable<unknown>;
 
-export const ScaleIconContentSustainable: StencilReactComponent<ScaleIconContentSustainableElement, ScaleIconContentSustainableEvents> = /*@__PURE__*/ createComponent<ScaleIconContentSustainableElement, ScaleIconContentSustainableEvents>({
+export const ScaleIconContentSustainable: StencilReactComponent<ScaleIconContentSustainableElement, ScaleIconContentSustainableEvents, JSX.ScaleIconContentSustainable> = /*@__PURE__*/ createComponent<ScaleIconContentSustainableElement, ScaleIconContentSustainableEvents, JSX.ScaleIconContentSustainable>({
     tagName: 'scale-icon-content-sustainable',
     properties: {
         size: 'size',
@@ -5705,17 +4752,13 @@ export const ScaleIconContentSustainable: StencilReactComponent<ScaleIconContent
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentSustainableElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentSustainableEvents,
-    defineCustomElement: defineScaleIconContentSustainable
+    clientModule: clientComponents.ScaleIconContentSustainable as StencilReactComponent<ScaleIconContentSustainableElement, ScaleIconContentSustainableEvents, JSX.ScaleIconContentSustainable>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentTariffsEvents = NonNullable<unknown>;
 
-export const ScaleIconContentTariffs: StencilReactComponent<ScaleIconContentTariffsElement, ScaleIconContentTariffsEvents> = /*@__PURE__*/ createComponent<ScaleIconContentTariffsElement, ScaleIconContentTariffsEvents>({
+export const ScaleIconContentTariffs: StencilReactComponent<ScaleIconContentTariffsElement, ScaleIconContentTariffsEvents, JSX.ScaleIconContentTariffs> = /*@__PURE__*/ createComponent<ScaleIconContentTariffsElement, ScaleIconContentTariffsEvents, JSX.ScaleIconContentTariffs>({
     tagName: 'scale-icon-content-tariffs',
     properties: {
         size: 'size',
@@ -5727,17 +4770,13 @@ export const ScaleIconContentTariffs: StencilReactComponent<ScaleIconContentTari
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentTariffsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentTariffsEvents,
-    defineCustomElement: defineScaleIconContentTariffs
+    clientModule: clientComponents.ScaleIconContentTariffs as StencilReactComponent<ScaleIconContentTariffsElement, ScaleIconContentTariffsEvents, JSX.ScaleIconContentTariffs>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentThreatsEvents = NonNullable<unknown>;
 
-export const ScaleIconContentThreats: StencilReactComponent<ScaleIconContentThreatsElement, ScaleIconContentThreatsEvents> = /*@__PURE__*/ createComponent<ScaleIconContentThreatsElement, ScaleIconContentThreatsEvents>({
+export const ScaleIconContentThreats: StencilReactComponent<ScaleIconContentThreatsElement, ScaleIconContentThreatsEvents, JSX.ScaleIconContentThreats> = /*@__PURE__*/ createComponent<ScaleIconContentThreatsElement, ScaleIconContentThreatsEvents, JSX.ScaleIconContentThreats>({
     tagName: 'scale-icon-content-threats',
     properties: {
         size: 'size',
@@ -5749,17 +4788,13 @@ export const ScaleIconContentThreats: StencilReactComponent<ScaleIconContentThre
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentThreatsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentThreatsEvents,
-    defineCustomElement: defineScaleIconContentThreats
+    clientModule: clientComponents.ScaleIconContentThreats as StencilReactComponent<ScaleIconContentThreatsElement, ScaleIconContentThreatsEvents, JSX.ScaleIconContentThreats>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentTodoListEvents = NonNullable<unknown>;
 
-export const ScaleIconContentTodoList: StencilReactComponent<ScaleIconContentTodoListElement, ScaleIconContentTodoListEvents> = /*@__PURE__*/ createComponent<ScaleIconContentTodoListElement, ScaleIconContentTodoListEvents>({
+export const ScaleIconContentTodoList: StencilReactComponent<ScaleIconContentTodoListElement, ScaleIconContentTodoListEvents, JSX.ScaleIconContentTodoList> = /*@__PURE__*/ createComponent<ScaleIconContentTodoListElement, ScaleIconContentTodoListEvents, JSX.ScaleIconContentTodoList>({
     tagName: 'scale-icon-content-todo-list',
     properties: {
         size: 'size',
@@ -5771,17 +4806,13 @@ export const ScaleIconContentTodoList: StencilReactComponent<ScaleIconContentTod
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentTodoListElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentTodoListEvents,
-    defineCustomElement: defineScaleIconContentTodoList
+    clientModule: clientComponents.ScaleIconContentTodoList as StencilReactComponent<ScaleIconContentTodoListElement, ScaleIconContentTodoListEvents, JSX.ScaleIconContentTodoList>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentTransportEvents = NonNullable<unknown>;
 
-export const ScaleIconContentTransport: StencilReactComponent<ScaleIconContentTransportElement, ScaleIconContentTransportEvents> = /*@__PURE__*/ createComponent<ScaleIconContentTransportElement, ScaleIconContentTransportEvents>({
+export const ScaleIconContentTransport: StencilReactComponent<ScaleIconContentTransportElement, ScaleIconContentTransportEvents, JSX.ScaleIconContentTransport> = /*@__PURE__*/ createComponent<ScaleIconContentTransportElement, ScaleIconContentTransportEvents, JSX.ScaleIconContentTransport>({
     tagName: 'scale-icon-content-transport',
     properties: {
         size: 'size',
@@ -5793,17 +4824,13 @@ export const ScaleIconContentTransport: StencilReactComponent<ScaleIconContentTr
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentTransportElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentTransportEvents,
-    defineCustomElement: defineScaleIconContentTransport
+    clientModule: clientComponents.ScaleIconContentTransport as StencilReactComponent<ScaleIconContentTransportElement, ScaleIconContentTransportEvents, JSX.ScaleIconContentTransport>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentUnlockEvents = NonNullable<unknown>;
 
-export const ScaleIconContentUnlock: StencilReactComponent<ScaleIconContentUnlockElement, ScaleIconContentUnlockEvents> = /*@__PURE__*/ createComponent<ScaleIconContentUnlockElement, ScaleIconContentUnlockEvents>({
+export const ScaleIconContentUnlock: StencilReactComponent<ScaleIconContentUnlockElement, ScaleIconContentUnlockEvents, JSX.ScaleIconContentUnlock> = /*@__PURE__*/ createComponent<ScaleIconContentUnlockElement, ScaleIconContentUnlockEvents, JSX.ScaleIconContentUnlock>({
     tagName: 'scale-icon-content-unlock',
     properties: {
         size: 'size',
@@ -5815,17 +4842,13 @@ export const ScaleIconContentUnlock: StencilReactComponent<ScaleIconContentUnloc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentUnlockElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentUnlockEvents,
-    defineCustomElement: defineScaleIconContentUnlock
+    clientModule: clientComponents.ScaleIconContentUnlock as StencilReactComponent<ScaleIconContentUnlockElement, ScaleIconContentUnlockEvents, JSX.ScaleIconContentUnlock>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentVoucherEvents = NonNullable<unknown>;
 
-export const ScaleIconContentVoucher: StencilReactComponent<ScaleIconContentVoucherElement, ScaleIconContentVoucherEvents> = /*@__PURE__*/ createComponent<ScaleIconContentVoucherElement, ScaleIconContentVoucherEvents>({
+export const ScaleIconContentVoucher: StencilReactComponent<ScaleIconContentVoucherElement, ScaleIconContentVoucherEvents, JSX.ScaleIconContentVoucher> = /*@__PURE__*/ createComponent<ScaleIconContentVoucherElement, ScaleIconContentVoucherEvents, JSX.ScaleIconContentVoucher>({
     tagName: 'scale-icon-content-voucher',
     properties: {
         size: 'size',
@@ -5837,17 +4860,13 @@ export const ScaleIconContentVoucher: StencilReactComponent<ScaleIconContentVouc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentVoucherElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentVoucherEvents,
-    defineCustomElement: defineScaleIconContentVoucher
+    clientModule: clientComponents.ScaleIconContentVoucher as StencilReactComponent<ScaleIconContentVoucherElement, ScaleIconContentVoucherEvents, JSX.ScaleIconContentVoucher>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentWaitingEvents = NonNullable<unknown>;
 
-export const ScaleIconContentWaiting: StencilReactComponent<ScaleIconContentWaitingElement, ScaleIconContentWaitingEvents> = /*@__PURE__*/ createComponent<ScaleIconContentWaitingElement, ScaleIconContentWaitingEvents>({
+export const ScaleIconContentWaiting: StencilReactComponent<ScaleIconContentWaitingElement, ScaleIconContentWaitingEvents, JSX.ScaleIconContentWaiting> = /*@__PURE__*/ createComponent<ScaleIconContentWaitingElement, ScaleIconContentWaitingEvents, JSX.ScaleIconContentWaiting>({
     tagName: 'scale-icon-content-waiting',
     properties: {
         size: 'size',
@@ -5859,17 +4878,13 @@ export const ScaleIconContentWaiting: StencilReactComponent<ScaleIconContentWait
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentWaitingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentWaitingEvents,
-    defineCustomElement: defineScaleIconContentWaiting
+    clientModule: clientComponents.ScaleIconContentWaiting as StencilReactComponent<ScaleIconContentWaitingElement, ScaleIconContentWaitingEvents, JSX.ScaleIconContentWaiting>,
+    serializeShadowRoot
 });
 
 export type ScaleIconContentWalletEvents = NonNullable<unknown>;
 
-export const ScaleIconContentWallet: StencilReactComponent<ScaleIconContentWalletElement, ScaleIconContentWalletEvents> = /*@__PURE__*/ createComponent<ScaleIconContentWalletElement, ScaleIconContentWalletEvents>({
+export const ScaleIconContentWallet: StencilReactComponent<ScaleIconContentWalletElement, ScaleIconContentWalletEvents, JSX.ScaleIconContentWallet> = /*@__PURE__*/ createComponent<ScaleIconContentWalletElement, ScaleIconContentWalletEvents, JSX.ScaleIconContentWallet>({
     tagName: 'scale-icon-content-wallet',
     properties: {
         size: 'size',
@@ -5881,17 +4896,13 @@ export const ScaleIconContentWallet: StencilReactComponent<ScaleIconContentWalle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconContentWalletElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconContentWalletEvents,
-    defineCustomElement: defineScaleIconContentWallet
+    clientModule: clientComponents.ScaleIconContentWallet as StencilReactComponent<ScaleIconContentWalletElement, ScaleIconContentWalletEvents, JSX.ScaleIconContentWallet>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceAddDeviceEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceAddDevice: StencilReactComponent<ScaleIconDeviceAddDeviceElement, ScaleIconDeviceAddDeviceEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceAddDeviceElement, ScaleIconDeviceAddDeviceEvents>({
+export const ScaleIconDeviceAddDevice: StencilReactComponent<ScaleIconDeviceAddDeviceElement, ScaleIconDeviceAddDeviceEvents, JSX.ScaleIconDeviceAddDevice> = /*@__PURE__*/ createComponent<ScaleIconDeviceAddDeviceElement, ScaleIconDeviceAddDeviceEvents, JSX.ScaleIconDeviceAddDevice>({
     tagName: 'scale-icon-device-add-device',
     properties: {
         size: 'size',
@@ -5903,17 +4914,13 @@ export const ScaleIconDeviceAddDevice: StencilReactComponent<ScaleIconDeviceAddD
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceAddDeviceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceAddDeviceEvents,
-    defineCustomElement: defineScaleIconDeviceAddDevice
+    clientModule: clientComponents.ScaleIconDeviceAddDevice as StencilReactComponent<ScaleIconDeviceAddDeviceElement, ScaleIconDeviceAddDeviceEvents, JSX.ScaleIconDeviceAddDevice>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceCameraEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceCamera: StencilReactComponent<ScaleIconDeviceCameraElement, ScaleIconDeviceCameraEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceCameraElement, ScaleIconDeviceCameraEvents>({
+export const ScaleIconDeviceCamera: StencilReactComponent<ScaleIconDeviceCameraElement, ScaleIconDeviceCameraEvents, JSX.ScaleIconDeviceCamera> = /*@__PURE__*/ createComponent<ScaleIconDeviceCameraElement, ScaleIconDeviceCameraEvents, JSX.ScaleIconDeviceCamera>({
     tagName: 'scale-icon-device-camera',
     properties: {
         size: 'size',
@@ -5925,17 +4932,13 @@ export const ScaleIconDeviceCamera: StencilReactComponent<ScaleIconDeviceCameraE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceCameraElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceCameraEvents,
-    defineCustomElement: defineScaleIconDeviceCamera
+    clientModule: clientComponents.ScaleIconDeviceCamera as StencilReactComponent<ScaleIconDeviceCameraElement, ScaleIconDeviceCameraEvents, JSX.ScaleIconDeviceCamera>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceChangeCameraEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceChangeCamera: StencilReactComponent<ScaleIconDeviceChangeCameraElement, ScaleIconDeviceChangeCameraEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceChangeCameraElement, ScaleIconDeviceChangeCameraEvents>({
+export const ScaleIconDeviceChangeCamera: StencilReactComponent<ScaleIconDeviceChangeCameraElement, ScaleIconDeviceChangeCameraEvents, JSX.ScaleIconDeviceChangeCamera> = /*@__PURE__*/ createComponent<ScaleIconDeviceChangeCameraElement, ScaleIconDeviceChangeCameraEvents, JSX.ScaleIconDeviceChangeCamera>({
     tagName: 'scale-icon-device-change-camera',
     properties: {
         size: 'size',
@@ -5947,17 +4950,13 @@ export const ScaleIconDeviceChangeCamera: StencilReactComponent<ScaleIconDeviceC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceChangeCameraElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceChangeCameraEvents,
-    defineCustomElement: defineScaleIconDeviceChangeCamera
+    clientModule: clientComponents.ScaleIconDeviceChangeCamera as StencilReactComponent<ScaleIconDeviceChangeCameraElement, ScaleIconDeviceChangeCameraEvents, JSX.ScaleIconDeviceChangeCamera>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceComputerEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceComputer: StencilReactComponent<ScaleIconDeviceComputerElement, ScaleIconDeviceComputerEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceComputerElement, ScaleIconDeviceComputerEvents>({
+export const ScaleIconDeviceComputer: StencilReactComponent<ScaleIconDeviceComputerElement, ScaleIconDeviceComputerEvents, JSX.ScaleIconDeviceComputer> = /*@__PURE__*/ createComponent<ScaleIconDeviceComputerElement, ScaleIconDeviceComputerEvents, JSX.ScaleIconDeviceComputer>({
     tagName: 'scale-icon-device-computer',
     properties: {
         size: 'size',
@@ -5969,17 +4968,13 @@ export const ScaleIconDeviceComputer: StencilReactComponent<ScaleIconDeviceCompu
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceComputerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceComputerEvents,
-    defineCustomElement: defineScaleIconDeviceComputer
+    clientModule: clientComponents.ScaleIconDeviceComputer as StencilReactComponent<ScaleIconDeviceComputerElement, ScaleIconDeviceComputerEvents, JSX.ScaleIconDeviceComputer>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDeviceControllerEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDeviceController: StencilReactComponent<ScaleIconDeviceDeviceControllerElement, ScaleIconDeviceDeviceControllerEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceControllerElement, ScaleIconDeviceDeviceControllerEvents>({
+export const ScaleIconDeviceDeviceController: StencilReactComponent<ScaleIconDeviceDeviceControllerElement, ScaleIconDeviceDeviceControllerEvents, JSX.ScaleIconDeviceDeviceController> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceControllerElement, ScaleIconDeviceDeviceControllerEvents, JSX.ScaleIconDeviceDeviceController>({
     tagName: 'scale-icon-device-device-controller',
     properties: {
         size: 'size',
@@ -5991,17 +4986,13 @@ export const ScaleIconDeviceDeviceController: StencilReactComponent<ScaleIconDev
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDeviceControllerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDeviceControllerEvents,
-    defineCustomElement: defineScaleIconDeviceDeviceController
+    clientModule: clientComponents.ScaleIconDeviceDeviceController as StencilReactComponent<ScaleIconDeviceDeviceControllerElement, ScaleIconDeviceDeviceControllerEvents, JSX.ScaleIconDeviceDeviceController>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDeviceEthernetEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDeviceEthernet: StencilReactComponent<ScaleIconDeviceDeviceEthernetElement, ScaleIconDeviceDeviceEthernetEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceEthernetElement, ScaleIconDeviceDeviceEthernetEvents>({
+export const ScaleIconDeviceDeviceEthernet: StencilReactComponent<ScaleIconDeviceDeviceEthernetElement, ScaleIconDeviceDeviceEthernetEvents, JSX.ScaleIconDeviceDeviceEthernet> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceEthernetElement, ScaleIconDeviceDeviceEthernetEvents, JSX.ScaleIconDeviceDeviceEthernet>({
     tagName: 'scale-icon-device-device-ethernet',
     properties: {
         size: 'size',
@@ -6013,17 +5004,13 @@ export const ScaleIconDeviceDeviceEthernet: StencilReactComponent<ScaleIconDevic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDeviceEthernetElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDeviceEthernetEvents,
-    defineCustomElement: defineScaleIconDeviceDeviceEthernet
+    clientModule: clientComponents.ScaleIconDeviceDeviceEthernet as StencilReactComponent<ScaleIconDeviceDeviceEthernetElement, ScaleIconDeviceDeviceEthernetEvents, JSX.ScaleIconDeviceDeviceEthernet>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDeviceMeshEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDeviceMesh: StencilReactComponent<ScaleIconDeviceDeviceMeshElement, ScaleIconDeviceDeviceMeshEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceMeshElement, ScaleIconDeviceDeviceMeshEvents>({
+export const ScaleIconDeviceDeviceMesh: StencilReactComponent<ScaleIconDeviceDeviceMeshElement, ScaleIconDeviceDeviceMeshEvents, JSX.ScaleIconDeviceDeviceMesh> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceMeshElement, ScaleIconDeviceDeviceMeshEvents, JSX.ScaleIconDeviceDeviceMesh>({
     tagName: 'scale-icon-device-device-mesh',
     properties: {
         size: 'size',
@@ -6035,17 +5022,13 @@ export const ScaleIconDeviceDeviceMesh: StencilReactComponent<ScaleIconDeviceDev
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDeviceMeshElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDeviceMeshEvents,
-    defineCustomElement: defineScaleIconDeviceDeviceMesh
+    clientModule: clientComponents.ScaleIconDeviceDeviceMesh as StencilReactComponent<ScaleIconDeviceDeviceMeshElement, ScaleIconDeviceDeviceMeshEvents, JSX.ScaleIconDeviceDeviceMesh>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDevicePhoneEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDevicePhone: StencilReactComponent<ScaleIconDeviceDevicePhoneElement, ScaleIconDeviceDevicePhoneEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDevicePhoneElement, ScaleIconDeviceDevicePhoneEvents>({
+export const ScaleIconDeviceDevicePhone: StencilReactComponent<ScaleIconDeviceDevicePhoneElement, ScaleIconDeviceDevicePhoneEvents, JSX.ScaleIconDeviceDevicePhone> = /*@__PURE__*/ createComponent<ScaleIconDeviceDevicePhoneElement, ScaleIconDeviceDevicePhoneEvents, JSX.ScaleIconDeviceDevicePhone>({
     tagName: 'scale-icon-device-device-phone',
     properties: {
         size: 'size',
@@ -6057,17 +5040,13 @@ export const ScaleIconDeviceDevicePhone: StencilReactComponent<ScaleIconDeviceDe
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDevicePhoneElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDevicePhoneEvents,
-    defineCustomElement: defineScaleIconDeviceDevicePhone
+    clientModule: clientComponents.ScaleIconDeviceDevicePhone as StencilReactComponent<ScaleIconDeviceDevicePhoneElement, ScaleIconDeviceDevicePhoneEvents, JSX.ScaleIconDeviceDevicePhone>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDeviceRouterEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDeviceRouter: StencilReactComponent<ScaleIconDeviceDeviceRouterElement, ScaleIconDeviceDeviceRouterEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceRouterElement, ScaleIconDeviceDeviceRouterEvents>({
+export const ScaleIconDeviceDeviceRouter: StencilReactComponent<ScaleIconDeviceDeviceRouterElement, ScaleIconDeviceDeviceRouterEvents, JSX.ScaleIconDeviceDeviceRouter> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceRouterElement, ScaleIconDeviceDeviceRouterEvents, JSX.ScaleIconDeviceDeviceRouter>({
     tagName: 'scale-icon-device-device-router',
     properties: {
         size: 'size',
@@ -6079,17 +5058,13 @@ export const ScaleIconDeviceDeviceRouter: StencilReactComponent<ScaleIconDeviceD
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDeviceRouterElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDeviceRouterEvents,
-    defineCustomElement: defineScaleIconDeviceDeviceRouter
+    clientModule: clientComponents.ScaleIconDeviceDeviceRouter as StencilReactComponent<ScaleIconDeviceDeviceRouterElement, ScaleIconDeviceDeviceRouterEvents, JSX.ScaleIconDeviceDeviceRouter>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDeviceTvEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDeviceTv: StencilReactComponent<ScaleIconDeviceDeviceTvElement, ScaleIconDeviceDeviceTvEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceTvElement, ScaleIconDeviceDeviceTvEvents>({
+export const ScaleIconDeviceDeviceTv: StencilReactComponent<ScaleIconDeviceDeviceTvElement, ScaleIconDeviceDeviceTvEvents, JSX.ScaleIconDeviceDeviceTv> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceTvElement, ScaleIconDeviceDeviceTvEvents, JSX.ScaleIconDeviceDeviceTv>({
     tagName: 'scale-icon-device-device-tv',
     properties: {
         size: 'size',
@@ -6101,17 +5076,13 @@ export const ScaleIconDeviceDeviceTv: StencilReactComponent<ScaleIconDeviceDevic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDeviceTvElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDeviceTvEvents,
-    defineCustomElement: defineScaleIconDeviceDeviceTv
+    clientModule: clientComponents.ScaleIconDeviceDeviceTv as StencilReactComponent<ScaleIconDeviceDeviceTvElement, ScaleIconDeviceDeviceTvEvents, JSX.ScaleIconDeviceDeviceTv>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDeviceWatchEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDeviceWatch: StencilReactComponent<ScaleIconDeviceDeviceWatchElement, ScaleIconDeviceDeviceWatchEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceWatchElement, ScaleIconDeviceDeviceWatchEvents>({
+export const ScaleIconDeviceDeviceWatch: StencilReactComponent<ScaleIconDeviceDeviceWatchElement, ScaleIconDeviceDeviceWatchEvents, JSX.ScaleIconDeviceDeviceWatch> = /*@__PURE__*/ createComponent<ScaleIconDeviceDeviceWatchElement, ScaleIconDeviceDeviceWatchEvents, JSX.ScaleIconDeviceDeviceWatch>({
     tagName: 'scale-icon-device-device-watch',
     properties: {
         size: 'size',
@@ -6123,17 +5094,13 @@ export const ScaleIconDeviceDeviceWatch: StencilReactComponent<ScaleIconDeviceDe
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDeviceWatchElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDeviceWatchEvents,
-    defineCustomElement: defineScaleIconDeviceDeviceWatch
+    clientModule: clientComponents.ScaleIconDeviceDeviceWatch as StencilReactComponent<ScaleIconDeviceDeviceWatchElement, ScaleIconDeviceDeviceWatchEvents, JSX.ScaleIconDeviceDeviceWatch>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceDongleEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceDongle: StencilReactComponent<ScaleIconDeviceDongleElement, ScaleIconDeviceDongleEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceDongleElement, ScaleIconDeviceDongleEvents>({
+export const ScaleIconDeviceDongle: StencilReactComponent<ScaleIconDeviceDongleElement, ScaleIconDeviceDongleEvents, JSX.ScaleIconDeviceDongle> = /*@__PURE__*/ createComponent<ScaleIconDeviceDongleElement, ScaleIconDeviceDongleEvents, JSX.ScaleIconDeviceDongle>({
     tagName: 'scale-icon-device-dongle',
     properties: {
         size: 'size',
@@ -6145,17 +5112,13 @@ export const ScaleIconDeviceDongle: StencilReactComponent<ScaleIconDeviceDongleE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceDongleElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceDongleEvents,
-    defineCustomElement: defineScaleIconDeviceDongle
+    clientModule: clientComponents.ScaleIconDeviceDongle as StencilReactComponent<ScaleIconDeviceDongleElement, ScaleIconDeviceDongleEvents, JSX.ScaleIconDeviceDongle>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceFaxEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceFax: StencilReactComponent<ScaleIconDeviceFaxElement, ScaleIconDeviceFaxEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceFaxElement, ScaleIconDeviceFaxEvents>({
+export const ScaleIconDeviceFax: StencilReactComponent<ScaleIconDeviceFaxElement, ScaleIconDeviceFaxEvents, JSX.ScaleIconDeviceFax> = /*@__PURE__*/ createComponent<ScaleIconDeviceFaxElement, ScaleIconDeviceFaxEvents, JSX.ScaleIconDeviceFax>({
     tagName: 'scale-icon-device-fax',
     properties: {
         size: 'size',
@@ -6167,17 +5130,13 @@ export const ScaleIconDeviceFax: StencilReactComponent<ScaleIconDeviceFaxElement
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceFaxElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceFaxEvents,
-    defineCustomElement: defineScaleIconDeviceFax
+    clientModule: clientComponents.ScaleIconDeviceFax as StencilReactComponent<ScaleIconDeviceFaxElement, ScaleIconDeviceFaxEvents, JSX.ScaleIconDeviceFax>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceFixedLineServicesEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceFixedLineServices: StencilReactComponent<ScaleIconDeviceFixedLineServicesElement, ScaleIconDeviceFixedLineServicesEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceFixedLineServicesElement, ScaleIconDeviceFixedLineServicesEvents>({
+export const ScaleIconDeviceFixedLineServices: StencilReactComponent<ScaleIconDeviceFixedLineServicesElement, ScaleIconDeviceFixedLineServicesEvents, JSX.ScaleIconDeviceFixedLineServices> = /*@__PURE__*/ createComponent<ScaleIconDeviceFixedLineServicesElement, ScaleIconDeviceFixedLineServicesEvents, JSX.ScaleIconDeviceFixedLineServices>({
     tagName: 'scale-icon-device-fixed-line-services',
     properties: {
         size: 'size',
@@ -6189,17 +5148,13 @@ export const ScaleIconDeviceFixedLineServices: StencilReactComponent<ScaleIconDe
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceFixedLineServicesElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceFixedLineServicesEvents,
-    defineCustomElement: defineScaleIconDeviceFixedLineServices
+    clientModule: clientComponents.ScaleIconDeviceFixedLineServices as StencilReactComponent<ScaleIconDeviceFixedLineServicesElement, ScaleIconDeviceFixedLineServicesEvents, JSX.ScaleIconDeviceFixedLineServices>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceGameControllerEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceGameController: StencilReactComponent<ScaleIconDeviceGameControllerElement, ScaleIconDeviceGameControllerEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceGameControllerElement, ScaleIconDeviceGameControllerEvents>({
+export const ScaleIconDeviceGameController: StencilReactComponent<ScaleIconDeviceGameControllerElement, ScaleIconDeviceGameControllerEvents, JSX.ScaleIconDeviceGameController> = /*@__PURE__*/ createComponent<ScaleIconDeviceGameControllerElement, ScaleIconDeviceGameControllerEvents, JSX.ScaleIconDeviceGameController>({
     tagName: 'scale-icon-device-game-controller',
     properties: {
         size: 'size',
@@ -6211,17 +5166,13 @@ export const ScaleIconDeviceGameController: StencilReactComponent<ScaleIconDevic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceGameControllerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceGameControllerEvents,
-    defineCustomElement: defineScaleIconDeviceGameController
+    clientModule: clientComponents.ScaleIconDeviceGameController as StencilReactComponent<ScaleIconDeviceGameControllerElement, ScaleIconDeviceGameControllerEvents, JSX.ScaleIconDeviceGameController>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceMediaReceiverEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceMediaReceiver: StencilReactComponent<ScaleIconDeviceMediaReceiverElement, ScaleIconDeviceMediaReceiverEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceMediaReceiverElement, ScaleIconDeviceMediaReceiverEvents>({
+export const ScaleIconDeviceMediaReceiver: StencilReactComponent<ScaleIconDeviceMediaReceiverElement, ScaleIconDeviceMediaReceiverEvents, JSX.ScaleIconDeviceMediaReceiver> = /*@__PURE__*/ createComponent<ScaleIconDeviceMediaReceiverElement, ScaleIconDeviceMediaReceiverEvents, JSX.ScaleIconDeviceMediaReceiver>({
     tagName: 'scale-icon-device-media-receiver',
     properties: {
         size: 'size',
@@ -6233,17 +5184,13 @@ export const ScaleIconDeviceMediaReceiver: StencilReactComponent<ScaleIconDevice
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceMediaReceiverElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceMediaReceiverEvents,
-    defineCustomElement: defineScaleIconDeviceMediaReceiver
+    clientModule: clientComponents.ScaleIconDeviceMediaReceiver as StencilReactComponent<ScaleIconDeviceMediaReceiverElement, ScaleIconDeviceMediaReceiverEvents, JSX.ScaleIconDeviceMediaReceiver>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceMobileDataEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceMobileData: StencilReactComponent<ScaleIconDeviceMobileDataElement, ScaleIconDeviceMobileDataEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileDataElement, ScaleIconDeviceMobileDataEvents>({
+export const ScaleIconDeviceMobileData: StencilReactComponent<ScaleIconDeviceMobileDataElement, ScaleIconDeviceMobileDataEvents, JSX.ScaleIconDeviceMobileData> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileDataElement, ScaleIconDeviceMobileDataEvents, JSX.ScaleIconDeviceMobileData>({
     tagName: 'scale-icon-device-mobile-data',
     properties: {
         size: 'size',
@@ -6255,17 +5202,13 @@ export const ScaleIconDeviceMobileData: StencilReactComponent<ScaleIconDeviceMob
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceMobileDataElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceMobileDataEvents,
-    defineCustomElement: defineScaleIconDeviceMobileData
+    clientModule: clientComponents.ScaleIconDeviceMobileData as StencilReactComponent<ScaleIconDeviceMobileDataElement, ScaleIconDeviceMobileDataEvents, JSX.ScaleIconDeviceMobileData>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceMobileDevicesCombinationEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceMobileDevicesCombination: StencilReactComponent<ScaleIconDeviceMobileDevicesCombinationElement, ScaleIconDeviceMobileDevicesCombinationEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileDevicesCombinationElement, ScaleIconDeviceMobileDevicesCombinationEvents>({
+export const ScaleIconDeviceMobileDevicesCombination: StencilReactComponent<ScaleIconDeviceMobileDevicesCombinationElement, ScaleIconDeviceMobileDevicesCombinationEvents, JSX.ScaleIconDeviceMobileDevicesCombination> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileDevicesCombinationElement, ScaleIconDeviceMobileDevicesCombinationEvents, JSX.ScaleIconDeviceMobileDevicesCombination>({
     tagName: 'scale-icon-device-mobile-devices-combination',
     properties: {
         size: 'size',
@@ -6277,17 +5220,13 @@ export const ScaleIconDeviceMobileDevicesCombination: StencilReactComponent<Scal
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceMobileDevicesCombinationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceMobileDevicesCombinationEvents,
-    defineCustomElement: defineScaleIconDeviceMobileDevicesCombination
+    clientModule: clientComponents.ScaleIconDeviceMobileDevicesCombination as StencilReactComponent<ScaleIconDeviceMobileDevicesCombinationElement, ScaleIconDeviceMobileDevicesCombinationEvents, JSX.ScaleIconDeviceMobileDevicesCombination>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceMobileEquipmentEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceMobileEquipment: StencilReactComponent<ScaleIconDeviceMobileEquipmentElement, ScaleIconDeviceMobileEquipmentEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileEquipmentElement, ScaleIconDeviceMobileEquipmentEvents>({
+export const ScaleIconDeviceMobileEquipment: StencilReactComponent<ScaleIconDeviceMobileEquipmentElement, ScaleIconDeviceMobileEquipmentEvents, JSX.ScaleIconDeviceMobileEquipment> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileEquipmentElement, ScaleIconDeviceMobileEquipmentEvents, JSX.ScaleIconDeviceMobileEquipment>({
     tagName: 'scale-icon-device-mobile-equipment',
     properties: {
         size: 'size',
@@ -6299,17 +5238,13 @@ export const ScaleIconDeviceMobileEquipment: StencilReactComponent<ScaleIconDevi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceMobileEquipmentElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceMobileEquipmentEvents,
-    defineCustomElement: defineScaleIconDeviceMobileEquipment
+    clientModule: clientComponents.ScaleIconDeviceMobileEquipment as StencilReactComponent<ScaleIconDeviceMobileEquipmentElement, ScaleIconDeviceMobileEquipmentEvents, JSX.ScaleIconDeviceMobileEquipment>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceMobilePhoneInsuranceEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceMobilePhoneInsurance: StencilReactComponent<ScaleIconDeviceMobilePhoneInsuranceElement, ScaleIconDeviceMobilePhoneInsuranceEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobilePhoneInsuranceElement, ScaleIconDeviceMobilePhoneInsuranceEvents>({
+export const ScaleIconDeviceMobilePhoneInsurance: StencilReactComponent<ScaleIconDeviceMobilePhoneInsuranceElement, ScaleIconDeviceMobilePhoneInsuranceEvents, JSX.ScaleIconDeviceMobilePhoneInsurance> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobilePhoneInsuranceElement, ScaleIconDeviceMobilePhoneInsuranceEvents, JSX.ScaleIconDeviceMobilePhoneInsurance>({
     tagName: 'scale-icon-device-mobile-phone-insurance',
     properties: {
         size: 'size',
@@ -6321,17 +5256,13 @@ export const ScaleIconDeviceMobilePhoneInsurance: StencilReactComponent<ScaleIco
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceMobilePhoneInsuranceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceMobilePhoneInsuranceEvents,
-    defineCustomElement: defineScaleIconDeviceMobilePhoneInsurance
+    clientModule: clientComponents.ScaleIconDeviceMobilePhoneInsurance as StencilReactComponent<ScaleIconDeviceMobilePhoneInsuranceElement, ScaleIconDeviceMobilePhoneInsuranceEvents, JSX.ScaleIconDeviceMobilePhoneInsurance>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceMobileServicesEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceMobileServices: StencilReactComponent<ScaleIconDeviceMobileServicesElement, ScaleIconDeviceMobileServicesEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileServicesElement, ScaleIconDeviceMobileServicesEvents>({
+export const ScaleIconDeviceMobileServices: StencilReactComponent<ScaleIconDeviceMobileServicesElement, ScaleIconDeviceMobileServicesEvents, JSX.ScaleIconDeviceMobileServices> = /*@__PURE__*/ createComponent<ScaleIconDeviceMobileServicesElement, ScaleIconDeviceMobileServicesEvents, JSX.ScaleIconDeviceMobileServices>({
     tagName: 'scale-icon-device-mobile-services',
     properties: {
         size: 'size',
@@ -6343,17 +5274,13 @@ export const ScaleIconDeviceMobileServices: StencilReactComponent<ScaleIconDevic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceMobileServicesElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceMobileServicesEvents,
-    defineCustomElement: defineScaleIconDeviceMobileServices
+    clientModule: clientComponents.ScaleIconDeviceMobileServices as StencilReactComponent<ScaleIconDeviceMobileServicesElement, ScaleIconDeviceMobileServicesEvents, JSX.ScaleIconDeviceMobileServices>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceNoCameraEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceNoCamera: StencilReactComponent<ScaleIconDeviceNoCameraElement, ScaleIconDeviceNoCameraEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceNoCameraElement, ScaleIconDeviceNoCameraEvents>({
+export const ScaleIconDeviceNoCamera: StencilReactComponent<ScaleIconDeviceNoCameraElement, ScaleIconDeviceNoCameraEvents, JSX.ScaleIconDeviceNoCamera> = /*@__PURE__*/ createComponent<ScaleIconDeviceNoCameraElement, ScaleIconDeviceNoCameraEvents, JSX.ScaleIconDeviceNoCamera>({
     tagName: 'scale-icon-device-no-camera',
     properties: {
         size: 'size',
@@ -6365,17 +5292,13 @@ export const ScaleIconDeviceNoCamera: StencilReactComponent<ScaleIconDeviceNoCam
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceNoCameraElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceNoCameraEvents,
-    defineCustomElement: defineScaleIconDeviceNoCamera
+    clientModule: clientComponents.ScaleIconDeviceNoCamera as StencilReactComponent<ScaleIconDeviceNoCameraElement, ScaleIconDeviceNoCameraEvents, JSX.ScaleIconDeviceNoCamera>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDevicePhoneWithMobilePlanEvents = NonNullable<unknown>;
 
-export const ScaleIconDevicePhoneWithMobilePlan: StencilReactComponent<ScaleIconDevicePhoneWithMobilePlanElement, ScaleIconDevicePhoneWithMobilePlanEvents> = /*@__PURE__*/ createComponent<ScaleIconDevicePhoneWithMobilePlanElement, ScaleIconDevicePhoneWithMobilePlanEvents>({
+export const ScaleIconDevicePhoneWithMobilePlan: StencilReactComponent<ScaleIconDevicePhoneWithMobilePlanElement, ScaleIconDevicePhoneWithMobilePlanEvents, JSX.ScaleIconDevicePhoneWithMobilePlan> = /*@__PURE__*/ createComponent<ScaleIconDevicePhoneWithMobilePlanElement, ScaleIconDevicePhoneWithMobilePlanEvents, JSX.ScaleIconDevicePhoneWithMobilePlan>({
     tagName: 'scale-icon-device-phone-with-mobile-plan',
     properties: {
         size: 'size',
@@ -6387,17 +5310,13 @@ export const ScaleIconDevicePhoneWithMobilePlan: StencilReactComponent<ScaleIcon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDevicePhoneWithMobilePlanElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDevicePhoneWithMobilePlanEvents,
-    defineCustomElement: defineScaleIconDevicePhoneWithMobilePlan
+    clientModule: clientComponents.ScaleIconDevicePhoneWithMobilePlan as StencilReactComponent<ScaleIconDevicePhoneWithMobilePlanElement, ScaleIconDevicePhoneWithMobilePlanEvents, JSX.ScaleIconDevicePhoneWithMobilePlan>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDevicePhoneWithoutMobilePlanEvents = NonNullable<unknown>;
 
-export const ScaleIconDevicePhoneWithoutMobilePlan: StencilReactComponent<ScaleIconDevicePhoneWithoutMobilePlanElement, ScaleIconDevicePhoneWithoutMobilePlanEvents> = /*@__PURE__*/ createComponent<ScaleIconDevicePhoneWithoutMobilePlanElement, ScaleIconDevicePhoneWithoutMobilePlanEvents>({
+export const ScaleIconDevicePhoneWithoutMobilePlan: StencilReactComponent<ScaleIconDevicePhoneWithoutMobilePlanElement, ScaleIconDevicePhoneWithoutMobilePlanEvents, JSX.ScaleIconDevicePhoneWithoutMobilePlan> = /*@__PURE__*/ createComponent<ScaleIconDevicePhoneWithoutMobilePlanElement, ScaleIconDevicePhoneWithoutMobilePlanEvents, JSX.ScaleIconDevicePhoneWithoutMobilePlan>({
     tagName: 'scale-icon-device-phone-without-mobile-plan',
     properties: {
         size: 'size',
@@ -6409,17 +5328,13 @@ export const ScaleIconDevicePhoneWithoutMobilePlan: StencilReactComponent<ScaleI
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDevicePhoneWithoutMobilePlanElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDevicePhoneWithoutMobilePlanEvents,
-    defineCustomElement: defineScaleIconDevicePhoneWithoutMobilePlan
+    clientModule: clientComponents.ScaleIconDevicePhoneWithoutMobilePlan as StencilReactComponent<ScaleIconDevicePhoneWithoutMobilePlanElement, ScaleIconDevicePhoneWithoutMobilePlanEvents, JSX.ScaleIconDevicePhoneWithoutMobilePlan>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDevicePhotoCameraEvents = NonNullable<unknown>;
 
-export const ScaleIconDevicePhotoCamera: StencilReactComponent<ScaleIconDevicePhotoCameraElement, ScaleIconDevicePhotoCameraEvents> = /*@__PURE__*/ createComponent<ScaleIconDevicePhotoCameraElement, ScaleIconDevicePhotoCameraEvents>({
+export const ScaleIconDevicePhotoCamera: StencilReactComponent<ScaleIconDevicePhotoCameraElement, ScaleIconDevicePhotoCameraEvents, JSX.ScaleIconDevicePhotoCamera> = /*@__PURE__*/ createComponent<ScaleIconDevicePhotoCameraElement, ScaleIconDevicePhotoCameraEvents, JSX.ScaleIconDevicePhotoCamera>({
     tagName: 'scale-icon-device-photo-camera',
     properties: {
         size: 'size',
@@ -6431,17 +5346,13 @@ export const ScaleIconDevicePhotoCamera: StencilReactComponent<ScaleIconDevicePh
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDevicePhotoCameraElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDevicePhotoCameraEvents,
-    defineCustomElement: defineScaleIconDevicePhotoCamera
+    clientModule: clientComponents.ScaleIconDevicePhotoCamera as StencilReactComponent<ScaleIconDevicePhotoCameraElement, ScaleIconDevicePhotoCameraEvents, JSX.ScaleIconDevicePhotoCamera>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceRemoteControllerEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceRemoteController: StencilReactComponent<ScaleIconDeviceRemoteControllerElement, ScaleIconDeviceRemoteControllerEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceRemoteControllerElement, ScaleIconDeviceRemoteControllerEvents>({
+export const ScaleIconDeviceRemoteController: StencilReactComponent<ScaleIconDeviceRemoteControllerElement, ScaleIconDeviceRemoteControllerEvents, JSX.ScaleIconDeviceRemoteController> = /*@__PURE__*/ createComponent<ScaleIconDeviceRemoteControllerElement, ScaleIconDeviceRemoteControllerEvents, JSX.ScaleIconDeviceRemoteController>({
     tagName: 'scale-icon-device-remote-controller',
     properties: {
         size: 'size',
@@ -6453,17 +5364,13 @@ export const ScaleIconDeviceRemoteController: StencilReactComponent<ScaleIconDev
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceRemoteControllerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceRemoteControllerEvents,
-    defineCustomElement: defineScaleIconDeviceRemoteController
+    clientModule: clientComponents.ScaleIconDeviceRemoteController as StencilReactComponent<ScaleIconDeviceRemoteControllerElement, ScaleIconDeviceRemoteControllerEvents, JSX.ScaleIconDeviceRemoteController>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceReplacementMobilephoneEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceReplacementMobilephone: StencilReactComponent<ScaleIconDeviceReplacementMobilephoneElement, ScaleIconDeviceReplacementMobilephoneEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceReplacementMobilephoneElement, ScaleIconDeviceReplacementMobilephoneEvents>({
+export const ScaleIconDeviceReplacementMobilephone: StencilReactComponent<ScaleIconDeviceReplacementMobilephoneElement, ScaleIconDeviceReplacementMobilephoneEvents, JSX.ScaleIconDeviceReplacementMobilephone> = /*@__PURE__*/ createComponent<ScaleIconDeviceReplacementMobilephoneElement, ScaleIconDeviceReplacementMobilephoneEvents, JSX.ScaleIconDeviceReplacementMobilephone>({
     tagName: 'scale-icon-device-replacement-mobilephone',
     properties: {
         size: 'size',
@@ -6475,17 +5382,13 @@ export const ScaleIconDeviceReplacementMobilephone: StencilReactComponent<ScaleI
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceReplacementMobilephoneElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceReplacementMobilephoneEvents,
-    defineCustomElement: defineScaleIconDeviceReplacementMobilephone
+    clientModule: clientComponents.ScaleIconDeviceReplacementMobilephone as StencilReactComponent<ScaleIconDeviceReplacementMobilephoneElement, ScaleIconDeviceReplacementMobilephoneEvents, JSX.ScaleIconDeviceReplacementMobilephone>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceScreenRotateEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceScreenRotate: StencilReactComponent<ScaleIconDeviceScreenRotateElement, ScaleIconDeviceScreenRotateEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceScreenRotateElement, ScaleIconDeviceScreenRotateEvents>({
+export const ScaleIconDeviceScreenRotate: StencilReactComponent<ScaleIconDeviceScreenRotateElement, ScaleIconDeviceScreenRotateEvents, JSX.ScaleIconDeviceScreenRotate> = /*@__PURE__*/ createComponent<ScaleIconDeviceScreenRotateElement, ScaleIconDeviceScreenRotateEvents, JSX.ScaleIconDeviceScreenRotate>({
     tagName: 'scale-icon-device-screen-rotate',
     properties: {
         size: 'size',
@@ -6497,17 +5400,13 @@ export const ScaleIconDeviceScreenRotate: StencilReactComponent<ScaleIconDeviceS
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceScreenRotateElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceScreenRotateEvents,
-    defineCustomElement: defineScaleIconDeviceScreenRotate
+    clientModule: clientComponents.ScaleIconDeviceScreenRotate as StencilReactComponent<ScaleIconDeviceScreenRotateElement, ScaleIconDeviceScreenRotateEvents, JSX.ScaleIconDeviceScreenRotate>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceServerEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceServer: StencilReactComponent<ScaleIconDeviceServerElement, ScaleIconDeviceServerEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceServerElement, ScaleIconDeviceServerEvents>({
+export const ScaleIconDeviceServer: StencilReactComponent<ScaleIconDeviceServerElement, ScaleIconDeviceServerEvents, JSX.ScaleIconDeviceServer> = /*@__PURE__*/ createComponent<ScaleIconDeviceServerElement, ScaleIconDeviceServerEvents, JSX.ScaleIconDeviceServer>({
     tagName: 'scale-icon-device-server',
     properties: {
         size: 'size',
@@ -6519,17 +5418,13 @@ export const ScaleIconDeviceServer: StencilReactComponent<ScaleIconDeviceServerE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceServerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceServerEvents,
-    defineCustomElement: defineScaleIconDeviceServer
+    clientModule: clientComponents.ScaleIconDeviceServer as StencilReactComponent<ScaleIconDeviceServerElement, ScaleIconDeviceServerEvents, JSX.ScaleIconDeviceServer>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceSmartSpeakerEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceSmartSpeaker: StencilReactComponent<ScaleIconDeviceSmartSpeakerElement, ScaleIconDeviceSmartSpeakerEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceSmartSpeakerElement, ScaleIconDeviceSmartSpeakerEvents>({
+export const ScaleIconDeviceSmartSpeaker: StencilReactComponent<ScaleIconDeviceSmartSpeakerElement, ScaleIconDeviceSmartSpeakerEvents, JSX.ScaleIconDeviceSmartSpeaker> = /*@__PURE__*/ createComponent<ScaleIconDeviceSmartSpeakerElement, ScaleIconDeviceSmartSpeakerEvents, JSX.ScaleIconDeviceSmartSpeaker>({
     tagName: 'scale-icon-device-smart-speaker',
     properties: {
         size: 'size',
@@ -6541,17 +5436,13 @@ export const ScaleIconDeviceSmartSpeaker: StencilReactComponent<ScaleIconDeviceS
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceSmartSpeakerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceSmartSpeakerEvents,
-    defineCustomElement: defineScaleIconDeviceSmartSpeaker
+    clientModule: clientComponents.ScaleIconDeviceSmartSpeaker as StencilReactComponent<ScaleIconDeviceSmartSpeakerElement, ScaleIconDeviceSmartSpeakerEvents, JSX.ScaleIconDeviceSmartSpeaker>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceTabletEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceTablet: StencilReactComponent<ScaleIconDeviceTabletElement, ScaleIconDeviceTabletEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceTabletElement, ScaleIconDeviceTabletEvents>({
+export const ScaleIconDeviceTablet: StencilReactComponent<ScaleIconDeviceTabletElement, ScaleIconDeviceTabletEvents, JSX.ScaleIconDeviceTablet> = /*@__PURE__*/ createComponent<ScaleIconDeviceTabletElement, ScaleIconDeviceTabletEvents, JSX.ScaleIconDeviceTablet>({
     tagName: 'scale-icon-device-tablet',
     properties: {
         size: 'size',
@@ -6563,17 +5454,13 @@ export const ScaleIconDeviceTablet: StencilReactComponent<ScaleIconDeviceTabletE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceTabletElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceTabletEvents,
-    defineCustomElement: defineScaleIconDeviceTablet
+    clientModule: clientComponents.ScaleIconDeviceTablet as StencilReactComponent<ScaleIconDeviceTabletElement, ScaleIconDeviceTabletEvents, JSX.ScaleIconDeviceTablet>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceTvAndMobileEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceTvAndMobile: StencilReactComponent<ScaleIconDeviceTvAndMobileElement, ScaleIconDeviceTvAndMobileEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceTvAndMobileElement, ScaleIconDeviceTvAndMobileEvents>({
+export const ScaleIconDeviceTvAndMobile: StencilReactComponent<ScaleIconDeviceTvAndMobileElement, ScaleIconDeviceTvAndMobileEvents, JSX.ScaleIconDeviceTvAndMobile> = /*@__PURE__*/ createComponent<ScaleIconDeviceTvAndMobileElement, ScaleIconDeviceTvAndMobileEvents, JSX.ScaleIconDeviceTvAndMobile>({
     tagName: 'scale-icon-device-tv-and-mobile',
     properties: {
         size: 'size',
@@ -6585,17 +5472,13 @@ export const ScaleIconDeviceTvAndMobile: StencilReactComponent<ScaleIconDeviceTv
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceTvAndMobileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceTvAndMobileEvents,
-    defineCustomElement: defineScaleIconDeviceTvAndMobile
+    clientModule: clientComponents.ScaleIconDeviceTvAndMobile as StencilReactComponent<ScaleIconDeviceTvAndMobileElement, ScaleIconDeviceTvAndMobileEvents, JSX.ScaleIconDeviceTvAndMobile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceTwitchingClosedStateEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceTwitchingClosedState: StencilReactComponent<ScaleIconDeviceTwitchingClosedStateElement, ScaleIconDeviceTwitchingClosedStateEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceTwitchingClosedStateElement, ScaleIconDeviceTwitchingClosedStateEvents>({
+export const ScaleIconDeviceTwitchingClosedState: StencilReactComponent<ScaleIconDeviceTwitchingClosedStateElement, ScaleIconDeviceTwitchingClosedStateEvents, JSX.ScaleIconDeviceTwitchingClosedState> = /*@__PURE__*/ createComponent<ScaleIconDeviceTwitchingClosedStateElement, ScaleIconDeviceTwitchingClosedStateEvents, JSX.ScaleIconDeviceTwitchingClosedState>({
     tagName: 'scale-icon-device-twitching-closed-state',
     properties: {
         size: 'size',
@@ -6607,17 +5490,13 @@ export const ScaleIconDeviceTwitchingClosedState: StencilReactComponent<ScaleIco
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceTwitchingClosedStateElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceTwitchingClosedStateEvents,
-    defineCustomElement: defineScaleIconDeviceTwitchingClosedState
+    clientModule: clientComponents.ScaleIconDeviceTwitchingClosedState as StencilReactComponent<ScaleIconDeviceTwitchingClosedStateElement, ScaleIconDeviceTwitchingClosedStateEvents, JSX.ScaleIconDeviceTwitchingClosedState>,
+    serializeShadowRoot
 });
 
 export type ScaleIconDeviceTwitchingOpenStateEvents = NonNullable<unknown>;
 
-export const ScaleIconDeviceTwitchingOpenState: StencilReactComponent<ScaleIconDeviceTwitchingOpenStateElement, ScaleIconDeviceTwitchingOpenStateEvents> = /*@__PURE__*/ createComponent<ScaleIconDeviceTwitchingOpenStateElement, ScaleIconDeviceTwitchingOpenStateEvents>({
+export const ScaleIconDeviceTwitchingOpenState: StencilReactComponent<ScaleIconDeviceTwitchingOpenStateElement, ScaleIconDeviceTwitchingOpenStateEvents, JSX.ScaleIconDeviceTwitchingOpenState> = /*@__PURE__*/ createComponent<ScaleIconDeviceTwitchingOpenStateElement, ScaleIconDeviceTwitchingOpenStateEvents, JSX.ScaleIconDeviceTwitchingOpenState>({
     tagName: 'scale-icon-device-twitching-open-state',
     properties: {
         size: 'size',
@@ -6629,17 +5508,13 @@ export const ScaleIconDeviceTwitchingOpenState: StencilReactComponent<ScaleIconD
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconDeviceTwitchingOpenStateElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconDeviceTwitchingOpenStateEvents,
-    defineCustomElement: defineScaleIconDeviceTwitchingOpenState
+    clientModule: clientComponents.ScaleIconDeviceTwitchingOpenState as StencilReactComponent<ScaleIconDeviceTwitchingOpenStateElement, ScaleIconDeviceTwitchingOpenStateEvents, JSX.ScaleIconDeviceTwitchingOpenState>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeHomeEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeHome: StencilReactComponent<ScaleIconHomeHomeElement, ScaleIconHomeHomeEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeHomeElement, ScaleIconHomeHomeEvents>({
+export const ScaleIconHomeHome: StencilReactComponent<ScaleIconHomeHomeElement, ScaleIconHomeHomeEvents, JSX.ScaleIconHomeHome> = /*@__PURE__*/ createComponent<ScaleIconHomeHomeElement, ScaleIconHomeHomeEvents, JSX.ScaleIconHomeHome>({
     tagName: 'scale-icon-home-home',
     properties: {
         size: 'size',
@@ -6651,17 +5526,13 @@ export const ScaleIconHomeHome: StencilReactComponent<ScaleIconHomeHomeElement,
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeHomeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeHomeEvents,
-    defineCustomElement: defineScaleIconHomeHome
+    clientModule: clientComponents.ScaleIconHomeHome as StencilReactComponent<ScaleIconHomeHomeElement, ScaleIconHomeHomeEvents, JSX.ScaleIconHomeHome>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeInternetAtHomeEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeInternetAtHome: StencilReactComponent<ScaleIconHomeInternetAtHomeElement, ScaleIconHomeInternetAtHomeEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeInternetAtHomeElement, ScaleIconHomeInternetAtHomeEvents>({
+export const ScaleIconHomeInternetAtHome: StencilReactComponent<ScaleIconHomeInternetAtHomeElement, ScaleIconHomeInternetAtHomeEvents, JSX.ScaleIconHomeInternetAtHome> = /*@__PURE__*/ createComponent<ScaleIconHomeInternetAtHomeElement, ScaleIconHomeInternetAtHomeEvents, JSX.ScaleIconHomeInternetAtHome>({
     tagName: 'scale-icon-home-internet-at-home',
     properties: {
         size: 'size',
@@ -6673,17 +5544,13 @@ export const ScaleIconHomeInternetAtHome: StencilReactComponent<ScaleIconHomeInt
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeInternetAtHomeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeInternetAtHomeEvents,
-    defineCustomElement: defineScaleIconHomeInternetAtHome
+    clientModule: clientComponents.ScaleIconHomeInternetAtHome as StencilReactComponent<ScaleIconHomeInternetAtHomeElement, ScaleIconHomeInternetAtHomeEvents, JSX.ScaleIconHomeInternetAtHome>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeIotEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeIot: StencilReactComponent<ScaleIconHomeIotElement, ScaleIconHomeIotEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeIotElement, ScaleIconHomeIotEvents>({
+export const ScaleIconHomeIot: StencilReactComponent<ScaleIconHomeIotElement, ScaleIconHomeIotEvents, JSX.ScaleIconHomeIot> = /*@__PURE__*/ createComponent<ScaleIconHomeIotElement, ScaleIconHomeIotEvents, JSX.ScaleIconHomeIot>({
     tagName: 'scale-icon-home-iot',
     properties: {
         size: 'size',
@@ -6695,17 +5562,13 @@ export const ScaleIconHomeIot: StencilReactComponent<ScaleIconHomeIotElement, Sc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeIotElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeIotEvents,
-    defineCustomElement: defineScaleIconHomeIot
+    clientModule: clientComponents.ScaleIconHomeIot as StencilReactComponent<ScaleIconHomeIotElement, ScaleIconHomeIotEvents, JSX.ScaleIconHomeIot>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeLightBulbEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeLightBulb: StencilReactComponent<ScaleIconHomeLightBulbElement, ScaleIconHomeLightBulbEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeLightBulbElement, ScaleIconHomeLightBulbEvents>({
+export const ScaleIconHomeLightBulb: StencilReactComponent<ScaleIconHomeLightBulbElement, ScaleIconHomeLightBulbEvents, JSX.ScaleIconHomeLightBulb> = /*@__PURE__*/ createComponent<ScaleIconHomeLightBulbElement, ScaleIconHomeLightBulbEvents, JSX.ScaleIconHomeLightBulb>({
     tagName: 'scale-icon-home-light-bulb',
     properties: {
         size: 'size',
@@ -6717,17 +5580,13 @@ export const ScaleIconHomeLightBulb: StencilReactComponent<ScaleIconHomeLightBul
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeLightBulbElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeLightBulbEvents,
-    defineCustomElement: defineScaleIconHomeLightBulb
+    clientModule: clientComponents.ScaleIconHomeLightBulb as StencilReactComponent<ScaleIconHomeLightBulbElement, ScaleIconHomeLightBulbEvents, JSX.ScaleIconHomeLightBulb>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeNetworkSecureEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeNetworkSecure: StencilReactComponent<ScaleIconHomeNetworkSecureElement, ScaleIconHomeNetworkSecureEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeNetworkSecureElement, ScaleIconHomeNetworkSecureEvents>({
+export const ScaleIconHomeNetworkSecure: StencilReactComponent<ScaleIconHomeNetworkSecureElement, ScaleIconHomeNetworkSecureEvents, JSX.ScaleIconHomeNetworkSecure> = /*@__PURE__*/ createComponent<ScaleIconHomeNetworkSecureElement, ScaleIconHomeNetworkSecureEvents, JSX.ScaleIconHomeNetworkSecure>({
     tagName: 'scale-icon-home-network-secure',
     properties: {
         size: 'size',
@@ -6739,17 +5598,13 @@ export const ScaleIconHomeNetworkSecure: StencilReactComponent<ScaleIconHomeNetw
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeNetworkSecureElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeNetworkSecureEvents,
-    defineCustomElement: defineScaleIconHomeNetworkSecure
+    clientModule: clientComponents.ScaleIconHomeNetworkSecure as StencilReactComponent<ScaleIconHomeNetworkSecureElement, ScaleIconHomeNetworkSecureEvents, JSX.ScaleIconHomeNetworkSecure>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeNoWifiEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeNoWifi: StencilReactComponent<ScaleIconHomeNoWifiElement, ScaleIconHomeNoWifiEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeNoWifiElement, ScaleIconHomeNoWifiEvents>({
+export const ScaleIconHomeNoWifi: StencilReactComponent<ScaleIconHomeNoWifiElement, ScaleIconHomeNoWifiEvents, JSX.ScaleIconHomeNoWifi> = /*@__PURE__*/ createComponent<ScaleIconHomeNoWifiElement, ScaleIconHomeNoWifiEvents, JSX.ScaleIconHomeNoWifi>({
     tagName: 'scale-icon-home-no-wifi',
     properties: {
         size: 'size',
@@ -6761,17 +5616,13 @@ export const ScaleIconHomeNoWifi: StencilReactComponent<ScaleIconHomeNoWifiEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeNoWifiElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeNoWifiEvents,
-    defineCustomElement: defineScaleIconHomeNoWifi
+    clientModule: clientComponents.ScaleIconHomeNoWifi as StencilReactComponent<ScaleIconHomeNoWifiElement, ScaleIconHomeNoWifiEvents, JSX.ScaleIconHomeNoWifi>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomePowerSocketEvents = NonNullable<unknown>;
 
-export const ScaleIconHomePowerSocket: StencilReactComponent<ScaleIconHomePowerSocketElement, ScaleIconHomePowerSocketEvents> = /*@__PURE__*/ createComponent<ScaleIconHomePowerSocketElement, ScaleIconHomePowerSocketEvents>({
+export const ScaleIconHomePowerSocket: StencilReactComponent<ScaleIconHomePowerSocketElement, ScaleIconHomePowerSocketEvents, JSX.ScaleIconHomePowerSocket> = /*@__PURE__*/ createComponent<ScaleIconHomePowerSocketElement, ScaleIconHomePowerSocketEvents, JSX.ScaleIconHomePowerSocket>({
     tagName: 'scale-icon-home-power-socket',
     properties: {
         size: 'size',
@@ -6783,17 +5634,13 @@ export const ScaleIconHomePowerSocket: StencilReactComponent<ScaleIconHomePowerS
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomePowerSocketElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomePowerSocketEvents,
-    defineCustomElement: defineScaleIconHomePowerSocket
+    clientModule: clientComponents.ScaleIconHomePowerSocket as StencilReactComponent<ScaleIconHomePowerSocketElement, ScaleIconHomePowerSocketEvents, JSX.ScaleIconHomePowerSocket>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomePreferredWifiEvents = NonNullable<unknown>;
 
-export const ScaleIconHomePreferredWifi: StencilReactComponent<ScaleIconHomePreferredWifiElement, ScaleIconHomePreferredWifiEvents> = /*@__PURE__*/ createComponent<ScaleIconHomePreferredWifiElement, ScaleIconHomePreferredWifiEvents>({
+export const ScaleIconHomePreferredWifi: StencilReactComponent<ScaleIconHomePreferredWifiElement, ScaleIconHomePreferredWifiEvents, JSX.ScaleIconHomePreferredWifi> = /*@__PURE__*/ createComponent<ScaleIconHomePreferredWifiElement, ScaleIconHomePreferredWifiEvents, JSX.ScaleIconHomePreferredWifi>({
     tagName: 'scale-icon-home-preferred-wifi',
     properties: {
         size: 'size',
@@ -6805,17 +5652,13 @@ export const ScaleIconHomePreferredWifi: StencilReactComponent<ScaleIconHomePref
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomePreferredWifiElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomePreferredWifiEvents,
-    defineCustomElement: defineScaleIconHomePreferredWifi
+    clientModule: clientComponents.ScaleIconHomePreferredWifi as StencilReactComponent<ScaleIconHomePreferredWifiElement, ScaleIconHomePreferredWifiEvents, JSX.ScaleIconHomePreferredWifi>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeReducedWifiEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeReducedWifi: StencilReactComponent<ScaleIconHomeReducedWifiElement, ScaleIconHomeReducedWifiEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeReducedWifiElement, ScaleIconHomeReducedWifiEvents>({
+export const ScaleIconHomeReducedWifi: StencilReactComponent<ScaleIconHomeReducedWifiElement, ScaleIconHomeReducedWifiEvents, JSX.ScaleIconHomeReducedWifi> = /*@__PURE__*/ createComponent<ScaleIconHomeReducedWifiElement, ScaleIconHomeReducedWifiEvents, JSX.ScaleIconHomeReducedWifi>({
     tagName: 'scale-icon-home-reduced-wifi',
     properties: {
         size: 'size',
@@ -6827,17 +5670,13 @@ export const ScaleIconHomeReducedWifi: StencilReactComponent<ScaleIconHomeReduce
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeReducedWifiElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeReducedWifiEvents,
-    defineCustomElement: defineScaleIconHomeReducedWifi
+    clientModule: clientComponents.ScaleIconHomeReducedWifi as StencilReactComponent<ScaleIconHomeReducedWifiElement, ScaleIconHomeReducedWifiEvents, JSX.ScaleIconHomeReducedWifi>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeSlowWifiEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeSlowWifi: StencilReactComponent<ScaleIconHomeSlowWifiElement, ScaleIconHomeSlowWifiEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeSlowWifiElement, ScaleIconHomeSlowWifiEvents>({
+export const ScaleIconHomeSlowWifi: StencilReactComponent<ScaleIconHomeSlowWifiElement, ScaleIconHomeSlowWifiEvents, JSX.ScaleIconHomeSlowWifi> = /*@__PURE__*/ createComponent<ScaleIconHomeSlowWifiElement, ScaleIconHomeSlowWifiEvents, JSX.ScaleIconHomeSlowWifi>({
     tagName: 'scale-icon-home-slow-wifi',
     properties: {
         size: 'size',
@@ -6849,17 +5688,13 @@ export const ScaleIconHomeSlowWifi: StencilReactComponent<ScaleIconHomeSlowWifiE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeSlowWifiElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeSlowWifiEvents,
-    defineCustomElement: defineScaleIconHomeSlowWifi
+    clientModule: clientComponents.ScaleIconHomeSlowWifi as StencilReactComponent<ScaleIconHomeSlowWifiElement, ScaleIconHomeSlowWifiEvents, JSX.ScaleIconHomeSlowWifi>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeSmarthomeEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeSmarthome: StencilReactComponent<ScaleIconHomeSmarthomeElement, ScaleIconHomeSmarthomeEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeSmarthomeElement, ScaleIconHomeSmarthomeEvents>({
+export const ScaleIconHomeSmarthome: StencilReactComponent<ScaleIconHomeSmarthomeElement, ScaleIconHomeSmarthomeEvents, JSX.ScaleIconHomeSmarthome> = /*@__PURE__*/ createComponent<ScaleIconHomeSmarthomeElement, ScaleIconHomeSmarthomeEvents, JSX.ScaleIconHomeSmarthome>({
     tagName: 'scale-icon-home-smarthome',
     properties: {
         size: 'size',
@@ -6871,17 +5706,13 @@ export const ScaleIconHomeSmarthome: StencilReactComponent<ScaleIconHomeSmarthom
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeSmarthomeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeSmarthomeEvents,
-    defineCustomElement: defineScaleIconHomeSmarthome
+    clientModule: clientComponents.ScaleIconHomeSmarthome as StencilReactComponent<ScaleIconHomeSmarthomeElement, ScaleIconHomeSmarthomeEvents, JSX.ScaleIconHomeSmarthome>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeUnableToConnectToRouterEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeUnableToConnectToRouter: StencilReactComponent<ScaleIconHomeUnableToConnectToRouterElement, ScaleIconHomeUnableToConnectToRouterEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeUnableToConnectToRouterElement, ScaleIconHomeUnableToConnectToRouterEvents>({
+export const ScaleIconHomeUnableToConnectToRouter: StencilReactComponent<ScaleIconHomeUnableToConnectToRouterElement, ScaleIconHomeUnableToConnectToRouterEvents, JSX.ScaleIconHomeUnableToConnectToRouter> = /*@__PURE__*/ createComponent<ScaleIconHomeUnableToConnectToRouterElement, ScaleIconHomeUnableToConnectToRouterEvents, JSX.ScaleIconHomeUnableToConnectToRouter>({
     tagName: 'scale-icon-home-unable-to-connect-to-router',
     properties: {
         size: 'size',
@@ -6893,17 +5724,13 @@ export const ScaleIconHomeUnableToConnectToRouter: StencilReactComponent<ScaleIc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeUnableToConnectToRouterElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeUnableToConnectToRouterEvents,
-    defineCustomElement: defineScaleIconHomeUnableToConnectToRouter
+    clientModule: clientComponents.ScaleIconHomeUnableToConnectToRouter as StencilReactComponent<ScaleIconHomeUnableToConnectToRouterElement, ScaleIconHomeUnableToConnectToRouterEvents, JSX.ScaleIconHomeUnableToConnectToRouter>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeWifiEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeWifi: StencilReactComponent<ScaleIconHomeWifiElement, ScaleIconHomeWifiEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiElement, ScaleIconHomeWifiEvents>({
+export const ScaleIconHomeWifi: StencilReactComponent<ScaleIconHomeWifiElement, ScaleIconHomeWifiEvents, JSX.ScaleIconHomeWifi> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiElement, ScaleIconHomeWifiEvents, JSX.ScaleIconHomeWifi>({
     tagName: 'scale-icon-home-wifi',
     properties: {
         size: 'size',
@@ -6915,17 +5742,13 @@ export const ScaleIconHomeWifi: StencilReactComponent<ScaleIconHomeWifiElement,
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeWifiElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeWifiEvents,
-    defineCustomElement: defineScaleIconHomeWifi
+    clientModule: clientComponents.ScaleIconHomeWifi as StencilReactComponent<ScaleIconHomeWifiElement, ScaleIconHomeWifiEvents, JSX.ScaleIconHomeWifi>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeWifiConnectedEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeWifiConnected: StencilReactComponent<ScaleIconHomeWifiConnectedElement, ScaleIconHomeWifiConnectedEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiConnectedElement, ScaleIconHomeWifiConnectedEvents>({
+export const ScaleIconHomeWifiConnected: StencilReactComponent<ScaleIconHomeWifiConnectedElement, ScaleIconHomeWifiConnectedEvents, JSX.ScaleIconHomeWifiConnected> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiConnectedElement, ScaleIconHomeWifiConnectedEvents, JSX.ScaleIconHomeWifiConnected>({
     tagName: 'scale-icon-home-wifi-connected',
     properties: {
         size: 'size',
@@ -6937,17 +5760,13 @@ export const ScaleIconHomeWifiConnected: StencilReactComponent<ScaleIconHomeWifi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeWifiConnectedElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeWifiConnectedEvents,
-    defineCustomElement: defineScaleIconHomeWifiConnected
+    clientModule: clientComponents.ScaleIconHomeWifiConnected as StencilReactComponent<ScaleIconHomeWifiConnectedElement, ScaleIconHomeWifiConnectedEvents, JSX.ScaleIconHomeWifiConnected>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeWifiConnectionErrorEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeWifiConnectionError: StencilReactComponent<ScaleIconHomeWifiConnectionErrorElement, ScaleIconHomeWifiConnectionErrorEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiConnectionErrorElement, ScaleIconHomeWifiConnectionErrorEvents>({
+export const ScaleIconHomeWifiConnectionError: StencilReactComponent<ScaleIconHomeWifiConnectionErrorElement, ScaleIconHomeWifiConnectionErrorEvents, JSX.ScaleIconHomeWifiConnectionError> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiConnectionErrorElement, ScaleIconHomeWifiConnectionErrorEvents, JSX.ScaleIconHomeWifiConnectionError>({
     tagName: 'scale-icon-home-wifi-connection-error',
     properties: {
         size: 'size',
@@ -6959,17 +5778,13 @@ export const ScaleIconHomeWifiConnectionError: StencilReactComponent<ScaleIconHo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeWifiConnectionErrorElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeWifiConnectionErrorEvents,
-    defineCustomElement: defineScaleIconHomeWifiConnectionError
+    clientModule: clientComponents.ScaleIconHomeWifiConnectionError as StencilReactComponent<ScaleIconHomeWifiConnectionErrorElement, ScaleIconHomeWifiConnectionErrorEvents, JSX.ScaleIconHomeWifiConnectionError>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeWifiManualLoginEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeWifiManualLogin: StencilReactComponent<ScaleIconHomeWifiManualLoginElement, ScaleIconHomeWifiManualLoginEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiManualLoginElement, ScaleIconHomeWifiManualLoginEvents>({
+export const ScaleIconHomeWifiManualLogin: StencilReactComponent<ScaleIconHomeWifiManualLoginElement, ScaleIconHomeWifiManualLoginEvents, JSX.ScaleIconHomeWifiManualLogin> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiManualLoginElement, ScaleIconHomeWifiManualLoginEvents, JSX.ScaleIconHomeWifiManualLogin>({
     tagName: 'scale-icon-home-wifi-manual-login',
     properties: {
         size: 'size',
@@ -6981,17 +5796,13 @@ export const ScaleIconHomeWifiManualLogin: StencilReactComponent<ScaleIconHomeWi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeWifiManualLoginElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeWifiManualLoginEvents,
-    defineCustomElement: defineScaleIconHomeWifiManualLogin
+    clientModule: clientComponents.ScaleIconHomeWifiManualLogin as StencilReactComponent<ScaleIconHomeWifiManualLoginElement, ScaleIconHomeWifiManualLoginEvents, JSX.ScaleIconHomeWifiManualLogin>,
+    serializeShadowRoot
 });
 
 export type ScaleIconHomeWifiNoWiredInternetEvents = NonNullable<unknown>;
 
-export const ScaleIconHomeWifiNoWiredInternet: StencilReactComponent<ScaleIconHomeWifiNoWiredInternetElement, ScaleIconHomeWifiNoWiredInternetEvents> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiNoWiredInternetElement, ScaleIconHomeWifiNoWiredInternetEvents>({
+export const ScaleIconHomeWifiNoWiredInternet: StencilReactComponent<ScaleIconHomeWifiNoWiredInternetElement, ScaleIconHomeWifiNoWiredInternetEvents, JSX.ScaleIconHomeWifiNoWiredInternet> = /*@__PURE__*/ createComponent<ScaleIconHomeWifiNoWiredInternetElement, ScaleIconHomeWifiNoWiredInternetEvents, JSX.ScaleIconHomeWifiNoWiredInternet>({
     tagName: 'scale-icon-home-wifi-no-wired-internet',
     properties: {
         size: 'size',
@@ -7003,17 +5814,13 @@ export const ScaleIconHomeWifiNoWiredInternet: StencilReactComponent<ScaleIconHo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconHomeWifiNoWiredInternetElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconHomeWifiNoWiredInternetEvents,
-    defineCustomElement: defineScaleIconHomeWifiNoWiredInternet
+    clientModule: clientComponents.ScaleIconHomeWifiNoWiredInternet as StencilReactComponent<ScaleIconHomeWifiNoWiredInternetElement, ScaleIconHomeWifiNoWiredInternetEvents, JSX.ScaleIconHomeWifiNoWiredInternet>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationCircleTopUpEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationCircleTopUp: StencilReactComponent<ScaleIconNavigationCircleTopUpElement, ScaleIconNavigationCircleTopUpEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationCircleTopUpElement, ScaleIconNavigationCircleTopUpEvents>({
+export const ScaleIconNavigationCircleTopUp: StencilReactComponent<ScaleIconNavigationCircleTopUpElement, ScaleIconNavigationCircleTopUpEvents, JSX.ScaleIconNavigationCircleTopUp> = /*@__PURE__*/ createComponent<ScaleIconNavigationCircleTopUpElement, ScaleIconNavigationCircleTopUpEvents, JSX.ScaleIconNavigationCircleTopUp>({
     tagName: 'scale-icon-navigation-circle-top-up',
     properties: {
         size: 'size',
@@ -7025,17 +5832,13 @@ export const ScaleIconNavigationCircleTopUp: StencilReactComponent<ScaleIconNavi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationCircleTopUpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationCircleTopUpEvents,
-    defineCustomElement: defineScaleIconNavigationCircleTopUp
+    clientModule: clientComponents.ScaleIconNavigationCircleTopUp as StencilReactComponent<ScaleIconNavigationCircleTopUpElement, ScaleIconNavigationCircleTopUpEvents, JSX.ScaleIconNavigationCircleTopUp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationCollapseDownEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationCollapseDown: StencilReactComponent<ScaleIconNavigationCollapseDownElement, ScaleIconNavigationCollapseDownEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationCollapseDownElement, ScaleIconNavigationCollapseDownEvents>({
+export const ScaleIconNavigationCollapseDown: StencilReactComponent<ScaleIconNavigationCollapseDownElement, ScaleIconNavigationCollapseDownEvents, JSX.ScaleIconNavigationCollapseDown> = /*@__PURE__*/ createComponent<ScaleIconNavigationCollapseDownElement, ScaleIconNavigationCollapseDownEvents, JSX.ScaleIconNavigationCollapseDown>({
     tagName: 'scale-icon-navigation-collapse-down',
     properties: {
         size: 'size',
@@ -7047,17 +5850,13 @@ export const ScaleIconNavigationCollapseDown: StencilReactComponent<ScaleIconNav
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationCollapseDownElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationCollapseDownEvents,
-    defineCustomElement: defineScaleIconNavigationCollapseDown
+    clientModule: clientComponents.ScaleIconNavigationCollapseDown as StencilReactComponent<ScaleIconNavigationCollapseDownElement, ScaleIconNavigationCollapseDownEvents, JSX.ScaleIconNavigationCollapseDown>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationCollapseUpEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationCollapseUp: StencilReactComponent<ScaleIconNavigationCollapseUpElement, ScaleIconNavigationCollapseUpEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationCollapseUpElement, ScaleIconNavigationCollapseUpEvents>({
+export const ScaleIconNavigationCollapseUp: StencilReactComponent<ScaleIconNavigationCollapseUpElement, ScaleIconNavigationCollapseUpEvents, JSX.ScaleIconNavigationCollapseUp> = /*@__PURE__*/ createComponent<ScaleIconNavigationCollapseUpElement, ScaleIconNavigationCollapseUpEvents, JSX.ScaleIconNavigationCollapseUp>({
     tagName: 'scale-icon-navigation-collapse-up',
     properties: {
         size: 'size',
@@ -7069,17 +5868,13 @@ export const ScaleIconNavigationCollapseUp: StencilReactComponent<ScaleIconNavig
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationCollapseUpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationCollapseUpEvents,
-    defineCustomElement: defineScaleIconNavigationCollapseUp
+    clientModule: clientComponents.ScaleIconNavigationCollapseUp as StencilReactComponent<ScaleIconNavigationCollapseUpElement, ScaleIconNavigationCollapseUpEvents, JSX.ScaleIconNavigationCollapseUp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationDoubleLeftEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationDoubleLeft: StencilReactComponent<ScaleIconNavigationDoubleLeftElement, ScaleIconNavigationDoubleLeftEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationDoubleLeftElement, ScaleIconNavigationDoubleLeftEvents>({
+export const ScaleIconNavigationDoubleLeft: StencilReactComponent<ScaleIconNavigationDoubleLeftElement, ScaleIconNavigationDoubleLeftEvents, JSX.ScaleIconNavigationDoubleLeft> = /*@__PURE__*/ createComponent<ScaleIconNavigationDoubleLeftElement, ScaleIconNavigationDoubleLeftEvents, JSX.ScaleIconNavigationDoubleLeft>({
     tagName: 'scale-icon-navigation-double-left',
     properties: {
         size: 'size',
@@ -7091,17 +5886,13 @@ export const ScaleIconNavigationDoubleLeft: StencilReactComponent<ScaleIconNavig
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationDoubleLeftElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationDoubleLeftEvents,
-    defineCustomElement: defineScaleIconNavigationDoubleLeft
+    clientModule: clientComponents.ScaleIconNavigationDoubleLeft as StencilReactComponent<ScaleIconNavigationDoubleLeftElement, ScaleIconNavigationDoubleLeftEvents, JSX.ScaleIconNavigationDoubleLeft>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationDoubleRightEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationDoubleRight: StencilReactComponent<ScaleIconNavigationDoubleRightElement, ScaleIconNavigationDoubleRightEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationDoubleRightElement, ScaleIconNavigationDoubleRightEvents>({
+export const ScaleIconNavigationDoubleRight: StencilReactComponent<ScaleIconNavigationDoubleRightElement, ScaleIconNavigationDoubleRightEvents, JSX.ScaleIconNavigationDoubleRight> = /*@__PURE__*/ createComponent<ScaleIconNavigationDoubleRightElement, ScaleIconNavigationDoubleRightEvents, JSX.ScaleIconNavigationDoubleRight>({
     tagName: 'scale-icon-navigation-double-right',
     properties: {
         size: 'size',
@@ -7113,17 +5904,13 @@ export const ScaleIconNavigationDoubleRight: StencilReactComponent<ScaleIconNavi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationDoubleRightElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationDoubleRightEvents,
-    defineCustomElement: defineScaleIconNavigationDoubleRight
+    clientModule: clientComponents.ScaleIconNavigationDoubleRight as StencilReactComponent<ScaleIconNavigationDoubleRightElement, ScaleIconNavigationDoubleRightEvents, JSX.ScaleIconNavigationDoubleRight>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationExternalLinkEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationExternalLink: StencilReactComponent<ScaleIconNavigationExternalLinkElement, ScaleIconNavigationExternalLinkEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationExternalLinkElement, ScaleIconNavigationExternalLinkEvents>({
+export const ScaleIconNavigationExternalLink: StencilReactComponent<ScaleIconNavigationExternalLinkElement, ScaleIconNavigationExternalLinkEvents, JSX.ScaleIconNavigationExternalLink> = /*@__PURE__*/ createComponent<ScaleIconNavigationExternalLinkElement, ScaleIconNavigationExternalLinkEvents, JSX.ScaleIconNavigationExternalLink>({
     tagName: 'scale-icon-navigation-external-link',
     properties: {
         size: 'size',
@@ -7135,17 +5922,13 @@ export const ScaleIconNavigationExternalLink: StencilReactComponent<ScaleIconNav
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationExternalLinkElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationExternalLinkEvents,
-    defineCustomElement: defineScaleIconNavigationExternalLink
+    clientModule: clientComponents.ScaleIconNavigationExternalLink as StencilReactComponent<ScaleIconNavigationExternalLinkElement, ScaleIconNavigationExternalLinkEvents, JSX.ScaleIconNavigationExternalLink>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationInternalLinkEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationInternalLink: StencilReactComponent<ScaleIconNavigationInternalLinkElement, ScaleIconNavigationInternalLinkEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationInternalLinkElement, ScaleIconNavigationInternalLinkEvents>({
+export const ScaleIconNavigationInternalLink: StencilReactComponent<ScaleIconNavigationInternalLinkElement, ScaleIconNavigationInternalLinkEvents, JSX.ScaleIconNavigationInternalLink> = /*@__PURE__*/ createComponent<ScaleIconNavigationInternalLinkElement, ScaleIconNavigationInternalLinkEvents, JSX.ScaleIconNavigationInternalLink>({
     tagName: 'scale-icon-navigation-internal-link',
     properties: {
         size: 'size',
@@ -7157,17 +5940,13 @@ export const ScaleIconNavigationInternalLink: StencilReactComponent<ScaleIconNav
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationInternalLinkElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationInternalLinkEvents,
-    defineCustomElement: defineScaleIconNavigationInternalLink
+    clientModule: clientComponents.ScaleIconNavigationInternalLink as StencilReactComponent<ScaleIconNavigationInternalLinkElement, ScaleIconNavigationInternalLinkEvents, JSX.ScaleIconNavigationInternalLink>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationLeftEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationLeft: StencilReactComponent<ScaleIconNavigationLeftElement, ScaleIconNavigationLeftEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationLeftElement, ScaleIconNavigationLeftEvents>({
+export const ScaleIconNavigationLeft: StencilReactComponent<ScaleIconNavigationLeftElement, ScaleIconNavigationLeftEvents, JSX.ScaleIconNavigationLeft> = /*@__PURE__*/ createComponent<ScaleIconNavigationLeftElement, ScaleIconNavigationLeftEvents, JSX.ScaleIconNavigationLeft>({
     tagName: 'scale-icon-navigation-left',
     properties: {
         size: 'size',
@@ -7179,17 +5958,13 @@ export const ScaleIconNavigationLeft: StencilReactComponent<ScaleIconNavigationL
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationLeftElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationLeftEvents,
-    defineCustomElement: defineScaleIconNavigationLeft
+    clientModule: clientComponents.ScaleIconNavigationLeft as StencilReactComponent<ScaleIconNavigationLeftElement, ScaleIconNavigationLeftEvents, JSX.ScaleIconNavigationLeft>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationLeftCondensedEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationLeftCondensed: StencilReactComponent<ScaleIconNavigationLeftCondensedElement, ScaleIconNavigationLeftCondensedEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationLeftCondensedElement, ScaleIconNavigationLeftCondensedEvents>({
+export const ScaleIconNavigationLeftCondensed: StencilReactComponent<ScaleIconNavigationLeftCondensedElement, ScaleIconNavigationLeftCondensedEvents, JSX.ScaleIconNavigationLeftCondensed> = /*@__PURE__*/ createComponent<ScaleIconNavigationLeftCondensedElement, ScaleIconNavigationLeftCondensedEvents, JSX.ScaleIconNavigationLeftCondensed>({
     tagName: 'scale-icon-navigation-left-condensed',
     properties: {
         size: 'size',
@@ -7201,17 +5976,13 @@ export const ScaleIconNavigationLeftCondensed: StencilReactComponent<ScaleIconNa
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationLeftCondensedElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationLeftCondensedEvents,
-    defineCustomElement: defineScaleIconNavigationLeftCondensed
+    clientModule: clientComponents.ScaleIconNavigationLeftCondensed as StencilReactComponent<ScaleIconNavigationLeftCondensedElement, ScaleIconNavigationLeftCondensedEvents, JSX.ScaleIconNavigationLeftCondensed>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationLocationEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationLocation: StencilReactComponent<ScaleIconNavigationLocationElement, ScaleIconNavigationLocationEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationLocationElement, ScaleIconNavigationLocationEvents>({
+export const ScaleIconNavigationLocation: StencilReactComponent<ScaleIconNavigationLocationElement, ScaleIconNavigationLocationEvents, JSX.ScaleIconNavigationLocation> = /*@__PURE__*/ createComponent<ScaleIconNavigationLocationElement, ScaleIconNavigationLocationEvents, JSX.ScaleIconNavigationLocation>({
     tagName: 'scale-icon-navigation-location',
     properties: {
         size: 'size',
@@ -7223,17 +5994,13 @@ export const ScaleIconNavigationLocation: StencilReactComponent<ScaleIconNavigat
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationLocationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationLocationEvents,
-    defineCustomElement: defineScaleIconNavigationLocation
+    clientModule: clientComponents.ScaleIconNavigationLocation as StencilReactComponent<ScaleIconNavigationLocationElement, ScaleIconNavigationLocationEvents, JSX.ScaleIconNavigationLocation>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationMapEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationMap: StencilReactComponent<ScaleIconNavigationMapElement, ScaleIconNavigationMapEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationMapElement, ScaleIconNavigationMapEvents>({
+export const ScaleIconNavigationMap: StencilReactComponent<ScaleIconNavigationMapElement, ScaleIconNavigationMapEvents, JSX.ScaleIconNavigationMap> = /*@__PURE__*/ createComponent<ScaleIconNavigationMapElement, ScaleIconNavigationMapEvents, JSX.ScaleIconNavigationMap>({
     tagName: 'scale-icon-navigation-map',
     properties: {
         size: 'size',
@@ -7245,17 +6012,13 @@ export const ScaleIconNavigationMap: StencilReactComponent<ScaleIconNavigationMa
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationMapElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationMapEvents,
-    defineCustomElement: defineScaleIconNavigationMap
+    clientModule: clientComponents.ScaleIconNavigationMap as StencilReactComponent<ScaleIconNavigationMapElement, ScaleIconNavigationMapEvents, JSX.ScaleIconNavigationMap>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationMyLocationEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationMyLocation: StencilReactComponent<ScaleIconNavigationMyLocationElement, ScaleIconNavigationMyLocationEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationMyLocationElement, ScaleIconNavigationMyLocationEvents>({
+export const ScaleIconNavigationMyLocation: StencilReactComponent<ScaleIconNavigationMyLocationElement, ScaleIconNavigationMyLocationEvents, JSX.ScaleIconNavigationMyLocation> = /*@__PURE__*/ createComponent<ScaleIconNavigationMyLocationElement, ScaleIconNavigationMyLocationEvents, JSX.ScaleIconNavigationMyLocation>({
     tagName: 'scale-icon-navigation-my-location',
     properties: {
         size: 'size',
@@ -7267,17 +6030,13 @@ export const ScaleIconNavigationMyLocation: StencilReactComponent<ScaleIconNavig
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationMyLocationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationMyLocationEvents,
-    defineCustomElement: defineScaleIconNavigationMyLocation
+    clientModule: clientComponents.ScaleIconNavigationMyLocation as StencilReactComponent<ScaleIconNavigationMyLocationElement, ScaleIconNavigationMyLocationEvents, JSX.ScaleIconNavigationMyLocation>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationRightEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationRight: StencilReactComponent<ScaleIconNavigationRightElement, ScaleIconNavigationRightEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationRightElement, ScaleIconNavigationRightEvents>({
+export const ScaleIconNavigationRight: StencilReactComponent<ScaleIconNavigationRightElement, ScaleIconNavigationRightEvents, JSX.ScaleIconNavigationRight> = /*@__PURE__*/ createComponent<ScaleIconNavigationRightElement, ScaleIconNavigationRightEvents, JSX.ScaleIconNavigationRight>({
     tagName: 'scale-icon-navigation-right',
     properties: {
         size: 'size',
@@ -7289,17 +6048,13 @@ export const ScaleIconNavigationRight: StencilReactComponent<ScaleIconNavigation
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationRightElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationRightEvents,
-    defineCustomElement: defineScaleIconNavigationRight
+    clientModule: clientComponents.ScaleIconNavigationRight as StencilReactComponent<ScaleIconNavigationRightElement, ScaleIconNavigationRightEvents, JSX.ScaleIconNavigationRight>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationRightCondensedEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationRightCondensed: StencilReactComponent<ScaleIconNavigationRightCondensedElement, ScaleIconNavigationRightCondensedEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationRightCondensedElement, ScaleIconNavigationRightCondensedEvents>({
+export const ScaleIconNavigationRightCondensed: StencilReactComponent<ScaleIconNavigationRightCondensedElement, ScaleIconNavigationRightCondensedEvents, JSX.ScaleIconNavigationRightCondensed> = /*@__PURE__*/ createComponent<ScaleIconNavigationRightCondensedElement, ScaleIconNavigationRightCondensedEvents, JSX.ScaleIconNavigationRightCondensed>({
     tagName: 'scale-icon-navigation-right-condensed',
     properties: {
         size: 'size',
@@ -7311,17 +6066,13 @@ export const ScaleIconNavigationRightCondensed: StencilReactComponent<ScaleIconN
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationRightCondensedElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationRightCondensedEvents,
-    defineCustomElement: defineScaleIconNavigationRightCondensed
+    clientModule: clientComponents.ScaleIconNavigationRightCondensed as StencilReactComponent<ScaleIconNavigationRightCondensedElement, ScaleIconNavigationRightCondensedEvents, JSX.ScaleIconNavigationRightCondensed>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationStartEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationStart: StencilReactComponent<ScaleIconNavigationStartElement, ScaleIconNavigationStartEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationStartElement, ScaleIconNavigationStartEvents>({
+export const ScaleIconNavigationStart: StencilReactComponent<ScaleIconNavigationStartElement, ScaleIconNavigationStartEvents, JSX.ScaleIconNavigationStart> = /*@__PURE__*/ createComponent<ScaleIconNavigationStartElement, ScaleIconNavigationStartEvents, JSX.ScaleIconNavigationStart>({
     tagName: 'scale-icon-navigation-start',
     properties: {
         size: 'size',
@@ -7333,17 +6084,13 @@ export const ScaleIconNavigationStart: StencilReactComponent<ScaleIconNavigation
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationStartElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationStartEvents,
-    defineCustomElement: defineScaleIconNavigationStart
+    clientModule: clientComponents.ScaleIconNavigationStart as StencilReactComponent<ScaleIconNavigationStartElement, ScaleIconNavigationStartEvents, JSX.ScaleIconNavigationStart>,
+    serializeShadowRoot
 });
 
 export type ScaleIconNavigationTopUpEvents = NonNullable<unknown>;
 
-export const ScaleIconNavigationTopUp: StencilReactComponent<ScaleIconNavigationTopUpElement, ScaleIconNavigationTopUpEvents> = /*@__PURE__*/ createComponent<ScaleIconNavigationTopUpElement, ScaleIconNavigationTopUpEvents>({
+export const ScaleIconNavigationTopUp: StencilReactComponent<ScaleIconNavigationTopUpElement, ScaleIconNavigationTopUpEvents, JSX.ScaleIconNavigationTopUp> = /*@__PURE__*/ createComponent<ScaleIconNavigationTopUpElement, ScaleIconNavigationTopUpEvents, JSX.ScaleIconNavigationTopUp>({
     tagName: 'scale-icon-navigation-top-up',
     properties: {
         size: 'size',
@@ -7355,17 +6102,13 @@ export const ScaleIconNavigationTopUp: StencilReactComponent<ScaleIconNavigation
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconNavigationTopUpElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconNavigationTopUpEvents,
-    defineCustomElement: defineScaleIconNavigationTopUp
+    clientModule: clientComponents.ScaleIconNavigationTopUp as StencilReactComponent<ScaleIconNavigationTopUpElement, ScaleIconNavigationTopUpEvents, JSX.ScaleIconNavigationTopUp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconProcessOrderStatusEvents = NonNullable<unknown>;
 
-export const ScaleIconProcessOrderStatus: StencilReactComponent<ScaleIconProcessOrderStatusElement, ScaleIconProcessOrderStatusEvents> = /*@__PURE__*/ createComponent<ScaleIconProcessOrderStatusElement, ScaleIconProcessOrderStatusEvents>({
+export const ScaleIconProcessOrderStatus: StencilReactComponent<ScaleIconProcessOrderStatusElement, ScaleIconProcessOrderStatusEvents, JSX.ScaleIconProcessOrderStatus> = /*@__PURE__*/ createComponent<ScaleIconProcessOrderStatusElement, ScaleIconProcessOrderStatusEvents, JSX.ScaleIconProcessOrderStatus>({
     tagName: 'scale-icon-process-order-status',
     properties: {
         size: 'size',
@@ -7377,17 +6120,13 @@ export const ScaleIconProcessOrderStatus: StencilReactComponent<ScaleIconProcess
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconProcessOrderStatusElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconProcessOrderStatusEvents,
-    defineCustomElement: defineScaleIconProcessOrderStatus
+    clientModule: clientComponents.ScaleIconProcessOrderStatus as StencilReactComponent<ScaleIconProcessOrderStatusElement, ScaleIconProcessOrderStatusEvents, JSX.ScaleIconProcessOrderStatus>,
+    serializeShadowRoot
 });
 
 export type ScaleIconProcessProcessingEvents = NonNullable<unknown>;
 
-export const ScaleIconProcessProcessing: StencilReactComponent<ScaleIconProcessProcessingElement, ScaleIconProcessProcessingEvents> = /*@__PURE__*/ createComponent<ScaleIconProcessProcessingElement, ScaleIconProcessProcessingEvents>({
+export const ScaleIconProcessProcessing: StencilReactComponent<ScaleIconProcessProcessingElement, ScaleIconProcessProcessingEvents, JSX.ScaleIconProcessProcessing> = /*@__PURE__*/ createComponent<ScaleIconProcessProcessingElement, ScaleIconProcessProcessingEvents, JSX.ScaleIconProcessProcessing>({
     tagName: 'scale-icon-process-processing',
     properties: {
         size: 'size',
@@ -7399,17 +6138,13 @@ export const ScaleIconProcessProcessing: StencilReactComponent<ScaleIconProcessP
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconProcessProcessingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconProcessProcessingEvents,
-    defineCustomElement: defineScaleIconProcessProcessing
+    clientModule: clientComponents.ScaleIconProcessProcessing as StencilReactComponent<ScaleIconProcessProcessingElement, ScaleIconProcessProcessingEvents, JSX.ScaleIconProcessProcessing>,
+    serializeShadowRoot
 });
 
 export type ScaleIconProcessSepaTransactionEvents = NonNullable<unknown>;
 
-export const ScaleIconProcessSepaTransaction: StencilReactComponent<ScaleIconProcessSepaTransactionElement, ScaleIconProcessSepaTransactionEvents> = /*@__PURE__*/ createComponent<ScaleIconProcessSepaTransactionElement, ScaleIconProcessSepaTransactionEvents>({
+export const ScaleIconProcessSepaTransaction: StencilReactComponent<ScaleIconProcessSepaTransactionElement, ScaleIconProcessSepaTransactionEvents, JSX.ScaleIconProcessSepaTransaction> = /*@__PURE__*/ createComponent<ScaleIconProcessSepaTransactionElement, ScaleIconProcessSepaTransactionEvents, JSX.ScaleIconProcessSepaTransaction>({
     tagName: 'scale-icon-process-sepa-transaction',
     properties: {
         size: 'size',
@@ -7421,17 +6156,13 @@ export const ScaleIconProcessSepaTransaction: StencilReactComponent<ScaleIconPro
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconProcessSepaTransactionElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconProcessSepaTransactionEvents,
-    defineCustomElement: defineScaleIconProcessSepaTransaction
+    clientModule: clientComponents.ScaleIconProcessSepaTransaction as StencilReactComponent<ScaleIconProcessSepaTransactionElement, ScaleIconProcessSepaTransactionEvents, JSX.ScaleIconProcessSepaTransaction>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceDevicesServiceEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceDevicesService: StencilReactComponent<ScaleIconServiceDevicesServiceElement, ScaleIconServiceDevicesServiceEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceDevicesServiceElement, ScaleIconServiceDevicesServiceEvents>({
+export const ScaleIconServiceDevicesService: StencilReactComponent<ScaleIconServiceDevicesServiceElement, ScaleIconServiceDevicesServiceEvents, JSX.ScaleIconServiceDevicesService> = /*@__PURE__*/ createComponent<ScaleIconServiceDevicesServiceElement, ScaleIconServiceDevicesServiceEvents, JSX.ScaleIconServiceDevicesService>({
     tagName: 'scale-icon-service-devices-service',
     properties: {
         size: 'size',
@@ -7443,17 +6174,13 @@ export const ScaleIconServiceDevicesService: StencilReactComponent<ScaleIconServ
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceDevicesServiceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceDevicesServiceEvents,
-    defineCustomElement: defineScaleIconServiceDevicesService
+    clientModule: clientComponents.ScaleIconServiceDevicesService as StencilReactComponent<ScaleIconServiceDevicesServiceElement, ScaleIconServiceDevicesServiceEvents, JSX.ScaleIconServiceDevicesService>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceMaintananceEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceMaintanance: StencilReactComponent<ScaleIconServiceMaintananceElement, ScaleIconServiceMaintananceEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceMaintananceElement, ScaleIconServiceMaintananceEvents>({
+export const ScaleIconServiceMaintanance: StencilReactComponent<ScaleIconServiceMaintananceElement, ScaleIconServiceMaintananceEvents, JSX.ScaleIconServiceMaintanance> = /*@__PURE__*/ createComponent<ScaleIconServiceMaintananceElement, ScaleIconServiceMaintananceEvents, JSX.ScaleIconServiceMaintanance>({
     tagName: 'scale-icon-service-maintanance',
     properties: {
         size: 'size',
@@ -7465,17 +6192,13 @@ export const ScaleIconServiceMaintanance: StencilReactComponent<ScaleIconService
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceMaintananceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceMaintananceEvents,
-    defineCustomElement: defineScaleIconServiceMaintanance
+    clientModule: clientComponents.ScaleIconServiceMaintanance as StencilReactComponent<ScaleIconServiceMaintananceElement, ScaleIconServiceMaintananceEvents, JSX.ScaleIconServiceMaintanance>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceManualEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceManual: StencilReactComponent<ScaleIconServiceManualElement, ScaleIconServiceManualEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceManualElement, ScaleIconServiceManualEvents>({
+export const ScaleIconServiceManual: StencilReactComponent<ScaleIconServiceManualElement, ScaleIconServiceManualEvents, JSX.ScaleIconServiceManual> = /*@__PURE__*/ createComponent<ScaleIconServiceManualElement, ScaleIconServiceManualEvents, JSX.ScaleIconServiceManual>({
     tagName: 'scale-icon-service-manual',
     properties: {
         size: 'size',
@@ -7487,17 +6210,13 @@ export const ScaleIconServiceManual: StencilReactComponent<ScaleIconServiceManua
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceManualElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceManualEvents,
-    defineCustomElement: defineScaleIconServiceManual
+    clientModule: clientComponents.ScaleIconServiceManual as StencilReactComponent<ScaleIconServiceManualElement, ScaleIconServiceManualEvents, JSX.ScaleIconServiceManual>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceOneTimePasswordEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceOneTimePassword: StencilReactComponent<ScaleIconServiceOneTimePasswordElement, ScaleIconServiceOneTimePasswordEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceOneTimePasswordElement, ScaleIconServiceOneTimePasswordEvents>({
+export const ScaleIconServiceOneTimePassword: StencilReactComponent<ScaleIconServiceOneTimePasswordElement, ScaleIconServiceOneTimePasswordEvents, JSX.ScaleIconServiceOneTimePassword> = /*@__PURE__*/ createComponent<ScaleIconServiceOneTimePasswordElement, ScaleIconServiceOneTimePasswordEvents, JSX.ScaleIconServiceOneTimePassword>({
     tagName: 'scale-icon-service-one-time-password',
     properties: {
         size: 'size',
@@ -7509,17 +6228,13 @@ export const ScaleIconServiceOneTimePassword: StencilReactComponent<ScaleIconSer
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceOneTimePasswordElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceOneTimePasswordEvents,
-    defineCustomElement: defineScaleIconServiceOneTimePassword
+    clientModule: clientComponents.ScaleIconServiceOneTimePassword as StencilReactComponent<ScaleIconServiceOneTimePasswordElement, ScaleIconServiceOneTimePasswordEvents, JSX.ScaleIconServiceOneTimePassword>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceServicesEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceServices: StencilReactComponent<ScaleIconServiceServicesElement, ScaleIconServiceServicesEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceServicesElement, ScaleIconServiceServicesEvents>({
+export const ScaleIconServiceServices: StencilReactComponent<ScaleIconServiceServicesElement, ScaleIconServiceServicesEvents, JSX.ScaleIconServiceServices> = /*@__PURE__*/ createComponent<ScaleIconServiceServicesElement, ScaleIconServiceServicesEvents, JSX.ScaleIconServiceServices>({
     tagName: 'scale-icon-service-services',
     properties: {
         size: 'size',
@@ -7531,17 +6246,13 @@ export const ScaleIconServiceServices: StencilReactComponent<ScaleIconServiceSer
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceServicesElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceServicesEvents,
-    defineCustomElement: defineScaleIconServiceServices
+    clientModule: clientComponents.ScaleIconServiceServices as StencilReactComponent<ScaleIconServiceServicesElement, ScaleIconServiceServicesEvents, JSX.ScaleIconServiceServices>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceSettingsEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceSettings: StencilReactComponent<ScaleIconServiceSettingsElement, ScaleIconServiceSettingsEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceSettingsElement, ScaleIconServiceSettingsEvents>({
+export const ScaleIconServiceSettings: StencilReactComponent<ScaleIconServiceSettingsElement, ScaleIconServiceSettingsEvents, JSX.ScaleIconServiceSettings> = /*@__PURE__*/ createComponent<ScaleIconServiceSettingsElement, ScaleIconServiceSettingsEvents, JSX.ScaleIconServiceSettings>({
     tagName: 'scale-icon-service-settings',
     properties: {
         size: 'size',
@@ -7553,17 +6264,13 @@ export const ScaleIconServiceSettings: StencilReactComponent<ScaleIconServiceSet
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceSettingsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceSettingsEvents,
-    defineCustomElement: defineScaleIconServiceSettings
+    clientModule: clientComponents.ScaleIconServiceSettings as StencilReactComponent<ScaleIconServiceSettingsElement, ScaleIconServiceSettingsEvents, JSX.ScaleIconServiceSettings>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceSupportEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceSupport: StencilReactComponent<ScaleIconServiceSupportElement, ScaleIconServiceSupportEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceSupportElement, ScaleIconServiceSupportEvents>({
+export const ScaleIconServiceSupport: StencilReactComponent<ScaleIconServiceSupportElement, ScaleIconServiceSupportEvents, JSX.ScaleIconServiceSupport> = /*@__PURE__*/ createComponent<ScaleIconServiceSupportElement, ScaleIconServiceSupportEvents, JSX.ScaleIconServiceSupport>({
     tagName: 'scale-icon-service-support',
     properties: {
         size: 'size',
@@ -7575,17 +6282,13 @@ export const ScaleIconServiceSupport: StencilReactComponent<ScaleIconServiceSupp
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceSupportElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceSupportEvents,
-    defineCustomElement: defineScaleIconServiceSupport
+    clientModule: clientComponents.ScaleIconServiceSupport as StencilReactComponent<ScaleIconServiceSupportElement, ScaleIconServiceSupportEvents, JSX.ScaleIconServiceSupport>,
+    serializeShadowRoot
 });
 
 export type ScaleIconServiceVpnEvents = NonNullable<unknown>;
 
-export const ScaleIconServiceVpn: StencilReactComponent<ScaleIconServiceVpnElement, ScaleIconServiceVpnEvents> = /*@__PURE__*/ createComponent<ScaleIconServiceVpnElement, ScaleIconServiceVpnEvents>({
+export const ScaleIconServiceVpn: StencilReactComponent<ScaleIconServiceVpnElement, ScaleIconServiceVpnEvents, JSX.ScaleIconServiceVpn> = /*@__PURE__*/ createComponent<ScaleIconServiceVpnElement, ScaleIconServiceVpnEvents, JSX.ScaleIconServiceVpn>({
     tagName: 'scale-icon-service-vpn',
     properties: {
         size: 'size',
@@ -7597,17 +6300,13 @@ export const ScaleIconServiceVpn: StencilReactComponent<ScaleIconServiceVpnEleme
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconServiceVpnElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconServiceVpnEvents,
-    defineCustomElement: defineScaleIconServiceVpn
+    clientModule: clientComponents.ScaleIconServiceVpn as StencilReactComponent<ScaleIconServiceVpnElement, ScaleIconServiceVpnEvents, JSX.ScaleIconServiceVpn>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProduct2faTelekomAppEvents = NonNullable<unknown>;
 
-export const ScaleIconTProduct2faTelekomApp: StencilReactComponent<ScaleIconTProduct2faTelekomAppElement, ScaleIconTProduct2faTelekomAppEvents> = /*@__PURE__*/ createComponent<ScaleIconTProduct2faTelekomAppElement, ScaleIconTProduct2faTelekomAppEvents>({
+export const ScaleIconTProduct2faTelekomApp: StencilReactComponent<ScaleIconTProduct2faTelekomAppElement, ScaleIconTProduct2faTelekomAppEvents, JSX.ScaleIconTProduct2faTelekomApp> = /*@__PURE__*/ createComponent<ScaleIconTProduct2faTelekomAppElement, ScaleIconTProduct2faTelekomAppEvents, JSX.ScaleIconTProduct2faTelekomApp>({
     tagName: 'scale-icon-t-product-2fa-telekom-app',
     properties: {
         size: 'size',
@@ -7619,17 +6318,13 @@ export const ScaleIconTProduct2faTelekomApp: StencilReactComponent<ScaleIconTPro
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProduct2faTelekomAppElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProduct2faTelekomAppEvents,
-    defineCustomElement: defineScaleIconTProduct2faTelekomApp
+    clientModule: clientComponents.ScaleIconTProduct2faTelekomApp as StencilReactComponent<ScaleIconTProduct2faTelekomAppElement, ScaleIconTProduct2faTelekomAppEvents, JSX.ScaleIconTProduct2faTelekomApp>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductMagentaCloudEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductMagentaCloud: StencilReactComponent<ScaleIconTProductMagentaCloudElement, ScaleIconTProductMagentaCloudEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductMagentaCloudElement, ScaleIconTProductMagentaCloudEvents>({
+export const ScaleIconTProductMagentaCloud: StencilReactComponent<ScaleIconTProductMagentaCloudElement, ScaleIconTProductMagentaCloudEvents, JSX.ScaleIconTProductMagentaCloud> = /*@__PURE__*/ createComponent<ScaleIconTProductMagentaCloudElement, ScaleIconTProductMagentaCloudEvents, JSX.ScaleIconTProductMagentaCloud>({
     tagName: 'scale-icon-t-product-magenta-cloud',
     properties: {
         size: 'size',
@@ -7641,17 +6336,13 @@ export const ScaleIconTProductMagentaCloud: StencilReactComponent<ScaleIconTProd
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductMagentaCloudElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductMagentaCloudEvents,
-    defineCustomElement: defineScaleIconTProductMagentaCloud
+    clientModule: clientComponents.ScaleIconTProductMagentaCloud as StencilReactComponent<ScaleIconTProductMagentaCloudElement, ScaleIconTProductMagentaCloudEvents, JSX.ScaleIconTProductMagentaCloud>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductMagentaTvEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductMagentaTv: StencilReactComponent<ScaleIconTProductMagentaTvElement, ScaleIconTProductMagentaTvEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductMagentaTvElement, ScaleIconTProductMagentaTvEvents>({
+export const ScaleIconTProductMagentaTv: StencilReactComponent<ScaleIconTProductMagentaTvElement, ScaleIconTProductMagentaTvEvents, JSX.ScaleIconTProductMagentaTv> = /*@__PURE__*/ createComponent<ScaleIconTProductMagentaTvElement, ScaleIconTProductMagentaTvEvents, JSX.ScaleIconTProductMagentaTv>({
     tagName: 'scale-icon-t-product-magenta-tv',
     properties: {
         size: 'size',
@@ -7663,17 +6354,13 @@ export const ScaleIconTProductMagentaTv: StencilReactComponent<ScaleIconTProduct
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductMagentaTvElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductMagentaTvEvents,
-    defineCustomElement: defineScaleIconTProductMagentaTv
+    clientModule: clientComponents.ScaleIconTProductMagentaTv as StencilReactComponent<ScaleIconTProductMagentaTvElement, ScaleIconTProductMagentaTvEvents, JSX.ScaleIconTProductMagentaTv>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductMagentaoneEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductMagentaone: StencilReactComponent<ScaleIconTProductMagentaoneElement, ScaleIconTProductMagentaoneEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductMagentaoneElement, ScaleIconTProductMagentaoneEvents>({
+export const ScaleIconTProductMagentaone: StencilReactComponent<ScaleIconTProductMagentaoneElement, ScaleIconTProductMagentaoneEvents, JSX.ScaleIconTProductMagentaone> = /*@__PURE__*/ createComponent<ScaleIconTProductMagentaoneElement, ScaleIconTProductMagentaoneEvents, JSX.ScaleIconTProductMagentaone>({
     tagName: 'scale-icon-t-product-magentaone',
     properties: {
         size: 'size',
@@ -7685,17 +6372,13 @@ export const ScaleIconTProductMagentaone: StencilReactComponent<ScaleIconTProduc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductMagentaoneElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductMagentaoneEvents,
-    defineCustomElement: defineScaleIconTProductMagentaone
+    clientModule: clientComponents.ScaleIconTProductMagentaone as StencilReactComponent<ScaleIconTProductMagentaoneElement, ScaleIconTProductMagentaoneEvents, JSX.ScaleIconTProductMagentaone>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductMeasureInternetSpeedEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductMeasureInternetSpeed: StencilReactComponent<ScaleIconTProductMeasureInternetSpeedElement, ScaleIconTProductMeasureInternetSpeedEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductMeasureInternetSpeedElement, ScaleIconTProductMeasureInternetSpeedEvents>({
+export const ScaleIconTProductMeasureInternetSpeed: StencilReactComponent<ScaleIconTProductMeasureInternetSpeedElement, ScaleIconTProductMeasureInternetSpeedEvents, JSX.ScaleIconTProductMeasureInternetSpeed> = /*@__PURE__*/ createComponent<ScaleIconTProductMeasureInternetSpeedElement, ScaleIconTProductMeasureInternetSpeedEvents, JSX.ScaleIconTProductMeasureInternetSpeed>({
     tagName: 'scale-icon-t-product-measure-internet-speed',
     properties: {
         size: 'size',
@@ -7707,17 +6390,13 @@ export const ScaleIconTProductMeasureInternetSpeed: StencilReactComponent<ScaleI
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductMeasureInternetSpeedElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductMeasureInternetSpeedEvents,
-    defineCustomElement: defineScaleIconTProductMeasureInternetSpeed
+    clientModule: clientComponents.ScaleIconTProductMeasureInternetSpeed as StencilReactComponent<ScaleIconTProductMeasureInternetSpeedElement, ScaleIconTProductMeasureInternetSpeedEvents, JSX.ScaleIconTProductMeasureInternetSpeed>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductSeamlessConnectivityEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductSeamlessConnectivity: StencilReactComponent<ScaleIconTProductSeamlessConnectivityElement, ScaleIconTProductSeamlessConnectivityEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductSeamlessConnectivityElement, ScaleIconTProductSeamlessConnectivityEvents>({
+export const ScaleIconTProductSeamlessConnectivity: StencilReactComponent<ScaleIconTProductSeamlessConnectivityElement, ScaleIconTProductSeamlessConnectivityEvents, JSX.ScaleIconTProductSeamlessConnectivity> = /*@__PURE__*/ createComponent<ScaleIconTProductSeamlessConnectivityElement, ScaleIconTProductSeamlessConnectivityEvents, JSX.ScaleIconTProductSeamlessConnectivity>({
     tagName: 'scale-icon-t-product-seamless-connectivity',
     properties: {
         size: 'size',
@@ -7729,17 +6408,13 @@ export const ScaleIconTProductSeamlessConnectivity: StencilReactComponent<ScaleI
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductSeamlessConnectivityElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductSeamlessConnectivityEvents,
-    defineCustomElement: defineScaleIconTProductSeamlessConnectivity
+    clientModule: clientComponents.ScaleIconTProductSeamlessConnectivity as StencilReactComponent<ScaleIconTProductSeamlessConnectivityElement, ScaleIconTProductSeamlessConnectivityEvents, JSX.ScaleIconTProductSeamlessConnectivity>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductTelekom1t1Events = NonNullable<unknown>;
 
-export const ScaleIconTProductTelekom1t1: StencilReactComponent<ScaleIconTProductTelekom1t1Element, ScaleIconTProductTelekom1t1Events> = /*@__PURE__*/ createComponent<ScaleIconTProductTelekom1t1Element, ScaleIconTProductTelekom1t1Events>({
+export const ScaleIconTProductTelekom1t1: StencilReactComponent<ScaleIconTProductTelekom1t1Element, ScaleIconTProductTelekom1t1Events, JSX.ScaleIconTProductTelekom1t1> = /*@__PURE__*/ createComponent<ScaleIconTProductTelekom1t1Element, ScaleIconTProductTelekom1t1Events, JSX.ScaleIconTProductTelekom1t1>({
     tagName: 'scale-icon-t-product-telekom-1t1',
     properties: {
         size: 'size',
@@ -7751,17 +6426,13 @@ export const ScaleIconTProductTelekom1t1: StencilReactComponent<ScaleIconTProduc
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductTelekom1t1Element,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductTelekom1t1Events,
-    defineCustomElement: defineScaleIconTProductTelekom1t1
+    clientModule: clientComponents.ScaleIconTProductTelekom1t1 as StencilReactComponent<ScaleIconTProductTelekom1t1Element, ScaleIconTProductTelekom1t1Events, JSX.ScaleIconTProductTelekom1t1>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductTelekomPlanEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductTelekomPlan: StencilReactComponent<ScaleIconTProductTelekomPlanElement, ScaleIconTProductTelekomPlanEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductTelekomPlanElement, ScaleIconTProductTelekomPlanEvents>({
+export const ScaleIconTProductTelekomPlan: StencilReactComponent<ScaleIconTProductTelekomPlanElement, ScaleIconTProductTelekomPlanEvents, JSX.ScaleIconTProductTelekomPlan> = /*@__PURE__*/ createComponent<ScaleIconTProductTelekomPlanElement, ScaleIconTProductTelekomPlanEvents, JSX.ScaleIconTProductTelekomPlan>({
     tagName: 'scale-icon-t-product-telekom-plan',
     properties: {
         size: 'size',
@@ -7773,17 +6444,13 @@ export const ScaleIconTProductTelekomPlan: StencilReactComponent<ScaleIconTProdu
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductTelekomPlanElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductTelekomPlanEvents,
-    defineCustomElement: defineScaleIconTProductTelekomPlan
+    clientModule: clientComponents.ScaleIconTProductTelekomPlan as StencilReactComponent<ScaleIconTProductTelekomPlanElement, ScaleIconTProductTelekomPlanEvents, JSX.ScaleIconTProductTelekomPlan>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductTelekomShopBEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductTelekomShopB: StencilReactComponent<ScaleIconTProductTelekomShopBElement, ScaleIconTProductTelekomShopBEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductTelekomShopBElement, ScaleIconTProductTelekomShopBEvents>({
+export const ScaleIconTProductTelekomShopB: StencilReactComponent<ScaleIconTProductTelekomShopBElement, ScaleIconTProductTelekomShopBEvents, JSX.ScaleIconTProductTelekomShopB> = /*@__PURE__*/ createComponent<ScaleIconTProductTelekomShopBElement, ScaleIconTProductTelekomShopBEvents, JSX.ScaleIconTProductTelekomShopB>({
     tagName: 'scale-icon-t-product-telekom-shop-b',
     properties: {
         size: 'size',
@@ -7795,17 +6462,13 @@ export const ScaleIconTProductTelekomShopB: StencilReactComponent<ScaleIconTProd
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductTelekomShopBElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductTelekomShopBEvents,
-    defineCustomElement: defineScaleIconTProductTelekomShopB
+    clientModule: clientComponents.ScaleIconTProductTelekomShopB as StencilReactComponent<ScaleIconTProductTelekomShopBElement, ScaleIconTProductTelekomShopBEvents, JSX.ScaleIconTProductTelekomShopB>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductUsageEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductUsage: StencilReactComponent<ScaleIconTProductUsageElement, ScaleIconTProductUsageEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductUsageElement, ScaleIconTProductUsageEvents>({
+export const ScaleIconTProductUsage: StencilReactComponent<ScaleIconTProductUsageElement, ScaleIconTProductUsageEvents, JSX.ScaleIconTProductUsage> = /*@__PURE__*/ createComponent<ScaleIconTProductUsageElement, ScaleIconTProductUsageEvents, JSX.ScaleIconTProductUsage>({
     tagName: 'scale-icon-t-product-usage',
     properties: {
         size: 'size',
@@ -7817,17 +6480,13 @@ export const ScaleIconTProductUsage: StencilReactComponent<ScaleIconTProductUsag
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductUsageElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductUsageEvents,
-    defineCustomElement: defineScaleIconTProductUsage
+    clientModule: clientComponents.ScaleIconTProductUsage as StencilReactComponent<ScaleIconTProductUsageElement, ScaleIconTProductUsageEvents, JSX.ScaleIconTProductUsage>,
+    serializeShadowRoot
 });
 
 export type ScaleIconTProductVoiceEvents = NonNullable<unknown>;
 
-export const ScaleIconTProductVoice: StencilReactComponent<ScaleIconTProductVoiceElement, ScaleIconTProductVoiceEvents> = /*@__PURE__*/ createComponent<ScaleIconTProductVoiceElement, ScaleIconTProductVoiceEvents>({
+export const ScaleIconTProductVoice: StencilReactComponent<ScaleIconTProductVoiceElement, ScaleIconTProductVoiceEvents, JSX.ScaleIconTProductVoice> = /*@__PURE__*/ createComponent<ScaleIconTProductVoiceElement, ScaleIconTProductVoiceEvents, JSX.ScaleIconTProductVoice>({
     tagName: 'scale-icon-t-product-voice',
     properties: {
         size: 'size',
@@ -7839,17 +6498,13 @@ export const ScaleIconTProductVoice: StencilReactComponent<ScaleIconTProductVoic
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconTProductVoiceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconTProductVoiceEvents,
-    defineCustomElement: defineScaleIconTProductVoice
+    clientModule: clientComponents.ScaleIconTProductVoice as StencilReactComponent<ScaleIconTProductVoiceElement, ScaleIconTProductVoiceEvents, JSX.ScaleIconTProductVoice>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileAdminEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileAdmin: StencilReactComponent<ScaleIconUserFileAdminElement, ScaleIconUserFileAdminEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileAdminElement, ScaleIconUserFileAdminEvents>({
+export const ScaleIconUserFileAdmin: StencilReactComponent<ScaleIconUserFileAdminElement, ScaleIconUserFileAdminEvents, JSX.ScaleIconUserFileAdmin> = /*@__PURE__*/ createComponent<ScaleIconUserFileAdminElement, ScaleIconUserFileAdminEvents, JSX.ScaleIconUserFileAdmin>({
     tagName: 'scale-icon-user-file-admin',
     properties: {
         size: 'size',
@@ -7861,17 +6516,13 @@ export const ScaleIconUserFileAdmin: StencilReactComponent<ScaleIconUserFileAdmi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileAdminElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileAdminEvents,
-    defineCustomElement: defineScaleIconUserFileAdmin
+    clientModule: clientComponents.ScaleIconUserFileAdmin as StencilReactComponent<ScaleIconUserFileAdminElement, ScaleIconUserFileAdminEvents, JSX.ScaleIconUserFileAdmin>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileAnalyticsEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileAnalytics: StencilReactComponent<ScaleIconUserFileAnalyticsElement, ScaleIconUserFileAnalyticsEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileAnalyticsElement, ScaleIconUserFileAnalyticsEvents>({
+export const ScaleIconUserFileAnalytics: StencilReactComponent<ScaleIconUserFileAnalyticsElement, ScaleIconUserFileAnalyticsEvents, JSX.ScaleIconUserFileAnalytics> = /*@__PURE__*/ createComponent<ScaleIconUserFileAnalyticsElement, ScaleIconUserFileAnalyticsEvents, JSX.ScaleIconUserFileAnalytics>({
     tagName: 'scale-icon-user-file-analytics',
     properties: {
         size: 'size',
@@ -7883,17 +6534,13 @@ export const ScaleIconUserFileAnalytics: StencilReactComponent<ScaleIconUserFile
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileAnalyticsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileAnalyticsEvents,
-    defineCustomElement: defineScaleIconUserFileAnalytics
+    clientModule: clientComponents.ScaleIconUserFileAnalytics as StencilReactComponent<ScaleIconUserFileAnalyticsElement, ScaleIconUserFileAnalyticsEvents, JSX.ScaleIconUserFileAnalytics>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileAttachmentEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileAttachment: StencilReactComponent<ScaleIconUserFileAttachmentElement, ScaleIconUserFileAttachmentEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileAttachmentElement, ScaleIconUserFileAttachmentEvents>({
+export const ScaleIconUserFileAttachment: StencilReactComponent<ScaleIconUserFileAttachmentElement, ScaleIconUserFileAttachmentEvents, JSX.ScaleIconUserFileAttachment> = /*@__PURE__*/ createComponent<ScaleIconUserFileAttachmentElement, ScaleIconUserFileAttachmentEvents, JSX.ScaleIconUserFileAttachment>({
     tagName: 'scale-icon-user-file-attachment',
     properties: {
         size: 'size',
@@ -7905,17 +6552,13 @@ export const ScaleIconUserFileAttachment: StencilReactComponent<ScaleIconUserFil
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileAttachmentElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileAttachmentEvents,
-    defineCustomElement: defineScaleIconUserFileAttachment
+    clientModule: clientComponents.ScaleIconUserFileAttachment as StencilReactComponent<ScaleIconUserFileAttachmentElement, ScaleIconUserFileAttachmentEvents, JSX.ScaleIconUserFileAttachment>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileAudioFileEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileAudioFile: StencilReactComponent<ScaleIconUserFileAudioFileElement, ScaleIconUserFileAudioFileEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileAudioFileElement, ScaleIconUserFileAudioFileEvents>({
+export const ScaleIconUserFileAudioFile: StencilReactComponent<ScaleIconUserFileAudioFileElement, ScaleIconUserFileAudioFileEvents, JSX.ScaleIconUserFileAudioFile> = /*@__PURE__*/ createComponent<ScaleIconUserFileAudioFileElement, ScaleIconUserFileAudioFileEvents, JSX.ScaleIconUserFileAudioFile>({
     tagName: 'scale-icon-user-file-audio-file',
     properties: {
         size: 'size',
@@ -7927,17 +6570,13 @@ export const ScaleIconUserFileAudioFile: StencilReactComponent<ScaleIconUserFile
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileAudioFileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileAudioFileEvents,
-    defineCustomElement: defineScaleIconUserFileAudioFile
+    clientModule: clientComponents.ScaleIconUserFileAudioFile as StencilReactComponent<ScaleIconUserFileAudioFileElement, ScaleIconUserFileAudioFileEvents, JSX.ScaleIconUserFileAudioFile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileBillingEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileBilling: StencilReactComponent<ScaleIconUserFileBillingElement, ScaleIconUserFileBillingEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileBillingElement, ScaleIconUserFileBillingEvents>({
+export const ScaleIconUserFileBilling: StencilReactComponent<ScaleIconUserFileBillingElement, ScaleIconUserFileBillingEvents, JSX.ScaleIconUserFileBilling> = /*@__PURE__*/ createComponent<ScaleIconUserFileBillingElement, ScaleIconUserFileBillingEvents, JSX.ScaleIconUserFileBilling>({
     tagName: 'scale-icon-user-file-billing',
     properties: {
         size: 'size',
@@ -7949,17 +6588,13 @@ export const ScaleIconUserFileBilling: StencilReactComponent<ScaleIconUserFileBi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileBillingElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileBillingEvents,
-    defineCustomElement: defineScaleIconUserFileBilling
+    clientModule: clientComponents.ScaleIconUserFileBilling as StencilReactComponent<ScaleIconUserFileBillingElement, ScaleIconUserFileBillingEvents, JSX.ScaleIconUserFileBilling>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileBoyEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileBoy: StencilReactComponent<ScaleIconUserFileBoyElement, ScaleIconUserFileBoyEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileBoyElement, ScaleIconUserFileBoyEvents>({
+export const ScaleIconUserFileBoy: StencilReactComponent<ScaleIconUserFileBoyElement, ScaleIconUserFileBoyEvents, JSX.ScaleIconUserFileBoy> = /*@__PURE__*/ createComponent<ScaleIconUserFileBoyElement, ScaleIconUserFileBoyEvents, JSX.ScaleIconUserFileBoy>({
     tagName: 'scale-icon-user-file-boy',
     properties: {
         size: 'size',
@@ -7971,17 +6606,13 @@ export const ScaleIconUserFileBoy: StencilReactComponent<ScaleIconUserFileBoyEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileBoyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileBoyEvents,
-    defineCustomElement: defineScaleIconUserFileBoy
+    clientModule: clientComponents.ScaleIconUserFileBoy as StencilReactComponent<ScaleIconUserFileBoyElement, ScaleIconUserFileBoyEvents, JSX.ScaleIconUserFileBoy>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileBussinesUsersEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileBussinesUsers: StencilReactComponent<ScaleIconUserFileBussinesUsersElement, ScaleIconUserFileBussinesUsersEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileBussinesUsersElement, ScaleIconUserFileBussinesUsersEvents>({
+export const ScaleIconUserFileBussinesUsers: StencilReactComponent<ScaleIconUserFileBussinesUsersElement, ScaleIconUserFileBussinesUsersEvents, JSX.ScaleIconUserFileBussinesUsers> = /*@__PURE__*/ createComponent<ScaleIconUserFileBussinesUsersElement, ScaleIconUserFileBussinesUsersEvents, JSX.ScaleIconUserFileBussinesUsers>({
     tagName: 'scale-icon-user-file-bussines-users',
     properties: {
         size: 'size',
@@ -7993,17 +6624,13 @@ export const ScaleIconUserFileBussinesUsers: StencilReactComponent<ScaleIconUser
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileBussinesUsersElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileBussinesUsersEvents,
-    defineCustomElement: defineScaleIconUserFileBussinesUsers
+    clientModule: clientComponents.ScaleIconUserFileBussinesUsers as StencilReactComponent<ScaleIconUserFileBussinesUsersElement, ScaleIconUserFileBussinesUsersEvents, JSX.ScaleIconUserFileBussinesUsers>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileCommunitiesEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileCommunities: StencilReactComponent<ScaleIconUserFileCommunitiesElement, ScaleIconUserFileCommunitiesEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileCommunitiesElement, ScaleIconUserFileCommunitiesEvents>({
+export const ScaleIconUserFileCommunities: StencilReactComponent<ScaleIconUserFileCommunitiesElement, ScaleIconUserFileCommunitiesEvents, JSX.ScaleIconUserFileCommunities> = /*@__PURE__*/ createComponent<ScaleIconUserFileCommunitiesElement, ScaleIconUserFileCommunitiesEvents, JSX.ScaleIconUserFileCommunities>({
     tagName: 'scale-icon-user-file-communities',
     properties: {
         size: 'size',
@@ -8015,17 +6642,13 @@ export const ScaleIconUserFileCommunities: StencilReactComponent<ScaleIconUserFi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileCommunitiesElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileCommunitiesEvents,
-    defineCustomElement: defineScaleIconUserFileCommunities
+    clientModule: clientComponents.ScaleIconUserFileCommunities as StencilReactComponent<ScaleIconUserFileCommunitiesElement, ScaleIconUserFileCommunitiesEvents, JSX.ScaleIconUserFileCommunities>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileContactsEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileContacts: StencilReactComponent<ScaleIconUserFileContactsElement, ScaleIconUserFileContactsEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileContactsElement, ScaleIconUserFileContactsEvents>({
+export const ScaleIconUserFileContacts: StencilReactComponent<ScaleIconUserFileContactsElement, ScaleIconUserFileContactsEvents, JSX.ScaleIconUserFileContacts> = /*@__PURE__*/ createComponent<ScaleIconUserFileContactsElement, ScaleIconUserFileContactsEvents, JSX.ScaleIconUserFileContacts>({
     tagName: 'scale-icon-user-file-contacts',
     properties: {
         size: 'size',
@@ -8037,17 +6660,13 @@ export const ScaleIconUserFileContacts: StencilReactComponent<ScaleIconUserFileC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileContactsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileContactsEvents,
-    defineCustomElement: defineScaleIconUserFileContacts
+    clientModule: clientComponents.ScaleIconUserFileContacts as StencilReactComponent<ScaleIconUserFileContactsElement, ScaleIconUserFileContactsEvents, JSX.ScaleIconUserFileContacts>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileContactsFromCloudEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileContactsFromCloud: StencilReactComponent<ScaleIconUserFileContactsFromCloudElement, ScaleIconUserFileContactsFromCloudEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileContactsFromCloudElement, ScaleIconUserFileContactsFromCloudEvents>({
+export const ScaleIconUserFileContactsFromCloud: StencilReactComponent<ScaleIconUserFileContactsFromCloudElement, ScaleIconUserFileContactsFromCloudEvents, JSX.ScaleIconUserFileContactsFromCloud> = /*@__PURE__*/ createComponent<ScaleIconUserFileContactsFromCloudElement, ScaleIconUserFileContactsFromCloudEvents, JSX.ScaleIconUserFileContactsFromCloud>({
     tagName: 'scale-icon-user-file-contacts-from-cloud',
     properties: {
         size: 'size',
@@ -8059,17 +6678,13 @@ export const ScaleIconUserFileContactsFromCloud: StencilReactComponent<ScaleIcon
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileContactsFromCloudElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileContactsFromCloudEvents,
-    defineCustomElement: defineScaleIconUserFileContactsFromCloud
+    clientModule: clientComponents.ScaleIconUserFileContactsFromCloud as StencilReactComponent<ScaleIconUserFileContactsFromCloudElement, ScaleIconUserFileContactsFromCloudEvents, JSX.ScaleIconUserFileContactsFromCloud>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileContractsEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileContracts: StencilReactComponent<ScaleIconUserFileContractsElement, ScaleIconUserFileContractsEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileContractsElement, ScaleIconUserFileContractsEvents>({
+export const ScaleIconUserFileContracts: StencilReactComponent<ScaleIconUserFileContractsElement, ScaleIconUserFileContractsEvents, JSX.ScaleIconUserFileContracts> = /*@__PURE__*/ createComponent<ScaleIconUserFileContractsElement, ScaleIconUserFileContractsEvents, JSX.ScaleIconUserFileContracts>({
     tagName: 'scale-icon-user-file-contracts',
     properties: {
         size: 'size',
@@ -8081,17 +6696,13 @@ export const ScaleIconUserFileContracts: StencilReactComponent<ScaleIconUserFile
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileContractsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileContractsEvents,
-    defineCustomElement: defineScaleIconUserFileContracts
+    clientModule: clientComponents.ScaleIconUserFileContracts as StencilReactComponent<ScaleIconUserFileContractsElement, ScaleIconUserFileContractsEvents, JSX.ScaleIconUserFileContracts>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileDraftFileEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileDraftFile: StencilReactComponent<ScaleIconUserFileDraftFileElement, ScaleIconUserFileDraftFileEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileDraftFileElement, ScaleIconUserFileDraftFileEvents>({
+export const ScaleIconUserFileDraftFile: StencilReactComponent<ScaleIconUserFileDraftFileElement, ScaleIconUserFileDraftFileEvents, JSX.ScaleIconUserFileDraftFile> = /*@__PURE__*/ createComponent<ScaleIconUserFileDraftFileElement, ScaleIconUserFileDraftFileEvents, JSX.ScaleIconUserFileDraftFile>({
     tagName: 'scale-icon-user-file-draft-file',
     properties: {
         size: 'size',
@@ -8103,17 +6714,13 @@ export const ScaleIconUserFileDraftFile: StencilReactComponent<ScaleIconUserFile
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileDraftFileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileDraftFileEvents,
-    defineCustomElement: defineScaleIconUserFileDraftFile
+    clientModule: clientComponents.ScaleIconUserFileDraftFile as StencilReactComponent<ScaleIconUserFileDraftFileElement, ScaleIconUserFileDraftFileEvents, JSX.ScaleIconUserFileDraftFile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileFamiliesEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileFamilies: StencilReactComponent<ScaleIconUserFileFamiliesElement, ScaleIconUserFileFamiliesEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileFamiliesElement, ScaleIconUserFileFamiliesEvents>({
+export const ScaleIconUserFileFamilies: StencilReactComponent<ScaleIconUserFileFamiliesElement, ScaleIconUserFileFamiliesEvents, JSX.ScaleIconUserFileFamilies> = /*@__PURE__*/ createComponent<ScaleIconUserFileFamiliesElement, ScaleIconUserFileFamiliesEvents, JSX.ScaleIconUserFileFamilies>({
     tagName: 'scale-icon-user-file-families',
     properties: {
         size: 'size',
@@ -8125,17 +6732,13 @@ export const ScaleIconUserFileFamilies: StencilReactComponent<ScaleIconUserFileF
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileFamiliesElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileFamiliesEvents,
-    defineCustomElement: defineScaleIconUserFileFamilies
+    clientModule: clientComponents.ScaleIconUserFileFamilies as StencilReactComponent<ScaleIconUserFileFamiliesElement, ScaleIconUserFileFamiliesEvents, JSX.ScaleIconUserFileFamilies>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileFamilyEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileFamily: StencilReactComponent<ScaleIconUserFileFamilyElement, ScaleIconUserFileFamilyEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileFamilyElement, ScaleIconUserFileFamilyEvents>({
+export const ScaleIconUserFileFamily: StencilReactComponent<ScaleIconUserFileFamilyElement, ScaleIconUserFileFamilyEvents, JSX.ScaleIconUserFileFamily> = /*@__PURE__*/ createComponent<ScaleIconUserFileFamilyElement, ScaleIconUserFileFamilyEvents, JSX.ScaleIconUserFileFamily>({
     tagName: 'scale-icon-user-file-family',
     properties: {
         size: 'size',
@@ -8147,17 +6750,13 @@ export const ScaleIconUserFileFamily: StencilReactComponent<ScaleIconUserFileFam
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileFamilyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileFamilyEvents,
-    defineCustomElement: defineScaleIconUserFileFamily
+    clientModule: clientComponents.ScaleIconUserFileFamily as StencilReactComponent<ScaleIconUserFileFamilyElement, ScaleIconUserFileFamilyEvents, JSX.ScaleIconUserFileFamily>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileFileEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileFile: StencilReactComponent<ScaleIconUserFileFileElement, ScaleIconUserFileFileEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileFileElement, ScaleIconUserFileFileEvents>({
+export const ScaleIconUserFileFile: StencilReactComponent<ScaleIconUserFileFileElement, ScaleIconUserFileFileEvents, JSX.ScaleIconUserFileFile> = /*@__PURE__*/ createComponent<ScaleIconUserFileFileElement, ScaleIconUserFileFileEvents, JSX.ScaleIconUserFileFile>({
     tagName: 'scale-icon-user-file-file',
     properties: {
         size: 'size',
@@ -8169,17 +6768,13 @@ export const ScaleIconUserFileFile: StencilReactComponent<ScaleIconUserFileFileE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileFileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileFileEvents,
-    defineCustomElement: defineScaleIconUserFileFile
+    clientModule: clientComponents.ScaleIconUserFileFile as StencilReactComponent<ScaleIconUserFileFileElement, ScaleIconUserFileFileEvents, JSX.ScaleIconUserFileFile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileFileCollectionEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileFileCollection: StencilReactComponent<ScaleIconUserFileFileCollectionElement, ScaleIconUserFileFileCollectionEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileFileCollectionElement, ScaleIconUserFileFileCollectionEvents>({
+export const ScaleIconUserFileFileCollection: StencilReactComponent<ScaleIconUserFileFileCollectionElement, ScaleIconUserFileFileCollectionEvents, JSX.ScaleIconUserFileFileCollection> = /*@__PURE__*/ createComponent<ScaleIconUserFileFileCollectionElement, ScaleIconUserFileFileCollectionEvents, JSX.ScaleIconUserFileFileCollection>({
     tagName: 'scale-icon-user-file-file-collection',
     properties: {
         size: 'size',
@@ -8191,17 +6786,13 @@ export const ScaleIconUserFileFileCollection: StencilReactComponent<ScaleIconUse
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileFileCollectionElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileFileCollectionEvents,
-    defineCustomElement: defineScaleIconUserFileFileCollection
+    clientModule: clientComponents.ScaleIconUserFileFileCollection as StencilReactComponent<ScaleIconUserFileFileCollectionElement, ScaleIconUserFileFileCollectionEvents, JSX.ScaleIconUserFileFileCollection>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileGirlEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileGirl: StencilReactComponent<ScaleIconUserFileGirlElement, ScaleIconUserFileGirlEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileGirlElement, ScaleIconUserFileGirlEvents>({
+export const ScaleIconUserFileGirl: StencilReactComponent<ScaleIconUserFileGirlElement, ScaleIconUserFileGirlEvents, JSX.ScaleIconUserFileGirl> = /*@__PURE__*/ createComponent<ScaleIconUserFileGirlElement, ScaleIconUserFileGirlEvents, JSX.ScaleIconUserFileGirl>({
     tagName: 'scale-icon-user-file-girl',
     properties: {
         size: 'size',
@@ -8213,17 +6804,13 @@ export const ScaleIconUserFileGirl: StencilReactComponent<ScaleIconUserFileGirlE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileGirlElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileGirlEvents,
-    defineCustomElement: defineScaleIconUserFileGirl
+    clientModule: clientComponents.ScaleIconUserFileGirl as StencilReactComponent<ScaleIconUserFileGirlElement, ScaleIconUserFileGirlEvents, JSX.ScaleIconUserFileGirl>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileHandshakeEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileHandshake: StencilReactComponent<ScaleIconUserFileHandshakeElement, ScaleIconUserFileHandshakeEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileHandshakeElement, ScaleIconUserFileHandshakeEvents>({
+export const ScaleIconUserFileHandshake: StencilReactComponent<ScaleIconUserFileHandshakeElement, ScaleIconUserFileHandshakeEvents, JSX.ScaleIconUserFileHandshake> = /*@__PURE__*/ createComponent<ScaleIconUserFileHandshakeElement, ScaleIconUserFileHandshakeEvents, JSX.ScaleIconUserFileHandshake>({
     tagName: 'scale-icon-user-file-handshake',
     properties: {
         size: 'size',
@@ -8235,17 +6822,13 @@ export const ScaleIconUserFileHandshake: StencilReactComponent<ScaleIconUserFile
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileHandshakeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileHandshakeEvents,
-    defineCustomElement: defineScaleIconUserFileHandshake
+    clientModule: clientComponents.ScaleIconUserFileHandshake as StencilReactComponent<ScaleIconUserFileHandshakeElement, ScaleIconUserFileHandshakeEvents, JSX.ScaleIconUserFileHandshake>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileHtmlFileEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileHtmlFile: StencilReactComponent<ScaleIconUserFileHtmlFileElement, ScaleIconUserFileHtmlFileEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileHtmlFileElement, ScaleIconUserFileHtmlFileEvents>({
+export const ScaleIconUserFileHtmlFile: StencilReactComponent<ScaleIconUserFileHtmlFileElement, ScaleIconUserFileHtmlFileEvents, JSX.ScaleIconUserFileHtmlFile> = /*@__PURE__*/ createComponent<ScaleIconUserFileHtmlFileElement, ScaleIconUserFileHtmlFileEvents, JSX.ScaleIconUserFileHtmlFile>({
     tagName: 'scale-icon-user-file-html-file',
     properties: {
         size: 'size',
@@ -8257,17 +6840,13 @@ export const ScaleIconUserFileHtmlFile: StencilReactComponent<ScaleIconUserFileH
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileHtmlFileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileHtmlFileEvents,
-    defineCustomElement: defineScaleIconUserFileHtmlFile
+    clientModule: clientComponents.ScaleIconUserFileHtmlFile as StencilReactComponent<ScaleIconUserFileHtmlFileElement, ScaleIconUserFileHtmlFileEvents, JSX.ScaleIconUserFileHtmlFile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileIdCardEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileIdCard: StencilReactComponent<ScaleIconUserFileIdCardElement, ScaleIconUserFileIdCardEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileIdCardElement, ScaleIconUserFileIdCardEvents>({
+export const ScaleIconUserFileIdCard: StencilReactComponent<ScaleIconUserFileIdCardElement, ScaleIconUserFileIdCardEvents, JSX.ScaleIconUserFileIdCard> = /*@__PURE__*/ createComponent<ScaleIconUserFileIdCardElement, ScaleIconUserFileIdCardEvents, JSX.ScaleIconUserFileIdCard>({
     tagName: 'scale-icon-user-file-id-card',
     properties: {
         size: 'size',
@@ -8279,17 +6858,13 @@ export const ScaleIconUserFileIdCard: StencilReactComponent<ScaleIconUserFileIdC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileIdCardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileIdCardEvents,
-    defineCustomElement: defineScaleIconUserFileIdCard
+    clientModule: clientComponents.ScaleIconUserFileIdCard as StencilReactComponent<ScaleIconUserFileIdCardElement, ScaleIconUserFileIdCardEvents, JSX.ScaleIconUserFileIdCard>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileImageFileEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileImageFile: StencilReactComponent<ScaleIconUserFileImageFileElement, ScaleIconUserFileImageFileEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileImageFileElement, ScaleIconUserFileImageFileEvents>({
+export const ScaleIconUserFileImageFile: StencilReactComponent<ScaleIconUserFileImageFileElement, ScaleIconUserFileImageFileEvents, JSX.ScaleIconUserFileImageFile> = /*@__PURE__*/ createComponent<ScaleIconUserFileImageFileElement, ScaleIconUserFileImageFileEvents, JSX.ScaleIconUserFileImageFile>({
     tagName: 'scale-icon-user-file-image-file',
     properties: {
         size: 'size',
@@ -8301,17 +6876,13 @@ export const ScaleIconUserFileImageFile: StencilReactComponent<ScaleIconUserFile
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileImageFileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileImageFileEvents,
-    defineCustomElement: defineScaleIconUserFileImageFile
+    clientModule: clientComponents.ScaleIconUserFileImageFile as StencilReactComponent<ScaleIconUserFileImageFileElement, ScaleIconUserFileImageFileEvents, JSX.ScaleIconUserFileImageFile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileLogoutEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileLogout: StencilReactComponent<ScaleIconUserFileLogoutElement, ScaleIconUserFileLogoutEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileLogoutElement, ScaleIconUserFileLogoutEvents>({
+export const ScaleIconUserFileLogout: StencilReactComponent<ScaleIconUserFileLogoutElement, ScaleIconUserFileLogoutEvents, JSX.ScaleIconUserFileLogout> = /*@__PURE__*/ createComponent<ScaleIconUserFileLogoutElement, ScaleIconUserFileLogoutEvents, JSX.ScaleIconUserFileLogout>({
     tagName: 'scale-icon-user-file-logout',
     properties: {
         size: 'size',
@@ -8323,17 +6894,13 @@ export const ScaleIconUserFileLogout: StencilReactComponent<ScaleIconUserFileLog
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileLogoutElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileLogoutEvents,
-    defineCustomElement: defineScaleIconUserFileLogout
+    clientModule: clientComponents.ScaleIconUserFileLogout as StencilReactComponent<ScaleIconUserFileLogoutElement, ScaleIconUserFileLogoutEvents, JSX.ScaleIconUserFileLogout>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileManEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileMan: StencilReactComponent<ScaleIconUserFileManElement, ScaleIconUserFileManEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileManElement, ScaleIconUserFileManEvents>({
+export const ScaleIconUserFileMan: StencilReactComponent<ScaleIconUserFileManElement, ScaleIconUserFileManEvents, JSX.ScaleIconUserFileMan> = /*@__PURE__*/ createComponent<ScaleIconUserFileManElement, ScaleIconUserFileManEvents, JSX.ScaleIconUserFileMan>({
     tagName: 'scale-icon-user-file-man',
     properties: {
         size: 'size',
@@ -8345,17 +6912,13 @@ export const ScaleIconUserFileMan: StencilReactComponent<ScaleIconUserFileManEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileManElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileManEvents,
-    defineCustomElement: defineScaleIconUserFileMan
+    clientModule: clientComponents.ScaleIconUserFileMan as StencilReactComponent<ScaleIconUserFileManElement, ScaleIconUserFileManEvents, JSX.ScaleIconUserFileMan>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFilePdfFileEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFilePdfFile: StencilReactComponent<ScaleIconUserFilePdfFileElement, ScaleIconUserFilePdfFileEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFilePdfFileElement, ScaleIconUserFilePdfFileEvents>({
+export const ScaleIconUserFilePdfFile: StencilReactComponent<ScaleIconUserFilePdfFileElement, ScaleIconUserFilePdfFileEvents, JSX.ScaleIconUserFilePdfFile> = /*@__PURE__*/ createComponent<ScaleIconUserFilePdfFileElement, ScaleIconUserFilePdfFileEvents, JSX.ScaleIconUserFilePdfFile>({
     tagName: 'scale-icon-user-file-pdf-file',
     properties: {
         size: 'size',
@@ -8367,17 +6930,13 @@ export const ScaleIconUserFilePdfFile: StencilReactComponent<ScaleIconUserFilePd
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFilePdfFileElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFilePdfFileEvents,
-    defineCustomElement: defineScaleIconUserFilePdfFile
+    clientModule: clientComponents.ScaleIconUserFilePdfFile as StencilReactComponent<ScaleIconUserFilePdfFileElement, ScaleIconUserFilePdfFileEvents, JSX.ScaleIconUserFilePdfFile>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileSwitchUsersEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileSwitchUsers: StencilReactComponent<ScaleIconUserFileSwitchUsersElement, ScaleIconUserFileSwitchUsersEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileSwitchUsersElement, ScaleIconUserFileSwitchUsersEvents>({
+export const ScaleIconUserFileSwitchUsers: StencilReactComponent<ScaleIconUserFileSwitchUsersElement, ScaleIconUserFileSwitchUsersEvents, JSX.ScaleIconUserFileSwitchUsers> = /*@__PURE__*/ createComponent<ScaleIconUserFileSwitchUsersElement, ScaleIconUserFileSwitchUsersEvents, JSX.ScaleIconUserFileSwitchUsers>({
     tagName: 'scale-icon-user-file-switch-users',
     properties: {
         size: 'size',
@@ -8389,17 +6948,13 @@ export const ScaleIconUserFileSwitchUsers: StencilReactComponent<ScaleIconUserFi
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileSwitchUsersElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileSwitchUsersEvents,
-    defineCustomElement: defineScaleIconUserFileSwitchUsers
+    clientModule: clientComponents.ScaleIconUserFileSwitchUsers as StencilReactComponent<ScaleIconUserFileSwitchUsersElement, ScaleIconUserFileSwitchUsersEvents, JSX.ScaleIconUserFileSwitchUsers>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileUserEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileUser: StencilReactComponent<ScaleIconUserFileUserElement, ScaleIconUserFileUserEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileUserElement, ScaleIconUserFileUserEvents>({
+export const ScaleIconUserFileUser: StencilReactComponent<ScaleIconUserFileUserElement, ScaleIconUserFileUserEvents, JSX.ScaleIconUserFileUser> = /*@__PURE__*/ createComponent<ScaleIconUserFileUserElement, ScaleIconUserFileUserEvents, JSX.ScaleIconUserFileUser>({
     tagName: 'scale-icon-user-file-user',
     properties: {
         size: 'size',
@@ -8411,17 +6966,13 @@ export const ScaleIconUserFileUser: StencilReactComponent<ScaleIconUserFileUserE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileUserElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileUserEvents,
-    defineCustomElement: defineScaleIconUserFileUser
+    clientModule: clientComponents.ScaleIconUserFileUser as StencilReactComponent<ScaleIconUserFileUserElement, ScaleIconUserFileUserEvents, JSX.ScaleIconUserFileUser>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileVideosEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileVideos: StencilReactComponent<ScaleIconUserFileVideosElement, ScaleIconUserFileVideosEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileVideosElement, ScaleIconUserFileVideosEvents>({
+export const ScaleIconUserFileVideos: StencilReactComponent<ScaleIconUserFileVideosElement, ScaleIconUserFileVideosEvents, JSX.ScaleIconUserFileVideos> = /*@__PURE__*/ createComponent<ScaleIconUserFileVideosElement, ScaleIconUserFileVideosEvents, JSX.ScaleIconUserFileVideos>({
     tagName: 'scale-icon-user-file-videos',
     properties: {
         size: 'size',
@@ -8433,17 +6984,13 @@ export const ScaleIconUserFileVideos: StencilReactComponent<ScaleIconUserFileVid
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileVideosElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileVideosEvents,
-    defineCustomElement: defineScaleIconUserFileVideos
+    clientModule: clientComponents.ScaleIconUserFileVideos as StencilReactComponent<ScaleIconUserFileVideosElement, ScaleIconUserFileVideosEvents, JSX.ScaleIconUserFileVideos>,
+    serializeShadowRoot
 });
 
 export type ScaleIconUserFileWomanEvents = NonNullable<unknown>;
 
-export const ScaleIconUserFileWoman: StencilReactComponent<ScaleIconUserFileWomanElement, ScaleIconUserFileWomanEvents> = /*@__PURE__*/ createComponent<ScaleIconUserFileWomanElement, ScaleIconUserFileWomanEvents>({
+export const ScaleIconUserFileWoman: StencilReactComponent<ScaleIconUserFileWomanElement, ScaleIconUserFileWomanEvents, JSX.ScaleIconUserFileWoman> = /*@__PURE__*/ createComponent<ScaleIconUserFileWomanElement, ScaleIconUserFileWomanEvents, JSX.ScaleIconUserFileWoman>({
     tagName: 'scale-icon-user-file-woman',
     properties: {
         size: 'size',
@@ -8455,17 +7002,13 @@ export const ScaleIconUserFileWoman: StencilReactComponent<ScaleIconUserFileWoma
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconUserFileWomanElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconUserFileWomanEvents,
-    defineCustomElement: defineScaleIconUserFileWoman
+    clientModule: clientComponents.ScaleIconUserFileWoman as StencilReactComponent<ScaleIconUserFileWomanElement, ScaleIconUserFileWomanEvents, JSX.ScaleIconUserFileWoman>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherCloudyEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherCloudy: StencilReactComponent<ScaleIconWeatherCloudyElement, ScaleIconWeatherCloudyEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyElement, ScaleIconWeatherCloudyEvents>({
+export const ScaleIconWeatherCloudy: StencilReactComponent<ScaleIconWeatherCloudyElement, ScaleIconWeatherCloudyEvents, JSX.ScaleIconWeatherCloudy> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyElement, ScaleIconWeatherCloudyEvents, JSX.ScaleIconWeatherCloudy>({
     tagName: 'scale-icon-weather-cloudy',
     properties: {
         size: 'size',
@@ -8477,17 +7020,13 @@ export const ScaleIconWeatherCloudy: StencilReactComponent<ScaleIconWeatherCloud
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherCloudyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherCloudyEvents,
-    defineCustomElement: defineScaleIconWeatherCloudy
+    clientModule: clientComponents.ScaleIconWeatherCloudy as StencilReactComponent<ScaleIconWeatherCloudyElement, ScaleIconWeatherCloudyEvents, JSX.ScaleIconWeatherCloudy>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherCloudyRainEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherCloudyRain: StencilReactComponent<ScaleIconWeatherCloudyRainElement, ScaleIconWeatherCloudyRainEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyRainElement, ScaleIconWeatherCloudyRainEvents>({
+export const ScaleIconWeatherCloudyRain: StencilReactComponent<ScaleIconWeatherCloudyRainElement, ScaleIconWeatherCloudyRainEvents, JSX.ScaleIconWeatherCloudyRain> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyRainElement, ScaleIconWeatherCloudyRainEvents, JSX.ScaleIconWeatherCloudyRain>({
     tagName: 'scale-icon-weather-cloudy-rain',
     properties: {
         size: 'size',
@@ -8499,17 +7038,13 @@ export const ScaleIconWeatherCloudyRain: StencilReactComponent<ScaleIconWeatherC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherCloudyRainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherCloudyRainEvents,
-    defineCustomElement: defineScaleIconWeatherCloudyRain
+    clientModule: clientComponents.ScaleIconWeatherCloudyRain as StencilReactComponent<ScaleIconWeatherCloudyRainElement, ScaleIconWeatherCloudyRainEvents, JSX.ScaleIconWeatherCloudyRain>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherCloudySleetEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherCloudySleet: StencilReactComponent<ScaleIconWeatherCloudySleetElement, ScaleIconWeatherCloudySleetEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudySleetElement, ScaleIconWeatherCloudySleetEvents>({
+export const ScaleIconWeatherCloudySleet: StencilReactComponent<ScaleIconWeatherCloudySleetElement, ScaleIconWeatherCloudySleetEvents, JSX.ScaleIconWeatherCloudySleet> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudySleetElement, ScaleIconWeatherCloudySleetEvents, JSX.ScaleIconWeatherCloudySleet>({
     tagName: 'scale-icon-weather-cloudy-sleet',
     properties: {
         size: 'size',
@@ -8521,17 +7056,13 @@ export const ScaleIconWeatherCloudySleet: StencilReactComponent<ScaleIconWeather
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherCloudySleetElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherCloudySleetEvents,
-    defineCustomElement: defineScaleIconWeatherCloudySleet
+    clientModule: clientComponents.ScaleIconWeatherCloudySleet as StencilReactComponent<ScaleIconWeatherCloudySleetElement, ScaleIconWeatherCloudySleetEvents, JSX.ScaleIconWeatherCloudySleet>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherCloudySnowEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherCloudySnow: StencilReactComponent<ScaleIconWeatherCloudySnowElement, ScaleIconWeatherCloudySnowEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudySnowElement, ScaleIconWeatherCloudySnowEvents>({
+export const ScaleIconWeatherCloudySnow: StencilReactComponent<ScaleIconWeatherCloudySnowElement, ScaleIconWeatherCloudySnowEvents, JSX.ScaleIconWeatherCloudySnow> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudySnowElement, ScaleIconWeatherCloudySnowEvents, JSX.ScaleIconWeatherCloudySnow>({
     tagName: 'scale-icon-weather-cloudy-snow',
     properties: {
         size: 'size',
@@ -8543,17 +7074,13 @@ export const ScaleIconWeatherCloudySnow: StencilReactComponent<ScaleIconWeatherC
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherCloudySnowElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherCloudySnowEvents,
-    defineCustomElement: defineScaleIconWeatherCloudySnow
+    clientModule: clientComponents.ScaleIconWeatherCloudySnow as StencilReactComponent<ScaleIconWeatherCloudySnowElement, ScaleIconWeatherCloudySnowEvents, JSX.ScaleIconWeatherCloudySnow>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherCloudyThunderRainEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherCloudyThunderRain: StencilReactComponent<ScaleIconWeatherCloudyThunderRainElement, ScaleIconWeatherCloudyThunderRainEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyThunderRainElement, ScaleIconWeatherCloudyThunderRainEvents>({
+export const ScaleIconWeatherCloudyThunderRain: StencilReactComponent<ScaleIconWeatherCloudyThunderRainElement, ScaleIconWeatherCloudyThunderRainEvents, JSX.ScaleIconWeatherCloudyThunderRain> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyThunderRainElement, ScaleIconWeatherCloudyThunderRainEvents, JSX.ScaleIconWeatherCloudyThunderRain>({
     tagName: 'scale-icon-weather-cloudy-thunder-rain',
     properties: {
         size: 'size',
@@ -8565,17 +7092,13 @@ export const ScaleIconWeatherCloudyThunderRain: StencilReactComponent<ScaleIconW
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherCloudyThunderRainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherCloudyThunderRainEvents,
-    defineCustomElement: defineScaleIconWeatherCloudyThunderRain
+    clientModule: clientComponents.ScaleIconWeatherCloudyThunderRain as StencilReactComponent<ScaleIconWeatherCloudyThunderRainElement, ScaleIconWeatherCloudyThunderRainEvents, JSX.ScaleIconWeatherCloudyThunderRain>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherCloudyThunderSnowEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherCloudyThunderSnow: StencilReactComponent<ScaleIconWeatherCloudyThunderSnowElement, ScaleIconWeatherCloudyThunderSnowEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyThunderSnowElement, ScaleIconWeatherCloudyThunderSnowEvents>({
+export const ScaleIconWeatherCloudyThunderSnow: StencilReactComponent<ScaleIconWeatherCloudyThunderSnowElement, ScaleIconWeatherCloudyThunderSnowEvents, JSX.ScaleIconWeatherCloudyThunderSnow> = /*@__PURE__*/ createComponent<ScaleIconWeatherCloudyThunderSnowElement, ScaleIconWeatherCloudyThunderSnowEvents, JSX.ScaleIconWeatherCloudyThunderSnow>({
     tagName: 'scale-icon-weather-cloudy-thunder-snow',
     properties: {
         size: 'size',
@@ -8587,17 +7110,13 @@ export const ScaleIconWeatherCloudyThunderSnow: StencilReactComponent<ScaleIconW
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherCloudyThunderSnowElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherCloudyThunderSnowEvents,
-    defineCustomElement: defineScaleIconWeatherCloudyThunderSnow
+    clientModule: clientComponents.ScaleIconWeatherCloudyThunderSnow as StencilReactComponent<ScaleIconWeatherCloudyThunderSnowElement, ScaleIconWeatherCloudyThunderSnowEvents, JSX.ScaleIconWeatherCloudyThunderSnow>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherHeavySleetEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherHeavySleet: StencilReactComponent<ScaleIconWeatherHeavySleetElement, ScaleIconWeatherHeavySleetEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherHeavySleetElement, ScaleIconWeatherHeavySleetEvents>({
+export const ScaleIconWeatherHeavySleet: StencilReactComponent<ScaleIconWeatherHeavySleetElement, ScaleIconWeatherHeavySleetEvents, JSX.ScaleIconWeatherHeavySleet> = /*@__PURE__*/ createComponent<ScaleIconWeatherHeavySleetElement, ScaleIconWeatherHeavySleetEvents, JSX.ScaleIconWeatherHeavySleet>({
     tagName: 'scale-icon-weather-heavy-sleet',
     properties: {
         size: 'size',
@@ -8609,17 +7128,13 @@ export const ScaleIconWeatherHeavySleet: StencilReactComponent<ScaleIconWeatherH
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherHeavySleetElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherHeavySleetEvents,
-    defineCustomElement: defineScaleIconWeatherHeavySleet
+    clientModule: clientComponents.ScaleIconWeatherHeavySleet as StencilReactComponent<ScaleIconWeatherHeavySleetElement, ScaleIconWeatherHeavySleetEvents, JSX.ScaleIconWeatherHeavySleet>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherHeavySnowEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherHeavySnow: StencilReactComponent<ScaleIconWeatherHeavySnowElement, ScaleIconWeatherHeavySnowEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherHeavySnowElement, ScaleIconWeatherHeavySnowEvents>({
+export const ScaleIconWeatherHeavySnow: StencilReactComponent<ScaleIconWeatherHeavySnowElement, ScaleIconWeatherHeavySnowEvents, JSX.ScaleIconWeatherHeavySnow> = /*@__PURE__*/ createComponent<ScaleIconWeatherHeavySnowElement, ScaleIconWeatherHeavySnowEvents, JSX.ScaleIconWeatherHeavySnow>({
     tagName: 'scale-icon-weather-heavy-snow',
     properties: {
         size: 'size',
@@ -8631,17 +7146,13 @@ export const ScaleIconWeatherHeavySnow: StencilReactComponent<ScaleIconWeatherHe
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherHeavySnowElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherHeavySnowEvents,
-    defineCustomElement: defineScaleIconWeatherHeavySnow
+    clientModule: clientComponents.ScaleIconWeatherHeavySnow as StencilReactComponent<ScaleIconWeatherHeavySnowElement, ScaleIconWeatherHeavySnowEvents, JSX.ScaleIconWeatherHeavySnow>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonClearEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonClear: StencilReactComponent<ScaleIconWeatherMoonClearElement, ScaleIconWeatherMoonClearEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonClearElement, ScaleIconWeatherMoonClearEvents>({
+export const ScaleIconWeatherMoonClear: StencilReactComponent<ScaleIconWeatherMoonClearElement, ScaleIconWeatherMoonClearEvents, JSX.ScaleIconWeatherMoonClear> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonClearElement, ScaleIconWeatherMoonClearEvents, JSX.ScaleIconWeatherMoonClear>({
     tagName: 'scale-icon-weather-moon-clear',
     properties: {
         size: 'size',
@@ -8653,17 +7164,13 @@ export const ScaleIconWeatherMoonClear: StencilReactComponent<ScaleIconWeatherMo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonClearElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonClearEvents,
-    defineCustomElement: defineScaleIconWeatherMoonClear
+    clientModule: clientComponents.ScaleIconWeatherMoonClear as StencilReactComponent<ScaleIconWeatherMoonClearElement, ScaleIconWeatherMoonClearEvents, JSX.ScaleIconWeatherMoonClear>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonCloudyAEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonCloudyA: StencilReactComponent<ScaleIconWeatherMoonCloudyAElement, ScaleIconWeatherMoonCloudyAEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonCloudyAElement, ScaleIconWeatherMoonCloudyAEvents>({
+export const ScaleIconWeatherMoonCloudyA: StencilReactComponent<ScaleIconWeatherMoonCloudyAElement, ScaleIconWeatherMoonCloudyAEvents, JSX.ScaleIconWeatherMoonCloudyA> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonCloudyAElement, ScaleIconWeatherMoonCloudyAEvents, JSX.ScaleIconWeatherMoonCloudyA>({
     tagName: 'scale-icon-weather-moon-cloudy-a',
     properties: {
         size: 'size',
@@ -8675,17 +7182,13 @@ export const ScaleIconWeatherMoonCloudyA: StencilReactComponent<ScaleIconWeather
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonCloudyAElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonCloudyAEvents,
-    defineCustomElement: defineScaleIconWeatherMoonCloudyA
+    clientModule: clientComponents.ScaleIconWeatherMoonCloudyA as StencilReactComponent<ScaleIconWeatherMoonCloudyAElement, ScaleIconWeatherMoonCloudyAEvents, JSX.ScaleIconWeatherMoonCloudyA>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonCloudyBEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonCloudyB: StencilReactComponent<ScaleIconWeatherMoonCloudyBElement, ScaleIconWeatherMoonCloudyBEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonCloudyBElement, ScaleIconWeatherMoonCloudyBEvents>({
+export const ScaleIconWeatherMoonCloudyB: StencilReactComponent<ScaleIconWeatherMoonCloudyBElement, ScaleIconWeatherMoonCloudyBEvents, JSX.ScaleIconWeatherMoonCloudyB> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonCloudyBElement, ScaleIconWeatherMoonCloudyBEvents, JSX.ScaleIconWeatherMoonCloudyB>({
     tagName: 'scale-icon-weather-moon-cloudy-b',
     properties: {
         size: 'size',
@@ -8697,17 +7200,13 @@ export const ScaleIconWeatherMoonCloudyB: StencilReactComponent<ScaleIconWeather
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonCloudyBElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonCloudyBEvents,
-    defineCustomElement: defineScaleIconWeatherMoonCloudyB
+    clientModule: clientComponents.ScaleIconWeatherMoonCloudyB as StencilReactComponent<ScaleIconWeatherMoonCloudyBElement, ScaleIconWeatherMoonCloudyBEvents, JSX.ScaleIconWeatherMoonCloudyB>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonRainEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonRain: StencilReactComponent<ScaleIconWeatherMoonRainElement, ScaleIconWeatherMoonRainEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonRainElement, ScaleIconWeatherMoonRainEvents>({
+export const ScaleIconWeatherMoonRain: StencilReactComponent<ScaleIconWeatherMoonRainElement, ScaleIconWeatherMoonRainEvents, JSX.ScaleIconWeatherMoonRain> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonRainElement, ScaleIconWeatherMoonRainEvents, JSX.ScaleIconWeatherMoonRain>({
     tagName: 'scale-icon-weather-moon-rain',
     properties: {
         size: 'size',
@@ -8719,17 +7218,13 @@ export const ScaleIconWeatherMoonRain: StencilReactComponent<ScaleIconWeatherMoo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonRainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonRainEvents,
-    defineCustomElement: defineScaleIconWeatherMoonRain
+    clientModule: clientComponents.ScaleIconWeatherMoonRain as StencilReactComponent<ScaleIconWeatherMoonRainElement, ScaleIconWeatherMoonRainEvents, JSX.ScaleIconWeatherMoonRain>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonSleetEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonSleet: StencilReactComponent<ScaleIconWeatherMoonSleetElement, ScaleIconWeatherMoonSleetEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonSleetElement, ScaleIconWeatherMoonSleetEvents>({
+export const ScaleIconWeatherMoonSleet: StencilReactComponent<ScaleIconWeatherMoonSleetElement, ScaleIconWeatherMoonSleetEvents, JSX.ScaleIconWeatherMoonSleet> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonSleetElement, ScaleIconWeatherMoonSleetEvents, JSX.ScaleIconWeatherMoonSleet>({
     tagName: 'scale-icon-weather-moon-sleet',
     properties: {
         size: 'size',
@@ -8741,17 +7236,13 @@ export const ScaleIconWeatherMoonSleet: StencilReactComponent<ScaleIconWeatherMo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonSleetElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonSleetEvents,
-    defineCustomElement: defineScaleIconWeatherMoonSleet
+    clientModule: clientComponents.ScaleIconWeatherMoonSleet as StencilReactComponent<ScaleIconWeatherMoonSleetElement, ScaleIconWeatherMoonSleetEvents, JSX.ScaleIconWeatherMoonSleet>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonSnowEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonSnow: StencilReactComponent<ScaleIconWeatherMoonSnowElement, ScaleIconWeatherMoonSnowEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonSnowElement, ScaleIconWeatherMoonSnowEvents>({
+export const ScaleIconWeatherMoonSnow: StencilReactComponent<ScaleIconWeatherMoonSnowElement, ScaleIconWeatherMoonSnowEvents, JSX.ScaleIconWeatherMoonSnow> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonSnowElement, ScaleIconWeatherMoonSnowEvents, JSX.ScaleIconWeatherMoonSnow>({
     tagName: 'scale-icon-weather-moon-snow',
     properties: {
         size: 'size',
@@ -8763,17 +7254,13 @@ export const ScaleIconWeatherMoonSnow: StencilReactComponent<ScaleIconWeatherMoo
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonSnowElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonSnowEvents,
-    defineCustomElement: defineScaleIconWeatherMoonSnow
+    clientModule: clientComponents.ScaleIconWeatherMoonSnow as StencilReactComponent<ScaleIconWeatherMoonSnowElement, ScaleIconWeatherMoonSnowEvents, JSX.ScaleIconWeatherMoonSnow>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonThunderRainEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonThunderRain: StencilReactComponent<ScaleIconWeatherMoonThunderRainElement, ScaleIconWeatherMoonThunderRainEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonThunderRainElement, ScaleIconWeatherMoonThunderRainEvents>({
+export const ScaleIconWeatherMoonThunderRain: StencilReactComponent<ScaleIconWeatherMoonThunderRainElement, ScaleIconWeatherMoonThunderRainEvents, JSX.ScaleIconWeatherMoonThunderRain> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonThunderRainElement, ScaleIconWeatherMoonThunderRainEvents, JSX.ScaleIconWeatherMoonThunderRain>({
     tagName: 'scale-icon-weather-moon-thunder-rain',
     properties: {
         size: 'size',
@@ -8785,17 +7272,13 @@ export const ScaleIconWeatherMoonThunderRain: StencilReactComponent<ScaleIconWea
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonThunderRainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonThunderRainEvents,
-    defineCustomElement: defineScaleIconWeatherMoonThunderRain
+    clientModule: clientComponents.ScaleIconWeatherMoonThunderRain as StencilReactComponent<ScaleIconWeatherMoonThunderRainElement, ScaleIconWeatherMoonThunderRainEvents, JSX.ScaleIconWeatherMoonThunderRain>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherMoonThunderSnowEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherMoonThunderSnow: StencilReactComponent<ScaleIconWeatherMoonThunderSnowElement, ScaleIconWeatherMoonThunderSnowEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonThunderSnowElement, ScaleIconWeatherMoonThunderSnowEvents>({
+export const ScaleIconWeatherMoonThunderSnow: StencilReactComponent<ScaleIconWeatherMoonThunderSnowElement, ScaleIconWeatherMoonThunderSnowEvents, JSX.ScaleIconWeatherMoonThunderSnow> = /*@__PURE__*/ createComponent<ScaleIconWeatherMoonThunderSnowElement, ScaleIconWeatherMoonThunderSnowEvents, JSX.ScaleIconWeatherMoonThunderSnow>({
     tagName: 'scale-icon-weather-moon-thunder-snow',
     properties: {
         size: 'size',
@@ -8807,17 +7290,13 @@ export const ScaleIconWeatherMoonThunderSnow: StencilReactComponent<ScaleIconWea
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherMoonThunderSnowElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherMoonThunderSnowEvents,
-    defineCustomElement: defineScaleIconWeatherMoonThunderSnow
+    clientModule: clientComponents.ScaleIconWeatherMoonThunderSnow as StencilReactComponent<ScaleIconWeatherMoonThunderSnowElement, ScaleIconWeatherMoonThunderSnowEvents, JSX.ScaleIconWeatherMoonThunderSnow>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherOvercastEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherOvercast: StencilReactComponent<ScaleIconWeatherOvercastElement, ScaleIconWeatherOvercastEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherOvercastElement, ScaleIconWeatherOvercastEvents>({
+export const ScaleIconWeatherOvercast: StencilReactComponent<ScaleIconWeatherOvercastElement, ScaleIconWeatherOvercastEvents, JSX.ScaleIconWeatherOvercast> = /*@__PURE__*/ createComponent<ScaleIconWeatherOvercastElement, ScaleIconWeatherOvercastEvents, JSX.ScaleIconWeatherOvercast>({
     tagName: 'scale-icon-weather-overcast',
     properties: {
         size: 'size',
@@ -8829,17 +7308,13 @@ export const ScaleIconWeatherOvercast: StencilReactComponent<ScaleIconWeatherOve
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherOvercastElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherOvercastEvents,
-    defineCustomElement: defineScaleIconWeatherOvercast
+    clientModule: clientComponents.ScaleIconWeatherOvercast as StencilReactComponent<ScaleIconWeatherOvercastElement, ScaleIconWeatherOvercastEvents, JSX.ScaleIconWeatherOvercast>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherRainEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherRain: StencilReactComponent<ScaleIconWeatherRainElement, ScaleIconWeatherRainEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherRainElement, ScaleIconWeatherRainEvents>({
+export const ScaleIconWeatherRain: StencilReactComponent<ScaleIconWeatherRainElement, ScaleIconWeatherRainEvents, JSX.ScaleIconWeatherRain> = /*@__PURE__*/ createComponent<ScaleIconWeatherRainElement, ScaleIconWeatherRainEvents, JSX.ScaleIconWeatherRain>({
     tagName: 'scale-icon-weather-rain',
     properties: {
         size: 'size',
@@ -8851,17 +7326,13 @@ export const ScaleIconWeatherRain: StencilReactComponent<ScaleIconWeatherRainEle
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherRainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherRainEvents,
-    defineCustomElement: defineScaleIconWeatherRain
+    clientModule: clientComponents.ScaleIconWeatherRain as StencilReactComponent<ScaleIconWeatherRainElement, ScaleIconWeatherRainEvents, JSX.ScaleIconWeatherRain>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherSunnyEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherSunny: StencilReactComponent<ScaleIconWeatherSunnyElement, ScaleIconWeatherSunnyEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherSunnyElement, ScaleIconWeatherSunnyEvents>({
+export const ScaleIconWeatherSunny: StencilReactComponent<ScaleIconWeatherSunnyElement, ScaleIconWeatherSunnyEvents, JSX.ScaleIconWeatherSunny> = /*@__PURE__*/ createComponent<ScaleIconWeatherSunnyElement, ScaleIconWeatherSunnyEvents, JSX.ScaleIconWeatherSunny>({
     tagName: 'scale-icon-weather-sunny',
     properties: {
         size: 'size',
@@ -8873,17 +7344,13 @@ export const ScaleIconWeatherSunny: StencilReactComponent<ScaleIconWeatherSunnyE
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherSunnyElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherSunnyEvents,
-    defineCustomElement: defineScaleIconWeatherSunny
+    clientModule: clientComponents.ScaleIconWeatherSunny as StencilReactComponent<ScaleIconWeatherSunnyElement, ScaleIconWeatherSunnyEvents, JSX.ScaleIconWeatherSunny>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherThunderRainEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherThunderRain: StencilReactComponent<ScaleIconWeatherThunderRainElement, ScaleIconWeatherThunderRainEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherThunderRainElement, ScaleIconWeatherThunderRainEvents>({
+export const ScaleIconWeatherThunderRain: StencilReactComponent<ScaleIconWeatherThunderRainElement, ScaleIconWeatherThunderRainEvents, JSX.ScaleIconWeatherThunderRain> = /*@__PURE__*/ createComponent<ScaleIconWeatherThunderRainElement, ScaleIconWeatherThunderRainEvents, JSX.ScaleIconWeatherThunderRain>({
     tagName: 'scale-icon-weather-thunder-rain',
     properties: {
         size: 'size',
@@ -8895,17 +7362,13 @@ export const ScaleIconWeatherThunderRain: StencilReactComponent<ScaleIconWeather
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherThunderRainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherThunderRainEvents,
-    defineCustomElement: defineScaleIconWeatherThunderRain
+    clientModule: clientComponents.ScaleIconWeatherThunderRain as StencilReactComponent<ScaleIconWeatherThunderRainElement, ScaleIconWeatherThunderRainEvents, JSX.ScaleIconWeatherThunderRain>,
+    serializeShadowRoot
 });
 
 export type ScaleIconWeatherThunderSnowEvents = NonNullable<unknown>;
 
-export const ScaleIconWeatherThunderSnow: StencilReactComponent<ScaleIconWeatherThunderSnowElement, ScaleIconWeatherThunderSnowEvents> = /*@__PURE__*/ createComponent<ScaleIconWeatherThunderSnowElement, ScaleIconWeatherThunderSnowEvents>({
+export const ScaleIconWeatherThunderSnow: StencilReactComponent<ScaleIconWeatherThunderSnowElement, ScaleIconWeatherThunderSnowEvents, JSX.ScaleIconWeatherThunderSnow> = /*@__PURE__*/ createComponent<ScaleIconWeatherThunderSnowElement, ScaleIconWeatherThunderSnowEvents, JSX.ScaleIconWeatherThunderSnow>({
     tagName: 'scale-icon-weather-thunder-snow',
     properties: {
         size: 'size',
@@ -8917,23 +7380,19 @@ export const ScaleIconWeatherThunderSnow: StencilReactComponent<ScaleIconWeather
         focusable: 'focusable'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleIconWeatherThunderSnowElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleIconWeatherThunderSnowEvents,
-    defineCustomElement: defineScaleIconWeatherThunderSnow
+    clientModule: clientComponents.ScaleIconWeatherThunderSnow as StencilReactComponent<ScaleIconWeatherThunderSnowElement, ScaleIconWeatherThunderSnowEvents, JSX.ScaleIconWeatherThunderSnow>,
+    serializeShadowRoot
 });
 
 export type ScaleInputEvents = {
     onScaleInput: EventName<ScaleInputCustomEvent<KeyboardEvent>>,
     onScaleChange: EventName<ScaleInputCustomEvent<InputChangeEventDetail>>,
-    onScaleFocus: EventName<CustomEvent<void>>,
-    onScaleBlur: EventName<CustomEvent<void>>,
+    onScaleFocus: EventName<ScaleInputCustomEvent<void>>,
+    onScaleBlur: EventName<ScaleInputCustomEvent<void>>,
     onScaleKeydown: EventName<ScaleInputCustomEvent<KeyboardEvent>>
 };
 
-export const ScaleInput: StencilReactComponent<ScaleInputElement, ScaleInputEvents> = /*@__PURE__*/ createComponent<ScaleInputElement, ScaleInputEvents>({
+export const ScaleInput: StencilReactComponent<ScaleInputElement, ScaleInputEvents, JSX.ScaleInput> = /*@__PURE__*/ createComponent<ScaleInputElement, ScaleInputEvents, JSX.ScaleInput>({
     tagName: 'scale-input',
     properties: {
         type: 'type',
@@ -8965,23 +7424,13 @@ export const ScaleInput: StencilReactComponent<ScaleInputElement, ScaleInputEven
         dataQa: 'data-qa'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleInputElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleInput: 'scale-input',
-        onScaleChange: 'scale-change',
-        onScaleFocus: 'scale-focus',
-        onScaleBlur: 'scale-blur',
-        onScaleKeydown: 'scale-keydown'
-    } as ScaleInputEvents,
-    defineCustomElement: defineScaleInput
+    clientModule: clientComponents.ScaleInput as StencilReactComponent<ScaleInputElement, ScaleInputEvents, JSX.ScaleInput>,
+    serializeShadowRoot
 });
 
 export type ScaleLinkEvents = NonNullable<unknown>;
 
-export const ScaleLink: StencilReactComponent<ScaleLinkElement, ScaleLinkEvents> = /*@__PURE__*/ createComponent<ScaleLinkElement, ScaleLinkEvents>({
+export const ScaleLink: StencilReactComponent<ScaleLinkElement, ScaleLinkEvents, JSX.ScaleLink> = /*@__PURE__*/ createComponent<ScaleLinkElement, ScaleLinkEvents, JSX.ScaleLink>({
     tagName: 'scale-link',
     properties: {
         disabled: 'disabled',
@@ -8999,34 +7448,26 @@ export const ScaleLink: StencilReactComponent<ScaleLinkElement, ScaleLinkEvents>
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleLinkElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleLinkEvents,
-    defineCustomElement: defineScaleLink
+    clientModule: clientComponents.ScaleLink as StencilReactComponent<ScaleLinkElement, ScaleLinkEvents, JSX.ScaleLink>,
+    serializeShadowRoot
 });
 
 export type ScaleListEvents = NonNullable<unknown>;
 
-export const ScaleList: StencilReactComponent<ScaleListElement, ScaleListEvents> = /*@__PURE__*/ createComponent<ScaleListElement, ScaleListEvents>({
+export const ScaleList: StencilReactComponent<ScaleListElement, ScaleListEvents, JSX.ScaleList> = /*@__PURE__*/ createComponent<ScaleListElement, ScaleListEvents, JSX.ScaleList>({
     tagName: 'scale-list',
     properties: {
         ordered: 'ordered',
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleListElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleListEvents,
-    defineCustomElement: defineScaleList
+    clientModule: clientComponents.ScaleList as StencilReactComponent<ScaleListElement, ScaleListEvents, JSX.ScaleList>,
+    serializeShadowRoot
 });
 
 export type ScaleListItemEvents = NonNullable<unknown>;
 
-export const ScaleListItem: StencilReactComponent<ScaleListItemElement, ScaleListItemEvents> = /*@__PURE__*/ createComponent<ScaleListItemElement, ScaleListItemEvents>({
+export const ScaleListItem: StencilReactComponent<ScaleListItemElement, ScaleListItemEvents, JSX.ScaleListItem> = /*@__PURE__*/ createComponent<ScaleListItemElement, ScaleListItemEvents, JSX.ScaleListItem>({
     tagName: 'scale-list-item',
     properties: {
         ordered: 'ordered',
@@ -9035,17 +7476,13 @@ export const ScaleListItem: StencilReactComponent<ScaleListItemElement, ScaleLis
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleListItemElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleListItemEvents,
-    defineCustomElement: defineScaleListItem
+    clientModule: clientComponents.ScaleListItem as StencilReactComponent<ScaleListItemElement, ScaleListItemEvents, JSX.ScaleListItem>,
+    serializeShadowRoot
 });
 
 export type ScaleLoadingSpinnerEvents = NonNullable<unknown>;
 
-export const ScaleLoadingSpinner: StencilReactComponent<ScaleLoadingSpinnerElement, ScaleLoadingSpinnerEvents> = /*@__PURE__*/ createComponent<ScaleLoadingSpinnerElement, ScaleLoadingSpinnerEvents>({
+export const ScaleLoadingSpinner: StencilReactComponent<ScaleLoadingSpinnerElement, ScaleLoadingSpinnerEvents, JSX.ScaleLoadingSpinner> = /*@__PURE__*/ createComponent<ScaleLoadingSpinnerElement, ScaleLoadingSpinnerEvents, JSX.ScaleLoadingSpinner>({
     tagName: 'scale-loading-spinner',
     properties: {
         variant: 'variant',
@@ -9055,17 +7492,13 @@ export const ScaleLoadingSpinner: StencilReactComponent<ScaleLoadingSpinnerEleme
         size: 'size'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleLoadingSpinnerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleLoadingSpinnerEvents,
-    defineCustomElement: defineScaleLoadingSpinner
+    clientModule: clientComponents.ScaleLoadingSpinner as StencilReactComponent<ScaleLoadingSpinnerElement, ScaleLoadingSpinnerEvents, JSX.ScaleLoadingSpinner>,
+    serializeShadowRoot
 });
 
 export type ScaleLogoEvents = NonNullable<unknown>;
 
-export const ScaleLogo: StencilReactComponent<ScaleLogoElement, ScaleLogoEvents> = /*@__PURE__*/ createComponent<ScaleLogoElement, ScaleLogoEvents>({
+export const ScaleLogo: StencilReactComponent<ScaleLogoElement, ScaleLogoEvents, JSX.ScaleLogo> = /*@__PURE__*/ createComponent<ScaleLogoElement, ScaleLogoEvents, JSX.ScaleLogo>({
     tagName: 'scale-logo',
     properties: {
         variant: 'variant',
@@ -9083,17 +7516,13 @@ export const ScaleLogo: StencilReactComponent<ScaleLogoElement, ScaleLogoEvents>
         logoAriaHidden: 'logo-aria-hidden'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleLogoElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleLogoEvents,
-    defineCustomElement: defineScaleLogo
+    clientModule: clientComponents.ScaleLogo as StencilReactComponent<ScaleLogoElement, ScaleLogoEvents, JSX.ScaleLogo>,
+    serializeShadowRoot
 });
 
 export type ScaleLogoSvgEvents = NonNullable<unknown>;
 
-export const ScaleLogoSvg: StencilReactComponent<ScaleLogoSvgElement, ScaleLogoSvgEvents> = /*@__PURE__*/ createComponent<ScaleLogoSvgElement, ScaleLogoSvgEvents>({
+export const ScaleLogoSvg: StencilReactComponent<ScaleLogoSvgElement, ScaleLogoSvgEvents, JSX.ScaleLogoSvg> = /*@__PURE__*/ createComponent<ScaleLogoSvgElement, ScaleLogoSvgEvents, JSX.ScaleLogoSvg>({
     tagName: 'scale-logo-svg',
     properties: {
         color: 'color',
@@ -9104,17 +7533,13 @@ export const ScaleLogoSvg: StencilReactComponent<ScaleLogoSvgElement, ScaleLogoS
         logoHideTitle: 'logo-hide-title'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleLogoSvgElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleLogoSvgEvents,
-    defineCustomElement: defineScaleLogoSvg
+    clientModule: clientComponents.ScaleLogoSvg as StencilReactComponent<ScaleLogoSvgElement, ScaleLogoSvgEvents, JSX.ScaleLogoSvg>,
+    serializeShadowRoot
 });
 
 export type ScaleMenuFlyoutEvents = NonNullable<unknown>;
 
-export const ScaleMenuFlyout: StencilReactComponent<ScaleMenuFlyoutElement, ScaleMenuFlyoutEvents> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutElement, ScaleMenuFlyoutEvents>({
+export const ScaleMenuFlyout: StencilReactComponent<ScaleMenuFlyoutElement, ScaleMenuFlyoutEvents, JSX.ScaleMenuFlyout> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutElement, ScaleMenuFlyoutEvents, JSX.ScaleMenuFlyout>({
     tagName: 'scale-menu-flyout',
     properties: {
         closeOnSelect: 'close-on-select',
@@ -9123,35 +7548,23 @@ export const ScaleMenuFlyout: StencilReactComponent<ScaleMenuFlyoutElement, Scal
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleMenuFlyoutElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleMenuFlyoutEvents,
-    defineCustomElement: defineScaleMenuFlyout
+    clientModule: clientComponents.ScaleMenuFlyout as StencilReactComponent<ScaleMenuFlyoutElement, ScaleMenuFlyoutEvents, JSX.ScaleMenuFlyout>,
+    serializeShadowRoot
 });
 
 export type ScaleMenuFlyoutDividerEvents = NonNullable<unknown>;
 
-export const ScaleMenuFlyoutDivider: StencilReactComponent<ScaleMenuFlyoutDividerElement, ScaleMenuFlyoutDividerEvents> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutDividerElement, ScaleMenuFlyoutDividerEvents>({
+export const ScaleMenuFlyoutDivider: StencilReactComponent<ScaleMenuFlyoutDividerElement, ScaleMenuFlyoutDividerEvents, JSX.ScaleMenuFlyoutDivider> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutDividerElement, ScaleMenuFlyoutDividerEvents, JSX.ScaleMenuFlyoutDivider>({
     tagName: 'scale-menu-flyout-divider',
     properties: { styles: 'styles' },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleMenuFlyoutDividerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleMenuFlyoutDividerEvents,
-    defineCustomElement: defineScaleMenuFlyoutDivider
+    clientModule: clientComponents.ScaleMenuFlyoutDivider as StencilReactComponent<ScaleMenuFlyoutDividerElement, ScaleMenuFlyoutDividerEvents, JSX.ScaleMenuFlyoutDivider>,
+    serializeShadowRoot
 });
 
-export type ScaleMenuFlyoutItemEvents = {
-    onScaleSelect: EventName<ScaleMenuFlyoutItemCustomEvent<{
-        item: HTMLElement;
-    }>>
-};
+export type ScaleMenuFlyoutItemEvents = { onScaleSelect: EventName<ScaleMenuFlyoutItemCustomEvent<{ item: HTMLElement; }>> };
 
-export const ScaleMenuFlyoutItem: StencilReactComponent<ScaleMenuFlyoutItemElement, ScaleMenuFlyoutItemEvents> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutItemElement, ScaleMenuFlyoutItemEvents>({
+export const ScaleMenuFlyoutItem: StencilReactComponent<ScaleMenuFlyoutItemElement, ScaleMenuFlyoutItemEvents, JSX.ScaleMenuFlyoutItem> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutItemElement, ScaleMenuFlyoutItemEvents, JSX.ScaleMenuFlyoutItem>({
     tagName: 'scale-menu-flyout-item',
     properties: {
         cascade: 'cascade',
@@ -9163,24 +7576,16 @@ export const ScaleMenuFlyoutItem: StencilReactComponent<ScaleMenuFlyoutItemEleme
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleMenuFlyoutItemElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleSelect: 'scale-select' } as ScaleMenuFlyoutItemEvents,
-    defineCustomElement: defineScaleMenuFlyoutItem
+    clientModule: clientComponents.ScaleMenuFlyoutItem as StencilReactComponent<ScaleMenuFlyoutItemElement, ScaleMenuFlyoutItemEvents, JSX.ScaleMenuFlyoutItem>,
+    serializeShadowRoot
 });
 
 export type ScaleMenuFlyoutListEvents = {
-    onScaleOpen: EventName<ScaleMenuFlyoutListCustomEvent<{
-        list: HTMLElement;
-    }>>,
-    onScaleClose: EventName<ScaleMenuFlyoutListCustomEvent<{
-        list: HTMLElement;
-    }>>
+    onScaleOpen: EventName<ScaleMenuFlyoutListCustomEvent<{ list: HTMLElement; }>>,
+    onScaleClose: EventName<ScaleMenuFlyoutListCustomEvent<{ list: HTMLElement; }>>
 };
 
-export const ScaleMenuFlyoutList: StencilReactComponent<ScaleMenuFlyoutListElement, ScaleMenuFlyoutListEvents> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutListElement, ScaleMenuFlyoutListEvents>({
+export const ScaleMenuFlyoutList: StencilReactComponent<ScaleMenuFlyoutListElement, ScaleMenuFlyoutListEvents, JSX.ScaleMenuFlyoutList> = /*@__PURE__*/ createComponent<ScaleMenuFlyoutListElement, ScaleMenuFlyoutListEvents, JSX.ScaleMenuFlyoutList>({
     tagName: 'scale-menu-flyout-list',
     properties: {
         opened: 'opened',
@@ -9193,24 +7598,17 @@ export const ScaleMenuFlyoutList: StencilReactComponent<ScaleMenuFlyoutListEleme
         preventFlipVertical: 'prevent-flip-vertical'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleMenuFlyoutListElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleOpen: 'scale-open',
-        onScaleClose: 'scale-close'
-    } as ScaleMenuFlyoutListEvents,
-    defineCustomElement: defineScaleMenuFlyoutList
+    clientModule: clientComponents.ScaleMenuFlyoutList as StencilReactComponent<ScaleMenuFlyoutListElement, ScaleMenuFlyoutListEvents, JSX.ScaleMenuFlyoutList>,
+    serializeShadowRoot
 });
 
 export type ScaleModalEvents = {
-    onScaleOpen: EventName<CustomEvent<void>>,
+    onScaleOpen: EventName<ScaleModalCustomEvent<void>>,
     onScaleBeforeClose: EventName<ScaleModalCustomEvent<BeforeCloseEventDetail>>,
-    onScaleClose: EventName<CustomEvent<void>>
+    onScaleClose: EventName<ScaleModalCustomEvent<void>>
 };
 
-export const ScaleModal: StencilReactComponent<ScaleModalElement, ScaleModalEvents> = /*@__PURE__*/ createComponent<ScaleModalElement, ScaleModalEvents>({
+export const ScaleModal: StencilReactComponent<ScaleModalElement, ScaleModalEvents, JSX.ScaleModal> = /*@__PURE__*/ createComponent<ScaleModalElement, ScaleModalEvents, JSX.ScaleModal>({
     tagName: 'scale-modal',
     properties: {
         heading: 'heading',
@@ -9225,21 +7623,13 @@ export const ScaleModal: StencilReactComponent<ScaleModalElement, ScaleModalEven
         allowInjectingStyleToBody: 'allow-injecting-style-to-body'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleModalElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleOpen: 'scale-open',
-        onScaleBeforeClose: 'scale-before-close',
-        onScaleClose: 'scale-close'
-    } as ScaleModalEvents,
-    defineCustomElement: defineScaleModal
+    clientModule: clientComponents.ScaleModal as StencilReactComponent<ScaleModalElement, ScaleModalEvents, JSX.ScaleModal>,
+    serializeShadowRoot
 });
 
 export type ScaleNavIconEvents = NonNullable<unknown>;
 
-export const ScaleNavIcon: StencilReactComponent<ScaleNavIconElement, ScaleNavIconEvents> = /*@__PURE__*/ createComponent<ScaleNavIconElement, ScaleNavIconEvents>({
+export const ScaleNavIcon: StencilReactComponent<ScaleNavIconElement, ScaleNavIconEvents, JSX.ScaleNavIcon> = /*@__PURE__*/ createComponent<ScaleNavIconElement, ScaleNavIconEvents, JSX.ScaleNavIcon>({
     tagName: 'scale-nav-icon',
     properties: {
         isActive: 'is-active',
@@ -9256,17 +7646,13 @@ export const ScaleNavIcon: StencilReactComponent<ScaleNavIconElement, ScaleNavIc
         badgeLabel: 'badge-label'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNavIconElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleNavIconEvents,
-    defineCustomElement: defineScaleNavIcon
+    clientModule: clientComponents.ScaleNavIcon as StencilReactComponent<ScaleNavIconElement, ScaleNavIconEvents, JSX.ScaleNavIcon>,
+    serializeShadowRoot
 });
 
 export type ScaleNavMainEvents = NonNullable<unknown>;
 
-export const ScaleNavMain: StencilReactComponent<ScaleNavMainElement, ScaleNavMainEvents> = /*@__PURE__*/ createComponent<ScaleNavMainElement, ScaleNavMainEvents>({
+export const ScaleNavMain: StencilReactComponent<ScaleNavMainElement, ScaleNavMainEvents, JSX.ScaleNavMain> = /*@__PURE__*/ createComponent<ScaleNavMainElement, ScaleNavMainEvents, JSX.ScaleNavMain>({
     tagName: 'scale-nav-main',
     properties: {
         isActive: 'is-active',
@@ -9281,17 +7667,13 @@ export const ScaleNavMain: StencilReactComponent<ScaleNavMainElement, ScaleNavMa
         clickLink: 'click-link'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNavMainElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleNavMainEvents,
-    defineCustomElement: defineScaleNavMain
+    clientModule: clientComponents.ScaleNavMain as StencilReactComponent<ScaleNavMainElement, ScaleNavMainEvents, JSX.ScaleNavMain>,
+    serializeShadowRoot
 });
 
 export type ScaleNavSegmentEvents = NonNullable<unknown>;
 
-export const ScaleNavSegment: StencilReactComponent<ScaleNavSegmentElement, ScaleNavSegmentEvents> = /*@__PURE__*/ createComponent<ScaleNavSegmentElement, ScaleNavSegmentEvents>({
+export const ScaleNavSegment: StencilReactComponent<ScaleNavSegmentElement, ScaleNavSegmentEvents, JSX.ScaleNavSegment> = /*@__PURE__*/ createComponent<ScaleNavSegmentElement, ScaleNavSegmentEvents, JSX.ScaleNavSegment>({
     tagName: 'scale-nav-segment',
     properties: {
         isActive: 'is-active',
@@ -9299,21 +7681,17 @@ export const ScaleNavSegment: StencilReactComponent<ScaleNavSegmentElement, Scal
         href: 'href'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNavSegmentElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleNavSegmentEvents,
-    defineCustomElement: defineScaleNavSegment
+    clientModule: clientComponents.ScaleNavSegment as StencilReactComponent<ScaleNavSegmentElement, ScaleNavSegmentEvents, JSX.ScaleNavSegment>,
+    serializeShadowRoot
 });
 
 export type ScaleNotificationEvents = {
-    onScaleOpen: EventName<CustomEvent<void>>,
+    onScaleOpen: EventName<ScaleNotificationCustomEvent<void>>,
     onScaleBeforeClose: EventName<ScaleNotificationCustomEvent<BeforeCloseEventDetail>>,
-    onScaleClose: EventName<CustomEvent<void>>
+    onScaleClose: EventName<ScaleNotificationCustomEvent<void>>
 };
 
-export const ScaleNotification: StencilReactComponent<ScaleNotificationElement, ScaleNotificationEvents> = /*@__PURE__*/ createComponent<ScaleNotificationElement, ScaleNotificationEvents>({
+export const ScaleNotification: StencilReactComponent<ScaleNotificationElement, ScaleNotificationEvents, JSX.ScaleNotification> = /*@__PURE__*/ createComponent<ScaleNotificationElement, ScaleNotificationEvents, JSX.ScaleNotification>({
     tagName: 'scale-notification',
     properties: {
         heading: 'heading',
@@ -9331,21 +7709,13 @@ export const ScaleNotification: StencilReactComponent<ScaleNotificationElement,
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNotificationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleOpen: 'scale-open',
-        onScaleBeforeClose: 'scale-before-close',
-        onScaleClose: 'scale-close'
-    } as ScaleNotificationEvents,
-    defineCustomElement: defineScaleNotification
+    clientModule: clientComponents.ScaleNotification as StencilReactComponent<ScaleNotificationElement, ScaleNotificationEvents, JSX.ScaleNotification>,
+    serializeShadowRoot
 });
 
 export type ScaleNotificationBadgeEvents = NonNullable<unknown>;
 
-export const ScaleNotificationBadge: StencilReactComponent<ScaleNotificationBadgeElement, ScaleNotificationBadgeEvents> = /*@__PURE__*/ createComponent<ScaleNotificationBadgeElement, ScaleNotificationBadgeEvents>({
+export const ScaleNotificationBadge: StencilReactComponent<ScaleNotificationBadgeElement, ScaleNotificationBadgeEvents, JSX.ScaleNotificationBadge> = /*@__PURE__*/ createComponent<ScaleNotificationBadgeElement, ScaleNotificationBadgeEvents, JSX.ScaleNotificationBadge>({
     tagName: 'scale-notification-badge',
     properties: {
         label: 'label',
@@ -9354,17 +7724,13 @@ export const ScaleNotificationBadge: StencilReactComponent<ScaleNotificationBadg
         clickHandler: 'click-handler'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNotificationBadgeElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleNotificationBadgeEvents,
-    defineCustomElement: defineScaleNotificationBadge
+    clientModule: clientComponents.ScaleNotificationBadge as StencilReactComponent<ScaleNotificationBadgeElement, ScaleNotificationBadgeEvents, JSX.ScaleNotificationBadge>,
+    serializeShadowRoot
 });
 
-export type ScaleNotificationBannerEvents = { onScaleClose: EventName<CustomEvent<void>> };
+export type ScaleNotificationBannerEvents = { onScaleClose: EventName<ScaleNotificationBannerCustomEvent<void>> };
 
-export const ScaleNotificationBanner: StencilReactComponent<ScaleNotificationBannerElement, ScaleNotificationBannerEvents> = /*@__PURE__*/ createComponent<ScaleNotificationBannerElement, ScaleNotificationBannerEvents>({
+export const ScaleNotificationBanner: StencilReactComponent<ScaleNotificationBannerElement, ScaleNotificationBannerEvents, JSX.ScaleNotificationBanner> = /*@__PURE__*/ createComponent<ScaleNotificationBannerElement, ScaleNotificationBannerEvents, JSX.ScaleNotificationBanner>({
     tagName: 'scale-notification-banner',
     properties: {
         variant: 'variant',
@@ -9377,17 +7743,13 @@ export const ScaleNotificationBanner: StencilReactComponent<ScaleNotificationBan
         closeButtonTitle: 'close-button-title'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNotificationBannerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleClose: 'scale-close' } as ScaleNotificationBannerEvents,
-    defineCustomElement: defineScaleNotificationBanner
+    clientModule: clientComponents.ScaleNotificationBanner as StencilReactComponent<ScaleNotificationBannerElement, ScaleNotificationBannerEvents, JSX.ScaleNotificationBanner>,
+    serializeShadowRoot
 });
 
-export type ScaleNotificationMessageEvents = { onScaleClose: EventName<CustomEvent<void>> };
+export type ScaleNotificationMessageEvents = { onScaleClose: EventName<ScaleNotificationMessageCustomEvent<void>> };
 
-export const ScaleNotificationMessage: StencilReactComponent<ScaleNotificationMessageElement, ScaleNotificationMessageEvents> = /*@__PURE__*/ createComponent<ScaleNotificationMessageElement, ScaleNotificationMessageEvents>({
+export const ScaleNotificationMessage: StencilReactComponent<ScaleNotificationMessageElement, ScaleNotificationMessageEvents, JSX.ScaleNotificationMessage> = /*@__PURE__*/ createComponent<ScaleNotificationMessageElement, ScaleNotificationMessageEvents, JSX.ScaleNotificationMessage>({
     tagName: 'scale-notification-message',
     properties: {
         variant: 'variant',
@@ -9399,20 +7761,16 @@ export const ScaleNotificationMessage: StencilReactComponent<ScaleNotificationMe
         closeButtonTitle: 'close-button-title'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNotificationMessageElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleClose: 'scale-close' } as ScaleNotificationMessageEvents,
-    defineCustomElement: defineScaleNotificationMessage
+    clientModule: clientComponents.ScaleNotificationMessage as StencilReactComponent<ScaleNotificationMessageElement, ScaleNotificationMessageEvents, JSX.ScaleNotificationMessage>,
+    serializeShadowRoot
 });
 
 export type ScaleNotificationToastEvents = {
-    onScaleClosing: EventName<CustomEvent<void>>,
-    onScaleClose: EventName<CustomEvent<void>>
+    onScaleClosing: EventName<ScaleNotificationToastCustomEvent<void>>,
+    onScaleClose: EventName<ScaleNotificationToastCustomEvent<void>>
 };
 
-export const ScaleNotificationToast: StencilReactComponent<ScaleNotificationToastElement, ScaleNotificationToastEvents> = /*@__PURE__*/ createComponent<ScaleNotificationToastElement, ScaleNotificationToastEvents>({
+export const ScaleNotificationToast: StencilReactComponent<ScaleNotificationToastElement, ScaleNotificationToastEvents, JSX.ScaleNotificationToast> = /*@__PURE__*/ createComponent<ScaleNotificationToastElement, ScaleNotificationToastEvents, JSX.ScaleNotificationToast>({
     tagName: 'scale-notification-toast',
     properties: {
         variant: 'variant',
@@ -9431,20 +7789,13 @@ export const ScaleNotificationToast: StencilReactComponent<ScaleNotificationToas
         href: 'href'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleNotificationToastElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleClosing: 'scale-closing',
-        onScaleClose: 'scale-close'
-    } as ScaleNotificationToastEvents,
-    defineCustomElement: defineScaleNotificationToast
+    clientModule: clientComponents.ScaleNotificationToast as StencilReactComponent<ScaleNotificationToastElement, ScaleNotificationToastEvents, JSX.ScaleNotificationToast>,
+    serializeShadowRoot
 });
 
 export type ScalePaginationEvents = { onScalePagination: EventName<ScalePaginationCustomEvent<PaginationEventDetail>> };
 
-export const ScalePagination: StencilReactComponent<ScalePaginationElement, ScalePaginationEvents> = /*@__PURE__*/ createComponent<ScalePaginationElement, ScalePaginationEvents>({
+export const ScalePagination: StencilReactComponent<ScalePaginationElement, ScalePaginationEvents, JSX.ScalePagination> = /*@__PURE__*/ createComponent<ScalePaginationElement, ScalePaginationEvents, JSX.ScalePagination>({
     tagName: 'scale-pagination',
     properties: {
         hideBorders: 'hide-borders',
@@ -9461,17 +7812,13 @@ export const ScalePagination: StencilReactComponent<ScalePaginationElement, Scal
         ariaLabelLastPage: 'aria-label-last-page'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScalePaginationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScalePagination: 'scale-pagination' } as ScalePaginationEvents,
-    defineCustomElement: defineScalePagination
+    clientModule: clientComponents.ScalePagination as StencilReactComponent<ScalePaginationElement, ScalePaginationEvents, JSX.ScalePagination>,
+    serializeShadowRoot
 });
 
 export type ScaleProgressBarEvents = NonNullable<unknown>;
 
-export const ScaleProgressBar: StencilReactComponent<ScaleProgressBarElement, ScaleProgressBarEvents> = /*@__PURE__*/ createComponent<ScaleProgressBarElement, ScaleProgressBarEvents>({
+export const ScaleProgressBar: StencilReactComponent<ScaleProgressBarElement, ScaleProgressBarEvents, JSX.ScaleProgressBar> = /*@__PURE__*/ createComponent<ScaleProgressBarElement, ScaleProgressBarEvents, JSX.ScaleProgressBar>({
     tagName: 'scale-progress-bar',
     properties: {
         busy: 'busy',
@@ -9489,17 +7836,13 @@ export const ScaleProgressBar: StencilReactComponent<ScaleProgressBarElement, Sc
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleProgressBarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleProgressBarEvents,
-    defineCustomElement: defineScaleProgressBar
+    clientModule: clientComponents.ScaleProgressBar as StencilReactComponent<ScaleProgressBarElement, ScaleProgressBarEvents, JSX.ScaleProgressBar>,
+    serializeShadowRoot
 });
 
 export type ScaleRadioButtonEvents = { onScaleChange: EventName<ScaleRadioButtonCustomEvent<InputChangeEventDetail>> };
 
-export const ScaleRadioButton: StencilReactComponent<ScaleRadioButtonElement, ScaleRadioButtonEvents> = /*@__PURE__*/ createComponent<ScaleRadioButtonElement, ScaleRadioButtonEvents>({
+export const ScaleRadioButton: StencilReactComponent<ScaleRadioButtonElement, ScaleRadioButtonEvents, JSX.ScaleRadioButton> = /*@__PURE__*/ createComponent<ScaleRadioButtonElement, ScaleRadioButtonEvents, JSX.ScaleRadioButton>({
     tagName: 'scale-radio-button',
     properties: {
         name: 'name',
@@ -9516,17 +7859,13 @@ export const ScaleRadioButton: StencilReactComponent<ScaleRadioButtonElement, Sc
         dataQa: 'data-qa'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleRadioButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleChange: 'scale-change' } as ScaleRadioButtonEvents,
-    defineCustomElement: defineScaleRadioButton
+    clientModule: clientComponents.ScaleRadioButton as StencilReactComponent<ScaleRadioButtonElement, ScaleRadioButtonEvents, JSX.ScaleRadioButton>,
+    serializeShadowRoot
 });
 
 export type ScaleRadioButtonGroupEvents = NonNullable<unknown>;
 
-export const ScaleRadioButtonGroup: StencilReactComponent<ScaleRadioButtonGroupElement, ScaleRadioButtonGroupEvents> = /*@__PURE__*/ createComponent<ScaleRadioButtonGroupElement, ScaleRadioButtonGroupEvents>({
+export const ScaleRadioButtonGroup: StencilReactComponent<ScaleRadioButtonGroupElement, ScaleRadioButtonGroupEvents, JSX.ScaleRadioButtonGroup> = /*@__PURE__*/ createComponent<ScaleRadioButtonGroupElement, ScaleRadioButtonGroupEvents, JSX.ScaleRadioButtonGroup>({
     tagName: 'scale-radio-button-group',
     properties: {
         label: 'label',
@@ -9535,17 +7874,13 @@ export const ScaleRadioButtonGroup: StencilReactComponent<ScaleRadioButtonGroupE
         invalid: 'invalid'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleRadioButtonGroupElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleRadioButtonGroupEvents,
-    defineCustomElement: defineScaleRadioButtonGroup
+    clientModule: clientComponents.ScaleRadioButtonGroup as StencilReactComponent<ScaleRadioButtonGroupElement, ScaleRadioButtonGroupEvents, JSX.ScaleRadioButtonGroup>,
+    serializeShadowRoot
 });
 
-export type ScaleRatingStarsEvents = { onScaleChange: EventName<CustomEvent<any>> };
+export type ScaleRatingStarsEvents = { onScaleChange: EventName<ScaleRatingStarsCustomEvent<any>> };
 
-export const ScaleRatingStars: StencilReactComponent<ScaleRatingStarsElement, ScaleRatingStarsEvents> = /*@__PURE__*/ createComponent<ScaleRatingStarsElement, ScaleRatingStarsEvents>({
+export const ScaleRatingStars: StencilReactComponent<ScaleRatingStarsElement, ScaleRatingStarsEvents, JSX.ScaleRatingStars> = /*@__PURE__*/ createComponent<ScaleRatingStarsElement, ScaleRatingStarsEvents, JSX.ScaleRatingStars>({
     tagName: 'scale-rating-stars',
     properties: {
         starSize: 'star-size',
@@ -9562,23 +7897,13 @@ export const ScaleRatingStars: StencilReactComponent<ScaleRatingStarsElement, Sc
         infoText: 'info-text'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleRatingStarsElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleChange: 'scale-change' } as ScaleRatingStarsEvents,
-    defineCustomElement: defineScaleRatingStars
+    clientModule: clientComponents.ScaleRatingStars as StencilReactComponent<ScaleRatingStarsElement, ScaleRatingStarsEvents, JSX.ScaleRatingStars>,
+    serializeShadowRoot
 });
 
-export type ScaleSegmentEvents = {
-    onScaleClick: EventName<CustomEvent<{
-        id: string;
-        selected: boolean;
-        userInteraction?: boolean;
-    }>>
-};
+export type ScaleSegmentEvents = { onScaleClick: EventName<ScaleSegmentCustomEvent<{ id: string; selected: boolean; userInteraction?: boolean; }>> };
 
-export const ScaleSegment: StencilReactComponent<ScaleSegmentElement, ScaleSegmentEvents> = /*@__PURE__*/ createComponent<ScaleSegmentElement, ScaleSegmentEvents>({
+export const ScaleSegment: StencilReactComponent<ScaleSegmentElement, ScaleSegmentEvents, JSX.ScaleSegment> = /*@__PURE__*/ createComponent<ScaleSegmentElement, ScaleSegmentEvents, JSX.ScaleSegment>({
     tagName: 'scale-segment',
     properties: {
         size: 'size',
@@ -9599,17 +7924,13 @@ export const ScaleSegment: StencilReactComponent<ScaleSegmentElement, ScaleSegme
         selectedIndex: 'selected-index'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSegmentElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleClick: 'scale-click' } as ScaleSegmentEvents,
-    defineCustomElement: defineScaleSegment
+    clientModule: clientComponents.ScaleSegment as StencilReactComponent<ScaleSegmentElement, ScaleSegmentEvents, JSX.ScaleSegment>,
+    serializeShadowRoot
 });
 
-export type ScaleSegmentedButtonEvents = { onScaleChange: EventName<CustomEvent<any>> };
+export type ScaleSegmentedButtonEvents = { onScaleChange: EventName<ScaleSegmentedButtonCustomEvent<any>> };
 
-export const ScaleSegmentedButton: StencilReactComponent<ScaleSegmentedButtonElement, ScaleSegmentedButtonEvents> = /*@__PURE__*/ createComponent<ScaleSegmentedButtonElement, ScaleSegmentedButtonEvents>({
+export const ScaleSegmentedButton: StencilReactComponent<ScaleSegmentedButtonElement, ScaleSegmentedButtonEvents, JSX.ScaleSegmentedButton> = /*@__PURE__*/ createComponent<ScaleSegmentedButtonElement, ScaleSegmentedButtonEvents, JSX.ScaleSegmentedButton>({
     tagName: 'scale-segmented-button',
     properties: {
         size: 'size',
@@ -9625,17 +7946,13 @@ export const ScaleSegmentedButton: StencilReactComponent<ScaleSegmentedButtonEle
         longestButtonWidth: 'longest-button-width'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSegmentedButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleChange: 'scale-change' } as ScaleSegmentedButtonEvents,
-    defineCustomElement: defineScaleSegmentedButton
+    clientModule: clientComponents.ScaleSegmentedButton as StencilReactComponent<ScaleSegmentedButtonElement, ScaleSegmentedButtonEvents, JSX.ScaleSegmentedButton>,
+    serializeShadowRoot
 });
 
 export type ScaleSidebarNavEvents = NonNullable<unknown>;
 
-export const ScaleSidebarNav: StencilReactComponent<ScaleSidebarNavElement, ScaleSidebarNavEvents> = /*@__PURE__*/ createComponent<ScaleSidebarNavElement, ScaleSidebarNavEvents>({
+export const ScaleSidebarNav: StencilReactComponent<ScaleSidebarNavElement, ScaleSidebarNavEvents, JSX.ScaleSidebarNav> = /*@__PURE__*/ createComponent<ScaleSidebarNavElement, ScaleSidebarNavEvents, JSX.ScaleSidebarNav>({
     tagName: 'scale-sidebar-nav',
     properties: {
         ariaLabelSidebarNav: 'aria-label-sidebar-nav',
@@ -9645,17 +7962,13 @@ export const ScaleSidebarNav: StencilReactComponent<ScaleSidebarNavElement, Scal
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSidebarNavElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleSidebarNavEvents,
-    defineCustomElement: defineScaleSidebarNav
+    clientModule: clientComponents.ScaleSidebarNav as StencilReactComponent<ScaleSidebarNavElement, ScaleSidebarNavEvents, JSX.ScaleSidebarNav>,
+    serializeShadowRoot
 });
 
 export type ScaleSidebarNavCollapsibleEvents = NonNullable<unknown>;
 
-export const ScaleSidebarNavCollapsible: StencilReactComponent<ScaleSidebarNavCollapsibleElement, ScaleSidebarNavCollapsibleEvents> = /*@__PURE__*/ createComponent<ScaleSidebarNavCollapsibleElement, ScaleSidebarNavCollapsibleEvents>({
+export const ScaleSidebarNavCollapsible: StencilReactComponent<ScaleSidebarNavCollapsibleElement, ScaleSidebarNavCollapsibleEvents, JSX.ScaleSidebarNavCollapsible> = /*@__PURE__*/ createComponent<ScaleSidebarNavCollapsibleElement, ScaleSidebarNavCollapsibleEvents, JSX.ScaleSidebarNavCollapsible>({
     tagName: 'scale-sidebar-nav-collapsible',
     properties: {
         tag: 'tag',
@@ -9669,17 +7982,13 @@ export const ScaleSidebarNavCollapsible: StencilReactComponent<ScaleSidebarNavCo
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSidebarNavCollapsibleElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleSidebarNavCollapsibleEvents,
-    defineCustomElement: defineScaleSidebarNavCollapsible
+    clientModule: clientComponents.ScaleSidebarNavCollapsible as StencilReactComponent<ScaleSidebarNavCollapsibleElement, ScaleSidebarNavCollapsibleEvents, JSX.ScaleSidebarNavCollapsible>,
+    serializeShadowRoot
 });
 
 export type ScaleSidebarNavItemEvents = NonNullable<unknown>;
 
-export const ScaleSidebarNavItem: StencilReactComponent<ScaleSidebarNavItemElement, ScaleSidebarNavItemEvents> = /*@__PURE__*/ createComponent<ScaleSidebarNavItemElement, ScaleSidebarNavItemEvents>({
+export const ScaleSidebarNavItem: StencilReactComponent<ScaleSidebarNavItemElement, ScaleSidebarNavItemEvents, JSX.ScaleSidebarNavItem> = /*@__PURE__*/ createComponent<ScaleSidebarNavItemElement, ScaleSidebarNavItemEvents, JSX.ScaleSidebarNavItem>({
     tagName: 'scale-sidebar-nav-item',
     properties: {
         condensed: 'condensed',
@@ -9690,20 +7999,16 @@ export const ScaleSidebarNavItem: StencilReactComponent<ScaleSidebarNavItemEleme
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSidebarNavItemElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleSidebarNavItemEvents,
-    defineCustomElement: defineScaleSidebarNavItem
+    clientModule: clientComponents.ScaleSidebarNavItem as StencilReactComponent<ScaleSidebarNavItemElement, ScaleSidebarNavItemEvents, JSX.ScaleSidebarNavItem>,
+    serializeShadowRoot
 });
 
 export type ScaleSliderEvents = {
-    onScaleChange: EventName<CustomEvent<number>>,
-    onScaleInput: EventName<CustomEvent<number>>
+    onScaleChange: EventName<ScaleSliderCustomEvent<number>>,
+    onScaleInput: EventName<ScaleSliderCustomEvent<number>>
 };
 
-export const ScaleSlider: StencilReactComponent<ScaleSliderElement, ScaleSliderEvents> = /*@__PURE__*/ createComponent<ScaleSliderElement, ScaleSliderEvents>({
+export const ScaleSlider: StencilReactComponent<ScaleSliderElement, ScaleSliderEvents, JSX.ScaleSlider> = /*@__PURE__*/ createComponent<ScaleSliderElement, ScaleSliderEvents, JSX.ScaleSlider>({
     tagName: 'scale-slider',
     properties: {
         name: 'name',
@@ -9732,34 +8037,23 @@ export const ScaleSlider: StencilReactComponent<ScaleSliderElement, ScaleSliderE
         dataQa: 'data-qa'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSliderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleChange: 'scale-change',
-        onScaleInput: 'scale-input'
-    } as ScaleSliderEvents,
-    defineCustomElement: defineScaleSlider
+    clientModule: clientComponents.ScaleSlider as StencilReactComponent<ScaleSliderElement, ScaleSliderEvents, JSX.ScaleSlider>,
+    serializeShadowRoot
 });
 
 export type ScaleSsrSlotFixEvents = NonNullable<unknown>;
 
-export const ScaleSsrSlotFix: StencilReactComponent<ScaleSsrSlotFixElement, ScaleSsrSlotFixEvents> = /*@__PURE__*/ createComponent<ScaleSsrSlotFixElement, ScaleSsrSlotFixEvents>({
+export const ScaleSsrSlotFix: StencilReactComponent<ScaleSsrSlotFixElement, ScaleSsrSlotFixEvents, JSX.ScaleSsrSlotFix> = /*@__PURE__*/ createComponent<ScaleSsrSlotFixElement, ScaleSsrSlotFixEvents, JSX.ScaleSsrSlotFix>({
     tagName: 'scale-ssr-slot-fix',
     properties: {},
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSsrSlotFixElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleSsrSlotFixEvents,
-    defineCustomElement: defineScaleSsrSlotFix
+    clientModule: clientComponents.ScaleSsrSlotFix as StencilReactComponent<ScaleSsrSlotFixElement, ScaleSsrSlotFixEvents, JSX.ScaleSsrSlotFix>,
+    serializeShadowRoot
 });
 
-export type ScaleSwitchEvents = { onScaleChange: EventName<CustomEvent<any>> };
+export type ScaleSwitchEvents = { onScaleChange: EventName<ScaleSwitchCustomEvent<any>> };
 
-export const ScaleSwitch: StencilReactComponent<ScaleSwitchElement, ScaleSwitchEvents> = /*@__PURE__*/ createComponent<ScaleSwitchElement, ScaleSwitchEvents>({
+export const ScaleSwitch: StencilReactComponent<ScaleSwitchElement, ScaleSwitchEvents, JSX.ScaleSwitch> = /*@__PURE__*/ createComponent<ScaleSwitchElement, ScaleSwitchEvents, JSX.ScaleSwitch>({
     tagName: 'scale-switch',
     properties: {
         checked: 'checked',
@@ -9772,20 +8066,16 @@ export const ScaleSwitch: StencilReactComponent<ScaleSwitchElement, ScaleSwitchE
         dataQa: 'data-qa'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleSwitchElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleChange: 'scale-change' } as ScaleSwitchEvents,
-    defineCustomElement: defineScaleSwitch
+    clientModule: clientComponents.ScaleSwitch as StencilReactComponent<ScaleSwitchElement, ScaleSwitchEvents, JSX.ScaleSwitch>,
+    serializeShadowRoot
 });
 
 export type ScaleTabHeaderEvents = {
-    onScaleSelect: EventName<CustomEvent<any>>,
-    onScaleDisabled: EventName<CustomEvent<any>>
+    onScaleSelect: EventName<ScaleTabHeaderCustomEvent<any>>,
+    onScaleDisabled: EventName<ScaleTabHeaderCustomEvent<any>>
 };
 
-export const ScaleTabHeader: StencilReactComponent<ScaleTabHeaderElement, ScaleTabHeaderEvents> = /*@__PURE__*/ createComponent<ScaleTabHeaderElement, ScaleTabHeaderEvents>({
+export const ScaleTabHeader: StencilReactComponent<ScaleTabHeaderElement, ScaleTabHeaderEvents, JSX.ScaleTabHeader> = /*@__PURE__*/ createComponent<ScaleTabHeaderElement, ScaleTabHeaderEvents, JSX.ScaleTabHeader>({
     tagName: 'scale-tab-header',
     properties: {
         disabled: 'disabled',
@@ -9795,20 +8085,13 @@ export const ScaleTabHeader: StencilReactComponent<ScaleTabHeaderElement, ScaleT
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTabHeaderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleSelect: 'scale-select',
-        onScaleDisabled: 'scale-disabled'
-    } as ScaleTabHeaderEvents,
-    defineCustomElement: defineScaleTabHeader
+    clientModule: clientComponents.ScaleTabHeader as StencilReactComponent<ScaleTabHeaderElement, ScaleTabHeaderEvents, JSX.ScaleTabHeader>,
+    serializeShadowRoot
 });
 
 export type ScaleTabNavEvents = NonNullable<unknown>;
 
-export const ScaleTabNav: StencilReactComponent<ScaleTabNavElement, ScaleTabNavEvents> = /*@__PURE__*/ createComponent<ScaleTabNavElement, ScaleTabNavEvents>({
+export const ScaleTabNav: StencilReactComponent<ScaleTabNavElement, ScaleTabNavEvents, JSX.ScaleTabNav> = /*@__PURE__*/ createComponent<ScaleTabNavElement, ScaleTabNavEvents, JSX.ScaleTabNav>({
     tagName: 'scale-tab-nav',
     properties: {
         small: 'small',
@@ -9816,17 +8099,13 @@ export const ScaleTabNav: StencilReactComponent<ScaleTabNavElement, ScaleTabNavE
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTabNavElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTabNavEvents,
-    defineCustomElement: defineScaleTabNav
+    clientModule: clientComponents.ScaleTabNav as StencilReactComponent<ScaleTabNavElement, ScaleTabNavEvents, JSX.ScaleTabNav>,
+    serializeShadowRoot
 });
 
 export type ScaleTabPanelEvents = NonNullable<unknown>;
 
-export const ScaleTabPanel: StencilReactComponent<ScaleTabPanelElement, ScaleTabPanelEvents> = /*@__PURE__*/ createComponent<ScaleTabPanelElement, ScaleTabPanelEvents>({
+export const ScaleTabPanel: StencilReactComponent<ScaleTabPanelElement, ScaleTabPanelEvents, JSX.ScaleTabPanel> = /*@__PURE__*/ createComponent<ScaleTabPanelElement, ScaleTabPanelEvents, JSX.ScaleTabPanel>({
     tagName: 'scale-tab-panel',
     properties: {
         small: 'small',
@@ -9835,17 +8114,13 @@ export const ScaleTabPanel: StencilReactComponent<ScaleTabPanelElement, ScaleTab
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTabPanelElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTabPanelEvents,
-    defineCustomElement: defineScaleTabPanel
+    clientModule: clientComponents.ScaleTabPanel as StencilReactComponent<ScaleTabPanelElement, ScaleTabPanelEvents, JSX.ScaleTabPanel>,
+    serializeShadowRoot
 });
 
 export type ScaleTableEvents = NonNullable<unknown>;
 
-export const ScaleTable: StencilReactComponent<ScaleTableElement, ScaleTableEvents> = /*@__PURE__*/ createComponent<ScaleTableElement, ScaleTableEvents>({
+export const ScaleTable: StencilReactComponent<ScaleTableElement, ScaleTableEvents, JSX.ScaleTable> = /*@__PURE__*/ createComponent<ScaleTableElement, ScaleTableEvents, JSX.ScaleTable>({
     tagName: 'scale-table',
     properties: {
         showSort: 'show-sort',
@@ -9854,17 +8129,13 @@ export const ScaleTable: StencilReactComponent<ScaleTableElement, ScaleTableEven
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTableElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTableEvents,
-    defineCustomElement: defineScaleTable
+    clientModule: clientComponents.ScaleTable as StencilReactComponent<ScaleTableElement, ScaleTableEvents, JSX.ScaleTable>,
+    serializeShadowRoot
 });
 
 export type ScaleTagEvents = { onScaleClose: EventName<ScaleTagCustomEvent<MouseEvent>> };
 
-export const ScaleTag: StencilReactComponent<ScaleTagElement, ScaleTagEvents> = /*@__PURE__*/ createComponent<ScaleTagElement, ScaleTagEvents>({
+export const ScaleTag: StencilReactComponent<ScaleTagElement, ScaleTagEvents, JSX.ScaleTag> = /*@__PURE__*/ createComponent<ScaleTagElement, ScaleTagEvents, JSX.ScaleTag>({
     tagName: 'scale-tag',
     properties: {
         size: 'size',
@@ -9878,45 +8149,33 @@ export const ScaleTag: StencilReactComponent<ScaleTagElement, ScaleTagEvents> =
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTagElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleClose: 'scale-close' } as ScaleTagEvents,
-    defineCustomElement: defineScaleTag
+    clientModule: clientComponents.ScaleTag as StencilReactComponent<ScaleTagElement, ScaleTagEvents, JSX.ScaleTag>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomAppShellEvents = NonNullable<unknown>;
 
-export const ScaleTelekomAppShell: StencilReactComponent<ScaleTelekomAppShellElement, ScaleTelekomAppShellEvents> = /*@__PURE__*/ createComponent<ScaleTelekomAppShellElement, ScaleTelekomAppShellEvents>({
+export const ScaleTelekomAppShell: StencilReactComponent<ScaleTelekomAppShellElement, ScaleTelekomAppShellEvents, JSX.ScaleTelekomAppShell> = /*@__PURE__*/ createComponent<ScaleTelekomAppShellElement, ScaleTelekomAppShellEvents, JSX.ScaleTelekomAppShell>({
     tagName: 'scale-telekom-app-shell',
     properties: { styles: 'styles' },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomAppShellElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomAppShellEvents,
-    defineCustomElement: defineScaleTelekomAppShell
+    clientModule: clientComponents.ScaleTelekomAppShell as StencilReactComponent<ScaleTelekomAppShellElement, ScaleTelekomAppShellEvents, JSX.ScaleTelekomAppShell>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomFooterEvents = NonNullable<unknown>;
 
-export const ScaleTelekomFooter: StencilReactComponent<ScaleTelekomFooterElement, ScaleTelekomFooterEvents> = /*@__PURE__*/ createComponent<ScaleTelekomFooterElement, ScaleTelekomFooterEvents>({
+export const ScaleTelekomFooter: StencilReactComponent<ScaleTelekomFooterElement, ScaleTelekomFooterEvents, JSX.ScaleTelekomFooter> = /*@__PURE__*/ createComponent<ScaleTelekomFooterElement, ScaleTelekomFooterEvents, JSX.ScaleTelekomFooter>({
     tagName: 'scale-telekom-footer',
     properties: { type: 'type' },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomFooterElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomFooterEvents,
-    defineCustomElement: defineScaleTelekomFooter
+    clientModule: clientComponents.ScaleTelekomFooter as StencilReactComponent<ScaleTelekomFooterElement, ScaleTelekomFooterEvents, JSX.ScaleTelekomFooter>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomFooterContentEvents = NonNullable<unknown>;
 
-export const ScaleTelekomFooterContent: StencilReactComponent<ScaleTelekomFooterContentElement, ScaleTelekomFooterContentEvents> = /*@__PURE__*/ createComponent<ScaleTelekomFooterContentElement, ScaleTelekomFooterContentEvents>({
+export const ScaleTelekomFooterContent: StencilReactComponent<ScaleTelekomFooterContentElement, ScaleTelekomFooterContentEvents, JSX.ScaleTelekomFooterContent> = /*@__PURE__*/ createComponent<ScaleTelekomFooterContentElement, ScaleTelekomFooterContentEvents, JSX.ScaleTelekomFooterContent>({
     tagName: 'scale-telekom-footer-content',
     properties: {
         logoHref: 'logo-href',
@@ -9924,17 +8183,13 @@ export const ScaleTelekomFooterContent: StencilReactComponent<ScaleTelekomFooter
         logoHideTitle: 'logo-hide-title'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomFooterContentElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomFooterContentEvents,
-    defineCustomElement: defineScaleTelekomFooterContent
+    clientModule: clientComponents.ScaleTelekomFooterContent as StencilReactComponent<ScaleTelekomFooterContentElement, ScaleTelekomFooterContentEvents, JSX.ScaleTelekomFooterContent>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomFooterDataBackCompatEvents = NonNullable<unknown>;
 
-export const ScaleTelekomFooterDataBackCompat: StencilReactComponent<ScaleTelekomFooterDataBackCompatElement, ScaleTelekomFooterDataBackCompatEvents> = /*@__PURE__*/ createComponent<ScaleTelekomFooterDataBackCompatElement, ScaleTelekomFooterDataBackCompatEvents>({
+export const ScaleTelekomFooterDataBackCompat: StencilReactComponent<ScaleTelekomFooterDataBackCompatElement, ScaleTelekomFooterDataBackCompatEvents, JSX.ScaleTelekomFooterDataBackCompat> = /*@__PURE__*/ createComponent<ScaleTelekomFooterDataBackCompatElement, ScaleTelekomFooterDataBackCompatEvents, JSX.ScaleTelekomFooterDataBackCompat>({
     tagName: 'scale-telekom-footer-data-back-compat',
     properties: {
         type: 'type',
@@ -9942,31 +8197,23 @@ export const ScaleTelekomFooterDataBackCompat: StencilReactComponent<ScaleTeleko
         copyright: 'copyright'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomFooterDataBackCompatElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomFooterDataBackCompatEvents,
-    defineCustomElement: defineScaleTelekomFooterDataBackCompat
+    clientModule: clientComponents.ScaleTelekomFooterDataBackCompat as StencilReactComponent<ScaleTelekomFooterDataBackCompatElement, ScaleTelekomFooterDataBackCompatEvents, JSX.ScaleTelekomFooterDataBackCompat>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomFooterExtendedNavigationEvents = NonNullable<unknown>;
 
-export const ScaleTelekomFooterExtendedNavigation: StencilReactComponent<ScaleTelekomFooterExtendedNavigationElement, ScaleTelekomFooterExtendedNavigationEvents> = /*@__PURE__*/ createComponent<ScaleTelekomFooterExtendedNavigationElement, ScaleTelekomFooterExtendedNavigationEvents>({
+export const ScaleTelekomFooterExtendedNavigation: StencilReactComponent<ScaleTelekomFooterExtendedNavigationElement, ScaleTelekomFooterExtendedNavigationEvents, JSX.ScaleTelekomFooterExtendedNavigation> = /*@__PURE__*/ createComponent<ScaleTelekomFooterExtendedNavigationElement, ScaleTelekomFooterExtendedNavigationEvents, JSX.ScaleTelekomFooterExtendedNavigation>({
     tagName: 'scale-telekom-footer-extended-navigation',
     properties: {},
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomFooterExtendedNavigationElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomFooterExtendedNavigationEvents,
-    defineCustomElement: defineScaleTelekomFooterExtendedNavigation
+    clientModule: clientComponents.ScaleTelekomFooterExtendedNavigation as StencilReactComponent<ScaleTelekomFooterExtendedNavigationElement, ScaleTelekomFooterExtendedNavigationEvents, JSX.ScaleTelekomFooterExtendedNavigation>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomFooterExtendedNavigationColumnEvents = NonNullable<unknown>;
 
-export const ScaleTelekomFooterExtendedNavigationColumn: StencilReactComponent<ScaleTelekomFooterExtendedNavigationColumnElement, ScaleTelekomFooterExtendedNavigationColumnEvents> = /*@__PURE__*/ createComponent<ScaleTelekomFooterExtendedNavigationColumnElement, ScaleTelekomFooterExtendedNavigationColumnEvents>({
+export const ScaleTelekomFooterExtendedNavigationColumn: StencilReactComponent<ScaleTelekomFooterExtendedNavigationColumnElement, ScaleTelekomFooterExtendedNavigationColumnEvents, JSX.ScaleTelekomFooterExtendedNavigationColumn> = /*@__PURE__*/ createComponent<ScaleTelekomFooterExtendedNavigationColumnElement, ScaleTelekomFooterExtendedNavigationColumnEvents, JSX.ScaleTelekomFooterExtendedNavigationColumn>({
     tagName: 'scale-telekom-footer-extended-navigation-column',
     properties: {
         heading: 'heading',
@@ -9974,17 +8221,13 @@ export const ScaleTelekomFooterExtendedNavigationColumn: StencilReactComponent<S
         headingLevel: 'heading-level'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomFooterExtendedNavigationColumnElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomFooterExtendedNavigationColumnEvents,
-    defineCustomElement: defineScaleTelekomFooterExtendedNavigationColumn
+    clientModule: clientComponents.ScaleTelekomFooterExtendedNavigationColumn as StencilReactComponent<ScaleTelekomFooterExtendedNavigationColumnElement, ScaleTelekomFooterExtendedNavigationColumnEvents, JSX.ScaleTelekomFooterExtendedNavigationColumn>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomHeaderEvents = NonNullable<unknown>;
 
-export const ScaleTelekomHeader: StencilReactComponent<ScaleTelekomHeaderElement, ScaleTelekomHeaderEvents> = /*@__PURE__*/ createComponent<ScaleTelekomHeaderElement, ScaleTelekomHeaderEvents>({
+export const ScaleTelekomHeader: StencilReactComponent<ScaleTelekomHeaderElement, ScaleTelekomHeaderEvents, JSX.ScaleTelekomHeader> = /*@__PURE__*/ createComponent<ScaleTelekomHeaderElement, ScaleTelekomHeaderEvents, JSX.ScaleTelekomHeader>({
     tagName: 'scale-telekom-header',
     properties: {
         appName: 'app-name',
@@ -10000,17 +8243,13 @@ export const ScaleTelekomHeader: StencilReactComponent<ScaleTelekomHeaderElement
         mainNavAriaLabel: 'main-nav-aria-label'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomHeaderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomHeaderEvents,
-    defineCustomElement: defineScaleTelekomHeader
+    clientModule: clientComponents.ScaleTelekomHeader as StencilReactComponent<ScaleTelekomHeaderElement, ScaleTelekomHeaderEvents, JSX.ScaleTelekomHeader>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomHeaderDataBackCompatEvents = NonNullable<unknown>;
 
-export const ScaleTelekomHeaderDataBackCompat: StencilReactComponent<ScaleTelekomHeaderDataBackCompatElement, ScaleTelekomHeaderDataBackCompatEvents> = /*@__PURE__*/ createComponent<ScaleTelekomHeaderDataBackCompatElement, ScaleTelekomHeaderDataBackCompatEvents>({
+export const ScaleTelekomHeaderDataBackCompat: StencilReactComponent<ScaleTelekomHeaderDataBackCompatElement, ScaleTelekomHeaderDataBackCompatEvents, JSX.ScaleTelekomHeaderDataBackCompat> = /*@__PURE__*/ createComponent<ScaleTelekomHeaderDataBackCompatElement, ScaleTelekomHeaderDataBackCompatEvents, JSX.ScaleTelekomHeaderDataBackCompat>({
     tagName: 'scale-telekom-header-data-back-compat',
     properties: {
         appName: 'app-name',
@@ -10027,45 +8266,33 @@ export const ScaleTelekomHeaderDataBackCompat: StencilReactComponent<ScaleTeleko
         activeRouteId: 'active-route-id'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomHeaderDataBackCompatElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomHeaderDataBackCompatEvents,
-    defineCustomElement: defineScaleTelekomHeaderDataBackCompat
+    clientModule: clientComponents.ScaleTelekomHeaderDataBackCompat as StencilReactComponent<ScaleTelekomHeaderDataBackCompatElement, ScaleTelekomHeaderDataBackCompatEvents, JSX.ScaleTelekomHeaderDataBackCompat>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomMegaMenuEvents = NonNullable<unknown>;
 
-export const ScaleTelekomMegaMenu: StencilReactComponent<ScaleTelekomMegaMenuElement, ScaleTelekomMegaMenuEvents> = /*@__PURE__*/ createComponent<ScaleTelekomMegaMenuElement, ScaleTelekomMegaMenuEvents>({
+export const ScaleTelekomMegaMenu: StencilReactComponent<ScaleTelekomMegaMenuElement, ScaleTelekomMegaMenuEvents, JSX.ScaleTelekomMegaMenu> = /*@__PURE__*/ createComponent<ScaleTelekomMegaMenuElement, ScaleTelekomMegaMenuEvents, JSX.ScaleTelekomMegaMenu>({
     tagName: 'scale-telekom-mega-menu',
     properties: {},
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomMegaMenuElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomMegaMenuEvents,
-    defineCustomElement: defineScaleTelekomMegaMenu
+    clientModule: clientComponents.ScaleTelekomMegaMenu as StencilReactComponent<ScaleTelekomMegaMenuElement, ScaleTelekomMegaMenuEvents, JSX.ScaleTelekomMegaMenu>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomMegaMenuColumnEvents = NonNullable<unknown>;
 
-export const ScaleTelekomMegaMenuColumn: StencilReactComponent<ScaleTelekomMegaMenuColumnElement, ScaleTelekomMegaMenuColumnEvents> = /*@__PURE__*/ createComponent<ScaleTelekomMegaMenuColumnElement, ScaleTelekomMegaMenuColumnEvents>({
+export const ScaleTelekomMegaMenuColumn: StencilReactComponent<ScaleTelekomMegaMenuColumnElement, ScaleTelekomMegaMenuColumnEvents, JSX.ScaleTelekomMegaMenuColumn> = /*@__PURE__*/ createComponent<ScaleTelekomMegaMenuColumnElement, ScaleTelekomMegaMenuColumnEvents, JSX.ScaleTelekomMegaMenuColumn>({
     tagName: 'scale-telekom-mega-menu-column',
     properties: { headingLevel: 'heading-level' },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomMegaMenuColumnElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomMegaMenuColumnEvents,
-    defineCustomElement: defineScaleTelekomMegaMenuColumn
+    clientModule: clientComponents.ScaleTelekomMegaMenuColumn as StencilReactComponent<ScaleTelekomMegaMenuColumnElement, ScaleTelekomMegaMenuColumnEvents, JSX.ScaleTelekomMegaMenuColumn>,
+    serializeShadowRoot
 });
 
-export type ScaleTelekomMobileFlyoutCanvasEvents = { onScaleCloseNavFlyout: EventName<CustomEvent<any>> };
+export type ScaleTelekomMobileFlyoutCanvasEvents = { onScaleCloseNavFlyout: EventName<ScaleTelekomMobileFlyoutCanvasCustomEvent<any>> };
 
-export const ScaleTelekomMobileFlyoutCanvas: StencilReactComponent<ScaleTelekomMobileFlyoutCanvasElement, ScaleTelekomMobileFlyoutCanvasEvents> = /*@__PURE__*/ createComponent<ScaleTelekomMobileFlyoutCanvasElement, ScaleTelekomMobileFlyoutCanvasEvents>({
+export const ScaleTelekomMobileFlyoutCanvas: StencilReactComponent<ScaleTelekomMobileFlyoutCanvasElement, ScaleTelekomMobileFlyoutCanvasEvents, JSX.ScaleTelekomMobileFlyoutCanvas> = /*@__PURE__*/ createComponent<ScaleTelekomMobileFlyoutCanvasElement, ScaleTelekomMobileFlyoutCanvasEvents, JSX.ScaleTelekomMobileFlyoutCanvas>({
     tagName: 'scale-telekom-mobile-flyout-canvas',
     properties: {
         appName: 'app-name',
@@ -10075,17 +8302,13 @@ export const ScaleTelekomMobileFlyoutCanvas: StencilReactComponent<ScaleTelekomM
         closeButtonTitle: 'close-button-title'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomMobileFlyoutCanvasElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleCloseNavFlyout: 'scale-close-nav-flyout' } as ScaleTelekomMobileFlyoutCanvasEvents,
-    defineCustomElement: defineScaleTelekomMobileFlyoutCanvas
+    clientModule: clientComponents.ScaleTelekomMobileFlyoutCanvas as StencilReactComponent<ScaleTelekomMobileFlyoutCanvasElement, ScaleTelekomMobileFlyoutCanvasEvents, JSX.ScaleTelekomMobileFlyoutCanvas>,
+    serializeShadowRoot
 });
 
-export type ScaleTelekomMobileMenuEvents = { onScaleCloseNavFlyout: EventName<CustomEvent<any>> };
+export type ScaleTelekomMobileMenuEvents = { onScaleCloseNavFlyout: EventName<ScaleTelekomMobileMenuCustomEvent<any>> };
 
-export const ScaleTelekomMobileMenu: StencilReactComponent<ScaleTelekomMobileMenuElement, ScaleTelekomMobileMenuEvents> = /*@__PURE__*/ createComponent<ScaleTelekomMobileMenuElement, ScaleTelekomMobileMenuEvents>({
+export const ScaleTelekomMobileMenu: StencilReactComponent<ScaleTelekomMobileMenuElement, ScaleTelekomMobileMenuEvents, JSX.ScaleTelekomMobileMenu> = /*@__PURE__*/ createComponent<ScaleTelekomMobileMenuElement, ScaleTelekomMobileMenuEvents, JSX.ScaleTelekomMobileMenu>({
     tagName: 'scale-telekom-mobile-menu',
     properties: {
         backButtonTitle: 'back-button-title',
@@ -10094,21 +8317,17 @@ export const ScaleTelekomMobileMenu: StencilReactComponent<ScaleTelekomMobileMen
         appNameClick: 'app-name-click'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomMobileMenuElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleCloseNavFlyout: 'scale-close-nav-flyout' } as ScaleTelekomMobileMenuEvents,
-    defineCustomElement: defineScaleTelekomMobileMenu
+    clientModule: clientComponents.ScaleTelekomMobileMenu as StencilReactComponent<ScaleTelekomMobileMenuElement, ScaleTelekomMobileMenuEvents, JSX.ScaleTelekomMobileMenu>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomMobileMenuItemEvents = {
-    onScaleSetMenuItemActive: EventName<CustomEvent<any>>,
-    onScaleSetMenuItemOpen: EventName<CustomEvent<any>>,
-    onScaleCloseNavFlyout: EventName<CustomEvent<any>>
+    onScaleSetMenuItemActive: EventName<ScaleTelekomMobileMenuItemCustomEvent<any>>,
+    onScaleSetMenuItemOpen: EventName<ScaleTelekomMobileMenuItemCustomEvent<any>>,
+    onScaleCloseNavFlyout: EventName<ScaleTelekomMobileMenuItemCustomEvent<any>>
 };
 
-export const ScaleTelekomMobileMenuItem: StencilReactComponent<ScaleTelekomMobileMenuItemElement, ScaleTelekomMobileMenuItemEvents> = /*@__PURE__*/ createComponent<ScaleTelekomMobileMenuItemElement, ScaleTelekomMobileMenuItemEvents>({
+export const ScaleTelekomMobileMenuItem: StencilReactComponent<ScaleTelekomMobileMenuItemElement, ScaleTelekomMobileMenuItemEvents, JSX.ScaleTelekomMobileMenuItem> = /*@__PURE__*/ createComponent<ScaleTelekomMobileMenuItemElement, ScaleTelekomMobileMenuItemEvents, JSX.ScaleTelekomMobileMenuItem>({
     tagName: 'scale-telekom-mobile-menu-item',
     properties: {
         open: 'open',
@@ -10117,21 +8336,13 @@ export const ScaleTelekomMobileMenuItem: StencilReactComponent<ScaleTelekomMobil
         currentLevel: 'current-level'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomMobileMenuItemElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleSetMenuItemActive: 'scale-set-menu-item-active',
-        onScaleSetMenuItemOpen: 'scale-set-menu-item-open',
-        onScaleCloseNavFlyout: 'scale-close-nav-flyout'
-    } as ScaleTelekomMobileMenuItemEvents,
-    defineCustomElement: defineScaleTelekomMobileMenuItem
+    clientModule: clientComponents.ScaleTelekomMobileMenuItem as StencilReactComponent<ScaleTelekomMobileMenuItemElement, ScaleTelekomMobileMenuItemEvents, JSX.ScaleTelekomMobileMenuItem>,
+    serializeShadowRoot
 });
 
-export type ScaleTelekomNavFlyoutEvents = { onScaleExpanded: EventName<CustomEvent<any>> };
+export type ScaleTelekomNavFlyoutEvents = { onScaleExpanded: EventName<ScaleTelekomNavFlyoutCustomEvent<any>> };
 
-export const ScaleTelekomNavFlyout: StencilReactComponent<ScaleTelekomNavFlyoutElement, ScaleTelekomNavFlyoutEvents> = /*@__PURE__*/ createComponent<ScaleTelekomNavFlyoutElement, ScaleTelekomNavFlyoutEvents>({
+export const ScaleTelekomNavFlyout: StencilReactComponent<ScaleTelekomNavFlyoutElement, ScaleTelekomNavFlyoutEvents, JSX.ScaleTelekomNavFlyout> = /*@__PURE__*/ createComponent<ScaleTelekomNavFlyoutElement, ScaleTelekomNavFlyoutEvents, JSX.ScaleTelekomNavFlyout>({
     tagName: 'scale-telekom-nav-flyout',
     properties: {
         expanded: 'expanded',
@@ -10140,17 +8351,13 @@ export const ScaleTelekomNavFlyout: StencilReactComponent<ScaleTelekomNavFlyoutE
         hover: 'hover'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomNavFlyoutElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleExpanded: 'scale-expanded' } as ScaleTelekomNavFlyoutEvents,
-    defineCustomElement: defineScaleTelekomNavFlyout
+    clientModule: clientComponents.ScaleTelekomNavFlyout as StencilReactComponent<ScaleTelekomNavFlyoutElement, ScaleTelekomNavFlyoutEvents, JSX.ScaleTelekomNavFlyout>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomNavItemEvents = NonNullable<unknown>;
 
-export const ScaleTelekomNavItem: StencilReactComponent<ScaleTelekomNavItemElement, ScaleTelekomNavItemEvents> = /*@__PURE__*/ createComponent<ScaleTelekomNavItemElement, ScaleTelekomNavItemEvents>({
+export const ScaleTelekomNavItem: StencilReactComponent<ScaleTelekomNavItemElement, ScaleTelekomNavItemEvents, JSX.ScaleTelekomNavItem> = /*@__PURE__*/ createComponent<ScaleTelekomNavItemElement, ScaleTelekomNavItemEvents, JSX.ScaleTelekomNavItem>({
     tagName: 'scale-telekom-nav-item',
     properties: {
         active: 'active',
@@ -10160,17 +8367,13 @@ export const ScaleTelekomNavItem: StencilReactComponent<ScaleTelekomNavItemEleme
         hideOnDesktop: 'hide-on-desktop'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomNavItemElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomNavItemEvents,
-    defineCustomElement: defineScaleTelekomNavItem
+    clientModule: clientComponents.ScaleTelekomNavItem as StencilReactComponent<ScaleTelekomNavItemElement, ScaleTelekomNavItemEvents, JSX.ScaleTelekomNavItem>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomNavListEvents = NonNullable<unknown>;
 
-export const ScaleTelekomNavList: StencilReactComponent<ScaleTelekomNavListElement, ScaleTelekomNavListEvents> = /*@__PURE__*/ createComponent<ScaleTelekomNavListElement, ScaleTelekomNavListEvents>({
+export const ScaleTelekomNavList: StencilReactComponent<ScaleTelekomNavListElement, ScaleTelekomNavListEvents, JSX.ScaleTelekomNavList> = /*@__PURE__*/ createComponent<ScaleTelekomNavListElement, ScaleTelekomNavListEvents, JSX.ScaleTelekomNavList>({
     tagName: 'scale-telekom-nav-list',
     properties: {
         role: 'role',
@@ -10178,17 +8381,13 @@ export const ScaleTelekomNavList: StencilReactComponent<ScaleTelekomNavListEleme
         variant: 'variant'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomNavListElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomNavListEvents,
-    defineCustomElement: defineScaleTelekomNavList
+    clientModule: clientComponents.ScaleTelekomNavList as StencilReactComponent<ScaleTelekomNavListElement, ScaleTelekomNavListEvents, JSX.ScaleTelekomNavList>,
+    serializeShadowRoot
 });
 
 export type ScaleTelekomProfileMenuEvents = NonNullable<unknown>;
 
-export const ScaleTelekomProfileMenu: StencilReactComponent<ScaleTelekomProfileMenuElement, ScaleTelekomProfileMenuEvents> = /*@__PURE__*/ createComponent<ScaleTelekomProfileMenuElement, ScaleTelekomProfileMenuEvents>({
+export const ScaleTelekomProfileMenu: StencilReactComponent<ScaleTelekomProfileMenuElement, ScaleTelekomProfileMenuEvents, JSX.ScaleTelekomProfileMenu> = /*@__PURE__*/ createComponent<ScaleTelekomProfileMenuElement, ScaleTelekomProfileMenuEvents, JSX.ScaleTelekomProfileMenu>({
     tagName: 'scale-telekom-profile-menu',
     properties: {
         label: 'label',
@@ -10215,23 +8414,19 @@ export const ScaleTelekomProfileMenu: StencilReactComponent<ScaleTelekomProfileM
         logoutHandler: 'logout-handler'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTelekomProfileMenuElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleTelekomProfileMenuEvents,
-    defineCustomElement: defineScaleTelekomProfileMenu
+    clientModule: clientComponents.ScaleTelekomProfileMenu as StencilReactComponent<ScaleTelekomProfileMenuElement, ScaleTelekomProfileMenuEvents, JSX.ScaleTelekomProfileMenu>,
+    serializeShadowRoot
 });
 
 export type ScaleTextFieldEvents = {
     onScaleInput: EventName<ScaleTextFieldCustomEvent<KeyboardEvent>>,
     onScaleChange: EventName<ScaleTextFieldCustomEvent<InputChangeEventDetail>>,
-    onScaleFocus: EventName<CustomEvent<void>>,
-    onScaleBlur: EventName<CustomEvent<void>>,
+    onScaleFocus: EventName<ScaleTextFieldCustomEvent<void>>,
+    onScaleBlur: EventName<ScaleTextFieldCustomEvent<void>>,
     onScaleKeydown: EventName<ScaleTextFieldCustomEvent<KeyboardEvent>>
 };
 
-export const ScaleTextField: StencilReactComponent<ScaleTextFieldElement, ScaleTextFieldEvents> = /*@__PURE__*/ createComponent<ScaleTextFieldElement, ScaleTextFieldEvents>({
+export const ScaleTextField: StencilReactComponent<ScaleTextFieldElement, ScaleTextFieldEvents, JSX.ScaleTextField> = /*@__PURE__*/ createComponent<ScaleTextFieldElement, ScaleTextFieldEvents, JSX.ScaleTextField>({
     tagName: 'scale-text-field',
     properties: {
         type: 'type',
@@ -10266,29 +8461,19 @@ export const ScaleTextField: StencilReactComponent<ScaleTextFieldElement, ScaleT
         dataQa: 'data-qa'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTextFieldElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleInput: 'scale-input',
-        onScaleChange: 'scale-change',
-        onScaleFocus: 'scale-focus',
-        onScaleBlur: 'scale-blur',
-        onScaleKeydown: 'scale-keydown'
-    } as ScaleTextFieldEvents,
-    defineCustomElement: defineScaleTextField
+    clientModule: clientComponents.ScaleTextField as StencilReactComponent<ScaleTextFieldElement, ScaleTextFieldEvents, JSX.ScaleTextField>,
+    serializeShadowRoot
 });
 
 export type ScaleTextareaEvents = {
     onScaleInput: EventName<ScaleTextareaCustomEvent<KeyboardEvent>>,
     onScaleChange: EventName<ScaleTextareaCustomEvent<InputChangeEventDetail>>,
-    onScaleFocus: EventName<CustomEvent<void>>,
-    onScaleBlur: EventName<CustomEvent<void>>,
+    onScaleFocus: EventName<ScaleTextareaCustomEvent<void>>,
+    onScaleBlur: EventName<ScaleTextareaCustomEvent<void>>,
     onScaleKeydown: EventName<ScaleTextareaCustomEvent<KeyboardEvent>>
 };
 
-export const ScaleTextarea: StencilReactComponent<ScaleTextareaElement, ScaleTextareaEvents> = /*@__PURE__*/ createComponent<ScaleTextareaElement, ScaleTextareaEvents>({
+export const ScaleTextarea: StencilReactComponent<ScaleTextareaElement, ScaleTextareaEvents, JSX.ScaleTextarea> = /*@__PURE__*/ createComponent<ScaleTextareaElement, ScaleTextareaEvents, JSX.ScaleTextarea>({
     tagName: 'scale-textarea',
     properties: {
         name: 'name',
@@ -10317,23 +8502,13 @@ export const ScaleTextarea: StencilReactComponent<ScaleTextareaElement, ScaleTex
         dataQa: 'data-qa'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTextareaElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleInput: 'scale-input',
-        onScaleChange: 'scale-change',
-        onScaleFocus: 'scale-focus',
-        onScaleBlur: 'scale-blur',
-        onScaleKeydown: 'scale-keydown'
-    } as ScaleTextareaEvents,
-    defineCustomElement: defineScaleTextarea
+    clientModule: clientComponents.ScaleTextarea as StencilReactComponent<ScaleTextareaElement, ScaleTextareaEvents, JSX.ScaleTextarea>,
+    serializeShadowRoot
 });
 
 export type ScaleToastEvents = NonNullable<unknown>;
 
-export const ScaleToast: StencilReactComponent<ScaleToastElement, ScaleToastEvents> = /*@__PURE__*/ createComponent<ScaleToastElement, ScaleToastEvents>({
+export const ScaleToast: StencilReactComponent<ScaleToastElement, ScaleToastEvents, JSX.ScaleToast> = /*@__PURE__*/ createComponent<ScaleToastElement, ScaleToastEvents, JSX.ScaleToast>({
     tagName: 'scale-toast',
     properties: {
         size: 'size',
@@ -10348,22 +8523,13 @@ export const ScaleToast: StencilReactComponent<ScaleToastElement, ScaleToastEven
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleToastElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as ScaleToastEvents,
-    defineCustomElement: defineScaleToast
+    clientModule: clientComponents.ScaleToast as StencilReactComponent<ScaleToastElement, ScaleToastEvents, JSX.ScaleToast>,
+    serializeShadowRoot
 });
 
-export type ScaleToggleButtonEvents = {
-    onScaleClick: EventName<CustomEvent<{
-        id: string;
-        selected: boolean;
-    }>>
-};
+export type ScaleToggleButtonEvents = { onScaleClick: EventName<ScaleToggleButtonCustomEvent<{ id: string; selected: boolean; }>> };
 
-export const ScaleToggleButton: StencilReactComponent<ScaleToggleButtonElement, ScaleToggleButtonEvents> = /*@__PURE__*/ createComponent<ScaleToggleButtonElement, ScaleToggleButtonEvents>({
+export const ScaleToggleButton: StencilReactComponent<ScaleToggleButtonElement, ScaleToggleButtonEvents, JSX.ScaleToggleButton> = /*@__PURE__*/ createComponent<ScaleToggleButtonElement, ScaleToggleButtonEvents, JSX.ScaleToggleButton>({
     tagName: 'scale-toggle-button',
     properties: {
         size: 'size',
@@ -10385,17 +8551,13 @@ export const ScaleToggleButton: StencilReactComponent<ScaleToggleButtonElement,
         ariaDescriptionTranslation: 'aria-description-translation'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleToggleButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleClick: 'scale-click' } as ScaleToggleButtonEvents,
-    defineCustomElement: defineScaleToggleButton
+    clientModule: clientComponents.ScaleToggleButton as StencilReactComponent<ScaleToggleButtonElement, ScaleToggleButtonEvents, JSX.ScaleToggleButton>,
+    serializeShadowRoot
 });
 
-export type ScaleToggleGroupEvents = { onScaleChange: EventName<CustomEvent<any>> };
+export type ScaleToggleGroupEvents = { onScaleChange: EventName<ScaleToggleGroupCustomEvent<any>> };
 
-export const ScaleToggleGroup: StencilReactComponent<ScaleToggleGroupElement, ScaleToggleGroupEvents> = /*@__PURE__*/ createComponent<ScaleToggleGroupElement, ScaleToggleGroupEvents>({
+export const ScaleToggleGroup: StencilReactComponent<ScaleToggleGroupElement, ScaleToggleGroupEvents, JSX.ScaleToggleGroup> = /*@__PURE__*/ createComponent<ScaleToggleGroupElement, ScaleToggleGroupEvents, JSX.ScaleToggleGroup>({
     tagName: 'scale-toggle-group',
     properties: {
         size: 'size',
@@ -10410,22 +8572,18 @@ export const ScaleToggleGroup: StencilReactComponent<ScaleToggleGroupElement, Sc
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleToggleGroupElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onScaleChange: 'scale-change' } as ScaleToggleGroupEvents,
-    defineCustomElement: defineScaleToggleGroup
+    clientModule: clientComponents.ScaleToggleGroup as StencilReactComponent<ScaleToggleGroupElement, ScaleToggleGroupEvents, JSX.ScaleToggleGroup>,
+    serializeShadowRoot
 });
 
 export type ScaleTooltipEvents = {
-    onScaleBeforeShow: EventName<CustomEvent<any>>,
-    onScaleShow: EventName<CustomEvent<any>>,
-    onScaleBeforeHide: EventName<CustomEvent<any>>,
-    onScaleHide: EventName<CustomEvent<any>>
+    onScaleBeforeShow: EventName<ScaleTooltipCustomEvent<any>>,
+    onScaleShow: EventName<ScaleTooltipCustomEvent<any>>,
+    onScaleBeforeHide: EventName<ScaleTooltipCustomEvent<any>>,
+    onScaleHide: EventName<ScaleTooltipCustomEvent<any>>
 };
 
-export const ScaleTooltip: StencilReactComponent<ScaleTooltipElement, ScaleTooltipEvents> = /*@__PURE__*/ createComponent<ScaleTooltipElement, ScaleTooltipEvents>({
+export const ScaleTooltip: StencilReactComponent<ScaleTooltipElement, ScaleTooltipEvents, JSX.ScaleTooltip> = /*@__PURE__*/ createComponent<ScaleTooltipElement, ScaleTooltipEvents, JSX.ScaleTooltip>({
     tagName: 'scale-tooltip',
     properties: {
         content: 'content',
@@ -10440,15 +8598,6 @@ export const ScaleTooltip: StencilReactComponent<ScaleTooltipElement, ScaleToolt
         styles: 'styles'
     },
     hydrateModule: import('@telekom/scale-components/hydrate') as Promise<HydrateModule>,
-    serializeShadowRoot,
-    elementClass: ScaleTooltipElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onScaleBeforeShow: 'scale-before-show',
-        onScaleShow: 'scale-show',
-        onScaleBeforeHide: 'scale-before-hide',
-        onScaleHide: 'scale-hide'
-    } as ScaleTooltipEvents,
-    defineCustomElement: defineScaleTooltip
+    clientModule: clientComponents.ScaleTooltip as StencilReactComponent<ScaleTooltipElement, ScaleTooltipEvents, JSX.ScaleTooltip>,
+    serializeShadowRoot
 });
diff --git a/packages/components-react/tsconfig.test.json b/packages/components-react/tsconfig.test.json
new file mode 100644
index 0000000000..eb536d0a6e
--- /dev/null
+++ b/packages/components-react/tsconfig.test.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "rootDir": ".",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true
+  },
+  "include": ["__tests__/types.test.tsx", "dist/**/*.d.ts"]
+}
diff --git a/packages/components/framework-targets.ts b/packages/components/framework-targets.ts
index 2b52edd55c..3448c82333 100644
--- a/packages/components/framework-targets.ts
+++ b/packages/components/framework-targets.ts
@@ -86,6 +86,7 @@ export const frameworkTargets = [
     excludeComponents,
     outDir: '../components-react/src',
     hydrateModule: '@telekom/scale-components/hydrate',
+    clientModule: '@telekom/scale-components',
   }),
   vueOutputTarget({
     componentCorePackage: '@telekom/scale-components',
diff --git a/packages/components/package.json b/packages/components/package.json
index 669f4baf5d..5aefc3430b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -23,7 +23,7 @@
     "hydrate/"
   ],
   "scripts": {
-    "build": "stencil build --docs-readme",
+    "build": "stencil build --docs-readme && node scripts/patch-custom-elements-types.js",
     "build:whitelabel": "WHITELABEL=1 stencil build --docs-readme",
     "build:watch": "stencil build --watch --serve --config stencil-dev.config.ts",
     "build:staging": "stencil build --config stencil-staging.config.ts",
@@ -42,7 +42,7 @@
     "@nowseemee/vue-output-target": "0.0.4",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^1.1.0",
-    "@stencil/react-output-target": "^1.1.1",
+    "@stencil/react-output-target": "~1.5.1",
     "@types/classnames": "2.2.8",
     "@types/jest": "24.9.1",
     "@types/resize-observer-browser": "^0.1.11",
diff --git a/packages/components/scripts/patch-custom-elements-types.js b/packages/components/scripts/patch-custom-elements-types.js
new file mode 100644
index 0000000000..51aa95506b
--- /dev/null
+++ b/packages/components/scripts/patch-custom-elements-types.js
@@ -0,0 +1,15 @@
+/**
+ * Post-build script: ensures the dist-custom-elements barrel
+ * re-exports JSX types so that @stencil/react-output-target v1.5+
+ * can import { JSX } from "@telekom/scale-components/dist/components".
+ */
+const fs = require('fs');
+const path = require('path');
+
+const filePath = path.join(__dirname, '..', 'dist', 'components', 'index.d.ts');
+const reExport = `\nexport type { JSX } from '../types/components';\n`;
+
+const content = fs.readFileSync(filePath, 'utf8');
+if (!content.includes('export type { JSX }')) {
+  fs.appendFileSync(filePath, reExport);
+}
diff --git a/yarn.lock b/yarn.lock
index 1a0a96c7d9..fef940f9af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5249,10 +5249,10 @@
     "@rollup/rollup-win32-arm64-msvc" "4.34.9"
     "@rollup/rollup-win32-x64-msvc" "4.34.9"
 
-"@stencil/react-output-target@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@stencil/react-output-target/-/react-output-target-1.1.1.tgz#e3097bd17e3734be665a5d3fccfe2ee561ee9a9d"
-  integrity sha512-769RC9X7NvDSOBGWFCL9MS6pyZ4NXOuzgU8CKfU40Bn//be9pOKuI37dQNi1fOWnrlyIe+/HAZr64MeVYKwDMg==
+"@stencil/react-output-target@~1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@stencil/react-output-target/-/react-output-target-1.5.1.tgz#df3e3695baea80f1c8bdda1f9950f6cd720dc23a"
+  integrity sha512-nUMoMKXn9hDrL3MmREXoxhaNO9Mm7YTpNYge/8UkHVdMRAMVWqAtX6MNRziJ7oXZyhTaQcHvF9pUEgrg1aLVPQ==
   dependencies:
     "@lit/react" "^1.0.7"
     html-react-parser "^5.2.2"