@dynamic-framework/ui-react 1.6.0 → 1.7.0

package/dist/index.esm.js

@@ -1,284 +1,303 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ToastContainer, Slide, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { useMemo, useState, useEffect, useCallback, createContext, useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
 import { __rest } from 'tslib';
+import { useDropzone } from 'react-dropzone';
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+import currency from 'currency.js';
 import DatePicker from 'react-datepicker';
 import { DateTime } from 'luxon';
-import React, { createElement, createContext, useMemo, useContext, useState, useCallback, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
-import { defineCustomElement } from '@dynamic-framework/ui/components/d-alert.js';
-import { defineCustomElement as defineCustomElement$1 } from '@dynamic-framework/ui/components/d-badge.js';
-import { defineCustomElement as defineCustomElement$2 } from '@dynamic-framework/ui/components/d-button.js';
-import { defineCustomElement as defineCustomElement$3 } from '@dynamic-framework/ui/components/d-chip.js';
-import { defineCustomElement as defineCustomElement$4 } from '@dynamic-framework/ui/components/d-icon.js';
-import { defineCustomElement as defineCustomElement$5 } from '@dynamic-framework/ui/components/d-input.js';
-import { defineCustomElement as defineCustomElement$6 } from '@dynamic-framework/ui/components/d-input-check.js';
-import { defineCustomElement as defineCustomElement$7 } from '@dynamic-framework/ui/components/d-input-counter.js';
-import { defineCustomElement as defineCustomElement$8 } from '@dynamic-framework/ui/components/d-input-currency-base.js';
-import { defineCustomElement as defineCustomElement$9 } from '@dynamic-framework/ui/components/d-input-password.js';
-import { defineCustomElement as defineCustomElement$a } from '@dynamic-framework/ui/components/d-input-pin.js';
-import { defineCustomElement as defineCustomElement$b } from '@dynamic-framework/ui/components/d-input-search.js';
-import { defineCustomElement as defineCustomElement$c } from '@dynamic-framework/ui/components/d-input-select.js';
-import { defineCustomElement as defineCustomElement$d } from '@dynamic-framework/ui/components/d-input-switch.js';
-import { defineCustomElement as defineCustomElement$e } from '@dynamic-framework/ui/components/d-modal.js';
-import { defineCustomElement as defineCustomElement$f } from '@dynamic-framework/ui/components/d-offcanvas.js';
-import { defineCustomElement as defineCustomElement$g } from '@dynamic-framework/ui/components/d-progress.js';
-import { defineCustomElement as defineCustomElement$h } from '@dynamic-framework/ui/components/d-quick-action-button.js';
-import { defineCustomElement as defineCustomElement$i } from '@dynamic-framework/ui/components/d-quick-action-check.js';
-import { defineCustomElement as defineCustomElement$j } from '@dynamic-framework/ui/components/d-quick-action-select.js';
-import { defineCustomElement as defineCustomElement$k } from '@dynamic-framework/ui/components/d-quick-action-switch.js';
-import { liquidParser, PREFIX_BS, formatCurrency } from '@dynamic-framework/ui';
-export { liquidParser } from '@dynamic-framework/ui';
-import ContentLoader from 'react-content-loader';
-import classNames from 'classnames';
-import { useFloating, offset, flip, shift, autoUpdate, useClick, useDismiss, useRole, useInteractions, useId, FloatingFocusManager, arrow, useHover, useFocus, FloatingPortal, FloatingArrow } from '@floating-ui/react';
 import { useField } from 'formik';
-import { useDropzone } from 'react-dropzone';
-import { Splide, SplideSlide } from '@splidejs/react-splide';
 import ResponsivePagination from 'react-responsive-pagination';
+import { useFloating, offset, flip, shift, autoUpdate, useClick, useDismiss, useRole, useInteractions, useId, FloatingFocusManager, arrow, useHover, useFocus, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import ContentLoader from 'react-content-loader';
+import { toast, Slide, ToastContainer } from 'react-toastify';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import html2canvas from 'html2canvas';
 import { createPortal } from 'react-dom';
 
-const dashToPascalCase = (str) => str
-    .toLowerCase()
-    .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
-const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
-
-const attachProps = (node, newProps, oldProps = {}) => {
-    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
-    if (node instanceof Element) {
-        // add any classes in className to the class list
-        const className = getClassName(node.classList, newProps, oldProps);
-        if (className !== '') {
-            node.className = className;
-        }
-        Object.keys(newProps).forEach((name) => {
-            if (name === 'children' ||
-                name === 'style' ||
-                name === 'ref' ||
-                name === 'class' ||
-                name === 'className' ||
-                name === 'forwardedRef') {
-                return;
-            }
-            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                const eventName = name.substring(2);
-                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (!isCoveredByReact(eventNameLc)) {
-                    syncEvent(node, eventNameLc, newProps[name]);
-                }
-            }
-            else {
-                node[name] = newProps[name];
-                const propType = typeof newProps[name];
-                if (propType === 'string') {
-                    node.setAttribute(camelToDashCase(name), newProps[name]);
-                }
-            }
-        });
-    }
+function DBadge({ text, isDot = false, theme = 'primary', id, className, style, }) {
+    const generateClasses = useMemo(() => ({
+        badge: true,
+        'badge-dot': isDot,
+        [`badge-${theme}`]: !!theme,
+    }), [isDot, theme]);
+    return (jsx("span", Object.assign({ className: classNames(generateClasses, className), style: style }, id && { id }, { children: jsx("span", { children: text }) })));
+}
+
+function DInputSwitch({ label, id, name, isChecked, isDisabled, isReadonly, onChange, }) {
+    const [internalIsChecked, setInternalIsChecked] = useState(isChecked);
+    useEffect(() => {
+        setInternalIsChecked(isChecked);
+    }, [isChecked]);
+    const changeHandler = useCallback((event) => {
+        const value = event.currentTarget.checked;
+        setInternalIsChecked(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, [onChange]);
+    return (jsxs("div", { className: "form-check form-switch", children: [jsx("input", { id: id, name: name, onChange: isReadonly ? () => false : changeHandler, className: "form-check-input", type: "checkbox", role: "switch", checked: internalIsChecked, disabled: isDisabled }), label && (jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] }));
+}
+
+function DPermissionItem({ permission, permissionState, onChange, onAction = () => { }, }) {
+    return (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: () => { }, className: "d-flex permission-item align-items-center", onClick: onAction, children: [jsx("span", { className: "flex-grow-1 label", children: permission.label }), permission.type === 'custom' && (jsx(DBadge, { theme: "tertiary", text: permissionState })), jsx(DInputSwitch, { id: permission.id, isChecked: !!permission.value, isDisabled: !permission.enabled, onChange: (isChecked) => onChange(isChecked) })] }));
+}
+
+function DPermissionGroup({ title, description, permissionState, permissionList, onChangePermission, onCustomAction = () => { }, }) {
+    return (jsxs("div", { className: "row operation-group g-0 mb-3 mb-lg-0", children: [jsxs("div", { className: "col-12 col-lg-4 d-flex flex-column justify-content-center", children: [jsx("h6", { className: "fw-bold mb-3 mb-lg-2", children: title }), jsx("p", { className: "fs-8 d-none d-lg-block m-0", children: description })] }), jsx("div", { className: "col-12 offset-lg-1 col-lg-7", children: permissionList.map((permission) => (jsx(DPermissionItem, { permission: permission, permissionState: permissionState, onChange: (isChecked) => onChangePermission(permission, isChecked), onAction: () => onCustomAction(permission) }, permission.id))) })] }));
+}
+
+const PREFIX_BS = 'bs-';
+const ALERT_TYPE_ICON = {
+    warning: 'exclamation-circle',
+    danger: 'exclamation-triangle',
+    success: 'check-circle',
+    info: 'info-circle',
+    light: 'info-circle',
+    dark: 'info-circle',
 };
-const getClassName = (classList, newProps, oldProps) => {
-    const newClassProp = newProps.className || newProps.class;
-    const oldClassProp = oldProps.className || oldProps.class;
-    // map the classes to Maps for performance
-    const currentClasses = arrayToMap(classList);
-    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
-    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
-    const finalClassNames = [];
-    // loop through each of the current classes on the component
-    // to see if it should be a part of the classNames added
-    currentClasses.forEach((currentClass) => {
-        if (incomingPropClasses.has(currentClass)) {
-            // add it as its already included in classnames coming in from newProps
-            finalClassNames.push(currentClass);
-            incomingPropClasses.delete(currentClass);
+
+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 = useMemo(() => {
+        if (color) {
+            return { [`--${PREFIX_BS}component-color`]: color };
         }
-        else if (!oldPropClasses.has(currentClass)) {
-            // add it as it has NOT been removed by user
-            finalClassNames.push(currentClass);
+        if (theme) {
+            return { [`--${PREFIX_BS}icon-component-color`]: `var(--${PREFIX_BS}${theme})` };
         }
-    });
-    incomingPropClasses.forEach((s) => finalClassNames.push(s));
-    return finalClassNames.join(' ');
-};
-/**
- * Transforms a React event name to a browser event name.
- */
-const transformReactEventName = (eventNameSuffix) => {
-    switch (eventNameSuffix) {
-        case 'doubleclick':
-            return 'dblclick';
-    }
-    return eventNameSuffix;
-};
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-const isCoveredByReact = (eventNameSuffix) => {
-    if (typeof document === 'undefined') {
-        return true;
-    }
-    else {
-        const eventName = 'on' + transformReactEventName(eventNameSuffix);
-        let isSupported = eventName in document;
-        if (!isSupported) {
-            const element = document.createElement('div');
-            element.setAttribute(eventName, 'return;');
-            isSupported = typeof element[eventName] === 'function';
+        return {};
+    }, [color, theme]);
+    const getBackgroundStyle = useMemo(() => {
+        if (backgroundColor) {
+            return { [`--${PREFIX_BS}icon-component-bg-color`]: backgroundColor };
         }
-        return isSupported;
-    }
-};
-const syncEvent = (node, eventName, newEventHandler) => {
-    const eventStore = node.__events || (node.__events = {});
-    const oldEventHandler = eventStore[eventName];
-    // Remove old listener so they don't double up.
-    if (oldEventHandler) {
-        node.removeEventListener(eventName, oldEventHandler);
-    }
-    // Bind new listener.
-    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
-        if (newEventHandler) {
-            newEventHandler.call(this, e);
+        if (hasCircle) {
+            if (theme) {
+                return { [`--${PREFIX_BS}icon-component-bg-color`]: `rgba(var(--${PREFIX_BS}${theme}-rgb), 0.1)` };
+            }
+            return { [`--${PREFIX_BS}icon-component-bg-color`]: `rgba(var(--${PREFIX_BS}body-color-rgb), 0.1)` };
         }
-    }));
-};
-const arrayToMap = (arr) => {
-    const map = new Map();
-    arr.forEach((s) => map.set(s, s));
-    return map;
-};
+        return {};
+    }, [backgroundColor, hasCircle, theme]);
+    const getCircleSizeStyle = useMemo(() => {
+        if (hasCircle) {
+            return { [`--${PREFIX_BS}icon-component-padding`]: circleSize };
+        }
+        return { [`--${PREFIX_BS}icon-component-padding`]: '0' };
+    }, [circleSize, hasCircle]);
+    const generateStyleVariables = 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 = useMemo(() => ({
+        'd-icon': true,
+        [className]: !!className,
+        [familyClass]: true,
+        [`${familyPrefix}${icon}`]: true,
+        'd-icon-loading': isLoading,
+    }), [familyClass, familyPrefix, icon, className, isLoading]);
+    return (jsx("i", { className: classNames(generateClasses), style: generateStyleVariables }));
+}
 
-const setRef = (ref, value) => {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref != null) {
-        // Cast as a MutableRef so we can assign current
-        ref.current = value;
-    }
-};
-const mergeRefs = (...refs) => {
-    return (value) => {
-        refs.forEach((ref) => {
-            setRef(ref, value);
-        });
-    };
-};
-const createForwardRef = (ReactComponent, displayName) => {
-    const forwardRef = (props, ref) => {
-        return jsx(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
-    };
-    forwardRef.displayName = displayName;
-    const forwardedRef = React.forwardRef(forwardRef);
-    forwardedRef.displayName = displayName;
-    return forwardedRef;
-};
+function DSummaryCard({ title, description, icon, iconSize, iconTheme, Summary, }) {
+    return (jsxs("div", { children: [jsx("h6", { className: "fw-bold fs-6", children: title }), jsx("p", { className: "fs-8", children: description }), jsxs("div", { className: "bg-white rounded p-4 d-flex gap-3 shadow-sm text-gray-700 fs-8", children: [jsx(DIcon, { icon: icon, theme: iconTheme, size: iconSize }), Summary] })] }));
+}
 
-const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
-    if (defineCustomElement !== undefined) {
-        defineCustomElement();
-    }
-    const displayName = dashToPascalCase(tagName);
-    const ReactComponent = class extends React.Component {
-        constructor(props) {
-            super(props);
-            this.setComponentElRef = (element) => {
-                this.componentEl = element;
+function DAlert({ type = 'light', icon, iconFamilyClass, iconFamilyPrefix, showIcon = false, showClose, onClose, children, id, className, style, }) {
+    const generateClasses = useMemo(() => ({
+        alert: true,
+        [`alert-${type}`]: true,
+        'fade show': !!showClose,
+        className: !!className,
+    }), [type, showClose, className]);
+    const getIcon = useMemo(() => icon || ALERT_TYPE_ICON[type] || '', [icon, type]);
+    const generateStyleVariables = 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 (jsxs("div", { className: classNames(generateClasses), style: generateStyleVariables, role: "alert", id: id, children: [(showIcon || icon) && (jsx(DIcon, Object.assign({ className: "alert-icon", icon: getIcon }, iconFamilyClass && { familyClass: iconFamilyClass }, iconFamilyPrefix && { familyPrefix: iconFamilyPrefix }))), jsx("div", { className: "alert-text", children: children }), showClose && (jsx("div", { className: "alert-separator" })), showClose && (jsx("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: onClose, children: 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 = __rest(_a, ["icon", "iconFamilyClass", "iconFamilyPrefix", "isDisabled", "children"]);
+    const { acceptedFiles, getRootProps, getInputProps, } = useDropzone(Object.assign({ disabled: isDisabled }, dropzoneOptions));
+    return (jsxs("section", { className: classNames('d-box-file', {
+            'd-box-file-selected': !!acceptedFiles.length,
+        }), children: [jsxs("div", Object.assign({}, getRootProps({
+                className: classNames('d-box-file-dropzone', {
+                    disabled: isDisabled,
+                }),
+            }), { children: [jsx("input", Object.assign({}, getInputProps())), jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }), jsx("div", { className: "d-box-content", children: children })] })), !!acceptedFiles.length && (jsx("aside", { className: "d-box-files", children: acceptedFiles.map((file) => (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 = 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 = useMemo(() => {
+        if (isPill) {
+            return {
+                [`--${PREFIX_BS}btn-component-border-radius`]: `var(--${PREFIX_BS}border-radius-pill)`,
+                [`--${PREFIX_BS}btn-component-lg-border-radius`]: `var(--${PREFIX_BS}border-radius-pill)`,
+                [`--${PREFIX_BS}btn-component-sm-border-radius`]: `var(--${PREFIX_BS}border-radius-pill)`,
             };
         }
-        componentDidMount() {
-            this.componentDidUpdate(this.props);
-        }
-        componentDidUpdate(prevProps) {
-            attachProps(this.componentEl, this.props, prevProps);
+        return {};
+    }, [isPill]);
+    const clickHandler = useCallback((event) => {
+        if (isStopPropagationEnabled) {
+            event.stopPropagation();
         }
-        render() {
-            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
-            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
-                const value = cProps[name];
-                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                    const eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
-                        acc[name] = value;
-                    }
-                }
-                else {
-                    // we should only render strings, booleans, and numbers as attrs in html.
-                    // objects, functions, arrays etc get synced via properties on mount.
-                    const type = typeof value;
-                    if (type === 'string' || type === 'boolean' || type === 'number') {
-                        acc[camelToDashCase(name)] = value;
-                    }
-                }
-                return acc;
-            }, {});
-            if (manipulatePropsFunction) {
-                propsToPass = manipulatePropsFunction(this.props, propsToPass);
-            }
-            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
-            /**
-             * We use createElement here instead of
-             * React.createElement to work around a
-             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
-             * React.createElement causes all elements to be rendered
-             * as <tagname> instead of the actual Web Component.
-             */
-            return createElement(tagName, newProps, children);
-        }
-        static get displayName() {
-            return displayName;
-        }
-    };
-    // If context was passed to createReactComponent then conditionally add it to the Component Class
-    if (ReactComponentContext) {
-        ReactComponent.contextType = ReactComponentContext;
-    }
-    return createForwardRef(ReactComponent, displayName);
-};
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [isStopPropagationEnabled, onClick]);
+    return (jsxs("button", Object.assign({ className: classNames(generateClasses, className), style: generateStyleVariables, type: type, disabled: state === 'disabled' || isLoading || isDisabled }, value && { value }, { onClick: clickHandler, children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })), (text && !isLoading) && (jsx("span", { children: text })), isLoading && (jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) })), iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix }))] })));
+}
 
-/* eslint-disable */
-const DAlert = /*@__PURE__*/ createReactComponent('d-alert', undefined, undefined, defineCustomElement);
-const DBadge = /*@__PURE__*/ createReactComponent('d-badge', undefined, undefined, defineCustomElement$1);
-const DButton = /*@__PURE__*/ createReactComponent('d-button', undefined, undefined, defineCustomElement$2);
-const DChip = /*@__PURE__*/ createReactComponent('d-chip', undefined, undefined, defineCustomElement$3);
-const DIcon = /*@__PURE__*/ createReactComponent('d-icon', undefined, undefined, defineCustomElement$4);
-const DInput = /*@__PURE__*/ createReactComponent('d-input', undefined, undefined, defineCustomElement$5);
-const DInputCheck = /*@__PURE__*/ createReactComponent('d-input-check', undefined, undefined, defineCustomElement$6);
-const DInputCounter = /*@__PURE__*/ createReactComponent('d-input-counter', undefined, undefined, defineCustomElement$7);
-const DInputCurrencyBase = /*@__PURE__*/ createReactComponent('d-input-currency-base', undefined, undefined, defineCustomElement$8);
-const DInputPassword = /*@__PURE__*/ createReactComponent('d-input-password', undefined, undefined, defineCustomElement$9);
-const DInputPin = /*@__PURE__*/ createReactComponent('d-input-pin', undefined, undefined, defineCustomElement$a);
-const DInputSearch = /*@__PURE__*/ createReactComponent('d-input-search', undefined, undefined, defineCustomElement$b);
-const DInputSelect = /*@__PURE__*/ createReactComponent('d-input-select', undefined, undefined, defineCustomElement$c);
-const DInputSwitch = /*@__PURE__*/ createReactComponent('d-input-switch', undefined, undefined, defineCustomElement$d);
-const DModal = /*@__PURE__*/ createReactComponent('d-modal', undefined, undefined, defineCustomElement$e);
-const DOffcanvas = /*@__PURE__*/ createReactComponent('d-offcanvas', undefined, undefined, defineCustomElement$f);
-const DProgress = /*@__PURE__*/ createReactComponent('d-progress', undefined, undefined, defineCustomElement$g);
-const DQuickActionButton = /*@__PURE__*/ createReactComponent('d-quick-action-button', undefined, undefined, defineCustomElement$h);
-const DQuickActionCheck = /*@__PURE__*/ createReactComponent('d-quick-action-check', undefined, undefined, defineCustomElement$i);
-const DQuickActionSelect = /*@__PURE__*/ createReactComponent('d-quick-action-select', undefined, undefined, defineCustomElement$j);
-const DQuickActionSwitch = /*@__PURE__*/ createReactComponent('d-quick-action-switch', undefined, undefined, defineCustomElement$k);
+function DCard({ className, style, children, }) {
+    return (jsx("div", { style: style, className: classNames('card', className), children: children }));
+}
 
-function DPermissionItem({ permission, permissionState, onChange, onAction = () => { }, }) {
-    return (jsxs("div", Object.assign({ role: "button", tabIndex: 0, onKeyDown: () => { }, className: "d-flex permission-item align-items-center", onClick: onAction }, { children: [jsx("span", Object.assign({ className: "flex-grow-1 label" }, { children: permission.label })), permission.type === 'custom' && (jsx(DBadge, { theme: "tertiary", text: permissionState })), jsx(DInputSwitch, { innerId: permission.id, isChecked: !!permission.value, isDisabled: !permission.enabled, onEventChange: ({ detail: checked }) => onChange(checked) })] })));
+function DCardBody({ className, children, }) {
+    return (jsx("div", { className: classNames('card-body', className), children: children }));
 }
 
-function MPermissionGroup({ title, description, permissionState, permissionList, onChangePermission, onCustomAction = () => { }, }) {
-    return (jsxs("div", Object.assign({ className: "row operation-group g-0 mb-3 mb-lg-0" }, { children: [jsxs("div", Object.assign({ className: "col-12 col-lg-4 d-flex flex-column justify-content-center" }, { children: [jsx("h6", Object.assign({ className: "fw-bold mb-3 mb-lg-2" }, { children: title })), jsx("p", Object.assign({ className: "fs-8 d-none d-lg-block m-0" }, { children: description }))] })), jsx("div", Object.assign({ className: "col-12 offset-lg-1 col-lg-7" }, { children: permissionList.map((permission) => (jsx(DPermissionItem, { permission: permission, permissionState: permissionState, onChange: (isChecked) => onChangePermission(permission, isChecked), onAction: () => onCustomAction(permission) }, permission.id))) }))] })));
+function DCardFooter({ className, children, }) {
+    return (jsx("div", { className: classNames('card-footer', className), children: children }));
 }
 
-function MSummaryCard({ title, description, icon, iconSize, iconTheme, Summary, }) {
-    return (jsxs("div", { children: [jsx("h6", Object.assign({ className: "fw-bold fs-6" }, { children: title })), jsx("p", Object.assign({ className: "fs-8" }, { children: description })), jsxs("div", Object.assign({ className: "bg-white rounded p-4 d-flex gap-3 shadow-sm text-gray-700 fs-8" }, { children: [jsx(DIcon, { icon: icon, theme: iconTheme, size: iconSize }), Summary] }))] }));
+function DCardHeader({ className, children, }) {
+    return (jsx("div", { className: classNames('card-header', className), children: children }));
 }
 
-function DToastContainer({ style, position = 'top-right', }) {
-    return (jsx(ToastContainer, { toastClassName: () => 'shadow-none p-0 cursor-default', position: position, autoClose: false, hideProgressBar: true, closeOnClick: false, closeButton: false, transition: Slide, style: style }));
+function DCardAccount({ className, icon, theme, name, number, balance, balanceText, onClick, actionText, }) {
+    return (jsx(DCard, { className: classNames('d-card-account', className), children: jsxs(DCardBody, { children: [jsxs("div", { className: "d-flex gap-3 align-items-center", children: [jsx(DIcon, { icon: icon, hasCircle: true, theme: theme, size: "1.5rem" }), jsxs("div", { className: "d-block flex-grow-1", children: [jsx("p", { className: "text-gray-700", children: name }), jsx("small", { className: "text-gray-500", children: number })] })] }), jsxs("div", { className: "d-block", children: [jsx("p", { className: "fw-bold fs-6 text-body", children: balance }), jsx("small", { className: "text-gray-700", children: balanceText })] }), jsx("div", { className: "d-flex justify-content-end", children: jsx(DButton, { text: actionText, variant: "link", size: "sm", theme: "secondary", iconEnd: "chevron-right", onClick: onClick }) })] }) }));
+}
+
+function DCarousel(_a) {
+    var { children, className, options } = _a, props = __rest(_a, ["children", "className", "options"]);
+    return (jsx(Splide, Object.assign({ className: classNames('d-carousel', className), options: Object.assign(Object.assign({}, options), { classes: {
+                // Arrows
+                arrows: 'splide__arrows d-carousel-arrows',
+                arrow: 'splide__arrow d-carousel-arrow',
+                prev: 'splide__arrow--prev d-carousel-arrow-prev',
+                next: 'splide__arrow--next d-carousel-arrow-next',
+                // Paginator
+                pagination: 'splide__pagination d-carousel-pagination',
+                page: 'splide__pagination__page d-carousel-pagination-page',
+            } }) }, props, { children: children })));
+}
+
+function DCarouselSlide(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(SplideSlide, Object.assign({ className: classNames('d-carousel-slide', className) }, props)));
+}
+
+function DChip({ theme = 'primary', text, icon, iconFamilyClass, iconFamilyPrefix, showClose = false, onClose, }) {
+    const generateClasses = useMemo(() => ({
+        'd-chip': true,
+        [`d-chip-${theme}`]: !!theme,
+    }), [theme]);
+    return (jsxs("span", { className: classNames(generateClasses), children: [icon && (jsx("div", { className: "d-chip-icon-container", children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), jsx("span", { children: text }), showClose && (jsx("button", { type: "button", className: "d-chip-icon-container", onClick: onClose, children: jsx(DIcon, { icon: "x-lg" }) }))] }));
+}
+
+function DCollapse({ id, className, Component, hasSeparator = false, defaultCollapsed = false, onChange, children, }) {
+    const [toggle, setToggle] = useState(defaultCollapsed);
+    const onChangeCollapse = () => setToggle((prev) => !prev);
+    useEffect(() => {
+        if (onChange) {
+            onChange(toggle);
+        }
+    }, [toggle, onChange]);
+    useEffect(() => {
+        setToggle(defaultCollapsed);
+    }, [defaultCollapsed]);
+    const generateStyles = useMemo(() => ({
+        [`--${PREFIX_BS}collapse-separator-display`]: hasSeparator ? 'block' : 'none',
+    }), [hasSeparator]);
+    return (jsxs("div", { id: id, className: classNames('collapse-container', className), children: [jsxs("button", { className: "collapse-button", type: "button", onClick: onChangeCollapse, children: [jsx("div", { className: "flex-grow-1", children: Component }), jsx(DIcon, { color: `var(--${PREFIX_BS}gray)`, size: `var(--${PREFIX_BS}ref-fs-small)`, icon: toggle ? 'chevron-up' : 'chevron-down' })] }), toggle && (jsx("div", { className: classNames({
+                    'collapse-body': true,
+                }), style: generateStyles, children: children }))] }));
+}
+
+function DCollapseIconText({ children, icon, iconSize = '1.5rem', iconTheme = 'primary', title, iconFamilyClass, iconFamilyPrefix, }) {
+    return (jsx(DCollapse, { defaultCollapsed: true, className: "d-collapse-icon-text", Component: (jsxs("div", { className: "d-collapse-icon-text-header", children: [jsx(DIcon, { icon: icon, size: iconSize, theme: iconTheme, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, hasCircle: true }), 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 */
+var 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(amount, options).format();
+}
+
+const LANG = liquidParser.parse('{{site.language}}');
+async function configureI8n(resources, _a = {}) {
+    var { lng = LANG, fallbackLng = 'es' } = _a, config = __rest(_a, ["lng", "fallbackLng"]);
+    return i18n
+        .use(initReactI18next)
+        .init(Object.assign({ resources,
+        lng, initImmediate: true, fallbackLng, interpolation: {
+            escapeValue: false,
+            prefix: '{',
+            suffix: '}',
+            // skipOnVariables: false,
+        } }, config))
+        .then((t) => t);
 }
 
 const LiquidContext = createContext({
@@ -300,7 +319,7 @@ function LiquidContextProvider({ children, }) {
             decimal: liquidParser.parse('{{vars.currency-decimal}}'),
         },
     }), []);
-    return (jsx(LiquidContext.Provider, Object.assign({ value: value }, { children: children })));
+    return (jsx(LiquidContext.Provider, { value: value, children: children }));
 }
 function useLiquidContext() {
     const context = useContext(LiquidContext);
@@ -430,10 +449,10 @@ function ModalContextProvider({ portalName, children, availableModals, }) {
         openModal,
         closeModal,
     }), [stack, openModal, closeModal]);
-    return (jsxs(ModalContext.Provider, Object.assign({ value: value }, { children: [children, hasPortal && createPortal(jsxs(Fragment, { children: [stack.map(({ Component, modalName, callbacks, payload, }) => {
+    return (jsxs(ModalContext.Provider, { value: value, children: [children, hasPortal && createPortal(jsxs(Fragment, { children: [stack.map(({ Component, modalName, callbacks, payload, }) => {
                         const EnhancedComponent = enhanceModal(Component, callbacks);
                         return (jsx(EnhancedComponent, { name: modalName, payload: payload, openModal: openModal, closeModal: closeModal }, modalName));
-                    }), !!stack.length && jsx("div", { className: "modal-backdrop fade show" })] }), document.getElementById(portalName))] })));
+                    }), !!stack.length && jsx("div", { className: "modal-backdrop fade show" })] }), document.getElementById(portalName))] }));
 }
 function useModalContext() {
     const context = useContext(ModalContext);
@@ -517,10 +536,10 @@ function OffcanvasContextProvider({ portalName, children, availableOffcanvas, })
         openOffcanvas,
         closeOffcanvas,
     }), [stack, openOffcanvas, closeOffcanvas]);
-    return (jsxs(OffcanvasContext.Provider, Object.assign({ value: value }, { children: [children, hasPortal && createPortal(jsxs(Fragment, { children: [stack.map(({ Component, offcanvasName, callbacks, payload, }) => {
+    return (jsxs(OffcanvasContext.Provider, { value: value, children: [children, hasPortal && createPortal(jsxs(Fragment, { children: [stack.map(({ Component, offcanvasName, callbacks, payload, }) => {
                         const EnhancedComponent = enhanceOffcanvas(Component, callbacks);
                         return (jsx(EnhancedComponent, { name: offcanvasName, payload: payload, openOffcanvas: openOffcanvas, closeOffcanvas: closeOffcanvas }, offcanvasName));
-                    }), !!stack.length && jsx("div", { className: "offcanvas-backdrop fade show" })] }), document.getElementById(portalName))] })));
+                    }), !!stack.length && jsx("div", { className: "offcanvas-backdrop fade show" })] }), document.getElementById(portalName))] }));
 }
 function useOffcanvasContext() {
     const context = useContext(OffcanvasContext);
@@ -530,49 +549,99 @@ function useOffcanvasContext() {
     return context;
 }
 
+function useFormatCurrency(...args) {
+    const { currency } = useLiquidContext();
+    const format = useCallback((value) => formatCurrency(value, currency), [currency]);
+    const values = (args || []).map((value) => (formatCurrency(value !== null && value !== void 0 ? value : 0, currency)));
+    return {
+        format,
+        values,
+    };
+}
+
+function DCurrencyText({ value, className, }) {
+    const { values: [valueFormatted] } = useFormatCurrency(value);
+    return (jsx("span", { className: className, 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 = useRef(null);
+    const [internalValue, setInternalValue] = useState(value);
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    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 = useCallback((event) => {
+        setInternalValue(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    return (jsxs("div", { className: classNames({
+            'd-input': true,
+            className: !!className,
+        }), style: style, children: [label && (jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsx(DIcon, { className: "d-input-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxs("div", { className: "d-input-control", children: [jsxs("div", { className: classNames({
+                            'input-group': true,
+                            'has-validation': isInvalid,
+                            disabled: isDisabled || isLoading,
+                        }), children: [!!inputStart && (jsx("div", { className: "input-group-text", children: inputStart })), iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: onIconStartClick, disabled: isDisabled || isLoading, children: iconStart && (jsx(DIcon, { className: "d-input-icon", icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), jsx("input", Object.assign({ ref: innerRef, id: id, name: name, type: type, className: classNames('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) && (jsx("span", { className: "input-group-text", id: `${id}State`, children: jsx(DIcon, { className: "d-input-validation-icon", icon: isInvalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), (iconEnd && !isLoading) && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: onIconEndClick, disabled: isDisabled || isLoading, children: iconEnd && (jsx(DIcon, { className: "d-input-icon", icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), isLoading && (jsx("div", { className: "input-group-text d-input-icon", children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })] }));
+}
+const ForwardedDInput = forwardRef(DInput);
+ForwardedDInput.displayName = 'DInput';
+var DInput$1 = ForwardedDInput;
+
 function DDatePickerTime(_a) {
-    var { value, onEventChange, innerId, label } = _a, props = __rest(_a, ["value", "onEventChange", "innerId", "label"]);
-    return (jsxs("div", Object.assign({ className: "d-flex align-items-center gap-2 flex-column d-datepicker-time" }, { children: [label && (jsx("p", Object.assign({ className: "d-datepicker-time-label" }, { children: label }))), jsx(DInput, Object.assign({}, onEventChange && {
-                onEventChange: (time) => onEventChange(time),
-            }, { type: "time", innerId: innerId, value: value }, props))] })));
+    var { value, onChange, id, label } = _a, props = __rest(_a, ["value", "onChange", "id", "label"]);
+    return (jsxs("div", { className: "d-flex align-items-center gap-2 flex-column d-datepicker-time", children: [label && (jsx("p", { className: "d-datepicker-time-label", children: label })), jsx(DInput$1, Object.assign({}, onChange && {
+                onChange: (event) => onChange(event.target.value),
+            }, { type: "time", id: id, value: value }, props))] }));
 }
 
 function DDatePickerInput(_a, ref) {
-    var { value, onEventClick, innerId, iconEnd } = _a, props = __rest(_a, ["value", "onEventClick", "innerId", "iconEnd"]);
+    var { value, onClick, id, iconEnd } = _a, props = __rest(_a, ["value", "onClick", "id", "iconEnd"]);
     useImperativeHandle(ref, () => ({}), []);
-    return (jsx("div", Object.assign({ role: "button", onClick: onEventClick, onKeyDown: () => { }, tabIndex: -1 }, { children: jsx(DInput, Object.assign({ isReadOnly: true, type: "text", innerId: innerId, value: value, onEventIconEndClick: onEventClick, iconEnd: iconEnd }, props)) })));
+    return (jsx("div", { role: "button", onClick: onClick, onKeyDown: () => { }, tabIndex: -1, children: jsx(DInput$1, Object.assign({ isReadOnly: true, type: "text", id: id, value: value, onIconEndClick: onClick, iconEnd: iconEnd }, props)) }));
 }
-var DDatePickerInput$1 = forwardRef(DDatePickerInput);
+const ForwardedDDatePickerInput = forwardRef(DDatePickerInput);
+ForwardedDDatePickerInput.displayName = 'DDatePickerInput';
+var DDatePickerInput$1 = ForwardedDDatePickerInput;
 
 function DMonthPicker(_a) {
-    var { onEventChangeDate, date } = _a, props = __rest(_a, ["onEventChangeDate", "date"]);
-    const dateJS = (value) => DateTime.fromISO(value).toJSDate();
+    var { onChangeDate, date } = _a, props = __rest(_a, ["onChangeDate", "date"]);
     const { language } = useLiquidContext();
-    const lang = language || 'en';
-    return (jsx(DatePicker, Object.assign({ showMonthYearPicker: true, selected: dateJS(date), calendarClassName: "d-month-picker", onChange: (value) => {
-            onEventChangeDate(value);
-        }, customInput: (jsx("p", Object.assign({ className: "fw-bold text-capitalize" }, { children: DateTime.fromISO(date).setLocale(lang).toFormat('MMMM yyyy') }))), renderCustomHeader: ({ monthDate, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, }) => (jsxs("div", Object.assign({ className: "d-flex align-items-center justify-content-between gap-4 fs-6 bg-dark" }, { children: [jsx(DButton, { iconStart: "chevron-left", size: "sm", variant: "link", theme: "light", onEventClick: decreaseYear, isDisabled: prevYearButtonDisabled }), jsx("p", Object.assign({ className: "fs-6 fw-bold" }, { children: monthDate.getFullYear() })), jsx(DButton, { iconStart: "chevron-right", size: "sm", variant: "link", theme: "light", onEventClick: increaseYear, isDisabled: nextYearButtonDisabled })] }))) }, props)));
+    const selected = useMemo(() => DateTime.fromISO(date).toJSDate(), [date]);
+    const locale = useMemo(() => language || 'en', [language]);
+    const dateFormatted = useMemo(() => (DateTime.fromISO(date).setLocale(locale).toFormat('MMMM yyyy')), [date, locale]);
+    return (jsx(DatePicker, Object.assign({ showMonthYearPicker: true, selected: selected, calendarClassName: "d-month-picker", onChange: onChangeDate, customInput: (jsx("p", { className: "fw-bold text-capitalize", children: dateFormatted })), renderCustomHeader: ({ monthDate, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, }) => (jsxs("div", { className: "d-flex align-items-center justify-content-between gap-4 fs-6 bg-dark", children: [jsx(DButton, { iconStart: "chevron-left", size: "sm", variant: "link", theme: "light", onClick: decreaseYear, isDisabled: prevYearButtonDisabled }), jsx("p", { className: "fs-6 fw-bold", children: monthDate.getFullYear() }), 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 lang = language || 'en';
-    return (jsxs("div", Object.assign({ className: "d-flex align-items-center justify-content-between d-datepicker-header" }, { children: [jsx(DButton, { iconStart: decreaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onEventClick: decreaseMonth, isDisabled: prevMonthButtonDisabled }), jsx(DMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, { date: monthDate.toISOString(), onEventChangeDate: (value) => {
-                    if (value) {
-                        changeMonth(DateTime.fromJSDate(value).month - 1);
-                        changeYear(DateTime.fromJSDate(value).year);
-                    }
-                } }, lang && { locale: lang })), jsx(DButton, { iconStart: increaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onEventClick: increaseMonth, isDisabled: nextMonthButtonDisabled })] })));
+    const locale = useMemo(() => language || 'en', [language]);
+    const onChangeDate = useCallback((value) => {
+        if (value) {
+            changeMonth(DateTime.fromJSDate(value).month - 1);
+            changeYear(DateTime.fromJSDate(value).year);
+        }
+    }, [changeMonth, changeYear]);
+    return (jsxs("div", { className: "d-flex align-items-center justify-content-between d-datepicker-header", children: [jsx(DButton, { iconStart: decreaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, isDisabled: prevMonthButtonDisabled }), jsx(DMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, { date: monthDate.toISOString(), onChangeDate: onChangeDate }, locale && { locale })), jsx(DButton, { iconStart: increaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, isDisabled: nextMonthButtonDisabled })] }));
 }
 
 function DDatePicker(_a) {
-    var { onEventChangeDate, 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 = __rest(_a, ["onEventChangeDate", "date", "selectsRange", "withMonthSelector", "inputLabel", "inputIcon", "inputId", "timeId", "timeLabel", "headerDecreaseMonthIcon", "headerIncreaseMonthIcon", "headerIconSize", "headerButtonVariant", "headerButtonTheme"]);
-    const dateJS = (value) => DateTime.fromISO(value).toJSDate();
+    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 = __rest(_a, ["onChangeDate", "date", "selectsRange", "withMonthSelector", "inputLabel", "inputIcon", "inputId", "timeId", "timeLabel", "headerDecreaseMonthIcon", "headerIncreaseMonthIcon", "headerIconSize", "headerButtonVariant", "headerButtonTheme"]);
+    const selected = useMemo(() => DateTime.fromISO(date).toJSDate(), [date]);
     const { language } = useLiquidContext();
-    const lang = language || 'en';
-    // eslint-disable-next-line react/no-unstable-nested-components
-    const InputPicker = forwardRef(({ value, onClick }, ref) => (jsx(DDatePickerInput$1, { label: inputLabel, innerId: inputId, iconEnd: inputIcon, value: value, onEventClick: onClick, ref: ref })));
-    const TimeInputPicker = useCallback(({ value, onChange }) => (jsx(DDatePickerTime, { onEventChange: onChange, value: value, label: timeLabel, innerId: timeId })), [timeLabel, timeId]);
+    const locale = useMemo(() => language || 'en', [language]);
     const DatePickerHeader = useCallback((headerProps) => (jsx(DDatePickerHeader, Object.assign({}, headerProps, { decreaseMonthIcon: headerDecreaseMonthIcon, increaseMonthIcon: headerIncreaseMonthIcon, iconSize: headerIconSize, buttonVariant: headerButtonVariant, buttonTheme: headerButtonTheme, withMonthSelector: !!withMonthSelector }))), [headerButtonTheme,
         headerButtonVariant,
         headerDecreaseMonthIcon,
@@ -580,260 +649,299 @@ function DDatePicker(_a) {
         headerIncreaseMonthIcon,
         withMonthSelector,
     ]);
-    return (jsx(DatePicker, Object.assign({ selected: dateJS(date), calendarClassName: "m-date-picker", onChange: (value) => {
-            onEventChangeDate(value);
-        }, renderCustomHeader: (headerProps) => jsx(DatePickerHeader, Object.assign({}, headerProps)), customInput: jsx(InputPicker, {}), customTimeInput: jsx(TimeInputPicker, {}), selectsRange: selectsRange }, lang && { locale: lang }, props)));
+    return (jsx(DatePicker, Object.assign({ selected: selected, calendarClassName: "m-date-picker", onChange: onChangeDate, renderCustomHeader: (headerProps) => jsx(DatePickerHeader, Object.assign({}, headerProps)), customInput: jsx(DDatePickerInput$1, { id: inputId, iconEnd: inputIcon }), customTimeInput: jsx(DDatePickerTime, { id: timeId, label: timeLabel }), selectsRange: selectsRange }, locale && { locale }, props)));
 }
 
-function DSkeleton({ speed = 2, viewBox, backgroundColor, foregroundColor, children, }) {
-    const innerBackgroundColor = useMemo(() => {
-        if (backgroundColor) {
-            return backgroundColor;
+function DFormikInput(_a) {
+    var { name, hint } = _a, props = __rest(_a, ["name", "hint"]);
+    const [field, meta, helpers] = useField(name);
+    return (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 DInputCurrencyBase(_a) {
+    var { id, name, label = '', placeholder = '', value, isDisabled = false, isReadOnly = false, isLoading = false, hint, isInvalid = false, isValid = false, minValue, maxValue, currencyOptions, currencyCode, onChange, onBlur, onFocus } = _a, rest = __rest(_a, ["id", "name", "label", "placeholder", "value", "isDisabled", "isReadOnly", "isLoading", "hint", "isInvalid", "isValid", "minValue", "maxValue", "currencyOptions", "currencyCode", "onChange", "onBlur", "onFocus"]);
+    const [internalValueAsNumber, setInternalValueAsNumber] = useState(value);
+    const [internalValueAsFormat, setInternalValueAsFormat] = useState('');
+    const [internalType, setInternalType] = useState('text');
+    const [internalIsInvalid, setInternalIsInvalid] = useState(false);
+    const currencyInputRef = useRef(null);
+    const changeHandler = useCallback((event) => {
+        event.stopPropagation();
+        const eventValue = event.target.value;
+        const valueAsNumber = eventValue ? parseFloat(eventValue) : undefined;
+        const valueAsFormat = valueAsNumber !== undefined
+            ? currency(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 = useCallback((event) => {
+        event.stopPropagation();
+        setInternalType('text');
+        setInternalValueAsFormat(internalValueAsNumber !== undefined
+            ? currency(internalValueAsNumber, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format()
+            : '');
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(internalValueAsNumber);
+    }, [currencyOptions, internalValueAsNumber, onBlur]);
+    const focusHandler = useCallback((event) => {
+        event.stopPropagation();
+        setInternalType('number');
+        setInternalValueAsFormat(internalValueAsNumber !== undefined
+            ? currency(internalValueAsNumber, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format()
+            : '');
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(internalValueAsNumber);
+    }, [currencyOptions, internalValueAsNumber, onFocus]);
+    const wheelHandler = useCallback((event) => {
+        var _a;
+        event.stopPropagation();
+        (_a = currencyInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }, []);
+    const isValidValue = useCallback((internalValue) => {
+        if (internalValue === undefined) {
+            return true;
         }
-        const computedStyle = getComputedStyle(document.documentElement);
-        return computedStyle.getPropertyValue(`--${PREFIX_BS}secondary-100`);
-    }, [backgroundColor]);
-    const innerForegroundColor = useMemo(() => {
-        if (foregroundColor) {
-            return foregroundColor;
+        if (internalType === 'number') {
+            return ((minValue === undefined || internalValue >= minValue)
+                && (maxValue === undefined || internalValue <= maxValue));
         }
-        const computedStyle = getComputedStyle(document.documentElement);
-        return computedStyle.getPropertyValue(`--${PREFIX_BS}gray-100`);
-    }, [foregroundColor]);
-    return (jsx(ContentLoader, Object.assign({ speed: speed, viewBox: viewBox, backgroundColor: innerBackgroundColor, foregroundColor: innerForegroundColor }, { children: children })));
+        return true;
+    }, [internalType, maxValue, minValue]);
+    const valueAsType = useMemo(() => {
+        if (internalType === 'number') {
+            return internalValueAsNumber;
+        }
+        return internalValueAsFormat;
+    }, [internalType, internalValueAsFormat, internalValueAsNumber]);
+    useEffect(() => {
+        setInternalIsInvalid(!isValidValue(value));
+    }, [isValidValue, value]);
+    useEffect(() => {
+        setInternalValueAsNumber(value);
+    }, [value]);
+    const generateStyleVariables = 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 = useMemo(() => ({
+        color: `var(--${PREFIX_BS}m-input-currency-symbol-color)`,
+    }), []);
+    return (jsx(DInput$1, Object.assign({ ref: currencyInputRef, style: generateStyleVariables, id: id, name: name, 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: (jsx("span", { slot: "input-start", style: generateSymbolStyleVariables, children: currencyCode || currencyOptions.symbol })) }, rest)));
 }
 
-const TabContext = createContext(undefined);
-function DTabs({ children, defaultSelected, onEventChange, options, className, isVertical, }) {
-    const [selected, setSelected] = useState(defaultSelected);
-    const onSelect = useCallback((option) => {
-        if (option.tab) {
-            setSelected(option.tab);
+function DInputCurrency(props) {
+    const { currency } = useLiquidContext();
+    return (jsx(DInputCurrencyBase, Object.assign({ currencyOptions: currency }, props)));
+}
+
+function DFormikInputCurrency(_a) {
+    var { name, hint } = _a, props = __rest(_a, ["name", "hint"]);
+    const [field, meta, helpers] = useField(name);
+    return (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 DInputSelect({ id, name, label = '', options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, isDisabled = false, isLoading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, hint, selectedOption, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
+    const internalValueExtractor = useCallback((option) => {
+        if (valueExtractor) {
+            return valueExtractor(option);
         }
-        onEventChange(option);
-    }, [onEventChange]);
-    useEffect(() => {
-        setSelected(defaultSelected);
-    }, [defaultSelected]);
-    const isSelected = useCallback((tab) => (selected === tab), [selected]);
-    const value = useMemo(() => ({
-        isSelected,
-    }), [isSelected]);
-    return (jsx(TabContext.Provider, Object.assign({ value: value }, { children: jsxs("div", Object.assign({ className: classNames({
-                'd-tabs': true,
-                'd-tabs-vertical': isVertical,
-            }) }, { children: [jsx("nav", Object.assign({ className: "nav" }, { children: options.map((option) => (jsx("button", Object.assign({ 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))) })), jsx("div", Object.assign({ className: "tab-content" }, { children: children }))] })) })));
+        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 = 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 = 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 = useCallback((event) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur]);
+    const iconStartClickHandler = useCallback((event) => {
+        onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(event);
+    }, [onIconStartClick]);
+    const iconEndClickHandler = useCallback((event) => {
+        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(event);
+    }, [onIconEndClick]);
+    return (jsxs("div", { className: "d-input", children: [label && (jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsx(DIcon, { className: "mdinput-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxs("div", { className: "d-input-control", children: [jsxs("div", { className: classNames({
+                            'input-group': true,
+                            disabled: isDisabled || isLoading,
+                        }), children: [iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: iconStartClickHandler, disabled: isDisabled || isLoading, children: iconStart && (jsx(DIcon, { className: "d-input-icon", icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), 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) => (jsx("option", { value: internalValueExtractor(option), children: internalLabelExtractor(option) }, internalValueExtractor(option)))) })), iconEnd && !isLoading && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: iconEndClickHandler, disabled: isDisabled || isLoading, children: iconEnd && (jsx(DIcon, { className: "d-input-icon", icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), isLoading && (jsx("div", { className: "input-group-text form-control-icon loading", children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })] }));
 }
-function useTabContext() {
-    const context = useContext(TabContext);
-    if (context === undefined) {
-        throw new Error('useTabContext was used outside of MTab');
-    }
-    return context;
+
+function DFormikInputSelect(_a) {
+    var { name } = _a, props = __rest(_a, ["name"]);
+    const [field, , helpers] = useField(name);
+    return (jsx(DInputSelect, Object.assign({}, props, { name: field.name, selectedOption: field.value, onChange: (selected) => helpers.setValue(selected), onBlur: (selected) => field.onBlur(selected) })));
 }
 
-function DTabContent({ tab, children }) {
-    const { isSelected } = useTabContext();
-    if (!isSelected(tab)) {
-        return null;
+function DInputCheck({ type, name, label, isChecked = false, id, isDisabled = false, isIndeterminate, value, onChange, }) {
+    const innerRef = useRef(null);
+    const handleChange = useCallback((event) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = Boolean(isIndeterminate);
+        }
+    }, [isIndeterminate]);
+    useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.checked = isChecked;
+        }
+    }, [isChecked]);
+    if (!label) {
+        return (jsx("input", { ref: innerRef, onChange: handleChange, className: "form-check-input", id: id, disabled: isDisabled, type: type, name: name, value: value }));
     }
-    return (jsx("div", Object.assign({ className: "tab-pane fade show active", id: `${tab}Pane`, role: "tabpanel", tabIndex: 0, "aria-labelledby": `${tab}Tab` }, { children: children })));
+    return (jsxs("div", { className: "form-check", children: [jsx("input", { ref: innerRef, onChange: handleChange, className: "form-check-input", id: id, disabled: isDisabled, type: type, name: name, value: value }), jsx("label", { className: "form-check-label", htmlFor: id, children: label })] }));
 }
 
-function DPopover({ children, renderComponent, isOpen, setEventIsOpen, }) {
-    const [innerIsOpen, setInnerIsOpen] = useState(false);
+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 = __rest(_a, ["id", "name", "label", "value", "isDisabled", "isReadOnly", "isLoading", "iconStart", "iconEnd", "hint", "isInvalid", "isValid", "minValue", "maxValue", "style", "className", "onChange"]);
+    const [internalIsInvalid, setInternalIsInvalid] = useState(false);
+    const [internalValue, setInternalValue] = useState(value);
     useEffect(() => {
-        setInnerIsOpen(isOpen);
-    }, [isOpen]);
-    const onOpenChange = useCallback((value) => {
-        setInnerIsOpen(value);
-        if (setEventIsOpen) {
-            setEventIsOpen(value);
+        setInternalValue(value);
+    }, [value]);
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(internalValue);
+    }, [internalValue, onChange]);
+    const changeHandler = useCallback((event) => {
+        event.stopPropagation();
+        const newValue = parseInt(event.target.value || '0', 10);
+        setInternalValue(newValue);
+    }, []);
+    const clickHandler = useCallback((action) => {
+        if (action) {
+            setInternalValue((prevInternalValue) => {
+                const newValue = prevInternalValue + 1;
+                return newValue <= maxValue ? newValue : maxValue;
+            });
         }
-    }, [setEventIsOpen]);
-    const { refs, floatingStyles, context } = useFloating({
-        open: innerIsOpen,
-        onOpenChange,
-        middleware: [
-            offset(0),
-            flip({ fallbackAxisSideDirection: 'none' }),
-            shift(),
-        ],
-        whileElementsMounted: autoUpdate,
-    });
-    const click = useClick(context);
-    const dismiss = useDismiss(context);
-    const role = useRole(context);
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        click,
-        dismiss,
-        role,
-    ]);
-    const headingId = useId();
-    return (jsxs("div", Object.assign({ className: "d-popover" }, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: renderComponent(innerIsOpen) })), innerIsOpen && (jsx(FloatingFocusManager, Object.assign({ context: context, modal: false }, { children: jsx("div", Object.assign({ className: "d-popover-content", ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId }, getFloatingProps(), { children: children })) })))] })));
-}
-
-function useFormatCurrency(...args) {
-    const { currency } = useLiquidContext();
-    const format = useCallback((value) => formatCurrency(value, currency), [currency]);
-    const values = (args || []).map((value) => (formatCurrency(value !== null && value !== void 0 ? value : 0, currency)));
-    return {
-        format,
-        values,
-    };
-}
-
-function DCurrencyText({ value, className, }) {
-    const { values: [valueFormatted] } = useFormatCurrency(value);
-    return (jsx("span", Object.assign({ className: className }, { children: valueFormatted })));
-}
-
-function DFormikInput(_a) {
-    var { name, hint } = _a, props = __rest(_a, ["name", "hint"]);
-    const [field, meta, helpers] = useField(name);
-    return (jsx(DInput, Object.assign({}, props, { name: field.name, value: field.value, onEventChange: ({ detail }) => helpers.setValue(detail), onEventBlur: ({ detail }) => field.onBlur(detail), isInvalid: !!meta.error, hint: meta.error || hint })));
-}
-
-function DFormikInputSelect(_a) {
-    var { name, labelExtractor = (item) => item === null || item === void 0 ? void 0 : item.label, valueExtractor = (item) => item === null || item === void 0 ? void 0 : item.value } = _a, props = __rest(_a, ["name", "labelExtractor", "valueExtractor"]);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [field, , helpers] = useField(name);
-    return (jsx(DInputSelect, Object.assign({}, props, { name: field.name, selectedOption: field.value, labelExtractor: labelExtractor, valueExtractor: valueExtractor, onEventChange: ({ detail }) => helpers.setValue(detail), onEventBlur: ({ detail }) => field.onBlur(detail) })));
-}
-
-const TOOLTIP_FONT_SIZE_BY_SIZE = {
-    sm: `var(--${PREFIX_BS}ref-fs-small)`,
-    default: `var(--${PREFIX_BS}body-font-size)`,
-    lg: `var(--${PREFIX_BS}ref-fs-6)`,
-};
-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] = useState(isOpen);
-    const styleVariables = 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 = useRef(null);
-    const { refs, context, floatingStyles, } = useFloating({
-        open,
-        onOpenChange: setOpen,
-        placement,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(offSet),
-            flip(),
-            shift({
-                padding,
-            }),
-            arrow({
-                element: arrowRef,
-            }),
-        ],
-    });
-    const hover = useHover(context, { move: false });
-    const focus = useFocus(context);
-    const dismiss = useDismiss(context);
-    const click = useClick(context);
-    const role = useRole(context, { role: 'tooltip' });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        withHover ? hover : undefined,
-        withClick ? click : undefined,
-        withFocus ? focus : undefined,
-        dismiss,
-        role,
-    ]);
-    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: className, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsx(FloatingPortal, { children: open && (jsxs("div", Object.assign({ className: classNameContainer, ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), styleVariables) }, getFloatingProps(), { children: [jsx(FloatingArrow, { ref: arrowRef, context: context, style: {
-                                fill: styleVariables.background,
-                            }, width: ARROW_WIDTH, height: ARROW_HEIGHT }), children] }))) })] }));
-}
-
-function DCollapse({ id, className, Component, hasSeparator = false, defaultCollapsed = false, onEventChange, children, }) {
-    const [toggle, setToggle] = useState(defaultCollapsed);
-    const onChangeCollapse = () => setToggle((prev) => !prev);
-    useEffect(() => {
-        if (onEventChange) {
-            onEventChange(toggle);
+        else {
+            setInternalValue((prevInternalValue) => {
+                const newValue = prevInternalValue - 1;
+                return newValue >= minValue ? newValue : minValue;
+            });
         }
-    }, [toggle, onEventChange]);
+    }, [maxValue, minValue]);
+    const generateStyleVariables = useMemo(() => (Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}input-component-form-control-text-align`]: 'center' })), [style]);
     useEffect(() => {
-        setToggle(defaultCollapsed);
-    }, [defaultCollapsed]);
-    return (jsxs("div", Object.assign({ id: id, className: classNames('collapse-container', className) }, { children: [jsxs("button", Object.assign({ className: "collapse-button", type: "button", onClick: onChangeCollapse }, { children: [jsx("div", Object.assign({ className: "flex-grow-1" }, { children: Component })), jsx(DIcon, { color: `var(--${PREFIX_BS}gray)`, size: `var(--${PREFIX_BS}ref-fs-small)`, icon: toggle ? 'chevron-up' : 'chevron-down' })] })), toggle && (jsx("div", Object.assign({ className: classNames({
-                    'collapse-body': true,
-                }), style: {
-                    [`--${PREFIX_BS}collapse-separator-display`]: hasSeparator ? 'block' : 'none',
-                } }, { children: children })))] })));
+        setInternalIsInvalid(!(internalValue >= minValue && internalValue <= maxValue));
+    }, [internalValue, minValue, maxValue]);
+    return (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 DInputCurrency(_a) {
-    var { onEventChange, onEventBlur, onEventFocus } = _a, otherProps = __rest(_a, ["onEventChange", "onEventBlur", "onEventFocus"]);
-    const { currency } = useLiquidContext();
-    return (jsx(DInputCurrencyBase, Object.assign({ currencyOptions: currency, onEventChange: ({ detail }) => onEventChange(detail) }, onEventBlur && {
-        onEventBlur: ({ detail }) => onEventBlur(detail),
-    }, onEventFocus && {
-        onEventFocus: ({ detail }) => onEventFocus(detail),
-    }, otherProps)));
-}
-
-function DBoxFile(_a) {
-    var { icon = 'cloud-upload', iconFamilyClass, iconFamilyPrefix, isDisabled = false, children } = _a, dropzoneOptions = __rest(_a, ["icon", "iconFamilyClass", "iconFamilyPrefix", "isDisabled", "children"]);
-    const { acceptedFiles, getRootProps, getInputProps, } = useDropzone(Object.assign({ disabled: isDisabled }, dropzoneOptions));
-    return (jsxs("section", Object.assign({ className: classNames('d-box-file', {
-            'd-box-file-selected': !!acceptedFiles.length,
-        }) }, { children: [jsxs("div", Object.assign({}, getRootProps({
-                className: classNames('d-box-file-dropzone', {
-                    disabled: isDisabled,
-                }),
-            }), { children: [jsx("input", Object.assign({}, getInputProps())), jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }), jsx("div", Object.assign({ className: "d-box-content" }, { children: children }))] })), !!acceptedFiles.length && (jsx("aside", Object.assign({ className: "d-box-files" }, { children: acceptedFiles.map((file) => (jsx("div", Object.assign({ className: "d-box-files-text" }, { children: `${file.name} - ${file.size} bytes` }), file.name))) })))] })));
+function DInputPassword(_a) {
+    var { id, name, label = '', placeholder = '', value = '', isDisabled = false, isReadOnly = false, isLoading = false, hint, isInvalid = false, isValid = false, onChange } = _a, rest = __rest(_a, ["id", "name", "label", "placeholder", "value", "isDisabled", "isReadOnly", "isLoading", "hint", "isInvalid", "isValid", "onChange"]);
+    const [visible, setVisible] = useState(false);
+    const changeHandler = useCallback((event) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
+    }, [onChange]);
+    const visibilityHandler = useCallback(() => {
+        setVisible((prevVisible) => !prevVisible);
+    }, []);
+    return (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 DCarousel(_a) {
-    var { children, className, options } = _a, props = __rest(_a, ["children", "className", "options"]);
-    return (jsx(Splide, Object.assign({ className: classNames('d-carousel', className), options: Object.assign(Object.assign({}, options), { classes: {
-                // Arrows
-                arrows: 'splide__arrows d-carousel-arrows',
-                arrow: 'splide__arrow d-carousel-arrow',
-                prev: 'splide__arrow--prev d-carousel-arrow-prev',
-                next: 'splide__arrow--next d-carousel-arrow-next',
-                // Paginator
-                pagination: 'splide__pagination d-carousel-pagination',
-                page: 'splide__pagination__page d-carousel-pagination-page',
-            } }) }, props, { children: children })));
+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] = useState('');
+    useEffect(() => {
+        setPattern(type === 'number' ? '[0-9]+' : '^[a-zA-Z0-9]+$');
+    }, [type]);
+    const nextInput = useCallback((event) => {
+        var _a;
+        const input = event.target;
+        const regex = new RegExp(pattern);
+        if (!regex.test(input.value)) {
+            input.value = '';
+        }
+        if (input.value !== '') {
+            if (input.nextSibling) {
+                (_a = input.nextSibling) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                input.blur();
+            }
+        }
+    }, [pattern]);
+    const prevInput = useCallback((event) => {
+        var _a;
+        if (event.key === 'Backspace') {
+            const { value } = event.currentTarget;
+            if (event.currentTarget.previousSibling && value === '') {
+                (_a = event.currentTarget.previousSibling) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                event.currentTarget.blur();
+                event.currentTarget.focus();
+            }
+        }
+    }, []);
+    const focusInput = useCallback((event) => {
+        // eslint-disable-next-line no-param-reassign
+        event.currentTarget.value = '';
+    }, []);
+    const wheelInput = useCallback((event) => {
+        event.currentTarget.blur();
+    }, []);
+    const formChange = 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 = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    return (jsxs("div", { className: "d-input-pin", children: [label && (jsxs("label", { htmlFor: "pinIndex0", children: [label, labelIcon && (jsx(DIcon, { className: "d-input-pin-icon", icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxs("form", { id: id, className: "d-input-pin-controls", onInput: formChange, onSubmit: preventDefaultEvent, children: [Array.from({ length: characters }).map((_, index) => (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 && (jsx("span", { className: "input-group-text", id: `${id}State`, children: jsx(DIcon, { className: "d-input-pin-validation-icon", icon: isInvalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), isLoading && (jsx("div", { className: "input-group-text d-input-pin-icon", children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
 }
 
-function DCarouselSlide(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(SplideSlide, Object.assign({ className: classNames('d-carousel-slide', className) }, props)));
+function DInputSearch(_a) {
+    var { id, name, label, placeholder, value, isDisabled, isReadOnly, isLoading, hint, isInvalid, isValid, onChange, onClick } = _a, rest = __rest(_a, ["id", "name", "label", "placeholder", "value", "isDisabled", "isReadOnly", "isLoading", "hint", "isInvalid", "isValid", "onChange", "onClick"]);
+    const [internalValue, setInternalValue] = useState(value);
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const changeHandler = useCallback((event) => {
+        event.stopPropagation();
+        setInternalValue(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    const clickHandler = useCallback(() => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(internalValue);
+    }, [internalValue, onClick]);
+    return (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 (jsx("div", Object.assign({ className: classNames('list-group', {
+    return (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) }, { children: children })));
+        }, (isHorizontal && horizontalBreakpoint) && `list-group-horizontal-${horizontalBreakpoint}`, className), children: children }));
 }
 
-function DListItem({ children, className, isActive = false, isDisabled = false, theme, onEventClick, }) {
-    const Tag = useMemo(() => (onEventClick ? 'button' : 'div'), [onEventClick]);
+function DListItem({ children, className, isActive = false, isDisabled = false, theme, onClick, }) {
+    const Tag = useMemo(() => (onClick ? 'button' : 'div'), [onClick]);
     return (jsx(Tag, Object.assign({}, Tag === 'button' && {
-        onClick: onEventClick,
+        onClick,
         type: 'button',
     }, { className: classNames('list-group-item list-group-item-action', theme ? `list-group-item-${theme}` : undefined, className, {
             active: isActive,
@@ -843,7 +951,7 @@ function DListItem({ children, className, isActive = false, isDisabled = false,
 
 function useToast() {
     const toast$1 = useCallback((message, { position = 'top-right', type = 'info', showClose = true, autoClose = false, } = {}) => {
-        toast(({ closeToast }) => (jsx(DAlert, Object.assign({ type: type, showClose: showClose, onEventClose: closeToast }, { children: message }))), {
+        toast(({ closeToast }) => (jsx(DAlert, { type: type, showClose: showClose, onClose: closeToast, id: "alertID", children: message })), {
             transition: Slide,
             position,
             autoClose,
@@ -933,28 +1041,202 @@ function DListItemMovement(_a) {
             valueFormatted,
         };
     }, [format, amount]);
-    return (jsx(DListItem, Object.assign({}, props, { children: jsxs("div", Object.assign({ className: classNames('d-flex justify-content-between align-items-center p-3 gap-3', classNameMovement) }, { children: [jsxs("div", Object.assign({ className: "d-flex flex-column gap-1" }, { children: [jsx("span", Object.assign({ className: "fs-6" }, { children: description })), jsx("span", Object.assign({ className: "small text-gray-700" }, { children: date }))] })), jsx("span", Object.assign({ className: classNames('fs-6', value.theme) }, { children: value.valueFormatted }))] })) })));
+    return (jsx(DListItem, Object.assign({}, props, { children: jsxs("div", { className: classNames('d-flex justify-content-between align-items-center p-3 gap-3', classNameMovement), children: [jsxs("div", { className: "d-flex flex-column gap-1", children: [jsx("span", { className: "fs-6", children: description }), jsx("span", { className: "small text-gray-700", children: date })] }), jsx("span", { className: classNames('fs-6', value.theme), children: value.valueFormatted })] }) })));
+}
+
+function DModal({ name, className = '', isStatic, isScrollable, isCentered, isFullScreen, fullScreenFrom, modalSize, children, }) {
+    const fullScreenClass = useMemo(() => {
+        if (isFullScreen) {
+            if (fullScreenFrom) {
+                return `modal-fullscreen-${fullScreenFrom}-down`;
+            }
+            return 'modal-fullscreen';
+        }
+        return '';
+    }, [fullScreenFrom, isFullScreen]);
+    const generateClasses = useMemo(() => ({
+        'modal fade show': true,
+        [`${className}`]: !!className,
+    }), [className]);
+    const generateModalDialogClasses = 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 (jsx("div", Object.assign({ className: classNames(generateClasses), id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false" }, isStatic && ({
+        [`data-${PREFIX_BS}backdrop`]: 'static',
+        [`data-${PREFIX_BS}keyboard`]: 'false',
+    }), { children: jsx("div", { className: classNames(generateModalDialogClasses), children: jsx("div", { className: "modal-content", children: children }) }) })));
+}
+
+function DModalBody({ children }) {
+    return (jsx("div", { className: "d-modal-slot modal-body", children: children }));
+}
+
+function DModalFooter({ actionPlacement = 'fill', children, }) {
+    return (jsxs(Fragment, { children: [jsx("div", { className: "d-modal-separator" }), jsx("div", { className: `d-modal-slot modal-footer d-modal-action-${actionPlacement}`, children: children })] }));
+}
+
+function DModalHeader({ showCloseButton, onClose, children, }) {
+    return (jsxs("div", { className: "modal-header", children: [showCloseButton && (jsx("button", { type: "button", className: "d-modal-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: "x-lg" }) })), children] }));
+}
+
+function DOffcanvas({ name, isStatic, isScrollable, openFrom = 'end', children, }) {
+    return (jsx("div", Object.assign({ className: `offcanvas offcanvas-${openFrom} show`, id: name, tabIndex: -1, "aria-labelledby": `${name}Label`, "aria-hidden": "false" }, isStatic && ({
+        [`data-${PREFIX_BS}backdrop`]: 'static',
+        [`data-${PREFIX_BS}keyboard`]: 'false',
+    }), isScrollable && ({
+        [`data-${PREFIX_BS}scroll`]: 'true',
+        [`data-${PREFIX_BS}keyboard`]: 'false',
+    }), { children: children })));
+}
+
+function DOffcanvasBody({ children }) {
+    return (jsx("div", { className: "d-offcanvas-slot offcanvas-body", children: children }));
+}
+
+function DOffcanvasFooter({ footerActionPlacement = 'fill', children, }) {
+    return (jsx("div", { className: `d-offcanvas-slot d-offcanvas-footer d-offcanvas-action-${footerActionPlacement}`, children: children }));
+}
+
+function DOffcanvasHeader({ showCloseButton, onClose, children, }) {
+    return (jsxs("div", { className: "offcanvas-header", children: [jsx("div", { className: "d-offcanvas-slot", children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-offcanvas-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: "x-lg" }) }))] }));
+}
+
+function DPaginator(_a) {
+    var { className, nextLabel, previousLabel, showArrows = true, page, onPageChange } = _a, props = __rest(_a, ["className", "nextLabel", "previousLabel", "showArrows", "page", "onPageChange"]);
+    return (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] = useState(false);
+    useEffect(() => {
+        setInnerIsOpen(isOpen);
+    }, [isOpen]);
+    const onOpenChange = useCallback((value) => {
+        setInnerIsOpen(value);
+        if (setEventIsOpen) {
+            setEventIsOpen(value);
+        }
+    }, [setEventIsOpen]);
+    const { refs, floatingStyles, context } = useFloating({
+        open: innerIsOpen,
+        onOpenChange,
+        middleware: [
+            offset(0),
+            flip({ fallbackAxisSideDirection: 'none' }),
+            shift(),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+    ]);
+    const headingId = useId();
+    return (jsxs("div", { className: "d-popover", children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: renderComponent(innerIsOpen) })), innerIsOpen && (jsx(FloatingFocusManager, { context: context, modal: false, children: 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 = useMemo(() => `${currentValue}%`, [currentValue]);
+    const generateClasses = useMemo(() => ({
+        'progress-bar': true,
+        'progress-bar-striped progress-bar-animated': enableStripedAnimation,
+    }), [enableStripedAnimation]);
+    return (jsx("div", { className: "progress", children: jsx("div", { className: classNames(generateClasses), role: "progressbar", "aria-label": "Progress bar", style: { width: `${currentValue}%` }, "aria-valuenow": currentValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, children: !hideCurrentValue && formatProgress }) }));
+}
+
+function DQuickActionButton({ line1, line2, actionLinkText, actionLinkTheme = 'secondary', actionIcon, secondaryActionIcon, actionIconFamilyClass, actionIconFamilyPrefix, representativeImage, representativeIcon, representativeIconTheme = 'secondary', representativeIconHasCircle = false, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, onClickSecondary, style, }) {
+    const globalClickHandler = useCallback(() => {
+        if (actionLinkText) {
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [actionLinkText, onClick]);
+    const actionLinkClickHandler = useCallback(() => {
+        if (!actionLinkText) {
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [actionLinkText, onClick]);
+    const secondaryActionLinkClickHandler = useCallback(() => {
+        onClickSecondary === null || onClickSecondary === void 0 ? void 0 : onClickSecondary();
+    }, [onClickSecondary]);
+    const Tag = useMemo(() => (actionLinkText ? 'div' : 'button'), [actionLinkText]);
+    return (jsxs(Tag, { className: "d-quick-action-button", onClick: !actionLinkText ? globalClickHandler : undefined, style: style, children: [representativeIcon && (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 && (jsx("img", { className: "d-quick-action-button-representative-image", src: representativeImage, alt: "" })), jsx("div", { className: "d-quick-action-button-content", children: jsxs("div", { className: "d-quick-action-button-text", children: [jsx("span", { className: "d-quick-action-button-line1", children: line1 }), jsx("small", { className: "d-quick-action-button-line2", children: line2 })] }) }), secondaryActionIcon && (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 && (jsx(DButton, { className: "d-quick-action-button-action-link", type: "button", variant: "link", theme: actionLinkTheme, text: actionLinkText, onClick: actionLinkClickHandler, isStopPropagationEnabled: true })), actionIcon && !actionLinkText && (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, isChecked, onChange, }) {
+    const changeHandler = useCallback((event) => {
+        event.stopPropagation();
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    return (jsxs("label", { className: "d-quick-action-check", htmlFor: id, children: [jsx(DInputCheck, { id: id, type: "radio", name: name, value: value, isChecked: isChecked, onChange: changeHandler }), jsxs("div", { className: "d-quick-action-check-detail", children: [jsx("span", { className: "d-quick-action-check-line1", children: line1 }), jsx("span", { className: "d-quick-action-check-line2", children: line2 })] }), jsx("span", { className: "d-quick-action-check-line3", children: line3 })] }));
+}
+
+function DQuickActionSelect({ id, name, value, line1, line2, isSelected = false, onChange, }) {
+    const innerRef = useRef(null);
+    const changeHandler = useCallback((event) => {
+        event.stopPropagation();
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.checked = isSelected;
+        }
+    }, [isSelected]);
+    return (jsxs("label", { className: "d-quick-action-select", htmlFor: id, children: [jsx("input", { ref: innerRef, id: id, type: "radio", name: name, value: value, onChange: changeHandler }), jsx("span", { className: "d-quick-action-select-line1", children: line1 }), jsx("span", { className: "d-quick-action-select-line2", children: line2 })] }));
+}
+
+function DQuickActionSwitch({ id, name, label, hint, isChecked, isDisabled, onClick, }) {
+    const clickHandler = useCallback((event) => {
+        event.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(isChecked);
+    }, [isChecked, onClick]);
+    return (jsxs("button", { className: "d-quick-action-switch", type: "button", onClick: clickHandler, children: [jsxs("div", { className: "d-quick-action-switch-content", children: [jsx(DInputSwitch, { id: id, name: name, isDisabled: isDisabled, isChecked: isChecked, isReadonly: true }), jsx("label", { className: "d-quick-action-switch-label", htmlFor: id, children: label })] }), jsx("div", { className: "d-quick-action-switch-hint", children: hint })] }));
+}
+
+function DSkeleton({ speed = 2, viewBox, backgroundColor, foregroundColor, children, }) {
+    const innerBackgroundColor = useMemo(() => {
+        if (backgroundColor) {
+            return backgroundColor;
+        }
+        const computedStyle = getComputedStyle(document.documentElement);
+        return computedStyle.getPropertyValue(`--${PREFIX_BS}secondary-100`);
+    }, [backgroundColor]);
+    const innerForegroundColor = useMemo(() => {
+        if (foregroundColor) {
+            return foregroundColor;
+        }
+        const computedStyle = getComputedStyle(document.documentElement);
+        return computedStyle.getPropertyValue(`--${PREFIX_BS}gray-100`);
+    }, [foregroundColor]);
+    return (jsx(ContentLoader, { speed: speed, viewBox: viewBox, backgroundColor: innerBackgroundColor, foregroundColor: innerForegroundColor, children: children }));
 }
 
 function DStepper$2({ options, currentStep, successIcon = 'check', isVertical = false, }) {
     if (currentStep < 1 || currentStep > options.length) {
-        throw new Error('Current step should be in the range from 1 to options lenght');
+        throw new Error('Current step should be in the range from 1 to options length');
     }
-    return (jsx("div", Object.assign({ className: classNames({
+    return (jsx("div", { className: classNames({
             'd-stepper-desktop': true,
             'is-vertical': isVertical,
-        }) }, { children: options.map(({ label, value }) => (jsxs("div", Object.assign({ className: "d-step" }, { children: [jsx("div", Object.assign({ className: "d-step-value" }, { children: jsx("div", Object.assign({ className: classNames({
+        }), children: options.map(({ label, value }) => (jsxs("div", { className: "d-step", children: [jsx("div", { className: "d-step-value", children: jsx("div", { className: classNames({
                             'd-step-icon-container': true,
                             'd-step-check': value < currentStep,
                             'd-step-current': value === currentStep,
-                        }) }, { children: value < currentStep
-                            ? (jsx(DIcon, { icon: successIcon, innerClass: "d-step-icon" }))
-                            : value })) })), jsx("div", Object.assign({ className: "d-step-label" }, { children: label }))] }), value))) })));
+                        }), children: value < currentStep
+                            ? (jsx(DIcon, { icon: successIcon, className: "d-step-icon" }))
+                            : value }) }), jsx("div", { className: "d-step-label", children: label })] }, value))) }));
 }
 
 function DStepper$1({ options, currentStep, }) {
     if (currentStep < 1 || currentStep > options.length) {
-        throw new Error('Current step should be in the range from 1 to options lenght');
+        throw new Error('Current step should be in the range from 1 to options length');
     }
     const currentOption = useMemo(() => { var _a; return (_a = options[currentStep - 1]) !== null && _a !== void 0 ? _a : {}; }, [currentStep, options]);
     const [currentAngle, setCurrentAngle] = useState(0);
@@ -979,62 +1261,112 @@ function DStepper$1({ options, currentStep, }) {
       from 180deg,
       var(--${PREFIX_BS}step-progress-outter-fill-background-color) ${currentAngle}deg,
       var(--${PREFIX_BS}step-progress-outter-background-color) 0deg)`, [currentAngle]);
-    return (jsxs("div", Object.assign({ className: "d-stepper" }, { children: [jsx("div", Object.assign({ className: "d-step-bar", style: { background: progressStyle } }, { children: jsx("p", Object.assign({ className: "d-step-number" }, { children: `${currentStep}/${options.length}` })) })), jsx("div", Object.assign({ className: "d-step-info" }, { children: Object.keys(currentOption).length > 0 && (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: "d-step-label" }, { children: currentOption.label })), jsx("div", Object.assign({ className: "d-step-description" }, { children: currentOption.description || '' }))] })) }))] })));
+    return (jsxs("div", { className: "d-stepper", children: [jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "d-step-label", children: currentOption.label }), jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
 }
 
 function DStepper({ options, currentStep, successIcon = 'check', isVertical = false, breakpoint = 'lg', }) {
-    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: `d-block d-${breakpoint}-none` }, { children: jsx(DStepper$1, { options: options, currentStep: currentStep }) })), jsx("div", Object.assign({ className: `d-none d-${breakpoint}-block` }, { children: jsx(DStepper$2, { options: options, currentStep: currentStep, successIcon: successIcon, isVertical: isVertical }) }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: `d-block d-${breakpoint}-none`, children: jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsx("div", { className: `d-none d-${breakpoint}-block`, children: jsx(DStepper$2, { options: options, currentStep: currentStep, successIcon: successIcon, isVertical: isVertical }) })] }));
 }
 
-function DFormikInputCurrency(_a) {
-    var { name, hint } = _a, props = __rest(_a, ["name", "hint"]);
-    const [field, meta, helpers] = useField(name);
-    return (jsx(DInputCurrency, Object.assign({}, props, { name: field.name, value: field.value, onEventChange: (value) => helpers.setValue(value), onEventBlur: (value) => field.onBlur(value), isInvalid: !!meta.error, hint: (meta === null || meta === void 0 ? void 0 : meta.error) || hint })));
-}
-
-function DCard({ className, style, children, }) {
-    return (jsx("div", Object.assign({ style: style, className: classNames('card', className) }, { children: children })));
-}
-
-function DCardBody({ className, children, }) {
-    return (jsx("div", Object.assign({ className: classNames('card-body', className) }, { children: children })));
-}
-
-function DCardAccount({ className, icon, theme, name, number, balance, balanceText, onEventClick, actionText, }) {
-    return (jsx(DCard, Object.assign({ className: classNames('d-card-account', className) }, { children: jsxs(DCardBody, { children: [jsxs("div", Object.assign({ className: "d-flex gap-3 align-items-center" }, { children: [jsx(DIcon, { icon: icon, hasCircle: true, theme: theme, size: "1.5rem" }), jsxs("div", Object.assign({ className: "d-block flex-grow-1" }, { children: [jsx("p", Object.assign({ className: "text-gray-700" }, { children: name })), jsx("small", Object.assign({ className: "text-gray-500" }, { children: number }))] }))] })), jsxs("div", Object.assign({ className: "d-block" }, { children: [jsx("p", Object.assign({ className: "fw-bold fs-6 text-body" }, { children: balance })), jsx("small", Object.assign({ className: "text-gray-700" }, { children: balanceText }))] })), jsx("div", Object.assign({ className: "d-flex justify-content-end" }, { children: jsx(DButton, { text: actionText, variant: "link", size: "sm", theme: "secondary", iconEnd: "chevron-right", onEventClick: onEventClick }) }))] }) })));
-}
-
-function DCardHeader({ className, children, }) {
-    return (jsx("div", Object.assign({ className: classNames('card-header', className) }, { children: children })));
+const TabContext = createContext(undefined);
+function DTabs({ children, defaultSelected, onChange, options, className, isVertical, }) {
+    const [selected, setSelected] = useState(defaultSelected);
+    const onSelect = useCallback((option) => {
+        if (option.tab) {
+            setSelected(option.tab);
+        }
+        onChange(option);
+    }, [onChange]);
+    useEffect(() => {
+        setSelected(defaultSelected);
+    }, [defaultSelected]);
+    const isSelected = useCallback((tab) => (selected === tab), [selected]);
+    const value = useMemo(() => ({
+        isSelected,
+    }), [isSelected]);
+    return (jsx(TabContext.Provider, { value: value, children: jsxs("div", { className: classNames({
+                'd-tabs': true,
+                'd-tabs-vertical': isVertical,
+            }), children: [jsx("nav", { className: "nav", children: options.map((option) => (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))) }), jsx("div", { className: "tab-content", children: children })] }) }));
 }
-
-function DCardFooter({ className, children, }) {
-    return (jsx("div", Object.assign({ className: classNames('card-footer', className) }, { children: children })));
+function useTabContext() {
+    const context = useContext(TabContext);
+    if (context === undefined) {
+        throw new Error('useTabContext was used outside of MTab');
+    }
+    return context;
 }
 
-function DCollapseIconText({ children, icon, iconSize = '1.5rem', iconTheme = 'primary', title, iconFamilyClass, iconFamilyPrefix, }) {
-    return (jsx(DCollapse, Object.assign({ defaultCollapsed: true, className: "d-collapse-icon-text", Component: (jsxs("div", Object.assign({ className: "d-collapse-icon-text-header" }, { children: [jsx(DIcon, { icon: icon, size: iconSize, theme: iconTheme, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, hasCircle: true }), jsx("span", Object.assign({ className: "d-collapse-icon-text-title" }, { children: title }))] }))) }, { children: children })));
+function DTabContent({ tab, children }) {
+    const { isSelected } = useTabContext();
+    if (!isSelected(tab)) {
+        return null;
+    }
+    return (jsx("div", { className: "tab-pane fade show active", id: `${tab}Pane`, role: "tabpanel", tabIndex: 0, "aria-labelledby": `${tab}Tab`, children: children }));
 }
 
-function DPaginator(_a) {
-    var { className, nextLabel, previousLabel, showArrows = true, page, onEventPageChange } = _a, props = __rest(_a, ["className", "nextLabel", "previousLabel", "showArrows", "page", "onEventPageChange"]);
-    return (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: onEventPageChange }, props)));
+const TOOLTIP_FONT_SIZE_BY_SIZE = {
+    sm: `var(--${PREFIX_BS}ref-fs-small)`,
+    default: `var(--${PREFIX_BS}body-font-size)`,
+    lg: `var(--${PREFIX_BS}ref-fs-6)`,
+};
+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] = useState(isOpen);
+    const styleVariables = 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 = useRef(null);
+    const { refs, context, floatingStyles, } = useFloating({
+        open,
+        onOpenChange: setOpen,
+        placement,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(offSet),
+            flip(),
+            shift({
+                padding,
+            }),
+            arrow({
+                element: arrowRef,
+            }),
+        ],
+    });
+    const hover = useHover(context, { move: false });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const click = useClick(context);
+    const role = useRole(context, { role: 'tooltip' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        withHover ? hover : undefined,
+        withClick ? click : undefined,
+        withFocus ? focus : undefined,
+        dismiss,
+        role,
+    ]);
+    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: className, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsx(FloatingPortal, { children: open && (jsxs("div", Object.assign({ className: classNameContainer, ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), styleVariables) }, getFloatingProps(), { children: [jsx(FloatingArrow, { ref: arrowRef, context: context, style: {
+                                fill: styleVariables.background,
+                            }, width: ARROW_WIDTH, height: ARROW_HEIGHT }), children] }))) })] }));
 }
 
-const LANG = liquidParser.parse('{{site.language}}');
-async function configureI8n(resources, _a = {}) {
-    var { lng = LANG, fallbackLng = 'es' } = _a, config = __rest(_a, ["lng", "fallbackLng"]);
-    return i18n
-        .use(initReactI18next)
-        .init(Object.assign({ resources,
-        lng, initImmediate: true, fallbackLng, interpolation: {
-            escapeValue: false,
-            prefix: '{',
-            suffix: '}',
-            // skipOnVariables: false,
-        } }, config))
-        .then((t) => t);
+function DToastContainer({ style, position = 'top-right', }) {
+    return (jsx(ToastContainer, { toastClassName: () => 'shadow-none p-0 cursor-default', position: position, autoClose: false, hideProgressBar: true, closeOnClick: false, closeButton: false, transition: Slide, style: style }));
 }
 
-export { DAlert, DBadge, DBoxFile, DButton, DCard, DCardAccount, DCardBody, DCardFooter, DCardHeader, DCarousel, DCarouselSlide, DChip, DCollapse, DCollapseIconText, DCurrencyText, DDatePicker, DFormikInput, DFormikInputCurrency, DFormikInputSelect, DIcon, DInput, DInputCheck, DInputCounter, DInputCurrency, DInputCurrencyBase, DInputPassword, DInputPin, DInputSearch, DInputSelect, DInputSwitch, DList, DListItem, DListItemMovement, DModal, DOffcanvas, DPaginator, DPermissionItem, DPopover, DProgress, DQuickActionButton, DQuickActionCheck, DQuickActionSelect, DQuickActionSwitch, DSkeleton, DStepper, DStepper$2 as DStepperDesktop, DStepper$1 as DStepperMobile, DTabContent, DTabs, DToastContainer, DTooltip, LiquidContext$1 as LiquidContext, LiquidContextProvider, MPermissionGroup, MSummaryCard, ModalContext, ModalContextProvider, OffcanvasContext, OffcanvasContextProvider, configureI8n as configureI18n, useFormatCurrency, useLiquidContext, useModalContext, useOffcanvasContext, useScreenshot, useScreenshotDownload, useScreenshotWebShare, useTabContext, useToast };
+export { DAlert, DBadge, DBoxFile, DButton, DCard, DCardAccount, DCardBody, DCardFooter, DCardHeader, DCarousel, DCarouselSlide, DChip, DCollapse, DCollapseIconText, DCurrencyText, DDatePicker, DFormikInput, DFormikInputCurrency, DFormikInputSelect, DIcon, DInput$1 as DInput, DInputCheck, DInputCounter, DInputCurrency, DInputCurrencyBase, DInputPassword, DInputPin, DInputSearch, DInputSelect, DInputSwitch, DList, DListItem, DListItemMovement, DModal, DModalBody, DModalFooter, DModalHeader, DOffcanvas, DOffcanvasBody, DOffcanvasFooter, DOffcanvasHeader, DPaginator, DPermissionGroup, DPermissionItem, DPopover, DProgress, DQuickActionButton, DQuickActionCheck, DQuickActionSelect, DQuickActionSwitch, DSkeleton, DStepper, DStepper$2 as DStepperDesktop, DStepper$1 as DStepperMobile, DSummaryCard, DTabContent, DTabs, DToastContainer, DTooltip, LiquidContext$1 as LiquidContext, LiquidContextProvider, ModalContext, ModalContextProvider, OffcanvasContext, OffcanvasContextProvider, configureI8n as configureI18n, formatCurrency, liquidParser, useFormatCurrency, useLiquidContext, useModalContext, useOffcanvasContext, useScreenshot, useScreenshotDownload, useScreenshotWebShare, useTabContext, useToast };
 //# sourceMappingURL=index.esm.js.map