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

package/dist/components/drawer/drawer.js

@@ -1,99 +1,120 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, delay, getBooleanAsString, isKeyboardEvent } from "../../utils";
-import DBButton from "../button/button";
-function DBDrawerFn(props, component) {
-    var _a, _b, _c;
-    const _ref = component || useRef(component);
-    const dialogContainerRef = useRef(null);
-    const [initialized, setInitialized] = useState(() => false);
-    function handleClose(event, forceClose) {
-        var _a;
-        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 (((_a = event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG" &&
-                event.type === "click" &&
-                props.backdrop !== "none") {
-                if (props.onClose) {
-                    props.onClose(event);
-                }
-            }
-        }
-    }
-    function handleDialogOpen() {
-        if (_ref.current) {
-            const open = Boolean(props.open);
-            if (open && !_ref.current.open) {
-                if (dialogContainerRef.current) {
-                    dialogContainerRef.current.removeAttribute("data-transition");
-                }
-                if (props.position === "absolute" ||
-                    props.backdrop === "none" ||
-                    props.variant === "inside") {
-                    _ref.current.show();
-                }
-                else {
-                    _ref.current.showModal();
-                }
-                void delay(() => {
-                    if (dialogContainerRef.current) {
-                        dialogContainerRef.current.dataset["transition"] = "open";
-                    }
-                }, 1);
-            }
-            if (!open && _ref.current.open) {
-                if (dialogContainerRef.current) {
-                    dialogContainerRef.current.dataset["transition"] =
-                        "close";
-                }
-                void delay(() => {
-                    var _a;
-                    (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.close();
-                }, 401);
-            }
-        }
-    }
-    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 (React.createElement("dialog", Object.assign({ className: "db-drawer", id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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), onKeyDown: (event) => handleClose(event), "data-position": props.position, "data-backdrop": props.backdrop, "data-direction": props.direction, "data-variant": props.variant }),
-        React.createElement("article", Object.assign({ 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) }),
-            React.createElement("header", { className: "db-drawer-header" },
-                React.createElement("div", { className: "db-drawer-header-text" },
-                    React.createElement(React.Fragment, null, props.drawerHeader)),
-                React.createElement(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true) }, (_c = props.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)),
-            React.createElement("div", { className: "db-drawer-content" }, props.children))));
+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),
+			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
+			})]
+		})
+	});
 }
-const DBDrawer = forwardRef(DBDrawerFn);
-export default DBDrawer;
+var g = c(h);
+//#endregion
+export { g as default };

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/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"];

package/dist/components/drawer/model.js

@@ -1,4 +1,14 @@
-export const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
-export const DrawerDirectionList = ['left', 'right', 'up', 'down'];
-export const DrawerVariantList = ['modal', 'inside'];
-export const DrawerPositionList = ['fixed', 'absolute'];
+//#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 };

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").DBHeaderDefaultProps> & import("./model").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,67 +1,145 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_BURGER_MENU } from "../../shared/constants";
-import { addAttributeToChildren, cls, getBoolean } from "../../utils";
-import { isEventTargetNavigationItem } from "../../utils/navigation";
-import DBButton from "../button/button";
-import DBDrawer from "../drawer/drawer";
-function DBHeaderFn(props, component) {
-    var _a, _b, _c;
-    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 (React.createElement("header", 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", "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: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
-        React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: props.closeButtonId, closeButtonText: props.closeButtonText, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
-            React.createElement("div", { className: "db-header-drawer-navigation" },
-                React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
-                React.createElement("div", { className: "db-header-meta-navigation" },
-                    React.createElement(React.Fragment, null, props.metaNavigation))),
-            React.createElement("div", { className: "db-header-secondary-action" },
-                React.createElement(React.Fragment, null, props.secondaryAction))),
-        React.createElement("div", { className: "db-header-meta-navigation" },
-            React.createElement(React.Fragment, null, props.metaNavigation)),
-        React.createElement("div", { className: "db-header-navigation-bar" },
-            React.createElement("div", { className: "db-header-brand-container" },
-                React.createElement(React.Fragment, null, props.brand)),
-            React.createElement("div", { className: "db-header-navigation-container" },
-                React.createElement("div", { className: "db-header-navigation" }, props.children),
-                React.createElement("div", { className: "db-header-primary-action" },
-                    React.createElement(React.Fragment, null, props.primaryAction))),
-            React.createElement("div", { className: "db-header-action-container" },
-                React.createElement("div", { className: "db-header-burger-menu-container" },
-                    React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_c = props.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)),
-                React.createElement("div", { className: "db-header-secondary-action" },
-                    React.createElement(React.Fragment, null, props.secondaryAction))))));
+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 })
+				})]
+			})
+		]
+	});
 }
-const DBHeader = forwardRef(DBHeaderFn);
-export default DBHeader;
+var g = c(h);
+//#endregion
+export { g as default };

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/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/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,14 +1,63 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls } from "../../utils";
-function DBIconFn(props, component) {
-    var _a, _b;
-    const _ref = component || useRef(component);
-    return (React.createElement("span", Object.assign({ "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: (_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-icon", props.className), "data-icon": props.icon, "data-icon-weight": props.weight, "data-icon-variant": props.variant }),
-        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 } 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]
+	});
 }
-const DBIcon = forwardRef(DBIconFn);
-export default DBIcon;
+var l = r(c);
+//#endregion
+export { l as default };

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

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/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;