@dynamic-framework/ui-react 2.8.0 → 2.10.0

package/dist/index.esm.js

@@ -25,6 +25,16 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 const PREFIX_BS = 'bs-';
+/**
+ * Default icon-font family configured by `DContextProvider`.
+ *
+ * `DIconBase` compares the family it receives against these values to tell an
+ * unconfigured consumer apart from one that deliberately opted into an icon
+ * font (Material Symbols, Bootstrap Icons). Only the former gets the
+ * development warning for an unresolved icon name.
+ */
+const DEFAULT_ICON_FAMILY_CLASS = 'bi';
+const DEFAULT_ICON_FAMILY_PREFIX = 'bi-';
 
 /* eslint-disable no-lonely-if */
 function useDisableBodyScrollEffect(disable) {
@@ -306,8 +316,8 @@ const DEFAULT_STATE = {
         decimal: '.',
     },
     icon: {
-        familyClass: 'bi',
-        familyPrefix: 'bi-',
+        familyClass: DEFAULT_ICON_FAMILY_CLASS,
+        familyPrefix: DEFAULT_ICON_FAMILY_PREFIX,
         materialStyle: false,
     },
     iconRegistry: undefined,
@@ -412,6 +422,79 @@ function useDContext() {
     return useContext(DContext);
 }
 
+/**
+ * Resolves a string icon name against the registry supplied through
+ * `DContextProvider`'s `iconRegistry` prop.
+ *
+ * This is the single implementation shared by `DIcon` and `DIconBase`, so both
+ * public entry points — and every Dynamic UI component that renders an icon
+ * through them — resolve names identically.
+ *
+ * A non-string `icon` is returned untouched: a component passed directly needs
+ * no lookup. A name missing from the registry is also returned untouched, so
+ * the caller can fall through to lucide-react and then to the icon-font family.
+ */
+function resolveIconFromRegistry(icon, iconRegistry) {
+    if (typeof icon !== 'string')
+        return icon;
+    return (iconRegistry === null || iconRegistry === void 0 ? void 0 : iconRegistry[icon]) || icon;
+}
+
+/**
+ * Names already reported, so a name repeated across renders or across many
+ * instances only warns once per page load.
+ */
+const warnedIconNames = new Set();
+/**
+ * True when the icon-font family is the one `DContextProvider` defaults to.
+ *
+ * The warning is limited to that case so a consumer who configured a different
+ * font — Material Symbols, for instance — is not told about names that font
+ * resolves perfectly well.
+ *
+ * It cannot tell "never configured a font" apart from "configured exactly the
+ * defaults", and those defaults are also the standard Bootstrap Icons setup, so
+ * a consumer who deliberately uses Bootstrap Icons is warned too. The message
+ * says so; silencing that case would need a new context flag, which is beyond
+ * what this helper should decide.
+ */
+function isDefaultIconFamily(familyClass, familyPrefix) {
+    return familyClass === DEFAULT_ICON_FAMILY_CLASS
+        && familyPrefix === DEFAULT_ICON_FAMILY_PREFIX;
+}
+/**
+ * Warns, once per name and only outside production builds, that an icon name
+ * resolved to neither the registry nor lucide-react and is falling back to the
+ * default icon font, which this package no longer ships.
+ *
+ * Whether that fallback renders depends on the host app: if it loads the font
+ * itself the `<i>` shows the glyph, and if it does not, nothing appears. The
+ * message states both possibilities instead of assuming the second.
+ *
+ * The `process.env.NODE_ENV` guard is what bundlers constant-fold, so the whole
+ * call — and this module — drops out of a consumer's production bundle.
+ */
+function warnUnknownIcon(name, familyClass, familyPrefix) {
+    if (!isDefaultIconFamily(familyClass, familyPrefix))
+        return;
+    if (warnedIconNames.has(name))
+        return;
+    warnedIconNames.add(name);
+    const fallbackClass = `${DEFAULT_ICON_FAMILY_CLASS} ${DEFAULT_ICON_FAMILY_PREFIX}${name}`;
+    // eslint-disable-next-line no-console
+    console.warn(`[Dynamic UI] Icon "${name}" is not in the icon registry and is not a `
+        + 'lucide-react export, so it falls back to the default icon font: '
+        + `<i class="${fallbackClass}">. That renders only if your app loads that `
+        + 'font, which this package stopped shipping in v2.0.0. '
+        + 'If the icon is missing, pass a PascalCase lucide-react name such as '
+        + '"Home", or register the component with '
+        + '<DContextProvider iconRegistry={{ MyIcon }}>. '
+        + `If you use the "${DEFAULT_ICON_FAMILY_CLASS}" font on purpose, this is a `
+        + 'false positive: the warning fires whenever the configured family equals '
+        + 'the package default, which is also the standard Bootstrap Icons setup. '
+        + 'It never appears in production builds.');
+}
+
 function subscribeToMediaQuery(query, callback) {
     const mediaQueryList = window.matchMedia(query);
     mediaQueryList.addEventListener('change', callback);
@@ -501,7 +584,31 @@ function useResponsiveProp(useListener = false) {
 function isIconComponent(value) {
     return typeof value !== 'string' && isValidElementType(value);
 }
-function DIconBase({ icon, color, style, className, size, useListenerSize = false, hasCircle = false, materialStyle = false, familyClass, familyPrefix, strokeWidth = 2, dataAttributes, }) {
+/**
+ * Renders an icon, resolving the `icon` prop in this order:
+ *
+ * 1. **Icon registry** — a string name found in `DContextProvider`'s
+ *    `iconRegistry` renders the component registered under it. A component
+ *    passed directly skips this step and renders as-is.
+ * 2. **lucide-react** — a PascalCase name exported by lucide-react renders that
+ *    icon. When `materialStyle` is on, this step is skipped and the name is
+ *    emitted as the text content of the icon-font element instead.
+ * 3. **Icon-font family** — anything left over renders as
+ *    `<i class="{familyClass} {familyPrefix}{name}">`, the legacy path for
+ *    Material Symbols and Bootstrap Icons. Outside production builds, a name
+ *    that reaches this step while the family is still the package default logs
+ *    a one-time warning.
+ *
+ * A name that resolves nowhere and has no family configured renders `?`.
+ *
+ * Every path is hidden from the accessibility tree by default (`aria-hidden`),
+ * since icons are overwhelmingly decorative. See `ariaHidden` / `ariaLabel` to
+ * override that for an icon that carries meaning on its own.
+ */
+function DIconBase({ icon: iconProp, color, style, className, size, useListenerSize = false, hasCircle = false, materialStyle = false, familyClass, familyPrefix, strokeWidth = 2, ariaHidden, ariaLabel, dataAttributes, }) {
+    const { iconRegistry } = useDContext();
+    // The registry wins over every other source, including Material icons.
+    const icon = resolveIconFromRegistry(iconProp, iconRegistry);
     // If materialStyle is true, use Material Design icons (legacy)
     const isStringIcon = typeof icon === 'string';
     const useMaterialIcons = materialStyle && isStringIcon;
@@ -523,6 +630,61 @@ function DIconBase({ icon, color, style, className, size, useListenerSize = fals
     }, [responsivePropValue, size]);
     const generateStyleVariables = useMemo(() => (Object.assign(Object.assign(Object.assign({}, resolvedSize && { [`--${PREFIX_BS}icon-component-size`]: resolvedSize }), hasCircle && { [`--${PREFIX_BS}icon-component-padding`]: `calc(var(--${PREFIX_BS}icon-component-size, 24px) * 0.4)` }), style)), [resolvedSize, hasCircle, style]);
     const generateClasses = useMemo(() => (Object.assign(Object.assign(Object.assign({ 'd-icon': true }, className && { [className]: true }), { 'd-icon-has-circle': hasCircle }), color && { [`d-icon-color-${color}`]: true })), [className, hasCircle, color]);
+    /**
+     * Decorative by default. `ariaHidden` and `ariaLabel` are not symmetric:
+     * hiding is absolute, so `ariaHidden` wins over a name, but `ariaHidden={false}`
+     * and `ariaLabel` agree — both expose the icon — and the name is honoured.
+     */
+    const accessibilityProps = useMemo(() => {
+        // Hiding is absolute: it wins over a name.
+        if (ariaHidden === true)
+            return { 'aria-hidden': true };
+        // A name exposes the icon, which is also what `ariaHidden={false}` asks for.
+        if (ariaLabel)
+            return { role: 'img', 'aria-label': ariaLabel };
+        // Exposed with no name: an explicit opt-out of the default, warned about below.
+        if (ariaHidden === false)
+            return {};
+        return { 'aria-hidden': true };
+    }, [ariaHidden, ariaLabel]);
+    /**
+     * `dataAttributes` is typed to `data-*`, but casting through it was the only
+     * way to reach the DOM before `ariaHidden` existed, so it still wins over the
+     * computed values — and therefore decides the effective state below.
+     */
+    const domAttributes = useMemo(() => (Object.assign(Object.assign({}, accessibilityProps), dataAttributes)), [accessibilityProps, dataAttributes]);
+    /**
+     * lucide-react hides its own `<svg>` unless it receives an a11y prop, and a
+     * registry component may do the same, which would keep the graphic out of the
+     * tree even when this wrapper is not hidden. Only matters when the icon is
+     * exposed without a name: under `role="img"` the wrapper is a leaf, so a
+     * hidden child changes nothing.
+     *
+     * A registry component that hardcodes `aria-hidden` on its own `<svg>` instead
+     * of spreading props still wins — nothing here can reach inside it.
+     */
+    const isExposedWithoutName = useMemo(() => {
+        const attributes = domAttributes;
+        const hidden = attributes['aria-hidden'];
+        return hidden !== true && hidden !== 'true' && !attributes.role;
+    }, [domAttributes]);
+    /**
+     * Diagnostics read the effective state, so a `dataAttributes` override that
+     * hides the icon after all is not reported as exposing it. Memoised like the
+     * values above, so re-rendering with the same props does not repeat them.
+     */
+    useMemo(() => {
+        if (process.env.NODE_ENV === 'production')
+            return;
+        if (ariaHidden === true && ariaLabel) {
+            // eslint-disable-next-line no-console
+            console.warn(`DIcon: ariaLabel "${ariaLabel}" is ignored because ariaHidden is true. Drop ariaHidden to expose the name.`);
+        }
+        if (ariaHidden === false && isExposedWithoutName) {
+            // eslint-disable-next-line no-console
+            console.warn('DIcon: ariaHidden={false} without an ariaLabel exposes an unnamed graphic to assistive technology. Pass ariaLabel to name it.');
+        }
+    }, [ariaHidden, ariaLabel, isExposedWithoutName]);
     const iconSize = useMemo(() => {
         if (resolvedSize) {
             const numSize = parseInt(resolvedSize, 10);
@@ -532,43 +694,46 @@ function DIconBase({ icon, color, style, className, size, useListenerSize = fals
     }, [resolvedSize]);
     // Render Material Design icon (legacy support)
     if (useMaterialIcons) {
-        return (jsx("i", Object.assign({ className: classNames(generateClasses, familyClass), style: generateStyleVariables }, dataAttributes, { children: isStringIcon ? icon : null })));
+        return (jsx("i", Object.assign({ className: classNames(generateClasses, familyClass), style: generateStyleVariables }, domAttributes, { children: isStringIcon ? icon : null })));
     }
     if (isIconComponent(icon)) {
-        return (jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, dataAttributes, { children: createElement(icon, {
-                width: resolvedSize || 24,
-                height: resolvedSize || 24,
-                strokeWidth,
-            }) })));
+        return (jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, domAttributes, { children: createElement(icon, Object.assign({ width: resolvedSize || 24, height: resolvedSize || 24, strokeWidth }, isExposedWithoutName && { 'aria-hidden': false })) })));
     }
     // Render Lucide icon
     if (!LucideIcon) {
-        if (isStringIcon && familyClass && familyPrefix) {
-            return (jsx("i", Object.assign({ className: classNames(generateClasses, familyClass, `${familyPrefix}${icon}`), style: generateStyleVariables }, dataAttributes)));
+        if (typeof icon === 'string' && familyClass && familyPrefix) {
+            if (process.env.NODE_ENV !== 'production') {
+                warnUnknownIcon(icon, familyClass, familyPrefix);
+            }
+            return (jsx("i", Object.assign({ className: classNames(generateClasses, familyClass, `${familyPrefix}${icon}`), style: generateStyleVariables }, domAttributes)));
         }
         // eslint-disable-next-line no-console
         console.warn(`Icon "${String(icon)}" not found in Lucide. Make sure to use PascalCase names (e.g., "Home", "User", "Settings")`);
-        return (jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, dataAttributes, { children: "?" })));
+        return (jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, domAttributes, { children: "?" })));
     }
-    return (jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, dataAttributes, { children: jsx(LucideIcon, { size: iconSize || 24, strokeWidth: strokeWidth }) })));
+    return (jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, domAttributes, { children: jsx(LucideIcon, Object.assign({ size: iconSize || 24, strokeWidth: strokeWidth }, isExposedWithoutName && { 'aria-hidden': false })) })));
 }
 
+/**
+ * Thin wrapper over `DIconBase` that fills the icon-font configuration
+ * (`familyClass`, `familyPrefix`, `materialStyle`) from `DContextProvider`
+ * whenever the caller does not pass it explicitly.
+ *
+ * Name resolution itself — registry, then lucide-react, then the icon-font
+ * family — lives in `DIconBase`, so both components behave identically.
+ */
 function DIcon(_a) {
     var { icon, familyClass: propFamilyClass, familyPrefix: propFamilyPrefix, materialStyle: propMaterialStyle } = _a, props = __rest(_a, ["icon", "familyClass", "familyPrefix", "materialStyle"]);
-    const { icon: { familyClass, familyPrefix, materialStyle, }, iconRegistry, } = useDContext();
-    const registryIcon = typeof icon === 'string'
-        ? iconRegistry === null || iconRegistry === void 0 ? void 0 : iconRegistry[icon]
-        : undefined;
-    const resolvedIcon = registryIcon || icon;
-    return (jsx(DIconBase, Object.assign({ icon: resolvedIcon, familyClass: propFamilyClass !== null && propFamilyClass !== void 0 ? propFamilyClass : familyClass, familyPrefix: propFamilyPrefix !== null && propFamilyPrefix !== void 0 ? propFamilyPrefix : familyPrefix, materialStyle: propMaterialStyle !== null && propMaterialStyle !== void 0 ? propMaterialStyle : materialStyle }, props)));
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
+    return (jsx(DIconBase, Object.assign({ icon: icon, familyClass: propFamilyClass !== null && propFamilyClass !== void 0 ? propFamilyClass : familyClass, familyPrefix: propFamilyPrefix !== null && propFamilyPrefix !== void 0 ? propFamilyPrefix : familyPrefix, materialStyle: propMaterialStyle !== null && propMaterialStyle !== void 0 ? propMaterialStyle : materialStyle }, props)));
 }
 
-function DAlert({ color = 'success', icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle = false, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle = false, showClose, onClose, children, id, className, style, dataAttributes, }) {
-    const { iconMap: { alert, xLg, }, } = useDContext();
+function DAlert({ color = 'success', icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, onClose, children, id, className, style, dataAttributes, }) {
+    const { icon: { materialStyle, familyClass, familyPrefix, }, iconMap: { alert, xLg, }, } = useDContext();
     const icon = useMemo(() => iconProp || alert[color], [alert, iconProp, color]);
     const iconClose = useMemo(() => (iconCloseProp || xLg), [iconCloseProp, xLg]);
     const generateClasses = useMemo(() => (Object.assign({ alert: true, [`alert-${color}`]: true, 'fade show': !!showClose }, className && { [className]: true })), [color, showClose, className]);
-    return (jsxs("div", Object.assign({ className: classNames(generateClasses), style: style, role: "alert", id: id }, dataAttributes, { children: [icon && (jsx(DIcon, { className: "alert-icon", icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })), jsx("div", { className: "alert-text", children: children }), showClose && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: iconClose, familyClass: iconCloseFamilyClass, familyPrefix: iconCloseFamilyPrefix, materialStyle: iconCloseMaterialStyle }) }))] })));
+    return (jsxs("div", Object.assign({ className: classNames(generateClasses), style: style, role: "alert", id: id }, dataAttributes, { children: [icon && (jsx(DIcon, { className: "alert-icon", icon: icon, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle })), jsx("div", { className: "alert-text", children: children }), showClose && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: iconClose, familyClass: iconCloseFamilyClass !== null && iconCloseFamilyClass !== void 0 ? iconCloseFamilyClass : familyClass, familyPrefix: iconCloseFamilyPrefix !== null && iconCloseFamilyPrefix !== void 0 ? iconCloseFamilyPrefix : familyPrefix, materialStyle: iconCloseMaterialStyle !== null && iconCloseMaterialStyle !== void 0 ? iconCloseMaterialStyle : materialStyle }) }))] })));
 }
 
 function DAvatar({ id, size, image, name: nameProp, useNameAsInitials = false, className, style, dataAttributes, }) {
@@ -590,6 +755,7 @@ function DAvatar({ id, size, image, name: nameProp, useNameAsInitials = false, c
 
 function DBadge(props) {
     const { text, soft = false, color = 'primary', id, rounded, className, size, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, dataAttributes, } = props;
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     // Responsive size resolution using useResponsiveProp
     const { responsivePropValue } = useResponsiveProp(true);
     const resolvedSize = useMemo(() => {
@@ -606,7 +772,7 @@ function DBadge(props) {
         'rounded-pill': !!rounded,
         [`badge-${resolvedSize}`]: !!resolvedSize,
     }), [rounded, soft, color, resolvedSize]);
-    return (jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, id && { id }, dataAttributes, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })), jsx("span", { children: text }), iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle }))] })));
+    return (jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, id && { id }, dataAttributes, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle })), jsx("span", { children: text }), iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle }))] })));
 }
 
 function DBox({ className, style, children, dataAttributes, }) {
@@ -638,6 +804,7 @@ function DInput(_a, ref) {
     const inputRef = useProvidedRefOrCreate(ref);
     const innerId = useId();
     const id = useMemo(() => idProp || innerId, [idProp, innerId]);
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     const handleOnChange = useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value);
     }, [onChange]);
@@ -700,7 +867,7 @@ function DInput(_a, ref) {
                     [`input-group-${size}`]: !!size,
                     'input-group': true,
                     'has-validation': invalid || valid,
-                }), children: [!!inputStart && (jsx("div", { className: "input-group-text", id: `${id}InputStart`, children: inputStart })), iconStart && (onIconStartClick ? (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading || iconStartDisabled, "aria-label": iconStartAriaLabel || (typeof iconStart === 'string' ? iconStart : 'start icon'), tabIndex: iconStartTabIndex, children: jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle }) })) : (jsx("div", { className: "input-group-text", id: `${id}Start`, "aria-hidden": "true", tabIndex: -1, children: jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle }) }))), dynamicComponent, (iconEnd && !loading) && (onIconEndClick ? (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading || iconEndDisabled, "aria-label": iconEndAriaLabel || (typeof iconEnd === 'string' ? iconEnd : 'end icon'), tabIndex: iconEndTabIndex, children: jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }) })) : (jsx("div", { className: "input-group-text", id: `${id}End`, "aria-hidden": "true", tabIndex: -1, children: jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }) }))), loading && (jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", "data-testid": "loading-spinner", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
+                }), children: [!!inputStart && (jsx("div", { className: "input-group-text", id: `${id}InputStart`, children: inputStart })), iconStart && (onIconStartClick ? (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading || iconStartDisabled, "aria-label": iconStartAriaLabel || (typeof iconStart === 'string' ? iconStart : 'start icon'), tabIndex: iconStartTabIndex, children: jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass !== null && iconStartFamilyClass !== void 0 ? iconStartFamilyClass : familyClass, familyPrefix: iconStartFamilyPrefix !== null && iconStartFamilyPrefix !== void 0 ? iconStartFamilyPrefix : familyPrefix, materialStyle: iconStartMaterialStyle !== null && iconStartMaterialStyle !== void 0 ? iconStartMaterialStyle : materialStyle }) })) : (jsx("div", { className: "input-group-text", id: `${id}Start`, tabIndex: -1, children: jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass !== null && iconStartFamilyClass !== void 0 ? iconStartFamilyClass : familyClass, familyPrefix: iconStartFamilyPrefix !== null && iconStartFamilyPrefix !== void 0 ? iconStartFamilyPrefix : familyPrefix, materialStyle: iconStartMaterialStyle !== null && iconStartMaterialStyle !== void 0 ? iconStartMaterialStyle : materialStyle }) }))), dynamicComponent, (iconEnd && !loading) && (onIconEndClick ? (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading || iconEndDisabled, "aria-label": iconEndAriaLabel || (typeof iconEnd === 'string' ? iconEnd : 'end icon'), tabIndex: iconEndTabIndex, children: jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle }) })) : (jsx("div", { className: "input-group-text", id: `${id}End`, tabIndex: -1, children: jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle }) }))), loading && (jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", "data-testid": "loading-spinner", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 const ForwardedDInput = forwardRef(DInput);
 ForwardedDInput.displayName = 'DInput';
@@ -1096,7 +1263,7 @@ function useDBoxFile(props) {
 
 function DBoxFile(_a) {
     var { icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, children, className, style, dataAttributes } = _a, props = __rest(_a, ["icon", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "children", "className", "style", "dataAttributes"]);
-    const { iconMap: { upload } } = useDContext();
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { upload }, } = useDContext();
     const icon = useMemo(() => iconProp || upload, [iconProp, upload]);
     const { inputRef, rootRef, isDragValid, isDragInvalid, acceptAttr, files, handleFileSelect, handleDrop, handleDragEnter, handleDragLeave, handleClick, handleKeyDown, handleRemoveFile, openFileDialog, } = useDBoxFile(props);
     return (jsxs(Fragment, { children: [jsx("section", Object.assign({ className: classNames('d-box-file', {
@@ -1104,13 +1271,14 @@ function DBoxFile(_a) {
                     'd-box-file-disabled': props.disabled,
                     'd-box-file-valid': isDragValid,
                     'd-box-file-invalid': isDragInvalid,
-                }, className), style: style }, dataAttributes, { children: jsxs("div", Object.assign({ className: "d-box-file-dropzone", ref: rootRef, onDragEnter: handleDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, onKeyDown: handleKeyDown }, (!props.disabled && !props.noKeyboard ? { tabIndex: 0 } : {}), { role: "presentation", children: [jsx("input", { type: "file", multiple: props.multiple, style: { display: 'none' }, ref: inputRef, disabled: props.disabled, onChange: handleFileSelect, onClick: (e) => e.stopPropagation(), tabIndex: -1, accept: acceptAttr }), icon && iconProp !== false && (jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })), jsx("div", { className: "d-box-content", children: typeof children === 'function'
+                }, className), style: style }, dataAttributes, { children: jsxs("div", Object.assign({ className: "d-box-file-dropzone", ref: rootRef, onDragEnter: handleDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, onKeyDown: handleKeyDown }, (!props.disabled && !props.noKeyboard ? { tabIndex: 0 } : {}), { role: "presentation", children: [jsx("input", { type: "file", multiple: props.multiple, style: { display: 'none' }, ref: inputRef, disabled: props.disabled, onChange: handleFileSelect, onClick: (e) => e.stopPropagation(), tabIndex: -1, accept: acceptAttr }), icon && iconProp !== false && (jsx(DIcon, { icon: icon, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle })), jsx("div", { className: "d-box-content", children: typeof children === 'function'
                                 ? children(openFileDialog)
                                 : children || (jsx("p", { className: "d-box-file-empty-text", children: "Drag and drop some files here, or click to select files" })) })] })) })), !!files.length && (jsx("ul", { className: "d-box-files", children: files.map((file, index) => (jsx(ForwardedDInput, { value: file.name, iconStart: "Paperclip", iconEnd: "Trash", readOnly: true, onIconEndClick: () => handleRemoveFile(index) }, `${file.name} ${index}`))) }))] }));
 }
 
 const DButton = forwardRef((props, ref) => {
     const { color = 'primary', size, variant = 'solid', text, children, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, loading = false, loadingText, loadingAriaLabel, disabled = false, className, style, dataAttributes, onClick, type = 'button', target, rel, href, 'aria-label': ariaLabelProp } = props, rest = __rest(props, ["color", "size", "variant", "text", "children", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartMaterialStyle", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndMaterialStyle", "loading", "loadingText", "loadingAriaLabel", "disabled", "className", "style", "dataAttributes", "onClick", "type", "target", "rel", "href", 'aria-label']);
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     // Responsive size resolution using useResponsiveProp
     const { responsivePropValue } = useResponsiveProp(true);
     const resolvedSize = useMemo(() => {
@@ -1164,7 +1332,7 @@ const DButton = forwardRef((props, ref) => {
                     ref.current = node;
             }, className: classNames(classes, className), style: Object.assign(Object.assign({}, style), (loading && buttonWidth
                 ? { minWidth: `${buttonWidth}px` }
-                : undefined)), "aria-label": ariaLabel, "aria-busy": loading, "aria-disabled": isDisabled, onClick: handleClick }, dataAttributes, { children: [loading && (jsxs("span", { className: "btn-loading", children: [jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxs(Fragment, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), content, iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }))] }))] })));
+                : undefined)), "aria-label": ariaLabel, "aria-busy": loading, "aria-disabled": isDisabled, onClick: handleClick }, dataAttributes, { children: [loading && (jsxs("span", { className: "btn-loading", children: [jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxs(Fragment, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass !== null && iconStartFamilyClass !== void 0 ? iconStartFamilyClass : familyClass, familyPrefix: iconStartFamilyPrefix !== null && iconStartFamilyPrefix !== void 0 ? iconStartFamilyPrefix : familyPrefix, materialStyle: iconStartMaterialStyle !== null && iconStartMaterialStyle !== void 0 ? iconStartMaterialStyle : materialStyle })), content, iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle }))] }))] })));
     }
     return (jsxs("button", Object.assign({ ref: (node) => {
             buttonRef.current = node;
@@ -1178,12 +1346,51 @@ const DButton = forwardRef((props, ref) => {
         // eslint-disable-next-line react/button-has-type
         type: type, className: classNames(classes, className), style: Object.assign(Object.assign({}, style), (loading && buttonWidth
             ? { minWidth: `${buttonWidth}px` }
-            : undefined)), disabled: isDisabled, "aria-label": ariaLabel, "aria-busy": loading, "aria-disabled": isDisabled, onClick: handleClick }, dataAttributes, rest, { children: [loading && (jsxs("span", { className: "btn-loading", children: [jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxs(Fragment, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), content, iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }))] }))] })));
+            : undefined)), disabled: isDisabled, "aria-label": ariaLabel, "aria-busy": loading, "aria-disabled": isDisabled, onClick: handleClick }, dataAttributes, rest, { children: [loading && (jsxs("span", { className: "btn-loading", children: [jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxs(Fragment, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass !== null && iconStartFamilyClass !== void 0 ? iconStartFamilyClass : familyClass, familyPrefix: iconStartFamilyPrefix !== null && iconStartFamilyPrefix !== void 0 ? iconStartFamilyPrefix : familyPrefix, materialStyle: iconStartMaterialStyle !== null && iconStartMaterialStyle !== void 0 ? iconStartMaterialStyle : materialStyle })), content, iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle }))] }))] })));
 });
 DButton.displayName = 'DButton';
 
+/**
+ * Controls already reported, keyed by kind and icon, so the same unlabelled one
+ * only warns once per page load however often it re-renders or however many
+ * instances exist.
+ */
+const warnedControls = new Set();
+/**
+ * Warns, once per icon and only outside production builds, that an icon-only
+ * button has no accessible name.
+ *
+ * The control has no text to fall back on and its icon is hidden from the
+ * accessibility tree, so the name has to be given explicitly. `aria-label` is
+ * the direct way; on a button `aria-labelledby` and `title` count too, since
+ * `rest` reaches the DOM there, while an anchor drops them — hence `kind`, so
+ * the advice matches what the element can actually receive.
+ *
+ * A legacy icon-font icon used to leak its ligature as the name by accident —
+ * never a good one, being unlocalised and often meaningless ("more_vert") — and
+ * no longer does, so the omission is now visible instead of silent.
+ *
+ * The `process.env.NODE_ENV` guard is what bundlers constant-fold, so the whole
+ * call — and this module — drops out of a consumer's production bundle.
+ */
+function warnMissingAccessibleName(icon, kind) {
+    const key = `${kind}:${icon}`;
+    if (warnedControls.has(key))
+        return;
+    warnedControls.add(key);
+    const alternatives = kind === 'button'
+        ? 'On a button, aria-labelledby or title work too. '
+        : 'A link renders from the href branch, which does not forward aria-labelledby or title, so aria-label is the only option. ';
+    // eslint-disable-next-line no-console
+    console.warn(`[Dynamic UI] DButtonIcon: the "${icon}" ${kind} has no accessible name. `
+        + 'Pass aria-label, since an icon-only control has no text to fall back on '
+        + `and its icon is hidden from the accessibility tree. ${alternatives}`
+        + 'It never appears in production builds.');
+}
+
 function DButtonIcon(_a) {
     var { id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, disabled = false, color = 'primary', loading = false, href, target, rel, stopPropagationEnabled = true, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, 'aria-label': ariaLabelProp } = _a, rest = __rest(_a, ["id", "icon", "size", "className", "variant", "state", "loadingAriaLabel", "iconMaterialStyle", "disabled", "color", "loading", "href", "target", "rel", "stopPropagationEnabled", "style", "iconFamilyClass", "iconFamilyPrefix", "dataAttributes", "onClick", 'aria-label']);
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     const generateClasses = useMemo(() => {
         const variantClass = !variant || variant === 'solid'
             ? `btn-${color}`
@@ -1204,14 +1411,23 @@ function DButtonIcon(_a) {
     const ariaLabel = useMemo(() => (loading
         ? loadingAriaLabel || ariaLabelProp
         : ariaLabelProp), [loading, loadingAriaLabel, ariaLabelProp]);
+    /**
+     * `aria-labelledby` and `title` also name a control, but they travel in `rest`,
+     * which only the button branch spreads — an anchor drops them, so there the
+     * button really is unnamed and the warning still applies.
+     */
+    const hasAccessibleName = useMemo(() => !!ariaLabel || (!href && (!!rest['aria-labelledby'] || !!rest.title)), [ariaLabel, href, rest]);
+    if (process.env.NODE_ENV !== 'production' && !hasAccessibleName) {
+        warnMissingAccessibleName(icon, href ? 'link' : 'button');
+    }
     if (href) {
         return (jsx("a", Object.assign({ id: id, href: href, target: target, rel: rel, className: classNames(generateClasses, className), style: style, onClick: clickHandler, "aria-label": ariaLabel, "aria-disabled": isDisabled }, dataAttributes, { children: loading
                 ? (jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }))
-                : (jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })) })));
+                : (jsx(DIcon, { icon: icon, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle })) })));
     }
     return (jsx("button", Object.assign({ className: classNames(generateClasses, className), style: style, disabled: state === 'disabled' || loading, onClick: clickHandler, "aria-label": ariaLabel }, dataAttributes, rest, { children: loading
             ? (jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }))
-            : (jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })) })));
+            : (jsx(DIcon, { icon: icon, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle })) })));
 }
 
 function DCardHeader({ className, style, children, }) {
@@ -1274,12 +1490,12 @@ function DChip({ color = 'primary', text, icon, iconFamilyClass, iconFamilyPrefi
         'd-chip': true,
         [`d-chip-${color}`]: !!color,
     }), [color]);
-    const { iconMap: { xLg, }, } = useDContext();
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { xLg, }, } = useDContext();
     const iconClose = useMemo(() => iconCloseProp || xLg, [iconCloseProp, xLg]);
-    return (jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, dataAttributes, { children: [icon && (jsx("div", { className: "d-chip-icon-container", children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle }) })), jsx("span", { children: text }), showClose && (jsx("button", { type: "button", className: "d-chip-icon-container", onClick: onClose, "aria-label": closeAriaLabel, children: jsx(DIcon, { icon: iconClose, familyClass: iconCloseFamilyClass, familyPrefix: iconCloseFamilyPrefix, materialStyle: iconCloseMaterialStyle }) }))] })));
+    return (jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, dataAttributes, { children: [icon && (jsx("div", { className: "d-chip-icon-container", children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle }) })), jsx("span", { children: text }), showClose && (jsx("button", { type: "button", className: "d-chip-icon-container", onClick: onClose, "aria-label": closeAriaLabel, children: jsx(DIcon, { icon: iconClose, familyClass: iconCloseFamilyClass !== null && iconCloseFamilyClass !== void 0 ? iconCloseFamilyClass : familyClass, familyPrefix: iconCloseFamilyPrefix !== null && iconCloseFamilyPrefix !== void 0 ? iconCloseFamilyPrefix : familyPrefix, materialStyle: iconCloseMaterialStyle !== null && iconCloseMaterialStyle !== void 0 ? iconCloseMaterialStyle : materialStyle }) }))] })));
 }
 
-function DCollapse({ id, className, style, Component, defaultCollapsed = true, onChange, children, iconOpen: iconOpenProp, iconClose: iconCloseProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle = false, dataAttributes, }) {
+function DCollapse({ id, className, style, Component, defaultCollapsed = true, onChange, children, iconOpen: iconOpenProp, iconClose: iconCloseProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, dataAttributes, }) {
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
     const onChangeCollapse = () => {
         setCollapsed((prev) => {
@@ -1293,10 +1509,10 @@ function DCollapse({ id, className, style, Component, defaultCollapsed = true, o
     useEffect(() => {
         setCollapsed(defaultCollapsed);
     }, [defaultCollapsed]);
-    const { iconMap: { chevronDown, chevronUp, }, } = useDContext();
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { chevronDown, chevronUp, }, } = useDContext();
     const iconOpen = useMemo(() => iconOpenProp || chevronDown, [chevronDown, iconOpenProp]);
     const iconClose = useMemo(() => iconCloseProp || chevronUp, [chevronUp, iconCloseProp]);
-    return (jsxs("div", Object.assign({ id: id, className: classNames('collapse-container', className), style: style }, dataAttributes, { children: [jsxs("button", { className: "collapse-button", type: "button", onClick: onChangeCollapse, children: [jsx("div", { className: "flex-grow-1", children: Component }), jsx(DIcon, { color: "primary", size: "1.25rem", icon: collapsed ? iconOpen : iconClose, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })] }), jsx("div", { className: classNames('collapse-body-wrapper', {
+    return (jsxs("div", Object.assign({ id: id, className: classNames('collapse-container', className), style: style }, dataAttributes, { children: [jsxs("button", { className: "collapse-button", type: "button", onClick: onChangeCollapse, children: [jsx("div", { className: "flex-grow-1", children: Component }), jsx(DIcon, { className: "collapse-icon", color: "primary", size: "1.25rem", icon: collapsed ? iconOpen : iconClose, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyle })] }), jsx("div", { className: classNames('collapse-body-wrapper', {
                     show: !collapsed,
                 }), children: jsx("div", { className: "collapse-body", children: children }) })] })));
 }
@@ -2087,9 +2303,9 @@ function DInputCheck(_a) {
     ]);
     useEffect(() => {
         if (innerRef.current) {
-            innerRef.current.indeterminate = Boolean(indeterminate);
+            innerRef.current.indeterminate = type === 'checkbox' && Boolean(indeterminate);
         }
-    }, [indeterminate]);
+    }, [indeterminate, type]);
     useEffect(() => {
         if (innerRef.current) {
             innerRef.current.checked = checked;
@@ -2282,10 +2498,18 @@ function DInputSelect({ id: idProp, name, label = '', className, style, options
                 }), children: [iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: iconStartClickHandler, disabled: disabled || loading, "aria-label": iconStartAriaLabel, children: iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), dynamicComponent, iconEnd && !loading && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: iconEndClickHandler, disabled: disabled || loading, "aria-label": iconEndAriaLabel, children: iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), loading && (jsx("div", { className: "input-group-text form-control-icon loading", children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 
-function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid = false, valid = false, readonly, className, style, dataAttributes, inputClassName, onChange, }) {
+function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid = false, valid = false, hint, readonly, className, style, dataAttributes, inputClassName, onChange, }) {
     const innerId = useId();
     const id = useMemo(() => idProp || innerId, [idProp, innerId]);
     const [internalIsChecked, setInternalIsChecked] = useState(checked);
+    const ariaDescribedby = useMemo(() => ([
+        !!hint && `${id}Hint`,
+    ]
+        .filter(Boolean)
+        .join(' ')), [
+        id,
+        hint,
+    ]);
     useEffect(() => {
         setInternalIsChecked(checked);
     }, [checked]);
@@ -2294,10 +2518,10 @@ function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, i
         setInternalIsChecked(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [onChange]);
-    return (jsxs("div", Object.assign({ className: classNames('form-check form-switch', className) }, dataAttributes, { children: [jsx("input", { id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', {
+    return (jsxs("div", Object.assign({ className: classNames('form-check form-switch', className) }, dataAttributes, { children: [jsx("input", Object.assign({ id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', {
                     'is-invalid': invalid,
                     'is-valid': valid,
-                }, inputClassName), style: style, type: "checkbox", role: "switch", checked: internalIsChecked, disabled: disabled, "aria-label": ariaLabel }), label && (jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] })));
+                }, inputClassName), style: style, type: "checkbox", role: "switch", checked: internalIsChecked, disabled: disabled, "aria-label": ariaLabel }, ariaDescribedby && { 'aria-describedby': ariaDescribedby })), label && (jsx("label", { className: "form-check-label", htmlFor: id, children: label })), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 
 function DInputRange(_a, ref) {
@@ -2338,6 +2562,7 @@ const ForwardedDInputRange = forwardRef(DInputRange);
 ForwardedDInputRange.displayName = 'DInputRange';
 
 function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }) {
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     const Tag = useMemo(() => {
         if (href) {
             return 'a';
@@ -2366,7 +2591,7 @@ function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href,
         }
         return Object.assign(Object.assign({}, active && { 'aria-current': true }), disabled && { 'aria-disabled': true });
     }, [Tag, active, disabled]);
-    return (jsxs(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, Tag === 'a' && href && { href }, onClick && { onClick }, ariaAttributes, dataAttributes, Tag === 'button' && { type: 'button' }, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), children, iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle, className: "ms-auto" }))] })));
+    return (jsxs(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, Tag === 'a' && href && { href }, onClick && { onClick }, ariaAttributes, dataAttributes, Tag === 'button' && { type: 'button' }, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass !== null && iconStartFamilyClass !== void 0 ? iconStartFamilyClass : familyClass, familyPrefix: iconStartFamilyPrefix !== null && iconStartFamilyPrefix !== void 0 ? iconStartFamilyPrefix : familyPrefix, materialStyle: iconStartMaterialStyle !== null && iconStartMaterialStyle !== void 0 ? iconStartMaterialStyle : materialStyle })), children, iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle, className: "ms-auto" }))] })));
 }
 
 function DListGroup({ as = 'ul', numbered, flush, horizontal, children, className, style, dataAttributes, }) {
@@ -2393,10 +2618,11 @@ var DListGroup$1 = Object.assign(DListGroup, {
     Item: DListGroupItem,
 });
 
-function DModalHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, materialStyle = false, }) {
-    const { iconMap: { xLg, }, } = useDContext();
+function DModalHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, iconMaterialStyle, materialStyle: materialStyleProp, }) {
+    var _a;
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { xLg, }, } = useDContext();
     const icon = useMemo(() => iconProp || xLg, [iconProp, xLg]);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: classNames('modal-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }), jsx("div", { className: "d-modal-separator" })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: classNames('modal-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: (_a = iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyleProp) !== null && _a !== void 0 ? _a : materialStyle }) }))] }), jsx("div", { className: "d-modal-separator" })] }));
 }
 
 function DModalBody({ children, className, style, }) {
@@ -2437,10 +2663,11 @@ var DModal$1 = Object.assign(DModal, {
     Footer: DModalFooter,
 });
 
-function DOffcanvasHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, materialStyle = false, }) {
-    const { iconMap: { xLg, }, } = useDContext();
+function DOffcanvasHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, iconMaterialStyle, materialStyle: materialStyleProp, }) {
+    var _a;
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { xLg, }, } = useDContext();
     const icon = useMemo(() => iconProp || xLg, [iconProp, xLg]);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: classNames('offcanvas-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }), jsx("div", { className: "d-offcanvas-separator" })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: classNames('offcanvas-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass !== null && iconFamilyClass !== void 0 ? iconFamilyClass : familyClass, familyPrefix: iconFamilyPrefix !== null && iconFamilyPrefix !== void 0 ? iconFamilyPrefix : familyPrefix, materialStyle: (_a = iconMaterialStyle !== null && iconMaterialStyle !== void 0 ? iconMaterialStyle : materialStyleProp) !== null && _a !== void 0 ? _a : materialStyle }) }))] }), jsx("div", { className: "d-offcanvas-separator" })] }));
 }
 
 function DOffcanvasBody({ children, className, style, }) {
@@ -2581,8 +2808,8 @@ function DProgress({ className, style, currentValue, minValue = 0, maxValue = 10
     return (jsx("div", Object.assign({ className: classNames('progress', className), style: Object.assign({ height }, style) }, dataAttributes, { children: jsx("div", { className: classNames(generateClasses), role: "progressbar", "aria-label": "Progress bar", style: { width: formatProgress }, "aria-valuenow": currentValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, children: !hideCurrentValue && formatProgress }) })));
 }
 
-function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle = false, vertical = false, completed, alignStart = false, className, style, }) {
-    const { iconMap: { check, }, } = useDContext();
+function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical = false, completed, alignStart = false, className, style, }) {
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { check, }, } = useDContext();
     const icon = useMemo(() => iconSuccessProp || check, [check, iconSuccessProp]);
     if (currentStep < 1 || currentStep > options.length) {
         throw new Error('Current step should be in the range from 1 to options length');
@@ -2597,7 +2824,7 @@ function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSu
             }), children: [jsx("div", { className: "d-step-value", children: jsxs("div", { className: classNames({
                             'd-step-icon-container': true,
                             'd-step-check': value < currentStep || completed,
-                        }), children: [((value < currentStep) || completed) && (jsx(DIcon, { icon: icon, familyClass: iconSuccessFamilyClass, familyPrefix: iconSuccessFamilyPrefix, materialStyle: iconSuccessMaterialStyle, className: "d-step-icon" })), value] }) }), jsxs("div", { className: "d-step-text-container", children: [jsx("div", { className: "d-step-label", children: label }), description && (jsx("div", { className: "d-step-description", children: description }))] })] }, value))) }));
+                        }), children: [((value < currentStep) || completed) && (jsx(DIcon, { icon: icon, familyClass: iconSuccessFamilyClass !== null && iconSuccessFamilyClass !== void 0 ? iconSuccessFamilyClass : familyClass, familyPrefix: iconSuccessFamilyPrefix !== null && iconSuccessFamilyPrefix !== void 0 ? iconSuccessFamilyPrefix : familyPrefix, materialStyle: iconSuccessMaterialStyle !== null && iconSuccessMaterialStyle !== void 0 ? iconSuccessMaterialStyle : materialStyle, className: "d-step-icon" })), value] }) }), jsxs("div", { className: "d-step-text-container", children: [jsx("div", { className: "d-step-label", children: label }), description && (jsx("div", { className: "d-step-description", children: description }))] })] }, value))) }));
 }
 
 function DStepper$1({ options, currentStep, className, style, }) {
@@ -2630,13 +2857,20 @@ function DStepper$1({ options, currentStep, className, style, }) {
     return (jsxs("div", { className: classNames('d-stepper', className), style: style, children: [jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "d-step-label", children: currentOption.label }), jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
 }
 
-function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle = false, vertical = false, breakpoint = 'lg', className, completed = false, style, dataAttributes, }) {
-    return (jsxs("div", Object.assign({ className: className, style: style }, dataAttributes, { children: [jsx("div", { className: classNames('d-stepper-mobile', `d-block d-${breakpoint}-none`), children: jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsx("div", { className: classNames('d-stepper-desktop', `d-none d-${breakpoint}-block`), children: jsx(DStepper$2, { options: options, currentStep: currentStep, vertical: vertical, iconSuccess: iconSuccess, iconSuccessFamilyClass: iconSuccessFamilyClass, iconSuccessFamilyPrefix: iconSuccessFamilyPrefix, iconSuccessMaterialStyle: iconSuccessMaterialStyle, completed: completed }) })] })));
+function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical = false, breakpoint = 'lg', className, completed = false, style, dataAttributes, }) {
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
+    return (jsxs("div", Object.assign({ className: className, style: style }, dataAttributes, { children: [jsx("div", { className: classNames('d-stepper-mobile', `d-block d-${breakpoint}-none`), children: jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsx("div", { className: classNames('d-stepper-desktop', `d-none d-${breakpoint}-block`), children: jsx(DStepper$2, { options: options, currentStep: currentStep, vertical: vertical, iconSuccess: iconSuccess, iconSuccessFamilyClass: iconSuccessFamilyClass !== null && iconSuccessFamilyClass !== void 0 ? iconSuccessFamilyClass : familyClass, iconSuccessFamilyPrefix: iconSuccessFamilyPrefix !== null && iconSuccessFamilyPrefix !== void 0 ? iconSuccessFamilyPrefix : familyPrefix, iconSuccessMaterialStyle: iconSuccessMaterialStyle !== null && iconSuccessMaterialStyle !== void 0 ? iconSuccessMaterialStyle : materialStyle, completed: completed }) })] })));
 }
 
 const ARROW_WIDTH = 8;
 const ARROW_HEIGHT = 4;
 const GAP$1 = 2;
+/**
+ * Tooltip is an abstraction component that wraps any element (`Component`) and displays
+ * floating contextual content (`children`) positioned relative to it using Floating UI.
+ * Use it to add short, non-critical hints or descriptions triggered by hover, focus, or
+ * click, without altering the surrounding layout.
+ */
 function DTooltip({ className, childrenClassName, style, offSet = ARROW_HEIGHT + GAP$1, padding, withFocus = false, withClick = false, withHover = true, open = false, placement = 'top', size, Component, children, }) {
     const [isOpen, setIsOpen] = useState(open);
     const arrowRef = useRef(null);
@@ -2675,7 +2909,7 @@ function DTooltip({ className, childrenClassName, style, offSet = ARROW_HEIGHT +
 function DTimeline({ className, style, dataAttributes, items, }) {
     return (jsx("div", Object.assign({ style: style, className: classNames('d-timeline', className) }, dataAttributes, { children: items.map((item, index) => (jsxs("div", { className: classNames('d-timeline-item', {
                 [`d-timeline-item-${item.status}`]: item.status,
-            }), children: [jsx("div", { className: "d-timeline-item-connector" }), jsx("div", { className: "d-timeline-item-icon", children: jsx(DIcon, { icon: item.icon || 'check', size: "1rem" }) }), jsxs("div", { className: "d-timeline-item-content", children: [jsx("div", { className: "d-timeline-item-title", children: item.title }), item.description && jsx("div", { className: "d-timeline-item-description", children: item.description }), item.time && jsx("div", { className: "d-timeline-item-time", children: item.time }), item.children] })] }, index))) })));
+            }), children: [jsx("div", { className: "d-timeline-item-connector" }), jsx("div", { className: "d-timeline-item-icon", children: jsx(DIcon, { icon: item.icon || 'Check', size: "1rem" }) }), jsxs("div", { className: "d-timeline-item-content", children: [jsx("div", { className: "d-timeline-item-title", children: item.title }), item.description && jsx("div", { className: "d-timeline-item-description", children: item.description }), item.time && jsx("div", { className: "d-timeline-item-time", children: item.time }), item.children] })] }, index))) })));
 }
 
 const TabContext = createContext(undefined);
@@ -2919,11 +3153,132 @@ function validatePhoneNumber(phone) {
     }
 }
 
+const SAFE_SCHEMES = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+/**
+ * Characters the URL parser drops before resolving a URL, so they cannot be used to hide a
+ * scheme-relative prefix or a dangerous scheme (e.g. `/<TAB>/evil.com`, `java<TAB>script:`).
+ */
+const IGNORED_CHARS$1 = /[\t\n\r]/g;
+/**
+ * Two leading separators in any combination. Browsers treat a leading `\` exactly like a
+ * leading `/`, so `//`, `/\`, `\/` and `\\` all resolve to a scheme-relative URL.
+ */
+const SCHEME_RELATIVE = /^[/\\]{2}/;
+const LEADING_SEPARATOR = /^[/\\]/;
+/**
+ * Validates a `href` value and returns it only if it is safe to render as a link,
+ * preventing XSS through unsafe URL schemes and scheme-relative URLs.
+ *
+ * Before validating, the value is trimmed and every tab, line feed and carriage return is
+ * removed, because the URL parser ignores those characters too and they would otherwise
+ * hide an unsafe value from the checks below.
+ *
+ * A `href` is considered safe when it is either:
+ * - An absolute path starting with a single separator (e.g. `/accounts/42`). A leading `\`
+ *   is normalized to `/` in the returned value, since that is how the browser resolves it.
+ * - A URL using one of the allowed schemes: `http:`, `https:`, `mailto:`, `tel:`.
+ *
+ * A `href` is rejected (returns `undefined`) when it is:
+ * - Empty or made only of whitespace/ignored characters (`''`, `'   '`).
+ * - Scheme-relative (starts with two separators, e.g. `//evil.com`, `/\evil.com`,
+ *   `/<TAB>/evil.com`), since the browser would resolve it using the current protocol and it
+ *   can be used to redirect to an attacker-controlled host.
+ * - Using a disallowed/dangerous scheme, such as `javascript:` or `data:`
+ *   (e.g. `javascript:alert(1)`, `data:text/html,<script>...</script>`).
+ * - Not parseable as an absolute URL and not an absolute path, such as bare fragments
+ *   (`#anchor`) or scheme-less relative paths (`relative/path`). These cannot be validated
+ *   against `SAFE_SCHEMES`, so they are rejected rather than assumed safe.
+ *
+ * @param href - The raw URL or path to validate, typically coming from user input,
+ * a CMS, or an external API.
+ * @returns The sanitized `href` when safe, `undefined` otherwise.
+ *
+ * @example
+ * sanitizeHref('/accounts/42'); // '/accounts/42'
+ * sanitizeHref('https://example.com'); // 'https://example.com'
+ * sanitizeHref('mailto:test@example.com'); // 'mailto:test@example.com'
+ * sanitizeHref('//evil.com'); // undefined
+ * sanitizeHref('/\\evil.com'); // undefined
+ * sanitizeHref('javascript:alert(1)'); // undefined
+ */
+function sanitizeHref(href) {
+    const normalized = href.trim().replace(IGNORED_CHARS$1, '');
+    if (!normalized)
+        return undefined;
+    if (SCHEME_RELATIVE.test(normalized))
+        return undefined;
+    if (LEADING_SEPARATOR.test(normalized))
+        return `/${normalized.slice(1)}`;
+    try {
+        const { protocol } = new URL(normalized);
+        return SAFE_SCHEMES.has(protocol) ? normalized : undefined;
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+
+/**
+ * Characters the URL parser drops before resolving a URL, so they cannot be used to hide a
+ * scheme-relative prefix (e.g. `/<TAB>/evil.com`).
+ */
+const IGNORED_CHARS = /[\t\n\r]/g;
+/**
+ * Leading separators. Browsers treat a leading `\` exactly like a leading `/`, so both have
+ * to be stripped to prevent scheme-relative URLs (`//evil.com`, `/\evil.com`, `\\evil.com`).
+ */
+const LEADING_SEPARATORS = /^[/\\]+/;
+/**
+ * Builds an internal URL from a `path` and a set of query `params`, normalizing leading
+ * separators to prevent scheme-relative URLs (e.g. `//accounts` and `/\accounts` both become
+ * `/accounts`).
+ *
+ * The `path` is trimmed and every tab, line feed and carriage return is removed before
+ * building the result, because the URL parser ignores those characters too and they would
+ * otherwise hide a scheme-relative prefix (`/<TAB>/evil.com` resolves to `//evil.com`).
+ *
+ * Handles the special case where `path` is the literal string `'#'`, which happens when
+ * a Liquid template variable used as a link target is left unconfigured; in that case the
+ * params are ignored and `'#'` is returned as-is instead of building a broken URL.
+ *
+ * @param path - The path to build the URL from. Leading separators are stripped before
+ * building the result (`/accounts`, `//accounts` and `\accounts` are all treated as `accounts`).
+ * @param params - Key/value pairs serialized as the query string.
+ * @returns The resulting URL:
+ * - `'#'` when `path` normalizes to `'#'` (`'#'`, `'/#'`), ignoring the params.
+ * - `'/'` when `path` is empty and there are no params.
+ * - `'/?<query>'` when `path` is empty and there are params.
+ * - `'<path>'` or `'<path>?<query>'` when `path` starts with `#`, since a fragment must not be
+ *   prefixed with `/` (it would navigate away from the current document).
+ * - `'/<path>'` or `'/<path>?<query>'` otherwise.
+ *
+ * @example
+ * buildUrl('accounts', { account_id: '42' }); // '/accounts?account_id=42'
+ * buildUrl('//accounts', {}); // '/accounts'
+ * buildUrl('#', { account_id: '42' }); // '#'
+ * buildUrl('#accounts', { account_id: '42' }); // '#accounts?account_id=42'
+ * buildUrl('', { tab: 'movimientos' }); // '/?tab=movimientos'
+ */
+function buildUrl(path, params) {
+    const normalizedPath = path
+        .trim()
+        .replace(IGNORED_CHARS, '')
+        .replace(LEADING_SEPARATORS, '');
+    if (normalizedPath === '#')
+        return '#';
+    const query = new URLSearchParams(Object.entries(params).map(([key, value]) => [key, String(value)])).toString();
+    if (normalizedPath === '')
+        return query ? `/?${query}` : '/';
+    const prefix = normalizedPath.startsWith('#') ? '' : '/';
+    return `${prefix}${normalizedPath}${query ? `?${query}` : ''}`;
+}
+
 function DInputPhone(_a, ref) {
     var { id: idProp, style, className, label = '', disabled = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, iconEndMaterialStyle, hint, size, invalid = false, valid = false, floatingLabel = false, inputEnd, value, placeholder = '', dataAttributes, onChange, onIconEndClick, countrySelectorProps, filteredCountries, defaultCountry = 'cl' } = _a, inputProps = __rest(_a, ["id", "style", "className", "label", "disabled", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "iconEnd", "iconEndDisabled", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "iconEndMaterialStyle", "hint", "size", "invalid", "valid", "floatingLabel", "inputEnd", "value", "placeholder", "dataAttributes", "onChange", "onIconEndClick", "countrySelectorProps", "filteredCountries", "defaultCountry"]);
     const innerRef = useProvidedRefOrCreate(ref);
     const innerId = useId();
     const id = useMemo(() => idProp || innerId, [idProp, innerId]);
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     const handleOnIconEndClick = useCallback(() => {
         onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(value);
     }, [onIconEndClick, value]);
@@ -2997,7 +3352,7 @@ function DInputPhone(_a, ref) {
                     [`input-group-${size}`]: !!size,
                     'input-group': true,
                     'has-validation': invalid || valid,
-                }), children: [jsx(CountrySelector, Object.assign({}, countrySelectorProps, { selectedCountry: country.iso2, onSelect: ({ iso2 }) => setCountry(iso2), countries: countries, disabled: disabled || loading, className: classNames('input-group-text', countrySelectorProps === null || countrySelectorProps === void 0 ? void 0 : countrySelectorProps.className) })), dynamicComponent, (iconEnd && !loading) && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading || iconEndDisabled, "aria-label": iconEndAriaLabel, tabIndex: onIconEndClick ? iconEndTabIndex : -1, children: jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }) })), loading && (jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
+                }), children: [jsx(CountrySelector, Object.assign({}, countrySelectorProps, { selectedCountry: country.iso2, onSelect: ({ iso2 }) => setCountry(iso2), countries: countries, disabled: disabled || loading, className: classNames('input-group-text', countrySelectorProps === null || countrySelectorProps === void 0 ? void 0 : countrySelectorProps.className) })), dynamicComponent, (iconEnd && !loading) && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading || iconEndDisabled, "aria-label": iconEndAriaLabel, tabIndex: onIconEndClick ? iconEndTabIndex : -1, children: jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle }) })), loading && (jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 const ForwardedDInputPhone = forwardRef(DInputPhone);
 ForwardedDInputPhone.displayName = 'DInputPhone';
@@ -3599,5 +3954,58 @@ function DConfirmModalContainer({ nodeId }) {
     return createPortal(jsx(AnimatePresence, { children: entries.map((entry) => (jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { delay: 0.3 } }, transition: { duration: 0.15, ease: 'linear' }, children: [jsx("div", { className: "backdrop backdrop-confirm-modal", onClick: entry.onCloseAction, role: "presentation" }), jsx(DConfirmModalUI, { entry: entry })] }, entry.id))) }), portalNode);
 }
 
-export { DAlert, DAvatar, DBadge, DBox, DBoxFile, DButton, DButtonIcon, DCard$1 as DCard, DCardBody, DCardFooter, DCardHeader, DCarousel$1 as DCarousel, DCarouselSlide, DChip, DCollapse, DConfirmModalContainer, DContext, DContextProvider, DCreditCard, DCurrencyText, DDataStateWrapper, DDatePicker, DDropdown, DErrorBoundary, DIcon, DIconBase, ForwardedDInput as DInput, DInputCheck, ForwardedDInputCounter as DInputCounter, ForwardedDInputCurrency as DInputCurrency, ForwardedDInputMask as DInputMask, ForwardedDInputPassword as DInputPassword, ForwardedDInputPhone as DInputPhone, DInputPin, ForwardedDInputRange as DInputRange, ForwardedDInputSearch as DInputSearch, DInputSelect, DInputSwitch, DLayout$1 as DLayout, DLayoutPane, DListGroup$1 as DListGroup, DListGroupItem, DModal$1 as DModal, DModalBody, DModalFooter, DModalHeader, DOffcanvas$1 as DOffcanvas, DOffcanvasBody, DOffcanvasFooter, DOffcanvasHeader, DOtp, DPaginator, DPasswordStrengthMeter, DPopover, DProgress, DSelect$1 as DSelect, DStepper, DStepper$2 as DStepperDesktop, DStepper$1 as DStepperMobile, DTabContent, DTabs$1 as DTabs, DTimeline, DToast$1 as DToast, DToastContainer, DTooltip, DVoucher, EmptyState, ErrorState, LoadingState, changeQueryString, checkMediaQuery, configureI8n as configureI18n, formatCurrency, getCssVariable, getQueryString, subscribeToMediaQuery, useConfirmModal, useCountdown, useDContext, useDPortalContext, useDToast, useDisableBodyScrollEffect, useDisableInputWheel, useFormatCurrency, useInputCurrency, useItemSelection, useMediaBreakpointUpLg, useMediaBreakpointUpMd, useMediaBreakpointUpSm, useMediaBreakpointUpXl, useMediaBreakpointUpXs, useMediaBreakpointUpXxl, useMediaQuery, useOtp, useProvidedRefOrCreate, useScreenshot, useScreenshotDownload, useScreenshotWebShare, useStackState, useTabContext, validatePhoneNumber };
+/**
+ * The lucide-react icons Dynamic UI renders on its own, without the consumer
+ * asking for them by name.
+ *
+ * Two sources feed this list:
+ *
+ * - The `iconMap` defaults of `DContextProvider` (`src/contexts/DContext.tsx`),
+ *   used by close buttons, chevrons, alert states, input adornments and the
+ *   stepper checkmark.
+ * - Names hard-coded in component JSX or in a prop default, such as
+ *   `DDropdown`'s toggle or `DVoucher`'s action buttons.
+ *
+ * Any bundler-level optimisation that narrows lucide-react down to the icons a
+ * widget actually uses must keep this set, or Dynamic UI components break for
+ * reasons the widget author cannot see in their own source. That is why the
+ * list ships in the package as `dist/icons-core.json` and is exported here.
+ *
+ * `src/icons/coreIcons.spec.ts` scans `src/components/**` and fails when an
+ * internally used icon name is missing from this list or absent from
+ * lucide-react, so the two cannot drift apart.
+ */
+const CORE_LUCIDE_ICONS = [
+    // iconMap defaults — src/contexts/DContext.tsx
+    'AlertCircle',
+    'AlertTriangle',
+    'Calendar',
+    'Check',
+    'CheckCircle',
+    'ChevronDown',
+    'ChevronLeft',
+    'ChevronRight',
+    'ChevronUp',
+    'Eye',
+    'EyeOff',
+    'Info',
+    'Minus',
+    'Plus',
+    'Search',
+    'Upload',
+    'X',
+    // Hard-coded in component JSX or in a prop default
+    'Circle',
+    'CircleCheck',
+    'CircleCheckBig',
+    'Download',
+    'FileText',
+    'MoreVertical',
+    'Paperclip',
+    'RefreshCw',
+    'Share2',
+    'Trash',
+];
+
+export { CORE_LUCIDE_ICONS, DAlert, DAvatar, DBadge, DBox, DBoxFile, DButton, DButtonIcon, DCard$1 as DCard, DCardBody, DCardFooter, DCardHeader, DCarousel$1 as DCarousel, DCarouselSlide, DChip, DCollapse, DConfirmModalContainer, DContext, DContextProvider, DCreditCard, DCurrencyText, DDataStateWrapper, DDatePicker, DDropdown, DErrorBoundary, DIcon, DIconBase, ForwardedDInput as DInput, DInputCheck, ForwardedDInputCounter as DInputCounter, ForwardedDInputCurrency as DInputCurrency, ForwardedDInputMask as DInputMask, ForwardedDInputPassword as DInputPassword, ForwardedDInputPhone as DInputPhone, DInputPin, ForwardedDInputRange as DInputRange, ForwardedDInputSearch as DInputSearch, DInputSelect, DInputSwitch, DLayout$1 as DLayout, DLayoutPane, DListGroup$1 as DListGroup, DListGroupItem, DModal$1 as DModal, DModalBody, DModalFooter, DModalHeader, DOffcanvas$1 as DOffcanvas, DOffcanvasBody, DOffcanvasFooter, DOffcanvasHeader, DOtp, DPaginator, DPasswordStrengthMeter, DPopover, DProgress, DSelect$1 as DSelect, DStepper, DStepper$2 as DStepperDesktop, DStepper$1 as DStepperMobile, DTabContent, DTabs$1 as DTabs, DTimeline, DToast$1 as DToast, DToastContainer, DTooltip, DVoucher, EmptyState, ErrorState, LoadingState, buildUrl, changeQueryString, checkMediaQuery, configureI8n as configureI18n, formatCurrency, getCssVariable, getQueryString, sanitizeHref, subscribeToMediaQuery, useConfirmModal, useCountdown, useDContext, useDPortalContext, useDToast, useDisableBodyScrollEffect, useDisableInputWheel, useFormatCurrency, useInputCurrency, useItemSelection, useMediaBreakpointUpLg, useMediaBreakpointUpMd, useMediaBreakpointUpSm, useMediaBreakpointUpXl, useMediaBreakpointUpXs, useMediaBreakpointUpXxl, useMediaQuery, useOtp, useProvidedRefOrCreate, useScreenshot, useScreenshotDownload, useScreenshotWebShare, useStackState, useTabContext, validatePhoneNumber };
 //# sourceMappingURL=index.esm.js.map