@db-ux/react-core-components 4.9.1 → 4.10.0-esm-f121fc3

package/dist/components/select/select.js

@@ -1,193 +1,190 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, } from "../../utils";
-import { addValueResetEventListener, } from "../../utils/form-components";
-import DBInfotext from "../infotext/infotext";
-import { useId } from "react";
-function DBSelectFn(props, component) {
-    var _a, _b, _c, _d, _e;
-    const uuid = useId();
-    const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => undefined);
-    const [_messageId, set_messageId] = useState(() => undefined);
-    const [_validMessageId, set_validMessageId] = useState(() => undefined);
-    const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
-    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_placeholderId, set_placeholderId] = useState(() => "");
-    const [_descByIds, set_descByIds] = useState(() => undefined);
-    const [_value, set_value] = useState(() => "");
-    const [initialized, setInitialized] = useState(() => false);
-    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
-    const [abortController, setAbortController] = useState(() => undefined);
-    function hasValidState() {
-        var _a;
-        return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
-    }
-    function handleValidation() {
-        var _a, _b, _c, _d;
-        /* For a11y reasons we need to map the correct message with the select */
-        if (!((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
-            set_descByIds(_invalidMessageId);
-            set_invalidMessage(props.invalidMessage ||
-                ((_b = _ref.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
-                DEFAULT_INVALID_MESSAGE);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback(_invalidMessage);
-                delay(() => set_voiceOverFallback(""), 1000);
-            }
-        }
-        else if (hasValidState() &&
-            ((_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validity.valid) &&
-            props.required) {
-            set_descByIds(_validMessageId);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback((_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE);
-                delay(() => set_voiceOverFallback(""), 1000);
-            }
-        }
-        else if (stringPropVisible(props.message, props.showMessage)) {
-            set_descByIds(_messageId);
-        }
-        else if (props.placeholder) {
-            set_descByIds(_placeholderId);
-        }
-        else {
-            set_descByIds(undefined);
-        }
-    }
-    function handleClick(event) {
-        if (props.onClick) {
-            props.onClick(event);
-        }
-    }
-    function handleInput(event, reset) {
-        if (props.onInput) {
-            props.onInput(event);
-        }
-        handleValidation();
-    }
-    function handleChange(event, reset) {
-        if (props.onChange) {
-            props.onChange(event);
-        }
-        handleValidation();
-    }
-    function handleBlur(event) {
-        if (props.onBlur) {
-            props.onBlur(event);
-        }
-    }
-    function handleFocus(event) {
-        if (props.onFocus) {
-            props.onFocus(event);
-        }
-    }
-    function getOptionLabel(option) {
-        var _a, _b;
-        return (_a = option.label) !== null && _a !== void 0 ? _a : (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString();
-    }
-    function shouldShowEmptyOption() {
-        const hasPlaceholderOrFloating = props.variant === "floating" || !!props.placeholder;
-        if (!hasPlaceholderOrFloating) {
-            return false;
-        }
-        if (props.showEmptyOption !== undefined) {
-            return props.showEmptyOption;
-        }
-        // Default: show empty option for non-required selects
-        return !props.required;
-    }
-    function resetIds() {
-        var _a, _b, _c;
-        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `select-${uuid}`;
-        set_id(mId);
-        set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-        set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-        set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-        set_placeholderId(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
-    }
-    useEffect(() => {
-        setInitialized(true);
-        resetIds();
-        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
-    }, []);
-    useEffect(() => {
-        var _a, _b;
-        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
-            resetIds();
-        }
-    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
-    useEffect(() => {
-        var _a;
-        set_invalidMessage(props.invalidMessage ||
-            ((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
-            DEFAULT_INVALID_MESSAGE);
-    }, [_ref.current, props.invalidMessage]);
-    useEffect(() => {
-        if (_id && initialized) {
-            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
-            const placeholderId = _id + DEFAULT_PLACEHOLDER_ID_SUFFIX;
-            set_messageId(messageId);
-            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-            set_placeholderId(placeholderId);
-            if (stringPropVisible(props.message, props.showMessage)) {
-                set_descByIds(messageId);
-            }
-            else if (props.placeholder) {
-                set_descByIds(placeholderId);
-            }
-            else {
-                set_descByIds(undefined);
-            }
-            handleValidation();
-            setInitialized(false);
-        }
-    }, [_id, initialized]);
-    useEffect(() => {
-        set_value(props.value);
-    }, [props.value]);
-    useEffect(() => {
-        // If angular uses ngModel value and _value are null
-        // then the value will be set afterward and the _ref will be refreshed
-        const addResetListener = true;
-        if (_ref.current && addResetListener) {
-            const defaultValue = props.defaultValue;
-            let controller = abortController;
-            if (!controller) {
-                controller = new AbortController();
-                setAbortController(controller);
-            }
-            addValueResetEventListener(_ref.current, {
-                value: props.value,
-                defaultValue,
-            }, (event) => {
-                handleChange(event, true);
-                handleInput(event, true);
-            }, controller.signal);
-        }
-    }, [_ref.current]);
-    useEffect(() => {
-        return () => {
-            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
-    }, []);
-    return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon) }),
-        React.createElement("label", { htmlFor: _id }, (_b = props.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL),
-        React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds }),
-            props.variant === "floating" || !!props.placeholder ? (React.createElement("option", { className: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(shouldShowEmptyOption()) })) : null,
-            ((_d = props.options) === null || _d === void 0 ? void 0 : _d.length) ? (React.createElement(React.Fragment, null, (_e = props.options) === null || _e === void 0 ? void 0 : _e.map((option) => {
-                var _a;
-                return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option), key: getOptionKey(option, "select-optgroup-") }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, key: getOptionKey(optgroupOption, "select-optgroup-option-") }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled, key: getOptionKey(option, "select-option-") }, getOptionLabel(option)));
-            }))) : (React.createElement(React.Fragment, null, props.children))),
-        props.placeholder ? (React.createElement("span", { className: "db-select-placeholder", id: _placeholderId }, props.placeholder)) : null,
-        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
-        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
-        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, delay as r, getBoolean as i, getBooleanAsString as a, getHideProp as o, getOptionKey as s, hasVoiceOver as c, stringPropVisible as l } from "../../utils/index.js";
+import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as u, DEFAULT_MESSAGE_ID_SUFFIX as d, DEFAULT_PLACEHOLDER_ID_SUFFIX as f, DEFAULT_VALID_MESSAGE_ID_SUFFIX as p } from "../../shared/constants.js";
+import { addValueResetEventListener as m } from "../../utils/form-components.js";
+import h from "../infotext/infotext.js";
+import { forwardRef as g, useEffect as _, useId as ee, useRef as v, useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/select/select.tsx
+function C(g, C) {
+	let w = ee(), T = C || v(C), [E, D] = y(() => void 0), [O, k] = y(() => void 0), [A, j] = y(() => void 0), [M, N] = y(() => void 0), [P, F] = y(() => void 0), [I, L] = y(() => ""), [R, z] = y(() => void 0), [te, B] = y(() => ""), [V, H] = y(() => !1), [ne, U] = y(() => ""), [W, G] = y(() => void 0);
+	function K() {
+		return !!(g.validMessage ?? g.validation === "valid");
+	}
+	function q() {
+		!T.current?.validity.valid || g.validation === "invalid" ? (z(M), F(g.invalidMessage || T.current?.validationMessage || "TODO: Add an invalidMessage"), c() && (U(P), r(() => U(""), 1e3))) : K() && T.current?.validity.valid && g.required ? (z(A), c() && (U(g.validMessage ?? "TODO: Add a validMessage"), r(() => U(""), 1e3))) : l(g.message, g.showMessage) ? z(O) : g.placeholder ? z(I) : z(void 0);
+	}
+	function J(e) {
+		g.onClick && g.onClick(e);
+	}
+	function Y(e, t) {
+		g.onInput && g.onInput(e), q();
+	}
+	function X(e, t) {
+		g.onChange && g.onChange(e), q();
+	}
+	function Z(e) {
+		g.onBlur && g.onBlur(e);
+	}
+	function re(e) {
+		g.onFocus && g.onFocus(e);
+	}
+	function Q(e) {
+		return e.label ?? e.value?.toString();
+	}
+	function ie() {
+		return g.variant === "floating" || g.placeholder ? g.showEmptyOption === void 0 ? !g.required : g.showEmptyOption : !1;
+	}
+	function $() {
+		let e = g.id ?? g.propOverrides?.id ?? `select-${w}`;
+		D(e), k(e + d), j(e + p), N(e + u), L(e + f);
+	}
+	return _(() => {
+		H(!0), $(), F(g.invalidMessage || "TODO: Add an invalidMessage");
+	}, []), _(() => {
+		(g.id ?? g.propOverrides?.id) && $();
+	}, [g.id, g.propOverrides?.id]), _(() => {
+		F(g.invalidMessage || T.current?.validationMessage || "TODO: Add an invalidMessage");
+	}, [T.current, g.invalidMessage]), _(() => {
+		if (E && V) {
+			let e = E + d, t = E + f;
+			k(e), j(E + p), N(E + u), L(t), l(g.message, g.showMessage) ? z(e) : g.placeholder ? z(t) : z(void 0), q(), H(!1);
+		}
+	}, [E, V]), _(() => {
+		B(g.value);
+	}, [g.value]), _(() => {
+		if (T.current) {
+			let e = g.defaultValue, t = W;
+			t || (t = new AbortController(), G(t)), m(T.current, {
+				value: g.value,
+				defaultValue: e
+			}, (e) => {
+				X(e, !0), Y(e, !0);
+			}, t.signal);
+		}
+	}, [T.current]), _(() => () => {
+		W?.abort();
+	}, []), /* @__PURE__ */ S("div", {
+		...t(g, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-select", g.className),
+		"data-variant": g.variant,
+		"data-hide-label": o(g.showLabel),
+		"data-hide-asterisk": o(g.showRequiredAsterisk),
+		"data-icon": g.icon,
+		"data-show-icon": a(g.showIcon),
+		children: [
+			/* @__PURE__ */ x("label", {
+				htmlFor: E,
+				children: g.label ?? "LABEL SHOULD BE SET"
+			}),
+			/* @__PURE__ */ S("select", {
+				"aria-invalid": g.validation === "invalid",
+				"data-custom-validity": g.validation,
+				ref: T,
+				...e(g, [
+					"data-icon-variant",
+					"data-icon-variant-before",
+					"data-icon-variant-after",
+					"data-icon-weight",
+					"data-icon-weight-before",
+					"data-icon-weight-after",
+					"data-interactive",
+					"data-force-mobile",
+					"data-color",
+					"data-container-color",
+					"data-bg-color",
+					"data-on-bg-color",
+					"data-color-scheme",
+					"data-font-size",
+					"data-headline-size",
+					"data-divider",
+					"data-focus",
+					"data-font",
+					"data-density"
+				]),
+				required: i(g.required, "required"),
+				disabled: i(g.disabled, "disabled"),
+				id: E,
+				name: g.name,
+				size: g.size,
+				value: g.value,
+				autoComplete: g.autocomplete,
+				multiple: g.multiple,
+				onInput: (e) => Y(e),
+				onClick: (e) => J(e),
+				onChange: (e) => X(e),
+				onBlur: (e) => Z(e),
+				onFocus: (e) => re(e),
+				"aria-describedby": g.ariaDescribedBy ?? R,
+				children: [g.variant === "floating" || g.placeholder ? /* @__PURE__ */ x("option", {
+					className: "placeholder",
+					value: "",
+					"data-show-empty-option": a(ie())
+				}) : null, g.options?.length ? /* @__PURE__ */ x(b, { children: g.options?.map((e) => e.options ? /* @__PURE__ */ x("optgroup", {
+					label: Q(e),
+					children: e.options?.map((e) => /* @__PURE__ */ x("option", {
+						value: e.value,
+						disabled: e.disabled,
+						children: Q(e)
+					}, s(e, "select-optgroup-option-")))
+				}, s(e, "select-optgroup-")) : /* @__PURE__ */ x("option", {
+					value: e.value,
+					disabled: e.disabled,
+					children: Q(e)
+				}, s(e, "select-option-"))) }) : /* @__PURE__ */ x(b, { children: g.children })]
+			}),
+			g.placeholder ? /* @__PURE__ */ x("span", {
+				className: "db-select-placeholder",
+				id: I,
+				children: g.placeholder
+			}) : null,
+			l(g.message, g.showMessage) ? /* @__PURE__ */ x(h, {
+				size: "small",
+				icon: g.messageIcon,
+				id: O,
+				children: g.message
+			}) : null,
+			K() ? /* @__PURE__ */ x(h, {
+				size: "small",
+				semantic: "successful",
+				id: A,
+				children: g.validMessage || "TODO: Add a validMessage"
+			}) : null,
+			/* @__PURE__ */ x(h, {
+				size: "small",
+				semantic: "critical",
+				id: M,
+				children: P
+			}),
+			/* @__PURE__ */ x("span", {
+				"data-visually-hidden": "true",
+				role: "status",
+				children: ne
+			})
+		]
+	});
 }
-const DBSelect = forwardRef(DBSelectFn);
-export default DBSelect;
+var w = g(C);
+//#endregion
+export { w as default };

package/dist/components/stack/index.d.ts

@@ -1 +1 @@
-export { default as DBStack } from './stack';
+export { default as DBStack } from './stack.js';

package/dist/components/stack/model.d.ts

@@ -1,4 +1,4 @@
-import type { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
+import type { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model.js';
 export declare const StackVariantList: readonly ["simple", "divider"];
 export type StackVariantType = (typeof StackVariantList)[number];
 export declare const StackDirectionList: readonly ["row", "column"];

package/dist/components/stack/model.js

@@ -1,4 +1,14 @@
-export const StackVariantList = ['simple', 'divider'];
-export const StackDirectionList = ['row', 'column'];
-export const StackAlignmentList = ['stretch', 'start', 'end', 'center'];
-export const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
+//#region src/components/stack/model.ts
+var e = ["simple", "divider"], t = ["row", "column"], n = [
+	"stretch",
+	"start",
+	"end",
+	"center"
+], r = [
+	"space-between",
+	"start",
+	"end",
+	"center"
+];
+//#endregion
+export { n as StackAlignmentList, t as StackDirectionList, r as StackJustifyContentList, e as StackVariantList };

package/dist/components/stack/stack.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBStack: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "gap" | keyof import("./model").DBStackDefaultProps> & import("./model").DBStackDefaultProps & import("../..").GlobalProps & import("../..").GapSpacingProps & React.RefAttributes<any>>;
+declare const DBStack: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "gap" | keyof import("./model.js").DBStackDefaultProps> & import("./model.js").DBStackDefaultProps & import("../../index.js").GlobalProps & import("../../index.js").GapSpacingProps & React.RefAttributes<any>>;
 export default DBStack;

package/dist/components/stack/stack.js

@@ -1,12 +1,65 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString } from "../../utils";
-function DBStackFn(props, component) {
-    var _a, _b;
-    const _ref = component || useRef(component);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-stack", props.className), "data-gap": props.gap, "data-variant": props.variant, "data-direction": props.direction, "data-alignment": props.alignment, "data-justify-content": props.justifyContent, "data-wrap": getBooleanAsString(props.wrap) }), props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
+import { forwardRef as i, useRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/stack/stack.tsx
+function s(i, s) {
+	return /* @__PURE__ */ o("div", {
+		ref: s || a(s),
+		...e(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		id: i.id ?? i.propOverrides?.id,
+		...t(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-stack", i.className),
+		"data-gap": i.gap,
+		"data-variant": i.variant,
+		"data-direction": i.direction,
+		"data-alignment": i.alignment,
+		"data-justify-content": i.justifyContent,
+		"data-wrap": r(i.wrap),
+		children: i.children
+	});
 }
-const DBStack = forwardRef(DBStackFn);
-export default DBStack;
+var c = i(s);
+//#endregion
+export { c as default };

package/dist/components/switch/index.d.ts

@@ -1 +1 @@
-export { default as DBSwitch } from './switch';
+export { default as DBSwitch } from './switch.js';

package/dist/components/switch/model.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GeneralKeyboardEvent, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GeneralKeyboardEvent, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model.js';
 export type DBSwitchDefaultProps = {
     /**
      * Add additional icons to indicate active/inactive state.

package/dist/components/switch/switch.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | "icon" | "iconLeading" | "iconTrailing" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | "checked" | "placeholder" | "message" | "validMessage" | "invalidMessage" | "messageIcon" | "autocomplete" | "showMessage" | keyof import("./model").DBSwitchDefaultProps> & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & Omit<import("../../shared/model").FormMessageProps, "variant"> & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconTrailingProps & import("../../shared/model").IconLeadingProps & import("./model").DBSwitchDefaultProps & React.RefAttributes<any>>;
+declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "value" | "size" | "icon" | "iconLeading" | "iconTrailing" | keyof import("../../shared/model.js").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model.js").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model.js").CustomFormProps | keyof import("../../shared/model.js").BaseFormProps | keyof import("../../shared/model.js").RequiredProps | "showLabel" | "checked" | "placeholder" | "message" | "validMessage" | "invalidMessage" | "messageIcon" | "autocomplete" | "showMessage" | keyof import("./model").DBSwitchDefaultProps> & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").ChangeEventProps<HTMLInputElement> & import("../../shared/model.js").FocusEventProps<HTMLInputElement> & import("../../shared/model.js").CustomFormProps & import("../../shared/model.js").BaseFormProps & import("../../shared/model.js").RequiredProps & import("../../shared/model.js").ShowLabelProps & import("../../shared/model.js").ValueProps & import("../../shared/model.js").FormCheckProps & Omit<import("../../shared/model.js").FormMessageProps, "variant"> & import("../../shared/model.js").SizeProps & import("../../shared/model.js").IconProps & import("../../shared/model.js").IconTrailingProps & import("../../shared/model.js").IconLeadingProps & import("./model").DBSwitchDefaultProps & React.RefAttributes<any>>;
 export default DBSwitch;