@dynamic-framework/ui-react 2.0.0-dev.1 → 2.0.0-dev.11

package/dist/index.js

@@ -1,10 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var classNames = require('classnames');
+var React = require('react');
 var tslib = require('tslib');
+var LucideIcons = require('lucide-react');
 var reactDom = require('react-dom');
+var framerMotion = require('framer-motion');
 var fileSelector = require('file-selector');
 var reactSplide = require('@splidejs/react-splide');
 var currency = require('currency.js');
@@ -14,57 +16,34 @@ var Select = require('react-select');
 var mask = require('@react-input/mask');
 var ResponsivePagination = require('react-responsive-pagination');
 var react = require('@floating-ui/react');
-var ContentLoader = require('react-content-loader');
 var reactHotToast = require('react-hot-toast');
 var reactInternationalPhone = require('react-international-phone');
 var googleLibphonenumber = require('google-libphonenumber');
+var html2canvas = require('html2canvas');
 var i18n = require('i18next');
 var reactI18next = require('react-i18next');
 
-const PREFIX_BS = 'bs-';
-
-function DIconBase({ icon, theme, style, className, size, loading = false, loadingDuration = 1.8, hasCircle = false, circleSize = `calc(var(--${PREFIX_BS}icon-size) * 1)`, color, backgroundColor, materialStyle = false, familyClass = 'bi', familyPrefix = 'bi-', dataAttributes, }) {
-    const colorStyle = React.useMemo(() => {
-        if (color) {
-            return { [`--${PREFIX_BS}icon-component-color`]: color };
-        }
-        if (theme) {
-            return { [`--${PREFIX_BS}icon-component-color`]: `var(--${PREFIX_BS}${theme})` };
-        }
-        return {};
-    }, [color, theme]);
-    const backgroundStyle = React.useMemo(() => {
-        if (backgroundColor) {
-            return { [`--${PREFIX_BS}icon-component-bg-color`]: backgroundColor };
-        }
-        if (hasCircle) {
-            if (theme) {
-                return { [`--${PREFIX_BS}icon-component-bg-color`]: `rgba(var(--${PREFIX_BS}${theme}-rgb), 0.1)` };
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
             }
-            return { [`--${PREFIX_BS}icon-component-bg-color`]: `rgba(var(--${PREFIX_BS}body-color-rgb), 0.1)` };
-        }
-        return {};
-    }, [backgroundColor, hasCircle, theme]);
-    const circleSizeStyle = React.useMemo(() => {
-        if (hasCircle) {
-            return { [`--${PREFIX_BS}icon-component-padding`]: circleSize };
-        }
-        return { [`--${PREFIX_BS}icon-component-padding`]: '0' };
-    }, [circleSize, hasCircle]);
-    const generateStyleVariables = React.useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ [`--${PREFIX_BS}icon-component-loading-duration`]: `${loadingDuration}s` }, size && { [`--${PREFIX_BS}icon-component-size`]: size }), colorStyle), backgroundStyle), circleSizeStyle), style)), [size, loadingDuration, colorStyle, backgroundStyle, circleSizeStyle, style]);
-    const generateClasses = React.useMemo(() => (Object.assign(Object.assign({ 'd-icon': true, [familyClass]: true, 'd-icon-loading': loading }, !materialStyle && {
-        [`${familyPrefix}${icon}`]: true,
-    }), className && { [className]: true })), [
-        familyClass,
-        loading,
-        className,
-        materialStyle,
-        familyPrefix,
-        icon,
-    ]);
-    return (jsxRuntime.jsx("i", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, dataAttributes, { children: materialStyle && icon })));
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
+var LucideIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(LucideIcons);
+
+const PREFIX_BS = 'bs-';
+
 function useDisableBodyScrollEffect(disable) {
     React.useEffect(() => {
         if (disable) {
@@ -221,7 +200,10 @@ function DPortalContextProvider({ portalName, children, availablePortals, }) {
     return (jsxRuntime.jsxs(DPortalContext.Provider, { value: value, children: [children, created && reactDom.createPortal(
             // eslint-disable-next-line max-len
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-            jsxRuntime.jsx("div", { onClick: ({ target }) => handleClose(target), onKeyDown: () => { }, children: stack.map(({ Component, name, payload, }) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: "backdrop fade show" }), jsxRuntime.jsx(Component, { name: name, payload: payload })] }, name))) }), document.getElementById(portalName))] }));
+            jsxRuntime.jsx("div", { onClick: ({ target }) => handleClose(target), onKeyDown: () => { }, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: stack.flatMap(({ Component, name, payload, }) => [
+                        jsxRuntime.jsx(framerMotion.motion.div, { className: "backdrop", initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0, transition: { delay: 0.3 } }, transition: { duration: 0.15, ease: 'linear' } }, `${name}-backdrop`),
+                        jsxRuntime.jsx(Component, { name: name, payload: payload }, name),
+                    ]) }) }), document.getElementById(portalName))] }));
 }
 function useDPortalContext() {
     const context = React.useContext(DPortalContext);
@@ -250,31 +232,27 @@ const DEFAULT_STATE = {
         materialStyle: false,
     },
     iconMap: {
-        x: 'x',
-        xLg: 'x-lg',
-        chevronUp: 'chevron-up',
-        chevronDown: 'chevron-down',
-        chevronLeft: 'chevron-left',
-        chevronRight: 'chevron-right',
-        upload: 'cloud-upload',
-        calendar: 'calendar',
-        check: 'check',
+        x: 'X',
+        xLg: 'X',
+        chevronUp: 'ChevronUp',
+        chevronDown: 'ChevronDown',
+        chevronLeft: 'ChevronLeft',
+        chevronRight: 'ChevronRight',
+        upload: 'Upload',
+        calendar: 'Calendar',
+        check: 'Check',
         alert: {
-            warning: 'exclamation-circle',
-            danger: 'exclamation-triangle',
-            success: 'check-circle',
-            info: 'info-circle',
-            dark: 'info-circle',
-            light: 'info-circle',
-            primary: 'info-circle',
-            secondary: 'info-circle',
+            warning: 'AlertCircle',
+            danger: 'AlertTriangle',
+            success: 'CheckCircle',
+            info: 'Info',
         },
         input: {
-            search: 'search',
-            show: 'eye',
-            hide: 'eye-slash',
-            increase: 'plus-square',
-            decrease: 'dash-square',
+            search: 'Search',
+            show: 'Eye',
+            hide: 'EyeOff',
+            increase: 'Plus',
+            decrease: 'Minus',
         },
     },
     breakpoints: {
@@ -321,31 +299,170 @@ function useDContext() {
     return context;
 }
 
+function subscribeToMediaQuery(query, callback) {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', callback);
+    return () => {
+        mediaQueryList.removeEventListener('change', callback);
+    };
+}
+function checkMediaQuery(query) {
+    return window.matchMedia(query).matches;
+}
+
+function useMediaQuery(mediaQuery, useListener = false) {
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    const noop = (_) => () => { };
+    return React.useSyncExternalStore(useListener ? (cb) => subscribeToMediaQuery(mediaQuery, cb) : noop, () => (mediaQuery ? checkMediaQuery(mediaQuery) : true), () => false);
+}
+
+function useMediaBreakpointUp(breakpoint, useListener = false) {
+    const { breakpoints } = useDContext();
+    const mediaQuery = React.useMemo(() => (`(min-width: ${breakpoints[breakpoint]})`), [breakpoint, breakpoints]);
+    return useMediaQuery(mediaQuery, useListener);
+}
+function useMediaBreakpointUpXs(useListener = false) {
+    return useMediaBreakpointUp('xs', useListener);
+}
+function useMediaBreakpointUpSm(useListener = false) {
+    return useMediaBreakpointUp('sm', useListener);
+}
+function useMediaBreakpointUpMd(useListener = false) {
+    return useMediaBreakpointUp('md', useListener);
+}
+function useMediaBreakpointUpLg(useListener = false) {
+    return useMediaBreakpointUp('lg', useListener);
+}
+function useMediaBreakpointUpXl(useListener = false) {
+    return useMediaBreakpointUp('xl', useListener);
+}
+function useMediaBreakpointUpXxl(useListener = false) {
+    return useMediaBreakpointUp('xxl', useListener);
+}
+
+/**
+ * React hook to resolve a responsive property value based on the current viewport breakpoint.
+ *
+ * Given a `ResponsiveProp` object, this hook returns the value for the highest matching breakpoint.
+ * If multiple breakpoints match, the value for the largest (highest) breakpoint is used.
+ * If no breakpoints match, `undefined` is returned.
+ *
+ * @param useListener - Whether to listen for breakpoint changes (default: false).
+ * @returns An object with a `responsivePropValue` function that takes a
+ * `ResponsiveProp` and returns the resolved value.
+ *
+ * Usage example:
+ * ```ts
+ * const { responsivePropValue } = useResponsiveProp();
+ * const value = responsivePropValue({ xs: "A", md: "B", xl: "C" });
+ * // value will be "C" if xl breakpoint is active, "B" if md is active, etc.
+ * ```
+ */
+function useResponsiveProp(useListener = false) {
+    const bpXsUp = useMediaBreakpointUpXs(useListener);
+    const bpSmUp = useMediaBreakpointUpSm(useListener);
+    const bpMdUp = useMediaBreakpointUpMd(useListener);
+    const bpLgUp = useMediaBreakpointUpLg(useListener);
+    const bpXlUp = useMediaBreakpointUpXl(useListener);
+    const bpXxlUp = useMediaBreakpointUpXxl(useListener);
+    const responsivePropValue = React.useCallback((prop) => {
+        // Pick the highest matched breakpoint value that is defined in prop
+        if (prop.xxl !== undefined && bpXxlUp)
+            return prop.xxl;
+        if (prop.xl !== undefined && bpXlUp)
+            return prop.xl;
+        if (prop.lg !== undefined && bpLgUp)
+            return prop.lg;
+        if (prop.md !== undefined && bpMdUp)
+            return prop.md;
+        if (prop.sm !== undefined && bpSmUp)
+            return prop.sm;
+        if (prop.xs !== undefined && bpXsUp)
+            return prop.xs;
+        // Fallback: return undefined if no breakpoint matches
+        return undefined;
+    }, [bpSmUp, bpMdUp, bpLgUp, bpXlUp, bpXxlUp, bpXsUp]);
+    return { responsivePropValue };
+}
+
+function DIconBase({ icon, color, style, className, size, useListenerSize = false, hasCircle = false, materialStyle = false, familyClass, familyPrefix, strokeWidth = 2, dataAttributes, }) {
+    // If materialStyle is true, use Material Design icons (legacy)
+    const useMaterialIcons = materialStyle;
+    // Get Lucide icon component
+    const LucideIcon = React.useMemo(() => {
+        if (useMaterialIcons)
+            return null;
+        // Try to find the icon in Lucide (expects PascalCase)
+        const icons = LucideIcons__namespace;
+        return icons[icon] || null;
+    }, [icon, useMaterialIcons]);
+    const colorStyle = React.useMemo(() => {
+        if (color) {
+            return { [`--${PREFIX_BS}icon-component-color`]: `var(--${PREFIX_BS}${color})` };
+        }
+        return {};
+    }, [color]);
+    const backgroundStyle = React.useMemo(() => {
+        if (hasCircle) {
+            if (color) {
+                return { [`--${PREFIX_BS}icon-component-bg-color`]: `rgba(var(--${PREFIX_BS}${color}-rgb), 0.1)` };
+            }
+            return { [`--${PREFIX_BS}icon-component-bg-color`]: `rgba(var(--${PREFIX_BS}body-color-rgb), 0.1)` };
+        }
+        return {};
+    }, [hasCircle, color]);
+    const { responsivePropValue } = useResponsiveProp(useListenerSize);
+    const resolvedSize = React.useMemo(() => {
+        if (!size)
+            return undefined;
+        if (typeof size === 'string')
+            return size;
+        return responsivePropValue(size);
+    }, [responsivePropValue, size]);
+    const generateStyleVariables = React.useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, resolvedSize && { [`--${PREFIX_BS}icon-component-size`]: resolvedSize }), colorStyle), backgroundStyle), hasCircle && { [`--${PREFIX_BS}icon-component-padding`]: `calc(var(--${PREFIX_BS}icon-component-size, 24px) * 0.4)` }), style)), [resolvedSize, colorStyle, backgroundStyle, hasCircle, style]);
+    const generateClasses = React.useMemo(() => (Object.assign({ 'd-icon': true }, className && { [className]: true })), [className]);
+    const iconSize = React.useMemo(() => {
+        if (resolvedSize) {
+            const numSize = parseInt(resolvedSize, 10);
+            return !Number.isNaN(numSize) ? numSize : resolvedSize;
+        }
+        return undefined;
+    }, [resolvedSize]);
+    // Render Material Design icon (legacy support)
+    if (useMaterialIcons) {
+        return (jsxRuntime.jsx("i", Object.assign({ className: classNames(generateClasses, familyClass), style: generateStyleVariables }, dataAttributes, { children: icon })));
+    }
+    // Render Lucide icon
+    if (!LucideIcon) {
+        if (familyClass && familyPrefix) {
+            return (jsxRuntime.jsx("i", Object.assign({ className: classNames(generateClasses, familyClass, `${familyPrefix}${icon}`), style: generateStyleVariables }, dataAttributes)));
+        }
+        // eslint-disable-next-line no-console
+        console.warn(`Icon "${icon}" not found in Lucide. Make sure to use PascalCase names (e.g., "Home", "User", "Settings")`);
+        return (jsxRuntime.jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, dataAttributes, { children: "?" })));
+    }
+    return (jsxRuntime.jsx("span", Object.assign({ className: classNames(generateClasses), style: generateStyleVariables }, dataAttributes, { children: jsxRuntime.jsx(LucideIcon, { size: iconSize || 24, strokeWidth: strokeWidth }) })));
+}
+
 function DIcon(_a) {
     var { familyClass: propFamilyClass, familyPrefix: propFamilyPrefix, materialStyle: propMaterialStyle } = _a, props = tslib.__rest(_a, ["familyClass", "familyPrefix", "materialStyle"]);
     const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
     return (jsxRuntime.jsx(DIconBase, Object.assign({ familyClass: propFamilyClass || familyClass, familyPrefix: propFamilyPrefix || familyPrefix, materialStyle: propMaterialStyle || materialStyle }, props)));
 }
 
-function DAlert({ theme = 'success', icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle = false, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle = false, showClose, onClose, children, id, className, style, dataAttributes, }) {
+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();
-    const icon = React.useMemo(() => iconProp || alert[theme], [alert, iconProp, theme]);
+    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-${theme}`]: true, 'fade show': !!showClose }, className && { [className]: true })), [theme, showClose, className]);
+    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 }) }))] })));
 }
 
-function DAvatar({ id, size, image, name: nameProp, useNameAsInitials = false, theme = 'secondary', variant, className, style, dataAttributes, }) {
-    const generateClasses = React.useMemo(() => {
-        const variantClass = variant
-            ? `d-avatar-${variant}-${theme}`
-            : `d-avatar-${theme}`;
-        return {
-            'd-avatar': true,
-            [variantClass]: true,
-            [`d-avatar-${size}`]: !!size,
-        };
-    }, [variant, theme, size]);
+function DAvatar({ id, size, image, name: nameProp, useNameAsInitials = false, className, style, dataAttributes, }) {
+    const generateClasses = React.useMemo(() => ({
+        'd-avatar': true,
+        [`d-avatar-${size}`]: !!size,
+    }), [size]);
     const name = React.useMemo(() => {
         if (!nameProp) {
             return undefined;
@@ -358,16 +475,21 @@ function DAvatar({ id, size, image, name: nameProp, useNameAsInitials = false, t
     return (jsxRuntime.jsxs("div", Object.assign({ className: classNames(generateClasses, className), style: style, id: id }, dataAttributes, { children: [image && jsxRuntime.jsx("img", { src: image, alt: nameProp, className: "d-avatar-img" }), (name && !image) && jsxRuntime.jsx("span", { className: "d-avatar-name", children: name })] })));
 }
 
-function DBadge({ text, soft = false, theme = 'primary', id, rounded, className, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, dataAttributes, }) {
+function DBadge({ text, soft = false, color = 'primary', id, rounded, className, size, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, dataAttributes, }) {
     const generateClasses = React.useMemo(() => ({
         badge: true,
-        [`badge-${theme}`]: !!theme && !soft,
-        [`badge-soft-${theme}`]: !!theme && soft,
+        [`badge-${color}`]: !!color && !soft,
+        [`badge-soft-${color}`]: !!color && soft,
         'rounded-pill': !!rounded,
-    }), [rounded, soft, theme]);
+        [`badge-${size}`]: !!size,
+    }), [rounded, soft, color, size]);
     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 }))] })));
 }
 
+function DBox({ className, style, children, dataAttributes, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ style: style, className: classNames('d-box', className) }, dataAttributes, { children: children })));
+}
+
 /* eslint-disable */
 /**
  * This file is originally from `@primer/react`
@@ -389,7 +511,7 @@ function useProvidedRefOrCreate(providedRef) {
 }
 
 function DInput(_a, ref) {
-    var { id: idProp, style, className, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, labelIconMaterialStyle, disabled = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconStart, iconStartDisabled, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconStartMaterialStyle, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, iconEndMaterialStyle, hint, size, invalid = false, valid = false, floatingLabel = false, inputStart, inputEnd, value, placeholder = '', dataAttributes, onChange, onIconStartClick, onIconEndClick } = _a, inputProps = tslib.__rest(_a, ["id", "style", "className", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "labelIconMaterialStyle", "disabled", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "iconStart", "iconStartDisabled", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconStartMaterialStyle", "iconEnd", "iconEndDisabled", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "iconEndMaterialStyle", "hint", "size", "invalid", "valid", "floatingLabel", "inputStart", "inputEnd", "value", "placeholder", "dataAttributes", "onChange", "onIconStartClick", "onIconEndClick"]);
+    var { id: idProp, style, className, label = '', disabled = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconStart, iconStartDisabled, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconStartMaterialStyle, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, iconEndMaterialStyle, hint, size, invalid = false, valid = false, floatingLabel = false, inputStart, inputEnd, value, placeholder = '', dataAttributes, readonly, onChange, onIconStartClick, onIconEndClick } = _a, inputProps = tslib.__rest(_a, ["id", "style", "className", "label", "disabled", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "iconStart", "iconStartDisabled", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconStartMaterialStyle", "iconEnd", "iconEndDisabled", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "iconEndMaterialStyle", "hint", "size", "invalid", "valid", "floatingLabel", "inputStart", "inputEnd", "value", "placeholder", "dataAttributes", "readonly", "onChange", "onIconStartClick", "onIconEndClick"]);
     const inputRef = useProvidedRefOrCreate(ref);
     const innerId = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
@@ -426,7 +548,7 @@ function DInput(_a, ref) {
     const inputComponent = React.useMemo(() => (jsxRuntime.jsx("input", Object.assign({ ref: inputRef, id: id, className: classNames('form-control', {
             'is-invalid': invalid,
             'is-valid': valid,
-        }), disabled: disabled || loading, value: value, onChange: handleOnChange }, (floatingLabel || placeholder) && { placeholder: floatingLabel ? '' : placeholder }, ariaDescribedby && { 'aria-describedby': ariaDescribedby }, inputProps))), [
+        }), disabled: disabled || loading, readOnly: readonly, value: value, onChange: handleOnChange }, (floatingLabel || placeholder) && { placeholder: floatingLabel ? '' : placeholder }, ariaDescribedby && { 'aria-describedby': ariaDescribedby }, inputProps))), [
         ariaDescribedby,
         disabled,
         handleOnChange,
@@ -439,14 +561,11 @@ function DInput(_a, ref) {
         floatingLabel,
         valid,
         value,
+        readonly,
     ]);
-    const labelComponent = React.useMemo(() => (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix, materialStyle: labelIconMaterialStyle }))] })), [
+    const labelComponent = React.useMemo(() => (jsxRuntime.jsx("label", { htmlFor: id, children: label })), [
         id,
         label,
-        labelIcon,
-        labelIconFamilyClass,
-        labelIconFamilyPrefix,
-        labelIconMaterialStyle,
     ]);
     const dynamicComponent = React.useMemo(() => {
         if (floatingLabel) {
@@ -575,7 +694,7 @@ async function urlToFile(url) {
                 null,
                 {
                     code: ErrorCodes.FailedFetch,
-                    message: `Failed to fetch file from ${url}`,
+                    message: `Failed to fetch file from ${url} (HTTP ${res.status})`,
                 },
             ];
         }
@@ -585,11 +704,13 @@ async function urlToFile(url) {
         return [file, null];
     }
     catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        const isCorsError = errorMessage.includes('CORS') || errorMessage.includes('Failed to fetch');
         return [
             null,
             {
                 code: ErrorCodes.FailedFetch,
-                message: `Failed to fetch file from ${url}}`,
+                message: `Failed to fetch file from ${url}${isCorsError ? ' (CORS error - file may not be accessible from this domain)' : ` (${errorMessage})`}`,
             },
         ];
     }
@@ -860,38 +981,72 @@ 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 }), 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, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })), jsxRuntime.jsx("div", { className: "d-box-content", children: typeof children === 'function'
                                 ? children(openFileDialog)
-                                : children })] })) })), !!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: "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}`))) }))] }));
 }
 
-function DButton({ theme = 'primary', size, variant, state, text = '', ariaLabel, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, value, type = 'button', loading = false, loadingAriaLabel, disabled = false, stopPropagationEnabled = true, className, style, form, dataAttributes, onClick, }) {
-    const generateClasses = React.useMemo(() => {
+const DButton = React.forwardRef((props, ref) => {
+    const { color = 'primary', size, variant, text, children, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, loading = false, loadingText, loadingAriaLabel, disabled = false, className, style, dataAttributes, onClick, type = 'button' } = 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"]);
+    const [buttonWidth, setButtonWidth] = React.useState();
+    const buttonRef = React.useRef(null);
+    const isDisabled = React.useMemo(() => disabled || loading, [disabled, loading]);
+    const content = React.useMemo(() => children || text, [children, text]);
+    const classes = React.useMemo(() => {
         const variantClass = variant
-            ? `btn-${variant}-${theme}`
-            : `btn-${theme}`;
-        return Object.assign(Object.assign(Object.assign({ btn: true, [variantClass]: true }, size && { [`btn-${size}`]: true }), (state && state !== 'disabled') && { [state]: true }), { loading });
-    }, [variant, theme, size, state, loading]);
-    const clickHandler = React.useCallback((event) => {
-        if (stopPropagationEnabled) {
-            event.stopPropagation();
+            ? `btn-${variant}-${color}`
+            : `btn-${color}`;
+        return {
+            btn: true,
+            [variantClass]: true,
+            [`btn-${size}`]: !!size,
+            loading,
+        };
+    }, [variant, color, size, loading]);
+    const ariaLabel = React.useMemo(() => {
+        const ariaLabelProp = rest['aria-label'];
+        return loading
+            ? loadingAriaLabel || ariaLabelProp || text
+            : ariaLabelProp || text;
+    }, [loading, loadingAriaLabel, rest, text]);
+    const handleClick = React.useCallback((event) => {
+        if (disabled || loading) {
+            event.preventDefault();
+            return;
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [stopPropagationEnabled, onClick]);
-    const isDisabled = React.useMemo(() => (state === 'disabled' || loading || disabled), [state, loading, disabled]);
-    const newAriaLabel = React.useMemo(() => (loading
-        ? (loadingAriaLabel || ariaLabel || text)
-        : (ariaLabel || text)), [loading, loadingAriaLabel, ariaLabel, text]);
-    return (jsxRuntime.jsxs("button", Object.assign({ className: classNames(generateClasses, className), style: style, type: type, disabled: isDisabled, onClick: clickHandler, "aria-label": newAriaLabel, form: form }, dataAttributes, value && { value }, { children: [iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), (text && !loading) && (jsxRuntime.jsx("span", { children: text })), loading && (jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) })), iconEnd && (jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }))] })));
-}
+    }, [disabled, loading, onClick]);
+    React.useEffect(() => {
+        if (!loading && buttonRef.current) {
+            const width = buttonRef.current.offsetWidth;
+            if (width > 0)
+                setButtonWidth(width);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [content, iconEnd, iconStart]);
+    return (jsxRuntime.jsxs("button", Object.assign({ ref: (node) => {
+            buttonRef.current = node;
+            if (typeof ref === 'function')
+                ref(node);
+            // eslint-disable-next-line max-len
+            // eslint-disable-next-line no-param-reassign, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+            else if (ref)
+                ref.current = node;
+        }, 
+        // 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 }))] }))] })));
+});
+DButton.displayName = 'DButton';
 
-function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, theme = 'primary', type = 'button', loading = false, disabled = false, stopPropagationEnabled = true, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, }) {
+function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, color = 'primary', type = 'button', loading = false, disabled = false, stopPropagationEnabled = true, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, }) {
     const generateClasses = React.useMemo(() => {
         const variantClass = variant
-            ? `btn-${variant}-${theme}`
-            : `btn-${theme}`;
+            ? `btn-${variant}-${color}`
+            : `btn-${color}`;
         return Object.assign(Object.assign(Object.assign({ 'btn d-button-icon': true, [variantClass]: true }, size && { [`btn-${size}`]: true }), (state && state !== 'disabled') && { [state]: true }), { loading });
-    }, [variant, theme, size, state, loading]);
+    }, [variant, color, size, state, loading]);
     const clickHandler = React.useCallback((event) => {
         if (stopPropagationEnabled) {
             event.stopPropagation();
@@ -919,10 +1074,10 @@ function DCardFooter({ className, style, children, }) {
     return (jsxRuntime.jsx("div", { className: classNames('card-footer', className), style: style, children: children }));
 }
 
-function DCard({ className, style, children, dataAttributes, }) {
+function DCard$1({ className, style, children, dataAttributes, }) {
     return (jsxRuntime.jsx("div", Object.assign({ style: style, className: classNames('card', className) }, dataAttributes, { children: children })));
 }
-var DCard$1 = Object.assign(DCard, {
+var DCard = Object.assign(DCard$1, {
     Header: DCardHeader,
     Body: DCardBody,
     Footer: DCardFooter,
@@ -933,7 +1088,7 @@ function DCarouselSlide(_a) {
     return (jsxRuntime.jsx(reactSplide.SplideSlide, Object.assign({ className: classNames('d-carousel-slide', className) }, props)));
 }
 
-function DCarousel(_a, ref) {
+function DCarousel$1(_a, ref) {
     var { children, className, style, options, dataAttributes } = _a, props = tslib.__rest(_a, ["children", "className", "style", "options", "dataAttributes"]);
     return (jsxRuntime.jsx(reactSplide.Splide, Object.assign({ className: classNames('d-carousel', className), style: style, ref: ref, options: Object.assign(Object.assign({}, options), { classes: {
                 // Arrows
@@ -946,17 +1101,17 @@ function DCarousel(_a, ref) {
                 page: 'splide__pagination__page d-carousel-pagination-page',
             } }) }, dataAttributes, props, { children: children })));
 }
-const ForwardedDCarousel = React.forwardRef(DCarousel);
+const ForwardedDCarousel = React.forwardRef(DCarousel$1);
 ForwardedDCarousel.displayName = 'DCarousel';
-var DCarousel$1 = Object.assign(ForwardedDCarousel, {
+var DCarousel = Object.assign(ForwardedDCarousel, {
     Slide: DCarouselSlide,
 });
 
-function DChip({ theme = 'primary', text, icon, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose = false, closeAriaLabel = 'close', className, style, dataAttributes, onClose, }) {
+function DChip({ color = 'primary', text, icon, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose = false, closeAriaLabel = 'close', className, style, dataAttributes, onClose, }) {
     const generateClasses = React.useMemo(() => ({
         'd-chip': true,
-        [`d-chip-${theme}`]: !!theme,
-    }), [theme]);
+        [`d-chip-${color}`]: !!color,
+    }), [color]);
     const { 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 }) }))] })));
@@ -979,7 +1134,7 @@ function DCollapse({ id, className, style, Component, hasSeparator = false, defa
     const generateStyles = React.useMemo(() => ({
         [`--${PREFIX_BS}collapse-separator-display`]: hasSeparator ? 'block' : 'none',
     }), [hasSeparator]);
-    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: `var(--${PREFIX_BS}gray)`, size: `var(--${PREFIX_BS}fs-small)`, icon: collapsed ? iconOpen : iconClose, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })] }), !collapsed && (jsxRuntime.jsx("div", { className: classNames({
+    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: "gray", size: "1rem", icon: collapsed ? iconOpen : iconClose, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })] }), !collapsed && (jsxRuntime.jsx("div", { className: classNames({
                     'collapse-body': true,
                 }), style: generateStyles, children: children }))] })));
 }
@@ -1018,7 +1173,7 @@ const ForwardedDDatePickerInput = React.forwardRef(DDatePickerInput);
 ForwardedDDatePickerInput.displayName = 'DDatePickerInput';
 
 function DInputCheck(_a) {
-    var { id: idProp, type, name, label, ariaLabel, checked = false, disabled = false, invalid = false, valid = false, indeterminate, value, hint, onChange, className, style, dataAttributes } = _a, props = tslib.__rest(_a, ["id", "type", "name", "label", "ariaLabel", "checked", "disabled", "invalid", "valid", "indeterminate", "value", "hint", "onChange", "className", "style", "dataAttributes"]);
+    var { id: idProp, type, name, label, ariaLabel, checked = false, disabled = false, invalid = false, valid = false, indeterminate, inputClassName, value, hint, onChange, className, style, dataAttributes } = _a, props = tslib.__rest(_a, ["id", "type", "name", "label", "ariaLabel", "checked", "disabled", "invalid", "valid", "indeterminate", "inputClassName", "value", "hint", "onChange", "className", "style", "dataAttributes"]);
     const innerRef = React.useRef(null);
     const innerId = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
@@ -1046,11 +1201,11 @@ function DInputCheck(_a) {
     const inputComponent = React.useMemo(() => (jsxRuntime.jsx("input", Object.assign({ ref: innerRef, onChange: handleChange, className: classNames('form-check-input', {
             'is-invalid': invalid,
             'is-valid': valid,
-        }, className), style: style, id: id, disabled: disabled, type: type, name: name, value: value, "aria-label": ariaLabel }, ariaDescribedby && { 'aria-describedby': ariaDescribedby }, props))), [
+        }, inputClassName), style: style, id: id, disabled: disabled, type: type, name: name, value: value, "aria-label": ariaLabel }, ariaDescribedby && { 'aria-describedby': ariaDescribedby }, props))), [
         handleChange,
         invalid,
         valid,
-        className,
+        inputClassName,
         style,
         id,
         disabled,
@@ -1064,7 +1219,7 @@ function DInputCheck(_a) {
     if (!label) {
         return inputComponent;
     }
-    return (jsxRuntime.jsxs("div", Object.assign({ className: "form-check" }, dataAttributes, { children: [inputComponent, jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('form-check', className) }, dataAttributes, { children: [inputComponent, jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
 
 function DSelectOptionCheck(_a) {
@@ -1142,8 +1297,8 @@ function DSelectPlaceholder(_a) {
     return (jsxRuntime.jsx(Select.components.Placeholder, Object.assign({ innerProps: innerProps, selectProps: selectProps }, props, { children: children })));
 }
 
-function DSelect(_a) {
-    var { id: idProp, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, floatingLabel = false, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes } = _a, props = tslib.__rest(_a, ["id", "className", "style", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "hint", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "invalid", "valid", "menuWithMaxContent", "disabled", "clearable", "loading", "floatingLabel", "rtl", "searchable", "multi", "components", "defaultValue", "placeholder", "onIconStartClick", "onIconEndClick", "dataAttributes"]);
+function DSelect$1(_a) {
+    var { id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, floatingLabel = false, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes } = _a, props = tslib.__rest(_a, ["id", "className", "style", "label", "hint", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "invalid", "valid", "menuWithMaxContent", "disabled", "clearable", "loading", "floatingLabel", "rtl", "searchable", "multi", "components", "defaultValue", "placeholder", "onIconStartClick", "onIconEndClick", "dataAttributes"]);
     const innerId = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
     const handleOnIconStartClick = React.useCallback(() => {
@@ -1155,7 +1310,7 @@ function DSelect(_a) {
     return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('d-select', className, {
             'd-select-floating': floatingLabel,
             disabled: disabled || loading,
-        }), style: style }, dataAttributes, { children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: classNames({
+        }), style: style }, dataAttributes, { children: [label && (jsxRuntime.jsx("label", { htmlFor: id, children: label })), jsxRuntime.jsxs("div", { className: classNames({
                     'input-group': true,
                     'has-validation': invalid,
                     disabled: disabled || loading,
@@ -1168,7 +1323,7 @@ function DSelect(_a) {
                             'is-valid': valid,
                         }), classNamePrefix: "d-select", isDisabled: disabled || loading, isClearable: clearable, isLoading: loading, isRtl: rtl, isSearchable: searchable, isMulti: multi, defaultValue: defaultValue, placeholder: floatingLabel ? '' : placeholder, unstyled: true, components: Object.assign({ Placeholder: DSelectPlaceholder, DropdownIndicator: DSelectDropdownIndicator, ClearIndicator: DSelectClearIndicator, MultiValueRemove: DSelectMultiValueRemove, LoadingIndicator: DSelectLoadingIndicator }, components) }, props)), (iconEnd && !loading) && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, "aria-label": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: iconEnd && (jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
 }
-var DSelect$1 = Object.assign(DSelect, {
+var DSelect = Object.assign(DSelect$1, {
     OptionCheck: DSelectOptionCheck,
     OptionIcon: DSelectOptionIcon,
     SingleValueIconText: DSelectSingleValueIconText,
@@ -1189,7 +1344,7 @@ var PickerType;
     PickerType["Month"] = "month";
     PickerType["Year"] = "year";
 })(PickerType || (PickerType = {}));
-function DDatePickerHeaderSelector({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, decreaseYear, increaseYear, monthDate, pickerType, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsShown = 1, iconPrev, iconNext, prevYearButtonDisabled, nextYearButtonDisabled, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle = false, prevMonthAriaLabel = 'decrease month', nextMonthAriaLabel = 'increase month', prevYearAriaLabel = 'decrease year', nextYearAriaLabel = 'increase year', iconSize, buttonVariant = 'link', buttonTheme = 'dark', style, className, minYearSelect = 1900, maxYearSelect = 2100, showHeaderSelectors = false, customHeaderCount, locale, }) {
+function DDatePickerHeaderSelector({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, decreaseYear, increaseYear, monthDate, pickerType, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsShown = 1, iconPrev, iconNext, prevYearButtonDisabled, nextYearButtonDisabled, prevMonthAriaLabel = 'decrease month', nextMonthAriaLabel = 'increase month', prevYearAriaLabel = 'decrease year', nextYearAriaLabel = 'increase year', iconSize, style, className, minYearSelect = 1900, maxYearSelect = 2100, showHeaderSelectors = false, customHeaderCount, locale, }) {
     const { iconMap: { chevronLeft, chevronRight, }, } = useDContext();
     const arrayYears = React.useMemo(() => Array.from({ length: maxYearSelect - minYearSelect + 1 }, (_, index) => minYearSelect + index), [maxYearSelect, minYearSelect]);
     const years = React.useMemo(() => arrayYears.map((year) => ({
@@ -1214,16 +1369,16 @@ function DDatePickerHeaderSelector({ date, changeYear, changeMonth, decreaseMont
     }, [date]);
     const [startYear, endYear] = getYearRange();
     if (pickerType === PickerType.Year) {
-        return (jsxRuntime.jsxs("div", { className: classNames('react-datepicker__header-selector react-datepicker__header-year-selector', className), style: style, children: [jsxRuntime.jsx(DButton, { iconStart: iconPrev || chevronLeft, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseYear, disabled: prevYearButtonDisabled, ariaLabel: prevYearAriaLabel, className: "header-button" }), jsxRuntime.jsx("p", { children: `${startYear} - ${endYear}` }), jsxRuntime.jsx(DButton, { iconStart: iconNext || chevronRight, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseYear, disabled: nextYearButtonDisabled, ariaLabel: nextYearAriaLabel, className: "header-button" })] }));
+        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, ariaLabel: prevYearAriaLabel, className: "header-button" }), jsxRuntime.jsx("p", { children: `${startYear} - ${endYear}` }), jsxRuntime.jsx(DButtonIcon, { icon: iconNext || chevronRight, size: iconSize, variant: "link", onClick: increaseYear, disabled: nextYearButtonDisabled, ariaLabel: 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(DButton, { iconStart: iconPrev || chevronLeft, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseYear, disabled: prevMonthButtonDisabled, ariaLabel: 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$1, { 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(DButton, { iconStart: iconNext || chevronRight, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseYear, disabled: nextMonthButtonDisabled, ariaLabel: 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, ariaLabel: 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, ariaLabel: nextMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' } })] }));
     }
-    return (jsxRuntime.jsxs("div", { className: classNames('react-datepicker__header-selector react-datepicker__header-day-selector', className), style: style, children: [jsxRuntime.jsx(DButton, { iconStart: iconPrev || chevronLeft, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, disabled: prevMonthButtonDisabled, ariaLabel: prevMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === 0 ? 'visible' : 'hidden' } }), showHeaderSelectors ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DSelect$1, { 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(DSelect$1, { 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("p", { children: `${defaultMonth.label} ${defaultYear === null || defaultYear === void 0 ? void 0 : defaultYear.label}` })), jsxRuntime.jsx(DButton, { iconStart: iconNext || chevronRight, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, disabled: nextMonthButtonDisabled, ariaLabel: 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, 'LLLL, dd', { 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, ariaLabel: 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, ariaLabel: nextMonthAriaLabel, className: "header-button", style: { visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' } })] })] }));
 }
 
 function DDatePicker(_a) {
-    var { inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel = 'open calendar', inputId = 'input-calendar', timeId = 'input-time', timeInputLabel, iconInput, iconHeaderPrev, iconHeaderNext, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid = false, valid = false, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar: dateFormatCalendarProp, style, dataAttributes, placeholder, showHeaderSelectors } = _a, props = tslib.__rest(_a, ["inputLabel", "inputHint", "inputAriaLabel", "inputActionAriaLabel", "inputId", "timeId", "timeInputLabel", "iconInput", "iconHeaderPrev", "iconHeaderNext", "iconMaterialStyle", "iconFamilyClass", "iconFamilyPrefix", "minYearSelect", "maxYearSelect", "iconHeaderSize", "headerPrevMonthAriaLabel", "headerNextMonthAriaLabel", "headerButtonVariant", "headerButtonTheme", "invalid", "valid", "renderCustomHeader", "className", "dateFormatCalendar", "style", "dataAttributes", "placeholder", "showHeaderSelectors"]);
+    var { inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel = 'open calendar', inputId = 'input-calendar', timeId = 'input-time', timeInputLabel, minYearSelect, maxYearSelect, iconHeaderSize, iconMaterialStyle, iconInput, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, invalid = false, valid = false, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar: dateFormatCalendarProp, style, dataAttributes, placeholder, showHeaderSelectors } = _a, props = tslib.__rest(_a, ["inputLabel", "inputHint", "inputAriaLabel", "inputActionAriaLabel", "inputId", "timeId", "timeInputLabel", "minYearSelect", "maxYearSelect", "iconHeaderSize", "iconMaterialStyle", "iconInput", "headerPrevMonthAriaLabel", "headerNextMonthAriaLabel", "invalid", "valid", "renderCustomHeader", "className", "dateFormatCalendar", "style", "dataAttributes", "placeholder", "showHeaderSelectors"]);
     const pickerType = React.useMemo(() => {
         if (props.showQuarterYearPicker)
             return PickerType.Quarter;
@@ -1237,15 +1392,10 @@ function DDatePicker(_a) {
         props.showMonthYearPicker,
         props.showYearPicker,
     ]);
-    const DatePickerHeader = React.useCallback((headerProps) => (jsxRuntime.jsx(DDatePickerHeaderSelector, Object.assign({}, headerProps, { monthsShown: props.monthsShown, iconPrev: iconHeaderPrev, iconNext: iconHeaderNext, iconMaterialStyle: iconMaterialStyle, prevMonthAriaLabel: headerPrevMonthAriaLabel, nextMonthAriaLabel: headerNextMonthAriaLabel, iconSize: iconHeaderSize, buttonVariant: headerButtonVariant, buttonTheme: headerButtonTheme, minYearSelect: minYearSelect, maxYearSelect: maxYearSelect, pickerType: pickerType, showHeaderSelectors: showHeaderSelectors, locale: props.locale }))), [
-        iconHeaderNext,
-        iconHeaderPrev,
-        iconMaterialStyle,
+    const DatePickerHeader = React.useCallback((headerProps) => (jsxRuntime.jsx(DDatePickerHeaderSelector, Object.assign({}, headerProps, { monthsShown: props.monthsShown, prevMonthAriaLabel: headerPrevMonthAriaLabel, nextMonthAriaLabel: headerNextMonthAriaLabel, iconSize: iconHeaderSize, minYearSelect: minYearSelect, maxYearSelect: maxYearSelect, pickerType: pickerType, showHeaderSelectors: showHeaderSelectors, locale: props.locale }))), [
         headerPrevMonthAriaLabel,
         headerNextMonthAriaLabel,
         iconHeaderSize,
-        headerButtonVariant,
-        headerButtonTheme,
         minYearSelect,
         maxYearSelect,
         pickerType,
@@ -1258,6 +1408,33 @@ function DDatePicker(_a) {
     return (jsxRuntime.jsx(DatePicker, Object.assign({}, dataAttributes, props, { calendarClassName: "d-date-picker", renderCustomHeader: renderCustomHeader, placeholderText: placeholder, customInput: (jsxRuntime.jsx(ForwardedDDatePickerInput, { id: inputId, "aria-label": inputAriaLabel, iconEndAriaLabel: inputActionAriaLabel, iconMaterialStyle: iconMaterialStyle, iconEnd: iconInput, inputLabel: inputLabel, className: className, style: style, invalid: invalid, valid: valid, hint: inputHint })), customTimeInput: (jsxRuntime.jsx(DDatePickerTime, { id: timeId })) })));
 }
 
+function DLayoutPane({ className, style, children, cols, colsXs, colsSm, colsMd, colsLg, colsXl, colsXxl, dataAttributes, }) {
+    const colsClass = cols ? `g-col-${cols}` : undefined;
+    const colsXsClass = colsXs ? `g-col-${colsXs}` : undefined;
+    const colsSmClass = colsSm ? `g-col-sm-${colsSm}` : undefined;
+    const colsMdClass = colsMd ? `g-col-md-${colsMd}` : undefined;
+    const colsLgClass = colsLg ? `g-col-lg-${colsLg}` : undefined;
+    const colsXlClass = colsXl ? `g-col-xl-${colsXl}` : undefined;
+    const colsXxlClass = colsXxl ? `g-col-xxl-${colsXxl}` : undefined;
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames(colsClass, colsXsClass, colsSmClass, colsMdClass, colsLgClass, colsXlClass, colsXxlClass, className), style: style }, dataAttributes, { children: children })));
+}
+
+function DLayout$1({ className, style, children, gap, columns, gapSm, gapMd, gapLg, gapXl, gapXxl, dataAttributes, }) {
+    const gapClasses = classNames({
+        [`gap-${gap}`]: gap !== undefined,
+        [`gap-sm-${gapSm}`]: gapSm !== undefined,
+        [`gap-md-${gapMd}`]: gapMd !== undefined,
+        [`gap-lg-${gapLg}`]: gapLg !== undefined,
+        [`gap-xl-${gapXl}`]: gapXl !== undefined,
+        [`gap-xxl-${gapXxl}`]: gapXxl !== undefined,
+    });
+    const styleWithColumns = Object.assign(Object.assign({}, style), { '--bs-columns': columns });
+    return (jsxRuntime.jsx("div", Object.assign({ style: styleWithColumns, className: classNames('grid', gapClasses, className) }, dataAttributes, { children: children })));
+}
+var DLayout = Object.assign(DLayout$1, {
+    Pane: DLayoutPane,
+});
+
 function DInputMask(props, ref) {
     return (jsxRuntime.jsx(mask.InputMask, Object.assign({ ref: ref, component: ForwardedDInput }, props)));
 }
@@ -1362,47 +1539,6 @@ function useItemSelection({ getItemIdentifier: getItemIdentifierProp, previousSe
     };
 }
 
-function subscribeToMediaQuery(query, callback) {
-    const mediaQueryList = window.matchMedia(query);
-    mediaQueryList.addEventListener('change', callback);
-    return () => {
-        mediaQueryList.removeEventListener('change', callback);
-    };
-}
-function checkMediaQuery(query) {
-    return window.matchMedia(query).matches;
-}
-
-function useMediaQuery(mediaQuery, useListener = false) {
-    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-    const noop = (_) => () => { };
-    return React.useSyncExternalStore(useListener ? (cb) => subscribeToMediaQuery(mediaQuery, cb) : noop, () => (mediaQuery ? checkMediaQuery(mediaQuery) : true), () => false);
-}
-
-function useMediaBreakpointUp(breakpoint, useListener = false) {
-    const { breakpoints } = useDContext();
-    const mediaQuery = React.useMemo(() => (`(min-width: ${breakpoints[breakpoint]})`), [breakpoint, breakpoints]);
-    return useMediaQuery(mediaQuery, useListener);
-}
-function useMediaBreakpointUpXs(useListener = false) {
-    return useMediaBreakpointUp('xs', useListener);
-}
-function useMediaBreakpointUpSm(useListener = false) {
-    return useMediaBreakpointUp('sm', useListener);
-}
-function useMediaBreakpointUpMd(useListener = false) {
-    return useMediaBreakpointUp('md', useListener);
-}
-function useMediaBreakpointUpLg(useListener = false) {
-    return useMediaBreakpointUp('lg', useListener);
-}
-function useMediaBreakpointUpXl(useListener = false) {
-    return useMediaBreakpointUp('xl', useListener);
-}
-function useMediaBreakpointUpXxl(useListener = false) {
-    return useMediaBreakpointUp('xxl', useListener);
-}
-
 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);
@@ -1441,18 +1577,6 @@ function DInputCounter(_a, ref) {
 const ForwardedDInputCounter = React.forwardRef(DInputCounter);
 ForwardedDInputCounter.displayName = 'DInputCounter';
 
-/**
- * @deprecated
- */
-function DInputCurrencyBase(_a, ref) {
-    var { value, minValue, maxValue, currencyOptions, currencyCode, onFocus, onBlur, onChange } = _a, inputProps = tslib.__rest(_a, ["value", "minValue", "maxValue", "currencyOptions", "currencyCode", "onFocus", "onBlur", "onChange"]);
-    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 })) }, inputProps)));
-}
-const ForwardedDInputCurrencyBase$1 = React.forwardRef(DInputCurrencyBase);
-ForwardedDInputCurrencyBase$1.displayName = 'DInputCurrencyBase';
-
 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();
@@ -1460,19 +1584,8 @@ function DInputCurrency(_a, 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 ForwardedDInputCurrencyBase = React.forwardRef(DInputCurrency);
-ForwardedDInputCurrencyBase.displayName = 'DInputCurrency';
-
-/**
- * @deprecated
- */
-function DInputSearch(_a, ref) {
-    var { type, iconEnd: iconEndProp, iconEndAriaLabel = 'search' } = _a, props = tslib.__rest(_a, ["type", "iconEnd", "iconEndAriaLabel"]);
-    const inputRef = useProvidedRefOrCreate(ref);
-    return (jsxRuntime.jsx(ForwardedDInput, Object.assign({ ref: inputRef, type: "text", iconEnd: "search", iconEndAriaLabel: iconEndAriaLabel }, props)));
-}
-const ForwardedDInputSearch = React.forwardRef(DInputSearch);
-ForwardedDInputSearch.displayName = 'DInputSearch';
+const ForwardedDInputCurrency = React.forwardRef(DInputCurrency);
+ForwardedDInputCurrency.displayName = 'DInputCurrency';
 
 function DInputPassword(_a, ref) {
     var { onIconEndClick, iconEndAriaLabel = 'show/hide password' } = _a, props = tslib.__rest(_a, ["onIconEndClick", "iconEndAriaLabel"]);
@@ -1489,7 +1602,87 @@ function DInputPassword(_a, ref) {
 const ForwardedDInputPassword = React.forwardRef(DInputPassword);
 ForwardedDInputPassword.displayName = 'DInputPassword';
 
-function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, placeholder, type = 'text', disabled = false, loading = false, secret = false, characters = 4, innerInputMode = 'text', hint, invalid = false, valid = false, className, style, dataAttributes, onChange, }) {
+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 })] }));
+}
+
+const getColorClass = (strength, total) => {
+    const percentage = total > 0 ? strength / total : 0;
+    if (percentage === 0)
+        return 'bg-gray-200';
+    if (percentage <= 0.25)
+        return 'bg-danger';
+    if (percentage <= 0.5)
+        return 'bg-warning';
+    if (percentage <= 0.75)
+        return 'bg-info';
+    return 'bg-success';
+};
+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: {
+                width: `${percentage}%`,
+                transition: 'width 0.3s ease-in-out',
+            } }) }));
+}
+
+const CHECK_REGEX = {
+    uppercase: /[A-Z]/,
+    lowercase: /[a-z]/,
+    number: /\d/,
+    specialChar: /[~!@#$^*\-_=[\]{}|;,.?]/,
+};
+function PasswordChecksList({ password, validationMessages, enabledChecks, }) {
+    const allChecks = [
+        {
+            key: 'uppercase',
+            regex: CHECK_REGEX.uppercase,
+            text: validationMessages.uppercaseLetter,
+        },
+        {
+            key: 'lowercase',
+            regex: CHECK_REGEX.lowercase,
+            text: validationMessages.lowercaseLetter,
+        },
+        {
+            key: 'number',
+            regex: CHECK_REGEX.number,
+            text: validationMessages.number,
+        },
+        {
+            key: 'specialChar',
+            regex: CHECK_REGEX.specialChar,
+            text: validationMessages.especialChar,
+        },
+    ];
+    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))) })] }));
+}
+
+const DEFAULT_VALIDATION_MESSAGES = {
+    number: 'At least one number',
+    lowercaseLetter: 'At least one lowercase letter',
+    uppercaseLetter: 'At least one uppercase letter',
+    especialChar: 'At least one of these special characters: ~!@#$^*-_=[]{}|;,.?',
+    notMatch: 'The password confirmation and the new password do not match.',
+};
+const DEFAULT_ENABLED_CHECKS = ['uppercase', 'lowercase', 'number', 'specialChar'];
+function DPasswordStrengthMeter({ id, label = 'Password', placeholder, value = '', name, disabled = false, invalid = false, validationMessages = DEFAULT_VALIDATION_MESSAGES, enabledChecks = DEFAULT_ENABLED_CHECKS, className, style, dataAttributes, onChange, }) {
+    const [password, setPassword] = React.useState(value);
+    React.useEffect(() => {
+        setPassword(value);
+    }, [value]);
+    const handleChange = (newValue) => {
+        setPassword(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: className, style: style }, dataAttributes, { children: [jsxRuntime.jsx(ForwardedDInputPassword, { id: id, label: label, placeholder: placeholder, value: password, name: name, disabled: disabled, invalid: invalid, onChange: handleChange }), jsxRuntime.jsx(PasswordChecksList, { password: password, validationMessages: validationMessages, enabledChecks: enabledChecks })] })));
+}
+
+function DInputPin({ id: idProp, label = '', placeholder, type = 'text', disabled = false, loading = false, secret = false, characters = 4, innerInputMode = 'text', hint, invalid = false, valid = false, className, style, dataAttributes, onChange, }) {
     const innerId = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
     const [pattern, setPattern] = React.useState('');
@@ -1522,7 +1715,8 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
         }
         if (input.value !== '') {
             setActiveInput((prev) => {
-                const newValue = prev.with(index, input.value);
+                const newValue = [...prev];
+                newValue[index] = input.value;
                 return newValue;
             });
             if (input.nextSibling) {
@@ -1538,7 +1732,8 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
         if (key === 'Backspace') {
             const { value } = currentTarget;
             setActiveInput((prev) => {
-                const newVal = prev.with(index, '');
+                const newVal = [...prev];
+                newVal[index] = '';
                 return newVal;
             });
             if (currentTarget.previousSibling && value === '') {
@@ -1551,19 +1746,23 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
         }
     }, []);
     const focusInput = React.useCallback((index) => {
-        setActiveInput((prev) => prev.with(index, ''));
+        setActiveInput((prev) => {
+            const newVal = [...prev];
+            newVal[index] = '';
+            return newVal;
+        });
     }, []);
     const wheelInput = React.useCallback((event) => {
         event.currentTarget.blur();
     }, []);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('d-input-pin', className), style: style }, dataAttributes, { children: [label && (jsxRuntime.jsxs("label", { htmlFor: "pinIndex0", children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: "d-input-pin-group", id: id, children: [Array.from({ length: characters }).map((_, index) => (jsxRuntime.jsx("input", Object.assign({ className: classNames({
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('d-input-pin', className), style: style }, dataAttributes, { children: [label && (jsxRuntime.jsx("label", { htmlFor: "pinIndex0", children: label })), jsxRuntime.jsxs("div", { className: "d-input-pin-group", id: id, children: [Array.from({ length: characters }).map((_, index) => (jsxRuntime.jsx("input", Object.assign({ className: classNames({
                             'form-control': true,
                             'is-invalid': invalid,
                             'is-valid': valid,
                         }), value: activeInput[index], type: secret ? 'password' : type, "aria-describedby": `${id}State`, inputMode: innerInputMode, id: `pinIndex${index}`, name: `pin-${index}`, maxLength: 1, onInput: (event) => nextInput(event, index), onKeyDown: (event) => prevInput(event, index), onFocus: () => focusInput(index), onWheel: wheelInput, onClick: (event) => event.preventDefault(), onPaste: (event) => handlePaste(event), autoComplete: "off", placeholder: placeholder, disabled: disabled || loading, required: true }, type === 'number' && ({ min: 0, max: 9 })), index))), loading && (jsxRuntime.jsx("div", { className: "input-group-text", 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 DInputSelect({ id: idProp, name, label = '', className, style, options = [], labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled = false, loading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, hint, value, size, floatingLabel = false, invalid = false, valid = false, dataAttributes, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
+function DInputSelect({ id: idProp, name, label = '', className, style, options = [], disabled = false, loading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, hint, value, size, floatingLabel = false, invalid = false, valid = false, dataAttributes, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
     const innerId = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
     const internalValueExtractor = React.useCallback((option) => {
@@ -1631,12 +1830,9 @@ function DInputSelect({ id: idProp, name, label = '', className, style, options
         valid,
         size,
     ]);
-    const labelComponent = React.useMemo(() => (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), [
+    const labelComponent = React.useMemo(() => (jsxRuntime.jsx("label", { htmlFor: id, children: label })), [
         id,
         label,
-        labelIcon,
-        labelIconFamilyClass,
-        labelIconFamilyPrefix,
     ]);
     const dynamicComponent = React.useMemo(() => {
         if (floatingLabel) {
@@ -1649,7 +1845,7 @@ 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, onChange, }) {
+function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid = false, valid = false, readonly, className, style, dataAttributes, inputClassName, onChange, }) {
     const innerId = React.useId();
     const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
     const [internalIsChecked, setInternalIsChecked] = React.useState(checked);
@@ -1661,10 +1857,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: "form-check form-switch" }, 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', className) }, dataAttributes, { children: [jsxRuntime.jsx("input", { id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', {
                     'is-invalid': invalid,
                     'is-valid': valid,
-                }, className), 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 }), label && (jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] })));
 }
 
 function DInputRange(_a, ref) {
@@ -1704,38 +1900,7 @@ function DInputRange(_a, ref) {
 const ForwardedDInputRange = React.forwardRef(DInputRange);
 ForwardedDInputRange.displayName = 'DInputRange';
 
-/**
- * @deprecated Please use DListGroup.Item or DListGroupItem instead
- */
-function DListItem({ children, className, style, active = false, disabled = false, theme, onClick, }) {
-    const Tag = React.useMemo(() => (onClick ? 'button' : 'div'), [onClick]);
-    return (jsxRuntime.jsx(Tag, Object.assign({}, Tag === 'button' && {
-        onClick,
-        type: 'button',
-    }, { className: classNames('list-group-item list-group-item-action', theme ? `list-group-item-${theme}` : undefined, className, {
-            active,
-            disabled,
-        }), style: style }, active && { 'aria-current': true }, { children: children })));
-}
-
-/**
- * @deprecated Please use DListGroup instead
- */
-function DList({ children, className, style, flush = false, numbered = false, horizontal = false, horizontalBreakpoint, dataAttributes, }) {
-    if (flush && horizontal) {
-        throw new Error("Horizontal and Flush props don't work together");
-    }
-    return (jsxRuntime.jsx("div", Object.assign({ className: classNames('list-group', {
-            'list-group-flush': flush && !horizontal,
-            'list-group-numbered': numbered,
-            'list-group-horizontal': horizontal && !horizontalBreakpoint,
-        }, (horizontal && horizontalBreakpoint) && `list-group-horizontal-${horizontalBreakpoint}`, className), style: style }, dataAttributes, { children: children })));
-}
-var DList$1 = Object.assign(DList, {
-    Item: DListItem,
-});
-
-function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href, onClick, theme, children, className, style, dataAttributes, }) {
+function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }) {
     const Tag = React.useMemo(() => {
         if (href) {
             return 'a';
@@ -1754,20 +1919,20 @@ function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href,
     const generateClasses = React.useMemo(() => ({
         'list-group-item': true,
         'list-group-item-action': action,
-        [`list-group-item-${theme}`]: !!theme,
+        [`list-group-item-${color}`]: !!color,
         active,
         disabled,
-    }), [action, active, disabled, theme]);
+    }), [action, active, disabled, color]);
     const ariaAttributes = React.useMemo(() => {
         if (Tag === 'button') {
             return Object.assign(Object.assign({}, active && { 'aria-current': true }), disabled && { disabled: true });
         }
         return Object.assign(Object.assign({}, active && { 'aria-current': true }), disabled && { 'aria-disabled': true });
     }, [Tag, active, disabled]);
-    return (jsxRuntime.jsx(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, Tag === 'a' && href && { href }, onClick && { onClick }, ariaAttributes, dataAttributes, Tag === 'button' && { type: 'button' }, { children: children })));
+    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" }))] })));
 }
 
-function DListGroup({ as = 'ul', numbered, flush, horizontal, children, className, style, dataAttributes, }) {
+function DListGroup$1({ as = 'ul', numbered, flush, horizontal, children, className, style, dataAttributes, }) {
     const Tag = React.useMemo(() => {
         if (numbered) {
             return 'ol';
@@ -1787,7 +1952,7 @@ function DListGroup({ as = 'ul', numbered, flush, horizontal, children, classNam
     }, [flush, horizontal, numbered]);
     return (jsxRuntime.jsx(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, dataAttributes, { children: children })));
 }
-var DListGroup$1 = Object.assign(DListGroup, {
+var DListGroup = Object.assign(DListGroup$1, {
     Item: DListGroupItem,
 });
 
@@ -1809,7 +1974,11 @@ function DModalFooter({ className, style, actionPlacement, children, }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "d-modal-separator" }), jsxRuntime.jsx("div", { className: classNames(generateClasses, className), style: style, children: children })] }));
 }
 
-function DModal({ name, className, style, staticBackdrop, scrollable, centered, fullScreen, fullScreenFrom, size, children, dataAttributes, }) {
+const defaultTransition$1 = {
+    ease: 'easeInOut',
+    duration: 0.3,
+};
+function DModal$1({ name, className, style, staticBackdrop, scrollable, centered, fullScreen, fullScreenFrom, size, transition, children, dataAttributes, }) {
     const fullScreenClass = React.useMemo(() => {
         if (fullScreen) {
             if (fullScreenFrom) {
@@ -1820,12 +1989,12 @@ function DModal({ name, className, style, staticBackdrop, scrollable, centered,
         return '';
     }, [fullScreenFrom, fullScreen]);
     const generateModalDialogClasses = React.useMemo(() => (Object.assign({ 'modal-dialog': true, 'modal-dialog-centered': !!centered, 'modal-dialog-scrollable': !!scrollable, [fullScreenClass]: !!fullScreen }, size && { [`modal-${size}`]: true })), [fullScreenClass, centered, fullScreen, scrollable, size]);
-    return (jsxRuntime.jsx("div", Object.assign({ className: classNames('modal portal fade show', className), id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false", style: style }, staticBackdrop && ({
+    return (jsxRuntime.jsx(framerMotion.motion.div, Object.assign({ className: classNames('modal portal show', className), id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false", style: style, initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: Object.assign(Object.assign({}, (transition !== null && transition !== void 0 ? transition : defaultTransition$1)), { delay: 0.15 }) }, staticBackdrop && ({
         [`data-${PREFIX_BS}backdrop`]: 'static',
         [`data-${PREFIX_BS}keyboard`]: 'false',
     }), dataAttributes, { children: jsxRuntime.jsx("div", { className: classNames(generateModalDialogClasses), children: jsxRuntime.jsx("div", { className: "modal-content", children: children }) }) })));
 }
-var DModal$1 = Object.assign(DModal, {
+var DModal = Object.assign(DModal$1, {
     Header: DModalHeader,
     Body: DModalBody,
     Footer: DModalFooter,
@@ -1849,10 +2018,36 @@ function DOffcanvasFooter({ actionPlacement, children, className, style, }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "d-offcanvas-separator" }), jsxRuntime.jsx("div", { className: classNames(generateClasses, className), style: style, children: children })] }));
 }
 
-function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFrom = 'end', children, dataAttributes, }) {
-    return (jsxRuntime.jsx("div", Object.assign({ className: classNames('offcanvas portal show', {
+const variants = {
+    hidden: (openFrom) => {
+        const properties = {};
+        if (openFrom === 'start') {
+            properties.x = '-100%';
+        }
+        if (openFrom === 'end') {
+            properties.x = '100%';
+        }
+        if (openFrom === 'top') {
+            properties.y = '-100%';
+        }
+        if (openFrom === 'bottom') {
+            properties.y = '100%';
+        }
+        return properties;
+    },
+    visible: {
+        x: 0,
+        y: 0,
+    },
+};
+const defaultTransition = {
+    ease: 'easeInOut',
+    duration: 0.3,
+};
+function DOffcanvas$1({ name, className, style, staticBackdrop, scrollable, openFrom = 'end', transition, children, dataAttributes, }) {
+    return (jsxRuntime.jsx(framerMotion.motion.div, Object.assign({ className: classNames('offcanvas portal show', {
             [`offcanvas-${openFrom}`]: openFrom,
-        }, className), style: style, id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false" }, staticBackdrop && ({
+        }, className), style: Object.assign(Object.assign({}, style), { transition: 'none' }), id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false", custom: openFrom, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: Object.assign(Object.assign({}, (transition !== null && transition !== void 0 ? transition : defaultTransition)), { delay: 0.15 }) }, staticBackdrop && ({
         [`data-${PREFIX_BS}backdrop`]: 'static',
         [`data-${PREFIX_BS}keyboard`]: 'false',
     }), scrollable && ({
@@ -1860,18 +2055,15 @@ function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFr
         [`data-${PREFIX_BS}keyboard`]: 'false',
     }), dataAttributes, { children: children })));
 }
-var DOffcanvas$1 = Object.assign(DOffcanvas, {
+var DOffcanvas = Object.assign(DOffcanvas$1, {
     Header: DOffcanvasHeader,
     Body: DOffcanvasBody,
     Footer: DOffcanvasFooter,
 });
 
 function DPaginator(_a) {
-    var { className, page, current, showArrows, navClassName } = _a, props = tslib.__rest(_a, ["className", "page", "current", "showArrows", "navClassName"]);
-    const backwardCompatibilityProps = React.useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({}, props), { current: Number(page !== undefined ? page : current) }), showArrows !== undefined && { renderNav: showArrows }), props.extraClassName === undefined && className !== undefined && {
-        extraClassName: className,
-    })), [props, page, current, showArrows, className]);
-    return (jsxRuntime.jsx(ResponsivePagination, Object.assign({ navClassName: classNames('page-item-arrow', navClassName) }, backwardCompatibilityProps)));
+    var { navClassName } = _a, props = tslib.__rest(_a, ["navClassName"]);
+    return (jsxRuntime.jsx(ResponsivePagination, Object.assign({ navClassName: classNames('page-item-arrow', navClassName) }, props)));
 }
 
 function DPopover({ children, renderComponent, open, setOpen, adjustContentToRender = false, className, style, dataAttributes, }) {
@@ -1912,115 +2104,14 @@ function DPopover({ children, renderComponent, open, setOpen, adjustContentToRen
                     }), ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId }, getFloatingProps(), { children: children })) }))] })));
 }
 
-function DProgress({ className, style, currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, dataAttributes, }) {
+function DProgress({ className, style, currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, height, dataAttributes, }) {
     const percentage = React.useMemo(() => (Math.round((currentValue * 100) / maxValue)), [currentValue, maxValue]);
     const formatProgress = React.useMemo(() => `${percentage}%`, [percentage]);
     const generateClasses = React.useMemo(() => ({
         'progress-bar': true,
         'progress-bar-striped progress-bar-animated': enableStripedAnimation,
     }), [enableStripedAnimation]);
-    return (jsxRuntime.jsx("div", Object.assign({ className: classNames('progress', className) }, dataAttributes, { children: jsxRuntime.jsx("div", { className: classNames(generateClasses), role: "progressbar", "aria-label": "Progress bar", style: Object.assign({ width: formatProgress }, style), "aria-valuenow": currentValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, children: !hideCurrentValue && formatProgress }) })));
-}
-
-function DQuickActionButton({ line1, line2, className, actionIcon, actionIconFamilyClass, actionIconFamilyPrefix, actionIconTheme, representativeImage, representativeIcon, representativeIconTheme = 'secondary', representativeIconHasCircle = false, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, href, hrefTarget, style, dataAttributes, }) {
-    const Tag = React.useMemo(() => {
-        if (href) {
-            return 'a';
-        }
-        if (onClick) {
-            return 'button';
-        }
-        return 'div';
-    }, [href, onClick]);
-    const tagProps = React.useMemo(() => {
-        if (href) {
-            return {
-                className: classNames('d-quick-action-button', 'd-quick-action-button-feedback', className),
-                href,
-                target: hrefTarget,
-            };
-        }
-        if (onClick) {
-            return {
-                className: classNames('d-quick-action-button', 'd-quick-action-button-feedback', className),
-                onClick,
-            };
-        }
-        return {
-            className: classNames('d-quick-action-button', className),
-        };
-    }, [
-        className,
-        href,
-        hrefTarget,
-        onClick,
-    ]);
-    return (jsxRuntime.jsxs(Tag, Object.assign({ style: style }, tagProps, dataAttributes, { children: [representativeIcon && (jsxRuntime.jsx(DIcon, { className: "d-quick-action-button-representative-icon", size: representativeIconHasCircle
-                    ? `var(--${PREFIX_BS}quick-action-button-representative-icon-size)`
-                    : `var(--${PREFIX_BS}quick-action-button-representative-image-size)`, icon: representativeIcon, hasCircle: representativeIconHasCircle, theme: representativeIconTheme, familyClass: representativeIconFamilyClass, familyPrefix: representativeIconFamilyPrefix })), representativeImage && (jsxRuntime.jsx("img", { className: "d-quick-action-button-representative-image", src: representativeImage, alt: "" })), jsxRuntime.jsx("div", { className: "d-quick-action-button-content", children: jsxRuntime.jsxs("div", { className: "d-quick-action-button-text", children: [jsxRuntime.jsx("span", { className: "d-quick-action-button-line1", children: line1 }), jsxRuntime.jsx("small", { className: "d-quick-action-button-line2", children: line2 })] }) }), actionIcon && (jsxRuntime.jsx(DIcon, { className: "d-quick-action-button-action-icon", icon: actionIcon, size: `var(--${PREFIX_BS}quick-action-button-action-icon-size)`, theme: actionIconTheme, familyClass: actionIconFamilyClass, familyPrefix: actionIconFamilyPrefix }))] })));
-}
-
-/**
- * @deprecated
- */
-function DQuickActionCheck({ id: idProp, name, value, line1, line2, line3, className, style, checked, dataAttributes, onChange, }) {
-    const innerId = React.useId();
-    const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
-    const changeHandler = React.useCallback((event) => {
-        event.stopPropagation();
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange]);
-    return (jsxRuntime.jsxs("label", Object.assign({ className: classNames('d-quick-action-check', className), htmlFor: id, style: style }, dataAttributes, { children: [jsxRuntime.jsx(DInputCheck, { id: id, type: "radio", name: name, value: value, checked: checked, onChange: changeHandler }), jsxRuntime.jsxs("div", { className: "d-quick-action-check-detail", children: [jsxRuntime.jsx("span", { className: "d-quick-action-check-line1", children: line1 }), jsxRuntime.jsx("span", { className: "d-quick-action-check-line2", children: line2 })] }), jsxRuntime.jsx("span", { className: "d-quick-action-check-line3", children: line3 })] })));
-}
-
-function DQuickActionSelect({ id: idProp, name, value, line1, line2, className, style, selected = false, dataAttributes, onChange, }) {
-    const innerRef = React.useRef(null);
-    const innerId = React.useId();
-    const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
-    const changeHandler = React.useCallback((event) => {
-        event.stopPropagation();
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange]);
-    React.useEffect(() => {
-        if (innerRef.current) {
-            innerRef.current.checked = selected;
-        }
-    }, [selected]);
-    return (jsxRuntime.jsxs("label", Object.assign({ className: classNames('d-quick-action-select', className), htmlFor: id, style: style }, dataAttributes, { children: [jsxRuntime.jsx("input", { ref: innerRef, id: id, type: "radio", name: name, value: value, onChange: changeHandler }), jsxRuntime.jsx("span", { className: "d-quick-action-select-line1", children: line1 }), jsxRuntime.jsx("span", { className: "d-quick-action-select-line2", children: line2 })] })));
-}
-
-/**
- * @deprecated
- */
-function DQuickActionSwitch({ id: idProp, name, label, hint, checked, disabled, className, style, dataAttributes, onClick, }) {
-    const innerId = React.useId();
-    const id = React.useMemo(() => idProp || innerId, [idProp, innerId]);
-    const clickHandler = React.useCallback((event) => {
-        event.stopPropagation();
-        onClick === null || onClick === void 0 ? void 0 : onClick(checked);
-    }, [checked, onClick]);
-    return (jsxRuntime.jsxs("button", Object.assign({ className: classNames('d-quick-action-switch', className), type: "button", onClick: clickHandler, style: style }, dataAttributes, { children: [jsxRuntime.jsx("div", { className: "d-quick-action-switch-content", children: jsxRuntime.jsx(DInputSwitch, { id: id, name: name, disabled: disabled, checked: checked, readonly: true, label: label }) }), jsxRuntime.jsx("div", { className: "d-quick-action-switch-hint", children: hint })] })));
-}
-
-/**
- * @deprecated Please use https://getbootstrap.com/docs/5.3/components/placeholders/ instead
- */
-function DSkeleton({ speed = 2, viewBox, backgroundColor, foregroundColor, children, }) {
-    const innerBackgroundColor = React.useMemo(() => {
-        if (backgroundColor) {
-            return backgroundColor;
-        }
-        const computedStyle = getComputedStyle(document.documentElement);
-        return computedStyle.getPropertyValue(`--${PREFIX_BS}secondary-100`);
-    }, [backgroundColor]);
-    const innerForegroundColor = React.useMemo(() => {
-        if (foregroundColor) {
-            return foregroundColor;
-        }
-        const computedStyle = getComputedStyle(document.documentElement);
-        return computedStyle.getPropertyValue(`--${PREFIX_BS}gray-100`);
-    }, [foregroundColor]);
-    return (jsxRuntime.jsx(ContentLoader, { speed: speed, viewBox: viewBox, backgroundColor: innerBackgroundColor, foregroundColor: innerForegroundColor, children: children }));
+    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, }) {
@@ -2033,13 +2124,13 @@ function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSu
             'd-stepper-desktop': true,
             'is-vertical': vertical,
             'is-align-start': alignStart && !vertical,
-        }, className), style: style, children: options.map(({ label, value, description }) => (jsxRuntime.jsxs("div", { className: "d-step", children: [jsxRuntime.jsx("div", { className: "d-step-value", children: jsxRuntime.jsx("div", { className: classNames({
+        }, className), style: style, children: options.map(({ label, value, description }) => (jsxRuntime.jsxs("div", { className: classNames({
+                'd-step': true,
+                'd-step-current': value === currentStep && !completed,
+            }), 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,
-                            'd-step-current': 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, 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))) }));
 }
 
 function DStepper$1({ options, currentStep, className, style, }) {
@@ -2079,7 +2170,7 @@ function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, i
 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, theme = 'dark', placement = 'top', size, Component, children, }) {
+function DTooltip({ className, childrenClassName, style, offSet = ARROW_HEIGHT + GAP, 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({
@@ -2110,10 +2201,16 @@ function DTooltip({ className, childrenClassName, style, offSet = ARROW_HEIGHT +
         dismiss,
         role,
     ]);
-    const generateClasses = React.useMemo(() => (Object.assign({ 'tooltip show': true, [`tooltip-${size}`]: !!size, [`tooltip-${theme}`]: !!theme }, className && { [className]: true })), [size, theme, className]);
+    const generateClasses = React.useMemo(() => (Object.assign({ 'tooltip show': true, [`tooltip-${size}`]: !!size }, className && { [className]: true })), [size, className]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: childrenClassName, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsxRuntime.jsx(react.FloatingPortal, { children: isOpen && (jsxRuntime.jsxs("div", Object.assign({ className: classNames(generateClasses), ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), style) }, getFloatingProps(), { children: [jsxRuntime.jsx(react.FloatingArrow, { ref: arrowRef, context: context, width: ARROW_WIDTH, height: ARROW_HEIGHT }), jsxRuntime.jsx("div", { className: "tooltip-inner", children: children })] }))) })] }));
 }
 
+function DTimeline({ className, style, dataAttributes, items, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ style: style, className: classNames('d-timeline', className) }, dataAttributes, { children: items.map((item, index) => (jsxRuntime.jsxs("div", { className: classNames('d-timeline-item', {
+                [`d-timeline-item-${item.status}`]: item.status,
+            }), children: [jsxRuntime.jsx("div", { className: "d-timeline-item-connector" }), jsxRuntime.jsx("div", { className: "d-timeline-item-icon", children: jsxRuntime.jsx("i", { className: `bi bi-${item.icon || 'check'}` }) }), jsxRuntime.jsxs("div", { className: "d-timeline-item-content", children: [jsxRuntime.jsx("div", { className: "d-timeline-item-title", children: item.title }), item.description && jsxRuntime.jsx("div", { className: "d-timeline-item-description", children: item.description }), item.time && jsxRuntime.jsx("div", { className: "d-timeline-item-time", children: item.time }), item.children] })] }, index))) })));
+}
+
 const TabContext = React.createContext(undefined);
 function useTabContext() {
     const context = React.useContext(TabContext);
@@ -2131,7 +2228,7 @@ function DTabContent({ tab, children, className, style, }) {
     return (jsxRuntime.jsx("div", { className: classNames('tab-pane fade show active', className), id: `${tab}Pane`, role: "tabpanel", tabIndex: 0, "aria-labelledby": `${tab}Tab`, style: style, children: children }));
 }
 
-function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant = 'underline', dataAttributes, }) {
+function DTabs$1({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant = 'underline', dataAttributes, }) {
     const [selected, setSelected] = React.useState(defaultSelected);
     const onSelect = React.useCallback((option) => {
         if (option.tab) {
@@ -2152,9 +2249,9 @@ function DTabs({ children, defaultSelected, onChange, options, className, classN
                 'flex-column': !vertical || variant === 'tabs',
             }), style: style }, dataAttributes, { children: [jsxRuntime.jsx("nav", { className: classNames(generateClasses), children: options.map((option) => (jsxRuntime.jsx("button", { id: `${option.tab}Tab`, className: classNames('nav-link', {
                             active: option.tab === selected,
-                        }, classNameTab), type: "button", role: "tab", "aria-controls": `${option.tab}Pane`, "aria-selected": option.tab === selected, disabled: option.disabled, onClick: () => onSelect(option), children: option.label }, option.label))) }), jsxRuntime.jsx("div", { className: "tab-content w-100", children: children })] })) }));
+                        }, classNameTab), type: "button", role: "tab", "aria-controls": `${option.tab}Pane`, "aria-selected": option.tab === selected, disabled: option.disabled, onClick: () => onSelect(option), children: option.label }, option.tab))) }), jsxRuntime.jsx("div", { className: "tab-content w-100", children: children })] })) }));
 }
-var DTabs$1 = Object.assign(DTabs, {
+var DTabs = Object.assign(DTabs$1, {
     Tab: DTabContent,
 });
 
@@ -2166,10 +2263,10 @@ function DToastBody({ children, className, style }) {
     return (jsxRuntime.jsx("div", { className: classNames('toast-body', className), style: style, children: children }));
 }
 
-function DToast({ children, className, style, dataAttributes, }) {
+function DToast$1({ children, className, style, dataAttributes, }) {
     return (jsxRuntime.jsx("div", Object.assign({ className: classNames('toast', className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", style: style }, dataAttributes, { children: children })));
 }
-var DToast$1 = Object.assign(DToast, {
+var DToast = Object.assign(DToast$1, {
     Header: DToastHeader,
     Body: DToastBody,
 });
@@ -2184,21 +2281,19 @@ function useDToast() {
         if (typeof data === 'function') {
             return reactHotToast.toast.custom(data, toastProps);
         }
-        const { title, description, icon, closeIcon, timestamp, theme, soft, } = data;
+        const { title, description, icon, closeIcon, timestamp, color, } = data;
         return reactHotToast.toast.custom(({ id, visible }) => {
             if (!visible) {
                 return null;
             }
             if (!description) {
-                return (jsxRuntime.jsx(DToast$1, { className: classNames({
-                        [`toast-${theme}`]: !!theme && !soft,
-                        [`toast-soft-${theme}`]: !!theme && !!soft,
-                    }, 'show'), children: jsxRuntime.jsxs(DToast$1.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 }) })] }) }));
+                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 }) })] }) }));
             }
-            return (jsxRuntime.jsxs(DToast$1, { className: classNames({
-                    [`toast-${theme}`]: !!theme && !soft,
-                    [`toast-soft-${theme}`]: !!theme && !!soft,
-                }, 'show'), children: [jsxRuntime.jsxs(DToast$1.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$1.Body, { children: jsxRuntime.jsx("span", { children: description }) })] }));
+            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 }) })] }));
         }, toastProps);
     }, [xLg]);
     return {
@@ -2206,19 +2301,6 @@ function useDToast() {
     };
 }
 
-function DTableHead({ className, style, field, label, value = '', onChange, }) {
-    const handleOnChange = React.useCallback(() => {
-        if (value === field) {
-            return onChange(`-${field}`);
-        }
-        if (value === `-${field}`) {
-            return onChange('');
-        }
-        return onChange(field);
-    }, [field, value, onChange]);
-    return (jsxRuntime.jsx("th", { style: style, className: classNames('d-table-head', className), children: jsxRuntime.jsxs("button", { type: "button", onClick: handleOnChange, children: [label, value && value.includes(field) && (jsxRuntime.jsx(DIcon, { icon: value === field ? 'arrow-up' : 'arrow-down' }))] }) }));
-}
-
 async function configureI8n(resources, _a = {}) {
     var { lng = 'en', fallbackLng = 'en' } = _a, config = tslib.__rest(_a, ["lng", "fallbackLng"]);
     return i18n
@@ -2268,7 +2350,7 @@ function validatePhoneNumber(phone) {
 }
 
 function DInputPhone(_a, ref) {
-    var { id: idProp, style, className, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, labelIconMaterialStyle, 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", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "labelIconMaterialStyle", "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"]);
+    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]);
@@ -2327,13 +2409,9 @@ function DInputPhone(_a, ref) {
         placeholder,
         valid,
     ]);
-    const labelComponent = React.useMemo(() => (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix, materialStyle: labelIconMaterialStyle }))] })), [
+    const labelComponent = React.useMemo(() => (jsxRuntime.jsx("label", { htmlFor: id, children: label })), [
         id,
         label,
-        labelIcon,
-        labelIconFamilyClass,
-        labelIconFamilyPrefix,
-        labelIconMaterialStyle,
     ]);
     const dynamicComponent = React.useMemo(() => {
         if (floatingLabel) {
@@ -2354,69 +2432,243 @@ function DInputPhone(_a, ref) {
 const ForwardedDInputPhone = React.forwardRef(DInputPhone);
 ForwardedDInputPhone.displayName = 'DInputPhone';
 
+const DEFAULT_IMAGE = 'https://cdn.modyo.cloud/uploads/06b434f7-b943-4f54-9543-84a904e189aa/original/Visa_Logo_1_.png';
+const CHIP_IMAGE = 'https://cdn.modyo.cloud/uploads/4660ad00-e5d8-477e-8919-52b53d0a26fb/original/chip-debit-svgrepo-com_1_.png';
+function DCreditCard({ brand = 'visa', name, number, holderText = 'Card Holder', logoImage, isChipVisible = true, className, isVertical = false, }) {
+    return (jsxRuntime.jsxs("div", { className: classNames('d-credit-card overflow-hidden text-white', 'position-relative rounded-3', 'd-none d-lg-flex', isVertical && 'is-vertical', className), children: [jsxRuntime.jsxs("div", { className: "d-credit-card-header", children: [jsxRuntime.jsx("img", { src: logoImage || DEFAULT_IMAGE, alt: brand, className: "d-credit-card-logo", width: 100 }), isChipVisible && (jsxRuntime.jsx("div", { className: "d-credit-card-chip p-2 rounded-2", 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 mt-auto d-none d-sm-block", children: [jsxRuntime.jsx("div", { className: "d-credit-card-number d-none d-sm-block mb-4", children: number }), jsxRuntime.jsx("small", { className: "d-block opacity-50", children: holderText }), jsxRuntime.jsx("span", { className: "name", children: name })] })] }));
+}
+
+const getItemClass = (action) => {
+    const base = `dropdown-item d-flex align-items-center 
+  ${action.color ? `dropdown-item-${action.color}` : ''} ${action.disabled ? 'disabled' : ''}`;
+    return base;
+};
+function DDropdown({ actions, dropdownToggle, className, }) {
+    const [open, setOpen] = React.useState(false);
+    const dropdownRef = React.useRef(null);
+    const [position, setPosition] = React.useState('down'); // 🆕
+    // Cerrar al hacer click fuera
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // 🆕 Calcular posición del menú al abrir
+    React.useEffect(() => {
+        if (open && dropdownRef.current) {
+            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');
+            }
+        }
+    }, [open]);
+    let ToggleElement;
+    if (dropdownToggle) {
+        if (typeof dropdownToggle === 'function') {
+            ToggleElement = dropdownToggle({ open, toggle: () => setOpen(!open) });
+        }
+        else {
+            ToggleElement = dropdownToggle;
+        }
+    }
+    else {
+        ToggleElement = (jsxRuntime.jsx(DButtonIcon, { variant: "link", stopPropagationEnabled: false, onClick: () => setOpen(!open), icon: "MoreVertical" }));
+    }
+    return (jsxRuntime.jsxs("div", { className: `dropdown position-relative drop-${position} ${className}`, ref: dropdownRef, children: [ToggleElement, jsxRuntime.jsx("ul", { style: {
+                    position: 'absolute',
+                    top: position === 'up' ? 'auto' : '100%',
+                    bottom: position === 'up' ? '100%' : 'auto',
+                    left: position === 'start' ? 'auto' : 0,
+                    right: position === 'start' ? '0' : 'auto',
+                    transform: 'translateY(4px)',
+                }, className: `dropdown-menu p-2 ${open ? 'show' : ''}`, children: actions.map((action, index) => {
+                    if (action.isDivider) {
+                        return (jsxRuntime.jsx("hr", { className: "dropdown-divider" }, index));
+                    }
+                    return (jsxRuntime.jsx("li", { children: action.href ? (jsxRuntime.jsxs("a", { className: getItemClass(action), href: action.href, onClick: (e) => {
+                                if (action.disabled) {
+                                    e.preventDefault();
+                                }
+                                else {
+                                    setOpen(false);
+                                }
+                            }, children: [action.icon && (jsxRuntime.jsx(DIcon, { icon: action.icon, className: "me-2", size: "1rem" })), action.label] })) : (jsxRuntime.jsxs("button", { className: getItemClass(action), type: "button", onClick: () => {
+                                var _a;
+                                if (!action.disabled) {
+                                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+                                    setOpen(false);
+                                }
+                            }, disabled: action.disabled, children: [action.icon && (jsxRuntime.jsx(DIcon, { icon: action.icon, className: "me-2", size: "1rem" })), action.label] })) }, index));
+                }) })] }));
+}
+
+function useScreenshot() {
+    const clipRef = React.useRef(null);
+    const takeBlob = React.useCallback(async (type) => {
+        if (!clipRef.current) {
+            throw new Error('set the clipRef');
+        }
+        const canvas = await html2canvas(clipRef === null || clipRef === void 0 ? void 0 : clipRef.current, {
+            allowTaint: true,
+            useCORS: true,
+        });
+        return (new Promise((resolve, reject) => {
+            canvas.toBlob((innerBlob) => {
+                if (!innerBlob) {
+                    return reject();
+                }
+                return resolve(innerBlob);
+            }, type);
+        }));
+    }, []);
+    return {
+        clipRef,
+        takeBlob,
+    };
+}
+
+function useScreenshotDownload() {
+    const { clipRef, takeBlob } = useScreenshot();
+    const download = React.useCallback(async () => {
+        const blob = await takeBlob();
+        const url = window.URL.createObjectURL(blob);
+        const link = window.document.createElement('a');
+        link.style.display = 'none';
+        link.href = url;
+        link.download = 'voucher.jpg';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }, [takeBlob]);
+    return {
+        download,
+        downloadRef: clipRef,
+    };
+}
+
+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] }))) {
+            window.print();
+            return;
+        }
+        await navigator.share({ files: [image] });
+    }, [takeBlob]);
+    return {
+        share,
+        shareRef: clipRef,
+    };
+}
+
+function DVoucher({ amount, amountDetails, icon = 'CircleCheckBig', color = 'success', title, onError, message, downloadText = 'Download', shareText = 'Share', children, }) {
+    const { shareRef, share } = useScreenshotWebShare();
+    const { downloadRef, download } = useScreenshotDownload();
+    const handleShare = () => {
+        share()
+            .catch(async (err) => {
+            if (onError) {
+                await onError(err);
+            }
+        })
+            .catch(() => {
+            // Error already handled by onError
+        });
+    };
+    const handleDownload = () => {
+        download()
+            .catch(async (err) => {
+            if (onError) {
+                await onError(err);
+            }
+        })
+            .catch(() => {
+            // Error already handled by onError
+        });
+    };
+    return (jsxRuntime.jsx("div", { className: "d-voucher", ref: (el) => {
+            shareRef.current = el;
+            downloadRef.current = el;
+        }, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "d-voucher-header", children: [jsxRuntime.jsx(DIcon, { icon: icon, color: color }), 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" })] })] }) }));
+}
+
 exports.DAlert = DAlert;
 exports.DAvatar = DAvatar;
 exports.DBadge = DBadge;
+exports.DBox = DBox;
 exports.DBoxFile = DBoxFile;
 exports.DButton = DButton;
 exports.DButtonIcon = DButtonIcon;
-exports.DCard = DCard$1;
+exports.DCard = DCard;
 exports.DCardBody = DCardBody;
 exports.DCardFooter = DCardFooter;
 exports.DCardHeader = DCardHeader;
-exports.DCarousel = DCarousel$1;
+exports.DCarousel = DCarousel;
 exports.DCarouselSlide = DCarouselSlide;
 exports.DChip = DChip;
 exports.DCollapse = DCollapse;
 exports.DContext = DContext;
 exports.DContextProvider = DContextProvider;
+exports.DCreditCard = DCreditCard;
 exports.DCurrencyText = DCurrencyText;
 exports.DDatePicker = DDatePicker;
+exports.DDropdown = DDropdown;
 exports.DIcon = DIcon;
 exports.DIconBase = DIconBase;
 exports.DInput = ForwardedDInput;
 exports.DInputCheck = DInputCheck;
 exports.DInputCounter = ForwardedDInputCounter;
-exports.DInputCurrency = ForwardedDInputCurrencyBase;
-exports.DInputCurrencyBase = ForwardedDInputCurrencyBase$1;
+exports.DInputCurrency = ForwardedDInputCurrency;
 exports.DInputMask = ForwardedDInputMask;
 exports.DInputPassword = ForwardedDInputPassword;
 exports.DInputPhone = ForwardedDInputPhone;
 exports.DInputPin = DInputPin;
 exports.DInputRange = ForwardedDInputRange;
-exports.DInputSearch = ForwardedDInputSearch;
 exports.DInputSelect = DInputSelect;
 exports.DInputSwitch = DInputSwitch;
-exports.DList = DList$1;
-exports.DListGroup = DListGroup$1;
+exports.DLayout = DLayout;
+exports.DLayoutPane = DLayoutPane;
+exports.DListGroup = DListGroup;
 exports.DListGroupItem = DListGroupItem;
-exports.DListItem = DListItem;
-exports.DModal = DModal$1;
+exports.DModal = DModal;
 exports.DModalBody = DModalBody;
 exports.DModalFooter = DModalFooter;
 exports.DModalHeader = DModalHeader;
-exports.DOffcanvas = DOffcanvas$1;
+exports.DOffcanvas = DOffcanvas;
 exports.DOffcanvasBody = DOffcanvasBody;
 exports.DOffcanvasFooter = DOffcanvasFooter;
 exports.DOffcanvasHeader = DOffcanvasHeader;
 exports.DPaginator = DPaginator;
+exports.DPasswordStrengthMeter = DPasswordStrengthMeter;
 exports.DPopover = DPopover;
 exports.DProgress = DProgress;
-exports.DQuickActionButton = DQuickActionButton;
-exports.DQuickActionCheck = DQuickActionCheck;
-exports.DQuickActionSelect = DQuickActionSelect;
-exports.DQuickActionSwitch = DQuickActionSwitch;
-exports.DSelect = DSelect$1;
-exports.DSkeleton = DSkeleton;
+exports.DSelect = DSelect;
 exports.DStepper = DStepper;
 exports.DStepperDesktop = DStepper$2;
 exports.DStepperMobile = DStepper$1;
 exports.DTabContent = DTabContent;
-exports.DTableHead = DTableHead;
-exports.DTabs = DTabs$1;
-exports.DToast = DToast$1;
+exports.DTabs = DTabs;
+exports.DTimeline = DTimeline;
+exports.DToast = DToast;
 exports.DToastContainer = DToastContainer;
 exports.DTooltip = DTooltip;
+exports.DVoucher = DVoucher;
 exports.changeQueryString = changeQueryString;
 exports.checkMediaQuery = checkMediaQuery;
 exports.configureI18n = configureI8n;