@beweco/aurora-ui 0.1.21 → 0.1.22

package/dist/index.cjs.js

@@ -26,18 +26,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return __assign$1.apply(this, arguments);
 };
 
-function __rest(s, e) {
+function __rest$1(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -87,7 +87,7 @@ function __generator(thisArg, body) {
     }
 }
 
-function __spreadArray(to, from, pack) {
+function __spreadArray$1(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -119,42 +119,42 @@ exports.HolidayType = void 0;
  * - Radius: md (por defecto)
  * - isIconOnly: True, False
  */
-var Button = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
-    return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
+var Button$1 = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest$1(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
+    return (jsxRuntime.jsx(react.Button, __assign$1({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
 };
 
 var DatePicker = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest$1(_a, ["label", "id", "size"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsx(react.DatePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
+    return (jsxRuntime.jsx(react.DatePicker, __assign$1({ label: label, size: size, labelPlacement: "outside", classNames: {
             label: "text-sm font-medium text-default-600",
             segment: "focus:bg-primary-50",
         }, id: autoId }, props)));
 };
 
 var DateRangePicker = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest$1(_a, ["label", "id", "size"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsx(react.DateRangePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
+    return (jsxRuntime.jsx(react.DateRangePicker, __assign$1({ label: label, size: size, labelPlacement: "outside", classNames: {
             label: "text-sm font-medium text-default-600",
             segment: "focus:bg-primary-50",
         } }, props, { id: autoId })));
 };
 
-var sizeMap = {
+var sizeMap$1 = {
     sm: "16px",
     md: "20px",
     lg: "24px",
     xl: "32px",
 };
-var IconComponent = function (_a) {
+var IconComponent$1 = function (_a) {
     var _b;
-    var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
-    var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
-    return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
+    var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest$1(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
+    var iconSize = (_b = sizeMap$1[size]) !== null && _b !== void 0 ? _b : sizeMap$1.md;
+    return (jsxRuntime.jsx("span", __assign$1({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
 };
 
 /**
@@ -167,17 +167,17 @@ var IconComponent = function (_a) {
  * - Radius configurable
  */
 var Input = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest$1(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
     var generatedId = React.useId();
     var inputId = id || generatedId;
-    return (jsxRuntime.jsx(react.Input, __assign({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
+    return (jsxRuntime.jsx(react.Input, __assign$1({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
             label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
             inputWrapper: "focus-within:!border-primary-500",
             errorMessage: "text-left",
         } })));
 };
 
-var defaultTranslations$9 = {
+var defaultTranslations$a = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -201,7 +201,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 var AddHolidayForm = function (_a) {
     var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
-    var t = __assign(__assign({}, defaultTranslations$9), translations);
+    var t = __assign$1(__assign$1({}, defaultTranslations$a), translations);
     var _b = React.useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
     /**
      * A boolean flag that determines if a date has been set.
@@ -222,7 +222,7 @@ var AddHolidayForm = function (_a) {
      * @param date The selected date.
      */
     var handleDateChange = React.useCallback(function (date) {
-        setNewHoliday(function (prev) { return (__assign(__assign({}, prev), { startDate: date, endDate: null })); });
+        setNewHoliday(function (prev) { return (__assign$1(__assign$1({}, prev), { startDate: date, endDate: null })); });
     }, []);
     /**
      * Handles changes to the date range picker.
@@ -231,7 +231,7 @@ var AddHolidayForm = function (_a) {
     var handleDateRangeChange = React.useCallback(function (range) {
         setNewHoliday(function (prev) {
             var _a, _b;
-            return (__assign(__assign({}, prev), { startDate: (_a = range === null || range === void 0 ? void 0 : range.start) !== null && _a !== void 0 ? _a : null, endDate: (_b = range === null || range === void 0 ? void 0 : range.end) !== null && _b !== void 0 ? _b : null }));
+            return (__assign$1(__assign$1({}, prev), { startDate: (_a = range === null || range === void 0 ? void 0 : range.start) !== null && _a !== void 0 ? _a : null, endDate: (_b = range === null || range === void 0 ? void 0 : range.end) !== null && _b !== void 0 ? _b : null }));
         });
     }, []);
     /**
@@ -252,26 +252,26 @@ var AddHolidayForm = function (_a) {
         });
         resetForm();
     }, [newHoliday, onAddHoliday, resetForm, isDateSet]);
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [jsxRuntime.jsx("h3", { className: "font-semibold text-small text-foreground", children: t.addHolidayTitle }), jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: newHoliday.type, onValueChange: function (value) {
-                            return setNewHoliday(__assign(__assign({}, INITIAL_HOLIDAY_STATE), { type: value }));
-                        } }, radioGroupProps, { children: [jsxRuntime.jsx(react.Radio, { value: exports.HolidayType.SingleDay, children: t.dayOption }), jsxRuntime.jsx(react.Radio, { value: exports.HolidayType.DateRange, children: t.dateRangeOption })] })), newHoliday.type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(DateRangePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-xs", value: newHoliday.startDate && newHoliday.endDate
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [jsxRuntime.jsx("h3", { className: "font-semibold text-small text-foreground", children: t.addHolidayTitle }), jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, __assign$1({ color: "primary", orientation: "horizontal", size: "sm", value: newHoliday.type, onValueChange: function (value) {
+                            return setNewHoliday(__assign$1(__assign$1({}, INITIAL_HOLIDAY_STATE), { type: value }));
+                        } }, radioGroupProps, { children: [jsxRuntime.jsx(react.Radio, { value: exports.HolidayType.SingleDay, children: t.dayOption }), jsxRuntime.jsx(react.Radio, { value: exports.HolidayType.DateRange, children: t.dateRangeOption })] })), newHoliday.type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(DateRangePicker, __assign$1({ className: "xs:w-full md:flex-1 md:max-w-xs", value: newHoliday.startDate && newHoliday.endDate
                             ? { start: newHoliday.startDate, end: newHoliday.endDate }
-                            : null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsxRuntime.jsx(DatePicker, { className: "xs:w-full md:flex-1 md:max-w-40", value: newHoliday.startDate, onChange: handleDateChange, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }))] }), jsxRuntime.jsx(Input, { label: t.optionalTitle, placeholder: t.titlePlaceholder, className: "w-full", value: newHoliday.title, onValueChange: function (value) {
-                    setNewHoliday(function (prev) { return (__assign(__assign({}, prev), { title: value })); });
-                }, "aria-label": t.optionalTitle }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(Button, __assign({ size: "sm", fullWidth: true, variant: "flat", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-outline" }), onPress: handleAddHoliday, isDisabled: !isDateSet }, buttonProps, { children: t.addButton })) })] }));
+                            : null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsxRuntime.jsx(DatePicker, { className: "xs:w-full md:flex-1 md:max-w-40", value: newHoliday.startDate, onChange: handleDateChange, endContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }))] }), jsxRuntime.jsx(Input, { label: t.optionalTitle, placeholder: t.titlePlaceholder, className: "w-full", value: newHoliday.title, onValueChange: function (value) {
+                    setNewHoliday(function (prev) { return (__assign$1(__assign$1({}, prev), { title: value })); });
+                }, "aria-label": t.optionalTitle }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(Button$1, __assign$1({ size: "sm", fullWidth: true, variant: "flat", startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:add-circle-outline" }), onPress: handleAddHoliday, isDisabled: !isDateSet }, buttonProps, { children: t.addButton })) })] }));
 };
 
 var H2 = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsxRuntime.jsx("h2", __assign({ className: react.cn("text-lg font-semibold", className) }, props, { children: children })));
+    var children = _a.children, className = _a.className, props = __rest$1(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h2", __assign$1({ className: react.cn("text-lg font-semibold", className) }, props, { children: children })));
 };
 
 var P = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
+    var children = _a.children, className = _a.className, props = __rest$1(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("p", __assign$1({ className: react.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
 };
 
-var defaultTranslations$8 = {
+var defaultTranslations$9 = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -324,8 +324,8 @@ var formatMonth = function (month) {
  */
 var AnalyticsCard = function (_a) {
     var _b, _c;
-    var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign(__assign({}, defaultTranslations$8), translations);
+    var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest$1(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
+    var t = __assign$1(__assign$1({}, defaultTranslations$9), translations);
     var _h = React.useState((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ""), activeChart = _h[0], setActiveChart = _h[1];
     var activeChartData = React.useMemo(function () {
         var _a;
@@ -352,7 +352,7 @@ var AnalyticsCard = function (_a) {
     var handleTimePeriodChange = function (period) {
         onTimePeriodChange === null || onTimePeriodChange === void 0 ? void 0 : onTimePeriodChange(period);
     };
-    return (jsxRuntime.jsx(react.Card, __assign({ as: "dl", className: "dark:border-default-100 border border-transparent" }, props, { children: jsxRuntime.jsxs("section", { className: "flex flex-col flex-nowrap", children: [jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-y-2 p-6", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-0", children: [jsxRuntime.jsx(H2, { children: t.title }), jsxRuntime.jsx(P, { children: t.description })] }), jsxRuntime.jsx(react.Spacer, { y: 2 }), showTimePeriods && (jsxRuntime.jsxs(react.Tabs, { size: "md", className: " self-end", onSelectionChange: function (key) { return handleTimePeriodChange(String(key)); }, children: [jsxRuntime.jsx(react.Tab, { title: t.months6 }, "6-months"), jsxRuntime.jsx(react.Tab, { title: t.months3 }, "3-months"), jsxRuntime.jsx(react.Tab, { title: t.days30 }, "30-days"), jsxRuntime.jsx(react.Tab, { title: t.days7 }, "7-days"), jsxRuntime.jsx(react.Tab, { title: t.hours24 }, "24-hours")] })), showMetricCards && (jsxRuntime.jsx("div", { className: "mt-2 flex w-full items-center", children: jsxRuntime.jsx("div", { className: "-my-3 flex w-full max-w-[800px] items-center gap-x-3 overflow-x-auto py-3", children: data.map(function (_a) {
+    return (jsxRuntime.jsx(react.Card, __assign$1({ as: "dl", className: "dark:border-default-100 border border-transparent" }, props, { children: jsxRuntime.jsxs("section", { className: "flex flex-col flex-nowrap", children: [jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-y-2 p-6", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-0", children: [jsxRuntime.jsx(H2, { children: t.title }), jsxRuntime.jsx(P, { children: t.description })] }), jsxRuntime.jsx(react.Spacer, { y: 2 }), showTimePeriods && (jsxRuntime.jsxs(react.Tabs, { size: "md", className: " self-end", onSelectionChange: function (key) { return handleTimePeriodChange(String(key)); }, children: [jsxRuntime.jsx(react.Tab, { title: t.months6 }, "6-months"), jsxRuntime.jsx(react.Tab, { title: t.months3 }, "3-months"), jsxRuntime.jsx(react.Tab, { title: t.days30 }, "30-days"), jsxRuntime.jsx(react.Tab, { title: t.days7 }, "7-days"), jsxRuntime.jsx(react.Tab, { title: t.hours24 }, "24-hours")] })), showMetricCards && (jsxRuntime.jsx("div", { className: "mt-2 flex w-full items-center", children: jsxRuntime.jsx("div", { className: "-my-3 flex w-full max-w-[800px] items-center gap-x-3 overflow-x-auto py-3", children: data.map(function (_a) {
                                         var key = _a.key, change = _a.change, changeType = _a.changeType, type = _a.type, value = _a.value, title = _a.title;
                                         return (jsxRuntime.jsxs("button", { type: "button", className: react.cn("rounded-medium flex w-full flex-col gap-2 p-3 transition-colors", {
                                                 "bg-default-100": activeChart === key,
@@ -364,7 +364,7 @@ var AnalyticsCard = function (_a) {
                                                                 ? "success"
                                                                 : changeType === "negative"
                                                                     ? "danger"
-                                                                    : "default", radius: "md", size: "sm", startContent: changeType === "positive" ? (jsxRuntime.jsx(IconComponent, { icon: "solar:arrow-right-up-linear", size: "sm" })) : changeType === "negative" ? (jsxRuntime.jsx(IconComponent, { icon: "solar:arrow-right-down-linear", size: "sm" })) : (jsxRuntime.jsx(IconComponent, { icon: "solar:arrow-right-linear", size: "sm" })), variant: "bordered", children: jsxRuntime.jsx("span", { children: change }) })] })] }, key));
+                                                                    : "default", radius: "md", size: "sm", startContent: changeType === "positive" ? (jsxRuntime.jsx(IconComponent$1, { icon: "solar:arrow-right-up-linear", size: "sm" })) : changeType === "negative" ? (jsxRuntime.jsx(IconComponent$1, { icon: "solar:arrow-right-down-linear", size: "sm" })) : (jsxRuntime.jsx(IconComponent$1, { icon: "solar:arrow-right-linear", size: "sm" })), variant: "bordered", children: jsxRuntime.jsx("span", { children: change }) })] })] }, key));
                                     }) }) }))] }) }), jsxRuntime.jsx(recharts.ResponsiveContainer, { className: "min-h-[300px] [&_.recharts-surface]:outline-hidden", height: "100%", width: "100%", children: jsxRuntime.jsxs(recharts.AreaChart, { accessibilityLayer: true, data: chartData, height: 300, margin: {
                             left: 0,
                             right: 0,
@@ -392,7 +392,7 @@ var AnalyticsCard = function (_a) {
                                     r: 4,
                                 }, animationDuration: 1000, animationEasing: "ease", dataKey: "value", fill: "url(#colorGradient)", stroke: "hsl(var(--heroui-".concat(color, "))"), strokeWidth: 2, type: "monotone" })] }) }), showDropdownMenu && (jsxRuntime.jsxs(react.Dropdown, { classNames: {
                         content: "min-w-[120px]",
-                    }, placement: "bottom-end", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, className: "absolute top-2 right-2 w-auto rounded-full", size: "lg", variant: "bordered", children: jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", size: "sm" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { itemClasses: {
+                    }, placement: "bottom-end", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, className: "absolute top-2 right-2 w-auto rounded-full", size: "lg", variant: "bordered", children: jsxRuntime.jsx(IconComponent$1, { icon: "solar:menu-dots-bold", size: "sm" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { itemClasses: {
                                 title: "text-tiny",
                             }, variant: "bordered", onAction: function (key) { return handleMenuAction(String(key)); }, children: [jsxRuntime.jsx(react.DropdownItem, { children: t.viewDetails }, "view-details"), jsxRuntime.jsx(react.DropdownItem, { children: t.exportData }, "export-data"), jsxRuntime.jsx(react.DropdownItem, { children: t.setAlert }, "set-alert")] })] }))] }) })));
 };
@@ -407,10 +407,10 @@ var AnalyticsCard = function (_a) {
  * - Size: sm, md, lg (configurable)
  */
 var AuraAutocomplete = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, props = __rest(_a, ["label", "id", "size", "variant", "radius"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, props = __rest$1(_a, ["label", "id", "size", "variant", "radius"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, classNames: {
+    return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign$1({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, classNames: {
                     base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500",
                     popoverContent: "[&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500",
                 } }))] }));
@@ -432,7 +432,7 @@ var useThemeContext = function () {
     return context;
 };
 
-var themeColors = {
+var themeColors$1 = {
     "blue-light": {
         extend: "light",
         colors: {
@@ -922,198 +922,1362 @@ var themeColors = {
     },
 };
 
-var ColorSelector = function (_a) {
-    var selectedColor = _a.selectedColor, onColorChange = _a.onColorChange;
-    var mode = useThemeContext().mode;
-    /**
-     * Filters and maps the available theme colors to the current theme mode (light/dark).
-     * Each color option contains:
-     * - value: the theme name (e.g., "blue-light")
-     * - label: the base color name (e.g., "blue")
-     * - color: the primary color hex value
-     */
-    var colorOptions = Object.entries(themeColors)
-        .filter(function (_a) {
-        var themeData = _a[1];
-        var themeMode = themeData.extend;
-        return mode === "light" ? themeMode === "light" : themeMode === "dark";
-    })
-        .map(function (_a) {
-        var themeName = _a[0], theme = _a[1];
-        return ({
-            value: themeName,
-            label: themeName.split("-")[0],
-            color: theme.colors.primary.DEFAULT,
-        });
-    });
-    return (jsxRuntime.jsx(react.RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
-            base: "flex flex-wrap !gap-2",
-            wrapper: "flex flex-wrap !gap-2",
-        }, children: colorOptions.map(function (color) { return (jsxRuntime.jsx(react.Radio, { value: color.label, className: "p-0 m-0", classNames: {
-                base: "p-0 m-0",
-                wrapper: "hidden",
-                labelWrapper: "p-0 m-0",
-            }, children: jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full border-2 cursor-pointer transition-all ".concat(selectedColor === color.label
-                    ? "border-black border-opacity-20 scale-110"
-                    : "border-gray-200 hover:scale-105"), style: { backgroundColor: color.color }, title: color.label }) }, color.value)); }) }));
-};
+var ColorSelector = function (_a) {
+    var selectedColor = _a.selectedColor, onColorChange = _a.onColorChange;
+    var mode = useThemeContext().mode;
+    /**
+     * Filters and maps the available theme colors to the current theme mode (light/dark).
+     * Each color option contains:
+     * - value: the theme name (e.g., "blue-light")
+     * - label: the base color name (e.g., "blue")
+     * - color: the primary color hex value
+     */
+    var colorOptions = Object.entries(themeColors$1)
+        .filter(function (_a) {
+        var themeData = _a[1];
+        var themeMode = themeData.extend;
+        return mode === "light" ? themeMode === "light" : themeMode === "dark";
+    })
+        .map(function (_a) {
+        var themeName = _a[0], theme = _a[1];
+        return ({
+            value: themeName,
+            label: themeName.split("-")[0],
+            color: theme.colors.primary.DEFAULT,
+        });
+    });
+    return (jsxRuntime.jsx(react.RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
+            base: "flex flex-wrap !gap-2",
+            wrapper: "flex flex-wrap !gap-2",
+        }, children: colorOptions.map(function (color) { return (jsxRuntime.jsx(react.Radio, { value: color.label, className: "p-0 m-0", classNames: {
+                base: "p-0 m-0",
+                wrapper: "hidden",
+                labelWrapper: "p-0 m-0",
+            }, children: jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full border-2 cursor-pointer transition-all ".concat(selectedColor === color.label
+                    ? "border-black border-opacity-20 scale-110"
+                    : "border-gray-200 hover:scale-105"), style: { backgroundColor: color.color }, title: color.label }) }, color.value)); }) }));
+};
+
+/**
+ * Chip - Componente para mostrar etiquetas o badges
+ * basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ */
+var Chip = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "default" : _b, props = __rest$1(_a, ["color"]);
+    // Colores estándar de HeroUI
+    var standardColors = [
+        "default",
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "danger",
+    ];
+    // Si es un color estándar, usar HeroUI normalmente
+    if (standardColors.includes(color)) {
+        return (jsxRuntime.jsx(react.Chip, __assign$1({}, props, { color: color, onClose: props.onClose })));
+    }
+    // Si es un color personalizado, aplicar clases CSS específicas
+    var customColorClasses = {
+        red: "bg-red-100 text-red-500",
+        purple: "bg-purple-100 text-purple-500",
+        blue: "bg-blue-100 text-blue-500",
+        green: "bg-green-100 text-green-500",
+        orange: "bg-orange-100 text-orange-500",
+    };
+    var colorClasses = customColorClasses[color];
+    return (jsxRuntime.jsx(react.Chip, __assign$1({}, props, { onClose: props.onClose, classNames: __assign$1({ base: colorClasses }, props.classNames) })));
+};
+
+// Traducciones por defecto en español
+var defaultTranslations$8 = {
+    dayOption: "Día específico",
+    dateRangeOption: "Rango de fechas",
+    selectDateAriaLabel: "Seleccionar fecha",
+    selectDateRangeAriaLabel: "Seleccionar rango de fechas",
+};
+/**
+ * DateSelector - Componente para seleccionar fechas individuales o rangos de fechas
+ * basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ * Maneja su propio estado interno de manera autónoma.
+ */
+var DateSelector = function (_a) {
+    var _b = _a.initialType, initialType = _b === void 0 ? exports.HolidayType.SingleDay : _b, initialDate = _a.initialDate, initialDateRange = _a.initialDateRange, onChange = _a.onChange, _c = _a.translations, translations = _c === void 0 ? {} : _c, radioGroupProps = _a.radioGroupProps, radioItemProps = _a.radioItemProps, datePickerProps = _a.datePickerProps, dateRangePickerProps = _a.dateRangePickerProps, _d = _a.className, className = _d === void 0 ? "" : _d;
+    // Estado interno del componente
+    var _e = React.useState(initialType), type = _e[0], setType = _e[1];
+    var _f = React.useState(initialDate || null), date = _f[0], setDate = _f[1];
+    var _g = React.useState(initialDateRange || null), dateRange = _g[0], setDateRange = _g[1];
+    // Combinar traducciones por defecto con las proporcionadas
+    var t = __assign$1(__assign$1({}, defaultTranslations$8), translations);
+    var handleTypeChange = function (value) {
+        var newType = value;
+        setType(newType);
+        // Limpiar valores cuando cambia el tipo
+        if (newType === exports.HolidayType.SingleDay) {
+            setDateRange(null);
+        }
+        else {
+            setDate(null);
+        }
+        // Notificar cambio
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            type: newType,
+            date: newType === exports.HolidayType.SingleDay ? date : null,
+            dateRange: newType === exports.HolidayType.DateRange ? dateRange : null,
+        });
+    };
+    var handleDateChange = function (selectedDate) {
+        setDate(selectedDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            type: type,
+            date: selectedDate,
+            dateRange: null,
+        });
+    };
+    var handleDateRangeChange = function (range) {
+        setDateRange(range);
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            type: type,
+            date: null,
+            dateRange: range,
+        });
+    };
+    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center ".concat(className), children: [jsxRuntime.jsxs(react.RadioGroup, __assign$1({ color: "primary", orientation: "horizontal", size: "sm", value: type, onValueChange: handleTypeChange }, radioGroupProps, { children: [jsxRuntime.jsx(react.Radio, __assign$1({ value: exports.HolidayType.SingleDay }, radioItemProps, { children: t.dayOption })), jsxRuntime.jsx(react.Radio, __assign$1({ value: exports.HolidayType.DateRange }, radioItemProps, { children: t.dateRangeOption }))] })), type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(react.DateRangePicker, __assign$1({ className: "xs:w-full md:flex-1 md:max-w-xs", value: dateRange || null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsxRuntime.jsx(react.DatePicker, __assign$1({ className: "xs:w-full md:flex-1 md:max-w-40", value: date || null, onChange: handleDateChange, endContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }, datePickerProps)))] }));
+};
+
+var H1 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest$1(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h1", __assign$1({ className: react.cn("text-xl font-bold", className) }, props, { children: children })));
+};
+
+var H3 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest$1(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h3", __assign$1({ className: react.cn("text-base font-medium", className) }, props, { children: children })));
+};
+
+var H4 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest$1(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h4", __assign$1({ className: react.cn("text-sm font-medium ", className) }, props, { children: children })));
+};
+
+/**
+ * Breadcrumbs - Wrapper simple del componente HeroUI Breadcrumbs
+ *
+ * Este componente es un wrapper directo del componente Breadcrumbs de HeroUI,
+ * proporcionando una interfaz simplificada y consistente con el resto de la librería.
+ *
+ * @example
+ * ```tsx
+ * // Uso básico
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Inicio</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Productos</BreadcrumbItem>
+ *   <BreadcrumbItem>Detalle</BreadcrumbItem>
+ * </Breadcrumbs>
+ *
+ * // Con items como prop
+ * <Breadcrumbs
+ *   items={[
+ *     { label: "Inicio", href: "/" },
+ *     { label: "Productos", href: "/products" },
+ *     { label: "Detalle", isCurrent: true }
+ *   ]}
+ * />
+ * ```
+ */
+var BreadcrumbsComponent = function (_a) {
+    var items = _a.items, children = _a.children, heroUIProps = __rest$1(_a, ["items", "children"]);
+    return (jsxRuntime.jsx(react.Breadcrumbs, __assign$1({}, heroUIProps, { children: items
+            ? items.map(function (item, index) { return (jsxRuntime.jsx(react.BreadcrumbItem, { href: item.href, isCurrent: item.isCurrent, children: item.label }, "".concat(item.href || item.label, "-").concat(index))); })
+            : children })));
+};
+
+var ConfigMenu = function (_a) {
+    var _b;
+    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
+    return (jsxRuntime.jsxs(react.Dropdown, { className: "min-w-40", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "default", startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:settings-linear" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { "aria-label": "Configuration", children: [jsxRuntime.jsx(react.DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsxRuntime.jsx(react.DropdownItem, { href: item.href, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
+                                base: "text-default-500",
+                            }, startContent: item.icon ? jsxRuntime.jsx(IconComponent$1, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsxRuntime.jsx(react.DropdownSection, { children: jsxRuntime.jsx(react.DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
+                                base: "text-default-500",
+                            }, startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:logout-2-linear" }), children: (_b = translations === null || translations === void 0 ? void 0 : translations.logout) !== null && _b !== void 0 ? _b : "Logout" }, "logout") })] })] }));
+};
+ConfigMenu.displayName = "ConfigMenu";
+
+var NotificationButton = function (_a) {
+    var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b;
+    return (jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:bell-bing-linear" }), children: notificationCount > 0 && (jsxRuntime.jsx("span", { className: "notification__alert", children: notificationCount })) }));
+};
+NotificationButton.displayName = "NotificationButton";
+
+var HeaderComponent = function (_a) {
+    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations, breadcrumbs = _a.breadcrumbs;
+    return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(BreadcrumbsComponent, { items: breadcrumbs }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }) }));
+};
+HeaderComponent.displayName = "Header";
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __spreadArray(to, from, pack) {
+    for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var HolidayType;
+(function (HolidayType) {
+    HolidayType["SingleDay"] = "singleDay";
+    HolidayType["DateRange"] = "dateRange";
+})(HolidayType || (HolidayType = {}));
+
+/**
+ * Botón genérico basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Solid, Bordered, Light, Flat, Faded
+ * - Size: sm, md, lg
+ * - StartContent: On, Off
+ * - isLoading: On, Off
+ * - Radius: md (por defecto)
+ * - isIconOnly: True, False
+ */
+var Button = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
+    return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
+};
+
+var sizeMap = {
+    sm: "16px",
+    md: "20px",
+    lg: "24px",
+    xl: "32px",
+};
+var IconComponent = function (_a) {
+    var _b;
+    var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
+    var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
+    return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
+};
+({
+    type: HolidayType.SingleDay});
+
+React.createContext({
+    mode: "light",
+    color: "blue",
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setMode: function () { },
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setColor: function () { },
+});
+
+var themeColors = {
+    "blue-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                "50": "#dfedfd",
+                "100": "#b3d4fa",
+                "200": "#86bbf7",
+                "300": "#59a1f4",
+                "400": "#2d88f1",
+                "500": "#006fee",
+                "600": "#005cc4",
+                "700": "#00489b",
+                "800": "#003571",
+                "900": "#002147",
+                foreground: "#fff",
+                DEFAULT: "#006fee",
+            },
+            secondary: {
+                "50": "#eee4f8",
+                "100": "#d7bfef",
+                "200": "#bf99e5",
+                "300": "#a773db",
+                "400": "#904ed2",
+                "500": "#7828c8",
+                "600": "#6321a5",
+                "700": "#4e1a82",
+                "800": "#39135f",
+                "900": "#240c3c",
+                foreground: "#fff",
+                DEFAULT: "#7828c8",
+            },
+            success: {
+                "50": "#e2f8ec",
+                "100": "#b9efd1",
+                "200": "#91e5b5",
+                "300": "#68dc9a",
+                "400": "#40d27f",
+                "500": "#17c964",
+                "600": "#13a653",
+                "700": "#0f8341",
+                "800": "#0b5f30",
+                "900": "#073c1e",
+                foreground: "#000",
+                DEFAULT: "#17c964",
+            },
+            warning: {
+                "50": "#fef4e4",
+                "100": "#fce4bd",
+                "200": "#fad497",
+                "300": "#f9c571",
+                "400": "#f7b54a",
+                "500": "#f5a524",
+                "600": "#ca881e",
+                "700": "#9f6b17",
+                "800": "#744e11",
+                "900": "#4a320b",
+                foreground: "#000",
+                DEFAULT: "#f5a524",
+            },
+            danger: {
+                "50": "#fee1eb",
+                "100": "#fbb8cf",
+                "200": "#f98eb3",
+                "300": "#f76598",
+                "400": "#f53b7c",
+                "500": "#f31260",
+                "600": "#c80f4f",
+                "700": "#9e0c3e",
+                "800": "#73092e",
+                "900": "#49051d",
+                foreground: "#000",
+                DEFAULT: "#f31260",
+            },
+            focus: "#006FEE",
+            overlay: "#000000",
+        },
+    },
+    "blue-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                "50": "#002147",
+                "100": "#003571",
+                "200": "#00489b",
+                "300": "#005cc4",
+                "400": "#006fee",
+                "500": "#2d88f1",
+                "600": "#59a1f4",
+                "700": "#86bbf7",
+                "800": "#b3d4fa",
+                "900": "#dfedfd",
+                foreground: "#fff",
+                DEFAULT: "#006fee",
+            },
+            secondary: {
+                "50": "#240c3c",
+                "100": "#39135f",
+                "200": "#4e1a82",
+                "300": "#6321a5",
+                "400": "#7828c8",
+                "500": "#904ed2",
+                "600": "#a773db",
+                "700": "#bf99e5",
+                "800": "#d7bfef",
+                "900": "#eee4f8",
+                foreground: "#fff",
+                DEFAULT: "#7828c8",
+            },
+            success: {
+                "50": "#073c1e",
+                "100": "#0b5f30",
+                "200": "#0f8341",
+                "300": "#13a653",
+                "400": "#17c964",
+                "500": "#40d27f",
+                "600": "#68dc9a",
+                "700": "#91e5b5",
+                "800": "#b9efd1",
+                "900": "#e2f8ec",
+                foreground: "#000",
+                DEFAULT: "#17c964",
+            },
+            warning: {
+                "50": "#4a320b",
+                "100": "#744e11",
+                "200": "#9f6b17",
+                "300": "#ca881e",
+                "400": "#f5a524",
+                "500": "#f7b54a",
+                "600": "#f9c571",
+                "700": "#fad497",
+                "800": "#fce4bd",
+                "900": "#fef4e4",
+                foreground: "#000",
+                DEFAULT: "#f5a524",
+            },
+            danger: {
+                "50": "#49051d",
+                "100": "#73092e",
+                "200": "#9e0c3e",
+                "300": "#c80f4f",
+                "400": "#f31260",
+                "500": "#f53b7c",
+                "600": "#f76598",
+                "700": "#f98eb3",
+                "800": "#fbb8cf",
+                "900": "#fee1eb",
+                foreground: "#000",
+                DEFAULT: "#f31260",
+            },
+            focus: "#006FEE",
+            overlay: "#ffffff",
+        },
+    },
+    "purple-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                "50": "#eee4f8",
+                "100": "#d7bfef",
+                "200": "#bf99e5",
+                "300": "#a773db",
+                "400": "#904ed2",
+                "500": "#7828c8",
+                "600": "#6321a5",
+                "700": "#4e1a82",
+                "800": "#39135f",
+                "900": "#240c3c",
+                foreground: "#fff",
+                DEFAULT: "#7828c8",
+            },
+            secondary: {
+                "50": "#dfedfd",
+                "100": "#b3d4fa",
+                "200": "#86bbf7",
+                "300": "#59a1f4",
+                "400": "#2d88f1",
+                "500": "#006fee",
+                "600": "#005cc4",
+                "700": "#00489b",
+                "800": "#003571",
+                "900": "#002147",
+                foreground: "#fff",
+                DEFAULT: "#006fee",
+            },
+            focus: "#7828c8",
+            overlay: "#000000",
+        },
+    },
+    "purple-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                "50": "#2c193f",
+                "100": "#462764",
+                "200": "#603689",
+                "300": "#7944ae",
+                "400": "#9353d3",
+                "500": "#a671db",
+                "600": "#b98fe2",
+                "700": "#ccadea",
+                "800": "#dfcbf2",
+                "900": "#f2eafa",
+                foreground: "#fff",
+                DEFAULT: "#9353d3",
+            },
+            secondary: {
+                "50": "#1e254d",
+                "100": "#2f3a79",
+                "200": "#404fa6",
+                "300": "#5265d2",
+                "400": "#637aff",
+                "500": "#7e91ff",
+                "600": "#9aa9ff",
+                "700": "#b5c0ff",
+                "800": "#d0d7ff",
+                "900": "#eceeff",
+                foreground: "#000",
+                DEFAULT: "#637aff",
+            },
+            focus: "#9353d3",
+        },
+    },
+    "yellow-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                "50": "#fffbe6",
+                "100": "#FFFACD",
+                "200": "#FFF39B",
+                "300": "#FFEB69",
+                "400": "#FFE243",
+                "500": "#FFD505",
+                "600": "#DBB303",
+                "700": "#B79202",
+                "800": "#937301",
+                "900": "#7A5D00",
+                foreground: "#000",
+                DEFAULT: "#FFD505",
+            },
+            secondary: {
+                "50": "#F3F7FD",
+                "100": "#D1DFFB",
+                "200": "#A5BEF7",
+                "300": "#7494E7",
+                "400": "#4E6FCF",
+                "500": "#1E40AF",
+                "600": "#153096",
+                "700": "#0F237D",
+                "800": "#091865",
+                "900": "#051053",
+                foreground: "#fff",
+                DEFAULT: "#1E40AF",
+            },
+            focus: "#FFD505",
+            overlay: "#000000",
+        },
+    },
+    "yellow-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                "50": "#7A5D00",
+                "100": "#937301",
+                "200": "#B79202",
+                "300": "#DBB303",
+                "400": "#FFD505",
+                "500": "#FFE243",
+                "600": "#FFEB69",
+                "700": "#FFF39B",
+                "800": "#FFFACD",
+                "900": "#fffbe6",
+                foreground: "#000",
+                DEFAULT: "#FFD505",
+            },
+            secondary: {
+                50: "#e1efff",
+                100: "#b2d0ff",
+                200: "#83b1fc",
+                300: "#5292f8",
+                400: "#2473f5",
+                500: "#0a5adb",
+                600: "#0246ac",
+                700: "#00327c",
+                800: "#001e4d",
+                900: "#000a1f",
+                foreground: "#fff",
+                DEFAULT: "#0a5adb",
+            },
+            focus: "#FFD505",
+            overlay: "#ffffff",
+        },
+    },
+    "coral-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                "50": "#ffe9e9",
+                "100": "#ffcaca",
+                "200": "#ffabab",
+                "300": "#ff8d8d",
+                "400": "#ff6e6e",
+                "500": "#ff4f4f",
+                "600": "#d24141",
+                "700": "#a63333",
+                "800": "#792626",
+                "900": "#4d1818",
+                foreground: "#000",
+                DEFAULT: "#ff4f4f",
+            },
+            focus: "#ff4f4f",
+        },
+    },
+    "coral-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                "50": "#4d1818",
+                "100": "#792626",
+                "200": "#a63333",
+                "300": "#d24141",
+                "400": "#ff4f4f",
+                "500": "#ff6e6e",
+                "600": "#ff8d8d",
+                "700": "#ffabab",
+                "800": "#ffcaca",
+                "900": "#ffe9e9",
+                foreground: "#000",
+                DEFAULT: "#ff4f4f",
+            },
+            focus: "#ff4f4f",
+        },
+    },
+    "green-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                50: "#EFFFEF",
+                100: "#CFFCD1",
+                200: "#A0F9AC",
+                300: "#6FEE8D",
+                400: "#49DE7B",
+                500: "#16C964",
+                600: "#10AC64",
+                700: "#0B905F",
+                800: "#077457",
+                900: "#046051",
+                foreground: "#000",
+                DEFAULT: "#16C964",
+            },
+            secondary: {
+                "50": "#e3eaff",
+                "100": "#D7DFFE",
+                "200": "#AFBFFE",
+                "300": "#889DFD",
+                "400": "#6A82FB",
+                "500": "#3956F9",
+                "600": "#2941D6",
+                "700": "#1C2EB3",
+                "800": "#121F90",
+                "900": "#0A1477",
+                foreground: "#fff",
+                DEFAULT: "#3956F9",
+            },
+            success: {
+                "50": "#e7fde3",
+                "100": "#E8FCD3",
+                "200": "#CBFAA8",
+                "300": "#A4F17B",
+                "400": "#7EE358",
+                "500": "#49D127",
+                "600": "#2FB31C",
+                "700": "#1A9613",
+                "800": "#0C790E",
+                "900": "#076410",
+                foreground: "#000",
+                DEFAULT: "#49D127",
+            },
+            warning: {
+                "50": "#fff9da",
+                "100": "#FFF7CC",
+                "200": "#FFEE99",
+                "300": "#FFE266",
+                "400": "#FFD63F",
+                "500": "#FFC300",
+                "600": "#DBA200",
+                "700": "#B78300",
+                "800": "#936600",
+                "900": "#7A5100",
+                foreground: "#000",
+                DEFAULT: "#FFC300",
+            },
+            danger: {
+                "50": "#ffe2e5",
+                "100": "#FFE3D8",
+                "200": "#FFC1B2",
+                "300": "#FF988B",
+                "400": "#FF726F",
+                "500": "#FF3F4C",
+                "600": "#DB2E49",
+                "700": "#B71F45",
+                "800": "#93143F",
+                "900": "#7A0C3B",
+                foreground: "#000",
+                DEFAULT: "#FF3F4C",
+            },
+            focus: "#66cc8a",
+            overlay: "#000000",
+        },
+    },
+    "green-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                50: "#EFFFEF",
+                100: "#CFFCD1",
+                200: "#A0F9AC",
+                300: "#6FEE8D",
+                400: "#49DE7B",
+                500: "#16C964",
+                600: "#10AC64",
+                700: "#0B905F",
+                800: "#077457",
+                900: "#046051",
+                foreground: "#000",
+                DEFAULT: "#16C964",
+            },
+            secondary: {
+                "50": "#e3eaff",
+                "100": "#D7DFFE",
+                "200": "#AFBFFE",
+                "300": "#889DFD",
+                "400": "#6A82FB",
+                "500": "#3956F9",
+                "600": "#2941D6",
+                "700": "#1C2EB3",
+                "800": "#121F90",
+                "900": "#0A1477",
+                foreground: "#fff",
+                DEFAULT: "#3956F9",
+            },
+            success: {
+                "50": "#e7fde3",
+                "100": "#E8FCD3",
+                "200": "#CBFAA8",
+                "300": "#A4F17B",
+                "400": "#7EE358",
+                "500": "#49D127",
+                "600": "#2FB31C",
+                "700": "#1A9613",
+                "800": "#0C790E",
+                "900": "#076410",
+                foreground: "#000",
+                DEFAULT: "#49D127",
+            },
+            warning: {
+                "50": "#fff9da",
+                "100": "#FFF7CC",
+                "200": "#FFEE99",
+                "300": "#FFE266",
+                "400": "#FFD63F",
+                "500": "#FFC300",
+                "600": "#DBA200",
+                "700": "#B78300",
+                "800": "#936600",
+                "900": "#7A5100",
+                foreground: "#000",
+                DEFAULT: "#FFC300",
+            },
+            danger: {
+                "50": "#ffe2e5",
+                "100": "#FFE3D8",
+                "200": "#FFC1B2",
+                "300": "#FF988B",
+                "400": "#FF726F",
+                "500": "#FF3F4C",
+                "600": "#DB2E49",
+                "700": "#B71F45",
+                "800": "#93143F",
+                "900": "#7A0C3B",
+                foreground: "#fff",
+                DEFAULT: "#FF3F4C",
+            },
+            focus: "#66cc8a",
+            overlay: "#ffffff",
+        },
+    },
+};
+
+function normalizeClass$1(value) {
+    if (typeof value === "string") {
+        return value || undefined;
+    }
+    if (Array.isArray(value)) {
+        return value.filter(Boolean).join(" ") || undefined;
+    }
+    return undefined;
+}
+var getSectionClasses$1 = function (isCollapsed, sectionClassesProp) {
+    if (sectionClassesProp === void 0) { sectionClassesProp = {}; }
+    return (__assign(__assign({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
+        var k = _a[0], v = _a[1];
+        return [k, normalizeClass$1(v)];
+    }))), { base: normalizeClass$1(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
+            "p-0 max-w-[44px]": isCollapsed,
+        })), group: normalizeClass$1(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
+            "flex flex-col gap-1": isCollapsed,
+        })), heading: normalizeClass$1(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
+            hidden: isCollapsed,
+        })) }));
+};
+var getItemClasses$1 = function (isCollapsed, itemClassesProp) {
+    if (itemClassesProp === void 0) { itemClassesProp = {}; }
+    return (__assign(__assign({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
+        var k = _a[0], v = _a[1];
+        return [k, normalizeClass$1(v)];
+    }))), { base: normalizeClass$1(react.cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
+            "w-11 h-11 gap-0 p-0": isCollapsed,
+        })) }));
+};
+
+var EnumMenuNavListItem$1;
+(function (EnumMenuNavListItem) {
+    EnumMenuNavListItem["Nest"] = "nest";
+})(EnumMenuNavListItem$1 || (EnumMenuNavListItem$1 = {}));
+
+/**
+ * @component MenuNavList
+ * @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
+ * It supports nested items, sections, and tooltips for items in the collapsed state.
+ *
+ * @param {MenuNavListProps} props - Props for configuring the component.
+ * @param {MenuNavListItem[]} props.items - Array of items to display in the list.
+ * @param {boolean} [props.isCollapsed] - If `true`, the menu is displayed in its collapsed state (icons only).
+ * @param {React.Key} [props.defaultSelectedKey] - The key of the default selected item.
+ * @param {(key: React.Key) => void} [props.onSelect] - Callback executed when an item is selected.
+ * @param {boolean} [props.hideEndContent] - If `true`, hides the end content of the items.
+ * @param {object} [props.sectionClasses] - CSS classes to customize the sections.
+ * @param {object} [props.itemClasses] - CSS classes to customize the items.
+ * @param {string} [props.iconClassName] - CSS class for the icons.
+ * @param {object} [props.classNames] - CSS classes to customize the Listbox component.
+ * @param {string} [props.className] - CSS class for the main container.
+ *
+ * @forwardRef
+ */
+var MenuNavList$1 = React.forwardRef(function (_a, ref) {
+    var items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey; _a.onSelect; var hideEndContent = _a.hideEndContent, _b = _a.sectionClasses, sectionClassesProp = _b === void 0 ? {} : _b, _c = _a.itemClasses, itemClassesProp = _c === void 0 ? {} : _c, iconClassName = _a.iconClassName, classNames = _a.classNames, className = _a.className, props = __rest(_a, ["items", "isCollapsed", "defaultSelectedKey", "onSelect", "hideEndContent", "sectionClasses", "itemClasses", "iconClassName", "classNames", "className"]);
+    var _d = React.useState(defaultSelectedKey), selected = _d[0], setSelected = _d[1];
+    // Component styles
+    var sectionClasses = getSectionClasses$1(isCollapsed, sectionClassesProp);
+    var itemClasses = getItemClasses$1(isCollapsed, itemClassesProp);
+    // Handles the click event on an item, updating the selection state.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    var handleItemPress = React.useCallback(function (item, parentKey) {
+        var keySelected = typeof parentKey === "string" ? parentKey : item.key;
+        setSelected(keySelected);
+        // Force blur to remove hover state after click.
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }, [setSelected]);
+    // Renders the item displayed inside the Popover when the menu is collapsed.
+    var renderCompactItem = React.useCallback(function (item, parentKey) {
+        var _a, _b;
+        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_b = item.startContent) !== null && _b !== void 0 ? _b : null)), textValue: item.title, title: item.title, className: "data-[hover=true]:text-default-600", onPress: function () { return handleItemPress(item, parentKey); } })));
+    }, [handleItemPress, iconClassName]);
+    // Renders a nested item, i.e., an item that has sub-items.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    var renderNestItem = React.useCallback(function (item) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var isNestType = item.items &&
+            ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            (item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem$1.Nest;
+        if (isNestType) {
+            item.href = undefined;
+        }
+        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, classNames: {
+                base: react.cn({
+                    "h-auto p-0": !isCollapsed && isNestType,
+                }, {
+                    "inline-block w-11": isCollapsed && isNestType,
+                }, {
+                    "data-[selected=true]:bg-primary-100 h-11 justify-center items-center flex": isCollapsed && isNestType,
+                }, "rounded-large"),
+            }, endContent: isCollapsed || isNestType || hideEndContent
+                ? null
+                : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), title: isCollapsed || isNestType ? null : item.title }),
+            isCollapsed && isNestType ? (jsxRuntime.jsxs(react.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", classNames: {
+                                    base: "text-default-500",
+                                }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) }) }) }), jsxRuntime.jsx(react.PopoverContent, { className: "p-0", children: jsxRuntime.jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsxRuntime.jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", "aria-label": "Nested menu items", items: item.items, variant: "flat", children: item.items && ((_e = item.items) === null || _e === void 0 ? void 0 : _e.length) > 0
+                                        ? item.items.map(function (child) {
+                                            return renderCompactItem(child, item.key);
+                                        })
+                                        : renderCompactItem(item) })] }) })] })) : null,
+            !isCollapsed && isNestType ? (jsxRuntime.jsx(react.Accordion, { className: "p-0", children: jsxRuntime.jsx(react.AccordionItem, { "aria-label": item.title, classNames: {
+                        heading: "pr-3 group-data-[selected=true]:bg-primary-100 rounded-large",
+                        trigger: "p-0",
+                        content: "py-0 pl-4",
+                    }, title: item.icon ? (jsxRuntime.jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsxRuntime.jsx("span", { className: "text-small font-medium text-default-500 group-data-[selected=true]:text-default-600", children: item.title })] })) : (((_f = item.startContent) !== null && _f !== void 0 ? _f : null)), children: item.items && ((_g = item.items) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", classNames: {
+                            list: react.cn("border-l border-default-200 pl-4"),
+                        }, items: item.items, variant: "flat", children: item.items.map(function (child) { return renderItem(child, item.key); }) })) : (renderItem(item)) }, item.key) })) : null));
+    }, [isCollapsed, hideEndContent, iconClassName, items, selected]);
+    // Renders a simple item (without children) in the navigation list.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    var renderItem = React.useCallback(function (item, parentKey) {
+        var _a, _b, _c, _d;
+        var isNestType = item.items &&
+            ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            (item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem$1.Nest;
+        if (isNestType) {
+            return renderNestItem(item);
+        }
+        var isItemSelected = selected === item.key;
+        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item, parentKey); }, "aria-selected": isItemSelected, "aria-label": item.title || "Menu item ".concat(item.key) }), isCollapsed ? (jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
+                base: "text-default-500",
+            }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) })) : null));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
+    return (jsxRuntime.jsx(react.Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: react.cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: react.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: react.cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: react.cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [selected], selectionMode: "single", variant: "flat" }, props, { children: function (item) {
+            var _a, _b;
+            return item.items &&
+                ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                (item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem$1.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx(react.ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
+        } }), isCollapsed ? "compact" : "default"));
+});
+MenuNavList$1.displayName = "MenuNavList";
+
+/**
+ * Sidebar menu component for navigation and user actions.
+ * @param commerceInfo - Object with logo and name of the company.
+ * @param userInfo - Object with user avatar, name, and email.
+ * @param helpButton - Help button configuration.
+ * @param upgradeCard - Optional upgrade card configuration.
+ * @param isOpenSidebar - Controls sidebar visibility.
+ * @param onOpenSidebarChange - Callback to open/close sidebar.
+ */
+React.memo(function Menu(_a) {
+    var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, upgradeCard = _a.upgradeCard, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems;
+    // State to control menu collapse on desktop devices
+    var _b = React.useState(false), isCollapsed = _b[0], setIsCollapsed = _b[1];
+    // Memoized handlers for performance
+    var handleSidebarClose = React.useCallback(function () {
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
+    }, [onOpenSidebarChange]);
+    var handleCollapseToggle = React.useCallback(function () {
+        setIsCollapsed(function (prev) { return !prev; });
+    }, []);
+    var handleUpgradeClick = React.useCallback(function () {
+        if (upgradeCard) {
+            window.open(upgradeCard.buttonLink, "_blank");
+        }
+    }, [upgradeCard]);
+    var handleHelpClick = React.useCallback(function () {
+        window.open(helpButton.redirect, "_blank");
+    }, [helpButton]);
+    if (!isOpenSidebar) {
+        return null;
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", "aria-label": "Close sidebar", className: "fixed inset-0 bg-black bg-opacity-40 z-40 xs:block sm:hidden", onClick: handleSidebarClose, style: { border: "none", padding: 0, margin: 0 } }), jsxRuntime.jsx("div", { className: "container__menu ".concat(isCollapsed
+                    ? "container__menu--collapsed"
+                    : "container__menu--expanded"), children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
+                                                ? "solar:alt-arrow-right-outline"
+                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxRuntime.jsxs("div", { className: "collapsible-item flex flex-col", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList$1, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxRuntime.jsxs("div", { className: "collapsible-item relative", children: [jsxRuntime.jsxs(react.Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxRuntime.jsxs(react.CardBody, { className: "items-center py-5 text-center gap-1", children: [jsxRuntime.jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsxRuntime.jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsxRuntime.jsx(react.CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsxRuntime.jsx(react.Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsxRuntime.jsx(react.Spacer, { y: 9 })] })), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
+});
+
+var StepIndicator$1 = function (_a) {
+    var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.showStepText, showStepText = _c === void 0 ? true : _c, stepTextFormatter = _a.stepTextFormatter, className = _a.className, props = __rest(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
+    var progressPercentage = Math.min((currentStep / totalSteps) * 100, 100);
+    var colorClasses = {
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        success: "bg-success",
+        warning: "bg-warning",
+        danger: "bg-danger",
+    };
+    var defaultStepText = function (current, total) {
+        return "Step ".concat(current, " of ").concat(total);
+    };
+    var stepText = stepTextFormatter
+        ? stepTextFormatter(currentStep, totalSteps)
+        : defaultStepText(currentStep, totalSteps);
+    return (jsxRuntime.jsxs("div", __assign({ className: react.cn("w-full", className) }, props, { children: [showStepText && (jsxRuntime.jsx("div", { className: "text-center text-sm font-medium text-default-400 mb-3", children: stepText })), jsxRuntime.jsx("div", { className: "w-full bg-content2 rounded-full h-2 overflow-hidden", children: jsxRuntime.jsx("div", { className: react.cn("h-full transition-all duration-300 ease-out rounded-full", colorClasses[color]), style: { width: "".concat(progressPercentage, "%") } }) })] })));
+};
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+function $458b0a5536c1a7cf$export$40bfa8c7b0832715$1(value, defaultValue, onChange) {
+    let [stateValue, setStateValue] = (React.useState)(value || defaultValue);
+    let isControlledRef = (React.useRef)(value !== undefined);
+    let isControlled = value !== undefined;
+    (React.useEffect)(()=>{
+        let wasControlled = isControlledRef.current;
+        if (wasControlled !== isControlled && process.env.NODE_ENV !== 'production') console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);
+        isControlledRef.current = isControlled;
+    }, [
+        isControlled
+    ]);
+    let currentValue = isControlled ? value : stateValue;
+    let setValue = (React.useCallback)((value, ...args)=>{
+        let onChangeCaller = (value, ...onChangeArgs)=>{
+            if (onChange) {
+                if (!Object.is(currentValue, value)) onChange(value, ...onChangeArgs);
+            }
+            if (!isControlled) // If uncontrolled, mutate the currentValue local variable so that
+            // calling setState multiple times with the same value only emits onChange once.
+            // We do not use a ref for this because we specifically _do_ want the value to
+            // reset every render, and assigning to a ref in render breaks aborted suspended renders.
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            currentValue = value;
+        };
+        if (typeof value === 'function') {
+            if (process.env.NODE_ENV !== 'production') console.warn('We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320');
+            // this supports functional updates https://reactjs.org/docs/hooks-reference.html#functional-updates
+            // when someone using useControlledState calls setControlledState(myFunc)
+            // this will call our useState setState with a function as well which invokes myFunc and calls onChange with the value from myFunc
+            // if we're in an uncontrolled state, then we also return the value of myFunc which to setState looks as though it was just called with myFunc from the beginning
+            // otherwise we just return the controlled value, which won't cause a rerender because React knows to bail out when the value is the same
+            let updateFunction = (oldValue, ...functionArgs)=>{
+                let interceptedValue = value(isControlled ? currentValue : oldValue, ...functionArgs);
+                onChangeCaller(interceptedValue, ...args);
+                if (!isControlled) return interceptedValue;
+                return oldValue;
+            };
+            setStateValue(updateFunction);
+        } else {
+            if (!isControlled) setStateValue(value);
+            onChangeCaller(value, ...args);
+        }
+    }, [
+        isControlled,
+        currentValue,
+        onChange
+    ]);
+    return [
+        currentValue,
+        setValue
+    ];
+}
+
+var defaultTranslations$6$1 = {
+    checkIconTitle: "Check",
+};
+var VerticalSteps$1 = React.forwardRef(function (_a, ref) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
+    var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715$1(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
+    var t = __assign(__assign({}, defaultTranslations$6$1), translations);
+    var steps = React.useMemo(function () {
+        if (typeof stepsProp === "number") {
+            return Array.from({ length: stepsProp }, function () { return ({}); });
+        }
+        return stepsProp;
+    }, [stepsProp]);
+    var colors = React.useMemo(function () {
+        var _a;
+        var colorMappings = {
+            primary: [
+                "[--step-color:hsl(var(--heroui-primary))]",
+                "[--step-fg-color:hsl(var(--heroui-primary-foreground))]",
+            ],
+            secondary: [
+                "[--step-color:hsl(var(--heroui-secondary))]",
+                "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]",
+            ],
+            success: [
+                "[--step-color:hsl(var(--heroui-success))]",
+                "[--step-fg-color:hsl(var(--heroui-success-foreground))]",
+            ],
+            warning: [
+                "[--step-color:hsl(var(--heroui-warning))]",
+                "[--step-fg-color:hsl(var(--heroui-warning-foreground))]",
+            ],
+            danger: [
+                "[--step-color:hsl(var(--heroui-danger))]",
+                "[--step-fg-color:hsl(var(--heroui-danger-foreground))]",
+            ],
+            default: [
+                "[--step-color:hsl(var(--heroui-default))]",
+                "[--step-fg-color:hsl(var(--heroui-default-foreground))]",
+            ],
+        };
+        var _b = (_a = colorMappings[color]) !== null && _a !== void 0 ? _a : colorMappings.primary, userColor = _b[0], fgColor = _b[1];
+        var colorsVars = [
+            "[--active-fg-color:var(--step-fg-color)]",
+            "[--active-border-color:var(--step-color)]",
+            "[--active-color:var(--step-color)]",
+            "[--complete-background-color:var(--step-color)]",
+            "[--complete-border-color:var(--step-color)]",
+            "[--inactive-border-color:hsl(var(--heroui-default-300))]",
+            "[--inactive-color:hsl(var(--heroui-default-300))]",
+        ];
+        if (!(className === null || className === void 0 ? void 0 : className.includes("--step-fg-color"))) {
+            colorsVars.unshift(fgColor);
+        }
+        if (!(className === null || className === void 0 ? void 0 : className.includes("--step-color"))) {
+            colorsVars.unshift(userColor);
+        }
+        if (!(className === null || className === void 0 ? void 0 : className.includes("--inactive-bar-color"))) {
+            colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
+        }
+        return colorsVars;
+    }, [color, className]);
+    return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-col gap-y-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
+                var status = currentStep === stepIdx
+                    ? "active"
+                    : step.isCompleted
+                        ? "complete"
+                        : "inactive";
+                var isDisabled = status === "inactive";
+                return (
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
+                                    "cursor-not-allowed": isDisabled,
+                                }), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
+                                                        "shadow-lg": status === "complete",
+                                                    }), "data-status": status, initial: false, transition: { duration: 0.25 }, variants: {
+                                                        inactive: {
+                                                            backgroundColor: "transparent",
+                                                            borderColor: "var(--inactive-border-color)",
+                                                            color: "var(--inactive-color)",
+                                                        },
+                                                        active: {
+                                                            backgroundColor: "transparent",
+                                                            borderColor: "var(--active-border-color)",
+                                                            color: "var(--active-color)",
+                                                        },
+                                                        complete: {
+                                                            backgroundColor: "var(--complete-background-color)",
+                                                            borderColor: "var(--complete-border-color)",
+                                                        },
+                                                    }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
+                                                        "text-default-300": status === "inactive",
+                                                    }), children: step.title }), jsxRuntime.jsx("div", { className: react.cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
+                                                        "text-default-300": status === "inactive",
+                                                    }), children: step.description })] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react.cn("pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4"), style: {
+                                // @ts-ignore
+                                "--idx": stepIdx,
+                            }, children: jsxRuntime.jsx("div", { className: react.cn("relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']", {
+                                    "after:h-full": stepIdx < currentStep,
+                                }) }) }))] }, stepIdx));
+            }) }) }));
+});
+VerticalSteps$1.displayName = "VerticalSteps";
+
+var stepperClasses$1 = react.cn(
+// light
+"[--step-color:hsl(var(--heroui-primary-400))]", "[--active-color:hsl(var(--heroui-primary-400))]", "[--inactive-border-color:hsl(var(--heroui-primary-200))]", "[--inactive-bar-color:hsl(var(--heroui-primary-200))]", "[--inactive-color:hsl(var(--heroui-primary-300))]", 
+// dark
+"dark:[--step-color:rgba(255,255,255,0.1)]", "dark:[--active-color:hsl(var(--heroui-foreground-600))]", "dark:[--active-border-color:rgba(255,255,255,0.5)]", "dark:[--inactive-border-color:rgba(255,255,255,0.1)]", "dark:[--inactive-bar-color:rgba(255,255,255,0.1)]", "dark:[--inactive-color:rgba(255,255,255,0.2)]");
+var MultiStepSidebar$1 = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; _a.onNext; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onNext", "onChangePage", "steps", "goBackTranslation", "onClose"]);
+    var handleOverlayClick = function (e) {
+        if (e.target === e.currentTarget) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react.cn("flex h-full w-full max-w-4xl rounded-lg bg-background shadow-lg lg:h-auto", className) }, props, { children: [jsxRuntime.jsx("div", { className: "hidden w-1/3 flex-col items-center justify-center gap-y-8 p-8 md:flex", children: jsxRuntime.jsx(VerticalSteps$1, { className: stepperClasses$1, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage }) }), jsxRuntime.jsxs("div", { className: "relative flex h-auto justify-between w-full flex-col items-center gap-4 md:p-4 lg:w-2/3", children: [jsxRuntime.jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex  w-full justify-center", children: jsxRuntime.jsx(StepIndicator$1, { className: react.cn(stepperClasses$1), currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: " flex flex-col h-full w-full justify-between p-4 sm:max-w-md md:max-w-lg", children: children })] })] })) }));
+});
+MultiStepSidebar$1.displayName = "MultiStepSidebar";
+
+// Lista de países con código telefónico y código ISO
+var countries$1 = [
+    { code: "+57", name: "Colombia", country: "CO" },
+    { code: "+54", name: "Argentina", country: "AR" },
+    { code: "+55", name: "Brazil", country: "BR" },
+    { code: "+52", name: "Mexico", country: "MX" },
+    { code: "+503", name: "El Salvador", country: "SV" },
+    { code: "+51", name: "Peru", country: "PE" },
+    { code: "+56", name: "Chile", country: "CL" },
+    { code: "+1", name: "United States", country: "US" },
+    { code: "+7", name: "Russia", country: "RU" },
+    { code: "+20", name: "Egypt", country: "EG" },
+    { code: "+27", name: "South Africa", country: "ZA" },
+    { code: "+33", name: "France", country: "FR" },
+    { code: "+34", name: "Spain", country: "ES" },
+    { code: "+39", name: "Italy", country: "IT" },
+    { code: "+44", name: "United Kingdom", country: "GB" },
+    { code: "+49", name: "Germany", country: "DE" },
+    { code: "+61", name: "Australia", country: "AU" },
+    { code: "+62", name: "Indonesia", country: "ID" },
+    { code: "+64", name: "New Zealand", country: "NZ" },
+    { code: "+65", name: "Singapore", country: "SG" },
+    { code: "+81", name: "Japan", country: "JP" },
+    { code: "+86", name: "China", country: "CN" },
+    { code: "+91", name: "India", country: "IN" },
+    { code: "+351", name: "Portugal", country: "PT" },
+    { code: "+971", name: "UAE", country: "AE" },
+];
+Array.from(new Map(countries$1.map(function (item) { return [item.code + item.name, item]; })).values());
+
+var RowSteps$1 = React.forwardRef(function (_a, ref) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className; _a.translations; var props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
+    var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715$1(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
+    var steps = React.useMemo(function () {
+        if (typeof stepsProp === "number") {
+            return Array.from({ length: stepsProp }, function () { return ({}); });
+        }
+        return stepsProp;
+    }, [stepsProp]);
+    var colors = React.useMemo(function () {
+        var _a;
+        var colorMappings = {
+            primary: [
+                "[--step-color:hsl(var(--heroui-primary))]",
+                "[--step-fg-color:hsl(var(--heroui-primary-foreground))]",
+            ],
+            secondary: [
+                "[--step-color:hsl(var(--heroui-secondary))]",
+                "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]",
+            ],
+            success: [
+                "[--step-color:hsl(var(--heroui-success))]",
+                "[--step-fg-color:hsl(var(--heroui-success-foreground))]",
+            ],
+            warning: [
+                "[--step-color:hsl(var(--heroui-warning))]",
+                "[--step-fg-color:hsl(var(--heroui-warning-foreground))]",
+            ],
+            danger: [
+                "[--step-color:hsl(var(--heroui-danger))]",
+                "[--step-fg-color:hsl(var(--heroui-danger-foreground))]",
+            ],
+            default: [
+                "[--step-color:hsl(var(--heroui-default))]",
+                "[--step-fg-color:hsl(var(--heroui-default-foreground))]",
+            ],
+        };
+        var _b = (_a = colorMappings[color]) !== null && _a !== void 0 ? _a : colorMappings.primary, userColor = _b[0], fgColor = _b[1];
+        var colorsVars = [
+            "[--active-fg-color:var(--step-fg-color)]",
+            "[--active-border-color:var(--step-color)]",
+            "[--active-color:var(--step-color)]",
+            "[--complete-background-color:var(--step-color)]",
+            "[--complete-border-color:var(--step-color)]",
+            "[--inactive-border-color:hsl(var(--heroui-default-300))]",
+            "[--inactive-color:hsl(var(--heroui-default-300))]",
+        ];
+        if (!(className === null || className === void 0 ? void 0 : className.includes("--step-fg-color"))) {
+            colorsVars.unshift(fgColor);
+        }
+        if (!(className === null || className === void 0 ? void 0 : className.includes("--step-color"))) {
+            colorsVars.unshift(userColor);
+        }
+        if (!(className === null || className === void 0 ? void 0 : className.includes("--inactive-bar-color"))) {
+            colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
+        }
+        return colorsVars;
+    }, [color, className]);
+    return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-row flex-nowrap gap-x-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
+                var status = currentStep === stepIdx
+                    ? "active"
+                    : currentStep < stepIdx
+                        ? "inactive"
+                        : "complete";
+                return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
+                                                "shadow-lg": status === "complete",
+                                            }), initial: false, transition: { duration: 0.25 }, variants: {
+                                                inactive: {
+                                                    backgroundColor: "transparent",
+                                                    borderColor: "var(--inactive-border-color)",
+                                                    color: "var(--inactive-color)",
+                                                },
+                                                active: {
+                                                    backgroundColor: "transparent",
+                                                    borderColor: "var(--active-border-color)",
+                                                    color: "var(--active-color)",
+                                                },
+                                                complete: {
+                                                    backgroundColor: "var(--complete-background-color)",
+                                                    borderColor: "var(--complete-border-color)",
+                                                },
+                                            }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
+                                        "text-default-300": status === "inactive",
+                                    }), children: step.title }) })), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
+                                    // @ts-ignore
+                                    "--idx": stepIdx,
+                                }, children: jsxRuntime.jsx("div", { className: react.cn("relative h-0.5 w-full bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-full after:w-0 after:bg-[var(--active-border-color)] after:transition-[width] after:duration-300 after:content-['']", {
+                                        "after:w-full": stepIdx < currentStep,
+                                    }) }) }))] }), stepIdx) }, stepIdx));
+            }) }) }));
+});
+RowSteps$1.displayName = "RowSteps";
+
+React.createContext(undefined);
 
 /**
- * Chip - Componente para mostrar etiquetas o badges
- * basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ * @file This file contains the theme configurations for the application.
  */
-var Chip = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "default" : _b, props = __rest(_a, ["color"]);
-    // Colores estándar de HeroUI
-    var standardColors = [
-        "default",
-        "primary",
-        "secondary",
-        "success",
-        "warning",
-        "danger",
-    ];
-    // Si es un color estándar, usar HeroUI normalmente
-    if (standardColors.includes(color)) {
-        return (jsxRuntime.jsx(react.Chip, __assign({}, props, { color: color, onClose: props.onClose })));
-    }
-    // Si es un color personalizado, aplicar clases CSS específicas
-    var customColorClasses = {
-        red: "bg-red-100 text-red-500",
-        purple: "bg-purple-100 text-purple-500",
-        blue: "bg-blue-100 text-blue-500",
-        green: "bg-green-100 text-green-500",
-        orange: "bg-orange-100 text-orange-500",
-    };
-    var colorClasses = customColorClasses[color];
-    return (jsxRuntime.jsx(react.Chip, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
-};
+__spreadArray(["light", "dark"], Object.keys(themeColors));
+
+React.createContext(undefined);
 
-// Traducciones por defecto en español
 var defaultTranslations$7 = {
-    dayOption: "Día específico",
-    dateRangeOption: "Rango de fechas",
-    selectDateAriaLabel: "Seleccionar fecha",
-    selectDateRangeAriaLabel: "Seleccionar rango de fechas",
+    previewAlt: "Vista previa de imagen",
+    removeButtonAriaLabel: "Eliminar imagen",
+    emptyStateText: "No hay imágenes para mostrar",
+    clickableImageAriaLabel: "Hacer clic para ampliar imagen",
+};
+var sizeClasses = {
+    micro: "w-12 h-12",
+    small: "w-[100px] h-[100px]",
+    medium: "w-[150px] h-[150px]",
+    large: "w-[200px] h-[200px]",
+};
+var radiusClasses = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full",
 };
 /**
- * DateSelector - Componente para seleccionar fechas individuales o rangos de fechas
- * basado en HeroUI siguiendo las reglas de diseño BeweOS.
- * Maneja su propio estado interno de manera autónoma.
+ * Normalizes input to array of ImagePreviewItem
  */
-var DateSelector = function (_a) {
-    var _b = _a.initialType, initialType = _b === void 0 ? exports.HolidayType.SingleDay : _b, initialDate = _a.initialDate, initialDateRange = _a.initialDateRange, onChange = _a.onChange, _c = _a.translations, translations = _c === void 0 ? {} : _c, radioGroupProps = _a.radioGroupProps, radioItemProps = _a.radioItemProps, datePickerProps = _a.datePickerProps, dateRangePickerProps = _a.dateRangePickerProps, _d = _a.className, className = _d === void 0 ? "" : _d;
-    // Estado interno del componente
-    var _e = React.useState(initialType), type = _e[0], setType = _e[1];
-    var _f = React.useState(initialDate || null), date = _f[0], setDate = _f[1];
-    var _g = React.useState(initialDateRange || null), dateRange = _g[0], setDateRange = _g[1];
-    // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations$7), translations);
-    var handleTypeChange = function (value) {
-        var newType = value;
-        setType(newType);
-        // Limpiar valores cuando cambia el tipo
-        if (newType === exports.HolidayType.SingleDay) {
-            setDateRange(null);
+var normalizeImages = function (images) {
+    var imgArray = Array.isArray(images) ? images : [images];
+    return imgArray.map(function (img, index) {
+        if (typeof img === "string") {
+            return { src: img, id: "img-".concat(index) };
         }
-        else {
-            setDate(null);
+        return __assign$1(__assign$1({}, img), { id: img.id || "img-".concat(index) });
+    });
+};
+var ImagePreview = function (_a) {
+    var images = _a.images, _b = _a.size, size = _b === void 0 ? "small" : _b, onRemove = _a.onRemove, _c = _a.showRemoveButton, showRemoveButton = _c === void 0 ? true : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? "bg-white dark:bg-gray-800" : _f, _g = _a.radius, radius = _g === void 0 ? "lg" : _g, _h = _a.showBorder, showBorder = _h === void 0 ? true : _h, onImageClick = _a.onImageClick;
+    var t = __assign$1(__assign$1({}, defaultTranslations$7), translations);
+    var normalizedImages = normalizeImages(images);
+    var sizeClass = sizeClasses[size];
+    var radiusClass = radiusClasses[radius];
+    if (normalizedImages.length === 0) {
+        return (jsxRuntime.jsx("div", { className: "text-sm text-default-500 text-center py-4", children: t.emptyStateText }));
+    }
+    var handleRemove = function (id, index) {
+        if (onRemove) {
+            onRemove(id, index);
         }
-        // Notificar cambio
-        onChange === null || onChange === void 0 ? void 0 : onChange({
-            type: newType,
-            date: newType === exports.HolidayType.SingleDay ? date : null,
-            dateRange: newType === exports.HolidayType.DateRange ? dateRange : null,
-        });
-    };
-    var handleDateChange = function (selectedDate) {
-        setDate(selectedDate);
-        onChange === null || onChange === void 0 ? void 0 : onChange({
-            type: type,
-            date: selectedDate,
-            dateRange: null,
-        });
     };
-    var handleDateRangeChange = function (range) {
-        setDateRange(range);
-        onChange === null || onChange === void 0 ? void 0 : onChange({
-            type: type,
-            date: null,
-            dateRange: range,
-        });
+    var handleImageClick = function (image, index) {
+        if (onImageClick) {
+            onImageClick(image, index);
+        }
     };
-    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center ".concat(className), children: [jsxRuntime.jsxs(react.RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: type, onValueChange: handleTypeChange }, radioGroupProps, { children: [jsxRuntime.jsx(react.Radio, __assign({ value: exports.HolidayType.SingleDay }, radioItemProps, { children: t.dayOption })), jsxRuntime.jsx(react.Radio, __assign({ value: exports.HolidayType.DateRange }, radioItemProps, { children: t.dateRangeOption }))] })), type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(react.DateRangePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-xs", value: dateRange || null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsxRuntime.jsx(react.DatePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-40", value: date || null, onChange: handleDateChange, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }, datePickerProps)))] }));
-};
-
-var H1 = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsxRuntime.jsx("h1", __assign({ className: react.cn("text-xl font-bold", className) }, props, { children: children })));
-};
-
-var H3 = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsxRuntime.jsx("h3", __assign({ className: react.cn("text-base font-medium", className) }, props, { children: children })));
-};
-
-var H4 = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsxRuntime.jsx("h4", __assign({ className: react.cn("text-sm font-medium ", className) }, props, { children: children })));
-};
-
-/**
- * Breadcrumbs - Wrapper simple del componente HeroUI Breadcrumbs
- *
- * Este componente es un wrapper directo del componente Breadcrumbs de HeroUI,
- * proporcionando una interfaz simplificada y consistente con el resto de la librería.
- *
- * @example
- * ```tsx
- * // Uso básico
- * <Breadcrumbs>
- *   <BreadcrumbItem href="/">Inicio</BreadcrumbItem>
- *   <BreadcrumbItem href="/products">Productos</BreadcrumbItem>
- *   <BreadcrumbItem>Detalle</BreadcrumbItem>
- * </Breadcrumbs>
- *
- * // Con items como prop
- * <Breadcrumbs
- *   items={[
- *     { label: "Inicio", href: "/" },
- *     { label: "Productos", href: "/products" },
- *     { label: "Detalle", isCurrent: true }
- *   ]}
- * />
- * ```
- */
-var BreadcrumbsComponent = function (_a) {
-    var items = _a.items, children = _a.children, heroUIProps = __rest(_a, ["items", "children"]);
-    return (jsxRuntime.jsx(react.Breadcrumbs, __assign({}, heroUIProps, { children: items
-            ? items.map(function (item, index) { return (jsxRuntime.jsx(react.BreadcrumbItem, { href: item.href, isCurrent: item.isCurrent, children: item.label }, "".concat(item.href || item.label, "-").concat(index))); })
-            : children })));
-};
-
-var ConfigMenu = function (_a) {
-    var _b;
-    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
-    return (jsxRuntime.jsxs(react.Dropdown, { className: "min-w-40", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "default", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { "aria-label": "Configuration", children: [jsxRuntime.jsx(react.DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsxRuntime.jsx(react.DropdownItem, { href: item.href, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
-                                base: "text-default-500",
-                            }, startContent: item.icon ? jsxRuntime.jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsxRuntime.jsx(react.DropdownSection, { children: jsxRuntime.jsx(react.DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
-                                base: "text-default-500",
-                            }, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:logout-2-linear" }), children: (_b = translations === null || translations === void 0 ? void 0 : translations.logout) !== null && _b !== void 0 ? _b : "Logout" }, "logout") })] })] }));
+    var isClickable = !!onImageClick;
+    return (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3 ".concat(className), children: normalizedImages.map(function (image, index) { return (jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsxs("div", { className: "relative ".concat(sizeClass), children: [jsxRuntime.jsx("img", { src: image.src, alt: image.alt || t.previewAlt, className: "\n\t\t\t\t\t\t\t\t".concat(sizeClass, " \n\t\t\t\t\t\t\t\tobject-contain \n\t\t\t\t\t\t\t\t").concat(radiusClass, " \n\t\t\t\t\t\t\t\t").concat(backgroundColor, " \n\t\t\t\t\t\t\t\t").concat(showBorder ? "border border-default-200 dark:border-default-700" : "", "\n\t\t\t\t\t\t\t\tshadow-sm\n\t\t\t\t\t\t\t\t").concat(isClickable ? "cursor-pointer hover:opacity-80 transition-opacity" : "", "\n\t\t\t\t\t\t\t"), onClick: isClickable ? function () { return handleImageClick(image, index); } : undefined, onKeyDown: isClickable
+                            ? function (e) {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    handleImageClick(image, index);
+                                }
+                            }
+                            : undefined, role: isClickable ? "button" : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? t.clickableImageAriaLabel : undefined }), showRemoveButton && onRemove && (jsxRuntime.jsx("button", { type: "button", onClick: function () { return handleRemove(image.id || "", index); }, "aria-label": t.removeButtonAriaLabel, className: "\n\t\t\t\t\t\t\t\t\tabsolute -top-2 -right-2 \n\t\t\t\t\t\t\t\t\tp-1 rounded-full \n\t\t\t\t\t\t\t\t\tbg-danger-500 hover:bg-danger-600 \n\t\t\t\t\t\t\t\t\ttext-white \n\t\t\t\t\t\t\t\t\tcursor-pointer \n\t\t\t\t\t\t\t\t\ttransition-colors\n\t\t\t\t\t\t\t\t\tfocus:outline-none \n\t\t\t\t\t\t\t\t\tfocus:ring-2 \n\t\t\t\t\t\t\t\t\tfocus:ring-danger-400 \n\t\t\t\t\t\t\t\t\tfocus:ring-offset-2\n\t\t\t\t\t\t\t\t", children: jsxRuntime.jsx(IconComponent, { size: size === "micro" ? "sm" : "md", icon: "solar:trash-bin-minimalistic-outline" }) }))] }) }, image.id || index)); }) }));
 };
-ConfigMenu.displayName = "ConfigMenu";
-
-var NotificationButton = function (_a) {
-    var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b;
-    return (jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:bell-bing-linear" }), children: notificationCount > 0 && (jsxRuntime.jsx("span", { className: "notification__alert", children: notificationCount })) }));
-};
-NotificationButton.displayName = "NotificationButton";
-
-var HeaderComponent = function (_a) {
-    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations, breadcrumbs = _a.breadcrumbs;
-    return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(BreadcrumbsComponent, { items: breadcrumbs }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }) }));
-};
-HeaderComponent.displayName = "Header";
 
 function normalizeClass(value) {
     if (typeof value === "string") {
@@ -1126,7 +2290,7 @@ function normalizeClass(value) {
 }
 var getSectionClasses = function (isCollapsed, sectionClassesProp) {
     if (sectionClassesProp === void 0) { sectionClassesProp = {}; }
-    return (__assign(__assign({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
+    return (__assign$1(__assign$1({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
         var k = _a[0], v = _a[1];
         return [k, normalizeClass(v)];
     }))), { base: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
@@ -1139,7 +2303,7 @@ var getSectionClasses = function (isCollapsed, sectionClassesProp) {
 };
 var getItemClasses = function (isCollapsed, itemClassesProp) {
     if (itemClassesProp === void 0) { itemClassesProp = {}; }
-    return (__assign(__assign({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
+    return (__assign$1(__assign$1({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
         var k = _a[0], v = _a[1];
         return [k, normalizeClass(v)];
     }))), { base: normalizeClass(react.cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
@@ -1172,7 +2336,7 @@ var EnumMenuNavListItem;
  * @forwardRef
  */
 var MenuNavList = React.forwardRef(function (_a, ref) {
-    var items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey; _a.onSelect; var hideEndContent = _a.hideEndContent, _b = _a.sectionClasses, sectionClassesProp = _b === void 0 ? {} : _b, _c = _a.itemClasses, itemClassesProp = _c === void 0 ? {} : _c, iconClassName = _a.iconClassName, classNames = _a.classNames, className = _a.className, props = __rest(_a, ["items", "isCollapsed", "defaultSelectedKey", "onSelect", "hideEndContent", "sectionClasses", "itemClasses", "iconClassName", "classNames", "className"]);
+    var items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey; _a.onSelect; var hideEndContent = _a.hideEndContent, _b = _a.sectionClasses, sectionClassesProp = _b === void 0 ? {} : _b, _c = _a.itemClasses, itemClassesProp = _c === void 0 ? {} : _c, iconClassName = _a.iconClassName, classNames = _a.classNames, className = _a.className, props = __rest$1(_a, ["items", "isCollapsed", "defaultSelectedKey", "onSelect", "hideEndContent", "sectionClasses", "itemClasses", "iconClassName", "classNames", "className"]);
     var _d = React.useState(defaultSelectedKey), selected = _d[0], setSelected = _d[1];
     // Component styles
     var sectionClasses = getSectionClasses(isCollapsed, sectionClassesProp);
@@ -1190,7 +2354,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
     // Renders the item displayed inside the Popover when the menu is collapsed.
     var renderCompactItem = React.useCallback(function (item, parentKey) {
         var _a, _b;
-        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_b = item.startContent) !== null && _b !== void 0 ? _b : null)), textValue: item.title, title: item.title, className: "data-[hover=true]:text-default-600", onPress: function () { return handleItemPress(item, parentKey); } })));
+        return (React.createElement(react.ListboxItem, __assign$1({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsxRuntime.jsx(IconComponent$1, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_b = item.startContent) !== null && _b !== void 0 ? _b : null)), textValue: item.title, title: item.title, className: "data-[hover=true]:text-default-600", onPress: function () { return handleItemPress(item, parentKey); } })));
     }, [handleItemPress, iconClassName]);
     // Renders a nested item, i.e., an item that has sub-items.
     // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
@@ -1202,7 +2366,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
         if (isNestType) {
             item.href = undefined;
         }
-        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, classNames: {
+        return (React.createElement(react.ListboxItem, __assign$1({}, item, { key: item.key, classNames: {
                 base: react.cn({
                     "h-auto p-0": !isCollapsed && isNestType,
                 }, {
@@ -1212,10 +2376,10 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
                 }, "rounded-large"),
             }, endContent: isCollapsed || isNestType || hideEndContent
                 ? null
-                : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), title: isCollapsed || isNestType ? null : item.title }),
+                : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent$1, { className: react.cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), title: isCollapsed || isNestType ? null : item.title }),
             isCollapsed && isNestType ? (jsxRuntime.jsxs(react.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", classNames: {
                                     base: "text-default-500",
-                                }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) }) }) }), jsxRuntime.jsx(react.PopoverContent, { className: "p-0", children: jsxRuntime.jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsxRuntime.jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", "aria-label": "Nested menu items", items: item.items, variant: "flat", children: item.items && ((_e = item.items) === null || _e === void 0 ? void 0 : _e.length) > 0
+                                }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent$1, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) }) }) }), jsxRuntime.jsx(react.PopoverContent, { className: "p-0", children: jsxRuntime.jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsxRuntime.jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", "aria-label": "Nested menu items", items: item.items, variant: "flat", children: item.items && ((_e = item.items) === null || _e === void 0 ? void 0 : _e.length) > 0
                                         ? item.items.map(function (child) {
                                             return renderCompactItem(child, item.key);
                                         })
@@ -1224,7 +2388,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
                         heading: "pr-3 group-data-[selected=true]:bg-primary-100 rounded-large",
                         trigger: "p-0",
                         content: "py-0 pl-4",
-                    }, title: item.icon ? (jsxRuntime.jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsxRuntime.jsx("span", { className: "text-small font-medium text-default-500 group-data-[selected=true]:text-default-600", children: item.title })] })) : (((_f = item.startContent) !== null && _f !== void 0 ? _f : null)), children: item.items && ((_g = item.items) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", classNames: {
+                    }, title: item.icon ? (jsxRuntime.jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsxRuntime.jsx(IconComponent$1, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsxRuntime.jsx("span", { className: "text-small font-medium text-default-500 group-data-[selected=true]:text-default-600", children: item.title })] })) : (((_f = item.startContent) !== null && _f !== void 0 ? _f : null)), children: item.items && ((_g = item.items) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", classNames: {
                             list: react.cn("border-l border-default-200 pl-4"),
                         }, items: item.items, variant: "flat", children: item.items.map(function (child) { return renderItem(child, item.key); }) })) : (renderItem(item)) }, item.key) })) : null));
     }, [isCollapsed, hideEndContent, iconClassName, items, selected]);
@@ -1239,13 +2403,13 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
             return renderNestItem(item);
         }
         var isItemSelected = selected === item.key;
-        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item, parentKey); }, "aria-selected": isItemSelected, "aria-label": item.title || "Menu item ".concat(item.key) }), isCollapsed ? (jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
+        return (React.createElement(react.ListboxItem, __assign$1({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsxRuntime.jsx(IconComponent$1, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item, parentKey); }, "aria-selected": isItemSelected, "aria-label": item.title || "Menu item ".concat(item.key) }), isCollapsed ? (jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
                 base: "text-default-500",
-            }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) })) : null));
+            }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent$1, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) })) : null));
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
-    return (jsxRuntime.jsx(react.Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: react.cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: react.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: react.cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: react.cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [selected], selectionMode: "single", variant: "flat" }, props, { children: function (item) {
+    return (jsxRuntime.jsx(react.Listbox, __assign$1({ ref: ref, hideSelectedIcon: true, as: "nav", className: react.cn("list-none", className), classNames: __assign$1(__assign$1({}, classNames), { list: react.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign$1(__assign$1({}, itemClasses), { base: react.cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: react.cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [selected], selectionMode: "single", variant: "flat" }, props, { children: function (item) {
             var _a, _b;
             return item.items &&
                 ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
@@ -1287,13 +2451,13 @@ var MenuComponent = React.memo(function Menu(_a) {
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", "aria-label": "Close sidebar", className: "fixed inset-0 bg-black bg-opacity-40 z-40 xs:block sm:hidden", onClick: handleSidebarClose, style: { border: "none", padding: 0, margin: 0 } }), jsxRuntime.jsx("div", { className: "container__menu ".concat(isCollapsed
                     ? "container__menu--collapsed"
-                    : "container__menu--expanded"), children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
+                    : "container__menu--expanded"), children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent$1, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent$1, { icon: isCollapsed
                                                 ? "solar:alt-arrow-right-outline"
-                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxRuntime.jsxs("div", { className: "collapsible-item flex flex-col", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxRuntime.jsxs("div", { className: "collapsible-item relative", children: [jsxRuntime.jsxs(react.Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxRuntime.jsxs(react.CardBody, { className: "items-center py-5 text-center gap-1", children: [jsxRuntime.jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsxRuntime.jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsxRuntime.jsx(react.CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsxRuntime.jsx(react.Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsxRuntime.jsx(react.Spacer, { y: 9 })] })), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
+                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxRuntime.jsxs("div", { className: "collapsible-item flex flex-col", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxRuntime.jsxs("div", { className: "collapsible-item relative", children: [jsxRuntime.jsxs(react.Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxRuntime.jsxs(react.CardBody, { className: "items-center py-5 text-center gap-1", children: [jsxRuntime.jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsxRuntime.jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsxRuntime.jsx(react.CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsxRuntime.jsx(react.Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsxRuntime.jsx(react.Spacer, { y: 9 })] })), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent$1, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
 });
 
 var StepIndicator = function (_a) {
-    var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.showStepText, showStepText = _c === void 0 ? true : _c, stepTextFormatter = _a.stepTextFormatter, className = _a.className, props = __rest(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
+    var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.showStepText, showStepText = _c === void 0 ? true : _c, stepTextFormatter = _a.stepTextFormatter, className = _a.className, props = __rest$1(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
     var progressPercentage = Math.min((currentStep / totalSteps) * 100, 100);
     var colorClasses = {
         primary: "bg-primary",
@@ -1308,7 +2472,7 @@ var StepIndicator = function (_a) {
     var stepText = stepTextFormatter
         ? stepTextFormatter(currentStep, totalSteps)
         : defaultStepText(currentStep, totalSteps);
-    return (jsxRuntime.jsxs("div", __assign({ className: react.cn("w-full", className) }, props, { children: [showStepText && (jsxRuntime.jsx("div", { className: "text-center text-sm font-medium text-default-400 mb-3", children: stepText })), jsxRuntime.jsx("div", { className: "w-full bg-content2 rounded-full h-2 overflow-hidden", children: jsxRuntime.jsx("div", { className: react.cn("h-full transition-all duration-300 ease-out rounded-full", colorClasses[color]), style: { width: "".concat(progressPercentage, "%") } }) })] })));
+    return (jsxRuntime.jsxs("div", __assign$1({ className: react.cn("w-full", className) }, props, { children: [showStepText && (jsxRuntime.jsx("div", { className: "text-center text-sm font-medium text-default-400 mb-3", children: stepText })), jsxRuntime.jsx("div", { className: "w-full bg-content2 rounded-full h-2 overflow-hidden", children: jsxRuntime.jsx("div", { className: react.cn("h-full transition-all duration-300 ease-out rounded-full", colorClasses[color]), style: { width: "".concat(progressPercentage, "%") } }) })] })));
 };
 
 /*
@@ -1379,9 +2543,9 @@ var defaultTranslations$6 = {
     checkIconTitle: "Check",
 };
 var VerticalSteps = React.forwardRef(function (_a, ref) {
-    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest$1(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
     var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
-    var t = __assign(__assign({}, defaultTranslations$6), translations);
+    var t = __assign$1(__assign$1({}, defaultTranslations$6), translations);
     var steps = React.useMemo(function () {
         if (typeof stepsProp === "number") {
             return Array.from({ length: stepsProp }, function () { return ({}); });
@@ -1446,7 +2610,7 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
                 var isDisabled = status === "inactive";
                 return (
                 // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
+                jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", __assign$1({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
                                     "cursor-not-allowed": isDisabled,
                                 }), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
                                                         "shadow-lg": status === "complete",
@@ -1465,7 +2629,7 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
                                                             backgroundColor: "var(--complete-background-color)",
                                                             borderColor: "var(--complete-border-color)",
                                                         },
-                                                    }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
+                                                    }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent$1, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
                                                         "text-default-300": status === "inactive",
                                                     }), children: step.title }), jsxRuntime.jsx("div", { className: react.cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
                                                         "text-default-300": status === "inactive",
@@ -1485,13 +2649,13 @@ var stepperClasses = react.cn(
 // dark
 "dark:[--step-color:rgba(255,255,255,0.1)]", "dark:[--active-color:hsl(var(--heroui-foreground-600))]", "dark:[--active-border-color:rgba(255,255,255,0.5)]", "dark:[--inactive-border-color:rgba(255,255,255,0.1)]", "dark:[--inactive-bar-color:rgba(255,255,255,0.1)]", "dark:[--inactive-color:rgba(255,255,255,0.2)]");
 var MultiStepSidebar = React.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; _a.onNext; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onNext", "onChangePage", "steps", "goBackTranslation", "onClose"]);
+    var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; _a.onNext; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, props = __rest$1(_a, ["children", "className", "currentPage", "onBack", "onNext", "onChangePage", "steps", "goBackTranslation", "onClose"]);
     var handleOverlayClick = function (e) {
         if (e.target === e.currentTarget) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react.cn("flex h-full w-full max-w-4xl rounded-lg bg-background shadow-lg lg:h-auto", className) }, props, { children: [jsxRuntime.jsx("div", { className: "hidden w-1/3 flex-col items-center justify-center gap-y-8 p-8 md:flex", children: jsxRuntime.jsx(VerticalSteps, { className: stepperClasses, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage }) }), jsxRuntime.jsxs("div", { className: "relative flex h-auto justify-between w-full flex-col items-center gap-4 md:p-4 lg:w-2/3", children: [jsxRuntime.jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex  w-full justify-center", children: jsxRuntime.jsx(StepIndicator, { className: react.cn(stepperClasses), currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: " flex flex-col h-full w-full justify-between p-4 sm:max-w-md md:max-w-lg", children: children })] })] })) }));
+    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign$1({ ref: ref, className: react.cn("flex h-full w-full max-w-4xl rounded-lg bg-background shadow-lg lg:h-auto", className) }, props, { children: [jsxRuntime.jsx("div", { className: "hidden w-1/3 flex-col items-center justify-center gap-y-8 p-8 md:flex", children: jsxRuntime.jsx(VerticalSteps, { className: stepperClasses, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage }) }), jsxRuntime.jsxs("div", { className: "relative flex h-auto justify-between w-full flex-col items-center gap-4 md:p-4 lg:w-2/3", children: [jsxRuntime.jsx(Button$1, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent$1, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex  w-full justify-center", children: jsxRuntime.jsx(StepIndicator, { className: react.cn(stepperClasses), currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: " flex flex-col h-full w-full justify-between p-4 sm:max-w-md md:max-w-lg", children: children })] })] })) }));
 });
 MultiStepSidebar.displayName = "MultiStepSidebar";
 
@@ -1499,9 +2663,9 @@ var MultistepNavigationButtons = function (_a) {
     var nextButtonProps = _a.nextButtonProps, cancelButtonProps = _a.cancelButtonProps, className = _a.className;
     // const { children: backButtonChildren, ...restBackButtonProps } =
     // 	backButtonProps || {};
-    var _b = nextButtonProps || {}, nextButtonChildren = _b.children, restNextButtonProps = __rest(_b, ["children"]);
-    var _c = cancelButtonProps || {}, cancelButtonChildren = _c.children, restCancelButtonProps = __rest(_c, ["children"]);
-    return (jsxRuntime.jsx("div", { className: react.cn("flex w-full flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-between md:justify-end", className), children: jsxRuntime.jsxs("div", { className: "flex w-full flex-col-reverse gap-2 md:w-auto md:flex-row", children: [jsxRuntime.jsx(react.Button, __assign({ className: "w-full md:w-auto", color: "default", variant: "flat" }, restCancelButtonProps, { children: cancelButtonChildren || "Cancel" })), jsxRuntime.jsx(react.Button, __assign({ className: "w-full md:w-auto", color: "primary" }, restNextButtonProps, { children: nextButtonChildren || "Next" }))] }) }));
+    var _b = nextButtonProps || {}, nextButtonChildren = _b.children, restNextButtonProps = __rest$1(_b, ["children"]);
+    var _c = cancelButtonProps || {}, cancelButtonChildren = _c.children, restCancelButtonProps = __rest$1(_c, ["children"]);
+    return (jsxRuntime.jsx("div", { className: react.cn("flex w-full flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-between md:justify-end", className), children: jsxRuntime.jsxs("div", { className: "flex w-full flex-col-reverse gap-2 md:w-auto md:flex-row", children: [jsxRuntime.jsx(react.Button, __assign$1({ className: "w-full md:w-auto", color: "default", variant: "flat" }, restCancelButtonProps, { children: cancelButtonChildren || "Cancel" })), jsxRuntime.jsx(react.Button, __assign$1({ className: "w-full md:w-auto", color: "primary" }, restNextButtonProps, { children: nextButtonChildren || "Next" }))] }) }));
 };
 
 var MultiStepWizard = function (_a) {
@@ -1512,7 +2676,7 @@ var MultiStepWizard = function (_a) {
             setPage(0);
         }
     }, [isOpen]);
-    var t = __assign({
+    var t = __assign$1({
         continue: "Continue",
         goBack: "Back",
         cancel: "Cancel",
@@ -1569,7 +2733,7 @@ var MultiStepWizard = function (_a) {
     if (!isOpen) {
         return null;
     }
-    return (jsxRuntime.jsxs(MultiStepSidebar, { currentPage: page, goBackTranslation: t.goBack, steps: steps, onBack: onBack, onChangePage: onChangePage, onClose: onClose, onNext: onNext, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Button, { className: "w-fit text-default-600 mb-6", color: "default", variant: "light", onPress: onBack, isDisabled: page === 0, startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "material-symbols:arrow-back-rounded", size: "sm" }), children: t.goBack || "Back" }), jsxRuntime.jsx("div", { className: "relative flex h-fit w-full flex-col text-center lg:justify-center lg:pt-0", children: content })] }), jsxRuntime.jsx(MultistepNavigationButtons, { backButtonProps: {
+    return (jsxRuntime.jsxs(MultiStepSidebar, { currentPage: page, goBackTranslation: t.goBack, steps: steps, onBack: onBack, onChangePage: onChangePage, onClose: onClose, onNext: onNext, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Button$1, { className: "w-fit text-default-600 mb-6", color: "default", variant: "light", onPress: onBack, isDisabled: page === 0, startContent: jsxRuntime.jsx(IconComponent$1, { className: "text-default-500", icon: "material-symbols:arrow-back-rounded", size: "sm" }), children: t.goBack || "Back" }), jsxRuntime.jsx("div", { className: "relative flex h-fit w-full flex-col text-center lg:justify-center lg:pt-0", children: content })] }), jsxRuntime.jsx(MultistepNavigationButtons, { backButtonProps: {
                     isDisabled: page === 0,
                     onPress: onBack,
                     children: t.goBack,
@@ -1584,8 +2748,8 @@ var MultiStepWizard = function (_a) {
 };
 
 var Pagination = function (_a) {
-    _a.size; var props = __rest(_a, ["size"]);
-    return jsxRuntime.jsx(react.Pagination, __assign({ showControls: true, isCompact: true }, props));
+    _a.size; var props = __rest$1(_a, ["size"]);
+    return jsxRuntime.jsx(react.Pagination, __assign$1({ showControls: true, isCompact: true }, props));
 };
 
 var Andorra = function () {
@@ -2038,7 +3202,7 @@ var Phone = function (_a) {
     var portalDropdownRef = React.useRef(null);
     var _l = React.useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    var t = __assign(__assign({}, defaultTranslations$5), translations);
+    var t = __assign$1(__assign$1({}, defaultTranslations$5), translations);
     var finalLabel = label || t.label;
     React.useEffect(function () {
         if (value) {
@@ -2127,7 +3291,7 @@ var defaultTranslations$4 = {
  */
 var PromotionalBanner = function (_a) {
     var message = _a.message, buttonText = _a.buttonText, _b = _a.messageHref, messageHref = _b === void 0 ? "#" : _b, _c = _a.buttonHref, buttonHref = _c === void 0 ? "#" : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, _e = _a.isVisible, isVisible = _e === void 0 ? true : _e, _f = _a.gradientColors, gradientColors = _f === void 0 ? ["default-100", "danger-100", "secondary-100"] : _f, _g = _a.buttonGradientColors, buttonGradientColors = _g === void 0 ? ["#F871A0", "#9353D3"] : _g, onClose = _a.onClose, onMessageClick = _a.onMessageClick, onButtonClick = _a.onButtonClick, _h = _a.messageLinkProps, messageLinkProps = _h === void 0 ? {} : _h, _j = _a.buttonProps, buttonProps = _j === void 0 ? {} : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k;
-    var t = __assign(__assign({}, defaultTranslations$4), translations);
+    var t = __assign$1(__assign$1({}, defaultTranslations$4), translations);
     var finalMessage = message || t.message;
     var finalButtonText = buttonText || t.buttonText;
     var handleClose = function () {
@@ -2144,16 +3308,16 @@ var PromotionalBanner = function (_a) {
     }
     var fromColor = gradientColors[0], viaColor = gradientColors[1], toColor = gradientColors[2];
     var buttonGradient1 = buttonGradientColors[0], buttonGradient2 = buttonGradientColors[1];
-    return (jsxRuntime.jsxs("div", { className: "border-divider flex w-full items-center gap-x-3 border-b-1 bg-gradient-to-r from-".concat(fromColor, " via-").concat(viaColor, " to-").concat(toColor, " px-6 py-2 sm:px-3.5 sm:before:flex-1"), children: [jsxRuntime.jsx("p", { className: "text-small text-foreground", children: jsxRuntime.jsxs(react.Link, __assign({ className: "text-inherit", href: messageHref, onClick: handleMessageClick }, messageLinkProps, { children: [finalMessage, "\u00A0"] })) }), jsxRuntime.jsx(react.Button, __assign({ as: react.Link, className: "group text-small relative h-9 overflow-hidden bg-transparent font-normal", color: "default", endContent: jsxRuntime.jsx(IconComponent, { className: "flex-none transition-transform outline-hidden group-data-[hover=true]:translate-x-0.5 [&>path]:stroke-2", icon: "solar:arrow-right-linear", size: "sm" }), href: buttonHref, style: {
+    return (jsxRuntime.jsxs("div", { className: "border-divider flex w-full items-center gap-x-3 border-b-1 bg-gradient-to-r from-".concat(fromColor, " via-").concat(viaColor, " to-").concat(toColor, " px-6 py-2 sm:px-3.5 sm:before:flex-1"), children: [jsxRuntime.jsx("p", { className: "text-small text-foreground", children: jsxRuntime.jsxs(react.Link, __assign$1({ className: "text-inherit", href: messageHref, onClick: handleMessageClick }, messageLinkProps, { children: [finalMessage, "\u00A0"] })) }), jsxRuntime.jsx(react.Button, __assign$1({ as: react.Link, className: "group text-small relative h-9 overflow-hidden bg-transparent font-normal", color: "default", endContent: jsxRuntime.jsx(IconComponent$1, { className: "flex-none transition-transform outline-hidden group-data-[hover=true]:translate-x-0.5 [&>path]:stroke-2", icon: "solar:arrow-right-linear", size: "sm" }), href: buttonHref, style: {
                     border: "solid 2px transparent",
                     backgroundImage: "linear-gradient(hsl(var(--heroui-danger-50)), hsl(var(--heroui-danger-50))), linear-gradient(to right, ".concat(buttonGradient1, ", ").concat(buttonGradient2, ")"),
                     backgroundOrigin: "border-box",
                     backgroundClip: "padding-box, border-box",
-                }, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: jsxRuntime.jsx(IconComponent, { "aria-hidden": "true", className: "text-default-500", icon: "lucide:x", size: "md" }) }) }))] }));
+                }, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: jsxRuntime.jsx(IconComponent$1, { "aria-hidden": "true", className: "text-default-500", icon: "lucide:x", size: "md" }) }) }))] }));
 };
 
 var RowSteps = React.forwardRef(function (_a, ref) {
-    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className; _a.translations; var props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className; _a.translations; var props = __rest$1(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
     var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
     var steps = React.useMemo(function () {
         if (typeof stepsProp === "number") {
@@ -2216,7 +3380,7 @@ var RowSteps = React.forwardRef(function (_a, ref) {
                     : currentStep < stepIdx
                         ? "inactive"
                         : "complete";
-                return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
+                return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign$1({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
                                                 "shadow-lg": status === "complete",
                                             }), initial: false, transition: { duration: 0.25 }, variants: {
                                                 inactive: {
@@ -2233,7 +3397,7 @@ var RowSteps = React.forwardRef(function (_a, ref) {
                                                     backgroundColor: "var(--complete-background-color)",
                                                     borderColor: "var(--complete-border-color)",
                                                 },
-                                            }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
+                                            }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent$1, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
                                         "text-default-300": status === "inactive",
                                     }), children: step.title }) })), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
                                     // @ts-ignore
@@ -2406,20 +3570,20 @@ class $35ea8db9cb2ccb90$export$680ea196effce5f {
 }
 
 var Switch = function (_a) {
-    var id = _a.id, props = __rest(_a, ["id"]);
+    var id = _a.id, props = __rest$1(_a, ["id"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return jsxRuntime.jsx(react.Switch, __assign({}, props, { id: autoId }));
+    return jsxRuntime.jsx(react.Switch, __assign$1({}, props, { id: autoId }));
 };
 
 /**
  * TimeInput genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
  */
 var TimeInput = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "bordered" : _d, props = __rest(_a, ["label", "id", "size", "radius", "variant"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "bordered" : _d, props = __rest$1(_a, ["label", "id", "size", "radius", "variant"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsx(react.TimeInput, __assign({}, props, { id: autoId, size: size, radius: radius, variant: variant, label: label, labelPlacement: "outside-left", classNames: {
+    return (jsxRuntime.jsx(react.TimeInput, __assign$1({}, props, { id: autoId, size: size, radius: radius, variant: variant, label: label, labelPlacement: "outside-left", classNames: {
             label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
             inputWrapper: "focus-within:!border-primary-500",
         } })));
@@ -2514,7 +3678,7 @@ var defaultTranslations$3 = {
  */
 var ScheduleRow = function (_a) {
     var day = _a.day, daySchedule = _a.daySchedule, _b = _a.translations, translations = _b === void 0 ? {} : _b, _c = _a.showCopyToAll, showCopyToAll = _c === void 0 ? false : _c, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
-    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var t = __assign$1(__assign$1({}, defaultTranslations$3), translations);
     /**
      * @function validateTimeSlots
      * @description Validates all time slots to ensure the "from" time is not after the "to" time.
@@ -2524,13 +3688,13 @@ var ScheduleRow = function (_a) {
     var validateTimeSlots = function (timeSlots) {
         return timeSlots.map(function (slot) {
             if (slot.from && slot.to) {
-                var fromTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.from.split(":").map(Number), false)))();
-                var toTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.to.split(":").map(Number), false)))();
+                var fromTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray$1([void 0], slot.from.split(":").map(Number), false)))();
+                var toTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray$1([void 0], slot.to.split(":").map(Number), false)))();
                 if (fromTime.compare(toTime) > 0) {
-                    return __assign(__assign({}, slot), { error: "From time cannot be after to time" });
+                    return __assign$1(__assign$1({}, slot), { error: "From time cannot be after to time" });
                 }
             }
-            return __assign(__assign({}, slot), { error: null });
+            return __assign$1(__assign$1({}, slot), { error: null });
         });
     };
     /**
@@ -2564,7 +3728,7 @@ var ScheduleRow = function (_a) {
      * @description Toggles the `isOpen` status of the schedule for the day.
      */
     var handleToggleDay = function () {
-        onChange(__assign(__assign({}, daySchedule), { isOpen: !daySchedule.isOpen }));
+        onChange(__assign$1(__assign$1({}, daySchedule), { isOpen: !daySchedule.isOpen }));
     };
     /**
      * @function handleTimeChange
@@ -2575,11 +3739,11 @@ var ScheduleRow = function (_a) {
      */
     var handleTimeChange = function (index, field, value) {
         var _a;
-        var newTimeSlots = __spreadArray([], daySchedule.timeSlots, true);
+        var newTimeSlots = __spreadArray$1([], daySchedule.timeSlots, true);
         // Update the specific field
-        newTimeSlots[index] = __assign(__assign({}, newTimeSlots[index]), (_a = {}, _a[field] = fromTimeValue(value), _a));
+        newTimeSlots[index] = __assign$1(__assign$1({}, newTimeSlots[index]), (_a = {}, _a[field] = fromTimeValue(value), _a));
         var validatedSlots = validateTimeSlots(newTimeSlots);
-        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
+        onChange(__assign$1(__assign$1({}, daySchedule), { timeSlots: validatedSlots }));
     };
     /**
      * @function handleAddTimeSlot
@@ -2588,9 +3752,9 @@ var ScheduleRow = function (_a) {
      */
     var handleAddTimeSlot = function () {
         // Add a new empty slot
-        var newTimeSlots = __spreadArray(__spreadArray([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
+        var newTimeSlots = __spreadArray$1(__spreadArray$1([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
         var validatedSlots = validateTimeSlots(newTimeSlots);
-        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
+        onChange(__assign$1(__assign$1({}, daySchedule), { timeSlots: validatedSlots }));
     };
     /**
      * @function handleRemoveTimeSlot
@@ -2604,7 +3768,7 @@ var ScheduleRow = function (_a) {
         if (newTimeSlots.length === 0) {
             newTimeSlots = [{ from: "", to: "" }];
         }
-        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
+        onChange(__assign$1(__assign$1({}, daySchedule), { timeSlots: newTimeSlots }));
     };
     /**
      * @function getSlotsToDisplay
@@ -2621,12 +3785,12 @@ var ScheduleRow = function (_a) {
         // Return slots exactly as they are - no automatic additions
         return slots;
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col w-full gap-y-4 last:border-b-0 last:mb-0 last:pb-0 border-b border-default-200 xs:py-4 xl:p-4 first:pt-0", children: [jsxRuntime.jsxs("div", { className: "flex  w-full items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex xs:space-x-2 sm:space-x-4", children: [jsxRuntime.jsx("h3", { className: "text-small font-semibold text-default-900 capitalize", children: day }), jsxRuntime.jsx(react.Chip, { size: "sm", color: daySchedule.isOpen ? "primary" : "default", className: "text-background", children: daySchedule.isOpen ? t.open : t.closed })] }), jsxRuntime.jsxs("div", { className: "flex xs:gap-2 sm:gap-5", children: [jsxRuntime.jsx(Switch, { size: "sm", color: "primary", isSelected: daySchedule.isOpen, onValueChange: handleToggleDay }), showCopyToAll && onCopyToAll && (jsxRuntime.jsx(Button, { size: "sm", variant: "bordered", onPress: function () { return onCopyToAll(day); }, children: t.copyToAll }))] })] }), daySchedule.isOpen && (jsxRuntime.jsx("div", { className: "flex  flex-col justify-around gap-y-3 ", children: getSlotsToDisplay().map(function (slot, index) {
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col w-full gap-y-4 last:border-b-0 last:mb-0 last:pb-0 border-b border-default-200 xs:py-4 xl:p-4 first:pt-0", children: [jsxRuntime.jsxs("div", { className: "flex  w-full items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex xs:space-x-2 sm:space-x-4", children: [jsxRuntime.jsx("h3", { className: "text-small font-semibold text-default-900 capitalize", children: day }), jsxRuntime.jsx(react.Chip, { size: "sm", color: daySchedule.isOpen ? "primary" : "default", className: "text-background", children: daySchedule.isOpen ? t.open : t.closed })] }), jsxRuntime.jsxs("div", { className: "flex xs:gap-2 sm:gap-5", children: [jsxRuntime.jsx(Switch, { size: "sm", color: "primary", isSelected: daySchedule.isOpen, onValueChange: handleToggleDay }), showCopyToAll && onCopyToAll && (jsxRuntime.jsx(Button$1, { size: "sm", variant: "bordered", onPress: function () { return onCopyToAll(day); }, children: t.copyToAll }))] })] }), daySchedule.isOpen && (jsxRuntime.jsx("div", { className: "flex  flex-col justify-around gap-y-3 ", children: getSlotsToDisplay().map(function (slot, index) {
                     var slotsToDisplay = getSlotsToDisplay();
                     var isLastSlot = index === slotsToDisplay.length - 1;
                     var isSlotFilled = slot.from && slot.to;
                     var canDelete = slotsToDisplay.length > 1;
-                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 w-full justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-1", children: [jsxRuntime.jsx(TimeInput, { label: t.from, className: "w-full", value: toTimeValue(slot.from), onChange: function (value) { return handleTimeChange(index, "from", value); }, isInvalid: !!slot.error }), jsxRuntime.jsx("span", { className: "text-default-900 xs:hidden xl:block", children: "-" }), jsxRuntime.jsx(TimeInput, { label: t.to, className: "w-full", value: toTimeValue(slot.to), onChange: function (value) { return handleTimeChange(index, "to", value); }, isInvalid: !!slot.error, errorMessage: slot.error })] }), isLastSlot ? (jsxRuntime.jsx(Button, { isIconOnly: true, size: "sm", color: "primary", variant: "light", onPress: handleAddTimeSlot, isDisabled: !isSlotFilled, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-bold" }) })) : (jsxRuntime.jsx(Button, { isIconOnly: true, size: "sm", color: "danger", variant: "light", onPress: function () { return handleRemoveTimeSlot(index); }, isDisabled: !canDelete, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline" }) }))] }, "".concat(day, "-timeslot-").concat(index)));
+                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 w-full justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-1", children: [jsxRuntime.jsx(TimeInput, { label: t.from, className: "w-full", value: toTimeValue(slot.from), onChange: function (value) { return handleTimeChange(index, "from", value); }, isInvalid: !!slot.error }), jsxRuntime.jsx("span", { className: "text-default-900 xs:hidden xl:block", children: "-" }), jsxRuntime.jsx(TimeInput, { label: t.to, className: "w-full", value: toTimeValue(slot.to), onChange: function (value) { return handleTimeChange(index, "to", value); }, isInvalid: !!slot.error, errorMessage: slot.error })] }), isLastSlot ? (jsxRuntime.jsx(Button$1, { isIconOnly: true, size: "sm", color: "primary", variant: "light", onPress: handleAddTimeSlot, isDisabled: !isSlotFilled, startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:add-circle-bold" }) })) : (jsxRuntime.jsx(Button$1, { isIconOnly: true, size: "sm", color: "danger", variant: "light", onPress: function () { return handleRemoveTimeSlot(index); }, isDisabled: !canDelete, startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:trash-bin-minimalistic-outline" }) }))] }, "".concat(day, "-timeslot-").concat(index)));
                 }) }))] }, day));
 };
 
@@ -2640,11 +3804,11 @@ var ScheduleRow = function (_a) {
  * - Follows BeweOS design guidelines
  */
 var SearchInput = function (_a) {
-    var _b = _a.searchPlaceholder, searchPlaceholder = _b === void 0 ? "Buscar..." : _b, _c = _a.searchIcon, searchIcon = _c === void 0 ? "solar:magnifer-outline" : _c, iconProps = _a.iconProps, onSearchChange = _a.onSearchChange, searchValue = _a.searchValue, value = _a.value, onValueChange = _a.onValueChange, placeholder = _a.placeholder, _d = _a.size, size = _d === void 0 ? "sm" : _d, _e = _a.className, className = _e === void 0 ? "flex-1 max-w-xs min-w-52" : _e, props = __rest(_a, ["searchPlaceholder", "searchIcon", "iconProps", "onSearchChange", "searchValue", "value", "onValueChange", "placeholder", "size", "className"]);
+    var _b = _a.searchPlaceholder, searchPlaceholder = _b === void 0 ? "Buscar..." : _b, _c = _a.searchIcon, searchIcon = _c === void 0 ? "solar:magnifer-outline" : _c, iconProps = _a.iconProps, onSearchChange = _a.onSearchChange, searchValue = _a.searchValue, value = _a.value, onValueChange = _a.onValueChange, placeholder = _a.placeholder, _d = _a.size, size = _d === void 0 ? "sm" : _d, _e = _a.className, className = _e === void 0 ? "flex-1 max-w-xs min-w-52" : _e, props = __rest$1(_a, ["searchPlaceholder", "searchIcon", "iconProps", "onSearchChange", "searchValue", "value", "onValueChange", "placeholder", "size", "className"]);
     // Use searchValue/onSearchChange if provided, otherwise fall back to value/onValueChange
     var inputValue = searchValue !== null && searchValue !== void 0 ? searchValue : value;
     var handleValueChange = onSearchChange !== null && onSearchChange !== void 0 ? onSearchChange : onValueChange;
-    return (jsxRuntime.jsx(Input, __assign({}, props, { className: className, size: size, placeholder: placeholder || searchPlaceholder, value: inputValue, onValueChange: handleValueChange, endContent: jsxRuntime.jsx(IconComponent, __assign({ icon: searchIcon, className: "text-default-400", size: "sm" }, iconProps)) })));
+    return (jsxRuntime.jsx(Input, __assign$1({}, props, { className: className, size: size, placeholder: placeholder || searchPlaceholder, value: inputValue, onValueChange: handleValueChange, endContent: jsxRuntime.jsx(IconComponent$1, __assign$1({ icon: searchIcon, className: "text-default-400", size: "sm" }, iconProps)) })));
 };
 
 /**
@@ -2657,10 +3821,10 @@ var SearchInput = function (_a) {
  * - Size: sm, md, lg (configurable)
  */
 var Select = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest$1(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
     var generatedId = React.useId();
     var selectId = id || generatedId;
-    return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react.Select, __assign({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
+    return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react.Select, __assign$1({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
                 label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
                 trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500 data-[disabled=true]:bg-default-100",
                 popoverContent: "[&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
@@ -2668,18 +3832,18 @@ var Select = function (_a) {
 };
 
 function AuraTable(_a) {
-    var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
-    return (jsxRuntime.jsxs(react.Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsxRuntime.jsx(react.TableHeader, { columns: columns, children: function (column) { return jsxRuntime.jsx(react.TableColumn, { children: column.label }, column.key); } }), jsxRuntime.jsx(react.TableBody, { items: items, children: function (item) { return (jsxRuntime.jsx(react.TableRow, { children: function (columnKey) { return (jsxRuntime.jsx(react.TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
+    var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest$1(_a, ["columns", "items", "renderCell", "children"]);
+    return (jsxRuntime.jsxs(react.Table, __assign$1({ removeWrapper: true, radius: "none" }, props, { children: [jsxRuntime.jsx(react.TableHeader, { columns: columns, children: function (column) { return jsxRuntime.jsx(react.TableColumn, { children: column.label }, column.key); } }), jsxRuntime.jsx(react.TableBody, { items: items, children: function (item) { return (jsxRuntime.jsx(react.TableRow, { children: function (columnKey) { return (jsxRuntime.jsx(react.TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
 }
 
 /**
  * Textarea component that wraps the HeroUI TextArea component.
  */
 var Textarea = function (_a) {
-    var id = _a.id, label = _a.label, placeholder = _a.placeholder, description = _a.description, errorMessage = _a.errorMessage, _b = _a.variant, variant = _b === void 0 ? "bordered" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d; _a.labelPlacement; var props = __rest(_a, ["id", "label", "placeholder", "description", "errorMessage", "variant", "radius", "size", "labelPlacement"]);
+    var id = _a.id, label = _a.label, placeholder = _a.placeholder, description = _a.description, errorMessage = _a.errorMessage, _b = _a.variant, variant = _b === void 0 ? "bordered" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d; _a.labelPlacement; var props = __rest$1(_a, ["id", "label", "placeholder", "description", "errorMessage", "variant", "radius", "size", "labelPlacement"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsx(react.Textarea, __assign({}, props, { id: autoId, label: label, variant: variant, radius: radius, size: size, labelPlacement: "outside", placeholder: placeholder, description: description, errorMessage: errorMessage, classNames: {
+    return (jsxRuntime.jsx(react.Textarea, __assign$1({}, props, { id: autoId, label: label, variant: variant, radius: radius, size: size, labelPlacement: "outside", placeholder: placeholder, description: description, errorMessage: errorMessage, classNames: {
             label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
             inputWrapper: "data-[focus=true]:!border-primary-500 data-[focus=true]:!border-primary-500",
         } })));
@@ -2702,7 +3866,7 @@ var defaultTranslations$2 = {
 var ThemePicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, className = _a.className, _b = _a.translations, translations = _b === void 0 ? {} : _b;
     // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations$2), translations);
+    var t = __assign$1(__assign$1({}, defaultTranslations$2), translations);
     var themes = [
         {
             key: "light",
@@ -3055,7 +4219,7 @@ var FilePreview = function (_a) {
     if (!(file === null || file === void 0 ? void 0 : file.type.startsWith("image/"))) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: "absolute inset-0  overflow-hidden z-10", children: [jsxRuntime.jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsxRuntime.jsx(react.Button, { isIconOnly: true, size: "sm", color: "danger", variant: "solid", className: "absolute top-2 right-2 sm:top-3 sm:right-3 z-20 bg-red-100 hover:bg-red-200 text-red-600 min-w-8 h-8 sm:min-w-10 sm:h-10", onPress: onRemove, "aria-label": removeAriaLabel, children: jsxRuntime.jsx(IconComponent, { icon: "heroicons:trash", size: "sm" }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "absolute inset-0  overflow-hidden z-10", children: [jsxRuntime.jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsxRuntime.jsx(react.Button, { isIconOnly: true, size: "sm", color: "danger", variant: "solid", className: "absolute top-2 right-2 sm:top-3 sm:right-3 z-20 bg-red-100 hover:bg-red-200 text-red-600 min-w-8 h-8 sm:min-w-10 sm:h-10", onPress: onRemove, "aria-label": removeAriaLabel, children: jsxRuntime.jsx(IconComponent$1, { icon: "heroicons:trash", size: "sm" }) })] }));
 };
 /**
  * Componente UploadDocument basado en Hero UI con funcionalidad mejorada
@@ -3094,7 +4258,7 @@ var UploadFile = function (_a) {
     var _q = React.useState(""), selectedImageUrl = _q[0], setSelectedImageUrl = _q[1];
     var _r = React.useState(null); _r[0]; var setOriginalFile = _r[1];
     // Combinar traducciones por defecto con las proporcionadas
-    var t = React.useMemo(function () { return (__assign(__assign({}, defaultTranslations$1), translations)); }, [translations]);
+    var t = React.useMemo(function () { return (__assign$1(__assign$1({}, defaultTranslations$1), translations)); }, [translations]);
     // Actualizar texto si se pasa como prop (retrocompatibilidad)
     var finalText = text || t.uploadText;
     var finalSubText = subText || t.subText;
@@ -3266,7 +4430,7 @@ var UploadFile = function (_a) {
     var subTextClasses = "\n\t\ttext-tiny text-center\n\t\t".concat(disabled ? "text-default-400" : "text-default-500 dark:text-default-400", "\n\t");
     return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(react.Card, { className: containerClasses, style: containerStyle, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxRuntime.jsxs(react.CardBody, { className: "flex flex-col items-center justify-center relative overflow-hidden ".concat(size === "micro" ? "gap-1" : size === "small" ? "gap-1.5" : "gap-3 sm:gap-4"), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [uploadImageRef.current && (jsxRuntime.jsx(FilePreview, { file: uploadImageRef.current, onRemove: handleRemoveImage, removeAriaLabel: t.removeFileAriaLabel })), jsxRuntime.jsx("div", { className: uploadImageRef.current
                                 ? "opacity-0"
-                                : "opacity-100 transition-opacity", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center ".concat(size === "micro" ? "gap-1" : size === "small" ? "gap-1.5" : "gap-3 sm:gap-4"), children: [jsxRuntime.jsx(IconComponent, { icon: icon, size: size === "micro" ? "sm" : size === "small" ? "md" : "xl", className: "".concat(size === "micro" ? "text-lg"
+                                : "opacity-100 transition-opacity", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center ".concat(size === "micro" ? "gap-1" : size === "small" ? "gap-1.5" : "gap-3 sm:gap-4"), children: [jsxRuntime.jsx(IconComponent$1, { icon: icon, size: size === "micro" ? "sm" : size === "small" ? "md" : "xl", className: "".concat(size === "micro" ? "text-lg"
                                             : size === "small" ? "text-xl sm:text-2xl"
                                                 : "sm:text-4xl lg:text-5xl", " ").concat(disabled ? "text-gray-400" : iconColor || "text-primary") }), shouldShowText && (jsxRuntime.jsxs("div", { className: "text-center ".concat(size === "micro" ? "px-0.5"
                                             : size === "small" ? "px-1"
@@ -3321,7 +4485,7 @@ function WizardSidebar(_a) {
                                         ? "bg-primary-600 text-white shadow-lg scale-110 border-2 border-primary-600"
                                         : isCompleted
                                             ? "border-2 border-primary-600 dark:border-primary-400 text-primary-600 dark:text-primary-400 bg-transparent"
-                                            : "border-2 border-primary-300 dark:border-primary-700 text-primary-400 dark:text-primary-500 bg-transparent"), children: step.icon ? (jsxRuntime.jsx(IconComponent, { icon: step.icon, className: "text-base" })) : isCompleted ? (jsxRuntime.jsx(IconComponent, { icon: "solar:check-circle-bold", className: "text-base" })) : (step.number) }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx("p", { className: "text-xs font-medium transition-colors leading-tight ".concat(isActive
+                                            : "border-2 border-primary-300 dark:border-primary-700 text-primary-400 dark:text-primary-500 bg-transparent"), children: step.icon ? (jsxRuntime.jsx(IconComponent$1, { icon: step.icon, className: "text-base" })) : isCompleted ? (jsxRuntime.jsx(IconComponent$1, { icon: "solar:check-circle-bold", className: "text-base" })) : (step.number) }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx("p", { className: "text-xs font-medium transition-colors leading-tight ".concat(isActive
                                             ? "text-primary-600 dark:text-primary-400"
                                             : isCompleted
                                                 ? "text-primary-600 dark:text-primary-400"
@@ -3351,8 +4515,8 @@ function WizardNavigation(_a) {
             onNext();
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "flex justify-between items-center ".concat(className), children: [showBack && !isFirstStep ? (jsxRuntime.jsx(react.Button, { variant: "light", size: "md", onPress: onBack, isDisabled: isBackDisabled || isLoading, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-left-bold", className: "text-base" }), children: effectiveBackText })) : (jsxRuntime.jsx("div", {}) // Spacer para mantener el botón "Siguiente" a la derecha
-            ), jsxRuntime.jsx(react.Button, { color: "primary", variant: "solid", size: "md", onPress: handleNext, isDisabled: isNextDisabled || isLoading, isLoading: isLoading, endContent: isLastStep ? (jsxRuntime.jsx(IconComponent, { icon: "solar:check-circle-bold", className: "text-base" })) : (jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-right-bold", className: "text-base" })), children: isLastStep ? effectiveFinishText : effectiveNextText })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex justify-between items-center ".concat(className), children: [showBack && !isFirstStep ? (jsxRuntime.jsx(react.Button, { variant: "light", size: "md", onPress: onBack, isDisabled: isBackDisabled || isLoading, startContent: jsxRuntime.jsx(IconComponent$1, { icon: "solar:alt-arrow-left-bold", className: "text-base" }), children: effectiveBackText })) : (jsxRuntime.jsx("div", {}) // Spacer para mantener el botón "Siguiente" a la derecha
+            ), jsxRuntime.jsx(react.Button, { color: "primary", variant: "solid", size: "md", onPress: handleNext, isDisabled: isNextDisabled || isLoading, isLoading: isLoading, endContent: isLastStep ? (jsxRuntime.jsx(IconComponent$1, { icon: "solar:check-circle-bold", className: "text-base" })) : (jsxRuntime.jsx(IconComponent$1, { icon: "solar:alt-arrow-right-bold", className: "text-base" })), children: isLastStep ? effectiveFinishText : effectiveNextText })] }));
 }
 
 /**
@@ -3406,7 +4570,7 @@ function Wizard(_a) {
     var steps = _a.steps, currentStep = _a.currentStep, onStepChange = _a.onStepChange, renderStep = _a.renderStep, _b = _a.navigationConfig, navigationConfig = _b === void 0 ? {} : _b, _c = _a.validations, validations = _c === void 0 ? [] : _c, onComplete = _a.onComplete, onBeforeStepChange = _a.onBeforeStepChange, onAfterStepChange = _a.onAfterStepChange, _d = _a.showSidebar, showSidebar = _d === void 0 ? true : _d, _e = _a.sidebarPosition, sidebarPosition = _e === void 0 ? "left" : _e, _f = _a.minHeight, minHeight = _f === void 0 ? "600px" : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, loadingText = _a.loadingText, _j = _a.isDisabled, isDisabled = _j === void 0 ? false : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k;
     var _l = React.useState(false), isTransitioning = _l[0], setIsTransitioning = _l[1];
     // Merge default translations with provided ones
-    var t = React.useMemo(function () { return (__assign(__assign({}, defaultTranslations), translations)); }, [translations]);
+    var t = React.useMemo(function () { return (__assign$1(__assign$1({}, defaultTranslations), translations)); }, [translations]);
     // Use loadingText prop for backward compatibility, but prefer translations
     var effectiveLoadingText = loadingText !== null && loadingText !== void 0 ? loadingText : t.loadingText;
     // Configuración de navegación con valores por defecto
@@ -3644,7 +4808,7 @@ var NavigationLoadingOverlay = function (_a) {
 var DrawerFiltersFooter = function (_a) {
     var onClearFilters = _a.onClearFilters, onCancel = _a.onCancel, onApplyFilters = _a.onApplyFilters, _b = _a.translations, translations = _b === void 0 ? {} : _b;
     var _c = translations.clearFilters, clearFilters = _c === void 0 ? "Limpiar filtro" : _c, _d = translations.cancel, cancel = _d === void 0 ? "Cancelar" : _d, _e = translations.applyFilters, applyFilters = _e === void 0 ? "Aplicar filtro" : _e;
-    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-10 bg-content1", children: [jsxRuntime.jsx(Button, { variant: "light", color: "primary", onPress: onClearFilters, className: "text-primary", children: clearFilters }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(Button, { variant: "bordered", color: "primary", onPress: onCancel, children: cancel }), jsxRuntime.jsx(Button, { variant: "solid", color: "primary", onPress: onApplyFilters, children: applyFilters })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-10 bg-content1", children: [jsxRuntime.jsx(Button$1, { variant: "light", color: "primary", onPress: onClearFilters, className: "text-primary", children: clearFilters }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(Button$1, { variant: "bordered", color: "primary", onPress: onCancel, children: cancel }), jsxRuntime.jsx(Button$1, { variant: "solid", color: "primary", onPress: onApplyFilters, children: applyFilters })] })] }));
 };
 
 /**
@@ -3679,7 +4843,7 @@ var RangeFilter = function (_a) {
         tooltipProducts: "productos",
         tooltipProduct: "producto",
     };
-    var t = __assign(__assign({}, defaultTranslations), translations);
+    var t = __assign$1(__assign$1({}, defaultTranslations), translations);
     // Function to check if a bar is in the selected range
     var isBarInRange = function (barStart, barEnd) {
         return barStart >= currentValue[0] && barEnd <= currentValue[1];
@@ -3721,7 +4885,7 @@ var RangeFilter = function (_a) {
                                 alignSelf: "flex-end",
                                 opacity: inRange ? 1 : 0.4,
                             }, title: "".concat(bar.priceRange, ": ").concat(bar.count, " ").concat(bar.count !== 1 ? t.tooltipProducts : t.tooltipProduct), children: jsxRuntime.jsx("div", { className: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 px-2 py-1 bg-default-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10", children: jsxRuntime.jsxs("div", { className: "text-center", children: [jsxRuntime.jsx("div", { className: "font-medium", children: formatValue(bar.midPrice) }), jsxRuntime.jsxs("div", { className: "text-xs opacity-75", children: [bar.count, " ", bar.count !== 1 ? t.tooltipProducts : t.tooltipProduct] })] }) }) }, "".concat(bar.binStart, "-").concat(bar.binEnd)));
-                    }) }) }), jsxRuntime.jsx("div", { className: "px-2", children: jsxRuntime.jsx(react.Slider, __assign({ step: step, minValue: minValue, maxValue: maxValue, defaultValue: [minValue, maxValue], value: currentValue, onChange: function (newValue) {
+                    }) }) }), jsxRuntime.jsx("div", { className: "px-2", children: jsxRuntime.jsx(react.Slider, __assign$1({ step: step, minValue: minValue, maxValue: maxValue, defaultValue: [minValue, maxValue], value: currentValue, onChange: function (newValue) {
                         var _a = newValue, min = _a[0], max = _a[1];
                         setCurrentValue([min, max]);
                         onChange([min, max]);
@@ -3835,7 +4999,7 @@ var FilterSection = function (_a) {
             "--tw-shadow-colored": "var(--heroui-box-shadow-medium)",
         }, children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center justify-between w-full text-left p-4", onClick: handleToggleExpanded, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(H2, { className: "text-base font-normal text-foreground", children: filter.title }), hasActiveFilter() && (jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
                                     backgroundColor: "hsl(var(--heroui-default) / var(--heroui-default-opacity, var(--tw-bg-opacity)))",
-                                }, children: getActiveFilterCount() }))] }), jsxRuntime.jsx(IconComponent, { icon: internalExpanded
+                                }, children: getActiveFilterCount() }))] }), jsxRuntime.jsx(IconComponent$1, { icon: internalExpanded
                             ? "solar:alt-arrow-down-outline"
                             : "solar:alt-arrow-right-outline", size: "sm", className: "text-default-500" })] }), internalExpanded && (jsxRuntime.jsxs("div", { className: "px-4 pb-4", onClick: function (e) { return e.stopPropagation(); }, children: [filter.description && (jsxRuntime.jsx(P, { className: "text-default-500 mb-4", children: filter.description })), renderFilterContent()] }))] }));
 };
@@ -3958,7 +5122,7 @@ var DrawerFilters = function (_a) {
     var handleFilterChange = React.useCallback(function (filterKey, value) {
         setFilterValues(function (prev) {
             var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[filterKey] = value, _a)));
+            return (__assign$1(__assign$1({}, prev), (_a = {}, _a[filterKey] = value, _a)));
         });
     }, []);
     // Clear all filters
@@ -4048,7 +5212,7 @@ var DrawerFilters = function (_a) {
 DrawerFilters.displayName = "DrawerFilters";
 
 var Modal = function (props) {
-    return (jsxRuntime.jsx(react.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
+    return (jsxRuntime.jsx(react.Modal, __assign$1({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
 };
 
 var ModalContent = react.ModalContent;
@@ -4075,16 +5239,16 @@ var paddingClasses = {
  * - Hereda de HeroUI Card con personalización BeweOS
  */
 var Card = function (_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest(_a, ["children", "className", "shadow", "radius", "padding"]);
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest$1(_a, ["children", "className", "shadow", "radius", "padding"]);
     var paddingClass = paddingClasses[padding];
     var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
-    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
+    return (jsxRuntime.jsx(react.Card, __assign$1({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
 };
 
 /**
  * @file This file contains the theme configurations for the application.
  */
-var ALL_THEMES = __spreadArray(["light", "dark"], Object.keys(themeColors), true);
+var ALL_THEMES = __spreadArray$1(["light", "dark"], Object.keys(themeColors$1), true);
 
 /**
  * Custom hook to manage the theme state and side effects.
@@ -4168,13 +5332,13 @@ var AuraToastProvider = function (_a) {
             clearTimeout(timerRef.current);
             timerRef.current = null;
         }
-        setToast(function (currentToast) { return (__assign(__assign({}, currentToast), { isVisible: false })); });
+        setToast(function (currentToast) { return (__assign$1(__assign$1({}, currentToast), { isVisible: false })); });
     }, []);
     var showToast = React.useCallback(function (options) {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
-        setToast(__assign({ isVisible: true }, options));
+        setToast(__assign$1({ isVisible: true }, options));
         var duration = options.duration === undefined ? 3000 : options.duration;
         if (duration > 0) {
             timerRef.current = setTimeout(function () {
@@ -4232,7 +5396,7 @@ exports.AuraAutocomplete = AuraAutocomplete;
 exports.AuraTable = AuraTable;
 exports.AuraToastProvider = AuraToastProvider;
 exports.BreadcrumbsComponent = BreadcrumbsComponent;
-exports.Button = Button;
+exports.Button = Button$1;
 exports.Card = Card;
 exports.Chip = Chip;
 exports.ColorSelector = ColorSelector;
@@ -4246,7 +5410,8 @@ exports.H2 = H2;
 exports.H3 = H3;
 exports.H4 = H4;
 exports.HeaderComponent = HeaderComponent;
-exports.IconComponent = IconComponent;
+exports.IconComponent = IconComponent$1;
+exports.ImagePreview = ImagePreview;
 exports.Input = Input;
 exports.MenuComponent = MenuComponent;
 exports.Modal = Modal;
@@ -4281,8 +5446,8 @@ exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
 exports.defaultTranslations = defaultTranslations$3;
-exports.sizeMap = sizeMap;
-exports.themeColors = themeColors;
+exports.sizeMap = sizeMap$1;
+exports.themeColors = themeColors$1;
 exports.useAuraToast = useAuraToast;
 exports.useNavigationLoading = useNavigationLoading;
 exports.useThemeContext = useThemeContext;