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

package/dist/components/tag/tag.js

@@ -1,34 +1,93 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { DEFAULT_REMOVE } from "../../shared/constants";
-import { cls, getBooleanAsString } from "../../utils";
-import DBTooltip from "../tooltip/tooltip";
-function DBTagFn(props, component) {
-    var _a, _b, _c;
-    const _ref = component || useRef(component);
-    function handleRemove(event) {
-        if (!event)
-            return;
-        event.stopPropagation();
-        if (props.onRemove) {
-            props.onRemove(event);
-        }
-    }
-    function getRemoveButtonText() {
-        if (props.removeButton) {
-            return props.removeButton;
-        }
-        // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
-        return DEFAULT_REMOVE;
-    }
-    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", "onRemove"]), { 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-tag", props.className), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_c = props.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
-        React.createElement(React.Fragment, null, props.content),
-        props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.children,
-        props.behavior === "removable" ? (React.createElement("button", { className: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => handleRemove(event) },
-            React.createElement(DBTooltip, { variant: "label" }, getRemoveButtonText()))) : null));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
+import { DEFAULT_REMOVE as i } from "../../shared/constants.js";
+import a from "../tooltip/tooltip.js";
+import { forwardRef as o, useRef as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/tag/tag.tsx
+function d(o, d) {
+	let f = d || s(d);
+	function p(e) {
+		e && (e.stopPropagation(), o.onRemove && o.onRemove(e));
+	}
+	function m() {
+		return o.removeButton ? o.removeButton : i;
+	}
+	return /* @__PURE__ */ u("div", {
+		ref: f,
+		...e(o, [
+			"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",
+			"onRemove"
+		]),
+		id: o.id ?? o.propOverrides?.id,
+		...t(o, [
+			"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-tag", o.className),
+		"data-semantic": o.semantic,
+		"data-emphasis": o.emphasis,
+		"data-icon": o.icon,
+		"data-show-check-state": r(o.showCheckState ?? !0),
+		"data-show-icon": r(o.showIcon),
+		"data-no-text": r(o.noText),
+		"data-overflow": r(o.overflow),
+		children: [
+			/* @__PURE__ */ l(c, { children: o.content }),
+			o.text ? /* @__PURE__ */ l(c, { children: o.text }) : null,
+			o.children,
+			o.behavior === "removable" ? /* @__PURE__ */ l("button", {
+				className: "db-button db-tab-remove-button",
+				"data-icon": "cross",
+				"data-size": "small",
+				"data-no-text": "true",
+				"data-variant": "ghost",
+				type: "button",
+				onClick: (e) => p(e),
+				children: /* @__PURE__ */ l(a, {
+					variant: "label",
+					children: m()
+				})
+			}) : null
+		]
+	});
 }
-const DBTag = forwardRef(DBTagFn);
-export default DBTag;
+var f = o(d);
+//#endregion
+export { f as default };

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

@@ -1 +1 @@
-export { default as DBTextarea } from './textarea';
+export { default as DBTextarea } from './textarea.js';

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

@@ -1,4 +1,4 @@
-import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model.js';
 export declare const TextareaResizeList: readonly ["none", "both", "horizontal", "vertical"];
 export type TextareaResizeType = (typeof TextareaResizeList)[number];
 export declare const TextareaWrapList: readonly ["hard", "soft", "off"];

package/dist/components/textarea/model.js

@@ -1,2 +1,13 @@
-export const TextareaResizeList = ['none', 'both', 'horizontal', 'vertical'];
-export const TextareaWrapList = ['hard', 'soft', 'off'];
+//#region src/components/textarea/model.ts
+var e = [
+	"none",
+	"both",
+	"horizontal",
+	"vertical"
+], t = [
+	"hard",
+	"soft",
+	"off"
+];
+//#endregion
+export { e as TextareaResizeList, t as TextareaWrapList };

package/dist/components/textarea/textarea.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<any>>;
+declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "value" | keyof import("../../shared/model.js").CustomFormProps | keyof import("../../shared/model.js").BaseFormProps | keyof import("../../shared/model.js").RequiredProps | "showLabel" | keyof import("../../shared/model.js").FormMessageProps | keyof import("../../shared/model.js").FormTextProps | keyof import("./model.js").DBTextareaDefaultProps | keyof import("../../shared/model.js").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model.js").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model.js").FocusEventProps<HTMLTextAreaElement>> & import("./model.js").DBTextareaDefaultProps & import("../../shared/model.js").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model.js").InputEventProps<HTMLTextAreaElement> & import("../../shared/model.js").FocusEventProps<HTMLTextAreaElement> & 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").GlobalProps & import("../../shared/model.js").FormTextProps & import("../../shared/model.js").FormMessageProps & React.RefAttributes<any>>;
 export default DBTextarea;

package/dist/components/textarea/textarea.js

@@ -1,152 +1,167 @@
 "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, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, } from "../../utils";
-import { addValueResetEventListener, } from "../../utils/form-components";
-import DBInfotext from "../infotext/infotext";
-import { useId } from "react";
-function DBTextareaFn(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 [_descByIds, set_descByIds] = useState(() => undefined);
-    const [_value, set_value] = useState(() => "");
-    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 textarea */
-        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 || props.minLength || props.maxLength)) {
-            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 {
-            set_descByIds(undefined);
-        }
-    }
-    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 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 : `textarea-${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);
-    }
-    useEffect(() => {
-        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) {
-            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
-            set_messageId(messageId);
-            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-            if (stringPropVisible(props.message, props.showMessage)) {
-                set_descByIds(messageId);
-            }
-            handleValidation();
-        }
-    }, [_id]);
-    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-textarea", props.className), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-hide-label": getHideProp(props.showLabel) }),
-        React.createElement("label", { htmlFor: _id }, (_b = props.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL),
-        React.createElement("textarea", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, 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: _id, "data-resize": props.resize, "data-hide-resizer": getHideProp((_c = props.showResizer) !== null && _c !== void 0 ? _c : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
-                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_d = props.ariaDescribedBy) !== null && _d !== void 0 ? _d : _descByIds, placeholder: (_e = props.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
-        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, getHideProp as a, getNumber as o, hasVoiceOver as s, stringPropVisible as c } from "../../utils/index.js";
+import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as l, DEFAULT_MESSAGE_ID_SUFFIX as u, DEFAULT_VALID_MESSAGE_ID_SUFFIX as d } from "../../shared/constants.js";
+import { addValueResetEventListener as f } from "../../utils/form-components.js";
+import p from "../infotext/infotext.js";
+import { forwardRef as m, useEffect as h, useId as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/textarea/textarea.tsx
+function x(m, x) {
+	let S = g(), C = x || _(x), [w, T] = v(() => void 0), [E, D] = v(() => void 0), [O, k] = v(() => void 0), [A, j] = v(() => void 0), [M, N] = v(() => void 0), [P, F] = v(() => void 0), [I, L] = v(() => ""), [R, z] = v(() => ""), [B, V] = v(() => void 0);
+	function H() {
+		return !!(m.validMessage ?? m.validation === "valid");
+	}
+	function U() {
+		!C.current?.validity.valid || m.validation === "invalid" ? (F(A), N(m.invalidMessage || C.current?.validationMessage || "TODO: Add an invalidMessage"), s() && (z(M), r(() => z(""), 1e3))) : H() && C.current?.validity.valid && (m.required || m.minLength || m.maxLength) ? (F(O), s() && (z(m.validMessage ?? "TODO: Add a validMessage"), r(() => z(""), 1e3))) : c(m.message, m.showMessage) ? F(E) : F(void 0);
+	}
+	function W(e, t) {
+		m.onInput && m.onInput(e), U();
+	}
+	function G(e, t) {
+		m.onChange && m.onChange(e), U();
+	}
+	function K(e) {
+		m.onBlur && m.onBlur(e);
+	}
+	function q(e) {
+		m.onFocus && m.onFocus(e);
+	}
+	function J() {
+		let e = m.id ?? m.propOverrides?.id ?? `textarea-${S}`;
+		T(e), D(e + u), k(e + d), j(e + l);
+	}
+	return h(() => {
+		J(), N(m.invalidMessage || "TODO: Add an invalidMessage");
+	}, []), h(() => {
+		(m.id ?? m.propOverrides?.id) && J();
+	}, [m.id, m.propOverrides?.id]), h(() => {
+		N(m.invalidMessage || C.current?.validationMessage || "TODO: Add an invalidMessage");
+	}, [C.current, m.invalidMessage]), h(() => {
+		if (w) {
+			let e = w + u;
+			D(e), k(w + d), j(w + l), c(m.message, m.showMessage) && F(e), U();
+		}
+	}, [w]), h(() => {
+		L(m.value);
+	}, [m.value]), h(() => {
+		if (C.current) {
+			let e = m.defaultValue, t = B;
+			t || (t = new AbortController(), V(t)), f(C.current, {
+				value: m.value,
+				defaultValue: e
+			}, (e) => {
+				G(e, !0), W(e, !0);
+			}, t.signal);
+		}
+	}, [C.current]), h(() => () => {
+		B?.abort();
+	}, []), /* @__PURE__ */ b("div", {
+		...t(m, [
+			"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-textarea", m.className),
+		"data-variant": m.variant,
+		"data-hide-asterisk": a(m.showRequiredAsterisk),
+		"data-hide-label": a(m.showLabel),
+		children: [
+			/* @__PURE__ */ y("label", {
+				htmlFor: w,
+				children: m.label ?? "LABEL SHOULD BE SET"
+			}),
+			/* @__PURE__ */ y("textarea", {
+				"aria-invalid": m.validation === "invalid",
+				"data-custom-validity": m.validation,
+				"data-field-sizing": m.fieldSizing,
+				ref: C,
+				...e(m, [
+					"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: w,
+				"data-resize": m.resize,
+				"data-hide-resizer": a(m.showResizer ?? !0),
+				disabled: i(m.disabled, "disabled"),
+				required: i(m.required, "required"),
+				readOnly: i(m.readOnly, "readOnly") || i(m.readonly, "readonly"),
+				form: m.form,
+				maxLength: o(m.maxLength, m.maxlength),
+				minLength: o(m.minLength, m.minlength),
+				name: m.name,
+				wrap: m.wrap,
+				spellCheck: m.spellCheck,
+				autoComplete: m.autocomplete,
+				onInput: (e) => W(e),
+				onChange: (e) => G(e),
+				onBlur: (e) => K(e),
+				onFocus: (e) => q(e),
+				value: m.value,
+				"aria-describedby": m.ariaDescribedBy ?? P,
+				placeholder: m.placeholder ?? " ",
+				rows: o(m.rows, 4),
+				cols: o(m.cols)
+			}),
+			c(m.message, m.showMessage) ? /* @__PURE__ */ y(p, {
+				size: "small",
+				icon: m.messageIcon,
+				id: E,
+				children: m.message
+			}) : null,
+			H() ? /* @__PURE__ */ y(p, {
+				size: "small",
+				semantic: "successful",
+				id: O,
+				children: m.validMessage || "TODO: Add a validMessage"
+			}) : null,
+			/* @__PURE__ */ y(p, {
+				size: "small",
+				semantic: "critical",
+				id: A,
+				children: M
+			}),
+			/* @__PURE__ */ y("span", {
+				"data-visually-hidden": "true",
+				role: "status",
+				children: R
+			})
+		]
+	});
 }
-const DBTextarea = forwardRef(DBTextareaFn);
-export default DBTextarea;
+var S = m(x);
+//#endregion
+export { S as default };

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

@@ -1 +1 @@
-export { default as DBTooltip } from './tooltip';
+export { default as DBTooltip } from './tooltip.js';

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

@@ -1,4 +1,4 @@
-import type { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, TextProps, WrapProps } from '../../shared/model';
+import type { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, TextProps, WrapProps } from '../../shared/model.js';
 export declare const TooltipVariantList: readonly ["description", "label"];
 export type TooltipVariantType = (typeof TooltipVariantList)[number];
 export type DBTooltipDefaultProps = {

package/dist/components/tooltip/model.js

@@ -1 +1,4 @@
-export const TooltipVariantList = ['description', 'label'];
+//#region src/components/tooltip/model.ts
+var e = ["description", "label"];
+//#endregion
+export { e as TooltipVariantList };

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "text" | "placement" | "emphasis" | "wrap" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & import("../../shared/model").WrapProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "text" | "placement" | "emphasis" | "wrap" | keyof import("./model.js").DBTooltipDefaultProps | keyof import("../../shared/model.js").PopoverProps> & import("./model.js").DBTooltipDefaultProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").EmphasisProps & import("../../shared/model.js").PlacementProps & import("../../shared/model.js").PopoverProps & import("../../shared/model.js").WrapProps & import("../../shared/model.js").TextProps & React.RefAttributes<any>>;
 export default DBTooltip;