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

package/dist/components/drawer/drawer.js

@@ -1,120 +1,111 @@
 "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, isKeyboardEvent as o } from "../../utils/index.js";
-import "../../shared/constants.js";
-import s from "../button/button.js";
-import { forwardRef as c, useEffect as l, useRef as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/drawer/drawer.tsx
-function h(c, h) {
-	let g = h || u(h), _ = u(null), [v, y] = d(() => !1);
-	function b(e, t) {
-		e && (o(e) ? e.key === "Escape" && (e.preventDefault(), c.onClose && c.onClose(e)) : (t && (e.stopPropagation(), c.onClose && c.onClose(e)), e.target?.nodeName === "DIALOG" && e.type === "click" && c.backdrop !== "none" && c.onClose && c.onClose(e)));
-	}
-	function x() {
-		if (g.current) {
-			let e = i(c.open, "open");
-			e && !g.current.open && (_.current && _.current.removeAttribute("data-transition"), c.position === "absolute" || c.backdrop === "none" || c.variant === "inside" ? g.current.show() : g.current.showModal(), r(() => {
-				_.current && (_.current.dataset.transition = "open");
-			}, 1)), !e && g.current.open && (_.current && (_.current.dataset.transition = "close"), r(() => {
-				g.current?.close();
-			}, 401));
-		}
-	}
-	return l(() => {
-		x(), y(!0);
-	}, []), l(() => {
-		x();
-	}, [c.open]), l(() => {
-		if (g.current && v && c.position === "absolute") {
-			let e = g.current.parentElement;
-			e && (e.style.position = "relative");
-		}
-	}, [
-		g.current,
-		v,
-		c.position
-	]), /* @__PURE__ */ p("dialog", {
-		className: "db-drawer",
-		id: c.id ?? c.propOverrides?.id,
-		ref: g,
-		...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"
-		]),
-		onClick: (e) => b(e),
-		onKeyDown: (e) => b(e),
-		"data-position": c.position,
-		"data-backdrop": c.backdrop,
-		"data-direction": c.direction,
-		"data-variant": c.variant,
-		children: /* @__PURE__ */ m("article", {
-			ref: _,
-			...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-drawer-container", c.className),
-			"data-spacing": c.spacing,
-			"data-width": c.width,
-			"data-direction": c.direction,
-			"data-rounded": a(c.rounded, "rounded"),
-			children: [/* @__PURE__ */ m("header", {
-				className: "db-drawer-header",
-				children: [/* @__PURE__ */ p("div", {
-					className: "db-drawer-header-text",
-					children: /* @__PURE__ */ p(f, { children: c.drawerHeader })
-				}), /* @__PURE__ */ p(s, {
-					className: "button-close-drawer",
-					icon: "cross",
-					variant: "ghost",
-					id: c.closeButtonId,
-					noText: !0,
-					onClick: (e) => b(e, !0),
-					children: c.closeButtonText ?? "Close"
-				})]
-			}), /* @__PURE__ */ p("div", {
-				className: "db-drawer-content",
-				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_CLOSE_BUTTON } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString, isKeyboardEvent, } from "../../utils/index.js";
+import DBButton from "../button/button.js";
+function DBDrawerFn(props, component) {
+    const _ref = component || useRef(component);
+    const dialogContainerRef = useRef(null);
+    const [initialized, setInitialized] = useState(() => false);
+    const [backdropPointerDown, setBackdropPointerDown] = useState(() => false);
+    function isNotModal() {
+        return (props.position === "absolute" ||
+            props.backdrop === "none" ||
+            props.variant === "inside");
+    }
+    function handleBackdropPointerDown(event) {
+        // Remember whether the pointer interaction started on the backdrop
+        // (the DIALOG element itself) so we only close on a real backdrop
+        // click and not when a drag started inside the content and ended
+        // on the backdrop.
+        setBackdropPointerDown(event?.target?.nodeName === "DIALOG");
+    }
+    function handleClose(event, forceClose) {
+        if (!event)
+            return;
+        if (isKeyboardEvent(event)) {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                if (props.onClose) {
+                    props.onClose(event);
+                }
+            }
+        }
+        else {
+            if (forceClose) {
+                event.stopPropagation();
+                if (props.onClose) {
+                    props.onClose(event);
+                }
+            }
+            if (event.target?.nodeName === "DIALOG" &&
+                event.type === "click" &&
+                props.backdrop !== "none" &&
+                backdropPointerDown) {
+                if (props.onClose) {
+                    props.onClose(event);
+                }
+            }
+            // Reset after handling the click so the next interaction
+            // starts from a clean state.
+            setBackdropPointerDown(false);
+        }
+    }
+    function handleDialogOpen() {
+        if (_ref.current) {
+            const dialogOpen = getBoolean(props.open, "open");
+            if (dialogOpen && !_ref.current.open) {
+                if (dialogContainerRef.current) {
+                    dialogContainerRef.current.removeAttribute("data-transition");
+                }
+                if (isNotModal()) {
+                    _ref.current.show();
+                }
+                else {
+                    // Set the closedby attribute imperatively: the JSX
+                    // dialog type does not know this attribute yet, and it
+                    // only applies to modal dialogs. "any" enables native
+                    // light dismiss (backdrop click / Esc).
+                    _ref.current.setAttribute("closedby", "any");
+                    _ref.current.showModal();
+                }
+                void delay(() => {
+                    if (dialogContainerRef.current) {
+                        dialogContainerRef.current.dataset["transition"] = "open";
+                    }
+                }, 1);
+            }
+            if (!dialogOpen && _ref.current.open) {
+                if (dialogContainerRef.current) {
+                    dialogContainerRef.current.dataset["transition"] =
+                        "close";
+                }
+                void delay(() => {
+                    _ref.current?.close();
+                }, 401);
+            }
+        }
+    }
+    const [state, setState] = useState(() => null);
+    useEffect(() => {
+        handleDialogOpen();
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        handleDialogOpen();
+    }, [props.open]);
+    useEffect(() => {
+        if (_ref.current && initialized && props.position === "absolute") {
+            const refElement = _ref.current;
+            const parent = refElement.parentElement;
+            if (parent) {
+                parent.style.position = "relative";
+            }
+        }
+    }, [_ref.current, initialized, props.position]);
+    return (_jsx("dialog", { className: "db-drawer", id: props.id ?? props.propOverrides?.id, 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"]), onClick: (event) => handleClose(event), onMouseDown: (event) => handleBackdropPointerDown(event), onKeyDown: (event) => handleClose(event), "data-position": props.position, "data-backdrop": props.backdrop, "data-direction": props.direction, "data-variant": props.variant, children: _jsxs("article", { ref: dialogContainerRef, ...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-drawer-container", props.className), "data-spacing": props.spacing, "data-width": props.width, "data-direction": props.direction, "data-rounded": getBooleanAsString(props.rounded, "rounded"), children: [_jsxs("header", { className: "db-drawer-header", children: [_jsx("div", { className: "db-drawer-header-text", children: _jsx(_Fragment, { children: props.drawerHeader }) }), _jsx(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true), children: props.closeButtonText ?? DEFAULT_CLOSE_BUTTON })] }), _jsx("div", { className: "db-drawer-content", children: props.children })] }) }));
 }
-var g = c(h);
-//#endregion
-export { g as default };
+const DBDrawer = forwardRef(DBDrawerFn);
+export default DBDrawer;

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

@@ -1 +1 @@
-export { default as DBDrawer } from './drawer';
+export { default as DBDrawer } from './drawer.js';

package/dist/components/drawer/index.js

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

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

@@ -1,4 +1,4 @@
-import type { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
+import type { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model.js';
 export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
 export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
 export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
@@ -46,5 +46,8 @@ export type DBDrawerDefaultProps = {
 export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InnerCloseButtonProps & WidthProps & SpacingProps;
 export type DBDrawerDefaultState = {
     handleDialogOpen: () => void;
+    isNotModal: () => boolean;
+    handleBackdropPointerDown: (event: any) => void;
+    backdropPointerDown: boolean;
 };
 export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InitializedState;

package/dist/components/drawer/model.js

@@ -1,14 +1,4 @@
-//#region src/components/drawer/model.ts
-var e = [
-	"none",
-	"strong",
-	"weak",
-	"invisible"
-], t = [
-	"left",
-	"right",
-	"up",
-	"down"
-], n = ["modal", "inside"], r = ["fixed", "absolute"];
-//#endregion
-export { e as DrawerBackdropList, t as DrawerDirectionList, r as DrawerPositionList, n as DrawerVariantList };
+export const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
+export const DrawerDirectionList = ['left', 'right', 'up', 'down'];
+export const DrawerVariantList = ['modal', 'inside'];
+export const DrawerPositionList = ['fixed', 'absolute'];

package/dist/components/header/header.d.ts

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

package/dist/components/header/header.js

@@ -1,145 +1,45 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { addAttributeToChildren as n, cls as r, getBoolean as i } from "../../utils/index.js";
-import "../../shared/constants.js";
-import a from "../button/button.js";
-import o from "../drawer/drawer.js";
-import { isEventTargetNavigationItem as s } from "../../utils/navigation.js";
-import { forwardRef as c, useEffect as l, useRef as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/header/header.tsx
-function h(c, h) {
-	let g = h || u(h), [_, v] = d(() => !1), [y, b] = d(() => !1);
-	function x(e) {
-		e && e.stopPropagation && e.stopPropagation();
-		let t = !i(c.drawerOpen, "drawerOpen");
-		c.onToggle && c.onToggle(t);
-	}
-	function S(e) {
-		s(e) && x();
-	}
-	return l(() => {
-		v(!0);
-	}, []), l(() => {
-		_ && g.current && c.forceMobile && (n(g.current, {
-			key: "data-force-mobile",
-			value: "true"
-		}), b(!0));
-	}, [_, g.current]), /* @__PURE__ */ m("header", {
-		ref: g,
-		...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",
-			"onToggle"
-		]),
-		...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: r("db-header", c.className),
-		id: c.id ?? c.propOverrides?.id,
-		"data-width": c.width,
-		"data-on-forcing-mobile": c.forceMobile && !y,
-		children: [
-			/* @__PURE__ */ p("div", {
-				className: "db-header-meta-navigation",
-				children: /* @__PURE__ */ p(f, { children: c.metaNavigation })
-			}),
-			/* @__PURE__ */ m("div", {
-				className: "db-header-navigation-bar",
-				children: [
-					/* @__PURE__ */ p("div", {
-						className: "db-header-brand-container",
-						children: /* @__PURE__ */ p(f, { children: c.brand })
-					}),
-					/* @__PURE__ */ m("div", {
-						className: "db-header-navigation-container",
-						children: [/* @__PURE__ */ p("div", {
-							className: "db-header-navigation",
-							children: c.children
-						}), /* @__PURE__ */ p("div", {
-							className: "db-header-primary-action",
-							children: /* @__PURE__ */ p(f, { children: c.primaryAction })
-						})]
-					}),
-					/* @__PURE__ */ m("div", {
-						className: "db-header-action-container",
-						children: [/* @__PURE__ */ p("div", {
-							className: "db-header-burger-menu-container",
-							children: /* @__PURE__ */ p(a, {
-								icon: "menu",
-								variant: "ghost",
-								noText: !0,
-								onClick: (e) => x(),
-								children: c.burgerMenuLabel ?? "BurgerMenu"
-							})
-						}), /* @__PURE__ */ p("div", {
-							className: "db-header-secondary-action",
-							children: /* @__PURE__ */ p(f, { children: c.secondaryAction })
-						})]
-					})
-				]
-			}),
-			/* @__PURE__ */ m(o, {
-				className: "db-header-drawer",
-				spacing: "small",
-				rounded: !0,
-				closeButtonId: c.closeButtonId,
-				closeButtonText: c.closeButtonText,
-				open: i(c.drawerOpen),
-				onClose: (e) => x(),
-				children: [/* @__PURE__ */ m("div", {
-					className: "db-header-drawer-navigation",
-					children: [/* @__PURE__ */ p("div", {
-						className: "db-header-navigation",
-						onClick: (e) => S(e),
-						children: c.children
-					}), /* @__PURE__ */ p("div", {
-						className: "db-header-meta-navigation",
-						children: /* @__PURE__ */ p(f, { children: c.metaNavigation })
-					})]
-				}), /* @__PURE__ */ p("div", {
-					className: "db-header-secondary-action",
-					children: /* @__PURE__ */ p(f, { children: c.secondaryAction })
-				})]
-			})
-		]
-	});
+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_BURGER_MENU } from "../../shared/constants.js";
+import { addAttributeToChildren, cls, getBoolean } from "../../utils/index.js";
+import { isEventTargetNavigationItem } from "../../utils/navigation.js";
+import DBButton from "../button/button.js";
+import DBDrawer from "../drawer/drawer.js";
+function DBHeaderFn(props, component) {
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [forcedToMobile, setForcedToMobile] = useState(() => false);
+    function handleToggle(event) {
+        if (event && event.stopPropagation) {
+            event.stopPropagation();
+        }
+        const open = !getBoolean(props.drawerOpen, "drawerOpen");
+        if (props.onToggle) {
+            props.onToggle(open);
+        }
+    }
+    function handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            handleToggle();
+        }
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (initialized && _ref.current && props.forceMobile) {
+            // Adds this attribute to the header to enable all styling which would have
+            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+            addAttributeToChildren(_ref.current, {
+                key: "data-force-mobile",
+                value: "true",
+            });
+            setForcedToMobile(true);
+        }
+    }, [initialized, _ref.current]);
+    return (_jsxs("header", { 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", "onToggle"]), ...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-header", props.className), id: props.id ?? props.propOverrides?.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile, children: [_jsx("div", { className: "db-header-meta-navigation", children: _jsx(_Fragment, { children: props.metaNavigation }) }), _jsxs("div", { className: "db-header-navigation-bar", children: [_jsx("div", { className: "db-header-brand-container", children: _jsx(_Fragment, { children: props.brand }) }), _jsxs("div", { className: "db-header-navigation-container", children: [_jsx("div", { className: "db-header-navigation", children: props.children }), _jsx("div", { className: "db-header-primary-action", children: _jsx(_Fragment, { children: props.primaryAction }) })] }), _jsxs("div", { className: "db-header-action-container", children: [_jsx("div", { className: "db-header-burger-menu-container", children: _jsx(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle(), children: props.burgerMenuLabel ?? DEFAULT_BURGER_MENU }) }), _jsx("div", { className: "db-header-secondary-action", children: _jsx(_Fragment, { children: props.secondaryAction }) })] })] }), _jsxs(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: props.closeButtonId, closeButtonText: props.closeButtonText, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle(), children: [_jsxs("div", { className: "db-header-drawer-navigation", children: [_jsx("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event), children: props.children }), _jsx("div", { className: "db-header-meta-navigation", children: _jsx(_Fragment, { children: props.metaNavigation }) })] }), _jsx("div", { className: "db-header-secondary-action", children: _jsx(_Fragment, { children: props.secondaryAction }) })] })] }));
 }
-var g = c(h);
-//#endregion
-export { g as default };
+const DBHeader = forwardRef(DBHeaderFn);
+export default DBHeader;

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

@@ -1 +1 @@
-export { default as DBHeader } from './header';
+export { default as DBHeader } from './header.js';

package/dist/components/header/index.js

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

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

@@ -1,4 +1,4 @@
-import type { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';
+import type { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model.js';
 export type DBHeaderDefaultProps = {
     /**
      * Slot to pass in the DBBrand component

package/dist/components/header/model.js

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

package/dist/components/icon/icon.d.ts

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

package/dist/components/icon/icon.js

@@ -1,63 +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 { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/icon/icon.tsx
-function c(r, c) {
-	return /* @__PURE__ */ s("span", {
-		"aria-hidden": "true",
-		ref: c || i(c),
-		...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-icon", r.className),
-		"data-icon": r.icon,
-		"data-icon-weight": r.weight,
-		"data-icon-variant": r.variant,
-		children: [r.text ? /* @__PURE__ */ o(a, { children: r.text }) : null, r.children]
-	});
+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 { cls } from "../../utils/index.js";
+function DBIconFn(props, component) {
+    const _ref = component || useRef(component);
+    return (_jsxs("span", { "aria-hidden": "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"]), 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-icon", props.className), "data-icon": props.icon, "data-icon-weight": props.weight, "data-icon-variant": props.variant, children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }));
 }
-var l = r(c);
-//#endregion
-export { l as default };
+const DBIcon = forwardRef(DBIconFn);
+export default DBIcon;

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

@@ -1 +1 @@
-export { default as DBIcon } from './icon';
+export { default as DBIcon } from './icon.js';

package/dist/components/icon/index.js

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

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

@@ -1,4 +1,4 @@
-import type { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
+import type { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model.js';
 export declare const IconWeightList: readonly ["16", "20", "24", "32", "48", "64"];
 export type IconWeightType = (typeof IconWeightList)[number];
 export type DBIconDefaultProps = {

package/dist/components/icon/model.js

@@ -1,11 +1 @@
-//#region src/components/icon/model.ts
-var e = [
-	"16",
-	"20",
-	"24",
-	"32",
-	"48",
-	"64"
-];
-//#endregion
-export { e as IconWeightList };
+export const IconWeightList = ['16', '20', '24', '32', '48', '64'];

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

@@ -1 +1 @@
-export { default as DBInfotext } from './infotext';
+export { default as DBInfotext } from './infotext.js';

package/dist/components/infotext/index.js

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

package/dist/components/infotext/infotext.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "semantic" | "text" | "size" | "wrap" | "icon" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
+declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "semantic" | "text" | "size" | "wrap" | "icon" | "showIcon"> & import("../../index.js").GlobalProps & import("../../index.js").SemanticProps & import("../../index.js").IconProps & import("../../index.js").SizeProps & import("../../index.js").ShowIconProps & import("../../index.js").TextProps & import("../../index.js").WrapProps & React.RefAttributes<any>>;
 export default DBInfotext;