@sellmate/design-system-react 1.0.78 → 1.1.0

package/lib/components/components.ts

@@ -7,11 +7,15 @@
 
 /* eslint-disable */
 
-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 { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+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";
+import type { Components } from "@sellmate/design-system/dist/components";
 import { SdActionModal as SdActionModalElement, defineCustomElement as defineSdActionModal } from "@sellmate/design-system/dist/components/sd-action-modal.js";
 import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
 import { SdBarcodeInput as SdBarcodeInputElement, defineCustomElement as defineSdBarcodeInput } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
-import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
 import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
 import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
 import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
@@ -34,6 +38,7 @@ import { SdGhostButton as SdGhostButtonElement, defineCustomElement as defineSdG
 import { SdGuide as SdGuideElement, defineCustomElement as defineSdGuide } from "@sellmate/design-system/dist/components/sd-guide.js";
 import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@sellmate/design-system/dist/components/sd-icon.js";
 import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
+import { SdKeyValueTable as SdKeyValueTableElement, defineCustomElement as defineSdKeyValueTable } from "@sellmate/design-system/dist/components/sd-key-value-table.js";
 import { SdLinearProgress as SdLinearProgressElement, defineCustomElement as defineSdLinearProgress } from "@sellmate/design-system/dist/components/sd-linear-progress.js";
 import { SdLoadingContainer as SdLoadingContainerElement, defineCustomElement as defineSdLoadingContainer } from "@sellmate/design-system/dist/components/sd-loading-container.js";
 import { SdLoadingModal as SdLoadingModalElement, defineCustomElement as defineSdLoadingModal } from "@sellmate/design-system/dist/components/sd-loading-modal.js";
@@ -41,6 +46,7 @@ import { SdModalContainer as SdModalContainerElement, defineCustomElement as def
 import { SdNumberInput as SdNumberInputElement, defineCustomElement as defineSdNumberInput } from "@sellmate/design-system/dist/components/sd-number-input.js";
 import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
 import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
+import { SdPopup as SdPopupElement, defineCustomElement as defineSdPopup } from "@sellmate/design-system/dist/components/sd-popup.js";
 import { SdPortal as SdPortalElement, defineCustomElement as defineSdPortal } from "@sellmate/design-system/dist/components/sd-portal.js";
 import { SdRadioButton as SdRadioButtonElement, defineCustomElement as defineSdRadioButton } from "@sellmate/design-system/dist/components/sd-radio-button.js";
 import { SdRadioGroup as SdRadioGroupElement, defineCustomElement as defineSdRadioGroup } from "@sellmate/design-system/dist/components/sd-radio-group.js";
@@ -64,16 +70,13 @@ import { SdToast as SdToastElement, defineCustomElement as defineSdToast } from
 import { SdToggle as SdToggleElement, defineCustomElement as defineSdToggle } from "@sellmate/design-system/dist/components/sd-toggle.js";
 import { SdTooltip as SdTooltipElement, defineCustomElement as defineSdTooltip } from "@sellmate/design-system/dist/components/sd-tooltip.js";
 import { SdTr as SdTrElement, defineCustomElement as defineSdTr } from "@sellmate/design-system/dist/components/sd-tr.js";
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
 
 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',
     elementClass: SdActionModalElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -87,7 +90,7 @@ export const SdActionModal: StencilReactComponent<SdActionModalElement, SdAction
 
 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',
     elementClass: SdBadgeElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -97,12 +100,12 @@ export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@
 });
 
 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',
     elementClass: SdBarcodeInputElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -117,7 +120,7 @@ export const SdBarcodeInput: StencilReactComponent<SdBarcodeInputElement, SdBarc
 
 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',
     elementClass: SdButtonElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -126,23 +129,12 @@ export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> =
     defineCustomElement: defineSdButton
 });
 
-export type SdButtonV2Events = { onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>> };
-
-export const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events> = /*@__PURE__*/ createComponent<SdButtonV2Element, SdButtonV2Events>({
-    tagName: 'sd-button-v2',
-    elementClass: SdButtonV2Element,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onSdClick: 'sdClick' } as SdButtonV2Events,
-    defineCustomElement: defineSdButtonV2
-});
-
 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',
     elementClass: SdCalendarElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -156,7 +148,7 @@ export const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEven
 
 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',
     elementClass: SdCardElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -167,7 +159,7 @@ export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__P
 
 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',
     elementClass: SdCheckboxElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -177,13 +169,13 @@ export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEven
 });
 
 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',
     elementClass: SdChipElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -199,7 +191,7 @@ export const SdChip: StencilReactComponent<SdChipElement, SdChipEvents> = /*@__P
 
 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',
     elementClass: SdCircleProgressElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -209,12 +201,12 @@ export const SdCircleProgress: StencilReactComponent<SdCircleProgressElement, Sd
 });
 
 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',
     elementClass: SdConfirmModalElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -228,11 +220,11 @@ export const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConf
 });
 
 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',
     elementClass: SdDateBoxElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -245,11 +237,11 @@ export const SdDateBox: StencilReactComponent<SdDateBoxElement, SdDateBoxEvents>
 });
 
 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',
     elementClass: SdDatePickerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -262,11 +254,11 @@ export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePick
 });
 
 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',
     elementClass: SdDatePickerCalendarElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -278,9 +270,9 @@ export const SdDatePickerCalendar: StencilReactComponent<SdDatePickerCalendarEle
     defineCustomElement: defineSdDatePickerCalendar
 });
 
-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',
     elementClass: SdDatePickerTriggerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -291,10 +283,10 @@ export const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerEleme
 
 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',
     elementClass: SdDateRangePickerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -307,11 +299,11 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
 });
 
 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',
     elementClass: SdDateRangePickerCalendarElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -325,10 +317,10 @@ export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerC
 
 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',
     elementClass: SdDropdownButtonElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -342,7 +334,7 @@ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, Sd
 
 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',
     elementClass: SdFieldElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -353,13 +345,10 @@ export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@
 
 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',
     elementClass: SdFilePickerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -371,9 +360,9 @@ export const SdFilePicker: StencilReactComponent<SdFilePickerElement, SdFilePick
     defineCustomElement: defineSdFilePicker
 });
 
-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',
     elementClass: SdFloatingPortalElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -383,11 +372,11 @@ export const SdFloatingPortal: StencilReactComponent<SdFloatingPortalElement, Sd
 });
 
 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',
     elementClass: SdFormElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -401,7 +390,7 @@ export const SdForm: StencilReactComponent<SdFormElement, SdFormEvents> = /*@__P
 
 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',
     elementClass: SdGhostButtonElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -412,7 +401,7 @@ export const SdGhostButton: StencilReactComponent<SdGhostButtonElement, SdGhostB
 
 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',
     elementClass: SdGuideElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -423,7 +412,7 @@ export const SdGuide: StencilReactComponent<SdGuideElement, SdGuideEvents> = /*@
 
 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',
     elementClass: SdIconElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -433,12 +422,12 @@ export const SdIcon: StencilReactComponent<SdIconElement, SdIconEvents> = /*@__P
 });
 
 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',
     elementClass: SdInputElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -451,9 +440,26 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
     defineCustomElement: defineSdInput
 });
 
+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',
+    elementClass: SdKeyValueTableElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdChange: 'sdChange',
+        onSdSearch: 'sdSearch'
+    } as SdKeyValueTableEvents,
+    defineCustomElement: defineSdKeyValueTable
+});
+
 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',
     elementClass: SdLinearProgressElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -464,7 +470,7 @@ export const SdLinearProgress: StencilReactComponent<SdLinearProgressElement, Sd
 
 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',
     elementClass: SdLoadingContainerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -473,9 +479,9 @@ export const SdLoadingContainer: StencilReactComponent<SdLoadingContainerElement
     defineCustomElement: defineSdLoadingContainer
 });
 
-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',
     elementClass: SdLoadingModalElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -486,7 +492,7 @@ export const SdLoadingModal: StencilReactComponent<SdLoadingModalElement, SdLoad
 
 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',
     elementClass: SdModalContainerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -496,12 +502,12 @@ export const SdModalContainer: StencilReactComponent<SdModalContainerElement, Sd
 });
 
 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',
     elementClass: SdNumberInputElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -514,9 +520,9 @@ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumber
     defineCustomElement: defineSdNumberInput
 });
 
-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',
     elementClass: SdPaginationElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -525,9 +531,9 @@ export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginati
     defineCustomElement: defineSdPagination
 });
 
-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',
     elementClass: SdPopoverElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -536,9 +542,20 @@ export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents>
     defineCustomElement: defineSdPopover
 });
 
-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',
+    elementClass: SdPopupElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onSdSubmit: 'sdSubmit' } as SdPopupEvents,
+    defineCustomElement: defineSdPopup
+});
+
+export type SdPortalEvents = { onSdClose: EventName<SdPortalCustomEvent<void>> };
+
+export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents, Components.SdPortal> = /*@__PURE__*/ createComponent<SdPortalElement, SdPortalEvents, Components.SdPortal>({
     tagName: 'sd-portal',
     elementClass: SdPortalElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -549,7 +566,7 @@ export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents> =
 
 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',
     elementClass: SdRadioElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -560,7 +577,7 @@ export const SdRadio: StencilReactComponent<SdRadioElement, SdRadioEvents> = /*@
 
 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',
     elementClass: SdRadioButtonElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -571,7 +588,7 @@ export const SdRadioButton: StencilReactComponent<SdRadioButtonElement, SdRadioB
 
 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',
     elementClass: SdRadioGroupElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -582,10 +599,10 @@ export const SdRadioGroup: StencilReactComponent<SdRadioGroupElement, SdRadioGro
 
 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',
     elementClass: SdSelectElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -599,7 +616,7 @@ export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> =
 
 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',
     elementClass: SdSelectListItemElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -609,11 +626,11 @@ export const SdSelectListItem: StencilReactComponent<SdSelectListItemElement, Sd
 });
 
 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',
     elementClass: SdSelectListItemSearchElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -627,7 +644,7 @@ export const SdSelectListItemSearch: StencilReactComponent<SdSelectListItemSearc
 
 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',
     elementClass: SdSelectListboxElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -637,12 +654,12 @@ export const SdSelectListbox: StencilReactComponent<SdSelectListboxElement, SdSe
 });
 
 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',
     elementClass: SdSelectTriggerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -655,9 +672,9 @@ export const SdSelectTrigger: StencilReactComponent<SdSelectTriggerElement, SdSe
     defineCustomElement: defineSdSelectTrigger
 });
 
-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',
     elementClass: SdSwitchElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -668,21 +685,13 @@ export const SdSwitch: StencilReactComponent<SdSwitchElement, SdSwitchEvents> =
 
 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',
     elementClass: SdTableElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -697,9 +706,9 @@ export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@
     defineCustomElement: defineSdTable
 });
 
-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',
     elementClass: SdTabsElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -710,7 +719,7 @@ export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__P
 
 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',
     elementClass: SdTagElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -721,7 +730,7 @@ export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents> = /*@__PURE
 
 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',
     elementClass: SdTbodyElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -732,7 +741,7 @@ export const SdTbody: StencilReactComponent<SdTbodyElement, SdTbodyEvents> = /*@
 
 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',
     elementClass: SdTdElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -741,9 +750,9 @@ export const SdTd: StencilReactComponent<SdTdElement, SdTdEvents> = /*@__PURE__*
     defineCustomElement: defineSdTd
 });
 
-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',
     elementClass: SdTextLinkElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -753,12 +762,12 @@ export const SdTextLink: StencilReactComponent<SdTextLinkElement, SdTextLinkEven
 });
 
 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',
     elementClass: SdTextareaElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -773,7 +782,7 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
 
 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',
     elementClass: SdTheadElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -782,23 +791,29 @@ export const SdThead: StencilReactComponent<SdTheadElement, SdTheadEvents> = /*@
     defineCustomElement: defineSdThead
 });
 
-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',
     elementClass: SdToastElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onSdClose: 'sdClose' } as SdToastEvents,
+    events: {
+        onSdClose: 'sdClose',
+        onSdButtonClick: 'sdButtonClick'
+    } as SdToastEvents,
     defineCustomElement: defineSdToast
 });
 
 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',
     elementClass: SdToastContainerElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -810,9 +825,9 @@ export const SdToastContainer: StencilReactComponent<SdToastContainerElement, Sd
     defineCustomElement: defineSdToastContainer
 });
 
-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',
     elementClass: SdToggleElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -823,7 +838,7 @@ export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> =
 
 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',
     elementClass: SdTooltipElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -834,7 +849,7 @@ export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents>
 
 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',
     elementClass: SdTrElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.