@dynamic-framework/ui-react 2.7.0 → 2.9.0

package/dist/index.js

@@ -583,12 +583,12 @@ function DIcon(_a) {
     return (jsxRuntime.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)));
 }
 
-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 = React.useMemo(() => iconProp || alert[color], [alert, iconProp, color]);
     const iconClose = React.useMemo(() => (iconCloseProp || xLg), [iconCloseProp, xLg]);
     const generateClasses = React.useMemo(() => (Object.assign({ alert: true, [`alert-${color}`]: true, 'fade show': !!showClose }, className && { [className]: true })), [color, showClose, className]);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames(generateClasses), style: style, role: "alert", id: id }, dataAttributes, { children: [icon && (jsxRuntime.jsx(DIcon, { className: "alert-icon", icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })), jsxRuntime.jsx("div", { className: "alert-text", children: children }), showClose && (jsxRuntime.jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: iconClose, familyClass: iconCloseFamilyClass, familyPrefix: iconCloseFamilyPrefix, materialStyle: iconCloseMaterialStyle }) }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames(generateClasses), style: style, role: "alert", id: id }, dataAttributes, { children: [icon && (jsxRuntime.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 })), jsxRuntime.jsx("div", { className: "alert-text", children: children }), showClose && (jsxRuntime.jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.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, }) {
@@ -610,6 +610,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 = React.useMemo(() => {
@@ -626,7 +627,7 @@ function DBadge(props) {
         'rounded-pill': !!rounded,
         [`badge-${resolvedSize}`]: !!resolvedSize,
     }), [rounded, soft, color, resolvedSize]);
-    return (jsxRuntime.jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, id && { id }, dataAttributes, { children: [iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })), jsxRuntime.jsx("span", { children: text }), iconEnd && (jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle }))] })));
+    return (jsxRuntime.jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, id && { id }, dataAttributes, { children: [iconStart && (jsxRuntime.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 })), jsxRuntime.jsx("span", { children: text }), iconEnd && (jsxRuntime.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, }) {
@@ -658,6 +659,7 @@ function DInput(_a, ref) {
     const inputRef = useProvidedRefOrCreate(ref);
     const innerId = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     const handleOnChange = React.useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value);
     }, [onChange]);
@@ -720,7 +722,7 @@ function DInput(_a, ref) {
                     [`input-group-${size}`]: !!size,
                     'input-group': true,
                     'has-validation': invalid || valid,
-                }), children: [!!inputStart && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}InputStart`, children: inputStart })), iconStart && (onIconStartClick ? (jsxRuntime.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: jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle }) })) : (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}Start`, "aria-hidden": "true", tabIndex: -1, children: jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle }) }))), dynamicComponent, (iconEnd && !loading) && (onIconEndClick ? (jsxRuntime.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: jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }) })) : (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}End`, "aria-hidden": "true", tabIndex: -1, children: jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }) }))), loading && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", "data-testid": "loading-spinner", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
+                }), children: [!!inputStart && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}InputStart`, children: inputStart })), iconStart && (onIconStartClick ? (jsxRuntime.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: jsxRuntime.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 }) })) : (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}Start`, "aria-hidden": "true", tabIndex: -1, children: jsxRuntime.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 ? (jsxRuntime.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: jsxRuntime.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 }) })) : (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}End`, "aria-hidden": "true", tabIndex: -1, children: jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", "data-testid": "loading-spinner", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 const ForwardedDInput = React.forwardRef(DInput);
 ForwardedDInput.displayName = 'DInput';
@@ -1116,7 +1118,7 @@ function useDBoxFile(props) {
 
 function DBoxFile(_a) {
     var { icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, children, className, style, dataAttributes } = _a, props = tslib.__rest(_a, ["icon", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "children", "className", "style", "dataAttributes"]);
-    const { iconMap: { upload } } = useDContext();
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { upload }, } = useDContext();
     const icon = React.useMemo(() => iconProp || upload, [iconProp, upload]);
     const { inputRef, rootRef, isDragValid, isDragInvalid, acceptAttr, files, handleFileSelect, handleDrop, handleDragEnter, handleDragLeave, handleClick, handleKeyDown, handleRemoveFile, openFileDialog, } = useDBoxFile(props);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("section", Object.assign({ className: classNames('d-box-file', {
@@ -1124,13 +1126,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: jsxRuntime.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: [jsxRuntime.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 && (jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })), jsxRuntime.jsx("div", { className: "d-box-content", children: typeof children === 'function'
+                }, className), style: style }, dataAttributes, { children: jsxRuntime.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: [jsxRuntime.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 && (jsxRuntime.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 })), jsxRuntime.jsx("div", { className: "d-box-content", children: typeof children === 'function'
                                 ? children(openFileDialog)
-                                : children || (jsxRuntime.jsx("p", { className: "text-center m-0", children: "Drag and drop some files here, or click to select files" })) })] })) })), !!files.length && (jsxRuntime.jsx("ul", { className: "d-box-files", children: files.map((file, index) => (jsxRuntime.jsx(ForwardedDInput, { value: file.name, iconStart: "Paperclip", iconEnd: "Trash", readOnly: true, onIconEndClick: () => handleRemoveFile(index) }, `${file.name} ${index}`))) }))] }));
+                                : children || (jsxRuntime.jsx("p", { className: "d-box-file-empty-text", children: "Drag and drop some files here, or click to select files" })) })] })) })), !!files.length && (jsxRuntime.jsx("ul", { className: "d-box-files", children: files.map((file, index) => (jsxRuntime.jsx(ForwardedDInput, { value: file.name, iconStart: "Paperclip", iconEnd: "Trash", readOnly: true, onIconEndClick: () => handleRemoveFile(index) }, `${file.name} ${index}`))) }))] }));
 }
 
 const DButton = React.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 = tslib.__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 = React.useMemo(() => {
@@ -1184,7 +1187,7 @@ const DButton = React.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 && (jsxRuntime.jsxs("span", { className: "btn-loading", children: [jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsxRuntime.jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), content, iconEnd && (jsxRuntime.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 && (jsxRuntime.jsxs("span", { className: "btn-loading", children: [jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsxRuntime.jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconStart && (jsxRuntime.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 && (jsxRuntime.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 (jsxRuntime.jsxs("button", Object.assign({ ref: (node) => {
             buttonRef.current = node;
@@ -1198,12 +1201,13 @@ const DButton = React.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 && (jsxRuntime.jsxs("span", { className: "btn-loading", children: [jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsxRuntime.jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), content, iconEnd && (jsxRuntime.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 && (jsxRuntime.jsxs("span", { className: "btn-loading", children: [jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", "aria-hidden": "true" }), loadingText && jsxRuntime.jsx("span", { role: "status", children: loadingText })] })), !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconStart && (jsxRuntime.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 && (jsxRuntime.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';
 
 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 = tslib.__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 = React.useMemo(() => {
         const variantClass = !variant || variant === 'solid'
             ? `btn-${color}`
@@ -1227,11 +1231,11 @@ function DButtonIcon(_a) {
     if (href) {
         return (jsxRuntime.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
                 ? (jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }))
-                : (jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })) })));
+                : (jsxRuntime.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 (jsxRuntime.jsx("button", Object.assign({ className: classNames(generateClasses, className), style: style, disabled: state === 'disabled' || loading, onClick: clickHandler, "aria-label": ariaLabel }, dataAttributes, rest, { children: loading
             ? (jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }))
-            : (jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })) })));
+            : (jsxRuntime.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, }) {
@@ -1294,12 +1298,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 = React.useMemo(() => iconCloseProp || xLg, [iconCloseProp, xLg]);
-    return (jsxRuntime.jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, dataAttributes, { children: [icon && (jsxRuntime.jsx("div", { className: "d-chip-icon-container", children: jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle }) })), jsxRuntime.jsx("span", { children: text }), showClose && (jsxRuntime.jsx("button", { type: "button", className: "d-chip-icon-container", onClick: onClose, "aria-label": closeAriaLabel, children: jsxRuntime.jsx(DIcon, { icon: iconClose, familyClass: iconCloseFamilyClass, familyPrefix: iconCloseFamilyPrefix, materialStyle: iconCloseMaterialStyle }) }))] })));
+    return (jsxRuntime.jsxs("span", Object.assign({ className: classNames(generateClasses, className), style: style }, dataAttributes, { children: [icon && (jsxRuntime.jsx("div", { className: "d-chip-icon-container", children: jsxRuntime.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 }) })), jsxRuntime.jsx("span", { children: text }), showClose && (jsxRuntime.jsx("button", { type: "button", className: "d-chip-icon-container", onClick: onClose, "aria-label": closeAriaLabel, children: jsxRuntime.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] = React.useState(defaultCollapsed);
     const onChangeCollapse = () => {
         setCollapsed((prev) => {
@@ -1313,10 +1317,10 @@ function DCollapse({ id, className, style, Component, defaultCollapsed = true, o
     React.useEffect(() => {
         setCollapsed(defaultCollapsed);
     }, [defaultCollapsed]);
-    const { iconMap: { chevronDown, chevronUp, }, } = useDContext();
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { chevronDown, chevronUp, }, } = useDContext();
     const iconOpen = React.useMemo(() => iconOpenProp || chevronDown, [chevronDown, iconOpenProp]);
     const iconClose = React.useMemo(() => iconCloseProp || chevronUp, [chevronUp, iconCloseProp]);
-    return (jsxRuntime.jsxs("div", Object.assign({ id: id, className: classNames('collapse-container', className), style: style }, dataAttributes, { children: [jsxRuntime.jsxs("button", { className: "collapse-button", type: "button", onClick: onChangeCollapse, children: [jsxRuntime.jsx("div", { className: "flex-grow-1", children: Component }), jsxRuntime.jsx(DIcon, { color: "primary", size: "1.25rem", icon: collapsed ? iconOpen : iconClose, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })] }), jsxRuntime.jsx("div", { className: classNames('collapse-body-wrapper', {
+    return (jsxRuntime.jsxs("div", Object.assign({ id: id, className: classNames('collapse-container', className), style: style }, dataAttributes, { children: [jsxRuntime.jsxs("button", { className: "collapse-button", type: "button", onClick: onChangeCollapse, children: [jsxRuntime.jsx("div", { className: "flex-grow-1", children: Component }), jsxRuntime.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 })] }), jsxRuntime.jsx("div", { className: classNames('collapse-body-wrapper', {
                     show: !collapsed,
                 }), children: jsxRuntime.jsx("div", { className: "collapse-body", children: children }) })] })));
 }
@@ -1502,9 +1506,9 @@ function DDatePickerHeaderSelector({ date, changeYear, changeMonth, decreaseMont
         return (jsxRuntime.jsxs("div", { className: classNames('react-datepicker__header-selector react-datepicker__header-year-selector', className), style: style, children: [jsxRuntime.jsx(DButtonIcon, { icon: iconPrev || chevronLeft, size: iconSize, variant: "link", onClick: decreaseYear, disabled: prevYearButtonDisabled, "aria-label": prevYearAriaLabel, className: "header-button" }), jsxRuntime.jsx("p", { children: `${startYear} - ${endYear}` }), jsxRuntime.jsx(DButtonIcon, { icon: iconNext || chevronRight, size: iconSize, variant: "link", onClick: increaseYear, disabled: nextYearButtonDisabled, "aria-label": nextYearAriaLabel, className: "header-button" })] }));
     }
     if (pickerType === PickerType.Quarter || pickerType === PickerType.Month) {
-        return (jsxRuntime.jsxs("div", { className: classNames(`react-datepicker__header-selector react-datepicker__header-${pickerType}-selector`, className), style: style, children: [jsxRuntime.jsx(DButtonIcon, { icon: iconPrev || chevronLeft, size: iconSize, variant: "link", onClick: decreaseYear, disabled: prevMonthButtonDisabled, "aria-label": prevMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === 0 ? 'visible' : 'hidden' } }), jsxRuntime.jsx("div", { className: "d-flex justify-content-center flex-grow-1", children: showHeaderSelectors ? (jsxRuntime.jsx(DSelect, { options: years, value: defaultYear, defaultValue: defaultYear, onChange: (year) => changeYear(Number(year === null || year === void 0 ? void 0 : year.value)), searchable: false })) : (jsxRuntime.jsx("p", { children: defaultYear === null || defaultYear === void 0 ? void 0 : defaultYear.label })) }), jsxRuntime.jsx(DButtonIcon, { icon: iconNext || chevronRight, size: iconSize, variant: "link", onClick: increaseYear, disabled: nextMonthButtonDisabled, "aria-label": nextMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' } })] }));
+        return (jsxRuntime.jsxs("div", { className: classNames(`react-datepicker__header-selector react-datepicker__header-${pickerType}-selector`, className), style: style, children: [jsxRuntime.jsx(DButtonIcon, { icon: iconPrev || chevronLeft, size: iconSize, variant: "link", onClick: decreaseYear, disabled: prevMonthButtonDisabled, "aria-label": prevMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === 0 ? 'visible' : 'hidden' } }), jsxRuntime.jsx("div", { className: "react-datepicker__header-year-selector", children: showHeaderSelectors ? (jsxRuntime.jsx(DSelect, { options: years, value: defaultYear, defaultValue: defaultYear, onChange: (year) => changeYear(Number(year === null || year === void 0 ? void 0 : year.value)), searchable: false })) : (jsxRuntime.jsx("p", { children: defaultYear === null || defaultYear === void 0 ? void 0 : defaultYear.label })) }), jsxRuntime.jsx(DButtonIcon, { icon: iconNext || chevronRight, size: iconSize, variant: "link", onClick: increaseYear, disabled: nextMonthButtonDisabled, "aria-label": nextMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' } })] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "datepicker-top-header", children: [showHeaderSelectors && (jsxRuntime.jsx(DSelect, { options: years, value: defaultYear, defaultValue: defaultYear, onChange: (year) => changeYear(Number(year === null || year === void 0 ? void 0 : year.value)), searchable: false, className: "custom-year-selector" })), jsxRuntime.jsx("h4", { className: "mb-0 fw-normal", children: dateFns.format(monthDate, formatHeaderDate, { locale }) })] }), jsxRuntime.jsxs("div", { className: classNames('react-datepicker__header-selector react-datepicker__header-day-selector', className), style: style, children: [jsxRuntime.jsx(DButtonIcon, { icon: iconPrev || chevronLeft, size: iconSize, variant: "link", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, "aria-label": prevMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === 0 ? 'visible' : 'hidden' } }), showHeaderSelectors ? (jsxRuntime.jsx(DSelect, { options: months, value: defaultMonth, defaultValue: defaultMonth, onChange: (month) => changeMonth((month === null || month === void 0 ? void 0 : month.value) || 0), searchable: false, className: "custom-month-selector" })) : (jsxRuntime.jsx("p", { children: `${defaultMonth.label} ${defaultYear === null || defaultYear === void 0 ? void 0 : defaultYear.label}` })), jsxRuntime.jsx(DButtonIcon, { icon: iconNext || chevronRight, size: iconSize, variant: "link", onClick: increaseMonth, disabled: nextMonthButtonDisabled, "aria-label": nextMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' } })] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "datepicker-top-header", children: [showHeaderSelectors && (jsxRuntime.jsx(DSelect, { options: years, value: defaultYear, defaultValue: defaultYear, onChange: (year) => changeYear(Number(year === null || year === void 0 ? void 0 : year.value)), searchable: false, className: "custom-year-selector" })), jsxRuntime.jsx("h4", { className: "datepicker-top-header-title", children: dateFns.format(monthDate, formatHeaderDate, { locale }) })] }), jsxRuntime.jsxs("div", { className: classNames('react-datepicker__header-selector react-datepicker__header-day-selector', className), style: style, children: [jsxRuntime.jsx(DButtonIcon, { icon: iconPrev || chevronLeft, size: iconSize, variant: "link", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, "aria-label": prevMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === 0 ? 'visible' : 'hidden' } }), showHeaderSelectors ? (jsxRuntime.jsx(DSelect, { options: months, value: defaultMonth, defaultValue: defaultMonth, onChange: (month) => changeMonth((month === null || month === void 0 ? void 0 : month.value) || 0), searchable: false, className: "custom-month-selector" })) : (jsxRuntime.jsx("p", { children: `${defaultMonth.label} ${defaultYear === null || defaultYear === void 0 ? void 0 : defaultYear.label}` })), jsxRuntime.jsx(DButtonIcon, { icon: iconNext || chevronRight, size: iconSize, variant: "link", onClick: increaseMonth, disabled: nextMonthButtonDisabled, "aria-label": nextMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' } })] })] }));
 }
 
 function DDatePicker(_a) {
@@ -1639,11 +1643,24 @@ function formatValue(value, currencyOptions) {
     }
     return currency(value, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format();
 }
-function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref) {
+function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue) {
     const inputRef = useProvidedRefOrCreate(ref);
+    const clampValue = React.useCallback((newValue) => {
+        if (newValue === undefined) {
+            return newValue;
+        }
+        let clampedValue = newValue;
+        if (minValue !== undefined) {
+            clampedValue = Math.max(clampedValue, minValue);
+        }
+        if (maxValue !== undefined) {
+            clampedValue = Math.min(clampedValue, maxValue);
+        }
+        return clampedValue;
+    }, [minValue, maxValue]);
     const [innerType, setInnerType] = React.useState('text');
-    const [innerNumber, setInnerNumber] = React.useState(value);
-    const [innerString, setInnerString] = React.useState(formatValue(value, currencyOptions));
+    const [innerNumber, setInnerNumber] = React.useState(clampValue(value));
+    const [innerString, setInnerString] = React.useState(formatValue(clampValue(value), currencyOptions));
     const handleOnFocus = React.useCallback((event) => {
         event.stopPropagation();
         setInnerType('number');
@@ -1652,15 +1669,14 @@ function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref
     const handleOnBlur = React.useCallback((event) => {
         event.stopPropagation();
         setInnerType('text');
+        const clampedNumber = clampValue(innerNumber);
+        if (clampedNumber !== innerNumber) {
+            setInnerNumber(clampedNumber);
+            setInnerString(formatValue(clampedNumber, currencyOptions));
+            onChange === null || onChange === void 0 ? void 0 : onChange(clampedNumber);
+        }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    }, [onBlur]);
-    const generateStyleVariables = React.useMemo(() => ({
-        [`--${PREFIX_BS}input-currency-component-symbol-color`]: `var(--${PREFIX_BS}secondary)`,
-        [`--${PREFIX_BS}input-currency-symbol-color`]: `var(--${PREFIX_BS}input-currency-component-symbol-color)`,
-    }), []);
-    const generateSymbolStyleVariables = React.useMemo(() => ({
-        color: `var(--${PREFIX_BS}input-currency-symbol-color)`,
-    }), []);
+    }, [onBlur, innerNumber, clampValue, currencyOptions, onChange]);
     const handleOnChange = React.useCallback((newValue) => {
         const newNumber = (newValue === undefined || newValue === '') ? undefined : Number(newValue);
         if (newNumber !== innerNumber) {
@@ -1669,7 +1685,12 @@ function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref
             onChange === null || onChange === void 0 ? void 0 : onChange(newNumber);
         }
     }, [currencyOptions, onChange, innerNumber]);
+    const isMountedRef = React.useRef(false);
     React.useEffect(() => {
+        if (!isMountedRef.current) {
+            isMountedRef.current = true;
+            return;
+        }
         if (value !== innerNumber) {
             setInnerNumber(value);
             setInnerString(formatValue(value, currencyOptions));
@@ -1683,8 +1704,6 @@ function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref
         handleOnFocus,
         handleOnChange,
         handleOnBlur,
-        generateStyleVariables,
-        generateSymbolStyleVariables,
     };
 }
 
@@ -1789,6 +1808,149 @@ function useConfirmModal(config) {
     return { open };
 }
 
+/**
+ * Generic seconds-based countdown hook.
+ *
+ * Starts counting down from `seconds` to `0` and exposes `restartCountdown`
+ * to reset and restart the timer (e.g. for "resend code in Xs" patterns,
+ * session-expiry banners, or any other cooldown/throttle UI).
+ *
+ * @example
+ * const { secondsLeft, restartCountdown } = useCountdown(30);
+ */
+function useCountdown(seconds) {
+    const [secondsLeft, setSecondsLeft] = React.useState(seconds);
+    const [isActive, setIsActive] = React.useState(true);
+    const resetCountdown = React.useCallback((newSeconds = seconds) => {
+        setIsActive(false);
+        setSecondsLeft(newSeconds);
+    }, [seconds]);
+    const restartCountdown = React.useCallback(() => {
+        resetCountdown(seconds);
+        setIsActive(true);
+    }, [resetCountdown, seconds]);
+    React.useEffect(() => {
+        if (!isActive) {
+            return () => { };
+        }
+        const interval = setInterval(() => {
+            setSecondsLeft((prevSeconds) => {
+                const newSeconds = prevSeconds - 1;
+                if (newSeconds <= 0) {
+                    clearInterval(interval);
+                    setIsActive(false);
+                    return 0;
+                }
+                return newSeconds;
+            });
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [isActive]);
+    return { secondsLeft, restartCountdown };
+}
+
+/**
+ * Headless hook exposing the same OTP logic used internally by `DOtp`
+ * (code state, length + correctness validation, submit action and resend
+ * countdown), without any bundled markup/styles.
+ *
+ * Use this when the default `DOtp` component doesn't match your design and
+ * you need to build a fully custom UI while reusing the same behavior.
+ *
+ * Internally composes `useCountdown` for the resend timer and re-exposes
+ * `secondsLeft`/`restartCountdown`, so there is no need to call
+ * `useCountdown` separately.
+ *
+ * `invalid` becomes `true` both when the OTP is shorter than `otpSize` and
+ * when `action` throws/rejects (e.g. the backend rejected the entered code
+ * as incorrect). In the latter case, the thrown value is exposed as `error`
+ * so custom UIs can render an appropriate message (e.g. "Invalid code" vs.
+ * "Enter all digits"). `invalid`/`error` are cleared automatically as soon
+ * as the user edits the code via `setOtp`.
+ *
+ * @example
+ * function CustomOtp() {
+ *   const {
+ *     otp,
+ *     setOtp,
+ *     invalid,
+ *     error,
+ *     submit,
+ *     isLoading,
+ *     secondsLeft,
+ *     restartCountdown,
+ *   } = useOtp({ action: async () => verifyOtp(otp), otpSize: 6, seconds: 15 });
+ *
+ *   return (
+ *     <>
+ *       <MyCustomPinInput value={otp} onChange={setOtp} invalid={invalid} />
+ *       {invalid && <span>{error ? 'Invalid code' : 'Enter all digits'}</span>}
+ *       <button disabled={isLoading} onClick={() => { submit().catch(() => {}); }}>
+ *         {isLoading ? 'Submitting...' : 'Submit'}
+ *       </button>
+ *       <button disabled={secondsLeft > 0} onClick={restartCountdown}>
+ *         Resend {secondsLeft > 0 ? `(${secondsLeft}s)` : ''}
+ *       </button>
+ *     </>
+ *   );
+ * }
+ */
+function useOtp({ action, otpSize = 6, seconds = 15, }) {
+    const [otp, setOtpValue] = React.useState('');
+    const [invalid, setInvalid] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const { secondsLeft, restartCountdown } = useCountdown(seconds);
+    const setOtp = React.useCallback((value) => {
+        setOtpValue((prevOtp) => {
+            // Guard against no-op calls (e.g. DInputPin re-notifying the same
+            // value when its onChange reference changes) so we don't wipe out
+            // an `invalid`/`error` state that was just set by submit().
+            if (prevOtp === value) {
+                return prevOtp;
+            }
+            setInvalid(false);
+            setError(null);
+            return value;
+        });
+    }, []);
+    const submit = React.useCallback(async () => {
+        if (otp.length < otpSize) {
+            setInvalid(true);
+            setError(null);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            await action();
+            setInvalid(false);
+            setError(null);
+        }
+        catch (err) {
+            setInvalid(true);
+            setError(err);
+            throw err;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [
+        otp.length,
+        action,
+        otpSize,
+    ]);
+    return {
+        otp,
+        setOtp,
+        invalid,
+        error,
+        submit,
+        isLoading,
+        secondsLeft,
+        restartCountdown,
+    };
+}
+
 function DInputCounter(_a, ref) {
     var { minValue, maxValue, value = minValue, invalid, iconStart: iconStartProp, iconEnd: iconEndProp, iconStartAriaLabel = 'decrease action', iconEndAriaLabel = 'increase action', style, onChange } = _a, props = tslib.__rest(_a, ["minValue", "maxValue", "value", "invalid", "iconStart", "iconEnd", "iconStartAriaLabel", "iconEndAriaLabel", "style", "onChange"]);
     const { handleOnWheel, } = useDisableInputWheel(ref);
@@ -1831,8 +1993,8 @@ function DInputCurrency(_a, ref) {
     var { value, minValue, maxValue, currencyCode, onFocus, onBlur, onChange } = _a, props = tslib.__rest(_a, ["value", "minValue", "maxValue", "currencyCode", "onFocus", "onBlur", "onChange"]);
     const { currency: currencyOptions } = useDContext();
     const { handleOnWheel, } = useDisableInputWheel(ref);
-    const { inputRef, innerValue, innerType, handleOnFocus, handleOnChange, handleOnBlur, generateStyleVariables, generateSymbolStyleVariables, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref);
-    return (jsxRuntime.jsx(ForwardedDInput, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, style: generateStyleVariables, inputMode: "decimal", type: innerType, onFocus: handleOnFocus, onBlur: handleOnBlur, onWheel: handleOnWheel, inputStart: (jsxRuntime.jsx("span", { slot: "input-start", style: generateSymbolStyleVariables, children: currencyCode || currencyOptions.symbol })) }, props)));
+    const { inputRef, innerValue, innerType, handleOnFocus, handleOnChange, handleOnBlur, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue);
+    return (jsxRuntime.jsx(ForwardedDInput, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, inputMode: "decimal", type: innerType, onFocus: handleOnFocus, onBlur: handleOnBlur, onWheel: handleOnWheel, inputStart: (jsxRuntime.jsx("span", { slot: "input-start", className: "d-input-currency-symbol", children: currencyCode || currencyOptions.symbol })) }, props)));
 }
 const ForwardedDInputCurrency = React.forwardRef(DInputCurrency);
 ForwardedDInputCurrency.displayName = 'DInputCurrency';
@@ -1854,26 +2016,25 @@ ForwardedDInputPassword.displayName = 'DInputPassword';
 
 function PasswordCheckItem({ password, regex, text, }) {
     const isValid = regex.test(password);
-    return (jsxRuntime.jsxs("li", { className: "d-flex gap-2 align-items-start small text-gray-600", children: [jsxRuntime.jsx(DIcon, { className: classNames('flex-shrink-0', isValid ? 'text-success' : 'text-gray-300'), icon: isValid ? 'CircleCheck' : 'Circle', size: "16px" }), jsxRuntime.jsx("span", { className: classNames({ 'text-success': isValid }), children: text })] }));
+    return (jsxRuntime.jsxs("li", { className: `d-password-check-item${isValid ? ' is-valid' : ''}`, children: [jsxRuntime.jsx(DIcon, { className: "d-password-check-item-icon", icon: isValid ? 'CircleCheck' : 'Circle', size: "16px" }), jsxRuntime.jsx("span", { children: text })] }));
 }
 
-const getColorClass = (strength, total) => {
+const getStrengthModifier = (strength, total) => {
     const percentage = total > 0 ? strength / total : 0;
     if (percentage === 0)
-        return 'bg-gray-200';
+        return 'is-empty';
     if (percentage <= 0.25)
-        return 'bg-danger';
+        return 'is-weak';
     if (percentage <= 0.5)
-        return 'bg-warning';
+        return 'is-fair';
     if (percentage <= 0.75)
-        return 'bg-info';
-    return 'bg-success';
+        return 'is-good';
+    return 'is-strong';
 };
 function PasswordStrengthBar({ strength, total }) {
     const percentage = total > 0 ? (strength / total) * 100 : 0;
-    return (jsxRuntime.jsx("div", { className: "w-100 rounded-3 overflow-hidden bg-gray-100 mb-2", style: { height: '8px' }, children: jsxRuntime.jsx("div", { className: `h-100 ${getColorClass(strength, total)}`, style: {
+    return (jsxRuntime.jsx("div", { className: "d-password-strength-bar", children: jsxRuntime.jsx("div", { className: `d-password-strength-bar-fill ${getStrengthModifier(strength, total)}`, style: {
                 width: `${percentage}%`,
-                transition: 'width 0.3s ease-in-out',
             } }) }));
 }
 
@@ -1909,7 +2070,7 @@ function PasswordChecksList({ password, validationMessages, enabledChecks, }) {
     const passwordChecks = allChecks.filter((check) => enabledChecks.includes(check.key));
     const passed = passwordChecks.filter((r) => r.regex.test(password)).length;
     const total = passwordChecks.length;
-    return (jsxRuntime.jsxs("div", { className: "mt-2", children: [jsxRuntime.jsx(PasswordStrengthBar, { strength: passed, total: total }), jsxRuntime.jsx("ul", { className: "list-unstyled m-0 d-flex flex-column gap-2", children: passwordChecks.map(({ key, regex, text }) => (jsxRuntime.jsx(PasswordCheckItem, { password: password, regex: regex, text: text }, key))) })] }));
+    return (jsxRuntime.jsxs("div", { className: "d-password-strength-meter", children: [jsxRuntime.jsx(PasswordStrengthBar, { strength: passed, total: total }), jsxRuntime.jsx("ul", { className: "d-password-check-list", children: passwordChecks.map(({ key, regex, text }) => (jsxRuntime.jsx(PasswordCheckItem, { password: password, regex: regex, text: text }, key))) })] }));
 }
 
 const DEFAULT_VALIDATION_MESSAGES = {
@@ -1950,9 +2111,9 @@ function DInputCheck(_a) {
     ]);
     React.useEffect(() => {
         if (innerRef.current) {
-            innerRef.current.indeterminate = Boolean(indeterminate);
+            innerRef.current.indeterminate = type === 'checkbox' && Boolean(indeterminate);
         }
-    }, [indeterminate]);
+    }, [indeterminate, type]);
     React.useEffect(() => {
         if (innerRef.current) {
             innerRef.current.checked = checked;
@@ -2145,10 +2306,18 @@ function DInputSelect({ id: idProp, name, label = '', className, style, options
                 }), children: [iconStart && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: iconStartClickHandler, disabled: disabled || loading, "aria-label": iconStartAriaLabel, children: iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), dynamicComponent, iconEnd && !loading && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: iconEndClickHandler, disabled: disabled || loading, "aria-label": iconEndAriaLabel, children: iconEnd && (jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), loading && (jsxRuntime.jsx("div", { className: "input-group-text form-control-icon loading", children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsxRuntime.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 = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
     const [internalIsChecked, setInternalIsChecked] = React.useState(checked);
+    const ariaDescribedby = React.useMemo(() => ([
+        !!hint && `${id}Hint`,
+    ]
+        .filter(Boolean)
+        .join(' ')), [
+        id,
+        hint,
+    ]);
     React.useEffect(() => {
         setInternalIsChecked(checked);
     }, [checked]);
@@ -2157,10 +2326,10 @@ function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, i
         setInternalIsChecked(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [onChange]);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('form-check form-switch', className) }, dataAttributes, { children: [jsxRuntime.jsx("input", { id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', {
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('form-check form-switch', className) }, dataAttributes, { children: [jsxRuntime.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 && (jsxRuntime.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 && (jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label })), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 
 function DInputRange(_a, ref) {
@@ -2201,6 +2370,7 @@ const ForwardedDInputRange = React.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 = React.useMemo(() => {
         if (href) {
             return 'a';
@@ -2229,7 +2399,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 (jsxRuntime.jsxs(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, Tag === 'a' && href && { href }, onClick && { onClick }, ariaAttributes, dataAttributes, Tag === 'button' && { type: 'button' }, { children: [iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), children, iconEnd && (jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle, className: "ms-auto" }))] })));
+    return (jsxRuntime.jsxs(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, Tag === 'a' && href && { href }, onClick && { onClick }, ariaAttributes, dataAttributes, Tag === 'button' && { type: 'button' }, { children: [iconStart && (jsxRuntime.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 && (jsxRuntime.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$1({ as = 'ul', numbered, flush, horizontal, children, className, style, dataAttributes, }) {
@@ -2256,10 +2426,11 @@ var DListGroup = Object.assign(DListGroup$1, {
     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 = React.useMemo(() => iconProp || xLg, [iconProp, xLg]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: classNames('modal-header', className), style: style, children: [jsxRuntime.jsx("div", { children: children }), showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-close align-self-center", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }), jsxRuntime.jsx("div", { className: "d-modal-separator" })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: classNames('modal-header', className), style: style, children: [jsxRuntime.jsx("div", { children: children }), showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.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 }) }))] }), jsxRuntime.jsx("div", { className: "d-modal-separator" })] }));
 }
 
 function DModalBody({ children, className, style, }) {
@@ -2300,10 +2471,11 @@ var DModal = Object.assign(DModal$1, {
     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 = React.useMemo(() => iconProp || xLg, [iconProp, xLg]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: classNames('offcanvas-header', className), style: style, children: [jsxRuntime.jsx("div", { children: children }), showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-close align-self-center", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }), jsxRuntime.jsx("div", { className: "d-offcanvas-separator" })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: classNames('offcanvas-header', className), style: style, children: [jsxRuntime.jsx("div", { children: children }), showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.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 }) }))] }), jsxRuntime.jsx("div", { className: "d-offcanvas-separator" })] }));
 }
 
 function DOffcanvasBody({ children, className, style, }) {
@@ -2430,7 +2602,7 @@ function DPopover({ children, renderComponent, open, setOpen, adjustContentToRen
     }
     const reference = React.cloneElement(triggerElement, Object.assign({ ref: refs.setReference }, getReferenceProps(triggerElement.props)));
     return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('d-popover', className), style: generateStyleVariables }, dataAttributes, { children: [reference, isOpen && (jsxRuntime.jsx(react.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", Object.assign({ className: classNames('d-popover-content', {
-                        'w-100': adjustContentToRender,
+                        'd-popover-content-fill': adjustContentToRender,
                     }), ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId }, getFloatingProps(), { children: children })) }))] })));
 }
 
@@ -2444,8 +2616,8 @@ function DProgress({ className, style, currentValue, minValue = 0, maxValue = 10
     return (jsxRuntime.jsx("div", Object.assign({ className: classNames('progress', className), style: Object.assign({ height }, style) }, dataAttributes, { children: jsxRuntime.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 = React.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');
@@ -2460,7 +2632,7 @@ function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSu
             }), children: [jsxRuntime.jsx("div", { className: "d-step-value", children: jsxRuntime.jsxs("div", { className: classNames({
                             'd-step-icon-container': true,
                             'd-step-check': value < currentStep || completed,
-                        }), children: [((value < currentStep) || completed) && (jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconSuccessFamilyClass, familyPrefix: iconSuccessFamilyPrefix, materialStyle: iconSuccessMaterialStyle, className: "d-step-icon" })), value] }) }), jsxRuntime.jsxs("div", { className: "d-step-text-container", children: [jsxRuntime.jsx("div", { className: "d-step-label", children: label }), description && (jsxRuntime.jsx("div", { className: "d-step-description", children: description }))] })] }, value))) }));
+                        }), children: [((value < currentStep) || completed) && (jsxRuntime.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] }) }), jsxRuntime.jsxs("div", { className: "d-step-text-container", children: [jsxRuntime.jsx("div", { className: "d-step-label", children: label }), description && (jsxRuntime.jsx("div", { className: "d-step-description", children: description }))] })] }, value))) }));
 }
 
 function DStepper$1({ options, currentStep, className, style, }) {
@@ -2493,14 +2665,21 @@ function DStepper$1({ options, currentStep, className, style, }) {
     return (jsxRuntime.jsxs("div", { className: classNames('d-stepper', className), style: style, children: [jsxRuntime.jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsxRuntime.jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsxRuntime.jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "d-step-label", children: currentOption.label }), jsxRuntime.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 (jsxRuntime.jsxs("div", Object.assign({ className: className, style: style }, dataAttributes, { children: [jsxRuntime.jsx("div", { className: `d-block d-${breakpoint}-none`, children: jsxRuntime.jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsxRuntime.jsx("div", { className: `d-none d-${breakpoint}-block`, children: jsxRuntime.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 (jsxRuntime.jsxs("div", Object.assign({ className: className, style: style }, dataAttributes, { children: [jsxRuntime.jsx("div", { className: classNames('d-stepper-mobile', `d-block d-${breakpoint}-none`), children: jsxRuntime.jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsxRuntime.jsx("div", { className: classNames('d-stepper-desktop', `d-none d-${breakpoint}-block`), children: jsxRuntime.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 = 2;
-function DTooltip({ className, childrenClassName, style, offSet = ARROW_HEIGHT + GAP, padding, withFocus = false, withClick = false, withHover = true, open = false, placement = 'top', size, Component, children, }) {
+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] = React.useState(open);
     const arrowRef = React.useRef(null);
     const { refs, context, floatingStyles, } = react.useFloating({
@@ -2569,8 +2748,16 @@ function DTabs$1({ children, defaultSelected, onChange, options, className, clas
     React.useEffect(() => {
         setSelected(defaultSelected);
     }, [defaultSelected]);
-    const generateClasses = React.useMemo(() => (Object.assign({ nav: true, 'flex-column align-items-center': vertical && variant !== 'tabs', [`nav-${variant}`]: true }, className && { [className]: true })), [vertical, variant, className]);
+    const generateClasses = React.useMemo(() => (Object.assign({ nav: true, 'd-tabs-nav-vertical': vertical && variant !== 'tabs', [`nav-${variant}`]: true }, className && { [className]: true })), [vertical, variant, className]);
     const tabRefs = React.useRef([]);
+    // Always holds the latest `options` without needing to be a dependency:
+    // `options` is commonly passed as an inline array literal (e.g.
+    // `options={[{ label: 'SMS', tab: 'sms' }, ...]}`), so it's a new array
+    // reference on every parent render even when its content hasn't changed.
+    // Reading it from this ref (updated synchronously on every render) lets
+    // the focus effect below react only to `selected` changing.
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
     React.useEffect(() => {
         tabRefs.current = options.map((_, i) => tabRefs.current[i] || React.createRef());
     }, [options]);
@@ -2585,20 +2772,28 @@ function DTabs$1({ children, defaultSelected, onChange, options, className, clas
                 setSelected(firstEnabled.tab);
         }
     }, [options, selected]);
-    // Declarative focus management
-    const focusTab = (idx) => {
+    // Declarative focus management. Wrapped in `useCallback` with an empty
+    // dependency array since it only reads from the `tabRefs` ref, so its
+    // identity stays stable across renders and it can safely be used as an
+    // effect dependency below.
+    const focusTab = React.useCallback((idx) => {
         var _a;
         if ((_a = tabRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.current) {
             tabRefs.current[idx].current.focus();
         }
-    };
-    // Focus selected tab when selected changes
+    }, []);
+    // Focus selected tab when selected changes.
+    // Reads `options` from `optionsRef` (see comment above) instead of
+    // depending on `options` directly, so a parent re-render that merely
+    // creates a new `options` reference with identical content doesn't call
+    // `focusTab` again and steal focus away from unrelated elements on the
+    // page (e.g. an OTP input).
     React.useEffect(() => {
-        const idx = options.findIndex((opt) => opt.tab === selected && !opt.disabled);
+        const idx = optionsRef.current.findIndex((opt) => opt.tab === selected && !opt.disabled);
         if (idx !== -1) {
             focusTab(idx);
         }
-    }, [selected, options]);
+    }, [selected, focusTab]);
     const handleKeyDown = React.useCallback((idx, e) => {
         const count = options.length;
         if (count === 0)
@@ -2627,7 +2822,7 @@ function DTabs$1({ children, defaultSelected, onChange, options, className, clas
                 }
             }
         }
-    }, [options, vertical]);
+    }, [options, vertical, focusTab]);
     let tablistProps = {};
     if (ariaLabelledBy) {
         tablistProps = { 'aria-labelledby': ariaLabelledBy };
@@ -2640,12 +2835,12 @@ function DTabs$1({ children, defaultSelected, onChange, options, className, clas
         isSelected,
     }), [isSelected]);
     return (jsxRuntime.jsx(TabContext.Provider, { value: value, children: jsxRuntime.jsxs("div", Object.assign({ className: classNames({
-                'd-flex w-100': true,
-                'flex-column': !vertical || variant === 'tabs',
+                'd-tabs': true,
+                'd-tabs-column': !vertical || variant === 'tabs',
             }), style: style }, dataAttributes, { children: [jsxRuntime.jsx("ul", Object.assign({ className: classNames(generateClasses), role: "tablist", "aria-orientation": vertical ? 'vertical' : undefined }, tablistProps, { children: options.map((option, idx) => {
                         const isTabSelected = !!option.tab && option.tab === selected;
                         return (jsxRuntime.jsx("li", { role: "presentation", className: "nav-item", children: jsxRuntime.jsx("button", { ref: tabRefs.current[idx], id: `${option.tab}Tab`, className: classNames('nav-link', { active: isTabSelected }, classNameTab), type: "button", role: "tab", "aria-controls": `${option.tab}Pane`, "aria-selected": isTabSelected, tabIndex: isTabSelected ? 0 : -1, disabled: option.disabled, onClick: () => onSelect(option), onKeyDown: (e) => handleKeyDown(idx, e), children: option.label }) }, option.tab));
-                    }) })), jsxRuntime.jsx("div", { className: "tab-content w-100", children: children })] })) }));
+                    }) })), jsxRuntime.jsx("div", { className: "d-tabs-content tab-content", children: children })] })) }));
 }
 var DTabs = Object.assign(DTabs$1, {
     Tab: DTabContent,
@@ -2707,11 +2902,11 @@ function useDToast() {
             if (!description) {
                 return (jsxRuntime.jsx(DToast, { className: classNames({
                         [`toast-${color}`]: !!color,
-                    }, 'show'), children: jsxRuntime.jsxs(DToast.Body, { children: [icon && (jsxRuntime.jsx(DIcon, { className: "toast-icon", icon: icon })), jsxRuntime.jsx("p", { className: "toast-title", children: title }), jsxRuntime.jsx("button", { type: "button", className: "d-close align-self-center", "aria-label": "Close", onClick: () => reactHotToast.toast.dismiss(id), children: jsxRuntime.jsx(DIcon, { icon: closeIcon || xLg }) })] }) }));
+                    }, 'show'), children: jsxRuntime.jsxs(DToast.Body, { children: [icon && (jsxRuntime.jsx(DIcon, { className: "toast-icon", icon: icon })), jsxRuntime.jsx("p", { className: "toast-title", children: title }), jsxRuntime.jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: () => reactHotToast.toast.dismiss(id), children: jsxRuntime.jsx(DIcon, { icon: closeIcon || xLg }) })] }) }));
             }
             return (jsxRuntime.jsxs(DToast, { className: classNames({
                     [`toast-${color}`]: !!color,
-                }, 'show'), children: [jsxRuntime.jsxs(DToast.Header, { children: [icon && (jsxRuntime.jsx(DIcon, { className: "toast-icon", icon: icon })), jsxRuntime.jsx("p", { className: "toast-title", children: title }), timestamp && (jsxRuntime.jsx("small", { className: "toast-timestamp", children: timestamp })), jsxRuntime.jsx("button", { type: "button", className: "d-close align-self-center", "aria-label": "Close", onClick: () => reactHotToast.toast.dismiss(id), children: jsxRuntime.jsx(DIcon, { icon: closeIcon || xLg }) })] }), jsxRuntime.jsx(DToast.Body, { children: jsxRuntime.jsx("span", { children: description }) })] }));
+                }, 'show'), children: [jsxRuntime.jsxs(DToast.Header, { children: [icon && (jsxRuntime.jsx(DIcon, { className: "toast-icon", icon: icon })), jsxRuntime.jsx("p", { className: "toast-title", children: title }), timestamp && (jsxRuntime.jsx("small", { className: "toast-timestamp", children: timestamp })), jsxRuntime.jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: () => reactHotToast.toast.dismiss(id), children: jsxRuntime.jsx(DIcon, { icon: closeIcon || xLg }) })] }), jsxRuntime.jsx(DToast.Body, { children: jsxRuntime.jsx("span", { children: description }) })] }));
         }, toastProps);
     }, [xLg]);
     return {
@@ -2733,11 +2928,10 @@ async function configureI8n(resources, _a = {}) {
         .then((t) => t);
 }
 
-function getQueryString(value, config = {
-    useSearch: true,
-}) {
-    const urlParams = new URLSearchParams(config.useSearch ? window.location.search : '');
-    return urlParams.get(value) || config.default;
+function getQueryString(value, config = {}) {
+    const { useSearch = true, default: defaultValue } = config;
+    const urlParams = new URLSearchParams(useSearch ? window.location.search : '');
+    return urlParams.get(value) || defaultValue;
 }
 
 function changeQueryString(values, { useSearch = true, pushState = false, } = {}) {
@@ -2767,11 +2961,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 = tslib.__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 = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     const handleOnIconEndClick = React.useCallback(() => {
         onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(value);
     }, [onIconEndClick, value]);
@@ -2845,7 +3160,7 @@ function DInputPhone(_a, ref) {
                     [`input-group-${size}`]: !!size,
                     'input-group': true,
                     'has-validation': invalid || valid,
-                }), children: [jsxRuntime.jsx(reactInternationalPhone.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) && (jsxRuntime.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: jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }) })), loading && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
+                }), children: [jsxRuntime.jsx(reactInternationalPhone.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) && (jsxRuntime.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: jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsxRuntime.jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 const ForwardedDInputPhone = React.forwardRef(DInputPhone);
 ForwardedDInputPhone.displayName = 'DInputPhone';
@@ -2860,89 +3175,228 @@ function DCreditCard({ brand = 'visa', name, number, holderText = 'Card Holder',
     return (jsxRuntime.jsxs("div", { className: classNames('d-credit-card', isVertical && 'is-vertical', className), children: [jsxRuntime.jsxs("div", { className: "d-credit-card-header", children: [jsxRuntime.jsx("img", { src: logoImage || BRAND_LOGOS[brand] || DEFAULT_IMAGE, alt: brand, className: "d-credit-card-logo", width: 100 }), isChipVisible && (jsxRuntime.jsx("div", { className: "d-credit-card-chip", children: jsxRuntime.jsx("img", { src: CHIP_IMAGE, alt: "chip", width: 30, className: "d-credit-card-chip-image" }) }))] }), jsxRuntime.jsxs("div", { className: "d-credit-card-details", children: [jsxRuntime.jsx("div", { className: "d-credit-card-number", children: number }), jsxRuntime.jsx("small", { className: "d-credit-card-holder-text", children: holderText }), jsxRuntime.jsx("span", { className: "d-credit-card-name", children: name })] })] }));
 }
 
+// Gap between the toggle and the menu.
+const GAP = 4;
+// Minimum distance the menu should keep from the viewport edges.
+const VIEWPORT_PADDING = 8;
+// Minimum usable height left for the menu before we consider a side unusable.
+const MIN_USABLE_SPACE = 120;
 const getItemClass = (action) => classNames({
     'dropdown-item d-flex align-items-center': true,
     [`dropdown-item-${action.color}`]: !!action.color,
     disabled: action.disabled,
 });
-function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal = false, placement = 'auto', }) {
+const clamp = (value, min, max) => {
+    if (max < min)
+        return min;
+    return Math.min(Math.max(value, min), max);
+};
+/**
+ * `position: fixed` is normally relative to the viewport, but any ancestor
+ * with a `transform`, `perspective`, `filter`, `will-change` (of those) or a
+ * non-trivial `contain` establishes a new containing block, making `fixed`
+ * behave like `absolute` relative to that ancestor instead (e.g. Storybook's
+ * docs canvas wrapper, animated cards, sticky containers, etc.). We detect
+ * that ancestor so the computed coordinates can be adjusted accordingly,
+ * keeping the menu correctly anchored to the toggle in every context.
+ */
+const getFixedPositioningOffset = (fromEl) => {
+    var _a;
+    let node = (_a = fromEl === null || fromEl === void 0 ? void 0 : fromEl.parentElement) !== null && _a !== void 0 ? _a : null;
+    while (node && node !== document.body) {
+        const cs = window.getComputedStyle(node);
+        // Treat empty/undefined values as "unset" (jsdom returns "" rather than
+        // the CSS initial value like "none" for some of these properties).
+        const isSet = (value) => !!value && value !== 'none';
+        const establishesContainingBlock = isSet(cs.transform)
+            || isSet(cs.perspective)
+            || isSet(cs.filter)
+            || isSet(cs.backdropFilter)
+            || ['transform', 'perspective', 'filter'].some((prop) => { var _a; return (_a = cs.willChange) === null || _a === void 0 ? void 0 : _a.includes(prop); })
+            || cs.contain.split(' ').some((value) => ['layout', 'paint', 'strict', 'content'].includes(value));
+        if (establishesContainingBlock) {
+            const rect = node.getBoundingClientRect();
+            return { top: rect.top, left: rect.left };
+        }
+        node = node.parentElement;
+    }
+    return { top: 0, left: 0 };
+};
+/**
+ * Resolves where the menu should render (flip) and where it should sit along
+ * the cross axis (shift), so it always stays fully inside the viewport
+ * regardless of where the toggle is placed or how the viewport is resized.
+ * This mimics floating-ui's `flip` + `shift` middlewares without adding the
+ * dependency, keeping the existing Bootstrap markup/classes.
+ */
+const computeCoords = (toggleRect, menuSize, placement, alignment) => {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - toggleRect.bottom;
+    const spaceAbove = toggleRect.top;
+    const spaceLeft = toggleRect.left;
+    const spaceRight = viewportWidth - toggleRect.right;
+    let side = placement === 'auto'
+        ? 'down'
+        : placement;
+    if (placement === 'auto') {
+        side = spaceBelow >= menuSize.height + GAP || spaceBelow >= spaceAbove ? 'down' : 'up';
+    }
+    // Flip within the current axis if the chosen side can't fit the menu but
+    // the opposite side (same axis) can.
+    if (side === 'down' && spaceBelow < menuSize.height + GAP && spaceAbove > spaceBelow) {
+        side = 'up';
+    }
+    else if (side === 'up' && spaceAbove < menuSize.height + GAP && spaceBelow > spaceAbove) {
+        side = 'down';
+    }
+    else if (side === 'start' && spaceLeft < menuSize.width + GAP && spaceRight > spaceLeft) {
+        side = 'end';
+    }
+    else if (side === 'end' && spaceRight < menuSize.width + GAP && spaceLeft > spaceRight) {
+        side = 'start';
+    }
+    // Cross-axis fallback: e.g. a horizontally-centered toggle on a narrow
+    // viewport can't open sideways (neither `start` nor `end` fit), but there
+    // is plenty of room above/below — switch the whole axis in that case
+    // (and vice versa for `down`/`up` squeezed against a short viewport).
+    const bestVerticalSpace = Math.max(spaceBelow, spaceAbove);
+    const bestHorizontalSpace = Math.max(spaceLeft, spaceRight);
+    if (side === 'down' || side === 'up') {
+        if (bestVerticalSpace < MIN_USABLE_SPACE && bestHorizontalSpace > bestVerticalSpace) {
+            side = spaceRight >= spaceLeft ? 'end' : 'start';
+        }
+    }
+    else if (bestHorizontalSpace < menuSize.width + GAP
+        && bestVerticalSpace > bestHorizontalSpace) {
+        side = spaceBelow >= spaceAbove ? 'down' : 'up';
+    }
+    if (side === 'down' || side === 'up') {
+        const top = side === 'down'
+            ? toggleRect.bottom + GAP
+            : toggleRect.top - menuSize.height - GAP;
+        // Align horizontally per the requested `alignment` (start/end/center), then
+        // fall back to the opposite edge if the preferred alignment would overflow
+        // the viewport, and clamp as a final safety net so it never overflows.
+        let left;
+        if (alignment === 'end') {
+            left = toggleRect.right - menuSize.width;
+        }
+        else if (alignment === 'center') {
+            left = toggleRect.left + (toggleRect.width / 2) - (menuSize.width / 2);
+        }
+        else {
+            left = toggleRect.left;
+        }
+        if (left + menuSize.width > viewportWidth - VIEWPORT_PADDING && alignment !== 'end') {
+            const altLeft = toggleRect.right - menuSize.width;
+            if (altLeft >= VIEWPORT_PADDING)
+                left = altLeft;
+        }
+        else if (left < VIEWPORT_PADDING && alignment !== 'start') {
+            const altLeft = toggleRect.left;
+            if (altLeft + menuSize.width <= viewportWidth - VIEWPORT_PADDING)
+                left = altLeft;
+        }
+        left = clamp(left, VIEWPORT_PADDING, Math.max(viewportWidth - menuSize.width - VIEWPORT_PADDING, VIEWPORT_PADDING));
+        const availableHeight = side === 'down' ? spaceBelow : spaceAbove;
+        // Cap strictly to the space actually available on the resolved side —
+        // MIN_USABLE_SPACE is only meant to influence the flip/shift decision
+        // above, not to force a taller box than what physically fits and
+        // overflow the viewport.
+        const maxUsableHeight = Math.max(availableHeight - GAP - VIEWPORT_PADDING, 0);
+        return {
+            top,
+            left,
+            minWidth: Math.max(toggleRect.width, 160),
+            maxHeight: `${maxUsableHeight}px`,
+            resolvedSide: side,
+        };
+    }
+    // side is 'start' or 'end'
+    let left = side === 'start'
+        ? toggleRect.left - menuSize.width - GAP
+        : toggleRect.right + GAP;
+    // Safety-net clamp: in rare cases where the toggle is squeezed so tightly
+    // that no side of any axis has enough room, keep the menu inside the
+    // viewport rather than letting it render off-screen.
+    left = clamp(left, VIEWPORT_PADDING, Math.max(viewportWidth - menuSize.width - VIEWPORT_PADDING, VIEWPORT_PADDING));
+    // Shift vertically: align with the toggle's top edge by default, but switch
+    // to the bottom edge (or clamp) if that would overflow the viewport.
+    let { top } = toggleRect;
+    if (top + menuSize.height > viewportHeight - VIEWPORT_PADDING) {
+        top = toggleRect.bottom - menuSize.height;
+    }
+    top = clamp(top, VIEWPORT_PADDING, Math.max(viewportHeight - menuSize.height - VIEWPORT_PADDING, VIEWPORT_PADDING));
+    return {
+        top,
+        left,
+        minWidth: Math.max(toggleRect.width, 160),
+        maxHeight: `${Math.max(viewportHeight - top - VIEWPORT_PADDING, 0)}px`,
+        resolvedSide: side,
+    };
+};
+function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal = false, placement = 'auto', alignment = 'start', }) {
     const [open, setOpen] = React.useState(false);
-    const [position, setPosition] = React.useState('down');
-    const [menuCoords, setMenuCoords] = React.useState(null);
-    // Used in default (non-portal) mode: wraps the entire dropdown
-    const dropdownRef = React.useRef(null);
-    // Used in portal mode: ref on the toggle wrapper to read its viewport coords
+    const [coords, setCoords] = React.useState(null);
+    // Initialize from `placement` (falling back to 'down' for 'auto') so the
+    // wrapper's `drop-*` class reflects the requested side even before the
+    // first open/measurement, matching the previous `drop-${placement}` class
+    // behavior (relevant for Bootstrap caret/orientation styling).
+    const [resolvedSide, setResolvedSide] = React.useState(placement === 'auto' ? 'down' : placement);
+    // Wraps the toggle in both modes — used to read its viewport-relative rect.
     const toggleRef = React.useRef(null);
-    // Ref on the rendered <ul> — used for outside-click detection in portal mode
+    // Ref on the rendered <ul> — used to measure its size and for outside-click detection.
     const menuRef = React.useRef(null);
     const toggle = () => {
-        setMenuCoords(null);
+        setCoords(null);
         setOpen((prev) => !prev);
     };
-    const resolvedInlinePosition = placement === 'auto' ? position : placement;
-    // Compute fixed coords from the toggle's bounding rect (portal mode only)
-    const computePortalCoords = React.useCallback(() => {
-        if (!toggleRef.current)
+    // Measures the toggle + menu and (re)computes fixed, pixel-perfect coords
+    // with collision detection, so the menu never overflows the viewport.
+    const updatePosition = React.useCallback(() => {
+        if (!toggleRef.current || !menuRef.current)
+            return;
+        const toggleRect = toggleRef.current.getBoundingClientRect();
+        // If the toggle itself has scrolled completely out of the viewport
+        // (regardless of `placement`), close the menu instead of leaving it
+        // rendered detached from the toggle that opened it.
+        const toggleIsMeasured = toggleRect.width > 0 || toggleRect.height > 0;
+        const toggleIsOutOfView = toggleRect.bottom <= 0
+            || toggleRect.top >= window.innerHeight
+            || toggleRect.right <= 0
+            || toggleRect.left >= window.innerWidth;
+        if (toggleIsMeasured && toggleIsOutOfView) {
+            setOpen(false);
             return;
-        const rect = toggleRef.current.getBoundingClientRect();
-        const spaceRight = window.innerWidth - rect.right;
-        const spaceBottom = window.innerHeight - rect.bottom;
-        const spaceTop = rect.top;
-        let resolvedPlacement;
-        if (placement === 'auto') {
-            if (spaceBottom < 150) {
-                resolvedPlacement = 'up';
-            }
-            else if (spaceRight < 150) {
-                resolvedPlacement = 'start';
-            }
-            else {
-                resolvedPlacement = 'down';
-            }
-        }
-        else {
-            resolvedPlacement = placement;
-        }
-        const openStart = resolvedPlacement === 'start';
-        const openEnd = resolvedPlacement === 'end';
-        const openUp = resolvedPlacement === 'up';
-        let availableHeight = spaceBottom;
-        if (openUp) {
-            availableHeight = spaceTop;
-        }
-        else if (openStart || openEnd) {
-            availableHeight = window.innerHeight - rect.top;
-        }
-        const verticalCoords = openUp
-            ? { bottom: window.innerHeight - rect.top + 4 }
-            : { top: openStart || openEnd ? rect.top : rect.bottom + 4 };
-        let horizontalCoords;
-        if (openStart) {
-            horizontalCoords = { right: window.innerWidth - rect.left + 4 };
-        }
-        else if (openEnd) {
-            horizontalCoords = { left: rect.right + 4 };
-        }
-        else {
-            horizontalCoords = { left: rect.left };
         }
-        setMenuCoords(Object.assign(Object.assign(Object.assign({}, verticalCoords), horizontalCoords), { minWidth: Math.max(rect.width, 160), maxHeight: `${Math.max(availableHeight - 12, 120)}px` }));
-    }, [placement]);
-    // Outside-click: default mode
-    React.useEffect(() => {
-        if (asPortal)
-            return () => { };
-        const handler = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, [asPortal]);
-    // Outside-click: portal mode (must check both toggle and floating menu)
-    React.useEffect(() => {
-        if (!asPortal || !open)
+        const menuRect = menuRef.current.getBoundingClientRect();
+        const _a = computeCoords(toggleRect, { width: menuRect.width, height: menuRect.height }, placement, alignment), { resolvedSide: side } = _a, menuCoords = tslib.__rest(_a, ["resolvedSide"]);
+        // In portal mode the menu is appended to document.body, whose containing
+        // block for `fixed` is always the viewport (no adjustment needed). In
+        // inline mode the menu stays next to the toggle, so we must look for a
+        // containing-block-establishing ancestor starting from the toggle.
+        const offset = asPortal
+            ? { top: 0, left: 0 }
+            : getFixedPositioningOffset(toggleRef.current);
+        setResolvedSide(side);
+        setCoords(Object.assign(Object.assign({}, menuCoords), { top: menuCoords.top - offset.top, left: menuCoords.left - offset.left }));
+    }, [placement, alignment, asPortal]);
+    // Throttles scroll/resize-triggered updates to at most once per frame,
+    // avoiding repeated forced reflows on busy/high-frequency scroll events.
+    const rafIdRef = React.useRef(null);
+    const scheduleUpdatePosition = React.useCallback(() => {
+        if (rafIdRef.current !== null)
+            return;
+        rafIdRef.current = window.requestAnimationFrame(() => {
+            rafIdRef.current = null;
+            updatePosition();
+        });
+    }, [updatePosition]);
+    // Outside-click detection (checks both the toggle and the floating menu,
+    // since in portal mode the menu isn't a DOM descendant of the toggle).
+    React.useLayoutEffect(() => {
+        if (!open)
             return () => { };
         const handler = (event) => {
             var _a, _b;
@@ -2953,35 +3407,25 @@ function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal
         };
         document.addEventListener('mousedown', handler);
         return () => document.removeEventListener('mousedown', handler);
-    }, [asPortal, open]);
-    // Auto-position: default mode
-    React.useEffect(() => {
-        if (asPortal || !open || !dropdownRef.current || placement !== 'auto')
-            return;
-        const rect = dropdownRef.current.getBoundingClientRect();
-        const spaceBottom = window.innerHeight - rect.bottom;
-        const spaceRight = window.innerWidth - rect.right;
-        if (spaceBottom < 150)
-            setPosition('up');
-        else if (spaceRight < 150)
-            setPosition('start');
-        else
-            setPosition('down');
-    }, [asPortal, open, placement]);
-    // Compute + track coords: portal mode
-    // Re-runs whenever the menu opens and keeps coords fresh on scroll/resize
-    React.useEffect(() => {
-        if (!asPortal || !open)
+    }, [open]);
+    // Computes the initial position synchronously (before paint, to avoid a
+    // flicker) and keeps it fresh while the menu is open and the viewport
+    // scrolls or resizes (throttled to one update per frame, see above).
+    React.useLayoutEffect(() => {
+        if (!open)
             return () => { };
-        computePortalCoords();
-        const update = () => computePortalCoords();
-        window.addEventListener('scroll', update, { passive: true, capture: true });
-        window.addEventListener('resize', update, { passive: true });
+        updatePosition();
+        window.addEventListener('scroll', scheduleUpdatePosition, { passive: true, capture: true });
+        window.addEventListener('resize', scheduleUpdatePosition, { passive: true });
         return () => {
-            window.removeEventListener('scroll', update, { capture: true });
-            window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', scheduleUpdatePosition, { capture: true });
+            window.removeEventListener('resize', scheduleUpdatePosition);
+            if (rafIdRef.current !== null) {
+                window.cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
         };
-    }, [asPortal, open, computePortalCoords]);
+    }, [open, updatePosition, scheduleUpdatePosition]);
     let ToggleElement;
     if (dropdownToggle) {
         ToggleElement = typeof dropdownToggle === 'function'
@@ -2991,57 +3435,30 @@ function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal
     else {
         ToggleElement = (jsxRuntime.jsx(DButtonIcon, { variant: "link", stopPropagationEnabled: false, "aria-label": "Toggle Dropdown", "aria-haspopup": "menu", "aria-expanded": open, onClick: toggle, icon: "MoreVertical" }));
     }
-    const portalMenuStyle = asPortal && menuCoords
+    // Until the first measurement is available, keep the menu off-screen but
+    // measurable (visibility: hidden preserves layout, unlike display: none).
+    const menuStyle = coords
         ? {
             position: 'fixed',
-            top: menuCoords.top,
-            bottom: menuCoords.bottom,
-            left: menuCoords.left,
-            right: menuCoords.right,
-            minWidth: menuCoords.minWidth,
-            maxHeight: menuCoords.maxHeight,
+            top: coords.top,
+            left: coords.left,
+            minWidth: coords.minWidth,
+            maxHeight: coords.maxHeight,
             overflowY: 'auto',
             zIndex: 1050,
             transform: 'none',
+            visibility: 'visible',
         }
-        : undefined;
-    let inlineTop = '100%';
-    if (resolvedInlinePosition === 'up') {
-        inlineTop = 'auto';
-    }
-    else if (resolvedInlinePosition === 'start' || resolvedInlinePosition === 'end') {
-        inlineTop = 0;
-    }
-    let inlineLeft = 0;
-    if (resolvedInlinePosition === 'start') {
-        inlineLeft = 'auto';
-    }
-    else if (resolvedInlinePosition === 'end') {
-        inlineLeft = '100%';
-    }
-    let inlineRight = 'auto';
-    if (resolvedInlinePosition === 'start') {
-        inlineRight = '100%';
-    }
-    let inlineTransform = 'translateY(4px)';
-    if (resolvedInlinePosition === 'up') {
-        inlineTransform = 'translateY(-4px)';
-    }
-    else if (resolvedInlinePosition === 'start') {
-        inlineTransform = 'translateX(-4px)';
-    }
-    else if (resolvedInlinePosition === 'end') {
-        inlineTransform = 'translateX(4px)';
-    }
-    const inlineMenuStyle = {
-        position: 'absolute',
-        top: inlineTop,
-        bottom: resolvedInlinePosition === 'up' ? '100%' : 'auto',
-        left: inlineLeft,
-        right: inlineRight,
-        transform: inlineTransform,
-    };
-    const menuItems = (jsxRuntime.jsx("ul", { ref: menuRef, role: "menu", className: classNames('dropdown-menu p-2', { show: open }, classNameMenu), style: portalMenuStyle !== null && portalMenuStyle !== void 0 ? portalMenuStyle : inlineMenuStyle, children: actions.map((action, index) => {
+        : {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            visibility: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 1050,
+            transform: 'none',
+        };
+    const menuItems = (jsxRuntime.jsx("ul", { ref: menuRef, role: "menu", className: classNames('dropdown-menu p-2', { show: open }, classNameMenu), style: menuStyle, children: actions.map((action, index) => {
             if (action.isDivider) {
                 return jsxRuntime.jsx("hr", { className: "dropdown-divider" }, index);
             }
@@ -3060,10 +3477,7 @@ function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal
                         }
                     }, disabled: action.disabled, children: [action.icon && jsxRuntime.jsx(DIcon, { icon: action.icon, className: "me-2", size: "1rem" }), action.label] })) }, index));
         }) }));
-    if (asPortal) {
-        return (jsxRuntime.jsxs("div", { ref: toggleRef, className: classNames('dropdown', className), children: [ToggleElement, open && menuCoords && reactDom.createPortal(menuItems, document.body)] }));
-    }
-    return (jsxRuntime.jsxs("div", { className: classNames(`dropdown drop-${resolvedInlinePosition}`, className), ref: dropdownRef, children: [ToggleElement, menuItems] }));
+    return (jsxRuntime.jsxs("div", { ref: toggleRef, className: classNames(`dropdown drop-${resolvedSide} d-inline-block`, className), children: [ToggleElement, open && (asPortal ? reactDom.createPortal(menuItems, document.body) : menuItems)] }));
 }
 
 function useScreenshot() {
@@ -3093,13 +3507,18 @@ function useScreenshot() {
 
 function useScreenshotDownload() {
     const { clipRef, takeBlob } = useScreenshot();
-    const download = React.useCallback(async () => {
-        const blob = await takeBlob();
+    const download = React.useCallback(async (fileName = 'voucher') => {
+        const blob = await takeBlob('image/jpeg');
         const url = window.URL.createObjectURL(blob);
         const link = window.document.createElement('a');
         link.style.display = 'none';
         link.href = url;
-        link.download = 'voucher.jpg';
+        // Fall back to the default base name when the caller passes a blank/whitespace value,
+        // so the file is never named just ".jpg".
+        const safeFileName = fileName.trim() || 'voucher';
+        // The extension is always appended by the hook to guarantee a valid image file,
+        // regardless of what fileName the caller passes (e.g. "receipt.png" -> "receipt.png.jpg").
+        link.download = `${safeFileName}.jpg`;
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
@@ -3113,11 +3532,15 @@ function useScreenshotDownload() {
 
 function useScreenshotWebShare() {
     const { takeBlob, clipRef } = useScreenshot();
-    const share = React.useCallback(async () => {
-        const blob = await takeBlob();
-        const image = new File([blob], 'voucher.jpeg', { type: 'image/jpeg' });
-        if (!navigator.canShare
-            && (navigator.canShare && !navigator.canShare({ files: [image] }))) {
+    const share = React.useCallback(async (fileName = 'voucher') => {
+        const blob = await takeBlob('image/jpeg');
+        // Fall back to the default base name when the caller passes a blank/whitespace value,
+        // so the file is never named just ".jpeg".
+        const safeFileName = fileName.trim() || 'voucher';
+        // The extension is always appended by the hook to guarantee a valid image file,
+        // regardless of what fileName the caller passes (e.g. "receipt.png" -> "receipt.png.jpeg").
+        const image = new File([blob], `${safeFileName}.jpeg`, { type: 'image/jpeg' });
+        if (!navigator.canShare || !navigator.canShare({ files: [image] })) {
             window.print();
             return;
         }
@@ -3129,11 +3552,11 @@ function useScreenshotWebShare() {
     };
 }
 
-function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText = 'Download', shareText = 'Share', className, children, }) {
+function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText = 'Download', shareText = 'Share', fileName = 'voucher', hideActions = false, className, children, }) {
     const { shareRef, share } = useScreenshotWebShare();
     const { downloadRef, download } = useScreenshotDownload();
     const handleShare = () => {
-        share()
+        share(fileName)
             .catch(async (err) => {
             if (onError) {
                 await onError(err);
@@ -3144,7 +3567,7 @@ function DVoucher({ amount, amountDetails, icon, title, onError, message, downlo
         });
     };
     const handleDownload = () => {
-        download()
+        download(fileName)
             .catch(async (err) => {
             if (onError) {
                 await onError(err);
@@ -3172,80 +3595,36 @@ function DVoucher({ amount, amountDetails, icon, title, onError, message, downlo
     return (jsxRuntime.jsx("div", { className: classNames('d-voucher', className), ref: (el) => {
             shareRef.current = el;
             downloadRef.current = el;
-        }, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "d-voucher-header", children: [resolvedIconProps && (jsxRuntime.jsx(DIcon, Object.assign({}, resolvedIconProps))), jsxRuntime.jsxs("div", { className: "text-center", children: [jsxRuntime.jsx("h3", { className: "mb-2", children: title }), jsxRuntime.jsx("p", { className: "m-0", children: message })] })] }), amount && (jsxRuntime.jsxs("div", { className: "d-voucher-amount", children: [jsxRuntime.jsx("div", { className: classNames('text-center fw-bold fs-3', amountDetails ? 'mb-1' : 'm-0'), children: amount }), amountDetails] })), jsxRuntime.jsx("hr", { className: "my-4" }), children, jsxRuntime.jsx("hr", { className: "my-4" }), jsxRuntime.jsxs("div", { className: "d-voucher-footer", children: [jsxRuntime.jsx(DButton, { onClick: handleShare, iconStart: "Share2", text: shareText, variant: "outline", size: "sm" }), jsxRuntime.jsx(DButton, { onClick: handleDownload, iconStart: "Download", text: downloadText, variant: "outline", size: "sm" })] })] }) }));
-}
-
-function useCountdown(seconds) {
-    const [secondsLeft, setSecondsLeft] = React.useState(seconds);
-    const [isActive, setIsActive] = React.useState(true);
-    const resetCountdown = React.useCallback((newSeconds = seconds) => {
-        setIsActive(false);
-        setSecondsLeft(newSeconds);
-    }, [seconds]);
-    const restartCountdown = React.useCallback(() => {
-        resetCountdown(seconds);
-        setIsActive(true);
-    }, [resetCountdown, seconds]);
-    React.useEffect(() => {
-        if (!isActive) {
-            return () => { };
-        }
-        const interval = setInterval(() => {
-            setSecondsLeft((prevSeconds) => {
-                const newSeconds = prevSeconds - 1;
-                if (newSeconds <= 0) {
-                    clearInterval(interval);
-                    setIsActive(false);
-                    return 0;
-                }
-                return newSeconds;
-            });
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [isActive]);
-    return { secondsLeft, restartCountdown };
+        }, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "d-voucher-header", children: [resolvedIconProps && (jsxRuntime.jsx(DIcon, Object.assign({}, resolvedIconProps))), jsxRuntime.jsxs("div", { className: "d-voucher-title-group", children: [jsxRuntime.jsx("h3", { className: "d-voucher-title", children: title }), jsxRuntime.jsx("p", { className: "d-voucher-message", children: message })] })] }), amount && (jsxRuntime.jsxs("div", { className: "d-voucher-amount", children: [jsxRuntime.jsx("div", { className: classNames('d-voucher-amount-value', { 'd-voucher-amount-value-with-details': !!amountDetails }), children: amount }), amountDetails] })), jsxRuntime.jsx("hr", { className: "d-voucher-divider" }), children, !hideActions && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "my-4" }), jsxRuntime.jsxs("div", { className: "d-voucher-footer", children: [jsxRuntime.jsx(DButton, { onClick: handleShare, iconStart: "Share2", text: shareText, variant: "outline", size: "sm" }), jsxRuntime.jsx(DButton, { onClick: handleDownload, iconStart: "Download", text: downloadText, variant: "outline", size: "sm" })] })] }))] }) }));
 }
 
 const defaultMessage = (secs) => (secs > 0
     ? `Didn't get any code? Resend in: ${secs}s`
     : "Didn't get any code?");
-function OtpCountdown({ seconds, resendText, message, }) {
-    const { secondsLeft, restartCountdown } = useCountdown(seconds);
-    return (jsxRuntime.jsxs("div", { className: "d-flex gap-2 align-items-center", children: [jsxRuntime.jsx("p", { className: "mb-0 flex-1", children: message ? message(secondsLeft) : defaultMessage(secondsLeft) }), jsxRuntime.jsx(DButton, { text: resendText, variant: "link", className: "text-nowrap", disabled: secondsLeft > 0, onClick: restartCountdown })] }));
+function OtpCountdown({ secondsLeft, restartCountdown, resendText, message, }) {
+    return (jsxRuntime.jsxs("div", { className: "d-otp-countdown", children: [jsxRuntime.jsx("p", { className: "d-otp-countdown-text", children: message ? message(secondsLeft) : defaultMessage(secondsLeft) }), jsxRuntime.jsx(DButton, { text: resendText, variant: "link", className: "text-nowrap", disabled: secondsLeft > 0, onClick: restartCountdown })] }));
 }
 
 const TEXT_PROPS = {
     resend: 'Resend',
-    resendText: 'Resend code',
+    resendText: 'Resend',
     submit: 'Authorize and continue',
     title: 'We will send you a 6-digit code to your associated phone number so you can continue with your request.',
+    invalidCode: 'Invalid code, please try again.',
     contact: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: "Problems with your digital token? Contact us" }), ' ', jsxRuntime.jsx("a", { href: "https://www.modyo.com", className: "link-primary text-nowrap", target: "_blank", rel: "noreferrer", children: "Contact us" })] })),
 };
 function DOtp({ className, action, isLoading, otpSize = 6, texts = TEXT_PROPS, seconds = 15, }) {
-    const [otp, setOtp] = React.useState('');
-    const [invalid, setInvalid] = React.useState(false);
-    const handler = React.useCallback(async () => {
-        if (otp.length < otpSize) {
-            setInvalid(true);
-            return;
-        }
-        setInvalid(false);
-        await action();
-    }, [
-        otp.length,
-        action,
-        otpSize,
-    ]);
-    return (jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx("p", { children: texts.title }), jsxRuntime.jsxs("div", { className: "d-flex flex-column gap-6 pb-4 px-3", children: [jsxRuntime.jsxs("div", { className: "d-flex flex-column gap-6", children: [jsxRuntime.jsx(DInputPin, { className: "modal-otp-pin", characters: otpSize, onChange: (e) => setOtp(e), invalid: invalid && otp.length < otpSize, placeholder: "0" }), jsxRuntime.jsx(OtpCountdown, { seconds: seconds, resendText: texts.resend })] }), jsxRuntime.jsx("hr", { className: "m-0" }), jsxRuntime.jsxs("div", { className: "d-flex flex-column flex-lg-row gap-4 align-items-center", children: [jsxRuntime.jsx(DButton, { text: texts.submit, onClick: () => {
-                                    handler().catch((err) => {
+    const { setOtp, invalid, submit, isLoading: isSubmitting, secondsLeft, restartCountdown, } = useOtp({ action, otpSize, seconds });
+    return (jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx("p", { children: texts.title }), jsxRuntime.jsxs("div", { className: "d-otp d-otp-content", children: [jsxRuntime.jsxs("div", { className: "d-otp-fields", children: [jsxRuntime.jsx(DInputPin, { className: "modal-otp-pin", characters: otpSize, onChange: (e) => setOtp(e), invalid: invalid, hint: invalid ? texts.invalidCode : undefined, placeholder: "0" }), jsxRuntime.jsx(OtpCountdown, { secondsLeft: secondsLeft, restartCountdown: restartCountdown, resendText: texts.resendText })] }), jsxRuntime.jsx("hr", { className: "d-otp-divider" }), jsxRuntime.jsxs("div", { className: "d-otp-footer", children: [jsxRuntime.jsx(DButton, { text: texts.submit, onClick: () => {
+                                    submit().catch((err) => {
                                         // eslint-disable-next-line no-console
                                         console.error('Error in DOtp action:', err);
                                     });
-                                }, loading: isLoading }), jsxRuntime.jsx("p", { className: "small ms-lg-auto mb-0", children: texts.contact })] })] })] }));
+                                }, loading: isLoading || isSubmitting }), jsxRuntime.jsx("p", { className: "d-otp-contact", children: texts.contact })] })] })] }));
 }
 
 function DefaultErrorBoundary({ resetErrorBoundary }) {
-    return (jsxRuntime.jsx(DAlert, { color: "danger", showClose: false, children: jsxRuntime.jsxs("div", { className: "d-flex align-items-center gap-2", children: [jsxRuntime.jsx("span", { children: "An unexpected error occurred." }), jsxRuntime.jsx(DButton, { color: "secondary", variant: "outline", size: "sm", onClick: resetErrorBoundary, children: "Retry" })] }) }));
+    return (jsxRuntime.jsx(DAlert, { color: "danger", showClose: false, children: jsxRuntime.jsxs("div", { className: "d-error-boundary-content", children: [jsxRuntime.jsx("span", { children: "An unexpected error occurred." }), jsxRuntime.jsx(DButton, { color: "secondary", variant: "outline", size: "sm", onClick: resetErrorBoundary, children: "Retry" })] }) }));
 }
 
 function DErrorBoundary({ name, fallback, resetKeys, onReset, onError, children, }) {
@@ -3263,15 +3642,15 @@ function DErrorBoundary({ name, fallback, resetKeys, onReset, onError, children,
 }
 
 function ErrorState({ message, onRetry, retryMessage = 'Retry', color = 'danger', }) {
-    return (jsxRuntime.jsxs(DAlert, { color: color, className: "d-flex align-items-center gap-3", children: [jsxRuntime.jsx("div", { className: "flex-grow-1", children: jsxRuntime.jsx("p", { className: "mb-0", children: message !== null && message !== void 0 ? message : 'An unexpected error occurred.' }) }), onRetry && (jsxRuntime.jsx(DButton, { onClick: onRetry, text: retryMessage, variant: "outline", iconStart: "RefreshCw" }))] }));
+    return (jsxRuntime.jsxs(DAlert, { color: color, className: "d-error-state", children: [jsxRuntime.jsx("div", { className: "d-error-state-content", children: jsxRuntime.jsx("p", { className: "d-error-state-message", children: message !== null && message !== void 0 ? message : 'An unexpected error occurred.' }) }), onRetry && (jsxRuntime.jsx(DButton, { onClick: onRetry, text: retryMessage, variant: "outline", iconStart: "RefreshCw" }))] }));
 }
 
 function EmptyState({ message, icon = 'FileText', actionText, onAction, }) {
-    return (jsxRuntime.jsxs("div", { className: "d-flex flex-column align-items-center justify-content-center p-5 text-center", children: [jsxRuntime.jsx(DIcon, { icon: icon, size: "3rem", className: "text-secondary mb-3" }), jsxRuntime.jsx("p", { className: "text-secondary mb-3", children: message !== null && message !== void 0 ? message : 'No data available.' }), actionText && onAction && (jsxRuntime.jsx(DButton, { onClick: onAction, text: actionText, variant: "outline" }))] }));
+    return (jsxRuntime.jsxs("div", { className: "d-empty-state", children: [jsxRuntime.jsx(DIcon, { icon: icon, size: "3rem", className: "d-empty-state-icon" }), jsxRuntime.jsx("p", { className: "d-empty-state-message", children: message !== null && message !== void 0 ? message : 'No data available.' }), actionText && onAction && (jsxRuntime.jsx(DButton, { onClick: onAction, text: actionText, variant: "outline" }))] }));
 }
 
 function LoadingState({ ariaLabel = 'Loading...', className }) {
-    return (jsxRuntime.jsx("div", { className: `d-flex align-items-center justify-content-center p-4 ${className || ''}`.trim(), "aria-busy": "true", "aria-live": "polite", children: jsxRuntime.jsx("span", { className: "spinner-border", role: "status", "aria-label": ariaLabel }) }));
+    return (jsxRuntime.jsx("div", { className: `d-loading-state ${className || ''}`.trim(), "aria-busy": "true", "aria-live": "polite", children: jsxRuntime.jsx("span", { className: "spinner-border", role: "status", "aria-label": ariaLabel }) }));
 }
 
 function render(renderable) {
@@ -3330,7 +3709,7 @@ function DConfirmModalUI({ entry }) {
             }
         });
     }, [onConfirmAction]);
-    return (jsxRuntime.jsxs(DModal, { name: entry.id, size: "lg", className: `confirm-modal ${critical ? 'critical-modal' : ''}`, children: [jsxRuntime.jsx(DModal.Header, { onClose: handleClose, showCloseButton: true, children: jsxRuntime.jsx("h5", { className: "fw-bold", children: title }) }), jsxRuntime.jsxs(DModal.Body, { className: "py-3 px-5", children: [jsxRuntime.jsx("p", { className: "mb-4", children: message }), critical && (jsxRuntime.jsx(ForwardedDInput, { type: "text", label: critical.codeLabel || 'Confirmation code', placeholder: critical.inputPlaceholder, value: confirmationCode, onChange: (value) => setConfirmationCode(value), className: "mb-4", autoFocus: true }))] }), jsxRuntime.jsxs(DModal.Footer, { children: [jsxRuntime.jsx(DButton, { text: cancelLabel, variant: "outline", color: "secondary", onClick: handleClose, disabled: internalLoading }), jsxRuntime.jsx(DButton, { text: confirmLabel, color: confirmColor, onClick: handleConfirmClick, disabled: isConfirmDisabled, loading: internalLoading })] })] }));
+    return (jsxRuntime.jsxs(DModal, { name: entry.id, size: "lg", className: `confirm-modal ${critical ? 'critical-modal' : ''}`, children: [jsxRuntime.jsx(DModal.Header, { onClose: handleClose, showCloseButton: true, children: jsxRuntime.jsx("h5", { className: "fw-bold", children: title }) }), jsxRuntime.jsxs(DModal.Body, { className: "d-confirm-modal-body", children: [jsxRuntime.jsx("p", { className: "d-confirm-modal-message", children: message }), critical && (jsxRuntime.jsx(ForwardedDInput, { type: "text", label: critical.codeLabel || 'Confirmation code', placeholder: critical.inputPlaceholder, value: confirmationCode, onChange: (value) => setConfirmationCode(value), className: "d-confirm-modal-field", autoFocus: true }))] }), jsxRuntime.jsxs(DModal.Footer, { children: [jsxRuntime.jsx(DButton, { text: cancelLabel, variant: "outline", color: "secondary", onClick: handleClose, disabled: internalLoading }), jsxRuntime.jsx(DButton, { text: confirmLabel, color: confirmColor, onClick: handleConfirmClick, disabled: isConfirmDisabled, loading: internalLoading })] })] }));
 }
 
 /**
@@ -3460,14 +3839,17 @@ exports.DVoucher = DVoucher;
 exports.EmptyState = EmptyState;
 exports.ErrorState = ErrorState;
 exports.LoadingState = LoadingState;
+exports.buildUrl = buildUrl;
 exports.changeQueryString = changeQueryString;
 exports.checkMediaQuery = checkMediaQuery;
 exports.configureI18n = configureI8n;
 exports.formatCurrency = formatCurrency;
 exports.getCssVariable = getCssVariable;
 exports.getQueryString = getQueryString;
+exports.sanitizeHref = sanitizeHref;
 exports.subscribeToMediaQuery = subscribeToMediaQuery;
 exports.useConfirmModal = useConfirmModal;
+exports.useCountdown = useCountdown;
 exports.useDContext = useDContext;
 exports.useDPortalContext = useDPortalContext;
 exports.useDToast = useDToast;
@@ -3483,7 +3865,11 @@ exports.useMediaBreakpointUpXl = useMediaBreakpointUpXl;
 exports.useMediaBreakpointUpXs = useMediaBreakpointUpXs;
 exports.useMediaBreakpointUpXxl = useMediaBreakpointUpXxl;
 exports.useMediaQuery = useMediaQuery;
+exports.useOtp = useOtp;
 exports.useProvidedRefOrCreate = useProvidedRefOrCreate;
+exports.useScreenshot = useScreenshot;
+exports.useScreenshotDownload = useScreenshotDownload;
+exports.useScreenshotWebShare = useScreenshotWebShare;
 exports.useStackState = useStackState;
 exports.useTabContext = useTabContext;
 exports.validatePhoneNumber = validatePhoneNumber;