@sellmate/design-system-react 1.0.78 → 1.1.0

package/lib/components/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.
@@ -5,14 +7,16 @@
 
 /* eslint-disable */
 
-// @ts-ignore - ignore potential type issues as the project is importing itself
-import * as clientComponents from '@sellmate/design-system-react';
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
 
-import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type Event, type RadioValue, type Row, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectListItemCustomEvent, type SdSelectListboxCustomEvent, type SdTableColumn, type SdTableCustomEvent, type SdTextareaCustomEvent, type SdTheadCustomEvent, type SelectOption, type SelectOptionSelectDetail, type SelectValue } from "@sellmate/design-system";
+import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type Event, type RadioValue, type Row, type SdActionModalCustomEvent, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdCalendarCustomEvent, type SdCheckboxCustomEvent, type SdChipCustomEvent, type SdConfirmModalCustomEvent, type SdDateBoxCustomEvent, type SdDatePickerCalendarCustomEvent, type SdDatePickerCustomEvent, type SdDatePickerTriggerCustomEvent, type SdDateRangePickerCalendarCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdFloatingPortalCustomEvent, type SdFormCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdKeyValueChangeDetail, type SdKeyValueTableCustomEvent, type SdLoadingModalCustomEvent, type SdNumberInputCustomEvent, type SdPaginationCustomEvent, type SdPopoverCustomEvent, type SdPopupCustomEvent, type SdPortalCustomEvent, type SdRadioButtonCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectListItemCustomEvent, type SdSelectListItemSearchCustomEvent, type SdSelectListboxCustomEvent, type SdSelectTriggerCustomEvent, type SdSwitchCustomEvent, type SdTableColumn, type SdTableCustomEvent, type SdTabsCustomEvent, type SdTextLinkCustomEvent, type SdTextareaCustomEvent, type SdTheadCustomEvent, type SdToastContainerCustomEvent, type SdToastCustomEvent, type SdToggleCustomEvent, type SelectOption, type SelectOptionSelectDetail, type SelectValue } from "@sellmate/design-system";
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from "@sellmate/design-system-react";
+import type { Components } from "@sellmate/design-system/dist/components";
 import { SdActionModal as SdActionModalElement } from "@sellmate/design-system/dist/components/sd-action-modal.js";
 import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
 import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
-import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
 import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
 import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
 import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
@@ -35,6 +39,7 @@ import { SdGhostButton as SdGhostButtonElement } from "@sellmate/design-system/d
 import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/components/sd-guide.js";
 import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
 import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
+import { SdKeyValueTable as SdKeyValueTableElement } from "@sellmate/design-system/dist/components/sd-key-value-table.js";
 import { SdLinearProgress as SdLinearProgressElement } from "@sellmate/design-system/dist/components/sd-linear-progress.js";
 import { SdLoadingContainer as SdLoadingContainerElement } from "@sellmate/design-system/dist/components/sd-loading-container.js";
 import { SdLoadingModal as SdLoadingModalElement } from "@sellmate/design-system/dist/components/sd-loading-modal.js";
@@ -42,6 +47,7 @@ import { SdModalContainer as SdModalContainerElement } from "@sellmate/design-sy
 import { SdNumberInput as SdNumberInputElement } from "@sellmate/design-system/dist/components/sd-number-input.js";
 import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
 import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
+import { SdPopup as SdPopupElement } from "@sellmate/design-system/dist/components/sd-popup.js";
 import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
 import { SdRadioButton as SdRadioButtonElement } from "@sellmate/design-system/dist/components/sd-radio-button.js";
 import { SdRadioGroup as SdRadioGroupElement } from "@sellmate/design-system/dist/components/sd-radio-group.js";
@@ -65,17 +71,15 @@ import { SdToast as SdToastElement } from "@sellmate/design-system/dist/componen
 import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
 import { SdTooltip as SdTooltipElement } from "@sellmate/design-system/dist/components/sd-tooltip.js";
 import { SdTr as SdTrElement } from "@sellmate/design-system/dist/components/sd-tr.js";
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
 
 export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
 
 export type SdActionModalEvents = {
-    onSdClose: EventName<CustomEvent<void>>,
-    onSdOk: EventName<CustomEvent<void>>
+    onSdClose: EventName<SdActionModalCustomEvent<void>>,
+    onSdOk: EventName<SdActionModalCustomEvent<void>>
 };
 
-export const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents> = /*@__PURE__*/ createComponent<SdActionModalElement, SdActionModalEvents>({
+export const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents, Components.SdActionModal> = /*@__PURE__*/ createComponent<SdActionModalElement, SdActionModalEvents, Components.SdActionModal>({
     tagName: 'sd-action-modal',
     properties: {
         modalTitle: 'modal-title',
@@ -83,30 +87,27 @@ export const SdActionModal: StencilReactComponent<SdActionModalElement, SdAction
         height: 'height'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdActionModal as ReactWebComponent<SdActionModalElement, SdActionModalEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdActionModal as StencilReactComponent<SdActionModalElement, SdActionModalEvents, Components.SdActionModal>,
+    serializeShadowRoot
 });
 
 export type SdBadgeEvents = NonNullable<unknown>;
 
-export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@__PURE__*/ createComponent<SdBadgeElement, SdBadgeEvents>({
+export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents, Components.SdBadge> = /*@__PURE__*/ createComponent<SdBadgeElement, SdBadgeEvents, Components.SdBadge>({
     tagName: 'sd-badge',
-    properties: {
-        color: 'color',
-        label: 'label'
-    },
+    properties: { color: 'color' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdBadge as ReactWebComponent<SdBadgeElement, SdBadgeEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdBadge as StencilReactComponent<SdBadgeElement, SdBadgeEvents, Components.SdBadge>,
+    serializeShadowRoot
 });
 
 export type SdBarcodeInputEvents = {
-    onSdUpdate: EventName<CustomEvent<string | number | null>>,
+    onSdUpdate: EventName<SdBarcodeInputCustomEvent<string | number | null>>,
     onSdFocus: EventName<SdBarcodeInputCustomEvent<Event>>,
     onSdBlur: EventName<SdBarcodeInputCustomEvent<Event>>
 };
 
-export const SdBarcodeInput: StencilReactComponent<SdBarcodeInputElement, SdBarcodeInputEvents> = /*@__PURE__*/ createComponent<SdBarcodeInputElement, SdBarcodeInputEvents>({
+export const SdBarcodeInput: StencilReactComponent<SdBarcodeInputElement, SdBarcodeInputEvents, Components.SdBarcodeInput> = /*@__PURE__*/ createComponent<SdBarcodeInputElement, SdBarcodeInputEvents, Components.SdBarcodeInput>({
     tagName: 'sd-barcode-input',
     properties: {
         value: 'value',
@@ -132,37 +133,14 @@ export const SdBarcodeInput: StencilReactComponent<SdBarcodeInputElement, SdBarc
         name: 'name',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdBarcodeInput as ReactWebComponent<SdBarcodeInputElement, SdBarcodeInputEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdBarcodeInput as StencilReactComponent<SdBarcodeInputElement, SdBarcodeInputEvents, Components.SdBarcodeInput>,
+    serializeShadowRoot
 });
 
 export type SdButtonEvents = { onSdClick: EventName<SdButtonCustomEvent<MouseEvent>> };
 
-export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> = /*@__PURE__*/ createComponent<SdButtonElement, SdButtonEvents>({
+export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents, Components.SdButton> = /*@__PURE__*/ createComponent<SdButtonElement, SdButtonEvents, Components.SdButton>({
     tagName: 'sd-button',
-    properties: {
-        variant: 'variant',
-        size: 'size',
-        color: 'color',
-        label: 'label',
-        disabled: 'disabled',
-        type: 'type',
-        icon: 'icon',
-        iconColor: 'icon-color',
-        iconSize: 'icon-size',
-        iconRight: 'icon-right',
-        noHover: 'no-hover',
-        sdClass: 'sd-class'
-    },
-    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdButton as ReactWebComponent<SdButtonElement, SdButtonEvents>,
-    serializeShadowRoot,
-});
-
-export type SdButtonV2Events = { onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>> };
-
-export const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events> = /*@__PURE__*/ createComponent<SdButtonV2Element, SdButtonV2Events>({
-    tagName: 'sd-button-v2',
     properties: {
         name: 'name',
         label: 'label',
@@ -173,39 +151,39 @@ export const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Even
         type: 'type'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdButtonV2 as ReactWebComponent<SdButtonV2Element, SdButtonV2Events>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdButton as StencilReactComponent<SdButtonElement, SdButtonEvents, Components.SdButton>,
+    serializeShadowRoot
 });
 
 export type SdCalendarEvents = {
-    onSdSelect: EventName<CustomEvent<string>>,
-    onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
+    onSdSelect: EventName<SdCalendarCustomEvent<string>>,
+    onSdViewChange: EventName<SdCalendarCustomEvent<{ year: number; month: number }>>
 };
 
-export const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents> = /*@__PURE__*/ createComponent<SdCalendarElement, SdCalendarEvents>({
+export const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar> = /*@__PURE__*/ createComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar>({
     tagName: 'sd-calendar',
     properties: { value: 'value' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdCalendar as ReactWebComponent<SdCalendarElement, SdCalendarEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdCalendar as StencilReactComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar>,
+    serializeShadowRoot
 });
 
 export type SdCardEvents = NonNullable<unknown>;
 
-export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents>({
+export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents, Components.SdCard> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents, Components.SdCard>({
     tagName: 'sd-card',
     properties: {
         bordered: 'bordered',
         sdClass: 'sd-class'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdCard as ReactWebComponent<SdCardElement, SdCardEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdCard as StencilReactComponent<SdCardElement, SdCardEvents, Components.SdCard>,
+    serializeShadowRoot
 });
 
 export type SdCheckboxEvents = { onSdUpdate: EventName<SdCheckboxCustomEvent<CheckedType>> };
 
-export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEvents> = /*@__PURE__*/ createComponent<SdCheckboxElement, SdCheckboxEvents>({
+export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEvents, Components.SdCheckbox> = /*@__PURE__*/ createComponent<SdCheckboxElement, SdCheckboxEvents, Components.SdCheckbox>({
     tagName: 'sd-checkbox',
     properties: {
         value: 'value',
@@ -215,18 +193,18 @@ export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEven
         label: 'label'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdCheckbox as ReactWebComponent<SdCheckboxElement, SdCheckboxEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdCheckbox as StencilReactComponent<SdCheckboxElement, SdCheckboxEvents, Components.SdCheckbox>,
+    serializeShadowRoot
 });
 
 export type SdChipEvents = {
-    onSdUpdate: EventName<CustomEvent<string>>,
-    onSdRemove: EventName<CustomEvent<void>>,
-    onSdFocus: EventName<CustomEvent<void>>,
-    onSdBlur: EventName<CustomEvent<void>>
+    onSdUpdate: EventName<SdChipCustomEvent<string>>,
+    onSdRemove: EventName<SdChipCustomEvent<void>>,
+    onSdFocus: EventName<SdChipCustomEvent<void>>,
+    onSdBlur: EventName<SdChipCustomEvent<void>>
 };
 
-export const SdChip: StencilReactComponent<SdChipElement, SdChipEvents> = /*@__PURE__*/ createComponent<SdChipElement, SdChipEvents>({
+export const SdChip: StencilReactComponent<SdChipElement, SdChipEvents, Components.SdChip> = /*@__PURE__*/ createComponent<SdChipElement, SdChipEvents, Components.SdChip>({
     tagName: 'sd-chip',
     properties: {
         name: 'name',
@@ -236,13 +214,13 @@ export const SdChip: StencilReactComponent<SdChipElement, SdChipEvents> = /*@__P
         placeholder: 'placeholder',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdChip as ReactWebComponent<SdChipElement, SdChipEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdChip as StencilReactComponent<SdChipElement, SdChipEvents, Components.SdChip>,
+    serializeShadowRoot
 });
 
 export type SdCircleProgressEvents = NonNullable<unknown>;
 
-export const SdCircleProgress: StencilReactComponent<SdCircleProgressElement, SdCircleProgressEvents> = /*@__PURE__*/ createComponent<SdCircleProgressElement, SdCircleProgressEvents>({
+export const SdCircleProgress: StencilReactComponent<SdCircleProgressElement, SdCircleProgressEvents, Components.SdCircleProgress> = /*@__PURE__*/ createComponent<SdCircleProgressElement, SdCircleProgressEvents, Components.SdCircleProgress>({
     tagName: 'sd-circle-progress',
     properties: {
         indeterminate: 'indeterminate',
@@ -251,17 +229,17 @@ export const SdCircleProgress: StencilReactComponent<SdCircleProgressElement, Sd
         label: 'label'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdCircleProgress as ReactWebComponent<SdCircleProgressElement, SdCircleProgressEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdCircleProgress as StencilReactComponent<SdCircleProgressElement, SdCircleProgressEvents, Components.SdCircleProgress>,
+    serializeShadowRoot
 });
 
 export type SdConfirmModalEvents = {
-    onSdClose: EventName<CustomEvent<void>>,
-    onSdCancel: EventName<CustomEvent<void>>,
-    onSdOk: EventName<CustomEvent<void>>
+    onSdClose: EventName<SdConfirmModalCustomEvent<void>>,
+    onSdCancel: EventName<SdConfirmModalCustomEvent<void>>,
+    onSdOk: EventName<SdConfirmModalCustomEvent<void>>
 };
 
-export const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents> = /*@__PURE__*/ createComponent<SdConfirmModalElement, SdConfirmModalEvents>({
+export const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents, Components.SdConfirmModal> = /*@__PURE__*/ createComponent<SdConfirmModalElement, SdConfirmModalEvents, Components.SdConfirmModal>({
     tagName: 'sd-confirm-modal',
     properties: {
         type: 'type',
@@ -276,16 +254,16 @@ export const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConf
         topMessage: 'topMessage',
         bottomMessage: 'bottomMessage'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdConfirmModal as ReactWebComponent<SdConfirmModalElement, SdConfirmModalEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdConfirmModal as StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents, Components.SdConfirmModal>,
+    serializeShadowRoot
 });
 
 export type SdDateBoxEvents = {
-    onSdClick: EventName<CustomEvent<number | string | null>>,
-    onSdMouseOver: EventName<CustomEvent<number | string | null>>
+    onSdClick: EventName<SdDateBoxCustomEvent<number | string | null>>,
+    onSdMouseOver: EventName<SdDateBoxCustomEvent<number | string | null>>
 };
 
-export const SdDateBox: StencilReactComponent<SdDateBoxElement, SdDateBoxEvents> = /*@__PURE__*/ createComponent<SdDateBoxElement, SdDateBoxEvents>({
+export const SdDateBox: StencilReactComponent<SdDateBoxElement, SdDateBoxEvents, Components.SdDateBox> = /*@__PURE__*/ createComponent<SdDateBoxElement, SdDateBoxEvents, Components.SdDateBox>({
     tagName: 'sd-date-box',
     properties: {
         date: 'date',
@@ -298,16 +276,16 @@ export const SdDateBox: StencilReactComponent<SdDateBoxElement, SdDateBoxEvents>
         type: 'type'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdDateBox as ReactWebComponent<SdDateBoxElement, SdDateBoxEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdDateBox as StencilReactComponent<SdDateBoxElement, SdDateBoxEvents, Components.SdDateBox>,
+    serializeShadowRoot
 });
 
 export type SdDatePickerEvents = {
-    onSdUpdate: EventName<CustomEvent<string | null>>,
-    onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
+    onSdUpdate: EventName<SdDatePickerCustomEvent<string | null>>,
+    onSdViewChange: EventName<SdDatePickerCustomEvent<{ year: number; month: number }>>
 };
 
-export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePickerEvents> = /*@__PURE__*/ createComponent<SdDatePickerElement, SdDatePickerEvents>({
+export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePickerEvents, Components.SdDatePicker> = /*@__PURE__*/ createComponent<SdDatePickerElement, SdDatePickerEvents, Components.SdDatePicker>({
     tagName: 'sd-date-picker',
     properties: {
         value: 'value',
@@ -326,26 +304,26 @@ export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePick
         name: 'name',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdDatePicker as ReactWebComponent<SdDatePickerElement, SdDatePickerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdDatePicker as StencilReactComponent<SdDatePickerElement, SdDatePickerEvents, Components.SdDatePicker>,
+    serializeShadowRoot
 });
 
 export type SdDatePickerCalendarEvents = {
-    onSdSelect: EventName<CustomEvent<string>>,
-    onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
+    onSdSelect: EventName<SdDatePickerCalendarCustomEvent<string>>,
+    onSdViewChange: EventName<SdDatePickerCalendarCustomEvent<{ year: number; month: number }>>
 };
 
-export const SdDatePickerCalendar: StencilReactComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents> = /*@__PURE__*/ createComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents>({
+export const SdDatePickerCalendar: StencilReactComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents, Components.SdDatePickerCalendar> = /*@__PURE__*/ createComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents, Components.SdDatePickerCalendar>({
     tagName: 'sd-date-picker-calendar',
     properties: { value: 'value' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdDatePickerCalendar as ReactWebComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdDatePickerCalendar as StencilReactComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents, Components.SdDatePickerCalendar>,
+    serializeShadowRoot
 });
 
-export type SdDatePickerTriggerEvents = { onSdTriggerClick: EventName<CustomEvent<void>> };
+export type SdDatePickerTriggerEvents = { onSdTriggerClick: EventName<SdDatePickerTriggerCustomEvent<void>> };
 
-export const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents> = /*@__PURE__*/ createComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents>({
+export const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents, Components.SdDatePickerTrigger> = /*@__PURE__*/ createComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents, Components.SdDatePickerTrigger>({
     tagName: 'sd-date-picker-trigger',
     properties: {
         displayText: 'display-text',
@@ -354,16 +332,16 @@ export const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerEleme
         size: 'size'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdDatePickerTrigger as ReactWebComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdDatePickerTrigger as StencilReactComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents, Components.SdDatePickerTrigger>,
+    serializeShadowRoot
 });
 
 export type SdDateRangePickerEvents = {
     onSdUpdate: EventName<SdDateRangePickerCustomEvent<DateRangeValue>>,
-    onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
+    onSdViewChange: EventName<SdDateRangePickerCustomEvent<{ year: number; month: number }>>
 };
 
-export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents> = /*@__PURE__*/ createComponent<SdDateRangePickerElement, SdDateRangePickerEvents>({
+export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents, Components.SdDateRangePicker> = /*@__PURE__*/ createComponent<SdDateRangePickerElement, SdDateRangePickerEvents, Components.SdDateRangePicker>({
     tagName: 'sd-date-range-picker',
     properties: {
         size: 'size',
@@ -382,29 +360,29 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
         name: 'name',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdDateRangePicker as ReactWebComponent<SdDateRangePickerElement, SdDateRangePickerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdDateRangePicker as StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents, Components.SdDateRangePicker>,
+    serializeShadowRoot
 });
 
 export type SdDateRangePickerCalendarEvents = {
-    onSdSelect: EventName<CustomEvent<[string, string]>>,
-    onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
+    onSdSelect: EventName<SdDateRangePickerCalendarCustomEvent<[string, string]>>,
+    onSdViewChange: EventName<SdDateRangePickerCalendarCustomEvent<{ year: number; month: number }>>
 };
 
-export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents> = /*@__PURE__*/ createComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents>({
+export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents, Components.SdDateRangePickerCalendar> = /*@__PURE__*/ createComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents, Components.SdDateRangePickerCalendar>({
     tagName: 'sd-date-range-picker-calendar',
     properties: { maxRange: 'max-range' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdDateRangePickerCalendar as ReactWebComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdDateRangePickerCalendar as StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents, Components.SdDateRangePickerCalendar>,
+    serializeShadowRoot
 });
 
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
-    onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
+    onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{ isOpen: boolean }>>
 };
 
-export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents> = /*@__PURE__*/ createComponent<SdDropdownButtonElement, SdDropdownButtonEvents>({
+export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents, Components.SdDropdownButton> = /*@__PURE__*/ createComponent<SdDropdownButtonElement, SdDropdownButtonEvents, Components.SdDropdownButton>({
     tagName: 'sd-dropdown-button',
     properties: {
         name: 'name',
@@ -412,18 +390,19 @@ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, Sd
         disabled: 'disabled',
         items: 'items'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdDropdownButton as ReactWebComponent<SdDropdownButtonElement, SdDropdownButtonEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdDropdownButton as StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents, Components.SdDropdownButton>,
+    serializeShadowRoot
 });
 
 export type SdFieldEvents = NonNullable<unknown>;
 
-export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@__PURE__*/ createComponent<SdFieldElement, SdFieldEvents>({
+export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents, Components.SdField> = /*@__PURE__*/ createComponent<SdFieldElement, SdFieldEvents, Components.SdField>({
     tagName: 'sd-field',
     properties: {
         name: 'name',
         error: 'error',
         disabled: 'disabled',
+        readonly: 'readonly',
         hovered: 'hovered',
         focused: 'focused',
         status: 'status',
@@ -438,19 +417,16 @@ export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@
         labelTooltip: 'label-tooltip',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdField as ReactWebComponent<SdFieldElement, SdFieldEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdField as StencilReactComponent<SdFieldElement, SdFieldEvents, Components.SdField>,
+    serializeShadowRoot
 });
 
 export type SdFilePickerEvents = {
     onSdUpdate: EventName<SdFilePickerCustomEvent<File[] | File | null>>,
-    onSdReject: EventName<SdFilePickerCustomEvent<{
-        files: File[];
-        reason: 'max-file-size' | 'max-total-size' | 'max-files';
-    }>>
+    onSdReject: EventName<SdFilePickerCustomEvent<{ files: File[]; reason: 'max-file-size' | 'max-total-size' | 'max-files'; }>>
 };
 
-export const SdFilePicker: StencilReactComponent<SdFilePickerElement, SdFilePickerEvents> = /*@__PURE__*/ createComponent<SdFilePickerElement, SdFilePickerEvents>({
+export const SdFilePicker: StencilReactComponent<SdFilePickerElement, SdFilePickerEvents, Components.SdFilePicker> = /*@__PURE__*/ createComponent<SdFilePickerElement, SdFilePickerEvents, Components.SdFilePicker>({
     tagName: 'sd-file-picker',
     properties: {
         placeholder: 'placeholder',
@@ -477,13 +453,13 @@ export const SdFilePicker: StencilReactComponent<SdFilePickerElement, SdFilePick
         value: 'value',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdFilePicker as ReactWebComponent<SdFilePickerElement, SdFilePickerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdFilePicker as StencilReactComponent<SdFilePickerElement, SdFilePickerEvents, Components.SdFilePicker>,
+    serializeShadowRoot
 });
 
-export type SdFloatingPortalEvents = { onSdClose: EventName<CustomEvent<void>> };
+export type SdFloatingPortalEvents = { onSdClose: EventName<SdFloatingPortalCustomEvent<void>> };
 
-export const SdFloatingPortal: StencilReactComponent<SdFloatingPortalElement, SdFloatingPortalEvents> = /*@__PURE__*/ createComponent<SdFloatingPortalElement, SdFloatingPortalEvents>({
+export const SdFloatingPortal: StencilReactComponent<SdFloatingPortalElement, SdFloatingPortalEvents, Components.SdFloatingPortal> = /*@__PURE__*/ createComponent<SdFloatingPortalElement, SdFloatingPortalEvents, Components.SdFloatingPortal>({
     tagName: 'sd-floating-portal',
     properties: {
         to: 'to',
@@ -492,26 +468,26 @@ export const SdFloatingPortal: StencilReactComponent<SdFloatingPortalElement, Sd
         open: 'open'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdFloatingPortal as ReactWebComponent<SdFloatingPortalElement, SdFloatingPortalEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdFloatingPortal as StencilReactComponent<SdFloatingPortalElement, SdFloatingPortalEvents, Components.SdFloatingPortal>,
+    serializeShadowRoot
 });
 
 export type SdFormEvents = {
-    onSdSubmit: EventName<CustomEvent<void>>,
-    onSdValidationError: EventName<CustomEvent<{ names: string[] }>>
+    onSdSubmit: EventName<SdFormCustomEvent<void>>,
+    onSdValidationError: EventName<SdFormCustomEvent<{ names: string[] }>>
 };
 
-export const SdForm: StencilReactComponent<SdFormElement, SdFormEvents> = /*@__PURE__*/ createComponent<SdFormElement, SdFormEvents>({
+export const SdForm: StencilReactComponent<SdFormElement, SdFormEvents, Components.SdForm> = /*@__PURE__*/ createComponent<SdFormElement, SdFormEvents, Components.SdForm>({
     tagName: 'sd-form',
     properties: { formClass: 'form-class' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdForm as ReactWebComponent<SdFormElement, SdFormEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdForm as StencilReactComponent<SdFormElement, SdFormEvents, Components.SdForm>,
+    serializeShadowRoot
 });
 
 export type SdGhostButtonEvents = { onSdClick: EventName<SdGhostButtonCustomEvent<MouseEvent>> };
 
-export const SdGhostButton: StencilReactComponent<SdGhostButtonElement, SdGhostButtonEvents> = /*@__PURE__*/ createComponent<SdGhostButtonElement, SdGhostButtonEvents>({
+export const SdGhostButton: StencilReactComponent<SdGhostButtonElement, SdGhostButtonEvents, Components.SdGhostButton> = /*@__PURE__*/ createComponent<SdGhostButtonElement, SdGhostButtonEvents, Components.SdGhostButton>({
     tagName: 'sd-ghost-button',
     properties: {
         icon: 'icon',
@@ -521,13 +497,13 @@ export const SdGhostButton: StencilReactComponent<SdGhostButtonElement, SdGhostB
         disabled: 'disabled'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdGhostButton as ReactWebComponent<SdGhostButtonElement, SdGhostButtonEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdGhostButton as StencilReactComponent<SdGhostButtonElement, SdGhostButtonEvents, Components.SdGhostButton>,
+    serializeShadowRoot
 });
 
 export type SdGuideEvents = NonNullable<unknown>;
 
-export const SdGuide: StencilReactComponent<SdGuideElement, SdGuideEvents> = /*@__PURE__*/ createComponent<SdGuideElement, SdGuideEvents>({
+export const SdGuide: StencilReactComponent<SdGuideElement, SdGuideEvents, Components.SdGuide> = /*@__PURE__*/ createComponent<SdGuideElement, SdGuideEvents, Components.SdGuide>({
     tagName: 'sd-guide',
     properties: {
         type: 'type',
@@ -537,13 +513,13 @@ export const SdGuide: StencilReactComponent<SdGuideElement, SdGuideEvents> = /*@
         popupTitle: 'popup-title',
         popupWidth: 'popup-width'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdGuide as ReactWebComponent<SdGuideElement, SdGuideEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdGuide as StencilReactComponent<SdGuideElement, SdGuideEvents, Components.SdGuide>,
+    serializeShadowRoot
 });
 
 export type SdIconEvents = NonNullable<unknown>;
 
-export const SdIcon: StencilReactComponent<SdIconElement, SdIconEvents> = /*@__PURE__*/ createComponent<SdIconElement, SdIconEvents>({
+export const SdIcon: StencilReactComponent<SdIconElement, SdIconEvents, Components.SdIcon> = /*@__PURE__*/ createComponent<SdIconElement, SdIconEvents, Components.SdIcon>({
     tagName: 'sd-icon',
     properties: {
         name: 'name',
@@ -553,17 +529,17 @@ export const SdIcon: StencilReactComponent<SdIconElement, SdIconEvents> = /*@__P
         label: 'label'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdIcon as ReactWebComponent<SdIconElement, SdIconEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdIcon as StencilReactComponent<SdIconElement, SdIconEvents, Components.SdIcon>,
+    serializeShadowRoot
 });
 
 export type SdInputEvents = {
-    onSdUpdate: EventName<CustomEvent<string | number | null>>,
+    onSdUpdate: EventName<SdInputCustomEvent<string | number | null>>,
     onSdFocus: EventName<SdInputCustomEvent<Event>>,
     onSdBlur: EventName<SdInputCustomEvent<Event>>
 };
 
-export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@__PURE__*/ createComponent<SdInputElement, SdInputEvents>({
+export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents, Components.SdInput> = /*@__PURE__*/ createComponent<SdInputElement, SdInputEvents, Components.SdInput>({
     tagName: 'sd-input',
     properties: {
         value: 'value',
@@ -596,13 +572,29 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
         name: 'name',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdInput as ReactWebComponent<SdInputElement, SdInputEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdInput as StencilReactComponent<SdInputElement, SdInputEvents, Components.SdInput>,
+    serializeShadowRoot
+});
+
+export type SdKeyValueTableEvents = {
+    onSdChange: EventName<SdKeyValueTableCustomEvent<SdKeyValueChangeDetail>>,
+    onSdSearch: EventName<SdKeyValueTableCustomEvent<void>>
+};
+
+export const SdKeyValueTable: StencilReactComponent<SdKeyValueTableElement, SdKeyValueTableEvents, Components.SdKeyValueTable> = /*@__PURE__*/ createComponent<SdKeyValueTableElement, SdKeyValueTableEvents, Components.SdKeyValueTable>({
+    tagName: 'sd-key-value-table',
+    properties: {
+        search: 'search',
+        useTop: 'use-top',
+        fields: 'fields'},
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdKeyValueTable as StencilReactComponent<SdKeyValueTableElement, SdKeyValueTableEvents, Components.SdKeyValueTable>,
+    serializeShadowRoot
 });
 
 export type SdLinearProgressEvents = NonNullable<unknown>;
 
-export const SdLinearProgress: StencilReactComponent<SdLinearProgressElement, SdLinearProgressEvents> = /*@__PURE__*/ createComponent<SdLinearProgressElement, SdLinearProgressEvents>({
+export const SdLinearProgress: StencilReactComponent<SdLinearProgressElement, SdLinearProgressEvents, Components.SdLinearProgress> = /*@__PURE__*/ createComponent<SdLinearProgressElement, SdLinearProgressEvents, Components.SdLinearProgress>({
     tagName: 'sd-linear-progress',
     properties: {
         indeterminate: 'indeterminate',
@@ -611,23 +603,23 @@ export const SdLinearProgress: StencilReactComponent<SdLinearProgressElement, Sd
         label: 'label'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdLinearProgress as ReactWebComponent<SdLinearProgressElement, SdLinearProgressEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdLinearProgress as StencilReactComponent<SdLinearProgressElement, SdLinearProgressEvents, Components.SdLinearProgress>,
+    serializeShadowRoot
 });
 
 export type SdLoadingContainerEvents = NonNullable<unknown>;
 
-export const SdLoadingContainer: StencilReactComponent<SdLoadingContainerElement, SdLoadingContainerEvents> = /*@__PURE__*/ createComponent<SdLoadingContainerElement, SdLoadingContainerEvents>({
+export const SdLoadingContainer: StencilReactComponent<SdLoadingContainerElement, SdLoadingContainerEvents, Components.SdLoadingContainer> = /*@__PURE__*/ createComponent<SdLoadingContainerElement, SdLoadingContainerEvents, Components.SdLoadingContainer>({
     tagName: 'sd-loading-container',
     properties: {},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdLoadingContainer as ReactWebComponent<SdLoadingContainerElement, SdLoadingContainerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdLoadingContainer as StencilReactComponent<SdLoadingContainerElement, SdLoadingContainerEvents, Components.SdLoadingContainer>,
+    serializeShadowRoot
 });
 
-export type SdLoadingModalEvents = { onSdClick: EventName<CustomEvent<void>> };
+export type SdLoadingModalEvents = { onSdClick: EventName<SdLoadingModalCustomEvent<void>> };
 
-export const SdLoadingModal: StencilReactComponent<SdLoadingModalElement, SdLoadingModalEvents> = /*@__PURE__*/ createComponent<SdLoadingModalElement, SdLoadingModalEvents>({
+export const SdLoadingModal: StencilReactComponent<SdLoadingModalElement, SdLoadingModalEvents, Components.SdLoadingModal> = /*@__PURE__*/ createComponent<SdLoadingModalElement, SdLoadingModalEvents, Components.SdLoadingModal>({
     tagName: 'sd-loading-modal',
     properties: {
         state: 'state',
@@ -637,27 +629,27 @@ export const SdLoadingModal: StencilReactComponent<SdLoadingModalElement, SdLoad
         width: 'width',
         height: 'height'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdLoadingModal as ReactWebComponent<SdLoadingModalElement, SdLoadingModalEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdLoadingModal as StencilReactComponent<SdLoadingModalElement, SdLoadingModalEvents, Components.SdLoadingModal>,
+    serializeShadowRoot
 });
 
 export type SdModalContainerEvents = NonNullable<unknown>;
 
-export const SdModalContainer: StencilReactComponent<SdModalContainerElement, SdModalContainerEvents> = /*@__PURE__*/ createComponent<SdModalContainerElement, SdModalContainerEvents>({
+export const SdModalContainer: StencilReactComponent<SdModalContainerElement, SdModalContainerEvents, Components.SdModalContainer> = /*@__PURE__*/ createComponent<SdModalContainerElement, SdModalContainerEvents, Components.SdModalContainer>({
     tagName: 'sd-modal-container',
     properties: { autoRemove: 'auto-remove' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdModalContainer as ReactWebComponent<SdModalContainerElement, SdModalContainerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdModalContainer as StencilReactComponent<SdModalContainerElement, SdModalContainerEvents, Components.SdModalContainer>,
+    serializeShadowRoot
 });
 
 export type SdNumberInputEvents = {
-    onSdUpdate: EventName<CustomEvent<number | null>>,
+    onSdUpdate: EventName<SdNumberInputCustomEvent<number | null>>,
     onSdFocus: EventName<SdNumberInputCustomEvent<Event>>,
     onSdBlur: EventName<SdNumberInputCustomEvent<Event>>
 };
 
-export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumberInputEvents> = /*@__PURE__*/ createComponent<SdNumberInputElement, SdNumberInputEvents>({
+export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumberInputEvents, Components.SdNumberInput> = /*@__PURE__*/ createComponent<SdNumberInputElement, SdNumberInputEvents, Components.SdNumberInput>({
     tagName: 'sd-number-input',
     properties: {
         size: 'size',
@@ -688,13 +680,13 @@ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumber
         name: 'name',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdNumberInput as ReactWebComponent<SdNumberInputElement, SdNumberInputEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdNumberInput as StencilReactComponent<SdNumberInputElement, SdNumberInputEvents, Components.SdNumberInput>,
+    serializeShadowRoot
 });
 
-export type SdPaginationEvents = { onSdPageChange: EventName<CustomEvent<number>> };
+export type SdPaginationEvents = { onSdPageChange: EventName<SdPaginationCustomEvent<number>> };
 
-export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents> = /*@__PURE__*/ createComponent<SdPaginationElement, SdPaginationEvents>({
+export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents, Components.SdPagination> = /*@__PURE__*/ createComponent<SdPaginationElement, SdPaginationEvents, Components.SdPagination>({
     tagName: 'sd-pagination',
     properties: {
         currentPage: 'current-page',
@@ -702,13 +694,13 @@ export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginati
         simple: 'simple'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdPagination as ReactWebComponent<SdPaginationElement, SdPaginationEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdPagination as StencilReactComponent<SdPaginationElement, SdPaginationEvents, Components.SdPagination>,
+    serializeShadowRoot
 });
 
-export type SdPopoverEvents = { onSdShowChange: EventName<CustomEvent<boolean>> };
+export type SdPopoverEvents = { onSdShowChange: EventName<SdPopoverCustomEvent<boolean>> };
 
-export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents> = /*@__PURE__*/ createComponent<SdPopoverElement, SdPopoverEvents>({
+export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents, Components.SdPopover> = /*@__PURE__*/ createComponent<SdPopoverElement, SdPopoverEvents, Components.SdPopover>({
     tagName: 'sd-popover',
     properties: {
         show: 'show',
@@ -717,21 +709,37 @@ export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents>
         icon: 'icon',
         iconSize: 'icon-size',
         label: 'label',
-        buttonSize: 'button-size',
-        buttonVariant: 'button-variant',
+        name: 'name',
+        rightIcon: 'right-icon',
+        ariaLabel: 'aria-label',
+        disabled: 'disabled',
+        type: 'type',
         menuTitle: 'menu-title',
         menuClass: 'menu-class',
         useClose: 'use-close',
-        messages: 'messages',
-        buttons: 'buttons'},
+        messages: 'messages'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdPopover as ReactWebComponent<SdPopoverElement, SdPopoverEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdPopover as StencilReactComponent<SdPopoverElement, SdPopoverEvents, Components.SdPopover>,
+    serializeShadowRoot
 });
 
-export type SdPortalEvents = { onSdClose: EventName<CustomEvent<void>> };
+export type SdPopupEvents = { onSdSubmit: EventName<SdPopupCustomEvent<void>> };
 
-export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents> = /*@__PURE__*/ createComponent<SdPortalElement, SdPortalEvents>({
+export const SdPopup: StencilReactComponent<SdPopupElement, SdPopupEvents, Components.SdPopup> = /*@__PURE__*/ createComponent<SdPopupElement, SdPopupEvents, Components.SdPopup>({
+    tagName: 'sd-popup',
+    properties: {
+        popupTitle: 'popup-title',
+        type: 'type',
+        useFooter: 'use-footer'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdPopup as StencilReactComponent<SdPopupElement, SdPopupEvents, Components.SdPopup>,
+    serializeShadowRoot
+});
+
+export type SdPortalEvents = { onSdClose: EventName<SdPortalCustomEvent<void>> };
+
+export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents, Components.SdPortal> = /*@__PURE__*/ createComponent<SdPortalElement, SdPortalEvents, Components.SdPortal>({
     tagName: 'sd-portal',
     properties: {
         to: 'to',
@@ -740,13 +748,13 @@ export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents> =
         open: 'open'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdPortal as ReactWebComponent<SdPortalElement, SdPortalEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdPortal as StencilReactComponent<SdPortalElement, SdPortalEvents, Components.SdPortal>,
+    serializeShadowRoot
 });
 
 export type SdRadioEvents = { onSdUpdate: EventName<SdRadioCustomEvent<RadioValue>> };
 
-export const SdRadio: StencilReactComponent<SdRadioElement, SdRadioEvents> = /*@__PURE__*/ createComponent<SdRadioElement, SdRadioEvents>({
+export const SdRadio: StencilReactComponent<SdRadioElement, SdRadioEvents, Components.SdRadio> = /*@__PURE__*/ createComponent<SdRadioElement, SdRadioEvents, Components.SdRadio>({
     tagName: 'sd-radio',
     properties: {
         value: 'value',
@@ -755,13 +763,13 @@ export const SdRadio: StencilReactComponent<SdRadioElement, SdRadioEvents> = /*@
         label: 'label'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdRadio as ReactWebComponent<SdRadioElement, SdRadioEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdRadio as StencilReactComponent<SdRadioElement, SdRadioEvents, Components.SdRadio>,
+    serializeShadowRoot
 });
 
 export type SdRadioButtonEvents = { onSdUpdate: EventName<SdRadioButtonCustomEvent<RadioValue>> };
 
-export const SdRadioButton: StencilReactComponent<SdRadioButtonElement, SdRadioButtonEvents> = /*@__PURE__*/ createComponent<SdRadioButtonElement, SdRadioButtonEvents>({
+export const SdRadioButton: StencilReactComponent<SdRadioButtonElement, SdRadioButtonEvents, Components.SdRadioButton> = /*@__PURE__*/ createComponent<SdRadioButtonElement, SdRadioButtonEvents, Components.SdRadioButton>({
     tagName: 'sd-radio-button',
     properties: {
         value: 'value',
@@ -770,13 +778,13 @@ export const SdRadioButton: StencilReactComponent<SdRadioButtonElement, SdRadioB
         name: 'name',
         options: 'options'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdRadioButton as ReactWebComponent<SdRadioButtonElement, SdRadioButtonEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdRadioButton as StencilReactComponent<SdRadioButtonElement, SdRadioButtonEvents, Components.SdRadioButton>,
+    serializeShadowRoot
 });
 
 export type SdRadioGroupEvents = { onSdUpdate: EventName<SdRadioGroupCustomEvent<RadioValue>> };
 
-export const SdRadioGroup: StencilReactComponent<SdRadioGroupElement, SdRadioGroupEvents> = /*@__PURE__*/ createComponent<SdRadioGroupElement, SdRadioGroupEvents>({
+export const SdRadioGroup: StencilReactComponent<SdRadioGroupElement, SdRadioGroupEvents, Components.SdRadioGroup> = /*@__PURE__*/ createComponent<SdRadioGroupElement, SdRadioGroupEvents, Components.SdRadioGroup>({
     tagName: 'sd-radio-group',
     properties: {
         value: 'value',
@@ -785,16 +793,16 @@ export const SdRadioGroup: StencilReactComponent<SdRadioGroupElement, SdRadioGro
         groupName: 'group-name',
         options: 'options'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdRadioGroup as ReactWebComponent<SdRadioGroupElement, SdRadioGroupEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdRadioGroup as StencilReactComponent<SdRadioGroupElement, SdRadioGroupEvents, Components.SdRadioGroup>,
+    serializeShadowRoot
 });
 
 export type SdSelectEvents = {
     onSdUpdate: EventName<SdSelectCustomEvent<SelectValue>>,
-    onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
+    onSdDropDownShow: EventName<SdSelectCustomEvent<{ isOpen: boolean }>>
 };
 
-export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> = /*@__PURE__*/ createComponent<SdSelectElement, SdSelectEvents>({
+export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents, Components.SdSelect> = /*@__PURE__*/ createComponent<SdSelectElement, SdSelectEvents, Components.SdSelect>({
     tagName: 'sd-select',
     properties: {
         type: 'type',
@@ -820,13 +828,13 @@ export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> =
         options: 'options',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdSelect as ReactWebComponent<SdSelectElement, SdSelectEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdSelect as StencilReactComponent<SdSelectElement, SdSelectEvents, Components.SdSelect>,
+    serializeShadowRoot
 });
 
 export type SdSelectListItemEvents = { onSdListItemClick: EventName<SdSelectListItemCustomEvent<SelectOption>> };
 
-export const SdSelectListItem: StencilReactComponent<SdSelectListItemElement, SdSelectListItemEvents> = /*@__PURE__*/ createComponent<SdSelectListItemElement, SdSelectListItemEvents>({
+export const SdSelectListItem: StencilReactComponent<SdSelectListItemElement, SdSelectListItemEvents, Components.SdSelectListItem> = /*@__PURE__*/ createComponent<SdSelectListItemElement, SdSelectListItemEvents, Components.SdSelectListItem>({
     tagName: 'sd-select-list-item',
     properties: {
         depth: 'depth',
@@ -835,26 +843,26 @@ export const SdSelectListItem: StencilReactComponent<SdSelectListItemElement, Sd
         useCheckbox: 'use-checkbox'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdSelectListItem as ReactWebComponent<SdSelectListItemElement, SdSelectListItemEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdSelectListItem as StencilReactComponent<SdSelectListItemElement, SdSelectListItemEvents, Components.SdSelectListItem>,
+    serializeShadowRoot
 });
 
 export type SdSelectListItemSearchEvents = {
-    onSdSearchFilter: EventName<CustomEvent<string>>,
-    onSdSearchFocus: EventName<CustomEvent<void>>
+    onSdSearchFilter: EventName<SdSelectListItemSearchCustomEvent<string>>,
+    onSdSearchFocus: EventName<SdSelectListItemSearchCustomEvent<void>>
 };
 
-export const SdSelectListItemSearch: StencilReactComponent<SdSelectListItemSearchElement, SdSelectListItemSearchEvents> = /*@__PURE__*/ createComponent<SdSelectListItemSearchElement, SdSelectListItemSearchEvents>({
+export const SdSelectListItemSearch: StencilReactComponent<SdSelectListItemSearchElement, SdSelectListItemSearchEvents, Components.SdSelectListItemSearch> = /*@__PURE__*/ createComponent<SdSelectListItemSearchElement, SdSelectListItemSearchEvents, Components.SdSelectListItemSearch>({
     tagName: 'sd-select-list-item-search',
     properties: { isScrolled: 'is-scrolled' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdSelectListItemSearch as ReactWebComponent<SdSelectListItemSearchElement, SdSelectListItemSearchEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdSelectListItemSearch as StencilReactComponent<SdSelectListItemSearchElement, SdSelectListItemSearchEvents, Components.SdSelectListItemSearch>,
+    serializeShadowRoot
 });
 
 export type SdSelectListboxEvents = { onSdOptionSelect: EventName<SdSelectListboxCustomEvent<SelectOptionSelectDetail>> };
 
-export const SdSelectListbox: StencilReactComponent<SdSelectListboxElement, SdSelectListboxEvents> = /*@__PURE__*/ createComponent<SdSelectListboxElement, SdSelectListboxEvents>({
+export const SdSelectListbox: StencilReactComponent<SdSelectListboxElement, SdSelectListboxEvents, Components.SdSelectListbox> = /*@__PURE__*/ createComponent<SdSelectListboxElement, SdSelectListboxEvents, Components.SdSelectListbox>({
     tagName: 'sd-select-listbox',
     properties: {
         type: 'type',
@@ -867,17 +875,17 @@ export const SdSelectListbox: StencilReactComponent<SdSelectListboxElement, SdSe
         maxHeight: 'max-height',
         options: 'options'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdSelectListbox as ReactWebComponent<SdSelectListboxElement, SdSelectListboxEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdSelectListbox as StencilReactComponent<SdSelectListboxElement, SdSelectListboxEvents, Components.SdSelectListbox>,
+    serializeShadowRoot
 });
 
 export type SdSelectTriggerEvents = {
-    onSdTriggerClick: EventName<CustomEvent<void>>,
-    onSdTriggerFocus: EventName<CustomEvent<void>>,
-    onSdTriggerBlur: EventName<CustomEvent<void>>
+    onSdTriggerClick: EventName<SdSelectTriggerCustomEvent<void>>,
+    onSdTriggerFocus: EventName<SdSelectTriggerCustomEvent<void>>,
+    onSdTriggerBlur: EventName<SdSelectTriggerCustomEvent<void>>
 };
 
-export const SdSelectTrigger: StencilReactComponent<SdSelectTriggerElement, SdSelectTriggerEvents> = /*@__PURE__*/ createComponent<SdSelectTriggerElement, SdSelectTriggerEvents>({
+export const SdSelectTrigger: StencilReactComponent<SdSelectTriggerElement, SdSelectTriggerEvents, Components.SdSelectTrigger> = /*@__PURE__*/ createComponent<SdSelectTriggerElement, SdSelectTriggerEvents, Components.SdSelectTrigger>({
     tagName: 'sd-select-trigger',
     properties: {
         displayText: 'display-text',
@@ -886,13 +894,13 @@ export const SdSelectTrigger: StencilReactComponent<SdSelectTriggerElement, SdSe
         isOpen: 'is-open'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdSelectTrigger as ReactWebComponent<SdSelectTriggerElement, SdSelectTriggerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdSelectTrigger as StencilReactComponent<SdSelectTriggerElement, SdSelectTriggerEvents, Components.SdSelectTrigger>,
+    serializeShadowRoot
 });
 
-export type SdSwitchEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
+export type SdSwitchEvents = { onSdUpdate: EventName<SdSwitchCustomEvent<boolean>> };
 
-export const SdSwitch: StencilReactComponent<SdSwitchElement, SdSwitchEvents> = /*@__PURE__*/ createComponent<SdSwitchElement, SdSwitchEvents>({
+export const SdSwitch: StencilReactComponent<SdSwitchElement, SdSwitchEvents, Components.SdSwitch> = /*@__PURE__*/ createComponent<SdSwitchElement, SdSwitchEvents, Components.SdSwitch>({
     tagName: 'sd-switch',
     properties: {
         value: 'value',
@@ -900,27 +908,19 @@ export const SdSwitch: StencilReactComponent<SdSwitchElement, SdSwitchEvents> =
         disabled: 'disabled'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdSwitch as ReactWebComponent<SdSwitchElement, SdSwitchEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdSwitch as StencilReactComponent<SdSwitchElement, SdSwitchEvents, Components.SdSwitch>,
+    serializeShadowRoot
 });
 
 export type SdTableEvents = {
     onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
-    onSdPageChange: EventName<CustomEvent<number>>,
-    onSdRowsPerPageChange: EventName<CustomEvent<number>>,
-    onSdVirtualUpdate: EventName<CustomEvent<{
-        from: number;
-        to: number;
-    }>>,
-    onSdVirtualReachEnd: EventName<CustomEvent<{
-        from: number;
-        to: number;
-        rowCount: number;
-        threshold: number;
-    }>>
+    onSdPageChange: EventName<SdTableCustomEvent<number>>,
+    onSdRowsPerPageChange: EventName<SdTableCustomEvent<number>>,
+    onSdVirtualUpdate: EventName<SdTableCustomEvent<{ from: number; to: number; }>>,
+    onSdVirtualReachEnd: EventName<SdTableCustomEvent<{ from: number; to: number; rowCount: number; threshold: number; }>>
 };
 
-export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
+export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents, Components.SdTable> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents, Components.SdTable>({
     tagName: 'sd-table',
     properties: {
         tableId: 'table-id',
@@ -930,6 +930,7 @@ export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@
         width: 'width',
         height: 'height',
         stickyHeader: 'sticky-header',
+        radius: 'radius',
         noDataLabel: 'no-data-label',
         isLoading: 'is-loading',
         useInternalPagination: 'use-internal-pagination',
@@ -943,13 +944,13 @@ export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@
         selected: 'selected',
         rowsPerPageOption: 'rowsPerPageOption'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTable as ReactWebComponent<SdTableElement, SdTableEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTable as StencilReactComponent<SdTableElement, SdTableEvents, Components.SdTable>,
+    serializeShadowRoot
 });
 
-export type SdTabsEvents = { onSdUpdate: EventName<CustomEvent<string>> };
+export type SdTabsEvents = { onSdUpdate: EventName<SdTabsCustomEvent<string>> };
 
-export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__PURE__*/ createComponent<SdTabsElement, SdTabsEvents>({
+export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents, Components.SdTabs> = /*@__PURE__*/ createComponent<SdTabsElement, SdTabsEvents, Components.SdTabs>({
     tagName: 'sd-tabs',
     properties: {
         value: 'value',
@@ -957,13 +958,13 @@ export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__P
         isSub: 'is-sub',
         tabs: 'tabs'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTabs as ReactWebComponent<SdTabsElement, SdTabsEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTabs as StencilReactComponent<SdTabsElement, SdTabsEvents, Components.SdTabs>,
+    serializeShadowRoot
 });
 
 export type SdTagEvents = NonNullable<unknown>;
 
-export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents> = /*@__PURE__*/ createComponent<SdTagElement, SdTagEvents>({
+export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents, Components.SdTag> = /*@__PURE__*/ createComponent<SdTagElement, SdTagEvents, Components.SdTag>({
     tagName: 'sd-tag',
     properties: {
         name: 'name',
@@ -972,24 +973,24 @@ export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents> = /*@__PURE
         isLeft: 'is-left'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTag as ReactWebComponent<SdTagElement, SdTagEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTag as StencilReactComponent<SdTagElement, SdTagEvents, Components.SdTag>,
+    serializeShadowRoot
 });
 
 export type SdTbodyEvents = NonNullable<unknown>;
 
-export const SdTbody: StencilReactComponent<SdTbodyElement, SdTbodyEvents> = /*@__PURE__*/ createComponent<SdTbodyElement, SdTbodyEvents>({
+export const SdTbody: StencilReactComponent<SdTbodyElement, SdTbodyEvents, Components.SdTbody> = /*@__PURE__*/ createComponent<SdTbodyElement, SdTbodyEvents, Components.SdTbody>({
     tagName: 'sd-tbody',
     properties: {
         rows: 'rows'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTbody as ReactWebComponent<SdTbodyElement, SdTbodyEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTbody as StencilReactComponent<SdTbodyElement, SdTbodyEvents, Components.SdTbody>,
+    serializeShadowRoot
 });
 
 export type SdTdEvents = NonNullable<unknown>;
 
-export const SdTd: StencilReactComponent<SdTdElement, SdTdEvents> = /*@__PURE__*/ createComponent<SdTdElement, SdTdEvents>({
+export const SdTd: StencilReactComponent<SdTdElement, SdTdEvents, Components.SdTd> = /*@__PURE__*/ createComponent<SdTdElement, SdTdEvents, Components.SdTd>({
     tagName: 'sd-td',
     properties: {
         field: 'field',
@@ -1000,13 +1001,13 @@ export const SdTd: StencilReactComponent<SdTdElement, SdTdEvents> = /*@__PURE__*
         sdClass: 'sd-class'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTd as ReactWebComponent<SdTdElement, SdTdEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTd as StencilReactComponent<SdTdElement, SdTdEvents, Components.SdTd>,
+    serializeShadowRoot
 });
 
-export type SdTextLinkEvents = { onSdClick: EventName<CustomEvent<void>> };
+export type SdTextLinkEvents = { onSdClick: EventName<SdTextLinkCustomEvent<void>> };
 
-export const SdTextLink: StencilReactComponent<SdTextLinkElement, SdTextLinkEvents> = /*@__PURE__*/ createComponent<SdTextLinkElement, SdTextLinkEvents>({
+export const SdTextLink: StencilReactComponent<SdTextLinkElement, SdTextLinkEvents, Components.SdTextLink> = /*@__PURE__*/ createComponent<SdTextLinkElement, SdTextLinkEvents, Components.SdTextLink>({
     tagName: 'sd-text-link',
     properties: {
         label: 'label',
@@ -1018,17 +1019,17 @@ export const SdTextLink: StencilReactComponent<SdTextLinkElement, SdTextLinkEven
         disabled: 'disabled'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTextLink as ReactWebComponent<SdTextLinkElement, SdTextLinkEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTextLink as StencilReactComponent<SdTextLinkElement, SdTextLinkEvents, Components.SdTextLink>,
+    serializeShadowRoot
 });
 
 export type SdTextareaEvents = {
-    onSdUpdate: EventName<CustomEvent<string | null>>,
+    onSdUpdate: EventName<SdTextareaCustomEvent<string | null>>,
     onSdFocus: EventName<SdTextareaCustomEvent<Event>>,
     onSdBlur: EventName<SdTextareaCustomEvent<Event>>
 };
 
-export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEvents> = /*@__PURE__*/ createComponent<SdTextareaElement, SdTextareaEvents>({
+export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEvents, Components.SdTextarea> = /*@__PURE__*/ createComponent<SdTextareaElement, SdTextareaEvents, Components.SdTextarea>({
     tagName: 'sd-textarea',
     properties: {
         value: 'value',
@@ -1055,13 +1056,13 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
         name: 'name',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTextarea as ReactWebComponent<SdTextareaElement, SdTextareaEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTextarea as StencilReactComponent<SdTextareaElement, SdTextareaEvents, Components.SdTextarea>,
+    serializeShadowRoot
 });
 
 export type SdTheadEvents = { onSdColumnSort: EventName<SdTheadCustomEvent<{ column: SdTableColumn }>> };
 
-export const SdThead: StencilReactComponent<SdTheadElement, SdTheadEvents> = /*@__PURE__*/ createComponent<SdTheadElement, SdTheadEvents>({
+export const SdThead: StencilReactComponent<SdTheadElement, SdTheadEvents, Components.SdThead> = /*@__PURE__*/ createComponent<SdTheadElement, SdTheadEvents, Components.SdThead>({
     tagName: 'sd-thead',
     properties: {
         selectable: 'selectable',
@@ -1073,33 +1074,37 @@ export const SdThead: StencilReactComponent<SdTheadElement, SdTheadEvents> = /*@
         rows: 'rows',
         columnWidths: 'columnWidths'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdThead as ReactWebComponent<SdTheadElement, SdTheadEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdThead as StencilReactComponent<SdTheadElement, SdTheadEvents, Components.SdThead>,
+    serializeShadowRoot
 });
 
-export type SdToastEvents = { onSdClose: EventName<CustomEvent<void>> };
+export type SdToastEvents = {
+    onSdClose: EventName<SdToastCustomEvent<void>>,
+    onSdButtonClick: EventName<SdToastCustomEvent<MouseEvent>>
+};
 
-export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@__PURE__*/ createComponent<SdToastElement, SdToastEvents>({
+export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents, Components.SdToast> = /*@__PURE__*/ createComponent<SdToastElement, SdToastEvents, Components.SdToast>({
     tagName: 'sd-toast',
     properties: {
         icon: 'icon',
         message: 'message',
         link: 'link',
         linkLabel: 'link-label',
+        buttonLabel: 'button-label',
         useClose: 'use-close',
         type: 'type'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdToast as ReactWebComponent<SdToastElement, SdToastEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdToast as StencilReactComponent<SdToastElement, SdToastEvents, Components.SdToast>,
+    serializeShadowRoot
 });
 
 export type SdToastContainerEvents = {
-    onSdToastShow: EventName<CustomEvent<{ id: string }>>,
-    onSdToastDismiss: EventName<CustomEvent<{ id: string }>>
+    onSdToastShow: EventName<SdToastContainerCustomEvent<{ id: string }>>,
+    onSdToastDismiss: EventName<SdToastContainerCustomEvent<{ id: string }>>
 };
 
-export const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents> = /*@__PURE__*/ createComponent<SdToastContainerElement, SdToastContainerEvents>({
+export const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents, Components.SdToastContainer> = /*@__PURE__*/ createComponent<SdToastContainerElement, SdToastContainerEvents, Components.SdToastContainer>({
     tagName: 'sd-toast-container',
     properties: {
         position: 'position',
@@ -1108,13 +1113,13 @@ export const SdToastContainer: StencilReactComponent<SdToastContainerElement, Sd
         zIndex: 'z-index'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdToastContainer as ReactWebComponent<SdToastContainerElement, SdToastContainerEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdToastContainer as StencilReactComponent<SdToastContainerElement, SdToastContainerEvents, Components.SdToastContainer>,
+    serializeShadowRoot
 });
 
-export type SdToggleEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
+export type SdToggleEvents = { onSdUpdate: EventName<SdToggleCustomEvent<boolean>> };
 
-export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> = /*@__PURE__*/ createComponent<SdToggleElement, SdToggleEvents>({
+export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents, Components.SdToggle> = /*@__PURE__*/ createComponent<SdToggleElement, SdToggleEvents, Components.SdToggle>({
     tagName: 'sd-toggle',
     properties: {
         value: 'value',
@@ -1122,13 +1127,13 @@ export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> =
         disabled: 'disabled'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdToggle as ReactWebComponent<SdToggleElement, SdToggleEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdToggle as StencilReactComponent<SdToggleElement, SdToggleEvents, Components.SdToggle>,
+    serializeShadowRoot
 });
 
 export type SdTooltipEvents = NonNullable<unknown>;
 
-export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents> = /*@__PURE__*/ createComponent<SdTooltipElement, SdTooltipEvents>({
+export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents, Components.SdTooltip> = /*@__PURE__*/ createComponent<SdTooltipElement, SdTooltipEvents, Components.SdTooltip>({
     tagName: 'sd-tooltip',
     properties: {
         trigger: 'trigger',
@@ -1138,25 +1143,27 @@ export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents>
         icon: 'icon',
         iconSize: 'icon-size',
         label: 'label',
-        buttonSize: 'button-size',
-        buttonVariant: 'button-variant',
-        noHover: 'no-hover',
+        name: 'name',
+        rightIcon: 'right-icon',
+        ariaLabel: 'aria-label',
+        disabled: 'disabled',
+        type: 'type',
         sdClass: 'sd-class'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTooltip as ReactWebComponent<SdTooltipElement, SdTooltipEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTooltip as StencilReactComponent<SdTooltipElement, SdTooltipEvents, Components.SdTooltip>,
+    serializeShadowRoot
 });
 
 export type SdTrEvents = NonNullable<unknown>;
 
-export const SdTr: StencilReactComponent<SdTrElement, SdTrEvents> = /*@__PURE__*/ createComponent<SdTrElement, SdTrEvents>({
+export const SdTr: StencilReactComponent<SdTrElement, SdTrEvents, Components.SdTr> = /*@__PURE__*/ createComponent<SdTrElement, SdTrEvents, Components.SdTr>({
     tagName: 'sd-tr',
     properties: {
         selectable: 'selectable',
         rowKey: 'row-key',
         columns: 'columns'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
-    clientModule: clientComponents.SdTr as ReactWebComponent<SdTrElement, SdTrEvents>,
-    serializeShadowRoot,
+    clientModule: clientComponents.SdTr as StencilReactComponent<SdTrElement, SdTrEvents, Components.SdTr>,
+    serializeShadowRoot
 });