@db-ux/react-core-components 4.9.0 → 4.10.0

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.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/model.d.ts

@@ -1,4 +1,4 @@
-import { 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';
 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.js

@@ -1,117 +1,121 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_ID } from "../../shared/constants";
-import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils";
-import { DocumentScrollListener } from "../../utils/document-scroll-listener";
-import { handleFixedPopover } from "../../utils/floating-components";
-import { useId } from "react";
-function DBTooltipFn(props, component) {
-    var _a, _b, _c;
-    const uuid = useId();
-    const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => DEFAULT_ID);
-    const [initialized, setInitialized] = useState(() => false);
-    const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
-    const [_observer, set_observer] = useState(() => undefined);
-    function handleClick(event) {
-        event.stopPropagation();
-    }
-    function handleEscape(event) {
-        if ((!event || event.key === "Escape") &&
-            _ref.current &&
-            getComputedStyle(_ref.current).visibility === "visible") {
-            getParent().blur();
-        }
-    }
-    function getParent() {
-        let parent = _ref.current.parentElement;
-        if (parent && parent.localName.includes("tooltip")) {
-            // Angular workaround
-            parent = parent.parentElement;
-        }
-        return parent;
-    }
-    function handleAutoPlacement(parent) {
-        if (!parent)
-            return;
-        if (_ref.current) {
-            // This is a workaround for angular
-            void utilsDelay(() => {
-                var _a;
-                // Due to race conditions we need to check for _ref again
-                if (_ref.current) {
-                    handleFixedPopover(_ref.current, parent, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
-                }
-            }, 1);
-        }
-    }
-    function handleDocumentScroll(event, parent) {
-        var _a, _b;
-        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains) && ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.contains(_ref.current))) {
-            handleAutoPlacement(parent);
-        }
-    }
-    function handleLeave() {
-        if (_documentScrollListenerCallbackId) {
-            new DocumentScrollListener().removeCallback(_documentScrollListenerCallbackId);
-        }
-        _observer === null || _observer === void 0 ? void 0 : _observer.unobserve(getParent());
-    }
-    function handleEnter(parent) {
-        set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event, parent)));
-        handleAutoPlacement(parent);
-        _observer === null || _observer === void 0 ? void 0 : _observer.observe(getParent());
-    }
-    function resetIds() {
-        var _a, _b, _c;
-        set_id((_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 : "tooltip-" + uuid);
-    }
-    useEffect(() => {
-        resetIds();
-        setInitialized(true);
-    }, []);
-    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(() => {
-        if (_ref.current && initialized && _id) {
-            const parent = getParent();
-            if (parent) {
-                handleAutoPlacement(parent);
-                ["mouseenter", "focusin"].forEach((event) => {
-                    parent.addEventListener(event, () => handleEnter(parent));
-                });
-                parent.addEventListener("keydown", (event) => handleEscape(event));
-                ["mouseleave", "focusout"].forEach((event) => {
-                    parent.addEventListener(event, () => handleLeave());
-                });
-                parent.dataset["hasTooltip"] = "true";
-                if (props.variant === "label") {
-                    parent.setAttribute("aria-labelledby", _id);
-                }
-                else {
-                    parent.setAttribute("aria-describedby", _id);
-                }
-            }
-            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
-                set_observer(new IntersectionObserver((payload) => {
-                    const entry = payload.find(({ target }) => target === getParent());
-                    if (entry && !entry.isIntersecting) {
-                        handleEscape(false);
-                    }
-                }));
-            }
-            setInitialized(false);
-        }
-    }, [_ref.current, initialized, _id]);
-    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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"]), 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-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-wrap": getBooleanAsString(props.wrap), "data-animation": getBooleanAsString((_b = props.animation) !== null && _b !== void 0 ? _b : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_c = props.showArrow) !== null && _c !== void 0 ? _c : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }),
-        props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, delay as r, getBooleanAsString as i } from "../../utils/index.js";
+import { DEFAULT_ID as a } from "../../shared/constants.js";
+import { DocumentScrollListener as o } from "../../utils/document-scroll-listener.js";
+import { handleFixedPopover as s } from "../../utils/floating-components.js";
+import { forwardRef as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/tooltip/tooltip.tsx
+function g(c, g) {
+	let _ = u(), v = g || d(g), [y, b] = f(() => a), [x, S] = f(() => !1), [C, w] = f(() => void 0), [T, E] = f(() => void 0);
+	function D(e) {
+		e.stopPropagation();
+	}
+	function O(e) {
+		(!e || e.key === "Escape") && v.current && getComputedStyle(v.current).visibility === "visible" && k().blur();
+	}
+	function k() {
+		let e = v.current.parentElement;
+		return e && e.localName.includes("tooltip") && (e = e.parentElement), e;
+	}
+	function A(e) {
+		e && v.current && r(() => {
+			v.current && s(v.current, e, c.placement ?? "bottom");
+		}, 1);
+	}
+	function j(e, t) {
+		e?.target?.contains && e?.target?.contains(v.current) && A(t);
+	}
+	function M() {
+		C && new o().removeCallback(C), T?.unobserve(k());
+	}
+	function N(e) {
+		w(new o().addCallback((t) => j(t, e))), A(e), T?.observe(k());
+	}
+	function P() {
+		b(c.id ?? c.propOverrides?.id ?? "tooltip-" + _);
+	}
+	return l(() => {
+		P(), S(!0);
+	}, []), l(() => {
+		(c.id ?? c.propOverrides?.id) && P();
+	}, [c.id, c.propOverrides?.id]), l(() => {
+		if (v.current && x && y) {
+			let e = k();
+			e && (A(e), ["mouseenter", "focusin"].forEach((t) => {
+				e.addEventListener(t, () => N(e));
+			}), e.addEventListener("keydown", (e) => O(e)), ["mouseleave", "focusout"].forEach((t) => {
+				e.addEventListener(t, () => M());
+			}), e.dataset.hasTooltip = "true", c.variant === "label" ? e.setAttribute("aria-labelledby", y) : e.setAttribute("aria-describedby", y)), typeof window < "u" && "IntersectionObserver" in window && E(new IntersectionObserver((e) => {
+				let t = e.find(({ target: e }) => e === k());
+				t && !t.isIntersecting && O(!1);
+			})), S(!1);
+		}
+	}, [
+		v.current,
+		x,
+		y
+	]), /* @__PURE__ */ h("i", {
+		role: "tooltip",
+		"aria-hidden": "true",
+		"data-gap": "true",
+		ref: v,
+		...e(c, [
+			"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"
+		]),
+		...t(c, [
+			"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-tooltip", c.className),
+		id: y,
+		"data-emphasis": c.emphasis,
+		"data-wrap": i(c.wrap),
+		"data-animation": i(c.animation ?? !0),
+		"data-delay": c.delay,
+		"data-width": c.width,
+		"data-show-arrow": i(c.showArrow ?? !0),
+		"data-placement": c.placement,
+		onClick: (e) => D(e),
+		children: [c.text ? /* @__PURE__ */ m(p, { children: c.text }) : null, c.children]
+	});
 }
-const DBTooltip = forwardRef(DBTooltipFn);
-export default DBTooltip;
+var _ = c(g);
+//#endregion
+export { _ as default };