@sbb-esta/lyne-react-dev 5.0.2-dev.1781795975 → 5.0.2-dev.1781845324

package/development/chip.js

@@ -1,3 +1,27 @@
-import { SbbChip } from "./chip/chip/chip.component.js";
-import { SbbChipGroup } from "./chip/chip-group/chip-group.component.js";
-export { SbbChip, SbbChipGroup };
+import { createComponent } from "./core.js";
+import { SbbChipElement, SbbChipGroupElement } from "@sbb-esta/lyne-elements/chip.pure.js";
+import react from "react";
+
+//#region src/react/chip/chip/chip.component.ts
+const SbbChip = createComponent({
+	tagName: "sbb-chip",
+	elementClass: SbbChipElement,
+	react
+});
+
+//#endregion
+//#region src/react/chip/chip-group/chip-group.component.ts
+const SbbChipGroup = createComponent({
+	tagName: "sbb-chip-group",
+	elementClass: SbbChipGroupElement,
+	react,
+	events: {
+		"onInput": "input",
+		"onChange": "change",
+		"onChipinputtokenend": "chipinputtokenend",
+		"onValidity": "validity"
+	}
+});
+
+//#endregion
+export { SbbChip, SbbChipGroup };

package/development/clock/clock.component.d.ts

@@ -1,3 +1,2 @@
 import { SbbClockElement } from '@sbb-esta/lyne-elements/clock.pure.js';
-export declare const SbbClock: import('../core.js').ReactWebComponent<SbbClockElement, {}>;
-//# sourceMappingURL=clock.component.d.ts.map
+export declare const SbbClock: import("../core.js").ReactWebComponent<SbbClockElement, {}>;

package/development/clock.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './clock/clock.component.js';
-//# sourceMappingURL=clock.d.ts.map

package/development/clock.js

@@ -1,2 +1,13 @@
-import { SbbClock } from "./clock/clock.component.js";
-export { SbbClock };
+import { createComponent } from "./core.js";
+import { SbbClockElement } from "@sbb-esta/lyne-elements/clock.pure.js";
+import react from "react";
+
+//#region src/react/clock/clock.component.ts
+const SbbClock = createComponent({
+	tagName: "sbb-clock",
+	elementClass: SbbClockElement,
+	react
+});
+
+//#endregion
+export { SbbClock };

package/development/container/container/container.component.d.ts

@@ -1,3 +1,2 @@
 import { SbbContainerElement } from '@sbb-esta/lyne-elements/container.pure.js';
-export declare const SbbContainer: import('../../core.js').ReactWebComponent<SbbContainerElement, {}>;
-//# sourceMappingURL=container.component.d.ts.map
+export declare const SbbContainer: import("../../core.js").ReactWebComponent<SbbContainerElement, {}>;

package/development/container/sticky-bar/sticky-bar.component.d.ts

@@ -1,9 +1,8 @@
-import { EventName } from '../../core.js';
+import { type EventName } from '../../core.js';
 import { SbbStickyBarElement } from '@sbb-esta/lyne-elements/container.pure.js';
-export declare const SbbStickyBar: import('../../core.js').ReactWebComponent<SbbStickyBarElement, {
+export declare const SbbStickyBar: import("../../core.js").ReactWebComponent<SbbStickyBarElement, {
     onStick: EventName<Event>;
     onUnstick: EventName<Event>;
     onBeforestick: EventName<Event>;
     onBeforeunstick: EventName<Event>;
 }>;
-//# sourceMappingURL=sticky-bar.component.d.ts.map

package/development/container.d.ts

@@ -1,4 +1,3 @@
 /** @entrypoint */
 export * from './container/container/container.component.js';
 export * from './container/sticky-bar/sticky-bar.component.js';
-//# sourceMappingURL=container.d.ts.map

package/development/container.js

@@ -1,3 +1,27 @@
-import { SbbContainer } from "./container/container/container.component.js";
-import { SbbStickyBar } from "./container/sticky-bar/sticky-bar.component.js";
-export { SbbContainer, SbbStickyBar };
+import { createComponent } from "./core.js";
+import { SbbContainerElement, SbbStickyBarElement } from "@sbb-esta/lyne-elements/container.pure.js";
+import react from "react";
+
+//#region src/react/container/container/container.component.ts
+const SbbContainer = createComponent({
+	tagName: "sbb-container",
+	elementClass: SbbContainerElement,
+	react
+});
+
+//#endregion
+//#region src/react/container/sticky-bar/sticky-bar.component.ts
+const SbbStickyBar = createComponent({
+	tagName: "sbb-sticky-bar",
+	elementClass: SbbStickyBarElement,
+	react,
+	events: {
+		"onStick": "stick",
+		"onUnstick": "unstick",
+		"onBeforestick": "beforestick",
+		"onBeforeunstick": "beforeunstick"
+	}
+});
+
+//#endregion
+export { SbbContainer, SbbStickyBar };

package/development/core/create-component.d.ts

@@ -1,4 +1,12 @@
-import { default as React } from 'react';
+/**
+ * Copied from https://github.com/lit/lit/blob/main/packages/react/src/create-component.ts
+ * TODO: Can be removed once https://github.com/lit/lit/issues/4023 or https://github.com/lit/lit/pull/4476 is solved.
+ *
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import type React from 'react';
 type DistributiveOmit<T, K extends string | number | symbol> = T extends any ? K extends keyof T ? Omit<T, K> : T : T;
 type PropsWithoutRef<T> = DistributiveOmit<T, 'ref'>;
 /**
@@ -86,4 +94,3 @@ interface Constructor<T> {
  */
 export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>({ react: React, tagName, elementClass, events, displayName, }: Options<I, E>) => ReactWebComponent<I, E>;
 export {};
-//# sourceMappingURL=create-component.d.ts.map

package/development/core.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './core/create-component.ts';
-//# sourceMappingURL=core.d.ts.map

package/development/core.js

@@ -1,2 +1,145 @@
-import { createComponent } from "./core/create-component.js";
-export { createComponent };
+import { isServer } from "lit";
+
+//#region src/react/core/create-component.ts
+/**
+* Copied from https://github.com/lit/lit/blob/main/packages/react/src/create-component.ts
+* TODO: Can be removed once https://github.com/lit/lit/issues/4023 or https://github.com/lit/lit/pull/4476 is solved.
+*
+* @license
+* Copyright 2018 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+const NODE_MODE = isServer;
+const reservedReactProperties = new Set([
+	"children",
+	"localName",
+	"ref",
+	"style",
+	"className",
+	"id"
+]);
+const listenedEvents = /* @__PURE__ */ new WeakMap();
+/**
+* Adds an event listener for the specified event to the given node. In the
+* React setup, there should only ever be one event listener. Thus, for
+* efficiency only one listener is added and the handler for that listener is
+* updated to point to the given listener function.
+*/
+const addOrUpdateEventListener = (node, event, listener) => {
+	let events = listenedEvents.get(node);
+	if (events === void 0) listenedEvents.set(node, events = /* @__PURE__ */ new Map());
+	let handler = events.get(event);
+	if (listener !== void 0) if (handler === void 0) {
+		events.set(event, handler = { handleEvent: listener });
+		node.addEventListener(event, handler);
+	} else handler.handleEvent = listener;
+	else if (handler !== void 0) {
+		events.delete(event);
+		node.removeEventListener(event, handler);
+	}
+};
+/**
+* Sets properties and events on custom elements. These properties and events
+* have been pre-filtered so we know they should apply to the custom element.
+*/
+const setProperty = (node, name, value, old, events) => {
+	const event = events?.[name];
+	if (event !== void 0) {
+		if (value !== old) addOrUpdateEventListener(node, event, value);
+		return;
+	}
+	node[name] = value;
+	if ((value === void 0 || value === null) && name in HTMLElement.prototype) node.removeAttribute(name);
+};
+/**
+* Creates a React component for a custom element. Properties are distinguished
+* from attributes automatically, and events can be configured so they are added
+* to the custom element as event listeners.
+*
+* @param options An options bag containing the parameters needed to generate a
+* wrapped web component.
+*
+* @param options.react The React module, typically imported from the `react`
+* npm package.
+* @param options.tagName The custom element tag name registered via
+* `customElements.define`.
+* @param options.elementClass The custom element class registered via
+* `customElements.define`.
+* @param options.events An object listing events to which the component can
+* listen. The object keys are the event property names passed in via React
+* props and the object values are the names of the corresponding events
+* generated by the custom element. For example, given `{onactivate:
+* 'activate'}` an event function may be passed via the component's `onactivate`
+* prop and will be called when the custom element fires its `activate` event.
+* @param options.displayName A React component display name, used in debugging
+* messages. Default value is inferred from the name of custom element class
+* registered via `customElements.define`.
+*/
+const createComponent = ({ react: React, tagName, elementClass, events, displayName }) => {
+	elementClass["finalize"]?.();
+	elementClass.define?.();
+	const eventProps = new Set(Object.keys(events ?? {}));
+	if (!NODE_MODE) {
+		for (const p of reservedReactProperties) if (p in elementClass.prototype && !(p in HTMLElement.prototype)) console.warn(`${tagName} contains property ${p} which is a React reserved property. It will be used by React and not set on the element.`);
+	}
+	const ReactComponent = React.forwardRef((props, ref) => {
+		const prevElemPropsRef = React.useRef(/* @__PURE__ */ new Map());
+		const elementRef = React.useRef(null);
+		const reactProps = {};
+		const elementProps = {};
+		const elementProperties = elementClass.elementProperties;
+		for (const [k, v] of Object.entries(props)) {
+			if (reservedReactProperties.has(k)) {
+				reactProps[k === "className" ? "class" : k] = v;
+				continue;
+			} else if (eventProps.has(k) || k in elementClass.prototype) {
+				const elementProperty = elementProperties?.get(k);
+				const toAttribute = elementProperty?.converter?.toAttribute;
+				if (!elementProperty || elementProperty.attribute === false || typeof v === "object" && !toAttribute) {
+					elementProps[k] = v;
+					continue;
+				}
+				const attributeName = elementProperty.attribute === true ? k : elementProperty.attribute || k;
+				if (elementProperty.type !== Boolean) reactProps[attributeName] = toAttribute ? toAttribute(v) : v;
+				else if (v) {
+					reactProps[attributeName] = "";
+					elementProps[k] = v;
+				} else elementProps[k] = false;
+				continue;
+			}
+			reactProps[k] = v;
+		}
+		if (!NODE_MODE) {
+			React.useLayoutEffect(() => {
+				if (elementRef.current === null) return;
+				const newElemProps = /* @__PURE__ */ new Map();
+				for (const key in elementProps) {
+					setProperty(elementRef.current, key, props[key], prevElemPropsRef.current.get(key), events);
+					prevElemPropsRef.current.delete(key);
+					newElemProps.set(key, props[key]);
+				}
+				for (const [key, value] of prevElemPropsRef.current) setProperty(elementRef.current, key, void 0, value, events);
+				prevElemPropsRef.current = newElemProps;
+			});
+			React.useLayoutEffect(() => {
+				elementRef.current?.removeAttribute("defer-hydration");
+			}, []);
+		}
+		if (NODE_MODE) {
+			if ((React.createElement.name === "litPatchedCreateElement" || globalThis.litSsrReactEnabled) && Object.keys(elementProps).length) reactProps["_$litProps$"] = elementProps;
+		} else reactProps["suppressHydrationWarning"] = true;
+		return React.createElement(tagName, {
+			...reactProps,
+			ref: React.useCallback((node) => {
+				elementRef.current = node;
+				if (typeof ref === "function") ref(node);
+				else if (ref !== null) ref.current = node;
+			}, [ref])
+		});
+	});
+	ReactComponent.displayName = displayName ?? elementClass.name;
+	return ReactComponent;
+};
+
+//#endregion
+export { createComponent };

package/development/date-input/date-input.component.d.ts

@@ -1,8 +1,7 @@
-import { EventName } from '../core.js';
+import { type EventName } from '../core.js';
 import { SbbDateInputElement } from '@sbb-esta/lyne-elements/date-input.pure.js';
-export declare const SbbDateInput: import('../core.js').ReactWebComponent<SbbDateInputElement<Date>, {
+export declare const SbbDateInput: import("../core.js").ReactWebComponent<SbbDateInputElement<Date>, {
     onInput: EventName<InputEvent>;
     onChange: EventName<Event>;
     onValidity: EventName<Event>;
 }>;
-//# sourceMappingURL=date-input.component.d.ts.map

package/development/date-input.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './date-input/date-input.component.js';
-//# sourceMappingURL=date-input.d.ts.map

package/development/date-input.js

@@ -1,2 +1,18 @@
-import { SbbDateInput } from "./date-input/date-input.component.js";
-export { SbbDateInput };
+import { createComponent } from "./core.js";
+import { SbbDateInputElement } from "@sbb-esta/lyne-elements/date-input.pure.js";
+import react from "react";
+
+//#region src/react/date-input/date-input.component.ts
+const SbbDateInput = createComponent({
+	tagName: "sbb-date-input",
+	elementClass: SbbDateInputElement,
+	react,
+	events: {
+		"onInput": "input",
+		"onChange": "change",
+		"onValidity": "validity"
+	}
+});
+
+//#endregion
+export { SbbDateInput };

package/development/datepicker/datepicker/datepicker.component.d.ts

@@ -1,7 +1,7 @@
-import { EventName } from '../../core.js';
+import { type EventName } from '../../core.js';
 import { SbbDatepickerElement } from '@sbb-esta/lyne-elements/datepicker.pure.js';
-import { SbbDateSelectedEvent } from '@sbb-esta/lyne-elements/calendar.pure.js';
-import { SbbPopoverCloseEvent } from '@sbb-esta/lyne-elements/popover.pure.js';
+import { type SbbDateSelectedEvent } from '@sbb-esta/lyne-elements/calendar.pure.js';
+import { type SbbPopoverCloseEvent } from '@sbb-esta/lyne-elements/popover.pure.js';
 declare class SbbDatepickerComponentType extends SbbDatepickerElement {
     set input(value: string | SbbDatepickerElement['input']);
     get input(): string | SbbDatepickerElement['input'];
@@ -10,7 +10,7 @@ declare class SbbDatepickerComponentType extends SbbDatepickerElement {
     set trigger(value: string | SbbDatepickerElement['trigger']);
     get trigger(): string | SbbDatepickerElement['trigger'];
 }
-export declare const SbbDatepicker: import('../../core.js').ReactWebComponent<SbbDatepickerComponentType, {
+export declare const SbbDatepicker: import("../../core.js").ReactWebComponent<SbbDatepickerComponentType, {
     onDateselected: EventName<SbbDateSelectedEvent<any>>;
     onChange: EventName<Event>;
     onInput: EventName<InputEvent>;
@@ -20,4 +20,3 @@ export declare const SbbDatepicker: import('../../core.js').ReactWebComponent<Sb
     onOpen: EventName<Event>;
 }>;
 export {};
-//# sourceMappingURL=datepicker.component.d.ts.map

package/development/datepicker/datepicker-next-day/datepicker-next-day.component.d.ts

@@ -1,4 +1,4 @@
-import { EventName } from '../../core.js';
+import { type EventName } from '../../core.js';
 import { SbbDatepickerNextDayElement } from '@sbb-esta/lyne-elements/datepicker.pure.js';
 declare class SbbDatepickerNextDayComponentType extends SbbDatepickerNextDayElement {
     set input(value: string | SbbDatepickerNextDayElement['input']);
@@ -6,10 +6,9 @@ declare class SbbDatepickerNextDayComponentType extends SbbDatepickerNextDayElem
     set form(value: string | SbbDatepickerNextDayElement['form']);
     get form(): string | SbbDatepickerNextDayElement['form'];
 }
-export declare const SbbDatepickerNextDay: import('../../core.js').ReactWebComponent<SbbDatepickerNextDayComponentType, {
+export declare const SbbDatepickerNextDay: import("../../core.js").ReactWebComponent<SbbDatepickerNextDayComponentType, {
     onChange: EventName<Event>;
     onInput: EventName<InputEvent>;
     onValidity: EventName<Event>;
 }>;
 export {};
-//# sourceMappingURL=datepicker-next-day.component.d.ts.map

package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.d.ts

@@ -1,4 +1,4 @@
-import { EventName } from '../../core.js';
+import { type EventName } from '../../core.js';
 import { SbbDatepickerPreviousDayElement } from '@sbb-esta/lyne-elements/datepicker.pure.js';
 declare class SbbDatepickerPreviousDayComponentType extends SbbDatepickerPreviousDayElement {
     set input(value: string | SbbDatepickerPreviousDayElement['input']);
@@ -6,10 +6,9 @@ declare class SbbDatepickerPreviousDayComponentType extends SbbDatepickerPreviou
     set form(value: string | SbbDatepickerPreviousDayElement['form']);
     get form(): string | SbbDatepickerPreviousDayElement['form'];
 }
-export declare const SbbDatepickerPreviousDay: import('../../core.js').ReactWebComponent<SbbDatepickerPreviousDayComponentType, {
+export declare const SbbDatepickerPreviousDay: import("../../core.js").ReactWebComponent<SbbDatepickerPreviousDayComponentType, {
     onChange: EventName<Event>;
     onInput: EventName<InputEvent>;
     onValidity: EventName<Event>;
 }>;
 export {};
-//# sourceMappingURL=datepicker-previous-day.component.d.ts.map

package/development/datepicker/datepicker-toggle/datepicker-toggle.component.d.ts

@@ -1,4 +1,4 @@
-import { EventName } from '../../core.js';
+import { type EventName } from '../../core.js';
 import { SbbDatepickerToggleElement } from '@sbb-esta/lyne-elements/datepicker.pure.js';
 declare class SbbDatepickerToggleComponentType extends SbbDatepickerToggleElement {
     set datepicker(value: string | SbbDatepickerToggleElement['datepicker']);
@@ -8,10 +8,9 @@ declare class SbbDatepickerToggleComponentType extends SbbDatepickerToggleElemen
     set form(value: string | SbbDatepickerToggleElement['form']);
     get form(): string | SbbDatepickerToggleElement['form'];
 }
-export declare const SbbDatepickerToggle: import('../../core.js').ReactWebComponent<SbbDatepickerToggleComponentType, {
+export declare const SbbDatepickerToggle: import("../../core.js").ReactWebComponent<SbbDatepickerToggleComponentType, {
     onChange: EventName<Event>;
     onInput: EventName<InputEvent>;
     onValidity: EventName<Event>;
 }>;
 export {};
-//# sourceMappingURL=datepicker-toggle.component.d.ts.map

package/development/datepicker.d.ts

@@ -3,4 +3,3 @@ export * from './datepicker/datepicker/datepicker.component.js';
 export * from './datepicker/datepicker-next-day/datepicker-next-day.component.js';
 export * from './datepicker/datepicker-previous-day/datepicker-previous-day.component.js';
 export * from './datepicker/datepicker-toggle/datepicker-toggle.component.js';
-//# sourceMappingURL=datepicker.d.ts.map

package/development/datepicker.js

@@ -1,5 +1,67 @@
-import { SbbDatepickerNextDay } from "./datepicker/datepicker-next-day/datepicker-next-day.component.js";
-import { SbbDatepickerPreviousDay } from "./datepicker/datepicker-previous-day/datepicker-previous-day.component.js";
-import { SbbDatepicker } from "./datepicker/datepicker/datepicker.component.js";
-import { SbbDatepickerToggle } from "./datepicker/datepicker-toggle/datepicker-toggle.component.js";
-export { SbbDatepicker, SbbDatepickerNextDay, SbbDatepickerPreviousDay, SbbDatepickerToggle };
+import { createComponent } from "./core.js";
+import { SbbDatepickerElement, SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement, SbbDatepickerToggleElement } from "@sbb-esta/lyne-elements/datepicker.pure.js";
+import "@sbb-esta/lyne-elements/calendar.pure.js";
+import "@sbb-esta/lyne-elements/popover.pure.js";
+import react from "react";
+
+//#region src/react/datepicker/datepicker/datepicker.component.ts
+const SbbDatepickerComponent = SbbDatepickerElement;
+const SbbDatepicker = createComponent({
+	tagName: "sbb-datepicker",
+	elementClass: SbbDatepickerComponent,
+	react,
+	events: {
+		"onDateselected": "dateselected",
+		"onChange": "change",
+		"onInput": "input",
+		"onBeforeclose": "beforeclose",
+		"onClose": "close",
+		"onBeforeopen": "beforeopen",
+		"onOpen": "open"
+	}
+});
+
+//#endregion
+//#region src/react/datepicker/datepicker-next-day/datepicker-next-day.component.ts
+const SbbDatepickerNextDayComponent = SbbDatepickerNextDayElement;
+const SbbDatepickerNextDay = createComponent({
+	tagName: "sbb-datepicker-next-day",
+	elementClass: SbbDatepickerNextDayComponent,
+	react,
+	events: {
+		"onChange": "change",
+		"onInput": "input",
+		"onValidity": "validity"
+	}
+});
+
+//#endregion
+//#region src/react/datepicker/datepicker-previous-day/datepicker-previous-day.component.ts
+const SbbDatepickerPreviousDayComponent = SbbDatepickerPreviousDayElement;
+const SbbDatepickerPreviousDay = createComponent({
+	tagName: "sbb-datepicker-previous-day",
+	elementClass: SbbDatepickerPreviousDayComponent,
+	react,
+	events: {
+		"onChange": "change",
+		"onInput": "input",
+		"onValidity": "validity"
+	}
+});
+
+//#endregion
+//#region src/react/datepicker/datepicker-toggle/datepicker-toggle.component.ts
+const SbbDatepickerToggleComponent = SbbDatepickerToggleElement;
+const SbbDatepickerToggle = createComponent({
+	tagName: "sbb-datepicker-toggle",
+	elementClass: SbbDatepickerToggleComponent,
+	react,
+	events: {
+		"onChange": "change",
+		"onInput": "input",
+		"onValidity": "validity"
+	}
+});
+
+//#endregion
+export { SbbDatepicker, SbbDatepickerNextDay, SbbDatepickerPreviousDay, SbbDatepickerToggle };

package/development/dialog/dialog/dialog.component.d.ts

@@ -1,14 +1,13 @@
-import { EventName } from '../../core.js';
-import { SbbDialogElement, SbbDialogCloseEvent } from '@sbb-esta/lyne-elements/dialog.pure.js';
+import { type EventName } from '../../core.js';
+import { SbbDialogElement, type SbbDialogCloseEvent } from '@sbb-esta/lyne-elements/dialog.pure.js';
 declare class SbbDialogComponentType extends SbbDialogElement {
     set trigger(value: string | SbbDialogElement['trigger']);
     get trigger(): string | SbbDialogElement['trigger'];
 }
-export declare const SbbDialog: import('../../core.js').ReactWebComponent<SbbDialogComponentType, {
+export declare const SbbDialog: import("../../core.js").ReactWebComponent<SbbDialogComponentType, {
     onBeforeclose: EventName<SbbDialogCloseEvent>;
     onClose: EventName<SbbDialogCloseEvent>;
     onBeforeopen: EventName<Event>;
     onOpen: EventName<Event>;
 }>;
 export {};
-//# sourceMappingURL=dialog.component.d.ts.map

package/development/dialog/dialog-actions/dialog-actions.component.d.ts

@@ -1,3 +1,2 @@
 import { SbbDialogActionsElement } from '@sbb-esta/lyne-elements/dialog.pure.js';
-export declare const SbbDialogActions: import('../../core.js').ReactWebComponent<SbbDialogActionsElement, {}>;
-//# sourceMappingURL=dialog-actions.component.d.ts.map
+export declare const SbbDialogActions: import("../../core.js").ReactWebComponent<SbbDialogActionsElement, {}>;

package/development/dialog/dialog-close-button/dialog-close-button.component.d.ts

@@ -1,4 +1,4 @@
-import { EventName } from '../../core.js';
+import { type EventName } from '../../core.js';
 import { SbbDialogCloseButtonElement } from '@sbb-esta/lyne-elements/dialog.pure.js';
 declare class SbbDialogCloseButtonComponentType extends SbbDialogCloseButtonElement {
     set size(value: string | SbbDialogCloseButtonElement['size']);
@@ -6,8 +6,7 @@ declare class SbbDialogCloseButtonComponentType extends SbbDialogCloseButtonElem
     set form(value: string | SbbDialogCloseButtonElement['form']);
     get form(): string | SbbDialogCloseButtonElement['form'];
 }
-export declare const SbbDialogCloseButton: import('../../core.js').ReactWebComponent<SbbDialogCloseButtonComponentType, {
+export declare const SbbDialogCloseButton: import("../../core.js").ReactWebComponent<SbbDialogCloseButtonComponentType, {
     onValidity: EventName<Event>;
 }>;
 export {};
-//# sourceMappingURL=dialog-close-button.component.d.ts.map

package/development/dialog/dialog-content/dialog-content.component.d.ts

@@ -1,3 +1,2 @@
 import { SbbDialogContentElement } from '@sbb-esta/lyne-elements/dialog.pure.js';
-export declare const SbbDialogContent: import('../../core.js').ReactWebComponent<SbbDialogContentElement, {}>;
-//# sourceMappingURL=dialog-content.component.d.ts.map
+export declare const SbbDialogContent: import("../../core.js").ReactWebComponent<SbbDialogContentElement, {}>;

package/development/dialog/dialog-title/dialog-title.component.d.ts

@@ -1,3 +1,2 @@
 import { SbbDialogTitleElement } from '@sbb-esta/lyne-elements/dialog.pure.js';
-export declare const SbbDialogTitle: import('../../core.js').ReactWebComponent<SbbDialogTitleElement, {}>;
-//# sourceMappingURL=dialog-title.component.d.ts.map
+export declare const SbbDialogTitle: import("../../core.js").ReactWebComponent<SbbDialogTitleElement, {}>;

package/development/dialog.d.ts

@@ -4,4 +4,3 @@ export * from './dialog/dialog-actions/dialog-actions.component.js';
 export * from './dialog/dialog-close-button/dialog-close-button.component.js';
 export * from './dialog/dialog-content/dialog-content.component.js';
 export * from './dialog/dialog-title/dialog-title.component.js';
-//# sourceMappingURL=dialog.d.ts.map

package/development/dialog.js

@@ -1,6 +1,54 @@
-import { SbbDialogActions } from "./dialog/dialog-actions/dialog-actions.component.js";
-import { SbbDialogCloseButton } from "./dialog/dialog-close-button/dialog-close-button.component.js";
-import { SbbDialog } from "./dialog/dialog/dialog.component.js";
-import { SbbDialogContent } from "./dialog/dialog-content/dialog-content.component.js";
-import { SbbDialogTitle } from "./dialog/dialog-title/dialog-title.component.js";
-export { SbbDialog, SbbDialogActions, SbbDialogCloseButton, SbbDialogContent, SbbDialogTitle };
+import { createComponent } from "./core.js";
+import { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement } from "@sbb-esta/lyne-elements/dialog.pure.js";
+import react from "react";
+
+//#region src/react/dialog/dialog/dialog.component.ts
+const SbbDialogComponent = SbbDialogElement;
+const SbbDialog = createComponent({
+	tagName: "sbb-dialog",
+	elementClass: SbbDialogComponent,
+	react,
+	events: {
+		"onBeforeclose": "beforeclose",
+		"onClose": "close",
+		"onBeforeopen": "beforeopen",
+		"onOpen": "open"
+	}
+});
+
+//#endregion
+//#region src/react/dialog/dialog-actions/dialog-actions.component.ts
+const SbbDialogActions = createComponent({
+	tagName: "sbb-dialog-actions",
+	elementClass: SbbDialogActionsElement,
+	react
+});
+
+//#endregion
+//#region src/react/dialog/dialog-close-button/dialog-close-button.component.ts
+const SbbDialogCloseButtonComponent = SbbDialogCloseButtonElement;
+const SbbDialogCloseButton = createComponent({
+	tagName: "sbb-dialog-close-button",
+	elementClass: SbbDialogCloseButtonComponent,
+	react,
+	events: { "onValidity": "validity" }
+});
+
+//#endregion
+//#region src/react/dialog/dialog-content/dialog-content.component.ts
+const SbbDialogContent = createComponent({
+	tagName: "sbb-dialog-content",
+	elementClass: SbbDialogContentElement,
+	react
+});
+
+//#endregion
+//#region src/react/dialog/dialog-title/dialog-title.component.ts
+const SbbDialogTitle = createComponent({
+	tagName: "sbb-dialog-title",
+	elementClass: SbbDialogTitleElement,
+	react
+});
+
+//#endregion
+export { SbbDialog, SbbDialogActions, SbbDialogCloseButton, SbbDialogContent, SbbDialogTitle };

package/development/divider/divider.component.d.ts

@@ -1,3 +1,2 @@
 import { SbbDividerElement } from '@sbb-esta/lyne-elements/divider.pure.js';
-export declare const SbbDivider: import('../core.js').ReactWebComponent<SbbDividerElement, {}>;
-//# sourceMappingURL=divider.component.d.ts.map
+export declare const SbbDivider: import("../core.js").ReactWebComponent<SbbDividerElement, {}>;

package/development/divider.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './divider/divider.component.js';
-//# sourceMappingURL=divider.d.ts.map

package/development/divider.js

@@ -1,2 +1,13 @@
-import { SbbDivider } from "./divider/divider.component.js";
-export { SbbDivider };
+import { createComponent } from "./core.js";
+import { SbbDividerElement } from "@sbb-esta/lyne-elements/divider.pure.js";
+import react from "react";
+
+//#region src/react/divider/divider.component.ts
+const SbbDivider = createComponent({
+	tagName: "sbb-divider",
+	elementClass: SbbDividerElement,
+	react
+});
+
+//#endregion
+export { SbbDivider };