@dynamic-framework/ui-react 1.1.5 → 1.2.1

package/dist/index.js

@@ -2,19 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const tslib = require('tslib');
 const jsxRuntime = require('react/jsx-runtime');
 const DatePicker = require('react-datepicker');
 const luxon = require('luxon');
-const es = require('date-fns/locale/es');
 const React = require('react');
-const ui = require('@dynamic-framework/ui');
-const ContentLoader = require('react-content-loader');
-const classnames = require('classnames');
-const reactToastify = require('react-toastify');
-require('react-toastify/dist/ReactToastify.css');
-const react = require('@floating-ui/react');
-const tslib = require('tslib');
-const formik = require('formik');
 const mAlert_js = require('@dynamic-framework/ui/components/m-alert.js');
 const mBadge_js = require('@dynamic-framework/ui/components/m-badge.js');
 const mButton_js = require('@dynamic-framework/ui/components/m-button.js');
@@ -36,7 +28,15 @@ const mQuickActionButton_js = require('@dynamic-framework/ui/components/m-quick-
 const mQuickActionCheck_js = require('@dynamic-framework/ui/components/m-quick-action-check.js');
 const mQuickActionSelect_js = require('@dynamic-framework/ui/components/m-quick-action-select.js');
 const mQuickActionSwitch_js = require('@dynamic-framework/ui/components/m-quick-action-switch.js');
+const ui = require('@dynamic-framework/ui');
+const ContentLoader = require('react-content-loader');
+const classNames = require('classnames');
+const reactToastify = require('react-toastify');
+require('react-toastify/dist/ReactToastify.css');
+const react = require('@floating-ui/react');
+const formik = require('formik');
 const reactDropzone = require('react-dropzone');
+const reactSplide = require('@splidejs/react-splide');
 const i18n = require('i18next');
 const reactI18next = require('react-i18next');
 const html2canvas = require('html2canvas');
@@ -45,10 +45,9 @@ const ReactDOM = require('react-dom');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 const DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
-const es__default = /*#__PURE__*/_interopDefaultLegacy(es);
 const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const ContentLoader__default = /*#__PURE__*/_interopDefaultLegacy(ContentLoader);
-const classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+const classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 const i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 const html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
 
@@ -288,7 +287,7 @@ function MCollapse({ id, className, Component, hasSeparator = false, defaultColl
     React.useEffect(() => {
         setToggle(defaultCollapsed);
     }, [defaultCollapsed]);
-    return (jsxRuntime.jsxs("div", Object.assign({ id: id, className: classnames__default["default"]('m-collapse collapse-container', className) }, { children: [jsxRuntime.jsxs("button", Object.assign({ className: "collapse-button", type: "button", onClick: onChangeCollapse }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "flex-grow-1" }, { children: Component })), jsxRuntime.jsx(MIcon, { color: `var(--${ui.PREFIX_BS}gray)`, size: `var(--${ui.PREFIX_BS}ref-fs-small)`, icon: toggle ? 'chevron-up' : 'chevron-down' })] })), toggle && (jsxRuntime.jsx("div", Object.assign({ className: classnames__default["default"]({
+    return (jsxRuntime.jsxs("div", Object.assign({ id: id, className: classNames__default["default"]('m-collapse collapse-container', className) }, { children: [jsxRuntime.jsxs("button", Object.assign({ className: "collapse-button", type: "button", onClick: onChangeCollapse }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "flex-grow-1" }, { children: Component })), jsxRuntime.jsx(MIcon, { color: `var(--${ui.PREFIX_BS}gray)`, size: `var(--${ui.PREFIX_BS}ref-fs-small)`, icon: toggle ? 'chevron-up' : 'chevron-down' })] })), toggle && (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]({
                     'collapse-body': true,
                 }), style: {
                     [`--${ui.PREFIX_BS}m-collapse-separator-display`]: hasSeparator ? 'block' : 'none',
@@ -312,7 +311,7 @@ function MSummaryCard({ title, description, icon, iconSize, iconTheme, Summary,
 }
 
 const LiquidContext = React.createContext({
-    language: 'en-US',
+    language: 'en',
     currency: {
         symbol: '$',
         precision: 2,
@@ -560,25 +559,59 @@ function useOffcanvasContext() {
     return context;
 }
 
-DatePicker.registerLocale('es', es__default["default"]);
-function MCalendar({ setDate, date, calendarContainer, inline = true, withPortal, minDate, showTimeInput, calendarStartDay, timeInputLabel, dateFormat, className, calendarClassName, selectsRange, selectsStart, selectsEnd, startDate, endDate, autoFocus, monthsShown, fixedHeight, }) {
+function MDatePickerTime(_a) {
+    var { value, onChange, mId, label } = _a, props = tslib.__rest(_a, ["value", "onChange", "mId", "label"]);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: "d-flex align-items-center gap-2 flex-column m-datepicker-time" }, { children: [label && (jsxRuntime.jsx("p", Object.assign({ className: "m-datepicker-time-label" }, { children: label }))), jsxRuntime.jsx(MInput, Object.assign({}, onChange && {
+                onMChange: (time) => onChange(time),
+            }, { type: "time", mId: mId, value: value }, props))] })));
+}
+
+function MDatePickerInput(_a, ref) {
+    var { value, onClick, mId, iconEnd } = _a, props = tslib.__rest(_a, ["value", "onClick", "mId", "iconEnd"]);
+    React.useImperativeHandle(ref, () => ({}), []);
+    return (jsxRuntime.jsx("div", Object.assign({ role: "button", onClick: onClick, onKeyDown: () => { }, tabIndex: -1 }, { children: jsxRuntime.jsx(MInput, Object.assign({ isReadOnly: true, type: "text", mId: mId, value: value, onMIconEndClick: onClick, iconEnd: iconEnd }, props)) })));
+}
+const MDatePickerInput$1 = React.forwardRef(MDatePickerInput);
+
+function MMonthPicker(_a) {
+    var { setDate, date } = _a, props = tslib.__rest(_a, ["setDate", "date"]);
     const dateJS = (value) => luxon.DateTime.fromISO(value).toJSDate();
     const { language } = useLiquidContext();
-    const lang = language === 'en' ? undefined : 'es';
-    return (jsxRuntime.jsx(DatePicker__default["default"], Object.assign({ selected: dateJS(date), onChange: (value) => {
-            if (Array.isArray(value)) {
-                const [start, end] = value;
-                setDate([
-                    start ? luxon.DateTime.fromJSDate(start).toISO() : null,
-                    end ? luxon.DateTime.fromJSDate(end).toISO() : null,
-                ]);
-            }
-            else {
-                setDate(value ? luxon.DateTime.fromJSDate(value).toISO() : null);
-            }
-        }, 
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        calendarContainer: calendarContainer, inline: inline, withPortal: withPortal, minDate: minDate ? dateJS(minDate) : undefined, showTimeInput: showTimeInput, calendarStartDay: calendarStartDay, timeInputLabel: timeInputLabel, dateFormat: dateFormat, className: className, calendarClassName: calendarClassName, selectsRange: selectsRange, selectsEnd: selectsEnd, selectsStart: selectsStart, startDate: startDate, endDate: endDate, autoFocus: autoFocus, monthsShown: monthsShown, fixedHeight: fixedHeight }, lang && { locale: lang })));
+    const lang = language || 'en';
+    return (jsxRuntime.jsx(DatePicker__default["default"], Object.assign({ showMonthYearPicker: true, selected: dateJS(date), calendarClassName: "m-month-picker", onChange: (value) => {
+            setDate(value);
+        }, customInput: (jsxRuntime.jsx("p", Object.assign({ className: "fw-bold text-capitalize" }, { children: luxon.DateTime.fromISO(date).setLocale(lang).toFormat('MMMM yyyy') }))), renderCustomHeader: ({ monthDate, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, }) => (jsxRuntime.jsxs("div", Object.assign({ className: "d-flex align-items-center justify-content-between gap-4 fs-6 bg-dark" }, { children: [jsxRuntime.jsx(MButton, { iconStart: "chevron-left", size: "sm", variant: "link", theme: "light", onMClick: decreaseYear, isDisabled: prevYearButtonDisabled }), jsxRuntime.jsx("p", Object.assign({ className: "fs-6 fw-bold" }, { children: monthDate.getFullYear() })), jsxRuntime.jsx(MButton, { iconStart: "chevron-right", size: "sm", variant: "link", theme: "light", onMClick: increaseYear, isDisabled: nextYearButtonDisabled })] }))) }, props)));
+}
+
+function MDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, decreaseMonthIcon, increaseMonthIcon, iconSize, buttonVariant, buttonTheme, }) {
+    const { language } = useLiquidContext();
+    const lang = language || 'en';
+    return (jsxRuntime.jsxs("div", Object.assign({ className: "d-flex align-items-center justify-content-between m-datepicker-header" }, { children: [jsxRuntime.jsx(MButton, { iconStart: decreaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onMClick: decreaseMonth, isDisabled: prevMonthButtonDisabled }), jsxRuntime.jsx(MMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, { date: monthDate.toISOString(), setDate: (value) => {
+                    if (value) {
+                        changeMonth(luxon.DateTime.fromJSDate(value).month - 1);
+                        changeYear(luxon.DateTime.fromJSDate(value).year);
+                    }
+                } }, lang && { locale: lang })), jsxRuntime.jsx(MButton, { iconStart: increaseMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onMClick: increaseMonth, isDisabled: nextMonthButtonDisabled })] })));
+}
+
+function MDatePicker(_a) {
+    var { setDate, date, selectsRange, withMonthSelector, inputLabel, inputIcon = 'calendar', inputId = 'input-calendar', timeId = 'input-time', timeLabel, headerDecreaseMonthIcon = 'chevron-left', headerIncreaseMonthIcon = 'chevron-right', headerIconSize = 'sm', headerButtonVariant = 'link', headerButtonTheme = 'dark' } = _a, props = tslib.__rest(_a, ["setDate", "date", "selectsRange", "withMonthSelector", "inputLabel", "inputIcon", "inputId", "timeId", "timeLabel", "headerDecreaseMonthIcon", "headerIncreaseMonthIcon", "headerIconSize", "headerButtonVariant", "headerButtonTheme"]);
+    const dateJS = (value) => luxon.DateTime.fromISO(value).toJSDate();
+    const { language } = useLiquidContext();
+    const lang = language || 'en';
+    // eslint-disable-next-line react/no-unstable-nested-components
+    const InputPicker = React.forwardRef(({ value, onClick }, ref) => (jsxRuntime.jsx(MDatePickerInput$1, { label: inputLabel, mId: inputId, iconEnd: inputIcon, value: value, onClick: onClick, ref: ref })));
+    const TimeInputPicker = React.useCallback(({ value, onChange }) => (jsxRuntime.jsx(MDatePickerTime, { onChange: onChange, value: value, label: timeLabel, mId: timeId })), [timeLabel, timeId]);
+    const DatePickerHeader = React.useCallback((headerProps) => (jsxRuntime.jsx(MDatePickerHeader, Object.assign({}, headerProps, { decreaseMonthIcon: headerDecreaseMonthIcon, increaseMonthIcon: headerIncreaseMonthIcon, iconSize: headerIconSize, buttonVariant: headerButtonVariant, buttonTheme: headerButtonTheme, withMonthSelector: !!withMonthSelector }))), [headerButtonTheme,
+        headerButtonVariant,
+        headerDecreaseMonthIcon,
+        headerIconSize,
+        headerIncreaseMonthIcon,
+        withMonthSelector,
+    ]);
+    return (jsxRuntime.jsx(DatePicker__default["default"], Object.assign({ selected: dateJS(date), calendarClassName: "m-date-picker", onChange: (value) => {
+            setDate(value);
+        }, renderCustomHeader: (headerProps) => jsxRuntime.jsx(DatePickerHeader, Object.assign({}, headerProps)), customInput: jsxRuntime.jsx(InputPicker, {}), customTimeInput: jsxRuntime.jsx(TimeInputPicker, {}), selectsRange: selectsRange }, lang && { locale: lang }, props)));
 }
 
 function MSkeleton({ speed = 2, viewBox, backgroundColor, foregroundColor, children, }) {
@@ -615,10 +648,10 @@ function MTabs({ children, defaultSelected, onChange, options, className, isVert
     const value = React.useMemo(() => ({
         isSelected,
     }), [isSelected]);
-    return (jsxRuntime.jsx(TabContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsxs("div", Object.assign({ className: classnames__default["default"]({
+    return (jsxRuntime.jsx(TabContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsxs("div", Object.assign({ className: classNames__default["default"]({
                 'm-tabs': true,
                 'm-tabs-vertical': isVertical,
-            }) }, { children: [jsxRuntime.jsx("nav", Object.assign({ className: "nav" }, { children: options.map((option) => (jsxRuntime.jsx("button", Object.assign({ id: `${option.tab}Tab`, className: classnames__default["default"]('nav-link', {
+            }) }, { children: [jsxRuntime.jsx("nav", Object.assign({ className: "nav" }, { children: options.map((option) => (jsxRuntime.jsx("button", Object.assign({ id: `${option.tab}Tab`, className: classNames__default["default"]('nav-link', {
                             active: option.tab === selected,
                         }, className), type: "button", role: "tab", "aria-controls": `${option.tab}Pane`, "aria-selected": option.tab === selected, disabled: option.isDisabled, onClick: () => onSelect(option) }, { children: option.label }), option.label))) })), jsxRuntime.jsx("div", Object.assign({ className: "tab-content" }, { children: children }))] })) })));
 }
@@ -638,7 +671,7 @@ function MTabContent({ tab, children }) {
     return (jsxRuntime.jsx("div", Object.assign({ className: "tab-pane fade show active", id: `${tab}Pane`, role: "tabpanel", tabIndex: 0, "aria-labelledby": `${tab}Tab` }, { children: children })));
 }
 
-function MToastContainer({ style, position = 'bottom-center', }) {
+function MToastContainer({ style, position = 'top-right', }) {
     return (jsxRuntime.jsx(reactToastify.ToastContainer, { toastClassName: () => 'shadow-none p-0 cursor-default', position: position, autoClose: false, hideProgressBar: true, closeOnClick: false, closeButton: false, transition: reactToastify.Slide, style: style }));
 }
 
@@ -689,9 +722,9 @@ function MCurrencyText({ value, className, }) {
 }
 
 function MFormikInput(_a) {
-    var { name } = _a, props = tslib.__rest(_a, ["name"]);
+    var { name, hint } = _a, props = tslib.__rest(_a, ["name", "hint"]);
     const [field, meta, helpers] = formik.useField(name);
-    return (jsxRuntime.jsx(MInput, Object.assign({}, props, { name: field.name, value: field.value, onMChange: ({ detail }) => helpers.setValue(detail), onMBlur: ({ detail }) => field.onBlur(detail), isInvalid: !!meta.error })));
+    return (jsxRuntime.jsx(MInput, Object.assign({}, props, { name: field.name, value: field.value, onMChange: ({ detail }) => helpers.setValue(detail), onMBlur: ({ detail }) => field.onBlur(detail), isInvalid: !!meta.error, hint: meta.error || hint })));
 }
 
 function MFormikInputSelect(_a) {
@@ -759,40 +792,70 @@ function MTooltip({ classNameContainer, className, offSet = ARROW_HEIGHT + GAP,
 }
 
 function MInputCurrency(_a) {
-    var { onChange } = _a, otherProps = tslib.__rest(_a, ["onChange"]);
+    var { onChange, onBlur, onFocus } = _a, otherProps = tslib.__rest(_a, ["onChange", "onBlur", "onFocus"]);
     const { currency } = useLiquidContext();
-    return (jsxRuntime.jsx(MInputCurrencyBase, Object.assign({ currencyOptions: currency, onMChange: ({ detail }) => onChange(detail) }, otherProps)));
+    return (jsxRuntime.jsx(MInputCurrencyBase, Object.assign({ currencyOptions: currency, onMChange: ({ detail }) => onChange(detail) }, onBlur && {
+        onMBlur: ({ detail }) => onBlur(detail),
+    }, onFocus && {
+        onMFocus: ({ detail }) => onFocus(detail),
+    }, otherProps)));
 }
 
 function MBoxFile(_a) {
     var { icon = 'cloud-upload', iconFamilyClass, iconFamilyPrefix, isDisabled = false, children } = _a, dropzoneOptions = tslib.__rest(_a, ["icon", "iconFamilyClass", "iconFamilyPrefix", "isDisabled", "children"]);
     const { acceptedFiles, getRootProps, getInputProps, } = reactDropzone.useDropzone(Object.assign({ disabled: isDisabled }, dropzoneOptions));
-    return (jsxRuntime.jsxs("section", Object.assign({ className: classnames__default["default"]('m-box-file', {
+    return (jsxRuntime.jsxs("section", Object.assign({ className: classNames__default["default"]('m-box-file', {
             'm-box-file-selected': !!acceptedFiles.length,
         }) }, { children: [jsxRuntime.jsxs("div", Object.assign({}, getRootProps({
-                className: classnames__default["default"]('m-box-file-dropzone', {
+                className: classNames__default["default"]('m-box-file-dropzone', {
                     disabled: isDisabled,
                 }),
             }), { children: [jsxRuntime.jsx("input", Object.assign({}, getInputProps())), jsxRuntime.jsx(MIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }), jsxRuntime.jsx("div", Object.assign({ className: "m-box-content" }, { children: children }))] })), !!acceptedFiles.length && (jsxRuntime.jsx("aside", Object.assign({ className: "m-box-files" }, { children: acceptedFiles.map((file) => (jsxRuntime.jsx("div", Object.assign({ className: "m-box-files-text" }, { children: `${file.name} - ${file.size} bytes` }), file.name))) })))] })));
 }
 
-const LANG = ui.liquidParser.parse('{{site.language}}');
-async function configureI8n(resources, _a = {}) {
-    var { lng = LANG, fallbackLng = 'es' } = _a, config = tslib.__rest(_a, ["lng", "fallbackLng"]);
-    return i18n__default["default"]
-        .use(reactI18next.initReactI18next)
-        .init(Object.assign({ resources,
-        lng, initImmediate: true, fallbackLng, interpolation: {
-            escapeValue: false,
-            prefix: '{',
-            suffix: '}',
-            // skipOnVariables: false,
-        } }, config))
-        .then((t) => t);
+function MCarousel(_a) {
+    var { children, className, options } = _a, props = tslib.__rest(_a, ["children", "className", "options"]);
+    return (jsxRuntime.jsx(reactSplide.Splide, Object.assign({ className: classNames__default["default"]('m-carousel', className), options: Object.assign(Object.assign({}, options), { classes: {
+                // Arrows
+                arrows: 'splide__arrows m-carousel-arrows',
+                arrow: 'splide__arrow m-carousel-arrow',
+                prev: 'splide__arrow--prev m-carousel-arrow-prev',
+                next: 'splide__arrow--next m-carousel-arrow-next',
+                // Paginator
+                pagination: 'splide__pagination m-carousel-pagination',
+                page: 'splide__pagination__page m-carousel-pagination-page',
+            } }) }, props, { children: children })));
+}
+
+function MCarouselSlide(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(reactSplide.SplideSlide, Object.assign({ className: classNames__default["default"]('m-carousel-slide', className) }, props)));
+}
+
+function MList({ children, className, isFlush = false, isNumbered = false, isHorizontal = false, horizontalBreakpoint, }) {
+    if (isFlush && isHorizontal) {
+        throw new Error("Horizontal and Flush props don't work together");
+    }
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]('m-list list-group', {
+            'list-group-flush': isFlush && !isHorizontal,
+            'list-group-numbered': isNumbered,
+            'list-group-horizontal': isHorizontal && !horizontalBreakpoint,
+        }, (isHorizontal && horizontalBreakpoint) && `list-group-horizontal-${horizontalBreakpoint}`, className) }, { children: children })));
+}
+
+function MListItem({ children, className, isActive = false, isDisabled = false, theme, onMClick, }) {
+    const Tag = React.useMemo(() => (onMClick ? 'button' : 'div'), [onMClick]);
+    return (jsxRuntime.jsx(Tag, Object.assign({}, Tag === 'button' && {
+        onClick: onMClick,
+        type: 'button',
+    }, { className: classNames__default["default"]('m-list-item list-group-item list-group-item-action', theme ? `list-group-item-${theme}` : undefined, className, {
+            active: isActive,
+            disabled: isDisabled,
+        }) }, isActive && { 'aria-current': true }, { children: children })));
 }
 
 function useToast() {
-    const toast = React.useCallback((message, { position = 'bottom-center', type = 'info', showClose = true, autoClose = false, } = {}) => {
+    const toast = React.useCallback((message, { position = 'top-right', type = 'info', showClose = true, autoClose = false, } = {}) => {
         reactToastify.toast(({ closeToast }) => (jsxRuntime.jsx(MAlert, Object.assign({ type: type, showClose: showClose, onMClose: closeToast }, { children: message }))), {
             transition: reactToastify.Slide,
             position,
@@ -867,18 +930,103 @@ function useScreenshotWebShare() {
     };
 }
 
+function MListItemMovement(_a) {
+    var { description, date, amount, classNameMovement } = _a, props = tslib.__rest(_a, ["description", "date", "amount", "classNameMovement"]);
+    const { format } = useFormatCurrency();
+    const value = React.useMemo(() => {
+        const valueFormatted = format(amount);
+        if (amount > 0) {
+            return {
+                theme: 'text-success',
+                valueFormatted,
+            };
+        }
+        return {
+            theme: 'text-danger',
+            valueFormatted,
+        };
+    }, [format, amount]);
+    return (jsxRuntime.jsx(MListItem, Object.assign({}, props, { children: jsxRuntime.jsxs("div", Object.assign({ className: classNames__default["default"]('m-list-item-movement', 'd-flex justify-content-between align-items-center p-3 gap-3', classNameMovement) }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "d-flex flex-column gap-1" }, { children: [jsxRuntime.jsx("span", Object.assign({ className: "fs-6" }, { children: description })), jsxRuntime.jsx("span", Object.assign({ className: "sp text-gray-700" }, { children: date }))] })), jsxRuntime.jsx("span", Object.assign({ className: classNames__default["default"]('fs-6', value.theme) }, { children: value.valueFormatted }))] })) })));
+}
+
+function MStepper({ options, currentStep, successIcon = 'check', isVertical = false, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]({
+            'm-stepper': true,
+            'is-vertical': isVertical,
+        }) }, { children: options.map(({ label, value }) => (jsxRuntime.jsxs("div", Object.assign({ className: "m-step" }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "m-step-value" }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]({
+                            'm-step-icon-container': true,
+                            'm-step-check': value < currentStep,
+                            'm-step-current': value === currentStep,
+                        }) }, { children: value < currentStep
+                            ? (jsxRuntime.jsx(MIcon, { icon: successIcon, innerClass: "m-step-icon" }))
+                            : value })) })), jsxRuntime.jsx("div", Object.assign({ className: "m-step-label" }, { children: label }))] }), label))) })));
+}
+
+function MFormikInputCurrency(_a) {
+    var { name, hint } = _a, props = tslib.__rest(_a, ["name", "hint"]);
+    const [field, meta, helpers] = formik.useField(name);
+    return (jsxRuntime.jsx(MInputCurrency, Object.assign({}, props, { name: field.name, value: field.value, onChange: (value) => helpers.setValue(value), onMBlur: ({ detail }) => field.onBlur(detail), isInvalid: !!meta.error, hint: meta.error || hint })));
+}
+
+function MCard({ className, style, children, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ style: style, className: classNames__default["default"]('card', className) }, { children: children })));
+}
+
+function MCardBody({ className, children, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]('card-body', className) }, { children: children })));
+}
+
+function MCardAccount({ className, icon, theme, name, number, balance, balanceText, onClick, onClickText, }) {
+    return (jsxRuntime.jsx(MCard, Object.assign({ className: classNames__default["default"]('m-card-account', className) }, { children: jsxRuntime.jsxs(MCardBody, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "d-flex gap-3 align-items-center" }, { children: [jsxRuntime.jsx(MIcon, { icon: icon, hasCircle: true, theme: theme, size: "1.5rem" }), jsxRuntime.jsxs("div", Object.assign({ className: "d-block flex-grow-1" }, { children: [jsxRuntime.jsx("p", Object.assign({ className: "text-gray-700" }, { children: name })), jsxRuntime.jsx("small", Object.assign({ className: "text-gray" }, { children: number }))] }))] })), jsxRuntime.jsxs("div", Object.assign({ className: "d-block" }, { children: [jsxRuntime.jsx("p", Object.assign({ className: "fw-bold fs-6 text-body" }, { children: balance })), jsxRuntime.jsx("small", Object.assign({ className: "text-gray-700" }, { children: balanceText }))] })), jsxRuntime.jsx("div", Object.assign({ className: "d-flex justify-content-end" }, { children: jsxRuntime.jsx(MButton, { text: onClickText, variant: "link", size: "sm", theme: "secondary", iconEnd: "chevron-right", onMClick: onClick }) }))] }) })));
+}
+
+function MCardHeader({ className, children, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]('card-header', className) }, { children: children })));
+}
+
+function MCardFooter({ className, children, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames__default["default"]('card-footer', className) }, { children: children })));
+}
+
+const LANG = ui.liquidParser.parse('{{site.language}}');
+async function configureI8n(resources, _a = {}) {
+    var { lng = LANG, fallbackLng = 'es' } = _a, config = tslib.__rest(_a, ["lng", "fallbackLng"]);
+    return i18n__default["default"]
+        .use(reactI18next.initReactI18next)
+        .init(Object.assign({ resources,
+        lng, initImmediate: true, fallbackLng, interpolation: {
+            escapeValue: false,
+            prefix: '{',
+            suffix: '}',
+            // skipOnVariables: false,
+        } }, config))
+        .then((t) => t);
+}
+
+Object.defineProperty(exports, 'liquidParser', {
+    enumerable: true,
+    get: function () { return ui.liquidParser; }
+});
 exports.LiquidContext = LiquidContext$1;
 exports.LiquidContextProvider = LiquidContextProvider;
 exports.MAlert = MAlert;
 exports.MBadge = MBadge;
 exports.MBoxFile = MBoxFile;
 exports.MButton = MButton;
-exports.MCalendar = MCalendar;
+exports.MCard = MCard;
+exports.MCardAccount = MCardAccount;
+exports.MCardBody = MCardBody;
+exports.MCardFooter = MCardFooter;
+exports.MCardHeader = MCardHeader;
+exports.MCarousel = MCarousel;
+exports.MCarouselSlide = MCarouselSlide;
 exports.MChip = MChip;
 exports.MCollapse = MCollapse;
 exports.MCollapseIconText = MCollapseIconText;
 exports.MCurrencyText = MCurrencyText;
+exports.MDatePicker = MDatePicker;
 exports.MFormikInput = MFormikInput;
+exports.MFormikInputCurrency = MFormikInputCurrency;
 exports.MFormikInputSelect = MFormikInputSelect;
 exports.MIcon = MIcon;
 exports.MInput = MInput;
@@ -891,6 +1039,9 @@ exports.MInputPin = MInputPin;
 exports.MInputSearch = MInputSearch;
 exports.MInputSelect = MInputSelect;
 exports.MInputSwitch = MInputSwitch;
+exports.MList = MList;
+exports.MListItem = MListItem;
+exports.MListItemMovement = MListItemMovement;
 exports.MModal = MModal;
 exports.MOffcanvas = MOffcanvas;
 exports.MPermissionGroup = MPermissionGroup;
@@ -902,6 +1053,7 @@ exports.MQuickActionCheck = MQuickActionCheck;
 exports.MQuickActionSelect = MQuickActionSelect;
 exports.MQuickActionSwitch = MQuickActionSwitch;
 exports.MSkeleton = MSkeleton;
+exports.MStepper = MStepper;
 exports.MSummaryCard = MSummaryCard;
 exports.MTabContent = MTabContent;
 exports.MTabs = MTabs;