@beweco/aurora-ui 0.1.22 → 0.1.24

package/dist/index.cjs.js

@@ -26,18 +26,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+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$1.apply(this, arguments);
+    return __assign.apply(this, arguments);
 };
 
-function __rest$1(s, e) {
+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];
@@ -87,7 +87,7 @@ function __generator(thisArg, body) {
     }
 }
 
-function __spreadArray$1(to, from, pack) {
+function __spreadArray(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$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 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 DatePicker = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest$1(_a, ["label", "id", "size"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsx(react.DatePicker, __assign$1({ label: label, size: size, labelPlacement: "outside", classNames: {
+    return (jsxRuntime.jsx(react.DatePicker, __assign({ 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$1(_a, ["label", "id", "size"]);
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsx(react.DateRangePicker, __assign$1({ label: label, size: size, labelPlacement: "outside", classNames: {
+    return (jsxRuntime.jsx(react.DateRangePicker, __assign({ 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$1 = {
+var sizeMap = {
     sm: "16px",
     md: "20px",
     lg: "24px",
     xl: "32px",
 };
-var IconComponent$1 = function (_a) {
+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$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 }) })));
+    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 }) })));
 };
 
 /**
@@ -167,17 +167,17 @@ var IconComponent$1 = 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$1(_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(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
     var generatedId = React.useId();
     var inputId = id || generatedId;
-    return (jsxRuntime.jsx(react.Input, __assign$1({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
+    return (jsxRuntime.jsx(react.Input, __assign({}, 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$a = {
+var defaultTranslations$b = {
     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$1(__assign$1({}, defaultTranslations$a), translations);
+    var t = __assign(__assign({}, defaultTranslations$b), 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$1(__assign$1({}, prev), { startDate: date, endDate: null })); });
+        setNewHoliday(function (prev) { return (__assign(__assign({}, 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$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 }));
+            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 }));
         });
     }, []);
     /**
@@ -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$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
+    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
                             ? { start: newHoliday.startDate, end: newHoliday.endDate }
-                            : 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 })) })] }));
+                            : 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 })) })] }));
 };
 
 var H2 = function (_a) {
-    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 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 P = function (_a) {
-    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 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 defaultTranslations$9 = {
+var defaultTranslations$a = {
     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$1(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign$1(__assign$1({}, defaultTranslations$9), 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(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
+    var t = __assign(__assign({}, defaultTranslations$a), 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$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) {
+    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) {
                                         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$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));
+                                                                    : "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));
                                     }) }) }))] }) }), 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$1, { 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, { 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$1(_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(_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$1({}, 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({}, 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$1 = {
+var themeColors = {
     "blue-light": {
         extend: "light",
         colors: {
@@ -932,7 +932,7 @@ var ColorSelector = function (_a) {
      * - label: the base color name (e.g., "blue")
      * - color: the primary color hex value
      */
-    var colorOptions = Object.entries(themeColors$1)
+    var colorOptions = Object.entries(themeColors)
         .filter(function (_a) {
         var themeData = _a[1];
         var themeMode = themeData.extend;
@@ -963,7 +963,7 @@ var ColorSelector = function (_a) {
  * 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"]);
+    var _b = _a.color, color = _b === void 0 ? "default" : _b, props = __rest(_a, ["color"]);
     // Colores estándar de HeroUI
     var standardColors = [
         "default",
@@ -975,7 +975,7 @@ var Chip = function (_a) {
     ];
     // 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 })));
+        return (jsxRuntime.jsx(react.Chip, __assign({}, props, { color: color, onClose: props.onClose })));
     }
     // Si es un color personalizado, aplicar clases CSS específicas
     var customColorClasses = {
@@ -986,11 +986,11 @@ var Chip = function (_a) {
         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) })));
+    return (jsxRuntime.jsx(react.Chip, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
 };
 
 // Traducciones por defecto en español
-var defaultTranslations$8 = {
+var defaultTranslations$9 = {
     dayOption: "Día específico",
     dateRangeOption: "Rango de fechas",
     selectDateAriaLabel: "Seleccionar fecha",
@@ -1001,1224 +1001,121 @@ var defaultTranslations$8 = {
  * 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();
+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$9), 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,
+        });
     };
-    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";
+    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({ 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)))] }));
+};
 
-// 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 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 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";
+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 })));
+};
 
-React.createContext(undefined);
+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 })));
+};
 
 /**
- * @file This file contains the theme configurations for the application.
+ * 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 }
+ *   ]}
+ * />
+ * ```
  */
-__spreadArray(["light", "dark"], Object.keys(themeColors));
+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") })] })] }));
+};
+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";
 
-React.createContext(undefined);
+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";
 
-var defaultTranslations$7 = {
+var defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
     emptyStateText: "No hay imágenes para mostrar",
@@ -2246,12 +1143,12 @@ var normalizeImages = function (images) {
         if (typeof img === "string") {
             return { src: img, id: "img-".concat(index) };
         }
-        return __assign$1(__assign$1({}, img), { id: img.id || "img-".concat(index) });
+        return __assign(__assign({}, 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 t = __assign(__assign({}, defaultTranslations$8), translations);
     var normalizedImages = normalizeImages(images);
     var sizeClass = sizeClasses[size];
     var radiusClass = radiusClasses[radius];
@@ -2290,7 +1187,7 @@ function normalizeClass(value) {
 }
 var getSectionClasses = function (isCollapsed, sectionClassesProp) {
     if (sectionClassesProp === void 0) { sectionClassesProp = {}; }
-    return (__assign$1(__assign$1({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
+    return (__assign(__assign({}, 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", {
@@ -2303,7 +1200,7 @@ var getSectionClasses = function (isCollapsed, sectionClassesProp) {
 };
 var getItemClasses = function (isCollapsed, itemClassesProp) {
     if (itemClassesProp === void 0) { itemClassesProp = {}; }
-    return (__assign$1(__assign$1({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
+    return (__assign(__assign({}, 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, {
@@ -2336,7 +1233,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$1(_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(_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);
@@ -2354,7 +1251,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$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); } })));
+        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>
@@ -2366,7 +1263,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
         if (isNestType) {
             item.href = undefined;
         }
-        return (React.createElement(react.ListboxItem, __assign$1({}, item, { key: item.key, classNames: {
+        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, classNames: {
                 base: react.cn({
                     "h-auto p-0": !isCollapsed && isNestType,
                 }, {
@@ -2376,10 +1273,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$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 }),
+                : ((_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$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
+                                }, 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);
                                         })
@@ -2388,7 +1285,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$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: {
+                    }, 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]);
@@ -2403,13 +1300,13 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
             return renderNestItem(item);
         }
         var isItemSelected = selected === item.key;
-        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: {
+        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$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));
+            }, 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$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) {
+    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 &&
@@ -2451,13 +1348,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$1, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent$1, { 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, { 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, { 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 })) }) })] }) })] }));
+                                                : "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 })) }) })] }) })] }));
 });
 
 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$1(_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(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
     var progressPercentage = Math.min((currentStep / totalSteps) * 100, 100);
     var colorClasses = {
         primary: "bg-primary",
@@ -2472,7 +1369,7 @@ var StepIndicator = function (_a) {
     var stepText = stepTextFormatter
         ? stepTextFormatter(currentStep, totalSteps)
         : defaultStepText(currentStep, totalSteps);
-    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, "%") } }) })] })));
+    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, "%") } }) })] })));
 };
 
 /*
@@ -2539,13 +1436,13 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     ];
 }
 
-var defaultTranslations$6 = {
+var defaultTranslations$7 = {
     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$1(_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(_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$1(__assign$1({}, defaultTranslations$6), translations);
+    var t = __assign(__assign({}, defaultTranslations$7), translations);
     var steps = React.useMemo(function () {
         if (typeof stepsProp === "number") {
             return Array.from({ length: stepsProp }, function () { return ({}); });
@@ -2610,7 +1507,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$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, {
+                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",
@@ -2629,7 +1526,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$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", {
+                                                    }, 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",
@@ -2649,13 +1546,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$1(_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(_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$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 })] })] })) }));
+    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 })] })] })) }));
 });
 MultiStepSidebar.displayName = "MultiStepSidebar";
 
@@ -2663,9 +1560,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$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 _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 MultiStepWizard = function (_a) {
@@ -2676,7 +1573,7 @@ var MultiStepWizard = function (_a) {
             setPage(0);
         }
     }, [isOpen]);
-    var t = __assign$1({
+    var t = __assign({
         continue: "Continue",
         goBack: "Back",
         cancel: "Cancel",
@@ -2733,7 +1630,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$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: {
+    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: {
                     isDisabled: page === 0,
                     onPress: onBack,
                     children: t.goBack,
@@ -2748,8 +1645,8 @@ var MultiStepWizard = function (_a) {
 };
 
 var Pagination = function (_a) {
-    _a.size; var props = __rest$1(_a, ["size"]);
-    return jsxRuntime.jsx(react.Pagination, __assign$1({ showControls: true, isCompact: true }, props));
+    _a.size; var props = __rest(_a, ["size"]);
+    return jsxRuntime.jsx(react.Pagination, __assign({ showControls: true, isCompact: true }, props));
 };
 
 var Andorra = function () {
@@ -3184,7 +2081,7 @@ var countries = [
 ];
 var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
 // Traducciones por defecto
-var defaultTranslations$5 = {
+var defaultTranslations$6 = {
     label: "Teléfono",
     placeholder: "Número de teléfono",
     searchPlaceholder: "Buscar país...",
@@ -3202,7 +2099,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$1(__assign$1({}, defaultTranslations$5), translations);
+    var t = __assign(__assign({}, defaultTranslations$6), translations);
     var finalLabel = label || t.label;
     React.useEffect(function () {
         if (value) {
@@ -3281,7 +2178,7 @@ var Phone = function (_a) {
                                     : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3", children: jsxRuntime.jsx(FlagIcon, { countryCode: country.country, size: "md" }) }), jsxRuntime.jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: country.code })] }, "".concat(country.code, "-").concat(country.country))); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
-var defaultTranslations$4 = {
+var defaultTranslations$5 = {
     message: "The Winter 2024 Release is here: new editor, analytics API, and so much more.",
     buttonText: "Explore",
     closeButtonLabel: "Close Banner",
@@ -3291,7 +2188,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$1(__assign$1({}, defaultTranslations$4), translations);
+    var t = __assign(__assign({}, defaultTranslations$5), translations);
     var finalMessage = message || t.message;
     var finalButtonText = buttonText || t.buttonText;
     var handleClose = function () {
@@ -3308,16 +2205,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$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: {
+    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: {
                     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$1, { "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, { "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$1(_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(_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") {
@@ -3380,7 +2277,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$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", {
+                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: {
@@ -3397,7 +2294,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$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", {
+                                            }, 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
@@ -3570,20 +2467,20 @@ class $35ea8db9cb2ccb90$export$680ea196effce5f {
 }
 
 var Switch = function (_a) {
-    var id = _a.id, props = __rest$1(_a, ["id"]);
+    var id = _a.id, props = __rest(_a, ["id"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return jsxRuntime.jsx(react.Switch, __assign$1({}, props, { id: autoId }));
+    return jsxRuntime.jsx(react.Switch, __assign({}, 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$1(_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(_a, ["label", "id", "size", "radius", "variant"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    return (jsxRuntime.jsx(react.TimeInput, __assign$1({}, props, { id: autoId, size: size, radius: radius, variant: variant, label: label, labelPlacement: "outside-left", classNames: {
+    return (jsxRuntime.jsx(react.TimeInput, __assign({}, 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",
         } })));
@@ -3620,7 +2517,7 @@ var TimeInput = function (_a) {
  * />
  * ```
  */
-var defaultTranslations$3 = {
+var defaultTranslations$4 = {
     /** Label for the start time input field */
     from: "Desde",
     /** Label for the end time input field */
@@ -3678,7 +2575,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$1(__assign$1({}, defaultTranslations$3), translations);
+    var t = __assign(__assign({}, defaultTranslations$4), translations);
     /**
      * @function validateTimeSlots
      * @description Validates all time slots to ensure the "from" time is not after the "to" time.
@@ -3688,13 +2585,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$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)))();
+                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)))();
                 if (fromTime.compare(toTime) > 0) {
-                    return __assign$1(__assign$1({}, slot), { error: "From time cannot be after to time" });
+                    return __assign(__assign({}, slot), { error: "From time cannot be after to time" });
                 }
             }
-            return __assign$1(__assign$1({}, slot), { error: null });
+            return __assign(__assign({}, slot), { error: null });
         });
     };
     /**
@@ -3728,7 +2625,7 @@ var ScheduleRow = function (_a) {
      * @description Toggles the `isOpen` status of the schedule for the day.
      */
     var handleToggleDay = function () {
-        onChange(__assign$1(__assign$1({}, daySchedule), { isOpen: !daySchedule.isOpen }));
+        onChange(__assign(__assign({}, daySchedule), { isOpen: !daySchedule.isOpen }));
     };
     /**
      * @function handleTimeChange
@@ -3739,11 +2636,11 @@ var ScheduleRow = function (_a) {
      */
     var handleTimeChange = function (index, field, value) {
         var _a;
-        var newTimeSlots = __spreadArray$1([], daySchedule.timeSlots, true);
+        var newTimeSlots = __spreadArray([], daySchedule.timeSlots, true);
         // Update the specific field
-        newTimeSlots[index] = __assign$1(__assign$1({}, newTimeSlots[index]), (_a = {}, _a[field] = fromTimeValue(value), _a));
+        newTimeSlots[index] = __assign(__assign({}, newTimeSlots[index]), (_a = {}, _a[field] = fromTimeValue(value), _a));
         var validatedSlots = validateTimeSlots(newTimeSlots);
-        onChange(__assign$1(__assign$1({}, daySchedule), { timeSlots: validatedSlots }));
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
     };
     /**
      * @function handleAddTimeSlot
@@ -3752,9 +2649,9 @@ var ScheduleRow = function (_a) {
      */
     var handleAddTimeSlot = function () {
         // Add a new empty slot
-        var newTimeSlots = __spreadArray$1(__spreadArray$1([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
+        var newTimeSlots = __spreadArray(__spreadArray([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
         var validatedSlots = validateTimeSlots(newTimeSlots);
-        onChange(__assign$1(__assign$1({}, daySchedule), { timeSlots: validatedSlots }));
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
     };
     /**
      * @function handleRemoveTimeSlot
@@ -3768,7 +2665,7 @@ var ScheduleRow = function (_a) {
         if (newTimeSlots.length === 0) {
             newTimeSlots = [{ from: "", to: "" }];
         }
-        onChange(__assign$1(__assign$1({}, daySchedule), { timeSlots: newTimeSlots }));
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
     };
     /**
      * @function getSlotsToDisplay
@@ -3785,12 +2682,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$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) {
+    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) {
                     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$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)));
+                    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)));
                 }) }))] }, day));
 };
 
@@ -3804,11 +2701,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$1(_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(_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$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)) })));
+    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)) })));
 };
 
 /**
@@ -3821,29 +2718,104 @@ 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$1(_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(_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$1({}, 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({}, 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",
             } })) }));
 };
 
+var defaultTranslations$3 = {
+    username: "tu_negocio",
+    sendMessage: "Enviar mensaje",
+    viewMore: "ver más",
+    viewLess: "ver menos",
+    timeAgo: "hace unos momentos",
+    imageAlt: "Vista previa de red social",
+};
+/**
+ * SocialMediaPreview component for displaying social media post previews
+ * across multiple platforms: Instagram, Facebook, TikTok, and Twitter.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaPreview
+ *   platform="instagram"
+ *   imageUrl="/path/to/image.jpg"
+ *   caption="Check out our new product!"
+ *   variant="full"
+ * />
+ * ```
+ */
+var SocialMediaPreview = function (_a) {
+    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? true : _c, _d = _a.maxCaptionLength, maxCaptionLength = _d === void 0 ? 125 : _d, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.imageProps, imageProps = _g === void 0 ? {} : _g;
+    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var displayUsername = username || t.username;
+    var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
+    var getTruncatedCaption = function () {
+        if (variant !== "compact") {
+            return caption;
+        }
+        if (!shouldTruncate || showFullCaption) {
+            return caption;
+        }
+        var firstLineEnd = caption.indexOf("\n");
+        var truncateAt = firstLineEnd > 0 && firstLineEnd < maxCaptionLength
+            ? firstLineEnd
+            : maxCaptionLength;
+        return "".concat(caption.substring(0, truncateAt).trim(), "...");
+    };
+    var displayCaption = getTruncatedCaption();
+    // Render Instagram Preview
+    var renderInstagram = function () {
+        if (variant === "story") {
+            return renderInstagramStory();
+        }
+        return renderInstagramPost();
+    };
+    var renderInstagramStory = function () { return (jsxRuntime.jsxs("div", { className: "relative w-full bg-gradient-to-b from-gray-900 to-gray-800 rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black bg-opacity-20" })] })), showHeader && (jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 p-4", children: [jsxRuntime.jsx("div", { className: "w-full h-0.5 bg-white bg-opacity-30 rounded-full mb-3", children: jsxRuntime.jsx("div", { className: "h-full w-1/3 bg-white rounded-full" }) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center border-2 border-white", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-white drop-shadow-lg", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-xs text-white text-opacity-90", children: "hace 5min" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:play-circle-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:volume-loud-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-white drop-shadow-lg" })] })] })] })), jsxRuntime.jsxs("div", { className: "absolute bottom-6 left-0 right-0 z-20 px-4 flex items-center gap-3", children: [jsxRuntime.jsx("input", { type: "text", placeholder: t.sendMessage, className: "flex-1 bg-transparent border-2 border-white border-opacity-70 rounded-full px-4 py-2 text-white placeholder-white placeholder-opacity-70 text-sm", readOnly: true }), jsxRuntime.jsx(IconComponent, { icon: "solar:heart-outline", className: "text-2xl text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-outline", className: "text-2xl text-white drop-shadow-lg" })] })] })); };
+    var renderInstagramPost = function () { return (jsxRuntime.jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsxRuntime.jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800 overflow-hidden rounded-none ".concat(variant === "full" ? "h-80" : ""), style: variant === "compact" ? { aspectRatio: "1/1" } : {}, children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover rounded-none", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsxs("div", { className: "text-sm text-left", children: [jsxRuntime.jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsxRuntime.jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", children: displayCaption })] }), shouldTruncate && onToggleCaption && variant !== "compact" && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
+                                    e.stopPropagation();
+                                    onToggleCaption();
+                                }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs block", children: showFullCaption ? t.viewLess : t.viewMore }))] }), variant !== "compact" && (jsxRuntime.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 text-left", children: t.timeAgo }))] })] })); };
+    // Render Facebook Preview
+    var renderFacebook = function () { return (jsxRuntime.jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-xl overflow-hidden", " ").concat(className), children: [showHeader && (jsxRuntime.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1", children: [t.timeAgo, " \u00B7 ", jsxRuntime.jsx(IconComponent, { icon: "solar:earth-bold", className: "text-xs" })] })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-xl text-gray-600 dark:text-gray-400" })] }) })), jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx("p", { className: "text-sm text-gray-900 dark:text-white whitespace-pre-wrap break-words", children: displayCaption }) }), imageUrl && (jsxRuntime.jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800", children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)) })), jsxRuntime.jsx("div", { className: "p-3 border-t border-gray-200 dark:border-gray-800", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-around", children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:like-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Me gusta" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Comentar" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Compartir" })] })] }) })] })); };
+    // Render TikTok Preview
+    var renderTikTok = function () { return (jsxRuntime.jsxs("div", { className: "relative w-full bg-black rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black opacity-60" })] })), jsxRuntime.jsxs("div", { className: "absolute right-2 bottom-20 flex flex-col items-center gap-6 z-20", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full border-2 border-white bg-gray-900 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center -mt-3 border-2 border-black", children: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-bold", className: "text-xs text-white" }) })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "24.5K" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "1,234" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "453" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "892" })] }), jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-800 border border-gray-700 flex items-center justify-center", children: jsxRuntime.jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-xl text-white" }) })] }), jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-14 z-20 p-4", children: [jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-white mb-1", children: ["@", displayUsername] }), jsxRuntime.jsx("p", { className: "text-sm text-white mb-2 line-clamp-2", children: displayCaption }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-white", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-sm" }), jsxRuntime.jsxs("span", { className: "truncate", children: ["Sonido original - ", displayUsername] })] })] })] })); };
+    // Render Twitter Preview
+    var renderTwitter = function () { return (jsxRuntime.jsx("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-xl border border-gray-200 dark:border-gray-800" : "rounded-xl border border-gray-200 dark:border-gray-800", " ").concat(className), children: jsxRuntime.jsx("div", { className: "p-4", children: jsxRuntime.jsxs("div", { className: "flex gap-3", children: [jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-1", children: [jsxRuntime.jsx("span", { className: "font-bold text-gray-900 dark:text-white text-sm truncate", children: displayUsername }), jsxRuntime.jsx(IconComponent, { icon: "solar:verified-check-bold", className: "text-blue-500 text-base flex-shrink-0" }), jsxRuntime.jsxs("span", { className: "text-gray-500 dark:text-gray-400 text-sm truncate", children: ["@", displayUsername.toLowerCase().replace(/\s/g, "_")] }), jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: "\u00B7 2h" })] }), jsxRuntime.jsx("p", { className: "text-gray-900 dark:text-white text-sm mb-3 whitespace-pre-wrap break-words", children: displayCaption }), imageUrl && (jsxRuntime.jsx("div", { className: "rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 mb-3", children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex items-center justify-between max-w-md mt-3", children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "234" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:repost-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "1.2K" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "5.6K" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chart-2-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "12K" })] }), jsxRuntime.jsx("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-lg" }) })] })] })] }) }) })); };
+    // Main render logic
+    switch (platform) {
+        case "instagram":
+            return renderInstagram();
+        case "facebook":
+            return renderFacebook();
+        case "tiktok":
+            return renderTikTok();
+        case "twitter":
+            return renderTwitter();
+        default:
+            return renderInstagram();
+    }
+};
+
 function AuraTable(_a) {
-    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)); } })] })));
+    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)); } })] })));
 }
 
 /**
  * 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$1(_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(_a, ["id", "label", "placeholder", "description", "errorMessage", "variant", "radius", "size", "labelPlacement"]);
     var generatedId = React.useId();
     var autoId = id || generatedId;
-    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: {
+    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: {
             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",
         } })));
@@ -3866,7 +2838,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$1(__assign$1({}, defaultTranslations$2), translations);
+    var t = __assign(__assign({}, defaultTranslations$2), translations);
     var themes = [
         {
             key: "light",
@@ -4219,7 +3191,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$1, { 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, { icon: "heroicons:trash", size: "sm" }) })] }));
 };
 /**
  * Componente UploadDocument basado en Hero UI con funcionalidad mejorada
@@ -4258,7 +3230,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$1(__assign$1({}, defaultTranslations$1), translations)); }, [translations]);
+    var t = React.useMemo(function () { return (__assign(__assign({}, defaultTranslations$1), translations)); }, [translations]);
     // Actualizar texto si se pasa como prop (retrocompatibilidad)
     var finalText = text || t.uploadText;
     var finalSubText = subText || t.subText;
@@ -4430,7 +3402,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$1, { 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, { 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"
@@ -4485,7 +3457,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$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
+                                            : "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
                                             ? "text-primary-600 dark:text-primary-400"
                                             : isCompleted
                                                 ? "text-primary-600 dark:text-primary-400"
@@ -4515,8 +3487,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$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 })] }));
+    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 })] }));
 }
 
 /**
@@ -4570,7 +3542,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$1(__assign$1({}, defaultTranslations), translations)); }, [translations]);
+    var t = React.useMemo(function () { return (__assign(__assign({}, 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
@@ -4808,7 +3780,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$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 })] })] }));
+    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 })] })] }));
 };
 
 /**
@@ -4843,7 +3815,7 @@ var RangeFilter = function (_a) {
         tooltipProducts: "productos",
         tooltipProduct: "producto",
     };
-    var t = __assign$1(__assign$1({}, defaultTranslations), translations);
+    var t = __assign(__assign({}, 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];
@@ -4885,7 +3857,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$1({ 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({ 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]);
@@ -4999,7 +3971,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$1, { icon: internalExpanded
+                                }, children: getActiveFilterCount() }))] }), jsxRuntime.jsx(IconComponent, { 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()] }))] }));
 };
@@ -5122,7 +4094,7 @@ var DrawerFilters = function (_a) {
     var handleFilterChange = React.useCallback(function (filterKey, value) {
         setFilterValues(function (prev) {
             var _a;
-            return (__assign$1(__assign$1({}, prev), (_a = {}, _a[filterKey] = value, _a)));
+            return (__assign(__assign({}, prev), (_a = {}, _a[filterKey] = value, _a)));
         });
     }, []);
     // Clear all filters
@@ -5212,7 +4184,7 @@ var DrawerFilters = function (_a) {
 DrawerFilters.displayName = "DrawerFilters";
 
 var Modal = function (props) {
-    return (jsxRuntime.jsx(react.Modal, __assign$1({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
+    return (jsxRuntime.jsx(react.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
 };
 
 var ModalContent = react.ModalContent;
@@ -5239,16 +4211,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$1(_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(_a, ["children", "className", "shadow", "radius", "padding"]);
     var paddingClass = paddingClasses[padding];
     var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
-    return (jsxRuntime.jsx(react.Card, __assign$1({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
+    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
 };
 
 /**
  * @file This file contains the theme configurations for the application.
  */
-var ALL_THEMES = __spreadArray$1(["light", "dark"], Object.keys(themeColors$1), true);
+var ALL_THEMES = __spreadArray(["light", "dark"], Object.keys(themeColors), true);
 
 /**
  * Custom hook to manage the theme state and side effects.
@@ -5332,13 +4304,13 @@ var AuraToastProvider = function (_a) {
             clearTimeout(timerRef.current);
             timerRef.current = null;
         }
-        setToast(function (currentToast) { return (__assign$1(__assign$1({}, currentToast), { isVisible: false })); });
+        setToast(function (currentToast) { return (__assign(__assign({}, currentToast), { isVisible: false })); });
     }, []);
     var showToast = React.useCallback(function (options) {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
-        setToast(__assign$1({ isVisible: true }, options));
+        setToast(__assign({ isVisible: true }, options));
         var duration = options.duration === undefined ? 3000 : options.duration;
         if (duration > 0) {
             timerRef.current = setTimeout(function () {
@@ -5396,7 +4368,7 @@ exports.AuraAutocomplete = AuraAutocomplete;
 exports.AuraTable = AuraTable;
 exports.AuraToastProvider = AuraToastProvider;
 exports.BreadcrumbsComponent = BreadcrumbsComponent;
-exports.Button = Button$1;
+exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
 exports.ColorSelector = ColorSelector;
@@ -5410,7 +4382,7 @@ exports.H2 = H2;
 exports.H3 = H3;
 exports.H4 = H4;
 exports.HeaderComponent = HeaderComponent;
-exports.IconComponent = IconComponent$1;
+exports.IconComponent = IconComponent;
 exports.ImagePreview = ImagePreview;
 exports.Input = Input;
 exports.MenuComponent = MenuComponent;
@@ -5432,6 +4404,7 @@ exports.RowSteps = RowSteps;
 exports.ScheduleRow = ScheduleRow;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
+exports.SocialMediaPreview = SocialMediaPreview;
 exports.StepIndicator = StepIndicator;
 exports.SwitchComponent = Switch;
 exports.Textarea = Textarea;
@@ -5445,9 +4418,9 @@ exports.VerticalSteps = VerticalSteps;
 exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
-exports.defaultTranslations = defaultTranslations$3;
-exports.sizeMap = sizeMap$1;
-exports.themeColors = themeColors$1;
+exports.defaultTranslations = defaultTranslations$4;
+exports.sizeMap = sizeMap;
+exports.themeColors = themeColors;
 exports.useAuraToast = useAuraToast;
 exports.useNavigationLoading = useNavigationLoading;
 exports.useThemeContext = useThemeContext;