@beweco/aurora-ui 0.1.6 → 0.1.8

package/dist/index.esm.js

@@ -1,8 +1,10 @@
-import { Autocomplete, Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, ListboxItem, Popover, PopoverTrigger, Tooltip, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Spacer, Avatar, Card as Card$1, CardBody, CardFooter, Select as Select$1, Switch as Switch$1, TimeInput as TimeInput$1, Chip, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Pagination as Pagination$1 } from '@heroui/react';
+import { Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Chip, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Avatar, CardBody, CardFooter, Pagination as Pagination$1, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1 } from '@heroui/react';
 export * from '@heroui/react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useId, useState, useCallback, createElement, useRef, useEffect, useLayoutEffect, createContext, useContext, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useId, useState, useCallback, useMemo, createContext, useContext, createElement, useRef, useEffect, useLayoutEffect } from 'react';
 import { Icon } from '@iconify/react';
+import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip, Area } from 'recharts';
+import { LazyMotion, domAnimation, m } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { useTheme } from '@heroui/use-theme';
 
@@ -61,25 +63,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/**
- * AutoComplete genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
- *
- * Reglas aplicadas:
- * - Variant: Bordered (por defecto)
- * - Radius: md (por defecto)
- * - labelPlacement: Outside
- * - Size: sm, md, lg (configurable)
- */
-var AutoComplete = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, props = __rest(_a, ["label", "id", "size", "variant", "radius"]);
-    var generatedId = useId();
-    var autoId = id || generatedId;
-    return (jsxs("div", { children: [label && (jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsx(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",
-                } }))] }));
-};
-
 var HolidayType;
 (function (HolidayType) {
     HolidayType["SingleDay"] = "singleDay";
@@ -151,10 +134,11 @@ var Input = function (_a) {
     return (jsx(Input$1, __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$3 = {
+var defaultTranslations$7 = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -178,7 +162,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 var AddHolidayForm = function (_a) {
     var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
-    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var t = __assign(__assign({}, defaultTranslations$7), translations);
     var _b = useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
     /**
      * A boolean flag that determines if a date has been set.
@@ -238,1249 +222,176 @@ var AddHolidayForm = function (_a) {
                 }, "aria-label": t.optionalTitle }), jsx("div", { className: "w-full", children: jsx(Button, __assign({ size: "sm", fullWidth: true, variant: "flat", startContent: jsx(IconComponent, { icon: "solar:add-circle-outline" }), onPress: handleAddHoliday, isDisabled: !isDateSet }, buttonProps, { children: t.addButton })) })] }));
 };
 
-function normalizeClass(value) {
-    if (typeof value === "string") {
-        return value || undefined;
+var H2 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsx("h2", __assign({ className: cn("text-lg font-semibold", className) }, props, { children: children })));
+};
+
+var P = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsx("p", __assign({ className: cn("text-sm text-default-500 font-normal", className) }, props, { children: children })));
+};
+
+var defaultTranslations$6 = {
+    title: "Analytics",
+    description: "Monthly growth of your metrics during the selected period",
+    viewDetails: "View Details",
+    exportData: "Export Data",
+    setAlert: "Set Alert",
+    months6: "6 Months",
+    months3: "3 Months",
+    days30: "30 Days",
+    days7: "7 Days",
+    hours24: "24 Hours",
+};
+var formatValue = function (value, type) {
+    if (type === "number") {
+        if (value >= 1000000) {
+            return "".concat((value / 1000000).toFixed(1), "M");
+        }
+        if (value >= 1000) {
+            return "".concat((value / 1000).toFixed(0), "k");
+        }
+        return value.toLocaleString();
     }
-    if (Array.isArray(value)) {
-        return value.filter(Boolean).join(" ") || undefined;
+    if (type === "percentage") {
+        return "".concat(value, "%");
     }
-    return undefined;
-}
-var getSectionClasses = 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(v)];
-    }))), { base: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
-            "p-0 max-w-[44px]": isCollapsed,
-        })), group: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
-            "flex flex-col gap-1": isCollapsed,
-        })), heading: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
-            hidden: isCollapsed,
-        })) }));
+    return value;
 };
-var getItemClasses = 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(v)];
-    }))), { base: normalizeClass(cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
-            "w-11 h-11 gap-0 p-0": isCollapsed,
-        })) }));
+var formatMonth = function (month) {
+    var _a;
+    var monthNumber = (_a = {
+        Jan: 0,
+        Feb: 1,
+        Mar: 2,
+        Apr: 3,
+        May: 4,
+        Jun: 5,
+        Jul: 6,
+        Aug: 7,
+        Sep: 8,
+        Oct: 9,
+        Nov: 10,
+        Dec: 11,
+    }[month]) !== null && _a !== void 0 ? _a : 0;
+    return new Intl.DateTimeFormat("en-US", { month: "long" }).format(new Date(2024, monthNumber, 1));
 };
-
-var EnumMenuNavListItem;
-(function (EnumMenuNavListItem) {
-    EnumMenuNavListItem["Nest"] = "nest";
-})(EnumMenuNavListItem || (EnumMenuNavListItem = {}));
-
 /**
- * @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.
+ * AnalyticsCard genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
  *
- * @forwardRef
+ * 🚨 This component requires installing the `recharts` package:
+ * `npm install recharts`
  */
-var MenuNavList = React.forwardRef(function (_a, ref) {
-    var items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey; _a.onSelect; var hideEndContent = _a.hideEndContent, _b = _a.sectionClasses, sectionClassesProp = _b === void 0 ? {} : _b, _c = _a.itemClasses, itemClassesProp = _c === void 0 ? {} : _c, iconClassName = _a.iconClassName, classNames = _a.classNames, className = _a.className, props = __rest(_a, ["items", "isCollapsed", "defaultSelectedKey", "onSelect", "hideEndContent", "sectionClasses", "itemClasses", "iconClassName", "classNames", "className"]);
-    var _d = useState(defaultSelectedKey), selected = _d[0], setSelected = _d[1];
-    // Component styles
-    var sectionClasses = getSectionClasses(isCollapsed, sectionClassesProp);
-    var itemClasses = getItemClasses(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 (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsx(IconComponent, { className: 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.Nest;
-        if (isNestType) {
-            item.href = undefined;
-        }
-        return (createElement(ListboxItem, __assign({}, item, { key: item.key, classNames: {
-                base: 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 ? (jsx(IconComponent, { className: 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 ? (jsxs(Popover, { placement: "right", offset: 10, children: [jsx(PopoverTrigger, { children: jsx("div", { className: "flex w-full items-center justify-center", children: jsx(Tooltip, { content: item.title, placement: "right", classNames: {
-                                    base: "text-default-500",
-                                }, children: jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsx(IconComponent, { className: 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)) }) }) }) }), jsx(PopoverContent, { className: "p-0", children: jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsx(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 ? (jsx(Accordion, { className: "p-0", children: jsx(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 ? (jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsx(IconComponent, { className: cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), 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 ? (jsx(Listbox, { className: "mt-0.5 text-default-500", classNames: {
-                            list: 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.Nest;
-        if (isNestType) {
-            return renderNestItem(item);
-        }
-        var isItemSelected = selected === item.key;
-        return (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsx(IconComponent, { className: 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 ? (jsx(Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
-                base: "text-default-500",
-            }, children: jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsx(IconComponent, { className: 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 (jsx(Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: 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: 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.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsx(ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
-        } }), isCollapsed ? "compact" : "default"));
-});
-MenuNavList.displayName = "MenuNavList";
+var AnalyticsCard = function (_a) {
+    var _b, _c;
+    var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
+    var t = __assign(__assign({}, defaultTranslations$6), translations);
+    var _h = 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 = useMemo(function () {
+        var _a;
+        var chart = data.find(function (d) { return d.key === activeChart; });
+        return {
+            chartData: (_a = chart === null || chart === void 0 ? void 0 : chart.chartData) !== null && _a !== void 0 ? _a : [],
+            color: (chart === null || chart === void 0 ? void 0 : chart.changeType) === "positive"
+                ? "success"
+                : (chart === null || chart === void 0 ? void 0 : chart.changeType) === "negative"
+                    ? "danger"
+                    : "default",
+            suffix: chart === null || chart === void 0 ? void 0 : chart.suffix,
+            type: chart === null || chart === void 0 ? void 0 : chart.type,
+        };
+    }, [activeChart, data]);
+    var chartData = activeChartData.chartData, color = activeChartData.color, suffix = activeChartData.suffix, type = activeChartData.type;
+    var handleChartChange = function (chartKey) {
+        setActiveChart(chartKey);
+        onChartChange === null || onChartChange === void 0 ? void 0 : onChartChange(chartKey);
+    };
+    var handleMenuAction = function (action) {
+        onMenuAction === null || onMenuAction === void 0 ? void 0 : onMenuAction(action);
+    };
+    var handleTimePeriodChange = function (period) {
+        onTimePeriodChange === null || onTimePeriodChange === void 0 ? void 0 : onTimePeriodChange(period);
+    };
+    return (jsx(Card$1, __assign({ as: "dl", className: "dark:border-default-100 border border-transparent" }, props, { children: jsxs("section", { className: "flex flex-col flex-nowrap", children: [jsx("div", { className: "flex flex-col justify-between gap-y-2 p-6", children: jsxs("div", { className: "flex flex-col gap-y-2", children: [jsxs("div", { className: "flex flex-col gap-y-0", children: [jsx(H2, { children: t.title }), jsx(P, { children: t.description })] }), jsx(Spacer, { y: 2 }), showTimePeriods && (jsxs(Tabs, { size: "md", className: " self-end", onSelectionChange: function (key) { return handleTimePeriodChange(String(key)); }, children: [jsx(Tab, { title: t.months6 }, "6-months"), jsx(Tab, { title: t.months3 }, "3-months"), jsx(Tab, { title: t.days30 }, "30-days"), jsx(Tab, { title: t.days7 }, "7-days"), jsx(Tab, { title: t.hours24 }, "24-hours")] })), showMetricCards && (jsx("div", { className: "mt-2 flex w-full items-center", children: 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 (jsxs("button", { type: "button", className: cn("rounded-medium flex w-full flex-col gap-2 p-3 transition-colors", {
+                                                "bg-default-100": activeChart === key,
+                                            }), onClick: function () { return handleChartChange(key); }, children: [jsx("span", { className: cn("text-small text-default-500 font-medium transition-colors", {
+                                                        "text-primary": activeChart === key,
+                                                    }), children: title }), jsxs("div", { className: "flex items-center gap-x-3", children: [jsx("span", { className: "text-foreground text-2xl font-bold", children: formatValue(value, type) }), jsx(Chip, { classNames: {
+                                                                content: "font-medium",
+                                                            }, color: changeType === "positive"
+                                                                ? "success"
+                                                                : changeType === "negative"
+                                                                    ? "danger"
+                                                                    : "default", radius: "md", size: "sm", startContent: changeType === "positive" ? (jsx(IconComponent, { icon: "solar:arrow-right-up-linear", size: "sm" })) : changeType === "negative" ? (jsx(IconComponent, { icon: "solar:arrow-right-down-linear", size: "sm" })) : (jsx(IconComponent, { icon: "solar:arrow-right-linear", size: "sm" })), variant: "bordered", children: jsx("span", { children: change }) })] })] }, key));
+                                    }) }) }))] }) }), jsx(ResponsiveContainer, { className: "min-h-[300px] [&_.recharts-surface]:outline-hidden", height: "100%", width: "100%", children: jsxs(AreaChart, { accessibilityLayer: true, data: chartData, height: 300, margin: {
+                            left: 0,
+                            right: 0,
+                        }, width: 500, children: [jsx("defs", { children: jsxs("linearGradient", { id: "colorGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [jsx("stop", { offset: "10%", stopColor: "hsl(var(--heroui-".concat(color, "-500))"), stopOpacity: 0.3 }), jsx("stop", { offset: "100%", stopColor: "hsl(var(--heroui-".concat(color, "-100))"), stopOpacity: 0.1 })] }) }), jsx(CartesianGrid, { horizontalCoordinatesGenerator: function () { return [200, 150, 100, 50]; }, stroke: "hsl(var(--heroui-default-200))", strokeDasharray: "3 3", vertical: false }), jsx(XAxis, { axisLine: false, dataKey: "month", style: {
+                                    fontSize: "var(--heroui-font-size-tiny)",
+                                    transform: "translateX(-40px)",
+                                }, tickLine: false }), jsx(Tooltip, { content: function (_a) {
+                                    var label = _a.label, payload = _a.payload;
+                                    return (jsx("div", { className: "rounded-medium bg-foreground text-tiny shadow-small flex h-auto min-w-[120px] items-center gap-x-2 p-2", children: jsxs("div", { className: "flex w-full flex-col gap-y-0", children: [payload === null || payload === void 0 ? void 0 : payload.map(function (p, index) {
+                                                    var name = p.name;
+                                                    var value = p.value;
+                                                    return (jsx("div", { className: "flex w-full items-center gap-x-2", children: jsxs("div", { className: "text-small text-background flex w-full items-center gap-x-1", children: [jsx("span", { children: formatValue(value, type) }), jsx("span", { children: suffix })] }) }, "".concat(index, "-").concat(name)));
+                                                }), jsxs("span", { className: "text-small text-foreground-400 font-medium", children: [formatMonth(String(label || "")), " 25, 2024"] })] }) }));
+                                }, cursor: {
+                                    strokeWidth: 0,
+                                } }), jsx(Area, { activeDot: {
+                                    stroke: "hsl(var(--heroui-".concat(color, "))"),
+                                    strokeWidth: 2,
+                                    fill: "hsl(var(--heroui-background))",
+                                    r: 5,
+                                }, dot: {
+                                    stroke: "hsl(var(--heroui-".concat(color, "))"),
+                                    strokeWidth: 2,
+                                    fill: "hsl(var(--heroui-".concat(color, "))"),
+                                    r: 4,
+                                }, animationDuration: 1000, animationEasing: "ease", dataKey: "value", fill: "url(#colorGradient)", stroke: "hsl(var(--heroui-".concat(color, "))"), strokeWidth: 2, type: "monotone" })] }) }), showDropdownMenu && (jsxs(Dropdown, { classNames: {
+                        content: "min-w-[120px]",
+                    }, placement: "bottom-end", children: [jsx(DropdownTrigger, { children: jsx(Button$1, { isIconOnly: true, className: "absolute top-2 right-2 w-auto rounded-full", size: "lg", variant: "bordered", children: jsx(IconComponent, { icon: "solar:menu-dots-bold", size: "sm" }) }) }), jsxs(DropdownMenu, { itemClasses: {
+                                title: "text-tiny",
+                            }, variant: "bordered", onAction: function (key) { return handleMenuAction(String(key)); }, children: [jsx(DropdownItem, { children: t.viewDetails }, "view-details"), jsx(DropdownItem, { children: t.exportData }, "export-data"), jsx(DropdownItem, { children: t.setAlert }, "set-alert")] })] }))] }) })));
+};
 
 /**
- * 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.
+ * AutoComplete genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Bordered (por defecto)
+ * - Radius: md (por defecto)
+ * - labelPlacement: Outside
+ * - Size: sm, md, lg (configurable)
  */
-var MenuComponent = 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 = useCallback(function () {
-        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
-    }, [onOpenSidebarChange]);
-    var handleCollapseToggle = useCallback(function () {
-        setIsCollapsed(function (prev) { return !prev; });
-    }, []);
-    var handleUpgradeClick = useCallback(function () {
-        if (upgradeCard) {
-            window.open(upgradeCard.buttonLink, "_blank");
-        }
-    }, [upgradeCard]);
-    var handleHelpClick = useCallback(function () {
-        window.open(helpButton.redirect, "_blank");
-    }, [helpButton]);
-    if (!isOpenSidebar) {
-        return null;
-    }
-    return (jsxs(Fragment, { children: [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 } }), jsx("div", { className: "container__menu ".concat(isCollapsed
-                    ? "container__menu--collapsed"
-                    : "container__menu--expanded"), children: jsxs("div", { className: "content__menu", children: [jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxs("div", { className: "flex items-center", children: [jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsx(IconComponent, { icon: isCollapsed
-                                                ? "solar:alt-arrow-right-outline"
-                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsx(Spacer, { y: 6 }), jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsx(Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxs("div", { className: "collapsible-item flex flex-col", children: [jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxs("div", { className: "collapsible-item relative", children: [jsxs(Card$1, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxs(CardBody, { className: "items-center py-5 text-center gap-1", children: [jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsx(CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsx(Button$1, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsx(Spacer, { y: 9 })] })), jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsx(Button$1, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
+var AutoComplete = function (_a) {
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, props = __rest(_a, ["label", "id", "size", "variant", "radius"]);
+    var generatedId = useId();
+    var autoId = id || generatedId;
+    return (jsxs("div", { children: [label && (jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsx(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",
+                } }))] }));
+};
+
+var ThemeContext = createContext({
+    mode: "light",
+    color: "blue",
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setMode: function () { },
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setColor: function () { },
 });
-
-// Lista simple de países con bandera emoji y código
-var countries = [
-    { code: "+57", name: "Colombia", flag: "🇨🇴" },
-    { code: "+54", name: "Argentina", flag: "🇦🇷" },
-    { code: "+55", name: "Brazil", flag: "🇧🇷" },
-    { code: "+52", name: "Mexico", flag: "🇲🇽" },
-    { code: "+503", name: "El Salvador", flag: "🇸🇻" },
-    { code: "+51", name: "Peru", flag: "🇵🇪" },
-    { code: "+56", name: "Chile", flag: "🇨🇱" },
-    { code: "+1", name: "United States", flag: "🇺🇸" },
-    { code: "+7", name: "Russia", flag: "🇷🇺" },
-    { code: "+20", name: "Egypt", flag: "🇪🇬" },
-    { code: "+27", name: "South Africa", flag: "🇿🇦" },
-    { code: "+33", name: "France", flag: "🇫🇷" },
-    { code: "+34", name: "Spain", flag: "🇪🇸" },
-    { code: "+39", name: "Italy", flag: "🇮🇹" },
-    { code: "+44", name: "United Kingdom", flag: "🇬🇧" },
-    { code: "+49", name: "Germany", flag: "🇩🇪" },
-    { code: "+51", name: "Peru", flag: "🇵🇪" },
-    { code: "+52", name: "Mexico", flag: "🇲🇽" },
-    { code: "+54", name: "Argentina", flag: "🇦🇷" },
-    { code: "+55", name: "Brazil", flag: "🇧🇷" },
-    { code: "+56", name: "Chile", flag: "🇨🇱" },
-    { code: "+57", name: "Colombia", flag: "🇨🇴" },
-    { code: "+60", name: "Malaysia", flag: "🇲🇾" },
-    { code: "+61", name: "Australia", flag: "🇦🇺" },
-    { code: "+62", name: "Indonesia", flag: "🇮🇩" },
-    { code: "+64", name: "New Zealand", flag: "🇳🇿" },
-    { code: "+65", name: "Singapore", flag: "🇸🇬" },
-    { code: "+66", name: "Thailand", flag: "🇹🇭" },
-    { code: "+81", name: "Japan", flag: "🇯🇵" },
-    { code: "+82", name: "South Korea", flag: "🇰🇷" },
-    { code: "+84", name: "Vietnam", flag: "🇻🇳" },
-    { code: "+86", name: "China", flag: "🇨🇳" },
-    { code: "+91", name: "India", flag: "🇮🇳" },
-    { code: "+351", name: "Portugal", flag: "🇵🇹" },
-    { code: "+503", name: "El Salvador", flag: "🇸🇻" },
-    { code: "+966", name: "Saudi Arabia", flag: "🇸🇦" },
-    { code: "+971", name: "UAE", flag: "🇦🇪" },
-];
-var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
-// Traducciones por defecto
-var defaultTranslations$2 = {
-    label: "Teléfono",
-    placeholder: "Número de teléfono",
-    searchPlaceholder: "Buscar país...",
-    selectCountryAriaLabel: "Seleccionar país",
-    expandListAriaLabel: "Desplegar lista de países",
-    noCountriesFound: "No se encontraron países",
-};
-
-var Phone = function (_a) {
-    var id = _a.id, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "phone" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
-    var _h = useState(false), isDropdownOpen = _h[0], setIsDropdownOpen = _h[1];
-    var _j = useState(uniqueCountries[0]), selectedCountry = _j[0], setSelectedCountry = _j[1];
-    var _k = useState(""), inputValue = _k[0], setInputValue = _k[1];
-    var dropdownRef = useRef(null);
-    var portalDropdownRef = useRef(null);
-    var _l = useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
-    var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    var t = __assign(__assign({}, defaultTranslations$2), translations);
-    var finalLabel = label || t.label;
-    useEffect(function () {
-        if (value) {
-            var found = uniqueCountries.find(function (c) { return c.code === value.countryCode; });
-            if (found) {
-                setSelectedCountry(found);
-            }
-            setInputValue(value.phoneNumber);
-        }
-    }, [value]);
-    useEffect(function () {
-        if (isDropdownOpen) {
-            setFilteredCountries(uniqueCountries);
-        }
-    }, [isDropdownOpen]);
-    useLayoutEffect(function () {
-        if (isDropdownOpen && dropdownRef.current) {
-            var rect = dropdownRef.current.getBoundingClientRect();
-            setDropdownPosition({
-                position: "absolute",
-                top: "".concat(rect.bottom + window.scrollY + 4, "px"),
-                left: "".concat(rect.left + window.scrollX, "px"),
-                width: "15rem",
-                zIndex: 50,
-            });
-        }
-    }, [isDropdownOpen]);
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target) &&
-                portalDropdownRef.current &&
-                !portalDropdownRef.current.contains(event.target)) {
-                setIsDropdownOpen(false);
-            }
-        };
-        if (isDropdownOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isDropdownOpen]);
-    var handleCountrySelect = function (country) {
-        setSelectedCountry(country);
-        setIsDropdownOpen(false);
-        if (onChange) {
-            onChange({ countryCode: country.code, phoneNumber: inputValue });
-        }
-    };
-    var handleInputChange = function (e) {
-        var val = e.target.value.replace(/\D/g, "");
-        setInputValue(val);
-        if (onChange) {
-            onChange({ countryCode: selectedCountry.code, phoneNumber: val });
-        }
-    };
-    return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1", children: [finalLabel, " ", required && jsx("span", { className: "text-danger-500", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500 dark:focus-within:border-primary-500 ".concat(error ? "border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl  bg-default-100  focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsx("span", { className: "text-xs text-default-500", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-default-500 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsx("title", { children: t.expandListAriaLabel }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }) }), jsx(Input$1, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500  placeholder-default-500 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsx("span", { className: "text-xs text-danger-500 mt-1", children: errorText })), isDropdownOpen &&
-                createPortal(jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
-                                    var searchTerm = e.target.value.toLowerCase();
-                                    var filtered = uniqueCountries.filter(function (country) {
-                                        return country.name.toLowerCase().includes(searchTerm) ||
-                                            country.code.toLowerCase().includes(searchTerm);
-                                    });
-                                    setFilteredCountries(filtered);
-                                } }) }), jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-default-200 ".concat(country.code === selectedCountry.code
-                                    ? "bg-primary-50"
-                                    : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsx("span", { className: "text-xs text-default-500", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
-};
-
-/**
- * Select genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
- *
- * Reglas aplicadas:
- * - Variant: Bordered (por defecto)
- * - Radius: md (por defecto)
- * - labelPlacement: Outside
- * - Size: sm, md, lg (configurable)
- */
-var Select = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
-    var generatedId = useId();
-    var selectId = id || generatedId;
-    return (jsx("div", { className: "group", children: jsx(Select$1, __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",
-            } })) }));
-};
-
-function $14e0f24ef4ac5c92$export$c19a80a9721b80f6(a, b) {
-    return $14e0f24ef4ac5c92$var$timeToMs(a) - $14e0f24ef4ac5c92$var$timeToMs(b);
-}
-function $14e0f24ef4ac5c92$var$timeToMs(a) {
-    return a.hour * 3600000 + a.minute * 60000 + a.second * 1000 + a.millisecond;
-}
-
-function $735220c2d4774dd3$export$3e2544e88a25bff8(duration) {
-    let inverseDuration = {};
-    for(let key in duration)if (typeof duration[key] === 'number') inverseDuration[key] = -duration[key];
-    return inverseDuration;
-}
-function $735220c2d4774dd3$export$e5d5e1c1822b6e56(value, fields) {
-    let mutableValue = value.copy();
-    if (fields.hour != null) mutableValue.hour = fields.hour;
-    if (fields.minute != null) mutableValue.minute = fields.minute;
-    if (fields.second != null) mutableValue.second = fields.second;
-    if (fields.millisecond != null) mutableValue.millisecond = fields.millisecond;
-    $735220c2d4774dd3$export$7555de1e070510cb(mutableValue);
-    return mutableValue;
-}
-function $735220c2d4774dd3$var$balanceTime(time) {
-    time.second += Math.floor(time.millisecond / 1000);
-    time.millisecond = $735220c2d4774dd3$var$nonNegativeMod(time.millisecond, 1000);
-    time.minute += Math.floor(time.second / 60);
-    time.second = $735220c2d4774dd3$var$nonNegativeMod(time.second, 60);
-    time.hour += Math.floor(time.minute / 60);
-    time.minute = $735220c2d4774dd3$var$nonNegativeMod(time.minute, 60);
-    let days = Math.floor(time.hour / 24);
-    time.hour = $735220c2d4774dd3$var$nonNegativeMod(time.hour, 24);
-    return days;
-}
-function $735220c2d4774dd3$export$7555de1e070510cb(time) {
-    time.millisecond = Math.max(0, Math.min(time.millisecond, 1000));
-    time.second = Math.max(0, Math.min(time.second, 59));
-    time.minute = Math.max(0, Math.min(time.minute, 59));
-    time.hour = Math.max(0, Math.min(time.hour, 23));
-}
-function $735220c2d4774dd3$var$nonNegativeMod(a, b) {
-    let result = a % b;
-    if (result < 0) result += b;
-    return result;
-}
-function $735220c2d4774dd3$var$addTimeFields(time, duration) {
-    time.hour += duration.hours || 0;
-    time.minute += duration.minutes || 0;
-    time.second += duration.seconds || 0;
-    time.millisecond += duration.milliseconds || 0;
-    return $735220c2d4774dd3$var$balanceTime(time);
-}
-function $735220c2d4774dd3$export$7ed87b6bc2506470(time, duration) {
-    let res = time.copy();
-    $735220c2d4774dd3$var$addTimeFields(res, duration);
-    return res;
-}
-function $735220c2d4774dd3$export$fe34d3a381cd7501(time, duration) {
-    return $735220c2d4774dd3$export$7ed87b6bc2506470(time, $735220c2d4774dd3$export$3e2544e88a25bff8(duration));
-}
-function $735220c2d4774dd3$export$dd02b3e0007dfe28(value, field, amount, options) {
-    let mutable = value.copy();
-    switch(field){
-        case 'hour':
-            {
-                let hours = value.hour;
-                let min = 0;
-                let max = 23;
-                if ((options === null || options === void 0 ? void 0 : options.hourCycle) === 12) {
-                    let isPM = hours >= 12;
-                    min = isPM ? 12 : 0;
-                    max = isPM ? 23 : 11;
-                }
-                mutable.hour = $735220c2d4774dd3$var$cycleValue(hours, amount, min, max, options === null || options === void 0 ? void 0 : options.round);
-                break;
-            }
-        case 'minute':
-            mutable.minute = $735220c2d4774dd3$var$cycleValue(value.minute, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
-            break;
-        case 'second':
-            mutable.second = $735220c2d4774dd3$var$cycleValue(value.second, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
-            break;
-        case 'millisecond':
-            mutable.millisecond = $735220c2d4774dd3$var$cycleValue(value.millisecond, amount, 0, 999, options === null || options === void 0 ? void 0 : options.round);
-            break;
-        default:
-            throw new Error('Unsupported field ' + field);
-    }
-    return mutable;
-}
-function $735220c2d4774dd3$var$cycleValue(value, amount, min, max, round = false) {
-    if (round) {
-        value += Math.sign(amount);
-        if (value < min) value = max;
-        let div = Math.abs(amount);
-        if (amount > 0) value = Math.ceil(value / div) * div;
-        else value = Math.floor(value / div) * div;
-        if (value > max) value = min;
-    } else {
-        value += amount;
-        if (value < min) value = max - (min - value - 1);
-        else if (value > max) value = min + (value - max - 1);
-    }
-    return value;
-}
-
-function $fae977aafc393c5c$export$f59dee82248f5ad4(time) {
-    return `${String(time.hour).padStart(2, '0')}:${String(time.minute).padStart(2, '0')}:${String(time.second).padStart(2, '0')}${time.millisecond ? String(time.millisecond / 1000).slice(1) : ''}`;
-}
-
-function _check_private_redeclaration(obj, privateCollection) {
-    if (privateCollection.has(obj)) {
-        throw new TypeError("Cannot initialize the same private elements twice on an object");
-    }
-}
-
-function _class_private_field_init(obj, privateMap, value) {
-    _check_private_redeclaration(obj, privateMap);
-    privateMap.set(obj, value);
-}
-
-var // This prevents TypeScript from allowing other types with the same fields to match.
-// @ts-ignore
-$35ea8db9cb2ccb90$var$_type1 = /*#__PURE__*/ new WeakMap();
-class $35ea8db9cb2ccb90$export$680ea196effce5f {
-    /** Returns a copy of this time. */ copy() {
-        return new $35ea8db9cb2ccb90$export$680ea196effce5f(this.hour, this.minute, this.second, this.millisecond);
-    }
-    /** Returns a new `Time` with the given duration added to it. */ add(duration) {
-        return ($735220c2d4774dd3$export$7ed87b6bc2506470)(this, duration);
-    }
-    /** Returns a new `Time` with the given duration subtracted from it. */ subtract(duration) {
-        return ($735220c2d4774dd3$export$fe34d3a381cd7501)(this, duration);
-    }
-    /** Returns a new `Time` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields) {
-        return ($735220c2d4774dd3$export$e5d5e1c1822b6e56)(this, fields);
-    }
-    /**
-   * Returns a new `Time` with the given field adjusted by a specified amount.
-   * When the resulting value reaches the limits of the field, it wraps around.
-   */ cycle(field, amount, options) {
-        return ($735220c2d4774dd3$export$dd02b3e0007dfe28)(this, field, amount, options);
-    }
-    /** Converts the time to an ISO 8601 formatted string. */ toString() {
-        return ($fae977aafc393c5c$export$f59dee82248f5ad4)(this);
-    }
-    /** Compares this time with another. A negative result indicates that this time is before the given one, and a positive time indicates that it is after. */ compare(b) {
-        return ($14e0f24ef4ac5c92$export$c19a80a9721b80f6)(this, b);
-    }
-    constructor(hour = 0, minute = 0, second = 0, millisecond = 0){
-        (_class_private_field_init)(this, $35ea8db9cb2ccb90$var$_type1, {
-            writable: true,
-            value: void 0
-        });
-        this.hour = hour;
-        this.minute = minute;
-        this.second = second;
-        this.millisecond = millisecond;
-        ($735220c2d4774dd3$export$7555de1e070510cb)(this);
-    }
-}
-
-var Switch = function (_a) {
-    var id = _a.id, props = __rest(_a, ["id"]);
-    var generatedId = useId();
-    var autoId = id || generatedId;
-    return jsx(Switch$1, __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(_a, ["label", "id", "size", "radius", "variant"]);
-    var generatedId = useId();
-    var autoId = id || generatedId;
-    return (jsx(TimeInput$1, __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",
-        } })));
-};
-
-/**
- * @component ScheduleRow
- * @description A React component for managing the schedule of a single day.
- * It allows users to open or close the schedule, add or remove time slots,
- * and modify the start and end times of each slot. The component is fully
- * controlled and reports changes to the parent via the `onChange` callback.
- *
- * @param {ScheduleRowProps} props - The props for the component.
- * @returns {React.ReactElement} The rendered ScheduleRow component.
- */
-var ScheduleRow = function (_a) {
-    var day = _a.day, daySchedule = _a.daySchedule, translations = _a.translations, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
-    /**
-     * @function validateTimeSlots
-     * @description Validates all time slots to ensure the "from" time is not after the "to" time.
-     * @param {TimeSlot[]} timeSlots - The array of time slots to validate.
-     * @returns {TimeSlot[]} The updated array of time slots with error messages if any.
-     */
-    var validateTimeSlots = function (timeSlots) {
-        return timeSlots.map(function (slot) {
-            if (slot.from && slot.to) {
-                var fromTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.from.split(":").map(Number), false)))();
-                var toTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.to.split(":").map(Number), false)))();
-                if (fromTime.compare(toTime) > 0) {
-                    return __assign(__assign({}, slot), { error: "From time cannot be after to time" });
-                }
-            }
-            return __assign(__assign({}, slot), { error: null });
-        });
-    };
-    /**
-     * @function toTimeValue
-     * @description Converts a time string (e.g., "09:00") to a `TimeValue` object
-     * required by the `TimeInput` component.
-     * @param {string} time - The time string to convert.
-     * @returns {TimeValue | null} The corresponding `TimeValue` object, or `null` if the input is empty.
-     */
-    var toTimeValue = function (time) {
-        if (!time) {
-            return null;
-        }
-        var _a = time.split(":").map(Number), hour = _a[0], minute = _a[1];
-        return new $35ea8db9cb2ccb90$export$680ea196effce5f(hour, minute);
-    };
-    /**
-     * @function fromTimeValue
-     * @description Converts a `TimeValue` object back to a formatted time string (e.g., "09:00").
-     * @param {TimeValue | null} time - The `TimeValue` object to convert.
-     * @returns {string} The formatted time string.
-     */
-    var fromTimeValue = function (time) {
-        if (!time) {
-            return "";
-        }
-        return "".concat(String(time.hour).padStart(2, "0"), ":").concat(String(time.minute).padStart(2, "0"));
-    };
-    /**
-     * @function handleToggleDay
-     * @description Toggles the `isOpen` status of the schedule for the day.
-     */
-    var handleToggleDay = function () {
-        onChange(__assign(__assign({}, daySchedule), { isOpen: !daySchedule.isOpen }));
-    };
-    /**
-     * @function handleTimeChange
-     * @description Updates the time for a specific time slot.
-     * @param {number} index - The index of the time slot to modify.
-     * @param {"from" | "to"} field - The field to update ("from" or "to").
-     * @param {TimeValue | null} value - The new time value from the `TimeInput` component.
-     */
-    var handleTimeChange = function (index, field, value) {
-        var _a;
-        var newTimeSlots = __spreadArray([], daySchedule.timeSlots, true);
-        newTimeSlots[index] = __assign(__assign({}, newTimeSlots[index]), (_a = {}, _a[field] = fromTimeValue(value), _a));
-        var validatedSlots = validateTimeSlots(newTimeSlots);
-        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
-    };
-    /**
-     * @function handleAddTimeSlot
-     * @description Adds a new, empty time slot to the schedule.
-     */
-    var handleAddTimeSlot = function () {
-        var newTimeSlots = __spreadArray(__spreadArray([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
-        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
-    };
-    /**
-     * @function handleRemoveTimeSlot
-     * @description Removes a time slot from the schedule at the specified index.
-     * @param {number} index - The index of the time slot to remove.
-     */
-    var handleRemoveTimeSlot = function (index) {
-        var newTimeSlots = daySchedule.timeSlots.filter(function (_, i) { return i !== index; });
-        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
-    };
-    return (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: [jsxs("div", { className: "flex  w-full items-center justify-between", children: [jsxs("div", { className: "flex xs:space-x-2 sm:space-x-4", children: [jsx("h3", { className: "text-small font-semibold text-default-900 capitalize", children: day }), jsx(Chip, { size: "sm", color: daySchedule.isOpen ? "primary" : "default", className: "text-background", children: daySchedule.isOpen ? translations.open : translations.closed })] }), jsxs("div", { className: "flex xs:gap-2 sm:gap-5", children: [jsx(Switch, { size: "sm", color: "primary", isSelected: daySchedule.isOpen, onValueChange: handleToggleDay }), jsx(Button, { size: "sm", variant: "bordered", onPress: function () { return onCopyToAll(day); }, children: translations.copyToAll })] })] }), daySchedule.isOpen && (jsxs("div", { className: "flex  flex-col justify-around gap-y-3 ", children: [daySchedule.timeSlots.map(function (slot, index) { return (jsxs("div", { className: "flex items-center gap-1 w-full justify-between", children: [jsxs("div", { className: "flex items-center justify-between gap-1", children: [jsx(TimeInput, { label: translations.from, className: "w-full", value: toTimeValue(slot.from), onChange: function (value) { return handleTimeChange(index, "from", value); }, isInvalid: !!slot.error }), jsx("span", { className: "text-default-900 xs:hidden xl:block", children: "-" }), jsx(TimeInput, { label: translations.to, className: "w-full", value: toTimeValue(slot.to), onChange: function (value) { return handleTimeChange(index, "to", value); }, isInvalid: !!slot.error, errorMessage: slot.error })] }), jsx(Button, { isIconOnly: true, size: "sm", color: "danger", variant: "light", onPress: function () { return handleRemoveTimeSlot(index); }, isDisabled: daySchedule.timeSlots.length === 1, startContent: jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline" }) })] }, "".concat(day, "-timeslot-").concat(slot.from, "-").concat(slot.to, "-").concat(index))); }), daySchedule.timeSlots.length < 2 && (jsx(Button, { size: "sm", variant: "flat", onPress: function () { return handleAddTimeSlot(); }, startContent: jsx(IconComponent, { icon: "solar:add-circle-outline" }), children: translations.addTimeSlot }))] }))] }, day));
-};
-
-function AuraTable(_a) {
-    var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
-    return (jsxs(Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsx(TableHeader, { columns: columns, children: function (column) { return jsx(TableColumn, { children: column.label }, column.key); } }), jsx(TableBody, { items: items, children: function (item) { return (jsx(TableRow, { children: function (columnKey) { return (jsx(TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
-}
-
-/**
- * Textarea component that wraps the HeroUI TextArea component.
- */
-var Textarea = function (_a) {
-    var id = _a.id, label = _a.label, placeholder = _a.placeholder, description = _a.description, errorMessage = _a.errorMessage, _b = _a.variant, variant = _b === void 0 ? "bordered" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d; _a.labelPlacement; var props = __rest(_a, ["id", "label", "placeholder", "description", "errorMessage", "variant", "radius", "size", "labelPlacement"]);
-    var generatedId = useId();
-    var autoId = id || generatedId;
-    return (jsx(Textarea$1, __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",
-        } })));
-};
-
-// Traducciones por defecto en español según las reglas de diseño
-var defaultTranslations$1 = {
-    lightTheme: "Claro",
-    darkTheme: "Oscuro",
-};
-/**
- * Selector de tema visual con preview interactivo siguiendo las reglas de diseño BeweOS.
- *
- * Reglas aplicadas:
- * - Soporte completo de traducciones mediante props
- * - Sin dependencias de sistemas i18n específicos
- * - Dark mode compatible
- * - Uso exclusivo de Tailwind CSS
- */
-var ThemePicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, className = _a.className, _b = _a.translations, translations = _b === void 0 ? {} : _b;
-    // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations$1), translations);
-    var themes = [
-        {
-            key: "light",
-            label: t.lightTheme,
-            cardClass: "bg-white border border-[#E4E4E7] text-zinc-900",
-            previewClass: "bg-[#F4F4F5] border border-[#E4E4E7]",
-            labelClass: "font-medium text-[14px] leading-[20px] text-zinc-900",
-            radioColor: "primary",
-            previewContent: (jsxs("div", { className: "rounded-lg border border-[#E4E4E7] p-3 mt-4 flex flex-col gap-2", children: [jsx("div", { className: "h-3 w-1/2 bg-[#E4E4E7] rounded mb-2" }), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsx("div", { className: "h-3 w-1/3 rounded bg-[#E4E4E7]" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsx("div", { className: "h-3 w-1/4 rounded bg-[#E4E4E7]" })] })] }), jsx("div", { className: "h-8 w-2/3 bg-[#F4F4F5] rounded-lg mt-2" })] })),
-        },
-        {
-            key: "dark",
-            label: t.darkTheme,
-            cardClass: "bg-black border border-[#3F3F46] text-white",
-            previewClass: "bg-[#27272A] border border-[#3F3F46]",
-            labelClass: "font-medium text-[14px] leading-[20px] text-white",
-            radioColor: "primary",
-            previewContent: (jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
-        },
-    ];
-    return (jsx(RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
-            wrapper: "gap-3",
-        }, children: themes.map(function (theme) { return (jsxs("div", { className: "relative rounded-2xl ".concat(theme.cardClass, " p-4 flex-1 transition-all duration-200 flex flex-col justify-start"), children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: theme.labelClass, children: theme.label }), jsx(Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key })] }), theme.previewContent] }, theme.key)); }) }));
-};
-
-var ConfigMenu = function (_a) {
-    var _b;
-    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
-    return (jsxs(Dropdown, { className: "min-w-40", children: [jsx(DropdownTrigger, { children: jsx(Button$1, { isIconOnly: true, color: "default", startContent: jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxs(DropdownMenu, { "aria-label": "Configuration", children: [jsx(DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsx(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 ? jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsx(DropdownSection, { children: jsx(DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
-                                base: "text-default-500",
-                            }, startContent: 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 (jsx(Button$1, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsx(IconComponent, { icon: "solar:bell-bing-linear" }), children: notificationCount > 0 && (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;
-    return (jsxs("header", { className: "header__container", children: [jsx(Button$1, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(NotificationButton, { notificationCount: notificationCount }), jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }));
-};
-HeaderComponent.displayName = "Header";
-
-var ToastContext = createContext(undefined);
-var useAuraToast = function () {
-    var context = useContext(ToastContext);
-    if (!context) {
-        throw new Error("useAuraToast must be used within a AuraToastProvider");
-    }
-    return context;
-};
-
-function GlobalToast() {
-    var _a = useAuraToast(), toast = _a.toast, hideToast = _a.hideToast;
-    if (!toast.isVisible) {
-        return null;
-    }
-    return (jsx("div", { className: "fixed top-4 right-4 z-50 w-full max-w-sm", children: jsx(Alert, { hideIconWrapper: true, color: toast.color, variant: "flat", title: toast.title, description: toast.description, isClosable: true, onClose: hideToast }) }));
-}
-
-// Traducciones por defecto en español
-var defaultTranslations = {
-    uploadText: "Da clic y selecciona tus archivos",
-    subText: "",
-    dragText: "Suelta el archivo aquí",
-    multipleFilesError: "Solo puedes subir un archivo",
-    maxFilesError: "Puedes subir máximo {maxFiles} archivos",
-    invalidFileTypeError: "Solo se aceptan archivos de tipo: {acceptedTypes}",
-    maxFileSizeError: "El archivo excede el tamaño máximo permitido de {maxSize}",
-    removeFileAriaLabel: "Remover archivo",
-    uploadAreaAriaLabel: "Área de carga de archivos",
-    cropModalTitle: "Recortar imagen",
-    cropSaveButton: "Guardar",
-    cropCancelButton: "Cancelar",
-    cropZoomLabel: "Zoom",
-    cropInstructions: "Arrastra para mover la imagen y usa el zoom para ajustar el tamaño",
-    cropBackgroundLabel: "Color de fondo",
-    cropBackgroundWhite: "Blanco",
-    cropBackgroundBlack: "Negro",
-    cropBackgroundTransparent: "Transparente",
-};
-/**
- * Formatea el tipo de archivo para mostrar
- */
-var formatFileType = function (type) {
-    var _a;
-    if (type.startsWith(".")) {
-        return type.toUpperCase();
-    }
-    if (type.includes("/")) {
-        var parts = type.split("/");
-        return ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || type;
-    }
-    return type.toUpperCase();
-};
-/**
- * Formatea el tamaño del archivo de forma legible
- */
-var formatFileSize = function (bytes) {
-    if (bytes === 0) {
-        return "0 Bytes";
-    }
-    var k = 1024;
-    var sizes = ["Bytes", "KB", "MB", "GB"];
-    var i = Math.floor(Math.log(bytes) / Math.log(k));
-    return "".concat(Math.round(bytes / Math.pow(k, i)), " ").concat(sizes[i]);
-};
-/**
- * Componente de recorte de imagen usando Canvas API
- */
-var ImageCropModal = function (_a) {
-    var isOpen = _a.isOpen, imageUrl = _a.imageUrl, targetWidth = _a.targetWidth, targetHeight = _a.targetHeight, onSave = _a.onSave, onCancel = _a.onCancel, translations = _a.translations;
-    var canvasRef = useRef(null);
-    var _b = useState(null), imageElement = _b[0], setImageElement = _b[1];
-    var _c = useState(0), zoomValue = _c[0], setZoomValue = _c[1]; // Valor del slider de -1 a 1
-    var _d = useState({ x: 0, y: 0 }), position = _d[0], setPosition = _d[1];
-    var _e = useState(false), isDragging = _e[0], setIsDragging = _e[1];
-    var _f = useState({ x: 0, y: 0 }), dragStart = _f[0], setDragStart = _f[1];
-    var _g = useState(1), baseScale = _g[0], setBaseScale = _g[1]; // Escala base inicial
-    var _h = useState({ width: 400, height: 300 }), canvasSize = _h[0], setCanvasSize = _h[1];
-    var _j = useState("white"), backgroundColor = _j[0], setBackgroundColor = _j[1];
-    // Función para convertir el valor del zoom slider a escala real
-    var getScaleFromZoom = function (zoomValue) {
-        if (zoomValue === 0) {
-            return baseScale;
-        }
-        if (zoomValue > 0) {
-            // Zoom in: de baseScale a baseScale * 3
-            return baseScale + baseScale * 2 * zoomValue;
-        }
-        // Zoom out: de baseScale * 0.3 a baseScale
-        return baseScale + baseScale * 0.7 * zoomValue;
-    };
-    var currentScale = getScaleFromZoom(zoomValue);
-    // Cargar imagen cuando se abre el modal
-    useEffect(function () {
-        if (isOpen && imageUrl) {
-            var img_1 = new Image();
-            img_1.onload = function () {
-                setImageElement(img_1);
-                // Calcular escala inicial para que la imagen quepa en el área de crop
-                var scaleX = targetWidth / img_1.width;
-                var scaleY = targetHeight / img_1.height;
-                var initialScale = Math.max(scaleX, scaleY);
-                setBaseScale(initialScale);
-                setZoomValue(0); // Empezar en el centro
-                setPosition({ x: 0, y: 0 });
-                setBackgroundColor("white"); // Reset color de fondo
-            };
-            img_1.src = imageUrl;
-        }
-    }, [isOpen, imageUrl, targetWidth, targetHeight]);
-    // Dibujar en el canvas
-    useEffect(function () {
-        if (!(imageElement && canvasRef.current)) {
-            return;
-        }
-        var canvas = canvasRef.current;
-        var ctx = canvas.getContext("2d");
-        if (!ctx) {
-            return;
-        }
-        // Limpiar canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        // Dibujar fondo gris del canvas
-        ctx.fillStyle = "#f3f4f6";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        // Calcular posición y tamaño de la imagen
-        var imgWidth = imageElement.width * currentScale;
-        var imgHeight = imageElement.height * currentScale;
-        var imgX = (canvas.width - imgWidth) / 2 + position.x;
-        var imgY = (canvas.height - imgHeight) / 2 + position.y;
-        // Dibujar imagen
-        ctx.drawImage(imageElement, imgX, imgY, imgWidth, imgHeight);
-        // Dibujar overlay para mostrar área de recorte
-        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        // Limpiar área de recorte (centro)
-        var cropX = (canvas.width - targetWidth) / 2;
-        var cropY = (canvas.height - targetHeight) / 2;
-        ctx.clearRect(cropX, cropY, targetWidth, targetHeight);
-        // Dibujar color de fondo del área de recorte
-        if (backgroundColor !== "transparent") {
-            ctx.fillStyle = backgroundColor === "white" ? "#ffffff" : "#000000";
-            ctx.fillRect(cropX, cropY, targetWidth, targetHeight);
-        }
-        // Redibujar imagen solo en el área de recorte
-        ctx.save();
-        ctx.beginPath();
-        ctx.rect(cropX, cropY, targetWidth, targetHeight);
-        ctx.clip();
-        ctx.drawImage(imageElement, imgX, imgY, imgWidth, imgHeight);
-        ctx.restore();
-        // Dibujar borde del área de recorte
-        ctx.strokeStyle = "#3b82f6";
-        ctx.lineWidth = 2;
-        ctx.strokeRect(cropX, cropY, targetWidth, targetHeight);
-    }, [
-        imageElement,
-        currentScale,
-        position,
-        targetWidth,
-        targetHeight,
-        backgroundColor,
-    ]);
-    var handleMouseDown = function (e) {
-        var _a;
-        e.preventDefault();
-        setIsDragging(true);
-        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (rect) {
-            setDragStart({
-                x: e.clientX - rect.left - position.x,
-                y: e.clientY - rect.top - position.y,
-            });
-        }
-    };
-    var handleMouseMove = function (e) {
-        var _a;
-        if (!isDragging) {
-            return;
-        }
-        e.preventDefault();
-        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (rect) {
-            setPosition({
-                x: e.clientX - rect.left - dragStart.x,
-                y: e.clientY - rect.top - dragStart.y,
-            });
-        }
-    };
-    var handleMouseUp = function () {
-        setIsDragging(false);
-    };
-    // Eventos táctiles para dispositivos móviles
-    var handleTouchStart = function (e) {
-        var _a;
-        e.preventDefault();
-        if (e.touches.length === 1) {
-            setIsDragging(true);
-            var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (rect) {
-                var touch = e.touches[0];
-                setDragStart({
-                    x: touch.clientX - rect.left - position.x,
-                    y: touch.clientY - rect.top - position.y,
-                });
-            }
-        }
-    };
-    var handleTouchMove = function (e) {
-        var _a;
-        if (!isDragging || e.touches.length !== 1) {
-            return;
-        }
-        e.preventDefault();
-        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (rect) {
-            var touch = e.touches[0];
-            setPosition({
-                x: touch.clientX - rect.left - dragStart.x,
-                y: touch.clientY - rect.top - dragStart.y,
-            });
-        }
-    };
-    var handleTouchEnd = function () {
-        setIsDragging(false);
-    };
-    var handleSave = function () {
-        if (!(imageElement && canvasRef.current)) {
-            return;
-        }
-        // Crear canvas temporal para el recorte
-        var tempCanvas = document.createElement("canvas");
-        tempCanvas.width = targetWidth;
-        tempCanvas.height = targetHeight;
-        var tempCtx = tempCanvas.getContext("2d");
-        if (!tempCtx) {
-            return;
-        }
-        // Dibujar color de fondo si no es transparente
-        if (backgroundColor !== "transparent") {
-            tempCtx.fillStyle = backgroundColor === "white" ? "#ffffff" : "#000000";
-            tempCtx.fillRect(0, 0, targetWidth, targetHeight);
-        }
-        // Calcular parámetros de recorte
-        var canvas = canvasRef.current;
-        var imgWidth = imageElement.width * currentScale;
-        var imgHeight = imageElement.height * currentScale;
-        var imgX = (canvas.width - imgWidth) / 2 + position.x;
-        var imgY = (canvas.height - imgHeight) / 2 + position.y;
-        var cropX = (canvas.width - targetWidth) / 2;
-        var cropY = (canvas.height - targetHeight) / 2;
-        // Calcular área fuente en la imagen original
-        var sourceX = (cropX - imgX) / currentScale;
-        var sourceY = (cropY - imgY) / currentScale;
-        var sourceWidth = targetWidth / currentScale;
-        var sourceHeight = targetHeight / currentScale;
-        // Dibujar recorte sobre el fondo
-        tempCtx.drawImage(imageElement, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
-        // Convertir a blob y crear archivo
-        var fileType = backgroundColor === "transparent" ? "image/png" : "image/png";
-        tempCanvas.toBlob(function (blob) {
-            if (blob) {
-                var timestamp = new Date().getTime();
-                var file = new File([blob], "cropped-image-".concat(timestamp, ".png"), {
-                    type: fileType,
-                });
-                onSave(file, imageElement.src);
-            }
-        }, fileType);
-    };
-    // Calcular dimensiones responsive del canvas
-    var updateCanvasSize = useCallback(function () {
-        var minCanvasWidth = Math.min(350, window.innerWidth - 40);
-        var minCanvasHeight = Math.min(250, window.innerHeight - 300);
-        var newCanvasWidth = Math.max(minCanvasWidth, targetWidth + 60);
-        var newCanvasHeight = Math.max(minCanvasHeight, targetHeight + 60);
-        setCanvasSize({ width: newCanvasWidth, height: newCanvasHeight });
-    }, [targetWidth, targetHeight]);
-    // Actualizar tamaño del canvas al cambiar el tamaño de la ventana
-    useEffect(function () {
-        if (!isOpen) {
-            return;
-        }
-        updateCanvasSize();
-        var handleResize = function () {
-            updateCanvasSize();
-        };
-        window.addEventListener("resize", handleResize);
-        return function () {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, [isOpen, updateCanvasSize]);
-    return (jsx(Modal$1, { isOpen: isOpen, onClose: onCancel, size: "5xl", className: "sm:max-w-4xl", scrollBehavior: "inside", backdrop: "blur", classNames: {
-            backdrop: "bg-black/80",
-            wrapper: "p-0 sm:p-4",
-            base: "m-0 sm:m-4 max-h-screen sm:max-h-[90vh] w-full sm:w-auto",
-        }, children: jsxs(ModalContent$1, { className: "m-0 sm:m-0 h-screen sm:h-auto sm:max-h-[90vh] sm:rounded-lg", children: [jsxs(ModalHeader$1, { className: "flex flex-col gap-1 px-4 sm:px-6", children: [translations.cropModalTitle, jsx("p", { className: "text-xs sm:text-sm text-gray-500 font-normal", children: translations.cropInstructions })] }), jsx(ModalBody$1, { className: "px-4 sm:px-6 py-4", children: jsxs("div", { className: "flex flex-col gap-4", children: [jsx("div", { className: "flex justify-center overflow-hidden", children: jsx("canvas", { ref: canvasRef, width: canvasSize.width, height: canvasSize.height, className: "border border-gray-300 cursor-move select-none max-w-full max-h-[50vh] sm:max-h-[60vh]", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { touchAction: "none" } }) }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("label", { htmlFor: "zoom-slider", className: "text-sm font-medium", children: translations.cropZoomLabel }), jsxs("div", { className: "flex items-center gap-2 sm:gap-3 w-full", children: [jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "-" }), jsx(Slider, { id: "zoom-slider", size: "sm", step: 0.1, minValue: -1, maxValue: 1, value: zoomValue, onChange: function (value) { return setZoomValue(value); }, className: "flex-1", marks: [
-                                                    { value: -1, label: "Out" },
-                                                    { value: 0, label: "0" },
-                                                    { value: 1, label: "In" },
-                                                ] }), jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "+" })] })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("div", { className: "text-sm font-medium", children: translations.cropBackgroundLabel }), jsxs("div", { className: "flex flex-wrap gap-3 sm:gap-4", children: [jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "white", checked: backgroundColor === "white", onChange: function (e) {
-                                                            return setBackgroundColor(e.target.value);
-                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-white border border-gray-300 rounded" }), jsx("span", { className: "text-sm", children: translations.cropBackgroundWhite })] }), jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "black", checked: backgroundColor === "black", onChange: function (e) {
-                                                            return setBackgroundColor(e.target.value);
-                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-black border border-gray-300 rounded" }), jsx("span", { className: "text-sm", children: translations.cropBackgroundBlack })] }), jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "transparent", checked: backgroundColor === "transparent", onChange: function (e) {
-                                                            return setBackgroundColor(e.target.value);
-                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-gray-200 border border-gray-300 rounded", style: {
-                                                            backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
-                                                            backgroundSize: "8px 8px",
-                                                            backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
-                                                        } }), jsx("span", { className: "text-sm", children: translations.cropBackgroundTransparent })] })] })] })] }) }), jsxs(ModalFooter$1, { className: "flex flex-col-reverse sm:flex-row gap-2 px-4 sm:px-6", children: [jsx(Button$1, { color: "danger", variant: "light", onPress: onCancel, className: "w-full sm:w-auto", children: translations.cropCancelButton }), jsx(Button$1, { color: "primary", onPress: handleSave, className: "w-full sm:w-auto", children: translations.cropSaveButton })] })] }) }));
-};
-/**
- * Componente de previsualización de archivo
- */
-var FilePreview = function (_a) {
-    var file = _a.file, onRemove = _a.onRemove, removeAriaLabel = _a.removeAriaLabel;
-    var _b = useState(""), previewUrl = _b[0], setPreviewUrl = _b[1];
-    useEffect(function () {
-        if (file === null || file === void 0 ? void 0 : file.type.startsWith("image/")) {
-            var url_1 = URL.createObjectURL(file);
-            setPreviewUrl(url_1);
-            return function () { return URL.revokeObjectURL(url_1); };
-        }
-    }, [file]);
-    if (!(file === null || file === void 0 ? void 0 : file.type.startsWith("image/"))) {
-        return null;
-    }
-    return (jsxs("div", { className: "absolute inset-0  overflow-hidden z-10", children: [jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsx(Button$1, { 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: jsx(IconComponent, { icon: "heroicons:trash", size: "sm" }) })] }));
-};
-/**
- * Componente UploadDocument basado en Hero UI con funcionalidad mejorada
- *
- * @example
- * ```tsx
- * <UploadDocument
- *   onUpload={(files) => console.log(files)}
- *   acceptedFiles="image/*,.pdf"
- *   multiple={false}
- *   translations={{
- *     uploadText: "Upload your files",
- *     dragText: "Drop files here"
- *   }}
- * />
- * ```
- */
-var UploadFile = function (_a) {
-    var text = _a.text, textColor = _a.textColor, subText = _a.subText, 
-    // borderColor, // TODO: Implementar colores personalizados
-    iconColor = _a.iconColor, 
-    // backgroundColor, // TODO: Implementar colores personalizados
-    _b = _a.width, 
-    // backgroundColor, // TODO: Implementar colores personalizados
-    width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "auto" : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxFiles, maxFiles = _e === void 0 ? 1 : _e, maxFileSize = _a.maxFileSize, _f = _a.acceptedFiles, acceptedFiles = _f === void 0 ? ".pdf" : _f, _g = _a.icon, icon = _g === void 0 ? "heroicons:arrow-up-on-square" : _g, onUpload = _a.onUpload, onError = _a.onError, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.success, success = _j === void 0 ? false : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, errorText = _a.errorText, cropConfig = _a.cropConfig, image = _a.image, _l = _a.className, className = _l === void 0 ? "" : _l, _m = _a.translations, translations = _m === void 0 ? {} : _m;
-    var inputRef = useRef(null);
-    var uploadImageRef = useRef(image || null);
-    var _o = useState(false), isDragging = _o[0], setIsDragging = _o[1];
-    // Estados para el modal de crop
-    var _p = useState(false), showCropModal = _p[0], setShowCropModal = _p[1];
-    var _q = useState(""), selectedImageUrl = _q[0], setSelectedImageUrl = _q[1];
-    var _r = useState(null); _r[0]; var setOriginalFile = _r[1];
-    // Combinar traducciones por defecto con las proporcionadas
-    var t = useMemo(function () { return (__assign(__assign({}, defaultTranslations), translations)); }, [translations]);
-    // Actualizar texto si se pasa como prop (retrocompatibilidad)
-    var finalText = text || t.uploadText;
-    var finalSubText = subText || t.subText;
-    var handleClick = function () {
-        var _a;
-        if (!(disabled || uploadImageRef.current)) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }
-    };
-    var validateFiles = useCallback(function (files) {
-        var filesArray = Array.from(files);
-        if (!multiple && filesArray.length > 1) {
-            onError === null || onError === void 0 ? void 0 : onError(t.multipleFilesError);
-            return [];
-        }
-        if (filesArray.length > maxFiles) {
-            onError === null || onError === void 0 ? void 0 : onError(t.maxFilesError.replace("{maxFiles}", maxFiles.toString()));
-            return [];
-        }
-        // Validar tamaño de archivo
-        if (maxFileSize) {
-            var oversizedFiles = filesArray.filter(function (file) { return file.size > maxFileSize; });
-            if (oversizedFiles.length > 0) {
-                var maxSizeFormatted = formatFileSize(maxFileSize);
-                onError === null || onError === void 0 ? void 0 : onError(t.maxFileSizeError.replace("{maxSize}", maxSizeFormatted));
-                return [];
-            }
-        }
-        // Validar tipos de archivo
-        var acceptedExtensions = Array.isArray(acceptedFiles)
-            ? acceptedFiles.map(function (ext) { return ext.trim().toLowerCase(); })
-            : acceptedFiles.split(",").map(function (ext) { return ext.trim().toLowerCase(); });
-        var validFiles = filesArray.filter(function (file) {
-            var _a;
-            if (acceptedFiles.includes("image/*") &&
-                file.type.startsWith("image/")) {
-                return true;
-            }
-            if (acceptedExtensions.some(function (ext) { return ext.includes("/"); })) {
-                return acceptedExtensions.some(function (type) { return file.type === type; });
-            }
-            var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-            return acceptedExtensions.some(function (ext) { return ext === fileExtension || ext === "*"; });
-        });
-        if (validFiles.length === 0) {
-            var formattedTypes = acceptedExtensions
-                .map(formatFileType)
-                .join(", ");
-            onError === null || onError === void 0 ? void 0 : onError(t.invalidFileTypeError.replace("{acceptedTypes}", formattedTypes));
-            return [];
-        }
-        return validFiles;
-    }, [multiple, maxFiles, maxFileSize, acceptedFiles, t, onError]);
-    var handleFileUpload = useCallback(function (files) {
-        var validFiles = validateFiles(files);
-        if (validFiles.length > 0) {
-            var file_1 = validFiles[0];
-            // Si es imagen y hay configuración de crop, abrir modal
-            if (file_1.type.startsWith("image/") && cropConfig) {
-                var reader_1 = new FileReader();
-                reader_1.onload = function () {
-                    setSelectedImageUrl(reader_1.result);
-                    setOriginalFile(file_1);
-                    setShowCropModal(true);
-                };
-                reader_1.readAsDataURL(file_1);
-            }
-            else {
-                // Procesar directamente si no necesita crop
-                uploadImageRef.current = file_1;
-                onUpload(validFiles);
-            }
-        }
-    }, [onUpload, validateFiles, cropConfig]);
-    // Manejar guardado de imagen recortada
-    var handleCropSave = useCallback(function (croppedFile) {
-        uploadImageRef.current = croppedFile;
-        setShowCropModal(false);
-        setSelectedImageUrl("");
-        setOriginalFile(null);
-        onUpload([croppedFile]);
-    }, [onUpload]);
-    // Manejar cancelación de crop
-    var handleCropCancel = useCallback(function () {
-        setShowCropModal(false);
-        setSelectedImageUrl("");
-        setOriginalFile(null);
-    }, []);
-    var handleChange = function (event) {
-        var files = event.target.files;
-        if (files && files.length > 0) {
-            handleFileUpload(files);
-        }
-        // Limpiar el input
-        if (inputRef.current) {
-            inputRef.current.value = "";
-        }
-    };
-    var handleDragEnter = useCallback(function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!disabled) {
-            setIsDragging(true);
-        }
-    }, [disabled]);
-    var handleDragLeave = useCallback(function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-    }, []);
-    var handleDragOver = useCallback(function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
-    var handleDrop = useCallback(function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-        if (disabled) {
-            return;
-        }
-        var droppedFiles = e.dataTransfer.files;
-        if (droppedFiles.length > 0) {
-            handleFileUpload(droppedFiles);
-        }
-    }, [disabled, handleFileUpload]);
-    var handleRemoveImage = function () {
-        uploadImageRef.current = null;
-        onUpload([]);
-    };
-    // Clases CSS dinámicas usando Tailwind
-    var containerClasses = "\n\t\trelative w-full border-2 border-dashed rounded-2xl p-3 transition-all duration-300 bg-red-500\n\t\t".concat(width !== "100%" ? "w-[".concat(width, "]") : "w-full", "\n\t\t").concat(height !== "auto" ? "h-[".concat(height, "]") : "min-h-28", "\n\t\t").concat(isDragging
-        ? "border-primary-500 bg-primary-50 dark:bg-primary-900"
-        : error
-            ? "border-danger-500 bg-danger-50 dark:bg-danger-950"
-            : success
-                ? "border-success-500 bg-success-50 dark:bg-success-950"
-                : disabled
-                    ? "border-gray-300 bg-gray-100 dark:bg-gray-800"
-                    : "border-gray-300 hover:border-gray-400 bg-primary-50 dark:bg-gray-900", "\n\t\t").concat(!(disabled || uploadImageRef.current) ? "cursor-pointer" : "cursor-default", "\n\t\t").concat(className, "\n\t")
-        .trim()
-        .replace(/\s+/g, " ");
-    var textClasses = "\n\t\ttext-centertext-base ont-medium\n\t\t".concat(disabled ? "text-default-400" : textColor || "text-default-700 dark:text-default-200", "\n\t");
-    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 (jsxs("div", { className: "relative", children: [jsx(Card$1, { className: containerClasses, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxs(CardBody, { className: "flex flex-col items-center justify-center gap-3 sm:gap-4 relative overflow-hidden", onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [uploadImageRef.current && (jsx(FilePreview, { file: uploadImageRef.current, onRemove: handleRemoveImage, removeAriaLabel: t.removeFileAriaLabel })), jsx("div", { className: uploadImageRef.current
-                                ? "opacity-0"
-                                : "opacity-100 transition-opacity", children: jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4", children: [jsx(IconComponent, { icon: icon, size: "xl", className: "sm:text-4xl lg:text-5xl ".concat(disabled ? "text-gray-400" : iconColor || "text-primary") }), jsxs("div", { className: "text-center px-2", children: [jsx("p", { className: textClasses, children: isDragging ? t.dragText : finalText }), finalSubText && !isDragging && (jsx("p", { className: subTextClasses, children: finalSubText }))] })] }) }), jsx("input", { ref: inputRef, type: "file", className: "hidden", multiple: multiple, accept: Array.isArray(acceptedFiles)
-                                ? acceptedFiles.join(",")
-                                : acceptedFiles, onChange: handleChange, disabled: disabled, "aria-label": t.uploadAreaAriaLabel })] }) }), error && errorText && (jsx("p", { className: "text-red-500 text-sm mt-2", role: "alert", children: errorText })), showCropModal && selectedImageUrl && cropConfig && (jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: selectedImageUrl, targetWidth: cropConfig.targetWidth, targetHeight: cropConfig.targetHeight, onSave: handleCropSave, onCancel: handleCropCancel, translations: t }))] }));
-};
-UploadFile.displayName = "UploadFile";
-
-var Pagination = function (_a) {
-    _a.size; var props = __rest(_a, ["size"]);
-    return jsx(Pagination$1, __assign({ showControls: true, isCompact: true }, props));
-};
-
-var H2 = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsx("h2", __assign({ className: cn("text-lg font-medium", className) }, props, { children: children })));
-};
-
-var H3 = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsx("h3", __assign({ className: cn("text-base font-medium mb-1", className) }, props, { children: children })));
-};
-
-var H4 = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsx("h4", __assign({ className: cn("text-sm font-medium mb-1", className) }, props, { children: children })));
-};
-
-var P = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (jsx("p", __assign({ className: cn("text-sm text-default-500", className) }, props, { children: children })));
-};
-
-var ThemeContext = createContext({
-    mode: "light",
-    color: "blue",
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setMode: function () { },
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setColor: function () { },
-});
-var useThemeContext = function () {
-    var context = useContext(ThemeContext);
-    if (!context) {
-        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
-    }
-    return context;
-};
+var useThemeContext = function () {
+    var context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
+    }
+    return context;
+};
 
 var themeColors = {
     "blue-light": {
@@ -1811,202 +722,1920 @@ var themeColors = {
                 "800": "#ffcaca",
                 "900": "#ffe9e9",
                 foreground: "#000",
-                DEFAULT: "#ff4f4f",
+                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",
             },
-            focus: "#ff4f4f",
+            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",
         },
     },
-    "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",
+};
+
+var ColorSelector = function (_a) {
+    var selectedColor = _a.selectedColor, onColorChange = _a.onColorChange;
+    var mode = useThemeContext().mode;
+    /**
+     * Filters and maps the available theme colors to the current theme mode (light/dark).
+     * Each color option contains:
+     * - value: the theme name (e.g., "blue-light")
+     * - label: the base color name (e.g., "blue")
+     * - color: the primary color hex value
+     */
+    var colorOptions = Object.entries(themeColors)
+        .filter(function (_a) {
+        var themeData = _a[1];
+        var themeMode = themeData.extend;
+        return mode === "light" ? themeMode === "light" : themeMode === "dark";
+    })
+        .map(function (_a) {
+        var themeName = _a[0], theme = _a[1];
+        return ({
+            value: themeName,
+            label: themeName.split("-")[0],
+            color: theme.colors.primary.DEFAULT,
+        });
+    });
+    return (jsx(RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
+            base: "flex flex-wrap !gap-2",
+            wrapper: "flex flex-wrap !gap-2",
+        }, children: colorOptions.map(function (color) { return (jsx(Radio, { value: color.label, className: "p-0 m-0", classNames: {
+                base: "p-0 m-0",
+                wrapper: "hidden",
+                labelWrapper: "p-0 m-0",
+            }, children: jsx("div", { className: "w-8 h-8 rounded-full border-2 cursor-pointer transition-all ".concat(selectedColor === color.label
+                    ? "border-black border-opacity-20 scale-110"
+                    : "border-gray-200 hover:scale-105"), style: { backgroundColor: color.color }, title: color.label }) }, color.value)); }) }));
+};
+
+// Traducciones por defecto en español
+var defaultTranslations$5 = {
+    dayOption: "Día específico",
+    dateRangeOption: "Rango de fechas",
+    selectDateAriaLabel: "Seleccionar fecha",
+    selectDateRangeAriaLabel: "Seleccionar rango de fechas",
+};
+/**
+ * DateSelector - Componente para seleccionar fechas individuales o rangos de fechas
+ * basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ * Maneja su propio estado interno de manera autónoma.
+ */
+var DateSelector = function (_a) {
+    var _b = _a.initialType, initialType = _b === void 0 ? 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$5), translations);
+    var handleTypeChange = function (value) {
+        var newType = value;
+        setType(newType);
+        // Limpiar valores cuando cambia el tipo
+        if (newType === HolidayType.SingleDay) {
+            setDateRange(null);
+        }
+        else {
+            setDate(null);
+        }
+        // Notificar cambio
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            type: newType,
+            date: newType === HolidayType.SingleDay ? date : null,
+            dateRange: newType === 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 (jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center ".concat(className), children: [jsxs(RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: type, onValueChange: handleTypeChange }, radioGroupProps, { children: [jsx(Radio, __assign({ value: HolidayType.SingleDay }, radioItemProps, { children: t.dayOption })), jsx(Radio, __assign({ value: HolidayType.DateRange }, radioItemProps, { children: t.dateRangeOption }))] })), type === HolidayType.DateRange ? (jsx(DateRangePicker$1, __assign({ className: "xs:w-full md:flex-1 md:max-w-xs", value: dateRange || null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsx(DatePicker$1, __assign({ className: "xs:w-full md:flex-1 md:max-w-40", value: date || null, onChange: handleDateChange, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }, datePickerProps)))] }));
+};
+
+var H1 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsx("h1", __assign({ className: cn("text-xl font-bold", className) }, props, { children: children })));
+};
+
+var H3 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsx("h3", __assign({ className: cn("text-base font-medium", className) }, props, { children: children })));
+};
+
+var H4 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsx("h4", __assign({ className: cn("text-sm font-medium ", className) }, props, { children: children })));
+};
+
+var ConfigMenu = function (_a) {
+    var _b;
+    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
+    return (jsxs(Dropdown, { className: "min-w-40", children: [jsx(DropdownTrigger, { children: jsx(Button$1, { isIconOnly: true, color: "default", startContent: jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxs(DropdownMenu, { "aria-label": "Configuration", children: [jsx(DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsx(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 ? jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsx(DropdownSection, { children: jsx(DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
+                                base: "text-default-500",
+                            }, startContent: 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 (jsx(Button$1, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsx(IconComponent, { icon: "solar:bell-bing-linear" }), children: notificationCount > 0 && (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;
+    return (jsxs("header", { className: "header__container", children: [jsx(Button$1, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(NotificationButton, { notificationCount: notificationCount }), jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }));
+};
+HeaderComponent.displayName = "Header";
+
+function normalizeClass(value) {
+    if (typeof value === "string") {
+        return value || undefined;
+    }
+    if (Array.isArray(value)) {
+        return value.filter(Boolean).join(" ") || undefined;
+    }
+    return undefined;
+}
+var getSectionClasses = 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(v)];
+    }))), { base: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
+            "p-0 max-w-[44px]": isCollapsed,
+        })), group: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
+            "flex flex-col gap-1": isCollapsed,
+        })), heading: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
+            hidden: isCollapsed,
+        })) }));
+};
+var getItemClasses = 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(v)];
+    }))), { base: normalizeClass(cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
+            "w-11 h-11 gap-0 p-0": isCollapsed,
+        })) }));
+};
+
+var EnumMenuNavListItem;
+(function (EnumMenuNavListItem) {
+    EnumMenuNavListItem["Nest"] = "nest";
+})(EnumMenuNavListItem || (EnumMenuNavListItem = {}));
+
+/**
+ * @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 = 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 = useState(defaultSelectedKey), selected = _d[0], setSelected = _d[1];
+    // Component styles
+    var sectionClasses = getSectionClasses(isCollapsed, sectionClassesProp);
+    var itemClasses = getItemClasses(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 (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsx(IconComponent, { className: 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.Nest;
+        if (isNestType) {
+            item.href = undefined;
+        }
+        return (createElement(ListboxItem, __assign({}, item, { key: item.key, classNames: {
+                base: 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 ? (jsx(IconComponent, { className: 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 ? (jsxs(Popover, { placement: "right", offset: 10, children: [jsx(PopoverTrigger, { children: jsx("div", { className: "flex w-full items-center justify-center", children: jsx(Tooltip$1, { content: item.title, placement: "right", classNames: {
+                                    base: "text-default-500",
+                                }, children: jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsx(IconComponent, { className: 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)) }) }) }) }), jsx(PopoverContent, { className: "p-0", children: jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsx(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 ? (jsx(Accordion, { className: "p-0", children: jsx(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 ? (jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsx(IconComponent, { className: cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), 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 ? (jsx(Listbox, { className: "mt-0.5 text-default-500", classNames: {
+                            list: 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.Nest;
+        if (isNestType) {
+            return renderNestItem(item);
+        }
+        var isItemSelected = selected === item.key;
+        return (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsx(IconComponent, { className: 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 ? (jsx(Tooltip$1, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
+                base: "text-default-500",
+            }, children: jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsx(IconComponent, { className: 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 (jsx(Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: 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: 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.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsx(ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
+        } }), isCollapsed ? "compact" : "default"));
+});
+MenuNavList.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.
+ */
+var MenuComponent = 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 = useCallback(function () {
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
+    }, [onOpenSidebarChange]);
+    var handleCollapseToggle = useCallback(function () {
+        setIsCollapsed(function (prev) { return !prev; });
+    }, []);
+    var handleUpgradeClick = useCallback(function () {
+        if (upgradeCard) {
+            window.open(upgradeCard.buttonLink, "_blank");
+        }
+    }, [upgradeCard]);
+    var handleHelpClick = useCallback(function () {
+        window.open(helpButton.redirect, "_blank");
+    }, [helpButton]);
+    if (!isOpenSidebar) {
+        return null;
+    }
+    return (jsxs(Fragment, { children: [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 } }), jsx("div", { className: "container__menu ".concat(isCollapsed
+                    ? "container__menu--collapsed"
+                    : "container__menu--expanded"), children: jsxs("div", { className: "content__menu", children: [jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxs("div", { className: "flex items-center", children: [jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsx(IconComponent, { icon: isCollapsed
+                                                ? "solar:alt-arrow-right-outline"
+                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsx(Spacer, { y: 6 }), jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsx(Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxs("div", { className: "collapsible-item flex flex-col", children: [jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxs("div", { className: "collapsible-item relative", children: [jsxs(Card$1, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxs(CardBody, { className: "items-center py-5 text-center gap-1", children: [jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsx(CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsx(Button$1, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsx(Spacer, { y: 9 })] })), jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsx(Button$1, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
+});
+
+var StepIndicator = function (_a) {
+    var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.showStepText, showStepText = _c === void 0 ? true : _c, stepTextFormatter = _a.stepTextFormatter, className = _a.className, props = __rest(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
+    var 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 (jsxs("div", __assign({ className: cn("w-full", className) }, props, { children: [showStepText && (jsx("div", { className: "text-center text-sm font-medium text-default-400 mb-3", children: stepText })), jsx("div", { className: "w-full bg-content2 rounded-full h-2 overflow-hidden", children: jsx("div", { className: 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(value, defaultValue, onChange) {
+    let [stateValue, setStateValue] = (useState)(value || defaultValue);
+    let isControlledRef = (useRef)(value !== undefined);
+    let isControlled = value !== undefined;
+    (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 = (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$4 = {
+    checkIconTitle: "Check",
+};
+var VerticalSteps = React.forwardRef(function (_a, ref) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
+    var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
+    var t = __assign(__assign({}, defaultTranslations$4), 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 (jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsx("ol", { className: 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"
+                    : currentStep < stepIdx
+                        ? "inactive"
+                        : "complete";
+                return (
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                jsxs("li", { className: "relative", children: [jsx("div", { className: "flex w-full max-w-full items-center", children: jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsx("div", { className: "flex h-full items-center", children: jsx(LazyMotion, { features: domAnimation, children: jsx("div", { className: "relative", children: jsx(m.div, { animate: status, className: 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: jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsx("div", { className: "flex-1 text-left", children: jsxs("div", { children: [jsx("div", { className: 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 }), jsx("div", { className: 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 && (jsx("div", { "aria-hidden": "true", className: 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: jsx("div", { className: 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.displayName = "VerticalSteps";
+
+var stepperClasses = 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 = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onChangePage", "steps", "goBackTranslation", "onClose"]);
+    var handleOverlayClick = function (e) {
+        if (e.target === e.currentTarget) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxs("div", __assign({ ref: ref, className: cn("flex h-full w-full max-w-4xl rounded-lg bg-background shadow-lg lg:h-auto", className) }, props, { children: [jsx("div", { className: "hidden w-1/3 flex-col items-center justify-center gap-y-8 p-8 md:flex", children: jsx(VerticalSteps, { className: stepperClasses, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage }) }), 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: [jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsx("div", { className: "flex  w-full justify-center", children: jsx(StepIndicator, { className: cn(stepperClasses), currentStep: currentPage + 1, totalSteps: steps.length }) }) }), 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";
+
+var MultistepNavigationButtons = function (_a) {
+    var nextButtonProps = _a.nextButtonProps, cancelButtonProps = _a.cancelButtonProps, className = _a.className;
+    // const { children: backButtonChildren, ...restBackButtonProps } =
+    // 	backButtonProps || {};
+    var _b = nextButtonProps || {}, nextButtonChildren = _b.children, restNextButtonProps = __rest(_b, ["children"]);
+    var _c = cancelButtonProps || {}, cancelButtonChildren = _c.children, restCancelButtonProps = __rest(_c, ["children"]);
+    return (jsx("div", { className: cn("flex w-full flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-between md:justify-end", className), children: jsxs("div", { className: "flex w-full flex-col-reverse gap-2 md:w-auto md:flex-row", children: [jsx(Button$1, __assign({ className: "w-full md:w-auto", color: "default", variant: "flat" }, restCancelButtonProps, { children: cancelButtonChildren || "Cancel" })), jsx(Button$1, __assign({ className: "w-full md:w-auto", color: "primary" }, restNextButtonProps, { children: nextButtonChildren || "Next" }))] }) }));
+};
+
+var variants = {
+    enter: function (direction) { return ({
+        y: direction > 0 ? 30 : -30,
+        opacity: 0,
+    }); },
+    center: {
+        zIndex: 1,
+        y: 0,
+        opacity: 1,
+    },
+    exit: function (direction) { return ({
+        zIndex: 0,
+        y: direction < 0 ? 30 : -30,
+        opacity: 0,
+    }); },
+};
+var MultiStepWizard = function (_a) {
+    var isOpen = _a.isOpen, steps = _a.steps, translations = _a.translations, onClose = _a.onClose, onComplete = _a.onComplete, completeButtonText = _a.completeButtonText;
+    var _b = React.useState([0, 0]), _c = _b[0], page = _c[0], direction = _c[1], setPage = _b[1];
+    React.useEffect(function () {
+        if (isOpen) {
+            setPage([0, 0]);
+        }
+    }, [isOpen]);
+    var t = __assign({
+        continue: "Continue",
+        goBack: "Back",
+        cancel: "Cancel",
+        next: "Next",
+        complete: "Complete",
+    }, translations);
+    var paginate = React.useCallback(function (newDirection) {
+        setPage(function (prev) {
+            var nextPage = prev[0] + newDirection;
+            if (nextPage < 0 || nextPage > steps.length - 1) {
+                return prev;
+            }
+            return [nextPage, newDirection];
+        });
+    }, [steps]);
+    var onChangePage = React.useCallback(function (newPage) {
+        setPage(function (prev) {
+            if (newPage < 0 || newPage > steps.length - 1) {
+                return prev;
+            }
+            var currentPage = prev[0];
+            return [newPage, newPage > currentPage ? 1 : -1];
+        });
+    }, [steps]);
+    var onBack = React.useCallback(function () {
+        paginate(-1);
+    }, [paginate]);
+    var onNext = React.useCallback(function () {
+        paginate(1);
+    }, [paginate]);
+    // Determinar el texto del botón según el paso
+    var getButtonText = function () {
+        if (page === 0) {
+            return t.next;
+        }
+        if (page === steps.length - 1) {
+            return completeButtonText || t.complete;
+        }
+        return t.continue;
+    };
+    // Determinar la acción del botón según el paso
+    var handleNextAction = function () {
+        if (page === steps.length - 1) {
+            // Último paso: ejecutar acción de completado
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }
+        else {
+            // Otros pasos: continuar al siguiente
+            onNext();
+        }
+    };
+    var content = React.useMemo(function () {
+        return (jsx(LazyMotion, { features: domAnimation, children: jsx(m.div, { animate: "center", className: "col-span-12", custom: direction, exit: "exit", initial: "exit", transition: {
+                    y: {
+                        ease: "backOut",
+                        duration: 0.35,
+                    },
+                    opacity: { duration: 0.4 },
+                }, variants: variants, children: steps[page].content }, page) }));
+    }, [page, steps, direction]);
+    if (!isOpen) {
+        return null;
+    }
+    return (jsxs(MultiStepSidebar, { currentPage: page, goBackTranslation: t.goBack, steps: steps, onBack: onBack, onChangePage: onChangePage, onClose: onClose, onNext: onNext, children: [jsxs("div", { children: [jsx(Button, { className: "w-fit text-default-600 mb-6", color: "default", variant: "light", onPress: onBack, isDisabled: page === 0, startContent: jsx(IconComponent, { className: "text-default-500", icon: "material-symbols:arrow-back-rounded", size: "sm" }), children: t.goBack || "Back" }), jsx("div", { className: "relative flex h-fit w-full flex-col text-center lg:justify-center lg:pt-0", children: content })] }), jsx(MultistepNavigationButtons, { backButtonProps: {
+                    isDisabled: page === 0,
+                    onPress: onBack,
+                    children: t.goBack,
+                }, cancelButtonProps: {
+                    onPress: onClose,
+                    children: t.cancel,
+                }, nextButtonProps: {
+                    children: getButtonText(),
+                    onPress: handleNextAction,
+                    isDisabled: steps[page].isStepValid === false,
+                } })] }));
+};
+
+var Pagination = function (_a) {
+    _a.size; var props = __rest(_a, ["size"]);
+    return jsx(Pagination$1, __assign({ showControls: true, isCompact: true }, props));
+};
+
+// Lista simple de países con bandera emoji y código
+var countries = [
+    { code: "+57", name: "Colombia", flag: "🇨🇴" },
+    { code: "+54", name: "Argentina", flag: "🇦🇷" },
+    { code: "+55", name: "Brazil", flag: "🇧🇷" },
+    { code: "+52", name: "Mexico", flag: "🇲🇽" },
+    { code: "+503", name: "El Salvador", flag: "🇸🇻" },
+    { code: "+51", name: "Peru", flag: "🇵🇪" },
+    { code: "+56", name: "Chile", flag: "🇨🇱" },
+    { code: "+1", name: "United States", flag: "🇺🇸" },
+    { code: "+7", name: "Russia", flag: "🇷🇺" },
+    { code: "+20", name: "Egypt", flag: "🇪🇬" },
+    { code: "+27", name: "South Africa", flag: "🇿🇦" },
+    { code: "+33", name: "France", flag: "🇫🇷" },
+    { code: "+34", name: "Spain", flag: "🇪🇸" },
+    { code: "+39", name: "Italy", flag: "🇮🇹" },
+    { code: "+44", name: "United Kingdom", flag: "🇬🇧" },
+    { code: "+49", name: "Germany", flag: "🇩🇪" },
+    { code: "+51", name: "Peru", flag: "🇵🇪" },
+    { code: "+52", name: "Mexico", flag: "🇲🇽" },
+    { code: "+54", name: "Argentina", flag: "🇦🇷" },
+    { code: "+55", name: "Brazil", flag: "🇧🇷" },
+    { code: "+56", name: "Chile", flag: "🇨🇱" },
+    { code: "+57", name: "Colombia", flag: "🇨🇴" },
+    { code: "+60", name: "Malaysia", flag: "🇲🇾" },
+    { code: "+61", name: "Australia", flag: "🇦🇺" },
+    { code: "+62", name: "Indonesia", flag: "🇮🇩" },
+    { code: "+64", name: "New Zealand", flag: "🇳🇿" },
+    { code: "+65", name: "Singapore", flag: "🇸🇬" },
+    { code: "+66", name: "Thailand", flag: "🇹🇭" },
+    { code: "+81", name: "Japan", flag: "🇯🇵" },
+    { code: "+82", name: "South Korea", flag: "🇰🇷" },
+    { code: "+84", name: "Vietnam", flag: "🇻🇳" },
+    { code: "+86", name: "China", flag: "🇨🇳" },
+    { code: "+91", name: "India", flag: "🇮🇳" },
+    { code: "+351", name: "Portugal", flag: "🇵🇹" },
+    { code: "+503", name: "El Salvador", flag: "🇸🇻" },
+    { code: "+966", name: "Saudi Arabia", flag: "🇸🇦" },
+    { code: "+971", name: "UAE", flag: "🇦🇪" },
+];
+var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
+// Traducciones por defecto
+var defaultTranslations$3 = {
+    label: "Teléfono",
+    placeholder: "Número de teléfono",
+    searchPlaceholder: "Buscar país...",
+    selectCountryAriaLabel: "Seleccionar país",
+    expandListAriaLabel: "Desplegar lista de países",
+    noCountriesFound: "No se encontraron países",
+};
+
+var Phone = function (_a) {
+    var id = _a.id, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "phone" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
+    var _h = useState(false), isDropdownOpen = _h[0], setIsDropdownOpen = _h[1];
+    var _j = useState(uniqueCountries[0]), selectedCountry = _j[0], setSelectedCountry = _j[1];
+    var _k = useState(""), inputValue = _k[0], setInputValue = _k[1];
+    var dropdownRef = useRef(null);
+    var portalDropdownRef = useRef(null);
+    var _l = useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
+    var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
+    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var finalLabel = label || t.label;
+    useEffect(function () {
+        if (value) {
+            var found = uniqueCountries.find(function (c) { return c.code === value.countryCode; });
+            if (found) {
+                setSelectedCountry(found);
+            }
+            setInputValue(value.phoneNumber);
+        }
+    }, [value]);
+    useEffect(function () {
+        if (isDropdownOpen) {
+            setFilteredCountries(uniqueCountries);
+        }
+    }, [isDropdownOpen]);
+    useLayoutEffect(function () {
+        if (isDropdownOpen && dropdownRef.current) {
+            var rect = dropdownRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                position: "absolute",
+                top: "".concat(rect.bottom + window.scrollY + 4, "px"),
+                left: "".concat(rect.left + window.scrollX, "px"),
+                width: "15rem",
+                zIndex: 50,
+            });
+        }
+    }, [isDropdownOpen]);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                portalDropdownRef.current &&
+                !portalDropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        };
+        if (isDropdownOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isDropdownOpen]);
+    var handleCountrySelect = function (country) {
+        setSelectedCountry(country);
+        setIsDropdownOpen(false);
+        if (onChange) {
+            onChange({ countryCode: country.code, phoneNumber: inputValue });
+        }
+    };
+    var handleInputChange = function (e) {
+        var val = e.target.value.replace(/\D/g, "");
+        setInputValue(val);
+        if (onChange) {
+            onChange({ countryCode: selectedCountry.code, phoneNumber: val });
+        }
+    };
+    return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1 text-left", children: [finalLabel, " ", required && jsx("span", { className: "text-danger-500", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500  ".concat(error ? "!border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl  bg-default-100  focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsx("span", { className: "text-xs text-default-500", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-default-500 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsx("title", { children: t.expandListAriaLabel }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }) }), jsx(Input$1, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500  placeholder-default-500 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsx("span", { className: " text-left text-xs text-danger-500 mt-1", children: errorText })), isDropdownOpen &&
+                createPortal(jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
+                                    var searchTerm = e.target.value.toLowerCase();
+                                    var filtered = uniqueCountries.filter(function (country) {
+                                        return country.name.toLowerCase().includes(searchTerm) ||
+                                            country.code.toLowerCase().includes(searchTerm);
+                                    });
+                                    setFilteredCountries(filtered);
+                                } }) }), jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-default-200 ".concat(country.code === selectedCountry.code
+                                    ? "bg-primary-50"
+                                    : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsx("span", { className: "text-xs text-default-500", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
+};
+
+var defaultTranslations$2 = {
+    message: "The Winter 2024 Release is here: new editor, analytics API, and so much more.",
+    buttonText: "Explore",
+    closeButtonLabel: "Close Banner",
+};
+/**
+ * PromotionalBanner genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ */
+var PromotionalBanner = function (_a) {
+    var message = _a.message, buttonText = _a.buttonText, _b = _a.messageHref, messageHref = _b === void 0 ? "#" : _b, _c = _a.buttonHref, buttonHref = _c === void 0 ? "#" : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, _e = _a.isVisible, isVisible = _e === void 0 ? true : _e, _f = _a.gradientColors, gradientColors = _f === void 0 ? ["default-100", "danger-100", "secondary-100"] : _f, _g = _a.buttonGradientColors, buttonGradientColors = _g === void 0 ? ["#F871A0", "#9353D3"] : _g, onClose = _a.onClose, onMessageClick = _a.onMessageClick, onButtonClick = _a.onButtonClick, _h = _a.messageLinkProps, messageLinkProps = _h === void 0 ? {} : _h, _j = _a.buttonProps, buttonProps = _j === void 0 ? {} : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k;
+    var t = __assign(__assign({}, defaultTranslations$2), translations);
+    var finalMessage = message || t.message;
+    var finalButtonText = buttonText || t.buttonText;
+    var handleClose = function () {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    var handleMessageClick = function () {
+        onMessageClick === null || onMessageClick === void 0 ? void 0 : onMessageClick();
+    };
+    var handleButtonClick = function () {
+        onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick();
+    };
+    if (!isVisible) {
+        return null;
+    }
+    var fromColor = gradientColors[0], viaColor = gradientColors[1], toColor = gradientColors[2];
+    var buttonGradient1 = buttonGradientColors[0], buttonGradient2 = buttonGradientColors[1];
+    return (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: [jsx("p", { className: "text-small text-foreground", children: jsxs(Link, __assign({ className: "text-inherit", href: messageHref, onClick: handleMessageClick }, messageLinkProps, { children: [finalMessage, "\u00A0"] })) }), jsx(Button$1, __assign({ as: Link, className: "group text-small relative h-9 overflow-hidden bg-transparent font-normal", color: "default", endContent: 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 && (jsx("div", { className: "flex flex-1 justify-end", children: jsx(Button$1, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: 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(_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") {
+            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 (jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsx("ol", { className: 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 (jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: 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: [jsx("div", { className: "h-ful relative flex items-center", children: jsx(LazyMotion, { features: domAnimation, children: jsx(m.div, { animate: status, className: "relative", children: jsx(m.div, { className: 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: jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded" })) : (jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsx("div", { className: "max-w-full flex-1 text-start", children: jsx("div", { className: 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 && (jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
+                                    // @ts-ignore
+                                    "--idx": stepIdx,
+                                }, children: jsx("div", { className: 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.displayName = "RowSteps";
+
+function $14e0f24ef4ac5c92$export$c19a80a9721b80f6(a, b) {
+    return $14e0f24ef4ac5c92$var$timeToMs(a) - $14e0f24ef4ac5c92$var$timeToMs(b);
+}
+function $14e0f24ef4ac5c92$var$timeToMs(a) {
+    return a.hour * 3600000 + a.minute * 60000 + a.second * 1000 + a.millisecond;
+}
+
+function $735220c2d4774dd3$export$3e2544e88a25bff8(duration) {
+    let inverseDuration = {};
+    for(let key in duration)if (typeof duration[key] === 'number') inverseDuration[key] = -duration[key];
+    return inverseDuration;
+}
+function $735220c2d4774dd3$export$e5d5e1c1822b6e56(value, fields) {
+    let mutableValue = value.copy();
+    if (fields.hour != null) mutableValue.hour = fields.hour;
+    if (fields.minute != null) mutableValue.minute = fields.minute;
+    if (fields.second != null) mutableValue.second = fields.second;
+    if (fields.millisecond != null) mutableValue.millisecond = fields.millisecond;
+    $735220c2d4774dd3$export$7555de1e070510cb(mutableValue);
+    return mutableValue;
+}
+function $735220c2d4774dd3$var$balanceTime(time) {
+    time.second += Math.floor(time.millisecond / 1000);
+    time.millisecond = $735220c2d4774dd3$var$nonNegativeMod(time.millisecond, 1000);
+    time.minute += Math.floor(time.second / 60);
+    time.second = $735220c2d4774dd3$var$nonNegativeMod(time.second, 60);
+    time.hour += Math.floor(time.minute / 60);
+    time.minute = $735220c2d4774dd3$var$nonNegativeMod(time.minute, 60);
+    let days = Math.floor(time.hour / 24);
+    time.hour = $735220c2d4774dd3$var$nonNegativeMod(time.hour, 24);
+    return days;
+}
+function $735220c2d4774dd3$export$7555de1e070510cb(time) {
+    time.millisecond = Math.max(0, Math.min(time.millisecond, 1000));
+    time.second = Math.max(0, Math.min(time.second, 59));
+    time.minute = Math.max(0, Math.min(time.minute, 59));
+    time.hour = Math.max(0, Math.min(time.hour, 23));
+}
+function $735220c2d4774dd3$var$nonNegativeMod(a, b) {
+    let result = a % b;
+    if (result < 0) result += b;
+    return result;
+}
+function $735220c2d4774dd3$var$addTimeFields(time, duration) {
+    time.hour += duration.hours || 0;
+    time.minute += duration.minutes || 0;
+    time.second += duration.seconds || 0;
+    time.millisecond += duration.milliseconds || 0;
+    return $735220c2d4774dd3$var$balanceTime(time);
+}
+function $735220c2d4774dd3$export$7ed87b6bc2506470(time, duration) {
+    let res = time.copy();
+    $735220c2d4774dd3$var$addTimeFields(res, duration);
+    return res;
+}
+function $735220c2d4774dd3$export$fe34d3a381cd7501(time, duration) {
+    return $735220c2d4774dd3$export$7ed87b6bc2506470(time, $735220c2d4774dd3$export$3e2544e88a25bff8(duration));
+}
+function $735220c2d4774dd3$export$dd02b3e0007dfe28(value, field, amount, options) {
+    let mutable = value.copy();
+    switch(field){
+        case 'hour':
+            {
+                let hours = value.hour;
+                let min = 0;
+                let max = 23;
+                if ((options === null || options === void 0 ? void 0 : options.hourCycle) === 12) {
+                    let isPM = hours >= 12;
+                    min = isPM ? 12 : 0;
+                    max = isPM ? 23 : 11;
+                }
+                mutable.hour = $735220c2d4774dd3$var$cycleValue(hours, amount, min, max, options === null || options === void 0 ? void 0 : options.round);
+                break;
+            }
+        case 'minute':
+            mutable.minute = $735220c2d4774dd3$var$cycleValue(value.minute, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
+            break;
+        case 'second':
+            mutable.second = $735220c2d4774dd3$var$cycleValue(value.second, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
+            break;
+        case 'millisecond':
+            mutable.millisecond = $735220c2d4774dd3$var$cycleValue(value.millisecond, amount, 0, 999, options === null || options === void 0 ? void 0 : options.round);
+            break;
+        default:
+            throw new Error('Unsupported field ' + field);
+    }
+    return mutable;
+}
+function $735220c2d4774dd3$var$cycleValue(value, amount, min, max, round = false) {
+    if (round) {
+        value += Math.sign(amount);
+        if (value < min) value = max;
+        let div = Math.abs(amount);
+        if (amount > 0) value = Math.ceil(value / div) * div;
+        else value = Math.floor(value / div) * div;
+        if (value > max) value = min;
+    } else {
+        value += amount;
+        if (value < min) value = max - (min - value - 1);
+        else if (value > max) value = min + (value - max - 1);
+    }
+    return value;
+}
+
+function $fae977aafc393c5c$export$f59dee82248f5ad4(time) {
+    return `${String(time.hour).padStart(2, '0')}:${String(time.minute).padStart(2, '0')}:${String(time.second).padStart(2, '0')}${time.millisecond ? String(time.millisecond / 1000).slice(1) : ''}`;
+}
+
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+
+var // This prevents TypeScript from allowing other types with the same fields to match.
+// @ts-ignore
+$35ea8db9cb2ccb90$var$_type1 = /*#__PURE__*/ new WeakMap();
+class $35ea8db9cb2ccb90$export$680ea196effce5f {
+    /** Returns a copy of this time. */ copy() {
+        return new $35ea8db9cb2ccb90$export$680ea196effce5f(this.hour, this.minute, this.second, this.millisecond);
+    }
+    /** Returns a new `Time` with the given duration added to it. */ add(duration) {
+        return ($735220c2d4774dd3$export$7ed87b6bc2506470)(this, duration);
+    }
+    /** Returns a new `Time` with the given duration subtracted from it. */ subtract(duration) {
+        return ($735220c2d4774dd3$export$fe34d3a381cd7501)(this, duration);
+    }
+    /** Returns a new `Time` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields) {
+        return ($735220c2d4774dd3$export$e5d5e1c1822b6e56)(this, fields);
+    }
+    /**
+   * Returns a new `Time` with the given field adjusted by a specified amount.
+   * When the resulting value reaches the limits of the field, it wraps around.
+   */ cycle(field, amount, options) {
+        return ($735220c2d4774dd3$export$dd02b3e0007dfe28)(this, field, amount, options);
+    }
+    /** Converts the time to an ISO 8601 formatted string. */ toString() {
+        return ($fae977aafc393c5c$export$f59dee82248f5ad4)(this);
+    }
+    /** Compares this time with another. A negative result indicates that this time is before the given one, and a positive time indicates that it is after. */ compare(b) {
+        return ($14e0f24ef4ac5c92$export$c19a80a9721b80f6)(this, b);
+    }
+    constructor(hour = 0, minute = 0, second = 0, millisecond = 0){
+        (_class_private_field_init)(this, $35ea8db9cb2ccb90$var$_type1, {
+            writable: true,
+            value: void 0
+        });
+        this.hour = hour;
+        this.minute = minute;
+        this.second = second;
+        this.millisecond = millisecond;
+        ($735220c2d4774dd3$export$7555de1e070510cb)(this);
+    }
+}
+
+var Switch = function (_a) {
+    var id = _a.id, props = __rest(_a, ["id"]);
+    var generatedId = useId();
+    var autoId = id || generatedId;
+    return jsx(Switch$1, __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(_a, ["label", "id", "size", "radius", "variant"]);
+    var generatedId = useId();
+    var autoId = id || generatedId;
+    return (jsx(TimeInput$1, __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",
+        } })));
+};
+
+/**
+ * @component ScheduleRow
+ * @description A React component for managing the schedule of a single day.
+ * It allows users to open or close the schedule, add or remove time slots,
+ * and modify the start and end times of each slot. The component is fully
+ * controlled and reports changes to the parent via the `onChange` callback.
+ *
+ * @param {ScheduleRowProps} props - The props for the component.
+ * @returns {React.ReactElement} The rendered ScheduleRow component.
+ */
+var ScheduleRow = function (_a) {
+    var day = _a.day, daySchedule = _a.daySchedule, translations = _a.translations, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
+    /**
+     * @function validateTimeSlots
+     * @description Validates all time slots to ensure the "from" time is not after the "to" time.
+     * @param {TimeSlot[]} timeSlots - The array of time slots to validate.
+     * @returns {TimeSlot[]} The updated array of time slots with error messages if any.
+     */
+    var validateTimeSlots = function (timeSlots) {
+        return timeSlots.map(function (slot) {
+            if (slot.from && slot.to) {
+                var fromTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.from.split(":").map(Number), false)))();
+                var toTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.to.split(":").map(Number), false)))();
+                if (fromTime.compare(toTime) > 0) {
+                    return __assign(__assign({}, slot), { error: "From time cannot be after to time" });
+                }
+            }
+            return __assign(__assign({}, slot), { error: null });
+        });
+    };
+    /**
+     * @function toTimeValue
+     * @description Converts a time string (e.g., "09:00") to a `TimeValue` object
+     * required by the `TimeInput` component.
+     * @param {string} time - The time string to convert.
+     * @returns {TimeValue | null} The corresponding `TimeValue` object, or `null` if the input is empty.
+     */
+    var toTimeValue = function (time) {
+        if (!time) {
+            return null;
+        }
+        var _a = time.split(":").map(Number), hour = _a[0], minute = _a[1];
+        return new $35ea8db9cb2ccb90$export$680ea196effce5f(hour, minute);
+    };
+    /**
+     * @function fromTimeValue
+     * @description Converts a `TimeValue` object back to a formatted time string (e.g., "09:00").
+     * @param {TimeValue | null} time - The `TimeValue` object to convert.
+     * @returns {string} The formatted time string.
+     */
+    var fromTimeValue = function (time) {
+        if (!time) {
+            return "";
+        }
+        return "".concat(String(time.hour).padStart(2, "0"), ":").concat(String(time.minute).padStart(2, "0"));
+    };
+    /**
+     * @function handleToggleDay
+     * @description Toggles the `isOpen` status of the schedule for the day.
+     */
+    var handleToggleDay = function () {
+        onChange(__assign(__assign({}, daySchedule), { isOpen: !daySchedule.isOpen }));
+    };
+    /**
+     * @function handleTimeChange
+     * @description Updates the time for a specific time slot.
+     * @param {number} index - The index of the time slot to modify.
+     * @param {"from" | "to"} field - The field to update ("from" or "to").
+     * @param {TimeValue | null} value - The new time value from the `TimeInput` component.
+     */
+    var handleTimeChange = function (index, field, value) {
+        var _a;
+        var newTimeSlots = __spreadArray([], daySchedule.timeSlots, true);
+        newTimeSlots[index] = __assign(__assign({}, newTimeSlots[index]), (_a = {}, _a[field] = fromTimeValue(value), _a));
+        var validatedSlots = validateTimeSlots(newTimeSlots);
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
+    };
+    /**
+     * @function handleAddTimeSlot
+     * @description Adds a new, empty time slot to the schedule.
+     */
+    var handleAddTimeSlot = function () {
+        var newTimeSlots = __spreadArray(__spreadArray([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
+    };
+    /**
+     * @function handleRemoveTimeSlot
+     * @description Removes a time slot from the schedule at the specified index.
+     * @param {number} index - The index of the time slot to remove.
+     */
+    var handleRemoveTimeSlot = function (index) {
+        var newTimeSlots = daySchedule.timeSlots.filter(function (_, i) { return i !== index; });
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
+    };
+    return (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: [jsxs("div", { className: "flex  w-full items-center justify-between", children: [jsxs("div", { className: "flex xs:space-x-2 sm:space-x-4", children: [jsx("h3", { className: "text-small font-semibold text-default-900 capitalize", children: day }), jsx(Chip, { size: "sm", color: daySchedule.isOpen ? "primary" : "default", className: "text-background", children: daySchedule.isOpen ? translations.open : translations.closed })] }), jsxs("div", { className: "flex xs:gap-2 sm:gap-5", children: [jsx(Switch, { size: "sm", color: "primary", isSelected: daySchedule.isOpen, onValueChange: handleToggleDay }), jsx(Button, { size: "sm", variant: "bordered", onPress: function () { return onCopyToAll(day); }, children: translations.copyToAll })] })] }), daySchedule.isOpen && (jsxs("div", { className: "flex  flex-col justify-around gap-y-3 ", children: [daySchedule.timeSlots.map(function (slot, index) { return (jsxs("div", { className: "flex items-center gap-1 w-full justify-between", children: [jsxs("div", { className: "flex items-center justify-between gap-1", children: [jsx(TimeInput, { label: translations.from, className: "w-full", value: toTimeValue(slot.from), onChange: function (value) { return handleTimeChange(index, "from", value); }, isInvalid: !!slot.error }), jsx("span", { className: "text-default-900 xs:hidden xl:block", children: "-" }), jsx(TimeInput, { label: translations.to, className: "w-full", value: toTimeValue(slot.to), onChange: function (value) { return handleTimeChange(index, "to", value); }, isInvalid: !!slot.error, errorMessage: slot.error })] }), jsx(Button, { isIconOnly: true, size: "sm", color: "danger", variant: "light", onPress: function () { return handleRemoveTimeSlot(index); }, isDisabled: daySchedule.timeSlots.length === 1, startContent: jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline" }) })] }, "".concat(day, "-timeslot-").concat(slot.from, "-").concat(slot.to, "-").concat(index))); }), daySchedule.timeSlots.length < 2 && (jsx(Button, { size: "sm", variant: "flat", onPress: function () { return handleAddTimeSlot(); }, startContent: jsx(IconComponent, { icon: "solar:add-circle-outline" }), children: translations.addTimeSlot }))] }))] }, day));
+};
+
+/**
+ * Select genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Bordered (por defecto)
+ * - Radius: md (por defecto)
+ * - labelPlacement: Outside
+ * - Size: sm, md, lg (configurable)
+ */
+var Select = function (_a) {
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
+    var generatedId = useId();
+    var selectId = id || generatedId;
+    return (jsx("div", { className: "group", children: jsx(Select$1, __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",
+            } })) }));
+};
+
+function AuraTable(_a) {
+    var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
+    return (jsxs(Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsx(TableHeader, { columns: columns, children: function (column) { return jsx(TableColumn, { children: column.label }, column.key); } }), jsx(TableBody, { items: items, children: function (item) { return (jsx(TableRow, { children: function (columnKey) { return (jsx(TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
+}
+
+/**
+ * Textarea component that wraps the HeroUI TextArea component.
+ */
+var Textarea = function (_a) {
+    var id = _a.id, label = _a.label, placeholder = _a.placeholder, description = _a.description, errorMessage = _a.errorMessage, _b = _a.variant, variant = _b === void 0 ? "bordered" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d; _a.labelPlacement; var props = __rest(_a, ["id", "label", "placeholder", "description", "errorMessage", "variant", "radius", "size", "labelPlacement"]);
+    var generatedId = useId();
+    var autoId = id || generatedId;
+    return (jsx(Textarea$1, __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",
+        } })));
+};
+
+// Traducciones por defecto en español según las reglas de diseño
+var defaultTranslations$1 = {
+    lightTheme: "Claro",
+    darkTheme: "Oscuro",
+};
+/**
+ * Selector de tema visual con preview interactivo siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Soporte completo de traducciones mediante props
+ * - Sin dependencias de sistemas i18n específicos
+ * - Dark mode compatible
+ * - Uso exclusivo de Tailwind CSS
+ */
+var ThemePicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange, className = _a.className, _b = _a.translations, translations = _b === void 0 ? {} : _b;
+    // Combinar traducciones por defecto con las proporcionadas
+    var t = __assign(__assign({}, defaultTranslations$1), translations);
+    var themes = [
+        {
+            key: "light",
+            label: t.lightTheme,
+            cardClass: "bg-white border border-[#E4E4E7] text-zinc-900",
+            previewClass: "bg-[#F4F4F5] border border-[#E4E4E7]",
+            labelClass: "font-medium text-[14px] leading-[20px] text-zinc-900",
+            radioColor: "primary",
+            previewContent: (jsxs("div", { className: "rounded-lg border border-[#E4E4E7] p-3 mt-4 flex flex-col gap-2", children: [jsx("div", { className: "h-3 w-1/2 bg-[#E4E4E7] rounded mb-2" }), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsx("div", { className: "h-3 w-1/3 rounded bg-[#E4E4E7]" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsx("div", { className: "h-3 w-1/4 rounded bg-[#E4E4E7]" })] })] }), jsx("div", { className: "h-8 w-2/3 bg-[#F4F4F5] rounded-lg mt-2" })] })),
         },
-    },
-    "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",
+        {
+            key: "dark",
+            label: t.darkTheme,
+            cardClass: "bg-black border border-[#3F3F46] text-white",
+            previewClass: "bg-[#27272A] border border-[#3F3F46]",
+            labelClass: "font-medium text-[14px] leading-[20px] text-white",
+            radioColor: "primary",
+            previewContent: (jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
         },
-    },
+    ];
+    return (jsx(RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
+            wrapper: "gap-3",
+        }, children: themes.map(function (theme) { return (jsxs("div", { className: "relative rounded-2xl ".concat(theme.cardClass, " p-4 flex-1 transition-all duration-200 flex flex-col justify-start"), children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: theme.labelClass, children: theme.label }), jsx(Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key })] }), theme.previewContent] }, theme.key)); }) }));
+};
+
+var ToastContext = createContext(undefined);
+var useAuraToast = function () {
+    var context = useContext(ToastContext);
+    if (!context) {
+        throw new Error("useAuraToast must be used within a AuraToastProvider");
+    }
+    return context;
+};
+
+function GlobalToast() {
+    var _a = useAuraToast(), toast = _a.toast, hideToast = _a.hideToast;
+    if (!toast.isVisible) {
+        return null;
+    }
+    return (jsx("div", { className: "fixed top-4 right-4 z-50 w-full max-w-sm", children: jsx(Alert, { hideIconWrapper: true, color: toast.color, variant: "flat", title: toast.title, description: toast.description, isClosable: true, onClose: hideToast }) }));
+}
+
+// Traducciones por defecto en español
+var defaultTranslations = {
+    uploadText: "Da clic y selecciona tus archivos",
+    subText: "",
+    dragText: "Suelta el archivo aquí",
+    multipleFilesError: "Solo puedes subir un archivo",
+    maxFilesError: "Puedes subir máximo {maxFiles} archivos",
+    invalidFileTypeError: "Solo se aceptan archivos de tipo: {acceptedTypes}",
+    maxFileSizeError: "El archivo excede el tamaño máximo permitido de {maxSize}",
+    removeFileAriaLabel: "Remover archivo",
+    uploadAreaAriaLabel: "Área de carga de archivos",
+    cropModalTitle: "Recortar imagen",
+    cropSaveButton: "Guardar",
+    cropCancelButton: "Cancelar",
+    cropZoomLabel: "Zoom",
+    cropInstructions: "Arrastra para mover la imagen y usa el zoom para ajustar el tamaño",
+    cropBackgroundLabel: "Color de fondo",
+    cropBackgroundWhite: "Blanco",
+    cropBackgroundBlack: "Negro",
+    cropBackgroundTransparent: "Transparente",
+};
+/**
+ * Formatea el tipo de archivo para mostrar
+ */
+var formatFileType = function (type) {
+    var _a;
+    if (type.startsWith(".")) {
+        return type.toUpperCase();
+    }
+    if (type.includes("/")) {
+        var parts = type.split("/");
+        return ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || type;
+    }
+    return type.toUpperCase();
+};
+/**
+ * Formatea el tamaño del archivo de forma legible
+ */
+var formatFileSize = function (bytes) {
+    if (bytes === 0) {
+        return "0 Bytes";
+    }
+    var k = 1024;
+    var sizes = ["Bytes", "KB", "MB", "GB"];
+    var i = Math.floor(Math.log(bytes) / Math.log(k));
+    return "".concat(Math.round(bytes / Math.pow(k, i)), " ").concat(sizes[i]);
+};
+/**
+ * Componente de recorte de imagen usando Canvas API
+ */
+var ImageCropModal = function (_a) {
+    var isOpen = _a.isOpen, imageUrl = _a.imageUrl, targetWidth = _a.targetWidth, targetHeight = _a.targetHeight, onSave = _a.onSave, onCancel = _a.onCancel, translations = _a.translations;
+    var canvasRef = useRef(null);
+    var _b = useState(null), imageElement = _b[0], setImageElement = _b[1];
+    var _c = useState(0), zoomValue = _c[0], setZoomValue = _c[1]; // Valor del slider de -1 a 1
+    var _d = useState({ x: 0, y: 0 }), position = _d[0], setPosition = _d[1];
+    var _e = useState(false), isDragging = _e[0], setIsDragging = _e[1];
+    var _f = useState({ x: 0, y: 0 }), dragStart = _f[0], setDragStart = _f[1];
+    var _g = useState(1), baseScale = _g[0], setBaseScale = _g[1]; // Escala base inicial
+    var _h = useState({ width: 400, height: 300 }), canvasSize = _h[0], setCanvasSize = _h[1];
+    var _j = useState("white"), backgroundColor = _j[0], setBackgroundColor = _j[1];
+    // Función para convertir el valor del zoom slider a escala real
+    var getScaleFromZoom = function (zoomValue) {
+        if (zoomValue === 0) {
+            return baseScale;
+        }
+        if (zoomValue > 0) {
+            // Zoom in: de baseScale a baseScale * 3
+            return baseScale + baseScale * 2 * zoomValue;
+        }
+        // Zoom out: de baseScale * 0.3 a baseScale
+        return baseScale + baseScale * 0.7 * zoomValue;
+    };
+    var currentScale = getScaleFromZoom(zoomValue);
+    // Cargar imagen cuando se abre el modal
+    useEffect(function () {
+        if (isOpen && imageUrl) {
+            var img_1 = new Image();
+            img_1.onload = function () {
+                setImageElement(img_1);
+                // Calcular escala inicial para que la imagen quepa en el área de crop
+                var scaleX = targetWidth / img_1.width;
+                var scaleY = targetHeight / img_1.height;
+                var initialScale = Math.max(scaleX, scaleY);
+                setBaseScale(initialScale);
+                setZoomValue(0); // Empezar en el centro
+                setPosition({ x: 0, y: 0 });
+                setBackgroundColor("white"); // Reset color de fondo
+            };
+            img_1.src = imageUrl;
+        }
+    }, [isOpen, imageUrl, targetWidth, targetHeight]);
+    // Dibujar en el canvas
+    useEffect(function () {
+        if (!(imageElement && canvasRef.current)) {
+            return;
+        }
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext("2d");
+        if (!ctx) {
+            return;
+        }
+        // Limpiar canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Dibujar fondo gris del canvas
+        ctx.fillStyle = "#f3f4f6";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Calcular posición y tamaño de la imagen
+        var imgWidth = imageElement.width * currentScale;
+        var imgHeight = imageElement.height * currentScale;
+        var imgX = (canvas.width - imgWidth) / 2 + position.x;
+        var imgY = (canvas.height - imgHeight) / 2 + position.y;
+        // Dibujar imagen
+        ctx.drawImage(imageElement, imgX, imgY, imgWidth, imgHeight);
+        // Dibujar overlay para mostrar área de recorte
+        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Limpiar área de recorte (centro)
+        var cropX = (canvas.width - targetWidth) / 2;
+        var cropY = (canvas.height - targetHeight) / 2;
+        ctx.clearRect(cropX, cropY, targetWidth, targetHeight);
+        // Dibujar color de fondo del área de recorte
+        if (backgroundColor !== "transparent") {
+            ctx.fillStyle = backgroundColor === "white" ? "#ffffff" : "#000000";
+            ctx.fillRect(cropX, cropY, targetWidth, targetHeight);
+        }
+        // Redibujar imagen solo en el área de recorte
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(cropX, cropY, targetWidth, targetHeight);
+        ctx.clip();
+        ctx.drawImage(imageElement, imgX, imgY, imgWidth, imgHeight);
+        ctx.restore();
+        // Dibujar borde del área de recorte
+        ctx.strokeStyle = "#3b82f6";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(cropX, cropY, targetWidth, targetHeight);
+    }, [
+        imageElement,
+        currentScale,
+        position,
+        targetWidth,
+        targetHeight,
+        backgroundColor,
+    ]);
+    var handleMouseDown = function (e) {
+        var _a;
+        e.preventDefault();
+        setIsDragging(true);
+        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            setDragStart({
+                x: e.clientX - rect.left - position.x,
+                y: e.clientY - rect.top - position.y,
+            });
+        }
+    };
+    var handleMouseMove = function (e) {
+        var _a;
+        if (!isDragging) {
+            return;
+        }
+        e.preventDefault();
+        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            setPosition({
+                x: e.clientX - rect.left - dragStart.x,
+                y: e.clientY - rect.top - dragStart.y,
+            });
+        }
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    // Eventos táctiles para dispositivos móviles
+    var handleTouchStart = function (e) {
+        var _a;
+        e.preventDefault();
+        if (e.touches.length === 1) {
+            setIsDragging(true);
+            var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (rect) {
+                var touch = e.touches[0];
+                setDragStart({
+                    x: touch.clientX - rect.left - position.x,
+                    y: touch.clientY - rect.top - position.y,
+                });
+            }
+        }
+    };
+    var handleTouchMove = function (e) {
+        var _a;
+        if (!isDragging || e.touches.length !== 1) {
+            return;
+        }
+        e.preventDefault();
+        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            var touch = e.touches[0];
+            setPosition({
+                x: touch.clientX - rect.left - dragStart.x,
+                y: touch.clientY - rect.top - dragStart.y,
+            });
+        }
+    };
+    var handleTouchEnd = function () {
+        setIsDragging(false);
+    };
+    var handleSave = function () {
+        if (!(imageElement && canvasRef.current)) {
+            return;
+        }
+        // Crear canvas temporal para el recorte
+        var tempCanvas = document.createElement("canvas");
+        tempCanvas.width = targetWidth;
+        tempCanvas.height = targetHeight;
+        var tempCtx = tempCanvas.getContext("2d");
+        if (!tempCtx) {
+            return;
+        }
+        // Dibujar color de fondo si no es transparente
+        if (backgroundColor !== "transparent") {
+            tempCtx.fillStyle = backgroundColor === "white" ? "#ffffff" : "#000000";
+            tempCtx.fillRect(0, 0, targetWidth, targetHeight);
+        }
+        // Calcular parámetros de recorte
+        var canvas = canvasRef.current;
+        var imgWidth = imageElement.width * currentScale;
+        var imgHeight = imageElement.height * currentScale;
+        var imgX = (canvas.width - imgWidth) / 2 + position.x;
+        var imgY = (canvas.height - imgHeight) / 2 + position.y;
+        var cropX = (canvas.width - targetWidth) / 2;
+        var cropY = (canvas.height - targetHeight) / 2;
+        // Calcular área fuente en la imagen original
+        var sourceX = (cropX - imgX) / currentScale;
+        var sourceY = (cropY - imgY) / currentScale;
+        var sourceWidth = targetWidth / currentScale;
+        var sourceHeight = targetHeight / currentScale;
+        // Dibujar recorte sobre el fondo
+        tempCtx.drawImage(imageElement, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
+        // Convertir a blob y crear archivo
+        var fileType = backgroundColor === "transparent" ? "image/png" : "image/png";
+        tempCanvas.toBlob(function (blob) {
+            if (blob) {
+                var timestamp = new Date().getTime();
+                var file = new File([blob], "cropped-image-".concat(timestamp, ".png"), {
+                    type: fileType,
+                });
+                onSave(file, imageElement.src);
+            }
+        }, fileType);
+    };
+    // Calcular dimensiones responsive del canvas
+    var updateCanvasSize = useCallback(function () {
+        var minCanvasWidth = Math.min(350, window.innerWidth - 40);
+        var minCanvasHeight = Math.min(250, window.innerHeight - 300);
+        var newCanvasWidth = Math.max(minCanvasWidth, targetWidth + 60);
+        var newCanvasHeight = Math.max(minCanvasHeight, targetHeight + 60);
+        setCanvasSize({ width: newCanvasWidth, height: newCanvasHeight });
+    }, [targetWidth, targetHeight]);
+    // Actualizar tamaño del canvas al cambiar el tamaño de la ventana
+    useEffect(function () {
+        if (!isOpen) {
+            return;
+        }
+        updateCanvasSize();
+        var handleResize = function () {
+            updateCanvasSize();
+        };
+        window.addEventListener("resize", handleResize);
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [isOpen, updateCanvasSize]);
+    return (jsx(Modal$1, { isOpen: isOpen, onClose: onCancel, size: "5xl", className: "sm:max-w-4xl", scrollBehavior: "inside", backdrop: "blur", classNames: {
+            backdrop: "bg-black/80",
+            wrapper: "p-0 sm:p-4",
+            base: "m-0 sm:m-4 max-h-screen sm:max-h-[90vh] w-full sm:w-auto",
+        }, children: jsxs(ModalContent$1, { className: "m-0 sm:m-0 h-screen sm:h-auto sm:max-h-[90vh] sm:rounded-lg", children: [jsxs(ModalHeader$1, { className: "flex flex-col gap-1 px-4 sm:px-6", children: [translations.cropModalTitle, jsx("p", { className: "text-xs sm:text-sm text-gray-500 font-normal", children: translations.cropInstructions })] }), jsx(ModalBody$1, { className: "px-4 sm:px-6 py-4", children: jsxs("div", { className: "flex flex-col gap-4", children: [jsx("div", { className: "flex justify-center overflow-hidden", children: jsx("canvas", { ref: canvasRef, width: canvasSize.width, height: canvasSize.height, className: "border border-gray-300 cursor-move select-none max-w-full max-h-[50vh] sm:max-h-[60vh]", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { touchAction: "none" } }) }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("label", { htmlFor: "zoom-slider", className: "text-sm font-medium", children: translations.cropZoomLabel }), jsxs("div", { className: "flex items-center gap-2 sm:gap-3 w-full", children: [jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "-" }), jsx(Slider, { id: "zoom-slider", size: "sm", step: 0.1, minValue: -1, maxValue: 1, value: zoomValue, onChange: function (value) { return setZoomValue(value); }, className: "flex-1", marks: [
+                                                    { value: -1, label: "Out" },
+                                                    { value: 0, label: "0" },
+                                                    { value: 1, label: "In" },
+                                                ] }), jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "+" })] })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("div", { className: "text-sm font-medium", children: translations.cropBackgroundLabel }), jsxs("div", { className: "flex flex-wrap gap-3 sm:gap-4", children: [jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "white", checked: backgroundColor === "white", onChange: function (e) {
+                                                            return setBackgroundColor(e.target.value);
+                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-white border border-gray-300 rounded" }), jsx("span", { className: "text-sm", children: translations.cropBackgroundWhite })] }), jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "black", checked: backgroundColor === "black", onChange: function (e) {
+                                                            return setBackgroundColor(e.target.value);
+                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-black border border-gray-300 rounded" }), jsx("span", { className: "text-sm", children: translations.cropBackgroundBlack })] }), jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "transparent", checked: backgroundColor === "transparent", onChange: function (e) {
+                                                            return setBackgroundColor(e.target.value);
+                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-gray-200 border border-gray-300 rounded", style: {
+                                                            backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+                                                            backgroundSize: "8px 8px",
+                                                            backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
+                                                        } }), jsx("span", { className: "text-sm", children: translations.cropBackgroundTransparent })] })] })] })] }) }), jsxs(ModalFooter$1, { className: "flex flex-col-reverse sm:flex-row gap-2 px-4 sm:px-6", children: [jsx(Button$1, { color: "danger", variant: "light", onPress: onCancel, className: "w-full sm:w-auto", children: translations.cropCancelButton }), jsx(Button$1, { color: "primary", onPress: handleSave, className: "w-full sm:w-auto", children: translations.cropSaveButton })] })] }) }));
 };
-
-var ColorSelector = function (_a) {
-    var selectedColor = _a.selectedColor, onColorChange = _a.onColorChange;
-    var mode = useThemeContext().mode;
-    /**
-     * Filters and maps the available theme colors to the current theme mode (light/dark).
-     * Each color option contains:
-     * - value: the theme name (e.g., "blue-light")
-     * - label: the base color name (e.g., "blue")
-     * - color: the primary color hex value
-     */
-    var colorOptions = Object.entries(themeColors)
-        .filter(function (_a) {
-        var themeData = _a[1];
-        var themeMode = themeData.extend;
-        return mode === "light" ? themeMode === "light" : themeMode === "dark";
-    })
-        .map(function (_a) {
-        var themeName = _a[0], theme = _a[1];
-        return ({
-            value: themeName,
-            label: themeName.split("-")[0],
-            color: theme.colors.primary.DEFAULT,
+/**
+ * Componente de previsualización de archivo
+ */
+var FilePreview = function (_a) {
+    var file = _a.file, onRemove = _a.onRemove, removeAriaLabel = _a.removeAriaLabel;
+    var _b = useState(""), previewUrl = _b[0], setPreviewUrl = _b[1];
+    useEffect(function () {
+        if (file === null || file === void 0 ? void 0 : file.type.startsWith("image/")) {
+            var url_1 = URL.createObjectURL(file);
+            setPreviewUrl(url_1);
+            return function () { return URL.revokeObjectURL(url_1); };
+        }
+    }, [file]);
+    if (!(file === null || file === void 0 ? void 0 : file.type.startsWith("image/"))) {
+        return null;
+    }
+    return (jsxs("div", { className: "absolute inset-0  overflow-hidden z-10", children: [jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsx(Button$1, { 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: jsx(IconComponent, { icon: "heroicons:trash", size: "sm" }) })] }));
+};
+/**
+ * Componente UploadDocument basado en Hero UI con funcionalidad mejorada
+ *
+ * @example
+ * ```tsx
+ * <UploadDocument
+ *   onUpload={(files) => console.log(files)}
+ *   acceptedFiles="image/*,.pdf"
+ *   multiple={false}
+ *   translations={{
+ *     uploadText: "Upload your files",
+ *     dragText: "Drop files here"
+ *   }}
+ * />
+ * ```
+ */
+var UploadFile = function (_a) {
+    var text = _a.text, textColor = _a.textColor, subText = _a.subText, 
+    // borderColor, // TODO: Implementar colores personalizados
+    iconColor = _a.iconColor, 
+    // backgroundColor, // TODO: Implementar colores personalizados
+    _b = _a.width, 
+    // backgroundColor, // TODO: Implementar colores personalizados
+    width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "auto" : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxFiles, maxFiles = _e === void 0 ? 1 : _e, maxFileSize = _a.maxFileSize, _f = _a.acceptedFiles, acceptedFiles = _f === void 0 ? ".pdf" : _f, _g = _a.icon, icon = _g === void 0 ? "heroicons:arrow-up-on-square" : _g, onUpload = _a.onUpload, onError = _a.onError, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.success, success = _j === void 0 ? false : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, errorText = _a.errorText, cropConfig = _a.cropConfig, image = _a.image, _l = _a.className, className = _l === void 0 ? "" : _l, _m = _a.translations, translations = _m === void 0 ? {} : _m;
+    var inputRef = useRef(null);
+    var uploadImageRef = useRef(image || null);
+    var _o = useState(false), isDragging = _o[0], setIsDragging = _o[1];
+    // Estados para el modal de crop
+    var _p = useState(false), showCropModal = _p[0], setShowCropModal = _p[1];
+    var _q = useState(""), selectedImageUrl = _q[0], setSelectedImageUrl = _q[1];
+    var _r = useState(null); _r[0]; var setOriginalFile = _r[1];
+    // Combinar traducciones por defecto con las proporcionadas
+    var t = useMemo(function () { return (__assign(__assign({}, defaultTranslations), translations)); }, [translations]);
+    // Actualizar texto si se pasa como prop (retrocompatibilidad)
+    var finalText = text || t.uploadText;
+    var finalSubText = subText || t.subText;
+    var handleClick = function () {
+        var _a;
+        if (!(disabled || uploadImageRef.current)) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    var validateFiles = useCallback(function (files) {
+        var filesArray = Array.from(files);
+        if (!multiple && filesArray.length > 1) {
+            onError === null || onError === void 0 ? void 0 : onError(t.multipleFilesError);
+            return [];
+        }
+        if (filesArray.length > maxFiles) {
+            onError === null || onError === void 0 ? void 0 : onError(t.maxFilesError.replace("{maxFiles}", maxFiles.toString()));
+            return [];
+        }
+        // Validar tamaño de archivo
+        if (maxFileSize) {
+            var oversizedFiles = filesArray.filter(function (file) { return file.size > maxFileSize; });
+            if (oversizedFiles.length > 0) {
+                var maxSizeFormatted = formatFileSize(maxFileSize);
+                onError === null || onError === void 0 ? void 0 : onError(t.maxFileSizeError.replace("{maxSize}", maxSizeFormatted));
+                return [];
+            }
+        }
+        // Validar tipos de archivo
+        var acceptedExtensions = Array.isArray(acceptedFiles)
+            ? acceptedFiles.map(function (ext) { return ext.trim().toLowerCase(); })
+            : acceptedFiles.split(",").map(function (ext) { return ext.trim().toLowerCase(); });
+        var validFiles = filesArray.filter(function (file) {
+            var _a;
+            if (acceptedFiles.includes("image/*") &&
+                file.type.startsWith("image/")) {
+                return true;
+            }
+            if (acceptedExtensions.some(function (ext) { return ext.includes("/"); })) {
+                return acceptedExtensions.some(function (type) { return file.type === type; });
+            }
+            var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            return acceptedExtensions.some(function (ext) { return ext === fileExtension || ext === "*"; });
         });
-    });
-    return (jsx(RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
-            base: "flex flex-wrap !gap-2",
-            wrapper: "flex flex-wrap !gap-2",
-        }, children: colorOptions.map(function (color) { return (jsx(Radio, { value: color.label, className: "p-0 m-0", classNames: {
-                base: "p-0 m-0",
-                wrapper: "hidden",
-                labelWrapper: "p-0 m-0",
-            }, children: jsx("div", { className: "w-8 h-8 rounded-full border-2 cursor-pointer transition-all ".concat(selectedColor === color.label
-                    ? "border-black border-opacity-20 scale-110"
-                    : "border-gray-200 hover:scale-105"), style: { backgroundColor: color.color }, title: color.label }) }, color.value)); }) }));
+        if (validFiles.length === 0) {
+            var formattedTypes = acceptedExtensions
+                .map(formatFileType)
+                .join(", ");
+            onError === null || onError === void 0 ? void 0 : onError(t.invalidFileTypeError.replace("{acceptedTypes}", formattedTypes));
+            return [];
+        }
+        return validFiles;
+    }, [multiple, maxFiles, maxFileSize, acceptedFiles, t, onError]);
+    var handleFileUpload = useCallback(function (files) {
+        var validFiles = validateFiles(files);
+        if (validFiles.length > 0) {
+            var file_1 = validFiles[0];
+            // Si es imagen y hay configuración de crop, abrir modal
+            if (file_1.type.startsWith("image/") && cropConfig) {
+                var reader_1 = new FileReader();
+                reader_1.onload = function () {
+                    setSelectedImageUrl(reader_1.result);
+                    setOriginalFile(file_1);
+                    setShowCropModal(true);
+                };
+                reader_1.readAsDataURL(file_1);
+            }
+            else {
+                // Procesar directamente si no necesita crop
+                uploadImageRef.current = file_1;
+                onUpload(validFiles);
+            }
+        }
+    }, [onUpload, validateFiles, cropConfig]);
+    // Manejar guardado de imagen recortada
+    var handleCropSave = useCallback(function (croppedFile) {
+        uploadImageRef.current = croppedFile;
+        setShowCropModal(false);
+        setSelectedImageUrl("");
+        setOriginalFile(null);
+        onUpload([croppedFile]);
+    }, [onUpload]);
+    // Manejar cancelación de crop
+    var handleCropCancel = useCallback(function () {
+        setShowCropModal(false);
+        setSelectedImageUrl("");
+        setOriginalFile(null);
+    }, []);
+    var handleChange = function (event) {
+        var files = event.target.files;
+        if (files && files.length > 0) {
+            handleFileUpload(files);
+        }
+        // Limpiar el input
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+    };
+    var handleDragEnter = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled) {
+            setIsDragging(true);
+        }
+    }, [disabled]);
+    var handleDragLeave = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    }, []);
+    var handleDragOver = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    var handleDrop = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (disabled) {
+            return;
+        }
+        var droppedFiles = e.dataTransfer.files;
+        if (droppedFiles.length > 0) {
+            handleFileUpload(droppedFiles);
+        }
+    }, [disabled, handleFileUpload]);
+    var handleRemoveImage = function () {
+        uploadImageRef.current = null;
+        onUpload([]);
+    };
+    // Clases CSS dinámicas usando Tailwind
+    var containerClasses = "\n\t\trelative w-full border-2 border-dashed rounded-2xl p-3 transition-all duration-300 bg-red-500\n\t\t".concat(width !== "100%" ? "w-[".concat(width, "]") : "w-full", "\n\t\t").concat(height !== "auto" ? "h-[".concat(height, "]") : "min-h-28", "\n\t\t").concat(isDragging
+        ? "border-primary-500 bg-primary-50 dark:bg-primary-900"
+        : error
+            ? "border-danger-500 bg-danger-50 dark:bg-danger-950"
+            : success
+                ? "border-success-500 bg-success-50 dark:bg-success-950"
+                : disabled
+                    ? "border-gray-300 bg-gray-100 dark:bg-gray-800"
+                    : "border-gray-300 hover:border-gray-400 bg-primary-50 dark:bg-gray-900", "\n\t\t").concat(!(disabled || uploadImageRef.current) ? "cursor-pointer" : "cursor-default", "\n\t\t").concat(className, "\n\t")
+        .trim()
+        .replace(/\s+/g, " ");
+    var textClasses = "\n\t\ttext-centertext-base ont-medium\n\t\t".concat(disabled ? "text-default-400" : textColor || "text-default-700 dark:text-default-200", "\n\t");
+    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 (jsxs("div", { className: "relative", children: [jsx(Card$1, { className: containerClasses, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxs(CardBody, { className: "flex flex-col items-center justify-center gap-3 sm:gap-4 relative overflow-hidden", onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [uploadImageRef.current && (jsx(FilePreview, { file: uploadImageRef.current, onRemove: handleRemoveImage, removeAriaLabel: t.removeFileAriaLabel })), jsx("div", { className: uploadImageRef.current
+                                ? "opacity-0"
+                                : "opacity-100 transition-opacity", children: jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4", children: [jsx(IconComponent, { icon: icon, size: "xl", className: "sm:text-4xl lg:text-5xl ".concat(disabled ? "text-gray-400" : iconColor || "text-primary") }), jsxs("div", { className: "text-center px-2", children: [jsx("p", { className: textClasses, children: isDragging ? t.dragText : finalText }), finalSubText && !isDragging && (jsx("p", { className: subTextClasses, children: finalSubText }))] })] }) }), jsx("input", { ref: inputRef, type: "file", className: "hidden", multiple: multiple, accept: Array.isArray(acceptedFiles)
+                                ? acceptedFiles.join(",")
+                                : acceptedFiles, onChange: handleChange, disabled: disabled, "aria-label": t.uploadAreaAriaLabel })] }) }), error && errorText && (jsx("p", { className: "text-red-500 text-sm mt-2", role: "alert", children: errorText })), showCropModal && selectedImageUrl && cropConfig && (jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: selectedImageUrl, targetWidth: cropConfig.targetWidth, targetHeight: cropConfig.targetHeight, onSave: handleCropSave, onCancel: handleCropCancel, translations: t }))] }));
 };
+UploadFile.displayName = "UploadFile";
 
 var Modal = function (props) {
     return (jsx(Modal$1, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
@@ -2153,4 +2782,4 @@ var AuraToastProvider = function (_a) {
     return (jsx(ToastContext.Provider, { value: { toast: toast, showToast: showToast, hideToast: hideToast }, children: children }));
 };
 
-export { AddHolidayForm, AuraTable, AuraToastProvider, AutoComplete, Button, Card, ColorSelector, DatePicker, DateRangePicker, GlobalToast, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, P, Pagination, Phone, ScheduleRow, Select, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, sizeMap, themeColors, useAuraToast, useThemeContext };
+export { AddHolidayForm, AnalyticsCard, AuraTable, AuraToastProvider, AutoComplete, Button, Card, ColorSelector, DatePicker, DateRangePicker, DateSelector, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, P, Pagination, Phone, PromotionalBanner, RowSteps, ScheduleRow, Select, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, sizeMap, themeColors, useAuraToast, useThemeContext };