@beweco/aurora-ui 0.1.31 → 0.1.39

package/dist/index.cjs.js

@@ -762,16 +762,15 @@ var ColorPicker = function (_a) {
     /**
      * Render a color circle button
      */
-    var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsxRuntime.jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-10 h-10 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
-            ? "border-primary dark:border-primary-400 scale-110 ring-2 ring-primary ring-offset-2"
-            : "border-default-200 dark:border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("input", { type: "color", id: inputId, name: name, value: textValue, onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-14 h-14 rounded-lg cursor-pointer border-2\n\t\t\t\t\t\t\ttransition-all\n\t\t\t\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-105", "\n\t\t\t\t\t\t\t").concat(error
-                                ? "border-danger dark:border-danger-400"
-                                : "border-default-200 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }) }), jsxRuntime.jsx("div", { className: "flex-1", children: jsxRuntime.jsx(react.Input, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, errorMessage: isInvalidFormat
-                                ? t.invalidColorFormat
-                                : errorText, variant: "bordered", classNames: {
-                                input: "uppercase font-mono",
-                            }, startContent: jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" }) }) })] }), showPredefinedColors && predefinedColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
+    var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsxRuntime.jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
+            ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
+            : "border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "color", id: inputId, name: name, value: textValue, onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
+                                    ? "border-danger dark:border-danger-400"
+                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsxRuntime.jsx(react.Input, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
+                                    input: "uppercase font-mono text-small",
+                                    inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
+                                }, startContent: jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" }) })] }), (error || isInvalidFormat) && (jsxRuntime.jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
                             return renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value));
                         }) })] })), enableRecentColors && recentColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map(function (color) {
                             return renderColorCircle(color, color, normalizeHexColor(value) === color);
@@ -1700,6 +1699,189 @@ var HeaderComponent = function (_a) {
 };
 HeaderComponent.displayName = "Header";
 
+/**
+ * KanbanCard - Contenedor de tarjeta genérico del Kanban con soporte drag and drop
+ *
+ * El contenido es 100% definido por el padre mediante renderContent.
+ * Este componente solo provee el contenedor con estilos, eventos y drag.
+ */
+var KanbanCardComponent = function (_a) {
+    var item = _a.item, columnId = _a.columnId, index = _a.index, renderContent = _a.renderContent, onCardClick = _a.onCardClick, className = _a.className, _b = _a.isClickable, isClickable = _b === void 0 ? true : _b, _c = _a.isDraggable, isDraggable = _c === void 0 ? false : _c, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd;
+    var _d = React.useState(false), isDragging = _d[0], setIsDragging = _d[1];
+    var handleClick = React.useCallback(function () {
+        if (!isDragging) {
+            onCardClick === null || onCardClick === void 0 ? void 0 : onCardClick(item);
+        }
+    }, [item, onCardClick, isDragging]);
+    var handleKeyDown = React.useCallback(function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onCardClick === null || onCardClick === void 0 ? void 0 : onCardClick(item);
+        }
+    }, [item, onCardClick]);
+    var handleDragStart = React.useCallback(function (e) {
+        if (!isDraggable)
+            return;
+        setIsDragging(true);
+        // Datos para el drop
+        e.dataTransfer.setData("application/json", JSON.stringify({ itemId: item.id, fromColumnId: columnId, fromIndex: index }));
+        e.dataTransfer.effectAllowed = "move";
+        // Notificar al padre
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(item, columnId, index);
+    }, [item, columnId, index, isDraggable, onDragStart]);
+    var handleDragEnd = React.useCallback(function () {
+        setIsDragging(false);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+    }, [onDragEnd]);
+    var isInteractive = isClickable && onCardClick;
+    return (jsxRuntime.jsx("div", { className: react.cn("bg-content1 border border-default-200 rounded-lg p-4 transition-all", isInteractive && "cursor-pointer hover:border-default-400", isDraggable && "cursor-grab active:cursor-grabbing", isDragging && "opacity-50 scale-95 shadow-lg", className), onClick: isInteractive ? handleClick : undefined, onKeyDown: isInteractive ? handleKeyDown : undefined, role: isInteractive ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: renderContent(item) }));
+};
+var KanbanCard = React.memo(KanbanCardComponent);
+KanbanCard.displayName = "KanbanCard";
+
+/**
+ * KanbanColumn - Columna individual del Kanban con soporte de drop
+ *
+ * Muestra un header con título y badge de conteo,
+ * una lista scrolleable de tarjetas, y estado vacío.
+ * Acepta drops de tarjetas de otras columnas.
+ */
+var KanbanColumnComponent = function (_a) {
+    var _b, _c;
+    var column = _a.column, renderItem = _a.renderItem, onCardClick = _a.onCardClick, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _d = _a.maxHeight, maxHeight = _d === void 0 ? "calc(100vh - 280px)" : _d, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.isDraggable, isDraggable = _e === void 0 ? false : _e, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onDrop = _a.onDrop, _f = _a.isDragging, isDragging = _f === void 0 ? false : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
+    // Traducciones con fallbacks
+    var t = {
+        dropHere: (_b = translations.dropHere) !== null && _b !== void 0 ? _b : "Soltar aquí",
+        emptyMessage: (_c = translations.emptyMessage) !== null && _c !== void 0 ? _c : "No hay elementos",
+    };
+    var _h = React.useState(false), isDragOver = _h[0], setIsDragOver = _h[1];
+    var _j = React.useState(null), dropIndex = _j[0], setDropIndex = _j[1];
+    var itemCount = column.items.length;
+    var isEmpty = itemCount === 0;
+    var handleDragOver = React.useCallback(function (e) {
+        if (!isDraggable)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setIsDragOver(true);
+    }, [isDraggable]);
+    var handleDragLeave = React.useCallback(function (e) {
+        // Solo salir si realmente salimos de la columna (no de un hijo)
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsDragOver(false);
+            setDropIndex(null);
+        }
+    }, []);
+    var handleDrop = React.useCallback(function (e) {
+        e.preventDefault();
+        setIsDragOver(false);
+        setDropIndex(null);
+        if (!isDraggable)
+            return;
+        // Calcular índice de drop basado en posición Y
+        var finalDropIndex = dropIndex !== null && dropIndex !== void 0 ? dropIndex : column.items.length;
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(column.id, finalDropIndex);
+    }, [isDraggable, column.id, column.items.length, dropIndex, onDrop]);
+    // Calcular índice de drop basado en la posición del mouse
+    var handleDragOverItem = React.useCallback(function (e, itemIndex) {
+        e.preventDefault();
+        var rect = e.currentTarget.getBoundingClientRect();
+        var midpoint = rect.top + rect.height / 2;
+        var newDropIndex = e.clientY < midpoint ? itemIndex : itemIndex + 1;
+        setDropIndex(newDropIndex);
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: react.cn("flex flex-col bg-default-50 rounded-lg border border-default-200 transition-colors", isDragOver && isDragging && "border-primary-400 bg-primary-50/30", className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [renderColumnHeader ? (renderColumnHeader(column)) : (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-default-200", children: [jsxRuntime.jsx("h3", { className: "font-semibold text-foreground", children: column.title }), jsxRuntime.jsx(react.Badge, { content: itemCount, color: column.countBadgeColor || "default", variant: "flat", size: "md", classNames: {
+                            badge: "text-xs font-medium min-w-6 h-6",
+                        }, children: jsxRuntime.jsxs("span", { className: "sr-only", children: [itemCount, " items"] }) })] })), jsxRuntime.jsx("div", { className: react.cn("flex-1 overflow-y-auto p-3 space-y-3", isDragOver && isEmpty && "min-h-24"), style: { maxHeight: maxHeight }, children: isEmpty ? (isDragOver && isDragging ? (jsxRuntime.jsx("div", { className: "h-24 border-2 border-dashed border-primary-300 rounded-lg bg-primary-50/50 flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-primary-500 text-sm", children: t.dropHere }) })) : renderEmptyState ? (renderEmptyState(column)) : (jsxRuntime.jsx("div", { className: "flex items-center justify-center h-24 text-default-400 text-sm", children: column.emptyMessage || t.emptyMessage }))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [column.items.map(function (item, index) { return (jsxRuntime.jsxs("div", { onDragOver: function (e) { return handleDragOverItem(e, index); }, children: [isDragOver && dropIndex === index && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mb-3 animate-pulse" })), jsxRuntime.jsx(KanbanCard, { item: item, columnId: column.id, index: index, renderContent: renderItem, onCardClick: onCardClick, className: cardClassName, isClickable: isCardClickable, isDraggable: isDraggable, onDragStart: onDragStart, onDragEnd: onDragEnd })] }, item.id)); }), isDragOver && dropIndex === column.items.length && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mt-3 animate-pulse" }))] })) })] }));
+};
+var KanbanColumn = React.memo(KanbanColumnComponent);
+KanbanColumn.displayName = "KanbanColumn";
+
+/**
+ * Traducciones por defecto en español.
+ * Se mezclan con las traducciones proporcionadas por el usuario.
+ */
+var DEFAULT_TRANSLATIONS = {
+    dropHere: "Soltar aquí",
+    emptyMessage: "No hay elementos",
+};
+var columnGapClasses = {
+    sm: "gap-3",
+    md: "gap-4",
+    lg: "gap-6",
+};
+/**
+ * Kanban - Tablero Kanban genérico con columnas, tarjetas y drag and drop
+ *
+ * El contenido de cada tarjeta es 100% definido por el consumidor
+ * mediante la prop `renderItem`. Esto permite usar el Kanban para
+ * cualquier caso de uso: contactos, tareas, proyectos, etc.
+ *
+ * Soporta drag and drop entre columnas con el callback `onItemMove`.
+ *
+ * @example
+ * ```tsx
+ * // Kanban de tareas con drag and drop
+ * <Kanban<Task>
+ *   columns={columns}
+ *   renderItem={(item) => <TaskCard task={item.data} />}
+ *   onItemMove={(event) => {
+ *     console.log(`Moved ${event.item.id} from ${event.fromColumnId} to ${event.toColumnId}`);
+ *     // Actualizar estado...
+ *   }}
+ * />
+ * ```
+ */
+var KanbanComponent = function (_a) {
+    var columns = _a.columns, renderItem = _a.renderItem, onCardClick = _a.onCardClick, onItemMove = _a.onItemMove, isDraggable = _a.isDraggable, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _b = _a.columnWidth, columnWidth = _b === void 0 ? "280px" : _b, _c = _a.columnGap, columnGap = _c === void 0 ? "md" : _c, _d = _a.horizontalScroll, horizontalScroll = _d === void 0 ? true : _d, columnMaxHeight = _a.columnMaxHeight, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.translations, translations = _e === void 0 ? {} : _e;
+    // Mezclar traducciones del usuario con las por defecto
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS), translations);
+    // Determinar si drag está habilitado
+    var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
+    // Estado del drag actual
+    var _f = React.useState(false), isDragging = _f[0], setIsDragging = _f[1];
+    var dragDataRef = React.useRef(null);
+    // Cuando empieza el drag
+    var handleDragStart = React.useCallback(function (item, columnId, index) {
+        setIsDragging(true);
+        dragDataRef.current = { item: item, fromColumnId: columnId, fromIndex: index };
+    }, []);
+    // Cuando termina el drag (sin drop válido)
+    var handleDragEnd = React.useCallback(function () {
+        setIsDragging(false);
+        dragDataRef.current = null;
+    }, []);
+    // Cuando se suelta en una columna
+    var handleDrop = React.useCallback(function (toColumnId, toIndex) {
+        var dragData = dragDataRef.current;
+        if (!dragData || !onItemMove)
+            return;
+        var item = dragData.item, fromColumnId = dragData.fromColumnId, fromIndex = dragData.fromIndex;
+        // No hacer nada si se suelta en la misma posición
+        if (fromColumnId === toColumnId && fromIndex === toIndex) {
+            handleDragEnd();
+            return;
+        }
+        // Ajustar índice si se mueve dentro de la misma columna hacia abajo
+        var adjustedToIndex = toIndex;
+        if (fromColumnId === toColumnId && fromIndex < toIndex) {
+            adjustedToIndex = toIndex - 1;
+        }
+        // Notificar al padre
+        onItemMove({
+            item: item,
+            fromColumnId: fromColumnId,
+            toColumnId: toColumnId,
+            fromIndex: fromIndex,
+            toIndex: adjustedToIndex,
+        });
+        handleDragEnd();
+    }, [onItemMove, handleDragEnd]);
+    return (jsxRuntime.jsx("div", { className: react.cn("flex", columnGapClasses[columnGap], horizontalScroll && "overflow-x-auto pb-4", className), children: columns.map(function (column) { return (jsxRuntime.jsx("div", { className: "flex-shrink-0", style: { width: columnWidth }, children: jsxRuntime.jsx(KanbanColumn, { column: column, renderItem: renderItem, onCardClick: onCardClick, cardClassName: cardClassName, isCardClickable: isCardClickable, maxHeight: columnMaxHeight, renderColumnHeader: renderColumnHeader, renderEmptyState: renderEmptyState, isDraggable: dragEnabled, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrop: handleDrop, isDragging: isDragging, translations: t }) }, column.id)); }) }));
+};
+var Kanban = React.memo(KanbanComponent);
+Kanban.displayName = "Kanban";
+
 var defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
@@ -4987,6 +5169,9 @@ exports.HeaderComponent = HeaderComponent;
 exports.IconComponent = IconComponent;
 exports.ImagePreview = ImagePreview;
 exports.Input = Input;
+exports.Kanban = Kanban;
+exports.KanbanCard = KanbanCard;
+exports.KanbanColumn = KanbanColumn;
 exports.MenuComponent = MenuComponent;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;

package/dist/index.esm.js

@@ -1,10 +1,10 @@
-import { Skeleton, Button as Button$1, Chip as Chip$1, Accordion, AccordionItem, Pagination as Pagination$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, ListboxSection, Avatar, CardBody, CardFooter, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Image as Image$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, Spinner, SelectItem, Drawer, DrawerContent, DrawerBody } from '@heroui/react';
+import { Skeleton, Button as Button$1, Chip as Chip$1, Accordion, AccordionItem, Pagination as Pagination$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, Badge, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, ListboxSection, Avatar, CardBody, CardFooter, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Image as Image$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, Spinner, SelectItem, Drawer, DrawerContent, DrawerBody } from '@heroui/react';
 export * from '@heroui/react';
 export { Slider } from '@heroui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@iconify/react';
 export { loadIcons } from '@iconify/react';
-import React, { useId, useState, useCallback, useMemo, useEffect, createContext, useContext, createElement, useRef, useLayoutEffect } from 'react';
+import React, { useId, useState, useCallback, useMemo, useEffect, createContext, useContext, memo, useRef, createElement, useLayoutEffect } from 'react';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip, Area } from 'recharts';
 import { LazyMotion, domAnimation, m } from 'framer-motion';
 import { createPortal } from 'react-dom';
@@ -763,16 +763,15 @@ var ColorPicker = function (_a) {
     /**
      * Render a color circle button
      */
-    var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-10 h-10 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
-            ? "border-primary dark:border-primary-400 scale-110 ring-2 ring-primary ring-offset-2"
-            : "border-default-200 dark:border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
-    return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "relative", children: jsx("input", { type: "color", id: inputId, name: name, value: textValue, onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-14 h-14 rounded-lg cursor-pointer border-2\n\t\t\t\t\t\t\ttransition-all\n\t\t\t\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-105", "\n\t\t\t\t\t\t\t").concat(error
-                                ? "border-danger dark:border-danger-400"
-                                : "border-default-200 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }) }), jsx("div", { className: "flex-1", children: jsx(Input$1, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, errorMessage: isInvalidFormat
-                                ? t.invalidColorFormat
-                                : errorText, variant: "bordered", classNames: {
-                                input: "uppercase font-mono",
-                            }, startContent: jsx("span", { className: "text-default-400 text-sm", children: "#" }) }) })] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
+    var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
+            ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
+            : "border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
+    return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: textValue, onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
+                                    ? "border-danger dark:border-danger-400"
+                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input$1, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
+                                    input: "uppercase font-mono text-small",
+                                    inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
+                                }, startContent: jsx("span", { className: "text-default-400 text-sm", children: "#" }) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
                             return renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value));
                         }) })] })), enableRecentColors && recentColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map(function (color) {
                             return renderColorCircle(color, color, normalizeHexColor(value) === color);
@@ -1701,6 +1700,189 @@ var HeaderComponent = function (_a) {
 };
 HeaderComponent.displayName = "Header";
 
+/**
+ * KanbanCard - Contenedor de tarjeta genérico del Kanban con soporte drag and drop
+ *
+ * El contenido es 100% definido por el padre mediante renderContent.
+ * Este componente solo provee el contenedor con estilos, eventos y drag.
+ */
+var KanbanCardComponent = function (_a) {
+    var item = _a.item, columnId = _a.columnId, index = _a.index, renderContent = _a.renderContent, onCardClick = _a.onCardClick, className = _a.className, _b = _a.isClickable, isClickable = _b === void 0 ? true : _b, _c = _a.isDraggable, isDraggable = _c === void 0 ? false : _c, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd;
+    var _d = useState(false), isDragging = _d[0], setIsDragging = _d[1];
+    var handleClick = useCallback(function () {
+        if (!isDragging) {
+            onCardClick === null || onCardClick === void 0 ? void 0 : onCardClick(item);
+        }
+    }, [item, onCardClick, isDragging]);
+    var handleKeyDown = useCallback(function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onCardClick === null || onCardClick === void 0 ? void 0 : onCardClick(item);
+        }
+    }, [item, onCardClick]);
+    var handleDragStart = useCallback(function (e) {
+        if (!isDraggable)
+            return;
+        setIsDragging(true);
+        // Datos para el drop
+        e.dataTransfer.setData("application/json", JSON.stringify({ itemId: item.id, fromColumnId: columnId, fromIndex: index }));
+        e.dataTransfer.effectAllowed = "move";
+        // Notificar al padre
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(item, columnId, index);
+    }, [item, columnId, index, isDraggable, onDragStart]);
+    var handleDragEnd = useCallback(function () {
+        setIsDragging(false);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+    }, [onDragEnd]);
+    var isInteractive = isClickable && onCardClick;
+    return (jsx("div", { className: cn("bg-content1 border border-default-200 rounded-lg p-4 transition-all", isInteractive && "cursor-pointer hover:border-default-400", isDraggable && "cursor-grab active:cursor-grabbing", isDragging && "opacity-50 scale-95 shadow-lg", className), onClick: isInteractive ? handleClick : undefined, onKeyDown: isInteractive ? handleKeyDown : undefined, role: isInteractive ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: renderContent(item) }));
+};
+var KanbanCard = memo(KanbanCardComponent);
+KanbanCard.displayName = "KanbanCard";
+
+/**
+ * KanbanColumn - Columna individual del Kanban con soporte de drop
+ *
+ * Muestra un header con título y badge de conteo,
+ * una lista scrolleable de tarjetas, y estado vacío.
+ * Acepta drops de tarjetas de otras columnas.
+ */
+var KanbanColumnComponent = function (_a) {
+    var _b, _c;
+    var column = _a.column, renderItem = _a.renderItem, onCardClick = _a.onCardClick, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _d = _a.maxHeight, maxHeight = _d === void 0 ? "calc(100vh - 280px)" : _d, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.isDraggable, isDraggable = _e === void 0 ? false : _e, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onDrop = _a.onDrop, _f = _a.isDragging, isDragging = _f === void 0 ? false : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
+    // Traducciones con fallbacks
+    var t = {
+        dropHere: (_b = translations.dropHere) !== null && _b !== void 0 ? _b : "Soltar aquí",
+        emptyMessage: (_c = translations.emptyMessage) !== null && _c !== void 0 ? _c : "No hay elementos",
+    };
+    var _h = useState(false), isDragOver = _h[0], setIsDragOver = _h[1];
+    var _j = useState(null), dropIndex = _j[0], setDropIndex = _j[1];
+    var itemCount = column.items.length;
+    var isEmpty = itemCount === 0;
+    var handleDragOver = useCallback(function (e) {
+        if (!isDraggable)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setIsDragOver(true);
+    }, [isDraggable]);
+    var handleDragLeave = useCallback(function (e) {
+        // Solo salir si realmente salimos de la columna (no de un hijo)
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsDragOver(false);
+            setDropIndex(null);
+        }
+    }, []);
+    var handleDrop = useCallback(function (e) {
+        e.preventDefault();
+        setIsDragOver(false);
+        setDropIndex(null);
+        if (!isDraggable)
+            return;
+        // Calcular índice de drop basado en posición Y
+        var finalDropIndex = dropIndex !== null && dropIndex !== void 0 ? dropIndex : column.items.length;
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(column.id, finalDropIndex);
+    }, [isDraggable, column.id, column.items.length, dropIndex, onDrop]);
+    // Calcular índice de drop basado en la posición del mouse
+    var handleDragOverItem = useCallback(function (e, itemIndex) {
+        e.preventDefault();
+        var rect = e.currentTarget.getBoundingClientRect();
+        var midpoint = rect.top + rect.height / 2;
+        var newDropIndex = e.clientY < midpoint ? itemIndex : itemIndex + 1;
+        setDropIndex(newDropIndex);
+    }, []);
+    return (jsxs("div", { className: cn("flex flex-col bg-default-50 rounded-lg border border-default-200 transition-colors", isDragOver && isDragging && "border-primary-400 bg-primary-50/30", className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [renderColumnHeader ? (renderColumnHeader(column)) : (jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-default-200", children: [jsx("h3", { className: "font-semibold text-foreground", children: column.title }), jsx(Badge, { content: itemCount, color: column.countBadgeColor || "default", variant: "flat", size: "md", classNames: {
+                            badge: "text-xs font-medium min-w-6 h-6",
+                        }, children: jsxs("span", { className: "sr-only", children: [itemCount, " items"] }) })] })), jsx("div", { className: cn("flex-1 overflow-y-auto p-3 space-y-3", isDragOver && isEmpty && "min-h-24"), style: { maxHeight: maxHeight }, children: isEmpty ? (isDragOver && isDragging ? (jsx("div", { className: "h-24 border-2 border-dashed border-primary-300 rounded-lg bg-primary-50/50 flex items-center justify-center", children: jsx("span", { className: "text-primary-500 text-sm", children: t.dropHere }) })) : renderEmptyState ? (renderEmptyState(column)) : (jsx("div", { className: "flex items-center justify-center h-24 text-default-400 text-sm", children: column.emptyMessage || t.emptyMessage }))) : (jsxs(Fragment, { children: [column.items.map(function (item, index) { return (jsxs("div", { onDragOver: function (e) { return handleDragOverItem(e, index); }, children: [isDragOver && dropIndex === index && (jsx("div", { className: "h-1 bg-primary-400 rounded-full mb-3 animate-pulse" })), jsx(KanbanCard, { item: item, columnId: column.id, index: index, renderContent: renderItem, onCardClick: onCardClick, className: cardClassName, isClickable: isCardClickable, isDraggable: isDraggable, onDragStart: onDragStart, onDragEnd: onDragEnd })] }, item.id)); }), isDragOver && dropIndex === column.items.length && (jsx("div", { className: "h-1 bg-primary-400 rounded-full mt-3 animate-pulse" }))] })) })] }));
+};
+var KanbanColumn = memo(KanbanColumnComponent);
+KanbanColumn.displayName = "KanbanColumn";
+
+/**
+ * Traducciones por defecto en español.
+ * Se mezclan con las traducciones proporcionadas por el usuario.
+ */
+var DEFAULT_TRANSLATIONS = {
+    dropHere: "Soltar aquí",
+    emptyMessage: "No hay elementos",
+};
+var columnGapClasses = {
+    sm: "gap-3",
+    md: "gap-4",
+    lg: "gap-6",
+};
+/**
+ * Kanban - Tablero Kanban genérico con columnas, tarjetas y drag and drop
+ *
+ * El contenido de cada tarjeta es 100% definido por el consumidor
+ * mediante la prop `renderItem`. Esto permite usar el Kanban para
+ * cualquier caso de uso: contactos, tareas, proyectos, etc.
+ *
+ * Soporta drag and drop entre columnas con el callback `onItemMove`.
+ *
+ * @example
+ * ```tsx
+ * // Kanban de tareas con drag and drop
+ * <Kanban<Task>
+ *   columns={columns}
+ *   renderItem={(item) => <TaskCard task={item.data} />}
+ *   onItemMove={(event) => {
+ *     console.log(`Moved ${event.item.id} from ${event.fromColumnId} to ${event.toColumnId}`);
+ *     // Actualizar estado...
+ *   }}
+ * />
+ * ```
+ */
+var KanbanComponent = function (_a) {
+    var columns = _a.columns, renderItem = _a.renderItem, onCardClick = _a.onCardClick, onItemMove = _a.onItemMove, isDraggable = _a.isDraggable, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _b = _a.columnWidth, columnWidth = _b === void 0 ? "280px" : _b, _c = _a.columnGap, columnGap = _c === void 0 ? "md" : _c, _d = _a.horizontalScroll, horizontalScroll = _d === void 0 ? true : _d, columnMaxHeight = _a.columnMaxHeight, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.translations, translations = _e === void 0 ? {} : _e;
+    // Mezclar traducciones del usuario con las por defecto
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS), translations);
+    // Determinar si drag está habilitado
+    var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
+    // Estado del drag actual
+    var _f = useState(false), isDragging = _f[0], setIsDragging = _f[1];
+    var dragDataRef = useRef(null);
+    // Cuando empieza el drag
+    var handleDragStart = useCallback(function (item, columnId, index) {
+        setIsDragging(true);
+        dragDataRef.current = { item: item, fromColumnId: columnId, fromIndex: index };
+    }, []);
+    // Cuando termina el drag (sin drop válido)
+    var handleDragEnd = useCallback(function () {
+        setIsDragging(false);
+        dragDataRef.current = null;
+    }, []);
+    // Cuando se suelta en una columna
+    var handleDrop = useCallback(function (toColumnId, toIndex) {
+        var dragData = dragDataRef.current;
+        if (!dragData || !onItemMove)
+            return;
+        var item = dragData.item, fromColumnId = dragData.fromColumnId, fromIndex = dragData.fromIndex;
+        // No hacer nada si se suelta en la misma posición
+        if (fromColumnId === toColumnId && fromIndex === toIndex) {
+            handleDragEnd();
+            return;
+        }
+        // Ajustar índice si se mueve dentro de la misma columna hacia abajo
+        var adjustedToIndex = toIndex;
+        if (fromColumnId === toColumnId && fromIndex < toIndex) {
+            adjustedToIndex = toIndex - 1;
+        }
+        // Notificar al padre
+        onItemMove({
+            item: item,
+            fromColumnId: fromColumnId,
+            toColumnId: toColumnId,
+            fromIndex: fromIndex,
+            toIndex: adjustedToIndex,
+        });
+        handleDragEnd();
+    }, [onItemMove, handleDragEnd]);
+    return (jsx("div", { className: cn("flex", columnGapClasses[columnGap], horizontalScroll && "overflow-x-auto pb-4", className), children: columns.map(function (column) { return (jsx("div", { className: "flex-shrink-0", style: { width: columnWidth }, children: jsx(KanbanColumn, { column: column, renderItem: renderItem, onCardClick: onCardClick, cardClassName: cardClassName, isCardClickable: isCardClickable, maxHeight: columnMaxHeight, renderColumnHeader: renderColumnHeader, renderEmptyState: renderEmptyState, isDraggable: dragEnabled, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrop: handleDrop, isDragging: isDragging, translations: t }) }, column.id)); }) }));
+};
+var Kanban = memo(KanbanComponent);
+Kanban.displayName = "Kanban";
+
 var defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
@@ -4953,4 +5135,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { AccordionList, AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, Wizard, WizardNavigation, WizardSidebar, defaultTranslations$4 as defaultTranslations, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };
+export { AccordionList, AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, Kanban, KanbanCard, KanbanColumn, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, Wizard, WizardNavigation, WizardSidebar, defaultTranslations$4 as defaultTranslations, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };

package/dist/types/components/color-picker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACX,gBAAgB,EAGhB,MAAM,qBAAqB,CAAC;AA4C7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqPlD,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACX,gBAAgB,EAGhB,MAAM,qBAAqB,CAAC;AA4C7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsPlD,CAAC"}

package/dist/types/components/kanban/Kanban.d.ts

@@ -0,0 +1,27 @@
+import type { KanbanProps } from "./Kanban.types";
+/**
+ * Kanban - Tablero Kanban genérico con columnas, tarjetas y drag and drop
+ *
+ * El contenido de cada tarjeta es 100% definido por el consumidor
+ * mediante la prop `renderItem`. Esto permite usar el Kanban para
+ * cualquier caso de uso: contactos, tareas, proyectos, etc.
+ *
+ * Soporta drag and drop entre columnas con el callback `onItemMove`.
+ *
+ * @example
+ * ```tsx
+ * // Kanban de tareas con drag and drop
+ * <Kanban<Task>
+ *   columns={columns}
+ *   renderItem={(item) => <TaskCard task={item.data} />}
+ *   onItemMove={(event) => {
+ *     console.log(`Moved ${event.item.id} from ${event.fromColumnId} to ${event.toColumnId}`);
+ *     // Actualizar estado...
+ *   }}
+ * />
+ * ```
+ */
+declare const KanbanComponent: <T>({ columns, renderItem, onCardClick, onItemMove, isDraggable, cardClassName, isCardClickable, className, columnWidth, columnGap, horizontalScroll, columnMaxHeight, renderColumnHeader, renderEmptyState, translations, }: KanbanProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Kanban: typeof KanbanComponent;
+export {};
+//# sourceMappingURL=Kanban.d.ts.map

package/dist/types/components/kanban/Kanban.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.d.ts","sourceRoot":"","sources":["../../../../src/components/kanban/Kanban.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,WAAW,EAAsB,MAAM,gBAAgB,CAAC;AAkBlF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,eAAe,GAAI,CAAC,EAAG,0NAgB1B,WAAW,CAAC,CAAC,CAAC,4CAmGhB,CAAC;AAEF,eAAO,MAAM,MAAM,EAA4B,OAAO,eAAe,CAAC"}