@db-ux/react-core-components 4.11.1 → 4.12.1

package/dist/components/link/model.js

@@ -1,8 +1,3 @@
-//#region src/components/link/model.ts
-var e = [
-	"adaptive",
-	"brand",
-	"inline"
-], t = ["medium", "small"], n = ["external", "internal"];
-//#endregion
-export { n as LinkContentList, t as LinkSizeList, e as LinkVariantList };
+export const LinkVariantList = ['adaptive', 'brand', 'inline'];
+export const LinkSizeList = ['medium', 'small'];
+export const LinkContentList = ['external', 'internal'];

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

@@ -1 +1 @@
-export { default as DBNavigation } from './navigation';
+export { default as DBNavigation } from './navigation.js';

package/dist/components/navigation/index.js

@@ -0,0 +1 @@
+export { default as DBNavigation } from './navigation.js';

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

@@ -1,4 +1,4 @@
-import type { GlobalProps } from '../../shared/model';
+import type { GlobalProps } from '../../shared/model.js';
 export type DBNavigationDefaultProps = {};
 export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
 export type DBNavigationDefaultState = {};

package/dist/components/navigation/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation/navigation.d.ts

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

package/dist/components/navigation/navigation.js

@@ -1,59 +1,11 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n } from "../../utils/index.js";
-import { forwardRef as r, useRef as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
-//#region src/components/navigation/navigation.tsx
-function o(r, o) {
-	return /* @__PURE__ */ a("nav", {
-		ref: o || i(o),
-		...e(r, [
-			"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: r.id ?? r.propOverrides?.id,
-		...t(r, [
-			"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-navigation", r.className),
-		children: /* @__PURE__ */ a("menu", { children: r.children })
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils/index.js";
+function DBNavigationFn(props, component) {
+    const _ref = component || useRef(component);
+    return (_jsx("nav", { 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: props.id ?? props.propOverrides?.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-navigation", props.className), children: _jsx("menu", { children: props.children }) }));
 }
-var s = r(o);
-//#endregion
-export { s as default };
+const DBNavigation = forwardRef(DBNavigationFn);
+export default DBNavigation;

package/dist/components/navigation-item/index.d.ts

@@ -1 +1 @@
-export { default as DBNavigationItem } from './navigation-item';
+export { default as DBNavigationItem } from './navigation-item.js';

package/dist/components/navigation-item/index.js

@@ -0,0 +1 @@
+export { default as DBNavigationItem } from './navigation-item.js';

package/dist/components/navigation-item/model.d.ts

@@ -1,5 +1,5 @@
-import type { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
-import type { NavigationItemSafeTriangle } from '../../utils/navigation';
+import type { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps, WrapProps } from '../../shared/model.js';
+import type { NavigationItemSafeTriangle } from '../../utils/navigation.js';
 export type DBNavigationItemDefaultProps = {
     /**
      * Alternative indicator for active navigation item (bold font). In contrast to the use of aria-current="page" on the contained anchor, this does not guarantee correct a11y.

package/dist/components/navigation-item/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation-item/navigation-item.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBNavigationItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "text" | "wrap" | "icon" | "showIcon" | keyof import("../../shared/model").ClickEventProps<HTMLButtonElement> | "width" | keyof import("./model").DBNavigationItemDefaultProps | keyof import("../../shared/model").NavigationBackButtonProps> & import("./model").DBNavigationItemDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").WrapProps & import("../../shared/model").NavigationBackButtonProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBNavigationItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "text" | "wrap" | "icon" | "showIcon" | keyof import("../../shared/model.js").ClickEventProps<HTMLButtonElement> | "width" | keyof import("./model.js").DBNavigationItemDefaultProps | keyof import("../../shared/model.js").NavigationBackButtonProps> & import("./model.js").DBNavigationItemDefaultProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").ClickEventProps<HTMLButtonElement> & import("../../shared/model.js").IconProps & import("../../shared/model.js").WidthProps & import("../../shared/model.js").WrapProps & import("../../shared/model.js").NavigationBackButtonProps & import("../../shared/model.js").ShowIconProps & import("../../shared/model.js").TextProps & React.RefAttributes<any>>;
 export default DBNavigationItem;

package/dist/components/navigation-item/navigation-item.js

@@ -1,119 +1,73 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, delay as r, getBoolean as i, getBooleanAsString as a } from "../../utils/index.js";
-import "../../shared/constants.js";
-import o from "../button/button.js";
-import { NavigationItemSafeTriangle as s } from "../../utils/navigation.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/navigation-item/navigation-item.tsx
-function g(c, g) {
-	let _ = u(), v = g || d(g), [y, b] = f(() => !1), [x, S] = f(() => !1), [C, w] = f(() => !0), [T, E] = f(() => !1), [D, O] = f(() => !1), [k, A] = f(() => void 0), [j, M] = f(() => void 0), [N, P] = f(() => void 0);
-	function F(e) {
-		e?.target?.nodeName === "A" && (O(!0), r(() => {
-			O(!1);
-		}, 1e3));
-	}
-	function I(e) {
-		c.onClick && (e.stopPropagation(), c.onClick(e)), x && E(!0);
-	}
-	function L(e) {
-		e.stopPropagation(), E(!1);
-	}
-	return l(() => {
-		b(!0);
-		let e = `sub-nav-${c.id ?? _}`;
-		M(e), P(`${e}-toggle`);
-	}, []), l(() => {
-		c.subNavigationExpanded !== void 0 && E(!!i(c.subNavigationExpanded, "subNavigationExpanded"));
-	}, [c.subNavigationExpanded]), l(() => {
-		if (y && v.current) {
-			let e = v.current.querySelector("menu");
-			e && (e.children?.length > 0 ? (S(!0), k || A(new s(v.current, e))) : w(!1));
-		}
-	}, [y, v.current]), /* @__PURE__ */ m("li", {
-		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"
-		]),
-		id: c.id ?? c.propOverrides?.id,
-		onMouseOver: (e) => k?.enableFollow(),
-		onMouseLeave: (e) => k?.disableFollow(),
-		onMouseMove: (e) => k?.followByMouseEvent(e),
-		...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-navigation-item", c.className),
-		"data-width": c.width,
-		"data-icon": c.icon,
-		"data-show-icon": a(c.showIcon, "showIcon"),
-		"data-active": c.active,
-		"data-wrap": a(c.wrap, "wrap"),
-		"aria-disabled": a(c.disabled, "disabled"),
-		children: !i(c.hideSubNavigation, "hideSubNavigation") && C ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
-			className: "db-navigation-item-expand-button",
-			id: N,
-			"aria-haspopup": x ? "true" : void 0,
-			"aria-expanded": T,
-			"aria-controls": j,
-			disabled: i(c.disabled, "disabled"),
-			onClick: (e) => I(e),
-			children: c.text ? /* @__PURE__ */ m(p, { children: c.text }) : /* @__PURE__ */ m(p, { children: c.children })
-		}), /* @__PURE__ */ h("menu", {
-			className: "db-sub-navigation",
-			id: j,
-			"aria-labelledby": N,
-			"data-force-close": D,
-			onClick: (e) => F(e),
-			children: [x ? /* @__PURE__ */ m("div", {
-				className: "db-mobile-navigation-back",
-				children: /* @__PURE__ */ m(o, {
-					icon: "arrow_left",
-					variant: "ghost",
-					id: c.backButtonId,
-					onClick: (e) => L(e),
-					children: c.backButtonText ?? "Back"
-				})
-			}) : null, /* @__PURE__ */ m(p, { children: c.subNavigation })]
-		})] }) : c.text ? /* @__PURE__ */ m(p, { children: c.text }) : /* @__PURE__ */ m(p, { children: c.children })
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_BACK } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString } from "../../utils/index.js";
+import { NavigationItemSafeTriangle } from "../../utils/navigation.js";
+import DBButton from "../button/button.js";
+import { useId } from "react";
+function DBNavigationItemFn(props, component) {
+    const uuid = useId();
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
+    const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
+    const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
+    const [autoClose, setAutoClose] = useState(() => false);
+    const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
+    const [subNavigationId, setSubNavigationId] = useState(() => undefined);
+    const [subNavigationToggleId, setSubNavigationToggleId] = useState(() => undefined);
+    function handleNavigationItemClick(event) {
+        if (event?.target?.nodeName === "A") {
+            setAutoClose(true);
+            void delay(() => {
+                setAutoClose(false);
+            }, 1000);
+        }
+    }
+    function handleClick(event) {
+        if (props.onClick) {
+            event.stopPropagation();
+            props.onClick(event);
+        }
+        if (hasAreaPopup) {
+            setIsSubNavigationExpanded(true);
+        }
+    }
+    function handleBackClick(event) {
+        event.stopPropagation();
+        setIsSubNavigationExpanded(false);
+    }
+    useEffect(() => {
+        setInitialized(true);
+        const subNavId = `sub-nav-${props.id ?? uuid}`;
+        setSubNavigationId(subNavId);
+        setSubNavigationToggleId(`${subNavId}-toggle`);
+    }, []);
+    useEffect(() => {
+        if (props.subNavigationExpanded !== undefined) {
+            setIsSubNavigationExpanded(!!getBoolean(props.subNavigationExpanded, "subNavigationExpanded"));
+        }
+    }, [props.subNavigationExpanded]);
+    useEffect(() => {
+        if (initialized && _ref.current) {
+            const subNavigationSlot = _ref.current.querySelector("menu");
+            if (subNavigationSlot) {
+                if (subNavigationSlot.children?.length > 0) {
+                    setHasAreaPopup(true);
+                    if (!navigationItemSafeTriangle) {
+                        setNavigationItemSafeTriangle(new NavigationItemSafeTriangle(_ref.current, subNavigationSlot));
+                    }
+                }
+                else {
+                    setHasSubNavigation(false);
+                }
+            }
+        }
+    }, [initialized, _ref.current]);
+    return (_jsx("li", { 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: props.id ?? props.propOverrides?.id, onMouseOver: (event) => navigationItemSafeTriangle?.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle?.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle?.followByMouseEvent(event), ...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-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon, "showIcon"), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap, "wrap"), "aria-disabled": getBooleanAsString(props.disabled, "disabled"), children: !getBoolean(props.hideSubNavigation, "hideSubNavigation") &&
+            hasSubNavigation ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "db-navigation-item-expand-button", id: subNavigationToggleId, "aria-haspopup": hasAreaPopup ? "true" : undefined, "aria-expanded": isSubNavigationExpanded, "aria-controls": subNavigationId, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event), children: props.text ? _jsx(_Fragment, { children: props.text }) : _jsx(_Fragment, { children: props.children }) }), _jsxs("menu", { className: "db-sub-navigation", id: subNavigationId, "aria-labelledby": subNavigationToggleId, "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event), children: [hasAreaPopup ? (_jsx("div", { className: "db-mobile-navigation-back", children: _jsx(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event), children: props.backButtonText ?? DEFAULT_BACK }) })) : null, _jsx(_Fragment, { children: props.subNavigation })] })] })) : props.text ? (_jsx(_Fragment, { children: props.text })) : (_jsx(_Fragment, { children: props.children })) }));
 }
-var _ = c(g);
-//#endregion
-export { _ as default };
+const DBNavigationItem = forwardRef(DBNavigationItemFn);
+export default DBNavigationItem;

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

@@ -1 +1 @@
-export { default as DBNotification } from './notification';
+export { default as DBNotification } from './notification.js';

package/dist/components/notification/index.js

@@ -0,0 +1 @@
+export { default as DBNotification } from './notification.js';

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

@@ -1,4 +1,4 @@
-import type { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+import type { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model.js';
 export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
 export type NotificationVariantType = (typeof NotificationVariantList)[number];
 export declare const NotificationLinkVariantList: readonly ["block", "inline"];

package/dist/components/notification/model.js

@@ -1,12 +1,3 @@
-//#region src/components/notification/model.ts
-var e = [
-	"docked",
-	"standalone",
-	"overlay"
-], t = ["block", "inline"], n = [
-	"assertive",
-	"polite",
-	"off"
-];
-//#endregion
-export { n as NotificationAriaLiveList, t as NotificationLinkVariantList, e as NotificationVariantList };
+export const NotificationVariantList = ['docked', 'standalone', 'overlay'];
+export const NotificationLinkVariantList = ['block', 'inline'];
+export const NotificationAriaLiveList = ['assertive', 'polite', 'off'];

package/dist/components/notification/notification.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-import { ClickEvent } from "../../shared/model";
-declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | keyof import("../../shared/model").GlobalProps | "semantic" | "text" | "icon" | "showIcon" | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").RoleProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+import { ClickEvent } from "../../shared/model.js";
+declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | keyof import("../../shared/model.js").GlobalProps | "semantic" | "text" | "icon" | "showIcon" | keyof import("../../shared/model.js").InnerCloseButtonProps | keyof import("./model.js").DBNotificationDefaultProps | keyof import("../../shared/model.js").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model.js").DBNotificationDefaultProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").RoleProps & import("../../shared/model.js").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model.js").IconProps & import("../../shared/model.js").SemanticProps & import("../../shared/model.js").InnerCloseButtonProps & import("../../shared/model.js").ShowIconProps & import("../../shared/model.js").TextProps & React.RefAttributes<any>>;
 export default DBNotification;

package/dist/components/notification/notification.js

@@ -1,102 +1,25 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, getBoolean as r, getBooleanAsString as i, getNotificationRole as a, stringPropVisible as o } from "../../utils/index.js";
-import "../../shared/constants.js";
-import s from "../button/button.js";
-import { forwardRef as c, useRef as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/components/notification/notification.tsx
-function p(c, p) {
-	let m = p || l(p);
-	function h(e) {
-		e && (e.stopPropagation(), c.onClose && c.onClose(e));
-	}
-	return /* @__PURE__ */ f("div", {
-		ref: m,
-		...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",
-			"onClose"
-		]),
-		id: c.id ?? c.propOverrides?.id,
-		...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-notification", c.className),
-		role: a({
-			semantic: c.semantic,
-			role: c.role,
-			ariaLive: c.ariaLive
-		}),
-		"aria-live": c.ariaLive,
-		"data-semantic": c.semantic,
-		"data-variant": c.variant,
-		"data-icon": r(c.showIcon) === !1 ? void 0 : c.icon,
-		"data-show-icon": i(c.showIcon, "showIcon"),
-		"data-link-variant": c.linkVariant,
-		children: [
-			/* @__PURE__ */ d(u, { children: c.image }),
-			o(c.headline, c.showHeadline) ? /* @__PURE__ */ d("header", {
-				"data-area": "head",
-				children: c.headline
-			}) : null,
-			/* @__PURE__ */ f("div", {
-				"data-area": "content",
-				children: [c.text ? /* @__PURE__ */ d(u, { children: c.text }) : null, c.children]
-			}),
-			o(c.timestamp, c.showTimestamp) ? /* @__PURE__ */ d("time", {
-				"data-area": "timestamp",
-				dateTime: c.timestampDatetime,
-				children: c.timestamp
-			}) : null,
-			/* @__PURE__ */ d(u, { children: c.link }),
-			r(c.closeable, "closeable") ? /* @__PURE__ */ d(s, {
-				icon: "cross",
-				variant: "ghost",
-				size: "small",
-				id: c.closeButtonId,
-				noText: !0,
-				onClick: (e) => h(e),
-				children: c.closeButtonText ?? "Close"
-			}) : null
-		]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, forwardRef } from "react";
+import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants.js";
+import { cls, getBoolean, getBooleanAsString, getNotificationRole, stringPropVisible, } from "../../utils/index.js";
+import DBButton from "../button/button.js";
+function DBNotificationFn(props, component) {
+    const _ref = component || useRef(component);
+    function handleClose(event) {
+        if (!event)
+            return;
+        event.stopPropagation();
+        if (props.onClose) {
+            props.onClose(event);
+        }
+    }
+    return (_jsxs("div", { 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", "onClose"]), id: props.id ?? props.propOverrides?.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-notification", props.className), role: getNotificationRole({
+            semantic: props.semantic,
+            role: props.role,
+            ariaLive: props.ariaLive,
+        }), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon, "showIcon"), "data-link-variant": props.linkVariant, children: [_jsx(_Fragment, { children: props.image }), stringPropVisible(props.headline, props.showHeadline) ? (_jsx("header", { "data-area": "head", children: props.headline })) : null, _jsxs("div", { "data-area": "content", children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }), stringPropVisible(props.timestamp, props.showTimestamp) ? (_jsx("time", { "data-area": "timestamp", dateTime: props.timestampDatetime, children: props.timestamp })) : null, _jsx(_Fragment, { children: props.link }), getBoolean(props.closeable, "closeable") ? (_jsx(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event), children: props.closeButtonText ?? DEFAULT_CLOSE_BUTTON })) : null] }));
 }
-var m = c(p);
-//#endregion
-export { m as default };
+const DBNotification = forwardRef(DBNotificationFn);
+export default DBNotification;

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

@@ -1 +1 @@
-export { default as DBPage } from './page';
+export { default as DBPage } from './page.js';

package/dist/components/page/index.js

@@ -0,0 +1 @@
+export { default as DBPage } from './page.js';

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

@@ -1,4 +1,4 @@
-import type { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model.js';
 export declare const PageVariantList: readonly ["auto", "fixed"];
 export type PageVariantType = (typeof PageVariantList)[number];
 export declare const PageDocumentOverflowList: readonly ["hidden", "auto"];

package/dist/components/page/model.js

@@ -1,4 +1,2 @@
-//#region src/components/page/model.ts
-var e = ["auto", "fixed"], t = ["hidden", "auto"];
-//#endregion
-export { t as PageDocumentOverflowList, e as PageVariantList };
+export const PageVariantList = ['auto', 'fixed'];
+export const PageDocumentOverflowList = ['hidden', 'auto'];

package/dist/components/page/page.d.ts

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