@dynamic-framework/ui-react 1.7.3 → 1.8.0

package/dist/index.js

@@ -1,56 +1,42 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const classNames = require('classnames');
-const tslib = require('tslib');
-const reactDropzone = require('react-dropzone');
-const reactSplide = require('@splidejs/react-splide');
-const currency = require('currency.js');
-const DatePicker = require('react-datepicker');
-const luxon = require('luxon');
-const formik = require('formik');
-const ResponsivePagination = require('react-responsive-pagination');
-const react$1 = require('@floating-ui/react');
-const ContentLoader = require('react-content-loader');
-const reactToastify = require('react-toastify');
-const i18n = require('i18next');
-const reactI18next = require('react-i18next');
-const html2canvas = require('html2canvas');
-const reactDom = require('react-dom');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-const classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-const currency__default = /*#__PURE__*/_interopDefaultLegacy(currency);
-const DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
-const ResponsivePagination__default = /*#__PURE__*/_interopDefaultLegacy(ResponsivePagination);
-const ContentLoader__default = /*#__PURE__*/_interopDefaultLegacy(ContentLoader);
-const i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
-const html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('classnames');
+var tslib = require('tslib');
+var reactDropzone = require('react-dropzone');
+var reactSplide = require('@splidejs/react-splide');
+var currency = require('currency.js');
+var DatePicker = require('react-datepicker');
+var dateFns = require('date-fns');
+var ResponsivePagination = require('react-responsive-pagination');
+var react = require('@floating-ui/react');
+var ContentLoader = require('react-content-loader');
+var reactToastify = require('react-toastify');
+var i18n = require('i18next');
+var reactI18next = require('react-i18next');
+var reactDom = require('react-dom');
 
 function DBadge({ text, isDot = false, theme = 'primary', id, className, style, }) {
-    const generateClasses = react.useMemo(() => ({
+    const generateClasses = React.useMemo(() => ({
         badge: true,
         'badge-dot': isDot,
         [`badge-${theme}`]: !!theme,
     }), [isDot, theme]);
-    return (jsxRuntime.jsx("span", Object.assign({ className: classNames__default["default"](generateClasses, className), style: style }, id && { id }, { children: jsxRuntime.jsx("span", { children: text }) })));
+    return (jsxRuntime.jsx("span", Object.assign({ className: classNames(generateClasses, className), style: style }, id && { id }, { children: jsxRuntime.jsx("span", { children: text }) })));
 }
 
-function DInputSwitch({ label, id, name, isChecked, isDisabled, isReadonly, onChange, }) {
-    const [internalIsChecked, setInternalIsChecked] = react.useState(isChecked);
-    react.useEffect(() => {
+function DInputSwitch({ label, id, name, isChecked, isDisabled, isReadonly, className, style, onChange, }) {
+    const [internalIsChecked, setInternalIsChecked] = React.useState(isChecked);
+    React.useEffect(() => {
         setInternalIsChecked(isChecked);
     }, [isChecked]);
-    const changeHandler = react.useCallback((event) => {
+    const changeHandler = React.useCallback((event) => {
         const value = event.currentTarget.checked;
         setInternalIsChecked(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [onChange]);
-    return (jsxRuntime.jsxs("div", { className: "form-check form-switch", children: [jsxRuntime.jsx("input", { id: id, name: name, onChange: isReadonly ? () => false : changeHandler, className: "form-check-input", type: "checkbox", role: "switch", checked: internalIsChecked, disabled: isDisabled }), label && (jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] }));
+    return (jsxRuntime.jsxs("div", { className: "form-check form-switch", children: [jsxRuntime.jsx("input", { id: id, name: name, onChange: isReadonly ? () => false : changeHandler, className: classNames('form-check-input', className), style: style, type: "checkbox", role: "switch", checked: internalIsChecked, disabled: isDisabled }), label && (jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] }));
 }
 
 function DPermissionItem({ permission, permissionState, onChange, onAction = () => { }, }) {
@@ -71,8 +57,8 @@ const ALERT_TYPE_ICON = {
     dark: 'info-circle',
 };
 
-function DIcon({ icon, theme, className = '', size = '1.5rem', isLoading = false, loadingDuration = 1.8, hasCircle = false, circleSize = `calc(var(--${PREFIX_BS}icon-component-size) * 1)`, color, backgroundColor, familyClass = 'bi', familyPrefix = 'bi-', }) {
-    const getColorStyle = react.useMemo(() => {
+function DIcon({ icon, theme, style, className, size = '1.5rem', isLoading = false, loadingDuration = 1.8, hasCircle = false, circleSize = `calc(var(--${PREFIX_BS}icon-component-size) * 1)`, color, backgroundColor, familyClass = 'bi', familyPrefix = 'bi-', }) {
+    const colorStyle = React.useMemo(() => {
         if (color) {
             return { [`--${PREFIX_BS}component-color`]: color };
         }
@@ -81,7 +67,7 @@ function DIcon({ icon, theme, className = '', size = '1.5rem', isLoading = false
         }
         return {};
     }, [color, theme]);
-    const getBackgroundStyle = react.useMemo(() => {
+    const backgroundStyle = React.useMemo(() => {
         if (backgroundColor) {
             return { [`--${PREFIX_BS}icon-component-bg-color`]: backgroundColor };
         }
@@ -93,21 +79,15 @@ function DIcon({ icon, theme, className = '', size = '1.5rem', isLoading = false
         }
         return {};
     }, [backgroundColor, hasCircle, theme]);
-    const getCircleSizeStyle = react.useMemo(() => {
+    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({ [`--${PREFIX_BS}icon-component-size`]: size, [`--${PREFIX_BS}icon-component-loading-duration`]: `${loadingDuration}s` }, getColorStyle), getBackgroundStyle), getCircleSizeStyle)), [size, loadingDuration, getColorStyle, getBackgroundStyle, getCircleSizeStyle]);
-    const generateClasses = react.useMemo(() => ({
-        'd-icon': true,
-        [className]: !!className,
-        [familyClass]: true,
-        [`${familyPrefix}${icon}`]: true,
-        'd-icon-loading': isLoading,
-    }), [familyClass, familyPrefix, icon, className, isLoading]);
-    return (jsxRuntime.jsx("i", { className: classNames__default["default"](generateClasses), style: generateStyleVariables }));
+    const generateStyleVariables = React.useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({ [`--${PREFIX_BS}icon-component-size`]: size, [`--${PREFIX_BS}icon-component-loading-duration`]: `${loadingDuration}s` }, colorStyle), backgroundStyle), circleSizeStyle), style)), [size, loadingDuration, colorStyle, backgroundStyle, circleSizeStyle, style]);
+    const generateClasses = React.useMemo(() => (Object.assign({ 'd-icon': true, [familyClass]: true, [`${familyPrefix}${icon}`]: true, 'd-icon-loading': isLoading }, className && { [className]: true })), [familyClass, familyPrefix, icon, className, isLoading]);
+    return (jsxRuntime.jsx("i", { className: classNames(generateClasses), style: generateStyleVariables }));
 }
 
 function DSummaryCard({ title, description, icon, iconSize, iconTheme, Summary, }) {
@@ -115,39 +95,39 @@ function DSummaryCard({ title, description, icon, iconSize, iconTheme, Summary,
 }
 
 function DAlert({ type = 'light', icon, iconFamilyClass, iconFamilyPrefix, showIcon = false, showClose, onClose, children, id, className, style, }) {
-    const generateClasses = react.useMemo(() => ({
+    const generateClasses = React.useMemo(() => ({
         alert: true,
         [`alert-${type}`]: true,
         'fade show': !!showClose,
         className: !!className,
     }), [type, showClose, className]);
-    const getIcon = react.useMemo(() => icon || ALERT_TYPE_ICON[type] || '', [icon, type]);
-    const generateStyleVariables = react.useMemo(() => (Object.assign(Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}alert-component-separator-opacity`]: '0.3' }), type === 'light' && {
+    const getIcon = React.useMemo(() => icon || ALERT_TYPE_ICON[type] || '', [icon, type]);
+    const generateStyleVariables = React.useMemo(() => (Object.assign(Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}alert-component-separator-opacity`]: '0.3' }), type === 'light' && {
         [`--${PREFIX_BS}alert-component-icon-color`]: `var(--${PREFIX_BS}secondary)`,
     })), [style, type]);
-    return (jsxRuntime.jsxs("div", { className: classNames__default["default"](generateClasses), style: generateStyleVariables, role: "alert", id: id, children: [(showIcon || icon) && (jsxRuntime.jsx(DIcon, Object.assign({ className: "alert-icon", icon: getIcon }, iconFamilyClass && { familyClass: iconFamilyClass }, iconFamilyPrefix && { familyPrefix: iconFamilyPrefix }))), jsxRuntime.jsx("div", { className: "alert-text", children: children }), showClose && (jsxRuntime.jsx("div", { className: "alert-separator" })), showClose && (jsxRuntime.jsx("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { className: "alert-close-icon", icon: "x-lg", familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) }))] }));
+    return (jsxRuntime.jsxs("div", { className: classNames(generateClasses), style: generateStyleVariables, role: "alert", id: id, children: [(showIcon || icon) && (jsxRuntime.jsx(DIcon, Object.assign({ className: "alert-icon", icon: getIcon }, iconFamilyClass && { familyClass: iconFamilyClass }, iconFamilyPrefix && { familyPrefix: iconFamilyPrefix }))), jsxRuntime.jsx("div", { className: "alert-text", children: children }), showClose && (jsxRuntime.jsx("div", { className: "alert-separator" })), showClose && (jsxRuntime.jsx("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { className: "alert-close-icon", icon: "x-lg", familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) }))] }));
 }
 
 function DBoxFile(_a) {
-    var { icon = 'cloud-upload', iconFamilyClass, iconFamilyPrefix, isDisabled = false, children } = _a, dropzoneOptions = tslib.__rest(_a, ["icon", "iconFamilyClass", "iconFamilyPrefix", "isDisabled", "children"]);
+    var { icon = 'cloud-upload', iconFamilyClass, iconFamilyPrefix, isDisabled = false, children, className, style } = _a, dropzoneOptions = tslib.__rest(_a, ["icon", "iconFamilyClass", "iconFamilyPrefix", "isDisabled", "children", "className", "style"]);
     const { acceptedFiles, getRootProps, getInputProps, } = reactDropzone.useDropzone(Object.assign({ disabled: isDisabled }, dropzoneOptions));
-    return (jsxRuntime.jsxs("section", { className: classNames__default["default"]('d-box-file', {
+    return (jsxRuntime.jsxs("section", { className: classNames('d-box-file', {
             'd-box-file-selected': !!acceptedFiles.length,
-        }), children: [jsxRuntime.jsxs("div", Object.assign({}, getRootProps({
-                className: classNames__default["default"]('d-box-file-dropzone', {
+        }, className), style: style, children: [jsxRuntime.jsxs("div", Object.assign({}, getRootProps({
+                className: classNames('d-box-file-dropzone', {
                     disabled: isDisabled,
                 }),
             }), { children: [jsxRuntime.jsx("input", Object.assign({}, getInputProps())), jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }), jsxRuntime.jsx("div", { className: "d-box-content", children: children })] })), !!acceptedFiles.length && (jsxRuntime.jsx("aside", { className: "d-box-files", children: acceptedFiles.map((file) => (jsxRuntime.jsx("div", { className: "d-box-files-text", children: `${file.name} - ${file.size} bytes` }, file.name))) }))] }));
 }
 
 function DButton({ theme = 'primary', size, variant, state, text = '', iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, value, type = 'button', isPill = false, isLoading = false, isDisabled = false, isStopPropagationEnabled = true, className, onClick, }) {
-    const generateClasses = react.useMemo(() => {
+    const generateClasses = 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: isLoading });
     }, [variant, theme, size, state, isLoading]);
-    const generateStyleVariables = react.useMemo(() => {
+    const generateStyleVariables = React.useMemo(() => {
         if (isPill) {
             return {
                 [`--${PREFIX_BS}btn-component-border-radius`]: `var(--${PREFIX_BS}border-radius-pill)`,
@@ -157,38 +137,48 @@ function DButton({ theme = 'primary', size, variant, state, text = '', iconStart
         }
         return {};
     }, [isPill]);
-    const clickHandler = react.useCallback((event) => {
+    const clickHandler = React.useCallback((event) => {
         if (isStopPropagationEnabled) {
             event.stopPropagation();
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }, [isStopPropagationEnabled, onClick]);
-    return (jsxRuntime.jsxs("button", Object.assign({ className: classNames__default["default"](generateClasses, className), style: generateStyleVariables, type: type, disabled: state === 'disabled' || isLoading || isDisabled }, value && { value }, { onClick: clickHandler, children: [iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })), (text && !isLoading) && (jsxRuntime.jsx("span", { children: text })), isLoading && (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 }))] })));
+    return (jsxRuntime.jsxs("button", Object.assign({ className: classNames(generateClasses, className), style: generateStyleVariables, type: type, disabled: state === 'disabled' || isLoading || isDisabled }, value && { value }, { onClick: clickHandler, children: [iconStart && (jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })), (text && !isLoading) && (jsxRuntime.jsx("span", { children: text })), isLoading && (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 }))] })));
 }
 
-function DCard({ className, style, children, }) {
-    return (jsxRuntime.jsx("div", { style: style, className: classNames__default["default"]('card', className), children: children }));
+function DCardHeader({ className, style, children, }) {
+    return (jsxRuntime.jsx("div", { className: classNames('card-header', className), style: style, children: children }));
 }
 
-function DCardBody({ className, children, }) {
-    return (jsxRuntime.jsx("div", { className: classNames__default["default"]('card-body', className), children: children }));
+function DCardBody({ className, style, children, }) {
+    return (jsxRuntime.jsx("div", { className: classNames('card-body', className), style: style, children: children }));
 }
 
-function DCardFooter({ className, children, }) {
-    return (jsxRuntime.jsx("div", { className: classNames__default["default"]('card-footer', className), children: children }));
+function DCardFooter({ className, style, children, }) {
+    return (jsxRuntime.jsx("div", { className: classNames('card-footer', className), style: style, children: children }));
 }
 
-function DCardHeader({ className, children, }) {
-    return (jsxRuntime.jsx("div", { className: classNames__default["default"]('card-header', className), children: children }));
+function DCard({ className, style, children, }) {
+    return (jsxRuntime.jsx("div", { style: style, className: classNames('card', className), children: children }));
+}
+var DCard$1 = Object.assign(DCard, {
+    Header: DCardHeader,
+    Body: DCardBody,
+    Footer: DCardFooter,
+});
+
+function DCardAccount({ className, style, icon, theme, name, number, balance, balanceText, onClick, actionText, }) {
+    return (jsxRuntime.jsx(DCard$1, { className: classNames('d-card-account', className), style: style, children: jsxRuntime.jsxs(DCard$1.Body, { children: [jsxRuntime.jsxs("div", { className: "d-flex gap-3 align-items-center", children: [jsxRuntime.jsx(DIcon, { icon: icon, hasCircle: true, theme: theme, size: "1.5rem" }), jsxRuntime.jsxs("div", { className: "d-block flex-grow-1", children: [jsxRuntime.jsx("p", { className: "text-gray-700", children: name }), jsxRuntime.jsx("small", { className: "text-gray-500", children: number })] })] }), jsxRuntime.jsxs("div", { className: "d-block", children: [jsxRuntime.jsx("p", { className: "fw-bold fs-6 text-body", children: balance }), jsxRuntime.jsx("small", { className: "text-gray-700", children: balanceText })] }), jsxRuntime.jsx("div", { className: "d-flex justify-content-end", children: jsxRuntime.jsx(DButton, { text: actionText, variant: "link", size: "sm", theme: "secondary", iconEnd: "chevron-right", onClick: onClick }) })] }) }));
 }
 
-function DCardAccount({ className, icon, theme, name, number, balance, balanceText, onClick, actionText, }) {
-    return (jsxRuntime.jsx(DCard, { className: classNames__default["default"]('d-card-account', className), children: jsxRuntime.jsxs(DCardBody, { children: [jsxRuntime.jsxs("div", { className: "d-flex gap-3 align-items-center", children: [jsxRuntime.jsx(DIcon, { icon: icon, hasCircle: true, theme: theme, size: "1.5rem" }), jsxRuntime.jsxs("div", { className: "d-block flex-grow-1", children: [jsxRuntime.jsx("p", { className: "text-gray-700", children: name }), jsxRuntime.jsx("small", { className: "text-gray-500", children: number })] })] }), jsxRuntime.jsxs("div", { className: "d-block", children: [jsxRuntime.jsx("p", { className: "fw-bold fs-6 text-body", children: balance }), jsxRuntime.jsx("small", { className: "text-gray-700", children: balanceText })] }), jsxRuntime.jsx("div", { className: "d-flex justify-content-end", children: jsxRuntime.jsx(DButton, { text: actionText, variant: "link", size: "sm", theme: "secondary", iconEnd: "chevron-right", onClick: onClick }) })] }) }));
+function DCarouselSlide(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(reactSplide.SplideSlide, Object.assign({ className: classNames('d-carousel-slide', className) }, props)));
 }
 
 function DCarousel(_a) {
-    var { children, className, options } = _a, props = tslib.__rest(_a, ["children", "className", "options"]);
-    return (jsxRuntime.jsx(reactSplide.Splide, Object.assign({ className: classNames__default["default"]('d-carousel', className), options: Object.assign(Object.assign({}, options), { classes: {
+    var { children, className, style, options } = _a, props = tslib.__rest(_a, ["children", "className", "style", "options"]);
+    return (jsxRuntime.jsx(reactSplide.Splide, Object.assign({ className: classNames('d-carousel', className), style: style, options: Object.assign(Object.assign({}, options), { classes: {
                 // Arrows
                 arrows: 'splide__arrows d-carousel-arrows',
                 arrow: 'splide__arrow d-carousel-arrow',
@@ -199,122 +189,42 @@ function DCarousel(_a) {
                 page: 'splide__pagination__page d-carousel-pagination-page',
             } }) }, props, { children: children })));
 }
+var DCarousel$1 = Object.assign(DCarousel, {
+    Slide: DCarouselSlide,
+});
 
-function DCarouselSlide(_a) {
-    var { className } = _a, props = tslib.__rest(_a, ["className"]);
-    return (jsxRuntime.jsx(reactSplide.SplideSlide, Object.assign({ className: classNames__default["default"]('d-carousel-slide', className) }, props)));
-}
-
-function DChip({ theme = 'primary', text, icon, iconFamilyClass, iconFamilyPrefix, showClose = false, onClose, }) {
-    const generateClasses = react.useMemo(() => ({
+function DChip({ theme = 'primary', text, icon, iconFamilyClass, iconFamilyPrefix, showClose = false, className, style, onClose, }) {
+    const generateClasses = React.useMemo(() => ({
         'd-chip': true,
         [`d-chip-${theme}`]: !!theme,
     }), [theme]);
-    return (jsxRuntime.jsxs("span", { className: classNames__default["default"](generateClasses), children: [icon && (jsxRuntime.jsx("div", { className: "d-chip-icon-container", children: jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), jsxRuntime.jsx("span", { children: text }), showClose && (jsxRuntime.jsx("button", { type: "button", className: "d-chip-icon-container", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: "x-lg" }) }))] }));
+    return (jsxRuntime.jsxs("span", { className: classNames(generateClasses, className), style: style, children: [icon && (jsxRuntime.jsx("div", { className: "d-chip-icon-container", children: jsxRuntime.jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), jsxRuntime.jsx("span", { children: text }), showClose && (jsxRuntime.jsx("button", { type: "button", className: "d-chip-icon-container", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: "x-lg" }) }))] }));
 }
 
-function DCollapse({ id, className, Component, hasSeparator = false, defaultCollapsed = false, onChange, children, }) {
-    const [toggle, setToggle] = react.useState(defaultCollapsed);
+function DCollapse({ id, className, style, Component, hasSeparator = false, defaultCollapsed = false, onChange, children, }) {
+    const [toggle, setToggle] = React.useState(defaultCollapsed);
     const onChangeCollapse = () => setToggle((prev) => !prev);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (onChange) {
             onChange(toggle);
         }
     }, [toggle, onChange]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         setToggle(defaultCollapsed);
     }, [defaultCollapsed]);
-    const generateStyles = react.useMemo(() => ({
+    const generateStyles = React.useMemo(() => ({
         [`--${PREFIX_BS}collapse-separator-display`]: hasSeparator ? 'block' : 'none',
     }), [hasSeparator]);
-    return (jsxRuntime.jsxs("div", { id: id, className: classNames__default["default"]('collapse-container', className), 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}ref-fs-small)`, icon: toggle ? 'chevron-up' : 'chevron-down' })] }), toggle && (jsxRuntime.jsx("div", { className: classNames__default["default"]({
+    return (jsxRuntime.jsxs("div", { id: id, className: classNames('collapse-container', className), style: style, 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}ref-fs-small)`, icon: toggle ? 'chevron-up' : 'chevron-down' })] }), toggle && (jsxRuntime.jsx("div", { className: classNames({
                     'collapse-body': true,
                 }), style: generateStyles, children: children }))] }));
 }
 
-function DCollapseIconText({ children, icon, iconSize = '1.5rem', iconTheme = 'primary', title, iconFamilyClass, iconFamilyPrefix, }) {
-    return (jsxRuntime.jsx(DCollapse, { defaultCollapsed: true, className: "d-collapse-icon-text", Component: (jsxRuntime.jsxs("div", { className: "d-collapse-icon-text-header", children: [jsxRuntime.jsx(DIcon, { icon: icon, size: iconSize, theme: iconTheme, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, hasCircle: true }), jsxRuntime.jsx("span", { className: "d-collapse-icon-text-title", children: title })] })), children: children }));
-}
-
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/require-await */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const liquidParser = {
-    library: {},
-    engine: undefined,
-    init(library, Liquid) {
-        this.library = library;
-        if (Liquid) {
-            // eslint-disable-next-line @typescript-eslint/no-var-requires,global-require
-            this.engine = new Liquid.Liquid({
-                strictFilters: true,
-                strictVariables: true,
-            });
-        }
-    },
-    /**
-     * Parse a liquid string
-     * @param liquidString Target Content Space UID
-     * @returns a usable object or string
-     */
-    async parseLiquidAsync(liquidString) {
-        try {
-            return this.engine.parseAndRender(liquidString, this.library);
-        }
-        catch (error) {
-            return error.message;
-        }
-    },
-    /**
-     * Parse a liquid string
-     * @param liquidString Target Content Space UID
-     * @returns a usable object or string
-     */
-    parseLiquid(liquidString) {
-        try {
-            return this.engine.parseAndRenderSync(liquidString, this.library);
-        }
-        catch (error) {
-            return error.message;
-        }
-    },
-    parse(liquidString) {
-        if (this.engine) {
-            return this.parseLiquid(liquidString);
-        }
-        return liquidString;
-    },
-    async parseAsync(liquidString) {
-        if (this.engine) {
-            return this.parseLiquidAsync(liquidString);
-        }
-        return liquidString;
-    },
-};
-
-function formatCurrency(amount, options) {
-    return currency__default["default"](amount, options).format();
-}
-
-const LANG = liquidParser.parse('{{site.language}}');
-async function configureI8n(resources, _a = {}) {
-    var { lng = LANG, fallbackLng = 'es' } = _a, config = tslib.__rest(_a, ["lng", "fallbackLng"]);
-    return i18n__default["default"]
-        .use(reactI18next.initReactI18next)
-        .init(Object.assign({ resources,
-        lng, initImmediate: true, fallbackLng, interpolation: {
-            escapeValue: false,
-            prefix: '{',
-            suffix: '}',
-            // skipOnVariables: false,
-        } }, config))
-        .then((t) => t);
+function DCollapseIconText({ children, icon, iconSize = '1.5rem', iconTheme = 'primary', title, iconFamilyClass, iconFamilyPrefix, className, style, }) {
+    return (jsxRuntime.jsx(DCollapse, { defaultCollapsed: true, className: classNames('d-collapse-icon-text', className), style: style, Component: (jsxRuntime.jsxs("div", { className: "d-collapse-icon-text-header", children: [jsxRuntime.jsx(DIcon, { icon: icon, size: iconSize, theme: iconTheme, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, hasCircle: true }), jsxRuntime.jsx("span", { className: "d-collapse-icon-text-title", children: title })] })), children: children }));
 }
 
-const LiquidContext = react.createContext({
+const defaultState = {
     language: 'en',
     currency: {
         symbol: '$',
@@ -322,27 +232,22 @@ const LiquidContext = react.createContext({
         separator: ',',
         decimal: '.',
     },
-});
-function LiquidContextProvider({ children, }) {
-    const value = react.useMemo(() => ({
-        language: liquidParser.parse('{{site.language}}'),
-        currency: {
-            symbol: liquidParser.parse('{{vars.currency-symbol}}'),
-            precision: parseInt(liquidParser.parse('{{vars.currency-precision}}'), 10),
-            separator: liquidParser.parse('{{vars.currency-separator}}'),
-            decimal: liquidParser.parse('{{vars.currency-decimal}}'),
-        },
-    }), []);
-    return (jsxRuntime.jsx(LiquidContext.Provider, { value: value, children: children }));
-}
-function useLiquidContext() {
-    const context = react.useContext(LiquidContext);
+};
+const DContext = React.createContext(defaultState);
+function DContextProvider({ language = defaultState.language, currency = defaultState.currency, children, }) {
+    const value = React.useMemo(() => ({
+        language,
+        currency,
+    }), [language, currency]);
+    return (jsxRuntime.jsx(DContext.Provider, { value: value, children: children }));
+}
+function useDContext() {
+    const context = React.useContext(DContext);
     if (context === undefined) {
-        throw new Error('useLiquidContext was used outside of LiquidContextProvider');
+        throw new Error('useDContext was used outside of DContextProvider');
     }
     return context;
 }
-const LiquidContext$1 = LiquidContext;
 
 /**
  * useStackState inspired from rooks
@@ -353,15 +258,15 @@ const LiquidContext$1 = LiquidContext;
  * @see https://react-hooks.org/docs/useStackState
  */
 function useStackState(initialList) {
-    const [list, setList] = react.useState(initialList);
+    const [list, setList] = React.useState(initialList);
     const { length } = list;
-    const push = react.useCallback((item) => {
+    const push = React.useCallback((item) => {
         setList((prevList) => [
             ...prevList,
             item,
         ]);
     }, []);
-    const pop = react.useCallback(() => {
+    const pop = React.useCallback(() => {
         setList((prevList) => {
             if (prevList.length === 0) {
                 return prevList;
@@ -370,14 +275,14 @@ function useStackState(initialList) {
             return newList;
         });
     }, []);
-    const peek = react.useCallback(() => {
+    const peek = React.useCallback(() => {
         if (list.length > 0) {
             return list[list.length - 1];
         }
         return undefined;
     }, [list]);
     const clear = () => setList([]);
-    const isEmpty = react.useCallback(() => list.length === 0, [list]);
+    const isEmpty = React.useCallback(() => list.length === 0, [list]);
     const controls = {
         clear,
         isEmpty,
@@ -389,11 +294,11 @@ function useStackState(initialList) {
     return [list, controls];
 }
 
-const ModalContext = react.createContext(undefined);
+const ModalContext = React.createContext(undefined);
 function enhanceModal(Modal, callbacks) {
     return function EnhancedModal(_a) {
         var { name, payload } = _a, otherProps = tslib.__rest(_a, ["name", "payload"]);
-        react.useEffect(() => {
+        React.useEffect(() => {
             if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onAfterOpen) {
                 callbacks.onAfterOpen(payload);
             }
@@ -409,8 +314,8 @@ function enhanceModal(Modal, callbacks) {
     };
 }
 function ModalContextProvider({ portalName, children, availableModals, }) {
-    const [hasPortal, setHasPortal] = react.useState(false);
-    react.useEffect(() => {
+    const [hasPortal, setHasPortal] = React.useState(false);
+    React.useEffect(() => {
         const previousPortal = document.querySelector(`#${portalName}`);
         if (previousPortal) {
             previousPortal.remove();
@@ -421,7 +326,7 @@ function ModalContextProvider({ portalName, children, availableModals, }) {
         setHasPortal(true);
     }, [portalName]);
     const [stack, { push, pop, peek }] = useStackState([]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (stack.length) {
             document.body.style.overflow = 'hidden';
             document.body.style.paddingRight = '0';
@@ -431,7 +336,7 @@ function ModalContextProvider({ portalName, children, availableModals, }) {
             document.body.style.paddingRight = 'unset';
         }
     }, [stack.length]);
-    const openModal = react.useCallback((modalName, { payload, callbacks } = { payload: {} }) => {
+    const openModal = React.useCallback((modalName, { payload, callbacks } = { payload: {} }) => {
         const Component = availableModals[modalName];
         if (!Component) {
             throw new Error(`there is no component for modal ${modalName}`);
@@ -447,7 +352,7 @@ function ModalContextProvider({ portalName, children, availableModals, }) {
         }
         push(stackItem);
     }, [availableModals, push]);
-    const closeModal = react.useCallback((context = { fromModal: false }) => {
+    const closeModal = React.useCallback((context = { fromModal: false }) => {
         var _a;
         const stackItem = peek();
         if (!stackItem) {
@@ -458,7 +363,7 @@ function ModalContextProvider({ portalName, children, availableModals, }) {
         }
         pop();
     }, [peek, pop]);
-    const value = react.useMemo(() => ({
+    const value = React.useMemo(() => ({
         stack,
         openModal,
         closeModal,
@@ -469,18 +374,18 @@ function ModalContextProvider({ portalName, children, availableModals, }) {
                     }), !!stack.length && jsxRuntime.jsx("div", { className: "modal-backdrop fade show" })] }), document.getElementById(portalName))] }));
 }
 function useModalContext() {
-    const context = react.useContext(ModalContext);
+    const context = React.useContext(ModalContext);
     if (context === undefined) {
         throw new Error('useModalContext was used outside of ModalContextProvider');
     }
     return context;
 }
 
-const OffcanvasContext = react.createContext(undefined);
+const OffcanvasContext = React.createContext(undefined);
 function enhanceOffcanvas(Offcanvas, callbacks) {
     return function EnhancedOffcanvas(_a) {
         var { name, payload } = _a, otherProps = tslib.__rest(_a, ["name", "payload"]);
-        react.useEffect(() => {
+        React.useEffect(() => {
             if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onAfterOpen) {
                 callbacks.onAfterOpen(payload);
             }
@@ -496,8 +401,8 @@ function enhanceOffcanvas(Offcanvas, callbacks) {
     };
 }
 function OffcanvasContextProvider({ portalName, children, availableOffcanvas, }) {
-    const [hasPortal, setHasPortal] = react.useState(false);
-    react.useEffect(() => {
+    const [hasPortal, setHasPortal] = React.useState(false);
+    React.useEffect(() => {
         const previousPortal = document.querySelector(`#${portalName}`);
         if (previousPortal) {
             previousPortal.remove();
@@ -508,7 +413,7 @@ function OffcanvasContextProvider({ portalName, children, availableOffcanvas, })
         setHasPortal(true);
     }, [portalName]);
     const [stack, { push, pop, peek }] = useStackState([]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (stack.length) {
             document.body.style.overflow = 'hidden';
             document.body.style.paddingRight = '0';
@@ -518,7 +423,7 @@ function OffcanvasContextProvider({ portalName, children, availableOffcanvas, })
             document.body.style.paddingRight = 'unset';
         }
     }, [stack.length]);
-    const openOffcanvas = react.useCallback((offcanvasName, { payload, callbacks } = { payload: {} }) => {
+    const openOffcanvas = React.useCallback((offcanvasName, { payload, callbacks } = { payload: {} }) => {
         const Component = availableOffcanvas[offcanvasName];
         if (!Component) {
             throw new Error(`there is no component for offcanvas ${offcanvasName}`);
@@ -534,7 +439,7 @@ function OffcanvasContextProvider({ portalName, children, availableOffcanvas, })
         }
         push(stackItem);
     }, [availableOffcanvas, push]);
-    const closeOffcanvas = react.useCallback((context = { fromOffcanvas: false }) => {
+    const closeOffcanvas = React.useCallback((context = { fromOffcanvas: false }) => {
         var _a;
         const stackItem = peek();
         if (!stackItem) {
@@ -545,7 +450,7 @@ function OffcanvasContextProvider({ portalName, children, availableOffcanvas, })
         }
         pop();
     }, [peek, pop]);
-    const value = react.useMemo(() => ({
+    const value = React.useMemo(() => ({
         stack,
         openOffcanvas,
         closeOffcanvas,
@@ -556,16 +461,20 @@ function OffcanvasContextProvider({ portalName, children, availableOffcanvas, })
                     }), !!stack.length && jsxRuntime.jsx("div", { className: "offcanvas-backdrop fade show" })] }), document.getElementById(portalName))] }));
 }
 function useOffcanvasContext() {
-    const context = react.useContext(OffcanvasContext);
+    const context = React.useContext(OffcanvasContext);
     if (context === undefined) {
         throw new Error('useOffcanvasContext was used outside of OffcanvasContextProvider');
     }
     return context;
 }
 
+function formatCurrency(amount, options) {
+    return currency(amount, options).format();
+}
+
 function useFormatCurrency(...args) {
-    const { currency } = useLiquidContext();
-    const format = react.useCallback((value) => formatCurrency(value, currency), [currency]);
+    const { currency } = useDContext();
+    const format = React.useCallback((value) => formatCurrency(value, currency), [currency]);
     const values = (args || []).map((value) => (formatCurrency(value !== null && value !== void 0 ? value : 0, currency)));
     return {
         format,
@@ -573,307 +482,269 @@ function useFormatCurrency(...args) {
     };
 }
 
-function DCurrencyText({ value, className, }) {
+function DCurrencyText({ value, className, style, }) {
     const { values: [valueFormatted] } = useFormatCurrency(value);
-    return (jsxRuntime.jsx("span", { className: className, children: valueFormatted }));
+    return (jsxRuntime.jsx("span", { className: className, style: style, children: valueFormatted }));
 }
 
-function DInput({ id, style, className, name, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, placeholder = '', type = 'text', value = '', innerInputMode, pattern, isDisabled = false, isReadOnly = false, isLoading = false, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, hint, isInvalid = false, isValid = false, inputStart, onChange, onBlur, onFocus, onWheel, onIconStartClick, onIconEndClick, }, ref) {
-    const innerRef = react.useRef(null);
-    const [internalValue, setInternalValue] = react.useState(value);
-    react.useEffect(() => {
-        setInternalValue(value);
-    }, [value]);
-    react.useImperativeHandle(ref, () => ({
-        blur() {
-            var _a;
-            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-        },
-        focus() {
-            var _a;
-            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        },
-    }), []);
-    const handleInputChange = react.useCallback((event) => {
-        setInternalValue(event.target.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange]);
-    return (jsxRuntime.jsxs("div", { className: classNames__default["default"]({
+/* eslint-disable */
+/**
+ * This file is originally from `@primer/react`
+ * The original source for this lived in the URL below.
+ *
+ * @see https://github.com/primer/react/blob/216d2a9f57b8acb0701ab4e04a23e057fc325c90/src/hooks/useProvidedRefOrCreate.ts
+ */
+/**
+ * There are some situations where we only want to create a new ref if one is not provided to a component
+ * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`
+ * only in the situations where the ref is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
+ * @type TRef The type of the RefObject which should be created.
+ */
+function useProvidedRefOrCreate(providedRef) {
+    const createdRef = React.useRef(null);
+    return providedRef !== null && providedRef !== void 0 ? providedRef : createdRef;
+}
+
+function DInput(_a, ref) {
+    var { id, style, className, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled = false, readOnly = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, hint, invalid = false, valid = false, inputStart, value, onChange, onIconStartClick, onIconEndClick } = _a, inputProps = tslib.__rest(_a, ["id", "style", "className", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "disabled", "readOnly", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "hint", "invalid", "valid", "inputStart", "value", "onChange", "onIconStartClick", "onIconEndClick"]);
+    const inputRef = useProvidedRefOrCreate(ref);
+    const handleOnChange = React.useCallback(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, [onChange, value]);
+    const handleOnIconStartClick = React.useCallback(() => {
+        onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(value);
+    }, [onIconStartClick, value]);
+    const handleOnIconEndClick = React.useCallback(() => {
+        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(value);
+    }, [onIconEndClick, value]);
+    return (jsxRuntime.jsxs("div", { className: classNames({
             'd-input': true,
             className: !!className,
-        }), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: "d-input-control", children: [jsxRuntime.jsxs("div", { className: classNames__default["default"]({
+        }), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: "d-input-control", children: [jsxRuntime.jsxs("div", { className: classNames({
                             'input-group': true,
-                            'has-validation': isInvalid,
-                            disabled: isDisabled || isLoading,
-                        }), children: [!!inputStart && (jsxRuntime.jsx("div", { className: "input-group-text", children: inputStart })), iconStart && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: onIconStartClick, disabled: isDisabled || isLoading, children: iconStart && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), jsxRuntime.jsx("input", Object.assign({ ref: innerRef, id: id, name: name, type: type, className: classNames__default["default"]('form-control', {
-                                    'is-invalid': isInvalid,
-                                    'is-valid': isValid,
-                                }), placeholder: placeholder, "aria-label": label, disabled: isDisabled || isLoading, readOnly: isReadOnly, value: internalValue, "aria-describedby": `${id}Add ${id}Hint`, pattern: pattern, onChange: (event) => handleInputChange(event), onBlur: onBlur, onFocus: onFocus, onWheel: onWheel }, innerInputMode && { inputMode: innerInputMode })), ((isInvalid || isValid) && !iconEnd && !isLoading) && (jsxRuntime.jsx("span", { className: "input-group-text", id: `${id}State`, children: jsxRuntime.jsx(DIcon, { className: "d-input-validation-icon", icon: isInvalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), (iconEnd && !isLoading) && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: onIconEndClick, disabled: isDisabled || isLoading, children: iconEnd && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), isLoading && (jsxRuntime.jsx("div", { className: "input-group-text d-input-icon", 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 }))] })] }));
-}
-const ForwardedDInput = react.forwardRef(DInput);
+                            'has-validation': invalid,
+                            disabled: disabled || loading,
+                        }), children: [!!inputStart && (jsxRuntime.jsx("div", { className: "input-group-text", children: inputStart })), iconStart && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, children: iconStart && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), jsxRuntime.jsx("input", Object.assign({ ref: inputRef, id: id, className: classNames('form-control', {
+                                    'is-invalid': invalid,
+                                    'is-valid': valid,
+                                }), "aria-label": label, disabled: disabled || loading, readOnly: readOnly, "aria-describedby": `${id}Add ${id}Hint`, value: value, onChange: handleOnChange }, inputProps)), ((invalid || valid) && !iconEnd && !loading) && (jsxRuntime.jsx("span", { className: "input-group-text", id: `${id}State`, children: jsxRuntime.jsx(DIcon, { className: "d-input-validation-icon", icon: invalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), (iconEnd && !loading) && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, children: iconEnd && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), loading && (jsxRuntime.jsx("div", { className: "input-group-text d-input-icon", 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 }))] })] }));
+}
+const ForwardedDInput = React.forwardRef(DInput);
 ForwardedDInput.displayName = 'DInput';
-const DInput$1 = ForwardedDInput;
+var DInput$1 = ForwardedDInput;
 
 function DDatePickerTime(_a) {
-    var { value, onChange, id, label } = _a, props = tslib.__rest(_a, ["value", "onChange", "id", "label"]);
-    return (jsxRuntime.jsxs("div", { className: "d-flex align-items-center gap-2 flex-column d-datepicker-time", children: [label && (jsxRuntime.jsx("p", { className: "d-datepicker-time-label", children: label })), jsxRuntime.jsx(DInput$1, Object.assign({}, onChange && {
-                onChange: (event) => onChange(event.target.value),
+    var { value, onChange, id, label, className, style } = _a, props = tslib.__rest(_a, ["value", "onChange", "id", "label", "className", "style"]);
+    return (jsxRuntime.jsxs("div", { className: classNames('d-flex align-items-center gap-2 flex-column d-datepicker-time', className), style: style, children: [label && (jsxRuntime.jsx("p", { className: "d-datepicker-time-label", children: label })), jsxRuntime.jsx(DInput$1, Object.assign({}, onChange && {
+                onChange,
             }, { type: "time", id: id, value: value }, props))] }));
 }
 
 function DDatePickerInput(_a, ref) {
-    var { value, onClick, id, iconEnd } = _a, props = tslib.__rest(_a, ["value", "onClick", "id", "iconEnd"]);
-    react.useImperativeHandle(ref, () => ({}), []);
-    return (jsxRuntime.jsx("div", { role: "button", onClick: onClick, onKeyDown: () => { }, tabIndex: -1, children: jsxRuntime.jsx(DInput$1, Object.assign({ isReadOnly: true, type: "text", id: id, value: value, onIconEndClick: onClick, iconEnd: iconEnd }, props)) }));
+    var { value, onClick, id, iconEnd, className, style } = _a, props = tslib.__rest(_a, ["value", "onClick", "id", "iconEnd", "className", "style"]);
+    React.useImperativeHandle(ref, () => ({}), []);
+    return (jsxRuntime.jsx("div", { role: "button", onClick: onClick, onKeyDown: () => { }, tabIndex: -1, children: jsxRuntime.jsx(DInput$1, Object.assign({ readOnly: true, type: "text", id: id, value: value, onIconEndClick: onClick, iconEnd: iconEnd, className: className, style: style }, props)) }));
 }
-const ForwardedDDatePickerInput = react.forwardRef(DDatePickerInput);
+const ForwardedDDatePickerInput = React.forwardRef(DDatePickerInput);
 ForwardedDDatePickerInput.displayName = 'DDatePickerInput';
-const DDatePickerInput$1 = ForwardedDDatePickerInput;
+var DDatePickerInput$1 = ForwardedDDatePickerInput;
 
 function DMonthPicker(_a) {
-    var { onChangeDate, date } = _a, props = tslib.__rest(_a, ["onChangeDate", "date"]);
-    const { language } = useLiquidContext();
-    const selected = react.useMemo(() => luxon.DateTime.fromISO(date).toJSDate(), [date]);
-    const locale = react.useMemo(() => language || 'en', [language]);
-    const dateFormatted = react.useMemo(() => (luxon.DateTime.fromISO(date).setLocale(locale).toFormat('MMMM yyyy')), [date, locale]);
-    return (jsxRuntime.jsx(DatePicker__default["default"], Object.assign({ showMonthYearPicker: true, selected: selected, calendarClassName: "d-month-picker", onChange: onChangeDate, customInput: (jsxRuntime.jsx("p", { className: "fw-bold text-capitalize", children: dateFormatted })), renderCustomHeader: ({ monthDate, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, }) => (jsxRuntime.jsxs("div", { className: "d-flex align-items-center justify-content-between gap-4 fs-6 bg-dark", children: [jsxRuntime.jsx(DButton, { iconStart: "chevron-left", size: "sm", variant: "link", theme: "light", onClick: decreaseYear, isDisabled: prevYearButtonDisabled }), jsxRuntime.jsx("p", { className: "fs-6 fw-bold", children: monthDate.getFullYear() }), jsxRuntime.jsx(DButton, { iconStart: "chevron-right", size: "sm", variant: "link", theme: "light", onClick: increaseYear, isDisabled: nextYearButtonDisabled })] })) }, props)));
-}
-
-function DDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, decreaseMonthIcon, increaseMonthIcon, iconSize, buttonVariant, buttonTheme, }) {
-    const { language } = useLiquidContext();
-    const locale = react.useMemo(() => language || 'en', [language]);
-    const onChangeDate = react.useCallback((value) => {
+    var { onChangeDate, date, locale, className } = _a, props = tslib.__rest(_a, ["onChangeDate", "date", "locale", "className"]);
+    const selected = React.useMemo(() => dateFns.parseISO(date), [date]);
+    const dateFormatted = React.useMemo(() => (dateFns.format(new Date(date), 'MMMM yyyy', { locale })), [date, locale]);
+    return (jsxRuntime.jsx(DatePicker, Object.assign({ showMonthYearPicker: true, selected: selected, calendarClassName: classNames('d-month-picker', className), onChange: onChangeDate }, locale && { locale }, { customInput: (jsxRuntime.jsx("p", { className: "fw-bold text-capitalize", children: dateFormatted })), renderCustomHeader: ({ monthDate, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, }) => (jsxRuntime.jsxs("div", { className: "d-flex align-items-center justify-content-between gap-4 fs-6 bg-dark", children: [jsxRuntime.jsx(DButton, { iconStart: "chevron-left", size: "sm", variant: "link", theme: "light", onClick: decreaseYear, isDisabled: prevYearButtonDisabled }), jsxRuntime.jsx("p", { className: "fs-6 fw-bold", children: monthDate.getFullYear() }), jsxRuntime.jsx(DButton, { iconStart: "chevron-right", size: "sm", variant: "link", theme: "light", onClick: increaseYear, isDisabled: nextYearButtonDisabled })] })) }, props)));
+}
+
+function DDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, decreaseMonthIcon, increaseMonthIcon, iconSize, buttonVariant, buttonTheme, locale, style, className, }) {
+    const onChangeDate = React.useCallback((value) => {
         if (value) {
-            changeMonth(luxon.DateTime.fromJSDate(value).month - 1);
-            changeYear(luxon.DateTime.fromJSDate(value).year);
+            changeMonth(dateFns.getMonth(value));
+            changeYear(dateFns.getYear(value));
         }
     }, [changeMonth, changeYear]);
-    return (jsxRuntime.jsxs("div", { className: "d-flex align-items-center justify-content-between d-datepicker-header", children: [jsxRuntime.jsx(DButton, { iconStart: decreaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, isDisabled: prevMonthButtonDisabled }), jsxRuntime.jsx(DMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, { date: monthDate.toISOString(), onChangeDate: onChangeDate }, locale && { locale })), jsxRuntime.jsx(DButton, { iconStart: increaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, isDisabled: nextMonthButtonDisabled })] }));
+    return (jsxRuntime.jsxs("div", { className: classNames('d-flex align-items-center justify-content-between d-datepicker-header', className), style: style, children: [jsxRuntime.jsx(DButton, { iconStart: decreaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, isDisabled: prevMonthButtonDisabled }), jsxRuntime.jsx(DMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, { date: monthDate.toISOString(), onChangeDate: onChangeDate }, locale && { locale })), jsxRuntime.jsx(DButton, { iconStart: increaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, isDisabled: nextMonthButtonDisabled })] }));
 }
 
 function DDatePicker(_a) {
-    var { onChangeDate, date, selectsRange, withMonthSelector, inputLabel, inputIcon = 'calendar', inputId = 'input-calendar', timeId = 'input-time', timeLabel, headerDecreaseMonthIcon = 'chevron-left', headerIncreaseMonthIcon = 'chevron-right', headerIconSize = 'sm', headerButtonVariant = 'link', headerButtonTheme = 'dark' } = _a, props = tslib.__rest(_a, ["onChangeDate", "date", "selectsRange", "withMonthSelector", "inputLabel", "inputIcon", "inputId", "timeId", "timeLabel", "headerDecreaseMonthIcon", "headerIncreaseMonthIcon", "headerIconSize", "headerButtonVariant", "headerButtonTheme"]);
-    const selected = react.useMemo(() => luxon.DateTime.fromISO(date).toJSDate(), [date]);
-    const { language } = useLiquidContext();
-    const locale = react.useMemo(() => language || 'en', [language]);
-    const DatePickerHeader = react.useCallback((headerProps) => (jsxRuntime.jsx(DDatePickerHeader, Object.assign({}, headerProps, { decreaseMonthIcon: headerDecreaseMonthIcon, increaseMonthIcon: headerIncreaseMonthIcon, iconSize: headerIconSize, buttonVariant: headerButtonVariant, buttonTheme: headerButtonTheme, withMonthSelector: !!withMonthSelector }))), [headerButtonTheme,
+    var { date, selectsRange = false, withMonthSelector, inputLabel, inputIcon = 'calendar', inputId = 'input-calendar', timeId = 'input-time', timeLabel, headerDecreaseMonthIcon = 'chevron-left', headerIncreaseMonthIcon = 'chevron-right', headerIconSize = 'sm', headerButtonVariant = 'link', headerButtonTheme = 'dark', locale, className, style } = _a, props = tslib.__rest(_a, ["date", "selectsRange", "withMonthSelector", "inputLabel", "inputIcon", "inputId", "timeId", "timeLabel", "headerDecreaseMonthIcon", "headerIncreaseMonthIcon", "headerIconSize", "headerButtonVariant", "headerButtonTheme", "locale", "className", "style"]);
+    const selected = React.useMemo(() => (date ? dateFns.parseISO(date) : null), [date]);
+    const DatePickerHeader = React.useCallback((headerProps) => (jsxRuntime.jsx(DDatePickerHeader, Object.assign({}, headerProps, locale && { locale }, { decreaseMonthIcon: headerDecreaseMonthIcon, increaseMonthIcon: headerIncreaseMonthIcon, iconSize: headerIconSize, buttonVariant: headerButtonVariant, buttonTheme: headerButtonTheme, withMonthSelector: !!withMonthSelector }))), [headerButtonTheme,
         headerButtonVariant,
         headerDecreaseMonthIcon,
         headerIconSize,
         headerIncreaseMonthIcon,
         withMonthSelector,
+        locale,
     ]);
-    return (jsxRuntime.jsx(DatePicker__default["default"], Object.assign({ selected: selected, calendarClassName: "m-date-picker", onChange: onChangeDate, renderCustomHeader: (headerProps) => jsxRuntime.jsx(DatePickerHeader, Object.assign({}, headerProps)), customInput: jsxRuntime.jsx(DDatePickerInput$1, { id: inputId, iconEnd: inputIcon }), customTimeInput: jsxRuntime.jsx(DDatePickerTime, { id: timeId, label: timeLabel }), selectsRange: selectsRange }, locale && { locale }, props)));
+    return (jsxRuntime.jsx(DatePicker, Object.assign({ selected: selected, calendarClassName: "d-date-picker", renderCustomHeader: (headerProps) => jsxRuntime.jsx(DatePickerHeader, Object.assign({}, headerProps)), customInput: (jsxRuntime.jsx(DDatePickerInput$1, { id: inputId, iconEnd: inputIcon, className: className, style: style })), customTimeInput: jsxRuntime.jsx(DDatePickerTime, { id: timeId, label: timeLabel }), selectsRange: selectsRange }, locale && { locale }, props)));
 }
 
-function DFormikInput(_a) {
-    var { name, hint } = _a, props = tslib.__rest(_a, ["name", "hint"]);
-    const [field, meta, helpers] = formik.useField(name);
-    return (jsxRuntime.jsx(DInput$1, Object.assign({}, props, { name: field.name, value: field.value, onChange: ({ target }) => helpers.setValue(target.value), onBlur: ({ target }) => field.onBlur(target.value), isInvalid: !!meta.error, hint: meta.error || hint })));
+function DInputCounter(_a, ref) {
+    var { minValue, maxValue, value = minValue, invalid, iconStart = 'dash-square', iconEnd = 'plus-square', style, onChange } = _a, props = tslib.__rest(_a, ["minValue", "maxValue", "value", "invalid", "iconStart", "iconEnd", "style", "onChange"]);
+    const inputRef = useProvidedRefOrCreate(ref);
+    const [internalIsInvalid, setInternalIsInvalid] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(value);
+    React.useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    React.useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(Number(internalValue));
+    }, [onChange, internalValue]);
+    const handleOnChange = React.useCallback((newValue) => {
+        setInternalValue(Number(newValue || '0'));
+    }, []);
+    const handleOnIconStartClick = React.useCallback(() => {
+        setInternalValue((prevInternalValue) => Math.max(prevInternalValue - 1, minValue));
+    }, [minValue]);
+    const handleOnIconEndClick = React.useCallback(() => {
+        setInternalValue((prevInternalValue) => Math.min(prevInternalValue + 1, maxValue));
+    }, [maxValue]);
+    const generateStyleVariables = React.useMemo(() => (Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}input-component-form-control-text-align`]: 'center' })), [style]);
+    const valueString = React.useMemo(() => (internalValue.toString()), [internalValue]);
+    React.useEffect(() => {
+        setInternalIsInvalid(!(internalValue >= minValue && internalValue <= maxValue));
+    }, [internalValue, minValue, maxValue]);
+    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: inputRef, value: valueString, style: generateStyleVariables, iconStart: iconStart, iconEnd: iconEnd, invalid: internalIsInvalid || invalid, type: "number", onChange: handleOnChange, onIconStartClick: handleOnIconStartClick, onIconEndClick: handleOnIconEndClick }, props)));
 }
+const ForwardedDInputCounter = React.forwardRef(DInputCounter);
+ForwardedDInputCounter.displayName = 'DInputCounter';
+var DInputCounter$1 = ForwardedDInputCounter;
 
-function DInputCurrencyBase(_a) {
-    var { id, name, className, label = '', placeholder = '', value, isDisabled = false, isReadOnly = false, isLoading = false, hint, isInvalid = false, isValid = false, minValue, maxValue, currencyOptions, currencyCode, onChange, onBlur, onFocus } = _a, rest = tslib.__rest(_a, ["id", "name", "className", "label", "placeholder", "value", "isDisabled", "isReadOnly", "isLoading", "hint", "isInvalid", "isValid", "minValue", "maxValue", "currencyOptions", "currencyCode", "onChange", "onBlur", "onFocus"]);
-    const [internalValueAsNumber, setInternalValueAsNumber] = react.useState(value);
-    const [internalValueAsFormat, setInternalValueAsFormat] = react.useState('');
-    const [internalType, setInternalType] = react.useState('text');
-    const [internalIsInvalid, setInternalIsInvalid] = react.useState(false);
-    const currencyInputRef = react.useRef(null);
-    const changeHandler = react.useCallback((event) => {
-        event.stopPropagation();
-        const eventValue = event.target.value;
-        const valueAsNumber = eventValue ? parseFloat(eventValue) : undefined;
-        const valueAsFormat = valueAsNumber !== undefined
-            ? currency__default["default"](valueAsNumber, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format()
-            : '';
-        setInternalValueAsNumber(valueAsNumber);
-        setInternalValueAsFormat(valueAsFormat);
-        onChange === null || onChange === void 0 ? void 0 : onChange(valueAsNumber);
-    }, [currencyOptions, onChange]);
-    const blurHandler = react.useCallback((event) => {
+function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref) {
+    const inputRef = useProvidedRefOrCreate(ref);
+    const valueFormatted = React.useMemo(() => {
+        if (value === undefined) {
+            return '';
+        }
+        return currency(value, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format();
+    }, [currencyOptions, value]);
+    const [innerValue, setInnerValue] = React.useState(valueFormatted);
+    const [innerType, setInnerType] = React.useState('text');
+    const handleOnFocus = React.useCallback((event) => {
         event.stopPropagation();
-        setInternalType('text');
-        setInternalValueAsFormat(internalValueAsNumber !== undefined
-            ? currency__default["default"](internalValueAsNumber, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format()
-            : '');
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(internalValueAsNumber);
-    }, [currencyOptions, internalValueAsNumber, onBlur]);
-    const focusHandler = react.useCallback((event) => {
+        if (inputRef.current) {
+            if (event.currentTarget.value) {
+                const currencyValue = currency(event.currentTarget.value, Object.assign(Object.assign({}, currencyOptions), { symbol: '' }));
+                setInnerValue((currencyValue.intValue / 100).toString());
+            }
+            setInnerType('number');
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [currencyOptions, inputRef, onFocus]);
+    const handleOnBlur = React.useCallback((event) => {
         event.stopPropagation();
-        setInternalType('number');
-        setInternalValueAsFormat(internalValueAsNumber !== undefined
-            ? currency__default["default"](internalValueAsNumber, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format()
-            : '');
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(internalValueAsNumber);
-    }, [currencyOptions, internalValueAsNumber, onFocus]);
-    const wheelHandler = react.useCallback((event) => {
+        if (inputRef.current) {
+            setInnerType('text');
+            if (event.currentTarget.value) {
+                setInnerValue(currency(event.currentTarget.value, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format());
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [currencyOptions, inputRef, onBlur]);
+    const handleOnWheel = React.useCallback((event) => {
         var _a;
         event.stopPropagation();
-        (_a = currencyInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-    }, []);
-    const isValidValue = react.useCallback((internalValue) => {
-        if (internalValue === undefined) {
-            return true;
-        }
-        if (internalType === 'number') {
-            return ((minValue === undefined || internalValue >= minValue)
-                && (maxValue === undefined || internalValue <= maxValue));
-        }
-        return true;
-    }, [internalType, maxValue, minValue]);
-    const valueAsType = react.useMemo(() => {
-        if (internalType === 'number') {
-            return internalValueAsNumber;
-        }
-        return internalValueAsFormat;
-    }, [internalType, internalValueAsFormat, internalValueAsNumber]);
-    react.useEffect(() => {
-        setInternalIsInvalid(!isValidValue(value));
-    }, [isValidValue, value]);
-    react.useEffect(() => {
-        setInternalValueAsNumber(value);
-    }, [value]);
-    const generateStyleVariables = react.useMemo(() => ({
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }, [inputRef]);
+    const generateStyleVariables = React.useMemo(() => ({
         [`--${PREFIX_BS}input-currency-component-symbol-color`]: `var(--${PREFIX_BS}secondary)`,
         [`--${PREFIX_BS}input-currency-symbol-color`]: `var(--${PREFIX_BS}input-currency-component-symbol-color)`,
     }), []);
-    const generateSymbolStyleVariables = react.useMemo(() => ({
+    const generateSymbolStyleVariables = React.useMemo(() => ({
         color: `var(--${PREFIX_BS}m-input-currency-symbol-color)`,
     }), []);
-    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: currencyInputRef, style: generateStyleVariables, id: id, name: name, className: className, label: label, placeholder: placeholder, value: valueAsType, isDisabled: isDisabled, isReadOnly: isReadOnly, isLoading: isLoading, hint: hint, isInvalid: isInvalid || internalIsInvalid, isValid: isValid, type: internalType, innerInputMode: "decimal", pattern: "^[0-9]", onChange: changeHandler, onBlur: blurHandler, onFocus: focusHandler, onWheel: wheelHandler, inputStart: (jsxRuntime.jsx("span", { slot: "input-start", style: generateSymbolStyleVariables, children: currencyCode || currencyOptions.symbol })) }, rest)));
+    const handleOnChange = React.useCallback((newValue) => {
+        setInnerValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue !== undefined ? Number(newValue) : undefined);
+    }, [onChange]);
+    React.useEffect(() => {
+        setInnerValue(valueFormatted);
+    }, [valueFormatted]);
+    return {
+        inputRef,
+        innerValue,
+        innerType,
+        handleOnFocus,
+        handleOnChange,
+        handleOnBlur,
+        handleOnWheel,
+        generateStyleVariables,
+        generateSymbolStyleVariables,
+    };
 }
 
-function DInputCurrency(props) {
-    const { currency } = useLiquidContext();
-    return (jsxRuntime.jsx(DInputCurrencyBase, Object.assign({ currencyOptions: currency }, props)));
+function DInputCurrencyBase(_a, ref) {
+    var { value, minValue, maxValue, currencyOptions, currencyCode, invalid, onFocus, onBlur, onChange } = _a, inputProps = tslib.__rest(_a, ["value", "minValue", "maxValue", "currencyOptions", "currencyCode", "invalid", "onFocus", "onBlur", "onChange"]);
+    const { inputRef, innerValue, innerType, handleOnFocus, handleOnChange, handleOnBlur, handleOnWheel, generateStyleVariables, generateSymbolStyleVariables, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref);
+    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, style: generateStyleVariables, inputMode: "decimal", pattern: "^[0-9]", 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';
+var DInputCurrencyBase$1 = ForwardedDInputCurrencyBase$1;
 
-function DFormikInputCurrency(_a) {
-    var { name, hint } = _a, props = tslib.__rest(_a, ["name", "hint"]);
-    const [field, meta, helpers] = formik.useField(name);
-    return (jsxRuntime.jsx(DInputCurrency, Object.assign({}, props, { name: field.name, value: field.value, onChange: (value) => helpers.setValue(value), onBlur: (value) => field.onBlur(value), isInvalid: !!meta.error, hint: (meta === null || meta === void 0 ? void 0 : meta.error) || hint })));
+function DInputCurrency(_a, ref) {
+    var { value, minValue, maxValue, currencyCode, invalid, onFocus, onBlur, onChange } = _a, props = tslib.__rest(_a, ["value", "minValue", "maxValue", "currencyCode", "invalid", "onFocus", "onBlur", "onChange"]);
+    const { currency: currencyOptions } = useDContext();
+    const { inputRef, innerValue, innerType, handleOnFocus, handleOnChange, handleOnBlur, handleOnWheel, generateStyleVariables, generateSymbolStyleVariables, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref);
+    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, style: generateStyleVariables, inputMode: "decimal", pattern: "^[0-9]", 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';
+var DInputCurrency$1 = ForwardedDInputCurrencyBase;
 
-function DInputSelect({ id, name, label = '', className, options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, isDisabled = false, isLoading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, hint, selectedOption, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
-    const internalValueExtractor = react.useCallback((option) => {
-        if (valueExtractor) {
-            return valueExtractor(option);
-        }
-        if ('value' in option) {
-            return option === null || option === void 0 ? void 0 : option.value;
-        }
-        throw new Error('Must provide a valueExtractor for custom object forms');
-    }, [valueExtractor]);
-    const internalLabelExtractor = react.useCallback((option) => {
-        if (labelExtractor) {
-            return labelExtractor(option);
-        }
-        if ('label' in option) {
-            return option === null || option === void 0 ? void 0 : option.label;
-        }
-        throw new Error('Must provide a labelExtractor for custom object forms');
-    }, [labelExtractor]);
-    const changeHandler = react.useCallback((event) => {
-        const selected = options
-            .find((option) => internalValueExtractor(option).toString() === event.currentTarget.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(selected);
-    }, [onChange, options, internalValueExtractor]);
-    const blurHandler = react.useCallback((event) => {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    }, [onBlur]);
-    const iconStartClickHandler = react.useCallback((event) => {
-        onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(event);
-    }, [onIconStartClick]);
-    const iconEndClickHandler = react.useCallback((event) => {
-        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(event);
-    }, [onIconEndClick]);
-    return (jsxRuntime.jsxs("div", { className: classNames__default["default"]('d-input', className), children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { className: "mdinput-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: "d-input-control", children: [jsxRuntime.jsxs("div", { className: classNames__default["default"]({
-                            'input-group': true,
-                            disabled: isDisabled || isLoading,
-                        }), children: [iconStart && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: iconStartClickHandler, disabled: isDisabled || isLoading, children: iconStart && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), jsxRuntime.jsx("select", Object.assign({ id: id, name: name, className: "form-select", "aria-label": label, disabled: isDisabled || isLoading, "aria-describedby": `${id}Add ${id}Hint`, onChange: changeHandler, onBlur: blurHandler }, selectedOption && { value: internalValueExtractor(selectedOption) }, { children: options.map((option) => (jsxRuntime.jsx("option", { value: internalValueExtractor(option), children: internalLabelExtractor(option) }, internalValueExtractor(option)))) })), iconEnd && !isLoading && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: iconEndClickHandler, disabled: isDisabled || isLoading, children: iconEnd && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), isLoading && (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 DInputSearch(_a, ref) {
+    var { onClick, type } = _a, props = tslib.__rest(_a, ["onClick", "type"]);
+    const inputRef = useProvidedRefOrCreate(ref);
+    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: inputRef, type: "text", iconEnd: "search", onIconEndClick: onClick }, props)));
 }
+const ForwardedDInputSearch = React.forwardRef(DInputSearch);
+ForwardedDInputSearch.displayName = 'DInputSearch';
+var DInputSearch$1 = ForwardedDInputSearch;
 
-function DFormikInputSelect(_a) {
-    var { name } = _a, props = tslib.__rest(_a, ["name"]);
-    const [field, , helpers] = formik.useField(name);
-    return (jsxRuntime.jsx(DInputSelect, Object.assign({}, props, { name: field.name, selectedOption: field.value, onChange: (selected) => helpers.setValue(selected), onBlur: (selected) => field.onBlur(selected) })));
+function DInputPassword(_a, ref) {
+    var { onIconEndClick } = _a, props = tslib.__rest(_a, ["onIconEndClick"]);
+    const inputRef = useProvidedRefOrCreate(ref);
+    const [visible, setVisible] = React.useState(false);
+    const handleOnIconEndClick = React.useCallback(() => {
+        setVisible((prevVisible) => !prevVisible);
+        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick();
+    }, [onIconEndClick]);
+    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: inputRef, iconEnd: !visible ? 'eye-slash' : 'eye', type: !visible ? 'password' : 'text', onIconEndClick: handleOnIconEndClick }, props)));
 }
+const ForwardedDInputPassword = React.forwardRef(DInputPassword);
+ForwardedDInputPassword.displayName = 'DInputPassword';
+var DInputPassword$1 = ForwardedDInputPassword;
 
-function DInputCheck({ type, name, label, isChecked = false, id, isDisabled = false, isIndeterminate, value, onChange, }) {
-    const innerRef = react.useRef(null);
-    const handleChange = react.useCallback((event) => {
+function DInputCheck({ type, name, label, isChecked = false, id, isDisabled = false, isIndeterminate, value, onChange, className, style, }) {
+    const innerRef = React.useRef(null);
+    const handleChange = React.useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (innerRef.current) {
             innerRef.current.indeterminate = Boolean(isIndeterminate);
         }
     }, [isIndeterminate]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (innerRef.current) {
             innerRef.current.checked = isChecked;
         }
     }, [isChecked]);
     if (!label) {
-        return (jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: "form-check-input", id: id, disabled: isDisabled, type: type, name: name, value: value }));
+        return (jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', className), style: style, id: id, disabled: isDisabled, type: type, name: name, value: value }));
     }
-    return (jsxRuntime.jsxs("div", { className: "form-check", children: [jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: "form-check-input", id: id, disabled: isDisabled, type: type, name: name, value: value }), jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label })] }));
+    return (jsxRuntime.jsxs("div", { className: "form-check", children: [jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', className), style: style, id: id, disabled: isDisabled, type: type, name: name, value: value }), jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label })] }));
 }
 
-function DInputCounter(_a) {
-    var { id, name, label = '', value, isDisabled = false, isReadOnly = false, isLoading = false, iconStart = 'dash-square', iconEnd = 'plus-square', hint, isInvalid = false, isValid = false, minValue, maxValue, style, className, onChange } = _a, rest = tslib.__rest(_a, ["id", "name", "label", "value", "isDisabled", "isReadOnly", "isLoading", "iconStart", "iconEnd", "hint", "isInvalid", "isValid", "minValue", "maxValue", "style", "className", "onChange"]);
-    const [internalIsInvalid, setInternalIsInvalid] = react.useState(false);
-    const [internalValue, setInternalValue] = react.useState(value);
-    react.useEffect(() => {
-        setInternalValue(value);
-    }, [value]);
-    react.useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(internalValue);
-    }, [internalValue, onChange]);
-    const changeHandler = react.useCallback((event) => {
-        event.stopPropagation();
-        const newValue = parseInt(event.target.value || '0', 10);
-        setInternalValue(newValue);
-    }, []);
-    const clickHandler = react.useCallback((action) => {
-        if (action) {
-            setInternalValue((prevInternalValue) => {
-                const newValue = prevInternalValue + 1;
-                return newValue <= maxValue ? newValue : maxValue;
-            });
-        }
-        else {
-            setInternalValue((prevInternalValue) => {
-                const newValue = prevInternalValue - 1;
-                return newValue >= minValue ? newValue : minValue;
-            });
-        }
-    }, [maxValue, minValue]);
-    const generateStyleVariables = react.useMemo(() => (Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}input-component-form-control-text-align`]: 'center' })), [style]);
-    react.useEffect(() => {
-        setInternalIsInvalid(!(internalValue >= minValue && internalValue <= maxValue));
-    }, [internalValue, minValue, maxValue]);
-    return (jsxRuntime.jsx(DInput$1, Object.assign({ id: id, style: generateStyleVariables, className: className, name: name, label: label, value: internalValue, isDisabled: isDisabled, isReadOnly: isReadOnly, isLoading: isLoading, hint: hint, iconStart: iconStart, iconEnd: iconEnd, isInvalid: internalIsInvalid || isInvalid, isValid: isValid, type: "number", onChange: changeHandler, onIconStartClick: () => clickHandler(false), onIconEndClick: () => clickHandler(true) }, rest)));
-}
-
-function DInputPassword(_a) {
-    var { id, name, label = '', placeholder = '', value = '', isDisabled = false, isReadOnly = false, isLoading = false, hint, isInvalid = false, isValid = false, onChange } = _a, rest = tslib.__rest(_a, ["id", "name", "label", "placeholder", "value", "isDisabled", "isReadOnly", "isLoading", "hint", "isInvalid", "isValid", "onChange"]);
-    const [visible, setVisible] = react.useState(false);
-    const changeHandler = react.useCallback((event) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
-    }, [onChange]);
-    const visibilityHandler = react.useCallback(() => {
-        setVisible((prevVisible) => !prevVisible);
-    }, []);
-    return (jsxRuntime.jsx(DInput$1, Object.assign({ id: id, name: name, label: label, placeholder: placeholder, value: value, iconEnd: !visible ? 'eye-slash' : 'eye', type: !visible ? 'password' : 'text', isDisabled: isDisabled, isReadOnly: isReadOnly, isLoading: isLoading, hint: hint, isInvalid: isInvalid, isValid: isValid, onChange: changeHandler, onIconEndClick: visibilityHandler }, rest)));
-}
-
-function DInputPin({ id, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, placeholder = '•', type = 'text', isDisabled = false, isLoading = false, isSecret = false, iconFamilyClass, iconFamilyPrefix, characters = 4, innerInputMode = 'text', hint, isInvalid = false, isValid = false, onChange, }) {
-    const [pattern, setPattern] = react.useState('');
-    react.useEffect(() => {
+function DInputPin({ id, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, placeholder = '•', type = 'text', isDisabled = false, isLoading = false, isSecret = false, iconFamilyClass, iconFamilyPrefix, characters = 4, innerInputMode = 'text', hint, isInvalid = false, isValid = false, className, style, onChange, }) {
+    const [pattern, setPattern] = React.useState('');
+    React.useEffect(() => {
         setPattern(type === 'number' ? '[0-9]+' : '^[a-zA-Z0-9]+$');
     }, [type]);
-    const nextInput = react.useCallback((event) => {
+    const nextInput = React.useCallback((event) => {
         var _a;
         const input = event.target;
         const regex = new RegExp(pattern);
@@ -889,7 +760,7 @@ function DInputPin({ id, label = '', labelIcon, labelIconFamilyClass, labelIconF
             }
         }
     }, [pattern]);
-    const prevInput = react.useCallback((event) => {
+    const prevInput = React.useCallback((event) => {
         var _a;
         if (event.key === 'Backspace') {
             const { value } = event.currentTarget;
@@ -902,147 +773,96 @@ function DInputPin({ id, label = '', labelIcon, labelIconFamilyClass, labelIconF
             }
         }
     }, []);
-    const focusInput = react.useCallback((event) => {
+    const focusInput = React.useCallback((event) => {
         // eslint-disable-next-line no-param-reassign
         event.currentTarget.value = '';
     }, []);
-    const wheelInput = react.useCallback((event) => {
+    const wheelInput = React.useCallback((event) => {
         event.currentTarget.blur();
     }, []);
-    const formChange = react.useCallback((event) => {
+    const formChange = React.useCallback((event) => {
         const formData = new FormData(event.currentTarget);
         const values = Array.from(formData.values()).join('');
         onChange === null || onChange === void 0 ? void 0 : onChange(values);
     }, [onChange]);
-    const preventDefaultEvent = react.useCallback((event) => {
+    const preventDefaultEvent = React.useCallback((event) => {
         event.preventDefault();
     }, []);
-    return (jsxRuntime.jsxs("div", { className: "d-input-pin", children: [label && (jsxRuntime.jsxs("label", { htmlFor: "pinIndex0", children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { className: "d-input-pin-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("form", { id: id, className: "d-input-pin-controls", onInput: formChange, onSubmit: preventDefaultEvent, children: [Array.from({ length: characters }).map((_, index) => (jsxRuntime.jsx("input", Object.assign({ className: classNames__default["default"]({
+    return (jsxRuntime.jsxs("div", { className: classNames('d-input-pin', className), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: "pinIndex0", children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { className: "d-input-pin-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("form", { id: id, className: "d-input-pin-controls", onInput: formChange, onSubmit: preventDefaultEvent, children: [Array.from({ length: characters }).map((_, index) => (jsxRuntime.jsx("input", Object.assign({ className: classNames({
                             'form-control': true,
                             'is-invalid': isInvalid,
                             'is-valid': isValid,
                         }), type: isSecret ? 'password' : type, "aria-describedby": `${id}State`, inputMode: innerInputMode, id: `pinIndex${index}`, name: `pin-${index}`, maxLength: 1, onChange: nextInput, onKeyDown: prevInput, onFocus: focusInput, onWheel: wheelInput, onClick: preventDefaultEvent, autoComplete: "off", placeholder: placeholder, disabled: isDisabled || isLoading, required: true }, type === 'number' && ({ min: 0, max: 9 })), index))), (isInvalid || isValid) && !isLoading && (jsxRuntime.jsx("span", { className: "input-group-text", id: `${id}State`, children: jsxRuntime.jsx(DIcon, { className: "d-input-pin-validation-icon", icon: isInvalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), isLoading && (jsxRuntime.jsx("div", { className: "input-group-text d-input-pin-icon", 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 DInputSearch(_a) {
-    var { id, name, label, placeholder, value, isDisabled, isReadOnly, isLoading, hint, isInvalid, isValid, onChange, onClick } = _a, rest = tslib.__rest(_a, ["id", "name", "label", "placeholder", "value", "isDisabled", "isReadOnly", "isLoading", "hint", "isInvalid", "isValid", "onChange", "onClick"]);
-    const [internalValue, setInternalValue] = react.useState(value);
-    react.useEffect(() => {
-        setInternalValue(value);
-    }, [value]);
-    const changeHandler = react.useCallback((event) => {
-        event.stopPropagation();
-        setInternalValue(event.target.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange]);
-    const clickHandler = react.useCallback(() => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(internalValue);
-    }, [internalValue, onClick]);
-    return (jsxRuntime.jsx(DInput$1, Object.assign({ id: id, name: name, label: label, placeholder: placeholder, value: internalValue, iconEnd: "search", isDisabled: isDisabled, isReadOnly: isReadOnly, isLoading: isLoading, hint: hint, isInvalid: isInvalid, isValid: isValid, onChange: changeHandler, onIconEndClick: clickHandler }, rest)));
-}
-
-function DList({ children, className, isFlush = false, isNumbered = false, isHorizontal = false, horizontalBreakpoint, }) {
-    if (isFlush && isHorizontal) {
-        throw new Error("Horizontal and Flush props don't work together");
-    }
-    return (jsxRuntime.jsx("div", { className: classNames__default["default"]('list-group', {
-            'list-group-flush': isFlush && !isHorizontal,
-            'list-group-numbered': isNumbered,
-            'list-group-horizontal': isHorizontal && !horizontalBreakpoint,
-        }, (isHorizontal && horizontalBreakpoint) && `list-group-horizontal-${horizontalBreakpoint}`, className), children: children }));
+function DInputSelect({ id, name, label = '', className, style, options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, isDisabled = false, isLoading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, hint, selectedOption, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
+    const internalValueExtractor = React.useCallback((option) => {
+        if (valueExtractor) {
+            return valueExtractor(option);
+        }
+        if ('value' in option) {
+            return option === null || option === void 0 ? void 0 : option.value;
+        }
+        throw new Error('Must provide a valueExtractor for custom object forms');
+    }, [valueExtractor]);
+    const internalLabelExtractor = React.useCallback((option) => {
+        if (labelExtractor) {
+            return labelExtractor(option);
+        }
+        if ('label' in option) {
+            return option === null || option === void 0 ? void 0 : option.label;
+        }
+        throw new Error('Must provide a labelExtractor for custom object forms');
+    }, [labelExtractor]);
+    const changeHandler = React.useCallback((event) => {
+        const selected = options
+            .find((option) => internalValueExtractor(option).toString() === event.currentTarget.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(selected);
+    }, [onChange, options, internalValueExtractor]);
+    const blurHandler = React.useCallback((event) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur]);
+    const iconStartClickHandler = React.useCallback((event) => {
+        onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(event);
+    }, [onIconStartClick]);
+    const iconEndClickHandler = React.useCallback((event) => {
+        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(event);
+    }, [onIconEndClick]);
+    return (jsxRuntime.jsxs("div", { className: classNames('d-input', className), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { className: "mdinput-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: "d-input-control", children: [jsxRuntime.jsxs("div", { className: classNames({
+                            'input-group': true,
+                            disabled: isDisabled || isLoading,
+                        }), children: [iconStart && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: iconStartClickHandler, disabled: isDisabled || isLoading, children: iconStart && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), jsxRuntime.jsx("select", Object.assign({ id: id, name: name, className: "form-select", "aria-label": label, disabled: isDisabled || isLoading, "aria-describedby": `${id}Add ${id}Hint`, onChange: changeHandler, onBlur: blurHandler }, selectedOption && { value: internalValueExtractor(selectedOption) }, { children: options.map((option) => (jsxRuntime.jsx("option", { value: internalValueExtractor(option), children: internalLabelExtractor(option) }, internalValueExtractor(option)))) })), iconEnd && !isLoading && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: iconEndClickHandler, disabled: isDisabled || isLoading, children: iconEnd && (jsxRuntime.jsx(DIcon, { className: "d-input-icon", icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), isLoading && (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 DListItem({ children, className, isActive = false, isDisabled = false, theme, onClick, }) {
-    const Tag = react.useMemo(() => (onClick ? 'button' : 'div'), [onClick]);
+function DListItem({ children, className, style, isActive = false, isDisabled = false, theme, onClick, }) {
+    const Tag = React.useMemo(() => (onClick ? 'button' : 'div'), [onClick]);
     return (jsxRuntime.jsx(Tag, Object.assign({}, Tag === 'button' && {
         onClick,
         type: 'button',
-    }, { className: classNames__default["default"]('list-group-item list-group-item-action', theme ? `list-group-item-${theme}` : undefined, className, {
+    }, { className: classNames('list-group-item list-group-item-action', theme ? `list-group-item-${theme}` : undefined, className, {
             active: isActive,
             disabled: isDisabled,
-        }) }, isActive && { 'aria-current': true }, { children: children })));
-}
-
-function useToast() {
-    const toast = react.useCallback((message, { position = 'top-right', type = 'info', showClose = true, autoClose = false, } = {}) => {
-        reactToastify.toast(({ closeToast }) => (jsxRuntime.jsx(DAlert, { type: type, showClose: showClose, onClose: closeToast, id: "alertID", children: message })), {
-            transition: reactToastify.Slide,
-            position,
-            autoClose,
-        });
-    }, []);
-    return {
-        toast,
-    };
-}
-
-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__default["default"](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,
-    };
+        }), style: style }, isActive && { 'aria-current': true }, { children: children })));
 }
 
-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 DList({ children, className, style, isFlush = false, isNumbered = false, isHorizontal = false, horizontalBreakpoint, }) {
+    if (isFlush && isHorizontal) {
+        throw new Error("Horizontal and Flush props don't work together");
+    }
+    return (jsxRuntime.jsx("div", { className: classNames('list-group', {
+            'list-group-flush': isFlush && !isHorizontal,
+            'list-group-numbered': isNumbered,
+            'list-group-horizontal': isHorizontal && !horizontalBreakpoint,
+        }, (isHorizontal && horizontalBreakpoint) && `list-group-horizontal-${horizontalBreakpoint}`, className), style: style, children: children }));
 }
+var DList$1 = Object.assign(DList, {
+    Item: DListItem,
+});
 
 function DListItemMovement(_a) {
-    var { description, date, amount, classNameMovement } = _a, props = tslib.__rest(_a, ["description", "date", "amount", "classNameMovement"]);
+    var { description, date, amount, className, style } = _a, props = tslib.__rest(_a, ["description", "date", "amount", "className", "style"]);
     const { format } = useFormatCurrency();
-    const value = react.useMemo(() => {
+    const value = React.useMemo(() => {
         const valueFormatted = format(amount);
         if (amount > 0) {
             return {
@@ -1055,11 +875,23 @@ function DListItemMovement(_a) {
             valueFormatted,
         };
     }, [format, amount]);
-    return (jsxRuntime.jsx(DListItem, Object.assign({}, props, { children: jsxRuntime.jsxs("div", { className: classNames__default["default"]('d-flex justify-content-between align-items-center p-3 gap-3', classNameMovement), children: [jsxRuntime.jsxs("div", { className: "d-flex flex-column gap-1", children: [jsxRuntime.jsx("span", { className: "fs-6", children: description }), jsxRuntime.jsx("span", { className: "small text-gray-700", children: date })] }), jsxRuntime.jsx("span", { className: classNames__default["default"]('fs-6', value.theme), children: value.valueFormatted })] }) })));
+    return (jsxRuntime.jsx(DListItem, Object.assign({}, props, { children: jsxRuntime.jsxs("div", { className: classNames('d-flex justify-content-between align-items-center p-3 gap-3', className), style: style, children: [jsxRuntime.jsxs("div", { className: "d-flex flex-column gap-1", children: [jsxRuntime.jsx("span", { className: "fs-6", children: description }), jsxRuntime.jsx("span", { className: "small text-gray-700", children: date })] }), jsxRuntime.jsx("span", { className: classNames('fs-6', value.theme), children: value.valueFormatted })] }) })));
+}
+
+function DModalHeader({ showCloseButton, onClose, children, className, style, }) {
+    return (jsxRuntime.jsxs("div", { className: classNames('modal-header', className), style: style, children: [showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-modal-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: "x-lg" }) })), children] }));
 }
 
-function DModal({ name, className = '', isStatic, isScrollable, isCentered, isFullScreen, fullScreenFrom, modalSize, children, }) {
-    const fullScreenClass = react.useMemo(() => {
+function DModalBody({ children, className, style, }) {
+    return (jsxRuntime.jsx("div", { className: classNames('d-modal-slot modal-body', className), style: style, children: children }));
+}
+
+function DModalFooter({ className, style, actionPlacement = 'fill', children, }) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "d-modal-separator" }), jsxRuntime.jsx("div", { className: classNames(`d-modal-slot modal-footer d-modal-action-${actionPlacement}`, className), style: style, children: children })] }));
+}
+
+function DModal({ name, className, style, isStatic, isScrollable, isCentered, isFullScreen, fullScreenFrom, modalSize, children, }) {
+    const fullScreenClass = React.useMemo(() => {
         if (isFullScreen) {
             if (fullScreenFrom) {
                 return `modal-fullscreen-${fullScreenFrom}-down`;
@@ -1068,33 +900,35 @@ function DModal({ name, className = '', isStatic, isScrollable, isCentered, isFu
         }
         return '';
     }, [fullScreenFrom, isFullScreen]);
-    const generateClasses = react.useMemo(() => ({
-        'modal fade show': true,
-        [`${className}`]: !!className,
-    }), [className]);
-    const generateModalDialogClasses = react.useMemo(() => (Object.assign({ 'modal-dialog': true, 'modal-dialog-centered': !!isCentered, 'modal-dialog-scrollable': !!isScrollable, [fullScreenClass]: !!isFullScreen }, modalSize && { [`modal-${modalSize}`]: true })), [fullScreenClass, isCentered, isFullScreen, isScrollable, modalSize]);
-    return (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"](generateClasses), id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false" }, isStatic && ({
+    const generateClasses = React.useMemo(() => (Object.assign({ 'modal fade show': true }, className && { [className]: true })), [className]);
+    const generateModalDialogClasses = React.useMemo(() => (Object.assign({ 'modal-dialog': true, 'modal-dialog-centered': !!isCentered, 'modal-dialog-scrollable': !!isScrollable, [fullScreenClass]: !!isFullScreen }, modalSize && { [`modal-${modalSize}`]: true })), [fullScreenClass, isCentered, isFullScreen, isScrollable, modalSize]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames(generateClasses), id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false", style: style }, isStatic && ({
         [`data-${PREFIX_BS}backdrop`]: 'static',
         [`data-${PREFIX_BS}keyboard`]: 'false',
-    }), { children: jsxRuntime.jsx("div", { className: classNames__default["default"](generateModalDialogClasses), children: jsxRuntime.jsx("div", { className: "modal-content", children: children }) }) })));
+    }), { children: jsxRuntime.jsx("div", { className: classNames(generateModalDialogClasses), children: jsxRuntime.jsx("div", { className: "modal-content", children: children }) }) })));
 }
+var DModal$1 = Object.assign(DModal, {
+    Header: DModalHeader,
+    Body: DModalBody,
+    Footer: DModalFooter,
+});
 
-function DModalBody({ children }) {
-    return (jsxRuntime.jsx("div", { className: "d-modal-slot modal-body", children: children }));
+function DOffcanvasHeader({ showCloseButton, onClose, children, className, style, }) {
+    return (jsxRuntime.jsxs("div", { className: classNames('offcanvas-header', className), style: style, children: [jsxRuntime.jsx("div", { className: "d-offcanvas-slot", children: children }), showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-offcanvas-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: "x-lg" }) }))] }));
 }
 
-function DModalFooter({ actionPlacement = 'fill', children, }) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "d-modal-separator" }), jsxRuntime.jsx("div", { className: `d-modal-slot modal-footer d-modal-action-${actionPlacement}`, children: children })] }));
+function DOffcanvasBody({ children, className, style, }) {
+    return (jsxRuntime.jsx("div", { className: classNames('d-offcanvas-slot offcanvas-body', className), style: style, children: children }));
 }
 
-function DModalHeader({ showCloseButton, onClose, children, }) {
-    return (jsxRuntime.jsxs("div", { className: "modal-header", children: [showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-modal-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: "x-lg" }) })), children] }));
+function DOffcanvasFooter({ footerActionPlacement = 'fill', children, className, style, }) {
+    return (jsxRuntime.jsx("div", { className: classNames(`d-offcanvas-slot d-offcanvas-footer d-offcanvas-action-${footerActionPlacement}`, className), style: style, children: children }));
 }
 
-function DOffcanvas({ name, className, isStatic, isScrollable, openFrom = 'end', children, }) {
-    return (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]('offcanvas show', {
+function DOffcanvas({ name, className, style, isStatic, isScrollable, openFrom = 'end', children, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames('offcanvas show', {
             [`offcanvas-${openFrom}`]: openFrom,
-        }, className), id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false" }, isStatic && ({
+        }, className), style: style, id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false" }, isStatic && ({
         [`data-${PREFIX_BS}backdrop`]: 'static',
         [`data-${PREFIX_BS}keyboard`]: 'false',
     }), isScrollable && ({
@@ -1102,146 +936,139 @@ function DOffcanvas({ name, className, isStatic, isScrollable, openFrom = 'end',
         [`data-${PREFIX_BS}keyboard`]: 'false',
     }), { children: children })));
 }
-
-function DOffcanvasBody({ children }) {
-    return (jsxRuntime.jsx("div", { className: "d-offcanvas-slot offcanvas-body", children: children }));
-}
-
-function DOffcanvasFooter({ footerActionPlacement = 'fill', children, }) {
-    return (jsxRuntime.jsx("div", { className: `d-offcanvas-slot d-offcanvas-footer d-offcanvas-action-${footerActionPlacement}`, children: children }));
-}
-
-function DOffcanvasHeader({ showCloseButton, onClose, children, }) {
-    return (jsxRuntime.jsxs("div", { className: "offcanvas-header", children: [jsxRuntime.jsx("div", { className: "d-offcanvas-slot", children: children }), showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "d-offcanvas-close", "aria-label": "Close", onClick: onClose, children: jsxRuntime.jsx(DIcon, { icon: "x-lg" }) }))] }));
-}
+var DOffcanvas$1 = Object.assign(DOffcanvas, {
+    Header: DOffcanvasHeader,
+    Body: DOffcanvasBody,
+    Footer: DOffcanvasFooter,
+});
 
 function DPaginator(_a) {
     var { className, nextLabel, previousLabel, showArrows = true, page, onPageChange } = _a, props = tslib.__rest(_a, ["className", "nextLabel", "previousLabel", "showArrows", "page", "onPageChange"]);
-    return (jsxRuntime.jsx(ResponsivePagination__default["default"], Object.assign({ extraClassName: classNames__default["default"]('pagination', className), nextClassName: classNames__default["default"]('arrow arrow-next', !nextLabel && 'no-label'), nextLabel: nextLabel, previousClassName: classNames__default["default"]('arrow arrow-prev', !previousLabel && 'no-label'), previousLabel: previousLabel, renderNav: showArrows, current: page, onPageChange: onPageChange }, props)));
+    return (jsxRuntime.jsx(ResponsivePagination, Object.assign({ extraClassName: classNames('pagination', className), nextClassName: classNames('arrow arrow-next', !nextLabel && 'no-label'), nextLabel: nextLabel, previousClassName: classNames('arrow arrow-prev', !previousLabel && 'no-label'), previousLabel: previousLabel, renderNav: showArrows, current: page, onPageChange: onPageChange }, props)));
 }
 
-function DPopover({ children, renderComponent, isOpen, setEventIsOpen, adjustContentToRender = false, }) {
-    const [innerIsOpen, setInnerIsOpen] = react.useState(false);
-    react.useEffect(() => {
+function DPopover({ children, renderComponent, isOpen, setEventIsOpen, adjustContentToRender = false, className, style, }) {
+    const [innerIsOpen, setInnerIsOpen] = React.useState(false);
+    React.useEffect(() => {
         setInnerIsOpen(isOpen);
     }, [isOpen]);
-    const onOpenChange = react.useCallback((value) => {
+    const onOpenChange = React.useCallback((value) => {
         setInnerIsOpen(value);
         if (setEventIsOpen) {
             setEventIsOpen(value);
         }
     }, [setEventIsOpen]);
-    const { refs, floatingStyles, context } = react$1.useFloating({
+    const { refs, floatingStyles, context } = react.useFloating({
         open: innerIsOpen,
         onOpenChange,
         middleware: [
-            react$1.offset(0),
-            react$1.flip({ fallbackAxisSideDirection: 'none' }),
-            react$1.shift(),
+            react.offset(0),
+            react.flip({ fallbackAxisSideDirection: 'none' }),
+            react.shift(),
         ],
-        whileElementsMounted: react$1.autoUpdate,
+        whileElementsMounted: react.autoUpdate,
     });
-    const click = react$1.useClick(context);
-    const dismiss = react$1.useDismiss(context);
-    const role = react$1.useRole(context);
-    const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
+    const click = react.useClick(context);
+    const dismiss = react.useDismiss(context);
+    const role = react.useRole(context);
+    const { getReferenceProps, getFloatingProps } = react.useInteractions([
         click,
         dismiss,
         role,
     ]);
-    const headingId = react$1.useId();
-    return (jsxRuntime.jsxs("div", { className: "d-popover", children: [jsxRuntime.jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: renderComponent(innerIsOpen) })), innerIsOpen && (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]('d-popover-content', {
+    const headingId = react.useId();
+    return (jsxRuntime.jsxs("div", { className: classNames('d-popover', className), style: style, children: [jsxRuntime.jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: renderComponent(innerIsOpen) })), innerIsOpen && (jsxRuntime.jsx(react.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", Object.assign({ className: classNames('d-popover-content', {
                         'w-100': adjustContentToRender,
                     }), ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId }, getFloatingProps(), { children: children })) }))] }));
 }
 
-function DProgress({ currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, }) {
-    const formatProgress = react.useMemo(() => `${currentValue}%`, [currentValue]);
-    const generateClasses = react.useMemo(() => ({
+function DProgress({ className, style, currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, }) {
+    const formatProgress = React.useMemo(() => `${currentValue}%`, [currentValue]);
+    const generateClasses = React.useMemo(() => ({
         'progress-bar': true,
         'progress-bar-striped progress-bar-animated': enableStripedAnimation,
     }), [enableStripedAnimation]);
-    return (jsxRuntime.jsx("div", { className: "progress", children: jsxRuntime.jsx("div", { className: classNames__default["default"](generateClasses), role: "progressbar", "aria-label": "Progress bar", style: { width: `${currentValue}%` }, "aria-valuenow": currentValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, children: !hideCurrentValue && formatProgress }) }));
+    return (jsxRuntime.jsx("div", { className: "progress", children: jsxRuntime.jsx("div", { className: classNames(generateClasses, className), role: "progressbar", "aria-label": "Progress bar", style: Object.assign({ width: `${currentValue}%` }, style), "aria-valuenow": currentValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, children: !hideCurrentValue && formatProgress }) }));
 }
 
 function DQuickActionButton({ line1, line2, className, actionLinkText, actionLinkTheme = 'secondary', actionIcon, secondaryActionIcon, actionIconFamilyClass, actionIconFamilyPrefix, representativeImage, representativeIcon, representativeIconTheme = 'secondary', representativeIconHasCircle = false, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, onClickSecondary, style, }) {
-    const globalClickHandler = react.useCallback(() => {
+    const globalClickHandler = React.useCallback(() => {
         if (actionLinkText) {
             return;
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [actionLinkText, onClick]);
-    const actionLinkClickHandler = react.useCallback(() => {
+    const actionLinkClickHandler = React.useCallback(() => {
         if (!actionLinkText) {
             return;
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [actionLinkText, onClick]);
-    const secondaryActionLinkClickHandler = react.useCallback(() => {
+    const secondaryActionLinkClickHandler = React.useCallback(() => {
         onClickSecondary === null || onClickSecondary === void 0 ? void 0 : onClickSecondary();
     }, [onClickSecondary]);
-    const Tag = react.useMemo(() => (actionLinkText ? 'div' : 'button'), [actionLinkText]);
-    return (jsxRuntime.jsxs(Tag, { className: classNames__default["default"]('d-quick-action-button', className), onClick: !actionLinkText ? globalClickHandler : undefined, style: style, children: [representativeIcon && (jsxRuntime.jsx(DIcon, { className: "d-quick-action-button-representative-icon", size: representativeIconHasCircle
+    const Tag = React.useMemo(() => (actionLinkText ? 'div' : 'button'), [actionLinkText]);
+    return (jsxRuntime.jsxs(Tag, { className: classNames('d-quick-action-button', className), onClick: !actionLinkText ? globalClickHandler : undefined, style: style, 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 })] }) }), secondaryActionIcon && (jsxRuntime.jsx(DButton, { className: "d-quick-action-button-secondary-action-link", type: "button", variant: "link", iconStart: secondaryActionIcon, iconStartFamilyClass: actionIconFamilyClass, iconStartFamilyPrefix: actionIconFamilyPrefix, theme: actionLinkTheme, onClick: secondaryActionLinkClickHandler, isStopPropagationEnabled: true })), actionLinkText && !actionIcon && (jsxRuntime.jsx(DButton, { className: "d-quick-action-button-action-link", type: "button", variant: "link", theme: actionLinkTheme, text: actionLinkText, onClick: actionLinkClickHandler, isStopPropagationEnabled: true })), actionIcon && !actionLinkText && (jsxRuntime.jsx(DIcon, { className: "d-quick-action-button-action-icon", icon: actionIcon, size: `var(--${PREFIX_BS}quick-action-button-action-icon-size)`, familyClass: actionIconFamilyClass, familyPrefix: actionIconFamilyPrefix }))] }));
 }
 
-function DQuickActionCheck({ id, name, value, line1, line2, line3, className, isChecked, onChange, }) {
-    const changeHandler = react.useCallback((event) => {
+function DQuickActionCheck({ id, name, value, line1, line2, line3, className, style, isChecked, onChange, }) {
+    const changeHandler = React.useCallback((event) => {
         event.stopPropagation();
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    return (jsxRuntime.jsxs("label", { className: classNames__default["default"]('d-quick-action-check', className), htmlFor: id, children: [jsxRuntime.jsx(DInputCheck, { id: id, type: "radio", name: name, value: value, isChecked: isChecked, 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 })] }));
+    return (jsxRuntime.jsxs("label", { className: classNames('d-quick-action-check', className), htmlFor: id, style: style, children: [jsxRuntime.jsx(DInputCheck, { id: id, type: "radio", name: name, value: value, isChecked: isChecked, 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, name, value, line1, line2, className, isSelected = false, onChange, }) {
-    const innerRef = react.useRef(null);
-    const changeHandler = react.useCallback((event) => {
+function DQuickActionSelect({ id, name, value, line1, line2, className, style, isSelected = false, onChange, }) {
+    const innerRef = React.useRef(null);
+    const changeHandler = React.useCallback((event) => {
         event.stopPropagation();
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (innerRef.current) {
             innerRef.current.checked = isSelected;
         }
     }, [isSelected]);
-    return (jsxRuntime.jsxs("label", { className: classNames__default["default"]('d-quick-action-select', className), htmlFor: id, 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 })] }));
+    return (jsxRuntime.jsxs("label", { className: classNames('d-quick-action-select', className), htmlFor: id, style: style, 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 })] }));
 }
 
-function DQuickActionSwitch({ id, name, label, hint, className, isChecked, isDisabled, onClick, }) {
-    const clickHandler = react.useCallback((event) => {
+function DQuickActionSwitch({ id, name, label, hint, isChecked, isDisabled, className, style, onClick, }) {
+    const clickHandler = React.useCallback((event) => {
         event.stopPropagation();
         onClick === null || onClick === void 0 ? void 0 : onClick(isChecked);
     }, [isChecked, onClick]);
-    return (jsxRuntime.jsxs("button", { className: classNames__default["default"]('d-quick-action-switch', className), type: "button", onClick: clickHandler, children: [jsxRuntime.jsxs("div", { className: "d-quick-action-switch-content", children: [jsxRuntime.jsx(DInputSwitch, { id: id, name: name, isDisabled: isDisabled, isChecked: isChecked, isReadonly: true }), jsxRuntime.jsx("label", { className: "d-quick-action-switch-label", htmlFor: id, children: label })] }), jsxRuntime.jsx("div", { className: "d-quick-action-switch-hint", children: hint })] }));
+    return (jsxRuntime.jsxs("button", { className: classNames('d-quick-action-switch', className), type: "button", onClick: clickHandler, style: style, children: [jsxRuntime.jsxs("div", { className: "d-quick-action-switch-content", children: [jsxRuntime.jsx(DInputSwitch, { id: id, name: name, isDisabled: isDisabled, isChecked: isChecked, isReadonly: true }), jsxRuntime.jsx("label", { className: "d-quick-action-switch-label", htmlFor: id, children: label })] }), jsxRuntime.jsx("div", { className: "d-quick-action-switch-hint", children: hint })] }));
 }
 
 function DSkeleton({ speed = 2, viewBox, backgroundColor, foregroundColor, children, }) {
-    const innerBackgroundColor = react.useMemo(() => {
+    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(() => {
+    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__default["default"], { speed: speed, viewBox: viewBox, backgroundColor: innerBackgroundColor, foregroundColor: innerForegroundColor, children: children }));
+    return (jsxRuntime.jsx(ContentLoader, { speed: speed, viewBox: viewBox, backgroundColor: innerBackgroundColor, foregroundColor: innerForegroundColor, children: children }));
 }
 
-function DStepper$2({ options, currentStep, successIcon = 'check', isVertical = false, }) {
+function DStepper$2({ options, currentStep, successIcon = 'check', isVertical = false, className, style, }) {
     if (currentStep < 1 || currentStep > options.length) {
         throw new Error('Current step should be in the range from 1 to options length');
     }
-    return (jsxRuntime.jsx("div", { className: classNames__default["default"]({
+    return (jsxRuntime.jsx("div", { className: classNames({
             'd-stepper-desktop': true,
             'is-vertical': isVertical,
-        }), children: options.map(({ label, value }) => (jsxRuntime.jsxs("div", { className: "d-step", children: [jsxRuntime.jsx("div", { className: "d-step-value", children: jsxRuntime.jsx("div", { className: classNames__default["default"]({
+        }, className), style: style, children: options.map(({ label, value }) => (jsxRuntime.jsxs("div", { className: "d-step", children: [jsxRuntime.jsx("div", { className: "d-step-value", children: jsxRuntime.jsx("div", { className: classNames({
                             'd-step-icon-container': true,
                             'd-step-check': value < currentStep,
                             'd-step-current': value === currentStep,
@@ -1250,13 +1077,13 @@ function DStepper$2({ options, currentStep, successIcon = 'check', isVertical =
                             : value }) }), jsxRuntime.jsx("div", { className: "d-step-label", children: label })] }, value))) }));
 }
 
-function DStepper$1({ options, currentStep, }) {
+function DStepper$1({ options, currentStep, className, style, }) {
     if (currentStep < 1 || currentStep > options.length) {
         throw new Error('Current step should be in the range from 1 to options length');
     }
-    const currentOption = react.useMemo(() => { var _a; return (_a = options[currentStep - 1]) !== null && _a !== void 0 ? _a : {}; }, [currentStep, options]);
-    const [currentAngle, setCurrentAngle] = react.useState(0);
-    react.useEffect(() => {
+    const currentOption = React.useMemo(() => { var _a; return (_a = options[currentStep - 1]) !== null && _a !== void 0 ? _a : {}; }, [currentStep, options]);
+    const [currentAngle, setCurrentAngle] = React.useState(0);
+    React.useEffect(() => {
         const targetAngle = (currentStep / options.length) * 360;
         const animationInterval = setInterval(() => {
             const angleDifference = targetAngle - currentAngle;
@@ -1273,54 +1100,15 @@ function DStepper$1({ options, currentStep, }) {
             clearInterval(animationInterval);
         };
     }, [currentAngle, currentStep, options.length]);
-    const progressStyle = react.useMemo(() => `conic-gradient(
+    const progressStyle = React.useMemo(() => `conic-gradient(
       from 180deg,
       var(--${PREFIX_BS}step-progress-outter-fill-background-color) ${currentAngle}deg,
       var(--${PREFIX_BS}step-progress-outter-background-color) 0deg)`, [currentAngle]);
-    return (jsxRuntime.jsxs("div", { className: "d-stepper", children: [jsxRuntime.jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsxRuntime.jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsxRuntime.jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "d-step-label", children: currentOption.label }), jsxRuntime.jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
+    return (jsxRuntime.jsxs("div", { className: classNames('d-stepper', className), style: style, children: [jsxRuntime.jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsxRuntime.jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsxRuntime.jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "d-step-label", children: currentOption.label }), jsxRuntime.jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
 }
 
-function DStepper({ options, currentStep, successIcon = 'check', isVertical = false, breakpoint = 'lg', }) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `d-block d-${breakpoint}-none`, children: jsxRuntime.jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsxRuntime.jsx("div", { className: `d-none d-${breakpoint}-block`, children: jsxRuntime.jsx(DStepper$2, { options: options, currentStep: currentStep, successIcon: successIcon, isVertical: isVertical }) })] }));
-}
-
-const TabContext = react.createContext(undefined);
-function DTabs({ children, defaultSelected, onChange, options, className, isVertical, }) {
-    const [selected, setSelected] = react.useState(defaultSelected);
-    const onSelect = react.useCallback((option) => {
-        if (option.tab) {
-            setSelected(option.tab);
-        }
-        onChange(option);
-    }, [onChange]);
-    react.useEffect(() => {
-        setSelected(defaultSelected);
-    }, [defaultSelected]);
-    const isSelected = react.useCallback((tab) => (selected === tab), [selected]);
-    const value = react.useMemo(() => ({
-        isSelected,
-    }), [isSelected]);
-    return (jsxRuntime.jsx(TabContext.Provider, { value: value, children: jsxRuntime.jsxs("div", { className: classNames__default["default"]({
-                'd-tabs': true,
-                'd-tabs-vertical': isVertical,
-            }), children: [jsxRuntime.jsx("nav", { className: "nav", children: options.map((option) => (jsxRuntime.jsx("button", { id: `${option.tab}Tab`, className: classNames__default["default"]('nav-link', {
-                            active: option.tab === selected,
-                        }, className), type: "button", role: "tab", "aria-controls": `${option.tab}Pane`, "aria-selected": option.tab === selected, disabled: option.isDisabled, onClick: () => onSelect(option), children: option.label }, option.label))) }), jsxRuntime.jsx("div", { className: "tab-content", children: children })] }) }));
-}
-function useTabContext() {
-    const context = react.useContext(TabContext);
-    if (context === undefined) {
-        throw new Error('useTabContext was used outside of MTab');
-    }
-    return context;
-}
-
-function DTabContent({ tab, children }) {
-    const { isSelected } = useTabContext();
-    if (!isSelected(tab)) {
-        return null;
-    }
-    return (jsxRuntime.jsx("div", { className: "tab-pane fade show active", id: `${tab}Pane`, role: "tabpanel", tabIndex: 0, "aria-labelledby": `${tab}Tab`, children: children }));
+function DStepper({ options, currentStep, successIcon = 'check', isVertical = false, breakpoint = 'lg', className, style, }) {
+    return (jsxRuntime.jsxs("div", { className: className, style: style, children: [jsxRuntime.jsx("div", { className: `d-block d-${breakpoint}-none`, children: jsxRuntime.jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsxRuntime.jsx("div", { className: `d-none d-${breakpoint}-block`, children: jsxRuntime.jsx(DStepper$2, { options: options, currentStep: currentStep, successIcon: successIcon, isVertical: isVertical }) })] }));
 }
 
 const TOOLTIP_FONT_SIZE_BY_SIZE = {
@@ -1331,97 +1119,159 @@ const TOOLTIP_FONT_SIZE_BY_SIZE = {
 const ARROW_WIDTH = 8;
 const ARROW_HEIGHT = 4;
 const GAP = 2;
-function DTooltip({ classNameContainer, className, offSet = ARROW_HEIGHT + GAP, padding, withFocus = false, withClick = false, withHover = true, isOpen = false, placement = 'top', size, Component, children, }) {
-    const [open, setOpen] = react.useState(isOpen);
-    const styleVariables = react.useMemo(() => {
+function DTooltip({ classNameContainer, className, style, offSet = ARROW_HEIGHT + GAP, padding, withFocus = false, withClick = false, withHover = true, isOpen = false, placement = 'top', size, Component, children, }) {
+    const [open, setOpen] = React.useState(isOpen);
+    const styleVariables = React.useMemo(() => {
         const defaultFontSize = size
             ? TOOLTIP_FONT_SIZE_BY_SIZE[size]
             : TOOLTIP_FONT_SIZE_BY_SIZE.default;
-        return {
-            background: `var(--${PREFIX_BS}tooltip-bg, var(--${PREFIX_BS}tooltip-component-bg, var(--${PREFIX_BS}secondary)))`,
-            borderRadius: `var(--${PREFIX_BS}tooltip-border-radius, var(--${PREFIX_BS}tooltip-component-border-radius, var(--${PREFIX_BS}border-radius)))`,
-            color: `var(--${PREFIX_BS}tooltip-color, var(--${PREFIX_BS}tooltip-component-color, var(--${PREFIX_BS}white)))`,
-            fontSize: `var(--${PREFIX_BS}tooltip-font-size, var(--${PREFIX_BS}tooltip-component-font-size, ${defaultFontSize}))`,
-            padding: `var(--${PREFIX_BS}tooltip-padding, var(--${PREFIX_BS}tooltip-component-padding, var(--${PREFIX_BS}ref-spacer-2)))`,
-            maxWidth: `var(--${PREFIX_BS}tooltip-max-width, var(--${PREFIX_BS}tooltip-component-max-width, 300px))`,
-        };
-    }, [size]);
-    const arrowRef = react.useRef(null);
-    const { refs, context, floatingStyles, } = react$1.useFloating({
+        return Object.assign(Object.assign({}, style), { background: `var(--${PREFIX_BS}tooltip-bg, var(--${PREFIX_BS}tooltip-component-bg, var(--${PREFIX_BS}secondary)))`, borderRadius: `var(--${PREFIX_BS}tooltip-border-radius, var(--${PREFIX_BS}tooltip-component-border-radius, var(--${PREFIX_BS}border-radius)))`, color: `var(--${PREFIX_BS}tooltip-color, var(--${PREFIX_BS}tooltip-component-color, var(--${PREFIX_BS}white)))`, fontSize: `var(--${PREFIX_BS}tooltip-font-size, var(--${PREFIX_BS}tooltip-component-font-size, ${defaultFontSize}))`, padding: `var(--${PREFIX_BS}tooltip-padding, var(--${PREFIX_BS}tooltip-component-padding, var(--${PREFIX_BS}ref-spacer-2)))`, maxWidth: `var(--${PREFIX_BS}tooltip-max-width, var(--${PREFIX_BS}tooltip-component-max-width, 300px))` });
+    }, [size, style]);
+    const arrowRef = React.useRef(null);
+    const { refs, context, floatingStyles, } = react.useFloating({
         open,
         onOpenChange: setOpen,
         placement,
-        whileElementsMounted: react$1.autoUpdate,
+        whileElementsMounted: react.autoUpdate,
         middleware: [
-            react$1.offset(offSet),
-            react$1.flip(),
-            react$1.shift({
+            react.offset(offSet),
+            react.flip(),
+            react.shift({
                 padding,
             }),
-            react$1.arrow({
+            react.arrow({
                 element: arrowRef,
             }),
         ],
     });
-    const hover = react$1.useHover(context, { move: false });
-    const focus = react$1.useFocus(context);
-    const dismiss = react$1.useDismiss(context);
-    const click = react$1.useClick(context);
-    const role = react$1.useRole(context, { role: 'tooltip' });
-    const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
+    const hover = react.useHover(context, { move: false });
+    const focus = react.useFocus(context);
+    const dismiss = react.useDismiss(context);
+    const click = react.useClick(context);
+    const role = react.useRole(context, { role: 'tooltip' });
+    const { getReferenceProps, getFloatingProps } = react.useInteractions([
         withHover ? hover : undefined,
         withClick ? click : undefined,
         withFocus ? focus : undefined,
         dismiss,
         role,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: className, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsxRuntime.jsx(react$1.FloatingPortal, { children: open && (jsxRuntime.jsxs("div", Object.assign({ className: classNameContainer, ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), styleVariables) }, getFloatingProps(), { children: [jsxRuntime.jsx(react$1.FloatingArrow, { ref: arrowRef, context: context, style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: className, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsxRuntime.jsx(react.FloatingPortal, { children: open && (jsxRuntime.jsxs("div", Object.assign({ className: classNameContainer, ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), styleVariables) }, getFloatingProps(), { children: [jsxRuntime.jsx(react.FloatingArrow, { ref: arrowRef, context: context, style: {
                                 fill: styleVariables.background,
                             }, width: ARROW_WIDTH, height: ARROW_HEIGHT }), children] }))) })] }));
 }
 
-function DToastContainer({ style, position = 'top-right', }) {
-    return (jsxRuntime.jsx(reactToastify.ToastContainer, { toastClassName: () => 'shadow-none p-0 cursor-default', position: position, autoClose: false, hideProgressBar: true, closeOnClick: false, closeButton: false, transition: reactToastify.Slide, style: style }));
+const TabContext = React.createContext(undefined);
+function useTabContext() {
+    const context = React.useContext(TabContext);
+    if (context === undefined) {
+        throw new Error('useTabContext was used outside of MTab');
+    }
+    return context;
+}
+
+function DTabContent({ tab, children, className, style, }) {
+    const { isSelected } = useTabContext();
+    if (!isSelected(tab)) {
+        return null;
+    }
+    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, style, isVertical, }) {
+    const [selected, setSelected] = React.useState(defaultSelected);
+    const onSelect = React.useCallback((option) => {
+        if (option.tab) {
+            setSelected(option.tab);
+        }
+        onChange(option);
+    }, [onChange]);
+    React.useEffect(() => {
+        setSelected(defaultSelected);
+    }, [defaultSelected]);
+    const isSelected = React.useCallback((tab) => (selected === tab), [selected]);
+    const value = React.useMemo(() => ({
+        isSelected,
+    }), [isSelected]);
+    return (jsxRuntime.jsx(TabContext.Provider, { value: value, children: jsxRuntime.jsxs("div", { className: classNames({
+                'd-tabs': true,
+                'd-tabs-vertical': isVertical,
+            }, className), style: style, children: [jsxRuntime.jsx("nav", { className: "nav", children: options.map((option) => (jsxRuntime.jsx("button", { id: `${option.tab}Tab`, className: classNames('nav-link', {
+                            active: option.tab === selected,
+                        }, className), type: "button", role: "tab", "aria-controls": `${option.tab}Pane`, "aria-selected": option.tab === selected, disabled: option.isDisabled, onClick: () => onSelect(option), children: option.label }, option.label))) }), jsxRuntime.jsx("div", { className: "tab-content", children: children })] }) }));
+}
+var DTabs$1 = Object.assign(DTabs, {
+    Tab: DTabContent,
+});
+
+function DToastContainer({ style, position = 'top-right', className, }) {
+    return (jsxRuntime.jsx(reactToastify.ToastContainer, { toastClassName: () => classNames('shadow-none p-0 cursor-default', className), position: position, autoClose: false, hideProgressBar: true, closeOnClick: false, closeButton: false, transition: reactToastify.Slide, style: style }));
+}
+
+function useToast() {
+    const toast = React.useCallback((message, { position = 'top-right', type = 'info', showClose = true, autoClose = false, } = {}) => {
+        reactToastify.toast(({ closeToast }) => (jsxRuntime.jsx(DAlert, { type: type, showClose: showClose, onClose: closeToast, id: "alertID", children: message })), {
+            transition: reactToastify.Slide,
+            position,
+            autoClose,
+        });
+    }, []);
+    return {
+        toast,
+    };
+}
+
+async function configureI8n(resources, _a = {}) {
+    var { lng = 'en', fallbackLng = 'en' } = _a, config = tslib.__rest(_a, ["lng", "fallbackLng"]);
+    return i18n
+        .use(reactI18next.initReactI18next)
+        .init(Object.assign({ resources,
+        lng, initImmediate: true, fallbackLng, interpolation: {
+            escapeValue: false,
+            prefix: '{',
+            suffix: '}',
+            // skipOnVariables: false,
+        } }, config))
+        .then((t) => t);
 }
 
 exports.DAlert = DAlert;
 exports.DBadge = DBadge;
 exports.DBoxFile = DBoxFile;
 exports.DButton = DButton;
-exports.DCard = DCard;
+exports.DCard = DCard$1;
 exports.DCardAccount = DCardAccount;
 exports.DCardBody = DCardBody;
 exports.DCardFooter = DCardFooter;
 exports.DCardHeader = DCardHeader;
-exports.DCarousel = DCarousel;
+exports.DCarousel = DCarousel$1;
 exports.DCarouselSlide = DCarouselSlide;
 exports.DChip = DChip;
 exports.DCollapse = DCollapse;
 exports.DCollapseIconText = DCollapseIconText;
+exports.DContext = DContext;
+exports.DContextProvider = DContextProvider;
 exports.DCurrencyText = DCurrencyText;
 exports.DDatePicker = DDatePicker;
-exports.DFormikInput = DFormikInput;
-exports.DFormikInputCurrency = DFormikInputCurrency;
-exports.DFormikInputSelect = DFormikInputSelect;
 exports.DIcon = DIcon;
 exports.DInput = DInput$1;
 exports.DInputCheck = DInputCheck;
-exports.DInputCounter = DInputCounter;
-exports.DInputCurrency = DInputCurrency;
-exports.DInputCurrencyBase = DInputCurrencyBase;
-exports.DInputPassword = DInputPassword;
+exports.DInputCounter = DInputCounter$1;
+exports.DInputCurrency = DInputCurrency$1;
+exports.DInputCurrencyBase = DInputCurrencyBase$1;
+exports.DInputPassword = DInputPassword$1;
 exports.DInputPin = DInputPin;
-exports.DInputSearch = DInputSearch;
+exports.DInputSearch = DInputSearch$1;
 exports.DInputSelect = DInputSelect;
 exports.DInputSwitch = DInputSwitch;
-exports.DList = DList;
+exports.DList = DList$1;
 exports.DListItem = DListItem;
 exports.DListItemMovement = DListItemMovement;
-exports.DModal = DModal;
+exports.DModal = DModal$1;
 exports.DModalBody = DModalBody;
 exports.DModalFooter = DModalFooter;
 exports.DModalHeader = DModalHeader;
-exports.DOffcanvas = DOffcanvas;
+exports.DOffcanvas = DOffcanvas$1;
 exports.DOffcanvasBody = DOffcanvasBody;
 exports.DOffcanvasFooter = DOffcanvasFooter;
 exports.DOffcanvasHeader = DOffcanvasHeader;
@@ -1440,25 +1290,22 @@ exports.DStepperDesktop = DStepper$2;
 exports.DStepperMobile = DStepper$1;
 exports.DSummaryCard = DSummaryCard;
 exports.DTabContent = DTabContent;
-exports.DTabs = DTabs;
+exports.DTabs = DTabs$1;
 exports.DToastContainer = DToastContainer;
 exports.DTooltip = DTooltip;
-exports.LiquidContext = LiquidContext$1;
-exports.LiquidContextProvider = LiquidContextProvider;
 exports.ModalContext = ModalContext;
 exports.ModalContextProvider = ModalContextProvider;
 exports.OffcanvasContext = OffcanvasContext;
 exports.OffcanvasContextProvider = OffcanvasContextProvider;
 exports.configureI18n = configureI8n;
 exports.formatCurrency = formatCurrency;
-exports.liquidParser = liquidParser;
+exports.useDContext = useDContext;
 exports.useFormatCurrency = useFormatCurrency;
-exports.useLiquidContext = useLiquidContext;
+exports.useInputCurrency = useInputCurrency;
 exports.useModalContext = useModalContext;
 exports.useOffcanvasContext = useOffcanvasContext;
-exports.useScreenshot = useScreenshot;
-exports.useScreenshotDownload = useScreenshotDownload;
-exports.useScreenshotWebShare = useScreenshotWebShare;
+exports.useProvidedRefOrCreate = useProvidedRefOrCreate;
+exports.useStackState = useStackState;
 exports.useTabContext = useTabContext;
 exports.useToast = useToast;
 //# sourceMappingURL=index.js.map